@yellow: #ebc400;
@blue: #83b2e0;
@brown:#5c272a;

img{ max-width: 100%;}

.img100{ width: 100%;}

.npnm{ margin:0; padding: 0}

body{ background:#41221c;font-family:"BrandonGrotesque-Regular"; font-size:3vh; color:@brown}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #5C272A !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #5C272A !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #5C272A !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: #5C272A !important;
}

.parsley-errors-list{ display:none}
.parsley-error{ border-color:#F00 !important}

.parsley-custom-error-message{ color:#fff; background-color:#F00;font-family:"BrandonGrotesque-Regular";  }

.fcodigo{
	.parsley-errors-list{ display:block; list-style:none; padding:0; }
	.parsley-custom-error-message{ padding:5px;}
	}

header{
	border-bottom:5px solid #5c272a; width:100%; position:fixed; top:0; z-index:1000;background:#41221c; color:#FFF;
	.logo{
		display:inline-block; width:25%; margin-left:2%;
		img{ width:49%; display:inline-block; margin:-5px 0; padding:0}
	}
	.bars{
		float:right;
		font-size:2vw;
		margin:0.8vw;
	}
	a,a:hover,a:active{ color:#FFF;}
	
}
h1{
	font-family:"BrandonGrotesque-Black"; font-size:6vh; padding:3vh;
}
strong{
	font-family:"BrandonGrotesque-Black";overflow:hidden; 
}
.lx{ background-size:170% !important; height:100%; position:absolute; width:100%; background-position:center;}
.ly{ background-size:100% !important; height:100%; position:absolute; width:100%; background-position:center;}
.text-small{ font-size:2vh}
.yellow{ color:@yellow}
section{ position:relative; height:100vh;background-attachmentx:fixed; background-size:cover;}

.txtalt{ text-align: center}

#menu{
	position:fixed; top:0; left:0; width:100%; height:100%;z-index:1001; background:rgba(65,34,28,0.90); display:none;
	ul{
		text-align:center;
		font-size:5vh;
		list-style:none;
		margin:15vh 0 0 0 ;
		padding:0;
		font-family:"BrandonGrotesque-Black";
		a{ color:#EBC400;}
		li{
			padding:3vh 0; margin:0;
			}
	}
}
#carousel{ opacity:0}
#sec1{
	background:url(../../images/sec1.jpg) center;
	height:auto;
}

#sec2{
	background:url(../../images/sec2.png) center;
	.l1{ background:url(../../images/x1.png); }
	.l2{ background:url(../../images/x2.png); }
	img{ margin-bottom:1vh}
}
#sec3{
	background:url(../../images/sec3.png) center;
	.l1{ background:url(../../images/y1.png); }
	.l2{ background:url(../../images/y2.png); }
}
#sec4{
	background:url(../../images/sec1.jpg) center;
	background-size:cover;
	.l1{ background:url(../../images/z1.png); }
	.l2{ background:url(../../images/z2.png); }
	h1{ text-align:center; color:#ebc400}
	form{
		background:#FFFEEA; color:#e03c31; padding:40px; color:#5C272A;
		h2{
			font-family:"BrandonGrotesque-Black";
			font-size:5vh; margin:0; padding:0;
			color:#E03C31;
		}
		h3{
			font-family:"BrandonGrotesque-Black";
			font-size:4vh; margin:0; padding:0;color:#E03C31;
		}
		.checkbox{ 
			font-size:2vh;
			a,a:hover,a:active{ color:#5C272A !important; text-decoration:underline}
		}
		
		.imgsel{ margin:8px; display:inline-block; border:4px solid transparent;}
		.btnext{
			background:#5C272A; color:#FFF;font-family:"BrandonGrotesque-Black"; display:block; text-align:center; font-size:4vh; line-height:9vh; margin-top:8px;
			}
		textarea{
			width:100%;
			margin:10px 0;
			height:200px  !important;
			padding:5px;
		}
		input{
			width:100%;
			color:#5C272A;
			padding:5px;
		}
		.form-control,select{ height:50px}
		.form-control{
			-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; color:#5E292A;
			color:#5C272A;
			font-family:"BrandonGrotesque-Black"; font-size:2.5vh;
			border:2px solid #5C272A;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			&:focus{ border-color:@yellow;}
		}
		
		.steps{ display:none}
		.step1{ display:block}
	}
}
#thankyou{
	margin-top:4%;text-align:center; color:#FFF; height:auto;
	.b1{
		padding:15vh 0;
		background:#FFA300;
	}
	.b2{
		.divider{ width:20%; border-bottom:5px solid @yellow; margin:auto}
		a{ color:#41221C; display:inline-block; padding:1vh 3vw; background-color:#E03C31;font-family:"BrandonGrotesque-Black";}
	}
}
footer{
	text-align:center;
	color:#FFF;
	img{ margin:20px 0;}
	a,a:hover,a:active{ color:#FFF;}
	.redes{ display:inline-block; margin: 10px;}
	.neg{ background:#000; padding:10px;}
}
.terminos{
	padding:30px; font-size:14px;
	.yellow{ color:@yellow}
}

#postal{
	
	width:1200px;
	height:628px;
	position:fixed;
	top:5%;
	left:-5000px;
	z-index:100000;
	background-image:url(../../images/postal1.png);
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
	font-family:"BrandonGrotesque-Black"; 
	.texto{
		color:#5E292A;
		font-size:35px;
		position:absolute;
		left:70px;
		top:120px;
		width:550px;
		height:357px;
		overflow:hidden;
		text-align:center;
		}
}

.postcolor{
	background:#FFF;
	padding:20px;
	width:900px;
	#xfre{
		-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
		box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
		}
}
@media (min-width: 768px) {
	//desktop
	.hidden-sm{ display: none !important;}
	#sec1{
		#myVideo{
			width:100%;
			height:auto;
			position:absolute;
			top:0;
			left:0;
		}
		.logo {
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		}
		.scroll{
			position: absolute;
			bottom:2%;
			margin: 0 auto;
			left: 0;
			right: 0;
		}
	}
	#sec2{
		.l3{
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  z-index:105;
		}
		
		
	}
	#sec3{
		.l3{
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  z-index:101;
		  width:100%;
		  height:60vh;
		}
		
		#buttons{
			margin-top:30px; z-index:500;
			button{ background:none; border:0}
			#relx{
				min-width:150px; display:inline-block;
				span{
					
				}	
			}
		}
		
	}
	#sec4{
		.l3{
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  z-index:105;
		}
		
	}
}

@media (max-width: 768px) { 
	//mobile
	header{
		.logo{ 
			width:70%;
			img{ width:45%; margin:0}
		}
		.bars{
			font-size:6vw;
			margin:2vw 3vw 0 0;
		}
		
	}
	.lx, #sec3>div{ background-size:cover !important; background-repeat:no-repeat}
	#sec1{
		text-align:center; padding:4vw 0; margin-top:40px;
		.logo{ 
			position:relative;
			
		}
		.scroll{ position:relative;}
	}
	#sec2{
		img{ height:15vh}
		height: auto;
        h1{ padding: 2vh;}
        .col-xs-12{
            margin: 20px 0 ;
            &::last-child{
                margin-bottom: 60px;;
            }
        }
	}
	#sec3{
        //
        
		.l3{
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  z-index:101;
		  width:100%;
		  height:60vh;
		}
		#carousel{ margin:0 20px; max-height:240px}
		
		#buttons{
			margin-top:30px; z-index:500;
			button{ background:none; border:0}
			#relx{
				min-width:150px; display:inline-block;
				span{
					
				}	
			}
		}
		
	}
    
	#sec4{
        height: auto;
        padding: 10px 0; 
		.col-sm-8{ text-align:center;}
		.imgsel{
			width:42%;
			img{ max-width:none; width:100%;}
			}
		form{padding: 20px;}
	}
	.postcolor{}
}






.ckk.parsley-error{
    background: #F00 !important;
}


.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}