/* 1009px */

@media ( max-width: 1009px ) {
    
    .portfolioItemRight {
        max-width: 40em;
    }
    
    .portfolioItemRightBig {
        max-width: 40em;
    }
    
}







/* 960px */


@media ( max-width: 960px ) {
    
    .box1 {
        width: 100%;
    }
    
    .box2 {
        width: 100%;
    }
    
    .box3 {
        width: 100%;
        margin: 2em 25% 0 25%;
    }
    
    .whatCanIOffer .container {
    width: 100%;
    max-width: 39.5625em;
     }
    
    .latestSamples .container a:nth-child(2) img {
    width: 30%;
}
    
    .latestSamples .container a:nth-child(3) img {
    width: 30%;
    margin-left: 4%;
} 

     .latestSamples .container a:nth-child(4) img {
    width: 30%;
    margin-left: 4%;
} 
    
    .footer1 {
    width: 30%;
}
    .footer2 {
    width: 30%;
    margin-left: 8%;
}
    .footer3 {
    width: 30%;
}
    
     .nav-footer {
    width: 50%;
    padding-left: 9%;
        
}
     
    .contactForm h2 {
    font-size: 125%;
    text-align: center;
}
    
}











/* 940px */

@media ( max-width: 940px ) {
    .blog_article_logo {
    width: 50%;
    float: left;
}
    .blog_article {
    margin-top: 10.5%;
    width: 50%;
    padding: 1em;
    background-color: #fcfcfc;
    float: right;
}
}









/* 930px */

@media ( max-width: 930px ) {

   .nav-footer {
    width: 50%;
    padding-left: 9%;
        
}
    
}



/* 850px */

@media ( max-width: 850px ) {
    
    .main {
    font-size: 90%;
}
   
    
    .mainbanner p {
    font: 1em/1.5 'OpenSans-Regular', sans-serif;
    color: white;
    }
    
    .mainbanner p:first-child {
    margin: 1em;
    font: 1.17em/1.5 'OpenSans-Regular', sans-serif;
    text-transform: uppercase;
}
    
    #bannerLeft {
    background: url("../images/monitor.png") no-repeat center;
    margin: 0 auto;
    width: 14.1875em;
    height: 12.5625em;
    }
        
    #bannerRight {
    margin-top: 0em;
    width: 29em;
    float: right;
    }
    
    .footer1 {
    width: 100%;    
}
    
    .footer2 {
    margin: 0;
    width: 100%;  
}
    
    .footer3 {
    width: 100%;    
}
    
    .nav-footer {
    margin: 0 auto;  
    padding-left: 4%;
}


    .portfolioItemRight {
        max-width: 30em;
    }
    
     .portfolioItemRightBig {
        max-width: 30em;
    }
}





/* 780px */

@media ( max-width: 780px ) {
       .main {
    font-size: 75%;
}
    
    .menu {
    margin: 2.5em auto;    
}
    
    .contact {
    font-size: 100%;    
}
    
    .mainbanner {
    margin: 0 auto;
}
        
    #bannerLeft {
        background: url("../images/monitor_sm.png") no-repeat center;
    }
    
    #bannerRight {
        font-size: 0.9em;
        margin-top: 1.2em; 
    }
    
     .nav-footer {
    width: 100%;
    padding-left: 4%;
}
    
    .footer2 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    color: #4c7ca0;
        margin-top: 3em;
        margin-bottom: 0;
}
    
    .footer3 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    text-align: center;
    color: #4c7ca0;
        margin-top: 3em;
        margin-bottom: 0;
}
    
    .footer1 {
    width: 100%;    
}
    
    .footer2 {
    width: 100%;    
}
    
    .footer3 {
    width: 100%;    
}

    .nav-footer {
    margin-top: 5em;
    width: 14%;
    padding: 0;
}
    
    
}









/* 760px */

@media ( max-width: 760px ) {
    .mobile-nav-icon {
        margin: 1.5em;
        display: inline-block;
    }
    
    .menu {
        float: left;
        display: block;
        max-width: 8.5em;
        width: 100%;
        display: none;
    }
    
    .menu li {
        display: block;
    }
    
    .menu li a {
        display: block;
        border: 0;
    }
    
    .selected {
        border-bottom: none;
        padding: 0;
    }
    
    .logo {
        float: none;
        margin: 0 auto;
    }
    
    .contact {
        float: none;
        text-align: center;
    }
    
    footer .container {
        display: block;
    }
    
    .footer1 {
        float: none;
    }
    
    .footer2 {
        float: none;
        margin: 0 auto;
        margin-top: 3em;
    }
    
    .footer3 {
        float: none;
         margin: 0 auto;
        margin-top: 6.5em;
    }
    
  
}









/* 700px */
 
@media ( max-width: 700px ) {
    
    .mainbanner {
        padding: 0;
        height: auto;
        padding-bottom: 2em;
    }
   
    
    #bannerLeft {
        background: url("../images/monitor_sm.png") no-repeat center;
        margin: 0 auto;
        width: 100%;
        height: 12.5625em;
    }
    
     #bannerRight {
        margin: 0 auto;
        width: 100%; 
        max-width: 33em;
        font-size: 1em;
    
    }
    
    
    
    
    .footer2 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    color: #4c7ca0;
        margin-top: 3em;
        margin-bottom: 0;
}
    
    .footer3 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    text-align: center;
    color: #4c7ca0;
        margin-top: 3em;
        margin-bottom: 0;
}
    
    .footer1 {
    width: 100%;    
}
    
    .footer2 {
    width: 100%;    
}
    
    .footer3 {
    width: 100%;    
}

    .nav-footer {
    margin-top: 5em;
    width: 17%;
    padding: 0;
}
    
    .portfolioItemRight {
        max-width: 25em;
    }
    
    .portfolioItemRightBig {
        max-width: 25em;
    }
   
}










/* 640px */

@media ( max-width: 640px ) {
    
    
    
    .whatCanIOffer .container {
    width: 100%;
    max-width: 18.875em;
     }
    
    
    .box2 {
    width: 100%;
    margin: 1.5em auto;
    padding: 0;
    }
    
    .box3 {
    width: 100%;
    margin: 1.5em auto;
    padding: 0;
    }
    
    .nav-footer {
    width: 100%;
    padding-left: 7%;
}
    
    .contactForm h2 {
    font-size: 125%;
    text-align: center;
}
    
    .portfolioItemRight {
        max-width: 18em;
    }
    
    .portfolioItemRightBig {
        max-width: 18em;
    }
    
    .blog_article_logo {
    width: 50%;
}
    .blog_article {
    width: 50%;
    font-size: 50%;
    padding: 1em;
    background-color: #fcfcfc;
}

    
}








/* 500px */

@media ( max-width: 500px ) {
    
    .main {
    margin-top: 3em;
    }
    
    .logo {
    margin: 0 auto;
    padding-bottom: 1em;
    
    float: none;
    text-align: center;
}
    
   .contact {
    margin: 3em auto;
    float: none;
    text-align: center;
}
    
    .contact > h2 {
    max-width: none;
    width: 100%;
}
    
    .mainbanner {
    margin-top: 3em;
    padding: 0;
    height: auto;
    padding-bottom: 2em;
    box-shadow: none;
}

     .latestSamples .container a:nth-child(2) img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
    
    .latestSamples .container a:nth-child(3) img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
} 

     .latestSamples .container a:nth-child(4) img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
} 
    .nav-footer {
    margin-top: 5em;
    width: 33%;
    padding: 0;
}
    
    
    
      .footer2 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    color: #4c7ca0;
    margin-top: 3em;
    margin-bottom: 0;
}
    
     .footer3 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    text-align: center;
    color: #4c7ca0;
    margin-top: 5em;
    margin-bottom: 0;
}
    
    .contactFormDiv {
    max-width: 340px;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 3em auto;
}
    
    .contactForm input {
    max-width: 280px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
    .portfolioItemLeft {
    width: 100%;
        height: auto;
        margin-bottom: 1em;
}
    
    .portfolioItemRight {
        max-width: 40em;
    }
    
    .portfolioItemRightBig {
        max-width: 40em;
    }


}










/* 350px */

@media ( max-width: 350px ) {
    
    .main {
    font-size: 75%;
    margin-top: 0em;
}
    
    .logo {
    margin: 0 auto; 
    float: none;
    text-align: center;
}
    
        .contact {
    margin: 0 auto;
    float: none;
    text-align: center;
}
    
    .contact > h2 {
    max-width: none;
    width: 100%;
}

    .mainbanner {
        margin-top: 0;
    height: auto;
    padding-bottom: 2em;
    box-shadow: none;
    }
    
    #bannerRight {
    font-size: 0.68em;
    }
    
    .whatCanIOffer {
    padding: 0 2em;
    }
    
      .whatCanIOffer .container {
    width: 100%;
    max-width: 16.0625em;
     }

    .whatCanIOffer > h2 {
    font: 1.5em/1.5 'OpenSans-Bold', sans-serif;
    }
    
    .box1 {
    background-size: cover; 
    font-size: 85%;
    text-align: center;
        
    margin: 1.5em auto;
    
    }
    
    .box2 {
    background-size: cover; 
    font-size: 85%;
    text-align: center;
    margin: 1.5em auto;
    }
    
    .box3 {
    background-size: cover; 
    font-size: 85%;
    text-align: center;
    margin: 1.5em auto;
    }
    
    .nextProject {
    background: none;
}
    
    .nextProject h3 {
    font: 1.5em/1.5 'OpenSans-Bold', sans-serif;
    text-align: center;
    color: #4c7ca0;
}
    
    .latestSamples h3 {
    font: 1.5em/1.5 'OpenSans-Bold', sans-serif;
    text-align: center;
    color: #4c7ca0;
}
    
    .latestSamples .container a:nth-child(2) img {
    width: 100%;
    margin-left: 0;
}
    
    .latestSamples .container a:nth-child(3) img {
    width: 100%;
    margin-left: 0;
    margin-top: 2em;
} 

     .latestSamples .container a:nth-child(4) img {
    width: 100%;
    margin-left: 0;
    margin-top: 2em;
} 
    
    .footer2 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    color: #4c7ca0;
        margin-top: 3em;
        margin-bottom: 0;
}
    
    .footer3 h3 {
    font: 2em/1.5 'OpenSans-Light', sans-serif;
    text-align: center;
    color: #4c7ca0;
        margin-top: 3em;
        margin-bottom: 0;
}
    
    .footer1 {
    width: 100%;    
}
    
    .footer2 {
    width: 100%;    
}
    
    .footer3 {
    width: 100%;    
}

    .nav-footer {
    margin-top: 5em;
    width: 33%;
    padding: 0;
}
    
    
    .contactFormDiv {
    max-width: 300px;
    width: 100%;
    position: absolute;
    left: 0;
        right: 0;
        margin: 3em auto;
}
    
    .contactForm input {
    max-width: 260px;
        display: block;
        margin-left: auto;
        margin-right: auto;
}
    
    
}