h1,h2,h3,h4,h5,h6 {
margin-top:0;
}

ul,ol {
margin:0;
}

p {
margin:0;
}

img {
display:inline-block!important;
}

html,body {
color:#333;
font-family:'Open Sans', sans-serif;
}

a {
color:#333;
text-decoration:underline;
transition:.5s all;
-moz-transition:.5s all;
-ms-transition:.5s all;
-o-transition:.5s all;
-webkit-transition:.5s all;
}

a:hover,a:focus {
color:#006;
outline:none;
}

.main {
padding:5em 0;
}

.main h1 {
color:#006;
font-size:2.5em;
font-weight:400;
margin:0;
}

.header-top {
background:#FFF;
padding:1em 0;
}

.head-login {
border-bottom:1px solid #555;
float:right;
padding:2em 0 1em;
width:100%;
}

.head-login ul {
margin:0;
padding:0;
text-align:right;
}

.head-login ul li {
display:inline-block;
float:right;
}

.head-login ul li a {
color:#555;
font-size:1.2em;
font-weight:300;
padding:.5em;
text-decoration:none;
}

.head-login ul li span {
color:#555;
font-size:1.2em;
font-weight:300;
padding:.5em;
text-decoration:none;
}

.head-login ul li a:hover,.head-login ul li.active a {
color:#006;
}

.header-bottom {
padding:2em 0;
text-align:center;
}

.head-nav {
padding-top:2em;
}

.head-nav ul {
margin:0;
padding:0;
}

.head-nav ul li {
display:inline-block;
}

.head-nav ul li a {
border-bottom:1px solid transparent;
border-top:1px solid transparent;
color:#555;
display:block;
font-size:1.4em;
font-weight:400;
margin:0 20px;
padding:.6em .3em;
text-decoration:none;
}

.head-nav ul li a:hover,.head-nav ul li.active a {
border-bottom:1px solid #555;
border-top:1px solid #555;
color:#006;
}

span {
color:#006;
}

.welcome {
padding:3em 0;
text-align:center;
}

.welcome h1 {
color:#006;
font-size:3em;
font-weight:600;
}

.welcome h1 span {
color: #FFA500;
}

.welcome p {
font-size:1.2em;
font-weight:300;
line-height:1.8em;
margin:1em 0;
}

.video {
background:#E9E8DD;
padding:3em 0;
}

.video h1 {
color:#777;
font-size:2em;
font-weight:700;
margin-top:1em;
}

.video p {
color:#777;
font-size:1.2em;
font-weight:300;
line-height:1.8em;
margin:1em 0;
}

.video-right {
padding-bottom:2em;
padding-top:2em;
position:relative;
}

a.play-icon {
background:url(../images/play.png) no-repeat 2px 2px;
display:block;
height:48px;
margin:auto;
position:relative;
top:100px;
transition:.5s all;
-moz-transition:.5s all;
-ms-transition:.5s all;
-o-transition:.5s all;
-webkit-transition:.5s all;
width:66px;
z-index:0;
}

a.play-icon:hover {
background:url(../images/playhover.png) no-repeat 2px 2px;
}

.img-thumb {
border:.5em solid #FFF;
display:block;
margin:-48px auto 0;
}

.footer {
background:#788188;
padding:3em 0 2em;
}

.footer h1 {
color:#FFF;
font-size:2em;
font-weight:400;
margin:0;
padding-bottom:30px;
}

.footer p {
color:#FFF;
font-size:1.1em;
line-height:1.8em;
}

.footer-content {
text-align:center;
}

.social ul {
margin:0;
padding:0;
}

.social ul li {
display:inline-block;
padding:0 .5em;
}

.social ul li:nth-of-type(1) {
padding-right:.5em;
}

.social ul li:nth-last-of-type(1) {
padding-left:.5em;
}

i.facebook {
color:#FFF;
}

i.facebook:hover {
color:#1778F2;
}

i.twitter {
color:#FFF;
}

i.twitter:hover {
color:#1DA1F2;
}

i.youtube {
color:#FFF;
}

i.youtube:hover {
color:#FF0000;
}

.copyright {
margin-top:2em;
}

.copyright p {
color:#FFF;
font-size:1.1em;
line-height:1.8em;
text-align:center;
}

.banner {
background:url(../images/badminton.jpg) no-repeat;
background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
-webkit-background-size:cover;
height:100px;
text-align:left;
}

.logo img {
height:200px;
width:200px
}

i.pdf {
color:#F00;
vertical-align:middle;
}

i.image {
background:-webkit-linear-gradient(45deg, #EA4335 0%, #FBBC05 33%, #34A853 67%, #4285F4 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
color:#34A853;
vertical-align:middle;
}

.hide {
display:none;
}

.view.effect {
padding:.5em 0;
}

.article {
padding-bottom:3em;
padding-left:0;
padding-right:0;
}

.article:last-of-type {
padding-bottom:0;
}

.article h1 {
color:#006;
font-size:2em;
margin-bottom:.5em;
text-transform:uppercase;
}

.article p {
font-size:1.2em;
line-height:1.8em;
margin:1em 0;
text-align:justify;
}

.article p.date {
color:#006;
font-style:italic;
text-align:center;
}

.article p.download {
line-height:1.5em;
text-align:left;
}

.article span.download {
color:#333;
font-size:.8em;
font-style:italic;
}

.article p.album {
text-align:left;
}

.article p.message {
margin:0;
}

.article table {
font-size:1.2em;
line-height:1.8em;
margin:1em 0;
text-align:left;
width:50%;
}

.manager table {
width:100%;
}

.calendar-bottom {
margin-top:2em;
}

.calendar-left {
background:#006;
border-radius:.5em;
float:left;
padding:1em 0;
text-align:center;
width:20%;
}

.calendar-left h2 {
color:#FFF;
font-size:2.5em;
font-weight:600;
margin:0;
text-align:center;
}

.calendar-left span {
color:#FFF;
font-size:1.2em;
font-weight:300;
text-align:center;
}

.calendar-right {
float:right;
width:74%;
}

.calendar-right h3 {
color:#006;
font-size:1.4em;
font-weight:400;
margin:0;
text-align:left;
}

.calendar-right p {
color:#555;
font-size:1em;
font-weight:300;
line-height:1.5em;
margin:1em 0;
text-align:left;
}

.bestuur {
font-size:1.2em;
line-height:1.8em;
margin:1em 0;
text-align:left;
}

.bestuur ul {
list-style-type:none;
padding:0;
}

.bestuur ul.position {
font-weight:700;
}

.bestuur ul.name {
font-weight:400;
padding-left:1em;
}

#portfolio-list .portfolio {
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
display:inline-block;
float:left;
margin:0;
opacity:1;
overflow:hidden;
width:33.333%;
}

div#portfolio-list {
margin:2em 0;
padding:0;
}

.portfolio-wrapper {
cursor:pointer;
margin:1em;
overflow:hidden;
position:relative!important;
}

.portfolio img {
transition:all 300ms!important;
-moz-transition:all 300ms!important;
-webkit-transition:all 300ms!important;
width:100%;
}

.zoom-icon {
background:url(../img/zoom.png) center center no-repeat rgba(0,0,102,0.74);
cursor:pointer;
display:block;
filter:alpha(opacity=0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
left:0;
opacity:0;
position:absolute;
transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
}

.grid_box .zoom-icon {
height:236px;
top:-50px;
width:100%;
}

.grid_box a:hover .zoom-icon {
filter:alpha(opacity=99);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
opacity:1;
top:0;
}

.error-page {
min-height:550px;
padding-top:130px;
text-align:center;
}

.error-page h1 {
color:#006;
font-size:10em;
}

.error-page p {
color:#333;
font-size:4em;
}

.login form {
padding:1em 0;
}

.login form div {
padding-bottom:2em;
}

.login span {
border-radius:0;
}

.login input[type="text"],.login input[type="password"] {
border:1px solid #CCC;
border-radius:0;
width:50%;
}

.login input[type="text"]:focus,.login input[type="password"]:focus {
box-shadow:2px 2px 2px #006;
}

input[type="submit"] {
background:#006;
border:none;
color:#FFF;
display:inline-block;
font-size:1em;
outline:none;
padding:.7em 1.2em;
}

input[type="submit"]:hover {
background:#777;
}

@media(max-width:1280px) {
.header-bottom {
padding:1.3em 0;
}
}

@media(max-width:1024px) {
.main {
padding:5em 0 2em;
}

.main h1 {
font-size:1.7em;
}

.header-top {
padding:.5em 0;
}

.header-bottom {
padding:1em 0;
}

.welcome h1 {
font-size:2.5em;
}

.welcome p {
font-size:1.1em;
}

.video h1 {
font-size:1.7em;
}

.video p {
font-size:1.1em;
}

.footer {
padding:2em 0 1em;
}

.footer h1 {
font-size:1.7em;
}

.footer p {
font-size:1em;
}

.grid_box .zoom-icon {
height:192px;
}

.error-page {
min-height:370px;
padding-top:50px;
}

.error-page h1 {
font-size:8em;
}

.error-page p {
font-size:3em;
}

.article h1 {
font-size:1.7em;
}

.article p {
font-size:.9em;
}

.article span.download {
color:#333;
font-size:.7em;
}

.article table {
font-size:.9em;
}

.bestuur {
font-size:.9em;
}

.calendar-left {
padding:.7em 0;
width:19%;
}

.calendar-left h2 {
font-size:2em;
}

.calendar-left span {
font-size:1.1em;
}

.calendar-right {
width:77%;
}

.calendar-right h3 {
font-size:1.2em;
}

.calendar-right p {
font-size:.875em;
}
}

@media(max-width:768px) {
.main {
padding:2em 0;
text-align:center;
}

.head-login {
padding:.5em 0;
}

.head-nav ul {
background:rgba(25,57,82,0.67);
display:none;
left:2em;
margin:0;
padding:2% 0;
position:absolute;
text-align:center;
top:5.5em;
width:92%;
z-index:999;
}

.head-nav ul li {
display:block;
float:none;
}

.head-nav ul li a {
color:#FFF;
padding:.3em;
}

.head-nav span.menu {
background:none;
display:block;
left:0;
position:absolute;
top:0;
}

.head-nav span.menu:before {
color:#006;
content:"\f0c9";
cursor:pointer;
font-family:"Font Awesome 5 Free";
font-size:1.5em;
font-weight:900;
left:1.25em;
position:absolute;
top:.55em;
}

.welcome h1 {
font-size:2em;
}

.welcome p {
font-size:1em;
}

.video {
padding:1em 0;
text-align:center;
}

.video h1 {
font-size:1.5em;
}

.video p {
font-size:1em;
}

.video-right {
padding-bottom:1em;
padding-top:1em;
}

.login input[type="text"],.login input[type="password"] {
width:100%;
}

.calendar-bottom {
margin:2em auto;
width:51%;
}

.footer {
padding:2em 0 1em;
text-align:center;
}

.footer h1 {
font-size:1.5em;
padding-bottom:16px;
}

.footer-content {
margin:2em 0;
}

.banner {
height:70px;
}

.logo img {
height:180px;
width:180px
}

.grid_box .zoom-icon {
height:144px;
}

.error-page {
min-height:265px;
padding-top:50px;
}

.error-page h1 {
font-size:6em;
}

.error-page p {
font-size:2.5em;
}
}

@media(max-width:640px) {
.article h1 {
font-size:1.5em;
}

.welcome h1 {
font-size:1.7em;
}

.welcome p {
font-size:.9em;
}

.video h1 {
font-size:1.3em;
}

.video p {
font-size:.9em;
}

.calendar-bottom {
margin:1.5em auto;
width:64%;
}

.calendar-left h2 {
font-size:1.5em;
}

.calendar-left span {
font-size:1em;
}

.footer {
padding:2em 0 1em;
text-align:center;
}

.footer h1 {
font-size:1.4em;
padding-bottom:16px;
}

.footer p {
font-size:.9em;
}

.grid_box .zoom-icon {
height:125px;
}

.error-page {
min-height:240px;
padding-top:40px;
}

.error-page p {
font-size:2.2em;
}

.error-page h1 {
font-size:5em;
}
}

@media(max-width:480px) {
.main h1 {
font-size:1.5em;
}

.head-nav ul {
left:1em;
top:4.5em;
}

.head-login ul li a,.head-login ul li span {
font-size:.875em;
}

.article h1 {
font-size:1.4em;
}

.article table {
width:100%;
}

.welcome h1 {
font-size:1.5em;
}

.video h1 {
font-size:1.2em;
}

.video p {
font-size:.9em;
height:66px;
overflow:hidden;
}

.calendar-bottom {
margin:1.5em auto;
width:87%;
}

.calendar-left h2 {
font-size:1.3em;
}

.calender-left span {
font-size:.875em;
}

.footer {
padding:2em 0 1em;
text-align:center;
}

.footer h1 {
font-size:1.3em;
padding-bottom:16px;
}

#portfolio-list .portfolio {
width:50%;
}

.banner {
height:40px;
}

.logo img {
height:160px;
width:160px
}

.error-page {
min-height:140px;
padding-top:30px;
}

.error-page h1 {
font-size:4em;
}

.error-page p {
font-size:1.7em;
}
}

@media(max-width:320px) {
.welcome h1 {
font-size:1.3em;
}

.welcome p {
font-size:.8125em;
height:60px;
overflow:hidden;
}

.video h1 {
font-size:1em;
height:17px;
overflow:hidden;
}

.grid_box .zoom-icon {
height:82px;
}

.error-page {
min-height:100px;
padding-top:15px;
}

.error-page h1 {
font-size:3em;
}

.error-page p {
font-size:1.5em;
}

.article {
padding:0;
}

.article p {
font-size:.8125em;
}

.article table {
font-size:.8125em;
}

.bestuur {
font-size:.8125em;
}

.footer {
padding:2em 0 1em;
text-align:center;
}

.footer h1 {
font-size:1.2em;
padding-bottom:16px;
}

.calendar-bottom {
margin:1.5em auto;
width:100%;
}

.calendar-left h2 {
font-size:1.2em;
}

.calendar-right h3 {
font-size:1em;
}

.calendar-right p {
font-size:.8125em;
height:50px;
overflow:hidden;
}
}