@import url('https://fonts.googleapis.com/css?family=Questrial');

@font-face {
  font-family: Nothing You Could Do;
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/nothingyoucoulddo/v6/jpk1K3jbJoyoK0XKaSyQAW3tIVbDRfcAbwPiWONb82U.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body {
	font-family: 'Questrial', sans-serif;
	color: black;
}

p.customfont {
	font-family: Nothing You Could Do;
}

h1 {
	font-family: Nothing You Could Do;
	font-size: 30px;
	color: black;
}

h3 {
	font-family: 'Questrial', sans-serif;
	font-size: 25px;
	color: white;

}	

#wrapper {

	width: 1459px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

.close {
		font-family: Nothing You Could Do;
        background: #3c5035;
        color: orange;
        line-height: 69px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: 11px;
        width: 75px;
		height: 70px;
        text-decoration: none;
		font-size: 32;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

.close:hover { 
		background: #544a4a;
		
	}

.imgHover{position:relative;}
	
.top{position:absolute;top:0;left:0;opacity:0;
      -webkit-transition: opacity 500ms ease-in-out;
      -moz-transition: opacity 500ms ease-in-out;
      -ms-transition: opacity 500ms ease-in-out;
      -transition: opacity 500ms ease-in-out;
    }
	
.bottom{opacity:1;
      -webkit-transition: opacity 500ms ease-in-out;
      -moz-transition: opacity 500ms ease-in-out;
      -ms-transition: opacity 500ms ease-in-out;
      -transition: opacity 500ms ease-in-out;
     }
	 
.top:hover{opacity:1;}
.bottom:hover{opacity:0;}


ul {
    font-family: Nothing You Could Do;
	list-style-type: none;
	margin-right: auto;
    margin: 0;
    padding: 10;
    background: #273422;
	height: 42px;
}

.textAlign {
    text-align: justify;
    text-justify: inter-word;
}

table.paddedTop td { 
	padding: 0px 0px 10px 70px; 
	}
	
table.paddedTopTH th { 
	padding: 0px 0px 30px 30px; 
	}
	
.paddingBetweenCols  {
	padding:0 20px 0 20px;
}

.iframeStyle {
  margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;

  -moz-box-shadow: 4px 4px 14px #000;
  -webkit-box-shadow: 4px 4px 14px #000;
  box-shadow: 4px 4px 14px #000;


}

input[type=text] {
	background-color: white;
	-moz-box-shadow:    inset 0 0 10px #b4b5b5;
	-webkit-box-shadow: inset 0 0 10px #b4b5b5;
	box-shadow:         inset 0 0 10px #b4b5b5;
}

.imgStyle {
	box-shadow: 1px 1px 3px #000;
}


.modalDialog {
        position: fixed;
        top: 0;
        right: 0;
		bottom: 0;
        left: 0;
		overflow: auto;
        background: rgba(0,0,0,0.6);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 700ms ease-in;
        -moz-transition: opacity 700ms ease-in;
        transition: opacity 700ms ease-in;
        pointer-events: none;
    }

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
    }
	
.modalDialog > div {

        position: relative;
		top: 75px;
    }
	

.modalOver > div {
		width: 650px;
        position: relative;
		top: 0px;
		left: 0px;
        padding: 5px 15px 5px 15px;
        border-radius: 10px;
        background: #dfdfdf;
		box-shadow: 1px 1px 3px #000;
    }

.modalLeerling > div {
        width: 700px;
        position: relative;
		top: 0px;
		left: 0px;
        padding: 5px 15px 5px 15px;
        border-radius: 10px;
        background: #dfdfdf;
		box-shadow: 1px 1px 3px #000;
    }
	  

    .modalDialog3Content > div {
        width: 700px;
        position: relative;
		top: 0px;
		left: 0px;
        padding: 5px 15px 5px 15px;
        border-radius: 10px;
        background: #dfdfdf;
		box-shadow: 1px 1px 3px #000;
    }	
	
	
	    .modalDialog4Content > div {
        width: 1000px;
        position: relative;
		top: 0px;
		left: 0px;
        padding: 5px 15px 5px 15px;
        border-radius: 10px;
        background: #dfdfdf;
		box-shadow: 1px 1px 3px #000;
    }


	
	    .modalDialog5Content > div {
        width: 600px;
        position: relative;
		top: 0px;
		left: 0px;
        padding: 5px 15px 5px 15px;
        border-radius: 10px;
        background: #dfdfdf;
		box-shadow: 1px 1px 3px #000;
    }

	
	    .modalDialog7Content > div {
        width: 900px;
        position: relative;
		top: 0px;
		left: 0px;
        padding: 5px 15px 5px 15px;
        border-radius: 10px;
        background: #dfdfdf;
		box-shadow: 1px 1px 3px #000;
    }