/* _________ Tamugaia Stylos Red _________ */

/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(titillium.woff) format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(titillium0.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin CustomFont1 */
@font-face {
  font-family: 'CustomFont1';
  font-style: normal;
  font-weight: 400;
  src: local('Metrophobic Regular'), local('Metrophobic-Regular'), url(metrophobic.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body{
	font-family: 'Titillium Web', Tahoma, Arial, Verdana, sans-serif;
	font-size:16px;
	color:#ddd;
	text-shadow: 0.05em 0.05em 0.1em #000;
	background-color:#444;
	/*background-size:100% 100%;*/ /*this will make whole bg stretch */
	margin:0px;
    margin-top: 2.8em;
	cursor:default;
	line-height:1.7em;
    text-align: center;
}
h1{font-size:2em; line-height: 1.2em; font-family: CustomFont1, Palatino Linotype, serif}
h2{font-size:1.8em; line-height: 1.2em}
h3{font-size:1.6em; line-height: 1.4em}
h4{font-size:1.3em; line-height: 1.4em}
h5{font-size:1.15em; line-height: 1.4em}
h6{font-size:1em; line-height: 1.5em}

@media (max-width: 640px) { 
  h1{font-size:1.5em; line-height: 1.2em;}
  h2{font-size:1.4em; line-height: 1.2em}
  h3{font-size:1.3em; line-height: 1.4em}
  h4{font-size:1.2em; line-height: 1.4em}
  h5{font-size:1.1em; line-height: 1.4em}
  h6{font-size:1em; line-height: 1.5em}
}

a{
	text-decoration:none;
	color:#fff;
	text-shadow:0.1em 0.1em 0.1em #800;
	font-weight:bold;
	letter-spacing:0.05em;
	transition:color 0.3s ease-out;
	-moz-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;}
a:hover, a:visited:hover{color:#ffff56}
a:active{color:#ff0000}
a:visited{color:#bbb}

a img{
  border: 0;
}


/* #t_navi */
  #t_navi{
    background: linear-gradient(to bottom, #222, #500);
    box-shadow: 0em 0.2em 0.5em rgba(0,0,0,0.6);
    padding: 0 10% 0 10%;
    z-index: 2199;
    position: fixed;
    width: 100%;
    min-height: 50px;
    top: 0;
    border-bottom: 0.01em solid #000;
    text-align: left;
	overflow:none;
  }
  #t_logo{
    width: 200px;
    height: 50px;
    float:left;
	margin-top:0.1em;
  }
  #t_navi ul{
      padding: 0;
      margin:0;
      list-style:none;
      font-family:CustomFont1, Palatino Linotype, serif;
      border-top: 1px solid rgba(255,255,255,0.15);
      font-size:0.75em;
      z-index:1999;
  }
  #t_navi ul li a{
      box-sizing: border-box;
      float:left;
      display:block;
      padding:1.2em 1.4em 1.2em 1.4em;
      letter-spacing:0.1em;
      text-decoration:none;
      text-transform:uppercase;
      text-shadow:none;
  }
  #t_navi ul li a:hover, #navimenu ul li a:visited:hover{
      background-color:rgba(0,0,0,0.8);
      color:#fff;
      transition:background-color 0.5s ease-out;
      -moz-transition:background-color 0.5s ease-out;
      -o-transition:background-color0.5s ease-out;
      -webkit-transition:background-color 0.5s ease-out;
  }
  @media (max-width: 800px) { /* menu should hide. screen shorter than menu */
    #t_navi_ul {
      position:fixed;
      top:0;
      left:0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color:rgba(0,0,0,0.8);
    }
    #t_navi ul li a{
      float:none;
      }
  }
  @media (max-width: 570px) { /* small screen, make some changes */
    #t_navi ul li a{
          display:block;
      padding:0.4em 0.5em 0.4em 0.5em;
    }
  }
  @media (max-width: 400px) { /* even smaller screen */
  }
  #navitoggler{
      display:inherit;
      position:fixed;
      right:0;
      top:0;
      display:block;
      z-index:2222;
      opacity:0.6;
      background-color:rgba(0,0,0,0.5);
      border:1px solid rgba(255,255,255,0.7);
  }
  #navitoggler:hover, #navitoggler:active{
      opacity:1;
  }
  #navitoggler img{

      margin:0 0 -0.2em 0;
  }
/* end #t_navi */

/* #t_content */
	#t_screentop iframe, #t_screenbottom iframe{
		width:100%;
	}
  #t_content{
    text-align: left;
    padding: 1.5em;
	background:#555;
  }
  #t_minijumbo h1{
	display:inline-block;
	vertical-align:center;
  }
  #t_minijumbo p{
	display:inline-block;
	padding:0.3em;
	vertical-align:center;
  }
	#t_frontpagecolumns .divmore:nth-child(1), #t_frontpagecolumns .divmore:nth-child(2){
		width:50%;
		box-sizing:border-box;
		float:left;
		padding:0;
	}
	#t_frontpagecolumns .divmore:nth-child(1){
		border-right:1px solid rgba(0,0,0,0.4);
	}
	#t_frontpagecolumns .divmore:nth-child(2){
		border-left:1px solid rgba(255,255,255,0.4);
	}
  #t_content iframe{
	width:100%;
  }
  #t_content h1, #t_content h2, #t_content h3, #t_content h4, #t_content h5, #t_content h6{
    font-weight: bold;
	text-shadow:0.12em 0.12em 0.1em #000;
  }
    /* #t_featurebar */
      #t_featurebar{
        margin: 1.8em -1.5em 1.4em -1.5em;
        padding: 3.5% 7% 3.5% 7%;
        background-color: rgba(0,0,0,0.3);
        height: 55px;
        box-sizing: border-box;
      }
      #t_featurebar img{
        display: inline-block;
        vertical-align: middle;
        width: 40%;
        max-width: 100px;
        margin: -1.8em 0.3em 0 0.3em;
      }
      #t_featurebar a{
        box-sizing: border-box;
        margin: -1.3em 0.3em 0 0.3em;
        display: inline-block;
        vertical-align: middle;
        width: 40%;
        max-width: 100px;
        height: 75px;
        text-align: center;
        padding: 0.5em 0 0.5em 0;
        line-height: 1.9em;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.5em;
        color: white;
        background-color: #000;
      }
      #t_featurebar a:hover{
        font-weight: bold;
	    text-shadow:0em 0em 0.3em #fff;
      }
      #t_featurebar span{
        padding: 0em 1em 1em 1em;
        display: inline-block;
        vertical-align: middle;        
      }
    /* end #t_featurebar */

    /* #t_blurb */
      #t_blurb{
        font-size: 1.1em;
        margin: 1em 0 1em 0;
      }
    /* end #t_blurb */

    /* #t_iklancenter */
      #t_iklancenter{
        text-align: center;
        margin: 1em -1em 1em -1em;
      }
      #t_iklancenter iframe{
         margin: auto;
      }
    /* end #t_iklancenter */

    /* #t_buttons */
      #t_buttons{
        text-align: center;
        margin: 1em 0 1em 0;
      }
      #t_buttons a{
        display: inline-block;
        padding: 0.8em;
        background-color: rgba(0,0,0,0.3);
        text-shadow: 0em 0em 0.5em #fff;
        border-top: 0.01em solid rgba(255,255,255,0.3);
        border-bottom: 0.01em solid rgba(0,0,0,0.5);
		width:31%;
		min-height:5em;
		box-sizing:border-box;
		vertical-align:top;
      }
    /* end #t_buttons */

    /* #t_info */
    #t_info{
      font-size: 0.9em;
      line-height:  1.5em;
    }
    /* end #t_info */

    /* #t_related */
    #t_related{
      padding: 0;
      margin:0;
      list-style:none;
      font-size:0.75em;
    }
    #t_related li{
      display:inline-block;
	  vertical-align:top;
	  padding:0em 1em;
	  border-right:0.1em solid rgba(255,255,255,0.4);
    }
    /* end #t_related */
	
	/* #t_misilanus */
	#t_misilanus{
		background-color:rgba(0,0,0,0.25);
		line-height:1.4em;
		padding:0.7em;
		-webkit-column-count: 3; 
		-moz-column-count: 3; 
		column-count: 3;
		-webkit-column-gap: 2em; 
		-moz-column-gap: 2em;
		column-gap: 2em;
		-webkit-column-rule-style: solid;
		-moz-column-rule-style: solid;
		column-rule-style: solid;
		-webkit-column-rule-width: 0.1em; 
		-moz-column-rule-width: 0.1em;
		column-rule-width: 0.1em;
		-webkit-column-rule-color: rgba(255,255,255,0.3);
		-moz-column-rule-color: rgba(255,255,255,0.3);
		column-rule-color: rgba(255,255,255,0.3);
	}
	#t_misilanus a{
		text-shadow:none;
		opacity:0.7;
		font-size:0.87em;
		font-weight: normal;
	}
	@media (max-width:570px){
		#t_misilanus{
			-webkit-column-count: 1; 
			-moz-column-count: 1; 
			column-count: 1;
		}
	}
	/* end #t_misilanus */
	
	/* #t_newscenter for news */
	#t_side #t_newscenter a{
		padding:0em;
	}
	#t_newscenter{
		font-size:0.9em;
		padding:0.8em;
		background:rgba(0,0,0,0.7);
		margin-bottom:0.5em;
	}
	#t_newscenter a{
		font-size:0.9em;
		padding:0.5em;
		display:block;
		font-weight:normal;
		line-height:1.2em;
		margin:0.2em;
		background:rgba(255,255,255,0.05);
		text-shadow: 0.1em 0.1em 0.5em #fff;
	}
	#t_newscenter strong{
		font-size:1.2em;
		display:block;
		text-transform:uppercase;
		background:rgba(0,0,0,0.7);
		padding:0.5em;
		font-family:CustomFont1, Palatino Linotype, serif;
	}
	#t_newscenter img{
		border-radius: 50%;
		display: inline-block;
		vertical-align: top;
		box-shadow: 0em 0em 2em #fff;
	}
	/* end #t_newscenter for news */
/* end #t_content */

/* #t_side */
  #t_side{
    font-size: 0.9em;
    padding: 5%;
    border-left: 0.3em solid #660000;
    border-right: 0.3em solid #660000;
    background: rgba(0,0,0,0.68);
    text-align: left;
  }
  #t_side a{
    font-weight: normal;
  }
  #t_side ul{
    padding-left: 5%;
  }
  #t_side strong{ display: block; font-family:CustomFont1, Palatino Linotype, serif;}
  #t_side .ared{
    position: relative;
    box-sizing: border-box;
	display:flex;
	width:100px;
	height:100px;
	overflow:hidden;
	float:left;
	margin:0.02em;
	text-align:center;
	line-height:1em;
	border:0.05em solid rgba(0,0,0,0.7);
	background-color: rgba(0,0,0,0.7);
    padding: 0em 1em;
    z-index: 10;
    letter-spacing: 0em;
    text-shadow: 0.2em 0.2em 0.1em #000;
    justify-content: center;
	-webkit-align-items: flex-end;
    align-items: flex-end;
    font-weight: bold;
	}
	#t_side .ared img{
		box-sizing: border-box;
		width:100%;
		margin:0;
		position: absolute;
		top: 0;
		left: 0;
		border:0.05em solid;
		border-top-color: rgba(255,255,255,0.8);
		border-left-color: rgba(255,255,255,0.5);
		border-right-color: rgba(255,255,255,0.5);
		border-bottom-color: rgba(0,0,0,0.5);
		opacity: 0.85;
		z-index: -1;
	}
	#t_side .ared img:hover{
	  opacity: 1;
	}
/* end #t_side */


/* media query for big wide screen 2 panel */
@media (min-width:800px){
  #t_content{
    box-sizing: border-box;
    display:inline-block;
    width:65%;
    vertical-align: top;
    margin:auto;
    max-width:800px;
  }
  #t_side{    
    box-sizing: border-box;
    display:inline-block;
    width:30%;
    min-width:250px;
    max-width:370px;
    vertical-align: top;
    margin:auto;
    padding:2.5% 1%;
  }
}
/* end media */

/* #t_footer */
  #t_footer{
    text-align: center;
    background-color: rgba(0,0,0,0.5);
  }
  #t_footer span{
    box-sizing: border-box;
    display: inline-block;
    width: 47%;
    vertical-align: top;
    padding: 3%;
    opacity: 0.7;
  }
  #t_footercopyright{
    padding: 1.7%;
    color: rgba(255,255,255,0.7);
    font-size: 0.88em;
    width: 80%;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: auto;
  }
  @media (max-width:640px){
    #t_footer span{
      width:95%
    }
  }
/* end #t_footer */


/********* Clases *************/
.borderdefault1{
  border: 0.03em solid;
  border-top-color: #fff;
  border-bottom-color: #444;
  border-left-color: #888;
  border-right-color: #888;
}
.superclearer{clear: both;}
.playbutton{
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
}
.smallheader{
  font-size: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0.7;
}
.divider{ 
    width: 94%;
    margin: 0.8em auto 0.8em auto;
    border-bottom:0.01em solid rgba(255,255,255,0.2);
    border-top: 0.01em solid rgba(0,0,0,0.8);
}
.newsheader{
	font-weight:bold;
	font-size:1.1em;
	letter-spacing:0.2em;
	border-bottom:0.1em solid rgba(255,255,255,0.3);
	display:inline-block !important;
}

/* .awhite */
	.awhite{
		display: inline-flex;
		float: left;
		width: 48%;
		height: 44px;
		overflow: hidden;
		margin: 0.1em;
		background: rgba(0,0,0,0.6);
		font-size: 0.8em;
		line-height: 1em;
		align-items: center;
	}
	.awhite img{
		display:block;
		float:left;
		width:50px;
		height:37px;
		margin:0.2em;
	}

	.awhite:hover, .awhite:visited:hover {text-decoration:none; cursor: hand;}
/* end awhite */


/* .divmore */
	.divmore {
		background:rgba(0,0,0,0.3);
		text-align:center;
		font-size:0.6em;
		padding:1em 1em 0em 1em;
	}
	.divmore a span{
		position:relative;
		display:none;
	}
	.divmore a:hover span{
		position:absolute;
		display:block;
		width:100%;
		height:100%;
		text-align:left;
		padding:0.15em;
		border:0.1em solid rgba(0,0,0,0.2);	
		background:rgba(0,0,0,0.5);
		top:0;
		left:0;
		color:#fff;
		font-size:0.9em;
		border-radius:4px;
		line-height:1em !important;
		z-index:25;
		font-weight:normal;
		text-shadow:none;
	}
	.divmore div{
		font-size:1.3em;
		position: relative;
		box-sizing: border-box;
		display:inline-flex;
		width:120px;
		height:105px;
		overflow:hidden;
		/*float:left;*/
		margin:0.02em;
		text-align:center;
		line-height:1em;
		border:0.05em solid rgba(0,0,0,0.7);
		background-color: rgba(0,0,0,0.7);
		padding: 0em 1em 0.5em 0em;
		z-index: 10;
		letter-spacing: 0em;
		text-shadow: 0.2em 0.2em 0.1em #000;
		justify-content: center;
		align-items: flex-end;
		font-weight: bold;
	}
	.divmore div img{
		box-sizing: border-box;
		/*width:100%;*/
		height:75%;
		margin:0;
		position: absolute;
		top: 50%;
		left: 50%;
		right: 0;
		transform: translate(-50%, -66%);
		border:0.05em solid;
		border-top-color: rgba(255,255,255,0.8);
		border-left-color: rgba(255,255,255,0.5);
		border-right-color: rgba(255,255,255,0.5);
		border-bottom-color: rgba(0,0,0,0.5);
		opacity: 1;
		z-index: -1;
	}
	.divmore div img:hover{
	  opacity: 1;
	}
/* end .divmore */