/*
Theme Name: OC Local Garage
Theme URI: http://www.gravis-design.com/ or http://www.milestoneseo.com/
Author: Gravis
Author URI: http://www.gravis-design.com/
Description: Theme for OC Local Garage
Version: 5.0
License: Commercial
License URI: http://www.gravis-design.com/ or http://www.milestoneseo.com/
Tags: black, yellow
Text Domain: OC Garage
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus { outline: 0; }
body { background: #fff; line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
del { color: #333; }
ins { background: #fff9c0; text-decoration: none; }
hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: smaller; }
img { border: 0; -ms-interpolation-mode: bicubic; }
/* FONT-FACE */
@font-face {
	font-family: BebasNeue-webfont;
	src: url('webfont/BebasNeue-webfont.ttf');
	src: local('BebasNeue-webfont'), url(webfont/BebasNeue-webfont.ttf) format("truetype");
} /* USE: font-family: 'BebasNeue-webfont';
/* GENERAL */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #363636;
	background: #e2e2e2;
	border-top: 10px solid #000;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; color: #000; }
sup { font-size: 60%; }
strong { font-weight: bold; }
em { font-style: italic; }
.clear { clear: both; }
small { font-size: 12px; }
/* HOME */
.wrapper {width: 1070px; margin: 0 auto;}
.wrap-headerleft {float:left;}
.wrap-headerright {float:right;}
.logo-header {float: left; margin: 27px 0px;}
/* TOP MENU */
.topmenu-header {float: right; text-transform: uppercase; margin: 15px auto 26px;}
/* MAIN MENU */
/* based on http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial*/
#cssmenu{display:block; padding:0;} 
#cssmenu > ul { list-style:inside none; padding:0; margin:0 -5px 0 0;} 
#cssmenu > ul > li {
	list-style:inside none;
	padding:0;
	margin: 0 -4px 0 0;
	display: inline-block;
	position:relative;
} 
#cssmenu > ul > li > a {
	outline:none;
	display:block;
	position:relative;
	padding:1px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	color:#707070;
} 
#cssmenu li:last-child {background: url(images/batas-topmenu.png) no-repeat;}
#cssmenu li {background: url(images/batas-topmenu.png) no-repeat right center;} 
#cssmenu > ul > li > a:after {
	content:'';
	position: absolute;
	top: -1px;
	bottom: -1px;
	right: -2px;
	z-index: 99;
} 
#cssmenu ul li.has-sub:hover > a:after { top: 0; bottom: 0;} 
#cssmenu > ul > li.has-sub > a:before {
	content:'';
	position: absolute;
	top: 17px;
	right: 6px;
	border: 4px solid transparent;
	border-top: 4px solid #fff;
}  
#cssmenu ul li.has-sub:hover > a { background: #565656; border-color: #565656; padding: 10px 20px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div { display: block; } 
#cssmenu ul li.has-sub > a:hover { background: #565656; border-color: #565656;} 
#cssmenu ul li > ul, #cssmenu ul li > div{
	display: none;
	width: auto;
	position: absolute;
	top: 34px;
	padding: 0 0 10px 0;
	background: #565656;
	border-radius: 0 0 8px 8px;
	z-index: 999;
} 
#cssmenu ul li > ul { width: 200px; text-align: left; } 
#cssmenu ul li > ul li{
	display: block;
	list-style: inside none;
	padding: 0;
	margin: 0;
	position: relative;
} 
#cssmenu ul li > ul li a {
	outline: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 8px 20px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
#cssmenu ul li > ul li a:hover { background: #000; }
#cssmenu, #cssmenu ul > li > ul > li a:hover { } 
#cssmenu { border-color: #000; }
#cssmenu > ul > li:first-child {} 
#cssmenu > ul > li > a:hover { text-decoration: underline;}
/* THEME OPTION CALL TOP */
.calltoday-top {float: right; color: #000; font-size: 20px; margin-bottom: 20px;}
/* SECOND MENU */
.secmenu-header {float: right; text-transform: uppercase; margin-top: -5px;}
/* SECOND MENU */
/* based on http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial*/
#cssmenu-second {display:block; padding:0;} 
#cssmenu-second > ul { list-style:inside none; padding:0; margin:0; height: 31px;} 
#cssmenu-second > ul > li {
	list-style:inside none;
	padding:10px 2px 0 30px;
	margin:0;
	display: inline-block;
	position:relative;
	width: auto;
	color: #000;
	font-size: 20px;
	font-family: 'BebasNeue-webfont';
} 
#cssmenu-second > ul > li > a {
	outline:none;
	display:block;
	position:relative;
	padding:8px 4px 0px 35px;
	font-family: 'BebasNeue-webfont';
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	color:#000;
} 
#cssmenu-second li:last-child {background: url(images/img-secmenu.png) no-repeat;}
#cssmenu-second li {background: url(images/img-secmenu.png) no-repeat;} 
#cssmenu-second > ul > li > a:after {
	content:'';
	position: absolute;
	top: -1px;
	bottom: -1px;
	right: -2px;
	z-index: 99;
} 
#cssmenu-second ul li.has-sub:hover > a:after { top: 0; bottom: 0;} 
#cssmenu-second > ul > li.has-sub > a:before {
	content:'';
	position: absolute;
	top: 17px;
	right: 6px;
	border: 4px solid transparent;
	border-top: 4px solid #fff;
}  
#cssmenu-second ul li.has-sub:hover > a { background: #565656; border-color: #565656; padding: 10px 20px; z-index:999; } 
#cssmenu-second ul li.has-sub:hover > ul, #cssmenu-second ul li.has-sub:hover > div { display: block; } 
#cssmenu-second ul li.has-sub > a:hover { background: #565656; border-color: #565656;} 
#cssmenu-second ul li > ul, #cssmenu-second ul li > div{
	display: none;
	width: auto;
	position: absolute;
	top: 34px;
	padding: 0 0 10px 0;
	background: #565656;
	border-radius: 0 0 8px 8px;
	z-index: 999;
} 
#cssmenu-second ul li > ul { width: 200px; text-align: left; } 
#cssmenu-second ul li > ul li{
	display: block;
	list-style: inside none;
	padding: 0;
	margin: 0;
	position: relative;
} 
#cssmenu-second ul li > ul li a {
	outline: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 8px 20px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
#cssmenu-second ul li > ul li a:hover { background: #000; }
#cssmenu-second, #cssmenu-second ul > li > ul > li a:hover { } 
#cssmenu-second { border-color: #000; }
#cssmenu-second > ul > li:first-child {} 
#cssmenu-second > ul > li > a:hover { text-decoration: underline;}
/* MIDDLE MENU */
.mid-menu {width: 100%;border-bottom: 5px solid #B6B5B5; margin-bottom: 12px;}
/* MIDDLE MENU */
/* based on http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial*/
#cssmenu-middle {display:block; padding:0;} 
#cssmenu-middle > ul {
	list-style:inside none;
	padding:0;
	margin:0;
	background: rgba(0,0,0,1);
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(79,77,79,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(79,77,79,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(79,77,79,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(79,77,79,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(79,77,79,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(79,77,79,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4f4d4f', GradientType=0 );
} 
#cssmenu-middle > ul > li {
	list-style:inside none;
	padding:0;
	margin: -5px -4px 0 0;
	display: inline-block;
	position:relative;
} 
#cssmenu-middle > ul > li > a {
	outline:none;
	display:block;
	position:relative;
	padding:18px 55px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	color:#fff;
} 
#cssmenu-middle li {background: url(images/batas-midmenu.png) no-repeat 1px 13px;} 
#cssmenu-middle > ul > li > a:after {
	content:'';
	position: absolute;
	top: -1px;
	bottom: -1px;
	right: -2px;
	z-index: 99;
} 
#cssmenu-middle ul li.has-sub:hover > a:after { top: 0; bottom: 0;} 
#cssmenu-middle > ul > li.has-sub > a:before {
	content:'';
	position: absolute;
	top: 24px;
	right: 6px;
	border: 4px solid transparent;
	border-top: 4px solid #fff;
}  
#cssmenu-middle ul li.has-sub:hover > a { background: #f96817; z-index:999; color: #fff;} 
#cssmenu-middle ul li.has-sub:hover > ul, #cssmenu-middle ul li.has-sub:hover > div { display: block;} 
#cssmenu-middle ul li.has-sub > a:hover { background: #f96817; color:#fff;} 
#cssmenu-middle ul li > ul, #cssmenu-middle ul li > div{
	display: none;
	width: auto;
	position: absolute;
	background: rgba(224,97,26,0.5);
	background: -moz-linear-gradient(top, rgba(224,97,26,0.7) 0%, rgba(224,97,26,0.7) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,97,26,0.7)), color-stop(100%, rgba(224,97,26,0.7)));
	background: -webkit-linear-gradient(top, rgba(224,97,26,0.7) 0%, rgba(224,97,26,0.7) 100%);
	background: -o-linear-gradient(top, rgba(224,97,26,0.7) 0%, rgba(224,97,26,0.7) 100%);
	background: -ms-linear-gradient(top, rgba(224,97,26,0.7) 0%, rgba(224,97,26,0.7) 100%);
	background: linear-gradient(to bottom, rgba(224,97,26,0.7) 0%, rgba(224,97,26,0.7) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0611a', endColorstr='#e0611a', GradientType=0 );
	filter:alpha(opacity=100); /* For IE8 and earlier */
	z-index: 999;
} 
#cssmenu-middle ul li > ul {text-align: left; } 
#cssmenu-middle ul li > ul li{
	display: block;
	list-style: inside none;
	padding: 0;
	margin: 0;
	position: relative;
	background: none;
} 
#cssmenu-middle ul li > ul li a {
	outline: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 15px 29px;;
	color: #fff;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
#cssmenu-middle ul li > ul li a:hover { background: none; text-decoration: underline;}
#cssmenu-middle, #cssmenu-middle ul > li > ul > li a:hover { } 
#cssmenu-middle { border-color: #000; }
#cssmenu-middle > ul > li > a:hover { background: #f96817; color:#fff;}
#menu-middle-menu .current-menu-item { background: #f96817; color:#fff;}
/* HOME SLIDER n QUOTE */
.wrap-contenthome {background: #fff; padding-bottom: 25px;}
.slider-quote {float: left;}
.homeslider {padding: 4px 0 4px 4px;}
.homequote {float: right; padding: 4px 4px 4px 0; width: 316px;}
.soliloquy-container .soliloquy .soliloquy-slides img { width: 746px; height: 338px;}
.soliloquy-container .soliloquy .soliloquy-slides > li a { width: 746px; height: 338px;}
.soliloquy-container .soliloquy-direction-nav li .soliloquy-next {display: none;}
.soliloquy-container .soliloquy-direction-nav li .soliloquy-prev {display: none;}
.soliloquy-container .soliloquy-control-nav {display: none;}
/* CONTACT HOME */
.contactbox {
	background: rgba(0,0,0,1);
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(61,60,61,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3d3c3d', GradientType=0 );
}
.titlecontact {line-height: 30px; font-size: 24px; color: #fff; text-align: center; padding: 10px 0px 0px;}
.phonecontact  {font-size: 24px; color: #f96817; text-align: center; padding: 0px 0px 30px;}
.contactbox table { width: 100%; margin-bottom: 10px; }
.text {
	padding: 6px;
	margin: 0 auto 12px auto;
	width: 275px;
	display: block;
	color: #fff;
	border: 1px solid #898989;
	background: #898989;
}
.text:hover { box-shadow: 0 0 4px #000; }
.text:focus { box-shadow: 0 0 4px #000; background: #FFF; border: 1px solid #333; color: #000; }
.required { font-size: 12px; color: #fff; float: right; padding: 10px 0px 0px 20px;}
#notifconhome {text-align: center; display: none; margin: -44px 0px 0px 1px; position: absolute; width: 315px;}
.noticecontact { font-size: 10px; line-height: 15px; margin: 0 auto; text-align: center; padding-bottom: 8px;}
.noticecontact a { color: #f96817; text-decoration: underline; }
.noticecontact a:hover { color: #fff; }
.con_submit {
	color: #FFF;
	display: block;
	font-size: 20px;
	background: #f96817;
	padding: 10px 25px;
	border-radius: 10px;
	border: none;
	float: right;
	cursor: pointer;
	margin: 10px 35px 0 0;
}
.con_submit:hover { background: #e65200; }
.con_submit:focus { position: relative; top: 1px; }
.rightcontact { margin-bottom: 32px; }
/* HOME CONTENT */
.sloganhome {font-family: 'BebasNeue-webfont'; font-size: 28px; color: #000; text-align: center; margin: 17px auto;}
.banner-homewid {margin-bottom: 54px;}
.homwidget {text-align: center;}
.coupon-banner {padding: 0 23px;}
.wrap-homecontent {width: 1005px; margin: 0 auto;}
.thehomecontent {float: left; width: 532px;}
h1.pagetitle {font-family: 'BebasNeue-webfont'; font-size: 36px; color: #f96817; line-height: 30px; margin-bottom: 15px;}
.thehomecontent h2 {font-family: 'BebasNeue-webfont'; font-size: 26px; color: #000; line-height: 32px; margin-bottom: 15px;}
.thehomecontent h3 {font-family: 'BebasNeue-webfont'; font-size: 24px; color: #000; line-height: 30px; margin-bottom: 15px;}
.thehomecontent h3 a{font-family: 'BebasNeue-webfont'; font-size: 24px; color: #000; line-height: 30px; margin-bottom: 15px;}
.thehomecontent p {font-size: 12px; color: #555555; margin-bottom: 15px; line-height: 17px;}
.sidebarhome {float: right; width: 348px;}
/* WIDGET PAYPAL */
.imgpaypal {margin-top: 15px;}
/* TIPOGRAFI */
.thecontent a { color: #FFAD63; text-decoration: none;}
.thecontent a:hover { color: #F4692D; text-decoration: underline;}
.thecontent p { font-size: 14px; line-height: 18px;}
.thecontent h1, .thecontent h2 { font-size: 24px; line-height: 30px; padding: 16px 0 0 0; }
.thecontent h3 { font-size: 22px; line-height: 26px; color: #000; padding: 16px 0 0 0; }
.thecontent h4 { font-size: 18px; line-height: 24px; color: #000; padding: 16px 0 0 0; }
.thecontent h5 {
	font-size: 14px;
	line-height: 18px;
	padding: 8px 0 0 0;
	font-weight: bold;
	font-style: italic;
	color: #000;
}
.thecontent h6 {
	font-size: 10px;
	line-height: 14px;
	padding: 8px 0 0 0;
	font-weight: bold;
	font-style: italic;
	color: #000;
}
.thecontent ul, .thecontent ol { line-height: 18px; margin: 0 0 0 30px; }
.thecontent ul li { list-style: url(images/list-dash.png); padding: 4px 0; }
.thecontent ol li { list-style: decimal; padding: 4px 0; }
.thecontent img.alignleft { float: left; margin: 0 16px 8px 0; }
.thecontent img.alignright { float: right; margin: 0 0 16px 8px; }
.thecontent img.aligncenter { display: block; margin: 0 auto 8px auto; }
.thecontent img.alignnone {float: left; margin: 0 30px 250px 0;}
address { font-style: italic; line-height: 18px; margin: 10px 0 0 20px; }
pre {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 18px;
	white-space: normal;
	margin: 10px 0 0 20px;
}
/* WIDGET GALLERY */
.sidebarhome { width: 340px; margin: 0 0 25px; }
.widgetgallery {}
.widgetgallery h3 { color: #252525; font-size: 24px; padding: 0 0 5px; font-family: 'BebasNeue-webfont';}
.widgetgallery p { text-align: center; color: #252525; font-size: 12px; line-height: 16px; }
/* FOTTER MENU */
.wrap-footer {margin: 22px auto;}
.foot-menu {float: left; margin: 0px;}
/* FOOTER MENU */
/* based on http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial*/
#cssmenu-bottom {display:block; padding:0;} 
#cssmenu-bottom > ul { list-style:inside none; padding:0; margin:0;} 
#cssmenu-bottom > ul > li {
	list-style:inside none;
	padding:0;
	margin: 0 -4px 0 0;
	display: inline-block;
	position:relative;
} 
#cssmenu-bottom > ul > li > a {
	outline:none;
	display:block;
	position:relative;
	padding:1px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	color:#707070;
} 
#cssmenu-bottom li:last-child {background: url(images/batas-footmenu.png) no-repeat scroll -5px 3px;}
#cssmenu-bottom li {background: url(images/batas-footmenu.png) no-repeat right center;} 
#cssmenu-bottom > ul > li > a:after {
	content:'';
	position: absolute;
	top: -1px;
	bottom: -1px;
	right: -2px;
	z-index: 99;
} 
#cssmenu-bottom ul li.has-sub:hover > a:after { top: 0; bottom: 0;} 
#cssmenu-bottom > ul > li.has-sub > a:before {
	content:'';
	position: absolute;
	top: 17px;
	right: 6px;
	border: 4px solid transparent;
	border-top: 4px solid #fff;
}  
#cssmenu-bottom ul li.has-sub:hover > a { background: #565656; border-color: #565656; padding: 10px 20px; z-index:999; } 
#cssmenu-bottom ul li.has-sub:hover > ul, #cssmenu-bottom ul li.has-sub:hover > div { display: block; } 
#cssmenu-bottom ul li.has-sub > a:hover { background: #565656; border-color: #565656;} 
#cssmenu-bottom ul li > ul, #cssmenu ul li > div{
	display: none;
	width: auto;
	position: absolute;
	top: 34px;
	padding: 0 0 10px 0;
	background: #565656;
	border-radius: 0 0 8px 8px;
	z-index: 999;
} 
#cssmenu-bottom ul li > ul { width: 200px; text-align: left; } 
#cssmenu-bottom ul li > ul li{
	display: block;
	list-style: inside none;
	padding: 0;
	margin: 0;
	position: relative;
} 
#cssmenu-bottom ul li > ul li a {
	outline: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 8px 20px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
#cssmenu-bottom ul li > ul li a:hover { background: #000; }
#cssmenu-bottom, #cssmenu-bottom ul > li > ul > li a:hover { } 
#cssmenu-bottom { border-color: #000; }
#cssmenu-bottom > ul > li:first-child {} 
#cssmenu-bottom > ul > li > a:hover { text-decoration: underline;}
/* CREDIT */
.credit {float: right; text-align: right; font-family: Arial, Helvetica, sans-serif; color: #707070; margin-bottom: 25px; margin-right: 10px; line-height: 17px; font-size: 12px;}
/* CONTACT PAGES */
#contacleft {float: left; width: 300px; margin-top: 15px;}
#contactright {float: right; width: 682px; margin-bottom: 60px; margin: -20px 20px 60px 0px;}
h1.pagetitlecontact {font-family: 'BebasNeue-webfont'; font-size: 30px; color: #f96817; line-height: 30px; padding-top: 42px;}
.thecontact h3 {font-size: 18px; color: #000; font-family: Arial, Helvetica, sans-serif;}
.vtop { vertical-align: top !important; }
.vright { text-align: right; }
.vpeksobutton {}
.vpekso {float: right; width: 375px; margin-top: 30px; margin-right: 30px;}
.contactnote { color: #000; text-align: center; line-height: 20px; }
.contactarea {
	background: rgba(0,0,0,1);
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(61,60,61,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(61,60,61,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3d3c3d', GradientType=0 );
	padding: 28px 0 40px 0;
	margin: 24px 0 0 0;
	position: relative;
}
.tabcontact { width: 100%; }
.tabcontact td { padding: 4px; font-size: 12px; line-height: 16px; vertical-align: middle; color: #fff;}
.tabcontact .textcontact { margin: 0; border: 1px solid #333; }
.privacynote { font-size: 11px; font-style: italic; line-height: 15px; color: #fff; }
.conbutton {
	background: #f96817;
	padding: 14px 20px;
	width: auto;
	display: block;
	cursor: pointer;
	color: #ffffff;
	font-size: 23px;
	border: 1px solid #f96817;
	border-radius: 15px;
	margin: 30px 0 0 0;
	position: relative;
	left: 35px;
}
.conbutton:hover { background: #e65200;}
.textcontact {
	padding: 6px;
	margin: 0 auto 12px auto;
	width: 275px;
	display: block;
	color: #000;
	border: 1px solid #898989;
	background: #e1e1e1;
}
.textcontact:hover { box-shadow: 0 0 4px #000; }
.textcontact:focus { box-shadow: 0 0 4px #000; background: #FFF; border: 1px solid #333; color: #000; }
.required { font-size: 12px; color: #fff; float: right; padding: 10px 0px 0px 20px;}
.notifno, .notifyes {
	padding: 4px;
	border: 1px solid #FFF;
	border-radius: 4px;
	font-size: 12px !important;
	line-height: 16px !important;
	text-align: center !important;
	color: #FFF;
	margin: 37px 5px;
}
.notifno { background: #f96817; }
.notifyes { background: #E65200; }
.conloader { display: none; float: left; margin-left: 45px; margin-top: -50px; }
.conloader2 { position: absolute; left: 40px; bottom: 110px; display: none; }
.noticecontact { color: #fff; font-size: 10px; line-height: 15px; margin: 0 auto; text-align: center; padding-bottom: 8px;}
.noticecontact a { color: #f96817; text-decoration: underline; }
.noticecontact a:hover { color: #fff; }
/* GALLERY PAGES */
h1.pagetitlegallery {font-family: 'BebasNeue-webfont'; font-size: 28px; color: #f96817; line-height: 28px; padding-top: 42px;}
#gallleft {float: left; width: 300px; margin-top: 5px;}
#gallleft p {color: #000;}
#gallright {float: right; width: 682px; margin-bottom: 60px; margin: -40px 20px 60px 0px;}
.contentgall {margin: 15px auto 0px;}
.contentgall p {line-height: 18px;}
.gallerymenu {margin-top: 21px;}
.gallerymenu ul {padding-left: 15px;}
.gallerymenu li {list-style: url(images/arrow-img.png); line-height: 32px; font-size: 14px;}
.gallerymenu ul li a {color: #f96817;}
/* GALLERY PAGE */
.subgal { margin: 0 0 24px 8px; }
.albumbox {
	float: left;
	margin: 0 12px 24px 12px;
	text-align: center;
	width: 164px;
	border: 2px solid #C1B3A3;
	cursor: pointer;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}
.albumbox:hover { border: 2px solid #9E0B0F; }
.albumtitle {
	background: #000;
	display: table-cell;
	height: 40px;
	vertical-align: middle;
	color: #FFF;
	width: 164px;
	margin: 0 auto;
	font-size: 12px;
	line-height: 16px;
}
.galpilih { border: 2px solid #9E0B0F; box-shadow: 0 0 4px #333; }
.galpilih .albumtitle { background: #9E0B0F; }
.galtop { color: #fff; margin-top: 28px; text-align: center; background: #acacac; padding: 10px 10px; min-width: 190px; max-width: 215px; font-size: 18px;}
.galdesc { color: #000;text-align: left; font-size: 14px; line-height: 19px; width: 675px; height: 90px; overflow: auto;}
.galitem { position: relative; }
.galimage {width: 585px;}
.pictext {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: auto;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	padding: 2px 0 1px 0;
	background: rgba(0,0,0,0.32);
}
.maingal .flexslider { position: relative; width: 685px;}
.maingal .flex-control-nav { position: absolute; right: 8px; bottom: 8px; text-align: right; }
.callgal {font-size: 28px; line-height: 30px; margin: 95px 0px 42px 80px; color: #000; font-family: 'BebasNeue-webfont';}
.maingal .flex-direction-nav a {opacity: 1 !important; transition: none !important; width: 67px; height: 51px; margin: -41px 0 0 0;}
.maingal .flexslider:hover .flex-prev { top: 320px; left: -61px !important; }
.maingal .flexslider:hover .flex-next { top: 320px; right: 40px !important; }
.maingal .flexslider .flex-prev { top: 320px; left: -61px; background: url(images/bigprev.png) center top no-repeat transparent !important; border-radius: 0; }
.maingal .flexslider .flex-next { top: 320px; right: 40px; background: url(images/bignext.png) center top no-repeat transparent !important; border-radius: 0; }
.maingal .flexslider .flex-prev:hover { background: url(images/bigprev-hover.png) center bottom no-repeat transparent !important;}
.maingal .flexslider .flex-next:hover { background: url(images/bignext-hover.png) center bottom no-repeat transparent !important;}
#bigalbumloader {position: absolute; left: 50%; bottom: 50%; margin-bottm: -16px !important; display: none;}
.maingal { position: relative; height: 374px; }
.galnoticebox { height: 48px; }
.galnotice {text-align: center; font-size: 12px; line-height: 16px; padding: 16px 0; font-style: italic; color: #9e0b0f;}
/* FlexSlider Necessary Styles*/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }
#rightgal #carousel .slides li { margin-right: 12px; cursor: pointer; padding: 2px; background: none; }
#rightgal #carousel .slides li:hover, #rightgal #carousel .thumbpilih { background: #958470 !important; box-shadow: 0 0 4px #333; }
#rightgal #carousel { width: 218px; margin: 10px auto; padding: 2px 8px; }
#boxslider, #carousel.flexslider {margin: 0 auto 40px auto; position: relative; width: 340px; overflow: hidden;}
.widgetbackg {background: #616161; padding: 3px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 20px;}
.widgettitle {text-align: center; color: #f96817;}
.widgetdesc {text-align: center; color: #fff; font-size: 12px;}
#carousel.flexslider { height: auto; width: auto; }
#albumloader {position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px;display: none;}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { display: block; width: 24px; height: 32px; margin: -16px 0 0; position: absolute; top: 50%; z-index: 1000; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; background: url(images/prev.png) center center no-repeat #FFF; border-radius: 0 4px 4px 0; }
.flex-direction-nav .flex-next { right: -50px; background: url(images/next.png) center center no-repeat #FFF; border-radius: 4px 0 0 4px; }
.flexslider:hover .flex-prev { opacity: 1; left: 0; }
.flexslider:hover .flex-next { opacity: 1; right: 0; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-size: 40px; display: inline-block; content: ''; }
.flex-direction-nav a.flex-next:before  { content: ''; }
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-size: 20px; display: inline-block; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(255,255,255,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* GOOGLE MAPS PLUGIN*/
.google-map-placeholder {border: none!important;}
/* SINGLE PAGE */
.artikelblogmeta {margin-bottom: 10px; font-size: 12px; font-style: italic;}
.artikelblogmeta a {text-decoration: none; color: #F96817;}
.ekserp {font-size: 14px; line-height: 20px; margin-bottom: 15px;}
.artthumb { float: left; margin: 3px 14px 4px 0; }
.artthumb img { padding: 2px; border: 1px solid #B6B6B6; border-radius: 3px; background: #EDEDED; }
.readmore #buttonred-blog {margin-top: 15px;}
#buttonred-blog {
	background-color:#F96817;
	border:1px solid #F96817;
	display:inline-block;
	color:#ffffff;
	font-size:14px;
	padding:5px 15px;
	text-decoration:none;
	cursor: pointer;
}
#buttonred-blog:hover {	background: #E65200;}
/* SHARING */
.sharing { margin: 10px 0; }
.sharing .sharenote {
	float: left;
	font-size: 14px;
	padding: 10px 15px 0 5px;
	font-weight: bold;
	color: #FFF;
}
.sharing .addkiri { float: left; }
.sharing .addkanan { float: left; width: 450px; }
.sharing { background: #616161; padding: 5px 0 5px 10px; margin-top: 50px; border-radius: 3px; line-height: 0; }
.addthis_button_favorites img { margin-right: 20px; }
.twitter-share-button { width: 100px !important; }
.fb-like { width: 95px; }
.addthis_button_pinterest { margin-right: 20px; }
/* COMMENTS */
.komentar { margin-top: 40px; }
#respond h3 {
    border-bottom: 1px dotted #C3C3C3;
    font-size: 16px;
    letter-spacing: normal;
    margin-bottom: 10px;
    padding: 0 0 5px 0;
	color: #E65200;
}
#commentform input { margin-bottom: 5px; }
#comments a { color: #3C4236; }
#comments small { font-size: 10px; }
#comments a:hover { color: #900; }
.fn a, .comment-meta a {  text-decoration: none !important; color: #000;}
.comnavi {
	border-bottom: 1px dotted #999999;
	border-top: 1px dotted #999999;
    margin: 10px 0;
    padding: 0 10px 1px 10px;
	background: #FFF0D2;
	font-size: 11px;
}
.comment-body {
	border: 1px solid #C3C3C3;
	border-radius: 5px;
	padding: 5px 15px 15px 15px;
	margin-bottom: 10px;
	background: #f2f2f2;
	clear: both;
}
.comment-body p {
	clear: both;
	border-top: 1px solid #C3C3C3;
	padding: 10px 0 !important;
	margin-top: 5px !important;
	font-size: 14px;
	line-height: 18px;
}
.comment-author .avatar { float: left; position: relative; top: 4px; }
.comment-meta { float: right; font-size: 11px; margin: 26px 0 0 0; display: block; }
cite.fn { margin: 15px 5px 0 10px; float: left; font-weight: bold; font-style: normal; position: relative; top: 6px; }
span.says { display: none; }
.commentlist ul li { list-style: none !important; margin: 0 0 0 30px; }
ol.commentlist li { list-style: none; }
ol.commentlist { margin: 0; }
.reply { float: right; display: block; margin: -10px -7px 0 0; }
.reply a {
	padding: 2px 5px 2px 7px;
	background: #E65200;
	border: 1px solid #FFF;
	font-size: 11px;
	border-radius: 3px;
	color: #fff;
}
.reply a:hover { background: #E65200; color: #000 !important; text-decoration: none; }
#respond {
	border: 1px solid #C3C3C3;
	border-radius: 5px;
	padding: 15px 20px;
	margin: 5px 0 50px 0;
	background: #f2f2f2;
}
h3#comments {
    font-size: 14px;
    letter-spacing: normal;
    margin-bottom: 10px;
	padding: 0 0 0 10px;
	color: #000;
}
#commentform p { margin-bottom: 5px; padding: 0; font-size: 13px; }
#commentform input {
	width: 230px;
	margin-right: 5px;
	border: 1px solid #C3C3C3;
	background: #fffcf2;
	color: #6d8699;
	font-size: 12px;
	padding: 5px 0 5px 10px;
	border-radius: 3px;
}
#commentform textarea {
	border: 1px solid #C3C3C3;
	background: #fffcf2;
	color: #6d8699;
	font-size: 12px;
	padding: 5px;
	border-radius: 3px;
}
#commentform input:hover, #commentform textarea:hover { border: 1px solid #504d48; box-shadow: 0 0 3px #999; }
#commentform input:focus, #commentform textarea:focus {
	border: 1px solid #504d48;
	box-shadow: 0 0 3px #999;
	background: #fff;
	color: #4C5258;
}
#commentform textarea { width: 98%; height: 90px; }
#cancel-comment-reply-link { font-weight: bold; margin-bottom: 10px; display: block; }
.comment-awaiting-moderation {
	float: left;
	margin: 30px 0 0 5px;
	font-size: 11px;
	line-height: 2px;
	display: block;
}
#commentform #submit {
	width: auto;
	padding: 5px 10px;
	color: #FFF;
	background: #E65200;
	cursor: pointer;
	border: 2px solid #d4d4d4;
}
#commentform #submit:hover { border: 2px solid #FFF; box-shadow: 0 0 5px #333; }
.form-allowed-tags { display: none; }
.pertanyaan {
	font-size: 16px;
	margin: 30px 0 15px 5px;
	padding: 0 0 5px 5px;
	border-bottom: 1px dotted #2B4E64;
}
/* PAGE 404 */
.homeboxes-404 {float: left; margin-bottom: 30px;}
.homeboxes-404 h3 {
	font-size: 16px;
	line-height: 20px;
	padding: 10px 0 8px;
	margin-bottom: -5px;
}
.homeboxes-404 ol, .homeboxes-404 ul {margin: 0 0 10px 15px;}
.homeboxes-404 ul li {
	font-size: 14px;
	line-height: 18px;
	list-style: disc outside none;
}
.homeboxes-404 a {color: #666666; text-decoration: none;}
.homeboxes-404 a:hover {color: #000000; text-decoration: underline;}
/* SITEMAP */
#wp-realtime-sitemap-pages {margin-bottom: 30px;}
#wp-realtime-sitemap-pages a {color: #666666;}
#wp-realtime-sitemap-pages a:hover {color: #000; text-decoration: underline;}


.rcorners2 {
    border-radius: 25px;
    border: 3px solid #6b6b6b;
    padding: 20px; 
    width: 600px;
    height: 20; 
}



.h13 {
        background-image: url("https://ocgaragedoorsandgates.com/wp-content/uploads/2015/06/pricelist3.jpg");
height: 350px;
width: 311px;


}

.h14{
font-weight:bold;
font-style:italic;
color:#000000;
font-size: 12px;
  padding-top: 5px;
    padding-bottom: 5px;
  margin-top: 5px;
margin-bottom: 5px;
margin:15px 
}

.h15{

font-style:italic;
color:#000000;
font-size: 14px; padding-top: 5px;
    padding-bottom: 5px; margin-top: 5px;
margin-bottom: 5px;
margin:15px 
}

.h16{
font-weight:bold;
font-style:italic;
color:#000000;
font-size: 16px;
  padding-top: 5px;
    padding-bottom: 5px;
  margin-top: 5px;
margin-bottom: 10px;
margin:15px ;
}

.h17{
font-weight:bold;
font-style:italic;
color:#000000;
font-size: 16px; padding-top: 5px;
    padding-bottom: 5px; margin-top: 5px;
margin-bottom: 10px;
margin:15px ;
}


.navbarfix{
padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
 background-color: #FFFFFF;
}

.menu-mobi{ display:none;}
#licensed {display: none; float: right; text-transform: uppercase; margin-top: -3px;}
#licensed #cssmenu-second > ul > li {color: #ccc;}
.wp-pagenavi {padding: 20px 0;}
/* RESPONSIVE */
@media screen and (max-width:1024px) {
	.wrapper {width: 95%;}
	#cssmenu-middle > ul > li > a {padding: 18px 40px;}
	.slider-quote {width: 623px; overflow: hidden;}
	.coupon-banner {width: 30%; height: auto; padding: 0 10px 10px;}
	.wrap-homecontent {width: 95%; padding-bottom: 20px;}
	#gallleft {width: 190px;}
	#contacleft {float: none; margin: 0 auto 15px; width: auto; text-align: center;}
	#contactright {float: none; margin: 0 auto; padding: 0 0 20px;}
	.credit {margin-top: 25px;}
	.rcorners2 {width: auto;}
}
@media screen and (max-width:805px) {
	#cssmenu-middle > ul > li > a {padding: 18px 20px;}
	.slider-quote {width: 100%; float: none;}
	.homeslider {padding: 4px;}
	.soliloquy-container {overflow: hidden;}
	.homequote {display: none;}
	.thehomecontent {float: none; width: auto;}
	.sidebarhome {float: none; margin: 0 auto 25px;}
	#gallleft {float: none;}
	#gallright {float: none; margin: 0 auto; width: auto;}
	.callgal {margin: 15px auto 0; text-align: center; padding-bottom: 15px;}
	.maingal {height: auto;}
	.maingal .flexslider, .galdesc {width: auto;}
	.galimage {width: 100%;}
	.maingal .flexslider .flex-prev {left: 10px;}
	.maingal .flexslider:hover .flex-prev {left: 10px!important;}
	.maingal .flexslider .flex-next {right: 10px;}
	.maingal .flexslider:hover .flex-next {right: 10px!important;}
	.banner-homewid img {padding: 0 0 10px; width: 33%;}
	#cssmenu-bottom > ul > li {margin: 0 -4px 10px 0;}
}
@media screen and (max-width:660px) {
	.topmenu-header, #cssmenu-middle, .secmenu-header {display: none;}
	#licensed {display: block;}
	.logo-header img {width: 250px; height: auto;}
	.menu-mobi{ display:block;}
	.menu-mobi ul li { margin-bottom:5px; display:block; border-radius:3px; overflow:hidden;}
	.menu-mobi ul li ul.sub-menu { margin-top: 5px;}
	.menu-mobi ul li a {
		display:block; text-decoration:none; padding:10px;
		-webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px; padding: 10px 10px 10px 10px; text-decoration:none;font-weight:bold; color: #000;
		background: #ccc;
	}
	.menu-mobi ul li a:hover { background:#f96817; color:#fff;}
	#flip {
		padding: 10px 11px;
		text-align: left;
		background: #292929;
		box-shadow:1px #000;
		color:#fff;
		box-shadow:inset 0 0 3px #666;
		height: 24px;
	}
	#flip img {cursor: pointer;}
	#panel {background:#383838;padding:5px;display:none;box-shadow:3px #000;}
	.wrap-headerleft, .wrap-headerright {float: none; margin: 0 auto; text-align: center;}
	.logo-header {float: none; margin: 15px auto;}
	.calltoday-top {float: none; margin: 0 auto 15px;}
	.coupon-banner {padding: 0 0 10px; width: auto;}
	.wrap-footer {text-align: center;}
	.foot-menu {float: none; display: inline-block; margin: 0 auto 15px; text-align: center;}
	#cssmenu-bottom li {background: none;}
	.credit {float: none; display: inline-block; text-align: center; margin: 0 auto; width: 100%;}
	#contactright {width: auto;}
	.tabcontact {width: 95%; table-layout: fixed; min-width: 250px; margin: 0 auto;}
	.tabcontact tr {display: inline; font-size: 0;}
	.tabcontact tr td {width: 100%; display: inline-block; margin: 0 0 10px; padding: 0; font-size: 1rem;}
	.vright {text-align: left;}
	.conbutton {left: 0;}
	.vpekso {float: none;}
	#content_2685 table {display: none;}
}
@media screen and (max-width:550px) {
	.cgmp-centering-container-handle {overflow: hidden;}
	.sidebarhome, #boxslider, #carousel.flexslider {width: 100%;}
}
@media screen and (max-width:480px) {
	#cssmenu-second > ul > li {font-size: 16px;}
	.coupon-banner {width: 90%;}
	.textwidget > img, .textwidget > a > img {width: 100%;}
	#cssmenu-bottom > ul > li {margin: 0 auto 10px;}
}
@media screen and (max-width:350px) {
}