/*Template Name: WhiteStar - Responsive HTML5 Landing Page Template
Theme URL: http://themeforest.net/user/DSA79/
Description: WhiteStar - Responsive HTML5 Landing Page Template
Author: DSA79
Author URL: http://themeforest.net/user/DSA79
Version: 1.0.1
Website: www.dsathemes.com
Tags: responsive, html5 template, landing, business, application, corporate, bootstrap3
*/
/* ------------------------------------------ */
/* TABLE OF CONTENTS
/* ------------------------------------------ */
/* 01 - General & Basic Styles */
/* 02 - Header & Navigation */
/* 03 - Top Page Banner */
/* 04 - Features */
/* 05 - Screens */
/* 06 - Team */
/* 07 - Video Banner */
/* 08 - Pricing Tables */
/* 09 - Testimonials Rotator */
/* 10 - FAQs */
/* 11 - Contacts */
/* 12 - Newsletter */
/* 13 - Footer */
/* 14 - Scroll to Top */
/* ==========================================================================
01. GENERAL & BASIC STYLES
========================================================================== */
#content-wrapper {
margin-top: 60px;
}
.color-theme {
color: #8b795e;
}
/*------------------------------------------*/
/* Page Preload
/*------------------------------------------*/
#preOverlay {
background-color: #8b795e;
}
#jpreLoader {
width: 300px;
height: 100px;
position: relative;
z-index: 1;
margin:0 auto;
}
#jpreBar {
position:fixed;
width:100%;
height:100% !important;
top:0;
left:0;
}
#jprePercentage {
color:#ddd;
text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
text-align:center;
font-size: 60px;
font-weight: 400;
letter-spacing:-2px;
z-index:2;
margin: 0;
}
/*------------------------------------------*/
/* Headers
/*------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 10px;
}
/*------------------------------------------*/
/* Link Setting
/*------------------------------------------*/
a {
text-decoration: none;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
a:hover {
color: #444;
text-decoration: none;
}
a:focus {
color: #f8f8f8;
outline: none;
border: none;
text-decoration: none;
}
/*------------------------------------------*/
/* Lists
/*------------------------------------------*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
/*------------------------------------------*/
/* Section Titlebar
/*------------------------------------------*/
.titlebar {
margin-bottom: 50px;
text-align: center;
}
.titlebar h1 {
color: #444;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0px 1px 1px rgba(10, 10, 10, 0.6);
}
.titlebar p {
color: #888;
font-size: 17px;
font-family: 'Paprika', cursive;
line-height: 28px;
font-weight: 400;
padding: 0 18%;
}
/*------------------------------------------*/
/* Theme Color Button
/*------------------------------------------*/
.btn-theme {
background-color: #73644e;
border: 1px solid #625440;
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 10px 20px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.btn-theme:hover {
background-color: #7b6b53;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2);
color: #f8f8f8;
}
/*------------------------------------------*/
/* Black Button
/*------------------------------------------*/
.btn-black {
background-color: #444;
border: 1px solid #333;
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 10px 20px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.btn-black:hover {
background-color: #555;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2);
color: #fff;
}
/*------------------------------------------*/
/* Large Button Settings
/*------------------------------------------*/
.btn-lg {
font-size: 18px;
padding: 14px 28px;
}
.btn:focus {
outline: none;
}
.btn:focus {
color: #f8f8f8;
text-decoration: none;
}
/* ==========================================================================
02. HEADER & NAVIGATION
========================================================================== */
/*------------------------------------------*/
/* Logo Image
/*------------------------------------------*/
.navbar-brand {
padding: 15px;
}
/*------------------------------------------*/
/* Navigation Menu
/*------------------------------------------*/
.navbar-nav > li > a {
color: #aaa;
display: block;
padding: 0 15px;
font-size: 13px;
font-weight: 700;
line-height: 60px;
text-transform: uppercase;
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
.navbar-nav > li > a:hover {
color: #f8f8f8;
}
.navbar-nav > li > a.selected-nav {
color: #f8f8f8;
}
/*------------------------------------------*/
/* Responsive Menu
/*------------------------------------------*/
.navbar-toggle {
position: relative;
float: right;
padding: 10px;
margin: 13px 30px 13px 0;
background-color: none;
border: none;
}
/* ==========================================================================
03. TOP PAGE BANNER
========================================================================== */
#top-page-banner {
background: #8b795e;
color: #fff;
padding: 20px 0;
}
/*------------------------------------------*/
/* Top Banner Description
/*------------------------------------------*/
#tp_banner_description {
margin: 110px 0 130px;
}
#tp_banner_description h1 {
font-family: 'Fauna One', serif;
line-height: 1.3;
text-shadow: rgba(10, 10, 10, 0.6) 0px 1px 1px;
}
#tp_banner_description p {
font-size: 16px;
line-height: 26px;
font-weight: 600;
margin-bottom: 0;
margin-top: 20px;
margin-bottom: 40px;
}
/*------------------------------------------*/
/* Top Banner Buttons
/*------------------------------------------*/
.tp_banner_btn a {
margin-right: 10px;
}
/*------------------------------------------*/
/* Top Banner Image
/*------------------------------------------*/
#tp_banner_image .img-responsive {
display: inline-block;
}
/* ==========================================================================
04. FEATURES
========================================================================== */
#features {
padding-top: 80px;
padding-bottom: 40px;
border-bottom: 1px solid #ddd;
}
#f_center_content { opacity: 0;}
#feature_1,
#feature_2,
#feature_3,
#feature_4,
#feature_5,
#feature_6 {
opacity: 0;
margin-top: 30px;
}
/*------------------------------------------*/
/* Features Left Side
/*------------------------------------------*/
#f_left_content {
text-align: right;
padding-right: 0;
}
/*------------------------------------------*/
/* Features Right Side
/*------------------------------------------*/
#f_right_content {
text-align: left;
padding-left: 0;
}
/*------------------------------------------*/
/* Features Box
/*------------------------------------------*/
.feature-box p {
color: #888;
line-height: 20px;
}
.feature-box h4 {
font-size: 16px;
font-family: 'Paprika', cursive;
}
/*------------------------------------------*/
/* Feature Box Icon
/*------------------------------------------*/
.feature-box-icon i {
color: #8b795e;
font-size: 34px;
margin: 10px 0 ;
}
/* ==========================================================================
05. SCREENS
========================================================================== */
#screens {
padding-top: 80px;
padding-bottom: 50px;
border-bottom: 1px solid #ddd;
background-color: #ECF0F1;
}
#screenshot_1,
#screenshot_2,
#screenshot_3,
#screenshot_4,
#screenshot_5,
#screenshot_6,
#screenshot_7,
#screenshot_8 {
opacity: 0;
margin-bottom: 30px;
}
/*------------------------------------------*/
/* Image Hover Effect
/*------------------------------------------*/
.hover-details {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
transition: all 400ms;
-moz-transition: all 400ms;
-webkit-transition: all 400ms;
-o-transition: all 400ms;
}
.hover-details .img-cover {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 15, 15, 0.55);
-moz-transition: all 400ms;
-webkit-transition: all 400ms;
-o-transition: all 400ms;
transition: all 400ms;
}
.hover-details > img {
width: 100%;
height: auto;
-moz-transition: all 400ms;
-webkit-transition: all 400ms;
-o-transition: all 400ms;
transition: all 400ms;
}
/*------------------------------------------*/
/* Image Zoom Icon
/*------------------------------------------*/
.image_zoom {
position:absolute;
top: -50%;
left:50%;
width:50px;
height:50px;
border-radius:50%;
background: #8b795e url(../img/icons/zoom-ico.png) no-repeat 50% 50%;
margin-top:-25px;
margin-left: -25px;
-webkit-transition: all ease 400ms;
-moz-transition: all ease 400ms;
-ms-transition: all ease 400ms;
-o-transition: all ease 400ms;
transition: all ease 400ms;
}
/*------------------------------------------*/
/* Image Title
/*------------------------------------------*/
.img-cover h3 {
width: 100%;
position: absolute;
bottom: -28%;
text-align: center;
color: #f8f8f8;
font-size: 16px;
font-weight: 400;
padding: 0 10px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
/*------------------------------------------*/
/* Image Scale ( Hover Effect )
/*------------------------------------------*/
.hover-details:hover > img {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
.hover-details:hover .image_zoom {
top: 45%;
}
.hover-details:hover .img-cover h3 {
bottom: 28%;
}
.hover-details:hover .img-cover {
opacity: 1;
}
.image_zoom:hover {
background-color: #333;
}
/* ==========================================================================
06. TEAM
========================================================================== */
#team {
padding-top: 80px;
padding-bottom: 80px;
border-bottom: 1px solid #ddd;
}
#team-member-holder {opacity:0;}
.team-member {
text-align: center;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/*------------------------------------------*/
/* Team Member Photo
/*------------------------------------------*/
.img-block {
margin: 10px 10px 20px 10px;
}
.img-block img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0px 0px 0px 0 rgba(10, 10, 10, 0.15);
opacity: 1;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/*------------------------------------------*/
/* Team Member Photo Hover
/*------------------------------------------*/
.team-member:hover .img-block img {
box-shadow: 0px 0px 0px 10px rgba(10, 10, 10, 0.1);
opacity: .85;
}
/*------------------------------------------*/
/* Team Member Meta
/*------------------------------------------*/
.team-img-meta h4 {
font-family: 'Paprika', cursive;
font-weight: 400;
text-transform: uppercase;
}
.team-img-meta p {
font-size: 16px;
font-family: 'Paprika', cursive;
font-weight: 400;
margin-bottom: 10px;
padding: 0 15%;
}
p.member-info {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 20px;
padding: 0 5%;
margin-bottom: 20px;
}
/*------------------------------------------*/
/* Team Member Social Icons
/*------------------------------------------*/
.team-member-socials {
text-align: right;
display: inline-block;
margin: 0 auto;
}
.team-member-socials li {
float: left;
display: inline-block !important;
vertical-align: top;
width: auto !important;
clear: none !important;
}
.page_social {
width: 40px;
height: 40px;
background-color: #bbb;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 34px;
display: block;
text-decoration: none;
border: 2px solid #bbb;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 0 3px 5px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/*------------------------------------------*/
/* Team Member Icons Hover
/*------------------------------------------*/
.page_social:hover {
background-color: #8b795e;
border-color: #8b795e;
color: #f8f8f8;
}
/* ==========================================================================
07. VIDEO BANNER
========================================================================== */
#video-banner {
background: #8b795e;
color: #f8f8f8;
padding: 70px 0;
}
/*------------------------------------------*/
/* Video Banner Content
/*------------------------------------------*/
#v_banner_content {
opacity: 0;
margin: 9px 0;
}
#v_banner_content h1 {
font-family: 'Fauna One', serif;
margin-bottom: 30px;
}
#v_banner_content p {
font-size: 16px;
line-height: 26px;
font-weight: 600;
}
/*------------------------------------------*/
/* Video Banner Buttons
/*------------------------------------------*/
.btn-google-play, .btn-app-store {
display: block;
width: 152px;
height: 50px;
margin-top: 30px;
margin-right: 10px;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
display: inline-block;
}
.btn-google-play {
background: url(../img/icons/btn-google-store.png);
}
.btn-app-store {
background: url(../img/icons/btn-app-store.png);
}
/*------------------------------------------*/
/* Video Banner Video
/*------------------------------------------*/
#v_banner_video {
opacity: 0;
}
.video-block {
position: relative;
padding-bottom: 60%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-block iframe,
.video-block object,
.video-block embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
/* ==========================================================================
08. PRICING
========================================================================== */
#pricing {
padding-top: 80px;
padding-bottom: 100px;
border-bottom: 1px solid #ddd;
}
#price_1,
#price_2,
#price_3,
#price_4 {opacity:0;}
.pricing-table {
border: 1px solid #ccc;
}
.pricing-table strong {
color: #8b795e;
}
/*------------------------------------------*/
/* Pricing Table Header
/*------------------------------------------*/
.pricing-table .plan-title {
background-color: #444;
color: #fff;
font-size: 22px;
font-family: 'Paprika', cursive;
font-weight: 600;
text-transform: none;
line-height: 40px;
padding: 15px;
margin: 0px -1px;
border: 1px solid #ccc;
border-top: none;
border-bottom: none;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.pricing-table .price-header {
border-bottom: 1px solid #ccc;
position: relative;
}
/*------------------------------------------*/
/* Pricing Table Price Plan
/*------------------------------------------*/
.pricing-table .plan-price {
line-height: normal;
background-color: #f3f3f3;
padding: 12px 15px;
margin: 0px;
border-top: 1px solid #ddd;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.pricing-table .plan-price span {
color: #444;
font-size: 30px;
font-weight: 900;
}
.plan-price small {
font-size: 18px;
}
/*------------------------------------------*/
/* Pricing Table Body
/*------------------------------------------*/
.pricing-table ul.features {
background-color: #eee;
padding: 11px 16px;
}
.pricing-table ul.features li {
font-size: 16px;
border-top: 1px dashed #aaa;
padding: 15px;
}
.pricing-table ul.features li:nth-child(1) {
border: none;
}
/*------------------------------------------*/
/* Pricing Table Footer
/*------------------------------------------*/
.pricing-table .price-footer {
background-color: #fafafa;
padding-top: 25px;
padding-bottom: 25px;
border-top: 1px solid #aaa;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/*------------------------------------------*/
/* Featured Table
/*------------------------------------------*/
.pricing-table.featured .plan-title {
background-color: #8b795e;
}
.pricing-table.featured .plan-title,
.pricing-table.featured .plan-price span,
.pricing-table.featured .plan-price small {
color: #fff;
}
.pricing-table.featured .plan-price {
border-top: 1px solid #625440;
background-color: #8b795e;
}
/*------------------------------------------*/
/* Pricing Table Hover
/*------------------------------------------*/
.pricing-table:hover .plan-title {
background-color: #8b795e;
}
.pricing-table:hover .plan-price {
border-top: 1px solid #625440;
background-color: #8b795e;
}
.pricing-table:hover .plan-price span,
.pricing-table:hover .plan-price small {
color: #fff;
}
/*------------------------------------------*/
/* Corner Ribbon
/*------------------------------------------*/
.ribbon-wrapper {
width: 85px;
height: 85px;
overflow: hidden;
position: absolute;
top: -6px;
right: -3px;
}
.ribbon {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
text-shadow: rgba(150, 150, 150, 0.3) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #e18649;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e18649), to(#f36100));
background-image: -webkit-linear-gradient(top, #e18649, #f36100);
background-image: -moz-linear-gradient(top, #e18649, #f36100);
background-image: -ms-linear-gradient(top, #e18649, #f36100);
background-image: -o-linear-gradient(top, #e18649, #f36100);
color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0 ,0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon:before, .ribbon:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon:before {
left: 0;
}
.ribbon:after {
right: 0;
}
/* ==========================================================================
09. TESTIMONIALS ROTATOR
========================================================================== */
#testimonials-rotator {
background-color: #333;
border-bottom:1px solid #ddd;
color: #fff;
text-align: center;
}
.testimonials {
margin: 50px 8%;
}
.slides {
margin: 30px 0 60px;
}
/*------------------------------------------*/
/* Testimonial Message
/*------------------------------------------*/
.testimonials p {
font-size: 18px;
font-family: 'Paprika', cursive;
line-height: 30px;
padding-top: 10px;
}
/*------------------------------------------*/
/* Message Author
/*------------------------------------------*/
.testimonials p.author {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 0;
}
.testimonials p.author span {
color: #a79376;
font-style: italic;
}
/* ==========================================================================
10. FAQs
========================================================================== */
#faq {
padding-top: 80px;
padding-bottom: 100px;
border-bottom: 1px solid #ddd;
}
#question_1,
#question_2,
#question_3,
#question_4,
#question_5,
#question_6,
#question_7,
#question_8 {
opacity: 0;
width: 100%;
display: block;
float: left;
padding: 0;
margin: 5px 0;
cursor: pointer;
}
/*------------------------------------------*/
/* FAQs Accordion
/*------------------------------------------*/
.accordion a {
color: #666;
font-size: 13px;
font-family: 'Paprika', cursive;
line-height: 26px;
padding: 10px 40px;
text-decoration: none;
border-left: 4px solid #d0d0d0;
border-bottom: 1px solid rgba(190, 190, 190, 0.2);
display: block;
cursor: pointer;
background: #E4E4E1 url(../img/icons/open.png) no-repeat center left;
}
.accordion li.active>a {
background: #E4E4E1 url(../img/icons/close.png) no-repeat center left;
color: #151515;
border-left: 4px solid #8b795e;
border-bottom: 1px solid #ccc;
box-shadow: none;
}
/*------------------------------------------*/
/* FAQs Answer
/*------------------------------------------*/
.accordion li div {
line-height: 22px;
padding: 15px 10px;
display: block;
clear: both;
float: left;
}
/* ==========================================================================
11. CONTACTS
========================================================================== */
#contact {
padding-top: 80px;
padding-bottom: 80px;
background-color: #ecf0f1;
border-bottom: 1px solid #aaa;
}
#input_name,
#input_email,
#input_subject,
#input_message { opacity: 0;}
/*------------------------------------------*/
/* Contact Form Input
/*------------------------------------------*/
#contact-form .form-control {
height: 50px;
margin-bottom: 20px;
border: 1px solid #aaa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
background: #f3f3f3;
color: #444;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
box-shadow: 0 0 0 0;
padding: 8px;
margin-bottom: 15px;
}
#contact-form textarea {
min-height:180px;
}
/*------------------------------------------*/
/* Contact Form Focus
/*------------------------------------------*/
.form-control:focus {
border-color: #8b795e;
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(171, 34, 16, 0.6);
}
/*------------------------------------------*/
/* Contact Form Submit Button
/*------------------------------------------*/
#form_btn {
margin-top: 30px;
opacity: 0;
}
/*------------------------------------------*/
/* Contact Form Error Message
/*------------------------------------------*/
.error {
padding: 0 5px 20px;
color: #af3809;
}
/* ==========================================================================
12. NEWSLETTER
========================================================================== */
#newsletter {
background: #8b795e;
border-bottom: 1px solid #666;
color: #fff;
}
#subscribe {
margin-top: 40px;
margin-bottom: 40px;
}
#newsletter_title {
opacity: 0;
}
#newsletter h1 {
font-family: 'Fauna One', serif;
}
#newsletter p {
line-height: 26px;
font-family: 'Paprika', cursive;
}
/*------------------------------------------*/
/* Newsletter Form
/*------------------------------------------*/
#newsletter_form {
padding-left: 60px;
opacity: 0;
}
.subscribe-form {
margin: 14px auto;
position: relative;
z-index: 10;
}
#newsletter_form p {
font-size: 14px;
line-height: 16px;
font-family: 'Open Sans', sans-serif;
font-style: italic;
text-align: right;
}
.subscribe-input {
width: 75%;
height: 54px;
color: #999;
font-size: 16px;
font-weight: 300;
color: #222;
padding-left: 10px;
border-radius:6px 0 0 6px;
}
.subscribe-submit {
width: 25%;
height: 54px;
background: #73644e;
border: 1px solid #625440;
color: #fff;
font-weight:900;
text-decoration:none;
text-transform: uppercase;
text-align:center;
display: block;
position: absolute;
top: 0px;
right: 0px;
border:none;
border-radius:0 6px 6px 0;
cursor: pointer;
outline: 0;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2);
}
.subscribe-submit:active {
outline: 0;
}
.subscribe-submit:hover {
opacity:0.8
}
/* ==========================================================================
13. FOOTER
========================================================================== */
#footer {
padding: 30px 0 20px;
background-color: #333;
}
#footer_copy,
#footer_icons {
opacity: 0;
}
#footer p {
color: #999;
font-family: 'Paprika', cursive;
line-height: 40px;
margin-bottom: 0;
}
/*------------------------------------------*/
/* Footer Social Icons
/*------------------------------------------*/
.footer-socials {
margin: 10px 0;
}
.footer-socials li {
float: left;
width: auto !important;
display: inline-block !important;
vertical-align: top;
clear: none !important;
line-height: 70px;
}
.foo_social {
width: 44px;
height: 44px;
text-align: center;
color: #999;
font-size: 18px;
line-height: 40px;
margin: 0 4px;
border: 2px solid #999;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
text-decoration: none;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/*------------------------------------------*/
/* Footer Icons Hover
/*------------------------------------------*/
.ico-facebook:hover {background-color: #3b5998;color: #f8f8f8;border-color:#3b5998;}
.ico-twitter:hover {background-color: #00a9ed;color: #f8f8f8;border-color:#00a9ed;}
.ico-google-plus:hover {background-color: #cd1111;color: #f8f8f8;border-color:#cd1111;}
.ico-linkedin:hover {background-color: #015886;color: #f8f8f8;border-color:#015886;}
.ico-dribbble:hover {background-color: #d92d84;color: #f8f8f8;border-color:#d92d84;}
.ico-instagram:hover {background-color: #beb3a8;color: #f8f8f8;border-color:#beb3a8}
.ico-pinterest:hover {background-color: #ac281a;color: #f8f8f8;border-color:#ac281a;}
.ico-dropbox:hover {background-color: #008ad2;color: #f8f8f8;border-color:#008ad2;}
.ico-skype:hover {background-color: #00a9ed;color: #f8f8f8;border-color:#00a9ed;}
.ico-youtube:hover {background-color: #cd1b20;color: #f8f8f8;border-color:#cd1b20;}
.ico-tumblr:hover {background-color: #3a5976;color: #f8f8f8;border-color:#3a5976;}
.ico-vimeo:hover {background-color: #00adee;color: #f8f8f8;border-color:#00adee;}
.ico-flickr:hover {background-color: #d2d2d2;color: #f8f8f8;border-color:#d2d2d2;}
.ico-github:hover {background-color: #222;color: #f8f8f8;border-color:#222;}
.ico-renren:hover {background-color: #364a83;color: #f8f8f8;border-color:#364a83;}
.ico-vk:hover {background-color: #3b5998;color: #f8f8f8;border-color:#3b5998;}
.ico-xing:hover {background-color: #015f5e;color: #f8f8f8;border-color:#015f5e;}
.ico-weibo:hover {background-color: #be4443;color: #f8f8f8;border-color:#be4443;}
.ico-rss:hover {background-color: #ff6600;color: #f8f8f8;border-color:#ff6600;}
/* ==========================================================================
14. SCROLL TO TOP
========================================================================== */
#scrollUp {
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
display: none;
background: rgba(123, 123, 123, 0.65) url(../img/icons/back-to-top.png) no-repeat 50% 48%;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
transition: all 250ms linear;
}
#scrollUp:hover {
background-color: rgba(139, 124, 94, 0.95);
}
nav a#pull {
display: none;
}
/* ==========================================================================
STYLE CHANGER
========================================================================== */
#stlChanger {
color:#cecece;
font-size: 14px;
overflow:hidden;
position:fixed;
top: 80px;
left:0;
z-index:1000000 ;
}
#stlChanger .siteChanger,
#stlChanger .bgChanger,
#stlChanger .buts {
position:relative;
overflow:hidden;
}
#stlChanger .siteChanger,
#stlChanger .bgChanger {
min-width: 220px;
min-height: 220px;
}
#stlChanger a {
color: #fff;
text-decoration: none;
}
#stlChanger a:hover {text-decoration:none;}
#stlChanger .blockChanger {
width: 170px;
}
#stlChanger .chBody {
background: rgba(240, 240, 240, 0.5);
width: 180px;
position: relative;
overflow: hidden;
border: 1px solid #aaa;
border-radius: 0 6px 6px 0;
}
#stlChanger .chBut {
background: #444;
width: 40px;
height: 40px;
position:absolute;
top: 15px;
right:0px;
z-index:10;
text-align: center;
border-radius: 0px 4px 4px 0px;
}
#stlChanger .chBut i {
color:#fff;
font-size: 28px;
margin: 6px;
}
#stlChanger .stBlock {
position:relative;
overflow:hidden;
}
#stlChanger .stBlock p {
color: #444;
font-size: 14px;
font-family: 'Paprika', cursive;
margin-left: 22px;
}
#stlChanger h4 {
color: #444;
font-size: 18px;
background: #444;
font-weight: 900;
line-height: 22px;
display:block;
margin-top: 0;
padding: 8px 10px 9px;
}
#stlChanger .stBgs a {
text-decoration:none;
width: 45px;
height: 45px;
float:left;
padding:0;
margin: 3px 3px 0 0;
cursor:pointer;
opacity: 1;
}
#stlChanger .stBgs a:hover {
opacity: 0.7;
}
#stlChanger a.dark-style {
display: inline-block;
padding: 6px 16px;
text-align: center;
background: none repeat scroll 0% 0% rgb(75, 76, 77);
font-size: 14px;
font-weight: 900;
color: #fff;
cursor: pointer;
}
#stlChanger a.dark-style:hover {
background: #ab2210;
color: #fff;
}
#stlChanger .btn-theme {
font-size: 14px;
font-weight: 700;
text-transform: none;
padding: 6px 10px;
}