* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html { width: 100%; height: 100%; overflow: hidden; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; height: 450px; box-sizing: border-box; font-size: 16px; font-family: 'Source Sans Pro', sans-serif; color: #404040; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; opacity: 0; animation: none !important; transition: none !important; }

#gns-event-center-iframe header { display: none }
.header { position: absolute; top: 0; left: 0; width: 100%; font-size: .95em; z-index: 5; background: #fff;; }
.header .h-masthead { width: 268px; height: 40px; vertical-align: middle; background-image: url(../images/scmp-logo.png); background-size: 220px; background-position: 20px 50%; background-repeat: no-repeat; overflow: hidden; z-index: 2 ; text-indent: -9999px; top: 0; margin-left: 10px; position: relative; display: block;}
.header .h-title { position: relative; font-size: 1.8em; line-height: 50px; color: #001246; z-index: 0; text-align: center;; }
.header.header-cover .h-title { }

.header .h-options .h-share { display: inline-block; float: right; width: 32px; font-size: 1.5em; text-align: center; line-height: 40px; cursor: pointer; transition: color .5s ease, background .3s ease; }
.header .h-options .h-share:hover { color: #4390FC; transition: color .2s ease, background .3s ease; }

.header .h-options .h-share-list { position: absolute; right: 0; padding: .5em .6em .2em .6em; background: #FFCF00; z-index: 1; transition: opacity .5s ease; top: 40px; opacity: 0; visibility: hidden; width: 180px; }
.header .h-options .h-share-list .h-share-title { margin-bottom: .2em; margin-right: .3em; font-weight: 600; text-align: right; }

.header .h-options { position: absolute; right: 20px; height: 40px; z-index: 1; top: 0; color: #001246; }
.header .h-options .h-share { display: inline-block; float: right; width: 32px; font-size: 1.5em; text-align: center; line-height: 40px; cursor: pointer; transition: color .5s ease, background .3s ease; }
.header .h-options .h-share:hover { color: #222; transition: color .2s ease, background .3s ease; }

.header .h-options .h-share-list { position: absolute; right: 0; padding: .5em .6em .2em .6em; background: #FFCF00; transition: opacity .5s ease; top: 40px; opacity: 0; visibility: hidden; width: 180px; color: #031e52;z-index: 1; }
.header .h-options .h-share-list .h-share-title { margin-right: .3em; font-weight: 600; text-align: right; margin-bottom: 0; }

.header .h-options .h-share-list .h-shares { position: relative; }
.header .h-options .h-share-list .h-shares:after { content: ''; display: table; clear: both; }
.header .h-options .h-share-list .h-share { color: #031D53; }
.header .h-options .h-share-list .h-share.facebook-button { font-size: 1.6em; }
.header .h-options .h-share-list .h-share.facebook-button:hover { color: #5197EF; }
.header .h-options .h-share-list .h-share.twitter-button { font-size: 1.4em; }
.header .h-options .h-share-list .h-share.twitter-button:hover { color: #7CD3FD; }
.header .h-options .h-share-list .h-share.whatsapp-button { font-size: 1.4em; }
.header .h-options .h-share-list .h-share.whatsapp-button:hover { color: #62DC88; }
.header .h-options .h-share-list .h-share.reddit-button:hover { color: #FF9A74; }
.header .h-options .h-share-list .h-share.pinterest-button { font-size: 1.4em; }
.header .h-options .h-share-list .h-share.pinterest-button:hover { color: #EC707E; }
.header .h-options .h-share-list .h-share.linkedin-button:hover { color: #6DC9F9; }
.header .h-options .h-share-list #o-share-topic { text-decoration: none; color: #fff; font-weight: 700; background: #031e52; display: block; margin-bottom: 9px; font-family: 'Roboto Condensed'; text-align: center; }
.header .h-options .h-share-list #o-share-topic:hover { background: #0071c5; transition: .3s ease all; }

.header .h-options.h-options-active .h-share.menu-button { background: #FFCF00; color: #031e52;; }
.header .h-options.h-options-active .h-share.menu-button:before { content: '\f2d7'; }
.header .h-options.h-options-active .h-share-list { right: 0 !important; top: 40px !important; opacity: 1; visibility: visible; }

.container { position: relative; width: 100%; z-index: 0; max-width: 100%; background: #ddd; height: 100vh; overflow: scroll;margin: 0 auto; }
.banner { background: #70a0dc; position: relative; height: 200px; width: 100%;;;;}
.banner:after{ content:''; width: 100% ; opacity:.5; mix-blend-mode:soft-light; background:#5197ef; left:0; position:absolute; height:100%; top:0; }
.banner-l {width: 50%; height: 100%;background: #a1cfe5;float: left;;}
.banner-c { width: 100% ; height: 100%; background: url(../images/banner.jpg) 50% 50% no-repeat; background-size: 1000px; position: absolute; top: 0;;}

.rows { width: 100%; padding: 20px; max-width: 980px; margin: 0 auto; }

.rows:after { content: ''; display: table; clear: both; }
#row-2 {  }
.frame { margin-bottom: 20px; }
.frame-inner { background-color: #fff; width: 100%; height: calc(100% - 1.9em);  box-shadow: 0px 4px 3px 0px rgba(68, 68, 68, 0.2);;;}
.frame-title { font-weight: 700; text-align: left; font-size: 1.em; font-family: 'Roboto Condensed'; color: #ffcb05; background: #001246; padding-left: 10px; line-height: 30px;; }

#frame-medal { float: left; width: 60%;  }
#frame-today { width: calc(40% - 10px); float: left;margin-left: 10px; }


#frame-0 { float: left; width: 60%;  }
#frame-0 #scmp-result, #frame-0 #scmp-medal, #frame-0 #scmp-today, #frame-0 #scmp-history{ display: none }
#scmp-schedule { margin-top: -120px }
#frame-1 { width: calc(40% - 10px); float: left;margin-left: 10px; height: 450px; }
#frame-1 .frame-text { padding: 10px 20px }
#frame-1 .frame-pic { width: 80px; height: 80px; margin: -40px 0 0 20px; position: relative; background: url(../images/Arabella-Ng-2.jpg) 50% 0 no-repeat; background-size: 100px; border: 2px solid #fff; }
#frame-2 { width: 100%; float: left; height: 250px;}


.bottom { display: none; position: relative; width: calc(100% - 40px); max-width: 660px; margin: 50px auto 0 auto; padding-bottom: 20px; border-top: 1px solid; }
.bottom .f-menu { margin-bottom: 15px; }
.bottom .f-menu li { display: inline-block; float: left; width: 20%; }
.bottom .f-menu li a { font-size: .95em; font-family: 'Roboto Condensed', sans-serif; font-weight: 600; text-decoration: none; line-height: 20px; color: #768EA2; transition: color .5s ease; }
.bottom .f-menu li a:hover { color: #477EAD; transition: color .2s ease; }
.bottom .f-menu:after { content: ''; display: table; clear: both; }
.bottom .f-disclaimer { font-size: .9em; font-family: 'Roboto Condensed', sans-serif; }

.footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; z-index: 1; background: #97080c;; }
.footer .f-source { position: absolute; top: 0; left: 20px; font-size: .85em; font-family: 'Roboto Condensed', sans-serif; line-height: 30px; }
.footer .f-source a { color: #0C385F; transition: color .5s ease; }
.footer .f-source a:hover { color: #1266B1; transition: color .2s ease; }

.main { position: absolute; left: 0; width: 100%; z-index: 0; height: 100%; top: 90px; }
.controls { position: absolute; top: 15px; right: 20px; width: 40px; z-index: 3; border: 2px solid #999; height: 75px; display: none;;; }
.controls .control { display: block; position: relative; box-sizing: content-box; width: 100%; font-size: 1.5em; text-align: center; line-height: 35px; cursor: pointer; transition: color .5s ease, opacity .5s ease; }
.controls .control:hover { color: #ffec00; transition: color .2s ease, opacity .5s ease; }
.controls .control.prev-button { border-top-left-radius: 0; border-top-right-radius: 0; }
.controls .control.prev-button:after { content: ''; position: absolute; top: 100%; left: 10%; width: 80%; height: 2px; background: #999; }
.controls .control.prev-button:hover:before { animation: arrow-up .7s; }
.controls .control.next-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.controls .control.next-button:hover:before { animation: arrow-down .7s; }
.controls .control.reload-button { margin-top: 10px; border-radius: 4px; font-size: 1.7em; }

.controls .control.control-blink { animation: arrow-blink 1.4s infinite 3s; }
.controls .control.control-inactive { color: #404040; cursor: default; }
.controls .control.control-inactive:hover { color: #D4E5EC; }
.controls .control.control-inactive:hover:before { animation: none; }
.controls .control.control-inactive.reload-button { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

.share-page { height: 100%; overflow: auto; }
.share-page .top { display: block; }
.share-page .bottom { display: block; }
.share-page .container { overflow: visible; margin-top: 40px;}
.share-page .header .h-masthead { display: block; margin-top: -40px; position: absolute; top: 0; left: 0;; }
.share-page .header .h-options { margin-top: -40px; color: #113c62;}
.share-page .header .h-buttons .h-button { color: #599399; background: none; transition: color .5s ease; }
.share-page .header .h-buttons .h-button.facebook-button { right: 35px; font-size: 1.4em; }
.share-page .header .h-buttons .h-button.twitter-button { font-size: 1.3em; top: 0 }
.share-page .header .h-buttons .h-button:hover { color: #DA8708; transition: color .2s ease; }
.share-page .header.header-cover .h-title { display: block; text-align: left; line-height: 1.2; }

@keyframes blink {
  0% { border: 2px solid #97080c; }
  20% { border: 2px solid #97080c; }  
  50% { border: 2px solid #ff282c;  }
  80% { border: 2px solid #97080c; }
  100% { border: 2px solid #97080c; }
}
@keyframes thumbs-up {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

@media screen and (min-width: 1280px) {
  .banner-c { max-width: 1280px; background: url(../images/banner.jpg) 50% 50% no-repeat; background-size: 100%; left: calc(50% - 640px); }
}
@media screen and (max-width: 920px) {
  .banner { height: 150px; }
  .banner-c {  background: url(../images/banner.jpg) 50% 50% no-repeat; background-size: cover;  left: 0; }
}
@media screen and (max-width: 700px) {
  #frame-0, #frame-1, #frame-medal, #frame-today { width: 100%; margin-left: 0;;  }
  .frame-pic { margin: 20px 0 0 20px !important; }
}
@media screen and (max-width: 660px) {
  .banner { height: 120px; }
}
@media screen and (max-width: 530px) {
  .banner { height: 80px; }
  .frame-pic { margin: -40px 0 0 20px !important; }

}
@media screen and (max-width: 440px) {
  .top .h-title { width: 100%; padding: 0; }
  .header .h-title { width: calc(100% ); font-size: 1.2em;  }
  .bottom .f-menu li a { font-size: .9em; }
  .share-page .container { }
  .main .map svg {  left: calc(50% - 380px);  top: 50px;  transform: scale(.9, .9);; }
  .main .frames .frame .share-block .share .share-title { margin-bottom: .1em; }
  .main .frames .frame .share-block .share .share-buttons { display: block; float: none; margin-bottom: .1em; margin-left: 1.1em; }
  .main .frames .frame .share-block.share-link .share .share-title { margin-bottom: 0; }

}
@media screen and (max-width: 380px) {
  .top { width: calc(100vw - 20px); }
  .top .h-masthead { width: 220px; }
  .top .h-buttons .h-button.facebook-button { right: calc(30px - .2em); }
  .bottom { width: calc(100% - 20px); margin-top: 30px; }
  .bottom .f-menu li { width: 25%; }
  .share-page .container { }

  .header .h-title { left: 10px; width: calc(100% ); font-size: 1.1em; }
  .main .frames .frame .title { padding: 6px 10px; line-height: 1.2; }
  .footer .f-source { left: 10px }

  .controls { right: 10px; width: 34px; height: 70px; }
  .controls .control { font-size: 1.3em; line-height: 34px; }
  .controls .control.reload-button { font-size: 1.5em; }

  .main .frames { left: 0; width: calc(100% ); }

  .main .frames .frame .share-block { font-size: .95em; }
  .main .frames .frame .share-block .share { padding: 6px 10px; }
  .main .frames .frame .share-block .share .share-buttons .share-button { width: 30px; height: 30px; line-height: 30px; }
  .main .frames .frame .share-block .share .share-buttons .share-button.twitter-button { width: 30px; height: 30px; line-height: 30px; }
  .main .frames .frame .share-block .share .share-buttons .share-button.whatsapp-button { width: 30px; height: 30px; line-height: 30px; }
  
}
@media screen and (max-width: 360px) {
  .main  svg text, .main  svg tspan { }
  .header .h-options{ right: 10px;;}
  .banner { height: 60px; }
}
@media screen and (max-width: 330px) {
  .header .h-title { left: 10px; font-size: .95em; width: calc(100%); }
  .main .frames .frame .title { top: 20px; }
  .frame-0 .frames .frame .title { top: 40px; font-size: 1em;; }
  .main .frames .frame .share-block { font-size: .9em; }

}
@media screen and (max-width: 300px) {
  .top .h-masthead { width: 200px; }
  .main .frames .frame .title { }
  .main .frames .frame .share-block .share .share-title .ion { margin-right: .1em; }
  .main .frames .frame .share-block .share .share-buttons { margin-left: .95em; }
}