/*Body must have this background*/
body{
  /*Different than default!!!*/

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d7e3ed+13,c2dbf0+28,d7e3ed+41,d7e3ed+62,d7e3ed+81,4992d3+99 */
  background: #d7e3ed; /* Old browsers */
  background: -moz-linear-gradient(45deg, #d7e3ed 13%, #c2dbf0 28%, #d7e3ed 41%, #d7e3ed 62%, #d7e3ed 81%, #4992d3 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #d7e3ed 13%,#c2dbf0 28%,#d7e3ed 41%,#d7e3ed 62%,#d7e3ed 81%,#4992d3 99%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #d7e3ed 13%,#c2dbf0 28%,#d7e3ed 41%,#d7e3ed 62%,#d7e3ed 81%,#4992d3 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e3ed', endColorstr='#4992d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

header{
  height: 180px !important;
  background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
}

header #container_center_wrap #center_div{
  margin-top: 0px !important;

}

#container_live_game{
  background: none; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  height: 600px;
}

/*Overrride fluid text .. must be higher*/
#title {
  margin: 20px 0 0 -20em !important;
}

#container_belowtop_wrap{
  display: none !important;
}

#player-img{
  display: none !important;
}

#backBtn{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 30px;
	color:#1A456B;
  z-index: 1000;
}

#container_to_to_results{
  position: relative;
}

#goToResults{
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 200px;
}

#container_outer{
	max-width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.container_team{
	text-align: center;
}

#container_team_1{
	/*margin-left:100px;*/
}

#container_team_2{
	/*margin-right:100px;*/
}

.team{
	text-align: center;
}

#result_number{
	font-size: 205px;
	font-weight:bold;
	color:#1A456B;
  margin-top: 35px;
}

#club_name_outer1{
  font-size: 205px;
  font-weight:bold;
  color:#1A456B;
  text-align: right;
  margin-right: 40px;
}

#club_name_outer2{
  font-size: 205px;
  font-weight:bold;
  color:#1A456B;
  text-align: left;
  margin-left: 40px;
}

.club_name{
	font-size:80px;
	font-weight:normal;
}

/*#team_logo{
	height:200px;
}*/

#team_logo{
    height:300px;
    /*-webkit-mask-box-image: url(https://scgalic.simity.si/images/logo/logo_mg-2.png);*/
}

#team_logo2{
    height:300px;
    /*-webkit-mask-box-image: url(https://scgalic.simity.si/images/logo/logo_mg-2.png);*/
}

.vertical_line {
  border-left: 6px solid #9E9B9B;
  height: 210px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  margin-top: 230px;
  top: 0;
}

footer{
	display: none !important;
}

/*Three dots animation*/
#waiting_for_game{
  /*display: none;*/
  color: #1A456B;
  text-align: center;
  font-size: 70px;
}

@keyframes blink {50% { color: transparent }}
.loader__dot { animation: 1s blink infinite }
.loader__dot:nth-child(2) { animation-delay: 250ms }
.loader__dot:nth-child(3) { animation-delay: 500ms }
/*End of three dots animation*/

/*Animation - simity*/


.bb, .bb::before, .bb::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 150px;
  height: 150px;
  margin: auto;
  margin-top: 740px;
  background: url("https://simity.si/images/Simity5.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  color: #71BD46;
  box-shadow: inset 0 0 0 1px #71BD46;
  z-index: 1;
}

.bb::before, .bb::after {
  content: '';
  z-index: 1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}
/*.bb:hover::after, .bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}*/

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 165px, 1.5px, 0px); /*220, 2*/
  }
  25% {
    clip: rect(0px, 1.5px, 165px, 0px);
  }
  50% {
    clip: rect(163.5px, 165px, 165px, 0px); /*218, 220, 220*/
  }
  75% {
    clip: rect(0px, 165px, 165px, 163.5px);
  }
}

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

/*End of animation - Simity*/


/* Media Queries */
/*Normal monitor*/
@media(min-width: 1450px) and (max-width: 1700px){
  header{
    height: 120px !important;
    background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  }

  #title {
    margin: 5px 0 0 -20em !important;
  }

  #team_logo{
      height: 220px;
  }

  #team_logo2{
      height: 220px;
  }

  #club_name_outer1{
    margin-bottom: 0px;
  }

  #club_name_outer2{
    margin-bottom: 0px;
  }

  #result_number{
    margin-top: 15px !important;
  }

  .vertical_line {
    margin-top: 180px;
  }

  .bb {
    margin-top: 560px;
  }
}


/*Smaller monitor*/
@media(min-width: 1140px) and (max-width: 1450px){
  header{
    height: 120px !important;
    background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  }

  #container_live_game{
    background: none; /*If we want to make valid body, we need to disable background on header and container_live_game*/
    height: 600px;
  }

  #title {
    margin: 5px 0 0 -20em !important;
  }

  #team_logo{
      height: 220px;
  }

  #team_logo2{
      height: 220px;
  }

  #club_name_outer1{
    margin-bottom: 0px;
  }

  #club_name_outer2{
    margin-bottom: 0px;
  }

  #result_number{
    font-size: 160px;
    margin-top: 5px !important;
  }

  .vertical_line {
    margin-top: 180px;
  }

  .bb {
    margin-top: 530px;
  }

  .club_name{
    font-size:60px;
  }
}

/*Tablet - bigger*/
@media(min-width: 1000px) and (max-width: 1140px){
  header{
    height: 20px !important;
    background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  }

  #team_logo{
      height: 150px;
  }

  #team_logo2{
      height: 150px;
  }

  #title span{
    font-size: 40px;
  }
	
  #club_name_outer1{
    margin-bottom: 0px;
  }

  #club_name_outer2{
    margin-bottom: 0px;
  }

  .club_name{
    font-size:40px;
  }

  #result_number{
    font-size: 100px;
    margin-top: 15px !important;
  }

  .vertical_line {
    height: 170px;
    margin-top: 100px;
  }

  .bb {
    margin-top: 410px;
  }
}


/*Tablet - smaller or phone*/
@media(min-width: 730px) and (max-width: 999px){ /*768px*/
	.col-lg{
    width: 50% !important;
  }
  #col_lg_club_name{
    width: 100% !important;
  }
  .row{
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    display: -webkit-box !important;
  }

  header{
    height: 20px !important;
    background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  }

  #title {
    margin: 35px 0 0 -20em !important;
  }

  #container_outer{
    max-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  #container_live_game{
    background: none; /*If we want to make valid body, we need to disable background on header and container_live_game*/
    height: 500px;
  }
  #container_team_1{
    width: 50% !important;
  }

  #container_team_2{
    width: 50% !important;
  }

  #team_logo{
      height: 150px;
      width: 150px !important;
  }

  #team_logo2{
      height: 150px;
      width: 150px !important;
  }
  #result_number{
    font-size: 100px;
    margin-top: 15px !important;
  }
  .club_name{
    font-size:20px;
  }
  .vertical_line {
    height: 100px;
    margin-top: 130px;
  }
  .bb {
    margin-top: 410px;
  }
}

/*Tablet - smaller or phone*/
@media(min-width: 500px) and (max-width: 729px){ /*768px*/
  .col-lg{
    width: 50% !important;
    padding: 0px !important;
  }
  #col_lg_club_name{
    width: 100% !important;
  }
  .row{
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    display: -webkit-box !important;
  }

  header{
    height: 20px !important;
    background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  }

  #title {
    margin: 35px 0 0 -20em !important;
  }

  #container_live_game{
    background: none; /*If we want to make valid body, we need to disable background on header and container_live_game*/
    height: 400px;
  }

  #team_logo{
    display: none !important;
  }
  #team_logo2{
    display: none !important;
  }

  #result_number{
    font-size: 50px;
    margin-top: 15px !important;
  }
  .club_name{
    font-size:20px;
  }

  .vertical_line {
    height: 100px;
    margin-top: 130px;
  }
  .bb {
    margin-top: 310px;
  }

}
/*Small phone*/
@media(max-width: 500px){
	.col-lg{
    width: 50% !important;
    padding: 0px !important;
  }
  #col_lg_club_name{
    width: 100% !important;
  }
  .row{
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    display: -webkit-box !important;
  }

  header{
    height: 20px !important;
    background: none !important; /*If we want to make valid body, we need to disable background on header and container_live_game*/
  }

  #title {
    margin: 35px 0 0 -20em !important;
  }

  #container_live_game{
    background: none; /*If we want to make valid body, we need to disable background on header and container_live_game*/
    height: 420px;
  }

  #team_logo{
    display: none !important;
  }
  #team_logo2{
    display: none !important;
  }

  #result_number{
    font-size: 30px;
    margin-top: 15px !important;
  }
  .club_name{
    font-size:30px;
  }

  .vertical_line {
    height: 70px;
    margin-top: 100px;
  }
  .bb {
    margin-top: 350px;
  }
}