@keyframes logo_fadein {
    from 
    {
        opacity: 0;
        transform: scale(0);
    }
    to 
    {
        opacity: 1;
        transform: scale(1);
    }
}

#img_logomarca {
    width:100%;
    max-width:900px;            
    display: block;  
    z-index:-1;        
    animation-name: logo_fadein;
    animation-duration: 3s;
    padding:0px 15px;
    margin-bottom:50px;
}

#container-logomarca {
    height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;        
}

.home-section-container-white{
    --color-text:black;
    --sub-title-color:#555;
    --text-color-main-container:white;
    background:white;        
}

.home-section-container-black{
    --color-text:white;
    --sub-title-color:rgb(248,232,64);
    --text-color-main-container:black;
    background:black;        
}

.home-section-container-yellow{
    --color-text:black;
    --sub-title-color:black;
    --text-color-main-container:black;
    background:rgb(248,232,64);        
}

#home-title-banner{        
    text-align:center;        
    padding: 20px 0;    
    font-weight: 600;
    font-style: italic;
    color:white; 
    font-size:40px; 
    height:auto;
    min-width:80px;
    background:black;
}

.home-section-content-container {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items:center;
    text-align:center;
}

section[intro] .home-section-content-container img {
    width:250px;
    height:250px;
    margin:0px 0px 50px 0px;    
    padding:25px; 
    border:2px solid #555; 
    border-radius:50%; 
    background:#555;
}

section[intro] .home-section-content-container div {
    max-width:900px;
    font-size:25px;
}

#section-contato {
    display:flex; 
    flex-wrap:wrap; 
    justify-content:center;
}

#section-contato div {
    width:100%;
}

#section-contato-container-form {
    max-width:500px; 
    min-height:450px;
    border:2px solid white; 
    border-radius:10px; 
    padding:20px; 
    margin:30px 0px;
    color:black;
    background:white; 
}

.home-title{        
    text-align:center;        
    padding: 20px 0;    
    font-weight: 600;
    font-style: italic;
    color:var(--color-text); 
    font-size:35px; 
    height:auto;
}    

.home-title-linebar{        
    height:3px;
    background:var(--color-text);
    position:absolute;
    width:55%;             
}

.home-title-linebar[position=left]{
    left:0;
}

.home-title-linebar[position=right]{
    right:0;
}

.home-sub-title[right] {
    --title-position:flex-end;
    --title-align:right;
 }

 .home-sub-title[left] {
    --title-position:flex-start;
    --title-align:left;
}
.home-sub-title {
    display:flex;
    justify-content:var(--title-position);
    width:100%;        
    font-size:30px; 
    font-weight:600; 
    font-style:italic; 
    color:var(--sub-title-color);
    margin:0px 0px 20px 0px;     
}

.home-sub-title div {
    width:100%;        
    height:60px;
    text-align:var(--title-align); 
    padding: 0px 50px 0px 50px; 
    border-bottom:3px solid var(--sub-title-color);        
}

.home-sub-container {
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    border-bottom:3px solid var(--sub-title-color);
    padding-bottom:20px;
    margin-bottom:25px;     
}

.home-sub-container[right] { 
    --content-margin:0px 20px 0px 0px;       
    flex-direction:row-reverse;        
    justify-content:flex-end;
}

.home-sub-container[left] { 
    --content-margin:0px 0px 0px 20px;       
    flex-direction:row;        
    justify-content:flex-start;
}

.home-sub-container-content { 
    width:100%;               
    text-align:justify;         
    align-self: baseline;
    margin:var(--content-margin); 
    border:2px solid var(--sub-title-color); 
    border-radius:10px;  
    padding:25px;
    background:var(--sub-title-color);
    color:black;
    font-weight:500;
}

.home-sub-container-fotos {
    width:100%;
    max-width:512px;  
}

.home-sub-container img[img-1] {                
    width:100%;        
    max-height:313px;
    border-radius:10px; 
    border:10px solid var(--color-text);
    margin:0px 0px -6px 0px;       
}

.home-section-content{
    width:100%;    
    font-size: 18px;
    text-align: center; 
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 2%;
    color:var(--color-text); 
}

.home-section-content button{
    margin-top:75px;
}

/*----------------------------------------------------------------------------------------------------------------*/ 

@media screen and (max-width: 1250px) {
    section[intro] div.home-section-content-container {
        flex-direction:column;
    }

    section[intro] .home-section-content-container div {
        max-width:800px;
    }

    section[cursos] div.home-section-content-container {
        flex-direction:column-reverse;
    }

    section[material] div.home-section-content-container {
        flex-direction:column-reverse;
    }

    #card-theme-courses-container {
        position:relative; 
        width:300px; 
        height:300px; 
        background:radial-gradient(black 5%, #777 30%, white 50%);
        margin:40px 0px 0px 0px;
    }

    section[material] div.home-section-content-container img {
        margin:40px 0px 0px 0px;
    }
}

@media screen and (max-width:880px) {
    .home-sub-title div {
        height:55px;
    }
}

@media screen and (max-width:750px) {
    .home-sub-container[right] {
        --content-margin:0px 0px 0px 0px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .home-sub-container[left] {
        --content-margin:0px 0px 0px 0px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .home-sub-title {
        justify-content: center;
    }

    .home-sub-title div {
        width:100%; 
        text-align:center;          
        border-bottom:3px solid var(--sub-title-color);
        padding:0px;
    }

    .home-sub-title[left] div,
    .home-sub-title[right] div {
        height:auto;
        padding-bottom:25px;
    }

    .home-sub-container-fotos {
        margin-bottom:20px;
    }
}

@media screen and (max-width:700px) {
    section[intro] .home-section-content-container img {
        max-width:40vw;
        max-height:40vw;
        min-width:200px;
        min-height:200px;
    }

    #home-title-banner {
        font-size:35px;
        padding:20px 30px;   
    }

    .home-title {
        font-size:30px;
    }

    .home-sub-title {
        font-size:27x;
    }

    .home-section-content button{
        margin-top:25px;
    }
}

@media screen and (max-width:390px)
{    
    #home-title-banner {
        font-size:30px;
        padding:20px 20px;
    }

    #img_logomarca {
        margin-bottom:25px;
    }

    .home-title {
        font-size:27px;        
    }

    .home-sub-title {
        font-size:24px;         
    }

    .home-sub-title div {
        height:auto;
        padding-bottom:12px;
    }

    .home-sub-title[left] div,
    .home-sub-title[right] div {
        height:auto;
        padding-bottom:25px;
    }

    #container-logomarca {
        height:30vh;
    }
}