/*
THEME NAME: Samir Mallal
THEME URI: http://samirmallal.com
DESCRIPTION: Samir Mallal custom theme
VERSION: 1.0
AUTHOR: Tudor Prisăcariu
AUTHOR URI: http://verde.io
TAGS: minimal, responsive, video, ajax
*/

/* CSS RESET */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,acronym,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img{display:block}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ul,li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;width:auto}
q:before,q:after{content:"";}
abbr,acronym {font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
legend{color:#000;}
a,a:hover,a:visited:hover,a:active,a:active:hover{outline:none}
a,a:hover,a:visited:hover,a:visited{text-decoration: none;}
::selection { background: transparent; }
::-moz-selection { background: transparent; }
::-webkit-selection { background: transparent; }
.text-box ::selection { background: #ccc; color: #fff; }
.text-box ::-moz-selection { background: #ccc; color: #fff; }
.text-box ::-webkit-selection { background: #ccc; color: #fff; }
.search-form ::selection { background: #ccc; color: #fff; }
.search-form  ::-moz-selection { background: #ccc; color: #fff; }
.search-form  ::-webkit-selection { background: #ccc; color: #fff; }


@font-face {
	font-family: 'Calibre';
	src: url('fonts/CalibreWeb-Semibold.eot');
	src: url('fonts/CalibreWeb-Semibold.eot') format('embedded-opentype'),
		 url('fonts/CalibreWeb-Semibold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Calibre';
	src: url('fonts/CalibreWeb-Regular.eot');
	src: url('fonts/CalibreWeb-Regular.eot') format('embedded-opentype'),
		 url('fonts/CalibreWeb-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Circular';
	src: url('fonts/CircularStd-Medium.eot');
	src: url('fonts/CircularStd-Medium.eot') format('embedded-opentype'),
		 url('fonts/CircularStd-Medium.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Fontello';
	src: url('fonts/fontello.eot');
	src: url('fonts/fontello.eot') format('embedded-opentype'),
		 url('fonts/fontello.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body
{
	overflow-x: hidden;
}

body
{
	font: 15px/26px 'Vollkorn', Georgia, serif;
	text-align: left;
	background: #0a0a0a;
	color: #fff;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

	html.no-mousehover body
	{
		-webkit-text-size-adjust:none;
	}

p:not(:last-child)
{
	margin-bottom: 26px;
}
	
p:empty,
.social-links br:last-child
{
	display: none;
}

a,
a:visited
{
	color: #111;
	cursor: pointer;
}

h1,
h2,
.about h3,
.contact h3,
h4,
.menu
{
	font-family: "Oswald", Helvetica, sans-serif;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	font-weight: 700;
}

h1
{
	letter-spacing: 12px;
    font-size: 56px;
    line-height: 64px;
}

.overlay h1
{
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 3px;
    padding: 39px 0 8px;
	margin-right: -3px;
	color: #fff;
}

h2
{
	font-size: 48px;
	line-height: 60px;
	letter-spacing: 8px;
}

h4
{
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 2px;
}

h5
{
	font-weight: normal;
}

.about h3,
.contact h3
{
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 6px;
}

.contact p,
.contact a,
.contact a:visited
{
	color: #666;
}

	.contact a,
	.contact a:visited
	{
		border-bottom: 1px solid #fff;
	}
	
	.mousehover .contact a:hover,
	.mousehover .contact a:visited:hover
	{
		border-bottom: 1px solid #ccc;
	}

a
{
	-webkit-transition: all .25s ease-out; 
	   -moz-transition: all .25s ease-out; 
	        transition: all .25s ease-out;
}

.img-holder
{
	overflow: hidden;
}

.img-holder img
{
	-webkit-transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
	   -moz-transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
		    transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
}

.img-holder,
.bar
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.loading img,
a.loading img
{
	opacity: 0;
}

.absolute
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

.full
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.fullscreen
{
	position: relative;
	width: 100%;
	height: 100vh;
}

.everything
{
	width: 100%;
}

.mousehover .accelerate
{
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Layout */

.intro-video
{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
}

	.intro-video h1
	{
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		text-align: center;
		margin: -32px -12px 0 0;
	}
	
	.no-mousehover .intro-video .video-holder
	{
		display: none;
	}

.home-work
{
	width: 100%;
	height: 75vh;
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
}

	.home-work:nth-child(2n+2)
	{
		background: #272727;
	}

.mousehover .pixel-overlay
{
	background-image: url("images/pattern.png");
	opacity: .25;
}

.info
{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 214px;
	margin-top: -107px;
	text-align: center;	
	color: #fff;
	cursor: pointer;
}

	.info h2
	{
		margin: 0 -6px 6px 0;
	}
	
	.info .subtitle
	{
		margin-bottom: 40px;
	}

	.info a,
	.info a:visited
	{
		color: #fff;
	}

.subtitle,
.read-more
{
	font-size: 24px;
    line-height: 36px;
    font-weight: 400;
	font-style: italic;
}

	.overlay .subtitle
	{
		opacity: .4;
		padding-bottom: 35px;
	}
	
	.read-more
	{
		padding: 35px 0;
		margin: 44px auto 0 auto;
		display: inline-block;
	}
	
	.read-more,
	.read-more:visited
	{
		color: #fff;
		opacity: .4;
	}

.play-button
{
	width: 72px;
    height: 72px;
    position: relative;
    border: 2px solid #fff;
    text-align: center;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    cursor: pointer;

    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

	.play-button:before
	{
		position: absolute;
	    top: 50%;
	    left: 50%;
	    margin: -14px 0 0 -8px;
	    content: "";
	    width: 0;
	    height: 0;
	    display: block;
	    border-style: solid;
	    border-width: 14px 0 14px 24px;
	    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;

		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

.menu
{
	width: 300px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -300px;
	background: #272727;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 3px;
}

	.menu a,
	.menu a:visited
	{
		color: #fff;
		opacity: .5;
		padding: 8px 0;
		display: block;
		margin-right: -3px;
	}
	
		.mousehover a:hover,
		.mousehover a:visited:hover
		{
			opacity: 1;
		}

.container
{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	overflow: hidden;
}

.padded
{
	padding: 180px 0;
}

.column
{
	float: left;
}

.text-column
{
	padding: 0 15px;
}

	.about .column .text-column,
	.overlay .centered p
	{
		opacity: .5;
	}
	
	.overlay .centered
	{
		width: 480px;
		margin: 0 auto;
		padding-bottom: 79px;
		text-align: left;
	}
	
	.overlay .centered a
	{
		opacity: 1;
		color: #fff;
		border-bottom: 1px solid #fff;
	}
	
	.overlay .centered h5
	{
		opacity: 1;
		color: #fff;
	}

.quarter
{
	width: 25%;
}

.third
{
	width: 33.333333%;
}

.half
{
	width: 50%;
}

.three-quarters
{
	width: 75%;
}

.about,
.footer
{
	background: #272727;
}

.contact
{
	background: #fff;
	color: #272727;
}

	.contact h4
	{
		margin-bottom: 13px;
	}
	
	.contact p:not(:first-child) + h5:before
	{
		content: "";
		width: 71px;
		height: 1px;
		background: #ccc;
		display: block;
		margin-bottom: 26px;
	}

.footer
{
	padding: 72px 0;
	text-align: center;
}

	.footer h4
	{
		opacity: .75;
	}

.overlay
{
	text-align: center;
}

.video-box
{
	/*cursor: pointer;*/
	width: 100%;
	padding: 0 91px;
	height: -webkit-calc(100vh - 300px);
	height: -moz-calc(100vh - 300px);
	height: calc(100vh - 300px);
	overflow: hidden;
	position: relative;
}
	
	.video-container
	{
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		position: relative;
		margin: 0 auto;
		background: #000;
	}
	
	.play-video
	{
		display: block;
		font-size: 48px;
		line-height: 48px;
		color: #fff;
		width: 100%;
		text-align: center;
		position: absolute;
		top: 50%;
		margin-top: -21px;
	}
	
	.video-box iframe,
	.video-box video,
	.video-box object
	{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100% !important;
		height: 100% !important;
		
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		   		box-sizing: border-box;
	}

.hamburger
{
	width: 91px;
	height: 83px;
	padding: 30px;
	display: block;
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
	cursor: pointer;
	z-index: 5;
}

	.ie9 .hamburger,
	.ie8 .hamburger,
	.ie9 .hamburger:before,
	.ie8 .hamburger:before
	{
		background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
	}

	.hamburger span
	{
		width: 31px;
		height: 3px;
		background: #fff;
		display: block;
		position: absolute;
		left: 30px;

		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);

		-webkit-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
		   -moz-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			 -o-transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			    transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}

	.hamburger .line1
	{
		top: 30px;
	}

	.hamburger .line2
	{
		top: 40px;
	}

	.hamburger .line3
	{
		top: 50px;
	}

	.closeburger .line1
	{
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 42px;
	}

	.closeburger .line2
	{
		opacity: 0;
	}

	.closeburger .line3
	{
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 42px;
	}

.overlay,
.no-mousehover .pixel-overlay
{
	background: #0a0a0a;
}

	.home-work .overlay,
	.no-mousehover .pixel-overlay
	{
		opacity: .35;
	}

	.menu-overlay .overlay
	{
		background: #aaa;
		opacity: .5;
	}

.menu-overlay
{
	opacity: 0;
	visibility: hidden;
}

.mousehover .parallax
{
	margin: -5vh 0;
	
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);	
}

.social
{
	overflow: hidden;
	background: #0a0a0a;
}

.thumb
{
	width: 16.666666%;
	float: left;
	position: relative;
	cursor: pointer;
}

	.thumb .mask {
	    width: 100%;
	    height: 0;
	    padding-bottom: 100%;
	    overflow: hidden;
	    position: relative;
	}
	
		
	.thumb .overlay
	{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(39, 39, 39, .5);
		color: #fff;
		overflow: hidden;
		opacity: 0;
		text-align: left;
	}
		
		.overlay-content
		{
			padding: 25px 30px;
			opacity: 0;
		}
		
		.thumb .overlay
		{	
			-webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
			   -moz-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
				    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		}
		
		.thumb h4 a,
		.thumb h4 a:visited
		{
			color: #fff;
		}
		
		.thumb p
		{
			opacity: .5;
		}
		
		.bottom-link
		{
			position: absolute;
			bottom: 25px;
			left: 30px;
		}
		
		.mousehover .thumb:hover .overlay,
		.source-twitter .overlay
		{
			opacity: 1;
		}
		
		.source-twitter .overlay
		{
			background: #0a0a0a;
		}

.disable-hover .thumb,
.disable-hover .video-box
{
	pointer-events: none !important;
}

.has-link
{
	cursor: pointer;
}

#wpadminbar
{
	display: none;
}

@media only screen and (min-width: 1921px)
{
	.thumb
	{
		width: 16.666666%;
	}
}

@media only screen and (max-width: 1439px)
{
	.thumb
	{
		width: 16.666666%;
	}
}

@media (orientation:landscape) {

	html.ipad.ios7 > body
	{
        width: 100%;
        height: 671px !important;
        position: relative;
    }

}

@media only screen and (min-width: 1025px)
{
	.mousehover .info:hover .play-button
	{
		-webkit-transform: scale(.95);
		transform: scale(.95);
		background: rgba(0, 0, 0, .1);
	}
	
		.mousehover .info:hover .play-button:before
		{
			-webkit-transform: scale(1.15);
			transform: scale(1.15);
		}
}

@media only screen and (max-width: 1024px)
{
	.padded
	{
		padding: 72px 0;
	}
	
	.footer
	{
		padding: 36px 0;
	}
	
	.padded h3
	{
		text-align: center;
		padding-bottom: 65px;
	}

	.padded .third
	{
		text-align: center;
	}
	
	.contact p:not(:first-child) + h5:before
	{
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1023px)
{
	.full-portrait
	{
		width: 100%;
	}
	
	.thumb
	{
		width: 16.666666%;
	}

}

@media only screen and (min-width: 768px)
{
	.blackburger span
	{
		background: #272727;
	}
	
	.closeburger span
	{
		background: #fff;
	}
}

@media only screen and (max-width: 767px)
{
	.quarter,
	.third,
	.half,
	.three-quarters
	{
		width: 100%;
	}
	
	.thumb
	{
		width: 25%;
	}
	
	.home-work
	{
		height: 0;
		padding-bottom: 80%;
	}
	
	h1,
	h2,
	.about h3,
	.contact h3	
	{
		font-size: 32px;
		line-height: 40px;
		letter-spacing: 3px;
	}
	
	.intro-video h1
	{
		margin: -20px -3px 0 0;
	}
	
	.overlay h1
	{
		padding: 43px 0 5px;
	}
	
	.padded h3
	{
		padding-bottom: 52px;
	}
	
	.subtitle,
	.read-more
	{
		font-size: 20px;
		line-height: 30px;
	}
	
	.play-button
	{
		width: 54px;
		height: 54px;
	}
	
		.info .play-button:before
		{
			-webkit-transform: scale(.75);
			transform: scale(.75);
			margin-left: -9px;
		}
	
	.info
	{
		height: 160px;
		margin-top: -80px;
	}
	
	.info .subtitle
	{
		margin-bottom: 25px;
	}
	
	.padded
	{
		padding: 59px 0;
	}
	
	.footer
	{
		padding: 30px 0;
	}
	
	.menu
	{
		width: 100%;
		right: -100%;
	}
	
	.container,
	.text-column
	{
		padding: 0 10px;
	}
	
	.text-column + .text-column
	{
		margin-top: 26px;
	}
	
	.hamburger
	{
		width: 50px;
		height: 50px;
		padding: 18px 16px;
	}
		
		.hamburger span
		{
			width: 18px;
			height: 2px;
			left: 16px;
		}
	
		.hamburger .line1
		{
			top: 18px;
		}
	
		.hamburger .line2
		{
			top: 24px;
		}
	
		.hamburger .line3
		{
			top: 30px;
		}
	
		.closeburger .line1
		{
			top: 26px;
		}
	
		.closeburger .line3
		{
			top: 26px;
		}
		
		.menu-bar
		{
			width: 100%;
			height: 50px;
			display: block;
			background: #0a0a0a;
			z-index: 4;
			position: fixed;
			top: 0;
			left: 0;
			
			-webkit-transform: translate3d(0, -50px, 0);
			transform: translate3d(0, -50px, 0);
			
			-webkit-transition: -webkit-transform .3s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
			        transition: transform .3s cubic-bezier(0.860, 0.000, 0.070, 1.000);
		}
		
			.visible-bar
			{
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
	
	.video-box
	{
		padding: 0;
		height: -webkit-calc(100vh - 290px);
	    height: -moz-calc(100vh - 290px);
	    height: calc(100vh - 290px);
	}
	
	.read-more
	{
		margin-top: 45px;
	}
	
	.overlay .centered
	{
		width: 100%;
		padding: 0 20px 45px;
	}
	
}

.fit-img img,
.fit-img video
{
	width: 100%;
	height: auto;
	position: absolute;
}

.mousehover .loading,
.mousehover .loading *,
.mousehover .fade-intro,
.mousehover .fade-intro *
{
	cursor: progress !important;
}

.no-transition,
.resizing *
{
	-webkit-transition: none 0s linear !important; 
	   -moz-transition: none 0s linear !important;
	    -ms-transition: none 0s linear !important;
	        transition: none 0s linear !important;
}

.no-animation
{
	-webkit-animation: none !important;
	   -moz-animation: none !important;
			animation: none !important;
}

.hidden
{
	display: none;
}

.zero-height
{
	height: 0;
	overflow: hidden;
	clear: both;
}

.transparent,
.fade-intro .intro-video,
.fade-intro .hamburger
{
	opacity: 0;
}

.fixed
{
	position: fixed;
	visibility: hidden;
}

.no-overflow,
.clear
{
	overflow: hidden;
}

.no-max-height
{
	max-height: none;
}

strong
{
	font-weight: bold;
}

.table
{
	display: table;
	width: 100%;
	height: 100%;
}

	.table-cell
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 100%;
		height: 100%;
	}