/*
==================================================
==================================================
Template Name: Zayra - Landing Page
Theme URI: http://kimeravisualdesign.com/demo/zayra
Author: Kimeravisualdesign - Resetblue
Author URI: http://kimeravisualdesign.com
Description: Zayra - HTML5 Responsive Landing Page 
Version: 1.0
Tags: zayra, html5, css3, responsive, retina,
landing, landing page, showcase, app, app showcase
==================================================
==================================================
*/


/* 
==================================================
==================================================
// 1. global styles
// 2. buttons
// 3. preloader
// 4. general
// 5. mask overlay
// 6. fixed navbar
// 7. teaser backgrounds
// 8. homepage section
// 9. icon boxes
// 10. screenshots section
// 11. blog
// 12. fun facts counter
// 13. pricing tables
// 14. forms
// 15. social icons and logo list
// 16. footer
// 17. fullscreen video background
// 18. fullscreen image slideshow
// 19. modal panel - login and signup
// 20. css3 specs
// 21. retina logo features
==================================================
==================================================
*/



/* 1. global styles
================================================== */
html,
body {
height:100%;
width:100%
}

body {
-webkit-font-smoothing:antialiased;
font-family:'Helvetica', sans-serif;
font-size:12px;
font-weight:200;
line-height:1.5em
}

a,
a:hover,
a:focus,
a:active {
font-weight:400;
outline:none!important;
text-decoration:none
}

em {
font-style:italic;
font-weight:600
}

ul,
li {
list-style:none
}

ul {
font-size:14px;
line-height:1.2857em;
padding:0;
margin:15px 0
}

li {
padding:5px 0
}

li i {
margin-right:15px
}

iframe {
border:0
}

hr {
border-width:1px 0 0;
float:left;
margin:30px 0;
width:100%
}

blockquote {
font-size:18px;
font-style:italic;
line-height:1.5em;
padding: 15px 15px 30px  90px;
position:relative
}

blockquote figure {
font-size:18px;
height:45px;
left:15px;
padding-top:15px;
position:absolute;
text-align:center;
top:15px;
width:45px
}

p {
font-size:14px;
line-height:1.5857em;
margin:10px 0
}
	

h1,
h2,
h3,
h4,
h5,
h6 {
font-family:'Helvetica', sans-serif;
font-weight:800 !important;
margin:0;
position:relative;
}

h1 {
font-size:62px;
line-height:1.1613em
}

h2 {
font-size:24px;
line-height:1.3846em
}

h3 {
font-size:20px;
line-height:1.8em
}

h4 {
font-size:15px;
line-height:1.2em
}

h5 {
font-size:12px;
line-height:1.5em
}

h6 {
font-size:11px;
line-height:1.6364em
}

/* 2. buttons
================================================== */
.btn,
.btn:hover {
font-size:14px;
font-weight:600;
margin-top:30px;
padding:15px 20px;
text-transform:uppercase
}

.btn-default {
border-width:1px
}

.btn-default:hover,
.btn-inverse,
header .btn-default:hover,
.teaser .btn-default:hover {
background:none !important
}

header .btn-default:hover,
.teaser .btn-default:hover,
header .btn-inverse,
.teaser .btn-inverse {
border:1px solid #EDEDED !important;
color:#EDEDED !important
}
		
/* 3. preloader
================================================== */
#preloader {
bottom:0;
height:100%;
left:0;
position:fixed;
right:0;
top:0;
width:100%;
z-index:9998
}

#spinner {
height:100%;
left:50%;
margin:-50px 0 0 -50px;
position:fixed;
top:50%;
width:100px;
z-index:9998
}

/* 4. general
================================================== */
.wrapper {
height:auto;
overflow:hidden;
padding:60px 0
}

.teaser {
overflow:hidden;
padding:90px 0;
position:relative
}

h1.teaser-heading,
h2.teaser-heading,
h3.teaser-heading,
h4.teaser-heading,
h5.teaser-heading,
h6.teaser-heading {
color:#E8E8E8 !important
}

.teaser p {
color:#DEDEDE
}

.heading {
margin-bottom:60px
}

.heading p {
font-size:16px;
font-weight:100;
line-height:1.5em;
margin-top:30px
}

.heading span.line {
bottom:-15px;
display:block;
height:3px;
left:50%;
margin-left:-30px;
position:absolute;
width:60px
}

.jumbo-text {
font-size:26px;
line-height:1.5em
}

.pull-down {
margin-top:30px
}

.pull-down-2x {
margin-top:60px
}

.pull-down-3x {
margin-top:90px
}

.pull-down-4x {
margin-top:120px
}

.reset-margin {
margin:0
}

.img-back {
left:0;
position:absolute;
top:0
}

.img-front {
left:0;
position:relative;
top:0;
z-index:1000 !important
}

header,
fieldset,
fieldset.contact-form span.input {
position:relative !important
}

header,
.heading,
footer {
text-align:center
}

/* 5. mask overlay
================================================== */
.mask-overlay {
background:rgba(0, 0, 0, 0.7);
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
z-index:0
}

/* 6. fixed navbar
================================================== */
nav {
border:none!important;
height:120px;
margin:0!important;
padding:45px 0
}

ul.nav {
margin-top:5px;
position:relative !important
}

ul.nav li {
margin-left:15px;
padding:0 15px
}

ul.nav li a {
color:#EDEDED;
font-family:'Montserrat', sans-serif;
font-size:12px;
font-weight:400;
padding:0;
text-transform:uppercase
}

ul.nav li a:hover,ul.nav li a:focus {
background:none
}

ul.nav li a.nav-signup,
ul.nav li a.nav-signup:hover {
font-size:12px;
font-weight:400;
margin-top:-7px;
padding:5px 20px
}

ul.nav li a.nav-signup:hover {
border:1px solid #EDEDED !important;
color:#EDEDED !important;
}

a.brand {
background:url(images/website-logo/logo.png) 0 0 no-repeat;
color:#FFF;
font-size:22px;
height:43px;
width:260px;
display:block;
margin:0 auto;
text-indent: -9999px;
}

.scroll-navbar {
height:70px;
padding:15px 0;
transition:all .8s ease-in;

-webkit-transition:all .8s ease-in;
-moz-transition:all .8s ease-in;
-o-transition:all .8s ease-in
}

.navbar-toggle {
background:none;
font-size:16px;
margin-top:-3px !important;
padding:7px 20px
}

/* 7. teaser backgrounds
================================================== */
.fullscreen-background #homepage {
background:url(images/backgrounds/background-image.jpg) 50% 0 no-repeat
}

.bg1 {
background:url(images/backgrounds/background-image.jpg) 0 0 no-repeat
}

.bg2 {
background:url(images/backgrounds/background-image.jpg) 100% 100% no-repeat
}

.bg3 {
background:url(images/backgrounds/background-image.jpg) 100% 100% no-repeat
}

#blog {
background:url(images/backgrounds/background-image.jpg) 50% 50% no-repeat
}

.fullscreen-background #homepage,
.bg1,
.bg2,
.bg3,
#blog {
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover !important
}


/* 8. homepage section
================================================== */
#homepage {
height:827px;
overflow:hidden
}

.slogan h1,
.slogan h2,
.slogan h3,
.slogan h4,
.slogan h5,
.slogan h6 {
color:#ffffff !important;
font-size:36px;
line-height:1em;
margin-bottom:0px;
margin-top:50px;
}

.slogan p {
color:#ffffff;
font-size:18px;
font-weight:800;
margin-bottom:30px;
line-height:1.1250em
}

.slogan figure {
margin-top:75px
}

/* 9. icon boxes
================================================== */
.icon-box figure {
font-size:32px;
height:60px;
margin-bottom:30px;
padding-top:15px;
width:60px
}

.overview-box {
margin-bottom:45px
}

.overview-box .overview-desc {
margin-left:75px
}

.overview-box figure {
float:left;
font-size:42px;
width:45px
}

#phone-1a {
background:url(images/devices/phone/phone-1a.png) top center no-repeat
}

#phone-1b {
background:url(images/devices/phone/phone-1b.png) top center no-repeat
}

#phone-1c {
background:url(images/devices/phone/phone-1c.png) top center no-repeat
}

#phone-1d {
background:url(images/devices/phone/phone-1d.png) top center no-repeat
}

#tablet-1a {
background:url(images/devices/tablet/tablet-1a.png) top center no-repeat
}

#tablet-1b {
background:url(images/devices/tablet/tablet-1b.png) top center no-repeat
}

#tablet-1c {
background:url(images/devices/tablet/tablet-1c.png) top center no-repeat
}

#tablet-1d {
background:url(images/devices/tablet/tablet-1d.png) top center no-repeat
}

#android-1a {
background:url(images/devices/android/android-1a.png) top center no-repeat
}

#android-1b {
background:url(images/devices/android/android-1b.png) top center no-repeat
}

#android-1c {
background:url(images/devices/android/android-1c.png) top center no-repeat
}

#android-1d {
background:url(images/devices/android/android-1d.png) top center no-repeat
}

.phone-device .device-box figure {
height:480px
}

.tablet-device .device-box figure {
height:381px
}

.android-device .device-box figure {
height:573px
}

.icon-round .overview-desc {
margin-left:100px
}

.icon-square .overview-desc {
margin-left:90px
}

.icon-round figure {
height:70px;
padding-top:18px;
width:70px
}

.icon-square figure {
height:60px;
padding-top:15px;
width:60px
}

.icon-round figure,
.icon-square figure {
font-size:32px;
}

.device-box,
.icon-box figure,
.icon-round figure,
.icon-square figure {
text-align:center
}

/* 10. screenshots section
================================================== */
.screenshots-slider .carousel-indicators {
height:15px;
top:-50px
}

.screenshots-slider .carousel-indicators li {
border:none;
border-radius:50%;
height:7px;
padding:0;
width:7px
}

.screenshots-slider .carousel-indicators .active {
height:10px;
width:10px
}

.screenshot a {
border-radius:3px;
cursor: url("images/cursor.png") 30 30, crosshair;
display:block;
height:277px;
overflow:hidden;
position:relative;
text-align:center;
width:360px
}

.figure-mask {
background:rgba(0,0,0,0.5);
height:277px;
left:0;
position:absolute;
top:0;
transition:all .5s linear;
width:360px;

-webkit-transition:all .5s linear;
-moz-transition:all .5s linear;
-o-transition:all .5s linear
}

/* 11. blog
================================================== */
.news-list article {
margin-bottom:30px;
padding-bottom:20px;
text-align:center
}

.news-list article:last-child {
border-bottom:none;
margin-bottom:0;
padding-bottom:0
}

.news-list article p {
margin:10px 0
}

.blog-list article {
margin:0 0 60px;
padding:0 0 60px
}

#blog {
height:330px;
padding:0
}

article p {
margin:30px 0
}

article a.read-more {
font-weight:700
}

article a.read-more i {
font-size:18px;
margin-left:7px
}

.meta {
display:block;
font-size:12px;
font-weight:600;
margin:10px 0 30px
}

.meta span {
font-size:6px;
margin:0 10px
}

.comment {
margin-bottom:30px;
padding-bottom:20px
}

.reply {
float:right;
margin-left:10%;
width:90%
}

.comment-content {
margin-left:100px
}

.comment .meta {
margin:10px 0
}

.avatar {
float:left;
height:60px;
margin-right:30px;
width:60px
}

.pagination li a {
border-radius:2px;
font-size:14px;
margin:0 3px
}

/* 12. fun facts counter
================================================== */
.counter div {
border-right:1px solid #555
}

.counter div:last-child {
border-right:none
}

.counter figure {
font-size:40px;
font-weight:700
}

.counter p.timer {
color:#FFF;
font-size:42px;
font-weight:400;
margin:30px 0
}

.counter p {
font-size:14px;
text-transform:uppercase
}
		
/* 13. pricing tables
================================================== */
.price-plan {
text-align:center
}

.plan-title {
font-weight:700;
margin:0;
padding:10px 15px;
text-transform:uppercase
}

.plan-fee {
padding:15px
}

.plan-fee p {
font-family:'Open Sans', sans-serif;
font-size:28px;
font-style:italic;
font-weight:400;
}

.plan-fee .fee-cents {
font-size:20px
}

.plan-fee .fee-period {
font-size:16px;
font-weight:100
}

.price-plan ul {
margin:0
}

.price-plan ul li {
padding:10px 15px
}

.price-plan ul li.plan-signup a {
margin:10px 0
}

.featured-plan .plan-fee p {
color:#333 !important
}

.featured-plan .plan-fee .fee-period {
color:#333 !important
}

/* 14. forms
================================================== */
fieldset input,
fieldset textarea {
-webkit-appearance:none;
background:none;
font-size:14px;
height:45px;
margin-bottom:15px;
padding:0 20px 0 45px;
width:100%
}

fieldset input {
height:60px
}

fieldset textarea {
height:195px;
padding:15px
}

fieldset p {
margin:0
}

fieldset span {
position:relative
}

fieldset i {
font-size:18px;
left:30px;
position:absolute;
top:20px
}

fieldset input[type=submit],
fieldset input[type=submit]:hover {
-webkit-appearance:none;
-webkit-border-radius:0;
height:60px;
margin:0
}

fieldset span.error {
font-size:12px;
font-weight:600 !important;
position:absolute;
right:30px;
top:20px
}

fieldset span#message-error {
top:15px
}

p.response-box {
display:none;
font-weight:600;
margin:0;
padding-top:30px;
text-align:center
}

#contact-form p.response-box,
#comment-form p.response-box {
bottom:15px;
left:17px;
margin:0;
position:absolute
}

fieldset.full-width-form input[type=submit] {
margin-right:-30px
}

fieldset.full-width-form i {
left:15px;
top:0
}

fieldset.full-width-form span.error {
top:0
}

.teaser fieldset input {
border:1px solid #777 !important;
color:#EDEDED !important
}

.teaser fieldset i {
color:#CFCFCF !important
}

.teaser fieldset input[type=submit] {
border:none !important
}

/* 15. social icons and logo list
================================================== */
ul.social-list {
margin:15px 0
}

ul.social-list li {
margin:0 7px 7px 0;
padding:0
}

ul.social-list a {
border-radius:50%;
font-size:18px;
height:40px;
padding-top:10px;
text-align:center;
width:40px
}

ul.footer-social li {
margin:0 5px
}

ul.footer-social a {
font-size:16px;
}

ul.logo-list li {
width:231px
}

/* 16. footer
================================================== */
footer {
padding:60px 0
}

footer p {
font-size:12px;
font-weight:400
}

/* 17. fullscreen video background
================================================== */
#fullscreen-video {
bottom:0;
height:auto;
min-height:100%;
min-width:100%;
overflow:hidden;
position:absolute;
right:0;
width:auto;
z-index:-1000
}

/*  18. fullscreen image slideshow
================================================== */
#fullscreen-slideshow .carousel,
#fullscreen-slideshow .item,
#fullscreen-slideshow .active {
height:100%
}

#fullscreen-slideshow .carousel-inner {
height:100%
}

#fullscreen-slideshow .fill {
height:100%;
background-position:center;
background-size:cover;
width:100%
}

#fullscreen-slideshow {
height:100%;
position:absolute;
width:100%;
z-index:-1000
}

/* Fade transition */
#fullscreen-slideshow .item {
left: 0 !important;
transition: opacity .9s;

-webkit-transition: opacity .9s;
-moz-transition: opacity .9s;
-o-transition: opacity .9s
}

#fullscreen-slideshow .carousel-control {
background-image: none !important
}

#fullscreen-slideshow .next.left,
#fullscreen-slideshow .prev.right {
z-index: 1
}

#fullscreen-slideshow .active.left,
#fullscreen-slideshow .active.right {
z-index: 2
}

/*  19. modal panel - login and signup
================================================== */
.access-panel {
margin-top:120px;
overflow:hidden;
padding:50px 50px 0;
width:358px
}

.access-panel p {
font-size:12px
}

.modal-backdrop.in {
filter:alpha(opacity=90);
-khtml-opacity:0.9;
-moz-opacity:0.9;
opacity:0.9
}

.modal-header,
.modal-body {
padding:0
}

.modal-header {
padding:45px 0 30px !important;
text-align:center
}

.modal-header button.close {
position:absolute;
right:15px;
top:15px
}

.modal-footer {
margin-left:-50px;
margin-top:0;
width:140%
}

.modal-meta {
margin:30px 0
}

.modal-divider {
height:1px!important;
margin:30px 0;
position:relative
}

.modal-divider p {
font-size:14px;
font-weight:600;
height:30px;
left:50%;
margin:0 0 0 -23px;
padding-top:5px;
position:absolute;
text-align:center;
top:-13px;
width:46px
}

.access-panel label {
font-size:12px
}

.access-panel .checkbox {
margin:0;
padding:0;
position:relative
}

.access-panel .checkbox figure {
cursor:pointer;
display:none;
font-size:14px;
left:3px;
position:absolute;
top:6px
}

.access-panel .checkbox:hover figure {
display:block
}

input[type=checkbox] {
display:none
}

input[type=checkbox] + label:before {
content:"";
display:inline-block;
float:left;
font-family:FontAwesome;
font-size:14px;
height:20px;
margin:2px 15px 0 0;
text-align:center;
width:20px
}

input[type=checkbox]:checked + label:before {
content:"\f00c"
}

.access-panel form span.error {
top:0
}

/* 20. css3 specs
================================================== */
blockquote,
.btn,
.navbar-toggle,
.icon-box figure,
.icon-square figure,
.screenshot figure span.figure-mask a span,
fieldset input,
fieldset textarea,
.access-panel {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px
}

blockquote figure,
.icon-round figure {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%
}

a,
.btn  {
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out
}

.animate,
.figure-mask,
#fullscreen-slideshow .active.left,
#fullscreen-slideshow .active.right {
filter:alpha(opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0
}

a.animate:hover,
.screenshot a:hover .figure-mask,
#fullscreen-slideshow .next.left,
#fullscreen-slideshow .prev.right {
filter:alpha(opacity=100);
-khtml-opacity:1;
-moz-opacity:1;
opacity:1
}

.ie9 .animate {
filter:alpha(opacity=100);
-khtml-opacity:1;
-moz-opacity:1;
opacity:1
}

/*  21. retina logo features
================================================== */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

		nav a.brand h1 { 
		background-image:url(images/retina/logo-2x.png);
		background-size:30px 30px
		}		

}