/*-- 


AUTHOR   : SimplePixel


URL      : http://themeforest.net/user/SimplePixel


TEMPLATE : Heloo - Responsive Coming Soon Template


VERSION  : 1.0





TABLE OF CONTENTS


1.0 basic style


2.0 choose demo


3.0 typography


4.0 buttons


5.0 forms


6.0 sections


7.0 preloader


8.0 home section 


    8.1 countdown


9.0 about section


    9.1 benefit


10.0 services section


    10.1 services reveal delays


11.0 works section


    11.1 work button (link and view image)


    11.2 work reveal delays


12.0 subscribe section


13.0 google map section


14.0 contact section


     14.1 contact details


     14.2 contact form


15.0 footer section


     15.1 social media link


16.0 style for tablet landscape


17.0 style for small devices


18.0 style for tablet portrait


--*/


 


/*-- ========================================= --


	1.0 BASIC STYLE


/*-- ========================================= --*/


html, body{


	-webkit-font-smoothing:antialiased;


    -moz-osx-font-smoothing:grayscale;


	margin:0px;


	padding:0px;


	width:100%;


	height:100%;


	font-family:'Raleway', sans-serif;


}


a{


	text-decoration:none;


	outline:none;


	border:none;


	background:none;


}


.centering-x{


	position:absolute;


	display:inline-block;


	left:50%;


	-webkit-transform: translateX(-50%);


	-moz-transform: translateX(-50%);


	-o-transform: translateX(-50%);


	transform: translateX(-50%);


}


.centering-y{


	position:absolute;


	display:inline-block;


	top:50%;


	-webkit-transform: translateY(-50%);


	-moz-transform: translateY(-50%);


	-o-transform: translateY(-50%);


	transform: translateY(-50%);


}


.centering-xy{


	position:absolute;


	display:inline-block;


	top:50%;


	left:50%;


	-webkit-transform: translate3d(-50%, -50%, 0);


	-moz-transform: translate3d(-50%, -50%, 0);


	-o-transform: translate3d(-50%, -50%, 0);


	transform: translate3d(-50%, -50%, 0);


}


.separator-zigzag-dark{


	display:block;


	width:100%;


	height:20px;


	background:url(../img/zigzag_dark.svg) no-repeat;


	background-size:40px auto;


	background-position:center;


}


.animated{


	visibility:hidden;


}





/*-- ========================================= --


	2.0 CHOOSE DEMO STYLE


/*-- ========================================= --*/ 


.choose-demo-container{


	display:inline-block;


	text-align:center;


	padding:100px 0px 0px 0px;


}


.choose-demo-container .row{


	margin-top:0px;


}


.choose-demo-container .demo{


	display:inline-block;


	text-align:center;


	margin:0px;


	height:280px;


	margin-bottom:100px;


}


.choose-demo-container .demo a img{


	display:inline-block;


	max-width:100%;


	height:auto;


	opacity:1;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.choose-demo-container .demo a span{


	text-transform:uppercase;


	letter-spacing:1px;


	color:#535353;


	font-size:16px;


	font-weight:700;


	width:100%;


	display:block;


	margin-top:10px;


	text-align:center;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.choose-demo-container .demo a:hover img{


	opacity:0.7;


}


.choose-demo-container .demo a:hover span{


	margin-top:20px;


}





/*-- ========================================= --


	3.0 TYPOGRAPHY


/*-- ========================================= --*/


h1, h2, h3, h4, h5, h6{


	font-family:'Raleway', sans-serif;


	font-weight:400;


	margin:0px;


}


p{


	font-family:'Raleway', sans-serif;


	font-weight:400;


	margin:0px;


	line-height:32px;


	letter-spacing:1px;


}


h1{


	font-size:64px;


}


.quotes{


	font-size:18px;


	font-weight:400;


	letter-spacing:1px;


	font-style:italic;


	


}


.quotes span.quotes-text{


	width:100%;


	display:block;


	padding:0px 0px 0px 20px;


	line-height:36px;


}


.quotes span.quotes-text::before,


.quotes span.quotes-text::after


{


	content:'\f10d';


	font-family:'FontAwesome';


	position:absolute;


	display:inline-block;


	font-size:14px;


	margin-top:-2px;


	margin-left:-20px;


	width:20px;


}


.quotes span.quotes-text::after{


	content:'\f10e';


	margin-left:8px;


}





/*-- ========================================= --


	4.0 BUTTONS


/*-- ========================================= --*/


.button-regular{


	position:relative;


	display:inline-block;


	cursor:pointer;


	outline:none;


	margin:0px;


	width:200px;


	text-align:center;


	line-height:46px;


	height:50px;


	border:2px solid white;


	overflow:hidden;


	background:none;


	color:#890a0a;


	font-size:13px;


	font-weight:700;


	letter-spacing:2px;


	text-transform:uppercase;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


	transform:translate(0,0);


	-webkit-transform:translate(0,0);


	-moz-transform:translate(0,0);


	-o-transform:translate(0,0);


	-ms-transform:translate(0,0);


}


.button-regular::after{


	content:'';


	position:absolute;


	display:block;


	top:-10px;


	left:0px;


	width:100%;


	height:150%;


	z-index:-1;


	background:white;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.button-regular:hover::after{


	top:100%;


}


.button-regular i{


	display:inline-block;


	color:#890a0a;


	font-size:20px;


	margin:-4px -3px 0px 5px;


	vertical-align:middle;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.button-regular:hover,


.button-regular:hover i


{


	color:white;


}





/*-- ========================================= --


	5.0 FORMS


/*-- ========================================= --*/


::-webkit-input-placeholder{


	color: #890a0a;


	text-align:left;


}


:-moz-placeholder{


	color: #890a0a;


	text-align:left;


}


::-moz-placeholder{


	color: #890a0a;


	text-align:left;


}


:-ms-input-placeholder{


	color: #890a0a;


	text-align:left;


}


input[type="text"],


input[type="email"],


textarea


{


	border:none;


	outline:none;


	background:none;


	padding:0px;


	color:#890a0a;


	font-weight:400;


	font-size:14px;


	width:100%;


	overflow:hidden;


}


.contact-form-container input[type="text"],


.contact-form-container input[type="email"],


textarea


{


	border:1px solid #e8e8e8;


	color:#890a0a;


	height:50px;


	padding:0px 20px 0px 20px;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


textarea{


	height:150px;


	resize:none;


	padding-top:10px;


}


label.loading-subscribe, 


label.subscribe-notif-success, 


label.subscribe-notif-error, 


label.error, 


label.loading-contact, 


label.contact-notif-success, 


label.contact-notif-error{


	position:relative;


	float:left;


	width:100%;


	text-align:center;


	margin:10px 0px 5px 0px;


	color:#890a0a;


	font-weight:400;


	font-size:13px;


	display:none;


}


label.contact-notif-error{


	display:block;


}


label.loading-contact, 


label.contact-notif-success, 


label.contact-notif-error{


	text-align:center;


	margin:0px 0px 10px 0px;


}


label.loading-subscribe, 


label.loading-contact{


	padding-left:20px;


}


label.loading-subscribe:before, 


label.loading-contact:before{


	position:absolute;


	left:50%;


	margin-left:-45px;


	transform:translateX(-50%);


	-webkit-transform:translateX(-50%);


	font-family:'FontAwesome';


	content:'\f021';


	


	/*-- rotating animation --*/	


	-webkit-animation: spin 1.5s linear 0s infinite;


	-moz-animation: spin 1.5s linear 0s infinite; 


	animation: spin 1.5s linear 0s infinite;


}


label.loading-contact:before{


	display:inline-block;


	left:auto;


	margin-left:-22px;


}


label.subscribe-notif-error:before, 


label.error:before, 


label.contact-notif-error:before{


	font-family:'FontAwesome';


	content:'\f00d';


	margin-right:10px;


}


label.subscribe-notif-success:before, 


label.contact-notif-success:before{


	font-family:'FontAwesome';


	content:'\f00c';


	margin-right:10px;


}


label.subscribe-notif-success, 


label.contact-notif-success{


	color:#8ce556;


}


label.subscribe-notif-error, 


label.error,


label.contact-notif-error{


	color:#eb7171;


}





/*-- ========================================= --


	6.0 SECTIONS


/*-- ========================================= --*/


section{


	width:100%;


	position:relative;


	float:left;


	display:block;


}


section .section-title-1,


section .section-title-2,


section .section-title-3


{


	font-size:28px;


	font-weight:400;


	color:#dccc98;


}


section .section-title-2,


section .section-title-3


{


	position:relative;


	float:left;


	text-align:center;


	padding:0px;


	height:100%;


}


section .section-title-1{


	background:#890a0a;


	height:250px;


}


section .section-title-1 .title-container{


	display:inline-block;


	width:auto;


	bottom:40px;


}


section .section-title-3{


	height:auto;


}





section .section-title-2::before{


	content:'';


	position:absolute;


	display:block;


	left:0px;


	top:0px;


	width:100%;


	height:100%;


	opacity:1;


	background:#890a0a;


}


section .section-title-2 img{


	width:100%;


	height:auto;


}


section .section-title-2 .title-container{


	position:absolute;


	display:block;


	margin-top:-5px;


	width:100%;


	-webkit-backface-visibility:hidden;


}





section .section-title-1 span{


	display:block;


}


section .section-title-2 span,


section .section-title-2 span.title-highlight,


section .section-title-3 span,


section .section-title-3 span.title-highlight


{


	margin-top:1px;


	display:inline-block;


}


section .section-title-1 span.title-highlight,


section .section-title-2 span.title-highlight,


section .section-title-3 span.title-highlight


{


	width:230px;


	text-transform:uppercase;


	text-align:center;


	margin-top:5px;


	padding:5px 0px 5px 0px;


	border:2px solid #dccc98;


}


section .section-title-3 span.title-highlight{


	min-width:220px;


	width:auto;


	margin-left:7px;


}





/*-- ================================================= --


	7.0 PRELOADER


/*-- ================================================= --*/


.preloader{


	position:fixed;


	width:100%;


	height:100%;


	z-index:100;


	background:#e0e0e0;


	visibility:visible;


}


.preloader img{


	width:40px;


	height:auto;


}





/*-- ========================================= --


	8.0 HOME SECTION


/*-- ========================================= --*/


.home-section{


	z-index:6;


}


.home-section::before{


	position:absolute;


	display:block;


	content:'';


	top:0px;


	width:100%;


	height:100%;


	-webkit-backface-visibility:hidden;


	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */


	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */


	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */


	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */


	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */


}


.home-section,


.home-section > .container,


.home-section > .container > div,


.home-section .right-side,


.home-section .left-side


{


	height:100%;


}


.home-section .bg-container,


.home-section .bg-container-kenburns,


.home-section .bg-container-parallax,


.home-section .bg-container-youtube


{


	position:absolute;


	display:block;


	width:100%;


	height:100%;


	overflow:hidden;


	z-index:-1;


}


.home-section .bg-container-parallax{


	background:url(img/slideshow/slide2.jpg) no-repeat;


	background-position:50% -100px;


	background-size:cover;


	z-index:-1;


}


.home-section img.logo{


	display:block;


	margin-top:30px;


	width:115px;


	height:115px;


}


.home-section .centering-y{


	left:0px;


}


.home-section .coming-soon{


	display:inline-block;


	width:100%;


	margin-top:10px;


	padding:0px;


	color:white;


	letter-spacing:5px;


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}


.home-section p.coming-soon-desc{


	margin-top:30px;


	font-size:16px;


	color:white;


	font-weight:400;


	animation-delay:1s;


	-webkit-animation-delay:1s;


	-moz-animation-delay:1s;


	-ms-animation-delay:1s;


	-o-animation-delay:1s;


}


.home-section .button-regular{


	margin-top:39px;


	animation-delay:2s;


	-webkit-animation-delay:2s;


	-moz-animation-delay:2s;


	-ms-animation-delay:2s;


	-o-animation-delay:2s;


}


.home-section .centering-y{


	padding:0px 15px 0px 0px;


}





/*-- ============= 8.1 COUNTDOWN =============== --*/


.right-side{


	padding-right:0px;


	animation-delay:1.5s;


	-webkit-animation-delay:1.5s;


	-moz-animation-delay:1.5s;


	-ms-animation-delay:1.5s;


	-o-animation-delay:1.5s;


}


.countdown-container{


	text-align:center;


	-webkit-backface-visibility:hidden;


}


.countdown-container .dash{


	display:inline-block;


	float:right;


	width:auto;


	margin:0px 0px 20px 20px;


}


.countdown-container .digit{


	font-family: 'Lato', sans-serif;


	display:inline-block;


	font-size:54px;


	font-weight:400;


	height:80px;


	width:80px;


	overflow:hidden;


	margin:0px 0px 0px -2px;


	padding:0px;


	color:white;


	border:2px solid white;


	line-height:74px;


}


.countdown-container .digit:first-child{


	margin-left:0px;


}


.countdown-container .dash_title{


	width:100%;


	display:block;


	color:#111111;


	font-size:16px;


	font-weight:400;


	letter-spacing:1px;


	margin:-7px 0px 0px 0px;


	padding:10px 0px 10px 0px;


	background:rgba(255,255,255,1);


	border:2px solid white;


}





/*-- ========================================= --


	9.0 ABOUT SECTION


/*-- ========================================= --*/


.about-section{


	padding:0px 0px 150px 0px;


	height:auto;


	border-bottom:1px solid #890a0a;


	background:#f8f8f8;


	overflow-x:hidden;


	z-index:5;


}


.about-section > .container{


	padding-left:30px;


}


.about-section .separator-zigzag-dark{


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}


.about-section p.quotes{


	color:#890a0a;


	margin:110px 0px 30px 0px;


}


.about-section p.about-desc{


	margin-top:30px;


	font-size:14px;


	color:#890a0a;


	animation-delay:1s;


	-webkit-animation-delay:1s;


	-moz-animation-delay:1s;


	-ms-animation-delay:1s;


	-o-animation-delay:1s;


}


/*-- ================ 9.1 BENEFIT ================ --*/


.benefit-container{


	position:relative;


	float:left;


	display:block;


	margin-top:35px;


	width:100%;


	height:auto;


	text-align:center;


}


.benefit-container .benefit{


	width:230px;


	height:145px;


	cursor:pointer;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;	


}


.benefit-container .benefit-left{


	position:relative;


	float:left;


	animation-delay:1.5s;


	-webkit-animation-delay:1.5s;


	-moz-animation-delay:1.5s;


	-ms-animation-delay:1.5s;


	-o-animation-delay:1.5s;


}


.benefit-container .benefit-right{


	position:relative;


	float:right;


	animation-delay:2.5s;


	-webkit-animation-delay:2.5s;


	-moz-animation-delay:2.5s;


	-ms-animation-delay:2.5s;


	-o-animation-delay:2.5s;


}


.benefit-container .benefit-center{


	display:inline-block;


	animation-delay:2s;


	-webkit-animation-delay:2s;


	-moz-animation-delay:2s;


	-ms-animation-delay:2s;


	-o-animation-delay:2s;


}


.benefit .top,


.benefit .bottom{


	position:absolute;


	display:block;


	width:230px;


	height:145px;


	border:1px solid #890a0a;


	text-align:center;


}


.benefit .top{


	z-index:2;


	background:#890a0a;


}


.benefit .top .icon{


	display:block;


	margin-top:28px;


	color:#dccc98;


	font-size:45px;


}


.benefit .top .name{


	display:block;


	margin-top:20px;


	color:#dccc98;


	font-size:16px;


	font-weight:700;


	letter-spacing:1px;


	text-transform:uppercase;


}


.benefit .bottom{


	top:0px;


	z-index:1;


	background:#844646;


	border:none;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;	


}


.benefit .bottom p.benefit-desc{


	width:100%;


	left:0px;


	color:#dccc98;


	font-weight:200;


	font-size:12px;


	letter-spacing:0.5px;


	text-align:center;


	padding:0px 10px 0px 10px;


}


.benefit:hover .bottom{


	top:142px;


}





/*-- ========================================= --


	10.0 SERVICES SECTION


/*-- ========================================= --*/


.service-section{


	padding:0px 0px 150px 0px;


	height:auto;


	background:#f8f8f8;


	border-bottom:1px solid #890a0a;


	z-index:4;


}


.service-section > .container{


	padding-left:30px;


}


.service-section p.quotes{


	color:#890a0a;


	margin:110px 0px 30px 0px;


}


.service-section .separator-zigzag-dark{


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}


.service-container{


	width:100%;


	display:block;


	margin-top:40px;


}


.service{


	background:none;


	border:none;


	box-shadow:none;


}


.service-heading{


	position:relative;


	display:block;


	height:60px;


	border:1px solid #890a0a;


}


.service-heading .icon{


	position:absolute;


	display:inline-block;


	text-align:center;


	width:60px;


	height:59px;


	line-height:59px;


	background:#890a0a;


	color:#dccc98;


	font-size:26px;


}


.service-heading .heading-title{


	position:absolute;


	display:inline-block;


	width:100%;


	padding-left:80px;


}


.service-heading .heading-title a{


	display:block;


	color:#890a0a;


	font-size:16px;


	font-weight:700;


	letter-spacing:1px;


	text-transform:uppercase;


	text-decoration:none;


	line-height:59px;


}


.service-heading .heading-title a::after,


.service-heading .heading-title a.collapsed::after


{


	content:'\f106';


	font-family:'FontAwesome';


	position:absolute;


	display:inline-block;


	right:15px;


	color:#890a0a;


	font-size:22px;


}


.service-heading .heading-title a.collapsed::after{


	content:'\f107';


}


.service-content{


	position:relative;


	width:100%;


	padding:0px 0px 0px 61px;	


}


.service-content .panel-body{


	color:#890a0a;


	font-size:16px;


	font-weight:400;


	letter-spacing:1px;


	background:#fdf5e2;


	border:1px solid #890a0a;


	padding:20px;


	line-height:32px;


	margin-top:-1px;


	opacity:0;


	-webkit-backface-visibility:hidden;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.service-content.in .panel-body{


	opacity:1;	


}


/*-- ============== 10.1 SERVICES REVEAL DELAYS =============== --*/


.service-1{


	animation-delay:1s;


	-webkit-animation-delay:1s;


	-moz-animation-delay:1s;


	-ms-animation-delay:1s;


	-o-animation-delay:1s;


}


.service-2{


	animation-delay:1.5s;


	-webkit-animation-delay:1.5s;


	-moz-animation-delay:1.5s;


	-ms-animation-delay:1.5s;


	-o-animation-delay:1.5s;


}


.service-3{


	animation-delay:2s;


	-webkit-animation-delay:2s;


	-moz-animation-delay:2s;


	-ms-animation-delay:2s;


	-o-animation-delay:2s;


}


.service-4{


	animation-delay:2.5s;


	-webkit-animation-delay:2.5s;


	-moz-animation-delay:2.5s;


	-ms-animation-delay:2.5s;


	-o-animation-delay:2.5s;


}


.service-5{


	animation-delay:3s;


	-webkit-animation-delay:3s;


	-moz-animation-delay:3s;


	-ms-animation-delay:3s;


	-o-animation-delay:3s;


}


.service-6{


	animation-delay:3.5s;


	-webkit-animation-delay:3.5s;


	-moz-animation-delay:3.5s;


	-ms-animation-delay:3.5s;


	-o-animation-delay:3.5s;


}


/*-- ========================================= --


	11.0 WORKS SECTION


/*-- ========================================= --*/


.work-section{


	padding:0px 0px 0px 0px;


	height:auto;


	background:white;


	z-index:3;
	border-bottom:1px solid #890a0a;


}


.work-container{


	position:relative;


	display:block;


	width:100%;


	padding:0px;


}


.work{


	position:relative;


	float:left;


	display:block;


	padding:0px;


	overflow:hidden;


}


.work::before{


	content:'';


	position:absolute;


	display:block;


	left:0px;


	top:100%;


	width:100%;


	height:100%;


	opacity:0;


	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,17,17,0)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */


	background: -webkit-linear-gradient(top,  rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */


	background: -o-linear-gradient(top,  rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */


	background: -ms-linear-gradient(top,  rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* IE10+ */


	background: linear-gradient(to bottom,  rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* W3C */


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.work img{


	width:100%;


	height:auto;


}


.work .work-name{


	position:absolute;


	display:block;


	top:70%;


	-webkit-transform: translateY(-50%);


	-moz-transform: translateY(-50%);


	-o-transform: translateY(-50%);


	transform: translateY(-50%);


	width:100%;


	text-align:center;


	color:#dccc98;


	font-size:22px;


	font-weight:400;


	opacity:0;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.work .work-name .highlight{


	margin-left:5px;


	padding:5px 10px 5px 10px;


	border:2px solid white;


	color:#dccc98;


	font-weight:400;


}


/*-- =================== 11.1 WORK BUTTON (LINK AND VIEW IMAGE) ==================== --*/


.work .button-container{


	bottom:-50px;


	width:98px;


	height:50px;


	overflow:hidden;


	transition:bottom 0.3s ease;


	-webkit-transition:bottom 0.3s ease;


	-moz-transition:bottom 0.3s ease;


	-o-transition:bottom 0.3s ease;


	-ms-transition:bottom 0.3s ease;


}


.work .button-container a{


	position:relative;


	float:left;


	display:block;


	margin:50px 0px 0px 0px;


	background:none;


	color:#dccc98;


	height:50px;


	width:50px;


	text-align:center;


	line-height:50px;


	font-size:22px;


	border:2px solid white;


	-webkit-backface-visibility:hidden;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.work .button-container a:first-child{


	margin-right:-1px;


}


.work .button-container a:last-child{


	margin-left:-1px;


}


.work .button-container a.delay-1{


	transition-delay:0.1s;


	-webkit-transition-delay:0.1s;


	-moz-transition-delay:0.1s;


	-o-transition-delay:0.1s;


	-ms-transition-delay:0.1s;


}


.work .button-container a span{


	position:absolute;


	display:block;


	-webkit-backface-visibility:hidden;


	width:46px;


	line-height:46px;


	height:46px;


	z-index:1;


}


.work .button-container a::before{


	content:'';


	position:absolute;


	display:inline-block;


	left:0px;


	top:0px;


	width:100%;


	height:100%;


	background:white;


	z-index:0;


	-webkit-backface-visibility:hidden;


	transition:top 0.3s ease;


	-webkit-transition:top 0.3s ease;


	-moz-transition:top 0.3s ease;


	-o-transition:top 0.3s ease;


	-ms-transition:top 0.3s ease;


}


.work .button-container a:hover::before{


	top:50px;


}


.work .button-container a:hover{


	background:none;


	color:#dccc98;


}


.work:hover .work-name{


	opacity:1; 


	top:50%;


}


.work:hover::before{


	top:0%;


	opacity:1;


}


.work:hover .button-container{


	bottom:0px;


}


.work:hover .button-container a{


	margin-top:0px;


}


/*-- ========================== 11.2 WORK REVEAL DELAYS ======================= --*/


.work-2{


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}


.work-3{


	animation-delay:1s;


	-webkit-animation-delay:1s;


	-moz-animation-delay:1s;


	-ms-animation-delay:1s;


	-o-animation-delay:1s;


}


.work-4{


	animation-delay:1.5s;


	-webkit-animation-delay:1.5s;


	-moz-animation-delay:1.5s;


	-ms-animation-delay:1.5s;


	-o-animation-delay:1.5s;


}


.work-5{


	animation-delay:2s;


	-webkit-animation-delay:2s;


	-moz-animation-delay:2s;


	-ms-animation-delay:2s;


	-o-animation-delay:2s;


}


.work-6{


	animation-delay:2.5s;


	-webkit-animation-delay:2.5s;


	-moz-animation-delay:2.5s;


	-ms-animation-delay:2.5s;


	-o-animation-delay:2.5s;


}


.work-7{


	animation-delay:3s;


	-webkit-animation-delay:3s;


	-moz-animation-delay:3s;


	-ms-animation-delay:3s;


	-o-animation-delay:3s;


}


.work-8{


	animation-delay:3.5s;


	-webkit-animation-delay:3.5s;


	-moz-animation-delay:3.5s;


	-ms-animation-delay:3.5s;


	-o-animation-delay:3.5s;


}


.work-9{


	animation-delay:4s;


	-webkit-animation-delay:4s;


	-moz-animation-delay:4s;


	-ms-animation-delay:4s;


	-o-animation-delay:4s;


}


/*-- ========================================= --


	12.0 SUBSCRIBE SECTION


/*-- ========================================= --*/


.subscribe-section{


	padding:0px 0px 100px 0px;


	background:red;


	height:auto;


	background:#f3f3f3;

	border-bottom:1px solid #890a0a;

	z-index:2;


}


.subscribe-section > .container{


	padding-left:0px;


}


.subscribe-form-container{


	display:block;


	margin-top:0px;


	padding:0px;


	height:auto;


	animation-delay:1s;


	-webkit-animation-delay:1s;


	-moz-animation-delay:1s;


	-ms-animation-delay:1s;


	-o-animation-delay:1s;


}





.subscribe-desc{


	margin-top:100px;


	text-align:center;


	font-size:16px;


	font-weight:400;


	letter-spacing:1px;


	color:#890a0a;


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}





/*-- ========================================= --


	13.0 GOOGLE MAP SECTION


/*-- ========================================= --*/


.googlemap-section{


	padding:0px;


	height:300px;


	background:none;


	width:100%;


	position:relative;


	float:left;


	display:block;
	


}





/*-- ========================================= --


	14.0 CONTACT SECTION


/*-- ========================================= --*/


.contact-section{


	padding:0px 0px 150px 0px;


	height:auto;


	overflow-x:hidden;


	background:white;


	z-index:1;
	border-bottom:1px solid #890a0a;
	border-top:1px solid #890a0a;

}


.contact-section > .container{


	padding-left:30px;


}


p.contact-desc{


	margin:110px 0px 20px 0px;


	font-size:16px;


	color:#890a0a;


	letter-spacing:1px;


}


.contact-section .separator-zigzag-dark{


	animation-delay:2s;


	-webkit-animation-delay:2s;


	-moz-animation-delay:2s;


	-ms-animation-delay:2s;


	-o-animation-delay:2s;


}


/*-- ==================== 14.1 CONTACT DETAILS ==================== --*/


.details-container{


	position:relative;


	display:block;


	width:100%;


	margin-bottom:40px;


	text-align:center;


}


.details-container .details{


	width:230px;


	height:150px;


	border:1px solid #890a0a;


}


.details-container .details-left{


	position:relative;


	float:left;


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}


.details-container .details-right{


	position:relative;


	float:right;


	animation-delay:1.5s;


	-webkit-animation-delay:1.5s;


	-moz-animation-delay:1.5s;


	-ms-animation-delay:1.5s;


	-o-animation-delay:1.5s;


}


.details-container .details-center{


	display:inline-block;


	animation-delay:1s;


	-webkit-animation-delay:1s;


	-moz-animation-delay:1s;


	-ms-animation-delay:1s;


	-o-animation-delay:1s;


}


.details .details-content,


.details .details-icon


{


	position:relative;


	display:block;


	width:100%;


	height:100px;


}


.details .details-content span{


	width:100%;


	word-wrap:break-word;


	font-size:14px;


	color:#890a0a;


	letter-spacing:1px;


	font-weight:400;


	text-align:center;


	left:0px;


}


.details .details-icon{


	height:48px;


	background:#890a0a;


	text-align:center;


	line-height:58px;


}


.details .details-icon .icon{


	display:inline-block;


	color:#dccc98;


	font-size:22px;


}





/* -- ======================== 14.2 CONTACT FORM ======================== --*/


.contact-form-container{


	position:relative;


	display:block;


	width:100%;


	margin-top:40px;


	animation-delay:2.5s;


	color:#890a0a;


	-webkit-animation-delay:2.5s;


	-moz-animation-delay:2.5s;


	-ms-animation-delay:2.5s;


	-o-animation-delay:2.5s;


}


.contact-form-container > form > div{


	padding:0px;


	margin-bottom:60px;


}


.contact-form-container .form-name{


	position:absolute;


	display:block;


	top:50px;


	background:#890a0a;


	width:150px;


	height:35px;


	text-align:center;


	line-height:35px;


	font-weight:700;


	letter-spacing:2px;


	color:#dccc98;


	-webkit-backface-visibility:hidden;


	font-size:13px;


	text-transform:uppercase;


	transition:all 0.3s ease;


	-webkit-transition:all 0.3s ease;


	-moz-transition:all 0.3s ease;


	-o-transition:all 0.3s ease;


	-ms-transition:all 0.3s ease;


}


.contact-form-container .contact-message{


	top:150px;


}


.contact-form-container label.error{


	margin-bottom:-20px;


}


input.contact-name:focus,


input.contact-email:focus,


textarea.contact-message:focus


{


	padding-left:170px;


	border:1px solid #890a0a;


}


input.contact-name:focus ~ span.contact-name,


input.contact-email:focus ~ span.contact-email


{


	top:0px;


	height:50px;


	line-height:50px;


	color:white;


	background:#dccc98;


}


textarea.contact-message:focus ~ span.contact-message{


	top:0px;


	height:150px;


	line-height:150px;


	color:white;


	background:#dccc98


}


.contact-form-container .button-regular{


	float:right;


	border:2px solid #890a0a;


	color:#dccc98;


}


.contact-form-container .button-regular i{


	color:#dccc98;


}


.contact-form-container .button-regular:after{


	background:#890a0a;


}


.contact-form-container .button-regular:hover,


.contact-form-container .button-regular:hover i


{


	color:#dccc98;


}


.contact-form-container .contact-notif{


	position:relative;


	float:left;


	margin:-20px 0px 10px 0px;


	display:block;


	width:100%;


}


/*-- ========================================= --


	15.0 FOOTER SECTION


/*-- ========================================= --*/


footer{


	width:100%;


	position:relative;


	float:left;


	display:block;


	padding:150px 0px 150px 0px;


	height:auto;


	background:#890a0a;


	border-top:1px solid #dccc98;


	text-align:center;


}


footer img.logo{


	display:inline-block;


}


footer .social-media-container{


	position:relative;


	display:block;


	width:100%;


	margin-top:30px;


}


/*-- ===================== 15.1 SOCIAL MEDIA LINK ===================== --*/


.social-media-container a{


	-webkit-backface-visibility:hidden;


	color:#dccc98;


	font-size:19px;


	margin:0px 10px 0px 10px;


	opacity:1;


	transition:color 0.3s ease;


	-webkit-transition:color 0.3s ease;


	-moz-transition:color 0.3s ease;


	-o-transition:color 0.3s ease;


	-ms-transition:color 0.3s ease;


}


a.facebook{


	animation-delay:0.5s;


	-webkit-animation-delay:0.5s;


	-moz-animation-delay:0.5s;


	-ms-animation-delay:0.5s;


	-o-animation-delay:0.5s;


}


a.twitter{


	animation-delay:0.8s;


	-webkit-animation-delay:0.8s;


	-moz-animation-delay:0.8s;


	-ms-animation-delay:0.8s;


	-o-animation-delay:0.8s;


}


a.pinterest-p{


	animation-delay:1.1s;


	-webkit-animation-delay:1.1s;


	-moz-animation-delay:1.1s;


	-ms-animation-delay:1.1s;


	-o-animation-delay:1.1s;


}


a.tumblr-square{


	animation-delay:1.4s;


	-webkit-animation-delay:1.4s;


	-moz-animation-delay:1.4s;


	-ms-animation-delay:1.4s;


	-o-animation-delay:1.4s;


}


a.instagram{


	animation-delay:1.7s;


	-webkit-animation-delay:1.7s;


	-moz-animation-delay:1.7s;


	-ms-animation-delay:1.7s;


	-o-animation-delay:1.7s;


}


a.google-plus{


	animation-delay:2.0s;


	-webkit-animation-delay:2.0s;


	-moz-animation-delay:2.0s;


	-ms-animation-delay:2.0s;


	-o-animation-delay:2.0s;


}


.social-media-container a:hover{


	color:#9c9c9c;


}


footer p{


	margin-top:30px;


	font-size:13px;


	line-height:20px;


	color:#dccc98;


	font-weight:400;


	animation-delay:2s;


	-webkit-animation-delay:2s;


	-moz-animation-delay:2s;


	-ms-animation-delay:2s;


	-o-animation-delay:2s;


}


/*-- ===================================================== --*


	16.0 STYLE FOR TABLET LANDSCAPE


/*-- ===================================================== --*/


@media all and (min-width: 992px) and (max-width: 1199px){


	.countdown-container .digit{


		font-size:40px;


		height:65px;


		width:65px;


		line-height:60px;


	}


	section .section-title-1{


		height:230px;


	}


	section .section-title-1 .title-container{


		bottom:20px;


	}


	section .section-title-1 span.title-highlight,


	section .section-title-2 span.title-highlight,


	section .section-title-3 span.title-highlight


	{


		width:200px;


	}


	.benefit-container .benefit{


		width:190px;


	}


	.benefit .top,


	.benefit .bottom{


		width:190px;


	}


	.details-container .details{


		width:190px;


		height:150px;


	}


}





/*-- ===================================================== --*


	17.0 STYLE FOR SMALL DEVICES


/*-- ===================================================== --*/


@media all and (max-width: 1199px){


	/*-- bg parallax adjusment --*/


	.home-section .bg-container-parallax{


		background-size:auto;


	}


}


@media all and (max-width: 991px){


	section .section-title-1{


		height:230px;


	}


	section .section-title-1 .title-container{


		bottom:20px;


	}


	section .section-title-1 span.title-highlight,


	section .section-title-2 span.title-highlight,


	section .section-title-3 span.title-highlight


	{


		width:200px;


	}


	


	.home-section{


		display:inline-block;


		text-align:center;


		min-height:100%;


		height:auto;


		padding-bottom:60px;


	}


	.home-section > .container{


		padding:0px;


	}


	.home-section .centering-y{


		margin-top:60px;


		top:0%;


		left:0px;


		width:100%;


		padding:0px;


		position:relative;


		display:inline-block;


		-webkit-transform: translateY(0%);


		-moz-transform: translateY(0%);


		-o-transform: translateY(0%);


		transform: translateY(0%);


	}


	.home-section img.logo{


		display:inline-block;


		margin:60px 0px 0px 0px;


		width:115px;


		height:115px;


	}


	.home-section .left-side,


	.home-section .right-side


	{


		padding:0px;


		width:100%;


	}


	.countdown-container{


		display:inline-block;


		position:relative;


		margin-top:50px;


	}


	.countdown-container .dash{


		display:inline-block;


		float:none;


		width:auto;


		margin:0px 10px 20px 10px;


	}


	.countdown-container .digit{


		font-size:40px;


		height:70px;


		width:70px;


		line-height:64px;


	}


	.home-section .button-regular{


		margin-top:40px;


	}


	


	.about-section > .container,


	.service-section > .container,


	.subscribe-section > .container,


	.contact-section > .container


	{


		padding-left:15px;


	}


	.about-section p.quotes,


	.about-section p.about-desc,


	.service-section p.quotes,


	.subscribe-desc,


	.contact-desc


	{


		text-align:center;


	}


	.benefit-container .benefit,


	.benefit-container .benefit-left,


	.benefit-container .benefit-right,


	.benefit-container .benefit-center


	{


		position:relative;


		float:left;


		display:block;


		width:100%;


		margin:0px 0px 10px 0px;


	}


	.benefit .top,


	.benefit .bottom{


		width:100%;


	}


	.benefit-container .benefit:hover{


		height:290px;


	}


	.details-container .details{


		width:190px;


		height:150px;


	}


	.work-section{


		border-top:1px solid #e8e8e8;


	}


	.work-section .section-title-1{


		margin-bottom:120px;


	}


	.service-container .service{


		margin-bottom:10px;


	}


	.subscribe-form-container .subscribe-email{


		position:relative;


		float:left;


		display:block;


		padding:0px 20px 0px 20px;


	}


	.subscribe-form-container .subscribe-email:hover{


		padding-right:20px;


	}


	.subscribe-form-container .button-regular{


		position:relative;


		display:block;


		width:100%;


		float:left;


		margin-top:-1px;


	}


	.details-container .details{


		width:100%;


	}


	.details-container .details-left,


	.details-container .details-right,


	.details-container .details-center


	{


		position:relative;


		float:left;


		display:block;


		margin-bottom:10px;


	}


	.contact-section .separator-zigzag-dark{


		display:inline-block;


		margin-top:30px;


	}


	p.contact-desc{


		margin-bottom:30px;


	}


	input.contact-name:focus ~ span.contact-name,


	input.contact-email:focus ~ span.contact-email


	{


		top:50px;


		height:35px;


		line-height:35px;


	}


	textarea.contact-message:focus ~ span.contact-message{


		top:150px;


		height:35px;


		line-height:35px;


	}


	input.contact-name:focus,


	input.contact-email:focus,


	textarea.contact-message:focus


	{


		padding-left:20px;


	}


	.contact-form-container .button-regular{


		display:block;


		width:100%;


		margin-top:-5px;


	}


	.contact-form-container .form-wrapper{


		position:relative;


		float:left;


		display:block;


		width:100%;


	}


	label.error{


		margin:40px 0px 0px 0px;


	}


	section.googlemap-section{


		margin-top:30px;


	}


}


/*-- ===================================================== --*


	18.0 STYLE FOR TABLET PORTRAIT


/*-- ===================================================== --*/


@media all and (min-width: 768px) and (max-width: 991px){


	.countdown-container .dash{


		margin:0px 20px 40px 20px;


	}


	.benefit-container .benefit{


		width:220px;


		margin:0px;


	}


	.benefit-container .benefit:hover{


		height:145px;


	}


	.benefit-container .benefit-left{


		position:relative;


		float:left;


	}


	.benefit-container .benefit-right{


		position:relative;


		float:right;


	}


	.benefit-container .benefit-center{


		float:none;


		display:inline-block;


	}


	.benefit .top,


	.benefit .bottom{


		width:220px;


	}


	.subscribe-form-container .subscribe-email{


		position:absolute;


		display:block;


		padding:0px 190px 0px 20px;


		height:50px;


	}


	.subscribe-form-container .subscribe-email:focus{


		padding:0px 190px 0px 60px;


	}


	.subscribe-form-container .button-regular{


		margin-right:0px;


		float:right;


		margin-top:0px;


		width:170px;


	}


	.details-container .details{


		width:220px;


	}


	.details-container .details-left{


		position:relative;


		float:left;


	}


	.details-container .details-right{


		position:relative;


		float:right;


	}


	.details-container .details-center{


		float:none;


		display:inline-block;


	}


	.contact-section .separator-zigzag-dark{


		margin-top:0px;


	}


	label.error{


		margin:10px 0px 0px 0px;


	}


	input.contact-name:focus,


	input.contact-email:focus,


	textarea.contact-message:focus


	{


		padding-left:170px;


	}


	input.contact-name:focus ~ span.contact-name,


	input.contact-email:focus ~ span.contact-email


	{


		top:0px;


		height:50px;


		line-height:50px;


	}


	textarea.contact-message:focus ~ span.contact-message{


		top:0px;


		height:150px;


		line-height:150px;


	}


	.contact-form-container .button-regular{


		margin-top:20px;


	}




}