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

html {
  font-family: 'Varela', sans-serif;
  font-size: 14px;
  background: #fff;
  }

body {color: #333;}
/* Used Fonts */
h1.xl {font-size: 50px; text-align: center; padding: 20px 0 15px 0;}
h1 {text-align: center; }
h2 {text-align: center; color: #444;}
p {}
.block-h1 {margin-top: -35px; margin-left: 15px; color: #444; font-size: 24px;}
.italic {font-style: italic;}
a.tekst-link {color: #ff0066;}
a.tekst-link:hover {color: #ccc;}

/* Used colors*/
.pink {color: #ff0066;}
.bgpink {background: #ff0066;}
.bgwhite {background: #fff;}
.grey {color: #ccc;}
.dark-grey {color: #444;}
.bggrey {background: #ccc;}
.gradient-pink {background-color: #fff; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #ddd, #fff, #fff, #fff, #ddd); /* Standard syntax (must be last) */}
.fullbg {width: 100%;}

/* Used classes */
#content {margin-bottom: 50px;}
#text {width: 80%; margin: 0 auto;}
.main-block {text-align: center; width: 100%;}
@media screen and (min-width:768px) {
			 .infoblock {margin-top: 10px; padding: 0 60px 20px 60px; color: #fff; background: #ff0066; width: 80%; margin: 0 auto;}
			 .info {color: #fff; float: left; padding-right: 70px; padding-top: 20px;}}
@media screen and (max-width:767px) {
			 .infoblock {margin-top: 10px; padding: 0 60px 20px 60px; color: #fff; background: #ff0066; width: 100%; margin: 0 auto;}
			 .info {color: #fff; float: left; padding-right: 20px; padding-top: 20px;}}

.block-image {display: inline-block; margin: 0 auto; padding-top: 50px; padding: 30px;}
.balk20 {width: 100%; height: 20px;}
.center {text-align: center;}
.img-center {display: block; margin:0 auto; width: 60%;}

.logo-adora {display: table; width: 80%; margin: 0 auto;}
.logo-hond {display: table-cell; text-align: center; width: 24%;}
img.hondjes {width: 100%;  max-width: 150px;}
img.block {border: 30px solid #ff0066; border-radius: 4px; box-shadow: 5px 10px 18px #888888; padding: 5px; width: 300px;}
a:hover img {border: 30px solid #ccc; transition-delay: 0.1s; text-decoration: none;}
.icon {width: 20px;}
a.bottom:link {color: #fff;}
a.bottom:hover {color: #999;}
a.bottom:visited {color: #fff;}

iframe {margin: 0 auto; display: inline-block; border: 30px solid #ff0066; border-radius: 4px; box-shadow: 5px 10px 18px #888888;}
/* Used divs */
#clear {clear: both;}
#maps {margin-top: 50px; margin: bottom: 50px; width: 100%; text-align: center;}
/*#social-media {float: right; padding-right: 20px;}*/

[class *="col-"] {float: left; padding: 15px;}
.row {width: 100%; background-color: #66cc66;}
/*.row::after {content: ""; clear: both; display: block;}*/
.title {padding-top: 10px; padding-bottom: 10px;}
.subtitle {font-family: 'Droid Serif', serif; color: #6c6; text-align: center;}
.title {font-size: 24px;}
.fixed {position: fixed; top: 50px; left: 0; width: 100%;}



/* Responsive design settings */
.col1,.col2,.col3{
    float:left;
    display:block;
    height:auto;
    padding:5px 10px;
}

@media screen and (min-width:769px) {
    .hidden_desktop {
        display:none;
				}}	

@media screen and (min-width:521px) and (max-width:768px) {
    .hidden_tablet {
        display:none;
				}}
						
/*@media screen and (min-width:521px) {
    .hidden_tablet {
        display:none;
				}}*/

@media screen and (max-width:520px) {
    .hidden_mobile {
        display:none;
				}}

/*columns mobile 520*/
@media only screen and (max-width: 520px) {
[class*="col-"] {width: 100%;}
}

.col-m-0 {width: 0;}	
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

/*columns tablet 768*/
@media only screen and (min-width:521px) { 
.col-t-1 {width: 8.33%;}
.col-t-2 {width: 16.66%;}
.col-t-3 {width: 25%;}
.col-t-4 {width: 33.33%;}
.col-t-5 {width: 41.66%;}
.col-t-6 {width: 50%;}
.col-t-7 {width: 58.33%;}
.col-t-8 {width: 66.66%;}
.col-t-9 {width: 75%;}
.col-t-10 {width: 83.33%;}
.col-t-11 {width: 91.66%;}
.col-t-12 {width: 100%;}
}

/*columns desktop larger than */
@media only screen and (min-width:768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}