/* ==================================================================
Template Name : TANISHQ COming soon template
Author : abmathasuriya
Date : 16-Jan-2015
Email : abmathasuriya@gmail.com
======================================================================

 * Table of Contents:
 *
 1.0 - CSS Reset
 2.0 - Bootstrap fix for WinPhone 8 and IE10 
 3.0 - Basic Document Styles
 4.0 - Typography
 5.0 - Layout Styles
 6.0 - General input styles
 7.0 - Preloader
 8.0 - Section Styles
 9.0 - Video Background
 10.0 - Home Section - Slider
 11.0 - Subscribe styles
 12.0 - Contact form styles
 13.0 - Clock
 14.0 - Home
 15.0 - About
 16.0 - Footer
 17.0 -  Button style
 18.0 - Overlay Styles
 19.0 - Parallax Background
 20.0 - Flexslider
 21.0 - Media query
================================================================== */


/* ==================================================================
	1.0 CSS Reset
================================================================== */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;
	font: inherit;vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* ==================================================================
	2.0 Bootstrap fix for WinPhone 8 and IE10 
================================================================== */

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


/* ==================================================================
	3.0 Basic Styles
================================================================== */

body {line-height: 1;color: #2b2b2b;font-size: 18px;font-family: 'Open Sans', sans-serif;font-style: normal;font-weight: normal;line-height: 28px;background: #ffffff;
	-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;overflow-x: hidden;white-space: normal;position: relative;}

.youtube-background,.youtube-list-background {background-color: #000;}

/* ==================================================================
	4.0 Typography
================================================================== */

h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;font-weight: 700;margin-bottom: 10px;line-height: 1.2em;}
h1 {font-size: 62px;position: relative;margin-bottom: 0px;}
h2 {font-size: 48px;position: relative;}
h3 {font-size: 30px;}
h4 {font-size: 22px;}
h5 {font-size: 20px;}
h6 {font-size: 18px;}
p {margin-bottom: 20px;}
p.lead {font-size: 21px;padding: 0;font-weight: 400;}
.section-title {letter-spacing: 0;margin-bottom: 20px;font-weight: 300;position: relative;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;       -ms-backface-visibility: hidden;}
a, a > * {
	color: #2a6496;
	text-decoration: none;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
a:hover, a > *:hover, a:focus {text-decoration: none;outline: 0;}
em {font-style: italic;}
strong {font-weight: 700;}
.color-white {color: #2b2b2b;}


/* ==================================================================
	5.0 Layout Styles
================================================================== */
.text-left {text-align: left !important;}
.top-margin0 {margin-top: 0 !important;}
.bottom-margin0{margin-bottom: 0 !important;}
.csstransitions .animated,.animated {visibility: hidden;}
.csstransitions .visible {visibility: visible;}
.video-container {width: 100%;height: 100%;}
.img-rounded {border-radius: 100%;}
.img-center {display: block;	margin: 0 auto;}
.position-relative {position: relative;}

/* ==================================================================
	6.0 General input styles
================================================================== */
input[type="text"], input[type="email"], textarea {outline: none;border: solid 1px tomato;font-size: 18px;background: tomato;font-weight: 300;color: #fff;-webkit-appearance: none;
    border-radius: 0;box-shadow: none}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {outline: none;-o-transition: .4s;-ms-transition: .4s;-moz-transition: .4s;    -webkit-transition: .4s;transition: .4s;}

/* WebKit browsers */
.contact-form input::-webkit-input-placeholder,.contact-form textarea::-webkit-input-placeholder {color: #fff;}
.contact-form :-moz-placeholder {color: #fff;opacity:  1;}
.contact-form ::-moz-placeholder {color: #fff; opacity:  1;}
.contact-form :-ms-input-placeholder {color: #fff;}

/* WebKit browsers */
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #fff;}
:-moz-placeholder {color: #fff;opacity:  1;}
::-moz-placeholder {color: #fff;opacity:  1;}
:-ms-input-placeholder {color: #fff;}

/* ==================================================================
	7.0 Preloader
================================================================== */

#preloader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #ffffff;z-index: 10001;}
#loading-animation {width: 120px;height: 128px;position: absolute;left: 50%;top: 50%;margin: -60px 0 0 -64px;}

/* ==================================================================
	8.0 Section Styles
================================================================== */

.section-header {padding-bottom: 0px;}

/* ==================================================================
	9.0 Video Background
================================================================== */

#video_background {
	position: fixed;
	bottom: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}


/*==================================================================
	10.0 Home Section - Slider
================================================================== */

.site-main {
	position: relative;
	height: auto;
	width: auto;
	overflow: hidden;
	display: block;
	padding: 80px;
	margin: 0;
	z-index: 10;
}

.site-main.fullscreen {height: 700px;}
.site-main .section-container {
	z-index: 10;
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
}
.site-main .table-container {display: table-cell;vertical-align: middle;}
.site-main h1 {margin-top: 30px;}
.site-main h1,.site-main h2,.site-main h3,.site-main h4,.site-main h5,.site-main h6 {font-weight: 700;margin-bottom: 30px;}
.site-main h1 {font-size: 70px;}
.site-main h2 {font-size: 58px;}
.site-main h3 {font-size: 42px;}
.slide-content {color: #2b2b2b;text-align:left;}
.slide-content p{color:#666;margin-bottom:40px;}
.slide-content i{color:#222;}
.slide-content a{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:#222;}
.slide-item {display: none;}
.slide-item.active {display: block;}

/*==================================================================
	11.0 Subscribe styles
================================================================== */

.subscribe-form {display: inline-block;}
#subscribe-loading {text-align: center;margin: 0 0 0 10px;display: none;}
.btn-subscribe-container {height: 62px;float: left;position: relative;}
.txt-subscribe {height: 60px;width: 342px;padding: 0 22px;margin: 0;float: left;text-transform: lowercase;}
.txt-subscribe::-webkit-input-placeholder {text-transform: none;color:#fff;}
.txt-subscribe:-moz-placeholder {text-transform: none;color:#fff;}
.txt-subscribe::-moz-placeholder {text-transform: none;color:#fff;}
.txt-subscribe:-ms-input-placeholder {text-transform: none;color:#fff;}
.txt-subscribe.placeholder {text-transform: none;}
.btn-subscribe {background: #fff;border: none;color: #6ebfa3;height: 60px;font-size: 20px;font-weight: 400;padding: 0 22px;-o-transition: .4s;-ms-transition: .4s;
    -moz-transition: .4s;-webkit-transition: .4s;transition: .4s;}
.btn-subscribe:hover {color: #fff;background:tomato;}
.btn-subscribe:active, .btn-subscribe:focus {outline: none;background-color:transparent}
div.subscribe-message {font-size: 18px;line-height: 25px;text-align: center;}
.subscribe-error-field, .subscribe-message {font-size: 18px;line-height: 23px;font-weight: 300;text-align: left;clear: both;padding-top:10px;}
.subscribe-error-field .fa {font-size: 21px;float: left;margin: 1px 10px 0 0;}
.subscribe-error div, .subscribe-success div {float: left;}
.subscribe-message .fa {font-size: 21px;margin: 2px 10px 0 0;}
.subscribe-message div {display: inline;}

/*==================================================================
	12.0 Contact form styles
================================================================== */

.contact-form {display: inline-block;margin: 15px 0 0;}
.contact-form input[type="text"], .contact-form textarea {
    background: none repeat scroll 0 0 tomato;
    border: 0 none;
    border-radius: 3px;-webkit-border-radius: 3px;
    height: 50px;
    margin-top: 0;
    overflow: hidden;
    padding: 10px 22px;
    position: relative;
    resize: none;
    width: 100%;
    z-index: 1;
}.contact-panel .contact-form input[type="text"],.contact-panel .contact-form textarea {margin-bottom: 5px;padding: 10px 20px;}
.contact-panel input[type="text"], .contact-panel input[type="email"], .contact-panel textarea {color: #333;border:none;border-bottom:1px solid #6EBFA3;font-weight:400;}
input.txt-name:focus, input.txt-email:focus, textarea.txt-message:focus {z-index: 2;}
.txt-email {text-transform: lowercase;}
.txt-email::-webkit-input-placeholder {text-transform: none;}
.txt-email:-moz-placeholder {text-transform: none;}
.txt-email::-moz-placeholder {text-transform: none;}
.txt-email:-ms-input-placeholder {text-transform: none;}
.txt-email.placeholder {text-transform: none;}
.btn-contact-container {
    display: block;
    height: auto;
    margin: 0px 0 0;	
}
.btn-contact {
    background: none repeat scroll 0 0 transparent;
    border: 3px solid tomato;
    height: 50px;
    outline: medium none;
    padding: 0 22px;
    transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;
    width: auto;
}
.btn-contact:hover {color: #fff;background: #333;border-color:#333;}
div.contact-message {font-size: 18px;line-height: 25px;padding: 15px 0 0;display: inline-block;text-align: center;}
div.contact-message div {float: left;}
.contact-error-field, .contact-message {font-size: 18px;line-height: 25px;font-weight: 500;text-align: left;clear: both;}
.contact-error-field .fa {color: #d76e6e;font-size: 21px;float: left;margin: 2px 10px 0 0;}
.contact-message .fa {font-size: 21px;float: left;margin: 2px 10px 0 0;}
.contact-success {color: #90dc73;}
.contact-error {color: #d76e6e;}
#contact-loading {margin: 5px 0 0;display: none;}


/* ==================================================================
	13.0 Timer
================================================================== */

#clock {overflow: hidden;}
.counter-container {display: table;}
#clock .counter-box { background:tomato;border: 3px solid tomato;color: #fff;display: block;float: left;margin: 25px 10px 25px 0;overflow: hidden;
    padding: 10px;position: relative;text-align: center;width: 106px;}
#clock .number {font-family: "Monteserrat",sans-serif;font-size: 70px;font-weight: 700;line-height: 1;margin-bottom: 10px;text-align: center;}
#clock span {color: #fff;display: block;font-family: "Open Sans",sans-serif;font-size: 16px;font-style: italic;font-weight: 400;overflow: hidden;
    padding-top: 10px;position: relative;text-align: center;}


/*==================================================================
	14.0 Home
================================================================== */

.cd-words-wrapper {
    display: inline;
    position: relative;
    text-align: left;
}
.cd-words-wrapper b {
    display: inline;
    left: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
}
.cd-words-wrapper b.is-visible { position: relative;}
.no-js .cd-words-wrapper b {opacity: 0;}
.no-js .cd-words-wrapper b.is-visible {opacity: 1;}
.cd-headline.loading-bar span {display: inline;}
.cd-headline.loading-bar .cd-words-wrapper {overflow: hidden;vertical-align: top;}
.cd-headline.loading-bar .cd-words-wrapper:after {bottom: 0;content: "";height: 3px;left: 0;position: absolute;transition: width 0.3s ease -0.1s;-webkit-transition: width 0.3s ease -0.1s;-moz-transition: width 0.3s ease -0.1s;-o-transition: width 0.3s ease -0.1s;
    width: 0; z-index: 2;background:tomato;}
.cd-headline.loading-bar .cd-words-wrapper.is-loading:after {transition: width 3s ease 0s;-webkit-transition: width 3s ease 0s;-moz-transition: width 3s ease 0s;-o-transition: width 3s ease 0s;width: 100%;}
.cd-headline.loading-bar b {opacity: 0;top: 0.2em;transition: opacity 0.3s ease 0s;-webkit-transition: opacity 0.3s ease 0s;-moz-transition: opacity 0.3s ease 0s;-o-transition: opacity 0.3s ease 0s;}
.cd-headline.loading-bar b.is-visible {opacity: 1;top: 0;}

/*==================================================================
	15.0 About
================================================================== */
.owl-pagination {
    bottom: 0px;
    display: block;
    left: 0;
    position: absolute;
    text-align:left;
    width: 100%;
    z-index: 100 !important;
}
.owl-page {
    display: inline-block;
    padding: 6px 4px;
}
.owl-page span {
    background: tomato;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    display: block;
    height: 3px;
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
	-webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
	-moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
	-o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
    width: 80px;
}
.owl-page.active span {
    background:#333;
}
.owl-page:hover span {
    background: #999;
}
.owl-buttons {
    position: static;
}
.owl-prev, .owl-next {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-size: 74px;
    height: 60px;
    line-height: 60px;
    margin-top: -30px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    top: 50%;
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
	-webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
	-moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
	-o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
    width: 40px;
    z-index: 6;
}
.owl-prev {left: 0;}
.owl-next {right: 0;}
.owl-prev:hover, .owl-next:hover {color: rgba(255, 255, 255, 0.95);}
.owl-prev:active, .owl-next:active {transform: scale(0.94);-webkit-transform: scale(0.94);-moz-transform: scale(0.94);-o-transform: scale(0.94);-ms-transform: scale(0.94);}
.owl-carousel:hover .owl-prev {left: 25px;opacity: 1;}
.owl-carousel:hover .owl-next {opacity: 1;right: 25px;}

.page-section {
    display: block;
    overflow: hidden;
    padding: 0px 40px 20px 0;
    position: relative;
    width: 100%;
}
.big-icon {font-size: 32px;}

.address{
	position:fixed;
	bottom:30px;
	right:40px;
	width:120px;
	height:50px;
	text-align:center;
	z-index:999;
}
.address button{
	color:#222;
	font-size:34px;
	line-height:50px;
	border:0px none;
	background-color:transparent;
}
.tooltip{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:500;}

/*==================================================================
	16.0 Footer
================================================================== */

.site-footer {
	background: transparent;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 10000;
	width: 100%;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-transition: position .5s ease;
	-moz-transition: position .5s ease;
	-ms-transition: position .5s ease;
	-o-transition: position .5s ease;
	transition: position .5s ease;
}

.copyright {
    font-size: 14px;
    line-height: 80px;
	text-align:center;
}


/* ==================================================================
	17.0 Buttons
================================================================== */
.btn-subscribe {
    border: 3px solid tomato;
    color: #333;
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 12px 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
	line-height:30px;
	background-color:transparent;
}
.btn-subscribe span {
    position: absolute;
    right: 15px;
    text-align: right;
    width: 40px;
}
.btn-subscribe i{color:#333;}
.btn-subscribe span{padding-left:5px;}
.text-left{text-align:left;}
.btn-subscribe:hover{
	background-color:#333;
	color:#fff;
	border-color:#333;
}
.btn-subscribe:hover span{right:20px;}
.btn-subscribe:hover i{color:#fff;}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.default-button:focus,
.sm-button:focus,
.border-button:focus,
.border-sm-button:focus  {
	outline: none;
	outline-offset: 0px;
	text-decoration: none;
}
.social-link{}
.social-link ul{padding:0;margin:0;list-style-type:none;}
.social-link ul li {
    background: none repeat scroll 0 0 #333333;
    border: 3px solid #333333;
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    width: 60px;
	-o-transition: .4s;-ms-transition: .4s;
    -moz-transition: .4s;-webkit-transition: .4s;transition: .4s;
}
.social-link ul li a i {
    color: #FFFFFF;
    font-size: 26px;
	-o-transition: .4s;-ms-transition: .4s;
    -moz-transition: .4s;-webkit-transition: .4s;transition: .4s;
}
.social-link ul li:hover{
	background:transparent
}
.social-link ul li:hover a i{color:#333;}
/*	17.1 Border Buttons
	-------------------------------------------------------------- */

.border-button {
    background: none repeat scroll 0 0 tomato;
    border: 0 none;
    border-radius: 0;-webkit-border-radius: 0;
    color: #333;
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 5px;
    outline: medium none;
    outline-offset: 0;
    padding: 8px 20px;
    position: absolute;
    right:0;
    top: 4px;
	z-index:99;
    transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
}
.border-button:hover,.border-button:focus {background:tomato;	color: #fff;}
.border-button:hover i,.border-button:focus i {color: #fff;}
.border-button i{color: #fff;}

/* ==================================================================
	18.0 Overlay Styles
================================================================== */

.overlay {
	background-color:rgba(255, 255, 255, 0.8);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.overlay-frame {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: inset 0px 0px 0px 80px #353438;
	-webkit-box-shadow: inset 0px 0px 0px 80px #353438;
	z-index: 1;
}

.page-overlay.active {top: 121px;}

/* ==================================================================
	19.0 Parallax Background
================================================================== */

.parallax-wallpaper {
	left: -25%;
	top: -25%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	z-index: -999999;
	position: fixed;
	width: 150%;
	height: 150%;
	background-image: url(demo/background/image-11.jpg);
	-webkit-background-size: cover;
	background-size: cover;
}


/* ==================================================================
	20.0 Flexslider
================================================================== */

.flexslider.textslider {
	margin: 0;
	background: transparent;
	border: 0px solid #fff;
	position: relative;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 0 0px 0px rgba(0,0,0,.2);
	-moz-box-shadow: 0 0px 0px rgba(0,0,0,.2);
	-o-box-shadow: 0 0px 0px rgba(0,0,0,.2);
	box-shadow: 0 0px 0px rgba(0,0,0,.2);
	zoom: 1;
}

.textslider h1 {font-size: 70px;}
.textslider h2 {font-size: 58px;}
.textslider h3 {font-size: 40px;}

/* ==================================================================
	21.0 Mobile
================================================================== */

body.mobile {-webkit-text-size-adjust:none;}
body.mobile .animated {display: block;visibility: visible;}

/* ==================================================================
	22.0 Media query
================================================================== */

@media(max-width:1200px){
	.site-main h1 {font-size: 58px;}	
}

@media(max-width:991px){

	.site-main .page-container {display: block;vertical-align: middle;}
	.site-main.fullscreen {display: block;height: auto;padding: 200px 80px;}
	body {font-size: 17px;}	
	.site-main h1 {font-size: 48px;}	
	.contact-form input[type="text"], .contact-form textarea{margin-bottom:20px}
}

@media(max-width:768px){
	
	
	.fullscreen .section-container {display: block;}
	.site-main .section-container {display: block;height: auto;}
	.site-main .table-container {display: block;}
	body {font-size: 16px;}	
	.site-main h1 {font-size: 42px;}
	.copyright {line-height:1;margin-bottom:10px;}
	.address { bottom: 50px;height: 50px;margin-right: -60px; position: absolute; right: 50%; text-align: center; width: 120px; z-index: 999;}	
	.txt-subscribe{width:250px;}
	.contact-form input[type="text"], .contact-form textarea{margin-bottom:20px}
}

@media(max-width:640px){
	
	body {font-size: 14px;line-height: 22px;}
	.site-main.fullscreen {padding-left: 15px;padding-right: 15px;}
	.site-main h1 {font-size: 22px;}
	.site-main h2 {font-size: 58px;}
	.copyright {line-height:1;margin-bottom:10px;}	
	.txt-subscribe {width: 100%;}
	.btn-subscribe-container {width: 100%;}
	.btn-subscribe{width:100%;}
	.subscribe-error-field, .subscribe-message,.contact-error-field, .contact-message{font-size:14px;}
}


/*==================================
        THEE STYLE SWITHER
==================================*/ 

#style-switcher div h3 {
     color: #1D1D1D;
    font-size: 19px;
    margin: 8px 3px 12px;
}
#style-switcher {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08);
    left: -189px;
    position: fixed;
    top: 17%;
    width: 195px;
    z-index: 9999;
}
#style-switcher div {
    padding: 8px 10px;
}
#style-switcher .bottom {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #252525;
    padding: 0;
}
#style-switcher .bottom a.settings {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08);
    display: block;
    font-size: 24px;
    height: 47px;
    line-height: 41px;
    padding: 3px;
    position: absolute;
    right: -40px;
    text-align: center;
    top: 0;
    width: 47px;
}
#style-switcher .bottom a.settings i {
    margin-left: 1px;
    margin-top: 3px;
    color: #000;
}
#style-switcher select {
    background: none repeat scroll 0 0 #F6F6F6;
    border: 1px solid #FFFFFF;
    line-height: 1;
    margin-bottom: 10px;
    padding: 5px 10px;
    width: 150px;
}
.options_box {
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.sw-page{
 background:#222;
    color: #FFFFFF;
    display: block;
    margin: 5px 0;
    padding: 10px;
}
.sw-page:hover{
 background:#000000;
}
.variant{background:#000;}
ul.colors {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
	padding:0;
}
ul.colors li {
    float: left;
    margin: 0;
}
ul.colors li a {
    cursor: pointer;
    display: block;
    height: 31px;
    width: 35px;	
}

ul.colors .color1 {
    background: none repeat scroll 0 0 #FF6F40 ;
}
ul.colors .color2 {
    background: none repeat scroll 0 0 #26d0ca;
}
ul.colors .color3 {
     background: none repeat scroll 0 0 #1fda9a;
}
ul.colors .color4 {
     background: none repeat scroll 0 0 #ffcc00;
}
ul.colors li a.active {
    
    position: relative;
}
ul.colors li a.active:after {
	color: #fff;
    content:"\f00c";
    font-family: "FontAwesome";
    font-size: 10px;
    right: 12px;
    position: absolute;
    top: 9px;
}
.icon-2x{
font-size:28px;
line-height:30px;
}