@charset "UTF-8";
    * {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #663;
}
ul {
    list-style: none;
}
html {background:#fff; /*#afa993;*/}
body {
    margin-top: 0;
    font-family:'AvenirLight',Arial, Helvetica, sans-serif;
    font-size: 87%;
background:url(images/bg-body2.png) repeat-x;
min-height:450px;
    }
#header {
    margin: 0 auto;
    position: relative;
    min-width: 980px;
    max-width: 1180px;
    height:52px;/*background-color:#d6dfe6;
    border-bottom:4px #fff solid;*/
}

#logo:hover {opacity:.7;}

/*#headerborder {
    background: #fff;
    width: 100%;
    height: 4px;
}*/
#mainnav {
    font-family:'AvenirLight',Arial, Helvetica, sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 500;
    width: 500px;
    font-size: .9em;
    height: 52px;
    line-height: 52px;
}

#mainnav ul li {
    float: left;
    padding: 0 16px;
}
#mainnav ul li:last-child {
    padding-right: 0;
}
#mainnav a {
    text-transform: uppercase;
    color:#666;
}
#mainnav a:hover {
    color: #fff;
}

#header .homenav {min-width:980px;
    max-width:1180px;}

#homenav {
    font-family:'AvenirLight',Arial, Helvetica, sans-serif;
    position: relative;
    width:576px;
    font-size: .9em;
    margin:0 auto;
    text-align:center;
    height: 52px;
    line-height: 52px;
    z-index:99999;
}


#homenav ul li {
    float: left;
    padding: 0 60px 0 0;
}
#homenav ul li:last-child {
    padding-right: 0;
}
#homenav a {
    text-transform: uppercase;
    color:#363636;
}
#homenav a:hover {
    color: #fff;
}

.portfolio.comm #menu1  {
    color: #fff;
}

.portfolio.res #menu2  {
    color: #fff;
}
.info.about #menu4  {
    color: #fff;
}
.info.services #menu6  {
    color: #fff;
}
.info.contact #menu5  {
    color: #fff;
}

/* **************************** HOME PAGE ************************************** */

#home #page {
	
}

.home {overflow-y:hidden;}


#homeBG {
	position:absolute;
	top:52px;
	left:0px;
	z-index:20;
	display:none;
	width:100%;
	height:100%;
	background:url(images/pineapple.png) no-repeat top left;
	background-size:contain;
}

#homeTagline {
	position:absolute;
	top:110px;
	left:0;
	width:100%;
	z-index:30;
	display:none;
	text-align:center;
}

#homeTextBlock {
	position:absolute;
	top:170px;
	left:0;
	z-index:40;
	display:none;
	width:100%;
	font-size:18px;
	line-height:30px;
	text-align:center;
	color:#666;
}

.hometext {max-width:900px;width:100%;text-align:center;margin:0 auto;}



#carousel {
	position:absolute;
	top:225px;
	left:0;
    width: 1072px;
    height: 715px;
    overflow: hidden;
    margin: 0 auto;
    opacity: 0;
    z-index:9999;
}
#carousel img {
    width: 1800px;
    height: 200px;
}

#homeDiv {
	position:relative;
}

#homeText {
	float:left;
	width:247px;
	
	background:url(images/bg-home.jpg) no-repeat;
	border-right:4px solid #fff;
	color:#fff;
}

/* *********************** Project Gallery ********************* */

#portfolio {
	max-width: 1180px;
	min-width: 980px;
	margin:50px auto;
}

#portfolio h1 {margin:0 0 .5em 1.5%;font-weight:200;color:#666;font-size:20pt;padding-left:15px;}

#portfolio h3 {margin:0 0 2em 1.5%;font-weight:200;color:#666;font-size:14pt;padding-left:15px;}

.portthumb {float:left;width:30%;margin:0 1.5% 0 1.5%;}

.portthumb:hover {opacity:.6;cursor:pointer;}

.portthumb img {width:100%;}

.portcaption {width:97%;text-align:center;height:3em;line-height:3em;}

.portdivider {clear:both;width:96%;margin:2em 0 3em 1.5%;border-bottom:1px solid #e5e5e5;}


/* *********************** Info Pages ********************* */

.pagebody {
	max-width: 1180px;
	min-width: 500px;
	margin:50px auto;
}

.pagetext {
	position:absolute;
	max-width: 1180px;
	min-width: 500px;
	top:0
	left:0;
	overflow:hidden;
	z-index:9999;
}

.contact .pagetext {width:100%;}

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {
.home {overflow:auto;}
}
.pagebody h1 {margin:0 0 .5em 20px;font-weight:200;color:#666;font-size:20pt;padding-left:15px;}

.pagebody h3 {margin:0 0 2em 20px;font-weight:200;color:#666;font-size:14pt;padding-left:15px;}

.pagebody p {margin:0 0 2em 20px;font-weight:200;color:#666;font-size:14pt;padding-left:15px;width:90%;}

.pagebody a:hover {color:#ccc;}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 700px) 
and (orientation : landscape)
{
/* Styles */
#homeTagline {top:100px;}
#homeTextBlock {top:180px;}
#carousel {bottom:20px;}
#homenav ul li {
    float: left;
    padding: 0 25px 0 0;
}
#homenav ul li:last-child {
    padding-right: 0;
}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 700px) 
and (orientation : portrait)
{
/* Styles */
#homenav ul li {
    float: left;
    padding: 0 25px 0 0;
}
#homenav ul li:last-child {
    padding-right: 0;
}
}

#home h2 {
	font-size:34px;
	margin-bottom:39px;
}

#galleria {
	width:397px;
	height:531px;
	overflow:hidden;
}


#projectarea h1 {
    font-size: 1em;
    margin: 0;
    padding: 0;
    font-weight: 300;
}
#projectarea {
    margin-top: 0;
    background: #fff;
    text-align: center;
    overflow: hidden;
    padding-top: 30px;
    width: 100%;
    position: relative;
    font-weight: 300;
    font-size: 1.4em;
    /*border-bottom:4px solid white;*/
    color:#807349;
}

.fotorama__thumb-border {border-color:#fff !important;}

/*#projectthumbs {
    margin: 10px auto;
    max-width: 1128px;
    overflow: hidden;
    position: relative;
}
.projectthumb {
    margin: 0 20px 40px;
    width: 240px;
    height: 180px;
    float: left;
    position: relative;
    cursor: pointer;
}
.thumboverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 180px;
    z-index: 5;
    background: url(images/thumb-selected.png) no-repeat;
    display: none;
}
.thumbcaption {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -15px;
    width: 240px;
    height: 20px;
    text-align: center;
    z-index: 10;
    color: #fff;
    font-size: 1.2em;
    letter-spacing: 1px;
    display: none;
}*/
.fotorama {
    width: 980px;
    margin: 0 auto;
}
#imagenav {
    font-size: .7em;
    color: #000;
    padding: 0 0 20px;
    width: 980px;
    text-align: center;
    margin: 0 auto;
}
#imagenav a {
    color: #000;
}

#prev {
    position: absolute;
    top: 45%;
    left: 50px;
    z-index: 99999;
    opacity: .5;
}
#next {
    position: absolute;
    top: 45%;
    right: 50px;
    z-index: 99999;
    opacity: .5;
}
.imagedesc {
    width: 800px;
    margin: 0 auto;
    padding: 0 20px 40px;
    text-align: left;
    font-size: .8em;
}

#footer {
    width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
}
#footermenu {
    width: 730px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
}
#footermenu ul {
    margin-top: 10px;
    margin-left: -18px;
}
#footermenu li {
    float: left;
    padding: 20px 40px;
    height: 40px;
    border-right: solid 1px #ccc;
    text-align: center;
}
#footermenu li:last-child {
    border: none;
    margin-right: 0;
    padding-right: 0;
}
#footermenu li a {
    color: #f7f7f7;
}
#footermenu li a:hover {
    color: #333;
}
#footer-copyright {
    color: #fff;
    font-size: 12px;
    padding: 0 0 12px 0;
    min-width: 980px;
    margin: 0 auto;
    text-align: center;
}


@media only screen and (device-width:768px) {

   

#header {
    width: 980px;
}

#logo img {
   
}



#wrapper {
    width: 980px;
    height: 441px;
}
.portfolio #wrapper {
    width: 980px;
    height: 421px;
}

#footer {
    width: 980px;
}
#footer-copyright {
    font-size: 12px;
    width: 980px;
    margin: 0 auto;
}

}