@charset "UTF-8";

html {
  height: 100%;
  background-color: #000;
}

body {
  height: 100%;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 10px;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 200px;
  background-position: center;
  background-attachment: fixed;
  min-width: 100%;
  min-height: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Inline-SVG-Icons (Ersatz fuer FontAwesome, Opera-Presto-kompatibel).
   Default fuer Inline-Icons in Buttons/Links/Spans der TV-UI: 1em quadratisch,
   Farbe via currentColor. Behaelt sich gegenueber spezifischeren Layout-Regeln
   zurueck (z.B. nav.main .items a span.image svg, video-controls etc.). */
button > svg, a > svg, span > svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}
svg.fa-rotate-180 { transform: rotate(180deg); }
svg.fa-rotate-90  { transform: rotate(90deg); }
svg.fa-rotate-270 { transform: rotate(270deg); }

.vw-5  { 
  width: 5vw;  
  max-width: 5vw; 
}

.col-2  { 
  width: 10%; 
  max-width: 10%;
}

.col-1  { 
  width: 5%;  
  max-width: 5%; 
}

.col-2  { 
  width: 10%; 
  max-width: 10%;
}

.col-3  { 
  width: 15%; 
  max-width: 15%;
}

.col-4  { 
  width: 20%; 
  max-width: 20%;
}

.col-5  { 
  width: 25%; 
  max-width: 25%;
}

.col-6  { 
  width: 30%; 
  max-width: 30%;
}

.col-7  { 
  width: 35%; 
  max-width: 35%;
}

.col-8  { 
  width: 40%; 
  max-width: 40%;
}

.col-9  { 
  width: 45%; 
  max-width: 45%;
}

.col-10 { 
  width: 50%; 
  max-width: 50%;
}

.col-11 { 
  width: 55%; 
  max-width: 55%;
}

.col-12 { 
  width: 60%; 
  max-width: 60%;
}

.col-13 { 
  width: 65%; 
  max-width: 65%;
}

.col-14 { 
  width: 70%; 
  max-width: 70%;
}

.col-15 { 
  width: 75%; 
  max-width: 75%;
}

.col-16 { 
  width: 80%; 
  max-width: 80%;
}

.col-17 { 
  width: 85%; 
  max-width: 85%;
}

.col-18 { 
  width: 90%; 
  max-width: 90%;
}

.col-19 { 
  width: 95%; 
  max-width: 95%;
}

.d-inline-b{
 display: inline-block;
}

.d-b{
  display: block;
 }

.h1{
  font-size:3em !important;
}

.h2{
  font-size:2em !important;
}

.h3{
  font-size:1.75em !important;
}

.h4{
  font-size:1.5em !important;
}

.h5{
  font-size:1.25em !important;
}

.h6{
  font-size:1em !important;
}

@media (min-width: 1500px) {
  .h1{
    font-size:4em !important;
  }

  .h2{
    font-size:3.25em !important;
  }

  .h3{
    font-size:2.75em !important;
  }

  .h4{
    font-size:1.75em !important;
  }

  .h5{
    font-size:1.5em !important;
  }

  .h6{
    font-size:1em !important;
  }
}

.h-10{
  height: 10% !important;
  max-height:10% !important;
}

.h-100{
  height: 100% !important;
  max-height:100% !important;
}

.w-100{
  width:100% !important;
  max-width:100% !important;
}

.p-0{
  padding:0!important;
}

.p-1{
  padding: 0.25rem!important;
}

.p-2{
  padding: 0.5rem !important;
}

.p-3{
  padding: 1rem!important;
}
.p-4{
  padding: 1.5rem!important;
}

.p-5{
  padding: 3rem!important;
}

.p-0-75em{
  padding: 0.75em !important;
}

.p-1em{
  padding: 1em !important;
}

.p-1-5em{
  padding: 1.5em !important;
}

.p-2em{
  padding: 2em !important;
}

.pt-0-5em{
  padding-top: 0.5em !important;
}

.pt-1-5em{
  padding-top: 1.5em !important;
}

.pt-2em{
  padding-top: 2em !important;
}

.pt-3em{
  padding-top: 3em !important;
}

.pb-0-5em{
  padding-bottom: 0.5em !important;
}

.pb-1-5em{
  padding-bottom: 1.5em !important;
}

.pb-2em{
  padding-bottom: 2em !important;
}

.pl-1em{
  padding-left: 1em !important;
}

.pl-1-5em{
  padding-left: 1.5em !important;
}

.pr-0-25em{
  padding-right: 0.25em !important;
}

.pr-1em{
  padding-right: 1em !important;
}

.pr-1-5em{
  padding-right: 1.5em !important;
}

.m-auto{
  margin:auto!important;
}

.m-0{
  margin:0!important;
}

.m-1em{
  margin: 1em !important;
}

.ml-0-25em{
  margin-left: 0.25em;
}

.mt-0-25em{
  margin-top: 0.25em !important;
}

.mt-0-5em{
  margin-top: 0.5em !important;
}

.mt-1em{
  margin-top: 1em !important;
}

.mb-0-5em{
  margin-bottom: 0.5em !important;
}

.row1-equal .col{
  padding-left: 1em;
  padding-right: 1em;
}

.border-r-15 {
  border-radius: 15px;
}

.border-rt-15 {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.box-shadow{
  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.5);
}

.overflow-h{
  overflow: hidden;
}

.text-container{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.no-wrap{
  white-space: nowrap;
}

.pos-a{
  position: absolute !important;
}

.pos-r{
  position: relative !important;
}

.pos-f{
  position: fixed !important;
}


.top-0{
  top: 0;
}

.top-50{
  top: 50%;
}

.left-0{
  left:0;
}

.left-50{
  left:50%;
}

.word-break{
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

body strong, body .bold, body.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body em {
  font-style: italic; }

body > h1 span {
  display: none; }

body > .content {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 200;
  overflow: hidden;
}

#navbar{
  position: absolute;
  width:25%;
  top: 1.2em;
  left: 75%;
  z-index:0;
}

#navbarBox{
  float:right;
}

body > .content #openMailboxBtn, body > .content #language{
  display: inline-block;
  vertical-align: top;
  margin-right: 2em;
  padding: 1em;  
}

body > .content #selectLanguageDiv {
  display: inline;
  position: absolute;
  right:1em;
  width: 25%;
  height: 100%;
  background-color: rgba(62, 77, 84, 0.92);
  margin-right: -1em;
  padding: 1em;
  z-index:1;
}

.cell{
  display: inline-block;
  width: 33.33%;
  text-align: center;
}

@media (width:1280px) {
  body > .content.fadeout-with-navigation #language {
    top: 140px;
  }
}

.em-0-5{
  height: 0.5em;
  width: 0.5em;
}

.em-1-5{
  height: 1.5em;
  width: 1.5em;
}

.em-2{
  height: 2em;
  width: 2em; 
}

#confirmDeleteDiv{
  position: absolute;
  top: 30%;
  left: 25%;
  height: 16%;
  width: 50%;
  z-index: 500;
  border-radius: 12px;
  padding: 1em;
  text-align: center;
  background-color: rgb(92, 92, 92);
  font-size: 3em;
  box-sizing: border-box;
}

#confirmDeleteDiv p1{
  display:block;
}

#confirmDeleteDiv #confirmDeleteButtons{
  display: inline-block !important;
  width:100%;
  box-sizing: border-box;
}

#confirmDeleteDiv #confirmDeleteButtons div{
  position: relative;
  display: inline-block !important;
  border-radius:5px;
  margin:1em;
  bottom: 0em;
}

#confirmDeleteDiv #confirmDeleteButtons div a{
  text-decoration: none;
  color:white;
  border-radius: 5px;
}
#confirmButton a{
  display: inline-block !important;
  padding: 0.5em 1em;
  background-color: rgba(63, 63, 63 ,0.9) !important
}

#confirmButton a.active{
  background-color: rgba(146 , 146, 146 ,0.9) !important;
  border: 1px solid rgb(40, 40, 40);
  outline: none;
}

#cancelButton a{
  display: inline-block !important;
  padding: 0.5em 1em;
  background-color: rgba(63, 63, 63 ,0.9) !important
}

#cancelButton a.active{
  background-color: rgba(146 , 146, 146 ,0.9) !important;
  border: 1px solid rgb(40, 40, 40);
  outline: none;
}

.deleteDiv{
  height:100%;
  width:15%; 
  /* padding: 0.65em; */
  box-sizing: border-box;
  text-align: center;
}
.deleteDiv img {
  height: 100%;
  width: 100%;
  transform-origin: center;
  transform: scale(0.5);
}

.deleteDiv.focused img {
  height: 100%;
  width: 100%;
  transform-origin: center;
  transform: scale(0.7);
}

.timeDiv{
  color: rgb(255, 255, 255);
  height:40%;
  width:90%; 
  padding-left: 0.3em;
  box-sizing: border-box;
}

.deleteBox{
  text-align: center;
  vertical-align: middle;
  background-color:white;
  border-radius: 5px;
  padding:0.5em;
  width: 8em;
  float: left;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}

body > .content a img {
  height: 5em;
  width: 7.5em;
  border-radius: 10%;
}

body > .content #openMailboxBtn img {
  background-color:white;
}

body > .content a.active{
  outline: none;
}

body > .content a.active img{
  height: 6em;
  width: 9em;
  padding: 0em 0em 0em 0em;
}

#messageIcon{
  display: inline-block;
  background-color: rgba(200, 4, 0, 0.95);
  border-radius: 100%;
  border:0.75px solid black;
  text-align: center;
  padding: 0.5em;
  margin-top: -1.5em;
  margin-left: -1.5em;
  position: absolute;
}

#messageIconBox{
  height: 1.5em;
  width: 1.5em;
}

#messageIconBox img{
  background-color: transparent !important;
  color: white;
  border-radius: 0 !important;
  height: 1.5em !important;
  width: 1.5em !important;
}

body > .content a.active #messageIcon #messageIconBox, body > .content a.active #messageIcon #messageIconBox img{
  height: 1.8em!important;
  width: 1.8em!important;
}


a.active #messageIcon{
  margin-top: -1.8em;
  margin-left: -1.8em;
}

body > .content a.active #messageIcon{
  padding: 0.8em;
  
}

body > .content #selectLanguageDiv img {
  height: 6em;
  width: 9em;
  margin: 1em 1em 1em 1em;
}

body > .content #selectLanguageDiv a.active {
  outline: none;
}

body > .content #selectLanguageDiv a.active img {
  height: 8em;
  width: 12em;
  margin: 0em 0em 0em 0em;
}

body > .content #mailboxDiv{
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 7.5%;
  width: 75%;
  max-width: 75%;
  height: 85%;
  background-color: rgba(37, 37, 37, 0.95);
  padding: 0px;
  z-index:400;
  margin-bottom:400px;
  box-sizing: border-box;
  border-radius: 12px;
}

#noMessageDiv{
  width: 100%;
  height: 100%;
  padding-top: 20%;
  font-size: 4em;
}

.scroll-container{
  position: relative;
  display: inline-block;
  width: 1%;
  height: 100%;
  background-color: rgba(37, 37, 37, 0.95);
  border-right: solid 1px rgba(255, 255, 255, 0.4)!important;
  border-left: solid 1px rgba(255, 255, 255, 0.4)!important;
  box-sizing: border-box;
}

.scrollbar-thumb {
  width: 100%;
}

.scrollbar-thumb-on{
  height: 30%;
  position: relative;
  border-radius: 10px;
  background-color: rgba(100, 100, 100, 0.95);
}

#mailboxList{
  display: inline-block;
  width: 29%;
  max-width: 29%;
  height: 100%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row{
  width: 100%;
  max-width: 100%;
  max-height: 10%;
  height: 10%;
  /* border-bottom: solid 1px  rgba(255, 255, 255, 0.4)!important; */
  padding: 1.5% 1.5%;
  font-size: 1.9em;
  line-height: 1.5em;
  box-sizing: border-box;
}

#mailboxList > div:nth-child(odd) {
  background-color: rgba(65, 65, 65, 0.9)!important;
}
#mailboxList > div:nth-child(even) {
  background-color: rgba(50, 50, 50, 0.9)!important;
}

/* .row:last-child {
  border-bottom: solid 0px  rgba(255, 255, 255, 0.4)!important;
} */

.row div{
  display: inline-block;
}

.focusedRow .focused {
  background-color: rgba(80, 80, 80, 0.9)!important;
}

.messageBackground{
  height:100%;
  width:85%; 
}

.messageTextInfo{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-family: 'montserratregular',sans-serif;
font-size: 1.5em;
line-height: 1.5em;
height: 1.5em;
height: 60%;
width: 85%;
color:rgb(255, 255, 255);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.confirmImgDiv{
  height:60%;
  width:15%;
  padding-left: 0.3em;
  box-sizing: border-box;
}

.v-a-top{
  vertical-align: top;
}

.v-a-middle{
  vertical-align: middle;
}

.v-a-bottom{
  vertical-align: bottom;
}

.float-right{
  float: right!important;
}

.float-left{
  float: left!important;
}

#messageBox{
  display: inline-block;
  width: 70%;
  max-width: 70%;
  height: 100%;
  vertical-align: top;
  box-sizing: border-box;
}

#subjectText{
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 10%;
  max-height: 10%;
  padding-left: 2%;
  font-size: 6em;
  line-height: 1.7em;
  border-bottom: solid 1px rgba(255, 255, 255, 0.4)!important;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
}

#messageText{
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 91%;
  max-height: 91%;
  padding: 2%;
  font-weight: 400;
  font-size: 4em;
  line-height: 1.5em; 
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
}

body > .content.invisible {
  opacity: 0;
  pointer-events: none; }

body > .content.animate {
  -webkit-transition: opacity 750ms ease-in-out 400ms;
  -moz-transition: opacity 750ms ease-in-out 400ms;
  -ms-transition: opacity 750ms ease-in-out 400ms;
  -o-transition: opacity 750ms ease-in-out 400ms;
  transition: opacity 750ms ease-in-out 400ms; }

body > .content.animate.invisible {
  -webkit-transition: opacity 750ms ease-in-out;
  -moz-transition: opacity 750ms ease-in-out;
  -ms-transition: opacity 750ms ease-in-out;
  -o-transition: opacity 750ms ease-in-out;
  transition: opacity 750ms ease-in-out; }

body > .content .column-50 {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding-right: 20px;
  float: left; }

body > .content .column-60 {
  display: block;
  position: relative;
  width: 60%;
  margin: auto;
  padding: 10px 0;
}

body > .content .loading {
  display: block;
  position: relative;
  margin: auto;
  text-align: center;
  height: 100%;
}

body > .content .loading .plabor {
  position: absolute;
  top: 2em;
  left: 2em;
  width: 10%;
}

body > .content .loading .imperator {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  padding-top: 10%;
}

body > .content #wait {
  position: absolute;
  bottom: 10%;
  width: 100%;
}

body > .content #wait img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 8%;
}

body > .content > .version {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
  padding: 0.2em;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 2em;
  letter-spacing: .025em;
}

body > .content.major .column-60 {
  padding: 84px 0; }

body > .content .column-right {
  display: block;
  position: relative;
  width: 42%;
  left: 54%;
  font-size: 14px;
}

body > .content h1 {
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 3.6em;
  text-transform: uppercase;
  letter-spacing: .025em;
}

body > .content h1 strong, body > .content h1 .bold, body > .content h1.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content h1 em {
  font-style: italic; }

body > .content h2 {
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 3.2em;
  letter-spacing: .025em;
}

body > .content h2 strong, body > .content h2 .bold, body > .content h2.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content h2 em {
  font-style: italic; }

body > .content h3 {
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 2.5em;
  letter-spacing: .025em;
}

body > .content h3 strong, body > .content h3 .bold, body > .content h3.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content h3 em {
  font-style: italic; }

body > .content h4 {
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 2em;
  letter-spacing: .025em;
}

body > .content h4 strong, body > .content h4 .bold, body > .content h4.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content h4 em {
  font-style: italic; }

body > .content p {
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 2.4em;
  line-height: 1.5em; }

body > .content p strong, body > .content p .bold, body > .content p.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content p em {
  font-style: italic; }

body > .content ul {
  display: block;
  margin: 0;
  margin-bottom: .5em;
  padding: 0;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 2.1em;
  line-height: 1.5em;
  list-style: none; }

body > .content ul strong, body > .content ul .bold, body > .content ul.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content ul em {
  font-style: italic; }

body > .content ul li {
  padding-left: 1em; }

body > .content ul li:before {
  content: "- "; }

body > .content dl {
  display: block;
  position: relative;
  margin: 0;
  margin-bottom: .5em;
  padding: 0;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  font-size: 2.1em;
  line-height: 1.5em;
  list-style: none; }

body > .content dl strong, body > .content dl .bold, body > .content dl.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content dl em {
  font-style: italic; }

body > .content dl dt {
  display: inline-block;
  width: 48%;
  margin: 0;
  padding: 0; }

body > .content dl dd {
  display: inline-block;
  width: 50%;
  margin: 0;
  padding: 0;
  text-align: right;
  position: absolute;
  right: 30px; }

body > .content dl dd.cost {
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  -webkit-font-feature-settings: "tnum" 1;
  -moz-font-feature-settings: "tnum" 1;
  -ms-font-feature-settings: "tnum" 1;
  -o-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1; }

body > .content dl dd.cost strong, body > .content dl dd.cost .bold, body > .content dl dd.cost.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

body > .content dl dd.cost em {
  font-style: italic; }

body > .content hr {
  display: block;
  height: 1px;
  outline: none;
  border: none;
  background-color: #fff; }

body > .content img.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:40em;
}

body > .content img.float-left {
  display: block;
  max-width: 300px;
  height: auto;
  margin-right: 3em;
  margin-bottom: 1em;
  padding-top: 1em;
  color: transparent;
  float: left; }

body > .content a.button {
  margin-top: 3em; }

a.button {
  display: inline-block;
  height: 58px;
  padding: 0 30px;
  color: #fff;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.4em;
  line-height: 58px;
  text-decoration: none;
  border: 2px solid #fff;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  overflow: hidden; }

a.button strong, a.button .bold, a.button.bold {
  font-family: 'montserratbold',sans-serif;
  font-weight: 400; }

a.button em {
  font-style: italic; }

a.button.active, a.button:hover {
  height: 54px;
  padding: 0 28px;
  line-height: 54px;
  border: 4px solid #fff;
  outline: none;
  -webkit-box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.4); }

a.button.icon {
  padding-left: 58px;
  background-position: 5px 5px;
  background-repeat: no-repeat;
  background-size: 48px; }

a.button.icon.active, a.button.icon:hover {
  padding-left: 56px;
  background-position: 3px 3px; }

a.button.floating {
  position: absolute;
  z-index: 250; }

a.button.floating.left {
  left: 25px; }

a.button.floating.top {
  top: 20px; }

.align-center {
  text-align: center; }

.align-left {
  text-align: left; }

.align-right {
    text-align: right; 
}

.align-justify {
    text-align: justify; 
}

body > .content img.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body > .content img.align-left {
  display: block;
  margin-right: auto;
}

body > .content img.align-left.float {
  float: left;
  margin-right: 1em;
}

body > .content img.align-left.float:not([class*="spacing-"]) {
  margin-top: 1em;
}

body > .content img.align-right {
  display: block;
  margin-left: auto;
}

body > .content img.align-right.float {
  float: right;
  margin-left: 1em;
}

body > .content img.align-right.float:not([class*="spacing-"]) {
  margin-top: 1em;
}

body > .content svg.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body > .content svg.align-left {
  display: block;
  margin-right: auto;
}

body > .content svg.align-left.float {
  float: left;
  margin-right: 1em;
}

body > .content svg.align-right {
  display: block;
  margin-left: auto;
}

body > .content svg.align-right.float {
  float: right;
  margin-left: 1em;
}

body > .content svg.qrcode {
  border: 0.5em solid #ffffff;
  border-radius: 1em;
}

.clear {
  clear: both; }

.hidden {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none; }

BODY {
  overflow: hidden; }

.w {
  min-height: 40%;
  max-height: 80%;
  height: 80%;
  z-index: 9999; }

.invisible {
  display: none;
  visibility: hidden; }

.visible {
  display: block;
  visibility: visible; }

UL {
  list-style-type: none; }

.animate-zoom {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s; }

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0); }
  to {
    -webkit-transform: scale(1); } }

@keyframes animatezoom {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

.w8wrapper1 {
  z-index: 10000;
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 100%; }

.w8mwrapper2 {
  margin: auto;
  width: 80%;
  height: 100%; }

.blur {
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px); }

.deactive {
  height: 100%;
  width: 100%;
  background-color: rgba(40, 40, 40, 0.9);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; }

.transparent {
  background: #BE1E3C;
  background: rgba(191, 170, 64, 0);
  color: #ffffff;
  transition: background 1s; }

#guestname > H4 {
  color: rgb(255, 255, 255); }

#code {
  height: 40px;
  width: 200px; }

#code > DIV {
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid transparent;
  border-top: none;
  border-bottom: 1px solid #DDD;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #fff, 0 1px 0 #fff;
  outline: 0;
  padding: 8px 6px;
  font-size: 3em;
  overflow: hidden; }

#code > DIV > UL {
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
  color: #000;
  width: 110%; }

#code > DIV > UL > LI {
  padding-left: 14px;
  width: 35px;
  float: left;
  border-right: 1px solid #969696;
  height: 100%; }

#code > DIV > UL > LI:nth-last-child(1) {
  border-right: 0; }

#code .active {
  background-color: #c8c8c8; }

IMG.f1 {
  position: relative;
  top: 10px; }

IMG.f2 {
  position: relative;
  top: 5px; }

IMG.f3 {
  position: relative;
  top: 3px; }
  
.box-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
  
body p.state {
    font-size:3em;
  }

@media (width:1280px) {
  body > .content {
    font-weight: 400;
    font-size: 6px;
  }
}

.sharemagazines {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'montserratmedium',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-family: 'montserratregular',sans-serif;
  letter-spacing: .025em;
  clear: both; 
  width: 25%;
}

.qr {
  width: 100%;
}

.qr2 {
	position: relative;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.sharemagazines .title {
  font-size: 3em;
  padding-bottom: 1em;
}

.sharemagazines .duration {
  font-size: 2.0em;
  padding-bottom: 0.25em;
}

.sharemagazines .token {
  font-size: 2.0em;
  letter-spacing: 0.5em;
  padding-top: 0.25em;
}

.sharemagazines .limit {
  font-size: 2.0em;
}

.sharemagazines img {
  margin-left: auto;
  margin-right: auto;
}

.spacing-s {
  margin-top: 2%;
}

.spacing-m {
  margin-top: 4%;
}

.spacing-l {
  margin-top: 8%;
}

.spacing-xl {
  margin-top: 16%;
}

.spacing-xxl {
  margin-top: 32%;
}

.sidebar{
  top:0;
  left:0;
  overflow: hidden;
  box-sizing: border-box;
  border-right: 1px solid #969696;
  transition: width 0.4s ease;
  width: 5%;
  z-index: 1000;
}

.sidebar:hover,.sidebar.open {
  width: 20%;
  max-width: 20%;
}

.sidebar.open li.active {
  color: white;
  box-shadow: 0px 0px 35px 5px rgba(0, 0, 0, 0.5);
}

.sidebar .nav-text{
  display:none;
  overflow: hidden;
  word-wrap: break-word;
  white-space: normal;
}

.sidebar:hover .nav-text,.sidebar.open .nav-text{
  display: inline-block;
}


#fullscreen-fade {
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
    display: block;
    transition: opacity 500ms ease-in-out;
}