/********** CookiePolicy **********/

div#stickycookiePolicy {
    width: 100%;
}

/********** MAIN NAV **********/ 

div#stickycookiePolicy {
    width: 100%;
}
a {
    text-decoration: none;
}

#toggleMainNav,
.toggleLeftNav {
    display: none
}


/********** BANNER ********/ 
body#home div#banner {
    width: 96%;
    height: auto;
    margin-left: auto;
    /* margin-right: -2%; */
    margin: 20px 32px 9px 27px;
    position: relative;
    z-index: 2;
}
div#banner .text {
    height: 75px;
}

.slick-slide {
    position: relative;
    overflow: hidden;
}
ul.slick-dots {
    position: absolute;
    bottom: 15px;
    list-style: none;
    text-align: right;
    right: 14px;
}

ul.slick-dots li {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 14px;
    margin: 0 9px;
    opacity: .55;
    color: #fff;
    padding: 0;
    cursor: pointer;
    text-indent: -5000px;
}

.slick-dots li button {
    /* font-size: 0; */
    /* line-height: 0; */
    display: block;
    width: 15px;
    height: 15px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    border: 1px solid white;
    background: transparent;
}

ul.slick-dots li button:hover:before,
ul.slick-dots li button:focus:before {
    opacity: 1;
}
ul.slick-dots li button:before {
    /* font-family: 'slick'; */
    /* font-size: 14px; */
    background-color: white;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    content: '';
    text-align: center;
    opacity: .05;
     
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: 1;

    background-color: white;
}
.slick-next, .slick-prev {
    display: none!important;
}
div.image img {
    width: 100%!important;
}
ol.proto-navigation li a{
    display: none;
}

/********** contentSections ********/ 

#home ul.contentSections li {
    width: 219px;
    margin: 19px 0 0 30px;
}
/********** FOOTER ********/ 
#siteLinksWrap, 
#productsWrap, 
#followUsWrap,
#customerCareWrap,
#contactUsWrap {
    display: none;
}

div#footer p {
    color: #7d7e7f
}

div.copy p {
    padding: 10px 0 30px 0;
}


@media all and (max-width: 1110px) {

    
    /********** HEADER **********/

    div#header {
        width: 96%;
        height: auto;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 90px;
        text-align: center;
    }
    body#commercial-awnings div#header {
        margin-bottom: 30px;
    }


    div#header h1,
    div#logo {
        margin-top: 50px;
        margin-left: 0 auto;
        margin-right: 0 auto;
        width: 100%;
        position: static;
        background-position: center
    }

    div#header h2 {
        top: 10px;
        position: relative;
        text-align: center
    }

    /********** SEARCH SOCIAL **********/

    #searchSocial {

        margin-left: 5%;
    }

    /********** SOCIAL NAVLIST **********/


    ul.socialNavList {
        position: relative;
        margin: auto;
        width: 100%;
        left: -133px;
        top: -4px;
    }

    ul.socialNavList li {
        width: 100%;
        height: auto;
    }

    div.search {
        position: static;
        margin: auto;
        border: 1px solid #aaa;
        border-radius: 15px;
        margin-top: 30px;
    }

    div#headerSearchForm {
        width: 40%;
    }

    #headerSearchForm > fieldset {
        position: absolute;
    }

    #headerSearchForm > fieldset > label div.search form input.text {}
    div.search form input.btn {
        right: -20px;
    }

    /********** MAIN NAV **********/

    
    div#mainNav {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 2000;
        height: 50px;
        background-color: white;
        -webkit-box-shadow: 0px 2px 44px -5px rgba(0, 0, 0, 0.30);
        -moz-box-shadow: 0px 2px 44px -5px rgba(0, 0, 0, 0.30);
        box-shadow: 0px 2px 44px -5px rgba(0, 0, 0, 0.30);
    }

    #toggleMainNav {
        display: block;
        line-height: 50px;
        color: #b12c1b;
        ;
        font-size: 14px;
        padding-left: 55px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: normal;
        position: relative;
        z-index: 2000;
    }

    #toggleMainNav i {
        position: absolute;
        left: 10px;
        font-size: 40px;
        top: 5px;
        webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .open #toggleMainNav i, .open #toggleLeftNav i {
        transform: rotate(90deg);
    }

    ul#mainNavList li a:link, ul#mainNavList li a:visited {
        height: 40px;
        padding: 0 0 0 10px;
        line-height: 40px;
    }

    div#mainNav h1 {
        display: block;
        width: 177px;
        height: 20px;
        text-indent: -5000px;
        background: transparent url('../images/layout/logoResp.png') left top no-repeat;
        position: absolute;
        z-index: 100;
        top: 15px;
        right: 50%;
        margin-right: -88.5px;
    }
    
    ul#mainNavList {
        position: fixed;
        width: 320px;
        height: auto;
        background: #e6eaed;
        top: 50px;
        z-index: 1000;
        left: -320px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition: transform 0.3s ease-in-out;
    }

    .open ul#mainNavList {
        -webkit-transform: translate3d(320px, 0, 0);
        transform: translate3d(320px, 0, 0);
        transition: transform 0.3s ease-in-out;
    }

    ul#mainNavList li {
        float: none;
        border-bottom: 1px solid white;
    }

    div#mainNav ul#mainNavList li.onPath a {
        background: #b12c1b;
    }

    ul#mainNavList li:first-of-type {
        border-top: 1px solid white;
    }

    /********** ContentWrap **********/

    div#contentWrap, 
    div#contentWrapNoLeft, 
    div#contentWrapWide {
        width: 98%;
    }
    body#home div#contentWrap, 
    div#contentWrap {
        width: 96%;
        height: auto;
        margin-top: 30px;
    }

    /********** CONTENT **********/


    div#content {
        width: 100%;
        margin: 0 auto 0 auto;
        padding: 0 0px 0 20px;
    }

    div#path {
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    
    #content > div.copy {
        height: auto;
        margin: auto;
        text-align: center;
        width: 100%;
    }
    #content > div.copy li {
        text-align: left;
    }


    #content #TWForm62Wrap form {
        margin: auto;
        width: 100%;
        
    }

    #TWForm62Wrap #content > div.copy ul {
        text-align: left;
        padding: 20px;
    }



    /********** BANNER **********/


   div#contentWrap div#content {
        width: 100%;
        padding: 0;
        margin: 0 auto!important
    }

    body#home div#banner, 
    div#banner {
        position: relative;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto
    }

    body#home div.bannerPhoto, 
    div.bannerPhoto {
        position: static;
        width: 100%;
        height: auto
    }

    body#home div.bannerPhoto div.image, 
    div.bannerPhoto div.image {
        position: static;
        width: 100%;
        height: auto
    }

    body#home div.bannerPhoto div.image img, 
    div.bannerPhoto div.image img {
        position: static;
        width: 100%;
        height: auto
    }

    body#home div.banner .frame, 
    div#banner .frame {
        width: 100%;
        height: auto;
        position: static;
    }

    body#home div.banner .text, 
    div#banner .text {
        box-sizing: border-box;
        height: 85px;

    }

    /********** CONTENT SECTIONS homepage **********/

    #home ul.contentSections, 
    ul.contentSections_inner {
        
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    #home ul.contentSections li, 
    ul.contentSections_inner li {
        width: 32%;
        height: auto;
        margin: 0 2% 30px 0;
    }

    #home ul.contentSections li:nth-of-type(3n+3), 
    ul.contentSections_inner li:nth-of-type(3n+3) {
        margin: 0 0 0 0;   
    }

    #home ul.contentSections li:nth-of-type(3n+1), 
    ul.contentSections_inner li:nth-of-type(3n+1) {
        clear: left;
    }

    #home ul.contentSections  li a, 
    ul.contentSections_inner li a {
        width: 100%;
        height: auto;
        
    }
    #home ul.contentSections li a img, 
    ul.contentSections_inner li a img {
        width: 100%;
        height: auto;
    }

    #content > div.copy td {
        margin: auto;
        text-align: left;
        
        padding:0;
    }

    #content > div:nth-child(2) > table {
        width: 100%!important;
        margin:10px 0 20px 0 !important;
    }

    #content > div:nth-child(2) > table > tbody > tr:nth-child(1) > td {
        width: 0!important;
        height: 0!important;
        padding-right: 2%; 
    }

    #content > div:nth-child(2) > table > tbody > tr:nth-child(1) > td img {
        width: 100%!important;
        height: auto!important;
    }

    /********** LEFT NAV **********/


    div#leftNav {
        width: 100%;
        margin: 0 auto;
        margin-top: 30px;
    }

    div#leftNav.open {
        max-height: 100%;
    }

    #leftNav .toggleLeftNav {
        height: 40px;
        display: block;
        background-color: #B12C1B;
        line-height: 40px;
        font-size: 18px;
        font-weight: 400;
        color: white;
        padding-left: 10px;
        text-decoration: none;
    }

    #leftNav .toggleLeftNav i {
        float: right;
        font-size: 36px;
        padding: 2px 5px;
        webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    /********** SIDE BAR **********/

    div#sidebar, .footerColumn {
        width: 100%;
        float: none;
        display: none;
    }

    div#sidebar.open, .footerColumn.open {
        display: block;
    }

    /********** LEFT NAV INNER **********/

    div#leftNavInner {
        background-color: lightgrey; 
    }

    body#commercial-awnings div#leftNavInner {
       position: static;
       margin-bottom: 30px; 
    }

    ul#leftNavList li a:link, ul#leftNavList li a:visited {
        color: #7d7e7f;
        font-size: 14px;
        line-height: 40px;
        display: block;
        text-decoration: none;
        height: 40px;
        padding-left: 40px;
        border-bottom: 1px solid white;
    }

    ul#leftNavList {
        padding-bottom: 0;
    }

    div#leftNavInner.open h3#hdInThisSection:after {
        content: "\f068";
        font-family: FontAwesome;
    }
    
    h3#hdInThisSection {
        position: relative;
        padding: 0 0 0 10px;
        border-bottom: 1px solid white;
        height: 40px;
        line-height: 40px;
    }


    /********** QUICK LINKS LIST **********/

    ul#quickLinksList {
        width: 100%;
        margin-top: 20px;
    }

    ul#quickLinksList li {
        width: 49%;
        margin: 0 2% 0 0;
        height: 300px;
        overflow: hidden;
        float: left;
        background-color: antiquewhite;
    }

    ul#quickLinksList li:last-of-type {
        margin: 0;
    }

    ul#quickLinksList li div.image {
        width: 100%;
        height: 300px;
        overflow: hidden;
        position: relative;
        top: -25px;
    }

    ul#quickLinksList li div.image img {
        width: 100%;
        position: relative;
        top: -130px;
    }

    ul#quickLinksList li span:last-of-type {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    ul#quickLinksList li h3 {
        padding-left: 20px;
        line-height: 40px;
        background-color: #FDB61F;
    }

    ul#quickLinksList li:last-of-type p {
        padding-left: 20px;
    }


    /********** Social NAV LIST **********/

    #leftNav > ul.socialNavList > li {
        display: none;
    }

    /********** FOOTER **********/

    div#footer {
        width: 96%;

        margin: auto;
    }

    div#footerInner {
        width:96%;
        padding: 20px;
        margin: 0 auto;
        overflow: hidden;
        background-color: #f0f0f0;
    }
    
    div.footerColumn {
        width: 100%;
        height: auto;
        float: left;
        text-align: left;
    }
    
    div.footerColumn.wide {
        width: 22%
    }

    div.footerColumn li a {
        height: 40px;
        line-height: 40px;
        background-color: cornsilk;
        margin-bottom: 1px;
        padding-left: 20px;
    }

    #siteLinksWrap,
    #productsWrap,
    #followUsWrap,
    #customerCareWrap,
    #contactUsWrap {
        width: 100%;
        border-bottom: 1px solid rgba(170, 170, 170, 0.4);
        font-size: 17px;
        line-height: 41px;
        display: block;
    }
    div.contactus {
        display: block;
        margin: auto;
        
        height: auto;
        text-align: center;
        margin-bottom: 10px;
    }

    div.contactus > p {
        padding: 15px;
    }

    div.contactus > p > a {
        padding: 20px;
        display: block;
        margin: auto;
    }


    div#footer h4 {
        display: none;
    }

    div#footerInner a i {
        float:right;
        color:#A8A8A8;
        line-height: 40px;
        font-size: 13px;
    }

    /********** Bottom  **********/

    div#bottomInner {
        width:96%;
    }

@media all and (max-width: 800px) {

  /********** CONTENT SECTIONS  **********/

    #home ul.contentSections, ul.contentSections_inner {
        width: 106%;
    }

    #home ul.contentSections li, 
    ul.contentSections_inner li {
        width: 46%;
    }

    #home ul.contentSections li:nth-of-type(3n+1), 
    ul.contentSections_inner li:nth-of-type(3n+1) {
        margin-left: 2%;
        clear: none;   
    }

    #home ul.contentSections li:nth-of-type(2n+1), 
    ul.contentSections_inner li:nth-of-type(2n+1) {
        margin-left: 0%;
        clear: left;
    }

    /********** banner **********/
    div#banner .text h2{
        font-size: 20px;
    }





    /********** FORM CONTACT PAGE*****/

    form.formWizForm label, form.formWizForm legend {
        display: block;
        margin: 0 0 7px 16px;
    }
    
    #content div.copy.dccom form.formWizForm ul {
        padding: 0 25px;
    }

    #content div.copy.dccom form.formWizForm ul li {
        width:90%;
        margin:auto;
        padding:30px 0 0 0;
    }

    #content div.copy.dccom form.formWizForm ul li label {
        padding-bottom: 10px;    
    }

    #content div.copy.dccom form.formWizForm ul li div.field div.sp2 {
        width: 100%;
        float: none;
    }

    #TWFormLI1dbcbcdb148700017c61105aec0017e2 > div > div:nth-child(2) {
        padding-top: 20px;
    }

    #twForm62name_fname {
        width:100%;
    }
    #content form.formWizForm ul li:nth-child(4) {
        top: 390px;
        margin-right: auto;
        margin-left: auto;
    }

    #content form.formWizForm ul li:nth-child(5) {
        top: 274px;
    }

    #content div#TWForm62Wrap.formWizFormWrap form.formWizForm ul li:nth-child(6) {
        margin-top: 22px;
        position: static;
    }

    #content div.copy.dccom div#TWForm62Wrap.formWizFormWrap form.formWizForm {
        height: 1115px;
    }

    form.formWizForm input {
        width: 98%!important;
        line-height: 35px;
    }

    #content form.formWizForm ul li:nth-child(4) {
        position:relative;
        top: 0;
        right: 0;   
    }

    body div.formWizFormWrap textarea {
        width: 100%!important;
    }

    #content form.formWizForm div.twFormFooter {
        width: 85%;
        margin-left: 6%;
    }

    form.formWizForm div.twFormFooter {
        margin-top: 26px;
        margin-left: auto;
        margin-right: auto;

    }

    #content form.formWizForm .submitBut {
        border-radius: 4px;
        right: 0px;
        border: 0;
        top: 20px;
        font-size: medium;
        padding:20px!important;
    }

    form.formWizForm .option {
        margin: 11px 0px 0px -8px;
        padding: 7px;
    }

    #pv1dbcc7277cd300015fe7cf6012e41e3fopts1 {
        width: 7%!important;
    }
    #TWFormLI1dbcc7277cd300015fe7cf6012e41e3f > div > div > label {
        padding-left: 10px
    }

    li#TWFormLI1dbcc7277cd300015fe7cf6012e41e3f {
        display: block;
        margin: 0 0 2px 22px;
    }

    /********** Footer **********/

    div#footerInner a i {
        margin-right: 2%;
    }

}


@media all and (max-width: 700px) {
    

    /********** CONTENT SECTIONS  **********/

    #content > div:nth-child(2) > table > tbody > tr:nth-child(1) > td img {
        display:none;
    }

    #content > div:nth-child(2) > table {
        height: 300px;
    }

    #content > div:nth-child(2) > table > tbody > tr > td {
        padding-left: 20px;
    }
    #content > div:nth-child(2) > table > tbody > tr {
        margin: auto;
    }
/********** quickLinksList **********/
    
    ul#quickLinksList li div.image img {
        top: -38px;
    }

}

@media all and (max-width: 550px) {

/********** CookiePolicy **********/

    div#stickycookiePolicy .inner {
        width: 50%;
        text-align: left;
        }
    div#stickycookiePolicy a.close {
        position: absolute;
        left: 99%;
        bottom: 16px;
        } 

/********** CONTENT SECTIONS homepage **********/
    
    #home ul.contentSections li, 
    ul.contentSections_inner li {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        float:none;
       
    }
    #home ul.contentSections li:nth-of-type(3n+3), 
    ul.contentSections_inner li:nth-of-type(3n+3) {
        margin-left: auto;
        margin-right: auto;
        clear: none;   
    }
    #home ul.contentSections li:nth-of-type(2n+1), 
    ul.contentSections_inner li:nth-of-type(2n+1) {
        margin-left: auto;
        margin-right: auto;
        clear: left;
    }
    #home ul.contentSections li:nth-of-type(3n+1), 
    ul.contentSections_inner li:nth-of-type(3n+1) {
        
        margin-left: auto;
        clear: none;
    }
    #content > div:nth-child(2) > table {
    
    margin: 10px 0 24px -38px !important;
    }
    div#banner .text h2 {
        font-size: 16px;
        font-style: 500;
    }
    div#banner .text p {
        display: none;
    }

    ul#quickLinksList li {
        width: 100%;
        margin: 0px 2% 30px 0;
        text-align: center;
    }
    ul#quickLinksList li p {
        text-align: left;
    }

}

@media all and (max-width: 500px) {

/********** CookiePolicy **********/


    div#stickycookiePolicy a.close {
        bottom: 28px;
    }