/*
 *
 *  * 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.
 *
 */

/*
 * In het bestand Design.css staat de CSS code verwerkt die het design van de website omvat.
 * Los hiervan zijn de layout (waar alles op de website staat) en Text (lettergrootte etc). Denk bij Design dus aan de kleuren en maten van vakken.
*/

/*========================================================================
=       Setting navbar properties that differ from default correctly     =
==========================================================================*/

.nav {
    height: 99px;
}

.navbar-right > li {
    padding-top: 20px;
}

.navbar-left {
    padding-top: 20px;
}

.brand {
    width: auto;
    height: 50px;
    margin-top: 25px;
    margin-left: 60px;
}

.navbar-brand {
    padding: 0;
}

/*=======================================================================
=       Customizing bootstrap default buttons to have proper design     =
=========================================================================*/

.btn-success {
    width: 266px;
    height: 58px;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, #a1d029, #88c32c);
    box-shadow: 0 1px 2px 0 rgba(66, 103, 45, 0.31);
    padding-top: 17px;
}

.btn-info {
    width: 174px;
    height: 58px;
    background: transparent;
    border-radius: 3px;
    border-color: #ffffff;
    padding-top: 18px;
}

.btn-chevron {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #4F9BE0;
    background-color: #ffffff;
    -webkit-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
}

.btn-primary {
    width: 266px;
    height: 58px;
    border-radius: 5px;
    background-image: linear-gradient(to bottom, #a1d029 0%, #88c32c 100%);
    -webkit-box-shadow: 0 9px 25px -5px rgba(99, 99, 99, 0.58);
    -moz-box-shadow: 0 9px 25px -5px rgba(99, 99, 99, 0.58);
    box-shadow: 0 4px 25px -5px rgba(99, 99, 99, 0.58);
    border: none;

}

#chevronButton {
    outline: none;
}

/* Gradient line that splits benefits and features */
.line {
    width: 100%;
    border: 1px solid;
    -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;
}

/*==================================================================================
=       Styling the dropdown menus so they look like fly-outs for each feature     =
====================================================================================*/

.dropdown-menu {
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0;
    padding: 0;
    left: inherit;
    min-width: inherit;
    font-size: inherit;
    text-align: inherit;
}

.dropdown-menu > li > a {
    display: flex;
    white-space: normal;
}

.multi-level {
    display: flex;
    top: 0;
    height: 91px;
}

.featureImage {
    height: 70px;
    width: auto;
}

.dropdown-submenu > .dropdown-menu {
    margin-top: 0;
    right: 0;
    width: 350px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: flex;
}

.dropdown-pill {
    -webkit-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.16);
    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.16);
    border-radius: 3px 3px 0 3px;
}

.dropdown-item {
    -webkit-box-shadow: 1px 10px 10px 4px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 1px 10px 10px 4px rgba(0, 0, 0, 0.16);
    box-shadow: 1px 10px 10px 4px rgba(0, 0, 0, 0.16);
    border-radius: 0 0 3px 3px;
}

/*=======================================
=       Styling the client carousel     =
=========================================*/

/* Declare heights because of positioning of img element */
.carousel-inner {
    z-index: 22;
    position: relative;

    box-shadow: 0 10px 45px 0 rgba(94, 106, 135, 0.38);
    width: 770px;
    height: 330px;
    border-radius: 5px;
    background-color: #ffffff;
}

.carousel-inner > .item > img {
    z-index: 23;
    position: relative;
    left: 35px;
    top: 10px;

    box-shadow: 0 5px 15px 0 rgba(94, 106, 135, 0.60);
    border-radius: 4px;
    width: 63px;
    height: 63px
}

.carouselControl {
    opacity: 0.35;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #9ca2b2;
    color: #757c8f;
}

.glyphicon-menu-left, .glyphicon-menu-right {
    font-size: 2em;
    top: 10px;
}

/*=======================================
=       Styling the contact form        =
=========================================*/

.form-control {
    width: 100%;
    height: 48px;
    padding-left: 24px;
}

#radioPhone > .radioText > span {
    margin-left: 24px
}

input[type=radio] {
    display: none
}

input[type=radio] + label span {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url("../assets/img/radioButtons.png") left top no-repeat;
    cursor: pointer;
}

input[type=radio]:checked + label span {
    background: url("../assets/img/radioButtons.png") -18px top no-repeat;
}

input[type=radio]#radioPhone + label span {
    margin-left: 24px;
}