body { background-color: transparent; }

/** ************************************************************************ **
 *   Breakpoints - hidden pseudo-elem to body to detect actual breakpoint 
 ** ************************************************************************ **/
body:before { content: "XS"; display: none; visibility: hidden; }
@media (min-width: 576px) { body:before { content: "SM"; } }
@media (min-width: 768px) { body:before { content: "MD"; } }
@media (min-width: 992px) { body:before { content: "LG"; } }
@media (min-width: 1200px) { body:before { content: "XL"; } }

html { scroll-behavior: smooth; }

.flex-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
}


/** ************************************************************************ **
 *   AREAS 
 ** ************************************************************************ **/
.mainArea.mainArea-standard { margin-top: 120px; /*  background-color: orange; */} 
@media (max-width: 991px) {
    .mainArea.mainArea-standard { margin-top: 100px; /*  background-color: red; */} 
}

/** ************************************************************************ **
 *   CONTAINER 
 ** ************************************************************************ **/
/** Change BT roles (margins) **/
.container-fluid { padding-left: 0; padding-right: 0; }
.container-fluid .row { margin-left: auto; margin-right: auto; }
.container-fluid .row [class*='col-'] { padding-left: 0; padding-right: 0; }

.container { max-width: 1200px; }

.row-wrapped { max-width: 1200px; margin-left: auto; margin-right: auto; }

/** Column wrap */
.col-padding { padding-left: 15px !important; padding-right: 15px !important; }
/*
@media (max-width: 575px) {
    .col-padding { padding-left: 15px !important; padding-right: 15px !important; }
}
*/
/** Column wrap - Fluid content */
.row-fluid.row-media .col-padding { padding-left: 0px !important; padding-right: 0px !important; }

/** Objects in main area */
.container-main { min-height: 500px; }
.container-main .wn-main-col .wncms-area > .section:first-child { padding-top: 30px;}
.container-main .wn-main-col .wncms-area > .section:last-child { padding-bottom: 40px;}

/** Section */
.section.section-padding { padding-top: 15px; padding-bottom: 15px; }

/** Images - Full */
.row-fluid .wn-image-elem { width: 100%; max-width: 100%; height: auto; }
.row-wrapped .wn-image-elem { max-width: 100%; height: auto; }

/** ************************************************************************ **
 *   Alternative / secondary content
 ** ************************************************************************ **/
.section-background-color-alt, .background-color-alt { background-color: black; }
.section-background-color-alt, .background-color-alt,
.section-background-color-alt h1,
.section-background-color-alt h2,
.section-background-color-alt h3,
.section-background-color-alt p { color: white; }

/** ************************************************************************ **
 *   BUTTON TO TOP	 
 ** ************************************************************************ **/
.button-to-top-wrap { position: fixed; right: 20px; bottom: 40px; z-index: 900; display: none; }
@media (max-width: 991px) {
    .button-to-top-wrap .button-to-top img { max-width: 48px; }
}
*/

/** ************************************************************************ **
 *   HEADER	 
 ** ************************************************************************ **/
/** Header: background */
.wn-header { background-color: lightgray;}

.wn-header {
    position: fixed; width: 100%; min-height: 60px; z-index: 992; top: 0;
    /** Shadow */
    box-shadow: 0px 3px 6px #00000029;
}

.wn-header .logo {  }
.wn-header .logo a {  display: inline-block; }
.wn-header .logo a img { height: 100%; }

.wn-header .img-flag {
    width: 26px;
    height: auto;
    margin: 0;
    border-radius: 3px;
}

.wn-header .wn-navbar-container { 
    position: relative; 
    width: 100%; height: 100%;
    top: 0; left: 0; right: 0; padding-left: 15px; padding-right: 15px; border-radius: 0;
}
.wn-header .wn-navbar-container .wn-navbar-navigation {
    position: relative;
    height: 100%;
}

/** DESKTOP */
/** Header desktop */

.wn-header-desktop { min-height: 60px; } 
.wn-header-desktop.header-bigger { height: 100px; }
.wn-header-desktop.header-smaller { height: 60px; }

/** Logo */
.wn-header-desktop.header-bigger .logo a img {max-height: 80px;}
.wn-header-desktop.header-smaller .logo a img { max-height: 60px; }

/** Header: navbar */
.wn-header nav.navbar-header { padding: 0; height: 100%; }

.wn-header-desktop .wn-navbar-container { 
    
}

.wn-navbar-navigation ul.wn-navbar-navigation-top { margin-bottom: 0; }
.wn-navbar-navigation ul.wn-navbar-navigation-main { margin-bottom: 0; padding-top: 0; }
 
/** Navi - Fonts */
.wn-navbar-navigation ul.wn-navbar-navigation-top li a { 
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    padding: 5px 20px;
    display: block;
}
 
.wn-navbar-navigation ul.wn-navbar-navigation-main li a { 
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    padding: 5px 20px;
    display: block;
}
/* header: right navi position CHECK!!
.header-bigger .wn-navbar-navigation ul.wn-navbar-navigation-main { 
    position: absolute;
    bottom: 0;
    right: 0;
}
*/
.header-smaller .wn-navbar-navigation ul.wn-navbar-navigation-main { height: 100%; /* background-color: blue; */ }
.header-smaller .wn-navbar-navigation ul.wn-navbar-navigation-main li { height: 100%; /* background-color: green;*/ }
.header-smaller .wn-navbar-navigation ul.wn-navbar-navigation-main li a { 
    height: 100%;
    -ms-flex-align: center!important;
    align-items: center!important;
    display: flex;
    justify-content: center;
}

/** Navi - General (Top / Main) */
.wn-navbar-navigation ul li a:hover,
.wn-navbar-navigation ul li a.active { color: #BA0636 !important; }
.wn-navbar-navigation ul li a.active { text-decoration: underline; }

 
/** Sticky header */
    .wn-header-desktop .wn-navbar-container .navbar-content { overflow: hidden; padding-left: 0; padding-right: 0; }
    .wn-header-desktop.header-bigger .wn-navbar-container .navbar-content { height: 100%; }
    .wn-header-desktop.header-smaller .wn-navbar-container .navbar-content { height: 100%; }
    /* 
    .wn-header-desktop.header-bigger .wn-navbar-container .navbar-content { height: 100px; }
    .wn-header-desktop.header-smaller .wn-navbar-container .navbar-content { height: 60px; }
    */
     /*
     .wn-header-desktop.header-smaller .wn-navbar-container .navbar-content .logo { padding-top: 15px; padding-bottom: 15px; }
     */
     /*
     .wn-header-desktop.header-bigger .wn-navbar-container { padding-top: 15px; padding-bottom: 15px; }
     .wn-header-desktop.header-smaller .wn-navbar-container { padding-top: 15px; padding-bottom: 15px; }
     */
    /*.wn-header-desktop.header-bigger .logo a img { max-width: 180px; }*/
    /*.wn-header-desktop.header-bigger .logo a img { max-width: 180px; }*/
    /*.wn-header-desktop.header-smaller .logo a img { max-width: 140px; }*/

    /** Navigation top - hide */
    .wn-header-desktop.header-smaller .wn-navbar-navigation-top { display: none; }
    .wn-header-desktop.header-bigger .wn-navbar-navigation-top { display: block; }
 
 

/** Header mobile */
.wn-header-mobile { min-height: 60px; } 
/*
.wn-header-mobile { min-height: 60px; }
.wn-header-mobile.header-bigger { height: 100px; }
.wn-header-mobile.header-smaller { height: 60px; }
*/


.wn-header-mobile.header-bigger .logo { top: 0; }
.wn-header-mobile.header-bigger .logo img { width: 100%; }
.wn-header-mobile .wn-navbar-container { 

}

.wn-header-mobile.header-bigger .wn-navbar-container { padding-top: 10px; padding-bottom: 10px; }
.wn-header-mobile.header-smaller .wn-navbar-container { padding-top: 5px; padding-bottom: 5px;  }

/** Logo */
.wn-header-mobile.header-bigger .logo a img { max-height: 60px; }
.wn-header-mobile.header-smaller .logo a img { max-height: 40px; }



/*
.wn-header-desktop { min-height: 60px; }
.wn-header-desktop.header-bigger { height: 100px; }
.wn-header-desktop.header-smaller { height: 60px; }
*/

/*
    .wn-header-mobile.header-bigger .logo a img { max-height: 100px; }
    .wn-header-mobile.header-smaller .logo a img { max-height: 70px; }
    @media (max-width: 767px) {
        header .logo a img { max-width: 177px; }
    }
*/

/** ************************************************************************ **
 *   MAINNAV 
 ** ************************************************************************ **/

/** Mainnav - mobile */
ul.mainnav-mobile-top { border-radius: 0;}
ul.mainnav-mobile-top li { border-bottom: 1px solid #00000033; }
ul.mainnav-mobile-top li a { text-decoration: none; }
.dropdown-toggle::after {
   display: none;
}

.dropdown .icon { margin-top: 7px; }
.dropdown.show .icon {
   transform: rotate(180deg);
   transition: .3s ease-in-out;
   margin-top: 7px;
}
.dropdown .dropdown-menu .dropdown-item { text-decoration: none; background-color: transparent; }
.dropdown .dropdown-menu .dropdown-item:hover { background-color: transparent; color: red; }
.dropdown .dropdown-menu .dropdown-item.active { color: red; }


/** ************************************************************************ **
 *   BREADCRUMB 
 ** ************************************************************************ **/
 ol.breadcrumb { padding: 0; margin-top: 10px; margin-bottom: 25px; /* background-color: transparent; */ }
 ol.breadcrumb li { 
     padding: 0; margin: 0 10px 0 0; color: black; text-align: center; 
     font-size: 14px; line-height: 18px;
 }
 ol.breadcrumb li.active { color: black; }
 ol.breadcrumb li a { display: block; }
 ol.breadcrumb li a,
 ol.breadcrumb li a:hover { text-decoration: none; color: red; }
 /** icon */
 ol.breadcrumb li i { font-size: 12px; line-height: 12px; }
 

/** ************************************************************************ **
 *   MODAL /(rewrite bootstrap styles)
 ** ************************************************************************ **/
 @media (min-width: 768px) {
    .modal-dialog {
        width: 70%; max-width: 900px;
        margin: 30px auto;
    }
}
.btn-wn-mobal { padding: 11px 20px; height: 49px !important; }
.modal .over-loader { position: absolute; }

/** ************************************************************************ **
 *   FOOTER 
 ** ************************************************************************ **/
footer { 
    background-color: lightgrey;
    padding-top: 15px; 
    padding-bottom: 15px; 
}

footer a,
footer a:hover,
footer a:visited { color: red; }
footer a:hover { text-decoration: underline; }

/** Logo**/
footer .logo { margin-bottom: 20px; }
footer .logo a { display: inline-block; }
footer .logo a img { width: 100%; }
/*
@media (max-width: 767px) {
    footer .logo a img { }
}
*/

/** Footer navi */
footer ul.list-inline.footer-primary-navi { margin-bottom: 15px; }
/** Footer secondary navi */
footer ul.list-inline.footer-secondary-navi { margin-bottom: 15px; }

/** Footer Social **/
/** footer ul.list-inline.footer-social {} **/
footer ul.list-inline.footer-social li.footer-social-title { 
    position: relative; top: 0;
    vertical-align: middle;
}
footer ul.list-inline.footer-social ul.footer-social-icons li a { line-height: 0; }
footer ul.list-inline.footer-social ul.footer-social-icons i { /* font-size: 30px; line-height: 30px; */ } 

footer .footer-separation-line { opacity: 0.2; border: 1px solid #000000; }

footer .footer-company {  }

@media (max-width: 575px) {
    footer ul.list-inline.footer-bottom { margin-top: 10px;}
    footer ul.list-inline.footer-bottom li { width: 100%; margin-bottom: 10px;}
}


/** ************************************************ ** 
 *  SIDEBAR OVERLAY
 ** ************************************************ **/
.wrapper.toggled-right #page-content-wrapper .page-content-overlay ,
.wrapper.toggled-left #page-content-wrapper .page-content-overlay { 
	position: absolute; width: 100%; height: 100%; top: 0; z-index: 1200;
	opacity: 0.5; 
}


/** ************************************************ ** 
 *  SOCIAL 
 ** ************************************************ **/
/**
.fa-facebook { color: #5D68CA; }
.fa-instagram {  
    color: transparent;
    background: linear-gradient(216.19deg, #61579D 0%, #964791 33.12%, #E53548 67.71%, #F4A359 93.52%);
    background: -webkit-linear-gradient(216.19deg, #61579D 0%, #964791 33.12%, #E53548 67.71%, #F4A359 93.52%);
    background-clip: text;
    -webkit-background-clip: text;
}   
.fa-youtube { color: #FF2929; }
.fa-envelope { color: #F4A359; }
.fa-twitter { color: #1CA1F0; }
*/

/** ************************************************ ** 
 *  Loading animation 
 ** ************************************************ **/
.over-loader { 
    position: absolute; z-index: 99; 
}
.over-loader-bg { 
    position: absolute; z-index: 1; width: 100%; height: 100%; background-color: transparent !important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    -khtml-opacity: 0.7;
    opacity: 0.70;
}
.over-loader-ico { 
    position: absolute; z-index: 2; width: 100%; height: 100%;
    /** background: url('/images/ajax/ico_loading.gif') center center no-repeat; **/
    background-image: url('/images/ajax/ico_loading.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
}
.over-loader.noicon .over-loader-ico, 
.over-loader.noicon .over-loader-ico-fa {  display: none; }

/** ************************************************ ** 
 *  Option
 ** ************************************************ **/

/** ************************************************ ** 
 *  Option
 ** ************************************************ **/

/** ************************************************ ** 
 *  Sticky col
 ** ************************************************ **/
@media (min-width: 991px) {
    .wn-sticky-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: contents;
    }
    .wn-sticky-content {
        position: -webkit-sticky;
        position: sticky;
        top: 50px;
        padding: 0 15px;
        margin-top: 50px;
    }
}


/** ************************************************************************ **
 *   Image options
 ** ************************************************************************ **/


/** ************************************************************************ **
 *   Black layer
 ** ************************************************************************ **/
 .wn-black-layer {
    background-image: url('../images/objects/background/black.png');
    background-repeat: repeat;
}
.wn-black-layer-left {
    background-image: url('../images/objects/background/black-left.png');
    background-repeat: repeat-y;
    background-position: left;
}
.wn-black-layer-right {
    background-image: url('../images/objects/background/black-right.png');
    background-repeat: repeat-y;
    background-position: right;
}



/** ************************************************ ** 
 *  Responsive square div 
 ** ************************************************ **/
.item-square {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /**  
    box-shadow: 2px 2px 6px #00000029;
    border-radius: 4px;
    */
}

.item-square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.item-square-content {
    position: absolute;
    width: 100%;
    height: 100%;
}

/** ************************************************ ** 
 *  MEDIA
 ** ************************************************ **/

/** Content over image (centred / bottom / left / right) */
.wn-image-content.wn-image-content-centered { 
    width: 80%; left: 10%; right: 10%; 
    top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); 
}
.wn-image-content.wn-image-content-bottom { 
    width: 80%; left: 10%; right: 10%; 
    bottom: 15%; 
}
.wn-image-content.wn-image-content-left { left: 10%; right: auto; }
.wn-image-content.wn-image-content-right { left: auto; right: 10%; }

/** Text */
.wn-image-wrap .wn-image-content.text-color-white,
.wn-image-wrap .wn-image-content.text-color-white p,
.wn-image-wrap .wn-image-content.text-color-white h1,
.wn-image-wrap .wn-image-content.text-color-white h2,
.wn-image-wrap .wn-image-content.text-color-white h3,
.wn-image-wrap .wn-image-content.text-color-white h4 { color: white; }

.wn-text-wrap.wn-text-wrap-mobile { 
    padding-top: 15px; 
    padding-right: 0px; 
    padding-bottom: 15px; 
    padding-left: 0px; 
    
}
.row-fluid.row-media .wn-text-wrap.wn-text-wrap-mobile { 
    padding-left: 15px; 
    padding-right: 15px; 
}




/** ************************************************ ** 
 *  Veritcvaly center
 ** ************************************************ **/
@media (min-width: 768px) {
    .wn-text-content-vcentred {
      position: absolute;
      width: 100%;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      padding: 15px;
      padding-right: 15px;
      padding-left: 15px;
    }
  }

  

/** ************************************************ ** 
 *  DEV 
 ** ************************************************ **/
/** Extra small devices (portrait phones, less than 576px) **/
@media (max-width: 575.98px) { .dev-container { background-color: yellow; } }

/** Small devices (landscape phones, 576px and up) **/
@media (min-width: 576px) and (max-width: 767.98px) {  .dev-container { background-color: orange; } }

/** Medium devices (tablets, 768px and up) **/
@media (min-width: 768px) and (max-width: 991.98px) {  .dev-container { background-color: red; } }

/** Large devices (desktops, 992px and up) **/
@media (min-width: 992px) and (max-width: 1199.98px) {  .dev-container { background-color: violet; } }

/** Extra large devices (large desktops, 1200px and up) **/
@media (min-width: 1200px) {  .dev-container { background-color: brown; color: white; } }