* {
    padding: 0px;
    margin: 0px;
    list-style: none;
    font-family: 'Lato';
    text-decoration: none;
    box-sizing: border-box;
}

a{
    font-family: 'Lato';
    color: white;
}

.botonarriba{
    padding: 0% 5% 1% 90%;
}

img{
    max-width: 100%;
    height: auto;
}

/** HEADER **/

header #imagen{
    padding: 0% 45% 0% 45%;
    position: fixed;
    background-color: white;
    z-index: 10;
}

#masthead{
    background-image: url(img/backgroundheader.png);
    background-size: cover;
    background-position: bottom center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    justify-content: center;
    width: 100%;
    height: 550px;
}

#menu{
    background-color: #FBBA0E;
    font-family: 'Lato';
    padding: 1%;
}

#menu ul{
    display: flex;
    width: 100%;
}

#menu ul li{
    width: 20%;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

#menu ul li a{
    padding: 3% 7%;
    border-radius: 10px;
}

#menu a:hover{
    color: #FBBA0E;
    background-color: white;
    border-radius: 10px;
    font-weight: 700;
    -webkit-transition: all 0.75s ease;
    transition: all 0.75s ease;
}


/** MAIN **/

/** Impresión 3D **/

#impresion{
    padding: 2%;
}

#impresion h3{
    font-family: 'Lato';
    color: #E72585;
    font-size: 30px;
    padding: 5% 0% 2% 5%;
}

#impresion p{
    padding: 0% 5% 0% 5%;
    column-count: 2;
    font-family: 'Lato';
    color: #9D9C9C;
    font-size: 12px;
}

#video{
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
}

#video iframe{
    padding: 2% 5% 2% 5%;
    position: absolute;
    height: 100%;
    width: 100%;
}

/** Príntica **/

h1{
    font-family: 'Lato';
    color: white;
    background-color: #ED721D;
    font-weight: 900;
    font-size: 50px;
    padding: 5% 0% 0% 5%;
}

h2{
    font-family: 'Lato';
    color: white;
    background-color: #ED721D;
    font-weight: 400;
    font-size: 20px;
    padding: 0% 0% 1% 5%;
}

.presentacion{
    display: flex;
}

.presentacion #texto{
    font-family: 'Lato';
    color: #3C3C3B;
    font-size: 14px;
    padding: 5%;
}

#gif{
    width: 100%;
    padding: 0% 3% 0% 0%;
}

/** Sucursales **/

#sucursales{
    font-family: 'Lato';
    background-color: #E73937;
    color: white;
    font-size: 14px;
    padding: 2%;
}

#sucursales h3{
    font-size: 30px;
    padding: 5% 0% 0% 5%;
}

#sucursales p{
    padding: 1% 0% 0% 5%;
}

#universidades{
    display: flex;
    padding: 1% 5% 1% 5%;
    width: 100%;
}

#universidades div{
    align-content: center;
    align-items: center;
    width: 16%;
    background-color: white;
    margin: 0.7%;
    padding: 1% 0%;
    border-radius: 10px;
}

#universidades div img{
    width: 100%;
    padding: 7%;
    border-radius: 10%;
}
    
    #universidades a{
        filter: alpha(opacity=40);
        -moz-opacity: 0.4;
        opacity: 0.4;
        -khtml-opacity: 0.4;
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
    }

    #universidades a:hover{
        filter: alpha(opacity=100);  
        -moz-opacity: 1.0;  
        opacity: 1.0;
        -khtml-opacity: 1.0; 
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
    }

h4{
    font-family: 'Lato';
    color: #E73937;    
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant: small-caps;
    padding: 2%;
}

#universidades div p{
    font-size: 12px;
    text-align: center;
    padding: 3%;
    color: #E73937;
}

/** Descargá la APP **/

#app{
    background-color: #674192;
    padding: 2%;
}

#app h3{
    font-family: 'Lato';
    color: white;
    font-weight: 900;
    font-size: 50px;
    padding: 5% 0% 0% 0%;
    text-align: center;
}

.app{
    display: flex;
}

.descarga{
    display: block;
    padding: 15% 3% 10% 10%;
}

#celularapp{
    padding: 2%;
}

#textoapp{
    width: 50%;
    color: white;
    padding: 10% 10% 15% 5%;
    font-size: 18px;
}

/** Contacto **/

#contacto{
    padding: 2%;
}

#contacto h3{
    font-family: 'Lato';
    color: #5EC0C6;
    font-size: 30px;
    padding: 5% 0% 2% 5%;
}

#contacto p{
    font-family: 'Lato';
    color: #3C3C3B;
    font-size: 15px;
    padding: 1% 0% 0% 10%;
}

#contactanos{
    display: flex;
    font-family: 'Lato';
    color: #3C3C3B;
    font-size: 14px;
    padding: 0% 5% 5% 5%;
    width: 100%;
}

#formulario{
    width: 50%;
    margin: 1% 5% 5% 5%;
}

#mapa{
    width: 50%;
}

#mapa p{
    color: #5EC0C6;
    font-weight: 700;
    font-size: 13px;
}

#googlemaps{
    margin: 1%;
}

input{
    width: 500px;
    padding: 1%;
    margin: 1%;
}

#mensaje{
    height: 150px;
}

#enviar{
    font-family: 'Lato';
    color: white;
    box-shadow: none;
    background-color: #5EC0C6;
}

/** FOOTER **/

footer{
    font-family: 'Lato';
    background-color: #5AB257;
    color: white;
    font-weight: 300;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 2% 0% 3% 5%;
}


/* RESPONSIVE */

    /* TABLET: 480px - 800px */

    @media (max-width:50em) {
        
        header #imagen{
            padding: 0% 40% 0% 40%;
        }

        #masthead{
            height: 470px;
        }
        
        #menu ul{
            display: block;
            padding: 1%
        }

        #menu ul li{
            margin: 1% 0% 1% 0%;
            padding: 1%;
            width: 100%;
            font-size: 16px;
        }

        #menu ul li a{
            border-radius: 0px;
            font-size: 16px;
            padding: 0%;
            width: 100%;
            color: white;
            background-color: #FBBA0E;
        }

        #menu a:hover{
            border-radius: 0px;
            font-size: 16px;
            padding: 0%;
            width: 100%;
            color: white;
            background-color: #FBBA0E;
        }
        
        h1{
            font-size: 35px;
            padding: 5% 0% 0% 5%;
        }

        h2{
            font-size: 15px;
            padding: 0% 0% 2% 5%;
        }

        #sucursales{
            font-size: 12px;
            padding: 3%;
        }

        #sucursales h3{
            padding: 5% 0% 0% 5%;
        }

        #sucursales p{
            padding: 2% 0% 3% 5%;
        }
        
        #universidades{
            display: block;
            padding: 2% 5% 2% 5%;
        }

        #universidades div{
            width: 100%;
            margin: 2%;
        }

        #app h3{
            font-size: 30px;
        }

        .app{
            display: block;
        }

        .descarga{
            display: flex;
            padding: 5% 5% 0% 5%;
        }

        #celularapp{
            padding: 0% 20% 0% 20%;
        }

        #textoapp{
            width: 100%;
            padding: 6%;
            font-size: 12px;
        }
        
        #contacto{
            padding: 3%;
        }

        #contacto h3{
            padding: 6% 0% 3% 6%;
        }

        #contacto p{
            padding: 0% 0% 0% 6%;
        }

        #contactanos{
            display: block;
            font-size: 12px;
            padding: 0% 5% 5% 5%;
            width: 100%;
        }

        #formulario{
            width: 100%;
            margin: 5%;
        }

        #mapa{
            width: 100%;
        }

        #mapa p{
            color: #5EC0C6;
            font-weight: 700;
            font-size: 13px;
        }

        input{
            width: 300px;
            padding: 0%;
            margin: 2%;
        }

        #mensaje{
            height: 150px;
        }

        #enviar{
            font-family: 'Lato';
            color: white;
            box-shadow: none;
            background-color: #5EC0C6;
        }
        
        footer{
            font-size: 11px;
            padding: 4%;
        }
        
    }


    /* MOBILE: 320px - 480px */

    @media (max-width:30em) {
        
        .botonarriba{
            padding: 0% 5% 1% 80%;
        }
        
        header #imagen{
            padding: 0% 30% 0% 30%;
        }
        
        #masthead{
            height: 400px;
        }
        
        #menu ul{
            display: block;
            padding: 1%
        }

        #menu ul li{
            margin: 3% 0% 3% 0%;
            padding: 2%;
            width: 100%;
            font-size: 16px;
        }

        #menu ul li a{
            border-radius: 0px;
            font-size: 16px;
            padding: 0%;
            width: 100%;
            color: white;
            background-color: #FBBA0E;
        }

        #menu a:hover{
            border-radius: 0px;
            font-size: 16px;
            padding: 0%;
            width: 100%;
            color: white;
            background-color: #FBBA0E;
        }
        
        #impresion p{
            padding: 5%;
            column-count: 1;
        }
        
        h1{
            font-size: 35px;
            padding: 6% 0% 0% 6%;
        }

        h2{
            font-size: 15px;
            padding: 0% 0% 2% 6%;
        }

        .presentacion{
            display: block;
        }

        .presentacion #texto{
            font-size: 12px;
            padding: 6%;
        }

        #gif{
            width: 100%;
            padding: 0% 6% 0% 6%;
        }
        
        #sucursales{
            font-size: 12px;
            padding: 3%;
        }

        #sucursales h3{
            padding: 5% 0% 0% 5%;
        }

        #sucursales p{
            padding: 2% 0% 3% 5%;
        }
        
        #universidades{
            display: block;
            padding: 2% 5% 2% 5%;
        }

        #universidades div{
            width: 100%;
            margin: 2%;
        }
        
        #app h3{
            font-size: 30px;
        }

        .app{
            display: block;
        }

        .descarga{
            display: flex;
            padding: 5% 5% 0% 5%;
        }

        #celularapp{
            padding: 0% 20% 0% 20%;
        }

        #textoapp{
            width: 100%;
            padding: 6%;
            font-size: 12px;
        }
        
        #contacto{
            padding: 3%;
        }

        #contacto h3{
            padding: 6% 0% 3% 6%;
        }

        #contacto p{
            padding: 0% 0% 0% 6%;
        }

        #contactanos{
            display: block;
            font-size: 12px;
            padding: 0% 5% 5% 5%;
            width: 100%;
        }

        #formulario{
            width: 100%;
            margin: 5%;
        }

        #mapa{
            width: 100%;
        }

        #mapa p{
            color: #5EC0C6;
            font-weight: 700;
            font-size: 13px;
        }

        input{
            width: 300px;
            padding: 0%;
            margin: 2%;
        }

        #mensaje{
            height: 150px;
        }

        #enviar{
            font-family: 'Lato';
            color: white;
            box-shadow: none;
            background-color: #5EC0C6;
        }
        
        footer{
            font-size: 11px;
            padding: 4%;
        }
        
    }