/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 *
 * ------------------------------------------------------------------- */
  /*@import url("font-awesome/css/font-awesome.min.css");
@import url("windows10/windows10.css");*/
 
 /* montserrat */
 @font-face {
   font-family: "montserrat-regular";
   src: url("../fonts/montserrat/montserrat-regular-webfont.woff2") format("woff2"), 
        url("../fonts/montserrat/montserrat-regular-webfont.woff") format("woff");
   font-style: normal;
   font-weight: normal;
 }
 @font-face {
   font-family: "montserrat-bold";
   src: url("../fonts/montserrat/montserrat-bold-webfont.woff2") format("woff2"), 
        url("../fonts/montserrat/montserrat-bold-webfont.woff") format("woff");
   font-style: normal;
   font-weight: normal;
 }
 
 @font-face {
   font-family: 'icomoon';
   src:  url('../fonts/icomoon/icomoon.eot?9wso7v');
   src:  url('../fonts/icomoon/icomoon.eot?9wso7v#iefix') format('embedded-opentype'),
     url('../fonts/icomoon/icomoon.ttf?9wso7v') format('truetype'),
     url('../fonts/icomoon/icomoon.woff?9wso7v') format('woff'),
     url('../fonts/icomoon/icomoon.svg?9wso7v#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
 
 [class^="icon-"], [class*=" icon-"] {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'icomoon' !important;
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
 
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 .box_1 span[class^="icon-"], .box_1 span[class*=" icon-"] {
   display:block;color:#3c3c3c;font-size:6rem;text-align:center;
 }
.box_1:hover span[class^="icon-"], .box_1:hover span[class*=" icon-"]{
 color:#f6cd23;
}

.icon-DownArrow:before {
  content: "\e909";
}
.icon-UpRightArrow:before {
  content: "\e90a";
}
.icon-product:before {
  content: "\e902";
}
.icon-html:before {
  content: "\e900";
}
.icon-mov:before {
  content: "\e901";
}
.icon-soft:before {
  content: "\e903";
}
.icon-study:before {
  content: "\e904";
}
.icon-team:before {
  content: "\e905";
}
.icon-ue:before {
  content: "\e906";
}
.icon-ui:before {
  content: "\e907";
}
.icon-work:before {
  content: "\e908";
}

 
 /* ===================================================================
  *  01. reset - normalize.css v3.0.2 | MIT License | git.io/normalize
  *
  * ------------------------------------------------------------------- */
 html {
 	font-family: sans-serif;
 	-ms-text-size-adjust: 100%;
 	-webkit-text-size-adjust: 100%;
 }
 
 body {
 	margin: 0;
 }
 
 audio,
 canvas,
 progress,
 video {
 	display: inline-block;
 	vertical-align: baseline;
 }

 a {
 	background: transparent;
 }
 
 a:active,
 a:hover {
 	outline: 0;
 }
 
 abbr[title] {
 	border-bottom: 1px dotted;
 }
 img {
 	border: 0;
 }
 
 svg:not(:root) {
 	overflow: hidden;
 }
 
 
 pre {
 	overflow: auto;
 }
 
 code,
 kbd,
 pre,
 samp {
 	font-family: monospace, monospace;
 	font-size: 1em;
 }
 
 
 
 
 /* ===================================================================
  *  02. basic/base setup styles - (_basic.scss)
  *
  * ------------------------------------------------------------------- */
 html {
 	font-size: 62.5%;
 	box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
 	box-sizing: inherit;
 }
 
 body {
 	font-weight: normal;
 	line-height: 1;
 	text-rendering: optimizeLegibility;
 	word-wrap: break-word;
 	-webkit-overflow-scrolling: touch;
 	-webkit-text-size-adjust: none;
 }
 
 body,
 input,
 button {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
 
 /* ------------------------------------------------------------------- 
  * Media - (_basic.scss)
  * ------------------------------------------------------------------- */
 /*img,
 video {
 	max-width: 100%;
 	height: auto;
 }*/
 
 /* ------------------------------------------------------------------- 
  * Typography resets - (_basic.scss)
  * ------------------------------------------------------------------- */
 div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
 	margin: 0;
 	padding: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
 	-webkit-font-variant-ligatures: common-ligatures;
 	-moz-font-variant-ligatures: common-ligatures;
 	font-variant-ligatures: common-ligatures;
 	text-rendering: optimizeLegibility;
 }
 
 em,
 i {
 	font-style: italic;
 	line-height: inherit;
 }
 
 strong,
 b {
 	font-weight: bold;
 	line-height: inherit;
 }
 
 small {
 	font-size: 60%;
 	line-height: inherit;
 }
 
 ol,
 ul {
 	list-style: none;
 }
 
 li {
 	display: block;
 }
 
 /* ------------------------------------------------------------------- 
  * links - (_basic.scss)
  * ------------------------------------------------------------------- */
 a {
 	text-decoration: none;
 	line-height: inherit;
 }
 
 a img {
 	border: none;
 }
 
 /* ===================================================================
  *  03. grid - (_grid.scss)
  *
  * ------------------------------------------------------------------- */
 .row {
 	width: 94%;
 	max-width: 1170px;
 	margin: 0 auto;
 }
 
 .row:before,
 .row:after {
 	content: "";
 	display: table;
 }
 
 .row:after {
 	clear: both;
 }
 
 .row .row {
 	width: auto;
 	max-width: none;
 	margin-left: -20px;
 	margin-right: -20px;
 }
 
 [class*="col-"],
 .bgrid {
 	float: left;
 }
 
 [class*="col-"] + [class*="col-"].end {
 	float: right;
 }
 
 [class*="col-"] {
 	padding: 0 20px;
 }
 
 /* ------------------------------------------------------------------- 
  * small screens - (_grid.scss)
  * ------------------------------------------------------------------- */
 @media screen and (max-width:1024px) {
 	.row .row {
 		margin-left: -18px;
 		margin-right: -18px;
 	}
 
 	[class*="col-"] {
 		padding: 0 18px;
 	}
 
 }
 
 /* ------------------------------------------------------------------- 
  * tablets - (_grid.scss)
  * ------------------------------------------------------------------- */
 @media screen and (max-width:768px) {
 	.row {
 		width: auto;
 		padding-left: 30px;
 		padding-right: 30px;
 	}
 
 	.row .row {
 		padding-left: 0;
 		padding-right: 0;
 		margin-left: -15px;
 		margin-right: -15px;
 	}
 
 	[class*="col-"] {
 		padding: 0 15px;
 	}
 
 }
 
 /* ------------------------------------------------------------------- 
  * large mobile devices - (_grid.scss)
  * ------------------------------------------------------------------- */
 @media screen and (max-width:600px) {
 	.row {
 		padding-left: 25px;
 		padding-right: 25px;
 	}
 
 	.row .row {
 		margin-left: -10px;
 		margin-right: -10px;
 	}
 
 	[class*="col-"] {
 		padding: 0 10px;
 	}
 }
 
 /* ------------------------------------------------------------------- 
  * small mobile devices - (_grid.scss)
  * ------------------------------------------------------------------- */
 @media screen and (max-width:400px) {
 	.row .row {
 		padding-left: 0;
 		padding-right: 0;
 		margin-left: 0;
 		margin-right: 0;
 	}
 
 	[class*="col-"] {
 		width: 100% !important;
 		float: none !important;
 		clear: both !important;
 		margin-left: 0;
 		margin-right: 0;
 		padding: 0;
 	}
 
 	[class*="col-"] + [class*="col-"].end {
 		float: none;
 	}
 
 }
 
 /* Misc Helper Styles 
  */
 .hide {
 	display: none;
 }
 
 .invisible {
 	visibility: hidden;
 }
 
 .antialiased {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 
 .overflow-hidden {
 	overflow: hidden;
 }
 
 .no-border {
 	border: none;
 }
 
 .text-center {
 	text-align: center;
 }
 
 .text-left {
 	text-align: left;
 }
 
 .text-right {
 	text-align: right;
 }
 
 .pull-left {
 	float: left;
 }
 
 .pull-right {
 	float: right;
 }
 
 .align-center {
 	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
 }
 
 /**/
 body {
   background: #fff;
   font-family: 'Muli', sans-serif;
   font-style: normal;
   font-weight: 300;
   overflow-x: hidden;
 }
 
 html, body {
   width: 100%;
   height: 100%;
 }
 body {
 	font-family:"STHeiti","Arial","Microsoft Yahei","Hiragino Sans GB", "WenQuanYi Micro Hei", "Simsun,sans-self","montserrat-bold", sans-serif;
 	font-size: 1.6rem;
 	line-height: 3rem;
 	color: #353535;
 	margin: 0;
 	padding: 0;
 }
 
 /*---------------------------------------
   Typorgraphy              
 -----------------------------------------*/
 
 h1,h2,h3,h4,h5,h6 {
   font-style: normal;
   font-weight: 200;
   letter-spacing: 0px;
 }
 
 h1 {
   color: #3d3d3f;
   font-size: 50px;
   line-height: normal;
 }
 
 h2 {
   color: #575757;
   font-size: 40px;
   line-height: 52px;
   margin-top: 0px;
 }
 
 h4 {
   color: #797979;
   font-size: 18px;
   font-weight: normal;
 }
 h1, h2, h3, h4, h5, h6 {
 	font-family:"montserrat-bold", sans-serif ;
 	font-family:"STHeiti","Arial","Microsoft Yahei","Hiragino Sans GB", "WenQuanYi Micro Hei", "Simsun,sans-self","montserrat-bold", sans-serif;
 	color: #151515;
 	font-style: normal;
 	text-rendering: optimizeLegibility;
 	margin-bottom: 2.1rem;
 }
 h3, h4 {
 	margin-bottom: 1.8rem;
 }
 
 h5, h6 {
 	margin-bottom: 1.2rem;
 }
 
 h1 {
 	font-size: 3.4rem;
 	line-height: 1.35;
 	letter-spacing: -.1rem;
 }
 h2 {
 	font-size: 2.4rem;
 	line-height: 1.25;
 }
 @media only screen and (max-width:600px) {
 	h1 {
 		font-size: 2.8rem;
 		letter-spacing: -.07rem;
 	}
 }
 @media (max-width: 768px) {
 
   h1 {
     line-height: normal;
   }
 
   h2  {}
 }
 @media (max-width: 357px) {
 
   h1 {
   }
 
   #about .col-md-4 a {
     width: 85px;
     height: 85px;
   }
 
 }
 h3 {
 	font-size: 2rem;
 	line-height: 1.5;
 }
 h4 {
 	font-size: 1.5rem;
 	line-height: 1.76;
 }
 h5 {
 	font-size: 1.4rem;
 	line-height: 1.7;
 	text-transform: uppercase;
 	letter-spacing: .2rem;
 }
 h6 {
 	font-size: 1.3rem;
 	line-height: 1.85;
 	text-transform: uppercase;
 	letter-spacing: .2rem;
 }
 p {
     color: #878787;
     font-size: 15px;
     font-weight: 300;
     line-height: 30px;
     letter-spacing: 0.2px;
 	text-align: justify;
 	text-justify: distribute-all-lines;	
 }
 
 
 strong, span {
   color: #878787;color:#f9f9f9;
   font-weight: normal;
 }
 
 /*---------------------------------------
     General               
 -----------------------------------------*/
 
 html{
   -webkit-font-smoothing: antialiased;
 }
 
 a {
   color: #575757;
   -webkit-transition: 0.5s;
   transition: 0.5s;
   text-decoration: none !important;
 }
 
 a:hover, a:active, a:focus {
   color: #000;
   outline: none;
 }
 
 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 #about, #work,#education,#portfolio,#art,#skills,
 #contact ,#journal{
   position: relative;
   padding-bottom: 60px;padding-top: 60px;
 }
 #work{padding-bottom:0;}
 
 #about img {
   border-radius: 5px;
 }

 #work,#journal,#art {background:#f4f8fa;}
 #about,#skills,#portfolio,#contact{background:#fff;}
 #footer {background: #070349;}
 /*---------------------------------------
   Pre loader section              
 -----------------------------------------*/
 
 .preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
   background: none repeat scroll 0 0 rgba(255,255,255,0.3);
 }
 
 .spinner {
   border: 1px solid transparent;
   border-radius: 5px;
   position: relative;
 }
 
 .spinner:before {
   content: '';
   box-sizing: border-box;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 65px;
   height: 65px;
   margin-top: -10px;
   margin-left: -10px;
   border-radius: 50%;
   border: 1px solid #000;
   border-top-color: #f9f9f9;
   animation: spinner .9s linear infinite;
 }
 
 @-webkit-@keyframes spinner {
   to {transform: rotate(360deg);}
 }
 
 @keyframes spinner {
   to {transform: rotate(360deg);}
 }
 
 /*---------------------------------------
   Navigation section              
 -----------------------------------------*/
 .top-nav-collapse .logo{display:block;background-image:none;}
 .logo {
	float: left;margin-top:6px;
  }
  .logo a{
	display:block;
	background-image:url(../images/logo.png),url(../images/designer.png);
	background-repeat:no-repeat,no-repeat;
	background-position:left center,right center;
	background-size:45px 45px,130px 18px;display:block; width:175px;
	height:50px;
 }
 
  .top-nav-collapse .logo a{
	display:block;
	background-image:url(../images/logo-gray.png),url(../images/designer-gray.png);
 }
 
 .logo img{display:none;}
 .top-nav-collapse .logo img {display:none;}
 .logo img {
   width: 45px;
   height: 45px;
 }
 .logo img:nth-child(2){width:130px;height:18px;}

 .custom-navbar {
   border: none;
   margin-bottom: 0;
   background-color: #fff;
   padding-top: 22px;
 }
 
 .custom-navbar .navbar-brand {
   color: #444;color:#fff;
   font-weight: normal;
   font-size: 20px;
 }
 
 .custom-navbar .nav li a {
   font-size: 14px;
   font-weight: normal;
   color: #656565;color:#fff;
   letter-spacing: 1px;
   -webkit-transition: all ease-in-out 0.4s;
   transition: all ease-in-out 0.4s;
   padding: 0;
   margin: 15px;
 }
 
 .custom-navbar .navbar-nav > li > a:hover,
 .custom-navbar .navbar-nav > li > a:focus {
   background-color: transparent;
   color: #454545;color:#fff
 }
 
 .custom-navbar .navbar-nav li a:after {
   content: "";
   position: absolute;
   display: block;
   width: 0px;
   height: 2px;
   margin: auto;
   bottom:-6px;
   background: transparent;
   transition: width .3s ease, background-color .3s ease;
 }
 
 .custom-navbar .navbar-nav li a:hover:after,
 .custom-navbar .nav li.active > a:after {
   background: #000;background:#f0f0f0;
   color: #fff;
   width: 100%;
 }
 
 .custom-navbar .nav li.active > a {
   background-color: transparent;
   color: #454545;color:#fff
 }
 
 .custom-navbar .navbar-toggle {
   border: none;
   padding-top: 12px;
 }
 
 .custom-navbar .navbar-toggle {
   background-color: transparent;
 }
 
 .custom-navbar .navbar-toggle .icon-bar {
   background: #000;
   border-color: transparent;
 }
 .custom-navbar.top-nav-collapse li a{
   color: #656565;
 }
 .custom-navbar.top-nav-collapse .nav li.active > a{
 	color:#454545;
 }
 .custom-navbar.top-nav-collapse .navbar-nav li a:hover:after,
 .custom-navbar.top-nav-collapse .nav li.active > a:after {
   background: #3618ba;
   color: #fff;
 }
 
 .custom-navbar.top-nav-collapse .nav li.active > a {
   background-color: transparent;
   color: #454545;
 }
 .custom-navbar.top-nav-collapse .navbar-brand{
 	color:#444;
 }
 
 @media(max-width:768px) {
	.logo {margin-left:5px;}
 	.custom-navbar .nav li.active > a {
 	  background-color: transparent;
 	  color: #454545;
 	}
 	.custom-navbar .nav li a {
 	  color: #656565;
 	}
 	.custom-navbar .navbar-nav li a:hover:after,
 	.custom-navbar .nav li.active > a:after {
 	background: #3618ba;
 	}
	.custom-navbar .navbar-nav li a:hover,
	.custom-navbar .nav li.active > a {
	color: #454545;
	}
	.custom-navbar .navbar-brand{
		color:#444;
	}
	.custom-navbar {
	  background-color: #fff;
	  box-shadow:0 40px 100px rgba(0,0,0,.2);
	  box-shadow:0 20px 40px rgba(200,200,200,.3);
	  padding-top: 0px;
	  padding-bottom: 5px;
	}
	
	.custom-navbar .nav {
	  padding-bottom: 10px;
	}
	
	.custom-navbar .nav li a {
	  display: inline-block;
	  margin-bottom: 5px;
	}
	.custom-navbar .nav li.active > a {
		color: #454545;
	 }
	.logo a{
		display:block;
		background-image:url(../images/logo-gray.png),url(../images/designer-gray.png);
	}
 }
 
 @media(min-width:768px) {
     .custom-navbar {
       border-bottom: 0;
       background: 0 0; 
     }
     .custom-navbar.top-nav-collapse {
       background: #fff;
       box-shadow:0 40px 100px rgba(0,0,0,.2);
	   box-shadow:0 20px 40px rgba(200,200,200,.3);
       padding: 10px 0;
     }
 	.custom-navbar .navbar-brand{
 		color:#444;color:#fff;
 	}
	.custom-navbar .navbar-nav li a:hover,
	.custom-navbar .nav li.active > a {
	color: #f0f0f0;
	}
	.custom-navbar.top-nav-collapse .navbar-nav li a:hover,
	.custom-navbar.top-nav-collapse .nav li.active > a {
	color: #454545;
	}
	
	.custom-navbar.top-nav-collapse .nav li a {
	color:#444;
	}
 }
 
 @media screen and (max-width: 400px){
 	.logo {margin-left:10px;}
 	.logo a{
 		 display:block;
 	  background-image:url(../images/logo-gray.png),url(../images/designer-gray.png);
 	}
 }
 /*
 @media (min-width: 768px)  {
  .custom-navbar .nav li a {
  	  color: #656565;
  }
 }*/

 /*---------------------------------------
   Mobile Responsive styles              
 -----------------------------------------*/
 #home {
 	background: #3c3573;
 	width: 100%;
 	height: 100%;
 	background-image: url(../images/intro-bg.jpg);
 	background-repeat: no-repeat;
 	background-position: center;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	background-size: cover;
 	min-height: 804px;
 	position: relative;
 }
 
 #home .gradient-overla2y {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	opacity: .1;
 	background: -moz-linear-gradient(left, #b3b3b3 0%, #b3b3b3 20%, transparent 100%);  /* FF3.6-15 */
 	background: -webkit-linear-gradient(left, #b3b3b3 0%, #b3b3b3 20%, transparent 100%);  /* Chrome10-25,Safari5.1-6 */
 	background: linear-gradient(to right, #b3b3b3 0%, #b3b3b3 20%, transparent 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#b3b3b3', GradientType=1);  /* IE6-9 */
 }
 
 #home .overlay {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	opacity: .3;
 	background-color: #000;
	z-index: 1;
 }
 
/*.home-content-table {
	width: 100%;
	height: 100%;
	display: table;
	position: relative;	z-index: 500;
}

.home-content-tablecell {
	display: table-cell;
	vertical-align: bottom;
	z-index: 500;
}

.home-content-tablecell .row {
	position: relative;
}*/
 
   /*----------------------------------------------------------------------------------*/
   /*  Header
   /*-----------------------------------------------------------------------------------*/
   /*---------------------------------------
     Home section              
   -----------------------------------------*/
#home .container{z-index: 500;position:relative;}
   #home .header-content {
     height: 100vh;
     text-align: left;
     width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
   }
   
   .header-content h1 {
     font-weight: 700;
     margin-bottom: 10px;
     text-transform: uppercase;
     color: #fff;
   }
   
   .header-content p {
     font-size: 13px;
     letter-spacing: 5px;
     margin-top: 0;
     margin-bottom: 30px;
     text-transform: capitalize;
     color: #fff;
     font-weight: 500;
   }
   
   .header-content .list-social li {
     float: left;
     margin-right: 20px;
   }
   
   .header-content .list-social li i {
     color: #fff;
     font-size: 15px;
   }
 /*@media (min-width: 768px) and (max-width: 1024px) {
   #home {
     height: 50vh;
   }
 }
 
 @media (min-width: 667px) and (max-width: 767px) {
   #home {
     height: 140vh;
   }
 }
 
 @media (min-width: 568px) and (max-width: 665px) {
   #home {
     height: 190vh;
   }
 }
 
 @media (max-width: 980px) {
 
  h1 {font-size: 33px;}
 
  #work #work-thumb {
   margin-top: 30px;
  }
 
 }*/
 /*---------------------------------------
   About section              
 -----------------------------------------*/
 .scroll-icon {
 	position: absolute;
 	width: 60px;
 	height: 48px;
 	font-size:3.3rem;
 	bottom: 30px;
 	right: 20px;
 	color: #fff !important;
 	-webkit-animation: vertical 3s ease infinite;
 	animation: vertical 3s ease infinite;
	z-index:500;
 }
 
 /* vertical animation */
 @-webkit-keyframes vertical {
 	0%,
 	60%,
 	80%,
 	100% {
 		-webkit-transform: translateY(0);
 	}
 
 	20% {
 		-webkit-transform: translateY(-5px);
 	}
 
 	40% {
 		-webkit-transform: translateY(20px);
 	}
 
 }
 
 @keyframes vertical {
 	0%,
 	60%,
 	80%,
 	100% {
 		-webkit-transform: translateY(0);
 	}
 
 	20% {
 		-webkit-transform: translateY(-5px);
 	}
 
 	40% {
 		-webkit-transform: translateY(20px);
 	}
 
 }
 /* ===================================================================
   *  07. common and reusable styles 
   *
   * ------------------------------------------------------------------- */
.section-intro {
	text-align: center;
	position: relative;
	margin-bottom: 1.5rem;
	}

.section-intro h1 {
	font-size: 4.8rem;
	line-height: 1.375;
	color: #151515;
	}
.section-intro h2{font-weight:400;}
.section-intro h3 {
	font-size: 2rem;
	color: #51515;
	text-transform: uppercase;
	letter-spacing: .15rem;
	}
  
.section-title{
	margin-bottom:2rem;
	padding-bottom:2px;
	position:relative;
	}
.section-title:after {
  position: absolute;
  width: 50px;
  height: 4px;
  margin-left: 0;
  left: 48%;
  background: #ffc107;
  content: '';
  bottom: 0;
}
 
 #about .section-title {
 	padding-top:2rem;margin-top:2rem;
 }
 #about .section-title h2{text-align:left;}
 #about .col-md-4 a {
   width: 100px;
   height: 100px;
   display: inline-block;
   margin: 6px 6px 0 0;
 }
 
 #about .btn{margin-top:3rem;}

#about .section-title:after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    height: 4px;
    width: 50px;
    background: #ffc107;
}

@media (min-width: 992px){
	#about .col-lg-6 {
		padding-right:10rem;
	}
	#about .col-lg-5 {
		padding-left: 3rem;
	}
} 

.btn-primary{
	background:#ff9900;
	border-radius:4px;
	border:1px solid #ff9900;
	padding:8px 20px;
	margin-right:2rem;
	}
a.btn-primary:hover,a.btn-primary:active,a.btn-primary:visited,a.btn-primary:focus{
	background:#ff5400;
	border:1px solid #ff5400;
	}
	
	.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover{color:#fff;background-color:#ff5400;border-color:#ff5400}
.btn-secondary{
	background:#582ec7;
	border-radius:4px;
	border:1px solid #582ec7;
	color:#fff;
	padding:8px 20px;
	}
.btn-secondary:hover{
	background:#3303ae;
	border:1px solid #3303ae;
	color:#fff;
	}
a.btn-secondary:hover,a.btn-secondary:active,a.btn-secondary:visited,a.btn-secondary:focus,.btn-secondary.active.focus,.btn-secondary.active:focus,.btn-secondary.active:hover,.btn-secondary:active.focus,.btn-secondary:active:focus,.btn-secondary:active:hover{color:#fff;}

/*----------skills------*/
#services{padding-top:4rem;}

@media screen and (max-width:1024px) {
	#services{padding-top:0;}
	#about{padding-bottom:30px;}
	}
.box_1 {margin:0 8px 0 ;}
.services-carousel.row{width:98%;padding-left:1%;}
  .box_1 h3{
    text-transform: uppercase;
    color: #3c3c3c;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 3rem 0 2rem;
  }
  .box_1:hover h3{
    color: #f6cd23;
  }
  .box_1 span.top-icon1 {
    background-position:-16px -15px;
  }
  .box_1:hover span.top-icon1 {
    background-position:-16px -117px;
  }
  .box_1 span.top-icon2 {
    background-position:-116px -15px;
  }
  .box_1:hover span.top-icon2 {
    background-position:-116px -114px;
  }
  .box_1 span.top-icon3 {
    background-position:-212px -15px;
  }
  .box_1:hover span.top-icon3 {
    background-position:-212px -110px;
  }
  .box_1 p{
    color: #878787;
	font-size:14px;
    line-height: 30px;
    text-align: left;
    font-weight: 400;
  }
  
  
  /*-----------------------------------------------------------------------------------*/
  /*   Services
  /*-----------------------------------------------------------------------------------*/
  
  #services {
    background: #fff;
    position: relative;
    padding-bottom: 80px;
  }
  
  .owl-item {
    float: left;
  }



  .services-carousel{
	  margin-top:4rem;
  }
  .services-carousel  .owl-stage-outer {
    overflow: hidden;
    padding-bottom:20px;
  }
  
  .services-carousel .owl-dots {
    margin-top: 2rem;
    text-align: center;
  }
  
  .services-carousel .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    border: 0;
    padding: 0 !important;
    background-color: #ddd;
    cursor: pointer;
	outline:none;
  }
  
  .services-carousel .owl-dot.active {
    background-color: #ff9900;
	outline:none;
  }
  
  .owl-nav {
    display: none;
  }

 
 /*--------------new  timeline------------*/
  .timeline.container:before{display:none;}
  .timeline.container .timeline-heading {text-align:left;padding-bottom:5rem;}
  .timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
  }
  .timeline:before {
    top: 20px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 2px;
    background-color: #e6e6e6;
    left: 50%;
    margin-left: 0px;
  }
  @media screen and (max-width: 768px) {
    .timeline:before {
      margin-left: -64px;
    }
  }
  @media screen and (max-width: 480px) {
    .timeline:before {
      margin-left: -64px;
    }
  }
  @media screen and (max-width: 768px) {
    .timeline .timeline-heading {
      margin-bottom: 30px;
    }
  }
  .timeline .timeline-heading > div h3 {
    display: inline-block;
    padding: 7px 15px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: bold;
    background: #e6e6e6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
	z-index:100;
  }
  @media screen and (max-width: 768px) {
    .timeline .timeline-heading > div h3 {
      float: left;
      margin-bottom: 0;
    }
  }
  .timeline > li {
    margin-bottom: 20px;
    position: relative;
  }
  @media screen and (max-width: 768px) {
    .timeline > li {
      margin-bottom: 4em;
    }
  }
  .timeline > li:before, .timeline > li:after {
    content: " ";
    display: table;
  }
  .timeline > li:after {
    clear: both;
  }
  .timeline > li > .timeline-panel {
    width: 45%;
    float: left;
    margin-bottom: 0;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
  }
  @media screen and (max-width: 768px) {
    .timeline > li > .timeline-panel {
      width: 85% !important;
    }
  }
  @media screen and (max-width: 480px) {
    .timeline > li > .timeline-panel {
      width: 75% !important;
    }
    .timeline > li > .timeline-panel:before {
      top: 30px;
    }
    .timeline > li > .timeline-panel:after {
      top: 31px;
    }
  }
  .timeline > li > .timeline-badge {
    color: #fff;
    width: 44px;
    height: 44px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -21px;
    background-color: #FF9000;
    z-index: 100;
    display: table;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
  }
  @media screen and (max-width: 768px) {
    .timeline > li > .timeline-badge {
      margin-left: -10px !important;
    }
  }
  @media screen and (max-width: 992px) {
    .timeline > li > .timeline-badge {
      margin-left: -10px !important;
    }
  }
  .timeline > li > .timeline-badge i {
    display: table-cell;
    vertical-align: middle;
    height: 44px;
    font-size: 18px;
  }
  .timeline > li.timeline-unverted {
    text-align: right;
  }
  .timeline > li.timeline-unverted p.timeframe {
    text-align: right;
  }
  @media screen and (max-width: 768px) {
    .timeline > li.timeline-unverted {
      text-align: left;
    }
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
  }
  .timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }
  .timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
  
  .timeline-title {
    margin-top: 0;
  }
  
  .company {
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: normal;
    color: #bfbfbf;
  }
  
  .timeline-content > p,
  .timeline-content > ul {
    margin-bottom: 0;
  }
  
  .timeline-content > p + p {
    margin-top: 5px;
  }
  
  @media (max-width: 992px) {
    ul.timeline:before {
      left: 90px;
    }
  
    ul.timeline > li > .timeline-panel {
      width: calc(100% - 200px);
      width: -moz-calc(100% - 200px);
      width: -webkit-calc(100% - 200px);
    }
  
    ul.timeline > li > .timeline-badge {
      left: 15px;
      margin-left: 0;
      top: 16px;
    }
  
    ul.timeline > li > .timeline-panel {
      float: right;
    }
  
    ul.timeline > li > .timeline-panel:before {
      border-left-width: 0;
      border-right-width: 15px;
      left: -15px;
      right: auto;
    }
  
    ul.timeline > li > .timeline-panel:after {
      border-left-width: 0;
      border-right-width: 14px;
      left: -14px;
      right: auto;
    }
  }
  
  
  /* -------------------------------------------------------------------
   * masonry entries - (_layout.css) 
   * ------------------------------------------------------------------- */
  .bricks-wrapper .item-wrap {
  	position: relative;
  	overflow: hidden;
  	margin-bottom:40px;
  }
  
  .bricks-wrapper .item-wrap .overlay {
  	cursor: zoom-in;
  }
  
  .bricks-wrapper .item-wrap .overlay img {
  	vertical-align: bottom;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
  }
  
  .bricks-wrapper .item-wrap .overlay::before {
  	content: "";
  	display: block;
  	background: rgba(0, 0, 0, 0.8);
  	opacity: 0;
  	visibility: hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	-moz-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out;
  	-webkit-transition: all 0.5s ease-in-out;
  	-ms-transition: all 0.5s ease-in-out;
  	transition: all 0.5s ease-in-out;
  	z-index: 1;
  }
  
  .bricks-wrapper .item-wrap .overlay::after {
  	content: "+";
  	font-family: sans-serif;
  	font-size: 2.4rem;
  	z-index: 1;
  	display: block;
  	height: 30px;
  	width: 30px;
  	line-height: 30px;
  	margin-left: -15px;
  	margin-top: -15px;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	text-align: center;
  	color: #fff;
  	opacity: 0;
  	visibility: hidden;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
  	-webkit-transform: scale(0.5);
  	-ms-transform: scale(0.5);
  	transform: scale(0.5);
  }
  
  .bricks-wrapper .item-wrap .item-text {
  	position: absolute;
  	top: 0;
  	left: 0;
  	padding: 3rem 0 0 3rem;
  	margin-right: 5rem;
  	z-index: 3;
  }
  
  .bricks-wrapper .item-wrap .item-text .folio-title {
  	color: #fff;
  	font-size: 2rem;
  	line-height: 1.364;
  }
  
  .bricks-wrapper .item-wrap .item-text .folio-types {
  	font-family: "montserrat-regular", sans-serif;
  	font-size: 1.2rem;
  	text-transform: uppercase;
  	letter-spacing: .1rem;
  	color: rgba(255, 255, 255, 0.7);
  }
  
  .bricks-wrapper .item-wrap .details-link {
  	display: block;
  	background-color: #fff;
  	height: 4.6rem;
  	width: 4.6rem;
  	line-height: 4.6rem;
  	text-align: center;
  	z-index: 2;
  	position: absolute;
  	top: 3.6rem;
  	right: 0;
  }
  
  .bricks-wrapper .item-wrap .details-link span {
  	font-size: 2.2rem;
  	line-height: 4.6rem;
	color:#000;
  }
  
  .bricks-wrapper .item-wrap .details-link:hover,
  .bricks-wrapper .item-wrap .details-link:focus {
  	background-color: #000;
  }
  .bricks-wrapper .item-wrap .details-link:hover span{color:#fff;}
  
  .bricks-wrapper .item-wrap .item-text,
  .bricks-wrapper .item-wrap .details-link {
  	opacity: 0;
  	visibility: hidden;
  	-webkit-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	transform: translateY(100%);
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
  }
  
  .bricks-wrapper .item-wrap:hover .overlay::before {
  	opacity: 1;
  	visibility: visible;
  }
  
  .bricks-wrapper .item-wrap:hover .overlay::after {
  	opacity: 1;
  	visibility: visible;
  	-webkit-transform: scale(1);
  	-ms-transform: scale(1);
  	transform: scale(1);
  }
  
  .bricks-wrapper .item-wrap:hover .overlay img {
  	-webkit-transform: scale(1.05);
  	-ms-transform: scale(1.05);
  	transform: scale(1.05);
  }
  
  .bricks-wrapper .item-wrap:hover .item-text,
  .bricks-wrapper .item-wrap:hover .details-link {
  	opacity: 1;
  	visibility: visible;
  	-webkit-transform: translateX(0);
  	-ms-transform: translateX(0);
  	transform: translateX(0);
  }
  
  
  #portfolio .portfolio-list .nav li.filter-active { 
  	 color: #fff;
  }
  
  
  .portfolio-list{margin-bottom:2rem;}
  /* My Work Section*/
  .portfolio-list .nav .filter a {
      padding: 5px 18px;
      color: #868686;
      border-radius: 50px;
      font-family: Montserrat-Regular;
  	display: inline-block;
  	font-weight:700;
  	text-transform:uppercase;
  	font-size:13px;
  }
  .portfolio-list .nav .filter {
  	margin-bottom:10px;	padding:4px 20px;
  }
  .portfolio-list .nav .filter-active {
  	background-color: #ffc107;
      color: #fff;
      border-radius: 50px;
  }
  .portfolio-item .portfolio-link {
      position: relative;
      display: block;
      max-width: 400px;
      margin: 0 auto;
      cursor: pointer;
  	height:200px;
  }
  .portfolio-item .portfolio-link img {
  	width:100%;
  	height:100% !important;
  }
  .portfolio-item .portfolio-link .portfolio-hover {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-transition: all ease .5s;
      -moz-transition: all ease .5s;
      transition: all ease .5s;
      opacity: 0;
      background: rgba(254,209,54,.9);
  }
  .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
      font-size: 20px;
      position: absolute;
      top: 50%;
      width: 100%;
      height: 20px;
      margin-top: -12px;
      text-align: center;
      color: #fff;
  }
  .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
      margin-top: -12px;
  }
  .portfolio-item .portfolio-caption {
      max-width: 400px;
      margin: 0 auto;
      padding: 25px;
      text-transform:uppercase;
      background-color: #fff;
  	font-family: Montserrat-Medium;
  	text-align:center;
  }
  .portfolio-item .portfolio-caption p:hover {
  	color: #f41067;
  }
  .portfolio-item .portfolio-link .portfolio-hover:hover {
      opacity: 1;
  }
  .nav.classic-tabs {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  	padding-left: 0;
  	margin-bottom: 0;
  	list-style: none;
    }
	.nav.classic-tabs li{cursor:pointer;}
	.nav.classic-tabs li:hover {color:#ff9900;}
	.justify-content-center {
		-webkit-box-pack: center !important;
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}

  .imgkuang{
  	width:100%;
  	height:250px;
  	overflow:hidden;
  	display:block;
  
  }
  
  .imgkuang img {
  	width:100%;
  	height:100%;		
  	object-fit: cover;
  }
  /*timeline*/
  .work .timeline-wrap {
   	position: relative;
   	text-align: left;margin-top:4rem;
   }
   
   .work .timeline-wrap:before {
   	content: "";
   	display: block;
   	width: 1px;
   	height: 100%;
   	background-color: rgba(0, 0, 0, 0.1);
   	position: absolute;
   	left: 3.8rem;
   	top: 0;
	z-index:0;
   }
   
   .work .timeline-block {
   	position: relative;
   	padding-left: 8rem;
   	margin-bottom: 4.2rem;
   }
   
   .work .timeline-ico {
   	height: 4.8rem;
   	width: 4.8rem;
   	line-height: 4.8rem;
   	background: #ff9900;
   	border-radius: 50%;
   	text-align: center;
   	color: #fff;
   	position: absolute;
   	left: 2rem;
   	top: 0;
   	margin-left: -2.4rem;
	font-size:2.3rem;
   }
   
   .work .timeline-ico2{background: #9188cf;background:#fa5800;}
   
    .work .timeline-header .timeframe {
   	font-family: "STHeiti","Arial","Microsoft Yahei","Hiragino Sans GB", "WenQuanYi Micro Hei", "Simsun,sans-self","montserrat-regular", sans-serif;
   	font-size: 1.4rem;
   	color: #757575;
   	margin-bottom: 0;
   }
   
   .work .timeline-header h3 {
   	font-size: 2rem;
   	line-height: 1.25;
   	margin:1rem 0;
   }
  .work p{margin-bottom: 3rem;}
    .timeline-content{margin-bottom:6rem;}
    
   /*-----------------------------------------------------------------------------------*/
     /*  Journal
     /*-----------------------------------------------------------------------------------*/
     .journal-info{padding-top:2rem;padding-bottom:2rem;}
     @media screen and (max-width: 400px) {
   	    .journal-info{}
   }
     
     #journal {
       height: auto;
       width: 100%;
       padding-bottom: 60px;
       position: relative;
     }
     
     
     #journal .journal-block {
       display: inline-block;
       height: auto;
       width: 100%;
     }
     
     #journal .journal-block .journal-info {
       position: relative;
     }
     
     .journal-block .journal-info img {
       min-width: 100%;
     }
     
     .journal-block .journal-info .journal-txt {
       position: relative;
     }
     
     .journal-block .journal-info .journal-txt h3 a {
       font-weight: 500;
       -moz-transition: all 0.5s ease-in-out 0s;
       -ms-transition: all 0.5s ease-in-out 0s;
       -o-transition: all 0.5s ease-in-out 0s;
       -webkit-transition: all 0.5s ease-in-out 0s;
       transition: all 0.5s ease-in-out 0s;
     }
     
     .journal-block .journal-info .journal-txt h3 a:hover {
       -moz-transition: all 0.5s ease-in-out 0s;
       -ms-transition: all 0.5s ease-in-out 0s;
       -o-transition: all 0.5s ease-in-out 0s;
       -webkit-transition: all 0.5s ease-in-out 0s;
       transition: all 0.5s ease-in-out 0s;
     }
     
     .journal-block .journal-info .journal-txt p {
       margin: 0;
     }
    .journal-txt h3{margin:2rem 0;}
	
	
/*-----------------------------------------------------------------------------------*/
/*  Footer
/*-----------------------------------------------------------------------------------*/

#footer {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

#footer p {
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-top: 0;
  text-transform: uppercase;text-align:center;
  color:#f0f0f0;
}

.credits {
  font-size: 13px;
}

 #go-top {
 	position: fixed;
 	bottom: 42px;
 	right: 30px;
 	z-index: 700;
 	display: none;
 }
 
 #go-top a {
 	text-decoration: none;
 	border: 0 none;
 	display: block;
 	height: 63px;
 	width: 60px;
 	line-height: 63px;
 	text-align: center;
 	background-color: #000;
 	color: #888;
 	text-align: center;
 	text-transform: uppercase;
 	-moz-transition: all 0.3s ease-in-out;
 	-o-transition: all 0.3s ease-in-out;
 	-webkit-transition: all 0.3s ease-in-out;
 	-ms-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
 }
 
 #go-top a i {
 	font-size: 21px;
 	line-height: inherit;
 }
 
 #go-top a:visited {
 	background: #000;
 	color: #888;
 }
 
 #go-top a:hover,
 #go-top a:focus {
 	background: #000;
 	color: #fff;
 }
 
 
 /*blog*/
 .paddsection {
   padding-top:90px;
   padding-bottom: 80px;
 }
 
 .paddsections {
   padding-top: 90px;
   padding-bottom: 90px !important;
 }
 
 /* Top Page Scrolling Arrow */
 #top {
 	background: url(../images/syn/totop.png) no-repeat center center #fff;background-size:24px 24px;
 	border-radius: 50%;
 	bottom: 4.5em;
 	right: 2em;
 	color: #000;
 	display: none;
 	position: fixed;
 	text-decoration: none;
 	width: 60px;
 	height: 60px;
 	line-height: 60px;
   text-align: center;
   z-index:0;
   box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
   opacity:0.8;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #top i {
     color: #fff;
     margin: 0;
     position: relative;
     left: 11px;
     top: 7px;
     font-size: 19px;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }
 #top:hover {
     color: #F9F9F9; box-shadow: 2px 2px 20px rgba(0,0,0,0.2);opacity:1;
 }
 #top:hover i {
     color: #fff;
     top: 5px;
 }
 

	 /* Freelance Section*/
	 #contact {
		background-image:url(../images/freelancer-back.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding-bottom: 50px;
		padding-top: 50px;
		background-color:#fff;
	 }
	 #contact h1 span:first-child {
	 	font-family: Montserrat-Light;
	 	color:#fff;
	 }
	 #contact h1 span:last-child {
	 	font-family: Montserrat-Bold;
	 	color:#ff9900;
	 }
	 #contact h4,#contact h5,#contact h4 a,#contact h5 a{color:#cbcbcb;line-height:1.5;}
	 #contact h4 a:hover,#contact h5:hover, #contact h4 a:focus,#contact h5:focus{color:#fff;}
	 #contact h5 a{color:#ebebeb;}
	 #contact p a{color:#878787;}
	 #contact p a:hover{color:#f0f0f0;}
	 .freelancer-img {
		position: absolute;
		top: -160px;
	 }	

.lg a{color:#ff9900;margin:0 2px;}
.lg a:hover{color:#ff5400;}


@media screen and (max-width: 768px){
	  .freelancer-img{top:-157px;}
	  .work .timeline-ico{margin-left:-2rem;}
	  .timeline .timeline-heading > div h3{z-index:1000;zoom:1;}
	  .section-title:after{left:46.5%;}
  }


  @media screen and (max-width: 600px){
	  .row{padding-left:25px;padding-right:25px;}
	  .work .timeline-ico {margin-left:-1.7rem;}
	  #contact .col-md-5,.freelancer-img {display:none;}
	  .section-title:after{left:44%;}
  }

.none,.none a {display:none;}
 @media screen and (max-width: 414px){
 	#contact .col-md-5,.freelancer-img {
		display:none;
 	}
	.section-title:after{left:43%;}
	.work .timeline-ico { margin-left: -1.7rem;}
 }
 @media screen and (max-width: 375px){
 	#contact .col-md-5 {
		display:none;
 	}
	.section-title:after{left:42%;}
	.work .timeline-ico { margin-left: -0.7rem;}
 }