/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

.container {
	width: 90%;
	padding: 0;
}

.section{
	margin: 2rem 0 2rem;
}

.section.header{
	
}

.section.header.bg{
	margin-top: 0;
	padding: 1rem 0;
}

.section.header.fixed{
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	width: 100%;
}

.section.header .logo{
	font-size: 0;
}

.section.header .logo img{
	height: 45px;
}

.section.header .info{
	position: absolute;
	right: 0;
	top: 0;
	line-height: 140%;
	color: #e82244;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
}

.section.header .info span{
	color: #333;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
}

.section.header .info a{
	font-size: 1.5rem;
	color: #e82244;
	font-weight: 700;
	font-family: 'Lato', sans-serif;
	text-decoration: none;
}

.section.after-fixed{
	margin-top: 9rem;
}

.section.menu{
	
}

.section.content{
	
}

.section.footer{
	margin-bottom: 0;
}

.section.footer a{
	
}

.section.footer a:hover{
	
}

.section.footer ul{
	list-style: none;
	margin-bottom: 0;
}

.section.footer ul li{
	margin-bottom: 0;
	line-height: 120%;
}

.section.bg{
	padding: 2rem 0;
}

.section.footer ul li{
	margin-bottom: 0;
}

.add-bottom{
	margin-bottom: 20px;
}

.add-half-bottom,
.half-bottom{
	margin-bottom: 10px;
}

.remove-bottom{
	margin-bottom: 0px;
}

.remove-top{
	margin-top: 0px;
}

.google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.owl-carousel .item{
	margin: 0 0.5rem;
}

h1{
	font-size: 2.5rem;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
}

h2{
	font-size: 1.6rem;
	color: #333;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h3{
	font-size: 1.8rem;
	color: #67acbc;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}

h4{
	font-size: 2.0rem;
	color: #e82244;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h5{
	font-size: 1.5rem;
}

h6{
	font-size: 1.3rem;
}

p{
	font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .7px;
    font-family: 'Source Sans Pro', sans-serif;
}

.mobile{
	display: block;
}

.no-mobile{
	display: none;
}

.shadow{
	-webkit-box-shadow: 0px 1px 15px #888888;
	-moz-box-shadow: 0px 1px 15px #888888;
	box-shadow: 0px 1px 15px #888888;
}

.contacto{
	font-size: 2rem;
	font-weight: 400;
	margin-bottom: 1.3rem;
	display: block;
	font-family: 'Source Sans Pro', sans-serif;
}

label{
	font-size: 1.3rem;
	margin-bottom: .2rem;
	font-weight: 300;
	letter-spacing: .7px;
}

input, textarea{
	margin-bottom: .5rem;
	font-size: 1.3rem;
	border-radius: 0px;
}

input[type="text"], input[type="email"], input[type="tel"]{
	height: 30px;
	border-radius: 0px;
}

input[type="submit"]:hover{
	border-radius: 0px;
	background: #333333;
	color: white;
	border: 0px;
}

input[type="submit"]{
	border-radius: 0px;
	background: #e82244;
	color: white;
	border:0px;
}

textarea{
	min-height: 50px;
}

.gris{
	background: #ebebeb;
}

.verde{
	background: green;
}

.verde-font{
	color: green;
}

.lightgray{
	background: #eeeeee;
	    border-bottom: 3px solid #e82244;
}

.lightgray2{
	background: #eeeeee;
}

.gray{
	background: #333333;
	color: white;
	padding: 1rem;
}

.blue{
	background: #67acbc;
	color: white;
}

.dark{
	background: #333333;
	color: white;
	font-family: 'Lato', sans-serif;
}

.dark h3{
	color: #e82244;
}

.icon{
	color: #e82244;
	font-size: 6rem;
	margin: .5rem;
	margin-top: 1.2rem;
}

.icon2{
	color: #77e5f8;
	font-size: 4rem;
	margin: .5rem;
	margin-top: 1.2rem;
}

.icon3{
	color: #fff;
	padding: 1rem;
	font-size: 3rem;
	margin: .5rem;
	margin-top: 1.2rem;
	
}

.block1{
	background: #e82244;
	width: 100%;
	margin-bottom: 1rem;
}

.block2{
	background: #67acbc;
	width: 100%;
	margin-bottom: 1rem;
}

text{
	font-family: 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
	font-size: 2rem;
	font-weight: 700;
}

.bullet{
	color: #e82244;
	font-size: 20px;
}

.bullets li{
	list-style-type: none;
	font-size: 1.9rem;	
	font-weight: 400;
    letter-spacing: .7px;
    font-family: 'Source Sans Pro', sans-serif;
}

.banner{
	background: url(../img/banner2.png) #fff left top no-repeat;
	 background-position: 10% 50%;
	 background-repeat: no-repeat;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
}
.banner h1{
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 1px 5px #000;
	letter-spacing: .05rem;
	margin-top: 10%;
	margin-bottom: 30%;
	font-size: 160%;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
}

.form{
	background: #fff;
	padding: 1rem;
	color: #333333;
}

.form span{
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	color: #e82244;
	text-align: center;
}

white{
	color: white;
}

red{
	color: #e82244;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}

bold{
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	
}

light{
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;	
}

.bg-footer{
	background: url(../img/bg-footer.jpg) #fff left top no-repeat;
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
}

.bg-footer a{
	background: url(../img/bg-footer.jpg) #fff left top no-repeat;
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 600;
}

.menu ul{
	margin-bottom: 0;
}

.menu li{
	list-style-type: none;
	display: inline-block;
	text-align: center;
	font-size: 1.6rem;
	margin-bottom: 0;
}

.menu li.short{
	width: 10%;
}

.menu li.long{
	width: 18%;
}

.menu li.med{
	width: 14%;
}


.menu li a{
	text-decoration: none;
	color: #e82244;
	text-transform: uppercase;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
}

.menu li a:hover{
	text-decoration: none;
	background: #e82244;
	color:#fff;
	text-transform: uppercase;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
}

.words ul{
	margin-bottom: 0;
}

.words li{
	list-style-type: none;
	display: inline-block;
	text-align: center;
	font-size: 2.4rem;
	margin-bottom: 0;
}

.words li.long{
	width: 18%;
}

.words li{
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
}


.button{
	background: #e82244;
	color: white;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 1px;
	font-family: 'Source Sans Pro', sans-serif;
	border: 0px;
	border-radius: 0px;
}

.button:hover{
	background: #333333;
	color: white;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 1px;
	font-family: 'Source Sans Pro', sans-serif;
	border: 0px;
	border-radius: 0px;
}


.fondo{
	background: url(../img/bg.png) #fff left top no-repeat;
	 background-position: 10% 30%;
	 background-repeat: no-repeat;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
}

.fondo h2{
	width: 70%;
}

.overlay{
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transition: all 200ms linear;
}

.overlay.open{
	visibility: visible;
	opacity: 1;
}

.modal{
	padding: 40px;
	background-color: white;
	width: 60%;
	height: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	border-radius: 12px;
	z-index: 10;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px  black;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: all 200ms linear;
	transition-delay: 100ms;
}

.modal.open{
	visibility: visible;
	opacity: 1;
}

.close-modal{
	background-color: black;
	border-radius: 100%;
	color: white;
	height: 40px;
	width: 40px;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
}

.modal h2{
	color: red;
	font-size: 20px;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	margin-bottom: 40px;
}

.modal h3{
	color: black;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	
}


/* Larger than mobile */
@media (min-width: 400px) {
	
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	
}

/* Larger than tablet */
@media (min-width: 750px) {
	.container {
    	width: 85%;
    }
    
    .section.header .logo img{
	    height: auto;
    }
    
    .section.header .info{
	    line-height: 160%;
	    top: 2.0rem;
    }
    
    .section.header .info span{
	    font-size: 2.0rem;
    }
    
    .section.header .info a{
	    font-size: 2.3rem;
    }
    
    .section.after-fixed{
		margin-top: 12.8rem;
	}
    
    .section.footer ul li:last-child{
	    float: right;
    }
    
    .section.footer ul li{
		display: inline-block;
		margin-right: 1.0rem;
	}
	
	.no-mobile{
		display: block;
	}
	
	.mobile{
		display: none;
	}
	
	.banner{
	background: url(../img/banner.png) #fff left top no-repeat;
	 background-position: 10% 50%;
	 background-repeat: no-repeat;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
}

.banner h1{
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 1px 5px #000;
	letter-spacing: .05rem;
	margin-top: 10%;
	margin-bottom: 30%;
	font-size: 160%;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
}
}



/* Larger than desktop */
@media (min-width: 1000px) {
	.modal{
		padding: 100px 60px;
		width: 60%;
	}
	.container{
		max-width: 1200px;
	}
}

/* Larger than Desktop HD */
@media (min-width: 1400px) {
	.modal{
		padding: 80px;
		width: 40%;
	}
}