/** layout **/

.l-menu {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content:space-between;
    align-items: center;
    align-content: center;
    padding: 0 60px;
    height: 96px;
    height: auto;
  

    box-sizing: border-box;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.1);
}


.site-logo {
   
    display: inline-block;
    width: 130px;
    
    z-index: 3;
  }
  .site-logo img{
  
   width: 100%;
   padding: 20px 0 ;
  }
  

  nav ul,
nav li {
    list-style: none;
    list-style-position: inside;
    padding-inline-start: 0;
    padding: 0;
    margin: 0;
}

/* ////// MOBILE MENU ////// */

/* -- menu mobilne -- */
.c-mobile-menu {
    /*
This element should be always in the same position on screen, like fixed to top. It opens and closes the menu, so user should have it always in the same place. In this case I used .l-menu element with position:fixed. This is required for mobile (so screen resolution under 1030px width), for desktop is irrelevant.
*/
    display: flex;
    width: 24px;
    height: 22px;
}

@media all and (min-width: 1030px) {
    .c-mobile-menu {
        display: none;
    }
}

/* -- menu mobilne input -- */
.e-mobile-menu-input {
    /** reset default input styles **/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    margin: 0;
    width: 24px;
    height: 22px;
    cursor: pointer;
    z-index: 40;
    opacity: 0;
}

.e-mobile-menu-input:checked~.e-mobile-menu__wrapper {
    top: 0;
    max-width: 9999px;
    max-height: 9999px;
}

@media all and (min-width: 512px) {
    

    .e-mobile-menu-input:checked~.e-mobile-menu__wrapper {
        left: 0;
        max-width: 9999px;
        opacity: 1;
    }

    .e-mobile-menu-input:checked~.e-mobile-menu__wrapper::after {
        opacity: 1;
        transition: opacity .3s .12s;
    }
}

.e-mobile-menu-input:checked~.e-mobile-menu__hamburger>.e-mobile-menu__hamburger__block {
    transition: top .2s, bottom .2s, opacity .2s .2s, transform .2s .2s;
}

.e-mobile-menu-input:checked~.e-mobile-menu__hamburger>.e-mobile-menu__hamburger__block:nth-child(1) {
    top: 10px;
    transform: rotate(+45deg);
}

.e-mobile-menu-input:checked~.e-mobile-menu__hamburger>.e-mobile-menu__hamburger__block:nth-child(2) {
    opacity: 0;
}

.e-mobile-menu-input:checked~.e-mobile-menu__hamburger>.e-mobile-menu__hamburger__block:nth-child(3) {
    bottom: 10px;
    transform: rotate(-45deg);
}

/* -- mobile menu hamburger -- */
.e-mobile-menu__hamburger {
    width: 24px;
    height: 22px;
    position: relative;
    margin-left: -24px;
    z-index: 30;
}

/* -- mobile menu hamburger element -- */
.e-mobile-menu__hamburger__block {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #000;
    position: absolute;
    transition: top .2s .1s, bottom .2s .1s, opacity .2s 0s, transform .2s 0s, background-color .2s 0s;
    transform-origin: 50%;
}

.e-mobile-menu__hamburger__block:nth-child(1) {
    top: 0;
}

.e-mobile-menu__hamburger__block:nth-child(2) {
    top: 10px;
}

.e-mobile-menu__hamburger__block:nth-child(3) {
    bottom: 0;
}

/* -- mobile menu container -- */
.e-mobile-menu__wrapper {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    top: -100vh;
    left: 0;
    max-width: 0;
    max-height: 0;
    transition: top .3s, left .3s, max-width .3s 0s, max-height .3s 0s;
    padding: 110px 15px 32px 15px;
    box-sizing: border-box;
    overflow: hidden;
}

@media all and (min-width: 512px) {
    .e-mobile-menu__wrapper {
        width: 75vw;
        left: -75vw;
        top: 0;
        max-width: 0;
        
    }
    /* -- mobile menu container space of right side -- */
    .e-mobile-menu-input:checked~.e-mobile-menu__wrapper {
        box-shadow: 200px 0px 5px 15px rgba(47, 19, 82, .6);
    }
}

/* -- mobile menu content -- */
.e-mobile-menu__content {
    width: calc(100% + 48px);
    height: 100%;
    overflow-y: scroll;
    padding: 16px 96px 0 0;
    box-sizing: border-box;
    color: #000;
}

.e-mobile-menu__content::-webkit-scrollbar {
    display: none;
}

@media all and (min-width: 512px) {

    .e-mobile-menu__content {
        padding-right: 32px;
    }
}

/* -- mobile menu unordered list -- */
.e-mobile-menu__main-menu>div>ul {
    width: 100%;
}

/* -- mobile menu all links -- */
.c-mobile-menu a {
    display: flex;
    /* style */
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    padding:14px 8px;
    font-size: 1rem;
    transition: background-color .3s;
    font-weight: 300;
}

/* -- mobile menu links when touch and hover -- */
.c-mobile-menu a:active,
.c-mobile-menu a:hover {
    /* style */
    background-color: #fff;
}

/* -- mobile menu 'before' marker of the 1st level menu -- */
.e-mobile-menu__main-menu>div>ul>li>a::before {
    content: '';
    display: inline-block;
    min-height: 18px;
    max-height: 18px;
    min-width: 18px;
    max-width: 18px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    margin-right: 8px;
}

/* -- mobile menu 'before' marker of the 1st level menu with submenu  -- */
.e-mobile-menu__main-menu>div>ul>.menu-item-has-children>a::before {
    /* style */
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    font-weight: 900;
    font-size: 22px;
    line-height: 18px;
}

/* -- mobile menu animation of 'before' marker of the 1st level menu with submenu -- */
.c-mobile-menu .js-menu-active::before {
    /* style */
    transform: rotateX(180deg);
}

/* -- mobile menu active 1st level menu item with opened submenu -- */
.c-mobile-menu .js-menu-active {
    /* style */
    background-color: #fff;
}

/* -- mobile menu submenu closed -- */
.c-mobile-menu .sub-menu {
    overflow: hidden;
    max-height: 0;
    /* style */
    transition: max-height .1s;
    margin-left: 48px;
}

/* -- mobile menu submenu opened -- */
.c-mobile-menu .js-mobile-menu-open {
    max-height: 999px;
    height: auto;
    /* style */
    transition: max-height .9s;
}

/* ////// DESKTOP MENU ////// */

/* -- desktop menu -- */
.c-desktop-menu {
    display: none;
}
@media(max-width:768px) {
    .l-menu {
        padding: 0 20px;
    }
}

@media all and (min-width: 1030px) {

   

    /* -- desktop menu -- */
    .c-desktop-menu {
        display: flex;
        /* width: 100%; */
    }

    /* -- desktop menu unordered menu list -- */
    .c-desktop-menu>div>ul {
        width: 100%;
        display: flex;
        margin: 0;
        padding: 0;
    }

    .c-desktop-menu>div>ul li {
        position: relative;
    }

    /* -- desktop menu links -- */
    .c-desktop-menu a {
        /* style */
        padding: 8px 16px;
        font-size: .9rem;
        font-weight: 400;
        text-decoration: none;
        text-transform: uppercase;
        color: #141414;
        display: flex;
        align-items: center;
        transition: background-color .6s;
        z-index: 10;
    }

    .c-desktop-menu a:hover, .c-desktop-menu .current-menu-item>a:hover {
        /* style */
        transition: background-color .3s;
        transition-timing-function: cubic-bezier(0.1, 0.5, 0.8, 0.5);
        color:var(--theme-color);
        color: #000000;
    }

    /* -- desktop menu current page menu item -- */
    .c-desktop-menu .current-menu-item>a,
    /* -- desktop menu current page parent menu item -- */
    .c-desktop-menu .current-menu-parent>a {
        /* style */
        background-color: #fff;
        color: black;
    }

    .c-desktop-menu .current-menu-item>a::after {
        /* style */
        color: var(--theme-color)
        
    }

    .c-desktop-menu>div>ul>li>a::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        max-width: 0;
        z-index: 5;
        /* style  underline*/
        background-color: rgb(255, 255, 255);
        transition: max-width .3s;
    }

    .c-desktop-menu a:hover::before {
        max-width: 999px;
        /* style */
        transition: max-width .9s;
    }

    /* -- desktop menu submenu closed -- */
    .c-desktop-menu .sub-menu {
        overflow: hidden;
        position: absolute;
        opacity: 0;
        visibility: hidden;
        /* style */
        width: 256px;
        background-color: #ffffff;
        margin-top: 16px;
        transform: translateY(-16px);
        transition: visibility 1s, transform .3s, opacity .3s;
    }

    .c-desktop-menu .menu-item-has-children:nth-last-of-type(1) .sub-menu {
        right: 0;
    }

    .c-desktop-menu .menu-item-has-children:nth-last-of-type(2) .sub-menu {
        right: 0;
    }

    /* -- desktop menu wide submenu -- */
    .c-desktop-menu .wide {
        display: flex;
        flex-wrap: wrap;
        /* style */
        width: 420px;
    }

    .c-desktop-menu .wide li {
        width: 50%;
        /* style */
        border-bottom: 1px solid rgb(0, 0, 0);
    }

    /* -- desktop menu submenu opened -- */
    .c-desktop-menu .js-menu-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(+4px);
    }

    .c-desktop-menu .sub-menu li {
        border-bottom: 1px solid rgb(0, 0, 0);
       
    }

    /* -- desktop menu submenu links -- */
    .c-desktop-menu .sub-menu a {
        /* style */
        color: rgb(0, 0, 0);
        text-transform:none;
    }

    .c-desktop-menu .sub-menu a:hover {
        /* style */
        background-color: #fff;
        color:var(--theme-color);
       
    }

    /* -- desktop menu 'after' marker of the 1st level menu with submenu-- */
    .c-desktop-menu div>ul>.menu-item-has-children>a::after {
        display: inline-block;
        margin-left: 8px;
        height: 4px;
        /* style */
        font-family: "Font Awesome 5 Free";
        content: "\f078";
        font-weight: 900;
        transition: transform .3s;
        font-size: 1rem;
        line-height: 4px;
    }

    /* -- desktop menu animation of 'before' marker of the 1st level menu with submenu -- */
    .c-desktop-menu .js-menu-active::after {
        transform: rotateX(180deg);
    }

    /* -- desktop menu js -- */
    .c-desktop-menu .js-menu-active,
    .c-desktop-menu .current-menu-item>.js-menu-active,
    .c-desktop-menu .current-menu-item>.js-menu-active::after {
        /* style */
        background-color: #fff;
        color: var(--theme-color);
    }

    .c-desktop-menu .js-menu-active {
        /* border-bottom: 1px solid white; */
    }
}






/*-----------------Footer-----------------*/

.fooAllBack
{
    width:100%; 
    background-color:#000000; 
    text-align:left;
	position:relative;
    margin-top: 0;

    
}
.Footer-Container
{
    width:100%;
    background-image: url(../images/footer-bg.png);
    background-position: bottom;
    background-size: cover;
    height:auto;
    background-repeat: no-repeat;
    padding: 70px 10% 30px 10%;
    margin: 0 0 0 0 !important;
    display:table;    
    font-size:14px;
    font-weight:300;
    line-height:18px;   
}
.Footer-Container a 
{
    font-size: 14px;
    font-weight: 300;

}

.footer-logo {
    width: 160px;
    text-align: left;
}
.fooLeft
{
    width:50%;
    height:auto;
    background-color:transparent;
    float:left;    
    color:rgba(255, 255, 255, 0.85);
    display:inline-block;
    padding:0 10px 0 10px;
}
.fooLeft2
{
    width:25%;
    height:auto;
    background-color:transparent;
    float:left;
    display:inline-block;
    padding:0 10px 0 50px;
}

.fooCenter
{
    width:25%;
    height:auto;
    background-color:transparent;
    float:left; 
    display:inline-block;  
     padding:0 10px 0 0px;     
}

.fooRight
{
    width:25%;
    height:auto;
    background-color:transparent;
    float:left;
    display:inline-block;
   color:rgba(255, 255, 255, 0.85); 
}
.li2
{
    width:100%;
    padding: 7px 7px 7px 0px;
    float:left;
    height:auto;
    float:left;
    margin:5px 0 5px 0px;
    text-align:Left;
    display:block;
    color:rgba(255, 255, 255, 0.85) !important;
    text-decoration:none;
}
.fooLeft2>a
{
    width:100%;
    height:auto;
    float:left;
    padding: 0 0 16px 0;
    margin:0 0 0 0;
    text-align:Left;
    display:block;
    color:rgba(255, 255, 255, 0.85);
    transition:all ease-in-out .5s;
}
.fooLeft2>a:hover
{
   text-decoration:none;
   color:#fff;
   transition:all ease-in-out .5s;
}
.li
{
    width:100%;
    height:auto;
    padding: 0 0 16px 0;
    margin:0 0 0 0;
    text-align:Left;
    display:block;
    color:rgba(255, 255, 255, 0.85)!important;
    text-decoration:none;
    transition: all ease-in-out .5s;
}
.fooLeft>a:hover,.fooCenter>a:hover,.fooRight>a:hover
{
    text-decoration:none;
    color:#fff!important;
}


.FooterHead
{
    
    text-rendering: optimizeLegibility;
    color: #333333;
    margin: 0 0 15px;
    /* text-transform: uppercase; */
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    font-weight: 600;
    position: relative;

}
/* .FooterHead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #00aeef;
} */
.contactAddress a{
    padding-bottom: 18px;
    display: inline-block;
}
.contactAddress a i{
    color:#00aeef;
    margin-right: 5px;
}


.fooDown
{
    width:100%;
    height:auto;
    padding: 20px 10% 20px 10%;
    margin:0 0 0 0;
    display:inline-block;
    background-color:#070707;
    color:#fff;
    text-align:center;    
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    font-weight:300;
    line-height:18px;
    margin: 0 0 0 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.fooDown>a
{
    color:#d3d3d3;
}
.fooDown>a:hover
{
    color:Red;
    text-decoration:none;
}
.Footer-Container .Social {
    font-size: 28px;
    color: #fff;
    margin: 15px 10px 0 0;
    padding: 7px 0 0 0;
    text-align: center;
    width: 28px;
    height: auto;
    display: inline-block;
    /* border-radius:50%;
    background-color:#4267b2;
    border:2px solid rgba(255, 255, 255, 0.13); */
    transition: none;
}

.Social:hover {
    /* -webkit-animation: pulse 600ms;
    animation: pulse 600ms; */
    color: #fff;
}

.twitBlue
{
    background-color:#1da1f2 !important;
}

.line {
    border-bottom: 2px solid #ff2851;
    background: none repeat scroll 0 0 transparent;
    height: 1px;
    margin: 0 auto 45px;
    padding: 5px;
    position: relative;
    width: 120px;
}
.fooSep>img {
    
    width: 120px;
}


@media(max-width:1500px) {
    .fooLeft, .fooCenter, .fooRight {
        height: auto;
    }
}
@media(max-width:768px)
{

.Footer-Container
{
    
    padding: 90px 20px 30px 20px;
    margin: 0 0 0 0 !important;
}

      .fooLeft,.fooLeft2,.fooCenter,.fooRight
{
   
    width:100%;
    height:auto;
    padding:20px 0 0 0;

}
}