@keyframes entrada{

  from{opacity: 0; transform: translateY(-10px);}

  to{opacity:1;transform: translateY(0);}

}

@keyframes fill{

  from{opacity:0;}

  to{opacity:1;}

}



@keyframes rotate{

  to{transform:rotate(180deg);}

}



*{

  margin: 0;

  padding: 0;

  font-family: 'Montserrat', sans-serif;

}



a:link{

  text-decoration:none;

  color: black;

}



a:visited{

  text-decoration:none;

  color: black;

}





nav{

  height:550px;

  z-index: 1;

}



.navicons a{

  transition: 0.3s;

}



body{

  display:flex;

  flex-direction: column;

  align-items: center;

  background-color: #f7f7f7;

  height: 100vh;

}



header{

  display:flex;

  background-color: rgb(233, 233, 233);

  width: 100%;

  height: 8em;

  flex-direction: row-reverse;

}



#araforros{

  width:25px;

}



.avatar{

  transform: translateY(30px);

  width: 8rem;

  height: 8rem;

  border-radius:100%;

  background-color:black;

  position: absolute;

}



.logo{

  width:6rem;

  margin:1.3rem;

}



.head-title{

  margin: 1rem;

  text-align: right;

}



.navicons{

  margin-top:5rem;

  display: flex;

  justify-content:space-between;

}



.iconlink{

  width:2rem;

}

.menu ul {

  list-style: none;

  margin-top: 1rem;

}



.menu ul li {

  margin: 2px;

  width:250px;

  height: 40px;

  line-height:40px;

  font-size: 0.7em;

  text-align: center;

  /* text-transform: uppercase; */

  box-shadow: 1px 2px 2px rgba(0,0,0,.1);

  /* display: flex; */

  justify-content:center;

  }



.btn-turmas{

  display: block;

}



#icon {

  width:1rem;

  margin-right:5px;

}



.menu ul li:hover {

  background-color: #e9e9e9;

  transition: all .5s;

}



.menu ul ul{

  display: none;

}



.menu ul ul.active{

  display: block;

  margin: 0;

  margin-left: -4px;

  margin-top: 5px;

}



.whats{

  width: 1rem;

  margin-right: 5px;

  transform:translateY(3px)

}



.ativo{

    animation: rotate 0.5s forwards;

}



.menu ul ul li{

  /* border: 1px solid #ccc; */

  font-size: 11px;

  height:25px;

  line-height: 25px;

  margin-left: 4px;

  box-shadow: 0px 0px 2px rgba(0,0,0,.1);

  background-color: #e9e9e9;

  /* text-transform: capitalize; */

  animation: entrada;

  animation-duration: 0.5s;

}



.container {

  margin-top: 5rem;

}



.card {

  width: 15rem;

}



.img-responsive{

  width: 15rem;

  height: 15rem;

}





----



section{

  background-color: #555;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 2;

}



.container {

  width: 100%;

  display: flex;

  justify-content: space-evenly;

  flex-wrap: wrap;

  z-index: -1;

}



/* Card */

.card {

  width: 250px;

  height: 380px;

  margin: 25px;

  background-color: #fff;

  overflow: hidden;

  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);

  transition: 0.3s;

}



/* Card Header*/

.card-header {

  width: 100%;

  height: 200px;

  overflow: hidden;

}



.card-img {

  max-width: 295px;

  width: fit-content;

  height: auto;

 

}



/* Card Body */

.card-body {

  height: 95px;

  padding: 5px auto;

  text-align: center;

  font-family: 'Montserrat', sans-serif;

}



.card-local {

  font-size: 10px;

  margin-top: 15px;

  margin-left: 15px;

  text-align: justify;

}



.card-titulo {

  font-size: 15px;

  text-align:left;

  margin-left: 15px;

  margin-right: 15px;

  font-weight: 500;

  

}



.card-texto {

  font-size: 10px;

  width: 220px;

  margin: 10px auto;

  text-align: justify;

}



/* Card Footer */

.card-footer {

  margin: auto;

  margin-top: 25px;

  text-align: center;

  text-transform: uppercase;

  background-color: #000;

  width: 10rem;

}



.card-footer a {

  color: #fff;

  display: block;

  padding: 5px;

  font-size: 10px;

  text-decoration: none;

  font-family: 'Montserrat', sans-serif;

  font-weight: 200;

}



/* Cores Cards */

.card-1 .card-footer {

  background-color: #0d0d0d;

}



.card-1 .card-local {

  color: #0d0d0d;

}



.card-2 .card-footer {

  background-color: #0d0d0d;

}



.card-2 .card-local {

  color: #0d0d0d;

}



.card-3 .card-footer {

  background-color: #0d0d0d;

}



.card-3 .card-local {

  color: #0d0d0d;

}



/* Animação Hover */

.card:hover {

  transform: scale3d(1.1, 1.1, 1);

}



.navicons a:hover{

  transform: scale3d(1.1, 1.1, 1);

}