/* Globale reset */
* { margin: 0; padding: 0; }
body {
font-family: Tahoma, Verdana, sans-serif;
}
.container {
margin-top: 10px;
}
h1, h2, h3, h4, h5, h6 {
font-weight:700;
}
.fancyTab {
text-align: center;
padding:15px 0;
background-color: #eee;
box-shadow: 0 0 0 1px #ddd;
top:15px;	
transition: top .2s;
}
.fancyTab.active {
top:0;
transition:top .2s;
background: #fff;
box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
padding-bottom:30px;
}
.whiteBlock {
  display:none;
}
.fancyTab.active .whiteBlock {
display:block;
height:2px;
bottom:-2px;
background-color:#fff;
width:99%;
position:absolute;
z-index:1;
}
.fancyTab a {
font-size:1.65em;
font-weight:300;
transition:.2s;
color:#0A008E;
}
.fancyTab .hidden-xs {
white-space:nowrap;
font-weight:bolder;
}
.fancyTabs {
border-bottom:2px solid #ddd;
margin: 1px 0 0;
opacity: 0.9;
}
li.fancyTab a {
padding-top: 15px;
top:-15px;
padding-bottom:0;
}
li.fancyTab.active a {
padding-top: inherit;
}
.fancyTab .fa {
font-size: 40px;
width:100%;
padding: 1px 0 5px;
color:#666;
}
.fancyTab.active .fa {
color:#6B2E00;
}
.fancyTab a:focus {
outline:none;
}
.fancyTabContent {
border-color: transparent;
box-shadow: 0 -2px 0 -1px #fff, 0 0 0 1px #ddd;
padding: 1px 15px 15px;
position:relative;
background-color:#fff;
opacity: 0.9;
}
.nav-tabs > li.fancyTab.active > a, 
.nav-tabs > li.fancyTab.active > a:focus,
.nav-tabs > li.fancyTab.active > a:hover {
border-width:0;
}
.nav-tabs > li.fancyTab:hover {
background-color:#f9f9f9;
box-shadow: 0 0 0 1px #ddd;
}
.nav-tabs > li.fancyTab.active:hover {
background-color:#fff;
box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
}
.nav-tabs > li.fancyTab:hover a {
border-color:transparent;
}
.nav.nav-tabs .fancyTab a[data-toggle="tab"] {
background-color:transparent;
border-bottom:0;
}
.nav-tabs > li.fancyTab:hover a {
border-right: 1px solid transparent;
}
.nav-tabs > li.fancyTab > a {
margin-right:0;
border-top:0;
padding-bottom: 30px;
margin-bottom: -30px;
}
.nav-tabs > li.fancyTab {
margin-right:0;
margin-bottom:0;
}
.nav-tabs > li.fancyTab:last-child a {
border-right: 1px solid transparent;
}
.nav-tabs > li.fancyTab.active:last-child {
border-right: 0px solid #ddd;
box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ddd;
}
.fancyTab:last-child {
box-shadow: 0 0 0 1px #ddd;
}
.tabs .nav-tabs li.fancyTab.active a {
box-shadow:none;
top:0;
}
.arrow-down {
display:none;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 22px solid #ddd;
position: absolute;
top: -1px;
left: calc(50% - 20px);
}
.arrow-down-inner {
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 12px solid #fff;
position: absolute;
top: -22px;
left: -18px;
}
.fancyTab.active .arrow-down {
display: block;
}
@media (max-width: 1200px) {
.fancyTab .fa {
font-size: 36px;
}
.fancyTab .hidden-xs {
font-size:22px;
}
}
@media (max-width: 992px) {
.fancyTab .fa {
font-size: 33px;
}
.fancyTab .hidden-xs {
font-size:18px;
font-weight:normal;
}
}
@media (max-width: 768px) {
.fancyTab > a {
font-size:18px;
}
.nav > li.fancyTab > a {
padding:15px 0;
margin-bottom:inherit;
}
.fancyTab .fa {
font-size:30px;
}
.nav-tabs > li.fancyTab > a {
border-right:1px solid transparent;
padding-bottom:0;
}
.fancyTab.active .fa {
color: #333;
}
}
/* Achtergrondafbeelding */
#bg {
position: fixed;
top: 0;
left: 0;
opacity:0.4;
z-index:-1;
}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

/* Lijn - zwart */
hr.lijn {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
/* Lijn - blauw */
hr.lijn2 {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,0.75), rgba(0,0,255,0));
}
/* Voet */

p.info {
text-align: center;
padding: 20px;
color:#909090;
text-shadow: 1px 1px 0px #111111;
}

/* Kop */
p.info2 {
text-align: center;
padding: 13px 0 0 0;
font-size: 24px;
font-weight: bolder;
text-shadow: 1px 1px 1px #FFFFFF, 0 0 25px #DDDDDD, 0 0 5px #FFFFFF;
}

/* Rechts uitlijnen teller */
p.info3 {
text-align: center;
padding: 1px 0 0 0;
}
/* Tekststijlen */
/* Rood */
.stijl1 {
color:#F74043;	
font-weight:600;
font-size: 13px;
}
.stijl1b {
color:#F74043;	
font-weight:600;
font-size: 10px;
}
.stijl1c {
color:#454545;	
font-weight:600;
font-size: 10px;
padding: 1px 1px 1px 25px;
}
/* Blauw */
.stijl2 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color:#000DA8;
font-weight:600;
font-size: 14px;
}
/* Blauw */
.stijl3 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color:#000DA8;
font-weight:600;
font-size: 16px;
}
.stijl3b {
color:#000DA8;	
font-weight:600;
font-size: 10px;
}
/* Groen */
.stijl4 {
font-family: 'Source Sans Pro';
color:#014E05;
font-weight:600;
font-size: 20px;
}
/* Opmaak mail */
.mail {
text-align: center;
}
.mail2 {
font-size: 24px;
font-weight: bolder;
color:#660001;
}
/* Popup */
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
overflow:hidden;
}
.popup-inner {
max-width:700px;
width:90%;
padding:40px;
position:absolute;
top:52%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
max-height: calc(100vh - 20px);
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
/* Sluitknop */
.popup-close {
width:23px;
height:23px;
padding-top:0;
display:inline-block;
position:absolute;
top:30px;
right:24px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:rgba(0,0,0,0.8);
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#fff;
}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:rgba(0,0,0,1);
text-decoration:none;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 2px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background:#00028F;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background:#005102; 
}
/* Responsive afbeelding */
.beeld {
max-width: 100%;
height: auto;
z-index: -1;
}
/* Responsive link + kader */
a {
border: 1px solid #000;
padding: 3px 3px;
font-weight: bold;
font-size: 12px;
background: #FFF;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
border-color: #9B9B9B;
-webkit-box-shadow: 0px 0px 1px 0px rgba(55, 55, 90, .50);
-moz-box-shadow: 0px 0px 1px 0px rgba(55, 55, 90, .50);
box-shadow: 0px 0px 1px 0px rgba(55, 55, 90, .50);
}
a:hover{
color:#F40C21;
background-color:#F8F4BD;
}
/* Wachtwoord - Opmaak iframe */
.myIframe {
position: relative;
padding-bottom: 310px;
height: 0;
overflow: auto; 
-webkit-overflow-scrolling:touch;
border: solid black 1px;
} 
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.blink {
-webkit-animation: blink 2s linear infinite;
-moz-animation: blink 2s linear infinite;
-ms-animation: blink 2s linear infinite;
-o-animation: blink 2s linear infinite;
animation: blink 2s linear infinite;
}
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-o-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
#bg-video {
position: fixed;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
z-index: -100;
background: url("../figuurstart/bgr3.jpg") no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Fototheek animatie (w3-content) */
.w3-content, .w3-auto { margin-left:auto; margin-right:auto; }
.w3-content { max-width:980px; }
.w3-auto { max-width:1140px; }
.w3-section, .w3-code { margin-top:16px !important; margin-bottom:16px !important; }
.w3-animate-fading { animation: fading 10s infinite; }
@keyframes fading { 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } }
/* Kleurwisselende titeltekst */
.tekstkleur { animation: color-animation 15s infinite alternate linear; }
@keyframes color-animation {
0%   { color: #FF0000; }
20%  { color: chocolate; }
40%  { color: darkgoldenrod; }
60%  { color: darkgreen; }
80%  { color: darkblue; }
100% { color: #8080FF; }
}
/* Icon pulse */
.fa-pulse {
display: inline-block;
animation: pulse 5s infinite linear;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
80% { opacity: 1; }
}
/* Cookiebanner popup */
.popupx {
background-color: antiquewhite;
width: 222px;
height: auto;
padding: 6px 6px 0px 6px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 90%;
border-radius: 8px;
font-family: "Poppins", sans-serif;
display: none;
text-align: center;
z-index: 999;
}
.popupx button {
display: block;
background-color: transparent;
font-size: 16px;
color: #ffffff;
background: #EBF495;
border-radius: 100%;
width: 20px;
height: 20px;
padding: 0px 0px 0px 1px;
border: none;
outline: none;
}
.pop { color: indigo; }
.popupx p {
font-size: 12px;
text-align: center;
margin: 20px 0;
line-height: 5px;
}
.verberg-na-5s {
padding: 6px;
animation: verdwijn 1s ease forwards;
animation-delay: 5s;
}
@keyframes verdwijn {
to { opacity: 0; visibility: hidden; }
}