/* Theme Name: Studio_Frosin */

/* ------------------------ 
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;}

	ul, li { list-style: none; }
	.inline { display: inline-block; }
	
	.center { text-align: center; }
	.t-left { text-align: left; }
	.t-right { text-align: right; }
	
	.underline {text-decoration: underline; }
	
	.uppercase { text-transform: uppercase; }
	.lowercase { text-transform: none; }
	
	.left { float: left; }
	.right { float: right; }
	.clear { clear: both; } 

	.v-top { vertical-align: top; }
	.v-middle {vertical-align: middle;}
	.v-bottom {vertical-align: bottom;}
	
	.fix { position: fixed; }
	.abs { position: absolute; }
	.rel { position: relative; }
	
	.italic { font-style: italic}
	
	.shadow {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
	.box-shadow {box-shadow: box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
	
	img { 
		width: 100%; 
		object-fit: cover; 
	}
	
	 hr { 
		 height:1px;
		 background:#000;
		 margin: -5px 0 15px; 
	 } 
	  hr.two { margin: 15px 0 0px; } 
	  hr.three { margin-bottom: 0px; } 
	
	
	/* ------------------------ 
	list style
	------------------------ */	
	.list { position: relative; margin-left: 15px; }
	.list:before {
		content: '';
		position: absolute;
		bottom: 12px;
		left: -15px;
		width: 5px;
		height: 5px;
		background-color: #000;
		border-radius: 50%;
	}
	
	/* ------------------------ 
	z-index
	------------------------ */	
	header { z-index: 3; }
	
	/* ------------------------ 
	DISPLAY
	------------------------ */	
	#searchform,
	.comments,
	.mobile,
	#extrapages,
	.agb #onepager, .error404 #onepager { display: none; }
	
	.desk,
	.agb #extrapages, .error404 #extrapages {display: block; }
	
	/* ------------------------ 
	TRANSITION
	------------------------ */	
	a, 
	.but,
	.trans-2 {
		transition: .2s ease all;
		-moz-transition: .2s ease all;
		-webkit-transition: .2s ease all;
	}
	.trans-1-5 {
		transition: .15s ease all;
		-moz-transition: .15s ease all;
		-webkit-transition: .15s ease all;
	}
	.trans-3 {
		transition: .3s ease all;
		-moz-transition: .3s ease all;
		-webkit-transition: .3s ease all;
	}
	.trans-4 {
		transition: .4s ease all;
		-moz-transition: .4s ease all;
		-webkit-transition: .4s ease all;
	}
	.trans-5 {
		transition: .5s ease all;
		-moz-transition: .5s ease all;
		-webkit-transition: .5s ease all;
	}
	
	/* ------------------------ 
	COLOR
	------------------------ */	
	.white {color: #efefef; }
	.black, a {color: #292929; }
	.light-grey {color: #efefef;}
	.brown {color: #917b4c;}
	.lightyellow {color: #E8D6A4;}
	.darkblue {color: #2D3645;}
	.lightred {color: #F28AA1; }
	.darkgreen {color: #38433F; }
	 
	.bg-white {background: #fff; }
	.bg-black {background: #292929; }
	
	.bg-lightyellow {background: #E8D6A4;}
	.bg-lightgreen {background: rgba(178, 207, 184, 1);}
	.bg-darkblue {background: #2D3645;}
	.bg-lightblue {background: #BDC8CA;}
	.bg-lightblue-two {background: #E0E9E8;}
	.bg-lightbrown {background: #E2DCD4;}
	.bg-lightlila {background: #D5C8EA;}
	.bg-lightred {background: #F4CFB7;}
	
	
	
	.bg-black-trans {background: rgba(0, 0, 0, 0.85);}
	.bg-white-trans {background: rgba(255, 255, 255, 0.85);}
	.bg-blue-trans {background: rgba(139, 211, 241, 0.85);}
	.bg-yellow-trans {background: rgba(250, 225, 154, 0.85);}
	.bg-lila-trans {background: rgba(176, 108, 188, 0.85);}
	.bg-flieder-trans {background: rgba(249, 163, 237, 0.9);}
	
	.bg-darkblue-trans {background: rgba(0, 119, 207, 0.85);}
	.bg-darkblila-trans {background: rgba(154, 18, 138, 0.85);}
	.bg-lightyellow-trans {background: rgba(232, 212, 160, 1);}
	.bg-lightblack-trans {background: rgba(70, 69, 75, 1);}
	.bg-lightgrey-trans {background: rgba(199, 195, 184, 1);}
	.bg-lightbeige-trans {background: rgba(223, 218, 214, 1);}
	.bg-lightbrown-trans {background: rgba(198, 174, 162, 1);}
	
	
	/* ------------------------ 
	FONTS STYLE
	------------------------ */ 
	.noe_thin { font-family: 'noe-thin'; }
	.noe_light { font-family: 'noe-light'; }
	 header nav li a,
	.noe_reg { font-family: 'noe-reg'; }
	
	body, p,
	.roboto_reg {font-family: 'Roboto-Regular'; }
	
	.upper { text-transform: uppercase; }
	
	h1.big { font-size: 7rem; }
	h1 { font-size: 5rem;  }
	h2 { font-size: 3rem; }
	h3 { font-size: 2rem; }
	p,
	.agb .textbox li  { font-size: 1.2rem; }
	
	h1,h2,h3 { line-height: 1.05em;}
	.agb h3 {line-height: 1.15em;}
	p,
	.agb .textbox li  { line-height: 1.5em;}
	
	
	/* ------------------------ 
	underline
	------------------------ */ 
	.underline { 
		position: relative; 
		display: inline-block;
		text-decoration: none; 
	}
	.underline:after  {
		content: "";
		position: absolute;
		width: 100%;
		height: 1px;
		bottom: -1px;
		left: 0;
		background: #292929;
		visibility: hidden;
		transform: scaleX(0);
		
		transition: .2s ease all;
		-moz-transition: .2s ease all;
		-webkit-transition: .2s ease all;
	}
	.underline:hover:after {
		visibility: visible;
		transform: scaleX(1);
	}
	
	/* ------------------------ 
	Link
	------------------------ */
	a:focus,
	*:focus { outline: none !important; } 
	
	a,
	a:link,
	a:visited { 
		outline:none; 
		text-decoration: none;
		cursor: pointer;
	}