.wrapper {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}
.navo{
    border-bottom: 1px solid #dee2e6;
    background: white;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    margin-bottom: 2px;
}

.usum {
    cursor: pointer;
    transition: all 800ms;
    -webkit-filter: drop-shadow( 2px 2px 2px #000 );
    filter: drop-shadow( 2px 2px 2px #000 );
}
.usum:hover{
    opacity: 0.5;
    border: 1px dashed #000;
    stroke-width: 4px;
}
.wrappus{
    padding: 0vh 0;
    position: relative;
    max-width: 1054px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

#inside{
    margin: auto;
    width: 45%;
    height: 50%;
    border-radius: 25px;
    padding: 2vh 0;
}

.profilus img {
    width: 100%;
}
#message {
    margin: 0 0 10px 0;
    color: #c6e7ff;
    border-bottom: 1px solid #fff;
    background-color: #5e647e;
    border-radius: 5px;
    height: 35px;
    background-image: url(../images/bg_game.png);
}
#test-carousel, #project-carousel {
	position:relative;
	margin: 0 auto;
	top: 0px;
	margin-bottom: 30px;
}
.titlus{
	bottom:0px;
}
.imga{
	padding:2px;
	background:#fff;
	border-radius:4px;
	border:1px solid #999;
	width:40px;
	height:50px;
	margin-bottom:10px;
}
.imga2{
	padding:4px;
	background:#fff;
	border-radius:4px;
	border:1px solid #999;
	width:80px;
	height:100px;
	margin-bottom:10px;
}
.imga3{
	padding:4px;
	background:#fff;
	border-radius:4px;
	border:1px solid #999;
	width:60px;
	height:80px;
	margin-bottom:10px;
}
.bo{
	height: 400px;
	overflow-y:auto;
}
.actus {
    background: #d3d5db !important;
}
circle#15001 {
    border: 1px solid #000;
}
li.circlus:hover {
    background: #2e2e2e !important;
}
li.circlus {
    list-style-type: none;
    border-top: 1px solid #393939;
    cursor: pointer;
}
/*
li:nth-of-type(odd) {
background-color:#e6e6e6;
}
    
li:nth-of-type(even) {
background-color:#fff;
}
*/
.seatum li:nth-of-type(odd) {
    background-color: #d9d9d9;
}

.scene .img {
	border-top-left-radius: 15%;
    width: 79px;
    height: 81px;
    position: absolute;
}
.scene .img img{
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
.scene .info{
    background: rgba(255,255,255,0.8);
    position: absolute;
    top: 3px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 265px;
    height: 80px;
    left: 65px;
}
.scene .partyname {
    background: red;
    padding: 3px;
}
.scene .constituency {
    background: blue;
}
.scene .partylogo {
    background: yellow;
}
.labelpic img {
    width: 33px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    padding: 3px;
    background: white;
    border-radius: 5px;
    top: 125px;
    left: 158px;
    -webkit-box-shadow: 0px 0px 11px 2px rgba(0,0,0,0.85);
    -moz-box-shadow: 0px 0px 11px 2px rgba(0,0,0,0.85);
    box-shadow: 0px 0px 11px 2px rgba(0,0,0,0.85);
}

.bg6 {
    position: absolute;
    background: #384250bd;
    left: 35%;
    top: 55%;
    width: 133px;
    height: 69px;
    border-radius: 240px 240px 0 0;
    margin-top: -70px;
    margin-left: -70px;
    -webkit-box-shadow: inset 0px 0px 25px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 25px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 25px 0px rgba(0,0,0,0.75);
    z-index: 0;
}
.bg7 {
    position: absolute;
    background: #e6e6e6;
    left: 13%;
    top: 87%;
    width: 389px;
    height: 104px;
    border-radius: 0px 0px 8px 8px;
    margin-top: -70px;
    margin-left: -70px;
    -webkit-box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 8px 6px -3px rgba(0,0,0,0.75);
}
.bg8 {
    border: 1px solid #cdcdcd;
    border-radius: 6px;
    position: absolute;
    background: #0f1b2840;
    left: 13%;
    top: 75%;
    width: 389px;
    height: 37px;
    margin-top: -70px;
    margin-left: -70px;
    -webkit-box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 8px 4px -7px rgba(0,0,0,0.75);
}
img.imgot {
    padding: 2px;
    border-radius: 5px;
}
img.imgot2 {
    width: 34px;
    border-radius: 2px;
    float: right;
    margin-right: 10px;
    margin-top: 8px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.partylist {
    z-index: 5;
    width: 330px;
    height: 100px;
    overflow-x: hidden;
    top: 180px;
    left: 10px;
}
.partylist a {
    color: #000;
    border-top: 1px solid #efefef;
    font-size: 11px;
    display: block;
    padding: 2px;
}
.partylist a:nth-child(even){
  background-color: white;
}

.partylist a:nth-child(odd) {
  background-color: #f6faff;
}
.filtero{
    width: 100%;
}
.seata{
    min-width:375px;
    display:none;
}
.seatlist{
    height: 150px;
    width: 100%;
    overflow-x: hidden;
    padding: 5px;
    margin-bottom: 5px;
}
.listum{
    width: fit-content;
    border: 1px solid #c0c0c0;
}

.facol {
    position: absolute;
    bottom: -28px;
    left: 30px;
    font-size: 44px;
}

element.style {
    position: absolute;
    will-change: transform;
    top: 0px;
    left: 0px;
    transform: translate3d(0px, 41px, 0px);
}
.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.dropdown-menu.show {
    display: block;
}
.dropdown-menu {
    width: 200px !important;
}
@keyframes ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}



hr{
    width: 50%;
}


#instruction{
    font-size: 1.5rem;
    margin-bottom: 0;
}

.img-weapon{
    max-width: 110px;
    height: auto
}

.bigbuttons{
    margin: auto;
}

#tlh{
    display: inline-block;
}

.timus, .levelus{
    margin-right:50px;
}

.punktum{
    width: 24px;
}


body {
  margin: 0;
}

main {
  font-family: Open Sans;
  text-transform: uppercase;
  line-height: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(25deg, #091521, #7a8699);
}

.animation {
  width: 20em;
  height: 4em;
  margin: 1em auto;
  position: relative;
}

.arimo {
  font-family: Arimo;
}

.red {
  color: red;
}

.white {
  color: white;
}

.light {
  font-weight: 300;
}

.bold {
  font-weight: 700;
}

.mask {
  overflow: hidden;
  position: relative;
}

/*********************
* Animation 1
*********************/
@keyframes animation-1-slash {
  0% {
    opacity: 0;
    transform: translate3d(6em, 0, 0);
  }
  25% {
    opacity: 0;
    transform: translate3d(6em, 0, 0);
  }
  45% {
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-1-text-1 {
  0% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  65% {
    left: 0;
  }
}
@keyframes animation-1-text-2 {
  0% {
    left: -100%;
  }
  55% {
    left: -100%;
  }
  75% {
    left: 0;
  }
}
#animation-1 div {
  position: absolute;
}
#animation-1 > div:first-child {
  font-size: 4.8em;
  top: -.13em;
  animation: 4s ease-out infinite alternate both animation-1-slash;
}
#animation-1 > div:nth-child(2), #animation-1 > div:nth-child(3) {
  font-size: 2em;
  height: 1em;
  width: 5em;
}
#animation-1 > div:nth-child(2) div, #animation-1 > div:nth-child(3) div {
  animation: 4s ease-out infinite alternate both;
}
#animation-1 div:nth-child(2) {
  top: 0;
  left: .9em;
}
#animation-1 div:nth-child(2) div {
  animation-name: animation-1-text-1;
}
#animation-1 div:nth-child(3) {
  top: .8em;
  left: .5em;
}
#animation-1 div:nth-child(3) div {
  animation-name: animation-1-text-2;
}

/*********************
* Animation 2
*********************/
@keyframes animation-2-name {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  30% {
    transform: translate3d(0, 100%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-2-title {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  30% {
    transform: translate3d(0, -100%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-2 {
  text-align: center;
}
#animation-2 > div {
  width: 100%;
  height: 1em;
}
#animation-2 > div div {
  position: absolute;
  width: 100%;
}
#animation-2 > div:first-child {
  font-size: 2.8em;
}
#animation-2 > div:first-child div {
  animation: 3s ease-out infinite alternate both animation-2-name;
}
#animation-2 > div:last-child {
  font-size: 1.1em;
}
#animation-2 > div:last-child div {
  animation: 3s ease-out infinite alternate both animation-2-title;
}

/*********************
* Animation 3
*********************/
@keyframes animation-3-left {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  30% {
    transform: translate3d(100%, 0, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-3-right {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  30% {
    transform: translate3d(-100%, 0, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-3 > div {
  display: inline-block;
  width: 50%;
  height: 1em;
}
#animation-3 > div:first-child {
  font-size: 2.4em;
  text-align: right;
  letter-spacing: 1px;
}
#animation-3 > div:first-child div {
  animation: 3.2s ease-out infinite alternate both animation-3-left;
}
#animation-3 > div:last-child {
  font-size: 2.5em;
  line-height: 1.15;
  letter-spacing: -1px;
}
#animation-3 > div:last-child div {
  animation: 3.2s ease-out infinite alternate both animation-3-right;
}

/*********************
* Animation 4
*********************/
@keyframes animation-4-stroke {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  30% {
    transform: translate3d(0, -100%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-4-text {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  50% {
    transform: translate3d(0, -100%, 0);
  }
  80% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-4 > div {
  display: inline-block;
  vertical-align: middle;
}
#animation-4 > div div {
  animation: 3s ease-out infinite alternate both;
}
#animation-4 > div:first-child {
  font-size: 2.8em;
}
#animation-4 > div:first-child div {
  animation-name: animation-4-text;
}
#animation-4 > div:last-child div {
  width: .38em;
  height: 2.4em;
  background-color: red;
  animation-name: animation-4-stroke;
}

/*********************
* Animation 5
*********************/
@keyframes animation-5-bottom-right {
  0% {
    transform: translate3d(-100%, 96%, 0);
  }
  8% {
    transform: translate3d(-100%, 96%, 0);
  }
  30% {
    transform: translate3d(0, 96%, 0);
  }
  38% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-top {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  38% {
    transform: translate3d(100%, 0, 0);
  }
  58% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-bottom-left {
  0% {
    transform: translate3d(-98%, -100%, 0);
  }
  58% {
    transform: translate3d(-98%, -100%, 0);
  }
  64% {
    transform: translate3d(-98%, 0, 0);
  }
  84% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-text-name {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  25% {
    transform: translate3d(0, 100%, 0);
  }
  45% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-text-title {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  35% {
    transform: translate3d(0, -100%, 0);
  }
  55% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-5 {
  text-align: center;
  height: 3.5em;
}
#animation-5 svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#animation-5 line {
  stroke-width: 4px;
  stroke: red;
}
#animation-5 div,
#animation-5 .clip-path {
  animation: 3.1s ease-out infinite alternate both;
}
#animation-5 .bottom-right,
#animation-5 .right {
  clip-path: url(#mask-bottom-right);
}
#animation-5 .top {
  clip-path: url(#mask-top);
}
#animation-5 .bottom-left,
#animation-5 .left {
  clip-path: url(#mask-bottom-left);
}
#animation-5 #mask-bottom-right > .clip-path {
  animation-name: animation-5-bottom-right;
}
#animation-5 #mask-top > .clip-path {
  animation-name: animation-5-top;
}
#animation-5 #mask-bottom-left > .clip-path {
  animation-name: animation-5-bottom-left;
}
#animation-5 > div:nth-child(2) {
  font-size: 2em;
  padding-top: .4em;
}
#animation-5 > div:nth-child(2) div {
  animation-name: animation-5-text-name;
}
#animation-5 > div:nth-child(3) {
  font-size: .9em;
  letter-spacing: .7px;
  margin-top: .2em;
}
#animation-5 > div:nth-child(3) div {
  animation-name: animation-5-text-title;
}

footer{
    font-size: 0.7rem;
    line-height: 0.3rem;
    padding-top: 2vh;
}

.fab {
    color: #000000;
    margin: 0 5px;
}

.icon {
    position: relative;
    display: inline-block;
    bottom: 0px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    color: #0a0a0a;
}

a.icon {
    font-size: 24px;
    color: #000;
}

.designer-actions {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0px;
    z-index: 1000;
    background: linear-gradient(#2f2f2f, #676767);
    border-right: 1px solid #0F1014;
    border-bottom: 1px solid #0F1014;
    border-top: 1px solid #53575C;
    border-left: 1px solid #53575C;
    box-shadow: 1px 1px #17191C;
    min-width: 375px;
    height: 41px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    border-bottom: 1px solid transparent;
}

ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
ul {
    list-style: none;
}
ul.floating-menu[data-fm-floated="top"]:before {
    border-top: 9px solid #53576b;
}
/* MEDIA QUERIES */

/* Set the background color of body to tan */


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

  #inside{
    width: 70%;
    /* height: 70%; */
  }

  .img-weapon{
    max-width: 95px;
    height: auto
  }

  .select-choice{
    margin: 1vh 1vw;
  }

}

@media (max-width: 768px){
  #inside{
    width: 80%;
    /* height: 80%; */
  }

  .img-weapon{
    max-width: 75px;
    height: auto
  }

  .select-choice{
    margin: 1vh 1vw;
  }
}

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

  #inside{
    width: 90%;
    padding: 0;
  }



  #instruction{
    font-size: 1.3rem;
  }

  .scores > p{
    font-size: 1.1rem;
  }

  .img-weapon{
    max-width: 60px;
    height: auto
  }

  .select-choice{
    margin: 1vh 1vw;
  }
}
.informus{
    font-size: 30px !important;
    color: #ffffff !important;
    margin-top: 6px;
    text-shadow: 2px 2px 2px BLACK;
}
.informus:hover{
    color: #ffffff99 !important;
}
.modal-header {
    padding: 0.5rem;
}
.modal-body {
    padding-top: 0px !important;
    margin-top: -10px;
}
.nav-tabs li {
    margin-right: 16px !important;
}
.nav-tabs li a{
    margin-right: 16px !important;
    color: #6c757d;
}
a.active.show {
    border-bottom: 3px solid #6c757d;
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    width:inherit;
 max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
}
.infus {
    position: absolute;
    right: 18px;
    background: #53586c;
    color: white !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50px;
}
.infus i{
    color:#fff;
}


.floating-menu > li:nth-child(1){background:#556b2f32;}
.floating-menu > li:nth-child(2){background:#8b451332;}
.floating-menu > li:nth-child(3){background:#483d8b32;}
.floating-menu > li:nth-child(4){background:#3cb37132;}
.floating-menu > li:nth-child(5){background:#9acd3232;}
.floating-menu > li:nth-child(6){background:#00008b32;}
.floating-menu > li:nth-child(7){background:#8b008b32;}
.floating-menu > li:nth-child(8){background:#ff450032;}
.floating-menu > li:nth-child(9){background:#ffd70032;}
.floating-menu > li:nth-child(10){background:#7cfc0032;}
.floating-menu > li:nth-child(11){background:#00ff7f32;}
.floating-menu > li:nth-child(12){background:#dc143c32;}
.floating-menu > li:nth-child(13){background:#00ffff32;}
.floating-menu > li:nth-child(14){background:#00bfff32;}
.floating-menu > li:nth-child(15){background:#0000ff32;}
.floating-menu > li:nth-child(16){background:#ff00ff32;}