/* BASICS */
body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.7em; background: white; color: #838282; }

.page-container { overflow: hidden; }

a { color: #838282; text-decoration: underline; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a:hover { color: #666666; text-decoration: none; }
a:focus {outline:none}
a:visited{text-decoration:none}

h1, h2, h3, h4, h5, h6 { font-family: "Corki", serif; color: #70ac08; margin-top:0; }

h1 { font-size: 72px; margin-bottom:25px; }

h2 { font-size: 50px; line-height:50px; margin-bottom:18px; text-transform:uppercase;}

h3 { font-size: 40px; margin-bottom:20px }

h4 { font-size: 32px; margin-bottom:20px }

h5 { font-size: 26px; margin-bottom:20px}

h6 { font-size: 20px; margin-bottom:20px;}

blockquote { border: none; padding: 0; margin: 0; }
blockquote a { font: italic 20px/34px "Times New Roman", serif; text-decoration:none;}
cite{color:#e04739; margin-top:15px; display:block; font-weight:bold;}

blockquote small { font: 16px "Montserrat", sans-serif; text-transform: uppercase; color: #6dbe4b; }
blockquote small::before { content: ""; }
blockquote small .occupation { font: 13px "Montserrat", sans-serif; color: #999999; display: block; }

/*img { max-width: 100%;}*/


@font-face {
    font-family: 'Corki';
    src: url('../fonts/Corki-Regular.otf'); src: url('../fonts/Corki-Regular.otf') format('opentype'), url('../fonts/Corki-Regular.eot') format('embedded-opentype'), url('../fonts/Corki-Regular.svg') format('svg'), url('../fonts/Corki-Regular.woff') format('woff'), url('../fonts/Corki-Regular.ttf') format('truetype'); 
	font-weight: normal;
    font-style: normal;
}
h2 span{color:#ea0941}

/* Navigation and Main Banner */
.header-bg{
background-color: rgba(0, 0, 0, 0.50);
/*background:#cc0033;*/
    color: #cdcccc;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.nav > li > a:hover, .nav > li > a:focus {background:none; color:#d4d4d4;}
.navbar-brand {visibility:hidden}
.navbar-brand {background:url(../img/logo-vgraphics-small.png) 5px 15px no-repeat; display:block; width:145px;  text-indent:-9999px;}
.navbar{margin-bottom:0; border:none;}
.navbar-nav{ width:100%; margin:0 0 0 0; padding:0;}
.nav>li{padding:0 3%; position:relative; height:70px;}
.nav>li>a{margin:0; padding:0; font-size:16px; text-transform:uppercase; text-decoration:none; color:#FFF; line-height:45px; padding:0 25px 25px 25px}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li a:hover{color:#293a4a; background:url(../img/hover.png) center bottom no-repeat}
.logo-vg{background:url(../img/logo.png) center top no-repeat; display:inline-block; width:163px; height:115px; line-height:150px; float:left; margin-top:20px;}
.logo-vg a{}
.navbar-collapse.collapse {float:left; width:80%; padding-top:44px;}


.body{padding: 4% 0 0 0;}

/* Home: Services */
.services{/*text-align:center;*/ overflow:hidden; padding: 0 0 3% 0;}
.services a{width: auto; height: auto; padding:5%; display:block; text-decoration:none}
.services a:hover{-moz-box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); -o-box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); cursor:pointer}
.services a:hover h4{color:#e04739}
.services img{margin-bottom:25px; width:auto; height:77px; overflow:hidden;}
.service-fullad,.service-halfad{overflow:hidden; text-align:center}
.service-fullad img{margin-top:5%}
.service-halfad img{margin-top:10%}



/* Home: Ad Block */
.fullad, .halfad{text-align:center;}
.fullad img{margin-bottom:5%}
.halfad img{margin-bottom:10%}


/* Home: Recent Works */
.recent-works{background-color:#f6f6f6; text-align:center; padding:3% 0 0 0;}
.recent-works ul{list-style:none; margin:0; padding:0 0 3% 0; overflow:hidden;}
.project-items { /*border: 1px solid #fff;
    height: 250px;*/
    margin-bottom:30px;
    overflow: hidden;
}
.project-items a{display: block; border:1px solid #ccc; overflow:hidden;}
.project-items span{position:absolute; margin-left:16px; bottom:0; left:0; padding:0 5px; background:#70ac08; border-bottom:1px solid #ccc; color:#FFF;}
.project-items img {}
.project-items .project-overlay { position: absolute; text-align: center; width:260px; height:164px; background: rgba(0, 0, 0, 0.10); color: white; padding:44px 51px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }
.project-items .project-overlay h3 {color:#000; margin: 0; }
.project-items .project-overlay .project-category {font:26px "Corki", serif; color: #000; display: block;}
.project-items:hover .project-overlay { opacity: 1;}
.btn-viewall{border:3px solid #e04739; padding:20px 50px; background-color:#ffffff; text-transform:uppercase; text-decoration:none; color:#e04739; font-size:15px;}
.btn-viewall:hover{background-color:#e04739; color:#ffffff; border:3px solid #e04739;}


/* Home: Testimonials */
.testimonials{text-align:center; padding:7% 0 6% 0;}
	
	/* Carousel */
	#owl-demo .item{display: block; padding: 0 13%; text-align: center;}
	.owl-theme .owl-controls .owl-buttons div { padding: 5px 9px; position: absolute;}
	.owl-theme .owl-buttons i{ margin-top: 2px;}
	.owl-theme .owl-controls .owl-buttons .owl-prev{left: -45px; top: 55px; background:url(../img/arrow-left.png) 15px 12px no-repeat;}
	.owl-theme .owl-controls .owl-buttons .owl-next{right: -45px;top: 55px; background:url(../img/arrow-right.png) 20px 12px no-repeat;}

	
/* Home: Clients */
.clients{text-align:center; padding:3% 0 10% 0; background-color:#FFF}	
	
	/* Carousel */
	.jcarousel-wrapper {margin: 0 auto; position: relative;}
	.jcarousel {position: relative; overflow: hidden; width: 100%;}
	.jcarousel ul {width: 2000em; position: relative; list-style: none; margin: 0; padding: 0;}
	.jcarousel li {float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0 15px;}
	.jcarousel li a{display:inline-block; border:1px solid #ccc;}

	/* Carousel Controls */
	.jcarousel-control-prev, .jcarousel-control-next { position: absolute; top: 30%; width: 60px; height: 60px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; border:1px solid #ccc; padding:20px; filter: Alpha(Opacity=70);/*IE7 fix*/ opacity: 0.7;}
	.jcarousel-control-prev {left: -14px;}
	.jcarousel-control-next {right: -14px;}
	.jcarousel-control-prev{background: #f6f6f6 url(../img/arrow-left.png)15px 12px no-repeat; }
	.jcarousel-control-next{background: #f6f6f6 url(../img/arrow-right.png)21px 12px no-repeat; }
	.jcarousel-control-prev:hover, .jcarousel-control-next:hover{filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; }


/* Inside Styles */
.page-title{background-color:#293a4a; text-align:center; height:110px; width:100%;}
.page-title h2{color:#ffffff; margin:0; line-height:110px; padding-top:10px;}
.body-inside{/*background:url(../img/body-bg.png) center top no-repeat;*/ padding: 9% 0 12% 0;}
.padding-aside{padding:0 10%}

.about-img{margin-bottom:50px; text-align:center;}
.approach{text-align:center; padding-top:4%;}
.approach img{margin-bottom:25px; width:auto; max-height:160px; overflow:hidden;}

.clients-list{list-style:none; margin:0; padding:0; text-align:center}
.clients-list img{border:1px solid #293a4a; margin-bottom:30px;}

.service-list{list-style:none; margin:0; padding:0}
.service-item{text-align:center; border-bottom:1px solid #bfbfbf; padding:30px 0}
.service-item img{margin-bottom:25px;}
.service-list li:first-child{padding-top:0}

.blog{border:10px solid #eeeeee; padding:0 5% 5% 5%; margin-bottom:30px;}
.date{color:#e04739; margin-bottom:20px}
.date span{ padding:10px 25px; background-color:#eeeeee; font:24px/40px "Corki";}
.blog img{margin: 15px 0;}

.paging{list-style:none; margin:0; padding:25px 0; border-bottom:1px solid #eeeeee; overflow:hidden; border-top:1px solid #eeeeee; margin-top:5%}
.paging .prev{float:left; display:inline;}
.paging .prev a{background:url(../img/arrows.png) left top no-repeat; display:block; width:29px; height:41px; text-indent:-9999px}
.paging .prev a:hover{background:url(../img/arrows.png) left bottom no-repeat;}
.paging .next{float:right;display:inline;}
.paging .next a{background:url(../img/arrows.png) right top no-repeat; display:block; width:29px; height:41px; text-indent:-9999px}
.paging .next a:hover{background:url(../img/arrows.png) right bottom no-repeat;}

.feedback{border-bottom:1px solid #eeeeee; overflow:hidden; padding: 0 0 35px 0; margin-bottom:35px}
.feedback blockquote{ font: italic 20px/34px "Times New Roman", serif; text-decoration:none; border-left:2px solid #293a4a; padding-left:30px}
.feedback cite{margin-top:0;}

input, textarea {width:60%; padding:8px; border:1px solid #eeeeee; outline:none; text-align:center; }
input[type=text]:hover, input[type=text]:focus, textarea:hover, textarea:focus, input[type=tel]:hover, input[type=tel]:focus{border-color:#293a4a; background:#f9f9f9}
label{display:block; text-transform:uppercase; font-weight:normal; font-size:11px; margin-bottom:25px;}
label span{color:red; font-size:16px;}
textarea{min-height:100px}
.btn-send{border:2px solid #e04739; width:60%; display:inline-block; padding:20px 0; color:#e04739; text-transform:uppercase; text-decoration:none; font-size:20px}
.btn-send:hover{background-color:#e04739; color:#ffffff}
.mailadd{text-decoration:none;}
.mailadd:hover{text-decoration:underline; color:#293a4a}
address{font-size:16px; margin-top:50px;}
address .heading{font-size:14px; text-transform:uppercase; color:#293a4a; font-weight:bold; margin:30px 0 10px 0;}
.map{margin-top:60px;}

.jobname{overflow:hidden}
.jobdetail{border-top:1px solid #bfbfbf; border-bottom:1px solid #bfbfbf; overflow:hidden; padding:10px 0 20px 0; margin-bottom:5%} 
.jobdetail p{margin:0; padding:0;}
.jobdetail ul{list-style:none; margin:0; padding:0;}
.jobdetail .detail{font-size:14px; text-transform:uppercase; color:#293a4a; font-weight:bold; padding-top:15px}
.visit-web{border:3px solid #bfbfbf; padding:15px 50px; background-color:#ffffff; text-transform:uppercase; text-decoration:none; color:#e04739; font-size:15px; color:#bfbfbf; float:right; overflow:hidden}
.visit-web:hover{background-color:#293a4a; color:#ffffff; border:3px solid #293a4a;}
.visit-web:visited{text-decoration:none}
.back{background:url(../img/back.png) left top no-repeat; line-height:41px; display:block; padding-left:40px; font-size:18px; line-height:41px; text-transform:uppercase; text-decoration:none; float:right; color:#293a4a; height:41px}
.back:hover{color:#f26522; background:url(../img/back.png) left bottom no-repeat; color:#e04739}
.fullad-inside,.halfad-inside{overflow:hidden; text-align:center}
.fullad-inside img{margin-bottom:5%}
.halfad-inside img{margin-bottom:10%}
.works{padding-top:3%; text-align:center}
.works img{margin-bottom:5%;}



/* Footer */
.footer{background:url(../img/footer-bg.jpg) top center no-repeat; background-size:cover;}
.ruler{}
.gotop{position:absolute; left:0; top:-68px; text-align:center; width:100%}
.gotop a{background:url(../img/topbg.png) center top; height:68px; width:120px; display:inline-block; line-height:68px; color:#ffffff; text-transform:uppercase; text-decoration:none; padding:10px 0 0; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;}
.gotop a:hover{background-position: center bottom;}
.footer h1{color:#ffffff; text-transform:none; margin:0 0 15px 0;}
.footer-padding{padding:7% 0 5% 0; color:#ffffff; text-align:center;}
.footer-padding p{font-size:20px;}
.btn-contact{color:#ffffff; text-decoration:none; font-size:15px; border:3px solid #ffffff; text-transform:uppercase; padding:16px 50px; display:inline-block; margin-top:40px;}
.btn-contact:hover{background-color:#ffffff; color:#293a4a}
.flickr{display:inline-block; width:40px; height:40px; background:url(../img/social.png) right top no-repeat; text-indent:-9999px; margin:10px 0 0 15px}
.flickr:hover{background:url(../img/social.png) right bottom no-repeat; }
.fbook{display:inline-block; width:40px; height:40px; background:url(../img/social.png) left top no-repeat; text-indent:-9999px; margin:10px 15px 0 0}
.fbook:hover{background:url(../img/social.png) left bottom no-repeat; }
.copyright{/*background-color:#38650a;*/ font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; color: #FFF; line-height:36px;}
.copy{padding:1.8% 0 .7% 0;}
.partner {text-align:right; padding:1.8% 0 .7% 0;}
.upaharharu{background:url(../img/upaharharu.png) left top no-repeat; display:inline-block; width:138px; height:32px; margin-left:10px; float:right;}
.upaharharu:hover{background-position: left bottom}
em a{color:#FFF; text-decoration:none;}
em a:hover{color:#FFF;}

/* Global */
.relative{position:relative;}
.text-center{text-align:center;}
.padding-section{padding-bottom:70px;}
.clear{clear:both}
.footer-divider{border-top:1px dotted #FFF;}



/* Responsive Styles */

/* Smartphones (portrait and landscape) ----------- */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.navbar-brand {visibility:visible}
	.logo-vg{display:none}
	.body{padding: 26% 0 0 0;}
	.nav>li{padding:0; margin:0; position:relative; border-bottom:1px solid #bfbfbf; height:40px}
	.nav .blank{display:none}
	.nav>li>a{margin:0; padding:0; font-size:14px; text-transform:uppercase; text-decoration:none; color:#838282;}
	.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li a:hover{color:#293a4a; background:none}
	.services{padding: 0 0 10% 0;}
	.halfad .leftad img{margin-bottom:0}
	.service-halfad .rightad img{margin-top:0}
	.halfad-inside .leftad img{margin-bottom:0}
	.recent-works{padding:13% 0 0 0;}
	.testimonials{padding:20% 0 6% 0;}
	.clients{padding:13% 0 40% 0;}	
	.footer-padding{padding:15% 0 15% 0;}
	.partner{float:left;}
	.body-inside{padding: 22% 0 36% 0;}
	input, textarea {width:100%; padding:6px;}
	.btn-send{width:100%; }
	.back{float:left}
	.visit-web{float:left; margin-top:15%}	
}


@media only screen 
and (max-device-width : 640px) {
	.navbar-brand {visibility:visible}
	.logo-vg{display:none}
	.nav>li{padding:0; margin:0; position:relative; border-bottom:1px solid #bfbfbf; height:40px}
	.nav .blank{display:none}
	.nav>li>a{margin:0; padding:0; font-size:14px; text-transform:uppercase; text-decoration:none; color:#838282;}
	.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li a:hover{color:#293a4a; background:none}
	.halfad .leftad img{margin-bottom:20px}
	.service-halfad .rightad img{margin-top:20px}
	.halfad-inside .leftad img{margin-bottom:20px}
	.back{float:left}
	.visit-web{float:left; margin-top:20px}
	.partner{float:left;}
	input, textarea {width:80%; padding:6px;}
	.btn-send{width:80%; }
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (orientation : portrait) {
	.body{padding: 14% 0 0 0;}
	.nav>li{padding:0 2.8%; position:relative;}
	.nav>li>a{margin:0; padding:0; font-size:14px; text-transform:uppercase; text-decoration:none; color:#838282; line-height:45px; padding:0 20px 25px 20px}
	.nav li.blank{padding:0 8%}
	.halfad .leftad img{margin-bottom:30px}
	.service-halfad .rightad img{margin-top:30px}
	.service-halfad .leftad img{margin-top:30px}
	.halfad-inside .leftad img{margin-bottom:30px}
	.project-items .project-overlay {padding: 11% 30px 0 30px}
	.clients{padding:7% 0 22% 0}	
	.partner{float:right}
	.body-inside{padding: 14% 0 21% 0;}
	.back{float:left}
	.visit-web{float:left; margin-top:7%}	
}


@media only screen 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.body{padding: 12% 0 0 0;}
	.nav>li{padding:0 4.4%; position:relative; }
	.nav>li>a{margin:0; padding:0; font-size:14px; text-transform:uppercase; text-decoration:none; color:#838282; line-height:45px; padding:0 20px 25px 20px}
	.nav li.blank{padding:0 8%}
	.project-items .project-overlay {padding: 18% 30px 0 30px}
	.clients{padding:7% 0 17% 0}	
	.body-inside{padding: 12% 0 17% 0;}
	.visit-web{margin-top:20px}	
}