/**
 *
 * Language Selection Button
 *
 */

#lang-button-container .Lang_Button {
    /* background-image: url(/assets/images/ui/buttons/lang/Lang-Button.png); */
    background-repeat: no-repeat;
    background-color: transparent!important;
    position: absolute;
    width: 402px;
    height: 171px;
    /** Top should be the same since they are level.. **/
    top: 620px;
    z-index: 101;
    /* opacity: .8; */
}
#lang-button-container .Lang_Button:active {
    /* background-image: url(/assets/images/ui/buttons/lang/Lang-Button-Active.png); */
    /* position: absolute;
    left: 556px;
    top: 630px;
    width: 377px;
    height: 146px;
    z-index: 6; */
}


/* English Button Position */
#lang-button-container .Lang_Button.English {
    left: 490px;
}
#lang-button-container .Lang_Button.English:active {
    left: 510px;
}
 

/* Spanish Button Position */
#lang-button-container .Lang_Button.Spanish {
    left: 1030px;
}
#lang-button-container .Lang_Button.Spanish:active {
    left: 1050px;
}

/**
 *
 * Language Selection Button | Text
 *
 */
 
#lang-button-container .Lang_Button>.text {
    font-family: 'national_park_heavy';
    font-size: 80px;
    text-transform: uppercase;
    color: rgb(51, 27, 7);
    text-shadow: 1px 1px 0 #fafbfc85;
    font-weight: bold;
    line-height: 80px;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#lang-button-container .Lang_Button:active > .text {
    margin-left: -36px;
}
/* English Button Text mods */
#lang-button-container .Lang_Button.English>.text {
    position: relative;
    display: block;
    left: 0;
}
#lang-button-container .Lang_Button.English:active>.text {
    position: relative;
    display: block;
    left: 0;

}

/* Spanish Button Text mods */
#lang-button-container .Lang_Button.Spanish>.text {}






/**
 *
 * Close Button - (X)
 *
 */

.button.close {
    position: absolute;
    width: 88px;
    height: 88px;
    z-index: 33;
    transform: translateX(1470px) translateY(-66px) scale(1);
}

.button.close:active {
    -webkit-transform: scale(1.4);
    transform: translateX(1470px) translateY(-66px) scale(0.9);
}


/* Change orientation of buttons to vertical */

.button-container.vertical {
    flex-direction: column!important;
}

.button.log .text {
    /* position: relative; */
    /* left: -12px; */
    /* top: 12px; */
    font-family: 'national_park_heavy';
    font-size: 46px;
    text-transform: capitalize;
    color: rgb(51, 27, 7);
    text-shadow: 1px 1px 0 #fafbfc85;
    font-weight: bold;
    line-height: 87px;
    pointer-events: none;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}

.button.log.selected span.text {
    color: #fafbfc !important;
    text-shadow: 1px 1px 0 rgb(51, 27, 7), -1px 0px 7px rgb(51, 27, 7), 1px 1px 0 rgb(51, 27, 7), -1px 0px 7px rgb(51, 27, 7)!important;
    pointer-events: none;
}

.button.selected span.text {
    color: #fafbfc !important;
    text-shadow: 1px 1px 0 rgb(51, 27, 7), -1px 0px 7px rgb(51, 27, 7), 1px 1px 0 rgb(51, 27, 7), -1px 0px 7px rgb(51, 27, 7)!important;
    pointer-events: none;
}
 


/**
 *
 * Back & Forward Directional Buttons 
 *
 */
 

 #back-button-wrapper img {
    position: absolute;
    left: 140px;
    top: 710px;

    display: none;
    visibility: hidden;
}





/* div.arrow.back {
    background-image: url(/assets/images/ui/buttons/log-back-arrow.png)!important;
    position: absolute;
    width: 380px;
    height: 135px;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    transform: translateX(107px) translateY(690px); */
    /* Hide the back arrow unless it is specified within a dialog class */
    /* display: none;
    visibility: hidden;
} */

div.arrow.back {
    background-image: url(/assets/images/ui/nav-buttons/back_button_en.png)!important;
    position: absolute;
    width: 401px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    transform: translateX(107px) translateY(680px);
    display: none;
    visibility: hidden;
}

/* div.arrow.back:hover, */

/* div.arrow.back:active {
    background-position: center;
    width: 380px;
    height: 135px;
    background-image: url(/assets/images/ui/buttons/log-back-arrow-pressed.png)!important;
} */

div.arrow.back>span.text {
    font-size: 65px;
    display: block;
    position: relative;
    left: 20px;
    top: 20px;
    display: none;
}


/* div.arrow.back:hover  > span.text, */

/* div.arrow.back:active>span.text {
    left: 22px;
    top: 21px;
} */


/*=============================================
=            Large Buttons for 1 or 2         =
=============================================*/

div.button-container.two {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1490px;
    margin: 10px auto;
    position: absolute;
    text-align: center;
    z-index: 1000;
    transform: translateX(8px) translateY(698px);
}

div.button-container.two .button.log {
    height: 115px;
    width: 360px;
    margin: 0 30px;
    background-size: cover;
    background-position: center;
    font-size: 51px;
}


/* SHADOW */


/* .button.log.three.shadow:hover,  */

div.button-container.two .button.log:active,
div.button-container.two .button.log.selected {
    /* background: green; */
    height: 115px;
    width: 360px;
    /* margin: 0 18px; */
    background-position: center;
    /* padding-left: 2px; */
    /* padding-top: 1px!important; */
}

div.button-container.two .button.log:active>.text {
    padding-left: 1px;
    padding-top: 1px!important;
    display: block;
}

div.button-container.two .button.log.multiline:active>.text {
    padding-left: 1px;
    padding-top: 16px!important;
}

div.button-container.two .button.log.multiline>.text {
    font-size: 40px;
    line-height: 38px;
    display: block;
    padding-top: 14px;
}


/*=====  End of Large Buttons for 1 or 2  ======*/


/*=============================================
=            Large Buttons for 1 or 2         =
=============================================*/

div.button-container.twox>.button.log.selected {
    /* background: green; */
    height: 140px;
    width: 440px;
    /* margin: 0 18px; */
     /* background-repeat: no-repeat; */
    background-position: center;
}

div.button-container.twox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1490px;
    margin: 10px auto;
    position: absolute;
    text-align: center;
    z-index: 1000;
    transform: translateX(8px) translateY(680px);
    /* background: #eee; */
}

div.button-container.twox>.button.log {
    /* background: green; */
    height: 140px;
    width: 440px;
    margin: 0 75px;
     background-size: cover;
    background-position: center;
}


/* SHADOW */

div.button-container.twox>.button.log:active,
div.button-container.twox>.button.log.selected {
    /* background: green; */
    height: 140px;
    width: 440px;
    /* margin: 0 18px; */
     /* background-repeat: no-repeat; */
    background-position: center;
}

div.button-container.twox>.button.log .text {
    position: relative;
    /* left: -12px; */
    top: 12px;
    font-family: 'national_park_heavy';
    font-size: 62px;
    text-transform: capitalize;
    /* color: rgb(51, 27, 7); */
    /* text-shadow: 1px 1px 0 #fafbfc85; */
    font-weight: bold;
    /* line-height: 87px; */
    /* background-color: rgba(0, 8, 255, 0.5); */
    /* line-height: 105px; */
}

div.button-container.twox>.button.log .text {
    position: relative;
    top: 12px;
    font-family: 'national_park_heavy';
    font-size: 56px;
    text-transform: capitalize;
    padding-left: 16px;
}

div.button-container.twox>.button.log.multiline .text {
    font-size: 52px;
}

div.button-container.twox>.button.log:active .text {
    /* div.button-container.two > .button.log:hover .text { */
    padding-left: 2px!important;
    padding-top: 5px!important;
}

div.button-container.twox>.button.log.multiline>.text {
    display: block;
    font-size: 48px;
    line-height: 50px;
    padding-top: 1px;
}

div.button-container.twox>.button.log:active>.text {
    /* div.button-container.two > .button.log.multiline:hover .text { */
    padding-left: 2px!important;
    padding-top: 1px!important;
    display: block;
}

div.button-container.twox>.button.log.multiline:active .text {
    padding-left: 2px!important;
    padding-top: 5px!important;
}


/*=====  End of Large Buttons for 1 or 2  ======*/


/*=============================================
=     Large Button #3 for 2 or 3 buttons      =
=============================================*/

div.button-container.three {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1490px;
    margin: 10px auto;
    position: absolute;
    text-align: center;
    z-index: 1000;
    transform: translateX(8px) translateY(698px);
}

div.button-container.three .button.log {
    /* background: green; */
    height: 115px;
    width: 360px;
    margin: 0 30px;
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-01@2x.png); */
    background-size: cover;
    background-position: center;
    font-size: 51px;
}


/* SHADOW */


/* .button.log.three.shadow:hover,  */

div.button-container.three .button.log:active,
div.button-container.three .button.log.selected {
    /* background: green; */
    height: 115px;
    width: 360px;
    /* margin: 0 18px; */
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-pressed@2x.png); */
    /* background-repeat: no-repeat; */
    background-position: center;
    /* padding-left: 2px; */
    /* padding-top: 1px!important; */
}

div.button-container.three .button.log:active>.text {
    padding-left: 1px;
    padding-top: 1px!important;
    display: block;
}

div.button-container.three .button.log.multiline:active>.text {
    padding-left: 1px;
    padding-top: 13px!important;
}

div.button-container.three .button.log.multiline>.text {
    font-size: 40px;
    line-height: 37px;
    display: block;
    padding-top: 12px;
}


/*====================================================
=   Button `four` for displaying 4 or more buttons   =
======================================================*/

div.button-container.four {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1490px;
    margin: 10px auto;
    position: absolute;
    text-align: center;
    z-index: 1000;
    transform: translateX(8px) translateY(698px);
}

div.button-container.four .button.log {
    /* background: green; */
    height: 100px;
    width: 310px;
    margin: 0 20px;
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-01@2x.png); */
    background-size: cover;
    background-position: center;
}

div.button-container.four .button.log.selected {
    /* background: green; */
    height: 100px;
    width: 310px;
    /* margin: 0 18px; */
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-pressed@2x.png); */
    /* background-repeat: no-repeat; */
    background-position: center;
}




div.button-container.five {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1620px;
    margin: 10px auto;
    position: absolute;
    text-align: center;
    z-index: 1000;
    transform: translateX(-62px) translateY(698px);
}
div.button-container.five .button.log {
    /* background: green; */
    /* height: 100px; */
    width: 300px;
    /* margin: 0 20px; */
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-01@2x.png); */
    background-size: cover;
    background-position: center;
}

.five.horizontal img.active {
    width: 320px;
}

.five.horizontal img.default {
    width: 320px;
}



/* SHADOW */


/* .button.log.three.shadow:hover,  */

div.button-container.four .button.log:active,
div.button-container.four .button.log.pressed {
    /* background: green; */
    height: 100px;
    width: 310px;
    /* margin: 0 18px; */
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-pressed@2x.png); */
    /* background-repeat: no-repeat; */
    background-position: center;
}

div.button-container.four .button.log:active>.text,
div.button-container.four .button.log:active.pressed>.text {
    padding-left: 1px;
    padding-top: 1px!important;
    display: block;
}

div.button-container.three .button.log>.text {
    font-size: 50px;
    line-height: 90px;
}

div.button-container.four .button.log.multiline>.text {
    font-size: 36px;
    line-height: 32px;
    display: block;
    padding-top: 12px;
    line-height: 31px;
}

div.button-container.four .button.log.multiline:active>.text,
div.button-container.four .button.log.multiline.pressed:active>.text {
    padding-left: 1px;
    padding-top: 13px!important;
}


/*=====  End of Button `four` for displaying 4 or more buttons   ======*/











.button.audio {
    width: 450px;
    display: block;
    margin: 0 auto;    
}











div.button-container.four {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1490px;
    margin: 10px auto;
    position: absolute;
    text-align: center;
    z-index: 1000;
    transform: translateX(8px) translateY(698px);

    /* height: 115px; */
}

div.button-container.four .button.log {
    margin: 0 30px;
}

div.button-container.four.vertical .button.log,
div.button-container.four.vertical .button.log.selected {
    /* background: green; */
    height: 115px;
    width: 360px;
    /* margin: 0 18px; */
    /* background-image: url(/assets/images/ui/buttons/logs/LG/Log-Button-pressed@2x.png); */
    /* background-repeat: no-repeat; */
    background-position: center;
}


div.button-container.four .button.log:active, div.button-container.four .button.log.pressed {
    /* height: 115px; */ 
}

div.button-container.four.horizontal {

}

div.button-container.four.horizontal .button.log, 
div.button-container.four.horizontal .button.log.selected {
    height: 100px;
    width: 300px;
    margin: 0px 65px 0 0px;
}