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


html, body {margin: 0px; padding: 0px; }
body { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 34px; background-color: #f0f0f0;}


h1 { font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 2em;}
h2 { font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 2em;}
h3 { font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 2em;}
h4 { font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 2em;}

p { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 24px; }
a { cursor: pointer;}

/* Buttons */
.btn { margin-top: 20px; border-radius: 0px; padding: 10px 40px; font-weight: 200; font-size: 18px; transform: ease-in-out .4s; margin-right: 10px;  }
.btn.btn-white { border: 1px solid #e4e4e4; color: #e4e4e4; background: #333333; }
.btn.btn-white:hover { background: #e4e4e4; color: #333333; }
.btn.btn-dark { border: 1px solid #333333; color: #333333; background: #e4e4e4; }
.btn.btn-dark:hover { background: #333333; color: #e4e4e4; }
.btn.btn-fill { border: 1px solid #333333; color: #e4e4e4; background: #333333; }
.btn.btn-fill:hover { border: 1px solid #333; background: #e4e4e4; color: #333; }
.btn.btn-primary { background: #006a2a; color: #FFF; border: 1px solid #006a2a; border-radius: 5px;}
.btn.btn-primary:hover , .btn.btn-primary:active , .btn.btn-primary:focus { background: #006a2a; }
/* Lists */

ul.contact { list-style: none; margin: 0px; padding: 0px; }
ul.contact li svg { margin-right: 10px; color: #009b3e; }

ul.address { list-style: none; margin: 0px; padding: 0px; }

ul.organisation { list-style: none; margin: 0px; padding: 0px; }


/* box */
.white-bg-shadow { background-color: #FFF; box-shadow: 0px 10px 20px rgba(0,0,0,0.05);}
.green-bg-shadow { background-color: #009b3e; box-shadow: 0px 10px 20px rgba(0,0,0,0.05);}

/* Sticky */

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

/* Menu */

.navigation-icon {
    float: right;
    position: relative;
}

#nav-icon3 {
  width: 45px;
  height: 35px;
  position: relative;
  margin: 25px 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #009b3e;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 14px;
}

#nav-icon3 span:nth-child(4) {
  top: 28px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.menu-overlay { visibility: hidden; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(/assets/img/soccer_bg.svg) #0e9b41; background-repeat: no-repeat; background-size: 60%; background-position: bottom left; opacity: 0; transition: opacity .60s, visibility .60s, height .60s; z-index: 5000; }
.menu-overlay.active {  opacity: 1; visibility: visible; height: 100%;}
.menu-overlay ul { text-align: center; list-style: none; padding: 14vh 0 0 0; margin: 0px; }
.menu-overlay ul li a { color: #fff; font-weight: 700; font-size: 34px; padding: 15px 0px; display: block; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 2em; transition: ease .3s;}
.menu-overlay ul li a:hover { color: #000; text-decoration: none;}


.white-box { background: #FFFfff; padding: 40px 60px; position: relative; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); }
.green-box { background: #0e9b41; position: relative; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); }


header { position: relative; left: 0; right: 0; background-color: #FFF; padding: 15px 0px; overflow: hidden; }
header .logo a img { width: 200px; }
header .counter { text-align: center; padding: 40px 0px 20px 0px; }
header .counter .days { color: #009b3e; font-weight: bold; }
header .header-social { float: right; padding: 28px 0px 20px 0px; }
header .header-social ul.social { list-style: none; }
header .header-social ul.social li { float: left; margin-right: 15px; }
header .header-social ul.social li i { font-size: 30px; }
header .header-social ul.social li svg { color: #009b3e; transition: ease-in-out .3s; cursor: pointer;}
header .header-social ul.social li svg:hover { color: #000000;}
header .navigation ul.menu { text-align: center; padding: 25px 0px; }
header .navigation ul.menu li { display: inline-block; }
header .navigation ul.menu li a { background: transparent; color: #009b3e; font-weight: 900; text-transform: uppercase; padding: 10px 30px; transition: ease .3s;}
header .navigation ul.menu li a:hover { text-decoration: none; color: #006a2a; }
header .member-logo img { width: 100%; padding: 20px 0px; }

#home-slider { position: relative; height: 600px; }
#home-slider .flexslider { border: 0px; height: 600px; position: relative; }
#home-slider .flexslider .flex-viewport li { position: relative; height: 600px; background-repeat: no-repeat; background-position: center; background-size: cover; }
#home-slider .flexslider .flex-viewport li .content { position: absolute; z-index: 99999; margin-top: 200px; }
#home-slider .flexslider .flex-viewport li .content h2 { color: #FFF; font-size: 60px; line-height: 1.2em; text-shadow: 3px 3px 20px rgba(0,0,0,0.5); padding-bottom: 20px;}
#home-slider .flexslider .flex-viewport li .content h2 span { display: block; }
#home-slider .flexslider .flex-viewport li .content h4 { color: #FFF; font-size: 32px; line-height: 1.2em; }
#home-slider .flexslider .flex-viewport li .content p { color: #FFF; text-shadow: 3px 3px 20px rgba(0,0,0,0.5); }
#home-slider .flexslider .flex-viewport li .content a { padding: 8px 20px; background: #009b3e; color: #FFF; font-weight: bold; border-radius: 5px; margin-top: 10px; overflow: hidden; display:inline-block;  }

#quick-nav { margin-top: -100px;  position: relative; z-index: 99;}
#quick-nav .container { background: #0e9b41; box-shadow: 0px 10px 20px rgba(0,0,0,0.05); }
#quick-nav .container .inner { text-align: center; padding: 40px 20px; }
#quick-nav .container .inner a { color: #FFF; }
#quick-nav .container .inner a:hover { text-decoration: none; }
#quick-nav .container .inner a svg { font-size: 60px; color: #FFF; transition: ease .3s; }
#quick-nav .container .inner a:hover svg { color: #006a2a; }
#quick-nav .container .inner a h3 { color: #FFFFFF; margin-top: 10px; }
#quick-nav .container .inner a .btn-simple:after { content: '\f101'; font-family: FontAwesome; margin-left: 5px; transition: ease .3s; color: #006a2a; }
#quick-nav .container .inner a:hover .btn-simple:after { margin-left: 10px; color: #fff;}

#content-video { position: relative; margin: 60px 0px;  }
#content-video .container { padding: 40px 50px; }
#content-video .container h2 { color: #009B3E; }

#team-overview { position: relative; margin: 60px 0px;  }
#team-overview .container { padding: 40px 50px; }
#team-overview .container h2 { color: #009B3E; }
#team-overview .container ul { list-style: none; margin: 20px 0px; padding: 0; }
#team-overview .container ul li { display: inline-block; width: 16.3%; padding: 10px; }
#team-overview .container ul li img { border-radius: 50%; width: 100%; }

#winners-short { position: relative; margin: 60px 0px;  }
#winners-short .container { padding: 40px 50px; }
#winners-short .container h2 { color: #FFF; }
#winners-short .container ul { list-style: none; margin: 0; padding: 0; }
#winners-short .container ul li { padding-top: 30px; color: #006a2a; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1em; font-size: 80px; width: 33%; display: inline-block; text-align: center; }
#winners-short .container ul li span { display: block; font-size: 20px; color: #FFF; }

.tournament { background: url(/assets/img/het-toernooi-bg.png) no-repeat #f0f0f0; background-position: top; background-size: 120%; }
.news { background: url(/assets/img/nieuws-bg.png) no-repeat #f0f0f0; background-position: top; background-size: 120%; }
.impression { background: url(/assets/img/impressie-bg.png) no-repeat #f0f0f0; background-position: top; background-size: 120%; }

.content-inner a { color: #212529; text-decoration: underline; transition: ease-in-out .2s; }
.content-inner a:hover { color: #009B3E; text-decoration: none; }

#content-headline { background: transparent; }
#content-headline .inner { padding: 50px 0px 30px 0px; }
#content-headline .inner h1 { color: #FFF; font-size: 70px; }

#content-nav { transition: ease .3s;}
#content-nav.sticky { background: #fff; box-shadow: 0px 10px 20px rgba(0,0,0,0.05); }
#content-nav .container { padding: 10px 50px; }
#content-nav ul { list-style: none; margin: 0; padding: 0; }
#content-nav ul li { display: inline-block; padding: 0px 20px; }
#content-nav ul li:first-child { padding: 0px 20px 0px 0px; }
#content-nav ul li a { color: #000; font-weight: 700;}
#content-nav ul li a.active {color: #009B3E;}

#content-rules { position: relative; margin: 60px 0px;  }
#content-rules .container { padding: 40px 50px; }
#content-rules .container h2 { color: #009B3E; }
#content-rules .container h4 { font-size: 18px; font-weight: bold; margin-bottom: 5px; margin-top: 25px; }

#content-information { position: relative; margin: 60px 0px;  }
#content-information .container { padding: 40px 50px; }
#content-information .container h2 { color: #009B3E; }
#content-information .container h4 { font-size: 18px; font-weight: bold; margin-bottom: 5px; margin-top: 25px; }

#content-refferee { position: relative; margin: 60px 0px;  }
#content-refferee .container { padding: 40px 50px; }
#content-refferee .container h2 { color: #009B3E; }

#content-accommodation { position: relative; margin: 60px 0px;  }
#content-accommodation .container { padding: 40px 50px; }
#content-accommodation .container h2 { color: #009B3E; }
#content-accommodation .container ul { list-style: none; margin: 40px 0px; padding: 0; }
#content-accommodation .container ul li { display: inline-block; margin-right: 2%; margin-bottom: 25px;  width: 30%;}
#content-accommodation .container ul li a img { width: 100%; }

#content-news { position: relative; margin: 0px 0px 60px 0px;  }
#content-news .container { padding: 40px 50px; }
#content-news .container .news-item { padding: 30px 0px; border-bottom: 1px solid #eee; }
#content-news .container .news-item img { width: 100%; }
#content-news .container .news-item h4 { color: #009B3E; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1em; padding-bottom: 10px; }

#content-impression { position: relative; margin: 0px 0px 60px 0px;}
#content-impression .col-md-12 {padding: 0px;}
#content-impression ul { list-style: none; margin: 0px; padding: 0px; }
#content-impression ul li { width: 33.33%; padding: 4px 4px 4px 4px; float: left;}
#content-impression ul li a:focus {outline: none;}
#content-impression ul li a img { width: 100%; }

#click-blocks { position: relative; margin: 0px 0px 60px 0px; }
#click-blocks .box { background: #FFF; margin-bottom: 30px;}
#click-blocks .box a { text-decoration: none;}
#click-blocks .box a .description { padding: 20px; text-align: center; }
#click-blocks .box a .description span { color: #009B3E; font-size: 1.5em; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1em; }

#content-history { position: relative; margin: 0px 0px 60px 0px;  }
#content-history .container { padding: 40px 50px; }
#content-history .container h2 { color: #009B3E; font-size: 2.5em; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1em; padding-bottom: 10px; }
#content-history .container h4 { color: #000000; font-size: 1.2em; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1em; padding-top: 20px; }
#content-history .container ol { margin-left: 15px; padding: 0px;}
#content-history .container ul { margin-left: 0px; padding: 0px; list-style: none; }
#content-history .container ul li { font-weight: bold; width: 100%; display: flex; justify-content: space-between; }
#content-history .container ul li span { float: right; width: 50%; text-align: left; font-weight: normal;}


#content-contact { position: relative; margin: 0px 0px 60px 0px;  }
#content-contact .container { padding: 40px 50px; }
#content-contact .container h2 { color: #009B3E; }

footer { background: #009B3E; }
footer .footer-center { }
footer .footer-center .box { padding: 50px 0px ;}
footer .footer-center .box h4 { font-size: 20px; color: #FFFFFF; font-family: 'Oswald', sans-serif; font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1em; padding-bottom: 10px; }
footer .footer-center .box ul { list-style: none; margin: 0px; padding: 0px; }
footer .footer-center .box ul li { color: #FFF; }
footer .footer-center .box ul li a { color: #FFF; }
footer .footer-center .box ul li svg { margin-right: 10px; }
footer .footer-center .box ul.contact li svg { color: #FFF; }
footer .footer-center .box ul.social li { float: left; margin-right: 15px; }
footer .footer-center .box ul.social li i { font-size: 30px; }

#powered { background: #006a2a; padding: 15px 0px; }
#powered ul { list-style: none; margin: 0px; padding: 0px; font-size: 14px; }
#powered ul li { color: #FFF; float: left; margin-right: 20px; }


@media screen and (max-width: 1024px) {
    #team-overview .container .ul li { width: 24%; }
    #content-impression ul li { width: 50%; }
}

@media screen and (max-width: 768px) {

    h2 { line-height: 1.2em; font-size: 1.8rem; }

    .menu-overlay ul { padding: 8vh 0 0 0; }
    .menu-overlay ul li a { padding: 5px 0px; }

    .sticky { display: none; }

    .impression, .tournament, .news { background-size: 400%; }

    #winners-short .container ul li { width: 100%;}

    #content-headline .inner { padding: 50px 10px 30px 15px; }
    #content-headline .inner h1 { font-size: 50px;}

    #content-nav ul li { padding: 10px 0px; }

    #team-overview .container ul li { width: 48%; }
    #content-news .container .news-item h4 { padding-top: 20px;}
    #content-impression ul li { width: 100%; }

    #content-history .container ul li { font-weight: bold; flex-direction: column;
    #content-history .container ul li span { display: block; float: none; width: 100%; }

    #content-accommodation .container ul li { width: 100%; }

    #content-contact .container h2 { margin-top: 40px;  }

    footer .footer-center { padding: 40px 0px; }
    footer .footer-center .box { padding: 20px 0px 20px 0px;}
}