@charset "utf-8";
/* CSS Document */

body {background: #ffffff; font-family: 'CooperHewitt-Light'; font-size: 18px; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}

* {padding: 0; margin: 0;}

a, button, input[type="submit"], input[type="button"], .subNav > li span {
    text-decoration: none;
    cursor: pointer;
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    -o-transition:color 0.2s ease-in;
    -ms-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;
}

a.bigBtn, input[type="text"], textarea, input[type="submit"], .clientMore, .ctaFloater {
    -webkit-transition: background 0.2s linear;
    -moz-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    -ms-transition: background 0.2s linear;
    transition: background 0.2s linear;
}

a.bigBtn, .featArrow {

    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

a, a:focus, a img {outline: none; border: none;}
    a:hover {text-decoration: underline;}

/* GENERAL **********************************************/
section a {font-family: 'CooperHewitt-Medium'; color: #001fb0;}
    section a:hover {color: #a3d8fc;}
i {font-family: 'CooperHewitt-LightItalic'; font-style: normal;}
b {font-family: 'CooperHewitt-Medium'; font-weight: normal;}
li {list-style: none;}

.bigBtn {display: block; margin: 65px auto; text-align: center; font-family: 'CooperHewitt-Medium'; color: white; font-size: 18px; line-height: 55px; width: 265px; position: relative; z-index: 200;}
.redBtn {background-color: #001fb0;}
.blueBtn {background-color: #001fb0;}
    .redBtn:hover, .blueBtn:hover {opacity: .8; color: white;}

@media screen and (max-width: 500px){
    .bigBtn {width: 100%; border-radius: 0 !important; border: none;}
}

.rounded, .bigBtn, .imgCont, .imgCont img, .contactList input[type="submit"] {-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

.blackBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/black_trans_bg.png); z-index: 1;}
.clear {width: 100%; height: 0; clear: both;}
/* END GENERAL **********************************************/


/* GENERAL **********************************************/
@font-face {
    font-family: 'CooperHewitt-Light';
    src: url('/fonts/CooperHewitt-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-Light.otf')  format('opentype'),
    url('/fonts/CooperHewitt-Light.woff') format('woff'),
    url('/fonts/CooperHewitt-Light.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-Light.svg#CooperHewitt-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CooperHewitt-Medium';
    src: url('/fonts/CooperHewitt-Medium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-Medium.otf')  format('opentype'),
    url('/fonts/CooperHewitt-Medium.woff') format('woff'),
    url('/fonts/CooperHewitt-Medium.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-Medium.svg#CooperHewitt-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oranienbaum-Regular';
    src: url('/fonts/Oranienbaum-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Oranienbaum-Regular.woff') format('woff'),
    url('/fonts/Oranienbaum-Regular.ttf')  format('truetype'),
    url('/fonts/Oranienbaum-Regular.svg#Oranienbaum-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CooperHewitt-LightItalic';
    src: url('/fonts/CooperHewitt-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-LightItalic.otf')  format('opentype'),
    url('/fonts/CooperHewitt-LightItalic.woff') format('woff'),
    url('/fonts/CooperHewitt-LightItalic.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-LightItalic.svg#CooperHewitt-LightItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CooperHewitt-MediumItalic';
    src: url('/fonts/CooperHewitt-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-MediumItalic.otf')  format('opentype'),
    url('/fonts/CooperHewitt-MediumItalic.woff') format('woff'),
    url('/fonts/CooperHewitt-MediumItalic.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-MediumItalic.svg#CooperHewitt-MediumItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CooperHewitt-Semibold';
    src: url('/fonts/CooperHewitt-Semibold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-Semibold.otf')  format('opentype'),
    url('/fonts/CooperHewitt-Semibold.woff') format('woff'),
    url('/fonts/CooperHewitt-Semibold.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-Semibold.svg#CooperHewitt-Semibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CooperHewitt-Book';
    src: url('/fonts/CooperHewitt-Book.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-Book.otf')  format('opentype'),
    url('/fonts/CooperHewitt-Book.woff') format('woff'),
    url('/fonts/CooperHewitt-Book.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-Book.svg#CooperHewitt-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CooperHewitt-Heavy';
    src: url('/fonts/CooperHewitt-Heavy.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CooperHewitt-Heavy.otf')  format('opentype'),
    url('/fonts/CooperHewitt-Heavy.woff') format('woff'),
    url('/fonts/CooperHewitt-Heavy.ttf')  format('truetype'),
    url('/fonts/CooperHewitt-Heavy.svg#CooperHewitt-Heavy') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* END FONTS **********************************************/

/* HEADER **********************************************/
.subMenu {position: absolute; right: 0; top: 0; z-index: 0;}
.siteWrap {position: relative; background: #282828;}

.ctaFloater {position: fixed; z-index: 500000; display: block; padding: 5px 10px; color: white; border: 1px solid white;}
    .ctaFloater:hover {}
.quoteBtn {left: -22px; top: 200px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family: 'CooperHewitt-Medium'; font-size: 18px; background: gray;}
    .quoteBtn:hover {background: #c31001;}
.referralBtn {left: -29px; top: 290px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family: 'CooperHewitt-Medium'; font-size: 18px; background: gray;}
    .referralBtn:hover {background: #c31001;}    
.learningCenterBtn {left: -11px; top: 370px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family: 'CooperHewitt-Medium'; font-size: 18px; background: gray;}
    .learningCenterBtn:hover {background: #c31001;}

.mailBtn {bottom: 10px; left: 0px; font-size: 25px; background: gray;}
    .mailBtn:hover {background: #c31001;}

.header {width: 100%; height: 120px; background: url('/images/white_bg.jpg'); position: fixed; z-index: 100000; border-bottom: 1px solid #eae5e3;}
    .logoLink {position: relative; display: inline-block; width: 400px; height: 100%; background: url("/images/shadow.png") right center no-repeat; background-size: cover;}
        .logoLink img {position: absolute; left: 5%; height: 80%; width: auto; top: 12%;}
        .logoLink span {position: absolute; right: -220px; font-size: 20px; line-height: 120px; font-family: 'CooperHewitt-MediumItalic'; color: #5b5959;}
    .mainNav {float: right; margin-right: 36px;}
        .mainNav li {}
        .mainNav > li {display: inline-block; vertical-align: top;}
            .mainNav .mainLink {color: #5b5959; font-family: 'CooperHewitt-Medium'; position: relative; line-height: 121px; text-align: center; font-size: 22px; margin-left: 30px;}
                .mainNav .mainLink:hover {color: #494949;}

            .mainNav .subNav {display: none; position: absolute; width: 300px;}
                .mainNav .subNav li {background: url('/images/black_trans_bg2.png');}
                .subNav > ul > li {background: url('/images/black_trans_bg2.png');}
                .subNav > li {position: relative;}
                .subNav:not(.servicesSubNav) > li {width: 100%;}
                .mainNav .subNav:not(.servicesSubNav) > li:first-child {padding-top: 20px;}
                .mainNav .subNav:not(.servicesSubNav) > li:last-child {padding-bottom: 20px;}
                    .mainNav .subNav:not(.servicesSubNav) > li > a {display: block; padding: 5px 30px; width: 100%; color: white; font-family: 'CooperHewitt-Medium'; background: url('/images/white_trans_dk_bg.png') -50px 0 no-repeat; white-space: nowrap;}
                        .mainNav .subNav:not(.servicesSubNav) a:hover {background-position: -40px 0; text-shadow: 0 0 1px white;}

            .mainNav .mainLink.currentNav, .mainNav .mainLink.parentCurrent {color: #001fb0;}
            .mainNav .subNav .currentNav {background: url('/images/white_trans_dk_bg.png') -40px 0 no-repeat;}

            .mainNav .servicesSubNav {width: 80%; padding: 30px 5%; left: 5%; background: url('/images/black_trans_bg2.png');}
                .mainNav .servicesSubNav li {background: none !important;}
                .mainNav .servicesSubNav > li {display: inline-block !important; vertical-align: top;}
                .mainNav .servicesSubNav > li:first-child {width: calc(25% - 24px); margin-right: 20px;}
                .mainNav .servicesSubNav > li:not(:first-child) {width: calc(25% - 45px); border-left: 1px solid dimgray; padding-left: 20px; margin-right: 20px;}

                    .mainNav .servicesSubNav a {display: inline-block;}
                    .mainNav .servicesSubNav > li > a {color: white; font-family: 'CooperHewitt-Medium'; border-bottom: 2px solid #424242; padding-bottom: 3px; margin-bottom: 15px;}
                        .mainNav .servicesSubNav > li > a:hover {color: gainsboro;}
				.mainNav .servicesSubNav > li > h3 {color: white; font-family: 'CooperHewitt-Medium'; border-bottom: 2px solid #424242; padding-bottom: 3px; margin-bottom: 15px;}                        
                    .mainNav .servicesSubNav .tertNav a {color: #ffffff; font-family: 'CooperHewitt-Medium'; padding: 6px 0; font-size: 16px;}
                        .mainNav .servicesSubNav .tertNav a:hover {color: white;}

                .mainNav .searchBoxContainer {display: none; position: absolute; right: 0; width: 500px; padding: 20px 50px; background: url('/images/black_trans_bg3.png');}

@media screen and (min-width: 900px){
    .burger {display: none !important;}
}

@media screen and (max-width: 1200px){
    .mainNav .mainLink {margin-left: 20px; font-size: 20px;}
    .logoLink span {font-size: 18px; right: -160px;}
}

@media screen and (max-width: 1050px){
    .mainNav .mainLink {margin-left: 15px; font-size: 18px;}
	.logoLink img {height: 70%; top: 17%;}
    .logoLink span {right: -140px;}
}

@media screen and (max-width: 970px){
    .mainNav .mainLink {margin-left: 10px; font-size: 16px;}
}

@media screen and (max-width: 900px){
    .mainNav li:not(.burger) {display: none;}
    .burger a {font-size: 30px !important;}
}

@media screen and (max-width: 800px){
    #introBlock {min-height: 450px;}
        #introBlock .intoCont {width: 530px; margin-top: 150px;}
        .socialLinks {margin: 40px 0;}
        #introBlock i {font-size: 25px;}
        #introBlock h2 {font-size: 60px;}
}

@media screen and (max-width: 700px){
    .header {height: 80px !important;}
    .mainNav .mainLink {line-height: 80px !important;}
    .logoLink span {display: none;}
    .logoLink {width: 200px;}

    #introBlock {min-height: 500px;}
    #introBlock .intoCont {width: 450px; margin-top: 150px;}
    #introBlock .socialLinks {margin: 35px 0;}
    #introBlock i {font-size: 18px;}
    #introBlock p {font-size: 20px;}
    #introBlock h2 {font-size: 50px;}
}

@media screen and (max-width: 500px){

    #introBlock {min-height: 450px;}
    #introBlock .intoCont {width: 310px; margin-top: 150px;}
    #introBlock .socialLinks {margin: 30px 0;}
    #introBlock .socialLinks a {width: 32px; line-height: 29px; font-size: 20px !important;}
    #introBlock i {font-size: 14px;}
    #introBlock p {font-size: 16px;}
    #introBlock h2 {font-size: 35px; line-height: 60px;}
}

@media screen and (max-width: 400px){
    #introBlock .intoCont {width: 260px; margin-top: 150px;}
    #introBlock .socialLinks {margin: 30px 0;}
    #introBlock .socialLinks a {margin: 0 4px;}
    #introBlock i {font-size: 12px;}
    #introBlock p {font-size: 14px;}
    #introBlock h2 {font-size: 28px; line-height: 55px;}
}

@media screen and (max-width: 800px){
    #mediaBlock {min-height: 550px;}
        #mediaBlock .intoCont {width: 530px; margin-top: 210px;}
        .socialLinks {margin: 40px 0;}
        #mediaBlock i {font-size: 25px;}
        #mediaBlock h2 {font-size: 60px;}
}

@media screen and (max-width: 700px){
    .header {height: 80px !important;}
    .mainNav .mainLink {line-height: 80px !important;}
    .logoLink span {display: none;}
    .logoLink {width: 200px;}

    #mediaBlock {min-height: 500px;}
    #mediaBlock .intoCont {width: 450px; margin-top: 150px;}
    #mediaBlock .socialLinks {margin: 35px 0;}
    #mediaBlock i {font-size: 18px;}
    #mediaBlock p {font-size: 20px;}
    #mediaBlock h2 {font-size: 50px;}
}

@media screen and (max-width: 500px){

    #mediaBlock {min-height: 450px;}
    #mediaBlock .intoCont {width: 310px; margin-top: 150px;}
    #mediaBlock .socialLinks {margin: 30px 0;}
    #mediaBlock .socialLinks a {width: 32px; line-height: 29px; font-size: 20px !important;}
    #mediaBlock i {font-size: 14px;}
    #mediaBlock p {font-size: 16px;}
    #mediaBlock h2 {font-size: 35px; line-height: 60px;}
}

@media screen and (max-width: 400px){
    #mediaBlock .intoCont {width: 260px; margin-top: 150px;}
    #mediaBlock .socialLinks {margin: 30px 0;}
    #mediaBlock .socialLinks a {margin: 0 4px;}
    #mediaBlock i {font-size: 12px;}
    #mediaBlock p {font-size: 14px;}
    #mediaBlock h2 {font-size: 28px; line-height: 55px;}
}


.subMenu {position: absolute; top: 30px; right: 0; width: 230px; padding-left: 30px; margin-top: 50px;}
    .subMenu li {list-style: none;display: block;}
        .subMenu .mainLink {display: block; background: #1f1f1f; padding: 10px 30px; font-size: 20px;}
        .subMenu .subNav {margin: 10px 0; padding: 3px 0; display: none;}
            .subMenu a {color: darkgray; display: inline-block;}
                .subMenu a:hover {color: gainsboro;}
            .subMenu .subNav > li > a {padding: 8px 0 8px 30px; font-size: 16px;}
            .subMenu .subNav > li span {display: block; padding: 7px 5px; position: absolute; right: 10px; color: #000000; font-size: 18px; cursor: pointer;}
                .subMenu .subNav > li span:hover {color: gainsboro;}

            .subMenu .tertNav {display: none; overflow: hidden; padding: 5px 5px 5px 50px;}
                .subMenu .tertNav a {display: block; padding: 5px 0; font-size: 14px;}

.subMenu {}
.subMenu .searchBoxContainer {}
/* END HEADER **********************************************/

/* CONTENT SECTIONS **********************************************/
section {padding: 1px 0; line-height: 30px; font-size: 18px;}
.contentWrap {width: 90%; margin: auto;}
.sectBlock {position: relative; width: 100%; background-position: 0; background-attachment: fixed; background-repeat: no-repeat; background-size: cover !important; min-height: 750px; font-family: 'CooperHewitt-Light'; color: #000000;}
.sectBlock2 {position: relative; width: 100%; background-position: 0; background-attachment: fixed; background-repeat: no-repeat; background-size: cover !important; min-height: 550px; color: white;}
.plainSectBlock {width: 100%; background: white url('/images/paper_bg.jpg'); color: #000000; overflow: auto;}

#introBlock {background-image: url('/images/img_black.jpg');}
#mediaBlock {background-image: url('/images/img_MediaBlock.jpg');}
#aboutBlock {background-image: url('/images/img_phone.jpg');}
#portBlock {background-image: url('/images/img_iphone.jpg');}
#servicesBlock {background-image: url('/images/img_services.jpg');}
#contentBlock {background-image: url('/images/img_contentBG.jpg');}
#techBlock {background-image: url('/images/img_tech.jpg');}

/* headline **********************************************/
h1 {position: relative; z-index: 500;}
h1, h2 {font-size: 48px; line-height: 55px; font-weight: normal; font-family: 'Oranienbaum-Regular';}
h1.headLine {text-align: center; margin: 50px 5%; overflow: hidden;}
h1.headLine span:before {right: 100%;}
h1.headLine span:after {left: 100%;}
h1.headLine span:before, h1.headLine span:after {content: ""; display: block; position: absolute; top: 0.60em; width: 1000px;}
h1.headLine span {display: inline-block; padding: 0 20px; position: relative; vertical-align: baseline;}

.bulletList {margin-left: 50px; padding: 20px 0;}
    .bulletList li {list-style-type: disc;}

.bulletListTestimonial {margin-left: 50px; padding: 20px 0;}
    .bulletListTestimonial li {list-style-type: none;}
    .bulletListTestimonial li a:hover {color: #000000; text-decoration:underline;}

blockquote.quote {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	line-height: 18px;

	font-weight: normal;

	color: #000000;

	text-align: left;

	background-image: url(/images/start-quote-body.gif);

	background-position: left top;

	background-repeat: no-repeat;

	padding-top: 10px;

	padding-left: 40px;

  }

blockquote.quote span {

	display: block;

	background-image: url(/images/end-quote-body.gif);

	background-repeat: no-repeat;

	background-position: right bottom;

	padding-right: 40px;

	padding-bottom: 10px;

   }
   
#bodycontent .quote .testcredit {

	text-align: left;

	margin-left: 0px;

}

.testcredit {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	line-height: normal;

	font-weight: bold;

	color: #ad0000;

	text-align: right;

	margin-top: 5px;

	margin-right: 20px;

	margin-bottom: 0px;

	margin-left: 32px;

}

@media screen and (max-width: 900px){
    h1.headLine {font-size: 40px; line-height: 45px; margin: 80px 5%;}
}

@media screen and (max-width: 700px){
    h1.headLine {font-size: 30px; line-height: 35px; margin: 60px 5%;}
}

@media screen and (max-width: 500px){
    h1.headLine {font-size: 20px; line-height: 25px; margin: 50px 5%;}
}

@media screen and (max-width: 400px){
    h1.headLine {font-size: 18px;}
}

h3 {font-size: 18px; font-family: 'CooperHewitt-Medium'; font-weight: normal; margin-bottom: 30px;}
.plainSectBlock h3 {color: #000000;}

h4 {font-size: 24px; margin-bottom: 40px; font-family: 'CooperHewitt-Medium'; font-weight: normal;}
.sectBlock h4 {border-bottom: 1px solid #908281;}
.plainSectBlock h4 {border-bottom: 1px solid #a9aaaa;}

.plainSectBlock h1.headLine {color: #000000;}
.plainSectBlock h1.headLine span:before, .plainSectBlock h1.headLine span:after {border-top: 1px solid #000000;}
.sectBlock h1.headLine {color: #000000;}
.sectBlock h1.headLine span:before, .sectBlock h1.headLine span:after {border-top: 1px solid #908281;}

.mainList {position: relative; z-index: 500; width: 90%; max-width: 1100px; padding: 0px 5%; margin: auto; clear: both;}
    .paraList {display: table;}
        .paraList li {display: table-cell; vertical-align: top;}

.imgCont {padding: 15px 15px 5px 15px; margin-top: 10px;}
.sectBlock .imgCont {border: 1px solid white;}
.plainSectBlock .imgCont {border: 1px solid #ccc;}
    .right {float: right; margin-left: 50px;}
    .left {float: left; margin-right: 50px;}
        .plainSectBlock .imgCont img {border: 1px solid #e4e4e4;}

.btnList {margin: auto; text-align: center;}
    .btnList li {display: inline-block; margin: 0 5px;}

@media screen and (max-width: 700px){
    .btnList li {display: block;}
}

.blackBox {display: none;}

/* intro **********************************************/
    .intoCont {width: 800px; margin: 135px auto 0 auto; text-align: center; color: #000000;}
        .intoCont li {}
        .intoCont li li {display: inline-block; vertical-align: top;}
            .intoCont i {font-size: 30px;}
            .intoCont a {color: white;}
                .intoCont a:hover {}
            .socialLinks {margin: 50px 0;}
                .socialLinks a {display: block; width: 50px; line-height: 47px; margin: 0 8px; border: 2px solid white; font-size: 25px !important; padding-top: 3px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
                    .socialLinks a:hover {text-shadow: 0 0 7px #fcf7c0; box-shadow: 0 0 4px #fcf7c0,  0 0 4px #fcf7c0 inset; color: white;}
            .intoCont h2 {display: block; font-family: 'Oranienbaum-Regular'; font-size: 73px; font-weight: normal; border-bottom: 1px solid white; line-height:  80px;}
            .intoCont p:last-child {text-align: left; font-size: 24px; padding-top: 10px;}
                .intoCont p:last-child a {display: inline-block; float: right;}
                    .intoCont p:last-child a:hover {text-shadow: 0 0 4px #fcf7c0; color: white;}

/* capabilities **********************************************/
    .capabilitiesList li {}
    .capabilitiesList > li {display: inline-block; vertical-align: top;}
    .capabilitiesList > li:not(:last-child) {margin-right: 70px;}
        .capabilitiesList li li {padding-bottom: 20px;}
        .blue {width: 310px; background: #4262f4; color: white; font-size: 36px; float: left; padding: 30px 40px;}

@media screen and (min-width: 600px){.blue {line-height: 45px !important;}}

        .capabilitiesList a {color: #7e7e7e; font-size: 22px; font-family: 'CooperHewitt-Light';}
            .capabilitiesList a span {display: inline-block; width: 25px; color: #d2d3d3 !important; text-align: center; padding-right: 10px;}
            .capabilitiesList a:hover {color: #000000;}
                .capabilitiesList a:hover span {color: #000000 !important;}


@media screen and (max-width: 1200px){
    .capabilitiesList > li:not(:last-child) {margin-right: 30px;}
    .blue {font-size: 28px; width: 245px; padding: 25px 34px;}
    .capabilitiesList a {font-size: 20px;}
}

@media screen and (max-width: 1000px){
    .capabilitiesList > li:not(:last-child) {margin-right: 30px;}
    .blue {font-size: 25px; width: 215px; padding: 25px 34px;}
    .capabilitiesList a {font-size: 18px;}
}

@media screen and (max-width: 900px){
    .blue {width: 95%; margin-bottom: 40px; padding: 15px 5%; font-size: 20px;}
    .capabilitiesList > li:nth-child(2), .capabilitiesList > li:last-child {width: 45%;}
}

@media screen and (max-width: 600px){
    .capabilitiesList .blue {line-height: 30px; !important;}
    .capabilitiesList > li:nth-child(2), .capabilitiesList > li:last-child {display: block; width: 100%; margin: 0;}
}

/* about **********************************************/
.aboutText {overflow: auto;}
    .aboutText li {display: inline-block; vertical-align: top; width: 45%; float: left;}
        .aboutText li:first-child {padding-right: 10%;}

@media screen and (max-width: 800px){
    .aboutText li {display: block; width: 100%; float: none; padding: 0 !important;}
}

    .philCont {position: relative; width: 100%; padding: 30px 0; clear: both; overflow: hidden; margin-top: 80px;}
        .redBlock {width: 100%; margin: auto; height: 100%; position: absolute; top: 0; left: 50%; background: url('/images/dark_green_trans_bg.png'); margin-left: -150px; z-index: 50;}
        .philosophyList {position: relative; z-index: 500;}
            .philosophyList > li {display: inline-block; vertical-align: middle;}
            .philosophyList > li:not(:last-child) {padding-right: 40px;}
                .philosophyList li:first-child span {display: block; padding: 15px 20px; border: 2px solid white; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
                .philosophyList > li:last-child {padding-left: 50px;}
                .philosophyList h3 {margin-bottom: 15px;}
                .philosophyList li {line-height: 25px !important;}

@media screen and (max-width: 1200px){
    .philosophyList h2 {font-size: 40px;}
    .philosophyList li:not(:last-child) {padding-right: 20px;}
}

@media screen and (max-width: 1100px){
    .philosophyList span {font-size: 3em; padding: 8px 12px;}
    .philosophyList h2 br {display: none;}
    .philosophyList > li:last-child {display: block; width: 100%; margin-top: 40px; padding-left: 0;}
    .redBlock {left: 0;}
}

@media screen and (max-width: 800px){
    .redBlock {width: 150%;}
}

@media screen and (max-width: 500px){
    .philosophyList h2 {font-size: 25px;}
    .philosophyList li:first-child span {font-size: 2em; padding: 5px 8px !important;}
    .philosophyList ul li {font-size: 16px;}
}


/* clients **********************************************/
#clientStart {padding-top: 100px; margin-top: 0px;}
#clientsBlock {position: relative; overflow: hidden; height: 100px;}
    #clientsBlock ul {width: 10000px; position: relative; height: 100%;}
        #clientsBlock li {display: inline-block; height: 100%; padding: 0 25px; vertical-align: top; position: relative;}
            #clientsBlock img {height: 100%; width: auto;}
        #clientsBlock li:last-child {}
            #clientsBlock .clientMore {position: absolute; right: 0; top: 0; height: 100%; display: block; width: 200px; line-height: 110px; text-align: center;  background: #001fb0; color: white; font-size: 24px;  font-family: 'CooperHewitt-Light'; display: none;}
                #clientsBlock .clientMore i {position: relative; display: inline-block; top: 2px; opacity: 0.5;}
                #clientsBlock .clientMore span {display: inline-block; margin-right: 10px;}
                #clientsBlock .clientMore:hover {background: #5abafc;}
                #clientsBlock .clientMore:hover i {opacity: 1; color: #001fb0;}

@media screen and (max-width: 700px){
    #clientsBlock {height: 60px !important;}
    #clientsBlock li {padding: 0 10px;}
    #clientsBlock .clientMore {width: 50px; line-height: 65px;}
    #clientsBlock .clientMore span {display: none;}
}

/* portfolio **********************************************/
#portBlock {padding-bottom: 80px; position: relative;}
#portBlock h1 {margin: 100px 0;}
    .portList {}
        .portList > li {display: inline-block; width: 48%; vertical-align: top; font-size: 18px;}
        .portList > li:first-child {margin-right: 2%;}
        .portList a {display: block; color: white;}
            .portList span {display: inline-block; width: 20px; text-align: center; margin-right: 10px; opacity: .5;}
        .catClientsList {margin: 15px 0 15px 35px; display: none;}
            .contentLink {font-size: 16px;}

@media screen and (max-width: 800px){
    .portList > li {display: block; width: 100%;}
    .portList h4 {margin-bottom: 15px; margin-top: 40px;}
}


/* FLYOUT CONTENT **************************************************/
.flyoutContent {width: 50%; height: auto; min-height: calc(100% - 80px); position: absolute; top: 0; left: -50%; background: url('/images/black_trans_bg3.png'); z-index: 1000; color: white;}
.closeFlyout {display: block; position: absolute; right: 20px; top: 20px; color: #908281; font-size: 30px;}
.closeFlyout:hover {color: white;}
        .hidden {display: none;}
        .flyoutContent > div {width: 75%; max-width: 600px; margin: 80px auto 60px auto;}
            .flyoutContent h2 {position: relative; font-size: 25px; font-family: 'CooperHewitt-Light'; border-bottom: 1px solid #908281; padding-bottom: 0;}
                .flyoutContent h2 a {display: block; position: absolute; left: 0; top: -60px; font-size: 18px; color: #001fb0;}
                    .flyoutContent h2 a:hover {color: white;}
            .flyoutContent h4 {font-size: 18px; font-family: 'CooperHewitt-Light'; padding-top: 10px; text-align: right; margin: 0; border: none;}
            .flyoutContent .imgCont2 {width: 100%; height: 200px; overflow: hidden; margin: 40px 0;}
                .flyoutContent .imgCont2 img {width: 100%; height: auto;}
            .flyoutContent p {padding-bottom: 15px;}

@media screen and (max-width: 800px){
    .flyoutContent {width: 100%; left: -100%;}
    .flyoutContent h2 {font-size: 20px; line-height: 30px;}
    .flyoutContent h4 {font-size: 16px; line-height: 22px;}
    .flyoutContent p {font-size: 14px; line-height: 20px;}
}

@media screen and (max-width: 500px){
    .flyoutContent .imgCont2 {height: 150px;}
}
/* END FLYOUT CONTENT **************************************************/

/* featured **********************************************/
#featuredBlock {background: url('/images/blue_trans_bg.png'); overflow: hidden; color: white; margin-top: -80px; position: relative; z-index: 1500;}
    #featuredBlock h3 {color: white; font-size: 25px; padding-left: 100px; line-height: 80px; margin: 0; font-family: 'CooperHewitt-Light';}
    .featArrow {display: none; line-height: 250px; width: 100px; position: absolute; right: 0; top: 82px; z-index: 1000; text-align: center; color: white; font-size: 120px; background: url("/images/white_trans_dk_bg2.png"); border-left: 1px solid white; opacity: .5;}
        .featArrow:hover {color: white; opacity: 1;}
    .featuredList {width: 10000px; position: relative; bottom: -1px;}
        .featuredList li {display: inline-block; list-style: none; vertical-align: top; float: left; min-width: 150px; height: 250px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden;}
            .featuredList .outer {width: 100%; height: 100%; background: url('/images/black_trans_bg4.png'); position: absolute; top: 0; left: 0;}
                .featuredList .inner {position: absolute; left: 0; top: 300px; width: 70%; height: 70%; padding: 20% 15%; background: url('/images/black_trans_bg3.png');}
                    .featuredList h4 {margin-bottom: 25px; font-size: 20px; font-family: 'CooperHewitt-Light';}
                    .featuredList a {display: block;}

@media screen and (max-width: 400px){
    #featuredBlock h3 {font-size: 18px; padding-left: 30px;}
    .featArrow {width: 60px; font-size: 60px;}
}

/* content **********************************************/
.contentList {}
    .contentList > li {overflow: auto;}
    .contentList > li:first-child {margin-bottom: 80px;}
        .contentList .imgCont {margin-bottom: 50px;}
        .contentList p, .contentList h3 {line-height: 25px;}
        .contentList p {padding: 10px 0; font-family: 'CooperHewitt-Book'; color: #5b5959;}
        .contentList h3 {margin-bottom: 10px;}

@media screen and (max-width: 1200px){

}

/* services **********************************************/
.servicesList {}
    .servicesList > li {overflow: auto;}
    .servicesList > li:first-child {margin-bottom: 80px;}
        .servicesList .imgCont {margin-bottom: 50px;}
        .servicesList p, .servicesList h3 {line-height: 25px;}
        .servicesList p {padding: 10px 0; font-family: 'CooperHewitt-Book'; color: #5b5959;}
        .servicesList h3 {margin-bottom: 10px;}

@media screen and (max-width: 1200px){

}


/* process **********************************************/
    .processList {}
        .processList > li {margin-bottom: 50px;}
            .processList .imgCont {margin-bottom: 0px; margin-top: 0px;}
            .processList > li:not(:first-child):not(:last-child) .paraList li:first-child {padding-right: 50px;}
                .processList h4 {color: #001fb0; margin-bottom: 10px;}

@media screen and (max-width: 700px){
    .processList > li {margin-bottom: 0 !important;}
    .processList li li {display: block; width: 100%; margin-bottom: 30px;}
    .processList > li:not(:first-child):not(:last-child) .paraList li:first-child {padding-right: 0;}
    .imgCont {float: none; margin: auto; display: inline-block;}
}


/* technology **********************************************/
.techList {margin-bottom: 100px;}
    .techList a {display: inline-block; line-height: 20px;}
.techList a:not(:last-child) {}
    .breakList {margin-top: 30px;}
        .breakList li {display: inline-block; vertical-align: top;}
            .techGroup {width: 45%;}
            .techGroup:not(:first-child) {margin-left: 5%;}
                .techList h3 {margin-bottom: 15px; margin-top: 10px; border-bottom: 1px solid #908281;}
                .techGroup li:not(:last-child) a {padding-right: 10px; border-right: 1px solid #737373; margin-right: 10px;}

@media screen and (max-width: 700px){
    #techBlock h4 {font-size: 18px;}
    #techBlock p {font-size: 14px; line-height: 23px;}
    .breakList {margin-top: 0;}
    .techGroup {display: block; width: 100%; margin-left: 0 !important; margin-top: 30px;}
}


/* contact **********************************************/
#techBlock h4 {border: none; margin-bottom: 15px;}
#contactBlock {padding-bottom: 100px;}
.contactList {}
    .contactList > li {display: inline-block; vertical-align: top; float: left;}
    .contactList > li:last-child {width: 50%;}
    .contactList > li:first-child {padding-right: 5%; width: 45%;}
        .contactList > li:first-child ul li {display: inline-block; vertical-align: top;}
        .contactList > li:first-child ul li:first-child {padding-right: 50px;}
            .contactList h3 {margin-bottom: 5px; margin-top: 20px;}
                .contactList h3 span {display: inline-block; padding-right: 15px;}
            .contactList p {padding: 10px 0;}
            .contactList h4 {border: 0 none !important; margin-top: 10px;}
            .contactList h4 b {color: #ec7469;}

            .contactList form {margin-left: 20%; width: 80%;}
                .contactList form li {width: 100%; margin: 20px 0;}
                input[type="text"], input[type="submit"], textarea {font-family: 'CooperHewitt-Light'; font-size: 16px;}
                .contactList input[type="text"], .contactList textarea {width: 90%; padding: 3% 5%; background: transparent; border: 1px solid #c5c5c5;}
                    .contactList input[type="text"]:active, .contactList textarea:active, .contactList input[type="text"]:focus, .contactList textarea:focus {border: 1px solid #001fb0;}
                    .contactList input[type="submit"] {float: right; background: #001fb0; padding: 15px 50px; color: #ffffff; font-family: 'CooperHewitt-Medium'; border: none;}
                        .contactList input[type="submit"]:hover {background: #08c14a;}

@media screen and (max-width: 700px){
    #contactBlock .contactList > li {display: block; width: 100%; padding-right: 0;}
    #contactBlock form {margin: auto; width: 100%;}
    #contactBlock h4 {margin-bottom: 15px; margin-top: 30px;}
    #contactBlock p {font-size: 14px; line-height: 23px;}
}


/* location **********************************************/
#locationBlock {margin-top: -1px;}


/* footer **********************************************/
#footer {min-height: 100px; background: #ffffff; font-size: 18px;}
    .footList {width: 90%; text-align: center; margin: 30px auto;  color: #000000;}
    .footList > li {margin: 30px 0;}
    .footList li {list-style: none;}
    .footList > li, .footImgList li {display: inline-block; vertical-align: middle;}
    .footImgList {padding-left: 30px;}
    .footImgList li {margin-left: 10px;}

@media screen and (max-width: 700px){

}


/***************** CAROUSEL *******************************************************************************************/
.carouselContainer {width: 100%; height: 500px; position: relative;}
.empty {height: 24px;}
    .carouselDecor {width: 100%; height: 24px; background: url('/images/paper_edge.png') 0 0 repeat-x; position: absolute; top: 0; left: 0; z-index: 1000;}
    .arrow {display: block; position: absolute; z-index: 1000; font-size: 120px; color: #000000; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=50);}
        .arrow:hover {opacity: 0.75; -webkit-opacity: 0.75; -moz-opacity: 0.75; filter:alpha(opacity=75);}
    .leftArrow {left: 45px;}
    .rightArrow {right: 35px;}

    .imgCarousel {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 500;}
        .imgCarousel li {width: 100%; height: 100%; position: absolute; display: none; background-position: center center; background-repeat: no-repeat; background-size: cover;}

            .carouselContent {width: 80%; color: white; display: inline-block; white-space: nowrap;}
                .carouselContent .icon {display: block; opacity: 0.25; -webkit-opacity: 0.25; -moz-opacity: 0.25; filter:alpha(opacity=25);}
                .carouselContent .icon:before {margin: 0; font-size: 150px;}
                .carouselContent .icon:after {margin: 0;}
                .carouselContent .timesText {font-family: "Times New Roman", Times, serif !important; font-weight: bold !important; font-size: 33px; font-color="#cccccc";}
                .carouselContent .bigText {font-family: 'open_sanssemibold'; text-transform: uppercase; font-size: 55px;}
                .carouselContent .normalText {font-family: 'open_sanslight'; font-size: 48px;}

@media screen and (max-width: 1300px){
    .carouselContent .icon:before {font-size: 130px;}
    .carouselContent .timesText {font-size: 30px;}
    .carouselContent .bigText {font-size: 50px;}
    .carouselContent .normalText {font-size: 45px;}
}

@media screen and (max-width: 1200px){
    .carouselContent .icon:before {font-size: 110px;}
    .carouselContent .timesText {font-size: 28px;}
    .carouselContent .bigText {font-size: 45px;}
    .carouselContent .normalText {font-size: 40px;}
}

@media screen and (max-width: 1100px){
    .carouselContent .icon:before {font-size: 100px;}
    .carouselContent .timesText {font-size: 25px;}
    .carouselContent .bigText {font-size: 40px;}
    .carouselContent .normalText {font-size: 35px;}
}

@media screen and (max-width: 1000px){

    .carouselContent .icon:before {font-size: 100px;}
    .carouselContent .timesText {font-size: 25px;}
    .carouselContent .bigText {font-size: 40px;}
    .carouselContent .normalText {font-size: 35px;}
}

@media screen and (max-width: 850px){
    .arrow {display: none;}

    .carouselContent .icon:before {font-size: 90px;}
    .carouselContent .timesText {font-size: 25px;}
    .carouselContent .bigText {font-size: 35px;}
    .carouselContent .normalText {font-size: 30px;}
}

@media screen and (max-width: 750px){
    .arrow {display: none;}

    .carouselContent .icon:before {font-size: 90px;}
    .carouselContent .timesText {font-size: 25px;}
    .carouselContent .bigText {font-size: 30px;}
    .carouselContent .normalText {font-size: 25px;}
}

@media screen and (max-width: 650px){
    .carouselContent {white-space: normal;}
    .carouselContent .icon:before {font-size: 90px;}
    .carouselContent .timesText {font-size: 22px;}
    .carouselContent .bigText {font-size: 25px;}
    .carouselContent .normalText {font-size: 20px;}
}

@media screen and (max-width: 500px){
    .arrow {display: none;}
    .carouselContainer {display: none;}
}
/***************** END CAROUSEL ***************************************************************************************/