/*---------------------------------------------------------------*/

.bg-img-container {
    background-color: transparent;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
}

.history_iframe {
    position: absolute; 
    left: 0px;
    top: 0px; /* 148px; */
    width: 100%;
    height: 270px;
    background-color: transparent;
    overflow: hidden;
    display: inline;
    border: 0px;
    padding: 0px;
}

/*
#iframe_text_overlay {
    position: absolute;
    top: 120px;  
    width: 480px; 
    height: 270px; 
    background-color: transparent;
    background-image: url("../img/d26.gif");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    text-align: center;
    margin: 0px;
    overflow: hidden;
    opacity: 1; 
    filter: alpha(opacity=100);
    transition: all 1s;
}
*/

#iframe_text_overlay {
    position: absolute;
    left: 50%;
    margin-left: -10.4166vw;
    top: 6.0416vw; /* 116px; */
    width: 20.8333vw; /* 400px; */
    height: 11.71875vw; /* 225px; */
    background-color: transparent;
    background-image: url("../img/d26.gif");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;
    opacity: 1; 
    filter: alpha(opacity=100);
    transition: all 1s;
}


.black_ybutton {
    position: relative;
    margin: 20% 0px 0px 0px;
}


#iframe_container {
    position: absolute;
    top: 6.25vw; /* 120px; */
    width: 25vw; /* 480px; */
    height: 14.0625vw; /* 270px; */
    background-color: transparent;
    margin: 0px;
    overflow: hidden;
    margin: 0px;
    opacity: 1; 
    filter: alpha(opacity=100);
    transition: all 1s;
}

#agent_container {
    background-image: url("../img/backgrounds/aom_setcard_1920x952_170307.png");
    transition:all 1.0s;
    bottom: -49.5833vw;
    height: 49.5833vw;
    left: 0px;        
    width: 100%;
    z-index: 77;
}

#agent_portrait {
    background-image: url("../img/backgrounds/agents_info_tab.png");
    transition: all 1s ease 0s;
    bottom: 0;
    height: 43.9583vw;
    left: 7.76041vw;
    width: 43.9583vw;
    z-index: 79;
}

#agent_name {
    text-transform: uppercase;
    position: absolute;
    left: 6.4583vw; /* 124px; */
    top: 3.4896vw; /* 67px; */
    width: 31.1458vw; /* 598px; */
    height: 3.1250vw; /* 54px; */
    background-color: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 3.1250vw; /* 60px; 44pt;  */
    font-weight: 400;
    font-stretch: ultra-condensed;
    color: white;
    line-height: 3.1250vw; /* 50px; */
    padding: 0px;
    text-align: left;
}

#agent_real_name {
    text-transform: uppercase;
    position: relative;
    left: 0.5208vw; /* 10px; */
    top: -0.7292vw; /* 14px; */
    width: auto;
    height: 1.5104vw; /* 29px; */
    max-height: 1.5104vw; /* 29px; */
    background-color: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 1.875vw; /* 27pt; */
    font-weight: 400;
    font-stretch: ultra-condensed;
    color: white;
    line-height: 1.5104vw; /* 29px; */
    padding: 0px 0px 7px 0px;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border-bottom: 2px solid white;
    display: inline-block;
    vertical-align: middle;    
}

#agent_motto {
    position: absolute;
    left: 6.4583vw; /* 124px; */
    top: 7.7083vw; /* 148px; */
    width: 30.4167vw; /* 584px; */
    height: 2.7083vw; /* 52px; */
    background-color: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 2.0833vw; /* 30pt; */
    font-weight: 400;
    font-style: italic;
    font-stretch: ultra-condensed;
    color: white;
    line-height: 2.6042vw; /* 50px; */
    padding: 0px 0px 0.3646vw 0.7292vw; /* padding: 0px 0px 7px 14px; */
    text-align: left;
}

#agent_desc {
    position: absolute;
    left: 6.4583vw; /* 124px; */
    top: 10.5729vw; /* 11.1979vw;  215px; */
    width: 30.9896vw; /* 595px; */
    height: 4.0104vw; /* 77px; */
    background-color: transparent;
    padding: 0px 0px 0px 0.1563vw; /* padding: 0px 0px 0px 3px; */
    text-align: left;
}

.agenttab_header {
    background-color: transparent;
    color: white;
    font-family: "Oswald",sans-serif;
    font-size: 1.875vw;
    font-stretch: ultra-condensed;
    font-style: italic;
    font-weight: 400;
    z-index: 505;    
}
.agenttab_header.selected {
    background-color: rgb(31, 18, 51); 
   
}
.agenttab_header:hover {
    background-color: #583790;
    cursor: hand;
    cursor: pointer;
}
.agenttab_header.selected:hover {
    background-color: rgb(31, 18, 51); 
    cursor: auto;
}

#agent_abilities_tab {
    position: absolute; 
    left: 6.5104vw; /* 125px; */
    top: 15.3125vw; /* 294px; */
    width: 10.3125vw; /* 198px; */
    height: 3.8542vw; /* 74px; */
    line-height: 3.8542vw; /* 74px; */
    vertical-align: middle;
    text-align: center;
}

#agent_abilities_body {
    position: absolute;
    left: 9.6875vw; /* 186px; */
    top: 21.1979vw; /* 407px; */
    width: 26.0417vw; /* 500px; */
    height: 21.3542vw; /* 410px; */
    background-color: transparent;
    padding: 0px;
    z-index: 9675;
}

.ability_icon {
    background-color: transparent;
    position: absolute;
    left: 0px;    
}
#ability_icon_1 {
    height: 4.3229vw;
    width: 4.3229vw;    
    top: 0px;    
}
#ability_icon_2 {    
    width: 4.3229vw; /* 83px; */
    height: 4.3229vw; /* 83px; */;
    top: 7.9167vw; /* 152px; */
}
#ability_icon_3 {
    width: 4.3229vw; /* 83px; */
    height: 4.3229vw; /* 83px; */
    top: 15.8333vw; /* 304px; */
}

.layer_over_icons {
    position: absolute;
    left: 9,687500%; /* 186px; */
    width: 4.3229vw;    
    height: 4.3229vw;
    background-color: #1f1233;
    z-index: 9999;
}
    
 /* #1f1233; #311d56 */
#layer_over_icon_a {
    top: 39.166667%; /* 423px; */
    opacity: 0; 
    filter: alpha(opacity=0);
    transition: all 3s;
}
#layer_over_icon_b {
    top: 52.777778%; /* 570px; */
    opacity: 0; 
    filter: alpha(opacity=0);
    transition: all 3s;
}

.ability_name {
    background-color: transparent;
    color: white;
    display: inline-block;
    font-family: "Oswald",sans-serif;
    font-size: 1.1458vw;
    font-stretch: ultra-expanded;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 0.9375vw;
    position: absolute;
    vertical-align: middle;    
    width: auto;
    margin: 0;
    padding: 0;
}
#ability_name_1 {
    height: 0.9375vw;
    left: 6.9271vw;
    letter-spacing: 1px;
    line-height: 0.9375vw;    
    top: 0px; /* 0.3646vw; */    
}
#ability_name_2 {
    left: 6.9271vw; /* 133px; */
    top: 7.91672vw; /* 8.2813vw; 159px; */
    height: 0.9375vw; /* 18px; */
    line-height: 0.9375vw; /* 18px; */
} 
#ability_name_3 {
    left: 6.9271vw; /* 133px; */
    top: 15.83332vw; /* 16.1979vw; 311px; */
    height: 0.9375vw; /* 18px; */
    line-height: 0.9375vw; /* 18px; */
} 

.ability_desc {
    position: absolute;
    background-color: transparent;
    color: white;
    font-family: "Muli",sans-serif;
    font-weight: 400;
    text-align: left;
    padding: 0px; 
}
#ability_desc_1 {
    width: 18.75vw;
    height: 3.6458vw; /* 70px */
    left: 6.9271vw;
    top: 1.1vw; /* 19px; */ 
}
#ability_desc_2 {
    left: 6.9271vw; /* 133px; */
    top: 9.0104vw; /* 173px; */
    width: 18.7500vw; /* 360px; */
    height: 3.6458vw; /* 70px */
} 
#ability_desc_3 {
    left: 6.9271vw; /* 133px; */
    top: 16.9271vw; /* 325px; */
    width: 18.7500vw; /* 360px; */
    height: 3.6458vw; /* 70px */
} 

#agent_history_tab {
    height: 3.8542vw;
    left: 16.8229vw;
    line-height: 3.8542vw;
    position: absolute;
    text-align: center;
    top: 15.3125vw;
    vertical-align: middle;
    width: 10.3125vw;
}


#agent_history_body {
    position: absolute;
    left:21.6%;
    top: 30%;
    width: 25%; /* 480px; */
    min-width: 25vw;
    max-width: 480px;
    height: 100%;
    background-color: transparent;
    padding: 0px;
    overflow: hidden;
}



#text_container {
    position: absolute;
    left: 0px;
    top: 6.25vw; /* 11.1111% 120px; */
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: white;
    font-family: "Muli",sans-serif;
    font-weight: 400;
    text-align: center;
 /* padding: 290px 0px 0px 0px; */
    padding: 11.8vw 0px 0px 0px;
    overflow-x: hidden;
    

}















































/*----------------------------------------------------------------*/
/* HOVER AGENTS */

            
            #pick_an_agent {
                position: absolute;
                left: 50%;
                margin-left: -15.83333333%; /* 304px; */
                top: 78.703704%; /* 850px; */
                width: 31.666667%; /* 608px; */
                height: 15.462963%; /* 167px; */
                max-width: 608px;
                max-height: 167px;
                background-color: transparent;
                background-image:url(../img/backgrounds/button_pick_an_agent.png);
                background-repeat: no-repeat;
                background-position: 0px 0px;
                background-size: 100% 100%;
                overflow: hidden;
                padding: 0px;
                z-index: 23;
            }
            
            .comming_agents, .here_agents {
                position: absolute;
                background-color: transparent; 
                opacity: 0.5; 
                filter: alpha(opacity=50);
            } 
            
            .here_agents:hover {
                cursor:hand;
                cursor: pointer;
            }

            #over_ag_1 {
                width: 6.927083%;   /* 133px; */ 
                height: 20%;       /* 216px; */
                left: 1.302083%;  /*  25px; */
                top: 48.888889%; /* 528px; */
                z-index: 37;
                background-color: transparent;
            }
            
            
            #over_ag_2 {
                width: 8.90625%;     /* 171px; */
                height: 40.833333%; /* 441px; */ 
                left: 8.229167%;   /* 158px; */
                top: 36.666667%;  /* 396px; */
                z-index: 38;
                background-color: transparent;
            }
            
            #over_ag_3 {
                width: 8.541667%;    /* 164px; */
                height: 30.925926%; /* 334px; */
                left: 17.135417%;  /* 329px; */
                top: 27.5%;       /* 297px; */
                z-index: 39;
            }
            
            #over_ag_4 {
                width: 2.968750%;   /*  57px; */ 
                height: 8.796296%; /*  95px; */
                left: 25.677083%; /* 493px; */ 
                top: 35.833333%; /* 387px; */
                z-index: 40;
            }
            
            #over_ag_5 {
                width: 10.885417%;  /* 209px; */
                height: 6.203704%; /*  67px; */
                left: 16.5625%;   /* 318px; */
                top: 58.333333%; /* 630px; */
                z-index: 41;
            }
             
            #over_ag_6 {
                width: 12.812500%;  /* 246px; */
                height: 3.333333%; /*  36px; */
                left: 15.052083%; /* 289px; */
                top: 64.537037%; /* 697px; */
                z-index: 42;
            }
            
            #over_ag_3, #over_ag_4, #over_ag_5, #over_ag_6, #over_ag_11, #over_ag_12, #over_ag_13, #over_ag_14, #over_ag_15, #over_ag_16, #over_ag_17, #over_ag_18, #over_ag_19, #over_ag_20, #over_ag_21, #over_ag_22, #over_ag_23, #over_ag_24, #over_ag_25, #over_ag_26, #over_ag_27:hover {
                cursor: hand;
                cursor: pointer;
            }
            
            #over_ag_7 {
                width: 6.927083%;    /* 133px; */
                height: 13.425926%; /* 145px; */
                left: 25.677083%;  /* 493px; */
                top: 45%;         /* 486px; */
                z-index: 43;
            }
            
            #over_ag_8 {
                width: 1.979167%;   /*  38px; */
                height: 0.833333%; /*   9px; */
                left: 32.604167%; /* 626px; */
                top: 55.833333%; /* 603px; */
                z-index: 44;
            }
            
            #over_ag_9 {
                width: 2.5%;        /*  48px; */
                height: 0.833333%; /*   9px; */
                left: 32.604167%; /* 626px; */
                top: 56.666667%; /* 612px; */
                z-index: 45;
            }
            
            #over_ag_10 {
                width: 2.552083%;   /*  49px; */
                height: 3.240741%; /*  35px; */
                left: 31.354167%; /* 602px; */
                top: 58.333333%; /* 630px; */ 
                z-index: 46;
                
            }
            
            #over_ag_11 {
                width: 7.239583%;    /* 139px; */
                height: 21.111111%; /* 228px; */
                left: 39.479167%;  /* 758px; */
                top: 41.203704%;  /* 445px; */
                z-index: 47;
                
            }
            
            #over_ag_12 {
                width: 6.979167%;    /* 134px; */
                height: 10.185185%; /* 110px; */
                left: 44.21875%;   /* 849px; */
                top: 31.018519%;  /* 335px; */
                z-index: 48;
            }
            
            #over_ag_13 {
                width: 7.656250%;   /* 147px; */ 
                height: 5.092593%; /*  55px; */
                left: 45.572917%; /* 875px; */
                top: 41.203704%; /* 445px; */
                z-index: 49;
            }
            
            #over_ag_14 { 
                width: 8.333333%;   /* 160px; */
                height: 3.148148%; /*  34px; */
                left: 45.833333%; /* 880px; */
                top: 46.296296%; /* 500px; */
                z-index: 50;
            }
            
            #over_ag_15 {
                width: 6.458333%;   /* 124px; */
                height: 0.925926%; /*  10px; */
                left: 47.8125%;   /* 918px; */
                top: 49.444444%; /* 534px; */
                z-index: 51;
            }
            
            #over_ag_16 {
                width: 6.406250%;   /* 123px; */
                height: 1.481481%; /*  16px; */
                left: 48.854167%; /* 938px; */
                top: 50.37037%;  /* 544px; */
                z-index: 52;
            }
            
            #over_ag_17 {
                width: 8.697917%;   /* 167px; */
                height: 3.703704%; /*  40px; */
                left: 47.864583%; /* 919px; */
                top: 51.851852%; /* 560px; */
                z-index: 53;
            }
            
            #over_ag_18 {
                width: 13.125%;     /* 252px; */ 
                height: 6.759259%; /*  73px; */
                left: 46.71875%;  /* 897px; */
                top: 55.555556%; /* 600px; */
                z-index: 54;
            }
            
            #over_ag_19 {
                width: 12.916667%;   /* 248px; */
                height: 17.222222%; /* 186px; */
                left: 44.0625%;    /* 846px; */
                top: 62.314815%;  /* 673px; */
                z-index: 55;
            }
            
            #over_ag_20 {
                width: 7.5%;        /*  144px; */
                height: 4.814815%; /*   52px; */
                left: 56.458333%; /* 1084px; */
                top: 52.777778%; /*  570px; */
                -ms-transform: rotate(-22deg); /* IE 9 */
                -webkit-transform: rotate(-22deg); /* Chrome, Safari, Opera */
                transform: rotate(-22deg);
                border-radius: 0.989583vw;
                z-index: 56;
            }
            
            #over_ag_21 {
                width: 4.114583%;    /*   79px; */
                height: 23.796296%; /*  257px; */
                left: 63.90625%;   /* 1227px; */
                top: 38.240741%;  /*  413px; */
                z-index: 57;
                
            }
            
            #over_ag_22 {
                width: 8.489583%;   /*  163px; */ 
                height: 7.685185%; /*   83px; */
                left: 67.552083%;   /* 1297px; */
                top: 41.481481%; /*  448px; */
                z-index: 9;
            }
            
            #over_ag_23 {
                width: 4.427083%;   /*   85px; */
                height: 1.296296%; /*   14px; */
                left: 71.875%;    /* 1380px; */
                top: 49.166667%; /*  531px; */
                z-index: 9;
            }
            
            #over_ag_24 {
                width: 2.864583%;   /*   55px; */
                height: 2.12963%;  /*   23px; */
                left: 71.979167%; /* 1382px; */
                top: 50.462963%; /*  545px; */
                z-index: 9;
            }
            
            #over_ag_25 {
                width: 7.968750%;   /*  153px; */
                height: 4.907407%; /*   53px; */
                left: 67.760417%; /* 1301px; */
                top: 52.592593%; /*  568px; */
                z-index: 9;
            }
            
            #over_ag_26 {
                width: 4.010417%;   /*   77px;  */
                height: 10%;       /*  108px; */
                left: 67.760417%; /* 1301px; */
                top: 57.5%;      /*  621px; */
                z-index: 9;
            }
            
            #over_ag_27 {
                width: 3.59375%;    /*   69px; */ 
                height: 6.018519%; /*   65px; */
                left: 74.114583%; /* 1423px; */ 
                top: 57.5%;      /*  621px; */
                z-index: 9;
            }
            
            #over_ag_28 {
                width: 9.843750%;    /*  189px; */
                height: 29.537037%; /*  319px; */
                left: 89.270833%;  /* 1714px; */
                top: 38.888889%;  /*  420px; */
                z-index: 64;
                
            }