/* CSS Document */

:root{
	--blue:#001e49;
	--cian:#009bdb;
	--gray:#545454;
	--txt-black:#343434;
}

body{
	background: white;
	margin: 0;
	padding: 0;
}
h1{
	margin: 0;
	padding: 0;
}
h2{
	margin: 0;
	padding: 0;
}
h3{
	margin: 0;
	padding: 0;
}
ul il{
	margin: 0;
	padding: 0;
}
p{
	margin: 0;
	padding: 0;
}
.hidden{
    display: none;
}
.block{
    display: block;
}
.absolut-left{
	left:0;
}
.absolut-right{
	right:0;
}

.bg-white-75{
	background: url("../images/bg-white-75.png");
	color: var(--txt-black);
}
.bg-black-75{
	background: url("../images/bg-black-75.png");
	color: #ffffff;
}
.bg-blue-75{
	background: url("../images/bg-blue-75.png");
	color: #ffffff;
}
.bg-red-75{
	background: url("../images/bg-red-75.png");
	color: #ffffff;
}
header{
	width: 100%;
	height: 6vw;
	background: url("../images/bg-black-50.png");
	position: fixed;
	top: 0;
	left: 0;
	right: 0;	
	z-index: 1000;
}
header #header-logo{
	width: 5%;
	height: 90%;
	background: url("../images/logo-white.svg") no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5vw;
	margin: auto;
}
header nav {
	width: 15%;
	height: 2.5vw;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
header nav .header-nav-opt{
	width: 32.5%;
	position: relative;
	display: inline-block;
	margin: 0;
	right: 0;
	top: 0;
	font-family: fontBold;
	font-size: 2vw;
	color: #ffffff;
	text-align: center;
	cursor: pointer;
}
header nav .header-nav-opt:hover{
	color: var(--blue);
}
header nav .header-nav-opt-regular{
	font-family: fontRegular;
}
@media handheld, only screen and (max-width: 1000px) {
	header{
		height: 15vw;
	}
	header #header-logo{
		width: 10%;
		height: 90%;
	}
	header nav {
		width: 85%;
		height: 6vw;
        text-align: center;
	}
	header nav .header-nav-opt{
        
		font-size: 6vw;
	}
	header nav .header-nav-opt:hover{
	}
	header nav .header-nav-opt-regular{
	}
}


.block{
	width: 100%;	
	position: relative;
	overflow: hidden;
}
#slides{
	width: 100%;
	height: 100vh;
	
}
#slides .slide{
	width: 100%;
	height: 100%;	
	position: relative;
}
#slides .slides-bg-red{
	width: 66%;
	height: 80%;
	background: url("../images/bg-slide-red.svg") no-repeat right top;
	background-size: cover;
	position: absolute;
	left: 0;
	bottom: 0;
    z-index: 999;
}
#slides .slides-text{
	width: 60%;
	height: auto;
	position: absolute;
	left: 10%;
	bottom: 10%;	
	color: white;
}
#slides span{
	font-family: fontBold;
	margin: 0;
	padding: 0;
	height: auto;
}
#slides .slides-text-txt01{
	font-size: 3.5vw;
}
#slides .slides-text-txt02{
	font-size: 2vw;
}
#slides .slides-text-txt03{
	font-size: 3vw;
}
#slides .slides-text-txt04{
	font-size: 2vw;
}
#slides .slides-text-txt05{
	font-size: 4.5vw;
}
@media handheld, only screen and (max-width: 1000px) {
	#slides{
	}
	#slides .slide{
	}
	#slides .slides-bg-red{
		width: 100%;
		height: 100%;
		background: url("../images/bg-slide-red-mobile.svg") no-repeat left bottom;
		background-size: contain;
	}
	#slides .slides-text{
		width: 80%;
		height: auto;
		position: absolute;
		left: 5%;
		bottom: 5%;	
		color: white;
	}
	#slides span{
		font-family: fontBold;
		margin: 0;
		padding: 0;
		height: auto;
	}
	#slides .slides-text-txt01{
		font-size: 6.5vw;
	}
	#slides .slides-text-txt02{
		font-size: 5vw;
	}
	#slides .slides-text-txt03{
		font-size: 6vw;
	}
	#slides .slides-text-txt04{
		font-size: 5vw;
	}
	#slides .slides-text-txt05{
		font-size: 7.5vw;
	}
	
}

#know
{
	width: 100%;
	height: auto;
	color: var(--blue);
}
#know .know-one{
	width: 90%;
	height: auto;
	margin: 5vw;
}
.know-one h2{
	font-family: fontMedium;
	font-size: 4vw;
}
.know-one p{
	font-family: fontLight;
	font-size: 2vw;
}

#know .know-two{
	width: 90%;
	height: 45vw;
	margin: auto;
	position: relative;
}

#know .know-two-a{
	width: 47.22%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}
.know-two-a h2{
	font-family: fontMedium;
	font-size: 2.5vw;
}
.know-two-a p{
	font-family: fontLight;
	font-size: 1.5vw;
}
#know .know-two-b{
	width: 47.22%;
	height: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.know-two-b h2{
	font-family: fontMedium;
	font-size: 2.5vw;
}
.know-two-b ul li{
	font-family: fontLight;
	font-size: 1.5vw;
}
@media handheld, only screen and (max-width: 1000px) {
	#know{
	}
	#know .know-one{
	}
	.know-one h2{
		font-size: 6vw;
	}
	.know-one p{
		font-size: 5vw;
		margin: 2vw;
	}

	#know .know-two{
		height: auto;
	}
	#know .know-two-a{
		width: 100%;
		height: auto;
		position: relative;
		
	}
	.know-two-a h2{
		font-size: 5vw;
		margin: 1vw;
	}
	.know-two-a p{
		font-size: 4vw;
		margin: 1.5vw;
	}
	#know .know-two-b{
		width: 100%;
		height: auto;
		position: relative;
		margin: 4vw auto;
	}
	.know-two-b h2{
		font-size: 5vw;
		margin: 1vw;
	}
	.know-two-b ul li{
		font-size: 4vw;
		margin: 1vw;
	}
}

#membership{
	width: 100%;
	height: 100vh;
	background: url("../images/img-inv.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
	font-family: fontRegular;
	margin-top: 10vw;
}
#membership h1{
	font-size: 6vw;
	color: var(--cian);
	position: absolute;
	left: 5vw;
	margin-top: -7vw;
}
#membership .membership-bg{
	width: 100%;
	height: 80%;
	background: url("../images/bg-degradado.png") repeat-x;
	background-size: contain;
	position: absolute;	
	bottom: 0;
}
#membership .membership-text{
	width: auto;
	height: auto;
	position: absolute;
	left: 5vw;
	top: 5vw;
	color: var(--blue);
}
#membership h2{
	font-size: 4vw;
}
#membership p{
	font-size: 2vw;
}
#membership .membership-text-txt{
	width: 70%;
	height: auto;
	position: absolute;
	left: 5vw;
	top: 25vw;
	color: #D6D6D6;
}
#membership span{
	margin: 0;
	padding: 0;
}
#membership .membership-text-txt01{
	font-size: 3.5vw;	
}
#membership .membership-text-txt02{
	font-size: 2vw;	
}
#membership .membership-text-txt-wh{
	width: auto;
	height: auto;
	position: absolute;
	text-align: center;
	right: 0;
	left: 0;
	margin: auto;
	bottom: 3vw;
	color: #FFFFFF;
}
@media handheld, only screen and (max-width: 1000px){
	#membership{
		height: 75vh;
		margin-top: 20vw;
	}
	#membership h1{
		font-size: 10vw;
		margin-top: -11vw;
	}
	#membership .membership-bg{		
	}
	#membership .membership-text{
		top: 10vw;
	}
	#membership h2{
		font-size: 6vw;
	}
	#membership p{
		font-size: 4vw;
	}
	#membership .membership-text-txt{
		width: 90%;
		top: 50vw;
		color: var(--blue);
	}
	#membership span{
	}
	#membership .membership-text-txt01{
		font-size: 5.5vw;	
	}
	#membership .membership-text-txt02{
		font-size: 4vw;	
	}
	#membership .membership-text-txt-wh{
		bottom: 5vw;
	}
}

#invitation{
	width: 100%;
	height: 210vh;
	margin-top: 5vw;
   
}
#invitation .invitation-sec{
	width: 90%;
	height: 50%;	
	position: relative;
	margin: auto;
}
#invitation .invitation-sec-one-fs{
	width: 100%;
	height: auto;
	text-align: center;
}
.invitation-sec-one-fs h2{
	font-family: fontMedium;
	font-size: 4vw;
	color: var(--cian);
	margin: 1vw;
}
.invitation-sec-one-fs p{
	font-family: fontRegular;
	font-size: 2vw;
	color: var(--gray);
}
#invitation .invitation-sec-categ{
	height: 6vw;
	position: relative;
}
.invitation-sec-categ h2{
	font-family: fontMedium;
	font-size: 3vw;
	color: var(--cian);
	margin: 3vw auto;
}
.invitation-sec-categ h3{
	font-family: fontRegular;
	font-size: 1vw;
	color: var(--gray);
	margin: 3vw auto;
}
.invitation-sec-categ p{
	font-family: fontRegular;
	font-size: 1vw;
	color: var(--gray);
	margin: 3vw auto;
}

#invitation .invitation-sec-one-sd{
	width: 47.2%;
	height: 25vw;
	position: absolute;
	top: 6vw;
	bottom: 0;
	left: 0;
}
#invitation .invitation-sec-one-td{
	width: 47.2%;
	height: 25vw;
	position: absolute;
	top: 6vw;
	bottom: 0;
	right: 0;
}

#invitation .invitation-sec-col{
	width: 47.2%;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
}

#invitation .invitation-sec-ico{
	width: 50%;
	height: 13vw;
	background-size: contain;	
	margin:auto;
}
#invitation .invitation-sec-ico-benefits{
	background: url("../images/ico-verificado.svg") no-repeat top center;
}
#invitation .invitation-sec-ico-requirements{
	background: url("../images/ico-descripcion.svg") no-repeat top center;
}
#invitation .invitation-sec-txt{
	width: 80%;
	height: auto;		
	margin:auto;
}
.invitation-sec-txt h2{
	font-family: fontMedium;
	font-size: 1.5vw;
	margin: 1vw;
	text-align: center;
}
.invitation-sec-txt span{
	font-family: fontBold;
	font-size: 1vw;
	margin: 1vw auto;
}
.invitation-sec-txt ul li{
	font-family: fontRegular;
	font-size: 1vw;
	margin: 1vw auto;
}
.invitation-sec-txt h3{
	font-family: fontBold;
	font-size: 1vw;
	margin: 1vw auto;
}
.invitation-sec-txt p{
	font-family: fontRegular;
	font-size: 1vw;
	margin: 1vw auto;
}
.invitation-sec-txt blockquote{
	font-family: fontLight;
	font-size: 1vw;
}
@media handheld, only screen and (max-width: 1000px){
	#invitation{
		height: auto;
	}
	#invitation .invitation-sec{
	}
	#invitation .invitation-sec-one-fs{
	}
	.invitation-sec-one-fs h2{
		font-size: 6vw;
	}
	.invitation-sec-one-fs p{
		font-size: 5vw;
	}	
	#invitation .invitation-sec-categ{
		width: 100%;
		height: auto;
		position: relative;
		margin: auto;
	}
	.invitation-sec-categ h2{
		font-size: 6vw;
		margin: 5vw auto;
	}
	.invitation-sec-categ h3{
		font-size: 4vw;
		margin: 4vw auto;
	}
	.invitation-sec-categ p{
		font-size: 4vw;
		margin: 4vw auto;
	}
	#invitation .invitation-sec-one-sd{
		width: 100%;
		height: auto;
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		margin: auto;
	}
	#invitation .invitation-sec-one-td{
		width: 100%;
		height: auto;
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		margin: auto;
	}

	#invitation .invitation-sec-col{
		width: 100%;
		height: auto;
		position: relative;
		top: auto;
		bottom: auto;		
		margin: auto;
	}
	#invitation .invitation-sec-ico{
		width: 100%;
		height: 50vw;
	}
	#invitation .invitation-sec-ico-benefits{		
	}
	#invitation .invitation-sec-ico-requirements{		
	}
	#invitation .invitation-sec-txt{
		width: 80%;
		height: auto;		
		margin:auto;
	}
	.invitation-sec-txt h2{
		font-size: 5vw;
		margin: 4vw;
	}
	.invitation-sec-txt span{
		font-size: 4vw;
		margin: 2vw auto;
	}
	.invitation-sec-txt ul li{
		font-size: 4vw;
		margin: 2vw auto;
	}
	.invitation-sec-txt h3{
		font-size: 4vw;
		margin: 2vw auto;
	}
	.invitation-sec-txt p{
		font-size: 4vw;
		margin: 2vw auto;
	}
	.invitation-sec-txt blockquote{
		font-size: 4vw;
	}
}

#news{
	width: 100%;
	height: 100vh;
	background: url("../images/bg-texture.png") no-repeat center center;
	background-size: cover;
	position: relative;
	text-align: center;
    display: none;
}
#news h1{
	width: 90%;
	font-family: fontBold;
	font-size: 4vw;
	color: var(--blue);
	text-align: left;
	margin: auto;
}
#news .news-item{
	width: 40%;
	height: 35%;
	margin: 2% 3%;
	padding: 0;
	display: inline-block;	
	position: relative;
}
#news .news-text{	
	width: 100%;
	height: 40%;
	position: absolute;
	bottom: 0;
}
#news p{
	font-family: fontLight;
	font-size: 1vw;
	margin: 1vw auto;
	text-align: justify;
	padding: 20px;
}
#news span{
		font-family: fontRegular;
		font-size: 1.5vw;
		margin: 1vw auto;
}
@media handheld, only screen and (max-width: 1000px){
	#news{
		height: auto;
	}
	#news h1{
		font-size: 10vw;
	}
	#news .news-item{
		width: 90%;
		height: 75vw;
		margin: 5vw auto;
		display: block;	
		position: relative;
	}
	#news .news-text{	
		height: auto;
	}
	#news p{
		font-size: 4vw;
		margin: 2vw auto;
	}
	#news span{
			font-size: 5vw;
			margin: 1vw auto;
	}
}

#boss
{
	width: 100%;
	height: auto;
	background: red;
	overflow: hidden;
}
#boss .boss-logo{
	width: 75%;
	height: 75%;
	background: url("../images/logo-hd.svg") no-repeat left top;
	background-size: cover;
	background-position: -10vw 0;
	position: absolute;
	opacity: 0.25;
	left: 0;
	bottom: 0;
}
#boss .boss-text{
	width: 90%;
	height: 90vw;
	margin: auto;
	position: relative;	
}
#boss .boss-txt{
	width: 47.22%;
	height: auto;
	position: absolute;
	top: 3vw;
	text-align: center;
	color: #ffffff;
	padding: 0;
}
#boss .boss-item{
    margin-bottom: 3vw;
}
#boss h2{
	font-family: fontRegular;
	font-size: 3vw;
	margin: 0;
}
#boss h3{
	font-family: fontBold;
	font-size: 2vw;
}
#boss a{
	font-family: fontLight;
	font-size: 2vw;
	color: #ffffff;
	text-decoration: none;	
}
#boss a:hover{
	color: var(--blue);
}
@media handheld, only screen and (max-width: 1000px){
	#boss
	{
	}
	#boss .boss-logo{
		width: 90%;
		height: 40%;
	}
	#boss .boss-text{
		width: 90%;
		height: auto;
	}
	#boss .boss-txt{
		width: 100%;
		height: auto;
		position: relative;
	}
	#boss h2{
		font-size: 6vw;
		margin-top: 6vw;
	}
	#boss h3{
		font-size: 4vw;
	}
	#boss a{
		font-size: 4vw;
	}
	#boss a:hover{
	}
}
#sector {
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
}
#sector h1{
	width: 90%;
	font-family: fontBold;
	font-size: 4vw;
	color: var(--blue);
	text-align: left;
	margin: auto;
}
#sector .sector-item{
	width: 13%;
	height: 21vw;
	background-size: contain;
	margin: 2% 3%;
	padding: 0;
	display: inline-block;	
	position: relative;	
}
#sector svg{
    width:100%; 
    height:60%;
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    fill:#001e49;
    cursor: pointer;
}
#sector svg:hover{
    fill:#454545;
}

#sector .sector-text{	
	width: 100%;
	height: 30%;
	position: absolute;
	bottom: 0;
}
#sector h2{
	font-family: fontLight;
	font-size: 1vw;
}
#sector h3{
	font-family: fontBold;
	font-size: 1vw;
}
@media handheld, only screen and (max-width: 1000px){
	#sector {
		height: auto;
	}
	#sector h1{
		font-size: 10vw;
	}
	#sector .sector-item{
		width: 43%;
		height: 40vw;
		background-size: contain;
		margin: 2% 3%;
		padding: 0;
		display: inline-block;	
		position: relative;
	}	
	#sector .sector-text{	
		height: auto;
	}
	#sector h2{
		font-size: 3vw;
	}
	#sector h3{
		font-size: 2vw;
	}
}

footer{
	width: 100%;
	height: 5vw;
	background: url("../images/bg-black-50.png");
	position: relative;
	left: 0;
	right: 0;	
	z-index: 10;
	text-align: center;
}
footer .footer-sn{
	width: 15%;
	height: 3vw;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
footer .ft-ic{
	width: 25%;
	height: 2.5vw;
	background-size: contain;
	margin: 0;
	padding: 0;
	display: inline-block;
}
footer .ic-fb{
	background: url("../images/ico-facebook.svg")no-repeat center center;
}
footer .ic-tw{
	background: url("../images/ico-twitter.svg")no-repeat center center;
}
footer .ic-yt{
	background: url("../images/ico-youtube.svg")no-repeat center center;
}
footer .footer-txt{
	width: 100%;
	height: 30%;
	position: absolute;
	color: var(--gray);
	bottom: 0;
}
footer span{
	font-family: fontMedium;
	font-size: 1vw;
	margin: 1vw;
}
footer a{
	font-family: fontMedium;
	font-size: 1vw;
	color: var(--gray);
	text-decoration: none;
	margin: 1vw;
}
footer a:hover{
	color: var(--blue);
}
@media handheld, only screen and (max-width: 1000px){
	footer{
		height: 30vw;
	}
	footer .footer-sn{
		width: 70%;
		height: 25vw;
	}
	footer .ft-ic{
		width: 30%;
		height: 12vw;
	}
	footer .ic-fb{
	}
	footer .ic-tw{
	}
	footer .ic-yt{
	}
	footer .footer-txt{
		height: auto;
		margin: 0;
		padding: 0;
	}
	footer span{
		font-size: 3vw;	
		display: block;
		margin: 0;
		padding: 0;
	}
	footer a{
		font-size: 3vw;
		margin: 0;
		display: block;
		padding: 0;
	}
	footer a:hover{
	}
}

#side .side-header-logo{
    background: url("../images/logo-canacintra.svg") no-repeat center center;
    width: 20%;
    height: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#side h1{
    width: 90%;
    height: 5vw;
    font-family: fontRegular;
    font-size: 4vw;
    color: var(--blue);
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
}
@media handheld, only screen and (max-width: 1000px){
    #side .side-header-logo{
       
    }
    #side h1{
        width: 80%;
        height: 10vw;
        font-size: 5vw;
        margin-right: 0;
    }
}
#contact{
    height: auto;
    margin: auto;
}
#contact h1{
   
}

#contact .okMsg{
	background:url(../images/bg-white-50.png);
	color:#008E10;
}
#contact .errorMsg{
	background:url(../images/bg-white-50.png);
	color:#f00;
}
#contact .submit{
	width:auto;
	margin:2vw auto;
	background:var(--blue);
	border:none;
	color:#fff;
	font-size:2vw;	
	text-align:center;
	cursor:pointer;
    padding:2% 5% ;
}
#contact .submit:hover{
	background:#000;
}

#contact input, textarea{
	background:url("../images/bg-blue-25.png");
	width:90%;
	padding:10px;
    font-family: fontLight;
	font-size:2vw;
	color:#ffffff;
	border:none;
    margin: 1vw auto;
    border-radius: 10px;
}
#contact ::-webkit-input-placeholder { /* Edge */
  color:#E8E8E8;
}

#contact:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#E8E8E8;
}

#contact ::placeholder {
  color:#E8E8E8;
}
#contact #ajax-response{
    width: 90%;
    background: url("../images/bg-blue-50.png");
    font-family: fontLight;
	font-size:1.5vw;
	text-align:center;
	color:#fff;
	padding:1%;
	display:none;
    margin: auto;
    position: relative;
    
}
#contact #form-validate{
	background: url("../images/bg-blue-25.png");
    font-family: fontLight;
	font-size:1.5vw;
	color:#E8E8E8;	
	padding:1%;
	display:none;
    text-align: left;
}

#contact #form-sending{
    width: 90%;
    background: url("../images/bg-blue-50.png");
    font-family: fontLight;
	font-size:1.5vw;
	text-align:center;
	color:#fff;
	padding:1%;
	display:none;
    margin: auto;
}
#contact input .error{
	border:1px solid #F00;
}

@media handheld, only screen and (max-width: 1000px) {
	#contact{
        height: auto;
        background: url("../images/contactus-bg04.svg") right bottom no-repeat fixed;
        background-size: contain;
        position: relative;
    }
    #contact h1{
        font-size: 10vw;
    }
    #contact iframe{
        width: 95%;
        margin: auto;
    }
    #contact .contactus-col{
        width:90%;
        display: block;
        vertical-align: top;
        margin: 5vw auto;
    }
    #contact .contactus-bg{
        background: url("../images/contactus-bg03.svg") bottom right no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    #contact .contactus-logo{
        width: 60%;
        height: 10%;
        position: absolute;
        bottom: 0;
        right: 1%;
    }
    #contact .okMsg{
    }
    #contact .errorMsg{
    }
    #contact .submit{
        margin:10px auto;
        font-size:5vw;	
    }
    #contact .submit:hover{
        background:#000;
    }

    #contact input, textarea{
        font-size:5vw;
    }
    #contact ::-webkit-input-placeholder { /* Edge */

    }

    #contact:-ms-input-placeholder { /* Internet Explorer 10-11 */
    }

    #contact ::placeholder {
    }
    #contact #ajax-response{
        font-size:4vw;
    }
    #contact #form-validate{
        font-size:4vw;
        color: #ffffff;
    }

    #contact #form-sending{
        font-size:4vw;
    }
    #contact input .error{
        border:1px solid #F00;
    }
}