﻿@media (min-width: 1px) {
    .baby-blue {
        background-color: rgb(108, 203, 217);
    }

    .commonHeader {
        padding: calc(5.33vw);
        padding-top: calc(5.33vw);
        padding-left: 5.33%;
        padding-right: 5.33%;
    }

    .common-mobile-padding {
        padding: calc(5.33vw);
        padding-left: 5.33%;
        padding-right: 5.33%;
    }

    .common-mobile-padding-top {
        padding: 0;
        padding-top: 5.33%;
    }

    .commonLinkWrapper {
        text-align: right;
        margin-top: calc(5.33vw);
    }

    .commonNoMargin {
        margin: 0 !important;
    }

    .commonNoPadding {
        padding: 0 !important;
    }

    .commonNoTopPaddingHelper {
        padding-left: 5.33%;
        padding-right: 5.33%;
        padding-top: 0;
        padding-bottom: calc(5.33vw);
    }

    .commonBackgroundImage {
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .commonTextArea {
        padding: 0;
    }

    .commonTAGreyBox {
        padding: 0;
        background-color: grey;
    }

        .commonTAGreyBox > div {
            height: calc(48vw);
            background-color: grey;
        }

    .commonTAInfo {
        background-color: rgb(61,137,181);
        padding: calc(5.33vw);
        padding-left: 5.33%;
        padding-right: 5.33%;
    }

    .commonGraphicsArea {
    }

    .commonGraphicsDisplay {
        margin-top: calc(5.33vw);
        padding-left: 10%;
        padding-right: 10%;
    }

    .commonGraphicsDisplayCenter {
        margin-top: calc(5.33vw);
        padding-left: 10%;
        padding-right: 10%;
    }

    .cgdImageContainer {
        background-color: gray;
        height: calc(53.334vw);
        /*border-bottom: 1px solid rgb(221,121,43);*/
        /*padding-bottom: calc(5.33vw);*/
        /*padding-left: 15%;
        padding-right: 15%;*/
    }

        .cgdImageContainer > img {
            height: 100%;
            width: 100%;
            /*object-fit: contain;*/
        }

    /*.cgdParagraphContainer {
        text-align: center;
        padding-top: calc(4vw);
        margin-bottom: calc(4vw);
    }*/

    .cgdButton {
        height: calc(13.33vw);
    }

        .cgdButton > a {
            width: 100%;
            height: 100%;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

    .cgdButtonCenter {
        height: calc(13.33vw);
    }

        .cgdButtonCenter > a {
            width: 100%;
            height: 100%;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

    .carousel {
        height: 100%;
    }

    .carousel-control {
        background-image: none !important;
    }

    .carousel-indicators {
        bottom: 0;
    }

    .carousel-image-left {
        width: 25px;
        height: 50px;
        position: absolute;
        top: 45%;
        right: 50%;
    }

    .carousel-image-right {
        width: 25px;
        height: 50px;
        position: absolute;
        top: 45%;
        left: 50%;
    }
    /*Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb*/
    .carousel-fade .carousel-inner .item {
        opacity: 0;
        transition-property: opacity;
    }

    .carousel-fade .carousel-inner .active {
        opacity: 1;
    }

        .carousel-fade .carousel-inner .active.left,
        .carousel-fade .carousel-inner .active.right {
            left: 0;
            opacity: 0;
            z-index: 1;
        }

    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
        opacity: 1;
    }

    .carousel-fade .carousel-control {
        z-index: 2;
    }

    /*WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity*/
    @media all and (transform-3d), (-webkit-transform-3d) {
        .carousel-fade .carousel-inner > .item.next,
        .carousel-fade .carousel-inner > .item.active.right {
            opacity: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .carousel-fade .carousel-inner > .item.prev,
        .carousel-fade .carousel-inner > .item.active.left {
            opacity: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

            .carousel-fade .carousel-inner > .item.next.left,
            .carousel-fade .carousel-inner > .item.prev.right,
            .carousel-fade .carousel-inner > .item.active {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
    }

    .less-width {
        width: 20%;
    }
    /*#############################################################*/
    /* ROW ONE ###################################################
    ############################################################*/
    .rowOne {
        margin: 0;
    }

    .rowOneWithNotice {
        margin: 0;
    }

    .carousel-container {
        position: relative;
        height: calc(112vw);
    }

    /*#############################################################*/
    /* ROW TWO ###################################################
    ############################################################*/

    .rowTwo {
        background-color: rgb(108, 203, 217);
        padding-top: calc(5.33vw);
        padding-bottom: calc(5.33vw);
        padding-left: 5.33%;
        padding-right: 5.33%;
        /*height: calc(74.667vw);*/
        /*max-width: 1920px;*/
        margin: auto;
    }

    .emailSignUpLink{
        color: white;
    }

    .emailSignUpLink:hover {
        color: white;
    }

    /*#############################################################*/
    /* ROW FOUR ###################################################
    ############################################################*/

    .rowFour {
        background-color: gray;
        height: calc(30vw);
        /*max-width: 1920px;*/
        margin: auto;
        margin-top: calc(5.33vw);
    }

    /*#############################################################*/
    /* ROW FIVE ###################################################
    ############################################################*/

    .rowFive {
        margin-bottom: calc(5.33vw);
    }

    .r5Carousel {
        height: calc(135vw);
        background-color: rgb(108, 203, 217);
    }

    .carouselDiv {
        padding: 0;
    }

    .carouselQuoteContainer {
        margin-top: calc(1.5vw);
    }

    .carousel-indicators .active {
        background-color: rgb(249,161,49);
        border-color: rgb(249,161,49);
        width: 13px;
        height: 13px;
    }

    .carousel-picture li {
        background-color: rgb(108, 203, 217);
        border-color: rgb(108, 203, 217);
        width: 13px;
        height: 13px;
    }

    .carousel-quotes .active {
        background-color: rgb(249,161,49);
        border-color: rgb(249,161,49);
        width: 13px;
        height: 13px;
    }

    .carousel-quotes li {
        background-color: white;
        border-color: white;
        width: 13px;
        height: 13px;
    }
    /*#############################################################*/
    /* ROW SIX ###################################################
    ############################################################*/
    .rowSix {
        background-color: gray;
        height: calc(70vw);
        /*max-width: 1920px;*/
        margin: auto;
        /*margin-bottom: calc(5.33vw);*/
    }

    /*#############################################################*/
    /* ROW SEVEN ###################################################
    ############################################################*/

    .rowSeven {
        background-color: rgb(195, 228, 235); /*rgb(108,203,217);*/
        /*max-width: 1920px;*/
        margin: auto;
        /*margin-bottom: calc(5.33vw);*/
    }
}
