html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.row {
	margin: 0;
}

@media (min-width: 1600px) {
	.laptop-container{
		-ms-flex: 0 0 66.666667%;
    	flex: 0 0 66.666667%;
    	max-width: 66.666667%;
		margin-left: 16.666667%;
	}
}

@media (min-width: 2100px) {
	.laptop-container{
		-ms-flex: 0 0 50%;
    	flex: 0 0 50%;
    	max-width: 50%;
		margin-left: 25%;
	}
}

h1, h2, h3 {
	font-family: 'Heebo', sans-serif;
}

h1 {
	font-weight: 800;
}

h2 {
	font-size: 36px;
	font-weight: 700;
}

.pb-6 {
	padding-bottom: 5rem !important;
}

.pt-6 {
	padding-top: 5rem !important;
}

.sub-text {
	font-size: 20px;
	font-family: 'Heebo', sans-serif;
	color: rgba(3,27,78,.7);
}

p, ul {
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
}

.btn {
	font-size: 16px;
    font-weight: 500;
    font-family: heebo;
}

.btn-lg {
	padding: .75rem 1.5rem;
	font-size: 20px; 
}

.btn-primary {
	background-color: #1d81c4;
	border: none;
}

.btn-light {
	color: #1d81c4;
}

.color-primary {
	color: #1d81c4 !important;
}

.opacity-0 {
	opacity: 0 !important;
}

.opacity-1 {
	opacity: 1 !important;
}

ul.call-out {
	font-size: 20px;
}

h1.call-out {
	font-size: 3rem;
}

h1.slogan {
	font-weight: 500;
}

.font-thin {
	font-family: 'Open Sans', sans-serif !important;
}

/* LIST GROUPS */
.list-group-item.active {
	background-color: #1d81c4;
}

/* BORDERS */
.rounded-top {
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
}

.rounded-bottom {
	border-bottom-left-radius: .25rem;
	border-bottom-right-radius: .25rem;
}

/* Accordions */
.accordion .card-header {
	background-color: #1d81c4;
	transition: 0.4s;
}

.accordion .card-header:hover {
	background-color: #186ba2;
	transition: 0.4s;
}

.container {
  max-width: 1060px;
}

.card-deck .card {
  min-width: 220px;
}

.workgenda-logo {
	max-width: 40px;
}

.logo-text {
	font-family: 'Archivo Narrow', sans-serif;
	font-weight: bold;
	font-size: 28px;
	line-height: 40px;
	color: #1d81c4;
}

div.nav-links > a {
	line-height: 40px;
	font-family: 'Heebo', sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: #1d81c4;
	transition: 0.4s;
}

div.nav-links > a:hover {
	color: black;
	text-decoration: none;
	transition: 0.4s;
}

.language-select {
	width: auto;
	padding: 0;
}

.featured-header.hero-header {
	padding-top: 115px;
	min-height: 650px;
}

.hero-header {
	background-image: linear-gradient(to left, #1d81c4, #0e84c1, #0687bc, #0c8ab8, #198cb3, #0a8eaf, #0190ab, #0592a6, #00959e, #019795, #1e988a, #33997e);
	/*background: linear-gradient(-5deg, rgba(27,108,162,1) 0%, rgba(29,129,196,1) 100%);*/
	display: flex;
	align-items: center;
}

.hero-list {
	padding-left: 20px;
	padding-right: 10px;
}

.hero-list li {
	line-height: 30px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
}

/* CALCULATE PROFIT */
.calc-form .row {
	margin-left: 0;
	margin-right: 0;
}

/* CAROUSEL USER CASES */
.user-case-chart > img {
	display: block;
}

.carousel-indicators {
	position: relative;
	top: unset;
	bottom: unset;
	right: unset;
	left: unset;
}

.carousel-indicators li {
	background-color: grey;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-right: 5px;
	margin-left: 5px;
}

.carousel-indicators .active {
	background-color: #1d81c4;
}

/* SECTIE */
.pakkende-sectie > .card-deck .card > .card-body > i {
	font-size: 4rem;
}

.scene {
	height: 260px;
}

.scene .card {
	transition: transform 0.75s;
  	transform-style: preserve-3d;
  	background-color: #1d81c4;
}

.card-face {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-face--back {
 	transform: rotateY( 180deg ) translate(50%, -50%);
}

.scene .card:hover {
	transform: rotateY(180deg);
}

.card-read-more {
	position: absolute;
	bottom: .5rem;
	right: .5rem;
}

.card-read-more > i {
	font-size: 25px;
	vertical-align: bottom;
}

/* MODULES */
.modules .card-body i {
	font-size: 3rem;
}

/* SPAN CONTROL */
.span-control > i {
	font-size: 9rem;
	color: #1d81c4;
}

/* CAROUSEL CLIENTS */
.carousel-clients-control > i{
	font-size: 35px;
}

.carousel-control-prev {
	transform: translateX(100%);
}

.carousel-control-next {
	transform: translateX(-100%);
}

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-clients .active,
    .carousel-clients .active + .carousel-item,
    .carousel-clients .active + .carousel-item + .carousel-item,
    .carousel-clients .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-clients .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-clients .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-clients .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-clients .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-clients .carousel-item-next,
    .carousel-clients .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-clients .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .carousel-clients .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-clients .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-clients .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-clients .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-clients .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
        transition: 0.4s;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-clients .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .carousel-clients .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-clients .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-clients .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-clients .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-clients .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
        transition: 0.4s;
    }

}

/* FaQ */
.faq-q {
	white-space: normal;
}

.accordion .card-header span {
	line-height: 1.75;
}

.accordion .card-body {
	line-height: 1.75;
}

/* WORLD MAP */
.world-map {
	/*background: linear-gradient(-5deg, rgba(27,108,162,1) 0%, rgba(29,129,196,1) 100%);*/
	background-image: linear-gradient(to left, #1d81c4, #0e84c1, #0687bc, #0c8ab8, #198cb3, #0a8eaf, #0190ab, #0592a6, #00959e, #019795, #1e988a, #33997e);
}

/* FOOTER */
footer {
	font-family: 'Open Sans', sans-serif;
	color: hsla(0,0%,100%,.5);

	background-color: #010e28!important;
}

footer ul > li {
	margin-bottom: 5px;
}

footer ul li:last-child {
	margin-bottom: 0;
}

.footer-nav > li {
	border-color: hsla(0,0%,100%,.5)!important;
}

.bottom-footer {
	background-color: #020d22;
}

.workgenda-logo-footer {
	width: 35px;
}

.bottom-footer > .container > .row > .copyright, .footer-nav > li > a, a.contact-mail {
	color:	hsla(0,0%,100%,.5);
}

.bottom-footer > .container > .row > .copyright > small, .bottom-footer > .container > .row > div > ul {
	line-height: 35px;
}

/* Helpers */
.fw-normal {
	font-weight: 400;
}

.request-status-container {
    display: flow-root;
    overflow: hidden;
    padding-top: 3rem;
}

.request-status-closing {
    pointer-events: none;
}

.request-status {
    overflow: hidden;
}

.request-status-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: rgba(21, 87, 36, .15);
}

.request-status-progress-bar {
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transition: width .1s linear;
}

.request-status .close:focus {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .request-status-progress-bar {
        transition: none;
    }
}