/*Responsive Styles*/

@media screen and (max-width : 980px){
  
.wrapper {
    width:100%;
}

  
#filter {
    border-radius: 3px;
    padding: 9px 10px 9px 9px;
    width: 16em;
    border:none;
    background-color:#eaedf1;
}
  
  
#filtersubmit {
    position: relative;
    z-index: 1;
    top: 1px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
}


.col-1-1-3 {
    margin-right:1.1em;

}
    
}

@media screen and (max-width : 768px){
    
.wrapper {
    width:100%;
    }

#header {
    padding-bottom:0;
    padding-top:0;
}

#gatsby-logo {
    width:11em;
  
}

#btn-text {
    margin-bottom: 1%;
}

#btn {
    margin-top: 2%;
    padding:.7em;
   
    
}

    /*Make dropdown links appear inline*/
ul {
    position: static;
    display: none;
        
    }

/*Create vertical spacing*/
li {
    margin-bottom: 1px;
    }

/*Make all menu links full width*/
ul li, li a {
    width: 100%;
    margin-left:.5em;
        
    }
    
/*Display 'show menu' link*/
.show-menu {
    display:block;
    margin:-2px 10px 0 0;
    }

.menu-container {
    width:100%;
    float: none;
}

#search {
    display:none;
    
}

.caption {
    position:relative;
    top:-4px;
    background-color:#407cca;
    width:100%;
    height:10em;
   
    
}

.caption h {
    font-size: 1.6em;
    line-height:1.25em;
}

.caption p {
    font-size:1em;
    line-height:1.4em;
}

.caption h, .caption p {
    width:70%;
    display:inline-block;
    
}

.caption #btn {
    width:18%;
    float:right;
    margin:0;
    display:inline-block;
}

.cycle-next, .cycle-prev {
    display:none;
}

.cycle-next, .cycle-prev {
    font-size: 1.5em;
    top: 25%;
}

.cycle-pager {
    padding-bottom:9em;
}

#titlebar {
    display: block;
    height:1.5em;
    margin-top:2em;
}

#titlebar .line {
    float: left;
    border-top: 1px solid #C2C2C2;
    margin-top: .5em;
    width: 30%;
}

#titlebar #title {
    float: left;
    width: 40%;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1em;
    letter-spacing: 0.05em;
}


.logolist {
    width:22%;
    margin-left: 5%;
    margin-right: 5%;
}



.title-image {
    width:100%;
    display:block;
}

#about-home {
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

.title-image img {
    width: 95%;
    height:auto;
}

.col-1-1-3 {
    width: 46%;
    margin-right:4%;
    
}


#help {
    width:100%;
    padding:0;
}

#aboutus .wrapper, #services .wrapper, .footer .wrapper {
    width: 94%;
    padding:3%

}


#about {
    width: 100%;
}

#aboutus {
    padding-bottom:0;
}

#help-title {
    margin: 0;
    font-size:1.5em;
    
}

#help-desc {
    font-size:1em;
    line-height: 1.5em;
    padding-bottom:20px;
}

#left, #right {
    width: 100% !important;
}

#sample img {
    width:25% !important;
}

#sample-work {
    margin-top:50px !important;
}

}


/* Mobile */

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

p {
    font-size: 1em;
    line-height: 1.3em;
}

h {
    font-size: 2em;
}

#header {
    padding-top:0px;
    padding-bottom: 0px;
    
}

#mainnav {
    padding-bottom: 0;
}

#about, #help, .footer, #resources, #contact, #social, .col-1-1-3, #gatsby-logo img, .menu-container {
    width: 100%;
}

#gatsby-logo {
    width:11em;
    margin-left:1em;
    
}

.menu-container {
    float:none;
}

.show-menu {
    display:block;
    margin:-4px 3px 0 0;
}

.cycle-next, .cycle-prev {
    font-size: 1em;
    top: 18%;
}

.cycle-pager {
    top: 33%;
}

.caption {
    padding:1em;
    height:14em;
    max-width:360px;
}

.caption h {
    line-height:1em;
}

.caption h, .caption p {
    width:100%;
    text-overflow: ellipsis;
       
}

.caption #btn {
    float:none;
    margin-top:8px;
    width:10em;
}


#help-title {
    margin: 0;
    font-size:1.25em;
   
}

#help-desc {
    font-size:1em;
    padding-bottom:20px;
}

#btn-text {
    border-style: none;
    width: 85%;
    margin-bottom: 2%;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 0.75em;
    color: #4C4C4C;
}

#message-text {
    width: 85%;
    padding-bottom: 5%;
    padding-left: 1em;;
    padding-right:1em;
    padding-top: 8px;
}

.Learn_btn {
    font-weight: 400;
    font-size: 1em;
    line-height: 2em;
}

#btn {
    width: 10em;
    margin-top: 5%;
    padding:.7em;
    font-size: .8em;
    
}


#filter {
    border-radius: 3px;
    padding: 9px 7px;
    width: 95%;
    background-color:#eaedf1;
}


#filtersubmit {
    position: relative;
    z-index: 1;
    left: -25px;
    top: 1px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
}


#titlebar {
    display: block;
    height:1.5em;
    margin-top:1.5em;
}

#titlebar .line {
    float: left;
    border-top: 1px solid #C2C2C2;
    margin-top: .5em;
    width: 15%;
}

#titlebar #title {
    float: left;
    width: 70%;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1em;
    letter-spacing: 0.05em;
}

.logolist {
    width:10em;
    margin-left: 3%;
    margin-right: 3%;
}

#aboutus {
    padding-bottom:2.5em;
}


#help {
    padding-top: 5%;
  
}

h.title, .col-1-1-3, #aboutus .wrapper {
    margin-left: auto;
    margin-right: auto;
}

.col-1-1-3 {
    height:400px;
}
#aboutus .wrapper, #services .wrapper {
    width:90%;
    padding-top:8%
}


#services {
    padding-top: 8%;
    padding-bottom:5%;
}

.service-heading {
    font-size: 1.2em;
    font-weight: 600;
    padding-bottom:.3em;
}


/* START: footer */



.footer {
    padding-top:3%;
    padding-bottom:10%;
    margin-top:15%;
    
}

.footer .wrapper {
    width:90%;
}

.footer a{
    display: block;
}


#copyright{
    font-size:.85em;
}

#resources a, #contact a {
    color: #77777a;
    text-decoration: none;
    font-weight: 100;
    line-height:25px;
}

#contact, #resources a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

#sec-title {
    font-size:2.25em !important;
    padding-top:40px !important;
}

}