@charset "utf-8";

@media screen and (min-width: 1930px) {
	#outro {padding-top: 200px;background-size: contain;}
}

@media screen and (max-width: 1420px) {
	h1 {font-size: 50px;}
	h2 {font-size: 30px;}
	#intro {line-height: 40px;}
	#model {width: 600px;}
}

@media screen and (max-width: 1130px) {
	#formules, #product-component-1616573020589, #stages {margin-top: 80px;}
	#googlemaps {height: 1500px;}
	h1 {font-size: 40px;}
	h2 {font-size: 26px;}
	#intro {font-size: 20px;line-height: 34px;}
	#model {width: 500px;}
	#mozaiek {columns: 3 !important;}
	.kol1 {width: 48%;margin-right: 4%;}
	.kol2 {width: 48%;margin-right: 0%;padding: 0;}
	.kol3 {width: 100%;clear: both;float: none;}
	.kol3 .flip-card {width: 48%;margin-right: 4%;float: left;}
	.kol3 .flip-card:last-child {width: 48%;margin-right: 0%;}
	.flip-card-back {font-size: 14px;line-height: 24px;}
	.segmenten {grid-gap: 30px;}
}

@media screen and (max-width: 960px) {
	#formules, #product-component-1616573020589, #stages {margin-top: 60px;}
	.formules, .stages {grid-template-columns: 1fr;grid-gap: 20px;}
	.segmenten {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"inleiding inleiding"
	"core pro"
	"foot go"
    "slim kine"
	"flex fit"
	"walk yoga";}
	.onlres {display: block;}
	#eapps-google-maps-1 {display: none;}
	#eapps-google-maps-2 {display: block;}
	.dienst {width: 32%;margin-right: 2%;margin-bottom: 30px;}
	.dienst:nth-child(4) {width: 32%;margin-right: 0%;}
	.end {width: 100%;}
	.flex, .flex-reverse {flex-direction: column;}
	.flex .image, .flex-reverse .image {width: 100%;margin-right: 0;margin-left: 0;margin-top: 30px;}
	/*#modelpage8, #modelpage9, #modelpage10, #modelpage11, #modelpage12, #modelpage13 {background-position: 100% 3%;}*/
	#modelpage8 {background-position: 100% 29%;}
	#modelpage9 {background-position: 100% 17%;}
	#modelpage10 {background-position: 100% 27%;}
	#modelpage11 {background-position: 100% 22%;}
	#modelpage12 {background-position: 100% 16%;}
	#modelpage13 {background-position: 100% 21%;}
	#cloud {position: relative;top: auto;right: auto;width: 100%;margin-top: 30px;}
	
	#outro {padding-top: 200px;background-size: contain;}
	h1 {font-size: 34px;}
	#intro, .content {font-size: 20px;line-height: 30px;}
	#secWrap1, #secWrap2 {width: 100%;}
	#secWrap1, #secWrap2 {float: none;}
	#introModel {float: none;width: 100%;text-align: right;}
	#outroModel {float: none;width: 100%;}
	#outroModel img {width: 100%;}
	.contentleft {float: none;width: 100%;margin-bottom: 40px;}
	.contentright {float: none;width: 100%;padding-top: 0px;}
	#model {position: relative;right: auto;margin-top: -300px;float: right;}
	#outroImg {position: relative;top: auto;right: auto;width: 100%;margin-top: 30px;}
	#mozaiek {columns: 2 !important;}
	
	#mobile {display: flex;}
	#navContainer, #navContainer2 {display:none;}
	
	#main {padding: 30px 0 60px 0;}
		
	#fotoalbum {margin: 0 0 60px 0;}
	#formulier {top: auto;padding: 50px;position: relative;clear: both;margin-top: 30px;}
	#googlemaps {height: 100vh;}
	.content {margin-bottom: 60px;}
	
	#grid-4 {display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20px;}
}

@media screen and (max-width: 640px) {	
	.segmenten {grid-gap: 20px;}
	.field, .veld {float: none;width: 100%;margin-right: 0%;clear: both;margin-top: 10px;}
	.field:first-child, .veld:first-child {margin-top: 0px;}
	.field:nth-child(even), .veld:nth-child(even) {margin-right: 0%;}
	#formulier {padding: 30px 20px;}
	.field_title {font-size: 16px;}
	.koll1 img, .koll2 img, .koll3 img {height: 30px;}
	#gals img {height: 300px;}
	.model3 {width: 150px;}
	.dienst {width: 100%;margin-right: 0%;margin-bottom: 30px;height: auto;}
	.dienst:nth-child(4) {width: 100%;margin-right: 0%;}
	h2 {font-size: 22px;}
	.kol1 {width: 100%;margin-right: 0%;clear: both;}
	.kol2 {width: 100%;margin-right: 0%;padding: 0;clear: both;}
	.kol3 {width: 100%;clear: both;float: none;}
	.kol3 .flip-card {width: 100%;margin-right: 0%;float: none;}
	.kol3 .flip-card:last-child {width: 100%;margin-right: 0%;}
	.email,.textfield,.textarea,select {padding:15px;}
	.btn {margin-right: 10px;}
	.btn a {font-size: 18px;padding: 10px 20px;}
	h1 {font-size: 30px;}
	#intro {font-size: 18px;line-height: 30px;padding: 30px 0 60px 0;}
	#model {width: 400px;}
	#footer.page4 {padding: 50px 0;}
	.content {margin-bottom: 30px;}
	.segmenten {display: block;}
	.segment {margin-top: 20px;}
	.ni {object-fit: contain;height: auto;width: 100%;}
	
	#fct {display: block;}
	#fct div:first-child {margin-right: 0px;margin-bottom: 50px;}
}

@media screen and (max-width: 480px) {
	#grid-4 {display: grid;grid-template-columns: repeat(1,1fr);grid-gap: 20px;}
	.flip-card-front {padding: 50px 0 0 0;}
	#cloud {display: none;}
	.formules {grid-template-columns: 1fr;grid-gap: 20px;}
	#introModel {margin-top: 0px;}
	#modelpage8 {background-position: 100% 29%;}
	#modelpage9 {background-position: 100% 17%;}
	#modelpage10 {background-position: 100% 27%;}
	#modelpage11 {background-position: 100% 22%;}
	#modelpage12 {background-position: 100% 16%;}
	#modelpage13 {background-position: 100% 21%;}
	.koll1 {width: 100%;margin-right: 0%;float: none;margin-bottom: 20px;}
	.koll2 {width: 100%;margin-right: 0%;float: none;margin-bottom: 20px;}
	.koll3 {width: 100%;float: none;text-align: center;}
	#intro {font-size: 16px;}
	.field_title {font-size: 14px;}
	#main {padding: 30px 0;}
	#outro {padding-top: 150px;}
	#model {width: 300px;}
	.btn a {font-size: 16px;padding: 10px 20px;margin-bottom: 20px;}
	.btn:last-child a {margin-bottom: 0px;}
	#Wmessage{width:100%;margin:50px auto;padding:20px;}
	#Wmessage img{width:100%;}
	#Wpopup{width:100%;margin:50px auto;padding:20px;}
	#Wpopup img{width:100%;}
}