/*** GENERAL & PSEUDO CLASSES **/
#box{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#loader{ 
	opacity: 1; 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	background-color: #fff; 
	z-index: 2000;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}
#progress-bar{ 
	height: 10px; 
	background-color: #ef3737; 
	-webkit-transition: width .5s ease;
	-moz-transition: width .5s ease;
	transition: width .5s ease;
	position: relative;
	top: 400px;
	width: 0px;
}
.hide-loader{ opacity: 0 !important; z-index: -1 !important; }

#main-container{
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
.npl{ padding-left: 0px; }
.pad-large{ padding-top: 88px; padding-bottom: 88px; }
.pad-large2{ padding-top: 88px; padding-bottom: 88px; background-color: #eee; }
.pad-small2{ padding-top: 22px; padding-bottom: 44px; }
.highlight{ color: #ef3737; }

/** ELEMENTS **/

.page-heading{ margin-bottom: 44px; }
.page-heading strong{ font-weight: 500; }

.btn{
	background-color: #ef3737;
	border-radius: 3px;
	border-bottom: 4px solid #ad3e3e;
	padding: 12px 30px 12px 25px;
	cursor: pointer;
	color: #fff;
	display: inline-block;
	position: relative;
}
.btn i{ margin-right: 5px; font-size: 25px; }
.btn:hover{ border-bottom: 0px; border-top: 4px solid #fff; border-radius: 6px 6px 3px 3px;  }

.divider{ 
	background-size: cover !important; 
	background-attachment: fixed !important;
	padding-top: 200px;
	padding-bottom: 200px;
}
.hr{ height: 2px; background-color: #fff; }

/** TYPOG **/

.text-white{
	font-size: 4.5em;
	color: #fff;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}
.text-red{
	font-size: 5em;
	color: #D00202;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}



.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}





h4, h5, h6{ font-weight: 100; line-height: 1; }


h1 { 
	font-family: "Roboto", sans-serif;
	font-size: 3em;
	font-weight: 800; 
	line-height: 1.3; 
}

h2 { 
	 font-family: "Roboto", sans-serif;
	font-size: 2em;
	font-weight: 400; 
	line-height: 1; 
}

h3 { 
	 font-family: "Roboto", sans-serif;
	font-size: 2.3em;
	font-weight: 400; 
	line-height: 1; 
	color: firebrick;
}


p {
	 font-family: "Roboto", sans-serif;
	font-size: 1.3em;
	font-weight: 300;
}




/*** NAV STYLES ***/

#nav{
	position: fixed;
	z-index: 500;
	width: 100%;
	background-color: #222;
	text-align: center;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	margin-top: 15px;
}
#nav a:hover{ 
	background-color: #0a2c9b;
	font-weight: bold;
	color: #FFFFFF;
}
#nav a:active { 
	background-color: #DF0101;
	font-weight: bold;
	color: #FFFFFF;
}
#nav a:focus{ 
	background-color: #DF0101;
	font-weight: bold;
	color: #FFFFFF;
}

#nav-toggle{ 
	cursor: pointer; 
	width: 40px; 
	height: 40px; 
	padding-top: 5px; 
	background-color: #222; 
	color: #fff; 
	text-align: center; 
	position: fixed; 
	right: 0px; 
	z-index: 1000;	
}
#nav-toggle i{ font-size: 2em; color: #fff; }

#nav-list{ 
	list-style: none; 
	overflow: hidden; 
	clear: both; 
	margin-bottom:0px; 
	display: inline-block; 
}

.open-menu{ top: 0px !important; }
	
#nav-list a{
	color: #ddd;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	padding-top: 10px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
	display: block;
	letter-spacing: 3px;
}
.internal-link{ padding-top: 34px !important; }
.internal-link-img{ padding-top: 30px; }
#nav-list li{ float: left; }
#nav-list li:last-child{ border-bottom: none; }
#nav-list i{ margin-right: 11px; }

#logo{ padding: 7px 0px 0px 0px;}
#logo img{ max-width: 90px; }
#nav-list li .btn{ padding: 10px 10px; letter-spacing: 0px; text-transform: none; font-weight: 700; }
#nav-list li .btn:hover{ border-top: 4px solid #222; }


/*** HOME STYLES ***/

#home-slider { overflow: hidden; position: relative; }
#home-slider h1{ font-weight: 400; font-size: 68px; margin-bottom: 11px; text-align: center; text-shadow: 
        -2px -2px 0 black,  
        2px -2px 0 black,
        -2px 2px 0 black,
        2px 2px 0 black; /* Sombras que simulan el contorno */ }
#home-slider strong{ font-weight: 900; }
#home-slider .slides li{ position: relative; background-size: cover !important; background-position: center; height: 650px; }
#home-slider .slides li:before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }
#home-slider .internal-link{ padding-top: 0px !important; }
.byline{ font-weight: 300; }
.slide-content{ 
	opacity: 0;
	position: relative;
	top: 100px;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
.show-slide{ opacity: 1; top: 0px; }



/*** CLIENT DIVIDER ***/

.client img{ max-width: 70%; position: relative; top: 8px; }

/*** FEATURES STYLES ***/

#features{ background-color: #f5f5f5; }

.feature{ margin-bottom: 66px; }
.feature:nth-last-child(-n+2){ margin-bottom: 0px; }

.feature-bubble{ 
	height: 140px; 
	width: 140px; 
	border-radius: 50%;
	background-color: #ef3737;
	border-bottom: 4px solid #ad3e3e;
	text-align: center;
	padding-top: 34px;
}

.feature-bubble i{ font-size: 60px; }
.feature-detail h4{ color: #ef3737; font-weight: 300; margin-bottom: 22px; font-size: 2em; }
.feature-detail h4 strong{ font-weight: 700; }


/*** GALLERY SMALL ***/

#gallery-small{ padding-top: 88px; }
#gallery-small .page-heading{ margin-bottom: 22px; }
#gallery-small p{ margin-bottom: 44px; }

/*** PRICING ***/

.pricing-table{ width: 100%; position: relative; }
.pricing-table .upper{ padding: 22px 0px 22px 0px; background-color: #336699; border-radius: 10px 10px 0px 0px; }
.terms-wrapper{ background-color: #ef3737; padding: 15px 0px 15px 0px; text-align: center; }
.terms{ display: inline-block; color: #fff; }
.terms .dollars{ font-weight: 700; font-size: 28px; }
.terms .cents{ font-weight: 700; font-size: 16px; position: relative; bottom: 7px; }
.terms .payment{ font-weight: 300; font-size: 16px; position: relative; bottom: 0px; margin-left: 5px;  }
.plan-features{ padding-top: 22px; padding-bottom: 22px; text-align: center; border: solid 1px #dddddd; border-radius: 0px 0px 10px 10px; }
.feature-list li{ font-size: 22px; font-weight: 300; margin-bottom: 22px; }
.feature-list li strong{ font-weight: 700; }
.value{ width: 100px; position: absolute; right: 0px; top: -8px; }

/*** GALLERY STYLES ***/

#gallery{ background-color: #f5f5f5; }
#gallery-slider{ position: relative; }
#gallery-slider hover{  }
#gallery-slider img{ max-width: 90%; }

/*** FAQ STYLES ***/

.question{ overflow: hidden; cursor: pointer; -webkit-transition: all .5s ease; max-height: 85px; }
.question:hover{ background-color: #C42D2D !important; }
.question:hover h2{ color: #fff; }
.question:nth-child(even){ background-color: #f5f5f5; }
.question h2{ margin: 22px 0px 22px 22px; }
.question p{ padding-left: 92px; margin-bottom: 44px; }
.question .hr{ margin-left: 92px; margin-bottom: 22px; }

.open-question{ background-color: #336699 !important; max-height: 700px; color: #fff; }
.open-question h2{ color: #fff; }

/*** CONTACT STYLES ***/

#contact-upper{ background-color: #f5f5f5; }

#social-links{ overflow: hidden; display: inline-block; margin-top: 15px; }
#social-links li{ float: left; margin-right: 22px; list-style: none; margin-top: 11px; }
#social-links li:last-child{ margin-right: 0px; }
#social-links li i{ font-size: 4.5em; color: #222; }

#contact-lower{ width: 100%; background-color: #DF0101; height: 500px; }
#contact-lower h1{ margin-top: 15px; }

/*#contact-lower input{ -webkit-appearance: none; min-height: 75px; border-bottom: 4px solid #ccc; border-radius: 10px; width: 40%; margin-right: 17px; float: left;  }*/

#newsletter-form{ overflow: hidden; }
.verif{ display: none; }
#form-btn{ 
	cursor: pointer; 
	padding-top: 7px; 
	float: right; 
	height: 75px; 
	border-radius: 10px; 
	width: 75px; 
	border-bottom: 4px solid #2c9937; 
	background-color: #49db57; 
	text-align: center; 
	position: relative;
}

#form-btn i{ font-size: 48px; color: #fff; }
#form-btn:hover{ border-bottom: 0px; height: 71px; top: 4px; }

.details-error-wrap{ 
	padding: 10px;
	color: #fff;
	border-radius: 4px;
	border: 1px solid;
	display: none;
}
.show-error{ display: inline-block; }
.form-sent{ 
	padding: 10px;
	color: #fff;
	border-radius: 4px;
	border: 1px solid;
	display: none;
}
.show-sent{ display: inline-block; }

/*** FOOTER STYLES ***/

#footer{ background-color: #fff !important; height: 200px; text-align: center; margin-top: 50px; margin-bottom: 100px; }
.logotext img{ max-width: 72px; padding-left: 4px; }
.footer-link{ color: #999; font-size: 14px; margin-right: 11px; }








.tabs {
    display: flex;
    cursor: pointer;
    margin-bottom: 20px;
}

.tablinks {
    background-color: #369;
    border: none;
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 16px;
}

.tablinks:hover {
    background-color: #ddd;
	color: #fff;
}

.tablinks:active {
    background-color: #89080A;
}

.tabcontent {
    display: none;
    padding: 10px;
    border-top: 1px solid #ccc;
}







.tabs2 {
    display: flex;
    cursor: pointer;
    margin-bottom: 25px;
}

.tablinks2 {
    background-color: #999999;
    border: none;
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 28px;
}

.tablinks2:hover {
    background-color: #369;
	color: #fff;
}






 .whatsapp-button {
	 position: fixed;
	 bottom: 20px;
	 left: 20px;
	 background-color: #25D366;
	 color: white;
	 border: none;
	 border-radius: 50px;
	 padding: 15px;
	 font-size: 20px;
	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 cursor: pointer;
}

	.whatsapp-button:hover {
		background-color: #20b358;
}

	.whatsapp-button a {
		color: white;
		text-decoration: none;
}


 .gto-marca {
	 position: fixed;
	 bottom: 20px;
	 left: 10px;
	 padding: 15px;
	 font-size: 20px;
	 border: none;
	 z-index: 500;
}

 .gto-marca img {
	 width: 70%;
}


.view {
		display: block;
	}

.no-view {
		display: none;
	}



.google-slide {
	width: 105%;
	height: auto;
	aspect-ratio: 16/9;
	overflow: hidden;
	background-color: #fff;
}

.google-slide-frame {
	width: 102%;
	height: 115%;
	border: none;
	margin-top: -3%;
	margin-left: -1%;
	background-color: #fff;
}

.google-slide-animate {
	width: 102%;
	height: 115%;
	border: none;
	margin-top: -3%;
	margin-left: -1%;
	background-color: #fff;
}


.google-slide-frame-looker {
	width: 100%;
	height: 115%;
	border: none;
	background-color: #fff;
}

.google-slide-frame-animate {
	width: 100%;
	height: 115%;
	border: none;
	background-color: #fff;
}
	


/* Responsive */
@media (max-width: 768px) {
  	
	.gto-marca img {
		width: 40%;
	}

	#contact-lower {
		height: 700px;
	}
	
	h1 {
		font-size: 2em;
	}
	
	h2 { 
		font-size: 1.3em;
	}
	
	h3 { 
		font-size: 1.3em;
	}
	
	.text-white{
		font-size: 2em;
	}
	
	.no-view {
		display: block;
	}
	
	.view {
		display: none;
	}
	
	.feature-bubble{
		text-align: left;
	}
	
	#home-slider h1{ 
		font-size: 55px;
	}
	
	#footer {
		height: 200px; 
		margin-top: 750px; 
		margin-bottom: 100px;
	}
	
	
	.google-slide {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
		overflow: hidden;
	}
	.google-slide-frame {
		width: 102%;
		height: 135%;
		border: none;
		margin-top: -4%;
		margin-left: -1%;
		background-color: #fff;
	}
	
	.google-slide-animate {
		width: 102%;
		height: 164%;
		border: none;
		margin-top: -4%;
		margin-left: -1%;
		background-color: #fff;
	}
	
	
	.tabs2 {
		margin-bottom: 18px;
	}

	.tablinks2 {
	    font-size: 18px;
	}


}