/* GLOBAL LAYOUT AND STYLING */
body {
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1.15rem;
	color: #3b3b3b;
	background: #f6f4f3;
}

body.page-node-type-accommodation {background: #FFF;}
body.user-logged-in .layout-container {margin:0;}
header {
	/*position: sticky;
    top: 0;*/
    width: 100%;
    transition: all 0.5s ease;    
    background-color: #FFF;
    z-index: 999;
    border-bottom: solid 1px #e7e7e7;}

/*header.shrink {box-shadow: 0px 4px 10px rgba(0,0,0,0.2);}*/

/* not fixed when logged in */
body.user-logged-in header {
  position: relative;
}
.region-footer {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
}

.region-header {
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
    flex-direction: row;
    align-items: center;
}

p {
	margin: 0 0 17px 0;
	line-height: 1.5;
}

a {text-decoration:none; color:inherit;}

p a, main a {
	color: #1699c3;
	text-decoration: none;
}

main { padding-bottom: 40px;}

p a:hover, main a:hover {text-decoration:underline;}

h1 {
	    font-size: 2.2em;
  margin-top: 0;
  margin-bottom: 15px;
      line-height: 2.3rem;
}
h2 {
   margin-bottom: 12px;
       line-height: 1.8rem;
}

h3 {
margin-bottom: 10px;
    line-height: 1.5rem;
}



/*Filter styling algemeen*/
.view-filters {
    background-color: #f5f5f5;
    padding: 0;
    box-sizing: border-box;
}

.form-type-select {
    display: inline-flex;
    flex-direction: column;
}

.view-filters label {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    }
    
 .view-filters select {
    background-color:#FFF;
    border: solid 1px #CCC;
    padding: 6px 10px;
    border-radius: 4px;
}   
    
/*accommodatie detailpagina*/

.page-node-type-accommodation :is(h1, h2, h3, h4) {
  color: initial;
}

.view-accedet {
    margin-top: 50px;
}

.accoheader {
    display: flex;
    justify-content: space-between;
    padding-left: 15px; 
    padding-right: 15px;
        max-width: 1110px;
    margin: auto;
}


.accotitle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
}

a.accoactions {
  white-space: nowrap;
  align-self: start;   /* altijd rechtsboven */
}

.acsubtit {
    margin-bottom: 15px;
        display: flex;
            align-items: center;
            font-size: 16px;
                flex-wrap: wrap;
}
a.adlocation {
    font-weight: bold;
        margin-left: 6px;
}
.adcountry {
    margin-right: 10px;
}

.accophotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px; 
     margin-bottom: 20px;
     padding-left: 15px; 
    padding-right: 15px;
        max-width: 1110px;
    margin: auto;

}

.view-accedet .startingprice {margin-bottom:20px;}

.accophotos img {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    border-radius: 5px;
}

a.profile {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

a.profile span {
    max-width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.profile:hover {
    text-decoration: none;
}

a.viewprofile {
	  display: flex;
	  flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    border: solid 1px #c4d0e3;
    background-color:#FFF;
    padding: 8px 10px;
    font-size: 14px;
    align-items: center;    
        border-radius: 3px;
        margin-bottom: 10px;
}

div.propcta a.viewprofile {
	border-radius: 300px;
    margin-bottom: 13px;
        padding: 12px 18px; 
}

div.propcta a.viewprofile span {
	    background-color: #f16082;
    color: #FFF;
    font-weight: normal;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 3px;
    }

a.viewprofile:hover  {
	text-decoration:none; 
	    background-color: #f0f6ff;
}


.profaddress {
	  max-width: 15ch;   /* ≈ 20 characters */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
      color: inherit;
          color: initial;
  
}


.adcountry:before {
	content:'';
	 background-image: url(/sites/social-stays.com/themes/custom/images/sprite.svg);
    width: 19px;
    height: 19px;
    display: inline-block;
    background-size: 1000px;
            background-position: 0 -206px; 
}

.adcountry.ES:after {
	content:'Spain';
}

.profaddresswrap {
    display: flex;
        align-items: center;
}
.profaddresswrap:before {
    content: '';
    background-image: url(/sites/social-stays.com/themes/custom/images/sprite.svg);
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: 800px;
        margin-right: 7px; 
        background-position: 0 0;
}

a.viewprofile.proface .profaddresswrap:before {background-position: -60px 0;}
a.viewprofile.proftik .profaddresswrap:before {background-position: -98px 0;}

a.viewprofile span {
     font-weight: bold;
    font-size: 13px;
    color: #1699c3;

}


.propcontent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
   padding-left: 15px; 
    padding-right: 15px;
        margin-bottom: 30px;
        max-width: 1110px;
    margin: auto;
        margin-bottom: 30px;

}

.propinfo,
.propcta {
  min-width: 0; 
}


.accometa ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
      flex-wrap: wrap;
      gap: 0.2rem; 
}
.accometa ul li {
   margin: 0;
  padding: 0;
      line-height: 1rem;
}

.pdsocials {
       border: none;
    padding: 15px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #f0f6ff;
}

.pdsocials a.housetour {
    margin: auto;
    display: block;
    width: fit-content;
    margin-bottom: 27px;
    background-color: #4e9363;
    padding: 10px 20px;
}

.pdsocials h3 {
    margin: 8px 0 2px 0;
    font-size: 16px;
    line-height: 1.2rem;
}

.pdfac ul {    list-style: none;
    padding: 0;
       margin: 0 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;}
    
.pdfac ul li {
	margin: 0;
    padding: 0;
    line-height: 1rem;
    white-space: nowrap;
}

.pdfac ul li:before {
    content: '✔';
    color: green;
    font-weight: bold;
    margin-right: 5px;
}


.pdcm {
    display: flex;
    gap: 10px;
    margin-bottom: 11px;
}

.pdcm img {
  width: 65px;
    height: auto;
    border-radius: 100%;
    border: solid 2px #FFF;
}


/*spotlight accommodatie homepage*/

.view-accos.view-display-id-block_2 .view-content {
	display:block;
}

.spotlight {
	display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  	gap: 1rem;
        border-radius: 8px;
    background-color: #1699c3;
    padding: 20px;
    color:#FFF;    
    background-image: url(/sites/social-stays.com/themes/custom/images/bannerbg.svg);
    background-position: bottom center;
    background-size: cover;
        margin-bottom: 60px;
}

.spotlight img {
 border-radius: 40px;
    width: 250px;
    height: 250px;
    object-fit: cover;
    border: solid 2px #FFF;
    transform: rotate(4deg);
    transition: transform 0.25s ease;
}

.spotlight img:hover { transform: scale(1.04);}

.sp1 {
    text-align: center;
    margin: auto;
}

.sp2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.sp3 {
  display: flex;
    justify-content: center;
    border: solid 1px #ffffffa3;
    padding: 18px;
    transform: rotate(-8deg);
    border-radius: 40px;
}


.sp3t {
    position: absolute;
    bottom: 32px;
    font-size: 13px;
    transform: rotate(4deg);
    color: #1c1d1e;
    background-color: #fffbff;
    padding: 3px 8px;
    border-radius: 100px;
}

.spotlight .accity:before {
	background-position: 1px -164px;
	    scale: none;
}

.spotlight .aclocation {    justify-content: center;
margin-top: 10px; 
		}

.spotlight h3 {margin-bottom: 20px;      margin-top: 18px;}

.spotlight h2 {
    background-color: #FFF;
    width: fit-content;
    margin: auto;
    color: #1699c3;
    font-size: 22px; 
    padding: 10px 20px;
    border-radius: 34px;
}

.spotlight .startingprice {
    margin: 10px 0 20px 0; 
}

/*CARDS*/


/*basic card*/

.view-cards .view-content {display: -webkit-flex;
    flex-wrap: wrap;}

.view-cards .row3 {
	margin: 1.2%;
	 width: 30.93%;
	} 

.card {background-color: #f5f5f5; transition: all .1s ease 0s;border-radius: 2px; position: relative;}
.skipashome .card {background-color: #FFF;}
.card:hover { box-shadow: 0 1px 10px rgba(0,0,0,.3);}
.view-cards img {height:auto; width:100%; max-width:100%;float: left;}
.view-cards h3 {margin: 4px 0 8px 0;
    font-size: 22px;
  }
.cardwrap {padding: 10px 20px;}    
.cardimgwrap {position:relative;}
.cardimgwrap a {display: inline-block; position: relative; width:100%;} 
.cardlabel {       position: absolute;
    bottom: 0;
    right: 0;
    background-color: #cfde55;
    color: #788037;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 10px;
}
.cardsub {line-height: 22px;font-size: 15px;min-height: 45px;}
.card a.knop {float:right;    margin: 0 20px 20px 0; /*position: absolute;*/
    right: 0;
    bottom: 0;}
.card a.knop:hover {text-decoration:none;}


/***boekingsknoppen***/

/*boekingsknop*/

.view-boekknop {padding-left:15px; padding-right:15px;}
.view-boekknop:after {
    display: table;
    clear: both;
    content: "";}

.view-boekknop .row3 {padding:2% 3%;}

a.bk {
    position: relative;
              display: inherit;        
}

a.bk:hover .bkteas img {transform: scale(1.05);}
a.bk:hover .bkq {text-decoration:underline;} 

.bkteas {overflow: hidden;}
.bkteas img {width:100%;height:auto;transition: all .2s ease-in-out; float:left;border-top-left-radius: 3px;border-top-right-radius: 3px;}

.bkiwrap {position:relative;}

.bkplaats { position: absolute;
    bottom: 0;
    left: -5px;
        color: #FFF;
    font-size: 14px;
        text-align: center;
      background-color: #34ae5e;
    padding: 3px 6px;}

.bklogowrap  {height:90px; position:relative; border-left: solid 1px #c6d3df; border-right: solid 1px #c6d3df;}
.bklogowrap img {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 55px;
    width: auto;
    max-width: 150px;
    height: auto;}

.bkwrap {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    min-height: 61px;
      position: relative;
    background-color: #325386;
}

.bkq {
    font-size: 16px;
    font-weight:bold;
    color: #FFF;
      height: 61px;
      line-height:61px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: 17px;
}

.bklabel {
    background-color: #fc5c16;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    display: inline-block;
    padding: 3px 5px;
    position: absolute;
    left: -5px;
    z-index: 1;
    top: -9px;
}    

.bk .knop {
	position: absolute;
    bottom: 0;
    right: 15px;
    top: 0;
    margin: auto;
    height: 1.1rem;
    border-bottom: 0;
    font-size: 14px;
    text-transform: uppercase;
        padding: 9px 12px;
}

/*pager boekingsknoppen */

.pager a {
	padding: 12px 26px;
    background-color: #ff6f26;
    background-image: -webkit-linear-gradient(297deg,#ffa122,#ff6f26 95%);
    background-image: linear-gradient(153deg,#ffa122,#ff6f26 95%);
    color: #FFF !important;
    font-weight: bold;
    border-radius: 5px;
}

 .pager a:hover {background-color:#0981ca; }

 nav.pager {
	   float: left;
    width: 100%;
       box-shadow: 0 10px 10px -13px #767676;
    padding: 2px 0 20px 0;
    text-align: center;
    margin-top: 10px;
}

 li.pager__item.is-active {display:none;}
 .pager__items {padding:0;}

/*filter boekknop*/

.view-boekknop .views-exposed-form {
	padding: 0 2%;
    background-color: #e5f4ff;
        margin-bottom: 15px;
}

.view-boekknop  .form-type-radio {background-color: #FFF;
    float: left !important;
    padding: 6px 12px;
    border-radius: 26px;
    font-size: 14px;}
    
.view-boekknop  .form-type-radio:hover {background-color:#ffa;}    

.view-boekknop  label.option {padding: 5px 0px;cursor: pointer;}

/*Boekingsknop incl skipas*/

.view-bkskipas {float:initial;}
.view-bkskipas .view-footer {margin-top: 5px; margin-left:10px;}
.view-bkskipas .view-content {    display: flex;
    flex-direction: row;
    flex-wrap: wrap;}
/*styling per aanbieder */
.sunweb {background-color: #FDED00;}
.bizz {background-color: #009CEF;}
.trex {background-color: #DAEEFA;}
.summit {background-color: #16A8E0;}
.tui {background-color: #99CDFF;}

.view-bkskipas .view-header {
	text-align: center;
}
.view-bkskipas .view-header h2 {position:relative;text-transform: uppercase;    margin: 10px 0 20px 0!important;}

span.h2label {
    background-color: red;
    color: #FFF;
    padding: 4px;
    transform: rotate(-5deg);
    position: absolute;
    margin-left: 10px;
    top: -6px;
}

.bkstwrap {position: relative;}

.bkskipas img.image-style-bkskipas {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width:100%;
    height:auto;
}

.bkskipasrow {padding: 0 2%;
    box-sizing: border-box;
    width: 20%;
    margin:auto;}

a.bkskipas {
border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    display:inherit;
    position: relative;
      margin-bottom: 20px;
    
    }

a.bkskipas:hover .bkslabel, a.bkskipas:hover .bksacco {background-color:#222; color:#fff;transition: all 0.3s ease;}

.bkslogowrap {height: 110px;
    position: relative;}
    
.bkslogowrap img { max-width: 140px;
    max-height: 40px;
    width: auto;
    height:auto;
    position: absolute;
    bottom: 30px;
    top: 0;
    margin: auto;
        left: 0;
    right: 0;}    

.bksacco {position: absolute;
    bottom: 10px;
    background-color: #FFF;
    color: #222;
    border-radius: 5px;
    width: max-content;
    font-size: 14px;
    text-align: center;
       padding: 3px 5px;
    left: 0;
    right: 0;
    margin: auto;
    }

.bkslabel {    background-color: #FFF;
    border-radius: 12px;
    font-size: 13px;
    padding: 5px 7px;
    font-weight: bold;
    color: #404d64;
    position: absolute;
    top: 12px;
    width: max-content;
    text-align: center;
        margin: auto;
    left: 0;
    right: 0;}

.view-display-id-skihuur .bkslabel {    background-color: #FF0000;
    color: #FFF;
    top: -6px;
    right: -5px;
    left: inherit;
        transform: rotate(-5deg);} 
    

.bkskipasnote {
	color: #d91c8f;
    font-weight: bold;
    font-size: 13px;
    	padding-left:32px;
 	padding-right:15px;
 	 display: table;
    margin: auto;
    position: relative; 
}

.bkskipasnote:before {
	content: "";	
	-webkit-mask: url(../images/sprite.svg) 0px -301px;
    mask: url(../images/sprite.svg) 0px -302px;
    background-color: #d91c8f;
       width: 25px;
    height: 30px;
    position: absolute;
    left: 0;
    top: -9px;
}
   

.bkslabelskihuur {
    position: absolute;
    left: 0;
     margin: auto;
    top: 160px;
    width: 115px;
    background-color: #5d6c9b;
    color: #FFF;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 2px;
}   



/*gebruiker / user pagina's en formulieren*/

body.path-user {background-color:#FFF;}
body.path-user .region-content {max-width:1110px;margin:auto; padding-left:15px; padding-right: 15px;}
.field--type-address legend {font-weight:bold;}

form#node-accommodation-form {
    padding-left: 15px;
    padding-right: 15px;
}

/*user registration page*/
#block-custom-userregistration, #block-custom-gebruikerregistratie {
    margin-top: 50px;
    margin-bottom: 15px;
}

form#user-register-form {
    border: solid 1px #CCC;
    background-color: #f5f5f5;
    padding: 20px 30px;
    border-radius: 10px;
}

.node-accommodation-form .form-item-revision,
.node-accommodation-edit-form .form-item-revision {
  display: none;
}


div#block-custom-formulier {
    max-width: 1110px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}


/*aanvraagformulier accommodaties*/

div#block-custom-webform, .webform-confirmation, div#block-nlreq {
    margin: auto;
    max-width: 1110px;
    padding-left: 15px;
    padding-right: 15px;
}

.page-node-type-accommodation #block-custom-webform .webform-submission-reqacco-form, .webform-submission-nlreq-form {
	background-color: #f0f6ff;
border-radius: 10px;
padding: 20px 40px;
}

.accoactions .knop {display:block;}

/*Diversen social stays*/


#block-custom-local-tasks, body.user-logged-in form {
    max-width: 1100px;
    margin: auto;
    padding-left:15px;
    padding-right:15px;
} 

/*formulier algemeen*/



form div.form-item {
    margin-bottom: 10px;
}

.form-item label {
    width: 100%;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 2px;
     display: block;
    box-sizing: border-box;
}

div.form-type-checkbox label {
    display: inline;
    font-weight: normal;
}

form input {
        padding: 6px 6px;
    font-size: 16px;
    max-width: 100%;
    box-sizing: border-box;
}

input#edit-submit, input#edit-actions-submit {
    background-color: #f16082;
    color: #FFF;
    padding: 10px 24px;
    font-size: 16px;
    border: none;
    border-radius: 3pc;
}

input#edit-submit:hover {
    background-color: #e1496d;
}

div.description {    color: #888;
    margin-top: 3px;}
    
select.form-select {
    padding: 6px;
}

.messages--error {position:relative;}

.form--inline .form-item {margin-right: unset;}

/*Login form*/

.block-user-login-block {padding-left:15px; padding-right:15px; }

.block-user-login-block {
    border: solid 1px #CCC;
    max-width: 400px;
    margin: auto;
  padding: 20px 30px;
    background-color:#FFF;
        border-radius: 10px;
}
.user-login-form input.form-text {
  width: 100%;
  box-sizing: border-box;
}

.user-logged-in h1.logintitle:before {
	content: 'Your dashboard';	
}
.user-logged-in h1.logintitle span {display:none;}

body.user-logged-in.page-node-type-accommodation .view-id-accos.view-display-id-acco1 {display:none;}

a.editfunction {
    background-color: #000000;
    color: #fff !important;
    border-radius: 100px;
    padding: 6px 16px 6px 10px;
    width: fit-content;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

a.editfunction:hover {
	text-decoration:none;
	background-color: #f16082;
}


.user-logged-in .field--name-field-reqacco {display:none;}


/*accommodation list view - accommodatie overzicht*/
.view-accos {
	/*padding-left: 15px;
	padding-right:15px;*/ 
box-sizing:border-box;    
    }
    
.view-id-accos.view-display-id-acco1 {display:none;}
.user-logged-in .view-id-accos.view-display-id-acco1 {display:block;}


.view-accos .view-header {
    max-width: 1110px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.view-accos .view-filters {
	    background-image: url(/sites/social-stays.com/themes/custom/images/headerbg6.jpg);
background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.view-accos  div#edit-actions--2 {display:none;}
.view-accos .form-item, .form-actions {margin-top: 10px;    margin-bottom: 10px;}
.view-filters:before {
    content: 'Find your stay through social media';
    width: 100%;
    display: block;
    text-align: center;
    font-size: 31px;
    margin-bottom: 30px;
    padding-top: 55px;
    font-weight: bold;
    color:#FFF;
    text-shadow: 0 0 10px #00000078;
}

.page-node-845 .view-filters:before {
	content: 'Vind je accommodatie via Social Media';
}

.view-accos .view-filters form {    
        display: flex;
    }

.view-accos .form--inline.clearfix {
border: solid 1px #97877f3d;
box-shadow: 0 0 6px 0px #00000017;
    background-color: #FFF;
    margin: auto;
    border-radius: 100px;  
    margin-bottom: 50px;
    padding: 5px 30px; 
    display: flex;
    gap: 0 20px;
} 
 
.view-accos .view-content {
display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
        max-width: 1110px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
}

.view-accos .view-content .acco {
  width: 100%;
  box-sizing: border-box;
  padding:10px; 
  border-radius: 8px;
  background-color:#FFF;
  box-shadow: 0 0 9px 9px #00000003; 
}


.acco a {
    text-decoration: none;
    color: initial;
}

.acco a:hover {
    text-decoration: none;
    color: initial;
}

.accohead {
    display: flex;
    justify-content: space-between;
    padding: 0 5px 7px 5px;
    flex-wrap: wrap;
    gap: 10px;
}

.accohead img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-right: 10px;
    border: solid 2px #ffffff;
    box-shadow: 0 0 0px 1px #ef4970;
    object-fit: cover;
}  

a.accodet {
    font-size: 14px;
    color: #1699c3;
        display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.accoteaser img {
    height: 250px;
    object-fit: cover;
    box-sizing: border-box;
    width: 100%;
}


.acco h3 {
    color: #3c3c3c;
    width: 100%;
    display: flex;
    box-sizing: border-box;
       margin: 0 0 4px 0;
}

.accocontent {
  padding: 10px;
    box-sizing: border-box;
}

.accometa {
    margin-bottom: 13px;
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:7px;
}


.startingprice {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
}
.startingprice span {
	font-size: 14px;
	font-weight:normal;
	margin-left: 2px;
}


.aclocation {
    display: flex;
        font-size: 16px;
            margin-bottom: 5px;
}
.accountry {width: fit-content;}

span.ES:after {
    content: ', Spain';
    margin-left: 1px;
}


.hostloco {
    max-width: 1110px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom:30px;
}

.pdhost img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 100%;
    object-fit: cover;
}

.hostwrap {
		display: grid;
    grid-template-columns: 1fr 3fr;
        gap: 40px;
    align-items: start;
   }
   
.pdhostname {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
        margin-top: 7px;
}   
.pdhost {
    border: solid 1px #fbf4f4;
        box-shadow: 0px 3px 20px 0px #00000012;
    border-radius: 20px;
    padding: 30px 30px;
        display: flex;
    flex-direction: column;
    align-items: center;
}

.pdhost span {
    color: #8d8984;
    
}

.hostintro {
    border-bottom: solid 1px #e7e7e7;
    padding-bottom: 15px;
}

.pdshowmap {
    background-color: #fffdec;
    padding: 30px 30px;
    border-radius: 10PX;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    margin-top: 20px;
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;    
     background-image: url(/sites/social-stays.com/themes/custom/images/kaart-sample.jpg);
         background-size: cover;
         
}

a.pdshowmap:hover span {
	    transform: translate(0, -2px);	  
}
a.pdshowmap:hover { box-shadow: 0 0 1px #888;}  
  
.pdshowmap span {
    background-color: #FFF;
    box-shadow: 0 0 10px #00000017;
    padding: 10px 20px;
    border-radius: 100px;
     transition: transform 0.25s ease;
}

.pdshowmap:hover {background-color: #fffbd8;}   

a.pdshowmap {
    color: initial;
}
a.pdshowmap:hover {text-decoration:none;}



.scta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;      /* 👉 dit regelt het onder elkaar zetten */
}

.ctso .slogo {
  transform: scale(0.7);
  transform-origin: center;
      transition: transform 0.25s ease;
}
.ctso .slogo:hover {transform: scale(0.8);}

.ctso a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/*
.pdshowmap span:before {
	content: '📍';
	margin-right: 2px;
} */



/*
.accountry:before  {
	content: '';
    background-image: url(/sites/social-stays.com/themes/custom/images/sprite.svg);
     width: 30px;
    height: 20px;
    display: inline-block;
    background-size: 1000px;
    margin-right: 3px;   
    border-radius: 3px; 
}

.accountry.ES:before { background-position: 0px -62px;}
*/

.accity {text-transform: capitalize;}

.accity:before {
content: '';
    background-image: url(/sites/social-stays.com/themes/custom/images/sprite.svg);
    width: 13px;
    height: 18px;
    display: inline-block;
    background-size: 800px;
    margin-right: 3px;
    background-position: -106px -164px;
    scale: 0.8;
        float: inline-start;
}

/* dashboard interface*/

.hostactions {
margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hostactions a {
background-color: #f16082;
    color: #FFF;
    padding: 12px 22px 12px 18px;
    display: flex;
    font-size: 15px;
    border-radius: 100px;
    line-height: 1em;
}

.hostactions a:hover {
	background-color:#e1496d;
	text-decoration:none;
}

span.function {
    font-size: 18px;
    font-weight: bold;
}

/*house tour*/

a.housetour {
    background-color: #f16082;
    color: #FFF;
    line-height: 1rem;
    padding: 7px 9px;
    font-size: 14px;
    border-radius: 3px;
}

a.housetour:hover {background-color: #fb7191; color:#FFF; text-decoration:none;}

a.housetour .slogo {
background-position: -34px -174px;
    background-size: 500px;
    width: 19px;
    height: 15px;
}

/*social promo*/



.promoheader {
    text-align: center;
    margin-bottom: 30px;
}

.psubtit {
max-width: 80%;
    margin: auto;
    font-size: 16px;
    line-height: 23px;
    color: #777;
}

.promoso {
 display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}


.promit{
  display: flex;
      flex-direction: column;
  align-items: center; 
  gap: 10px;            
     border-radius: 8px;
    background-color: #FFF;
       padding: 40px 30px;
}

.promit .slogo {
	
	border: solid 1px #ffffff;
    padding: 10px;
    border-radius: 100%;
    box-shadow: 3px 3px 17px #00000029;
}

.slogo {
	content: '';
    background-image: url(/sites/social-stays.com/themes/custom/images/sprite.svg);
        width: 41px;
    height: 41px;
    display: inline-block;
    background-size: 1400px;
    background-position: 0 0;    
  flex-shrink: 0;       
   }
   
.slogo.tiktok {background-position: -172px 0;   }
.slogo.facebook { background-position: -105px 0; }

.promit h3{
  margin: 0;          
  font-size: 1.1rem;
}

.protext {
    font-size: 15px;
    color: #888;
    text-align: center;
    margin-bottom: 13px;
}

a.prombo {
    border: solid 1px #CCC;
    padding: 9px 24px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: bold;
    color: #666;
}

a.prombo:hover {background-color:#3a50c8; color:#FFF; text-decoration:none; border: solid 1px #FFF;}

/*DIVERSEN*/
.actionbuttonlist li {list-style: none;}

.actionbuttonlist li a {    
    background-color: #f5f5f5;
    margin: 1%;
    border-radius: 31px;
    padding: 6px 30px;
    /* text-indent: 23px; */
    display: inline-block;
    width: 48%;
    float: left;
    box-sizing: border-box;
}

ul.actionbuttonlist {
   background-color: #FFF;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.16);
    padding: 30px;
    margin-bottom:30px;
    float: left;
        width: 100%;
            box-sizing: border-box;
}

.media-heading {margin-bottom: 0;margin-top: 0;}
iframe {border:none;}

a.extlink:after {
    content: "";
    background: url(../images/sprite.svg)no-repeat;
    height: 13px;
       width: 12px;
    display: inline-block;
    margin-left: 1px;
    background-position: -186px 0px;
     margin-bottom: 3px;
    background-size: 820px;
   }

.inlinetip {  
    color: #278ac6;
    position: relative;
    padding-left: 30px;
    margin-left: 2px;
        display: unset;}

.inlinetip a {text-decoration:underline;}
.inlinetip a:hover {color:#1d597e;}
      
.inlinetip:before {
    content: "TIP";
    background-color: #FFD24D;
    color: #FFF;
    padding: 1px 3px;
    font-weight: bold;
    margin-right: 3px;
    font-size: 13px;
    font-style: normal;
    position: absolute;
    text-indent: initial;
    left: 0;
    top:0;
    display: block;
    text-align: center;
    line-height: 16px;
}

.centertext {    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display:block;
    }
.center {margin-left:auto;margin-right:auto;}   

.center h1, .center h2 {text-transform:uppercase;}   

.headingsub {font-style: italic;
    font-size: 14px;
    color: #c04187;
       margin-bottom: 14px;
    margin-top: -14px;}

.ulspec {padding: 0px 0 0 20px;}
.ulspec li {list-style-type:none;padding: 0 0 13px 0;line-height: initial;}
.ulspec li:before {
	    content: "";
    background: url(../images/sprite.svg)no-repeat;
    width: 20px;
    height: 23px;
   float: left;
    margin-right: 6px;
}
.ulspecarrow li:before {
	 background-position: -54px -121px;
}

.ulspeccheck li:before {
    background-position: -87px -121px; 
}

.imgcenter {display:block; margin:auto;max-width:100%;}
.imgframe {background-color: #f5f5f5;}
.imgframe img {max-width:50%;height:auto;margin: auto;
    display: block;}

.tip {
      position: relative;
        max-width: 900px;
          margin: 30px 40px 40px 40px !important;
    background-color: #fff2e0;
    padding: 25px 40px;
    line-height: 21px;
    font-size: 1rem;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.09);
        border-left: solid 4px #3fba51;
}

p.tip::before {
     content: " tip ";
    position: absolute;
    font-size: 16px;
    margin: -25px 0 0 -43px;
    color: #fff;
    background-color: #3fba51;
       font-weight: bold;
       text-align: center;
    padding: 0px 4px;
}


/* REGION */

/* BRANDING */

.site-logo img {
    width: auto;
    max-height: 60px;
        padding: 10px 15px 10px 15px;
		}

#block-custom-branding a {display:flex;}

/* MENU */

.region-header nav {

    }
  
    
.region-header ul.menu {margin:0;}
.region-header ul.menu ul {padding:0 !important; white-space: nowrap;}
.region-header .menu-item {padding:0;}

.region-header ul.menu li {
	float:left; position:relative; display:block;font-size: 16px;    
    } 
.region-header ul.menu li a {padding:0.8rem 1rem;display: block; color:#222;}

.region-header ul.menu li a:hover {text-decoration:underline;}
.region-header ul.menu ul li a:hover {background-color:#1699c3;
						color:#FFF !important;
						text-decoration:none;}


.region-header ul.menu li.menu-item--expanded ul a.is-active {color:red; }

.region-header ul.menu ul {
	 visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  left: 0;
  display: none;
   box-shadow: 0 6px 12px rgba(0,0,0,.175);   
   border-bottom: solid 2px #cbcbcb;
   background-color:#FFF;
   padding:10px 20px;
}

.region-header ul.menu li a.is-active {color:#1699c3;}
.region-header ul.menu li.menu-item--expanded a.is-active {font-weight:bold;}
.region-header ul.menu li.menu-item--expanded ul a {color:#1699c3;}
.region-header ul.menu li.menu-item--expanded ul a.is-active {text-decoration:underline;}

.region-header ul.menu li:hover > ul,
.region-header ul.menu li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.region-header li.menu-item.menu-item--expanded.hover ul.menu  {
	 visibility: visible !important;
  opacity: 1 !important;
  display: block !important;}


.region-header ul.menu li ul li {
  clear: both;
  width: 100%; 
}

/****responsive menu *****/

.responsive-menu-toggle {
    display: none;
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: 1;
}
@media screen and (max-width: 900px) {
	.responsive-menu-toggle {
	    display: block;
	}
}
.responsive-menu-toggle .icon {
    content: "";
    background: url(../images/hamburger.svg) no-repeat;
    background-color: #1699c3;
    background-size: 20px 20px;
    border-radius: 30px;
    padding: 10px;
    background-position: center;
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-top: 13px;
}
.mm-ocd .block-menu {
    background-color: #004171;
    color: #fff;
}
.mm-ocd .block-menu li a {
    color: #fff;
}
.mm-ocd .block-menu:after {
    padding-left: 40px !important;
    color: #fff;
    font-weight: bold;
    opacity: inherit;
}
/*.responsive-menu-toggle { position: absolute;
    right: 10px;
    height:31px;
    top:0;
    bottom:0;
    margin:auto; 
    }
.responsive-menu-toggle-icon {width:34px;}
.responsive-menu-toggle-icon:before {top:6px;}
.responsive-menu-toggle-icon:after {top:22px;}
*/

/*ul.menu.mm-listview a.is-active {text-decoration:underline; }
ul.mm-listview li {width:100%;display:flex;}

.responsive-menu-toggle-icon:before, .responsive-menu-toggle-icon:after, .responsive-menu-toggle-icon span.icon {background-color:#cfde55;height:4px;width:100%;left:auto;right:auto;}
.responsive-menu-toggle-icon span.label {display:none;}
.mm-menu_theme-dark {--mm-color-border:transparent;}

.mm-btn_next:after {content: '+';transform: rotate(0deg); border:none; right:0; left:-4px; top:-12px; }
.mm-listitem__btn:not(.mm-listitem__text) { background-color: rgba(0, 0, 0, 0.25);  padding: 26px;}
.mm-navbar__btn:first-child { background-color: rgba(0, 0, 0, 0.25); padding: 0 27px;}
*/

/************** GENERAL *****************/

.list-unstyled {
    list-style: none;}
.iframeborder { border: none;}


/*RIJEN 2 3 4 en 5*/

.row2 {
    width: 50%;
    float: left;
    padding: 0;
    box-sizing: border-box;
   
}


.row3 {
      flex: 1 1 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.row4 {
	width: 25%;
    float: left;
    box-sizing: border-box;
}

.row5 {width: 20%;
 float: left;
    padding: 0;
    box-sizing: border-box;}

.knop, a.knop {
	        background-color: #f16082;
    padding: 10px 20px 9px 20px;
       margin-bottom: 10px;
    display: inline-flex;
    color: #FFF;
    font-size: 16px;
    text-align: center;
    border-radius: 100px
    }
    
.knop:hover, a.knop:hover {
background-color: #e1496d;
text-decoration:none !important;
   
    }    

.knopxl, a.knopxl {
	    max-width: 400px;
    display: inherit;
       text-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    font-size: 22px;
    text-transform: none;
    font-weight: bold;
    margin: auto;
}

a.knop2 { text-transform: unset;
    font-size: 17px;
       padding: 11px 24px;
       font-weight:bold;}


.redlabel {    background-color: #FF0000;
    padding: 3px;}


hr.hrcenter {    background-color: #cfde55;
    height: 4px;   
    width: 60px;
    border: none;
   }


/* typografie divers */
.intro {font-size: 20px;
        font-weight: 500;
    color: #707070;
    }

.column2 {columns:2;}

main ul li , main ol li {line-height:1.8rem}

.quote {
	    max-width: 900px;
    margin-left: 40px;
    margin-right: 40px;
    border-left: solid 7px #FDCB02;
    padding: 10px 0 10px 36px;
    font-style: italic;
    position: relative;
    font-weight: 500;
}
.quote p {margin: 0;}

.quote p {margin: 0;}

p.quote::before {
content: " “ ";
        position: absolute;
    font-size: 57px;
    margin: -18px 0 0 -31px;
    color:#a6a6a6;
}

p.quote::after {
  content: " ” "; 
       position: absolute;
    margin: -0.9rem -4rem 0 0;
    font-size: 57px;
    color:#a6a6a6;
}


/*classy paragraphs*/

.skipashome {padding: 50px 0 60px 0; background-color: #dbe5f0;max-width:100% !important;}


/******** PARAGRAPHS *******/


/*Algemeen*/
.paragraph {
	margin-left:auto;
	margin-right:auto;
		 	 margin-bottom:45px;	     	
	    word-break: break-word;   
}

.paragraph--type--view-invoegen {/*max-width:1110px;*/}
.paragraph--type--view-invoegen .field--name-field-tekst {padding-left:15px; padding-right:15px; max-width: 1250px; margin: auto; box-sizing: border-box;} 
.paragraph--type--view-invoegen .field--name-field-tekst h2 {margin-top: 5px;}

.views-element-container {
	/*max-width:1110px;*/
	margin-left:auto;
	margin-right:auto;
	}

/*paragraaf tekstvak 100procent breed*/

.paragraph--type--tekstvak-100p {margin-bottom:45px;}

/*tekstvak met foto rechts*/

.paragraph--type--tfr .pwrap {    max-width: 1250px;
    margin: auto;
    border-bottom: solid 1px #ccc;
    display: inherit;
    padding: 0 0 20px 0;
    margin-bottom: 5px;
        display: -webkit-flex;
    flex-wrap: wrap;
    box-sizing: border-box;}
    
.field--name-field-tfrtekst { float: right;   width: 40%;    margin-left: 4%;}
.field--name-field-tfrtekst h2 {margin:0; padding: 0 0 10px 0;}
.field--name-field-tfrimg {float: left;
    width: 55%;}

.paragraph--type--tfr img {box-sizing: border-box;
    width: 100%;
    object-fit: cover;
}

/*cta ribbon*/

.paragraph--type--ctarib .pwrap {max-width:1200px;margin:auto;display: flex;}

.paragraph--type--ctarib {background-color: #ffe718;
    padding: 20px 50px;
    box-sizing: border-box;   
    }
.paragraph--type--ctarib .file {background-image: none;padding-left:0;}


.field--name-field-ctatit {width: 28%;font-size: 22px;font-weight: bold; padding-right: 45px; display: flex; align-items: center;justify-content: flex-end;}

.field--name-field-ctasub  {width: 45%; display: flex; align-items: center;}
.field--name-field-ctalink, .field--name-field-ctaribfile {width: 27%; margin-left: 30px; display: flex; align-items: center;}
.field--name-field-ctalink a, .field--name-field-ctaribfile a {border-radius: 2px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12); box-sizing: border-box; background-color: #FFF; font-size:16px; padding:10px;text-transform:uppercase; color:#000;width: 100%;
    display: block;
    text-align: center;}
.field--name-field-ctalink a:hover, .field--name-field-ctaribfile a:hover {background-color:#f5f5f5; text-decoration:none;} 
.field--name-field-ctaribfile .file--application-pdf {background-image:none;display: contents;}

/*video embed*/
.paragraph--type--video {max-width:800px; margin-bottom: 0;}

/*fotogalerij vierkant 3 op een rij*/
.paragraph--type--fotogal3v {max-width: 1250px; display:grid; }

.paragraph--type--fotogal3v:after {
    display: table;
    clear: both;
    content: "";
}  

.paragraph--type--fotogal3v img {width:33.33%;height:auto;float: left;
    padding: 10px;
    box-sizing: border-box;}

/* header met image en inzetje*/

.paragraph--type--headerinzet { position: relative; max-width: 1600px; margin-top:51px; }
.paragraph--type--headerinzet .field--name-field-headerimg, .paragraph--type--headerinzet .field--name-field-imgmedia {height:450px;} 

.paragraph--type--headerinzet p {margin:0 !important;padding:0 !important;}

.paragraph--type--headerinzet .field--name-field-headerimg img, .paragraph--type--headerinzet .field--name-field-imgmedia img     {    box-sizing: border-box;
    width: 100%;
    object-fit: cover;
    height: 100%;
    display: flex;}
    

    
.paragraph--type--headerinzet .field--name-field-tekst { 
	    position: absolute;
	   max-height: 350px;
	    top: 0;
    bottom: 0;
    margin: auto;
     right: 10%;
     z-index:1;
     box-sizing: border-box;
  } 
  
.paragraph--type--headerinzet .field--name-field-titel {
	position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #FFF;
    bottom: 12%;
    max-width: 1250px;
}

.paragraph--type--headerinzet .field--name-field-titel h2 {
	    background-color: rgba(255, 255, 255, 0.74);
    /*display: inline-block;*/
    padding: 10px 20px;
    font-size: 30px;
    text-transform: uppercase;
    margin: 0;
    position: relative;
        max-width: 400px;
}


.paragraph--type--headerinzet .field--name-field-titel h2:after {
  content: "";
  background: #cfde55;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 50px;
}


.paragraph--type--headerinzet .field--name-field-titel h3 {
	    padding: 10px 20px 0 0;
        margin: 0;
    color: #FFF;
    font-size: 1rem;
    text-shadow: 1px 1px 5px #000;
    float:left;
}


/*PAR Standaard tekstvak*/

.paragraph--type--tekstvak {max-width: 1100px; padding-left:15px; padding-right:15px;}
.paragraph--type--tekstvak h1 {margin-top:20px;}
.paragraph--type--tekstvak p:last-child { margin-bottom: 0;}
.noheader.paragraph--type--tekstvak {
	margin-top:80px;
}
/*PAR tekstvak links uitgelijnd*/

.paragraph--type--tekstvaklinks {max-width: 1250px;padding-left:15px;padding-right:15px; box-sizing: border-box;}
.paragraph--type--tekstvaklinks p {max-width: 900px;}
.paragraph--type--tekstvaklinks p:last-child {margin-bottom:0;}
.paragraph--type--tekstvaklinks h1 {margin-top:20px;}

/*strook foto links*/

.paragraph--type--strfotolinks {font-size:1rem; max-width: 1110px;
    padding-left: 15px;
    padding-right: 15px;} 
.paragraph--type--strfotolinks .pwrap {display: grid;
    grid-template-columns: 1fr 1fr;    border-radius: 8px;
    overflow: hidden;}
.paragraph--type--strfotolinks .field--name-field-parimage { 
    display: -webkit-flex;  
    flex-wrap: wrap;  
    }

.txtleft.paragraph--type--strfotolinks .field--name-field-parimage {order:2;}


.paragraph--type--strfotolinks img.image-style-strookimg {box-sizing: border-box;
    width: 100%;
    height:100%;
    object-fit: cover;
    }  

.paragraph--type--strfotolinks .field--name-field-tekst {
	padding: 20px 30px;
	background-color: #FFF;
	}
    
/*strook foto rechts */

.paragraph--type--strfotorechts {background-color:#e9f9ff;display: flow-root;font-size:1rem; max-width:1500px;} 
.paragraph--type--strfotorechts .pwrap {display: -webkit-flex;flex-wrap: wrap;}
.paragraph--type--strfotorechts  .field--name-field-parimage {  width: 58%;   
    float: right;
    display: -webkit-flex;
    flex-wrap: wrap;}

.paragraph--type--strfotorechts img {box-sizing: border-box;
    width: 100%;
    height:100%;
    object-fit: cover;
    display: flex;}  

.paragraph--type--strfotorechts .field--name-field-tekst {
    float: left;
    width: 32%;
    margin-left: 5%;
    margin-top: 3%;
    margin-right: 5%;
    margin-bottom:2%;
    min-height:400px;
}


/*header image met payoff*/

.paragraph--type--header-image {position:relative;} 


.paragraph--type--header-image img {
    box-sizing: border-box;
    margin: auto; 
    object-fit: cover;
    height: 100%;
    width:100%;
    display:flex;
}

.paragraph--type--header-image .field--name-field-tekst {
position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;  
    color: #FFF;
     bottom: 12%;
    max-width: 1250px;
    overflow:hidden;
}

.paragraph--type--header-image .field--name-field-tekst h2 {
  background-color: rgb(239 73 112 / 77%);
    display: inline-block;
    padding: 10px 20px;
    font-size: 30px;
    text-transform: uppercase;
    margin:0;
    position:relative;
    display: inline-grid;
    color: #FFF;
}

.paragraph--type--header-image .field--name-field-tekst h2:after {
  content: "";
  background: #fbbf68;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 50px;
}

.paragraph--type--header-image .field--name-field-tekst h3 {
	padding: 10px 20px 0 0;
       margin: 0;
    color: #FFF;
    font-size: 1rem;
    text-shadow: 1px 1px 5px #000;
}

/*FOOTER ELEMENTS*/

footer {
padding-top:50px;
position:relative;
z-index: 0;
float: left;
    width: 100%;
    background-color: #1699c3;
    /*
  background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(../images/footerbg.png);
    */
}

.footermenuwrap {margin-bottom:50px;}

.footermenuwrap, .footermenuwrap a {
	color:#fff;
	
        color: rgba(255, 255, 255, 0.71);
    }

ul.footermenu {
              line-height: 1.7rem;
                  font-size: 17px;}
        
ul.footermenu li:first-child {   
	 font-weight: bold;
    font-size: 1rem;
      letter-spacing: 1px;
       
        border-left:none;
        color:#FFF;}

ul.footermenu li {

        padding-left: 20px;
        line-height: 21px;
    padding-bottom: 10px;}        
ul.footermenu li a:hover {text-decoration:underline;}

.footer-legal { padding-left:15px; padding-right:15px;}        
ul.copyright {float: left;
    clear: left;
    color:#FFF;
    font-size:13px;
        text-transform: uppercase;
            margin-bottom: 30px;}
ul.copyright li {padding-right:20px;float:left; }


/*SKIGEBIED */

.view-skigebied {padding-left:15px; padding-right:15px; display:flex;}
.view-skigebied h2{text-align:center;}
.sgstats {    padding-right: 25px;
    box-sizing: border-box;}


.sglinks {
        float: left;
    width: 100%;
    background-color: rgba(223, 240, 254, 0.8);
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 20px 0;
    position:relative;
    overflow:hidden;
}


.sglinks::after {
    content: "";
    background: url(../images/mountains.svg)no-repeat;
    opacity: 0.5;
    background-size: 1883px;
    background-position: right 0 top 11px;
    z-index: -1;
    position: absolute;
     bottom: 0;
    right: 0;
    width: 2000px;
    height: 100%;
}

.sglinks h3 {text-align:center;}


.sglinks a {
	border-radius: 50px;
    width: 21%;
        margin: 1.5% 2%;
      padding: 10px 20px 10px 20px;
    font-weight: bold;
    color: #0059B2;
    background-color: #FFF;
    line-height: 34px;
        font-size: 20px;
        float: left;
    box-sizing: border-box;
    }

.sglinks a:hover {box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.11);}

.sglinks i { background: url(../images/sprite.svg)no-repeat;
    width: 34px;
    height: 34px;
    display: block;
    float: left;
    margin-right: 8px;}
    
i.sgskiles {background-position: 4px -420px;}
i.sgskirent {background-position: 8px -460px;}
i.sgskipas {background-position: 5px -378px;}
i.sgacco {background-position: 5px -335px;}

.kmpiste {padding:12px;border-radius:4px;margin-bottom: 4px;color:#fff;font-weight: bold;
    font-size: 1rem;}
.pisterood {background-color: #ff4545;}
.pisteblauw {    background-color: #4DA6FF;}
.pistezwart {    background-color: #222;}

.kmpiste i {    font-style: inherit;
    float: right;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    padding: 2px 4px;
    min-width: 40px;
    text-align: center;
}

.kmpistetot {
    font-weight: bold;
    padding: 8px 12px;
    text-transform: uppercase;
    font-size: 22px;
}

.gebiedstats {padding:12px;	border-bottom: solid 1px #e3e3e3;font-size: 1rem; }
.sprite i {
    background: url(../images/sprite.svg)no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    background-size: 600px;
    margin-right: 5px;}

i.skilift {background-position: -28px 1px;}
i.reistijd {background-position: -28px -36px;}
i.pistot {background-position: 0px -43px;
    height: 32px;
    width: 32px;
    background-size: 744px;}

.skigebiedkaart img {    width: 100%;
   max-height: 300px;
   border-radius: 3px;
   margin-top: 10px;
    object-fit: cover;
      transition: all .2s ease-in-out;}

.skigebiedkaart img:hover { transform: scale(1.03); }


a.pinteract {
    background-color: #ff8800;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 3px;
    float: right;
    font-size: 15px;
        margin-top: 3px;
}
a.pinteract:hover {background-color:#e97f06;}


.skipas6dagen {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    padding: 20px 0 10px 0;
}

a.skipaslink {
    width: 100%;
    text-align: center;
    display: block;
}

/*skipas prijzen tabel*/

table {font-size:1rem;}

.view-skipas {max-width: 900px;
    margin: auto;
  padding-left:15px;
padding-right:15px;
padding-bottom: 20px;
    }

thead {background-color: #004171;color:#FFF;}
.view-skipas table {width:100%;}

tr {line-height: 38px;
    border-bottom: solid 1px #c9d5e7;}   

tr:last-child {border-bottom: solid 4px #c9d5e7;}
    
.view-skipas td {text-align:center;}

.view-skipas tr:nth-child(6){background-color:#ffffbb; font-weight:bold;}
.skipasseizoen {color: #1f8cd9;    margin-bottom: 5px;}


.view-skipas .file {margin-top:30px; text-align:center; font-size:22px;margin-left: auto;
    margin-right: auto;
    display: table;
    font-weight:bold;
    text-transform:uppercase;}

/*Webcams*/

.view-webcams {padding-left:15px; padding-right:15px;}

.view-webcams .view-content {    display: -webkit-flex;
    flex-wrap: wrap;}

.webcam { width: 46%;
    float: left;
    padding: 0 2% 2% 2%;}
         
.webcam img {width: 100%;height: auto;}

a.webcamwrap {
    color: inherit;
}

.webcamtitle {
       padding: 6px 10px;
        background-color: #374c82;
    color: #FFF;
}

.webcambanner {padding: 0 20px;}

/*kaarten*/

.view-kaart {padding-left:15px; padding-right:15px; display:inline-block;width:100%; box-sizing: border-box;}
.view-kaart h2 {margin-top:0;}
.view-kaart img {width:100%;height:auto;  border: solid 5px #FFF; float:left; box-sizing: border-box;
    box-shadow: 0px 0px 2px #DDD;}

.view-kaart.view-id-kaart.view-display-id-block_1 .view-content {width:100%;height:auto;}

.view-kaart.view-id-kaart.view-display-id-block_2 .view-content div {width:49%;float:left;}
.view-kaart.view-id-kaart.view-display-id-block_2 .view-content div:nth-child(odd) {margin-right:2%;}

.view-kaart img:hover {
    transition: 0.15s;
    border: solid 5px #a1ccff;
   }

/*skihuur boeksknop*/

.view-display-id-skihuur .bkskipasrow {width:33.33%;  }
.view-display-id-skihuur .bkskipas {box-shadow: 1px 2px 4px #DDD; max-width:220px; background-color: #FFF;}

.view-display-id-skihuur .bksacco {background-color: #44bb6d;
    font-weight: bold;
    color: #fff;
    padding: 7px 6px;}
    
/*skihuur prijsindicatie tabel snippet*/
.skihuurtabel thead {text-align:left;}
.skihuurtabel th, .skihuurtabel td {padding: 3px 20px !important;}

/*snippet*/
.view-snippets {padding-left:15px; padding-right:15px;}

/*hotel sterren*/
a.star:after {
	    content: "";
	    background: url(../images/sprite.svg)no-repeat;
	      height:13px;
	  	 	      display: inline-block;
    margin-left: 5px;
        background-size: 781px;
}

a.star1:after {
background-position: -82px 0;
    width: 12px;
}

a.star2:after {
	background-position: -82px 0;
    width: 25px;
}

a.star3:after {
background-position: -82px 0px;
    width: 39px;
}

a.star4:after {
	     background-position: -81px 0px;
    width: 55px;
}

a.star5:after {
background-position: -80px 0px;
    width: 70px;
}

/*bedrijven*/
.bedrijven ul {margin:0; padding:0; border: solid 1px #f1e033;    border-bottom: 3px solid #ffe257;
    background-color: #fff8da;
    float: left;
    width: 26%;
    min-height: 240px;
        padding: 1% 2.33%;
        word-break: break-word;
            margin: 1.16%;
            font-size: 1rem;}
.bedrijven ul li {list-style-type: none;}
.bedrijven ul li:first-child {font-weight:bold; }


/*booking cards en frames*/

iframe.bookingcard {
          width: 100%;
    min-height: 350px;
    padding: 23px;
   box-shadow: 1px 2px 9px #0003;
 background-image: linear-gradient(140deg, rgba(237,241,250,1), rgba(237,241,250,0.8)); 
 box-sizing: border-box;
}
.skihuurbox {
	min-height: 342px; 
    min-width: 350px;
      background-color: #668EC2;
           }
iframe.bookbox {
       padding: 10px 20px;
      box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.24);
        border-bottom-left-radius: 20px;
}

.quickfinder {
	min-height: 342px; 
    min-width: 350px;
         background-color: rgba(0, 108, 183, 0.9);
      padding:20px;
      box-sizing:border-box;
}

/*card met select list scripts*/
iframe.cardskipas { height: 42px;
    width: 270px;
    margin-left: auto;
    margin-right: auto;
      display: block;
          padding-bottom: 18px;
           overflow:hidden;
   
          }


/*pistekaart pagina - pistekaart links, skigebied stats rechts*/

.pistekaart {width: 65%;   
    padding-right: 25px !important;}
.pistekaart img {width: 100%;
    height: auto;
    transition: all .2s ease-in-out;}
.resortstats {width:35%;}
.pistekaart img:hover {transform: scale(1.03);}
.pistekaart i {float:right;color: #6192bc; font-size: 14px; margin-top:3px;}
.pistekaart a.pinteract {    float: left;
    font-size: 19px;
    padding: 13px 30px;
    font-weight: bold;}

/*POI*/

.view-poi .view-content {display: -webkit-flex;flex-wrap: wrap;}

.poi {padding: 15px; margin-bottom: 20px;position:relative;}

.poi a {text-decoration:inherit;}
.poi a:hover {text-decoration:none; }

.poiimgwrap {position:relative;margin-bottom: 14px;}

.poiimgwrap img {    width: 100%;
    height: auto;
      border-radius: 2px;
          display: flex;}

.redlabel {position: absolute;
    background-color: red;
    border-radius: 4px;
    padding: 5px 4px 4px 4px;
    text-align: center;
    font-weight: bold;
    left: 10px;
    transform: rotate(-3deg);
    color: white;
    top: 15px;
    text-transform: uppercase;
    font-size: 13px;}
    
a.poilink  {border: solid 1px #CCC;
    padding: 6px 8px 4px 8px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    font-size: 13px;
    color: #444;
    margin-left: 7px;
    float: right;}     
   
.poilinks {min-height: 34px; margin-top: 8px;position: absolute;
    bottom: 0;
    right: 15px;}
a.poilink:hover {background-color: #EAF2FB;}

.poinode {
	    background-color: #ff6f26;
    background-image: -webkit-linear-gradient(297deg,#ffa122,#ff6f26 95%);
    background-image: linear-gradient(153deg,#ffa122,#ff6f26 95%);
    border-radius: 4px;
    color: #FFF !important;
    border: solid 1px #FFF;
    padding: 9px 18px;
    margin-top: -4px;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    float: right;
    margin-left: 10px;
}
.poinode:hover {background-image: -webkit-linear-gradient(197deg,#ffa122,#ff4e26 95%);
    background-image: linear-gradient(53deg,#ffa122,#ff4e26 95%);}

.poi h3 {line-height:18px;font-size: 20px;
       margin-bottom: 5px;}

.poi span {
	        font-size: 15px;
    color: #616161;
        margin-top: 8px;
        display: block;
        margin-bottom: 25px;
}
.poi span, .poi span p {line-height:24px;}

.poiintro p {margin:0;padding:0;}

.poisubtitle {
	    font-size: 13px;
    text-align: right;
      color: #ffffff;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.33);
    padding: 4px 6px;
}

/*POI related*/

.block-views-blockpoi-related-block-1 {    max-width: 100%;
    background-color: #f8f1e9;
        display: flow-root;
    width: 100%;}
.view-poi-related {    max-width: 1250px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
        display: flow-root;
      } 

.view-poi-related nav.pager {box-shadow: none; padding:initial;}

/*bloknav*/
.view-bloknav:after {
	    display: table;
    clear: both;
    content: "";
}

.bloknav {padding:10px;}
.bloknav a {    position: relative;
    float: initial; 
        overflow:hidden;
        display:block;}



.bloknav h3 {color:#FFF;margin:0;text-transform:uppercase;font-size: 28px; word-break: initial;}
.bntitle {
    position: absolute;
    bottom: 0;
        padding: 40px;
    box-sizing: border-box;
        color:#fff;
    z-index: 1;
    font-size:14px;
    width:100%;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0) 100%);  
}
.bloknav img {float:left;transition: all .25s ease;     width: 100%;
    height: auto; }
.bloknav a:hover img {transform: scale(1.03);}

.bnsub {line-height:20px;}


/*arrangementen*/

.view-arr {margin-top:15px;}

.arr {display: inline-flex; width: 100%; border-bottom: solid 1px #ccc; margin-bottom: 22px;
    padding: 0 15px 18px 15px;
    box-sizing: border-box;
    }

.arr:last-child {border-bottom:none;}    
    
.arrcwrap {
    display: initial;
    width:76%;
    
}    

.arr1 {position:relative; width: 50%;float:left;}
.arr1 img {width: 100%;
    height: auto;}
.rating {
	position: absolute;
    top: 10px;
    right: 20px;
    background-color: #ff6f26;
    color: #fff;
    padding: 8px 6px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 5px;
    border-bottom-left-radius: 0;
}

.arr2 {    width: 50%;
    padding: 10px 25px;
    box-sizing: border-box;
        float: right;}

.arrsubkop {line-height: 15px;
    font-size: 13px;
    color: #777;
    margin: 0 0 6px 0;}

.arrsubsubkop {
    background-color: #ffecb4;
    border-radius: 13px;
        padding: 4px 10px;
    display: initial;
    font-weight: 600;
    color: #806003;
    font-size: 13px;
        }

.arrcontent h3 {margin: 0 0 4px 0; font-size: 22px; }        
.arrcontent h3 a{color: #222;}   
.arrcontent h3 a:hover {color: inherit; text-decoration:none;}    
.arrcontent ul {margin: 6px 0 0 0;     padding: 5px 0 0 23px;}
.arrcontent ul li {font-size:14px;line-height: 20px; margin-bottom: 7px; position:relative;}

.arr3 {
width: 24%;
    background-color: #f5f5f5;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
   }

.arrcta {
        position: absolute;
    bottom: 0;
    text-align: right;
    right: 0;
    padding: 20px;
    box-sizing: border-box;
}

.arrpricewrap {font-size: 14px;}

.arrpricewrap b {
    font-size: 30px;
    font-weight: bold;
   }

a.arrbtn {
background-color: #34ae5e;
    font-size: 14px;
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,.14);
    text-transform: uppercase;
    color: #FFF;
    transition-duration: .3s;
    padding: 11px 27px;
    border-radius: 40px;
        float: right;   
        margin-top: 20px;
}
a.arrbtn:hover {background-color:#f4711f;text-decoration:none; }

.priceobv {    display: inline-block;
      width: 100%;
      font-size: 14px;}
      
i.star {
content: "";
    background: url(../images/sprite.svg)no-repeat;
    height: 13px;
    display: block;
     background-size: 781px;
     margin: 0 0 5px 0px;
      background-position: -83px 0;
    } 
i.star1 {width: 12px;}      
i.star2 {width: 24px;}
i.star3 {width: 38px;}    
i.star4 {width: 51px;}      
i.star5 {width: 66px;}   

.pakketwrap {color: #7A7675; font-weight:bold; text-align: right;}

.pakket {
	content: "";
    background: url(../images/sprite.svg)no-repeat;
    height: 20px;
        display: inline-flex;
            margin: 0 3px;
}

.logies {background-position: -140px -64px; width: 34px;}
.allin {background-position: -185px -64px; width: 34px;}
.auto {background-position: -231px -64px; width: 34px;}
.vlucht {background-position: -93px -64px; width: 34px;}

/*arrangement detailpagina*/
.view-arrd {    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
        margin-top: 100px;
        padding-left: 15px;
    padding-right: 15px;}

.arrdettease img {width: 100%;height:auto;}

.arrhead { margin-top: 10px;}

.arrdfac {font-size:15px;
		font-weight:bold;
		text-transform:uppercase;
		    column-count: 3;
    margin-bottom: 40px;
    background-color: #feeec4;
    padding:40px;
        border: solid 1px #f6c4ae;}
    
.arrdfac p {margin-bottom:4px;}    
.arrdfac ul {font-weight:normal; 
			text-transform: none;
			    margin: 0 0 20px 0;
    padding: 0 0 0 16px;}
.arrdfac ul li:first-letter {text-transform:uppercase;}
.arrdfac ul li {line-height: 27px;}
.arrdet1 .arrsubsubkop {margin-bottom: 10px;
    display: inline-block;}
.arrdet1 h1 {line-height: 38px;}
    
.arrdetimgwrap {position: relative;width: 55%;
    float: right;}
.arrdcontent {float:left;}
.arrdcontent h2{margin: 10px 0 10px 0px;}

a.arrdmap {text-decoration: underline; margin-left: 10px;    font-size: 15px;}

.arrgal {
				margin-bottom: 30px; 
				display: inline-block;
	}
.arrgal img {width: 33.33%;
    height: auto;
    float:left;
    padding: 3px;
    box-sizing: border-box;
          }

/*arrangement 3 op rij*/
.view-arr3oprij .view-content {display: -webkit-flex; flex-wrap: wrap;}
.view-arr3oprij:after {display: table; clear: both; content: "";}  
.arrrow {padding: 0 2%;     margin-bottom: 30px;}
.arrrow2 {min-height: 120px; display:initial;} 
.arrrow2 p {font-size:15px;} 
.arrrow1 img {width:100%;height:auto;     margin-bottom: 10px;}
.arrrow .arrcta {position:initial;}
.arrrow  .pakketwrap {display:none;}
.arrrow  .arrcta {padding:0;}
.arrrow .arrcta {text-align:left;}
.arrrow3 {position:relative;}
.arrrow a.arrbtn {position:absolute; right:0;bottom:20px; }
.arrrow .priceobv {width:50%;color: #919191;}

/*video embed */
.field--name-field-media-oembed-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 15px 0 25px 0;
    clear: both;
}

.field--name-field-media-oembed-video  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*boekknoppen arrangement detailpagina*/

.abkv {    width: 45%;
    float: left;
    padding: 0 4% 0 0;
    box-sizing: border-box;}

.btitle {background-color: #C9F7C9;
text-align:center; 
color: #00B200;
font-weight:bold;
font-style:italic;
font-size: 16px;
    padding: 3px;
        margin-bottom: 13px;}    

.abkv ul {list-style:none;    margin: 0;
    padding: 0;}

.abkv ul li a {display: block;
           min-height: 38px;
    margin-bottom: 10px;
        border-bottom: solid 1px #CCC;
    }

.abkv ul li a:before {
	      content: "";
    background: url(../images/logosprite.svg)no-repeat;
    width: 100px;
    height: 30px;
    margin-right: 8px;
    display: block;
    float: left;
        }
.abkv ul li a:after {    content: "Bekijk prijzen";
    background-color: #ed2924;
    color: #FFF;
    padding: 2px 14px;
    float: right;
        clear: inherit;
    border-radius: 30px;
    font-size: 14px;
}
.abkv ul li:hover a:after {
	background-color: #34ae5e !important;
}

.abkv ul li a.abktui:before  {background-position: 0px 1px;}
.abkv ul li a.abkdisc:before  {background-position: 0px -38px;}
.abkv ul li a.abkprijsvrij:before  {background-position: 0px -73px;}
.abkv ul li a.abksunweb:before  {background-position: 0px -142px;}
.abkv ul li a.abktjingo:before  {background-position: 0px -107px;}
.abkv ul li a.abkalltours:before  {background-position: 0px -172px;}
.abkv ul li a.abksuntip:before  {background-position: 0px -210px;}
.abkv ul li a.abkvakanties:before  {background-position: 0px -250px;}


/*sneeuwhoogte*/

.shbox { background: url(../images/berg.svg)no-repeat;
    background-size: 1300px;
    background-position: bottom;  
	border: solid 1px #dbe1f3;
    background-color: #f9fbff;
        padding: 30px 20px 10px 20px;
        display: flow-root;}

.shtitle {text-align:center;}

.lastupdate {
    font-size: 14px;
    color: #76777c;
    text-align:center;
    margin-top: 2px;
    }
.shwrap {
    position: relative;
	 }    
.shwrap:after {
    content: "";
    background: url(../images/skier.png)no-repeat;
    width: 124px;
    height: 135px;   
    display: block;
    position: absolute;
    top: 32px;
    left: 0;
    right: 360px;
    margin: auto;
    background-size: 113px;
    }  

.shpistewrap { display: inline-block;}
a.liftstatus {
      display: block;
        margin-bottom: 10px;
        float: right;
         }    

a.liftstatus:before {
    content: "";
          width: 29px;
    height: 24px;
    float: left;
    margin-right: 4px;
    -webkit-mask: url(../images/sprite.svg) -27px 0px;
    mask: url(../images/sprite.svg) -27px 0px;
    background-color: #0059B2;
        -webkit-mask-size: 686px;
  mask-size: 686px;
  }
    
.snowbox {
       max-width: 330px;
    margin: auto;
    color: #fff;
    font-weight: bold;
    display: flex;
        padding: 8px;
}
.snowbox span {width:50%;float:left;text-align:center;font-size: 14px;
    font-weight: normal;}
.snowbox h4 {font-size:30px;text-transform:uppercase;}
.sbmount {background-color: #0059B2; margin-bottom: 25px; margin-top: 28px;}
.sbmount .sh {color: #0059B2;}
.sbval {background-color: #FF8000; margin-bottom:20px;}
.sbval .sh {color: #FF8000;}
.sh {
    background-color: #FFF;
    width: 50%;
    float: right;
    margin: 10px 10px;
    text-align: center;
    font-size: 26px;
}

/*skiles en huur onder sneeuwhoogte widget*/
.shrent {
text-align: center;
    border-bottom: solid 4px #ebebeb;
    max-width: 900px;
    margin: auto;
    padding: 20px 0 14px 0;}

.shrent a {height:70px; display: inline-block; font-size: 0;}

.btskiles { background: url(../images/buttonskiles.svg)no-repeat; min-width:333px; background-size: 338px;    margin-left: 20px;}
.btskihuur { background: url(../images/buttonskihuur.svg)no-repeat; min-width:245px; background-size: 244px;    margin-right: 20px;}
.shrent a:hover {background-position: 0 -73px;}

/* weersvoorspelling */
#block-views-block-view-forecast-block-1 {
	max-width: 900px;
}
#block-views-block-view-forecast-block-1 h3 {
	clear: both;
	background-color: #3a5d97;
    color: white;
    padding: 5px 10px;
}
#block-views-block-view-forecast-block-1 .views-row {
	float: left;
	    padding: 7px 20px 20px 20px;
	    border-right: solid 1px #ccc;
    min-width: 175px;
        margin-bottom: 10px;
}
.views-field-field-forecast-temperature {color:#fa3d3d; font-weight:bold; margin-bottom:4px;}

.views-field-field-forecast-daypart {
    color: #666;
    font-size: 15px;
}
.views-field-field-forecast-precipitation {
    color: #3a5d97;
    font-weight: bold;
    font-size: 15px;
        margin-bottom: 5px;
}
.views-field.views-field-nothing {font-size: 14px;}

.views-field-field-forecast-type img {max-width: 85px;} 

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 15px 0 25px 0;
    clear: both;
}

.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/********* MEDIA QUERIES**********/

@media only screen and (min-width: 767px) and (max-width: 1024px) {
	 
	 .row3{flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);}
	 .view-cards .row3 {width: 46%; margin: 2%;}
.sglinks a {width:46%}
.field--name-field-ctasub, .field--name-field-ctatit {line-height:initial; min-height: initial;}
.abkv ul li a:before {display:none;}
.arrgal img {width:50%;}


/*arrangementen*/
.arrcwrap {width:60%;    display: initial;}
.arr1, .arr2 {width:100%;}
.arr2 {padding: 10px 25px 10px 5px; }
.arr3 {width:40%;} 

}


@media only screen and (max-width: 1260px) {
	.paragraph--type--header-image .field--name-field-tekst h3 {margin-left:10px;}
	.paragraph--type--headerinzet .field--name-field-titel h3 {margin-left:10px;}
}

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

.row5 {width:33.33%;}	
.row4 {width:33.33%;}


.paragraph--type--headerinzet .field--name-field-tekst {right:30px}	

/*laatste elementen van een rij op homepage verbergen*/
.path-frontpage .view-cards .card:last-child {display:none;} 

/*bloknav 2 aan 2 */
.path-frontpage .view-bloknav .bloknav {width: 25%;} 
.path-frontpage  .bntitle {padding:20px;} 
.path-frontpage .bloknav h3 {font-size:24px;}
/*PARAGRAPH */

/* header*/

.paragraph--type--header-image img {height: 250px;}
	
}



@media all and (max-width: 899px) {


.paragraph--type--headerinzet .field--name-field-titel {display:none;}

/* verberg menu op mobiel*/
 .region-header nav {display:none;}

/*boekknop skihuur horizontaal*/

.view-display-id-skihuur .bkskipasrow {width: 100%;    display: flow-root;}
.view-display-id-skihuur .bkskipas {max-width: 100%;    display: flow-root;}
.view-display-id-skihuur .bksacco {  
	    height: 16px;
    line-height: 16px;
    position: absolute;
    right: 10px;
    left: auto;
}
.bkslabelskihuur {top: 0;}

/*boekknop skipas horizontaal*/
.bkskipasrow {width: 100%;    display: flow-root;}
.bkslogowrap {width: 65%;float:right;text-align:center; padding-top:22px;height:initial;}
.bkskipas img.image-style-bkskipas {border-radius: 0; float: left; max-height: 115px; object-fit: cover;}
.bkslogowrap img {position:initial;}
.bksacco {position:initial; margin-top: 8px;}
a.bkskipas {border-radius:0;}
.bkstwrap {float:left;  width: 35%;}
}

@media all and (min-width: 900px) { nav.responsive-menu-block-wrapper { display: block; } .responsive-menu-toggle-wrapper.responsive-menu-toggle { display: none; }}


@media only screen and (max-width: 767px) {
	
.promoso { grid-template-columns: 1fr;}
.pdsocials {background-color:#FFF; border: solid 1px #CCC;}
 
.hostwrap {grid-template-columns: 1fr;}
/*filter homepage quick search*/

.view-accos .view-filters {padding-left: 15px;
    padding-right: 15px;
}

.view-accos .form--inline.clearfix  {flex-direction: column;  width: 100%;   padding: 10px 15px;    border-radius: 16px;}
form div.form-item {margin-bottom:0;}

/*accommodatie detailpagina*/
.propcontent {grid-template-columns: 1fr; gap: 0;}
 .accophotos {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;

  }

  .accophotos img {
    flex: 0 0 auto;
    height: 220px;            /* equal height */
    width: auto;
    object-fit: cover;
    border-radius: 8px;
    scroll-snap-align: start;
  }
  
/*Formulier algemeen*/
div#block-custom-webform, .webform-confirmation  {
	border-radius: 0;
	border:none;
}
  
/*fonts en headings*/
h1 {font-size: 1.8rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.2rem;}

/*mobile menu*/
ul.menu li {font-size: 1.2rem;}

/*boekbox*/

iframe.bookbox {background-color:transparent !important;
			border-radius:0;
			bottom:0;
			position: absolute;
			box-shadow:none;
			    width: 100%;
    max-width: 100%;
    box-sizing: border-box;}

/*paragraphs*/

.paragraph--type--strfotolinks .pwrap {grid-template-columns: 1fr;}
.txtleft.paragraph--type--strfotolinks .field--name-field-parimage {order:initial;}

.paragraph--type--header-image .field--name-field-tekst h2 {font-size: 18px; line-height: 20px;}
.paragraph--type--strfotolinks .field--name-field-parimage {width:100%; }
.paragraph--type--strfotolinks .field--name-field-tekst {width: initial; margin-bottom: 3%; min-height:initial;}


.paragraph--type--strfotorechts .field--name-field-parimage {width:100%;}
.paragraph--type--strfotorechts .field--name-field-tekst {width: initial;margin-bottom: 3%;min-height:initial;}
.paragraph--type--strfotorechts img {height:250px;}

.paragraph--type--headerinzet .field--name-field-tekst {right:initial; width:100%;}
.paragraph--type--headerinzet, .paragraph--type--headerinzet .field--name-field-headerimg, .paragraph--type--headerinzet .field--name-field-imgmedia {height:350px;}
.paragraph--type--fotogal3v img {width:100%; padding: 0 15px 15px 15px; max-height: 320px;
    object-fit: cover;}
/* paragraph download ribbon*/
.paragraph--type--ctarib {display:inherit;}
.paragraph--type--ctarib .pwrap {display:initial;}
.paragraph--type--ctarib .field {line-height:initial; min-height: initial; width:100%;    justify-content: end;}
.field--name-field-ctasub {margin-top:5px;}
.field--name-field-ctalink, .field--name-field-ctaribfile  { margin-left:initial; margin-top:10px;} 
.paragraph--type--tfr .field--name-field-tfrtekst, .paragraph--type--tfr .field--name-field-tfrimg {width:100%;}
.field--name-field-tfrtekst {margin-top:10px;}
.paragraph--type--tfr .pwrap {border: solid 1px #CCC;margin: 0 20px;}
.paragraph--type--tfr img {max-height: 275px;}

iframe.bookingcard {width:100%;}

/*diversen*/
.paragraph--type--header-image .field--name-field-tekst h3 {    font-size: 16px !important;}
.bloknav img {height: 150px;object-fit: cover;}
.tip {margin: 22px !important;     padding: 15px 25px;}
#block-views-block-view-forecast-block-1 .views-row {border: none; min-width: 50%; padding: 2%; box-sizing: border-box; text-align: center;}
#block-views-block-view-forecast-block-1 h2 {text-align:center;}
.shwrap:after {width: 86px;
    height: 95px;
    background-size: 85px;}
.shwrap {background:none;}
.row2, .row3, .row4, .row5 { flex: 1 1 100%;
    max-width: 100%;}
.view-cards .row3 {margin:20px;}
.sgstats {padding-right:0;}
.pistekaart {margin-bottom: 20px; padding-right: initial !important;}
.pistekaart i {display:none;}	
.skigebiedkaart img {margin-top:0;}
.view-kaart img {margin-bottom:15px;}
.webcam {width:100%;padding:0; margin-bottom:20px;}
.bedrijven ul {width:95%;margin: 0 0 20px 0; min-height:initial;} 

.footermenuwrap, .footermenuwrap a {display: initial;}
ul.footermenu {padding: 0 !important;  text-align: center; width:100%;} 
ul.footermenu li {padding-left:0;}
span.h2label {position:initial;}
.sglinks a {width:96%;margin-bottom:15px;}
.view-kaart.view-id-kaart.view-display-id-block_2 .view-content div {width:100%;}
.sglinks::after {background-size: 2883px;}
.shrent a {display: table;     margin: auto;}

a.btskihuur {margin-bottom:20px;}
.shrent a {height:60px;}
.btskihuur { min-width: 209px; background-size: 209px;}
.btskiles {min-width: 288px; background-size: 291px;}
.skihuurbox {width:100%;min-height: 350px;}
.column2 {columns:1;}
.actionbuttonlist li a {width:100%;}


/*arrangementen*/

.arr {display:inherit;border-bottom: none;}
.arrcwrap, .arr1, .arr2 {
    display: initial;
    width: 100%;            
}
.arr2 {padding: 10px 25px 10px 10px;}
.arr3  {display: table; width:100%;}
.arrcta {position:initial;}
.abkv {width:100%; padding: 0;}
.arrdetimgwrap {width:100%;}
.arrgal {padding:0;}
.arrgal img {width: 100%; margin-bottom: 15px;}
.arrdfac {column-count:initial;}
.abkv ul li a:before {display:none;}
.arrdet2 h2 {text-align:center;}

/************boekingsknop**********/

.bkplaats, .bk .knop {display:none;}
a.bk {margin-bottom:30px;}
.bkiwrap {width: 35%;}
.bklogowrap {position: absolute;
    right: 0;
    top: 0;
    height:100%;
    width:65%;
    border:none;
    background-color: #eff6fc;
    }
    
.bklogowrap img {max-width: 140px;
    max-height: 35px;}

.bkteas img {float:left;}

.bkwrap {position: absolute;
    right: 0px;
    bottom: -19px;
            min-height: 26px;
        background-color:transparent;}

.bkq {
	height:24px;
	line-height:24px;
	position: initial;
    text-align: center;
    padding: 2px 10px;
    background-color: #325386;
        font-size: 13px;
        border-bottom-left-radius: 6px;}
	
}