/* ------------------------------------------------------------------------------------------------------------- */
/* Use only classes that have "rotf_" prefix. all other classes like ".header__main" is here only so i could
simulate the containers that are currently on the website. dont rewrite those" I also included last epoch font here
you dont need to do it duplicately.
/* ------------------------------------------------------------------------------------------------------------- */

/*------------ LOGO ASSETS ----------------------*/

.rotf_logo_button {
display:inline-block;
position:absolute;
box-sizing:border-box;
bottom:0;
width:100%;
max-width:600px;
height:500px;
left:50%;
transform:translateX(-50%);
text-align:center;
z-index:3;
transition:0.3s;
cursor:pointer;
text-decoration:none;
}
.rotf_logo_button:hover {
filter: drop-shadow(0px 0px 5px rgba(255,0,0,0.5)) drop-shadow(0px 0px 35px rgba(255,0,0,0.3));
}

.rotf_counter_background {
position:absolute;
left:0;
right:0;
bottom:0;
padding-top:100%;
box-sizing:border-box;
background:url('../rotf/rotf_counter_background.webp') center center no-repeat;
background-size:contain;
transition:0.3s;
}

.rotf_counter_crystals {
position:absolute;
left:0;
right:0;
bottom:0;
padding-top:100%;
box-sizing:border-box;
background:url('../rotf/rotf_counter_crystals.webp') center center no-repeat;
background-size:contain;
scale:1;
transition:0.3s;
}
.rotf_logo_button:hover .rotf_counter_crystals {
scale:1.1;
/*padding-top:110%;*/
bottom:5%;
transition:0.3s;
}

.rotf_counter_axe {
position:absolute;
left:0;
right:0;
bottom:0;
padding-top:100%;
box-sizing:border-box;
background:url('../rotf/rotf_counter_axe.webp') center center no-repeat;
background-size:contain;
transform:translateY(35%);
transition:0.3s;
}
.rotf_logo_button:hover .rotf_counter_axe {
transform:translateY(28%);
}

.rotf_title {
position:absolute;
bottom:125px;
left:0px;
right:0px;
height:45px;
background:url('../rotf/rotf_counter_headline.png') bottom center no-repeat;
background-size:contain;
z-index:3;
transition:0.3s;
}
.rotf_logo_button:hover .rotf_title {
filter: brightness(2);
}

.rotf_more {
position:absolute;
bottom:0px;
left:0;
right:0;
text-align:center;
color:#d58787;
font-size:20px;
letter-spacing: 0px;
transition:0.5s;
}
.rotf_logo_button:hover .rotf_more {
color:#ed8181;
letter-spacing: 2px;
}

/*------------ TIMER ----------------*/
.rotf_timer {
box-sizing:border-box;
display:block;
text-decoration:none;
position:absolute;
z-index:-5;
height:100px;
bottom:32px;
left:50%;
transform:translateX(-50%);
width:100%;
max-width:360px;
background:url('../rotf/rotf_timer_frame.webp') center center no-repeat;
background-size:contain;
z-index:3;
transition:0.3s;
}

.rotf_logo_button:hover .rotf_timer {
animation-name: rotf_timer_hover_anim;
animation-duration: 1.5s;
animation-iteration-count: infinite;

}

@keyframes rotf_timer_hover_anim {
0% {filter: drop-shadow(0px 0px 5px #F00) drop-shadow(0px 0px 1px #bf2525);}
50% {filter: drop-shadow(0px 0px 5px #ed8181) drop-shadow(0px 0px 15px #ff4444);}
100% {filter: drop-shadow(0px 0px 5px #F00) drop-shadow(0px 0px 1px #bf2525);}
}

.rotf_timer_wrap {
position:relative;
z-index:5;
padding-top:17px;
display:flex;
align-items: center;
justify-content: center;
filter:drop-shadow(3px 3px 1px #000) ;
}

.rotf_timer_block {
text-align:center;
}

.rotf_timer_number {
font-size:25px;
line-height:25px;
color:#FFF;
}

.rotf_timer_unit {
font-size:12px;
line-height:12px;
color:#d58787;
}

.rotf_timer_separator {
width:1px;
height:55px;
margin:0px 15px;
background:#93352b;
}


/* ------------------------------------- SEPARATOR -------------------------------------------------------------------------------------------- */

.rotf_separator {
box-sizing:border-box;
height:6px;
width:100%;
background:url('../rotf/rotf_separator.png') top center no-repeat;
background-size:100% 100%;
position:relative;
pointer-events:none;
z-index:3;
}

.rotf_separator:before {
content:"";
position:absolute;
height:110px;
width:600px;
top:50%;
left:-300px;
transform:translateY(-50%);
background:url('../rotf/rotf_separator_blood_center.png') center center no-repeat;
background-size:100% 100%;
}

.rotf_separator:after {
content:"";
position:absolute;
height:110px;
width:600px;
top:50%;
right:-300px;
transform:translateY(-50%);
background:url('../rotf/rotf_separator_blood_center.png') center center no-repeat;
background-size:100% 100%;
}

.rotf_separator_pan {
box-sizing:border-box;
position:absolute;
top:-1px;
bottom:-1px;
left:0;
right:0;
background:url('../rotf/rotf_separator_pan.webp') top left;
animation: separator_pan_down 20s linear infinite;
z-index:-1;
filter: drop-shadow(-1px -1px 0px rgba(255, 0, 0, 0.2)) /*blur(1px)*/;
}

@keyframes separator_pan_down {
from {background-position: 0 0;}
to{background-position: 0 300px;}
}

.rotf_separator_blood_center {
position:absolute;
width:100%;
max-width:400px;
height:75px;
background:url('../rotf/rotf_separator_blood_center.png') center center no-repeat;
background-size:100% 100%;
z-index:1;
top:50;
left:50%;
transform:translate(-50%, -50%);
}

/* ------------------------------------- VIDEO LANDING SCREEN ---------------------------------------------------------------------------------- */

.rotf_video_landing_screen {
box-sizing:border-box;
height:90%;
background:url('../rotf/LE_Website_RoF_BG.webp') center center no-repeat;
background-size:cover;
position:relative;
overflow:hidden;
}

.rotf_video_container {
    padding: 200px min(200px,5%) 50px min(200px,5%);
    box-sizing:border-box;

top:50%;
left:50%;
transform: translate(-50%, 0%);
max-width:1600px;
width:100%;
padding:200px 10% 50px 10%;
z-index:5;
position:relative;
filter: drop-shadow(0px 3px 3px #000) drop-shadow(0px 5px 15px #000) drop-shadow(0px 5px 40px #000);
}
.rotf_trailer_separator {
width: 100%;
padding-top: 5%;
}

.rotf_video_wrap {
box-sizing:border-box;
max-height:50%;
}

.rotf_video {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
}

/* ------------------------------------- BORDER AND CORNERS ------------------------------------------------------------------------------------ */

.rotf_border {
box-sizing:border-box;
border: 10px solid transparent;
border-image-outset: 0;
border-image-repeat: repeat;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-image: url('../rotf/rotf_border.webp') 20 repeat;
position:relative;
padding: 0px;
width: 100%;
}

.rotf_border_corner {
position:absolute;
height: 150px;
width: 150px;
background:url('../rotf/rotf_border_corner.png') center center no-repeat;
background-size:contain;
/*filter: drop-shadow(0px 3px 3px #000);*/
z-index:7;
}

.rotf_border_corner_big {
position:absolute;
height: 200px;
width: 200px;
background:url('../rotf/rotf_border_corner_big.png') center center no-repeat;
background-size:contain;
/*filter: drop-shadow(0px 3px 3px #000);*/
z-index:7;
}

.rotf_border_corner_big.top_left {top: -45px;left: -70px;transform: scale(1, 1);}
.rotf_border_corner.top_right {top: -15px;right: -15px;transform: scale(-1, 1);}
.rotf_border_corner.bottom_left {bottom: -15px;left: -15px;transform: scale(1, -1);}
.rotf_border_corner_big.bottom_right {bottom: -45px;right: -70px;transform: scale(-1, -1);}

.rotf_video_in_border {
padding-top: 56.25%;
}

/* ------------------------------------- SECTIONS --------------------------------------------------------------------------------------------- */

.rotf_section_contents {
background:#050505;
position:relative;
overflow:hidden;
}

.rotf_background_odd {
background:url('../rotf/rotf_section_background_crack.webp') center center no-repeat;
background-size:100% 100%;
position:relative;
}

.rotf_background_even {
background:url('../rotf/rotf_section_background.jpg') center center no-repeat;
background-size:cover;
background-attachment:fixed;
position:relative;
}

.rotf_background_even_pulse {
position:relative;
}

.rotf_background_even_pulse:before {
position:absolute;
content:"";
background:url('../rotf/rotf_halo.webp') center center no-repeat;
background-size:150% 150%;
background-attachment:fixed;
top:0%; left:0%; right:0%; bottom:0%;
animation: rotf_pulse_fade 3s ease-in-out infinite;
}

@keyframes rotf_pulse_fade {
  0%   { opacity: 0.1; }
  50%  { opacity: 0.5; }
  100% { opacity: 0.1; }
}

.rotf_1column {
box-sizing:border-box;
width:100%;
padding:75px 30px;
max-width:1500px;
margin:0 auto;
text-align:center;
position: relative;
z-index: 1;
}

/* ------------------------------------- SECTION CORNERS -------------------------------------------------------------------------------------- */

.rotf_2columns {
box-sizing:border-box;
width:100%;
padding:150px 30px;
max-width:1500px;
margin:0 auto;
display:flex;
align-items: center;
justify-content: center;
gap:50px;
}

.rotf_2columns_sp {
box-sizing:border-box;
width:100%;
padding:150px 30px;
max-width:1500px;
margin:0 auto;
display:flex;
align-items: stretch;
justify-content: center;
gap:50px;
}

.rotf_flipped_order {
flex-direction: row-reverse;
}

/* ------------------------------------- CTA BUTTON ------------------------------------------------------------------------------------------ */

.rotf_cta_center {
text-align:center;
}

a.rotf_cta_button {
position:relative;
display:inline-block;
width:100%;
max-width:350px;
height:100px;
transition:0.3s;
}

.rotf_cta_blood_center {
position:absolute;
height:200px;
top:0%;
transform:translateY(-50%);
left:-50%;
right:-50%;
background:url('../rotf/rotf_cta_blood_center.png') center center no-repeat;
background-size:contain;
scale:0.5;
transition:0.8s;
}
a.rotf_cta_button:hover .rotf_cta_blood_center {
top:50%;
scale:1;
}

.rotf_cta_blood_left {
position:absolute;
width:200px;
height:100px;
top:50%;
transform:translateY(-50%);
left:-10%;
background:url('../rotf/rotf_cta_blood_left.png') center center no-repeat;
background-size:contain;
transition:0.3s;
}
a.rotf_cta_button:hover .rotf_cta_blood_left{
left:-30%;
filter:brightness(200%);
}

.rotf_cta_blood_right {
position:absolute;
width:200px;
height:100px;
top:50%;
transform:translateY(-50%);
right:-10%;
background:url('../rotf/rotf_cta_blood_right.png') center center no-repeat;
background-size:contain;
transition:0.3s;
}
a.rotf_cta_button:hover .rotf_cta_blood_right{
right:-30%;
filter:brightness(200%);
}

.rotf_cta_crystal {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
background:url('../rotf/rotf_timer_frame.webp') center center no-repeat;
background-size:contain;
transition:0.3s;
}
a.rotf_cta_button:hover .rotf_cta_crystal{
scale:1.1;
filter:brightness(200%);
filter: drop-shadow(0px 0px 15px rgba(255,0,0,0.7));
}

.rotf_cta_text {
position:absolute;
font-family: Last Epoch;
color:#fff;
text-shadow:0px 0px 10px #F00;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
font-size:25px;
transition:0.3s;
}
a.rotf_cta_button:hover .rotf_cta_text {
letter-spacing:1.5px;
color:#fa4444;
text-shadow:0px 0px 10px #000;
font-size:25px;
}

/* ------------------------------------- SP SECTION ------------------------------------------------------------------------------------------- */

.rotf_sp_container {
flex:1;
box-sizing:border-box;
background:url('../rotf/rotf_sp_hero_image.webp') center center no-repeat;
background-size:contain;
z-index:1;
}

/* ------------------------------------- SECTION TEXTS --------------------------------------------------------------------------------------- */

.rotf_text_container {
flex:1;
color:#ffe0e0;
font-size: 22px;
line-height: 1.5;
font-weight:400;
font-family: Caladea;
text-shadow: 2px 2px 4px #000;
z-index:1;
}

.rotf_text_container.cta_sizer {
max-width:800px;
margin:0 auto;
}

h2.rotf_headline {
font-family: Last Epoch;
font-size: 2.5rem;
letter-spacing: 3px;
margin:0;
padding:0;
line-height: 100%;
text-transform: lowercase;
text-shadow:none;
background: linear-gradient(to bottom, #f78b8b 0%, #bf1818 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block; 
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
filter: drop-shadow(3px 3px 3px #000);
padding-bottom: 10px;
}

.rotf_quote {
color:#fa4444;
border-left:3px solid #e12d2d;
padding-left:20px;
line-height:1.3;
margin:20px 0px;
}
.rotf_quote span {
line-height:2;
}

/* ------------------------------------- SECTION VIDEO AND IMAGES ------------------------------------------------------------------------------ */

.rotf_video_overlay_1 {
position:absolute;
width:120%;
padding-top:60%;
bottom:-20%;
left:50%;
transform:translateX(-50%);
background:url('../rotf/1.5_Website_TideElemental_Icon.png') bottom center no-repeat;
background-size:contain;
}

.rotf_skill_overlay_1 {
    position: absolute;
    width: 20%;
    padding-top: 60%;
    bottom: -11%;
    left: 0%;
    z-index: 15;
    transform: translateX(-25%);
background:url('../rotf/1.5_Website_TideElemental_Icon.png') bottom center no-repeat;
background-size:contain;
}

.rotf_skill_overlay_2 {
    position: absolute;
    width: 20%;
    padding-top: 60%;
    bottom: -11%;
    left: 0%;
    z-index: 15;
    transform: translateX(-25%);
background:url('../rotf/1.5_Website_Dreamslash_Icon.png') bottom center no-repeat;
background-size:contain;
}

.rotf_skill_overlay_3 {
    position: absolute;
    width: 20%;
    padding-top: 60%;
    bottom: -11%;
    left: 0%;
    z-index: 15;
    transform: translateX(-25%);
background:url('../rotf/1.5_Website_RadiantLance_Icon.png') bottom center no-repeat;
background-size:contain;
}

.rotf_video_sizer {
width:100%;
flex:1;
}

.rotf_video_sizer.vertipad {
margin:50px 0px;
}

.rotf_image_sizer {
width:100%;
flex:1;
}
.rotf_image_sizer img {
width:100%;
}

.rotf_video_sizer video{
width:100%;
}

/* ------------------------------------- SECTION BORDERS AND CORNERS -------------------------------------------------------------------------- */

.rotf_content_border {
box-sizing:border-box;
border: 5px solid transparent;
border-image-outset: 0;
border-image-repeat: repeat;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-image: url('../rotf/rotf_border.webp') 20 repeat;
position:relative;
padding: 0px;
width: 100%;
line-height: 0;
}

.rotf_content_border_corner {
position:absolute;
height: 100px;
width: 100px;
background:url('../rotf/rotf_border_corner.png') center center no-repeat;
background-size:contain;
filter: drop-shadow(0px 3px 3px #000);
z-index:7;
}

.rotf_content_border_corner_big {
position:absolute;
height: 200px;
width: 200px;
background:url('../rotf/rotf_border_corner_big.png') center center no-repeat;
background-size:contain;
filter: drop-shadow(0px 3px 3px #000);
z-index:7;
}

.rotf_content_border_corner_big.top_left {top: -40px;left: -65px;transform: scale(1, 1);}
.rotf_content_border_corner.top_right {top: -8px;right: -8px;transform: scale(-1, 1);}
.rotf_content_border_corner.btm_left {bottom: -8px;left: -8px;transform: scale(1, -1);}
.rotf_content_border_corner_big.btm_right {bottom: -40px;right: -65px;transform: scale(-1, -1);}

/*-------------------------------------------------------------------------------------- WEB LAYOUT SIMULATOR ------------------------------------*/

.spacer {
height:200px;
}

.header__main {
background-image: linear-gradient(0deg,transparent 0,rgba(10,10,10,.7));
position: absolute;
left: 0;
right: 0;
z-index: 800;
padding-bottom: .5rem;
padding-top: 1rem;
max-width: 100%;
margin-left: auto;
margin-right: auto;
color:#FFF;
text-align:center;
padding:50px;
}

.footer {
box-sizing:border-box;
color:#333;
background:#111;
}

/*----------------------------------------------------------------------------------------------- RESPONSIVE ------------------------------------*/

@media screen and (max-width: 1000px) { 
.rotf_2columns,
.rotf_2columns_sp {
flex-direction: column;
padding:50px 30px;
}

.rotf_sp_container {
min-height: 500px;
}

.rotf_headline {
text-align:center;
}

.rotf_video_container {
padding: 200px 30px 50px 30px;
}

.rotf_border {
border: 5px solid transparent;
border-image-outset: 0;
border-image-repeat: repeat;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-image: url('../rotf/rotf_border.webp') 20 repeat;
}

.rotf_border_corner {
height: 30px;
width: 30px;
}

.rotf_border_corner.top_left {top: -8px;left: -8px;}
.rotf_border_corner.top_right {top: -8px;right: -8px;}
.rotf_border_corner.bottom_left {bottom: -8px;left: -8px;}
.rotf_border_corner.bottom_right {bottom: -8px;right: -8px;}

.rotf_background_even_pulse:before {
display:none;
}
}



/*-------------------Ahmed's Edits-----------*/
.live_text {
padding-top: 30px;
font-family: Last Epoch;
font-size:32px;
font-weight:600;
line-height:40px;
color:#e1cbcb;
letter-spacing:0px;
text-shadow:0px 0px 10px #F00, 3px 3px 1px #000;
transition:0.5s;
}
.rotf_logo_button:hover .live_text {
color:#ed8181;
letter-spacing:2px;
text-shadow:0px 0px 12px #ff4444, 0px 0px 4px #bf2525;
}