/** 
 * main.css
 * 
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 * 7. Animations
 */

 /* COLOR SETTINGS FOR WHOLE SHEET
 */
 :root{
  --kleurheader: #1F1912;
  --kleur1: #FAF9F7;
  --kleur2: #4C3F2E;
  --kleur3:rgb(192,173,149);
  --kleur4: #222;
  --kleurdetails:;
  --kleurtekst1:;
  --kleurtekst2:;
  accent-color: #ddd;
 }

 ::selection {
  background-color: #f3b70f;
}

/*********************************************************************
 * 1. General HTML tags
 *
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
 
  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

body {
  /*max-width: 1600px;*/
  margin: 0 auto;
}

.behandeling {

  background: radial-gradient(circle, var(--kleur3) 0%, rgba(163,136,101,1) 100%);
}
.news_story {
  background-color: #f3f4f7;
  background-image: linear-gradient(315deg, #f3f4f7 0%, #caccd1 74%); 
}

#logo {
  position: relative;
  left: 0;
  padding-top: 0;
  margin: 0;
  background: url(../images/home-logo.png);
  width: 112px;
  height: 102px;
  text-indent: -9999px;
}
.navbar {
  background-color: transparent;
}
.navbar-item > #logo {
  background-color:var(--kleurheader);
  border: 1px solid #333;
  border-radius: 20%;
}

a.navbar-item:hover {
  color: var(--kleur2);
  border-radius: 0 0 20% 20%;
}

input {
  caret: #f3b70f underscore;
}

body,
td,
input[type="text"],
textarea {
  font-family: "Roboto", sans-serif;
  font-size: 105%;
  line-height: 1.8em;
  color: #444;
}

/*
hr {
	overflow: visible;
	text-align: center;
	border: 1;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

hr:after {
    content: "GA";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 0.5em;
    padding: 0 0.25em;
    color:rgba(255, 255, 255, 0.5)
}
*/

hr {content: "";
  width:100%;
  height: 9px;
  Background-image: url("data:image/svg+xml;utf8,<svg width='500' height='9' viewBox='0 0 500 9' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M104.119 8.79005L113 0L113.213 0.211034L104.333 9H104.331L104.119 8.79005ZM99.333 9L108.213 0.211034L108 0L99.1187 8.79005L99.3308 9H99.333ZM94.333 9L103.213 0.211034L103 0L94.1187 8.79005L94.3308 9H94.333ZM89.333 9L98.2132 0.211034L98 0L89.1187 8.79005L89.3308 9H89.333ZM84.333 9L93.2132 0.211034L93 0L84.1187 8.79005L84.3308 9H84.333ZM79.333 9L88.2132 0.211034L88 0L79.1187 8.79005L79.3308 9H79.333ZM74.333 9L83.2131 0.211034L82.9999 0L74.1187 8.79005L74.3308 9H74.333ZM69.333 9L78.2131 0.211034L77.9999 0L69.1187 8.79005L69.3308 9H69.333ZM64.333 9L73.2131 0.211034L72.9999 0L64.1187 8.79005L64.3308 9H64.333ZM59.333 9L68.2131 0.211034L67.9999 0L59.1186 8.79005L59.3308 9H59.333ZM54.333 9L63.2131 0.211034L62.9999 0L54.1186 8.79005L54.3308 9H54.333ZM49.333 9L58.2131 0.211034L57.9999 0L49.1186 8.79005L49.3308 9H49.333ZM44.333 9L53.2131 0.211034L52.9999 0L44.1187 8.79005L44.3308 9H44.333ZM39.333 9L48.2131 0.211034L47.9999 0L39.1187 8.79005L39.3308 9H39.333ZM34.333 9L43.2131 0.211034L42.9999 0L34.1187 8.79005L34.3308 9H34.333ZM29.333 9L38.2131 0.211034L37.9999 0L29.1187 8.79005L29.3308 9H29.333ZM24.333 9L33.2131 0.211034L32.9999 0L24.1187 8.79005L24.3308 9H24.333ZM19.333 9L28.2131 0.211034L27.9999 0L19.1187 8.79005L19.3308 9H19.333ZM14.333 9L23.2131 0.211034L22.9999 0L14.1187 8.79005L14.3308 9H14.333ZM9.33297 9L18.2131 0.211034L17.9999 0L9.11865 8.79005L9.33078 9H9.33297ZM4.33297 9L13.2131 0.211034L12.9999 0L4.11865 8.79005L4.33078 9H4.33297ZM0 8.33982L8.21314 0.211034L7.99991 0L0 7.91775V8.33982ZM0 3.39117L3.21314 0.211034L2.99991 0L0 2.9691V3.39117ZM109.333 9H109.331L109.119 8.79005L118 0L118.213 0.211034L109.333 9ZM114.333 9H114.331L114.119 8.79005L123 0L123.213 0.211034L114.333 9ZM119.333 9H119.331L119.119 8.79005L128 0L128.213 0.211034L119.333 9ZM124.333 9H124.331L124.119 8.79005L133 0L133.213 0.211034L124.333 9ZM129.333 9H129.331L129.119 8.79005L138 0L138.213 0.211034L129.333 9ZM134.333 9H134.331L134.119 8.79005L143 0L143.213 0.211034L134.333 9ZM139.333 9H139.331L139.119 8.79005L148 0L148.213 0.211034L139.333 9ZM144.333 9H144.331L144.119 8.79005L153 0L153.213 0.211034L144.333 9ZM149.333 9H149.331L149.119 8.79005L158 0L158.213 0.211034L149.333 9ZM154.333 9H154.331L154.119 8.79005L163 0L163.213 0.211034L154.333 9ZM159.333 9H159.331L159.119 8.79005L168 0L168.213 0.211034L159.333 9ZM164.333 9H164.331L164.119 8.79005L173 0L173.213 0.211034L164.333 9ZM169.333 9H169.331L169.119 8.79005L178 0L178.213 0.211034L169.333 9ZM174.333 9H174.331L174.119 8.79005L183 0L183.213 0.211034L174.333 9ZM179.333 9H179.331L179.119 8.79005L188 0L188.213 0.211034L179.333 9ZM184.333 9H184.331L184.119 8.79005L193 0L193.213 0.211034L184.333 9ZM189.333 9H189.331L189.119 8.79005L198 0L198.213 0.211034L189.333 9ZM194.333 9H194.331L194.119 8.79005L203 0L203.213 0.211034L194.333 9ZM199.333 9H199.331L199.119 8.79005L208 0L208.213 0.211034L199.333 9ZM204.333 9H204.331L204.119 8.79005L213 0L213.213 0.211034L204.333 9ZM209.333 9H209.331L209.119 8.79005L218 0L218.213 0.211034L209.333 9ZM214.333 9H214.331L214.119 8.79005L223 0L223.213 0.211034L214.333 9ZM219.333 9H219.331L219.119 8.79005L228 0L228.213 0.211034L219.333 9ZM224.333 9H224.331L224.119 8.79005L233 0L233.213 0.211034L224.333 9ZM229.333 9H229.331L229.119 8.79005L238 0L238.213 0.211034L229.333 9ZM234.333 9H234.331L234.119 8.79005L243 0L243.213 0.211034L234.333 9ZM239.333 9H239.331L239.119 8.79005L248 0L248.213 0.211034L239.333 9ZM244.333 9H244.331L244.119 8.79005L253 0L253.213 0.211034L244.333 9ZM249.333 9H249.331L249.119 8.79005L258 0L258.213 0.211034L249.333 9ZM254.333 9H254.331L254.119 8.79005L263 0L263.213 0.211034L254.333 9ZM259.333 9H259.331L259.119 8.79005L268 0L268.213 0.211034L259.333 9ZM264.333 9H264.331L264.119 8.79005L273 0L273.213 0.211034L264.333 9ZM269.333 9H269.331L269.119 8.79005L278 0L278.213 0.211034L269.333 9ZM274.333 9H274.331L274.119 8.79005L283 0L283.213 0.211034L274.333 9ZM279.333 9H279.331L279.119 8.79005L288 0L288.213 0.211034L279.333 9ZM284.333 9H284.331L284.119 8.79005L293 0L293.213 0.211034L284.333 9ZM289.333 9H289.331L289.119 8.79005L298 0L298.213 0.211034L289.333 9ZM294.333 9H294.331L294.119 8.79005L303 0L303.213 0.211034L294.333 9ZM299.333 9H299.331L299.119 8.79005L308 0L308.213 0.211034L299.333 9ZM304.333 9H304.331L304.119 8.79005L313 0L313.213 0.211034L304.333 9ZM309.333 9H309.331L309.119 8.79005L318 0L318.213 0.211034L309.333 9ZM314.333 9H314.331L314.119 8.79005L323 0L323.213 0.211034L314.333 9ZM319.333 9H319.331L319.119 8.79005L328 0L328.213 0.211034L319.333 9ZM324.333 9H324.331L324.119 8.79005L333 0L333.213 0.211034L324.333 9ZM329.333 9H329.331L329.119 8.79005L338 0L338.213 0.211034L329.333 9ZM334.333 9H334.331L334.119 8.79005L343 0L343.213 0.211034L334.333 9ZM339.333 9H339.331L339.119 8.79005L348 0L348.213 0.211034L339.333 9ZM344.333 9H344.331L344.119 8.79005L353 0L353.213 0.211034L344.333 9ZM349.333 9H349.331L349.119 8.79005L358 0L358.213 0.211034L349.333 9ZM354.333 9H354.331L354.119 8.79005L363 0L363.213 0.211034L354.333 9ZM359.333 9H359.331L359.119 8.79005L368 0L368.213 0.211034L359.333 9ZM364.333 9H364.331L364.119 8.79005L373 0L373.213 0.211034L364.333 9ZM369.333 9H369.331L369.119 8.79005L378 0L378.213 0.211034L369.333 9ZM374.333 9H374.331L374.119 8.79005L383 0L383.213 0.211034L374.333 9ZM379.333 9H379.331L379.119 8.79005L388 0L388.213 0.211034L379.333 9ZM384.333 9H384.331L384.119 8.79005L393 0L393.213 0.211034L384.333 9ZM389.333 9H389.331L389.119 8.79005L398 0L398.213 0.211034L389.333 9ZM394.333 9H394.331L394.119 8.79005L403 0L403.213 0.211034L394.333 9ZM399.333 9H399.331L399.119 8.79005L408 0L408.213 0.211034L399.333 9ZM404.333 9H404.331L404.119 8.79005L413 0L413.213 0.211034L404.333 9ZM409.333 9H409.331L409.119 8.79005L418 0L418.213 0.211034L409.333 9ZM414.333 9H414.331L414.119 8.79005L423 0L423.213 0.211034L414.333 9ZM419.333 9H419.331L419.119 8.79005L428 0L428.213 0.211034L419.333 9ZM424.333 9H424.331L424.119 8.79005L433 0L433.213 0.211034L424.333 9ZM429.333 9H429.331L429.119 8.79005L438 0L438.213 0.211034L429.333 9ZM434.333 9H434.331L434.119 8.79005L443 0L443.213 0.211034L434.333 9ZM439.333 9H439.331L439.119 8.79005L448 0L448.213 0.211034L439.333 9ZM444.333 9H444.331L444.119 8.79005L453 0L453.213 0.211034L444.333 9ZM449.333 9H449.331L449.119 8.79005L458 0L458.213 0.211034L449.333 9ZM454.333 9H454.331L454.119 8.79005L463 0L463.213 0.211034L454.333 9ZM459.333 9H459.331L459.119 8.79005L468 0L468.213 0.211034L459.333 9ZM464.333 9H464.331L464.119 8.79005L473 0L473.213 0.211034L464.333 9ZM469.333 9H469.331L469.119 8.79005L478 0L478.213 0.211034L469.333 9ZM474.333 9H474.331L474.119 8.79005L483 0L483.213 0.211034L474.333 9ZM479.333 9H479.331L479.119 8.79005L488 0L488.213 0.211034L479.333 9ZM484.333 9H484.331L484.119 8.79005L493 0L493.213 0.211034L484.333 9ZM489.333 9H489.331L489.119 8.79005L498 0L498.213 0.211034L489.333 9ZM494.333 9H494.331L494.119 8.79005L500 2.96916V3.39121L494.333 9ZM499.333 9H499.331L499.119 8.79005L500 7.91778V8.33988L499.333 9Z' fill='black'/> </svg>");
  }

img {
  max-width: 100%;
}

h1{
  font-family: "Dancing Script", cursive;
  font-size: 400%;
  line-height: 1.2;
  display:block;
}

.content h1 {
  color: var(--kleurheader);
  font-size: 3em;
}

#maincontent h1 {
  color: var(--kleur1);
}




#content .personal {
  font-family: "Dancing Script", cursive;
  font-size: 250%;
  margin-bottom: 0.67em;
}

h2, .section h2 {
  font-size: 1.5em;
  font-weight: normal;
}

h3 {
  font-family: "Dancing Script", cursive;
  padding-top: 1.0em;
  font-size: 200%;
  color: #777;
}

/*
p {
	padding-top:1em;
}*/


a {
  color: #997D5C;
  /*text-decoration: none;*/
  /* border-bottom: 1px solid #ccc;*/
}
a:hover,
.nav a:hover {
  color: #000;
  border-color: #aaa;
}

.content blockquote {
  margin-left: 0;
  padding-left: 1.5em;
  padding-right: 2em;
  border-left: 8px solid #ddd;
  font-style: italic;
  color: #777;
  background-color: transparent;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

.content blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.nav li a {
  text-decoration: #000 underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}
.nav li a:hover {
  -webkit-text-decoration: #ddd double underline;
  text-decoration: #ddd double underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
  color: #ddd;
}

pre,
code {
  background: #eee;
  border: 1px solid #ddd;
}

pre {
  font-size: 14px;
  line-height: 1.4em;
  padding: 1em;
  border-left: 4px solid #ddd;
}

.button.is-black {
  background-color: black !important;
  color: white !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

.button.is-orange {
  background-color: var(--kleur2) !important;
  color: white !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

.button.is-orange:hover {
  background-color: #f7f7f7 !important;
  color: #e5a371 !important;
}
.button.is-black:hover {
  background-color: white !important;
  color: black !important;
}

/*
.column{ padding-left:1.75rem;}
*/
.is-half{
 /* margin-left:5%;
  margin-right:5%;*/
}

/*********************************************************************
 * 2. NAVIGATION EN SCROLLING
 *
 */


#carousel-section {
	background: var(--kleur3);
	background: radial-gradient(circle, var(--kleur3) 0%, rgba(163,136,101,1) 100%);
  padding: 50px 0;
}

#carousel-demo {
  margin-top: 50px;
}

.car-img{
	border: 5px solid #fff;
	-webkit-transform:rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
  z-index: 99;
}

.breadcrumbs {
  clear: both;
  padding-top: 1em;
  padding-left: 5%;
}
.breadcrumbs span:after {
  content: ">";
  color: #999;
  padding-left: 0.5em;
  padding-right: 0.25em;
}

#scrolltop {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s ease-in;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 20%;
  z-index:1000;
 }
 .top-button {
  text-decoration: none;
  cursor: pointer;
  padding: 30px;
  color: #222;
 }

/*********************************************************************
 * 3. Main content, sections, map and sidebar
 *
 */

#main {
  border-top: 1px solid #eee;
  padding-top: 1em;
  margin-top: 1em;
  clear: both;
}

#content {
 width:100%;
 background-color: var(--kleurheader);
 padding-top: 2em;
}

#maincontent {
   margin-left: auto;
   margin-right: auto;
   width: 60%;
   padding: 5%;
   margin-bottom: 50px;
   /*background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);*/
   /*background-color: var(--kleur1);*/
   /*border-radius: 0px 40px 0px 80px;*/
   border-radius: 60% 40% 40% 20% / 70% 50% 30% 25%;
   color: var(--kleur1);
}

#maincontent img, #photo{
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    width: 379px;
    height: 568px;
    box-shadow: 0px 0px 30px 5px rgba(0,0,0,.3);
    transform: rotate(-2deg); 
    border: 10px solid #fff;
}

#content,
#sidebar {
  padding-bottom: 2em;
}

#sidebar {
	margin-top:1.6em;
	margin-left: auto;
  margin-right: auto;
  width: 70%;
	/*padding: 5%;*/
	/* border-radius: 80px 60px 40px 20px */
}

#sidebar {
  background: transparent url(../images/room-klein.jpg) no-repeat left top;
  min-height: 500px;
  /* height:600px; */
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 50px;
  /* margin-bottom: 100px; */
  overflow: hidden;
}

/* dynamic sections */
.flex-container {
  display: flex;
}

/* show 2 childs on main page*/
#childs {
  background-color: #D2C4B4;
}

.news {
  /*background-color: var(--kleur2);*/
  padding:2%;
  margin-bottom: 40px;
}

/*.flex-container > div*/
.box {
  background-color: #BFAFA6;
  color: #373f51;
  line-height: 60px;
  padding: 5%;

  border-radius: 5px;
  transform: translate(5%, 5%);
  margin: 4%;
  /*transform-style: preserve-3d;*/
  perspective: 2000px;
  transition: 0.4s;
}

.box:hover {
  transform: translate(5%, 5%) rotateY(-20deg) skewY(3deg);
}
.box:hover .text {
 /* transform: rotateY(20deg) skewY(-3deg);*/
}

.box > div > a{
  font-family: "Dancing Script", cursive;
  font-size: 250%;
  color: var(--kleurheader);
}
.summary{
  display:block;
  font-style: italic;
}

.nav {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.nav .nav {
  padding-left: 1.5em;
  list-style: disc;
}
.nav li {
  margin: 1em 0;
  list-style:none;
  /*font-size: 150%;*/
}

.nav-tree li {
  margin-top: 0;
  margin-bottom: 0;
}

.nav a {
  font-weight: bold;
}

.nav-tree li a {
  color: #777;
}

.nav .current > a {
  color: #333;
}

.price {
	display: inline-block;
  width: auto;
	height: 38px;
  float: right;
	
	background-color: #979797;
	-webkit-border-radius: 3px 4px 4px 3px;
	-moz-border-radius: 3px 4px 4px 3px;
	border-radius: 3px 4px 4px 3px;
	
	border-left: 1px solid #979797;

	/* This makes room for the triangle */
	margin-left: 19px;
	position: relative;
	
	color: white;
	font-weight: 300;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 22px;
	line-height: 38px;
	padding: 0 10px 0 10px;

  /* add shade */
  box-shadow: 4px 3px 8px 1px #111;
  -webkit-box-shadow: 4px 3px 8px 1px #111;

  /* rotate a bit*/
  -webkit-transform : rotate(8deg); 
    -moz-transform : rotate(8deg); 
    -ms-transform : rotate(8deg); 
    -o-transform : rotate(8deg); 
    transform : rotate(8deg); 

  /* always on top! */
  z-index: 99;
}

/* Makes the triangle */
.price:before {
	content: "";
	position: absolute;
	display: block;
	left: -19px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-right: 19px solid #979797;
}

/* Makes the circle */
.price:after {
	content: "";
	background-color: white;
	border-radius: 50%;
	width: 4px;
	height: 4px;
	display: block;
	position: absolute;
	left: -9px;
	top: 17px;
}

.align_left {
  /* for images placed in rich text editor */
  float: left;
  margin: 0 1em 0.5em 0;
  position: relative;
  top: 0.5em;
  max-width: 50%;
}

.align_right {
  /* for images placed in rich text editor */
  float: right;
  margin: 0 0 0.5em 1em;
  max-width: 50%;
}

.align_center {
  /* for images placed in rich text editor */
  display: block;
  margin: 1em auto;
  position: relative;
  top: 0.5em;
}

figure {
  display: table;
  /*width: 1px;*/
  margin: 1em 0;
}

figure img {
  display: table-row;
  margin-bottom: 0.5em;
}

figure figcaption {
  display: table-row;
  font-size: smaller;
  color: #777;
  line-height: 1.4em;
}

#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}

/*********************************************************************
 * 4. Footer
 *
 */

#footer {
  clear: both;
  border-top: 1px solid #eee;
  font-size: 80%;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  color: #ddd;
}
#footer a{
  color: #000;
  text-decoration: underline;
}

#footer h4{
	margin-top: 0.6em;
	font-family: "Dancing Script", cursive;
	color: #eee;
}

#contact-section {
  background: #fff url(../images/angelique-rechts-klein.png) no-repeat right center;
  min-height: 550px;
  align-items: center;
  justify-content: center;
  display: flex;
  /*margin-top: 50px;*/
  /* margin-bottom: 100px; */
  background-position: right center;
  overflow: hidden;
}

textarea {
  border-bottom: 0.8px solid #252525 !important;
  outline: none !important;
  border: none;
  box-shadow: none !important;
  border-radius: unset;
  border-color: none !important;
  outline-color: none !important;
}

/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
  /* mobile layout */

  body,
  td,
  textarea {
    font-size: 100%;
  }
  body.has-sidebar #content,
  body.has-sidebar #sidebar {
    float: none;
    width: 100%;
    padding: 0;
  }
  form.search {
    float: none;
    width: 70%;
  }
  #contact-section{
    /*background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../images/angelique-rechts-klein.png)  no-repeat right center; */
    background-image: none;
    background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5));
  }
  #sidebar{
    /*background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../images/room-klein.jpg)  no-repeat right center;*/
    width:100%;
    background-image: none;
    padding: 3rem 1.5rem;
  }

  #footer{
    padding-left:2%;
  }
  #content, #maincontent {
    width: 100%;
    border-radius: 0;
    border: 0;
  }
  #sidebar {
    border-top: 1px solid #eee;
    padding-top: 1em;
  }
  .align_left,
  .align_right,
  .align_center {
    display: block;
    float: none;
    margin: 1em auto;
    max-width: 100%;
  }

  .flex-container {
    display: block;
    max-width: 100%;
  }
  .box{
    transform:none;
  }
}

@media only screen and (max-width: 1200px) {
  #content, #maincontent {
    width: 100%;
    border-radius: 0;
    border: 0;
  }
}


@media only screen and (min-width: 1200px) {
  /* extra-wide desktop layout */

  body,
  td,
  textarea {
    font-size: 115%;
  }
}
/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  white-space: nowrap;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
}

/* Show bypass link on hover */
.element-focusable:focus {
  clip: auto;
  overflow: visible;
  height: auto;
}

/* Sample styling for bypass link */
.bypass-to-main:focus {
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #333;
  color: #fff;
}

/*********************************************************************
 * 7. Animations and images
 *
 */

 .imgwrapper {
  transform: skew(-10deg);
  transition: 0.25s;
  max-width: 500px;
}
.imgwrapper:before {
  content: '';
  left: 0;
  top: 0;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  border-radius: 40px;
  opacity: 0;
  border: 2px solid #ece9e6;
  position: absolute;
  z-index: -1;
  transition: 0.5s 0.05s;
}
.imgwrapper:hover:before {
  opacity: 1;
  transform: translateY(1.5rem) translateX(1.5rem);
}
.imgwrapper:hover {
  transform: translateX(-1rem) translateY(-1rem) skew(-10deg);
}
.imgwrapper:hover .card {
  box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.1);
}
.imgwrapper:hover .card:after {
  background-blend-mode: normal;
}
.imgwrapper:hover .card .fal {
  bottom: 4rem;
  background-color: rgba(255,255,255,0.8);
}

/* basic start for card and fa-icon*/
 .headercard img{
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  background-color: green;
  background-size: cover;
  background-blend-mode: screen;
  transform: skew(10deg) scale(1.2);
  transition: 0.25s;
 }
.headercard {
  background-color: #fff;
  border-radius: 40px;
  height: 20rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.headercard:after {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.headercard .fal {
  position: absolute;
  bottom: -1rem;
  right: 3rem;
  border-radius: 100%;
  padding: 1rem;
  font-size: 1.5rem;
  color: #373f51;
  z-index: 1;
  transform: skew(10deg) translateY(50%);
  text-align: center;
  transition: 0.25s;
}

.car-img {
	animation-name: move;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
  }
  
  @keyframes move {
	0% {
	  margin-top: 0px;
	}
	50% {
	  margin-top: 10px;
	}
	100% {
	  margin-top: 0px;
	}
  }

  /* vliegende afbeelding */
  @keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
  }

  .content-img {
	max-width: 500px;
	max-height: 500px;
	box-sizing: border-box;
	border: 5px white solid;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
	img { width: 100%; height: auto; }
  }


}