/* 织梦58（dede58.com）做最好的织梦整站模板下载网站 */

/*!
 * 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
---------------------------------------------------*/
.dede_pages {
	clear: both;
	height: 40px;
	margin: 0 auto;
	text-align: center;
}
.dede_pages li {
	float: left;
	padding: 10px 14px;
	border: 1px solid #666;
	margin-right: 10px;
	color: #666;
	font-size: 12px;
	list-style: none;
}
.dede_pages li:hover {
	border: 1px solid #ffdb43;
}
.dede_pages li:hover a {
	color: #ffdb43
}
.dede_pages li a {
	color: #666
}
.dede_pages li.thisclass {
	border: 1px solid #ffdb43;
	background-color: #ffdb43;
	color: #FFFFFF
}
.dede_pages li.thisclass a {
	color: #fff
}
body {
	background: #f2f2f2;
	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;
	letter-spacing: 5px;
}
h2 {
	font-size: 45px;
	letter-spacing: 4px;
}
h3 {
	font-size: 35px;
	letter-spacing: 3px;
}
h4 {
	font-size: 30px;
	letter-spacing: 3px;
}
h5 {
	font-size: 25px;
	letter-spacing: 2px;
}
h6 {
	font-size: 20px;
	letter-spacing: 2px;
}
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: 25px;
	background: #fff;
}
.container {
	padding: 0;
}
/*----- Page Loader -----*/
#loader {
	background: #ffffff;
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
}
#loaderInner {
	background: #ffffff url(../images/load.gif) center center no-repeat;
	height: 60px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 60px;
}
/*----- 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;
}
/*--------------------------------------------------
	01. Navigation menu
---------------------------------------------------*/

.fNavBar {
	background: #ffdb43;
	position: fixed;
	width: auto;
	height: 50px;
	top: 0px;
	right: 70px;
	z-index: 1;
	top: -50px;
	opacity: 0;
	height: 0;
	-webkit-transition: all .25s ease-out;
	transition: all .25s ease-out;
}
.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: 25px;
	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: #222;
	line-height: 50px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 3px;
	margin: 0;
	text-decoration: none;
	padding: 0 15px;
}
.menu-nav li.active a {
	background: #222;
}
.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: #ffdb43!important;
}
.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: 180px;
}
.hLogo {
	position: fixed;
	top: 30px;
	z-index: 999;
	left: 25px;
}
.hMenu {
	position: fixed;
	top: 30px;
	z-index: 999;
	right: 25px;
	cursor: pointer;
}
.hMenu span {
	font-size: 35px;
	background: #ffdb43;
	padding: 5px 6px 10px 6px;
}
.hLogo span {
	text-transform: uppercase;
	font-weight: 800;
	background: #ffdb43;
	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: #ffdb43;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 3px;
}
.butn-small {
	padding: 8px 12px;
}
/*--------------------------------------------------
	05. Section Services
---------------------------------------------------*/

#sServices {
	background: #ffdb43;
	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: #ffdb43;
	font-size: 10px;
	letter-spacing: 2px;
	padding: 5px;
}
.blog-item div {
	margin-bottom: 10px;
}
/*--------------------------------------------------
	07. Section Contact
---------------------------------------------------*/

#sContact {
	background: #ffdb43;
	padding: 100px 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: #ffffff;
	position: relative;
	padding: 50px 0 30px 0;
}
.fCopy h6 {
	text-align: left;
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-top: 10px;
}
.fScroll {
	text-align: center;
	margin-top: 5px;
}
.fIcons {
	text-align: right;
	font-size: 35px;
}
.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: #ffdb43;
	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: #ffdb43;
	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 #ffdb43;
}
.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: #ffdb43;
	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: #ffdb43;
}
.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;
}
}