@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
	padding: 0;
	
}
.rounded{
	-moz-border-radius: 10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari y Chrome */
	-khtml-border-radius: 10px; /* Konkeror, ... */
	border-radius: 10px; /* Opera 10.50, IE y CSS3 */
}
.section{
	width: 100%;
	height: auto;
	position: relative;
}
.hidden{
	display: none;
}
.lang-sp{
	display: block;
}
.lang-en{
	display: none;
}
@media handheld, only screen and (max-width: 1000px) {
	.rounded{
		-moz-border-radius: 0; /* Firefox */
		-webkit-border-radius: 0; /* Safari y Chrome */
		-khtml-border-radius: 0; /* Konkeror, ... */
		border-radius: 0; /* Opera 10.50, IE y CSS3 */
	}
}
h1{
    margin: 0;
}
#home{
	height: 100vh;
}
#home .home-logo{
	display: none;
}
#home .lang{
	background: url("../images/bg-black-50.png");
	width: 5%;
	height: auto;
	color: #ffffff;
	font-size: 0.7vw;
	position: fixed;
	top: 1%;
	right: 1%;
	z-index: 100;
	padding: 5px;
}
#home #lang-sp{
	font-family: Bold;
	display: inline-block;
	border-right: 2px solid #ffffff;
	padding: 2px 5px;
	cursor: pointer;
}
#home #lang-en{
	font-family: Light;	
	display: inline-block;
	padding: 2px 5px;
	cursor: pointer;
}
#home #slides{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	z-index: 0;

}

#home .slide{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: -1;
	overflow: hidden;

}
#home .slide h1{
	width: 90%;
	font-family: Ultra;
	font-size: 3vw;
	padding: 0;
	color: #ffffff;
	margin: auto;
	text-align: right;
}
#home .slide h2{
	width: 90%;
	font-family: Medium1;
	font-size: 2vw;
	padding: 0;
	margin: auto;
	text-align: right;
	
}
#home .slide-bar{
	width: 100%;
	height: 15vh;
	position: absolute;
	bottom: 5vh;
	left: 0;
	right: 0;
	margin: auto;
}
#home .slide-bar-logo{
	background: url("../images/logo-h.svg") no-repeat center;
	background-size: contain;
	width: 50%;
	height: 95%;
	margin: auto;
}
#home .slide-barleft{
	background: #ffffff;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}
#home .slide-barright{
	background: #ff0000;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}

#home .slide-01{
	background: url(../images/slide-01.jpg) no-repeat center center; 
	background-size: cover;
}
#home .slide-02{
	background: url(../images/slide-02.jpg) no-repeat center center; 
	background-size: cover;
}
#home .slide-03{
	background: url(../images/slide-03.jpg) no-repeat center center; 
	background-size: cover;
}
#home .slide-04{
	background: url(../images/slide-04.jpg) no-repeat center center; 
	background-size: cover;
}
#home .slide-05{
	background: url(../images/slide-05.webp) no-repeat center center; 
	background-size: cover;
}
@media handheld, only screen and (max-width: 1000px) {
	#home{}
	#home .home-logo{
		display: block;
		background: url("../images/logo-h.svg") no-repeat top center;
		background-size: contain;
		width: 75%;
		height: 25vh;
		position: absolute;
		top: 0;
		left: 5%;
		margin: auto;
		z-index: 100;
	}
	#home .lang{
		width: 10%;
		height: auto;
		font-size: 4vw;
		position: fixed;
		top: 0;
		right: 0;
	
	}
	#home #lang-sp{		
		display: block;
		border-right: none;
		padding: 10px 5px;
	}
	#home #lang-en{
		display: block;
		padding: 10px 5px;
	}
	#home #slides{
	}

	#home .slide{
	}
	#home .slide h1{
		font-size: 6vw;
		text-align: center;
		padding: 10px auto;
	}
	#home .slide h2{
		font-size: 4vw;
		text-align: center;
		padding: 10px auto;
	}
	#home .slide-bar{
		background: #ff0000;
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 15vh;
		left: 0;
		right: 0;
		margin: auto;
		
	}
	#home .slide-bar-logo{
		display: none;
	}
	#home .slide-barleft{
		display: none;
	}
	#home .slide-barright{
		width: 100%;
		height: auto;
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		margin:10px auto;
	}

	#home .slide-01{
		background: url(../images/slide-01.jpg) no-repeat center center; 
		background-size: cover;
	}
	#home .slide-02{
		background: url(../images/slide-02.jpg) no-repeat center center; 
		background-size: cover;
	}
	#home .slide-03{
		background: url(../images/slide-03.jpg) no-repeat center center; 
		background-size: cover;
	}
	#home .slide-04{
		background: url(../images/slide-02.jpg) no-repeat center center; 
		background-size: cover;
	}
	#home .slide-05{
		background: url(../images/slide-05.webp) no-repeat center center; 
		background-size: cover;
	}
}
#aboutus{
	height: 130vh;
	background: #f5f7fb;
}
#aboutus h1{
	font-family: Bold;
	font-size: 3vw;
	margin: 0;
	padding:0;
}
#aboutus p{
	font-family: Light;
	font-size: 1.5vw;
}
#aboutus ul{
	font-family: Light;
	font-size: 1.5vw;
	list-style: none;
	padding: 0;
}
#aboutus .aboutus-logo{
	background: url("../images/logo-h.svg") no-repeat center bottom;
	background-size: contain;
	width: 25%;
	height: 20vh;
	border-top: 10px solid #ff0000;
	position: absolute;
	top:5%;
	left: 1%;
	margin: auto;
	z-index: 100;
}
#aboutus .aboutus-mision {
	width: 25%;
	border-left: 10px solid #29c0a4;
	padding:0 10px;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	margin: auto;
}
#aboutus .aboutus-mision h1{
	color: #29c0a4;
}
#aboutus .aboutus-vision {
	width: 25%;
	border-left: 10px solid #f09e00;
	padding:0 10px;
	position: absolute;
	top: 20%;
	right: 5%;
	margin: auto;
}
#aboutus .aboutus-vision h1{
	color: #f09e00;
}
#aboutus .aboutus-valores {
	width: 25%;
	padding:0 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	
}
#aboutus .aboutus-valores h1{
	color: #558bff;
	border-bottom: 10px solid #558bff;
}
#aboutus .aboutus-target-circle{
	background: url("../images/aboutus-img-01.svg") no-repeat center center;
	background-size: contain;
	width: 25%;
	height: 25%;
	position: absolute;
	top: 20%;
	bottom: 0;
	left: 5%;
	margin: auto;
		
}
#aboutus .aboutus-target-bar{
	background: url("../images/aboutus-img-02.svg") no-repeat center center;
	background-size: cover;
	width: 80%;
	height: 10px;
	position: absolute;
	top: 20%;
	bottom: 0;
	left: 15%;
	right: 0;
	margin: auto;
}
@media handheld, only screen and (max-width: 1000px) {
	#aboutus{
		height: auto;
	}
	#aboutus h1{
		font-size: 7vw;
		margin: 0;
		padding:0;
	}
	#aboutus p{
		font-size: 6vw;
	}
	#aboutus ul{
		font-size: 6vw;
	}
	#aboutus .aboutus-logo{
		background: url("../images/logo-h.svg") no-repeat center center;
		width: 95%;
		height: 30vh;
		border-top: 10px solid #ff0000;
		position: relative;
		top:auto;
		left: auto;
		margin:10% auto;
		z-index: 10;
	}
	#aboutus .aboutus-mision {
		width: 90%;
		border-left:none;
		padding:0 10px;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin: auto;
	}
	#aboutus .aboutus-mision h1{
		border-bottom: 10px solid #29c0a4;

	}
	#aboutus .aboutus-vision {
		width: 90%;
		border-left: none;
		padding:0 10px;
		position: relative;
		top: auto;
		right: auto;
		margin: auto;
	}
	#aboutus .aboutus-vision h1{
		color: #f09e00;
		border-bottom: 10px solid #f09e00;		
	}
	#aboutus .aboutus-valores {
		width: 90%;
		padding:0 10px;
		position: relative;
		bottom: auto;
		left: auto;
		right: auto;
		margin: auto;

	}
	#aboutus .aboutus-valores h1{
	}
	#aboutus .aboutus-target-circle{
		width: 80%;
		height: 30vh;
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		margin: auto;
	}
	#aboutus .aboutus-target-bar{
		display: none;
	}
}
#services{	
}
#services .services-logo{
	width: 25%;
	height: 50%;
	background: url("../images/services-logo.svg") no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 100;
}
#services .services-title{
	width: 90%;
	height: 6vw;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;	
	z-index: 10;
	border-bottom: 10px solid #000000;
}
#services .services-title h1{
	width: auto;
	font-family: UltraItalic;
	font-size: 5vw;
	color: #ff0000;
	text-align: right;
	margin: 1% auto;
	padding: 0;

}

#services .services-info{
	width: 30%;
	height: 50vh;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5%;
	margin: auto;
	z-index: 10;
	
}
#services .services-info h2{
	font-family: Bold;
	font-size: 2vw;
	color: #ffffff;
	text-align: center;
}
#services .services-info p{
	font-family: Light;
	font-size: 1vw;
	line-height: 1.5vw;
	color: #ffffff;
	text-align: justify;
	margin: 5%;
}
#services .services-info-bg{
	background: url("../images/services-bg-01.png");
}
#services .slideshow{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	z-index: 0;
}
#services .slideshow-page{
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: -1;
	overflow: hidden;	
}
#services .slideshow-page-01{
	background: url(../images/slide-01.jpg) no-repeat center center;
	background-size: cover;
}
#services .slideshow-page-02{
	background: url(../images/slide-02.jpg) no-repeat center center;
	background-size: cover;
}
#services .slideshow-page-03{
	background: url(../images/slide-03.jpg) no-repeat center center;
	background-size: cover;
}
#services .slideshow-page-04{
	background: url(../images/slide-02.jpg) no-repeat center center;
	background-size: cover;
}
#services .slideshow-page-05{
	background: url("../images/slide-05.webp") no-repeat center center;
	background-size: cover;
}
#services .clycle-pager{
	
	width: 30%;
	height: 37.5vh;	
	position: absolute;
	top: 0;
	bottom: 0;
	left: 25%;
	margin: auto;
	padding: 0;
}
#services span{
	width: auto;
	font-family: Book;
	font-size: 1.5vh;
	color: #ffffff;
	text-align: center;
	margin: 0;
	padding: 0;		
}
#services .slideshow-pager{
	width: 70%;
	display: inline-block;
	padding:1.5vh 10px;
	cursor: pointer;
	margin: 1.5vh 0;
}
#services .slideshow-page-1{
	background: #da4af8;
}
#services .slideshow-page-2{
	background: #8d44e0;
	margin-left: 5%;
}
#services .slideshow-page-3{
	background: #07b3e7;
	margin-left: 10%;
}
#services .slideshow-page-4{
	background: #ffa300;
	margin-left: 5%;
}
#services .slideshow-page-5{
	background: #68db20;
}
#services .slideshow-page-1:hover{
	background: #3e2240;
}
#services .slideshow-page-2:hover{
	background: #29183c;
}
#services .slideshow-page-3:hover{
	background: #00465a;
}
#services .slideshow-page-4:hover{
	background: #5f4001;

}
#services .slideshow-page-5:hover{
	background: #2a4a0c;
}
@media handheld, only screen and (max-width: 1000px) {
	#services{
		height: auto;
		background: #f5f7fb;
	}
	#services .services-logo{
		width: 75%;
		height: 50vh;
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		margin: auto;
		z-index: 100;

	}
	#services .services-title{
		width: 90%;
		height: 12vw;
		position: relative;		
		top: auto;
		right: auto;
		left: auto;
		margin:5% auto;	
		z-index: 10;
		border-bottom: 10px solid #000000;
	}
	#services .services-title h1{
		font-size: 10vw;
	}

	#services .services-info{
		width: 90%;
		height: auto;
		position: absolute;
		top: auto;
		bottom: 5%;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 10;
		
	}
	#services .services-info h2{
		font-size: 6vw;
	}
	#services .services-info p{
		font-size: 5vw;
		line-height: 5.5vw;
	}
	#services .services-info-bg{
	}
	#services .slideshow{
		height: 100vh;
	}
	#services .slideshow-page{
		height: 100vh;
	}
	#services .slideshow-page-01{
		background: url(../images/slide-01.jpg) no-repeat center center;
		background-size: cover;
	}
	#services .slideshow-page-02{
		background: url(../images/slide-02.jpg) no-repeat center center;
		background-size: cover;
	}
	#services .slideshow-page-03{
		background: url(../images/slide-03.jpg) no-repeat center center;
		background-size: cover;
	}
	#services .slideshow-page-04{
		background: url(../images/slide-02.jpg) no-repeat center center;
		background-size: cover;
	}
	#services .slideshow-page-05{
		background: url("../images/slide-05.webp") no-repeat center center;
		background-size: cover;
	}
	#services .clycle-pager{
		width: 100%;
		height:25vh;	
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		

	}
	#services span{
		font-size: 2vh;
		overflow: hidden;
	}
	#services .slideshow-pager{
		width: 48%;
		height: 5vh;
		display: inline-block;
		padding:1.5vh 1%;
		cursor: pointer;
		margin: 0;
		text-align: center;
		overflow: hidden;
	}
	#services .slideshow-page-1{
	}
	#services .slideshow-page-2{
		margin-left: 0;
	}
	#services .slideshow-page-3{
		margin-left: 0;
	}
	#services .slideshow-page-4{
		margin-left: 0;
	}
	#services .slideshow-page-5{
		background: #68db20;
	}
	#services .slideshow-page-1:hover{
		background: #3e2240;
	}
	#services .slideshow-page-2:hover{
		background: #29183c;
	}
	#services .slideshow-page-3:hover{
		background: #00465a;
	}
	#services .slideshow-page-4:hover{
		background: #5f4001;

	}
	#services .slideshow-page-5:hover{
		background: #2a4a0c;
	}
}
#tours{
    height: auto;
    background: #F3F3F3;
}
#tours .tours-title{
    background: url("../images/tours-greca-title.svg") bottom center no-repeat;
    background-size: cover;
    width: 100%;
    height: 20vh;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#tours .tours-title h1{
    color: #ffffff;
    margin: auto;
    text-align: center;
    font-family: UltraItalic;
	font-size: 5vw;
}
#tours .tours-content{
    position: relative;
}
#tours .tours-content p{
	font-family: Light;
	font-size: 2vw;
	line-height: 2.5vw;
	text-align: justify;
	margin: 5%;
    position: relative;
    z-index: 10;
}
#tours .tours-greca-left{
    background: url("../images/tours-greca-left.svg") no-repeat left bottom;
    background-size: contain;
    width: 60%;
    height: 70%;
    position: absolute;
    bottom: -10vh;
    left: 0;
    z-index: 0;
}
#tours .tours-greca-right{
    background: url("../images/tours-greca-right.svg") no-repeat right bottom;
    background-size: contain;
    width: 30%;
    height: 40%;
    position: absolute;
    bottom: -10vh;
    right: 0;
}
#tours .tours-destinos{
    width: 90%;
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 10;
}
#tours .tours-destinos-opt{
    width: 23%;
    height: 40vh;
    display: inline-block;
    margin: 1vw 1vh;
    position: relative;
    cursor: pointer;
}
#tours .tours-destinos-img{
   
}

#tours .tours-destinos-cholula{
    background: url("../images/tours-thumb-cholula.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-cuetzalan{
    background: url("../images/tours-thumb-cuetzalan.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-atlixco{
    background: url("../images/tours-thumb-atlixco.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-atlimeyaya{
    background: url("../images/tours-thumb-atlimeyaya.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-popocatepetl{
    background: url("../images/tours-thumb-popocatepetl.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-cuernavaca{
    background: url("../images/tours-thumb-cuernavaca.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-malinche{
    background: url("../images/tours-thumb-lamalinche.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-zacatlan{
    background: url("../images/tours-thumb-zacatlan.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-acapulco{
    background: url("../images/tours-thumb-acapulco.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-xochimilco{
    background: url("../images/tours-thumb-xochimilco.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-teotihuacan{
    background: url("../images/tours-thumb-teotihuacan.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-tlaxcala{
    background: url("../images/tours-thumb-tlaxcala.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-valquirico{
    background: url("../images/tours-thumb-valquirico.jpg") no-repeat center center;
    background-size: cover;    
}
#tours .tours-destinos-opt h2{
    background: url("../images/bg-black-50.png");
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: Light;
	font-size: 2vw;
	line-height: 3vw;
    margin: 0;
    color: #ffffff;
}
#tours .tours-footer{
    width: 100%;
    height: auto;
    position: relative;
}
#tours .tours-footer h1{
    font-family: Light;
    font-size: 2vw;
}
#tours .tours-footer p{
    font-family: Light;
    font-size: 1vw;
}
#tours .tours-footer strong{
    font-family: Light;
    font-size: 1vw;
}
#tours .tours-footer-up{
    background: url("../images/tours-greca-up-info.svg") no-repeat bottom center;
    background-size: contain;
    width: 100%;
    height: 10vh;    
}
#tours .tours-footer-info{
    background: #191919;
    text-align: center;
    color: #B4B4B4;
}
#tours .tours-footer-info-opt{
    width: 45%;
    height: auto;
    margin: 1vw 1vh;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
#tours .tours-bar-bottom{

}
@media handheld, only screen and (max-width: 1000px) {
    #tours{
    }
    #tours .tours-title{
        height: 10vh;
    }
    #tours .tours-title h1{
        font-size: 5vh;
    }
    #tours .tours-content{
    }
    #tours .tours-content p{
        font-size: 2.5vh;
        line-height: 3vh;
        margin: 5%;
    }
    #tours .tours-greca-left{
        display: none;
    }
    #tours .tours-greca-right{
        display: none;
    }
    #tours .tours-destinos{
        width: 100%;        
    }
    #tours .tours-destinos-opt{
        width: 45%;
        height: 25vh;
    }
    #tours .tours-destinos-img{

    }

    #tours .tours-destinos-cholula{
    }
    #tours .tours-destinos-cuetzalan{

    }
    #tours .tours-destinos-atlixco{
    }
    #tours .tours-destinos-atlimeyaya{
    }
    #tours .tours-destinos-popocatepetl{
    }
    #tours .tours-destinos-cuernavaca{
    }
    #tours .tours-destinos-malinche{
    }
    #tours .tours-destinos-zacatlan{
    }
    #tours .tours-destinos-acapulco{
    }
    #tours .tours-destinos-xochimilco{
    }
    #tours .tours-destinos-teotihuacan{
    }
    #tours .tours-destinos-tlaxcala{
    }
    #tours .tours-destinos-valquirico{
    }
    #tours .tours-destinos-opt h2{
        font-size: 2.5vh;
        line-height: 3.5vh;
    }
    #tours .tours-footer{
    }
    #tours .tours-footer h1{
        font-family: Light;
        font-size: 2.5vh;
    }
    #tours .tours-footer p{
        font-family: Light;
        font-size: 2vh;
    }
    #tours .tours-footer strong{
        font-family: Bold;
        font-size: 2vh;
    }
    #tours .tours-footer-up{
        height: 20vh;
    }
    #tours .tours-footer-info{
    }
    #tours .tours-footer-info-opt{
        width: 90%;
        height: auto;
        margin: auto;
        display: block;
        vertical-align: top;
        text-align: left;
    }
    #tours .tours-bar-bottom{

    }
}
#complement{
	height: 100vh;
	background: url("../images/complement-bg-02.svg")no-repeat center bottom fixed;
	background-size: cover;
}
#complement span{
	height: 2vw;
	font-family: Book;
	font-size: 2vw;
	text-align: right;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15%;
	margin: auto;
}
#complement .complement-logo{
	background: url(../images/logo-h.svg) no-repeat center;
	background-size: contain;
	width: 25%;
	height: 20vh;
	position: absolute;
	top:1%;
	left: 1%;
	margin: auto;
	z-index: 100;
}
#complement .complement-img-01{
	background: url(../images/complement-img-01.png) no-repeat right bottom;
	background-size: contain;
	width: 70%;
	height: 50%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}
#complement .complement-img-02{
	background: url(../images/complement-img-02.svg) no-repeat right bottom;
	background-size: contain;
	width: 80%;
	height: 75%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
}
#complement .complement-text{
	width: 50%;
	height: 50%;
	position: absolute;
	top: 15%;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 3;
	text-align: left;
}
#complement .complement-opt{
	width:60% ;
	height: 24%;
	margin: 0;
	margin-left: auto;
	position: relative;
}
#complement .complement-gps{
	
	
}
#complement .complement-shield{
	right: 10%;	
}
#complement .complement-wifi{
	right: 15%;	
}
#complement .complement-bt{
	right: 20%;		
}
#complement .complement-ico{
	width: 10%;
	height: 80%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
#complement .complement-ico-gps{
	background: url("../images/complement-img-gps.svg") no-repeat right center;
	background-size: contain;	
}
#complement .complement-ico-shield{
	background: url("../images/complement-img-shield.svg") no-repeat right center;
	background-size: contain;	
}
#complement .complement-ico-wifi{
	background: url("../images/complement-img-wifi.svg") no-repeat right center;
	background-size: contain;	
}
#complement .complement-ico-bt{
	background: url("../images/complement-img-bluetooth.svg") no-repeat right center;
	background-size: contain;	
}
@media handheld, only screen and (max-width: 1000px) {
	#complement{
	}
	#complement span{
		height: 5vw;
		font-size: 5vw;
		text-align: left;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15%;
		right: auto;
		margin: auto;
	}
	#complement .complement-logo{
		width: 90%;
		height: 20vh;
		position: absolute;
		top:1%;
		left: 0;
		right: 0;
		z-index: 1;
	}
	#complement .complement-img-01{
		width: 100%;
		height: 30%;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
	}
	#complement .complement-img-02{
		display: none;
	}
	#complement .complement-text{
		width: 90%;
		height: 60%;
		position: absolute;
		left: 0;
		right: 0;
	}
	#complement .complement-opt{
		width: 100% ;
		height: 15%;
		margin: 0;
		margin-left: auto;
		position: relative;
	}
	#complement .complement-gps{


	}
	#complement .complement-shield{
		right: auto;	
	}
	#complement .complement-wifi{
		right: auto;	
	}
	#complement .complement-bt{
		right: auto;		
	}
	#complement .complement-ico{
		height: 80%;
		left: 0;
		right: auto;
	}
	#complement .complement-ico-gps{
	}
	#complement .complement-ico-shield{
	}
	#complement .complement-ico-wifi{
	}
	#complement .complement-ico-bt{
	}
}
#contactus{
	height: 100vh;
	}
#contactus .contactus-header{
	width: 90%;
	height: 15vh;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;	
	z-index: 10;
	border-bottom: 10px solid #000000;
}
#contactus .contactus-logo{
	width: 50%;
	height: 90%;
	background: url("../images/logo-h.svg") no-repeat left center;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#contactus .contactus-title{
	width: 50%;
	height: 90%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;	
}
#contactus .contactus-title h1{
	width: auto;
	font-family: UltraItalic;
	font-size: 5vw;
	color: #ff0000;
	text-align: right;
	margin: auto;
	padding: 0;
}
#contactus h2{
	display:none;	
}
#contactus .contactus-map{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 0;
}
#contactus .contactus-map iframe{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 0;
}
#contactus .contactus-form{
	background: url("../images/bg-black-50.png");
	border: 3px solid #ff0000;
	width: 30%;
	height: 60vh;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5%;
	margin: auto;
	z-index: 10;
		
}
#contactus .contactus-input{
	width: 100%;
	height: auto;
	margin: 2% auto;
	text-align: center;
}
#contactus label{
	font-family: Book;
	font-size: 1.5vw;
	margin: 1% auto;
	color: #ffffff;
	text-align: left;
}
#contactus input, #contactus select{	
	width: 95%;
	height: auto;
	border: none;
	font-family: Book;
	font-size: 1vw;
	padding: 5px 2.5%;
}
#contactus textarea{
	width: 95%;
	height: auto;
	border: none;
	font-family: Book;
	font-size: 1vw;
	padding: 5px 2.5%;
}
#contactus #form-contactus{
	width: 90%;
	height: auto;
	margin:5% auto;
}
#contactus .contactus-submit{
	background: none;
	width: 50%;
	height: auto;
	
	font-family: Bold;
	font-size: 1.5vw;
	padding: 5px 2.5%;
	margin: 5% auto;
	cursor: pointer;
	border: 1px solid #ffffff;
}
#contactus .contactus-footer{
	width: 90%;
	height: auto;	
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 10;
}
#contactus .contactus-footer-address{
	width: 100%;
	height: auto;
}
#contactus .contactus-footer-address p{
	font-family: Book;
	font-size: 1.5vw;
	text-align: center;
	margin: 1% auto;
}
#contactus .contactus-footer-social{
	width: 100%;
	height: 2vw;
	text-align: center;
}
#contactus .contactus-footer-social-item{
	width: 24%;
	height: 2vw;
	display: inline-block;
	position: relative;
}

#contactus .contactus-footer-social-item a{	
	font-family: Book;
	font-size: 1.5vw;
	text-align: center;
	margin:  auto;
	text-decoration: none;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5%;
}
#contactus .contactus-footer-social-icon{	
	display: inline-block;
	width: 10%;
	height: 100%;

	position: absolute;
	top: 0;
	bottom: 0;
	left:5%;
	margin: auto;
}
#contactus .contactus-footer-social-icon-whatsapp{
	background: url("../images/contactus-ico-whatsapp.svg") no-repeat center;
	background-size: contain;
}
#contactus .contactus-footer-social-icon-facebook{
	background: url("../images/contactus-ico-facebook.svg") no-repeat center;
	background-size: contain;
}
@media handheld, only screen and (max-width: 1000px) {
	#contactus{
		background: url(../images/contactus-bg-m.jpg) no-repeat bottom center;
		background-size: cover;
		height: auto;
		
		}
	#contactus .contactus-header{
		width: 90%;
		height: 10vh;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		margin: auto;	
		border-bottom: 5px solid #000000;

	}
	#contactus .contactus-logo{
		width: 90%;
		height: 90%;
		background: url("../images/logo-h.svg") no-repeat center center;
	}
	#contactus .contactus-title{
		display: none;
		
	}
	#contactus .contactus-title h1{
		display: none;
	}
	#contactus h2{
		display:block;
		position: relative;
		z-index: 10;
	}
	#contactus .lang-en{
		display: none;
	}
	#contactus .contactus-map{
		width: 100%;
		height: 100vh;
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		margin: auto;
		z-index: 0;
	}
	#contactus .contactus-map-title{
		width: 90%;
		position: absolute;
		top: 12vh;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 10;
	}
	#contactus .contactus-map-title h2{
		font-family: Book;
		font-family: 5vw;
		margin: 0;
	}
	#contactus .contactus-map iframe{

	}
	#contactus .contactus-form{
		border: 1px solid #ff0000;
		width: 90%;
		height: auto;
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		margin:5% auto;
		z-index: 10;

	}
	#contactus .contactus-form h2{
		font-family: Book;
		font-family: 5vw;
		margin: 5%;
	}
	#contactus .contactus-input{
	}
	#contactus label{
		font-size: 5vw;
		margin: 1% auto;
	}
	#contactus input, #contactus select{	
		font-size: 5vw;
		padding: 5px 2.5%;
	}
	#contactus textarea{
		font-size: 5vw;
	}
	#contactus #form-contactus{
	}
	#contactus .contactus-submit{
		width: 60%;
		font-size: 5vw;
	}
	#contactus .contactus-footer{
		width: 90%;
		height: auto;	
		position: relative;
		bottom: auto;
		left: auto;
		right: auto;
		margin: auto;
		z-index: 10;
	}
	#contactus .contactus-footer-address{
		height: auto;

	}
	#contactus .contactus-footer-address p{
		font-size: 5vw;
		margin: 1% auto;
		color: #ffffff;
	}
	#contactus .contactus-footer-social{
		width: 100%;
		height: auto;
		text-align: center;
	}
	#contactus .contactus-footer-social-item{
		width: 90%;
		height: auto;
		display: block;
		margin: 10% auto;
	}

	#contactus .contactus-footer-social-item a{	
		font-size:5vw; 
		position: relative;
		top: auto;
		bottom:auto;
		right: auto;
		color: #ffffff;
	}
	#contactus .contactus-footer-social-icon{	
		display: block;
		width: 50%;
		height: 5vh;
		position: relative;
		top: auto;
		bottom:auto;
		left:auto;
		margin:5% auto;
	}
	#contactus .contactus-footer-social-icon-whatsapp{
		background: url("../images/contactus-ico-whatsapp-w.svg") no-repeat center;
		background-size: contain;
	}
	#contactus .contactus-footer-social-icon-facebook{
		background: url("../images/contactus-ico-facebook-w.svg") no-repeat center;
		background-size: contain;
	}
}
#modal-tours{
    width: 100%;
    height: 100vh;
    position: relative;
   
}
#modal-tours .modal-tours-info{
    background: #303030;
    width: 20%;;
    height: 100%;
    position: relative;
    font-family: Book;
    font-size: 1vw;
    line-height: 1vw;
    color: #ffffff;
    z-index: 1;     
}
#modal-tours .modal-tours-info p{
    margin: 10px auto;
}
#modal-tours .modal-tours-info-costo{
    width: 90%;
    height: auto;
    margin: auto;
}
#modal-tours .modal-tours-info-costo-ico{
    background: url("../images/tours-ico-cost.svg") no-repeat center center;
    background-size: contain;
    width: 50%;
    height: 10vh;
    margin:2vh auto;    
}
#modal-tours .modal-tours-info-duracion{
    width: 90%;
    height: auto;
    margin: auto;
}
#modal-tours .modal-tours-info-duracion-ico{
    background: url("../images/tours-ico-time.svg") no-repeat center center;
    background-size: contain;
    width: 50%;
    height: 10vh;
    margin:2vh auto;    
}
#modal-tours .modal-tours-info-3{
    background: url("../images/tours-3angle.svg") no-repeat bottom left;
    background-size: cover;
    width: 100px;
    height: 100%;
    position: absolute;
    right: -100px;
    top: 0;
    bottom: 0;

}
#modal-tours .modal-tours-pic{   
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 20%;
    z-index: 0;
}
#modal-tours .modal-tours-ciudad{
    background: #ffffff;
    width: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0; 
    z-index: 2;
}
#modal-tours .modal-tours-ciudad-ico{
    background: url("../images/tours-ico-camera.svg") no-repeat center center;
    background-size: contain;
    width: 50%;
    height: 10vh;
    margin:2vh auto;    
}
#modal-tours .modal-tours-ciudad h1{
    font-family: Book;
    font-size: 2vw;
    color: #303030;
    width: 90%;
    margin:5vh auto;
}
#modal-tours .modal-tours-ciudad p{
    font-family: Light;
    font-size: 1.5vw;
    color: #303030;
    width: 90%;
    margin: auto;
}
@media handheld, only screen and (max-width: 1000px) {
    #modal-tours{    
        height: 100%;
    }
    #modal-tours .modal-tours-info{
        width: 100%;;
        height: auto;
        font-size: 2vh;
        line-height: 2vh;
    }
    #modal-tours .modal-tours-info p{
        margin: 2vh auto;
    }
    #modal-tours .modal-tours-info-costo{
        height: auto;
    }
    #modal-tours .modal-tours-info-costo-ico{
        height: 5vh;
    }
    #modal-tours .modal-tours-info-duracion{
        height: auto;
    }
    #modal-tours .modal-tours-info-duracion-ico{
        height: 5vh;
    }
    #modal-tours .modal-tours-info-3{
        display: none;
    }
    #modal-tours .modal-tours-pic{
        background:url("../images/tours-cholula.jpg") no-repeat center bottom;
        background-size: cover;
        width: 100%;
        height: 50vh;
        position: relative;
        top: auto;
        left: auto;
        z-index: 0;
    }
    #modal-tours .modal-tours-ciudad{
        width: 90%;
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        margin: auto;
    }
    #modal-tours .modal-tours-ciudad-ico{
        height: 5vh;
    }
    #modal-tours .modal-tours-ciudad h1{
        font-size: 2vh;
    }
    #modal-tours .modal-tours-ciudad p{
        font-size: 2vh;
    }    
}

/* --- Estilos de la Sección --- */
#driver-section {
    width: 100%;
    max-width: 1200px; /* Límite de ancho para pantallas grandes */
    margin: 0 auto; /* Centra la sección */
    text-align: center;
}

#driver-section h2 {
    font-size: 2.2rem;
    font-weight: 300; /* Tipografía ligera y elegante */
    color: #222;
    margin-bottom: 2.5rem;
}

#driver-section h1{
	width: auto;
	font-family: UltraItalic;
	font-size: 5vw;
	color: #ff0000;
	text-align: right;
	margin: 1% auto;
	padding: 0;
}

.driver-title {
	width: 90%;
	color: #ff0000;
	border-bottom: 10px solid #000000;
	margin: auto;
}
/* --- Contenedor de Tarjetas (La Magia Responsiva) --- */
.driver-container {
    display: grid;
    
    /* Crea columnas que se ajustan automáticamente.
      - 'auto-fit': Llena el espacio con tantas columnas como quepan.
      - 'minmax(280px, 1fr)': Cada columna tendrá un mínimo de 280px
        y un máximo de 1 fracción (compartiendo el espacio sobrante).
    */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    
    gap: 2rem; /* Espacio entre las tarjetas */
	margin: 50px 20px;
}

/* --- Estilo de la Tarjeta Individual (.driver-card) --- */
.driver-card {
    background-color: #ffffff;
    border-radius: 12px; /* Esquinas redondeadas suaves */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
    overflow: hidden; /* Asegura que la imagen respete los bordes redondeados */
    text-align: left;
    
    /* Efecto de transición elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Efecto Hover (Elegante) --- */
.driver-card:hover {
    transform: translateY(-8px); /* Levanta la tarjeta ligeramente */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}

/* --- Contenido de la Tarjeta --- */
.driver-card img {
    width: 100%;
    height: 500px; /* Altura fija para la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
    display: block;
}

.card-content {
    padding: 1.5rem;
}

.card-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.card-content p {
    font-size: 0.9rem;
    color: #666; /* Texto secundario más suave */
    line-height: 1.5;
    margin: 0;
}
@media handheld, only screen and (max-width: 1000px) {
	#driver-section h1{
		font-size: 4vh;
	}
}