body{
    background-color: #E5E0DD;
    margin:0px;
    font-family:open sans;
}
.mainSiteWidth {
  margin-left:auto;
  margin-right:auto;
  max-width:880px;
}
#mobileHeader{
    display:none;
}
p{
    font-size: 15px;
}
h1, h2, h3, h4, h5, h6{
    color: rgb(192, 0, 0);
}
a{
    text-decoration: none;
    color: black;
}
td{
    display:block /* Make table cells behave like divs for our form edit */
}
.siteWidth{
  margin-left:auto;
  margin-right:auto;
    width:880px;
}
.siteMarginTop{ /*Used to push all relevant elements out of the way of the fixed header*/
    margin-top:161px;
}
.fixedWrapper {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999;
}
#lightboxContainer .fa{
    border-left: none;
}



#lightBox{
    background-color: rgba(0,0,0,0.8);
    height:100%;
    width:100%;
    z-index: 1000;
    position:fixed;
    display:none;
}
#lightBoxWindow{
    margin-left: auto;
    margin-right:auto;
    width:50%;
    height: 50%;
    background-color:white;
}
#closeBox{
    float:right;
    margin-top:10px;
    margin-right: 40px;
    color:white;
    cursor: pointer;
}
.fa-home{
    margin-left:30px;
}
#home{
    margin-left: 31px;
    margin-right:95px;
}
.plus{
}
.minus{
}
.fullBorder{
    border-top: 1px solid #BBBBBB;
    box-shadow: 0px 2px 10px 1px #AAAAAA;
}
.fa-truck{
    margin-left:5px;
}
.fa-undo{
    width:80px;
    text-align:center;
}
.fa{
    border-left:1px solid #e5e0dd;
    padding:8px;
    font-size:14px;
}
.specialBox{
    width:170px;
    margin-top:30px;
    margin-left:61px;
    margin-right:61px;
    float:left;
}
.specialBox h1{
    font-weight:lighter;
}
.specialBox .fa{
    border:none;
    background-color:rgb(192, 0, 0);
    border-radius: 100px;
    font-size:80px;
    padding:30px;
    color:white;
}
#address{
    float:left;
    margin-top:35px;
}
#navBar{
    clear:both;
    float:right;
    margin-top: -35px;
    width:auto;
}
#contact{
    float:left;
    margin-left:10%;
    margin-top:35px;
}
#email{
    margin-top:7px;
    font-size:12px;
    float:right;
}
#headerOuter{
    background-color:#E5E0dd;
}
#header{
    height:130px;
    margin-left:auto;
    margin-right:auto;
    background-color: #E5E0dd;
}
#header a{
    margin-left:16px;
    text-decoration:none;
    color:black;
}
#header a:hover{
    color: rgb(192, 0, 0);
}
#logoPlaceHolder{
    background-color:#e5e0dd;
    height: 130px;
    width:265px;
    float:left;
    background-image: url(images/mates_rates_logo.jpg);
    background-repeat: no-repeat;
}
#header h1{
    float:right;
}
#parentPages{
    overflow:hidden;
    height:24px;
}
#parentPages, #parentPages li {
    list-style:none;
    text-decoration:none;
    margin:0px;
    padding:0px;
}
#parentPages li{
    float:left;
}
#social{
    background-color:white;
    height:30px;
    width:100%;
}
#socialInner{
    margin-left:auto;
    margin-right:auto;
}

.gallerySection img{
    width: 100%;
    height: 100%;
}
.gallerySection{
    cursor:pointer;
    float:left;
    margin-right: 28px;
    margin-left:0px;
    margin-bottom:28px;
    width:264px;
    height:175px;
    position:relative;
    overflow:hidden;
}
.gallerySection a{
    text-decoration:none;
    color:white;
}
.galleryCaption{
    display:none;
    position:absolute;
    height:auto;
    min-height:40px;
    width:96.6%;
    background-color:rgb(192,0,0);
    color:white;
    padding-left:10px;
    margin-top:-39px;
}
#slideshow{
    background-color:black;
    height:500px;
    margin-top:161px;
    padding-left: 90px;
    display:none;
}
#slideshow img{
    margin-top: 1px !important;
}
#generatedContent{
    margin-left:auto;
    margin-right:auto;
    margin-top:160px;
}

#testimonialContainer {
clear:both;
  background:url("/images/testimonial.jpg") no-repeat center center;
  background-size:cover;
  position:relative;
  height:300px;
}

#testimonialContent {
  height:300px;
}
#testimonialContent {
  color:#fff;
  position:relative;
  overflow:hidden;
}
#testimonialContent h2 {
  text-align:center;
  font-weight:normal;
  font-size:22px;
  margin-top:25px;
  color:#000;
  text-shadow: white 0.1em 0.1em 0.2em
}

#testimonialQuote, #testimonialPerson {
  text-align:center;
  position:relative;
  text-shadow: black 0.1em 0.1em 0.2em
}

#testimonialQuote {
  font-size:26px;
  margin-bottom:25px;
}









#topical{
    margin-left:auto;
    margin-right:auto;
    height:620px;
}
#topical h1{
    font-weight: lighter;
}
#form{
    float:left;
    width:400px;
}
#form label{
    font-size: 12px;
    font-weight:lighter;
}
#form input{
    border:none;
    width:385px;
    height:35px;
    padding-left:10px;
}
#form textarea{
    border:none;
    width:99%;
}
#form input[type=submit]{
    background-color:rgb(142,142,142);
    float:left;
    width:395px;
    outline:none;
}
input[type=submit]:active{
    background-color:rgb(130,130,130);
}
#news{
    float:right;
    width:400px;
}
#footer{
    background-color:rgb(192, 0,0);
    color:white;
    height:150px;
    clear:both;
    letter-spacing: 1px;
}
#footer a{
    color:white;
}
#footer p{
    margin:0px;
    padding:0px;
}
#footerInner{
    margin-left:auto;
    margin-right:auto;
}
#specialities{
    height:auto;
    border-top: 1px solid #BBBBBB;
    margin-left:auto;
    clear:both;
    margin-right:auto;
}
/* NEWS CSS*/
#eazywebNewsScroller, .templateNews{
    list-style: none;
    padding: 0px;
    margin:0px;
    overflow:auto;
}
.templateNews{
    height:100px;
}
.templateNewsSummary{
    display:block;
    margin-left: 90px;
}
.templateNewsDate{
    display:block;
    float:left;
    text-align:center;
    font-weight:700;
    width:72px;
    height:56px;
    padding-top:16px;
    font-family: 'Comfortaa', cursive;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    background-image:url(/images/news_circles.jpg);
    color: #E5E0DD;
}


 @media only screen and (max-width: 4000px) and (min-width:931px) {    /* DESKTOP */
    .siteWidth{
        width:880px;
    }
    #mobileMenu{
        display:none;
    }
    #mobileMenuButtonHolder{
        display:none;
    }
    #mobileMenuButtonContent{
        display:none;
    }
 }

 @media only screen and (max-width: 930px) and (min-width:585px) {   /* SMALL SCREENS & TABLETS */
    .siteWidth {
        width:93vw;
    }
    .siteMarginTop{
        margin-top:161px !important;
    }
    .specialBox{
        width:31%;
        margin-left: 0px;
        margin-right: 0px;
    }
    .specialBox .fa{
        background-color: 
    }
    #slideshowCaptionHolder{
        left:80px !important;
    }
    #home{
        margin-left:0px;
        margin-right:0px;
    }
    #truck{
        float:left;
    }
    #undo{
        float:right;
    }
    #mobileMenu{
        display:none;
    }
    #mobileMenuButtonHolder{
        display:none;
    }
    #header{
        height:155px;
    }
    #header h1{
        font-size:25px;
        margin-right:3vw;
    }
    #navBar{
        float:right;
        margin-top:0px;
     }
    #news{
        float:left;
    }
 }

 @media only screen and (max-width: 584px) { /* MOBILE */ 
   .siteWidth {
     width:86vw;
   }
    #generatedContent{
        margin-top:90px;
    }
    .fullBorder{
        display:none;
    }
    #home{
        margin-left: 0px;
        margin-right: 0px;
    }
    #form{
        width:76vw;
        float:none !important;
    }
    #form input{
        width:100%;
    }
    #form input[type=submit]{
        width:104%;
    }
    #form textarea{
        width:102%;
    }
    .specialBox{
        width: 100%;
        float:none;
        margin-left: 0px;
        margin-right: 0px;
        text-align:center;
    }
    .specialBox h1{
        font-size:18px !important;
        width:100%;
        color:white;
        background-color:rgb(192, 0, 0);
        padding: 20px 0px;
        border-radius: 3px;
    }
    #slideshowContainer{
        height:440px;
    }
    #slideshowLeft{
        width:40px !important;
        height:40px !important;
    }
    #slideshowRight{
        width:40px !important;
        height:40px !important;
    }
    #slideshowCaptionHolder{
        left:50px !important;
    }
    #slideshowCaption{
        font-size: 20px !important;
    }
    #testimonialQuote{
        font-size:16px;
    }
    #news{
        float:left;
        width:290px;
        font-size: 14px;
        padding-bottom: 10px;
    }
    #contact{
        float:left;
        margin-top:17px;
        margin-left:0px;
    }
    #footer{
        height:240px;
    }
    .fa-home{
        display:none;
    }
    .fa-truck{
        display:none;
    }
    .fa-undo{
        display:none;
    }
    #header{
        height:50px;
        width:100%;
    }
    #logoPlaceHolder{
        width:167px;
        height:85px;
        background-size: cover !important;
        margin-top: 2px;
        margin-left:-16px;
        position:fixed;
        float:left;
    }
    #header h1{
        display:none;
    }
    #mobileHeader{
       display:block;
       float:right;
    }
    #mobileHeader h1{
        float:right;
        margin-top:8px;
        font-size: 6vw
    }
    #navBar{
        display:none;
    }
    #email{
        display:none;
    }
    .siteMarginTop{
        margin-top:161px !important;
    }
    #slideshow{
        display:none !important;
    }
    #mobileMenu{
        width:100%;
        display: none;
    }
    #mobileMenuHolder{
    }
    #menuHolder {
        float:left;
    }
   #mobileMenuButtonHolder {
        float:left;
        margin-top:80px;
        background-color:#E5E0DD;
        width:100%;
        border-bottom: 1px solid rgb(173, 173, 173);
   }
   #mobileMenuButtonContent {
        float:right;
   }
   #mobileMenuButtonContent a {
        float:right;
   }
    #portfolioPrevious , #portfolioNext{
        width:45px !important;
        height: 45px !important;
        opacity: 0.6 !important;
    }
 }

.fa-bars{
    font-size:22px;
}





























.portfolioThumbnail {
  float:left;
  height:174px;
  position:relative;
  margin-bottom:20px;
  background-size:cover;
  cursor:pointer;
  overflow:hidden;
}

.portfolioThumbnailName {
  padding:6px;
  background-color:#990000;
  color:#fff;
  position:absolute;
  bottom:0px;
  width:100%;
  display:none;
  height:auto;
  font-size:18px;
}

.portfolioThumbnailType {
  position:absolute;
  right:5px;
  top:5px;
  width:32px;
  height:32px;
  display:none;
  z-index:2000;
}

.typeicon {
  float:right;
  padding-right:12px;
  padding-top:3px;
}

.typeiconapp {
  font-size:22px;
}

.portfolioThumbnailTypewebsite {
  background:url("/images/web.png");
}

.portfolioThumbnailTypeapp {
  background:url("/images/app.png");
}

.portfolioThumbnailGreyscale {
  width:100%;
  height:100%;
  position:absolute;
  background-size:cover;
  opacity:1;
}

#screen {
  background-color:#000;
  position:fixed;
  display:none;
  z-index:50000;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}

#lightboxContainer {
  left:25px;
  right:25px;
  top:25px;
  bottom:25px;
  position:fixed;
  display:none;
  //background-color:#000;
  z-index:50001;
  overflow:hidden;
}

#lightboxContent {
  width:100%;
  height:100%;
}

#lightboxImageAndText {
  overflow:auto;
  width:100%;
  height:100%;
}
#lightboxImage {
  height:100%;
  display:block;
  overflow:hidden;
  position:relative;
}
#lightboxImageFrame {
  padding:1%;
  width:98%;
  height:98%;
  position:absolute;
}
#lightboxImageCanvas {
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  height:100%;
}
#lightboxText {
  background-color:#fff;
  color:#ddd;
  padding:10px;
  overflow:auto;
}
#lightboxText h2 {
  font-size:18px;
}

#lightboxCloseBar {
  text-align:right;
  padding:0px 0px 0px 0px;
}

#lightboxCloseBar, #lightboxCloseBar a {
  font-size:20px;
  color:#aaa;
  text-decoration:none;
}

#lightboxCloseBar a {
  -webkit-transition: all 0.5s;
  -o-transition-property: all;
  -o-transition-duration:0.5s;
  -moz-transition-property: all;
  -moz-transition-duration: 0.5s;
  transition-property: all;
  transition-duration: 0.5s;
}

#lightboxCloseBar a:hover {
  color:#fff;
}

#lightboxSiteLink {
  display:block;
  font-size:12px;
  color:#999;
  margin-bottom:10px;
}

#lightboxSlideDescription {
  color:#333;
  padding-right:5px;
}

#lightboxPageCounter {
  color:#aaa;
  bottom:0px;
  right:0px;
  position:absolute;
  text-align:right;
  font-size:10px;
  padding:10px;
}

#portfolioPrevious, #portfolioNext {
  width:63px;
  height:63px;
  display:block;
  background-size:contain;
  cursor:pointer;
  z-index:1000;
  opacity:0.6;
  -moz-opacity:0.6;
  position:absolute;
  top:46%;
}

#portfolioPrevious {
  background-image:url("/images/slideshowLeft.jpg");
  left:0px;
}

#portfolioNext {
  background-image:url("/images/slideshowRight.jpg");
  right:0px;
}

#lightboxImageFrame {
}
#lightboxImageFrame[id] {display: table; position: static;}
#lightboxMiddle {position: absolute; top: 50%;}
#lightboxMiddle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;height:100%;}
#lightboxImageCanvas {position: relative; top: -50%;}
#lightboxImageCanvas[id] {position: static;}

#lightboxSlideDescriptionMiddle{position: absolute; top: 50%;}
#lightboxText{position: relative; top: -50%;}
#lightboxSlideDescriptionOuter[id]{display: table; position: static;}
#lightboxSlideDescriptionMiddle[id]{display: table-cell; vertical-align: middle; width: 100%; position: static;height:100%;}
#lightboxText[id] {position: static;}

#lightboxSlideDescriptionOuter {
  width:25%;
  float:right;
  min-width:250px;
  color:#ddd;
  height:100%;
  overflow:auto;
  margin-left:10px;
}

#lightboxSlideDescriptionMiddle {
  height:100%;
}







@media only screen and (max-width: 690px) {
  #lightboxSlideDescriptionOuter {
  	width:100%;
  }
  #lightboxSlideDescriptionOuter { 
    float:none;
    height:50%;
    bottom:0px;
  }
  #lightboxImage {
    height:50%;
    top:0px;
  }
}



 #mobileMenu {
   overflow:auto;
   background-color:#1f1f1f;
 }
 #mobileMenu li, #mobileMenu ul {
   list-style:none;
   padding:0px;
   margin:0px;
 }
 #mobileMenu li:hover{
   background-color: rgb(68,68,68);
   color:black;
}
 #mobileMenu li a { 
   color:#aaa;
 }
 .pageSet {
   display:inline-block;
   padding:16px;
   right:0px;
   position:absolute;
   pointer:cursor;
   top:0px;
 }
 .pageSetLink, .pageSetSub a {
   display:block;
   position:relative;
   padding:16px;
   font-size:13px;
   border-bottom:1px dotted #444;
   cursor:pointer;
 }
 .pageSetSub {
   margin-left:20px !important;
 }

.popUpMenu {
    text-align:left;
    padding:2px;
    display:none;
    position:absolute;
    clear:left;
    width:251px;
    margin: 13px 0px 0px 2px;
    z-index:1000;
    background-color:#fff;
    border:1px solid #ccc;
    text-align:left;
}
.popUpMenu ul {padding:0px;margin:0px;overflow:auto;}
.popUpMenu li {float:none;width:220px;}
.popUpMenu ul a {float:none;width:100%;}


 div.wrap {
   width : 1400px;
   margin : 0px;
   text-align : left;
 }
 div#top div#nav {
   float : left;
   clear : both;
   width : 1400px;
   height : 52px;
 }
 div#top div#nav ul {
   float : left;
   width : 1400px;
   height : 52px;
   list-style-type : none;
 }
 div#nav ul li {
   float : left;
   height : 52px;
 }
 div#nav ul li a {
   border : 0;
   height : 52px;
   display : block;
   line-height : 52px;
   text-indent : -9999px;
 }
 div#header2 {
   margin : -1px 0 0;
 }
 div#video-header {
   height : 1400px;
   margin : -1px 0 0;
 }
 div#header2 div.wrap {
   height : 600px;
 }
 div#header2 div#slide-holder {
   z-index : 40;
   width : 1400px;
   height : 600px;
   position : absolute;
 }
 div#header2 div#slide-holder div#slide-runner {
   top : 0px;
   left : 0px;
   width : 1400px;
   height : 600px;
   overflow : hidden;
   position : absolute;
 }
 div#header2 div#slide-holder img {
   margin : 0;
   display : none;
   position : absolute;
 } 
 div#header2 div#slide-holder div#slide-controls {
   left : 0;
   top: 0;
   width : 1400px;
   height : 46px;
   display : none;
   position : absolute;
 }
 div#header2 div#slide-holder div#slide-controls p.text {
   float : left;
   color : #fff;
   display : inline;
   font-size : 10px;
   line-height : 16px;
   margin : 15px 0 0 20px;
   text-transform : uppercase;
 }
 div#header2 div#slide-holder div#slide-controls p#slide-nav {
   float : right;
   height : 24px;
   display : inline;
   margin : 11px 15px 0 0;
 }
 div#header2 div#slide-holder div#slide-controls p#slide-nav a {
   float : left;
   width : 6px;
   height : 6px;
   display : inline;
   font-size : 10px;
   margin : 0 3px 0 0;
   line-height : 20px;
   font-weight : bold;
   text-align : center;
   text-decoration : none;
   background-position : 0 0;
   background-repeat : no-repeat;
 }
 div#header2 div#slide-holder div#slide-controls p#slide-nav a.on {
   background-position : 0 -24px;
   color:#000;
   background-color:#fff;
   border:1px solid #000;
 }
 div#header2 div#slide-holder div#slide-controls p#slide-nav a {
   color:#fff;
   background-color:#000;
   border:1px solid #fff;
 }
 div#nav ul li a {
 }
 #slide-client {
   display:none;
 }
 #slide-nav a {
   color:#fff;
   background-color:#000;
 }
 #slideDescription {
   background-color:#000;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   padding:10px;
   font-size:10px;
   color:#fff;
   height:14px;
 }


#slideshowContainer {
  position:relative;
}

#slideshowBackgroundImage {
  background:no-repeat center center;
  background-size:cover;
  height:100%;
  width:100%;
  position:absolute;
  top:0px;
  z-index:0;
}

#slideshowContent {
  position:relative;
  height:550px;
  overflow:hidden;
}

#slideshowCaption {
  font-size:34px;
  text-transform:uppercase;
  color:#fff;
  background-color:rgba(0, 0, 0, 0.5);
  line-height:54px;
  padding:0px;
  box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
  -o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
}

#slideshowCaptionHolder {
  position:relative;
  top:100%;
  padding:10px;
  left:20px;
  z-index:998;
  width:70%;
}

#slideshowReadMore {
  display:inline-block;
  border:1px solid #fff;
  color:#fff;
  font-size:20px;
  padding:6px 10px 6px 10px;
  margin-top:20px;
  -webkit-transition: border-color 1s;
  -o-transition-property: border-color;
  -o-transition-duration:1s;
  -moz-transition-property: border-color;
  -moz-transition-duration: 1s;
  transition-property: border-color;
  transition-duration: 1s;
}

#slideshowReadMore:hover {
  border-color:#cc0000;
  text-decoration:none;
}

#slideshowLeft, #slideshowRight {
  width:63px;
  height:63px;
  position:absolute;
  display:block;
  top:218px;
  background-size:contain;
  cursor:pointer;
  z-index:5;
  opacity:0.3;
  -moz-opacity:0.3;
}

#slideshowLeft {
  background-image:url("/images/slideshowLeft.jpg");
}

#slideshowRight {
  background-image:url("/images/slideshowRight.jpg");
}

#slideshowLeft {
  left:0px;
}

#slideshowRight {
  right:0px;
}