@charset "utf-8";@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900&subset=latin,latin-ext);@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);@import url(http://fonts.googleapis.com/css?family=Dosis:300,400,700);@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700italic,400italic,300italic,300);@import url(assets/typo/et-line-font/style.css);@import url(assets/typo/font-awesome/font-awesome.css);@import url(assets/typo/pe-icon-7-stroke/css/pe-icon-7-stroke.css);@import url(assets/typo/simple-line-icons/simple-line-icons.css);@import url(assets/typo/typicons/typicons.min.css);@import url(assets/typo/linecons/linecons.css);@import url(assets/typo/zsocial/css/fontello.css);@import url(assets/typo/enfonto/style.css);html,body,.vs-container{position:relative;width:100%;height:100%;}html{overflow-y:scroll;-ms-overflow-style:scrollbar;}html,body{height:100%;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}.page{overflow:hidden;}iframe{border:none;}a:focus,a:active{-moz-outline:none;outline:none;}img:not([draggable]),embed,object,video{max-width:100%;height:auto;}.lead{margin:1em 0 2em 0;line-height:1.6;font-weight:400;}.align-center{text-align:center!important;}.align-left{text-align:left!important;}.align-right{text-align:right!important;}.float-left{float:left!important;}.float-right{float:right!important;}.float-none{float:none!important;}.relative{position:relative;}.hidden{display:none;}.overflow-h{overflow:hidden!important;}.overflow-v{overflow:visible!important;}.overflow-i{overflow:inherit!important;}.width-full{width:100%!important;}.full-wrapper{margin:0 2%;z-index:9999999;}.container-wrapper{width:1200px;margin:0 auto;}.stick-fixed{position:fixed!important;top:0;left:0;}::selection{background-color:#ffea00;color:#4b4e53}::-moz-selection{background-color:#ffea00;color:#4b4e53}.animate,.animate *{-webkit-transition:all 0.27s cubic-bezier(0.000,0.000,0.580,1.000);-moz-transition:all 0.27s cubic-bezier(0.000,0.000,0.580,1.000);-o-transition:all 0.27s cubic-bezier(0.000,0.000,0.580,1.000);-ms-transition:all 0.27s cubic-bezier(0.000,0.000,0.580,1.000);transition:all 0.27s cubic-bezier(0.000,0.000,0.580,1.000);}.no-animate,.no-animate *{-webkit-transition:0 none!important;-moz-transition:0 none!important;-ms-transition:0 none!important;-o-transition:0 none!important;transition:0 none!important;}.clear{clear:both;}.clearlist,.clearlist li{list-style:none;padding:0;margin:0;background:none;}address{margin-bottom:0px;font-style:normal;line-height:26px;font-size:14px;}dl dt{margin-bottom:5px;}dl dd{margin-bottom:15px;}pre{background-color:#f9f9f9;border-color:#ddd;}hr{background-color:rgba(255,255,255,.08);}hr.white{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.35);}hr.black{border-color:rgba(0,0,0,.85);background:rgba(0,0,0,.85);}.block{display:block!important;}.inline-block{display:inline-block;}.none{display:none!important;}.divcenter{position:relative!important;float:none!important;margin-left:auto!important;margin-right:auto!important;}.block-100{display:block!important;width:100%!important;margin-left:auto;margin-right:auto;}.load-container{display:none!important;}.load-container.show{display:block!important;}.pageload-overlay{position:fixed;width:100%;height:100%;top:0;left:0;visibility:hidden;z-index:9999999999999;}.pageload-overlay.show{visibility:visible;}.pageload-overlay svg{position:absolute;top:0;left:0;pointer-events:none;}.pageload-overlay svg path{fill:#fff;}.pageload-overlay::after,.pageload-overlay::before{content:'';position:fixed;width:20px;height:20px;top:50%;left:50%;margin:-10px 0 0 -10px;border-radius:50%;visibility:hidden;opacity:0;z-index:9999999999999;-webkit-transition:opacity 0.15s,visibility 0s 0.15s;transition:opacity 0.15s,visibility 0s 0.15s;}.pageload-overlay::after{background:#6cc88a;-webkit-transform:translateX(-20px);transform:translateX(-20px);-webkit-animation:moveRight 0.6s linear infinite alternate;animation:moveRight 0.6s linear infinite alternate;}.pageload-overlay::before{background:#4fc3f7;-webkit-transform:translateX(20px);transform:translateX(20px);-webkit-animation:moveLeft 0.6s linear infinite alternate;animation:moveLeft 0.6s linear infinite alternate;}@-webkit-keyframes moveRight{to{-webkit-transform:translateX(20px);}}@keyframes moveRight{to{transform:translateX(20px);}}@-webkit-keyframes moveLeft{to{-webkit-transform:translateX(-20px);}}@keyframes moveLeft{to{transform:translateX(-20px);}}.pageload-loading.pageload-overlay::after,.pageload-loading.pageload-overlay::before{opacity:1;visibility:visible;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}canvas{display:block;z-index:9999999;width:100%;height:100%;}.loader-col{background-color:rgba(0,0,0,0.02);vertical-align:middle;border-radius:1px;height:100px;text-align:center;overflow:hidden;margin-bottom:30px;}.bo-loading{display:block;width:100%;height:100%;position:fixed;top:0;left:0;background:#fefefe;z-index:999999999;}.loader-w{width:50px;height:50px;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;}.loader-w1{width:600px!important;position:absolute;top:50%;left:50%;margin:0px 0 0 -300px;}.loader{width:50px;height:50px;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;font-size:10px;text-indent:-12345px;border-top:1px solid rgba(20,185,213,1);border-right:1px solid rgba(20,185,213,0.08);border-bottom:1px solid rgba(20,185,213,0.08);border-left:1px solid rgba(20,185,213,0.5);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:spinner 700ms infinite linear;-moz-animation:spinner 700ms infinite linear;-ms-animation:spinner 700ms infinite linear;-o-animation:spinner 700ms infinite linear;animation:spinner 700ms infinite linear;z-index:99999999999999;}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}}.o-loader{position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;}.loader-o{position:relative;display:inline-block;height:46px;width:46px;margin:1em;border-radius:50%;background:none repeat scroll 0 0 #DDDDDD;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.1) inset,0 0 25px rgba(0,0,255,0.075);}.loader-o:after{content:"";position:absolute;top:9px;left:9px;display:block;height:28px;width:28px;background:none repeat scroll 0 0 #F2F2F2;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.1);}.loader-o>span{position:absolute;height:100%;width:50%;overflow:hidden;}.loader .left{left:0}.loader .right{left:50%}.anim{position:absolute;left:100%;top:0;height:100%;width:100%;border-radius:999px;background:none repeat scroll 0 0 #508EC3;opacity:0.8;-webkit-animation:ui-spinner-rotate-left 3s infinite;animation:ui-spinner-rotate-left 3s infinite;-webkit-transform-origin:0 50% 0;transform-origin:0 50% 0;}.left .anim{border-bottom-left-radius:0;border-top-left-radius:0;}.right .anim{border-bottom-right-radius:0;border-top-right-radius:0;left:-100%;-webkit-transform-origin:100% 50% 0;transform-origin:100% 50% 0;}.loader-o2 .anim{-webkit-animation-delay:0;animation-delay:0;}.loader-o2 .right .anim{-webkit-animation-delay:1.5s;animation-delay:1.5s;}.loader-o3 .anim{-webkit-animation-delay:0s;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;animation-delay:0s;animation-duration:3s;animation-timing-function:linear;}.loader-o3 .right .anim{-webkit-animation-name:ui-spinner-rotate-right;-webkit-animation-delay:0;-webkit-animation-delay:1.5s;animation-name:ui-spinner-rotate-right;animation-delay:0;animation-delay:1.5s;}.round .loader-o:after{display:none}.double .loader-o:after{height:13px;width:13px;left:7px;top:7px;border:10px solid #ddd;background:transparent;box-shadow:none;}@keyframes ui-spinner-rotate-right{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}@keyframes ui-spinner-rotate-left{0%{transform:rotate(0deg)}25%{transform:rotate(0deg)}50%{transform:rotate(180deg)}75%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes ui-spinner-rotate-right{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes ui-spinner-rotate-left{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}.timer{width:24px;height:24px;background-color:transparent;box-shadow:inset 0px 0px 0px 2px #333;border-radius:50%;position:relative;margin:38px auto;}.timer:after,.timer:before{position:absolute;content:"";background-color:#333;}.timer:after{width:10px;height:2px;top:11px;left:11px;-webkit-transform-origin:1px 1px;-moz-transform-origin:1px 1px;transform-origin:1px 1px;-webkit-animation:minhand 2s linear infinite;-moz-animation:minhand 2s linear infinite;animation:minhand 2s linear infinite;}.timer:before{width:8px;height:2px;top:11px;left:11px;-webkit-transform-origin:1px 1px;-moz-transform-origin:1px 1px;transform-origin:1px 1px;-webkit-animation:hrhand 8s linear infinite;-moz-animation:hrhand 8s linear infinite;animation:hrhand 8s linear infinite;}@-webkit-keyframes minhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes minhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframes minhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes hrhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes hrhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframes hrhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.typing_loader{width:6px;height:6px;border-radius:50%;-webkit-animation:typing 1s linear infinite alternate;-moz-animation:Typing 1s linear infinite alternate;animation:typing 1s linear infinite alternate;margin:46px auto;position:relative;left:-12px;}@-webkit-keyframes typing{0%{background-color:rgba(0,0,0,1);box-shadow:12px 0px 0px 0px rgba(0,0,0,0.2),24px 0px 0px 0px rgba(0,0,0,0.2);}25%{background-color:rgba(0,0,0,0.4);box-shadow:12px 0px 0px 0px rgba(0,0,0,2),24px 0px 0px 0px rgba(0,0,0,0.2);}75%{background-color:rgba(0,0,0,0.4);box-shadow:12px 0px 0px 0px rgba(0,0,0,0.2),24px 0px 0px 0px rgba(0,0,0,1);}}@-moz-keyframes typing{0%{background-color:rgba(0,0,0,1);box-shadow:12px 0px 0px 0px rgba(0,0,0,0.2),24px 0px 0px 0px rgba(0,0,0,0.2);}25%{background-color:rgba(0,0,0,0.4);box-shadow:12px 0px 0px 0px rgba(0,0,0,2),24px 0px 0px 0px rgba(0,0,0,0.2);}75%{background-color:rgba(0,0,0,0.4);box-shadow:12px 0px 0px 0px rgba(0,0,0,0.2),24px 0px 0px 0px rgba(0,0,0,1);}}@keyframes typing{0%{background-color:rgba(0,0,0,1);box-shadow:12px 0px 0px 0px rgba(0,0,0,0.2),24px 0px 0px 0px rgba(0,0,0,0.2);}25%{background-color:rgba(0,0,0,0.4);box-shadow:12px 0px 0px 0px rgba(0,0,0,2),24px 0px 0px 0px rgba(0,0,0,0.2);}75%{background-color:rgba(0,0,0,0.4);box-shadow:12px 0px 0px 0px rgba(0,0,0,0.2),24px 0px 0px 0px rgba(0,0,0,1);}}.location_indicator{margin:30px auto;position:relative;left:-9px;}.location_indicator:before,.location_indicator:after{position:absolute;content:"";}.location_indicator:before{width:20px;height:20px;border-radius:100% 100% 100% 0;box-shadow:0px 0px 0px 2px rgba(0,0,0,1);-webkit-animation:mapping 1s linear infinite;-moz-animation:mapping 1s linear infinite;animation:mapping 1s linear infinite;-webkit-transform:rotate(-46deg);-moz-transform:rotate(-46deg);transform:rotate(-46deg);}.location_indicator:after{width:30px;height:10px;border-radius:100%;left:44px;background-color:rgba(0,0,0,0.2);top:24px;z-index:-1;}@-webkit-keyframes mapping{0%{top:0;}50%{top:-5px;}100%{top:0;}}@-moz-keyframes mapping{0%{top:0;}50%{top:-5px;}100%{top:0;}}@-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}

/*  CerEdil  */
/*
* {
	margin-left:auto;
	margin-right:auto;
}
::-webkit-input-placeholder { 
    color: #2a3858;
	text-align: center;
	padding: 15px;
	font-size: 15px;
}
html,body{overflow-x: hidden;}
#container {
	margin: 0px auto;
	width:100%;
}
body {
	margin: 0px;
	background-color:#ffffff;
	width:100%;
	text-align:center;
}
#profileimage {
	opacity: 0;
}
#header {
	background: #ffffff;
	height:2000%;
}
#mainlogoblog {
	width:5%;
	
}
section {
	display:block;
	background:#ffffff;
	height:2000px;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	font-size:40px;
	margin-bottom:100px;
}
.week {
	height:2000%;
	background-color:#DFDFDF;
}

#home {
	height: 10%;
	background-color:#ffffff;
	margin-bottom:auto;
}
#mainlogo {
	position:relative;
	width:30%;
	margin-left:35%;
	margin-bottom:3%;
	margin-top:220px;
}
#mainlogo:hover {
	transition: 2s;
	opacity:0.5;
}
#maintitle {
	text-align:center;
	margin-bottom: -30px;
	
}

#maintitle p {
	font-family: 'Roboto', sans-serif;
	font-size:45px;
	color: #000000;
}
#maintitle2 {
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	margin-bottom: 600px;
	color: #26a4dc; 
}
#aboutme {
	height:2000%;
	margin-bottom:200px;
}
.title h1 {
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	
}
h2 {
	font-family: 'Montserrat', sans-serif;
	font-size:25px;
}


#webdesign {
	height:2000%;
	margin-bottom:200px;
}
#project {
	background-color:#38495E;
	height:2000%;
	color:#ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size:25px;
	min-height: 270px;
	padding-top: 100px;
	opacity: 0;
	
}
span {
	color:#1AA9D3;
	
}
a {
	text-decoration:none;
	color: #1aa9d3;
}
a:hover {
	color: #A9D9FF;
}
#graphicdesign {
	height:2000%;
	margin-bottom:200px;
	
}
#services {
	height:2000%;
	margin-bottom:200px;
}
.servicesicon {
	width:50%;
	align-content:center;
	margin-left:25%;
}
#contact {
	height:2000%;
	margin-bottom:20px;
}
#prefooter {
	background-color: #323232;
	height:2000%;
}
.icons {
	display:inline-block;
	vertical-align:middle;
	width:10%;
	margin-left:3%;
	padding:20px;
}

#footer {
	height: 2000%;
	background-color: #B8B8B8;
}
#footer p {
	font-size:15px;
	float:left;
	margin-left: 10px;
}
.content {
	align-content:center;
}
.content img {
	display:block;
	margin: 0 auto;
	width:15%;
}
.content ul {
	list-style:none;
	text-align:center;
	width:40%;
	margin-left:27%;
}
.content ul li {
	text-align:center;
	font-size:20px;
}
.content p {
	text-align:center;
	font-size:20px;
	width:40%;
	margin-left:30%;
}
.social {
	align-content: center;
	width: 20%;
	vertical-align: top;
	display: inline-block;
	margin-left: -150px;
	margin-right: -150px;
}
h5 {
	font-size:22px;
}



body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1c2a58;
  	
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #fdc80d;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  margin-left: 20px; 
	font-family: 'Roboto', sans-serif;
}

ul.topnav li a:hover {
	transition: 2s;
	background-color: #fdc80d;
	color: #1c2a58;
}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
@media screen and (max-width:800px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:800px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
.flex-container {
  padding: 0;
  margin-left:10%;
  display: flex;
  flex-flow: row wrap;
  width:80%;
}
.flex-container p {
 font-size:12px;
}

.flex-item {
  background: #ffffff;
  color: white;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  padding:2px;
  
  flex: 1 0 0;
}

.double{
  flex: 2 0 0;
}

.column{
  flex-direction: column;
}

.stretch{
  align-self: stretch;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
    height: 20px;
}
.date p {
    color: #a2adb3;
    font-family: 'Montserrat', sans-serif; 
    font-size: 12px;
    text-transform: uppercase;
}
.date p:before, .date p:after {
    color: #a2adb3;
    font-family: 'Montserrat', sans-serif; 
    font-size: 12px;
    content: "-";
}
.date p:before {
    margin-right: 10px;
}
.date p:after {
    margin-left: 10px;
}
figure { margin: 0; }
.image-container {
	
	overflow: hidden;
	position: relative;
    display: inline-block;
    max-width: 100%;
    background: none repeat scroll 0 0 #ffffff;
}
.image-container img {
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
.image-container:hover img {
	-webkit-transform: translateY(-95px);
	-moz-transform: translateY(-95px);
	-ms-transform: translateY(-95px);
	-o-transform: translateY(-95px);
	transform: translateY(-95px);
    opacity: 0.4;
}
.image-container:hover figcaption {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: -webkit-transform .4s, opacity .1s;
	-moz-transition: -moz-transform .4s, opacity .1s;
	-ms-transition: -ms-transform .4s, opacity .1s;
	-o-transition: -o-transform .4s, opacity .1s;
	transition: transform .4s, opacity .1s;
}
.image-container figcaption {
	background: #ffffff;
	bottom: 0;
	opacity: 0;
	padding: 20px 0px;
	position: absolute;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
	-moz-transition: -moz-transform .4s, opacity .1s .3s;
	-ms-transition: -ms-transform .4s, opacity .1s .3s;
	-o-transition: -o-transform .4s, opacity .1s .3s;
	transition: transform .4s, opacity .1s .3s;
	width: 100%;
    text-align: center;
}
figure .container {
	height: 392px;
	position: absolute;
	top: 50%;
	width: 70%;
}

.image-container1 {
	width:100%;
}
figure .button {
	background: #ffffff;
	border-radius: 3px;
    border: 1px solid #2b2f35;
	color: #2b2f35;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
	display: inline-block;
	font-weight: 400;
	padding: 15px 40px;
    font-size: 14px;
    text-decoration: none;
    margin-top: 10px;
    -webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
figure .button:hover {
	background: #2b2f35;
    border: 1px solid transparent;
    color: #ffffff;
}
figure h4 {
	color: #2b2f35;
    font-family: 'Montserrat', sans-serif; 
    font-size: 14px;
	margin: 0;
	padding: 0;
  text-transform: uppercase;
  font-weight: 400;
}
figure .date p { margin: 0px; }
figure img {
	bottom: 0;
	display: block;
	height: auto;
	max-width: 100%;
}

figure .button:hover {
	background: #2b2f35;
    border: 1px solid transparent;
    color: #ffffff;
}
figure h4 {
	color: #2b2f35;
    font-family: 'Montserrat', sans-serif; 
    font-size: 14px;
	margin: 0;
	padding: 0;
  text-transform: uppercase;
  font-weight: 400;
}
figure .date p { margin: 0px; }
figure img {
	bottom: 0;
	display: block;
	height: auto;
	max-width: 100%;
}
@media (max-width: 800px){  
  .flex-container{
    flex-direction: column;
  }
  
  .flex-item-2{
     flex-grow: 2;
  }
}
@media (max-width: 600px){
	.icons {
	width:60%;
	padding:20px;
}
	.downArrow{
	bottom: 2%;
	left: 45%;
	
}
	#mainlogo {
		width: 80%;
		margin-left: 10%;
		margin-top: -50px;
	}
#mainlogoblog {
	width:30%;
	margin-left:35%;
}
.content {
	align-content:center;
	width: 100%;
}
.content img {
	display:block;
	margin: 0 auto;
	width:15%;
}
.content ul {
	list-style:none;
	text-align:center;
	width:40%;
	margin-left:27%;
}
.content ul li {
	text-align:center;
	font-size:20px;
}
.content p {
	text-align:center;
	font-size:20px;
	width:80%;
	margin-left:10%;
}

#project {
	background-color:#323232;
	color:#ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size:20px;
	text-align:center;
	width:80%;
	
}	
.servicesicon {
	width:100%;
	margin-left:1%;

}
	#profileimage img {
		width: 60%;
	}
	#maintitle {
	text-align:center;
	margin-bottom: -50px;
}
	#maintitle2 {
		margin-bottom: 300px;
	}
}
@media (max-width: 800px){
	.icons {
	width:60%;
	padding:20px;
}
#mainlogo {
	
		width: 60%;
		margin-left: 20%;
	}

.content {
	align-content:center;
}
.content img {
	display:block;
	margin: 0 auto;
	width:15%;
}
.content ul {
	list-style:none;
	text-align:center;
	width:40%;
	margin-left:27%;
}
.content ul li {
	text-align:center;
	font-size:20px;
}
.content p {
	text-align:center;
	font-size:20px;
	width:80%;
	margin-left:10%;
}

#project {
	background-color:#323232;
	color:#ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size:20px;
	text-align:center;
	width:80%;
	
}	
.servicesicon {
	width:100%;
	margin-left:1%;

}
	
	
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
}  
#ajax-contact {
	font-family: 'Cabin', sans-serif;
	width: 100%;
	background-color: #F4F4F4;
	padding: 20px;
}
#page-wrapper {
  width: 640px;
  background: #ffffff;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
  margin-top: 0;
}

.field {
  margin: 1em 0;
}

label {
  display: block;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: #000000;
  font-size: 25px;
	
}

input {
  width: 50%;
  padding: 0.5em 0.5em;
  font-size: 15px;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
	text-align: center;
}
#name {
	height: 20px;
}

#email {
	height: 20px;
}

textarea {
  width: 50%;
  height: 100px;
  padding: 0.5em 0.5em;
  font-size: 15px;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
	text-align: center;
	
}

button {
  display: inline-block;
  border-radius: 3px;
  border: none;
  font-size: 0.9rem;
  padding: 0.5rem 0.8em;
  background: #69c773;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0;
  width: 52.5%;
  text-align: center;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
}

button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
	font-size: 15px;
}

.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.downArrow{
	position: fixed;
	bottom: 10%;
	left: 0%;
	width: 100%;
	
}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}





a{
  background-color:1c2a58;
  text-decoration: none;
  padding: 1px 3px 1px 3px;
  color: white;
}

a:hover{
  background-color:#596275;
}

.face{
  width: 150px;
  margin: 40px auto;
  display: block;
  border-radius: 50%;
}



h1,h2,h3,h4,h5,h6 {
  color: black;
}

hr{
  margin-top: 17px;
  margin-bottom: 30px;
  border:none;
  height:6px;
  background-color:black;
}

.fire.right{
  float: right;
}

.fire.left{
  float: left;
}

h2{
  padding-top:40px;
}


*/



font-family: 'Architects Daughter', cursive;

/* go in*/
.dashboard{
    width: 32px;
    height: 32px;
    margin: 30px auto;
    border: 2px rgba(0, 0, 0 ,1) solid;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.dashboard:after, .dashboard:before{
    position: absolute;
    content: "";
}
.dashboard:after{
    width:14px;
    height: 2px;
    top: 20px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    background-color: rgba(0, 0, 0 ,1);
    -webkit-animation: dashboard_hand 2s linear infinite alternate;
       -moz-animation: dashboard_hand 2s linear infinite alternate;
            animation: dashboard_hand 2s linear infinite alternate;
}
.dashboard:before{
    width: 32px;
    height: 10px;
    background-color: rgba(0, 0, 0 ,1);
    top:20px;
    left: -2px;
}
@-webkit-keyframes dashboard_hand{
    0%{ -webkit-transform: rotate(-160deg);}
    100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
    0%{ -moz-transform: rotate(-160deg);}
    100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
    0%{ transform: rotate(-160deg);}
    100%{ transform: rotate(-20deg);}
}

/*Battery*/
.battery{
    width: 28px;
    height: 14px;
    border: 1px #333 solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    top: 40px;
    margin: 0 auto;
}
.battery:after{
    width: 2px;
    height: 7px;
    background-color: #333;
    border-radius: 0px 1px 1px 0px;
    position: absolute;
    content: "";
    top: 2px;
    right: -4px;
}
@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #333;}
    100%{box-shadow: inset 30px 0px 0px #333;}
}
@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #333;}
    100%{box-shadow: inset 30px 0px 0px #333;}
}
@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #333;}
    100%{box-shadow: inset 30px 0px 0px #333;}
}

.magnifier{
    width: 20px;
    height: 20px;
    box-shadow: 0px 0px 0px 1px #333;
    border-radius: 50%;
    position: relative;
    margin: 34px auto;
    -webkit-animation: magnify 1s linear infinite alternate;
       -moz-animation: magnify 1s linear infinite alternate;
            animation: magnify 1s linear infinite alternate;
}
.magnifier:after, .magnifier:before{
    position: absolute;
    content: "";
}
.magnifier:before{
    content: "me";
    font-size: 12px;
    left: 2px;
    text-align: center;
    top: 2px;
}
.magnifier:after{
    width: 2px;
    height: 8px;
    background-color: #333;
    bottom: -6px;
    left: 20px;
    border-radius: 2px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

@-webkit-keyframes magnify{
    0%{-webkit-transform: scale(1); }
    100%{-webkit-transform: scale(1.5);}
}
@-moz-keyframes magnify{
    0%{-moz-transform: scale(1); }
    100%{-moz-transform: scale(1.5);}
}
@keyframes magnify{
    0%{transform: scale(1); }
    100%{transform: scale(1.5);}
}

/*help*/
.help{
    width: 30px;
    height: 30px;
    border: 1px #333 solid;
    border-radius: 50%;
    -webkit-animation: rotation 1s ease-in-out infinite;
       -moz-animation: rotation 1s ease-in-out infinite;
            animation: rotation 1s ease-in-out infinite;
    margin: 30px auto;
}
.help:after{
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0 ,1);
    border-radius: 100%;
    position: absolute;
    content: "";
}
@-webkit-keyframes rotation{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
    0%{-moz-transform: rotate(0deg);}
    100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/*eye ball*/
.eye{
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0 ,0 ,0.8);
    border-radius: 50%;
    box-shadow: 30px 0px 0px 0px rgba(0 ,0 ,0 ,0.8);
    position: relative;
    margin: 36px 26px;
}

.eye:after{
    background-color: #59488b;
    width: 10px;
    height: 10px;
    box-shadow: 30px 0px 0px 0px #59488b;
    border-radius: 50%;
    left: 9px;
    top: 8px;
    position: absolute;
    content: "";
    -webkit-animation: eyeball 2s linear infinite alternate;
       -moz-animation: eyeball 2s linear infinite alternate;
            animation: eyeball 2s linear infinite alternate;
}
@-webkit-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@-moz-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}

/*coffee cup*/
.coffee_cup{
    width: 20px;
    height: 24px;
    border: 1px rgba(0, 0, 0 ,1) solid;
    border-radius: 0px 0px 5px 5px;
    position: relative;
    margin: 36px auto;
}
.coffee_cup:after, .coffee_cup:before{
    position: absolute;
    content: "";
}
.coffee_cup:after{
    width: 5px;
    height: 12px;
    border: 1px #fff solid;
    border-left: none;
    border-radius: 0px 20px 20px 0px;
    left: 20px;
}
.coffee_cup:before{
    width: 1px;
    height: 6px;
    background-color: rgba(0, 0, 0 ,1);
    top: -10px;
    left: 4px;
    box-shadow: 5px 0px 0px 0px rgba(0, 0, 0 ,1),
                5px -5px 0px 0px rgba(0, 0, 0 ,1),
                10px 0px 0px 0px rgba(0, 0, 0 ,1);
    -webkit-animation: steam 1s linear infinite alternate;
       -moz-animation: steam 1s linear infinite alternate;
            animation: steam 1s linear infinite alternate;
}

@-webkit-keyframes steam{
    0%{height: 0px;}
    100%{height: 6px;}
}
@-moz-keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}
}
@keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}
}

/*square*/
.square{
    width: 20px;
    height: 20px;
    border:1px  rgba(0, 0, 0 ,1) solid;
    margin: 36px auto;
    position: relative;
    -webkit-animation: fill_color 5s linear infinite;
       -moz-animation: fill_color 5s linear infinite;
            animation: fill_color 5s linear infinite;
}
.square:after{
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background-color: rgba(0, 0, 0 ,1);
    top: -8px;
    left: 0px;
    -webkit-animation: square_check 1s ease-in-out infinite;
       -moz-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
}

@-webkit-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-moz-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-webkit-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0 ,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(0, 0, 0 ,1);}
}
@-moz-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0 ,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(0, 0, 0 ,1);}
}
@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0 ,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(0, 0, 0 ,1);}
}
/*circle classick*/
.circle{
    margin: 40px auto;
    position: relative;
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0 ,.5);;
    box-shadow: -14px 0px 0px rgba(0, 0, 0 ,1);
    border-radius: 50%;
    -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
       -moz-animation: circle_classic 1s ease-in-out infinite alternate;
            animation: circle_classic 1s ease-in-out infinite alternate;
}

@-webkit-keyframes circle_classic{
    0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);}
}
@-moz-keyframes circle_classic{
    0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);}
}
@keyframes circle_classic{
    0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; transform: rotate(360deg) scale(1.2);}
}

/*cloud*/

.cloud{
    margin: 42px 30px;
    width: 4px;
    height: 10px;
    opacity: 0.5;
    position: relative;
    box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,1),
                12px 0px 0px 0px rgba(0, 0, 0 ,1),
                18px 0px 0px 0px rgba(0, 0, 0 ,1),
                24px 0px 0px 0px rgba(0, 0, 0 ,1),
                30px 0px 0px 0px rgba(0, 0, 0 ,1),
                36px 0px 0px 0px rgba(0, 0, 0 ,1);

    -webkit-animation: rain 1s linear infinite alternate;
       -moz-animation: rain 1s linear infinite alternate;
            animation: rain 1s linear infinite alternate;
}
.cloud:after{
    width: 40px;
    height: 10px;
    position: absolute;
    content: "";
    background-color: rgba(0, 0, 0 ,1);
    top: 0px;
    opacity: 1;
    -webkit-animation: line_flow 2s linear infinite reverse;
       -moz-animation: line_flow 2s linear infinite reverse;
            animation: line_flow 2s linear infinite reverse;
}

@-webkit-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,1),
                12px 0px 0px 0px rgba(0, 0, 0 ,0.9),
                18px 0px 0px 0px rgba(0, 0, 0 ,0.7),
                24px 0px 0px 0px rgba(0, 0, 0 ,0.6),
                30px 0px 0px 0px rgba(0, 0, 0 ,0.3),
                36px 0px 0px 0px rgba(0, 0, 0 ,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,0.2),
                12px 0px 0px 0px rgba(0, 0, 0 ,0.3),
                18px 0px 0px 0px rgba(0, 0, 0 ,0.6),
                24px 0px 0px 0px rgba(0, 0, 0 ,0.7),
                30px 0px 0px 0px rgba(0, 0, 0 ,0.9),
                36px 0px 0px 0px rgba(0, 0, 0 ,1);
        opacity: 1;
    }
}
@-moz-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,1),
                12px 0px 0px 0px rgba(0, 0, 0 ,0.9),
                18px 0px 0px 0px rgba(0, 0, 0 ,0.7),
                24px 0px 0px 0px rgba(0, 0, 0 ,0.6),
                30px 0px 0px 0px rgba(0, 0, 0 ,0.3),
                36px 0px 0px 0px rgba(0, 0, 0 ,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,0.2),
                12px 0px 0px 0px rgba(0, 0, 0 ,0.3),
                18px 0px 0px 0px rgba(0, 0, 0 ,0.6),
                24px 0px 0px 0px rgba(0, 0, 0 ,0.7),
                30px 0px 0px 0px rgba(0, 0, 0 ,0.9),
                36px 0px 0px 0px rgba(0, 0, 0 ,1);
        opacity: 1;
    }
}
@keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,1),
                12px 0px 0px 0px rgba(0, 0, 0 ,0.9),
                18px 0px 0px 0px rgba(0, 0, 0 ,0.7),
                24px 0px 0px 0px rgba(0, 0, 0 ,0.6),
                30px 0px 0px 0px rgba(0, 0, 0 ,0.3),
                36px 0px 0px 0px rgba(0, 0, 0 ,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(0, 0, 0 ,0.2),
                12px 0px 0px 0px rgba(0, 0, 0 ,0.3),
                18px 0px 0px 0px rgba(0, 0, 0 ,0.6),
                24px 0px 0px 0px rgba(0, 0, 0 ,0.7),
                30px 0px 0px 0px rgba(0, 0, 0 ,0.9),
                36px 0px 0px 0px rgba(0, 0, 0 ,1);
        opacity: 1;
    }
}

@-webkit-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@-moz-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}

.git{
    color: rgba(255,255,255,0.5);
    float: right;
    text-align: right;
    padding: 10px 20px;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.3);
    font-weight: 200;
}
.git:hover{
     background-color: rgba(0,0,0,0.2);
}





#loading-bar-spinner.spinner {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    animation: loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
    width: 40px;
    height: 40px;
    border:  solid 4px transparent;
    border-top-color:  #00C8B1 !important;
    border-left-color: #00C8B1 !important;
    border-radius: 50%;
}

@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}




/* Loader 1 */

.loader-1 {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-flex;
  background-color: transparent;
  border: 5px solid #ECEFF1;
  border-radius: 50%;
}
.loader-1:after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 40px;
  height: 40px;
  padding: 2px;
  border-width: 2px;
  border-style: solid;
  border-color: #28a8d3 transparent transparent transparent;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  animation: ringrotate .8s infinite ease-in-out;
  -webkit-animation: ringrotate .8s infinite ease-in-out;
}
/* #Loader 1 */

/* Loader 2 */
.loader-2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  animation: ringrotate 1.5s infinite linear;
  -webkit-animation: ringrotate 1.5s infinite linear;
}
.loader-2:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 5px solid #CFD8DC;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  z-index: 1;
  transform-origin: center;
}
.loader-2:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 30%;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  border: 3px solid #00B8D4;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  z-index: 1;
  transform-origin: center;
}
/* #Loader 2 */

/* Loader 3 */
.loader-3 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  animation: pendulum .5s infinite alternate linear;
  -webkit-animation: pendulum .5s infinite alternate linear;
}
.loader-3:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 5px solid #ECEFF1;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  z-index: 1;
  transform-origin: center;
}
.loader-3:before {
  content: "";
  position: absolute;
  top: 95%;
  left: 45%;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  border: 3px solid #FFA726;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  z-index: 1;
  transform-origin: center;
}
/* #Loader 3 */

/* Animation */
@keyframes ringrotate {
  0% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes ringrotate {
  0% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
  }
}

@keyframes pendulum {
  0% {
    transform: rotateZ(-20deg);
    -webkit-transform: rotateZ(-20deg);
  }
  100% {
    transform: rotateZ(20deg);
    -webkit-transform: rotateZ(20deg);
  }
}
@-webkit-keyframes pendulum {
  0% {
    transform: rotateZ(-20deg);
    -webkit-transform: rotateZ(-20deg);
  }
  100% {
    transform: rotateZ(20deg);
    -webkit-transform: rotateZ(20deg);
  }
}
/* #Animation */

.preloader {
  display: block;
  width: 40px;
  height: 40px;
  border: solid 3px;
  border-color: #555555 transparent;
  border-radius: 50%;
    -webkit-animation:
        rota 1s ease-in-out infinite;
    -moz-animation:
        rota 1s ease-in-out infinite;
    -ms-animation:
        rota 1s ease-in-out infinite;
    -o-animation:
        rota 1s ease-in-out infinite;
    animation:
        rota 1s ease-in-out infinite;
}

@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}

@keyframes rota {
    to { transform: rotate(360deg); }
}

.bar {
  margin: 0;
  width: 100%;
  background-color: white;
  height: 40px;
  border-radius: 20px;
  -webkit-animation: loadUp 2s infinite alternate;
  animation: loadUp 2s infinite alternate;
}

@-webkit-keyframes loadUp {
  0% {
    width: 0px;
  }

  25% {
    width: 25%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

@keyframes loadUp {
  0% {
    width: 0px;
  }

  25% {
    width: 25%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}


.loader-wrapper {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}
.loader-p  {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader-p:before,
.loader-p:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}
.loader-p:before {
  animation: ball1 1s infinite;
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}
.loader-p:after {
  animation: ball2 1s infinite;
  background-color: #00a096;
  box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) sacale(0.8);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }
  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
  }
  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #97bf0d;
  }
  50% {
    box-shadow: 0 0 0 #97bf0d;
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
  }
  100% {
    box-shadow: 30px 0 0 #97bf0d;
    margin-top: 0;
  }
}

.loader-sm {
  display: inline-block;
  width: 100px;
  height: 100px;
  outline: none;
  border-radius: 50%;
  border: none;
  border-right: solid 5px #666;
  border-bottom: solid 5px transparent;
  animation: loader 2s linear infinite;
  -webkit-animation: loader 2s linear infinite;
}

@keyframes loader {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

@-webkit-keyframes loader {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

#bowlG{
    position:relative;
    width:88px;
    height:88px;
    margin-top:0px;
    margin: 0 auto;

}

#bowl_ringG{
    position:absolute;
    width:88px;
    height:88px;
    border:4px solid #1C95D6;
    -moz-border-radius:128px;
    -webkit-border-radius:128px;
    -ms-border-radius:128px;
    -o-border-radius:128px;
    border-radius:128px;
}

.ball_holderG{
    position:absolute;
    width:14px;
    height:28px;
    left:27px;
    top:0px;
    -moz-animation-name:ball_moveG;
    -moz-animation-duration:1.4s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -webkit-animation-name:ball_moveG;
    -webkit-animation-duration:1.4s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -ms-animation-name:ball_moveG;
    -ms-animation-duration:1.4s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-timing-function:linear;
    -o-animation-name:ball_moveG;
    -o-animation-duration:1.4s;
    -o-animation-iteration-count:infinite;
    -o-animation-timing-function:linear;
    animation-name:ball_moveG;
    animation-duration:1.4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

.ballG{
    position:absolute;
    left:0px;
    top:-30px;
    width:51px;
    height:51px;
    background:#1C95D6;
    -moz-border-radius:43px;
    -webkit-border-radius:43px;
    -ms-border-radius:43px;
    -o-border-radius:43px;
    border-radius:43px;
}

@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}

100%{
-moz-transform:rotate(360deg)}

}

@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}

100%{
-webkit-transform:rotate(360deg)}

}

@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}

100%{
-ms-transform:rotate(360deg)}

}

@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}

100%{
-o-transform:rotate(360deg)}

}

@keyframes ball_moveG{
0%{
transform:rotate(0deg)}

100%{
transform:rotate(360deg)}

}


.loader-sp {
    text-align: center;
}
.loader-sp span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader-sp 0.9s infinite alternate;
    -moz-animation: loader-sp 0.9s infinite alternate;
}
.loader-sp span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader-sp span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader-sp {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader-sp {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}


.jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}
.jumper > div {
  background-color: #333;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}
.jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}
.jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}
@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.preloader2 {
  }

.loading-data {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 20px;
  margin: -10px 0 0 -150px;
  text-align: center;
}

.three-bounce div {
  width: 16px;
  height: 16px;
  background-color: #28ba00;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: threeBounceDelay 1.4s infinite ease-in-out;
  animation: threeBounceDelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  margin: 0 1px;
}

.three-bounce .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.three-bounce .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
    background-color: #EC84AA;
  }
}

@keyframes threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
    background-color: #EC84AA;
  }
}



#fp-nav ul {
    padding-right: 20px !important;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    height: 15px !important;
    width: 15px !important;
    margin: 5px 0px !important;

}

#fp-nav ul li a,
.fp-slidesNav ul li a,
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    height: 15px !important;
    width: 15px !important;
    margin: 0px !important;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: rgba(255, 255, 255, 0.20) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    background: #28a8d3 !important;
    border: 2px solid #28a8d3 !important;
    height: 15px !important;
    width: 15px !important;

 }
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    margin: 0px !important;
}


/* -03-  [ Typography ]----------Lioit------------------------*/

/*	- Body Typography.
    - Links
    - Heading Body Typography.
    - Blockqoutes.
    - Font Weight Options.
    - Font Size Options.
    - Text Align Options.
    - Letter Spacing Options.
    - Line Height Options.
    - Text Transform Options.
    - Montserrat Font.
    - Source Sans Font.
    - Open Sans Font.
    - dosis Font.
    - Droid Serif Font.
    - Fredoka One Font.
    - Text Color.

    Body:               15px/1.8 "Source Sans Pro", arial, sans-serif;
    Headers:            Montserrat, arial, sans-serif;

-------------------------------------Lioit------------------------*/

/* --- [ Body Typography ] ---Lioit---*/
body{
    color: #111;
    font-size: 15px;
    font-family: "Source Sans Pro", arial, sans-serif;
    line-height: 1.8;
    font-size: 17px;
  	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
/* --- [ Links ] ---Lioit---*/
a{
    color: #111;
    text-decoration: none;

}
a:hover{
    color: #888;
    text-decoration: none;
}
/* --- [ Heading Body Typography ] ---Lioit---*/
h1,h2,h3,h4,h5,h6{
    margin-bottom: 1.3em;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Montserrat';
    color: #414046;
}
h1 {
    font-size: 34px;
    font-weight: 600;
}
h2 {
    font-size: 28px;
    font-weight: 600;
}
h3 {
    font-size: 24px;
    font-weight: 600;
}
h4 {
    font-size: 20px;
    font-weight: 600;
}
h5 {
    font-size: 18px;
    font-weight: 400;
}
h6 {
    font-size: 14px;
    font-weight: 400;
}
p{
    margin: 0 0 2em 0;
    color: #8d8f92;
}
ul, ol{
    margin: 0 0 1.5em 0;
}
/* --- [ Blockquotes ] ---Lioit---*/
blockquote{
    margin: 3em 0 3em 0;
    padding: 0;
    border: none;
    background: none;
    font-style: normal;
    line-height: 1.7;
    color: #777;
}
blockquote:before {
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\f10d";
      float: left;
      margin-right: 10px;
       color: #28a8d3;
}
blockquote p:after {
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\f10e";
      margin-left: 10px;
      color: #28a8d3;
}
blockquote p{

    font-size: 24px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6;
    margin-bottom: 20px !important;
}
blockquote footer{
    font-size: 14px;
    font-weight: 400;
}
blockquote.quote-no-icons p:after,
blockquote.quote-no-icons:before{
    display: none;
}
/* --- [ Font Weight  Options ] ---Lioit---*/
.font-light{font-weight: 300;}
.fontweight-inherit{ font-weight: inherit !important; }
.fontweight-100{ font-weight: 100 !important; }
.fontweight-200{ font-weight: 200 !important; }
.fontweight-300{ font-weight: 300 !important; }
.fontweight-400{ font-weight: 400 !important; }
.fontweight-500{ font-weight: 500 !important; }
.fontweight-600{ font-weight: 600 !important; }
.fontweight-700{ font-weight: 700 !important; }
.fontweight-800{ font-weight: 800 !important; }
.fontweight-900{ font-weight: 900 !important; }
/* --- [ Font Size Options ] ---Lioit---*/
.fontsize-inherit{ font-size: inherit !important; }
.fontsize-xxxxs{ font-size: 11px !important; }
.fontsize-xxxs{ font-size: 12px !important; }
.fontsize-xxs{ font-size: 13px !important; }
.fontsize-xs{ font-size: 14px !important; }
.fontsize-xm{ font-size: 15px !important; }
.fontsize-s{ font-size: 16px !important; }
.fontsize-sm{ font-size: 18px !important; }
.fontsize-m{ font-size: 20px !important; }
.fontsize-l{ font-size: 24px !important; }
.fontsize-xl{ font-size: 28px !important; }
.fontsize-xxl{ font-size: 34px !important; }
.fontsize-xxxl{ font-size: 45px !important; }
.fontsize-xxxxl{ font-size: 52px !important; }
.fontsize-xxxxxl{ font-size: 60px !important; }
.fontsize-xxxxxxl{ font-size: 70px !important; }
.fontsize-xxxxxxxl{ font-size: 80px !important; }
.fontsize-xxxxxxxxl{ font-size: 90px !important; }
.superlarge{ font-size: 100px !important; }
.superxlarge{ font-size: 130px !important; }
.superxxlarge{ font-size: 170px !important; }


@media only screen and (min-width: 320px) and (max-width: 479px) {

    .fontsize-xs-inherit{ font-size: inherit !important; }
    .fontsize-xs-xxxxs{ font-size: 11px !important; }
    .fontsize-xs-xxxs{ font-size: 12px !important; }
    .fontsize-xs-xxs{ font-size: 13px !important; }
    .fontsize-xs-xs{ font-size: 13px !important; }
    .fontsize-xs-xm{ font-size: 14px !important; }
    .fontsize-xs-s{ font-size: 15px !important; }
    .fontsize-xs-sm{ font-size: 17px !important; }
    .fontsize-xs-m{ font-size: 18px !important; }
    .fontsize-xs-l{ font-size: 20px !important; }
    .fontsize-xs-xl{ font-size: 22px !important; }
    .fontsize-xs-xxl{ font-size: 24px !important; }
    .fontsize-xs-xxxl{ font-size: 35px !important; }
    .fontsize-xs-xxxxl{ font-size: 40px !important; }
    .fontsize-xs-xxxxxl{ font-size: 55px !important; }
    .fontsize-xs-xxxxxxl{ font-size: 50px !important; }
    .fontsize-xs-xxxxxxxl{ font-size: 60px !important; }
    .fontsize-xs-xxxxxxxxl{ font-size: 70px !important; }
    .superlarge-xs{ font-size: 80px !important; }
    .superxlarge-xs{ font-size: 90px !important; }
    .superxxlarge-xs{ font-size: 110px !important; }
}



/* --- [ Text Align Options ] ---Lioit---*/
.align-left{ text-align: left; }
.align-center{ text-align: center; }
.align-right{ text-align: right; }
/* --- [ Letter Spacing Options ] ---Lioit---*/
.letter-spacing-1 {letter-spacing: 1px;}
.letter-spacing-2 {letter-spacing: 2px }
.letter-spacing-3 {letter-spacing: 3px;}
.letter-spacing-4 {letter-spacing: 4px;}
.letter-spacing-5 {letter-spacing: 5px;}
.letter-spacing-6 {letter-spacing: 6px;}
.letter-spacing-7 {letter-spacing: 7px;}
.letter-spacing-8 {letter-spacing: 8px;}
.letter-spacing-9 {letter-spacing: 9px;}
.letter-spacing-10 {letter-spacing: 10px;}
/* --- [ Line Height Options ] ---Lioit---*/
.lh-inherit{ line-height: inherit !important;}
.lh-0{ line-height: 0 !important; }
.lh-5{ line-height: .5 !important; }
.lh-10{ line-height: 1 !important; }
.lh-12{ line-height: 1.2 !important; }
.lh-px24{ line-height: 24px !important; }
.lh-13{ line-height: 1.3 !important; }
.lh-14{ line-height: 1.4 !important; }
.lh-15{ line-height: 1.5 !important; }
.lh-16{ line-height: 1.6 !important; }
.lh-17{ line-height: 1.7 !important; }
.lh-18{ line-height: 1.8 !important; }
.lh-19{ line-height: 1.9 !important; }
.lh-20{ line-height: 2.0 !important; }
.lh-21{ line-height: 2.1 !important; }
.lh-22{ line-height: 2.2 !important; }
.lh-23{ line-height: 2.3 !important; }
.lh-24{ line-height: 2.4 !important; }
.lh-25{ line-height: 2.5 !important; }
.lh-26{ line-height: 2.6 !important; }
.lh-27{ line-height: 2.7 !important; }
.lh-28{ line-height: 2.8 !important; }
.lh-29{ line-height: 2.9 !important; }
.lh-30{ line-height: 3.0 !important; }

@media only screen and (min-width: 320px) and (max-width: 479px) {

    .lh-xs-inherit{ line-height: inherit !important;}
    .lh-xs-0{ line-height: 0 !important; }
    .lh-xs-5{ line-height: .5 !important; }
    .lh-xs-10{ line-height: 1 !important; }
    .lh-xs-12{ line-height: 1.2 !important; }
    .lh-xs-px24{ line-height: 24px !important; }
    .lh-xs-13{ line-height: 1.3 !important; }
    .lh-xs-14{ line-height: 1.4 !important; }
    .lh-xs-15{ line-height: 1.5 !important; }
    .lh-xs-16{ line-height: 1.6 !important; }
    .lh-xs-17{ line-height: 1.7 !important; }
    .lh-xs-18{ line-height: 1.8 !important; }
    .lh-xs-19{ line-height: 1.9 !important; }
    .lh-xs-20{ line-height: 2.0 !important; }
    .lh-xs-21{ line-height: 2.1 !important; }
    .lh-xs-22{ line-height: 2.2 !important; }
    .lh-xs-23{ line-height: 2.3 !important; }
    .lh-xs-24{ line-height: 2.4 !important; }
    .lh-xs-25{ line-height: 2.5 !important; }
    .lh-xs-26{ line-height: 2.6 !important; }
    .lh-xs-27{ line-height: 2.7 !important; }
    .lh-xs-28{ line-height: 2.8 !important; }
    .lh-xs-29{ line-height: 2.9 !important; }
    .lh-xs-30{ line-height: 3.0 !important; }
}


/* --- [ Text Transform Options ] ---Lioit---*/
.font-alt,
.transform-capitalize{text-transform: capitalize !important;}
.transform-lowercase{ text-transform: lowercase !important; }
.transform-inherit{ text-transform: inherit !important; }
.transform-uppercase{ text-transform: uppercase !important; }

/* --- [ Montserrat Font ] ---Lioit---*/
.montserrat{font-family: 'Montserrat' !important;}
body p.montserrat {
    font-family: "Montserrat", arial, sans-serif !important;
}
.montserrat,
.montserrat p {font-family: "Montserrat", arial, sans-serif !important;}
.montserrat,
.montserrat h1,
.montserrat h2,
.montserrat h3,
.montserrat h4,
.montserrat h5,
.montserrat h6,
.montserrat p,
.montserrat a,
.montserrat a{font-family: "Montserrat", arial, sans-serif !important;}
/* --- [ Roboto Condensed Font ] ---Lioit---*/
body p.roboto-condensed {
    font-family: "Roboto Condensed", arial, sans-serif !important;
}
.roboto-condensed{font-family: "Roboto Condensed", arial, sans-serif !important;}
.roboto-condensed,
.roboto-condensed p {font-family: "Roboto Condensed", arial, sans-serif !important;}
.roboto-condensed,
.roboto-condensed h1,
.roboto-condensed h2,
.roboto-condensed h3,
.roboto-condensed h4,
.roboto-condensed h5,
.roboto-condensed h6,
.roboto-condensed p,
.roboto-condensed a,
.roboto-condensed a{font-family: "Roboto Condensed", arial, sans-serif !important;}
/* --- [ Source Sans Pro Font ] ---Lioit---*/
body p.source-sans {
    font-family: "Source Sans Pro", arial, sans-serif !important;
}
.source-sans{font-family: "Source Sans Pro", arial, sans-serif !important;}
.source-sans,
.source-sans p {font-family: "Source Sans Pro", arial, sans-serif !important;}
.source-sans,
.source-sans h1,
.source-sans h2,
.source-sans h3,
.source-sans h4,
.source-sans h5,
.source-sans h6,
.source-sans p,
.source-sans a,
.source-sans a{font-family: "Source Sans Pro", arial, sans-serif !important;}
/* --- [ Open Sans Font ] ---Lioit---*/
body p.open-sans {
    font-family: "Open Sans", arial, sans-serif !important;
}
.open-sans{font-family: "Open Sans", arial, sans-serif !important;}
.open-sans .inner-nav ul > li > a {font-weight: 600 !important;}
.open-sans,
.open-sans p {font-family: "Open Sans", arial, sans-serif !important;}
.open-sans,
.open-sans h1,
.open-sans h2,
.open-sans h3,
.open-sans h4,
.open-sans h5,
.open-sans h6,
.open-sans p,
.open-sans a,
.open-sans a{font-family: "Open Sans", arial, sans-serif !important;}
/* --- [ Titillium Web Font ] ---Lioit---*/
body p.titillium-web {
    font-family: "Titillium Web", arial, sans-serif !important;
}
.titillium-web{font-family: "Titillium Web", arial, sans-serif !important;}
.titillium-web .inner-nav ul > li > a {font-weight: 600 !important;}
.titillium-web,
.titillium-web p {font-family: "Titillium Web", arial, sans-serif !important;}
.titillium-web,
.titillium-web h1,
.titillium-web h2,
.titillium-web h3,
.titillium-web h4,
.titillium-web h5,
.titillium-web h6,
.titillium-web p,
.titillium-web a{font-family: "Titillium Web", arial, sans-serif !important;}
/* --- [ Dosis Font ] ---Lioit---*/
body p.dosis {
    font-family: 'Dosis' !important;
}
.dosis .inner-nav ul a,
.dosis h1,
.dosis h2,
.dosis h3,
.dosis h4,
.dosis h5,
.dosis h6,
.dosis .post-defult-title {font-weight: bold;}
.dosis{font-family: 'Dosis' !important;}
.dosis,
.dosis p {font-size: 22px ;}
.dosis,
.dosis h1,
.dosis h2,
.dosis h3,
.dosis h4,
.dosis h5,
.dosis h6,
.dosis p,
.dosis a,
.dosis a{font-family: macondo;}

.dosis .inner-nav ul a,
.dosis h1,
.dosis h2,
.dosis h3,
.dosis h4,
.dosis h5,
.dosis h6,
.dosis .post-defult-title {font-weight: bold;}
/* --- [ Droid-Serif Font ] ---Lioit---*/
body p.droid-serif {
    font-family: macondo;
}
.droid-serif {font-family: macondo;}

.droid-serif,
.droid-serif p {font-size: 22px ;}

.droid-serif,
.droid-serif h1,
.droid-serif h2,
.droid-serif h3,
.droid-serif h4,
.droid-serif h5,
.droid-serif h6,
.droid-serif p,
.droid-serif a,
.droid-serif a{font-family: macondo;}
.droid-serif .inner-nav ul a,
.droid-serif h1,
.droid-serif h2,
.droid-serif h3,
.droid-serif h4,
.droid-serif h5,
.droid-serif h6,
.droid-serif .post-defult-title {font-weight: bold;}
/* --- [ Fredoka One Font ] ---Lioit---*/
.fredoka-one {font-family: 'Fredoka One', cursive !important;}
.fredoka-one,
.fredoka-one p {font-size: 22px ;}
.fredoka-one,
.fredoka-one h1,
.fredoka-one h2,
.fredoka-one h3,
.fredoka-one h4,
.fredoka-one h5,
.fredoka-one h6,
.fredoka-one p,
.fredoka-one a,
.fredoka-one a{font-family: 'Fredoka One', cursive !important;}
.fredoka-one .inner-nav ul a,
.fredoka-one h1,
.fredoka-one h2,
.fredoka-one h3,
.fredoka-one h4,
.fredoka-one h5,
.fredoka-one h6,
.fredoka-one .post-defult-title {font-weight: bold;}
/* --- [ Oleo Script Font ] ---Lioit---*/
.oleo-script {font-family: 'Oleo Script', cursive !important;}
.oleo-script-one,
.oleo-script-one p {font-size: 22px ;}
.oleo-script,
.oleo-script h1,
.oleo-script h2,
.oleo-script h3,
.oleo-script h4,
.oleo-script h5,
.oleo-script h6,
.oleo-script p,
.oleo-script a,
.oleo-script a{font-family: 'Oleo Script', cursive !important;}
.oleo-script .inner-nav ul a,
.oleo-script h1,
.oleo-script h2,
.oleo-script h3,
.oleo-script h4,
.oleo-script h5,
.oleo-script h6,
.oleo-script .post-defult-title {font-weight: bold;}


/* --- [ Text Colors ] ---Lioit---*/
.text{
    font-size: 17px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}
.text h1,
.text h2,
.text h3,
.text h4,
.text h5,
.text h6{color: #3d414a;}
/* --- [ Opacity Text ] ---Lioit---*/
.opa-text-1 {opacity: .1;}
.opa-text-2 {opacity: .2;}
.opa-text-3 {opacity: .3;}
.opa-text-4 {opacity: .4;}
.opa-text-5 {opacity: .5;}
.opa-text-6 {opacity: .6;}
.opa-text-7 {opacity: .7;}
.opa-text-8 {opacity: .8; }
.opa-text-9 {opacity: .9; }
.opa-text-10{opacity: .10; }
/* --- [ Colored Text ] ---Lioit---*/
.text-magic {color: #e884fa !important;}
.text-instagram  { color: #3f729b !important; }
.text-black{ color: #2c2c2c !important; }
.text-orange{ color: #f7a541 !important; }
.text-yellow{  color: #ffce37 !important; }
.text-cyan{ color: #27c5c3 !important; }
.text-cyan1{ color: #20d7de !important; }
.text-green{ color: #58bf44 !important; }
.text-blue{ color: #3c66ee !important; }
.text-blue2{ color: #1b53af !important; }
.text-sky{ color: #28a8d3 !important; }
.text-sky2{ color: #48c0eb !important; }
.text-sky3{ color: #28a8d3 !important; }
.text-purple{ color: #dd4d57 !important; }
.text-red{ color: #e13939 !important; }
.text-red2{ color: #fa4b4b !important; }
.text-google-plus { color: #d93e2d !important; }
.text-behance { color: #000000 !important; }
.text-vimeo { color: #229ACC !important; }
.text-500px { color: #58a9de !important; }
.text-posterous { color: #efd57c !important; }
.text-paypal { color: #5b85a8 !important; }
.text-picasa { color: #b088c1 !important; }
.text-duckduckgo { color: #fb0a2a !important; }
.text-aim  { color: #ffd900 !important; }
.text-delicious { color: #3399ff !important; }
.text-paypal  { color: #003087 !important; }
.text-flattr  { color: #f67c1a !important; }
.text-android { color: #a4c639 !important; }
.text-eventful { color: #136ad5 !important; }
.text-smashmag { color: #ff9900 !important; }
.text-gplus  { color: #dd4b39 !important; }
.text-wikipedia  { color: #999999 !important; }
.text-lanyrd  { color: #663300 !important; }
.text-calendar  { color: #e74a1e !important; }
.text-stumbleupon  { color: #eb4924 !important; }
.text-fivehundredpx  { color: #ed174f !important; }
.text-pinterest  { color: #cc2127 !important; }
.text-bitcoin  { color: #0ea0db !important; }
.text-w3c  { color: #7dba00 !important; }
.text-foursquare  { color: #f94877 !important; }
.text-html5  { color: #e34f26 !important; }
.text-ie  { color: #0096d6 !important; }
.text-call  { color: #e74a1e !important; }
.text-grooveshark  { color: #6cbc35 !important; }
.text-ninetyninedesigns  { color: #ee4f4f !important; }
.text-forrst  { color: #5b9a68 !important; }
.text-digg  { color: #000000 !important; }
.text-spotify  { color: #2ebd59 !important; }
.text-reddit  { color: #5f99cf !important; }
.text-guest  { color: #ff4500 !important; }
.text-gowalla  { color: #0ba6ab !important; }
.text-appstore  { color: #2fa5d6 !important; }
.text-apple  { color: #686868 !important; }
.text-blogger  { color: #f57d00 !important; }
.text-cc  { color: #b7295a !important; }
.text-dribbble  { color: #ea4c89 !important; }
.text-evernote  { color: #7ac142 !important; }
.text-flickr  { color: #0063dc !important; }
.text-google  { color: #4285f4 !important; }
.text-viadeo  { color: #f07355 !important; }
.text-instapaper  { color: #428bca !important; }
.text-weibo  { color: #fc3d39 !important; }
.text-klout  { color: #f65314 !important; }
.text-linkedin  { color: #3371b7 !important; }
.text-meetup { color: #e0393e !important; }
.text-vk  { color: #45668e !important; }
.text-plancast { color: #1ab7ea !important; }
.text-disqus { color: #2e9fff !important; }
.text-rss  { color: #f26522 !important; }
.text-skype  { color: #00aff0 !important; }
.text-youtube  { color: #cd201f !important; }
.text-vimeo  { color: #1ab7ea !important; }
.text-windows  { color: #00bcf2 !important; }
.text-xing  { color: #026466 !important; }
.text-yahoo  { color: #400191 !important; }
.text-chrome  { color: #fcd116 !important; }
.text-email  { color: #78dcfa !important; }
.text-macstore  { color: #0054a0 !important; }
.text-myspace  { color: #000000 !important; }
.text-podcast  { color: #dc380f !important; }
.text-amazon { color: #146eb4 !important; }
.text-steam  { color: #d7d7d8 !important; }
.text-white  { color: #ffffff !important; }
.text-cloudapp  { color: #00aaf2 !important; }
.text-dropbox  { color: #007ee5 !important; }
.text-ebay  { color: #e53238 !important; }
.text-facebook  { color: #3b5998 !important; }
.text-twitter  { color: #55acee !important; }
.text-github  { color: #4183c4 !important; }
.text-googleplay  { color: #0f9d58 !important; }
.text-itunes  { color: #4285f4 !important; }
.text-plurk  { color: #7db701 !important; }
.text-songkick  { color: #f80046 !important; }
.text-lastfm  { color: #d51007 !important; }
.text-gmail  { color: #db3a1b !important; }
.text-pinboard  { color: #0000e6 !important; }
.text-openid  { color: #616365 !important; }
.text-quora  { color: #a82400 !important; }
.text-soundcloud  { color: #ff3300 !important; }
.text-tumblr  { color: #35465c !important; }
.text-eventasaurus  { color: #eb5a46 !important; }
.text-wordpress { color: #21759b !important; }
.text-yelp  { color: #af0606 !important; }
.text-intensedebate  { color: #2b96f1 !important; }
.text-eventbrite  { color: #34495e !important; }
.text-scribd  { color: #1a7bba !important; }
.text-posterous  { color: #efd57c !important; }
.text-stripe  { color: #00afe1 !important; }
.text-opentable  { color: #eb4924 !important; }
.text-cart  { color: #e74a1e !important; }
.text-print  { color: #e74a1e !important; }
.text-angellist { color: #f97200 !important; }
.text-dwolla  { color: #828a87 !important; }
.text-appnet  { color: #00afe1 !important; }
.text-statusnet  { color: #595a5c !important; }
.text-acrobat  { color: #e74635 !important; }
.text-drupal  { color: #0077c0 !important; }
.text-buffer  { color: #76b852 !important; }
.text-pocket  { color: #d3505a !important; }
.text-bitbucket  { color: #205081 !important; }
.text-lego { color: #61b3de !important; }
.text-login  { color: #e74a1e !important; }
.text-stackoverflow  { color: #fe7a15 !important; }
.text-hackernews  { color: #2ebd59 !important; }
.text-lkdto  { color: #595a5c !important; }


/* -04-  [ Borderes ]----------Lioit------------------------*/

/*	- Dark Border.
    - Light Border.
    - Border Colors.
    - Border Radius.

-------------------------------------Lioit------------------------*/

/* --- [ Dark Borders ] ---Lioit---*/
.border {border: 1px solid rgba(0, 0, 0, .08) !important;}
.bg-borderd{
    border: 1px solid rgba(0, 0, 0, .06) !important;
}
.bg-borderd-v{
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-width: 1px 0px 1px 0px !important;
}
.bg-borderd-v-w{
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-width: 1px 0px 1px 0px !important;
}
.bg-borderd-btm{
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-width: 0px 0px 1px 0px !important;
}
.bg-borderd-top{
    border: 1px solid rgba(0, 0, 0, .06) !important;;
    border-width: 1px 0px 0px 0px !important;
}
.boxed-bg .bg-borderd {
    border-right: none !important;
    border-left: none !important;
}
/* --- [ White Borders ] ---Lioit---*/
.border-w {border: 1px solid rgba(255, 255, 255, .08) !important;}
.border-w-1 {border: 1px solid rgba(255, 255, 255, .1) !important;}
.border-w-2 {border: 1px solid rgba(255, 255, 255, .2) !important;}
.border-w-3 {border: 1px solid rgba(255, 255, 255, .3) !important;}
.border-w-4 {border: 1px solid rgba(255, 255, 255, .4) !important;}
.border-w-5 {border: 1px solid rgba(255, 255, 255, .5) !important;}
.border-w-6 {border: 1px solid rgba(255, 255, 255, .6) !important;}
.border-w-7 {border: 1px solid rgba(255, 255, 255, .7) !important;}
.border-w-8 {border: 1px solid rgba(255, 255, 255, .8) !important;}
.border-w-9 {border: 1px solid rgba(255, 255, 255, .9) !important;}
.border-w-10 {border: 1px solid rgba(255, 255, 255, 1) !important;}
.border-1 {border: 1px solid rgba(0, 0, 0, .1) !important;}
.border-none {border: none !important;}
/* --- [ Border Bottom ] ---Lioit---*/
.border-bottom-1 {border-bottom: 1px solid rgba(0, 0, 0, .01) !important;}
.border-bottom-2 {border-bottom: 1px solid rgba(0, 0, 0, .02) !important;}
.border-bottom-3 {border-bottom: 1px solid rgba(0, 0, 0, .03) !important;}
.border-bottom-4 {border-bottom: 1px solid rgba(0, 0, 0, .04) !important;}
.border-bottom-5 {border-bottom: 1px solid rgba(0, 0, 0, .05) !important;}
.border-bottom-6 {border-bottom: 1px solid rgba(0, 0, 0, .06) !important;}
.border-bottom-7 {border-bottom: 1px solid rgba(0, 0, 0, .07) !important;}
.border-bottom-8 {border-bottom: 1px solid rgba(0, 0, 0, .08) !important;}
.border-bottom-9 {border-bottom: 1px solid rgba(0, 0, 0, .09) !important;}
.border-bottom-1 {border-bottom: 1px solid rgba(0, 0, 0, 1) !important;}

.border-bottom {border-bottom: 1px solid rgba(0, 0, 0, .08) !important;}
.border-bottom-w {border-bottom: 1px solid rgba(255, 255, 255, .08) !important;}
/* --- [ Border Top ] ---Lioit---*/
.border-top {border-top: 1px solid rgba(0, 0, 0, .08) !important;}
.border-top-w {border-top: 1px solid rgba(255, 255, 255 .08) !important;}
/* --- [ Border Left ] ---Lioit---*/
.border-left {border-left: 1px solid rgba(0, 0, 0, .08) !important;}
.border-left-w {border-left: 1px solid rgba(255, 255, 255, .08) !important;}
/* --- [ Border Right ] ---Lioit---*/
.border-right {border-right: 1px solid rgba(0, 0, 0, .08) !important;}
.border-right-w {border-right: 1px solid rgba(255, 255, 255, .08) !important;}
/* --- [ Borders Colores ] ---Lioit---*/
.border-magic {border-color: #e884fa !important;}
.border-instagram  { border-color: #3f729b !important; }
.border-black{ border-color: #2c2c2c !important; }
.border-orange{ border-color: #f7a541 !important; }
.border-yellow{  border-color: #ffce37 !important; }
.border-cyan{ border-color: #27c5c3 !important; }
.border-cyan1{ border-color: #20d7de !important; }
.border-green{ border-color: #58bf44 !important; }
.border-blue{ border-color: #3c66ee !important; }
.border-blue2{ border-color: #1b53af !important; }
.border-sky{ border-color: #28a8d3 !important; }
.border-sky2{ border-color: #48c0eb !important; }
.border-sky3{ border-color: #28a8d3 !important; }
.border-purple{ border-color: #dd4d57 !important; }
.border-red{ border-color: #e13939 !important; }
.border-red2{ border-color: #fa4b4b !important; }
.border-google-plus { border-color: #d93e2d !important; }
.border-behance { border-color: #000000 !important; }
.border-vimeo { border-color: #229ACC !important; }
.border-500px { border-color: #58a9de !important; }
.border-posterous { border-color: #efd57c !important; }
.border-paypal { border-color: #5b85a8 !important; }
.border-picasa { border-color: #b088c1 !important; }
.border-duckduckgo { border-color: #fb0a2a !important; }
.border-aim  { border-color: #ffd900 !important; }
.border-delicious { border-color: #3399ff !important; }
.border-paypal  { border-color: #003087 !important; }
.border-flattr  { border-color: #f67c1a !important; }
.border-android { border-color: #a4c639 !important; }
.border-eventful { border-color: #136ad5 !important; }
.border-smashmag { border-color: #ff9900 !important; }
.border-gplus  { border-color: #dd4b39 !important; }
.border-wikipedia  { border-color: #999999 !important; }
.border-lanyrd  { border-color: #663300 !important; }
.border-calendar  { border-color: #e74a1e !important; }
.border-stumbleupon  { border-color: #eb4924 !important; }
.border-fivehundredpx  { border-color: #ed174f !important; }
.border-pinterest  { border-color: #cc2127 !important; }
.border-bitcoin  { border-color: #0ea0db !important; }
.border-w3c  { border-color: #7dba00 !important; }
.border-foursquare  { border-color: #f94877 !important; }
.border-html5  { border-color: #e34f26 !important; }
.border-ie  { border-color: #0096d6 !important; }
.border-call  { border-color: #e74a1e !important; }
.border-grooveshark  { border-color: #6cbc35 !important; }
.border-ninetyninedesigns  { border-color: #ee4f4f !important; }
.border-forrst  { border-color: #5b9a68 !important; }
.border-digg  { border-color: #000000 !important; }
.border-spotify  { border-color: #2ebd59 !important; }
.border-reddit  { border-color: #5f99cf !important; }
.border-guest  { border-color: #ff4500 !important; }
.border-gowalla  { border-color: #0ba6ab !important; }
.border-appstore  { border-color: #2fa5d6 !important; }
.border-apple  { border-color: #686868 !important; }
.border-blogger  { border-color: #f57d00 !important; }
.border-cc  { border-color: #b7295a !important; }
.border-dribbble  { border-color: #ea4c89 !important; }
.border-evernote  { border-color: #7ac142 !important; }
.border-flickr  { border-color: #0063dc !important; }
.border-google  { border-color: #4285f4 !important; }
.border-viadeo  { border-color: #f07355 !important; }
.border-instapaper  { border-color: #428bca !important; }
.border-weibo  { border-color: #fc3d39 !important; }
.border-klout  { border-color: #f65314 !important; }
.border-linkedin  { border-color: #3371b7 !important; }
.border-meetup { border-color: #e0393e !important; }
.border-vk  { border-color: #45668e !important; }
.border-plancast { border-color: #1ab7ea !important; }
.border-disqus { border-color: #2e9fff !important; }
.border-rss  { border-color: #f26522 !important; }
.border-skype  { border-color: #00aff0 !important; }
.border-youtube  { border-color: #cd201f !important; }
.border-vimeo  { border-color: #1ab7ea !important; }
.border-windows  { border-color: #00bcf2 !important; }
.border-xing  { border-color: #026466 !important; }
.border-yahoo  { border-color: #400191 !important; }
.border-chrome  { border-color: #fcd116 !important; }
.border-email  { border-color: #78dcfa !important; }
.border-macstore  { border-color: #0054a0 !important; }
.border-myspace  { border-color: #000000 !important; }
.border-podcast  { border-color: #dc380f !important; }
.border-amazon { border-color: #146eb4 !important; }
.border-steam  { border-color: #d7d7d8 !important; }
.border-cloudapp  { border-color: #00aaf2 !important; }
.border-dropbox  { border-color: #007ee5 !important; }
.border-ebay  { border-color: #e53238 !important; }
.border-facebook  { border-color: #3b5998 !important; }
.border-twitter  { border-color: #55acee !important; }
.border-github  { border-color: #4183c4 !important; }
.border-googleplay  { border-color: #0f9d58 !important; }
.border-itunes  { border-color: #4285f4 !important; }
.border-plurk  { border-color: #7db701 !important; }
.border-songkick  { border-color: #f80046 !important; }
.border-lastfm  { border-color: #d51007 !important; }
.border-gmail  { border-color: #db3a1b !important; }
.border-pinboard  { border-color: #0000e6 !important; }
.border-openid  { border-color: #616365 !important; }
.border-quora  { border-color: #a82400 !important; }
.border-soundcloud  { border-color: #ff3300 !important; }
.border-tumblr  { border-color: #35465c !important; }
.border-eventasaurus  { border-color: #eb5a46 !important; }
.border-wordpress { border-color: #21759b !important; }
.border-yelp  { border-color: #af0606 !important; }
.border-intensedebate  { border-color: #2b96f1 !important; }
.border-eventbrite  { border-color: #34495e !important; }
.border-scribd  { border-color: #1a7bba !important; }
.border-posterous  { border-color: #efd57c !important; }
.border-stripe  { border-color: #00afe1 !important; }
.border-opentable  { border-color: #eb4924 !important; }
.border-cart  { border-color: #e74a1e !important; }
.border-print  { border-color: #e74a1e !important; }
.border-angellist { border-color: #f97200 !important; }
.border-dwolla  { border-color: #828a87 !important; }
.border-appnet  { border-color: #00afe1 !important; }
.border-statusnet  { border-color: #595a5c !important; }
.border-acrobat  { border-color: #e74635 !important; }
.border-drupal  { border-color: #0077c0 !important; }
.border-buffer  { border-color: #76b852 !important; }
.border-pocket  { border-color: #d3505a !important; }
.border-bitbucket  { border-color: #205081 !important; }
.border-lego { border-color: #61b3de !important; }
.border-login  { border-color: #e74a1e !important; }
.border-stackoverflow  { border-color: #fe7a15 !important; }
.border-hackernews  { border-color: #2ebd59 !important; }
.border-lkdto  { border-color: #595a5c !important; }
/* ------ [ Border Radius ] ------Lioit------*/
.border-radius-0 {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}
.border-radius {
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
}
.border-redius-top {
    border-top-left-radius:3px !important;
    border-top-right-radius:3px !important;
}
.border-redius-bottom {
    border-bottom-left-radius:3px !important;
    border-bottom-right-radius:3px !important;
}
.border-radius-2 {
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    border-radius: 2px !important;
}
.border-radius-3 {
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
}
.border-radius-4 {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    border-radius: 4px !important;
}
.border-radius-5 {
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
}
.border-radius-6 {
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    border-radius: 6px !important;
}
.border-radius-7 {
    -webkit-border-radius: 7px !important;
    -moz-border-radius: 7px !important;
    border-radius: 7px !important;
}
.border-radius-8 {
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    border-radius: 8px !important;
}
.border-radius-9 {
    -webkit-border-radius: 9px !important;
    -moz-border-radius: 9px !important;
    border-radius: 9px !important;
}
.border-radius-10 {
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-radius: 10px !important;
}
.border-radius-20 {
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
}
.border-radius-30 {
    -webkit-border-radius: 30px !important;
    -moz-border-radius: 30px !important;
    border-radius: 30px !important;
}
.border-radius-40 {
    -webkit-border-radius: 40px !important;
    -moz-border-radius: 40px !important;
    border-radius: 40px !important;
}
.border-radius-50 {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px !important;
}
.border-radius-60 {
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px !important;
}
.border-radius-65 {
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px !important;

}
.border-radius-cir {
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;

}

/* -05-  [ Backgrounds ]----------Lioit------------------------*/

/*	- Transparent/ White Transparent/ Black Transparent.
    - Pattern Background.
    - Light/Dark Backgrounds.
    - Border Backgrounds.
    - Video Background

-------------------------------------Lioit------------------------*/
.background-attachment-initial {
	background-attachment: inherit !important;
}
/* ------ [ Transparent ] ------Lioit------*/
/*.transparent {
    background: transparent !important;
}*/
/* ------ [ Transparent White ] ------Lioit------*/
.transparent-w {
    background: rgba(255, 255, 255, 0.2) !important;
}
.transparent-w1 {
    background: rgba(255, 255, 255, 0.1) !important;
}
.transparent-w3 {
    background: rgba(255, 255, 255, 0.3) !important;
}
.transparent-w-01 {
    background: rgba(255, 255, 255, 0.01) !important;
}
.transparent-w-02 {
    background: rgba(255, 255, 255, 0.02) !important;
}
.transparent-w-03 {
    background: rgba(255, 255, 255, 0.03) !important;
}
.transparent-w-04 {
    background: rgba(255, 255, 255, 0.04) !important;
}
.transparent-w-05 {
    background: rgba(255, 255, 255, 0.05) !important;
}
.transparent-w-06 {
    background: rgba(255, 255, 255, 0.06) !important;
}
.transparent-w-07 {
    background: rgba(255, 255, 255, 0.07) !important;
}
.transparent-w-08 {
    background: rgba(255, 255, 255, 0.08) !important;
}
.transparent-w-09 {
    background: rgba(255, 255, 255, 0.09) !important;
}
/* ------ [ Transparent Black ] ------Lioit------*/
.transparent-b-1 {
    background: rgba(0, 0, 0, 0.1) !important;
}
.transparent-b-2 {
    background: rgba(0, 0, 0, 0.2) !important;
}
.transparent-b-3 {
    background: rgba(0, 0, 0, 0.3) !important;
}
.transparent-b-4 {
    background: rgba(0, 0, 0, 0.4) !important;
}
.transparent-b-5 {
    background: rgba(0, 0, 0, 0.5) !important;
}
.transparent-b-6 {
    background: rgba(0, 0, 0, 0.6) !important;
}
.transparent-b-7 {
    background: rgba(0, 0, 0, 0.7) !important;
}
.transparent-b-8 {
    background: rgba(0, 0, 0, 0.8) !important;
}
.transparent-b-9 {
    background: rgba(0, 0, 0, 0.9) !important;
}
.transparent-b-01 {
    background: rgba(0, 0, 0, 0.01) !important;
}
.transparent-b-02 {
    background: rgba(0, 0, 0, 0.02) !important;
}
.transparent-b-03 {
    background: rgba(0, 0, 0, 0.03) !important;
}
.transparent-b-04 {
    background: rgba(0, 0, 0, 0.04) !important;
}
.transparent-b-05 {
    background: rgba(0, 0, 0, 0.05) !important;
}
.transparent-b-06 {
    background: rgba(0, 0, 0, 0.06) !important;
}
.transparent-b-07 {
    background: rgba(0, 0, 0, 0.07) !important;
}
.transparent-b-08 {
    background: rgba(0, 0, 0, 0.08) !important;
}
.transparent-b-09 {
    background: rgba(0, 0, 0, 0.09) !important;
}
/* ------ [ Backgrounds Pattern Overlay ] ------Lioit------*/
.bg-pattern-over:before,
.bg-pattern-over .YTPOverlay:after{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: repeat;
    background-size: auto;
    background-image: url(assets/images/pattern-bg-2.png);
}
.bg-pattern-over2:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: repeat;
    background-size: auto;
    background-image: url(assets/images/pattern-overlay.png);
}
.bg-dark-over:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: repeat-x;
    background-size: auto;
    background-position: center bottom;
    background-image: url(assets/images/placeholder.png);
}
/* ------ [ Basic Backgrounds ] ------Lioit------*/
.bg-white {
    background: #fff;
}
.bg-transparent {
    background: transparent;
}
.bg-gray-darker{
    background-color: #707070 !important;
}
.bg-gray{
    background-color: #f9f9f9 !important;
}
.bg-gray-lighter{
    background-color: #fcfcfc !important;
}
.bg-gray-lighter2{
    background-color: #f4f4f4 !important;
}
.bg-dark,
.bg-dark-lighter,
.bg-dark-overlay-30,
.bg-dark-overlay-40,
.bg-dark-overlay-50,
.bg-dark-overlay-60,
.bg-dark-overlay-70,
.bg-dark-overlay-80,
.bg-dark-overlay-90,
.bg-dark-overlay,
.bg-color,
.bg-color-lighter,
.bg-color-overlay-30,
.bg-color-overlay-40,
.bg-color-overlay-50,
.bg-color-overlay-60,
.bg-color-overlay-70,
.bg-color-overlay-80,
.bg-color-overlay-90,
.bg-color-overlay,
.bg-dark p,
.bg-dark .entry-content p,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark-lighter h1,
.bg-dark-lighter h2,
.bg-dark-lighter h3,
.bg-dark-lighter h4,
.bg-dark-lighter h5,
.bg-dark-lighter h6,
.bg-dark .banner-heading,
.bg-dark .banner-decription,
.bg-dark blockquote footer,
.bg-dark blockquote small,
.bg-dark blockquote .small,
.bg-dark i{
    color: #fff !important;
}
.bg-dark a,
.bg-dark-lighter a,
.bg-dark-overlay-30 a,
.bg-dark-overlay-40 a,
.bg-dark-overlay-50 a,
.bg-dark-overlay-60 a,
.bg-dark-overlay-70 a,
.bg-dark-overlay-80 a,
.bg-dark-overlay-90 a,
.bg-dark-overlay a,
.bg-color a,
.bg-colorlighter a,
.bg-color-overlay-30 a,
.bg-color-overlay-40 a,
.bg-color-overlay-50 a,
.bg-color-overlay-70 a,
.bg-color-overlay-80 a,
.bg-color-overlay-90 a,
.bg-color-overlay a{
    color: #fdc80d;
    padding-bottom: 3px;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.bg-dark a:hover,
.bg-dark-lighter a:hover,
.bg-dark-overlay-30 a:hover,
.bg-dark-overlay-40 a:hover,
.bg-dark-overlay-50 a:hover,
.bg-dark-overlay-60 a:hover,
.bg-dark-overlay-70 a:hover,
.bg-dark-overlay-80 a:hover,
.bg-dark-overlay-90 a:hover,
.bg-dark-overlay a:hover,
.bg-color a:hover,
.bg-color-lighter a:hover,
.bg-color-overlay-30 a:hover,
.bg-color-overlay-50 a:hover,
.bg-color-overlay-70 a:hover,
.bg-color-overlay-80 a:hover,
.bg-color-overlay-90 a:hover,
.bg-color-overlay a:hover{
    color: rgba(255,255,255, 1);
    text-decoration: none;
}
.bg-color .text,
.bg-color-lighter .text,
.bg-color-overlay-30 .text,
.bg-color-overlay-40 .text,
.bg-color-overlay-50 .text,
.bg-color-overlay-60 .text,
.bg-color-overlay-70 .text,
.bg-color-overlay-80 .text,
.bg-color-overlay-90 .text,
.bg-color-overlay .text,
.bg-color .section-text,
.bg-color-lighter .section-text,
.bg-color-overlay-30 .section-text,
.bg-color-overlay-50 .section-text,
.bg-color-overlay-70 .section-text,
.bg-color-overlay-80 .section-text,
.bg-color-overlay-90 .section-text,
.bg-color-overlay .section-text{
    color: rgba(255,255,255, .75);
}

.bg-color .white,
.bg-color-lighter .whitet,
.bg-color-overlay-30 .white,
.bg-color-overlay-50 .white,
.bg-color-overlay-40 .white,
.bg-color-overlay-60 .white,
.bg-color-overlay-70 .white,
.bg-color-overlay-80 .white,
.bg-color-overlay-90 .white,
.bg-color-overlay .white,
.bg-color .count-number,
.bg-color .count-title,
.bg-dark .count-title{
    color: #fff;
}
.bg-dark{
    background-color: #1c2a58 !important;
}
.bg-dark-lighter{
    background-color: #262626 !important;
}
/* ------ [ Backgrounds Dark Overlay ] ------Lioit------*/
.bg-dark-overlay:before,
.bg-dark-overlay .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .97);
}
.bg-dark-overlay-30:before,
.bg-dark-overlay-30 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .3);
}
.bg-dark-overlay-40:before,
.bg-dark-overlay-40 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .4);
}
.bg-dark-overlay-50:before,
.bg-dark-overlay-50 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .5);
}

.bg-dark-overlay-50d:before,
.bg-dark-overlay-50d .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba( 0, 0, 0, .5);
}

.bg-dark-overlay-60:before,
.bg-dark-overlay-60 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .6);
}

.bg-dark-overlay-70:before,
.bg-dark-overlay-70 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .7);
}
.bg-dark-overlay-80:before,
.bg-dark-overlay-80 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .8);
}
.bg-dark-overlay-90:before,
.bg-dark-overlay-90 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0 , 0, 0, .9);
}
/* ------ [ Backgrounds Light Overlay ] ------Lioit------*/
.bg-light-overlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252,252,252, .97);
}
.bg-light-overlay-30:before,
.bg-light-overlay-30 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252,252,252, .30);
}
.bg-light-overlay-50:before,
.bg-light-overlay-50 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252,252,252, .50);
}
.bg-light-overlay-60:before,
.bg-light-overlay-60 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252,252,252, .60);
}

.bg-light-overlay-70:before,
.bg-light-overlay-70 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252,252,252, .7);
}
.bg-light-overlay-90:before,
.bg-light-overlay-90 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252,252,252, .9);
}
/* ------ [ Backgrounds Color Overlay ] ------Lioit------*/
.bg-color{
    background-color: #28a8d3;
}
.bg-colort-overlay:before,
.bg-colort-overlay .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    opacity: .97;
}
.bg-color-overlay-30:before,
.bg-color-overlay-30 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    opacity: .3;
}
.bg-color-overlay-50:before,
.bg-color-overlay-50 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    opacity: .5;
}
.bg-color-overlay-60:before,
.bg-color-overlay-60 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    opacity: .6;
}
.bg-color-overlay-70:before,
.bg-color-overlay-70 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    opacity: .7;
}
.bg-color-overlay-90:before,
.bg-color-overlay-90 .YTPOverlay:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    opacity: .9;
}
/* ------ [ Backgrounds  Image Blur] ------Lioit------*/
.bg-blur {
    -webkit-filter: blur(2px) opacity(0.8);
   box-shadow: inset 1px 1px 30px rgba(0, 0, 0, 0.9);
   -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.bg-blur:hover {
    -webkit-filter: blur(0px) grayscale(.0) opacity(1);
}
.bg-blur .blur-content {
    -webkit-filter: blur(0px) grayscale(10) opacity(1) !important;
   position: relative;
   z-index: 9999999;
}
.image-blur-wrap {
    position: absolute;
    top: 0px;
    left: 0px;
}
.image-blur {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    -webkit-filter: blur(5px) grayscale(0) opacity(0.5);
}
.image-blur-wrap:hover .image-blur {
    -webkit-filter: blur(0px) grayscale(1) opacity(1);
}
/* ------ [ Backgrounds Solid Colors ] ------Lioit------*/
.bg-black, .button-black.button--inverted::before, .button-black.button--inverted::after { background-color: #2c2c2c !important; }
.bg-black-light, .button-black-light.button--inverted::before, .button-black-light.button--inverted::after { background-color: #474F59 !important; }
.bg-orange, .button-orange.button--inverted::before, .button-orange.button--inverted::after  { background-color: #f7a541 !important; }
.bg-yellow, .button-yellow.button--inverted::before, .button-yellow.button--inverted::after  {  background-color: #ffce37 !important; }
.bg-cyan1, .button-cyan1.button--inverted::before, .button-cyan1.button--inverted::after  { background-color: #20d7de !important; }
.bg-cyan, .button-cyan.button--inverted::before, .button-cyan.button--inverted::after  { background-color: #27c5c3 !important; }
.bg-magic, .button-magic.button--inverted::before, .button-magic.button--inverted::after  {background-color: #e884fa !important;}
.bg-green, .button-green.button--inverted::before , .button-green.button--inverted::after { background-color: #58bf44 !important; }
.bg-blue, .button-blue.button--inverted::before, .button-blue.button--inverted::after  { background-color: #3c66ee !important; }
.bg-blue2, .button-blue2.button--inverted::before, .button-blue2.button--inverted::after  { background-color: #1b53af !important; }
.bg-sky, .button-sky.button--inverted::before, .button-sky.button--inverted::after  { background-color: #28a8d3 !important; }
.bg-sky2, .button-sky2.button--inverted::before, .button-sky2.button--inverted::after  { background-color: #48c0eb !important; }
.bg-sky3, .button-sky3.button--inverted::before, .button-sky3.button--inverted::after  { background-color: #28a8d3 !important; }
.bg-sky4, .button-sky4.button--inverted::before, .button-sky4.button--inverted::after  {background-color: #2187b7 !important; }
.bg-purple, .button-purple.button--inverted::before, .button-purple.button--inverted::after  { background-color: #dd4d57 !important; }
.bg-red , .button-red.button--inverted::before, .button-red.button--inverted::after { background-color: #e13939 !important; }
.bg-red2, .button-red2.button--inverted::before, .button-red2.button--inverted::after  { background-color: #fa4b4b !important; }
.bg-google-plus, .button-google-plus.button--inverted::before, .button-google-plus.button--inverted::after  { background-color: #d93e2d !important; }
.bg-behance, .button-behance.button--inverted::before, .button-behance.button--inverted::after  { background-color: #000000 !important; }
.bg-vimeo, .button-vimeo.button--inverted::before, .button-vimeo.button--inverted::after  { background-color: #229ACC !important; }
.bg-500px, .button-500px.button--inverted::before, .button-500px.button--inverted::after  { background-color: #58a9de !important; }
.bg-posterous, .button-posterous.button--inverted::before, .button-posterous.button--inverted::after  { background-color: #efd57c !important; }
.bg-paypal, .button-paypal.button--inverted::before , .button-paypal.button--inverted::after { background-color: #5b85a8 !important; }
.bg-picasa, .button-picasa.button--inverted::before, .button-picasa.button--inverted::after  { background-color: #b088c1 !important; }
.bg-duckduckgo, .button-duckduckgo.button--inverted::before, .button-duckduckgo.button--inverted::after  { background-color: #fb0a2a !important; }
.bg-aim, .button-aim.button--inverted::before , .button-aim.button--inverted::after  { background-color: #ffd900 !important; }
.bg-delicious, .button-delicious.button--inverted::before , .button-delicious.button--inverted::after { background-color: #3399ff !important; }
.bg-paypal2, .button-paypal2.button--inverted::before , .button-paypal2--inverted::after  { background-color: #003087 !important; }
.bg-flattr, .button-flattr.button--inverted::before , .button-flattr.button--inverted::after  { background-color: #f67c1a !important; }
.bg-android, .button-android.button--inverted::before , .button-android.button--inverted::after { background-color: #a4c639 !important; }
.bg-eventful, .button-eventful.button--inverted::before , .button-eventful.button--inverted::after { background-color: #136ad5 !important; }
.bg-smashmag, .button-smashmag.button--inverted::before , .button-gplus.button--inverted::after { background-color: #ff9900 !important; }
.bg-gplus, .button-gplus.button--inverted::before, .button-black.button--inverted::after   { background-color: #dd4b39 !important; }
.bg-envato, .button-envato.button--inverted::before , .button-envato.button--inverted::after { background-color: #81b441 !important; }
.bg-wikipedia, .button-wikipedia.button--inverted::before , .button-wikipedia.button--inverted::after  { background-color: #999999 !important; }
.bg-lanyrd, .button-lanyrd.button--inverted::before , .button-lanyrd.button--inverted::after  { background-color: #663300 !important; }
.bg-calendar, .button-calendar.button--inverted::before  , .button-calendar.button--inverted::after { background-color: #e74a1e !important; }
.bg-stumbleupon, .button-stumbleupon.button--inverted::before  , .button-stumbleupon.button--inverted::after { background-color: #eb4924 !important; }
.bg-fivehundredpx, .button-fivehundredpx.button--inverted::before  , .button-fivehundredpx.button--inverted::after { background-color: #ed174f !important; }
.bg-pinterest, .button-pinterest.button--inverted::before , .button-pinterest.button--inverted::after  { background-color: #cc2127 !important; }
.bg-bitcoin , .button-bitcoin.button--inverted::before, .button-bitcoin.button--inverted::after  { background-color: #0ea0db !important; }
.bg-w3c, .button-w3c.button--inverted::before, .button-w3c.button--inverted::after   { background-color: #7dba00 !important; }
.bg-foursquare, .button-foursquare.button--inverted::before, .button-foursquare.button--inverted::after   { background-color: #f94877 !important; }
.bg-html5, .button-html5.button--inverted::before , .button-html5.button--inverted::after  { background-color: #e34f26 !important; }
.bg-ie, .button-ie.button--inverted::before , .button-ie.button--inverted::after  { background-color: #0096d6 !important; }
.bg-call , .button-call.button--inverted::before , .button-call.button--inverted::after { background-color: #e74a1e !important; }
.bg-grooveshark , .button-grooveshark.button--inverted::before , .button-grooveshark.button--inverted::after { background-color: #6cbc35 !important; }
.bg-ninetyninedesigns, .button-ninetyninedesigns.button--inverted::before , .button-ninetyninedesigns.button--inverted::after  { background-color: #ee4f4f !important; }
.bg-forrst, .button-forrst.button--inverted::before, .button-forrst.button--inverted::after   { background-color: #5b9a68 !important; }
.bg-digg , .button-digg.button--inverted::before, .button-digg.button--inverted::after  { background-color: #000000 !important; }
.bg-spotify, .button-spotify.button--inverted::before, .button-spotify.button--inverted::after   { background-color: #2ebd59 !important; }
.bg-reddit, .button-reddit.button--inverted::before , .button-reddit.button--inverted::after  { background-color: #5f99cf !important; }
.bg-guest , .button-guest.button--inverted::before, .button-guest.button--inverted::after  { background-color: #ff4500 !important; }
.bg-gowalla, .button-gowalla.button--inverted::before  , .button-gowalla.button--inverted::after { background-color: #0ba6ab !important; }
.bg-appstore, .button-appstore.button--inverted::before , .button-appstore.button--inverted::after  { background-color: #2fa5d6 !important; }
.bg-apple, .button-apple.button--inverted::before  , .button-apple.button--inverted::after { background-color: #686868 !important; }
.bg-blogger, .button-blogger.button--inverted::before  , .button-blogger.button--inverted::after { background-color: #f57d00 !important; }
.bg-cc, .button-cc.button--inverted::before   , .button-cc.button--inverted::after{ background-color: #b7295a !important; }
.bg-dribbble, .button-dribbble.button--inverted::before , .button-dribbble.button--inverted::after  { background-color: #ea4c89 !important; }
.bg-evernote, .button-evernote.button--inverted::before , .button-evernote.button--inverted::after  { background-color: #7ac142 !important; }
.bg-flickr, .button-flickr.button--inverted::before , .button-flickr.button--inverted::after  { background-color: #0063dc !important; }
.bg-google , .button-google.button--inverted::before  , .button-google.button--inverted::after{ background-color: #4285f4 !important; }
.bg-viadeo , .button-viadeo.button--inverted::before , .button-viadeo.button--inverted::after { background-color: #f07355 !important; }
.bg-instapaper, .button-instapaper.button--inverted::before , .button-instapaper.button--inverted::after  { background-color: #428bca !important; }
.bg-weibo , .button-weibo.button--inverted::before, .button-weibo.button--inverted::after  { background-color: #fc3d39 !important; }
.bg-klout, .button-klout.button--inverted::before , .button-klout.button--inverted::after  { background-color: #f65314 !important; }
.bg-linkedin, .button-linkedin.button--inverted::before, .button-linkedin.button--inverted::after   { background-color: #3371b7 !important; }
.bg-meetup, .button-meetup.button--inverted::before, .button-meetup.button--inverted::after  { background-color: #e0393e !important; }
.bg-vk, .button-vk.button--inverted::before , .button-vk.button--inverted::after  { background-color: #45668e !important; }
.bg-plancast, .button-plancast.button--inverted::before, .button-plancast.button--inverted::after  { background-color: #1ab7ea !important; }
.bg-disqus, .button-disqus.button--inverted::before, .button-disqus.button--inverted::after  { background-color: #2e9fff !important; }
.bg-rss, .button-rss.button--inverted::before , .button-rss.button--inverted::after  { background-color: #f26522 !important; }
.bg-skype, .button-skype.button--inverted::before , .button-skype.button--inverted::after  { background-color: #00aff0 !important; }
.bg-youtube, .button-youtube.button--inverted::before, .button-youtube.button--inverted::after   { background-color: #cd201f !important; }
.bg-vimeo, .button-vimeo.button--inverted::before , .button-vimeo.button--inverted::after  { background-color: #1ab7ea !important; }
.bg-windows, .button-windows.button--inverted::before  , .button-windows.button--inverted::after { background-color: #00bcf2 !important; }
.bg-xing, .button-xing.button--inverted::before  , .button-xing.button--inverted::after { background-color: #026466 !important; }
.bg-yahoo, .button-yahoo.button--inverted::before, .button-yahoo.button--inverted::after   { background-color: #400191 !important; }
.bg-chrome, .button-chrome.button--inverted::before , .button-chrome.button--inverted::after  { background-color: #fcd116 !important; }
.bg-email, .button-email.button--inverted::before  , .button-email.button--inverted::after { background-color: #78dcfa !important; }
.bg-macstore, .button-macstore.button--inverted::before , .button-macstore.button--inverted::after  { background-color: #0054a0 !important; }
.bg-myspace, .button-myspace.button--inverted::before, .button-myspace.button--inverted::after   { background-color: #000000 !important; }
.bg-podcast, .button-podcast.button--inverted::before , .button-podcast.button--inverted::after  { background-color: #dc380f !important; }
.bg-amazon, .button-amazon.button--inverted::before, .button-amazon.button--inverted::after  { background-color: #146eb4 !important; }
.bg-steam, .button-steam.button--inverted::before  , .button-steam.button--inverted::after { background-color: #d7d7d8 !important; }
.bg-steam2, .button-steam2.button--inverted::before , .button-steam2.button--inverted::after  { background-color: #ECE9E6 !important; }
.bg-cloudapp, .button-cloudapp.button--inverted::before , .button-cloudapp.button--inverted::after  { background-color: #00aaf2 !important; }
.bg-dropbox, .button-dropbox.button--inverted::before , .button-dropbox.button--inverted::after  { background-color: #007ee5 !important; }
.bg-ebay, .button-ebay.button--inverted::before , .button-ebay.button--inverted::after  { background-color: #e53238 !important; }
.bg-facebook, .button-facebook.button--inverted::before , .button-facebook.button--inverted::after  { background-color: #3b5998 !important; }
.bg-twitter, .button-twitter.button--inverted::before  , .button-twitter.button--inverted::after { background-color: #55acee !important; }
.bg-instagram, .button-instagram.button--inverted::before , .button-instagram.button--inverted::after  { background-color: #3f729b !important; }
.bg-github, .button-github.button--inverted::before , .button-github.button--inverted::after  { background-color: #4183c4 !important; }
.bg-googleplay, .button-googleplay.button--inverted::before, .button-googleplay.button--inverted::after   { background-color: #0f9d58 !important; }
.bg-itunes, .button-login.itunes--inverted::before , .button-itunes.button--inverted::after  { background-color: #4285f4 !important; }
.bg-plurk, .button-login.plurk--inverted::before , .button-plurk.button--inverted::after  { background-color: #7db701 !important; }
.bg-songkick, .button-songkick.button--inverted::before, .button-songkick.button--inverted::after   { background-color: #f80046 !important; }
.bg-lastfm, .button-lastfm.button--inverted::before , .button-lastfm.button--inverted::after  { background-color: #d51007 !important; }
.bg-gmail, .button-gmail.button--inverted::before, .button-gmail.button--inverted::after   { background-color: #db3a1b !important; }
.bg-pinboard, .button-pinboard.button--inverted::before , .button-pinboard.button--inverted::after  { background-color: #0000e6 !important; }
.bg-openid, .button-openid.button--inverted::before   , .button-openid.button--inverted::after{ background-color: #616365 !important; }
.bg-quora, .button-quora.button--inverted::before , .button-quora.button--inverted::after  { background-color: #a82400 !important; }
.bg-soundcloud, .button-soundcloud.button--inverted::before  , .button-soundcloud.button--inverted::after { background-color: #ff3300 !important; }
.bg-tumblr, .button-tumblr.button--inverted::before , .button-tumblr.button--inverted::after  { background-color: #35465c !important; }
.bg-eventasaurus, .button-eventasaurus.button--inverted::before, .button-eventasaurus.button--inverted::after   { background-color: #eb5a46 !important; }
.bg-wordpress, .button-wordpress.button--inverted::before, .button-wordpress.button--inverted::after  { background-color: #21759b !important; }
.bg-yelp, .button-yelp.button--inverted::before  , .button-yelp.button--inverted::after { background-color: #af0606 !important; }
.bg-intensedebate, .button-intensedebate.button--inverted::before , .button-eventbrite.button--inverted::after  { background-color: #2b96f1 !important; }
.bg-eventbrite, .button-eventbrite.button--inverted::before , .button-black.button--inverted::after  { background-color: #34495e !important; }
.bg-scribd, .button-scribd.button--inverted::before , .button-scribd.button--inverted::after  { background-color: #1a7bba !important; }
.bg-green-light, .button-green-light.button--inverted::before , .button-green-light.button--inverted::after  { background-color: #96bf48 !important; }
.bg-stripe, .button-stripe.button--inverted::before, .button-stripe.button--inverted::after   { background-color: #00afe1 !important; }
.bg-opentable, .button-opentable.button--inverted::before , .button-opentable.button--inverted::after  { background-color: #eb4924 !important; }
.bg-cart, .button-cart.button--inverted::before , .button-cart.button--inverted::after  { background-color: #e74a1e !important; }
.bg-print , .button-print.button--inverted::before , .button-print.button--inverted::after { background-color: #e74a1e !important; }
.bg-angellist, .button-angellist.button--inverted::before , .button-angellist.button--inverted::after { background-color: #f97200 !important; }
.bg-dwolla, .button-dwolla.button--inverted::before , .button-dwolla.button--inverted::after  { background-color: #828a87 !important; }
.bg-appnet, .button-appnet.button--inverted::before , .button-appnet.button--inverted::after  { background-color: #00afe1 !important; }
.bg-statusnet, .button-statusnet.button--inverted::before, .button-black.button--inverted::after   { background-color: #595a5c !important; }
.bg-acrobat, .button-acrobat.button--inverted::before, .button-acrobat.button--inverted::after   { background-color: #e74635 !important; }
.bg-drupal, .button-drupal.button--inverted::before, .button-drupal.button--inverted::after   { background-color: #0077c0 !important; }
.bg-buffer, .button-buffer.button--inverted::before , .button-buffer.button--inverted::after  { background-color: #76b852 !important; }
.bg-pocket, .button-login.button--inverted::before  , .button-pocket.button--inverted::after { background-color: #d3505a !important; }
.bg-bitbucket, .button-pocket.button--inverted::before, .button-bitbucket.button--inverted::after   { background-color: #205081 !important; }
.bg-lego, .button-lego.button--inverted::before , .button-lego.button--inverted::after { background-color: #61b3de !important; }
.bg-login, .button-login.button--inverted::before  , .button-login.button--inverted::after { background-color: #e74a1e !important; }
.bg-stackoverflow, .button-stackoverflow.button--inverted::before, .button-stackoverflow.button--inverted::after   { background-color: #fe7a15 !important; }
.bg-hackernews, .button-hackernews.button--inverted::before , .button-hackernews.button--inverted::after  { background-color: #2ebd59 !important; }
.bg-lkdto, .button-lkdto.button--inverted::before   , .button-lkdto.button--inverted::after{ background-color: #595a5c !important; }
/* ------ [ Backgrounds Gradient ] ------Lioit------*/
.gradient-sky{
  background: -webkit-linear-gradient(90deg, #c9daee 10%, #2187b7 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #c9daee 10%, #2187b7 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #c9daee 10%, #2187b7 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #c9daee 10%, #2187b7 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #c9daee 10%, #2187b7 90%) !important; /* W3C */
}
.gradient-sky2{
  background: -webkit-linear-gradient(90deg, #2187b7 10%, #c9daee 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #2187b7 10%, #c9daee 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #2187b7 10%, #c9daee 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #2187b7 10%, #c9daee 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #2187b7 10%, #c9daee 90%) !important; /* W3C */
}
.gradient-clouds {
  background: -webkit-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #ECE9E6 10%, #FFFFFF 90%) !important; /* W3C */
}
.gradient-passion {
  background: -webkit-linear-gradient(90deg, #e53935 10%, #e35d5b 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #e53935 10%, #e35d5b 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #e53935 10%, #e35d5b 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #e53935 10%, #e35d5b 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #e53935 10%, #e35d5b 90%) !important; /* W3C */
}
.gradient-lizard {
  background: -webkit-linear-gradient(90deg, #304352 10%, #d7d2cc 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #304352 10%, #d7d2cc 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #304352 10%, #d7d2cc 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #304352 10%, #d7d2cc 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #304352 10%, #d7d2cc 90%) !important; /* W3C */
}
.gradient-miaka {
  background: -webkit-linear-gradient(90deg, #FC354C 10%, #0ABFBC 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #FC354C 10%, #0ABFBC 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #FC354C 10%, #0ABFBC 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #FC354C 10%, #0ABFBC 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #FC354C 10%, #0ABFBC 90%) !important; /* W3C */
}
.gradient-midnight-city {
  background: -webkit-linear-gradient(90deg, #232526 10%, #414345 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #232526 10%, #414345 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #232526 10%, #414345 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #232526 10%, #414345 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #232526 10%, #414345 90%) !important; /* W3C */
}
.gradient-servquick {
  background: -webkit-linear-gradient(90deg, #485563 10%, #29323c 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #485563 10%, #29323c 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #485563 10%, #29323c 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #485563 10%, #29323c 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #485563 10%, #29323c 90%) !important; /* W3C */
}
.gradient-facebook-messenger{
  background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #00c6ff 10%, #0072ff 90%) !important; /* W3C */
}
.gradient-shore {
  background: -webkit-linear-gradient(90deg, #70e1f5 10%, #ffd194 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #70e1f5 10%, #ffd194 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #70e1f5 10%, #ffd194 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #70e1f5 10%, #ffd194 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #70e1f5 10%, #ffd194 90%) !important; /* W3C */
}
.gradient-cheer-up-emo-kid{
  background: -webkit-linear-gradient(90deg, #556270 10%, #FF6B6B 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #556270 10%, #FF6B6B 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #556270 10%, #FF6B6B 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #556270 10%, #FF6B6B 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #556270 10%, #FF6B6B 90%) !important; /* W3C */
}
.gradient-amethyst {
  background: -webkit-linear-gradient(90deg, #9D50BB 10%, #6E48AA 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #9D50BB 10%, #6E48AA 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #9D50BB 10%, #6E48AA 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #9D50BB 10%, #6E48AA 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #9D50BB 10%, #6E48AA 90%) !important; /* W3C */
}
.gradient-dance-to-forget {
  background: -webkit-linear-gradient(90deg, #FF4E50 10%, #F9D423 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #FF4E50 10%, #F9D423 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #FF4E50 10%, #F9D423 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #FF4E50 10%, #F9D423 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #FF4E50 10%, #F9D423 90%) !important; /* W3C */
 }
.gradient-parklife {
  background: -webkit-linear-gradient(90deg, #ADD100 10%, #7B920A 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #ADD100 10%, #7B920A 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #ADD100 10%, #7B920A 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #ADD100 10%, #7B920A 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #ADD100 10%, #7B920A 90%) !important; /* W3C */
 }
.gradient-ash {
  background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #606c88 10%, #3f4c6b 90%) !important; /* W3C */
 }
.gradient-reef {
  background: -webkit-linear-gradient(90deg, #00d2ff 10%, #3a7bd5 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #00d2ff 10%, #3a7bd5 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #00d2ff 10%, #3a7bd5 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #00d2ff 10%, #3a7bd5 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #00d2ff 10%, #3a7bd5 90%) !important; /* W3C */
 }
.gradient-aqualicious {
  background: -webkit-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%) !important; /* W3C */
 }
.gradient-a-lost-memory {
  background: -webkit-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #DE6262 10%, #FFB88C 90%) !important; /* W3C */
 }
.gradient-namn {
  background: -webkit-linear-gradient(90deg, #a73737 10%, #7a2828 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #a73737 10%, #7a2828 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #a73737 10%, #7a2828 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #a73737 10%, #7a2828 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #a73737 10%, #7a2828 90%) !important; /* W3C */
 }
.gradient-pinot-noir {
  background: -webkit-linear-gradient(90deg, #4b6cb7 10%, #182848 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #4b6cb7 10%, #182848 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #4b6cb7 10%, #182848 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #4b6cb7 10%, #182848 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #4b6cb7 10%, #182848 90%) !important; /* W3C */
 }
.gradient-calm-darya {
  background: -webkit-linear-gradient(90deg, #5f2c82 10%, #49a09d 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #5f2c82 10%, #49a09d 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #5f2c82 10%, #49a09d 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #5f2c82 10%, #49a09d 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #5f2c82 10%, #49a09d 90%) !important; /* W3C */
 }
.gradient-stellar {
  background: -webkit-linear-gradient(90deg, #7474BF 10%, #348AC7 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #7474BF 10%, #348AC7 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #7474BF 10%, #348AC7 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #7474BF 10%, #348AC7 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #7474BF 10%, #348AC7 90%) !important; /* W3C */
}
.gradient-mantle {
  background: -webkit-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #24C6DC 10%, #514A9D 90%) !important; /* W3C */
}
.gradient-titanium {
  background: -webkit-linear-gradient(90deg, #283048 10%, #859398 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #283048 10%, #859398 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #283048 10%, #859398 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #283048 10%, #859398 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #283048 10%, #859398 90%) !important; /* W3C */
}
.gradient-opa {
  background: -webkit-linear-gradient(90deg, #3D7EAA 10%, #FFE47A 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #3D7EAA 10%, #FFE47A 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #3D7EAA 10%, #FFE47A 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #3D7EAA 10%, #FFE47A 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #3D7EAA 10%, #FFE47A 90%) !important; /* W3C */
}
.gradient-mystic {
  background: -webkit-linear-gradient(90deg, #757F9A 10%, #D7DDE8 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #757F9A 10%, #D7DDE8 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #757F9A 10%, #D7DDE8 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #757F9A 10%, #D7DDE8 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #757F9A 10%, #D7DDE8 90%) !important; /* W3C */
}
.gradient-endless-river {
  background: -webkit-linear-gradient(90deg, #43cea2 10%, #185a9d 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #43cea2 10%, #185a9d 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #43cea2 10%, #185a9d 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #43cea2 10%, #185a9d 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #43cea2 10%, #185a9d 90%); /* W3C */
}
.gradient-venice-blue {
  background: -webkit-linear-gradient(90deg, #085078 10%, #85D8CE 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #085078 10%, #85D8CE 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #085078 10%, #85D8CE 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #085078 10%, #85D8CE 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #085078 10%, #85D8CE 90%) !important; /* W3C */
}
.gradient-mojito {
  background: -webkit-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #1D976C 10%, #93F9B9 90%) !important; /* W3C */
}
.gradient-cherry {
  background: -webkit-linear-gradient(90deg, #EB3349 10%, #F45C43 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #EB3349 10%, #F45C43 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #EB3349 10%, #F45C43 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #EB3349 10%, #F45C43 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #EB3349 10%, #F45C43 90%) !important; /* W3C */
}
.gradient-pinky {
  background: -webkit-linear-gradient(90deg, #DD5E89 10%, #F7BB97 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #DD5E89 10%, #F7BB97 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #DD5E89 10%, #F7BB97 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #DD5E89 10%, #F7BB97 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #DD5E89 10%, #F7BB97 90%) !important; /* W3C */
}
.gradient-sea-weed {
  background: -webkit-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%) !important; /* W3C */
}
.gradient-mango-pulp {
  background: -webkit-linear-gradient(90deg, #F09819 10%, #EDDE5D 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #F09819 10%, #EDDE5D 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #F09819 10%, #EDDE5D 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #F09819 10%, #EDDE5D 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #F09819 10%, #EDDE5D 90%) !important; /* W3C */
}
.gradient-rose-water {
  background: -webkit-linear-gradient(90deg, #E55D87 10%, #5FC3E4 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #E55D87 10%, #5FC3E4 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #E55D87 10%, #5FC3E4 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #E55D87 10%, #5FC3E4 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #E55D87 10%, #5FC3E4 90%) !important; /* W3C */
}
.gradient-emerald-water {
  background: -webkit-linear-gradient(90deg, #348F50 10%, #56B4D3 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #348F50 10%, #56B4D3 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #348F50 10%, #56B4D3 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #348F50 10%, #56B4D3 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #348F50 10%, #56B4D3 90%) !important; /* W3C */
}
.gradient-between-night-and-day {
  background: -webkit-linear-gradient(90deg, #2c3e50 10%, #3498db 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #2c3e50 10%, #3498db 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #2c3e50 10%, #3498db 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #2c3e50 10%, #3498db 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #2c3e50 10%, #3498db 90%) !important; /* W3C */
}
.gradient-turquoise-flow {
  background: -webkit-linear-gradient(90deg, #136a8a 10%, #267871 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #136a8a 10%, #267871 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #136a8a 10%, #267871 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #136a8a 10%, #267871 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #136a8a 10%, #267871 90%) !important; /* W3C */
}
.gradient-instagram {
  background: -webkit-linear-gradient(90deg, #517fa4 10%, #243949 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #517fa4 10%, #243949 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #517fa4 10%, #243949 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #517fa4 10%, #243949 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #517fa4 10%, #243949 90%) !important; /* W3C */
}
.gradient-soundcloud {
  background: -webkit-linear-gradient(90deg, #fe8c00 10%, #f83600 90%) !important; /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #fe8c00 10%, #f83600 90%) !important; /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #fe8c00 10%, #f83600 90%) !important; /* IE10 */
  background:      -o-linear-gradient(90deg, #fe8c00 10%, #f83600 90%) !important; /* Opera 11.10+ */
  background:         linear-gradient(90deg, #fe8c00 10%, #f83600 90%) !important; /* W3C */
}
/* ------ [ Video Backgrounds ] ------Lioit------*/
.bg-video-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.bg-video-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.bg-video-wrapper video{
    max-width: inherit;
    height: inherit;
    z-index: 0;
}

/* -06- [ Box Shadow ]----------Lioit------------------------*/

/*	- Box Shadow.
    - Inner Shadow.
    - Icon Hovers Shadow.

-------------------------------------Lioit------------------------*/
/* ------ [ Box Shadow ] ------Lioit------*/
.shadow{
    -webkit-box-shadow: 0px 3px 50px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 3px 50px rgba(0, 0, 0, .15);
    box-shadow: 0px 3px 50px rgba(0, 0, 0, .15);
}
.white-shadow{
    -webkit-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
    -moz-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
    box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
}
.box-shadow {
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.09);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.09);
}
.box-shadow20 {
    -webkit-box-shadow: 0px 4px 20px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 4px 20px rgba(0,0,0,0.4);
    box-shadow: 0px 4px 20px rgba(0,0,0,0.4);
}
/* ------ [ Inner Shadow ] ------Lioit------*/
.inner-shadow {
    -webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.09);
    -moz-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.09);
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.09);
}
/* ------ [ Text Shadows ] ------Lioit------*/
.text-shadow {
    -webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.09);
    -moz-text-shadow: 0px 1px 1px rgba(0,0,0,0.09);
    text-shadow: 0px 1px 1px rgba(0,0,0,0.09);
}
.text-shadow5 {
    -webkit-text-shadow: 0px 1px 5px rgba(0,0,0,0.4);
    -moz-text-shadow: 0px 1px 5px rgba(0,0,0,0.4);
    text-shadow: 0px 1px 5px rgba(0,0,0,0.4);
}
.text-shadow10 {
    -webkit-text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    -moz-text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
}
.text-shadow20 {
    -webkit-text-shadow: 0px 4px 20px rgba(0,0,0,0.4);
    -moz-text-shadow: 0px 4px 20px rgba(0,0,0,0.4);
    text-shadow: 0px 4px 20px rgba(0,0,0,0.4);
}
/* ------ [ Icon Hovers Box Shadow ] ------Lioit------*/
.box-shadow-black .hover-icon:after { box-shadow: 0 0 0 4px #2c2c2c !important; }
.box-shadow-orange .hover-icon:after { box-shadow: 0 0 0 4px #f7a541 !important; }
.box-shadow-yellow .hover-icon:after {  box-shadow: 0 0 0 4px #ffce37 !important; }
.box-shadow-cyan .hover-icon:after { box-shadow: 0 0 0 4px #27c5c3 !important; }
.box-shadow-green .hover-icon:after { box-shadow: 0 0 0 4px #58bf44 !important; }
.box-shadow-blue .hover-icon:after { box-shadow: 0 0 0 4px #3c66ee !important; }
.box-shadow-blue2 .hover-icon:after { box-shadow: 0 0 0 4px #1b53af !important; }
.box-shadow-sky .hover-icon:after { box-shadow: 0 0 0 4px #28a8d3 !important; }
.box-shadow-sky2 .hover-icon:after { box-shadow: 0 0 0 4px #48c0eb !important; }
.box-shadow-purple .hover-icon:after { box-shadow: 0 0 0 4px #dd4d57 !important; }
.box-shadow-red .hover-icon:after { box-shadow: 0 0 0 4px #e13939 !important; }
.box-shadow-red2 .hover-icon:after { box-shadow: 0 0 0 4px #28a8d3 !important; }
.box-shadow-google-plus .hover-icon:after  { box-shadow: 0 0 0 4px #d93e2d !important; }
.box-shadow-behance .hover-icon:after  { box-shadow: 0 0 0 4px #000000 !important; }
.box-shadow-vimeo .hover-icon:after  { box-shadow: 0 0 0 4px #229ACC !important; }
.box-shadow-500px .hover-icon:after  { box-shadow: 0 0 0 4px #58a9de !important; }
.box-shadow-posterous .hover-icon:after  { box-shadow: 0 0 0 4px #efd57c !important; }
.box-shadow-paypal .hover-icon:after  { box-shadow: 0 0 0 4px #5b85a8 !important; }
.box-shadow-picasa .hover-icon:after  { box-shadow: 0 0 0 4px #b088c1 !important; }
.box-shadow-duckduckgo .hover-icon:after  { box-shadow: 0 0 0 4px #fb0a2a !important; }
.box-shadow-aim .hover-icon:after  { box-shadow: 0 0 0 4px #ffd900 !important; }
.box-shadow-delicious .hover-icon:after  { box-shadow: 0 0 0 4px #3399ff !important; }
.box-shadow-paypal .hover-icon:after  { box-shadow: 0 0 0 4px #003087 !important; }
.box-shadow-flattr .hover-icon:after  { box-shadow: 0 0 0 4px #f67c1a !important; }
.box-shadow-android .hover-icon:after  { box-shadow: 0 0 0 4px #a4c639 !important; }
.box-shadow-eventful .hover-icon:after  { box-shadow: 0 0 0 4px #136ad5 !important; }
.box-shadow-smashmag .hover-icon:after  { box-shadow: 0 0 0 4px #ff9900 !important; }
.box-shadow-gplus .hover-icon:after  { box-shadow: 0 0 0 4px #dd4b39 !important; }
.box-shadow-wikipedia .hover-icon:after  { box-shadow: 0 0 0 4px #999999 !important; }
.box-shadow-lanyrd .hover-icon:after  { box-shadow: 0 0 0 4px #663300 !important; }
.box-shadow-calendar .hover-icon:after  { box-shadow: 0 0 0 4px #e74a1e !important; }
.box-shadow-stumbleupon .hover-icon:after  { box-shadow: 0 0 0 4px #eb4924 !important; }
.box-shadow-fivehundredpx .hover-icon:after  { box-shadow: 0 0 0 4px #ed174f !important; }
.box-shadow-pinterest .hover-icon:after  { box-shadow: 0 0 0 4px #cc2127 !important; }
.box-shadow-bitcoin .hover-icon:after  { box-shadow: 0 0 0 4px #0ea0db !important; }
.box-shadow-w3c .hover-icon:after  { box-shadow: 0 0 0 4px #7dba00 !important; }
.box-shadow-foursquare .hover-icon:after  { box-shadow: 0 0 0 4px #f94877 !important; }
.box-shadow-html5 .hover-icon:after  { box-shadow: 0 0 0 4px #e34f26 !important; }
.box-shadow-ie .hover-icon:after  { box-shadow: 0 0 0 4px #0096d6 !important; }
.box-shadow-call .hover-icon:after  { box-shadow: 0 0 0 4px #e74a1e !important; }
.box-shadow-grooveshark .hover-icon:after  { box-shadow: 0 0 0 4px #6cbc35 !important; }
.box-shadow-ninetyninedesigns .hover-icon:after  { box-shadow: 0 0 0 4px #ee4f4f !important; }
.box-shadow-forrst .hover-icon:after  { box-shadow: 0 0 0 4px #5b9a68 !important; }
.box-shadow-digg .hover-icon:after  { box-shadow: 0 0 0 4px #000000 !important; }
.box-shadow-spotify .hover-icon:after  { box-shadow: 0 0 0 4px #2ebd59 !important; }
.box-shadow-reddit .hover-icon:after  { box-shadow: 0 0 0 4px #5f99cf !important; }
.box-shadow-guest .hover-icon:after  { box-shadow: 0 0 0 4px #ff4500 !important; }
.box-shadow-gowalla .hover-icon:after  { box-shadow: 0 0 0 4px #0ba6ab !important; }
.box-shadow-appstore .hover-icon:after  { box-shadow: 0 0 0 4px #2fa5d6 !important; }
.box-shadow-appstore .hover-icon:after  { box-shadow: 0 0 0 4px #686868 !important; }
.box-shadow-blogger .hover-icon:after  { box-shadow: 0 0 0 4px #f57d00 !important; }
.box-shadow-cc .hover-icon:after  { box-shadow: 0 0 0 4px #b7295a !important; }
.box-shadow-dribbble .hover-icon:after  { box-shadow: 0 0 0 4px #ea4c89 !important; }
.box-shadow-evernote .hover-icon:after  { box-shadow: 0 0 0 4px #7ac142 !important; }
.box-shadow-flickr .hover-icon:after  { box-shadow: 0 0 0 4px #0063dc !important; }
.box-shadow-google .hover-icon:after  { box-shadow: 0 0 0 4px #4285f4 !important; }
.box-shadow-viadeo .hover-icon:after  { box-shadow: 0 0 0 4px #f07355 !important; }
.box-shadow-instapaper .hover-icon:after  { box-shadow: 0 0 0 4px #428bca !important; }
.box-shadow-weibo .hover-icon:after  { box-shadow: 0 0 0 4px #fc3d39 !important; }
.box-shadow-klout .hover-icon:after  { box-shadow: 0 0 0 4px #f65314 !important; }
.box-shadow-linkedin .hover-icon:after  { box-shadow: 0 0 0 4px #3371b7 !important; }
.box-shadow-meetup .hover-icon:after  { box-shadow: 0 0 0 4px #e0393e !important; }
.box-shadow-vk .hover-icon:after  { box-shadow: 0 0 0 4px #45668e !important; }
.box-shadow-plancast .hover-icon:after  { box-shadow: 0 0 0 4px #1ab7ea !important; }
.box-shadow-disqus .hover-icon:after  { box-shadow: 0 0 0 4px #2e9fff !important; }
.box-shadow-rss .hover-icon:after  { box-shadow: 0 0 0 4px #f26522 !important; }
.box-shadow-skype .hover-icon:after  { box-shadow: 0 0 0 4px #00aff0 !important; }
.box-shadow-youtube .hover-icon:after  { box-shadow: 0 0 0 4px #cd201f !important; }
.box-shadow-vimeo .hover-icon:after  { box-shadow: 0 0 0 4px #1ab7ea !important; }
.box-shadow-windows .hover-icon:after  { box-shadow: 0 0 0 4px #00bcf2 !important; }
.box-shadow-xing .hover-icon:after  { box-shadow: 0 0 0 4px #026466 !important; }
.box-shadow-yahoo .hover-icon:after  { box-shadow: 0 0 0 4px #400191 !important; }
.box-shadow-chrome .hover-icon:after  { box-shadow: 0 0 0 4px #fcd116 !important; }
.box-shadow-email .hover-icon:after  { box-shadow: 0 0 0 4px #78dcfa !important; }
.box-shadow-macstore .hover-icon:after  { box-shadow: 0 0 0 4px #0054a0 !important; }
.box-shadow-myspace .hover-icon:after  { box-shadow: 0 0 0 4px #000000 !important; }
.box-shadow-podcast .hover-icon:after  { box-shadow: 0 0 0 4px #dc380f !important; }
.box-shadow-amazon .hover-icon:after  { box-shadow: 0 0 0 4px #146eb4 !important; }
.box-shadow-steam .hover-icon:after  { box-shadow: 0 0 0 4px #d7d7d8 !important; }
.box-shadow-cloudapp .hover-icon:after  { box-shadow: 0 0 0 4px #00aaf2 !important; }
.box-shadow-dropbox .hover-icon:after  { box-shadow: 0 0 0 4px #007ee5 !important; }
.box-shadow-ebay .hover-icon:after  { box-shadow: 0 0 0 4px #e53238 !important; }
.box-shadow-facebook .hover-icon:after  { box-shadow: 0 0 0 4px #3b5998 !important; }
.box-shadow-twitter .hover-icon:after  { box-shadow: 0 0 0 4px #55acee !important; }
.box-shadow-github .hover-icon:after  { box-shadow: 0 0 0 4px #4183c4 !important; }
.box-shadow-googleplay .hover-icon:after  { box-shadow: 0 0 0 4px #0f9d58 !important; }
.box-shadow-itunes .hover-icon:after  { box-shadow: 0 0 0 4px #4285f4 !important; }
.box-shadow-plurk .hover-icon:after  { box-shadow: 0 0 0 4px #7db701 !important; }
.box-shadow-songkick .hover-icon:after  { box-shadow: 0 0 0 4px #f80046 !important; }
.box-shadow-lastfm .hover-icon:after  { box-shadow: 0 0 0 4px #d51007 !important; }
.box-shadow-gmail .hover-icon:after  { box-shadow: 0 0 0 4px #db3a1b !important; }
.box-shadow-pinboard .hover-icon:after  { box-shadow: 0 0 0 4px #0000e6 !important; }
.box-shadow-openid .hover-icon:after  { box-shadow: 0 0 0 4px #616365 !important; }
.box-shadow-quora .hover-icon:after  { box-shadow: 0 0 0 4px #a82400 !important; }
.box-shadow-soundcloud .hover-icon:after  { box-shadow: 0 0 0 4px #ff3300 !important; }
.box-shadow-tumblr .hover-icon:after  { box-shadow: 0 0 0 4px #35465c !important; }
.box-shadow-eventasaurus .hover-icon:after  { box-shadow: 0 0 0 4px #eb5a46 !important; }
.box-shadow-wordpress .hover-icon:after  { box-shadow: 0 0 0 4px #21759b !important; }
.box-shadow-yelp .hover-icon:after  { box-shadow: 0 0 0 4px #af0606 !important; }
.box-shadow-intensedebate .hover-icon:after  { box-shadow: 0 0 0 4px #2b96f1 !important; }
.box-shadow-eventbrite .hover-icon:after  { box-shadow: 0 0 0 4px #34495e !important; }
.box-shadow-scribd .hover-icon:after  { box-shadow: 0 0 0 4px #1a7bba !important; }
.box-shadow-posterous .hover-icon:after  { box-shadow: 0 0 0 4px #96bf48 !important; }
.box-shadow-stripe .hover-icon:after  { box-shadow: 0 0 0 4px #00afe1 !important; }
.box-shadow-opentable .hover-icon:after  { box-shadow: 0 0 0 4px #eb4924 !important; }
.box-shadow-cart .hover-icon:after  { box-shadow: 0 0 0 4px #e74a1e !important; }
.box-shadow-print .hover-icon:after  { box-shadow: 0 0 0 4px #e74a1e !important; }
.box-shadow-angellist .hover-icon:after  { box-shadow: 0 0 0 4px #f97200 !important; }
.box-shadow-dwolla .hover-icon:after  { box-shadow: 0 0 0 4px #828a87 !important; }
.box-shadow-appnet .hover-icon:after  { box-shadow: 0 0 0 4px #00afe1 !important; }
.box-shadow-statusnet .hover-icon:after  { box-shadow: 0 0 0 4px #595a5c !important; }
.box-shadow-acrobat .hover-icon:after  { box-shadow: 0 0 0 4px #e74635 !important; }
.box-shadow-drupal .hover-icon:after  { box-shadow: 0 0 0 4px #0077c0 !important; }
.box-shadow-buffer .hover-icon:after  { box-shadow: 0 0 0 4px #76b852 !important; }
.box-shadow-pocket .hover-icon:after  { box-shadow: 0 0 0 4px #d3505a !important; }
.box-shadow-bitbucket .hover-icon:after  { box-shadow: 0 0 0 4px #205081 !important; }
.box-shadow-lego .hover-icon:after  { box-shadow: 0 0 0 4px #61b3de !important; }
.box-shadow-login .hover-icon:after  { box-shadow: 0 0 0 4px #e74a1e !important; }
.box-shadow-stackoverflow .hover-icon:after  { box-shadow: 0 0 0 4px #fe7a15 !important; }
.box-shadow-hackernews .hover-icon:after  { box-shadow: 0 0 0 4px #2ebd59 !important; }
.box-shadow-lkdto .hover-icon:after  { box-shadow: 0 0 0 4px #595a5c !important; }


/* -07-  [ Heights ]----------Lioit-------------------------------*/

/*	- Box Heights

-------------------------------------Lioit------------------------*/
.height-0 {
    height: 0px !important;
}
.height-10 {
    height: 10px !important;
}
.height-20 {
    height: 20px !important;
}
.height-30 {
    height: 30px !important;
}
.height-40 {
    height: 40px !important;
}
.height-50 {
    height: 50px !important;
}
.height-60 {
    height: 60px !important;
}
.height-70 {
    height: 70px !important;
}
.height-80 {
    height: 80px !important;
}
.height-90 {
    height: 90px !important;
}
.height-100 {
    height: 100px !important;
}
.height-200 {
    height: 200px !important;
}
.height-300 {
    height: 300px !important;
}
.height-400 {
    height: 400px !important;
}
.height-500 {
    height: 500px !important;
}
.height-600 {
    height: 600px !important;
}
.height-700 {
    height: 700px !important;
}
.height-800 {
    height: 800px !important;
}
.height-900 {
    height: 900px !important;
}
.height-1000 {
    height: 1000px !important;
}

/* -08-  [ Public Colos ]----------Lioit------------------------*/

/*	- White Colors
    - Dark Colors

-------------------------------------Lioit------------------------*/

.white,
body .white,
body .white h1,
body .white h2,
body .white h3,
body .white h4,
body .white h5,
body .white h6,
body .white p,
body .white i,
body .white a
{ color: #fff !important; }

.black,
body .black,
body .black h1,
body .black h2,
body .black h3,
body .black h4,
body .black h5,
body .black h6,
body .black p
{ color: #000 !important; }
.gray,
body .gray,
body .gray h1,
body .gray h2,
body .gray h3,
body .gray h4,
body .gray h5,
body .gray h6,
body .gray p,
body .gray i,
body .gray a
{ color: #8d8f92 !important; }


.gray-light,
body .gray-light,
body .gray-light h1,
body .gray-light h2,
body .gray-light h3,
body .gray-light h4,
body .gray-light h5,
body .gray-light h6,
body .gray-light p,
body .gray-light i,
body .gray-light a
{ color: #cacaca !important; }



.color,
body .color,
body .color h1,
body .color h2,
body .color h3,
body .color h4,
body .color h5,
body .color h6,
body .color p,
body .color i,
body .color a
{ color: #28a8d3 !important; }


/* -09-  [ Forms ]----------Lioit------------------------*/

/*	- Panel Style
    - Form Tips
    - Basic Form Styles
    - Form Control
    - Inputs Styles
    - Radio, Checkbox
    - Form Group

-------------------------------------Lioit------------------------*/

/* ------ [ Panel Style ] ------Lioit------*/
.well {
    min-height:20px;
    margin-bottom:20px;
    background-color:#f5f5f5;
    border:1px solid #e3e3e3;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
    padding:20px;
}
.well blockquote {
    border-color:rgba(0,0,0,.15);
}
.well-lg {
    border-radius:3px;
    padding:20px;
}
.panel-group {
    margin-bottom: 18px;
}
.panel-group .panel-heading {
    padding: 13px 18px 10px 22px;
}
.panel-group .panel-heading.collapsed {
    background-color: #fff;
}
.panel-group .panel-heading+.panel-collapse .panel-body {
    border: 0;
}
.panel-group .panel-heading .panel-title {
    width: 100%;
}
.panel-group .panel-heading .panel-title>a {
    color: #626262;
    font-size: 13px;
    font-weight: normal;
    display: block;
    opacity: 1;
}
.panel-group .panel-heading .panel-title>a:hover {
    color: #626262!important;
}
.panel-group .panel-heading .panel-title>a:hover:after {
    color: #626262!important;
}
.panel-group .panel-heading .panel-title>a:after {
    font-family: 'FontAwesome';
    content: "\f056";
    position: absolute;
    right: 13px;
    top: 36%;
    color: #626262;
}
.panel-group .panel-heading .panel-title>a.collapsed {
    color: rgba(98,98,98,0.7);
    opacity: 1;
}
.panel-group .panel-heading .panel-title>a.collapsed:after {
    content: "\f055";
    color: rgba(98,98,98,0.7);
}
.panel-group .panel+.panel {
    margin-top: 2px;
}
.panel-group .panel .panel-body {
    height: auto;
}
.nav-pills>li>a {
    border-radius: 0;
    color: #626262;
}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus {
    color: #626262;
    background-color: #e6e6e6;
}
@media (max-width: 767px) {
    .nav.nav-tabs.nav-stack-sm li {
        float: none;
    }

    .nav.nav-tabs.nav-stack-sm.nav-tabs-linetriangle>li.active>a:after,.nav.nav-tabs.nav-stack-sm.nav-tabs-linetriangle>li.active>a:before {
        display: none;
    }
}
/* ------ [ Form Tips ] ------Lioit------*/
.form-tip {
    font-size: 13px !important;
}
/* ------ [ Basic Form Styles ] ------Lioit------*/
label,input,button,select,textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}
input[type="radio"],input[type="checkbox"] {
    margin-top: 1px 0 0;
    line-height: normal;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select[multiple],select[size] {
    height: auto!important;
}

input:focus,select:focus,textarea:focus,input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

form legend {
    margin: 15px 0px 10px 0px;
}
/* ------ [ Form Control ] ------Lioit------*/
.form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid rgba(0,0,0,0.07);
    font-family: Arial,sans-serif;
    -webkit-appearance: none;
    color: #2c2c2c;
    outline: 0;
    height: 35px;
    padding: 9px 12px;
    line-height: normal;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
    min-height: 35px;
    -webkit-transition: all 0.12s ease;
    transition: all 0.12s ease;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: background 0.2s linear 0s;
    transition: background 0.2s linear 0s;
}
.form-control:focus {
    border-color: rgba(0,0,0,0.1);
    background-color: #f0f0f0;
    outline: 0!important;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control:focus::-moz-placeholder {
    color: inherit;
    opacity: 0.7;
}
.form-control:focus:-ms-input-placeholder {
    color: inherit;
    opacity: 0.7;
}
.form-control:focus::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.7;
}
.form-control::-moz-placeholder {
    color: inherit;
    opacity: 0.33;
}
.form-control:-ms-input-placeholder {
    color: inherit;
    opacity: 0.33;
}
.form-control::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.33;
}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
    background: #f8f8f8;
    color: rgba(98,98,98,0.23);
}
/* ------ [ Inputs Styles ] ------Lioit------*/
.md-label {
  display: block;
  font-size: 14px;
  transform: translateY(25px);
  transition: all 0.5s;
  padding-left: 4px;
}

.md-input {
  position: relative;
  background: transparent;
  width: 100%;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 16px;
  resize: none;
  font-weight: bold;
}

.md-div {
  padding: 0;
  position: relative;
  transition: all 0.5s;
}

.md-div:after,
.md-div:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.09);
  bottom: 0;
  left: 0;
  transition: all 0.5s;
}

.md-div::after {
  background-color: #fff;
  transform: scaleX(0);
}
.is-active, .is-completed {
  padding: 15px 0 0 0;
}
.is-active::after {
  transform: scaleX(1);
}

.is-active .md-label {
}

.is-completed .md-label {
  font-size: 12px;
  transform: translateY(0);
  padding:0;
}

.input-sm,.form-horizontal .form-group-sm .form-control {
    font-size: 13px;
    min-height: 32px;
    height: 32px;
    padding: 8px 9px;
}
.input-lg,.form-horizontal .form-group-lg .form-control {
    border-radius: 3px;
    font-size: 18px;
    height: 45px;
    padding: 11px 13px;
}
.input-lg {
    font-size: 15px !important;
}
.input-xlg {
    height: 51px;
    font-size: 18px;
    line-height: 22px;
}
/* ------ [ Radio, Checkbox ] ------Lioit------*/
.radio,.checkbox {
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 0px;
}
.radio label,.checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px!important;
    margin-right: 15px;
    font-size: 13px;
}
.radio label:before,.checkbox label:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    position: absolute;
    left: 0px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
}
.radio label {
    margin-bottom: 6px;
}
.radio label:before {
    bottom: 2.5px;
    border-radius: 99px;
    -webkit-transition: border 0.3s 0s cubic-bezier(0.455,0.03,0.215,1.33);
    transition: border 0.3s 0s cubic-bezier(0.455,0.03,0.215,1.33);
}
.radio input[type=radio]:checked+label:before {
    border-width: 5px;
}
.radio input[type=radio] {
    display: none;
}
.radio input[type=radio][disabled]+label {
    opacity: 0.65;
}
.radio.radio-success input[type=radio]:checked+label:before {
    border-color: #10cfbd;
}
.radio.radio-primary input[type=radio]:checked+label:before {
    border-color: #6d5cae;
}
.radio.radio-info input[type=radio]:checked+label:before {
    border-color: #3b4752;
}
.radio.radio-warning input[type=radio]:checked+label:before {
    border-color: #f8d053;
}
.radio.radio-danger input[type=radio]:checked+label:before {
    border-color: #f55753;
}
.radio.radio-complete input[type=radio]:checked+label:before {
    border-color: #48b0f7;
}
.checkbox input[type=radio][disabled]+label:after {
    background-color: #e6e6e6;
}
.checkbox label {
    transition: border 0.2s linear 0s,color 0.2s linear 0s;
    white-space: nowrap;
}
.checkbox label:before {
    top: 2px;
    border-radius: 3px;
    transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
.checkbox label::after {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 1.2px;
    top: 0px;
    font-size: 11px;
    transition: border 0.2s linear 0s,color 0.2s linear 0s;
}
.checkbox label:after {
    border-radius: 3px;
}

.checkbox input[type=checkbox] {
    display: none;
}
.checkbox.checkbox-circle label:after {
    border-radius: 99px;
}
.checkbox.checkbox-circle label:before {
    border-radius: 99px;
}
.checkbox input[type=checkbox]:checked+label:before {
    border-width: 8px;
}
.checkbox input[type=checkbox]:checked+label::after {
    font-family: 'FontAwesome';
    content: "\F00C";
    color: #fff;
}
.checkbox input[type=checkbox][disabled]+label {
    opacity: 0.65;
}
.checkbox input[type=checkbox][disabled]+label:before {
    background-color: #eceff3;
}
.checkbox.right label {
    margin-right: 35px;
    padding-left: 0!important;
}
.checkbox.right label:before {
    right: -35px;
    left: auto;
}
.checkbox.right input[type=checkbox]:checked+label {
    position: relative;
}
.checkbox.right input[type=checkbox]:checked+label::after {
    font-family: 'FontAwesome';
    content: "\F00C";
    position: absolute;
    right: -27px;
    left: auto;
}
.checkbox.check-success input[type=checkbox]:checked+label:before {
    border-color: #10cfbd;
}
.checkbox.check-primary input[type=checkbox]:checked+label:before {
    border-color: #6d5cae;
}
.checkbox.check-complete input[type=checkbox]:checked+label:before {
    border-color: #48b0f7;
}
.checkbox.check-warning input[type=checkbox]:checked+label:before {
    border-color: #f8d053;
}
.checkbox.check-danger input[type=checkbox]:checked+label:before {
    border-color: #f55753;
}
.checkbox.check-info input[type=checkbox]:checked+label:before {
    border-color: #3b4752;
}
.checkbox.check-success input[type=checkbox]:checked+label::after,.checkbox.check-primary input[type=checkbox]:checked+label::after,.checkbox.check-complete input[type=checkbox]:checked+label::after,.checkbox.check-warning input[type=checkbox]:checked+label::after,.checkbox.check-danger input[type=checkbox]:checked+label::after,.checkbox.check-info input[type=checkbox]:checked+label::after {
    color: #ffffff;
}
.input-group.transparent .input-group-addon {
    background-color: transparent;
    border-color: rgba(0,0,0,0.07);
}

@media only screen and (min-width: 768px) {
    form .row {
        margin-left: 0;
        margin-right: 0;
    }

    form .row [class*='col-']:not(:first-child),form .row [class*='col-']:not(:last-child) {
        padding-right: 7px;
        padding-left: 7px;
    }

    form .row [class*='col-']:first-child {
        padding-left: 0;
    }

    form .row [class*='col-']:last-child {
        padding-right: 0;
    }
}
/* ------ [ Form Group ] ------Lioit------*/
.form-horizontal .form-group {
    border-bottom: 1px solid #e6e6e6;
    padding-top: 19px;
    padding-bottom: 19px;
    margin-bottom: 0;
}

.form-horizontal .form-group:last-child {
    border-bottom: none;
}

.form-horizontal .form-group:hover .control-label {
    opacity: .6;
}

.form-horizontal .form-group.focused .control-label {
    opacity: 1;
}

.form-horizontal .form-group .control-label {
    text-align: left;
    opacity: .42;
    -webkit-transition: opacity ease 0.3s;
    transition: opacity ease 0.3s;
}

.form-group-attached .form-group.form-group-default {
    border-radius: 0;
    margin-bottom: 0;
}

.form-group-attached>div {
    margin: 0;
}

.form-group-attached>div:first-child.row>[class*='col-']:first-child .form-group-default {
    border-top-left-radius: 2px;
}

.form-group-attached>div:first-child.row>[class*='col-']:last-child .form-group-default {
    border-top-right-radius: 2px;
}

.form-group-attached>div:first-child.form-group-default {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.form-group-attached>div:last-child.row>[class*='col-']:first-child .form-group-default {
    border-bottom-left-radius: 2px;
}

.form-group-attached>div:last-child.row>[class*='col-']:last-child .form-group-default {
    border-bottom-right-radius: 2px;
}

.form-group-attached>div:last-child.form-group-default {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.form-group-attached>div.row>[class*='col-'] {
    padding-right: 0!important;
    padding-left: 0!important;
}

.form-group-attached>div.row>[class*='col-']>.form-group-default {
    display: table;
    width: 100%;
}

.form-group-attached>div.row>[class*='col-']:not(:only-child):not(:last-child)>.form-group-default {
    border-right-color: transparent;
}

.form-group-attached>div:not(:last-child) .form-group-default,.form-group-attached>div:not(:last-child).form-group-default {
    border-bottom-color: transparent;
}

@media (max-width: 767px) {
    .form-group-attached .form-group-default {
        border-right-color: rgba(0,0,0,0.07)!important;
    }
}

@media only screen and (min-width: 768px) {
    .form-group-attached>div.row {
        display: table;
        width: 100%;
    }

    .form-group-attached>div.row>[class*='col-'] {
        display: table-cell;
        height: 100%;
        float: none;
        vertical-align: top;
    }

    .form-group-attached>div.row>[class*='col-'] .form-group {
        height: 100%;
        width: 100%;
    }
}

.form-group {
    margin-bottom: 10px;
}

.form-group label:not(.error) {
    font-family: 'Montserrat';
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}

.form-group label .help {
    margin-left: 8px;
}

.form-group .help {
    font-size: 12px;
    color: rgba(98,98,98,0.55);
}

.form-group-default {
    background-color: #fff;
    position: relative;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 2px;
    padding-top: 7px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
    overflow: hidden;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.form-group-default.required:after {
    color: #f55753;
    content: "*";
    font-family: arial;
    font-size: 20px;
    position: absolute;
    right: 15px;
    top: 9px;
}

.form-group-default.disabled {
    background: #f8f8f8;
    color: rgba(98,98,98,0.23);
}

.form-group-default.disabled input {
    opacity: .6;
}

.form-group-default.disabled.focused {
    background: #f8f8f8;
}

.form-group-default.disabled.focused label {
    opacity: 1;
}

.form-group-default.focused {
    border-color: rgba(0,0,0,0.1)!important;
    background-color: #f0f0f0;
}

.form-group-default.focused label {
    opacity: .4;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.form-group-default.has-error {
    background-color: rgba(245,87,83,0.1);
}

.form-group-default.has-success .form-control-feedback,.form-group-default.has-error .form-control-feedback {
    display: none!important;
}

.form-group-default.has-success .form-control,.form-group-default.has-success .form-control:focus,.form-group-default.has-error .form-control,.form-group-default.has-error .form-control:focus {
    border: none;
    box-shadow: none;
}

.form-group-default.input-group {
    padding: 0;
}

.form-group-default.input-group>label {
    margin-top: 6px;
    padding-left: 12px;
}

.form-group-default.input-group>.form-control {
    margin-top: -2px;
    margin-bottom: 3px;
    padding-left: 12px;
}

.form-group-default.input-group .input-group-addon {
    height: calc(50px);
    min-width: calc(50px);
    border-radius: 0;
    border: none;
}

.form-group-default.input-group.focused .input-group-addon {
    border-color: rgba(0,0,0,0.1);
}

.form-group-default.input-group-attached {
    position: relative;
}

.form-group-default.input-group-attached .input-group-btn {
    right: -1%;
}

.form-group-default.input-group-attached .input-group-btn>.btn {
    position: absolute;
    right: -100%;
    top: 0;
    height: 100%;
}

.form-group-default .form-control {
    border: none;
    height: 25px;
    min-height: 25px;
    padding: 0;
    margin-top: -4px;
    background: none;
}

.form-group-default .form-control.error {
    color: #2c2c2c;
}

.form-group-default .form-control:focus {
    background: none;
}

.form-group-default textarea.form-control {
    padding-top: 5px;
}

.form-group-default label {
    margin: 0;
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.form-group-default label.label-lg {
    font-size: 13px;
    left: 13px;
    top: 9px;
}

.form-group-default label.label-sm {
    font-size: 11px;
    left: 11px;
    top: 6px;
}

.form-group-default label.highlight {
    opacity: 1;
}

.form-group-default label.fade {
    opacity: .5;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.form-group-default>.input-lg {
    height: 29px;
    min-height: 29px;
    padding-left: 1px;
}

.form-group-default>.input-sm {
    min-height: 18px;
    height: 18px;
}

.form-group-default.form-group-default-select2 {
    padding: 0;
}

.form-group-default.form-group-default-select2>label {
    position: absolute;
    z-index: 10;
    padding: 7px 12px 0 12px;
}

.form-group-default.form-group-default-select2>label.label-lg {
    left: 0;
    top: 0;
}

.form-group-default.form-group-default-select2>label.label-sm {
    left: 0;
    top: 0;
}

.form-group-default.form-group-default-select2 .select2-container .select2-choice {
    padding-top: 20px;
    height: 52px;
}

.form-group-default.form-group-default-select2 .select2-container .select2-choice .select2-arrow b:before {
    top: 20px;
}

.form-group-default.form-group-default-select2 .select2-container .select2-choice .select2-chosen {
    padding-left: 3px;
    padding-top: 1px;
}

.form-group-default.form-group-default-select2 .select2-container .select2-choices {
    padding-top: 20px;
    height: 52px;
    border: 0px;
}

.form-group-default.form-group-default-select2>.input-lg {
    height: auto;
    padding: 0;
}

.form-group-default.form-group-default-select2>.input-lg .select2-choice {
    padding-top: 20px;
    height: 56px;
}

.form-group-default.form-group-default-select2>.input-sm {
    height: auto;
    padding: 0;
}

.form-group-default.form-group-default-select2>.input-sm .select2-choice {
    padding-top: 20px;
    height: 46px;
}

.form-group-default.form-group-default-selectFx {
    padding: 0;
}

.form-group-default.form-group-default-selectFx>label {
    position: absolute;
    z-index: 10;
    padding: 7px 12px 0 12px;
}

.form-group-default.form-group-default-selectFx>label.label-lg {
    left: 0;
    top: 0;
}

.form-group-default.form-group-default-selectFx>label.label-sm {
    left: 0;
    top: 0;
}

.form-group-default.form-group-default-selectFx .cs-wrapper .cs-placeholder {
    padding-top: 28px;
    height: 52px;
    padding-left: 12px;
}

.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select {
    height: auto;
}

.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select>span:after,.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select .cs-selected span:after {
    top: 39px;
}

.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select.input-lg .cs-placeholder {
    height: 60px;
}

.form-group-default.form-group-default-selectFx .cs-wrapper .cs-select.input-sm .cs-placeholder {
    height: 50px;
}

.form-group-default.form-group-default-selectFx .cs-wrapper .dropdown-placeholder {
    vertical-align: top;
}
/* -10-  [ Top Bar ]----------Lioit------------------------*/

/*	- Tob bar
    - Top Social Icons
    - Top Links
    - Top bar Dark Style

-------------------------------------Lioit------------------------*/

.top-bar{
    min-height: 40px;
    background: #fbfbfb;
    border-bottom: 1px solid rgba(0,0,0, .05);
    font-size: 12px;
}

/*
 * Top links
 */

.top-links{
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}
.top-links li{
    float: left;
    border-left: 1px solid rgba(0,0,0, .05);
}
.top-links li:last-child{
    border-right: 1px solid rgba(0,0,0, .05);
}
.top-links li .fa{
    font-size: 14px;
    position: relative;
    top: 1px;
}
.top-links li .tooltip{
    text-transform: none;
    letter-spacing: normal;
    z-index: 2003;

}
.top-links li a{
    display: block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-decoration: none;
    text-align: center;
    color: #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.top-links li a:hover{
    color: #555;
    background-color: rgba(0,0,0, .02);
}

/*
 * Top bar dark
 */

.top-bar.bg-dark{
    border-bottom: none;
}
.top-bar.bg-dark .top-links li,
.top-bar.bg-dark .top-links li:last-child{
    border-color: rgba(255,255,255, .07);
}
.top-bar.bg-dark .top-links li a{
    color: #aaa;
}
.top-bar.bg-dark .top-links li a:hover{
    color: #ccc;
    background-color: rgba(255,255,255, .05);
}

/* -11-  [ Header ]----------Lioit------------------------*/

/*	- Logo Wrap, Float None Logo, Small Logo
    - Main Navigation
    - Mobile nav
    - Mini Naviagtion
    - Side Header Navigation
        - Side Header Navigation - Responsive Menu
        - Side Header Navigation - Logo
        - Side Header Navigation - Menu
        - Side Header Navigation - Social Links
        - Side Header Navigation - Navigation
    - Overlay Header
    - Search Options
    - Heading Title's

-------------------------------------Lioit------------------------*/

/* ------ [ Logo ] ------Lioit------*/
.nav-logo-wrap{
    float: left;
    margin-right: 20px;
}
.nav-logo-wrap .logo-container{
    display: table-cell;
    vertical-align: middle;
    width: 160px;
    height: 150px;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
/* ------ [ Float Logo ] ------Lioit------*/
.float-none.nav-logo-wrap .logo-container{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: block;
    padding-top: 30px;
}
.nav-logo-wrap .logo img{}
.nav-logo-wrap .logo:before,
.nav-logo-wrap .logo:after{display: none;}
.nav-logo-wrap .logo {
    display: inline-block;
    float: left;
}
.nav-logo-wrap .more-about-icon {
    float: right;
    color: #fff;
    font-size: 40px;
    line-height: 0px;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.nav-logo-wrap .more-about-icon:hover {
    color: rgba(255,255,255,.5);
}
.logo,
a.logo:hover{
    font-family: Montserrat, arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;
    color: rgba(0,0,0, .9);
}
/* ------ [ Main Nabigation ] ------Lioit------*/
.main-nav{
    width: 100%;
    height: 150px !important;
    position: relative;
    top: 0;
    left: 0;
    text-align: left;
    background: rgba(255,255,255, .97);
    z-index: 9999999;
    -webkit-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    font-family: 'Montserrat';
}
.bg-white  a,
.bg-white i,
.bg-white {
    color: #333;
}

.bg-white .owl-prev,
.bg-white .owl-next {
    background: rgba(0,0,0,.06);
}
.bg-white .owl-prev .fa, .bg-white .owl-next .fa  {
    color: #92979b;
}
.main-nav.bg-white {
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.05);
    box-shadow:  0 1px 0 rgba(0,0,0,.05);
}
.bg-white .mn-sub a,
.bg-white .mn-sub i,
.bg-white  {

}
/* ------ [ Header Small ] ------Lioit------*/
.small-height{
    height: 60px !important;
    border-bottom: none !important;
  	
}
.small-height .btn{
    margin-top: 13px !important;
}
.small-height .showsearch {
    height: 60px;
  	line-height: 60px;
}
.small-height .inner-nav ul li a{
    height: 60px !important;
    line-height: 60px !important;
    font-size: 14px;
}
.small-height .logo-container{
    height: 60px !important;
    line-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
.small-height .logo img {
    width: 60%;
    margin-top: 4px;
}
.small-height .more-about-icon {
    line-height: 60px;
    height: 60px !important;
}
/* ------ [ Inner Navigation ] ------Lioit------*/
.inner-nav{
    display: inline-block;
    float: right;
    z-index: 99999999 !important;
}
.inner-nav ul{
    float: right;
    margin: auto;
    font-size: 11px;
    text-transform: capitalize;
    text-align: center;
    line-height: 1.3;
}
.inner-nav ul.uppercase a{
    text-transform: uppercase;
}
.inner-nav ul  li{
    float: left;
    margin-left: 30px;
    position: relative;
}
.inner-nav ul li a, .side-nav-btn a{
    font-size: 15px;
    color: #313035;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    cursor: pointer;
}
.inner-nav ul > li:first-child > a{

}
.inner-nav ul li a i {
    margin-left: 10px;
    font-size: 13px;
}
.inner-nav ul li a:hover,
.inner-nav ul li a.active{
    color: #000;
    text-decoration: none;
}

.inner-nav ul li.current_page_item a {
    border-bottom: 1px solid #fff;
    color: #fff;
}

/* ------ [ Category Navigation ] ------Lioit------*/
.cat-navigation {
    height: 60px !important;
}
.cat-navigation .inner-nav{
    display: inline-block;
    position: relative;
    float: none;
}
.cat-navigation .inner-nav ul li {
    float: left;
    margin-right: 40px;
    margin-left: 0px;
}
.cat-navigation.main-nav .inner-nav ul li a {
    line-height: 60px !important;
    height: 60px !important;
}

.cat-navigation.main-nav .inner-nav ul li .mn-sub li a{
    line-height: 1.5 !important;
    height: auto !important;
}
/* ------ [ Description Navigation ] ------Lioit------*/
.main-nav.nav-tiny {
    height: 98px!important;
    border-bottom: none !important;
}
.nav-tiny .nav-logo-wrap .logo-container,
.nav-tiny .showsearch {
    line-height: 98px !important;
    height: 98px !important;
}
.main-nav.nav-tiny.mini-nav .inner-nav ul li ul {
    top: 75px !important;
}
.nav-tiny .inner-nav ul li a  {
    line-height: 75px !important;
    height: 75px !important;
    font-size: 15px !important;
    font-weight: 400px !important;
    text-align: left;
    opacity: 0.9 !important;
}
.nav-tiny .inner-nav ul li a:hover {
    border: none !important;
}
.nav-tiny .inner-nav .item-desc {
    display: block;
    font-size: 12px !important ;
    font-weight: 400 !important;
    line-height: 0px !important;
    margin-top: -15px;
    color: inherit !important;
    opacity: 0.7 !important;
}
.main-nav.nav-tiny.mini-nav {
    height: 60px!important;
}
.main-nav.nav-tiny.mini-nav .nav-logo-wrap .logo-container{
    line-height: 60px !important;
    height: 60px !important;
}
.main-nav.nav-tiny.mini-nav .showsearch {
    line-height: 55px !important;
    height: 55px !important;
}
.main-nav.nav-tiny.mini-nav .inner-nav ul li ul {
    top: 60px !important;
}
.main-nav.nav-tiny.mini-nav .inner-nav ul li a  {
    line-height: 42px !important;
    height: 60px !important;
    font-size: 13px !important;
    font-weight: 400px !important;
}
.main-nav.nav-tiny .inner-nav ul li .mn-sub li a {
    line-height: 1.8 !important;
    height: auto !important;
    padding: 10px 15px !important;
}
.main-nav.nav-tiny.mini-nav .inner-nav .item-desc {
    margin-top: -6px;
    font-size: 11px;
}
/* ------ [ Description Navigation Small ] ------Lioit------*/
.main-nav.nav-tiny.small-height {
    height: 58px!important;
}
.main-nav.nav-tiny.small-height .logo img {
    margin: 0px;
}
.nav-tiny.small-height .nav-logo-wrap .logo-container,
.nav-tiny.small-height .showsearch {
    line-height: 55px !important;
    height: 55px !important;
}
.nav-tiny.small-height .inner-nav ul li a  {
    line-height: 38px !important;
    height: 38px !important;
}
.nav-tiny.small-height .inner-nav .item-desc {
    margin-top: 0px;
}
.main-nav.nav-tiny.mini-nav.small-height {
    height: 60px!important;
}
.main-nav.nav-tiny.mini-nav.small-height .nav-logo-wrap .logo-container,
.main-nav.nav-tiny.mini-nav.small-height .showsearch {
    line-height: 55px !important;
    height: 55px !important;
}
.main-nav.nav-tiny.mini-nav.small-height .logo img {
    margin: 0px;
}
.main-nav.nav-tiny.mini-nav.small-height .inner-nav ul li a  {
    line-height: 42px !important;
    height: 45px !important;
}
.main-nav.nav-tiny.mini-nav.small-height .inner-nav .item-desc {
    margin-top: -7px !important;
}
/* ------ [ Tigher Overlay Button ] ------Lioit------*/
#trigger-overlay {
    cursor: pointer;
}
/* ------ [ Centered Navigation] ------Lioit------*/
.centered-nav {
    line-height: normal !important;
    height: auto !important;
}
.centered-nav .inner-nav {
    width: 100% !important;
    float: none !important;
    text-align: center;
}
.centered-nav .inner-nav ul {
    float: none !important;
}
.centered-nav .inner-nav li {
    display: inline-block !important;
    float: none;
    margin-left: 30px;
    margin-right: 30px;
}
.centered-nav .inner-nav li a {
    line-height: normal !important;
    height: auto !important;
}
/* ------ [ Sub Menu ] ------Lioit------*/
.mn-sub{
    display: none;
    width: 220px;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    background: rgba(0, 0, 0, .90);
}
.mn-sub li{
    display: block;
    width: 100%;
    margin: 0 !important;
}
.inner-nav ul li .mn-sub li a{
    display: block;
    width: 100%;
    height: auto !important;
    line-height: 1.8 !important;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    border-left: none;
    border-right: none;
    letter-spacing: 0;
    color: #f5f5f5 !important;
    cursor: pointer;
}
.inner-nav ul li .mn-sub li h5{
    display: block;
    width: 100%;
    height: auto !important;
    line-height: 1.8 !important;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    border-left: none;
    border-right: none;
    letter-spacing: 0;
    color: #f5f5f5 !important;
    cursor: pointer;
}
.bg-white .inner-nav ul li .mn-sub li a i  {
    color: #fff !important;
}
.mobile-on .mn-has-multi > li:last-child > a{
    border-bottom: 1px solid rgba(255,255,255, .065) !important;
}
.mn-sub li a:hover,
.inner-nav ul li .mn-sub li a:hover,
.mn-sub li a.active{
    background: rgba(255,255,255, .09);
    color: #f5f5f5 !important;
}

.mn-sub li ul{
    left: 100%;
    right: auto;
    top: 0;
}
.inner-nav > ul > li:last-child .mn-sub,
.inner-nav li .mn-sub.to-left{
    left: auto;
    right: 0;
}
.inner-nav li:last-child .mn-sub li ul,
.inner-nav li .mn-sub li ul.to-left{
    left: auto;
    right: 100%;
    top: 0;
    border-left: none;
}
.mobile-on .inner-nav li:last-child .mn-sub li ul{
    left: auto;
    right: auto;
    top: 0;
}
.mn-wrap{
    padding: 8px;
}
/* ------ [ Sub Menu Multi ] ------Lioit------*/
.mn-has-multi{
    width: auto !important;
    padding: 10px;
    text-align: left;
    white-space: nowrap;
}
.mn-sub-multi{
    width: 185px !important;
    overflow: hidden;
    white-space: normal;
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
}
/* ------ [ Mega Menu ] ------Lioit------*/
.liomenu .nav,
.liomenu .dropup,
.liomenu .dropdown,
.liomenu .collapse {
    position: static
}
.liomenu .navbar-inner,
.liomenu .container {
    position: relative
}
.liomenu .dropdown-mega {
    left: auto
}
.liomenu .dropdown-mega > li {
    display: block
}
.liomenu .nav.pull-right .dropdown-mega {
    right: 0
}
.liomenu .liomenu-content {
    padding: 20px;
    *zoom: 1;
    color: #cacaca;
}
.liomenu .liomenu-content ul {
	padding: 0px !important;
	margin: 0px !important;
}
.liomenu .liomenu-content:before,
.liomenu .liomenu-content:after {
    display: table;
    content: "";
    line-height: 0;
}
.liomenu .liomenu-content:after {
    clear: both
}
.liomenu.navbar .nav > li > .dropdown-mega:after,
.liomenu.navbar .nav > li > .dropdown-mega:before {
    display: none
}
.liomenu .liomenu-content img {
    width: 100%
}
.liomenu .liomenu-content a {
    color: #cacaca
}
.liomenu .liomenu-content h1,
.liomenu .liomenu-content h2,
.liomenu .liomenu-content h3,
.liomenu .liomenu-content h4,
.liomenu .liomenu-content h5,
.liomenu .liomenu-content h6 {
    color: #FFF
}
.liomenu .liomenu-content h4 {
    margin-bottom: 15px
}
.liomenu .liomenu-content ul.circled li:before {
    color: #cacaca
}
.liomenu .liomenu-content a:hover {
    color: #3f8dbf
}
.liomenu .dropdown.liomenu-fullwidth .dropdown-mega {
    width: 100% !important;
    left: 0 !important;
    right: 0 !!important;
}

/* ------ [ Full Navigation Mega Menu ] ------Lioit------*/
.full-nav .mn-has-mega {
}
.full-nav .mn-has-multi {
}
.full-nav .mn-sub-multi{
    width: 220px !important;
}
.mn-sub-multi > ul{
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;
}


.back-button {
	position: absolute;
	top: 0px;
	left: 20px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 100px;
	height: 100px;
}
.small-height .back-button {
	line-height: 60px;
	height: 60px;
}
/* ------ [ Mobile Menu ] ------Lioit------*/
.mn-group-title{
    font-weight: 700;
    text-transform: uppercase;
    color: #fff !important;
}
.mn-group-title:hover{
    background: none !important;
}
.mobile-on .mn-sub-multi > ul{
    left: auto;
    right: auto;
    border: none;
}
.mobile-on .mn-sub-multi{
    display: block;
    width: 100% !important;
}
.mobile-on .mn-sub-multi > ul > li:last-child > a{
    border: none !important;
}
.mobile-on .mn-sub > li:last-child > a{
    border: none !important;
}
.mobile-on .mn-sub-multi:last-child > ul{
    border-bottom: none !important;
}
.mobile-on .desktop-nav{
    display: none;
    width: 120%;
    position: absolute;
    top: 100%;
    left: -10px;
    padding: 0 25px;

    z-index: 100;
}
.mobile-on .full-wrapper .desktop-nav{
    padding: 0;
}
.mobile-on .desktop-nav ul{
    width: 120%;
    float: none;
    background: rgba( 0, 0, 0, .8);
    position: relative;
    overflow-x: hidden;
}
.mobile-on .desktop-nav > ul{
    overflow-y: auto;
}
.mobile-on .desktop-nav ul li{
    display: block;
    float: none !important;
    overflow: hidden;
}
.mobile-on .desktop-nav ul li ul{
    padding: 0;
    border-bottom: 1px solid rgba( 0, 0, 0, .3);
}
.mobile-on .desktop-nav ul li a{
    display: block;
    width: 120%;
    height: 50px !important;
    line-height: 45px !important;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 30px;
    text-align: left;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba( 0, 0, 0, .3);
    color: #f7f7f7;
    cursor: pointer;
}
.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active{
    background: rgba(255,255,255, .03);
    color: #ddd;
}
/* Mobile Menu sub */
.mobile-on .mn-has-sub > .fa{
    display: block;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 16px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -8px;
    text-align: center;
    border: 1px solid rgba(255,255,255, .1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.mobile-on .js-opened > .mn-has-sub > .fa{
    border-color: rgba(255,255,255, .4);
    line-height: 14px;
}
.mobile-on .inner-nav li{
    margin: 0 !important;
}
.mobile-on .mn-sub{
    display: none;
    opacity: 0;
    position: relative;
    left: 0 !important;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: none !important;
    border-right: none !important;
    border-top: none ;
    z-index: 10;
}
.mobile-on .mn-sub li{
    padding-left: 10px;
}
.inner-nav li.js-opened .mn-sub{
    opacity: 1;
}
.mobile-nav{
    display: none;
    float: right;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    border-left: 1px solid rgba(0,0,0, .05);
    border-right: 1px solid rgba(0,0,0, .05);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -webkit-transition-property: background, color;
    -moz-transition-property: background, color;
    -o-transition-property: background, color;
    transition-property:  background, color;
}
.mobile-nav:hover,
.mobile-nav.active{
    background: #fff;
    color: #777;
}
.mobile-nav:active{
    -webkit-box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
    -moz-box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
    box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
}
.no-js .mobile-nav{
    width: 55px;
    height: 55px;
}
.mobile-on .mobile-nav{
    display: table;
        -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.mobile-nav .fa{
   /* height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 21px;
  */
      height: 55%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 21px;
    top: 16px;
    position: relative;
}
.mobile-on .mn-has-multi{
    width: auto;
    padding: 0;
    text-align: left;
    white-space: normal;

}
.mobile-on .mn-sub{
    width: 100%;
    float: none;
    position: relative;
    overflow-x: hidden;

}
/* ------ [ Menu Active Item ] ------Lioit------*/
.inner-nav.active-alt ul > li > a{
    padding-right: 30px !important;
    padding-left: 30px !important;
    text-align: center;
}
.inner-nav.active-alt ul li {
    margin-left: 0px !important;
}
.inner-nav.active-alt ul > li > a:hover,
.inner-nav.active-alt ul > li > a.active{
    border-bottom: none !important;
    background: rgba(0, 0, 0, .09);
}

.inner-nav.active-alt-2 ul > li > a{
    text-align: center;
}
.inner-nav.active-alt-2 ul li {
}
.inner-nav.active-alt-2 ul > li > a:hover,
.inner-nav.active-alt-2 ul > li > a.active{
    border-bottom: 2px solid #28a8d3 !important;
}
/* ------ [ Dark Navigation ] ------Lioit------*/
.main-nav.dark{
    background-color: rgba(0,0,0, .90);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:  none;
}
.main-nav.dark.white-border{
    border-bottom: 1px solid rgba(255,255,255, .3);
    background-color: #1c2a58;
	z-index:10;
}
.main-nav.dark .mobile-nav{
    background-color: transparent;
    border-color: transparent;
    color: rgba(255,255,255, .9);
}
.main-nav.dark .mobile-nav:hover,
.main-nav.dark .mobile-nav.active{
    color: #fff;
}
.main-nav.mobile-on.dark .inner-nav{
    border-top: 1px solid rgba(100,100,100, .4);
}
.main-nav.dark .logo,
.main-nav.dark a.logo:hover{
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255, .9);
}
.main-nav.dark .mn-sub{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:  none;
}
/* ------ [ Transparent Navigation style ] ------Lioit------*/
.main-nav.transparent{
   /* background: transparent !important; */
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}
.main-nav.transparent.small-height{
    background: rgba(0,0,0,.8); !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}
.main-nav.transparent.border-none {
    border: none !important;
}
.main-nav.js-transparent{
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
/* ------ [ Navigation Wraped ] ------Lioit------*/
.main-nav.dark.wrapped{
    background: transparent !important;
}
.main-nav.js-transparent.dark.wrapped.small-height {
    background: rgba(0, 0, 0, 0.0) !important;
}
.main-nav.dark .inner-nav ul > li > a{
    color: #fdc80d;
}
.main-nav .inner-nav ul > li > a i {
    margin-right: 10px;
}
.main-nav.dark .inner-nav ul > li > a:hover,
.main-nav.dark .inner-nav ul > li > a.active{
    color: #fff;
}
.agency-v .main-nav.dark .inner-nav ul > li > a.active{
    border-bottom: 2px solid #fff;
    padding: auto 10px;
}
.agency-v .main-nav.dark.transparent.wrapped .inner-nav ul > li > a.active{	}
.agency-v .main-nav.dark .inner-nav ul > li ul li > a:hover {
    border-bottom: none;
}
.agency-v .main-nav.dark.active-alt .inner-nav ul > li > a:hover,
.agency-v .main-nav.dark.active-alt .inner-nav ul > li > a.active{
    border-bottom: none;
    border-top: 2px solid #fff;
    padding: auto 10px;
}
.agency-v .main-nav.dark.active-alt .inner-nav ul > li ul li > a:hover {
    border-top: none;
}
.main-nav.wrapped  {
    height: 100px !important;
}
.main-nav.wrapped  .full-wrapper {
    margin-top: 50px;
}
.main-nav.wrapped .container {
    width: 1140px;
    height: 100px !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

}
.main-nav.wrapped.small-height .container {
    margin-top: 20px;
}
.is-sticky .main-nav.wrapped {
    width: 100%;
}
.main-nav.wrapped .nav-btns a,
.main-nav.wrapped .showsearch {
  line-height: 100px;
}
.main-nav.wrapped .showsearch,
.main-nav.wrapped .nav-logo-wrap .logo-container {
    height: 100px ;
}
/* ------ [ Navigation Wraped Small Height ] ------Lioit------*/
.main-nav.wrapped.small-height{
    height: 60px !important;
}
.main-nav.wrapped.small-height .container {
    height: 60px !important;
}
.main-nav.wrapped.small-height .full-wrapper {
    margin-top: 0px;
}
.main-nav.wrapped.small-height {
    background: transparent !important;
}
.main-nav.wrapped .inner-nav ul li a {
    line-height: 100px !important;
    height: 100px !important;
}
.main-nav.wrapped.small-height .showsearch,
.main-nav.wrapped.small-height .nav-btns a {
    height: 60px;
  	line-height: 60px;
}
.main-nav.wrapped.small-height .inner-nav ul li a{
    height: 60px !important;
    line-height: 60px !important;
    font-size: 14px;
}
.main-nav.wrapped .inner-nav .mn-sub li a,
.main-nav.wrapped.small-height .inner-nav .mn-sub li a{
    height: auto !important;
    line-height: normal !important;
    font-size: 12px;
}
.main-nav.wrapped.small-height .logo-container{
    height: 60px !important;
    line-height: 50px;
}
.main-nav.wrapped.small-height .logo img {
    width: 70%;
}
.main-nav.wrapped .nav-logo-wrap {
    padding-left: 30px;
}

/* ------ [ Header Search ] ------Lioit------*/
.main-nav.wrapped .header-search {
    padding-right: 30px;
}
.main-nav.wrapped .header-search .searchnav:hover .mn-sub {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
}
.main-nav.wrapped.transparent .transparent .showsearch,
.main-nav.wrapped.transparent .transparent .nav-logo-wrap .logo-container {
    height: 50px !important;
}
.main-nav.transparent.wrapped .transparent .nav-btns a,
.main-nav.transparent.wrapped .transparent .showsearch {
    line-height: 50px !important;
    height: 50px !important;
}
.main-nav.transparent.wrapped .transparent .inner-nav ul li {
}
.main-nav.transparent.wrapped .transparent .inner-nav ul li a  {
    line-height: 50px !important;
    height: 50px !important;
}
.main-nav.transparent.wrapped .transparent .inner-nav .mn-sub li a  {
    height: auto !important;
    line-height: normal !important;
    font-size: 12px !important;
}
.main-nav .social-btns {}


.showsearch {
    display: inline-block;
    height: 150px;
  	line-height: 150px;
  	font-size: 14px;
  	cursor: pointer;
  	-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.main-nav.dark .showsearch {
  	color: #fff;
}
.searchoverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #191a1a;
    background: rgba(25,26,26,.89);
    z-index: 9999999999;
    display: none;
    -webkit-transition: left 500ms ease-in-out;
    -moz-transition: left 500ms ease-in-out;
    transition: left 500ms ease-in-out;
}

.searchoverlay.slide {
    left: -400px;
}

.searchoverlay .closesearch {
    color: #fff;
    position: absolute;
    font-size: 48px;
    top: 30px;
    right: 30px;
    cursor: pointer;
}

.searchoverlay form {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 50%;
    max-width: 700px;
}

.searchoverlay form input {
    font: 600 32px "Montserrat",Arial,Sans-Serif;
    color: #fff;
    text-transform: uppercase;
    background: 0 0;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #545555;
    padding: 40px 0;
    width: 100%;
    outline: none;
}

.searchoverlay form input::-webkit-input-placeholder {
    color: #e7e7e7;
}

.searchoverlay form input:-moz-placeholder {
    color: #e7e7e7;
    opacity: 1;
}

.searchoverlay form input::-moz-placeholder {
    color: #e7e7e7;
    opacity: 1;
}

.searchoverlay form input:-ms-input-placeholder {
    color: #e7e7e7;
}

.searchoverlay form .fa-search {
    position: absolute;
    top: 48px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #fff8f8;
}

@media (max-width:800px) {
    .searchoverlay form {
        width: 80%;
    }
}

.nav-btns  {
    margin-right: 20px;
}
.nav-btns a  {
    line-height: 150px;
    color: #fff;
    font-size: 16px;
    margin-right: 8px;
}
.small-height .nav-btns a  {
    line-height: 60px;
}


#main-headerv-search {
    position: relative;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.06);
    width: 40px;
    text-align: center;
    margin-top: 28px;
    -webkit-transition: margin 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: margin 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: margin 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: margin 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: margin 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.classic-b #main-headerv-search {
    height: 40px;
    line-height: 40px;
}
.small-height  #main-headerv-search {
   margin-top: 8px;
}
#main-headerv-search i {
    width: 15px;
}
.headerv-search {
    position: absolute;
    height: 100px;
    left: 0;
    right: 0;
    bottom: -100px;
    background: #212327;
    width: 100%;
}
.headerv-search .container {
    position: relative;
    margin-top: 26px;
}
.headerv-search input[type="text"] {
    border: 0;
    width: 100%;
    color: #fff;
    background: transparent;
    color: rgba(255,255,255,0.85);
    height: 52px;
    padding: 0px 60px 0px 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 40px;
    outline: none;
    outline-color: transparent;
    outline-width: 0;
}
.headerv-search input[type="text"]:-moz-placeholder {
 color: #fff;
 color: rgba(255,255,255,0.4);
}
.headerv-search input[type="text"]::-moz-placeholder {
 color: #fff;
 color: rgba(255,255,255,0.4);
 opacity: 1;
}
.headerv-search input[type="text"]:-ms-input-placeholder {
 color: #fff;
 color: rgba(255,255,255,0.4);
}
.headerv-search input[type="text"]::-webkit-input-placeholder {
 color: #fff;
 color: rgba(255,255,255,0.4);
}
.headerv-search button[type="submit"] {
    border: 0;
    padding: 0;
    margin: 0;
    color: #fff;
    width: 40px;
    height: 40px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    background: #28a8d3;
    border-radius: 3px;
    position: absolute;
    right:15px;
    top: 1px;
}
.headerv-search button[type="submit"]:hover {
    background: #2a272e;
}
.headerv-search button[type="submit"] i {
    color: #fff;
}
.headerv-search button[type="submit"] i {
    margin-right: -1px;
}

/* ------ [ Classic Navigation ] ------Lioit------*/
.classic-b .main-nav {
    height: 100px !important;
}
.classic-b .main-nav li a {
    line-height: 100px !important;
    height: 100px !important;
}
.classic-b .main-nav .nav-btns a,
.classic-b .main-nav .showsearch {
  line-height: 100px;
}
.classic-b .main-nav .showsearch,
.classic-b .main-nav .nav-logo-wrap .logo-container {
    height: 100px;
}
.classic-b .main-nav.small-height {
    height: 60px !important;
}
.classic-b .main-nav.small-height .container
{
    height: 60px !important;
}
.classic-b .main-nav.small-height .full-wrapper {
    margin-top: 0px;
}
.classic-b .main-nav.small-height .nav-btns a{
    height: 60px !important;
  	line-height: 60px !important;
}
.classic-b .main-nav.small-height .showsearch {
    height: 40px !important;
  	line-height: 40px !important;
}
.classic-b .main-nav.small-height .inner-nav ul li a{
    height: 60px !important;
    line-height: 60px !important;
}
.classic-b .main-nav.small-height .logo-container
{
    height: 60px !important;
}
.classic-b .main-nav.small-height .inner-nav ul li .mn-sub li a{
    line-height: 1.5 !important;
    height: auto !important;
}
.classic-b .header-search.search-btn {
    padding-top: 25px;
}
.classic-b .header-search.search-btn,
.classic-b .header-search.search-btn .showsearch {
    height: 40px;
    line-height: 40px;
}
.classic-b .header-search.search-btn .showsearch {
    background: rgba(0, 0, 0, 0.06);
    width: 40px;
    text-align: center;
}
.classic-b .small-height .header-search.search-btn {
    padding-top: 9px;
}
/* ------ [ Mini Navigation ] ------Lioit------*/
.mini-nav  {
    height: 100px !important;
}
.mini-nav li a   {
    line-height: 100px !important;
    height: 100px !important;
}
.mini-nav.main-nav .nav-btns a,
.mini-nav.main-nav .showsearch {
    line-height: 100px !important;
    height: 100px !important;
}
.mini-nav.main-nav .showsearch,
.mini-nav.main-nav .nav-logo-wrap .logo-container {
    height: 100px ;
}
/* ------ [ Mini Navigztion Small Height ] ------Lioit------*/
.mini-nav.main-nav.small-height{
    height: 60px !important;
}
.mini-nav.main-nav.small-height .container {
    height: 60px !important;
}
.mini-nav.main-nav.small-height .full-wrapper {
    margin-top: 0px;
}
.mini-nav.main-nav.small-height .showsearch,
.mini-nav.main-nav.small-height .nav-btns a {
    height: 60px !important;
  	line-height: 60px !important;
}
.mini-nav.main-nav.small-height .inner-nav ul li a{
    height: 60px !important;
    line-height: 60px !important;
}
.mini-nav.main-nav.small-height .logo-container{
    height: 60px !important;
}
.mini-nav.main-nav.small-height .inner-nav ul li .mn-sub li a{
    line-height: 1.5 !important;
    height: auto !important;
}
/* ------ [ Side Header Navigation ] ------Lioit------*/
.side-panel-is-left{
    margin-left: 270px;
}
.sideheader-overlay{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(10,10,10, .85);
    cursor:crosshair;

    z-index: 1030;
}
.side-panel{
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100%;
    padding-bottom: 60px;
    overflow-y: auto;
    color: rgba(255,255,255, .65);
    background: #151515;
    text-align: center;
    z-index: 9999999999999999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.side-panel-small {
	width: 240px;
}
.side-panel-small-is-left {
    margin-left: 240px;
}


.sideheader-close-button{
    display: none;
    position: absolute;
    font-size: 22px;
    color: #fff;
    top: 40px;
    right: 20px;
    width: 46px;
    height: 46px;
    opacity: .5;
    z-index: 99999999999999999;
    -webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sideheader-close-button:hover {
	opacity: 1;
}
/* ------ [ Side Header Responsive menu button ] ------Lioit------*/
.sideheader-button{
	font-size: 30px !important;
    display: none;
    position: fixed;
    min-width: 22px;
    top: 40px;
    left: 20px;
    height: 54px;
    opacity: .85;
    z-index: 999999999999;
    -webkit-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sideheader-button:hover{
    opacity: 1;
}
.sideheader-button span{
    display: block;
    width: 22px;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -11px;
    -webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sideheader-button span:before,
.sideheader-button span:after{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    top: -6px;
    left: 0;
    -webkit-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -webkit-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
    -moz-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -moz-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
    -o-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -o-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
    -ms-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -ms-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
    transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
}
.sideheader-button span:after{
    top: auto;
    bottom: -6px;
}

/* ------ [ Side Header Navigation Logo ] ------Lioit------*/
 .sideheader-logo-wrap{
}
.sideheader-logo-wrap .logo{
    display: block;
    padding: 80px 40px;
    text-align: center;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sideheader-logo-wrap .logo img{
    max-width: 100%;
}
/* ------ [ Side Header Navigation Menu ] ------Lioit------*/
.sideheader-wrapper{

}
.sideheader-menu-links,
.sideheader-menu-links ul{
    margin: 0;
    padding: 10px 0;
    line-height: 1.3;
    text-align: center;
}
.sideheader-menu-links ul.sideheader-sub{
    padding: 0;
}
.sideheader-menu-links a{
    display: block;
    position: relative;
    margin: 0;
    padding: 15px 20px;
    color: #999;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);

    z-index: 11;
}
.no-touch .sideheader-menu-links a:hover,
.sideheader-menu-links a:active,
.sideheader-menu-links li.js-opened > a{
    color: #d5d5d5;
    text-decoration: none;
}
.no-touch .sideheader-menu-links a:hover{
    background-color: rgba(255,255,255, .05);
}
.sideheader-menu-links li{
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.sideheader-menu-links li > a:active,
.sideheader-menu-links li a.active{
    color: #f5f5f5;
    background: rgba(0, 0, 0, 0.09);
}
.sideheader-menu-links li.js-opened:before{
    display: none;
}
.no-touch .sideheader-menu-links li.js-opened > a:hover,
.sideheader-menu-links li.js-opened > a:active{
    color: #fff;
}
/* ------ [ Side Header Navigation Menu Sub ] ------Lioit------*/
.sideheader-has-sub{

}
.sideheader-has-sub .fa{
    font-size: 14px;
}
.js-opened > .sideheader-has-sub > .fa{
    color: #fff;
}
.sideheader-sub{
    display: none;
    opacity: 0;
    position: relative;
    background: rgba(255, 255, 255, .05);
}
.sideheader-sub > li > a{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
    font-weight: 400;
}
.sideheader-menu-links li.js-opened .sideheader-sub{
    opacity: 1;
}
.sideheader-search{
    width: 100%;
}
.sideheader-search input.search-field{
    background: rgba(0, 0, 0, .05);
    color: #555;
    text-align: center;
    border: none;
    border-bottom: 1px solid rgba(255,255,255, .2);
}
.sideheader-search input.search-field:hover{
    border: none;
    border-bottom: 1px solid rgba(255,255,255, .4);
}
.sideheader-search input.search-field:focus{
    color: #999;
    border-color: rgba(255,255,255, .7);
}
.sideheader-search .search-button:hover{
    color: #fff;
}
/* ------ [ Side Navigation Social Links ] ------Lioit------*/
.sideheader-social-links{
    position: fixed;
    bottom: 0;
    left: 0;
    width: inherit;
    padding: 10px 10px 30px 10px;
    font-size: 14px;
    text-align: center;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1032;
}
.sideheader-social-links > a{
    display: inline-block;
    margin: 0 2px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border: 1px solid rgba(255,255,255, .15);
    text-align: center;
    text-decoration: none;
    color: #555;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sideheader-social-links > a:hover{
    border-color: rgba(255,255,255, .3);
    color: #999;
}
.sideheader-menu-small a {
	padding: 6px 20px !important;
}
/* ------ [ White Side Navigation ] ------Lioit------*/
.side-panel.white{
    color: rgba(0,0,0, .65) !important;
    background: #fafafa;
    border-right: 1px solid rgba(0,0,0, .07);
}
.side-panel.white .sideheader-close-button{
    border: 1px solid rgba(0,0,0, .5);
}
.side-panel.white .sideheader-close-button:before{
    background: #000;
}
.side-panel.white .sideheader-close-button:after{
    background: #000;
}
.side-panel.white .sideheader-menu-links a{
    color: #777;
    -webkit-tap-highlight-color: rgba(0,0,0, .05);
}
.side-panel.white .sideheader-menu-links li{
    border-top: 1px solid rgba(0,0,0, .04);
}
.side-panel.white .sideheader-menu-links li:last-child{
    border-bottom: 1px solid rgba(0,0,0, .04);
}
.no-touch .side-panel.white .sideheader-menu-links a:hover,
.side-panel.white .sideheader-menu-links a:active,
.side-panel.white .sideheader-menu-links li.js-opened > a{
    color: #111;
    text-decoration: none;
}
.no-touch .side-panel.white .sideheader-menu-links a:hover{
    background-color: rgba(0,0,0, .03);
}
.side-panel.white .sideheader-menu-links li > a:active,
.side-panel.white .sideheader-menu-links li a.active{
    color: #111;
}
.no-touch .side-panel.white .sideheader-menu-links li.js-opened > a:hover,
.side-panel.white .sideheader-menu-links li.js-opened > a:active{
    color: #111;
}
.side-panel.white .js-opened > .sideheader-has-sub > .fa{
    color: #333;
}
.side-panel.white .sideheader-sub > li{
    border: none!important;
}
.side-panel.white .sideheader-social-links > a{
    border: 1px solid rgba(0,0,0, .15);
    color: rgba(0,0,0, .4);
}
.side-panel.white .sideheader-social-links > a:hover{
    border-color: rgba(0,0,0, .3);
    color: rgba(0,0,0, .75);
}

/* -12-  [ Sections ]----------Lioit------------------------*/

/*	- Home Sections Options
    - Wrap Width Options
    - Section's Height Options
    - Split section
    - Side Image Section
    - Call To Actions
    - Banner Sections
    - Section Title's

-------------------------------------Lioit------------------------*/

/* ------ [ Home Sections ] ------Lioit------*/
 .home-section{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.home-content{
    display: table;
    width: 100%;
    height: 100%;
}
.home-text{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
.blog-cover .home-text,
.home-section .cover-text {
    padding-top: 160px;
}
.home-content{
    position: relative;
}
.cover-text{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
.welcome-intro {

}
.welcome-intro h1 {
    margin-bottom: 10px;
}
.welcome-intro h1 .font-light {
}
.welcome-intro .cover-excerpt {
    font-size: 24px;
    margin-bottom: 20px;
    color: #fff;
}
/* ------ [ Wrap Options ] ------Lioit------*/
/*-----------------------------------------------------------------------------------*/
/*	BOX LAYOUT
/*-----------------------------------------------------------------------------------*/
@media (min-width: 1270px) {
	.box-layout {
		background: transparent url(style/images/bg/bg1.html) repeat fixed;
		padding: 0;
	}
	.box-layout .page {
		position: relative;
		width: 1270px;
		margin: 0 auto;
		-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.17);
		-moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.17);
		box-shadow: 0 0 3px 0 rgba(0,0,0,0.17);
	}
	.box-layout .page .main-nav {
		width: 1270px;
	}
	.box-layout .mini-nav.main-nav.small-height {
		left: inherit;
		top: 0;
	}
}
.wrapper-small {
  max-width: 90%;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
.wrapper-small-x {
  max-width: 80%;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
.wrapper-small-xx {
  max-width: 70%;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}
.wrapper-small-xxx {
  max-width: 60%;
  width: 60%;
  margin: 0 auto;
  overflow: hidden;
}
.wrapper-tiny {
  max-width: 700px;
  width: 90%;
  margin: 0 auto;
}
.thin-center-section {
    width: 80%;
    margin: 0 auto;
}
/* ------ [ Page Sections Options ] ------Lioit------*/
.body-bg-img {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.xlarge-section,
.large-section,
.page-section,
.small-section,
.tiny-section,
.xtiny-section{
    width: 100%;
    display: table;
    position: relative;
    overflow: visible;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 100px 0;
}
.xlarge-section {
    padding: 250px 0px;
}
.large-section {
    padding: 150px 0px;
}
.page-section.p-0{
    overflow: hidden;
}
.small-section{
    padding: 70px 0;
}
.small-section-2{
    padding: 50px 0;
}
.tiny-section {
    padding: 40px 0;
}
.xtiny-section {
    padding: 10px 0;
    font-size: 13px;
}
.xtiny-section p {
    font-size: 13px !important;
}
/* ------ [ Sections Height ] ------Lioit------*/
.section-height-xlarge {
      min-height: 920px !important;
      max-height: 920px !important;
}
.section-height-large {
      min-height: 882px !important;
      max-height: 882px !important;
}

.section-height-med2 {
      min-height: 841px !important;
      max-height: 841px !important;
}
.section-height-med {
      min-height: 720px !important;
      max-height: 720px !important;
}
.section-height-med3 {
      min-height: 600px !important;
      max-height: 600px !important;
}
.section-height-small {
      min-height: 500px !important;
      max-height: 500px !important;
}
.section-height-xsmall {
      min-height: 360px !important;
      max-height: 360px !important;
}
.section-height-tiny {
      min-height: 190px !important;
      max-height: 190px !important;
}
.section-height-xtiny {
      min-height: 170px !important;
      max-height: 170px !important;
}
.section-height-xxtiny {
      min-height: 150px !important;
      max-height: 150px !important;
}
.section-height-xvtiny {
      min-height: 140px !important;
      max-height: 140px !important;
}
.section-height-vtiny {
      min-height: 90px !important;
      max-height: 90px !important;
}
.section-height-xstiny {
      min-height: 55px !important;
      max-height: 55px !important;
}

/* ------ [ Split section ] ------Lioit------*/
.split-section{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.split-section-headings{
    width: 38.2%;
    float: left;
    position: relative;
    overflow: hidden;
    text-align: center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ssh-table{
    width: 100%;
    display: table;
}
.ssh-cell{
    display: table-cell;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.split-section-content{
    width: 61.8%;
    float: right;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255, .97);

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* ------ [ Side Image Section ] ------Lioit------*/

.background-image-holder,
.foreground-image-holder {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  z-index: 0;
  background-position: 50% 50% !important;
}
.background-image-holder.parallax-background {
  height: 120%;
  top: -10%;
}
.hover-background .background-image-holder,
.hover-background .foreground-image-holder {
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
}
.hover-background .background-image-holder {
  height: 110%;
  width: 110%;
}
.side-image {
  padding: 0px;
  position: relative;
}
.side-image .image-container {
  overflow: hidden;
  position: absolute;
  height: 100%;
  padding: 0px;
  top: 0px;
}
.side-image .image-container.pull-right {
  right: 0px;
}
.side-image .content {
  padding-top: 50px;
  padding-bottom: 50px;
}
.side-image h1 {
  margin-bottom: 40px;
}
.side-image p.lead {
  margin-bottom: 64px;
}
.side-image.text-heavy h1 {
  margin-bottom: 32px;
}
.side-image.text-heavy p.lead {
  margin-bottom: 40px;
}
.main-content.white-bg {
    background: #fff;
    overflow: hidden;
}
.bg-scroll{
    background-attachment: scroll !important;
}
.bg-pattern{
    background-repeat: repeat;
    background-size: auto;
}
.section-more:hover{
    text-decoration: none;
    color: #000;

}
.section-more .fa{
    font-size: 12px;
}

.side-image .section-title {
    margin-bottom: 60px;
    text-align: left;
}
.side-image .section-title .title-bottom {
    width: 100%;
}
.side-image .section-title .title-bottom span.title-btm-line {
    left: 5%;
    width: 100px;
    margin-left: 0px;
}
.section-heading {
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5em;
    line-height: 1.3;
}
.section-line{
    width: 55px;
    height: 1px;
    margin: 30px auto;
    background: #111;
}
.section-text{

}
.section-text blockquote{
    margin-top: -5px;
}
.section-bot-image{
    margin: 140px 0 -140px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}
.section-inner {
    padding: 64px 40px;
    position: relative;
  	z-index: 3;
}
/* ----  [ Call To Actions ]----------Lioit------------------------*/
.call-to-action {
    padding: 40px 0;
}
/* ----  [ Banner Sections ]----------Lioit------------------------*/
.banner-section{
    overflow: vihsible;
    border-bottom: 1px solid transparent;
}
h3.banner-heading {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
}
h2.banner-heading {
    font-size: 24px;
}
.banner-decription{
    margin-bottom: 35px;
}

.banner-image{
    text-align: right;
}
.banner-image img{
}
/* ----  [  Title's Sections ]----------Lioit------------------------*/
.small-title{
    padding: 0;
    margin: 0 0 30px 0;
}
.small-title h2 {
    margin-bottom: 10px;
}
.section-icon{
    margin-bottom: 7px;
    text-align: center;
    font-size: 32px;
}
.small-title .serif{
    text-transform: none;
    font-weight: 400;
}
.small-title.white{
    color: #fff;
}

.section-title {
    margin-bottom: 40px;
    text-align: center;
    line-height: 1.7;
    position: relative;
}
.section-title h2 {
}
.section-title p {
    margin-bottom: 20px;
    margin-top:0px ;
}
.section-title .title-left {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-block;
    background: rgba(0, 0, 0, 0.1);
    height: 2px;
    width: 200px;
}
.section-title .title-right {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    background: rgba(0, 0, 0, 0.1);
    height: 2px;
    width: 200px;
}
.section-title .title-bottom span.title-btm-line {
}
.section-more{
    margin-top: 13px;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.section-border-title {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.section-border-title h2 {
    margin: 0px;
    display: block;
}
.section-border-title span.title-bor {
    display: inline-block;
    height: 3px;
    background: #28a8d3;
    width: 10%;
}
.section-img-title {
    position: relative;
    height: 100%;
    min-height: 150px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}
.section-img-title img {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
}
.section-img-title:before {
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0);
    -webkit-transition: all 450ms ease-out 0s;
    -moz-transition: all 450ms ease-out 0s;
    -o-transition: all 450ms ease-out 0s;
    transition: all 450ms ease-out 0s;
    z-index: 10;
}
.section-img-title img {
}
.section-img-title h2 {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 99;
    margin: 0px;
}
.section-img-title h2 span.title-bor {
    display: block;
    height: 3px;
    background: #fff;
    width: 40%;
}
.fancy-title {
    position: relative;
    margin-bottom: 30px;
}
.fancy-title h1,.fancy-title h2,.fancy-title h3,.fancy-title h4,.fancy-title h5,.fancy-title h6 {
    position: relative;
    display: inline-block;
    background-color: #FFF;
    padding-right: 25px;
    margin-bottom: 0;
    margin-top: 0px;
}
.fancy-title h4,.fancy-title h5,.fancy-title h6 {
    padding-right: 10px;
}
.fancy-title.title-border-color:before,.fancy-title.title-border:before,.fancy-title.title-double-border:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 3px double #E5E5E5;
    left: auto;
    top: 46%;
    right: 0;
}
.fancy-title.title-border:before {
    top: 49%;
    border-top: 1px solid #EEE;
}
.fancy-title.title-border-color:before {
    top: 49%;
    border-top: 1px solid #28a8d3;
    opacity: .6;
}
.title-center {
    text-align: center;
}
.title-center h1,.title-center h2,.title-center h3 {
    padding: 0 15px;
}
.title-center h4,.title-center h5,.title-center h6 {
    padding: 0 10px;
}
.title-right {
    text-align: right;
}
.title-right h1,.title-right h2,.title-right h3 {
    padding: 0 0 0 15px;
}
.title-right h4,.title-right h5,.title-right h6 {
    padding: 0 0 0 10px;
}
.fancy-title.title-bottom-border h1,.fancy-title.title-bottom-border h2,.fancy-title.title-bottom-border h3,.fancy-title.title-bottom-border h4,.fancy-title.title-bottom-border h5,.fancy-title.title-bottom-border h6 {
    display: block;
    background: 0 0;
    padding: 0 0 10px;
    border-bottom: 2px solid #28a8d3;
}

.fancy-title.title-dotted-border {
    background: url(assets/images/icons/dotted.html) center repeat-x;
}

.before-heading {
    display: block;
    margin: 0 0 5px;
    font-size: 16px;
    font-family: 'Crete Round',serif;
    font-style: italic;
    font-weight: 400;
    color: #999;
}

.heading-details {
    padding-top: 10px;
}
.heading-details h1.page-title {
    font-weight: bold;
    font-size: 48px;
    margin-bottom: 20px;
    margin-top: 0px;
}
.heading-details .page-excerpt{
    font-size: 26px;
    margin-bottom: 20px;
    color: #fff;
}
.classic-heading h1 {

}
.classic-heading p {
    font-size: 34px;
}

.mod-breadcrumbs {
    font-size: 15px;
}


/* -13-  [ Blog ]----------Lioit------------------------*/

/*	- Parallax Blog
    - Thin Blog List
    - Classic Blog List
    - Classic Blog Full
    - Small Featured Posts
    - Posts Columns
    - Posts Columns Alternative
    - Posts Columns Alternative 2
    - Small Articles
    - Posts Grid
    - Classic Posts
    - Recent Post Section
    - Blog Side Image
    - Masonry Blog
    - Single Post
        - Single Post Entry Content
        - Post navigation wrap
        - Post Single Navbar
        - Classic Post Single Navbar
        - Post Heading - Creative Blog
        - Single Post Bottom
        - Single Post Share Wrap
        - Post Share
        - Post Meta
        - Classic Post Meta
        - Post Heading - Freelancer
        - Single - Author Details
        - Single Related Posts
        - Single Comments List
    - Magazine
    - Classic Posts
    - Blog Sidebar
        - Widget Style
        - Ad Widget
        - Social Buttons Widget
        - Author Profile Widget
        - Twitter Widget
        - Social Counter Widget
        - Video Post Widget
        - Editor Picks Widget
        - Cat Post Columns Widget
        - Instagram Widget
        - Recent Posts Widget
        - Download File Widget
        - Timeline Widget
        - Calendar Widget
        - Weather Widget
        - Recent Comments Widget
        - Posts Slider Widget
        - Tag Cloud Widget
    - Blog Pagination

-------------------------------------Lioit------------------------*/

/* ----  [ Parallax Blog ]----------Lioit------------------------*/
.parallax-blog {
    overflow: hidden;
}
.parallax-post .post-meta {
    overflow: hidden;
    margin-bottom: 50px;
}
.parallax-post .post-meta span {
    display: inline-block;
    padding: 5px 30px 8px 30px;
    margin: 0px 2.5px;
    font-size: 16px;
    font-weight: 600;
    background: rgba(0, 0, 0, .3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
}
.bg-dark .parallax-post .post-meta span {
    color: #c9ccd0;
    background: rgba(0, 0, 0, .2);
}
.parallax-post .post-meta span.has-bg,
.parallax-post .post-meta span.has-bg a {
    color: #fff;
}
.parallax-post .post-title {
    font-size: 28px;
    font-weight: 600;
}
.parallax-post .post-title a {

}
.parallax-post .entry-summary p {
    color: #7b8086;
    font-size: 19px;
}
.bg-dark .parallax-post .entry-summary p {
    color: #fefefe;
}
.parallax-post .post-author {
    text-align: center;
}
.parallax-post .post-author a {
    display: inline-block;
    font-weight: bold;
    color: #7b8086;
}
.parallax-post .post-author img {
    margin-right: 15px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.post-bg.blog-post .post-author a,
.post-bg.blog-post .entry-summary p,
.post-bg.blog-post .post-meta span,
.post-bg.blog-post .post-title a {
    color: #fff;
}
.parallax-post .post-title a:hover {
    color: #28a8d3;
}


.post.format-quote blockquote:first-child  {
  display: block;
  padding: 0;
  margin: 0;
  text-align: center;
  border: 0;
}
.post.format-quote blockquote:before,
.post.format-quote blockquote:after,
.post.format-quote blockquote p:after {
    display: none;
}
.post-qoute {
    overflow: hidden;
}
.post-qoute .quote-icon i {
     font-size: 48px;
     color: #28a8d3;
}
.post-qoute blockquote p {
  margin-bottom: 1em;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.6;

}
.post-qoute blockquote cite {
  font-size: 18px;
}

.boxed-bg {
    background: #fff;
    overflow: overlay;
}
.category-badge  {
    margin-top: -3px;
    font-weight: 600;
    font-size: 15px;
    position: relative;
    z-index: 999999;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.category-badge.big-badge .category-meta {
    padding: 10px 25px !important;
}
.category-badge.small-badge .category-meta {
    padding: 5px 15px !important;
    font-size: 11px;
    text-transform: uppercase;
}
.category-badge.tiny-badge .category-meta {
    padding: 3px 10px !important;
    font-size: 10px;
    text-transform: uppercase;
}
.category-badge a {
    color: #fff;
    display: inline-block;
}
.parallax-post .author-avatar {
    width: 32px;
}
/* ----  [ Thin Blog List ]----------Lioit------------------------*/
.thin-blog-list {

}
.post {
    margin-bottom: 40px;
    overflow: hidden;
    position: relative;
    z-index: 99;
}
.classic-blog-list .post:last-child {
}
.t-post-thumb {
    width: 370px;
    height: 320px;
    margin-right: 40px;
    overflow: hidden;
}
.t-post-thumb img {
    width: 390px;
    height: 320px;
    margin-bottom: 0px;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.post-thumb {
    overflow: hidden;
}
.post-thumb img {
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.post:hover .t-post-thumb img,
.th-featured-post:hover .post-thumb img,
.post-thumb:hover img {
    transform: matrix(1.09, 0, 0, 1.09, 0, 0);
}
.t-post-content {
    padding: 10px 40px 30px 20px;
    overflow: hidden;
    color: #8d8f92;
    font-size: 16px;
}
.t-post-content .post-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 15px;
}
.t-post-content p {
    margin-bottom: 30px;
}
.t-post-content .t-post-author-avatar {
    float: left;
    width: 65px;
    height: 65px;
    margin-right: 25px;
}
.t-post-meta-c {

}
.t-post-meta-c span {
    display:  inline-block;
    margin-right: 20px;
}
.t-post-author a {
    color: #8d8f92;
}
.t-post-meta-c .t-post-author {
    display: block !important;
    margin-bottom: 3px;
    font-weight: 600;
}
.t-post-meta-c span i {
    margin-right: 10px;
    color: #a0a3a8;
}
.t-post-meta-c .t-post-comments {
    margin-right: 0px;
}

/* ----  [ Classic Blog List ]----------Lioit------------------------*/
.classic-blog-list {
    overflow: hidden;
}
.classic-blog-list .t-post-content {
    padding: 0px;
}
.classic-blog-list .classic-post-meta-wrap  {
    margin-right: 40px;
}
.classic-blog-list .t-post-thumb.small-thumb ,
.classic-blog-list .t-post-thumb.small-thumb img {
    width: 270px;
    height: 220px;
}
.classic-blog-list .t-post-content .post-title {
    font-size: 16px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.classic-blog-list .t-post-content .post-author ,
.classic-blog-list .t-post-content .post-author a{
    color: #b0b0b2;
}
.classic-blog-list .t-post-content .post-author {
    margin-bottom: 15px;
    margin-top: 10px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}
/* ----  [ Classic Blog Full ]----------Lioit------------------------*/
.classic-blog-full {
    overflow: hidden;

}
.classic-blog-full .post-details {
    padding: 30px 100px;
    overflow: hidden;
}
.classic-blog-full .post-details h2.post-title {
    font-size: 18px ;
    margin-bottom: 10px;
    margin-top: 0px;
}
.classic-blog-full .post-details .post-author a {
    font-size: 12px;
    color: #b0b0b2;
    text-transform: uppercase;
    font-weight: 600;
}
.classic-blog-full .post-video {

}
.classic-blog-full video {

}
.classic-blog-full .post-thumb  {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.classic-blog-full .post-thumb img {
    width: 100%;
    height: 100%;
}
.classic-blog-full .post-thumb .over  {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background: transparent url('assets/images/placeholder-post.png') repeat-x bottom left;
    height: 198px;
}
.classic-blog-full .classic-post-meta-wrap {
    background: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    color: #fff;
    margin:  -70px auto 0px 75px;
    width: 80%;
    overflow: hidden;
    height: 41px;
    display: block;
    position: relative;
    z-index: 999;
}
.small-blog-list .classic-post-meta-wrap {
    margin: 0px auto 0px 0px;
}
.classic-blog-full .classic-post-meta-wrap span,
.classic-blog-full .classic-post-meta-wrap .post-meta {
   color: #fff;
   font-size: 14px;
   font-weight: bold;
}
.classic-blog-full .classic-post-meta-wrap .post-meta  span i {
    color: #fff;
}

.classic-blog-full .post-content {
    padding: 40px;
    padding-top: 70px;
    font-size: 16px;
}
.classic-blog-full.single-post .post-content {
    padding: 40px 100px;
    padding-top: 70px;
    font-size: 16px;
}
.classic-blog-full  .classic-post-btm {
    border-top: 1px solid rgba(0,0,0,0.09);
    padding: 25px 40px;
    overflow: hidden;
}
.format-standard .classic-post-meta-wrap ,
.format-video .classic-post-meta-wrap,
.format-gallery.classic-post-meta-wrap   {
    margin-top: 10px;
}
.format-standard .post-content,
.format-video  .post-content,
.format-gallery   .post-content {
    padding-top: 40px;
}
.format-video .classic-post-meta-wrap {
    margin-top: 30px;
}
.self-hosted-video {
    height: 390px;
    overflow: hidden;
}
.format-gallery .classic-post-meta-wrap {
    margin-top: 30px;
}
/*--- gallery ---*/
.lio-gallery-item.lio-item{ margin: 0px 15px; }
.lio-gallery-item.lio-item .gallery-item{ margin: 0px 5px 10px; }
.lio-gallery-item.lio-item .gallery-item img{ display: block; margin: 0px auto; }
.lio-gallery-item.lio-item .gallery-caption{ display: block; text-align: center; padding: 7px 0px 6px; }

.lio-gallery-item.lio-item.lio-gallery-thumbnail .gallery-item{ padding: 5px; cursor: pointer; }
.lio-gallery-item.lio-item .lio-gallery-thumbnail-container{ margin: 0px 5px 10px; position: relative; overflow: hidden; }
.lio-gallery-item.lio-item .lio-gallery-thumbnail-container .lio-gallery-thumbnail{ display: none; }
.lio-gallery-item.lio-item .lio-gallery-thumbnail-container .lio-gallery-thumbnail:first-child{ display: block; }
.lio-gallery-item.lio-item .lio-gallery-thumbnail-container img{ margin: 0px auto; display: block; }
.lio-gallery-item.lio-item .lio-gallery-thumbnail-container .gallery-caption-wrapper{
    position: absolute; bottom: 0px; left: 0px; right: 0px; text-align: center; }
.lio-gallery-item.lio-item .lio-gallery-thumbnail-container .gallery-caption{ padding: 10px 15px; opacity: 0.8; filter: alpha(opacity=80); display: inline-block; max-width: 60%; }
.lio-banner-images.lio-item  .flex-direction-nav i { margin-right: 0px; font-size: 24px; }
.lio-gallery-grid.lio-item{ margin: 0px ; }
.lio-gallery-grid.lio-item .lio-gallery-grid-container img{ display: block; }
.lio-gallery-grid.lio-item .gallery-grid-first{ width: 33.333%; float: left; }
.lio-gallery-grid.lio-item .gallery-grid-first-inner{ margin: 0px 2px 4px; }
.lio-gallery-grid.lio-item .gallery-grid-second{ width: 33.333%; float: left; }
.lio-gallery-grid.lio-item .gallery-grid-second-inner{ margin: 0px 2px 4px; }
.lio-gallery-grid.lio-item .gallery-grid-five{ width: 50%; float: left; }
.lio-gallery-grid.lio-item .gallery-grid-five-inner{ margin: 0px 2px 4px; }
/* ----  [ Small Featured Posts ]----------Lioit------------------------*/
.small-featured-posts {
    margin-bottom: 40px;
}
.small-featured-post {
    position: relative;
    min-height: 500px;
}
.col-sm-7 .small-featured-post,
.col-md-7 .small-featured-post {
    min-height: 430px;
}
.small-featured-post .post-thumb  {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;

}
.small-featured-post .post-thumb img {
    width: 100%;
    height: 100%;
}
.small-featured-post .post-thumb .over  {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background: transparent url('assets/images/placeholder.png') repeat-x bottom left;
    height: 324px;
}
.small-featured-post .small-featured-post-content {
    width: 80%;
    overflow: visible;
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 99;

}
.small-featured-post-content  h2  {
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 15px;
}
.small-featured-post-content  h2 a {
    color: #fff;
}
/* ----  [ Posts Columns ]----------Lioit------------------------*/
.posts-colmuns {

}
.posts-colmuns .post {
    margin-bottom: 0px;
    position: relative;
}
.posts-colmuns .post post-thumb {
    position: relative;
}
.posts-colmuns .post post-thumb img {
}
.post-col-content {
    padding: 40px;
    overflow: hidden;
}
.post-col-content p {
    font-size: 16px;
}
.post-col-content h3 {
    font-size: 16px;
    line-height: 29px;
    margin-top: 0px;
    font-weight: 400;
}
.posts-colmuns .post .category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;

}
/* ----  [ Posts Columns Alternative ]----------Lioit------------------------*/
.post-col-alt {
    position: relative;
}
.post-col-alt-item {
    margin-bottom: 30px;
    float: left;
}
.post-col-alt-item-content {
    position: relative;
    overflow: hidden;
}
.post-col-alt-item-content .over {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background: transparent url('assets/images/big-placeholder-btm.png') repeat-x bottom left;
    height: 455px;
    opacity: .8;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.post-col-alt-item-content:hover .over {
    opacity: .4;
}
.post-col-alt-item-content .post-col-alt-item-img {
  	-webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.post-col-alt-item-content:hover .post-col-alt-item-img {
  	-webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    transform: matrix(1.3, 0, 0, 1.3, 0, 0);
}

.post-col-alt-item-content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
}

.post-col-alt-item-img {
    border-radius: 3px;
    width: 100%;
}

.post-col-alt-item-category,.post-col-alt-item-head,.post-col-alt-item-link {
    position: absolute;
    z-index: 1;
}

.post-col-alt-item-category {
    top: 30px;
    left: 30px;
    z-index: 9999;
    font-size: 11.5px;
    text-transform: uppercase;
    background: rgba(0,0,0,.6);
    display: inline-block;
    line-height: 1;
    color: #fff;
    padding: 5px 6px 5px 8px;
    border-radius: 2px;
    font-weight: 700;
}

.single .related-posts-classic .post-col-alt-item-category {
    top: 10px;
    left: 13px;
}
.single .post-col-alt-item-category {
    top: 0px;
    left: 13px;
}
.post-col-alt-item-category:hover {
    color: #111;
    text-decoration: none;
    background: rgba(255,255,255,.5);
}

.post-col-alt-item-link {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

.post-col-alt-item-head {
    bottom: 30px;
    right: 30px;
    left: 30px;
    z-index: 9999;
}

.post-col-alt-item-date {
    font-size: 12px;
    color: #fff;
    opacity: .75;
    z-index: 9999;
    margin-bottom: 0px;
}
.post-col-alt-item-date sup {
    font-size: 10px;
}

.post-col-alt-item-title {
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
}
/* ----  [ Posts Columns Alternative 2 ]----------Lioit------------------------*/
.post-col-alt2-item {
    overflow: hidden;
    position: relative;
}
.post-col-alt2-image {
    float: left;
    width: 330px;
    overflow: hidden;
}
.post-col-alt2-item .gallery-full {
    height: 325px;
    overflow: hidden;
}
.post-col-alt2-item .gallery-full img {
    width: 100% !important;
    height: 325px !important;
}
.post-col-alt2-item-category {
    top: 30px;
    left: 30px;
    z-index: 3;
    font-size: 12.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: rgba(0,0,0,.5);
    display: inline-block;
    line-height: 1;
    color: #fff;
    padding: 7px 8px 7px 10px;
    font-weight: 700;
}
.post-col-alt2-item-category:hover {
    color: rgba(255, 255, 255, .75);
}
.post-col-alt2-item-head {
    padding-top: 30px;
}
.post-col-alt2-item-date {
    font-size: 14px;

}
.post-col-alt2-item-title {
    font-size: 22px;
    margin-top: 0px;

}
.post-col-alt2-item .post-col-alt2-author-avatar {
    float: left;
    overflow: hidden;
    width: 60px;
    height: 60px;
    margin-right: 20px;
}
.post-col-alt2-meta .post-author {
    display: block;
    font-weight: 600;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.post-col-alt2-meta span {
    display:  inline-block;
    margin-right: 20px;
    color: rgba(0, 0, 0, .65);
}
.post-col-alt2-meta .post-author a {
    color: rgba(0, 0, 0, .85);
}
.post-col-alt2-meta span i {
    margin-right: 10px;
    color: rgba(0, 0, 0, .65);
}
.post-col-alt2-meta .t-post-comments {
    margin-right: 0px;
}
.post-col-alt2-item blockquote {
    padding: 0px !important;
    margin: 0px !important;
}
.post-col-alt2-item .post-qoute blockquote p {
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
}
.post-col-alt2-item .post-qoute blockquote p {
}
.post-col-alt2-item blockquote:before,
.post-col-alt2-item blockquote p:after {
    color: #fff;
}
.post-col-alt2-item .post-qoute blockquote cite {
    font-size: 16px;
}

/* ----  [ Small Articles ]----------Lioit------------------------*/
.small-articles {
    overflow: hidden;
}
.small-articles .post-content {
    padding-left: 20px;
    overflow: hidden;
}
.small-articles .post-content h2 {
    font-size: 24px;
    line-height: 39px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 15px;
}
.small-articles .post-content h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
    margin-top: 0px;
    margin-bottom: 20px;
}
.small-articles .post-author {
    margin-bottom: 20px;
}
.small-articles .post-content .post-meta {
    margin-bottom: 30px;
}
.small-articles .post-content .post-meta span {
    margin-right: 25px;
}
.small-articles .classic-post-meta-wrap .post-meta {
    margin-bottom: 0px;
}
.small-articles .classic-post-meta-wrap .post-meta span {
    margin-right: 0px;
}

/* ----  [ Posts Grid ]----------Lioit------------------------*/
.post-grid{

}
.home-post {

}
.post-defult-img{
    margin-bottom: 23px;
    position: relative;
    width: 100% !important;
    height: 100% !important;
}
.post-defult-img .thumb-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
}
.post-defult-img .thumb-over .thumb-over-icon {
    display: table;
    width: 100% !important;
    height: 100% !important;
    color: #fff;
    text-align: center;
}
.post-defult-img .thumb-over .thumb-over-icon i {
    display: table-cell;
    vertical-align: middle !important;
    font-size: 50px;
}
.post-defult-img a,
.post-defult-img .thumb-over{
    -webkit-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-defult-img a:hover{
    opacity: .85;
}
.home-post:hover .thumb-over {
    opacity: 1;
}
.post-defult-img img{
    width: 100%;
}
.post-defult-title{
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
}
.post-defult-title a{
    text-decoration: none;
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-defult-title a:hover{
}
.post-defult-info,
.post-defult-info a{
    margin-bottom: 15px;
    font-size: 12px;
    text-decoration: none;
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-defult-info a:hover{
}
.post-defult-text{
    margin-bottom: 22px;
    font-size: 15px;
}
.image-carousel-pa .carousel-item {
    padding: 15px;
}
/* ----  [ Classic Posts ]----------Lioit------------------------*/
#posts {
    position: relative;
}

.entry {
    position: relative;
}

.entry-image {
    margin-bottom: 30px;
}

.entry-image,.entry-image .slide a,.entry-image img,.entry-image>a {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}

.entry-image iframe {
    display: block;
    width: 100% !important;
    overflow: hidden !important;
}

.entry-image img {
    border-radius: 3px;
}

.entry-details {
    padding-bottom: 20px;
}
.entry-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.entry-title h2 a {
    color: #333;
}

.entry-title h2 a:hover {
    color: #28a8d3;
}

#posts .entry-meta {
    margin: 0px 0px 0px 0!important;
    padding: 20px 0px 0px 0px !important;
    list-style: none;
}

.single-post .entry-meta {
    margin-bottom: 20px;
}

.entry-meta li {
    float: left;
    font-size: 13px;
    line-height: 14px;
    margin: 0 15px 0px 0;
    color: #999;
}

.entry-meta li:before {
    content: '/';
    display: inline-block;
    margin-right: 10px;
    opacity: .5;
}
.entry-meta li:last-child:before {
    content: ' ';
}
.entry-meta li i {
    position: relative;
    top: 1px;
    font-size: 14px;
    margin-right: 3px;
}

.entry-meta li a {
    color: #999;
}

.entry-meta li a:hover {
    color: #28a8d3;
}

.entry-meta li:first-child:before {
    display: none;
}

.entry-meta li ins {
    font-weight: 600;
    text-decoration: none;
}
.entry .more-link {
    padding: 0px 0px 30px 0px;
    display: inline-block;
}
.entry-c {
    position: relative;
    overflow: hidden;
}

#posts .entry-content {
    padding: 20px 0px 0px 0px;
}

.single-post .entry-content .entry-image {
    max-width: 350px;
}

.entry-content {
    position: relative;
}

.entry-link {
    display: block;
    background-color: #F5F5F5;
    padding: 30px 0;
    text-align: center;
    color: #444;
    font-family: Raleway,sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 3px;
}

body:not(.device-touch) .entry-link {
    -webkit-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}

.entry-link:hover {
    color: #FFF;
    background-color: #28a8d3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

.entry-link span {
    display: block;
    margin-top: 5px;
    font-family: 'Crete Round',serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: #AAA;
}

.entry-link:hover span {
    color: #EEE;
}

.entry blockquote p {
    font-weight: 400;
    font-family: 'Crete Round',serif;
    font-style: italic;
}

.ievent .entry-image,.small-thumbs .entry-image {
    float: left;
    width: 300px;
    margin: 0 30px 0 0;
}

.ievent .entry-image img,.small-thumbs .entry-image img {
    border-radius: 0;
}

.ievent .entry-c .entry-image,.small-thumbs .entry-c .entry-image {
    float: none;
    width: 100%;
    margin: 0 0 20px;
}

.ievent .entry-c .entry-image img,.small-thumbs .entry-c .entry-image img {
    border-radius: 5px;
}

.ievent .entry-title h2,.small-thumbs .entry-title h2 {
    font-size: 20px;
    font-weight: 600;
}

.small-thumbs.alt .entry-image {
    float: right;
    margin: 0 0 0 30px;
}

.small-thumbs.alt .entry-c .entry-image {
    float: none;
    margin: 0 0 20px;
}

.bothsidebar .small-thumbs .entry-image {
    width: 200px;
    margin: 0 25px 0 0;
}

.bothsidebar .small-thumbs.alt .entry-image {
    margin: 0 0 0 25px;
}

.bothsidebar .small-thumbs .entry-c .entry-image {
    width: 100%;
    margin: 0 0 20px;
}

.bothsidebar .small-thumbs .entry-title h2 {
    font-size: 18px;
}

.agency-v .recent-posts-widget .recent-post {
    overflow: hidden;
    padding: 30px 0px 10px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.agency-v  .sidebar .widget .widget-title {
    overflow: hidden;
    padding: 0px;
    padding-top: 20px;

    height: auto;
    line-height: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.agency-v  .sidebar .widget .widget-title small {
    line-height: 20px;
    font-weight: bold;
}

/* ----  [ Recent Post Section ]----------Lioit------------------------*/
.fr-recent-post {
    overflow: hidden;
    padding-bottom: 100px;
}
.fr-recent-post .post-thumb {
    overflow: hidden;
    margin-bottom: 30px;
    height: 330px;
}
.fr-recent-post .post-title {
    font-size: 30px;
    line-height: 53px;
    font-weight: 400;
    margin-bottom: 20px;
}
.fr-post-meta-wrap {
    overflow: hidden;
    padding-top: 35px;
}
.post-meta {

}
.fr-post-meta-wrap .post-meta strong {
    display: block;
    margin-bottom: 5px;
}
.fr-post-meta-wrap .post-meta span {
    display: inline-block;
    margin: 0px;
    margin-bottom: 40px;
}
.fr-post-meta-wrap .post-tags {
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-family: 'Montserrat';
}
.fr-post-meta-wrap .post-tags li {
    font-size: 13px;
}


/* ----  [ Blog Side Image ]----------Lioit------------------------*/
#blog.side-image {
    background: #f7f7f7;
    height: 640px;
}
#blog.side-image .image-container {
    height: 640px;
}
.latest-blog-posts {
    overflow: hidden;
}
.blog-post {
    overflow: hidden;
    margin-bottom: 40px;
}
.blog-post:last-child {
    margin-bottom: 0px;
}
.blog-post-format-icon {
    float: left;
    width: 70px;
    height: 70px;
    margin-right: 30px;
    background: #fff;
    border: 1px solid rgba(0,0,0, .1);
    border-radius: 4px;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -ms-border-radius: 70px;
    -o-border-radius: 70px;
    text-align: center;
}
.bg-dark .blog-post-format-icon {
    background: rgba(0,0,0, .1);
}
.blog-post-format-icon i {
    line-height: 70px;
    font-size: 25px;
}
.blog-post-info h4 {
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 400;
    margin-top: 0px;
}
.blog-post-info  a {
    text-decoration: none;
}
.blog-post-meta {
    font-size: 13px;
}
.blog-post-meta,
.blog-post-meta a  {
    color: #979797;
}
.blog-post-meta  span {
    display: inline-block;
    margin-right: 30px;
    padding-right: 30px;
    border-right: 1px solid  rgba(0,0,0, .1) ;
    font-style: italic;
}
.blog-post-meta  span:last-child {
    border: none;
}


/* ----  [ Masonry Blog ]----------Lioit------------------------*/

.masonry-blog {
  background: #DDD;
  max-width: 1170px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ----  [ Single Post ]----------Lioit------------------------*/
/* ----  [ Single Post Entry Content ]----------Lioit------------------------*/
.entry-content {

}
.single-page-content  {
}
.creative-b  .single-page-content,
.classic-b  .single-page-content {
    padding: 50px 100px;
}
.single-post-wrap {
    padding: 50px 0px;
}
.single-project-wrap {
    padding: 80px 0px;
}
.creative-b .single-post-content  {
    padding: 50px 100px;
    overflow: hidden;
}
.creative-b .single-post-wrap {
    padding: 0px;
    overflow: hidden;
}
.entry-content ol, .entry-content p, .entry-content ul {
    margin: 15px 0 40px 0;

    font-size: 17px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}
.entry-content {
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}
.entry-content .wrapper>:first-child,.entry-content>:first-child {
    margin-top: 0;
}

.entry-content .wrapper>:last-child,.entry-content>:last-child {
    margin-bottom: 0;
}
.entry-content iframe {
    margin-bottom: 20px;
}

.entry-content hr {
    height: 1px;
    width: 60%;
    border: 0;
    margin: 50px auto;
    background: #dfdfdf;
}


.entry-content p {
    overflow: visible;
    display: block;
}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6 {

}
.entry-content h1+*,.entry-content h2+*,.entry-content h3+*,.entry-content h4+*,.entry-content h5+*,.entry-content h6+* {

}

.entry-content dl,.entry-content ol,.entry-content ul {
    margin-left: 5%;
}

.entry-content li {
    margin: 0px;
    padding: 0 2.5%;
}

.entry-content li:last-child {
    margin-bottom: 0;
}

.entry-content dt {
    font-weight: 600;
}

.entry-content dd {
    margin: 0 0 20px 5%;
    font-size: 16px;
}

.entry-content pre {
    margin: 50px 0;
}

.entry-content .gallery-caption {
    border-left: 3px solid #eee;
    margin: 0;
    padding: 20px 5%;
    line-height: 24px;
}

.entry-content .annotation {
    position: relative;
    width: 100%;
}

.entry-content .annotation .main {
    position: absolute;
    width: 250px;
    top: 0;
    right: -290px;
    border-bottom: 1px solid #eeeeef;
    background: #fff;
    padding: 15px;
}

.entry-content .annotation .main h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #585858;
}

.entry-content .annotation .main p {
    margin: 15px 0 25px;
    font-size: 15px;
    color: #979aa3;
    line-height: 28px;
}

.entry-content table {
    clear: both;
    border-collapse: collapse;
    width: 100%;
}

.entry-content th {
    background: #F0F0F0;
    font-weight: 700;
}

.entry-content td,.entry-content th {
    border: 1px solid #DBDBDB;
    padding: .5rem;
    text-align: left;
}

.entry-content .wide {
    display: block;
    margin: 50px -75px;
}


.custom-quote {
    overflow: visible;
}
.custom-quote:before {
      display: none;
}
.custom-quote p:after {
      display: none;
}
.entry-content .custom-quote {
    padding: 50px 50px 50px 50px;
    margin: 50px 0;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, .05);
    background: rgba(0, 0, 0, .02);
    border-radius: 2px;
    text-align: center;
}
.entry-content .quote-icon{
    width: 50px;
    height: 50px;
    position: absolute;
    top: -25px;
    left: 50%;
    margin-left: -25px;
    background: #28a8d3;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50px !important;
}
.entry-content .custom-quote p {
    margin: 15px 0;
}
.custom-quote footer:before {
    display: inline-block;
    margin-right: 10px;
}
.entry-content .custom-quote cite {
    display: block;
    margin-top: 15px;
    font-size: 15px;
    font-style: normal;
}

.entry-content.dark {
    padding: 90px 0;
    background: #2c2e32;
    color: #e2e2e2!important;
}

.entry-content.dark a,.entry-content.dark h1,.entry-content.dark h2,.entry-content.dark h3,.entry-content.dark h4,.entry-content.dark h5,.entry-content.dark h6,.entry-content.dark li,.entry-content.dark ol,.entry-content.dark p,.entry-content.dark ul {
    color: #e2e2e2;
}

.entry-content .full img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
.image-attachment {
    margin-bottom: 40px;
}
.entry-content a {


}

.entry-content a:hover {

}

@media (max-width:1375px) {
    .entry-content .annotation .main {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        margin: 10px 0;
    }

    .entry-content .annotation .main p {
        margin: 10px 0;
    }
}

@media (max-width:1050px) {
    .entry-content .wide {
        display: block;
        margin: 50px 0;
    }
}

@media (max-width:840px) {
    .entry-content {
        margin: 10% auto;
        margin-top: 0;
    }
}

@media (max-width:640px) {
    .entry-content {
        font-size: 18px;
    }

    .entry-content.dark {
        padding: 40px 0;
    }

    .entry-content h1 {
        font-size: 38px;
        line-height: 48px;
    }

    .entry-content h2,.entry-content h3 {
        font-size: 24px;
        line-height: 38px;
    }

    .entry-content h4 {
        font-size: 20px;
        line-height: 30px;
    }

    .entry-content h5 {
        font-size: 16px;
        line-height: 28px;
    }

    .entry-content .wide,.entry-content .wide blockquote,.entry-content blockquote,.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.entry-content ol,.entry-content p,.entry-content pre,.entry-content ul {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .entry-content hr {
        margin: 40px auto;
    }

    .entry-content ol,.entry-content p,.entry-content ul {
        font-size: 18px;
        line-height: 32px;
    }
}

@media (max-width:450px) {
    .entry-content {
        font-size: 16px;
    }

    .entry-content.dark {
        padding: 30px 0;
    }

    .entry-content h1 {
        font-size: 36px;
        line-height: 46px;
    }

    .entry-content h2,.entry-content h3 {
        font-size: 22px;
        line-height: 36px;
    }

    .entry-content h4 {
        font-size: 18px;
        line-height: 28px;
    }

    .entry-content h5 {
        font-size: 15px;
        line-height: 26px;
    }

    .entry-content .wide,.entry-content .wide blockquote,.entry-content blockquote,.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.entry-content ol,.entry-content p,.entry-content pre,.entry-content ul {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .entry-content hr {
        margin: 30px auto;
    }

    .entry-content ol,.entry-content p,.entry-content ul {
        font-size: 16px;
        line-height: 30px;
    }
}

.entry-content .aligncenter,div.aligncenter {
    display: block;
    margin: 5px auto;
}

.entry-content .alignright {
    margin-left: 40px;
}

.entry-content .alignleft {
    margin-right: 40px;
}

.entry-content .aligncenter {
    margin: 30px auto;
}

.entry-content a img.alignright {
    float: right;
}

.entry-content a img.alignleft {
    float: left;
}

.entry-content a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.entry-content .wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}

.entry-content .wp-caption.alignnone {
    margin: 5px 0 15px;
}

.entry-content .wp-caption.alignleft {
    margin: 5px 5% 15px 0;
}

@media (max-width:700px) {
    .entry-content .wp-caption.alignleft {
        float: none;
        margin: 0 auto;
    }
}

.entry-content .wp-caption.alignright {
    margin: 5px 0 15px 5%;
}

@media (max-width:700px) {
    .entry-content .wp-caption.alignright {
        float: none;
        margin: 0 auto;
    }
}

.entry-content .wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.entry-content .wp-caption p.wp-caption-text {
    font-size: 13px;
    line-height:22px;
    margin: 0;
    padding: 10px 4px 5px;
}

.entry-content img.alignright {
    margin: 5px 0 15px 5%;
}

@media (max-width:700px) {
    .entry-content img.alignright {
        float: none;
        margin: 0 auto;
    }
}

.entry-content img.alignleft {
    margin: 5px 5% 15px 0;
}

@media (max-width:700px) {
    .entry-content img.alignleft {
        float: none;
        margin: 0 auto;
    }
}

.entry-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.entry-content .alignright {
    float: right;
}

.entry-content .alignleft {
    float: left;
}

.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.entry-content.full{
   width: 100%;
   left: 0px;
}
/* ----  [ Post navigation wrap ]----------Lioit------------------------*/
.post-navigation-wrap {
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.post-navigation-left {
    border-right: 1px solid rgba(0, 0, 0, .05);
    width: 50%;
    overflow: hidden;
    padding-right: 30px;
}
.post-navigation-right {
    border-left: 1px solid transparent;
    width: 50%;
    padding-left: 6%;
}
.post-navigation a {
    display: block;
}
.ptnav-icon {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 22px;
}
.post-navigation-left .ptnav-title {

}
.post-navigation-right .ptnav-title {

}
.ptnav-title {
    display: inline;
}
.ptnav-title h6 {
    padding-top: 25px;
}
.ptnav-title span {
    display: none;
}
.post-navigation-right .ptnav-title {
}

/* ----  [ Post Single Navbar ]----------Lioit------------------------*/
.post-single-nav {
    overflow: hidden;
}
.extra-meta-wrap {
    height: 90px;
}
.extra-meta {
    padding-top: 30px;
    overflow: hidden;
}
.extra-meta i {
    margin-right: 5px;
    font-size: 18px;
}
.extra-meta a,
.post-like a {
    color: #646366;
}
.extra-meta  .post-author {
    padding-left: 20px;
    float: left;
    margin-right: 30px;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
}
.extra-meta .post-author img {
    width: 32px;
}
.extra-meta .post-author img {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 20px;
}

.extra-meta  .post-comments {
    font-size: 15px;
    overflow: hidden;
    font-weight: 600;
}
.extra-meta  .post-comments a {
    margin-left: 5px;
    display: inline-block;
}
.extra-meta  .post-comments i {
    margin-right: 5px;
}

/* ----  [ Classic Post Single Navbar ]----------Lioit------------------------*/
.classic-post-single-nav {
    border-top: 1px solid rgba(0, 0, 0, .07);
    margin-bottom: 30px;
    overflow: hidden;
}
.classic-post-single-nav .extra-meta-wrap {
    height: 50px;
}
.classic-post-single-nav .extra-meta {
    padding-top: 12px;
    font-size: 15px;
}
.classic-post-single-nav .post-share {
  padding-right: 10px;
  padding-left: 30px;
  border-left: none;
  height: 50px;
  margin-left: 40px;
}
.classic-post-single-nav .share-post-btns a {
    width: 26px;
    height: 26px;
    line-height: 26px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.classic-post-single-nav .post-category {
  font-size: 15px;
  overflow: hidden;
  font-weight: 600;
}
/* ----  [ Post Heading - Creative Blog ]----------Lioit------------------------*/
.small-heading-wrap {
    padding: 50px 0px 0px 0px;
}
.small-heading-wrap .post-heading h1.post-title {
    margin-bottom: 10px;
}

/* ----  [ Single Post Bottom ]----------Lioit------------------------*/
.post-btm {
    overflow: hidden;
    margin-bottom: 80px;
}
.post-tags ul {
    margin: 0;
    padding: 0;
}
.post-tags ul li {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    margin-right: 5px;

}
.post-tags ul a,
.post-btm .back-to-top a {
    border: 1px solid rgba(0, 0, 0, .09);
    display: inline-block;
    padding: 3px 15px;
    border-radius: 40px;
    font-size: 13px;
}
.post-tags.round ul a{
    border-radius: 3px;
}

.creative-b .post-btm {
    border-top: 1px solid rgba(0, 0, 0, .09);
    border-bottom: 1px solid rgba(0, 0, 0, .09);
    padding: 15px 30px;
    margin-bottom: 50px;
}
.creative-b .post-btm .post-tags ul li a {
    font-size: 13px;
    color: #7b8086;
}
.post-btm .back-to-top a {
    font-weight: 600;
    color: #414046;
}
.post-btm .round  a{
    border-radius: 3px;
}
.freelancer .post-tags ul a,
.freelancer .post-btm .back-to-top a
{
    padding: 1px 15px;
}
/* ----  [ Single Post Share Wrap ]----------Lioit------------------------*/
.creative-b .post-share-wrap,
.classic-b .post-share-wrap {
    padding-bottom: 90px;
}
.creative-b .share-post-btns a,
.classic-b  .share-post-btns a,
.freelancer .share-post-btns a {
    display: inline-block;
    width: auto;
    height: auto;
    text-align: left;
    line-height: 20px;
    font-size: 14px;
    margin-right: 15px;
    margin-left: 15px;
    font-family: "Source Sans Pro", arial, sans-serif;
}
.creative-b .extra-meta-wrap  .share-post-btns a,
.classic-b .extra-meta-wrap  .share-post-btns a,
.freelancer .extra-meta-wrap  .share-post-btns a  {
    text-align: center;
    padding: 4px 10px;
    margin: 0px 5px;
}
.creative-b .share-post-btns a i,
.classic-b .share-post-btns a i,
.freelancer .share-post-btns a i {
    margin-right: 10px;
}
.creative-b .extra-meta-wrap .share-post-btns a i,
.classic-b .extra-meta-wrap .share-post-btns a i,
.freelancer .extra-meta-wrap .share-post-btns a i,  {
    margin: 0px;
}
/*
 * Single - Author Details
 */
.author-details.single-author {
    padding: 0px;
}
.author-details.single-author .author-avatar {
    margin-top: -50px;
}
.creative-b  .author-details.single-author {

}
/* ----  [ Post Share ]----------Lioit------------------------*/
.post-share {
    padding-right: 20px;
    padding-left: 40px;
    border-left: 1px solid rgba(0, 0, 0, .07);
    height: 90px;
    margin-left: 40px;
}
.share-post-btns a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .65);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 5px;
}
.share-post-btns a i {
    margin: 0;
    font-size: 14px;
}
.extra-meta .share-post-btns a i {
    margin-right: 0px !important;
}
.post-like {
    font-weight: 600;
}
/* ----  [ Post Meta ]----------Lioit------------------------*/
.post-meta-wrap {
    padding:  60px;

}
.post-meta {

}
.post-meta h1.post-title {
    font-size: 26px;
}
.post-meta span{
    margin-right: 10px;
}
.post-meta span,
.post-meta span a{
    color: #a0a3a8;
}
.post-meta span i {
    margin-right: 5px;
    font-size: 15px;
}
.post-meta span .meta-text {
    margin: 0px;
}
/* ----  [ Classic Post Meta ]----------Lioit------------------------*/
.classic-post-meta-wrap {
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    font-size: 12px;
}

.classic-post-meta-wrap span {
    display: inline-block;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding: 8px  18px 8px 18px;
    font-weight: 400;
    margin-right: 0px;
    color: #414046;
}
.classic-post-meta-wrap span:last-child {
    border-right: none;
}
.classic-post-meta-wrap span i {
    display: inline-block;
    color: #9c9b9e;
    margin-top: 2px;
}

/* ----  [ Post Heading - Freelancer ]----------Lioit------------------------*/
.single-heading {
    overflow: hidden;
}
.single-heading .post-title {
    margin-bottom: 20px;
}
.single-heading .fr-post-meta-wrap  .post-meta span {
    display: inline-block;
    margin-right: 35px;
}


.single-heading {
    overflow: hidden;
}
.single-heading .project-title {
    margin-bottom: 20px;
}
.single-heading .project-categories {
    margin-bottom: 30px;
    font-size: 600;
}

.featured-post .classic-post-meta-wrap,
.freelancer .classic-post-meta-wrap {
    background: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    color: #fff;
    display: inline-block;
}
.featured-post .classic-post-meta-wrap a,
.freelancer  .classic-post-meta-wrap a {
    color: #fff;
}
.featured-post .classic-post-meta-wrap span,
.featured-post .classic-post-meta-wrap .post-meta,
.freelancer .classic-post-meta-wrap .post-meta,
.freelancer .classic-post-meta-wrap span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

/* ----  [ Single - Author Details ]----------Lioit------------------------*/
.author-details .author-avatar {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 101px;
    height: 101px;
    background: rgba(0, 0, 0, .1);
    margin: 0 auto;
}
.author-details img {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 85px;
    height: 85px;
    margin-top: 8px;
}
.author-details h1.author-title ,
.author-details h2.author-title {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 30px;
}
.author-details h1.author-title small,
.author-details h2.author-title small {
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding-top: 15px;
}
.author-details .author-bio{
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 40px;
}
.bg-dark .author-details .author-bio{
    margin-bottom: 40px;
    color: #fff;
}
.author-social a,
.footer-social-round a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    margin: 0px 5px;
    background: rgba(0, 0, 0, .2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.footer-social-round a {
    color: #fff !important;
}


.post-author-details {
    overflow: hidden;
}
.post-author-content {
    overflow: hidden;
    padding: 30px 40px;
}
.post-author-col {
    overflow: hidden;
    width: 130px;
    margin-right: 40px;
}
.post-author-col .post-author-avatar {
    width: 130px;
    height: 130px;
    margin-bottom: 25px;
    overflow: hidden;
}
.post-author-col .post-author-avatar,
.post-author-col .post-author-avatar img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.post-author-data p {
    font-size: 14px;
}

/* ----  [ Single Related Posts ]----------Lioit------------------------*/
.related-list {

}
.related-list .related-post {
    overflow: hidden;
    height: 130px;
    position: relative;
    background: #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.related-list .related-post img {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .6;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.rl-post-details {
    position: absolute;
    top: 30px;
    left: 30px;
    padding-right: 30px;
}
.rl-post-details .rl-post-title {
    font-size: 15px;
    color: #fff;
    margin-bottom: 10px;
}
.rl-post-author {
    display: block;
    color: #fff;
    font-weight: 600;
}
.related-list .related-post:hover img {
    opacity: 1;
}

.creative-b  .related-list .related-post {
    overflow: hidden;
    height: 160px;
    background: #fcfcfc;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.creative-b .related-list .related-post img {
    opacity: .0;
}
.creative-b .related-list .related-post:hover {
    background: #000;
}
.creative-b .related-list .related-post:hover img {
    background: #000;
    opacity: .5;
}
.creative-b .rl-post-details .rl-post-title,
.creative-b .rl-post-details .rl-post-author {
    color: #7b8086;
}
.creative-b .related-list .related-post:hover .rl-post-title,
.creative-b .related-list .related-post:hover .rl-post-author {
    color: #fff;

}
/* ----  [ Single Comments List ]----------Lioit------------------------*/
.comments-heading {
    overflow: hidden;
    margin-bottom: 40px;
}
.comments-list {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

.children {
    -webkit-padding-start: 12%;
}

li.comment {
    list-style: none;

}

li.comment .contents {
    overflow: hidden;
}

li.comment .commentinfo {
    overflow: hidden;
    margin-bottom: 15px;
}

li.comment .profile {
    display: block;
    width: 12%;
    float: left;
}

li.comment .profile img {
    border-radius: 90px;
    max-width: 64px;
    height: 64px;
}

li.comment .main {
    width: 88%;
    float: right;
}
li.comment a.replay {
    display: inline-block;
    float: left;
    padding: 10px 0px 20px 0px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
li.comment a.replay i {
    margin-right: 5px;
    font-size: 15px;
    color: #c7c7c7;

}
li.comment hr {
    margin: 45px 0;
    height: 1px;
    width: 100%;
    border: 0;
    background: #f0f0f0;
}

li.comment h4 {
    margin: 0;
    font-size: 14px;
    float: left;
    margin-right: 30px;
    font-weight: 400;
    line-height: normal;
}

li.comment h4 a {

}

li.comment h4 img {
    display: none;
    margin-right: 10px;
    vertical-align: -6px;
}

li.comment .meta {
    float: left;
    overflow: hidden;
}

li.comment .meta .info {
    margin: 4px 0 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #8d8f92;
    overflow: hidden;
}

li.comment .meta span i {
    margin: 0 5px;
    display: inline-block;
}

li.comment .body p {
    margin: 15px 0;
    clear: both;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

li.comment .author {

}

li.comment .buttons {
    float: right;
    margin-top: 0px;
}

li.comment .buttons a,li.comment .buttons span {

}

li.comment .buttons .isauthor {
    display: none;
}

li.comment.bypostauthor>.contents .buttons .isauthor {
    display: inline-block;
    float: left;
}

li.comment .buttons a {
    display: inline-block;
    margin-left: 10px;
    -webkit-transition: background .1s ease-in,color .1s ease-in;
    -moz-transition: background .1s ease-in,color .1s ease-in;
    transition: background .1s ease-in,color .1s ease-in;
}

li.comment .buttons a:hover {

    background: #484f5c;
}

li.comment .buttons>:first-child {
    margin-right: 0;
}
li.comment .children .author .gravatarsmall  {
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      width: 24px;
}
@media (max-width:800px) {
    li.comment .profile {
        display: none;
    }

    li.comment .main {
        width: 100%;
    }

    li.comment h4 img {
        display: inline-block;
    }
}

@media (max-width:640px) {
    li.comment hr {
        margin: 25px 0;
    }
}

@media (max-width:485px) {
    li.comment .meta .info {
        display: none;
    }

    li.comment .meta h4 {
        margin-top: 20px;
    }

    li.comment .buttons span {
        display: none!important;
    }
}
.comment-form {
    position: relative;

}
.comment-respond {
    padding-top: 50px;
    font-size: 13px;
    text-transform: capitalize;
    overflow: hidden;
}
.comment-respond h4 {
    margin-bottom: 60px;
    color: #8d8f92;
    font-weight: 400;
}
.comment-respond .input-holder input {
    height: 42px;
}
.comment-respond #author,.comment-respond #email,.comment-respond #url {
    display: inline-block;
    color: #e7e8ea;
    border: 0;
    border-radius: 3px;
}
.comment-respond  .textarea-holder label {
  padding-top: 5px;
  padding-bottom: 14px;
  color: #3d414a;
}
.comment-respond textarea {
    color: #e7e8ea;
    border-radius: 3px;
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    box-shadow: none;

}
.comment-respond .btn-holder {

}

.comment-respond #author,.comment-respond #email,.comment-respond #url,.comment-respond textarea {
    outline: 0;
}

.comment-respond .logged-in-as {
    color: #fff;
    margin-bottom: 30px;
}

.comment-respond .logged-in-as a {
    color: #fff;
}

.comment-respond ::-webkit-input-placeholder {
    color: #e7e8ea;
}

.comment-respond :-moz-placeholder {
    color: #e7e8ea;
}

.comment-respond ::-moz-placeholder {
    color: #e7e8ea;
}

.comment-respond :-ms-input-placeholder {
    color: #e7e8ea;
}

.comment-respond #author {
    margin-left: 0;
}

.comment-respond .logged-in-as {
    font-size: 15px;
}

.comment-respond #cancel-comment-reply-link,.comment-respond .submit {
    float: right;
    padding: 12px 32px;
    font-size: 12px;
    border: 0;
    border-radius: 90px;
    background: #16191b;
    color: #bfc6ce;
    margin-top: 20px;
    text-transform: uppercase;
    -webkit-transition: color .3s ease-out,background .3s ease-out,opacity .3s ease-out,border-color .3s ease-out;
    -moz-transition: color .3s ease-out,background .3s ease-out,opacity .3s ease-out,border-color .3s ease-out;
    transition: color .3s ease-out,background .3s ease-out,opacity .3s ease-out,border-color .3s ease-out;
}

.comment-respond #cancel-comment-reply-link:hover,.comment-respond .submit:hover {
    background: #E7E8E8;
    color: #616971;
}

.comment-respond #cancel-comment-reply-link {
    float: none;
    font-size: 10px;
    padding: 10px 24px;
}

@media (max-width:540px) {
    .comment-respond #author,.comment-respond #email,.comment-respond #url {
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
}

li.comment.depth-10 .profile img,li.comment.depth-2 .profile img,li.comment.depth-3 .profile img,li.comment.depth-4 .profile img,li.comment.depth-5 .profile img,li.comment.depth-6 .profile img,li.comment.depth-7 .profile img,li.comment.depth-8 .profile img,li.comment.depth-9 .profile img {
    width: 32px;
    height: 32px;

}
li.comment.depth-10 .profile ,li.comment.depth-2 .profile ,li.comment.depth-3 .profile ,li.comment.depth-4 .profile ,li.comment.depth-5 .profile ,li.comment.depth-6 .profile ,li.comment.depth-7 .profile img,li.comment.depth-8 .profile ,li.comment.depth-9 .profile  {
    width: 8%;

}
li.comment.depth-10 .main ,li.comment.depth-2 .main ,li.comment.depth-3 .main ,li.comment.depth-4 .main ,li.comment.depth-5 .main ,li.comment.depth-6 .main ,li.comment.depth-7 .main img,li.comment.depth-8 .main ,li.comment.depth-9 .main  {
    width: 92%;

}
li.comment.depth-10 h4 img,li.comment.depth-2 h4 img,li.comment.depth-3 h4 img,li.comment.depth-4 h4 img,li.comment.depth-5 h4 img,li.comment.depth-6 h4 img,li.comment.depth-7 h4 img,li.comment.depth-8 h4 img,li.comment.depth-9 h4 img {
    display: inline-block;
}

li.comment.depth-10 hr,li.comment.depth-2 hr,li.comment.depth-3 hr,li.comment.depth-4 hr,li.comment.depth-5 hr,li.comment.depth-6 hr,li.comment.depth-7 hr,li.comment.depth-8 hr,li.comment.depth-9 hr {
    margin: 25px 0;
}

/* ----  [ Magazine ]----------Lioit------------------------*/

/* ----  [ Magazine - Widgets ]-------Lioit-------*/
.classic-magazine .sidebar .widget  {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    margin-bottom: 0px;
}
.classic-magazine .sidebar .widget:last-child {
    border-bottom: none;
}

.classic-magazine .sidebar .widget .widget-title {
    overflow: hidden;
    height: 30px;
    border-bottom: none;
    margin-top: 30px;
}
.classic-magazine .sidebar .instagram-widget.widget .widget-title  {

}
.classic-magazine .sidebar .widget .widget-title h4 {
    font-size: 13px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 5px 15px 5px 15px !important;
    line-height: 13px !important;
    float: left;
    background: #262626;
    color: #fff;
    border-radius: 4px;
}
.classic-magazine .sidebar .widget .widget-title h4 i {
    color: #fff;
}
.classic-magazine .sidebar .widget .widget-title .btn-mod {
    margin-top: 0px;
}
.container-wrapper .classic-magazine .sidebar .widget-content {

}
.classic-magazine .recent-posts-widget .recent-post {
    padding-top: 20px;
    padding-bottom: 20px;
}
.classic-magazine .recent-posts-widget .recent-post:first-child {
    padding-top: 10px;
}
.classic-magazine .recent-posts-widget .recent-post:last-child {
    border-bottom: none;
}
.classic-magazine .social-counter {
    padding: 0px;
}
.classic-magazine .recent-posts-widget .recent-post .small-thumb {
    width: 100px;
    height: 75px;
}
.classic-magazine .social-counter {
    padding: 30px;
}
.classic-magazine .social-counter-col {
    padding: 3px 5px 5px 5px;
}
.classic-magazine .scol-meta {
    width: 154px;
}
.classic-magazine .scol-meta strong {
    display: inline-block;
    float: left;
    padding-top: 3px;
    margin-right: 10px;
}
.classic-magazine .scol-meta span {
    padding-top: 6px;
}
.classic-magazine .social-counter-col .scol-icon {
    margin-right: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: transparent;
}
/* ----  [ Magazine - Pagination ]-------Lioit-------*/
.classic-magazine .blog-pagination {
    text-align: left;
    padding: 0px;
}
.classic-magazine .pagination > li > a,
.classic-magazine .pagination > li > span
 {
 	border-width: 1px !important;
 	width: 32px ;
 	height: 32px !important;
 	line-height: 30px !important;
    border-radius: 3px !important;
    font-size: 13px;
    margin: 0px 2px !important;
}
.classic-magazine .pagination > li:first-child > a,
.classic-magazine .pagination > li:last-child > a {
    padding: 0px 10px;
}
.classic-magazine .pagination > li > a:hover,
.classic-magazine .pagination > li > span:hover  {
 	background: #fff;
 	color: #333;
    border-width: 1px !important;
}
/* ----  [ Magazine - News Blocks ]-------Lioit-------*/
.news-block {
    margin-bottom: 40px;
    position: relative;
}
.news-block-title .block-title {
    display: inline-block;
    color: #fff;
    background: #28a8d3;
    border: 1px solid transparent;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 0px 15px 7px 15px !important;
    line-height: 13px !important;
}
.block-post {
    overflow: hidden;
}
.bp-thumb {
    height: 195px;
    overflow: hidden;
    margin-bottom: 15px;
}
.news-block .block-list .blist-post {
    overflow: hidden;
    padding: 10px 0px;
}
.news-block .block-list .blist-post:first-child {
    padding-top: 0px;
}
.news-block .block-list .blist-post:last-child {
    margin-bottom: 10px;
}
.news-block .blist-post .blist-thumb.pull-left {
    width: 100px;
    height: 75px;
    margin-right: 20px;
    overflow: hidden;
}
.news-block .blist-post .blist-details {
    overflow: hidden;
}
.news-block .blist-post .bpost-title {
    margin: 0px 0px 10px 0px;
}
.news-block .blist-post .blist-details {
    font-size: 12px;
}
/* ----  [ Magazine - News Post ]-------Lioit-------*/
.nbm2-post {
    overflow: hidden;
    position: relative;
    height: 210px;
    margin-bottom: 20px;
}
.nbm2-thumb {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 220px;
}
.nbm2-details {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 20px;
    z-index: 99;
}
.nbm2-post .nbm2-thumb a ,
.carousel-post .carousel-post-thumb a  {
    display: block;
}
.nbm2-post .nbm2-thumb a:before,
.carousel-post .carousel-post-thumb a:before  {
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.8)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0);
    -webkit-transition: all 450ms ease-out 0s;
    -moz-transition: all 450ms ease-out 0s;
    -o-transition: all 450ms ease-out 0s;
    transition: all 450ms ease-out 0s;
}
.nbm2-post .nbm2-thumb:hover a:before,
.carousel-post .carousel-post-thumb:hover a:before {
    opacity: 0;
}

.nbm2-post .nbm2-thumb img {

}
.nbm2-post .post-meta {
    font-size: 12px;
}

.news-block-mode2 {

}
.news-block-mode2 .news-block-title {
    width: 93%;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 99;
}
/* ----  [ Magazine - Carousel Posts ]-------Lioit-------*/
.carousel-post {
    position: relative;
    overflow: hidden;
}
.carousel-post .carousel-post-thumb,
.carousel-post .carousel-post-thumb img {
    width: 386px;
    height: 220px;
}
.carousel-post .carousel-post-details {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 30px;
    z-index: 99;
}
.carousel-post .carousel-post-details h3 {
    margin: 0px 0px 10px 0px;
}
/* ----  [ Magazine - Latest Posts ]-------Lioit-------*/
.latest-post-thumb {
    position: relative;
}
.latest-post-thumb .category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99;
}
.latest-post-thumb .category-badge a {
    display: inline;
}
/* ----  [ Blog Sidebar ]----------Lioit------------------------*/
.sidebar {
 	padding-bottom: 5px;
}
/* ----  [ Widget Style ]----------Lioit------------------------*/

.sidebar .widget {
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
}
.sidebar .widget .widget-title {
    overflow: hidden;
    padding: 0px 30px;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.sidebar .widget .widget-title h4 {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 70px;
    float: left;
}
.sidebar .widget.bg-dark .widget-title {
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.sidebar .widget .widget-title .title-icon {
    margin-right: 10px;
}
.sidebar .widget.bg-dark .widget-title small {
    margin-left: 15px;
    color: #fff;
    font-size: 13px;
}
.sidebar .widget .widget-title small {
    margin-left: 15px;
    font-size: 13px;
    line-height: 70px;
    float: right;
}
.sidebar .widget .widget-title .btn-mod {
    float: right;
    display: inline-block;
    line-height: 20px;
    margin-top: 18px;
}
.sidebar .widget-content {
    padding: 30px;
}

.sidebar .widget-content ul{
    padding: 0px;
    margin: 0px;
    color: #8d8f92;
}
.sidebar .widget-content ul ul{
    margin-left: 15px;
}
.sidebar .widget-content ul li,
.sidebar .widget-content ul li a {
    color: #8d8f92;
    display: block;
}
.sidebar .widget-content ul li a {
    padding: 5px 0px;
}
.sidebar .widget-content ul li a i {
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
}
/* ----  [ Ad Widget ]----------Lioit------------------------*/
.sidebar .widget.ad300 img,
.sidebar .widget.ad300 a {
    margin: 0 auto;
    display: block;
    width: 300px;
    height: 250px;
}
.sidebar .widget.ad300 a {
    display: block;
}
/* ----  [ Social Buttons Widget ]----------Lioit------------------------*/
.social-profiles {

}
.social-profiles a {
    display: inline-block;
    background: rgba(0, 0, 0, .1);
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 6px;
}
.social-profiles a:last-child {
    margin-right: 0px;
}
/* ----  [ Author Profile Widget ]----------Lioit------------------------*/
.author-profile {
    overflow: hidden;
}
.author-profile .author-avatar {
    width: 70px;
    height: 70px;
    margin: 0px auto 0px auto;
}
.author-card-head {
    padding: 30px 0px 20px 0px;
}
.author-card-head h4 {
    margin-bottom: 10px;
}
.author-facts {
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.author-facts .fact {
    float: left;
    width: 116px;
    height: 80px;
    border-right: 1px solid rgba(0, 0, 0, .06);
    text-align: center;
}
.author-facts .fact:last-child {
    border-right: none;
}
.author-facts .fact strong {
    display: block;
    font-size: 16px;
    padding-top: 14px;
}
.author-facts .fact span {
    display: block;
    font-size: 12px;
    color: #7b8086;
}
.card-buttons {
    padding: 30px;
    overflow: hidden;
}
.author-posts-btn {
    margin-right: 10px;
}
.small-social {
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 2px;
}
.small-social a {
    display: inline-block;
    width: 28px;
    width: 28px;
    border-right: 1px solid rgba(0, 0, 0, .09);
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    margin: 0px;
}
.small-social a:last-child {
    border-right: none;
}
/* ----  [ Twitter Widget ]----------Lioit------------------------*/
.twitter-widget {

}
.twitter-widget .twitt {
    font-size: 14px;
    overflow: hidden;
}
.twitter-widget .twitt p {
    margin-top: 10px;
    display: inline-block;
    font-size: 14px;
}
.twitt-date {
    font-size: 12px;
}
/* ----  [ Social Counter Widget ]----------Lioit------------------------*/
.social-counter {
    overflow: hidden;
    padding: 10px 0px;
}
.social-counter-col {
    padding: 20px 30px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.social-counter-col:last-child {
    border-bottom: none;
}
.social-counter-col .scol-icon {
    margin-right: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .1);
}
.scol-meta {
     font-family: 'Montserrat';
}
.scol-meta strong {
    display: block;
    font-size: 13px;
}
.scol-meta span {
    display: block;
    font-size: 10px;
}

/* ----  [ Video Post Widget ]----------Lioit------------------------*/
.video-posts-content {
    padding: 0px 30px;
}
.video-post-thumb {
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
}
.video-post-thumb a:before {
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0);
    -webkit-transition: all 450ms ease-out 0s;
    -moz-transition: all 450ms ease-out 0s;
    -o-transition: all 450ms ease-out 0s;
    transition: all 450ms ease-out 0s;
}
.video-post-thumb:hover a:before {
    opacity: 0;
}
.h-v-play-ico {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    z-index: 99;
    z-index: 1;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid #fff;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
    color: rgba(255,255,255, .97);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.h-v-play-ico i {
    color: #fff;
    margin-right: -5px;
}
.iframecustom{
    overflow: hidden !important;
    border: none !important;
    width: 100% !important;
}
/* ----  [ Editor Picks Widget ]----------Lioit------------------------*/
.editor-pick-post {
    padding: 10px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.editor-pick-post:last-child {
    border-bottom: none;
}
.editor-pick-post h5 {
    font-size: 13px;
    line-height: 19px;
    margin-bottom: 5px;
}
.editor-pick-post .post-date {
    font-size: 13px;
}
/* ----  [ Cat Post Columns Widget ]----------Lioit------------------------*/
.cat-post-columns {

}
.cat-post-columns .widget-post-col {
    margin-bottom: 15px;
}
.widget-post-col .post-col-thumb {
    margin-bottom: 0px;
}
.cat-post-columns .widget-post-col .entry-title {
    font-size: 12px;
}
/* ----  [ Instagram Widget ]----------Lioit------------------------*/
.instagram-widget {
    position: relative;
}
.instagram-widget .widget-title {
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
    color: #fff;
    width: 100%;
}
.instagram-widget .widget-title h4 {
    color: #fff;
}
.instagram-widget .instagram-feed .over,
.over-top {
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 159px;
    z-index: 99;
    background:  url('assets/images/placeholder-top1.png') repeat-x center top;
}
.instagram-widget .instagram-wrapper {
    background: #313035;
}
.instagram-widget .instagram-wrapper img {
    opacity: .7;
}


.instagram-wrapper {
    position: relative;
}
.instagram-wrapper img{
    opacity: .5;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.instagram-wrapper img:hover {
    opacity: 1;
}
.follow-instagram {
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    z-index: 99;
}

/* ----  [ Recent Posts Widget ]----------Lioit------------------------*/
.recent-posts-widget {
    overflow: hidden;
}
.recent-posts-widget .widget-content {
    padding: 0px;
}
.recent-posts-widget .recent-post {
    overflow: hidden;
    padding: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.recent-posts-widget .recent-post:last-child {
    border-bottom: none;
}
.recent-posts-widget .recent-post .small-thumb {
    width: 80px;
    height: 80px;
    overflow: hidden;
    margin-right: 30px;
}
.recent-posts-widget .recent-post .recent-post-content h5 {
    margin: 0px 0px 0px 0px;
    font-size: 13px;
}
.recent-posts-widget .recent-post .recent-post-content .post-date {
    font-size: 12px;
    font-family: 'Montserrat';
}

/* ----  [ Download File Widget ]----------Lioit------------------------*/
.file-details {
    overflow: hidden;
}
.file-icon {
    float: left;
    background: #e14b4e;
    width: 45px;
    height: 60px;
    line-height: 60px;
    position: relative;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-family: 'Montserrat';
    margin-right: 30px;
}
.icon-fold {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 16px;
    height: 14px;
    display: block;
    background: transparent url('assets/images/fold.png') no-repeat left top;
}
.icon-white {
    position: absolute;
    background: transparent url('assets/images/fold-white.png') ;
    top: 0px;
    right: 0px;
    width: 16px;
    height: 14px;
    display: block;
}
.file-meta {
    overflow: hidden;
    width: 115px;
    font-family: 'Montserrat';
}
.file-title {
    font-size: 12px;
    line-height: 18px ;
    display: inline-block;
    margin-bottom: 0px;
}
.file-size {
    font-size: 10px;
    text-transform: uppercase;
    color: #acacad;
    margin-top: -5px;
    display: inline-block;
}
.file-btn {
    padding-top: 15px;
}
/* ----  [ Timeline Widget ]----------Lioit------------------------*/
.timeline-wrap,.timeline-item {
    padding: 0;
    margin: 0;
}
.timeline-item {
    display: block;
    clear: both;
    position: relative;
    margin-left: 3px;
}

.timeline-item a {
    display: block;
}
.timeline-item-date {
    display: block;
    position: relative;
    clear: both;
    margin: 0 0 0 -3px;
    padding: 0;
    color: #cccccc;
    font-size: 85%;
    height: 16px;
    line-height: 16px;
}

.timeline-item-date .fa {
    font-size: 13px;
    line-height: 16px;
    padding: 0 13px 0 0;
    color: #cccccc;
}
.timeline-item-date span {
    font-family: 'Montserrat';
    font-size: 12px;
    margin-left: 10px;
}

.timeline-item-date small {
    padding-left: 5px;
}
.timeline-item-title {
    display: block;
    position: relative;
    margin: 0 0 0 2px;
    padding: 5px 0 30px 30px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    border: 2px solid #cccccc;
    border-width: 0 0 0 2px;
    font-family: inherit!important;
    text-decoration: none;
}
.post-content-bd .timeline-item-title a:hover,.timeline-item-title a:hover,.timeline-item-title a {
    text-decoration: none!important;
}

.timeline-item-title:hover {
    color: inherit;
}

.timeline-item:last-child .timeline-item-title {
    padding-bottom: 0;
}
/* ----  [ Calendar Widget ]----------Lioit------------------------*/
.sidebar .widget.widget_calendar {
    padding:0px;
    font-family: 'Montserrat';
}
.sidebar .widget.widget_calendar .widgetTitle{
    padding:10px 10px 0px 0px;
    text-align:center;
}
#calendar_wrap {
    overflow: hidden;
}
#calendar_wrap table, #calendar_wrap th, #calendar_wrap td, #calendar_wrap tr {
    padding: 8px;
    border: 1px solid rgba(0,0,0,0.03);
    border-collapse: collapse;
}
#calendar_wrap #wp-calendar {
    width: 100%;
}
#calendar_wrap #wp-calendar caption {
    font-size: 18px;
    text-transform: capitalize;
    padding: 15px 0;
    color: #202020;
    text-align: center;
}
.footerWidgetsGrid #calendar_wrap #wp-calendar caption {
    color: #ddd;
}
#calendar_wrap #wp-calendar th, #calendar_wrap #wp-calendar td {
    border: 1px solid rgba(0,0,0,0.03);
    text-align: center;
    font-size: 13px;
    color: #7b8086;
}
#calendar_wrap th {
    line-height: 20px;
    background: #fafafa;
    color: #313035 !important;
    font-size: 14px !important;
}
#calendar_wrap #wp-calendar #today, #calendar_wrap #wp-calendar #today {
    background: #28a8d3;
    color: #FFF !important;
}
#calendar_wrap #wp-calendar #today, #calendar_wrap #wp-calendar #today a {
    color: #FFF !important;
}
#wp-calendar #prev {
    border: none;
}
#wp-calendar #prev a,
#wp-calendar #next a {
    display: inline-block;
    color: #111;
    background: rgba(255,255,255, 1);
    border: 1px solid rgba(0, 0, 0, .09);
    padding: 6px 10px;
    font-size: 10px;
    text-transform: capitalize;
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    font-family: 'Montserrat';
    margin: 10px auto;
}
/* ----  [ Weather Widget ]----------Lioit------------------------*/
.weather-widget {
    overflow: hidden;
    background: #19b8ff;
    padding: 20px 40px 0px 40px;
}
.weather-widget  #weather .icon {
    float: left;
    overflow: hidden;
    color: #fff;
    margin-right: 30px;
}
.weather-widget  #weather .icon i {
    font-size: 70px !important;
}
.weather-widget  #weather .info {
    padding-top: 12px;
}
.weather-widget  #weather .info, .weather-widget  #weather .info p, .weather-widget  #weather .info strong {
    color: #fff;
}
/* ----  [ Recent Comments Widget ]----------Lioit------------------------*/
.recent-comments {
    overflow: hidden;
}
.recent-comment {
    overflow: hidden;
    padding: 15px 0px;
    font-size: 13px;
    font-family: 'Montserrat';
}
.rc-author-avatar {
    overflow: hidden;
    margin-right: 20px;
}
.rc-author-avatar,
.rc-author-avatar img {
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    width: 60px;
    height: 60px;
}
/* ----  [ Posts Slider Widget ]----------Lioit------------------------*/
.posts-slider-widget {
    overflow: hidden;
}
.slide-post {
    position: relative;
    overflow: hidden;
    height: 320px;
    background: #000;
}
.slide-post-thumb {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 320px;
    z-index: 9;
    opacity: .7;
}
.slide-post .over {
    position:absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 205px;
    z-index: 9;
    background:  url('assets/images/placeholder-btm.png') repeat-x center bottom;
    padding-top: 30px;
}
.slide-post-details {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    padding: 30px;
}
.slide-post-details .post-title a,
.slide-post-details .post-author a {
    color: #fff;
}
.slide-post-details .post-title {
    font-size: 14px;
    line-height: 26px;
    font-weight: 600;
}
.slide-post-details .post-author {
    font-size: 13px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-weight: 600;
}
.side-navigation-list {
}
.side-navigation-list li {
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.side-navigation-list li a {
    padding: 10px 20px !important;
}
/* ----  [ Tag Cloud Widget ]----------Lioit------------------------*/
.tagcloud {
}
.tagcloud a {
    text-transform: capitalize;
    padding: 4px 12px;
    display: inline-block;
    margin: 0 5px 8px 0;
    color: #151515;
    border: 1px solid rgba(0, 0, 0, .09);
    background: transparent;
    font-size: 14px !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.tagcloud a:hover {
    background: #2c97de;
    color: #FFF;
}
/* ----  [ Blog Pagination ]----------Lioit------------------------*/
.blog-pagination {
    overflow: hidden;
    text-align: center;
    padding: 50px 0px;
}
.blog-pagination .pagination {
    margin: 0 auto;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: none;
    display: inline-block;
    margin: 0 5px !important;
    padding: 0px;
    line-height: 40px;
    height: 45px;
    width: 45px;
    color: #3d414a;
    font-size: 16px;
    font-weight: bold;
    background: transparent;
    border-radius:  45px !important;
    border: 2px solid #dcdcdc;
    text-align: center;
}
.pagination > li > a i {
    margin: 0 5px;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: #28a8d3;
    border: 2px solid #28a8d3;
    color: #fff;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #fff;
    border: 2px solid #28a8d3;
    color: #3d414a;
}
.pagination > li:first-child > a,
.pagination > li:last-child > a {
    width: auto;
    padding: 0px 25px;
}


.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    background-color: #fff;
    border: 2px solid #28a8d3;
    color: #3d414a;
}
.creative-b .blog-pagination {
    padding: 50px 0px 0px 0px;
}
.creative-b .pagination > li > a,
.creative-b .pagination > li > span
{
 	background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.creative-b .pagination > li > a:hover,
.creative-b .pagination > li > span:hover
{
 	background: #fff;
    border: 2px solid #28a8d3;
}
.classic-b .blog-pagination,
.freelancer .blog-pagination {
    text-align: left;
}
.classic-b .blog-pagination,
.freelancer .blog-pagination {
    padding-top: 0px;
}
.classic-b .pagination > li > a,
.classic-b .pagination > li > span,
.freelancer .pagination > li > a,
.freelancer .pagination > li > span
{
 	background: transparent;
    border-radius: 5px !important;
}
.classic-b .pagination > li > a:hover,
.classic-b .pagination > li > span:hover,
.freelancer .pagination > li > a:hover ,
.freelancer .pagination > li > span:hover  {
 	background: #fff;
 	color: #333;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px !important;
}
.classic-b .pagination > .active > a,
.classic-b .pagination > .active > span,
.classic-b .pagination > .active > a:hover,
.classic-b .pagination > .active > span:hover,
.classic-b .pagination > .active > a:focus,
.classic-b .pagination > .active > span:focus,
.freelancer .pagination > .active > a,
.freelancer .pagination > .active > span,
.freelancer .pagination > .active > a:hover,
.freelancer .pagination > .active > span:hover,
.freelancer .pagination > .active > a:focus,
.freelancer .pagination > .active > span:focus,{
    border:  2px solid rgba(0, 0, 0, 0.1);
    background: #fff;
}
.freelancer .pagination > .active > a,
.freelancer .pagination > .active > span,
.freelancer .pagination > .active > a:hover,
.freelancer .pagination > .active > span:hover,
.freelancer .pagination > .active > a:focus,
.freelancer .pagination > .active > span:focus{
    border:  2px solid #3c66ee;
    background: #fff;
}

/* -14-  [ Books ]----------Lioit------------------------*/

/*	- Books Search.
    - Books Styles

-------------------------------------Lioit------------------------*/

/* ----  [ Book Search ]----------Lioit------------------------*/
.search-wrap{
    position: relative;
}
.search-field{
    width: 100% !important;
    height: 40px !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.search-button{
    width: 42px;
    height: 40px;
    line-height: 38px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    right: 1px;
    overflow: hidden;
    background: transparent;
    border: none;
    outline: none;
    color: #999;
    font-size: 14px;
}

.search-button:hover{
    color: #111;
}
.search-button:hover + .search-field{
    border-color: #ccc;
}
/* ----  [ Books ]----------Lioit------------------------*/
.book-cover-img{
    margin-bottom: 23px;
    position: relative;
    height: 330px;
    overflow: hidden;
}
.book-price  {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    width: 100%;
    color: #fff;
    -webkit-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.book-cover-img:hover .book-price {
    bottom: -100px;
}
.book-cover-img a{
    -webkit-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.book-cover-img a:hover{
    opacity: .85;
}
.book-cover-img img{
    width: 100%;
}
.book-title{
    margin-bottom: 6px;
    font-size: 14px;
}
.book-title a{
    color: #777;
    text-decoration: none;
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.book-title a:hover{
    color: #111;
}
.book-info,
.book-info a{
    margin-bottom: 15px;
    font-size: 11px;
    text-decoration: none;
    color: #aaa;
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.book-info a:hover{
    color: #111;
}
.intro-image{
    width:100%;
}
.intro-label{
    position: absolute;
    top:7px;
    right: 10px;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
a.book-title {
    display: block;
    text-align: center;
    color: #111;
    font-size: 18px !important;
    font-weight: 600;
}
.book-author {
    display: block;
    font-size: 13px;
    margin-bottom: 20px;
}
.creative-b .book-cover-img {
    height: 380px;
}
/* -15-  [ Contact Form ]----------Lioit------------------------*/

/*	- Books Search.
    - Books Styles

-------------------------------------Lioit------------------------*/
.contact-form-holder {
    overflow: hidden;
}

/* -16-  [ Google Maps ]----------Lioit------------------------*/

/*	- Books Search.
    - Books Styles

-------------------------------------Lioit------------------------*/

.google-map{
    position: relative;
    background: #111;
}
#map-section{
    height: 880px;
    position: relative;
    background-color: #111 !important;
    z-index: 1;
}
.gm-style-cc{
    display: none !important;
}
.gm-style-iw div{
    color: #777;
}
.map-section{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 !important;
    background: rgba(17,17,17, .93);
    z-index: 2;
    cursor: pointer;

    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.map-section:hover{
    background: rgba(17,17,17, .90);
}
.map-toggle{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    color: #fff;
    text-align: center;
}
.mt-icon{
    width: 27px;
    height: 27px;
    line-height: 27px;
    margin: 6px auto 25px;
    position: relative;
    color: #fff;
    font-size: 30px;
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.mt-icon i,
.mt-icon span{
    position: relative;
}
.mt-text{
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255,255,255, .75);
}
.mt-close{
    display: none;
    font-size: 12px;
    font-weight: 600;
}

/* Map opened */

.map-section.js-enabled{
    height: 50px;
    background: rgba(17,17,17, .75);
}
.map-section.js-enabled:hover{
    background: rgba(17,17,17, .85);
}
.map-section.js-enabled .mt-icon{
    opacity: 0;
}
.map-section.js-enabled .mt-text{
    position: relative;
    top: -20px;
}

/* -17-  [ Newslleter ]----------Lioit------------------------*/

/*	- Books Search.
    - Books Styles

-------------------------------------Lioit------------------------*/

.newsletter-form {

}
.newsletter-head {
    margin-bottom: 5px;
    margin-top: 0px;
}
.newsletter-desc {
    margin-bottom: 0px;
}
.newsletter-form input {
    width: 70%;
    padding:0px 30px;
    height: 55px;
    float: left;
    margin-right: 10px;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.newsletter-form button {
    width: 25%;
    padding: 0px 30px !important;
    height: 55px;
    margin: 0px;
    float: left;
    border-radius: 3px;
    background: #ffab07;
}


.social-counter-box {
    overflow: hidden;
}
.social-counter-box .sc-icon {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.07);
    margin-right: 30px;
}
.sc-meta {
    float: left;
}
.sc-meta span {
    display: block;

}
.sc-meta span.sc-count {
    font-size: 13px;
    font-weight: 600;
}
.sc-title {
    font-size: 11px;
    font-weight: 600;
    color: #acacad;
    text-transform: uppercase;
}
.sc-btn {
    margin-right: 20px;
    margin-top: 4px;
}


/* -18-  [ Portfolio ]----------Lioit------------------------*/

/*	- Portfolio Filter
    - Portfolio Grids
    - Portfolio Expander
    - Work Item Style
    - Work item hover state
    - Works full view
    - Work Navigation
    - Portofolio Work Items Hover Options
        - Scale Effect
        - Lily Effect
        - Sadie Effect
        - Roxy Effect
        - Bubba Effect
        - Romeo Effect
        - Layla Effect
        - Honey Effect
        - Oscar Effect
        - Marley Effect
        - Ruby Effect
        - Milo Effect
        - Dexter Effect
        - Sarah Effect
        - Zoe Effect
        - Chico Effect
        - Julia Effect
        - Goliath Effect
        - Hera Effect
        - Winston Effect
        - Selena Effect
        - Terry Effect
        - Phoebe Effect
        - Apollo Effect
        - Kira Effect
        - Steve Effect
        - Moses Effect
        - Jazz Effect
        - Ming Effect
        - Lexi Effect
        - Duke Effect
    - Promo Portfolio
        - Promo Portfolio Translatey
    -Portfolio Item Details

-------------------------------------Lioit------------------------*/

/* ----  [ Portfolio Filter ]----------Lioit------------------------*/
.works-filter{
    list-style: none;
    padding: 0;
    margin: 0 0 45px 0;
    font-size: 13px;
    text-align: center;
    color: #555;
    cursor: default;
}
.works-filter a{
    display: inline-block;
    margin: 0 10px;
    color: #999;
    text-decoration: none;
    font-size: 14px;
    -webkit-transition: all 0.37s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);

    cursor: pointer;
}
.works-filter a:hover{
    color: #111;
    text-decoration: none;
}
.works-filter a.active{
    color: #111;
    cursor: default;
}
.works-filter a.active:hover{
    color: #111;
}

.bg-dark .works-filter{
    color: #fff;
}
.bg-dark .works-filter a{
    color: #fff;
    padding: 1px 15px;
    border-radius: 2px;
}
.bg-dark .works-filter a:hover{
    color: #fff;
}
.bg-dark .works-filter a.active{
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2);
}
.bg-dark .works-filter a.active.btn-dark{
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2);
}
.bg-dark .works-filter a.active:hover{
    color: #fff;
}
/* ----  [ Portfolio Grids ]----------Lioit------------------------*/
.works-grid{
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-item{
    width: 25%;
    float: left;
    margin: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.works-grid-auto .work-item {
    width: auto !important;
    float: left;
}
.work-grid-2 .work-item{
    width: 50%;
}
.work-grid-3 .work-item{
    width: 33.333%;
}
.container .work-grid-3 .work-item{
    width: 33.2%;
}
.work-grid-5 .work-item{
    width: 20%;
}

.works-grid.work-grid-margin{
    margin: 0 0 0 -10px;
}
.works-grid.work-grid-margin .work-item{
    padding: 0 0 10px 10px;
}


.works-grid.work-grid-margin1-5{
    margin: 0 0 0 -25px;
}

.works-grid.work-grid-margin1-5 .work-item{
    padding: 0 0 25px 25px;
}

.works-grid.work-grid-margin2{
    margin: 0 0 0 -40px;
}

.works-grid.work-grid-margin2 .work-item{
    padding: 0 0 40px 40px;
}
/* ----  [ Portfolio Expander ]----------Lioit------------------------*/
.og-grid {
    width: 100%;
    height: 100%;
}

.og-grid li {
    overflow: hidden;
}

.og-grid li > a,
.og-grid li > a img {
}

.og-grid li.og-expanded > a::after {
    top: auto;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #ddd;
    border-width: 15px;
    left: 50%;
    margin: -20px 0 0 -15px;
}
.bg-dark .og-grid li.og-expanded > a::after {
	border-bottom-color: #26292b !important;
}
.bg-dark .og-expander {
    background: #26292b;
}
.og-expander {
    position: absolute;
    background: #ddd;
    top: auto;
    left: 0;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    height: 0;
    overflow: hidden;
    z-index: 99999999;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.og-expander-inner {
    padding: 50px 30px;
    height: 100%;
}

.og-close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.og-close::before,
.og-close::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    height: 1px;
    background: #333;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.og-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
    background: #333;
}

.og-fullimg,
.og-details {
    width: 50%;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.og-details {
    padding: 0 40px 0 20px;
}

.og-fullimg {
    text-align: center;
}

.og-fullimg img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
}

.og-details h3 {

}

.og-details p {

}

.og-details a {

}

.og-details a::before {
    content: '\2192';
    display: inline-block;
    margin-right: 10px;
}

.og-details a:hover {
    border-color: #999;
    color: #999;
}

.og-loading {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ddd;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    -webkit-animation: loader 0.5s infinite ease-in-out both;
    -moz-animation: loader 0.5s infinite ease-in-out both;
    animation: loader 0.5s infinite ease-in-out both;
}

@-webkit-keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
    0% { background: #ddd; }
    33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
    66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 830px) {

    .og-expander h3 { font-size: 32px; }
    .og-expander p { font-size: 13px; }
    .og-expander a { font-size: 12px; }

}

@media screen and (max-width: 650px) {

    .og-fullimg { display: none; }
    .og-details { float: none; width: 100%; }

}


/* ----  [ Work Item Style ]----------Lioit------------------------*/

.work-item > a{
    display: block;
    padding: 0 0 84px 0;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
.work-item a,
.work-item a:hover{
    color: #111;
    border: none;
}
.work-img{
    position: relative;
    overflow: hidden;
}
.work-img img{
    width: 100%;
    display: block;
    overflow: hidden;
}
.work-intro{
    width: 100%;
    height: 84px;
    padding: 20px 20px 0 20px;
    -webkit-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
}
.work-title{
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
}
.work-descr{
    font-size: 13px;
    text-align: center;
    text-transform: capitalize;
    color: #aaa;
}
.works-grid.hide-titles .work-item > a{
    overflow: visible;
    padding: 0;
}
.bg-dark .work-item a {
    color: #fff !important;
}
.works-grid.hide-titles .work-item .work-intro{
    opacity: 0;
    bottom: -94px;
}
.works-grid.hide-titles .work-item:hover .work-intro{
    opacity: 1;
}
/* ----  [ Work item hover state ]----------Lioit------------------------*/
.work-intro{
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.work-item:hover .work-intro,
.side-work-item:hover .work-intro{
    bottom: auto;
    top: 50%;
    color: #fff;
    margin-top: 50px;
    -webkit-transform: translateY(-99px);
    -moz-transform: translateY(-99px);
    transform: translateY(-99px);

    z-index: 3;
}
.work-item:hover .work-title,
.side-work-item:hover .work-title{
    color: #ccc;
}
.work-item:hover .work-descr,
.side-work-item:hover .work-descr{
    color: #999;
}
.work-item .work-img:after,
.side-work-item .work-img:after{
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(250,250,250, 0);
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);

}
.work-item:hover .work-img:after,
.side-work-item:hover .work-img:after{
    background: rgba(20,20,20, .85);
}

.works-grid.hover-color .work-item:hover .work-intro,
.works-grid.hover-color .work-item:hover .work-title,
.works-grid.hover-color .work-item:hover .work-descr,
.side-work-item:hover .work-intro,
.side-work-item:hover .work-title,
.side-work-item:hover .work-descr{
    color: #fff;
}
.works-grid.hover-color .work-item:hover .work-img:after{
    background: #28a8d3;
    opacity: .73;
}
.works-grid.hover-white .work-item:hover .work-intro,
.works-grid.hover-white .work-item:hover .work-title,
.works-grid.hover-white .work-item:hover .work-descr{
    color: #fff;
}
.works-grid.hover-white .work-item:hover .work-img:after{
    background: rgba(0, 0, 0, .9);
}

.work-item .work-img > img,
.side-work-item .work-img > img{
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.work-item:hover .work-img > img,
.side-work-item:hover .work-img > img{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* ----  [ Works full view ]----------Lioit------------------------*/
.z-index {
    position: relative;
    z-index: 9909;
}
.work-full{
    display: none;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10000;
}
.work-full-load{
    padding-top: 60px;
}
.work-loader{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10001;
}
.work-loader:after{
    display: block;
    content: " ";
    width: 16px;
    height: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px 0 0 -8px;
    background: url(../images/loader.html) no-repeat;
}


.work-grid-sys {

}

.container .work-grid-sys.work-grid-3 .work-item {
  padding: 0px;
}
/* ----  [ Work Navigation ]----------Lioit------------------------*/
.work-navigation{
    width: 100%;
    text-transform: capitalize;
    z-index: 99;
    font-size: 15px;
}
.work-navigation .fa{
    vertical-align: middle;
}
.work-navigation .fa-times{
    margin-top: -2px;
}
.work-navigation a{
    display: block;
    float: left;
    width: 33.33333%;
    padding: 20px 0px;
    overflow: hidden;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
}
.work-navigation a,
.work-navigation a:visited{
    color: #555;
}
.work-navigation a:hover{
    color: #111;
}
.work-navigation a span{
    display: inline-block;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.work-navigation a span.nav-icon {
    display: inline-block !important;
    padding: 0px 50px !important;
    font-size: 20px !important;
}
.work-navigation span:hover{

}
.work-back-link{
    margin: 20px 0 0;
    display: block;
    background: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #151515;
}
.work-prev{
    text-align: left;
}
.work-all{
    text-align: center;
}
.work-next{
    text-align: right;
}
.work-container{
    padding: 50px 0;
}
.work-full-title{
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
}
.work-full-media{
}

.work-full-media img{
    max-width: 100%;
    height: auto;
}
.work-full-text{
    text-align: left;
    font-size: 13px;
    color: #777;
}
.work-full-text h6{
    margin-top: 5px;
}
.work-detail{
    font-weight: 400;
}
.work-detail p:last-child{
    margin-bottom: 0;
}
.work-full-detail{
    font-size: 15px;
    color: #777;
    text-transform: capitalize;
}
.work-full-detail p{
    padding: 4px 0;
    margin: 0;
}
.work-full-detail p:last-child{
}
.work-full-detail p strong{
    width: 80px;
    display: inline-block;
}
.work-full-action{
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
    text-align: center;
}

/* ----  [ Portofolio Work Items Hover Options ]----------Lioit------------------------*/
.work-item figure {
    position: relative;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
}

.work-item figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    width: 100%;
    opacity: 0.8;
}

.work-item figure figcaption {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.work-item figure figcaption::before,
.work-item figure figcaption::after {
    pointer-events: none;
}

.work-item figure figcaption,
.work-item figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.work-item  figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.work-item  figure h2 {
    font-weight: 400;
    font-size: 20px;
}
.bg-white .work-item  figure h2 {
    color: #fff;
}
.work-item  figure h2 span {
    font-weight: 800;
}

.work-item  figure h2,
.work-item  figure p {
    margin: 0;
    color: #fff;
}

.work-item  figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
/* ----  [ Scale Effect ]----------Lioit------------------------*/
.scale-hover {
    transition: all linear 0.25s;
    -ms-transition: all linear 0.25s;
    -moz-transition: all linear 0.25s;
    -webkit-transition: all linear 0.25s;
    -o-transition: all linear 0.25s;
}
.scale-hover:hover {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, .15);
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
}
/* ----  [ Lily Effect ]----------Lioit------------------------*/
figure.effect-lily img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);
}

figure.effect-lily figcaption {
    text-align: left;
}

figure.effect-lily figcaption > div {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 100%;
}

figure.effect-lily h2,
figure.effect-lily p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-lily p {
    color: rgba(255,255,255,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
    opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

/* ----  [ Sadie Effect ]----------Lioit------------------------*/
figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #484c61;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Roxy Effect ]----------Lioit------------------------*/
figure.effect-roxy {
    background: -webkit-linear-gradient(45deg, #000000 0%, #111111 100%);
    background: linear-gradient(45deg, #000000 0%,#111111 100%);
}

figure.effect-roxy img {
    opacity: 1;
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50px,0,0);
    transform: translate3d(-50px,0,0);
}

figure.effect-roxy figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
    padding: 3em;
    text-align: left;
}

figure.effect-roxy h2 {
    padding: 30% 0 10px 0;
    color: #fff;
}

figure.effect-roxy p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    color: #fff;
}

figure.effect-roxy:hover img {
    opacity: 0.2;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Bubba Effect ]----------Lioit------------------------*/
figure.effect-bubba {
    background: #000;
}

figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Romeo Effect ]----------Lioit------------------------*/
figure.effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

figure.effect-romeo img {
    -webkit-transition: opacity 1s, -webkit-transform 0.35s;
    transition: opacity 1s, transform 0.35s;
    -webkit-transform: translate3d(0,0,300px);
    transform: translate3d(0,0,300px);
    opacity: 1;
}

figure.effect-romeo:hover img {
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);

}

figure.effect-romeo:hover figcaption::before {
    opacity: 0.1;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
    position: absolute;
    top: 48%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    opacity: 1;

}

figure.effect-romeo h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
    top: 35%;
    padding: 0.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    padding-top: 30px;
}

figure.effect-romeo:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}
figure.effect-romeo:hover figcaption::before,
figure.effect-romeo:hover figcaption::after {
    opacity: .1;
}
figure.effect-romeo:hover h2,
figure.effect-romeo:hover p {
    opacity: 1;
}
/* ----  [ Layla Effect ]----------Lioit------------------------*/
figure.effect-layla {
    background: #000;
}

figure.effect-layla img {
    opacity: 1;
}

figure.effect-layla figcaption {

}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-layla p {
    padding: 10px 90px;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {

}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

/* ----  [ Honey Effect ]----------Lioit------------------------*/
figure.effect-honey {
    background: #000;
}

figure.effect-honey img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-honey:hover img {
    opacity: 0.5;
}

figure.effect-honey figcaption::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-honey h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 1.5em;
    width: 100%;
    text-align: left;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-honey h2 i {
    font-style: normal;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Oscar Effect ]----------Lioit------------------------*/
figure.effect-oscar {
    background: -webkit-linear-gradient(45deg, #000000 0%, #111111 40%, #333333 100%);
    background: linear-gradient(45deg, #000000 0%,#111111 40%,#333333 100%);
}

figure.effect-oscar img {
    opacity: 1;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
    padding: 3em;
    background-color: rgba(0,0,0,0.1);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    content: '';
}

figure.effect-oscar h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

figure.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-oscar:hover figcaption {
    background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
    opacity: 0.2;
}
/* ----  [ Marley Effect ]----------Lioit------------------------*/
figure.effect-marley figcaption {
    text-align: right;
}

figure.effect-marley h2,
figure.effect-marley p {
    position: absolute;
    right: 30px;
    left: 30px;
    padding: 10px 0;
}


figure.effect-marley p {
    bottom: 30px;
    line-height: 1.5;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);

}

figure.effect-marley h2 {
    top: 30px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);

}

figure.effect-marley:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-marley h2::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-marley h2::after,
figure.effect-marley p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
figure.effect-marley:hover img {
    opacity: 0.3;
}
/* ----  [ Ruby Effect ]----------Lioit------------------------*/
figure.effect-ruby {
    background-color: #000;
}

figure.effect-ruby img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

figure.effect-ruby:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-ruby h2 {
    margin-top: 20%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
    margin: 1em 0 0;
    padding: 3em;
    border: 1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);
}

figure.effect-ruby:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}
/* ----  [ Milo Effect ]----------Lioit------------------------*/

figure.effect-milo {
    background: #000;
}

figure.effect-milo img {
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-30px,0,0) scale(1.12);
    transform: translate3d(-30px,0,0) scale(1.12);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-milo:hover img {
    opacity: 0.5;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em 1.2em;
    color: #fff;
}

figure.effect-milo p {
    padding: 0 10px 0 0;
    width: 50%;
    border-right: 1px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ----  [ Dexter Effect ]----------Lioit------------------------*/
figure.effect-dexter {
    background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
    background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
}

figure.effect-dexter img {
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-dexter:hover img {
    opacity: 0.4;
}

figure.effect-dexter figcaption::after {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    height: -webkit-calc(50% - 30px);
    height: calc(50% - 30px);
    border: 7px solid #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

figure.effect-dexter:hover figcaption::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-dexter figcaption {
    padding: 3em;
    text-align: left;
}

figure.effect-dexter p {
    position: absolute;
    right: 60px;
    bottom: 60px;
    left: 60px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
}

figure.effect-dexter:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Sarah Effect ]----------Lioit------------------------*/
figure.effect-sarah {
    background: #000;
}

figure.effect-sarah img {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-sarah:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
    text-align: left;
}

figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
    color: #fff;
}

figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah p {
    padding: 1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    color: #fff;
}

figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Zoe Effect ]----------Lioit------------------------*/
figure.effect-zoe img {
    width: 100% !important;
}
figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 3.75em;
    background: #333;
    color: #fff;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
    float: left;
    color: #fff;
}
figure.effect-zoe .icon-links {
    position: relative;
    z-index: 999;
}
figure.effect-zoe .icon-links a {
    position: relative;
    z-index: 999999;
    float: right;
    color: #fff;
    font-size: 24px;
}
figure.effect-zoe .icon-links a:hover {
    color: rgba(255, 255, 255, 0.4);
}

figure.effect-zoe:hover .icon-links a:hover,
figure.effect-zoe:hover .icon-links a:focus {
    color: #fff;
}

figure.effect-zoe .description {
    position: absolute;
    bottom: 8em;
    color: #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe .icon-links a {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
}

figure.effect-zoe .icon-links a span::before {
    display: inline-block;
    padding: 8px 10px;
}


figure.effect-zoe h2 {
    display: inline-block;
}

figure.effect-zoe:hover .description {
    opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover .icon-links a {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-zoe:hover .icon-links a:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-zoe:hover .icon-links a:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-zoe:hover .icon-links a:first-child {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/* ----  [ Chico Effect ]----------Lioit------------------------*/
figure.effect-chico img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
}

figure.effect-chico:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-chico figcaption {
    padding: 3em;
}

figure.effect-chico figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico h2 {
    padding: 20% 0 20px 0;
}

figure.effect-chico p {
    margin: 0 auto;
    max-width: 200px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media screen and (max-width: 50em) {

    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px auto;
        width: 100%;
    }
}


/* ----  [ Julia Effect ]----------Lioit------------------------*/
figure.effect-julia {
    background: #2f3238;
}

figure.effect-julia img {
    max-width: none;
    height: 400px;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-julia figcaption {
    text-align: left;
}

figure.effect-julia h2 {
    position: relative;
    padding: 0.5em 0;
}

figure.effect-julia p {
    display: inline-block;
    margin: 0 0 0.25em;
    padding: 0.4em 1em;
    background: rgba(255,255,255,0.9);
    color: #2f3238 !important;
    text-transform: none;
    font-weight: 500;
    font-size: 75%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-460px,0,0);
    transform: translate3d(-460px,0,0);
}

figure.effect-julia p:first-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-julia:hover img {
    opacity: 0.4;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ----  [ Goliath Effect ]----------Lioit------------------------*/
figure.effect-goliath {
    background: #333;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-goliath img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
}

figure.effect-goliath p {
    text-transform: none;
    font-size: 15px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
    -webkit-transform: translate3d(0,-80px,0);
    transform: translate3d(0,-80px,0);
}

figure.effect-goliath:hover h2 {
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
}

figure.effect-goliath:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/* ----  [ Hera Effect ]----------Lioit------------------------*/
figure.effect-hera {
    background: #000;
}

figure.effect-hera h2 {
    font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

figure.effect-hera figcaption::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

figure.effect-hera p {
    width: 100px;
    text-transform: none;
    font-size: 121%;
    line-height: 2;
}

figure.effect-hera p a {
    color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
    opacity: 0.6;
}

figure.effect-hera p a i {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
    -webkit-transform: translate3d(-60px,-60px,0);
    transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
    -webkit-transform: translate3d(60px,-60px,0);
    transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
    -webkit-transform: translate3d(-60px,60px,0);
    transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
    -webkit-transform: translate3d(60px,60px,0);
    transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
    opacity: 1;
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
    opacity: 0;
    -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
    transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
    opacity: 1;
}
/* ----  [ Winston Effect ]----------Lioit------------------------*/
figure.effect-winston {
    background: #162633;
    text-align: left;
}

figure.effect-winston img {
    -webkit-transition: opacity 0.45s;
    transition: opacity 0.45s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-winston figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/triangle.svg) no-repeat center center;
    background-size: 100% 100%;
    content: '';
    -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
    transition: opacity 0.45s, transform 0.45s;
    -webkit-transform: rotate3d(0,0,1,45deg);
    transform: rotate3d(0,0,1,45deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

figure.effect-winston h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-winston p {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 1.5em 7% 0;
}

figure.effect-winston a {
    margin: 0 10px;
    color: #5d504f;
    font-size: 170%;
}

figure.effect-winston a:hover,
figure.effect-winston a:focus {

}

figure.effect-winston p a i {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}

figure.effect-winston:hover img {
    opacity: 0.6;
}

figure.effect-winston:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-winston:hover figcaption::before {
    opacity: 0.7;
    -webkit-transform: rotate3d(0,0,1,20deg);
    transform: rotate3d(0,0,1,20deg);
}

figure.effect-winston:hover p i {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-winston:hover p a:nth-child(3) i {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-winston:hover p a:nth-child(2) i {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-winston:hover p a:first-child i {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
/* ----  [ Selena Effect ]----------Lioit------------------------*/
figure.effect-selena {
    background: #fff;
}

figure.effect-selena img {
    opacity: 0.95;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
    -webkit-transform: scale3d(0.95,0.95,1);
    transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-selena p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
    transform: perspective(1000px) rotate3d(1,0,0,90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

figure.effect-selena:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
    opacity: 1;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
    transform: perspective(1000px) rotate3d(1,0,0,0);
}
/* ----  [ Terry Effect ]----------Lioit------------------------*/
figure.effect-terry {
    background: #34495e;
}

figure.effect-terry figcaption {
    padding: 2em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
    position: absolute;
    width: 200%;
    height: 200%;
    border-style: solid;
    border-color: #101010;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
    right: 0;
    bottom: 0;
    border-width: 0 90px 60px 0;
    -webkit-transform: translate3d(90px,60px,0);
    transform: translate3d(90px,60px,0);
}

figure.effect-terry figcaption::after {
    top: 0;
    left: 0;
    border-width: 25px 0 0 25px;
    -webkit-transform: translate3d(-25px,-25px,0);
    transform: translate3d(-25px,-25px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
    opacity: 0.85;
}

figure.effect-terry h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.4em 10px;
    width: 50%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

@media screen and (max-width: 920px) {
    figure.effect-terry h2 {
        padding: 0.75em 10px;
        font-size: 120%;
    }
}

figure.effect-terry p {
    float: right;
    clear: both;
    text-align: left;
    text-transform: none;
    font-size: 111%;
    padding-left: 30px;
}

figure.effect-terry p a {
    display: block;
    margin-bottom: 1em;
    margin-left: 20px;
    color: #fff;
    opacity: 0;
    -webkit-transform: translate3d(80px,0,0);
    transform: translate3d(80px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
    color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-terry:hover img {
    opacity: 0.6;

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-terry:hover p a {
    opacity: 1;
}

figure.effect-terry:hover p a:first-child {
    -webkit-transition-delay: 0.025s;
    transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
    -webkit-transition-delay: 0.075s;
    transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

/* ----  [ Phoebe Effect ]----------Lioit------------------------*/

figure.effect-phoebe {
    background: #675983;
}

figure.effect-phoebe img {
    opacity: 0.85;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-phoebe:hover img {
    opacity: 0.6;
}

figure.effect-phoebe figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/triangle2.svg) no-repeat center center;
    background-size: 100% 100%;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(5,2.5,1);
    transform: scale3d(5,2.5,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before {
    opacity: 0.6;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-phoebe h2 {
    margin-top: 1em;
    -webkit-transition: transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-phoebe:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-phoebe p a {
    color: #fff;
    font-size: 140%;
    opacity: 0;
    position: relative;
    display: inline-block;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-phoebe p a:first-child {
    -webkit-transform: translate3d(-60px,-60px,0);
    transform: translate3d(-60px,-60px,0);
}

figure.effect-phoebe p a:nth-child(2) {
    -webkit-transform: translate3d(0,60px,0);
    transform: translate3d(0,60px,0);
}

figure.effect-phoebe p a:nth-child(3) {
    -webkit-transform: translate3d(60px,-60px,0);
    transform: translate3d(60px,-60px,0);
}

figure.effect-phoebe:hover p a {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ----  [ Apollo Effect ]----------Lioit------------------------*/
figure.effect-apollo {
    background: #000;
}

figure.effect-apollo img {
    opacity: 0.75;
    -webkit-transition: opacity 0.55s, -webkit-transform 0.55s;
    transition: opacity 0.55s, transform 0.55s;
    -webkit-transform: scale3d(1.05,1.05,1);
    transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    content: '';
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 3em;
    padding: 0 1em;
    max-width: 150px;
    border-right: 4px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-apollo h2 {
    text-align: left;
}

figure.effect-apollo:hover img {
    opacity: 0.6;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
    opacity: 1;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
/* ----  [ Kira Effect ]----------Lioit------------------------*/
figure.effect-kira {
    background: #000;
    text-align: left;
}

figure.effect-kira img {
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-kira figcaption {
    z-index: 1;
}

figure.effect-kira p {
    padding: 2.25em 0.5em;
    font-weight: 600;
    font-size: 100%;
    line-height: 1.5;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-kira p a {
    margin: 0 0.5em;
    color: #101010;
}

figure.effect-kira p a:hover,
figure.effect-kira p a:focus {
    opacity: 0.6;
}

figure.effect-kira figcaption::before {
    position: absolute;
    top: 0;
    right: 2em;
    left: 2em;
    z-index: -1;
    height: 3.5em;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
    transform: translate3d(0,4em,0) scale3d(1,0.023,1);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

figure.effect-kira:hover img {
    opacity: 0.5;
}

figure.effect-kira:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-kira:hover figcaption::before {
    opacity: 0.7;
    -webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
    transform: translate3d(0,5em,0) scale3d(1,1,1);
}
/* ----  [ Steve Effect ]----------Lioit------------------------*/
figure.effect-steve {
    z-index: auto;
    overflow: visible;
    background: #000;
}

figure.effect-steve:before,
figure.effect-steve h2:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #000;
    content: '';
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-steve:before {
    box-shadow: 0 3px 30px rgba(0,0,0,0.8);
    opacity: 0;
}

figure.effect-steve figcaption {
    z-index: 1;
}

figure.effect-steve img {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: perspective(1000px) translate3d(0,0,0);
    transform: perspective(1000px) translate3d(0,0,0);
}

figure.effect-steve h2,
figure.effect-steve p {
    background: #fff;
    color: #000;
}

figure.effect-steve h2 {
    position: relative;
    margin-top: 2em;
    padding: 0.25em;
}

figure.effect-steve h2:before {
    box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

figure.effect-steve p {
    margin-top: 1em;
    padding: 0.5em;
    font-weight: 800;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(0.9,0.9,1);
    transform: scale3d(0.9,0.9,1);
}

figure.effect-steve:hover:before {
    opacity: 1;
}

figure.effect-steve:hover img {
    -webkit-transform: perspective(1000px) translate3d(0,0,21px);
    transform: perspective(1000px) translate3d(0,0,21px);
}

figure.effect-steve:hover h2:before {
    opacity: 0;
}

figure.effect-steve:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
/* ----  [ Moses Effect ]----------Lioit------------------------*/
figure.effect-moses {
    background: -webkit-linear-gradient(-45deg, #000 0%,#ccc 100%);
    background: linear-gradient(-45deg, #000 0%,#ccc 100%);
}

figure.effect-moses img {
    opacity: 0.85;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-moses h2,
figure.effect-moses p {
    padding: 20px;
    width: 50%;
    height: 50%;
    border: 2px solid #fff;
}

figure.effect-moses h2 {
    padding: 20px;
    width: 50%;
    height: 50%;
    opacity: 0;
    text-align: left;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(10px,10px,0);
    transform: translate3d(10px,10px,0);
}

figure.effect-moses p {
    float: right;
    padding: 20px;
    text-align: right;
    opacity: 0;
    color: #fff;
    font-weight: bold;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

figure.effect-moses:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
}

figure.effect-moses:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-moses:hover img {
    opacity: 0.3;
}

/* ----  [ Jazz Effect ]----------Lioit------------------------*/
figure.effect-jazz {
    background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 100%);
    background: linear-gradient(-45deg, #000000 0%,#000000 100%);
}

figure.effect-jazz img {
    opacity: 1;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz figcaption::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid rgba(255, 255, 255, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    content: '';
    opacity: 0;
    -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
    transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-jazz h2,
figure.effect-jazz p {
    opacity: 1;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-jazz p {
    padding: 0.5em 2em;
    text-transform: none;
    font-size: 0.85em;
    opacity: 0;
}

figure.effect-jazz:hover img {
    opacity: 0.4;
    -webkit-transform: scale3d(1.05,1.05,1);
    transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after {
    opacity: 1;
    -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
    transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
/* ----  [ Ming Effect ]----------Lioit------------------------*/
figure.effect-ming {
    background: #030c17;
}

figure.effect-ming img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.4,1.4,1);
    transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    color: #fff;
    opacity: 0;
}

figure.effect-ming p {
    padding: 1em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    color: #fff;
}

figure.effect-ming:hover h2 {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p,
figure.effect-ming:hover h2 {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
    background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
    opacity: 0.4;
}
/* ----  [ Lexi Effect ]----------Lioit------------------------*/
figure.effect-lexi {
    background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
    background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

figure.effect-lexi img {
    margin: -10px 0 0 -10px;
    max-width: none;
    width: -webkit-calc(100% + 10px);
    width: calc(100% + 10px);
    opacity: 0.9;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(10px,10px,0);
    transform: translate3d(10px,10px,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 300px;
    height: 300px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
    content: '';
    opacity: 0;
    -webkit-transform: scale3d(0.5,0.5,1);
    transform: scale3d(0.5,0.5,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lexi h2 {
    text-align: left;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(5px,5px,0);
    transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 1.5em 1.5em 0;
    width: 140px;
    text-align: right;
    opacity: 0;
    -webkit-transform: translate3d(20px,20px,0);
    transform: translate3d(20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-lexi:hover h2,
figure.effect-lexi:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ----  [ Duke Effect ]----------Lioit------------------------*/
figure.effect-duke {
    background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
    background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
    opacity: 0.1;
    -webkit-transform: scale3d(2,2,1);
    transform: scale3d(2,2,1);
}

figure.effect-duke h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

figure.effect-duke p {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 20px;
    padding: 30px;
    border: 2px solid #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}


/* ----  [ Promo Portfolio ]----------Lioit------------------------*/
.portfolio-item {
    position: relative;
}

.portfolio-item.white {
    background: #FFF;
}

.portfolio-item.gray {
    background: #fafafa;
    background: -moz-linear-gradient(-45deg,#fafafa 0,#f2f2f2 60%,#eaeaea 100%);
    background: -webkit-linear-gradient(-45deg,#fafafa 0,#f2f2f2 60%,#eaeaea 100%);
    background: -o-linear-gradient(-45deg,#fafafa 0,#f2f2f2 60%,#eaeaea 100%);
    background: -ms-linear-gradient(-45deg,#fafafa 0,#f2f2f2 60%,#eaeaea 100%);
    background: linear-gradient(135deg,#fafafa 0,#f2f2f2 60%,#eaeaea 100%);
}

.portfolio-item.gray .image-wrapper-blank {
    float: right;
}

.portfolio-item#archive {
    height: 300px;
    padding: 105px 0;
}

.portfolio-item h2 {
    font-size: 36px;
    font-weight: 300;
    margin: 0 0 30px 0;
    line-height: 1.1em;
    color: #212934;
}

.portfolio-item p {
    color: rgba(33,41,52,.6);
}

.portfolio-item>.wrap {
    height: 100%;
}

.portfolio-item .image-wrapper-blank {
    width: 95%;
    position: relative;
    height: 590px;
    float: left;
}
.portfolio-item .image-wrapper-blank2 {
    width: 90%;
    position: relative;
    height: 590px;
    float: none;
    margin: 0 auto;
}

.portfolio-item .image-wrapper-blank img {
    max-width: 100%;
}

.portfolio-item .image-wrapper {
    width: 500px;
    position: relative;
    background: #FFF;
    box-shadow: 0 0 50px rgba(0,0,0,.1);
    border-radius: 3px;
    overflow: hidden;
    height: 540px;
    margin: auto auto;
}

.portfolio-item .image-wrapper img {
    max-width: 100%;
    border-radius: 0 0 3px 3px;
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    transition: 3s all ease;
}
.portfolio-item .image-wrapper.translatey img {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    transition: 3s all ease;
}

.portfolio-item .image-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.1);
    z-index: 3;
}

.portfolio-item .top-bar {
    height: 22px !important;
    width: 100%;
    background: rgba(255,255,255,.45);
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    position: relative;
    z-index: 2;
}

.portfolio-item .traffic-lights {
    left: 20px;
    top: 17px;
    background: #ef5350;
}

.portfolio-item .traffic-lights:before {
    left: 12px;
    background: #fec722;
}

.portfolio-item .traffic-lights:after {
    left: 24px;
    background: #43a047;
}

.portfolio-item .traffic-lights,.portfolio-item .traffic-lights:after,.portfolio-item .traffic-lights:before {

    width: 8px;
    height: 8px;
    border-radius: 10px;
    position: absolute;
}

.portfolio-item .traffic-lights:after,.portfolio-item .traffic-lights:before {
    content: "";
}

.portfolio-item .description {
}

.portfolio-item.gray .image-wrapper {
    float: right;
}

/* ----  [ Promo Portfolio Translatey ]----------Lioit------------------------*/
.image-wrapper.translatey.translatey50:hover img {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}
.image-wrapper.translatey.translatey60:hover img {
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    transform: translateY(-60px);
}
.image-wrapper.translatey.translatey70:hover img {
    -webkit-transform: translateY(-70px);
    -moz-transform: translateY(-70px);
    -ms-transform: translateY(-70px);
    transform: translateY(-70px);
}
.image-wrapper.translatey.translatey80:hover img {
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
}
.image-wrapper.translatey.translatey90:hover img {
    -webkit-transform: translateY(-90px);
    -moz-transform: translateY(-90px);
    -ms-transform: translateY(-90px);
    transform: translateY(-90px);
}
.image-wrapper.translatey.translatey100:hover img {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
}
.image-wrapper.translatey.translatey110:hover img {
    -webkit-transform: translateY(-110px);
    -moz-transform: translateY(-110px);
    -ms-transform: translateY(-110px);
    transform: translateY(-110px);
}
.image-wrapper.translatey.translatey120:hover img {
    -webkit-transform: translateY(-120px);
    -moz-transform: translateY(-120px);
    -ms-transform: translateY(-120px);
    transform: translateY(-120px);
}
.image-wrapper.translatey.translatey130:hover img {
    -webkit-transform: translateY(-130px);
    -moz-transform: translateY(-130px);
    -ms-transform: translateY(-130px);
    transform: translateY(-130px);
}
.image-wrapper.translatey.translatey140:hover img {
    -webkit-transform: translateY(-140px);
    -moz-transform: translateY(-140px);
    -ms-transform: translateY(-140px);
    transform: translateY(-140px);
}
.image-wrapper.translatey.translatey150:hover img {
    -webkit-transform: translateY(-150px);
    -moz-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    transform: translateY(-150px);
}
.image-wrapper.translatey.translatey160:hover img {
    -webkit-transform: translateY(-160px);
    -moz-transform: translateY(-160px);
    -ms-transform: translateY(-160px);
    transform: translateY(-160px);
}
.image-wrapper.translatey.translatey170:hover img {
    -webkit-transform: translateY(-170px);
    -moz-transform: translateY(-170px);
    -ms-transform: translateY(-170px);
    transform: translateY(-170px);
}
.image-wrapper.translatey.translatey180:hover img {
    -webkit-transform: translateY(-180px);
    -moz-transform: translateY(-180px);
    -ms-transform: translateY(-180px);
    transform: translateY(-180px);
}
.image-wrapper.translatey.translatey190:hover img {
    -webkit-transform: translateY(-190px);
    -moz-transform: translateY(-190px);
    -ms-transform: translateY(-190px);
    transform: translateY(-190px);
}
.image-wrapper.translatey.translatey200:hover img {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
}
.image-wrapper.translatey.translatey210:hover img {
    -webkit-transform: translateY(-210px);
    -moz-transform: translateY(-210px);
    -ms-transform: translateY(-210px);
    transform: translateY(-210px);
}
.image-wrapper.translatey.translatey220:hover img {
    -webkit-transform: translateY(-220px);
    -moz-transform: translateY(-220px);
    -ms-transform: translateY(-220px);
    transform: translateY(-220px);
}
.image-wrapper.translatey.translatey230:hover img {
    -webkit-transform: translateY(-230px);
    -moz-transform: translateY(-230px);
    -ms-transform: translateY(-230px);
    transform: translateY(-230px);
}
.image-wrapper.translatey.translatey240:hover img {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px);
}
.image-wrapper.translatey.translatey250:hover img {
    -webkit-transform: translateY(-250px);
    -moz-transform: translateY(-250px);
    -ms-transform: translateY(-250px);
    transform: translateY(-250px);
}
.image-wrapper.translatey.translatey260:hover img {
    -webkit-transform: translateY(-260px);
    -moz-transform: translateY(-260px);
    -ms-transform: translateY(-260px);
    transform: translateY(-260px);
}
.image-wrapper.translatey.translatey270:hover img {
    -webkit-transform: translateY(-270px);
    -moz-transform: translateY(-270px);
    -ms-transform: translateY(-270px);
    transform: translateY(-270px);
}
.image-wrapper.translatey.translatey280:hover img {
    -webkit-transform: translateY(-280px);
    -moz-transform: translateY(-280px);
    -ms-transform: translateY(-280px);
    transform: translateY(-280px);
}
.image-wrapper.translatey.translatey290:hover img {
    -webkit-transform: translateY(-290px);
    -moz-transform: translateY(-290px);
    -ms-transform: translateY(-290px);
    transform: translateY(-290px);
}
.image-wrapper.translatey.translatey300:hover img {
    -webkit-transform: translateY(-300px);
    -moz-transform: translateY(-300px);
    -ms-transform: translateY(-300px);
    transform: translateY(-300px);
}
.image-wrapper.translatey.translatey310:hover img {
    -webkit-transform: translateY(-310px);
    -moz-transform: translateY(-310px);
    -ms-transform: translateY(-310px);
    transform: translateY(-310px);
}
.image-wrapper.translatey.translatey320:hover img {
    -webkit-transform: translateY(-320px);
    -moz-transform: translateY(-320px);
    -ms-transform: translateY(-320px);
    transform: translateY(-320px);
}
.image-wrapper.translatey.translatey330:hover img {
    -webkit-transform: translateY(-330px);
    -moz-transform: translateY(-330px);
    -ms-transform: translateY(-330px);
    transform: translateY(-330px);
}
.image-wrapper.translatey.translatey340:hover img {
    -webkit-transform: translateY(-340px);
    -moz-transform: translateY(-340px);
    -ms-transform: translateY(-340px);
    transform: translateY(-340px);
}
.image-wrapper.translatey.translatey350:hover img {
    -webkit-transform: translateY(-350px);
    -moz-transform: translateY(-350px);
    -ms-transform: translateY(-350px);
    transform: translateY(-350px);
}
.image-wrapper.translatey.translatey360:hover img {
    -webkit-transform: translateY(-360px);
    -moz-transform: translateY(-360px);
    -ms-transform: translateY(-360px);
    transform: translateY(-360px);
}
.image-wrapper.translatey.translatey370:hover img {
    -webkit-transform: translateY(-370px);
    -moz-transform: translateY(-370px);
    -ms-transform: translateY(-370px);
    transform: translateY(-370px);
}
.image-wrapper.translatey.translatey380:hover img {
    -webkit-transform: translateY(-380px);
    -moz-transform: translateY(-380px);
    -ms-transform: translateY(-380px);
    transform: translateY(-380px);
}
.image-wrapper.translatey.translatey390:hover img {
    -webkit-transform: translateY(-390px);
    -moz-transform: translateY(-390px);
    -ms-transform: translateY(-390px);
    transform: translateY(-390px);
}
.image-wrapper.translatey.translatey400:hover img {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
}
.image-wrapper.translatey.translatey410:hover img {
    -webkit-transform: translateY(-410px);
    -moz-transform: translateY(-410px);
    -ms-transform: translateY(-410px);
    transform: translateY(-410px);
}
.image-wrapper.translatey.translatey420:hover img {
    -webkit-transform: translateY(-420px);
    -moz-transform: translateY(-420px);
    -ms-transform: translateY(-420px);
    transform: translateY(-420px);
}
.image-wrapper.translatey.translatey430:hover img {
    -webkit-transform: translateY(-430px);
    -moz-transform: translateY(-430px);
    -ms-transform: translateY(-430px);
    transform: translateY(-430px);
}
.image-wrapper.translatey.translatey440:hover img {
    -webkit-transform: translateY(-440px);
    -moz-transform: translateY(-440px);
    -ms-transform: translateY(-440px);
    transform: translateY(-440px);
}
.image-wrapper.translatey.translatey450:hover img {
    -webkit-transform: translateY(-450px);
    -moz-transform: translateY(-450px);
    -ms-transform: translateY(-450px);
    transform: translateY(-450px);
}
.image-wrapper.translatey.translatey460:hover img {
    -webkit-transform: translateY(-460px);
    -moz-transform: translateY(-460px);
    -ms-transform: translateY(-460px);
    transform: translateY(-460px);
}
.image-wrapper.translatey.translatey470:hover img {
    -webkit-transform: translateY(-470px);
    -moz-transform: translateY(-470px);
    -ms-transform: translateY(-470px);
    transform: translateY(-470px);
}
.image-wrapper.translatey.translatey450:hover img {
    -webkit-transform: translateY(-480px);
    -moz-transform: translateY(-480px);
    -ms-transform: translateY(-480px);
    transform: translateY(-480px);
}
.image-wrapper.translatey.translatey490:hover img {
    -webkit-transform: translateY(-490px);
    -moz-transform: translateY(-490px);
    -ms-transform: translateY(-490px);
    transform: translateY(-490px);
}
.image-wrapper.translatey.translatey500:hover img {
    -webkit-transform: translateY(-500px);
    -moz-transform: translateY(-500px);
    -ms-transform: translateY(-500px);
    transform: translateY(-500px);
}
.image-wrapper.translatey.translatey510:hover img {
    -webkit-transform: translateY(-510px);
    -moz-transform: translateY(-510px);
    -ms-transform: translateY(-510px);
    transform: translateY(-510px);
}
.image-wrapper.translatey.translatey520:hover img {
    -webkit-transform: translateY(-520px);
    -moz-transform: translateY(-520px);
    -ms-transform: translateY(-520px);
    transform: translateY(-520px);
}
.image-wrapper.translatey.translatey530:hover img {
    -webkit-transform: translateY(-530px);
    -moz-transform: translateY(-530px);
    -ms-transform: translateY(-530px);
    transform: translateY(-530px);
}
.image-wrapper.translatey.translatey540:hover img {
    -webkit-transform: translateY(-540px);
    -moz-transform: translateY(-540px);
    -ms-transform: translateY(-540px);
    transform: translateY(-540px);
}
.image-wrapper.translatey.translatey550:hover img {
    -webkit-transform: translateY(-550px);
    -moz-transform: translateY(-550px);
    -ms-transform: translateY(-550px);
    transform: translateY(-550px);
}
.image-wrapper.translatey.translatey560:hover img {
    -webkit-transform: translateY(-560px);
    -moz-transform: translateY(-560px);
    -ms-transform: translateY(-560px);
    transform: translateY(-560px);
}
.image-wrapper.translatey.translatey570:hover img {
    -webkit-transform: translateY(-570px);
    -moz-transform: translateY(-570px);
    -ms-transform: translateY(-570px);
    transform: translateY(-570px);
}
.image-wrapper.translatey.translatey580:hover img {
    -webkit-transform: translateY(-580px);
    -moz-transform: translateY(-580px);
    -ms-transform: translateY(-580px);
    transform: translateY(-580px);
}
.image-wrapper.translatey.translatey590:hover img {
    -webkit-transform: translateY(-590px);
    -moz-transform: translateY(-590px);
    -ms-transform: translateY(-590px);
    transform: translateY(-590px);
}
.image-wrapper.translatey.translatey600:hover img {
    -webkit-transform: translateY(-600px);
    -moz-transform: translateY(-600px);
    -ms-transform: translateY(-600px);
    transform: translateY(-600px);
}
.image-wrapper.translatey.translatey610:hover img {
    -webkit-transform: translateY(-610px);
    -moz-transform: translateY(-610px);
    -ms-transform: translateY(-610px);
    transform: translateY(-610px);
}
.image-wrapper.translatey.translatey620:hover img {
    -webkit-transform: translateY(-620px);
    -moz-transform: translateY(-620px);
    -ms-transform: translateY(-620px);
    transform: translateY(-620px);
}
.image-wrapper.translatey.translatey630:hover img {
    -webkit-transform: translateY(-630px);
    -moz-transform: translateY(-630px);
    -ms-transform: translateY(-630px);
    transform: translateY(-630px);
}
.image-wrapper.translatey.translatey640:hover img {
    -webkit-transform: translateY(-640px);
    -moz-transform: translateY(-640px);
    -ms-transform: translateY(-640px);
    transform: translateY(-640px);
}
.image-wrapper.translatey.translatey650:hover img {
    -webkit-transform: translateY(-650px);
    -moz-transform: translateY(-650px);
    -ms-transform: translateY(-650px);
    transform: translateY(-650px);
}
.image-wrapper.translatey.translatey660:hover img {
    -webkit-transform: translateY(-660px);
    -moz-transform: translateY(-660px);
    -ms-transform: translateY(-660px);
    transform: translateY(-660px);
}
.image-wrapper.translatey.translatey670:hover img {
    -webkit-transform: translateY(-670px);
    -moz-transform: translateY(-670px);
    -ms-transform: translateY(-670px);
    transform: translateY(-670px);
}
.image-wrapper.translatey.translatey680:hover img {
    -webkit-transform: translateY(-680px);
    -moz-transform: translateY(-680px);
    -ms-transform: translateY(-680px);
    transform: translateY(-680px);
}
.image-wrapper.translatey.translatey690:hover img {
    -webkit-transform: translateY(-690px);
    -moz-transform: translateY(-690px);
    -ms-transform: translateY(-690px);
    transform: translateY(-690px);
}
.image-wrapper.translatey.translatey700:hover img {
    -webkit-transform: translateY(-700px);
    -moz-transform: translateY(-700px);
    -ms-transform: translateY(-700px);
    transform: translateY(-700px);
}
.image-wrapper.translatey.translatey710:hover img {
    -webkit-transform: translateY(-710px);
    -moz-transform: translateY(-710px);
    -ms-transform: translateY(-710px);
    transform: translateY(-710px);
}
.image-wrapper.translatey.translatey720:hover img {
    -webkit-transform: translateY(-720px);
    -moz-transform: translateY(-720px);
    -ms-transform: translateY(-720px);
    transform: translateY(-720px);
}
.image-wrapper.translatey.translatey730:hover img {
    -webkit-transform: translateY(-730px);
    -moz-transform: translateY(-730px);
    -ms-transform: translateY(-730px);
    transform: translateY(-730px);
}
.image-wrapper.translatey.translatey740:hover img {
    -webkit-transform: translateY(-740px);
    -moz-transform: translateY(-740px);
    -ms-transform: translateY(-740px);
    transform: translateY(-740px);
}
.image-wrapper.translatey.translatey750:hover img {
    -webkit-transform: translateY(-750px);
    -moz-transform: translateY(-750px);
    -ms-transform: translateY(-750px);
    transform: translateY(-750px);
}
.image-wrapper.translatey.translatey760:hover img {
    -webkit-transform: translateY(-760px);
    -moz-transform: translateY(-760px);
    -ms-transform: translateY(-760px);
    transform: translateY(-760px);
}
.image-wrapper.translatey.translatey770:hover img {
    -webkit-transform: translateY(-770px);
    -moz-transform: translateY(-770px);
    -ms-transform: translateY(-770px);
    transform: translateY(-770px);
}
.image-wrapper.translatey.translatey780:hover img {
    -webkit-transform: translateY(-780px);
    -moz-transform: translateY(-780px);
    -ms-transform: translateY(-780px);
    transform: translateY(-780px);
}
.image-wrapper.translatey.translatey790:hover img {
    -webkit-transform: translateY(-790px);
    -moz-transform: translateY(-790px);
    -ms-transform: translateY(-790px);
    transform: translateY(-790px);
}
.image-wrapper.translatey.translatey800:hover img {
    -webkit-transform: translateY(-800px);
    -moz-transform: translateY(-800px);
    -ms-transform: translateY(-800px);
    transform: translateY(-800px);
}
.image-wrapper.translatey.translatey810:hover img {
    -webkit-transform: translateY(-810px);
    -moz-transform: translateY(-810px);
    -ms-transform: translateY(-810px);
    transform: translateY(-810px);
}
.image-wrapper.translatey.translatey820:hover img {
    -webkit-transform: translateY(-820px);
    -moz-transform: translateY(-820px);
    -ms-transform: translateY(-820px);
    transform: translateY(-820px);
}
.image-wrapper.translatey.translatey830:hover img {
    -webkit-transform: translateY(-830px);
    -moz-transform: translateY(-830px);
    -ms-transform: translateY(-830px);
    transform: translateY(-830px);
}
.image-wrapper.translatey.translatey840:hover img {
    -webkit-transform: translateY(-840px);
    -moz-transform: translateY(-840px);
    -ms-transform: translateY(-840px);
    transform: translateY(-840px);
}
.image-wrapper.translatey.translatey850:hover img {
    -webkit-transform: translateY(-850px);
    -moz-transform: translateY(-850px);
    -ms-transform: translateY(-850px);
    transform: translateY(-850px);
}
.image-wrapper.translatey.translatey860:hover img {
    -webkit-transform: translateY(-860px);
    -moz-transform: translateY(-860px);
    -ms-transform: translateY(-860px);
    transform: translateY(-860px);
}
.image-wrapper.translatey.translatey870:hover img {
    -webkit-transform: translateY(-870px);
    -moz-transform: translateY(-870px);
    -ms-transform: translateY(-870px);
    transform: translateY(-870px);
}
.image-wrapper.translatey.translatey880:hover img {
    -webkit-transform: translateY(-880px);
    -moz-transform: translateY(-880px);
    -ms-transform: translateY(-880px);
    transform: translateY(-880px);
}
.image-wrapper.translatey.translatey890:hover img {
    -webkit-transform: translateY(-890px);
    -moz-transform: translateY(-890px);
    -ms-transform: translateY(-890px);
    transform: translateY(-890px);
}
.image-wrapper.translatey.translatey900:hover img {
    -webkit-transform: translateY(-900px);
    -moz-transform: translateY(-900px);
    -ms-transform: translateY(-900px);
    transform: translateY(-900px);
}
.image-wrapper.translatey.translatey910:hover img {
    -webkit-transform: translateY(-910px);
    -moz-transform: translateY(-910px);
    -ms-transform: translateY(-910px);
    transform: translateY(-910px);
}
.image-wrapper.translatey.translatey920:hover img {
    -webkit-transform: translateY(-920px);
    -moz-transform: translateY(-920px);
    -ms-transform: translateY(-920px);
    transform: translateY(-920px);
}
.image-wrapper.translatey.translatey930:hover img {
    -webkit-transform: translateY(-930px);
    -moz-transform: translateY(-930px);
    -ms-transform: translateY(-930px);
    transform: translateY(-930px);
}
.image-wrapper.translatey.translatey940:hover img {
    -webkit-transform: translateY(-940px);
    -moz-transform: translateY(-940px);
    -ms-transform: translateY(-940px);
    transform: translateY(-940px);
}
.image-wrapper.translatey.translatey950:hover img {
    -webkit-transform: translateY(-950px);
    -moz-transform: translateY(-950px);
    -ms-transform: translateY(-950px);
    transform: translateY(-950px);
}
.image-wrapper.translatey.translatey960:hover img {
    -webkit-transform: translateY(-960px);
    -moz-transform: translateY(-960px);
    -ms-transform: translateY(-960px);
    transform: translateY(-960px);
}
.image-wrapper.translatey.translatey970:hover img {
    -webkit-transform: translateY(-970px);
    -moz-transform: translateY(-970px);
    -ms-transform: translateY(-970px);
    transform: translateY(-970px);
}
.image-wrapper.translatey.translatey980:hover img {
    -webkit-transform: translateY(-980px);
    -moz-transform: translateY(-980px);
    -ms-transform: translateY(-980px);
    transform: translateY(-980px);
}
.image-wrapper.translatey.translatey990:hover img {
    -webkit-transform: translateY(-990px);
    -moz-transform: translateY(-990px);
    -ms-transform: translateY(-990px);
    transform: translateY(-990px);
}
.image-wrapper.translatey.translatey1000:hover img {
    -webkit-transform: translateY(-1000px);
    -moz-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    transform: translateY(-1000px);
}
.image-wrapper.translatey.translatey1010:hover img {
    -webkit-transform: translateY(-1010px);
    -moz-transform: translateY(-1010px);
    -ms-transform: translateY(-1010px);
    transform: translateY(-1010px);
}
.image-wrapper.translatey.translatey1020:hover img {
    -webkit-transform: translateY(-1020px);
    -moz-transform: translateY(-1020px);
    -ms-transform: translateY(-1020px);
    transform: translateY(-1020px);
}
.image-wrapper.translatey.translatey1030:hover img {
    -webkit-transform: translateY(-1030px);
    -moz-transform: translateY(-1030px);
    -ms-transform: translateY(-1030px);
    transform: translateY(-1030px);
}
.image-wrapper.translatey.translatey1040:hover img {
    -webkit-transform: translateY(-1040px);
    -moz-transform: translateY(-1040px);
    -ms-transform: translateY(-1040px);
    transform: translateY(-1040px);
}
.image-wrapper.translatey.translatey1050:hover img {
    -webkit-transform: translateY(-1050px);
    -moz-transform: translateY(-1050px);
    -ms-transform: translateY(-1050px);
    transform: translateY(-1050px);
}
.image-wrapper.translatey.translatey1060:hover img {
    -webkit-transform: translateY(-1060px);
    -moz-transform: translateY(-1060px);
    -ms-transform: translateY(-1060px);
    transform: translateY(-1060px);
}
.image-wrapper.translatey.translatey1070:hover img {
    -webkit-transform: translateY(-1070px);
    -moz-transform: translateY(-1070px);
    -ms-transform: translateY(-1070px);
    transform: translateY(-1070px);
}
.image-wrapper.translatey.translatey1080:hover img {
    -webkit-transform: translateY(-1080px);
    -moz-transform: translateY(-1080px);
    -ms-transform: translateY(-1080px);
    transform: translateY(-1080px);
}
.image-wrapper.translatey.translatey1090:hover img {
    -webkit-transform: translateY(-1090px);
    -moz-transform: translateY(-1090px);
    -ms-transform: translateY(-1090px);
    transform: translateY(-1090px);
}
.image-wrapper.translatey.translatey1100:hover img {
    -webkit-transform: translateY(-1100px);
    -moz-transform: translateY(-1100px);
    -ms-transform: translateY(-1100px);
    transform: translateY(-1100px);
}

/* ----  [ Portfolio Item Details ]----------Lioit------------------------*/
.work-detail{
    font-weight: 400;
}
.work-detail p:last-child{
    margin-bottom: 0;
}
.work-full-detail{
    font-size: 13px;
    color: #777;
}
.work-full-detail p{
    padding: 8px 0;
    margin: 0;
    border-top: 1px solid rgba(0,0,0, .05);
}
.work-full-detail p:last-child{
    border-bottom: 1px solid rgba(0,0,0, .05);
}
.work-full-detail p strong{
    width: 100px;
    display: inline-block;
}
.work-full-action{
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
    text-align: center;
}




/* -19-  [ Team Columns ]----------Lioit------------------------*/

/*	- Team Styles.

-------------------------------------Lioit------------------------*/


.team-grid{

}
.team-col{

}
.team-col-image{
    position: relative;
    overflow: hidden;
}
.team-col-image img{
    width: 100%;
}
.team-col-image:after{
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;

    z-index: 1;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-col-info{
    opacity: 0;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    padding: 20px 23px 55px;
    font-size: 15px;
    color: #777;
    text-align: center;
    z-index: 2;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-col-descr{
    color: #777;
    text-align:center;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-col-name {
    margin-top: 23px;
    font-size: 15px;
    text-transform: capitalize;
}
.team-col-role{
    margin-top: 4px;
    font-size: 12px;
}
.team-social-links{
    font-size: 14px;
    cursor: pointer;
}
.team-social-links a{
    display: inline-block;
    padding: 0px 0px;
    width: 30px;
    text-align: center;
    color: rgba(0,0,0, .4);
    border: 2px solid rgba(255, 255, 255, .4);
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-social-links-alt a {
    background: rgba( 0, 0, 0, .09);
    border: none;
    padding: 2px 5px;
    border-radius: 3px;
}
.team-social-links-alt.bordered a {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    padding: 0px;
}

/* Hover state */
.no-mobile .team-col:hover .team-col-image:after{
    background: rgba( 0, 0, 0, .7);
}
.no-mobile .team-col:hover .team-col-info{
    opacity: 1;
}
.no-mobile .team-col:hover .team-col-descr{
    color: #111;
}
.no-mobile .team-social-links a:hover{
    color: rgba(0,0,0, .75);
}
.team-col:hover .team-col-info,
.team-col:hover .team-col-info h4,
.team-col:hover .team-col-info p,
.team-col:hover .team-col-info a {
    color: #fff;
}
.team-alt .team-col-image {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.team-alt .team-col-image ,
.team-alt .team-col-image img{
    border-radius: 5px;
}
.team-col-info-btm {
    padding-top: 20px;
}


.team-alt1 .team-col-image {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.team-alt1 .team-col-image ,
.team-alt1 .team-col-image img{
    border-radius: 100%;
}


.team-alt2 .team-col-image {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.team-alt2 .team-col-image ,
.team-alt2 .team-col-image img{
    border-radius: 100%;
}


.team-col-info-btm {
    padding-top: 20px;
}


/* Mobile touch */
.team-col.js-enabled .team-col-image:after{
    background: rgba(255,255,255, .93);
}
.team-col.js-enabled .team-col-info{
    opacity: 1;
}
.team-col.js-enabled .team-col-descr{
    color: #111;
}
.team-col.js-enabled .team-social-links a:hover{
    color: rgba(0,0,0, .75);
}

/* -20-  [ Testimonials ]----------Lioit------------------------*/

/*	- Testimonials Sliders
    - Testimonials Columns
    - Recomondation

-------------------------------------Lioit------------------------*/
#testimonials {
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
#testimonials .author {
    font-style: normal;
    font-size: 14px;
    color: #3f8dbf;
    display: block;
}
#testimonials div {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 32px;
    font-weight: 300;
    position: relative;
}
#testimonials .tab {
    border: none;
    margin: 0;
    display: inline;
}
#testimonials .etabs {
    padding: 0;
    margin: 0;
    height: 12px;
}
#testimonials .tab a {
    padding: 0;
    text-indent: -99999px;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: none;
    border: 1px solid #aaa;
    display: inline-block;
}
#testimonials .tab a.active,
#testimonials .tab a:hover {
    border: 1px solid #FFF;
    background: none;
    position: relative;
    z-index: 3;
}
#testimonials .panel-container {
    border: none
}
#testimonials.tab-container .panel-container div {
    padding-top: 15px
}
/* ----  [ Testimonials Columns ]----------Lioit------------------------*/
.testimonial-box {
    position: relative;
    background: #fff;
    padding: 20px 20px 10px 20px;
    text-align: center;
}
.testimonial-box:after,
.testimonial-box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.testimonial-box:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 8px;
    margin-left: -8px;
}
.testimonial-box:before {
    border-color: rgba(218, 218, 218, 0);
    border-width: 9px;
    margin-left: -9px;
}
.col-testimonials .author {
    margin-top: 20px;
    font-weight: 600;
    display: inline-block;
}
.col-testimonials .author em {
    font-weight: 500;
    font-size: 12px;
    color: #7a7a7a;
    display: block;
    font-style: normal;
    margin-top: -5px;
}
.col-testimonials .testimonial-box .quote {
    text-align: left;
    font-size: 17px;
}
/* ----  [ Testimonials - Recomondation ]----------Lioit------------------------*/
blockquote.testimonial {
    margin-bottom: 0px;
}
.testimonial p {

    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 40px;
}
.testimonial.alt-text p {

    font-size: 22px;
}
blockquote.testimonial footer:before, blockquote.testimonial small:before, blockquote.testimonial .small:before {
    content: '';
}
blockquote.testimonial:before,
blockquote.testimonial:after,
blockquote.testimonial p:after {
  display: none;
}

.testimonial-author {
    overflow: hidden;
    width: 40%;
    margin: 0 auto;
    text-transform: capitalize;
    font-size: 13px;

}
.t-author-Avatar {
    width: 67px;
    height: 67px;
    padding: 5px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    background: rgba(255, 255, 255, 0.16);
}
.t-author-Avatar ,
.t-author-Avatar img {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.t-author-info {
    overflow: hidden;
    padding-top: 10px;
}
.t-author-name {
    font-size: 16px;
    font-weight: 600;
    display: block;
}
.t-author-job {
    display: block;
    font-size: 14px;
    font-weight: 400;
}
.testimonial-section .owl-pagination {
  bottom: 70px;
}



/* -21-  [ Clients  ]----------Lioit------------------------*/

/*	-
-------------------------------------Lioit------------------------*/
.logo-item{
    height: 80px;
    text-align: center;
    opacity: .75;

    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);

}
.logo-item:hover{
    opacity: 1;
}
.logo-item img{
    position: relative;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.logo-item2{
    opacity: 1;
}

.logo-item2:hover{
    opacity: .75;
}




/* -22-  [ Shortcodes  ]----------Lioit------------------------*/

/*	- Buttons
    - Tabs
    - Tabs - Mini
    - Accordion
    - Toggle
    - Dropcaps
    - Highlights
    - List Styles
    - Color Palette
    - Chat Box
    - Price Tables
    - Progress bars
    - Progress bars Alternative
    - Highlight Code
    - Employment Section
    - Features & Services Columns
        - Features
        - Alternative Features
        - Bordered Features
        - Alternative services
        - Alternative services Mini
        - Process
        - Benefits
    - Counters
    - Alert messages
    - Social Buttons
    - Sliders
        - Owl Carousel
        - Triple Layout Slider
        - Fullwidth Slider
        - Three Featured Posts Slider
        - Five Featured Posts Slider
        - Full Width Slideshow
        - Photo Tilt effect

-------------------------------------Lioit------------------------*/




.progress-button {
    position: relative;
}
.progress-button .content {
    position: relative;
    display: block;
    z-index: 10;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.progress-button .progress {
    position: absolute;
    left: 0;
    background: rgba(0,0,0,0.2);
    top: 0;
    width: 0%;
    opacity: 0;
    height: 100%;
    z-index: 0;
    -webkit-transition: width 0s 0.3s, opacity 0.3s;
    transition: width 0s 0.3s, opacity 0.3s;
}
.progress-button.active .progress {
    opacity: 1;
    width: 100%;
    -webkit-transition: width 1.2s;
    transition: width 1.2s;
}

.btn-mod,
a.btn-mod{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7px 25px;
    margin: 4px;
  	color: #fff;
  	background: #28a8d3;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-weight: bold;
    font-family: 'Montserrat';
}
.btn-mod-defult {
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod-defult:hover,
.btn-mod-defult:focus,
a.btn-mod-defult:hover,
a.btn-mod-defult:focus{
    color: rgba(255,255,255, .85) !important;
  	background-color: rgba(0,0,0, .7) !important;
    text-decoration: none;
    outline: none;

}
.btn-mod:active{
    cursor: pointer !important;
}
.btn-mod i{
    margin-right: 5px;
    display: inline-block;
    width: 18px;
    text-align: left;
    font-size: 15px;
}
.btn-mod.btn-tiny{
  	padding: 2px 10px;
    font-size: 10px;
    margin: 2px;
}
.btn-mod.btn-small{
  	padding: 6px 15px;
    font-size: 10px;
    margin: 2px;
}
.btn-mod.btn-small i{
    font-size: 15px !important;
}
.btn-mod.btn-vsmall{
  	padding: 7px 15px;
    font-size: 10px;
    margin: 2px;
    font-size: 12px;
}
.btn-mod.btn-medium{
  	padding: 10px 25px;
    font-size: 14px;
    margin: 4px;
}
.btn-mod.btn-large{
  	padding: 18px 35px;
    font-size: 14px;
    margin: 8px;
}
.btn-mod.btn-xlarge{
  	padding: 22px 55px;
    font-size: 16px;
    margin: 6px;
}
.btn-mod.btn-xxlarge{
  	padding: 28px 80px;
    font-size: 19px;
    margin: 10px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {

    .btn-mod.btn-tiny{
      	padding: 2px 8px;
        font-size: 10px;
        margin: 2px;
    }
    .btn-mod.btn-small{
      	padding: 6px 12px;
        font-size: 15px !important;
        margin: 2px;
    }
    .btn-mod.btn-small i{
        font-size: 15px !important;
    }
    .btn-mod.btn-vsmall{
      	padding: 5px 10px;
        font-size: 10px;
        margin: 2px;
        font-size: 12px;
    }
    .btn-mod.btn-medium{
      	padding: 8px 18px;
        font-size: 14px;
        margin: 4px;
    }
    .btn-mod.btn-large{
      	padding: 16px 20px;
        font-size: 14px;
        margin: 8px;
    }
    .btn-mod.btn-xlarge{
      	padding: 18px 35px;
        font-size: 16px;
        margin: 6px;
    }
    .btn-mod.btn-xxlarge{
      	padding: 18px 60px;
        font-size: 19px;
        margin: 10px;
    }

}


.btn-mod.btn-3d {
    border-radius: 3px;
    border-bottom: 3px solid rgba(0,0,0,.15);
}
.btn-mod.btn-glass{
  	color: rgba(255,255,255, .95);
  	background: rgba(0,0,0, .40);
}
.btn-mod.btn-glass-white{
  	color: #fff;
  	background: rgba(255,255,255, .23);
}
.btn-mod.btn-mod-defult.btn-glass:hover,
.btn-mod.btn-mod-defult.btn-glass:focus{
  	color: rgba(255,255,255, 1);
  	background: rgba(0,0,0, 1);
}
.btn-mod.btn-border{
  	color: #151515;
    border: 1px solid rgba(0, 0, 0, .09);
  	background: transparent;
}
.btn-mod.btn-shodow{
    border: none;
    box-shadow: 3px 0px 7px rgba(0, 0, 0, .35) !important;
}
.btn-mod.btn-transparent{
  	background: transparent;
  	border: none;
}
.btn-mod.btn-mod-defult.btn-border:hover,
.btn-mod.btn-mod-defult.btn-border:focus{
  	color: #fff;
    border-color: transparent;
  	background: #000;
}

.btn-mod.btn-border-c{
  	color: #28a8d3;
    border: 2px solid #28a8d3;
  	background: transparent;
}
.btn-mod.btn-mod-defult.btn-border-c:hover,
.btn-mod.btn-mod-defult.btn-border-c:focus{
  	color: #fff;
    border-color: transparent;
  	background: #28a8d3;
}
.btn-mod.btn-border-w{
  	color: #fff;
    border: 2px solid rgba(255,255,255, .75);
  	background: transparent;
}
.btn-mod.btn-mod-defult.btn-border-w:hover,
.btn-mod.btn-mod-defult.btn-border-w:focus{
  	color: #111;
    border-color: transparent;
  	background: #fff;
}
.btn-mod.btn-w{
  	color: #111;
  	background: rgba(255,255,255, 1);
}
.btn-mod.btn-mod-defult.btn-w:hover,
.btn-mod.btn-mod-defult.btn-w:focus{
  	color: #111;
  	background: rgba(0,0,0, 0.09);
}
.btn-mod.btn-w-color{
  	color: #28a8d3;
  	background: #fff;
}
.btn-mod.btn-mod-defult.btn-w-color:hover,
.btn-mod.btn-mod-defult.btn-w-color:focus{
    color: #151515;
  	background: #fff;
}
.btn-mod.btn-gray{
  	color: #777;
  	background: #e5e5e5;
}
.btn-mod.btn-mod-defult.btn-gray:hover,
.btn-mod.btn-mod-defult.btn-gray:focus{
  	color: #444;
  	background: #d5d5d5;
}

.btn-mod.btn-dark{
  	color: #fff;
  	background: rgba(0,0,0,0.8);
}
.btn-mod.btn-mod-defult.btn-gray:hover,
.btn-mod.btn-mod-defult.btn-gray:focus{
}


.btn-mod.btn-color{
  	color: #fff;
  	background: #28a8d3;
}
.btn-mod.btn-mod-defult.btn-color:hover,
.btn-mod.btn-mod-defult.btn-color:focus{
  	color: #fff;
  	background: #28a8d3;
    opacity: .85;
}
.btn-bordered {
    border: 2px solid rgba(0, 0, 0, .2);
}
.btn-bordered.transparent {
    background: transparent;
    color: #3d414a;
}
.btn-bordered.btn-mod-defult.transparent:hover {
    color: #3d414a;
    background: rgba(0,0,0, 0.4) !important;
}
.btn-mod.btn-circle{
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.btn-mod.btn-xxlarge.btn-circle{
  	-webkit-border-radius:110px;
    -moz-border-radius: 110px;
    border-radius: 110px;
}
.btn-mod.btn-xlarge.btn-circle{
  	-webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}
.btn-mod.btn-large.btn-circle{
  	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
.btn-mod.btn-circle2{
  	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
.btn-mod.btn-circle3{
  	-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.btn-mod.btn-round{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.btn-icon{
    position: relative;
    border: none;
    overflow: hidden;
}
.btn-icon.btn-small{
    overflow: hidden;
}
.btn-icon > span{
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    left: 0;
    color: #777;
    font-size: 48px;
    opacity: .2;

    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-icon:hover > span{
    opacity: 0;

    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
.btn-icon > span.white{
    color: #fff;
}
.btn-icon > span.black{
    color: #000;
}
.btn-full{
    width: 100%;
}
.btn-icon i  {
    font-size: 20px;
    margin-right: 10px;
}
.download-button{
    display: inline-block;
    position: relative;
    padding: 20px 40px 15px 85px;
    text-align: left;
    text-decoration: none;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.download-button:hover,
.download-button:focus{
    text-decoration: none;
    color: #111;
    opacity: .6;
}
.db-icon{
    width: 60px;
    height: 40px;
    position: absolute;
    top: 25px;
    left: 20px;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
}
.db-title{
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}
.db-descr{
    display: block;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 20px;
}





/* Common button styles */
.button,
.button.btn {
    position: relative !important;
    z-index: 1 !important;
    -webkit-backface-visibility: hidden !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.button > span {
    vertical-align: middle !important;
}


/* Individual button styles */

/* Winona */
.button--winona {
    overflow: hidden;
    -webkit-transition: border-color 0.3s, background-color 0.3s;
    transition: border-color 0.3s, background-color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona::after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    color: rgba(0, 0, 0, .65);
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0);
}
.button--winona > span {
    display: block;
}
.button--winona.button--inverted {
    color: rgba(0, 0, 0, .65);
}
.button--winona.button--inverted:after {
    color: #fff;
}
.button--winona::after,
.button--winona > span {

    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona:hover {
    border-color: rgba(0, 0, 0, .65);
    background-color: rgba(0, 0, 0, .65);
}
.button--winona.button--inverted:hover {
    border-color: rgba(0, 0, 0, .65);
    background-color: rgba(0, 0, 0, .65);
}
.button--winona:hover::after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.button--winona:hover > span {
    opacity: 0;
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

/* Ujarak */
.button--ujarak {
    -webkit-transition: border-color 0.4s, color 0.4s;
    transition: border-color 0.4s, color 0.4s;
}
.button--ujarak::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    z-index: -1;
    opacity: 0;
    -webkit-transform: scale3d(0.7, 1, 1);
    transform: scale3d(0.7, 1, 1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--ujarak.button--round-s::before {
    border-radius: 2px;
}
.button--ujarak.button--inverted::before {
    background: rgba(0, 0, 0, .65);
}
.button--ujarak,
.button--ujarak::before {
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--ujarak:hover {
    color: #fff;
    border-color:rgba(0, 0, 0, .65);
}
.button--ujarak.button--inverted:hover {
    color: rgba(0, 0, 0, .65);
    border-color: #fff;
}
.button--ujarak:hover::before {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Wayra */
.button--wayra {
    overflow: hidden;
    -webkit-transition: border-color 0.3s, color 0.3s;
    transition: border-color 0.3s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--wayra::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    z-index: -1;
    -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
.button--wayra:hover {
    color: #fff;
    border-color:rgba(0, 0, 0, .65);
}
.button--wayra.button--inverted:hover {
    color: rgba(0, 0, 0, .65);
    border-color: #fff;
}
.button--wayra:hover::before {
    opacity: 1;
    background-color: rgba(0, 0, 0, .65);
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--wayra.button--inverted:hover::before {
    background-color: #fff;
}

/* Tamaya */
.button--tamaya {
    overflow: hidden;
    color: rgba(0, 0, 0, .65);
}
.button--tamaya.button--inverted {
    color: rgba(0, 0, 0, .65);
    border-color: rgba(0, 0, 0, .65);
}
.button--tamaya::before,
.button--tamaya::after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya.button--inverted::before,
.button--tamaya.button--inverted::after {
    background: #fff;
    color: rgba(0, 0, 0, .65);
}
.button--tamaya::before {
    top: 0;
    padding-top: 20%;
}
.button--tamaya::after {
    bottom: 0;
    line-height: 0;
}
.button--tamaya > span {
    display: block;
    -webkit-transform: scale3d(0.2, 0.2, 1);
    transform: scale3d(0.2, 0.2, 1);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya:hover::before {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.button--tamaya:hover::after {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.button--tamaya:hover > span {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

/* Rayen */
.button--rayen {
    overflow: hidden;
}
.button--rayen.button--inverted {
    color: #fff;
}
.button--rayen::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
}
.button--rayen.button--inverted::before {
    background: #fff;
}
.button--rayen > span {
    display: block;

}
.button--rayen::before,
.button--rayen > span {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--rayen:hover::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    padding-top: 20%;
}
.button--rayen:hover > span {
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}

/* Pipaluk */
.button--pipaluk {
    width: 240px;
    padding: 1.5em 3em;
    color: #fff;
}
.button--pipaluk.button--inverted {
    color: rgba(0, 0, 0, .65);
}
.button--pipaluk::before,
.button--pipaluk::after {
    content: '';
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
}
.button--pipaluk::before {
    border: 2px solid rgba(0, 0, 0, .65);
}
.button--pipaluk.button--inverted::before {
    border-color: #fff;
}
.button--pipaluk::after {
    background: rgba(0, 0, 0, .65);
}
.button--pipaluk.button--inverted::after {
    background: #fff;
}
.button--pipaluk:hover::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.button--pipaluk::before,
.button--pipaluk:hover::after {
    -webkit-transform: scale3d(0.7, 0.7, 1);
    transform: scale3d(0.7, 0.7, 1);
}
.button--pipaluk:hover::after {
    background-color: rgba(0, 0, 0, .65);
}
.button--pipaluk.button--inverted:hover::after {
    background-color: #fff;
}

/* Nuka */
.button--nuka {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--nuka.button--inverted {

}
.button--nuka::before,
.button--nuka::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    background: rgba(0, 0, 0, .65);
    z-index: -1;
}
.button--nuka::before {
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    opacity: 0.2;
    -webkit-transform: scale3d(0.7, 1, 1);
    transform: scale3d(0.7, 1, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}
.button--nuka::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale3d(1.1, 1, 1);
    transform: scale3d(1.1, 1, 1);
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}
.button--nuka::before,
.button--nuka::after {
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--nuka.button--inverted::before,
.button--nuka.button--inverted::after {
    background: #fff;
}
.button--nuka:hover {
    color: #fff;
}
.button--nuka:hover::before {
    opacity: 1;
}
.button--nuka:hover::after {
    background-color: rgba(0, 0, 0, .65);
}
.button--nuka.button--inverted:hover::after {
    background-color: rgba(0, 0, 0, .65);
}
.button--nuka:hover::after,
.button--nuka:hover::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

/* Moema */
.button--moema {
    background: rgba(0, 0, 0, .65);
    color: #fff;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.button--moema.button--inverted {
    background: #ECEFF1;
    color: rgba(0, 0, 0, .65);
}
.button--moema::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.button--moema:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #ECEFF1;
    background-color: rgba(0, 0, 0, .65);
    -webkit-animation: anim-moema-1 0.3s forwards;
    animation: anim-moema-1 0.3s forwards;
}
.button--moema.button--inverted:hover {
    color: #ECEFF1;
    background-color: rgba(0, 0, 0, .65);
}
.button--moema:hover::before {
    -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
    animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-moema-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-moema-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* Isi */
.button--isi {
    color: #fff;
    background: rgba(0, 0, 0, .65);
    overflow: hidden;
}
.button--isi::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    margin: -15px 0 0 1px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale3d(1, 2, 1);
    transform: scale3d(1, 2, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.9,1);
    transition-timing-function: cubic-bezier(0.7,0,0.9,1);
}
.button--isi .button__icon {
    vertical-align: middle;
}
.button--isi > span {
    vertical-align: middle;
}
.button--isi:hover::before {
    -webkit-transform: scale3d(9, 9, 1);
    transform: scale3d(9, 9, 1);
}

/* Aylen */
.button.button--aylen {
    background: #fff;
    color: rgba(0, 0, 0, .65);
    overflow: hidden;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.button--aylen.button--inverted {
    background: none;
    color: #fff;
}
.button--aylen::before,
.button--aylen::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    left: 0;
    z-index: -1;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--aylen::before {
    background: rgba(0, 0, 0, .65);
}
.button--aylen::after {
    background: rgba(0, 0, 0, .65);
}
.button--aylen:hover {
    color: #fff;
}
.button--aylen:hover::before,
.button--aylen:hover::after {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.button--aylen:hover::after {
    -webkit-transition-delay: 0.175s;
    transition-delay: 0.175s;
}

/* Saqui */
.button.button--saqui {
    overflow: hidden;
    color: #fff;
    background: rgba(0, 0, 0, .65);
    -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.button--saqui.button--inverted {
    background: #fff;
    color: rgba(0, 0, 0, .65);
}
.button--saqui::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, .65);
    -webkit-transform-origin: -25% 50%;
    transform-origin: -25% 50%;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    -webkit-transition: -webkit-transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
}
.button--saqui.button--inverted::after {
    color: #fff;

}
.button--saqui:hover::after,
.button--saqui:hover {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.button--saqui:hover {
    background-color: rgba(0, 0, 0, .65);
    color: rgba(0, 0, 0, .65);
}
.button--saqui.button--inverted:hover {
    background-color: rgba(0, 0, 0, .65);
    color: rgba(0, 0, 0, .65);
}
.button--saqui:hover::after {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
}

/* Wapasha */
.button.button--wapasha {
    background: rgba(0, 0, 0, .65);
    color: #fff;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.button--wapasha.button--inverted {
    background: #fff;
    color: rgba(0, 0, 0, .65);
}
.button--wapasha::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    -webkit-transform: scale3d(0.6, 0.6, 1);
    transform: scale3d(0.6, 0.6, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--wapasha.button--inverted::before {
    border-color: rgba(0, 0, 0, .65);
}
.button--wapasha:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, .65);
}
.button--wapasha.button--inverted:hover {
    background-color: rgba(0, 0, 0, .65);
    color: rgba(0, 0, 0, .65);
}
.button--wapasha:hover::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
}

/* Nina */
.button--nina {
    background: rgba(0, 0, 0, .65);
    color: #fff;
    overflow: hidden;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.button--nina.button--inverted {
    background: #fff;
    color: rgba(0, 0, 0, .65);
}
.button--nina > span {
    opacity: 0;
    color: #fff;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--nina::before {
    content: attr(data-text);
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 100%;

}
.button--nina:hover {
    background-color: rgba(0, 0, 0, .65);
}
.button--nina:hover::before {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.button--nina:hover > span {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.button--nina:hover > span:nth-child(1) {
    -webkit-transition-delay: 0.045s;
    transition-delay: 0.045s;
}
.button--nina:hover > span:nth-child(2) {
    -webkit-transition-delay: 0.09s;
    transition-delay: 0.09s;
}
.button--nina:hover > span:nth-child(3) {
    -webkit-transition-delay: 0.135s;
    transition-delay: 0.135s;
}
.button--nina:hover > span:nth-child(4) {
    -webkit-transition-delay: 0.18s;
    transition-delay: 0.18s;
}
.button--nina:hover > span:nth-child(5) {
    -webkit-transition-delay: 0.225s;
    transition-delay: 0.225s;
}
.button--nina:hover > span:nth-child(6) {
    -webkit-transition-delay: 0.27s;
    transition-delay: 0.27s;
}
.button--nina:hover > span:nth-child(7) {
    -webkit-transition-delay: 0.315s;
    transition-delay: 0.315s;
}
.button--nina:hover > span:nth-child(8) {
    -webkit-transition-delay: 0.36s;
    transition-delay: 0.36s;
}
.button--nina:hover > span:nth-child(9) {
    -webkit-transition-delay: 0.405s;
    transition-delay: 0.405s;
}
.button--nina:hover > span:nth-child(10) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}
.button--nina:hover > span:nth-child(11) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}
.button--nina:hover > span:nth-child(12) {
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s;
}
.button--nina:hover > span:nth-child(13) {
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s;
}
.button--nina:hover > span:nth-child(14) {
    -webkit-transition-delay: 0.85s;
    transition-delay: 0.85s;
}
.button--nina:hover > span:nth-child(15) {
    -webkit-transition-delay: 0.95s;
    transition-delay: 0.95s;
}
.button--nina:hover > span:nth-child(16) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}
.button--nina:hover > span:nth-child(17) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}
.button--nina:hover > span:nth-child(18) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}
.button--nina:hover > span:nth-child(19) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}
.button--nina:hover > span:nth-child(20) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}

/* Nanuk */
.button--nanuk {
    overflow: hidden;
    background: rgba(0, 0, 0, .65);
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.button--nanuk.button--inverted {
    background: #fff;
    color: rgba(0, 0, 0, .65);
}
.button--nanuk > span {
    display: inline-block;
}
.button--nanuk:hover {
    background-color: rgba(0, 0, 0, .65);
}
.button--nanuk:hover > span:nth-child(odd) {
    -webkit-animation: anim-nanuk-1 0.5s forwards;
    animation: anim-nanuk-1 0.5s forwards;
}
.button--nanuk:hover > span:nth-child(even) {
    -webkit-animation: anim-nanuk-2 0.5s forwards;
    animation: anim-nanuk-2 0.5s forwards;
}
.button--nanuk:hover > span:nth-child(odd),
.button--nanuk:hover > span:nth-child(even) {
    -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1);
}
@-webkit-keyframes anim-nanuk-1 {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    49% {
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        color: inherit;
    }
    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        color: #fff;
    }
    100% {
        color: #fff;
    }
}
@keyframes anim-nanuk-1 {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    49% {
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        color: inherit;
    }
    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        color: #fff;
    }
    100% {
        color: #fff;
    }
}
@-webkit-keyframes anim-nanuk-2 {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    49% {
        opacity: 1;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        color: inherit;
    }
    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        color: #fff;
    }
    100% {
        color: #fff;
    }
}
@keyframes anim-nanuk-2 {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    49% {
        opacity: 1;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        color: inherit;
    }
    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        color: #fff;
    }
    100% {
        color: #fff;
    }
}
.button--nanuk:hover > span:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.button--nanuk:hover > span:nth-child(2) {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
}
.button--nanuk:hover > span:nth-child(3) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.button--nanuk:hover > span:nth-child(4) {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
.button--nanuk:hover > span:nth-child(5) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.button--nanuk:hover > span:nth-child(6) {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
.button--nanuk:hover > span:nth-child(7) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.button--nanuk:hover > span:nth-child(8) {
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.button--nanuk:hover > span:nth-child(9) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.button--nanuk:hover > span:nth-child(10) {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}
.button--nanuk:hover > span:nth-child(11) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

/* Antiman */
.button--antiman {
}
.button--antiman.button--inverted,
.button--antiman.button--inverted-alt {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--antiman > span {
}
.button--antiman::before,
.button--antiman::after {
    content: '';
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--antiman::before {
    border: 2px solid rgba(0, 0, 0, .65);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
}
.button--antiman.button--border-thin::before {
    border-width: 1px;
}
.button--antiman.button--border-medium::before {
    border-width: 2px;
}
.button--antiman.button--border-thick::before {
    border-width: 3px;
}
.button--antiman.button--inverted::before {
    border-color: rgba(0, 0, 0, .65);
}
.button--antiman.button--inverted-alt::before {
    border-color: rgba(0, 0, 0, .65);
}
.button--antiman::after {
}
.button--antiman.button--inverted::after {
    background: rgba(0, 0, 0, .65);
}
.button--antiman.button--inverted-alt::after {
    background: rgba(0, 0, 0, .65);
}
.button--antiman.button--inverted:hover {
    color: rgba(0, 0, 0, .65);
}
.button--antiman.button--inverted-alt:hover {
    color: rgba(0, 0, 0, .65);
}
.button--antiman:hover::before {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.button--antiman:hover::after {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
}

/* Itzel */
.button--itzel {
    border: none;
    overflow: hidden;
}
.button--itzel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-radius: inherit;
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);
    clip-path: url(agency-elements-buttons-hovers.html#clipBox);
    -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
    transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.button--itzel.button--border-thin::before {
    border: 1px solid;
    -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
    transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
}
.button--itzel.button--border-thick::before {
    border: 3px solid;
    -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
    transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
}

.button--itzel::before,
.button--itzel .button__icon {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--itzel .button__icon {
    position: absolute;
    top: 100%;
    left: 50%;
    height: 60px;
    line-height: 60px;
    margin-left: 0px !important;
    text-align: center !important;
    font-size: 20px !important;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}
.button--itzel > span {
    display: block;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.button--itzel:hover::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.button--itzel:hover .button__icon {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
}
.button--itzel:hover > span {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

/* Naira */
.button--naira {
    overflow: hidden;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.button--naira::before {
    content: '';
    position: absolute;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(0, 0, 0, .65);
    top: -50%;
    z-index: -1;
    -webkit-transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
}
.button--naira.button--inverted::before {
    background: rgba(0, 0, 0, .65);
}
.button--naira-up::before {
    -webkit-transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
    transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
}
.button--naira > span {
    display: block;
}
.button--naira .button__icon {
    position: absolute;
    top: 0;
    width: 100%;
    left: 20%;
    color: #fff;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.button--naira-up .button__icon {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.button--naira > span,
.button--naira .button__icon {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--naira .button__icon {
    padding: 1em 2em;
}
.button--naira:hover::before {
    -webkit-animation: anim-naira-1 0.3s forwards ease-in;
    animation: anim-naira-1 0.3s forwards ease-in;
}
.button--naira-up:hover::before {
    -webkit-animation: anim-naira-2 0.3s forwards ease-in;
    animation: anim-naira-2 0.3s forwards ease-in;
}
@-webkit-keyframes anim-naira-1 {
    50% {
        -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}
@keyframes anim-naira-1 {
    50% {
        -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}
@-webkit-keyframes anim-naira-2 {
    50% {
        -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}
@keyframes anim-naira-2 {
    50% {
        -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}
.button--naira:hover {
    background-color: rgba(0, 0, 0, .65);
    -webkit-transition: background-color 0s 0.3s;
    transition: background-color 0s 0.3s;
}
.button--naira.button--inverted:hover {
    background-color: rgba(0, 0, 0, .65);
}
.button--naira:hover .button__icon {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.button--naira:hover > span {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.button--naira-up:hover > span {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

/* Quidel */
.button--quidel {
    background: rgba(0, 0, 0, .65);
    color: rgba(0, 0, 0, .65);
    overflow: hidden;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--quidel.button--inverted {
    background: #fff;
    color: #fff;
}
.button--quidel::before,
.button--quidel::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: inherit;
}
.button--quidel::after {
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #fff;
}
.button--quidel.button--inverted::after {
    background: rgba(0, 0, 0, .65);
}
.button--quidel::before {
    background: rgba(0, 0, 0, .65);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--quidel.button--inverted::before {
    background: rgba(0, 0, 0, .65);
}
.button--round-s.button--quidel::after {
    border-radius: 3px;
}
.button--round-m.button--quidel::after {
    border-radius: 13px;
}
.button--round-l.button--quidel::after {
    border-radius: 40px;
}
.button--quidel > span {
    color: #333 !important;
}
.button--quidel.button--inverted > span {
    color: #fff !important;
}
.button--quidel:hover {
    color: rgba(0, 0, 0, .65);
}
.button--quidel.button--inverted:hover {
    color: rgba(0, 0, 0, .65);
}
.button--quidel:hover::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Sacnite */
.button.button--sacnite {
    width: 70px;
    height: 70px;
    min-width: 0;
    padding: 0;
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.button--scanite.button--round-l {
    border-radius: 50%;
}
.button--sacnite.button--inverted {
    color: rgba(0, 0, 0, .65);
}
.button--sacnite::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
    box-shadow: inset 0 0 0 35px rgba(0, 0, 0, .65);
    -webkit-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
    -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
    transition: box-shadow 0.3s, transform 0.3s;
}
.button--sacnite.button--inverted::before {
    box-shadow: inset 0 0 0 35px #fff;
}
.button--sacnite .button__icon {
    font-size: 22px;
    width: 22px;
}
.button--sacnite > span {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.button--sacnite:hover {
    color: rgba(0, 0, 0, .65);
}
.button--sacnite.button--inverted:hover {
    color: #fff;
}
.button--sacnite:hover::before {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .65);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.button--sacnite.button--inverted:hover::before {
    box-shadow: inset 0 0 0 2px #fff;
}

/* Shikoba */
.button.button--shikoba {
    padding: 1em 30px 1em 50px;
    overflow: hidden;
    background: #fff;
    color: rgba(0, 0, 0, .65);
    border-color: rgba(0, 0, 0, .65);
    -webkit-transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.button--shikoba.button--inverted {
    color: #fff;
    background: rgba(0, 0, 0, .65);
}
.button--shikoba > span {
    display: inline-block;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--shikoba .button__icon {
    position: absolute;
    left: 20px;
    font-size: 18px;
    -webkit-transform: translate3d(-40px, 2.5em, 0);
    transform: translate3d(-40px, 2.5em, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--shikoba:hover .button__icon,
.button--shikoba:hover > span {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.button--shikoba:hover {
    background: rgba(0, 0, 0, .65);
    border-color: rgba(0, 0, 0, .65);
    color: #fff;
}





/* ----  [ Tabs ]----------Lioit------------------------*/
.nav-tabs.lio-sh-tabs   {
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    font-weight: 300;
    line-height: normal ;
}
ul.nav-tabs.lio-sh-tabs li {
    padding: 0px !important;
    margin: 0px;
    margin-right: 10px !important;
}
.lio-sh-tabs{
    border-color: #e5e5e5;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    border-bottom: none;
}
.lio-sh-tabs > li > a{
    text-decoration: none;
    color: #414046;
    -webkit-border-top-left-radius: 3px;
    -moz-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    background: #f7f7f7;
    -webkit-border-top-right-radius: 3px;
    -moz-border-top-right-radius: 3px;
    border-top-right-radius: 3px;

    font-weight: 600;
}
.lio-sh-tabs > li > a:hover{
    background-color: #f5f5f5;
}
.nav-tabs.lio-sh-tabs>li.active>a, .nav-tabs.lio-sh-tabs>li.active>a:hover, .nav-tabs.lio-sh-tabs>li.active>a:focus {
    border-bottom: none;
    margin-bottom: -2px;
    padding-bottom: 12px;
}
.lio-sh-tabs li.active a{
    color: #000;
}
.lio-sh-tabs-cont{
    padding: 40px;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
}
.lio-sh-tabs-cont p {
    margin: 0px;
}


.nav-tabs.lio-sh-tabs.vr-tabs {
    float: left;
    width: 130px;
}
.nav-tabs.lio-sh-tabs.vr-tabs li {
    display: block;
    margin-bottom: 10px;
}
.nav-tabs.lio-sh-tabs.vr-tabs li a {
    display: block;
    width: 130px;
}
.nav-tabs.lio-sh-tabs.vr-tabs>li.active>a, .nav-tabs.lio-sh-tabs.vr-tabs>li.active>a:hover, .nav-tabs.lio-sh-tabs.vr-tabs>li.active>a:focus {
    border-bottom: 1px solid #ddd;
    border-right: none;
    margin-bottom: 0px;
    padding-bottom: 10px;
    margin-right: -2px;
    padding-right: 12px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    border-top-right-radius: 0px;

    -webkit-border-bottom-right-radius: 0px;
    -moz-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;


    -webkit-border-bottom-left-radius: 3px;
    -moz-border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.nav-tabs.lio-sh-tabs.vr-tabs>li.active>a {
    width: 131px;
}
.lio-sh-tabs-cont.vr-tabs-cont{
    margin-left: 130px;
}




/* ----  [ Tabs - Mini ]----------Lioit------------------------*/

.lio-sh-minimal-tabs{
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    border: none;
}
.lio-sh-minimal-tabs > li{
    padding: 0 10px;
    background: none !important;
}
.lio-sh-minimal-tabs > li > a{
    padding: 10px 20px 9px;
    text-decoration: none;
    background: none;
    border: 1px solid transparent;
}
.lio-sh-minimal-tabs > li > a:hover{
    background: none;
    border-color: #e9e9e9;
    color: #777;
}
.lio-sh-minimal-tabs li.active a,
.lio-sh-minimal-tabs li.active a:hover{
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: none !important;
    color: #000;
    cursor: default;
}
.lio-sh-minimal-tabs-cont{
}

/* ----  [ Accordion ]----------Lioit------------------------*/


.accordion > dt{
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
}
.entry-content  dl.accordion {
    margin-left: 0px;
}
.accordion > dt > a{
    display: block;
    position: relative;
    color: #777;
    text-decoration: none;
    padding: 14px 20px;
    border: 1px solid #f7f7f7;
    background: #f7f7f7;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
}
.accordion > dt > a i {
    margin-right: 5px;
}
.accordion > dt > a:hover{
    text-decoration: none;
    border-color: #f7f7f7;
    background-color: #fff;

}
.accordion > dt > a.active{

    border-color: #ddd;
    background-color: #fff;
    cursor: default;
}
.accordion > dt > a:after{
    content: "\f107";
    width: 15px;
    height: 15px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    right: 10px;
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #999;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.accordion > dt > a.active:after,
.accordion > dt > a.active:hover:after{
    content: "\f106";
    color: #111;
}
.accordion > dt > a:hover:after{
    color: #444;
}

.accordion > dd{
    margin-bottom: 10px;
    padding: 20px;
    font-size: 17px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}
.classic-accordion  > dt > a {
    padding: 0px;
    border: none;
}
.classic-accordion  > dt > a {
    padding: 10px 0px;
    border: none;
    background: transparent;
}

.accordion.accordion-colored > dt,
.accordion.accordion-colored > dd {
    margin-bottom: 0px;
}
.accordion.accordion-colored > dt > a {
    background: #fff;
    border: none;
    color: #333;
    margin-bottom: 0px;

}
.accordion.accordion-colored > dt > a.active {
    background: #28a8d3;
    color: #fff;
}
.accordion.accordion-colored > dt > a.active:after,
.accordion.accordion-colored > dt > a.active:hover:after {
    color: #fff;
}
.accordion.accordion-colored > dd{
    background: #fff;
}
.no-arrow.accordion > dt > a:after {
    display: none;
}

/* ----  [ Toggle ]----------Lioit------------------------*/
.entry-content  dl.toggle {
    margin-left: 0px;
}
.toggle > dt{
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
}
.toggle > dt > a{
    display: block;
    position: relative;
    color: #777;
    text-decoration: none;
    padding: 14px 20px;
    border: 1px solid #f7f7f7;
    background: #f7f7f7;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;

}
.toggle > dt > a:hover{
    text-decoration: none;
    border: 1px solid #e5e5e5;
    background-color: #fcfcfc;
    color: #444;
}
.toggle > dt > a.active{
    color: #000;
    border-color: #ddd;
    background-color: #fff;
}
.toggle > dt > a:after{
    content: "\f107";
    width: 15px;
    height: 15px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    right: 10px;
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #999;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.toggle > dt > a.active:after,
.toggle > dt > a.active:hover:after{
    content: "\f106";
    color: #111;
}
.toggle > dt > a:hover:after{
    color: #444;
}
.toggle > dd{
    margin-bottom: 10px;
    padding: 10px 20px 20px;
    font-size: 17px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}


/* ----  [ Dropcaps ]----------Lioit------------------------*/


.dropcap {
    float: left;
    font-size:80px;
    line-height: 40px;
    padding-top: 4px;
    font-weight:600;
    margin-right: 15px;
    margin-bottom: 5px;
}
.dropcap.colorbg, .dropcap.dropcap-bg {
    color: #fff !important;
    float: left;
    padding: 20px 15px;
    margin-bottom: 10px;
    font-size:60px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.dropcap.dark {
    color: #262932;
}
.dropcap.color {
    color: #2c97de;
}
.dropcap.colorbg {
    background: #2c97de;
}
.dropcap.darkbg {
    background: #262932;
}



/* ----  [ Highlights ]----------Lioit------------------------*/
.highlight-text ,
.highlight-text.color,
.highlight-text.dark,
.highlight-text.light,
.highlight-text.colorYellow {
    display: inline;
    padding: 1px 5px;
    color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.highlight-text.color {
    background: #2c97de;
}
.highlight-text.dark {
    background: #262932;
}
.highlight-text.colorYellow {
    background: #f2c500;
}
.highlight-text.light {
    background: #f2f2f2;
    color: #888;
}
/* ----  [ List Styles ]----------Lioit------------------------*/
.label {

}
.list-style {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.list-style li {
    margin-bottom: 0px;
    overflow: hidden;
}
.list-style li:before  {
    display: block;
    float: left;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 5px;
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 19px;
    line-height: 15px;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

}
.list-style.colored li:before {
    background: #28a8d3;
    color: #fff;
    padding: 2px 4px 1px 4px;
    font-size: 10px;
}
.list-check li:before {
    content: "\f00c";
}
.list-circle li:before {
    content: "\f055";
}
.list-circle.t-colored li:before  {
    color: #28a8d3;
}



/* list */
ul.flat-list { list-style:inside disc; margin: 0 0 0 25px}
.flat-list li { padding:5px 0}
.flat-list li.active { font-weight:600; color:#000}
.flat-list li.active ul { font-weight: normal; color: #575757}
.flat-list li ul { padding:5px 0 0 15px;}
.flat-list li i { margin:0 10px 0 0}
ul.flat-list-icon { list-style:none}
.list-line{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.list-inline li { display: inline-block; padding: 0 18px;}
ul.list-line li {border-bottom:1px solid rgba(0,0,0,.03); padding:7px 0}
ul.list-line li:last-child {border-bottom: none}
ul.list-line li span {min-width:130px; display:inline-block}




/* ----  [ Color Palette ]----------Lioit------------------------*/
.color-palette {
   overflow: visible;
}
.browser-palette-colors {
    width: 100%;
}
.browser-palette-colors div {
    height: 100%;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float: left;
    -webkit-transition: all 300ms, z-index 0 300ms;
    -moz-transition: all 300ms, z-index 0 300ms;
    -o-transition: all 300ms, z-index 0 300ms;
    -ms-transition: all 300ms, z-index 0 300ms;
    transition: all 300ms, z-index 0 300ms;
}
.browser-palette-colors div:hover {
        -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -o-transform: scale(3.5);
    -ms-transform: scale(3.5);
    transform: scale(3.5);
    -webkit-transition: all 300ms, z-index 0 0;
    -moz-transition: all 300ms, z-index 0 0;
    -o-transition: all 300ms, z-index 0 0;
    -ms-transition: all 300ms, z-index 0 0;
    transition: all 300ms, z-index 0 0;
}
.browser-palette-colors div:first-child {
}
.browser-palette-colors div:last-child {
    margin-right: 0;
}




/* ----  [ Chat Box ]----------Lioit------------------------*/
.chat-box {
    padding: 50px 50px 50px 50px;
    margin: 50px 0;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, .05);
    background: rgba(0, 0, 0, .02);
    border-radius: 2px;
    overflow: visible;
}
.chat-box .chat-icon{
    width: 50px;
    height: 50px;
    position: absolute;
    top: -25px;
    left: 50%;
    margin-left: -25px;
    background: #28a8d3;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50px !important;
}
.chat-box p {
    margin: 15px 0;
}
p.chat-line {
    font-family: 'Source Code Pro' ;
    font-size: 15px;
}
p.chat-line strong {
    font-weight: 600;
}
.chat-box footer:before {
    display: inline-block;
    margin-right: 10px;

}
.chat-box cite {
    display: block;
    margin-top: 15px;
    font-size: 15px;
    font-style: normal;
}


/* ----  [ Price Tables ]----------Lioit------------------------*/
.price-tabels-wrap {
    overflow: hidden;
}
.pricing-table {

}


.pricing-table .plan {
    background: #fff;
    min-height: 350px;
    padding: 25px 30px 30px;
    position: relative;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: visible;
    margin: 10px 0;
}



.pricing-table .plan h4 {
    border-bottom: 2px solid rgba(0, 0, 0, .04);
    font-size: 17px;
    font-weight: 300;
    padding-bottom: 13px;
}

.pricing-table .plan h4 .annual-savings {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    background: #28a8d3;
    float: right;
    font-size: 13px;
    line-height: 15px;
    font-weight: 400;
    position: absolute;
    top: -6px;
    right: 50%;
    margin-right: -45px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.pricing-table .plan .plan-price .dollar,.pricing-table .plan .plan-price .mo,.pricing-table .plan .plan-price .price,body.bye h3,body.privacy .page-header .page-tagline,body.terms .page-header .page-tagline {

}

.pricing-table .plan .plan-price {

}

.pricing-table .plan .plan-price .dollar {
    font-size: 24px;
    vertical-align: 30px;
}

.pricing-table .plan .plan-price .price {
    font-size: 72px;
    line-height: 87px;
    margin-left: -5px;
    margin-right: -3px;
}

.pricing-table .plan .plan-price .mo {
    font-size: 15px;
}

.pricing-table .plan .plan-price .meta {
    border-bottom: 2px solid rgba(0, 0, 0, .09);

    display: block;
    font-size: 14px;
    margin-top: -2px;
    padding-bottom: 24px;
}

.pricing-table .plan .plan-features {
    list-style: none;
    margin: 25px 0 0;
    padding-left: 0px;
}

.pricing-table .plan .plan-features li {

    line-height: 1.4;
    margin-bottom: 6px;
}

.pricing-table .plan .plan-features li strong {
    font-weight: 600;

}





/* ----  [ Progress bars ]----------Lioit------------------------*/


.lio-sh-progress{
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
    text-transform: uppercase;
    overflow: visible;
    height: 20px;
    background: #fff;
    border: 2px solid #e7ebec;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 2px;
    font-size: 13px;
    overflow: hidden;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.lio-sh-progress .progress-bar{
    padding-top: 2px;
    position: relative;
    overflow: visible;
    background-color: #28a8d3;
    font-size: 11px;
    color: #000;
    text-align: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.progress-title {
    font-size: 15px;
    position: relative;
}
.progress-title > span{
    display: inline-block;
    min-width: 24px;
    height: 20px;
    padding: 0 3px;
    position: absolute;
    top: 0px;
    right: 0px;

    text-align: center;
    line-height: 23px;
    letter-spacing: 0;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

}
.progress-color .progress-bar{
    background-color: #28a8d3;
    color: #28a8d3;
}
.progress-color .progress-bar > span{
    background-color: #28a8d3;
    color: #fff;
}

.lio-sh-progress.small-progress {
    font-size: 11px;
    height: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #e7ebec;
}
.lio-sh-progress.small-progress .progress-bar {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.progress-title.small-title {
    font-size: 13px;
    margin-bottom: 5px;
}

/* ----  [ Progress bars Alternative ]----------Lioit------------------------*/

.lio-sh-progress-alt{
    background: rgba(0, 0, 0, .04);
    height: 42px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.lio-sh-progress-alt .progress-bar{
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    overflow: visible;
    background-color: #28a8d3;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    text-align: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.lio-sh-progress-alt .progress-title {
    font-size: 15px;
    font-weight: 600;
    position: relative;
    padding-top: 7px;
    padding-left: 10px;
}
.lio-sh-progress-alt .progress-title > span{
    position: absolute;
    top: 4px;
    right: 0px;
}
.bg-dark .progress ,
.bg-dark .lio-sh-progress {
    background-color: rgba(0, 0, 0, .5) !important;
    border-color: rgba(0, 0, 0, .7);
}

.lio-sh-progress-alt.small-progress{
    height: 32px;
}
.lio-sh-progress-alt.small-progress .progress-title {
    font-size: 14px;
    padding-top: 2px;
    padding-left: 10px;
}
.lio-sh-progress-alt.small-progress .progress-title > span {
    top: 1px;
}



/* ----  [ Highlight Code ]----------Lioit------------------------*/

.highlight pre{
    border-color: #eaeaea;
    background: rgba(0, 0, 0, .02);
    color: #414046;
    padding: 30px 60px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: 'Source Code Pro';
    font-size: 15px;
    font-weight: 600;
    line-height: 23px;
}




/* ----  [ Employment Section  ]----------Lioit------------------------*/

.ed-item {
    position: relative;
}
.em, .ed-item{
    margin-bottom:40px;
}
.em:last-child, .ed:last-child{
    margin-bottom:0;
}
.job-details{
    float: right;
}
.dtIco{
    margin-top:20px;
    margin-left: auto;
    margin-right: auto;
    font: none;
    text-align: center;
    margin-left: 0px;

}
.dtIco span.ico {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    display: inline-block;
    font-size: 28px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    width: 55px;
    position:relative;
}
.employment, .education{
    position:relative;
}
.timeline-custom.employment {
    margin-bottom: 70px;
}
.employment:before, .education:before {
    background: #ebecf0; /* Old browsers */
    background: -moz-linear-gradient(top,  #ebecf0 1%, #ebecf0 75%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#efefef), color-stop(75%,#efefef), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ebecf0 1%,#ebecf0 75%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ebecf0 1%,#ebecf0 75%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ebecf0 1%,#ebecf0 75%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ebecf0 1%,#ebecf0 75%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebecf0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    bottom: 0;
    content: "";
    left: 50%;
    margin-left: ;
    position: absolute;
    top: 60px;
    width: 2px;
}
.job-details {
    margin-left: 60px;
    margin-top: -80px;
    padding: 20px;
    position: relative;
    width: 515px;
}
.job-details h4{
    margin-bottom:10px;
    text-transform:none;
}
.comp-details {
    margin-left: 190px;
    margin-top: -80px;
    padding: 20px;
    padding-left: 0px;
    position: relative;
    width: 315px;
    overflow: hidden;
}
.comp-details h6 {
    margin-bottom: 10px;
    margin-top: 0px;
}
.comp-details .comp-img {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 30px;
    background: #fff;
    border: 2px solid #ebecf0;
    padding: 5px;
}

.comp-details .comp-img ,
.comp-details .comp-img img{
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.comp-details .comp-d {
    overflow: hidden;
}






/* ----  [ Alternative services  ]----------Lioit------------------------*/

.service-grid{

}
.services-image{
    text-align: center;
}
.services-image > img{
    display: block;
    width: 100%;
}
.service-item{
    margin: 0 0 40px 0;
    position: relative;
    padding-top: 3px;
    color: #999;
    -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.service-icon{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 40px;
    text-align: center;
    font-size: 28px;
    color: #111;

    -webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.services-title{
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    color: #111;
}
.service-heading {
    overflow: hidden;
}
.service-heading .service-icon {
    position: static !important;
}

.alt-service-grid{

}
.alt-services-image{
    text-align: center;
}
.alt-services-image > img{
    display: block;
    width: 100%;
}
.alt-service-item{
    margin: 0 0 40px 0;
    position: relative;
    padding-left: 55px;
    padding-top: 3px;
    color: #999;
    -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.alt-service-icon{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 40px;
    text-align: center;
    font-size: 28px;
    color: #111;

    -webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.alt-services-title{
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    color: #111;
}

a.button.small {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    font-weight: 700;
    padding: 9px 14px 0px 0px;
    color: #999999;
}
.bg-dark a.button.small {
    color: #fff;
}
a.button i {
    float: right;
    margin: 5px 0 0px 8px !important;
    font-size: inherit !important;
}

.alt-service-item.hover-item {
    padding-left: 110px;
}
.alt-service-item.hover-item .alt-service-icon {
    width: 70px;
    height: 70px;

}
.alt-service-item.hover-item  .hover-icon:before {
    font-size: 25px !important;
}


.alt1-service-grid{

}
.alt1-services-image{
    text-align: center;
}
.alt1-services-image > img{
    display: block;
    width: 100%;
}
.alt1-service-item{
    margin: 0 0 40px 0;
    position: relative;
    padding-left: 100px;
    padding-top: 3px;
    color: #999;
}
.alt1-service-icon{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 70px;
    text-align: center;
    font-size: 28px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111;
}
.alt1-services-title{
    margin: 0 0 15px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    color: #111;
    position: relative;
}
h3.alt1-services-title:after {
    width: 50%;
    height: 2px;
    background: rgba(0, 0, 0, 1);
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;

}


/* ----  [ Alternative services Mini  ]----------Lioit------------------------*/

.alt-mini-service-item{
    margin: 0 0 40px 0;
    position: relative;
    padding: 15px;
    padding-left: 70px !important;
    color: #999;
    -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.bg-dark .alt-mini-service-item{
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.alt-mini-service-icon{
    width: 70px;
    height: 56px;
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 56px;
    text-align: center;
    font-size: 28px;
    color: #111;

    -webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.alt-mini-service-title{
    margin: 0px 0px 0px 0px;
    padding: 0;
    font-size: 15px !important;
    font-weight: 400;
    color: #111;
}


/* ----  [ Features  ]----------Lioit------------------------*/
.big-icon{
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    border: 3px solid #fff;
    text-align: center;
    line-height: 88px;
    font-size: 32px;
    color: rgba(255,255,255, .97);

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.big-icon .fa-play{
    position: relative;
    left: 4px;
}
.big-icon.big-icon-rs{
    border: none;
    width: auto;
    height: auto;
    font-size: 96px;
}

.big-icon-link{
    display: inline-block;
    text-decoration: none;
}
.big-icon-link:hover{
    border-color: transparent !important;
}
.big-icon-link:hover .big-icon{
    border-color: #fff;
    color: #fff;

    -webkit-transition: 0 none !important;
    -moz-transition: 0 none !important;
     -ms-transition: 0 none !important;
    -o-transition: 0 none !important;
    transition:0 none !important;
}
.big-icon-link:active .big-icon{
    -webkit-transform: scale(0.99);
    -moz-transform: scale(0.99);
    -o-transform: scale(0.99);
    -ms-transform: scale(0.99);
    transform: scale(0.99);
}

.wide-heading{
    display: block;
    margin-bottom: 10px;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-align: center;
    text-transform: uppercase;
    opacity: .9;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.big-icon-link:hover,
.big-icon-link:hover .wide-heading{
    color: #fff;
    text-decoration: none;
}
.sub-heading{
    font-size: 16px;
    font-style: italic;
    text-align: center;
    line-height: 1.3;
    color: rgba(255,255,255, .75);
}

.big-icon.black{
    color: #000;
    border-color: rgba(0,0,0, .75);
}
.big-icon-link:hover .big-icon.black{
    color: #000;
    border-color: #000;
}
.wide-heading.black{
    color: rgba(0,0,0, .87);
}
.big-icon-link.black:hover,
.big-icon-link:hover .wide-heading.black{
    color: #000;
    text-decoration: none;
}
.sub-heading.black{
    color: rgba(0,0,0, .75);
}

.feature-box {

}
.fbox-media {
    height: 240px;
    margin-bottom: 20px;
    overflow: hidden;
}
.feature-box span.subtitle {
    display: block;
    margin-top: 5px;
    color: #444;
    font-size: 15px;
    font-weight: 300;
    text-transform: none;
}



.features-item{
    padding: 15px;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.features-icon{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    font-size: 48px;
    width: 120px;
    height: 120px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 120px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.bg-dark .features-icon {
    border-color: rgba(255, 255, 255, 0.2);
}
.features-title{
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 400;
}

.features-descr{
    font-size: 15px;
    color: rgba(255,255,255, .75);
}

.features-icon.black{
    color: rgba(0,0,0, .9);
}
.features-title.black{
    color: rgba(0,0,0, .9);
}
.features-descr.black{
    color: rgba(0,0,0, .75);
}
.icon-bg {
    position: absolute;
    bottom: -60px;
    right: -50px;
}
.icon-bg i {
    font-size: 270px;
    color: rgba(0,0,0,.1) !important;
}

.absolute-number {
    position: absolute;
    bottom: -15px;
    right: 0px;
    transform: rotate(10deg);
}
.absolute-number i {
    font-size: 20px;
    opacity: .7;
}


/* ----  [ Alternative Features  ]----------Lioit------------------------*/

.alt-features-grid{

}
.alt-features-item{
    position: relative;
    overflow: visible;
}
.alt-features-icon{
    padding-top: 10px;
    font-size: 48px;
    line-height: 1.3;
    color: #111;
}
.alt-features-icon svg {
  fill: currentColor;
}
.alt-features-icon img{

}
.alt-features-title{
    margin-bottom: 21px;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}
h2.alt-features-title{
    font-size: 20px;
    font-weight: 400;
}
.alt-features-descr {
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}


/* ----  [ Bordered Features  ]----------Lioit------------------------*/

.border-features-grid{

}
.border-features-item{
}
.border-features-icon{
    display: inline-block;
    padding-top: 10px;
    font-size: 48px;
    line-height: 0;
    color: #111;
    border: 2px solid #333;
    padding: 30px;
    border-radius: 100%;
}
.border-features-icon img{
    width: 100%;
}
.border-features-title{
    margin-bottom: 21px;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}
.border-features-descr {
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}


/* ----  [ Process ]----------Lioit------------------------*/
.process-line {
    position: absolute;
    top: 80px;
    right: -50px;
    width: 75px;
    display: inline-block;
    height: 3px;
    border-bottom: 2px dashed rgba(0, 0, 0, .09);
}



/* ----  [ Benefits ]----------Lioit------------------------*/


.benefits-grid{
    margin: 0 0 -40px -20px;
    text-align: center;
    vertical-align: top;
}
.benefit-item{
    display: inline-block;
    width: 264px;
    margin: 0 0 40px 20px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    cursor: default;
}
.benefit-number{
    width: 100%;
    position: absolute;
    top: 0;
    left: -50px;
    font-size: 120px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    color: rgba(0,0,0, .025);

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.benefit-icon{
    position: relative;
    margin-bottom: 6px;
    font-size: 32px;
}
.benefit-title{
    position: relative;
    margin: 0 0 17px 0;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
}
.benefits-descr{
    position: relative;
    font-size: 15px;
    font-weight: 400;
    line-height: 35px;
    color: rgba(35,37,40,.7);
}

.benefit-item:after{
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0, .015);
    opacity: 0;

    -webkit-transition: all 0.37s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}
.benefit-item:hover:after{
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
}
.benefit-item:hover .benefit-number{
    color: rgba(0,0,0, .035);
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}

/* ----  [ Counters ]----------Lioit------------------------*/



.count-wrapper{
    padding: 40px 20px;
    border: 1px solid rgba(0,0,0, .09);
}
.fuct-icon {
    margin-bottom: 20px;
}
.fuct-icon i {
    font-size:  40px;
}

.count-title {
    font-weight: bold;
    color: #8d8f92;
    text-transform: capitalize;
}
.count-number{
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
}
.count-descr{
    font-size: 11px;
    text-align:center;
}
.count-descr .fa{
    font-size: 14px;
}

.count-title{
    margin-top: -1px;
    font-size: 13px;
}
.count-separator{
    height: 30px;
    clear: both;
    float: none;
    overflow: hidden;
}
.fun-fuct-cir .border-radius-cir{
    height: 165px;
    overflow: hidden;
}
.fun-fuct-cir .fuct-icon{
    margin-top: 30px;
    margin-bottom: 5px;
}

/* ----  [ Alert messages ]----------Lioit------------------------*/



.alert{
    margin: 0 auto 15px;
    padding: 15px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: none;
    font-size: 14px;
    text-transform: capitalize;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 17px;
    font-weight: 600;
}
.alert i {
    display: inline-block;
    margin-right: 15px;
}
.alert.success{
    background-color: #53bf6b;
    color: #fff;
}
.alert.info{
    background-color: #48c0eb;
    color: #fff;
}
.alert.notice{
    background-color: #ffb310;
    color: #fff;
}
.alert.error{
    background-color: #eb303b;
    color: #fff;
}
.alert.success.transparent {
    background: transparent !important;
    color: #53bf6b;
    border: 1px solid #53bf6b;
}
.alert.info.transparent {
    background: transparent !important;
    color: #48c0eb;
    border: 1px solid #48c0eb;
}
.alert.notice.transparent {
    background: transparent !important;
    color: #ffb310;
    border: 1px solid #ffb310;
}
.alert.error.transparent {
    background: transparent !important;
    color: #eb303b;
    border: 1px solid #eb303b;
}



/* ----  [ Social Buttons ]----------Lioit------------------------*/

.social-btns a {

}

.social-btns.color-social-btns a {
    color: #2c97de;
}
.social-btns.social-btns-med a,
.social-btns.social-btns-med a i {
    font-size: 20px !important;
}

.social-btns.social-btns-large a,
.social-btns.social-btns-large a i {
    font-size: 30px !important;
}

.show-social-btns a {
    margin-right: 9px;
    margin-bottom: 9px;
}

/* ----  [ Owl Carousel ]----------Lioit------------------------*/



.owl-carousel{
    overflow: hidden;
}
.owl-buttons{
    position: static;
}
.owl-prev,
.owl-next{
    opacity: 0;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 50px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    z-index: 6;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    background: rgba(0, 0, 0, .5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.circle-control .owl-prev,
.circle-control .owl-next {
    border-radius: 100% !important;
    width: 50px;
    height: 50px;
    line-height: 40px !important;
}
.circle-control .owl-prev .fa,
.circle-control .owl-next .fa {
    font-size: 25px !important;
    margin-top: -10px;
}

.overlay-navigation .owl-prev,
.overlay-navigation .owl-next {
    background: transparent !important;
    color: rgba(0, 0, 0, .65) !important;
}
.overlay-navigation .owl-prev,
.overlay-navigation .owl-next {
    background: transparent !important;
    color: rgba(0, 0, 0, .65) !important;
}


.owl-prev{
    left: 30px;
}
.owl-next{
    right: 30px;
}
.owl-prev:before,
.owl-next:before{
    content: "";
    width: 100%;
    height: 100%;
    font-size: 40px;
    text-align: center;
    -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);

}
.bg-dark .owl-prev,
.bg-dark .owl-next,
.five-slider-wrap .owl-prev,
.five-slider-wrap .owl-next{
    color: #fff !important;
}
.owl-next:before{
}
.owl-prev .fa,
.owl-next .fa{
    position: relative;
    font-size: 40px !important;
}
.owl-prev:hover,
.owl-next:hover{
    -webkit-transition: 0 none !important;
    -moz-transition: 0 none !important;
     -ms-transition: 0 none !important;
    -o-transition: 0 none !important;
    transition:0 none !important;
}
.owl-prev:hover:before,
.owl-next:hover:before{
    opacity: 0.87;
}
.owl-prev:active:before,
.owl-next:active:before{
    opacity: 0.6;
}
.owl-carousel:hover .owl-prev{
    opacity: 1;
    left: 30px;
}
.owl-carousel:hover .owl-next{
    opacity: 1;
    right: 30px;
}


.five-slider-wrap .owl-prev,
.five-slider-wrap .owl-next{
    top: 100px;
    margin-top: 0px;
    width: 50px;
    height: 265px;
    line-height: 265px;
    border-radius: 0px;
}
.five-slider-wrap .owl-carousel:hover .owl-prev{
    left: 0px;
}
.five-slider-wrap .owl-carousel:hover .owl-next{
    right: 0px;
}

.slider-wrap .owl-pagination {
    position: absolute;
    bottom: 40px;
}

.owl-pagination{
    display: block;
    width: 100%;
    position: relative;
    left: 0;
    text-align: center;
}
.instagram-carousel .owl-pagination{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 15px;
}
.owl-page{
    display: inline-block;
    padding: 6px 4px;
    position: relative;
}
.owl-page span{
    width: 6px;
    height: 6px;
    display: block;
    position: relative;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, .09);
    border: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.owl-page:hover span{
    background: rgba(0, 0, 0, .5);
}
.owl-page.active span{
    background: rgba(0, 0, 0, .4);
    border: none;
    -webkit-transform: scale(1.3333333);
    -moz-transform: scale(1.3333333);
    -o-transform: scale(1.3333333);
    -ms-transform: scale(1.3333333);
    transform: scale(1.3333333);
}

.bg-dark .owl-page span {
    background: rgba(255, 255, 255, .7);
}
.bg-dark .owl-page:hover span{
    background: rgba(255, 255, 255, .5);
}
.bg-dark .owl-page.active span{
    background: rgba(255, 255, 255, .4);
}


.bg-white .owl-page span {
    background: rgba( 0, 0, 0, .2);
    border: 1px solid rgba( 0, 0, 0, .2);
}
.bg-white .owl-page.active span {
    background: rgba( 0, 0, 0, .5);
    border: 1px solid rgba( 0, 0, 0, 0);
}




.bg-white .owl-prev:before,
.bg-white .owl-next:before{
    background: rgba( 0, 0, 0, .3);
}

.bg-dark .owl-prev:before,
.bg-dark .owl-next:before{
    background: rgba( 0, 0, 0, .3);
}

.five-slider-wrap .owl-page {
    padding: 0px;
    padding-top: 30px;
}
.five-slider-wrap .owl-page span {
    width: 40px;
    height: 10px;
    border-radius: 0px;
    border: none;
    background: rgba( 0, 0, 0, .15);
    margin: 0px 1px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.five-slider-wrap .owl-page span {
}
.five-slider-wrap .owl-page.active span {
    background: rgba( 0, 0, 0, .47);
    border: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/* -19-  [ Sliders ]----------Lioit------------------------*/

/*	- Sliders Options

-------------------------------------Lioit------------------------*/




/* ----  [ Triple Layout Slider ]----------Lioit------------*/
.no-touch .vs-container {
    overflow-x: hidden;
}

.vs-header {
    z-index: 200;
    height: 0px;
    width: 80%;
    text-align: center;
    -webkit-backface-visibility: hidden;
}

.vs-container > header h1 {
    margin: 0 0 2em 0;
    padding: 0 0 0.8em;
    font-weight: 300;
    font-size: 2.4em;
    line-height: 1.4;
    -webkit-backface-visibility: hidden;
}

.vs-container > header span {
    display: block;
    padding: 0 0 0.6em 0.1em;
    font-size: 60%;
    font-weight: 400;
    color: #893027;
}

.vs-nav {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.vs-triplelayout .vs-nav {
    width: 33.33%;
    height: 80px;
}

.vs-nav li {
    display: inline-block;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
}

.vs-triplelayout .vs-nav li {
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.vs-nav li a {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    padding: 10px 0;
    outline: none;
    border-top: 2px solid #893027;
    border-bottom: 2px solid #893027;
    color: #893027;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 1.5em;
    -webkit-transition: border-color 0.3s, color 0.3s;
    transition: border-color 0.3s, color 0.3s;
}

.vs-nav li a:hover,
.vs-nav li a:focus,
.vs-triplelayout .vs-nav .vs-nav-current a,
.vs-container.vs-move-left .vs-nav-right a,
.vs-container.vs-move-right .vs-nav-left a {
    border-color: #fff;
    color: #fff;
}

.vs-container.vs-move-left .vs-nav-current a,
.vs-container.vs-move-right .vs-nav-current a {
    border-color: #893027;
    color: #893027;
}

.vs-triplelayout .vs-nav .vs-nav-left,
.vs-triplelayout .vs-nav .vs-nav-right,
.vs-triplelayout .vs-nav .vs-nav-left-outer,
.vs-triplelayout .vs-nav .vs-nav-right-outer,
.vs-triplelayout .vs-nav .vs-nav-current {
    visibility: visible;
}

.vs-triplelayout .vs-nav .vs-nav-current {
    left: 0%;
}

.vs-triplelayout .vs-nav .vs-nav-left {
    left: -100%;
}

.vs-triplelayout .vs-nav .vs-nav-right {
    left: 100%;
}

.vs-triplelayout .vs-nav .vs-nav-right-outer {
    left: 200%;
}

.vs-triplelayout .vs-nav .vs-nav-left-outer {
    left: -200%;
}

.vs-container.vs-move-left .vs-nav-left,
.vs-container.vs-move-left .vs-nav-left-outer,
.vs-container.vs-move-left .vs-nav-current,
.vs-container.vs-move-left .vs-nav-right,
.vs-container.vs-move-left .vs-nav-right-outer {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.vs-container.vs-move-right .vs-nav-left,
.vs-container.vs-move-right .vs-nav-left-outer,
.vs-container.vs-move-right .vs-nav-current,
.vs-container.vs-move-right .vs-nav-right,
.vs-container.vs-move-right .vs-nav-right-outer {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

.vs-container.vs-move-left .vs-nav-left,
.vs-container.vs-move-right .vs-nav-right {
    opacity: 0;
}

.vs-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 100%;
    width: 100%;
}

.vs-wrapper > section {
    z-index: 1;
    min-height: 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}


.vs-triplelayout .vs-wrapper > section {
    position: absolute;
    top: 0;
    left: 10%;
    visibility: hidden;
    padding: 0 0 100px;
    width: 80%;
    -webkit-backface-visibility: hidden;
}

.vs-triplelayout .vs-wrapper > section:not(.vs-current) {
    overflow: hidden;
    height: 100%;
}

.vs-triplelayout .vs-wrapper .vs-left,
.vs-triplelayout .vs-wrapper .vs-left-outer,
.vs-triplelayout .vs-wrapper .vs-current,
.vs-triplelayout .vs-wrapper .vs-right,
.vs-triplelayout .vs-wrapper .vs-right-outer {
    visibility: visible;
}

.vs-triplelayout .vs-wrapper .vs-left {
    left: -70%; /* 80 - 10 */
}

.vs-triplelayout .vs-wrapper .vs-left-outer {
    left: -150%; /* - 70 - 80 */
}

.vs-triplelayout .vs-wrapper .vs-current {
    position: relative;
    z-index: 100;
}

.vs-triplelayout .vs-wrapper .vs-right {
    left: 90%; /* 80 + 10 */
}

.vs-triplelayout .vs-wrapper .vs-right-outer {
    left: 170%; /* 90 + 80 */
}

.vs-container.vs-move-left .vs-left,
.vs-container.vs-move-left .vs-current,
.vs-container.vs-move-left .vs-right,
.vs-container.vs-move-left .vs-right-outer {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.vs-container.vs-move-right .vs-left,
.vs-container.vs-move-right .vs-left-outer,
.vs-container.vs-move-right .vs-current,
.vs-container.vs-move-right .vs-right {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

.vs-sidenav div {
    position: absolute;
    top: 0;
    z-index: 500;
    width: 10%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.vs-sidenav div:hover {
    background: rgba(0,0,0,0.2);
}

.vs-sidenav .vs-sidenav-left {
    left: 0px;
}

.vs-sidenav .vs-sidenav-right {
    right: 0px;
}

/* inner content */
.vs-content {
    position: relative;
    margin: auto;
    padding: 1em 0;
    width: 95%;
    text-align: left;
    font-size: 1.5em;
    height: 100%;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.vs-content h2 {
    position: relative;
    margin: 30px 0 40px;
    color: #893027;
    font-weight: 700;
    font-size: 3em;
}

.vs-content .col {
    margin: 0 auto;
    color: #893027;
    text-align: justify;
    line-height: 1.4;
    -webkit-column-width: 30%;
    -moz-column-width: 30%;
    column-width: 30%;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1%;
    -moz-column-gap: 1%;
    column-gap: 1%;
}

.vs-content p {
    margin: 0 0 20px 0;
    padding: 0;
}

/* Media queries */
@media screen and (max-width: 72.875em) {

    .vs-header,
    .vs-wrapper {
        font-size: 80%;
    }

    .vs-content {
        width: 85%;
    }

    .vs-content h2 {
        font-size: 1.8em;
    }

    .vs-nav li a {
        width: 160px;
    }

    .vs-content .col {
        -webkit-column-width: 50%;
        -moz-column-width: 50%;
        column-width: 50%;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media screen and (max-width: 45.25em) {

    .vs-container > header h1 {
        margin-bottom: 0;
    }

    .vs-content h2 {
        margin: 0 0 1em;
    }

    .vs-wrapper {
        font-size: 80%;
    }

    .vs-triplelayout .vs-nav li a {
        width: auto;
        font-size: 70%;
    }

    .vs-wrapper > section {
        background-position: 0 28em;
        background-size: 100%;
    }

    .vs-content .col {
        -webkit-column-width: auto;
        -moz-column-width: auto;
        column-width: auto;
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }
}



/* ----  [ Fullwidth Slider ]----------Lioit------------*/
.fullwidth-slider .featured-post {
    padding-top: 50px;
}
.fullwidth-slider .section-img-background  {
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fullwidth-slider .home-section:hover .section-img-background  {
     transform: matrix(1.09, 0, 0, 1.09, 0, 0);

}
.section-img-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.small-img-background {
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


}


.fullwidth-slideshow{
    cursor: grab;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}
.fullwidth-slideshow-pager-wrap{
    cursor: default;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 60px 0 20px 0;

    z-index: 25;

    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .65)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background-color: rgba(0, 0, 0, 0);
}
.fullwidth-slideshow-pager-wrap .owl-item{
    opacity: .7;
    -webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fullwidth-slideshow-pager-wrap .owl-item:hover{
    opacity: 1;
}
.fullwidth-slideshow-pager-wrap .owl-item.synced{
    opacity: 1;
}
.fsp-item{
    margin: 0 2px;
    width: 90px;
    height: 60px;
    cursor: pointer;
}
.fsp-item:active{
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -o-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98);
}
.fsp-item img{
    width: 100%;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -border-radius: 2px;
    width: 90px;
    height: 60px;
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, .65);
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, .65);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .65);
}



/* ----  [ Three Featured Posts Slider ]----------Lioit------------*/
.three-slider {
    padding-top: 100px;
}
.th-featured-post {
    width: 640px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
.th-featured-post img,
.th-featured-post .post-thumb{
    width: 640px;
    height: 500px;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.th-featured-post .post-thumb {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
}
.th-featured-post  .th-featured-post-content {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 30px;
    z-index: 11;
}
.th-featured-post .over {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background: transparent url('assets/images/big-placeholder-btm.png') repeat-x bottom left;
    height: 455px;
}
.th-featured-post-content .post-title {
    font-size: 20px;
    color: #fff;
}
.th-featured-post-content .post-title a {
    color: #fff;
}

/* ----  [ Five Featured Posts Slider ]----------Lioit------------*/
.five-slider {
    padding-top: 100px;
    padding-bottom: 5px;
    overflow: visible;
}
.five-slider.owl-carousel,
.five-slider.owl-carousel .owl-wrapper, .five-slider.owl-carousel .owl-item ,
.five-slider.owl-carousel .owl-wrapper-outer {
    overflow: visible !important;
    -webkit-backface-visibility: visible !important;
}
.fv-featured-post {
    width: 384px;
    position: relative;
    overflow: visible;
}
.fv-featured-post .post-thumb,
.fv-featured-post img {
    width: 384px;
    height: 265px;
}
.fv-post-details {
    padding: 15px 20px;
    overflow: visible;
}
.fv-post-details h3 {
    font-size: 13px;
    margin: 0px;
}
.fv-post-details .fv-post-date {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    color: #7b8086;
    font-family: 'Montserrat';
}
/* ----  [ Full Width Slideshow  ]----------Lioit------------------------*/

.fullwidth-slideshow{
    cursor: grab;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}
.fullwidth-slideshow-pager-wrap{
    cursor: default;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 60px 0 20px 0;

    z-index: 25;

    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .65)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    background-color: rgba(0, 0, 0, 0);
}
.fullwidth-slideshow-pager-wrap .owl-item{
    opacity: .7;
    -webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fullwidth-slideshow-pager-wrap .owl-item:hover{
    opacity: 1;
}
.fullwidth-slideshow-pager-wrap .owl-item.synced{
    opacity: 1;
}
.fsp-item{
    margin: 0 2px;
    cursor: pointer;
}
.fsp-item:active{
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -o-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98);
}
.fsp-item img{
    width: 100%;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -border-radius: 2px;

    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, .65);
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, .65);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .65);
}
/* -24-  [ Footer ]----------Lioit------------------------*/

/*	- Footer Widgets

-------------------------------------Lioit------------------------*/


/* ----  [ Footer ]----------Lioit------------------------*/
.footer-menu {
    padding: 0px;
    margin-bottom: 10px;
}
.footer-menu ul {
    padding: 0px;
    margin: 0px;
}
.footer-menu li {
    display: inline-block;
    font-size: 15px;
    margin-right: 30px;
}
.footer-menu li:last-child {
	margin: 0px !important;
}
.footer-menu li a {
    display: inline-block;

}
.copyright-text {
    font-size: 14px;
    margin-bottom: 10px;
}
.f-social {

}
.f-social a {
    display: inline-block;
    margin-left: 10px;
}

/* ----  [ Footer Widgets ]----------Lioit------------------------*/
.footer-widgets {
    overflow: hidden;
}
.footer-widgets .widget {
    font-size: 11px;
    overflow: hidden;
}
.footer-widgets .widget-content {
    overflow: hidden;
}
.footer-widgets .widget-title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
}
.footer-widgets .widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 15px;
}
.footer-widgets .widget ul li {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    position: relative;
    padding: 10px 10px 10px 0;
}
.footer-widgets .widget ul li:after {
  font-family: "FontAwesome";
  content: "\f105";
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 14px;
}
.no-arrows li:after {
    display: none !important;
}
.no-border li {
    border-bottom: none !important;
    padding: 5px 10px 5px 0 !important;
}
.double-li li {
    float: left;
    width: 50%;
}
/* Flickr Widget /--------------------------------------------------------- */

.widget_flickr a{
    float: left;
    display: block;
    width: 33%;
    height: auto;
}

.widget_flickr a:hover img{
    opacity: 0.6;
}

.widget_flickr img{
    width: 100%;
    height: auto;
    float: left;
    vertical-align: top;
}

/* Portfolio Widget /--------------------------------------------------------- */

.widget_portfolio .portfolio-widget-item {
    float: left;
    padding: 0;
    margin: 0 10px 10px 0;
    width: 80px;
    height: 80px;
}

.widget_portfolio .portfolio-widget-item:nth-child(3n) {
    margin: 0 0 10px 0;
}

.widget_portfolio .portfolio-widget-item .portfolio-pic {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: relative;
    border-radius:2px;
     width: 80px;
    height: 80px;
}

.widget_portfolio .portfolio-widget-item .portfolio-pic img {
    width: 100%;
    height: 100%;
    display: block;
}

.widget_portfolio .portfolio-widget-item .portfolio-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28a8d3;
    text-align: center;
    border-radius:2px;
    opacity: 0;
    -webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.widget_portfolio .portfolio-widget-item .portfolio-overlay i{
    font-size: 24px;
    line-height: 80px;
    color: #ffffff;
}
.widget_portfolio .portfolio-widget-item:hover .portfolio-overlay {
	opacity: 1 !important;
}
/* Contact Widget /--------------------------------------------------------- */

.widget_contact address{
    font-style: normal;
}

.widget_contact address span{
    display: block;
    padding-bottom: 3px;
}

.widget_contact address strong{
    display: none;
}

.widget_contact address span i{
    display: inline-block;
    width: 24px;
    float: left;
    margin: 5px 0 0px 0;
}

.widget_contact .adress-overflow{
    overflow: hidden;
}

/* ----  [ Freelancer Intro ]----------Lioit------------------------*/

.author-img {
    width: 170px;
    height: 170px;
    margin: 0px auto;
    background: rgba(0, 0, 0, 0.03);
    padding: 10px;
}
.author-img-small {
    width: 32px;
    height: 32px;
    margin: 0px 10px 0px 0px;
    background: rgba(0, 0, 0, 0.03);
    padding: 2px;
}
.author-img,
.author-img img {
    border-radius: 100%;
}
.about-intro {
    overflow: hidden;

}
.about-intro h1,
.about-intro h2,
.about-intro h3,
.about-intro h4,
.about-intro h5,
.about-intro h6 {
    margin-bottom: 15px;
}
.about-intro p {
    padding: 0px 100px;
    margin-bottom: 0px;
}

.get-in-touch {

}
.get-in-touch h5 {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 0px;
    font-weight: 600;
}
.get-in-touch p {
    font-size: 13px;
    margin-bottom: 0px;
    font-family: 'Montserrat';
}

.get-in-touch .social-btns {
    padding-top: 15px;
}
.get-in-touch .social-btns a:last-child {
}
.borderd.social-btns a {
    display: inline-block;
    padding: 1px 5px;
    font-size: 16px;
    line-height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 1);
    margin-right: 12px;
    border-radius: 2px;
}


/* -25-  [ More Features ]----------Lioit------------------------*/

/*	- Heading Intro Effects
    - Morph Search
    - Sidebar Effects
    - Grids Elemtns
    - Animated Background
    - Zoom Options
    - Coming Soon
    - Light Box Styles

-------------------------------------Lioit------------------------*/


/* ----  [ Heading Intro Effects ]----------Lioit------------------------*/
.header {
    position: relative;
    margin: 0 auto;
    min-height: 1000px;
    width: 100%;
}

.bg-img {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bg-img img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    min-width: 100%;
    min-height: 100%;
}

.title {
    z-index: 1000;
    position: relative;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.header .post-title {

}

/* ----  [ Trigger Button ]----------Lioit------------------------*/

button.trigger {
    position: fixed;
    bottom: 40px;
    left: 50%;
    z-index: 999999;
    display: block;
    margin-left: -100px;
    padding: 0;
    width: 200px;
    height: 70px;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 2em;
}

.container-ef:not(.notrans) button.trigger {
    -webkit-transition: opacity 0.3s 0.5s;
    transition: opacity 0.3s 0.5s;
}

.container-ef.modify:not(.notrans) button.trigger {
    opacity: 0;
    pointer-events: none;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

button.trigger::before {
    position: absolute;
    bottom: 80%;
    left: -100%;
    width: 300%;
    color: #333;
    content: attr(data-info);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

button.trigger:focus {
    outline: none;
}
button.trigger i {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

button.trigger i::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #333;
    font-size: 80px !important;
}
/* ----  [ Conent ]----------Lioit------------------------*/

.content {}
.content > div:not(.cover-text) p {margin: 0 auto 1.5em auto;}
.content > div:not(.cover-text) p:first-child {font-size: 1.35em;}

/* ----  [ Jam 3 ]----------Lioit------------------------*/
/***** Individual effects *****/
.intro-effect-jam3:not(.notrans) .bg-img {
    -webkit-transition-property: top, left, right, bottom;
    transition-property: top, left, right, bottom;
}

.intro-effect-jam3:not(.notrans) .header h1,
.intro-effect-jam3:not(.notrans) .codrops-top a {
    -webkit-transition-property: color;
    transition-property: color;
}

.intro-effect-jam3:not(.notrans) .codrops-demos a {
    -webkit-transition-property: border-color, color;
    transition-property: border-color, color;
}

.intro-effect-jam3:not(.notrans) .header p {
    -webkit-transition-property: color, opacity, -webkit-transform;
    transition-property: color, opacity, transform;
}

.intro-effect-jam3:not(.notrans) .content > div {
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
}

.intro-effect-jam3:not(.notrans) .bg-img,
.intro-effect-jam3:not(.notrans) .header h1,
.intro-effect-jam3:not(.notrans) .codrops-top a,
.intro-effect-jam3:not(.notrans) .codrops-demos a,
.intro-effect-jam3:not(.notrans) .content > div {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.intro-effect-jam3:not(.notrans) .header p,
.intro-effect-jam3:not(.notrans) .header p.subline,
.intro-effect-jam3:not(.notrans) .content > div {
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.intro-effect-jam3.modify:not(.notrans) .header p,
.intro-effect-jam3.modify:not(.notrans) .header p.subline,
.intro-effect-jam3.modify:not(.notrans) .content > div {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.intro-effect-jam3 .codrops-demos a {
    color: #fff;
}

.intro-effect-jam3 .codrops-demos a.current-demo {
    border-color: #fff;
}

.intro-effect-jam3.modify .codrops-demos a {
    color: #c03b5d;
}

.intro-effect-jam3.modify .codrops-demos a.current-demo {
    border-color: #c03b5d;
}

.intro-effect-jam3.container-ef{
    padding: 45px 30px;
}

.intro-effect-jam3 .bg-img {
    top: -45px;
    right: -30px;
    bottom: -45px;
    left: -30px;
    background: #514753;
}

.intro-effect-jam3.modify .bg-img {
    top: 0;
    right: 0;
    bottom: 85%;
    left: 0;
}

.intro-effect-jam3.modify .header h1 {
    color: #514753;
}

.intro-effect-jam3 .header p {
    color: #514753;
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
}

.intro-effect-jam3.modify .header p {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.intro-effect-jam3 .content {
    padding: 0 5em 5em;
}

.intro-effect-jam3 .header,
.intro-effect-jam3 .content {
    background: #fff;
}

.intro-effect-jam3 .content > div {
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
}

.intro-effect-jam3.modify .content > div {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.intro-effect-jam3.modify .codrops-top a {
    color: #514753;
}

/* Delays */
.intro-effect-jam3.modify:not(.notrans) .header p:nth-last-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.intro-effect-jam3.modify:not(.notrans) .header p:last-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.intro-effect-jam3.modify:not(.notrans) .content > div {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
/* ----  [ Faded gradient ]----------Lioit------------------------*/

.intro-effect-fadeout:not(.notrans) .bg-img {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}

.intro-effect-fadeout:not(.notrans) .bg-img::after {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.intro-effect-fadeout:not(.notrans) .header h1 {
    -webkit-transition-property: color;
    transition-property: color;
}

.intro-effect-fadeout:not(.notrans) .header p,
.intro-effect-fadeout:not(.notrans) .content > div {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}

.intro-effect-fadeout:not(.notrans) .bg-img,
.intro-effect-fadeout:not(.notrans) .bg-img::after,
.intro-effect-fadeout:not(.notrans) .header h1,
.intro-effect-fadeout:not(.notrans) .header p,
.intro-effect-fadeout:not(.notrans) .content > div {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.intro-effect-fadeout .header {
    overflow: hidden;
}

.intro-effect-fadeout.modify .bg-img {
    -webkit-transform: translateY(-29%);
    transform: translateY(-29%);
}

.intro-effect-fadeout .bg-img::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 101%;
    padding-bottom: 100px;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.intro-effect-fadeout.modify .bg-img::after {
    opacity: 1;
}

.intro-effect-fadeout .title {
    text-align: left;
    max-width: 900px;
}

.intro-effect-fadeout.modify .header h1,
.intro-effect-fadeout .header p {
    color: #514753;
}

.intro-effect-fadeout .header p {
    opacity: 0;
}

.intro-effect-fadeout .header p:nth-child(2) {
    -webkit-transform: translateX(150px);
    transform: translateX(150px);
}

.intro-effect-fadeout .header p:nth-child(3) {
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
}

.intro-effect-fadeout.modify .header p:nth-child(2),
.intro-effect-fadeout.modify .header p:nth-child(3) {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.intro-effect-fadeout .content {
    z-index: 1000;
    position: relative;
}

.intro-effect-fadeout .content > div {
    opacity: 0;
    -webkit-transform: translateY(350px);
    transform: translateY(350px);
}

.intro-effect-fadeout.modify .content > div {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
/* ----  [ Sliced ]----------Lioit------------------------*/

.intro-effect-sliced:not(.notrans) .bg-img,
.intro-effect-sliced:not(.notrans) .title {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}

.intro-effect-sliced:not(.notrans) .header h1,
.intro-effect-sliced:not(.notrans) .codrops-demos a {
    -webkit-transition-property: color;
    transition-property: color;
}

.intro-effect-sliced:not(.notrans) .header p {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.intro-effect-sliced:not(.notrans) .content > div {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}

.intro-effect-sliced:not(.notrans) .bg-img,
.intro-effect-sliced:not(.notrans) .header h1,
.intro-effect-sliced:not(.notrans) .title,
.intro-effect-sliced:not(.notrans) .header p,
.intro-effect-sliced:not(.notrans) .content > div,
.intro-effect-sliced:not(.notrans) .codrops-demos a {
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.intro-effect-sliced.modify:not(.notrans) .header h1,
.intro-effect-sliced.modify:not(.notrans) .title,
.intro-effect-sliced.modify:not(.notrans) .header p,
.intro-effect-sliced.modify:not(.notrans) .content > div,
.intro-effect-sliced.modify:not(.notrans) .codrops-demos a {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.intro-effect-sliced .bg-img:first-child {
    bottom: 50%;
}

.intro-effect-sliced .bg-img:last-child {
    top: 50%;
    position: fixed;
    z-index: 900;
}

.intro-effect-sliced .bg-img:last-child img {
    top: -100%;
}

.intro-effect-sliced.modify .bg-img:first-child {
    -webkit-transform: translateY(-80%);
    transform: translateY(-80%);
}

.intro-effect-sliced.modify .bg-img:last-child {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.intro-effect-sliced .codrops-demos {
    text-align: center;
}

.intro-effect-sliced .codrops-demos a {
    color: #fff;
    font-size: 0.8em;
}

.intro-effect-sliced.modify .codrops-demos a {
    color: #cf4a5c;
}

.intro-effect-sliced .title {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
    transform: translateX(-50%) translateY(-50%) scale(0.7);
}

.intro-effect-sliced.modify .title {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.intro-effect-sliced .header p {
    opacity: 0;
    color: #514753;
}

.intro-effect-sliced.modify .header p {
    opacity: 1;
}

.intro-effect-sliced.modify .header h1 {
    color: #514753;
}

.intro-effect-sliced .content > div {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    opacity: 0;
}

.intro-effect-sliced.modify .content > div {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

/* Delays */
.intro-effect-sliced.modify:not(.notrans) .title {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
/* ----  [ Side ]----------Lioit------------------------*/

.intro-effect-side:not(.notrans) .bg-img::before,
.intro-effect-side:not(.notrans) .title {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}

.intro-effect-side:not(.notrans) .bg-img::after {
    -webkit-transition-property: top, left, bottom, right, background-color;
    transition-property: top, left, bottom, right, background-color;
}

.intro-effect-side:not(.notrans) .header p {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}

.intro-effect-side:not(.notrans) .content > div {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.intro-effect-side:not(.notrans) .bg-img::before,
.intro-effect-side:not(.notrans) .bg-img::after,
.intro-effect-side:not(.notrans) .title,
.intro-effect-side:not(.notrans) .header p,
.intro-effect-side:not(.notrans) .content > div {
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.intro-effect-side .codrops-top a {
    color: #7b8d92;
}

.intro-effect-side .bg-img::before,
.intro-effect-side .bg-img::after {
    content: '';
    position: absolute;
    z-index: 100;
}

.intro-effect-side .bg-img::before {
    background: #fff;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.intro-effect-side.modify .bg-img::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.intro-effect-side .bg-img::after {
    border: 80px solid #fff;
    top: -80px;
    right: -80px;
    bottom: -80px;
    left: -80px;
    background-color: rgba(255,255,255,0.5);
}

.intro-effect-side.modify .bg-img::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0);
}

.intro-effect-side .codrops-demos a {
    color: #43939d;
}

.intro-effect-side .codrops-demos a.current-demo {
    border-bottom: 3px solid #43939d;
}

.intro-effect-side .title {
    text-align: right;
    left: 0;
    padding: 0 3em 0 2em;
    width: 60%;
    -webkit-transform: translateX(33.3%) translateY(-50%);
    transform: translateX(33.3%) translateY(-50%);
}

.intro-effect-side.modify .title {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.intro-effect-side .header h1 {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 400;
    padding: 0 0 0.5em 0;
    color: #516165;
}

.intro-effect-side .header p {
    opacity: 0;
    color: #7b8d92;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
}

.intro-effect-side.modify .header p {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.intro-effect-side .content > div {
    margin-top: 0px;
    opacity: 0;
}

.intro-effect-side.modify .content > div {
    opacity: 1;
}

.intro-effect-side button.trigger span::before,
.intro-effect-side button.trigger::before {
    color: #516165;
}

/* Delays */
.intro-effect-side:not(.notrans) .title,
.intro-effect-side:not(.notrans) .bg-img::before,
.intro-effect-side:not(.notrans) .bg-img::after {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.intro-effect-side.modify:not(.notrans) .title,
.intro-effect-side.modify:not(.notrans) .bg-img::before,
.intro-effect-side.modify:not(.notrans) .bg-img::after {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.intro-effect-side.modify:not(.notrans) .header p:nth-last-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.intro-effect-side.modify:not(.notrans) .header p:last-child {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.intro-effect-side.modify:not(.notrans) .content > div {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
/* ----  [ Side Fixed ]----------Lioit------------------------*/
.intro-effect-sidefixed:not(.notrans) .bg-img::before {
    -webkit-transition-property: background-color;
    transition-property: background-color;
}

.intro-effect-sidefixed:not(.notrans) .bg-img::after {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}

.intro-effect-sidefixed:not(.notrans) .title p {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.intro-effect-sidefixed:not(.notrans) .content > div {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}

.intro-effect-sidefixed:not(.notrans) .bg-img::before,
.intro-effect-sidefixed:not(.notrans) .bg-img::after,
.intro-effect-sidefixed:not(.notrans) .title p,
.intro-effect-sidefixed:not(.notrans) .content > div {
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.intro-effect-sidefixed .header {
    position: absolute;
}

.intro-effect-sidefixed .bg-img {
    position: fixed;
}

.intro-effect-sidefixed .bg-img img {
    left: auto;
    right: 0;
}

.intro-effect-sidefixed .bg-img::before,
.intro-effect-sidefixed .bg-img::after {
    content: '';
    position: absolute;
    z-index: 100;
}

.intro-effect-sidefixed .bg-img::after {
    background: #f8ebda;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.intro-effect-sidefixed.modify .bg-img::after {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.intro-effect-sidefixed .bg-img::before {
    width: 100%;
    height: 100%;
    background-color: rgba(247,214,169,0.1);
}

.intro-effect-sidefixed.modify .bg-img::before {
    background-color: rgba(247,214,169,0.4);
}

.intro-effect-sidefixed .codrops-demos a {
    color: #f68f6c;
}

.intro-effect-sidefixed .title {
    position: relative;
    top: auto;
    left: auto;
    text-align: left;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
}

.intro-effect-sidefixed.modify .title {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.intro-effect-sidefixed .title h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding: 0 0 0.5em 0;
    color: #585a66;
}

.intro-effect-sidefixed .title p {
    opacity: 0;
    color: #585a66;
}

.intro-effect-sidefixed.modify .title p {
    opacity: 1;
}

.intro-effect-sidefixed .content {
    width: 60%;
    margin-left: 40%;
    padding: 0 2.5em;
}

.intro-effect-sidefixed .content div {
    position: relative;
    margin: 70px 0;
    color: #77726b;
}

.intro-effect-sidefixed .content div:nth-child(2) {
    opacity: 0;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
}

.intro-effect-sidefixed.modify .content div:nth-child(2) {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/* Delays */
.intro-effect-sidefixed:not(.notrans) .title,
.intro-effect-sidefixed:not(.notrans) .bg-img::before,
.intro-effect-sidefixed:not(.notrans) .bg-img::after {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.intro-effect-sidefixed.modify:not(.notrans) .title,
.intro-effect-sidefixed.modify:not(.notrans) .bg-img::before,
.intro-effect-sidefixed.modify:not(.notrans) .bg-img::after {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.intro-effect-sidefixed.modify:not(.notrans) .content div:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
/* ----  [ Push ]----------Lioit------------------------*/
.intro-effect-push:not(.notrans) .header,
.intro-effect-push:not(.notrans) > .title,
.intro-effect-push:not(.notrans) .content > div {
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

.intro-effect-push:not(.notrans) .header {
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

.intro-effect-push .codrops-demos a {
    color: #108576;
}

.intro-effect-push .header {
    position: absolute;
    z-index: 1500;
}

.intro-effect-push > .title {
    position: relative;
    top: auto;
    left: auto;
    padding: 6em 1em 2em;
}

.intro-effect-push .content > div {
    margin-top: 50px;
    color: #b2b2c0;
}

.intro-effect-push > .title,
.intro-effect-push .content > div {
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
    opacity: 0;
}

.intro-effect-push.modify > .title,
.intro-effect-push.modify .content > div {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

.intro-effect-push.modify .header {
    opacity: 0;
    -webkit-transform: translateY(-100%) scale(0.9);
    transform: translateY(-100%) scale(0.9);
}

/* Delays */
.intro-effect-push.modify:not(.notrans) > .title {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.intro-effect-push.modify:not(.notrans) .content > div {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
/* ----  [ Grid ]----------Lioit------------------------*/

.intro-effect-grid:not(.notrans) .grid li:nth-child(5) {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}

.intro-effect-grid:not(.notrans) .header p  {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.intro-effect-grid:not(.notrans) .bg-img,
.intro-effect-grid:not(.notrans) .title {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}

.intro-effect-grid:not(.notrans) .header h1,
.intro-effect-grid:not(.notrans) .codrops-demos a {
    -webkit-transition-property: color;
    transition-property: color;
}

.intro-effect-grid:not(.notrans) .grid li:nth-child(5),
.intro-effect-grid:not(.notrans) .bg-img,
.intro-effect-grid:not(.notrans) .title,
.intro-effect-grid:not(.notrans) .header h1,
.intro-effect-grid:not(.notrans) .header p,
.intro-effect-grid:not(.notrans) .codrops-demos a {
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

.intro-effect-grid .codrops-demos a {
    color: #fff;
}

.intro-effect-grid.modify .codrops-demos a {
    color: #cf7000;
}

.intro-effect-grid .codrops-demos a.current-demo {
    border-bottom: 3px solid #fff;
}

.intro-effect-grid.modify .codrops-demos a.current-demo {
    border-color: #cf7000;
}

.intro-effect-grid .title {
    max-width: 900px;
    padding-top: 2em;
}

.intro-effect-grid.modify .title {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
}

.intro-effect-grid .content > div {
    margin-top: 40px;
    color: #2e3337;
}

.intro-effect-grid .header h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding: 0 0 0.6em;
}

.intro-effect-grid.modify .header h1 {
    color: #2d3b44;
}

.intro-effect-grid .header p {
    opacity: 0;
    color: #4c6270;
}

.intro-effect-grid .header p.subline {
    font-size: 1.5em;
}

.intro-effect-grid.modify .header p {
    opacity: 1;
}

.intro-effect-grid .grid {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
}

.intro-effect-grid .grid li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(71,63,59,0.5);
    pointer-events: none;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.intro-effect-grid.modify .grid li:hover::after,
.intro-effect-grid.modify .grid li:nth-child(5)::after {
    background: rgba(71,63,59,0.1);
}

.intro-effect-grid .grid li {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.intro-effect-grid .grid li h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding-bottom: 0.4em;
    margin: 1em;
    color: #fff;
    line-height: 1;
    font-size: 1em;
    position: absolute;
    bottom: 0;
    z-index: 100;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.intro-effect-grid .grid li:hover h2 {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.intro-effect-grid .grid li:first-child {
    top: 0;
    left: 0;
    height: 50%;
    width: 25%;
    background-image: url(assets/images/thumbs/1.html);
}

.intro-effect-grid .grid li:nth-child(2) {
    top: 50%;
    left: 0;
    height: 50%;
    width: 25%;
    background-image: url(assets/images/thumbs/2.html);
}

.intro-effect-grid .grid li:nth-child(3) {
    top: 0;
    left: 25%;
    height: 100%;
    width: 25%;
    background-image: url(assets/images/thumbs/5.html);
}

.intro-effect-grid .grid li:nth-child(4) {
    top: 0;
    left: 50%;
    height: 50%;
    width: 50%;
    background-image: url(assets/images/thumbs/4.html);
}

.intro-effect-grid .grid li:nth-child(5) {
    top: 50%;
    left: 50%;
    height: 50%;
    width: 25%;
    background-image: url(assets/images/thumbs/8.html);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.intro-effect-grid.modify .grid li:nth-child(5) {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.intro-effect-grid .grid li:nth-child(5) h2 {
    color: #de8721;
}

.intro-effect-grid .grid li:nth-child(6) {
    top: 50%;
    left: 75%;
    height: 50%;
    width: 25%;
    background-image: url(assets/images/thumbs/6.html);
}

.intro-effect-grid.modify .bg-img {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* ----  [ Media Queries ]----------Lioit------------------------*/

@media screen and (max-width: 47em) {

    .intro-effect-side .title {
        width: 100%;
        padding: 0 1em;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .intro-effect-side.modify .bg-img::before {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .intro-effect-side .bg-img::after {
        border-left-width: 0px;
        border-right-width: 0px;
        right: 0px;
        left: 0px;
        background: rgba(255,255,255,0.1);
    }

    .intro-effect-side.modify .bg-img::after {
        background: rgba(255,255,255,0.8);
    }

    .intro-effect-sidefixed .content {
        width: 100%;
        margin-left: auto;
    }

    .intro-effect-sidefixed .bg-img::after {
        width: 95%;
    }

}

@media screen and (max-width: 27em) {
    .intro-effect-jam3 .content {
        padding: 0 2em 5em;
    }

    .intro-effect-grid .grid li h2 {
        display: none;
    }

    .intro-effect-push .header .title {
        top: 60px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .title, .content {

    }

    button.trigger::before {
        display: none;
    }
}

.intro-effect-fadeout.modify .post-single-nav:after {
        opacity: 1;
}

.post-single-nav:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 101%;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}


/* ----  [ Morph Search ]----------Lioit------------------------*/
.morphsearch {
	width: 200px;
	min-height: 40px;
	background: rgba(0, 0, 0, .04);
	position: absolute;
	z-index: 9999999999999;
	top: 30px;
	right: 30px;
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
	-webkit-transition-property: min-height, width, top, right;
	transition-property: min-height, width, top, right;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open {
	width: 100%;
	min-height: 100%;
	top: 0px;
	right: 0px;
	z-index: 9999999999999;
	background: #f1f1f1;
}

.morphsearch-form {
	width: 100%;
	height: 40px;
	margin: 0 auto;
	position: relative;
	-webkit-transition-property: width, height, -webkit-transform;
	transition-property: width, height, transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	z-index: 9999999999999;
}

.morphsearch.open .morphsearch-form {
	width: 80%;
	height: 160px;
	-webkit-transform: translate3d(0,3em,0);
	transform: translate3d(0,3em,0);
	z-index: 9999999999999;
}

.morphsearch-input {
	width: 100%;
	height: 100%;
	padding: 0 10% 0 10px;
	font-weight: 700;
	border: none;
	background: transparent;
	font-size: 0.8em;
	color: #ec5a62;
	-webkit-transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
	transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
	z-index: 9999999999999;
}

.morphsearch-input::-ms-clear { /* remove cross in IE */
    display: none;
}

.morphsearch.hideInput .morphsearch-input {
	color: transparent;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.morphsearch.open .morphsearch-input {
	font-size: 7em;
}

/* placeholder */
.morphsearch-input::-webkit-input-placeholder {
	color: #c2c2c2;
}

.morphsearch-input:-moz-placeholder {
	color: #c2c2c2;
}

.morphsearch-input::-moz-placeholder {
	color: #c2c2c2;
}

.morphsearch-input:-ms-input-placeholder {
	color: #c2c2c2;
}

/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder {
	color: transparent;
}

input[type="search"] { /* reset normalize */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.morphsearch-input:focus,
.morphsearch-submit:focus {
	outline: none;
}

.morphsearch-submit {
	position: absolute;
	width: 80px;
	height: 80px;
	text-indent: 100px;
	overflow: hidden;
	right: 0;
	top: 50%;
	background: transparent url(../img/magnifier.html) no-repeat center center;
	background-size: 100%;
	border: none;
	pointer-events: none;
	transform-origin: 50% 50%;
	opacity: 0;
	-webkit-transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
	transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
}

.morphsearch.open .morphsearch-submit {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
	transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.morphsearch-close {
	width: 36px;
	height: 36px;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
}

.morphsearch.open .morphsearch-close {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.morphsearch-close::before,
.morphsearch-close::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 50%;
	border-radius: 3px;
	opacity: 0.2;
	background: #000;
}

.morphsearch-close:hover.morphsearch-close::before,
.morphsearch-close:hover.morphsearch-close::after {
	opacity: 1;
}

.morphsearch-close::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.morphsearch-close::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.morphsearch-content {
	color: #333;
	margin-top: 4.5em;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding: 0 10.5%;
	background: #f1f1f1;
	position: absolute;
	pointer-events: none;
	opacity: 0;
	z-index: 9999999999999;
}

.morphsearch.open .morphsearch-content {
	opacity: 1;
	height: auto;
	overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */
	pointer-events: auto;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.dummy-column {
	width: 30%;
	padding: 0 0 6em;
	float: left;
	opacity: 0;
	-webkit-transform: translate3d(0,100px,0);
	transform: translateY(100px);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.morphsearch.open .dummy-column:first-child {
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.morphsearch.open .dummy-column:nth-child(2) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

.morphsearch.open .dummy-column:nth-child(3) {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.morphsearch.open .dummy-column {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.dummy-column:nth-child(2) {
	margin: 0 5%;
}

.dummy-column h2 {
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 800;
	color: #c2c2c2;
	padding: 0.5em 0;
}



.dummy-media-object {
	padding: 0.75em;
	display: block;
	margin: 0.3em 0;
	cursor: pointer;
	border-radius: 5px;
	background: rgba(118,117,128,0.05);
}

.dummy-media-object:hover,
.dummy-media-object:focus {
	background: rgba(118,117,128,0.1);
}

.dummy-media-object img {
	display: inline-block;
	width: 50px;
	margin: 0 10px 0 0;
	vertical-align: middle;
}

.dummy-media-object h3 {
	vertical-align: middle;
	font-size: 0.85em;
	display: inline-block;
	font-weight: 700;
	margin: 0 0 0 0;
	width: calc(100% - 70px);
	color: rgba(145,145,145,0.7);
}

.dummy-media-object:hover h3 {
	color: rgba(236,90,98,1);
}

/* Overlay */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open ~ .overlay {
	opacity: 1;
}

@media screen and (max-width: 53.125em) {
	.morphsearch-input {
		padding: 0 25% 0 10px;
	}
	.morphsearch.open .morphsearch-input {
		font-size: 2em;
	}
	.dummy-column {
		float: none;
		width: auto;
		padding: 0 0 2em;
	}
	.dummy-column:nth-child(2) {
		margin: 0;
	}
	.morphsearch.open .morphsearch-submit {
		-webkit-transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
		transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
	}
}

@media screen and (max-width: 60.625em) {
	.morphsearch {
		width: 80%;
		top: 10%;
		right: 10%;
	}
}
/* ----  [ Sidebar Effects ]----------Lioit------------------------*/
.st-container,
.st-pusher,
.st-content {
    height: 100%;
}

.st-content {
}

.st-content,
.st-content-inner {
    position: relative;
}

.st-container {
    position: relative;
    overflow: hidden;
}

.st-pusher {
    position: relative;
    left: 0;
    z-index: 99;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.st-pusher::after {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(0,0,0,0.9);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.st-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    width: 300px;
    height: 100%;
    background: #26292b;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 999999999999999;
}

.st-menu::after {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

/* content style */

.st-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-menu h3 {
    display: block;
    margin: 0;
    padding: 1em;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    background: rgba(0, 0, 0, 0.09);
    font-weight: 300;
    font-size: 22px;
}

.st-menu ul li a {
    display: block;
    padding: 1em 1em 1em 1.2em;
    outline: none;
    box-shadow: inset 0 -1px rgba(0,0,0,0.2);
    color: #fff;
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
    letter-spacing: 1px;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}

.st-menu ul li:first-child a {
    box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.st-menu ul li a:hover {
    background: rgba(0,0,0,0.2);
    box-shadow: inset 0 -1px rgba(0,0,0,0);
    color: #fff;
}
.st-menu ul li a i {
    display: inline-block;
    margin-right: 10px;
}
/* Individual effects */

/* Effect 1: Slide in on top */
.st-effect-1.st-menu {
    visibility: visible;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.st-effect-1.st-menu-open .st-effect-1.st-menu {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.st-effect-1.st-menu::after {
    display: none;
}

/* Effect 2: Reveal */
.st-effect-2.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-2.st-menu {
    z-index: 1;
}

.st-effect-2.st-menu-open .st-effect-2.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.st-effect-2.st-menu::after {
    display: none;
}

/* Effect 3: Push*/
.st-effect-3.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-3.st-menu {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.st-effect-3.st-menu-open .st-effect-3.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.st-effect-3.st-menu::after {
    display: none;
}

/* Effect 4: Slide along */
.st-effect-4.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-4.st-menu {
    z-index: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}

.st-effect-4.st-menu-open .st-effect-4.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.st-effect-4.st-menu::after {
    display: none;
}

/* Effect 5: Reverse slide out */
.st-effect-5.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-5.st-menu {
    z-index: 1;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
}

.st-effect-5.st-menu-open .st-effect-5.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Effect 6: Rotate pusher */

.st-effect-6.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.st-effect-6 .st-pusher {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-6.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0) rotateY(-15deg);
    transform: translate3d(300px, 0, 0) rotateY(-15deg);
}

.st-effect-6.st-menu {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-6.st-menu-open .st-effect-6.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(15deg);
    transform: translate3d(-100%, 0, 0) rotateY(15deg);
}

.st-effect-6.st-menu::after {
    display: none;
}

/* Effect 7: 3D rotate in */

.st-effect-7.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.st-effect-7 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-7.st-menu {
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
    transform: translate3d(-100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-effect-7.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
    transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

/* Effect 8: 3D rotate out */

.st-effect-8.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.st-effect-8 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-8.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-8.st-menu {
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
    transform: translate3d(-100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-8.st-menu-open .st-effect-8.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
    transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

.st-effect-8.st-menu::after {
    display: none;
}

/* Effect 9: Scale down pusher */

.st-effect-9.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.st-effect-9 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-9.st-menu-open .st-pusher {
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
}

.st-effect-9.st-menu {
    opacity: 1;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.st-effect-9.st-menu-open .st-effect-9.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.st-effect-9.st-menu::after {
    display: none;
}

/* Effect 10: Scale up */

.st-effect-10.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.st-effect-10.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-10.st-menu {
    z-index: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
}

.st-effect-10.st-menu-open .st-effect-10.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Effect 11: Scale and rotate pusher */

.st-effect-11.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.st-effect-11 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-11.st-menu-open .st-pusher {
    -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
    transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.st-effect-11.st-menu {
    opacity: 1;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.st-effect-11.st-menu-open .st-effect-11.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.st-effect-11.st-menu::after {
    display: none;
}

/* Effect 12: Open door */

.st-effect-12.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.st-effect-12 .st-pusher {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-12.st-menu-open .st-pusher {
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
}

.st-effect-12.st-menu {
    opacity: 1;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.st-effect-12.st-menu-open .st-effect-12.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.st-effect-12.st-menu::after {
    display: none;
}

/* Effect 13: Fall down */

.st-effect-13.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.st-effect-13.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-13.st-menu {
    z-index: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.st-effect-13.st-menu-open .st-effect-13.st-menu {
    visibility: visible;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-speed: 0.2s;
    transition-speed: 0.2s;
}

/* Effect 14: Delayed 3D rotate */

.st-effect-14.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.st-effect-14 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-14.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-14.st-menu {
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
    transform: translate3d(-100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-14.st-menu-open .st-effect-14.st-menu {
    visibility: visible;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
    transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
    padding-left: 300px;
}

/* ----  [ Grids Elemtns ]----------Lioit------------------------*/
/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 370px;
  height: 400px;
}

.grid-item--width2 { width: 600px; }


/* ----  [ Animated Background ]----------Lioit------------------------*/

.animated-background {
    background-repeat: repeat !important;
    animation: animatedBackground 120s linear infinite !important;
    -ms-animation: animatedBackground 120s linear infinite !important;
    -moz-animation: animatedBackground 120s linear infinite!important;
    -webkit-animation: animatedBackground 120s linear infinite !important;
    background-position: center bottom !important;

}

@media screen and (max-width: 1024px) {
    .animated-background {
        -webkit-animation: none!important;
        -moz-animation: none!important;
        animation: none!important;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 11298px 0 ;
    }
}

@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position:  11298px 0;
    }
}

@-moz-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 11298px  0 ;
    }
}



.animated-background-v {
    background-repeat: repeat !important;
    animation: animatedBackgroundV 120s linear infinite !important;
    -ms-animation: animatedBackgroundV 120s linear infinite !important;
    -moz-animation: animatedBackgroundV 120s linear infinite!important;
    -webkit-animation: animatedBackgroundV 120s linear infinite !important;
    background-position: center bottom !important;

}

@media screen and (max-width: 1024px) {
    .animated-background-v {
        -webkit-animation: none!important;
        -moz-animation: none!important;
        animation: none!important;
    }
}

@keyframes animatedBackgroundV {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 11298px 0 ;
    }
}

@-webkit-keyframes animatedBackgroundV {
    from {
        background-position: 0 0;
    }

    to {
        background-position:  11298px 0;
    }
}

@-moz-keyframes animatedBackgroundV {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 11298px  0 ;
    }
}


/* ----  [ Animation Header ]----------Lioit------------*/
#demo-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#footer-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.an-header-content {

}


/* ----  [ Zoom Options ]----------Lioit------------------------*/
.overlay {
 	z-index: 9999999 !important;
 }
.overlay-close {
    z-index: 99999999 !important;
    cursor: pointer !important;
}
.zoom-hover {
    transition: all 1s;
    will-change: transform;
}
.zoom-hover:hover {
        transform: matrix(1.05, 0, 0, 1.05, 0, 0);

}
/* ----  [ Coming Soon  ]----------Lioit------------------------*/
.coming-soon {}
.coming-soon .days, .coming-soon .hours, .coming-soon .minutes, .coming-soon .seconds {}
.coming-soon .count {line-height: 1.0;}
.coming-soon > div {}
.coming-soon > .sep {}
/* ----  [ Light Box Styles ]----------Lioit------------------------*/
.mfp-wrap {
    z-index: 99999999999 !important;
}
.mfp-bg {
    z-index: 999999;
    overflow: hidden;
    background: #0b0b0b;
    opacity: .8;
    filter: alpha(opacity=80);
}
.mfp-inline-holder .mfp-content {
    width: 75% !important;
    z-index: 999999999 !important;
}
.mfp-inline-holder .mfp-content.small {
    width: 75% !important;
}
body.freelancer .mfp-inline-holder .wrapper-tiny .mfp-content {
    max-width: 650px !important;
    width: 90%;
    margin: 0 auto;
}
body.freelancer  .wrapper-tiny   button.mfp-close,  .wrapper-tiny  button.mfp-arrow {
    right: 26%;
    color: #fff !important;
}
#small-dialog {

}




/* -00-  [ Demo Elements  ]----------Lioit------------------------*/

/*	-

-------------------------------------Lioit------------------------*/
.demo-animation-mockups {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 690px;
}

.demo-animation-mockups img,
.demo-animation-mockups div {
	position: absolute;
	display: inline-block;
	top: 0px;
}
.demo-animation-mockups img.dam-span {
	top: 0px !important;
	left: 100px !important;
	width: 242px;
	height: 54px;
}

.demo-animation-mockups .dam-span-right {
	top: 0px !important;
	right: 100px !important;
	width: 242px;
}
.demo-animation-mockups img.dam-left {
	left: 0px;
	z-index: 99;
	width: 834px;
	height: 497px;
	top: auto !important;
	bottom: 100px !important;
}
.demo-animation-mockups img.dam-right {
	right: 0px;
	z-index: 99;
	width: 834px;
	height: 497px;
	top: auto !important;
	bottom: 100px !important;
}
.demo-animation-mockups img.dam-center {
	left: 50%;
	margin-left: -533px;
	z-index: 999;
	width: 1067px;
	height: 634px;
}
.demo-animation-mockups img.dam-top {
	top: auto !important;
	bottom: 0px !important;
	left: 20%;
	z-index: 9999;
	width: 263px;
	height: 461px;

}


.file-thumbs {
    background: #fff;
    padding: 5px;
    overflow: hidden;
}

.file-thumb {
    -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
    position: relative;
}

.over-title {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    text-align: center;
    color: #fff;
    background: rgba( 0, 0, 0, .8);
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.over-title h5 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    padding-top: 50px;
    font-weight: bold;
}
.file-thumb:hover .over-title {
    opacity: 1;
}
.demo-elements {
    padding-top: 40px;
    padding-bottom: 20px;
}
.demo-element {
    background: rgba(0, 0, 0, .02);
    -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
    padding: 2px 10px 5px 20px;
    margin-bottom: 20px;
    border-radius: 3px;
}
.demo-element a {
    display: block;
}
.demo-element i {
    display: inline-block;
    margin-right: 10px;
    color: #4b5156;
}
.element-title {
    color: #4b5156;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.demo-element:hover {
    background: #28a8d3;
}
.demo-element:hover i,
.demo-element:hover .element-title {
    color: #fff;
}
/*
 * Font icons examples
 */

.fa-examples{
    color: #555;
    margin-left: 1px;
}
.fa-examples > div{
    padding: 0;
    border: 1px solid #e5e5e5;
    margin: -1px 0 0 -1px;
    font-size: 13px;
}
.fa-examples > div:hover{
    background: #f0f0f0;
    color: #000;
}
.fa-examples > div > i{
    display: inline-block;
    margin-right: 5px;
    min-width: 40px;
    min-height: 40px;
    border-right: 1px solid #f1f1f1;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
}
.fa-examples > div > .muted{
    margin-left: 5px;
    color: #999;
    font-size: 12px;
}
.fa-sm{
    width: 20px;
    font-size: 14px;
}

.et-examples{
    color: #555;
    margin-left: 1px;
    vertical-align: middle;
}
.et-examples .box1{
    display: block;
    width: 33%;
    float: left;
    padding: 0;
    border: 1px solid #e5e5e5;
    margin: -1px 0 0 -1px;
    font-size: 13px;
        display: table-cell;
    height: 100%;
    vertical-align: middle;
}
@media only screen and (max-width: 1024px) {
    .et-examples .box1{
        width: 50%;
    }
}
@media only screen and (max-width: 480px) {
    .et-examples .box1{
        width: 100%;
    }
}
.et-examples .box1:hover{
    background: #f8f8f8;
    color: #111;
}
.et-examples .box1 > span{
    display: inline-block;
    margin-right: 15px;
    padding-top: 10px;
    min-width: 110px;
    min-height: 90px;
    border-right: 1px solid #f1f1f1;
    text-align: center;
    font-size: 48px;
    line-height:90px;
    vertical-align: middle;
}



.icon-list i:before {
    line-height: inherit !important;
    margin: 0px !important;
    padding: 0px !important;
    font-size: 30px ;
}
.font-icon-list {
  padding: 20px 0px 0px 0px;
  margin-bottom: 20px; }

.font-icon-list:hover {
  cursor: pointer; }

.font-icon-detail {
  text-align: center; }

.font-icon-detail span:first-child {
  display: inline-block;
  transition: color 150ms linear, background 150ms linear, font-size 150ms linear, width 150ms;
  padding: 10px 0px;
  width: 90px;
  font-size: 48px;
  border: 1px solid #eaeaea;
  border-radius: 3px; }

.font-icon-name {
  font-size: 13px;
  margin-top: 15px;
  display: block;
  text-align: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent!important;
}

.font-icon-name:focus, .font-icon-name:active {
  outline: none; }

.font-icon-code {
  max-height: 0;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  transition: max-height 200ms linear, opacity 200ms linear; }

.font-icon-code.show {
  max-height: 200px;
  opacity: 1; }

.code-value, .unicode, .unicode-text {
  background: none;
  text-align: center;
  border: none;
  color: #a0a0a0; }

.code-value {
  display: block;
  width: 100%; }

.unicode, .unicode-text {
  color: #a0a0a0; }

.unicode {
  float: left;
  font-family: "Pe-icon-7-stroke";
  text-align: right;
  width: 38%;
  padding-right: 5px; }

.unicode-text {
  text-align: left;
  float: left;
  display: inline-block;
  width: 100px;
  border: none; }

.unicode-text:focus,
.unicode-text:active {
  outline: none; }

.glyphs,
.classes {

}


.classes {
    font-size: 13px;
}


.glyph {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    width: 50%;

}

.glyph-item {
    border-radius: 8px;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1;
    padding: 0.25em;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
}
.glyph:hover .glyph-item {

}

.mega {
    font-size: 1em;
}



.item-box {
    display: inline-block;
    font-family: consolas, monospace;
    font-size: 1.2em;
    margin: 0 -0.22em 1em 0;
    padding-left: 1em;
    width: 100%;

}

.item {
    background-color: rgba(0, 0, 0, 0.05);
    color: #33383e;
    border-radius: 2px;
    display: inline-block;
    padding: 0.5em;
    width: 100%;
}

@media only screen and (min-width: 768px) {



    .glyphs,
    .classes {
    }

    .glyphs header,
    .classes header {
        margin-bottom: 4.5em;
        padding-bottom: 4.5em;
    }

    .glyphs h1,
    .classes h1 {
        font-size: 4.5em;
    }
    .mega {
        font-size: 4em;
    }
    .glyph {
        width: 16.1666666666667%;
    }
    .item-box {
        width: 33.333%;
    }
    .colophon .group {
    	padding: 6em;
    }
}
/* Preview */
#preview {
  margin-bottom: 12px;
}
#preview.focus .icon {
  color: #eee;
  pointer-events: none;
}
#preview .icon {
  float: left;
  padding: 0.25em;
  padding: 0 2px;
  font-size: 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  margin: 3px 5px;
  line-height: 24px;
  background-color: white;
  -webkit-transition: all 300ms, z-index 0 300ms;
  -moz-transition: all 300ms, z-index 0 300ms;
  -o-transition: all 300ms, z-index 0 300ms;
  -ms-transition: all 300ms, z-index 0 300ms;
  transition: all 300ms, z-index 0 300ms;
}
#preview .icon.match {
  color: #000;
  pointer-events: all;
}
#preview .icon .typcn {
  display: block;
}
#preview .icon:hover {
  -webkit-transform: scale(3.5);
  -moz-transform: scale(3.5);
  -o-transform: scale(3.5);
  -ms-transform: scale(3.5);
  transform: scale(3.5);
  -webkit-transition: all 300ms, z-index 0 0;
  -moz-transition: all 300ms, z-index 0 0;
  -o-transition: all 300ms, z-index 0 0;
  -ms-transition: all 300ms, z-index 0 0;
  transition: all 300ms, z-index 0 0;
  border-color: #ccc;
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 120dpi) {
  #preview .enlarge.icon {
    background-size: 1px 1px;
    background-image: url('grid.html');
  }
}
.glyph {
        float: left;
        text-align: center;
        padding: .5em;
        margin: 0 .5em;
        width: 7em;
        border-radius: .375em;
        top:0;
        position:relative;
        -webkit-transition:0.2s ease-in;
        -o-transition:0.2s ease-in;
        -moz-transition:0.2s ease-in;
        -ie-transition:0.2s ease-in;
        transition:0.2s ease-in;
    }
    .glyph input {
        width: 100%;
        text-align: center;
        font-family: consolas, monospace;
        border-radius:3px;
        border:none;
        padding:4px;
        color:#666;
        -webkit-transition:0.2s ease-in;
        -o-transition:0.2s ease-in;
        -moz-transition:0.2s ease-in;
        -ie-transition:0.2s ease-in;
        transition:0.2s ease-in;
    }
    .glyph:hover input {
        padding:4px;
        color:#666;
    }
    .glyph:hover {
        -webkit-transition: all 0.5s ease-out;
        background:#222821;
        color:#fff;
        text-shadow: none;
        -moz-text-shadow: none;
        -webkit-text-shadow: none;
        top:-5px;
        position:relative;
    }
    .glyph input, .mtm {
        margin-top: .75em;
    }
    .centered {
        margin-left: auto;
        margin-right: auto;
    }
    .fs1 {
        font-size: 3em;
    }
    .box1 {
        display: inline-block;
        width: 14em;
        padding: .25em .5em;
        margin: .5em 1em .5em 0;
        text-align:left;
    }
    .box1 span {
        font-size:2em;
        position: relative;
        top: 0.25em;
        margin-right: 0.1em;
    }
.jqvmap-zoomin, .jqvmap-zoomout {
    padding: 10px !important;
    margin-bottom: 3px !important;
    margin-top: 3px !important;
}