/*********** INFORMATION *****************************

- document:  Tabbed - HTML5 and CSS3 Tabs Pack
- element:   Tabs with all elements preview
- author:    Capelle @ Codecanyon
- profile:   http://codecanyon.net/user/Capelle

*****************************************************/

/*  ==================
    1. FONTS
    ==================  */

/* Lato font for the content */
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic); */
/* Entypo pictograms by Daniel Bruce — www.entypo.com */

/*  ==================
    2. ITEM RESET
    ==================  */

#tabbed * {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: 300;
	font-style: normal;
	font-size: 100%;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif; /* Edit this if you want to match the font with your template design. IF you change it to your font, don't forget to delete the @import above */
	vertical-align: baseline;
	line-height: normal;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#tabbed label {
	cursor: pointer;
}
#tabbed input[type="radio"] {
	display: none;
	visibility: hidden;
	opacity: 0;
}
#tabbed a {
	text-decoration: none;
}
#tabbed {
	width: 100%; /* <-- Adjust this value to change the width of the tabs */
	position: relative;
	float: left;
	text-align: center; /* This value positions the tab labels on top. You can set: left, right or center. */
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}
/* === Note === If you experience issues with reset above, please adjust the selectors and values according to your template/website.
When adjusting the reset is adviced to check up the elements on your page, as they might distort. */


/*  ==================
    3. MAIN STYLES
    ==================  */

/***** Wrapper *****/

#tabbed .wrapper {
	background: #FAFAFA;
	position: relative;
	width: 100%;
	height: auto;
	float: left;
	text-align: left;
}
#tabbed .wrapper > div {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: 100%;
	background: #fff;
	background: #FAFAFA;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	padding: 20px;
	float: left;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

/***** Tab labels *****/

#tabbed input#t-1:checked ~ .wrapper .tab-1,
#tabbed input#t-2:checked ~ .wrapper .tab-2,
#tabbed input#t-3:checked ~ .wrapper .tab-3,
#tabbed input#t-4:checked ~ .wrapper .tab-4 {
	position: relative;
	float: left;
	z-index: 10;
	opacity: 1;
	visibility: visible;
}
#tabbed label.tabs {
	display: inline-block;
	background: #ff671b;
	color: #fff;
	font-size: 14px;
	text-align: center;
	text-transform: uppercase;
	padding: 0 30px;
	width: auto;
	height: 44px;
	line-height: 49px;
	-webkit-transform: translateY(6px);
	-moz-transform: translateY(6px);
	-ms-transform: translateY(6px);
	-o-transform: translateY(6px);
	transform: translateY(6px);
}
#tabbed label.tabs:hover,
#tabbed label.tabs:focus {
	background: #4877cb;
	background: #666;
}
#tabbed input:checked + label.tabs {
	background: #fff;
	background: #FAFAFA;
	color: #333;
}
#tabbed label.tabs:hover,
#tabbed label.tabs:focus,
#tabbed input:checked + label.tabs {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
#tabbed label.tabs:before {
	padding-right: 5px;
}


/*  ==================
    4. LAYOUT
    ==================  */

/***** 6 column grid *****/

#tabbed .row {
	display: block;
	float: left;
	width: 95%;
	clear: both;
}
#tabbed .cell {
	display: inline-block;
	float: left;
	position: relative;
	margin: 1% 2% 1% 0;
}
#tabbed .cell:last-child {
	margin-right: 0;
}
/* full width */
#tabbed .cell.w-100 {
	width: 100%;
}
/* four fifths */
#tabbed .cell.w-83 {
	width: 83%;
}
/* three fifths */
#tabbed .cell.w-66 {
	width: 66%;
}
/* half width */
#tabbed .cell.w-49 {
	width: 49%;
}
/* two fifths */
#tabbed .cell.w-32 {
	width: 32%;
}
/* one fifth */
#tabbed .cell.w-15 {
	width: 15%;
}
/* table */
#tabbed .cell.table.first {
	padding-left: 10px;
}
#tabbed .cell.table.first.blue {
	background: #6E98E3;
}
#tabbed .cell.table.first.black {
	background: #333;
}
#tabbed .cell.table.first p {
	color: #fff;
}
#tabbed .cell.table.exposed p {
	color: #f00;
}

/***** Helper margins *****/

#tabbed .mt-5 {
	margin-top: 5px;
}
#tabbed .mt-10 {
	margin-top: 10px;
}
#tabbed .mt-15 {
	margin-top: 15px;
}
#tabbed .mt-20 {
	margin-top: 20px;
}
#tabbed .mt-30 {
	margin-top: 30px;
}

/***** Clearfixes *****/

#tabbed .clrfx {
	display: block;
	float: left;
	width: 100%;
	height: auto;
	clear: both;
	content: "";
}

/***** Floats *****/

#tabbed .fl-left {
	float: left;
}
#tabbed .fl-right {
	float: right;
}


/*  ==================
    5. CONTENT
    ==================  */

/***** Titles *****/

#tabbed .title.large {
	font-size: 24px;
	color: #4877cb;
	color: #ff671b;
	text-transform: uppercase;
	border-bottom: solid 5px #f0f0f0; 
	/*border-bottom: solid 6px #F48022; */
	padding-bottom: 10px;
}
#tabbed .title.normal {
	font-size: 24px;
	color: #333;
	text-transform: uppercase;
	font-weight: 400;
}
#tabbed .title.small {
	font-size: 20px;
	color: #333;
	font-weight: 400;
}
#tabbed .title.mini {
	font-size: 16px;
	color: #666;
	font-weight: 400;
}
#tabbed .title.inline {
	font-size: 16px;
	text-transform: uppercase;
	display: block;
	padding-bottom: 6px;
}
#tabbed .title.table {
	font-size: 14px;
	color: #333;
	padding: 6px 0;
	border-bottom: solid 2px #f0f0f0;
}
#tabbed .title.table.headline {
	text-transform: uppercase;
	color: #fff;
	border-bottom: solid 2px #fff;
}
#tabbed .title.icon:before {
	padding-right: 10px;
	color: #bbb;
}

/***** Paragraphs *****/

#tabbed p {
	display: block;
}
#tabbed p.large {
	font-size: 18px;
	line-height: 24px;
	color: #555;
}
#tabbed p.normal {
	font-size: 14px;
	line-height: 20px;
	color: #444;
	padding-bottom: 15px;
}
#tabbed p.small {
	font-size: 10px;
	line-height: 16px;
	color: #bbb;
}
#tabbed p b {
	color: #555;
	font-weight: inherit;
}
#tabbed p.small span.icon {
	padding-right: 8px;
}
#tabbed p.normal span.icon {
	padding-right: 10px;
}
#tabbed p.large span.icon {
	padding-right: 12px;
}

/***** Quoted paragraphs *****/

#tabbed p.quote {
	font-size: 12px;
	color: #6E99E3;
	font-weight: 400;
	line-height: 20px;
	font-style: italic;
	padding-left: 16px;
	border-left: solid 6px #f0f0f0;
}
#tabbed p.framed-quote {
	background: #6e98e3;
	color: #fff;
	font-size: 12px;
	padding: 20px;
	line-height: 18px;
	position: relative;
}
#tabbed p.framed-quote:before {
	content: "";
	position: absolute;
	width: 0px;
	height: 0px;
	border-style: solid;
}
#tabbed p.framed-quote.arrow-left:before {
	left: -10px; /* Same as the border width */
	top: 50%;
	margin-top: -14px; /* Same as border height */
	border-width: 14px 10px 14px 0;
	border-color: transparent #6e99e3 transparent transparent;
}
#tabbed p.framed-quote.arrow-right:before {
	right: -10px; /* Same as the border width */
	top: 50%;
	margin-top: -14px; /* Same as border height */
	border-width: 14px 0 14px 10px;
	border-color: transparent transparent transparent #6e99e3;
}
#tabbed p.framed-quote.arrow-top:before {
	left: 50%;
	top: -10px; /* Same as the border width */
	margin-left: -14px; /* Same as border height */
	border-width: 0 14px 10px 14px;
	border-color: transparent transparent #6e99e3 transparent;
}
#tabbed p.framed-quote.arrow-bottom:before {
	left: 50%;
	bottom: -10px; /* Same as the border width */
	margin-left: -14px; /* Same as border height */
	border-width: 10px 14px 0 14px;
	border-color: #6e99e3 transparent transparent transparent;
}
#tabbed p.framed-quote span.icon {
	padding-right: 6px;
}

/***** Links and buttons *****/

#tabbed a {
	color: #6e98e3;
}
#tabbed a:hover {
	color: inherit;
}
#tabbed .button {
	color: #fff;
	font-size: 16px;
	padding: 14px;
	text-align: center;
	display: inline-block;
	width: 100%;
	cursor: pointer;
}
#tabbed .button:hover {
	color: #fff;
}
#tabbed .button:before {
	float: right;
}
#tabbed .button.blue {
	background: #6e98e3;
}
#tabbed .button.black {
	background: #333;
}
#tabbed .button.grey.light {
	background: #bbb;
}
#tabbed .button.grey.dark {
	background: #777;
}
#tabbed .button.blue:hover {
	background: #333;
}
#tabbed .button.black:hover {
	background: #6e98e3;
}
#tabbed .button.grey:hover {
	background: #555;
}

/***** List style *****/

#tabbed ul {
	padding-left: 10px;
}
#tabbed ul > li {
	font-size: 15px;
	list-style-type: none;
}
#tabbed ul li:before {
	display: inline-block;
	margin-right: 6px;
	text-align: left;
	font-weight: normal;
	color: #bbb;
}

/***** Iframe for video *****/

#tabbed iframe {
	width: 100%; /* This value ensures that the video is 100% width of the content area */
	height: 480px; /* This is video height, which can be adjusted according to the content */
}

/***** Map *****/

#tabbed .map {
	width: 90%;
	height: 380px;
	display: inline-block;
}
#tabbed .map-wrap {
	padding: 14px;
	width: 260px;
}
#tabbed .map-wrap .b-title {
	font-size: 16px;
	text-transform: uppercase;
	color: #FF2424;
	padding-bottom: 4px;
	display: block;
	width: 100%;
}
#tabbed .map-wrap p {
	display: block;
	clear: both;
	font-size: 13px;
	color: #999;
	padding-bottom: 4px;
}
#tabbed .map-wrap .b-info {
	font-size: 12px;
	color: #333;
	margin-top: 12px;
}
#tabbed .map-wrap .b-info span {
	padding-right: 6px;
}

/***** Form layout *****/

#tabbed input,
#tabbed select,
#tabbed textarea {
	display: inline-block;
	width: 100%;
	float: left;
	border-bottom: 1px solid #ddd;
	padding: 12px 20px 10px 10px;
	font-size: 16px;
	color: #333;
}
#tabbed input:hover,
#tabbed input:focus,
#tabbed select:hover,
#tabbed select:focus,
#tabbed textarea:hover,
#tabbed textarea:focus {
	border-bottom-color: #333;
	outline: none;
}
#tabbed textarea {
	resize: none;
	overflow: hidden;
	height: 46px;
}
#tabbed textarea:focus {
	height: 140px;
}
#tabbed input.reset {
	border: none;
	outline: none;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
	text-align: right;
	background: #fff;
}
#tabbed input.reset:hover {
	color: #6E98E3;
}
#tabbed select {
	background: none;
	background-color: rgba(0,0,0,0);
	height: auto;
	padding-left: 8px;
	z-index: 2;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#tabbed select.grayed {
	color: #999;
}
#arrow-select,
#arrow-select-svg {
	background: #fff url('img/select.png') no-repeat 0 11px;
	width: 44px;
	height: 35px;
	position: absolute;
	right: 0;
	top: 1px;
	pointer-events: none;
	vertical-align: middle;
	outline: none;
	border: none;
	z-index: 3;
}
#tabbed select:hover ~ #arrow-select,
#tabbed select:focus ~ #arrow-select,
#tabbed select:hover ~ #arrow-select-svg,
#tabbed select:focus ~ #arrow-select-svg {
	background: #fff url('img/select-focus.png') no-repeat 0 11px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#arrow-select-svg {
		display: none; /* <-- Hide svg arrow in webkit browsers and IE9/10 (pointer events don't work in those IE) */
	}
}
x:-o-prefocus, #arrow-select {
	display: none; /* <-- Hack for Opera 12 */
}
/*-- Webkit placeholder --*/
#tabbed input::-webkit-input-placeholder,
#tabbed textarea::-webkit-input-placeholder {
	color: #999;
}
#tabbed input:focus::-webkit-input-placeholder,
#tabbed textarea:focus::-webkit-input-placeholder {
	color: #ccc;
}
/*-- Firefox 19 down placeholder --*/
#tabbed input:-moz-placeholder,
#tabbed textarea:-moz-placeholder {
	color: #999;
}
#tabbed input:focus:-moz-placeholder,
#tabbed textarea:focus:-moz-placeholder {
	color: #ccc;
}
/*-- Firefox 19 up placeholder --*/
#tabbed input::-moz-placeholder,
#tabbed textarea::-moz-placeholder {
	color: #999;
}
#tabbed input:focus::-moz-placeholder,
#tabbed textarea:focus::-moz-placeholder {
	color: #ccc;
}
/*-- IE 10+ placeholder --*/
#tabbed input:-ms-input-placeholder,
#tabbed textarea:-ms-input-placeholder {
	color: #999;
}
#tabbed input:focus:-ms-input-placeholder,
#tabbed textarea:focus:-ms-input-placeholder {
	color: #ccc;
}
/*-- IE 9 placeholder --*/
#tabbed .ie9-placeholder {
	color: #999 !important;
}
#tabbed .ie9-placeholder:focus {
	color: #ccc !important;
}
/* Required field */
#tabbed input:required,
#tabbed textarea:required,
#tabbed select:required {
	background: #fff url(img/required.png) no-repeat 100% 18px;
	outline: none;
	box-shadow: none;
}
/* Invalid field */
#tabbed input:hover:invalid,
#tabbed textarea:hover:invalid,
#tabbed select:hover:invalid {
	background: #fff url(img/focused.png) no-repeat 100% 18px;
	outline: none;
	box-shadow: none;
}
/* Valid field */
#tabbed input:required:valid,
#tabbed textarea:required:valid,
#tabbed select:required:valid {
	background: #fff url(img/valid.png) no-repeat 100% 18px;
	outline: none;
	box-shadow: none;
}
/* Invalid field */
#tabbed input:focus:invalid,
#tabbed textarea:focus:invalid,
#tabbed select:focus:invalid {
	background: #fff url(img/invalid.png) no-repeat 100% 18px;
	outline: none;
	box-shadow: none;
}


/*  ==================
    6. VISUAL CANDIES
    ==================  */

/***** Transitions *****/

#tabbed a,
#tabbed input,
#tabbed select,
#tabbed textarea,
#tabbed label.tabs,
#tabbed input:checked ~ .wrapper > div {
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.2s;
}

/***** Shadows *****/

#tabbed .wrapper.shadow,
#tabbed input:checked + label.tabs.shadow {
	-webkit-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.3);
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.3);
}


/*  ==================
    7. MEDIA QUERIES
    ==================  */

/***** Max width 1024px *****/

@media screen and (max-width:816px){
	#tabbed {
		width: 100%;
	}
	#tabbed label.tabs {
		padding: 0 20px;
	}
}

/***** Max width 800px *****/

@media screen and (max-width:800px){
	#tabbed .cell.w-83,
	#tabbed .cell.w-66,
	#tabbed .cell.w-49,
	#tabbed .cell.w-32,
	#tabbed .cell.w-15 {
		width: 100%;
	}
	#tabbed .cell {
		margin: 2% 0;
	}
	#tabbed p.framed-quote:before {
		display: none;
	}
	#tabbed label.tabs {
		width: 100%;
		height: 56px;
		line-height: 56px;
		font-size: 20px;
		text-align: left;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	#tabbed label.tabs:before {
		display: inline-block;
		padding: 0;
		width: 30px;
	}
	#tabbed input:checked + label.tabs.shadow {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	#tabbed .wrapper.shadow {
		-webkit-box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.3);
		box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.3);
	}
	#tabbed .fl-right {
		float: left;
	}
	#tabbed iframe {
		height: 380px;
	}
	#tabbed .map {
		width: 100%;
	}
}