@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Catamaran:200,500,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");


*{ margin: 0; padding: 0; box-sizing:border-box; transition: all 1s;}
html {scroll-behavior: smooth; min-height: 100%; position: relative;}
header {margin-top: 2rem; position: fixed; -webkit-sticky; /* Safari */ position: sticky; top: 0; z-index: 25;}
main {width: 100%; padding-right: 0rem; padding-left: 0rem; margin-right: 0rem; margin-left: 0rem;}
a {transition-duration: 0s;}

.no-padding {padding: 0rem}
.gris {background-color: grey}

/* .tooltip-inner {padding: 2px 3px; color: white; background-color: #82fefd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} */
/* .bs-tooltip-right .arrow::before {border-right-color: #82fefd;} */


/* HOME ------------------------------------------------------------------------------------------------- */

.body-home {height: 100vh; display: flex; flex-direction: column; justify-content: space-between; background: #3e8aad;}

/*LOGO*/
.navbar-brand {margin-left: 0rem;}

/*VIDEO*/
#video-contenedor {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden;}
#video {width: 100%; height: auto; visibility: visible;}

/*BARRA NAVEGACIÓN*/
.head-home {position: relative;}
.nav-link {font-family: 'Catamaran', sans-serif; font-size: 0.8rem; color: white !important; margin: 0rem 0rem 0rem 2rem; padding-right: 0rem !important; letter-spacing: 2px;}
a.nav-link:hover {color: #e7f92f !important; border-radius: 20px;}
.navbar-toggler {border-color: #00fffc !important; background-color: transparent; border-width: 2px; opacity: 0.5;}
.navbar-toggler:focus {box-shadow: none;}
.navbar-nav {margin-top: 1rem;}
.nav-item {text-align: right; margin-right: 0rem;}
.menu-fondo {background-color: rgba(13, 174, 191, 0.89) !important;}

/*PASADOR*/
.frase-intro {font-family: 'Khand', sans-serif; text-align: center; font-weight: 500; font-size: 3.5rem; color: #82fefd; letter-spacing: 0.5px; line-height: 3.5rem; margin-bottom: 1rem;}
.txt-pasador {font-family: 'Khand', sans-serif; text-align: center; font-weight: 400; font-size: 13rem; color: #e7f92f !important; letter-spacing: -2px; line-height: 14rem; z-index: -1; margin-bottom: 0rem;}
.pasador-contenedor-chico {display: none;}

/*ICONOS SERVICIOS*/
.iconos-servicios {display: flex; justify-content: center; flex-wrap: wrap;}
.iconos-servicios div {margin: 0rem 0.75rem;}

.ico-logos a {display: block; width: 6rem; height: 6rem; background-image: url("../img-index/icon-logos-1.svg"); background-repeat: no-repeat; background-position: center; animation: ico-uno 1s; text-decoration: none;}
.ico-logos a:hover {background-image: url("../img-index/icon-logos-2.svg"); animation: ico-hover 0.2s;}
.ico-branding a {display: block; width: 6rem; height: 6rem; background-image: url("../img-index/icon-branding-1.svg"); background-repeat: no-repeat; background-position: center; animation: ico-uno 1s; text-decoration: none;}
.ico-branding a:hover {background-image: url("../img-index/icon-branding-2.svg"); animation: ico-hover 0.2s;}
.ico-web a {display: block; width: 6rem; height: 6rem; background-image: url("../img-index/icon-web-1.svg"); background-repeat: no-repeat; background-position: center; animation: ico-uno 1s; text-decoration: none;}
.ico-web a:hover {background-image: url("../img-index/icon-web-2.svg"); animation: ico-hover 0.2s;}
.ico-ilustracion a {display: block; width: 6rem; height: 6rem; background-image: url("../img-index/icon-ilustracion-1.svg"); background-repeat: no-repeat; background-position: center; animation: ico-uno 1s; text-decoration: none;}
.ico-ilustracion a:hover {background-image: url("../img-index/icon-ilustracion-2.svg"); animation: ico-hover 0.2s;}
.ico-etiquetas a {display: block; width: 6rem; height: 6rem; background-image: url("../img-index/icon-etiquetas-1.svg"); background-repeat: no-repeat; background-position: center; animation: ico-uno 1s; text-decoration: none;}
.ico-etiquetas a:hover {background-image: url("../img-index/icon-etiquetas-2.svg"); animation: ico-hover 0.2s;}
.ico-musica a {display: block; width: 6rem; height: 6rem; background-image: url("../img-index/icon-musica-1.svg"); background-repeat: no-repeat; background-position: center; animation: ico-uno 1s; text-decoration: none;}
.ico-musica a:hover {background-image: url("../img-index/icon-musica-2.svg"); animation: ico-hover 0.2s;}

@keyframes ico-uno {
	0%{transform: rotate(90deg);}
	100%{transform: rotate(0deg);}
	}

@keyframes ico-hover {
	0%{transform: rotate(90deg);}
	100%{transform: rotate(0deg);}
	}

.iconos-servicios-epigrafe {display: none;}


/*PIE*/

.pie-home {position: relative; bottom: 0; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; margin-bottom: 2.3rem;}

.tel {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 0.8rem; color: white !important; line-height: 1.4rem; letter-spacing: 0.4px; margin: 0rem;}
.tel b {font-weight: 600; color: #00fffc}
.tel a {color: white !important; text-decoration: none;}
.tel a:hover {color: #e7f92f !important;}
.tel-w {font-weight: 600; color: #ffffff !important; background-color: #25d366;}

.mail-creditos {font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 0.8rem; color: white !important; line-height: 1.4rem; letter-spacing: 0.4px; margin: 0rem;}
.mail-creditos a {text-decoration: none;}
.mail-creditos a:hover {color: #e7f92f !important;}

.ubicacion {display: flex; justify-content: flex-start; align-items: flex-end; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 0.8rem; color: white !important; line-height: 1.4rem; letter-spacing: 0.4px;}

.redes-home {display: flex; justify-content: flex-end; align-items: flex-end;}
.redes-home a {margin-left: 0rem; margin-right: 0rem; padding: 0rem 0rem 0rem 1rem; text-decoration: none;}
.redes-home a:hover {color: #e7f92f !important; text-decoration: none;}
















/* -----------------------------------------------------------------------------------------------------  */
/*@media (max-width: 1400px) { 


.navbar-toggler {margin-right: 0.8rem;}

/*PASADOR*/
/* .frase-intro {margin-top: 4rem; color: #00fffc}
/* .txt-pasador {font-size: 13rem; line-height: 8rem; margin-top: 3rem}


/* PIE */
/* .pie-home {margin-top: 16rem;}

}

*/








/* IPAD PRO LANDSCAPE --------------------------------------------------------------  */
@media (min-width: 1360px) and (max-width: 1380px) and (min-height: 1020px) and (max-height: 1035px) { 

/*VIDEO*/
#video-contenedor {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
#video {height: 100% !important; width: auto !important; left: 0px !important;}

/*ICONOS SERVICIOS*/
.iconos-servicios {margin-top: 0.5rem; max-width: 100% !important;}
.ico-logos a {animation: none !important;}
.ico-logos a:hover {background-image: url("../img-index/icon-logos-1.svg"); text-decoration: none;}
.ico-branding a {animation: none !important;}
.ico-branding a:hover {background-image: url("../img-index/icon-branding-1.svg"); text-decoration: none;}
.ico-web a {animation: none !important;}
.ico-web a:hover {background-image: url("../img-index/icon-web-1.svg"); text-decoration: none;}
.ico-ilustracion a {animation: none !important;}
.ico-ilustracion a:hover {background-image: url("../img-index/icon-ilustracion-1.svg"); text-decoration: none;}
.ico-etiquetas a {animation: none !important;}
.ico-etiquetas a:hover {background-image: url("../img-index/icon-etiquetas-1.svg"); text-decoration: none;}
.ico-musica a {animation: none !important;}
.ico-musica a:hover {background-image: url("../img-index/icon-musica-1.svg"); text-decoration: none;}

/*PASADOR*/
.frase-intro {font-size: 3rem; margin-top: 2rem !important;}

/*PIE*/
.pie-home {background-image: unset !important; padding: 0rem !important; margin-top: 2rem !important; margin-bottom: 2.3rem !important;}

/*ICONOS SERVICIOS*/

.iconos-servicios-epigrafe {display: flex; justify-content: center; font-family: 'Khand', sans-serif; font-size: 1rem !important; color: #ffffff !important; padding-top: 6.5rem !important;}


}











/* IPAD Air (1180 x 820 px)  --------------------------------------------------------------- */
@media (max-width: 1280px) {


#video {width: auto; height: 100vh; visibility: visible;}


}














/* IPAD LANDSCAPE --------------------------------------------------------------  */
@media (min-width: 1000px) and (max-width: 1035px) and (min-height: 670px) and (max-height: 780px) { 

/*VIDEO*/
#video-contenedor {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
#video {height: auto !important; left: 0px !important;}

/*ICONOS SERVICIOS*/
.iconos-servicios {margin-top: 0.5rem; max-width: 100% !important;}

/*PASADOR*/
.frase-intro {font-size: 3rem; margin-top: 2rem !important;}

/*PIE*/
.pie-home {background-image: unset !important; padding: 0rem !important; margin-top: 2rem !important; margin-bottom: 2.3rem !important;}
.tel {line-height: 1.2rem !important}
.mail-creditos {line-height: 1.2rem !important}
.ubicacion {line-height: 1.2rem !important; justify-content: flex-start !important;}

/*ICONOS SERVICIOS*/
.iconos-servicios {margin-top: 0rem !important;}
.ico-logos a {width: 5rem !important; height: 5rem !important; animation: none !important;}
.ico-branding a {width: 5rem !important; height: 5rem !important; animation: none !important;}
.ico-web a {width: 5rem !important; height: 5rem !important; animation: none !important;}
.ico-ilustracion a {width: 5rem !important; height: 5rem !important; animation: none !important;}
.ico-etiquetas a {width: 5rem !important ; height: 5rem !important; animation: none !important;}
.ico-musica a {width: 5rem !important; height: 5rem !important; animation: none !important;}
.iconos-servicios-epigrafe {display: flex; justify-content: center; font-family: 'Khand', sans-serif; font-size: 1rem !important; color: #ffffff !important; padding-top: 5.5rem !important;}


}

















/* IPAD PRO (tablets, less than 992px)  --------------------------------------------------------------- */
@media (max-width: 1035px) {


/*HOME ------------------- */

header {margin-top: 1rem; padding: 1rem 0rem;}
.menu-fondo {background-color: rgba(13, 174, 191, 0.89);}

/*BARRA NAVEGACIÓN*/
.navbar-brand {margin: 0rem; padding-top: 0rem; padding-bottom: 0.6rem;}
.navbar-brand img {width: 140px !important}
.navbar-toggler {border-color: transparent !important; padding: 0.3rem 0rem 0rem 0rem; opacity: 1;}
.navbar-toggler-icon  {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important}
.nav-item {margin-right: 0rem;}
.nav-link {padding-left: 0rem !important;}

/*VIDEO*/
#video {position: absolute; left: -900px; height: 100vh; width: auto;}

/*PASADOR*/
.frase-intro {margin-top: 1.5rem; color: #00fffc}
.txt-pasador {font-size: 10.5rem; line-height: 10.5rem; margin-top: 0.5rem}

/*ICONOS SERVICIOS*/
.iconos-servicios {margin-top: 0.5rem; max-width: 60%;}
.iconos-servicios div {margin: 1.8rem 1.0rem;}
.ico-logos a {width: 6rem; height: 6rem; animation: none !important;}
.ico-logos a:hover {background-image: url("../img-index/icon-logos-1.svg"); text-decoration: none;}
.ico-branding a {width: 6rem; height: 6rem; animation: none !important;}
.ico-branding a:hover {background-image: url("../img-index/icon-branding-1.svg"); text-decoration: none;}
.ico-web a {width: 6rem; height: 6rem; animation: none !important;}
.ico-web a:hover {background-image: url("../img-index/icon-web-1.svg"); text-decoration: none;}
.ico-ilustracion a {width: 6rem; height: 6rem; animation: none !important;}
.ico-ilustracion a:hover {background-image: url("../img-index/icon-ilustracion-1.svg"); text-decoration: none;}
.ico-etiquetas a {width: 6rem; height: 6rem; animation: none !important;}
.ico-etiquetas a:hover {background-image: url("../img-index/icon-etiquetas-1.svg"); text-decoration: none;}
.ico-musica a {width: 6rem; height: 6rem; animation: none !important;}
.ico-musica a:hover {background-image: url("../img-index/icon-musica-1.svg"); text-decoration: none;}

.iconos-servicios-epigrafe {display: flex; justify-content: center; font-family: 'Khand', sans-serif; font-size: 1.1rem; color: #ffffff; margin: 0rem !important; padding-top: 6.5rem;}

/*PIE*/
.pie-home {background-image: linear-gradient(-45deg, #1b4d63, #1977a0, #0cb1c1); margin-top: 3.5rem; margin-bottom: 0rem; padding-top: 2rem; padding-bottom: 2.8rem;}
.tel {font-size: 0.7rem; line-height: 1.7rem; margin-bottom: 0rem;}
.mail-creditos {font-size: 0.7rem; line-height: 1.7rem; margin-bottom: 0rem;}
.ubicacion {font-size: 0.7rem; justify-content: flex-start; align-items: flex-end;}
.redes-home {margin-top: 1rem; justify-content: center;}
.redes-home a {margin-left: 0rem; margin-right: 0rem; padding: 0rem 0.5rem;}


}









/* Nest Hub --------------------------------------------------------------  */
@media (max-width: 1024px) and (max-height: 600px) { 

/*VIDEO*/
#video-contenedor {position: absolute !important; height: 900px !important;}
#video {position: absolute !important; left: 0 !important; top: 0 !important; width: auto !important; height: 900px !important; z-index: -2; overflow: hidden;}

}
















/* IPAD Mini --------------------------------------------------------------  */
@media (max-width: 1024px) { 

/*VIDEO*/
#video {position: absolute; left: 0; top: 0; width: auto; height: 100vh; z-index: -2; overflow: hidden;}

/*PIE*/

.redes-home {justify-content: flex-end;}

}









/* IPAD Air --------------------------------------------------------------  */
@media (max-width: 820px) {

.redes-home {justify-content: center;}



}












/* IPAD less than 768px) -------------------------------------------------------  */
@media (max-width: 800px) and (min-height: 600px){


/*HOME ------------------- */

header {margin-top: 1rem; padding: 1rem 0rem;}
.menu-fondo {background-color: rgba(13, 174, 191, 0.89);}

/*BARRA NAVEGACIÓN*/
.navbar-brand {margin: 0rem; padding-top: 0rem; padding-bottom: 0.6rem;}
.navbar-brand img {width: 140px !important}
.navbar-toggler {border-color: transparent !important; padding: 0.3rem 0rem 0rem 0rem; opacity: 1;}
.navbar-toggler-icon  {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important}


/*VIDEO*/
#video {position: absolute; left: -400px; height: 100vh; width: auto;}

/*PASADOR*/
.frase-intro {margin-top: 1.5rem;}
.txt-pasador {font-size: 8rem; line-height: 8rem; margin-top: 0.5rem}

/*ICONOS SERVICIOS*/
.iconos-servicios {justify-content: center; margin-top: 0rem; flex:60%;  max-width: 60%;}
.iconos-servicios div {margin: 1.9rem 1.2rem;}
.ico-logos a {width: 6rem; height: 6rem;}
.ico-branding a {width: 6rem; height: 6rem;}
.ico-web a {width: 6rem; height: 6rem;}
.ico-ilustracion a {width: 6rem; height: 6rem;}
.ico-etiquetas a {width: 6rem; height: 6rem;}
.ico-musica a {width: 6rem; height: 6rem;}
.iconos-servicios-epigrafe {display: flex; justify-content: center; font-family: 'Khand', sans-serif; font-size: 1.1rem; color: #ffffff; margin: 0rem !important; padding-top: 6.5rem;}

/*PIE*/
.pie-home {background-image: linear-gradient(-45deg, #1b4d63, #1977a0, #0cb1c1); margin-top: 2.35rem; margin-bottom: 0rem; padding-top: 2.35rem; padding-bottom: 2.8rem;}
.tel {font-size: 0.7rem; line-height: 1.4rem; margin-bottom: 0rem;}
.mail-creditos {font-size: 0.7rem; line-height: 1.4rem; margin-bottom: 0rem;}
.ubicacion {font-size: 0.7rem; justify-content: flex-start; align-items: flex-end;}
.redes-home {margin-top: 0.75rem; justify-content: center;}
.redes-home a {margin-left: 0rem; margin-right: 0rem; padding: 0rem 0.5rem;}


}







/* CELULARES APAISADOS) ------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 500px){

.body-home {height: auto; background: lightblue url("../img-index/fondo-sm-landscape.jpg") no-repeat fixed center top;}


/*ICONOS SERVICIOS*/
.iconos-servicios {max-width: 70%}

/*PASADOR*/
.pasador-contenedor-grande {display: none;}
.pasador-contenedor-chico {display: block; margin-bottom: 1.75rem;}

/*PIE*/
.redes-secciones {justify-content: center;}
.tel {text-align: center !important; margin-bottom: 1.3rem;}
.mail-creditos {text-align: center !important; margin-bottom: 1.3rem;}
.ubicacion {justify-content: center !important; margin-bottom: 1.3rem; text-align: center;}
.redes-home {justify-content: center !important; margin-top: 0.5rem;}
.redes-home a {margin-left: 0rem; margin-right: 0rem; padding: 0rem 0.5rem; margin-top: 0rem;}

}











/* CELULARES ------------------------------------------------------- */
@media (max-width: 500px){


/*HOME ------------------- */

.body-home {height: auto; background: lightblue url("../img-index/fondo-sm-portrait.jpg") no-repeat fixed center top;}

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

/*VIDEO*/
#video-contenedor {display: none}
/* #video-contenedor {height: 100vh;} */
/*#video {position: absolute; left: -900px; width: auto; height: 1080px;} */

/*PASADOR*/
.pasador-contenedor-grande {display: none;}
.pasador-contenedor-chico {display: block; margin-bottom: 1.75rem;}
.frase-intro {margin-top: 3rem; color: #00fffc}
.txt-pasador {font-size: 5rem; line-height: 5.5rem; margin-top: 0.5rem}

/*ICONOS SERVICIOS*/
.iconos-servicios {max-width: 100%}
.iconos-servicios div {margin: 1.4rem 0.85rem;}
.ico-logos a {width: 5rem; height: 5rem;}
.ico-branding a {width: 5rem; height: 5rem;}
.ico-web a {width: 5rem; height: 5rem;}
.ico-ilustracion a {width: 5rem; height: 5rem;}
.ico-etiquetas a {width: 5rem; height: 5rem;}
.ico-musica a {width: 5rem; height: 5rem;}
.iconos-servicios-epigrafe {display: flex; justify-content: center; font-family: 'Khand', sans-serif; font-size: 1.1rem; color: #ffffff; margin: 0rem !important; padding-top: 5.2rem;}

/*PIE*/
.pie-home {background-image: linear-gradient(-45deg, #1b4d63, #1977a0, #0cb1c1); margin-bottom: 0rem; padding: 2.5rem 0rem;}
.tel {font-size: 0.8rem; line-height: 1.7rem; margin-bottom: 1.3rem; text-align: center;}
.mail-creditos {font-size: 0.8rem; line-height: 1.7rem; margin-bottom: 1.3rem; text-align: center;}
.ubicacion {font-size: 0.8rem; justify-content: center; text-align: center;}
.redes-home {margin-top: 1rem; justify-content: center;}
.redes-home a {margin-left: 0rem; margin-right: 0rem; padding: 0rem 0.5rem;}


}