@charset "UTF-8";
/* CSS Document */
a {
    color: rgb(111, 194, 223);
}
/* **********desktop/tablet layout*********** */
@media (orientation: landscape) {
    .content-box {
        position: relative;
        top: -155px;
        height: 576px;
        width: 1024px;
    }
    .left-box {
        width: 400px;
        height: 100%;
    }
    .left-text-box {
        background: #f2f2f2;
        padding-left: 20px;
        padding-top: 60px;
        border-left-style: solid;
        border-left-width: 2px;
        border-left-color: rgb(111, 194, 223);
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-color: rgb(111, 194, 223);
        position: relative;
        top: 70px;
        height: 310px;
    }
    .left-text li {
        list-style: none;
        font-size: 22px;
        text-transform: uppercase;
        text-align: left;
        font-weight: 600;
        line-height: 44px;
    }
    .bottom-contact-info {
        position: relative;
        font-size: 20px;
        font-weight: 200;
        top: 90px;
        left: 10px;
        line-height: 1.3;
    }
    .bottom-contact-info {
        position: relative;
        font-size: 20px;
        font-weight: 200;
        top: 90px;
        left: 10px;
        line-height: 1.3;
    }
    #ctaArrow {
        padding-left: 20px;
        height: 45px;
        width: 45px;
        vertical-align: text-top;
        top: 0px;
    }
    .right-box {
        position: absolute;
        left: 400px;
        top: 0px;
        width: 620px;
        height: 565px;
        overflow: hidden;
    }
     .right-box img {
        position: relative;
        top: -60px;
        width: 620px;
    }
    #photoGraphic {
        width: 620px;
    }
  /*  .ddCarouselClass {
        position: relative;
        width: 1024px;
        height: 574px;
        left: 0px;
        top: 0px;
        text-align: center;
    }*/
    #callToAction {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: relative;
        top: -70px;
        background: #000000;
        height: 70px;
        width: 620px;
        color: #ffffff;
        font-size: 30px;
        line-height: 60px;
        cursor: pointer;
    }
    #carouselContainer {
        position: relative;
        height: 574px;
        width: 1024px;
        top: -735px;
        left: 0px;
        visibility: hidden;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    #carouselPrev, #carouselNext {
        position: absolute;
        width: 60px;
        height: 60px;
        background: transparent;
        opacity: .5;
        top: 260px;
        border: 0;
        outline: none;
        cursor: pointer;
        transition: opacity 0.15s ease;
    }
    #carouselPrev:focus, #carouselPrev:hover, #carouselNext:focus, #carouselNext:hover {
        opacity: .9;
        outline-style: none;
    }
    #carouselPrev {
        left: 10px;
        background-image: url("../images/carousel-prev.svg");
    }
    #carouselNext {
        left: 950px;
        background-image: url("../images/carousel-next.svg");
    }
    #closeCarousel {
        border: 0;
        border-radius: 100%;
        background-image: url("../images/carousel-close.svg");
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
        top: 10px;
        left: 985px;
        width: 30px;
        height: 30px;
        opacity: 0.5;
        transition: opacity 0.15s ease;
        z-index: 200;
        display: inline-block;
        outline: none;
        box-shadow: none;
    }
    #closeCarousel:hover, #closeCarousel:focus {
        background-color: rgba(0, 0, 0, 0);
        opacity: 0.9;
        outline: none;
        outline-style: none;
        box-shadow: none;
        cursor: pointer;
    }
}

/* **********mobile layout*********** */
@media (orientation: portrait) {
    .content-box {
        position: absolute;
        top: 260px;
        width: 400px;
    }
    .left-box {
        width: 400px;
    }
    .left-text-box {
        background: #f2f2f2;
        padding-left: 20px;
        padding-top: 30px;
        border-left-style: solid;
        border-left-width: 2px;
        border-left-color: rgb(111, 194, 223);
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-color: rgb(111, 194, 223);
        position: relative;
        top: 240px;
        height: 220px;
    }
    .left-text li {
        list-style: none;
        font-size: 20px;
        text-transform: uppercase;
        text-align: left;
        font-weight: 600;
        line-height: 50px;
    }
    .bottom-contact-info {
        position: relative;
        text-align: center;
        font-size: 26px;
        font-weight: 400;
        top: 270px;
        left: 10px;
        line-height: 1.3;
    }
      .bottom-contact-info {
        position: relative;
        text-align: center;
        font-size: 26px;
        font-weight: 400;
        top: 330px;
        left: 10px;
        line-height: 1.3;
    }
    .right-box {
        position: relative;
        top: -330px;
        width: 400px;
        height: 210px;
        overflow: hidden;
    }
    .right-box img {
        position: relative;
        top: -60px;
        width: 400px;
        height: 362px;
    }
    

  /*  .ddCarouselClass {
        position: relative;
        width: 400px;
        height: 224px;
        left: 0px;
        top: 0px;
        text-align: center;
        overflow: hidden;
    }*/
    #callToAction {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: relative;
        top: -220px;
        background: #000000;
        height: 60px;
        width: 400px;
        left: 0px;
        color: #ffffff;
        font-size: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    #ctaArrow {
        top: 0px;
        padding-left: 20px;
        height: 50px;
        width: 40px;
        vertical-align: text-top;
    }
    #carouselContainer {
        position: relative;
        height: 224px;
        width: 400px;
        top: 270px;
        left: 0px;
        visibility: hidden;
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #carouselPrev, #carouselNext {
        position: absolute;
        width: 60px;
        height: 60px;
        background: transparent;
        opacity: .7;
        top: 80px;
        border: 0;
        outline: none;
        cursor: pointer;
        transition: opacity 0.15s ease;
    }
    #carouselPrev:focus, #carouselPrev:hover, #carouselNext:focus, #carouselNext:hover {
        opacity: .9;
        outline-style: none;
    }
    #carouselPrev {
        left: 25px;
        background-image: url("../images/carousel-prev.svg");
    }
    #carouselNext {
        right: 25px;
        background-image: url("../images/carousel-next.svg");
    }
    #closeCarousel {
        position: absolute;
        background: transparent;
        border: 0;
        background-image: url("../images/carousel-close.svg");
        top: 6px;
        right: 20px;
        width: 30px;
        height: 30px;
        opacity: 0.7;
        transition: opacity 0.15s ease;
        cursor: pointer;
    }
    #closeCarousel:hover, #closeCarousel:focus {
        opacity: 0.9;
        outline-style: none;
    }
    .slick-dots {
        bottom: 5px;
    }
    .slick-dots li {
        height: 5px;
        width: 5px;
        margin: 0 8px;
    }
    .slick-dots li button {
        height: 5px;
        width: 5px;
        outline: none;
        line-height: 0px;
        font-size: 0px;
        padding: 5px;
    }
    .slick-dots li button:before {
        width: 5px;
        height: 5px;
    }
}