/*!
 * Start Bootstrap - New Age v5.0.1 (https://startbootstrap.com/template-overviews/new-age)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-new-age/blob/master/LICENSE)
 */

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Helvetica', 'Arial', 'sans-serif';
}

a {
    color:blacks;
    -webkit-transition: all .35s;
    transition: all .35s;
}

a:hover,
a:focus {
    /*color: #326FC0;*/
    color: #2c3e50;
    text-decoration: none;
}

hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.1);
}

hr.light {
    border-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 200;
}

p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
}

section {
    padding: 50px 0px 100px 0px;
}

section h2 {
    font-size: 50px;
}

/* --------------------------------------------------------------------------------------- */
/* HEADER                                                                                */
/* --------------------------------------------------------------------------------------- */

@media (min-width: 300px) {

    header.masthead {
        height: 140vh;
    }

    .header-text {
        padding-top: 110px;
    }

    .header-product {
        height: 100vh;
        padding: 10px 0px;
    }
}

@media (min-width:576px) {

    header.masthead {
        height: 140vh;
    }

    .header-text {
        height: 70vh;
        padding-top: 140px;
    }

    .header-product {
        height: 70vh;
    }
}

@media screen and (orientation:portrait) and (min-width:768px) {

    header.masthead {
        height: 100vh;
    }

    .header-text {
        height: 45vh;
        padding-top: 150px;
    }

    .header-product {
        height: 55vh;
        padding-top: 20px;
        padding-bottom: 10px;
    }
}

@media screen and (orientation:portrait) and (min-width:992px) {

    header.masthead {
        height: 70vh;
    }

    .header-text {
        height: 100vh;
        padding-top: 150px;
    }

    .header-product {
        height: 100vh;
        padding-top: 150px;
        padding-bottom: 10px;
    }
    
    .header-product-image>img {
        height: 100% !important;
        left: 20px;
    }
}

@media screen and (orientation:landscape) and (min-width: 992px) {

    header.masthead {
        height: 100vh;
    }

    .header-text {
        height: 100vh;
        padding-top: 140px;
    }

    .header-product {
        height: 100vh;
        padding-top: 140px;
    }
}





/* --------------------------------------------------------------------------------------- */
/* PROMOTE                                                                                  */
/* --------------------------------------------------------------------------------------- */

section.promote {
    background-color: #ecf0f1;
    padding: 0 0 !important;
}

section.promote .bgimage {
    width: 100%;
    height: 60vh;
    background: url("../../../assets/images/homepage/colorix_promote_assembly.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (min-width: 300px) {
    section.promote .bgimage h2 {
        font-size: 35px;
        padding: 20px !important;
        color: white;
        text-shadow: 1px 0px 0px #333;
    }
}

@media (min-width: 576px) {

    section.promote .bgimage h2 {
        font-size: 35px;
        padding: 50px !important;
        color: white;
        text-shadow: 1px 0px 0px #333;
    }
}

/* --------------------------------------------------------------------------------------- */
/* SIMPLE CARD                                                                             */
/* --------------------------------------------------------------------------------------- */

.simple-card {
    background-color: #ecf0f1;
    padding-bottom: 50px;
}

.simple-card img {
    width: 100%;
}

.simple-card .items {
    padding-top: 50px;
}

.simple-card .item {
    padding: 10px;
}

.simple-card .item-select {
    height: 100%;
    border: 1px solid #e1e1e1;
    /* -webkit-box-shadow: 0px 0px 30px -10px rgba(169, 174, 178, 1);
    -moz-box-shadow: 0px 0px 30px -10px rgba(169, 174, 178, 1);
    box-shadow: 0px 0px 30px -10px rgba(169, 174, 178, 1); */
}


.simple-card .item-select:focus,
.simple-card .item-select:hover {
    border: 1px solid #919191;
    /* -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1); */
}

.simple-card .inner-item {
    background-color: white;
    padding: 10px;
    height: 100%;
}

.simple-card p {
    margin-bottom: 0px;
}

.simple-card .item-title {
    padding-top: 15px;
    font-weight: 300;
    font-size: 22px;
    margin-bottom: 0rem;
}

.simple-card .item-excerpt {
    margin-bottom: 0rem;
    font-size: 17px;
    font-weight: 200;
}

.simple-card a,
.simple-card a:hover {
    color: black;
}

/* --------------------------------------------------------------------------------------- */
/* MARKETS                                                                                  */
/* --------------------------------------------------------------------------------------- */

section.markets {
    background-color: #ecf0f1;
}
section.markets img {
    width: 100%;
}

section.markets .items {
    padding-top:50px;
}

section.markets .item {
    padding:10px;
}

section.markets .inner-item {
    background-color: white;
    padding: 10px;
}

section.markets .item-title {
    padding-top : 15px;
}

section.markets a,
section.markets a:hover {
    color: black;
}

/* ------------------------------------------------ */
/* YOUTUBE                                          */
/* ------------------------------------------------ */

.auto-resizable-iframe {
    max-width: 960;
    margin: 0px auto;
}

.auto-resizable-iframe>div {
    position: relative;
    padding-bottom: 56%;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------------------- */
/* CLIENTS                                                                                  */
/* --------------------------------------------------------------------------------------- */


section.clients img {
    width: 100%;
    padding:10px;
}

section.awards img {
    width: 100%;
    padding: 10px;
}

@media (min-width: 300px) {
    section.awards {
        padding-top: 0px !important;
        padding-bottom: 50px !important;
    }

    section.awards p {
        font-size: 12px;
    }
}

@media (min-width: 500px) {
    section.awards {
        padding-top: 0px !important;
        padding-bottom: 50px !important;
    }

        section.awards p {
            font-size: 15px;
        }
}

@media (min-width:768px) {
    section.awards {
        padding-top: 0px !important;
        padding-bottom: 50px !important;
    }
}

@media (min-width:900px) {
    section.awards {
        padding-top: 0px !important;
        padding-bottom: 100px !important;
    }
}


/* --------------------------------------------------------------------------------------- */
/* BUTTON                                                                                  */
/* --------------------------------------------------------------------------------------- */

.bg-primary {
    background: #fdcc52;
    background: -webkit-gradient(linear, left top, left bottom, from(#fdcc52), to(#fdc539));
    background: linear-gradient(#fdcc52, #fdc539);
}

.text-primary {
    color: #fdcc52;
}

.no-gutter>[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.color-white {
    color: black;
    background-color: white;
    border-color: white;
}

.color-blue {
    color:#49A0C5;
    border-color: #49A0C5;
}

.btn-float-left {
    /*position: absolute;*/
    left: 0;
    bottom: 0;
    /*margin-left: 20px;*/
}

.btn-outline { 
    border: 1px solid;
}

.btn-outline-white,
.btn-outline-white:focus,
.btn-outline-white:active,
.btn-outline-white.active {
    background-color: white;
    border-color:white;
    color:black;
}
.btn-outline-white:hover {
    background-color: white;
    border-color: black;
    color:black;
}

.btn-outline-blue:hover,
.btn-outline-blue:focus,
.btn-outline-blue:active,
.btn-outline-blue.active {
    background-color: #49A0C5;
    border-color: #49A0C5;
    color: white;
}

.btn {
    /*border-radius: 300px;*/
    font-family: 'Helvetica', 'Arial', 'sans-serif';
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 15px 45px;
}

/* --------------------------------------------------------------------------------------- */
/* FOOTER                                                                                  */
/* --------------------------------------------------------------------------------------- */

footer {
    margin-top: 4em;
    padding: 25px 0;
    color: white;
    background-color: black;
}

@media (min-width: 300px) {
    footer .image-container {
        margin-top: -120px;
        overflow: hidden;
        max-width: 100%;
    }

    footer .image-container>object {
        width: 250%;
        position: relative;
        transform: translateX(-30%);
    }
}

@media (min-width: 500px) {
    footer .image-container>object {
        width: 170%;
        position: relative;
        transform: translateX(-30%);
    }

    footer .image-container {
        margin-top: -130px;
    }
}

@media (min-width:768px) {

    footer .image-container>object {
        width: 140%;
        position: relative;
        transform: translateX(-20%);
    }

    footer .image-container {
        margin-top: -150px;
    }
}

@media (min-width:900px) {

    footer .image-container>object {
        width: 120%;
        position: relative;
        transform: translateX(-15%);
    }

    footer .image-container {
        margin-top: -150px;
    }
}

@media (min-width:1200px) {

    .container {
        max-width: 1140px;
    }

    footer .image-container {
        margin-top: -200px;
    }
}

footer p {
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

footer a {
    color: white;
    line-height: 2;
    font-size: 14px;
}

footer ul {
    margin-bottom: 0;
}

footer ul li a {
    font-size: 12px;
    color: white
}

footer ul li a:hover,
footer ul li a:focus,
footer ul li a:active,
footer ul li a.active {
    text-decoration: none;
}