*{
    padding: 0;
    margin: 0;
}

header{
    background-image: linear-gradient(#430460, #660099);
    color: black;
    width: 100%;
    height: 5em;
    display: flex;
    text-align: center; 
    animation: header 5s ease-in;
    position: sticky;
    top: 0px;
    box-shadow: 0px 0px 10px aliceblue;
}

@keyframes tituloTop{
    0%,18%{
        content: "Cursos On-line e Presenciais!";
    }
    21%,40%{
        content: "Imaginação Não Tem Limites";
    }
    41%,60%{
        content: "Crie O Que Quiser!";
    }
    61%,80%{
        content: "Não Perca Essa Oportunidade!";
    }
    81%, 100%{
        content: "Fábrica De Melhorias";
    }
}

@keyframes rocket {
    0%{height: 20em;
        transform: translate(-50em, 60em);
    }
    40%{
        height: 20em;
        transform: translate(-52%, 0);
    }
    60%{
        height: 15em;
        transform: translate(-52%, -2em);
    }
    100%{
        transform: translate(-43em, -5em);
    }
}

@keyframes header {
    0%{
        height: 100vh;
    }
    60%{
        height: 100vh;
    }
    100%{
        height: 13vh;
    }
}

@keyframes topFadeIn {
    0%{
        opacity: 0;
    }
    90%{
        opacity: 0;   
    }
    100%{
        opacity: 100;
    }
}

@keyframes title {
    0%{
        filter: opacity(0);
    }
    40%{
        filter: opacity(0);
        font-size: 3em;
        top: 45%;
        visibility: visible;
    }
    60%{
        filter: opacity(100);
        font-size: 3em;
        top: 50%;
    }
    70%{
        visibility: hidden;
        filter: opacity(0);
    }
}

nav{
    width: 40em;
    height: 1.5em;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0.7em);
    text-align: center;
    background-color: #046edb;
    padding: 1em;
    border-radius: 2em;
    animation: topFadeIn 5s ease-in-out;
    opacity: 100;
}

.top{
    height: 35em;
    background-image: linear-gradient(#0158b0, #046edb, #74a6d8);
    padding-top: 1em;
    width: 100%;
    display: grid;
    justify-content: center;
}

#tit1{
    font-family:monospace;
    font-size: 4em;
    color: aliceblue;
    text-shadow: 3px 3px 10px rgb(0, 0, 0);
}

#titTop{
    background-color:#0158b0;
}
#tit1::after{
    content: "";
    animation: tituloTop 20s infinite;
}

.topConteudo{
    display: flex;
}

.left{
    width: 6em;
    margin: 2em;
    font-size: 1.5em;
    justify-content: center;
    display: flex;
}

#nina{
    height: 20.35em;
    margin-right: 8em;
}

.right{
    width: 30em;
    height: 12em;
    margin: 1em;
    font-size: 1.5em;
}

.ballon{
    width: 17em;
    color: aliceblue;
    background-image: linear-gradient(#7e00bd,#4f0276);
    padding: 8px;
    border-radius: 1em;
    border: 4px solid #2f0a50;
    box-shadow: 0px 0px 10px #2a033c;
    text-shadow: 4px 2px 4px black;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.linha1, .linha3{
    height: 4em;
    width: 100%;
}

.linha2, .linha4{
    height: 4em;
    width: 100%;
}

#balao2, #balao4{
    margin-left: 19em;
}

#fog{
    opacity: 10%;
    position: relative;
    transform: translate(-20em, 0);
}

#TitAnimation{
    color: aliceblue;
    animation: title 5s ease-in-out;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: monospace;
    font-size: 2em;
    visibility: hidden;
}

#logo{
    filter: invert(100);
    position: relative;
    animation: rocket 5s ease-in-out;
    left: 50%;
    top: 4em;
    transform: translate(-43em, -5em);
    border-radius: 0;
    height: 5em;
}

a{
    color: aliceblue;
    margin: 1em;
    font-size: 1.5em;
    position: relative; 
    font-family:Georgia, 'Times New Roman', Times, serif;
    text-decoration: none;
}

#a1{
    background-color: #0023adac;
    padding: 6px;
    border-radius: 0.5em;
    height: 1em;
    margin-top: 0;
}

.content{
    text-align: center;
    width: 100%;
    top: 10em;
}

img{
    height: 30em;
    margin: 1em;
    border-radius: 2em;
}

#copy{
    background-color: #00000029;
    color: rgb(0, 0, 0);
    font-size: 1.5em;
    padding: 1em;
    border-radius: 3em;
    font-family: Arial, Helvetica, sans-serif;
    width: 30em;
    position: relative;
    display: flexbox;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#professores{
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;
}

#btnFaleConosco{
    background-color: #224627;
    border-radius: 1em;
    border: 2px solid rgb(1, 29, 0);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 15px;
    font-style: oblique;
    color: aliceblue;
    height: 3em;
    width: 9em;
    margin-top: 1em;
}

#btnFaleConosco:hover{
    background-color: black;
    border: 2px solid aliceblue;
    cursor: pointer;
}

/*  SEGUNDA PARTE DA PÁGINA // MIDDLE */

#tit2{
    font-family:monospace;
    font-size: 4em;
    background-image: linear-gradient(#7704db,#a069c8);
    color: aliceblue;
    text-shadow: 2px 2px 2px black;
    height: 2em;
    align-content: center;
}

#txtMid b{
    color: #ff52ff;
}

.midContent{
    justify-content: center;
    align-content: center;
    display: flex;
    height: 40em;
    background-image: linear-gradient(rgb(151, 205, 255), rgb(104, 88, 177), rgb(47, 0, 76));
}

.aboutUs{
    background-image: linear-gradient(#0153a5,#0262c1,#6999c8);
    height: 32em;
    width: 75em;
    display: flex;
    border-radius: 3em;
    border: 4px solid #053e63 ;
    color: aliceblue;
    text-shadow: 1px 1px 1px black;
    box-shadow: 4px 4px 15px black;
    margin-top: 3em;
}

.aboutLeft{
    width: 30%;
    align-content: center;
}

.aboutRight{
    width: 60%;
    padding: 1em;
    border-radius: 1em;
    font-size: 1.3em;
    align-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 1em;
    background-color: rgba(0, 0, 0, 0.297);
}

    /* More */

#tit2Mid{
    background-image: linear-gradient(#047adb,#69c2c8);
    height: 2em;
    font-size: 4em;
    align-content: center;
    color: aliceblue;
    text-shadow: 2px 1px 1px black;
    font-family: monospace;
}

#tit3Mid{
    background-image: linear-gradient(#047adb,#69c2c8);
    width: 100%;
    height: 2em;
    font-size: 4em;
    align-content: center;
    color: aliceblue;
    text-shadow: 2px 1px 1px black;
    font-family: monospace;
}

.agesylectures h1{
    background-color: rgba(0, 0, 0, 0.32);
    padding: 1em;
}

.more{
    background-image: url(indexImgs/backsp.png);
   display: grid;
   justify-items: center;
   padding-bottom: 1em;
}

#subt{
    color: aliceblue;
    text-shadow: 0px 0px 10px rgb(117, 222, 217);
    font-family: monospace;
    font-size: 2em;
    width: 25em;
    padding: 1em;
    border: 3px solid aliceblue;
    border-bottom: none;
    border-radius: 2em;
    background-color: rgba(0, 0, 0, 0.781);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 2em;
}

.places{
    display: flex;
    background-image: linear-gradient(rgba(0, 0, 0, 0.788), rgba(0, 0, 0, 0.635));
    border: 3px solid aliceblue;
    border-radius: 2em;
}

.places img{
    box-shadow: 0px 0px 10px rgb(117, 222, 217);
    border: 3px solid aliceblue;
}

.places h1{
    font-family: monospace;
    color: aliceblue;
    font-size: 2.5em;
    text-shadow: 0px 0px 10px rgb(117, 222, 217);
}

.pl1, .pl2, .pl3{
    display: grid;
    padding: 1em;
    justify-content: center;
    border-radius: 2em;
}

.oldyall{
    color:aliceblue;
    font-family: monospace;
    text-align: center;
    display: grid;
    justify-content: center;
    justify-items: center;
    background-image: linear-gradient(#2e0a71, #150434);
    padding-bottom: 1em;
    padding-top: 1em;
    width: 100%;
}

.oldyall strong{
    color:rgb(0, 255, 225)
}

.oldyall h1{
    width: 30em;
    font-size: 2.5em;
    margin: 1em;
}

.oldyall h2{
    margin: 1em;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 10px magenta;
    font-size: 2em;
}

#hr1{
    width: 90%;
}

.oldyall hr{
    width: 65%;
}

.agesylectures img{
    box-shadow: 0px 0px 10px rgb(117, 222, 217);
    border: 3px solid aliceblue;
}

.agesylectures h1{
    font-size: 4em;
}

.agesylectures{
    background-image: url(indexImgs/oficbackground.png);
    padding-top: 1em;
    padding-bottom: 1em;
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: aliceblue;
    width: 100%;
}

.afterMiddle{
    background-image: linear-gradient(rgb(59, 46, 160),rgb(48, 0, 79));
}

.oldsimg img{
    height: 40em;
    margin-top: 2em;
}

.lecturesimg{
    margin: 2em;
}

#btit3{
    background-image: linear-gradient(#047adb,#69c2c8);
    width: 100%;
    height: 2em;
    font-size: 4em;
    align-content: center;
    color: aliceblue;
    text-shadow: 2px 1px 1px black;
    font-family: monospace;
}

#imgTurma{
    height: 27em;
    border: 4px solid #053e63;
    box-shadow: 0px 0px 15px rgb(170, 198, 255);
}

.imgs{
    background-image: url(indexImgs/fundoImgs.png);
    height: 70em;
    padding: 2em;
    display: grid;
}

#img1, #img2, #img3, #img4{
    box-shadow: 0px 0px 15px rgb(0, 0, 0);
}
#img1:hover{
    height: 32em;
    margin: 0em;
    transition: 0.3s ease-in-out;
}
#img2:hover{
    height: 32em;
    margin: 0em;
    transition: 0.3s ease-in-out;
}
#img3:hover{
    height: 32em;
    margin: 0em;
    transition: 0.3s ease-in-out;
}
#img4:hover{
    height: 32em;
    margin: 0em;
    transition: 0.3s ease-in-out;
}

/* PARTE DO FINAL   // FINAL */

.final{
    background-image:url(indexImgs/finalFund.png);
    height: 52em;
}

#tit3{
    font-family:monospace;
    align-content: center;
    background-image: linear-gradient(#047adb,#69c2c8);
    color: aliceblue;
    text-shadow: 2px 2px 2px black;
    height: 2em;
    font-size: 4em;
}

.finalContent{
    color: aliceblue;
    justify-content: center;
    align-content: center;
    display: flex;
    margin-top: 5em;
    width: 100%;
    height: 35em;
    margin: 0;
}
.finalSquare{
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 5em;
}

.finalLeft{
    width: 40em;
    height: 40em;
    padding: 1em;
    border-radius: 2em;
    margin-right: 2em;
    background-color: rgba(0, 0, 0, 0.244);
    align-content: center;
    display: grid;
}

#titRedes{
    font-family:monospace;
    color: aliceblue;
    font-size: 3em;
    text-shadow: 0px 0px 10px rgb(0, 195, 255);
    margin-bottom: 1em;
}

.finalRight{
    align-content: center;
    width: 50%;
    margin-left: 2em;
    background-color: rgba(0, 0, 0, 0.261);
    border-radius: 2em;
}

.greenSquare{
    background-image: radial-gradient( transparent,rgba(0, 255, 0, 0.276));
    border: 2px solid aliceblue;
    box-shadow: 0px 0px 10px lime;
    border-radius: 2em;
    height: 20em;
    margin-bottom: 2em;
}

.purpleSquare{
    background-image: radial-gradient(transparent, rgba(242, 0, 255, 0.266));
    border: 2px solid aliceblue;
    box-shadow: 0px 0px 10px magenta;
    border-radius: 2em;
    height: 15em;
}

.finalContentTop{
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
    margin-top: 2em;
}

.finalContentBottom{
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

#viaWhatsapp{
    background-image: linear-gradient(#29cf3f,#0f8a1f) ;
    text-shadow: 1px 1px 1px black;
    box-shadow: 0px 0px 10px aliceblue;
    border: 3px solid aliceblue;
    color: aliceblue;
    font-family:Georgia, 'Times New Roman', Times, serif;
    height: 5em;
    width: 9em;
    border-radius: 1em;
    margin-top: 3em;
}

#viaWhatsapp:hover{
    background-image: linear-gradient(#197926,#073a0d) ;
    cursor: pointer;
}

#titFale{
    font-family: monospace;
    color: aliceblue;
    text-shadow: 0px 0px 10px lime;
    font-size: 2.5em;
}

#titVerRedes{
    font-family: monospace;
    font-size: 2.5em;
    width: 18em;
    color: aliceblue;
    text-shadow: 0px 0px 10px rgb(221, 0, 255);
}

#logoZap{
    height: 7em;
    border-radius: 0;
}

#instaLogo{
    height: 6em;
    border-radius: 0;
}

#faceLogo{
    height: 6em;
}

#btnInsta{
    background-image: linear-gradient(rgb(71, 71, 159), rgb(247, 0, 255), rgb(255, 255, 95));
    border: 3px solid aliceblue;
    box-shadow: 0px 0px 10px rgb(252, 96, 255);
    text-shadow: 1px 1px 1px black;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: aliceblue;
    border-radius: 1em;
    height: 3em;
    width: 7em;
    margin-right: 1em;
    margin-top: 4em;
}

#btnFace{
    background-image: linear-gradient(rgb(64, 64, 159),rgb(32, 32, 77));
    color: aliceblue;
    border: 3px solid aliceblue;
    box-shadow: 0px 0px 10px rgb(111, 111, 255);
    text-shadow: 1px 1px 1px black;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 1em;
    height: 3em;
    width: 7em;
    margin-top: 4em;
}

#btnFace:hover{
    background-image: linear-gradient(rgb(33, 33, 82),rgb(14, 14, 35));
    cursor: pointer;
}

#btnInsta:hover{
    background-image: linear-gradient(rgb(45, 45, 101), rgb(155, 0, 161), rgb(161, 161, 62));
    cursor: pointer;
}

.btnsRedes{
    justify-content: center;
}

footer{
    background-color: black;
    color: aliceblue;
    font-family: monospace;
    text-align: center;
    align-content: center;
    height: 2em;
    width: 100%;
    font-size: 2em;
}

@media screen and (max-width:1310px) {
    #balao2, #balao4{
        margin-left: 17em;
    }
    .ballon{
        width: 14em;
    }
    .linha2, .linha3{
        height: 5em;
    }
    .top{
        height: 40em;
    }
    #nina{
        margin-top: 4.4em;
    }
    .aboutUs{
        width: 65em;
    }
    .aboutRight{
        margin-left: 4em;
        width: 50%;
        font-size: large;
    }
        /* More */
    .places img{
        height: 20em;
    }
    .finalSquare{
        display: grid;
    }
    .final{
        height: 105em;
        justify-content: center;
    }
    .finalContent{
        align-content: center;
        height: auto;
        margin: 0;
    }
}
@media screen and (max-width:1220px) {
    .top{
        height: 45em;
        display: grid;
        justify-content: baseline;
    }
    .left{
        width: 10em;
    }
    .right{
        width: 18em;
        margin-top:-2em;
    }
    #titTop{
        background-color: #0158b0;
        width: 100%;
    }
    #nina{
        margin-top: 7.7em;
        margin-left: 6em;
    }
    #balao2, #balao4{
        margin: 0;
    }
    .linha1, .linha2, .linha3, .linha4{
        width: 100%;
    }
    #balao1, #balao2, #balao3, #balao4{
        width: 19em;
        margin-top: 2.5em;
    }
    #balao4{
        margin-top: 2.9em;
    }
    .aboutUs{
        width: 50em;
        height: 35em;
    }
    #imgTurma{
        height: 20em;
    }
    .aboutRight{
        width: 100%;
    }
    .aboutLeft{
        width: 25%;
    }
        /* More */
    #subt{
        width: 17em;
    }
    .places{
        width: 45em;
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
    }
    .oldsimg img{
        height: 25em;
    }
    .lecturesimg img{
        height: 20em;
    }
    .oldyall h1{
        font-size: 2em;
    }
    .imgs{
        height: 140em;
        justify-content: center;
    }
    .fila1, .fila2{
        display: grid;
    }
    .finalRight{
        margin-top: 2em;
        margin-bottom: 2em;
        width: 38em;
    }
    .final{
        height: max-content;
    }
}

@media screen and (max-width: 900px) {
    nav{
        width: 23em;
        display: flex;
        justify-content: center;
    }
    a{
        font-size: medium;
        margin: 0.4em;
    }
    #content{
        display: grid;
        justify-content: center;
    }
    .top{
        height: 35em;
        display: grid;
        text-align: center;
        justify-content: center;
        box-shadow: none;
    }
    #topContent{
        display: flex;
    }
    .left{
        width: 0px;
        margin: 0;
    }
    .right{
        display: grid;
        justify-content: center;
        width: 22em;
        margin-top:0;
    }
    .linha1{
        height: 4em;
    }
    .linha2{
        height: 5em;
    }
    .balao{
        background-image: linear-gradient(#8611c126,#4f0276);
    }
    #balao1, #balao3{
        margin: 0;
        width: 10em;
        font-size: medium;
    }
    #balao2, #balao4{
        margin-left: 12em;
        width: 10em;
        font-size: medium;
    }
    #nina{
        height: 24.4em;
        margin-left: 3em;
        visibility: hidden;
    }
        /* More */
    #tit2Mid{
        height: 3em;
    }
    #subt{
        width: 15em;
    }
    .places{
        display: grid;
        width: 30em;
        border-radius: 1em;
    }
    .oldyall h1{
        font-size: 1.5em;
        width: 22em;
    }
    .agesylectures h1{
        font-size: 2.3em;
    }
    .oldsimg{
        display: grid;
        justify-content: center;
    }
    .lecturesimg{
        justify-content: center;
        display: flex;
        flex-wrap: wrap-reverse;
    }
    #imgs{
        display: grid;
        animation: none;
        justify-content: center;
        height: 90em;
    }
    #img1, #img2, #img3, #img4{
        height: 18em;
    }
    #img1:hover{
        transition: none;
        height: 18em;
        margin: 1em;
    }
    #img2:hover{
        transition: none;
        height: 18em;
        margin: 1em;
    }
    #img3:hover{
        transition: none;
        height: 18em;
        margin: 1em;
    }
    #img4:hover{
        transition: none;
        height: 18em;
        margin: 1em;
    }
    #filas{
        display: grid;
    }
    #titTop{
        justify-content: center;
        text-align: center;
        display: grid;
        align-content: center;
    }
    #tit1{
        font-size: 2em;
    }
    .midContent{
        display: grid;
        height: 50em;
    }
    #txtMid{
        width: 18em;
    }
    .aboutUs{
        width: 35em;
        height: 60em;
        font-size: 0.7em;
        justify-content: center;
        align-content: center;
        display: grid;
    }
    .aboutLeft{
        width: 0;
    }
    .aboutRight{
        text-align: center;
        width: 18em;
        margin: 0;
    }
    #imgTurma{
        visibility: hidden;
        position: absolute;
    }
    #tit3{
        font-size: 3em;
    }
    .final{
        height: 77em;
        display: grid;
    }
    .finalContent{
        display: grid;
        align-content: center;
        justify-content: center;
        width: 100%;
    }
    .finalSquare{
        display: grid;
        justify-content: center;
        width: 100%;
    }
    .finalLeft{
        justify-content: center;
        align-content: center;
        width: 22em;
        margin: 0;
    }
    .greenSquare{
        margin-left: 4%;
        width: 20em;
    }
    #titFale{
        font-size: 1.5em;
    }
    #titRedes{
        font-size: 1.8em;
        margin: 1em;
    }
    .purpleSquare{
        width: 22em;
        text-align: center;
        align-content: center;
        justify-content: center;
    }
    #instaLogo{
        height: 5em;
    }
    #faceLogo{
        height: 4.6em;
    }
    .finalContentBottom{
        width: 20em;
        margin-left: 1em;
    }
    #titVerRedes{
        font-size: 1.5em;
        width: 100%;
    }
    #btnInsta{
        margin-right: 0;
    }
    #btnFace{
        margin-left: -1em;
        margin-right: 1em;
    }
    .finalRight{
        display: grid;
        justify-content: center;
        width: 22em;
        height: 22em;
        margin-top: 3em;
        margin-left: 4%;
    }
    iframe{
        width: 20em;
        height: 20em;
    }
}

@media screen and (max-width: 750px) {
    nav{
        width: 17em;
    }
    a{
        font-size:15px;
    }
    body{
        overflow-x:hidden;
    }
    .top{
        height: 50em;
    }
    #titTop{
        align-content: center;
        display: grid;
        height: 4em;
        background-image:linear-gradient(#3300ab, #0158b0) ;
    }
    .topConteudo{
        width: 20em;
    }
    .right p{
        font-size: 1.3em;
    }
    #balao1, #balao2, #balao3, #balao4{
        width: 20em;
        margin-left: -2.2em;
    }
    #balao3{
        margin-top: 11em;
    }
    #balao4{
        margin-top: 18em;
    }
    #balao2{
        margin-top: 6em;
    }
    #tit2{
        font-size: 3em;
        height: 3em;
    }
    .aboutUs{
        margin-top: 0;
        height: 68em;
        width: 30em;
    }
    .aboutLeft{
        margin: 0;
    }
    .aboutRight{
        margin: 0;
        width: 16em;
        display: grid;
        justify-content: center;
    }
    #txtMid{
        width: 17em;
        margin: 0;
    }
        /* More */
    .more{
        width: 100%;
        justify-content: center;
    }
    #tit2Mid{
        height: 4em;
        font-size: 2.5em;
    }
    #tit3Mid{
        height: 3em;
        font-size: 2.5em;
    }
    #subt{
        width: 12em;
        font-size: 1.5em;
    }
    .places{
        width: 22em;
    }
    .oldyall h1{
        width: 14em;
    }
    .agesylectures h1{
        font-size: 2em;
    }
    .oldsimg img{
        height: 23em;
    }
    .lecturesimg img{
        height: 14em;
    }
    #imenor{
        height: 23em;
    }
    #btit3{
        font-size: 2.5em;
        height: 3.5em;
    }
    #tit3{
        font-size: 3em;
        height: 3em;
    }
    .finalSquare{
        width: 18em;
        display: grid;
        justify-content: center;
    }
    .greenSquare{
        width: 17em;
        margin-left: 1em;
    }
    .purpleSquare{
        width: 19em;
        height: 26em;
    }
    #instaLogo{
        margin-left: -1em;
    }
    #faceLogo{
        margin-left: -1.7em;
        margin-bottom: 0;
    }
    #btnInsta{
        margin-top: 1em;
        margin-left: -1.72em;
        margin-bottom: 2em;
    }
    #btnFace{
        margin-left: -1.72em;
        margin-top: 1em;
    }
    .finalContentBottom{
        display: grid;
    }
    .finalLeft{
        width: 17.5em;
        height: 50em;
    }
    .finalRight{
        width: 19em;
        margin-left: 0;
    }
    .final{
        height: 90em;
        align-content: baseline;
    }
    iframe{
        width: 17em;
        height: 17em;
    }
}

@media screen and (max-width: 360px){
    header{
        animation: none;
    }
    nav{
        animation: none;
    }
    #logo{
        animation: none;
    }
    #TitAnimation{
        animation: title 5s ease-in-out;
        height: 0;
        width: 0;
        font-size: 0;
    }
    #balao1, #balao2, #balao3, #balao4{
        margin-left: 0.12em;
        width: 12em;
    }
    .linha1{
        height: 7em;
    }
    .linha2{
        height: 9em;
    }
    .linha3{
        height: 10em;
    }
    .top{
        height: 70em;
    }
    .midContent{
        height: 65em;
    }
    .aboutUs{
        width: 25em;
        height: 84em;
    }
    #txtMid{
        width: 14em;
    }
    .aboutRight{
        width: 13em;
    }
    .places{
        width: 20em;
    }
    .lecturesimg img{
        height: 12em;
    }
}