﻿.bannerBG {
    overflow: hidden;
    background-image: url("../Images/Banner_BG_Shadow.jpg");
    width: 100%;
    height: 480px;
    background-repeat: repeat-x;
}

.mainBG {
    overflow: hidden;
    background-image: url("../Images/Background.jpg");
    width: 100%;
    height: 796px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}


.mainTitle {
  color: #000;
  font-size: 44px;
  margin-top: 160px;
  width: 58%;
  margin-left: 43%;
}


.mainWrapperTop {
    margin-top: 60px;
}

.mainPoints {
    background: url("../Images/Main_Point_Icons.png") no-repeat center;
    width: 114px;
    height: 114px;
    margin: auto;
}

.mainPoints.marketing {
    background-position: 0px 0px;
}

.mainPoints.creative {
    background-position: 0px -114px;
}

.mainPoints.technology {
    background-position: 0px -228px;
}

/*.mainWrapper > div:hover .marketing {
    background-position: 0px -342px;
}

.mainWrapper > div:hover .creative {
    background-position: 0px -456px;
}

.mainWrapper > div:hover .technology {
    background-position: 0px -570px;
}*/

.mainWrapper {
    /*cursor: pointer;*/
    margin: 55px 0px 100px 0px;
}

.mainWrapper > div:hover .mainPointLabel {
    color: #0165ba;
}

.mainPointLabel {
    color: #777;
    margin-top: 30px;
    transform: scale(1, 1.3);
    -webkit-transform: scale(1, 1.3);
}


.secondSection {
    background: url(../Images/BG_Pattern.jpg) repeat #f2f2f2;
}

.secondSection .secondSectionTop {
    margin: 60px 0px 50px 0px;
}

.secondSection .details .title {
    font-size: 20px;
    letter-spacing: 1px;
    color: #333;
}

.secondSection .details .subTitle {
    color: #555;
    font-size: 13px;
}

.secondSection .deviceImg {
    background: url(../Images/Computers.jpg) no-repeat center;
    width: 270px;
    margin: auto;
    margin-top: 20px;
}

.secondSection .tabletImg {
    background-position: 0px 0px;
    height: 216px;
}

.secondSection .laptopImg {
    background-position: 0px -216px;
    height: 163px;
    margin-bottom: 53px;
}

.secondSection .bottomBorder {
    border-bottom: solid 1px #c5c5c5;
}

.thirdSection .row:first-child {
    margin-bottom: 0px;
}

.thirdSection .row {
    margin: 30px 0px 30px 0px;
}

.thirdSection .row:last-child {
    margin-top: 0px;
}

.thirdSection .testimonialTitle {
    color: #333;
    font-size: 20px;
}

.thirdSection .testimonialText {
    color: #666;
    font-size: 16px;
}

.thirdSection .rightArrow {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #d9d9d9;
    cursor: pointer;
}

.thirdSection .rightArrow:hover {
    border-left-color: #b9b9b9;
}

.thirdSection .rightWhiteArrowSmall {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #fff;
    position: relative;
    top: -15px;
    left: -30px;
}
        
.thirdSection .readMore {
    color: #005d89;
    font-size: 16px;
}

.thirdSection .readMore:active,
.thirdSection .readMore:hover {
    color: #008ACB;
}

        
.round {
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    border-radius: 114px;
}

.round:hover {
    transform: rotate(-360deg) scale(1.1);
    -webkit-transform: rotate(-360deg) scale(1.1);
}

/*.round div.round {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    font-size: 1px;
    color: #fff;
}

.round div:hover {
    transform: rotate(-360deg) scale(1.2);
    -webkit-transform: rotate(-360deg) scale(1.2);
    background-color: rgba(53, 68, 87, 0.6);
    opacity: .85;
    font-size: 11px;
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
}*/


.bannerTitle {
    position: relative;
    margin-top: 165px;
    width: 100%;

    /*Fix the position for parallax plugin*/
    /*top: inherit !important;
    left: inherit !important;*/
}
.bannerTitle img {
    max-width: 475px;
    width: 100%;
}

.bannerCloudsGray {
    position: relative;
    margin-top: 377px;
    margin-left: 665px;
    width: 100%;
    /*Fix the position for parallax plugin*/
    top: inherit !important;
}
.bannerCloudsGray img {
    max-width: 519px;
    width: 100%;
}

.bannerCloudsWhite {
    position: relative;
    margin-top: 395px;
    margin-left: 696px;
    width: 100%;
    /*Fix the position for parallax plugin*/
    top: inherit !important;
}
.bannerCloudsWhite img {
    max-width: 358px;
    width: 100%;
}

.bannerCircles {
    position: relative;
    width: 100%;
    margin-top: 35px;
    margin-left: 500px;
}
.bannerCircles img {
    max-width: 670px;
    width: 100%;
}

.bannerLightBulb {
    position: relative;
    width: 100%;
    margin-top: 118px;
    margin-left: 718px;
}
.bannerLightBulb img {
    max-width: 256px;
    width: 100%;
}


div.myParallax {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    height: 480px;
}

.bannerBG .container {
    position: relative;
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
}


@media ( max-width: 767px ) {
    .mainWrapperTop { margin-top: 20px; }
    .mainWrapper { margin: 0px 0px 30px 0px; }
    .mainWrapper > div { margin-top: 30px; }
    .mainPointLabel { margin-top: 17px; }
    .secondSection .secondSectionTop { margin: 30px 0px 20px 0px; }
    .secondSection .details > div:last-child { margin-top: 60px; }
    .secondSection .deviceImg { margin-top: 0px; }
    .secondSection .laptopImg { margin-bottom: 15px; }
            
    .bannerBG { height: 480px; }
    div.myParallax { height: 480px; }
    .bannerCircles { margin-top: 100px; margin-left: auto;margin-right: auto; }
    .bannerCircles img { max-width: 536px; min-width: 536px; }
    .bannerTitle { margin-top: 15px; padding-left: 2%; padding-right: 2%; }
    .bannerTitle img { max-width: 400px; min-width: 290px; }
    .bannerCloudsGray { margin-top: 397px; margin-left: 137px; }
    .bannerCloudsGray img { max-width: 415px; min-width: 415px; }
    .bannerCloudsWhite { margin-top: 412px; margin-left: 160px; }
    .bannerCloudsWhite img { max-width: 286px; min-width: 286px; }
    .bannerLightBulb { margin-top: 167px; margin-left: 172px; }
    .bannerLightBulb img { max-width: 205px; min-width: 205px;  }
    .mainTitle { font-size: 26px; margin-top: 180px; width: 67%; margin-left: auto; margin-right: auto;text-align: center; }
}


@media (min-width: 768px) and (max-width: 991px) {
    .bannerBG {
        height: 380px;
    }

    div.myParallax {
        height: 380px;
    }

    .bannerCircles { margin-top: 30px; margin-left: 230px; }
    .bannerCircles img { max-width: 536px; }
    .bannerTitle { margin-top: 50px; }
    .bannerTitle img { max-width: 380px; }
    .bannerCloudsGray { margin-top: 297px; margin-left: 365px; }
    .bannerCloudsGray img { max-width: 415px; }
    .bannerCloudsWhite { margin-top: 312px; margin-left: 386px; }
    .bannerCloudsWhite img { max-width: 286px; }
    .bannerLightBulb { margin-top: 96px; margin-left: 402px; }
    .bannerLightBulb img { max-width: 205px; }
    .mainTitle { font-size: 35px; margin-top: 200px; width: 69%; margin-left: 30%; }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .bannerCircles { margin-left: 325px; }
    .bannerTitle { margin-top: 90px; }
    .bannerCloudsGray {  margin-left: 456px; }
    .bannerCloudsWhite { margin-left: 484px; }
    .bannerLightBulb { margin-left: 540px; }
    .mainTitle { width: 70%; margin-left: 30%; }
}