@charset "utf-8";
/* CSS Document */
body, html {height: 100%; width: 100%;}
body {background:url(../img/bg.jpg) repeat-x fixed  ; font-family:'Open Sans', sans-serif; font-size: 12px; }
.wrapper {min-height: 100%; max-width: 1000px; margin: 0 auto; position: relative; }
.wrapper:after {content: ''; height:40%; width: 100%;  position: absolute; bottom: 70px; left: 0; z-index: -1; background:#fff}

header {}
header .logo {margin:10px 20px}
header h2{background:url(../img/icon-phone.png) no-repeat; padding-left:65px; font-size:36px; line-height:54px; font-weight:normal; float:right; margin:60px 20px 30px 20px; color:#fff}
.nav {background:#b92120}
.nav{display: block; font-size: 0;}
.nav li {display: inline-block; font-size: 18px; margin: 0; position: relative;}
.nav li a {display: block; padding: 15px 19px; color: #fff;  text-align: center; color:#fff }
.nav  li a:hover, nav  li a.active {background: #7a1616; color: #fff;}

/* --- Submenu -- */
.nav li ul {display: block; z-index: 1000; height: 0; overflow: hidden; position: absolute; left:-97px; top: 130%; width: 220px;background:#b92120;  border-bottom: none; text-align: left; box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.8); opacity: 0;
	-webkit-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -moz-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -ms-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
     -o-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
        transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); /* custom */
}
.nav li ul li {display: block;}
.nav li ul a {border-bottom: 1px solid #ddd; border-right: none; text-align: left; text-decoration:none}
.nav li:hover ul { top:100%; opacity: 1; z-index: 100; height: auto;
	-webkit-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -moz-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -ms-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
     -o-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
        transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); /* custom */
}
.middle{ padding-bottom:70px; position: relative}
.content{background:#fff; margin:0px; padding:30px 20px 50px 20px; height:100%}
.content-bottom{background:#fff; margin:0px; padding:10px 20px 10px 20px; height:100%}
.content-bottom-50{background:#fff; margin:0px; padding:10px 20px 50px 20px; height:100%}
.top-strip{background: url(../img/strip-bg.gif) repeat-x; background-color:#fff;  min-height:119px; padding:25px 30px; font-weight:600;}
.top-strip h1{font-weight:600;}
.icon-nav {background:#fff; padding: 0px 9px 40px 9px;  font-size: 16px; font-weight: bold; text-transform: uppercase; color: #999; }
.icon-nav ul {display:table; font-size: 0;}
.icon-nav ul li {font-size: 16px; display:table-cell;}
.icon-nav ul li a {display: block; color: #999; padding:18px 11px; text-align: center; position: relative; word-break:normal;
-webkit-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
   -moz-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
    -ms-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
     -o-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
        transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
   -moz-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
    -ms-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
     -o-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
        transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); /* custom */
}

.icon-large {height: 120px; width: 120px; vertical-align: top; display: inline-block; background: url(../img/icon-sprite.png) no-repeat; }
.icon-large.icon-storey {background-position: 0 0 ;}
.icon-large.icon-extensions {background-position: -130px 0;}
.icon-large.icon-granny {background-position: -265px 0;}
.icon-large.icon-patios {background-position:-5px -125px;}
.icon-large.icon-decks {background-position:-140px -125px;}
.icon-large.icon-kitchen {background-position:-265px -125px; }

.icon-nav ul li a .icon-large {display:block; margin:0 auto 10px auto; position: relative;
-webkit-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
   -moz-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
    -ms-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
     -o-transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); 
        transition: all 500ms cubic-bezier(0.980, 0.010, 0.410, 1.005); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
   -moz-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
    -ms-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
     -o-transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); 
        transition-timing-function: cubic-bezier(0.980, 0.010, 0.410, 1.005); /* custom */
}
.icon-nav ul li a{ color:#7a1616;}
.icon-nav ul li a:hover {color: #7a1616; text-decoration:none }
.icon-nav ul li a:hover .icon-large {top: -20px;  }

.sidebar img{margin-bottom:15px;max-width: 300px;min-width: 300px;}

/* --- Footer -- */
.footer-wrapper {display: block; position: relative; padding:15px 0 5px; min-height: 60px; max-width: 1000px; margin:-70px auto 0 auto;}
footer { line-height: 50px; color: #fff; font-family:  'Droid Sans', sans-serif; font-size: 13px;}
footer a {display: inline-block; margin:0 5px;}
footer img {vertical-align: top;}


/*--- Forms and app styling */

.border-wrap{border:1px solid #ccc; -webkit-border-radius: 5px; border-radius: 5px; padding:15px; margin-bottom:20px}
.border-wrap h2 span{color:#b92120}
.border-wrap input[type="text"],
.border-wrap input[type="password"],
.border-wrap input[type="date"],
.border-wrap input[type="datetime"],
.border-wrap input[type="email"],
.border-wrap input[type="number"],
.border-wrap input[type="search"],
.border-wrap input[type="tel"],
.border-wrap input[type="time"],
.border-wrap input[type="url"],
.border-wrap textarea {
  border: 2px solid #ebebeb;  width:100%; padding:6px;  border-radius: 3px; border:1px solid #ddd; display: block;font-size:13px; line-height:20px}
.border-wrap h6{margin-top:7px; line-height:14px}  
.border-wrap li{list-style-type: disc; list-style-position: inside; line-height:20px}
.input-group-addon{padding: 9px 12px ;width: auto;  border-radius: 3px;border: 1px solid #ddd;font-size: 12px;}
.input-group{  display: inline-table;
  vertical-align: middle;
margin-bottom: 10px;}
.border-wrap .total .input-group input[type="text"]{border-radius: 0 3px 3px 0;}
.border-wrap .total .input-group .input-group-addon{border-radius: 3px 0 0 3px}
.border-wrap .firstchild .input-group input[type="text"]{border-radius:3px 0 0 3px ;}
.border-wrap .firstchild .input-group .input-group-addon{border-radius:0 3px 3px 0; }


.kitchen-image-bg{background-color: #ccc;border-radius: 5px;padding: 10px;margin-bottom: 20px;}
.kitchen-image-bg .btn-default{  width: 145px;margin-bottom: 10px;}
.kitchen-image-bg .button-group{padding: 118px 0}
.kitchen-image-bg .kitchen-image{text-align: center;height: 370px;}
.help-icon{width: 20px;height: 20px;margin: 7px 0;}

span.tooltip {outline:none;opacity: 1;z-index: initial; }
span.tooltip strong {line-height:30px;}
span.tooltip:hover {text-decoration:none;} 
span.tooltip span {
    z-index:10000;display:none; padding:14px 20px;
     margin-left:-125px;
    width:300px; line-height:16px;
}
span.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #ddd; color: #5d5d5d;font: bold 13px 'Open Sans', sans-serif;text-align: center;
    background:#fff url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
span.tooltip span img{margin-bottom: 10px;}   
/*CSS3 extras*/
span.tooltip span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 1px #666;
    /*opacity: 0.8;*/
}

.calculator-image{height:170px;}
.tool-tip-icon{float: right;
  margin-right: 31px;}
  .flash-success{
    background: #3D8713;
  color: #fff;
  display: block;
  padding: 9px 15px;
  margin-left: 10px;
  margin-bottom: 15px;}
  .flash-warning{
    background: #D21F1E;
  color: #fff;
  display: block;
  padding: 9px 15px;
  margin-left: 10px;
  margin-bottom: 15px;}


  
/* Responsive styles */
@media (max-width: 800px) {
.wrapper:after {background:none}}

@media (max-width: 768px) {
	
	header .logo{margin:0}
	header h2{margin:10px 0; float:left}
	.nav  li{font-size:13px}
	.nav li a{padding:15px 16px}
	.icon-nav ul {display: block;}
	.icon-nav ul li {display: inline-block; text-align: center; margin-bottom: 10px; min-width: 33.33%}
	.wrapper:after {background:none}
	footer, footer .text-right{text-align:center!important}
}
@media (max-width: 767px){
	nav ul li a {font-size: 15px; padding: 15px 10px;}
	
}
@media (max-width: 686px) {
.nav > ul  {top:50px}
.icon-nav ul li a {padding: 15px 0}
}

@media (max-width: 600px) {
	.nav li { display: block;}
	.nav li a{padding:10px 10px}
	.icon-nav ul {display: block;}
	.icon-nav ul li {display: inline-block; text-align: center; margin-bottom: 10px; min-width: 32%}
	.btn-large {font-size: 16px; padding: 5px 16px;}
	header .logo{margin:0}
}
@media (max-width: 567px) {
	
	.nav  li a { margin-top: 0; line-height: 30px;}	
	.nav > ul { position:relative; top:0; width:100%; text-align:center}
}
@media (max-width:480px) {
	.icon-nav ul li a {padding: 15px 28px;}
	.icon-nav ul {padding: 0px;}
}
@media (max-width:400px) {
	.icon-nav ul {display: block;}
	.icon-nav ul li {display: block; text-align: center; margin-bottom: 10px; min-width: 32%}
}
@media (max-width:320px) {
header h2{font-size:30px}
}