@charset "utf-8";

/*
 * Theme Name	 : avaloo - one page creative agency tempalte
 * Theme Author	 : aresthemes
 * Theme Version : 1.1
 */
 
/*
 * Theme Sections
 *
 * SEC00 : Misc. Stylesheets
 * SEC01 : Header Stylesheets
 * SEC02 : About Section Stylesheets
 * SEC03 : Team Section Stylesheets
 * SEC04 : Portfolio Section Stylesheets
 * SEC05 : Services Section Stylesheets
 * SEC06 : News Section Stylesheets
 * SEC07 : Counters Section Stylesheets
 * SEC08 : Contact Section Stylesheets
 * 
 */

 /* SEC00 : Misc. Stylesheets */
	
	body, html {
		
		width: 100%;
		height: 100%;

		font-family: "Roboto Slab", Arial, sans-serif;
		font-size: 14px;
		font-weight: 500;
		color: #666;

	}
	
	.mask {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background-color: rgb(42 20 20 / 70%);
		background-image: url(../img/mask-pattern.png);
		background-repeat: repeat;
	}
	
	section {
		padding: 70px 0;
	}
	
	h1, h2, h3, h4, h5, h6 {
		margin:0;
	}
	
	h2 {
		font-family: "Roboto Slab", Arial, sans-serif;
		font-weight: 700;
		font-size: 30px;
		color: black;
		letter-spacing: -1px;
		margin: 0 0 5px 0;
		text-align: center
	}
	
	h3 {
		font-family: "Roboto Slab", Arial, sans-serif;
		font-weight: 500;
		font-size: 20px;
		color: #aaa;
		letter-spacing: -1px;
		margin: 0 0 5px 0;
		text-align: center
	}
	
	.loading-wrapper {
		display: table;
		background: #f4f6fb;
		position: absolute;
		z-index: 100000;
		width: 100%;
		height: 100%;
	}
	
	.loading {
		display: table-cell;
		vertical-align: middle;
		text-align:center;
	}
	
	.loading .spinner {
		border: 20px solid black;
		border-right-color: transparent;
	}
	
	.new-bandage {
		position: absolute;
		top:0;
		right:0;
		width: 50px;
		height: 50px;
		background: url(../img/new-bandage.png) no-repeat center center;
	}
	
	.white-popup-block {
		background: #FFF;
		padding: 20px 30px;
		text-align: left;
		max-width: 650px;
		margin: 40px auto;
		position: relative;
	}
	
	.btn-o {
		display: inline-block;
		border: 2px solid #00ccff;
		padding: 10px 15px;
		border-radius: 50px;
		font-size: 18px;
		font-weight: 700;
		color: #00ccff;
		margin:0;
		line-height: 1.4;
		vertical-align: baseline !important;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.btn-o:hover {
		border-color: #fff;
		color: #fff;
		text-decoration: none;
	}
	
	.btn {
		display: inline-block;
		border: 2px solid #00ccff;
		background: #00ccff;
		padding: 10px 15px;
		border-radius: 50px;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		margin:0;
		line-height: 1.4;
		vertical-align: baseline !important;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.btn:hover {
		background: transparent;
		color: #00ccff;
		text-decoration: none;
	}
	
/* SEC01 : Header Stylesheets */
	
	.header {
	/*	position: relative;
		display: table;
		width: 100%;
		height: 105%;
		background: #003399 url(../img/portada.webp) no-repeat ;
/*   			background-position: center!important;   
    	background-size: cover!important;*/
 
	}



@media(max-width: 700px){
 
		.header {
   			background-position: center!important;  
	}
	
}

	
	.header nav {
		padding-top: 30px;
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
	}
	
	.header nav .nav {
		margin-top: 25px;
	}
	
	.header nav .navbar-toggle {
		margin-top: 16px;
		margin-bottom: 10px;
	}
	
	.header nav .navbar-toggle span.icon-bar {
		background:#ffffff;
	}
	
	.header nav .nav a {
		font-family: "Roboto Slab", Arial, sans-serif;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
		border-radius: 30px;
		padding: 10px 15px;
		border: 2px solid transparent;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.header nav .nav a:hover,
	.header nav .nav a:focus	{
		background-color: transparent;
		color: white;
		border: 2px solid white;
		outline: none !important;
	}
	
	.header .top-nav-collapse {
		    padding: 8px 0 5px 0;
    background: rgb(42 20 20 / 50%);
    backdrop-filter: blur(10px);
	}

	.slider-wrapper {
		position: relative;
		z-index: 5;
		display: table-cell;
		text-align : center;
		vertical-align: middle;
		width: 100%;
		height: 100%;
	}

	.slider-wrapper .slider-content {
		display: block;
		margin: 0 auto;
	}
	
	.slider-wrapper .slider-content h1 {
		font-size: 35px;
		font-weight: 500;
		text-decoration: none;
		color:#fff;
		letter-spacing: -2px;
		margin:0;
		padding:0;
	}
	
	.slider-wrapper .slider-content h2 {
		font-size: 35px;
		font-weight: 100 !important;
		text-decoration: none;
		color:#fff;
		letter-spacing: -2px;
		margin: 0 0 10px 0;
		padding:0;
	}
	
	.slider-wrapper .slider-content p {
		margin: 0 auto;
		font-size: 16px;
		font-weight: 400;
		margin: 10px auto 20px;
		color:#fff;
	}
	
/* SEC02 : About Section Stylesheets */
	
	.about {
		position: relative;
	}
	
	.about .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -49px;
		width: 100%;
		z-index: 100;
	}

	.about .separator path {
		fill: #fff;
	}
	
	#about {
		position: relative;
	}
	
	#about h3 {
		margin-bottom: 40px;
	}
	
	#about .about-text {
		font-weight: 500
	}
	
	#about .about-images {
		margin-top: 40px
	}
	
	#about .about-images .item {
		margin: 0 15px;
	}
	
	#about .about-images .img {
		position: relative;
		border-radius: 3px;
		overflow: hidden;
	}

	#about .about-images .img .mask {
		border-radius: 3px;
		background-color: rgba(0, 51, 153, .4);
		opacity:0;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}

	#about .about-images .img img {
		border-radius: 3px
	}

	#about .about-images .img .zoom {
		position: absolute;
		bottom: 10px;
		width: 100%;
		text-align: center;
		opacity: 0;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	#about .about-images .img .count {
		position: absolute;
		width: 100%;
		top: 50%;
		margin-top: -40px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		opacity: 0;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}

	#about .about-images .img:hover > .mask {
		opacity: 1;
	}
	
	#about .about-images .img:hover > .zoom {
		opacity: 1;
		bottom: 30px;
	}
	
	#about .about-images .img:hover > .count {
		opacity: 1;
		margin-top: -30px;
	}
	
/* SEC03 : Team Section Stylesheets */

	.team {
		position: relative;
		background: #003399 url(../img/sumario.webp)  center center;
		padding: 60px 0;
			background-size: cover!important;
	}

.nuevo {
		position: relative;
		background: #003399 url(../img/fondo.webp);
		padding: 60px 0;
			background-size: cover!important;
	}

	
	.team .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -1px;
		width: 100%;
		z-index: 100;
	}
	
	.team .separator path {
		fill: #fff;
	}
	
	.team h2,
	.team h3 {
		color: #fff;
	}

	#team .team-slider {
		margin-top: 40px;
	}

	#team .member {
		margin:0 15px;
	}

	.member h4 {
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		margin-top: 15px;
	}
	
	.member .sep {
		width: 40px;
		height: 4px;
		margin: 10px auto;
		background: #00ccff;
	}
	
	.member p {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		margin-bottom: 15px;
	}

	.member .title {
		font-size:14px;
	}
	
	.member .social i {
		font-size: 20px;
		color: #fff;
		padding: 0 10px;
	}
	
	.member .social i:hover {
		color: #00ccff;
	}
	
/* SEC04 : Portfolio Section Stylesheets */

	#portfolio {
		position: relative;
	}
	
	#portfolio .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -49px;
		width: 100%;
		z-index: 100;
	}
	
	#portfolio .separator path {
		fill: #fff;
	}

	#portfolio .cbp-l-filters-button {
		text-align: center !important;
	}

	#portfolio .cbp-l-inline {
		font-family: "Roboto Slab", Arial, sans-serif !important;
	}
	
	/* Portfolio Filter Buttons */
		#portfolio .cbp-l-filters-button .cbp-filter-item:hover {
			border-color: #003399;
			color:#003399
		}
		
		#portfolio .cbp-l-filters-button .cbp-filter-item-active {
			border-color: #003399;
			background-color: #003399
		}

	/* Portfolio Item Hover */
		
		#portfolio .cbp-caption-zoom .cbp-caption-activeWrap {
			background-color: rgba( 0,51,153, .4 );
		}
		
		#portfolio .cbp-l-caption-buttonLeft, .cbp-l-caption-buttonRight {
			background-color: #003399;
		}
		
		#portfolio .cbp-l-caption-buttonLeft:hover,
		#portfolio .cbp-l-caption-buttonRight:hover {
			background-color: #fff;
			color:#003399
		}
		
		#portfolio .cbp-item {
			border-radius: 3px;
			overflow: hidden;
		}
	
/* SEC05 : Services Section Stylesheets */

	.services {
		position: relative;
		background: #003399 url(../img/services-bg.jpg) no-repeat center center;
		padding: 60px 0;
	}
	
	.services .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -1px;
		width: 100%;
		z-index: 100;
	}
	
	.services .separator path {
		fill: #fff;
	}
	
	.services h2,
	.services h3 {
		color: #fff;
	}
	
	.services .item {
		text-align: center;
	}
	
	.services .item .icon {
		border: 2px solid #00ccff;
		padding: 15px;
		font-size: 30px;
		color:#00ccff;
		border-radius: 50%;
		margin-top: 40px;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.services .item h4 {
		font-size: 18px;
		font-weight: 700;
		color:#00ccff;
		margin: 15px 0;
	}
	
	.services .item p {
		padding: 0 15px;
		font-size: 14px;
		font-weight: 500;
		color:#fff;
	}
	
	.services .item:hover .icon {
		background: #00ccff;
		color: #fff;
	}
	
/* SEC06 : News Section Stylesheets */

	#news {
		position: relative;
	}
	
	#news .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -49px;
		width: 100%;
		z-index: 100;
	}
	
	#news .separator path {
		fill: #fff;
	}
	
	#news .news-slider {
		position: relative;
		margin-top: 40px;
	}
	
	#news .news-slider .item {
		position: relative;
		margin: 0 10px;
	}
	
	#news .news-slider .item .time-bandage {
		position: absolute;
		top:0;
		left: 20px;
		width: 50px;
		height: 55px;
		text-align: center;
		background: url(../img/news-time-bandage.png) no-repeat center center;
		font-family: "Roboto Slab", Arial, sans-serif;
		font-weight: 700;
		color: #fff;
		line-height: 1;
		padding: 7px 0 0 0;
	}

	#news .news-slider .item .image {
		position: relative;
		overflow: hidden;
		border-radius: 3px
	}
	
	#news .news-slider .item .tools {
		position: relative;
		margin-top: 10px;
		height: 40px;
		padding-left: 15px;
	}
	
	#news .news-slider .item .tools .icon {
		position: absolute;
		left: 0;
		top: 0;
		background: #00ccff;
		width: 6px;
		height: 40px;
		border-radius: 3px;
	}
	
	#news .news-slider .owl-buttons {
		position: absolute;
		top: 50%;
		margin-top: -45px;
		width: 100%;
		z-index: 0;
		height: 0;
	}
	
	#news .news-slider .owl-buttons div {
		background: transparent;
	}
	
	#news .news-slider .owl-buttons .fa {
		color:#aaa;
		border: 2px solid #aaa;
		border-radius: 50%;
		font-size: 15px;
	}
	
	#news .news-slider .owl-buttons .rightArrow {
		position: absolute;
		right: -45px;
		padding: 9px 10px 9px 13px;
	}
	
	#news .news-slider .owl-buttons .leftArrow {
		position: absolute;
		left: -45px;
		padding: 9px 13px 9px 10px;
	}
	
/* SEC07 : Counters Section Stylesheets */

	.counters {
		position: relative;
		background: #003399 url(../img/counters-bg.jpg) no-repeat center center;
		padding: 60px 0;
	}
	
	.counters .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -1px;
		width: 100%;
		z-index: 100;
	}
	
	.counters .separator path {
		fill: #fff;
	}
	
	.counters h2,
	.counters h3 {
		color: #fff;
	}
	
	.counters .icon {
		width: 120px;
		height: 120px;
		font-size: 60px;
		text-align: center;
		line-height: 120px;
		color:#00ccff;
		border: 3px solid #00ccff;
		border-radius: 50%;
		margin-top: 40px;
	}
	
	.counters h4 {
		font-size: 60px;
		font-weight: 700;
		letter-spacing: -2px;
		color:#fff;
		margin: 15px 0;
	}
	
	.counters h5 {
		font-size: 18px;
		font-weight: 700;
		color:#fff;
	}
	
	.counters p {
		font-size: 14px;
		font-weight: 500;
		color:#fff;
	}

/* SEC08 : Contact Section Stylesheets */

	#contact {
		position: relative;
		padding-bottom: 0;
	}
	
	#contact .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -49px;
		width: 100%;
		z-index: 100;
	}
	
	#contact .separator path {
		fill: #fff;
	}
	
	#contact .contact-form {
		margin-top: 40px;
	}
	
	#contact .contact-form .form-control {
        height: auto !important;
		border: 2px solid #003399;
		color: #003399 !important;
         padding: 10px;
	}
	
	#contact .contact-form textarea {
		margin-top: 20px;
        padding: 20px;
	}

	#contact .map {
		margin-top: 60px;
		height: 400px;
	}
	
	#contact .bottom {
		background: #450d17;
		padding: 25px 0;
		color: #fff;
	}
	
	#contact .bottom i {
		font-size: 20px;
		padding: 10px 10px 0 10px;
		color:#00ccff;
		border-radius: 50%;
	}




@media (max-width: 767px) {
		
.navbar-collapse{
 
    background: rgb(42 20 20 / 50%);
    backdrop-filter: blur(10px);


}
	h2 {
		font-size: 22px
	}
	
	h3 {
		font-size: 16px
	}
	
	.bottom .col-lg-4:last-child {
		text-align: left;
	}
	
	#contact .contact-form input {
		margin-bottom: 5px;
	}
	
	#contact .contact-form textarea {
		margin-top: 0px;
	}
	
	#news .news-slider .owl-buttons {
		position: relative;
		margin-top: 25px;
	}
	
	#news .news-slider .owl-buttons div {
		background: #fff;
		padding: 0;
	}
	
	#news .news-slider .owl-buttons .leftArrow {
		position: relative;
		left: 0;
		right: 0;
		margin: 0;
	}
	
	#news .news-slider .owl-buttons .rightArrow {
		position: relative;
		left: 0;
		right: 0;
		margin: 0;
	}
	
}



/*MIS ESTILOS */

	.textoc::first-letter{
		    font-size:6em;
		    font-family:serif;
		    margin:10px;
		        line-height: 53px;
		    float:left;
		}
.roboto {
  font-family: "Roboto", sans-serif!important;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


		.titular1{
			font-size: 86px;
	    letter-spacing: 3px;
	    color: white;
			     text-shadow: 5px 8px 8px #000000;
		}
		.text1{
			    color: white;
	    margin-top: 0px;
	    font-size: 29px;
	    letter-spacing: 1px;
	    padding: 0px;
		}

	.textocontenido p{
	margin-top: 20px;  font-size: 17px; text-align: left; margin-left: 15px; margin-right: 15px;     color: #363636!important;
	}



			.estilo1{
				 position: absolute;
				 left: 50%;
				 margin-left: -145px!important;
				width: 60%;
				text-align: center;
				max-width: 269px;

			}


.computadora{
	display: inline!important;
}


.responsive{
	display: none!important;
}


		@media(max-width:700px){



				.computadora{
					display: none!important;
				}


				.responsive{
					display: inline!important;
				}


			.estilo1{
				margin: 0 auto;
			    display: block;
			    position: absolute;
			    left: 50%;
			    margin-left: -130px!important;
			    top: 28%;
			}


			.res{
				background-position: center;
			}


			.titular1 {
			    font-size: 48px;
	        letter-spacing: 3px;
	        color: white;
	        line-height: 49px;
	        margin-bottom: 16px;
			}
			.text1{
			    color: white;
			    margin-top: 0px;
			    font-size: 17px;
			    letter-spacing: 1px;
			    padding: 0px;
		}

		}

 

    	.libertinus-serif-regular {
			  font-family: "Libertinus Serif", serif;
			  font-weight: 400;
			  font-style: normal;
			}

			.libertinus-serif-semibold {
			  font-family: "Libertinus Serif", serif;
			  font-weight: 600;
			  font-style: normal;
			}

			.libertinus-serif-bold {
			  font-family: "Libertinus Serif", serif;
			  font-weight: 700;
			  font-style: normal;
			}

			.libertinus-serif-regular-italic {
			  font-family: "Libertinus Serif", serif;
			  font-weight: 400;
			  font-style: italic;
			}

			.libertinus-serif-semibold-italic {
			  font-family: "Libertinus Serif", serif;
			  font-weight: 600;
			  font-style: italic;
			}

			.libertinus-serif-bold-italic {
			  font-family: "Libertinus Serif", serif;
			  font-weight: 700;
			  font-style: italic;
			}


        body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}


#door-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../img/pared.webp');
    z-index: 9999;
    transition: transform 1.5s ease-out, opacity 1.5s ease-out;
    background-size: cover;
    background-position: bottom;
}

#door-container {
    position: relative;
    width: 292px;
    height: 500px;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
        background-color: black;
           perspective: 21em;
    overflow: hidden;
}

.back1{
        padding: 10px;
    background-size: contain!important;
    box-shadow: 2px 7px 25px 4px black;
   
}
/* Clase para el efecto de zoom */
#door-wrapper.zoomed {
    transform: scale(8);
/*    opacity: 0;*/
}
  


.logo2{
	width: 100%; margin: 0 auto; display: block; max-width: 800px;
}
	
.tit2{
	 line-height: 37px; font-weight: 300;
}

.baf{
	height: 100vh; background-attachment: fixed!important;
}
.log1{
	    width: 100%;
    
}


@media(max-width: 700px){


.log1{
	    width: 100%; 
   
}


.baf{
	height: 100vh; background-attachment: unset!important;
}


.tit2{
	   line-height: 43px!important;
    font-size: 31px!important;
}

.logo2{
	  margin-top: 28%;
}


/* Clase para el efecto de zoom */
#door-wrapper.zoomed {
    transform: scale(4);
/*    opacity: 0;*/
}

    .back1{
     
    margin-top: 15%;
}
    #door-container {
    position: relative;
    width: 217px;
    height: 412px;
    display: flex
;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: black;
    perspective: 21em;
    overflow: hidden;
}
}


/* Estilos de la única puerta */
.door {
    position: absolute;
    width: 100%; /* Ocupa el 100% del contenedor */
    height: 100%;
    background: url('../img/puerta.webp');
    transition: transform 1s ease-out; /* Transición para la apertura */
  
    box-sizing: border-box;    
     background-size: 100% 100%;

}

/* Texto de la puerta */
.door-text {
    position: absolute;
    color: white;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Clases para animaciones (añadidas con JS) */
#door-container.open .door {
/*    transform: translateX(100%);  */
      transform-origin: 0 0 /*whatever y value you wish*/;
  transform: rotateY(100deg);
  height: inherit;
  transition ease:in:out 4s;
}

#door-container.open .door-text {
    opacity: 0;
}



/* Clase para el efecto de zoom */
#door-wrapper.zoomed2 {
  
    opacity: 0;
}



.bg-effect{
	background-size: contain!important;
}




	.alib{
	  				width: 12.1%; display: inline-block; text-align: center;
	  			}

	  			.coli{
	  				width: 19.5%; display: inline-block;
	  			}

  				@media(max-width: 900px){

	  				.coli{
		  				width: 33%; display: inline-block;
		  			}

	  				 
	  			}


	  			@media(max-width: 700px){

	  				.coli{
		  				width: 49%; display: inline-block;
		  			}

	  				.alib{
		  				width:  47.5%; display: inline-block; text-align: center;
		  			}
	  			}


	.cap{
		    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 1) 100%);
    width: 100%;
    color: white;
    padding: 20px;
	}

.itm{
	 width: 100%; height: 554px; background-size: cover!important; background-position: center!important;
}

.yt{
	width: 100%;
	height:550px ;
}


@media(max-width: 900px){
		.yt{
		width: 100%;
		height:350px ;
	}

}

@media(max-width: 700px){
	.yt{
		width: 100%;
		height:296px ;
	}

	.itm{
		 width: 100%; height: 254px; background-size: cover;
	}
}