/*CSS Resets*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

/* Main Styles */
body{
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
}
.clear:before, .clear:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clear:after{clear: both;}
.clear{zoom: 1;}
.social{margin-top:10px;}
.soc{
position: absolute;
z-index: 100;
right: 30px;
top: 200px;
height: 32px;
width: 148px;
}
/*Front Page Styles*/
#container{
    width: 960px;
    margin: 150px auto;
    }

#right{margin-left:520px;}
#left, #right{
    float: left;
    width: 440px; 
    position: relative;
}
#left img, #right img{width:100%;}

.bw-img{ position: absolute; z-index: 5;}
.hover-img{position: absolute; top: 0px; left: 0px;}


/*Katalog Page Styles*/
#catalog #container{margin: 0 auto;}
#catalog #header{margin-bottom: 15px; margin-top: 30px;}
#catalog #menu{
    width: 440px;
    height: 191px;
    float: right;
    background: url(../images/kat-menu-bg.png) no-repeat; padding-top: 20px;
    }
#catalog #logo{
    padding: 30px 0 0 30px;
    width: 410px; 
    height: 161px;
    float: left;
    background: url(../images/kat-logo-bg.png) no-repeat;
    }


#catalog #menu .block{margin: 0px 30px 10px 30px; color: #ffffff;}
#catalog #menu .menu li{padding: 0; list-style: none; float: left; margin: 0 35px 0 0;}
#catalog #menu .menu li.last{margin-right: 0;}
#catalog #menu .menu li a{
    text-transform: uppercase;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}
#catalog #menu .menu li a.active{color: #ccc;}

#catalog #menu .menu li a:hover{color: #ccc;}

.sidebars #content, .sidebars #sidebar{float: left;}
.sidebars #content{width:645px; margin-right: 70px;}
.sidebars #sidebar{width: 245px;}
#catalog #content {color: #5a5f69; margin-bottom: 70px;}
#content h1{font-weight: normal; text-transform: uppercase; font-size: 24px; line-height: 24px;}
#catalog article{padding: 30px 0 30px 30px;}
#catalog article h2{font-size: 14px; margin: 20px 0 10px 0;}
#catalog article p, #catalog article ul{margin-bottom: 10px; }
#catalog article ul{list-style: inside; margin-left: 10px;}
#catalog article .webform-component label{text-transform: uppercase; margin: 20px 0 10px 2px; font-weight: normal;}
#catalog article .webform-component input{
        font-size: 12px;
        color: #fff;
        background: #5a5f69;
        border: none;
        padding: 3px 5px; height: 24px;
        }
#catalog article .webform-component input.error{border: 1px solid #ff0000 !important;}
#catalog article .webform-component textarea{
        font-size: 12px;
        color: #fff;
        background: #5a5f69;
        border: none;
        padding: 3px 5px;
        margin-left: 1px;
        }
#catalog article .form-actions .form-submit{
    background-color: #3399cc;
    color: #fff;
    text-transform: uppercase; 
    border: none;
    font-size: 12px;
    margin-top: 10px;
    padding: 10px 12px;
}        
#catalog .views-exposed-widget{width: 170px;}
#catalog .views-submit-button{width: 50px !important; float: right; padding: 0.5em 0 0 0;}
#catalog .view-filters{height: 55px; margin-bottom: 65px; color: #fff;}
#catalog .view-filters label{font-size: 12px; color: #5a5f69; font-weight: normal; text-transform: uppercase; margin-bottom: 10px;}
#catalog #edit-field-useful-area-value-wrapper{width: 160px;}
#catalog .form-item-field-useful-area-value-max label{display: inline; margin: 0 8px; float: left; line-height: 30px;}
#catalog .views-exposed-form .views-exposed-widget .form-submit{margin-top: 31px; width: 50px;}

#catalog .project-teaser{margin:0px 20px 23px 0px;}

#catalog .project-inner{margin: 20px 30px;}
#catalog .project-inner > .title{color: #5a5f69; font-size: 24px; margin-bottom: 30px; text-transform: uppercase;}
#catalog .project-inner > .gallery{float: left; width: 555px;}
#catalog .project-inner > .information{
    float: left;
    width: 165px;
    color: #5a5f69;
    line-height: 18px;
    }
  
#catalog #largeimg{height: 393px;}
#catalog .project-inner .gallery .gal-thumbs{margin-top: 20px;}
#catalog .project-inner .gal-thumbs .thumbnail{margin-right: 13px; cursor: pointer}
#catalog .house_plans{margin-top: 30px;}
#catalog .house_plans .file a{color:#3399cc; margin-left: 10px; font-weight: bold;}
#catalog .request{margin-top: 30px;}
#catalog .request a{
    display: block;
    padding: 8px 0px;
    background-color:#3399cc;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    width: 130px;
    letter-spacing: 1px;
    font-weight: bold;
    }
#catalog .request a:hover{
    background-color:#336699;
    }
#catalog #footer{
    position:fixed;
    bottom: 0px;
    z-index: 100;
    width: 960px;
    height: 71px;
    background: url(../images/kat-footer-bg-trans.png) no-repeat 0 0;
    }
#catalog #footer:hover{background-position: 0 -91px;}
#catalog .project-link{
   	display: block;
   	width: 225px;
   	height: 170px;
   	color: #fff;
   	font-size: 14px;
   	position: relative;
   }
#catalog .project-link > .information{
	position: absolute;
	z-index: 100;
	background: url(../images/kat-project-bg.png) no-repeat  0 0;
	width: 100%;
	height: 30px;
	padding-top: 15px;
	top: 125px;
	left: 0;
}  
#catalog .project-link:hover > .information{
	background-position: 0 -45px;
}
#catalog .project-link .information .title{margin-left: 10px;}
#catalog .project-link .information .area{margin-left 5px; font-weight: bold;}
#sidebar .block h2{
    text-transform: uppercase;
    font-size: 16px;
    font-weight: normal;
    color: #5a5f69;
    letter-spacing:  1px;
    margin-bottom: 30px;
    line-height:24px;
    }
#sidebar .block h2 a{color: #5a5f69; text-decoration: none;}
#sidebar .block h2 a:hover{color: #333;}
#catalog .pager{float: left; margin: 0;}  
#catalog .item-list ul li {margin: 0;}
#catalog .pager .pager-current{color: #fff; background: #3399cc; padding: 5px 8px; margin:0 0.5em;}
#catalog .pager li a{ color: #fff; text-decoration: none; padding: 5px 8px; background: #5a5f69; font-weight: 600;}  
#catalog .pager li.pager-first a,
#catalog .pager li.pager-last a,
#catalog .pager li.pager-next a,
#catalog .pager li.pager-previous a{background-color: #fff; color: #5a5f69;}
#catalog #footer .content{padding-top: 30px;}



/*Architecture Page Styles*/
#architecture{overflow: hidden;}

#architecture .item .container{
    bottom: 0px;
    position:absolute;
    color: #fff;
    font-size: 14px;
    margin-bottom: 90px;
    width: 35%;
    left: 30px;
    padding-left: 20px;
    text-shadow: 1px 1px #000;
    line-height: 21px;
    }
#architecture .item .container .title{
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 2px;
    }
 #architecture .item .container .description{
    letter-spacing: 0px;
    }  
#architecture #contact{
    position: absolute;
    z-index: 100;
    left: 30px;
    top: 30px;
    width: 347px;
    height: 191px;
    background: url("../images/arch-contact-bg.png") no-repeat top left;
}
#architecture #contact:hover{background-position: bottom  left;}
#architecture #contact .block .content{
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    margin: 20px 20px 20px 20px;
}
#architecture #contact .block .content a{color: #fff; text-decoration: none;}
#architecture #logo{
    position: absolute;
    z-index: 100;
    right: 30px;
    top: 30px;
    width: 347px;
    height: 154px;
    background:url("../images/arch-logo-bg.png") no-repeat top left;
}
#architecture #logo:hover{background-position: bottom  left;}
#architecture #logo .logo{margin: 75px 0 0 25px;}
#architecture #footer{
    position: absolute;
    height: 90px;
    bottom: 0;
    z-index: 100;
    width:100%;
}
#architecture #footer .content p{margin-top:15px;}
#architecture #c{width: 100%; height: 90px;}
#architecture .region{position: absolute; top: 20px; left: 0; width: 100%;}
#architecture .footer-wrap{position: relative;}
/*Footer styles for all website*/
#footer .content p{
    font-size: 18px;
    padding-top:17px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 2px;
    }
 
#footer .content p a{color: #fff; text-decoration: none;}

/*Custom carousel styles*/

html,body{height:100%; min-width: 480px;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}
.carousel-control{
    position:absolute;
    top:50%;
    left:30px;
    background: url("../images/arch-nav2.png");
    width:51px;
    height:100px;
    margin-top:-50px;
    display: block;
}
.right{left:auto;right:30px; background-position:  51px 0px;}
.left{background-position:  0 0;}
.right:hover{background-position:  51px -100px;}
.left:hover{background-position: 0px -100px;}

/*Mobile Optimization*/
@media only screen and (max-width: 1024px) {
     
#architecture #contact{
    position: absolute;
    z-index: 100;
    left: 10px;
    top: 10px;
    width: 251px;
    height: 138px;
    background: url("../images/arch-contact-bgm.png") no-repeat top left;
}
#architecture #contact:hover{background-position: bottom  left;}

#architecture #contact .region{top: -5px;}
#architecture #contact .block .content{
    font-size: 12px;
    line-height: 20px;
    margin: 20px 20px 20px 10px;}

#architecture #logo{
    position: absolute;
    z-index: 100;
    right: 10px;
    top: 10px;
    width: 251px;
    height: 111px;
    background:url("../images/arch-logo-bgm.png") no-repeat top left;
}
.soc{top: 130px; right: 10px;}
#architecture #logo:hover{background-position: bottom  left;}
#architecture #logo .logo{margin: 60px 0 0 15px;}
#architecture #logo .logo {width:216px; height: 26px;}
#architecture .item .container{
    width: 60%;
    }
}