/* con margin y paddin le quitamos todos los margenes a la web*/

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         text-decoration: none;
         list-style: none;
         /*Quita los puntos de las listas <li>*/
     }


body {
    background: rgb(3, 38, 56); /*color de fondo de la web*/
    color: rgb(236, 190, 65); 
font-family: 'Montserrat', sans-serif;
}
 

hr {
    /*Color de la barra separadora*/
    width: 95%;
    height: 4px;
    background: orange;
    margin-left: 10px;
    margin-top: 40px;
    /* margin: 30px 30px 0px 20px;
   espacio a los lados de la barra separadora*/
}


html {
    scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;

}

::-webkit-scrollbar-track {
    background: #4565ae;
}

::-webkit-scrollbar-thumb {
    background: rgb(112, 109, 11);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(30, 185, 15);
}

/*barra de scroll para firefox para html-->*/

html {
    overflow-y: scroll;
    scrollbar-color: #dfc567 #324582;
    scrollbar-width: thin;
}
/*fin de barra de scroll para firefox*/



 /*propiedades del boton inferior de IR ARRIBA O Subir*/

.scroll-up-btn {
   
    position: fixed;
    /*Se quedará fijo en la web*/
    height: 45px;
    /*alto del boton subir*/
    width: 42px;
    /*ancho del boton subir*/
    background: rgb(17, 39, 90, 0.7);
    /*color de fondo del boton subir*/
    right: 30px;
    /*posición derecha del boton subir*/
    margin-bottom: 10px;
    /*posición abajo del boton subir*/
    text-align: center;
    /*posición al centro de la flecha del boton subir*/
    line-height: 45px;
    /*posición de la flecha del boton subir*/
    color: rgb(112, 244, 68);
    /*color de la flecha del boton subir*/
    z-index: 0;
    /*el menu se pocionara al frente de la pagina*/
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.scroll-up-btn.show {
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}

.scroll-up-btn:hover {
    filter: brightness(90%);
}


a {
    color: rgb(125, 180, 88);
}

a:visited {
    color: rgb(246, 239, 51);
}





.titulo img {
        width: 20%;
    }

    


/* Ancho del menu con botones*/
.max-width {
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}

/* navbar styling */
.navbar {
    left: 0;
    top: 0;
}

.navbar {
    position: fixed;
    /*Cambiamos de fixed a relative para que se pueda*/
    width: 110%;
    /*posicion y ancho del menu del head*/
    z-index: 999;
    padding: 11px 0;
    /*posicion del texto del menu arriba o abajo del head*/
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}

.navbar.sticky {
    padding: 2px 0;
    /*Ancho del header estatico*/
    background: transparent;
}

.navbar .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    margin-left: -180px;
    /*espacio del logo a la izquierda*/
}

.navbar .menu li {
    margin-right: 6px;
    text-align: center;
    list-style: none;
    display: inline-block;
}

.navbar .menu li a {
    /*propiedades del menu*/
    width: 60px;
    display: block;
    color: rgb(228, 218, 66);
    font-size: 13px;
    font-weight: 300;
    margin-left: 2px;
    /*espacio de separacion de los botones del menu*/
    transition: color 0.3s ease;
}

.navbar .menu li a:hover {
    color: rgb(85, 237, 105);
}

.navbar.sticky .menu li a:hover {
    color: #fff;
}





/* propiedades del menu emergente */
.menu-btn {
    color: #fff;
    font-size: 43px;
    cursor: pointer;
    display: none;
}
.logo img {
    width: 280px;
    margin-left: 10px;
}

.logo1 img {
    width: 345px;
}

.univ1 img {
    width: 60px;
    margin-left: -40px;
}

.odo1 img {
    width: 60px;
    margin-right: 50px;

}




/* Slice box Style */
.sb-slider {
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    width: 85%;
    /* TAMAÑO DEL SLIDER  */
    list-style-type: none;
    margin-top: -40px; 
    
}

.sb-slider li {
    margin: 0;
    padding: 0;
    display: none;
}

.sb-slider li>a {
    outline: none;
}

.sb-slider li>a img {
    border: none;
}

.sb-slider img {
    max-width: 100%;
    display: block;
}


/* leyenda de la foto, ancho del texto, posicion, color, tamaño de letra y sombra */

.sb-description {
    
            -webkit-text-fill-color: rgb(242, 234, 145);
            -webkit-text-stroke: 1px rgb(16, 1, 5);
    font-size: 1.3rem;
    text-align: center;
    padding: 10px;
    /*ancho fondo del fondo del texto */
    bottom: 10px;
    left: -8px;
    /*posic del fondo del texto */
    right: -8px;
    /*posic del fondo del texto */
    z-index: 1000;
    position: absolute;
    /*
	background: #ddd2c3;
	background: rgba(194, 155, 97, 0.4);fondo del fondo del texto */
    /*border-left: 4px solid rgba(112, 40, 40, 0.7);borde del fondo del texto */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    color: #f5d89d;

    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}

.sb-slider li.sb-current .sb-description {
    opacity: 2;
}

.sb-perspective {
    position: relative;
}

.sb-perspective>div {
    position: absolute;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sb-side {
    margin: 0;
    display: block;
    position: absolute;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.wrapper {
    position: relative;
    max-width: 840px;
    width: 90%;
    padding: 0 50px;
    margin: 0 auto;
}

.sb-description h3 {
    font-size: 16px;
    /*text-shadow: 1px 1px 1px rgba(0,0,0,0.3);  color de la leyenda de la foto*/
    color: transparent;
    /*Oculta el color del texto del comentario buscar tambien en slicebox.css*/
    /*color: #fff; color de la leyenda de la foto*/
}

.sb-description :hover {
    color: rgb(17, 13, 62)
        /*cambia color de la leyenda de la foto*/
}


/*FLECHAS DE LAS FOTOS*/
.nav-arrows {
    display: none;
}

.nav-arrows a {
    width: 67px;
    /*ancho barra de Avance y Retroc*/
    height: 90%;
    /* largo o alto barra de Avance y Retroc*/
    background:transparent
        /* color barra Retroc*/
        url(img/izq-1.png) no-repeat top left;
    /* flecha Retroc*/
    background-position: center;
    position: absolute;
    top: 0%;
    left: 5%; 
    /* posicion  imagen */
    text-indent: -9000px;
    /* oculta letras de Nex y Previus */
    cursor: pointer;
    margin-top: 0%;
    opacity: 0.9;
    border-radius: 0%;
    /*
		box-shadow: 0 1px 1px rgba(162, 19, 19, 0.8); */
}

.nav-arrows a:first-child {
    left: auto;
    right: 5%;
    /* posicion de la FLECHA Y barra de avanzar imagen */
    background:transparent
        /* color barra Avance*/
        url(img/der-1.png) no-repeat top left;
    /*  flecha Avance color barra Retroc*/
    background-position: center;
}

.nav-arrows a:hover {
    opacity: 1;
}






 /*INICIO DE LA GRID*/
 .contenedor {
     width: 100%;
     /* el ancho del contenedor*/
     max-width: 1080px;
     /* y este es el ancho máximo puede variar*/
     margin: 0px auto;
     /* margen arriba y abajo y "auto" para centrar la web*/
     display: grid;
     /* esto formatea el gri*/
     grid-gap: 0px 0px;
     /* margen entre las columnas y filas*/
     grid-template-columns: repeat(4, 1fr);
     /* 3 columnas de un mismo tamaño*/
     grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(4, 1fr);
        /* 3 columnas de un mismo tamaño*/
    grid-template-rows: repeat(5, auto);
        grid-template-areas:
            "header header header header" 
            "titulo titulo titulo titulo"
            "posicion1 posicion1 posicion1 posicion1"
            "posicion2 posicion2 posicion2 posicion2"  
            "footer footer footer footer";
        
    }
    
    .contenedor>div,
    .contenedor .header,
    .contenedor .titulo, 
    .contenedor .posicion1,
    .contenedor .posicion2,  
    .contenedor .footer {
   margin: 0; 
   margin-top: 10px;
   
    
 }

 .contenedor .header {
     background: transparent;
     grid-area: header;
     padding: 45px; /*altura del menu*/
 }
.contenedor .titulo {
    grid-area: titulo;
    text-align: center;
    color: coral; }
     

 .contenedor .posicion1 {
     grid-area: posicion1;   
 }
 .contenedor .posicion2 {
     grid-area: posicion2;
    text-align: center;
 }
 .contenedor .footer {
     background: #040d1f;
     grid-area: footer;
     text-align: center;
     font-size: 13px;
     display: inline-block;
 }

 /*FIN DE LA GRID*/



/* 0000000000000000000000000000000000000000000000000 */


 
/* responsive media query start */

@media (max-width: 1000px) {   

/* logos Univers y Odonto se hacen invisibles*/
.univ1, .odo1 img {
        display: none;
    }


/*altura del menu*/
    .contenedor .header {
        padding: 35px;
    }

/* Ancho del menu con botones*/
.max-width {
    max-width: 1200px;
    padding: 0 100px;
    margin: auto;
}


.navbar .menu {
    /*menu emergente propiedades*/
    position: fixed;
    height: 90vh;
    /*Tamaño de alto del menu emergente- vh ocupa toda la ventana*/
    margin-top: 27px;
    /*altura del menu emergente*/
    width: 100%;
    /*ancho del menu emergente - variar altura*/
    left: -100%;
    /*posicion donde se oculta el menu*/
    margin-top: 50px;
    top: 0;
    /*altura de los botones del menu emergente*/
    background: rgba(12, 33, 46, 0.9);
    /* el 0. es la transparencia del menu*/
    text-align: center;
    /*posicion de los botones del menu*/
    padding-top: 50px;
    /*altura de los botones del menu emergente*/
    transition: all 0.3s ease;
    /*efecto de aparecer menu*/
}

.navbar .menu.active {
    left: 0;
}

.navbar .menu li {
    margin-left: 50px;
    margin-right: 10px;
    width: 150px;
    display: flex;
    display: inline-flex;

}

 /*propiedades de la barra de menu o header*/
.navbar .menu li a {
    display: block; 
    width: 60px;

}


.menu-btn {
    display: block;
    z-index: 999;
    margin-right: 20px;
    /*posicion de la hamburguesa*/
}

.menu-btn i.active:before {
content: "\f00d";
}

/* Tamaño y otras propiedades del cubo rotativo de fotos o Slice box */
.sb-slider {
    margin: 1% auto;
    position: relative; 
    width: 80%; /* TAMAÑO DEL SLIDER  */
 
    list-style-type: none;
    margin-top: -5%; /* POSICION ARRIBA DEL CUBO */
    margin-left: 10%;
}
  
/* leyenda de la foto, ancho del texto, posicion, color, tamaño de letra y sombra */
.sb-description h4 {
    text-align: center;
    font-size: 1rem;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
}

}


@media (max-width: 600px) {

/* logos Univers y Odonto se hacen invisibles*/
.univ1, .odo1 img {
    display: none;
}
 

/*posicion de la hamburguesa con "block" aparece la hamburguesa que estaba en "none" */
.menu-btn {
    display: block;
    z-index: 999;
    margin-right: -20px;

}

.menu-btn i.active:before {
    content: "\f00d";
}

/* TAMAÑO del logo gif gersonparedes*/
 
.logo img {
    width: 230px;
    margin-left: -80px;
}
/* GALERIA DE VIDEOS GIF TAMAÑO*/
.posicion2 img {
    width: 30%;


}

/* ANCHO DE LA BARRA DEL TITULO O HEADER*/
 
 

    /*altura del menu si no es transaparente*/
.contenedor .header {
    padding: 35px;

}


    .navbar .menu {
        /*menu emergente propiedades*/
        position: fixed;
        height: 90vh;
        /*Tamaño de alto del menu emergente- vh ocupa toda la ventana*/
        margin-top: 27px;
        /*altura del menu emergente*/
        width: 100%;
        /*ancho del menu emergente - variar altura*/
        left: -100%;
        /*posicion donde se oculta el menu*/
        margin-top: 50px;
        top: 0;
        /*altura de los botones del menu emergente*/
        background: rgba(12, 33, 46, 0.9);
        /* el 0. es la transparencia del menu*/
        text-align: center;
        /*posicion de los botones del menu*/
        padding-top: 50px;
        /*altura de los botones del menu emergente*/
        transition: all 0.3s ease;
        /*efecto de aparecer menu*/
    }

    .navbar .menu.active {
        left: 0;
    }

    .navbar .menu li {
        margin-left: 50px;
        margin-right: 10px;
        width: 150px;
        display: flex;
        display: inline-flex;

    }

    .navbar .menu li a {
        display: block;
        /*Propiedades del menu emergente*/
        width: 110px;
        margin: 10px 0;
        /*espacio entre links en el menu emergente*/
        font-size: 20px;
        /*tamaño de letras links en el menu emergente*/
    }

 .nav-arrows a {
     width: 77px;
     /*ancho barra de Avance y Retroc*/
     height: 90%;
     /* largo o alto barra de Avance y Retroc*/
    background: transparent
            /* color barra Retroc*/
            url(img/izq-1.png) no-repeat top left; 
     /* flecha Retroc*/
     background-position: center;
     position: absolute;
     top: 4%;
     left: -4%;
     /* posicion  imagen */
     text-indent: -9000px;
     /* oculta letras de Nex y Previus */
     cursor: pointer;
     margin-top: 0%;
     opacity: 0.9;
     border-radius: 0%;
     /*
		box-shadow: 0 1px 1px rgba(162, 19, 19, 0.8); */
 }

 .nav-arrows a:first-child {
     left: auto;
     right: -4%;
     /* posicion de la FLECHA Y barra de avanzar imagen */
     background: transparent
         /* color barra Avance*/
         url(img/der-1.png) no-repeat top left;
     /*  flecha Avance color barra Retroc*/
     background-position: center;
 }

    .max-width {
        max-width: 930px;
    }
 
     .navbar .logo a {
         color: rgb(210, 210, 35);
         margin-left: -270px;
         /*espacio del logo a la izquierda*/
     }
 
    	.nav-arrows a {
    	    width: 70px;
    	    height: 90%;
    	}
    

/* Slice box Style */
.sb-slider {
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    width: 160%;
    /* TAMAÑO DEL SLIDER  */
    list-style-type: none;
    margin-top: -15%;
        /* POSICION ARRIBA DEL CUBO */ 
    margin-left: -30%;
}

 

/* leyenda de la foto, ancho del texto, posicion, color, tamaño de letra y sombra */
.sb-description h4 {
    text-align: center;
    font-size: 1rem;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black 
    
}

 
.scroll-up-btn {

    right: 15px;
    /*posición derecha del boton subir*/
    margin-bottom: -10px;
    /*posición abajo del boton subir*/

}

}