*{
     margin:0;
     padding:0;
     box-sizing:border-box;
     font-family: "Special Gothic Condensed One", sans-serif;
   font-weight: 200;
   font-style: normal;
   font-stretch:extra-condensed;
 }
 .special-gothic-condensed-one-regular {
   font-family: "Special Gothic Condensed One", sans-serif;
   font-weight: 200;
   font-style: normal;
 }
 
 body{
    background-color: #333;
    color:#969696
 }
 a{
   color:rgb(167, 167, 167);
 }
 a:visited{
   color:rgb(184, 202, 223);
   text-decoration: none;
 }

 body{
   /*background-color: rgb(255, 255, 255);*/
 }
    /* Header */
    #top-h{
     text-align:center;
     margin:0;
     padding:15px 0;
     background-color:rgb(169, 184, 198);
     font-family: "Special Gothic Condensed One", sans-serif;
     font-size: 2em;
   font-weight: 400;
   font-style: normal;
   font-stretch:extra-condensed;
   font-variant-caps:all-small-caps;
   padding:0px;
 }
 #header-h{
    position:sticky;
    top:0;
    opacity:.9;
 }
 
    h1{
        font-size: 1.6em;
        font-family: Roboto;
        font-weight: 500;
    }
    #header-h{
     display:flex;
     justify-content:space-between;
     align-items: center;
     padding:0px 60px 0px 60px;
     border-bottom:1px solid lightgray;
     background-color: white;
     z-index: 10000;
 }
 .carrossel{
   width:100%;
   height:100%;
   margin: 0 auto;
   z-index:0;
}
.carrossel img{
  width:100%;
  height:100%;
  margin: 0 auto;
  z-index:0;
}
 /* Menu mobile */
 .menu-mobile{
   display:none;
 }
 .menu--left{
   display:none;
 }
 /* Menu */
 @media (min-width:1981px){

 .menu{
    display:flex; 
    justify-content:space-between;
    align-items:center;
    z-index: 10000;

 }
    #logo img{
        width: 140px;
        height:45px;
        margin-top: 5px;
    }
    .menu{
     text-transform:uppercase;
 }
 .menu ul,li,a{
    list-style:none;

}
 /* Social links */
 .social img{
   width:30px; 
   height:30px;
   margin:0px 3px;
}
    .menu ul{
        display:flex; 
        justify-content:space-between;
        align-items:center;
     text-transform:uppercase;
     font-size:.9rem;
     letter-spacing:.2rem;
     text-decoration:none;
     color: black;    
 }
 .menu a{
    text-decoration:none;
    color: black; 
    padding:10px;       
}
.menu ul li a:hover{
    text-decoration:none;
    color: rgb(40, 126, 154); 
    /*background-color: rgba(255, 165, 0, .2);*/
    padding:10px; 
    text-decoration: overline;
    /*font-weight: 600;*/
}
   .ham .bar{
    display:none;
    width:25px;
    height:2px;
    background-color:black;
    margin-bottom:6px;
    transition:all 0.3s ease-in-out;
 }
 .ham{
    display:none;
 }
 /* Dropdown menu */

 .dropdown-itens{
    position:absolute;
    text-decoration:none;   
    display:none;
    background-color: rgb(255, 255, 255);
    transition: transform 3s, opacity 0.3s;
 }

 .dropdown:hover .dropdown-itens{
    display:block;
     }
     .dropdown-itens ul{  
        display:flex;
        justify-content: column;
        align-items: center;
        flex-wrap:wrap;
        width:140px;
     }
     .dropdown-itens ul li{  
        display:flex;
        justify-content: column;
        align-items: center;
        flex-wrap:wrap;
        background-color: rgb(255, 255, 255);
        padding:1px;
     }
     /* Animation */
     .dropdown-itens{
        animation:  go-back 1s;
    }
    @keyframes go-back {
        0% {
            transform: translateY(-20px);
        }
        100% {
            transform: translateX(0px);
        }
        from { opacity: 0; }
        to   { opacity: 1; }
    }

     
  /* Titulos */
    h1{
     text-align:center;
     margin:30px 0;
     font-size:3em;
 }
  
 
/* fundos */
    #sala-aula, #sala--aula{ 
        background-image: linear-gradient(
            to right bottom,
            rgba(251, 140, 234, 0.2),
            rgba(160, 22, 100, 0.7)
          ), url("../images/sunset.jpg");
        background-repeat: repeat;
        background-size: 100%;
        background-position: center;
        padding:10px 10px;
        margin:10px 10px;
        background-attachment: fixed;
    }
    #sala--aula{ 
        background-image: linear-gradient(
            to right bottom,
            rgba(7, 29, 76, 0.2),
            rgba(7, 86, 160, 0.7)
          ), url("../images/praia.JPEG");
          background-attachment: fixed;
        }
    #sala-aula h1{
        color:white;
    }
        /* corpo */
.art {
    display: grid;
    grid-template-columns: auto auto auto;
    margin:0 auto;
    gap:5px;
    justify-content: space-around;
    padding:10px;
    width:100%;
 }
 
 .art .artes{
    background-color: rgb(0, 0, 0);
    color:rgb(179, 179, 179);
    width:400px;
    height:550px;
    border-radius: 20px;
    padding:5px;
    font-family: Roboto;
    font-weight: 300;
    font-size: 1em;
 }
 .artes{
   width:300px;
}
 .arte-img{
    width: 150px;
    height: 150px;
 }
.titulo-img{
    width: 300px;
    height: 180px;
 }
 .comunica-01 img{
    width:200px;
    height:200px;
    border-radius: 50%;
    position:absolute;
    vertical-align: middle;
 }
 .comunica-01{
    width:200px;
    height:200px;
    border-radius: 50%;
    position:absolute;
    vertical-align: middle;
 }
 .arte-image{
    /* background-image:url("../images/"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width:200px;
    height:200px;
    border-radius:50%;
    margin:0 auto;
 }
 .arte-image{
   margin-top:10px;
 }
 /* imagens */
 .communication{
    /* background-image: url("../images/arte03.png"); */
    background-repeat: no-repeat;
    background-size: 900px;
    background-position: center;
    max-width:200px;
    height:250px;
    border-radius:50%;
    margin:0 auto;
    gap:5px;

 }
 .communication{
    margin-top: 10px;
 }
 .motion-gra{
    /* background-image: url("../images/arte02.png"); */
    background-repeat: no-repeat;
    background-size: 900px;
    background-position: center;
    width:200px;
    height:250px;
    border-radius:50%;
    margin:0 auto;
 }
 .motion-gra{
   margin-top:10px;
 }
 #motion{
   margin-bottom:3px;
 }
 .sala-a{
    /* background-image: url("../images/arte01.png"); */
    background-repeat: no-repeat;
    background-size: 900px;
    background-position: center;
    max-width:200px;    
    height:200px;
    border-radius:50%;
    margin:0 auto;
 }
 .sala-a{
   margin-top:10px;
 }
 .servico-a{
    /* background-image: url("../images/arte05.png"); */
    background-repeat: no-repeat;
    background-size: 900px;
    background-position: center;
    width:200px;
    height:250px;
    border-radius:50%;
    margin:0 auto;
 }
 .servico-a{
   margin-top:10px;
 }
 /* Formulario */
   
 /* Rodape */
   footer{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:40px;
    padding:30px 0;
    background-color:black;
    color:rgb(137, 136, 136);
 }
 
 
 /* Whats App */

 .whatsapp {
    position: fixed;
    top: 82%;
    right: 1%;
    padding: 10px;
    z-index: 10000000;
    height:70px;
    width:70px;
}   
#topo {
    position: fixed;
    top: 72%;
    right: 1%;
    padding: 10px;
    z-index: 10000000;
    height:50px;
    width:70px;
    opacity:30%;
}  
.sobre-laz{
   width:100%;
   margin:30px;
   padding:5px;
}
/* Sobre */
.sobre{
   width:95%;
   margin:10px;
   margin:0 auto;
   padding:35px 70px;
   border-radius: 20px;
   border-width: 2px;
   border-color: rgb(213, 239, 15);
   text-align: justify;
   font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif;
   line-height: 1.3em;
   font-size: 1em;
   color:rgb(137, 137, 138);
   background-color: rgb(10, 6, 1);
}
.sobre p, h3{
   text-align: left;
   padding: 10px 10px;
   font-family: Poppins;
}
h3{
   text-align: center;
   font-family: Poppins;
}
.art-anima{
   padding:40px;
   width:100%;
   background-color: black;
   margin:0 auto;
}
.port-01{
   display:flex;
   justify-content:space-between;
   align-items: center;
   padding: 20px;
   width:100%;
   background-color: black;
   margin:0 auto;
}
.port-01 img{
   width: 50%;
   height: 50%;
   object-fit: fill;
   border-radius: 20px;
}
.special-gothic-condensed-one-regular {
   font-family: "Special Gothic Condensed One", sans-serif;
   font-weight: 200;
   font-style: normal;
 }
 
.port-tit{
   width: 100%;
   height: 100px;
   margin: auto;
   text-align: center;
}
.port-tit p{
   text-align: center;
   font-style:normal;
   font-size: 3.5em;
   font-family: "Special Gothic Condensed One", sans-serif;
   font-weight: 100;
   font-style: normal;
   font-stretch:extra-condensed;
   font-variant-caps:all-small-caps;
   margin-bottom: 1px;
   margin-top: 30px;
   padding: 2px;
}
.port-pr{
   text-align:left;
   font-style:normal;
   font-size: 1.3em;
   font-family: "Special Gothic Condensed One", sans-serif;
   font-weight:lighter;
   letter-spacing: 0.08rem;
   font-style: normal;
   font-stretch:extra-condensed;
   margin-top: -30px;
   padding: 4px 180px 40px 180px;
}
.port-01 img{
   padding: 10px;
}
.port-02 img{
   width: 100%;
   height: 50%;
   object-fit: fill;
   border-radius: 20px;

}
.port-03 img{
   width: 32%;
   height: 50%;
   object-fit: fill;
   border-radius: 20px;
}
.port-03{
   display:flex;
   justify-content:space-between;
   align-items: center;
   padding: 20px;
   width:100%;
   background-color: black;
   margin:0 auto;
}
}