@charset "UTF-8";
/* CSS Document */

/*================================
centered columns STYLES
==================================*/

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}

/*================================
KLEURTJES columns
==================================*/
.red {
	background-color: red;
}
.blue {
	background-color: blue;
}
.yellow {
	background-color: yellow;
}
.orange {
	background-color: orange;
}
.green {
	background-color: green;
}
.brown {
	background-color: brown;
}


#wrapper {
	background-color: rgba(255,255,255,1.00);
}
#heroSchool {
	margin-bottom: 20px;
}
#ESfles {
	position: absolute;
	z-index: 147;
	margin-left: -15px;
	min-height: 200px;
	height: auto;
	width: auto;
	left: 150px;
	top: 350px;
}
#contentSchool {
	background-color: rgba(255,255,255,1.00);
	position: relative;
}
#ESdirecteur {
	margin-left: auto;
	margin-right: 3%;
	display: block;
	max-height: 300px;
}
#intro {
	padding-bottom: 0px;
	float: none;
}
.txtIntro {
	line-height: 140%;
	font-size: 1.2em;
	margin-bottom: 20px;
}
.naam {
	text-align: right;
	font-style: italic;
	font-weight: bold;
	padding-right: 20px;
}
.schoolpics {
	width: 350px;
	height: auto;
}
#ESCarousel {
	margin: 50px auto;
	height: 500px;
	width: 500px;
	border-spacing: 20px 20px;
	padding: 30px;
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
	border-radius: 10px;
	border-collapse: separate;
	border-top: thick solid rgba(6,197,72,1.00);
	background-color: rgba(205,23,25,1.00);
}
.EScaption {
	position: fixed;
	z-index: 500;
	top: 1px;
}
#ESheader {
	font-family: cabin-sketch;
	font-style: normal;
	font-weight: 400;
	color: rgba(217,8,11,1.00);
	margin-bottom: 10px;
	margin-top: 0px;
	text-align: center;
}
#ESbaselineFooter {
	margin-left: auto;
	margin-right: auto;
	display: block;
	font-family: cabin-sketch;
	font-style: normal;
	font-weight: 400;
	color: rgba(205,23,25,1.00);
	font-size: 1.5em;
	text-align: center;
}
#ESadres {
	background-color: rgba(0,0,0,1.00);
	color: rgba(170,170,170,1.00);
	text-align: center;
	padding-top: 20px;
	padding-bottom: 100px;
	margin-top: 10px;
}

@media (max-width:649px){
#ESfles {
	max-height: 300px;
	left: 100px;
	top: 170px;
}
#ESdirecteur {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
}

@media (max-width:375px){
#ESfles {
	position: absolute;
	max-height: 300px;
	top: 200px;
	left: 25px;
}
#ESdirecteur {
	margin-right: auto;
	margin-left: 23%;
}
#heroSchool {
	width: 155%;
	min-height: 150px;
}
.txtIntro {
	font-size: 1.1em;
}
#ESCarousel {
	width: 350px;
	height: 350px;
}
}

@media (min-width:650px) and (max-width:959px){
#ESfles {
	position: absolute;
	left: 15px;
	top: 120px;
}
#ESdirecteur {
	float: none;
}
.txtIntro {
	font-size: 1.1em;
	display: inline-block;
}
}

@media (min-width:960px){
#ESfles {
	position: absolute;
	/* [disabled]max-width: 700px; */
	min-width: 300px;
	top: 120px;
	left: 70px;
}
}
#ESlogoFooter {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 250px;
	height: auto;
}

@media (min-width:1200px){
#ESdirecteur {
	margin-right: auto;
	float: right;
}
}