/* contacto */
.contacto {
	width: 100%;
	background: #FFF url(../images/background-contacto.jpg) no-repeat center center;
	min-height: 320px;
	margin-bottom: 50px;
}

a.lets-work {
	display: none;
}

.main h1 {
	font-family: 'ralewayextrabold';
	color: #fff;
	font-size: 48px;
	text-transform: uppercase;
	padding-top: 60px;
	letter-spacing: -2px;
	line-height: 44px;
	text-align: right;
}

.container .highlight {
	color: #fff;
	font-family: 'ralewayregular';
	font-size: 19px;
	margin-top: 30px;
	text-align: right;
	max-width: 40%;
	float: right;
}

.main h3 {
	color: #2d2d2d;
	font-family: 'ralewayextrabold';
	text-transform: uppercase;
	font-size: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e8e8e9;
	margin-bottom: 40px;
}

form {
	font-family: 'ralewayregular';
}

label {
	display: block;
	color: #000;
	font-size: 14px;
	margin: 20px 0;
}

label span {
	color: #646464;
}

input.text {
	width: 90%;
	border: none;
	border-bottom: 1px solid #28282e;
	padding: 0 0 4px;
	color: #646464;
	font-size: 14px;
}

form .fourcol > span {
	/*color: #646464;
	font-size: 12px;
	margin: -18px 0 0 25px;
	display: block; */
}


.fourcol.selects {
 overflow: hidden;
 width: 33.3%;
}

textarea {
	width: 100%;
	resize: none;
	border: none;
	border-bottom: 1px solid #28282e;
	padding: 0 0 4px;
	color: #646464;
	font-size: 14px;
}

textarea:focus, input:focus{
    outline: 0;
}

input.submit {
	background: #191c23;
	border: 1px solid #191c23;
	font-family: 'ralewayregular';
	font-size: 14px;
	text-align: center;
	color: #fff;
	padding: 20px 50px;
	transition: 0.4s;
	margin: 40px 0 60px;
	cursor: pointer;
}

input.submit:hover {
	color: #191c23;
	background: #fff;
}

.msg {
  font-size: 24px;
  margin: 0 0 24px 0;
  color: #FFF;
  padding: 20px 50px;
  font-family: 'ralewaylight';
}

.msg.success {
  background: #2ECC71;
  border-bottom: 4px solid #269354;
}

.msg.error {
  background: #e74c3c;
  border-bottom: 4px solid #c0392b;
}

p {
	margin-bottom: 30px;
	font-family: 'ralewayregular';
}

.especial { margin: 55px 0 40px; float:left; }

.especial .fourcol {
 margin-right: 0!important;
}

/*Socials*/
.socials {
	width: 100%;
	background: #308967;
	color: #fff;
	float: left;
	height: 180px;
}

.socials .social-button {
 width: 25%;
 float: left;
 height: 180px;
 
}


.socials .social-button a {
 float: left;
 min-height: 100%;
 min-width: 100%;
 
	cursor:pointer;
	-webkit-transition: background 0.2s linear 0s;  /* Chrome y Safari */
	-o-transition: background 0.2s linear 0s;  /* Opera */
	-moz-transition: background 0.2s linear 0s;  /* Mozilla Firefox */
	-ms-transition: background 0.2s linear 0s;   /* Internet Explorer */
	transition: background 0.2s linear 0s;  /* W3C */

}
/*facebook */
.socials a.facebook { 
	background: #E8E8E8;	
	position: relative; /* para centrado vertical */
}
.socials a.facebook:hover { 
	background-color: #415E9B;
}
.socials a.facebook:hover .facebook-icon { 
	background: url("img/social.png") 0px 56px;
}


.socials a.facebook .facebook-icon {
  background: url("img/social.png") 0px 0px;
  width: 25px;
  height: 56px;
 /* margin: 12.7% auto 0;
  text-align: center;*/
  
  /* para centrado vertical */
  position: absolute;
  top: 50%;
  margin-top: -33px;
  right: 50%;
  
}


/*twitter*/

.socials a.twitter { 
	background: #F1F1F1;	
	position: relative; /* para centrado vertical */
}
.socials a.twitter:hover { 
	background-color: #55ACEE;
}
.socials a.twitter:hover .twitter-icon { 
	background: url("img/social.png") -34px 56px;
}


.socials a.twitter .twitter-icon {
    background: url("img/social.png") -34px 0px;
  width: 52px;
  height: 51px;
  position: absolute;
  top: 50%;
  margin-top: -33px;
  right: 43%;
}


/*behance*/
.socials a.behance {
	background: #F7F7F7;	
	position: relative; /* para centrado vertical */
}
.socials a.behance:hover {
	background-color: #005CFF;
}
.socials a.behance:hover .behance-icon { 
	background: url("img/social.png") -96px 56px;
}

.socials a.behance .behance-icon {
  background: url("img/social.png") -96px 0px;
  width: 74px;
  height: 51px;
  position: absolute;
  top: 50%;
  margin-top: -33px;
  right: 41%;
}


/* vimeo */
.socials a.vimeo {
	background: #F8F8F8;	
	position: relative; /* para centrado vertical */
}
.socials a.vimeo:hover {
	background-color: #1BB6EC;
}
.socials a.vimeo:hover .vimeo-icon {
	background: url("img/social.png") -173px 56px;
}

.socials a.vimeo .vimeo-icon {
  background: url("img/social.png") -173px 0px;
  width: 56px;
  height: 54px;
  position: absolute;
  top: 50%;
  margin-top: -33px;
  right: 42%;
}





/*
			B.E.M Naming convention:
			(Block) .custom-dropdown			= The main component
			(Element) .custom-dropdown__select	= Descendant of .custom-dropdown
			(Modifier) .custom-dropdown--*		= Different state of .custom-dropdown
		*/

		.custom-dropdown--large {
			font-size: 1.5em;
		}

		.custom-dropdown--small {
			font-size: .7em;
		}

		.custom-dropdown__select{
			font-size: inherit; /* inherit size from .custom-dropdown */
			padding: .5em; /* add some space*/
			margin: 0; /* remove default margins */
		}

	
		
		.custom-dropdown__select--emerald {
			background-color: #20b390;
			color: #fff;    
		}				

		.custom-dropdown__select--gris1 {
			background-color: #E8E8E8;
			color: #111;    
		}			
	
		.custom-dropdown__select--gris2 {
			background-color: #F1F1F1;
			color: #111;    
		}		
		
		.custom-dropdown__select--gris3 {
			background-color: #F7F7F7;
			color: #111;    
		}		

		@supports (pointer-events: none) and
				  ((-webkit-appearance: none) or
				  (-moz-appearance: none) or
				  (appearance: none)) {

			
	

			.custom-dropdown {
				position: relative;
				display: inline-block;
				vertical-align: middle;
			}

			.custom-dropdown__select {
				
				border: 0;
				
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;    
				width: 100%;
				
				font-family: 'ralewayextrabold';
				font-size: 0.5em;
				text-transform: uppercase;
				
				padding: 30px 2.5em 30px 12px;
				
				
			}

			.custom-dropdown::before,
			.custom-dropdown::after {
				content: "";
				position: absolute;
				pointer-events: none;
			}

			.custom-dropdown::after { /*  Custom dropdown arrow */
				content: "\25BC";
				height: 1em;
				font-size: .625em;
				line-height: 1;
				right: 1.2em;
				top: 50%; margin-top: -.5em;
			}

			.custom-dropdown::before { /*  Custom dropdown arrow cover */
				width: 2em;
				right: 0; top: 0; bottom: 0;
				border-radius: 0 3px 3px 0;
			}

			.custom-dropdown__select[disabled] {
				color: rgba(0,0,0,.3);
			}

			.custom-dropdown.custom-dropdown--disabled::after {
				color: rgba(0,0,0,.1);
			}

			/* White dropdown style */
			.custom-dropdown--white::before {
				background-color: #fff;
				border-left: 1px solid rgba(0,0,0,.1);
			}

			.custom-dropdown--white::after {
				color: rgba(0,0,0,.9);
			}					

			/* Emerald dropdown style */
			.custom-dropdown--emerald::before {
				background-color: #1aa181;
			}

			.custom-dropdown--emerald::after {
				color: rgba(0,0,0,.4);
			}


			/* Red dropdown style */
			.custom-dropdown--red::before {
				background-color: #d53a22;
			}

			.custom-dropdown--red::after {
				color: rgba(0,0,0,.4);
			}

			/* FF only temporary & ugly fixes */
			/* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */
			/* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
			@-moz-document url-prefix() {
				.custom-dropdown__select 						 { padding-right: .9em }
				.custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
				.custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
			}	

		}

      
	.custom-dropdown {
		width: 100%;
		display: inline-block;
	}        
	
	select.custom-dropdown__select option.opciones {
		background: #fff;
		color:#3F3F3F;
		font-family: 'ralewayregular';
		font-size: 15px;
		
	}
	
		
	select.custom-dropdown__select option.no-op {
		text-decoration: line-through;
		display:none;
	}
	
	
	p.line {
	 border-top: 1px dashed #CDCDCD;
	 padding: 14px 0 0 0;
	}


@media screen and (max-width: 767px){
	.especial{width: 91%;}
	.especial .selects{width: 100%;}
	.socials a.behance .behance-icon{right: 30%;}
	input.text{width: 100%;}
}

@media screen and (max-width: 640px){
	.socials a.behance .behance-icon{right: 22%;}
	.socials a.twitter .twitter-icon{right: 32%;}
}

@media screen and (max-width: 450px){
	.socials a.behance .behance-icon{right: 14%;}
	.socials a.twitter .twitter-icon{right: 24%;}
	.socials a.facebook .facebook-icon{right: 38%;}
	.socials a.vimeo .vimeo-icon{right: 28%;}
}

@media screen and (max-width: 375px){
	.socials a.behance .behance-icon{right: 9%;}
	
}


@media screen and (max-width: 320px){
	.socials a.behance .behance-icon{right: 3%;}
	.socials a.twitter .twitter-icon{right: 15%;}
	.socials a.facebook .vimeo-icon{right: 19%;}
	
}