/*BASIC ELEMENTS*/

body, html {
  background-color:#4b586b;
  color:#000;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  margin: 0 !important;
  padding: 0 !important;
  text-align:center;
  font-size:1.5em;
}


.desktop {
  display:none;
}


.print {
  display:none;
}

a, a:active {
  color:#000;
}

a:hover {
  color:#20272f;
  text-decoration:none;
}


img {
  border: 0;
  vertical-align: middle;
}


h1 a:link, h1 a:active, h1 a:focus, h1 a:visited {
  color:#000;
  text-decoration:underline;
}

h1 a:hover {
  color:#20272f;
  text-decoration:none;
}

h2, h2 a {
  color:#fff;
  font-size: 1.1em;
  margin: 0;
  padding: 0;
  text-align: left;

  text-decoration:none;
  text-shadow: 2px 2px 2px #999;
}

h3, h3 a {
  font-family : Verdana,Arial,sans-serif;
  margin: 15px 0 0 0;
  padding:0;
  text-decoration:none;
}

h4, h4 a {
  font-family : Verdana,Arial,sans-serif;
  font-size : .95em;
  margin: 25px 0 3px 0;
  padding:0;
  text-decoration:none;
  color: #4b586b;
}


h5 {
  font-family : Verdana,Arial,sans-serif;
  font-size: .90em;
  margin: 15px 0 0 0;
  padding: 0;
}


h6 {
  font-size: .90em;
  margin: 15px 0 0 0;
  padding: 0;
}







/* MENUS - SUBMENU */
.submenu a:hover, .submenu2 a:hover {
  background-color:#4b586b;
  color:#FFF;
}


.submenu ul {
  margin-bottom:10px;
}



a.tooltip, a.tooltipR {
  position: relative;
  text-decoration: none;
}
a.tooltip:before, a.tooltipR:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-color:#660000;
  border-top: 20px solid #ACB2BB;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  opacity: 0;
  bottom:90%;
  margin-bottom:10px;
}

a.tooltip:before {
  margin-left:-8px;
  left: 30%;
}
a.tooltipR:before {
  right: 30%;
}

a.tooltip:hover:before, a.tooltipR:hover:before {
  bottom: 70%;
}

a.tooltip:after, a.tooltipR:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  background: #ACB2BB;
  padding: 5px 15px;
  color: black;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  margin-bottom:10px;
}

a.tooltip:after {
  margin-left:-5px;
  left: 20%;
}

a.tooltipR:after {
  right: 20%;
}


a.tooltip:hover:after, a.tooltipR:hover:after {
  bottom: 100%;
}

a.tooltip:hover:after, a:hover:before, a.tooltipR:hover:after {
  opacity: 1;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color:#bdc5cf;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  margin-top:15px;
  z-index: 1;
  font-size:0.85em;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.dropdown-content div:first-child {
  font-weight: bold;
  font-family:Verdana;
  font-size:0.85em;
  margin-bottom:15px;
}

























/*FRAMEWORK - LINKLINE*/
ul.lil {
  margin: 5px 0;
  padding: 0;
}
.lil li {
  display: inline;
  margin-right:1px;
}
.lil h1 {
  font-size: .85em;
  font-weight:normal;
  font-style: italic;
  line-height:1.5;
  display:inline;
  margin: 0 5px 0 5px;
}


/*FRAMEWORK - HEADER*/
#header {
  background-image:url("/styles/rise/header.jpg");
  /*border:1px solid #660000;*/
  background-position:left top;
  background-repeat:no-repeat;
  clear: both;
  min-height: 0;
  margin: 5px 0 10px 0;
  padding: 0;
  position: relative;
  width:100%

}
#header:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}


#logo {
  border:2px solid #660000;
/*  border-collapse: collapse;*/
  height:150px;
  margin:0;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 10;
}



/*FRAMEWORK - HEADERMENU*/
#headermenu {
  background-color:#737e8d;
  border:2px solid #660000;
  border-top:0;
}

#headermenu table {
  height:100%;
  margin:0;
  margin-right:1px;
  padding:0;
  width:100%;
  background-color:#737e8d;
  border-spacing:0;
}
#headermenu td {
  /*height:30px;*/
  text-align:center;
  vertical-align:middle;
  border-color:#660000;
  border-collapse:collapse;
  padding:0;
  margin:0;
  border-style:solid;
  border-width: 0 1px 0 0;
  width:11%;
}
#headermenu td:hover {
  background-color:#4b586b;
}
#headermenu td:hover a, #headermenu a:hover {
  color:#fff;
  text-shadow: 2px 2px 2px #bdc5cf;
}
#headermenu td a {
  color:#FFF;
  font-family: 'Arimo', Verdana;
  font-size:.85em;
  letter-spacing: 2px;
  text-decoration:none;
  display: block;
  font-weight:bold;
  text-shadow: 2px 2px 2px #000;

  width:100%;
  vertical-align:middle;
}

#headermenu td span, #headermenu td div {
  vertical-align:middle;
  padding: 7px 0;
  display:block;
}











/*FRAMEWORK*/
#container {
/*  font-size:1em;*/
  margin-left:auto;
  margin-right:auto;
  padding: 0 15px 15px 15px;
  text-align: left;
  max-width:1280px;
  min-width:780px;
}

/*FRAMEWORK - SITECONTENT*/
.indexcontent, .sitecontent {
  border:2px solid #660000;
  background-color:#c6ced9;
  margin-bottom:10px;
  padding:0 10px 0 10px;
  text-align:justify;
  overflow: auto;
}


.indexcontent {
  font-size:0.85em;

}
/* .sitecontent:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
} */

.sitecontenthead {
  background-color:#737e8d;
  border-bottom:2px solid #660000;
  color:#fff;
  background-repeat:repeat-x;
  margin:0 -10px 5px -10px;
  padding:5px;
  text-align:center;
}

.sitecontenthead div:nth-child(1) {
  float:left;
}
.sitecontenthead div:nth-child(2) {
  float:right;
}
.sitecontenthead h2 {
  text-align: center;
}
.sitecontenthead:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}


.sitecontentbody:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

.sitecontentfoot {
  background-color:#737e8d;
  min-height:20px;
  color:#000;
  margin:35px -10px 0 -10px;
  padding:5px;
  text-align:center;
  font-size:0.8em;
}

.sitecontentfoot div {
  margin:auto;
}

.sitecontentfoot div:nth-child(1) {
  float:left;
  width:38%;
  text-align:left;
}
.sitecontentfoot div:nth-child(2) {
  float:right;
  width:20%;
  text-align:right;
}

.sitecontentfoot div:nth-child(3) {
  width:38%;
  text-align:center;
}


.sitecontentfoot a {
margin-left:10px;
}
.sitecontentfoot a:first-child {
margin-left:0;
}


/*FRAMEWORK - FOOTER*/
#footer {
  background-color:#737e8d;
  border:2px solid #660000;
  clear:both;
  min-height:150px;
  margin : 5px 0 0 0;
  }

#footer ul {
  list-style-type: none;
}
#footer li, #footer a {
  color : #000;
  font-family : Verdana,Arial,Helvetica,sans-serif;
  font-size: 10pt;
}


#footer a {
  font-weight:bold;
  text-decoration : none;
}

#footer div:nth-child(1) {
  float:left;
  margin:0 20px 0 5px;
}



#footer div:nth-child(2) {
  float:right;
  height:100%;
  margin:20px 20px 0 20px;
}


#footer div:nth-child(3) {
  text-align:center;
  vertical-align:top;
  padding:5px;
}

#footermenu {
  margin-top:10px;
}

#footermenu div {
  float:left;
  margin-right:10px;
}

#footermenu div b {
  margin:10px 0 0 20px;
  font-family:Verdana;
  color:#000;
  text-shadow: 2px 2px 8px #FFF;
}
#footermenu div img {
  margin:10px 0 0 20px;
}

#footermenu a, #footermenu {
   font-family:Verdana;
   font-size: 10pt;
   /*font-weight:bold;*/
   color:#FFF;
   text-shadow: 2px 2px 8px #000;
}


























/*INDEX*/
/*.indexframe {
  margin-right:320px;
}
aber nur für desktop, daher umgezogen.
 */



.eyecatcher {
  float:right;
  width:310px;
}

.eyecatcher > div {
  margin-bottom:10px;
  background-color:#c6ced9;
  border:2px solid #660000;
  border-radius: 5px;
}



.twitter {
  background-image:url("/styles/rise/twitter.png");
  background-repeat:repeat-x;
  padding:0 5px 0 5px;
}



.youtube, .tumblr {
  font: normal normal 14px/1.4 Helvetica,Roboto,"Segoe UI",Calibri,sans-serif;
  color:#292f33;
}

.youtube div, .tumblr div {
  background-color:#737e8d;
  padding:5px 5px 5px 15px;
  color:#8599a6;
}

.youtube a, .tumblr  a{
  text-decoration:none;
}
.youtube div a, .tumblr div a{
  color:#012d7e;
  text-decoration:none;
}
.youtube div span, .tumblr div span{
  font-size:1.5em;
  color:#292f33;
}



/*eyecatcher*/
.youtube {
  width:305px;
  height:189px;
}

.tumblr {
  width:305px;
}


.tumblr p {
  margin:0;
  padding:5px 15px 5px 15px;
  font-size:0.95em;
}

.tumblr p span {
  float:right;
  color:#e1e8ed;
}

.eyecatcher a {
  font-weight:bold:
  text-shadow: 2px 2px 2px #808080;
}

/*yt main page*/
.indexyoutube {
  object-fit: contain;
  min-height:300px;

}































/*FOR Tomb Raider Games Overview - RelicRun-GO switch*/
.gamechanger {
   position: relative;
   margin: auto;
}

.gamechanger div {
  width: 310px;
  text-align: center;
}

.gamechanger table {
   position: absolute;
}

.gamechanger table:nth-child(1) {
   opacity: 1;
   z-index: 100;
   animation: xfade 10s 5s infinite;
}

.gamechanger table:nth-child(2) {
   opacity: 1;
   z-index: 0;
   animation: xfade 10s 0s infinite;
}

@keyframes xfade {
   0% {
      z-index: 100;
      opacity: 1;
   }
   40% {
      z-index: 100;
      opacity: 1;
   }
   50% {
      z-index: 0;
      opacity: 0;
   }
   90% {
      z-index: 0;
      opacity: 0;
   }
   100% {
      z-index: 100;
      opacity: 1;
   }
}









/*TYPE = NEWS*/
.indexcontent .news {

}

.indexcontent .news a {
  text-decoration:underline;
}

.indexcontent .news > div:nth-child(1) {
  margin-top: 0px;
  margin-bottom: 5px;
  font-size:1.0em;
  width:100%;
}

.indexcontent .news > div:nth-child(1):after {
/*bild und content*/
  clear: both;
  content: "";
  display: block;
  height: 0;

}

.indexcontent .news > div:nth-child(1) > div:nth-child(1) {
  float:left;
  margin-right: 15px;
  min-height:200px;

}

.indexcontent .news > div:nth-child(1) > div:nth-child(1)  img {
  object-fit: contain;
  height:100%;
/*  width: 30%;*/
}

.indexcontent .news > div:nth-child(1) > div:nth-child(2) {
/*headline*/
  margin: 20px 0 20px 0;
  text-align:center;
}


.indexcontent .news > div:nth-child(1) > div:nth-child(3) {
/*text*/

}

.indexcontent .news > div:nth-child(1) > div:nth-child(3) div {
/*continue reading*/
  margin-top:15px;
  text-align:right;

}

.indexcontent .news > div:nth-child(2):before {
/*foot*/
  clear:both;

}

.indexcontent .news > div:nth-child(2) {
  background-color:#737E8D;
  color:#fff;
  padding:7px;
  margin-bottom:15px;
/*foot*/
}

.indexcontent .news > div:nth-child(2) a {
  background-color:#737E8D;
  color:#fff;
/*foot*/
}




.indexcontent .news > div:nth-child(2) > div:nth-child(1) {
  float:right;
}


.indexcontent .news > div:nth-child(2) > div:nth-child(2) {
}
/*TYPE = NEWS ENDE*/

















.fancyquote {
  font-family: 'Indie Flower';
}



.comicindex {
  width:100%;
}
.comicindex td {
  width:33%;
  text-align:center;
}
.comicindex table {
  text-align:center;
  margin:auto;
  background-color:#BDC5CF;
}
.comicindex table td {
  height:300px;
  width:215px;
  text-align:center;
  vertical-align:top;
}
.comicindex table th {
  height:20px;
  text-align:center;
}



.img3changer {
   position: relative;
   margin: auto;
}

.img3changer div {
  position: absolute;
  object-fit: contain;
  height:100%;
  width: 100%;
}

.img3changer div:nth-child(1) {
   opacity: 1;
   z-index: 0;
   animation: xfade3 15s 10s infinite;
}

.img3changer div:nth-child(2) {
   opacity: 1;
   z-index: 0;
   animation: xfade3 15s 5s infinite;
}

.img3changer div:nth-child(3) {
   opacity: 1;
   z-index: 0;
   animation: xfade3 15s 0s infinite;
}


@keyframes xfade3 {
   0% {
      z-index: 100;
      opacity: 1;
   }
   28% {
      z-index: 100;
      opacity: 1;
   }
   33% {
      z-index: 0;
      opacity: 0;
   }
   95% {
      z-index: 0;
      opacity: 0;
   }
   100% {
      z-index: 100;
      opacity: 1;
   }
}


/*index Hot Topic*/
.indexHT img {
  object-fit: contain;
  height:100%;
  width: 100%;
  border:0;
}
/*needed to span the div*/

/*INDEX END*/

/*FOR Hot Topic switch*/

.HT, .HTchanger {
   position: relative;
   margin: auto;
}

.HTchanger input {
  display: none;
}

.HTchanger input + div {
  position: absolute;
  display: none;
  z-index: 2;
 /* top: -1px;*/
}

.HTchanger input:checked + div {
  display: block;
}

.HTchanger img {
  object-fit: contain;
  height:100%;
  width: 100%;
}

.HT label {
  position: absolute;
  top:0;
  height:100%;
  object-fit: contain;
}

.HT label img {
  height:100%;
  object-fit: contain;
  z-index: 4;
}

.HT label:nth-child(1) {
  left: 0;
}

.HT label:nth-child(2) {
  right: 0;
}






@font-face {
  font-family: 'NotoEmojiRegular';
  src: url('/styles/fonts/NotoEmoji-Regular.eot');
  src: url('/styles/fonts/NotoEmoji-Regular.woff') format('woff'),
       url('/styles/fonts/NotoEmoji-Regular.ttf') format('truetype'),
       url('/styles/fonts/NotoEmoji-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.trophyB, .trophyS, .trophyG, .trophyP {
  font-family:'NotoEmojiRegular';
   text-shadow: 2px 2px #000;
}

.trophyB {
   color:#cd7f32;
}

.trophyS {
  color:silver;
}

.trophyG {
  color:gold;
}

.trophyP {
  color:#E5E4E2;
}


.slogan {
    position: absolute;
    top: 230px;
    right: 0;
    float:right;
    margin-right:35px;

}









/*GALLERY OLD - noch überarbeiten*/
.trggallery {
  font-size:1em;

}

.trggallery table {
  margin:2px;
  background-color:#BDC5CF;
}

.trggallery table td {
  height:155px;
  width:175px;
  text-align:center;
/*  vertical-align:middle;*/
}

.trggallery table th {
  height:20px;
  text-align:center;
}