/*
    @import url("/css/basehead.css");
*/







/************************************************************************************************************
    Fonts
************************************************************************************************************/


.fs-0 { font-size: 0; }
.fs-25 {}
.fs-31 { font-size: 2vw; }
.fs-40 { font-size: 2vw; }


h1 {font-size: var(--font-size-h1);
    line-height: calc(var(--font-size-h1) * 1.2);
    margin-bottom: 1rem;
}

h2 {font-size: var(--font-size-h2);}
h3 {font-size: var(--font-size-h3);}
h4 {font-size: var(--font-size-h4);}
p { font-size: var(--font-size-p); margin: 0 0 15px 0;  }

h2,h3,h4{ margin-top:25px;}


h1 span,
h2 span, 
h3 span, 
h4 span {font-size: inherit;}
span { font-size: var(--font-size-p); margin: 0; }


.fs-h1 {font-size: var(--font-size-h1);}
.fs-h2 {font-size: var(--font-size-h2);}
.fs-h3 {font-size: var(--font-size-h3);}
.fs-h4 {font-size: var(--font-size-h4);}
.fs-p { font-size: var(--font-size-p);}

.fs-label { font-size: var(--font-size-label); }

#my-menu a {    
    font-size: var(--font-size-menu-item);
    line-height: var(--font-size-menu-item);
    margin: 0.5vmin 0;
    word-break: normal;
  white-space: normal;
    
}



/*
.PoppinsLight {
    font-family: poppins, sans-serif;
    font-weight: 300;
    font-style: normal;
}

.PoppinsItalic {
    font-family: poppins, sans-serif;
    font-weight: 400;
    font-style: italic;
}

.PoppinsRegular {
    font-family: poppins, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.PoppinsBoldItalic {
    font-family: poppins, sans-serif;
    font-weight: 700;
    font-style: italic;
}

.PoppinsBold {
    font-family: poppins, sans-serif;
    font-weight: 700;
    font-style: normal;
}



.RobotoLight {
    font-family: roboto,sans-serif;
    font-weight: 300;
    font-style: normal;
}

.RobotoMedium {
    font-family: roboto,sans-serif;
    font-weight:500;
    font-style: normal;
}

.RobotoBold {
    font-family: roboto,sans-serif;
    font-weight: 700;
    font-style: normal;
}

.RobotoBlack {
    font-family: roboto,sans-serif;
    font-weight:900;
    font-style: normal;
}

*/



/************************************************************************************************************
    Colors
************************************************************************************************************/

h1, h2, h3, h4, p {
    color: var(--content-text-color);
}

.green {
    background-color:   var(--more-images-color);
    color:              var(--button-color);
}

.black {
    background-color:   black;
    color:              var(--button-color);
}

.red {
    background-color:   red;
    color:              var(--button-color);
}

.yellow {
    background-color:   yellow;
    color:              black;
}

.lightyellow {
    background-color:   lightgoldenrodyellow;
    color:              black;
}


/************************************************************************************************************
    General
************************************************************************************************************/
a						{color:#333; text-decoration:underline;}
a:hover					{text-decoration:none;}


::selection             {background:#d0e8ff;}
::-moz-selection        {background:#d0e8ff;}
/*
table,
table tr,
table tr td				{font:normal 12px/1.5 Arial, Verdana, Sans-serif;}
*/
table                   {text-align: left;}
img, table				{border:0;}
html 					{margin:0; padding:0;}

.float-left {float: left;}

.enableImgScaling       { display: inline-block; font-size:0; margin-left: auto; margin-right:auto;}  /* Lets you can scale an image by setting its percentage. Add a surrounding div with this class to the img. */


.centerContent          { display: flex; justify-content: center; align-items: center; }
.hCenterContent         { display: flex; justify-content: center; }
.vCenterContent         { display: flex; align-items: center; }
.rAlignContent          { display: flex; justify-content: end; }
.lAlignContent          { display: flex; justify-content: start; }
.tAlignContent          { display: flex; align-items: start; }
.bAlignContent          { display: flex; align-items: end; }

.centerText             { text-align: center; }
.leftAlignText          { text-align: left; }
.rightAlignText         { text-align: right; }


.aspect-16-9            {   overflow: hidden; 
                            padding-top: 56.25%; 
                            /*background: url('city-skyline.jpg') no-repeat center;*/
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center;
}

/* Container magin top */
.c-m-t { margin-top: var(--container-top-margin); position:relative; }
.c-m-b { margin-bottom: var(--container-bottom-margin); position:relative; }
.wide-puff.c-m-t { margin-top: 0; }
.wide-puff.c-m-b { margin-bottom: 0;  }
/*
.container-margin-top       { 
    margin-top: var(--container-top-margin); 
    margin-bottom: var(--container-top-margin); 
    position:relative;
}


.wide-puff.container-margin-top       { 
    margin-top: 0; 
    margin-bottom: 0; 
}
    */

.dist-between-header-text   { 
    padding-top: var(--dist-between-header-text); 
    padding-bottom: calc(var(--dist-between-header-text) * 1);
}


.flex { display: flex; width: 100%; height: 100%; }
    
.tiny-push-left         { margin-right: 0.5vw; }
.inline                 { display: inline; }
.clickable              { cursor: pointer; display: inline; }

.headingUnderImage      {
    font-size: var(--font-size-puff-label);
    text-align: center;
    margin-top: 0.8vw;
}


.d-none { display:none; }
.d-inflex { display:inline-flex; }

.topTextWidth,
.runningTextWidth {max-width: var(--content-running-text-width); margin-left: auto; margin-right: auto; }

.rotate180 { transform: rotate(180deg); top:2px; position:relative;}
.outer-page-margin {
    /*margin-top: 2vw;*/
}

.boltToBottom {
    margin-top: auto;
    margin-bottom: 0;
    margin: auto var(--neg-content-h-margin) 0 var(--neg-content-h-margin);
}

.linkBtnPnl {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.linkBtnPnl.fixedPos {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index:10;
}

.linkBtnPnl .linkBtn {
    margin-left: min(20px, 2vw);
    margin-right: min(20px, 2vw);
}

    


.emptyPuffHeight1 {height:max(1vw,10px);width:100%;}
.emptyPuffHeight2 {height:max(2vw,20px);width:100%;}
.emptyPuffHeight3 {height:max(3vw,30px);width:100%;}
.emptyPuffHeight4 {height:max(4vw,40px);width:100%;}
.emptyPuffHeight5 {height:max(5vw,50px);width:100%;}
.emptyPuffHeight6 {height:max(6vw,60px);width:100%;}
.emptyPuffHeight7 {height:max(7vw,70px);width:100%;}
.emptyPuffHeight8 {height:max(8vw,80px);width:100%;}
.emptyPuffHeight9 {height:max(9vw,90px);width:100%;}
.emptyPuffHeight10 {height:max(10vw,100px);width:100%;}
.emptyPuffHeight11 {height:max(11vw,110px);width:100%;}

.emptyPuffHeight15 {height:max(15vw,100px);width:100%;}
.emptyPuffHeight20 {height:max(20vw,100px);width:100%;}
.emptyPuffHeight25 {height:max(25vw,100px);width:100%;}
.emptyPuffHeight30 {height:max(30vw,100px);width:100%;}
.emptyPuffHeight35 {height:max(35vw,100px);width:100%;}
.emptyPuffHeight40 {height:max(40vw,100px);width:100%;}
.emptyPuffHeight45 {height:max(45vw,100px);width:100%;}
.emptyPuffHeight50 {height:max(50vw,100px);width:100%;}
.emptyPuffHeight55 {height:max(55vw,100px);width:100%;}


/*
.width100 { width: 100%; }
.width50 { width: 50%; }
.width33 { width: 33.33%; }
.width25 { width: 25%; }
.width20 { width: 20%; }
.widthAuto { width: auto; }
*/


.flexWidth100,
.flexWidth50,
.flexWidth33 { max-width: 300px; max-height: 300px; min-width:180px; min-height: 180px; }
.flexWidth25,
.flexWidth20,
.flexWidthAuto  { max-width: 400px; max-height: 400px; min-width:180px; min-height: 180px; }

.flexWidth100   { flex: 1 1 100%;   width:13vw; padding-bottom:65%; /*height:26vw;*/ }
.flexWidth50    { flex: 1 1 50%;    width:13vw; padding-bottom:35%; /*height:26vw;*/ }
.flexWidth33    { flex: 1 1 33.33%; width:6vw; padding-bottom:25%; /*height:26vw;*/ }
.flexWidth25    { flex: 1 1 25%;    width:13vw; padding-bottom:20%; /*height:26vw;*/ }
.flexWidth20    { flex: 1 1 20%;    width:13vw; padding-bottom:15%; /*height:26vw;*/ }
.flexWidthAuto  { flex: 1 1 auto;   width:13vw; padding-bottom:15%; /*height:26vw;*/ }

.v-flex { flex-direction:column; }

/*
.plainPuffList > .columnPuffs:first-child {
    padding-top: var(--container-top-margin); 
}
*/

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltipText {
  visibility: hidden;
  width: auto;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px 10px 2px 10px;
  white-space:nowrap;
  
 
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 110%;
  transform: translate(0, -50%);
}

.tooltip:hover .tooltipText {
  visibility: visible;
}

i.fa-envelope-o {position: relative;top: -1px;}
i.fa-phone {position: relative;top: 1px;}


.shdw { position: relative; }
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Add optional to page and element will be hidden on that page. */
.optional .optionalHide {
    display: none;
}

.replaceLogo .logoWrapper #logo {
/*width: 350px; height: 75px;*/
  background: url("/upload/logo/resmal-logo.png") no-repeat;
  font-size: 1px;
  color: white;
  background-size: contain;
  background-position: center center;
}

.replaceLogo .logoWrapper img {
    visibility: hidden;
}

.noHeaderColor .header {
    background-color: var(--content-bg-color);
}


.movie video { width:100%; box-sizing:border-box; position:relative; top:50%;left:50%; transform:translate(-50%, -50%); }
.movie { position: relative; height: auto; overflow: hidden; height: 45vw; margin: auto; top:0; right: 0; bottom: 0; left: 0;}


    .movie .textarea-frame {
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        z-index: 3;
        margin: 0 var(--content-h-margin) 0 var(--content-h-margin);
        padding-left: var(--puff-gap);
        padding-right: var(--puff-gap);
        background: none !important;
    }

        .movie .textarea {
            margin-left: auto;
            margin-right: auto;
        }

.movie .textarea .headline {display:block; font-size:var(--font-size-h1); }


.movie .textarea .text {display:block; }
.movie .textarea .text p {color: #fff;}



    
.movie .hide_movie {
  position: absolute;
  top: -10000px;
  left: -10000px;
  /*z-index:-1;*/
}
.movie video {
  background: black;
  height: 20000px;
}


.movie .textarea .headline ,
.pufflexslider .flex-caption .slideshow-header {
    font-size: max(28px,4vw);
    line-height: 1;
    color: #fff;
}
.pufflexslider .flex-caption .slideshow-text,
.movie .textarea .text {line-height: 1.6; font-size:var(--font-size-p); }

ul { list-style-position: inside; }

img {
    max-width: 100%;
    height: auto;
}

.not-clickable {
    pointer-events:none;
    cursor:default;
}

.mt20 { margin-top: 20px; }


/************************************************************************************************************
    :Spinner - classes related to animating a spinner
************************************************************************************************************/
.spinner-field .spin-fast {
    animation: fa-spin 1s infinite linear;
}

.spinner-field { position: relative; }



/************************************************************************************************************
    :Display - classes related to display
************************************************************************************************************/

.not-clickable {
    pointer-events:none;
    cursor:default;
}

.disp-grid .disp-card { transition: transform .2s; }
.disp-grid .disp-card:hover {transform:scale(1.02); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
/*.puffRndCrnr .disp-grid .disp-card { border-radius: var(--border-radius); }*/

/* acceptRoundCorner */
.puffRndCrnr .bg .accRndCorner {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.puffRndCrnr .no-bg .accRndCorner { 
    border-radius: var(--border-radius); 
}
.no-bg .accBg {
    background-color: transparent !important;
}

.disp-paging {padding: 10px 0;}
.disp-paging.only-one-page { display: none; }
.disp-paging .disp-prev { margin-right: 10px;}
.disp-paging .disp-next { margin-left: 10px;}
.disp-paging a { text-decoration: none; }
.disp-paging a:hover { text-decoration: underline; }

.disp-paging .disp-selected { color:red; }

.disp-paging .disp-selected.tiny-margin,
.disp-paging .disp-not-selected.tiny-margin { margin-right: 5px; }





/************************************************************************************************************
    :simplifiedPuffPage userPage
************************************************************************************************************/
.simplifiedPuffPage.userPage {
    text-align: center;
    margin: 0 auto;    
    width:70%;    
}

    .simplifiedPuffPage.userPage .imagePnl {
        margin-left: auto;
        margin-right: auto; 
        display: inline-block;
    }

    .simplifiedPuffPage.userPage .textPnl {
        text-align:left;
    }



/************************************************************************************************************
    :Wide-puff, wide-puff-slim
************************************************************************************************************/

/* Default wide puff */
.def-wide-puff:not(.wide-puff) {
    margin-left: var(--neg-content-h-margin);
    margin-right: var(--neg-content-h-margin);     
    padding-left: 0;
    padding-right: 0;
}

/* Container margin top/bottom */
.wide-puff.c-m-t  { padding-top: var(--wide-puff-margin-top-bottom); position:relative; }
.wide-puff.c-m-b  { padding-bottom: var(--wide-puff-margin-top-bottom); position:relative; }

/*.wide-puff.container-margin-top  {*/
    /*background-color: var(--wide-puff-bg-color);*/
    /*padding-top: var(--wide-puff-margin-top-bottom);
    padding-bottom: var(--wide-puff-margin-top-bottom);
    position:relative;
}*/

.wide-puff {
    /*padding-bottom: var(--wide-puff-margin-top-bottom);*/
    
}

.wide-puff.bg-img {
    
    background-position:center center;
    background-size: cover;   
}

    .wide-puff.fill.bg-img {
        margin-left: var(--neg-content-h-margin);
        margin-right: var(--neg-content-h-margin);
    }


.wide-puff.no-pad-bottom.bottom,
.wide-puff.no-pad-bottom {
    /*padding-bottom:unset;*/
}

.wide-puff.top:not(.no-box-frame) {
    padding-top: var(--wide-puff-margin-top-bottom);    
}

.wide-puff.bottom:not(.no-box-frame) {
    padding-bottom: var(--wide-puff-margin-top-bottom);
}

.wide-puff.fill {
        margin-left: var(--neg-content-h-margin);
        margin-right: var(--neg-content-h-margin); 
        padding-left: var(--content-h-margin);
        padding-right: var(--content-h-margin);

}

    .wide-puff.box {
        margin-left: var(--neg-wide-puff-box-margin);
        margin-right: var(--neg-wide-puff-box-margin);
    }

    .wide-puff.box:not(.no-box-frame) {
        padding-left: var(--wide-puff-box-margin); 
        padding-right: var(--wide-puff-box-margin); 
    }
    
    .wide-puff.box.no-box-frame {
        padding-left: var(--puff-gap);
        padding-right: var(--puff-gap);
    }

    
    .wide-puff.box.top {
        border-top-left-radius: var(--wide-puff-box-radius);
        border-top-right-radius: var(--wide-puff-box-radius);
    }

    .wide-puff.box.bottom {
        border-bottom-left-radius: var(--wide-puff-box-radius);
        border-bottom-right-radius: var(--wide-puff-box-radius);
    }
    
    .wide-puff.box.no-box-frame.puffRndCrnr .pufflexslider li {
        border-radius: var(--wide-puff-box-radius);
    }

/*.wide-puff.fill:before,
.wide-puff.fill:after {
   content: "";   
   top: 0px;
   height: 100%;
   width: var(--content-h-margin);
   position: absolute;
   clear:right;
}

    .wide-puff.fill:before {
        left: var(--neg-content-h-margin);
    }
    .wide-puff.fill:after {
        right: var(--neg-content-h-margin);
    }
    

.wide-puff.box:before,
.wide-puff.box:after {
   content: "";
   top: 0px;
   height: 100%;
   width: var(--wide-puff-box-margin);
   position: absolute;
   clear:right;
   
}

    .wide-puff.box:before {
        left: var(--neg-wide-puff-box-margin);        
    }
    .wide-puff.box:after {
        right: var(--neg-wide-puff-box-margin);        
    }
    
    .wide-puff.box.top:before {
        border-top-left-radius: var(--wide-puff-box-radius);
    }
    .wide-puff.box.top:after {
        border-top-right-radius: var(--wide-puff-box-radius);
    }
    .wide-puff.box.bottom:before {
        border-bottom-left-radius: var(--wide-puff-box-radius);
    }
    .wide-puff.box.bottom:after {
        border-bottom-right-radius: var(--wide-puff-box-radius);
    }

*/
/************************************************************************************************************
    Animations
************************************************************************************************************/

@keyframes fadein {
 0% {
 opacity:0;
 }
 100% {
 opacity:1;
 }
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 92%}
    50%{background-position:100% 9%}
    100%{background-position:0% 92%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 92%}
    50%{background-position:100% 9%}
    100%{background-position:0% 92%}
}
@keyframes AnimationName {
    0%{background-position:0% 92%}
    50%{background-position:100% 9%}
    100%{background-position:0% 92%}
}

.reveal{
  position: relative;
/*transform: translateY(80px);*/
  opacity: 0;
  /*transition: 0.4s all ease;*/ 
}
.reveal.active{
/*transform: translateY(0);*/
  opacity: 1;
animation: zoomIn 0.6s ease-out; 
animation-fill-mode: backwards;
animation-duration: 0.6s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;


-webkit-transform-style: preserve-3d; 
-webkit-backface-visibility: hidden;
}

/************************************************************************************************************
    Buttons
************************************************************************************************************/

.static-size-button     {  }
.wideBtn {

    font-size: var(--font-size-button);
    background-color: var(--button-bg-color);
    color: var(--button-color);
    text-decoration: none;
    padding: 1.2vw 2vw 1vw 2vw;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 1vh;
    margin: 2vw auto;
}

.innerPuff .wideBtn p,
.wideBtn p { color: var(--button-color); vertical-align: middle; }
.wideBtn i {
    
    display: inline-block;
    
    font-size: max(17px , 1.1vw);
    margin-left: 0.3vw;
    color: var(--button-color);
    
}
.noBorder { border: none; }


/************************************************************************************************************
Body layout
************************************************************************************************************/

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: auto;
    margin: 0 auto 0 auto;
    background-color: var(--content-bg-color);
}
.inner                      {/*max-width: 1000px; */margin:0 auto;}

.mainBodyContent {
    margin: 0 var(--content-h-margin) 0 var(--content-h-margin);
}


/************************************************************************************************************
    Header layout
************************************************************************************************************/
.logoWrapper {
    height: auto;
    min-height: 0;
}

#logo {
    
    flex: 1 1 auto;
    margin: 0 0.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.header .headerCloseMenuBtn {

    /*position: absolute !important;*/
    display: inline-block;
    width: auto;    
    /*height: 100%;*/

    text-align: center;
    font-size: var(--header-icon-size);
    cursor: pointer;
    display: none;
    
    flex: 0 1 6vmin;
    color: var(--header-text-color);       
    /*margin: auto 0.5vw;*/
    text-align: right;
    margin-right: 4px;
    
}

    .header .headerCloseMenuBtn img {
        display: block;
    }

.header .headerCloseMenuBtn i {
  /*position: relative;  
  top: -0.7vw;  */
  width: calc( var(--header-icon-size) / 1.2);
  /*margin: calc( var(--header-icon-size) / 7) auto;*/
}



#logo { /*flex-basis: 50%;*/  height: 100%; overflow: hidden; }
#logo img {
    width: auto;
    /* height: 1.8vw; */
    max-width: 100%;
    /* max-height: 6vh; */
    margin: auto;
    /* min-height: 40px; */
  /*  flex: 0 1 10%;*/
    height: 70%;
}


  
.header {
    
    /*flex: 0 1 auto;*/ 
    flex: 0 1 var(--header-default-height);
    height: var(--header-default-height);
    background-color: var(--header-bg-color); 
    padding: 0 1vw;
    max-height: var(--header-default-height);
    position: sticky;    
    top: 0;
    z-index:10;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
}
    .header .inner {
        margin-left: auto;
        margin-right: auto;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        
        display: grid;    
        grid-auto-flow: column;
        grid-auto-columns: 1fr 2fr 1fr 1fr 1fr;

        margin: 0 var(--content-h-margin) 0 var(--content-h-margin);
        grid-auto-columns: auto 1fr min-content;
    }
    .inner .socialMediaList {order:3;justify-self: end; margin-left: 0;}
    .inner .socialMediaList ul li {margin-right: 0;}
    .inner .menuButtons { margin-right: 1vw; padding-right: 0;    }
    .inner #logo  { margin: 0; }
    .inner .menuButtons ul { font-size: medium; }

    .inner .topmenu {text-align:right;}
    /*.topmenu .lvl-1 {position: relative;}*/
    .topmenu ul li {position: relative;}
    .topmenu .lvl-2 {position: absolute; top:100%; height: auto; left: 50%;transform:  translateX(-50%);background-color: var(--header-bg-color);z-index:10;}
    /*.topmenu ul.lvl-2 li:hover            {background-color:azure; width:100%; }*/

.header #contact				{position:absolute; right:20px; top:10px;}

.topmenu { text-align:center;}

.topmenu ul                  {margin:0; padding:0;}
.topmenu ul li               {display:inline-block;}

.topmenu ul li a             {font-weight: 700; font-size: var(--font-size-menu); color: #d0e8ff; text-decoration: none; padding: 10px max(0.8vw,8px); display: block;}
.topmenu ul li.on > a       {color: #000000;font-size: max(16px, 0.8vw);font-weight: 600;}
.topmenu ul li a:hover       {text-decoration:none;}
.topmenu ul li a.haschild    {display:none;}
.topmenu ul li ul            {display:none;}
.topmenu ul li:hover ul            {display:block;}

.header #nav ul#responsive            {display:none;}
.header .contactPuffs {
    position: absolute;
    right: 0;
}


.socialMediaList {
    /*flex: 0 1 6vmin;*/ 
    
    justify-self: start;
    font-size: var(--header-icon-size);
    /*text-align: center;
    margin: 0 0.5vw;*/
    margin-left: 2vw;

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    height:100%;
    
}

.socialMediaList ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /*list-style-type: none;*/
    display: flex;
    height: 100%;
}

    .socialMediaList ul li {
        display: inline-block;        
        vertical-align: text-top;
        
        height: 100%;
        /*margin: auto;*/
        margin-right: 10px;
    }


        .socialMediaList ul li a {
            text-decoration: none;
            
        }
    .socialMediaList ul li a:link { text-decoration: none; }

.socialMediaList i {
  transform: scale(0.90);
  line-height: var(--header-default-height);
  vertical-align: middle;
  font-size: var(--header-icon-size);
}

/************************************************************************************************************
    Page layout
************************************************************************************************************/
.clearfix:after 			{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix 			{height: 1%;}


html {
  scroll-behavior: smooth;
}

.content					{ flex: 1 1 auto; background-color: var(--content-bg-color); margin-left: auto; margin-right: auto; margin-top: var(--header-default-height); width: 100%; }
.content .inner             {max-width: var(--max-width); height: 100%;}
.contentright {
   /* background-color: var(--content-bg-color);*/
    color: var(--content-text-color);
    width: 100%;
    margin: 0;
    padding: 0;
    float: right;
    overflow: hidden;
}
#ctl00_divContentRight      {background-color: var(--content-bg-color); height: 100%;}


/************************************************************************************************************
    :Start page
************************************************************************************************************/
#start-slideshow            {width:100%; margin:0 auto; margin-bottom: -1px; /* Fix for 1px error. */}
.flexslider                 {overflow:hidden; width:100%; margin:0 auto !important;}
.flexslider .slides li      {background-size:cover; background-position:center;}
.flexslider .slides li a    {display:block; height:100%; width:100%;position:relative; z-index: 2;}
.overlayfilter,
.flexslider .slides .filter {    
    background: #00000020;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#start-content                      {margin:0 auto;}

#start-puffs						{overflow:hidden;}
#start-puffs .puffitem				{width:48.5%; height:100%; margin:0 3% 0 0; padding:0; float:left; text-align:left; overflow:hidden; position:relative;}
#start-puffs .puffitem.last			{margin-right:0;}

#start-puffs .puffitem a                                                {display:block; width:100%; height:100%; text-decoration:none;}
#start-puffs .puffitem .rub, #start-puffs .puffitem a .rub              {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; margin:0 0 1% 0; padding:0; font-size:14px; font-weight:bold; color:#333; text-align:left;}
#start-puffs .puffitem .image, #start-puffs .puffitem a .image          {width:100%; height:145px; display:block; margin:0 0 2.5% 0; text-align:center; background-color:#fff; overflow:hidden;}
#start-puffs .puffitem .image img, #start-puffs .puffitem a .image img  {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; opacity:1.0; filter:alpha(opacity=100);}
#start-puffs .puffitem .content, #start-puffs .puffitem a .content      {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; /*background:rgba(0,0,0,.6); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.3);*/}
#start-puffs .puffitem .content p, #start-puffs .puffitem a .content p  {transition-duration:0.2s; -webkit-transition-duration:0.2s; /*padding:0; margin:0;*/ line-height:16px; font-size:12px; color:#444;}

#start-puffs .puffitem:hover .rub                                               {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#000;}
#start-puffs .puffitem:hover .content, #start-puffs .puffitem:hover .content p  {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#222;}
#start-puffs .puffitem:hover img, #start-puffs .puffitem a:hover img            {transition-duration:0.2s; -webkit-transition-duration:0.2s; opacity:0.8; filter:alpha(opacity=80);}

#start-news                         {width:32.5%; height:225px; margin:0; padding:0; float:right; overflow:hidden;}
#start-news h3                      {padding:0 0 2.6% 0; margin:0; display:block; font-size:16px; line-height:18px;}
#start-news ul                      {list-style:none; margin:0; padding:0; width:100%; overflow:hidden;}
#start-news ul li                   {width:100%; padding:0; margin:0 0 3% 0;}
#start-news ul li a                 {transition-duration:0.2s; -webkit-transition-duration:0.2s; display:block; text-decoration:none; padding:1.5% 1.5% 1.5% 3%; margin:0; border-left:2px solid #ccc;}
#start-news ul li a .date           {display:block; font-size:10px; color:#888;}
#start-news ul li a .title          {display:block; color:#444; width:100%; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#start-news ul li a:hover           {transition-duration:0.2s; -webkit-transition-duration:0.2s; border-left:2px solid #2980b9; background-color:#f5f5f5;}
#start-news ul li a:hover .date     {color:#666;}
#start-news ul li a:hover .title    {color:#000;}




/************************************************************************************************************
    :Menu 
************************************************************************************************************/ 

#my-menu  a.menu-close-btn {
  position: absolute !important;
  display: block !important;
  right: 1.5vw;
  top: 0.5vw;
  width: 4vw;
  height: 4vw;
}

#my-menu  a.menu-close-btn i {
  position: relative;
  
  top: -0.4vw;
  
}

.inner .menuButtons {
   /* flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    justify-self: start;*/
    font-size: var(--header-icon-size);
    text-align: center;
    /*margin: 0 0.5vw;    */
    margin-right: 2vw;
    padding-right:2px;
    justify-self: end;
    display:flex;
    align-items: center;
}

#headerExtraButtonPanel {
    display: none;
    align-items: center;
    height:100%;
    justify-content: end;
    
}


.full-menu-type0 { display:none; }
.hamburger-menu-type0 { display:inline-flex; }

.full-menu-type1 { display:inline-flex; }
.hamburger-menu-type1 { display:none; }

#responsive-menu-btn  {
    height: 100%;
    /*width: 100%;*/
    display: inline-flex;
    /*justify-content: center;*/
    align-items: center;
    justify-content: end;
    text-decoration: none;    
}

#responsive-menu-btn span {
    
    margin: 0px 10px 0 0;
    color: var(--header-text-color);
    /*order: 1;*/
}
#responsive-menu-btn img {
    height: calc(var(--header-icon-size) / 1.5);
    
    /*object-fit: cover;*/
}



.mm-menu {
  width: 100%;
  min-width: 140px;
  max-width: 100vw; 
  background-color: var(--button-bg-color);
  overflow:auto;
}

html.mm-opening .mm-slideout {
    -webkit-transform: translate(100vw, 0);
    -moz-transform: translate(100vw, 0);
    -ms-transform: translate(100vw, 0);
    -o-transform: translate(100vw, 0);
    transform: translate(100vw, 0); 
} 

.mm-navbar-top {
    text-align:center;
}

.menuArrowsLeft li.mm-vertical {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
    
    .menuArrowsLeft li.mm-vertical a.mm-next {
        order:1;
        margin: auto;
        vertical-align: middle;
        display: inline-block;
    }
    .menuArrowsLeft li.mm-vertical div {
        flex: 1 0 100%;
        order:2;
    }

    .menuArrowsLeft .mm-prev:before, 
    .menuArrowsLeft .mm-next:after, 
    .menuArrowsLeft .mm-arrow:after {
        position: static;
        vertical-align: middle;
    }
   
    .menuArrowsLeft .mm-listview .mm-next {
        position: static;
        width:20px;
        padding: 0 4px;
    }

    .menuArrowsLeft .mm-vertical .mm-listview > li > .mm-next, 
    .menuArrowsLeft .mm-listview > li.mm-vertical > .mm-next {
        height: unset;
    }

.mm-navbar .mm-btn {
    width: unset;
}

.mm-navbar .mm-btn:last-child::after {
    outline: 2px solid black;
}

.mm-navbar .mm-btn:last-child {
    width: 40px;  
    /*right: calc(3vw + 15px); */
    height: var(--header-default-height);
    vertical-align: -50%;
    padding: 0;
    
   
    /* background-color: var(--content-bg-color); */
    background-image: url('/gfx/close.svg');
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
    margin: 0 0 0 0 !important;
    right: calc(3vw + var(--header-icon-half-size))  !important;
    
}

.mm-listview > li > a, 
.mm-listview > li > span {
    padding: 10px 10px 10px 0px;
}
.mm-listview > li:not(.mm-divider):after {
    left: 0px;
       right: 10px;
}

.mm-listview {
    
    margin: auto;
}
.mm-panels {
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    
}

#mm-0 { width: 100vmin; max-width: 90%; margin-top: 5vw;}
#mm-0 a { color:#fff; }

.mm-navbar {
    border-bottom: none;
}


.mm-menu .mm-listview > li .mm-next:after, 
.mm-menu .mm-listview > li .mm-arrow:after {
    border-color: black;
}


li .mm-panel::before {
    content: '';
    border-top: 1px solid rgba(0,0,0,0.1);    
    left: 0px;
    right: 10px;
    position: absolute;  
    display: block;    
}

.mm-vertical .mm-listview .mm-panel, 
.mm-listview .mm-vertical .mm-panel {
    display: none;
    padding: 0px 0 0px 10px;
}

.mm-panel .mm-listview > li:first-child {
    padding-top: 3px;
}

.mm-menu.mm-vertical .mm-listview > li.mm-opened > a.mm-next, 
.mm-menu.mm-vertical .mm-listview > li.mm-opened > .mm-panel, 
.mm-menu .mm-listview > li.mm-opened.mm-vertical > a.mm-next, 
.mm-menu .mm-listview > li.mm-opened.mm-vertical > .mm-panel {
    background:transparent;
}

.mm-menu .mm-listview > li .mm-next {
    width: 60px;
    text-align: center;
}

.mm-menu .mm-listview>li .mm-next:after, 
.mm-menu .mm-listview>li .mm-arrow:after {
    border-color:red;
}

.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), 
.mm-menu .mm-listview > li.mm-selected > span {
    background:transparent;
}

.mm-vertical a { text-transform: inherit; }
.mm-listview .mm-next:before { border:none; }


html.mm-opening .mm-menu.mm-front, 
html.mm-opening .mm-menu.mm-next {
    background-color: #09c298;
}

.mm-listview > li, .mm-listview > li:after, 
.mm-listview > li .mm-next, .mm-listview > li .mm-next:before:last-child{
border:none;
}

/*
.mm-listview > li {
    position: unset;
}*/

.mm-listview > li > a, 
.mm-listview > li > span {
    overflow: visible;
}

/************************************************************************************************************
    :LanguageSelector
************************************************************************************************************/ 
.langSel        { margin-left: 2vw; font-size: var(--font-size-header-text); color: var(--header-text-color); display: flex; align-items: center; position:relative; height:100%; cursor:pointer; }
.langSel img    { vertical-align:middle; display: inline-block;  min-height: 1.5vw; }
.langSel .name  { margin: 0 0 0 10px; display: inline-block; }
.langSel i      { margin-left: 10px; display: inline-block; }
.langSel.on i   {  transform: rotate(180deg); }
.langSel .list {
    position: absolute;
    top: var(--header-default-height);
    right: 0;
    padding: 5px 10px 10px 10px;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 5;
    background: var(--header-bg-color);
    box-sizing: border-box;
}
.langSel.on .list { display: block; }
.langSel .list     { list-style: none; }
.langSel .list a   { font-size: var(--font-size-p); color: var(--header-text-color); border-radius:6px; padding: 0 5px; text-decoration: none; }
.langSel .list a:hover { background-color: var(--button-bg-color); }  

/************************************************************************************************************
    Submenu vertical
************************************************************************************************************/ 
.leftmenu                           {float:left; width:25%;}
.leftmenu ul					    {width:90%; margin:0; padding:0 0 10px 0; list-style:none; overflow:hidden;}
.leftmenu ul li				        {width:100%; margin:0; padding:0; border-bottom:1px dotted #999;}
.leftmenu ul li:last-child          {background:none; border:0;}
.leftmenu ul li a				    {width:100%; margin:0; padding:0; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.leftmenu ul li a:hover             {color:#333;}
.leftmenu ul li.on a			    {color:#333; font-weight:bold;}
.leftmenu ul li.on-childs           {background:none; border:0;}
.leftmenu ul li.on-childs a	        {color:#555; font-weight:bold; line-height:30px;}

.leftmenu ul li.on-childs ul            {margin:0 0 0 15px !important;}
.leftmenu ul li.on-childs ul li         {background:none; border:0;}
.leftmenu ul li.on-childs ul li a       {font-weight:normal !important; line-height:24px !important; font-size:11px; color:#555;}
.leftmenu ul li.on-childs ul li a:hover {color:#333;}
.leftmenu ul li.on-childs ul li.on a    {color:#333; font-weight:bold !important;}



/************************************************************************************************************
    Submenu horizontal
************************************************************************************************************/ 
.fullmenu                           {}
.fullmenu ul					    {width:auto; margin:0; padding:0; list-style:none; overflow:hidden;}
.fullmenu ul li				        {display:inline-block; margin:0 10px; padding:0; overflow:hidden;}
/*.fullmenu ul li:last-child          {background:none; border:0;}*/
.fullmenu ul li a				    {margin:0; padding:5px 10px; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.fullmenu ul li a:hover             {color:#333;}
.fullmenu ul li.on a, .fullmenu ul li.on-childs a			    {color:#333; font-weight:bold;}


/************************************************************************************************************
    SubmenuNew Separator
************************************************************************************************************/ 
.fullmenu .menuSeparator {   
  border: none;
  text-align: left;
  outline: none;  
  transition: 0.4s;
  box-sizing: border-box;
  padding-right: 10px;
  text-align: -webkit-match-parent;
  display:none;
  z-index:2;
}

.fullmenu .hideItem {
  display: inline-block;
  max-height: 100px;     
  transition: max-height 0.2s ease-out;
}

    .fullmenu .hideItem.visible {
        max-height: 200px;
        display: inline-block;
    }

    .fullmenu .menuSeparator.active {
    }

.fullmenu .menuSeparator a:after {
  font-family: FontAwesome;
  content: '\f107';  
  font-weight: bold;
  float: right;
  margin-left: 5px;
  /*margin-right: 5px;*/
}
.fullmenu .menuSeparator.active a:after { content: "\f106"; }



/************************************************************************************************************
    :Footer layout
*************************************************************************************************************/
#footer	{   
            flex: 0 1 content; 
            box-sizing: border-box;
            margin-top: auto;
            background-color: var(--footer-bg-color); 
            color: var(--footer-text-color); 
            min-height: var(--footer-min-height); 
            /*border: 1px solid red;*/ 
            /*padding-top: var(--footer-block-padding);*/ 
            padding-bottom: var(--footer-block-padding); 
            background-size: cover;

            padding-left: var(--content-h-margin);
            padding-right: var(--content-h-margin);

}

#footer h1, 
#footer h2, 
#footer h3, 
#footer h4, 
#footer p {
    color: var(--footer-text-color);
}

    #footer .inner {
        display:    flex;
        flex-direction: column;
        /*max-width:  var(--max-width);*/
        /*width: var(--footer-content-width);*/
        margin-left: var(--puff-gap);
        margin-right: var(--puff-gap);
        text-align: center;
        margin-top: 2vw;
        width: 100%;
    }

#footer .footer-row {
    display: flex;
    font-size: var(--font-size-footer-large);
    justify-content: center;
    margin: 2.0vmax 0;
}

#footer .footer-row:nth-child(2) { margin: 2.0vmax 0 0 0; opacity: 0.6; font-size: var(--font-size-footer-tiny); }
#footer .footer-row:nth-child(3) { margin: 0 0 2.0vmax 0; opacity: 0.6; font-size: var(--font-size-footer-tiny); }


#footer .footer-row:last-child > :nth-last-child(2) { font-size: var(--font-size-footer-tiny);}
#footer .footer-row:last-child > :nth-last-child(1) { font-size: var(--font-size-footer-tiny);}

#footer .footer-row span.line { display: block; }


#footer .footer-row span.line:first-child {
    color: var(--button-bg-color);
}

#footer .footer-row span.line, 
#footer .footer-row span.line a { font-size:var(--font-size-footer-large); }


#footer .footer-row:last-child span.line
{
    font-size: var(--font-size-footer-tiny);    
    opacity: 0.6;        
}


#footer .footer-item {
    flex: 1 1 100%;
}
    
        /*
    #footer .footer-item span.line:first-child {        
        opacity: 0.6;        
        font-size: var(--font-size-footer-small);
    }
*/
#footer .inject-logo { width: 50vmin;}
#footer .footer-row span.line a.webbpartner { font-size:var(--font-size-footer-tiny);}



#footer a				{color:#fff; text-decoration:none;}
#footer a:hover         {text-decoration:underline;}
#footer .left			{float:left; padding:0; margin:0; text-align:left;}
#footer .right			{float:right; padding:0; margin:0; text-align:right; display:none;}
#footer .right .rss img, 
#footer .right .facebook img, 
#footer .right .twitter img	    {margin:0 0 3px 2px; padding:0; border:0;}

#footer .links                  {margin-bottom:10px; }
#footer .links .left		    {float:left; width:16%; display:block; overflow:hidden; margin:0 0.6% 1% 0; text-align:left; clear:right;}
#footer .links .left li         {list-style-type:none; margin-left:0; padding-left:0;}
#footer .links .left.first	    {padding-left:0px;}
#footer .links .left p a		{color:#fff; display:block; line-height:20px; font-size:10px; font-family:Arial, Verdana, sans-serif;}
#footer .links .left p a strong	{color:#fff; font-size:12px;}




/************************************************************************************************************
    :Newslist, :FAQ
************************************************************************************************************/ 

.puffFaqSearch { text-align: center;}
.puffFaqSearch .searchField { width: 100%; display: flex; }

.puffFaqSearch .searchTbx {
    flex: 1 0 auto;
    height: max(25px,3vw);
    padding-left: 5px;
}

.wide-puff .puffFaqSearch .searchTbx {
    background-color: var(--content-bg-color);
    
}

.puffFaqSearch .searchBtn {
    flex: 0 0 100px;
    height: max(25px,3vw);
}

.maxwidth1 { max-width: 600px; }
.maxwidth2 { max-width: 600px; }
.maxwidth3 { max-width: 600px; }
.maxwidth4 { max-width: 800px; }
.maxwidth5 { max-width: 1000px; }


.puffFaq.faqBox {
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
    
}

.puffFaq.faqBox .box {
    
    display: inline-flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.puffFaq.faqBox .box .faqItem {
      
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #555;
    border-left: 1px solid #555;

    position: relative;    
    background-size:contain;
    background-position: center top;
    background-repeat: no-repeat;

    font-size: var(--font-size-button);
}

.puffFaq.faqBox .box .faqItem .title {
    position: absolute;
    text-align: center;
    /*transform: translateY(30%);*/
    width: 100%;
   /* height: 100%;*/
    bottom: 10px;
}

    .puffFaq.faqBox .box .faqItem .image {
        position: absolute;
    }
        .puffFaq.faqBox .box .faqItem .image img {
            object-fit:cover;
            width:40%;
            height: 50%;
            padding-bottom: 50%;
        }

.puffFaq .box .faqItem:hover  {
    background-color: var(--line-color);
    cursor: pointer;
}



.puffFaq.faqRow .box {
    display: flex;    
}

.puffFaq.faqRow .box .faqItem {
    
}

.headline.news { color: #fff; }

ul.news-list {
    box-sizing: border-box;
    list-style-type: none;
}


ul.news-list li { 
    border-top: 1px solid var(--line-color);
    /*padding-top: 5px;*/    
}

    .wide-puff ul.news-list li { 
        background-color: var(--content-bg-color);
    }

    ul.news-list li:last-child {
        border-bottom: 1px solid var(--line-color);
    }

    ul.news-list li span {
        font-size: var(--font-size-news-item);    
        display: block;
        flex: 0 1 auto;
        line-height: max(20px, 3vw);
        padding-right: 35px;
    }

    ul.news-list li span.title { min-width:20%;}
    ul.news-list li span.date { display: none; }
    ul.news-list li span.icon-left,
    ul.news-list li span.icon {
        
        width: max(20px, 3vw);
        font-weight: 100;
    }
        ul.news-list li span.icon {
            font-size: calc(20px + 1vw);
            margin-left: auto;
            margin-right: 0;
            min-width: 40px;
            padding-left: 5px;
        }
    ul.news-list li span.icon-left {         
        text-align: right; 
        margin-right: max(20px, 3vw);}

    ul.news-list li div:first-child,
    ul.news-list li a {
        text-decoration: none;
        display:flex;        
        align-items: center;
        height: 100%;
        position:relative;
        min-height: var(--row-height);
    }

    ul.news-list.list li .image {
        height: 100%;
        max-height: 100%;
        min-width: 100px;
        min-height: 75px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin: 3px 0 3px auto;
        align-self: self-start;
    }

        ul.news-list li .faqItem { padding-top:1px; cursor: pointer; }
        ul.news-list li .faqItem:hover { background-color: var(--line-color); }

    ul.news-list li div.expandable {
        display: none;
        /*padding: 1vw;*/
        margin: 0;
        /*height: var(--row-height);
        scroll-padding-top: 20px;*/
        border-top: 1px solid var(--line-color);
        border-bottom: 2px solid var(--line-color);
        
    }
    
    .expandable .frame {
        padding: 2vw;
    }

ul.news-list.col {
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
        ul.news-list.col li
        {
            border-top: none;
            box-sizing: border-box;
            
            padding: var(--puff-gap);
            overflow:hidden;
            
            /*width: calc(33% - var(--puff-gap));
            margin: var(--puff-gap);*/
        }

        ul.news-list.col li:last-child { border-bottom: none; }

        ul.news-list.col li.col2 { flex: 0 1 50%; }
        ul.news-list.col li.col3 { flex: 0 1 33.33%; }
        ul.news-list.col li.col4 { flex: 0 1 25%; }
        ul.news-list.col li.col5 { flex: 0 1 20%; }
            
    ul.news-list.col li a { 
        overflow:hidden;
        background-color:var(--puff-bg-color);
        box-sizing: border-box;
           
            
            height: 100%;
            display: flex; flex-direction:column;
            
    }

    .puffRndCrnr ul.news-list.col li a { border-radius: var(--border-radius); }
    
    ul.news-list.col li span {
        font-size: var(--font-size-p);
        line-height: 1.5;
        padding: 0;
    }
        ul.news-list.list li span.date,
        ul.news-list.col li span.date { display: block; }
    /*
    ul.news-list.col li .img-frame {
        overflow:hidden;
        width: 100%;
        flex: 0 1 min-content;
        //flex-basis: min-content;
    }
    */
    /*
    ul.news-list.col li .img-frame div { transition: transform .2s; }
    ul.news-list.col li .img-frame div:hover {
        transform:scale(1.07);
    }*/
    ul.news-list.col li .image {
        width: 100%;
        height: 0;
        padding-bottom: 67%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

    }
    ul.news-list.col li .title { font-weight: 700; margin: 5px 0;  }
    ul.news-list.col li .textarea { width: 100%; padding: max(10px, 2vw); }
  
    
/************************************************************************************************************
    :ExternalContent
************************************************************************************************************/ 
iframe.externalContent {
    width: 100%;
    height: 500px;
}
    

/************************************************************************************************************
    :Map and text
************************************************************************************************************/ 

.map-and-text {
    display: flex;
    min-height: 33vmin;
}

.map-and-text .left { flex: 0 1 40%; padding-right:2vw; }
.map-and-text .right { flex: 0 1 60%; }
.map-and-text .right iframe { width: 100% !important; height: 100% !important;}



/************************************************************************************************************
    :ExpandableContent
************************************************************************************************************/ 

.expandableContent .readMoreBtn i { 
    transition: transform .3s ease-in-out;
}
.expandableContent.open .readMoreBtn i {
    transform: rotate(180deg);
}
.expandableContent .expCont {
    max-width: var(--content-running-text-width);
    margin-left: auto;
    margin-right: auto;
    transition: height .5s;
    height: 0;
    overflow: hidden;  
}
    .expandableContent.open .expCont {
        height: auto;
    }

    /*.expandableContent.classic { position: absolute; z-index: 10; background-color: var(--puff-bg-color); left: 0; }*/
    .expandableContent.open .open-text { display: none; }
    .expandableContent .close-text {display: none; }
    .expandableContent.open .close-text { display: inline-block; }
    .expandableContent .classicExpBtn div { min-width: 185px; }

    .popup-section { display: none; width: 100%; position: absolute; }
    .popup-section .popup-item { display: none; }
    .popup-section.show,
    .popup-section .popup-item.show { display: block; z-index:1000; }    
    .popup-section .popup-item .inside { position: absolute; background-color: var(--puff-bg-color); color: var(--puff-text-color); border-radius: var(--border-radius);padding: var(--puff-text-padding); z-index:1000; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
    .popup-section .popup-item.center .inside { /*left: 50vw; transform: translate(-50%,-50%); */
    top: 50%;
    position: absolute;
    left: 50%;
    margin-right: -50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align:center;    
    z-index: 2;
    overflow:auto;   
    word-wrap:break-word;
    word-break:break-all;
    max-height: 80vh;
    max-width: 600px;
    width: 95%;
    }
    
    .popup-section .popup-item .inside p { color: var(--puff-text-color); }
    .popup-section .popup-item.center  .outside {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        content: ' ';
        background: rgba(0,0,0,.5);
    }
    /*.popup-section .popup-item.center .outside { display: flex; justify-content: center; align-items: center; text-align: center; }*/
    
    

/************************************************************************************************************
    :PuffFaq
************************************************************************************************************/ 

.puffFaq {}


/************************************************************************************************************
    :PuffFaqSerach
************************************************************************************************************/

.puffFaqSearch .searchTbx {
}

/************************************************************************************************************
    Cookies
************************************************************************************************************/

.cookies {
    text-align: center;
    margin: 4vw auto;
    max-width: 1400px;
}


.cookies .frame {
    
    margin: 2vw;
}

.cookies .contents {
    
    border-radius: 5vw;
    border: max(4px,0.5vmax) solid #555;  
    padding: 4vw;
    padding: 4vw;
}

.cookies legend {
    font-size: max(18px, 2vw);
}

.cookies p, .cookies a {
    font-family:'Times New Roman', Times, serif;
    font-size: max(16px, 1vw);
}




/*************************************************************************************************************
    Media queries
*************************************************************************************************************/

    
@media screen and (max-width: 1600px) {
    ul.news-list.col li.col4 { flex: 0 1 33.33%; }    
}
    
@media screen and (max-width: 1400px) {
   #wrapper {
    }
    

    #my-menu a {
        --font-size-menu-item: 3.0vw;
    }

     .mainBodyContent {
        /*margin-top: 4vw; */
    }
    ul.news-list.col li.col3 { flex: 0 1 50%; }
    
}


@media screen and (max-width: 1200px) {
   #wrapper {
    }
    #footer {
        /*--font-size-footer-tiny:    1.6vmax;
        --font-size-footer-small:   2vmax;
        --font-size-footer-large:   2.2vmax;*/
    }
    /*#logo img { height: auto; max-height: 3vmax; }*/
    #my-menu a {
        --font-size-menu-item: 3.0vmax;

    }
    .mm-menu .mm-listview > li.mm-selected > a {
        /*padding-top: 2.4vw;*/
    }
    ul.news-list.col li.col4 { flex: 0 1 50%; }    
    ul.news-list.col li.col5 { flex: 0 1 25%; }
    
}

@media screen and (max-width: 1000px) {
    #footer {        
        --footer-content-width: 80%;
    }
    
    
    ul.news-list.col li.col5 { flex: 0 1 33.33%; }
    #wrapper {
        --content-h-margin:         5vw;
        --neg-content-h-margin:     -5vw;        
    }

    .movie .textarea {
        width: 100% !important;
    }
}

@media screen and (max-width: 900px) {
    .map-and-text { flex-wrap: wrap; }
    .map-and-text .left { flex: 0 1 100%; padding-right:2vw; }
    .map-and-text .right { flex: 0 1 100%; min-height: 73vmin;}

    .simplifiedPuffPage.userPage { width:100%; }
    .full-menu-type1 { display:none; }
    .hamburger-menu-type1 { display:inline-flex; }
    .logoWrapper { justify-self:start; width:auto;}
    #logo {align-items:start; width:auto;}
}



@media screen and (max-width: 800px)
{
    #my-menu a {
        --font-size-menu-item: 6.5vmin;        
        margin: 1vmin 0;
    }

    
    

    
    #footer {
        --footer-content-width: 90%;
    }
    
    .wideBtn { padding: 10px 20px; }
    .topTextWidth {width: 90%;}

    #footer .inject-logo {
        width: 70vmin;
    }

    .mainBodyContent .extraMarginBottom {
        margin-bottom: 8vw; 
        height: 1px;
    }
    
    /*.content					{width:auto; height:auto; min-height:100px; margin:0; padding:0;}
    .content .inner             {min-height:100px; padding-bottom:2%;}
    .submenu				    {display:none;}
    
    .content .inner	            {width: auto; height:auto; margin:0; padding:10px; }
    .contentright               {float:none; width:100%;}

*/

    
    .flexslider .slides  li     {height:400px !important;}
    
    #start-content              {width:97%; height:auto; margin:0; padding:0 1.5% 0 1.5%;}
    #start-puffs                {width:66%; height:auto; margin:0 0 2% 0;}
    #start-news                 {width:32%; height:auto; margin:0 0 2% 0;}
    
	table.responsive-table, 
	table.responsive-table thead, 
	table.responsive-table tbody, 
	table.responsive-table th, 
	table.responsive-table td, 
	table.responsive-table tr           {display:block; border:0;}
	table.responsive-table thead tr     {position:absolute; top:-9999px; left:-9999px;}
	table.responsive-table tr           {border:1px solid #ccc;}
	table.responsive-table td           {padding:4px 6px;}
	table.responsive-table td           {border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; white-space:normal; text-align:left !important;}
 	table.responsive-table td:before    {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;}
	table.responsive-table td:before    {content:attr(data-title);}

    
    
}

@media screen and (max-width: 700px) {
    #wrapper {
    }
    .wideBtn { padding: 2.5vw 3.6vw; }
    #footer .footer-row { flex-wrap: wrap; }
    #footer .footer-item { flex: 1 1 100%; margin: 4vw 0; word-break:break-word; white-space: normal;}
    ul.news-list.col li.col3 { flex: 0 1 100%; }
    ul.news-list.col li.col5 { flex: 0 1 50%; }
    
}

@media screen and (max-width: 600px)
{    
    .fullmenu ul li { width: 100%; margin: 0 0px;}
    .fullmenu .menuSeparator { padding-right: 0px; display:inline-block;}
    /*.fullmenu .menuSeparator a:after { float: none; }*/
    .fullmenu .hideItem {
        max-height: 0;
        display: block !important;
        visibility: collapse;
        pointer-events: none;
        margin: 0;
        padding:0;
        height:0;
        
    }
        .fullmenu .hideItem.visible {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            
            height:auto;
            transition: , max-height 1.3s ease-in-out;
        }

    #footer .footer-row:nth-child(2) {
        flex-wrap: wrap;
    }
    
   
     .header .inner {
        grid-template-columns: auto 2fr auto;
        grid-auto-flow:row;
        
    }
    .header #headerExtraButtonPanel { order: -1; grid-column: 1 / -1; grid-row: 1; margin-right: 2vw;}
    


    #start-puffs                        {width:100%;}
    #start-puffs .puffitem .rub, 
    #start-puffs .puffitem a .rub       {font-size:12px;}
    #start-puffs .puffitem .content p, 
    #start-puffs .puffitem a .content p {line-height:14px; font-size:11px;}
    #start-puffs .puffitem .image, 
    #start-puffs .puffitem a .image     {height:120px;}
    
    #start-news         {width:100%; margin-top:2%;}
    #start-news h3      {padding:0 0 1.5% 0;}
    #start-news ul li   {margin:0 0 1.5% 0;}
    #start-news ul li a {background-color:#f7f7f7; padding:1.2% 1.2% 1.2% 2%;}
    
}

@media screen and (max-width: 500px) {

    #my-menu a {
        --font-size-menu-item: 8.0vw;
    }
    
    ul.news-list.col li.blockopt { margin-bottom: var(--puff-row-gap-single-col); }

    ul.news-list.col li.col2.blockopt,
    ul.news-list.col li.col3.blockopt,
    ul.news-list.col li.col4.blockopt,
    ul.news-list.col li.col5.blockopt { flex: 0 1 100%; }
    
    
    ul.news-list.col li.listopt { flex: 1 1 100%; border-top: 1px solid #eeeeee; padding-top: 0; padding-bottom:0; }

    ul.news-list.col li.col2.listopt a,
    ul.news-list.col li.col3.listopt a,
    ul.news-list.col li.col4.listopt a,
    ul.news-list.col li.col5.listopt a { padding-top: 0; display: flex; flex-direction: row; }

    ul.news-list.col li.listopt a .image { flex: 1 1 40%; padding-bottom: 23%;background-size: contain; height:100%;}
    ul.news-list.col li.listopt a .textarea { flex: 1 1 60%; }       
    
}


@media screen and (max-width: 450px) {

    .orderFirstOn450 {
        order: -1;
        flex: 1 0 100% !important;
    }
    .width50On450 {
        flex: 1 0 50% !important;
    }
    .flexMultilineOn450 {
        flex-wrap: wrap;
    }
}    




@media screen and (max-width: 300px) {
    
    .topTextWrapper { width:90%; }
    h1 {color: black;} /* dummy, do not remove */
}



/*************************************************************************************************
    Header, Menu 
*************************************************************************************************/

@media screen and (max-height: 550px) and (orientation: landscape)  {

            
    body, #wrapper {                
        /*--header-default-height:    clamp(48px,13vmin, 60px);*/
        /*--header-icon-size:         clamp(30px,9vmin, 45px);*/
    }
    .mm-navbar .mm-btn:last-child {
        height: clamp(48px,13vmin, 60px);
    }
    .logoWrapper { margin-right: auto; margin-left: auto; }
    
    .parallax {
        background-attachment: scroll;
    }
    #my-menu a { --font-size-menu-item: 5vh !important; }
    /*.socialMediaList i {transform: scale(0.90);}*/
}

/*************************************************************************************************
    Header, Menu 
*************************************************************************************************/

@media screen and (max-width: 550px) and (orientation: portrait)  {
   
    body, #wrapper {
        /*--header-default-height: clamp(50px,14vmin, 60px);*/
        --header-icon-size: clamp(20px, 9vmin, 28px);
        --header-icon-size: clamp(20px, 9vmin, 28px);
    }
    #logo img {
    
        min-height: unset;
    }
    .mm-navbar .mm-btn:last-child {
        height: clamp(50px,15vmin, 80px);
    }
    .logoWrapper { margin-right: auto; margin-left: auto; }
    /*.header #responsive-menu-btn .bar { color: red; background:red;} */
    .socialMediaList i {transform: scale(0.90);}
    .parallax {
        background-attachment: scroll;
    }
}

/*************************************************************************************************
    Header, Menu 
*************************************************************************************************/
@media screen and (max-height: 340px) and (orientation: landscape)  {
    
   body, #wrapper {
/*        --header-default-height: clamp(48px,13vmin, 60px);*/
        /*--header-icon-size: clamp(20px,7vmin, 35px);*/
    }
    
    .inner .menuButtons { flex: 0 1 40px; }
    .langSel .list { left:0; right:unset;}
    
    #my-menu a { margin: 0 0 !important; 
                 /*--font-size-menu-item: 5vh !important;*/ }
    .mm-menu .mm-listview > li.mm-selected > a,
    .mm-listview > li > a, .mm-listview > li > span { padding-top: 1.3vw; }
}
/*************************************************************************************************
    Header, Menu 
*************************************************************************************************/

@media screen and (max-width: 340px) and (orientation: portrait)  {
   
    #wrapper {                
        /*--header-default-height:    max(50px, 16vmin);*/
        --header-icon-size:         max(20px, 6vmin);            
    }    
    #logo img {
        /*height: auto;*/
        min-height: unset;
    }
    .inner .menuButtons { flex: 0 1 40px; }
    .langSel .name  { display: none; }
    .langSel .list { left:0; right:unset;}
}


@media screen and (max-width: 300px) {

    .puffFaqSearch .searchField { flex-wrap: wrap; justify-content: center;}
    .puffFaqSearch .searchTbx { flex: 1 1 100%; }
    .puffFaqSearch .searchBtn { }
   
}