/*
* Mobile version.
*/

@media ( width <= 960px ) {
    nav{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: fit-content;
        justify-content: space-between;
    }


    .slide-item {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    footer {
        width: 100%;
        margin: 0 auto;
        height: fit-content;
    }

    .container-nav{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30%;
        /*content-visibility:  hidden;*/
        /*background: rgb(9, 81, 154);*/
        padding: 0;
        font-size: 14px;
        text-align: left;
    }

    .container-nav ul{
        display: flex;
        flex-direction: column;
        padding: 0;
        
    }

    .container-nav li{
        padding: 4px 0 4px 0;
        font-size: 14pt;
    }

    .main-container {
        width: 100%;
        height: auto;
        margin: 0 auto;

    }

    .slide-item-content-section {
        display: grid;
        align-items: center;
        justify-content: center;
        width: 70%;
        height: fit-content;
        margin: 25% 25%;
    }

    .foot-links{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px;
        margin: 0 auto;
    }

    .foot-section{
        padding: 45px 0 5px 0;
        margin: 0 auto;
    }
    .foot-links-span{
        padding: 8px;
    }

    .container-menu-mobile{
        display: flex;
        flex-direction: column;
        text-align:right;
        align-content: end;
        justify-content: flex-end;
        width:100%;
        content-visibility: visible;
    }

    .container-menu-close{
        content-visibility: hidden;
        width: max-content;
        text-decoration: none;
    }
    .container-menu-close a{
        text-decoration: none;
    }

    .container-menu-close a:hover{
        color:blueviolet;
    }

    .container-img-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: space-between;

    }

    .container-img-top section {
        /*width: 60%;*/
        display: block;
        padding: 6px;
    }

    .container-img-top > section > h3 {
        font-size: 32px;
        padding: 18px;
        text-shadow: 1px 2px 1px rgba(212, 212, 212, 0.526);
        text-align: center;
    }
    .container-img-top  > section >  p {
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        /*font-weight: bold;*/
        color: aliceblue;
        font-size: 15pt;
        padding: 0 0 0 8px;
        text-align: left;
        border: none;
        
        
    }

    #body-texts {
        color:aliceblue;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11pt;
        padding: 4px;
    }
    #nav-header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 35%;
        text-align: left;
    }

    .main-container-section-blue-middle {
        width: 100%;
        height: fit-content;

    }

    .main-container-sections {
        display:flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: fit-content;
    }

    .main-container-sections section{
        display: grid;
        padding: 0 12px 0 12px;
        width: 100%;
        margin: 40px auto;
        font-size: 12pt;
        text-align: justify;
    }

    .main-container-sections section h2 {
        padding:  0 0 48px 0;
        text-align: center;
        font-size: 13pt;
        width: 100%;
    }

    .main-container-posts {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        width: 100%;
        height: fit-content;
        padding: 18px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 12pt;
    }

    .main-container-posts section{
        display: block;
        width: 90%;
        height: fit-content;
        margin: 8px auto;
    
    }

    iframe {
        width: 80%;
        height: auto;
        
    }

    .da-blog, .wsr-blog, .updates-blog {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: fit-content;
        margin: 0 auto;

    }

    .updates-blog-item-1, .updates-blog-item {
        display: flex;
        margin: 0 auto;
        width: 100%;
        height: fit-content;

    }

    .updates-blog-item-1 img {
        width: 90%;
        height: auto;
        margin: 0 auto;
    }

}