/* 
Name: BETTER THINGS
Author: Ortak Sanatlar Creative + Media Agency
Author URI: http://ortaksanatlar.com/
Description: Created for Better Things
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0.0
Date: 19.05.2018
*/

/**	CSS RESET 	*************************/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,figure,menu{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,menu{display:block}a img{border:0} figure{position:relative}figure img{width:100%}body a{text-decoration:none;outline:none;cursor:pointer;}body ul, body ul li{list-style:none;}h1,h2,h3,h4,h5,h6{font-weight:normal;}img, object, embed{max-width:100%;height:auto;}

/**	FONT 		*************************/
@font-face 		{ font-family:"Lineto Brown"; src:url(fonts/lineto-brown-pro-bold.eot) format("embedded-opentype"), url(fonts/lineto-brown-pro-bold.woff) format("woff"), url(fonts/lineto-brown-pro-bold.ttf) format("truetype"); font-weight:700; font-style:normal; }
@font-face 		{ font-family:"Lineto Brown"; src:url(fonts/lineto-brown-pro-regular.eot) format("embedded-opentype"), url(fonts/lineto-brown-pro-regular.woff) format("woff"), url(fonts/lineto-brown-pro-regular.ttf) format("truetype"); font-weight:400; font-style:normal; }
@font-face 		{ font-family:"Lineto Brown"; src:url(fonts/lineto-brown-pro-thin.eot) format("embedded-opentype"), url(fonts/lineto-brown-pro-thin.woff) format("woff"), url(fonts/lineto-brown-pro-thin.ttf) format("truetype"); font-weight:100; font-style:normal; }

/**	BODY 		*************************/
body			{ color:#010101; background:#fff; font-family:"Lineto Brown", "sans-serif"; }
body input		{ margin:0; padding:0; color:#010101; background:#FFF; font-family:"Lineto Brown", "sans-serif"; border:none; outline:none; }

/**	HEADER 		*************************/
#header 		{ width:100%; height:80px; position:fixed; left:0; top:0; z-index:9; background:#fff; text-align:center; display:block; }
#header ul 		{ display: flex; width: 100%; align-items: center; justify-content: space-around;}
#header ul li 	{ margin-right:90px; width:auto; height:80px; position:relative; float:left; line-height:80px; font-size:1.25vw; display:inline-block; font-weight:400; }
#header ul li:last-child { margin-right:0; }
#header ul li a { color:#010101; display:block; font-family: "Space Mono", serif; font-weight: 400; font-style: normal; font-size: 20px; text-transform: uppercase}
#header ul li a img { margin-top:20px; height:40px; width:auto; display:inline-block; }

/**	MAIN 		*************************/
#main 			{ padding:80px 0; width:100%; position:relative; float:left; box-sizing:border-box; }
#main .row 		{ width:100%; position:relative; float:left; box-sizing:border-box; }
#main .row h2 	{ margin-bottom:80px; width:100%; position:relative; float:left; font-family: "Space Mono", serif; font-weight: 400; font-style: normal; font-size: 36px; text-transform: uppercase;}	
#main .row h2 a{color: #000; text-decoration: underline;}
#main ul 		{ display:inline-block; }
#main ul li 	{ margin-right:50px; width:auto; position:relative; float:left; display:inline-block; }
#main ul li:last-child { margin-right:0; }

#main .about 	{ padding:120px 0; text-align:center; }
#main .about .description { margin-bottom:15px; width:100%; position:relative; float:left; font-size: 20px; line-height: 25px; font-family: "Space Mono", serif; font-weight: 400; font-style: normal; text-transform: uppercase;}
#main .about .description:first-child {font-size: 50px; margin-bottom: 40px; font-family: "LTC Italian Old Style W03 Lt";}
#main .about .description:last-child { margin-bottom:0; }
#main .works 	{ padding:3px; background:#FFF; }
#main .works .nav { padding:40px 0; width:100%; position:sticky; float:left; display:block; top:78px; background:#FFF; z-index:2; line-height:15px; font-size:15px; font-weight:400; text-align:center; }
#main .works .nav a { color:#010101; display:inline-block; }
#main .works .nav a.active { color:#e0dfd7; }
#main .works .items .item { margin:0 3px 3px 0; width:calc((100% - 6px) / 3); position:relative; float:left; display:block; cursor:pointer; }
#main .works .items .item:nth-child(3n) { margin:0 0 3px; }
#main .works .items .item.dpn { display:none; }
#main .works .figure { width:100%; position:relative; float:left; display:block; z-index:1; }
#main .works .content { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; transition:all linear .2s; }
#main .works .item:hover .content { opacity:1; }
#main .works .content .inner { width:100%; position:absolute; top:50%; left:0; transform:translateY(-50%); text-align:center; }
#main .works .content .title {margin-bottom: 10px; width: 100%; position: relative; font-size: 32px; font-weight: 400; text-align: center; font-family: "Space Mono", serif; font-weight: 400; font-style: normal;}

#main .works .content:hover .title{text-decoration: underline}

#main .works .content .tags {width: 100%; font-size: 24px; text-transform: uppercase; text-align: center; font-family: "Space Mono", serif; font-weight: 400; font-style: normal;}
#main .works .content .post-categories { display:inline-block; }
#main .works .content .post-categories li { margin-right:5px; width:auto; position:relative; float:left; display:block;}
#main .services	{ padding:80px 15%; text-align:center; background:#FFF; }
#main .services .content { margin-right:50px; margin-bottom:50px; width:calc((100% - 100px) / 3); position:relative; float:left; display:block; }
#main .services .content:nth-child(3n+1) { margin-right:0; }
#main .services .content:nth-last-child(-n+3) { margin-bottom:0; }
#main .services .content .title { padding:0 0 20px; width:100%; position:relative; float:left; display:block; line-height:18px; font-size:18px; font-weight:400; }
#main .services .content .title a{color: #000; font-family: "Space Mono", serif; font-weight: 400; font-style: normal; font-size: 20px;}
#main .services .content .title a:hover{text-decoration: underline}
#main .services .content .description { width:100%; position:relative; float:left; display:block; line-height:21px; font-size:16px; font-weight:100; }
#main .team		{ padding:0 15% 80px; background:#FFF; text-align:center; }
#main .team	.figure	{ margin-bottom:50px; width:100%; position:relative; float:left; display:block; }
#main .team	.title	{ margin-bottom:20px; padding:0 0 20px; width:100%; position:relative; float:left; display:block; line-height:18px; font-size:18px; font-weight:400; }
#main .team	.title:after { content:''; display:block; width:10%; height:1px; position:absolute; bottom:0; left:45%; background:#fff; }
#main .team	.description { width:100%; position:relative; float:left; display:block; line-height:24px; font-size:16px; font-weight:100; }
#main .team	.description:last-child { margin-top:30px; }
#main .contact 	{ padding:50px 0 100px; background:#fff; text-align:center; }
#main .contact h2 	{ margin-bottom:30px; }	
#main .contact .description	{ margin-bottom:20px; width:100%; position:relative; float:left; display:block; line-height:21px; font-size:16px; font-family: "Space Mono", serif; font-weight: 400; font-style: normal;}
#main .contact .description:last-child	{ margin-bottom:0; }
#main .contact .description a	{ color:#7A303F; display:inline-block; }
#main .contact #mc-embedded-subscribe-form { margin:0 25% 15px; width:50%; position:relative; float:left; }
#main .contact #mc-embedded-subscribe-form .email	{ padding:0 5%; width: calc(60% - 2px); height:45px; position:relative; float:left; background:#FFF; line-height:45px; font-size:16px; font-weight:100; border: 1px solid #e0dfd7 !important; }
#main .contact #mc-embedded-subscribe-form .button	{ width:30%; height: 47px; position:relative; float:left; background:#e0dfd7; line-height:45px; font-size:16px; border: 1px solid #e0dfd7 !important; }

/**	SINLGE 		*************************/
#single 		{ width:100%; height:100%; position:fixed; display:block; top:0; left:0; background:rgba(0,0,0,0.9); z-index:999; overflow-x:scroll; }
#single .content{ margin-left:15%; margin-top:30px; padding:5%; width:60%; position:relative; float:left; background:#FFF; }
#single .content .title { margin-bottom:50px; width:100%; position:relative; float:left; line-height:24px; font-size:24px; font-weight:700;}
#single .content .description { margin-bottom:50px; width:100%; position:relative; float:left; line-height:24px; font-size:16px; font-weight:100; }
#single .content .description li { margin-bottom:8px; width:100%; position:relative; float:left; line-height:24px; font-size:16px; font-weight:100; }
#single .content .description li span { font-weight:400; }
#single .content .description:last-child { margin-bottom:0; }
#single .content .visuals { margin-bottom:50px; width:100%; position:relative; float:left; }
#single .content .visuals p { margin-bottom:3px; width:100%; position:relative; float:left; }
#single .content .visuals p:last-child { margin-bottom:0; }
#single .content .visuals ul li { margin-right:0; }
#single .close 	{ width:30px; height:30px; position:fixed; right:30px; top:30px; line-height:30px; text-align:center; background:#010101; font-size:18px; font-weight:400; color:#FFF; cursor:pointer; text-decoration:none; z-index:1000;}

/**	FOOTER 		*************************/
#footer 		{ padding:0 50px; width:100%; height:50px; position:fixed; left:0; bottom:0; z-index:9; background:#fff; text-align:center; display:block; box-sizing:border-box; }
#footer ul 		{ position:relative; float:left; }
#footer ul li 	{ margin-right:10px; width:auto; position:relative; float:left; line-height:50px; font-size:16px; font-weight:400; color:#000; }
#footer ul li:last-child { margin-right:0; }
#footer .social { width:30%; height:50px; position:relative; float:left; display:block; line-height:50px; }
#footer a img 	{ margin-top:10px; height:30px; width:auto; display:inline-block; fill: #000;}
#footer p 		{ width:40%; height:50px; position:relative; float:left; display:block; line-height:50px; font-size:16px; font-weight:400; color:#000; } 
#footer p a		{ display:inline-block; color:#000; } 
#footer p:last-child { width:30%; text-align:right; } 		

/**	MOBILE 		*************************/
@media handheld, only screen and (max-width:767px) { 
#header 		{ height:60px; }
#header ul li 	{ margin-right:3vw; height:60px; line-height:60px; font-size:3.25vw; }
	#header ul li a{font-size: 12px;}
#header ul li a img { margin-top:15px; height:30px; width:auto; display:inline-block; }
	
#main 			{  }
#main .row h2 	{margin-bottom: 30px; }	
#main ul li 	{ margin-right:2vw; width:auto; position:relative; float:left; display:inline-block; }

#main > .mt-100{margin-top: 20px !important}
	
#main .about 	{ padding: 20px; }
#main .about .description { margin-bottom:15px; line-height: unset !important; font-size:12px; }
	
#main .about .description:first-child {font-size: 30px; margin-bottom: 20px;}
	
#main .works .nav { padding:15px 0; top:58px; background:#FFF; line-height:4.25vw; font-size:4.25vw; overflow:auto; }
#main .works .nav ul { width:200%; }
#main .works .items .item { margin:0 0 3px; width:100%; }
#main .works .items .item:nth-child(3n) { margin:0 0 3px; }

#main .works .content .tags { line-height:18px; font-size:13px; }
#main .works .content .post-categories li { margin-right:3px; }	
#main .services	{ padding: 30px 20px; }
#main .services .content { margin: 0; width:calc((100% - 10px) / 3);}
	
#main .services .content .title { margin-bottom:15px; padding:0 0 15px; line-height:21px; font-size:18px; }
#main .services .content .description { line-height:20px; font-size:15px; }
	
#main .team		{ padding:0 10% 90px; }
#main .team	.figure	{ margin-bottom:30px; }
#main .team	.title	{ margin-bottom:15px; padding:0 0 15px; line-height:21px; font-size:18px; }
#main .team	.description { line-height:20px; font-size:15px;  }
#main .team	.description:last-child { margin-top:15px; }
	
#main .contact 	{ padding: 10px; }
#main .contact h2 	{ margin-bottom:30px; }	
#main .contact .description	{ margin-bottom:20px; line-height:20px; font-size:15px; }
#main .contact #mc-embedded-subscribe-form { margin:0 0 20px; width:100%; }
#main .contact #mc-embedded-subscribe-form .email	{ padding:0 5%; width:90%; font-size:15px; font-weight:100; text-align:center;}
#main .contact #mc-embedded-subscribe-form .button	{ width:100%; font-size:15px; }
	
#single .content{ margin-left:5%; margin-bottom:30px; padding:5% 5% 80px; width:80%; position:relative; float:left; background:#FFF; }
#single .content .title { margin-bottom:30px; line-height:24px; font-size:24px; font-weight:700;}
#single .content .description { margin-bottom:30px; line-height:20px; font-size:15px; }
#single .content .description li { margin-bottom:5px; line-height:18px; font-size:13px; }
#single .content .visuals { margin-bottom:30px; }
#single .content .visuals p { margin-bottom:3px; }
#single .close 	{ width:50px; height:50px; top:25px; right:25px; right:0; top:auto; line-height:50px; z-index:9999; }
	
#footer 		{ padding:0 30px; }
#footer ul li 	{ margin-right:10px; font-size:13px; }
#footer p 		{ width:30%; height:50px; line-height:50px; font-size:13px; font-weight:400; color:#7A303F; } 
#footer p:last-child { width:40%; text-align:right; } 	

}

.w-100{width: 100%;}
.w-80{width: 80%;}
.text-center{text-align: center}
.mt-30{margin-top: 30px;}
.mt-50{margin-top: 50px;}
.mt-100{margin-top: 100px;}

img.emoji {
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 0.07em !important;
  vertical-align: -0.1em !important;
  background: none !important;
  padding: 0 !important;
}

.wp-block-image img { box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom; }
.wp-block-video { box-sizing: border-box; }
.wp-block-video video { height: auto; vertical-align: middle; width: 100%; }
#checker { display: none; }