@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: "Reznik-Black";
  src: url("../fonts/Reznik-Black.otf") format("opentype");
}
@font-face {
  font-family: "Reznik-Bold";
  src: url("../fonts/Reznik-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Reznik-DemiBold";
  src: url("../fonts/Reznik-DemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Reznik-Light";
  src: url("../fonts/Reznik-Light.otf") format("opentype");
}
@font-face {
  font-family: "Reznik-Medium";
  src: url("../fonts/Reznik-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Reznik-Regular";
  src: url("../fonts/Reznik-Regular.otf") format("opentype");
}
  
html,
body * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: transparent;
}

header {
    width: 100%;
    top: 0px;
    padding: .25em;
    position: fixed;
    background-color: #393939;
    z-index: 3000;
	transition			: all 0.3s;
}

body {
    background: white;
}
header.opened{
	background-color	: rgba(117, 117, 117, 1.0);
}

#dvLoading {
   position				: fixed;
   z-index				: 10000;
   left					: 0;
   top					: 0;
   width				: 100%;
   height				: 100%;
   background-color		: #000;
}
#dvLoading img{
	display				: block;
	height				: 200px;
	position			: absolute;
	top					: calc(50vh - 100px);
	left				: calc(50vw - 100px);
}


.no-padding{
	padding	: 0px !important;
}
.site-logo {
    position: relative;
    padding-left: 1em;
    display: block;
    float: left;
    width: 85px;
}


.toggle-container {
    display: none;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width				: 33px;
    height				: 5px;
    background-color	: #fffefe;
    margin				: 6px 0;
    transition			: 0.4s;
    border-radius		: 2px;
}

.opened .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.opened .bar2 {opacity: 0;}

.opened .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.site-nav {
    position: relative;
    float: right;
    z-index: 400;
    top: 0;
    left: 0;
    display: block !important;
    padding	: 27px 20px 0 0;
    opacity: .95;
    background: none;
}

.site-nav ul {
    list-style-type: none;
    margin: 0;
    text-align: right;
}

.site-nav ul li {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1.5em;
}

.site-nav ul li a {
    font-size: .85em;
    padding-bottom: .5em;
    text-decoration: none;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: color .3s;
    transition: color .3s;
}

.site-nav ul li a:hover {
    outline			: none;
    border-bottom	: 1px solid white;
}

.hero {
    position: relative;
    height			: calc( 100vh - 80px);
    z-index			: 2000;
}

.hero img{
    height			: calc( 100vh - 80px) !important;
	width			: 100%;
}

.hero video{
    height			: calc( 100vh - 80px);
}

.hero .carousel img{
	object-fit		: cover;
}

.hero #primary-slideshow{
    width			: 100%;
    height			: 100%;
	display			: block;
}

.hero #primary-slideshow .slide{
    width: 100%;
    height: 100%;
}
.hero #primary-slideshow .slide img{
    width: 100%; 
    height: calc( 100vh - 80px);	
	object-fit: cover;
}
.hero #primary-slideshow .glyphicon-chevron-left{
	background-image: url('../images/primary_slideshow/slide_arrow_left.png');
	background-size: 100%;
	background-repeat: no-repeat;
	font-size: 0;
	width: 50px;
	height: 50px;
}
.hero #primary-slideshow .glyphicon-chevron-right{
	background-image: url('../images/primary_slideshow/slide_arrow_right.png');
	background-size: 100%;
	background-repeat: no-repeat;
	font-size: 0;
	width: 50px;
	height: 50px;
}
 
section.hero{
    padding-top		: 0px;
    margin-top		: 80px;
}
section{
    padding-top		: 60px;
}
section .section-inner{
	max-width		: 1500px;
	margin			: 0 auto;
}

#services {
    padding-top		: 60px;
    padding-bottom	: 60px;
}
#services .title h2{
	text-align		: left;
	border-left		: 8px solid #a0a29c;
	font-size		: 60px;
	font-family		: Reznik-DemiBold;
	font-size		: 60px;
	padding-left	: 15px;
    line-height		: 41px;
    height			: 44px;
    margin-top		: 0px;
    margin-bottom	: 60px;
}
#services{
	min-height			: 100vh;
	text-align		:center;
    background		: #d2d2d2;
}
#services .sentence h3{
    margin-top		: 110px;
    color			: #313131;
    text-shadow		: 1px 1px 3px #a0a29c;
}
#services .sentence span{
    line-height		: 20px;
    display			: block;
}
#services .item{
	height			: 475px;
	position		: relative
}
#services .item-container{
	padding			: 0px;
}
#services .item img{
	object-fit		: cover;
	width			: 100%;
	height			: 100%;
}
#services .services-items .item-container{
	width			: 20%;
	float			: left;
}
#services .services-items{
	display			: inline-block;
}
#services .services-items .item-container .text-container{
	position		: absolute;
	left			: 0;
	right			: 0;
	bottom			: 0;
    height			: 115px;
	background: -moz-linear-gradient(top, rgba(20,4,4,0.01) 0%, rgba(20,20,20,0.61) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03140404', endColorstr='#9c141414',GradientType=0 ); /* IE6-9 */
}
#services .services-items .item-container span{
	position		: absolute;
    bottom			: 22px;
    color			: #fff;
    left			: 12px;
    border-left		: 4px solid #a0a29c;
    padding-left	: 12px;
    font-size		: 19px;
    cursor			: pointer;
    font-family		: "Reznik-Bold";
    line-height		: 15px;
    height			: 15px;
}

#about {
    padding-top		: 60px;
    padding-bottom	: 60px;
}
#about .title h2{
	text-align		: left;
	border-left		: 8px solid #a0a29c;
	font-size		: 60px;
	font-family		: Reznik-DemiBold;
	font-size		: 60px;
	padding-left	: 15px;
    line-height		: 41px;
    height			: 44px;
    margin-top		: 0px;
    margin-bottom	: 60px;
}
#about{
	min-height			: 100vh;
	text-align		:center;
    background		: #bbbdbf;
}
#about .sentence h3{
    margin-top		: 110px;
    color			: #313131;
    text-shadow		: 1px 1px 3px #a0a29c;
}
#about .sentence span{
    line-height		: 20px;
    display			: block;
}
#about .item{
	height			: 375px;
	position		: relative
}
#about .item-container{
	padding			: 0px;
}
#about .item img{
	object-fit		: cover;
	width			: 100%;
	height			: 100%;
}
#about .about-items .item-container:first-child{
	width			: 50%;
}
#about .about-items .item-container video{
	height			: 100%;
    object-fit		: cover;
}
#about .about-items .item-container{
	width			: 25%;
	float			: left;
}
#about .about-items{
	display			: inline-block;
	width			: 100%;
}
#about .about-items .item-container .text-container{
	position		: absolute;
	left			: 0;
	right			: 0;
	bottom			: 0;
    height			: 115px;
	background: -moz-linear-gradient(top, rgba(20,4,4,0.01) 0%, rgba(20,20,20,0.61) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03140404', endColorstr='#9c141414',GradientType=0 ); /* IE6-9 */
}
#about .about-items .item-container span{
	position		: absolute;
    bottom			: 22px;
    color			: #fff;
    left			: 12px;
    border-left		: 4px solid #a0a29c;
    padding-left	: 12px;
    font-size		: 19px;
    cursor			: pointer;
    font-family		: "Reznik-Bold";
    line-height		: 15px;
    height			: 15px;
}

#about .section-inner{
	position		: relative;
}
#about .about-sentence-container{
	margin-top: -83px;
    margin-left: 479px;
    display: inline-table;
    margin-bottom: 45px;
    width: 820px;
    float: right;
}
#about .about-sentence-container .title h3{
	font-size: 25px;
    margin-right: 52px;
    margin-top: 3px;
}
#about .about-sentence-container .title{
	width			: 200px;
	float			: left;
	
}
#about .about-sentence-container .content{
	width: 617px;
    float: left;
    text-align: left;
    font-size: 18px;
}

#works{	
    background-color: #d2d2d2;
    padding-bottom	: 58px;
}

#works .title h2{
	text-align		: left;
	border-left		: 8px solid #a0a29c;
	font-size		: 60px;
	font-family		: Reznik-DemiBold;
	font-size		: 60px;
	padding-left	: 15px;
    line-height		: 41px;
    height			: 44px;
    margin-top		: 0px;
    margin-bottom	: 60px;
	color			: #333333;
}
#works .title a{ 
	color			: #333333;
}
#works .works-items .item-container{
	float			: left;
}
#works .works-items .item-container .item{
	position		: relative;
    display         : grid;
}
#works .works-items .item-container .text-container{
	position		: absolute;
	left			: 0;
	right			: 0;
	bottom			: 0;
    height			: 53px;
	background: -moz-linear-gradient(top, rgba(20,4,4,0.01) 0%, rgba(20,20,20,0.61) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03140404', endColorstr='#9c141414',GradientType=0 ); /* IE6-9 */
}
#works .works-items .item-container span{
	position		: absolute;
    bottom			: 22px;
    color			: #fff;
    left			: 12px;
    border-left		: 4px solid #a0a29c;
    padding-left	: 12px;
    font-size		: 19px;
    cursor			: pointer;
    font-family		: "Reznik-Bold";
    line-height		: 15px;
    height			: 15px;
}
#works .works-items video{
    width			: 100%;
    background-color: #060606;
    position		: relative;
    z-index			: 0;
}
#works .works-items img{
	width			: 100%;
}
#works .row-1{
	width			: 100%;		
    display			: inline-block;
    margin-bottom	: 30px;
}
#works .row-2{
	width			: 100%;		
    display			: inline-block;
    margin-bottom	: 30px;
}
#works .row-3{
	width			: 100%;		
    display			: inline-block;
    margin-bottom	: 30px;
}

#works .works-items .row-1 .item-container{
	width			: 50%;
}
#works .works-items .row-2 .item-container{
	width			: 50%;
}
#works .works-items .row-3 .item-container{
	width			: 25%;
}


#contact {
    padding-top		: 60px;
    padding-bottom	: 60px;
}
#contact .title h2{
	text-align		: left;
	border-left		: 8px solid #a0a29c;
	font-size		: 60px;
	font-family		: Reznik-DemiBold;
	font-size		: 60px;
	padding-left	: 15px;
    line-height		: 41px;
    height			: 44px;
    margin-top		: 0px;
    margin-bottom	: 60px;
}
#contact{
    min-height		: 530px;
	text-align		:center;
    background		: #bbbdbf;
}
#contact .contact-panel{
	
}
.btn{
	background-color: #757575 !important;
    color: #fff !important;
    border-radius: 0px !important;
}

/* Article Styling */ 
#article{	
    background-color: #bbbdbf;
    padding-bottom	: 295px;
	margin-top		: 80px;
}

#article .title h2{
	text-align		: left;
	border-left		: 8px solid #a0a29c;
	font-size		: 60px;
	font-family		: Reznik-DemiBold;
	font-size		: 60px;
	padding-left	: 15px;
    line-height		: 41px;
    height			: 44px;
    margin-top		: 0px;
    margin-bottom	: 60px;
}

#article .header-image-container img{
	width 			: 100%;
}

#article .header-image-container video{
	width 			: 100%;
}

#article .sentence-container{
	text-align 		: center;
	margin-top		: 75px;
}

#article .article-extra-items .row-1.two-items .item-container{
    width			: 50%;
    float			: left;
}
#article .article-extra-items .row-1.three-items .item-container{
    width			: 33%;
    float			: left;
}

#article .article-extra-items{
    display			: inline-block;
    width			: 100%;
    margin-top		: 75px;
}

#article .article-extra-items img{
    width			: 100%;
}
#article .article-extra-items .item{
    position		: relative;
}

#article .article-extra-items .item-container .text-container{
	position		: absolute;
	left			: 0;
	right			: 0;
	bottom			: 0;
    height			: 115px;
	background: -moz-linear-gradient(top, rgba(20,4,4,0.01) 0%, rgba(20,20,20,0.61) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(20,4,4,0.01) 0%,rgba(20,20,20,0.61) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03140404', endColorstr='#9c141414',GradientType=0 ); /* IE6-9 */
}
#article .article-extra-items .item-container span{
	position		: absolute;
    bottom			: 22px;
    color			: #fff;
    left			: 12px;
    border-left		: 4px solid #a0a29c;
    padding-left	: 12px;
    font-size		: 19px;
    cursor			: pointer;
    font-family		: "Reznik-Bold";
    line-height		: 15px;
    height			: 15px;
}

#article .article-extra-items .item-container .text-item .content{
    font-size		: 18px;
    padding-top		: 60px;
    padding			: 27px;
    padding-left	: 10px;
    padding-right	: 100px;
}

#article .article-extra-items .item-container .text-item .content .tittle{
	margin-top		: 40px;
	margin-bottom	: 20px;
}

.footer {
	height			: 80px;
    background-color: #393939;
	padding-top		: 15px;
}
.footer .center span{
	color: #989898;
    font-family: Reznik-Light;
    font-size: 13px;
    margin-top: 35px;
    display: block;
	text-align		: center;
}
.footer .center .to-top{
    background-image: url(../images/primary_slideshow/slide_arrow_left.png);
    background-size	: 100%;
    background-repeat: no-repeat;
    font-size		: 0;
    width			: 50px;
    height			: 50px;
    transform		: rotateZ(90deg);
    margin			: 0 auto;
    margin-bottom	: -5px;
    margin-top		: -52px;
	cursor			: pointer;
}
.footer .left{
	float		: left;
	width		: 30%;
}
.footer .right{
	float		: left;
	width		: 30%;
}
.footer .center{
	float		: left;
	width		: 40%;
}

.footer .left .email{
	margin-top	: 20px;
	display		: block;
	color		: #fff;
}
.footer .right .socials{
	margin-top 	: 12px;
	float		: right;
}
.footer .right .socials img{
	width		: 25px;
	margin-left	: 5px;
}

.mobile-hero{
	display		: none;
    height: calc( 100vh - 30px);
}
.mobile-hero img{
    height: 100%;
    object-fit: cover;
	width		: 100%;
}

.not-found img {
	max-width: 450px;
}

.404 .to-top {
	display: none !important;
}

/* The code below places the cat img and the text in the middle, also it fixes the issues for mobile display */

.not-found .flex-container {
	display: flex;
	text-align:center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top:100px;
	overflow:hidden;
}
.not-found  h1, .not-found h3 {
	color:white;
	margin-bottom:20px;
}
.not-found  h1 {
	font-family: Montserrat-Bold;
}
@media screen and (max-width: 1530px){
	section .section-inner{
		max-width		: 1300px;
	}
	#about .item{
		height			: 310px;
	}
}

@media screen and (max-width: 1330px){
	section .section-inner{
		max-width		: 1200px;
	}
	
	#about .item{
		height			: 290px;
	}
}

@media screen and (max-width: 1230px){
	section .section-inner{
		max-width		: 1100px;
	}
}

@media screen and (max-width: 1130px){
	section .section-inner{
		max-width		: 900px;
	}
	#services .services-items .item-container{
		width			: 33%;
	}
	#services .services-items .item-container:nth-child(4){
		margin-left		: 16.5%;
	}
	#services .item{
		height			: auto;
	}
	#about .about-sentence-container{
		width			: 100%;
		margin-top		: 0;
	}
	#about .about-items .item-container{
		width			: 33%;
	}
	#about .about-items .item-container:nth-child(4){
		margin-left		: 16.5%;
	}
	#about .item{
		height			: auto;
	}
	#about .about-items .item-container video{
		width			: 100%;
		height			: auto;
	}
	#about .about-items .item-container:first-child{
		width			: 100%;
	}
	#about .about-sentence-container .content{
		width			: 100%;
	}
	#article .article-extra-items .item-container .text-item .content{
		padding-right	: 10px;
	}
	section .section-inner{
		padding			: 0 20px;
	}
}

@media screen and (max-width: 992px){		
	#contact{
		text-align		:center;
	}
	#works .works-items .item-container .text-container{
		height			: 0px !important;
	}
}
@media screen and (max-width: 730px){
    #works .works-items video{
        height          : auto ;
    }
	#services .services-items .item-container{
		width			: 50%;
	}
	#services .services-items .item-container{
		margin-left		: 0px !important;
		margin-top		: 15px;
	}
	#about .about-items .item-container{
		width			: 50%;
	}
	#about .about-items .item-container{
		margin-left		: 0px !important;
		margin-top		: 15px;
	}
	
	.toggle-container {
		display			: inline-block;
		cursor			: pointer;
	}
	
	.site-nav ul {
		display			: none;
	}
	
	#works .row-1{
		margin-bottom	: 0px;
	}	
	#works .row-2{	
		margin-bottom	: 0px;
	}	
	#works .row-3{	
		margin-bottom	: 0px;
	}
	#works .works-items .item-container{
		margin-bottom	: 30px;
	}
	#works .works-items .row-1 .item-container{
		width			: 50%;
	}
	#works .works-items .row-2 .item-container{
		width			: 50%;
	}
	#works .works-items .row-3 .item-container{
		width			: 50%;
	}
	.toggle-container {
		right			: 21px;
		top				: 20px;
		position		: absolute;
	}
	.site-nav {
		float			: none; 
		z-index			: 400;
		top				: 99px;
		right			: 0;
		left			: 0;
		height			: 100%;
		padding			: 0;
		display			: table !important;
		width			: 100%;
	}
	.site-nav ul li {
		margin-left		: 0px;
		width			: 100%;
		text-align		: center;
		margin-bottom	: 20px;
		font-size		: 29px;
	}
	header.opened ul{
		display			: inline-block !important; 
		width			: 100%;
	}
	
	section .item-container span{
		font-size: 17px !important;
	}
	section .title h2{
		font-size		: 45px !important;
		margin-bottom	: 35px !important;
	}
	
	#article .article-extra-items .item-container .text-item .content .tittle{
		margin-top		: 15px;
	}
	.hero{
		display		: none !important;
	}
	.mobile-hero{
		display		: block !important;
		margin-top: 30px;
		background-color: black;
	}
}
@media screen and (max-width: 520px){
	section .item-container{
		width			: 100% !important;
	}
	.not-found img {
	 	 width: 100% ;	  	  
	}
}
@media screen and (max-width: 460px){
	#error-page .flex-container {
		margin-top: 25%;
	}
	#error-page .footer .center .to-top {
		display: none !important;
		visibility: hidden !important;
		height: 0px !important;
	}
	#error-page .not-found img {
		width: 50%;
	}
	#error-page .footer .right .socials img{
		width: 24px;
	}
	.footer .left .email{
		font-size: 14px;
	}
	.footer .center span{
		margin-top: 3px;
	}
}