@font-face {
    font-family: 'Radiance';
    src: url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance.eot');
    src: url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance.eot?#iefix') format('embedded-opentype'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance.woff') format('woff'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance.ttf') format('truetype'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance.svg#ywftsvg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Radiance-Bold';
    src: url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-bold.eot');
    src: url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-bold.eot?#iefix') format('embedded-opentype'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-bold.woff') format('woff'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-bold.ttf') format('truetype'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-bold.svg#ywftsvg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Radiance-SemiBold';
    src: url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-semibold.eot');
    src: url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-semibold.eot?#iefix') format('embedded-opentype'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-semibold.woff') format('woff'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-semibold.ttf') format('truetype'),
    url('https://steamcdn-a.akamaihd.net/apps/dota2/fonts/radiance-semibold.svg#ywftsvg') format('svg');
    font-weight: normal;
    font-style: normal;
  }

body {
    font-family: "Radiance";
    margin: 0;
    padding: 0;
    background-color: rgba(41,92,165,1);
    /*background-color: #295CA5;*/
}

#intro{
    width: 100%;
    margin:0;
    margin-top: 0;
    padding:0;
    vertical-align: middle;
    padding-bottom: 100px;
}

.intro_img {
	opacity: 1;
	width: 100%;
    margin:0; 
    padding:0;
    vertical-align: middle;
}

#intro_h1{
    font-family: "Radiance-Bold";
    color: white;
    font-size: 1000%;
    text-align: center;
    margin: 0;
    padding: 0;
    text-shadow: 10px 10px 10px black;
}

#intro_box{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 50px;
    padding: 40px;
    width: 40%;
    background-color: #1D4377;
}

#intro_box_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 500%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
}

#intro_text{
    text-align: center;
    line-height: 135%;
    font-size: 200%;
    padding: 0%;
    margin: 0%;
    color: whitesmoke;


}



/*marauder*/
#container_marauder_heroes{
    background-image: url("../images/marauder_patch.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#marauder_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(20,20,20,1) 0%, rgba(41,92,165,1) 100%)
}

#marauder_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,20,20,1) 100%);
}
#marauder_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgba(0,0,0,0) 100%);}




/*yodieland*/
#container_yodieland_heroes{
    background-image: url("../images/yodieland_patch.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#yodieland_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(255,192,203,1) 0%, rgba(20,20,20) 100%)
}

#yodieland_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,192,203,1) 100%);
}
#yodieland_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(255,192,203,1) 0%, rgba(0,0,0,0) 100%);}



/*reheated*/
#container_reborn_heroes{
    background-image: url("../images/reborn.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#reborn_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(0,127,70,1) 0%, rgba(255,192,203,1) 100%)
}

#reborn_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,127,70,1) 100%);
}
#reborn_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,127,70,1) 0%, rgba(0,0,0,0) 100%);}




/*kazuya*/
#container_kazuya_heroes{
    background-image: url("../images/kazuya_patch.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#kazuya_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(0,127,70,1) 100%)
}

#kazuya_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,10,10,1) 100%);
}
#kazuya_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(10,10,10,1) 0%, rgba(0,0,0,0) 100%);}




/*regrilled*/
#container_regrilled_heroes{
    background-image: url("../images/grill.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#regrilled_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(0,38,255,1) 0%, rgba(10,10,10,1) 100%)
}

#regrilled_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,38,255,1) 100%);
}
#regrilled_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,38,255,1) 0%, rgba(0,0,0,0) 100%);}


/*genfoedt*/
#container_genfoedt_heroes{
    background-image: url("../images/shadow.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#genfoedt_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(127,0,0,1) 0%, rgba(0,38,255,1) 100%)
}

#genfoedt_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(127,0,0,1) 100%);
}
#genfoedt_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(127,0,0,1) 0%, rgba(0,0,0,0) 100%);}


/*failed revival*/
#container_failed_heroes{
    background-image: url("../images/track.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#failed_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(64,64,64,1) 0%, rgba(127,0,0,1) 100%)
}

#failed_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(64,64,64,1) 100%);
}
#failed_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(64,64,64,1) 0%, rgba(0,0,0,0) 100%);}





/*teemo*/
#container_teemo_heroes{
    background-image: url("../images/teemo.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#teemo_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(0,127,14,1) 0%, rgba(64,64,64,1) 100%)
}

#teemo_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,127,14,1) 100%);
}
#teemo_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,127,14,1) 0%, rgba(0,0,0,0) 100%);}



/*model shima and urgot */
#container_model_heroes{
    background-image: url("../images/boaty.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#model_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(40,40,40, 1) 0%, rgba(0,127,14,1) 100%)
}

#model_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(40,40,40, 1) 100%);
}
#model_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(40,40,40, 1) 0%, rgba(0,0,0,0) 100%);}




/*Gammel Dansk Harald */
#container_harald_heroes{
    background-image: url("../images/runesten.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#harald_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(127,51,0, 1) 0%, rgba(40,40,40,1) 100%)
}

#harald_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(127,51,0, 1) 100%);
}
#harald_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(127,51,0, 1) 0%, rgba(0,0,0,0) 100%);}




/*The forgotten */
#container_forgot_heroes{
    background-image: url("../images/clicker_heroes.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#forgot_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(0,206,97, 1) 0%, rgba(127,51,0, 1) 100%)
}

#forgot_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,206,97, 1) 100%);
}
#forgot_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,206,97, 1) 0%, rgba(0,0,0,0) 100%);}

/*The first return */
#container_return_heroes{
    background-image: url("../images/minecraft.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#return_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(0,175,175, 1) 0%, rgba(0,206,97, 1) 100%)
}

#return_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,175,175, 1) 100%);
}
#return_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,175,175, 1) 0%, rgba(0,0,0,0) 100%);}


/*society pack */
#container_society_heroes{
    background-image: url("../images/folketingssalen.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#society_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(211,179,58, 1) 0%, rgba(0,175,175, 1) 100%)
}

#society_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(211,179,58, 1) 100%);
}
#society_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(211,179,58, 1) 0%, rgba(0,0,0,0) 100%);}


/*prophecy */
#container_hacker_heroes{
    background-image: url("../images/hacker.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#hacker_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(10,10,10, 1) 0%, rgba(211,179,58, 1) 100%)
}

#hacker_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,10,10, 1) 100%);
}
#hacker_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(10,10,10, 1) 0%, rgba(0,0,0,0) 100%);}





/*third heroes */
#container_third_heroes{
    background-image: url("../images/aa_tårn.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#third_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(255,106,0, 1) 0%, rgba(10,10,10,1) 100%)
}

#third_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,106,0, 1) 100%);
}
#third_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(255,106,0, 1) 0%, rgba(0,0,0,0) 100%);}



/*second heroes */
#container_second_heroes{
    background-image: url("../images/skåne.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#second_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(0,186,21,1) 0%, rgba(255,106,0, 1)  100%);
}

#second_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,186,21,1) 100%);
}
#second_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,186,21,1) 0%, rgba(0,0,0,0) 100%);}

/*first heroes */
#container_first_heroes{
    background-image: url("../images/first_heroes_bg.png");
    background-size: 100%;
    background-attachment: fixed;
    /* background-position: bottom; */
    background-repeat: no-repeat;
    /*box-shadow: 5px 5px #000000;*/
    background-color: black;
    overflow: hidden;
}

#first_heroes_sep_h1{
    font-family: "Radiance-Bold";
    text-align:center;
    font-size: 750%;
    padding-top: 0%;
    margin: 0%;
    color: white;
    text-shadow: 5px 5px 5px black;
    background: linear-gradient(0deg, rgba(41,92,165,1) 0%, rgba(0,186,21,1) 100%);
}



#first_heroes_sep_top{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(41,92,165,1) 100%);
}

#first_heroes_sep_bot{
    height: 100px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(41,92,165,1) 0%, rgba(0,0,0,0) 100%);
}


.hero_panel{
    margin-top: 10px;
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 50em;
}

.hero_left{
    position: absolute;
    left: 0;
    width: 70%;
    
}
.hero_right{
    position: absolute;
    right: 0;
    width: 70%;
}

.hero_box_left{
    position: relative;
    width: 70rem;
    padding: 2%;
    margin-bottom: 0;
    display: flex;
}

.hero_box_right{
    position: relative;
    width: 70rem;
    padding: 2%;
    margin-left: auto;
    margin-bottom: 0;
    display: flex;
}

.hero_img_left{
    margin-bottom: 0px;
    margin-left: 10%;
    padding: 0px;
    height: 30rem;
    width: 30rem;
    width: auto;
    vertical-align: bottom;
}

.hero_img_right{
    margin-bottom: 0px;
    margin-right: 10%;
    padding: 0px;
    height: 30rem;
    width: 30rem;
    vertical-align: bottom;
}

.hero_info_div{
    width: 100%;
}

.hero_h1{
    font-family: "Radiance-Bold";
    font-size: 5rem;
    color: white;
    text-align: center;
    margin: 0;
    text-shadow: 5px 5px 5px black;
}

.hero_p{
    font-family: "Radiance";
    font-size: 1.75rem;
    line-height: 2.5rem;
    color: white;
    text-align: center;
    margin: 1rem;
}

.ability_box_left{
    margin-top: 0;
    margin-left:5%;
    width: fit-content;
    width: -moz-fit-content;
    position: relative;
    top: -50px;
    padding-bottom: 0.2rem;
    box-shadow: #000000 3px 3px 30px;
}

.ability_box_right{
    margin-top: 0;
    margin-left: auto;
    margin-right:5%;
    width: fit-content;
    width: -moz-fit-content;
    position: relative;
    top: -50px;
    padding-bottom: 0.2rem;
    box-shadow: #000000 3px 3px 30px;
}


.ability_h1{
    font-family: "Radiance-Bold";
    font-size: 300%;
    color: white;
    display: block;
    margin: 0%; 
    margin-left: 10px;
}

.ability_icons_div{
    font-family: "Radiance-Bold";
    font-size: 300%;
    color: white;
    display: flex;
    justify-content: space-between;
    margin: 1rem;
}

.ability_icon{
    filter:saturate(2);
    vertical-align: middle;
    width: 128px;
    padding: 5px;
}

#end {
    vertical-align: middle;
    margin:0; 
    padding:0;
}

.bottom_img {
	opacity: 1;
	width: 100%;
    margin:0; 
    padding:0;
    position: absolute;
    vertical-align: middle;
}