/* Pallete
logo-containger color/context container:#110808;
principal message:#130e0e;
*/
 
html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  /* This is the css reset */
body,div,img,header,nav,a,main,section,h1,h2,h3,h4,h5,h6,p,footer,html,input,ul,li{
    padding: 0;
    border: 0;
    margin: 0;
    font-family: 'Arial';
    line-height: 1.4;
}



.hidden
{
    opacity: 0;
}
.visible
{
    opacity: 1;
}




     /* -------------------------------------------- 
                LOGO
---------------------------------------------- */
    
    #site-logo
    {
        display:flex;
        z-index: 10;
    }
    #logo
    {
        fill: #021d49;
        height: 135px;
        width: 130px;        
    }
    @media only screen and (max-width: 500px)
    {
        #logo
        {
            height: 90px;
            width: 90px;        
        }   
    }

/* ******************************************** */













    /* --------------------------------------
                NAVIGATION
----------------------------------------- */
    .site-navbar
    {
        height: 70px;
        background-color: #021d49;
        text-align: center;
        display: flex;
    }
    .nav-btn
     {
        display: inline-block;
        text-decoration: none;
        color:white;
        font-size: 20px;
        margin: 0 5px;
     }
     .nav-btn:hover
     {
         text-decoration: none;
         background-color: #021940;
     }
    .dropdown-btn
    {
        position: relative;
        display: inline-block;
    }

    .dropdown-content
     {
        display: none;
        position: absolute;
        background-color: #021d49;
        color: white;
        min-width: 160px;
        min-height: 50px;
        border-radius: 5px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        /* padding: 12px 16px; */ 
        z-index: 1;
        top: 70px;
        left: -25px;
     }
     .dropdown-content a
     {
         color: white;
         background-color: #021d49;
         display: block;
         text-decoration: none;
         padding: 15px;      
     }
     .dropdown-content a:hover
     {
         background-color: #021940;
     }
     .dropdown-btn:hover .dropdown-content
     {
        display: block;
     }
    .site-navtoggle
    {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #021d49;
        color: white;
        z-index: 20;
        overflow: auto;
        flex-direction:column;
        justify-content: left;
        text-align: left;
    }
    .navtoggle-btn
    {
        padding: 15px;
        font-size: 30px;
        text-decoration: none;
        color: white;
    }
    .navtoggle-btn:hover
    {
        background-color: #021940;
    }
    .closebtn
    {
        color: white;
        font-size: 50px;
        text-align: right;
        position: relative;
        right: 10px;
        top: 30px;
        text-decoration: none;
    }
    .dropdowntoggle-content
    {
        display: none;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        color: white;
    }
    .dropdowntoggle-content a
    {
        color: wheat;
        text-decoration: none;
        padding: 15px;
    }
    .dropdowntoggle-content a:hover
    {
        background-color: #021949;
    }
/* ******************************************** */

















    /* ----------------------------------------------
                    HEADER
------------------------------------------------ */
    /* For the home screen it is executed */
    .welcome-container
    {
        display: flex;
        max-height: 700px;
        position: relative;
        
        /* grid-template-columns: 1fr 100fr 1fr */
    }
    
    #welcome-screen
    {
        display: flex;
        width: 100%;
        margin: 0;
        z-index: -5;          
    }
    .next,.prev
    {
        position: absolute;
        top: 50%;
        color: white;
        font-size: 30px;
        padding: 15px;
    }
    .next
    {
        right: 0px;
    }
    .next:hover,.prev:hover
    {
        background-color: #021940;
        cursor: pointer;
    }
    .school
    {
        color: #021949;
        background-color: white;
        padding: 15px;
        opacity: .7;
        text-align: center;
        position: absolute;
    }
    .title
    {
        background-color: #021949;
        color: white;
        padding: 10px;
        font-size: 20px;
        text-align: center;
        position: absolute;
    }
/* ********************************************* */














    /*--------------------------------------------
                MAIN BODY
--------------------------------------------  */
    .principal
    {
        background-color: #c8c8c8;
        color:#021d49;
    }
    .principal img
    {
        width: 100%;
        height: 33%;
    }
    .mission
    {
        background-color: #021d49;
        color: #c8c8c8;
    }
    .flex-items
    {
        margin: 0;
        display: inline-block;
        padding: 50px;
    }
/* ********************************************* */















    /* ---------------------------------------------
                    FOOTER
------------------------------------------------- */
    footer
    {
        width: 100%;
        color: #ffffff;
        text-align: center;
  
            background-color: #021d49;
           margin: 0;
           padding: 50px;
           border-top:50px solid white;
    }
    .copyright
    {
        display: inline-block;
        margin-right: 50px;
        text-align: center;
    }
    .copyright a
    {
        text-decoration: none;
        color:#a6a39a;
    }
    .address
    {
        display: inline-block;
        text-align: center;
    }
    .contacts
    {
        display: inline-block;
        margin-right: 50px;
        text-align: center;
    }
/* ******************************************* */





























    /* -----------------------------------------
                    MEDIA QUERIES
------------------------------------------------*/




        /* ------------------------------------------
                    MOBILES
    ----------------------------------------------*/
        @media only screen and (max-width: 480px)
        {
			.welcome-container
			{
				height: 200px;
			}
			.copyright
			{
				margin: 0px;
			}
        }
    /* ********************************************** */




        /* ------------------------------------------------
                    TABLETS
    ---------------------------------------------------*/
        @media only screen and  (max-width: 768px)
        {
            .contacts , .address
            {
                display:none;   
            }
            .nav-toggle
            {
                color: white;
                font-size: 40px;
                position: absolute;
                right: 15px;
                cursor: pointer;
            }
            .nav-btn
            {
                display: none;
            }
            #site-logo
            {
                display:flex;
                position: absolute;
                top: 0px;
                left: 90px;
                background-color: white;
            }
            .school
            {
                display: none;
            }
            .title
            {
                display: none;
            }
        }
    /* *************************************************************** */
        @media only screen and (min-width: 769px) and (max-width: 1023px)
        {
            .nav-toggle
            {
                display: none;
            }
            .site-navbar
            {
                justify-content: center;                                
            }
            .nav-btn
            {
                padding: 15px;
                position: relative;
                left: 115px;
            }
            #site-logo
            {
                display:flex;
                position: absolute;
                top: 0px;
                left: 90px;
                background-color: white;
            }
            .school
            {
                top: 20%;
                left: 8%;
            }
            .title
            {
                bottom: 0%;
            }
			.context
            {
                display: flex;
                justify-content: center;
            }
            .flex-items
            {
                width:50%;
                flex-direction: row;
            }
        }

        @media only screen and (min-width: 1024px) and (max-width: 1279px)
        {
            .nav-toggle
            {
               display: none;
            }
            .site-navbar
            {
                justify-content: center;                                
            }
            .nav-btn
            {
                padding: 15px;
                position: relative;
                left: 115px;
            }
            #site-logo
            {
                display:flex;
                position: absolute;
                top: 0px;
                left: 190px;
                background-color: white;
            }
            .school
            {
                top: 30%;
                left: 20%;
            }
            .title
            {
                bottom: 0%;
            }
			 .context
            {
                display: flex;
                justify-content: center;
            }

            .flex-items
            {
                width: 455px;   height: 885px;
                flex-direction: row;
                margin: 0;
                display: inline-block;  
            }
        }



        /* ------------------------------------------------
                        DESKTOP
    -------------------------------------------------------*/
        @media only screen and (min-width: 1280px)
        {
            .nav-toggle
            {
               display: none;
            }
            .nav-toggle
            {
                display: none;
            }
            .site-navbar
            {
                justify-content: center;                                
            }
            .nav-btn
            {
                padding: 15px;
                position: relative;
                left: 115px;
            }
            #site-logo
            {
                display:flex;
                position: absolute;
                top: 0px;
                left: 300px;
                background-color: white;
            }
            #welcome-screen
            {
                height: 700px;
            }
            .school
            {
                left: 25%;
                top: 25%;
            }
            .title
            {
                top: 75%;
                left: 40%;
            }
            .slideshow-container 
            {
                height: 700px;
            }
            .flex-items
            { 
                width: 455px;   height: 885px;
                margin: 0;
                display: inline-block;                
                position: relative;
                top: -85px;
            }
            .context
            {
                display: flex;
                justify-content: center;                
            }
            main
            {
                min-height: 805px;
            }
        }

    /* ************************************************** */





/*************************************************/