/* app.scss */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: transparent; }

#superContainer { height: 100%; position: relative; /* Touch detection for Windows 8 */  -ms-touch-action: none; /* IE 11 on Windows Phone 8.1*/ touch-action: none; }
.fp-section { background-size:cover !important; clear:both; position: relative; -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ -moz-box-sizing: border-box; /* <=28 */ box-sizing: border-box; }
.fp-slide { float: left; }
.fp-slide, .fp-slidesContainer { height: 100%; display: block; }
.fp-slides { z-index: 1; height: 100%; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ transition: all 0.3s ease-out; }
.fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout: fixed; width: 100%; }
.fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
.fp-slidesContainer { float: left; position: relative; }
.fp-controlArrow { position: absolute; z-index: 4; top:50%; cursor: pointer; width:58px; height:100px; lter:alpha(opacity=40); -moz-opacity:0.4;opacity:0.4;  transform:translate(0,0); transition:all .2s ease-in 0s;}
.fp-controlArrow.fp-prev {left:8%; background:url(../img/l_btn.png) no-repeat; background-size:40px;}
.fp-controlArrow.fp-next {right:8%; background:url(../img/r_btn.png) no-repeat; background-size:40px;}
.fp-controlArrow:hover{lter:alpha(opacity=100); -moz-opacity:1; opacity:1; margin-top:-3px;}
.fp-scrollable {overflow: scroll; }
.fp-notransition {-webkit-transition: none !important; transition: none !important; }

.fp-slidesNav {position: absolute; z-index: 4; left:45%; opacity: 1; }
.fp-slidesNav.bottom { bottom:5%; }
.fp-slidesNav.top { top: 17px; }
#fp-nav ul,.fp-slidesNav ul { margin: 0; padding: 0; }
#fp-nav ul li, .fp-slidesNav ul li{display: block; width:14px; height:13px; margin:0 12px; position: relative; }
#fp-nav ul li a,.fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; }
#fp-nav ul li a.active span,.fp-slidesNav ul li a.active span { background:#0F0;}
#fp-nav ul li a.active span,.fp-slidesNav ul li a.active.nav-link::before {border: 1px solid #0F0; }
#fp-nav ul li:hover #fp-nav ul li a.active span, #fp-slidesNav ul li:hover #fp-nav ul li a.active span, #fp-nav ul li:hover
.fp-slidesNav ul li a.active span, #fp-slidesNav ul li:hover
.fp-slidesNav ul li a.active span {  height: 12px;  width: 12px;   margin: -6px 0 0 -6px;   border-radius: 100%; }
#fp-nav ul li a span,.fp-slidesNav ul li a span {position: absolute; top:9px; left:9px; width:12px; height:12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background:rgba(255,255,255,.6); content: '';  opacity:1; -webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1); -moz-transition: all .8s cubic-bezier(.77, 0, .175, 1); -o-transition: all .8s cubic-bezier(.77, 0, .175, 1); transition: all .8s cubic-bezier(.77, 0, .175, 1); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.nav-link::before{position: absolute; top: 5px; left: 5px; width:18px; height: 18px; border: 1px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;  content: '';   opacity: 1; -webkit-transition: all .8s cubic-bezier(.455, .03, .515, .955); -moz-transition: all .8s cubic-bezier(.455, .03, .515, .955); -o-transition: all .8s cubic-bezier(.455, .03, .515, .955); transition: all .8s cubic-bezier(.455, .03, .515, .955); }
.fp-slidesNav li:hover .nav-link:before {opacity: 0; -webkit-transition: all .8s cubic-bezier(.25, .46, .45, .64); -moz-transition: all .8s cubic-bezier(.25, .46, .45, .64); -o-transition: all .8s cubic-bezier(.25, .46, .45, .64); transition: all .8s cubic-bezier(.25, .46, .45, .64); -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); transform: scale(2, 2); -ms-transform: scale(2, 2); background:#fff;}
#fp-nav ul li:hover a span,.fp-slidesNav ul li:hover a span {}

#menu { position: fixed; right:20px; top:40%; z-index: 10; list-style-type: none; }
#menu li { width:27px; height: 27px; margin-top: 7px; overflow: hidden;}
#menu a { display: block; height: 27px; padding-right:27px; line-height: 27px; background: url(../img/dot.png) right -34px no-repeat; color: #fff; text-align: right; text-shadow: 1px 1px 0px #333; text-decoration: none; overflow: hidden;}
#menu span { display: block; width: 27px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;}
#menu a:hover span { text-indent: 0;}
#menu .active a { background-position: right 0;}


#fp-nav {position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0, 0, 0);}
#fp-nav.right {right: 17px; }
#fp-nav.left { left: 17px; }
#fp-nav ul li .fp-tooltip { position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; }
#fp-nav ul li .fp-tooltip.right {right: 20px; }
#fp-nav ul li:hover .fp-tooltip { -webkit-transition: opacity 0.2s ease-in;  transition: opacity 0.2s ease-in;  width: auto; opacity: 1; }
#fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; }
.fp-slidesNav ul li {display: inline-block; }