/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

@font-face {
font-family: ‘OPTIMA_B’;
url(‘https://koningdevos.nl/wp-content/uploads/2020/12/OPTIMA_B.woff’) format(‘woff’), /* Pretty Modern Browsers */
}
@font-face {
font-family: ‘OPTIMA’;
url(‘https://koningdevos.nl/wp-content/uploads/2020/12/OPTIMA.woff’) format(‘woff’), /* Pretty Modern Browsers */

}
@font-face {
font-family: ‘Optima_Italic’;
url(‘https://koningdevos.nl/wp-content/uploads/2020/12/Optima_Italic.woff’) format(‘woff’), /* Pretty Modern Browsers */
}

.embed-website{
	background-color: #404041;
}

li{
	text-align:left;
}
/**------------------------------logo-----------------------------**/

.logo-float{
	border-right: 4px solid #ee4b28;
	margin-bottom:-160px;
}

.animate-kdv-logo{
	width: 100%;
    height: 100%;
    will-change: transform;
	animation: logo-rotate 2300ms infinite alternate cubic-bezier(.455,.03,.515,.955);
}

@keyframes logo-rotate {
	0% {
    transform: rotate(-2deg);
	}
100% {
    transform: rotate(2deg);
	}
}
@keyframes logo-float{
 0% {
   transform: translateY(-2%);
	}
100% {
    transform: translateY(0);
	}
}
/**-------------------------------------------vacature pagina--------------------------*/
.kdv-vac{
	margin-left:50px;
	margin-right:50px;
}
.vacature-img{
	background:url('https://koningdevos.nl/wp-content/uploads/2020/10/koningdevos.jpg') center center / cover no-repeat;
}
/*-----------------------------------------pageheader------------------------------------*/
.site-header, .inside-header, .site-content{
	background-color: #404041;
	text-align:center;
}

.page-id-123 .site-header, .page-id-120 .site-header, .page-id-8 .site-header, .page-id-126 .site-header, .page-id-421 .site-header{
	display: none;	
	}

/*-----------------------------------------site-content--------------------------------*/
.separate-containers .inside-article {
	background-color:#404041;
}

.page-id-123 .site-content{
	background-color: transparent;
}

.page-id-123 .separate-containers .inside-article{
	background-color: transparent;
}

.backgrnd{
	background-image:url('https://koningdevos.nl/wp-content/uploads/2020/11/Tekening-aandrijving-X-as-LT.png');
}

.eindgebruiker{
	margin-top:50%;
}
/*-----------------------------------------text------------------------------------------*/
.textspecial{
	text-align:justify;
	padding:10px;
}
.textspecial-2{
	padding:10px;
}
@media (max-width: 767px) {
	.textspecial{
		text-align:left;
	}
.wp-block-group__inner-container{
	padding:15px;
	}
	.kdv-vac{
	margin-left:10px;
	margin-right:10px;
}
}

p{
	text-shadow: 1px 1px #000;
}
a, a:visited{
	color:#FFF;
}
/*------------------------------------------video----------------------------------------*/
.fullscreen-bg{
    position: relative;
    padding-bottom: 30%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.fullscreen-bg video{
    position: absolute;
	margin-top:-20%;
    top: 0;
    left: 0;
	right:0%;
    width: 100%;
}

.overlay-vid h2 {
	background-color: rgba(64, 64, 65, 0.78);
	padding:20px;
    position:absolute;
	border: 3px solid #ee4b28;
	border-radius:5px;
    top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    z-index:1;
}
h2.overlay-vid{
background-color: rgba(64, 64, 65, 0.78);
	padding:20px;
	border: 3px solid #ee4b28;
	border-radius:5px;
}

@media (max-width: 767px) {
    .fullscreen-bg {
		padding-bottom:80%;
    }
	.page-id-123 .fullscreen-bg{
		background: url('https://koningdevos.nl/wp-content/uploads/2020/10/koningdevos.jpg') center center / cover no-repeat;
	}
	.page-id-120 .fullscreen-bg{
		background: url('https://koningdevos.nl/wp-content/uploads/2020/11/Koning-de-Vos-laser-2.jpg') center center / cover no-repeat;
	}	
	.page-id-126 .fullscreen-bg{
	background: url('https://koningdevos.nl/wp-content/uploads/2020/11/Koning-de-Vos.jpg') center center / cover no-repeat;
	}
    .fullscreen-bg__video {
        display: none;
    }
}

/**---------------------------------------------navigation---------------------------------**/
.main-navigation {
	background-color: #404041;
}

.main-navigation .main-nav ul li a {
    font-size: 16px;
    color: #f1f0f0;
}

.main-navigation .main-nav ul li:hover > a {
	color: #f1f0f0
	font-weight: 700 !important;
	letter-spacing: 3px;
	background: none;
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	transition: all 0.9s ease 0s;
    text-decoration: solid underline #ee4b28;
	-webkit-text-decoration-line: underline;
	-webkit-text-decoration-color: #ee4b28;
	
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
        background-color: #404041;
        color: #ff4c00;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a{
	 background-color: #404041;
    color: #f1f0f0;
}

/*------------------------------------------------button-login------------------------------------*/

.button_cont a {
	background: #404041;
	margin: 10px;
	padding:10px;
	box-shadow: 0 0 0 0 rgba(238,75,40,1);
	transform: scale(1);
	animation: pulse 2s infinite;
}
.button_cont a:hover {
color: #f1f0f0 !important;
background: #ee4b28;
border-color: #ee4b28 !important;
transition: all 0.4s ease 0s;
}



@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(238,75,40,0.9);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(238,75,40,0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(238,75,40,0.8);
	}
}


/*-------------------------------------about-----------------------------------------------*/
@media (max-width: 768px) {
    .reverse-mobile {
        flex-direction: column-reverse;
    }
	.spacer-desktop{
		display:none;
	}
}
@media screen and (min-width: 769px) {
	.wie-we-zijn .wie-we-zijn-1, .overons1, .wie-we-zijn .wie-we-zijn-3{
	background-color:#40404190;
	padding:10px;
	}
	
	.wie-we-zijn .wie-we-zijn-1, .wie-we-zijn .wie-we-zijn-3{
    margin-left:-20vw;
	}

	.over-ons-1 .overons1{
	margin-right:-20vw;
	z-index: 10;
	}
}

.wie-we-zijn .wie-we-zijn-1, .over-ons-1 .overons1,.wie-we-zijn .wie-we-zijn-3{
    margin-top:30%;
	margin-bottom:30%;
    border: solid 3px #ee4b28;
}





/*--------------------------------------------watwedoen---------------------------------------*/

.logo-kdv-wat {
	padding-right:30px;
}

.wat-we-doen-clm p{
	padding:20px;
}
.auto-slider{
    position: relative;
    box-sizing: content-box;
    display: inline-block;
    padding: 30px;
    background: #404041;
    max-width: 720px;
    margin: 30 auto;
    overflow: hidden;
	border:15px solid #404041;
	border-radius: 50px;
	background: #404041;
	box-shadow: 41px 41px 82px #363637, 
             -41px -41px 82px #4a4a4b;
 
}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
	
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 25s sliding ease-out infinite; 
}
/* Slider indicator */
.indicator{
    width: 100%;
    max-width: 720px;
    height: 6px;
    background: #ee4b28;
    position: absolute;
    bottom: 0;
    animation: indicating 5s ease infinite; 
}

/* Switch */

.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f39c12;
  position:relative;
  -webkit-animation:on 30s infinite;
  -moz-animation:on 30s infinite;
  animation:on 30s infinite;
}
@-webkit-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@-moz-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@keyframes sliding{
            0%{left: 0%; }
            20%{left: -100%;}
            40%{left: -200%;}
            60%{left: -300%;}
            80%{left: -400%;}
            100%{left: 0%;}
        }        
        
@keyframes indicating{
     from{ left: -100%;}
            to{ left: 0}
}  

@media (max-width: 768px){
	.auto-slider{
		margin:0px 20px 0px 20px;
		padding:0px 0px 0px 0px;
		border-radius: 25px;
	}
	.logo-kdv-wat{
		display:none;
	}
	.logo-float{
		border:0px;
	}
	.wat-we-doen-clm p{
	padding:0px;
}
}
@media (min-width: 768px) {
	.mobile-alleen, .logo-vos-watwedoen{
		display:none;
	}
    .border-watwedoen{
	padding-right:30px;
	border-right: 4px solid #ee4b28;
	}
	
}

/*--------------------------------------------cf7-------------------------------------------*/

.wpcf7 input[type="text"],
.wpcf7 input[type="email"], .wpcf7-text, .wpcf7 textarea {
	height: 50px;
	color: #f1f0f0;
	background-color:#404041;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 2px solid #ee4b28;
	padding-bottom:2px;
}

.wpcf7-text:focus, .wpcf7-textarea:focus {
outline:none;
}

.wpcf7-text, .wpcf7 textarea{
	width: 80%;
}

.wpcf7 form.sent .wpcf7-response-output {
border:none;
	color:#FF4C00;
}
input.wpcf7-form-control.wpcf7-submit {
display: block;
margin: 0 auto;
}
/* -Change the white from autofill chrome to any color ;) -*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #404041 inset !important;
}
/*-Change text in autofill chrome textbox-*/
input:-webkit-autofill {
    -webkit-text-fill-color: #f1f0f0 !important;
}

/*--------------------------------------------footer------------------------------*/
.site-info{
	background-color:#31201e;
	color:#ee4b28;
}

@media (max-width: 768px) {
	.desktop-spacer{
		display:none;
	}
	.wpcf7-text, .wpcf7 textarea{
	width: 100%;
}
}
/*------------------------ Wiewezijn-----------------------------*/