/*
* Author : Design Guruji
* Template Name : Narayana
* Build Date : April, 2017
* Version : 1.0
* Copyright © 2017 Design Guruji
*/

/*----------------------------------*/
/*       TABLE OF CONTENT
/*----------------------------------
	1. IMPORT FONTS
	2. GENERAL
	3. HEADER
	4. HERO IMAGE (BANNER)
	5. ABOUT
	6. ORDER YOUR PROJECT
	7. PROFILE
	8. SERVICES
	9. PORTFOLIO
	10. TESTIMONIALS
	11. TEAM
	12. BLOG
	13. FOOTER
	14. PRELOADER
	15. STYLE SWITCHER
	16. KEYFRAME ANIMATIONS
/*----------------------------------*/

/*----------------------------------*/
/*	1. IMPORT FONTS
/*----------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i");
@import url("../fonts/font-awesome.css");
@import url("../fonts/Pe-icon-7-stroke.css");

/*----------------------------------*/
/*	2. GENERAL
/*----------------------------------*/
/* Typography */
html, body { height: 100%; }
body { overflow-x:hidden; font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 26px; font-weight: 400; color: #2b2c36; }
h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', sans-serif; color: #ff9900; margin: 0; margin-bottom: 20px; font-weight: 700; line-height: 1.5; }
h1 {font-size: 30px; }
h2 {font-size: 24px; }
h3 {font-size: 20px; }
h4 {font-size: 18px; }
h5 {font-size: 16px; }
h6 {font-size: 14px; }
p {margin: 0 0 30px; }
p:last-of-type {margin: 0; }
a {color: #ff9900; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
a:hover, a:focus, a:active {text-decoration: none; color: #2b2c36; outline: 0; }
.heading { font-size: 36px; position: relative; padding-bottom: 30px; margin-bottom: 0;}
.heading span { display: block; margin-top: -15px; }
svg { display: inline-block; }
svg circle { fill: #2b2c36; }
/* Form/Button */
.form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {width: 100%; padding: 10px 15px; background: #fff; border: 1px solid #ccc; color: #202020; min-height: 44px; font-size: 14px; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
textarea {resize: none; min-height: 100px }
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, select:focus, textarea:focus {border-color: #ccc; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.btn {padding: 10px 30px; font-weight: 600; border: 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.btn-default { background: #2b2c36; color: #fff; border:0; } 
.btn-default:hover, 
.btn-default:focus, 
.btn-default:active { background: #ff9900; color: #fff; outline: 0; border: 0; } 
.btn-primary {background: #ff9900; color: #fff; border: 1px solid #e4572c; }
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {background: #2b2c36; color: #fff; outline: 0; border: 1px solid #333; }
/* Global */
html, body {height: 100%; }
img {max-width: 100%; height: auto; }
iframe {border: 0; width: 100%; }
blockquote {padding: 20px; margin: 30px 0; background: #f8f8f8; position: relative; border-left: 5px solid #2b2c36; font-weight: 600; }
section { padding-top: 60px; padding-bottom: 60px; }
.container {width: auto !important; max-width: 1170px; }
.particles {width: 100%; position: absolute; top: 0; left: 0; }
.parallax {position: relative; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center top; }
/* Text Alignment */
.text-center {text-align: center; }
.text-left {text-align: left; }
.text-right {text-align: right; }
/* Default */
*:focus {outline: 0 !important; }
::-moz-selection {background: #202020; color: #fff !important; }
::-webkit-selection {background: #202020; color: #fff !important; } 
::selection {background: #202020; color: #fff !important; }
/* Owl Carosel */
.owl-nav {position: absolute; z-index: 1; top: -60px; right: 0; }
.owl-nav > div { display: inline-block; width: 32px; height: 32px; color: #2b2c36;  border: 1px solid #ccc; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.owl-nav > div:hover {color: #fff; background: #de2e45; border-color: #de2e45; }
.owl-nav i {font-size: 20px; line-height: 30px; }
.owl-nav .owl-prev {margin-right: 10px; }
.owl-dots {width: 100%; margin-top: 20px; text-align: center; z-index: 1; }
.owl-dots .owl-dot {display: inline-block; margin: 0 3px; }
.owl-dots .owl-dot span {width: 12px; height: 12px; display: inline-block; background: none; border: 1px solid #2b2c36; font-size: 0; cursor: pointer; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; }
.owl-dots .owl-dot span:hover, 
.owl-dots .active span {border-color: #ff9900; background: #ff9900; }
/* Bootstrap Modal */
.modal-content { background: #fff; }
.close { color: #2b2c36; text-shadow: none; opacity: 0.5; }
.close:hover, .close:focus { opacity: 1; color: #2b2c36; }
/*----------------------------------*/
/*	3. HEADER
/*----------------------------------*/
.header { width: 100%; border: 0; margin: 0; position: fixed; top: 0; z-index: 999; background: rgba(255, 153, 0, 0.8); border-bottom: 1px solid rgba(255, 153, 0, 0.10); -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } 
.header.affix {top: 0; position: fixed; background: #fff; } 
.header.affix .navbar-brand {padding-top: 15px; padding-bottom: 15px; }
.header.affix .navbar-nav li a {padding-top: 20px; padding-bottom: 20px; }
.navbar-brand {height: auto; display: block; font-size: 28px; line-height: 30px; color: #2b2c36; font-weight: 700; padding-top: 25px; padding-bottom: 25px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } 
.navbar-brand span {color: #ff9900; } 
.navbar-brand:hover, 
.navbar-brand:focus {color: #2b2c36; }
.navbar-collapse {padding-left: 0; padding-right: 0; }
.header .navbar-nav {font-weight: 700; margin: 0; } 
.header .navbar-nav {float: right; } 
.header .navbar-nav li a {padding: 30px 15px; color: #2b2c36; }
.header .navbar-nav li a:hover, 
.header .navbar-nav li.active a {background: #ff9900; color: #fff; }
.navbar-toggle { border: 1px solid #2b2c36; margin-top: 10px; padding: 10px; }
.navbar-toggle .icon-bar {background: #2b2c36; height: 3px; }
/*----------------------------------*/
/*	4. HERO IMAGE (BANNER)
/*----------------------------------*/
.hero-image { width: 100%; height: 100%; position: relative; padding: 0; overflow: hidden; border-bottom: 1px solid #ccc; }
.hero-image::before {width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0; background: url("../img/gridtile.png"); } 
.hero-image.freelancer { background-image: url("../img/banner.jpg"); }
.hero-image .container { height: 100%; min-height: 100%; position: relative; z-index: 5; }
.hero-image .content-wrapper {width: 100%; height: 100%; display: table;  max-width: 460px;}
.hero-image .content { display: table-cell; vertical-align: middle; }
.hero-image h1 {
	font-size: 80px;
	line-height: 70px;
	color: #fff;
	font-weight: 900;
	margin: 0;
	text-shadow: 3px 3px 20px #000;
}
.hero-image h1 span {color: #ff9900;  }
.type-text {
	font-size: 24px;
	font-weight: 800;
	color: #ff9900;
	margin-top: 10px;
	text-shadow: 3px 3px 20px #000;
}
.social-media { margin-top: 20px; margin-bottom: 20px; }
.social-media ul { margin: 0; padding: 0; list-style: none; }
.social-media ul li { display: inline-block; margin-right: 20px; }
.social-media ul li:last-child { margin-right: 0; }
.social-media ul li a {
	display: block;
	font-size: 50px;
	color: #3b5998;
	text-decoration: none;
	text-shadow: 3px 3px 10px #fff;
}
.social-media ul li a:hover { color: #ff9900; }
.scroll-down {position: absolute; bottom: 15px; z-index: 1; left: 0; right: 0; margin: 0 auto; }
.scroll-down .mouse-icon {width: 34px; border: 1px solid #fff; height: 50px; cursor: pointer; left: 0; right: 0; margin: 0 auto 15px; position: relative; -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; }
.scroll-down .icon-scroll {display: block; width: 8px; height: 8px; background: #fff; position: absolute; top: 8px; left: 12px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-animation: scroll 1.5s infinite ease; -moz-animation: scroll 1.5s infinite ease; -o-animation: scroll 1.5s infinite ease; animation: scroll 1.5s infinite ease; }
.typed-cursor {opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite; }
.bg-img { width: 100%; height: 100%; position: absolute; left: 0; background-size: cover; }
/*----------------------------------*/
/*	5. ABOUT
/*----------------------------------*/
.about { width: 100%; background: #fff; }
.about-text h2 { font-size: 36px; margin: 0; }
.about-text h3 { color: #2b2c36; }
.skills { margin-top: 30px; }
.skills h3 { font-size: 24px; }
.skills h4 { margin: 0 0 10px; color: #2b2c36; font-weight: 600; font-size: 16px;}
.progress { background: transparent; border:1px solid #2b2c36; height: 12px; padding: 2px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
.progress .progress-bar { background:#2b2c36; height: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;  } 
.contact-info { background: #ccc; padding: 30px; }
.contact-info h3 { margin: 0; }
.contact-info .address,
.contact-info .phone,
.contact-info .email { position: relative; padding-left: 40px; margin-top: 30px; font-weight: 600 }
.contact-info .address span,
.contact-info .phone span,
.contact-info .email span {margin-left: -40px; font-size: 30px; display: inline-block; vertical-align: middle; } 
.counter-box { background: #fff; padding: 15px 15px 15px 60px; position: relative; font-weight: 600; margin-top: 15px;}
.counter-box span { position: absolute; font-size: 35px; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.counter-box .counter-text { font-size: 20px; font-weight: 700; color: #ff9900;  }
/*----------------------------------*/
/*	6. ORDER YOUR PROJECT
/*----------------------------------*/
.order-project { width: 100%; background: #ff9900; padding-top: 30px; padding-bottom: 30px; }
.order-project h2 { font-size: 36px; font-weight: 200; color:#2b2c36; }
.oder-form .modal-body { padding: 30px 30px 15px; }
.oder-form h3 { position: relative; font-size: 24px; }
.oder-form h3 .divider { display: block; } 
.oder-form input[type="text"],
.oder-form input[type="email"],
.oder-form textarea { width: 100%; border: 0; border-bottom: 1px solid #ccc; padding:10px 0; font-weight: 600; background: transparent; color: #2b2c36;}
.oder-form .close { font-size: 40px; position: absolute; right: 5px; top: 5px; z-index: 1; }
/*----------------------------------*/
/*	7. PROFILE
/*----------------------------------*/
.profile {width: 100%; background: #fff; } 
.profile .row { margin: 0; }
.profile .col-md-6 {padding: 0; }
.education { margin-left: 8px; -webkit-box-shadow: -8px 8px 0 0 #e7e7e7; -moz-box-shadow: -8px 8px 0 0 #e7e7e7; -o-box-shadow: -8px 8px 0 0 #e7e7e7; box-shadow: -8px 8px 0 0 #e7e7e7; }
.experience { margin-right: 8px; -webkit-box-shadow: 8px 8px 0 0 #e7e7e7; -moz-box-shadow: 8px 8px 0 0 #e7e7e7; -o-box-shadow: 8px 8px 0 0 #e7e7e7; box-shadow: 8px 8px 0 0 #e7e7e7; }
.education, 
.experience { padding: 30px; position: relative; }
.education h3, 
.experience h3 { margin-bottom: 30px; color: #2b2c36; }
.education { background: #f7f7f7; padding-right: 60px; }
.education:after {width: 52px; height: calc(100% - 40px); content: ""; position: absolute; z-index: 5; top: 20px; right: -26px; display: block; background: url("../img/hook.png") repeat-y center top; }
.education h3:before {background: #f7f7f7; }
.box {padding: 20px; border: 1px solid #ccc; margin-bottom: 30px; position: relative; color: #202020; }
.box:last-child {margin-bottom: 0; }
.box:last-child:after {display: none; }
.box:after {width: 1px; height: 30px; background: #ccc; content: ""; position: absolute; bottom: -31px; display: block; left: 0; right: 0; margin: 0 auto; }
.box .year {background: #f7f7f7; display: table; margin: -40px 0 15px; font-weight: 600; padding: 5px 10px; }
.box h4 {margin-bottom: 10px; font-size: 16px; }
.experience {background: #2b2c36; padding-left: 60px; }
.experience h3 {color: #fff; } 
.experience h3:before {background: #2b2c36; }
.experience .box {border-color: #fff; color: #fff; }  
.experience .box:after {background: #fff; } 
.experience .box .year {background: #2b2c36; color: #fff; } 
.experience .box h4 {color: #fff; }
/*----------------------------------*/ 
/*	8. SERVICES
/*----------------------------------*/
.services { width: 100%; background: #ccc; padding-bottom: 30px }
.service-box { padding: 30px; background: #fff; -webkit-box-shadow: 8px 8px 0 0 #e7e7e7; -moz-box-shadow: 8px 8px 0 0 #e7e7e7; -o-box-shadow: 8px 8px 0 0 #e7e7e7; box-shadow: 8px 8px 0 0 #e7e7e7; margin-bottom: 30px; }
.service-box h3 { margin-bottom: 15px; }
.service-box span { font-size: 60px; line-height: 60px; margin-bottom: 15px; display: block; }
/*----------------------------------*/ 
/*	9. PORTFOLIO
/*----------------------------------*/
.portfolio { width: 100%; background: #fff; }
.filters { font-weight: 600; margin-bottom: 30px; }
.filters ul {margin: 0; padding: 0; list-style: none; display: table; margin: 0 auto; border-bottom: 1px solid #ff9900; } .filters ul li {display: inline-block; }
.filters ul li a {display: block; padding: 15px 10px; color: #333; text-decoration: none; position: relative; }
.filters ul li a:hover, 
.filters ul li a.active { color: #ff9900;  }
.filters ul li a:before { width: 8px; border-top: 8px solid #ff9900; border-left: 8px solid transparent; border-right: 8px solid transparent; z-index: 2; bottom: -8px; position: absolute; content: ""; display: none; left: 0; right: 0; margin: 0 auto;}
.filters ul li a:hover:before, 
.filters ul li a:hover:after, 
.filters ul li a.active:before, 
.filters ul li a.active:after {display: block; color: #ff9900; }
.grid .item { margin-top: 30px; }
.grid .item img {width: 100%; }
.project-content {opacity: 0; height: 0; overflow: hidden; background: rgba(43, 44, 54, 0.8); z-index: 1; position: absolute; top: 0; left: 15px; right: 15px; bottom: 0; color: #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.project-content .inner {width: 100%; padding: 15px; position: absolute; z-index: 11; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.project-content h3 {color: #fff; opacity: 0; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; letter-spacing: 2px; -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); -webkit-transition: all 0.3s ease-in-out 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; -o-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; }
.project-content .desc {color: #fff; font-weight: 600; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out 0.4s; -moz-transition: all 0.3s ease-in-out 0.4s; -o-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s; } .icon-zoom {position: absolute; bottom: 20px; right: -60px; z-index: 2; cursor: pointer; -webkit-transition: all 0.3s ease-in-out 0.5s -moz-transition: all 0.3s ease-in-out 0.5s; -o-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s; } 
.icon-zoom span {font-size: 35px; color: #fff; }
.grid { margin: 0 -15px; }
.grid .item:hover .project-content {opacity: 1; height: 100%; }
.grid .item:hover .project-content h3 {opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.grid .item:hover .project-content .desc {-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.grid .item:hover .icon-zoom {right: 20px; }
/*----------------------------------*/ 
/*	10. TESTIMONIALS
/*----------------------------------*/
.testimonials { width: 100%; background: #ccc; }
.testimonials ul {margin: 0; padding: 0; list-style: none; }
.testimonials ul.owl-carousel.owl-loaded li {width: auto; padding: 0; }
.testimonial-box { background: #fff; padding: 30px; margin-bottom: 8px; margin-right: 8px; position: relative; -webkit-box-shadow: 8px 8px 0 0 #e7e7e7; -moz-box-shadow: 8px 8px 0 0 #e7e7e7; -o-box-shadow: 8px 8px 0 0 #e7e7e7; box-shadow: 8px 8px 0 0 #e7e7e7; }
.testimonial-box:before {content: ""; position: absolute; top: 0; left: 30px; border-top: 20px solid #f7f7f7; border-left: 20px solid transparent; content: ""; }
.testimonial-info { text-align: left; padding-left: 85px; padding-top: 5px; position: relative; margin-bottom: 30px; }
.testimonial-info .author-pic {width: 60px; height: 60px; border: 1px solid #ccc; overflow: hidden; position: absolute; left: 0; top: 0; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; border-radius: 60px; }
.testimonial-info .author-pic img { overflow: hidden; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; border-radius: 60px; }
.testimonial-info .name {  font-size: 18px; color: #ff9900; font-weight: 700; }
.testimonial-info .name span { font-size: 14px; font-weight: 600; font-style:italic; color: #999; display: block; }
/*----------------------------------*/ 
/*	11. TEAM
/*----------------------------------*/
.team { width: 100%; background: #fff; }
.team ul {margin: 0; padding: 0; list-style: none; }
.team ul.owl-carousel.owl-loaded li { width: 100%; padding: 0;}
.team-member { margin-right: 8px;  }
.team-member-image { margin-bottom: 30px; -webkit-box-shadow: 8px 8px 0 0 #e7e7e7; -moz-box-shadow: 8px 8px 0 0 #e7e7e7; -o-box-shadow: 8px 8px 0 0 #e7e7e7; box-shadow: 8px 8px 0 0 #e7e7e7; }
.team-member { font-weight: 600; }	
.team-member h3 { margin-bottom: 0; }
/*----------------------------------*/ 
/*	12. BLOG
/*----------------------------------*/
.blog { width: 100%; background: #ccc; }
.blog img { width: 100%;}
.blog-post-content { background: #fff; position: relative; z-index: 1; margin: -30px 22px 30px 15px; padding: 30px; -webkit-box-shadow: 8px 8px 0 0 #e7e7e7; -moz-box-shadow: 8px 8px 0 0 #e7e7e7; -o-box-shadow: 8px 8px 0 0 #e7e7e7; box-shadow: 8px 8px 0 0 #e7e7e7;  }
.blog-post-content .post-date { font-weight: 700; color: #999; }
.blog-post-content h3 { margin-bottom: 5px; color: #2b2c36; }
.blog-post-content h3 a { color: #2b2c36; text-decoration: none;}
.blog-post-content h3 a:hover { color: #ff9900; text-decoration: none;}
.blog-post-content .post-by { margin-bottom: 15px; font-weight: 700;}
/*----------------------------------*/
/*	13. FOOTER
/*----------------------------------*/
/* Contact Info */
.contact { background: #ff9900; padding-bottom: 30px; padding-top: 30px;}
.contact .address,
.contact .phone,
.contact .email {font-weight: 600;  color: #fff; text-align: center; }
.contact .address span,
.contact .phone span,
.contact .email span { margin-left: -35px; position: absolute; font-size: 30px;}
/*Google Map */
.google-map {width: 100%; height: auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } 
.google-map #map {width: 100%; height: 480px; } 
/* Copyright */
.copyright { background: #ccc; color: #2b2c36; padding-top: 15px; padding-bottom: 15px; }
/*----------------------------------*/
/*	14. PRELOADER
/*----------------------------------*/
.preloader { background: #2b2c36; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none;}
.preloader .loader {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.ball-pulse .loader {width: 100px; height: 100px; }
.ball-pulse .ball {margin: 25% 0 0 25%; width: 50%; height: 50%; background-color: #fff; border-radius: 50%; -webkit-animation: ballPulse 2s ease-in-out infinite; animation: ballPulse 2s ease-in-out infinite; }
/*----------------------------------*/
/*	15. STYLE SWITCHER
/*----------------------------------*/
.switch-style { background: #f9f9f9; -webkit-backface-visibility: hidden; padding: 20px; position: fixed; z-index: 88; top: 50%; box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.08); transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); right: -240px; width: 240px; -webkit-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; transition: right 0.4s ease-in-out; }
.switch-style.active {right: 0; }
.switch-style .switch-style-toggle {background: #f9f9f9; border-top-left-radius: 5px; border-bottom-left-radius: 5px; position: absolute; top: 30px; right: 240px; width: 50px; height: 50px; box-shadow: -2px 0 8px 2px rgba(0, 0, 0, 0.05); -webkit-box-shadow: -2px 0 8px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: -2px 0 8px 2px rgba(0, 0, 0, 0.05); -ms-box-shadow: -2px 0 8px 2px rgba(0, 0, 0, 0.05); }
.switch-style .switch-style-toggle:hover {cursor: pointer; }
.switch-style .switch-style-toggle span {font-size: 35px; line-height: 50px; -webkit-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite; animation: spin 3s linear infinite; }
.switch-style h4 { margin-bottom: 15px; font-size: 16px; }
.switch-style ul {margin: 0 0 10px; padding: 0; list-style: none; }
.switch-style ul li {display: inline-block; margin-right: 5px; font-weight: 700; }
.switch-style ul li a {display: block; width: 35px; height: 35px; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; -ms-border-radius: 35px; }
.switch-style ul li a.gold {background: #f49c17; }
.switch-style ul li a.skyblue {background: #009ee8; }
.switch-style ul li a.green {background: #76a200; }
.switch-style ul li a.orange {background: #ff5a00; }
.switch-style ul li a.yellow {background: #f4b826; }
.switch-style ul li a.purple {background: #642877; }
.switch-style ul li a.gray {background: #637a91; }
.switch-style ul li a.brown {background: #ce9c67; } 
.switch-style ul li a.light {background: #fff; border:1px solid #2b2c36; margin-bottom: 5px; }
.switch-style ul li a.dark {background: #2b2c36; border:1px solid #2b2c36; margin-bottom: 5px; } 
/*----------------------------------*/
/*	16. KEYFRAME ANIMATIONS
/*----------------------------------*/
@-webkit-keyframes ballPulse {0% {-webkit-transform: scale(0); transform: scale(0); } 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-moz-keyframes ballPulse {0% {-webkit-transform: scale(0); transform: scale(0); } 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-o-keyframes ballPulse {0% {-webkit-transform: scale(0); transform: scale(0); } 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes ballPulse {0% {-webkit-transform: scale(0); transform: scale(0); } 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes scroll {0% {opacity: 1; } 100% {opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } }
@-moz-keyframes scroll {0% {opacity: 1; } 100% {opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } }
@-o-keyframes scroll {0% {opacity: 1; } 100% {opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } }
@keyframes scroll {0% {opacity: 1; } 100% {opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } }
@-webkit-keyframes spin {from {transform: rotate(0deg); } to {transform: rotate(360deg); } }
@-moz-keyframes spin {from {transform: rotate(0deg); } to {transform: rotate(360deg); } }
@-o-keyframes spin {from {transform: rotate(0deg); } to {transform: rotate(360deg); } }
@keyframes spin {from {transform: rotate(0deg); } to {transform: rotate(360deg); } }
@-webkit-keyframes blink {0% {opacity: 1; } 50% {opacity: 0; } 100% {opacity: 1; } }
@-moz-keyframes blink {0% {opacity: 1; } 50% {opacity: 0; } 100% {opacity: 1; } }
@-o-keyframes blink {0% {opacity: 1; } 50% {opacity: 0; } 100% {opacity: 1; } }
@keyframes blink {0% {opacity: 1; } 50% {opacity: 0; } 100% {opacity: 1; } }