@charset "UTF-8";

*, *:before, *:after{ 
 box-sizing: border-box
}

body, input, select, textarea, button{
 font-size: 1rem
}

h1, 
p.h1,
.h1{
 font-size: 2.75rem
} 
h1.alternative, 
p.h1.alternative,
.h1.alternative{
 font-size: 2.25rem
}
h2,
p.h2,
.h2{
 font-size: 2.125rem
}
h3,
p.h3,
.h3{
 font-size: 1.75rem
}
h4,
p.h4,
.h4{
 font-size: 1.375rem
} 
h5,
p.h5,
.h5{
 font-size: 1.25rem
}
h6,
p.h6,
.h6{
 font-size: 1.125rem
}

small,
p.small{
 font-size: 0.875rem
}

/*
 Images
 */

.img-bg{ display: block; width: 100%; padding-bottom: 75%; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover }
.img-responsive, .img-fill{ display: block; max-width: 100%; height: auto }
.img-fill{ width: 100% }

picture.img-object-fit{ 
 display: block; 
 width: 100%; 
 height: 100%
}
picture.img-object-fit img{
 width: 100%;
 height: 100%; 
 object-position: center 
}
picture.img-cover img{
 object-fit: cover
}
picture.img-contain img{
 object-fit: contain
}

/*
 SVG
 */

.embeded-svg.svg-responsive svg{ width: 100%; height: auto }

/*
 Responsive iframe, object, embed
 */
 
.responsive-wrapper{
 position: relative; 
 padding-bottom: 56.25%; 
 padding-top: 30px; 
 height: 0; 
 overflow: hidden
}
.responsive-wrapper iframe,
.responsive-wrapper object, 
.responsive-wrapper embed{
 position: absolute; 
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%; 
 height: 100%
}
 
/*
 Modal
 */

.jquery-helpers-modal{
 min-width: 200px;
 min-height: 100px;
 background-color: #00000090
}
.jquery-helpers-modal.cover{
 position: fixed;
 top: 0;
 left: 0;
 min-width: 100%;
 min-height: 100%;
 overflow: auto
}
.jquery-helpers-modal.center{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.jquery-helpers-modal>a{
 display: block;
 width: 50px;
 height: 50px;
 background-color: transparent
}
.jquery-helpers-modal>a.cross{
 top: 20px;
 right: 20px
}

/*
 Alert
 */

.jquery-helpers-alert{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 300px;
 min-height: 100px;
 padding: 0;
 text-align: center;
 background-color: transparent
}
.jquery-helpers-alert.fixed-bottom{
 top: auto;
 left: 0;
 right: 0;
 bottom: 0;
 transform: none;
}
.jquery-helpers-alert.wide{
 width: calc( 100% - 40px );
 max-width: 800px
}
.jquery-helpers-alert.loading>div{
 opacity: 0	
}
.jquery-helpers-alert .header p, 
.jquery-helpers-alert .message p{
 margin: 0
}
.jquery-helpers-alert .header a.cross{
 top: 50%;
 right: 10px;
 margin-top: -30px
}
.jquery-helpers-alert .header{
 position: relative;
 padding: 14px 20px
}
.jquery-helpers-alert .message{
 padding: 0 20px;
 margin-top: 14px
}
.jquery-helpers-alert .ajaxbox{
 height: calc( 100vh - 333px );
 min-height: 100px;
 margin-right: 1px;
 padding-left: 20px;
 text-align: left;
 overflow: hidden;
 overflow-y: scroll
}
.jquery-helpers-alert .message+.ajaxbox{
 height: calc( 100vh - 444px );
 margin-top: 20px;
}
.jquery-helpers-alert .ajaxbox>div{
 padding-top: 25px;
 padding-bottom: 25px 
}
.jquery-helpers-alert .controls{
 padding: 24px 20px 20px 20px;
}
.jquery-helpers-alert .controls.align-left{
 text-align: left
}
.jquery-helpers-alert .controls.align-right{
 text-align: right
}

@media ( min-width: 768px ){
	
 .jquery-helpers-alert .header,
 .jquery-helpers-alert .message{
  padding-left: 50px;
  padding-right: 50px
 }
 
 .jquery-helpers-alert .ajaxbox{
  padding-left: 50px;
  padding-right: 30px;
 }
 
}

@media ( min-height: 668px ){
	
 .jquery-helpers-alert .ajaxbox{
  min-height: 200px;
  max-height: calc( 100vh - 600px );
 }
 
}

/*
 Alert cookie policy
 */
 
.jquery-helpers-alert.cookie-policy .header{
 border-bottom: none
}
.jquery-helpers-alert.cookie-policy .controls{
 padding-top: 0
}
.jquery-helpers-alert.cookie-policy .controls .btn{
 width: 140px;
 margin-top: 20px
}

@media ( min-width: 768px ){
 
 .jquery-helpers-alert.cookie-policy{
  display: flex;
  text-align: left
 }
 .jquery-helpers-alert.cookie-policy .header{
  flex: 1 1 auto;
  max-width: 100%
 }
 .jquery-helpers-alert.cookie-policy .controls{
  flex: 0 0 auto
 }
 .jquery-helpers-alert.cookie-policy .controls .btn{
  width: 160px
 }
 
}

/* 
 Hamburger
 */
 
.hamburger{
 position: relative;
 display: block;
 width: 60px;
 height: 80px;
 background-color: transparent
}
.hamburger span, .hamburger span:before, .hamburger span:after{
 position: absolute;
 display: block;
 width: 30px;
 height: 3px;
 background-color: transparent
}
.hamburger span{
 top: 50%;
 left: 50%;
 margin-top: -1px;
 margin-left: -15px;
}
.hamburger span:before{
 content: '';
 top: -10px 
}
.hamburger span:after{
 content: '';
 top: 10px 
}

@media ( min-width: 768px ){
	
 .hamburger{
  height: 60px
 }
 
}

.popupmenu-container{
 position: relative
}
.popupmenu-container .popupmenu{
 position: absolute;
 top: 100%;
 right: 0;
 display: block;
 height: 0;
 overflow: hidden;
 min-width: calc( 100% + 30px );
 opacity: 0;
 background-color: transparent;
 z-index: 999;
 transition: ease-in opacity 300ms
}
.popupmenu-container .popupmenu>ul{
 margin-top: 60px;
 background-color: #e0f3fd;
 box-shadow: 0 16px 16px #00000029;
 transition: ease-out margin-top 300ms
}
.popupmenu-container:hover .popupmenu{
 height: auto;
 overflow: visible;
 opacity: 1
}
.popupmenu-container:hover .popupmenu>ul{
 margin-top: 0px;
}
.popupmenu-container:hover .popupmenu>ul li{
 background-color: transparent;
 transition: ease background-color 500ms
}
.popupmenu-container:hover .popupmenu>ul li:hover, 
.popupmenu-container:hover .popupmenu>ul li.active{
 background-color: #fff;
}
.popupmenu-container:hover .popupmenu>ul li>a[href]{
 color: #313640;
 transition: ease color 500ms;
}
.popupmenu-container:hover .popupmenu>ul>li>a[href]{
 height: 50px;
 line-height: 50px;
 padding-left: 20px;
 padding-right: 20px 
}

@media ( min-width: 576px ){
	
 .popupmenu-container .popupmenu>ul{
  border-radius: 10px
 }
 .popupmenu-container:hover .popupmenu>ul{
  margin-top: 10px;
 }
 .popupmenu-container:hover .popupmenu>ul>li:first-child{
  border-radius: 10px 10px 0 0
 }
 .popupmenu-container:hover .popupmenu>ul>li:last-child{
  border-radius: 0 0 10px 10px
 }	
	
}



/* 
 Tick, Cross, Arrow 
 */

a.tick, 
a.cross, 
a.arrow,
span.tick,
span.cross,
span.arrow{
 display: block; 
 position: absolute; 
 width: 50px; 
 height: 50px; 
 z-index: 20
}
a.cross:before,
a.cross:after,
span.cross:before,
span.cross:after{
 display: block; 
 content: ''; 
 width: 30px; 
 height: 5px; 
 position: absolute; 
 top: 50%;
 left: 50%;
 margin-top: -1px;
 margin-left: -14px;
 background-color: #000; 
 border-radius: 2px;
 pointer-events: none
}
a.cross:before,
span.cross:before{
 transform: rotate(45deg) 
}
a.cross:after,
span.cross:after{ 
 transform: rotate(-45deg) 
}
a.arrow:before,
span.arrow:before,
a.arrow.lined:after{
 content: ''; 
 display: block; 
 position: absolute; 
 pointer-events: none
}
a.arrow:before,
span.arrow:before{
 width: 30px; 
 height: 30px; 
 top: 50%; 
 border: solid transparent 0px; 
 margin-top: -15px;
 transform: rotate(45deg)
}
a.arrow.lined:after,
span.arrow.lined:after{
 width: 39px; 
 height: 1px; 
 top: 50%; 
 background-color: transparent 
}
a.prev.arrow:before, 
a.left.arrow:before,
span.prev.arrow:before, 
span.left.arrow:before{ 
 left: 6px; 
 border-width: 0 0 2px 2px 
}
a.prev.arrow.lined:after,
span.prev.arrow.lined:after{
 left: 6px 
}
a.next.arrow:before,
a.right.arrow:before,
span.next.arrow:before,
span.right.arrow:before{
 right: 6px; 
 border-width: 2px 2px 0 0 
}
a.next.arrow.lined:after,
span.next.arrow.lined:after{
 right: 6px 
}
a.arrow.labeled,
span.arrow.labeled{
 display: inline-block;
 line-height: 50px;
 width: auto
}
a.arrow.labeled.left,
span.arrow.labeled.left{
 padding-left: 62px
}
a.arrow.labeled.right,
span.arrow.labeled.right{
 padding-right: 62px
}
a.arrow.labeled.left:before, 
a.arrow.lined.labeled.left:after,
span.arrow.labeled.left:before, 
span.arrow.lined.labeled.left:after{
 left: 6px
}
a.arrow.labeled.right:before, 
a.arrow.lined.labeled.right:after,
span.arrow.labeled.right:before, 
span.arrow.lined.labeled.right:after{
 right: 6px
}

/*
 Google translator
 */
 
.footer .translator-- a,
.translator-- a{
 color: #fff;
 text-decoration: none
}
.translator--{
 position: relative
}
.translator-- a.translator-button{
 display: inline-block;
 height: 50px;
 line-height: 49px;
 white-space: nowrap;
 padding: 0 20px 0 14px;
 background-color: #444;
}
.translator-- a.translator-button span{
 display: inline-block;
 float: left;
 width: 40px;
 height: 100%;
 background-image: url( "../images/worldicon.svg" );
 background-repeat: no-repeat;
 background-position: center left;
 pointer-events: none
}
.translator-- .translator-context-menu{
 display: none
}
.translator-- .translator-context-menu.show-translator-context-menu{
 display: block;
 position: absolute;
 bottom: 100%;
 left: 0;
 min-width: 100px;
 padding: 10px 20px;
 white-space: nowrap;
 background-color: #444
}
.translator-- .translator-context-menu.show-translator-context-menu ul li+li{
 border-top: solid #999 1px 
}
.translator-- .translator-context-menu.show-translator-context-menu a{
 display: block;
 padding: 10px
}
.translator-- .translator-context-menu.show-translator-context-menu a[data-lang]::before{ 
 content: attr( data-lang );
}

@media ( min-width: 767px ){
	
 .translator-- .translator-context-menu.show-translator-context-menu{
  left: auto; 
  right: 100%;
  margin-bottom: -25px
 }
	
}