#galleryWrapper{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 650px;
}

#missionWrapper{
    background: url(images/clear-triangles.png) repeat top left #bbb;
    padding: 42px 0 40px;
    text-align: center;
}

.dnnEditState #missionWrapper{padding-top: 200px;}

#missionWrapper h1{
    text-align: center !important;
    margin: 0;
    font-size: 40px;
    line-height: 48px;
}

#missionWrapper p{
    text-align: center !important;
    margin: 10px auto 0;
    max-width: 700px;
    font-size: 28px;
    line-height: 40px;
}

#contentWrapper{
    padding: 55px 0;
}


.colWrap{
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.colItem{
    display: inline-block;
    vertical-align: top;
    width: 33%;
    padding: 40px 2%;
}

.colImg{margin: 0 0 32px;}
.colItem p{font-size: 20px; line-height: 28px; margin: 0 0 20px;}


a.serviceLink{
    text-decoration: none;
    display: block;
    position: relative;
}

.serviceItem {
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: relative;
    z-index: 50;
}

.serviceRow1{background-color: #444; background-position: right top;}
.serviceRow2{background-color: #f2f2f2; background-position: left top;}

.serviceRow1 h2, .serviceRow1 p{color: #f2f2f2;}
.serviceRow2 h2, .serviceRow2 p{color: #222;}
.serviceItem h2{font-size: 32px; line-height: 40px; margin: 0 0 10px;}
.serviceItem p{font-size: 20px; line-height: 28px; margin: 0;}

.serviceText{max-width: 65%; padding-top: 60px; padding-bottom: 55px; position: relative; z-index: 25; min-height: 290px;}
.serviceRow1 .serviceText{margin-right: auto; background-color: #444; padding-left: 10%; padding-right: 0;}
.serviceRow2 .serviceText{margin-left: auto; background-color: #f2f2f2; padding-right: 10%; padding-left: 0;}

.serviceRow1 .serviceText:before, .serviceRow2 .serviceText:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    width: 300px;
    height: 100%;
}

.serviceRow1 .serviceText:before{
    right: -100px;
    background: #444;
    transform: skewX(30deg);
}

.serviceRow2 .serviceText:before{
    left: -100px;
    background: #f2f2f2;
    transform: skewX(-30deg);
}

.serviceRow1:hover, .serviceRow2:hover,
.serviceRow1:hover .serviceText, .serviceRow2:hover .serviceText,
.serviceRow1:hover .serviceText:before, .serviceRow2:hover .serviceText:before{background-color: #002c76;}

.serviceRow1:hover *, .serviceRow2:hover *{color: #fff;}

#valuesWrapper{
    background: url(images/clear-triangles.png) repeat top left #002c76;
    padding: 50px 0 45px;
    text-align: center;
}

.valueItem{
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    font-size: 65px;
    line-height: 75px;
    font-style: italic;
    padding: 0;
}

.valueItem{opacity: 0; transition: opacity 1s;}
.valueItem.fadeIn{opacity: 1;}

ul.valueWrap{padding-bottom: 0 !important;}
li.valueItem{list-style-type: none;}

/*.counterWrap, .counterItem{background: url(images/clear-triangles.png) repeat top left;}
.counter0{}
.counter1{}
.counter2{}*/

/* uncomment if turn counters back on
.counterWrap{position: relative; background: none #005c2c;}
.counterColorBkgd, .counterTriBkgd{display: table; width: 98%; padding-right: 2%;}
.counterColorBkgd{position: absolute;}
.counterTriBkgd{position: relative; background: url(images/clear-triangles.png) repeat top left transparent;}

.counterItem, .counterColorBkgd:after, .counterTriBkgd:after{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: auto 100%;
}

.counterItem{width: 33%; padding: 45px 2% 40px 6%;}
.counter0{background-color: #335691; background-image: none;}
.counter1{background-color: #002c76; background-image: url(images/arrow-light.png);}
.counter2{background-color: #00235e; background-image: url(images/arrow-med.png);}

.counterColorBkgd:after, .counterTriBkgd:after{content: ""; min-width: 67px;}
.counterColorBkgd:after{background-image: url(images/arrow-dark.png);}

.counterNumber{
    font-family: Arial;
    font-size: 76px;
    line-height: 76px;
    color: #f2f2f2;
    margin: 0 0 10px;
}

.counterTitle{
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    font-size: 22px;
    line-height: 30px;
    color: #f2f2f2;
    text-transform: uppercase;
}

.counterColorBkgd .counterNumber, .counterColorBkgd .counterTitle{visibility: hidden; color: transparent;}
*/


/* responsive */

@media all and (min-width: 2000px) {
    .serviceRow1 .serviceText:before, .serviceRow2 .serviceText:before{display: none;}
    .serviceRow1 .serviceText{padding-right: 50px;}
    .serviceRow2 .serviceText{padding-left: 50px;}
}

@media all and (max-width: 1440px) {
	#galleryWrapper{height: 550px;}
}

@media all and (max-width: 1325px) {
	span.valueItem{display: block;}
}

@media all and (max-width: 1125px) {
    /*.counterItem{width: 30%; padding: 45px 2% 40px 11%;}*/
}

@media all and (max-width: 1000px) {
    .serviceItem{background-size: cover;}
    .serviceText{padding: 50px 7% 45px !important; width: 86% !important; margin: 0 auto !important; max-width: 86%; min-height: 0;}
    .serviceRow1 .serviceText:before, .serviceRow2 .serviceText:before{display: none;}
    .serviceRow1 .serviceText{background: rgba(34,34,34,.8);}
    .serviceRow2 .serviceText{background: rgba(242,242,242,.8);}
}

@media all and (max-width: 1100px) {
	#galleryWrapper{height: auto;}
    #mobiGalleryWrap{height: 300px; position: relative;}
}

@media all and (max-width: 960px) {
    .colItem{width: 45%;}
    #valuesWrapper{padding: 45px 0 40px;}
    .valueItem{font-size: 40px; line-height: 50px;}
    /*.counterItem{padding: 25px 2% 20px 11%;}
    .counterNumber{font-size: 56px; line-height: 56px; margin: 0 0 6px;}
    .counterTitle{font-size: 18px; line-height: 26px;}*/
}

@media all and (max-width: 825px) {
    #missionWrapper{padding: 37px 0 35px;}
    #missionWrapper h1{font-size: 32px; line-height: 40px;}
    #missionWrapper p{font-size: 22px; line-height: 30px;}
    /*.counterItem{width: auto;}*/
}

@media all and (max-width: 765px) {
    /*.counterColorBkgd, .counterTriBkgd{display: block; width: 100%; padding-right: 0;}
    .counterColorBkgd:after{display: none;}
    .counterItem{display: block; padding: 20px 2%;}
    .counter1, .counter2{background-image: none;}*/
}

@media all and (max-width: 675px) {
    .colItem{display: block; width: 100%; padding: 40px 0;}
}

@media all and (max-width: 550px) {
    #mobiGalleryWrap{height: 200px;}
}