@import url('href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Source+Sans+Pro&display=swap"');

/*================================================================
========================= BODY ELEMENTS ==========================
================================================================*/
body{
    margin: 0px;
    padding: 0px;
}
*{
    box-sizing: border-box;
}
html{overflow-x:hidden}
body,html,html a{-webkit-font-smoothing:antialiased}
p{
    font-size:1em;
    font-weight:400;
    color:#808080;
    margin-bottom:15px;
    font-family: arial,sans-serif;  
    }
.link,body{
    position:relative;
}
em,li,li a{
    font-size:1.3em;
    font-weight:500;
    color:#808080;
}
a{
    color:#a2a2a2;
}
a:link{
    text-decoration:none; 
}
a:hover:before /* IE */
{
	text-decoration:underline;
}
a:hover:before/* IE */
{
	text-decoration:none;
}
a:active,a:focus,a:hover{
    color:#003366;
}
.link{
    font-size:1.em;
    font-weight:600
}
.link:after{
    position:absolute;
    top:8px;right:-15px;
    width:9px;height:2px;
    background:#fff
}
h1,h2,h3,h4,h5,h6{
    color:#808080;
    line-height:1.2;
    margin:0 0 15px;
    }
h1{
    font-size:40px
    }
h2{
    font-size:2.5em;
    }
h3{
    font-size:1.8em;
    }
h4{
    font-size:1.4em;
    } 
::selection {
    color: #fff;
    background: #0798eb;
    text-shadow: none;
}
.clear{
    clear: both;
}

.container-left{
    float: left;
 }
.container-right{
   float: right;
}
.margin-top-100{
    margin-top: 100px;
}

#toggle, #toggle + label{
    display: none;
 }
/*=========================== MENU ===========================*/

/* Header fixed and background colors */
    .header{
        position: fixed;
        top: 0px;
        max-height: 100px;
        z-index: 999;
        width: 100%;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 1; 
    }
/* UL element Navigation Main Menu */
    .navbar-collapse{
        max-height:100%;
        padding-left:0;
        padding-right:0;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar{
        margin-bottom:0;
        background-color: #003366;
        border-radius: 0px;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar-nav{
        padding-left:0;
        margin-bottom:0;
        list-style:none
        }
    .header .navbar{
        margin-bottom:0;
        background-color: #003366;
        border-bottom: 5px #f8931d solid;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1);
        position: relative;
        min-height: 100px;
        margin-bottom: 20px;
        }
    .navbar-nav{
        padding-right: 30px;
        }
/* Menu LI items and children */
    .navbar-nav{
        list-style: none;
        margin-top: 35px;
        padding-right: 25px;
    }
    li.nav-item{
        position: relative;
        font-size: 1em;
        float: left;
        height: 50px;
        padding-left: 25px; /* space between menu items */
        }
    a.nav-item-child{
        font-size:1em;
        font-family: 'Oswald', sans-serif !important;
        color:#fff;
        line-height:25px;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .navbar-nav>li.nav-item>a:hover{
        margin-bottom: 10px;
        border-bottom: 4px solid #003366;
        padding-bottom: 2px;
        color: #ccc;
        } 
    header .nav-item-child:focus,.header .nav-item-child:hover{
        background:inherit
        }
/* MAX-WIDTH 767px */
@media (max-width:767px){
    .header .menu-container{
        padding-left:15px;
        padding-right:15px;
        margin-left:0;
        margin-right:0
        }
    .header .navbar>.container,.header .navbar>.container>.nav-collapse{
        padding-left:0;
        padding-right:0;
        margin-left:0;
        margin-right:0
        }
    .header .navbar>.container{
        width:auto
        }
    }  
 /* Toggle  */   
    .header .nav-item-hover:after,.link:after,.work .work-overlay:before{
        content:" "
        }
    .header .navbar-toggle{
        width: 45px;
        height: 35px;
        border: none;
        margin: 35px 0;
        position: relative;
        float: right;
        padding: 9px 10px;
        margin-top: 31px;
        margin-right: 35px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        }
    .header .navbar-toggle .toggle-icon{
        position:relative;
        width:21px;
        height:1px;
        display:inline-block;
        background:#fff;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar-toggle .toggle-icon:after,.header .navbar-toggle .toggle-icon:before{
        position:absolute;
        left:0;
        background:#fff;
        content:" "
        }
    .header .navbar-toggle .toggle-icon:before{
        width:10px;
        height:1px;
        bottom:10px;
        -webkit-transform:rotate(0);
        -moz-transform:rotate(0);
        transform:rotate(0);
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar-toggle .toggle-icon:after{
        width:16px;
        height:1px;
        top:-5px;
        -webkit-transform:rotate(0);
        -moz-transform:rotate(0);
        transform:rotate(0);
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar-toggle:hover .toggle-icon{
        background:#ae952e;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before{
        width:21px;
        height:1px;
        background:#ae952e;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .header .logo-img-main,.header .nav-item.active .nav-item-hover:after,.header .nav-item:hover .nav-item-hover:after{
        transition-duration:.4s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .header .navbar-toggle:hover .toggle-icon.is-clicked{
        background:rgba(81,87,105,0)
        }

/* MIN-WIDTH 768px */
@media (min-width: 768px){
    .navbar-toggle {
        display: none;
        }
    }
/* MAX-WIDTH 991px */
@media (max-width:991px){
    .header .navbar-nav{
        margin:0;float:none
        }
    .header .navbar-nav .nav-item{
        float:none
        }
    .header .menu-container:after,.header .menu-container:before{
        content:" ";display:table
        }
    .header .menu-container:after{
        clear:both
        }
    .header .logo .logo-img-main{
        display:none
        }
    .header .logo .logo-img-active{
        display:inline-block
        }
    .header .nav-item-child{
        line-height:1.4;
        padding:12px 12px 12px 15px
        }
    .header .nav-item-hover:after{
        position:absolute;top:19px
        }
/*======= TOGGLE MENU ======*/
    #toggle, #toggle + label{
        display: inherit;
        }
    #toggle{
        width: 45px;
        height: 40px;
        opacity: 0;
        border: none;
        margin: 35px 0;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 1000;
        float: right;
        padding: 9px 10px;
        margin-top: 31px;
        margin-right: 35px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        }
    .menu-mobile {
        padding-top: 90px;
        text-align: center;
        background: #163c5c;
        color: #FFF;
        width: 100%;
        height: 0px;
        overflow: hidden;
        transition: height 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
        }
    #toggle:checked ~ .menu-mobile {
        height: 390px;
        }
    #toggle + label {
        position: absolute;
        top: 27px;
        right: 50px;
        border: none;
        color: #f89426;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        }
    #toggle + label:after {
        content:'\2630';
        font-size: 1.7em; 
        }
    #toggle:hover + label{
        color: #ffffff; 
        }
    #toggle:checked ~ .message {
        height: 150px;
        }
    #toggle:checked + label:after {
        content:'\2573';
        font-size: 1.4em;
        }
    }
/* MIN-WIDTH 992px */
@media (min-width:992px){
    .header .navbar-nav-right{
        float:right
        }
    .page-on-scroll .header .navbar{
        background:#00e716;
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .page-on-scroll .header .logo-img-active,.page-on-scroll .header .logo-img-main{
        transition-duration:.4s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
    .page-on-scroll .header .nav-item-child{
        transition-duration:.3s;
        transition-property:all;
        transition-timing-function:cubic-bezier(.7,1,.7,1)
        }
}