@font-face{
    font-family:Roboto;
    src:url("../fonts/Thin/Roboto-Thin.woff2?v=2.137") format("woff2"),url("../fonts/Thin/Roboto-Thin.woff?v=2.137") format("woff");
    font-weight:100;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/ThinItalic/Roboto-ThinItalic.woff2?v=2.137") format("woff2"),url("../fonts/ThinItalic/Roboto-ThinItalic.woff?v=2.137") format("woff");
    font-weight:100;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Light/Roboto-Light.woff2?v=2.137") format("woff2"),url("../fonts/Light/Roboto-Light.woff?v=2.137") format("woff");
    font-weight:300;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/LightItalic/Roboto-LightItalic.woff2?v=2.137") format("woff2"),url("../fonts/LightItalic/Roboto-LightItalic.woff?v=2.137") format("woff");
    font-weight:300;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"),url("../fonts/Regular/Roboto-Regular.woff?v=2.137") format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"),url("../fonts/Regular/Roboto-Regular.woff?v=2.137") format("woff");
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"),url("../fonts/Italic/Roboto-Italic.woff?v=2.137") format("woff");
    font-weight:400;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"),url("../fonts/Italic/Roboto-Italic.woff?v=2.137") format("woff");
    font-weight:normal;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Medium/Roboto-Medium.woff2?v=2.137") format("woff2"),url("../fonts/Medium/Roboto-Medium.woff?v=2.137") format("woff");
    font-weight:500;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/MediumItalic/Roboto-MediumItalic.woff2?v=2.137") format("woff2"),url("../fonts/MediumItalic/Roboto-MediumItalic.woff?v=2.137") format("woff");
    font-weight:500;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"),url("../fonts/Bold/Roboto-Bold.woff?v=2.137") format("woff");
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"),url("../fonts/Bold/Roboto-Bold.woff?v=2.137") format("woff");
    font-weight:bold;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"),url("../fonts/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff");
    font-weight:700;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"),url("../fonts/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff");
    font-weight:bold;
    font-style:italic
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/Black/Roboto-Black.woff2?v=2.137") format("woff2"),url("../fonts/Black/Roboto-Black.woff?v=2.137") format("woff");
    font-weight:900;
    font-style:normal
}
@font-face{
    font-family:Roboto;
    src:url("../fonts/BlackItalic/Roboto-BlackItalic.woff2?v=2.137") format("woff2"),url("../fonts/BlackItalic/Roboto-BlackItalic.woff?v=2.137") format("woff");
    font-weight:900;
    font-style:italic
}
*{
    margin:0;
    padding:0
}
body{
    background:url(../images/3star88-region-xs.jpg) top center;
    background-size:cover
}
img{
    max-width:100% !important;
    vertical-align:middle;
    margin:0
}
li{
    list-style:none
}
li a{
    transition:.25s
}
li a:hover{
    margin:0 15px
}
header{
    height:60px;
    text-align:center;
    background-color:rgba(0,0,0,0.5);
    border-bottom:0px solid #d6b62f;
    overflow:visible
}
main{
    width:100%
}
figure{
    width:100%;
    height:160px;
    margin:auto;
    position:relative
}
@media (min-width: 1024px){
    body{
        background:url(../images/3star88-region-lg.jpg) top center
    }
    figure{
        width:780px;
        height:160px
    }
    header{
        display:none
    }
}
@media (min-width: 1200px){
    figure{
        width:980px
    }
}
.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0);
    transition:background 0.5s ease-in
}
.region-select{
    width:50%;
    margin-top:20px;
    margin-left:0;
    text-align:center;
    opacity:1;
    transition:opacity .5s ease;
    float:left;
    display:block
}
.container:hover .overlay{
    display:none;
    background:transparent
}
.country{
    width:50%;
    margin-top:18px;
    z-index:1;
    text-align:center;
    float:left;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.ts-flag-image{
    display:block
}
@media (min-width: 1024px){
    .container:hover .overlay{
        display:block;
        background:rgba(0,0,0,0.5)
    }
    .region-select{
        width:570px;
        margin-top:60px;
        margin-left:50px;
        opacity:0
    }
    .country{
        width:166px;
        margin-top:18px
    }
}
@media (min-width: 1400px){
    .container:hover .overlay{
        display:block;
        background:rgba(0,0,0,0.5)
    }
    .region-select{
        width:570px;
        margin-top:60px;
        margin-left:50px;
        opacity:0
    }
    .country{
        width:186px;
        margin-top:18px
    }
}
.region-select a{
    z-index:1;
    display:block;
    float:left
}
.container:hover .region-select{
    opacity:1
}
.region-select a.btn-region{
    height:16px;
    width:120px;
    padding:12px 0;
    margin:4px 15px;
    border:1px solid #FFFFFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    font-size:11pt;
    text-align:center;
    font-family:Roboto;
    text-decoration:none;
    display:inline-block;
    font-weight:500;
    color:#000000;
    background-color:#FFFFFF;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background-image:-webkit-linear-gradient(top, #fff, #ccc);
    background-image:-moz-linear-gradient(top, #fff, #ccc);
    background-image:-ms-linear-gradient(top, #fff, #ccc);
    background-image:-o-linear-gradient(top, #fff, #ccc);
    background-image:linear-gradient(to bottom, #fff, #ccc);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#CCCCCC)
}
@media (min-width: 1024px){
    .region-select a.btn-region{
        padding:12px 0 16px 0
    }
}
.region-select a.btn-region:hover{
    border:1px solid #FFF8BA;
    background-color:#FFF6B8;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#FFF6B8), to(#CFA51A));
    background-image:-webkit-linear-gradient(top, #FFF6B8, #CFA51A);
    background-image:-moz-linear-gradient(top, #FFF6B8, #CFA51A);
    background-image:-ms-linear-gradient(top, #FFF6B8, #CFA51A);
    background-image:-o-linear-gradient(top, #FFF6B8, #CFA51A);
    background-image:linear-gradient(to bottom, #FFF6B8, #CFA51A);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFF6B8, endColorstr=#CFA51A)
}
.version{
    width:80%;
    z-index:1;
    margin:30px auto;
    display:block
}
.btn-desktop{
    width:100%;
    padding:12px 0;
    font-family:Roboto;
    font-size:11pt;
    font-weight:400;
    color:#ffffff;
    text-align:center;
    text-decoration:none;
    background-color:rgba(255,255,255,0.25);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    display:block
}
@media (min-width: 1024px){
    .region-select a.btn-region{
        width:146px;
        font-size:14pt
    }
    .version{
        display:none
    }
}
.logo{
    width:110px;
    padding-top:4px;
    margin:auto
}
.bg{
    position:fixed;
    z-index:-1;
    top:0;
    right:0;
    bottom:0;
    left:0;
    transition:0.5s;
    pointer-events:none
}
.menu{
    margin:0px auto 0 auto;
    overflow:hidden
}
.menu li:first-child .container{
    position:relative;
    width:100%;
    height:120px
}
.menu li:nth-child(2) .container{
    position:relative;
    width:100%;
    height:120px;
    margin-top:4px
}
.menu li:nth-child(3) .container{
    position:relative;
    width:100%;
    height:170px;
    margin-top:4px
}
.menu li:nth-child(4) .container{
    position:relative;
    width:100%;
    height:120px;
    margin-top:4px
}
@media (min-width: 768px){
    .menu{
        margin:16px auto 0 auto
    }
    .menu li:first-child .container,.menu li:nth-child(2) .container,.menu li:nth-child(3) .container,.menu li:nth-child(4) .container{
        height:160px
    }
}
@media (min-width: 1024px){
    .menu{
        margin:16px auto 0 auto
    }
    .menu li:first-child .container,.menu li:nth-child(2) .container,.menu li:nth-child(3) .container,.menu li:nth-child(4) .container{
        height:148px
    }
}
@media (min-width: 1400px){
    .menu{
        margin:60px auto 0 auto
    }
    .menu li:first-child .container,.menu li:nth-child(2) .container,.menu li:nth-child(3) .container,.menu li:nth-child(4) .container{
        height:160px
    }
}
.menu li:first-child:hover ~ .bg{
    background:url(../images/3star88-region-thailand-lg.jpg) center top;
    -webkit-animation:fadeInOpacity .5s ease-in;
    -moz-animation:fadeInOpacity .5s ease-in;
    -ms-animation:fadeInOpacity .5s ease-in;
    -o-animation:fadeInOpacity .5s ease-in;
    animation:fadeInOpacity .5s ease-in
}
.menu li:nth-child(2):hover ~ .bg{
    background:url(../images/3star88-region-singapore-lg.jpg) center top;
    -webkit-animation:fadeInOpacity .5s ease-in;
    -moz-animation:fadeInOpacity .5s ease-in;
    -ms-animation:fadeInOpacity .5s ease-in;
    -o-animation:fadeInOpacity .5s ease-in;
    animation:fadeInOpacity .5s ease-in
}
.menu li:nth-child(3):hover ~ .bg{
    background:url(../images/3star88-region-malaysia-lg.jpg) center top;
    -webkit-animation:fadeInOpacity .5s ease-in;
    -moz-animation:fadeInOpacity .5s ease-in;
    -ms-animation:fadeInOpacity .5s ease-in;
    -o-animation:fadeInOpacity .5s ease-in;
    animation:fadeInOpacity .5s ease-in
}
.menu li:nth-child(4):hover ~ .bg{
    background:url(../images/3star88-region-indonesia-lg.jpg) center top;
    -webkit-animation:fadeInOpacity .5s ease-in;
    -moz-animation:fadeInOpacity .5s ease-in;
    -ms-animation:fadeInOpacity .5s ease-in;
    -o-animation:fadeInOpacity .5s ease-in;
    animation:fadeInOpacity .5s ease-in
}
@keyframes fadeInOpacity{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}