﻿@media all and (max-width:768px)
{
    body 
    {
        width:100%;
        max-width:768px;
        font-size:0.95em;
    }
    #main
    {
        width:100%;
        max-width:768px;
    }
    #topbar, #header
    {
        height:auto;
    }
    #topbar ul
    {
        display:none;
    }
    a.logo
    {
        margin:0 auto;
        padding:2%;
        width:300px;
        height:80px;
        display:block;
        float:none;
        background-size:100%;
        -moz-background-size:100%;
        -webkit-background-size:100%;
    }
    .row1, .indent8, .indent2, .indent7, .padding2
    {
        padding:2%;
    }
    #index_1 .row2 .column1, #index_1 .row2 .column2, #index_4 .row1 .column2, #index_4 .row1 .column1, #index_5 .row1 .column1, #index_5 .row1 .column1 .col3, #index_5 .row1 .column2
    {
        margin:0 0 3%;
        width:100%;
        display:block;
        float:none;
        overflow:hidden;
    }
    #index_2 .row1 .column1 
    {
      margin:0 0 2%;
      width: 100%;
    }
    #index_2 .row1 .col1 {
      margin-right: 2%;
      width: 28%;
    }
    #index_2 .row1 .col2
    {
        margin:0;
        width:70%;
    }
    #index_6 .row2 .column1
    {
        margin: 0 5% 0 0;
        width: 45%;
    }
    #index_6 .row2 .column2 {
      width: 50%;
    }
    #index_6 .row2 .column3
    {
        margin:0 auto;
        width:100%;
        display:block;
        float:none;
    }
    .aboutus ul li
    {
        margin:0 2% 2%;
        width:28.5%;
        display:inline-block;
        float:none;
    }
    .aboutus ul li img
    {
        width:100%;
        height:auto;
        max-width:210px;
        max-height:170px;
    }
    .roofs ul li, .walls ul li
    {
        margin:0 2% 2%;
        width:45.5%;
        display:inline-block;
        float:left;
    }
    .roofs ul li img, .walls ul li img
    {
        margin:0 auto;
        width:100%;
        height:auto;
        max-width:210px;
        max-height:170px;
        display:block;
    }
    li blockquote
    {
        padding:0;
        background:none;
    }
    .material_imgX768
    {
        width:200px;
        height:131px;
    }
    form .rowi, form .rowt
    {
        margin:0 0 0.5%;
        height:auto;
        overflow:hidden;
    }
    .input
    {
        padding:0.5%;
        width:89%;
        height:auto;
    }
    textarea
    {
        padding:0.5%;
        width:89%;
        height:100px;
    }
    .clear_768
    {
        clear:both;
        height:1px;
        margin:1% 0;
    }
    .padding_top
    {
        padding:0;
    }
    h1, h2, h3, h4, h5, h6
    {
        margin:0 0 2%!important;
        padding: 0 0 1%;
    }
    h1
    {
        font-size: 1.5em;
    }
    h2
    {
        font-size: 1.3em;
    }
    h3
    {
        font-size: 1.3em;
    }
    h4
    {
        font-size: 1.3em;
    }
    h5, .font_16
    {
        font-size: 1.2em;
    }
    h6, .subhead
    {
        font-size: 1.2em!important;
    }
    .slicknav_menu {
		display:block;
	}
}

@media all and (max-width:640px)
{
    .input, textarea
    {
        width:86.5%;
    }
}

@media all and (max-width:480px)
{
    .center-imageX480
    {
        margin:0 auto 2%;
        display:block;
        float:none;
    }
    .aboutus ul li
    {
        width: 45.5%;
    }
    #index_6 .row2 .column1, #index_6 .row2 .column2
    {
        margin:0 0 2%;
        padding:0 0 2%;
        width:100%;
        display:block;
        float:none;
    }
    .input, textarea {
      width: 82.5%;
    }
}

@media all and (max-width:360px)
{
    .material ul li, .material_imgX768
    {
        margin:2% auto;
        text-align:center;
        display:block;
        float:none;
    }
    .material ul li img
    {
    }
    .input, textarea 
    {
        width: 76%;
    }
    .lo_links
    {
        line-height:normal;
    }
    .lo_links span.fleft, .lo_links span.fright
    {
        margin:0 0 2%;
        text-align:center;
        line-height:normal;
        display:block;
        float:none;
    }
}

@media all and (max-width:320px)
{
    .aboutus ul li, .roofs ul li, .walls ul li
    {
        margin:2% auto;
        width:100%;
        text-align:center;
        display:block;
        float:none;
    }
    .input, textarea 
    {
        width: 73%;
    }
}