/* < 1024px Layout */

@media only screen
and (max-width : 1023px) {
    .width-container {
        width: 90%;
    }

    header {
        text-align: center;
    }

    header.iconic {
        height: 114px;
    }

    header.simple {
        height: 98px;
    }

    header .width-container {
        width: 100%;
        height: 114px;
        overflow: hidden;
    }

    .logo {
        float: none;
    }

    #main-nav {
        float: none;
    }

    #main-nav ul {
        width: 100%;
    }

    #main-nav li {
        width: 14.28571428571429%;
        min-width: 70px;
    }

    header.iconic #main-nav a {
        padding: 0 !important;
    }

    header.simple #main-nav a {
        padding: 21px 0 !important;
    }

    #options-panel .container {
        top: 32px;
    }

    #main-slider-container {
        padding: 85px 0px 0px 0px;
    }

    #main-slider-container .flexslider {
        height: 480px !important;
    }

    #main-slider-container .slides > li {
        height: 480px !important;
    }

    #main-slider-container .slides #grassy-lady{
        background-position: 36% 50%!important;
    }

    #main-slider-container .slides > li#dandelion {
        background-position: 100% center !important;
    }

    #main-slider-container .main-headings h1,
    #main-slider-container .main-headings h2 {
        font-size: 23px;
    }

    #main-slider-container .main-headings h1, #main-slider-container .main-headings h2 {
        width: 400px;
        padding: 10px 10px;
    }

    #main-slider-container .heading-connector1 {
        background-size: 391px 459px;
        background-repeat: no-repeat;
    }

    #main-slider-container .heading-connector2 {
        background-size: 377px 459px;
        background-repeat: no-repeat;
        float: none;
        margin-left: 22px;
    }

    #main-slider-container .main-headings {
        left: 40px;
    }

    #main-slider-container .sub-headings {
        top: 237px;
        left: 62px;
    }

    #main-slider-container .sub-headings h2 {
        width: 310px;
        margin: 0px 0px 10px 0px;
        font-size: 15px;
        padding: 11px 15px 10px 24px !important;
    }

    #main-slider-container .sub-headings span i {
        line-height: normal;
        margin-right: 8px;
    }

    #main-slider-container button {
        top: 400px;
        left: 150px;
        font-size: 16px;
    }

    #main-slider-container .flexslider .slides img {
        width: 25% !important;
    }

    #main-slider-container .flexslider .slides img#slide5-element {
        top: 68px;
        right: -270px;
        width: 650px !important;
    }

    #row1 .content-container .container:first-child {
        width: 100%;
    }

    .row .heading-container h1 {
        font: 900 43px 'Proxima Nova Alt';
    }

    .row .heading-container h2 {
        font: 400 22px/27px 'Proxima Nova';
        padding: 3% 2% 3% 5%;
    }

    .row .content-container h3 {
        font: 900 22px 'Proxima Nova Alt';
        margin: 0px 0px 30px 0px !important;
    }

    .row .heading-container,
    #row2 .heading-container {
        margin: 0px 0px 40px 0px;
    }

    #row1 .content-container .left.last {
        width: 100%;
    }

    #newsletter {
        font-size: 18px;
    }

    #newsletter span:first-child {
        font-size: 19px;
    }

    #newsletter input {
         font-size: 16px;
     }

    #row2 .content-container .container:first-child {
        width: 100%;
    }

    #row2 .content-container .left:first-child p {
        margin: 0px 0px 30px 8px;
    }

    #row2 .content-container .container.last h3 {
        margin: 0px 0px 20px 0px;
    }

    #row2 .content-container .container.last {
        width: 100%;
    }

    #row5 .content-container h3:first-child {
        margin-bottom: -15px !important;
    }

    #row6 .content-container .container:first-child {
        width: 100%;
    }

    #row6 .content-container .left:first-child p {
        width: 60%;
        float: left;
        margin: 0px 0px 0px 1.2%;
    }

    #row6 .contact-details {
        float: right;
        margin: -8px 0px 0px 0px;
        width: 35%;
    }

    #row6 .contact-details ul {
        margin: 0px 0px 0px 0px;
    }

    #row6 form {
        margin: 50px 0px 0px 0px;
    }

    #row6 .left.last {
        width: 100%;
    }

    #newsletter {
        width: 60%;
        height: 130px;
        margin: 5% auto 3%;
        padding: 20px 10px 0px 10px;
    }

    #newsletter input {
        width: 65%;
    }

    .button-container {
        width: 668px;
        margin: 7px auto 0px;
    }

    #notched-line {
        margin: 50px auto 0px;
    }

    #service-description-container {
        margin: 0px auto 35px;
    }

    .parallax-container {
        background-position: 50% 36%;
    }

    .parallax1 .testimonial-container p {
        font-size: 20px;
    }

    #process-container {
        width: 100%;
        margin: 20px 0px 50px 0px;
        background: none;
        height: 100%;
    }

    .process-grid {
        text-align: justify;
    }

    .process-grid li {
        width: 25%;
        display: inline-block;
        float: left;
        text-align: center;
        position: static;
    }

    .process {
        margin: 0 auto;
    }

    #skills-container {
        margin: 0px 0px 60px 0px;
    }

    .collapsable-items-container {
        margin: 0px 0px 0px 0px;
    }

    .collapsable-items-container .collapsable-item .hidden-container p {
        margin: 20px 0px 0px 15px;
    }

    #team-container .team-member {
        width: 23.125%;
        margin: 2.539% 0px 130px 2.5%;
    }

    #team-container .team-member img {
        width: 100%;
    }

    .parallax2 .width-container h1 {
        font: 900 35px 'Proxima Nova Alt';
    }

    .parallax2 .width-container h2 {
        font: 700 32px 'Proxima Nova Alt';
    }

    .parallax2 .width-container p {
        width: 95%;
        font: 400 16px/20px 'Proxima Nova';
    }

    .parallax2 button {
        margin: 5% 0px 0px 0px;
    }

    #gallery-container .gallery-options button {
        padding: 12px 2% 8px;
        margin: 0px 0px 0px 3%;
        font: 400 13px 'Proxima Nova';
    }

    #gallery-container .gallery-options:first-child {
        margin: 0px 0px 10px 0px;
    }

    #gallery-container .gallery-options {
        width: 100%;
    }

    #gallery-container .column-selector {
        float: right;
        clear: both;
    }

    #gallery-container .gallery-item-description {
        padding: 10px 0px;
    }

    #gallery-container .gallery-item-description p {
        font: 700 13px/15px 'Proxima Nova';
    }

    #gallery-container .plus-button {
        width: 60px;
        height: 60px;
        margin: 0px 0px 0px -30px !important;
        background-size: 60px 60px;
    }

    #gallery-container .three-cols .plus-button {
        top: 20px;
    }

    .parallax3 {
        background-position: 90% 50%;
    }

    #testimonials .testimonial p {
        font: 400 15px/20px 'Proxima Nova';
    }

    #testimonials .testimonial {
        margin: 40px 0px 0px 5%;
    }

    #testimonials {
        padding: 0px 0px 60px 20px;
    }

    .banner {
        font: 600 14px/25px 'Proxima Nova';
    }

    .banner button .icon-hand-right {
        display: none;
    }

    .banner button span:first-child {
        font: 700 20px/22px 'Proxima Nova';
        margin: 0;
        text-align: center;
        width: auto;
        float: none;
    }

    .contact-details ul li {
        width: auto;
    }

    footer #upper-footer .info {
        width: 100%;
        margin: 0px 0px 20px 0px;
    }

    footer #upper-footer .news {
        width: 50%;
        padding: 0px 0px 0px 0%;
        margin: 30px 0px 0px 0px;
    }

    footer #upper-footer .tweets {
        width: 50%;
        margin: 30px 0px 0px 0px;
    }

    footer #bottom-footer {
        height: auto;
        padding: 32px 0px 20px 0px;
    }

    footer #bottom-footer .width-container {
        text-align: center;
    }

    footer #bottom-footer .social-links {
        margin: 10px auto;
        height: 30px;
        width: 250px;
        float: none;
    }

    footer #bottom-footer span {
        float: none;
        margin: 0 auto;
    }

    footer #upper-footer .news h3 {
        margin: 0px 0px 0px 0px;
    }

    footer #upper-footer .news ul li {
        padding: 22px 10px 20px 0px;
    }

    footer #upper-footer .contact-details ul li .contact-detail {
        font: 600 14px/22px 'Proxima Nova';
    }

    footer #upper-footer .tweets .tweet-container ul li > span {
        font: 400 13px/17px 'Proxima Nova';
    }

    footer #upper-footer .tweets .tweet-container ul li .hashtag {
        font: 400 15px/17px 'Proxima Nova';
    }

    footer #bottom-footer .nav {
        margin: 0;
        float: none;
        display: inline-block;
    }

    footer .info p {
        width: 60%;
        float: left;
    }

    footer #upper-footer .info .contact-details {
        width: 30%;
        float: right;
        margin: 0;
    }

    .bx-wrapper {
        width: 565px !important;
        margin: 0 auto;
    }

    .bx-wrapper .bx-viewport {
        margin: 0px 0px 0px 0px !important;
    }

    .bx-wrapper .bx-prev {
        left: -45px !important;
    }

    .bx-wrapper .bx-next {
        right: -45px !important;
    }

    .gallery-inner-container {
        width: 76%;
        margin-left: -40%;
        top: 80px;
        height: 70%;
    }

    .portfolio-modal {
        padding: 20px 2%;
    }

    .portfolio-modal .image-area {
        margin: 0px 5.3% 0px 0px;
    }

    .portfolio-modal .image-area img {
        width: 100%;
    }

    .portfolio-modal .details h2 {
        margin: 15px 0px 10px 0px;
        font: 700 19px 'Proxima Nova';
    }

    .portfolio-modal .details p {
        font: 300 14px/19px 'Proxima Nova';
        margin: 15px 0px 20px 0px;
    }

    .portfolio-modal .collapsable-items-container {
        width: 100%;
        clear: both;
        margin: 20px 0px 0px 0px;
    }

    .portfolio-modal .collapsable-items-container .collapsable-item h4 {
        font: 400 20px/26px 'Proxima Nova Alt';
    }

    .portfolio-modal .collapsable-items-container .collapsable-item button {
        width: 20px;
        height: 20px;
        font: 900 21px 'Proxima Nova Alt';
        line-height: 22px;
    }

    .portfolio-modal .collapsable-items-container .collapsable-item {
        padding: 0px 0px 6px 0px;
        margin: 19px 0px 0px 0px;
    }

    .portfolio-modal .hidden-container ul {
        font: 300 15px 'Proxima Nova';
    }

    .gallery-inner-container .close-button {
        margin: 2px 2px 0px 0px;
        position: absolute;
        right: 0px;
    }
}

/* 768px < x < 1024px Layout */

@media only screen
and (min-width : 768px) and (max-width : 1024px) {
    .logo{
        padding: 0px 0px 10px 0px !important;
    }

    .row .heading-container .container {
        width: 46%;
    }

    .row .heading-container h1 {
        font-size: 46px;
    }

    .row .heading-container h2 {
        width: 47%;
        margin: 0px 0px 0px 46%;
    }

    footer .info p {
        width: 45%;
        float: left;
    }

    footer #upper-footer .info .contact-details {
        float: left;
        margin: 0;
        margin-left: 5%;
    }
}

/* < 768px Layout */

@media only screen
and (max-width : 767px) {
    .logo{
        padding: 0!important;
    }

    header,
    header .width-container {
        height: 85px !important;
    }

    .bx-wrapper {
        width: 375px !important;
    }

    .options h5:first-child {
        display: none;
    }

    .options .menu-style {
        display: none;
    }

    .tinynav {
        display: block;
        width: 31.25% !important;
        margin: 10px auto 0px !important;
        background: #707070 url("../images/arrow-dropdown.png") no-repeat 95% 50%;
        height: 35px;
        line-height: 35px;
        font: 600 14px 'Proxima Nova';
        padding: 9px 10px;
        color: #fff;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
        border-radius: 0px;
    }

    .tinynav::-ms-expand {
        display: none;
    }

    #main-nav ul {
        display: none;
    }

    .button-container {
        width: 430px;
    }

    .button-container button {
        width: 74px;
        height: 74px;
        -webkit-border-radius: 37px;
        -moz-border-radius: 37px;
        border-radius: 37px;
        font-size: 34px;
    }

    .button-container .button1 button {
        margin: 50px 15px 0px 0px;
        padding: 0px 0px 0px 10px;
    }

    .button-container .button1 span {
        bottom: -22px;
        left: 41px;
    }

    .button-container .button2 button {
        margin: 25px 15px 0px 0px;
        padding: 2px 0px 0px 0px;
    }

    .button-container .button2 span {
        bottom: -24px;
        left: 30px;
    }

    .button-container .button3 button {
        margin: 9px 15px 0px 0px;
        padding: 1px 0px 0px 2px;
    }

    .button-container .button3 span {
        bottom: -28px;
        left: 23px;
    }

    .button-container .button4 button {
        margin: 25px 15px 0px 0px;
        padding: 2px 0px 0px 0px;
        font-size: 34px;
    }

    .button-container .button4 span {
        bottom: -26px;
        left: 11px;
    }

    .button-container .button5 button {
        margin: 50px 0px 0px 0px;
        padding: 0px 0px 10px 2px;
        font-size: 34px;
    }

    .button-container .button5 span {
        bottom: -23px;
        left: 2px;
    }

    #notched-line {
        width: 426px;
        background-size: 426px 494px;
    }

    #service-description-container {
        width: 100%;
    }

    .row .content-container .service-description.default {
        margin-left: 0px;
    }

    .row .content-container .service-description.default p {
        width: auto;
        padding: 0px;
    }

    .row .content-container .service-description.default span {
        display: none;
    }

    .row .heading-container {
        border-bottom: none;
    }

    .row .heading-container h1 {
        border-bottom: 1px solid;
        width: 100%;
        text-align: center;
    }

    .row .heading-container .container{
        width: 100%;
        position: static;
    }

    .row .heading-container table {
        width: 100%;
    }

    .row .heading-container h2 {
        border-left: none;
        width: 93%;
        margin: 0px;
        text-align: center;
    }

    #newsletter {
        width: 80%;
    }

    .process {
        width: 90px;
        height: 90px;
    }

    .process-wrap, .process-info {
        width: 70.5px;
        height: 70.5px;
    }

    .process-wrap {
        top: 10px;
        left: 10px;
    }

    .process-grid li {
        width: 25%;
        height: auto;
    }

    .process-info-front p {
        line-height: 70.5px !important;
        font-size: 14px !important;
    }

    .process-info-back p {
        font: 600 9px/10px 'Proxima Nova' !important;
        width: 90%;
    }

    .process-info-back p.threelines {
        padding-top: 20px;
    }

    .process-info-back p.fourlines {
        padding-top: 15px;
    }

    .parallax1 .testimonial-container {
        width: 455px;
        padding: 0px 0px 0px 15px;
    }

    .parallax1 .testimonial-container .quote-mark {
        font-size: 60px;
    }

    .parallax1 .testimonial-container p {
        width: 90%;
        line-height: 28px;
        font-size: 18px;
    }

    .parallax1 .testimonial-by-container {
        width: 23%;
        right: 10px;
    }

    .parallax1 .testimonial-by-container .testimonial-by {
        font-size: 18px;
    }

    .parallax1 .testimonial-by-container span {
        margin-left: 10px;
    }

    #gallery-container .two-cols .plus-button {
        width: 50px;
        height: 50px;
        background-size: 50px 50px;
        top: 25%;
        margin: 0px 0px 0px -25px !important;
    }

    .portfolio-modal {
        padding: 0px;
    }

    .portfolio-modal .image-area {
        width: 90%;
        margin: 20px auto 0px;
        float: none;
    }

    .portfolio-modal .details {
        width: 90%;
        margin: 0 auto;
        float: none;
    }

    .portfolio-modal .collapsable-items-container {
        width: 90%;
        clear: both;
        margin: 0 auto;
        float: none;
    }

    footer #upper-footer .news {
        width: 100%;
    }

    footer #upper-footer .news ul {
        width: 100%;
    }

    footer #upper-footer .news ul li.last button {
        margin: 0px 46px 0px 0px;
    }

    footer #upper-footer .news h3 {
        margin: 0px 0px 0px 0px;
    }

    footer #upper-footer .tweets {
        width: 100%;
    }

    footer #upper-footer .news ul li {
        padding: 22px 10px 40px 0px;
    }
}

/* < 600px Layout */

@media only screen
and (max-width : 600px) {
    #gallery-container .two-cols .plus-button {
        top: 10%;
    }
}

/* < 480px Layout */

@media only screen
and (max-width : 480px) {
    .logo h1 {
        font-size: 21px;
    }

    .row {
        padding: 45px 0px 45px;
    }

    #options-panel .container {
        width: 175px;
    }

    #options-panel.hide {
        left: -175px;
    }

    #options-panel .container .toggle-button button {
        width: 25px;
        height: 28px;
        right: -25px;
        font-size: 19px;
    }

    #options-panel h4 {
        font-size: 15px;
        height: 28px;
        line-height: 29px;
        padding: 0px 0px 0px 10px;
    }

    #options-panel .container .options h5 {
        margin: 0px;
    }

    #options-panel .container .options {
        padding: 10px;
        font-size: 16px;
        color: #fff;
    }

    #main-slider-container .flexslider {
        height: 380px !important;
    }

    #main-slider-container .slides > li {
        height: 380px !important;
    }

    #main-slider-container .slides #grassy-lady{
        background-position: 43% 64%!important;
    }

    #main-slider-container .main-headings h1, #main-slider-container .main-headings h2 {
        width: 231px;
        padding: 6px;
    }

    #main-slider-container .main-headings h1 {
        font-size: 18px;
    }

    #main-slider-container .main-headings h2 {
        font-size: 13px;
    }

    #main-slider-container .heading-connector1 {
        background-size: 273px 459px;
        height: 10px;
    }

    #main-slider-container .heading-connector2 {
        background-size: 290px 445px;
        margin-left: 9px;
        height: 12px;
    }

    #main-slider-container .main-headings {
        left: 40px;
        top: 80px;
    }

    #main-slider-container .sub-headings {
        left: 49px;
        top: 163px;
    }

    #main-slider-container button {
        width: 108px;
        height: 27px;
        font-size: 14px;
        line-height: 27px;
        top: 300px;
        left: 109px;
    }

    #main-slider-container .sub-headings h2 {
        font-family: 'Proxima Nova Condensed';
        width: 216px;
        padding: 7px 5px 6px 5px !important;
        font-size: 13px;
    }

    #main-slider-container .sub-headings span i {
        font-size: 8px;
        margin: 2px 3px 0px 0px;
    }

    #main-slider-container .flex-direction-nav a {
        width: 35px !important;
        height: 41px !important;
        background-size: 73px 41px !important;
    }

    #main-slider-container .flexslider .slides img#slide5-element {
        top: 47px;
        right: -220px;
        width: 500px !important;
    }

    .button-container {
        width: auto;
    }

    .row .content-container .service-description.default {
        margin-left: 0px;
    }

    .row .content-container .service-description h3 {
        padding: 12px 0px 0px;
    }

    .row .content-container .service-description p {
        padding: 0px 0px 0px 0px;
    }

    .row .content-container .service-description.default p {
        text-indent: 30px;
    }

    .row .content-container .service-description.default span {
        display: none;
    }

    #main-slider-container > img:first-child {
        top: 300px;
    }

    #main-slider-container #slide2-element {
        top: 82px;
        right: 0px;
    }

    #main-slider-container #slide3-element {
        top: 59px;
        right: 30px;
    }

    .gallery-inner-container {
        height: 80%;
        padding: 20px 0px;
    }

    .row .heading-container h1 {
        padding-bottom: 5px;
        font-size: 46px;
    }

    .row .heading-container h2 {
    }

    .parallax3 .width-container p {
        width: 90%;
    }

    #service-description-container {
        width: 90%;
    }

    #newsletter {
        width: 80%;
    }

    #newsletter span:first-child {
        font-size: 17px;
    }

    #newsletter span {
        font-size: 17px;
    }

    .parallax1 {
        background-position: 64% 36%;
    }

    .parallax1 .testimonial-container .testimonial {
        width: 71%;
    }

    .parallax1 .testimonial-container {
        width: 400px;
    }

    .parallax1 .testimonial-by-container {
        width: 26%;
    }

    .parallax1 .testimonial-container p {
        font-size: 16px;
    }

    .parallax1 .testimonial-by-container .testimonial-by {
        font-size: 17px;
    }

    .parallax1 .testimonial-by-container .testimonial-by-location {
        font-size: 17px;
    }

    .parallax2 .width-container {
        padding-top: 15px;
    }

    .parallax2 .width-container h1 {
        font: 900 32px 'Proxima Nova Alt';
    }

    .parallax2 .width-container h2 {
        font: 700 30px 'Proxima Nova Alt';
    }

    .parallax2 .width-container p {
        font: 400 15px/18px 'Proxima Nova';
    }

    #row2 .content-container .container.last {
        padding: 0px 0px 40px 0px;
    }

    .portfolio-modal .image-area {
        margin: 0px auto;
    }

    #team-container .team-member {
        width: 47.5%;
    }

    #testimonials {
        padding: 0px 0px 60px 0px;
    }

    #testimonials .testimonial {
        width: 95%;
        margin: 40px 0px 0px 0px !important;
    }

    .contact-details ul li,
    footer #upper-footer .contact-details ul li {
        padding: 10px 10px 10px 30px;
    }

    .contact-details ul li .contact-detail {
        font: 400 13px/15px 'Proxima Nova';
    }

    .banner {
        font: 600 17px/22px 'Proxima Nova';
    }

    .banner button span:first-child {
        font: 700 17px/22px 'Proxima Nova';
        width: 80%;
        padding: 0px 10%;
    }

    footer #upper-footer .contact-details ul li .contact-detail {
        font-size: 13px;
    }

    .portfolio-modal {
        padding: 0px;
    }

    .gallery-inner-container .close-button {
        font-size: 17px;
        margin: -16px 0px -10px 0px;
        position: absolute;
        right: 0px;
        top: 20px;
    }
}