/*
 *
 *  * The MIT License
 *  *
 *  * Copyright 2016 CloudSeven.
 *  *
 *  * Permission is hereby granted, free of charge, to any person obtaining a copy
 *  * of this software and associated documentation files (the "Software"), to deal
 *  * in the Software without restriction, including without limitation the rights
 *  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *  * copies of the Software, and to permit persons to whom the Software is
 *  * furnished to do so, subject to the following conditions:
 *  *
 *  * The above copyright notice and this permission notice shall be included in
 *  * all copies or substantial portions of the Software.
 *  *
 *  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 *  * THE SOFTWARE.
 *
 */

/*
 * Het bestand layout.css heeft alle informatie over waar wat moet staan op de pagina.
*/

/***************************************************
*                  Main sections                   *
****************************************************/

#home {
    height: 100vh;
    padding-top: 50px;
    background: url("../assets/img/header.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#offers {
    height: 508px;
}

#benefits {
    height: 100%;
}

.benefits_1_3 {
    background-color: rgba(240, 247, 250, 1);
    height: 100%;
}

.benefits_2_4 {
    height: 100%;
}

.benefitCentering {
    padding-top: 10%;
}

#gradientLine {
    margin-bottom: 5%;
}

#features {
    height: 800px;
}

#customers {
    padding-top: 50px;
    height: 600px;
    background-color: #f9f9f9;
}

#demo {
    background-color: #ffffff;
    background-size: cover;
    padding-top: 50px;
}

#footer {
    height: 60px;
    background-color: #000000;
}

#footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}

#success {
    background-color: #f2f2f2;
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    display: flex;
}

/* Class to deactivate a link (example usage: dropdown boxes) */
.inactiveLink {
    pointer-events: none;
    cursor: default;
}

.finalSection {
    height: 100vh;
}

.sky {
    z-index: 21;
    position: relative;

    background-color: #e2f2fa;
    background-blend-mode: multiply;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carImage {
    z-index: 20;
    position: relative;

    height: 140vh;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, rgba(11, 9, 11, 1) 100%), url('../assets/img/car-image.png') no-repeat center;
    background-blend-mode: multiply;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: inset 9px 99px 101px -61px rgba(226, 242, 250, 1);
}

.carShade {
    z-index: 22;
    position: relative;
    bottom: 80px;

    height: 80px;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.5);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: 0 -30px 0 0 rgba(0, 0, 0, 0.2);
}

.footerShade {
    z-index: 23;
    position: relative;
    bottom: 80px;

    height: 250px;
    width: 100%;

    background: #010101 no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/***************************************************
*                  Layout on page                  *
****************************************************/

/*=============================================================================================
=          z-index to ensure the chevron button is correctly positioned on the page           =
===============================================================================================*/

#home, #offers {
    position: relative;
    z-index: 20;
}

.btn-chevron {
    position: absolute;
    z-index: 999;
    left: calc(100vw - 50%);
    top: calc(100vh - 30px);
}

.country-list {
    z-index: 30 !important;
}

/*===========================================
=          navigation menu layout           =
=============================================*/

#navMenu {
    z-index: 1000;
    margin-bottom: 0;
    position: fixed;
    background: white;
    left: 0;
    right: 0;
    top: 0;
}

#logo {
    width: auto;
    height: 30px;
}

.navbar-right a {
    -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
    color: #aaa;
    text-decoration: none;
}

#navMenu a:hover {
    color: #000;
}

.nav > li {
    margin-left: 15px;
}

#navMenu li.active a {
    border-bottom: 3px solid;
    color: #333333;
    background-color: transparent;
    -moz-border-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(178, 178, 178, 0.64) 32%, rgba(162, 162, 162, 1) 50%, rgba(146, 146, 146, 0.64) 68%, rgba(255, 255, 255, 0) 100%);
    -webkit-border-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(178, 178, 178, 0.64) 32%, rgba(162, 162, 162, 1) 50%, rgba(146, 146, 146, 0.64) 68%, rgba(255, 255, 255, 0) 100%);
    border-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(178, 178, 178, 0.64) 32%, rgba(162, 162, 162, 1) 50%, rgba(146, 146, 146, 0.64) 68%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
    border-image-slice: 1;
}

/*=================================================================================
=          sizing of sections and ensuring proper outlining of elements           =
===================================================================================*/

.horver-center-a {
    display: table;
}

.horver-center-b {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

.fullscreen, .horver-center-a {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fullscreen.overflow, .fullscreen.overflow .horver-center-a {
    height: auto;
    min-height: 100%;
}

/* Add a little margin below the header so the text is not too close to the icons*/
.horver-center-b h2 {
    margin-bottom: 30px;
    margin-top: 0;
}

/* Space out every row so the text is not too close to each next icon*/
.horver-center-b .row {
    margin-bottom: 20px;
}

/*==================================================================================
=          Adding margin to features so they are now as tightly together           =
====================================================================================*/

#features > .row.text-center {
    margin-bottom: 5%;
}

#features > .row.text-left {
    margin-bottom: 2%;
    height: 80px;
}

#features > .row.text-left > .extraMargin {
    margin-right: 0.5%;
}

/*========================================================================================
=     Ensure the dropdown menus are all properly aligned on various screen sizes         =
==========================================================================================*/
#features > .row.text-left > .col-lg-3:nth-child(1), #features > .row.text-left > .col-lg-3:nth-child(2), #features > .row.text-left > .col-lg-3:nth-child(3) {
    position: relative;
    z-index: 20;
}

#features > .row.text-left > .col-lg-3:nth-child(4), #features > .row.text-left > .col-lg-3:nth-child(5), #features > .row.text-left > .col-lg-3:nth-child(6) {
    margin-top: 6%;
    position: relative;
    z-index: 19;
}

#features > .row.text-left > .col-lg-3:nth-child(7), #features > .row.text-left > .col-lg-3:nth-child(8), #features > .row.text-left > .col-lg-3:nth-child(9) {
    margin-top: 6%;
    position: relative;
    z-index: 18;
}

#features > .row.text-left > .col-md-5 {
    margin-left: 5%;
}

/* z-index for medium desktops */
#features > .row.text-left > .col-md-5:nth-child(1), #features > .row.text-left > .col-md-5:nth-child(2) {
    position: relative;
    z-index: 20;
}

#features > .row.text-left > .col-md-5:nth-child(3), #features > .row.text-left > .col-md-5:nth-child(4) {
    position: relative;
    z-index: 19;
}

#features > .row.text-left > .col-md-5:nth-child(5), #features > .row.text-left > .col-md-5:nth-child(6) {
    position: relative;
    z-index: 18;
}

#features > .row.text-left > .col-md-5:nth-child(7), #features > .row.text-left > .col-md-5:nth-child(8) {
    position: relative;
    z-index: 17;
}

#features > .row.text-left > .col-md-5:nth-child(9) {
    position: relative;
    z-index: 16;
}

/* z-index on phones and tablets */
#features > .row.text-left > .col-sm-6:nth-child(1) {
    position: relative;
    z-index: 20;
}

#features > .row.text-left > .col-sm-6:nth-child(2) {
    position: relative;
    z-index: 19;
}

#features > .row.text-left > .col-sm-6:nth-child(3) {
    position: relative;
    z-index: 18;
}

#features > .row.text-left > .col-sm-6:nth-child(4) {
    position: relative;
    z-index: 17;
}

#features > .row.text-left > .col-sm-6:nth-child(5) {
    position: relative;
    z-index: 16;
}

#features > .row.text-left > .col-sm-6:nth-child(6) {
    position: relative;
    z-index: 15;
}

#features > .row.text-left > .col-sm-6:nth-child(7) {
    position: relative;
    z-index: 14;
}

#features > .row.text-left > .col-sm-6:nth-child(8) {
    position: relative;
    z-index: 13;
}

#features > .row.text-left > .col-sm-6:nth-child(9) {
    position: relative;
    z-index: 12;
}

#features > .row.text-left > .col-lg-3 > ul {
    width: 95%;
}

#features > .row.text-left > .col-lg-3 > ul > li {
    width: 100%;
}

/*==========================================================================
=          Ensuring the client carousel is all positioned correctly        =
============================================================================*/
/* Carousel base class */
.carousel {
    height: 500px;
    margin-bottom: 60px;
    margin-top: 100px;
}

#clientCarousel > .row > .col-lg-1 {
    padding-left: 50px;
    padding-top: calc(12.5% - 110px);
}

#clientCarousel > .row > .col-lg-2 {
    padding-top: calc(12.5% - 110px);
}

#clientCarousel > .row > .col-lg-offset-2 {
    margin-left: 23%;
}

.carouselControl {
    padding: 20px;
}

/*==========================================================================
=          Ensuring the contact form is all positioned correctly           =
============================================================================*/

.formNoPadding {
    padding: 0;
}

.formRow {
    margin-top: 1vh;
    margin-bottom: 2vh;
}

#phoneContact {
    display: none;
}

.formAlign {
    height: 68px;
    padding-top: 34px;
}

/*====================================================================
=          Ensuring the footer is all positioned correctly           =
======================================================================*/

footer > .container-fluid > .row {
    position: absolute;
    bottom: 0;
    margin-left: 0;
    margin-right: 0;
}