/*
	Theme Name: Brand Guide
*/

/* ------------------------ 
	GLOBAL RESET
	------------------------ */
	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,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,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{
		margin:0;padding:0;border:0;outline:0;vertical-align:baseline;/*background:transparent*/
	}
	article,aside,dialog,figure,footer,header,hgroup,nav,section {
		display:block
	}
	nav ul { list-style:none }
	a { margin:0;padding:0;border:0;vertical-align:baseline;background:transparent }
	
	
	/* ------------------------ 
	GLOBAL RULES
	------------------------ */
	* {
		padding: 0px; 
		margin: 0px;
		border: 0px;
		
		-webkit-box-sizing: border-box;
   		-moz-box-sizing: border-box;
    	box-sizing: border-box;
	}
	
	/* ------------------------ 
	BASICS GRID
	------------------------ */
	.col-12 { width: 100%;  }
	.col-11 { width: 91.66666666666666%; }
	.col-10 { width: 83.33333333333334%; }
	.col-9 { width: 75%; }
	.col-8 { width: 66.66666666666666%; }
	.col-7 { width: 58.333333333333336%; }
	.col-6 { width: 50%; }
	.col-5 { width: 41.66666666666667%; }
	.col-4 { width: 33.33333333333333%; }
	.col-3 { width: 25%; }
	.col-2 { width: 16.666666666666664%; }
	.col-1 { width: 8.333333333333332%; }
	.col { 
		font-size: 0px; 
		line-height: 0px;
		padding: 0px; 
		display: inline-block;
		vertical-align: middle;
		margin: auto;
	}
	
	
	/* ------------------------ 
	STUFF
	------------------------ */	
	.nbr { white-space: nowrap;}
	/*input {-webkit-appearance: none;}*/
	
	a:focus,
	*:focus { outline: none !important; } 
	
	a,
	a:link,
	a:visited { 
		outline:none; 
		text-decoration: none;
		cursor: pointer;
	}
	
	li { list-style: none; }
	.center { text-align: center; margin: auto; }
	.inline { display: inline-block; }
	.t-left, p { text-align: left; }
	.t-right { text-align: right; }
	
	.v-top {vertical-align: top; }
	.v-bottom {vertical-align: bottom; }
	
	.underline {text-decoration: underline; }
	.upper { text-transform: uppercase; }
	.lower { text-transform: none; }
	
	/* float */
	.left { float: left; }
	.right { float: right; }
	.clear { clear: both; float: none; }
	
	
	/* ------------------------ 
	IMAGE
	------------------------ */	
	/*img*/
	img, a img { width: 100%; }
	img { object-fit: cover; }
	
	/*img rellax*/
	/*.image-wrap {overflow: hidden;}*/
	
	/* ------------------------ 
	z-index
	------------------------ */	
	section { z-index: 2; }
	#topheader { z-index: 10; }
	nav { z-index: 11; }
	#burger-outer { z-index: 12; }
	
	/* ------------------------ 
	DISPLAY
	------------------------ */	
	#searchform,
	.comments,
	.mobile { display: none; }
	.desk {display: block; }
	
	/* ------------------------ 
	TRANSITION
	------------------------ */	
	a, .but {
		transition: .2s ease all;
		-moz-transition: .2s ease all;
		-webkit-transition: .2s ease all;
	}
	
	.trans-2 {
		transition: .2s ease all;
		-moz-transition: .2s ease all;
		-webkit-transition: .2s ease all;
	}
	.trans-3 {
		transition: .3s ease all;
		-moz-transition: .3s ease all;
		-webkit-transition: .3s ease all;
	}
	.trans-5 {
		transition: .5s ease all;
		-moz-transition: .5s ease all;
		-webkit-transition: .5s ease all;
	}
	
	.trans-15 {
		transition: 1.5s ease all;
		-moz-transition: 1.5s ease all;
		-webkit-transition: 1.5s ease all;
	}
	
	/* ------------------------ 
	COLOR
	------------------------ */	
	body,
	a { color: #000; }
	
	.red {color: red;}
	.white {color: #fff;}
	.black { color: #222; }
	.blue {color: #0378B6;}
	.grey { color: #575757; }
	
	.light-grey { color: #575757; }
	
	.bg-black { background: #171717; }
	.bg-black2 { background: #333333; }
	.bg-black-light { background: #3D3D3D; }
	.black-trans-75 { color: rgba(0,0,0,.75) }
	.black-trans-50 { color: rgba(0,0,0,.6) }
	
	.white-trans-25 { color: rgba(255,255,255,.25) }
	.white-trans-50 { color: rgba(255,255,255,.5) }
	.white-trans-65 { color: rgba(255,255,255,.65) }
	.white-trans-75 { color: rgba(255,255,255,.75) }
	
	.bg-grey-light {background: #C6C6B6;}
	
	
	/* ------------------------ 
	FONTS STYLE
	------------------------ */ 
	body, p, a, .inner  {
		font-size: 20px;
		line-height: 1.8rem;
	}
	body, h1, h2, h3, h4,
	.regular { 
		/*font-family: 'ABCDiatype-Medium', sans-serif;*/
		font-family: 'ABCDiatype-Regular', sans-serif; 
	}
	
	#menu-nested-pages li a,
	.medium { font-family: 'ABCDiatype-Medium', sans-serif;}
	
	.italic { 
	    /*font-family: 'ABCDiatype-MediumItalic', sans-serif;*/
		font-family: 'ABCDiatype-RegularItalic', sans-serif;
   }
	
	.light { font-family: 'ABCDiatype-Light', sans-serif; }
	.lightitalic { font-family: 'ABCDiatype-LightItalic', sans-serif; }
	
	
	/*.thin { font-family: 'ABCDiatype-Thin', sans-serif; }
	.thinitalic { font-family: 'ABCDiatype-ThinItalic', sans-serif; }
	
	.medium { font-family: 'ABCDiatype-Medium', sans-serif; }
	.mediumitalic { font-family: 'ABCDiatype-MediumItalic', sans-serif; }
	
	.regular { font-family: 'ABCDiatype-Regular', sans-serif; }
	.regularitalic { font-family: 'ABCDiatype-RegularItalic', sans-serif; }
	
	
	.black { font-family: 'ABCDiatype-Black', sans-serif; }
	.blackitalic { font-family: 'ABCDiatype-BlackItalic', sans-serif; }
	
	.bold { font-family: 'ABCDiatype-Bold', sans-serif; }
	.bolditalic { font-family: 'ABCDiatype-BoldItalic', sans-serif; }
	
	.heavy { font-family: 'ABCDiatype-Heavy', sans-serif; }
	.heavyitalic { font-family: 'ABCDiatype-HeavyItalic', sans-serif; }
	
	.ultra { font-family: 'ABCDiatype-Ultra', sans-serif; }
	.ultraitalic { font-family: 'ABCDiatype-UltraItalic', sans-serif; }*/
	
	/* ------------------------ 
	FONTS SIZE
	------------------------ */ 
	h1 { 
		font-size: 5rem; 
		line-height: 1.05em;
	}
	h2 { 
		font-size: 3.2rem; 
		line-height: 1.2em;
	}
	h3 { 
		font-size: 2rem; 
		line-height: 1.35em;
	}
	#page-link h3 a {font-size: 2rem;}
	
	h4 { 
		font-size: 1.6rem; 
		line-height: 1.45em;
	}
	input, 
	textarea { font-size: 1.25rem; }
	
	p.small { font-size: 1rem; }
	
	/*font-weight*/
	body, p, a, h1, h2, h3, h4 { font-weight: 400; }
	.light{ font-weight: 300; }
	.bold {font-weight: 500; }
	
	/*line-height*/
	p { line-height: 1.5em; }