/*  ----------------------------------------------------------------------------------------------------------------------------------------------  */
/*  ------------------------------------------------------------------------------------------- For portrait tablets (600 wide - 32 for scrollbar)  */
/*  ----------------------------------------------------------------------------------------------------------------------------------------------  */

#navbtn {
    display: none;
    float: left;
    margin: 28px 0 0; 
    padding: 0 40px 0 0;
    width: 115px;
    background: #ff0000 url('../images/bg-navbtn.png') no-repeat right;
    font: 700 13pt/58px Lato, 'Lucida Grande', Verdana, sans-serif;
    text-align: right;
    text-transform: uppercase;
    overflow: hidden;
    color: #fff; 
    letter-spacing: 0;
    }
#navbtn:hover {
    background-color: #e40000;
}

@media screen and (max-width: 991px){


#container {
    background-size: initial;
}

body.pg-home #container {
    background: #443a2d url('../images/bg-container-home-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-previous #container,
body.pg-current #container,
body.pg-future #container {
    background: #666159 url('../images/bg-container-projects-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-gallery #container {
    background: #b49b85 url('../images/bg-container-gallery-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-contact #container {
    background: #ccc8af url('../images/bg-container-contact-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

.content {
    width: 568px;
}

header, 
#menubar .content {
    height: 300px;
}

#menubar{
    background-size: initial;
}

body.pg-home #menubar {
    background: url('../images/bg-menubar-home-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-previous #menubar,
body.pg-current #menubar,
body.pg-future #menubar {
    background: url('../images/bg-menubar-projects-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-gallery #menubar {
    background: url('../images/bg-menubar-gallery-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-contact #menubar {
    background: url('../images/bg-menubar-contact-tabport.jpg') no-repeat center top;
    background-size: 100%;
}

ul#menu {
    display: none; 
    position: absolute;
    width: 180px;
    top: 86px;
    right: 0;
    }
ul#menu li {
    display: inline;
    margin: 0;
    float: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    }
ul#menu li:last-child {
    float: none;
    }
ul#menu li a {
    padding: 0 20px 0;
    width: 100%;
    height: 50px; line-height: 50px;
    background: #e40000;
    text-align: left;
    color: #d1d1d1;
    letter-spacing: -0.5px;
    font-size: 11pt;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    text-shadow: 0 0 3px rgba(0,0,0,0.2);
    }
ul#menu li a:hover {
    color: #fff;
    background-color: #ff0000;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    }
ul#menu li:last-child a {
    float: none;
    border: none;
    }
ul#menu li ul, ul#menu li ul li {
    display: none;
    }

.pg-home ul#menu li.btn-home,
.pg-previous ul#menu li.btn-previous,
.pg-current ul#menu li.btn-current,
.pg-future ul#menu li.btn-future,
.pg-gallery ul#menu li.btn-gallery,
.pg-contact ul#menu li.btn-contact{
    border: none;
    }
.pg-home ul#menu li.btn-home a,
.pg-previous ul#menu li.btn-previous a,
.pg-current ul#menu li.btn-current a,
.pg-future ul#menu li.btn-future a,
.pg-gallery ul#menu li.btn-gallery a,
.pg-contact ul#menu li.btn-contact a {
    color:  #8a0000;
    cursor: default;
}
.pg-home ul#menu li.btn-home a:hover,
.pg-previous ul#menu li.btn-previous a:hover,
.pg-current ul#menu li.btn-current a:hover,
.pg-future ul#menu li.btn-future a:hover,
.pg-gallery ul#menu li.btn-gallery a:hover,
.pg-contact ul#menu li.btn-contact a:hover {
    background: #e40000;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#navbtn {
    display: block;
}   


#body .content {
    padding: 30px;
}

section.homeleft, section.homeright{
    float: none;
    padding: 0 0 30px;
    width: 100%;
    border: none;
}


ul.roxgal li{
    width: 225px;
}


footer .content{
    padding: 30px;
}
ul#footermenu li {
    display: block;
    width: 100%;
    }
ul#footermenu a {
    display: block;
    border-bottom: 1px dotted #555;
    }
ul#footermenu li a:hover {
    color: #000; 
}

ul#footermenu li.webdesign, ul#footermenu li.copyright {
    display: block;
    }
ul#footermenu li.webdesign:before, ul#footermenu li.copyright:before {
    padding-right: 0;
    content: " "
}
ul#footermenu li.copyright{
    float: none;
    padding: 10px;
}



#projects {
    margin-left: 0;
}

.projectlisting {
    float: none;
    margin: 0 0 30px;
    padding: 0 0 20px;
    width: 100% !important;
    background-color: transparent;
    border-bottom: 1px dotted #999; 
    }
.projectlisting img{
    float: left;
    width: 50%;
}
.projectlisting .summary {
    float: right;
    padding: 0 0 0 20px;    
    width: 50%;
    height: auto !important;
    background-color: transparent;    
}

[class~='projectlisting']:last-of-type {
    border: none;
}


.contactleft, table.contacts{
    float: none;
    width: 100%;
}





/*  ---end---  */
}