/* 

Template Name: Hex - Portfolio HTML Template
  
*/

/* -----------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------

* GENERAL SECTION
* SITE PRELOADER
* HEADER SECTION
* DEMO-PREVIEW-SECTION
* FOOTER SECTION




-------------------------------------------------------------

------------------------------------------------------------*/

/*----------------------------------------- GENERAL SECTION -------------------------------------------------*/


 @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.eot');
    src: url('../fonts/Gilroy%20Bold.html'), url('../fonts/Gilroy-Bold.html'),
        url('../fonts/Gilroy-Boldd41d.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Bold.woff') format('woff'),
        url('../fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
 


body,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #373737;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul > li {
	display: inline-block;
}
a:focus,
a:hover {
	text-decoration: none;
	outline: 0
}
img {
	max-width: 100%;
	height: auto
}
body,
html {
	height: 100%!important
}
body {
	font-family: 'Gilroy';
	overflow-x: hidden;
	overflow-y: scroll;
	background: #ffffff;
	text-shadow: none;
}

.section-padding {
	padding:120px 0px;
}



.pdt-30{padding-top:30px;}
.mt-30{margin-top:30px;}
.mt-50{margin-top:50px;}





/*-----------------------------------------HEADER SECTION -------------------------------------------------*/



.header-area {
	position: absolute;
	z-index: 8;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

a.site-logo {
position: absolute;
left: 0;
    right: 0;
    margin: 0 auto;
    width: 185px;
    height: auto;
}



/*----------------------------------------- HERO-IMAGE-BACKGROUND SECTION -------------------------------------------------*/

.hero-bg-wrapper,
.hero-bg-wrapper div {
	height: auto
}
.hero-bg-wrapper div.single-hero-bg-content-wrapper,
.hero-bg-wrapper div.single-hero-bg-content-wrapper div {
	height: auto
}
.single-hero-bg-item.hero-bg {
	background: url(../img/header-bg.jpg);
	background-color:#2c2c2c;
	height: 650px;
}


.single-hero-bg-item.hero-bg {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.hero-bg-wrapper .single-hero-bg-item {
	display: table;
	width: 100%;
	position: relative;
	z-index:2
}
.hero-bg-wrapper .single-hero-bg-item:after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: #1f1f1f;
opacity: .98;
z-index: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.single-hero-bg-content-wrapper {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	z-index: 2
}


.hero-bg-wrapper .single-hero-bg-content-wrapper h1 {
    position: relative;
	font-family: 'Gilroy';
    font-weight: 900;
	 width: 180px;
    height: 150px;
    line-height: 150px;
    color: #f26c4f;
    text-transform: uppercase;
    font-size: 4em;
    z-index: 1;
    margin: 50px auto;
    text-align: center;
    letter-spacing:5px;
    background: #fff;   
}



.hero-bg-wrapper .single-hero-bg-content-wrapper h3 {
    color: #fff;
    max-width: 100%;
    border: 0px;
    letter-spacing: 5px;
    text-transform: uppercase;
}


.single-hero-bg-content-wrapper p {
	width: 80%;
    margin: auto;
    max-width: 100%;
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: 300;
    color: #fff;   
}


/* ----------------------------------------- DEMO-PREVIEW-SECTION -----------------------------------------*/

.preview-bg.preview-padding {
    overflow: hidden;
}

figure.demo_preview {
position: relative;
margin:20px 0px;
z-index: 1;
transition: .5s;
}

figure.demo_preview:after {
    position: absolute;
    content: "";
    background: #f26c4f;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    opacity: 0;
    transition: .5s;
}

figcaption.caption {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top:-15px;
    bottom: 0;
	opacity:0;
	z-index: 2;
	transition: .5s;
}

figure figcaption h1 {
	font-family: 'Gilroy';
	font-weight:700;
    position: relative;
    color: #fff;
    text-transform: capitalize;
    text-align: center;
    font-size: 30px;
    letter-spacing:2px;
    margin-bottom: 40px;
    z-index: 1;
}

figcaption.caption a {
   position: relative;
    width: 160px;
    height: 50px;
    font-weight: 600;
    line-height: 50px;
    letter-spacing: 1px;
    text-align: center;
    display: block;
    background: #fff;
    top: 0;
    font-size: 15px;
    text-transform: uppercase;
    color: #f26c4f;
    border-radius:0px;
    z-index: 1;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

figure.demo_preview img {
position: relative;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
    
}

a.hero-btn {
width: 150px;
height: auto;
font-size: 20px;	
display: inline-block;
color: #fff;
background: transparent;
letter-spacing: 5px;
line-height: 45px;
margin-top: 100px;
border: 5px solid #fff;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
    
}



figure.demo_preview:hover figcaption.caption {
	opacity:1;
	top:0px;
	-webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

figure.demo_preview:hover:after {
	opacity:.88;
	-webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

figcaption.caption a:hover{
 background:#f26c4f;	
 color: #fff;
 border-radius:50px;
-webkit-transition: .5s;
-o-transition: .5s;
 transition: .5s;	
}

a.hero-btn:hover{
 background:#fff;	
 color: #f26c4f;
-webkit-transition: .5s;
-o-transition: .5s;
 transition: .5s;	
}




/* ----------------------------------------- FOOTER SECTION -----------------------------------------*/

.footer-area {
	position: relative;
	background: #1f1f1f;
	padding-right: 0;	
	z-index: 1;
}

.copyright p {
    margin: 50px auto;
    color: #999;
    letter-spacing: 2px;
}
.copyright a,
.scrolltop {
	color: #fff
}
.scrolltop {
	position: fixed;
    right: 105px;
    bottom: 0;
    width: 60px;
    height: 50px;
    font-size: 15px;
    text-align: center;
    background: #f26c4f;
    visibility: hidden;
    z-index: 7;
    padding-top: 15px;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .5s;
    transition: .5s;
    
	
}
.scrolltop.active {
	visibility: visible;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.scrolltop:hover {
	color: #fff;
	opacity:1;
}




/*============================== 
   Medium Layout: 1200px. 
================================*/

@media only screen and (max-width:1200) {
 .logo {
    width: auto;
} 
	

.hero-bg-wrapper .single-hero-bg-content-wrapper h1.slider-heading {
    font-size:4em;
}



	
}



/*============================== 

Tablet Layout: 768px.
   
================================*/

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


.hero-bg-wrapper .single-hero-bg-content-wrapper h1.slider-heading {
    font-size:4em;
}



.carousel-box p {
    font-size: 17px;
}





	}
/*===================== 

 Mobile Layout: 320px.

 ====================*/


@media only screen and (max-width:767px) {


 body {
    font-size: 13px;
}


.hero-bg-wrapper .single-hero-bg-content-wrapper h1.slider-heading {
    font-size: 3.5em;
}

.single-hero-bg-content-wrapper p {
    font-size: 15px;
    letter-spacing: 1px;

}


.copyright p {
    font-size: 13px;
}


	
	
}




/*===================== 

Wide Mobile Layout: 480px. 

 ====================*/

@media only screen and (max-width:767px) {

.xs-pdt-80{padding-top:80px;}
.copyright p {
    font-size: 13px;
}

.hero-bg-wrapper .single-hero-bg-content-wrapper h1 {
    font-size: 3em;
}


figure figcaption h1 {
    font-size: 25px;
}

.hero-bg-wrapper .single-hero-bg-content-wrapper h3 {
    font-size:20px;
}




}