@font-face {
    font-family: centerBold;
    src: url(centerBold.otf);
}
@font-face {
    font-family: centerReg;
    src: url(centerReg.otf);
}
@font-face {
    font-family: helN;
    src: url(HelveticaNeue.ttc);
}
@font-face {
    font-family: arial;
    src: url(ArialCE.ttf);
}
html, body {
    height: 100%;
}
body {
    font-family: centerBold;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Registration_Background.jpg);
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.div1 {
    width: 100%;
    display: none;
}
h4 {
    color: #000;
}
#closeFeat {
    z-index: 99;
}
.row {
    width: 80%;
}
.divForm, .regForm, .forgotForm {
    width: 38%;
    margin: auto;
    margin-top: 10%;
    text-align: center;
}
#firstnameAvatar {
    position: absolute;
    left: 50.5%;
    z-index: 99;
    top: 48.9%;
    font-size: 1.1vw;
}
/* #firstnameAvatar {
    top: 47.9%;
    font-size: 1.1vw;
} */
#divForm {
    background-color: #ffffff;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Gray_Bar.png);
    background-size: 100% 100%;
    margin-top: 5%;
    border-radius: 8%;
}
#rexLogo {
    width: 35%;
    margin: auto;
    margin-top: 8%;
}
#rexLogoReg {
    position: absolute;
    width: 15%;
    left: 27%;
    top: 35%;
}
#veapLogo {
    position: absolute;
    left: 30%;
    width: 10%;
    top: 80%;
}
.privacyNotice {
    font-size: .7vw;
    text-align: left;
}
#forgotLogo {
    margin-top: 26%;
}
.regForm {
    display: none;
    margin-top: 8%;
}
#regForm {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Reg_Container_Final.png);
    background-size: 100% 100%;
    margin-top: 2%;
    width: 50%;
    margin-bottom: 2%;
}
.forgotForm {
    display: none;
    font-family: helN;
}
.formBG {
    font-family: helN;
    width: 63%;
    margin: auto;
    padding: 8%;
    padding-top: 0;
}
#school_name {
    border: 2px solid #c2202b;
    outline: none;
    font: 400 13.3333px arial;
    border-radius: 10px;
    padding-top: 1vw;
    padding-bottom: 1vw;
    width: 100%;
    padding-left: 4%;
}
.a1 {
    color: #888 !important;
    font-size: .79vw;
}
.form-group {
    margin-bottom: .5vw;
}
#exampleInputPassword1 {
    margin-bottom: 1.5vw;
}
.regBG {
    font-family: helN;
    width: 60%;
    margin-left: 38%;
    padding: 10%;
    border-radius: 0 5% 5% 0;
    padding-top: 5%;
    padding-bottom: 5%;
}
.img-fluid.regLogo {
    width: 25%;
    float: left;
    margin-top: 52%;
    margin-left: 5%;
}
.img-fluid.veapLogo {
    filter: invert(85%) sepia(90%) saturate(3505%) hue-rotate(354deg) brightness(81%) contrast(99%);
    width: 50%;
}
.form-control {
    text-align: center;
    border: 2px solid #c2202b;
    outline: none;
    font: 400 13.3333px arial;
    border-radius: 10px;
    padding-top: 1vw;
    padding-bottom: 1vw;
}
label {
    font-size: 12px;
}
.btn {
    border-radius: 20px;
    font: 400 13.3333px arial;
    padding-top: .5vw;
    padding-bottom: .5vw;
}
.form-control:focus {
    outline: none;
    border-color: #c2202b;
    box-shadow: none;
}
.btn-primary.login {
    border: none;
    width: 62%;
    height: 2.5vw;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Login_Button.png);
    background-size: 100% 100%;
}
.btn-primary.proceed {
    border: none;
    width: 62%;
    height: 4vw;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Proceed_Button.png);
    background-size: 100% 100%;
}
/* .btn-primary.login:hover {
    cursor: not-allowed;
} */
#forgotForm {
    background-color: #ffffff;
    border-radius: 15px;
    width: 30%;
}
.btn-primary.submit {
    background-color: #c2202b;
    border-color: #c2202b;
    width: 45%;
}
.btn-light.login {
    background-color: transparent;
    border: none;
    padding: 0;
    color: lightblue !important;
    text-decoration: underline !important;
    font-size: .79vw;
}
.btn-light.login:hover {
    cursor: pointer;
}
.btn-light.forgotP {
    cursor: pointer;
}
/* .btn-light.forgotP:hover {
    cursor: not-allowed;
} */
.btn-danger.register {
    border: none;
    width: 62%;
    height: 2.5vw;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Registration_Button.png);
    background-size: 100% 100%;
    margin-top: 3%;
}
.btn-danger.register:hover {
    cursor: pointer;
}
.btn-light.forgotP {
    background-color: transparent;
    border-color: transparent;
    color: #000000 !important;
    margin-top: 6%;
}
.label1 {
    color: #c2202b;
    display: flex;
}
.label2 {
    display: flex;
    color: transparent;
}
#firstname, #lastname, #company, #email, #password, #contact, #unique_code {
    text-align: left;
}
#exampleInputEmail1 {
    margin-top: 15%;
}
.logout {
    position: absolute;
    top: 4%;
    right: 4.5%;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/Logout_Button_OFF.png);
    background-size: 100% 100%;
    width: 7%;
    height: 2vw;
}
.logout:hover {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/Logout_Button_ON.png);
}
iframe {
    width: 100%;
    height: 40vw;
    border: none;
}
.freebirdFormviewerViewFooterEmbeddedBackground, .freebirdFormviewerViewNavigationPasswordWarning {
    display: none !important;
}
#games {
    position: absolute;
    top: 67%;
    left: 81%;
    width: 15%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_GAMES.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#raffleWinners {
    position: absolute;
    top: 78%;
    left: 81%;
    width: 15%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_RAFFLE2.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#si {
    position: absolute;
    top: 64%;
    left: 33%;
    width: 15%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_INITIATIVES.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#videos {
    position: absolute;
    top: 44%;
    left: 26.5%;
    width: 19%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_Learning_Solution.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#videos1 {
    position: absolute;
    top: 28%;
    left: 50%;
    width: 19%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_AIT.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#program {
    position: absolute;
    top: 72%;
    left: 57%;
    width: 15%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_AboutRex.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#events {
    position: absolute;
    top: 52.5%;
    left: 70%;
    width: 15%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Badge_CEAPEVENTS.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#plenary {
    position: absolute;
    top: 84%;
    left: 4%;
    width: 18%;
    height: 4vw;
    background-color: transparent;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/Button_ToPlenary.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
}
#feedback {
    position: absolute;
    top: 11%;
    right: 4.5%;
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/FEEDBACK.png);
    background-size: 100% 100%;
    width: 7%;
    height: 2vw;
    border: none;
}
.modal-backdrop {
    position: unset;
}
.modal-footer {
    border: none;
}
.modal-dialog {
    max-width: 90%;
}
.modal-content {
    background-color: transparent;
    border: none;
}
#fbButton, #ytButton, #proceedButton, .btn.btn-primary.proceed {
    position: absolute;
    width: 30%;
}
#fbButton {
    top: 45%;
    left: 35%;
}
#ytButton {
    top: 58%;
    left: 35%;
}
#proceedButton, .btn.btn-primary.proceed {
    top: 65%;
    left: 40%;
    width: 20%;
}

.modal-backdrop.fade.show {
    display: none;
}
#closePlenary {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/CloseButton.png);
    width: 5vw;
    height: 5vw;
    background-size: 100% 100%;
    position: absolute;
    top: 13%;
    right: 22%;
    background-color: transparent;
    border: none;
}
#ceapLogo, #ceapCong {
    position: absolute;
    width: 40%;
}
#ceapLogo {
    top: 40%;
    left: 10%;
}
#ceapCong {
    top: 35%;
    left: 55%;
}
#bedGame, #lhcGame {
    position: absolute;
    width: 18%;
}
#bedGame {
    top: 34%;
    left: 30%;
}
#lhcGame {
    top: 34%;
    left: 54%;
}
#plenaryCon, #obCon, #ecCon, #bedCon, #shsCon, #terCon, #legCon, #pubCon, #aboutCon, #aitCon, #featCon, #ceapCon, #playCon, #winCon {
    padding: 5%;
    width: 80%;
    margin-left: 10%;
}
#ecButton, #bedButton, #shsButton, #terButton, #legButton, #pubButton {
    position: absolute;
    width: 12%;
}
#ecButton {
    top: 33%;
    left: 25%;
}
#bedButton {
    top: 33%;
    left: 44%;
}
#shsButton {
    top: 33%;
    left: 63%;
}
#terButton {
    top: 56%;
    left: 25%;
}
#legButton {
    top: 56%;
    left: 44%;
}
#pubButton {
    top: 56%;
    left: 63%;
}

.feat-buttons #pwButton, .feat-buttons #hgButton, .feat-buttons #mcjButton, .feat-buttons #schButton {
    /* position: absolute; */
    width: 35%;
}
#pwButton {
    left: 29%;
    top: 35%;
}
#hgButton {
    top: 35%;
    left: 53%;
}
#mcjButton {
    left: 29%;
    top: 59%;
}
#schButton {
    top: 59%;
    left: 53%;
}

#gamesModal .modal-dialog .modal-content .modal-body p {
    position: absolute;
    top: 40rem;
    left:25rem
}
.modal-dialog.ece {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/ECE-TITLE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.basicEd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/BASIC-TITLE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.basicProd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/bednew/BED/BED-PRODUCTS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.eceProd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/ECD/ECD-PRODUCTS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.eceVid {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/ECD/ECD-VIDEOS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.bedVid {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/bednew/BED/BED-VIDEOS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.BEweb {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/bednew/BED/BED-WEBINAR.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.eStore {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/bednew/BED/BED-ESTORE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.Shsweb {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/shsconvertion/SHS-WEBINARS.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.shsVid {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/SHS/SHS-VIDEOS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.eStoreShs {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/SHS/SHS-ESTORE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.shs {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/SHS/SHS-TITLE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.shsProd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/SHS/SHS-PRODUCTS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.Terweb {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/TERTIARY/TERTIARY-WEBINARS.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.terVid {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/TERTIARY/TERTIARY-VIDEOS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.ter {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/TERTIARY/TERTIARY-TITLE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.terProd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/TERTIARY/TERTIARY-PRODUCTS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.Legweb {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/LEGAL/LEGAL-WEBINARS.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.terProd {
    height: 35vw;
}
.modal-dialog.legVid {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/LEGAL/LEGAL-VIDEOS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.eStoreLeg {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/LEGAL/LEGAL-ESTORE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.leg {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/LEGAL/LEGAL-TITLE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.legProd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/LEGAL/LEGAL-PRODUCTS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.Pubweb {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/PUBLIC/PUBLIC-WEBINARS.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.pubVid {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/PUBLIC/PUBLIC-VIDEOS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.eStorePub {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/PUBLIC/PUBLIC-ESTORE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.pub {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/PUBLIC/PUBLIC-TITLE.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
.modal-dialog.pubProd {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/PUBLIC/PUBLIC-PRODUCTS.png) !important;
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}

/* toto - new css for all learning */
#div1 .learningModal .modal-dialog {
    background-size: 100% 100%;
    height: auto;
    width: 56%;
    margin-top: 5%;
}
#div1 .learningModal .modal-dialog .modal-content .modal-body #closeAIT {
    top: 0;
    right: 0;
}
#div1 .learningModal .modal-dialog .modal-content .modal-body .contents {
    display: flex
}
#div1 .learningModal .modal-dialog .modal-content .modal-body .modalTitle, 
#div1 .learningModal .modal-dialog .modal-content .modal-body .modalTitle1 {
    /* position: absolute; */
    /* top: 16%;
    left: 20%; */
    color: #ffffff;
    font-size: 2vw;
    margin-left: 2rem;
}
#div1 .learningModal .modal-dialog .modal-content .modal-body .modalTitle1 {
    font-size: 1.2rem;
    font-family: centerReg;
}
#div1 .learningModal .modal-dialog .modal-content .modal-body .modalTitle {
    margin-top: 2rem;
    margin-bottom: -12px;
    font-weight: bolder;
}
#div1 .learningModal .modal-dialog .modal-content .modal-body .contents .modalContents {
    padding: 2rem 2rem 0 2rem;
    margin-top: 10rem;
    margin-left: -29rem;
}
#div1 .learningModal .modal-dialog .modal-content .modal-body .contents .modalContents p {
    font-size: 0.85rem;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents {
    margin-top: 6rem;
}

/*CESAR ADJUSTMENTS*/
#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents {
    overflow-y: scroll;
    height: 400px;
    width: 100%;
    padding: 1rem 1em 0em 0em;
    /*margin-top: 10%;
    margin-bottom: 10%;*/
    margin: 18% 0px 10% 0px;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .container .row {
    width: 100%;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .container .row .col-sm-6 {
    padding: 0px;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .container .row .col-sm-6 p {
    line-height: 1;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .container .row .col-sm-6 ul {
    margin: -6% 0px 0px -9%;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .container .row .col-sm-6 ul li {
    font-size: 12px;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .container .row .read_play_learn_section {
    padding: 7% 0px 0px 6%;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents hr {
    border-top: 3px solid rgba(0,0,0,.1);
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .row {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .row .col-sm-10 {
    padding: 0px
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .ec_education_container {
    width: 100%;
    max-width: 100%;
    padding: 0px;
    margin: 0px 0px 2% 0px;
}

#div1 .learningModal .modal-dialog .modal-content .modal-body #scrollContents .scrollable-contents .ec_education_container .lang_image_container {
    width: 100%;
}
/***************************/
#div1 .modalTitle1 {
    /* position: absolute; */
    top: 22%;
    left: 20%;
    color: #ffffff;
    font-size: 1.5vw;
    
}
/* end - toto - new css for learning */

#videos1Modal .modal-dialog {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/AKO-IKAW-TAYO.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
#videos1Modal .modal-dialog .modal-content .modal-body #closeAIT {
    top: 0;
    right: 0;
}
#videos1Modal .modal-dialog .modal-content .modal-body .contents {
    display: flex
}
#videos1Modal .modal-dialog .modal-content .modal-body .modalTitle, #videos1Modal .modal-dialog .modal-content .modal-body .modalTitle1 {
    /* position: absolute; */
    /* top: 16%;
    left: 20%; */
    color: #ffffff;
    font-size: 2vw;
    margin-left: 2rem;
}
#videos1Modal .modal-dialog .modal-content .modal-body .modalTitle1 {
    font-size: 1.5rem;
}
#videos1Modal .modal-dialog .modal-content .modal-body .modalTitle {
    margin-top: 2rem;
    margin-bottom: -12px;
}
#videos1Modal .modal-dialog .modal-content .modal-body .contents .modalContents {
    padding: 2rem 2rem 0 2rem;
    margin-top: 5rem;
}
#videos1Modal .modal-dialog .modal-content .modal-body .contents .modalContents p {
    font-size: 0.85rem;
}

#videos1Modal .modal-dialog .modal-content .modal-body .contents .scrollContents {
    margin-top: 6rem;
}
#videos1Modal .modal-dialog .modal-content .modal-body .contents .scrollContents .scrollable-contents {
    overflow-y: scroll;
    height: 450px;
    width: 90%;
    padding-right: 1rem;
    padding-left: 1rem;
}

.modalTitle1 {
    /* position: absolute; */
    top: 22%;
    left: 20%;
    color: #ffffff;
    font-size: 1.5vw;
    
}
#programModal .modal-dialog {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/About_REX_Window.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
#programModal .modal-dialog .modal-content .modal-body #closeAbout {
    top: 0;
    right: 0;
}
#programModal .modal-dialog .modal-content .modal-body .contents {
    display: flex;
}
#programModal .modal-dialog .modal-content .modal-body .modalTitle {
    margin-top: 4rem;
    margin-left: 3rem;
    color: white;
    font-size: 2rem;
}
#programModal .modal-dialog .modal-content .modal-body .contents #scrollContents {
    margin-top: 6rem;
}
#programModal .modal-dialog .modal-content .modal-body .contents #scrollContents .scrollable-contents {
    overflow-y: scroll;
    height: 450px;
    width: 90%;
    padding-right: 1rem;
}

#scrollContents {
    width: 80%;
    margin: auto;
    padding-top: 10%;
}

#programModal .modal-dialog .modal-content .modal-body .modalTitle {
    margin-top: 4rem;
    margin-left: 3rem;
    color: white;
    font-size: 2rem;
}
#eventsModal .modal-dialog {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/CEAP_Window.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
#siModal .modal-dialog {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/FEATURED-PRODUCTS.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
#siModal  .modal-dialog .modal-content .modal-body .contents .feat-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#raffleWinnersModal .modal-dialog {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/RAFFLE-WINNERS.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}

#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents #closeWin {
    top: 0;
    right: 0;
    z-index: 1050;
}

#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .mechanics img {
    width: 100%;
    margin-top: 12rem;
    margin-left: 2rem;
}

#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .mechanics p {
    color: white;
    font-size: 2rem;
    position: absolute;
    top: 3rem;
    left: 4rem;
}

#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents {
    display: flex;
}

#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .intro {
    position: absolute;
    top: 6rem;
    text-align: center;
    width: 90%;
}

#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .rafWin, #raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .gamWin {
    font-size: 1.2vw;
    position: absolute;
    top: 36%;
    left: 48%;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .rafWin {
    top: 36%;
    left: 1%;
    width: 80%;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .gamWin {
    top: 36%;
    left: 46%;
    width: 50%;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .rafWin .daily-winners, #raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .gamWin .special-winners {
    padding: 0 1rem;
    position: absolute;
    top: 4.85rem;
    background-color: white;
    border-radius: 0 0 10px 10px;
    left: 1.5rem;
    height: 20vw;
    overflow: auto;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .gamWin .special-winners {
    width: 83%;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .rafWin .daily-winners p, #raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .gamWin .special-winners p {
    font-size: 1rem;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .rafWin img {
    width: 100%;
}
#raffleWinnersModal .modal-dialog .modal-content .modal-body .contents .raffleWinners .gamWin img {
    width: 100%;
}

#BElatestModal-Products .modal-dialog {
    background-image: url(../img/Winners_Window.png);
    background-size: 100% 100%;
    height: auto;
    width: 56%;
    margin-top: 4%;
}
#BElatestModal-Products .modal-dialog .modal-content .modal-body a {
    text-decoration: none;
}
#products-list {
    overflow: scroll;
    overflow-x: hidden;
    height: 434px;
    width: 97%;
    margin-top: 10rem;
}

/*CESAR ADJUSTMENTS*/
#BElatestModal-Products .modal-dialog .modal-content .modal-body .latest-products {
    width: 77.5%;
    margin: 15% 0px 0px 17.3%;
    height: 375px;
}

#BElatestModal-Products .modal-dialog .modal-content .modal-body .latest-products ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#BElatestModal-Products .modal-dialog .modal-content .modal-body .latest-products ul li {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

#BElatestModal-Products .modal-dialog .modal-content .modal-body .latest-products ul li img {
    display: inline-table;
    width: 50%;
    margin: 0px;
}

#BElatestModal-Products .modal-dialog .modal-content .modal-body .latest-products ul li .product-info {
    display: inline-table;
    float: right;
    width: 50%;
    margin: 0px;
    -ms-transform: translateY(50%);
    transform: translateY(50%);
}



/******************************/
#BElatestModal-Products .modal-dialog .modal-content .modal-body p.modalTitle {
    position: absolute;
    color: white;
    font-size: 2rem;
    top: 4rem;
    left: 5rem;
}
#BElatestModal-Products .modal-dialog .modal-content .modal-body p {
    /* position: absolute; */
    top: 9rem;
    left: 20rem;
    font-size: 2rem;
    /* color: white; */
   color: #000000;
   font-size: 0.85rem;
   width: 80%;
}
#BElatestModal-Products .modal-dialog .modal-content .modal-body #closeBed {
    top: 0;
    right: 0;
}

#BElatestModal-Products .modal-dialog .modal-content .modal-body .contents .latest-products ul li {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    top: 14rem;
}

#BElatestModal-Products .modal-dialog .modal-content .modal-body .contents .latest-products ul li img {
    width: 380px;
}

/*
SHS BE
*/

#BESHSlatestModal-Products .modal-dialog {
    background-image: url(../img/Winners_Window.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
#BESHSlatestModal-Products .modal-dialog .modal-content .modal-body a {
    text-decoration: none;
}
/* #products-list {
    overflow: scroll;
    overflow-x: hidden;
    height: 540px;
    width: 97%;
    margin-top: 10rem;
} */
#BESHSlatestModal-Products .modal-dialog .modal-content .modal-body p.modalTitle {
    position: absolute;
    color: white;
    font-size: 2rem;
    top: 4rem;
    left: 5rem;
}
#BESHSlatestModal-Products .modal-dialog .modal-content .modal-body p {
    /* position: absolute; */
    top: 9rem;
    left: 20rem;
    font-size: 2rem;
    /* color: white; */
   color: #000000;
   font-size: 0.85rem;
   width: 80%;
}
#BESHSlatestModal-Products .modal-dialog .modal-content .modal-body #closeBed {
    top: 0;
    right: 0;
}

#BESHSlatestModal-Products .modal-dialog .modal-content .modal-body .contents .latest-products ul li {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    top: 14rem;
}

#BESHSlatestModal-Products .modal-dialog .modal-content .modal-body .contents .latest-products ul li img {
    width: 380px;
}

/*CESAR ADJUSTMENTS*/
#ecModal-Videos .modal-dialog .modal-content .modal-body .ec_video_container {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

#ecModal-Videos .modal-dialog .modal-content .modal-body .ec_video_container .col-lg-8 {
    width: 100%;
    margin: 20% 0px 5% 0px;
    padding: 0px;
}

#ecModal-Videos .modal-dialog .modal-content .modal-body .ec_video_container .col-lg-8 .YTVideos {
    height: 17vw;
    width: 100%;
}
/******************************/


/* #proceedFeedbackModal .modal-dialog {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img-veap/Feedback_Window.png);
    background-size: 100% 100%;
    height: 80%;
    width: 60%;
}
#proceedFeedbackModal  .modal-dialog .modal-content .modal-body .contents .feat-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
} */

#closeProceedFeedback {
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/CloseButton.png);
    width: 5vw;
    height: 5vw;
    background-size: 100% 100%;
    position: absolute;
    top: 12%;
    right: 21%;
    background-color: transparent;
    border: none;
}

#eventsModal .modal-dialog .modal-content .modal-body .contents {
    display: flex;
}
#eventsModal .modal-dialog .modal-content .modal-body #closeCeap, #siModal .modal-dialog .modal-content .modal-body #closeFeat {
    top: 0;
    right: 0;
}
#eventsModal .modal-dialog .modal-content .modal-body .modalTitle, #siModal .modal-dialog .modal-content .modal-body .modalTitle {
    margin-top: 2rem;
    margin-left: 3rem;
    color: white;
    font-size: 2rem;
}
#eventsModal .modal-dialog .modal-content .modal-body .contents .scrollContents {
    margin-top: 6rem;
}
#eventsModal .modal-dialog .modal-content .modal-body .contents .scrollContents .scrollable-contents {
    overflow-y: scroll;
    height: 450px;
    width: 90%;
    padding-right: 1rem;
}
#eventsModal .modal-dialog .modal-content .modal-body .modalTitle, 
#eventsModal .modal-dialog .modal-content .modal-body .modalTitle1 {
    /* position: absolute; */
    /* top: 16%;
    left: 20%; */
    color: #ffffff;
    font-size: 2vw;
    margin-left: 2rem;
}
#eventsModal .modal-dialog .modal-content .modal-body .modalTitle1 {
    font-size: 1.5rem;
}
#eventsModal .modal-dialog .modal-content .modal-body .modalTitle {
    margin-top: 5rem;
    margin-top: 3rem;
    margin-bottom: -12px;
}

#closeBrands, #closeEc, #closeBed, #closeShs, #closeTer, #closeLeg, #closePub, #closeAbout, #closeAIT, #closeFeat, #closeCeap, #closePlay, #closeWin{
    background-image: url(https://deeaeccs47tex.cloudfront.net/img/CloseButton.png);
    width: 5vw;
    height: 5vw;
    background-size: 100% 100%;
    position: absolute;
    top: 9%;
    right: 15%;
    background-color: transparent;
    border: none;
}
#aboutPic {
    position: absolute;
    width: 90%;
    left: 7%;
    top: 40%;
}
#latestProd, #watchVideos, #visitEstore, #watchWeb, #latestProd1, #watchVideos1, #visitEstore1, #watchWeb1, #latestProd2, #watchVideos2, #visitEstore2, #watchWeb2, #latestProd3, #watchVideos3, #visitEstore3 {
    position: absolute;
    width: 20%;
    left: 20%;
}
#latestProd {
    top: 37%;
}
#watchVideos {
    top: 50%;
}
#visitEstore {
    top: 63%;
}
#latestProd1 {
    top: 36%;
}
#watchWeb {
    top: 48%;
}
#watchVideos1 {
    top: 60%;
}
#visitEstore1 {
    top: 72%;
}
#latestProd2 {
    top: 34%;
}
#watchWeb1 {
    top: 46%;
}
#watchVideos2 {
    top: 58%;
}
#visitEstore2 {
    top: 70%;
}
#latestProd3 {
    top: 33%;
}
#watchWeb2 {
    top: 45%;
}
#watchVideos3 {
    top: 57%;
}
#visitEstore3 {
    top: 69%;
}
#videoMOA, #videoMOA1, #videoMOA2, #videoMOA3 {
    width: 90%;
    margin-left: 5%;
    background-color: transparent;
    border: none;
    outline: none;
}
#deadline {
    position: absolute;
    top: 108%;
    left: 84.7%;
    font-size: 1.7vw;
    color: #FFFFFF;
    text-shadow: 1px 1px #000000;
}
.img-fluid.booth {
    cursor: default;
    height: 100%;
    width: 100%;
}
#prodInfoMD {
    position: absolute;
    left: 19%;
    top: 43%;
    width: 18.5%;
    height: 12.8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#prodInfoPhar {
    position: absolute;
    left: 40.8%;
    top: 43%;
    width: 18.5%;
    height: 12.8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#prodInfoMB {
    position: absolute;
    left: 62.6%;
    top: 43%;
    width: 18.5%;
    height: 12.8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#moaVid {
    position: absolute;
    left: 58%;
    top: 42%;
    width: 11%;
    height: 8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#graminfVid {
    position: absolute;
    left: 19.5%;
    top: 42%;
    width: 11%;
    height: 8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#costeffVid {
    position: absolute;
    left: 32.5%;
    top: 42%;
    width: 11%;
    height: 8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#covpathVid {
    position: absolute;
    left: 19.5%;
    top: 59.5%;
    width: 11%;
    height: 8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
#broadcovVid {
    position: absolute;
    left: 32.5%;
    top: 59.5%;
    width: 11%;
    height: 8vw;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
    padding: 0;
}
.img-fluid.productInfo {
    margin: auto;
}
.img-fluid.productInfo.downloadables {
    margin: auto;
    margin-top: 4.5%;
}
#detailer1 {
    width: 50%;
    height: 30vw;
    margin-top: 2%;
    margin-left: 25%;
    background-color: transparent;
    background-image: url(https://veap-live.s3-ap-southeast-1.amazonaws.com/img/DETAILER-1-THUMBNAIL.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
}
#detailer3 {
    width: 50%;
    height: 30vw;
    margin-top: 2%;
    margin-left: 25%;
    background-color: transparent;
    background-image: url(https://veap-live.s3-ap-southeast-1.amazonaws.com/img/DETAILER-3-THUMBNAIL.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
}
#detailer4 {
    width: 50%;
    height: 30vw;
    margin-top: 2%;
    margin-left: 25%;
    background-color: transparent;
    background-image: url(https://veap-live.s3-ap-southeast-1.amazonaws.com/img/DETAILER-4-THUMBNAIL.png);
    background-size: 100% 100%;
    border: none;
    outline: none;
    box-shadow: none;
    float: left;
}
#videoP1, #videoP2, #videoP3, #videoP4, #videoP5 {
    width: 90%;
    margin-left: 5%;
}
.modal-dialog.plenary {
    max-width: 100%;
    margin: 0;
}
.modal-body.plenary {
    padding: 0;
}
#videoPlenary {
    position: absolute;
    left: 13%;
    top: 13%;
    width: 73.4%;
    height: 41.3vw;
}
#plenaryModal {
    padding: 0 !important;
}
.div1 {
    filter: blur(8px);
    pointer-events: none;
    height: 100%;
}
.img-fluid.avatar {
    position: absolute;
    z-index: 9;
    width: 40%;
    bottom: 0;
    left: 30%;
}
.img-fluid.avatar:hover {
    cursor: pointer;
}
#ch1 {
    width: 7%;
    position: absolute;
    top: 58%;
    left: 54%;
}
#ch2 {
    width: 7%;
    position: absolute;
    top: 74%;
    left: 57%;
}
#ch3 {
    width: 7%;
    position: absolute;
    top: 73%;
    left: 54%;
}
.disclaimerP {
    font-size: .6vw;
}
#wholeDiv {
    display: block;
    width: 100vw;
    height: 56.25vw;
    max-height: 100vh;
    max-width: 177.78vh;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.rexie-container {
    position: absolute;
    bottom: 0;
    width: 40%;
    height: 50%;
    background: red;
    z-index: 2;
    left: calc(50% - 20%);
}
.btn.btn-primary.brands {
    background-color: transparent;
    border: none;
}
.modal-dialog {
    width: 80%;
    height: 80%;
}
#warning {
    display: none;
    width: 90%;
    margin: 5%;
}
#products-list {
    margin: auto;
    margin-top: 11%;
    margin-bottom: 8%;
    width: 80%;
}
#plenaryCon {
    width: 70%;
    margin-left: 15%;
}
.col-sm-6 {
    padding: 2vw;
}
/* @media screen and (max-width: 1680px) {
    #firstnameAvatar {
        top: 39.9%;
    }
    #games {
        top: 69%;
    }
    #raffleWinners {
        top: 80%;
    }
    #si {
        top: 67%;
    }
    #videos {
        top: 44%;
    }
    #videos1 {
        top: 28%;
    }
    #program {
        top: 75%;
    }
    #events {
        top: 53%;
    }
    #plenary {
        top: 91%;
    }
} */
/* @media screen and (max-width: 1440px) {
    #firstnameAvatar {
        top: 44.6%;
        font-size: 1.1vw;
    }
    #gamesModal .modal-dialog .modal-content .modal-body p {
        position: absolute;
        top: 29rem;
        left: 19rem;
        width: 50%;
        text-align: center;
    }
    .img-fluid.avatar {
        bottom: 1%;
    }
    #games {
        top: 65%;
    }
    #raffleWinners {
        top: 74%;
    }
    #si {
        top: 63%;
    }
    #videos {
        top: 44%;
    }
    #videos1 {
        top: 30%;
    }
    #program {
        top: 70%;
    }
    #events {
        top: 52%;
    }
    #plenary {
        top: 82%;
    }
}
@media screen and (max-width: 1280px) {
    #gamesModal .modal-dialog .modal-content .modal-body p {
        position: absolute;
        top: 26rem;
        left: 16rem;
        width: 50%;
        text-align: center;
    }
}
@media screen and (max-width: 1200px) {
    #firstnameAvatar {
        top: 45%;
        font-size: 1.2vw;
    }
    #gamesModal .modal-dialog .modal-content .modal-body p {
        position: absolute;
        top: 26rem;
        left: 16rem;
        width: 50%;
        text-align: center;
    }
    #divForm {
        margin-top: 8%;
        background-size: 100% 100%;
    }
    #regForm {
        margin-top: 2%;
    }
    #games {
        top: 51%;
    }
    #raffleWinners {
        top: 58%;
    }
    #si {
        top: 48%;
    }
    #videos {
        top: 32%;
    }
    #videos1 {
        top: 22%;
    }
    #program {
        top: 55%;
    }
    #events {
        top: 40%;
    }
    #plenary {
        top: 67%;
    }
    #deadline {
        top: 93.9%;
    }
    .img-fluid.regLogo {
        margin-top: 66%;
    }
    #forgotLogo {
        margin-top: 32%;
    }
    .regForm {
        margin-top: 5%;
    }
}
@media screen and (max-width: 1024px) {
    #rexLogoReg {
        top: 20%;
    }
    #veapLogo {
        top: 58%;
    }
    #instLabel {
        margin-bottom: 0;
    }
    #divForm {
        margin-top: 5%;
    }
    .label1, .label2 {
        font-size: .9vw !important;
    }
    input {
        padding-top: .5vw !important;
        padding-bottom: .5vw !important;
        font-size: .9vw !important;
    }
    #games {
        top: 44%;
    }
    #raffleWinners {
        top: 50%;
    }
    #si {
        top: 41%;
    }
    #videos {
        top: 28%;
    }
    #videos1 {
        top: 18%;
    }
    #program {
        top: 47%;
    }
    #events {
        top: 34%;
    }
    #plenary {
        top: 57%;
    }
    #deadline {
        top: 77.7%;
    }
    .btn-primary.submit {
        width: unset;
    }
    .regForm {
        margin-top: 2%;
    }
    .btn-light.login, .a1 {
        font-size: 1.2vw;
    }
}
@media screen and (max-width: 992px) {
    #games {
        top: 43%;
    }
    #raffleWinners {
        top: 49%;
    }
    #si {
        top: 40%;
    }
    #videos {
        top: 27%;
    }
    #videos1 {
        top: 17%;
    }
    #program {
        top: 46%;
    }
    #events {
        top: 33%;
    }
    #plenary {
        top: 56%;
    }
    #deadline {
        top: 75.5%;
    }
    label {
        font-size: 1.1vw;
    }
    .regForm {
        margin-top: .8%;
    }
}
@media screen and (max-width: 768px) {
    #rexLogoReg {
        top: 15%;
    }
    #veapLogo {
        top: 42%;
    }
    .label1, .label2 {
        margin-bottom: 0;
    }
    #deadline {
        top: 58%;
    }
}*/
@media screen and (max-width: 576px) {
    #warning {
        display: block;
    }
    #wholeDiv {
        display: none;
    }
    #deadline {
        top: 44%;
        font-size: 1.5vw;
    }
    .label2 {
        display: none;
    }
}
@media screen and (max-width: 414px) {
    
    #deadline {
        top: 26.5%;
    }
}
@media screen and (max-height: 414px) {
    #rexLogoReg {
        top: 37%;
    }
    #veapLogo {
        top: 95%;
    }
}
@media screen and (max-width: 375px) {
    
    #deadline {
        top: 22%;
    }
}
@media screen and (max-width: 360px) {
    
    #deadline {
        top: 25.5%;
    }
} 

.feat-buttons div:nth-child(1) {
    padding: 0px 10rem;
    }
    .feat-buttons #pwButton, .feat-buttons #hgButton, .feat-buttons #mcjButton, .feat-buttons #schButton {
    width: 49%;
    }

    .box {
        width: 100%;
        margin: 0 auto;
        background: rgba(255,255,255,0.2);
        padding: 11% 0%;
        border-radius: 20px/50px;
        background-clip: padding-box;
        text-align: center;
        white-space: nowrap;
        position: absolute;
        bottom: 0;
    }
      
    .box .button {
        width: 40%;
        margin: 0 auto;
        background: var(--red);
        padding: 5px;
        border: 2px solid #ff1f1f;
        border-radius: 20px/50px;
        background-clip: padding-box;
        text-align: center;
        color: white;
    }
      .box .button:hover {
        background:#ff1f1f;
      }
      #popup1, #popup2, #popup3, #popup4, #popup5, #popup6, #popup7 {
        z-index: 1;
      }
      #popup1.overlay, #popup2.overlay, #popup3.overlay, #popup4.overlay, #popup5.overlay, #popup6.overlay, #popup7.overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 500ms;
        visibility: hidden;
        opacity: 0;
      }
      #popup1.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      #popup2.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      #popup3.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      #popup4.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      #popup5.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      #popup6.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      #popup7.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      
      #popup1 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
    }
      #popup2 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
      }
      #popup3 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
      }
      #popup4 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
      }
      #popup5 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
      }
      #popup6 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
      }
      #popup7 .popup {
        margin: 70px auto;
        padding: 20px;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
        padding-top: 15%;
      }
      
      #popup1 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup2 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup3 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup4 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup5 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup6 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup7 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup1 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #popup2 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #popup3 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #popup4 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #popup5 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #popup6 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #popup7 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      .popup .close:hover {
        color: #06D85F;
      }
      .popup .content {
        max-height: 30%;
        overflow: auto;
      }
      
      @media screen and (max-width: 700px){
        .box{
          width: 70%;
        }
        .popup{
          width: 70%;
        }
      }

      #BElatestModal-Products .modal-dialog {
        background-image: url(../img/Winners_Window.png);
        background-size: 100% 100%;
        height: 70%;
        width: 60%;
    }
    #BElatestModal-Products .modal-dialog .modal-content .modal-body a {
        text-decoration: none;
    }
    #products-list {
        overflow: scroll;
        overflow-x: hidden;
        height: 434px;
        width: 97%;
        margin-top: 10rem;
    }
    #BElatestModal-Products .modal-dialog .modal-content .modal-body p.modalTitle {
        position: absolute;
        color: white;
        font-size: 2rem;
        top: 4rem;
        left: 5rem;
    }
    #BElatestModal-Products .modal-dialog .modal-content .modal-body p {
        /* position: absolute; */
        top: 9rem;
        left: 20rem;
        font-size: 2rem;
        /* color: white; */
       color: #000000;
       font-size: 0.85rem;
       width: 80%;
    }
    #BElatestModal-Products .modal-dialog .modal-content .modal-body #closeBed {
        top: 0;
        right: 0;
    }
    
    #BElatestModal-Products .modal-dialog .modal-content .modal-body .contents .latest-products ul li {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        top: 14rem;
    }
    
    #BElatestModal-Products .modal-dialog .modal-content .modal-body .contents .latest-products ul li img {
        width: 380px;
    }
    
    #BEModal-Videos .modal-dialog {
        background-image: url(../img/Winners_Window.png);
        background-size: 100% 100%;
        height: 80%;
        width: 60%;
    }
    /* .webinar-info {
        margin-left: 30px;
    } */
    
    #BEwebinarWatchModal .modal-dialog .modal-content .modal-body #webinar-scroll {
        overflow: scroll;
        overflow-x: hidden;
        height: 540px;
        width: 97%;
    }

    #BEModal-EStore .modal-dialog .modal-content .modal-body #scroll-store .store-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 115px;
    }
    
    #BEModal-EStore .modal-dialog .modal-content .modal-body #scroll-store {
        overflow: scroll;
        overflow-x: hidden;
        height: 540px;
        width: 97%;
    }
    #BESHSModal-EStore .modal-dialog .modal-content .modal-body #scroll-store .store-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 45%;
    }
    
    #BESHSModal-EStore .modal-dialog .modal-content .modal-body #scroll-store {
        overflow: scroll;
        overflow-x: hidden;
        height: 540px;
        width: 97%;
    }

    /* CESAR ADJUSTMENTS */
    #BEwebinarWatchModal .modal-dialog .modal-content .modal-body .be_webinar_container {
        width: 85% !important; 
        margin: 20% auto 4% auto !important;
        height: 400px !important;
    }

    #BEwebinarWatchModal .modal-dialog .modal-content .modal-body .be_webinar_container .col-lg-8 {
        margin-top: 3%;
        padding: 0px;
        display: flex;
        align-items: center;
        background-color: transparent;
        width: 100%;
        max-width: 100%;
        /*flex: 0 0 100%;*/
        flex: auto;
    }

    #BEwebinarWatchModal .modal-dialog .modal-content .modal-body .be_webinar_container .col-lg-8 iframe {
        height: 10vw;
        width: 40%;
    }

    #BEModal-EStore .modal-dialog .modal-content .modal-body #scroll-store {
        margin: 21% 0px 7% 7%;
        padding: 0px;
        width: 87%;
        height: 360px;
    }
    /******************************************************************************/
    /* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* RONALD */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
.feat-buttons div:nth-child(1) {
    padding: 0px 10rem;
}
.feat-buttons #pwButton, .feat-buttons #hgButton, .feat-buttons #mcjButton, .feat-buttons #schButton {
    width: 49%;
}



    .box {
        width: 100%;
        margin: 0 auto;
        /* background: rgba(255,255,255,0.2); */
        padding: 35px;
        /* border: 2px solid #fff; */
        border-radius: 20px/50px;
        background-clip: padding-box;
        text-align: center;
        white-space: nowrap;
      }
      
      .box .button {
        width: 100%;
        margin: 0 auto;
        background: var(--red);
        padding: 5px;
        border: 2px solid #ff1f1f;
        border-radius: 20px/50px;
        background-clip: padding-box;
        text-align: center;
        color: white;
        font-size: 1vw;
    }
      .box .button:hover {
        background:#ff1f1f;
      }
      #popup1, #popup2, #popup3, #popup4, #popup5, #popup6, #popup7 {
        z-index: 1;
      }
      #popup1.overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 500ms;
        visibility: hidden;
        opacity: 0;
      }
      #popup1.overlay:target {
        visibility: visible;
        opacity: 1;
      }
      
      #popup1 .popup {
        margin: 70px auto;
        padding: 20px;
        background: #fff;
        border-radius: 5px;
        width: 30%;
        position: relative;
        transition: all 5s ease-in-out;
      }
      
      #popup1 .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #popup1 .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      .popup .close:hover {
        color: #06D85F;
      }
      .popup .content {
        max-height: 30%;
        overflow: auto;
      }
      
      @media screen and (max-width: 700px){
        .box{
          width: 70%;
        }
        .popup{
          width: 70%;
        }
      }
      /* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* RONALD */
/* ============================== */
/* ============================== */
/* ============================== */
/* ============================== */
/* JeD Custom CSS */

.custom-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    /* background: #707070; */
    z-index: 9;
}
.custom-modal {
    width: 60%;
    height: 70%;
    position: absolute;
    top: 10%;
    overflow: hidden;
    left: calc(50% - 30%);
    background-size: 100% 100%;
}

img.game-icons {
    width: 20%;
    margin: 0px 15px;
    height: 20%;
    object-fit: contain;            
}
.game-icon-container {
    display: flex;
    justify-content: center;
    padding-top: 20%;
}

.custom-modal-content p {
    padding: 2% 50px;
    text-align: center;
}
img.custom-modal-close,img.custom-modal-close-game {
    position: absolute;
    right: 0;
    top: 0;
    width: 7%;
}

.custom-modal-lg {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    overflow: hidden;
    left: 5%;
    background-size: 100% 100%;
}
iframe#playArea1 {
    width: 90%;
    height: 80%;
    margin: 5%;
    background: #fff;
}

img#closeGame {
    top: 1%;
    right: 1%;
}
#raffleWinnerModal .custom-modal-content img {
    width: 100%;
}




/* //about us  */
.box-align {
    width: 40%;
    margin: 5%;
}
.cost-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 13%;
    height: 360px;
}

.cost-content p {
    padding: 0;
}

.about-right-align {
    position: absolute;
    width: 44%;
    height: 71%;
    right: 5%;
    font-size: 1.3vw;
    overflow-y: scroll;
}

.about-left-align {
    position: absolute;
    height: 50%;
    width: 42%;
    top: 36%;
    left: 7%;
}
.about-left-align img{
    width: 100%;
}


.siModalContents {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.siModalContents a {
    width: 36%;
}


.ako-right-align {
    position: absolute;
    top: 35px;
    right: 34px;
    width: 35%;
    height: 80%;
    font-size: 1.2vw;
    /* background: green; */
    overflow-y: scroll;
}



/* raffle  */

div#raffleModal .custom-modal-content img {
    width: 100%;
}

.raffle-left-align {
    width: 41%;
    position: absolute;
    left: 6%;
    top: 29%;
}

.raffle-right-align {
    position: absolute;
    top: 13%;
    right: 5%;
    width: 47%;
    height: 77%;
}

.raffle-intro {
    font-size: 1.0vw;
    text-align: center;
}

.raffle-intro h1 {
    font-size: 2vw;
}

.raffle-winners-section {
    width: 50%;
    position: absolute;
    left: 0;
    height: 68%;
    overflow-y: scroll;
}

.raffle-winners-section2 {
    position: absolute;
    right: 0;
    width: 50%;
    text-align: left;
    height: 68%;
    overflow-y: scroll;
}

.raffle-winners-section2 p,.raffle-winners-section p {
    padding: 0;
    font-size: 1vw;
    word-break: break-all;
    margin: 0;
    border-bottom: 1px solid #708090;
}



div#k10products-list {
    position: absolute;
    top: 17%;
    width: 80%;
    left: 11%;
    height: 75%;
    overflow-y: scroll;
}



.events-right-left {
    position: absolute;
    left: 0;
    width: 50%;
    top: 35%;
}

.events-right-align {
    position: absolute;
    right: 6%;
    width: 43%;
    top: 14%;
    height: 78%;
    overflow-y: scroll;
    text-align: center;
}

.store-info h5 {
    text-align: center;
    font-size: 1.2vw;
}

.webinar-info p, .webinar-info h5 {
    font-size: 1.2vw;
}

.webinar-info {
    padding-left: 5%;
}