/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300);
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);*/

/*!
 * Mesar Onepage Personal/Portofolio
 * © sandthemes
*/
/* ========TABLE OF CONTENTS==========
00. Body, links, hgroup, paragraphs, general styles
01. Navigation menu
02. Section Home (Intro)
03. Section Portfolio
04. Section About
05. Section Services
06. Section Blog
07. Section Contact
	GENERAL FORM STYLES
	MESSAGE FOR SUCCES
	MESSAGE FOR ERROR
0.8 Responsive design

/*--------------------------------------------------
	00. Body, links, hgroup, paragraphs, general styles
---------------------------------------------------*/

body {
	background: #ffffff;
	font-family: 'Open Sans', sans-serif;
	color: #222;
	margin: 0;
	padding: 0;
}

a {
	color: #222;
  	-webkit-transition: all .25s ease-out;
  	transition: all .25s ease-out;
}
a:hover {
	text-decoration: none;
	color: #222;
}
a:focus {
	outline: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}
h1 {
	font-size: 50px;
}
h2 {
	font-size: 45px;
}
h3 {
	font-size: 35px;
}
h4 {
	font-size: 30px;
}
h5 {
	font-size: 25px;
}
h6 {
	font-size: 20px;
}
p {
	font-family: 'Gentium Basic', serif;
 	line-height: 30px;
 	letter-spacing: 2px;
 	font-size: 15px;
	color: #888;
}
ul.nop {
	-webkit-padding-start: 0px;
	-moz-padding-start:0px;
}
.page-wrapper {
	margin: 0px;
	background: #fff;
}
.container {
	padding: 0;
}

.indxservice{ text-align: justify;}
.indxservice h4{ font-size: 16px; color: #073c90;}
.indxservice h1{ font-size: 30px;}
.indxservice h2{ font-size: 26px;}

/*----- Page Loader -----*/
/*#loader {
    background: #ffffff;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999999;
}
#loaderInner {
    background:#ffffff url(../images/load.gif) center center no-repeat;
    height: 60px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 60px;
}*/
.margi{
    padding-left: 27px;
}


.leftbody {
    background-color: #ffffff;
    float: left;
    height: auto;
    margin: 20px 30px 80px 0;
    width: 93%;
}

.leftbody ul {
    display: block;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.leftbody li {
    border-bottom: 1px dashed #d6140a;
    color: #000000;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    height: 100px;
    list-style: outside none none;
    margin: 10px 40px 0;
    padding: 0;
    width: 100%;
}


.service {
    background-color: #00478e;
    color: #fff;
    font-family: Geneva,Arial,Helvetica,sans-serif;
    font-size: 30px;
    padding: 15px;
    text-align: center;
}
.servic {
/*    background-color: #00478e;*/
    color: #fff;
    font-family: Geneva,Arial,Helvetica,sans-serif;
    font-size: 30px;
    padding: 15px;
    text-align:left;
    width: 40%;
    margin-top: 20px;
}
.margin {
    border: 1px solid #cccccc;
    margin-top: 10px;
}
.col{
    width: 31.4%;
    float: left;
    margin-right: 10px;
}
.box{
box-shadow: 2px 2px 2px 2px #cccccc;
text-align:center !important;
}
.top{
    margin-top: 40px;
}
/*#contact_form .form-control {
    border: 1px solid #dadee1;
    height: auto;
    padding: 8px;
    margin: 10px;
    color: #fff;
}*/
.solid-button{
   background-color: #00adf1;
}
.form-control {
    /*border-color: rgb(0, 173, 241);*/
    border-radius: 0;
    /*border-width: 2px;*/
    color: rgba(85, 85, 85, 0.8);
    font-size: 15px;
    font-style: italic;
    font-weight: 300;
    height: auto;
    padding: 10px;
    margin: 10px;
}
.leftbody li {
    border-bottom: 1px dashed #d6140a;
    color: #000000;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    height:auto;
    list-style: outside none none;
    margin:20px 40px 0;
    padding: 0;
    width: 100%;
}

.hhp a {
    color: #6a0f15;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
}






/*----- Section Titles -----*/

.nopaddingcol, .nplr {
	padding-left: 0;
	padding-right: 0;
}
.sTitle span {
	text-transform: uppercase;
	font-weight: 800;
	background: #000;
	color: #fff;
	padding: 5px 6px;
	letter-spacing: 5px;
	font-size: 15px;
	font-family: 'Open Sans', sans-serif;
}
.sTitle {
	padding-bottom: 50px;
}

.f_icon_Part{width: auto; padding: 10px 12px; height: 50px; float: left; display: block; color: #ffffff; margin: 3px 5px; color: dodgerblue; text-align: center;}
.f_icon_Part a{color: #ffffff; font-size: 20px; text-decoration: none;}
.topfix{
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    padding-bottom: 15px; 
    top: 0px; 
    position: fixed; 
    z-index: 9999; 
    border-bottom: 1px solid #ccc;
    background-color:#fff ;
}
.topfix img{ margin: 0px auto;}
.banner{ width: 100%; height: auto; background-color: #00478E; margin-top: 4%; display: block;}
.main_content{ 
    width: 100%; 
    height: auto; 
    display: block;
    padding: 5px 0px 50px 0px;
}
.clear{margin: 0px; padding: 0px; clear: both;}























/*--------------------------------------------------
	01. Navigation menu
---------------------------------------------------*/

.fNavBar {
	background: #00478E;
	position: fixed;
	width: auto;
	height: 50px;
	top: 0px;
	right: 11%;
	top: -50px;
	opacity: 0;
	height: 0;
  	-webkit-transition: all .25s ease-out;
  	transition: all .25s ease-out;
    z-index: 99999;
}

.menu-nav {
	text-align: right;
	padding-right: 25px;
  	-webkit-transition: all .25s ease-out;
  	transition: all .25s ease-out;
  	font-size: 0;
}
.fNavBar-show {
	top:13.6%;
	opacity: 1;
	height: 50px;
}
.menu-nav li {
	list-style: none;
	display: inline-block;
	z-index: 1000;
	padding: 0;
	margin: 0;
}
.menu-nav li a {
	display: block;
	color: #ffffff;
	line-height: 50px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 3px;
	margin: 0;
	text-decoration: none;
	padding: 0 15px;
    background-color: #00478E;
}
.menu-nav li.active a{
	background: #00478E;
}
.menu-nav li.active a {
	color: #fff;
}

.dropdown-menu li {
	display: block;
}
.dropdown-menu li a{
	margin: 0;
	line-height: 40px;
	padding-left: 10px;
	display: block;
  	font-size: 10px;
  	color: #222!important;
}
.dropdown-menu li a {
	background-color: #00478E!important;
    color: #ffffff;
}
.dropdown-menu li a:hover, .dropdown-menu li a:focus {
	background: #222!important;
	color: #fff!important;
}

/*--------------------------------------------------
	02. Section Home (Intro)
---------------------------------------------------*/
#sHome {
  	width: 100%;
  	padding-bottom: 80px;
}
.hContent {
	padding-top:1px;
}
.hLogo {
	position: fixed;
	top: 30px;
	z-index: 999;
	left: 25px;
}
.hMenu {
	position: fixed;
	top: 13.8%;
	z-index: 999999;
	right: 8%;
	cursor: pointer;
}
.hMenu span {
    background: #00478e none repeat scroll 0 0;
    color: #ffffff;
    font-size: 38px;
    padding: 1px 6px 10px;
}
.hLogo span {
	text-transform: uppercase;
	font-weight: 800;
	background: #00478E;
	padding: 5px 6px 11px 6px;
	letter-spacing: 5px;
	font-size: 25px;
	font-family: 'Open Sans', sans-serif;
}

.hDesc h2 {
	padding-bottom: 10px;
	font-weight: 800;
	text-transform: uppercase;
	padding-top: 0;
	margin-top: 0;
}
.hContent p {
 	line-height: 30px;
 	letter-spacing: 3px;
 	font-size: 16px;
 	padding-right: 50px;
}
.hProfile {
	padding-left: 50px;
}
.hProfile img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	text-align: center;
}


/*--------------------------------------------------
	03. Section Portfolio
---------------------------------------------------*/
#sFolio {
  	background:#f2f2f2;
  	padding: 80px 0 50px 0;
}
.mGrid img{
	width: 100%;
	height: 100%;
	-webkit-transition: all .15s ease-in-out;
  	transition: all .15s ease-in-out;
}
.itemIso {
	margin-bottom: 15px;
	padding-right: 30px;
	padding-top: 15px;
  	-webkit-transition: all .25s ease-in-out;
  	transition: all .25s ease-in-out;
}

.item1 { width: 10%;}
.item2 { width: 20%;}
.item25 {width:25%;}
.item3 { width: 30%;}
.item33 {width: 33%;}
.item4 { width: 40%;}
.item5 { width: 50%;}
.item6 { width: 60%;}
.item7 { width: 70%;}
.item75 { width: 75%;}
.item8 { width: 80%;}
.item9 { width: 90%;}

a.image-modal {
	display: block;
	position: relative;
	overflow: hidden;
}
.itemOver {
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
  	-webkit-transition: all .25s ease-in-out;
  	transition: all .15s ease-in-out;
  	background: rgba(255,219,67,.9);
}
.itemOverP {
	position: absolute;
	top: 40%;
	height: 100%;
	width: 100%;
}
.itemOver span{
  	-webkit-transition: all .25s ease-in-out;
  	transition: all .15s ease-in-out;
	display:table;
	margin:0 auto;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 5px;
	font-weight: 800;
	background: #000;
	color: #fff;
	padding: 5px;
}
.itemIso:hover .itemOver {
	opacity: 1;
}
.itemIso:hover img {
    -webkit-transform:scale(1.15); /* Safari and Chrome */
    -moz-transform:scale(1.15); /* Firefox */
    transform:scale(1.15);
}
.modal-box {
	max-width: 550px;
	background: #fff;
	position: relative;
	margin: 0 auto;
}
.modal-box img {
	padding: 25px;
}
.modal-box-content {
	padding: 25px;
}
.modal-box-content h4 {
	text-transform: uppercase;
	font-size: 18px;
	font-weight:800;
	letter-spacing: 2px;
}

/*--------------------------------------------------
	04. Section About
---------------------------------------------------*/

#sAbout {
  	background:#fff;
  	padding: 100px 0 100px 0;
  	text-align: left;
}

.sACols h2{
	font-weight: 800;
	text-transform: uppercase;
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 30px;
}
.sAStory, .sAInfo, .sASkills {
	padding-bottom: 25px;
}
.sAStory {
	padding-right: 30px;
}
.sAInfo, .sASkills {
	padding-left: 30px;
}
.infoList {
	padding-bottom: 20px;
}
.infoList li{
	letter-spacing: 1px;
	list-style: none;
	line-height: 40px;
	font-size: 16px;
}
.infoList span {
	padding-left: 5px;
	font-size: 18px;
	font-family: 'Gentium Basic', serif;
}
.sASkills h4 {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.butn-yell {
	background: #00478E;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 3px;
}
.butn-small {
	padding: 8px 12px;
}


/*--------------------------------------------------
	05. Section Services
---------------------------------------------------*/

#sServices {
  	background:#00478E;
  	padding: 75px 0 50px 0;
}

.servBox .icon {
	font-size: 60px;
}
.servBox {
	padding: 20px;
  	-webkit-transition: all .25s ease-in-out;
  	transition: all .25s ease-in-out;
}
.servBox:hover {
	background: #F7D443;
}
.servBox h3 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 800;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
.servBox p {
	color: #222;
	letter-spacing:1px;
}

.sRowSecond {
	padding-top:40px;
	padding-bottom:20px;
}
/*--------------------------------------------------
	06. Section Blog
---------------------------------------------------*/

#sBlog {
  	background:#ffffff;
  	padding: 100px 0 100px 0;
}
.blog-item {
	margin-bottom: 15px;
	padding-right: 30px;
	padding-top: 15px;
}
.blog-item p {
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 3px;
}
.blog-item h3 {
	text-transform: uppercase;
	font-weight: 800;
	font-size: 25px;
	margin-bottom: 10px;
}
.blog-item b {
	font-size: 10px;
	letter-spacing: 2px;
}
.blog-item span {
	font-weight: bold;
	text-transform: uppercase;
	background:#00478E;
	font-size: 10px;
	letter-spacing: 2px;
	padding:5px;
}
.blog-item div {
	margin-bottom: 10px;
}
/*--------------------------------------------------
	07. Section Contact
---------------------------------------------------*/

#sContact {
  	background: #00478E;
  	padding: 1px 0 0 0;
}

.contactForm {margin: 0 0 50px 0;}

/* ====GENERAL FORM STYLES==== */
input, textarea, select {
    color: #fff;
	background: transparent;
	vertical-align: top;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	margin: 0;
	padding: 15px;
	width: 100%;
	height: 100%;
	border: 0;
	background: #F7D443;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	position: relative;
	z-index: 5;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
}

input.submit {
	width: auto;
	cursor: pointer;
	position: relative;
    background: transparent;
    color: #fff;
    padding: 16px;
    background: #000;
    margin: 20px 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
  	font-weight: 800;
  	letter-spacing: 4px;
  	border: 0;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #fff;
}
input[type="submit"][disabled] { background:#777; cursor: default; }
#contactForm div {margin: 20px 0;padding-right:30px;}
#contactform .row { padding-right: 0;}
fieldset { padding:0;border:0; }
label {
	font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.contactField {
	padding-right: 20px;
	padding-bottom: 20px;
}
/* ====MESSAGE FOR SUCCES==== */

#message {
	margin: 1em 0;
	padding: 0;
	display: block;
	background: transparent none;
}
#message h1 {
  	letter-spacing: 3px;
 	font-size: 16px;
  	font-weight: 800;
	text-transform: uppercase;
}
#message p {
	color: #222;
	letter-spacing: 2px;
}
/* ====MESSAGE FOR ERROR==== */
.errorMessage {
  	display: block;
  	font-size: 14px;
    padding: 20px 0 0 0;
}

ul.errorMessages { padding: 10px 0 0 0; }
ul.errorMessages li {
  	font-size: 16px;
  	font-weight: 200;
  	text-align: left;
  	color: #222;
  	list-style: none;
  	line-height: 25px;
  }

/* ====FOOTER=== */

.pFooter {
	background: #00478e;
	position: relative;
	padding: 30px 0 30px 0;
    color: #ffffff;
}
.fCopy h6{
	text-align: left;
	font-size: 14px;
	letter-spacing: 3px;
	margin-top: 10px;
}
.fScroll {
	text-align: center;
	margin-top: 5px;
}
.fIcons a {color: #fff;}
.fScroll a {color: #fff;}
.fIcons {
	text-align: right;
	font-size: 35px;
    color: #fff;
}
.fIcons span {
	margin: 0 3px;
}
/*--------------------------------------------------
	08. Other pages ( portofolio & blog )
---------------------------------------------------*/

.hDesc h3 {
	padding-bottom: 10px;
	font-weight: 800;
	text-transform: uppercase;
	padding-top: 0;
	margin-top: 0;
}	
.blog-date span {
	background:#00478E;
	color: #222;
	font-weight: bold;
  	padding: 5px;
}
.blog-content {
	padding-top: 70px;
}
.blog-content h1, .blog-content h2, .blog-content h3{
	padding: 20px 0;
}
.testBUl {
	font-size: 16px;
}
.testBUl li {
	padding: 5px 0;
}

#sPostComment {
  	background: #00478E;
  	padding: 100px 0 0 0;
}
#sComments {
	background: #f2f2f2;
	padding: 50px 0;
}
.blog-comm {
	background: #fff;
	padding: 5px;
	margin: 15px 0;
}
.comm-replied {
	margin-left: 100px;
}
.comm-author img {
	width: 100%;
	height: 100%;
}
.comm-content h5{
	text-transform: uppercase;
	font-weight: 800;
	font-size: 21px;
}
.comm-content p {
	margin: 5px 0 5px;
	line-height: 25px;
}
a.comm-reply {
	border-bottom: 1px solid #00478E;
}
.commentField {
	padding-right: 20px;
	padding-bottom: 20px;
}
#commentForm {
	padding-bottom: 50px;
}
/*--------------------------------------------------
	09. Responsive design
---------------------------------------------------*/
@media (min-width: 979px) {
.dropdown-menu {
	text-align: left;
  	position: absolute;
	display: none;
  	z-index: 100;
  	float: left;
    min-width: 100%;
    white-space: nowrap; 	
  	padding: 0;
  	margin: 2px 0;
  	list-style: none;
  	background-color: #00478E;
  	border: 0;
  	border-radius: 0px;
   	-webkit-transition: all .3s ease-out;
  	transition: all .3s ease-out;
	opacity: 0;
}
.dropdown:hover .dropdown-menu {
    top: 95%;
    opacity: 1;
    display: block;
}
}
/* ==== SMARTPHONES & TABLETS ==== */

@media (max-width: 760px) {
.page-wrapper {
	margin: 5px;
}
.item1 { width: 50%;}
.item2 { width: 50%;}
.item25 { width: 50%;}
.item3 { width: 50%;}
.item33 { width: 50%;}
.item4 { width: 50%;}
.item5 { width: 50%;}
.item6 { width: 50%;}
.item7 { width: 50%;}
.item75 { width: 50%;}
.item8 { width: 50%;}
.item9 { width: 50%;}

.nopaddingcol {
	padding-left: 10px;
	padding-right: 10px;
}
.sTitle {
	padding-left: 15px;
}
.blog-item {
	padding-left: 15px;
}
.menu-nav {
	background: #00478E;
}
.menu-nav li {
	display: block;
}
.menu-mav li.drop-down {
	opacity: 1;
	position: relative;
}
.dropdown-menu {
	position: relative;
	float: right;
	text-align: right;
}
.dropdown-menu li a {
	padding-right: 10px;
}
.menu-nav {
	padding-right: 0;
}
.fNavBar {
	height: 300px!important;
	overflow: scroll;
}

}

/* ==== SMARTPHONES ONLY ==== */
@media (max-width: 480px) {
.container {
	padding: 0 10px;
}
.nopaddinglr {
	padding: 0 10px;
}
.itemIso {
	padding-right: 5px;
	padding-left: 5px;
}
.sHomeContent {
	padding-top: 60%;
}
.row {
	padding: 25px 5px;
}
.sTitleLeft h1 {
	font-size: 40px;
}
.aboutInfo, .aboutSkills {
	padding: 25px 25px;
}
.worksFilters li {
  	display: block;
  	margin: 10px 0;
}

.item1 { width: 100%;}
.item2 { width: 100%;}
.item25 { width: 100%;}
.item3 { width: 100%;}
.item33 { width: 100%;}
.item4 { width: 100%;}
.item5 { width: 100%;}
.item6 { width: 100%;}
.item7 { width: 100%;}
.item75 { width: 100%;}
.item8 { width: 100%;}
.item9 { width: 100%;}
}
/* ==== TABLETS ONLY ==== */
@media (max-width: 770px) and (min-width: 480px) {
.row {
	padding: 25px 25px;
}

}



@media only screen and (min-width : 320px) and (max-width : 480px) {
    .fNavBar{ right: 20%; }
    .f_icon_Part{width: 100%;}
    .menu-nav li{border-bottom: 1px solid #fff;}
    .main_content{padding-top: 0px;}
    .hMenu{top: 10.8%;}
    .fNavBar-show{top: 10%;}
    .caption3{display: none;}
    ul.nop {overflow: hidden;}
.inputGroupContainer{width:100%!important}
}
@media only screen and (min-width : 480px) and (max-width : 640px) { }
@media only screen and (min-width : 640px) and (max-width : 769px) { }
@media only screen and (min-width : 769px) and (max-width : 1025px) { }
@media only screen and (min-width : 1025px) and (max-width : 1280px) { }
@media only screen and (min-width : 1280px) and (max-width : 1367px) { }


<style type="text/css">
/*Windows Phone Fix viewport in IE 11 rendering engine*/
@-ms-viewport{width:device-width}
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
    .fNavBar{ right: 20%; }
    .f_icon_Part{width: 100%;}
    .menu-nav li{border-bottom: 1px solid #fff;}
    .main_content{padding-top: 0px;}
    .hMenu{top: 3.8%;}
    .fNavBar-show{top: 10%;}
    .caption3{display: none;}
	.fNavBar {overflow: visible;}
	.hMenu span {
    font-size: 20px;
    padding: 2px 6px 8px;
}
.topfix {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    height: 125px;
    overflow: hidden;
    padding-bottom: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.hMenu {
    left: 87%;
    top: 10.8%;
}
.banner {
    background-color: #00478e;
    display: block;
    height: auto;
    margin-top: 10%;
    width: 100%;
}
.servic {
    font-size: 20px;
    width: 100%;
}
ul.nop {overflow: hidden;}
.inputGroupContainer{width:100%!important}
.panel-footer {
    padding: 0px 5px;
}
}
</style>