@charset "utf-8";

::selection { background: #dd0000; color: #ffffff; }

@font-face {
   font-family: 'Oswald';
   font-style: normal;
   font-weight: 400;
   src: local('Oswald Regular'), local('Oswald-Regular'), url('../fonts/Oswald/Oswald-Regular.woff') format('woff');
}

* { box-sizing: border-box; margin: 0; }


html, body {
   width : 100%;
   height: 100%;
   background-color: #000000;
   color: #FFFFFF;
   font-family: Oswald, Arial,Helvetica,sans-serif;
   font-weight: 400;
   text-shadow: 0 0 0 rgba(0, 0, 0, 0);
   z-index: 0;
   cursor: default;
}

#log, #hasFullscreen, #support, #state, #resize, #resize_timeout, #mainint { display: none; position: absolute; }

.outer_flex-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
   height: 100%;
}

.outer_flex-container-item {
  display: block;
  flex: 100%;
  flex-grow: 0;
  align-self: center;
   max-height: 100%;

  padding-top: calc( (1vw + 1vh) * 1 );
  padding-bottom: calc( (1vw + 1vh) * 1 );
  padding-left: calc( (1vw + 1vh) * 4 );
  padding-right: calc( (1vw + 1vh) * 4 );
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  background-color: #1B1B1B;
  border: 0.5rem solid #B1B1B1;
  border-radius: 1rem;
}

.flex-item {
  align-self: center;
  text-align: center;
  border-radius: 0.5rem;

}

.flex-item-container-left {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: center;
   height: 100%;
   background-color: none;
   color: whitesmoke;
   text-align: center;
   border-radius: 0.5em;
}

.flex-item-container-left-item {
  background-color: #1B1B1B;
  align-self: center;
  height: 100%;
  color: #000;
  padding: calc( ( 2vw + 2vh ) );
  background-color: #1B1B1B;
  border-radius: 0.5rem;
}

.urllink{
   display: flex;
   flex-direction: row;
   justify-content: center;
   border-radius: 0.5rem;
}

#maingrafic {
   object-position: center;
   border-radius: 0.5em;
   box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.98), 0 0 0.5rem rgba(255, 255, 255, 1);
   width: 30vw;
   max-width: 800px;
}

 #maingrafic:hover {
   color:#FFFFFF;
   box-shadow: 0.08rem 0.04rem 0.05rem rgba(255, 0, 0, 0.98), 0.8rem 0.6rem 0.8rem rgba(128, 128, 128, 0.75);
}


/*RIGHT SIDE*/
.flex-item-container-right {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: center;
   height: 100%;
   color: whitesmoke;
   text-align: left;
   border-radius: 0.5rem;
}


.flex-item-container-right-item {
  background-color: #B1B1B1;
  align-self: center;
  height: 100%;
  padding: 0.5em;
  color: #000;
  background-color: #1B1B1B;
  border-radius: 0.5rem;
}

#urllinks {
   display: inline-block;
   position:relative;
   width: auto;
   text-align: left;
   margin: 0 auto;
   padding: 0;
}

h1, h5 {
   white-space: nowrap;
}

.item-link:link,
.item-link:visited {
   color:#BBBBBB;
   transition: color 0.5s linear 0s;
   text-decoration:underline;
}
.item-link:hover,
.item-link_illu:link,
.item-link_illu:visited,
.item-link_illu:hover {
   color:#FFFFFF;
   text-shadow: 0.08em 0.04em 0 rgba(255, 0, 0, 0.99),  0.6em 0.3em 0.15em rgba(128, 128, 128, 0.99);
   text-decoration:none !important;
}

.item-link:link span,
.item-link:visited span,
.item-link-span:link,
.item-link-span:visited {
   color: #DD0000;
   transition: color 0.5s linear 0s;
   text-decoration:none !important;
}


.item-link:hover span,
.item-link-span:hover,
.item-link-span_illu:link,
.item-link-span_illu:visited,
.item-link-span_illu:hover {
   color:#FFFFFF;
   text-shadow: 0.08em 0.04em 0 rgba(255, 0, 0, 0.99),  0.6em 0.3em 0.15em rgba(128, 128, 128, 0.99);
   text-decoration:none !important;
}
#footer,
#footer h5,
#footer h5 a,
#footer h5 .item-link {
   text-decoration: none;
}

/*#footer h5 {
   display: inline-block;
}*/

#footer {
   text-align: left;
   padding: 3vh 0 0 0;
}

h1 {
   font-size: calc( (((1vw + 1vh ) / 100) * 72 ) * 3 );
   padding: 0 1rem;
}

.icon-white {
   font-size: calc( (((1vw + 1vh ) / 100 ) * 72 ) * 4.5  );
}

h5 {
   display: inline-block;
   font-size: calc( (((1vw + 1vh ) / 100) * 72 ) * 1.25 );
   padding: 0 2vw;
}


 @media
 only screen and (orientation: landscape),
 only screen and (min-aspect-ratio: 1.15 / 1) {
   .flex-container {
      flex-wrap: nowrap;
   }

   .flex-item {
      flex: 50%;
   }

   .flex-item-container-left {
         justify-content: right;
   }
   .flex-item-container-right {
         justify-content: left;
   }

   .flex-item-container-left-item,
   .flex-item-container-right-item {
      flex: 100%;
   }

   #maingrafic {
      width: 30vw;
   }

   .flex-item-container-right-item {
      text-align: left;
   }


   h1 {
      font-size: calc( (((1vw + 1vh ) / 100) * 72 ) * 3 );
      padding: 0 1rem;
   }

   .icon-white {
      font-size: calc( (((1vw + 1vh ) / 100 ) * 72 ) * 4.5  );
   }

   h5 {
      display: inline-block;
      font-size: calc( (((1vw + 1vh ) / 100) * 72 ) * 1.25 );
      padding: 0 2vw;
   }

   #urllinks {
      margin: 0;
      padding: 1vh 0 0 0;
   }

   h1, h5, .icon-white {
      line-height: calc( (((1vw + 1vh ) / 100) * 72 ) * 2.7 );
   }

   #footer {
      text-align: left;
      padding: 3vh 0 0 0;
   }

   .icon-white-small, .fontsize_dyn2 {
      font-size: calc( 0.3rem + (1vw * 1.5) );
      line-height: calc( 0.3rem + (1vw * 6) );
   }

   .icon-white-small { padding: 0 0.5em 0 0.3em; }

   .space-right-2 { margin-right: calc( 1em + (1vw * 3) ); }
}


@media
only screen and (orientation: portrait),
only screen and (min-aspect-ratio: 0.95 / 1) and (max-aspect-ratio: 1.15 / 1) {

   .flex-container {
      flex-wrap: wrap;
   }

   .flex-item {
      flex: 100%;
      align-self: auto;
      }

   .flex-item-container-left,
   .flex-item-container-right {
         justify-content: center;
   }

   .flex-item-container-left-item,
   .flex-item-container-right-item {
      flex: 50%;
   }

   #maingrafic {
      width: 33vh;
   }

   .flex-item-container-right-item {
      text-align: center;
   }

   #urllinks {
      margin: 0;
      padding: 0;
   }

   #footer {
      text-align: center;
      padding: 4vh 0 0 0;
   }

   h1 {
      font-size: calc( 0.3rem + (1vh * 4) );
      line-height: calc( 0.3rem + (1vh * 4) );
      padding: 0 1rem;
   }

   h5 {
      display: inline-block;
      font-size: calc( 0.3rem + (1vh * 1) );
      line-height: calc( 0.3rem + (1vh * 4) );
      padding: 0 1rem;
   }
}