/*-----------------------------------------General-----*/

body, html{
    margin: 0;
	padding: 0;
    overflow-x: hidden;
    width: 100%;
    
    background-repeat: repeat;
}
p, a, h1, h2, h3, h4, h5, footer, span, li, ul{
    font-family: 'Lato', sans-serif;
    padding: 0;
    margin: 0;
    text-align: left;
}
h1, h2, h3{.service-items
    margin-bottom: 10px;
}

h2, h3{
    font-weight: 400;
}

h1{
	font-size: 50px;
}

h3{
    font-size: 20px;
}
p, a, span {
    margin: 0;
    font-size: 16px;
    display: block;
}
.upperCase{
    text-transform: uppercase;
}
a{
  text-decoration: none;
  color: black;
}
a:hover, a:focus{
    cursor: pointer;
}
li{
    list-style: none;
    float: left;
}


.master-container{
    width: 1400px;
    margin: 0 auto;
}

.left-side{
    float: left;
}
.right-side{
    float: right;
}

canvas {
    width: 100%;
    height: 730px;
    position: absolute;
    pointer-events:none;
}

.twoside{
    width: 50%;
    float: left;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/*----------------------------------------END-General-----*/

/*-----------------------------------------Hero section-----*/

.mainBanner {
    width: 100%;
    box-sizing: border-box;    
    display: inline-block;
  /*--  background-image: url("/images/mainBanner.png"); ---*/
    
}

.mainBanner nav{
    padding-top: 30px;
}

.mainHeader h1{
    font-weight: bold;
    font-size: 50px;
}
.mainHeader h1 strong{
    font-weight: 300;
}


.logo-holder{
    float: left;
}

.dynamic_color, .mainHeader h1 strong  {
    fill: #00309b;
    color: #00309b;
    animation-name: logoDynamicColor;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear; 
}

@keyframes logoDynamicColor {
	0% {
		fill: #00309b;
        color: #00309b;
        
	}
	25% {
		fill: #fe9001;
        color: #fe9001;
	}
	50% {
		fill: #e34b21;
        color: #e34b21;
	}
	75% {
		fill: black;
        color: black;
	}
	100% {
		fill: #5cc3ff;
        color: #5cc3ff;
	}
}

.main-.mainHeader h1{
    float: right;
    margin: 0;
    padding: 10px;
}
.main-menu {
    float: right;
}
.main-menu li{
    margin-right: 30px;
}
.main-menu li:last-child{
    margin: 0;
}
.main-menu li a{
    text-align: left;
    color: black;
    font-size: 16px;
}

.layer-effect-container div{
    margin-top:200px;
    margin-bottom:200px;
}

/*-----------------------------------------Service Section-----*/

.service-container{
    margin-top:200px;
    margin-bottom:200px;
}

.service-subsection{
    margin-bottom: 100px;
    float: left;
}

.sub-service{
    margin: 15px 0 0 0;
    display: inline-block;
    text-align: left;
    vertical-align: text-top;
    width: 100%;
    box-sizing: border-box;
}
.service-items{
    margin: 15px 0 0 0;
    display: inline-block;
    text-align: left;
    vertical-align: text-top;
    width: 100%;
    box-sizing: border-box;
}

.service-category div{
    width: 40%;
    float: left;
    margin-right: 100px;
}

.business-area{
    display: inline-block;
    width: 100%;
}

.service-items img, .sub-service img {
    text-align: left;
    width: 80px;
}

/*-----------------------------------------Service Section-----*/

.work-container{
    margin: 0 auto;
}
.work-holder{
    margin-bottom: 100px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;

}

.work-holder img{
    width: 100%;
    margin-bottom: 10px;
    border-radius: 15px;
    background-color:#F4F4F4;

}
.work-holder h3{
    margin-bottom: 0;
}
.work-holder h3, .work-holder p{
    text-align: left;
}

.work-holder p{
    color: #9E9E9E;
}


.two-column{
    float: left;
    width: calc(50% - 40px);
}
.two-column:nth-child(1) {
    margin-right: 40px;
  }
.two-column:nth-child(2) {
    margin-left: 40px;
  }


.three-column{
    float: left;
    width: calc(33.33% - 40px);
}
.three-column:nth-child(1) {
    margin-right: 40px;
  }
.three-column:nth-child(2) {
    margin-left: 10px;
    margin-right: 10px;
  }


/*---------------------------------------------------------------------------Footer -----*/

.footer{
    background-color: #F4F4F4;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
    display: inline;
    float: left;

}
.footer-contact-info{
    float: left;
}
.footer-social-link{
    float: right;
}
.footer-contact-info p.location-phone{
    float: left;
    margin-right: 40px;
    margin-top: 20px;
}
.footer-contact-info p.location-phone span{
    margin-bottom: 10px;
}

ul.social-media-list{
    float: left;
}

ul.social-media-list li{
    margin-right: 20px;
    margin-bottom: 20px;
}

.social-media-list li a{
    color: white;
    font-weight: bold;
    background-color: #F4F4F4;
    padding: 10px 20px 10px 20px;
    color: black;
    border-radius: 30px;
}

.social-media-list li a:hover{
    background-color: black;
    color: white;
}

.social-media-list li a i {
    margin-right: 10px;
}

.copyright-container{
    background-color: #F4F4F4;
    border-top: 1px solid rgb(232, 232, 232);
    padding-bottom: 10px;
    padding-top: 10px;
    display: inline-block;
    width: 100%;
}
.copyright-container p{
    font-size: 12px;
    margin-top: 10px;
    color: #9E9E9E;
    
}

/*----END-Footer -----*/

/*----Progress wrap -----*/
.progress-wrap {
	position: fixed;
	right: 30px;
	bottom: 30px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(0,0,0,0.1);
	z-index: 10000;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: rgba(0, 0, 0, 0.2); /* --- Lijn progres kleur --- */
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}


#circle{
    width: 7px;
    height: 7px;
    position:fixed;
    border-radius:50%;
    border: 10px solid black;
    pointer-events: none;
  }


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1000px) {

    canvas{
        display: none;
    }

    .twoside{
        width: 100%;
        float: left;
        margin-bottom: 20px;
        box-sizing: border-box;
        
    }
    .layer-effect-container div{
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .main-menu{
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .mainBanner{
        padding-bottom: 30px;
        display: inline-block;
    }

    .logo-holder{
        width: 100%;
    }

    .master-container{
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .master-container, 
    .layer-effect-container div,
    .service-category div, 
    .two-column,
    .footer-contact-info,
    .footer-social-link
    {
        width: 100%;
        box-sizing: border-box;
    }
    
    .work-holder, .two-column:nth-child(2){
        display: inline-block;
        margin: 0;
        padding-bottom: 50px;
    }

    .sub-service{
        margin: 15px 0 0 0;
        display: inline-block;
        text-align: left;
        vertical-align: text-top;
        border-radius: 15px;
        width: 100%;
        box-sizing: border-box;
    }

   .service-items{
        margin: 10px 0 10px 0;
        display: inline-block;
        text-align: left;
        vertical-align: text-top;
        width: 100%;
        box-sizing: border-box;
    }

    .service-category div{
        margin-bottom: 100px;
    }
    .service-category div:last-child{
        margin: 0;
    }

    .footer-social-link{
        margin-top: 50px;
    }


};