﻿:root {
    --primary-color: #0CB4CE;
}

/* menu */
#mainNav.navbar-shrink {
    background-color: #2A2A2A;
}

    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link, #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
        color: white;
    }

.no-shrink {
    background-color: #2A2A2A !important;
}

#logo {
    width: 200px;
    float: left;
}

#logo-text {
    margin-left: 40px;
    margin-top: 5px;
}

    #logo-text .logo-text-title {
        display: block;
        font-family: 'Montserrat',sans-serif;
        /*color: white;*/
    }

    #logo-text .logo-text-subtitle {
        font-weight: normal;
        text-transform: none;
        font-family: 'Montserrat',sans-serif;
    }

@media (min-width: 992px) {
    #mainNav.navbar-shrink .navbar-brand .logo-text-title, #mainNav.navbar-shrink .navbar-brand .logo-text-subtitle {
        color: white;
    }

    #mainNav .navbar-brand {
        color: white;
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        transition: all 0s;
    }
}

/* ************************ */

/* header */
header {
    background-color: #1b1e21;
    opacity: 0.8;
}

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

header h1 {
    font-family: 'Montserrat',sans-serif !important;
    /*text-transform: uppercase;*/
    font-size: 90px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: +.05em;
}

header h2 {
    font-size: 30px !important;
}

/* *************************** */

/* content */
section {
    padding: 60px 0 !important;
}

    section .content {
        min-height: 500px;
        padding: 30px 0;
    }

hr {
    background-color: var(--primary-color);
}

/* texty */
.section-heading {
    font-size: 40px;
    font-family: 'Montserrat',sans-serif;
    font-weight: 700;
    line-height: 1;
    /*letter-spacing: -.05em;*/
}

.lead {
    color: #888;
    font-family: 'Hind', sans-serif;
}

#section-why-buy {
    margin-top: 50px;
}

    #section-why-buy .why-buy {
        margin-bottom: 40px;
    }

        #section-why-buy .why-buy .headline {
            font-size: 20px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            line-height: 1;
        }

        #section-why-buy .why-buy p {
            font-family: 'Hind', sans-serif;
            line-height: 1.75;
            font-weight: 300;
            color: #888;
        }

        #section-why-buy .why-buy .icon {
            font-size: 70px;
            color: var(--primary-color);
        }

.content .section-heading {
    margin-top: 30px;
}

/* products */
#list-products .product-wrap {
    text-align: center;
    border: solid 1px lightgrey;
    padding: 15px;
    margin-bottom: 10px;
    min-height: 550px;
}

    #list-products .product-wrap .preview {
        margin-bottom: 15px;
    }

    #list-products .product-wrap .headline {
        display: block;
        text-align: left;
        text-decoration: none;
        font-size: 22px;
    }

    #list-products .product-wrap p {
        text-align: left;
    }

/* forms */
.req {
    color: red;
    font-weight: bold;
}

/* Reactions */
#reactions {
    min-height: 400px;
    background-image: url("../images/backgrounds/backgroud-reactions.jpg");
}

    #reactions #cats-love .section-heading {
        font-size: 45px;
    }

    #reactions #cats-love span {
        font-weight: 100;
    }

.parallax {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer {
    background-color: #2A2A2A;
    color: white;
    min-height: 300px;
    padding: 60px 60px 0px 60px;
}

    footer p {
        color: #888;
    }

    footer .row:first-child {
        min-height: 250px;
    }

    footer #copy {
        font-size: 14px;
        color: #888;
    }

    footer .icon {
        font-size: 30px;
        color: var(--primary-color);
        display: inline-block;
        margin-right: 15px;
    }

    footer .contact-value {
        font-size: 20px;
        text-align: left;
    }

    footer #logo-footer {
        width: 200px;
        margin-bottom: 15px;
    }
