estilos-A-U.css

/* Iconos */

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.orange600 { color: #FB8C00; }

}


/* Texto Video */

vite {
    width: 100%;
    height: 400px;
    position: relative;
}

.vite {
    width: 100%;
    height: 400px;
    position: relative;
}

vite. vite 1 {
    padding: 80px 0;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

vite .texto-video{
    display: flex;
    flex-direction: column;
}

.texto-video{
    display: flex;
    margin-top: 5%;
    flex-direction: column;
}

texto-video{
    display: flex;
    flex-direction: column;
}
 

.texto-video h1{
    font-size: 55px;
    color:#20282e;  
   text-align: center;
font-family: 'Frank Ruhl Libre', serif;
}

.texto-video h2{
    font-size: 45px;
    font-weight: 300;
    color:#00fffb;
   text-align: center;
font-family: 'Frank Ruhl Libre', serif;
}

.texto-video h2-2{
    font-size: 25px;
    font-weight: 300;
    color:#00fffb;
   text-align: center;
font-family: 'Frank Ruhl Libre', serif;
}

.texto-video h3{
    font-size: 38px;
    margin-top: 3%;
    font-weight: 300;
    color:#000000;
    text-align: center;
font-family: 'Playfair Display', serif;
}

.texto-video h3-2{
    font-size: 38px;
    font-weight: 300;
    color:#000000;
    text-align: center;
font-family: 'Playfair Display', serif;
}

.texto-video h4{
    font-size: 25px;
    font-weight: 300;
    color:#1c1c1c;
font-family: 'Playfair Display', serif;
}

.texto-video h5{
    font-size: 20px;
    font-weight: 225;
    color:#3b4445;
font-family: 'Acme', sans-serif;
    text-align: justify;
}

.texto-video h5 p{
    font-size: 20px;
    font-weight: 225;
    color:#3b4445;
font-family: 'Acme', sans-serif;
    text-align: justify;
}

.texto-video h6{
    font-size: 20px;
    font-weight: 225;
    color:#3b4445;
font-family: 'David Libre', serif;
}

.texto-video h7{
    font-size: 47px;
    font-weight: 225;
    color:#b57f00;
    text-align: center;
font-family: 'Fredoka One', cursive;
    text-align: left;
}

.texto-video h8{

    font-size: 85px;
    font-weight: 225;
    text-align: center;
    color:#b57f00;
    font-family: 'Jomhuria', cursive;
}

.texto-video h9{
    font-size: 15px;
    font-weight: 225;
    color:#111414;
font-family: 'Hammersmith One', sans-serif;
}

.texto-video hT{
    font-size: 60px;
    font-weight: 225;
    color:#000000;
font-family: 'David Libre', serif;
}

.texto-video hPP{
    font-size: 55px;
    font-weight: 225;
    color:#ef00ff;
    font-family: 'Capriola', sans-serif;
}

.texto-video hFA{
    font-size: 55px;
    font-weight: 225;
    color:#ff7600;
    font-family: 'Niramit', sans-serif;
}

.texto-video h-doctor{
    font-size: 55px;
    font-weight: 225;
    color:#00adff;
    font-family: 'Boogaloo', cursive;
}

.texto-video h-gamelin{
    font-size: 55px;
    font-weight: 225;
    color:#e69900;
    font-family: 'Boogaloo', cursive;
}

.texto-video h-buba{
    font-size: 55px;
    font-weight: 225;
    color:#e88b00;
    font-family: 'Bangers', cursive;
}

.texto-video h-kof{
    font-size: 55px;
    font-weight: 225;
    color:#e88b00;
    font-family: 'Concert One', cursive;
}

.texto-video h-meri{
    font-size: 55px;
    font-weight: 225;
    color: #1f1a29;
    font-family: 'Lilita One', cursive;
}

/* About us */

main .sobre-nosotros{
    padding: 30px 0 60px 0;
    color: #ffffff;
    background: #ffffff;
    width: 95%;
    margin-bottom: 30px;
    margin-top: 3%;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
    }


.contenedor-sobre-nosotros{
    display: flex;
    justify-content: space-evenly;
}

.imagen-about-us{
    width: 30%;
    height: 48%;
    margin-left: 2%;
}

.sobre-nosotros .contenido-textos{
    width: 48%;
    margin-right: 2%;
    align-items: justify;
}

.contenido-textos h3{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-textos h3 span{
    background: linear-gradient(to top, #654805 0%, #ffbd04 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-textos h4{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-textos h4 span{
    background: linear-gradient(to top, #ef00ff 0%, #faa0fb 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-textos h5{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-textos h5 span{
    background: linear-gradient(to top, #ff7600 10%, #fff700 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-textos h6{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-textos h6 span{
    background: linear-gradient(to top, #00aeff 0%, #00fff3 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}


.contenido-textos p{
    padding: 0px 0px 30px 15px;
    font-size: 17px;
    font-weight: 225;
    color:#111414;
    font-family: 'Hammersmith One', sans-serif;
    text-align: justify;
}

.sobre-nosotros .contenido-text{
    width: 48%;
    margin-right: 2%;
    align-items: justify;
}

.contenido-text h1{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-text h1 span{
    background: linear-gradient(to top, #754c00 0%, #ffaa00 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-text h3{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-text h3 span{
    background: linear-gradient(to top, #db9d00 0%, #fff4c2 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-text h4{
    font-size: 25px;
    font-weight: 225;
    color:#1f1f1f;
    font-family: 'Acme', sans-serif;
    margin-top: 5%;
    text-align: justify;
}

.contenido-text h4 span{
    background: linear-gradient(to top, #000000 0%, #dbdbdb 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-text p{
    padding: 0px 0px 30px 15px;
    font-size: 17px;
    font-weight: 225;
    color:#111414;
    font-family: 'Hammersmith One', sans-serif;
    text-align: justify;
}



@media screen and (max-width:900px){

    .contenedor-sobre-nosotros{
        flex-direction: initial;
        justify-content: center;
        align-items: center;
    }

    .sobre-nosotros .contenido-textos{
        width: 90%;
    }

    .sobre-nosotros .contenido-tex{
        width: 90%;
    }


    .imagen-about-us{
      width: 35%;
    }


@media screen and (max-width:500px){

    .contenedor-sobre-nosotros{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    /* ABOUT US */

    .imagen-about-us{
        margin-bottom: 25px;
        width: 65%;
        height: 48%
    }

    .sobre-nosotros .contenido-textos{
        width: 95%;
    }

    .sobre-nosotros .contenido-text{
        width: 95%;
    }
}