body, div {font-family: 'Open Sans', sans-serif; box-sizing: border-box}
body {
    margin: 0px; padding: 0px;
    background-color: #BCBCBC;
}
img {display: block; border: 0px;}
div {position: relative; overflow: visible}
a {}
#body-area {text-align: center}

#logo-area {width: 100%; height: 134px; background: #FFF; text-align: center}
#logo-area > .content {max-width: 1000px; height: 100%; margin: auto}
#menu-area {width: 100%; min-height: 40px; background: #2AACC7; text-align: center}
#menu-area > .content {max-width: 1000px; height: 100%; margin: auto; text-align: right}
#content-area {width: 100%; min-height: 568px; text-align: center; background-color: #EEECEC}
#content-area > .content {max-width: 1000px; height: 100%; text-align: left; margin: auto}
#bottom-menu-area {width: 100%; min-height: 96px; text-align: center; background: #2AACC7}
#bottom-menu-area > .content {max-width: 1000px; height: 100%; margin: auto}
#footer-area {width: 100%; min-height: 186px; text-align: center}
#footer-area > .content {max-width: 1000px; height: 100%; text-align: left; margin: auto; padding-top: 45px}

.abs {position: absolute;}
.click {cursor: pointer}
.m {display: none}
.mr20 {margin-right: 20px}

#logo-area .logo {width: 256px; height: 79px; top: 27.61%; left: 0px}
#logo-area .tagline {width: 311px; height: 15px; top: 54.47%; right: 0px}
#logo-area .menu {width: 7.81%; height: auto; top: 30%; right: 4.69%;}

#bottom-menu-area ul,
#menu-area ul {margin: 0px; padding: 0px}
#bottom-menu-area ul li,
#menu-area ul li {margin: 0px; padding: 0px; display: inline-block}
#menu-area ul li a {color: #FFF; text-decoration: none; font-size: 15px; line-height: 40px; font-weight: 600;
                    text-align: center; display: inline-block; padding: 0px 23px;}
#menu-area ul li a.selected,
#menu-area ul li a:hover {background: #1D91AA}
#menu-area ul li:last-child a {margin-right: -23px}

#bottom-menu-area ul li a {color: #FFF; text-decoration: none; text-transform: uppercase;
                        font-family: Arial; font-size: 15px; line-height: 96px; font-weight: bold;
                        text-align: center; display: inline-block; padding: 0px 47px 0px 46px; margin-left: 47px;
                        background-position: left center; background-repeat: no-repeat;}
#bottom-menu-area ul li a.a {background-image: url('../images/design/icon-pencil.png'); padding-left: 32px}
#bottom-menu-area ul li a.b {background-image: url('../images/design/icon-gear.png')}
#bottom-menu-area ul li a.c {background-image: url('../images/design/icon-airplane.png'); padding-left: 39px}
#bottom-menu-area ul li a:hover {text-decoration: underline}

#footer-area .content > div {display: inline-block; color: #707070; vertical-align: top}
#footer-area .content > div a {text-decoration: none; color: #707070}
#footer-area .content > div a:hover {text-decoration: underline}
#footer-area .content > div.a {width: 320px; font-size: 13px; line-height: 36px}
#footer-area .content > div.a .logo {font-size: 18px; font-weight: 300}
#footer-area .content > div.a .logo span {font-weight: 700}
#footer-area .content > div.a b,
#footer-area .content > div.a a {font-size: 15px; font-weight: 700;}
#footer-area .content > div.b {width: 350px}
#footer-area .content > div.b a {display: block; font-size: 14px; line-height: 36px}
#footer-area .content > div.c {width: 321px; text-align: right; font-family: Arial; font-size: 13px;}

/*home 81807F */
#content-area .arrow {position: absolute; top: 50%; font-size: 30px; color: #FFFFFF; z-index: 10; font-family: Verdana; cursor: pointer}
#content-area .arrow.right {right: 25px}
#content-area .slides {width: 100%; min-height: 568px; position: absolute; top: 0px; left: 0px; z-index: 1}
#content-area .slides div {width: 100%; min-height: 568px; background-position: center top; background-size: cover;
                           position: absolute; top: 0px; left: 0px;}
#content-area .shadow {display: none}

#content-area .slides div.a {background-image: url('../images/slider/slide1.jpg'); display: none}
#content-area .slides div.b {background-image: url('../images/slider/slide2.jpg'); display: none}
#content-area .slides div.c {background-image: url('../images/slider/slide3.jpg'); display: none}

#content-area .slide-copy {width: 100%; min-height: 568px; display: block; overflow: hidden; z-index: 2}
#content-area .slide-copy > div {width: 90%; position: absolute; bottom: 0px; left: 100%;
                                 font-size: 18px; line-height: 27px; color: #FFF; z-index: 2}
#content-area .slide-copy > div h2 {font-size: 50px; line-height: 52px; color: #2AACC7; margin: 0px 0px 8px 0px; font-weight: 300}
#content-area .slide-copy > div a {display: block; font-size: 16px; line-height: 20px; color: #2AACC7; text-transform: uppercase;
                                   margin: 20px 0px 50px 0px; text-decoration: none}
#content-area .slide-copy .dots {position: absolute; bottom: 52px; right: 0px; font-size: 52px; color: #919191}
#content-area .slide-copy .dots > span {display: inline-block; margin-left: 10px; cursor: pointer}
#content-area .slide-copy .dots > span.it {color: #FFF}

/*internal*/
#content-area .indent {padding: 52px 40px 52px 59px; background-color: #EEECEC;}
#content-area .indent75 {width: 75%}
#content-area h1 {color: #2AACC8; font-weight: 300; font-size: 42px; line-height: 44px; margin: 0px; margin-bottom: 28px}
#content-area .content h2 {color: #000; font-weight: 300; font-size: 30px; line-height: 32px; margin: 0px; margin-bottom: 15px}
#content-area .col-2 {width: 49.5%; display: inline-block; padding-right: 11.36%;
                      font-size: 18px; line-height: 30px; vertical-align: top;}
#content-area .col-2 > i {font-size: 15px; color: rgb(131, 127, 127)}
#content-area .col-2 > ul {margin: 0px; padding: 0px; margin-top: 15px}
#content-area .col-2 ul li {font-size: 17px; line-height: 17px; font-weight: bold; color: #000; display: inline-block;
                            padding: 6px 0px 0px 37px; margin-bottom: 17px; position: relative; box-sizing: border-box;
                            font-family: Arial; background-position: center left; background-repeat: no-repeat}
#content-area .col-2 > ul > li:hover {color: #2AACC7}
#content-area .col-2 ul li ul {position: absolute; top: 0px; left: 109%; width: 235px; display: none; z-index: 2}
#content-area .col-2 ul li:hover ul {display: block}
#content-area .col-2 ul li ul li {margin: 0px; padding: 9px 14px 7px 14px; background: #2AACC7; display: inline-block;
                                  font-size: 16px; line-height: 16px; font-family: 'Open Sans', sans-serif; width: 100%;
                                  font-weight: normal; box-sizing: border-box; color: #FFF;
                                  border-bottom: 1px solid #EEECEC;}

#content-area .col-2 ul li.d ul {left: 75%}
#content-area .col-2 ul li.e ul {top: -100px}
#content-area .col-2 ul li.f ul {left: 85%; top: -122px}

#content-area .col-2 ul li.a {background-image: url('../images/design/icon-building.png')}
#content-area .col-2 ul li.b {background-image: url('../images/design/icon-hammer.png')}
#content-area .col-2 ul li.c {background-image: url('../images/design/icon-briefcase.png')}
#content-area .col-2 ul li.d {background-image: url('../images/design/icon-chart.png')}
#content-area .col-2 ul li.e {background-image: url('../images/design/icon-legal.png')}
#content-area .col-2 ul li.f {background-image: url('../images/design/icon-letter.png')}
#content-area .col-2 ul li.a:hover {background-image: url('../images/design/icon-building-blue.png')}
#content-area .col-2 ul li.b:hover {background-image: url('../images/design/icon-hammer-blue.png')}
#content-area .col-2 ul li.c:hover {background-image: url('../images/design/icon-briefcase-blue.png')}
#content-area .col-2 ul li.d:hover {background-image: url('../images/design/icon-chart-blue.png')}
#content-area .col-2 ul li.e:hover {background-image: url('../images/design/icon-legal-blue.png')}
#content-area .col-2 ul li.f:hover {background-image: url('../images/design/icon-letter-blue.png')}
#content-area .col-2 ul li.g {background-image: url('../images/design/icon-key.png')}
#content-area .col-2 ul li.h {background-image: url('../images/design/icon-bars.png')}
#content-area .col-2 ul li.i {background-image: url('../images/design/icon-clipboard.png')}
#content-area .col-2 ul li.j {background-image: url('../images/design/icon-chat.png')}
#content-area .col-2 ul li.k {background-image: url('../images/design/icon-medic.png')}
#content-area .col-2 ul li.g:hover {background-image: url('../images/design/icon-key-blue.png')}
#content-area .col-2 ul li.h:hover {background-image: url('../images/design/icon-bars-blue.png')}
#content-area .col-2 ul li.i:hover {background-image: url('../images/design/icon-clipboard-blue.png')}
#content-area .col-2 ul li.j:hover {background-image: url('../images/design/icon-chat-blue.png')}
#content-area .col-2 ul li.k:hover {background-image: url('../images/design/icon-medic-blue.png')}

#content-area .col-2 ul li.h ul {left: 95%}
#content-area .col-2 ul li.j ul {left: 65%; top: -50px}
#content-area .col-2 ul li.k ul {left: 65%; top: -150px}

#content-area .col-5 {width: 19.5%; min-width: 159px; display: inline-block; padding-right: 20px; padding-top: 134px;
                      font-size: 18px; line-height: 20px; vertical-align: top; color: #231F20}
#content-area .col-5 img {position: absolute; left: 0px; top: 0px;}
#content-area .col-5 img.down {position: relative; top: 0px; left: 0px; margin-top: 25px; margin-bottom: 25px}
#content-area .col-3 {width: 27%}
#content-area .col-3x2 {width: 58.5%}

#content-area .process > div {opacity: 0}

#content-area .indent20 {margin-left: 20px}
#content-area .noright {padding-right: 0px}
#content-area .hidden {display: none}
#content-area .right {text-align: right}
#content-area .fright {float: right}
#content-area .fleft {float: left}
#content-area .button {display: inline-block; font: 600 15px/14px 'Open Sans'; padding: 12px 26px; background: #2AACC7;
                                   text-decoration: none; color: #FFF; margin-top: 25px; text-transform: uppercase}

/*case studies*/
.case-studies-area {width: 100%;  background: #FFF;}
.case-studies {max-width: 1000px; height: 100%; text-align: left; margin: auto; padding: 0px 40px 40px 59px}
.case-studies .case-study {position: relative; padding: 50px 0px; border-bottom: 2px solid #BCBCBC}
.case-studies .case-study.last {border-bottom: none}
.case-studies .case-study > a, 
.case-studies .case-study > div {display: inline-block; width: 59%; vertical-align: top; font-size: 16px; line-height: 25px; overflow: visible; box-sizing: border-box}
.case-studies .case-study .block {width: 322px; min-height: 132px; background: #D4E7EB; margin-right: 35px;
                                  padding: 23px 25px; color: #000; font: 700 16px/18px 'Open Sans'; }
.case-studies .case-study .block span {display: inline-block; width: 83px; color: #2AACC7; margin: 0px 20px 15px 0px; vertical-align: top; text-align: right}
.case-studies .case-study .block div {display: inline-block; width: 164px; vertical-align: top; margin-bottom: 20px}
.case-studies .case-study .block span img {display: inline-block; margin-right: 10px; vertical-align: middle}
.case-studies .case-study a {text-decoration: none}
.case-studies .case-study > div a {display: inline-block; font: 600 15px/14px 'Open Sans'; padding: 12px 26px; background: #2AACC7;
                                   color: #FFF; margin-top: 25px;}

.case-studies-top-area {width: 100%;  background: #D4E7EB;}
.case-study-top {max-width: 1000px; height: 100%; text-align: left; margin: auto; padding: 42px 40px 17px 65px;
                 font-size: 20px; line-height: 23px; font-weight: 700}
.case-study-top span {display: inline-block; width: 114px; color: #2AACC7; margin: 0px 25px 25px 0px; vertical-align: top; text-align: right}
.case-study-top span img {display: inline-block; margin-right: 12px; vertical-align: middle}

.case-studies.single .case-study {border-bottom: 0px}
.case-studies.single .case-study > div {margin-left: 45px; width: auto}
.case-studies.single .case-study h2 {font-size: 24px; line-height: 25px; color: #2AACC7; margin: 30px 0px 16px -42px; font-weight: normal;
                                     background-image: url('../images/design/icon-checkbox.png'); background-repeat: no-repeat;
                                     background-position: center left; padding-left: 42px;}
.case-studies.single .case-study ul {padding-left: 0px}
.case-studies.single .case-study ul li {margin-bottom: 18px}
.case-studies.single .case-study .centered {width: 100%; text-align: center; margin-top: 40px}
.case-studies.single .case-study .centered a {display: inline-block; padding: 12px; margin: 0px 20px 0px auto}

.form-area input, .form-area select {height: 35px; border: 0px;}
.form-area a {color: #000; text-decoration: none}

.privacy a {font-weight: bold; color: #000; text-decoration: underline}
#content-area .content .privacy {font-size: 17px; line-height: 21px}
#content-area .content .privacy h2 {font-size: 23px; margin-top: 17px; margin-bottom: 8px; line-height: 21px; color: #2AACC7;}

/* contact */
.w210 {width: 210px}
.w290 {width: 290px}
.w525 {width: 525px}
#submitBtn {vertical-align: bottom; float: right}


@media only screen and (max-width: 999px) {
    #logo-area > .content {max-width: 95%;}
    #menu-area > .content {max-width: 95%;}
    #content-area > .content {max-width: 95%;}
    #footer-area > .content {max-width: 95%;}
    .case-studies .case-study .block {margin-bottom: 15px; min-width: 337px}
    .case-studies .case-study > div {width: 100%}
}

@media only screen and (max-width: 800px) {
    .d {display: none !important}
    .m {display: block}
    #menu-area ul li,
    #bottom-menu-area ul li {width: 100%; display: block;}
    #footer-area .content > div.c {text-align: left; margin: 30px 0px}
    #content-area .shadow {display: block; width: 100%; height: 100%; background: #000; z-index: 1;
                           position: absolute; top: 0px; left: 0px; opacity: 0.6; display: none}
    #content-area .arrow {display: none}
    #bottom-menu-area ul li a {line-height: 60px}
    #content-area .col-2 ul li:hover ul {display: none}
    #content-area .col-2 ul li ul {margin-top: 10px}
    #content-area h1 {font-size: 28px; line-height: 30px}
    #content-area .indent75 {width: 100%}
}

@media only screen and (max-width: 640px) {
    .mr20 {margin-right: 0px}
    #logo-area {height: 80px}
    #logo-area .logo {width: 40%; height: auto}
    #menu-area {display: none}
    #menu-area ul li a {width: 100%; box-sizing: border-box; display: block}
    #content-area .slide-copy > div {font-size: 14px; line-height: 23px; width: 100%; color: #000; top: 40%; bottom: auto;}
    #content-area .slide-copy > div a {margin: 15px 0px 15px 0px}
    #content-area .content h2 br {display: none}
    #content-area .slide-copy > div h2 {font-size: 30px; line-height: 32px}
    #content-area .slide-copy .dots {display: none}
    #content-area .col-2 {width: 100%}
    #content-area .col-2 ul li.h ul,
    #content-area .col-2 ul li.j ul,
    #content-area .col-2 ul li.k ul,
    #content-area .col-2 ul li ul {position: relative; top: auto !important; left: auto!important;}
    #content-area .col-2 ul li,
    #content-area .col-2 ul li.a {background-position-y: 1px !important}
    .case-study-top {padding: 20px 15px 15px 15px; font-size: 16px; line-height: 19px}
    .case-study-top span {margin-bottom: 15px; float: left}
    #content-area .col-3 {width: 100%}
    #content-area .fleft {float: none; margin-bottom: 15px}
    .form-area input, .form-area select {max-width: 90%}
    #content-area .col-5 {width: 100%; padding: 0px;}
    #content-area .col-5 img {position: relative; top:auto; left: auto; margin: 15px auto;}
    .case-studies .case-study {padding: 0px; margin-bottom: 25px}
    .case-studies .case-study > div a {margin-bottom: 25px}
    .w210 {width: 100%}
    .w290 {width: 100%}
    .w525 {width: 100%}
    #content-area a#submitBtn {margin-top: -15px; float: none}
    .case-studies .case-study .block {margin-bottom: 15px; width: 100%; min-width: 100%; padding: 15px 10px}
    .case-studies .case-study .block span {margin-right: 10px;}
}
@media only screen and (max-width: 460px) {
    #content-area .indent {padding: 25px 10px 25px 10px; background-color: #EEECEC;}
    .case-studies {padding: 10px}
}