/*Imports de fonte */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap');

/*Fim do imports */
/* Configuração do Body */

body{
    overflow-x: hidden; 
    margin:0;
    color:white;
font-family: lato, sans-serif;}

/*Fim do body*/

/*Configuração do topo */
header{
    font-size: 1.1em;
    display: flex;
    padding-right:25em;
    padding-top: 0.5em;
    padding-bottom:0.5em;
    justify-content: flex-end;
    z-index: -1000;
    background: black;}

#numero:hover{
    text-decoration-line: underline;
    cursor: pointer;}

nav{position:fixed;
    top: 0em;
    display:flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: space-around;
    padding: 1em 0 0.5em 0;
    background: rgb(0,0,0,0.7);
    z-index: 1000;
}

#logo{
    display:flex;
    cursor: pointer;
    height: 2.5em;
}

ul{display:flex;
    max-width: 100%;
    list-style-type: none;
}

li{ 
    font-size: 0.9em;
    font-weight: 800;
    padding: 0 1.5em 0 1.5em;
    transition: color 0.5s;
}

li:hover{color:#40aa0b;
cursor:pointer;}

/*Seta após Nossos Cursos e Mais */
.seta::after{
    content: "";
    display: flex;
    float: right;
    width: 15px;
    height: 15px;
    margin:0 5px;
    border-radius: 50%;
    background: url(img/arrow-down.svg) #2e2e2e no-repeat center center/40%;
    transition: background-color 0.5s;
}

.seta:hover::after{background-color: #40aa0b;}

/*Programação da linha e cadeado do Área restrita*/
#cadeado::before{content: "";
    display: flex;
    float: left;
    width: 15px;
    height: 15px;
    margin:0 5px;
    background: url(img/signin.svg)  no-repeat center center/70%;
}

#cadeado{
    border-left: dashed 1px;
    border-color: gray;}

#cadeado:hover{border-color: gray;}


/*Fim do topo*/

/*Configuração do Banner */


#banner{
display: flex;
justify-content: center;
flex-flow: column;
align-items: flex-start;
overflow: hidden;

background-image: url("img/imgfundo.png");
background-size: cover;
background-repeat: no-repeat;    

height: 75vh;

z-index: -1;

padding-left: 35vh;

}


h1{font-size: 2.5em;
font-weight: 900;
}

h2{position:relative;
    font-weight: 500;
   font-size: 1.4em;


    top: -1.5em;
}

#click{
    padding: 1em 5em;
    font-weight: 700;
    border-radius: 10px;
    font-size: 0.90em;
    border: none;
    color: white;
    background:#40aa0b;
    cursor: pointer;
}

#click:hover{background:forestgreen}
    
#linhas{
    position: relative;
    top: 3em;
    display: flex;}
    
    
block{
    margin: 3px;
    border-radius:10px;
    height: 8px;
}    

#block1{
border-radius: 10px;
width: 1.5em;
background-color:#40aa0b
}
#block2{
    width: 0.8em;
    background-color:lightgray}

/* Fim do Banner */

/*Inicio dos programas*/


/*Configuração da Página*/
.descricao{ position: absolute;
    width: 100%;
    text-align: center;
}

.titulo{color: black;}

h3{font-size: 2.8em;
margin: 0.5em;}

h4{color: gray}

.items{display: flex;
    border: solid;
    justify-content: space-evenly;}

.item{border-radius:10px;
    border: outset 1px;
    border-color: gray;
    overflow: hidden;}

.item:nth-child(1){width: 18em;
    height: 18em;}

.item h4{position: relative;
    padding-left: 0.5em;
    top: -7em;
    font-size: 1.5em;
    text-align: left;
    color: white;}


.lista{position: relative;
    border-color: black;
    top: -12em;
    background-color: white;}

.item ul{
    position: relative;
    left: -2em;
    flex-flow: column;
    text-align: left;
    color: black;
    align-items: flex-start;
}
#topo-item{width: 30em;}    

.item ul li{
    font-size: 0.8em;
    border-bottom: lightgray solid 1px;
    width: 100%;
    padding: 0.7em;}

.imagem1{overflow:hidden;
    padding: 3px;
    float:left;
    border-radius: 10px;
    width: 40px;
    height: 40px;}

.item ul li:after{ content: "";
    display: flex;
    float: right;
    width: 30px;
    height: 30px;
    margin: -10px 0;
    border-radius: 50%;
    background: url(img/arrow-right.svg) no-repeat center center/40%;
    transition: left 5s; }

/* Revisar */
.item ul li:hover:after{position: relative;
    left: 1em;}

#topo-item-2{
position: relative;
left: -2em;
width: 22em;
height: 16.5em;}

.item:nth-child(2){width: 18em;
    height: 22.3em;}

    .item:nth-child(3){width: 18em;
        height: 17.5em;}

#topo-item-3{position: relative;
    top: -2em;
    left: -2em;
    width: 22em;
    height: 15.5em;}

    .item:nth-child(4){width: 18em;
        height: 13.4em;}

        #topo-item-4{position: relative;
            opacity: 50%;
            top: -3em;
            width: 20em;
            height: 14em;}

.item{background: black;}

#titulo-2{position: relative;}

.items-2{
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
}

.item-2{
border: outset 1px;
border-color: gray;    
width: 30%;
height: auto;
overflow: hidden;
transition: all 2s;
cursor: pointer;
border-radius: 10px}

.item-2 ul {flex-flow: column;
    padding: 0;
    color: black;}

.item-2 ul li{
    
    padding-left: -1em;
    padding-bottom: 1em;
    font-size: 1em;
    width: 100%;}

.item-2 ul li:hover{
        color: black;}

.item-2 h4 {color: black;
font-size: 1.5em }

.loc:before{content: "";
    display: flex;
    float: left;
    width: 40px;
    height: 40px;
    background: url("https://cotemig.com.br/assets/img/icons/location.svg")  no-repeat center}

.topo-2-item{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width:100%;
    position: relative;
    bottom: 0.8em;
}

.item-2:hover{
    position: relative;
    top: -0.5em;
    overflow-y: visible;}

.descricao .item-2 h4{color:black;
font-size: 1.5em;}

a{ font-weight: 700;
    position: relative;
    bottom: 1em;
    font-size: 2.5em;
    cursor: pointer;
    color: #40aa0b}

a:before{content: "";
    display: flex;
    position: relative;
    top: 1.1em;
    padding-left: 24em;
    width: 40px;
    height: 40px;
    background: url("https://cotemig.com.br/assets/img/icons/c-all.svg")  no-repeat center}

.items-3{display:flex;
    margin-bottom: 2em;
    justify-content: space-around;}

.item-3{
    overflow: hidden;
    border-radius: 10px;
    width: 18em;
   height: 20em;
}

.item-3 h4{
font-size: 1.2em;
padding-left: 1.5em;
color: white;
text-align: left;    
position:relative;
bottom: 8em}

.topo-3-item{width: 100%;
height: 100%;
margin: auto auto;
transition: transform .2s;
}

.topo-3-item:hover{transform: scale(1.2);}

.item-3 h5{
    font-size: 0.8em;
    padding-left: 2em;
    color: lightgray;
    text-align: left;    
    position:relative;
    bottom: 13em}

footer{
    display: flex;
    justify-content: center;
    flex-flow: column;
    text-align: left;
    width: 100%;
    min-height: 1em;
    background-color: #151515;}

#part-1{display: flex;
    justify-content:center;
    margin: 2em;
    border-bottom: solid 1px gray}


.lista-footer{padding: 0 1em}

footer h4{
    color: white;
    font-size: 1.3em;
    padding-left: 2em;}

footer ul{color: gray;
    flex-flow:column}

footer li{font-weight: 500;
    padding: 0.5em 3em 0.5em 0.5em}

footer .lista-footer li:hover{color: gray;
    border-radius: 10px;
    background-color: rgb(143, 143, 143, 0.1);}

#descricao-footer{
    padding: 0 0;}

#descricao-footer h4{position:relative;
right: 2.2em;}

#descricao-footer button{width: 100%;
font-size: 0.9em;
color: white;
font-weight: 700;
border-radius: 10px;
border: 0;
cursor: pointer;
background-color: #40aa0b;
padding: 1em 0;}

#descricao-footer button:hover{
    background-color: #32830a;
}

footer h5{color: gray;
font-size: 1em;
font-weight: 500;}

#part-2{display:flex;
    margin: 0 3em;}

#part-2 li{font-size: 0.8em;}

#left li {color:white}

#left{padding-right: 5em;}

#logo-footer{width: 8em;}

.rede-logo{
width: 1.5em;
border-radius: 10px;
padding: 1em 2em;}

#colegio-redes{padding-right: 3em;}


.redes-sociais{display: flex;}

.facebook{background:#4460a0;}
.instagram{background:white;}
.linkedin{background: #007ab9}
.twitter{background: #00aaec}

#right{display: flex;
flex-flow: row;}

#part-2 h4{font-size: 1.5em;
padding-bottom: 0;}

#right li{
    text-align: center;
    padding: 0;}

#right li:hover{color:gray}