/*
Theme Name: PATIENCE - Version:  1
Description:  Designed by <a href="http://themeforest.net/user/josweb">josweb</a>.
Author:  <a href="http://www.spiralpixel.com">Jo</a>
00. General Styling
01. SECTION 1
02. SECTION 2
03. SECTION 3
04. SECTION 4
05. KEY FRAMES
06. MEDIA QUERIES
*/

/* 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}

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('font/BebasNeue-webfont.eot');
    src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/BebasNeue-webfont.woff') format('woff'),
         url('font/BebasNeue-webfont.ttf') format('truetype'),
         url('font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'icons';
	src: url("font/icons.eot");
	src: 
		url("font/icons.eot?#iefix") format('embedded-opentype'), 
		url("font/icons.woff") format('woff'), 
		url("font/icons.ttf") format('truetype'), 
		url("font/icons.svg#icons") format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'OpenSansRegular';
    src: url('font/OpenSans-Regular-webfont.eot');
    src: url('font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Regular-webfont.woff') format('woff'),
         url('font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('font/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('font/OpenSans-Light-webfont.eot');
    src: url('font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Light-webfont.woff') format('woff'),
         url('font/OpenSans-Light-webfont.ttf') format('truetype'),
         url('font/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('font/OpenSans-Semibold-webfont.eot');
    src: url('font/font/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Semibold-webfont.woff') format('woff'),
         url('font/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('font/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/***************************************************
	00. GENERAL
***************************************************/
html{ height: 100%; overflow-x: hidden; }

body {
	font: 13px/1.6em  OpenSansRegular, sans-serif;
	-webkit-font-smoothing: antialiased;
	background: #222 url(../images/black_denim.png) repeat;
}

/* Preloader */
#preloader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: #222 url(../images/black_denim.png) repeat;
	z-index:99; 
}
#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%; 
	background-image:url(../images/status.gif); 
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; 
}
.wrapper { width: 100%; position: relative; }
p { margin: 0px; padding: 0px 0px 20px 0px; }
strong { font-family: OpenSansSemiBold, sans-serif; }
.float-left { float: left; margin: 0px 5px 5px 0px; }
.float-right { float: right; margin: 0px 0px 5px 5px; }

/* margins */
.clr { padding: 40px 0 0 0;}
.clr2 { padding: 50px 0 0 0;}
#space, #space2 { position: relative; width: 100%; padding: 60px 0 0px; }

/* links */
a { 
	font-size: 13px;
	text-shadow: 0 1px 0 #fff;
	color:#002d4c;
	outline:none;
	text-decoration: none;
}
a:hover { color:#002d4c; }

/* typography */
h3, h4, h5, h6 { font-family: 'OpenSansSemibold'; color: #FFF; }

/* dark font colours */
.dark  { color:#333; }
.dark2  {  color:#555;  }
.dark3  {  color:#555; font-size: 16px;  }

h1{font-family: 'BebasNeueRegular';font-size:40px;padding: 15px 0; color: #FFF; text-align:center;  }
h2{font-family: 'BebasNeueRegular';font-size:20px;padding:  0; color: #FFF; text-align:center; }
h3 { font-size: 14px; padding-bottom: 15px;}
h4 { font-size: 13px; padding-bottom: 15px;}
h5 { font-size: 12px; padding-bottom: 15px; }
h6 { font-size: 11px; padding-bottom: 15px; }

/* italic intro */
.intro{
	padding-bottom: 25px;
	letter-spacing:3px;
	color: #555;
	text-transform:uppercase;
}
.intro_white{
	font-family: 'BebasNeueRegular';
	font-size: 20px;
	padding-bottom: 25px;
	letter-spacing:3px;
	color: #E0E0E0;
	text-transform:uppercase;
}
/* sliding panels */
.curtains {
    width: 100%;
    z-index: 1;
    position:relative;
}
.curtains>li{
    box-shadow:0 0 12px #444;
   background: #eee url(../images/vintage_speckles.jpg) repeat;
    position: fixed;
    display:block;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    z-index:1;
}
.curtains>li.hidden{display:none;}
.curtains>li:first-child{z-index:2;}

/* background image pattern overlay */
.overlay{
	position:absolute;
	width:100%;
	height:100%;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:-1;
}
.cssanimations #backstretch img{
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 2s linear infinite 0s;
}

/***************************************************
	01. SECTION 1
***************************************************/
.logo {
	padding-top:10px;
	text-align: center; 
	background: transparent;
}

.strip {
	position: absolute;
	bottom: 0%;
	width: 100%;
	background: #1e1e1e;
    opacity: 0.90; 
    filter: Alpha(opacity='90'); 
	padding: 90px 0px 0px;
}
.strip h2 {font-family: 'BebasNeueRegular';
	position: absolute;
	bottom: 0%;
	font-size: 50px;
	line-height: 80px;
    width: 100%;
    text-align: center;
    color: transparent;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
    -moz-animation: blurFadeInOut 3s ease-in backwards;
    -ms-animation: blurFadeInOut 3s ease-in backwards;
    animation: blurFadeInOut 3s ease-in backwards;
}

/* frames */
.strip h2.frame-1 {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
.strip h2.frame-2 {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.strip h2.frame-3 {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}
.strip h2.frame-4 {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    color: transparent;
}
.strip h2.frame-4 span {
    -webkit-animation: blurFadeIn 2s ease-in 12s backwards;
    -moz-animation: blurFadeIn 2s ease-in 12s backwards;
    -ms-animation: blurFadeIn 2s ease-in 12s backwards;
    animation: blurFadeIn 2s ease-in 12s backwards;
    color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.strip h2.frame-4 span:nth-child(2) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}
.strip h2.frame-4 span:nth-child(3) {
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
}

/***************************************************
	02. SECTION 2
***************************************************/
.block{
	text-align: left;
	width: 50%;
	background: #fff;
    opacity: 0.85; 
    filter: Alpha(opacity='85'); 
	border-radius: 5px;
	margin: 40px auto 0px auto;
	padding: 2em 4em 2em 4em;
	font-color: #222;
	max-width:960px;
}

/* divider */
.divider{
	border-top: 0px double #bbb;
	margin-top: 10px;
	padding: 30px 0px;
}
.icon{
	border: 4px solid;
	background-color: rgba( 0, 0, 0, .05 );
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	padding: 8px;
	margin: 15px 20px 0px 0px;
}
			
.icon:hover {
	border: 4px solid  #999;
	background-color: rgba( 0, 0, 0,.09 );
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	padding: 8px;
	margin:15px 20px 0px 0px;
}

/***************************************************
	03. SECTION 3
***************************************************/
.block2{
	text-align: center;
	width: 60%;
	background: #111; 
    opacity: 0.90; 
    filter: Alpha(opacity='90'); 
	-moz-border-radius: 5px;
	border-radius: 5px;z-index:2;
	margin: 30px auto 0px auto;
	max-width:960px;
	padding: 2em 4em 2em 4em;
}

.js .gallery {
	width: 100%;
	max-width: 690px;
	margin: 0 auto;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-top: 10px;
	position: relative; z-index:5;
	box-shadow: 0 2px 1px rgba(255,255,255,0.3), 0 -2px 1px rgba(255,255,255,0.9);
}

.elastislide-horizontal {
	padding: 10px 40px;
	background-color: transparent;
	border-radius: 20px 20px 0 0;
}
.elastislide-carousel {
	overflow: hidden;
	position: relative;
}
.elastislide-carousel ul {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
}
.elastislide-horizontal ul { white-space: nowrap; }
.elastislide-carousel ul li { margin: 0; -webkit-backface-visibility: hidden; }
.elastislide-horizontal ul li { height: 100%; display: inline-block; }
.elastislide-carousel ul li a { display: inline-block; padding: 0px; width: 100%; }
.elastislide-carousel ul li a img {
	border-radius: 10px;
	border: none;
	box-shadow: 0 1px 2px #000;
	display: block;
	max-width: 100%;
}
/* Navigation Arrows */
.elastislide-wrapper nav span {
	position: absolute;
	background: #ddd url(../images/nav.png) no-repeat 4px 3px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.8;
	background-color: #666;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
}
.elastislide-wrapper nav span:hover { opacity: 1.0 }
.elastislide-horizontal nav span {
	top: 10%;
	left: 10px;
	margin-top: -11px;
}
.elastislide-horizontal nav span.elastislide-next {
	right: 10px;
	left: auto;
	background-position: 4px -17px;
}
.image-preview img {
	border-radius: 0 0 10px 10px;
	max-width: 100%;
	display: block;
}

/***************************************************
	04. SECTION 4
***************************************************/
.block3{
	text-align: center;
	width: 60%;
	margin: 0px auto;
	padding: 2em 4em 4em 4em;
	max-width:960px;
}

/* quote */
.quote-wrap {
	width: 300px;
	margin: 20px auto 0 auto;
	padding: 20px;
	position: relative;	
}
.quote-wrap p { margin: 0; padding: 0; }
.quote-wrap blockquote { margin: 0; padding-top:150px; position: relative; }

.quote blockquote:after {
	font-family: 'icons';
	width: 138px;
	height: 138px;
	border-radius: 50%;
	content: '';
	background:url(../images/logo_V2.png) no-repeat; 
	position: absolute;
	font-size: 70px;
	line-height: 138px;
	text-align: center;
	top: 0px;
	left: 26%;
	margin-left: 0px;
	color: #fefefe;
}
.quote blockquote:before{
	content: '';
	width: 500px;
	height: 400px;
	border-radius: 50%;
	position: absolute;
	top: 0px;
	left: -50px;
	z-index: -1;
}
.quote blockquote p {
	font-family: 'BebasNeueRegular';
	font-size: 25px;
	padding-bottom: 25px;
	letter-spacing:3px;
	color: #666;
	text-transform:uppercase;
	display: inline;
	line-height: 30px;
}

/* countdown */
.counter {
    height: 90px;
    margin: 10px auto 30px auto;
    text-align: center;
    width: 352px;
	border: 1px solid #aaa;
}
.countdown li {
    margin: 5px 3px 0px 3px;
    display: inline;
    text-align: center;
	float: left;
	height: 34px;
	padding-top: 0px; 
	border: 1px solid #bbb;
    padding-top: 32px;
	background-color: #eee;
}
.number {
   	font-size: 50px;
    line-height: 2px;
    color: #444;
    font-family: 'BebasNeueRegular', sans-serif;
}
.time {
    font-size: 11px;
    margin-top: 12px;
	background: transparent;
    text-transform: uppercase;
    color: #777;
	width: 80px;
	display: block;
    font-family:OpenSansRegular, sans-serif;
}

/* email contact */
.details {
	max-width: 600px;
	width: 100%;
    height: 60px;
    margin: 0 auto;
    padding: 5px 0px 0px;
    text-align: center;
}
input#email {
    background: #fefefe;
    width: 60%;
    height: 43px;
    border: 0 none;
    padding: 0 15px 0 15px;
    color: #555;
    font: normal 12px 'OpenSansRegular', sans-serif;
    margin-right: 0px;
    line-height: 40px;
}
input#submit {
    background: #333;
	width:22%;
    height: 43px;
    border: 0 none;
	text-align:center;
    cursor: pointer;
    color: #ccc;
	letter-spacing: 2px;
}
input#submit:hover { background: #666; color: #fff; }
input#submit:active {
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}
.success {
    font-family: 'OpenSansSemibold', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
    color: #555;
    margin-top: 0px;
}
.error {
    color: #999;
    font: normal 10px 'OpenSansRegular', sans-serif;
    clear: left;
    float: right;
    margin: 10px 20px 0px 0px;
}

/* social icons */
#social {  margin: 30px auto 5px; }
#icons a {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1.0;
}
#icons a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.copyright { 
	font-size: 13px;
	margin-top: 80px;
	text-align: center; 
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
    padding: 10px 0;
	color: rgba(0,0,0,0.6);
}

/***************************************************
	05. KEYFRAMES
***************************************************/
/**/
@-webkit-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }

    20%,75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }

    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        -webkit-transform: scale(1.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes fadeInBack {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    50% {
        opacity: 0.4;
        -webkit-transform: scale(2);
    }

    100% {
        opacity: 0.2;
        -webkit-transform: scale(5);
    }
}

@-webkit-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
    }
}
/**/
@-moz-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }

    20%,75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -moz-transform: scale(0);
    }
}

@-moz-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }
}

@-moz-keyframes fadeInBack {
    0% {
        opacity: 0;
        -moz-transform: scale(0);
    }

    50% {
        opacity: 0.4;
        -moz-transform: scale(2);
    }

    100% {
        opacity: 0.2;
        -moz-transform: scale(5);
    }
}

@-moz-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -moz-transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1) rotate(0deg);
    }
}
/**/
@keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }

    20%,75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        transform: scale(0);
    }
}

@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }

    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
}

@keyframes fadeInBack {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 0.4;
        transform: scale(2);
    }

    100% {
        opacity: 0.2;
        transform: scale(5);
    }
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/***************************************************
	06. MEDIA QUERIES
***************************************************/
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
.strip { padding: 60px 0 0px; }
.strip h2 { font-size: 50px; line-height: 60px; }
.block, .block3{ text-align: left; }
.block2, js.gallery{ padding-bottom: 0px; }
.clr{ padding-top: 5px; }
#space, #space2{ position: relative;  width: 100%; padding:30px 0 0; }
.quote-wrap {width:100%; margin:0 0; padding: 0 0 20px 0; }
.quote-wrap p{ margin: 0 0; text-align: left; }
.quote-wrap blockquote { padding-top: 20px; }
.quote blockquote:after, .quote blockquote:before { display:none; }
.quote blockquote p { line-height:30px; font-size: 16px; }

/* === Countdown === */
.counter { margin: 0px auto 100px auto; width: 100%; border: 0 none; }
.countdown li {
    margin: 0px 2px 2px 0px;
    height: 43px;
	width:47.6%;
}
.number { margin: 0px 0px; font-size: 50px; line-height: 0px; }
.time { font-size: 11px; margin-top: 0px; text-align:center; width: 100%; }
/* === Email Contact === */
.details {
	width: 100%;
   padding: 5px 0px 30px 0px;
}
input#email {
	width: 100%;
	padding: 0px 0px;
	margin-right: 0px;
    text-align:center;
}
input#submit {
	width:100%;
    height: 43px;
	padding: 0px 15px 0 15px;
}
.error { text-align:center; float:none; margin: 10px 0px 0px; }
.copyright {  margin-top: 20px; }
.success { text-align:left; }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (width: 480px) and (max-width: 767px) {
.strip h2 { line-height: 60px; font-size: 80px;  width: 100%; }
.strip { padding:70px 0 0px; }
/* === Countdown === */
.counter {
    margin: 0px auto 20px auto;
    text-align: center;
    width:95%;
	border:0px solid #aaa;
}
.countdown li {
    margin: 5px 0px 0px 1px;
	width:63px;
    padding-top: 32px;
}
.number { font-size: 45px; line-height: 5px; }
.time { font-size: 11px; margin-top: 12px; width: 63px; }
/* === Email Contact === */
.details { width: 100%; }
input#email {
	width: 100%;
	padding: 0px 0px;
	margin-right: 0px;
	text-align:center;
}
input#submit { width:100%; padding: 0px 15px 0 15px; }
.error { text-align:center; float:none; margin: 10px 0px 0px; }
}
/* iPad top pic adjustments*/
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
.trans{  background:  url(../images/transparent.gif) repeat;  height:507px;  }
}
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {   
.trans{  background:  url(../images/transparent.gif) repeat;  height:672px;  } 
}