/* -------------------------------------------------------- RESPO */
@media screen and (max-width: 1200px)  {
    .transformMethodContainer {
        background-color: yellow;
        transform: scale(0.7, 0.7);
    }

    .transformationTextContainer {

        z-index: 3315;

        width: 80%;
        margin: 0 auto;


        background-color: rgba(0,0,0,0.2);

        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;

        padding: 5px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (min-width: 1201px)  {
    .transformMethodContainer{
        background-color: green;
        transform: scale(1, 1);
    }

    .transformationTextContainer {
        height: 50px;
        z-index: 3315;

        width: 1000px;
        margin: 0 auto;


        background-color: rgba(0,0,0,0.2);

        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;

        padding: 20px;
        padding-left: 60px;
        padding-right: 60px;
    }

}
/* -------------------------------------------------------- RESPO end */

.atrans_sym_00 {
    height: 175px;
    width: 155px;
    float: left;

    cursor: pointer;
}

.atrans_sym_num {
    position: relative;
    left: 20px;
    top: -10px;
    height: 54px;
    width: 54px;
}

.atrans_sym_active          { background-image: url('../img/transformation/atrans_hex_quest_active.png');     background-size: 155px 175px;}

.atrans_sym_unactive        { background-image: url('../img/transformation/atrans_hex_quest_unactive.png');   background-size: 155px 175px;}
.atrans_sym_unactive:hover  { background-image: url('../img/transformation/atrans_hex_quest_active.png');     background-size: 155px 175px;}


.atrans_sym_01              { background-image: url('../img/transformation/atrans_hex_01_up.png');            background-size: 155px 175px;}
.atrans_sym_01:hover        { background-image: url('../img/transformation/atrans_hex_01_down.png');          background-size: 155px 175px;}
.atrans_sym_01_active       { background-image: url('../img/transformation/atrans_hex_01_down.png');          background-size: 155px 175px;}
.atrans_sym_01_active_orange       { background-image: url('../img/transformation/atrans_hex_01_down_orange.png');          background-size: 155px 175px;}

.atrans_sym_02              { background-image: url('../img/transformation/atrans_hex_02_up.png');            background-size: 155px 175px;}
.atrans_sym_02:hover        { background-image: url('../img/transformation/atrans_hex_02_down.png');          background-size: 155px 175px;}
.atrans_sym_02_active       { background-image: url('../img/transformation/atrans_hex_02_down.png');          background-size: 155px 175px;}
.atrans_sym_02_active_orange       { background-image: url('../img/transformation/atrans_hex_02_down_orange.png');          background-size: 155px 175px;}

.atrans_sym_03              {  background-image: url('../img/transformation/atrans_hex_03_up.png');           background-size: 155px 175px;}
.atrans_sym_03:hover        { background-image: url('../img/transformation/atrans_hex_03_down.png');          background-size: 155px 175px;}
.atrans_sym_03_active       { background-image: url('../img/transformation/atrans_hex_03_down.png');          background-size: 155px 175px;}
.atrans_sym_03_active_orange        { background-image: url('../img/transformation/atrans_hex_03_down_orange.png');          background-size: 155px 175px;}

.atrans_sym_04              { background-image: url('../img/transformation/atrans_hex_04_up.png');            background-size: 155px 175px;}
.atrans_sym_04:hover        { background-image: url('../img/transformation/atrans_hex_04_down.png');          background-size: 155px 175px;}
.atrans_sym_04_active        { background-image: url('../img/transformation/atrans_hex_04_down.png');         background-size: 155px 175px;}
.atrans_sym_04_active_orange        { background-image: url('../img/transformation/atrans_hex_04_down_orange.png');         background-size: 155px 175px;}

.atrans_sym_05              { background-image: url('../img/transformation/atrans_hex_05_up.png');            background-size: 155px 175px;}
.atrans_sym_05:hover        { background-image: url('../img/transformation/atrans_hex_05_down.png');          background-size: 155px 175px;}
.atrans_sym_05_active       { background-image: url('../img/transformation/atrans_hex_05_down.png');          background-size: 155px 175px;}
.atrans_sym_05_active_orange       { background-image: url('../img/transformation/atrans_hex_05_down_orange.png');          background-size: 155px 175px;}

.atrans_sym_06              { background-image: url('../img/transformation/atrans_hex_06_up.png');            background-size: 155px 175px;}
.atrans_sym_06:hover        { background-image: url('../img/transformation/atrans_hex_06_down.png');          background-size: 155px 175px;}
.atrans_sym_06_active       { background-image: url('../img/transformation/atrans_hex_06_down.png');          background-size: 155px 175px;}
.atrans_sym_06_active_orange       { background-image: url('../img/transformation/atrans_hex_06_down_orange.png');          background-size: 155px 175px;}

.atrans_sym_07              { background-image: url('../img/transformation/atrans_hex_07_up.png');            background-size: 155px 175px;}
.atrans_sym_07:hover        { background-image: url('../img/transformation/atrans_hex_07_down.png');          background-size: 155px 175px;}
.atrans_sym_07_active       { background-image: url('../img/transformation/atrans_hex_07_down.png');          background-size: 155px 175px;}
.atrans_sym_07_active_orange       { background-image: url('../img/transformation/atrans_hex_07_down_orange.png');          background-size: 155px 175px;}

.atrans_sym_01_num {    background-image: url('../img/transformation/atrans_hex_01_num.png'); background-size: 54px 54px;}
.atrans_sym_02_num {    background-image: url('../img/transformation/atrans_hex_02_num.png'); background-size: 54px 54px;}
.atrans_sym_03_num {    background-image: url('../img/transformation/atrans_hex_03_num.png'); background-size: 54px 54px;}
.atrans_sym_04_num {    background-image: url('../img/transformation/atrans_hex_04_num.png'); background-size: 54px 54px;}
.atrans_sym_05_num {    background-image: url('../img/transformation/atrans_hex_05_num.png'); background-size: 54px 54px;}
.atrans_sym_06_num {    background-image: url('../img/transformation/atrans_hex_06_num.png'); background-size: 54px 54px;}
.atrans_sym_07_num {    background-image: url('../img/transformation/atrans_hex_07_num.png'); background-size: 54px 54px;}

.cartoons_atrans_sym_01              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_1.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_01:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_1.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_01_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_1_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_01_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_1_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_01_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_1_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_01_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_1_it.png');         background-size: 165px 185px;}

.cartoons_atrans_sym_02              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_2.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_02:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_2.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_02_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_2_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_02_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_2_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_02_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_2_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_02_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_2_it.png');         background-size: 165px 185px;}

.cartoons_atrans_sym_03              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_3.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_03_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_3_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_03:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_3.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_03_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_3_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_03_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_3_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_03_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_3_it.png');         background-size: 165px 185px;}

.cartoons_atrans_sym_04              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_4.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_04:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_4.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_04_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_4_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_04_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_4_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_04_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_4_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_04_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_4_it.png');         background-size: 165px 185px;}

.cartoons_atrans_sym_05              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_5.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_05:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_5.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_05_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_5_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_05_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_5_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_05_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_5_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_05_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_5_it.png');         background-size: 165px 185px;}

.cartoons_atrans_sym_06              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_6.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_06:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_6.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_06_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_6_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_06_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_6_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_06_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_6_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_06_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_6_it.png');         background-size: 165px 185px;}

.cartoons_atrans_sym_07              { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_7.png');            background-size: 155px 175px;}
.cartoons_atrans_sym_07:hover        { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_7.png');            background-size: 165px 185px;}
.cartoons_atrans_sym_07_active       { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_7_green.png');      background-size: 165px 185px;}
.cartoons_atrans_sym_07_it           { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_7_it.png');         background-size: 155px 175px;}
.cartoons_atrans_sym_07_it:hover     { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_7_it.png');         background-size: 165px 185px;}
.cartoons_atrans_sym_07_active_it    { background-image: url('../img/cartoons/BAS/methods/BAS_method_MENU_7_it.png');         background-size: 165px 185px;}

.atrans_sym_container {
    position: relative;
    padding: 5px;
    float: left;
}

.atrans_title {
    position: relative;
    top: 0px;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    color: black;
    z-index: 99;
    margin: auto;
    width: 80%;
    text-align: center;
}

.atrans_text {
    font-weight: normal;
    font-size: 18px;
    color: white;
}

.atrans_arrow_to{
    position: relative;
    top: -120px;
    left: -70px;
    width: 120px;
    height: 60px;
    z-index: 100;

    background-image: url('../img/transfArrowNext.png');
    background-size: 120px 60px;

    -webkit-animation: anim_atrans_ha_move_left 1s ease 0s infinite alternate;
    animation: anim_atrans_ha_move_left 1s ease 0s  infinite alternate;
}

@-webkit-keyframes anim_atrans_ha_move_left{
    0%   { opacity: 0;}
    100% { opacity: 1;}
}

@keyframes anim_atrans_ha_move_left{
    0%   { opacity: 0;}
    100% { opacity: 1;}
}

.atrans_arrow_stop00{
    position: relative;
    top: 50px;
    left: 70px;
    width: 50px;
    height: 53px;
    z-index: 100;
    opacity: 1;

    background-image: url('../img/transformation/trans_arrow_ok.png');
    background-size: 50px 53px;
}

.atrans_arrow_stop{
    position: relative;
    top: -120px;
    left: -70px;
    width: 120px;
    height: 60px;
    z-index: 100;

    background-image: url('../img/transfArrowNext.png');
    background-size: 120px 60px;

    opacity: 0.2;
}

.atrans_motyl{
    position: absolute;
    top: 20px;
    width: 99px;
    height: 86px;
    z-index: 100;

    background-image: url('../img/transformation/atrans_motyl_0.png');

    -webkit-animation: anim_atrans_motyl 1s ease 0s infinite alternate;
    animation: anim_atrans_motyl 1s ease 0s infinite alternate;
}

@-webkit-keyframes anim_atrans_motyl{
    0%   {transform: scale(1,1); opacity: 1;}
    25% {transform: scale(0.1,1); opacity: 1;}
    50% {transform: scale(1,1); opacity: 1;}
    75% {transform: scale(0.1,1); opacity: 1;}
    100% {transform: scale(1,1); opacity: 1;}
}

@keyframes anim_atrans_motyl{
    0%   {transform: scale(1,1); opacity: 1;}
    25% {transform: scale(0.1,1); opacity: 1;}
    50% {transform: scale(1,1); opacity: 1;}
    75% {transform: scale(0.1,1); opacity: 1;}
    100% {transform: scale(1,1); opacity: 1;}
}


.atrans_motyl_let{
    position: absolute;
    opacity: 0;

    -webkit-animation: anim_atrans_motyl_let 5s ease 0s 1;
    animation: anim_atrans_motyl_let 5s ease 0s 1;
}

@-webkit-keyframes anim_atrans_motyl_let{
    0%   {transform: translate(-250px, 0)  scale(3,3) rotate(60deg); opacity: 0;}
    50% {transform: translate(250px, 250px)  scale(1,1) rotate(-30deg); opacity: 1;}
    100% {transform: translate(450px, -100px)  scale(0,0) rotate(-20deg); opacity: 0;}
}

@keyframes anim_atrans_motyl_let{
    0%   {transform: translate(-250px, 0)  scale(3,3) rotate(60deg); opacity: 0;}
    50% {transform: translate(250px, 250px)  scale(1,1) rotate(-30deg); opacity: 1;}
    100% {transform: translate(450px, -100px)  scale(0,0) rotate(-20deg); opacity: 0;}
}

.atrans_motyl_let_off{
    position: absolute;
    opacity: 0;
    display: none;
}

.transformationHoneycomb {
    width: 1200px;
    height: 200px;
    z-index: 3315;
    margin: 0 auto;

    min-width: 1000px;
 }


.atrans_next_info{
    padding: 10px;
    width: 80%;
    margin: 0 auto;
    background-color: silver;

    cursor: pointer;

    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

.atrans_next_info_btn{
    padding: 5px;
    width: 10%;
    margin: 0 auto;
    background-color: green;
    opacity: 0.5;

    cursor: pointer;

    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

.atrans_pestlegs{
    width: 200px;
    height: 200px;
    opacity: 0.8;
    background-image: url('../img/transformation/btn_pestlegs_up.png');
}

.atrans_pestlegs:hover{
    opacity: 1;
    background-image: url('../img/transformation/btn_pestlegs_up.png');
}

.atrans_dse{
    width: 200px;
    height: 200px;
    opacity: 0.8;
    background-image: url('../img/transformation/btn_dse_up.png');
}

.atrans_dse:hover{
    opacity: 1;
    background-image: url('../img/transformation/btn_dse_up.png');
}

.atrans_sul{
    width: 200px;
    height: 200px;
    opacity: 0.8;
    background-image: url('../img/transformation/btn_sul_up.png');
}

.atrans_sul:hover{
    opacity: 1;
    background-image: url('../img/transformation/btn_sul_up.png');
}

.atrans_ils{
    width: 200px;
    height: 200px;
    opacity: 0.8;
    background-image: url('../img/transformation/btn_ILS_up.png');
}

.atrans_ils:hover{
    opacity: 1;
    background-image: url('../img/transformation/btn_ILS_up.png');
}

.atrans_ip{
    width: 200px;
    height: 200px;
    opacity: 0.8;
    background-image: url('../img/transformation/btn_IP_up.png');
}

.atrans_ip:hover{
    opacity: 1;
    background-image: url('../img/transformation/btn_IP_up.png');
}