.navbar-bg {
    background-color: #fff;
    transition: all 300ms;
    border-bottom: 2px solid #A4C736;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    border-bottom: 2px solid #AAC748;
    background: transparent;
}
section.home-intro {
    background: url(../_img/intro-background.jpg) top -100px center;
    padding: 170px 0px 350px;
    background-color: #003f4e;
}
section.home-intro h1 {
    margin-top: 15px;
    margin-bottom: 30px;
}
section.home-intro p {
    line-height: 150%;
    margin-bottom: 30px;
}
.home-intro .btn-holder {
    justify-content: center;
}
.home-video {
    padding: 0px 0px 80px;
}
.home-video img {
    position: absolute;
    left: -380px;
    top: 50px;
}
.home-video .video-holder{
    display: flex;
    justify-content: center;
    margin-top: -290px;
}
.home-video .video-holder .video{
    border-radius: 6px 6px 0px 0px;
    width: 100%;
}
.home-video .video-player {
    max-width: 100%;
    width: 870px;
    height: auto;
    border-radius: 20px;
}

.home-waarom {
    padding: 80px 0px;
    background: url(../_img/bolletjes-bg-blauw.png) left 20px top 0px;
    background-repeat: no-repeat;
    background-size: 420px;
}
.home-waarom .flex-holder {
    display: flex;
    align-items: center;
}
.home-waarom .flex-holder .item {
    width: 620px;
    padding: 20px 40px 20px 20px;
    border-radius: 10px 0px 0px 10px;
    cursor: pointer;
}
.home-waarom .flex-holder .item p {
    font-size: 16px;
}
.home-waarom .flex-holder .flex-item img {
    width: 1000px;
}
.home-waarom .active {
    background-image: linear-gradient(to right, #4fc54e , #7ec900);
    color: #fff !important;
}
.home-waarom .active h3 {
    color: #fff;
}

.home-who {
    padding: 80px 0px;
}
.home-who h2 {
    margin-bottom: 80px;
}
.home-who .flex-holder {
    display: flex;
    gap: 100px;
    align-items: center;
    flex-wrap: wrap;
}
.home-who .flex-holder .item {
    width: 500px;
    padding: 25px 0px;
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    border-bottom: 2px solid black;
    cursor: pointer;
}
.home-who .flex-holder .flex-item h3 {
    font-size: 28px;
}
.home-who .flex-holder h3:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    right: 0px;
    color: #AAC748;
    font-size: 21px;
    transition: all 300ms;
    transform: rotate(-40deg) translateZ(0);
}
.home-who .flex-holder h3:hover:after {
    transform: rotate(0deg) translateZ(0);
}
.home-who .flex-holder h3.active:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    right: 0px;
    color: #AAC748;
    font-size: 21px;
    transition: all 300ms;
    transform: rotate(0deg) translateZ(0);
}
.home-who .flex-item .text-holder {
    background-color: #003f4e;
    height: 390px;
    width: 680px;
    border-radius: 15px;
    padding: 110px 30px 30px;
    position: relative;
    
        
    background: url(../_img/bolletjes-bg.png) right -40px top -30px, #003f4e;
    background-repeat: no-repeat;
    background-size: 350px;
}
.home-who .flex-item .text-holder .icon {
    width: 40px;
    margin-bottom: 10px;
}
.home-who .flex-item .text-holder h4{
    margin-bottom: 10px;
}
.home-who .flex-item .text-holder p{
    font-size: 16px;
    margin-bottom: 50px;
}
.home-who .flex-item .text-holder a {
    background-color: #fcfcfc;
    padding: 10px !important;
    position: relative;
    transition: all 300ms;
}
.home-who .flex-item .text-holder a:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 0px;
    color: #AAC748;
    font-size: 17px;
    margin-left: 10px;
}

.home-easy {
    padding: 120px 0px;
    background: url(../_img/bolletjes-bg-blauw.png) right 40px bottom -50px;
    background-repeat: no-repeat;
    background-size: 420px;
}
.home-easy .card-holder {
    display: flex;
    justify-content: center;
    gap: 25px;
}
.home-easy .card img {
    width: 50px;
    margin-bottom: 30px;
}
.home-easy .card a p {
    color: #AAC748;
    margin-top: 30px;
    position: relative;
    margin-left: 30px;
}
.home-easy .card a p:before {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: -30px;
    color: #AAC748;
    font-size: 17px;
    transition: all 300ms;
    transform: rotate(-40deg) translateZ(0);
}
.home-easy .card a p:hover:before {
    transform: rotate(0deg) translateZ(0);
}
.home-easy .card a p:hover {
    text-decoration: underline;
}

.home-platform {
    padding: 80px 0px 180px;
    background: url(../_img/intro-background.jpg) top 25px center;
    background-color: #003f4e;
    position: relative;
}

.home-platform-slider {
    margin-top: -120px;
    padding: 0px 0px 80px;
}
.home-platform-slider .platform {
    background-color: #fcfcfc;
    padding: 50px 20px 20px;
    margin: 0px 15px;
    border-radius: 15px;
    position: relative;
    z-index: 1;
    -webkit-box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
}
.home-platform-slider .platform div {
    position: absolute;
    padding: 10px;
    border-radius: 50%;
    top: -30px;
    left: 20px;
    background-color: #fcfcfc;
    -webkit-box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
}
.home-platform-slider .platform .icon {
    width: 35px;
}
.home-platform-slider .platform h5 {
    margin-bottom: 10px;
}
.home-platform-slider .platform p {
    margin-bottom: 5px;
}
.home-platform-slider .platform p:before {
    content: "\f058";
    font-family: 'Font Awesome 5 Pro';
    padding-right: 13px;
    color: #9ac700;
    font-weight: 900;
}
.slick-prev:before, .slick-next:before {
    color: #AAC748;
}
.home-platform .slider-arrows {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #00576a;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.home-platform .slider-arrows i {
    color: #fcfcfc;
    font-size: 30px;
    font-weight: 300;
    padding: 0px;
}
.home-platform-slider .slick-list {
    padding: 40px 0px 20px;
}

.home-easy-monitoring .img-holder,
.home-ad-automation .img-holder,
.home-ad-alerts .img-holder {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-easy-monitoring .img-holder img,
.home-ad-alerts .img-holder img {
    max-width: 100%;
    max-height: 100%;
    width: 550px;
}

.home-ad-automation .img-holder img {
    max-width: 100%;
    max-height: 100%;
    width: 470px;
}

.home-easy-monitoring {
    padding: 80px 0px;
    background: url(../_img/bolletjes-bg-blauw.png) left 150px top -10px;
    background-repeat: no-repeat;
    background-size: 350px;
}

.home-ad-alerts {
    padding: 80px 0px;
    background: url(../_img/bolletjes-bg-blauw.png) right 230px top -10px;
    background-repeat: no-repeat;
    background-size: 350px;
}

.home-ad-automation {
    padding: 80px 0px 100px;
    background: url(../_img/bolletjes-bg-blauw.png) left 150px top -10px;
    background-repeat: no-repeat;
    background-size: 350px;
}

.home-feature {
    padding: 80px 0px 180px;
    background-image: linear-gradient(to top, #fff, #F4F4F4);
}
.home-feature .features-slider {
    margin-top: 50px;
}
.home-feature .feature {
    margin: 0px 5px;
    padding: 20px;
    border-radius: 10px;
    height: 260px;
    background-color: #fff;
    -webkit-box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    position: relative;
}
.home-feature .feature div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.home-feature .feature img{
    width: 40px;
    margin: 0 20px 0 0;
}
.home-feature .feature p {
    font-size: 15px;
}
.home-feature .feature .feature-more p {
    margin-top: 15px;
    margin-left: 30px;
}
.home-feature .feature .feature-more p:before {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: 25px;
    color: #AAC748;
    font-size: 17px;
    transition: all 300ms;
    transform: rotate(-40deg) translateZ(0);
}
.home-feature .feature .feature-more p:hover:before {
    transform: rotate(0deg) translateZ(0);
}
.home-feature .feature-link {
    position: absolute;
    right: 170px;
    top: 10px;
}
.home-feature .feature-link p:before {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: -25px;
    color: #AAC748;
    font-size: 17px;
    transition: all 300ms;
    transform: rotate(-40deg) translateZ(0);
}
.home-feature .feature-link p:hover:before {
    transform: rotate(0deg) translateZ(0);
}

.home-feature .slider-arrows i {
    color: #000;
    font-size: 30px;
    font-weight: 300;
    padding: 0px;
}
.home-feature .slick-list {
    overflow-x: clip !important;
    overflow-y: visible !important;
}
.home-feature .slider-arrows {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
    -webkit-box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
}

.home-demo-banner {
    padding: 0px 0px 120px;
    margin-top: -110px;
}
.home-demo-banner .banner {
    background-image: linear-gradient(to right, #4fc54e , #7ec900);
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 20px 40px;
    border-radius: 10px;
}
.home-demo-banner .banner h3 {
    font-size: 25px;
}
.home-demo-banner .banner img {
    width: 150px;
}
.home-demo-banner .banner .btn {
    background-color: #004152;
    color: #fff;
    min-width: 195px;
    font-size: 16px;
    padding: 12px !important;
    transition: all 300ms;
    position: relative;
}
.home-demo-banner .banner .btn:hover {
    letter-spacing: normal;
}
.home-demo-banner .banner .btn:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 17px;
    color: #AAC748;
    font-size: 17px;
    position: absolute;
    transform: rotate(-40deg) translateZ(0);
    transition: all 300ms;
}
.home-demo-banner .banner .btn:hover:after {
    transform: rotate(0deg) translateZ(0);
}

/*==================================================
 Features
==================================================*/

.features-intro .btn-holder {
    justify-content: center;
}

.features-key-integration {
    background: url(../_img/bolletjes-bg-blauw.png) left top -10px;
    background-repeat: no-repeat;
    background-size: 420px;
    padding: 80px 0px 60px;
}
.features-ad-listing {
    padding: 60px 0px;
}
.features-ad-monitoring {
    padding: 60px 0px;
}
.features-key-integration .img-holder img {
    max-width: 100%;
    max-height: 100%;
    width: 500px;
}
.features-ad-listing .img-holder img, 
.features-ad-monitoring .img-holder img {
    max-width: 100%;
    max-height: 100%;
    width: 550px;
}
.features-ad-alerts {
    background: url(../_img/bolletjes-bg-blauw.png) right bottom 50px;
    background-repeat: no-repeat;
    background-size: 420px;
    padding: 60px 0px 80px;
}
.features-ad-alerts .img-holder img {
    max-width: 100%;
    max-height: 100%;
    width: 550px;
} 

.features-more {
    background-color: #f2f2f2;
    padding: 80px 0px 190px;
}
.features-more .features-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px 15px;
}
.features-more .feature {
    padding: 20px;
    border-radius: 10px;
    width: 365px;
    height: 230px;
    background-color: #fff;
    -webkit-box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
}
.features-more .feature div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.features-more .feature img{
    width: 40px;
    margin: 0 20px 0 0;
}
.features-more .feature p {
    font-size: 13px;
}

.features-banner-trial {
    padding: 0px 0px 50px;
    margin-top: -100px;
}

.features-more .banner {
    background-image: linear-gradient(to right, #4fc54e , #7ec900);
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px 40px;
    border-radius: 10px;
    position: absolute;
    top: 100px;
    width: 100%;
    justify-content: space-between;
}
.features-more .banner h3 {
    font-size: 24px;
}
.features-more .banner img {
    width: 150px;
    margin: 0;
}
.features-more .banner .btn {
    background-color: #ff6600;
    color: #fff;
    min-width: 250px;
    font-size: 16px;
    padding: 12px !important;
    transition: all 300ms;
    position: relative;
}
.features-more .banner .btn:hover {
    letter-spacing: normal;
}
.features-more .banner .btn:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 17px;
    color: #fff;
    font-size: 17px;
    position: absolute;
    transform: rotate(-40deg) translateZ(0);
    transition: all 300ms;
}
.features-more .banner .btn:hover:after {
    transform: rotate(0deg) translateZ(0);
}

.features-faq {
    padding: 240px 0px 250px;
    background: url(../_img/intro-background.jpg) top -2px center;
    background-color: #003f4e;
}
.features-faq .faq-holder {
    margin-top: 30px;
}
.features-faq .panel-default>.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border-top: 3px solid transparent;
    margin-bottom: 15px;
    border-radius: 15px;
}
.features-faq .panel-default>.green {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border-top: 3px solid transparent;
    margin-bottom: 15px;
    border-radius: 15px;
    background-image: linear-gradient(to right, #4fc54e, #7ec900);
    color: #fff;
}
.features-faq .panel-default>.panel-heading i {
    color: #000;
}
.features-faq .panel-default h4 {
    font-size: 20px;
    flex-grow: 1;
}
.features-faq .panel-group .panel {
    border-radius: 15px;
    margin-top: 25px;
    margin-right: 0;
}
.features-faq .panel-group .green {
    border-radius: 15px;
    margin-top: 25px;
    margin-right: 0;
    background-image: linear-gradient(to right, #4fc54e, #7ec900);
    color: #fff;
}
.features-faq .benefits-holder {
    position: relative;
    margin-top: 45px;
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 15px;
}
.features-faq .benefits-holder .subtitel {
    font-size: 20px;
}
.features-faq .btn-holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
}
.features-faq .btn-contact {
    width: 130px;
    background-color: #002129;
    color: #fff;
    padding: 10px 10px 10px 15px;
    border-radius: 30px;
    font-size: 15px;
    position: relative;
}
.features-faq .btn-free {
    width: 200px;
    background-color: #002129;
    color: #fff;
    padding: 10px 10px 10px 15px;
    border-radius: 30px;
    font-size: 15px;
    position: relative;
}
.features-faq .btn-contact:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 17px;
    top: 8px;
    color: #AAC748;
    font-size: 17px;
    position: absolute;
    transform: rotate(-40deg) translateZ(0);
    transition: all 300ms;
}
.features-faq .btn-contact:hover:after {
    transform: rotate(0deg) translateZ(0);
}
.features-faq .btn-free:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 17px;
    top: 8px;
    color: #fff;
    font-size: 17px;
    position: absolute;
    transform: rotate(-40deg) translateZ(0);
    transition: all 300ms;
}
.features-faq .btn-free:hover:after {
    transform: rotate(0deg) translateZ(0);
}

.features-dashboard {
    margin-top: -160px;
    background: url(../_img/bolletjes-bg-blauw.png) left top 50px;
    background-repeat: no-repeat;
    background-size: 420px;
}

/*==================================================
 Pricing
==================================================*/

.pricing-intro {
    background: url(../_img/intro-background.jpg) top -100px center;
    padding: 170px 0px 120px;
    background-color: #003f4e;
}
.pricing-intro h1 {
    margin-bottom: 30px;
}
.pricing-intro .btn-holder {
    justify-content: center;
}

.pricing-offers {
    padding: 80px 0px;
    background: url(../_img/bolletjes-bg-blauw.png) left -120px top -50px;
    background-repeat: no-repeat;
    background-size: 550px;
    position: relative;
}
.pricing-offers h2 {
    margin-bottom: 60px;
}
.pricing-offers .offer-holder {
    display: flex;
    gap: 35px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 60px;
}
.pricing-offers .offer-holder .offer {
    border: 1px solid #AAC748;
    border-radius: 10px;
    padding: 45px 20px;
    width: 395px;
    background-color: #fff;
}
.pricing-offers .offer-holder .offer .xs {
    font-size: 14px;
}
.pricing-offers .bullets {
    margin-bottom: 40px;
}
.pricing-offers .bullet {
    margin-bottom: 10px;
}
.pricing-offers .bullet:before {
    content: "\f058";
    font-family: 'Font Awesome 5 Pro';
    padding-right: 13px;
    color: #9ac700;
    font-weight: 900;
}
.pricing-offers .xxs {
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
}

.pricing-offers .switch-holder {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #eaf1d1;
    padding: 10px 20px;
    border-radius: 10px;
    position: absolute;
    top: 10px;
    right: 5px;
}
.pricing-offers .switch-holder p {
    font-size: 12px;
    color: #cfddcf;
    transition: all 500ms ease;
}
.pricing-offers .switch-holder .active {
    color: #003F4E;
}
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 22px;
    margin-bottom: auto;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #003F4E;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.pricing-faq {
    padding: 120px 0px 220px;
    background: url(../_img/intro-background.jpg) top -2px center;
    background-color: #003f4e;
}
.pricing-faq .faq-holder {
    margin-top: 30px;
}
.pricing-faq .panel-default>.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border-top: 3px solid transparent;
    margin-bottom: 15px;
    border-radius: 15px;
}
.pricing-faq .panel-default>.green {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;
    border-top: 3px solid transparent;
    margin-bottom: 15px;
    border-radius: 15px;
    background-image: linear-gradient(to right, #4fc54e, #7ec900);
    color: #fff;
}
.pricing-faq .panel-default>.panel-heading i {
    color: #000;
}
.pricing-faq .panel-default h4 {
    font-size: 20px;
    flex-grow: 1;
}
.pricing-faq .panel-group .panel {
    border-radius: 15px;
    margin-top: 25px;
    margin-right: 5px;
}
.pricing-faq .panel-group .green {
    border-radius: 15px;
    margin-top: 25px;
    margin-right: 5px;
    background-image: linear-gradient(to right, #4fc54e, #7ec900);
    color: #fff;
}
.pricing-faq .benefits-holder {
    position: relative;
    margin-top: 55px;
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 15px;
}
.pricing-faq .benefits-holder .subtitel {
    font-size: 20px;
}
.pricing-faq .btn-holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
}
.pricing-faq .btn-contact {
    width: 130px;
    background-color: #002129;
    color: #fff;
    padding: 10px 10px 10px 15px;
    border-radius: 30px;
    font-size: 15px;
    position: relative;
}
.pricing-faq .btn-free {
    width: 200px;
    background-color: #002129;
    color: #fff;
    padding: 10px 10px 10px 15px;
    border-radius: 30px;
    font-size: 15px;
    position: relative;
}
.pricing-faq .btn-contact:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 17px;
    top: 8px;
    color: #AAC748;
    font-size: 17px;
    position: absolute;
    transform: rotate(-40deg) translateZ(0);
    transition: all 300ms;
}
.pricing-faq .btn-contact:hover:after {
    transform: rotate(0deg) translateZ(0);
}
.pricing-faq .btn-free:after {
    content: "\f178";
    font-family: 'Font Awesome 5 Pro';
    right: 17px;
    top: 8px;
    color: #fff;
    font-size: 17px;
    position: absolute;
    transform: rotate(-40deg) translateZ(0);
    transition: all 300ms;
}
.pricing-faq .btn-free:hover:after {
    transform: rotate(0deg) translateZ(0);
}

.pricing-img {
    margin-top: -160px;
    background: url(../_img/bolletjes-bg-blauw.png) left top 100px;
    background-repeat: no-repeat;
    background-size: 420px;
}

/*==================================================
 About / Why AdSpotting
==================================================*/

.about-intro {
    background: url(../_img/intro-background.jpg) top -100px center;
    padding: 170px 0px 120px;
    background-color: #003f4e;
}
.about-intro h1 {
    margin-bottom: 30px;
}
.about-intro .btn-holder {
    justify-content: center;
}

.about-advertising {
    padding: 80px 0px;
}
.about-advertising img {
    width: 550px;
}

.about-values {
    padding: 80px 0px;
}
.about-values img {
    width: 450px;
    max-width: 100%;
}

.about-journey img {
    width: 500px;
}

.about-journey {
    padding: 80px 0px;
}

/*==================================================
Media Queries
==================================================*/

@media (min-width: 1400px) {
    .container-xl,
    .container-xxl {
        width: 1320px;
    }
}

@media (min-width: 1600px) { 
    .container-xxl {
        width: 1520px;
    }
}

@media only screen and (max-width: 1599px){
    
}
@media only screen and (max-width: 1399px){
    .home-who .flex-holder {
        gap: 60px;
    }
    .home-who .flex-holder .item {
        width: 430px;
    }
    .home-who .flex-item .text-holder {
        width: 620px;
    }
    .home-feature .feature {
        height: 320px;
    }
    
    /* Pricing */
    .pricing-offers h2 {
        margin-bottom: 100px;
    }
    .pricing-offers .switch-holder {
        top: 80px;
        right: auto;
        left: 5px;
    }
    .pricing-offers .offer-holder {
        gap: 10px;
    }
    .pricing-offers .offer-holder .offer {
        width: 350px;
    }
}
@media only screen and (max-width: 1199px){
    .home-waarom {
        background: url(../_img/bolletjes-bg-blauw.png) left -30px top 0px;
        background-repeat: no-repeat;
        background-size: 350px;
    }
    .home-who .flex-holder .item {
        width: 360px;
    }
    .home-who .flex-item .text-holder {
        width: 460px;
        background-size: 280px;
    }
    .home-easy {
        background: url(../_img/bolletjes-bg-blauw.png) right -60px bottom -50px;
        background-repeat: no-repeat;
        background-size: 350px;
    }
    .home-easy-monitoring {
        background: url(../_img/bolletjes-bg-blauw.png) left -60px top -10px;
        background-repeat: no-repeat;
        background-size: 350px;
    }
    .home-ad-alerts {
        background: url(../_img/bolletjes-bg-blauw.png) right -60px top -10px;
        background-repeat: no-repeat;
        background-size: 350px;
    }
    .home-ad-automation {
        background: url(../_img/bolletjes-bg-blauw.png) left -60px top -10px;
        background-repeat: no-repeat;
        background-size: 350px;
    }
    .home-feature .feature {
        height: 340px;
    }
    .home-feature .feature h5 {
        font-size: 18px;
    }
    .home-review h4 {
        font-size: 22px;
    }
    .logo-klant {
        width: 200px;
    }
    /* Features */
    
    /* Pricing */
    #offer-slider {
        width: 350px !important;
        margin: 0 auto 60px auto;
    }
    .pricing-offers h2 {
        margin-bottom: 170px;
    }
    .pricing-offers .slider-arrows {
        position: absolute;
        top: 140px;
        left: 5px;
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        gap: 40px;
        -webkit-box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
        -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 5px 7px 0px rgb(0 0 0 / 10%);
    }
    .pricing-offers .slider-arrows i {
        color: #003f4e;
        font-size: 30px;
        font-weight: 300;
        padding: 0px;
    }
}
@media only screen and (max-width: 991px){
    .btn-nav {
        top: 20px;
    }
    
    section.home-intro {
        padding: 200px 0px 280px;
    }
    .home-video .video-player {
        max-width: 600px;
        width: 100%;
    }
    .home-who .flex-holder {
        display: block;
    }
    .home-who .flex-holder .item {
        width: 100%;
    }
    .home-who .flex-item .text-holder {
        width: 100%;
        background-size: 340px;
        margin-top: 80px;
    }
    .home-feature .feature {
        height: 310px;
    }
    .home-demo-banner .banner {
        gap: 20px;
    }
    .home-demo-banner .banner h3 {
        font-size: 18px;
    }
    
    .logo-klant {
        width: 160px;
    }
    .logo-klant img {
        width: 110px;
    }
    /* Features */
    .features-intro {
        padding: 140px 0px 80px;
    }
    .features-more .feature {
        width: 320px;
        height: 250px; 
    }
    
    /* Pricing */
    .pricing-intro {
        padding: 140px 0px 80px;
    }
    .pricing-img {
        margin-top: -100px;
    }
    
    /* Review */
    .home-review {
        padding: 120px 0px 200px;
    }
    
}
@media only screen and (max-width: 767px){
    .nav li {
        font-size: 17px;
        margin: 10px 5px;
    }
    section.home-intro {
        padding: 140px 0px 130px;
    }
    .home-video {
        padding: 0px 0px 20px;
    }
    .home-video .video-holder {
        margin-top: -110px;
    }
    .home-waarom {
        padding: 60px 0px;
    }
    .home-waarom .items-slide {
        display: flex;
        margin: 30px auto 0;
        width: 700px;
        max-width: 100%;
        position: relative;
    }
    .home-waarom .items-slide h3 {
        font-size: 19px;
        padding: 10px 0px;
        text-align: center;
        width: 33%;
        cursor: pointer;
        color: #003F4E !important;
        -webkit-transition: all 150ms ease;
        -o-transition: all 150ms ease;
        transition: all 150ms ease;
    }
    .home-waarom .active {
        font-weight: 800;
        letter-spacing: 0.7px;
        background: none;
    }
    .home-waarom .active-bar {
        border-bottom: 5px solid #aac748;

        position: absolute;
        bottom: 0;
        width: 33%;
        -webkit-transition: background-color 150ms ease;
        -o-transition: background-color 150ms ease;
        transition: background-color 150ms ease;
    }
    .home-waarom .holder {
        margin-top: 60px
    }
    .home-waarom .holder p {
        margin-bottom: 30px;
    }
    .home-who {
        padding: 60px 0px;
    }
    .home-who h2 {
        margin-bottom: 40px;
    }
    .home-who .flex-item .text-holder {
        height: 330px;
        padding: 60px 30px 30px;
    }
    .home-who .flex-holder .flex-item h3 {
        font-size: 23px;
    }
    .home-who .flex-holder h3.active:after {
        transform: rotate(90deg) translateZ(0);
    }
    .home-who .flex-holder h3:hover:after {
        transform: rotate(90deg) translateZ(0);
    }
    .home-easy {
        padding: 60px 0px 120px;
    }
    .home-easy .card-holder {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .home-platform {
        padding: 80px 0px 240px;
    }
    .home-platform .slider-arrows {
        top: 160px;
        right: auto;
        left: 0;
    }
    .home-platform-slider {
        padding: 0px;
    }
    .home-easy-monitoring {
        padding: 120px 0px 80px;
    }
    .home-ad-alerts {
        padding: 80px 0px;
    }
    .home-ad-automation {
        padding: 80px 0px 60px;
    }
    .img-holder {
        margin-top: 40px;
    }
    .home-feature .slider-arrows {
        top: 240px;
        right: auto;
        left: 0;
    }
    .home-feature .feature-link {
        position: absolute;
        right: 0;
        top: 35px;
    }
    .home-feature .features-slider {
        margin-top: 130px;
    }
    .home-feature .feature {
        height: 250px;
    }
    .home-feature .feature p {
        font-size: 12px;
    }
    .home-demo-banner .banner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .home-klanten .up {
        border: none;
    }
    .home-klanten .no-right {
        border: none; 
    }
    .home-klanten .mob-left {
        border-bottom: 1px solid #d6dbdc;
        border-right: 1px solid #d6dbdc;
    }
    .home-klanten .mob-right {
        border-bottom: 1px solid #d6dbdc;
        border-left: 1px solid #d6dbdc;
    }
    .home-klanten .mob-bot {
        border-bottom: none;
    }
    .logo-klant {
        width: 230px;
        border: none; 
    }
    
    /* Features */
    .features-key-integration,
    .features-ad-alerts {
        background-size: 250px;
    }
    .features-more .feature {
        height: 250px;
    }
    .features-more .banner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 30px;
        top: 40px;
        padding: 20px;
        width: auto;
    }
    .features-more .slick-track {
        padding-bottom: 25px;
    }
    .features-more .banner img {
        width: 120px;
    }
    .features-more .banner h3 {
        font-size: 21px;
    }
    .features-faq {
        padding: 240px 0px 190px;
    }
    .features-dashboard {
        margin-top: -60px;
    }
    
    /* Pricing */
    .pricing-faq {
        padding: 80px 0px 160px;
    }
    .pricing-offers {
        background-size: 400px;
    }
    .pricing-img {
        margin-top: -60px;
    }
    
    /* About */
    .about-intro {
        padding: 120px 0px 80px;
    }
}
@media only screen and (max-width: 525px){
    .logo-klant {
        width: 200px;
        border: none;
    }
}
@media only screen and (max-width: 479px){
    .home-who .flex-holder .flex-item h3 {
        font-size: 20px;
    }
    .home-who .flex-item .text-holder p {
        font-size: 14px;
        margin-bottom: 50px;
    }
    .home-who .flex-item .text-holder {
        height: 330px;
        padding: 50px 30px 30px;
        background-size: 270px;
    }
    .home-feature .feature {
        height: 270px;
    }
    .home-feature .feature img {
        width: 30px;
        margin: 0 10px 0 0;
    }
    .logo-klant {
        width: 140px;
        border: none;
    }
    .logo-klant img {
        width: 100px;
    }
    /* Features */
}