/*
Theme Name: Camway New
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Design and Coded by Creating Pixels
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #e4e7eb!important;
}

.wrap{
    display: flex;
    flex-direction:row;
    position: absolute;
    top: 0;bottom: 0;
    left: 0;right: 0;
    overflow: hidden;
    -js-display: flex;
}

.container{
    min-height: 820px;
    margin: auto;padding: 0!important;
    background: #fff;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -js-display: flex;
}




/* ~~~~~~~~~~~~~
    NAV
~~~~~~~~~~~~~ */
.nav{
    position: relative;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -js-display: flex;
    background: linear-gradient(to left, #b3560b 0, #e36c0a 7px, #e88534 100%);
}

nav{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -js-display: flex;

}

#menu{display: none!important;}

nav ul{
    margin: 0 0 0 0;
    padding: 0;
    width: 80%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 30%;bottom: 0;
    left: 0;right: 0;
}

nav li{
    color: #fff;
    width: 100%;
    margin: 15px auto 15px 0;
    padding: 20px 20px;
    background: #763703;
    list-style: none;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

/* ------ */
    nav li a{
        color: #fff!important;
        text-decoration: none!important;}
    nav li:hover{background: #8e4204;}




/* ~~~~~~~~~~~~~
    Logo Page
~~~~~~~~~~~~~ */
#biglogo{
    width: 700px;
    height: 120px;
    position: absolute;
    margin: auto;
    top: 0!important;
}




/* ~~~~~~~~~~~~~
    Main CSS
~~~~~~~~~~~~~ */
#content{
}

#content #biglogo2{
    width: 100%;
    height: auto;
    text-align: center;
    margin: 210px 0 0 0;
}

#content .homelogo{
    width: 80%;
}

#content #biglogo2 .clients{
    margin: 10% 00 0;
}

#content #biglogo2 img{
}

#content #pagelogo{
    padding: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

#content h4{
    margin: 10px 0 20px 0;
    font-family: 'Hammersmith One', sans-serif;
}

#content ul{
    margin: 0 20px 10px 20px;
    padding: 20px 10px;
}

#content li{
    margin: 0 0 5px 0;
    padding: 0;
}

#content .picture{
    width: 100%;
    height: 150px;
    background: #ccc;
    margin-bottom: 20px;
    overflow: hidden;
}

#content .picture img{
    width: 100%;
    height: auto;
    margin-top: -70px;
}

#content .pagebuttons{
    color: #fff;
    padding: 0;
    text-align: right;
    margin-bottom: 20px;
}

#content .pagebuttons a{
    color: #fff;
    background: linear-gradient(to left, #e36c0a 7px, #e88534 100%);
    padding: 20px;
    margin-right: -13px;
}

/* Link Style for buttons */
    .pagebuttons a:link{
        color: #fff!important;
        text-decoration: none!important;
    }
    .pagebuttons a:visited{
        color: #fff!important;
        text-decoration: none!important;
    }
    .pagebuttons a:hover{
        color: #fff!important;
        text-decoration: none!important;
    }
    .pagebuttons a:active{
        color: #fff!important;
        text-decoration: none!important;
    }

#content .clients{
    text-align: center;
}

#content .clients img{
    max-height: 85px;
    height: auto;
    margin-bottom: 50px;
}

#content .iclogo{
    text-align: center;
    clear: both;
    padding: 50px 0;
}




/* ~~~~~~~~~~~~~
    News Page CSS
~~~~~~~~~~~~~ */
article{
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    background-position: bottom;
    background-image:("images/newsbg.png")
}

article h4{
    padding: 10px;
    margin: 0!important;
    background: linear-gradient(to left, #fff 7px, #ededed 60%);
}

article .readmore{
    background: red;
}

    article .readmore a{
        color: #fff;
        text-align: center;
    }

article .posted{
    margin-bottom: 10px;
}

.newspage{
    max-height: 700px!important;
}

th{
    color: #fff;
    padding: 20px 10px!important;
    background: #333;
    border-left: 1px solid #333!important;
    border-right: 1px solid #333!important;
    border-top: none!important;
    border-bottom: none!important;
}

td{
    font-size: 0.9em;
    padding: 15px 10px!important;
    border: 1px solid #f1f1f1;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 27%, #f4f4f4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 27%,#f4f4f4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 27%,#f4f4f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
}

td:hover{
    background: #ffffff!important;
}

td:nth-child(2){
    width: 35%!important;
}

/* COLOURS */
td:nth-child(1) a{
    color: #535353;
    font-weight: bold;
    text-decoration: none!important;
}
td:nth-child(2) a{
    color: #a3a3a3;
    text-decoration: none!important;
}
td:nth-child(3) a{
    color: #535353;
    text-decoration: none!important;
}
td:nth-child(4) a{
    color: #a3a3a3;
    text-decoration: none!important;
}
td:nth-child(5) a{
    color: #a3a3a3;
    text-decoration: none!important;
}

.pspacer{
    margin: 10px 0;
}

.ppostbox{
    margin: 20px 0;
    padding-top: 30px;
    border-top: 1px solid #ccc;
}



.newspage {margin: 0!important;padding: 0!important}
.newspage .col-md-6{margin: 0!important;padding: 0!important}
.nnews{
  margin: 20px 0!important;
  padding: 0!important;
}
.pnav {
}
.pnav a{
  color: #fff!important;
  padding: 10px 20px;
  background: #763703;
  text-decoration: none!important;
}
.posted{
  background: #fcfcfc!important;
  margin-bottom: 15px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  max-height: 740px;
  overflow-y:auto;
}
.posted button{
  margin: 10px;
  color: #fff;
  background: linear-gradient(to left, #e36c0a 7px, #e88534 100%);
  padding: 10px 20px;
  margin-right: -13px;
  border: none;
  outline: none;
}
.nnews h2{
  font-size: 1.2em;
  margin:  0 0 0 0!important;
  padding: 20px 10px!important;
  background: #e88534;
  border-left: 1px solid #e88534;
  border-right: 1px solid #e88534;
  font-family: 'Hammersmith One', sans-serif;
}
.nnews h2 a{
  color: #fff!important;
}

.nnews p{
  margin: 0!important;
  padding: 10px 10px!important;
}




/* ~~~~~~~~~~~~~
    Contact Page CSS
~~~~~~~~~~~~~ */
address{
    margin: 30px 0;
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
}



/* ~~~~~~~~~~~~~
    CLEAR FIX
~~~~~~~~~~~~~ */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
    .clearfix { display: inline-block; }
    /* start commented backslash hack \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* close commented backslash hack */





/* ~~~~~~~~~~~~~
    MOBILE
~~~~~~~~~~~~~ */
@media screen and (max-width: 1000px) {

    /* ~~~~~~~~~~~~~
        CONTAINERS
    ~~~~~~~~~~~~~ */
    .wrap{display: block;margin: auto;overflow: visible!important;}
    .container{display: block;height: auto;position: relative;padding-bottom: 30px!important;}
    .container-fluid{display: block;height: auto;padding: 0!important;}

    /* ~~~~~~~~~~~~~
        NAV
    ~~~~~~~~~~~~~ */
    #menu{
        padding: 20px;
        text-align: right;
        display: block!important;
        background: linear-gradient(to left, #b3560b 0, #e36c0a 7px, #e88534 100%);
    }
    .js{}

    nav{
        padding: 0!important;margin: 0;
    }

    nav ul{
        position: absolute;
        z-index: 1;
        width: 100%;
        padding: 0;margin: 0;
        height: 100%;display: none;
    }

    nav li{
        width: 100%;
        margin: 0;padding: 20px 10px;;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-bottom: 1px solid #b3560b;
    }

    /* ~~~~~~~~~~~~~
        NAV
    ~~~~~~~~~~~~~ */
    .ebb{
        padding: 0!important;
        height: auto!important;
    }

    .left{padding: 0!important;height: 100vh!important;margin: auto!important;}
    .middle{padding: 0!important;height: 100vh!important;margin: auto!important;}
    .right{padding: 0!important;height: 100vh!important;margin: auto!important;}

    /* ~~~~~~~~~~~~~
        TABLE
    ~~~~~~~~~~~~~ */
    table{
        margin-top: 20px;
    }

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;overflow: hidden!important;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
        clear: both
	}

	tr { border: 1px solid #ccc; margin-bottom: 20px; width: 100%!important;}

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding: 20px!important;
        width: 100%!important;
        clear: bothoverflow: hidden;
	}

    td:nth-child(1){padding: 40px 10px 20px 10px!important;}
    td:nth-child(2){padding: 40px 10px 20px 10px!important;width: 100%!important;}
    td:nth-child(3){padding: 40px 10px 20px 10px!important;}
    td:nth-child(4){padding: 40px 10px 20px 10px!important;}
    td:nth-child(5){padding: 40px 10px 20px 10px!important;}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 22px;
		left: 10px;
		width: 45%;
		white-space: nowrap;
        clear: both
	}

	/* Label the data */
	td:nth-of-type(1):before { content: "Project Name"; }
	td:nth-of-type(2):before { content: "Description of Works"; }
	td:nth-of-type(3):before { content: "Client"; }
	td:nth-of-type(4):before { content: "Date(s)"; }
	td:nth-of-type(5):before { content: "Value"; }
}
}




.ebb{
    height: 100vh;
    padding: 0 4vh;
    background-repeat:  repeat!important;
    background-image: url(images/wood.jpg)!important;
}

.left{
    height: 92vh;
    margin: 4vh 0 4vh 0;
    padding: 0;
    background: linear-gradient(to left, #b3560b 0, #e36c0a 7px, #e88534 100%);
}

#biglogo{
    width: 300px;
    height: 80px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


    .homelogo{width: 100%;height: auto;}
    .clients{
        float: left;
        padding: 0!important;
        width: 33.33333333333333%!important;
    }
.iclogo img{
    width: 90%;
}




.middle{
    padding: 0!important;
    height: 92vh;
    margin: 4vh 0 4vh 0;
    background: #f1f1f1; /* Old browsers */
    background: -moz-linear-gradient(left,  #f1f1f1 0%, #f1f1f1 0%, #ffffff 27%, #ffffff 46%, #ffffff 50%, #ffffff 69%, #f1f1f1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f1f1f1 0%,#f1f1f1 0%,#ffffff 27%,#ffffff 46%,#ffffff 50%,#ffffff 69%,#f1f1f1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f1f1f1 0%,#f1f1f1 0%,#ffffff 27%,#ffffff 46%,#ffffff 50%,#ffffff 69%,#f1f1f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#f1f1f1',GradientType=1 ); /* IE6-9 */
}



.right{
    height: 92vh;
    margin: 4vh 0 4vh 0;
    background: white;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+69,f1f1f1+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 69%, #f1f1f1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffffff 69%,#f1f1f1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffffff 69%,#f1f1f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=1 ); /* IE6-9 */
}