/*fonts*/
@font-face {
  font-family: 'cfont1';
  src: url('fonts/CopperplateGothic-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/CopperplateGothic-Bold.woff') format('woff'), url('fonts/CopperplateGothic-Bold.ttf')  format('truetype'), url('fonts/CopperplateGothic-Bold.svg#CopperplateGothic-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
.main_login {
    position: relative;
    max-width: 1980px;
}
html, body{
	overflow: hidden;
}
body {
	position: relative;
}
/*Video overlay*/
#lightbox {
	  background:rgba(0,0,0,0.85);
	  position: fixed;
	  display: block;
	  z-index: 250;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  top: 0;
	}
@media(max-width:1920px){
	#promote{
		width: 100%;
		position: fixed;
		padding-top: 140px;
		overflow: hidden;
		z-index: 251;
		display: block;
		top: 0;
		left: 0;
	}
	#promote iframe{
		width: 50%;
		height: 500px;
	}
}
@media(max-width:1400px){
	#promote{
		width: 100%;
		position: fixed;
		padding-top: 100px;
		overflow: hidden;
		z-index: 251;
		display: block;
		top: 0;
		left: 0;
	}
	#promote iframe{
		width: 60%;
		height: 450px;
	}
}
@media(min-width:1921px){
	#promote{
		width: 100%;
		position: fixed;
		padding-top: 150px;
		overflow: hidden;
		z-index: 251;
		display: block;
		top: 0;
		left: 0;
	}
	#promote iframe{
		width: 40%;
		height: 550px;
	}
}
@media(max-width:450px){
	#promote{
		display: none;
	}
	#lightbox {
		display: none;
	}
}

/* SCROLLBAR */
@media(min-width:650px){

 ::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: #000000;

}

::-webkit-scrollbar-track-piece {
    background-color: #000000;
}

::-webkit-scrollbar-thumb {
border-top: 1px solid #6fff00;
border-bottom: 1px solid #9ab500;
background: rgba(109,206,35,1);
background: -moz-linear-gradient(top, rgba(109,206,35,1) 0%, rgba(123,145,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(109,206,35,1)), color-stop(100%, rgba(123,145,0,1)));
background: -webkit-linear-gradient(top, rgba(109,206,35,1) 0%, rgba(123,145,0,1) 100%);
background: -o-linear-gradient(top, rgba(109,206,35,1) 0%, rgba(123,145,0,1) 100%);
background: -ms-linear-gradient(top, rgba(109,206,35,1) 0%, rgba(123,145,0,1) 100%);
background: linear-gradient(to bottom, rgba(109,206,35,1) 0%, rgba(123,145,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dce23', endColorstr='#7b9100', GradientType=0 );
}

::-webkit-scrollbar-thumb:hover {
border-top: 1px solid #6fff00;
border-bottom: 1px solid #9ab500;
background: rgba(111,255,0,1);
background: -moz-linear-gradient(top, rgba(111,255,0,1) 0%, rgba(154,181,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(111,255,0,1)), color-stop(100%, rgba(154,181,0,1)));
background: -webkit-linear-gradient(top, rgba(111,255,0,1) 0%, rgba(154,181,0,1) 100%);
background: -o-linear-gradient(top, rgba(111,255,0,1) 0%, rgba(154,181,0,1) 100%);
background: -ms-linear-gradient(top, rgba(111,255,0,1) 0%, rgba(154,181,0,1) 100%);
background: linear-gradient(to bottom, rgba(111,255,0,1) 0%, rgba(154,181,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6fff00', endColorstr='#9ab500', GradientType=0 );
}

::-webkit-scrollbar-thumb:window-inactive {
border-top: 1px solid #4ca305;
border-bottom: 1px solid #394200;
background: rgba(76,163,5,1);
background: -moz-linear-gradient(top, rgba(76,163,5,1) 0%, rgba(57,66,0,1) 75%, rgba(57,66,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,163,5,1)), color-stop(75%, rgba(57,66,0,1)), color-stop(100%, rgba(57,66,0,1)));
background: -webkit-linear-gradient(top, rgba(76,163,5,1) 0%, rgba(57,66,0,1) 75%, rgba(57,66,0,1) 100%);
background: -o-linear-gradient(top, rgba(76,163,5,1) 0%, rgba(57,66,0,1) 75%, rgba(57,66,0,1) 100%);
background: -ms-linear-gradient(top, rgba(76,163,5,1) 0%, rgba(57,66,0,1) 75%, rgba(57,66,0,1) 100%);
background: linear-gradient(to bottom, rgba(76,163,5,1) 0%, rgba(57,66,0,1) 75%, rgba(57,66,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ca305', endColorstr='#394200', GradientType=0 );
}

}

/* SCROLLBAR */



@media screen and (max-width: 1640px) and (min-width: 1441px) {
.register-button {bottom: -1%!important;}
}

@media screen and (max-width:  1440px) {
  ._details p.Paragraph--small {font-size: 93%!important;}
  .Realm-info {
    width: 28%!important;
    margin-left: -46%!important;
}


}

@media screen and (max-width: 1420px) and (min-width: 1201px) {
  .register-button {bottom: -3%!important;}
    .modal-dialog .modal-content {background-size: 180%!important;}
}

@media screen and (max-width: 1200px) and (min-width: 1070px) {
  .modal-dialog .modal-content {background-size: 180%!important;}
}

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

  #r_i-1 {
  width: 42%!important;
}

.fact-info{
  display: none;
}
.fact-container {
    left: 21%!important;
}

}

@media screen and (max-width:  1100px) {
  .Realm-details {
  width: 100%!important;
  left: 0!important;
  margin-left: 0!important;
  }
  .Realm-info{
    display: none!important;
  }
  .register-button {bottom: -4%!important;}

  .modal-dialog .modal-content {background-size: 190%!important;}
  #r_i-1 h3 {font-size: 18px!important;}
.cl_b_panel {zoom: 0.8;}
tr.cl_date {font-size: 26px!important;}
}





@media screen and (max-width: 1023px) and (min-width: 800px) {
  .modal-dialog .modal-content {background-size: 215%!important;}
}
@media screen and (max-width: 920px) {
.fact-container {
  pointer-events: none!important;
}
}

@media screen and (max-width: 799px) {
  .Realm-details {
  width: 100%!important;
  left: 0;
  margin-left: 0;
  }
.content {
    height: 100%;
    min-height: 550px;
    background-repeat: no-repeat;
}
#top-img {display: none;}
#bgvid {display: none!important;}



.modal-dialog .modal-content {background-size: 280%!important;}
#r_i-1 {width: 50%!important;}
}

@media screen and (max-width: 720px) and (min-width: 580px) {
#d1:before,#d2:before,#d3:before,#d4:before{background-size: 150% auto!important;}

}


@media screen and (max-width: 700px) and (min-width: 579px) {
#c1 {background-size: auto 100%!important;}
.modal-dialog .modal-content {background-size: 315%!important;}
}



@media screen and (max-width: 579px) {
#d1:before,#d2:before,#d3:before,#d4:before{background-size: 200% auto;}
.content {
  min-height: 650px!important;
}
.login-top-container {
    top: 311px!important;

}

#fact-bg {
    background-position: 50% 67%!important;
}

.login-top-content {
    position: relative;
    top: 88px!important;
}

.login-top-container {
    z-index: 1000!important;
}
._img-details {
    width: 60%!important;
    height: 70px!important;
}
.Realm-info {
    width: 100%!important;
    margin-left: 50%!important;
    background: none!important;
    top: 0%!important;
}
.Realm-info h3 {
    background-image: -webkit-linear-gradient(top, #e3ff00 0%, #769944 29.916667%, #9fb84a 37.5%, #e8e361 55%)!important;
    font-size: 25px;
}
.Realm-details {
    top: 0!important;
  }

  #video-top {
      left: 48%!important;
      width: 1470px!important;;
    }

    .fact-info{
      display: none;
    }
    .fact-container {
        left: 19%!important;
    }

.container_login {
    zoom: 1!important;
}

.modal-dialog .modal-content {background-size: 360%!important;}
#r_i-1 {
    width: 100%!important;
    padding: 0;
    margin: 0;
    top: 6%!important;
    left: 0!important;
}

#r_i-1 table {overflow: scroll!important;}
#r_i-1 td {font-size: 15px;}
tr.cl_date td{font-size: 23px!important;}

}


@media screen and (max-width: 424px) and (min-width: 375px) {
#d1:before,#d2:before,#d3:before,#d4:before{background-size: 300% auto!important;}

.modal-dialog .modal-content {background-size: 440%!important;}
._img-details {
    height: 80px!important;
}
}

@media screen and (max-width: 375px)  {
#d1:before,#d2:before,#d3:before,#d4:before{background-size: 330% auto!important;}
  .register-button {bottom: -1%!important;}


  .modal-dialog .modal-content {background-size: 570%!important;}

}

.content{
  height: 100%;
  min-height: 550px;
  background-image: url(./images/bg-content.jpg);
}

#r_d-1 {
    position: absolute;
    width: 60%;
    top: 15%;
    left: 50%;
    margin-left: -10%;
    z-index: 10;
}

.d_legion {
   cursor:pointer;
}

#d_legion_item {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 60%;
    margin-left: -10%;
}

/*Change Log */

#r_i-1 {
    width: 32%;
    background-repeat: no-repeat;
    background-position-y: -125px;
    height: 100%!important;
    position: absolute;
    top: 10%;
    z-index: 10;
    left: 3%;
}


#r_i-1 h3{
    padding: 0%!important;
    font-size: 30px;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #32b416;
    background-position-y: 29px;
    background-size: 26px;
    font-family: cfont1;
        margin-bottom: 0;
}

.cl_b_panel {
    text-align: center;
    top: 14px;
    position: relative;
    z-index: 100;
}
.cl_b_panel button {
    background: black;
    border: 1px solid #8cff13;
    border-radius: 20px;
    color: #52ff18;
    font-size: 16px;
    font-family: cfont1;
    padding: 1px 7px 1px 7px;
    cursor:pointer;
    transition: all 0.5s ease;
}

.cl_b_panel button:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/*frame legion*/

.Frame {
  display: block;
  padding: 32px;
  padding: 1.6rem;
  position: relative;
}

.Frame-side--top {
  background-image: url("data:image/png;base64,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");
   left: 32px;
  left: 1.6rem;
  right: 32px;
  right: 1.6rem;
  top: 16px;
  top: 0.8rem;
}

.Frame-side--top,
.Frame-side--top:after {
  background-repeat: repeat-x;
  background-size: auto 100%;
  height: 21px;
  height: 1.05rem;
  position: absolute;
}



.Frame-side--right {
  background-image: url("data:image/png;base64,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");
  bottom: 32px;
  bottom: 1.6rem;
  right: 16px;
  right: 0.8rem;
  top: 32px;
  top: 1.6rem;

}

.Frame-side--right,
.Frame-side--right:after {
  background-repeat: repeat-y;
  background-size: 100% auto;
  width: 21px;
  width: 1.05rem;
  position: absolute;
}



.Frame-side--bottom {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAVCAYAAAD7NJjdAAAFUElEQVR4AeySxQLDMAxDn7IeB///s9FYg7g9bbe4DBY5YlZZM5gZzAxmBvPPUmt4KyPzuNqrifr2XPdJgH8zFiHYVFlT2SCNV8xqn5ZlZ1Kks6Y3UH+WIiJMahExGnzn0UZCJUDlZBjW8E/4GoTfgPlKDHQ4HX2TetOqrIz7Vdj91hAPTcVSUK2793DllxuXBnd37oSfAE2PcEko/vLnuf2yWJMmuaHokQKyoHF4/mGmvZnxaf0IpqW998rMDA0FmQGyrawvzcygYgrduKDonvF1O2E2/50E5dfKX8ugyDogUZACjEYvHavtd9aUZ19/xWLKaAz0Uqm1EmKcgfZON8NapU7Fb806tIapIWtFckCaIt2QChinDYQTOEEUBw4O3tf1x2aEqIvCZoaGgIj+diCJOftnvVVqbcQYfysfnW6LEIz3e3prpCFBENrDQn0G7Eqxrxf4ZkHvDDEl5cSw2fharbdZhLfe+04T5tKgfkspY4BGnTfkfSs//MH3ue831KcEeTkTXtnASmmfv6d95ha7qdhkCErKmc3FOQ89+Titdco40mvDBKw1Wmm0Vlltt94TFYIGWq202gg5EkJ0oNb6r7vIvx9TAgFdyBdCCNRxpI6FWiZCUM6vL5ik8J3Hf8D0tNHHxvTZn8GXJ0JVrh577Be3RxZL11pcIHnyuWcNPakcAsMwIFEZ98fFORoEy/DTux/Tn1Pix67R5wb0sUz7xoHxEz+kf+GA3TQYQRHysOLi0UechHG/xzBo9uvDHDMcvObA/U9vGTZrtleX0LsDrONEK3URR0RRVeKQCTkx3e0cq7tM1XuV4+SKby42pM2K3eGW+7hDPn4O1Sifu4UvFWKLrFcb8nbt42LcHX3tfL5BAHnqlRfNWqfXQu9GWg+A0MbppAboKnI87hmvO/raivihC+SpjH1rYvzUT+hfG7HvF+Te0K4MecXq/MyjOQNdji4nuvfqLnIniJCHwd1z/9MbRGF9ccGwHrDaHZM7t9lJTcir7CRP7oqAIPNn3UjDL526pdTC3f6GKRfCG2vstnt8wr2S40CKsxtrKeCEC2V0Ul0geeTJJ8x6X6zsOWvNrZlyZHV2xnE6stc99nRE3hzQJxL9axP1Gwe4bdjPKvzESD0x5MFjUKdK792JADwivbVZXRF//eunTszZZ9h4ODhY75+Sq96mSpkKQYWQszuq1zrPMFFCjO50jUKrxuGw43g8QARJgZCVUAKR6ESadY+rdfM+MSWfWd2MyaM4IQ8//pixHCzizKkow2aF5sx+d8vYj/THFH15gGK0r4yuJgYygd4rWTIpJt9wKYW5DEGcDMMox9EtP58wODDM6KdhHFJCBCeojCNtJtZnTYgBmZV1V3g5oQlEPa6H+52TigriJAaCRMcF4sL4/ABijsSY536tnQSpYOZ95OFHHzbzHnNW83ogpOhf3N3tsFqRJwf0yUT/1ojtDJJ4tkMNpB4JoohCLW2OJICZg1hvNwzbM6bDYXFJa/PgtY6r78QAAp5zVGdVpzITCSxzxH8kbC/POe4PTPs943HCegNZBrM/qieA+TPw2ZRidmeV0d3pIrRuBJ0F0JSceHn4ycdtfbZFRfyoHvcH/0FvfVFFFBCQk5VTHogqSJd5VvjGbDk9JATSKpOGgTJN3P34Z66kW9aVSq587/Pc8NPq1/8sBUyA7rtyYlstHHZ7mrtR/PuuvuNSd1TQiKYwr13qgsXF1ugCjMcj0/5Arc1/F2N014U0xwwz50EuHr7mz6nwo1cFljL+fUtON/tb8Mq1vf1/4R/j/xPzx+v/xPyfmH9U/Rz2vDkZEZYY1gAAAABJRU5ErkJggg==");
  bottom: 16px;
  bottom: 0.8rem;
  left: 32px;
  left: 1.6rem;
  right: 32px;
  right: 1.6rem;
}

.Frame-side--bottom,
.Frame-side--bottom:after {
  background-repeat: repeat-x;
  background-size: auto 100%;
  height: 21px;
  height: 1.05rem;
  position: absolute;
}


.Frame-side--left {
  background-image: url("data:image/png;base64,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");
  bottom: 32px;
  bottom: 1.6rem;
  left: 16px;
  left: 0.8rem;
  top: 32px;
  top: 1.6rem;
}

.Frame-side--left,
.Frame-side--left:after {
  background-repeat: repeat-y;
  background-size: 100% auto;
  width: 21px;
  width: 1.05rem;
  position: absolute;
}

.Frame-side--left:after {
  background-image: url("data:image/png;base64,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");
  bottom: 0;
  left: 0;
  top: 0;
}

.Frame-corner,
#lightbox-container .corner,
.Frame-corner:after,
#lightbox-container .corner:after {
  background: url("http://eu.battle.net/wow/static/images/seven-oh/frame-corners-sprite.png") no-repeat;
  background-size: 400% 200%;
  height: 75px;
  height: 3.75rem;
  position: absolute;
  width: 75px;
  width: 3.75rem;
}


.Frame-corner:after,
#lightbox-container .corner:after {
  content: "";
  left: 0;
  opacity: 0;
  top: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.Frame-corner--topLeft {
  background-position: 66.66666666% 0;
  left: 0;
  top: 0;
}



.Frame-corner--topRight {
  background-position: 100% 0;
  right: 0;
  top: 0;
}



.Frame-corner--bottomRight {
   background-position: 100% 100%;
  bottom: 0;
  right: 0;
}

.Frame-corner--bottomLeft {
  background-position: 66.66666666% 100%;
  bottom: 0;
  left: 0;
}

#r_i-1 tr {
    height: 30px;
    background: rgba(27, 27, 27, 0.76);
}

body {margin: 0;background-color: black;overflow-x: hidden;}
.divisor {position: relative;}
#d1:before {background: url(images/Divider.png) no-repeat; background-size: 100% auto;background-position: 50%;}
#d2:before {background: url(images/Divider.png) no-repeat; background-size: 100% auto;background-position: 50%;}
#d3:before {background: url(images/Divider.png) no-repeat; background-size: 100% auto;background-position: 50%;}
#d4:before {background: url(images/Divider.png) no-repeat; background-size: 100% auto;background-position: 50%;}

.content{position:relative;}


#c3 {
  background: url(https://bnetcmsus-a.akamaihd.net/cms/template_resource/XGNDT1V0EURE1509567046736.jpg);
}
.divisor:before {
    content: "";
    display: block;
    height: 5.2em;
    left: 0;
    position: absolute;
    right: 0;
    top: -2.7em;
    z-index: 200;

}

.register-button {
    position: absolute;
    background: url(images/b1.png) no-repeat;
    width: 320px;
    height: 123px;
    z-index: 1;
    background-size: 100%;
    bottom: 1%;
    left: 50%;
    margin-left: -160px;
}

a.register {
    position: absolute;
    width: 100%;
    height: 100%;

}

#bgvid {
    width: 100%;
    display: block;
    max-width: 100%;
}

.content-tittle {
    font-family: cfont1;
    line-height: 1.2;
    text-transform: uppercase;
    color: white;
    position: absolute;
    left: 50%;
    top: 2%;
    width: 80%;
    margin-left: -40%;
    text-align: center;
    font-size: 21px;
}

@supports (-webkit-appearance:none) {

#ct-2 h1{
background-image: url(images/FontStyleLegion.png);
text-shadow: 0 0 0.001rem rgba(24, 177, 0, 0.49);
}

#r_i-1 h3 {
    background-image: url(images/FontStyleLegion.png);
    text-shadow: 0 0 0.001rem rgba(24, 177, 0, 0.49);
}

#ct-3 h1{
background-image: url(images/FontStyleGarrisons.png);
text-shadow: 0 0 0.001rem rgba(35, 255, 0, 0.19);
}

#ct-4 h1{
background-image: url(images/FontStyleLK.png);
text-shadow: 0 0 0.001rem rgba(0, 123, 217, 0.64);
}

a#_login_b {background-image: url(images/FontStyleLegion.png);}

#login-form h1, #login-form h2, #login-form h3{background-image: url(images/FontStyleLegion.png);}

}

#ct-2 h1, #ct-3 h1, #ct-4 h1{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e8e361;
    background-position-y: 10px;
    background-size: 28px;
}


.info-container {
    width: 100%;
    height: 100%;
}


.Realm-info {
    position: absolute;
    left: 50%;
    top: 0;
    width: 24%;
    height: 100%;
    margin-left: -43%;
    z-index: 10;
    background-size: 100%;
    background-repeat: no-repeat;

}


video.VideoThumbnail-video {
    width: 100%;
    top: 2%;
    position: relative;
    background: black;
    height: 100%;
}

#r_v-2:after {
    background-image: url("images/f-video-mop.png");
    background-size: 100%;
    content: "";
    position: absolute;
    width: 102%;
    height: 112%;
    left: -4px;
    background-repeat: no-repeat;
}

#r_v-3:after {
    background-image: url("images/f-video-lk.png");
    background-size: 100%;
    content: "";
    position: absolute;
    width: 112%;
    height: 123%;
    left: -26px;
    background-repeat: no-repeat;
    top: -18px;
}

.Realm-details {
    position: absolute;
    left: 50%;
    top: 2%;
    width: 54%;
    margin-left: -10%;
    z-index: 10;
}

.Realm-details h3 {
    color: white;
    font-size: 2em;
    text-shadow: 0px 0px 2px rgb(0, 0, 0);
    margin-bottom: none!important;
    text-align: left;
    width: 90%;
}
.Realm-details p {
    color: white;
    font-size: 1.4em;
    line-height: 1.4em;
    padding: 20px;
    text-shadow: 0px 3px 4px rgb(0, 0, 0);
    text-align: left;
    width: 90%;
    padding-top:none!important;
}

._details {
    position: relative;
    width: 33%;
    float: left;
    cursor: pointer;

}



._img-details {
    width: 60%;
    height: 120px;
    position: relative;
    margin: auto;
    background-position: 50%;
    background-repeat: no-repeat;
}



._details img.icon-details {
      display: block;
      margin: auto;
      width: 100%;
}





.button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  &:hover {
    fill: white;
  }
}

.defs {
  position: absolute;
  top: -9999px;
  left: -9999px;
}



/* "Fancy-Box" Pure CSS */

div#_login_b_c {
     background: black;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid;
    color: #30c311;
    cursor: pointer;
    z-index: 2;
}







@-webkit-keyframes example {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}


@keyframes example {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}


.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2000px;
  overflow: auto;
  z-index : 1000;
}


.modal:target {
  display: block;
  position: absolute;
}


#pause-button {
   fill: #d8d000;
   top: 30px;

}
#pause-button2{
    fill: #0065a8;
    top: 30px;
}
svg#play-button, svg#play-button2 {
    position: absolute;
    width: 100%;
    height: 40%;
    opacity: 0;
    z-index: 10;
}


.modal-dialog .modal-content {
  margin: auto;
    position: absolute;
    padding: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: example;
    -webkit-animation-duration: 0.5s;
    animation-name: example;
    animation-duration: 0.5s;
    background: #000000c7;
}

#_videobg {
   background: #0e0f0e url("images/repeat-bg.jpg") no-repeat 50% 100%!important;
}



.closebtn {
    text-decoration: none;
    float: right;
    font-size: 70px;
    font-weight: bold;
    color: #817b6e;
    position: relative;
    top: 14px;
}

.closebtn:hover,
.closebtn:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}


.container-video-float {
    position: relative;
    width: 80%;
    height: 80%;
    margin: auto;
    top: 7%;

}

#c-v-mop {
  -webkit-box-shadow: 2px 14px 107px -15px rgba(255,221,0,0.62);
-moz-box-shadow: 2px 14px 107px -15px rgba(255,221,0,0.62);
box-shadow: 2px 14px 107px -15px rgba(255,221,0,0.62);
}
#c-v-lk {

-webkit-box-shadow: 2px 14px 107px -15px rgba(0,136,255,1);
-moz-box-shadow: 2px 14px 107px -15px rgba(0,136,255,1);
box-shadow: 2px 14px 107px -15px rgba(0,136,255,1);
}
/* LOGIN HERE! */


#login-form h1, #login-form h2, #login-form h3{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #817b6e;
    background-position-y: -2px;
    background-size: 24px;
    text-shadow: 0 0 0.001rem rgb(129, 123, 109);
    font-family: cfont1;
    font-size: 18px;
    margin: 0;

}


#login-form h2 {
    text-align: center;
    position: relative;
    top: -30px;
}

#login-form h3 {
    position: relative;
    top: -13px;
}

#loginsubmit {
    position: relative;
    width: 100%;
    z-index: 1;
    opacity: 0;
}

#login-form input {
    background-color: #000000;
    padding: 0px 5px;
    color: #817b6e;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #252525!IMPORTANT;
    background-image: none;
    color: rgb(0, 0, 0);
}



#login-form td {
    display: table-row;
    vertical-align: top;
    float: left;
    position: relative;
    height: 34px;
}

td#td2 {
    float: right;
}
td#delog {
    left: 34px;
    top: 2px;
}



#login-form img {
    position: relative;
    width: 100%;
    z-index: 1;
    opacity: 0;
}

label {
    background-color: #000;
    border: 1px solid #289013;
    padding: 6px;
    display: inline-block;
    position: relative;
    margin-left: 3px;
    top: 4px;
    left: 4px;
}

input#loginremember {
    display:none;
    }

#loginremember:checked + label:after {
    content: '\2714';
    font-size: 12px;
    position: absolute;
    top: -3px;
    left: 1px;
    color: #817b6e;
}

.input, .input-ff, textarea, select {
    margin: 2px 0 0 0;
    padding: 2px;
    color: #817b6e;
    font-family: Tahoma, Verdana, Arial, serif;
    font-size: 11px;
    line-height: 12px;
}

.input, .input-ff, textarea, select {
    border: 1px solid #817b6e;
}






.container_login {
    max-width: 300px;
    position: relative;
    height: 150px;
    top: 200px;
    background: black;
    padding: 30px;
}
.container_register {
  max-width: 650px;
  height: 370px;
  top: 200px;
  position: relative;
  background-color: black;
  padding: 10px;
}
.container_login:after, .container_register:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url("images/frame-border_silver.png");
    border-image-repeat: round;
    border-image-slice: 108 fill;
    border-image-width: 56px;
    border-image-outset: 34px;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none;
}


#_lang_b_c {
   background: black;
   position: absolute;
   right: 10px;
   top: 10px;
   padding: 10px;
   border-radius: 4px;
   border: 2px solid #8a8a8a;
   cursor: pointer;
   z-index: 2;
   line-height: 10px;
}

#_lang_b_c a{
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

#_lang_b_c a:first-child{
  margin-right: 8px;
}

#_lang_b_c a img{
  width: 26px;
}

.lang_active {
  -webkit-filter: none!important; /* Safari 6.0 - 9.0 */
   filter: none!important;
}



.login-top-container{
    position: relative;
    max-width: 520px;
    top: 400px;
    height: 400px;
    z-index: 10;
}

.login-top-buttons {
    width: 100%;
    position: relative;
    height: 162px;
}

.login-login {
    margin-bottom: 15px;
}
.login-login, .login-register {
    position: relative;
    width: 340px;
    height: 70px;
    background-image: url("images/button-login.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

#_login_b {
    text-decoration: none;
    font-size: 28px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #817b6e;
    background-position-y: -2px;
    background-size: 24px;
    text-shadow: 0 0 0.001rem #817b6e;
    font-family: cfont1;
    margin: 10px;
    position: relative;
    top: 27px;
}

.login-top-content {
    margin-top: 15px;
    color: white;
    font-family: Tahoma, Verdana, Arial, serif;
    text-shadow: 0px 0px 2px rgb(0, 0, 0);
}
.login-top-title {
  margin-bottom: 0!important;
}

#c7 .Realm-details h3,#c7 .Realm-details p {
  text-align: center!important;
}
.login-top-title, .fact-info-title, .Realm-details h3 {
    margin-bottom: -5px;
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 600;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top,#fff 0,#c6c6c6 7%,#fff 20%,#cfcfcf 38%,#fef9ef 68%,#c7beac 83%,#dccdbc 100%);
    background-size: 1em 1em;
    background-position: center;
    color: #c6c6c6;
    display: inline-block;
    line-height: 1.3em;
    text-shadow: none;
    position: relative;
}

.login-top-title:before, .fact-info-title:before, .Realm-details h3:before{
    display: inline-block;
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    text-shadow: 0 1px 9px rgba(0,0,0,.7), 0 1px 9px rgba(0,0,0,.7);
}

.login-top-desc {
  margin: 20px;
  font-size: 18px;
  line-height: 18px;
}


#fact-bg {
  width: 100%;
  background-image: url('images/bg-f-1.png');
  height: 1000px;
  top: 550px;
  position: absolute;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1980px;
  z-index: 20;
}

.register-title {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #817b6e;
    background-position-y: -2px;
    background-size: 24px;
    text-shadow: 0 0 0.001rem rgb(129, 123, 109);
    font-family: cfont1;
    font-size: 18px;
    margin: 0;
}


#c-top {
  height: 1550px;
  overflow: hidden;
}

#video-top-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    overflow: hidden;
    z-index: 1!important;
}

#video-top {
    position: absolute;
    top: 0;
    left: 49.5%;
    width: 1980px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}




.fact-container {
    position: absolute;
    width: 1200px;
    height: 700px;
    margin: 0 auto;
    bottom: 0;
    left: 50%;
    margin-left: -600px;
}

.fact-info {
  position: absolute;
  top: calc(50% - 100px);
  width: 400px;
  height: 200px;
  color: white;
  font-family: Tahoma, Verdana, Arial, serif;
  padding: 10px;
}

.fact-info-title {
  padding-bottom: 15px!important;
  font-size: 28px;
  text-transform: uppercase;
  text-align: left;
  width: 100%;

}

.fact-info-content {
  max-width: 410px;
  line-height: 17px;
  font-size: 18px;
  text-align: left;
}

.fact-characters-container{
  right: 0;
  position: absolute;
  height: 100%;
  width: 730px;
  right: 65px;
}

.fact-character {
  position: absolute;
  transition: all 0.7s;
  -webkit-filter: grayscale(30%);
  filter: grayscale(30%);
}

.fact-character div {
    opacity: 0;
    position: absolute;
    width: 230px;
    height: 90px;
    background-image: url(./images/char-tt.png);
    background-repeat: no-repeat;
    background-size: 100%;
    top: -80px;
    left: 50%;
    margin-left: -115px;
    transition: opacity 1s;
}

.fact-character:hover div {
    opacity: 1;
}

.fact-character div img {
    position: relative;
    width: auto;
    height: 28px;
    top: 14px;
}

.fact-character div p {
    font-size: 14px;
    color: white;
    margin: 0;
    position: relative;
    top: 25px;
}


.fact-character img{
  width: 100%;
  image-rendering: crisp-edges;
}

.fact-character:hover {
  transform: scale(1.2);
  z-index: 100;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);

}

.fact-1 {
  position: absolute;
  width: 290px;
  top: 120px;
  z-index: 1;
}
.fact-2 {
  position: absolute;
  width: 150px;
  left: 260px;
  top: 120px;
  z-index: 2;
}

.fact-3 {
  position: absolute;
  width: 140px;
  left: 380px;
  top: 170px;
  z-index: 3;
}
.fact-4 {
  position: absolute;
  width: 220px;
  left: 480px;
  top: 120px;
  z-index: 2;
}
.fact-5 {
  position: absolute;
  width: 250px;
  left: 510px;
  top: 320px;
  z-index: 5;
}

.fact-6 {
  position: absolute;
  width: 270px;
  left: 640px;
  top: 120px;
  z-index: 3;
}
#c1,#c2,#c3,#c4,#c5,#c6 {
  background-position: center;
}

#c1 {background-image: url("images/bg-fact-1.jpg")!important;}
#c2 {background-image: url("images/Olympo3.jpg");}
#c3 {background-image: url("images/SinRostro2.jpg");}
#c4 {background-image: url("images/Ancestros2.jpg");}
#c5 {background-image: url("images/Steamclank6.jpg");}
#c6 {background-image: url("images/Archivistas2.jpg");}
#c7 {
    background-image: url("images/assora-bg.jpg");
    background-position: 50% 50%!important;
    height: 680px!important;
}

.Realm-info, .fact-character img {
  -webkit-filter: drop-shadow(3px 6px 2px #000000b0);
 filter: drop-shadow(3px 6px 2px #000000b0);
}

#c1 .Realm-info {
    background-image: url(./images/char-1.png);
}

#c2 .Realm-info {
    background-image: url(./images/char-6.png);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
}

#c3 .Realm-info {
    background-image: url(./images/char-3.png);
    background-size: 50%;
    background-position: 50% 10px;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
}

#c4 .Realm-info {
    background-image: url(./images/char-4.png);
    background-size: 70%;
    background-position: 50% 50%;
}
#c5 .Realm-info {
    background-image: url(./images/char-5.png);
    background-size: 100%;
    background-position: 50%;
}

#c6 .Realm-info {
    background-image: url(./images/char-2.png);
    background-size: 50%;
    background-position: 50% 10px;
}

#c7 .Realm-details {
    width: 50%;
    left: 25%;
    margin-left: 0!important;
    top: 30px;
}

#c7 .Realm-details ._details {
  margin-bottom: 54px;
}



#c1 #_d-1 ._img-details {
  background-image: url("images/gallery/Mardum1-min_tn.jpg");
}
#c1 #_d-2 ._img-details {
  background-image: url("images/gallery/Mardum2-min_tn.jpg");
}
#c1 #_d-3 ._img-details {
  background-image: url("images/gallery/Mardum3-min_tn.jpg");
}
#c2 #_d-1 ._img-details {
  background-image: url("images/gallery/Olympo1-min_tn.jpg");
}
#c2 #_d-2 ._img-details {
  background-image: url("images/gallery/Olympo2-min_tn.jpg");
}
#c2 #_d-3 ._img-details {
  background-image: url("images/gallery/Olympo3-min_tn.jpg");
}
#c3 #_d-1 ._img-details {
  background-image: url("images/gallery/SinRostro1-min_tn.jpg");
}
#c3 #_d-2 ._img-details {
  background-image: url("images/gallery/SinRostro2-min_tn.jpg");
}
#c3 #_d-3 ._img-details {
  background-image: url("images/gallery/SinRostro3-min_tn.jpg");
}
#c4 #_d-1 ._img-details {
  background-image: url("images/gallery/Ancestros1-min_tn.jpg");
}
#c4 #_d-2 ._img-details {
  background-image: url("images/gallery/Ancestros2-min_tn.jpg");
}
#c4 #_d-3 ._img-details {
  background-image: url("images/gallery/Ancestros3-min_tn.jpg");
}
#c5 #_d-1 ._img-details {
  background-image: url("images/gallery/Steamclank1-min_tn.jpg");
}
#c5 #_d-2 ._img-details {
  background-image: url("images/gallery/Steamclank2-min_tn.jpg");
}
#c5 #_d-3 ._img-details {
  background-image: url("images/gallery/Steamclank3-min_tn.jpg");
}
#c6 #_d-1 ._img-details {
  background-image: url("images/gallery/Archivistas1-min_tn.jpg");
}
#c6 #_d-2 ._img-details {
  background-image: url("images/gallery/Archivistas2-min_tn.jpg");
}
#c6 #_d-3 ._img-details {
  background-image: url("images/gallery/Archivistas3-min_tn.jpg");
}

#c7 #_d-1 ._img-details {
  background-image: url("images/gallery/Assora1_tn.jpg");
}
#c7 #_d-2 ._img-details {
  background-image: url("images/gallery/Assora2_tn.jpg");
}
#c7 #_d-3 ._img-details {
  background-image: url("images/gallery/Assora3_tn.jpg");
}
#c7 #_d-4 ._img-details {
  background-image: url("images/gallery/Assora4_tn.jpg");
}
#c7 #_d-5 ._img-details {
  background-image: url("images/gallery/Assora5_tn.jpg");
}
#c7 #_d-6 ._img-details {
  background-image: url("images/gallery/Assora6_tn.jpg");
}


/* Gallery */

/* The Modal (background) */
._modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000e8;
}

/* Modal Content */
._modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
}

._modal-content:after, ._img-details:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url("images/frame-border_silver.png");
    border-image-repeat: round;
    border-image-slice: 108 fill;
    border-image-width: 56px;
    border-image-outset: 34px;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none;
}

 ._assora:after {
border-image-source: url("images/frame-border.png")!important;
 }


/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
#mySlides {
  display: none;
}



.social-links {
    width: 270px;
    height: 50px;
    position: relative;
    top: 30px;
}
.social-links a{
    padding: 10px;
}

.social-links a img{
    width: 30px;
}

#login-footer{
  height: 150px!important;
  min-height: 150px!important;
}


#login-footer p{
position: relative;
top: 30px;
color: rgba(255,255,255,.7);
font-family: "Open Sans",Helvetica,Arial,sans-serif;
}