/*
Author: Rollie Osayan
Author URI: http://www.fb.me/osayan.rollie
Version: 1.0
*/

@charset "utf-8";


/* --------------------------------------- *\
   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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a img { border: none; }
a { outline: none; }
.clear { clear: both; }


/* --------------------------------------- *\
   GLOBAL
\* --------------------------------------- */
html, body { height:100%; overflow-y:hidden; }
body { font:11px 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; color:#555; }	


/* --------------------------------------- *\
   HEADER
\* --------------------------------------- */
header.red-bar { z-index:999; position:fixed; width:100%; height:12px; padding:5px 0; background-color:#cc0001; -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.25); box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.25); }
header.red-bar .inner { position:relative; width:960px; margin:0 auto; color:#fff; font-size:9px; text-indent:3px; }
header.red-bar .inner .social { position:absolute; width:150px; margin-left:355px; margin-top:50px; } 
header.red-bar .inner .social .fb { overflow:hidden; display:inline-block; width:15px; height:15px; padding:5px; background:#ddd url("../img/fb.png") no-repeat center 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }
header.red-bar .inner .social .tw { overflow:hidden; display:inline-block; width:15px; height:15px; padding:5px; background:#ddd url("../img/tw.png") no-repeat center 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }
header.red-bar .inner .social .in { overflow:hidden; display:inline-block; width:15px; height:15px; padding:5px; background:#ddd url("../img/in.png") no-repeat center 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }
	
header.red-bar .inner .social .fb:hover, header.red-bar .inner .social .tw:hover, header.red-bar .inner .social .in:hover { cursor:pointer; cursor:hand; background-color:#cc0001; }


/* --------------------------------------- *\
   FOOTER
\* --------------------------------------- */
footer.red-bar { color:#fff; font-size:9px; position:fixed; bottom:0; width:100%; height:12px; padding:5px 0; background-color:#cc0001; /*-webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75); box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75); -webkit-box-shadow: 0px -5px 10px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px -5px 10px rgba(50, 50, 50, 0.25); box-shadow: 0px -5px 10px rgba(50, 50, 50, 0.25);*/ }
			

/* --------------------------------------- *\
   CONTENT HEADER
\* --------------------------------------- */
.content-header { position:fixed; top:190px; right:0; padding:5px 0; background-color:#cc0001; text-indent:35px; font-size:18px; font-weight:bold; color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.25); box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.25); }
.header-inner { display:none; width:99%; padding:5px 0; margin-bottom:28px; font-size:18px; font-weight:bold; color:#cc0001; }


/* --------------------------------------- *\
   MAIN
\* --------------------------------------- */
.main { position:relative; width:960px; margin:0 auto; padding:50px 0; }
.main .left-pane { width:250px; float:left; }
.main .left-pane .logo-wrapper { width:250px; height:304px; background:url("../img/cvo.png") no-repeat center top; }
.main .left-pane .main-menu { width:100%; margin-top:50px; }
.main .left-pane .main-menu ul { width:100%; }
.main .left-pane .main-menu ul li { margin:5px 0; background-color:#bbb; padding:10px 0; -webkit-border-radius:9px; -moz-border-radius:9px; border-radius:9px; }
.main .left-pane .main-menu ul li:hover { background-color:#cc0001; }
.main .left-pane .main-menu ul li.current { background-color:#cc0001; }
.main .left-pane .main-menu ul li a { display:block; padding:0 20px; text-decoration:none; font-size:15px; font-weight:bold; color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5); }
	
.main .right-pane { width:500px; padding:50px 105px; float:right; }
.main .right-pane .slider { height:170px; width:495px; margin-bottom:7px; margin-bottom:0.5rem; }

.main .right-pane #company-profile, .main .right-pane #services, .main .right-pane #contact-us, .main .right-pane #portfolio, .main .right-pane #sample1, .main .right-pane #sample2 { display:none; }
		
.main .right-pane .tri-img-wrapper { float:right; height:80px; width:100%; overflow:hidden; }
.main .right-pane .tri-img-wrapper .static-img { float:left; }
.main .right-pane .tri-img-wrapper .static-img img { margin:0 3px; -webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); }
.main .right-pane .tri-img-wrapper .static-img img:nth-child(1) { margin-left:0 !important; }
.main .right-pane .tri-img-wrapper .img { float:right; position:relative; overflow:hidden; margin:0 4px; width:75px; height:75px; background:#efefef; -webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); } 
		
.main .right-pane .content-wrapper { clear:both; margin-top:150px; width:100%; }
.main .right-pane .content-wrapper p { margin-bottom:14px; margin-bottom:1rem; text-align:justify; color:#777; }
.main .right-pane .content-wrapper h1 { padding-top:10px; font-size:15px; font-weight:bold; color:#cc0001; /*text-shadow:1px 1px 1px rgba(0, 0, 0, 0.25);*/ }
.main .right-pane .content-wrapper p.link-to-hidden-content { display:inline-block; float:right; font-size:12px; color:#cc0001; font-weight:bold; opacity:1; cursor:pointer; cursor:hand; }
.main .right-pane .content-wrapper p.link-to-hidden-content img, .link-to-hidden-content-under-development img { opacity:.7; }
.main .right-pane .content-wrapper p.link-to-hidden-content img:hover, .link-to-hidden-content-under-development img:hover { opacity:1; }
.main .right-pane .content-wrapper p a { text-decoration:none; color:orange; }
			
.main .right-pane .content-wrapper .address { display:inline-block; float:left; width:50%; }
.main .right-pane .content-wrapper .contact-form { display:inline-block; float:right; width:50%; }
.main .right-pane .content-wrapper .contact-form input[type="text"], .main .right-pane .content-wrapper .contact-form textarea { margin-top:5px; border:1px solid #cdcdcd; outline:none; font:12px 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; margin-right:5px; padding:8px 10px; width:98%; background-color:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.main .right-pane .content-wrapper .contact-form input[type="text"]:focus, .main .right-pane .content-wrapper .contact-form textarea:focus { outline:none; border-color:rgba(82, 168, 236, 0.8); outline:0; outline:thin dotted 9; ebkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }
.main .right-pane .content-wrapper .contact-form input[type="submit"] { float:left; letter-spacing:1px; margin:10px 0 0 0; padding:10px 15px; outline:none; width:auto;  height:auto; color:#FFF; background:#ddd; /*background-position:left -80px;  background:-moz-linear-gradient(#73d940,#54bf1f); background:-webkit-linear-gradient(#73d940,#54bf1f); background:-ms-linear-gradient(#73d940,#54bf1f); background:linear-gradient(#73d940,#54bf1f); */ border:1px solid #ddd; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.75); border-radius:5px; -moz-border-radius:5px; -web-kit-border-radius:5px; -khtml-border-radius:5px; }
.main .right-pane .content-wrapper .contact-form input[type="submit"]:hover { background:#ddd; opacity:1; }
				
.main .right-pane .content-wrapper .contact-form .loader { opacity:0; display:inline-block; width:16px; height:16px; margin:20px 0 0 25px; background:url("../img/ajax-loader.gif") no-repeat center top; }
.main .right-pane .content-wrapper .contact-form .error { display:none; margin-top:25px; padding:10px; color:#b4a47b; background:#f8f7ef; border:1px solid #cdcdcd; }
.main .right-pane .content-wrapper .row { display:block; width:100%; margin-top:25px; }
.main .right-pane .content-wrapper .row:nth-child(1) { margin-top:0 !important; }
		
.main .right-pane .content-wrapper .row .left { background-color:#efefef; margin-left:5px; width:150px; height:250px; float:left; -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); }
.main .right-pane .content-wrapper .row .left:hover { background-color:#cc0001; }
	
.main .right-pane .content-wrapper .row .center { background-color:#efefef; margin-left:18px; width:150px; height:250px; float:left; -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); }
.main .right-pane .content-wrapper .row .center:hover { background-color:#cc0001; }
					
.main .right-pane .content-wrapper .row .right { background-color:#efefef; width:150px; height:250px; float:right; -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5); }
.main .right-pane .content-wrapper .row .right:hover { background-color:#cc0001; }	
				
.main .right-pane .content-wrapper .row .left:hover .img-wrapper img { opacity:1; cursor:pointer; cursor:hand; }
.main .right-pane .content-wrapper .row .center:hover .img-wrapper img { opacity:1; cursor:pointer; cursor:hand; }
.main .right-pane .content-wrapper .row .right:hover .img-wrapper img { opacity:1; cursor:pointer; cursor:hand; }
						
.main .right-pane .content-wrapper .row .img-wrapper { padding:0 10px; width:130px; height:150px; display:table-cell; vertical-align:middle; text-align:center; }
.main .right-pane .content-wrapper .row .img-wrapper img { opacity:0.5; }
			
.main .right-pane .content-wrapper .row .text-wrapper { background-color:#fff; padding:10px 17px 0; width:116px; height:90px; }
				
.main .right-pane .content-wrapper .row .text-wrapper h1 { font-size:11px; }
.main .right-pane .content-wrapper .row .text-wrapper p { font-size:10px; text-align:left; }
							

/* --------------------------------------- *\
   POP UP
\* --------------------------------------- */
#fadePop { position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); z-index:9999; }
#pop { background-color:#fff; width:650px; height:500px; top:50%; left:50%; margin:-253px -328px; position:fixed; z-index:99999; border:3px solid #cc0001; border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; }	
#pop .head-logo-wrapper { padding:25px 75px; }

#pop .head-text-wrapper { width:100%; }
#pop .head-text-wrapper .red-box { float:left; width:80%; background-color:#cc0001; color:#fff; border-radius:0 20px 20px 0; -moz-border-radius:0 20px 20px 0; -khtml-border-radius:0 20px 20px 0; }
#pop .head-text-wrapper .red-box  .text { padding:25px 50px; }
#pop .head-text-wrapper .red-box  .text .left { float:left; display:inline-block; }
#pop .head-text-wrapper .red-box  .text .right { float:right; display:inline-block; }

#pop .head-text-wrapper  .c-v-o { float:right; margin-right:25px; width:85px; height:104px; background:url("../img/cvo.png") no-repeat center top; background-size:cover; } 
#pop .full-text { padding:25px 50px; }	

							
/* --------------------------------------- *\
   SCROLL
\* --------------------------------------- */	
.jspContainer { overflow:hidden; position:relative; }
.jspPane { position:absolute; }
.jspVerticalBar { position:absolute; top:0; right:0; width:5px; height:100%; background:#cc0001; opacity:1; }
.jspHorizontalBar { position:absolute; bottom:0; left:0; width:100%; height:10px; background:#cc0001; }
.jspVerticalBar *, .jspHorizontalBar * { margin:0; padding:0; }
.jspCap { display:none; }
.jspHorizontalBar .jspCap { float:left; }
.jspTrack { background:#fff; position:relative; }
.jspDrag { background:#cc0001; position:relative; top:0; left:0; cursor:pointer;border-radius:5px; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float:left; height:100%; }
.jspArrow { background:#cc0001; text-indent:-20000px; display:block; cursor:pointer; }
.jspArrow.jspDisabled { cursor:default; background:#80808d; }
.jspVerticalBar .jspArrow { height:10px; }
.jspHorizontalBar .jspArrow { width:10px; float:left; height:100%; }
.jspCorner { background:#fff; float:left; height:100%; }
* html .jspCorner { margin: 0 -5px 0 0; }, #adPop #adPop-boxes #b-b:hover, #adPop #adPop-boxes #b-c:hover { background-color: rgba(255,206,133,0.65); border: 1px solid rgba(9,79,0,0.8); -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; }


@media only screen and (min-width: 768px) {
	.main .right-pane .content-wrapper { height:325px; }
}
/* -------------------------------------- *\
   FOR SCREEN BELOW 960 WIDTH
\* -------------------------------------- */
@media (min-width: 768px) and (max-width: 959px) {

	html, body { height:auto; overflow-y:auto; }
	header.red-bar .inner { width:100%; text-align:center; }
	header.red-bar .inner .social { width:150px; margin:20px auto 0; position:relative; } 
	.main { width:768px; margin:0 auto; padding:50px 0; }
	.main .left-pane { width:250px; float:left; }
	.main .right-pane { width:500px; padding:50px 5px; float:right; }

}

@media (min-width: 481px) and (max-width: 767px) {

	html, body { height:auto; overflow-y:auto; }
	header.red-bar .inner { width:100%; text-align:center; }
	header.red-bar .inner .social { display:none; } 
	
	.main { width:100%; margin:0 auto; padding:50px 0; }
	.main .left-pane { width:481px; float:none; margin:0 auto 50px; }
	.main .left-pane .logo-wrapper { float:left; }
	.main .left-pane .main-menu { float:right; width:200px; margin-top:50px; }
	
	.main .right-pane { width:481px; padding:50px 0; float:none; margin:0 auto; }
	.main .right-pane img { max-width:100%; }

	.main .right-pane .slider { height:170px; width:481px; margin-bottom:7px; margin-bottom:0.5rem; }
	.main .right-pane img { max-width:100%; }
	.main .right-pane .tri-img-wrapper { margin:50px 0; }
	.main .right-pane .tri-img-wrapper img { max-width:70px; }
	.main .right-pane .tri-img-wrapper .img { width:70px; height:70px; }

	.main .right-pane .content-wrapper .row .left,
	.main .right-pane .content-wrapper .row .center,
	.main .right-pane .content-wrapper .row .right { width:144px; }
	.main .right-pane .content-wrapper .row .text-wrapper { padding:10px 15px 0; width:114px; height:90px; }

	.main .right-pane .content-wrapper .address { padding-bottom:50px; }

}

@media (max-width: 480px) {	

	html, body { height:auto; overflow-y:auto; }
	header.red-bar .inner { width:100%; text-align:center; }
	header.red-bar .inner .social { display:none; } 
	
	.main { width:100%; margin:0 auto; padding:50px 0; }
	.main .left-pane { width:100%; float:none; margin:0 auto 50px; }
	.main .left-pane .logo-wrapper { float:none; width:250px; margin:0 auto; }
	.main .left-pane .main-menu { float:none; width:100%; margin:0 auto; }
	
	.main .left-pane .main-menu ul li { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
		
	.main .right-pane {  margin-top:-100px; width:80%; padding:10px 10%; float:none; }
	.main .right-pane img { max-width:100%; }

	.main .right-pane .tri-img-wrapper,
	.main .right-pane .slider { display:none; }
	.main .right-pane .content-wrapper { margin-bottom:50px; }

	.main .right-pane .content-wrapper .row { margin-top:0; }
	.main .right-pane .content-wrapper .row .left,
	.main .right-pane .content-wrapper .row .center,
	.main .right-pane .content-wrapper .row .right { width:115px; margin:10px 4px; }
	.main .right-pane .content-wrapper .row .right { clear:both; float:none; width:115px; margin:10px auto; }
	.main .right-pane .content-wrapper .row .text-wrapper { padding:10px 5px 0; width:105px; height:90px; overflow:hidden; }

	.main .right-pane .content-wrapper .address,
	.main .right-pane .content-wrapper .contact-form { padding-bottom:50px; float:none; width:100%; } 	

}