/**
 * Custom CSS
 * Use this file to override styles if you feel uncomfortable editing
 * component stylesheets.
 ============================================================================ */
/* COLORS 
roze: #d58a9a
green: #c0cf8d
gee: #f4db6c
painture

*/

* {box-sizing: border-box;
   padding: 0;
   margin:0;}

html {
    background-color: transparent;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.pr-header {
color: #000;
background-color: transparent;
}

.page {
    background-color: 
    transparent;
}

.regions {
     background-color: 
    transparent;
}
/* BRANDING --------------------------------------------------------- */

#block-corpus-studio-branding { 
z-index: 300;
position: fixed;
background-color: #fff;
width: 100%;
padding-bottom: 15px;}


.site-branding {width: 100%; left: 0; position: relative; top: 0;}
.site-branding__logo-link {
    display: block;
    padding-right: 1rem; min-width: 150px; width: 150px;
    margin-top: 30px;
}
.site-branding__logo-img { width: 100%; height: auto; margin-left: 20%;}
.site-branding__name {color: #d58a9a; 
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: bolder;
font-size: 2em;
margin-left: 30px;
margin-top: 25px;}

.site-branding__name a:link {color: #d58a9a; }
.site-branding__name a:active {color: #d58a9a; }
.site-branding__name a:hover {color: #000; }
.site-branding__name a:visited {color: #d58a9a; }

.pr-navbar {
    color: #ffffff;
    background: none;
}

/* SOC MED -----------------------------------------------------------  */

#block-socmed {
    right: 63px;
    position: fixed;
    z-index:310;
   }

.socmed {float: left;}

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



#bel_button {
    background-image: url(/sites/default/files/inline-images/phone_hover.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    margin-right: 2px;
}

#bel_button img{
    opacity: 1;
     transition: 0.5s;
}

#bel_button img:hover {
    opacity: 0.2;
}

#instagram_button {
    background-image: url(/sites/default/files/inline-images/instagram_hover.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    margin-right: 2px;
}

#instagram_button img{
    opacity: 1;
     transition: 0.5s;
}

#instagram_button img:hover {
    opacity: 0.2;
}

#facebook_button {
    background-image: url(/sites/default/files/inline-images/facebook_hover.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    margin-right: 2px;
}

#facebook_button img{
    opacity: 1;
     transition: 0.5s;
}

#facebook_button img:hover {
    opacity: 0.2;
}

#webshop_button {
    background-image: url(/sites/default/files/inline-images/webshop.jpg);
    background-size: 94px 40px;
    width: 94px;
    height: 40px;
    margin-right: 2px;
}

#webshop_button img{
    opacity: 1;
     transition: 0.5s;
}

#webshop_button img:hover {
    opacity: 0.2;
}

#youtube {
    background-image: url(/sites/default/files/inline-images/youtube_hover.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    margin-right: 2px;
}


#youtube img{
    opacity: 1;
     transition: 0.5s;
}

#youtube img:hover {
    opacity: 0.2;
}

#mail_button {
    background-image: url(/sites/default/files/inline-images/mail_hover.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    margin-right: 2px;
}

#mail_button img{
    opacity: 1;
     transition: 0.5s;
}

#mail_button img:hover {
    opacity: 0.2;
}


/* MENU ------------------------------------------------------------------------------ */

.ms-overlay .rm-block__content {
  background: none !important;
  max-height: 1px;
  margin-top: -20px;
}

.rm-block__content .menu {
  position: fixed;
  width: 100%;
}

/*button */
.ms-overlay .rm-toggle {
  background-color: #fff;
  margin-top: -15px;
}

.ms-overlay .rm-toggle:hover {
  background-color: #fff;
  margin-top: -15px;
}

.rm-toggle__icon {
  fill: #000;
}


.ms-overlay .rm-toggle {
  display: block;
  position: fixed;
  padding: 0;
  z-index: 1000;
  opacity: 1;
  border-radius: 0px;
  top: 1rem;
  right: 1rem;
}

/*menulijst ---*/
.ms-overlay.rm-is-open .rm-block__content .menu {
  background-color: transparent;
  margin-top: 50px;
}

.ms-overlay .rm-block__content .menu .menu__link {
  color: #000;
  background-color: #fff;
border-bottom-color: #000;
  border-bottom-style: solid;
  border-bottom-width: thin;
  margin-top: 6px;
}
.ms-overlay .rm-block__content .menu .menu__link.is-active {
  color: #000;
  background-color: #fff;
border-bottom-color: #000;
  border-bottom-style: solid;
  border-bottom-width: thin;
  margin-top: 6px;
}


.ms-overlay .rm-block__content .menu .menu__link:hover, 
.ms-overlay .rm-block__content .menu .menu__link:focus, .ms-overlay .rm-block__content  {
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
}

/*

#block-corpus-studio-corpusmenu {position: relative; z-index: 310; margin-top: 40px;}

#block-corpus-studio-corpusmenu ul li {
border-bottom-color: #000;
border-bottom-width: thin;
border-bottom-style: solid;
border-top-color: #000;
border-top-width: thin;
border-top-style: solid;}

#superfish-corpus-menu-toggle span { display: none;}

div.sf-accordion-toggle.sf-style-white a {
    background: #fff;
      color: #000;
      display: inline-block;
      font-weight: bold;
      padding: 1em 2em 1em 1em;
      width: 40px;
      height: 40px;
      position: relative;
      margin-top: -9px;
      border-radius: 0px;
      border: none;
}

div.sf-accordion-toggle.sf-style-white a::after {
    content: "≡";
}



div.sf-accordion-toggle.sf-style-white a:hover {
    color: #000 !important;
    background: #fff !important;
}

#superfish-corpus-menu-accordion {margin-top:90px;}

ul.sf-menu.sf-style-white li:hover, ul.sf-menu.sf-style-white li.sfHover, ul.sf-menu.sf-style-white a.is-active, ul.sf-menu.sf-style-white a:focus, ul.sf-menu.sf-style-white a:hover, ul.sf-menu.sf-style-white span.nolink:hover {
  background: #fff;
  outline: 0;
}


div.sf-accordion-toggle.sf-style-white a:hover {
    color: red;
    background: #000;
    }


div.sf-accordion-toggle.sf-style-white a.sf-expanded, ul.sf-menu.sf-style-white.sf-accordion li.sf-expanded {
    background: #fff;
}

.sf-accordion-toggle {
    float: right;
right: 10px;
position: fixed;
padding-top: 8px;
}

ul.sf-menu.sf-accordion.sf-expanded, ul.sf-menu.sf-accordion li.sf-expanded > ul {
    left: auto !important;
    position: relative;
    top: auto !important;

}

ul.sf-menu.sf-style-white li, ul.sf-menu.sf-style-white.sf-navbar {
    background: #fff;
}


ul.sf-menu.sf-style-white a, ul.sf-menu.sf-style-white a:visited, ul.sf-menu.sf-style-white span.nolink {
    border: 0 none;
    color: #000;
    padding: 0.75em 1em;
        padding-right: 1em;
    padding-right: 2em !important;
    text-align: right;
}


ul.sf-menu.sf-style-white li:hover, ul.sf-menu.sf-style-white li.sfHover, ul.sf-menu.sf-style-white a:focus, ul.sf-menu.sf-style-white a:hover, ul.sf-menu.sf-style-white span.nolink:hover {
    background: #000;
    outline: 0;
    color: #fff;
    text-decoration: none;
}
ul.sf-menu.sf-style-white .sf-depth-1 li:first-child {display: none;}

ul.sf-menu.sf-style-white .sf-depth-1 li {background: none;}

/*
/* paginas onder branding*/

.l-main {max-width: 75em; margin: auto; }
.node {
    background-color: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 170px;
}


.node--type-homepage .node__title {display: none;}

/* USER LOGIN ---------------------------------------*/

#user-login-form {margin-top:  180px;}

/* HOMEPAGE ----------------------------------------------------------------------------- */

/* videoblok */

.videocontainer {
    margin-top: 0px;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#block-bovenblok img.align-center, figure.align-center, .field-type-image__figure.align-center {
    margin-bottom: 0rem;
}

#block-bovenblok img.align-center {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

#block-bovenblok {position: relative; left: 0;
padding: 0;
    width: 100vw;
    height: 50vw;
    margin-top: 0px;
}

.l-r {
    flex: 0 0 auto;
    padding: 0;
    width: 100%;
}
.l-rw {
    padding: 0;
}

.l-rw {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: none;
    width: 100%;
}

/* WRAPPER ROND DE PUZZELBLOKKEN --------------------------------------- */

.rid-content-suffix {position: absolute; left: 0;
padding: 0;
    width: 100vw;
    padding-bottom: 40px;
    margin-top: 80px;
}


#block-views-block-homepage-block-1 {position: absolute; left: 0;
padding: 0;
    width: 100vw;
    padding-bottom: 20%;
    margin-top: 150px;
}




ul {

    left: 0;
padding: 0!important;}


ul li {list-style: none;
margin-top: -6px !important;}

/* PUZZEL HOME ---------------------------------------------------------------*/

.puzzel {
padding: 0 !important;
float: left;}


.views-field-field-fotoboven img {width: 100%; height: auto; }

.views-field-field-fotoboven img:hover {
    width: 100%;
    height: auto;
    opacity: 0.5;
}




.views-field-field-puzzelfotoonder img {width: 100%; height: auto;
 opacity: 1;
  transition: 0.5s;
padding: }

.views-field-field-puzzelfotoonder img:hover {opacity: 0; padding:}

/*grote foto*/

.puzzel:first-child  {
        display: none;
	width: 100vw;
    height: 50vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:first-child .views-field-field-puzzelfotoonder {margin-top: -50%;}

/*eerste jaar */  

.puzzel:nth-child(2) {
	width: 20vw;
	height: 20vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
    }

.puzzel:nth-child(2) .views-field-field-puzzelfotoonder {margin-top: -100%;}


/*okan */  

.puzzel:nth-child(3) {
	width: 20vw;
	height: 20vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
    }
.puzzel:nth-child(3) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*Sense*/  

.puzzel:nth-child(4) {
    width: 20vw;
	height: 20vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}
.puzzel:nth-child(4) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*starter */  

.puzzel:nth-child(5) {
	width: 40vw;
	height: 60vw;
margin-left: 60% !important;
margin-top: -20% !important;}
.puzzel:nth-child(5) .views-field-field-puzzelfotoonder {margin-top: -150%;}

/*creatie */  


.puzzel:nth-child(6) {
width: 20vw;
	height: 20vw;
	margin-top: -40% !important;
	margin-lef: 0% !important;
}
.puzzel:nth-child(6) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*maatschppij */ 

.puzzel:nth-child(7) {
	width: 20vw;
	height: 20vw;
margin-top: -40% !important;
margin-left: 20% !important;}

.puzzel:nth-child(7) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*stem */  

.puzzel:nth-child(8) {
	width: 20vw;
	height: 20vw;
margin-top: -40% !important;
margin-left: 40% !important;}

.puzzel:nth-child(8) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*zorg */
.puzzel:nth-child(9) {
	width: 20vw;
	height: 40vw;
	margin-top: -20% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(9) .views-field-field-puzzelfotoonder {margin-top: -200%;}

/*structuur */

.puzzel:nth-child(10) {
	width: 40vw;
	height: 20vw;
margin-top: -20% !important;
margin-left: 0% !important;
}

.puzzel:nth-child(10) .views-field-field-puzzelfotoonder {margin-top: -50%;}

/*wie is wie */
.puzzel:nth-child(11) {
	width: 20vw;
	height: 20vw;
margin-top: 0% !important;
margin-left: 0% !important;

}

.puzzel:nth-child(11) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*virtueel */ 
.puzzel:nth-child(12) {
	width: 60vw;
	height: 40vw;
	opacity: 1;
	margin-top: 0% !important;
	margin-left: 0% !important;


}
.puzzel:nth-child(12) .views-field-field-puzzelfotoonder {margin-top: -66.7%;}


/*out of the box */ 

.puzzel:nth-child(13) {
    width: 40vw;
    height: 40vw;
	margin-top: -20% !important;
	margin-left: 0% !important;	
}
.puzzel:nth-child(13) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*internaat */ 


.puzzel:nth-child(14) {
    width: 40vw;
    height: 60vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(14) .views-field-field-puzzelfotoonder {margin-top: -150%;}
/*op weg naar's */ 

.puzzel:nth-child(15) {
width: 20vw;
height: 40vw;
		margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(15) .views-field-field-puzzelfotoonder {margin-top: -200%;}

/*solliciteren */ 

.puzzel:nth-child(16) {
	width: 20vw;
	height: 20vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(16) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*werkgroepen */ 

.puzzel:nth-child(17) {
width: 40vw;
	height: 40vw;
	margin-top: -40% !important;
	margin-left: 0% !important;

}

.puzzel:nth-child(17) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*stories */ 

.puzzel:nth-child(18) {
	width: 60vw;
	height: 40vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(18) .views-field-field-puzzelfotoonder {margin-top: -66.7%;}

/*schoolboeken */ 

.puzzel:nth-child(19) {
	width: 40vw;
	height: 40vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}
.puzzel:nth-child(19) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*vrij*/ 

.puzzel:nth-child(20) {
    display: none;
	width: 100vw;
	height: 40vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(20) .views-field-field-puzzelfotoonder {margin-top: -400%;}


/* uitzetten melding adaptivethemes.com */

.attribution .attribution__link {
    color: #363636;
    display: none;
}



/*youtube video */
.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-field-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* basispagina met titel */

.node--type-basispagina-met-titel h2 {color: #d58a9a; font-weight: bolder; text-transform: uppercase;}
.node--type-basispagina-met-titel h3 {color: #d58a9a; font-weight: lighter;}
.node--type-basispagina-met-titel ul li {line-height: 2em; }
.node--type-basispagina-met-titel ul li::before { /* add the new bullet point */
  display: inline-block;
    content: '';
    -webkit-border-radius: 0.375rem;
    border-radius: 0.375rem;
    height: 0.75rem;
    width: 0.75rem;
    margin-right: 0.5rem;
    background-color: #bdbdbd;
}


/*custom pagina's met titel */

.node--id-224 p strong {color: #d58a9a;}
.node--id-224 p strong a {color: #d58a9a; text-decoration:  underline;}

.node--id-224 ul li strong {color: #d58a9a;}


.node--id-223 p strong {color: #000;}
.node--id-223 p strong a {color: #d58a9a; text-decoration:  underline;}

.node--id-223 ul li strong {color: #d58a9a;}
.node--id-223 h4 {color: #d58a9a;}

/* story */

.node--type-story h2 { color: #d58a9a !important; font-size: 2.2em;  font-weight: bolder;}

.node--type-story .group-right {padding-left: 5%;}

.node--type-story .field-node--field-linkadres { margin-top: 150px;}

.node--type-story .field-node--field-linkadres a:link {
    color: #fff;
    background-color: #d58a9a;
    padding: 10px;
    border-radius: 5px;
    border-color: #d58a9a;
    border-width: medium;
    border-style: solid;
   
}

.node--type-story .field-node--field-linkadres a:active {
    color: #fff;
    background-color: #d58a9a;
    padding: 10px;
    border-radius: 5px;
    border-color: #d58a9a;
    border-width: medium;
    border-style: solid;
   
}

.node--type-story .field-node--field-linkadres a:hover {
    color: #fff;
    background-color: #000;
    padding: 10px;
    border-radius: 5px;
    border-color: #d58a9a;
    border-width: medium;
    border-style: solid;
   
}
.node--type-story .field-node--field-linkadres a:visited {
    color: #fff;
    background-color: #d58a9a;
    padding: 10px;
    border-radius: 5px;
    border-color: #d58a9a;
    border-width: medium;
    border-style: solid;
   
}

/* MAIN PAGE -----------------------------------------------------*/

#block-corpus-studio-local-tasks {margin-top: 200px}

#block-corpus-studio-content {margin-top: 30px;}
.view-header {margin-top: 150px}

.view-header h1 {color: #c88a93;  font-weight: bolder;}
.view-header h1 em {color: #c88a93;  font-weight: lighter; font-style: italic;}

/*FOOTER */

#footer {position: fixed;
width: 100%;
    bottom: 0;
}

.pr-footer {color: #000;
    background: none;

    padding-top: 0px;
}


#block-corpus-studio-footer { width: 100%; background-color: #fff !important; padding-top: 15px; 
position: fixed; bottom: -20px;     border-top-color: #000;
    border-top-style: solid;
    border-top-width: thin; }

#block-corpus-studio-footer ul { width: 80%; margin: auto;}
#block-corpus-studio-footer ul li {display: inline-block;}
#block-corpus-studio-footer ul li a:link {color: #000; text-transform: uppercase; font-size: 0.8em; border-right-color: #000; border-right-width: thin; border-right-style: solid; padding-right: 10px;}
#block-corpus-studio-footer ul li a:active {color: #000;}
#block-corpus-studio-footer ul li a:hover {color: #d58a9a; text-decoration: none;}
#block-corpus-studio-footer ul li a:visited {color: #000f;}

/* KEUZEKNOPPEN VOOR DE PRODUCTPAGINA'S ---------------------------*/
#features {background: none; border-bottom-color: #c88a93; border-bottom-width: medium; border-bottom-style: solid; padding-bottom: 20px; }

.keuzeknoppen {
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
  margin-top: 130px;
}

.keuzeknoppen .keuzeknop {
  height: 250px;
  width: 250px;
  display:inline-block;
  margin: 10px;
  vertical-align: top;
}

.keuzeknop .views-field-title a {color: #000; font-size: 1.2em; text-transform: uppercase;  height: 30px;}
.keuzeknop .views-field-title a:link {color: #000; font-size: 1.2em; text-transform: uppercase;  height: 30px;}
.keuzeknop .views-field-title a:visited {color: #000; font-size: 1.2em; text-transform: uppercase;  height: 30px;}
.keuzeknop .views-field-title a:hover {color: #c88a93; font-size: 1.2em; text-transform: uppercase;  height: 30px; text-decoration: none;}
.keuzeknop .views-field-title a:active {color: #000; font-size: 1.2em; text-transform: uppercase;  height: 30px;}



/* PRODUCTPAGINA'S -------------------*/
.l-pr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#block-corpus-studio-page-title h1 {text-align: center; color: #c88a93; margin-top: 83px;}

/*PRODUCTEN ---------------------------------------------------*/

.product img {border-color: #c88a93; border-width: medium; border-style: solid; }
.product h2 {color: #c88a93; font-size: 1em; text-transform: uppercase;  height: 30px;}
.product p {font-size: 0.7em; color: #000; line-height: 1.2em; min-height: 80px; max-height: 80px;}
.taxonomy-term__title {display: none;}
.field-entity-reference-type-taxonomy-term .field__item-wrapper::after {
  content: " ";
  display: none;
}
.field-node-field-aantal-personen {max-height: 25px;}
.field-node-field-aantal-personen img {float: left;}
.field-entity-reference-type-taxonomy-term .field__item {
  margin: 0 0.200rem 0;
    margin-top: 0px;
    margin-right: 0.200rem;
    margin-bottom: 0px;
    margin-left: 0.200rem;
  display: inline-block;
}

.field-node--field-productlink {margin-top: 32px;
  width: 209px;
  height: 27px;  }
.field-node--field-productlink a { border-color: #c88a93;
  border-width: thin;
  border-style: solid;
  color: #c88a93;
  color: #c88a93; font-size: 0.8em; background-color: #fff; width: 209px; height: 27px; display: block;}
.field-node--field-productlink a:link { border-color: #c88a93;
  border-width: thin;
  border-style: solid;
  color: #c88a93; color: #c88a93; font-size: 0.6em; background-color: #fff; width: 209px; height: 27px; display: block; }
.field-node--field-productlink a:visited { border-color: #c88a93;
  border-width: thin;
  border-style: solid;
  color: #c88a93; color: #c88a93; font-size: 0.6em; background-color: #fff; width: 209px; height: 27px; display: block; }
.field-node--field-productlink a:hover { border-color: #c88a93; text-decoration: none;
  border-width: thin;
  border-style: solid;
  color: #c88a93; color: #fff; font-size: 0.6em; background-color: #c88a93; width: 209px; height: 27px; display: block;}
.field-node--field-productlink a:active { border-color: #c88a93;
  border-width: thin;
  border-style: solid;
  color: #c88a93; color: #c88a93; font-size: 0.6em; background-color: #fff; width: 209px; height: 27px; display: block; }


.producten {
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
    vertical-align: top;
}

.producten .product {
  height: 470px;
  width: 250px;
  display:inline-block;
  margin: 10px;
  vertical-align: top;
}

.node--type-product {margin-top: 0px;}

/* LINK NAAR WEBSHOP */


.field-node--field-link-webshop {margin-top: -75px;
  width: 205px;
  height: 205px;
  position: absolute;
  right: 50px;
  float: right;
  z-index: 50;  }

.field-node--field-link-webshop a { 
  border-color: #c88a93;
  border-width: medium;
  border-style: solid;
  color: #c88a93;
  font-size: 0.6em;
  background-color: #fff;
  width: 205px;
  height: 205px;
  text-align: center;
  font-size: 0.7em;
  padding-top: 0px;
  z-index: 900;
  position: relative;
  border-radius: 200px;
  vertical-align: middle;
  display: table-cell;
  font-size: 1em;
  }

.field-node--field-link-webshop a:link {
  border-color: #c88a93;
  border-width: medium;
  border-style: solid;
  color: #fff;
  background-color: #c88a93;
  width: 205px;
  height: 205px;
  text-align: center;
  padding-top: 0px;
  z-index: 200;
  position: relative;
  border-radius: 200px;
  vertical-align: middle;
  display: table-cell;
  font-size: 1em;
}
.field-node--field-link-webshop a:visited { 
  border-color: #c88a93;
  border-width: medium;
  border-style: solid;
  color: #c88a93;
  font-size: 0.6em;
  background-color: #fff;
  width: 205px;
  height: 205px;
  text-align: center;
  font-size: 0.7em;
  padding-top: 0px;
  z-index: 900;
  position: relative;
  border-radius: 200px;
  vertical-align: middle;
  display: table-cell;
  font-size: 1em;
  }

.field-node--field-link-webshop a:hover {   border-color: #c88a93;
  border-width: medium;
  border-style: solid;
  text-decoration: none;
  color: #000;
  font-size: 0.6em;
  background-color: #f4da74;
  width: 205px;
  height: 205px;
  text-align: center;
  font-size: 0.7em;
  padding-top: 0px;
  border-radius: 200px;
  vertical-align: middle;
  display: table-cell;
  font-size: 1em;
}
.field-node--field-link-webshop a:active {   border-color: #c88a93;
  border-width: medium;
  border-style: solid;
  color: #c88a93;
  font-size: 0.6em;
  background-color: #fff;
  width: 205px;
  height: 205px;
  text-align: center;
  font-size: 0.7em;
  padding-top: 0px;
  border-radius: 200px;
  vertical-align: middle;
  display: table-cell;
  font-size: 1em;
}

  /* fotos op pagina's ---------------------- */

  .field-node-field-foto {
  width: 100%;
  margin: 10px auto;
  position: relative;
  text-align:center;
    vertical-align: top;
}

.field-node-field-foto .field__item {
  height: 480px;
  width: 270px;
  display:inline-block;
  margin: 10px;
  vertical-align: top;
}

.view-in-de-media {margin-top: 100px;}

.view-in-de-media .views-field-title {margin-top: 15px;}

.view-in-de-media a {color: #000; font-size: 2em; }
.view-in-de-media a:link {color: #000; font-size: 2em; text-decoration: none;}
.view-in-de-media a:hover {color: #c88a93; font-size: 2em;}

.view-in-de-media .datetime {background-color: #c88a93; padding: 6px; color: #fff; }
.views-field-field-media-datum {margin-top:  30px;}




/* RESPONSIVE DESIGN -----------------------------------------------------------*/




/* RESPONSIVE DESIGN PUZZEL */
@media only screen and (max-width: 1202px) { #rid-content {margin-left: 0.5%;}
#block-views-block-homepage-block-1 {
  margin-top: 0px;
}
}


@media only screen and (max-width: 900px) {
    
 #block-corpus-studio-content {
    margin-top: 74px;
  }
  
.site-branding__logo-img {
    width: 50%;
    height: auto;
    margin-left: 20%;
}
    
    
  
#footer {position: relative;
width: 100%;
bottom: 0 !important;
}
    
.l-attribution {background-color: #fff !important; 
}
  

}

@media only screen and (max-width: 666px) {
.ds-2col-stacked-fluid > .group-right {
    float: none;
    width: 100%;
    padding-left: 0px;
}
    
.ds-2col-stacked-fluid > .group-left {
    float: none;
    width: 100%;
    padding-left: 0px;
}
    
.ds-2col-stacked > .group-left {
    float: none;
    width: 100%;
}
    .ds-2col-stacked > .group-right {
    float: none;
    width: 100%;
}
    
}

@media only screen and (max-width: 568px) { 
    
    /* puzzelblok extra padding onderaan */
    
    #block-views-block-homepage-block-1 {padding-bottom: 30%; }
    
 /* footer - partners */
    
.partners { width: 100vw;
	height: 25vw;
	margin-top: 0% !important;
	margin-left: 0% !important;}
    
.partners .partner { width: 100px; height: 50px;}
    
.partners img {width: 100%; height: auto;}
    
    
}


@media only screen and (max-width: 450px) {
    
html, body {max-width: 100%; overflow-x: none; }
    

.pr-header { background-color: transparent; }
    
.site-branding__name {color: #d58a9a; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: bolder; font-size: 1.2em; margin-left: -50px; margin-top: 30px;}

.site-branding__logo-link {
  display: block;
  min-width: 150px;
  width: 230px;
  margin-top: 5px;
  margin-left: -28px;
}
    
/*button */
.ms-overlay .rm-toggle {
  background-color: #fff;
  margin-top: -20px;
}

.ms-overlay .rm-toggle:hover {
  background-color: #fff;
  margin-top: -20px;
}

/*socmed*/
    
    
#bel_button {
    background-image: url(/sites/default/files/inline-images/phone_hover.png);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}


#instagram_button {
    background-image: url(/sites/default/files/inline-images/instagram_hover.png);
     background-size: 30px 30px;
    width: 30px;
    height: 30px;
}


#facebook_button {
    background-image: url(/sites/default/files/inline-images/facebook_hover.png);
     background-size: 30px 30px;
    width: 30px;
    height: 30px;
}


#youtube {
    background-image: url(/sites/default/files/inline-images/youtube_hover.png);
     background-size: 30px 30px;
    width: 30px;
    height: 30px;
}


#mail_button {
    background-image: url(/sites/default/files/inline-images/mail_hover.png);
     background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

#webshop_button {
  background-image: url(/sites/default/files/inline-images/webshop.jpg);
  background-size: 71px 30px;
  width: 71px;
  height: 30px;
  margin-right: 2px;
}

.sf-accordion-toggle {
    float: right;
    right: 10px;
    position: fixed;
    margin-top: -7px;
}

/* menu */

#block-corpus-studio-corpusmenu-2 {z-index:  600;}
.ms-overlay.rm-is-open .rm-block__content .menu {
  background-color: transparent;
  margin-top: 62px;
}

/* media pagina painture */

.view-in-de-media {margin-top: 100px; width: 90%; margin-left: auto;
    margin-right: auto; }

.view-in-de-media a {color: #000; font-size: 1.2em;}
.view-in-de-media a:link {color: #000; font-size: 1.2em; text-decoration: none;}
.view-in-de-media a:hover {color: #c88a93; font-size: 1.2em;}


    

    
/* PUZZEL HOME */
    
    
.puzzel:first-child  {
display: none;
	width: 100vw;
    height: 100vw;
	margin-top: 0% !important;
	margin-left: 0% !important;

}
    
/*eerste jaar */  

.puzzel:nth-child(2) {
	width: 50vw;
	height: 50vw;
	margin-top: 150% !important; /* bij grote foto zichtbaar wijzigen in 100% */
	margin-left: 0% !important;
    }

.puzzel:nth-child(2) .views-field-field-puzzelfotoonder {margin-top: -100%;}


/*okan */  

.puzzel:nth-child(3) {
	width: 50vw;
	height: 50vw;
	margin-top: 150% !important; /* bij grote foto zichtbaar wijzigen in 100% */
	margin-left: 0% !important;
    }
.puzzel:nth-child(3) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*Sense*/  

.puzzel:nth-child(4) {
    width: 50vw;
	height: 50vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}
.puzzel:nth-child(4) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*starter */  

.puzzel:nth-child(5) {
	width: 100vw;
	height: 60vw;
margin-left: 0 !important;
margin-top: -250% !important;
}
.puzzel:nth-child(5) .views-field-field-puzzelfotoonder {margin-top: -150%;}

/*creatie */  


.puzzel:nth-child(6) {
width: 50vw;
	height: 50vw;
	margin-top: -50% !important;
	margin-left: 50% !important;
}
.puzzel:nth-child(6) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*maatschppij */ 

.puzzel:nth-child(7) {
	width: 50vw;
	height: 50vw;
margin-top: 0% !important;
margin-left: 0 !important;}

.puzzel:nth-child(7) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*stem */  

.puzzel:nth-child(8) {

	width: 50vw;
	height: 50vw;
margin-top: -50% !important;
margin-left: 50% !important;}

.puzzel:nth-child(8) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*zorg */
.puzzel:nth-child(9) {

	width: 100vw;
	height: 100vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(9) .views-field-field-puzzelfotoonder {margin-top: -200%;}

/*structuur */

.puzzel:nth-child(10) {

	width: 100vw;
	height: 100vw;
margin-top: 100% !important;
margin-left: 0% !important;
}

.puzzel:nth-child(10) .views-field-field-puzzelfotoonder {margin-top: -50%;}

/*wie is wie */
.puzzel:nth-child(11) {
	width: 100vw;
	height: 100vw;
margin-top: -50% !important;
margin-left: 0% !important;

}

.puzzel:nth-child(11) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*virtueel */ 
.puzzel:nth-child(12) {
	width: 100vw;
	height: 100vw;
	opacity: 1;
	margin-top: 0% !important;
	margin-left: 0% !important;


}
.puzzel:nth-child(12) .views-field-field-puzzelfotoonder {margin-top: -66.7%;}


/*out of the box */ 

.puzzel:nth-child(13) {
    width: 100vw;
    height: 100vw;
	margin-top: -34% !important;
	margin-left: 0% !important;	
}
.puzzel:nth-child(13) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*internaat */ 


.puzzel:nth-child(14) {
    width: 100vw;
    height: 100vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(14) .views-field-field-puzzelfotoonder {margin-top: -150%;}
/*op weg naar's */ 

.puzzel:nth-child(15) {
width: 100vw;
height: 100vw;
		margin-top: 50% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(15) .views-field-field-puzzelfotoonder {margin-top: -200%;}

/*solliciteren */ 

.puzzel:nth-child(16) {
	width: 100vw;
	height: 100vw;
	margin-top: 100% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(16) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*werkgroepen */ 

.puzzel:nth-child(17) {
width: 100vw;
	height: 100vw;
	margin-top: 0% !important;
	margin-left: 0% !important;

}

.puzzel:nth-child(17) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*stories */ 

.puzzel:nth-child(18) {
	width: 100vw;
	height: 100vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(18) .views-field-field-puzzelfotoonder {margin-top: -66.7%;}

/*schoolboeken */ 

.puzzel:nth-child(19) {
	width: 100vw;
	height: 100vw;
	margin-top: -33% !important;
	margin-left: 0% !important;
}
.puzzel:nth-child(19) .views-field-field-puzzelfotoonder {margin-top: -100%;}

/*vrij*/ 

.puzzel:nth-child(20) {
	width: 100vw;
	height: 100vw;
	margin-top: 0% !important;
	margin-left: 0% !important;
}

.puzzel:nth-child(20) .views-field-field-puzzelfotoonder {margin-top: -400%;}
    



@media only screen and (max-width: 320px) { 
    
    /* branding */
    
    .site-branding__text {display: none;}
.site-branding__logo-img {
    width: 50%;
    height: auto;
    margin-left: 55%;
}
img .site-branding__logo-img {
    margin-top: 20px;
}
    
.site-branding__logo-link {
    display: block;
    padding-right: 1rem;
    min-width: 150px;
    width: 150px;
    margin-top: 30px;
    padding-top: 20px;
}
    
    
    .sf-accordion-toggle {
    float: right;
    right: 10px;
    position: absolute;
    margin-top: -17px;
}
    
    h1, .h1 {
    font-size: 1.625rem;
}

    

    }