@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

:root {
		--top_main:#691E16;
		--top_back:#cececa;
		--mov_main:#96792f;
		--mov_back:#beb89c;
		--gra_main:#97522f;
		--gra_back:#beb89c;
		--con_main:#424748;
		--con_back:#cececa;
		--abt_main:#edede0;
		--abt_back:#cececa;
		--playc_col:#857761;
	}

::-webkit-scrollbar {
    width: 8px;
	overflow: overlay; 
}

::-webkit-scrollbar-track {
  //border-radius:3px;
  box-shadow: inset 0 0 6px rgba(255,255,255, 0.5);
}

::-webkit-scrollbar-thumb {
  background-color:var(--main-bg-color);
  border-radius: 0px;
  //box-shadow:0 0 0 1px rgba(255, 255, 255, 1);
}

#tags{display:none;}

#header {
    position: fixed;
    width: 100%;
    margin: 0;
    perspective: 500px;
    top: 0px;
    z-index: 3;
    min-width: 360px;
    //max-width: 1200px;
}

#h_body {
    position: absolute;
    background-color: var(--main-bg-color);
    left: 0px;
    height: 70px;
    z-index: 0;
    top: 0px;
    color: #fff;
    //border-bottom: solid 1px #333;
    //-webkit-box-shadow:0px 0px 10px #161616; /* webkit */
    //-moz-box-shadow:0px 0px 10px #161616; /* fx */
    //-pie-box-shadow:0px 0px 10px #161616;
    width: 100%;
    //transform-style: preserve-3d;
    transform-origin: right top;
    animation: rotate-anime-3d 1.2s;
}

	  @keyframes rotate-anime-3d {
	  0%  {transform: rotateX(-90deg);}
	  100%  {transform: rotateX(0deg);}
	}

#h_body.close {
    animation: rotate-close 0.6s;
    animation-fill-mode: both;
}

@keyframes rotate-close {
    0% {transform: rotateX(0deg);}
    100% {transform: rotateX(-90deg);}
}

	#h_tag{
		height:100%;
		display: inline-block;
		margin:0 4px;
		font-size:13px;
	}

	table {
		width: 100%;
		height:70px;
		border-collapse: collapse;
		border-spacing: 0;
	}

	#h_menus{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
	}

	#h_menus:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: #ddd;
	  transition: 0.5s ease-in-out;
	  transform: translateY(-80%);
	  z-index: -1;
	}

	#h_menus:hover {
	  color: var(--main-bg-color);
	  transition: 0.5s ease-in-out;
	}

	#h_menus:hover:before {
	  transform: translateY(20%);
	}

	#h_menus1{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
	}

	#h_menus1:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: var(--top_main);
	  transition: 0.5s ease-in-out;
	  transform: translateY(-80%);
	  z-index: -1;
	}

	#h_menus1:hover {
	  color: var(--top_back);
	  transition: 0.5s ease-in-out;
	}

	#h_menus1:hover:before {
	  transform: translateY(20%);
	}

	#h_menus2{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
	}

	#h_menus2:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: var(--mov_main);
	  transition: 0.5s ease-in-out;
	  transform: translateY(-80%);
	  z-index: -1;
	}

	#h_menus2:hover {
	  color: var(--mov_back);
	  transition: 0.5s ease-in-out;
	}

	#h_menus2:hover:before {
	  transform: translateY(20%);
	}

	#h_menus3{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
	}

	#h_menus3:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: var(--gra_main);
	  transition: 0.5s ease-in-out;
	  transform: translateY(-80%);
	  z-index: -1;
	}

	#h_menus3:hover {
	  color: var(--gra_back);
	  transition: 0.5s ease-in-out;
	}

	#h_menus3:hover:before {
	  transform: translateY(20%);
	}

	#h_menus4{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
	}

	#h_menus4:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: var(--abt_main);
	  transition: 0.5s ease-in-out;
	  transform: translateY(-80%);
	  z-index: -1;
	}

	#h_menus4:hover {
	  color: var(--abt_back);
	  transition: 0.5s ease-in-out;
	}

	#h_menus4:hover:before {
	  transform: translateY(20%);
	}

	#h_menus5{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
	}

	#h_menus5:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: var(--con_main);
	  transition: 0.5s ease-in-out;
	  transform: translateY(-80%);
	  z-index: -1;
	}

	#h_menus5:hover {
	  color: var(--con_back);
	  transition: 0.5s ease-in-out;
	}

	#h_menus5:hover:before {
	  transform: translateY(20%);
	}

	#h_this{
		margin-top:26px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 20px;
		padding-top:14px;
		text-align:center;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:var(--back-bg-color);
	}

	.lefty{	width: 345px;}

	.lefty img{
		margin:0;
		width:340px;
		padding: 0px 0px 0px10px;
		vertical-align: middle;
	}

	.righty{
		width: 290px;
		font-size:18px;
		font-weight: 600;
		font-family: 'Josefin Sans', sans-serif;
		padding-top:8px;
		color:#fff;
	}

	.h_comm{
		display: inline-block;
		position: absolute;
		right:140px;
		text-align:right;
		font-size:18px;
		font-weight: 600;
		font-family: 'Josefin Sans', sans-serif;
	}

	.h_comm p {
	  display: inline-flex;
	  margin: 0;
	  vertical-align: top;
	  font-size:30px;
	  line-height:14px;
	}

	.h_comm p .word {
	  position: absolute;
	  display: flex;
	  opacity: 0;
	  }

	.h_comm p .word .letter {
	  transform-origin: center center 20px;
	}
	.h_comm p .word .letter.out {
	  transform: rotateX(90deg);
	  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
	  color: var(--main-bg-color);
	}

	.h_comm p .word .letter.in {
	  transition: 0.38s ease;
	}
	.h_comm p .word .letter.behind {
	  transform: rotateX(-90deg);
	  color: var(--main-bg-color);
	}

	.blck {
	  color: #7d8180;
	  margin-left:5px;
	}

	.yell {
	  color: #FFCA28;
	  margin-left:5px;
	}

	.blue {
	  color: #0492FB;
	  margin-left:5px;
	}

	.redd {
	  color: #FD4102;
	  margin-left:5px;
	}

	.whit {
	  color: #FFFBF0;
	  margin-left:5px;
	}

	#c_body {
		position:relative;
		width:100%;
		height:100%;
		margin:0;
		padding-top: 60px;
	  }

	#footer {
		position:fixed;
		background: -moz-linear-gradient(top, rgba(76,76,76,0.77), #231f20);
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(76,76,76,0.77)), to(#231f20));
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cc4c4c4c', endColorstr='#231f20')";
		left:0px;
		width:100%;
		height:30px;
		margin:0px;
		z-index: 3;
		bottom: 0px;
		font-family: 'Josefin Sans', sans-serif;
		min-width:320px;
	 }

	#f_menu {
		position:relative;
		background-color:#505050;
		width:100%;
		height:34px;
		margin:0px;
		//z-index: 1;
		border-bottom: 1px solid #333;
	}

	#footer a{
		color: #ddd;
		text-decoration: none;
	}

	#footer a:hover{
		color: #eee;
		text-decoration: underline;
	}

	.f_button {
		float: left;
		margin-left: 10px;
		margin-bottom: 0px;
		width: 30px;
	}

	.f_button img{
		margin-top:2px;
		width: 28px;
	}

	 #f_title {
		float:left;
		color: #ccc;
		line-height:30px;
		text-shadow: 1px 2px 2px #222;
		margin-left: 90%;
		font-size:13px;
		padding-top: 2px;
		}
  
	#f_body {
		position:relative;
		width:100%;
		//z-index: 1;
		text-align:center;
		font-size:10px;
		color: #ddd;
		margin : 0 auto; 
	  }

	#f_block, #f_block2, #f_block3 {
		display:inline-block;
		height:155px;
		text-align:left;
		vertical-align:top;
	}

	#u_icon {
		float:left;
		padding: 6px 0 0 30px;
	}
	#u_icon img{width: 24px;}
	   
	#u_iconSo {
		float:left;
		padding: 4px;
		margin:0px;
	}
	#u_iconSo img{width: 24px;}

	#u_icos {padding: 0px 30px 0px 15px;}

	#u_adds {
		float:left;
		color: #ddd;
		padding: 6px;
		line-height:24px;
		font-size:11px;
	}

	#u_adds2 {
		float:left;
		color: #ddd;
		padding: 6px;
		line-height:12px;
		}

	.bar_top {top: 10px;}
  
	#cop {
		font-size:10px;
		margin:0 auto;
		width:440px;
		color: #666;
		clear: both;
		text-shadow: 0 0 3px #000;
		text-align:center;
		padding-top: 6px;
	  }

	#slash {
		height:150px;
		width:2px;
		background-color:#C90;
		float:left;
		margin: 5px;
	}

	#clears{clear: left;}

	#gras {
		background-color: #333;
		margin: 0 auto;
		/* IE10 Consumer Preview */ 
		background-image: -ms-radial-gradient(center, ellipse farthest-side, #444444 0%, #222222 100%);
		background-image: -moz-radial-gradient(center, ellipse farthest-corner, #444444 0%, #222222 100%);
		/* Opera */
		background-image: -o-radial-gradient(center, ellipse farthest-corner, #444444 0%, #222222 100%);
		/* Webkit (Safari/Chrome 10) */
		background-image: -webkit-gradient(radial, center center, 0, center center, 509, color-stop(0, #444444), color-stop(1, #222222) );
		/* Webkit (Chrome 11+) */
		background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #444444 0%, #222222 100%);
		/* Proposed W3C Markup */
		background-image: radial-gradient(center, ellipse farthest-corner, #444444 0%, #222222 100%);
		width:100%;
		height:100%;
	}

	.mid {
		text-align: center;
		margin:0 auto;
	}

	#u_logo img{
		padding-top: 10px;
		width: 280px;
	}

	#u_catego {
		color: #ccc;
		text-align:left;
		font-size:14px;
		padding: 25px 30px 10px 20px;
		font-weight: bold;
		text-transform: uppercase;
	}

	#u_menu {
		float:left;
		color: #aaa;
		padding: 2px 0px 3px 24px;
		line-height:20px;
		width: 100%;
		text-align:left;
		font-size:12px;
		text-transform: uppercase;
	}

	.hamb{display:none;	}
	.sub_menu{display:none;}

	#jobs2{display:none;}
	#clears1{clear: left;}
	#clears2{clear: left;display:none;}
	#f_title2{display:none;}

@media screen and (max-width: 960px) {
	.lefty{	width: 260px;}

	.lefty img{
		margin:0;
		width:260px;
		padding: 0px;
		vertical-align: middle;
	}

	.mid {display: none;}

	.righty{
		width:120px;
		font-size:14px;
		padding-top:22px;
		color:#fff;
		float:right;
		right:140px;
		display: inline-block;
		position: absolute;
	}

	.h_comm{
		right:0px;
		text-align:right;
	}
	
	.h_comm p {
	  display: inline-flex;
	  margin: 0;
	  vertical-align: top;
	  font-size:20px;
	  line-height:13px;
	}


	.hamb{
	  width:32px;
	  height:32px;
	  //background-color:#846;
	  display: inline-block;
	  margin-right:15px;
	  float:right;
	  transition: all .5s ease-out;
	}

	.hamb2{background-color:var(--back-bg-color);}
	   	  
	#u_menu {
		float:left;
		color: #aaa;
		padding: 2px 0px 3px 10px;
		line-height:18px;
		width: 100%;
		text-align:left;
		font-size:10px;
		text-transform: uppercase;
	}

	#s_tag{	width:300px;float:left;}

	#s_menus{
		font-size:14px;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		text-decoration:none;
		color:#fff;
		width:320px;
		position: relative;
		display: inline-block;
		line-height:60px;
		text-align:center;
		clear: left;
		padding-top:6px;
	}

	.sub_menu{
		display:block;
		width:320px;
		position:fixed;
		right:-330px;
		top:71px;
		transition: all .75s ease-out;
		background-color:var(--main-bg-color);
	}

	.sub_m2{right:0px;}

	.sub_mb1,.sub_mb2,.sub_mb3,.sub_mb4,.sub_mb5{
	width:20px;height:60px;float:left;}

	.sub_mb1{background-color: var(--top_main);}
	.sub_mb2{background-color: var(--mov_main);}
	.sub_mb3{background-color: var(--gra_main);}
	.sub_mb4{background-color:#cdcdc0;}
	.sub_mb5{background-color: var(--con_main);}


	#u_logo img{
		padding-top: 10px;
		width: 240px;
	}

	#u_catego {
		color: #ccc;
		text-align:left;
		font-size:13px;
		padding: 25px 10px 10px 10px;
		font-weight: bold;
		text-transform: uppercase;
	}

	#u_icon {
		float:left;
		padding: 6px 0 0 10px;
	}

	#u_icos {
		padding: 0px 10px 10px 10px;
	}

	#u_iconSo {
		float:left;
		padding: 2px;
		margin:0px;
	}
	#f_block2 {display:none;}
	#clears1{display:none;}
	#clears2{display:block;clear: left;}
}

@media screen and (max-width: 520px){

	#u_catego {
		text-align:left;
		padding: 15px 10px 6px 10px;
		text-transform: uppercase;
	}

	#f_title2{
		display:block;
		text-align:center;
		font-size:10px;
		padding-top:6px;
		color:#888;
		
	}

	#jobs2{display:block;}

	#f_block3 {display:none;}
	#clears2{display:none;}
	
	.h_comm {display: none;}
	.righty {display: none;}
	.f_button {display: none;}
	#f_title {display: none;}
}