/*
Theme Name: Creatika WordPress
Theme URI: http://themeforest.net/user/bitpub/portfolio
Description: Creatika WordPress Theme versatile design makes it truly multipurpose. Showcase your services, your portfolio or both.
Author: Bitpub
Author URI: http://themeforest.net/user/bitpub
Version: 1.0.1
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, theme-options, threaded-comments, translation-ready

License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('layout/css/base.css');
@import url('layout/css/grid.css');
@import url('layout/css/elements.css');
@import url('layout/css/layout.css');


/* Extra Styles Embersketch */

input#time.wpcf7-form-control.wpcf7-text{
	float: left;
	margin-right: 5px;
	width: 100px
}

.yellowbutton .wpb_button,
#menu .yellowbutton a {
	background-color: #ffd800;
	padding:  10px 15px !important;
	margin-left: 15px;
	margin-top: 28px;
	font-size: 16px !important;
	color: #6b5b00 !important;
	border-radius: 8px;
	box-shadow: 0 4px 0 #ddba41;
	text-shadow: 1px 1px 0 yellow;
	position: relative;
}

.stuck #menu .yellowbutton a{
	margin-top: 12px;
}

.yellowbutton .wpb_button:hover,
#menu .yellowbutton a:hover{
	background-color: #ffd800;
	box-shadow: 0 6px 0 #ddba41;
	top: -2px;
}

.yellowbutton .wpb_button:active,
#menu .yellowbutton a:active{
	top: 4px;
	box-shadow: none;
}

.homeseperator{
	position: relative;
	top: -40px;
}

.ybutton{
	background-color: #ffd800;
	padding:  10px 15px !important;
	margin: 5px;
	font-size: 22px !important;
	color: #6b5b00 !important;
	border-radius: 8px;
	box-shadow: 0 4px 0 #ddba41;
	text-shadow: 1px 1px 0 yellow;
	position: relative;
	white-space: nowrap;
	-webkit-text-size-adjust: none
}

.ybutton:hover{
	box-shadow: 0 6px 0 #ddba41;
	top: -2px;
	text-decoration: none;
}

.ybutton:active{
	top: 4px;
	box-shadow: none;
	background-color: #ffd800;
}

@media (max-width: 767px) {

	.ybutton {
		display: inline-block;
		margin-top: 40px;
	}
}

.blue-button .wpb_button,
.bbutton{
	background-color: #55b2ff;
	padding:  10px 15px !important;
	margin: 5px;
	font-size: 22px !important;
	color: #ffffff !important;
	border-radius: 8px;
	box-shadow: 0 4px 0 #4c94e6;
	text-shadow: 1px 1px 0 #4c94e6;
	position: relative;
	white-space: nowrap;
}

.blue-button .wpb_button:hover,
.bbutton:hover{
	background-color: #55b2ff;
	box-shadow: 0 6px 0 #4c94e6;
	top: -2px;
	text-decoration: none;
}


.blue-button .wpb_button:active,
.bbutton:active{
	top: 4px;
	box-shadow: none;
	background-color: #55b2ff;
}

.headline .bullet, .headline::before, .headline::after{
	color: #ffd800 !important;
	border-color: #ffd800 !important;
}

.ybutton:active;{
	top: 4px;
	box-shadow: none;
}

#instantquote{
	width: 770px;
	max-height: 300px;
	background-color: rgba(255,255,255,0.9);
	z-index: 100;
	position: relative;
	margin: auto;
	margin-top: -450px;
	padding: 50px;
	max-width: 90%;
}

#instantquote h2{
	font-style: italic;
	text-align: center;
	font-size: 28px;
	margin-bottom: 30px;
}
#instantquote ul{
	background-color: white;
	width: 175px;
	float: left;
	font-size: 20px;
	font-weight: 300;
	border-radius: 5px;
	margin-right: 20px;
	list-style-type: none;
	overflow: hidden;
	height: 37px;
	position: relative;
	z-index: 150;
}

#instantquote ul li{
  	padding: 7px;
	background-color: white;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	cursor: pointer;
}

#instantquote ul li:first-child{
	border-radius: 5px;
	border: 1px solid #ddd;
	margin-bottom: -1px;
	background-image: url('layout/images/dblarrow.jpg');
	background-repeat: no-repeat;
	background-position: 150px 13px;
}

#instantquote ul li.topborder{
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top: 1px solid #ddd;
}


#instantquote ul li:hover{
	font-weight: 400;
}

#instantquote ul li:last-child{
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom: 1px solid #ddd;
}

#instantquote ul#sides{
	margin-right: 0;
}

#instantquote .bbutton{
	display: block;
	width: 170px;
	text-align: center;
	margin: auto;
	padding: 10px;
}

#pricetiers{
	width: 810px;
	margin: auto;
	margin-top: -575px;
	position: relative;
	z-index: 101;
	top: -100px;
	opacity: 0;
	display: none;
}

#pricetiers>div{
	width: 250px;
	height: 400px;
	text-align: center;
	float: left;
	background-color: white;
}

#pricetiers p{
	padding: 15px;
	font-size: 16px;
	font-weight: 300;
	font-weight: italic;
	height: 190px;
	line-height: 24px;
}

#pricetiers #ultimate p{
	line-height: 20px;
	font-size: 14px;
}

#pricetiers .price{
	font-size: 28px;
	display: block;
}

#pricetiers .bbutton{
	margin: 20px;
	display:block;
}


#pricetiers h3{
	color: white;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
	font-size: italic;
	padding: 6px;
}

#pricetiers #premium{
	margin: 0 30px;
	height: 430px;
	margin-top: -20px;
}

#pricetiers #premium p{
	height: 220px;
}

#signature h3{
	background-color: #caab69;
}

#premium h3{
	background-color: #b8b8b8;
}

#ultimate h3{
	background-color: #ffcc5d;
}

#pricetiers>div#disclaimer{
	width: 700px;
	max-width: 100%;
	float: none;
	height: auto;
	text-align: center;
	clear:both;
	margin:auto;
	background-color:transparent;
	color:white;
	text-shadow:1px 1px 0 rgba(0,0,0,0.5)
}

#pricetiers>div#disclaimer p{
	font-weight:bold;
	font-size:12px;
	line-height:18px;
}

@media screen and (min-width: 700px) and (max-width: 980px){

	#instantquote{
		width: 550px;
		margin-top: -400px;
	}

    #instantquote ul{
		width: 230px;
	}

	#instantquote ul li:first-child{
		background-position: 205px 13px;
	}

	#storeys, #bathrooms{
		margin-left: 30px;
	}

	#storeys{ z-index: 10 !important; }
	#bedrooms{ z-index: 8 !important; }
	#bathrooms{ z-index: 6 !important; }
	#sides{ z-index: 4 !important; }
	#quotesubmit{
		z-index: 2 !important;
	}

	#pricetiers{
		margin-top: -500px;
	}

	#pricetiers>div{
		height: 350px;
	}
	#pricetiers p{
		height: 140px;
	}

	#pricetiers #premium{
		height: 400px;
	}

	#pricetiers #premium p{
		height: 190px;
	}
}

@media screen and (max-width: 810px){
	#pricetiers{
		margin-top: 0;
		max-width: 100%;
	}

	#pricetiers>div{
		width: 80%;
		height: auto !important;
		margin: 0 10% 30px 10% !important;
	}

	#pricetiers p{
		height: auto  !important;
	}

	#pricetiers .bbutton{
		width:150px;
		margin: 30px auto;
	}

	#signature{
		border: 1px solid #caab69;
	}

	#premium{
		border: 1px solid #b8b8b8;
	}

	#ultimate{
		border: 1px solid #ffcc5d;
	}
}

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

	#instantquote{
		width: auto;
		margin-top: 0;
		margin-bottom: 100px;
	}

	#instantquote>h2{
		display: none;
	}
	.inactive{
		opacity: 0.3;
	}

    #instantquote ul{
		width: 100%;
		margin: 15px 0;
		position: relative;
	}

	#instantquote ul li:first-child{
		background-position: right 15px top 13px;
	}

	#storeys{ z-index: 10 !important; }
	#bedrooms{ z-index: 8 !important; }
	#bathrooms{ z-index: 6 !important; }
	#sides{ z-index: 4 !important; }
	#quotesubmit{ z-index: 2 !important; }


	.ewf-row vc_custom_1415777884131 .ybutton, .ewf-row vc_custom_1415777884131 .bbutton{
		font-size: 16px;
	}
}

#instantquote #quotesubmit{
	opacity: 0;
}

.clearf{
	width: 100%;
	height: 1px;
	clear: both;
}

#testimonial-form{
	margin:auto;
	width:400px;
}

#gct_agree, .wpcf7-list-item input{
	display: inline;
	-webkit-appearance: checkbox !important;
}

span.wpcf7-list-item{
	display: block;
}

span.wpcf7-form-control-wrap.text-950{
	float:left !important;
	margin-right:5px !important;
	margin-top:-2px !important;
}

#storeymessage{
	text-align: center;
}


.cta_align_right .wpb_button {
	transform: translateY(100%);
}