* {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1;
  font-family: '微软雅黑';
}
blockquote, q {
  quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}
strong, b {
  font-weight: bold
}
legend {
  display: none
}
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0
}
.display-table {
  display: table !important
}
.display-table-cell {
  display: table-cell !important
}
.float-left {
  float: left
}
.float-right {
  float: right
}
.hide {
  opacity: 0
}
.hidden {
  opacity: 0;
  visibility: hidden
}
.trans-05 {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.trans-08 {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease
}
.trans-12 {
  -webkit-transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease
}
.trans-15 {
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease
}
.italic {
  font-style: italic
}
.vertical-align-middle {
  vertical-align: middle;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.uppercase {
  text-transform: uppercase
}
.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}
.noline {
  text-decoration: none
}
.uc {
  text-transform: uppercase
}
.invisible {
  visibility: hidden
}
.noscreen {
  display: none;
  visibility: hidden
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}
.background-none {
  background: none
}
body {
  font-family: '微软雅黑', Arial;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em
}
.icon-mail:before {
  content: '\e800'
}
.icon-twitter:before {
  content: '\e801'
}
.icon-facebook:before {
  content: '\e802'
}
.icon-gplus:before {
  content: '\e803'
}
.icon-plus:before {
  content: '\e804'
}
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  -webkit-transition-property: -webkit-transform, left, top;
  -webkit-transition-duration: 0s;
  -webkit-transform: translate3d(0px, 0, 0);
  -webkit-transition-timing-function: ease;
  -moz-transition-property: -moz-transform, left, top;
  -moz-transition-duration: 0s;
  -moz-transform: translate3d(0px, 0, 0);
  -moz-transition-timing-function: ease;
  -o-transition-property: -o-transform, left, top;
  -o-transition-duration: 0s;
  -o-transform: translate3d(0px, 0, 0);
  -o-transition-timing-function: ease;
  -o-transform: translate(0px, 0px);
  -ms-transition-property: -ms-transform, left, top;
  -ms-transition-duration: 0s;
  -ms-transform: translate3d(0px, 0, 0);
  -ms-transition-timing-function: ease;
  transition-property: transform, left, top;
  transition-duration: 0s;
  transform: translate3d(0px, 0, 0);
  transition-timing-function: ease;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box
}
.swiper-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto
}
.swiper-slide {
  float: left
}
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y
}
.swiper-wp8-vertical {
  -ms-touch-action: pan-x
}
.swiper-container {}
.swiper-slide {}
.swiper-slide-active {}
.swiper-slide-visible {}
.swiper-pagination-switch {}
.swiper-active-switch {}
.swiper-visible-switch {}

/*
Video.js Default Styles (http://videojs.com)
Version 4.3.0
Create your own skin at http://designer.videojs.com
*/

.vjs-default-skin {
  color: #ccc
}
@font-face {
  font-family: 'VideoJS';
  src: url("../../../themes/template/font/vjs.html");
  src: url("../../../themes/template/font/vjsd41d.html?#iefix") format("embedded-opentype"), url("../../../themes/template/font/vjs-2.html") format("woff"), url("../../../themes/template/font/vjs-3.html") format("truetype");
  font-weight: normal;
  font-style: normal
}
.vjs-default-skin .vjs-slider {
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  background-color: #333;
  background-color: rgba(51, 51, 51, 0.9)
}
.vjs-default-skin .vjs-slider:focus {
  -webkit-box-shadow: 0 0 2em #fff;
  -moz-box-shadow: 0 0 2em #fff;
  box-shadow: 0 0 2em #fff
}
.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  left: 0;
  top: 0
}
.vjs-default-skin .vjs-slider-handle:before {
  content: "\e009";
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.vjs-default-skin .vjs-control-bar {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.0em;
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7)
}
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s
}
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s
}
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none
}
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none
}
@media \0screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar:before {
    content: ""
  }
}
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em
}
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}
.vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em #fff
}
.vjs-default-skin .vjs-control:focus {}
.vjs-default-skin .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer
}
.vjs-default-skin .vjs-play-control:before {
  content: "\e001"
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002"
}
.vjs-default-skin .vjs-mute-control, .vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right
}
.vjs-default-skin .vjs-mute-control:before, .vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006"
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003"
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004"
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005"
}
.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right
}
.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em
}
.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em
}
.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em
}
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  top: -1em;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s
}
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s
}
.vjs-default-skin .vjs-progress-holder {
  height: 100%
}
.vjs-default-skin .vjs-progress-holder .vjs-play-progress, .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0
}
.vjs-default-skin .vjs-play-progress {
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat
}
.vjs-default-skin .vjs-load-progress {
  background: #646464;
  background: rgba(255, 255, 255, 0.4)
}
.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%
}
.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em
}
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  line-height: 3em
}
.vjs-default-skin .vjs-current-time {
  float: left
}
.vjs-default-skin .vjs-duration {
  float: left
}
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left
}
.vjs-time-divider {
  float: left;
  line-height: 3em
}
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right
}
.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000"
}
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b"
}
.vjs-default-skin .vjs-big-play-button {
  left: 0.5em;
  top: 0.5em;
  font-size: 3em;
  display: block;
  z-index: 2;
  position: absolute;
  width: 4em;
  height: 2.6em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  border: 0.1em solid #3b4249;
  -webkit-border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  border-radius: 0.8em;
  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s
}
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  left: 50%;
  margin-left: -2.1em;
  top: 50%;
  margin-top: -1.4000000000000001em
}
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none
}
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none
}
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none
}
.vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  background-color: #505050;
  background-color: rgba(50, 50, 50, 0.75);
  -webkit-box-shadow: 0 0 3em #fff;
  -moz-box-shadow: 0 0 3em #fff;
  box-shadow: 0 0 3em #fff;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s
}
.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%
}
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear
}
.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e01e";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg)
  }
  100% {
    -moz-transform: rotate(359deg)
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(359deg)
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg)
  }
  100% {
    -o-transform: rotate(359deg)
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(359deg)
  }
}
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer
}
.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid #000;
  border-top-color: rgba(7, 40, 50, 0.5)
}
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  max-height: 15em;
  overflow: auto;
  left: -5em;
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2)
}
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block
}
.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000
}
.vjs-default-skin .vjs-menu-button ul li:focus, .vjs-default-skin .vjs-menu-button ul li:hover, .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus, .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: #111;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: 0 0 1em #fff;
  -moz-box-shadow: 0 0 1em #fff;
  box-shadow: 0 0 1em #fff
}
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default
}
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c"
}
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008"
}
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before, .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  -webkit-box-shadow: 0 0 1em #fff;
  -moz-box-shadow: 0 0 1em #fff;
  box-shadow: 0 0 1em #fff
}
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  font-family: Arial, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.video-js:-moz-full-screen {
  position: absolute
}
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  _position: absolute
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none
}
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%
}
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%
}
.video-js.vjs-using-native-controls .vjs-poster {
  display: none
}
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  left: 1em;
  right: 1em
}
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5)
}
.video-js .vjs-subtitles {
  color: #fff
}
.video-js .vjs-captions {
  color: #fc6
}
.vjs-tt-cue {
  display: block
}
.vjs-default-skin .vjs-hidden {
  display: none
}
.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  height: 6rem;
  width: 6rem;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}
.pace.pace-inactive .pace-progress {
  opacity: 0;
  visibility: hidden
}
.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 6rem;
  width: 6rem !important;
  font-weight: bold;
  line-height: 115px;
  font-size: 35px;
  color: #0198fd;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  -webkit-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -moz-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -ms-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -o-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform: translate3d(0px, 0px, 0px) !important;
  transform: translate3d(0px, 0px, 0px) !important
}
.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: block
}
.mCustomScrollbar {
  -ms-touch-action: none;
  touch-action: none
}
.mCustomScrollbar.mCS_no_scrollbar {
  -ms-touch-action: auto;
  touch-action: auto
}
.mCustomScrollBox {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: 0;
  direction: ltr
}
.mCSB_container {
  overflow: hidden;
  width: auto;
  height: auto
}
.mCSB_inside>.mCSB_container {
  margin-right: 30px
}
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0
}
.mCS-dir-rtl>.mCSB_inside>.mCSB_container {
  margin-right: 0;
  margin-left: 30px
}
.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0
}
.mCSB_scrollTools {
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0
}
.mCSB_outside+.mCSB_scrollTools {
  right: -26px
}
.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools, .mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
  right: auto;
  left: 0
}
.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
  left: -26px
}
.mCSB_scrollTools .mCSB_draggerContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto
}
.mCSB_scrollTools a+.mCSB_draggerContainer {
  margin: 20px 0
}
.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px
}
.mCSB_scrollTools .mCSB_dragger {
  cursor: pointer;
  width: 100%;
  height: 30px;
  z-index: 1
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  text-align: center
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px
}
.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer
}
.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0
}
.mCSB_horizontal.mCSB_inside>.mCSB_container {
  margin-right: 0;
  margin-bottom: 30px
}
.mCSB_horizontal.mCSB_outside>.mCSB_container {
  min-height: 100%
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0
}
.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer {
  margin: 0 20px
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  height: 100%;
  left: 0
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  margin: 2px auto
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  margin: 4px 0
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0
}
.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px
}
.mCSB_container_wrapper>.mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px
}
.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px
}
.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px
}
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0
}
.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0
}
.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px
}
.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0
}
.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper {
  margin-right: 0;
  margin-left: 30px
}
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container {
  padding-right: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container {
  padding-bottom: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  margin-left: 0
}
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0
}
.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
  -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out
}
.mCSB_scrollTools {
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)"
}
.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools, .mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)"
}
.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools, .mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools, .mCustomScrollBox:hover>.mCSB_scrollTools, .mCustomScrollBox:hover~.mCSB_scrollTools, .mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)"
}
.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)"
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)"
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)"
}
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)"
}
.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp {
  background-image: url(.../../../themes/template/mCSB_buttons.html);
  background-repeat: no-repeat;
  opacity: .4;
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)"
}
.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0
}
.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px
}
.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px
}
.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px
}
.mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover {
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)"
}
.mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active {
  opacity: .9;
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)"
}
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15)
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75)
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px
}
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px auto
}
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85)
}
.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9)
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px 0
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -20px
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -40px
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -56px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px 0
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -20px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -40px
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -56px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px 0
}
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 6px;
  margin: 5px auto
}
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85)
}
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9)
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px 0
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -20px
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -40px
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -56px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px 0
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -20px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px
}
.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1)
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px
}
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%
}
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 2px;
  margin: 7px auto
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15)
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75)
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px
}
.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.15)
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded.mCSB_scrollTools .mCSB_dragger {
  height: 14px
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 14px;
  margin: 0 1px
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 14px
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 14px;
  margin: 1px 0
}
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 16px;
  height: 16px;
  margin: -1px 0
}
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 4px
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 16px;
  width: 16px;
  margin: 0 -1px
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 -72px
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -92px
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -112px
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -128px
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75)
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15)
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px -72px
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -92px
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -112px
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -128px
}
.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
  width: 4px
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  background-color: transparent;
  background-position: center
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)"
}
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
  background-repeat: repeat-x
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px -72px
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -92px
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -112px
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -128px
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px -72px
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -92px
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -112px
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -128px
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-y;
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%)
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%)
}
.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 70px
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 70px
}
.mCS-3d-dark.mCSB_scrollTools, .mCS-3d.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)"
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2)
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 8px;
  margin: 4px 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2)
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 8px;
  margin: 4px auto
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1)
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1)
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px
}
.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)"
}
.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px
}
.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical {
  right: 1px
}
.mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCS-3d-thick.mCSB_scrollTools_vertical {
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5)
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal, .mCS-3d-thick.mCSB_scrollTools_horizontal {
  bottom: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5)
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
  width: 12px;
  margin: 2px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4)
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  width: auto
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1)
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px
}
.mCS-3d-thick-dark.mCSB_scrollTools {
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2)
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2)
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2)
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2)
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #777
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1)
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px
}
.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical {
  right: 0;
  margin: 12px 0
}
.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 0;
  margin: 0 12px
}
.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical {
  left: 0;
  right: auto
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent
}
.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 50px
}
.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 50px
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)"
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)"
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)"
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)"
}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
  width: 6px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2)
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px
}
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 6px;
  margin: 5px 0
}
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 12px
}
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 12px;
  margin: 2px 0
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75)
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1)
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2)
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  margin: 3px 5px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  margin: 5px 3px;
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 12px;
  margin: 2px 0
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75)
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1)
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  border-color: #000;
  border-color: rgba(0, 0, 0, 0.2)
}
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6)
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6)
}
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75)
}
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85)
}
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9)
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75)
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85)
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9)
}
#header {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 300;
  /*border-top: 1px solid #0198fd;*/
  border-top: 1px solid #000;
  background-color: #161b20;
  color: #fdfdff;
  height: 53px;
  line-height: 53px;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}
#header .main-nav {
  list-style: none;
  text-align: center;
  overflow: hidden;
  width: 100%;
}
#header .main-nav li {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: 19.2%;
  float: left;
  height: 53px;
  text-align: center;
}

#header .main-nav li.nav-item:hover a {
  color: #0198fd;
}
#header .main-nav li.nav-item.first {
  margin-right: 160px
}
#header .main-nav li.nav-item.last {
  margin-left: 160px;
  left: 40px
}
#header .main-nav li a {
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  color: #fdfdff;
  font-size: 24px;
  font-weight: 300;
  text-decoration: none;
  font-family: '微软雅黑';
}
#header .ctn-wrapper-large {
  position: relative
}
#header .ctn-wrapper-large .language {
  position: absolute;
  top: 20px;
  right: 30px
}
#header .ctn-wrapper-large .language span {
  display: none
}
#header .ctn-wrapper-large .language a {
  color: #484d52;
  font-size: 15px;
  text-transform: uppercase;
  -webkit-transition: color 0.5s ease-out 0s;
  -moz-transition: color 0.5s ease-out 0s;
  -ms-transition: color 0.5s ease-out 0s;
  -o-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s
}
#header .ctn-wrapper-large .language a:hover {
  color: #fff
}
#header .logo {
  position: absolute;
  width: 210px;
  margin-left: -95px;
  left: 50%;
  top: 7px;
}
#header .logo img {
  /* width: 55px; */
  height: 38px;
  /* margin-top: 5px; */
}
#header .contact {
  position: absolute;
  top: 20px;
  left: 30px;
  color: #484d52;
  font-size: 15px;
  text-transform: uppercase;
  -webkit-transition: color 0.5s ease-out 0s;
  -moz-transition: color 0.5s ease-out 0s;
  -ms-transition: color 0.5s ease-out 0s;
  -o-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s
}
#header .contact:hover {
  color: #fff
}
#header .toggle {
  display: none;
  position: absolute;
  top: 19px;
  left: 30px;
  width: 20px;
  height: 20px
}
#header .toggle .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer
}
#header .toggle .wrapper span {
  display: block;
  position: relative;
  width: 100%;
  height: 4px;
  margin: 0 0 2px 0;
  background: #484d52;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  -ms-border-radius: 2px 2px 2px 2px;
  -o-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  -webkit-transition: background 0.5s ease-out 0s;
  -moz-transition: background 0.5s ease-out 0s;
  -ms-transition: background 0.5s ease-out 0s;
  -o-transition: background 0.5s ease-out 0s;
  transition: background 0.5s ease-out 0s
}
.no-touch #header .toggle .wrapper:hover span, #header.show-touch .toggle .wrapper span {
  background: #fff
}
.subsite-top-bar {
  height: 48px;
  width: 100%;
  background-color: rgba(223, 223, 225, 0.95);
  border-bottom: 1px solid white;
  position: fixed;
  z-index: 100
}
.subsite-top-bar .back {
  width: 25%;
  display: inline-block;
  float: left
}
.subsite-top-bar .back a {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 0;
  width: 10%;
  float: left;
  margin-top: 16px;
  text-transform: uppercase;
  -webkit-transition: left 0.25s ease-out 0s;
  -moz-transition: left 0.25s ease-out 0s;
  -ms-transition: left 0.25s ease-out 0s;
  -o-transition: left 0.25s ease-out 0s;
  transition: left 0.25s ease-out 0s;
  background-image: url("../../../themes/template/res/img/layout/close_x_grey.png");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 10px center
}
.subsite-top-bar nav.menu-subsite-container {
  height: 100%;
  text-align: center;
  margin: 0 auto
}
.subsite-top-bar nav.menu-subsite-container ul {
  height: 100%;
  font-size: 0
}
.subsite-top-bar nav.menu-subsite-container ul li {
  height: 100%;
  display: inline-block;
  padding: 0 25px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.subsite-top-bar nav.menu-subsite-container ul li a {
  font-size: 16px;
  color: #484d52;
  text-transform: uppercase;
  margin-top: 16px;
  display: block;
  font-weight: 600;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.subsite-top-bar nav.menu-subsite-container ul li:hover {
  background-color: #acb1b6
}
.subsite-top-bar nav.menu-subsite-container ul li:hover a {
  color: #000;
}
.subsite-top-bar nav.menu-subsite-container ul li.current-menu-item {
  background-color: #161b20
}
.subsite-top-bar nav.menu-subsite-container ul li.current-menu-item a {
  color: #0198fd;
}
@media screen and (max-width: 1200px) {
  .subsite-top-bar nav.menu-subsite-container ul li a {
    font-size: 14px;
    margin-top: 17px
  }
  .subsite-top-bar .contact-text-top {
    display: none
  }
}
@media screen and (max-width: 800px) {
  #menu-cases li, #menu-cases-en li {
    padding: 0 16px
  }
  #menu-cases li a:before, #menu-cases-en li a:before {
    content: '';
    background-color: #484d52;
    width: 10px;
    height: 10px;
    display: block;
    margin-top: 18px;
    border-radius: 50%
  }
  #menu-cases li.current_page_item a:before, #menu-cases-en li.current_page_item a:before {
    background-color: #fd0
  }
  #menu-cases li a span, #menu-cases-en li a span {
    display: none
  }
}
.subsite-top-bar .contact-text-top {
  position: absolute;
  right: 20px;
  font-size: 16px;
  margin-top: 16px;
  color: #484d52;
  top: 0
}
.subsite-wrapper-head {
  text-align: center;
  /* padding-top: 60px; */
  background-color: #000;
  float: none;
  width: 100%;
  overflow: hidden;
}
.subsite-wrapper-head img {
  display: block;
  max-width: 100%;
}
.subsite-wrapper-head h2 {
  text-transform: uppercase;
  padding-top: 48px;
  font-weight: 100;
  margin-bottom: 0;
  font-size: 40px;
  padding: 0 8px 10px
}
@media screen and (max-width: 700px) {
  #header .main-nav {
    position: relative;
    z-index: 2;
    left: 110%;
    float: left;
    width: 50%;
    text-align: left;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s
  }
  #header.show-touch .main-nav {
    left: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    width: 100%;
  }
  #header .main-nav li.nav-item.first, #header .main-nav li.nav-item.last {
    display: inline-block;
    left: 0;
    margin-left: 0;
    margin-right: 0
  }
  #header .main-nav li.nav-item.last {
    float: right;
    left: 55px
  }
  #header .logo {
    top: -1px;
    height: 56px;
    width: 56px;
    margin-left: -28px;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s
  }
  #header.show-touch .logo {
    opacity: 1;
    filter: alpha(opacity=30);
    -ms-filter: alpha(opacity=30);
    /* display: none; */
    text-align: center;
    padding-top: 10px;
  }
  #header .logo img {
    max-width: 100%;
    margin: 0;
    text-align: center;
    display: inline-block;
  }
  #header .contact {
    position: relative;
    z-index: 2;
    top: 14px;
    left: 110%;
    float: right;
    font-family: 'bebas_neuethin';
    color: #fdfdff;
    font-size: 28px;
    font-weight: 300;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s
  }
  #header.show-touch .contact {
    left: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100)
  }
  #header .contact:hover {
    color: #fd0
  }
  #header .toggle {
    display: block
  }
  #header .toggle {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s
  }
  #header.show-touch .toggle {
    left: -110%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0)
  }
  #header .ctn-wrapper-large .language {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s
  }
  #header.show-touch .ctn-wrapper-large .language {
    right: 110%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0)
  }
}
@media screen and (max-width: 500px) {
  #header .main-nav {
    top: 4px
  }
  #header .main-nav li.nav-item.first {
    position: absolute;
    top: 0
  }
  #header .main-nav li.nav-item.last {
    left: 39px
  }
  #header .main-nav li a {
    font-size: 14px;
  }
  #header.show-touch .contact {
    top: 18px;
    font-size: 20px
  }
}
.home #header {
  bottom: -53px;
  font-family: '微软雅黑  ';
}
.home #header.show {
  bottom: 0
}
html {
  height: 100%
}
body {
  position: relative;
  height: 100%;
  background-color: #161b20;
  font-size: 16px;
  text-transform: uppercase;
}
#footer{
  text-transform: none;
}
img {
  border: none;
  outline: none
}
body.subpage {
  background-color: #fff
}
h2 {
  text-rendering: optimizelegibility;
  font-size: 32px;
  color: #161b20;
  margin-bottom: 25px;
  line-height: 1.1;
}
h3 {
  text-rendering: optimizelegibility;
  font-size: 24px;
  line-height: 1.1;
}
a {
  text-rendering: optimizelegibility;
  text-decoration: none
}
p {
  text-rendering: optimizelegibility;
  line-height: 1.3;
  letter-spacing: -1px
}
#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: #161b20;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  font-family: '微软雅黑';
}
.contentOuter {
  float: left;
  width: 100%;
  position: relative
}
.contentInner {
  width: 1300px;
  padding: 0 10px;
  margin: 0 auto;
  position: relative
}
.text-shadow {
  color: #fff;
  -webkit-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -moz-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -ms-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -o-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.4); */
}
.color-blue {
  /*color: #00aaff;*/
}
.tight {
  letter-spacing: -1px;
  line-height: 1.3;
}
.button-plus {
  position: relative;
  float: left
}
.button-plus .icon {
  width: 35px;
  height: 35px;
  font-size: 27px;
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  margin: auto;
  top: 10px;
  /*background-color: #0198fd;*/
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.button-plus .icon img {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out
}
.button-plus label {
  padding: 11px 0 0 44px;
  float: left;
  position: relative;
  z-index: 5;
  cursor: pointer;
  text-shadow: none !important;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out
}
.button-plus.gray {
  float: none;
  /*width: 35px;*/
  margin: 20px auto 0;
  display: block;
  color: #fff;
}
.button-plus.gray label {
  color: #484d52;
}
.button-plus.gray .icon {
  /*background-color: #acb1b6*/
}
.button-plus.gray:hover label {
  color: #00aaff !important;
}
.no-touch .button-plus:hover .icon {
  /* width: 143px; */
  -webkit-border-radius: 16px 16px 16px 16px;
  -moz-border-radius: 16px 16px 16px 16px;
  -ms-border-radius: 16px 16px 16px 16px;
  -o-border-radius: 16px 16px 16px 16px;
  border-radius: 16px 16px 16px 16px;
}
.no-touch .button-plus:hover .icon img {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg)
}
.no-touch .button-plus:hover label {
  -webkit-transform: translate3d(-6px, 0, 0px);
  -ms-transform: translate3d(-6px, 0, 0px);
  transform: translate3d(-6px, 0, 0px);
  -moz-transform: translate3d(-6px, 0, 0px);
  -o-transform: translat3d(-6px, 0, 0px);
  color: #161b20
}
.arrow-mask {
  width: 100%;
  vertical-align: top;
  margin-top: -18%;
}
.team .arrow-mask-1 {
  margin-top: -9.9%;
}
.team .arrow-mask-2 {
  margin-top: -180px;
}
.ctn-wrapper {
  padding: 0 30px;
  max-width: 760px;
  margin: 0 auto
}
.ctn-wrapper-large {
  padding: 0 30px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative
}
.hl-text-uppercase {
  padding-bottom: 50px;
  color: #484d52;
  font-size: 55px;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase
}
.p-text {
  color: #484d52;
  font-size: 21px;
  text-align: center;
  max-width: 570px;
  margin: 0 auto;
  line-height: 1.4
}
.bg-yellow {
  background-color: #fd0
}
@media screen and (max-width: 450px) {
  .hl-text-uppercase {
    font-size: 40px
  }
}
@media screen and (max-width: 450px) {
  .ctn-wrapper, .ctn-wrapper-large {
    padding: 0 20px
  }
}
#main {
  max-width: 100%;
  margin: 0 auto;
  min-height: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
  clear: both;
}
#article {
  background-color: #070816;
  padding-bottom: 10%;
}
.error404 #main {
  position: relative;
  top: 0;
  height: 100%;
  text-align: center;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.unload.error404 #main {
  top: -50%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0)
}
.error404 #main img {
  display: block;
  position: relative;
  top: 25%;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  opacity: 1;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}
.loaded.error404 #main img, .unload.error404 #main img {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.error404 #main h1 {
  position: relative;
  top: 34%;
  padding: 0 30px;
  color: #484d52;
  font-size: 30px;
  text-align: center;
  opacity: 1;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0.5s;
  -moz-transition: all 0.5s ease-out 0.5s;
  -ms-transition: all 0.5s ease-out 0.5s;
  -o-transition: all 0.5s ease-out 0.5s;
  transition: all 0.5s ease-out 0.5s;
}
.loaded.error404 #main h1, .unload.error404 #main h1 {
  top: 30%;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.error404 #main p {
  position: relative;
  top: 35%;
  /* padding: 30px 30px 0 30px; */
  color: #484d52;
  font-size: 24px;
  text-align: center;
  opacity: 1;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0.5s;
  -moz-transition: all 0.5s ease-out 0.5s;
  -ms-transition: all 0.5s ease-out 0.5s;
  -o-transition: all 0.5s ease-out 0.5s;
  transition: all 0.5s ease-out 0.5s;
}
.loaded.error404 #main p, .unload.error404 #main p {
  top: 30%;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.error404 #main a {
  display: block;
  position: relative;
  top: 36%;
  /* width: 40px; */
  margin: 0 auto;
  color: #acb1b6;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 1;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 1.5s;
  -moz-transition: all 0.5s ease-out 1.5s;
  -ms-transition: all 0.5s ease-out 1.5s;
  -o-transition: all 0.5s ease-out 1.5s;
  transition: all 0.5s ease-out 1.5s;
}
.loaded.error404 #main a {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.thin {
  font-weight: 400 !important
}
@media screen and (max-width: 750px) {
  .error404 #main img {
    top: 20%
  }
  .error404 #main h1, .error404 #main p {
    top: 35%
  }
  .loaded.error404 #main h1, .unload.error404 #main h1, .loaded.error404 #main p, .unload.error404 #main p {
    top: 25%
  }
  .error404 #main a {
    top: 30%
  }
}
@media screen and (max-width: 550px) {
  .error404 #main img {
    top: 10%
  }
  .error404 #main h1 {
    font-size: 30px
  }
  .error404 #main p {
    font-size: 20px
  }
  .error404 #main h1, .error404 #main p {
    top: 25%
  }
  .loaded.error404 #main h1, .unload.error404 #main h1, .loaded.error404 #main p, .unload.error404 #main p {
    top: 15%
  }
  .error404 #main a {
    top: 25%
  }
}
.cfix:after {
  clear: both
}
.cfix:before, .cfix:after {
  content: " ";
  display: block;
  height: 0px;
  overflow: hidden
}
#footer {
  padding: 45px 0 103px 0;
  background: #fff;
  width: 100%;
  float: none;
  clear: both;
  color: #636466;
}
#footer .ctn-wrapper-large {
  position: relative
}
#footer .ctn-wrapper-large>.menu {
  padding: 0 0 15px 0;
  border-bottom: 1px solid #ccc;
}
#footer .ctn-wrapper-large > .menu .menu-footer-englisch-container, #footer .ctn-wrapper-large > .menu .menu-footer-container, #footer .ctn-wrapper-large > .menu .menu-footer-englisch-container ul, #footer .ctn-wrapper-large > .menu .menu-footer-container ul {
  display: inline-block
}
#footer .ctn-wrapper-large > .menu .menu-footer-container ul li, #footer .ctn-wrapper-large > .menu .menu-footer-englisch-container ul li {
  display: inline-block;
  margin: 0 35px 0 0;
  list-style-type: none
}
#footer .ctn-wrapper-large > .menu a {
  display: inline-block;
  padding: 15px 0 0 0;
  color: #636466;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  border-top: 1px solid transparent;
  -webkit-transition: border-top 0.25s ease-out 0s;
  -moz-transition: border-top 0.25s ease-out 0s;
  -ms-transition: border-top 0.25s ease-out 0s;
  -o-transition: border-top 0.25s ease-out 0s;
  transition: border-top 0.25s ease-out 0s;
}
#footer .ctn-wrapper-large > .menu a:hover {
  border-top: 1px solid #fff
}
#footer .ctn-wrapper-large .sm {
  position: absolute;
  top: 0;
  right: 30px
}
#footer .ctn-wrapper-large .sm ul li {
  display: inline-block;
  list-style-type: none;
  margin: 0 0 0 15px;
  border-top: 1px solid transparent;
  -webkit-transition: border-top 0.25s ease-out 0s;
  -moz-transition: border-top 0.25s ease-out 0s;
  -ms-transition: border-top 0.25s ease-out 0s;
  -o-transition: border-top 0.25s ease-out 0s;
  transition: border-top 0.25s ease-out 0s
}
#footer .ctn-wrapper-large .sm ul li:hover {
  border-top: 1px solid #fff
}
#footer .ctn-wrapper-large .sm ul li a {
  display: inline-block;
  width: 15px;
  height: 30px
}
#footer .ctn-wrapper-large .sm ul li.fb a {
  background-image: url("../../../themes/template/res/img/layout/qq.png");
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center bottom
}
#footer .ctn-wrapper-large .sm ul li.pi a {
  background-image: url("../../../themes/template/res/img/layout/sina.png");
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center bottom
}
#footer .ctn-wrapper-large .sm ul li.yt a {
  background-image: url("../../../themes/template/res/img/layout/weixin.png");
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center bottom
}
#footer .ctn-wrapper-large .data {
  padding: 5px 0 0 0
}
#footer .ctn-wrapper-large .data p {
  padding: 15px 0 0 0
}
#footer .ctn-wrapper-large .data p span, #footer .ctn-wrapper-large .data p a {
  color: #636466;
}
#footer .ctn-wrapper-large .data p span.bold, #footer .ctn-wrapper-large .data p a {
  font-weight: 600
}
#logo-ankoe {
  float: right;
  margin-top: 10px
}
@media screen and (max-width: 1000px) {
  #footer .margin {
    display: inline-block;
    margin: 15px 0 0 0
  }
  #footer .switch {
    display: none
  }
  #footer .line {
    display: block
  }
}
@media screen and (max-width: 350px) {
  #footer .ctn-wrapper-large > .menu .menu-footer-container ul li, #footer .ctn-wrapper-large > .menu .menu-footer-englisch-container ul li {
    margin: 0 15px 0 0
  }
}
.page-magazine #footer {
  border-top: 2px solid #fdfdff
}
.footer-case {
  background-color: #161b20;
  color: #fdfdff;
  width: 100%;
  float: left;
  padding-bottom: 20px
}
.footer-case .navigation {
  margin: 25px 0 65px 0
}
.footer-case .navigation ul {
  position: relative;
  text-align: center;
  list-style-type: none
}
.footer-case .navigation ul li {
  display: inline-block;
  height: 70px
}
.footer-case .navigation ul li.case {
  position: absolute;
  top: 0
}
.footer-case .navigation ul li.case.left {
  left: 0;
  text-align: left
}
.footer-case fig {
  color: #fdfdff
}
.footer-case .navigation ul li.case.right {
  right: 0;
  text-align: right
}
.footer-case .navigation ul li span {
  display: block;
  color: #fdfdff;
  font-size: 16px;
  font-weight: 200;
  text-transform: uppercase
}
.footer-case .navigation ul li>a {
  display: inline-block;
  margin: 10px 0 0 0;
  color: #fdfdff;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s
}
.footer-case .navigation ul li p a {
  display: block;
  margin: 10px 0 0 0;
  color: #fdfdff;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s
}
.footer-case .navigation ul li a:hover {
  border-bottom: 2px solid #fdfdff
}
.footer-case .navigation ul li.case a {
  text-transform: uppercase
}
.footer-case .footer-item {
  height: auto;
  border: none;
  text-align: center
}
.footer-case .footer-item fig {
  color: #fdfdff;
  padding-bottom: 3px !important
}
.footer-case .footer-item .text {
  display: block;
  float: none;
  margin: 0 0 12px 0;
  padding: 0;
  color: #fdfdff;
  font-size: 16px;
  font-weight: 200;
  text-transform: uppercase;
  text-align: center
}
.footer-case .footer-item fig {
  display: inline-block;
  float: none;
  margin: 0 25px;
  padding: 0;
  border-bottom: 2px solid transparent
}
.footer-case .footer-item fig:hover {
  color: #fd0
}
@media screen and (max-width: 1200px) {
  .footer-case .navigation ul li a {
    font-size: 24px
  }
}
@media screen and (max-width: 1000px) {
  .footer-case .navigation ul li a {
    font-size: 20px
  }
}
@media screen and (max-width: 650px) {
  .footer-case .case {
    display: none !important
  }
}
@media screen and (max-width: 450px) {
  .footer-case .footer-item fig {
    margin: 0 12px
  }
}
@media screen and (max-width: 400px) {
  .footer-case .navigation ul li a {
    font-size: 18px
  }
}
.home {
  background: #fff;
  color:#FFFFFF;
}
.home * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}
.home #main {
  max-width: none
}
.p-subtitle {
  font-size: 16px;
  color: #fdfdff;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 40px
}
.ctn-small {
  padding: 0 30px;
  max-width: 760px;
  margin: 0 auto
}
#intro {
  position: relative;
  background: #080f15;
  overflow: hidden
}
#logoTo{
  display: block;
  position: absolute;
  top:0;
  left: 5%;
  width: 154px;
  height:100px;
  background-image: url('../../../images/logo_white.png');
  background-repeat: no-repeat;
  background-position:  center center;
  background-size: 100% auto;
  z-index: 999;
}

#intro .intro-content {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10
}
#intro .intro-content .logo {
  position: absolute;
  top: 50%;
  left: -110px;
  z-index: 2;
  width: 220px
}
#intro .intro-content .logo h1 {
  position: absolute;
  top: 70px;
  left: -2%;
  width: 110%;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: opacity 2.5s ease-in 2.5s;
  -moz-transition: opacity 2.5s ease-in 2.5s;
  -ms-transition: opacity 2.5s ease-in 2.5s;
  -o-transition: opacity 2.5s ease-in 2.5s;
  transition: opacity 2.5s ease-in 2.5s
}
.intro-finished #intro .intro-content .logo h1 {
  -webkit-transition: top 0.5s ease-out 0s;
  -moz-transition: top 0.5s ease-out 0s;
  -ms-transition: top 0.5s ease-out 0s;
  -o-transition: top 0.5s ease-out 0s;
  transition: top 0.5s ease-out 0s
}
.loaded #intro .intro-content .logo h1 {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
#intro .intro-content .logo h1 span {
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase
}
#intro .intro-content .logo img {
  position: absolute;
  width: 200px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.75s linear 2s;
  -moz-transition: all 0.75s linear 2s;
  -ms-transition: all 0.75s linear 2s;
  -o-transition: all 0.75s linear 2s;
  transition: all 0.75s linear 2s;
}
.loaded #intro .intro-content .logo img {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
#intro .intro-content .logo img.triangle-left {
  top: -30px;
  left: 60px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(0) rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -ms-transform: perspective(0) rotateZ(180deg);
  -o-transform: perspective(0) rotateZ(180deg);
  transform: perspective(0) rotateZ(180deg);
  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px
}
.loaded #intro .intro-content .logo img.triangle-left {
  top: -70px;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(0) rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: perspective(0) rotateZ(0deg);
  -o-transform: perspective(0) rotateZ(0deg);
  transform: perspective(0) rotateZ(0deg);
  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px
}
#intro .intro-content .logo img.triangle-right {
  top: -30px;
  right: 60px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(0) rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -ms-transform: perspective(0) rotateZ(-180deg);
  -o-transform: perspective(0) rotateZ(-180deg);
  transform: perspective(0) rotateZ(-180deg);
  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px
}
.loaded #intro .intro-content .logo img.triangle-right {
  top: -70px;
  right: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(0) rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: perspective(0) rotateZ(0deg);
  -o-transform: perspective(0) rotateZ(0deg);
  transform: perspective(0) rotateZ(0deg);
  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px
}
#intro .intro-content .logo img.triangle-bottom {
  bottom: -70px;
  left: 9px;
}
@media screen and (max-height: 900px) {
  #intro .intro-content .logo p {
    top: 100px
  }
}
@media screen and (max-height: 650px) {
  #intro .intro-content .logo {
    top: 44%
  }
}
@media screen and (max-height: 550px) {
  #intro .intro-content .logo {
    top: 40%
  }
}
@media screen and (max-height: 500px) {
  #intro .intro-content .logo {
    top: 41%
  }
}
@media screen and (max-height: 480px) {
  #intro .intro-content .logo p {
    -webkit-transition: opacity 2.5s ease-in 5.5s;
    -moz-transition: opacity 2.5s ease-in 5.5s;
    -ms-transition: opacity 2.5s ease-in 5.5s;
    -o-transition: opacity 2.5s ease-in 5.5s;
    transition: opacity 2.5s ease-in 5.5s
  }
  #intro .intro-content .logo img {
    -webkit-transition: all 0.75s linear 4s;
    -moz-transition: all 0.75s linear 4s;
    -ms-transition: all 0.75s linear 4s;
    -o-transition: all 0.75s linear 4s;
    transition: all 0.75s linear 4s
  }
}
#intro .intro-content .lines {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px
}
#intro .intro-content .lines .line {
  position: relative;
  width: 1px;
  background: #fff
}
#intro .intro-content .lines .line-top {
  top: 4%;
  height: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 1s ease-out 2s;
  -moz-transition: all 1s ease-out 2s;
  -ms-transition: all 1s ease-out 2s;
  -o-transition: all 1s ease-out 2s;
  transition: all 1s ease-out 2s
}
.intro-finished #intro .intro-content .lines .line-top {
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.loaded #intro .intro-content .lines .line-top {
  height: 30%;
  opacity: 0.3;
  filter: alpha(opacity=30);
  -ms-filter: alpha(opacity=30)
}
#intro .intro-content .lines .line-bottom {
  top: 40%;
  height: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 1s ease-out 4s;
  -moz-transition: all 1s ease-out 4s;
  -ms-transition: all 1s ease-out 4s;
  -o-transition: all 1s ease-out 4s;
  transition: all 1s ease-out 4s
}
.intro-finished #intro .intro-content .lines .line-bottom {
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.loaded #intro .intro-content .lines .line-bottom {
  height: 15%;
  opacity: 0.15;
  filter: alpha(opacity=15);
  -ms-filter: alpha(opacity=15)
}
@media screen and (max-height: 900px) {
  #intro .intro-content .lines .line-bottom {
    top: 43%
  }
}
@media screen and (max-height: 650px) {
  .loaded #intro .intro-content .lines .line-top {
    height: 25%
  }
  #intro .intro-content .lines .line-bottom {
    top: 45%
  }
}
@media screen and (max-height: 550px) {
  .loaded #intro .intro-content .lines .line-top {
    height: 20%
  }
  #intro .intro-content .lines .line-bottom {
    top: 47%
  }
  .loaded #intro .intro-content .lines .line-bottom {
    height: 19%
  }
}
@media screen and (max-height: 500px) {
  #intro .intro-content .lines .line-bottom {
    top: 49%
  }
}
@media screen and (max-height: 480px) {
  #intro .intro-content .lines {
    display: none
  }
}
#intro .intro-content .scroll {
  position: absolute;
  bottom: 0;
  left: -35px;
  z-index: 3;
  width: 70px;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 1s ease-out 5.5s;
  -moz-transition: all 1s ease-out 5.5s;
  -ms-transition: all 1s ease-out 5.5s;
  -o-transition: all 1s ease-out 5.5s;
  transition: all 1s ease-out 5.5s
}
.intro-finished #intro .intro-content .scroll {
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.loaded #intro .intro-content .scroll {
  bottom: 60px;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
#intro .intro-content .scroll span {
  padding: 10px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  -webkit-transition: opacity 0.25s ease-out 0s;
  -moz-transition: opacity 0.25s ease-out 0s;
  -ms-transition: opacity 0.25s ease-out 0s;
  -o-transition: opacity 0.25s ease-out 0s;
  transition: opacity 0.25s ease-out 0s
}
.no-touch #intro .intro-content .scroll span:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
@media screen and (max-height: 900px) {
  .loaded #intro .intro-content .scroll {
    bottom: 50px
  }
}
@media screen and (max-height: 750px) {
  .loaded #intro .intro-content .scroll {
    bottom: 40px
  }
}
@media screen and (max-height: 650px) {
  .loaded #intro .intro-content .scroll {
    bottom: 35px
  }
}
@media screen and (max-height: 500px) {
  .loaded #intro .intro-content .scroll {
    bottom: 30px
  }
}
@media screen and (max-height: 480px) {
  #intro .intro-content .scroll {
    -webkit-transition: all 1s ease-out 6.5s;
    -moz-transition: all 1s ease-out 6.5s;
    -ms-transition: all 1s ease-out 6.5s;
    -o-transition: all 1s ease-out 6.5s;
    transition: all 1s ease-out 6.5s
  }
}
#intro .video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.touch #intro .video-wrapper {
  /*background-image: url("../../../themes/template/res/video/cloudytime.jpg");*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover
}
#intro .video-wrapper video {
  position: absolute;
  bottom: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%
}
.touch #intro .video-wrapper video {
  display: none
}
#intro .video-wrapper .arrow-mask {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 20;
  width: 100%
}
#intro .video-wrapper .pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url(../../../themes/template/res/video/pattern.png)*/
}
.section-filler {
  text-align: center
}
.section-filler h4 {
  font-size: 70px;
  font-weight: normal;
  padding: 100px 0 20px;
  color: #fff;
  letter-spacing:5px;
}
.section-filler p {
  font-size: 42px;
  line-height: 1.4;
  max-width: 570px;
  margin: 0 auto;
  color: #FFFFFF;
  font-weight: bold;
  margin-top: 30px;
}
.section-filler h6{
  margin-top: 15px;
  font-size: 20px;
}
.section-filler h4,h6{
  font-family: '微软雅黑';

}
.yellow-bg {
  background-color: #007ac3;
}
.section-words {
  text-align: center
}
.section-words .swiper-container {
  height: 300px
}
.section-words .swiper-slide {
  margin: 100px 0px;
  /* text-overflow: ellipsis; */
  /* overflow: hidden; */
}
.section-words .wrapper {
  height: 450px
}
.section-words h3 {
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-transform: translate3d(-20%, 0, 0px);
  -ms-transform: translate3d(-20%, 0, 0px);
  transform: translate3d(-20%, 0, 0px);
  -moz-transform: translate3d(-20%, 0, 0px);
  -o-transform: translat3d(-20%, 0, 0px);
  opacity: 0;
  font-size: 30px;
  text-transform: uppercase
}
.section-words p {
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-transform: translate3d(20%, 0, 0px);
  -ms-transform: translate3d(20%, 0, 0px);
  transform: translate3d(20%, 0, 0px);
  -moz-transform: translate3d(20%, 0, 0px);
  -o-transform: translat3d(20%, 0, 0px);
  opacity: 0;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 16px;
  width: 80%;
  margin: 10px auto;
  line-height: 35px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.section-words .swiper-slide-visible h3 {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px);
  opacity: 1
}
.section-words .swiper-slide-visible p {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px);
  opacity: 1
}
@media screen and (max-width: 1120px) {
  .section-words h3 {
    font-size: 30px;
    color: #fff;
  }
  .section-words p {
    font-size: 18px;
    text-align: center;
  }
}
@media screen and (max-width: 800px) {
  .section-words .swiper-container {
    height: 200px
  }
  .section-words h3 {
    margin-top: -24px;
    font-size: 25px
  }
  .section-words p {
    font-size: 14px
  }
}
@media screen and (max-width: 600px) {
  .section-words .swiper-container {
    height: 200px
  }
  .section-words h3 {
    margin-top: -41px;
    font-size: 20px
  }
  .section-words p {
    font-size: 16px
  }
}
.home .product {
  padding: 120px 0 0 0
}
.home .product .components {
  position: relative;
  width: 550px;
  margin: 0 auto;
  line-height: 0
}
.home .product .components .triangle {
  position: absolute;
  z-index: 2;
  width: 45.454%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .product.show .components .triangle {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
.home .product.show.delay .components .triangle {
  -webkit-transition: all 0.5s ease-out 0.5s;
  -moz-transition: all 0.5s ease-out 0.5s;
  -ms-transition: all 0.5s ease-out 0.5s;
  -o-transition: all 0.5s ease-out 0.5s;
  transition: all 0.5s ease-out 0.5s
}
.home .product .components .triangle.triangle-left {
  top: -10%;
  left: -10%
}
.home .product.show .components .triangle.triangle-left {
  top: 0;
  left: 0
}
.home .product .components .triangle.triangle-right {
  top: -10%;
  right: -10%
}
.home .product.show .components .triangle.triangle-right {
  top: 0;
  right: 0
}
.home .product .components .triangle.triangle-bottom {
  bottom: 26.363%;
  left: 27.272%
}
.home .product.show .components .triangle.triangle-bottom {
  bottom: 36.363%;
  left: 27.272%
}
.home .product .components .triangle img {
  width: 100%
}
.home .product .components .triangle h2 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0
}
.home .product .components .triangle.triangle-left h2 {
  background-image: url("../../../themes/template/res/img/layout/icon_about_search.svg");
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: center 100px
}
.home .product .components .triangle.triangle-right h2 {
  background-image: url("../../../themes/template/res/img/layout/icon_about_design.svg");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center 110px
}
.home .product .components .triangle.triangle-bottom h2 {
  background-image: url("../../../themes/template/res/img/layout/icon_about_development.svg");
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: center 110px
}
.home .product .components .triangle h2 span {
  display: block;
  position: absolute;
  width: 100%;
  padding: 0 30px;
  color: #282a30;
  line-height: 1.2em;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center
}
.home .product .components .triangle.triangle-left h2 span, .home .product .components .triangle.triangle-right h2 span {
  top: 40px
}
.home .product .components .triangle.triangle-bottom h2 span {
  bottom: 42px
}
.home .product .components .circle {
  position: absolute;
  top: -3%;
  left: 14.545%;
  width: 69.09%;
  height: 69.09%;
  border: 8px solid #dfdfe1;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%
}
.home .product .components .ratio {
  width: 100%
}
.home .product h4 {
  margin-top: -100px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .product.show h4 {
  padding-top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
.home .product.show.delay h4 {
  -webkit-transition: all 0.5s ease-out 0.5s;
  -moz-transition: all 0.5s ease-out 0.5s;
  -ms-transition: all 0.5s ease-out 0.5s;
  -o-transition: all 0.5s ease-out 0.5s;
  transition: all 0.5s ease-out 0.5s
}
.home .product p {
  margin: 0 0 -50px 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .product.show p {
  margin-bottom: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
.home .product.show.delay p {
  -webkit-transition: all 0.5s ease-out 0.5s;
  -moz-transition: all 0.5s ease-out 0.5s;
  -ms-transition: all 0.5s ease-out 0.5s;
  -o-transition: all 0.5s ease-out 0.5s;
  transition: all 0.5s ease-out 0.5s
}
@media screen and (max-width: 650px) {
  .home .product .components {
    width: 90%
  }
  .home .product .components .triangle h2 span {
    font-size: 16px
  }
  .home .product .components .triangle.triangle-left h2, .home .product .components .triangle.triangle-right h2, .home .product .components .triangle.triangle-bottom h2 {
    background-size: 50px
  }
  .home .product .components .triangle.triangle-left h2 {
    background-position: center 90px
  }
  .home .product .components .triangle.triangle-right h2 {
    background-position: center 95px
  }
  .home .product .components .triangle.triangle-bottom h2 {
    background-position: center 100px
  }
}
@media screen and (max-width: 550px) {
  .home .product .components .triangle.triangle-left h2 {
    background-position: center 32%
  }
  .home .product .components .triangle.triangle-right h2 {
    background-position: center 35%
  }
  .home .product .components .triangle.triangle-bottom h2 {
    background-position: center 70%
  }
  .home .product .components .triangle.triangle-left h2 span, .home .product .components .triangle.triangle-right h2 span {
    top: -15px;
    padding: 0
  }
  .home .product .components .triangle.triangle-bottom h2 span {
    bottom: -15px;
    padding: 0
  }
}
@media screen and (max-width: 550px) {
  .home .product .components .triangle.triangle-left h2 span, .home .product .components .triangle.triangle-right h2 span {
    top: -35px
  }
}
@media screen and (max-width: 400px) {
  .home .product .components .triangle.triangle-left h2, .home .product .components .triangle.triangle-right h2, .home .product .components .triangle.triangle-bottom h2 {
    background-size: 40px
  }
}
@media screen and (max-width: 350px) {
  .home .product .components .triangle.triangle-left h2, .home .product .components .triangle.triangle-right h2, .home .product .components .triangle.triangle-bottom h2 {
    background-size: 35px
  }
}
.home .facilities {
  position: relative;
  z-index: 3
}
.home .facilities h4 {
  position: relative;
  top: 50px;
  padding-top: 90px;
  padding-bottom: 25px;
  color: #484d52;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .facilities.show h4, .touch .home .facilities h4 {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
.home .facilities p {
  position: relative;
  top: 50px;
  color: #484d52;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .facilities.show p, .touch .home .facilities p {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
@media screen and (max-width: 600px) {
  .home .facilities.show h4, .touch .home .facilities h4 {
    padding-top: 60px
  }
}
.google-maps {
  position: relative;
  z-index: 3
}
.google-maps .arrow-mask {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%
}
.google-maps .arrow-mask.top {
  top: 0
}
.google-maps .arrow-mask.bottom {
  bottom: 0
}
.google-maps .map-wrapper {
  height: 800px
}
.google-maps .info-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.google-maps .info-wrapper.show {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.google-maps .info-wrapper .wrapper-outer {
  display: table;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 800px
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner {
  display: table-cell;
  position: relative;
  top: -30px;
  width: 100%;
  height: 800px;
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.75s ease-out 0.25s;
  -moz-transition: all 0.75s ease-out 0.25s;
  -ms-transition: all 0.75s ease-out 0.25s;
  -o-transition: all 0.75s ease-out 0.25s;
  transition: all 0.75s ease-out 0.25s
}
.google-maps .info-wrapper.show .wrapper-outer .wrapper-inner {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner h5 {
  padding: 0 0 30px 0;
  color: #fd0;
  font-size: 60px;
  font-weight: 200;
  text-transform: uppercase
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner address {
  color: #fd0;
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.3em
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner p {
  padding: 0 0 20px 0;
  color: #fd0;
  font-size: 20px
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner p.small {
  padding: 0 0 30px 0;
  font-size: 14px
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner a {
  color: #fd0;
  font-size: 20px
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner .close {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: 100%;
  cursor: pointer
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner .close span {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  background-image: url("../../../themes/template/res/img/layout/close_x.png");
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: opacity 0.25s ease-out 0s;
  -moz-transition: opacity 0.25s ease-out 0s;
  -ms-transition: opacity 0.25s ease-out 0s;
  -o-transition: opacity 0.25s ease-out 0s;
  transition: opacity 0.25s ease-out 0s
}
.google-maps .info-wrapper .wrapper-outer .wrapper-inner .close span:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.google-maps .info-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.google-maps .info-bg.show {
  visibility: visible;
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: alpha(opacity=90)
}
.google-maps .info-bg div {
  width: 1px;
  height: 100%;
  margin: 0 auto;
  background: #161b20;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.google-maps .info-bg.show div {
  width: 100%
}
.google-maps .open-tab {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 2;
  width: 100%;
  text-align: center
}
.google-maps .open-tab a {
  display: inline-block;
  padding: 0 0 40px 0;
  background-image: url("../../../themes/template/res/img/btn/icon-plus.png");
  background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center bottom
}
.google-maps .open-tab a span {
  color: #161b20;
  font-size: 14px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: opacity 0.5s ease-out 0s;
  -moz-transition: opacity 0.5s ease-out 0s;
  -ms-transition: opacity 0.5s ease-out 0s;
  -o-transition: opacity 0.5s ease-out 0s;
  transition: opacity 0.5s ease-out 0s
}
@media screen and (max-width: 1400px) {
  .section-filler h4 {
    padding-top: 65px
  }
  .home article h4, .hl-text-uppercase {
    font-size: 45px
  }
  .google-maps .map-wrapper, .google-maps .info-wrapper .wrapper-outer, .google-maps .info-wrapper .wrapper-outer .wrapper-inner {
    height: 700px
  }
}
@media screen and (max-width: 1000px) {
  .google-maps .map-wrapper, .google-maps .info-wrapper .wrapper-outer, .google-maps .info-wrapper .wrapper-outer .wrapper-inner {
    height: 600px
  }
}
@media screen and (max-width: 600px) {
  .google-maps .map-wrapper, .google-maps .info-wrapper .wrapper-outer, .google-maps .info-wrapper .wrapper-outer .wrapper-inner {
    height: 500px
  }
  .google-maps .info-wrapper .wrapper-outer .wrapper-inner .close {
    bottom: 30px
  }
}
.home .buzz-words {
  position: relative;
  z-index: 3;
  width: 100%
}
.home .buzz-words .wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden
}
.home .buzz-words.active .wrapper {
  width: 100%
}
.touch .home .buzz-words .wrapper {
  top: 0
}
.home .buzz-words .wrapper article {
  display: inline-block;
  position: absolute;
  bottom: 40%;
  width: 100%;
  height: 200px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.75s ease-out 0s;
  -moz-transition: all 0.75s ease-out 0s;
  -ms-transition: all 0.75s ease-out 0s;
  -o-transition: all 0.75s ease-out 0s;
  transition: all 0.75s ease-out 0s
}
.touch .home .buzz-words .wrapper article {
  position: relative;
  height: auto
}
.home .buzz-words .wrapper article .line {
  position: relative;
  font-size: 70px;
  white-space: nowrap;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.75s ease-out 0s;
  -moz-transition: all 0.75s ease-out 0s;
  -ms-transition: all 0.75s ease-out 0s;
  -o-transition: all 0.75s ease-out 0s;
  transition: all 0.75s ease-out 0s
}
.touch .home .buzz-words .wrapper article .line {
  font-size: 40px
}
.home .buzz-words .wrapper article .line.line-1 {
  right: 100%;
  color: #fd0;
  font-weight: 600;
  padding: 10px 0 0 0
}
.touch .home .buzz-words .wrapper article .line.line-1 {
  right: 0 !important;
  opacity: 1 !important
}
.home .buzz-words .wrapper article .line.line-2 {
  left: 100%;
  color: #acb1b6;
  font-weight: 200
}
.touch .home .buzz-words .wrapper article .line.line-2 {
  left: 0 !important;
  opacity: 1 !important
}
.home .buzz-words.hide-buzz-1 .wrapper article.buzz-1, .home .buzz-words.hide-buzz-2 .wrapper article.buzz-2, .home .buzz-words.hide-buzz-3 .wrapper article.buzz-3, .home .buzz-words.hide-buzz-4 .wrapper article.buzz-4 {
  bottom: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0)
}
.home .buzz-words.show-buzz-1 .wrapper article.buzz-1 .line.line-1, .home .buzz-words.show-buzz-2 .wrapper article.buzz-2 .line.line-1, .home .buzz-words.show-buzz-3 .wrapper article.buzz-3 .line.line-1, .home .buzz-words.show-buzz-4 .wrapper article.buzz-4 .line.line-1 {
  right: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.home .buzz-words.show-buzz-1 .wrapper article.buzz-1 .line.line-2, .home .buzz-words.show-buzz-2 .wrapper article.buzz-2 .line.line-2, .home .buzz-words.show-buzz-3 .wrapper article.buzz-3 .line.line-2, .home .buzz-words.show-buzz-4 .wrapper article.buzz-4 .line.line-2 {
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.touch .home .buzz-words {
  height: auto !important
}
.touch .home .buzz-words .wrapper, .touch .home .buzz-words.active .wrapper {
  position: relative;
  width: 100%;
  height: auto !important;
  padding: 100px 20px
}
.touch .home .buzz-words .wrapper article {
  display: block;
  position: static;
  height: auto;
  margin: 40px 0 0 0;
  opacity: 1 !important
}
.touch .home .buzz-words .wrapper article .line, .touch .home .buzz-words.show-buzz-1 .wrapper article.buzz-1 .line.line-1, .touch .home .buzz-words.show-buzz-2 .wrapper article.buzz-2 .line.line-1, .touch .home .buzz-words.show-buzz-3 .wrapper article.buzz-3 .line.line-1, .touch .home .buzz-words.show-buzz-4 .wrapper article.buzz-4 .line.line-1, .touch .home .buzz-words.show-buzz-1 .wrapper article.buzz-1 .line.line-2, .touch .home .buzz-words.show-buzz-2 .wrapper article.buzz-2 .line.line-2, .touch .home .buzz-words.show-buzz-3 .wrapper article.buzz-3 .line.line-2, .touch .home .buzz-words.show-buzz-4 .wrapper article.buzz-4 .line.line-2 {
  display: block;
  position: static;
  white-space: normal;
  opacity: 1 !important
}
@media screen and (max-width: 1450px) {
  .home .buzz-words .wrapper article .line {
    font-size: 60px
  }
}
@media screen and (max-width: 1250px) {
  .home .buzz-words .wrapper article .line {
    font-size: 50px
  }
}
@media screen and (max-width: 1050px) {
  .home .buzz-words .wrapper article .line {
    font-size: 40px
  }
}
@media screen and (max-width: 900px) {
  .home .buzz-words .wrapper article .line {
    font-size: 30px
  }
}
@media screen and (max-width: 650px) {
  .home .buzz-words .wrapper article .line {
    font-size: 20px !important
  }
}
@media screen and (max-width: 450px) {
  .home .buzz-words {
    height: auto !important
  }
  .home .buzz-words .wrapper, .home .buzz-words.active .wrapper, .touch .home .buzz-words .wrapper, .touch .home .buzz-words.active .wrapper {
    position: relative;
    width: 100%;
    height: auto !important;
    padding: 30px 20px 0 20px
  }
  .home .buzz-words .wrapper article {
    display: block;
    position: static;
    height: auto;
    margin: 40px 0 0 0;
    opacity: 1 !important
  }
  .home .buzz-words .wrapper article .line, .home .buzz-words.show-buzz-1 .wrapper article.buzz-1 .line.line-1, .home .buzz-words.show-buzz-2 .wrapper article.buzz-2 .line.line-1, .home .buzz-words.show-buzz-3 .wrapper article.buzz-3 .line.line-1, .home .buzz-words.show-buzz-4 .wrapper article.buzz-4 .line.line-1, .home .buzz-words.show-buzz-1 .wrapper article.buzz-1 .line.line-2, .home .buzz-words.show-buzz-2 .wrapper article.buzz-2 .line.line-2, .home .buzz-words.show-buzz-3 .wrapper article.buzz-3 .line.line-2, .home .buzz-words.show-buzz-4 .wrapper article.buzz-4 .line.line-2 {
    display: block;
    position: static;
    font-size: 18px !important;
    white-space: normal;
    opacity: 1 !important
  }
}
.home .portfolio {
  position: relative;
  width: 100%;
  font-size: 0;
  overflow: hidden;
  /*background: url('../../..//themes/template/res/video/cloudytime.jpg') no-repeat top center;*/
  min-height: 575px;
  background-size: cover;
}
.home .portfolio .ctn-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  max-width: none;
}
.home .portfolio .ctn-wrapper .ctn-box {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto
}
.home .portfolio .ctn-wrapper .ctn-box h4 {
  padding: 270px 0 50px 0;
  color: #fd0;
  font-size: 60px;
  font-weight: 200 !important;
  text-align: center;
  text-transform: uppercase
}
.home .portfolio .ctn-wrapper .ctn-box ul li {
  display: inline-block;
  position: relative;
  width: 33.333%;
  text-align: center;
  /*opacity: 0;*/
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0;
  -moz-transition: all 0.5s ease-out 0;
  -ms-transition: all 0.5s ease-out 0;
  -o-transition: all 0.5s ease-out 0;
  transition: all 0.5s ease-out 0;
}
.home .show .ctn-wrapper .ctn-box ul li {
  opacity: 1;
  transition: all 0.5s ease-out 0.25s;
}

.home .portfolXio.show .ctn-wrapper .ctn-box ul li, .touch .home .portfolio .ctn-wrapper .ctn-box ul li {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.home .portfolio .ctn-wrapper .ctn-box ul li a {
  display: inline-block;
  position: relative;
}
.home .portfolio .ctn-wrapper .ctn-box ul li a h2 {
  position: relative;
  top: 0;
  color: #FFFFFF;
  font-size: 45px;
  font-weight: 600;
  -webkit-transition: top 0.25s ease 0s;
  -moz-transition: top 0.25s ease 0s;
  -ms-transition: top 0.25s ease 0s;
  -o-transition: top 0.25s ease 0s;
  transition: top 0.25s ease 0s;
}
.home .portfolio .ctn-wrapper .ctn-box ul li a p {
  position: relative;
  top: 0;
  color: #fdfdff;
  font-size: 16px;
  max-width: 235px;
  margin: 0 auto;
  line-height: 1.4
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box ul li h2, .no-touch .home .portfolio .ctn-wrapper .ctn-box ul li p, .no-touch .home .portfolio .ctn-wrapper .ctn-box ul li .more {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box ul li a:hover .more {
  -webkit-transform: translate3d(0, -5px, 0px);
  -ms-transform: translate3d(0, -5px, 0px);
  transform: translate3d(0, -5px, 0px);
  -moz-transform: translate3d(0, -5px, 0px);
  -o-transform: translat3d(0, -5px, 0px);
  -webkit-text-shadow: 0 0 12px rgba(0, 0, 0, 0.71);
  -moz-text-shadow: 0 0 12px rgba(0, 0, 0, 0.71);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.71)
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box ul li a:hover h2 {
  -webkit-transform: translate3d(0, 15px, 0px);
  -ms-transform: translate3d(0, 15px, 0px);
  transform: translate3d(0, 15px, 0px);
  -moz-transform: translate3d(0, 15px, 0px);
  -o-transform: translat3d(0, 15px, 0px);
  -webkit-text-shadow: 0 0 12px rgba(0, 0, 0, 0.71);
  -moz-text-shadow: 0 0 12px rgba(0, 0, 0, 0.71);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.71);
  letter-spacing: 1px
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box ul li a:hover p {
  -webkit-transform: translate3d(0, 5px, 0px);
  -ms-transform: translate3d(0, 5px, 0px);
  transform: translate3d(0, 5px, 0px);
  -moz-transform: translate3d(0, 5px, 0px);
  -o-transform: translat3d(0, 5px, 0px)
}
.home .portfolio .ctn-wrapper .ctn-box a .more {
  /* position: absolute; */
  bottom: 0;
  /* left: 50%; */
  /* width: 50px; */
  height: 35px;
  line-height: 35px;
}
.home .portfolio .ctn-wrapper .ctn-box a .more .circle {
  position: absolute;
  bottom: -10px;
  left: -51px;
  width: 100px;
  height: 35px;
  background: #0198fd;
  cursor: pointer;
  border: 1px solid #0198fd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.home .portfolio .ctn-wrapper .ctn-box a .more .circle.black {
  background-color: #161b20
}
.home .portfolio .ctn-wrapper .ctn-box a .more .circle.black span {
  background-image: url("../../../themes/template/res/img/btn/icon-plus-yellow.png");
  background-size: 0 0;
  background-repeat: no-repeat;
  background-position: center center
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box a:hover .more .circle {
  bottom: -17px;
  left: -17px;
  width: 35px;
  height: 35px
}
.home .portfolio .ctn-wrapper .ctn-box a .more .circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  background-image: url("../../../themes/template/res/img/btn/icon-plus.png");
  background-size: 0 0;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box a:hover .more .circle span {
  background-size: 35px 35px;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}

#portfolio ,#portfolio .ctn-small {
  height: 300px
}
@media screen and (max-width: 1800px) {
  #portfolio .ctn-small {
    height: 260px
  }
}
@media screen and (max-width: 1550px) {
  #portfolio .ctn-small {
    height: 200px
  }
}
@media screen and (max-width: 1300px) {
  #portfolio .ctn-small {
    height: 180px
  }
}
@media screen and (max-width: 1150px) {
  #portfolio .ctn-small {
    height: 130px
  }
}
@media screen and (min-width: 1950px) {
  #portfolio .ctn-small {
    height: 410px
  }
}
#portfolio1 ,#portfolio1 .ctn-small {
  height: 300px
}
@media screen and (max-width: 1800px) {
  #portfolio1 .ctn-small {
    height: 260px
  }
}
@media screen and (max-width: 1550px) {
  #portfolio1 .ctn-small {
    height: 200px
  }
}
@media screen and (max-width: 1300px) {
  #portfolio1 .ctn-small {
    height: 180px
  }
}
@media screen and (max-width: 1150px) {
  #portfolio1 .ctn-small {
    height: 130px
  }
}
@media screen and (min-width: 1950px) {
  #portfolio1 .ctn-small {
    height: 410px
  }
}
.home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
  width: 320px;
  margin: 240px auto 0 auto;
  position: absolute;
  bottom: 11%;
  left: 50%;
  margin-left: -160px
}
.home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a {
  display: inline-block;
  position: relative;
  top: 20px;
  padding: 0 0 40px 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a:hover .circle {
  -webkit-transform: translate3d(0, -15px, 0px);
  -ms-transform: translate3d(0, -15px, 0px);
  transform: translate3d(0, -15px, 0px);
  -moz-transform: translate3d(0, -15px, 0px);
  -o-transform: translat3d(0, -15px, 0px)
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a img {
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a:hover img {
  transform: scale(1.1) translate(0, -4px)
}
.no-touch .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a:hover {
  -webkit-transform: translate3d(0, 7px, 0px);
  -ms-transform: translate3d(0, 7px, 0px);
  transform: translate3d(0, 7px, 0px);
  -moz-transform: translate3d(0, 7px, 0px);
  -o-transform: translat3d(0, 7px, 0px)
}
.home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a .column {
  display: inline-block;
  width: 100%
}
.home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a h2.column {
  margin: 12px auto 16px;
  display: block;
  vertical-align: top;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center
}
.motion-logo {
  margin: 0 auto;
  display: block
}
.home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a p.column {
  color: #161b20;
  font-size: 16px;
  text-align: center;
  font-weight: normal;
  padding: 0;
  display: block;
  margin: 0 auto
}
.home .portfolio .ctn-wrapper svg {
  position: absolute;
  top: -7%;
  left: -1%;
  z-index: 1;
  width: 102%
}
.touch .home .portfolio .ctn-wrapper svg {
  display: none
}
/*.home .portfolio .vr-img{*/
  /*position: relative;*/
  /*left: -1%;*/
  /*width: 102%*/
/*}*/
.home .portfolio video{
  position: relative;
  left: -1%;
  width: 102%;
}
.touch .home .portfolio video {
  display: none
}
.home .portfolio .touch-bg {
  display: none;
  left: -1%;
  width: 102%
}
.touch .home .portfolio .touch-bg {
  display: block
}
.home .portfolio .arrow-mask {
  position: absolute;
  left: 0
}
.topmask {
  position: relative;
  top: 1px
}
.home .portfolio .arrow-mask.top {
  top: 3px;
  left: -1%;
  z-index: 5;
  display: block;
  width: 102%;
}
.home .portfolio .arrow-mask.bottom {
  bottom: -1px;
  z-index: 3
}
@media screen and (max-width: 1850px) {
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    bottom: 7%
  }
}
@media screen and (max-width: 1000px) {
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    position: relative
  }
}
@media screen and (max-width: 1700px) {
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    bottom: 9%
  }
}
@media screen and (max-width: 1650px) {
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    bottom: 9%
  }
}
@media screen and (max-width: 1600px) {
  .home .portfolio .ctn-wrapper .ctn-box h4 {
    padding-top: 210px
  }
}
@media screen and (max-width: 1450px) {
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    bottom: 12%
  }
  .home .portfolio .ctn-wrapper .ctn-box ul li a h2 {
    margin-bottom: 15px;
    font-size: 30px
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    margin-top: 180px
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a {
    width: 100%;
    padding: 0 0 10px 0
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a:hover {
    padding: 0 0 30px 0
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a h2.column {
    width: 100%;
    background-position: center top;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8)
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a p.column {
    display: none
  }
}
@media screen and (max-width: 1350px) {
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    margin-top: 120px
  }
}
@media screen and (max-width: 1250px) {
  .home .portfolio .ctn-wrapper .ctn-box h4 {
    padding-top: 150px;
    font-size: 50px
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    margin-top: 100px
  }
}
@media screen and (max-width: 1150px) {
  .home .portfolio .ctn-wrapper .ctn-box ul li a {
    padding: 0 0 30px 0;
    color: #fff;
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    margin-top: 80px
  }
}
@media screen and (max-width: 1050px) {
  .home .portfolio .ctn-wrapper .ctn-box h4 {
    padding-top: 140px;
    font-size: 50px
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom {
    margin-top: 60px
  }
}
@media screen and (max-width: 1000px) {
  .section-filler {
    padding-bottom: 50px
  }
  .home .portfolio .ctn-wrapper {
    position: relative
  }
  .home .portfolio .ctn-wrapper .ctn-box h4 {
    color: #484d52;
    font-size: 60px;
    font-weight: 400 !important
  }
  .home .portfolio .ctn-wrapper .ctn-box h2 {
    color: #484d52;
    font-size: 36px;
    font-weight: bold !important;
    margin-bottom: 10px;
  }
  .home .portfolio .ctn-wrapper .ctn-box h3 {
    padding-bottom: 100px;
    font-size: 16px;
    font-weight: 400 !important;
    padding: 0;
    color: #484d52;
  }
  .button-plus.gray label {
    color: #161b20;
  }
  .home .portfolio .ctn-wrapper .ctn-box ul li.side, .home .portfolio .ctn-wrapper .ctn-box ul li.middle, .home .portfolio.show .ctn-wrapper .ctn-box ul li.side, .home .portfolio.show .ctn-wrapper .ctn-box ul li.middle {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 0 10px 0;
  }
  .home .portfolio .ctn-wrapper .ctn-box ul li a h2, .home .portfolio .ctn-wrapper .ctn-box ul li a p {
    color: #484d52;
    -webkit-text-shadow: 0 0 0 #000;
    -moz-text-shadow: 0 0 0 #000;
    -ms-text-shadow: 0 0 0 #000;
    -o-text-shadow: 0 0 0 #000;
    text-shadow: 0 0 0 #000
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a {
    padding: 0 0 10px 0;
    margin-bottom: 50px
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a h2.column {
    position: relative
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a p.column {
    display: block;
    width: auto;
    max-width: 235px;
    margin: 0 auto;
    padding: 5px 0 20px 0;
    color: #484d52;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    -webkit-text-shadow: 0 0 0 #000;
    -moz-text-shadow: 0 0 0 #000;
    -ms-text-shadow: 0 0 0 #000;
    -o-text-shadow: 0 0 0 #000;
    text-shadow: 0 0 0 #000
  }
}
@media screen and (max-width: 700px) {
  .home .portfolio .ctn-wrapper .ctn-box ul li {
    -webkit-transition: all 0s ease-out 0s;
    -moz-transition: all 0s ease-out 0s;
    -ms-transition: all 0s ease-out 0s;
    -o-transition: all 0s ease-out 0s;
    transition: all 0s ease-out 0s
  }
}
@media screen and (max-width: 450px) {
  .home .portfolio .ctn-wrapper .ctn-box h4 {
    font-size: 40px
  }
  .home .portfolio .ctn-wrapper .ctn-box.ctn-box-bottom a h2.column {
    background-size: 80% auto
  }
}
.home .team {
  padding: 0 0 100px 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none
}
.home .team h4 {
  position: relative;
  top: 50px;
  padding-top: 140px;
  padding-bottom: 25px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .team.show h4, .touch .home .team h4, .home .clients.show h4, .touch .home .clients h4 {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
/*.home .team p {*/
  /*position: relative;*/
  /*top: 50px;*/
  /*opacity: 0;*/
  /*filter: alpha(opacity=0);*/
  /*-ms-filter: alpha(opacity=0);*/
  /*-webkit-transition: all 0.5s ease-out 0s;*/
  /*-moz-transition: all 0.5s ease-out 0s;*/
  /*-ms-transition: all 0.5s ease-out 0s;*/
  /*-o-transition: all 0.5s ease-out 0s;*/
  /*transition: all 0.5s ease-out 0s*/
/*}*/
.home .team.show p, .touch .home .team p {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
@media screen and (max-width: 1400px) {
  .home .team.show h4, .touch .home .team h4 {
    padding-top: 30px;
  }
}
@media screen and (max-width: 600px) {
  .home .team.show h4, .touch .home .team h4 {
    padding-top: 0px;
  }
  .section-filler h4 {
    font-size: 28px;
    text-align: center;
  }
}
.home .team .name-container {
  width: 75%;
  margin: 50px auto 20px auto;
  text-align: center
}
.home .team .name-container span {
  display: inline-block;
  margin: 10px 10px 0 10px;
  color: #acb1b6;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: color 0.5s ease-out 0s;
  -moz-transition: color 0.5s ease-out 0s;
  -ms-transition: color 0.5s ease-out 0s;
  -o-transition: color 0.5s ease-out 0s;
  transition: color 0.5s ease-out 0s
}
.home .team .name-container span:hover {
  color: #161b20
}
.home .team .name-container span.active {
  color: #fd0
}
@media screen and (max-width: 699px) {
  .home .team .name-container {
    width: 100%;
    padding: 0 20px
  }
  .home .team .name-container span {
    margin: 10px 5px 0 5px
  }
}
@media screen and (max-width: 600px) {
  .home .team .name-container {
    margin: 50px auto 20px auto
  }
}
.home .team .swiper-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 60px
}
.home .team .swiper-container ul {
  left: 0
}
.home .team .swiper-container ul li {
  position: relative;
  overflow: hidden;
  list-style-type: none;
  font-size: 0
}
.home .team .swiper-container ul li h5 {
  position: relative;
  z-index: 2;
  padding: 16px 0 0px 0;
  text-align: center;
  white-space: nowrap
}
.home .team .swiper-container ul li h5 span {
  display: inline-block;
  font-size: 26px;
  font-weight: 200;
  text-transform: uppercase;
  vertical-align: top
}
.home .team .swiper-container ul li h5 span.first-name {
  color: #484d52
}
.no-touch .home .team .swiper-container ul li.opened h5 span.first-name, .no-touch .home .team .swiper-container ul li:hover h5 span.first-name, .home .team .swiper-container ul li.active h5 span.first-name {
  color: #0198fd;
}
.team-cross {
  font-size: inherit;
  color: #fdfdff;
  margin-right: 3px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease
}
li:hover .team-cross {
  color: #fff;
  opacity: 1
}
.home .team .swiper-container ul li h5 span.nick-name {
  max-width: 0;
  padding: 0 0 0 6px;
  color: #fff;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0)
}
.no-touch .home .team .swiper-container ul li.opened h5 span.nick-name, .no-touch .home .team .swiper-container ul li:hover h5 span.nick-name, .home .team .swiper-container ul li.active h5 span.nick-name {
  max-width: 98%;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease-out 0.15s;
  -moz-transition: all 0.5s ease-out 0.15s;
  -ms-transition: all 0.5s ease-out 0.15s;
  -o-transition: all 0.5s ease-out 0.15s;
  transition: all 0.5s ease-out 0.15s
}
.home .team .swiper-container ul li .img-wrapper {
  position: relative
}
.home .team .swiper-container ul li .img-wrapper img {
  width: 100%
}
.home .team .swiper-container ul li .img-wrapper img.freaky-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: opacity 0.5s ease 0s;
  -moz-transition: opacity 0.5s ease 0s;
  -ms-transition: opacity 0.5s ease 0s;
  -o-transition: opacity 0.5s ease 0s;
  transition: opacity 0.5s ease 0s
}
.no-touch .home .team .swiper-container ul li.opened .img-wrapper img.freaky-img, .no-touch .home .team .swiper-container ul li:hover .img-wrapper img.freaky-img, .home .team .swiper-container ul li.active .img-wrapper img.freaky-img {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.home .team .swiper-container ul li .img-mask {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%
}
.opened .team-cross {
  color: #fd0;
  opacity: 1
}
.home .team .swiper-container ul li .img-mask.img-mask-top {
  top: -20%;
  height: 20%;
  cursor: pointer;
  -webkit-transition: top 0.4s ease-out 0s;
  -moz-transition: top 0.4s ease-out 0s;
  -ms-transition: top 0.4s ease-out 0s;
  -o-transition: top 0.4s ease-out 0s;
  transition: top 0.4s ease-out 0s
}
.team-overlay {
  opacity: 0;
  visibility: hidden;
  height: 100%;
  -webkit-transform: translate3d(0, 100px, 0px);
  -ms-transform: translate3d(0, 100px, 0px);
  transform: translate3d(0, 100px, 0px);
  -moz-transform: translate3d(0, 100px, 0px);
  -o-transform: translat3d(0, 100px, 0px);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #007ac3;
  padding: 120px 25px 25px 25px;
}
.team-overlay p {
  color: #161b20;
  margin-bottom: 10px
}
.team-overlay .job {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 100;
  border-bottom: 1px solid #161b20;
  margin-bottom: 7px;
  padding-bottom: 4px
}
.team-overlay a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: inherit;
  margin-bottom: 3px
}
.team-overlay h2 {
  font-size: 20px
}
.opened .team-overlay {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px)
}
@media screen and (max-width: 900px) {
  .team-overlay {
    opacity: 0;
  }
}
.img-mask.img-mask-top {
  top: 0
}
.home .team {
  position: relative;
  background: #fff;
}
.home .team .swiper-container ul li .img-mask.img-mask-bottom {
  bottom: 0;
  height: 10%;
  overflow: hidden
}
.home .team .swiper-container ul li .img-mask.img-mask-top .arrow-mask {
  position: absolute;
  bottom: 0;
  height: 250%;
  width: 100%
}
.home .team .arrow-left {
  position: absolute;
  left: 20px;
  top: 57%;
  width: 40px;
  height: 40px;
  z-index: 8;
  opacity: 0.3;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease
}
.home .team .arrow-left:hover {
  opacity: 0.6
}
.home .team .arrow-right {
  position: absolute;
  right: 20px;
  top: 57%;
  width: 40px;
  height: 40px;
  z-index: 8;
  opacity: 0.3;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease
}
.home .team .arrow-right:hover {
  opacity: 0.6
}
.home .team .swiper-container ul li .img-mask.img-mask-bottom .arrow-mask {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  -webkit-transition: bottom 0.15s ease-out 0s;
  -moz-transition: bottom 0.15s ease-out 0s;
  -ms-transition: bottom 0.15s ease-out 0s;
  -o-transition: bottom 0.15s ease-out 0s;
  transition: bottom 0.15s ease-out 0s
}
.home .team .swiper-container ul li .img-mask.img-mask-bottom .img-mask-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  -webkit-transition: top 0.15s ease-out 0s;
  -moz-transition: top 0.15s ease-out 0s;
  -ms-transition: top 0.15s ease-out 0s;
  -o-transition: top 0.15s ease-out 0s;
  transition: top 0.15s ease-out 0s
}
.no-touch .home .team .swiper-container ul li.opened .img-mask.img-mask-bottom .img-mask-bg, .no-touch .home .team .swiper-container ul li:hover .img-mask.img-mask-bottom .img-mask-bg, .home .team .swiper-container ul li.active .img-mask.img-mask-bottom .img-mask-bg {
  top: 100%
}
.no-touch .home .team .swiper-container ul li.opened .img-mask.img-mask-bottom .arrow-mask, .no-touch .home .team .swiper-container ul li:hover .img-mask.img-mask-bottom .arrow-mask, .home .team .swiper-container ul li.active .img-mask.img-mask-bottom .arrow-mask {
  bottom: 0
}
.home .team .swiper-container ul li .img-mask.img-mask-top .more {
  position: absolute;
  bottom: 30%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: opacity 0.15s ease-out 0s;
  -moz-transition: opacity 0.15s ease-out 0s;
  -ms-transition: opacity 0.15s ease-out 0s;
  -o-transition: opacity 0.15s ease-out 0s;
  transition: opacity 0.15s ease-out 0s
}
.no-touch .home .team .swiper-container ul li.opened .img-mask.img-mask-top .more, .no-touch .home .team .swiper-container ul li:hover .img-mask.img-mask-top .more, .home .team .swiper-container ul li.active .img-mask.img-mask-top .more {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: opacity 0.5s ease-out 0.5s;
  -moz-transition: opacity 0.5s ease-out 0.5s;
  -ms-transition: opacity 0.5s ease-out 0.5s;
  -o-transition: opacity 0.5s ease-out 0.5s;
  transition: opacity 0.5s ease-out 0.5s
}
.home .team .swiper-container ul li .img-mask.img-mask-top .more .circle {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background: #fd0;
  cursor: pointer;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
  transition: all 0.25s ease-out 0s
}
.no-touch .home .team .swiper-container ul li.opened .more .circle, .no-touch .home .team .swiper-container ul li .img-mask.img-mask-top:hover .more .circle, .home .team .swiper-container ul li .img-mask.img-mask-top.active .more .circle {
  bottom: -17px;
  left: -17px;
  width: 35px;
  height: 35px
}
.home .team .swiper-container ul li .img-mask.img-mask-top .more .circle {
  bottom: -17px;
  left: -17px;
  width: 35px;
  height: 35px
}
.home .team .swiper-container ul li .img-mask.img-mask-top .more .circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  background-image: url("../../../themes/template/res/img/btn/icon-plus.png");
  background-size: 0 0;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
  transition: all 0.25s ease-out 0s;
  background-size: 35px 35px;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
@media screen and (max-width: 1500px) {
  .home .team .swiper-container ul li h5 span {
    font-size: 16px !important;
    margin-bottom: 3px
  }
}
@media screen and (max-width: 1300px) {
  .home .team .swiper-container ul li .img-mask.img-mask-top {
    top: -25%;
    height: 25%
  }
  .team-overlay .job, .team-overlay h2 {
    font-size: 18px
  }
  .team-overlay p {
    font-size: 14px
  }
}
@media screen and (max-width: 1200px) {
  .team-overlay {
    padding-top: 88px
  }
  .home .team .swiper-container ul li h5 {
    padding: 10px 0 0px 0
  }
  .home .team .swiper-container ul li h5 span {
    margin-bottom: 0px
  }
  .team-link .team-cross {
    display: none !important
  }
  .team-link h5 span {
    display: block !important
  }
  .home .team .swiper-container ul li h5 span.nick-name {
    position: relative;
    top: 5px;
    font-size: 12px
  }
  .home .team .swiper-container ul li .img-mask.img-mask-bottom {
    height: 0
  }
  .team-overlay .job, .team-overlay h2, .team-overlay a {
    font-size: 14px
  }
}
@media screen and (max-width: 1100px) {
  .home .team .swiper-container ul li .img-mask.img-mask-top {
    top: -27%;
    height: 27%
  }
}
@media screen and (max-width: 1000px) {
  .home .team .swiper-container ul li .img-mask.img-mask-top {
    top: -28%;
    height: 28%
  }
}
@media screen and (max-width: 979px) {
  .home .team .swiper-container ul li h5 span.nick-name {
    display: none
  }
  .home .team .swiper-container ul li .img-mask.img-mask-top {
    top: 0;
    z-index: 3;
    height: 100%
  }
  .home .team .swiper-container ul li .img-mask.img-mask-top a {
    display: block;
    height: 100%
  }
  .home .team .swiper-container ul li:hover h5 span.first-name {
    color: #161b20;
    font-weight: 200
  }
  .home .team .swiper-container ul li .img-mask.img-mask-top .arrow-mask, .home .team .swiper-container ul li .img-mask.img-mask-top .more, .home .team .swiper-container ul li .img-mask.img-mask-bottom {
    display: none
  }
}
.touch-only {
  display: none
}
@media screen and (min-width: 699px) {
  .yellow img {
    display: none
  }
  .yellow img.touch-only {
    display: block
  }
  .yellow .column {
    color: #fdfdff
  }
}
@media screen and (max-width: 699px) {
  #clients {
    background-image: none;
    background-color: #fff;
  }
  .home .team .swiper-container ul li .img-wrapper {
    margin-top: -50px
  }
  .team-overlay {
    padding: 25px;
    z-index: 10
  }
  .home .team .swiper-container ul li {
    border: none
  }
}
.home .team .swiper-container {
  z-index: 10
}
.home .team .swiper-container .control {
  position: absolute;
  top: 0;
  width: 12.5%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  border-top: 1px solid #fff
}
.home .team .swiper-container .control.control-left {
  left: 0
}
.home .team .swiper-container .control.control-right {
  right: 0
}
.home .team .swiper-container .control span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.75;
  filter: alpha(opacity=75);
  -ms-filter: alpha(opacity=75);
  -webkit-transition: opacity 0.5s ease-out 0s;
  -moz-transition: opacity 0.5s ease-out 0s;
  -ms-transition: opacity 0.5s ease-out 0s;
  -o-transition: opacity 0.5s ease-out 0s;
  transition: opacity 0.5s ease-out 0s
}
.no-touch .home .team .swiper-container .control:hover span {
  opacity: 0.25;
  filter: alpha(opacity=25);
  -ms-filter: alpha(opacity=25)
}
@media screen and (max-width: 699px) {
  .home .team .swiper-container .control {
    width: 25%
  }
  .touch .home .team .swiper-container .control {
    display: none
  }
}
.home .jobs {
  position: relative;
  top: 50px;
  padding: 0 0 50px 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.home .jobs.show, .touch .home .jobs {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.home .jobs p {
  padding: 0 0 30px 0;
  color: #161b20;
  font-size: 20px;
  text-align: center
}
.home .jobs ul li {
  padding: 0 0 10px 0;
  list-style-type: none;
  color: #161b20;
  font-size: 20px;
  font-weight: 600;
  text-align: center
}
.home .clients {
  overflow: hidden;
  position: relative
}
.home .clients .ctn-wrapper-large {
  z-index: 2;
  padding-bottom: 70px;
}
#bg-clients {
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1
}
.home .clients .arrow-mask {
  position: relative;
  top: -1px;
  left: -1%;
  width: 102%
}
.home .clients h4 {
  font-size: 60px;
  position: relative;
  width: 100%;
  padding: 70px 0 50px 0;
  color: #fdfdff;
  font-weight: 200;
  text-transform: uppercase;
  text-align: center
}
.home .clients .cooperate {
  color: #484d52;
  padding: 10px 0;
}
.home .clients ul li {
  display: inline-block;
  width: 25%;
  margin: 0;
  float: left;
  color: #484d52;
  text-align: center;
}
.home .clients ul {
  overflow: hidden;
  clear: both;
  padding: 20px 0 10px;
  width: 100%;
}
.home .clients ul li img {
  width: 80%;
  display: block;
  margin: 20px auto;
}
@media screen and (max-width: 600px) {
  .home .clients h4 {
    padding-top: 50px;
    font-size: 45px
  }
  .home .clients ul li {
    /* margin: 2% 1.5%; */
    width: 25%;
  }
}
@media screen and (max-width: 400px) {
  .home .clients ul.mobile {
    display: none;
  }
  .home .clients ul li {
    width: 50%;
    margin-bottom: 10px;
  }
}
.home.intro-run #hall {
  width: 98px !important;
  height: 0 !important
}
.home.intro-stop #hall {
  height: 98px
}
.magazine-wrapper {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transform: translate3d(0, -160px, 0px);
  -ms-transform: translate3d(0, -160px, 0px);
  transform: translate3d(0, -160px, 0px);
  -moz-transform: translate3d(0, -160px, 0px);
  -o-transform: translat3d(0, -160px, 0px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%
}
.magazine-wrapper.yellow {
  background-color: rgba(223, 223, 225, 0.95);
}
.magazine-wrapper h1 a {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.magazine-wrapper h1 a:hover {
  color: #fdfdff
}
.magazine-wrapper .arrow-mask {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease
}
.magazine-wrapper a {
  color: #484d52
}
.magazine-wrapper h1 {
  z-index: 110;
  -webkit-transform: translate3d(0, -100px, 0px);
  -ms-transform: translate3d(0, -100px, 0px);
  transform: translate3d(0, -100px, 0px);
  -moz-transform: translate3d(0, -100px, 0px);
  -o-transform: translat3d(0, -100px, 0px);
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  position: absolute;
  left: 0;
  top: 34px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #fff !important;
  font-weight: 300;
}
.magazine-wrapper h1 b {
  font-weight: 400
}
.loaded .magazine-wrapper, .loaded h1 {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px)
}
.scrolled {
  height: 50px
}
.scrolled h1 {
  top: 11px !important;
  font-size: 24px !important;
}
.scrolled .arrow-mask {
  height: 125px;
  -webkit-transform: scaleX(100) translate(0, -75px);
  -moz-transform: scaleX(100) translate(0, -75px);
  transform: scaleX(100) translate(0, -75px)
}
#logo-tag {
  font-weight: 400;
  letter-spacing: -1px
}
.page-magazine, .tag, .author {
  background-color: #161b20 !important
}
.page-magazine h2, .tag h2, .author h2 {
  font-size: 45px
}
.page-magazine h2 a, .tag h2 a, .author h2 a {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.page-magazine h3, .tag h3, .author h3 {
  font-size: 24px
}
.footer-posts {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.footer-posts .img {
  width: 100%;
  height: auto;
}
.footer-posts .img img {
  max-width: 100%;
  width: 100%
}
.footer-posts article {
  float: left;
  background-color: #161b20
}
.footer-posts article .bg {
  opacity: 1;
  margin-top: -10%;
}
.footer-posts .article-inner {
  display: block !important;
  height: 100%
}
/*.page-magazine .teaser-0, .tag .teaser-0, .author .teaser-0, .footer-posts .teaser-0 {*/
  /*background: url('../../../themes/template/res/img/layout/tetris.gif') center no-repeat*/
/*}*/
.page-magazine #main, .tag #main, .author #main, .footer-posts #main {
  font-size: 0;
  -webkit-box-shadow: 0 0 25px 4px #161b20;
  -moz-box-shadow: 0 0 25px 4px #161b20;
  -ms-box-shadow: 0 0 25px 4px #161b20;
  -o-box-shadow: 0 0 25px 4px #161b20;
  box-shadow: 0 0 25px 4px #161b20
}
.page-magazine article, .tag article, .author article, .footer-posts article {
  display: inline-block;
  position: relative;
  height: 535px;
  background-position: center;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.footer-posts article.play {
  width: 100%;
  overflow: hidden;
}
.footer-posts article.play h2 {
  text-align: center;
}
.page-magazine article .gradient, .tag article .gradient, .author article .gradient, .footer-posts article .gradient {
  width: 100%;
  height: 40%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background-image: -webkit-linear-gradient(bottom, rgba(22, 27, 32, 0.75) 10%, rgba(22, 27, 32, 0.42) 50%, rgba(22, 27, 32, 0));
  background-image: -moz-linear-gradient(bottom, rgba(22, 27, 32, 0.75) 10%, rgba(22, 27, 32, 0.42) 50%, rgba(22, 27, 32, 0));
  background-image: -o-linear-gradient(bottom, rgba(22, 27, 32, 0.75) 10%, rgba(22, 27, 32, 0.42) 50%, rgba(22, 27, 32, 0));
  background-image: -ms-linear-gradient(bottom, rgba(22, 27, 32, 0.75) 10%, rgba(22, 27, 32, 0.42) 50%, rgba(22, 27, 32, 0));
  background-image: linear-gradient(to top, rgba(22, 27, 32, 0.75) 10%, rgba(22, 27, 32, 0.42) 50%, rgba(22, 27, 32, 0))
}
.page-magazine article .article-inner, .tag article .article-inner, .author article .article-inner, .footer-posts article .article-inner {
  display: block;
  position: relative
}
.page-magazine article a, .page-magazine article h2, .tag article a, .tag article h2, .author article a, .author article h2, .footer-posts article a, .footer-posts article h2 {
  color: #fdfdff
}
.page-magazine article h3, .tag article h3, .author article h3, .footer-posts article h3 {
  font-weight: 300;
  margin-bottom: 15px;
}
.page-magazine article.text-black, .tag article.text-black, .author article.text-black, .footer-posts article.text-black {
  color: #161b20
}
.page-magazine article.text-black a, .page-magazine article.text-black h2, .tag article.text-black a, .tag article.text-black h2, .author article.text-black a, .author article.text-black h2, .footer-posts article.text-black a, .footer-posts article.text-black h2 {
  color: #161b20
}
.page-magazine article.text-white, .tag article.text-white, .author article.text-white, .footer-posts article.text-white {
  color: #fdfdff;
  -webkit-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -moz-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}
.page-magazine article.text-white a, .page-magazine article.text-white h2, .page-magazine article.text-white h3, .page-magazine article.text-white span, .tag article.text-white a, .tag article.text-white h2, .tag article.text-white h3, .tag article.text-white span, .author article.text-white a, .author article.text-white h2, .author article.text-white h3, .author article.text-white span, .footer-posts article.text-white a, .footer-posts article.text-white h2, .footer-posts article.text-white h3, .footer-posts article.text-white span {
  color: #fdfdff
}
.text-white .text .tight-new{
  color:#00aaff;
  font-weight:bold !important;
  font-size:60px !important;
  line-height: 60px;
}

.page-magazine article.style-yellow, .tag article.style-yellow, .author article.style-yellow, .footer-posts article.style-yellow {
  -webkit-text-shadow: 0 0 0 transparent;
  -moz-text-shadow: 0 0 0 transparent;
  text-shadow: 0 0 0 transparent
}
.page-magazine article .text, .tag article .text, .author article .text, .footer-posts article .text {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.page-magazine article:hover .text, .tag article:hover .text, .author article:hover .text, .footer-posts article:hover .text {
  -webkit-transform: translate3d(0, -5px, 0px);
  -ms-transform: translate3d(0, -5px, 0px);
  transform: translate3d(0, -5px, 0px);
  -moz-transform: translate3d(0, -5px, 0px);
  -o-transform: translat3d(0, -5px, 0px)
}
.page-magazine .teaser-0, .tag .teaser-0, .author .teaser-0, .footer-posts .teaser-0 {
  width: 100%
}
.page-magazine .teaser-0 .text, .tag .teaser-0 .text, .author .teaser-0 .text, .footer-posts .teaser-0 .text {
  width: 525px;
  position: absolute;
  left: 50%;
  margin-left: 40px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
  -moz-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
}
.page-magazine .teaser-0 .text.hidden, .tag .teaser-0 .text.hidden, .author .teaser-0 .text.hidden, .footer-posts .teaser-0 .text.hidden {
  -webkit-transform: translate3d(30px, 0, 0px);
  -ms-transform: translate3d(30px, 0, 0px);
  transform: translate3d(30px, 0, 0px);
  -moz-transform: translate3d(30px, 0, 0px);
  -o-transform: translat3d(30px, 0, 0px)
}
.page-magazine .teaser-0 .inner, .tag .teaser-0 .inner, .author .teaser-0 .inner, .footer-posts .teaser-0 .inner {
  margin-top: 10%
}
.page-magazine .teaser-0 .text-new{
  top:-30%;
}
.page-magazine .teaser-0:hover .date, .tag .teaser-0:hover .date, .author .teaser-0:hover .date, .footer-posts .teaser-0:hover .date {
  opacity: 1
}
.page-magazine .teaser-border.width100 .text, .tag .teaser-border.width100 .text, .author .teaser-border.width100 .text, .footer-posts .teaser-border.width100 .text {
  width: 100%;
  display: table-cell;
  vertical-align: bottom;
  padding-bottom: 40px
}
.page-magazine .teaser-border.width100 .text h2, .page-magazine .teaser-border.width100 .text h3, .tag .teaser-border.width100 .text h2, .tag .teaser-border.width100 .text h3, .author .teaser-border.width100 .text h2, .author .teaser-border.width100 .text h3, .footer-posts .teaser-border.width100 .text h2, .footer-posts .teaser-border.width100 .text h3 {
  max-width: 525px;
}
.page-magazine .teaser-border.width100 .text .inline_h2{
  max-width:665px;
}
.page-magazine .width100, .tag .width100, .author .width100, .footer-posts .width100 {
  width: 100%
}
.page-magazine .width100 .article-inner, .tag .width100 .article-inner, .author .width100 .article-inner, .footer-posts .width100 .article-inner {
  height: 100%
}
.page-magazine .width100 .inner, .tag .width100 .inner, .author .width100 .inner, .footer-posts .width100 .inner {
  width: 83%;
  padding: 0 10px;
  height: 100%;
  display: table
}
.page-magazine .width100 .text p, .tag .width100 .text p, .author .width100 .text p, .footer-posts .width100 .text p {
  font-size: 18px;
  margin-bottom: 30px;
  max-width: 640px
}
.page-magazine .width50, .tag .width50, .author .width50, .footer-posts .width50 {
  width: 50%;
  height: 270px;
  text-align: left
}
.page-magazine .width50 .article-inner, .tag .width50 .article-inner, .author .width50 .article-inner, .footer-posts .width50 .article-inner {
  display: inline
}
.page-magazine .width50 .inner, .tag .width50 .inner, .author .width50 .inner, .footer-posts .width50 .inner {
  width: 80%;
  height: 100%;
  display: table
}
.page-magazine .width50 h2, .tag .width50 h2, .author .width50 h2, .footer-posts .width50 h2 {
  font-size: 24px;
  margin-bottom: 0
}
.page-magazine .width50 h3, .tag .width50 h3, .author .width50 h3, .footer-posts .width50 h3 {
  display: none
}
.page-magazine .width50 .text, .tag .width50 .text, .author .width50 .text, .footer-posts .width50 .text {
  display: table-cell;
  vertical-align: bottom;
  padding-bottom: 50px
}
.page-magazine .width65, .tag .width65, .author .width65, .footer-posts .width65 {
  width: 68%;
  height: 380px;
  text-align: left
}
.page-magazine .width65 .article-inner, .tag .width65 .article-inner, .author .width65 .article-inner, .footer-posts .width65 .article-inner {
  display: inline
}
.page-magazine .width65 .inner, .tag .width65 .inner, .author .width65 .inner, .footer-posts .width65 .inner {
  width: 80%;
  height: 100%;
  display: table
}
.page-magazine .width65 h2, .tag .width65 h2, .author .width65 h2, .footer-posts .width65 h2 {
  font-size: 35px;
  margin-bottom: 12px
}
.page-magazine .width65 h3, .tag .width65 h3, .author .width65 h3, .footer-posts .width65 h3 {
  font-size: 16px
}
.page-magazine .width65 .text, .tag .width65 .text, .author .width65 .text, .footer-posts .width65 .text {
  display: table-cell;
  vertical-align: bottom;
  padding-bottom: 40px
}
.page-magazine .width33, .tag .width33, .author .width33, .footer-posts .width33 {
  width: 33.33333333334%;
  height: 270px;
  text-align: left
}
.page-magazine .width33 .article-inner, .tag .width33 .article-inner, .author .width33 .article-inner, .footer-posts .width33 .article-inner {
  display: inline
}
.page-magazine .width33 .inner, .tag .width33 .inner, .author .width33 .inner, .footer-posts .width33 .inner {
  width: 80%;
  height: 100%;
  display: table
}
.page-magazine .width33 h2, .tag .width33 h2, .author .width33 h2, .footer-posts .width33 h2 {
  font-size: 24px;
  margin-bottom: 0
}
.page-magazine .width33 h3, .tag .width33 h3, .author .width33 h3, .footer-posts .width33 h3 {
  display: none
}
.page-magazine .width33 .text, .tag .width33 .text, .author .width33 .text, .footer-posts .width33 .text {
  display: table-cell;
  vertical-align: bottom;
  padding-bottom: 50px
}
.page-magazine .width35, .tag .width35, .author .width35, .footer-posts .width35 {
  width: 32%;
  height: 380px;
  text-align: center
}
.page-magazine .width35 .article-inner, .tag .width35 .article-inner, .author .width35 .article-inner, .footer-posts .width35 .article-inner {
  display: inline
}
.page-magazine .width35 .inner, .tag .width35 .inner, .author .width35 .inner, .footer-posts .width35 .inner {
  width: 80%;
  margin-top: 100px
}
.page-magazine .width35 h2, .tag .width35 h2, .author .width35 h2, .footer-posts .width35 h2 {
  font-size: 35px;
  margin-bottom: 15px
}
.page-magazine .width35 h3, .tag .width35 h3, .author .width35 h3, .footer-posts .width35 h3 {
  font-size: 14px;
}
.date {
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.page-motion .article-inner {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.page-motion .article-inner h4 {
  color: #fff;
  text-align: center;
  font-size: 24px;
}
.page-motion .article-inner img {
  max-width: 100%;
  width: 100px;
  text-align: center;
  /* display: block; */
  margin-bottom: 10px;
}
.inner {
  margin: 0 auto;
  position: relative;
  z-index: 3
}
.teaser-border {
  border-top: 1px solid #161b20;
  width: 100%;
  display: inline-block;
  position: relative;
  height: 535px;
  background-position: center;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.teaser-border-right {
  border-right: 1px solid #161b20
}
.visual {
  position: absolute;
  left: 50%;
  margin-left: -570px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -o-transition-delay: 0.5s
}
.visual.hidden {
  -webkit-transform: translate3d(-30px, 0, 0px);
  -ms-transform: translate3d(-30px, 0, 0px);
  transform: translate3d(-30px, 0, 0px);
  -moz-transform: translate3d(-30px, 0, 0px);
  -o-transform: translat3d(-30px, 0, 0px)
}
.excerpt {
  font-size: 20px
}
.quote {
  background-image: none !important
}
.quote.style-white {
  background-color: #fdfdff
}
.quote.style-white .quote-overlay {
  background-color: #161b20;
  color: #fdfdff
}
.quote.style-yellow {
  background-color: rgb(0, 122, 195);
}
.quote.style-yellow h2 a {
  color: #fff;
  font-style: normal;
}
.quote.style-yellow .quote-author {
  color: #f5f5f5;
}
.quote.style-yellow .quote-overlay {
  background-color: #161b20;
  color: #fdfdff
}
.quote.style-gray {
  background-color: #484d52;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.quote.style-gray .quote-overlay {
  background-color: #161b20;
  color: #fdfdff
}
.quote.style-gray h2 a {
  color: #fd0
}
.quote .inner {
  margin-top: 0 !important;
  display: table;
  height: 100%
}
.quote .text {
  display: table-cell;
  vertical-align: middle
}
.quote h2 {
  line-height: 1.25;
  margin-bottom: 0;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.quote h2 a {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}

.quote h3 {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.quote:hover .quote-author {
  color:#161b20;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.quote:hover.style-gray {
  background-color: #161b20
}
.quote:hover.style-yellow h2 a, .quote:hover.style-yellow .quote-author,.quote:hover.style-yellow h3,.quote:hover.style-yellow h2 {
  color: #161b20 !important
}
.quote-author {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 22px;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.more-link {
  font-size: 14px;
  font-weight: bold
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  overflow: hidden;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important
}
.teaser-n .background {
  z-index: 1;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.teaser-0 .background {
  z-index: 1;
  -webkit-transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease
}
.teaser-0 .background.hidden {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15)
}
.half-blurred {
  z-index: 2;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
  -webkit-mask: linear-gradient(90deg, black 40%, transparent 90%)
}
.full-blurred {
  z-index: 2;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  filter: url(../../../themes/template/res/img/layout/blur.svg#blur);
  margin: -1px;
  padding: 1px;
  -webkit-transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease
}
.full-blurred.hidden {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15)
}
.anim1 .tags {
  opacity: 0;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.anim1 .background {
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
  transform: scale(1.03)
}
.anim1:hover .date, .anim1:active .date {
  color: #fd0
}
.anim1:hover .background, .anim1:active .background {
  opacity: 0.9;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.anim1:hover .tags, .anim1:active .tags {
  opacity: 1
}
.anim1:hover a, .anim1:hover h2, .anim1:hover p {
  color: #0198fd !important;
}
.scroll-down {
  position: absolute;
  bottom: 80px;
  left: 0;
  z-index: 30;
  width: 100%;
  text-align: center
}
.touch .scroll-down {
  bottom: 110px
}
.scroll-down span {
  padding: 10px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  -webkit-transition: opacity 0.3s ease-out 0s;
  -moz-transition: opacity 0.3s ease-out 0s;
  -ms-transition: opacity 0.3s ease-out 0s;
  -o-transition: opacity 0.3s ease-out 0s;
  transition: opacity 0.3s ease-out 0s
}
.scroll-down span:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
@media screen and (max-width: 1700px) {
  .scrolled .arrow-mask {
    -webkit-transform: scaleX(100) translate(0, -67px);
    -moz-transform: scaleX(100) translate(0, -67px);
    transform: scaleX(100) translate(0, -67px)
  }
}
@media screen and (max-width: 1450px) {
  .scrolled .arrow-mask {
    -webkit-transform: scaleX(100) translate(0, -62px);
    -moz-transform: scaleX(100) translate(0, -62px);
    transform: scaleX(100) translate(0, -62px)
  }
}
@media screen and (max-width: 1350px) {
  .scrolled .arrow-mask {
    -webkit-transform: scaleX(100) translate(0, -57px);
    -moz-transform: scaleX(100) translate(0, -57px);
    transform: scaleX(100) translate(0, -57px)
  }
}
@media screen and (max-width: 1500px) {
  .tags li {
    display: inline-block;
    margin: 0 8px 0 0;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px
  }
  .magazine-wrapper h1 {
    top: 27px;
    font-size: 30px;
  }
  .page-magazine .width35 h2, .tag .width35 h2, .author .width35 h2 {
    font-size: 30px
  }
  .page-magazine .width50 h2, .tag .width50 h2, .author .width50 h2 {
    font-size: 30px
  }
  .page-magazine .width50 h3, .tag .width50 h3, .author .width50 h3 {
    font-size: 18px
  }
}
@media screen and (max-width: 1250px) {
  .magazine-wrapper h1 {
    font-size: 20px;
  }
  .magazine-wrapper.scrolled {
    background-color: rgba(223, 223, 225, 0.95);
  }
  .page-magazine h2, .tag h2, .author h2 {
    font-size: 40px
  }
  .page-magazine h3, .tag h3, .author h3 {
    font-size: 20px
  }
  .page-magazine .visual, .tag .visual, .author .visual {
    width: 400px;
    margin-left: -420px;
    height: auto
  }
  .page-magazine .teaser-0 .text, .tag .teaser-0 .text, .author .teaser-0 .text {
    margin-left: 10px;
  }
}
.tags {
  list-style: none;
  text-align: center;
  width: 100%;
  font-size: 12px;
  letter-spacing: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(22, 27, 32, 0.7);
  padding: 10px 0;
  z-index: 10
}
.tags li {
  display: inline-block;
  margin: 0 8px 0 0;
  text-transform: uppercase
}
.tags li:first-child {
  margin-left: 0
}
.tags li+li:before {
  content: '-';
  color: #fdfdff;
  margin-right: 7px
}
.tags a {
  color: #fd0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.tags a:hover {
  color: #fdfdff !important
}
@media screen and (max-width: 1100px) {
  .page-magazine .teaser-0 .text, .tag .teaser-0 .text, .author .teaser-0 .text {
    width: 50%
  }
  .magazine-wrapper h1 {
    font-size: 20px;
  }
}
@media screen and (max-width: 900px) {
  .footer-posts article {
    width: 100% !important
  }
  .magazine-wrapper h1 {
    top: 3px;
    font-size: 30px
  }
  .page-magazine h2, .tag h2, .author h2 {
    font-size: 30px
  }
  .page-magazine .width50, .page-magazine .width65, .page-magazine .width35, .page-magazine .width33, .tag .width50, .tag .width65, .tag .width35, .tag .width33, .author .width50, .author .width65, .author .width35, .author .width33 {
    width: 100%;
    border-right: none
  }
  .page-magazine .width50 h2, .page-magazine .width35 h2, .page-magazine .width65 h2, .page-magazine .width33 h2, .tag .width50 h2, .tag .width35 h2, .tag .width65 h2, .tag .width33 h2, .author .width50 h2, .author .width35 h2, .author .width65 h2, .author .width33 h2 {
    font-size: 24px
  }
  .page-magazine .width50 h3, .page-magazine .width35 h3, .page-magazine .width65 h3, .page-magazine .width33 h3, .tag .width50 h3, .tag .width35 h3, .tag .width65 h3, .tag .width33 h3, .author .width50 h3, .author .width35 h3, .author .width65 h3, .author .width33 h3 {
    font-size: 18px
  }
  .page-magazine .teaser-0 .inner, .tag .teaser-0 .inner, .author .teaser-0 .inner {
    margin-top: 160px !important
  }
  .page-magazine .teaser-0 .text, .tag .teaser-0 .text, .author .teaser-0 .text {
    position: relative;
    float: left;
    margin-top: 0;
    width: 100%;
    margin-left: -50%
  }
  .page-magazine .visual, .tag .visual, .author .visual {
    position: relative;
    float: left;
    width: 300px;
    height: auto;
    clear: left;
    margin-left: -15px;
    left: 0;
    margin-top: 40px;
    display: none
  }
  .touch .scroll-down {
    bottom: 80px
  }
}
@media screen and (max-width: 500px) {
  .magazine-wrapper {
    background-color: #FD0;
    height: 50px
  }
  .magazine-wrapper h1 {
    top: 8px;
    font-size: 35px
  }
  .page-magazine .tags, .tag .tags, .author .tags {
    opacity: 0 !important;
    bottom: auto;
    top: 0
  }
  .page-magazine .tags li, .tag .tags li, .author .tags li {
    width: 100%;
    padding: 4px 0;
    margin-right: 0
  }
  .page-magazine .tags li:before, .tag .tags li:before, .author .tags li:before {
    display: none
  }
  .page-magazine .date, .tag .date, .author .date {
    opacity: 1
  }
  .page-magazine .teaser-0 .inner, .tag .teaser-0 .inner, .author .teaser-0 .inner {
    margin-top: 110px !important
  }
  .touch .scroll-down {
    display: none
  }
}
html.touch .date {
  opacity: 1 !important
}
@media screen and (max-width: 800px) {
  body.tag #blog-label, body.author #blog-label {
    left: 0;
    width: 100%;
    text-align: center;
    top: 50px
  }
  body.tag .magazine-wrapper, body.author .magazine-wrapper {
    height: 78px
  }
  body.tag .magazine-wrapper span, body.author .magazine-wrapper span {
    display: block;
    font-size: 24px;
    margin-top: 2px
  }
}
.single-magazine #main #single-header {
  height: 767.25px;
  position: relative;
  overflow: hidden;
  background-color: #161b20;
  text-align: center;
  -webkit-text-shadow: 0 2px 4px rgba(1, 1, 1, 0.35);
  -moz-text-shadow: 0 2px 4px rgba(1, 1, 1, 0.35);
  text-shadow: 0 2px 4px rgba(1, 1, 1, 0.35)
}
.single-magazine #main #single-header.hidden {
  -webkit-transform: translate3d(0, -80px, 0px);
  -ms-transform: translate3d(0, -80px, 0px);
  transform: translate3d(0, -80px, 0px);
  -moz-transform: translate3d(0, -80px, 0px);
  -o-transform: translat3d(0, -80px, 0px)
}
.single-magazine #main #single-header .tiao {
  z-index: 3;
  position: absolute;
  bottom: 0;
}
.single-magazine #main #single-header h1 {
  text-transform: none;
  color: #fdfdff;
  font-size: 45px;
  line-height: 1.13;
  letter-spacing: -1px;
  text-align: center;
}
.single-magazine #main #single-header h1 img {
  max-width: 100%;
  width: 20%;
}
.single-magazine #main #single-header h2 {
  font-weight: 300;
  color: #fdfdff;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 35px;
  text-align: center;
}
.single-magazine .date {
  color: #fdfdff
}
.single-magazine .bg {
  opacity: 0.5
}
.single-magazine .background {
  -webkit-transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease
}
.single-magazine .background.hidden {
  opacity: 1;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15)
}
.single-magazine .inner {
  width: 960px
}
.single-magazine .content {
  width: 800px;
  margin: 0 auto;
  text-align: left
}
.single-magazine h1 {
  color: #fd0;
  font-size: 70px;
  text-transform: uppercase;
  line-height: 0.9;
  margin-bottom: 15px
}
.single-magazine .excerpt {
  font-size: 20px;
  color: #fdfdff;
  margin-bottom: 30px
}
.single-magazine .tags {
  text-transform: uppercase
}
.single-magazine .tags a {
  color: #fd0;
  font-size: 16px;
  -webkit-transition: color 0.25s ease;
  -moz-transition: color 0.25s ease;
  -ms-transition: color 0.25s ease;
  -o-transition: color 0.25s ease;
  transition: color 0.25s ease
}
.single-magazine .tags a:hover {
  color: #fdfdff
}
.single-magazine footer {
  padding-top: 80px
}
.tags.fixed {
  position: fixed;
  top: 50px;
  display: block;
  bottom: auto
}
.tags.fixed.fadeout {
  -webkit-transform: translate3d(0, -150px, 0px);
  -ms-transform: translate3d(0, -150px, 0px);
  transform: translate3d(0, -150px, 0px);
  -moz-transform: translate3d(0, -150px, 0px);
  -o-transform: translat3d(0, -150px, 0px)
}
.table {
  display: table;
  width: 100%;
  height: 100%
}
.table-cell {
  display: table-cell;
  vertical-align: middle
}
.module {
  padding-top: 50px;
  width: 100%;
  overflow: hidden;
  background: #070816;
}
.subject {
  padding-top: 0;
  margin-top: -1px;
}
#article .module-first {
  padding-top: 100px;
}
.module.transition {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease
}
.module.spacer {
  margin-bottom: 0
}
.module h1, .module h2, .module h3, .module p {
  text-align: center;
  letter-spacing: -1px;
  line-height: 0.9;
  margin-bottom: 10px;
}
.module h2 {
  color: #f5f5f5;
}
.module h3 {
  color: #0198fd;
}
.module h1 .tiny, .module h2 .tiny {
  font-size: 26px;
  text-transform: none
}
.subject h3 {
  font-size: 26px;
  margin-bottom: 5%;
  line-height: 0;
  color: #fff;
  text-align: center;
  margin-top: -5%;
}
.module h4 {
  text-transform: uppercase;
  color: #484d52;
  margin-bottom: 15px;
  line-height: 1.3
}
.module p {
  color: #f5f5f5;
  line-height: 1.5;
  margin-bottom: 22px
}
.module .authorbox {
  text-transform: uppercase;
  font-size: 28px;
  position: relative;
  float: left;
  padding-bottom: 13px
}
.module .authorbox a {
  color: #161b20
}
.module .line {
  background-color: #fd0;
  height: 8px;
  width: 450%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1
}
.author-module {
  padding-top: 30px;
  margin-bottom: 5px
}
.more-articles {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 2;
  background-color: #fdfdff;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}
.more-articles:hover {
  letter-spacing: 0px;
  -webkit-transform: translate3d(-10px, 0, 0px);
  -ms-transform: translate3d(-10px, 0, 0px);
  transform: translate3d(-10px, 0, 0px);
  -moz-transform: translate3d(-10px, 0, 0px);
  -o-transform: translat3d(-10px, 0, 0px)
}
.rte.columns-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -webkit-column-rule: none;
  -moz-column-rule: none;
  -ms-column-rule: none;
  -o-column-rule: none;
  column-rule: none;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  -ms-column-gap: 40px;
  -o-column-gap: 40px;
  column-gap: 40px;
  -webkit-column-width: 360px;
  -moz-column-width: 360px;
  -ms-column-width: 360px;
  -o-column-width: 360px;
  column-width: 360px
}
.rte.width60 {
  width: 50%
}
.rte a {
  color: #747474;
  font-weight: 600;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-bottom: 2px solid #fdfdff
}
.rte a:hover {
  border-color: #fd0
}
.rte ol {
  counter-reset: li-counter;
  list-style-type: none;
  margin-bottom: 20px;
  line-height: 1.5
}
.rte ol li {
  color: #484d52;
  margin-bottom: 20px;
  position: relative;
  padding-left: 20px
}
.rte ol li:before {
  color: #484d52;
  content: counter(li-counter);
  counter-increment: li-counter;
  position: absolute;
  left: 0px;
  top: -3px;
  font-weight: bold;
  font-size: 21px
}
.rte ul {
  margin-bottom: 20px;
  padding-left: 20px;
  line-height: 1.5
}
.rte ul li {
  color: #484d52;
  margin-bottom: 20px;
  position: relative
}
.headline-module {
  margin-bottom: 0px
}
.headline-module .width120 {
  width: 160%;
  margin-left: -30%
}
.headline-module h2 {
  text-transform: none;
  text-align: center;
  font-size: 40px
}
article h2 a {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease
}
.quote-box {
  position: absolute;
  padding: 20px 25px;
  right: 0;
  top: 0;
  width: 40%;
}
.quote-box img {
  max-width: 100%;
}
.pic-module {
  background-size: cover;
  margin-top: 50px;
  padding-bottom: 20px
}
.text-white h2, .text-white h3, .text-white h4, .text-white p, .text-white a {
  color: #fdfdff
}

.text-black h2, .text-black h3, .text-black h4, .text-black p, .text-black a {
  color: #161b20
}
.contentWide {
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  clear: both;
}
.contentWide .width40 {
  float: right;
  width: 582px;
  margin-right: 137px;
  margin-top: 20px
}
.contentWide .width40_new{
  width:50%;
  float:left;
  margin-right:0;
  overflow:hidden;
}
.contentWide .lte {
    float: left;
}
#blog-back {
  font-size: 20px;
  color: #484d52;
  float: left;
  z-index: 160;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
  top: 14px;
  left: 12px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
#blog-back:hover {
  color: #fdfdff
}
#blog-label {
  font-size: 16px;
  color: #484d52;
  position: absolute;
  left: 50px;
  top: 17px;
  z-index: 120;
  text-transform: uppercase;
  font-weight: bold
}
.footer-item {
  border-top: 2px solid #dfdfe1;
  float: left;
  width: 100%;
  padding-bottom: 13px
}
.footer-item.gray-bg {
  background-color: #dfdfe1
}
.footer-item .text {
  font-size: 22px;
  font-weight: bold;
  color: #484d52;
  float: left;
  margin-top: 16px;
  margin-right: 15px;
  margin-left: 20px
}
.footer-item fig {
  color: #484d52;
  font-size: 24px;
  cursor: pointer;
  float: left;
  margin-left: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-bottom: 2px solid #fdfdff
}
.footer-item fig:hover {
  border-color: #fd0;
  -webkit-transform: translate3d(0, -2px, 0px);
  -ms-transform: translate3d(0, -2px, 0px);
  transform: translate3d(0, -2px, 0px);
  -moz-transform: translate3d(0, -2px, 0px);
  -o-transform: translat3d(0, -2px, 0px)
}
.footer-item .icon-mail {
  margin-top: 16px
}
.footer-item .icon-twitter {
  margin-top: 17px
}
.footer-item .icon-facebook {
  margin-top: 18px
}
.footer-item .icon-gplus {
  margin-top: 19px
}
.footer-item a {
  font-size: 22px;
  color: #484d52;
  margin: 19px 20px 0 0;
  float: left;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-bottom: 2px solid #fdfdff
}
.footer-item a:hover {
  border-color: #fd0;
  -webkit-transform: translate3d(0, -2px, 0px);
  -ms-transform: translate3d(0, -2px, 0px);
  transform: translate3d(0, -2px, 0px);
  -moz-transform: translate3d(0, -2px, 0px);
  -o-transform: translat3d(0, -2px, 0px)
}
.footer-item-top {
  border-top: 8px solid #fd0
}
.inv {
  opacity: 0;
  margin-top: 75px
}
progress {
  position: fixed;
  left: 0;
  top: 0px;
  width: 100%;
  height: 2px;
  z-index: 200;
  -webkit-transition: all 2.5s ease;
  -moz-transition: all 2.5s ease;
  -ms-transition: all 2.5s ease;
  -o-transition: all 2.5s ease;
  transition: all 2.5s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  color: #484d52
}
progress::-webkit-progress-bar {
  background-color: transparent
}
progress::-webkit-progress-value {
  background-color: #484d52
}
progress::-moz-progress-bar {
  background-color: #484d52
}
@media screen and (max-width: 1620px) {
  .contentWide .width40 {
    width: 50%;
    margin-right: 0
  }

}
.contentWide .text-pic {
  margin-right: 0;
  display: block;
  width: 100%;
    float:left;
}
@media screen and (max-width: 1300px) {
  .module h2 {
    font-size: 32px;
  }
  .module h4 {
    font-size: 20px
  }
  .headline-module h2 {
    font-size: 30px
  }
}
@media screen and (max-width: 1200px) {
  .module .contentInner {
    width: 92%;
    padding: 0
  }
  .module.author-module .contentInner {
    width: 100%;
    padding: 0 20px
  }
  #main #single-header {
    height: 430px
  }
  .single-magazine header {
    height: 560px
  }
  .single-magazine .inner {
    width: 92%
  }
  .single-magazine .content {
    width: 100%
  }
  .rte.width60 {
    width: 50%
  }
  .headline-module .width120 {
    width: 100%;
    margin-left: 0
  }
}
@media screen and (max-width: 800px) {
  .quote-box {
    width: 100%;
    position: relative;
    left: 0;
    top: 0
  }
  .rte.width60 {
    width: 100%
  }
  .quote-inner {
    width: 90%
  }
  .single-magazine h1 {
    font-size: 50px
  }
  .module h2 {
    font-size: 35px
  }
  .module h3 {
    font-size: 20px
  }
}
@media screen and (max-width: 650px) {
  .footer-item fig {
    margin-left: 25px
  }
  #main #single-header .tags li {
    width: 100%;
    padding: 5px 0;
    margin-right: 0
  }
  #main #single-header .tags li:before {
    display: none
  }
}
@media screen and (max-width: 600px) {
  .contentWide .text-pic {
    width: 100%
  }
  .video-container {
    padding-bottom: 100px;
  }
  .video-scroll img {
    display: none;
  }
  .contentWide .width40 {
    width: 92%;
    margin-right: 4%
  }
  .single-magazine #article h1 {
    font-size: 25px !important;
    line-height: 1.0
  }
  .single-magazine header {
    height: 450px
  }
  .single-magazine header h2 {
    font-size: 18px !important
  }
  .single-magazine .excerpt {
    font-size: 16px
  }
  .module h2 {
    font-size: 25px;
    line-height: 1
  }
  .module h3 {
    font-size: 16px;
    line-height: 1
  }
  .module .authorbox {
    font-size: 20px
  }
  .footer-item fig {
    margin-bottom: 8px;
    margin-left: 0
  }
  .footer-item fig:hover {
    margin-bottom: 6px
  }
  .footer-item .icon-mail {
    margin-top: 22px
  }
  .footer-item .icon-twitter {
    margin-top: 23px
  }
  .footer-item .icon-facebook {
    margin-top: 24px
  }
  .footer-item .icon-gplus {
    margin-top: 25px
  }
  .footer-item .text {
    font-size: 16px;
    width: 100%;
    margin-left: 0;
    margin-right: 0
  }
}
.cases {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
  background: #fff;
}
.cases * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}
.cases .case {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 50%;
  overflow: hidden;
  background: #161b20;
  border: 1px solid #fff;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -ms-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s
}
.cases .case:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #007ac3;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.75s ease;
  -moz-transition: opacity 0.75s ease;
  -ms-transition: opacity 0.75s ease;
  -o-transition: opacity 0.75s ease;
  transition: opacity 0.75s ease;
}
.cases .case:hover:before {
  opacity: 0.8
}
.cases .case.case-1 {
  border-top: 0px solid #fff;
  border-left: 0px solid #fff
}
.cases .case.case-2 {
  border-top: 0px solid #fff;
  border-right: 0px solid #fff
}
.cases .case.case-3 {
  border-bottom: 0px solid #fff;
  border-left: 0px solid #fff
}
.cases .case.case-4 {
  border-bottom: 0px solid #fff;
  border-right: 0px solid #fff
}
.cases .case.case-1, .cases .case.case-3 {
  top: -50%
}
.cases .case.case-2, .cases .case.case-4 {
  top: 50%
}
.loaded .cases .case.case-1, .loaded .cases .case.case-2, .loaded .cases .case.case-3, .loaded .cases .case.case-4 {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.cases .case .bg-img {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -ms-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s
}
.cases .case:hover .bg-img {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%
}
.cases .case.case-1 .bg-img {
  background-image: url(../../../themes/template/res/img/content/cases/case_1.jpg)
}
.cases .case.case-2 .bg-img {
  background-image: url(../../../themes/template/res/img/content/cases/case_2.jpg)
}
.cases .case.case-3 .bg-img {
  background-image: url(../../../themes/template/res/img/content/cases/case_3.jpg)
}
.cases .case.case-4 .bg-img {
  background-image: url(../../../themes/template/res/img/content/cases/case_4.jpg)
}
.cases .case .bg-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  -webkit-transition: opacity 0.4s ease-out 0s;
  -moz-transition: opacity 0.4s ease-out 0s;
  -ms-transition: opacity 0.4s ease-out 0s;
  -o-transition: opacity 0.4s ease-out 0s;
  transition: opacity 0.4s ease-out 0s
}
.cases .case:hover .bg-gradient {
  opacity: 0.2;
  filter: alpha(opacity=20);
  -ms-filter: alpha(opacity=20)
}
.cases .case h2 {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 20%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.loaded .cases .case h2 {
  bottom: 34%;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
}
@media screen and (max-width: 1000px) {
  .loaded .cases .case h2 {
    padding: 0 10%
  }
}
.loaded .cases .case:hover h2 {
  bottom: 22%
}
.loaded .cases .case:hover h2 span {
  color: #161b20
}
.cases .case:hover h2 span.top {
  top: -4px
}
.cases .case h2 span {
  position: relative;
  top: 0;
  display: block;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.cases .case h2 span.top {
  font-size: 20px;
  font-weight: 200;
  margin-bottom: 7px
}
.cases .case h2 span.bottom {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (max-width: 1350px) {
  .cases .case h2 span.bottom {
    font-size: 20px;
  }
}
@media screen and (max-width: 1150px) {
  .cases .case h2 span.top {
    font-size: 20px
  }
  .cases .case h2 span.bottom {
    font-size: 14px;
  }
}
@media screen and (max-width: 1000px) {
  .cases {
    overflow: visible;
  }
  .cases .case {
    width: 100%
  }
  .cases .case.case-1, .cases .case.case-2, .cases .case.case-3, .cases .case.case-4 {
    top: 0;
    border: none
  }
  .cases .case.case-1 {
    border-top: 8px solid #fff;
    border-bottom: 4px solid #fff;
    min-height: 300px;
  }
  .cases .case.case-2 {
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    min-height: 300px;
  }
  .cases .case.case-3 {
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    min-height: 300px;
  }
  .cases .case.case-4 {
    border-top: 4px solid #fff;
    border-bottom: 8px solid #fff;
    margin-bottom: 53px;
    min-height: 300px;
  }
}

  .cases .case.case-4,.cases .case.case-3,.cases .case.case-2,.cases .case.case-1{
    min-height: 300px;
  }
@media screen and (max-width: 600px) {
  .cases .case h2 span.top, .cases .case h2 span.bottom {
    -webkit-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -moz-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -ms-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -o-text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4)
  }
  .cases .case .bg-gradient {
    height: 80%;
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    background: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 70%, transparent 100%)
  }
}
.single-case {
  width: 100%;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}
.single-case .aixiu_erweima .lte{
  float:left;
  width: 36%;
  padding-right: 10px;
}
.single-case .aixiu_erweima .lte img{
  max-width:100%;
}
.single-case .aixiu_erweima .rte img{
  max-width:100%;
}
.single-case .aixiu_erweima .rte{
  float: left;
    padding-right: 10px;
  width: 36%;
}
.single-case .lte span,.single-case .rte span {
    display: block;
    color: #818999;
    width: 100%;
    min-height: 30px;
    font-size: 14px;
    text-align: center;
    padding: 10%;
}
.text-p {
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto 10px;
  line-height: 1.5
}
.single-case * {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.single-case .aixiu img {
  display: block;
  margin: 0 auto;
  width: 50%;
}
.single-case .ctn-wrapper-large {
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  -ms-box-sizing: initial;
  box-sizing: initial
}
.single-case .ctn-wrapper-large * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}
.single-case .column-50 {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
}
.single-case .column-50.column-right {
  right: 0;
  z-index: 2
}
.single-case .inverse .column-50.column-right {
  position: absolute
}
.single-case .column-50.column-right .splasher {
  position: relative;
  left: -10%;
  width: 120%;
}
.single-case .column-50.column-right .overlap {
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%
}
.single-case .column-50 .text-img {
  position: relative;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case .column-50.column-right .text-img {
  left: 100px
}
.single-case .column-50.column-left .text-img {
  left: -100px
}
.single-case .section-text-img.show .column-50.column-right .text-img, .single-case .section-text-img.show .column-50.column-left .text-img, .touch .single-case .section-text-img .column-50.column-right .text-img, .touch .single-case .section-text-img .column-50.column-left .text-img {
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .column-50.column-left {
  top: 0;
  left: 0;
  height: 100%;
}
.single-case .inverse .column-50.column-left {
  position: relative
}
.single-case .column-50 .wrapper-outer {
  display: table;
  width: 100%;
  height: 100%
}
.single-case .column-50 .wrapper-outer .wrapper-inner {
  display: table-cell;
  vertical-align: middle;
  padding-top: 20px;
  padding-left: 40%;
}
.section-bubbles {
  padding: 100px 0 0px;
  font-size: 0;
  text-align: center;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transform: translate3d(0, 10%, 0px);
  -ms-transform: translate3d(0, 10%, 0px);
  transform: translate3d(0, 10%, 0px);
  -moz-transform: translate3d(0, 10%, 0px);
  -o-transform: translat3d(0, 10%, 0px)
}
.section-bubbles .text {
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto 60px;
  line-height: 1.5;
  color: #484d52
}
.section-bubbles h3 {
  color: #484d52;
  margin-bottom: 20px
}
.anim-left {
  -webkit-transform: translate3d(-10%, 0, 0px);
  -ms-transform: translate3d(-10%, 0, 0px);
  transform: translate3d(-10%, 0, 0px);
  -moz-transform: translate3d(-10%, 0, 0px);
  -o-transform: translat3d(-10%, 0, 0px)
}
.anim-right {
  -webkit-transform: translate3d(10%, 0, 0px);
  -ms-transform: translate3d(10%, 0, 0px);
  transform: translate3d(10%, 0, 0px);
  -moz-transform: translate3d(10%, 0, 0px);
  -o-transform: translat3d(10%, 0, 0px)
}
.bubble {
  display: inline-block;
  text-align: center;
  position: relative;
  color: #161b20;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease
}
.bubble:before {
  content: '';
  width: 78%;
  height: 78%;
  background-color: #DFDFE1;
  position: absolute;
  left: 11%;
  top: 11%;
  z-index: -1;
  margin-top: -50px;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease
}
.bubble img {
  margin-bottom: 10px;
  max-width: 92%;
  height: auto
}
.bubble.width33 {
  width: 33%;
  padding: 0 20px
}
.bubble h3 {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease
}
.bubble:hover h3 {
  -webkit-transform: translate3d(0, 5px, 0px);
  -ms-transform: translate3d(0, 5px, 0px);
  transform: translate3d(0, 5px, 0px);
  -moz-transform: translate3d(0, 5px, 0px);
  -o-transform: translat3d(0, 5px, 0px)
}
.bubble:hover:before {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  background-color: #fd0
}
.section-bubbles.notext .bubble img {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  margin-top: 9%
}
.section-bubbles.notext .bubble:hover img {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
  transform: scale(1.04)
}
@media screen and (max-width: 1320px) {
  .section-text-img .content {
    padding-left: 15px !important;
    padding-right: 15px !important
  }
  .single-case .column-50 .wrapper-outer .wrapper-inner{
    padding-left:0;
  }
}
@media screen and (max-width: 1100px) {
  .section-bubbles.notext .bubble img {
    margin-top: 7%
  }
  .single-case .column-50.column-right .splasher, .single-case .column-50.column-right .overlap {
    width: 50%;
  }
  .bubble h3 {
    font-size: 18px !important
  }
}
@media screen and (max-width: 900px) {
  .section-bubbles.notext .bubble img {
    margin-top: 4%
  }
  .single-case .column-50.column-right, .single-case .column-50.column-left, .single-case .inverse .column-50.column-right, .single-case .inverse .column-50.column-left {
    position: relative;
    left: 0;
    width: 100%
  }
  .single-case .column-50.column-right .splasher, .single-case .column-50.column-right .overlap {
    left: 0;
    width: 100%
  }
  .single-case .column-50.column-right .splasher.overlap-left {
    left: 0;
    width: 110%;
    margin-left: -10%
  }
}
.single-case header {
  position: relative;
  font-size: 0;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transform: translate3d(0, -10%, 0px);
  -ms-transform: translate3d(0, -10%, 0px);
  transform: translate3d(0, -10%, 0px);
  -moz-transform: translate3d(0, -10%, 0px);
  -o-transform: translat3d(0, -10%, 0px);
  min-height: 100px;
}
.loaded .single-case header, .loaded .anim-left, .loaded .anim-right, .loaded .section-bubbles {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px)
}
.loaded .single-case {
  opacity: 1
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 20% 0 10% 10%;
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content .aixiu_body{
  padding: 20px 0;
  line-height:35px;
  text-align: left;
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content h1 {
  position: relative;
  left: -10%;
  margin-top: 50px;
  padding: 0 10% 12px 0;
  color: #161b20;
  font-size: 20px;
  font-weight: 200;
  text-transform: uppercase;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content .aixiu_logo{
  text-align: left;
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content h1 img {
  width: 57%;
  max-width: 100%;
}
.single-case .arrow-mask {
  position: absolute;
  ;
  bottom: 1px;
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content h3 {
  position: relative;
  left: -10%;
  padding: 0 10% 40px 0;
  color: #161b20;
  font-size: 50px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0.1s;
  -moz-transition: all 0.5s ease-out 0.1s;
  -ms-transition: all 0.5s ease-out 0.1s;
  -o-transition: all 0.5s ease-out 0.1s;
  transition: all 0.5s ease-out 0.1s
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content p {
  position: relative;
  left: -10%;
  margin-bottom: 6px;
  padding: 0 10% 0 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0.2s;
  -moz-transition: all 0.5s ease-out 0.2s;
  -ms-transition: all 0.5s ease-out 0.2s;
  -o-transition: all 0.5s ease-out 0.2s;
  transition: all 0.5s ease-out 0.2s;
}
.single-case header .column-50 .wrapper-outer .wrapper-inner .content p img {
  max-width: 100%;
  width: 30%;
  text-align: left;
}
.loaded .single-case header .column-50 .wrapper-outer .wrapper-inner .content h1, .touch .single-case header .column-50 .wrapper-outer .wrapper-inner .content h1, .loaded .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3, .touch .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3, .loaded .single-case header .column-50 .wrapper-outer .wrapper-inner .content p, .touch .single-case header .column-50 .wrapper-outer .wrapper-inner .content p {
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
@media screen and (max-width: 1400px) {
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3 {
    font-size: 30px
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content .aixiu_logo,.single-case header .column-50 .wrapper-outer .wrapper-inner .content .aixiu_body,.single-case header .column-50 .wrapper-outer .wrapper-inner .content .aixiu_erweima{
    padding-left: 10%;
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content {
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h1 {
    padding: 0 10% 15px 0;
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3 {
    padding: 0 10% 15px 0
  }
}
@media screen and (max-width: 1300px) {
  .bubble h3 {
    font-size: 22px
  }
}
@media screen and (max-width: 900px) {
  .single-case header .column-50.column-left {
    padding: 7% 0
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h1 {
    padding-top: 30px;
    padding-bottom: 25px;
    margin-top: 0
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3, .single-case header .column-50 .wrapper-outer .wrapper-inner .content p {
    padding-bottom: 25px
  }
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h1, .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3, .single-case header .column-50 .wrapper-outer .wrapper-inner .content p {
    padding-right: 0;
    text-align: center
  }
}
@media screen and (max-width: 450px) {
  .single-case header .column-50 .wrapper-outer .wrapper-inner .content h3 {
    font-size: 24px
  }
}
.single-case .section-tiles {
  margin: 150px 0 0 0
}
.single-case .section-tiles .column {
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case .section-tiles .column.column-left {
  top: -100px;
  width: 33.333%;
  padding: 3% 3% 0 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0)
}
.loaded .single-case .section-tiles .column.column-left, .touch .single-case .section-tiles .column.column-left {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-tiles .column.column-left h3 {
  padding: 0 0 40px 0;
  color: #484d52;
  font-size: 45px;
  font-weight: 600;
  text-align: left
}
.single-case .section-tiles .column.column-left p {
  padding: 0 0 20px 0;
  color: #484d52;
  font-size: 16px
}
.single-case .section-tiles .column.column-right {
  top: 100px;
  width: 66.666%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0)
}
.loaded .single-case .section-tiles .column.column-right, .touch .single-case .section-tiles .column.column-right {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-tiles .column.column-right .tile {
  display: inline-block;
  position: relative;
  width: 50%
}
.single-case .section-tiles .column.column-right .tile img {
  width: 100%;
  border: 1px solid #fff
}
.home .portfolio .ctn-wrapper .ctn_more {
  margin-top: 22%;
}
.single-case .section-tiles .column.column-right .tile.tile-2 img, .single-case .section-tiles .column.column-right .tile.tile-3 img {
  border-bottom: none
}
.single-case .section-tiles .column.column-right .tile.tile-4 img, .single-case .section-tiles .column.column-right .tile.tile-5 img {
  border: none
}
.single-case .section-tiles .column.column-right .tile.tile-color .ctn {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 64px
}
.single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center
}
.single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span {
  display: block;
  color: #161b20
}
.single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
  font-size: 55px;
  font-weight: 600
}
.single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.property {
  font-size: 18px;
  text-transform: uppercase
}
.single-case .section-tiles .column.column-right .control {
  display: none;
  position: absolute;
  top: 0;
  width: 34px;
  height: 100%;
  border: 1px solid #fff;
  background: #fd0;
  cursor: pointer
}
.single-case .section-tiles .column.column-right .control.left {
  left: -34px;
  border-right: 4px solid #fff;
  background-image: url("../../../themes/template/res/img/content/cases_single/icon_arrow_left_black.svg");
  background-size: 17px 30px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-case .section-tiles .column.column-right .control.right {
  right: -30px;
  border-left: 4px solid #fff;
  background-image: url("../../../themes/template/res/img/content/cases_single/icon_arrow_right_black.svg");
  background-size: 17px 30px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-case .section-tiles .column.column-right .pagination {
  display: none;
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 10px;
  text-align: center
}
.single-case .section-tiles .column.column-right .pagination span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #484d52;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -ms-filter: alpha(opacity=40);
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: opacity 0.5s ease-out 0s;
  -moz-transition: opacity 0.5s ease-out 0s;
  -ms-transition: opacity 0.5s ease-out 0s;
  -o-transition: opacity 0.5s ease-out 0s;
  transition: opacity 0.5s ease-out 0s
}
.single-case .section-tiles .column.column-right .pagination span.active, .single-case .section-tiles .column.column-right .pagination span:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
@media screen and (max-width: 1100px) {
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn {
    height: 45%;
    background-size: auto 40px
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
    font-size: 45px
  }
}
@media screen and (max-width: 900px) {
  .bubble {
    width: 250px !important
  }
  .single-case .section-tiles {
    margin: 70px 0 0 0
  }
  .single-case .section-tiles .column.column-left {
    display: block;
    width: 100%
  }
  .single-case .section-tiles .column.column-left h3 {
    padding: 0 0 40px 0;
    font-size: 32px;
    text-align: center
  }
  .single-case .section-tiles .column.column-left p {
    text-align: center
  }
  .single-case .section-tiles .column.column-right {
    width: 100%;
    margin: 50px 0 0 0
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn {
    height: 50%;
    background-size: auto 64px
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
    font-size: 55px
  }
}
@media screen and (max-width: 750px) {
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn {
    height: 45%;
    background-size: auto 40px
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
    font-size: 45px
  }
}
@media screen and (max-width: 650px) {
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn {
    height: 50%
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
    font-size: 35px
  }
}
@media screen and (max-width: 550px) {
  .single-case .section-tiles .column.column-right {
    margin-bottom: 50px;
    white-space: nowrap
  }
  .single-case .section-tiles .column.column-right .tile {
    display: inline-block;
    left: 0;
    width: 100%;
    -webkit-transition: left 0.5s ease-out 0s;
    -moz-transition: left 0.5s ease-out 0s;
    -ms-transition: left 0.5s ease-out 0s;
    -o-transition: left 0.5s ease-out 0s;
    transition: left 0.5s ease-out 0s
  }
  .single-case .section-tiles .column.column-right .tile.tile-img {
    display: none
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn {
    background-size: auto 64px
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt {
    top: 100%
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
    font-size: 55px
  }
  .single-case .section-tiles .column.column-right .control {
    display: block
  }
  .single-case .section-tiles .column.column-right .pagination {
    display: block
  }
}
@media screen and (max-width: 450px) {
  .single-case .section-tiles .column.column-right .control.left {
    left: -24px
  }
  .single-case .section-tiles .column.column-right .control.right {
    right: -24px
  }
}
@media screen and (max-width: 400px) {
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn {
    background-size: auto 40px
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt {
    top: 90%
  }
  .single-case .section-tiles .column.column-right .tile.tile-color .ctn .txt span.value {
    font-size: 45px
  }
}
.single-case .section-text {
  position: relative;
  top: 50px;
  margin: 0 0 50px 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case .section-text.show, .touch .single-case .section-text {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-text .txt {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: 0 auto;
  padding: 90px 0 40px 0;
  text-align: center
}
.single-case .section-text .txt p {
  padding: 0 0 35px 0;
  color: #fdfdff;
  font-size: 24px;
  font-weight: 200;
  line-height: 1.6
}
.single-case .section-text .mask-top {
  background: #484d52;
  width: 100%
}
.single-case .section-text .mask-top.mod {
  margin-top: -7%
}
.single-case .section-text-img .mask-top {
  background: #F4F4F5;
  width: 100%
}
.single-case .section-text .txt span {
  display: block;
  color: #fdfdff;
  font-size: 16px;
  font-weight: 600
}
.single-case .section-text .bg-color {
  background: #484d52
}
@media screen and (max-width: 500px) {
  .single-case .section-text .txt {
    padding-top: 50px
  }
  .single-case .section-text .txt p {
    font-size: 16px
  }
}
.single-case .section-text-img {
  position: relative;
  font-size: 0
}
.single-case .section-text-img .column-50 {
  z-index: 2
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content {
  position: relative;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case .section-text-img .column-50.column-left .wrapper-outer .wrapper-inner .content {
  padding: 10px 10% 10px 0
}
.single-case .section-text-img .column-50.column-left .wrapper-outer .wrapper-inner .content {
  left: -100px
}
.single-case .section-text-img .column-50.column-right .wrapper-outer .wrapper-inner .content {
  left: 100px
}
.single-case .section-text-img.show .column-50.column-left .wrapper-outer .wrapper-inner .content, .single-case .section-text-img.show .column-50.column-right .wrapper-outer .wrapper-inner .content, .touch .single-case .section-text-img .column-50.column-left .wrapper-outer .wrapper-inner .content, .touch .single-case .section-text-img .column-50.column-right .wrapper-outer .wrapper-inner .content {
  left: 0;
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content h2 {
  margin: 0;
  padding: 0 0 20px 0;
  color: #484d52;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content h2 .thin {
  font-weight: 200
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content p {
  color: #484d52;
  font-size: 16px;
  line-height: 1.4
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content a {
  display: inline-block;
  margin: 40px 0 0 0;
  padding: 0 0 0 35px;
  color: #484d52;
  font-size: 18px;
  font-weight: 600;
  -webkit-transition: padding 0.25s ease-out 0s;
  -moz-transition: padding 0.25s ease-out 0s;
  -ms-transition: padding 0.25s ease-out 0s;
  -o-transition: padding 0.25s ease-out 0s;
  transition: padding 0.25s ease-out 0s;
  background-image: url("../../../themes/template/res/img/content/cases_single/icon_download.png");
  background-size: 20px 19px;
  background-repeat: no-repeat;
  background-position: left center
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content a:hover {
  padding: 0 0 0 50px
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content a {
  margin: 0;
  color: inherit;
  font-size: inherit;
  padding: 0;
  background-image: none;
  -webkit-transition: color 0.4s ease;
  -moz-transition: color 0.4s ease;
  -ms-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease
}
.single-case .section-text-img .column-50 .wrapper-outer .wrapper-inner .content a:hover {
  color: #fd0;
  padding: 0
}
.single-case .section-text-img .bg-color {
  background: #f4f4f5
}
@media screen and (max-width: 900px) {
  .single-case .section-text-img .column-50.column-left .wrapper-outer .wrapper-inner .content, .single-case .section-text-img .column-50.column-right .wrapper-outer .wrapper-inner .content {
    padding: 30px 0
  }
}
.single-case .section-paragraph {
  position: relative;
  top: 50px;
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 100px auto;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case .section-paragraph .splasher {
  margin-bottom: 100px
}
.single-case .section-paragraph.show, .touch .single-case .section-paragraph {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-paragraph h2 {
  margin: 0;
  padding: 65px 0 30px 0;
  color: #484d52;
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase
}
.single-case .section-paragraph p {
  padding: 0 0 40px 0;
  color: #484d52;
  font-size: 16px;
  line-height: 1.4
}
.single-case .section-paragraph p.img-text {
  position: relative;
  padding: 20px 50px;
  font-size: 18px;
  font-style: italic;
  background: #dfdfe1
}
.single-case .section-paragraph p.img-text .txt {
  position: relative;
  z-index: 2
}
.single-case .section-paragraph p.img-text .bg-color {
  display: none;
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: #dfdfe1
}
.single-case .section-paragraph img {
  width: 100%
}
.count-to {
  display: inline !important
}
@media screen and (max-width: 700px) {
  .single-case .section-paragraph img {
    width: 120%;
    position: relative;
    left: -10%
  }
  .single-case .section-paragraph p.img-text {
    padding: 20px 0
  }
  .single-case .section-paragraph p.img-text .bg-color {
    display: block
  }
}
.single-case .section-swiper {
  position: relative;
  top: 50px;
  margin: 0 0 60px 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.single-case .section-swiper.show, .touch .single-case .section-swiper {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-swiper .swiper-container .swiper-wrapper {
  list-style-type: none
}
.single-case .section-swiper .swiper-container .swiper-wrapper .swiper-slide img {
  width: 100%
}
.single-case .section-swiper .pagination-container {
  position: absolute;
  z-index: 2;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center
}
.single-case .section-swiper .pagination-container .pagination {
  display: inline-block
}
.single-case .section-swiper .pagination-container .pagination .swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #fff;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: opacity 0.5s ease-out 0s;
  -moz-transition: opacity 0.5s ease-out 0s;
  -ms-transition: opacity 0.5s ease-out 0s;
  -o-transition: opacity 0.5s ease-out 0s;
  transition: opacity 0.5s ease-out 0s
}
.single-case .section-swiper .pagination-container .pagination .swiper-pagination-switch:hover, .single-case .section-swiper .pagination-container .pagination .swiper-pagination-switch.swiper-active-switch {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-case .section-swiper .control {
  position: absolute;
  top: 0;
  z-index: 3;
  width: 70px;
  height: 100%;
  background: #000;
  cursor: pointer;
  opacity: 0.25;
  filter: alpha(opacity=25);
  -ms-filter: alpha(opacity=25);
  -webkit-transition: opacity 0.5s ease-out 0s;
  -moz-transition: opacity 0.5s ease-out 0s;
  -ms-transition: opacity 0.5s ease-out 0s;
  -o-transition: opacity 0.5s ease-out 0s;
  transition: opacity 0.5s ease-out 0s
}
.no-touch .single-case .section-swiper .control:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50)
}
.single-case .section-swiper .control.left {
  left: 0;
  background-image: url("../../../themes/template/res/img/content/cases_single/icon_arrow_left.svg");
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-case .section-swiper .control.right {
  right: 0;
  background-image: url("../../../themes/template/res/img/content/cases_single/icon_arrow_right.svg");
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center
}
@media screen and (max-width: 600px) {
  .single-case .section-swiper .control {
    display: none
  }
  .single-case .section-swiper .pagination-container {
    bottom: 5px
  }
}
.page-kontakt {
  opacity: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease
}
.contact-wrapper {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transform: translate3d(0, -80px, 0px);
  -ms-transform: translate3d(0, -80px, 0px);
  transform: translate3d(0, -80px, 0px);
  -moz-transform: translate3d(0, -80px, 0px);
  -o-transform: translat3d(0, -80px, 0px)
}
.loaded.page-kontakt {
  opacity: 1
}
.loaded .contact-wrapper {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px)
}
.page-template-contact-php #main {
  text-align: center
}
.page-template-contact-php #main .contact-wrapper .contact a {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.page-template-contact-php #main .contact-wrapper .contact a:hover {
  color: #fd0
}
.page-template-contact-php #main .contact-wrapper {
  display: inline-block;
  padding: 0 30px 0 30px;
  text-align: center;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.page-template-contact-php #main .contact-wrapper h1 {
  position: relative;
  margin: 40px 0 30px 0 !important;
  color: #484d52;
  font-size: 70px;
  font-weight: 200;
  text-transform: uppercase
}
.page-template-contact-php #main .contact-wrapper address {
  margin: 0 0 30px 0;
  font-style: normal
}
.page-template-contact-php #main .contact-wrapper address span {
  display: block;
  color: #484d52;
  font-size: 20px;
  line-height: 1.5em
}
.page-template-contact-php #main .contact-wrapper address span.large {
  font-size: 30px;
  font-weight: 600
}
.page-template-contact-php #main .contact-wrapper .contact span, .page-template-contact-php #main .contact-wrapper .contact a {
  color: #484d52;
  font-size: 20px;
  line-height: 1.6em
}
.page-template-contact-php #main .contact-wrapper .contact span.left {
  display: inline-block;
  margin-right: 7px;
  font-weight: 600
}
.page-template-contact-php #main .contact-wrapper .touch {
  position: relative;
  display: inline-block;
  margin: 20px 0 0 0;
  padding: 15px 30px 14px 30px;
  color: #161b20;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  background: #fd0;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.page-template-contact-php #main .contact-wrapper .touch:hover {
  color: #fff;
  background: #484d52
}
@media screen and (max-width: 1100px) {
  .page-template-contact-php #main .contact-wrapper h1 {
    margin: 40px 0 100px 0
  }
}
@media screen and (max-width: 1000px) {
  .page-template-contact-php #main .contact-wrapper h1 {
    margin: 40px 0 170px 0
  }
}
@media screen and (max-width: 500px) {
  .page-template-contact-php #main .contact-wrapper h1 {
    font-size: 50px
  }
  .page-template-contact-php #main .contact-wrapper .contact span, .page-template-contact-php #main .contact-wrapper .contact a {
    font-size: 16px
  }
}
@media screen and (max-width: 400px) {
  .page-template-contact-php #main .contact-wrapper h1 {
    margin: 40px 0 80px 0
  }
  .page-template-contact-php #main .contact-wrapper {
    margin-bottom: 20px
  }
}
.page-template-page-imprint-php * {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}
.page-template-page-imprint-php .ctn-wrapper-large {
  position: relative;
  padding-bottom: 50px
}
.page-template-page-imprint-php .ctn-wrapper-large h1 {
  position: relative;
  margin: 60px 0;
  left: -5px;
  color: #484d52;
  font-size: 80px;
  font-weight: 200;
  text-transform: uppercase
}
.page-template-page-imprint-php .ctn-wrapper-large .block {
  display: inline-block;
  width: 50%
}
.page-template-page-imprint-php .ctn-wrapper-large .block.block-left {
  padding: 0 5% 0 0
}
.page-template-page-imprint-php .ctn-wrapper-large .block.block-right {
  padding: 0 0 5% 0
}
.page-template-page-imprint-php .ctn-wrapper-large .block article {
  margin: 0 0 50px 0
}
.page-template-page-imprint-php .ctn-wrapper-large .block a {
  color: inherit;
  font-weight: bold
}
.page-template-page-imprint-php .ctn-wrapper-large .block article h2 {
  margin: 0 0 15px 0;
  color: #484d52;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase
}
.page-template-page-imprint-php .ctn-wrapper-large .block article p {
  color: #484d52;
  font-size: 16px;
  word-break: break-word;
  line-height: 1.4
}
@media screen and (max-width: 1000px) {
  .page-template-page-imprint-php .ctn-wrapper-large .block {
    width: 100%
  }
}
@media screen and (max-width: 600px) {
  .page-template-page-imprint-php .ctn-wrapper-large h1 {
    font-size: 50px
  }
}
@media screen and (max-width: 350px) {
  .page-template-page-imprint-php .ctn-wrapper-large h1 {
    font-size: 40px
  }
}
.video-container {
  background-color: #070816;
  font-family: 'Whitney SSm A', 'Whitney SSm B';
  font-weight: 100;
  padding-top: 40px;
  position: relative;
  color: #fd0;
  text-transform: uppercase;
  text-align: center
}
.video-container .video-teaser {
  position: absolute;
  top: 40%;
  font-size: 20px;
  width: 100%
}
.video-container .video-teaser img {
  width: 30%;
}
@media (min-width: 500px) {
  .video-container .video-teaser {
    font-size: 35px
  }
}
.video-container .video-teaser p {
  padding: 0 5%
}
.video-container .video-teaser .motion-play-info {
  display: inline-block;
  width: 70%;
  line-height: 30px;
}
.motion-play-info h3{
  color:#00aaff;
}
.video-container .video-teaser .motion-play-info img {
  display: inline-block;
  vertical-align: middle;
  width: 5%
}
@media (max-width: 500px) {
  .video-container .video-teaser .motion-play-info img {
    width: 5%
  }
}
.video-container .video-teaser .motion-play-info a.video-click {
  display: inline-block;
  vertical-align: middle
}
.video-container .video-teaser .video-click {
  font-size: 16px;
  color: #e5e5e5
}
.video-container .video-scroll {
  position: absolute;
  bottom: 10%;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: white
}
.video-container img.arrow-mask {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0
}
.page-motion .swiper-container, .page-motion .swiper-slide {
  width: 100%;
  height: 310px
}
.page-motion .swiper-container .motion-video, .page-motion .swiper-slide .motion-video {
  width: 300px;
  height: 180px;
  margin: 0 auto
}
#motion-video img{
  width: 100%;
}
.page-motion .swiper-slide .more-clips {
  margin-top: 20px;
  margin-bottom: 80px
}
.page-motion .swiper-slide .more-clips a {
  font-weight: 100;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.page-motion .swiper-slide .more-clips a:hover {
  color: #fd0
}
.page-motion .swiper-slide .more-clips a:hover .st4, .page-motion .swiper-slide .more-clips a:hover .st5 {
  fill: #fd0
}
.page-motion .swiper-slide .more-clips .svg {
  width: 35px;
  height: 35px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle
}
.page-motion .swiper-slide .more-clips .svg path {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.page-motion .arrow-mask.top img {
  margin-top: -1px
}
.motion-info {
  background-color: #fd0
}
.motion-info .wrapper-inner-new {
  overflow: hidden;
  margin-bottom: 80px
}
.motion-info .wrapper-inner-new .grid2 {
  height: 10px
}
.motion-slider {
  position: relative
}
.motion-slider .arrow-left {
  cursor: pointer;
  position: absolute;
  left: 10%;
  top: 35%;
  margin-top: -15px;
  width: 40px;
  height: 50px;
  z-index: 9999;
  background: red;
}
@media (max-width: 500px) {
  .motion-slider .arrow-left {
    left: 10px
  }
}
@media (min-width: 1024px) {
  .motion-slider .arrow-left {
    left: 5%;
    top: 45%
  }
}
.motion-slider .arrow-right {
  cursor: pointer;
  position: absolute;
  right: 5%;
  top: 35%;
  margin-top: -15px;
  width: 40px;
  height: 50px;
  z-index: 9999;
}
@media (max-width: 500px) {
  .motion-slider .arrow-right {
    right: 10px
  }
}
@media (min-width: 1024px) {
  .motion-slider .arrow-right {
    right: 5%;
    top: 45%
  }
}
.loaded .video-container .video-teaser p {
  line-height: 1.3;
  opacity: 1
}
.page-sites .swiper-container img {
  width: 100%;
  max-width: 100%;
  display: inline-block;
}
@media (min-width: 768px) {
  .page-motion .swiper-container, .page-sites .swiper-container, .page-motion .swiper-slide, .page-sites .swiper-slide {
    width: 100%;
  }
  .page-motion .swiper-container .motion-video, .page-sites .swiper-container .motion-video, .page-motion .swiper-slide .motion-video, .page-sites .swiper-slide .motion-video {
    width: 100%;
    margin: 0 auto;
  }
  .motion-slider .arrow-left {
    top: 30%;
  }
  .motion-slider .arrow-right {
    top: 30%;
  }
  .page-motion .swiper-slide .more-clips {
    margin-top: 40px
  }
  .video-container {
    font-family: '微软雅黑';
    font-weight: 100;
    padding: 40px 0;
    position: relative;
    color: #e5e5e5;
    text-align: center;
  }
  .video-container .video-teaser .motion-play-info {
    max-width: 600px;
  }
  .video-container .video-teaser {
    position: absolute;
    top: 20%;
    font-size: 65px;
    width: 100%;
    z-index: 80
  }
  .video-container .video-teaser p {
    max-width: 550px;
    -webkit-transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -ms-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease;
    margin: 0 auto;
    line-height: 1.4;
    opacity: 0
  }
  .video-container .video-teaser .video-click {
    font-size: 16px;
    color: #e5e5e5;
  }
  .video-container img.arrow-mask {
    position: absolute;
    bottom: 6%;
  }
}
@media (min-width: 1024px) {
  .page-motion .swiper-container, .page-motion .swiper-slide {
    width: 850px;
    height: 600px
  }
  .page-motion .swiper-container .motion-video, .page-motion .swiper-slide .motion-video {
    width: 800px;
    height: 480px;
    margin: 0 auto
  }
  .video-container .video-scroll {
    position: absolute;
    bottom: 25%
  }
}
.page-xmas {
  opacity: 0;
  overflow-x: hidden;
  text-align: center;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease
}
.page-xmas #all {
  max-width: 100%;
  display: block;
  height: auto
}
.page-xmas #speaker {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1000;
  cursor: pointer;
  opacity: 0.8
}
.page-xmas .logo {
  display: block;
  margin: 0 auto 10px;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -ms-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
  transition: all 0.9s ease
}
.page-xmas .logo img {
  max-width: 90%;
  height: auto
}
.page-xmas .logo:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  margin: 10px auto;
  background-color: #fdfdff;
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -ms-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
  transition: all 0.9s ease
}
.page-xmas .arrow-mask {
  margin-top: -1px
}
.page-xmas.loaded {
  opacity: 1
}
.page-xmas.loaded .mid, .page-xmas.loaded .black .red, .page-xmas.loaded .black .yellow {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px)
}
.page-xmas.loaded .mid {
  opacity: 1
}
.page-xmas.loaded .logo {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px)
}
.page-xmas.loaded .logo:after {
  width: 220px
}
.page-xmas #header {
  display: none
}
.page-xmas .comic {
  cursor: help;
  font-family: "Comic Sans MS", "Comic Sans", 'Georgia';
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.page-xmas .comic:hover {
  letter-spacing: 3px
}
.page-xmas .black {
  background-color: #161b20;
  color: #fdfdff
}
.page-xmas .black .red {
  color: #ef293a;
  -webkit-transform: translate3d(-100px, 0, 0px);
  -ms-transform: translate3d(-100px, 0, 0px);
  transform: translate3d(-100px, 0, 0px);
  -moz-transform: translate3d(-100px, 0, 0px);
  -o-transform: translat3d(-100px, 0, 0px);
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease
}
.page-xmas .black .yellow {
  -webkit-transform: translate3d(100px, 0, 0px);
  -ms-transform: translate3d(100px, 0, 0px);
  transform: translate3d(100px, 0, 0px);
  -moz-transform: translate3d(100px, 0, 0px);
  -o-transform: translat3d(100px, 0, 0px);
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  color: #fd0
}
.page-xmas .black .white {
  font-size: 28px;
  font-weight: 600
}
.page-xmas .black .big * {
  display: inline-block;
  vertical-align: middle;
  line-height: normal
}
.page-xmas .mid {
  opacity: 0;
  -webkit-transform: translate3d(0, -50px, 0px);
  -ms-transform: translate3d(0, -50px, 0px);
  transform: translate3d(0, -50px, 0px);
  -moz-transform: translate3d(0, -50px, 0px);
  -o-transform: translat3d(0, -50px, 0px);
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  font-size: 21px;
  padding-top: 50px
}
.page-xmas .big {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 82px;
  margin-bottom: 40px;
  margin-top: 20px
}
.page-xmas .small {
  margin-bottom: 50px;
  font-size: 21px
}
.page-xmas .contentInner {
  font-size: 0;
  margin-bottom: 50px
}
.page-xmas .width33 {
  width: 28%;
  display: inline-block;
  margin: 0 2% 30px
}
.page-xmas .width33 p {
  font-size: 18px;
  float: left
}
.page-xmas #error-message {
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: #C50000;
  font-size: 13px;
  font-weight: bold
}
.page-xmas .shown {
  opacity: 1 !important;
  visibility: visible !important
}
.page-xmas .thx {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  visibility: hidden
}
.page-xmas #button .thx {
  width: 100%;
  position: absolute;
  left: 0;
  padding: 50px 0;
  top: 0;
  cursor: default;
  background-color: #fd0
}
.page-xmas #button .thx:hover {
  letter-spacing: 0px
}
.page-xmas .width50 {
  width: 43%;
  display: inline-block;
  margin: 0 2% 30px;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}
.page-xmas .width50 p {
  font-size: 22px;
  float: left;
  width: 100%;
  background-color: #fd0;
  color: #161b20;
  padding: 20px 0;
  font-weight: bold;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease
}
.page-xmas .width50:hover, .page-xmas .width50.selected {
  -webkit-box-shadow: 0 0 0 5px #fd0;
  -moz-box-shadow: 0 0 0 5px #fd0;
  -ms-box-shadow: 0 0 0 5px #fd0;
  -o-box-shadow: 0 0 0 5px #fd0;
  box-shadow: 0 0 0 5px #fd0;
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
  transform: scale(1.03)
}
.page-xmas .width50:hover .image-hover, .page-xmas .width50.selected .image-hover {
  opacity: 1
}
.page-xmas .width50:hover p, .page-xmas .width50.selected p {
  letter-spacing: 1px
}
.page-xmas .width50.selected p {
  background-color: #161b20;
  color: #fd0
}
.page-xmas #spacer {
  width: 100%;
  height: 200px
}
.page-xmas .image-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.page-xmas .image-normal {
  width: 100%;
  height: auto
}
.page-xmas fig {
  width: 33px;
  height: 33px;
  font-size: 30px;
  display: inline-block;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  border: 2px solid #fd0;
  margin-bottom: 10px;
  line-height: 32px
}
.page-xmas canvas {
  width: 100%;
  height: 100%
}
.page-xmas #offset {
  margin-top: -335px
}
.page-xmas #button {
  width: 100%;
  padding: 50px 0;
  font-size: 50px;
  background-color: #fd0;
  font-weight: bold;
  color: #161b20;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.page-xmas #button:hover {
  letter-spacing: 1px
}
.crappyshit {
  width: 100%;
  height: 80px;
  margin-bottom: 50px;
  background: url(../../../themes/template/res/img/xmas/lights.gif) repeat-x center
}
.snow-canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1
}
.xmas-content {
  position: relative;
  z-index: 2
}
#xmas {
  width: 700px;
  margin: 0 auto;
  color: #161b20
}
#xmas p {
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 3px
}
#xmas span {
  width: 100%;
  display: block;
  font-size: 16px;
  margin-bottom: 27px
}
#xmas input, #xmas select {
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 18px;
  width: 46%;
  margin: 0 2% 25px;
  outline: none;
  border: none;
  color: #161b20;
  font-weight: bold;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 0 0 3px #161b20;
  -moz-box-shadow: 0 0 0 3px #161b20;
  -ms-box-shadow: 0 0 0 3px #161b20;
  -o-box-shadow: 0 0 0 3px #161b20;
  box-shadow: 0 0 0 3px #161b20;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px 15px
}
#xmas input option[disabled], #xmas select option[disabled] {
  color: #dfdfe1
}
#xmas .error {
  -webkit-box-shadow: 0 0 0 3px #C50000;
  -moz-box-shadow: 0 0 0 3px #C50000;
  -ms-box-shadow: 0 0 0 3px #C50000;
  -o-box-shadow: 0 0 0 3px #C50000;
  box-shadow: 0 0 0 3px #C50000
}
.tooltipster-default {
  border-radius: 5px;
  border: 2px solid #000;
  background: #fd0;
  color: #161b20;
  font-weight: bold;
  font-family: "Comic Sans MS", "Comic Sans", cursive
}
.tooltipster-default .tooltipster-content {
  font-size: 14px;
  line-height: 16px;
  padding: 8px 10px;
  overflow: hidden
}
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {}
.tooltipster-icon {
  cursor: help;
  margin-left: 4px
}
.tooltipster-base {
  padding: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999999;
  pointer-events: none;
  width: auto;
  overflow: visible
}
.tooltipster-base .tooltipster-content {
  overflow: hidden
}
.tooltipster-arrow {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1
}
.tooltipster-arrow span, .tooltipster-arrow-border {
  display: block;
  width: 0;
  height: 0;
  position: absolute
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 8px solid;
  bottom: -7px
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-top: 9px solid;
  bottom: -7px
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid;
  top: -7px
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-bottom: 9px solid;
  top: -7px
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
  left: 0;
  right: 0;
  margin: 0 auto
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
  left: 6px
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  left: 5px
}
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
  right: 6px
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
  right: 5px
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 8px solid;
  top: 50%;
  margin-top: -7px;
  right: -7px
}
.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 9px solid;
  margin-top: -8px
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 8px solid;
  top: 50%;
  margin-top: -7px;
  left: -7px
}
.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-right: 9px solid;
  margin-top: -8px
}
.tooltipster-fade {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -ms-transition-property: opacity;
  transition-property: opacity
}
.tooltipster-fade-show {
  opacity: 1
}
.tooltipster-grow {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-backface-visibility: hidden
}
.tooltipster-grow-show {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15)
}
.tooltipster-swing {
  opacity: 0;
  -webkit-transform: rotateZ(4deg);
  -moz-transform: rotateZ(4deg);
  -o-transform: rotateZ(4deg);
  -ms-transform: rotateZ(4deg);
  transform: rotateZ(4deg);
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform
}
.tooltipster-swing-show {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4)
}
.tooltipster-fall {
  top: 0;
  -webkit-transition-property: top;
  -moz-transition-property: top;
  -o-transition-property: top;
  -ms-transition-property: top;
  transition-property: top;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15)
}
.tooltipster-fall.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  top: 0px !important;
  opacity: 0
}
.tooltipster-slide {
  left: -40px;
  -webkit-transition-property: left;
  -moz-transition-property: left;
  -o-transition-property: left;
  -ms-transition-property: left;
  transition-property: left;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15)
}
.tooltipster-slide.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  left: 0px !important;
  opacity: 0
}
.tooltipster-content-changing {
  opacity: 0.5;
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1)
}
@media screen and (max-width: 1300px) {
  .page-xmas .contentInner {
    width: 96%;
    padding: 0 2%
  }
}
@media screen and (max-width: 1200px) {
  .page-xmas #offset {
    margin-top: -295px
  }
  .page-xmas .white {
    display: block !important;
    margin-top: 20px
  }
}
@media screen and (max-width: 1050px) {
  .page-xmas .width50 p {
    font-size: 16px
  }
}
@media screen and (max-width: 750px) {
  .page-xmas .width50 {
    width: 63%
  }
  .page-xmas .width33 {
    width: 93%
  }
  .page-xmas .big {
    font-size: 36px
  }
  .page-xmas #button {
    font-size: 30px
  }
  .page-xmas .small {
    font-size: 16px
  }
  .page-xmas .white {
    font-size: 18px;
    margin-top: 6px
  }
  .page-xmas #offset {
    margin-top: -275px
  }
  #xmas {
    width: 100%
  }
  #xmas input, #xmas select {
    width: 90% !important
  }
}
@media screen and (max-width: 500px) {
  .page-xmas #spacer {
    display: none
  }
  .page-xmas #offset {
    margin-top: 20px
  }
}
.subsite-intro {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  -webkit-transform: translate3d(0, -100px, 0px);
  -ms-transform: translate3d(0, -100px, 0px);
  transform: translate3d(0, -100px, 0px);
  -moz-transform: translate3d(0, -100px, 0px);
  -o-transform: translat3d(0, -100px, 0px);
  overflow: hidden;
}
.subsite-content {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0
}
.subsite-content > div .grid6 {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transition-delay: 250ms;
  transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  -webkit-transform: translate3d(80px, 0, 0px);
  -ms-transform: translate3d(80px, 0, 0px);
  transform: translate3d(80px, 0, 0px);
  -moz-transform: translate3d(80px, 0, 0px);
  -o-transform: translat3d(80px, 0, 0px)
}
.subsite-content > div .grid6.clear-first {
  -webkit-transform: translate(-80px, 0) !important;
  -moz-transform: translate(-80px, 0) !important;
  -ms-transform: translate(-80px, 0) !important;
  transform: translate(-80px, 0) !important
}
.subsite-content > div .wrapper-inner-new, .subsite-content > div .wrapper-cubes {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transition-delay: 250ms;
  transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  -webkit-transform: translate3d(0, 100px, 0px);
  -ms-transform: translate3d(0, 100px, 0px);
  transform: translate3d(0, 100px, 0px);
  -moz-transform: translate3d(0, 100px, 0px);
  -o-transform: translat3d(0, 100px, 0px);
  opacity: 0;
  margin-top: 0;
}
.subsite-content > div.visible .wrapper-inner-new, .subsite-content > div.visible .wrapper-cubes {
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px);
  opacity: 1;
}
 .subsite-content > div.visible .wrapper-cubes{
   margin-left:10px;
   overflow: hidden;
   /*background: url('../../..//themes/template/res/img/layout/bg_kuang.png') no-repeat center center;*/
   background-size: 100% 100%;
   padding:10px 30px;
 }
.subsite-content > div.visible .grid6 {
  -webkit-transform: translate(0, 0) !important;
  -moz-transform: translate(0, 0) !important;
  -ms-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important
}
.loaded .subsite-intro {
  /*background: #000 url('../../..//themes/template/res/img/layout/splasher.jpg') no-repeat center bottom;*/
  background-size: 100% auto;
  -webkit-transform: translate3d(0, 0, 0px);
  -ms-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
  -moz-transform: translate3d(0, 0, 0px);
  -o-transform: translat3d(0, 0, 0px);
}
.loaded .subsite-content {
  opacity: 1
}
.loaded .subsite-content-1{
  padding-bottom:40px;
}

.wrapper-outer-new {
  overflow: hidden
}
.subsite-content {
  position: relative;
  background: #070816;
}
.subsite-content img.arrowDown {
  width: 100%;
  max-width: 100%;
  z-index: 8;
}
.subsite-wrapper a, .wrapper-outer-new.process a, .wrapper-outer-new a {
  font-weight: bold;
  color: #484d52;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}
.subsite-wrapper a:hover, .wrapper-outer-new.process a:hover, .wrapper-outer-new a:hover {
  color: #fd0
}
.subsite-wrapper p, .wrapper-outer-new p {
  line-height: 23px
}
.wrapper-inner-new {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  color: #f5f5f5;
  overflow: hidden;
  clear: both;
}
.wrapper-inner-new h3 {
  font-weight: 100;
  font-size: 35px;
  color: #fff;
  margin-bottom: 10px;
  /*padding-top:30px;*/
}
.sys_5 .wrapper-inner-new h3{
  padding-top:100px;
}
.wrapper-inner-new p {
  max-width: 600px;
  margin: 0 auto
}
.motion-slider h3 {
  color: #0198fd;
}
.search-sea-content span {
  color: #161b20
}
.cube .face.front .wrapper-inner .vr {
  width: 261px;
  height: 322px;
  overflow:hidden;
  position: relative;
}
.cube .face.front .wrapper-inner .vr img {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  /*height: 106%;*/
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -ms-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s
}
.cube p {
  color: #fff;
  text-align: center;
  font-size: 23px;
  line-height: 21px;
  letter-spacing: 0.3px;
  font-weight: 100;
  padding: 50% 15px;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 2;
}
.cube .bg-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 261px;
  height: 322px;
  background: #000;
  opacity: 0.2;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  -webkit-transition: all 0.75s ease-out 0s;
  -moz-transition: all 0.75s ease-out 0s;
  -ms-transition: all 0.75s ease-out 0s;
  -o-transition: all 0.75s ease-out 0s;
  transition: all 0.75s ease-out 0s
}
.cube:hover .bg-gradient {
  opacity: 0.8;
  filter: alpha(opacity=20);
  -ms-filter: alpha(opacity=20);
  background: #007ac3;
}
.cube:hover p {
  font-weight:700;
  color:#fff;
  margin-top:50px;
}
.cube:hover .face.front .wrapper-inner .vr img {
  width:100%;
  height:100%;
  top: 0%;
  left: 0%;
}
.cube p a {
  color: #acb1b6
}
.cube .face.top {
  text-align: center
}
.cube .face.top .svg {
  width: 28px;
  height: 30px;
  margin: 0 auto;
  display: block;
  margin-top: 10px
}
.cube .face.top .svg path {
  fill: #fdfdff
}
.cube .face.top h3 {
  font-size: 24px;
  color: #fd0;
  margin-top: 10px
}
.cube .face.front .wrapper-inner {
  padding-top: 14px
}
.cube .face.front .wrapper-inner .svg {
  width: 55px;
  height: 50px;
  display: block;
  margin: 0 auto
}
.cube .face.front .wrapper-inner .svg path {
  fill: #161b20
}
.cube .face.front .wrapper-inner img {
  width: 55px;
  display: block;
  margin: 0 auto
}

.cube .face.front .wrapper-inner h3 {
  color: #161b20;
  padding: 0px 0 0 0;
}
.wrapper-outer-new {
  width: 100%
}
.wrapper-outer-new.process {
  height: auto;
  display: inline-block;
  background-color: #484d52;
  padding-top: 60px;
  padding-bottom: 50px
}
.wrapper-outer-new.process .wrapper-inner-new {
  margin-top: 0;
  max-width: 1280px
}
.wrapper-outer-new.process .wrapper-inner-new h3 {
  font-size: 35px;
  color: #fd0;
  margin-bottom: 30px
}
.wrapper-outer-new.process .wrapper-inner-new p {
  color: white;
  width: 80%;
  padding: 0 16px;
  text-align: left;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.7px;
  font-weight: 100;
  margin-bottom: 30px
}
.wrapper-outer-new.process .wrapper-inner-new p a {
  color: #fdfdff
}
.wrapper-outer-new.process .wrapper-inner-new p .process-head {
  display: inline-block;
  width: 100%;
  margin-bottom: 17px;
  font-size: 20px;
  text-transform: uppercase
}
.wrapper-outer-new.process .wrapper-inner-new p .process-head .process-head-number {
  font-size: 23px;
  font-weight: bold;
  margin-right: 4px
}
.wrapper-outer-new.quote {
  font-size: 18px;
  background-color: #fd0;
  padding-top: 25px;
  padding-bottom: 25px;
  display: inline-blockg
}
.wrapper-outer-new.quote .wrapper-inner-new {
  max-width: 580px;
  margin-top: 0;
  padding: 0 10px
}
.wrapper-outer-new.quote .wrapper-inner-new p {
  color: black;
  font-weight: 100;
  line-height: 25px
}
.wrapper-outer-new.quote .wrapper-inner-new p.quote-name {
  font-size: 14px;
  font-weight: bold;
  padding-top: 20px
}
.wrapper-outer-new.reasons {
  display: inline-block;
  padding-top: 100px;
  padding-top: 80px;
  padding-bottom: 25px;
}
.wrapper-outer-new.reasons .wrapper-inner-new {
  width: 100%;
  display: table;
  max-width: 1560px;
  margin-top: 0
}
.wrapper-outer-new.reasons .wrapper-inner-new h3 {
  margin-bottom: 10px
}
.wrapper-inner-new h4 {
  margin-bottom: 10px;
  color: #00aaff;
}
.wrapper-outer-new.reasons .wrapper-inner-new .reason-info {
  width: 96%;
  float: left;
  padding: 0 2%;
  margin-bottom: 30px
}
.wrapper-outer-new.reasons .wrapper-inner-new .reason-info img {
  width: 54px;
  height: 54px;
  display: block;
  margin: 0 auto
}
.wrapper-outer-new.reasons .wrapper-inner-new .reason-info p {
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.7px;
  font-weight: 100
}
.wrapper-outer-new.reasons .wrapper-inner-new .reason-info p .reason-head {
  font-size: 18px
}
.arrow-mask.top {
  margin-top: -4px
}
.arrow-mask.top img {
  height: 100%
}
.arrow-mask.top .svg {
  height: 100%;
  width: 100%
}
.arrow-mask.top.mask-process {
  background-color: #484d52
}
.arrow-mask.top.mask-quote {
  background-color: #fd0
}
.arrow-mask.top.mask-reason {
  background-color: #fdfdff
}
.mask-white-yellow {
  background-color: #fd0
}
.mask-yellow-white {
  background-color: #fdfdff;
  margin-top: -4px !important
}
.mask-yellow-black {
  background-color: #161b20;
  margin-top: -3px !important
}
.mask-yellow-black-negativ {
  margin-top: 0px !important
}
.mask-yellow-black-negativ img {
  margin-bottom: -3px
}
.wrapper-inner-new.search-sea p.head-text, .wrapper-inner-new.search-seo p.head-text {
  text-align: left
}
.wrapper-inner-new.search-sea p.teaser-text, .wrapper-inner-new.search-seo p.teaser-text {
  margin-bottom: 30px
}
.wrapper-inner-new.search-sea, .wrapper-inner-new.search-seo {
  max-width: 1280px
}
.wrapper-inner-new.search-sea .search-sea-content p, .wrapper-inner-new.search-seo .search-sea-content p {
  margin-top: 15px;
  padding: 0 10px
}
.wrapper-inner-new.search-sea .search-sea-content p.intro{
  position:absolute;
}

.wrapper-inner-new.search-sea .search-sea-content img, .wrapper-inner-new.search-seo .search-sea-content img {
  width: 100%;
  height: auto;
}
@media (min-width: 360px) {
  .wrapper-inner-new.search-sea .search-sea-content img, .wrapper-inner-new.search-seo .search-sea-content img {
    width: 500px
  }
}
@media (min-width: 768px) {
  .wrapper-inner-new.search-sea .search-sea-content img, .wrapper-inner-new.search-seo .search-sea-content img {
    width: 100%
  }
}
.wrapper-outer-new.search-seo, .wrapper-outer-new.search-motion {
  margin-bottom: 40px
}
.wrapper-outer-new.google-partner {
  height: auto;
  background-color: #fd0;
  padding-top: 60px;
  padding-bottom: 50px
}
.subsite-content > div.visible .search-sea-content {
  background-color: #252632;
  margin-bottom: -10000px;
  overflow: hidden;
  padding-bottom: 10000px;
  display: table;
  position: relative;
}
.wrapper-inner-new.search-sea .search-sea-content p.intro {
    position: absolute;
    background: rgb(0, 122, 195);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    opacity: 0;
    -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transition-delay: 250ms;
  transition-delay: 250ms;
      padding-top: 22%;
  -moz-transition-delgay: 250ms;
}
.subsite-content > div.visible .search-sea-content img{
  -webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transition-delay: 250ms;
transition-delay: 250ms;
-moz-transition-delay: 250ms;
}
.subsite-content > div.visible .search-sea-content img:hover{
   -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    box-shadow: 0px 0px 50px #00aaff;
}

.subsite-content > div.visible .sys_3{
  background-color:transparent;
  color:#efefef;
}
.sys_1 img{
  max-width: 100%;
}
.sys_2 img{
  width:50%;
  max-width:100%;
  display: inline-block;
  float: left;
}
.subsite-content > div.visible .search-sea-content img {
  margin: 0;
}
.subsite-content > div.visible .search-sea-content .content{
      margin-top: 15.22222%;
          color: #e5e5e5;
}
.wrapper-outer-new.google-partner .wrapper-inner-new.grid-container {
  display: table;
  width: 100%;
  padding: 0
}
.wrapper-outer-new.google-partner .wrapper-inner-new.grid-container img {
  width: 65%
}
.wrapper-outer-new.google-partner .wrapper-inner-new.grid-container p {
  margin-top: 42px;
  max-width: 280px
}
.wrapper-outer-new.search-seo {
  display: inline-block
}
.wrapper-outer-new.search-seo .wrapper-inner-new {
  max-width: 1280px
}
.wrapper-outer-new.search-seo .wrapper-inner-new .offset3 {
  height: 10px
}
.wrapper-outer-new.search-motion {
  overflow: hidden
}
.wrapper-outer-new.motion-slider {
  background-color: #161b20
}
.page-portfolio {
  position: relative;
  z-index: 2;
}
.sys_6{
  padding-bottom:5%;
}
.page-portfolio * {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 25px;
  margin-bottom: 20px;
}
.page-portfolio .block .yellow {
  display: block;
  position: relative;
  left: -3px;
  padding: 0 30px 0 0;
  color: #fd0;
  font-size: 50px;
  font-weight: 600;
  text-transform: uppercase
}
.page-portfolio .block .grey {
  display: block;
  position: relative;
  left: -3px;
  padding: 0 30px 0 0;
  color: #dfdfe1;
  font-size: 50px;
  font-weight: 600
}
@media screen and (max-width: 1200px) {
  .page-portfolio .block .yellow, .page-portfolio .block .grey {
    font-size: 40px
  }
}
@media screen and (max-width: 1000px) {
  .page-portfolio .block .yellow, .page-portfolio .block .grey {
    font-size: 32px
  }
}
@media screen and (max-width: 500px) {
  .page-portfolio .block .yellow, .page-portfolio .block .grey {
    font-size: 30px
  }
}
.page-portfolio.portfolio-motion header {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
  overflow: hidden
}
.page-portfolio header h1 {
  padding: 40px 0 30px 0;
  color: #fd0;
  font-size: 60px;
  font-weight: 200;
  text-align: center;
  text-transform: uppercase
}
.page-portfolio.portfolio-motion header h1 {
  text-indent: -1000em;
  background-image: url("../../../themes/template/res/img/layout/digitalwerk_motion.png");
  background-size: auto 60px;
  background-repeat: no-repeat;
  background-position: center center
}
.page-portfolio header .back {
  position: relative;
  margin: 0 0 85px 0
}
.touch .page-portfolio header .back {
  display: none
}
.page-portfolio header .back a {
  display: inline-block;
  position: relative;
  left: -10px;
  z-index: 2;
  padding: 0 10px 0 30px;
  color: #484d52;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  background: #fff;
  -webkit-transition: left 0.25s ease-out 0s;
  -moz-transition: left 0.25s ease-out 0s;
  -ms-transition: left 0.25s ease-out 0s;
  -o-transition: left 0.25s ease-out 0s;
  transition: left 0.25s ease-out 0s;
  background-image: url("../../../themes/template/res/img/layout/close_x_grey.png");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: 10px center
}
.page-portfolio.portfolio-motion header .back a {
  color: #dfdfe1;
  background-color: transparent;
  background-image: url(../../../themes/template/res/img/layout/close_x_white.png)
}
.no-touch .page-portfolio header .back a:hover {
  left: 10px
}
.sys_4 {
  width: 100%;
  position: relative;
}
.sys_4 img{
  display: block;
  width: 100%;
  margin:0 auto;
  max-width: 100%;
}
.sys_4  .arrow-mask.top{
  position: absolute;
  bottom: 0;
}
.page-portfolio header .back .line {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #dfdfe1
}
.page-portfolio.portfolio-motion header .back .line {
  bottom: -7px
}
.page-portfolio header h2 {
  position: relative;
  top: 100px;
  line-height: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.page-portfolio header h2 span {
  display: block;
  font-size: 90px;
  font-weight: 200;
  line-height: 1.1;
  text-transform: uppercase
}
.page-portfolio header h2 span.inline {
  display: inline-block
}
.page-portfolio header h2 span.yellow {
  color: #fd0
}
.page-portfolio header h2 span.black {
  color: #161b20
}
.page-portfolio header h2 span.grey {
  color: #dfdfe1
}
.page-portfolio.portfolio-motion header .content {
  position: relative;
  z-index: 3
}
.page-portfolio.portfolio-motion header .port-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.page-portfolio.portfolio-motion header .port-video video {
  display: block;
  position: relative;
  width: 100%
}
@media screen and (max-width: 1100px) {
  .page-portfolio header h2 span {
    font-size: 70px
  }
  .page-portfolio.portfolio-motion header h2 span {
    font-size: 60px
  }
}
@media screen and (max-width: 900px) {
  .page-portfolio.portfolio-motion header h2 span {
    font-size: 50px
  }
}
@media screen and (max-width: 800px) {
  .page-portfolio.portfolio-motion header h2 span {
    font-size: 40px
  }
}
@media screen and (max-width: 700px) {
  .page-portfolio header h2 span {
    font-size: 60px
  }
  .page-portfolio.portfolio-motion header h2 span {
    font-size: 30px
  }
  .page-portfolio.portfolio-motion header .back {
    margin: 0 0 65px 0
  }
}
@media screen and (max-width: 600px) {
  .page-portfolio header h2 span {
    font-size: 50px
  }
  .cube .face.front .wrapper-inner {
    padding-top: 0
  }
  .page-portfolio.portfolio-motion header .back {
    margin: 0 0 25px 0
  }
}
@media screen and (min-width: 551px) {
  .page-portfolio.portfolio-motion header h2 span {
    position: relative;
    left: 0;
    color: #fdfdff !important
  }
  .loaded .page-portfolio.portfolio-motion header h2 span {
    left: 150%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0)
  }
  .page-portfolio.portfolio-motion header h2 span.yellow {
    -webkit-transition: all 0.75s ease-out 3s;
    -moz-transition: all 0.75s ease-out 3s;
    -ms-transition: all 0.75s ease-out 3s;
    -o-transition: all 0.75s ease-out 3s;
    transition: all 0.75s ease-out 3s
  }
  .page-portfolio.portfolio-motion header h2 span.black {
    -webkit-transition: all 0.75s ease-out 3.2s;
    -moz-transition: all 0.75s ease-out 3.2s;
    -ms-transition: all 0.75s ease-out 3.2s;
    -o-transition: all 0.75s ease-out 3.2s;
    transition: all 0.75s ease-out 3.2s
  }
  .page-portfolio.portfolio-motion header h2 span.grey {
    -webkit-transition: all 0.75s ease-out 3.4s;
    -moz-transition: all 0.75s ease-out 3.4s;
    -ms-transition: all 0.75s ease-out 3.4s;
    -o-transition: all 0.75s ease-out 3.4s;
    transition: all 0.75s ease-out 3.4s
  }
}
@media screen and (max-width: 550px) {
  .page-portfolio.portfolio-motion header {
    padding-bottom: 0
  }
  .page-portfolio.portfolio-motion header .back {
    margin: 0 0 50% 0
  }
  .touch .page-portfolio header h2 {
    margin: 40% 0 30px 0
  }
}
@media screen and (max-width: 500px) {
  .page-portfolio.portfolio-motion header h1 {
    background-size: auto 40px
  }
  .page-portfolio header h2 span {
    font-size: 40px
  }
}
@media screen and (max-width: 400px) {
  .page-portfolio header h1 {
    font-size: 50px
  }
  .page-portfolio.portfolio-motion header h1 {
    background-size: auto 35px
  }
  .page-portfolio header h2 {
    margin-top: 0
  }
  .page-portfolio header h2 span {
    font-size: 30px
  }
}
.page-portfolio .wrapper-cubes {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  margin-top: 40px
}
.page-portfolio .wrapper-cubes .block {
  display: block;
width: 25%;
height: auto;
margin-bottom: 2.81%;
overflow: hidden;
float: left;
padding-left: 1%;
}
.page-portfolio .wrapper-cubes .block.block-last {
  float: right
}
.page-portfolio .wrapper-cubes .block .wrapper-outer {
  display: table;
  width: 100%;
  height: 100%
}
.page-portfolio .wrapper-cubes .block .wrapper-outer .wrapper-inner {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  position: relative;
}
.page-portfolio .wrapper-cubes .block.cube-wrapper {
  overflow: hidden;
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube {
  height: 100%;
  padding-right:10px;
}


.page-portfolio .wrapper-cubes .block.cube-wrapper:hover .cube h3, .touch .page-portfolio .wrapper-cubes .block.cube-wrapper.active .cube h3 {
  padding: 0px 0 0px 0;
}
.page-portfolio .wrapper-cubes .block.cube-wrapper:hover .cube h3 span, .touch .page-portfolio .wrapper-cubes .block.cube-wrapper.active .cube h3 span {
  color: #f5f5f5 !important;
}
.page-portfolio .wrapper-cubes .block.cube-wrapper:hover .cube svg, .touch .page-portfolio .wrapper-cubes .block.cube-wrapper.active .cube svg {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  margin-top: 0px !important
}
.page-portfolio .wrapper-cubes .block.cube-wrapper:hover .cube svg path, .touch .page-portfolio .wrapper-cubes .block.cube-wrapper.active .cube svg path {
  fill: #dfdfe1
}
.page-portfolio .wrapper-cubes .block.cube-wrapper:hover .cube p {
  opacity: 1 !important
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face {
  height: 100%;
  background: #070816;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face svg, .page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face svg path, .page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face h3, .page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face h3 span, .page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face p {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.front {
  position: relative
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.front svg {
  margin-top: 50px
}
/*.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.front p {
  opacity: 0
}*/
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube.cube-5 .face.front h3 {
  background-image: url("../../../themes/template/res/img/content/portfolio/sites/icon_promotionsite.svg");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center 0
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.front h3 span {
  display: block;
  color: #161b20;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  padding-left: 30px;
  padding-right: 30px;
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.front h3 span.bold {
  font-size: 32px
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top h3 span {
  font-weight: 200;
  text-transform: uppercase
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top h3 span.bold {
  font-weight: bold
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top a span {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: color 0.25s ease-out 0s;
  -moz-transition: color 0.25s ease-out 0s;
  -ms-transition: color 0.25s ease-out 0s;
  -o-transition: color 0.25s ease-out 0s;
  transition: color 0.25s ease-out 0s
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top a span.circle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 36px;
  height: 36px;
  background: #fd0;
  -webkit-border-radius: 18px 18px 18px 18px;
  -moz-border-radius: 18px 18px 18px 18px;
  -ms-border-radius: 18px 18px 18px 18px;
  -o-border-radius: 18px 18px 18px 18px;
  border-radius: 18px 18px 18px 18px;
  background-image: url("../../../themes/template/res/img/content/portfolio/sites/icon_eye.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 8px center;
  -webkit-transition: width 0.25s ease-out 0s;
  -moz-transition: width 0.25s ease-out 0s;
  -ms-transition: width 0.25s ease-out 0s;
  -o-transition: width 0.25s ease-out 0s;
  transition: width 0.25s ease-out 0s
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top a:hover span {
  color: #161b20
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top a:hover span.circle {
  width: 100%
}
@media screen and (max-width: 1000px) {
  .page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top h3 {
    padding-bottom: 10px
  }
}
@media screen and (max-width: 750px) {
  .page-portfolio .wrapper-cubes .block {
    width: 100%
  }
  .page-portfolio .wrapper-cubes .block.text .wrapper-outer .wrapper-inner {
    padding-bottom: 30px;
    vertical-align: bottom
  }
}
@media screen and (max-width: 400px) {
  .page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.top h3 span {
    position: relative;
    top: 7px;
    font-size: 20px
  }
}
.page-portfolio .wrapper-cubes .block.cube-wrapper .cube .face.front h3 span.bold {
  font-size: 20px;
  color: #484d52
}
.page-portfolio .wrapper-text-img {
  position: relative
}
.page-portfolio .wrapper-text-img .column.left {
  display: inline-block;
  width: 33.333%
}
.page-portfolio .wrapper-text-img .column.left .block {
  margin: 50px 0 0 0;
  padding: 0 30px 0 0;
  color: #484d52
}
.page-portfolio .wrapper-text-img .column.left .block.first {
  margin: 0
}
.page-portfolio .wrapper-text-img .column.left .block h4 {
  padding: 0 0 30px 0
}
.page-portfolio .wrapper-text-img .column.left .block h4 span {
  font-size: 32px;
  font-weight: 200
}
.page-portfolio .wrapper-text-img .column.left .block h4 span.bold {
  font-weight: 600
}
.page-portfolio .wrapper-text-img .column.left .block p {
  font-size: 16px
}
.page-portfolio .wrapper-text-img .column.right {
  position: absolute;
  top: 0;
  left: 33.333%;
  width: 66.666%;
  height: 100%
}
.page-portfolio .wrapper-text-img .column.right h5 {
  color: #484d52;
  font-size: 70px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase
}
.page-portfolio .wrapper-text-img .column.right .splasher {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  height: 87%;
  background: #acb1b6
}
@media screen and (max-width: 1200px) {
  .page-portfolio .wrapper-text-img .column.right h5 {
    font-size: 60px
  }
  .page-portfolio .wrapper-text-img .column.right .splasher {
    top: 11%;
    height: 89%
  }
}
@media screen and (max-width: 1000px) {
  .page-portfolio .wrapper-text-img .column.right h5 {
    font-size: 50px
  }
  .page-portfolio .wrapper-text-img .column.right .splasher {
    top: 11%;
    height: 89%
  }
}
@media screen and (max-width: 800px) {
  .page-portfolio .wrapper-text-img .column.left, .page-portfolio .wrapper-text-img .column.right {
    position: relative;
    left: 0;
    width: 100%
  }
  .page-portfolio .wrapper-text-img .column.right .splasher {
    position: relative;
    height: 1000px;
    margin: 30px 0 0 0
  }
  .page-portfolio .wrapper-text-img .column.left .block {
    padding: 0
  }
  .page-portfolio .wrapper-text-img .column.left .block.first {
    margin: 50px 0 0 0
  }
}
@media screen and (max-width: 600px) {
  .page-portfolio .wrapper-text-img .column.right h5 {
    font-size: 40px
  }
}
@media screen and (max-width: 500px) {
  .page-portfolio .wrapper-text-img .column.right h5 {
    font-size: 30px
  }
}
@media screen and (max-width: 400px) {
  .page-portfolio .wrapper-text-img .column.left .block h4 span {
    font-size: 30px
  }
}
.page-portfolio .wrapper-accordion {
  margin: 100px 0 0 0
}
.page-portfolio .wrapper-accordion article {
  position: relative;
  margin: 0 0 1px 0;
  padding: 0 20px;
  border-top: 1px solid #acb1b6;
  border-bottom: 1px solid #acb1b6;
  -webkit-transition: border-color 0.5s ease-out 0s;
  -moz-transition: border-color 0.5s ease-out 0s;
  -ms-transition: border-color 0.5s ease-out 0s;
  -o-transition: border-color 0.5s ease-out 0s;
  transition: border-color 0.5s ease-out 0s
}
.page-portfolio .wrapper-accordion article.article-video {
  min-height: 156px;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat
}
.page-portfolio .wrapper-accordion article:hover, .page-portfolio .wrapper-accordion article.active {
  border-color: #fd0
}
.page-portfolio.portfolio-motion .wrapper-accordion article.article-video .hl-wrapper-outer {
  padding: 0 20px
}
.page-portfolio.portfolio-motion .wrapper-accordion article.article-video .hl-wrapper-outer .ctn-wrapper-large {
  padding: 0 30px
}
.page-portfolio.portfolio-motion .wrapper-accordion article.article-video .hl-wrapper-outer .ctn-wrapper-large .hl-wrapper-inner {
  position: relative
}
.page-portfolio .wrapper-accordion article h3 {
  position: relative;
  z-index: 2;
  padding: 45px 0;
  color: #484d52;
  font-size: 60px;
  font-weight: 200;
  text-transform: uppercase;
  cursor: pointer
}
.page-portfolio .wrapper-accordion article h3 .more {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 0;
  height: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(0) rotateZ(0);
  -moz-transform: rotateZ(0);
  -ms-transform: perspective(0) rotateZ(0);
  -o-transform: perspective(0) rotateZ(0);
  transform: perspective(0) rotateZ(0);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
  transition: all 0.25s ease-out 0s
}
.touch .page-portfolio .wrapper-accordion article.article-video h3 .more {
  display: none
}
.page-portfolio.portfolio-motion .wrapper-accordion article.article-video .hl-wrapper-outer .ctn-wrapper-large .hl-wrapper-inner h3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fdfdff
}
.page-portfolio .wrapper-accordion article.active h3 .more {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(0) rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: perspective(0) rotateZ(45deg);
  -o-transform: perspective(0) rotateZ(45deg);
  transform: perspective(0) rotateZ(45deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0
}
.page-portfolio .wrapper-accordion article h3 .more .circle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #fd0;
  cursor: pointer;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  -ms-border-radius: 50% 50% 50% 50%;
  -o-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
  transition: all 0.25s ease-out 0s
}
.no-touch .page-portfolio .wrapper-accordion article h3:hover .more .circle, .page-portfolio .wrapper-accordion article.active h3 .more .circle {
  top: -17px;
  right: -17px;
  width: 35px;
  height: 35px
}
.page-portfolio .wrapper-accordion article h3 .more .circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  background-image: url("../../../themes/template/res/img/btn/icon-plus.png");
  background-size: 0 0;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
  -o-transition: all 0.25s ease-out 0s;
  transition: all 0.25s ease-out 0s
}
.no-touch .page-portfolio .wrapper-accordion article h3:hover .more .circle span, .page-portfolio .wrapper-accordion article.active h3 .more .circle span {
  background-size: 35px 35px;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.page-portfolio .wrapper-accordion article .content {
  position: relative;
  display: none
}
@media screen and (max-width: 1200px) {
  .page-portfolio .wrapper-accordion article h3 {
    padding: 50px 0;
    font-size: 50px
  }
}
@media screen and (max-width: 1000px) {
  .page-portfolio.portfolio-motion .wrapper-accordion {
    margin: 0
  }
  .page-portfolio .wrapper-accordion article h3 {
    padding: 55px 0;
    font-size: 40px
  }
}
@media screen and (max-width: 800px) {
  .page-portfolio .wrapper-accordion article h3 {
    padding: 60px 70px 60px 0;
    font-size: 30px
  }
}
@media screen and (max-width: 500px) {
  .page-portfolio .wrapper-accordion article h3 {
    padding: 65px 70px 65px 0;
    font-size: 20px
  }
  .touch .page-portfolio.portfolio-motion .wrapper-accordion article.article-video h3 {
    padding-right: 0
  }
}
.page-portfolio .wrapper-accordion article .column {
  display: inline-block;
  position: relative;
  color: #484d52;
  padding: 0 0 20px 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.page-portfolio .wrapper-accordion article.active .show .column {
  -webkit-transition: all 0.5s ease-out 0.5s;
  -moz-transition: all 0.5s ease-out 0.5s;
  -ms-transition: all 0.5s ease-out 0.5s;
  -o-transition: all 0.5s ease-out 0.5s;
  transition: all 0.5s ease-out 0.5s;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.page-portfolio .wrapper-accordion article .column.column-25 {
  width: 25%;
  padding-right: 35px
}
.page-portfolio .wrapper-accordion article .column.column-50 {
  width: 50%;
  padding-right: 160px
}
.page-portfolio .wrapper-accordion article .column.column-table {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  padding: 0
}
.page-portfolio .wrapper-accordion article .column.column-1 {
  top: 30px
}
.page-portfolio .wrapper-accordion article .column.column-2 {
  top: -30px
}
.page-portfolio .wrapper-accordion article .show .column.column-1, .page-portfolio .wrapper-accordion article .show .column.column-2 {
  top: 0
}
.page-portfolio .wrapper-accordion article .column h4 {
  padding: 0 0 35px 0;
  font-size: 22px;
  text-transform: uppercase
}
.page-portfolio .wrapper-accordion article .column h4.sticky {
  padding: 0 0 10px 0
}
.page-portfolio .wrapper-accordion article .column h4 .light {
  font-weight: 200
}
.page-portfolio .wrapper-accordion article .column p {
  padding: 0 0 30px 0;
  font-size: 16px
}
.page-portfolio .wrapper-accordion article .column img {
  display: inline-block;
  margin: 0 0 25px 0;
  width: 100%;
  height: 300px;
  background: #acb1b6;
  -webkit-transition: all 0.5s ease-out 0.25s;
  -moz-transition: all 0.5s ease-out 0.25s;
  -ms-transition: all 0.5s ease-out 0.25s;
  -o-transition: all 0.5s ease-out 0.25s;
  transition: all 0.5s ease-out 0.25s
}
.page-portfolio .wrapper-accordion article .column .wrapper-outer {
  display: table;
  height: 100%
}
.page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner {
  display: table-cell;
  vertical-align: middle
}
.page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner h4, .page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner p {
  max-width: 600px;
  margin: 0;
  padding: 0;
  color: #fd0;
  font-size: 45px;
  font-weight: 600;
  line-height: 1
}
.page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner p {
  color: #dfdfe1
}
@media screen and (max-width: 1200px) {
  .page-portfolio .wrapper-accordion article .column.column-50 {
    padding-right: 100px
  }
}
@media screen and (max-width: 1000px) {
  .page-portfolio .wrapper-accordion article .column.column-25 {
    width: 100%;
    padding-right: 0
  }
  .page-portfolio .wrapper-accordion article .column.column-50 {
    padding-right: 50px
  }
}
@media screen and (max-width: 800px) {
  .page-portfolio .wrapper-accordion article .column.column-50 {
    width: 100%;
    padding-right: 0
  }
  .page-portfolio .wrapper-accordion article .column.column-table {
    position: relative;
    left: 0;
    width: 100%;
    padding-bottom: 50px
  }
}
@media screen and (max-width: 500px) {
  .page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner h4, .page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner p {
    font-size: 40px
  }
}
@media screen and (max-width: 400px) {
  .page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner h4, .page-portfolio .wrapper-accordion article .column .wrapper-outer .wrapper-inner p {
    font-size: 30px
  }
}
.page-portfolio .wrapper-accordion article .content-video {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  display: none
}
.page-portfolio .wrapper-accordion article .content-video video {
  display: block;
  position: relative;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s ease-out 0s;
  -moz-transition: opacity 0.3s ease-out 0s;
  -ms-transition: opacity 0.3s ease-out 0s;
  -o-transition: opacity 0.3s ease-out 0s;
  transition: opacity 0.3s ease-out 0s
}
.page-portfolio .wrapper-accordion article.active .content-video.show video {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
  -webkit-transition: opacity 0.5s ease-out 0s;
  -moz-transition: opacity 0.5s ease-out 0s;
  -ms-transition: opacity 0.5s ease-out 0s;
  -o-transition: opacity 0.5s ease-out 0s;
  transition: opacity 0.5s ease-out 0s
}
@media screen and (max-width: 500px) {
  .touch .page-portfolio .wrapper-accordion article .content-video {
    display: block
  }
  .touch .page-portfolio .wrapper-accordion article.active .content-video video {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    -webkit-transition: opacity 0s ease-out 0s;
    -moz-transition: opacity 0s ease-out 0s;
    -ms-transition: opacity 0s ease-out 0s;
    -o-transition: opacity 0s ease-out 0s;
    transition: opacity 0s ease-out 0s
  }
}
.single-team .ctn-wrapper-large * {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}
.single-team .members {
  margin: 30px 0 25px 0;
  list-style-type: none
}
.single-team .members li {
  display: inline-block;
  padding: 0 25px 10px 0
}
.single-team .members li a {
  color: #acb1b6;
  font-size: 26px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition: color 0.4s ease-out 0s;
  -moz-transition: color 0.4s ease-out 0s;
  -ms-transition: color 0.4s ease-out 0s;
  -o-transition: color 0.4s ease-out 0s;
  transition: color 0.4s ease-out 0s
}
.single-team .members li a:hover, .single-team .members li a.active {
  color: #fd0
}
.single-team .back {
  position: relative;
  margin: 0 0 85px 0
}
.single-team .back a {
  display: inline-block;
  position: relative;
  left: -10px;
  z-index: 2;
  padding: 0 10px 0 30px;
  color: #484d52;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  background: #fff;
  -webkit-transition: left 0.25s ease-out 0s;
  -moz-transition: left 0.25s ease-out 0s;
  -ms-transition: left 0.25s ease-out 0s;
  -o-transition: left 0.25s ease-out 0s;
  transition: left 0.25s ease-out 0s;
  background-image: url("../../../themes/template/res/img/layout/close_x_grey.png");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: 10px center
}
.no-touch .single-team .back a:hover {
  left: 10px
}
.single-team .back .line {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #dfdfe1
}
.single-team .column-wrapper {
  position: relative;
  font-size: 0
}
.single-team .column-wrapper .column {
  display: inline-block;
  position: relative
}
.single-team .column-wrapper .column.left {
  position: relative;
  top: 50px;
  z-index: 2;
  width: 50%;
  margin: 0 0 80px 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.loaded.single-team .column-wrapper .column.left {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-team .column-wrapper .column.left h1 {
  margin: 0 0 50px 0
}
.single-team .column-wrapper .column.left h1 span {
  display: block;
  font-size: 100px;
  text-transform: uppercase
}
.single-team .column-wrapper .column.left h1 span.first-name {
  color: #fd0;
  font-weight: 600
}
.single-team .column-wrapper .column.left h1 span.last-name {
  color: #484d52;
  font-weight: 200
}
.single-team .column-wrapper .column.left .position {
  display: block;
  margin: 0 0 160px 0;
  color: #acb1b6;
  font-size: 23px;
  text-transform: uppercase
}
.single-team .column-wrapper .column.left article {
  width: 70%;
  margin: 0 0 150px 0
}
.single-team .column-wrapper .column.left article h2 {
  padding: 0 0 35px 0;
  color: #484d52;
  font-size: 36px;
  font-weight: 600
}
.single-team .column-wrapper .column.left article p {
  padding: 0 0 35px 0;
  color: #484d52;
  font-size: 20px
}
.single-team .column-wrapper .column.left article p a, .single-team .column-wrapper .column.left article p strong {
  color: #484d52;
  font-size: 20px;
  font-weight: 600
}
.single-team .column-wrapper .column.left article p a {
  display: inline-block;
  padding: 0 0 25px 0;
  word-break: break-word
}
.single-team .column-wrapper .column.left article p strong {
  display: block
}
.single-team .column-wrapper .column.left .links {
  position: absolute;
  bottom: 0;
  left: 0
}
.single-team .column-wrapper .column.left .links .block span {
  display: inline-block;
  padding: 0 10px 0 0;
  color: #484d52;
  font-size: 25px;
  font-weight: 600;
  text-transform: uppercase
}
.single-team .column-wrapper .column.left .links .block.social-media {
  height: 50px
}
.single-team .column-wrapper .column.left .links .block.social-media .items {
  display: inline-block
}
.single-team .column-wrapper .column.left .links .block.social-media .items a {
  display: inline-block;
  position: relative;
  top: 0;
  width: 17px;
  height: 17px;
  margin: 0 15px;
  padding: 0 0 25px 0;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s
}
.single-team .column-wrapper .column.left .links .block.social-media .items a:hover {
  top: -5px;
  padding: 0 0 30px 0;
  border-bottom: 2px solid #fd0
}
.single-team .column-wrapper .column.left .links .block.social-media .items a.tw {
  background-image: url("../../../themes/template/res/img/layout/icon_sm_tw.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-team .column-wrapper .column.left .links .block.social-media .items a.in {
  background-image: url("../../../themes/template/res/img/layout/icon_sm_in.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-team .column-wrapper .column.left .links .block.social-media .items a.fb {
  background-image: url("../../../themes/template/res/img/layout/icon_sm_fb.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-team .column-wrapper .column.left .links .block.social-media .items a.sk {
  background-image: url("../../../themes/template/res/img/layout/icon_sm_sk.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-team .column-wrapper .column.left .links .block.social-media .items a.pi {
  background-image: url("../../../themes/template/res/img/layout/icon_sm_pi.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center
}
.single-team .column-wrapper .column.left .links .block.website a {
  color: #484d52;
  font-size: 25px;
  text-transform: uppercase;
  word-break: break-word
}
.single-team .column-wrapper .column.right {
  position: absolute;
  top: -50px;
  right: 30px;
  width: 50%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s
}
.loaded.single-team .column-wrapper .column.right {
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100)
}
.single-team .column-wrapper .column.right img {
  position: absolute;
  top: 0;
  right: 0;
  width: 110%
}
@media screen and (max-width: 1350px) {
  .single-team .column-wrapper .column.left h1 span {
    font-size: 80px
  }
  .single-team .column-wrapper .column.left .position {
    margin: 0 0 130px 0
  }
  .single-team .column-wrapper .column.left article h2 {
    font-size: 30px
  }
}
@media screen and (max-width: 1150px) {
  .single-team .column-wrapper .column.left {
    width: 60%
  }
}
@media screen and (max-width: 1000px) {
  .single-team .column-wrapper .column.left {
    width: 70%
  }
}
@media screen and (max-width: 850px) {
  .single-team .column-wrapper .column.left {
    width: 100%
  }
  .single-team .column-wrapper .column.left article {
    width: auto
  }
  .single-team .column-wrapper .column.right {
    position: relative;
    width: 100%;
    right: 0
  }
  .single-team .column-wrapper .column.right img {
    position: relative;
    width: 100%
  }
}
@media screen and (max-width: 700px) {
  .single-team .members li a {
    font-size: 20px
  }
  .single-team .column-wrapper .column.left h1 span {
    font-size: 60px
  }
}
@media screen and (max-width: 600px) {
  .single-team .column-wrapper .column.left h1 span {
    font-size: 50px
  }
  .single-team .column-wrapper .column.left article {
    margin: 0 0 300px 0
  }
  .single-team .column-wrapper .column.left article h2 {
    font-size: 25px
  }
  .single-team .column-wrapper .column.left .links .block.social-media {
    position: relative;
    height: 150px;
    text-align: center
  }
  .single-team .column-wrapper .column.left .links .block.social-media .items {
    display: block;
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    text-align: center
  }
  .single-team .column-wrapper .column.left .links .block.website {
    text-align: center
  }
  .single-team .column-wrapper .column.left .links .block.website a {
    display: inline-block;
    margin: 30px 0 0 0
  }
}
@media screen and (max-width: 500px) {
  .single-team .members li {
    padding: 0 15px 5px 0
  }
  .single-team .column-wrapper .column.left h1 span {
    font-size: 40px
  }
}
@media screen and (max-width: 400px) {
  .single-team .members li a {
    font-size: 18px
  }
  .single-team .column-wrapper .column.left h1 span {
    font-size: 35px
  }
  .single-team .column-wrapper .column.left .position {
    margin: 0 0 100px 0
  }
  .single-team .column-wrapper .column.left article h2 {
    padding: 0;
    font-size: 20px
  }
}
.grid-container {
  overflow: hidden;
  max-width: 1280px;
  margin: 0px auto;
  padding: 0 5px 0 5px
}
.grid-container-full {
  max-width: 100%;
}
.grid1 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid1 {
    width: 7.61719%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset1 {
    margin-left: 7.61719%;
    float: left
  }
}
.grid2 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid2 {
    width: 16.01563%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset2 {
    margin-left: 16.01563%;
    float: left
  }
}
.grid3 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid3 {
    width: 24.41406%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset3 {
    margin-left: 24.41406%;
    float: left
  }
}
.grid4 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid4 {
    width: 32.8125%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset4 {
    margin-left: 32.8125%;
    float: left
  }
}
.grid5 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid5 {
    width: 41.21094%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset5 {
    margin-left: 41.21094%;
    float: left
  }
}
.grid6 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid6 {
    width: 49.60938%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset6 {
    margin-left: 49.60938%;
    float: left
  }
}
.grid7 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid7 {
    width: 58.00781%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset7 {
    margin-left: 58.00781%;
    float: left
  }
}
.grid8 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid8 {
    width: 66.40625%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset8 {
    margin-left: 66.40625%;
    float: left
  }
}
.grid9 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid9 {
    width: 74.80469%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset9 {
    margin-left: 74.80469%;
    float: left
  }
}
.grid10 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid10 {
    width: 83.20313%;
    float: left;
    margin-left: 0.78125%
  }
}
@media (min-width: 768px) {
  .offset10 {
    margin-left: 83.20313%;
    float: left
  }
}
.grid11 {
  width: 100%;
  float: none;
  margin-left: 0
}
@media (min-width: 768px) {
  .grid11 {
    width: 91.60156%;
    float: left;
    margin-left: 4.78125%
  }
}
@media (min-width: 768px) {
  .offset11 {
    margin-left: 91.60156%;
    float: left
  }
}
.clear-first {
  margin-left: 0px;
  clear: left
}
.font60 {
  font-size: 60px
}
.font32 {
  font-size: 32px
}
.font24 {
  font-size: 24px
}
.bold {
  font-weight: bold
}
.uppercase {
  text-transform: uppercase
}
.head-seperator {
  display: none
}
.text-left {
  text-align: left
}
@media screen and (max-width: 360px) {
  .subsite-top-bar nav.menu-subsite-container ul li {
    padding: 0 5px
  }
}
@media screen and (min-width: 360px) {
  .wrapper-inner-new.search-sea p.head-text, .wrapper-inner-new.search-seo p.head-text {
    text-align: center
  }
  .wrapper-outer-new.google-partner .wrapper-inner-new.grid-container img {
    width: 285px
  }
}
@media screen and (min-width: 768px) {
  .subsite-wrapper-head h2 {
    font-size: 70px;
    padding: 48px 18% 10px 18%
  }
  .wrapper-inner-new {}
  .wrapper-inner-new h3 {
    font-size: 34px;
  }
  .page-portfolio .wrapper-cubes {
    margin-top: 100px
  }
  .cube .face.top p {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.7px;
    font-weight: 100
  }
  .wrapper-outer-new.process .wrapper-inner-new {
    padding-left: 25px
  }
  .wrapper-outer-new.process .wrapper-inner-new h3 {
    font-size: 35px
  }
  .wrapper-outer-new.process .wrapper-inner-new p {
    width: 44%;
    float: left
  }
  .wrapper-outer-new.process .wrapper-inner-new p .process-head .process-head-number {
    font-size: 35px;
    font-weight: bold;
    margin-right: 10px
  }
  .wrapper-outer-new.quote {
    padding-top: 60px;
    padding-margin: 60px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new {
    margin-top: 100px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new h3 {
    margin-bottom: 10px;
  }
  .wrapper-outer-new.reasons .wrapper-inner-new h4 {
    margin-bottom: 60px;
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info {
    width: 45%;
    float: left;
    display: inline-block;
    padding: 0 0 0 5%;
    margin-bottom: 50px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info img {
    width: 54px;
    display: block;
    margin: 0 auto
  }
  .wrapper-outer-new.search-seo, .wrapper-outer-new.search-motion {
    margin-bottom: 90px
  }
  .wrapper-inner-new.search-sea .search-sea-content p.head-text, .wrapper-inner-new.search-seo .search-sea-content p.head-text {
    text-align: left;
    margin-top: 40px
  }
  .wrapper-inner-new.search-sea .search-sea-content p.teaser-text, .wrapper-inner-new.search-seo .search-sea-content p.teaser-text {
    margin-bottom: 30px
  }
  .wrapper-inner-new.search-sea, .wrapper-inner-new.search-seo {
    max-width: 1280px;
  }
  .wrapper-inner-new {
    position: relative;
  }
  .wrapper-inner-new.search-sea .search-sea-content p, .wrapper-inner-new.search-seo .search-sea-content p {
    margin-top: 10px;
    padding: 0 30px
  }
  .wrapper-outer-new.quote {
    font-size: 23px
  }
  .wrapper-outer-new.quote .wrapper-inner-new p {
    color: black;
    font-weight: 100;
    line-height: 31px
  }
  .wrapper-outer-new.quote .wrapper-inner-new p.quote-name {
    font-size: 16px;
    padding-top: 20px
  }
}
@media screen and (min-width: 1024px) {
  .wrapper-outer-new.process .wrapper-inner-new p {
    margin-bottom: 30px;
    float: left
  }
  .cube .face.top p {
    margin-top: 25px
  }
  .wrapper-outer-new.quote {
    padding-top: 95px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new {
    width: 93%;
    margin-bottom: 70px;
    padding: 0 3.5%
  }
  .wrapper-outer-new.reasons .wrapper-inner-new h3 {
    margin-bottom: 10px;
  }
  .wrapper-outer-new h4 {
    margin-bottom: 30px;
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info {
    width: 32.7777%;
    float: left;
    margin-bottom: 68px;
    display: inline-block;
    padding: 0
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info img {
    width: 54px;
    display: inline-block;
    float: left;
    margin-right: 15px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info p {
    text-align: left;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.7px;
    font-weight: 100
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info.first-one {
    clear: both
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info-middle img {
    margin-left: 40px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info-last img {
    margin-left: 50px
  }
}
@media screen and (min-width: 1366px) {
  .head-seperator {
    display: block
  }
  .wrapper-outer-new.process .wrapper-inner-new {
    padding-left: 0px
  }
  .wrapper-outer-new.process .wrapper-inner-new p {
    width: 22%
  }
}
.page-motion article:hover .text, .tag article:hover .text, .author article:hover .text, .footer-posts article:hover .text {
  -webkit-transform: translate3d(0, -5px, 0px);
  -ms-transform: translate3d(0, -5px, 0px);
  transform: translate3d(0, -5px, 0px);
  -moz-transform: translate3d(0, -5px, 0px);
  -o-transform: translat3d(0, -5px, 0px)
}
@media screen and (min-width: 1680px) {
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info p .reason-head {
    font-size: 30px
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info-middle img {
    margin-left: 15%
  }
  .wrapper-outer-new.reasons .wrapper-inner-new .reason-info-last img {
    margin-left: 17%
  }
}


#cooperate {
  background: url(../../../themes/template/res/img/layout/cooperate.jpg) no-repeat center center;
  background-size: cover;
  padding-bottom: 100px;
}
#cooperate .bottom {
  margin-top: -1px;
}
.cooperate__title {
  text-align: center;
  font-size: 60px;
  padding: 100px 0 10px;
}
.cooperate__subtitle {
  color: #0198fd;
  text-align: center;
  font-size: 16px;
}
.cooperate__body {
  text-indent: 2rem;
  line-height: 30px;
  padding-top: 20px;
}
#mag .text-white  .inner .text h2.tight-new1{
  max-width:650px;
  font-size: 60px !important;
}
.text-white .article-inner h2 span,.article-inner .text .tight {
  font-size:20px;
  font-weight:700;
}

.intro-video2 { position: absolute; width:100%; height:575px; z-index:10; top:0; left:0;}
/*.vr-end{*/
  /*position: relative;*/
/*}*/
.vr-video .grid-container-full{
  position: relative;
}
.vr-star{
  position: absolute;
  top: 40%;
  left: 0%;
  right: 0%;
  text-align: center;
  margin: auto;
}
.vr-into{
  /*position: absolute;*/
  margin-left: -30px;
  font-size: 50px;
  font-weight: normal;
}
.vr-comp{

  color: #01A1FF;
  margin-bottom: 50px;
  margin-top: 20px;
  /*margin-left: 50px;*/
  font-size: 20px;
}
.vr-det{
  /*margin-left: -425px;*/
  letter-spacing:3px;
  padding-top: 10px;
  font-size: 22px;
  line-height: 45px;
}
.vr-star1{
  position: absolute;
  top: 24%;
  /*left: 43%;*/
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.vr-star1>img{
  /*margin-top: -17%;*/
  /*margin-bottom: 9%;*/
  margin: auto;
}
.vr-det1{
  /*margin-left: -425px;*/
  letter-spacing:2px;
  /*padding-top: 5px;*/
  font-size: 22px;
  color: #FFFFFF;
  /*line-height: 1px;*/
  line-height: 30px;
}
.vr-det2>h3{
  font-weight: 100;
  font-size: 36px;
  margin-bottom: 15px;
  text-align: left;
}
.vr-det2>div{
  margin-top: 10px;
  text-align: left;
}
.vr-det2{
  letter-spacing:2px;
  font-size: 22px;
  color: #FFFFFF;
  margin-left: 240px;
}
.vr-sol{
  margin-top: 185px;
}
.icon-plus1{
  position: relative;
}
.icon-cir{
  position: absolute;
  top: 0px;
  left: 0px
}
.tec-1{
  margin-top: 66px;
  letter-spacing:3px;
}
.tec-2{
  margin-top: 28px;
}
.tec-3{
  margin-top: 39px;
}
.tec-4{
  margin-top: 29px;
}
.tec-5{
  margin-top: 68px;
}
.tec-6{
  width: 100%;
  margin-top: 60px;
}
.project-list a {
  position: relative;
  /*float: left;*/
  width: 49%;
  height: 385px;
  background: center no-repeat;
  background-size: cover;
}
/* line 582, content.less */
.project-list .txt {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(224, 62, 62, 0.8);
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  margin-top: 0px;
}
/* line 595, content.less */
.project-list .txt p {
  padding-top: 40%;
  line-height: 1.5;
  text-align: center;
  font-size: 25px;
  color: #fff;
}
/* line 607, content.less */
.project-list .txt:before {
  position: absolute;
  right: 48px;
  bottom: 32px;
  content: ' ';
  width: 50px;
  height: 50px;
  background: url(../../images/icon_right_white.png) center no-repeat;
}
/* line 620, content.less */
.project-list a:hover .txt {
  opacity: 1;
}
/* line 625, content.less */
.project-list a:hover .txt:before {
  bottom: 32px;
}
/* line 629, content.less */
.project-list a:hover p {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
/* line 635, content.less */
@media screen and (max-width: 1450px) {
  /* line 654, content.less */
  .project-list a {
    height: 240px;
  }
  /* line 659, content.less */
  .project-list .txt p {
    padding-top: 19%;
    font-size: 20px;
  }
  /* line 664, content.less */
  .project-list .txt:before {
    right: 20px;
    bottom: 22px;
    width: 35px;
    height: 35px;
    background-size: 35px auto;
  }
}
/**最新修改2020.10.29**/
@media screen and (max-width: 750px){
  .vr-star{
    color: #484d52;
    padding: 0 10px;
  }
  .vr-det{
    font-size: 16px;
    line-height: 24px;
    letter-spacing: inherit;
  }
  .vr-star1>img{
    width: 8%;
  }
  .vr-det1{
    line-height: 28px;
    padding: 0 10px;
  }
  .cube .face.front .wrapper-inner .vr {
    width: 100%;
  }
  .cube .bg-gradient{
    width: 100%;
  }
  .video-container .video-teaser {
    top: 26%;
  }
}