@charset "UTF-8";
/* --------------------------------

Site Name: [変形少女]
Site URI: [http://henkeigirls.com/]
Description: [アニメシリーズ「変形少女」公式サイト アニメの情報、公式グッズの紹介など、変形少女プロジェクトの全てをご紹介！「あなたも…変形しちゃう？」]
Version: [ 1.0 ]
Author: gramglan
Author URI: gramglan.work

-------------------------------- */
/* font-family @include font;*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* SITE COLOR */
/* mixin
mixinの編集
・汎用的に編集する箇所は_mixin.scssに記載
　他にはminin/_common.scssないのhover処理など。
・フォントサイズはpxの他にremを自動指定
・他サイト単位で追加する場合は_common.scssに追記もしくはmixin用の@importを追加
*/
/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}

-------------------------------- */
/* SETTING */
/* SNS COLOR */
/* Brakepoint
以下MEDIA QUERYの書き方
@include max-screen($breakpoint-mobile) {}
@include max-screen($breakpoint-tablet) {}
 */
/* width設定 */
/* mixin */
/* --------------------------------
汎用MIXIN
-------------------------------- */
/* margin padding 0指定 */
/* BOX-SIZING */
/* 透過 */
/* hover処理 */
/* hover処理 */
/* 画像のhover処理 */
/* 画像のhover処理（透過なし） */
/* BOXSHADOW */
/* --------------------------------
サポートブラウザの設定
-------------------------------- */
/* ベンダープレフィックス */
/* --------------------------------
clearfix
-------------------------------- */
/* --------------------------------
FONT STYLE
-------------------------------- */
/* font-size
@include font-size(12);
*/
/* --------------------------------
グリッドシステム
@include rows(00);
-------------------------------- */
/* --------------------------------
MEDIA QUERY
@include max-screen($breakpoint-mobile) {}
@include max-screen($breakpoint-tablet) {}
-------------------------------- */
/*
OLD TYPE


@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

@mixin min-screen($break-point) {
  @media screen and (min-width: $break-point) {
    @content;
  }
}

@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}
*/
/* --------------------------------
角丸設定
-------------------------------- */
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); } }

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); } }

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

/*
* iziModal | v1.4.2
* http://izimodal.marcelodolce.com
* by Marcelo Dolce.
*/
.iziModal {
  display: none;
  position: fixed;
  width: 100%;
  left: 50%;
  top: 50%;
  background: #FFF;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin-top 0.3s ease;
  -o-transition: margin-top 0.3s ease;
  transition: margin-top 0.3s ease; }
  .iziModal.isFullscreen {
    margin-top: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
  .iziModal.isAttachedTop {
    margin-top: 0 !important;
    top: 0;
    bottom: auto;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important; }
    .iziModal.isAttachedTop .iziModal-header {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
  .iziModal.isAttachedBottom {
    margin-top: 0 !important;
    top: auto;
    bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important; }
  .iziModal * {
    -webkit-font-smoothing: antialiased; }
  .iziModal::after {
    content: '';
    width: 100%;
    height: 0px;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.35)));
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.35)));
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#59000000',GradientType=0 );
    -webkit-transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none; }
  .iziModal.hasScroll::after {
    height: 50px;
    opacity: 1; }
  .iziModal .iziModal-progressbar {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 1; }
    .iziModal .iziModal-progressbar > div {
      height: 2px;
      width: 100%; }
  .iziModal .iziModal-button {
    display: block;
    position: absolute;
    top: 16px;
    z-index: 2;
    outline: none;
    height: 34px;
    width: 34px;
    padding: 0;
    margin: 0;
    opacity: 0.3;
    border-radius: 50%;
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1);
    transition: opacity 0.5s ease, -webkit-transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1);
    -o-transition: transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1), opacity 0.5s ease;
    transition: transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1), opacity 0.5s ease;
    transition: transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1), opacity 0.5s ease, -webkit-transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1);
    background-size: 67% !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    /* For some Androids */ }
  .iziModal .iziModal-button-close {
    right: 10px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODZCQkIzQ0I0RTg0MTFFNjlBODI4QTFBRTRBMkFCMDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODZCQkIzQ0M0RTg0MTFFNjlBODI4QTFBRTRBMkFCMDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NkJCQjNDOTRFODQxMUU2OUE4MjhBMUFFNEEyQUIwNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4NkJCQjNDQTRFODQxMUU2OUE4MjhBMUFFNEEyQUIwNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsgTJLcAAALJSURBVHja3JnLS1VBHMfvQ7g9dBXRRrwEFRciAhMi1JRW1aIHVEIYEkW0iVpUhOD/ICK6cFMgSbUpC6VFkQa9NtpjkauriRY9Noa3pHT8/mIODMM5Or85o87pC5/NPf5mvmc8M7+Z36SFEKkY2gj2gUawF2wHW8A6+fwv+A6KYAQMg+dg2rbDtKXhGnAaHJIms4zYz9J4HxgAf1g9k2EGteAhWBBuNApaQNrUg6nRTaAbzIuV0RCocWW4DoyJlVcJXI5ruFk2tJqi/2TWxvA5sXbqA2Ucw01i7dVjargazAo/dE33p6/DlAheg50pP0SJpwG8CH7IaH/Q5pFZUhnoArkwwwVwJeWfdoMLYYZvqG+yTGo9CerAoIWBT+A4qAdPDWOugwo1NVcxJtpFZRLkwH3GJCqCghJfxVjnz1JMMMKnwAbGRAg0B5rAA4O4CblZ+qj8tkBjZthvSzDCtFIMM0ZpQhslk5Eej4jpZ/T7G+ygwG1ghrk+jjNMFy1eMPJzpOAzlou6iWmXZkm91EBHjEwUZXoQTDk2SxqhRh7HTJ9hpstB3rFZ0ldq6J2DnB9m2rXZfxOPlrX1DrJRXiaBXSHPaMHvB0cd9JPLpBImMvzLQTuUFA6A9yHPfoIjhsllOc1l5N4grtmDWgYrl5+JTUZcSjNkeMyxWdpA3ZN72IJj01OJTByJS82J2/wQVxmB5y1HK8x0JWMf/kzdD98FJcY5S51gdwyTQl6eUAraspo27PeWXgy8afim0+CELAwOWHyH9EkdkyWwJ4Yxk6BCP+bTm48anutWW5dAp34IpbW03UOzb0FPVEHbx0LKfvAyqpAyKw97JU8Mt6pml6rAJ6oY6Eu5NfvfF7QTeWWQyEsZr6694lwsNoPD8mKRo29gCNwGj7gXi7aGA1EBcY+8vq0GW8FmJb3Pgx9gEnwAr8Ab8MW2w0UBBgAVyyyaohV7ewAAAABJRU5ErkJggg==") no-repeat 50% 50%; }
  .iziModal .iziModal-button-fullscreen {
    right: 44px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTBBOUI4RUM0RTg0MTFFNjk0NTY4NUNFRkZFNEFEQzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTBBOUI4RUQ0RTg0MTFFNjk0NTY4NUNFRkZFNEFEQzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMEE5QjhFQTRFODQxMUU2OTQ1Njg1Q0VGRkU0QURDMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMEE5QjhFQjRFODQxMUU2OTQ1Njg1Q0VGRkU0QURDMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrQO6gAAAANmSURBVHjazJlbSBRRGMd3x92i0ForRRMiKiUoX4ouiFlJkRVBDxW9GJERwUasvdRT9FD00osRQtAFqegGBUHRBY0uaCVKEkSRpVR0tSwrQtp1+p/4Bk7D7M45M/Ot/uGHu+Psmf+c+eY753wnbJpmyIfGgvmgiv6WgkKQBwzwE3wBr0AnuAta6ZgnhT0aFuY2ghoyGdH4bS+4Dc6CZjCkdWVhWIPF4JoZnB6CDToeVE8sBidNPt0E5UEZrgG9Jr8GwHa/huMgaWZXDSDsxfBuc/jUBAwdw3Fz+NWoang5SJkjQwm7P3seLqQEX2LLfgfBdZcMORMcBqNDwekPqASP0uXhpjR3Ok0x/fUw9HIHGGVdw5DuRtzJpgxDsJui2qOWmuaAOuuLbHivz4YLwLgQj/aAXNmwuItlHhtbA7pAG5jEZHgKWCcbrhUTIY+NPQVjqFFObbYMi/hc6aOhl2AJ9TKnFoIyYXgemKEzJQXVVkyR3oFVzKZFuqw2qHdyFPKhrHPgMoWC3fRjRtNVVg+7SR5IiqmXxUt60cG0CK/vTIZniZVCmcKJF0C3ZNjKBqvJ9Hrwm46tsN1EkCoRQ/M3fBjvs6GrYAvdwHEfGcd1qBaGkwoxrKI+xjz83yJ0iLFHApd46X4xX+M+WECh4lepCNUIcpnMijrEWtAvTRHrbOd8FZNG8uA2Nf0hpmwtjBPwpQ5T0GPS/+tBAZhIq+b3Lu09EyHRwRgO+0C+7dhWcII+PwCf6Sk/Aa9d2vtn+A7nyASugJiD6YSDQcOlvVbxiCaAN8xrs3sgprBiac/QhlhnzjUo6JuZM0UlDS5FPtoQIdNlPYJTWUihFaDex+9Pg6T1KHJAJ2NI7ASllA28hEQ/KJIXoSlwgKlnh+jFe+GjLtwIPtjfyktUt+UaUZWqvw7H3oJD1peI7eQdoF1xWa+zQikHH13OmwqmOxxP0EiZtgK/DRwNuIcHwSeXc2K01WAPhbhKBb5hBNTVbskVH7fqpZGhbJUNtYF83fqwQSXPbOsGjb6etwx2gcEsmT3iFAZeNmUqaMeHSz2qu0k6W15Rqsx3B2i0D+xXGAHTFrRVlEeFuVoqH+ku6VNUbDkPzlAtg30nVK66i8rRIjAbTKaSQVQyN0DD6nOqcLZQld9TLfmvAAMAeMcvp3eCFqQAAAAASUVORK5CYII=") no-repeat 50% 50%; }
  .iziModal.isFullscreen .iziModal-button-fullscreen {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkFFRTU5NDA0RTg1MTFFNjk0NEZFQzBGMkVBMDYyRDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkFFRTU5NDE0RTg1MTFFNjk0NEZFQzBGMkVBMDYyRDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQUVFNTkzRTRFODUxMUU2OTQ0RkVDMEYyRUEwNjJEOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyQUVFNTkzRjRFODUxMUU2OTQ0RkVDMEYyRUEwNjJEOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuDFfX8AAANASURBVHjazJlZSBVRGMfHcWlB0xZM68GKukQLYaGkmEUR2EsvRfQS+BSJPUQE+lTR8hqIZY8hFS0ERVCRoW3gpUApghYpszLTVnCB3O70/+K7MAwzc78Z58z4hx8XzpzvzJ+Zc+d85ztphmFoU9BsUAoq+XcFyAc5QAfD4BfoBp3gCWjnNl9K82mYzO0FVWwyw0NsD3gIroBWkPB0ZzLsgc3grhGcnoE9XjxIOxaCC4Y6tYC1QRmuAj2Geg2CA1M1XAsmjHDVANL8GK4zolMz0L0YrjWiV5PU8HYw6TBIf8imD6UynA96HYKPg3mgMUTDY6DUzXCzQ+AxSz+r6QEQZz4HbLoDZNkZrnAIoOlRZjN1Gk3XS0zty/gTFaRq7Ay3uAR8BcU2ps/z9QJTWw74HrDhTyDbbHg9SKQI+sb9rKa3mV8ZmAt+KJjP1TS+zinFPkqEUqQdBeAOKLa0UwIzpqlXtcYpIKWIO4RBZPoRKNfC10YQI8MlYLkwaAB8ABsiMDwDbKU8dgtIFwRMgJ3guRadKpNPWBMa7tOi1WoyHJPuTsC4oN+IQsOLM3gPJlEWqOE/neMGBqwDeYoMz6G8c0I4h6eFyHBC8A2eVoaH8JutaPwuUA/+uvSht1sHKgTjTWZwjUCVYdrK3xT0iwkND+lc5FClUQ9fINHCRYY7FBrWPSz5Er2lAR9H9P+hpfYGl64OCmPadQ7ojcDwOJetysBMQX/6mrWS4d+cIoYtMnAEnBT2fwVeJufYxZBMFoKFlrajQtOX/uczvEtIB50Kdgn1lt3JGdANltjsXE64jPMnuQ1LPuFJcFrBE11gzQXAUnAPFNk86esO4zSBfmu5lVa9toCf8DC4Ba6C22DEdO01KDLdP5fLr1Z94X2ibV1ilWVQ1XrDpvPAU4c+u1KVqvaHXI7q43ltp3PSYmDDNCgGPrCUD1wN6y5lqzAUN89baX1Y55Jn2LrPRUffRwaHwWhIZs/aTQM/hzLlDp+coPRReprk5cgrkyvz7wM0+hOcAvOlPvwcLNIp526ux1H5aJbHeFpVX4Br4LLXWoffk9CkVnLlaBNYAxaBXJBpMjfIy+o7EAdtfIyb8HPDfwIMAM1WPs8F9tcxAAAAAElFTkSuQmCC") no-repeat 50% 50%; }
  .iziModal .iziModal-button-close:hover {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }
  .iziModal .iziModal-button:hover {
    opacity: 0.8; }
  .iziModal .iziModal-header {
    background: #88A0B9;
    padding: 14px 40px 15px 18px;
    -webkit-box-shadow: inset 0 -10px 15px -12px rgba(0, 0, 0, 0.3), 0 0 0px #555555;
    box-shadow: inset 0 -10px 15px -12px rgba(0, 0, 0, 0.3), 0 0 0px #555555;
    overflow: hidden;
    position: relative;
    z-index: 10; }
  .iziModal .iziModal-header-icon {
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 15px 0 0;
    margin: 0;
    float: left; }
  .iziModal .iziModal-header-title {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3; }
  .iziModal .iziModal-header-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.45; }
  .iziModal .iziModal-header-title, .iziModal .iziModal-header-subtitle {
    display: block;
    margin: 0;
    padding: 0;
    font-family: Arial;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; }
  .iziModal .iziModal-header.iziModal-noSubtitle {
    height: auto;
    padding: 10px 40px 12px 15px; }
    .iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-icon {
      font-size: 23px;
      padding-right: 13px; }
    .iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-title {
      font-size: 15px;
      margin: 3px 0 0 0;
      font-weight: 400; }
    .iziModal .iziModal-header.iziModal-noSubtitle .iziModal-button {
      top: 6px; }

/* RTL */
.iziModal-rtl {
  direction: rtl; }
  .iziModal-rtl .iziModal-header {
    padding: 14px 18px 15px 40px; }
  .iziModal-rtl .iziModal-header-icon {
    float: right;
    padding: 0 0 0 15px; }
  .iziModal-rtl .iziModal-button-close {
    left: 10px;
    right: initial; }
  .iziModal-rtl .iziModal-button-fullscreen {
    right: initial;
    left: 44px; }
  .iziModal-rtl .iziModal-header.iziModal-noSubtitle {
    padding: 10px 15px 12px 40px; }
    .iziModal-rtl .iziModal-header.iziModal-noSubtitle .iziModal-header-icon {
      padding: 0 0 0 13px; }

/* LIGHT THEME */
.iziModal.iziModal-light .iziModal-header-icon {
  color: rgba(0, 0, 0, 0.5); }

.iziModal.iziModal-light .iziModal-header-title {
  color: #000; }

.iziModal.iziModal-light .iziModal-header-subtitle {
  color: rgba(0, 0, 0, 0.6); }

.iziModal.iziModal-light .iziModal-button-close {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyQTU1RUZDNzRFODQxMUU2ODAxOEUwQzg0QjBDQjI3OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NEM4MTU1MEI4QUExMUU2QjNGOEVBMjg4OTRBRTg2NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RTNFNENDMkI4QUExMUU2QjNGOEVBMjg4OTRBRTg2NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZjYzMwMmE1LWFlMjEtNDI3ZS1hMmE4LTJlYjhlMmZlY2E3NSIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjdmYmU3NGE3LTAxMDUtMTE3YS1hYmM3LWEzNWNkOWU1Yzc4NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po24QssAAANtSURBVHja3JlJaBRBFIa7ZxyTSXADHUkikuAawZNLEOOGGrwJQYko8R4RBQ+OICoqghJQUVwPYjzFY0QUBQU1kogoKO6CG0pcIwbiNibj/8JraNvu6Xo9NTOtP3xzSKe6/65+Ve9VlWlkp2IwGUwFE0E5GA4G8/U+0APegWfgHrgPuq0bpNNp0QPNgEYngHlgGpuMCNp2s+kr4BYM/8ql4WqwHEzP4mXteg7awOW0YlerPnQIaARLNBl1ikLlBDw/1WF4ClgHKozc6idogekz2RheANbaBlE+dB4chfF+qeHF3LOF0FWwF6b7nBe8RvecApolzQVr3C64GR4H1huFV51pmvV+hikRbABFRji0GqarMxluAGON8CgKmmA65mZ4DFhqhE9VPP//ZXgZiCmm1t1gI6XWAAY+gF0gCe4qtqlHL8fthkeBWsXGreA6eMgPviEw+x5sBZ3gAdjPCcNPI8Fsu+FawUCzz40psEfRNJndBl7b/pZmVLTQMkzJo0bQSys43iWm3cxS+DUJOmoSwqKCRmEZWKkYv6RSMBPc5lqXRGm0A1Q6XiaT2aSwo8jrK/qZwZlFIlXTusxa6iXDddTdARpnMj2ek9AWjWYH7h/lubcs4A28THdyAdOl0ezAmKNBNyLLiT0Btjti9zuHg06zpJKIprohwXNypcu1OIdGjYbnxCLGPyYy/EPDfejzbwYvXK59AzuFGdFLKTL8WYNZ59RVzGESJCNm0teI40E6zNIA2wSaA2REP32iaW0omKXRbJKTUVyYEVV0J8oxvEiQmiUZrFSz6XNkuJe3nBKCelaSbjOZrhLsd1BInYxweSeJq9YA6dYtuZCBI4JZ6jGW/W+sebhd0DAaMIO5mTYFW1+X6GeQ7TO3W0WyQj3cw0ulBg4nSUbcAY7zPVYp7ip95FXOH29Hb35AOPjypWMIh7PORSjFZVsIzdKW7AWvfYnTVNWHyCytHw+jd1Nehqks3KepvtChUzD7yGvE2/cduqxldQF1EWZb/PbWLF3jAVgo0WrlkN+c6hSd+rzlaSuaR7O0oX0wyIa2pVAdGaj0HCUVOqIq4dVwrg5lmmG2w+8f/9tjL6foYHE+Gy8Xtv3CPUpf7WauDxadKuIwoeNbOmoYDYbZ0ns/1wxUC7ykigs8sS/LpEe3vwUYALiKDDDSgEiSAAAAAElFTkSuQmCC") no-repeat 50% 50%; }

.iziModal.iziModal-light .iziModal-button-fullscreen {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEQTg1NTA2NTRFODQxMUU2OTQ0N0VERjY2Q0M5ODYwRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RTNFNENCQkI4QUExMUU2QjNGOEVBMjg4OTRBRTg2NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RTNFNENCQUI4QUExMUU2QjNGOEVBMjg4OTRBRTg2NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFlNTQwYzczLTVhZmEtNDJlYi04YzJlLWMwMzFlYmFiYmIyNiIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmVkYmRiMzM1LTAxMDUtMTE3YS1hYmM3LWEzNWNkOWU1Yzc4NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvIicdUAAAOvSURBVHjaxJlZbA1hFMe/qaItUUsspakg1laJ7UUisQuRvvTFA15sQSRCLBFrQryhHqxNHxEPtaQ8CCUkIrVVRbVBJdZYSrXVonr9/3pGxnTunZk78/X+k1+aO+1899/vnnvO+c4YKpi6ghEgW34OBD1BKjBAM6gH78Fz8BhUyrW/ikQivt7QiNMozU0DE8RkJx/3fgCPwA1QHvHp2K/hHJAPJqpwVA2K4flW2IZ7gyVgptKjh6AQxl+GYZi7uRr0U3rVBIpg+nIQwwvACpCkOk4XwYlosR3LMGN1qUqMroGDTqaNGDu7SiVWl+D3iP2i00c9HqxUidd8wzDy3HY4HRwCfWzXz4L7Lm+QKfHeOUTTLWAzdro6muH1YIbDjculWrmpUEM2YYXcCNMt9pAYE8WsWYLdlAxaNYTGMDDHKYYXBVy4B0jTFM/5iOcUc1fM/2JcnItNAYtBNzGtQ33BVHDV3OHpARqhV6CLLKpTs8yQYHxOCrDQO7AV1Gg2PBJhMYiGh4MMnx1eLkixXKsFuzSbZrrMpeGxHnqFFtvrTWCbhILd9AuNpnPMHXaTtZD0kl1mRdwSxXSjJsNZfONjcmqIJR5p3lp6Y+sXrAzsBz/lNXvmtZYMFKbqafi0pKQgKpOSPhmsC5BxXEs1Fz4fUr/7TWMe/q9bC2s3tJs1Df/Q/B5PwAZwJYS1WpPlo0zRZJZziL2gQU7I1GyHL7QSD26taVOytI26DpinxKypApvpk+C6dHlMnXskbUbT1yTpN3WJHWB327UCS3hUoc+tA/VyxP/ost5rGq7QWZnAdoe0eZgnYweDbgmgkoafgk8aTfNgsMNmmqfhC+Czj3V4T3mSBH255kxB0ztd4tNNDJkas2CUdkAKHQ3yAtxfijj/bdb7Cumyhmoyexzcs6Qwv2qUbPKvJDOtnNFklrF3R5qneA2XYHe/2A+ht1Xb3FZXRY1XTAjFTgtxJ45qKtWDpZK1g6dhIQuvBzjcy8FgQ6y8Nw+sCdnwL1Dn8jdMe6m2a+3ma9ESNUdOC1VixSH3bnPiYyraswnO0fqDIQkyW8WmCWab7b+I9TCF3+x0j2e+MPUA7LPGrVfD1F3VNsrPVR0zhS8BB5x21muzYa1Sy1Tb4y4d4qOwIi9Pk/wcj1gV50p5zQjJKAsJH8KcY4vpdYrjV0w9HMxxHjfKNpfwdMyRNuAmyy2M1vq5OegBNFMmR9lSHDizSLPMJGjuO2BZfSOtLKvpMylUvh/d/hFgAOH4+ibxGTZuAAAAAElFTkSuQmCC") no-repeat 50% 50%; }

.iziModal.iziModal-light.isFullscreen .iziModal-button-fullscreen {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyRUUxMkYxODRFODUxMUU2Qjc3RDk0MUUzMzJDRjBEOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RTNFNENCRkI4QUExMUU2QjNGOEVBMjg4OTRBRTg2NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RTNFNENCRUI4QUExMUU2QjNGOEVBMjg4OTRBRTg2NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzM2MwOWZiLWJjOTEtNGVlZS05MDM1LTRkMmU2ZmE1ZjBmMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRUUxMkYxODRFODUxMUU2Qjc3RDk0MUUzMzJDRjBEOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv1Q9Z8AAAOXSURBVHjaxJlLbA1RGMfPjIs+EvoIRYt4FVUl2EkkRTxKUqQbG0SEho2FjUQ8YtEICbEgTdFYeK1KaGvVeoUltyStt0UlNE17aWhV2+v/9X5XJpMzc8/0zpn5kl+aO3Nm7r/fnPu9xhDp2URQDJbw3xkgB2QCAwyAPvANfARvQDsfG7V4PO7pC40xCiVxa8AKFjnOw7VdoA08BtG4R8VeBZeCKrBS+GPvQAM0P/NbcB7YBdYJPfYKXIXwL34IJm8eBFOFXusH9RDdnI7gLWA/MEVwdh/UOe1tN8G0V3eLcKwFXJCJNl08G5ZYsrWgWnZCJng5OOBwo1iAoisMw6hMJXgyOOywVW7xj+9BgKL3QHSxm+C9IF9y4U2GMlStRPQP8Jbp9lFwhJwE0RHrgaSV8N6xG238l7Zjtfx3K58/Bd7zsWngIqdnP2we2ACa7B7e6RL6joK5EtHNfL7b5u1Bn7dGFbycYRVM/8WyFJnuJK+z2iVwzFrMcF1h+Cx4ClhtFVyu8CW54ITE01EwFMAPcH1SMJWIqxQvItE1YHEIsXkhtkUhCV4ApiteFOPadn4IgseDMooSSxVrhWFwmkvCsKw06WGhKLhHhGuzSHChh9pZ5cc1oFFwfoTTsWrWqQCvXdZQEpkDsjUJziSv3Qu43k3LTA1BXqvRY/4DMjTd/yu4niJVm9wslCjcb4QE/9Qo+Al44baAmgpKCIqC+01OBLrsr8/de8zkiYwuUxWSq7iuM8JhantIqfYItkOepKBysnbycIfPXYKqURL6DhaBCQrrKcZHTa5loyEIJgHXwG3F9TQV+pxMGK0BiaTHn2OLEjcURbdi7XBSMO3jTxoEjtg+7wDnhG3spSD6F3hk7Tjoxnc0CJ5k+5wFCrhplYl2mmI24nyvvWumAE9z2zIfBW8WifnxIHc2yb6xiHtEoms0/hlGtpAPHCkgNDjFyZngPN88COvkPpEe+XGHbFcD7z53C+ybwKEAo0UPZ8QCybkmiL3sNvkheygSI08RYOSQiaUhd52sUpIZLWwJsYqkkdcZeHfIS66nc9XcZQRpNBY7C7F9Yy1OtonErDgSgNhGcEXmWa/VFA1O9onE6y4dRqGtXuVtkpf2iDy8EVR6GLykMnrsNFC867QF0hH8v3MVicFcuYdKy56uqQx4SukWQj3NOtJtQIt4ckSvbmdziMqy7HcS9xv0cn/Xwdn0A1drnl/d/hNgAGQa6Lgarp6BAAAAAElFTkSuQmCC") no-repeat 50% 50%; }

.iziModal .iziModal-loader {
  background: white url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9; }

.iziModal .iziModal-content-loader {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%; }

.iziModal .iziModal-content {
  zoom: 1;
  width: 100%; }
  .iziModal .iziModal-content:before {
    content: '';
    display: table; }
  .iziModal .iziModal-content:after {
    content: '';
    display: table;
    clear: both; }

.iziModal .iziModal-wrap {
  width: 100%;
  position: relative;
  -webkit-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; }

.iziModal .iziModal-iframe {
  width: 100%;
  margin-bottom: -7px;
  -webkit-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease; }

.iziModal-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.iziModal-navigate {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none; }

.iziModal-navigate-caption {
  position: absolute;
  left: 10px;
  top: 10px;
  color: white;
  line-height: 16px;
  font-size: 9px;
  font-family: arial;
  letter-spacing: 0.1em;
  text-indent: 0;
  text-align: center;
  width: 70px;
  padding: 5px 0;
  text-transform: uppercase;
  display: none; }
  .iziModal-navigate-caption::before, .iziModal-navigate-caption::after {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    content: '';
    background-size: 100% !important; }
  .iziModal-navigate-caption:before {
    left: 0;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAoCAYAAACFFRgXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNmFjNjAyMy04OWU0LWE0NDAtYmMxMy1kOTA5MTQ3MmYzYjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDREQ0YwRjA1MzQzMTFFNkE5NUNDRDkyQzEwMzM5RTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDREQ0YwRUY1MzQzMTFFNkE5NUNDRDkyQzEwMzM5RTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpmNmM0Nzk3Ni1mNzE3LTk5NDAtYTgyYS1mNTdjNmNiYmU0NWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDowZGVmYTEyZC01MzM0LTExZTYtYWRkYi04Y2NmYjI5ZTAxNjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7oo0ptAAACWklEQVR42uyZTWsTYRSFZybxo4kWk5g2NC5qTAU3Kq30A9udi1oXolV/hWuhv6R/Q6utioi4LbbVFHemamlRU0OCEk0wZjwXzwtDoBDopHMHcuFJMplZnLm5ue+589qu61qeOApyYAjEgG0FEyLqN/gKiqBuTtgewWlwCZw056xgwwirgU3wxSv4NJgCUV5YBRXQDEhsBJwCSSauBVZFdJRlIJk9Av7wbj577jDIOENtRmPVwcsw6KfAAvikRKzEDlhnhuU/lRPBWaa9wsxqC6ndPX7OiOA4D8qW3vjO9z7H0w3+KhZstNmOFbLoCQ6DYGmL+bAInmGfLFC4asFXwRJIgB+goVmw+I7HXO+/gevGnGgUPEGxktkSmAMbWmt4HDwBKS6XN1jDKrvEFYoVK7oLroE3h93Woh1eNwqWafJ/gQV65vM+ail34mc6EZwBK2CAx8fAIjjeBYMzDT4cVHCEXtRbRvEu/Nr9HCIOnGGp15vgEec9KYn74B0nAT/CZnv86FcNvwK3wENwAjwAs2Bbs5d4CW5zir0AXvv8p+tKH34B5lkW4h2egRHtbu05uMMHHWfB0zC4NRF5l09kzvE4rd2tyUJyjy4tz7akZqXbL8QETbJ/FsMgWOJtb6brCQ5YsBsC8Uab63DVkkgqFpzie93h8OhScFah2LTHi5ccWroaLd5l6//+hpYQoWP05LKqFs2WQYbTsNxAi+5fxpWmdfh7HS7XhwSzG+H3a2JnvZsyktmLbdOFhpDMvrf4sN1u2/aK0cwMcmYLcturweceW+CnOfFPgAEA8uWFFylBJYoAAAAASUVORK5CYII=") no-repeat 50% 50%; }
  .iziModal-navigate-caption:after {
    right: 0;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAoCAYAAACFFRgXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADhmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzIgNzkuMTU5Mjg0LCAyMDE2LzA0LzE5LTEzOjEzOjQwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjI2YWM2MDIzLTg5ZTQtYTQ0MC1iYzEzLWQ5MDkxNDcyZjNiMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NERDRjBGMDUzNDMxMUU2QTk1Q0NEOTJDMTAzMzlFMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NERDRjBFRjUzNDMxMUU2QTk1Q0NEOTJDMTAzMzlFMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNS41IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmY2YzQ3OTc2LWY3MTctOTk0MC1hODJhLWY1N2M2Y2JiZTQ1YyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjBkZWZhMTJkLTUzMzQtMTFlNi1hZGRiLThjY2ZiMjllMDE2NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuijSm0AAAKbSURBVFhH7ZnJj0xRGEerzFoIMTaCZmOIedhaiJj55yz8DaYdNhIJEUMQbCTG3rQ02hDSiEY553XdTpHS3nv96taV9ElO6lVt6peb7933fffVG41GrYW5uBaX4EysYzcw1Fd8hc/wM2a0Bl6Nm3BW9i0dDPsQX/olBF6FO72AH/gG3+N3jL3KBpqGC3ERTsGfeAsHDTyHi71oCXzBe/gaU2A5bscZOIxXTb8OLQNX9i6mElYsg/voqruwfQb2BhODWgqpMYDv0NLsNXC4yd42P1PEwNJj4HBTWdipErLVDfxfMRm408QMvBu3jV6WJ1Zg9/rbeBOP+UNZYgX+iE/Rp+lpPIKliBXYB9IhtPNy3z/T/F6YmDXsChvyBc7Gs3gACxEzsDzBg9iPPXgO92NuYgeWx2h3+AhtaM7jPsyF7aV37XR8gNZYO/pwKY51+xPkG27Fk2joT3gCr2A7NuJ6HMkTeAPadlp3VeMChF7G0P6X3dmfjAXOUxIj6LZkv1ylNuStDZejkL+PS96ScFzRqnDAtI5PoTefvbg7iNNOOwqVRCfYghdxBbpHH8Y7+DcKlUTV7MLLaNghPIrjhf2N2IF34AVcjE44hrXHyE3MwE6/loEzpEcIlqKjeyFiBe7FS+he/gENewMLEyuwXdo8dGWP43UsRazA9g7uDNbwNX8oS8watlsz+ISIGbgSJgN3GgOHlnFq8zNFQraGgT1iFc9iUyU0XsMGHhy9zh6XbvCp4ZuBBWglDBj4OdqLeu0+uRJTwMZ+Dbp/e21P3m97yWe2snsw1LTHmz5C/9lQdwhfGbiq89GwvrrwUT4UAouhN6MzloTRpVuEYI5O9urZYXtrYPGQw2OlZegM163QhrJMfWVgyTq0Qq32C/N7uPz9OknWAAAAAElFTkSuQmCC") no-repeat 50% 50%; }

.iziModal-navigate > button {
  position: fixed;
  bottom: 0;
  top: 0;
  border: 0;
  height: 100%;
  width: 84px;
  background-size: 100% !important;
  cursor: pointer;
  padding: 0;
  opacity: 0.2;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  pointer-events: all;
  margin: 0;
  outline: none; }
  .iziModal-navigate > button:hover {
    opacity: 1; }

.iziModal-navigate-prev {
  left: 50%;
  background: url(../img/left.svg) no-repeat 50% 50%; }

.iziModal-navigate-next {
  right: 50%;
  background: url(../img/right.svg) no-repeat 50% 50%; }

html.iziModal-isOverflow body {
  overflow-y: scroll;
  position: relative; }

html.iziModal-isAttached {
  overflow: hidden; }
  html.iziModal-isAttached body {
    overflow-y: scroll;
    position: relative; }

.iziModal.isAttached {
  border-radius: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
  bottom: 0;
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }
  .iziModal.isAttached .iziModal-header {
    border-radius: 0; }
  .iziModal.isAttached .iziModal-wrap {
    overflow-y: auto;
    overflow-x: hidden; }

.iziModal ::-webkit-scrollbar {
  overflow: visible;
  height: 7px;
  width: 7px; }

.iziModal ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0px;
  min-height: 28px;
  padding: 100px 0 0;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); }
  .iziModal ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.4); }

.iziModal ::-webkit-scrollbar-button {
  height: 0;
  width: 0; }

.iziModal ::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 2px; }

.iziModal.transitionIn .iziModal-header {
  -webkit-animation: slideDown 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  /* both */
  -moz-animation: slideDown 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  /* both */
  animation: slideDown 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  /* both */ }
  .iziModal.transitionIn .iziModal-header .iziModal-header-icon {
    -webkit-animation: revealIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
    -moz-animation: revealIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
    animation: revealIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; }
  .iziModal.transitionIn .iziModal-header .iziModal-header-title, .iziModal.transitionIn .iziModal-header .iziModal-header-subtitle {
    -webkit-animation: slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
    -moz-animation: slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
    animation: slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; }
  .iziModal.transitionIn .iziModal-header .iziModal-button {
    -webkit-animation: revealIn 1.2s cubic-bezier(0.7, 0, 0.3, 1);
    -moz-animation: revealIn 1.2s cubic-bezier(0.7, 0, 0.3, 1);
    animation: revealIn 1.2s cubic-bezier(0.7, 0, 0.3, 1); }

.iziModal.transitionIn .iziModal-iframe, .iziModal.transitionIn .iziModal-wrap {
  -webkit-animation: fadeIn 1.3s;
  -moz-animation: fadeIn 1.3s;
  animation: fadeIn 1.3s; }

.iziModal.transitionIn .iziModal-header {
  -webkit-animation-delay: 0.0s;
  -moz-animation: 0.0s;
  animation-delay: 0.0s; }
  .iziModal.transitionIn .iziModal-header .iziModal-header-icon, .iziModal.transitionIn .iziModal-header .iziModal-header-title {
    -webkit-animation-delay: 0.4s;
    -moz-animation: 0.4s;
    animation-delay: 0.4s; }
  .iziModal.transitionIn .iziModal-header .iziModal-header-subtitle {
    -webkit-animation-delay: 0.5s;
    -moz-animation: 0.5s;
    animation-delay: 0.5s; }

.iziModal.transitionOut .iziModal-header {
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }
  .iziModal.transitionOut .iziModal-header * {
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important; }

/* SCROLL */
/* MODAL ANIMATIONS */
/* ANIMATIONS */
.comingIn {
  -webkit-animation: comingIn 0.5s ease;
  -moz-animation: comingIn 0.5s ease;
  animation: comingIn 0.5s ease; }

.comingOut {
  -webkit-animation: comingOut 0.5s cubic-bezier(0.16, 0.81, 0.32, 1);
  -moz-animation: comingOut 0.5s cubic-bezier(0.16, 0.81, 0.32, 1);
  animation: comingOut 0.5s cubic-bezier(0.16, 0.81, 0.32, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.fadeOut {
  -webkit-animation: fadeOut 0.5s;
  -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.fadeIn {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s; }

.bounceInDown {
  -webkit-animation: bounceInDown 0.7s ease;
  animation: bounceInDown 0.7s ease; }

.bounceOutDown {
  -webkit-animation: bounceOutDown 0.7s ease;
  animation: bounceOutDown 0.7s ease; }

.bounceInUp {
  -webkit-animation: bounceInUp 0.7s ease;
  animation: bounceInUp 0.7s ease; }

.bounceOutUp {
  -webkit-animation: bounceOutUp 0.7s ease;
  animation: bounceOutUp 0.7s ease; }

.fadeInDown {
  -webkit-animation: fadeInDown 0.7s cubic-bezier(0.16, 0.81, 0.32, 1);
  animation: fadeInDown 0.7s cubic-bezier(0.16, 0.81, 0.32, 1); }

.fadeOutDown {
  -webkit-animation: fadeOutDown 0.5s ease;
  animation: fadeOutDown 0.5s ease; }

.fadeInUp {
  -webkit-animation: fadeInUp 0.7s cubic-bezier(0.16, 0.81, 0.32, 1);
  animation: fadeInUp 0.7s cubic-bezier(0.16, 0.81, 0.32, 1); }

.fadeOutUp {
  -webkit-animation: fadeOutUp 0.5s ease;
  animation: fadeOutUp 0.5s ease; }

.fadeInLeft {
  -webkit-animation: fadeInLeft 0.7s cubic-bezier(0.16, 0.81, 0.32, 1);
  animation: fadeInLeft 0.7s cubic-bezier(0.16, 0.81, 0.32, 1); }

.fadeOutLeft {
  -webkit-animation: fadeOutLeft 0.5s ease;
  animation: fadeOutLeft 0.5s ease; }

.fadeInRight {
  -webkit-animation: fadeInRight 0.7s cubic-bezier(0.16, 0.81, 0.32, 1);
  animation: fadeInRight 0.7s cubic-bezier(0.16, 0.81, 0.32, 1); }

.fadeOutRight {
  -webkit-animation: fadeOutRight 0.5s ease;
  animation: fadeOutRight 0.5s ease; }

.flipInX {
  -webkit-animation: flipInX 0.7s ease;
  animation: flipInX 0.7s ease; }

.flipOutX {
  -webkit-animation: flipOutX 0.7s ease;
  animation: flipOutX 0.7s ease; }

@-webkit-keyframes comingIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9) translateY(-20px) perspective(600px) rotateX(10deg);
    transform: scale(0.9) translateY(-20px) perspective(600px) rotateX(10deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0) perspective(600px) rotateX(0);
    transform: scale(1) translateY(0) perspective(600px) rotateX(0); } }

@-moz-keyframes comingIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-20px) perspective(600px) rotateX(10deg); }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) perspective(600px) rotateX(0); } }

@keyframes comingIn {
  0% {
    opacity: 0;
    /*transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );*/
    -webkit-transform: scale(0.9) translateY(-20px) perspective(600px) rotateX(10deg);
    transform: scale(0.9) translateY(-20px) perspective(600px) rotateX(10deg); }
  100% {
    opacity: 1;
    /*transform: scale(1) translateY(0) perspective( 600px ) rotateX( 0 ); */
    -webkit-transform: scale(1) translateY(0) perspective(600px) rotateX(0);
    transform: scale(1) translateY(0) perspective(600px) rotateX(0); } }

@-webkit-keyframes comingOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9); } }

@-moz-keyframes comingOut {
  0% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(0.9); } }

@keyframes comingOut {
  0% {
    opacity: 1;
    /*transform: translateY(0) perspective( 600px ) rotateX( 0 ); */
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    /*transform: translateY(10px) perspective( 600px ) rotateX( 10deg ); */
    -webkit-transform: scale(0.9);
    transform: scale(0.9); } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes slideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@-moz-keyframes slideIn {
  0% {
    opacity: 0;
    -moz-transform: translateX(50px); }
  100% {
    opacity: 1;
    -moz-transform: translateX(0); } }

@keyframes slideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-webkit-keyframes slideDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 0) translateY(-40px);
    -webkit-transform-origin: center top; } }

@-moz-keyframes slideDown {
  0% {
    opacity: 0;
    -moz-transform: scale(1, 0) translateY(-40px);
    -moz-transform-origin: center top; } }

@keyframes slideDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 0) translateY(-40px);
    transform: scale(1, 0) translateY(-40px);
    -webkit-transform-origin: center top;
    transform-origin: center top; } }

@-webkit-keyframes revealIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 1); } }

@-moz-keyframes revealIn {
  0% {
    opacity: 0;
    -moz-transform: scale3d(0.3, 0.3, 1); } }

@keyframes revealIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 1);
    transform: scale3d(0.3, 0.3, 1); } }

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
    transform: translate3d(0, -1000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
    transform: translate3d(0, -1000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0); } }

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0); } }

@-webkit-keyframes bounceInUp {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0); }
  60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes bounceInUp {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0); }
  60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
    transform: translate3d(0, -1000px, 0); } }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); } }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); } }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0); } }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0); } }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0); } }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0); } }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0); } }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0); } }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(60deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(60deg);
    transform: perspective(400px) rotateX(60deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 40deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 40deg);
    opacity: 0; } }

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 40deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 40deg);
    opacity: 0; } }

.threesixty {
  position: relative;
  margin: 0 auto; }
  .threesixty .threesixty_images {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0; }
    .threesixty .threesixty_images img {
      position: absolute;
      top: 0;
      width: 100%;
      height: auto; }
      .threesixty .threesixty_images img.previous-image {
        visibility: hidden;
        /*
           Do not put here any other styles.
           It causes massive recalc / repaints and image flickering,
           especially on Firefox.
        */ }
      .threesixty .threesixty_images img.current-image {
        visibility: visible;
        /*
           Do not put here any other styles.
           It causes massive recalc / repaints and image flickering,
           especially on Firefox.
        */ }
  .threesixty .spinner {
    width: 60px;
    display: block;
    margin: 0 auto;
    height: 30px;
    background: #333;
    background: rgba(0, 0, 0, 0.7);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
    .threesixty .spinner span {
      font-family: Arial, "MS Trebuchet", sans-serif;
      font-size: 12px;
      font-weight: bolder;
      color: #FFF;
      text-align: center;
      line-height: 30px;
      display: block; }
  .threesixty .nav_bar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11; }
    .threesixty .nav_bar a {
      display: block;
      width: 32px;
      height: 32px;
      float: left;
      background: url(../img/sprites.png) no-repeat;
      text-indent: -99999px; }
    .threesixty .nav_bar a.nav_bar_play {
      background-position: 0 0 !important; }
    .threesixty .nav_bar a.nav_bar_previous {
      background-position: 0 -73px !important; }
    .threesixty .nav_bar a.nav_bar_stop {
      background-position: 0 -37px !important; }
    .threesixty .nav_bar a.nav_bar_next {
      background-position: 0 -104px !important; }

/* html */
.threesixty:-webkit-full-screen {
  background: #ffffff;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding-top: 200px; }

.threesixty:-moz-full-screen {
  background: #ffffff;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding-top: 200px; }

/* 基本設定 */
/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}
-------------------------------- */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body, html {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  background: #fff url(../img/main-bg.png); }

a {
  text-decoration: none;
  cursor: pointer; }
  a:hover {
    outline: none;
    border: none; }

img {
  vertical-align: bottom;
  max-width: 100%; }

ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, p, figure, figcaption, input, textarea {
  margin: 0;
  padding: 0;
  list-style: none; }

ul:after, ol:after {
  *zoom: 1; }
  ul:after:after, ol:after:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

iframe {
  border: none;
  outline: none; }

@media screen and (min-width: 320px) {
  .pc {
    display: none; } }

@media screen and (min-width: 1024px) {
  .pc {
    display: block; } }

@media screen and (min-width: 320px) {
  .sp {
    display: block; } }

@media screen and (min-width: 1024px) {
  .sp {
    display: none; } }

/* レイアウト設定 */
/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}

-------------------------------- */
/*============================
#header
============================*/
header#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 200; }
  @media screen and (min-width: 320px) {
    header#header {
      background: #fff;
      height: 70px; }
      header#header.bg-none {
        background: none;
        z-index: 800; } }
  @media screen and (min-width: 1024px) {
    header#header {
      height: 70px;
      background: rgba(255, 255, 255, 0.7); }
      header#header.bg-none {
        background: none;
        position: relative;
        left: -10px; } }
  header#header .wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row; }
  header#header h1 {
    margin-right: auto; }
    header#header h1 a {
      line-height: 1;
      display: block;
      vertical-align: top;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      /*@include max-screen($breakpoint-mobile) {display: block;}*/
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center; }
      @media screen and (min-width: 320px) {
        header#header h1 a {
          padding-left: 10px;
          padding-top: 10px;
          width: 200px; } }
      @media screen and (min-width: 768px) {
        header#header h1 a img {
          width: auto; } }
      @media screen and (min-width: 1024px) {
        header#header h1 a {
          padding: 16px; }
          header#header h1 a img {
            width: 150px; } }
  @media screen and (min-width: 320px) {
    header#header ul.modal-content {
      display: none;
      -webkit-transition: opacity 1s;
      -o-transition: opacity 1s;
      transition: opacity 1s;
      position: fixed;
      top: 70px;
      left: 0;
      z-index: 1;
      width: 100%;
      opacity: 0; }
      header#header ul.modal-content.open {
        display: block;
        opacity: 1;
        -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.49);
        -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.49);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.49);
        background: #fff; }
        header#header ul.modal-content.open li {
          border-bottom: 1px solid rgba(255, 255, 255, 0.3); } }
  @media screen and (min-width: 1024px) {
    header#header ul.modal-content {
      opacity: 1;
      display: block;
      height: auto;
      width: auto;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      /*@include max-screen($breakpoint-mobile) {display: block;}*/
      position: relative;
      top: 0;
      padding-top: 0; } }
  header#header ul.modal-content li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    @media screen and (min-width: 1024px) {
      header#header ul.modal-content li:last-child a {
        border-right: 0px solid #fff; } }
    header#header ul.modal-content li a {
      display: block;
      text-align: center;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out; }
      header#header ul.modal-content li a:hover {
        opacity: 0.5;
        filter: alpha(opacity=50); }
      @media screen and (min-width: 320px) {
        header#header ul.modal-content li a {
          padding: 16px; } }
      @media screen and (min-width: 1024px) {
        header#header ul.modal-content li a {
          padding: 8px 16px;
          border-right: 1px dashed #E62387; } }
      header#header ul.modal-content li a strong {
        color: #E62387;
        display: block;
        font-size: 10px;
        font-size: 1rem; }
        @media screen and (min-width: 320px) {
          header#header ul.modal-content li a strong {
            text-align: center; } }
        @media screen and (min-width: 1024px) {
          header#header ul.modal-content li a strong {
            text-align: left; } }
      header#header ul.modal-content li a span {
        color: #E62387;
        display: block;
        font-size: 10px;
        font-size: 1rem; }
        @media screen and (min-width: 320px) {
          header#header ul.modal-content li a span {
            text-align: center; } }
        @media screen and (min-width: 1024px) {
          header#header ul.modal-content li a span {
            text-align: left; } }

/* transition */
#header
#header strong,
#header h1 a img {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease; }

/*============================
#SPmenu
============================*/
@media screen and (min-width: 320px) {
  .smp_menu {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2000; } }

@media screen and (min-width: 1024px) {
  .smp_menu {
    display: none; } }

.smp_menu .menu-trigger {
  display: block;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: none;
  padding: 10px;
  position: relative;
  width: 50px;
  height: 50px; }
  .smp_menu .menu-trigger span {
    display: inline-block;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .smp_menu .menu-trigger.active {
    background: none; }
  .smp_menu .menu-trigger span {
    position: absolute;
    left: 10px;
    width: 30px;
    height: 3px;
    background-color: #E62387;
    border-radius: 4px; }
    .smp_menu .menu-trigger span:nth-of-type(1) {
      top: 11px; }
    .smp_menu .menu-trigger span:nth-of-type(2) {
      top: 24px; }
    .smp_menu .menu-trigger span:nth-of-type(3) {
      bottom: 11px; }
  .smp_menu .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(13px) rotate(-45deg);
    -ms-transform: translateY(13px) rotate(-45deg);
    transform: translateY(13px) rotate(-45deg); }
  .smp_menu .menu-trigger.active span:nth-of-type(2) {
    opacity: 0; }
  .smp_menu .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-12px) rotate(45deg);
    -ms-transform: translateY(-12px) rotate(45deg);
    transform: translateY(-12px) rotate(45deg); }

/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}

-------------------------------- */
/* 各ページ */
/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}

-------------------------------- */
#box {
  padding-top: 80px; }

#archive .wrap {
  margin: 0 auto; }
  @media screen and (min-width: 320px) {
    #archive .wrap {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0; } }
  @media screen and (min-width: 1024px) {
    #archive .wrap {
      min-width: 1024px;
      max-width: 1400px; } }
  @media screen and (min-width: 1024px) {
    #archive .wrap {
      max-width: 800px;
      padding: 32px 0; } }
  @media screen and (min-width: 1280px) {
    #archive .wrap {
      max-width: 800px;
      padding: 32px 0; } }

#archive .title {
  background: #E62387;
  color: #fff;
  padding: 24px; }
  @media screen and (min-width: 320px) {
    #archive .title {
      text-align: center; } }
  @media screen and (min-width: 768px) {
    #archive .title {
      text-align: center; } }
  @media screen and (min-width: 320px) {
    #archive .title h1 {
      font-size: 14px;
      font-size: 1.4rem; } }
  @media screen and (min-width: 600px) {
    #archive .title h1 {
      font-size: 16px;
      font-size: 1.6rem; } }
  @media screen and (min-width: 768px) {
    #archive .title h1 {
      font-size: 18px;
      font-size: 1.8rem; } }
  @media screen and (min-width: 1024px) {
    #archive .title h1 {
      font-size: 20px;
      font-size: 2rem; } }
  @media screen and (min-width: 320px) {
    #archive .title p {
      font-size: 9px;
      font-size: 0.9rem; } }
  @media screen and (min-width: 600px) {
    #archive .title p {
      font-size: 10px;
      font-size: 1rem; } }
  @media screen and (min-width: 768px) {
    #archive .title p {
      font-size: 11px;
      font-size: 1.1rem; } }
  @media screen and (min-width: 1024px) {
    #archive .title p {
      font-size: 12px;
      font-size: 1.2rem; } }

#archive div.item {
  border-bottom: 1px solid #ddd;
  padding: 0 16px; }
  #archive div.item a {
    display: block;
    padding: 16px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
    #archive div.item a:hover {
      opacity: 0.5;
      filter: alpha(opacity=50); }
    #archive div.item a div.time {
      color: #999; }
      @media screen and (min-width: 320px) {
        #archive div.item a div.time {
          font-size: 9px;
          font-size: 0.9rem; } }
      @media screen and (min-width: 600px) {
        #archive div.item a div.time {
          font-size: 10px;
          font-size: 1rem; } }
      @media screen and (min-width: 768px) {
        #archive div.item a div.time {
          font-size: 11px;
          font-size: 1.1rem; } }
      @media screen and (min-width: 1024px) {
        #archive div.item a div.time {
          font-size: 12px;
          font-size: 1.2rem; } }
    #archive div.item a div.text h3 {
      color: #E62387; }
    @media screen and (min-width: 320px) {
      #archive div.item a div.text {
        font-size: 10px;
        font-size: 1rem; } }
    @media screen and (min-width: 600px) {
      #archive div.item a div.text {
        font-size: 11px;
        font-size: 1.1rem; } }
    @media screen and (min-width: 768px) {
      #archive div.item a div.text {
        font-size: 12px;
        font-size: 1.2rem; } }
    @media screen and (min-width: 1024px) {
      #archive div.item a div.text {
        font-size: 13px;
        font-size: 1.3rem; } }

div.pagenation {
  text-align: center; }
  div.pagenation ol li {
    display: inline-block;
    padding: 8px; }
    div.pagenation ol li a {
      color: #E62387;
      border-bottom: 2px solid #ddd; }

#single .wrap .title {
  background: #E62387;
  color: #fff;
  padding: 24px; }
  @media screen and (min-width: 320px) {
    #single .wrap .title {
      text-align: left; } }
  @media screen and (min-width: 768px) {
    #single .wrap .title {
      text-align: center; } }
  @media screen and (min-width: 320px) {
    #single .wrap .title h2 {
      font-size: 14px;
      font-size: 1.4rem; } }
  @media screen and (min-width: 600px) {
    #single .wrap .title h2 {
      font-size: 16px;
      font-size: 1.6rem; } }
  @media screen and (min-width: 768px) {
    #single .wrap .title h2 {
      font-size: 18px;
      font-size: 1.8rem; } }
  @media screen and (min-width: 1024px) {
    #single .wrap .title h2 {
      font-size: 20px;
      font-size: 2rem; } }
  @media screen and (min-width: 320px) {
    #single .wrap .title p {
      font-size: 9px;
      font-size: 0.9rem; } }
  @media screen and (min-width: 600px) {
    #single .wrap .title p {
      font-size: 10px;
      font-size: 1rem; } }
  @media screen and (min-width: 768px) {
    #single .wrap .title p {
      font-size: 11px;
      font-size: 1.1rem; } }
  @media screen and (min-width: 1024px) {
    #single .wrap .title p {
      font-size: 12px;
      font-size: 1.2rem; } }

#single .contents {
  margin: 0 auto;
  color: #333; }
  @media screen and (min-width: 320px) {
    #single .contents {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0; } }
  @media screen and (min-width: 1024px) {
    #single .contents {
      min-width: 1024px;
      max-width: 1400px; } }
  @media screen and (min-width: 320px) {
    #single .contents {
      padding: 24px;
      font-size: 10px;
      font-size: 1rem;
      max-width: 800px; } }
  #single .contents .thumb {
    width: 100%;
    height: auto;
    margin-bottom: 24px; }
  #single .contents .col2 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/
    width: 100%; }
    #single .contents .col2 li {
      padding: 16px; }
      @media screen and (min-width: 320px) {
        #single .contents .col2 li {
          width: 100%; } }
      @media screen and (min-width: 768px) {
        #single .contents .col2 li {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1; } }
  #single .contents .dl-button {
    text-align: center;
    padding: 16px;
    line-height: 1;
    margin-bottom: 32px; }
    #single .contents .dl-button a {
      display: inline-block;
      padding: 16px 26px;
      border-radius: 60px;
      background: #E62387;
      color: #fff;
      line-height: 1;
      font-weight: bold;
      font-size: 15px;
      font-size: 1.5rem; }
  #single .contents .ex-text {
    border: 1px solid #ddd;
    color: #999;
    padding: 24px;
    font-size: 8px;
    font-size: 0.8rem; }

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

.ev-banner {
  display: block; }
  @media screen and (min-width: 320px) {
    .ev-banner {
      height: 100px; } }
  @media screen and (min-width: 768px) {
    .ev-banner {
      height: 0px; } }
  .ev-banner img {
    height: auto;
    z-index: 800; }
    @media screen and (min-width: 320px) {
      .ev-banner img {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    .ev-banner img {
      width: 30%; } }
    @media screen and (min-width: 768px) {
      .ev-banner img {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 320px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    .ev-banner img {
      width: 320px; } }

.v-ac {
  padding: 24px;
  background-image: url(../img/cs-bg.png);
  background-repeat: repeat;
  background-position: right center;
  background-color: #000;
  text-align: center; }
  .v-ac ul {
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    background: #fff; }
    @media screen and (min-width: 320px) {
      .v-ac ul {
        width: 100%; } }
    @media screen and (min-width: 768px) {
      .v-ac ul {
        width: 80%; } }
    @media screen and (min-width: 1024px) {
      .v-ac ul {
        width: 700px; } }
    @media screen and (min-width: 320px) {
      .v-ac ul.-haru {
        width: 100%; } }
    @media screen and (min-width: 768px) {
      .v-ac ul.-haru {
        width: 80%; } }
    @media screen and (min-width: 1024px) {
      .v-ac ul.-haru {
        width: 900px; } }
    @media screen and (min-width: 320px) {
      .v-ac ul li {
        width: 100%;
        padding: 16px; } }
    @media screen and (min-width: 768px) {
      .v-ac ul li {
        width: 45%;
        padding: 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        /*@include max-screen($breakpoint-mobile) {display: block;}*/
        text-align: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center; } }
    .v-ac ul li img {
      width: 100%;
      height: auto; }
    @media screen and (min-width: 320px) {
      .v-ac ul li.text {
        padding: 8px 24px 24px; } }
    @media screen and (min-width: 768px) {
      .v-ac ul li.text {
        width: 55%; } }
    @media screen and (min-width: 1024px) {
      .v-ac ul li.text {
        padding-right: 20px; } }

/*ticker*/
#tweet-line {
  color: #00aced;
  font-size: 6px;
  font-size: 0.6rem; }
  @media screen and (min-width: 320px) {
    #tweet-line {
      width: 100%;
      padding: 8px; } }
  @media screen and (min-width: 768px) {
    #tweet-line {
      padding-bottom: 8px; } }
  @media screen and (min-width: 1024px) {
    #tweet-line {
      padding: 0px;
      right: 0;
      z-index: 1200;
      padding: 24px;
      position: absolute;
      top: 0px; } }
  #tweet-line .wrap {
    position: relative; }
    @media screen and (min-width: 320px) {
      #tweet-line .wrap {
        padding: 12px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd; } }
    @media screen and (min-width: 768px) {
      #tweet-line .wrap {
        padding: 12px; } }
    @media screen and (min-width: 1024px) {
      #tweet-line .wrap {
        padding: 12px;
        border-bottom: 1px solid #ddd; } }
  #tweet-line a {
    color: #00aced; }
  #tweet-line .time {
    color: #ccc;
    display: inline; }
  #tweet-line .meta {
    display: inline;
    padding: 4px; }
  #tweet-line .tweet {
    color: #222;
    display: inline;
    padding: 4px; }
  #tweet-line h2 {
    position: relative;
    position: absolute;
    right: 12px;
    bottom: 5px;
    height: 0px;
    color: #00aced;
    line-height: 10px;
    font-size: 6px;
    font-size: 0.6rem; }
    #tweet-line h2 a {
      color: #00aced;
      display: inline-block;
      border: 1px solid #00aced;
      background: #fff;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      padding: 3px 6px;
      border-radius: 30px; }
      #tweet-line h2 a:hover {
        opacity: 0.5;
        filter: alpha(opacity=50); }
    #tweet-line h2 img {
      width: 10px;
      height: auto; }

.ticker {
  text-align: left;
  position: relative;
  overflow: hidden; }

.ticker ul {
  width: 100%;
  position: relative; }

.ticker ul li {
  width: 100%;
  display: none;
  font-size: 6px;
  font-size: 0.6rem; }
  @media screen and (min-width: 320px) {
    .ticker ul li {
      overflow: auto; } }
  @media screen and (min-width: 1024px) {
    .ticker ul li {
      overflow: hidden; } }

.threesixty_wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /*@include max-screen($breakpoint-mobile) {display: block;}*/
  width: 100%;
  height: 100%;
  min-height: 100%; }
  @media screen and (min-width: 320px) {
    .threesixty_wrap {
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    .threesixty_wrap {
      padding-top: 0px; } }
  @media screen and (min-width: 320px) and (orientation: portrait) {
    .threesixty_wrap {
      padding-top: 100px; } }
  @media screen and (min-width: 768px) {
    .threesixty_wrap {
      padding-top: 0%; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    .threesixty_wrap {
      padding-top: 125px; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    .threesixty_wrap {
      padding-top: 200px; } }

.ancker {
  margin-top: -150px;
  padding-top: 150px;
  display: block; }

.iframe-content {
  position: relative;
  max-width: 1000px;
  margin: 0 auto; }

/*
SPLASH
*/
.sp-container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 600;
  background: #fff;
  -webkit-animation: fadeInBack 1s ease-in backwards;
  animation: fadeInBack 1s ease-in backwards;
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
  opacity: 0; }

.sp-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 1000;
  -webkit-animation: outsite 1s ease-in forwards;
  animation: outsite 1s ease-in forwards;
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s; }

.sp-container h2 {
  position: absolute;
  top: 50%;
  line-height: 100px;
  height: 100px;
  font-size: 100px;
  width: 100%;
  text-align: center;
  color: transparent;
  opacity: 0;
  -webkit-animation: blurFadeInOut .9s ease-in forwards;
  animation: blurFadeInOut .9s ease-in forwards; }
  @media screen and (min-width: 320px) {
    .sp-container h2 {
      padding: 16px;
      margin-top: -100px; } }
  @media screen and (min-width: 1024px) {
    .sp-container h2 {
      margin-top: -250px; } }
  .sp-container h2 img {
    height: auto; }
    @media screen and (min-width: 1024px) {
      .sp-container h2 img {
        width: 500px; } }

.sp-container .frame-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }

.sp-container .frame-2 {
  -webkit-animation-delay: .9s;
  animation-delay: .9s; }

.sp-container .frame-3 {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s; }

.sp-container .frame-4 {
  -webkit-animation-delay: 2.7s;
  animation-delay: 2.7s; }

@-webkit-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3); }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0; } }

@keyframes blurFadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3); }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0; } }

@-webkit-keyframes blurFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes blurFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes fadeInBack {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    opacity: 0.8;
    -webkit-transform: scale(2);
    transform: scale(2);
    z-index: 600; }
  100% {
    opacity: 0;
    -webkit-transform: scale(5);
    transform: scale(5);
    z-index: -1;
    display: none; } }

@keyframes fadeInBack {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    opacity: 0.8;
    -webkit-transform: scale(2);
    transform: scale(2);
    z-index: 600; }
  100% {
    opacity: 0;
    -webkit-transform: scale(5);
    transform: scale(5);
    z-index: -1;
    display: none; } }

@-webkit-keyframes outsite {
  0% { }
  99% {
    left: 0px;
    top: 0px; }
  100% {
    left: 100%;
    top: 100%; } }

@keyframes outsite {
  0% { }
  99% {
    left: 0px;
    top: 0px; }
  100% {
    left: 100%;
    top: 100%; } }

@-webkit-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
    transform: scale(0) rotate(360deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg); } }

@keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
    transform: scale(0) rotate(360deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg); } }

@media screen and (min-width: 320px) {
  .sns {
    background: #fff;
    padding: 16px;
    text-align: right; } }

@media screen and (min-width: 1024px) {
  .sns {
    position: fixed;
    bottom: 10px;
    right: 0px;
    padding: 8px;
    border: none;
    z-index: 999; } }

@media screen and (min-width: 320px) {
  .sns.ismobile {
    z-index: 1005;
    background: #fff;
    padding: 8px;
    border: none; } }

@media screen and (min-width: 320px) {
  .sns ul {
    text-align: center; } }

@media screen and (min-width: 768px) {
  .sns ul {
    text-align: right; } }

@media screen and (min-width: 1024px) {
  .sns ul {
    text-align: center; } }

@media screen and (min-width: 320px) {
  .sns ul li {
    display: inline-block; } }

@media screen and (min-width: 1024px) {
  .sns ul li {
    display: block; } }

.sns ul li a {
  display: block;
  background: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 1;
  padding: 6px; }
  .sns ul li a img {
    width: 100%;
    height: auto; }

/************************************
** 自作のバルーンシェアボタン
************************************/
#sns-buttons {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 4px 0; }

ul.snsb-balloon {
  text-align: center;
  padding: 0;
  margin: 20px 0; }

ul.snsb-balloon li {
  display: inline-block;
  list-style-type: none;
  margin-right: 8px; }

.balloon-btn-set {
  display: block;
  width: 60px;
  height: 63px; }

.balloon-btn-set a {
  display: block;
  color: #777;
  font-size: 14px;
  text-decoration: none; }

a.arrow-box-link {
  font-weight: bold;
  text-align: center;
  font-family: Arial;
  display: block; }

a.balloon-btn-link {
  border: 1px solid #ddd;
  width: 58px;
  height: 20px;
  line-height: 20px;
  position: relative;
  top: 4px;
  color: white;
  border-radius: 3px;
  text-align: center;
  display: block; }

.arrow-box {
  position: relative;
  background: #fff;
  border: 1px solid #bbb;
  text-align: center;
  width: 58px;
  height: 33px;
  border-radius: 3px;
  line-height: 33px;
  display: inline-block; }

.arrow-box:after,
.arrow-box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }

.arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 3px;
  margin-left: -3px; }

.arrow-box:before {
  border-color: rgba(187, 187, 187, 0);
  border-top-color: #ddd;
  border-width: 5px;
  margin-left: -5px; }

/************************************
** Twitterタイプボタン表示CSS
************************************/
a.balloon-btn-link {
  font-size: 16px;
  font-weight: normal;
  border: 1px solid #bbb;
  text-decoration: none;
  background: -moz-linear-gradient(center top, #f9f9f9 5%, #e9e9e9 100%);
  background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9));
  background-color: #f9f9f9;
  color: #666666;
  display: inline-block;
  text-shadow: 1px 1px 0px #ffffff;
  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
  box-shadow: inset 1px 1px 0px 0px #ffffff; }

a.twitter-balloon-btn-link {
  color: #55acee; }

a.facebook-balloon-btn-link {
  color: #3c5a99; }

a.googleplus-balloon-btn-link {
  color: #dd4b39; }

a.hatena-balloon-btn-link {
  color: #3c7dd1; }

a.pocket-balloon-btn-link {
  color: #ee4257; }

a.line-balloon-btn-link {
  color: #00c300; }

a.evernote-balloon-btn-link {
  color: #51b125; }

a.feedly-balloon-btn-link {
  color: #87bd33; }

a.twitter-balloon-btn-link:hover {
  color: #55acee; }

a.facebook-balloon-btn-link:hover {
  color: #3c5a99; }

a.googleplus-balloon-btn-link:hover {
  color: #dd4b39; }

a.hatena-balloon-btn-link:hover {
  color: #3c7dd1; }

a.pocket-balloon-btn-link:hover {
  color: #ee4257; }

a.line-balloon-btn-link:hover {
  color: #00c300; }

a.evernote-balloon-btn-link:hover {
  color: #51b125; }

a.feedly-balloon-btn-link:hover {
  color: #87bd33; }

/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}

-------------------------------- */
/*============================
#contents
============================*/
div#contents {
  margin: 0 auto;
  z-index: 620;
  position: relative;
  /*============================
#top
============================*/ }
  @media screen and (min-width: 320px) {
    div#contents {
      height: auto;
      width: 100%;
      min-height: 800px; } }
  @media screen and (min-width: 1024px) {
    div#contents {
      max-width: 1400px;
      min-height: 768px;
      width: 100%;
      height: 100%;
      min-height: 100%; } }
  div#contents section#top {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/
    flex-wrap: wrap; }
    @media screen and (min-width: 320px) {
      div#contents section#top {
        height: auto;
        overflow: visible; } }
    @media screen and (min-width: 1024px) {
      div#contents section#top {
        height: 100%;
        min-height: 100%;
        overflow: hidden; } }
    div#contents section#top div.main {
      -webkit-animation: blurFadeIn .5s ease-in backwards;
      animation: blurFadeIn .5s ease-in backwards;
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
      position: relative;
      background: url(../img/bg-top.jpg) no-repeat center center;
      background-size: cover; }
      @media screen and (min-width: 320px) {
        div#contents section#top div.main {
          width: 100%;
          height: 400px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    div#contents section#top div.main {
      height: 640px; } }
      @media screen and (min-width: 768px) {
        div#contents section#top div.main {
          width: 100%;
          height: 640px; } }
      @media screen and (min-width: 1024px) {
        div#contents section#top div.main {
          height: 100%;
          width: 65%; } }
      div#contents section#top div.main img {
        position: absolute;
        left: 0;
        width: 100%;
        height: auto;
        -webkit-animation: blurFadeIn .3s ease-in backwards;
        animation: blurFadeIn .3s ease-in backwards; }
        @media screen and (min-width: 320px) {
          div#contents section#top div.main img {
            bottom: -50px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    div#contents section#top div.main img {
      bottom: -100px; } }
        @media screen and (min-width: 768px) {
          div#contents section#top div.main img {
            bottom: -220px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    div#contents section#top div.main img {
      bottom: -50px; } }
        @media screen and (min-width: 1024px) {
          div#contents section#top div.main img {
            bottom: -200px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    div#contents section#top div.main img {
      bottom: -100px; } }
        @media screen and (min-width: 1280px) {
          div#contents section#top div.main img {
            bottom: 50%;
            margin-bottom: -650px; } }
      div#contents section#top div.main img.chara-1 {
        z-index: 100;
        -webkit-animation-delay: 3.1s;
        animation-delay: 3.1s; }
      div#contents section#top div.main img.chara-2 {
        z-index: 98;
        -webkit-animation-delay: 3.2s;
        animation-delay: 3.2s; }
      div#contents section#top div.main img.chara-3 {
        z-index: 97;
        -webkit-animation-delay: 3.3s;
        animation-delay: 3.3s; }
      div#contents section#top div.main img.chara-4 {
        z-index: 96;
        -webkit-animation-delay: 3.4s;
        animation-delay: 3.4s; }
      div#contents section#top div.main img.chara-5 {
        z-index: 95;
        -webkit-animation-delay: 3.5s;
        animation-delay: 3.5s; }
      div#contents section#top div.main img.chara-6 {
        z-index: 94;
        -webkit-animation-delay: 3.5s;
        animation-delay: 3.5s; }
    div#contents section#top div.nav {
      -webkit-animation: blurFadeIn 1s ease-in backwards;
      animation: blurFadeIn 1s ease-in backwards;
      -webkit-animation-delay: 3.2s;
      animation-delay: 3.2s;
      background: #fff url(../img/main-bg.png);
      padding: 16px 0;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      /*@include max-screen($breakpoint-mobile) {display: block;}*/
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative; }
      @media screen and (min-width: 320px) {
        div#contents section#top div.nav {
          width: 100%;
          z-index: 300; } }
      @media screen and (min-width: 1024px) {
        div#contents section#top div.nav {
          width: 35%; } }
      @media screen and (min-width: 320px) {
        div#contents section#top div.nav div.top-title {
          padding-bottom: 24px; } }
      @media screen and (min-width: 1024px) {
        div#contents section#top div.nav div.top-title {
          padding-bottom: 0; } }
      div#contents section#top div.nav div.top-title h1 {
        margin-bottom: 32px; }
        div#contents section#top div.nav div.top-title h1 img {
          width: 100%;
          width: 300px;
          height: auto; }
      div#contents section#top div.nav div.top-title a.enter {
        display: block;
        background-image: url(../img/heart.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        text-align: center;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        -webkit-animation: blurFadeIn 1s ease-in backwards;
        animation: blurFadeIn 1s ease-in backwards;
        -webkit-animation-delay: 3.5s;
        animation-delay: 3.5s; }
        div#contents section#top div.nav div.top-title a.enter:hover {
          opacity: 0.5;
          filter: alpha(opacity=50); }
        @media screen and (min-width: 320px) {
          div#contents section#top div.nav div.top-title a.enter {
            width: 300px;
            height: 80px;
            line-height: 80px; } }
        @media screen and (min-width: 1024px) {
          div#contents section#top div.nav div.top-title a.enter {
            width: 300px;
            height: 120px;
            line-height: 120px; } }
        div#contents section#top div.nav div.top-title a.enter span {
          color: #fff; }
      div#contents section#top div.nav div.top-news {
        width: 100%;
        left: 0;
        bottom: 0; }
        @media screen and (min-width: 320px) {
          div#contents section#top div.nav div.top-news {
            position: static; } }

@media screen and (min-width: 1024px) and (orientation: landscape) {
  div#contents section#top div.nav div.top-news {
    position: absolute; } }
        @media screen and (min-width: 1280px) {
          div#contents section#top div.nav div.top-news {
            position: absolute; } }
        div#contents section#top div.nav div.top-news p.copy {
          padding: 8px;
          text-align: center;
          color: #E62387;
          font-size: 7px;
          font-size: 0.7rem; }
        div#contents section#top div.nav div.top-news ul {
          padding: 16px;
          overflow: auto;
          width: 80%;
          margin: 0 auto 16px;
          max-height: 120px;
          border: 1px solid #ddd;
          background: #fff;
          border-radius: 8px; }
          div#contents section#top div.nav div.top-news ul li {
            font-size: 7px;
            font-size: 0.7rem;
            padding: 4px; }
            div#contents section#top div.nav div.top-news ul li a {
              color: #E62387;
              -webkit-transition: 0.3s ease-in-out;
              -moz-transition: 0.3s ease-in-out;
              -o-transition: 0.3s ease-in-out;
              transition: 0.3s ease-in-out; }
              div#contents section#top div.nav div.top-news ul li a:hover {
                opacity: 0.5;
                filter: alpha(opacity=50); }
              div#contents section#top div.nav div.top-news ul li a:hover {
                text-decoration: underline;
                color: #E62387; }
            div#contents section#top div.nav div.top-news ul li time {
              color: #ccc;
              line-height: 1; }
            div#contents section#top div.nav div.top-news ul li p {
              color: #E62387;
              font-size: 9px;
              font-size: 0.9rem; }

/* --------------------------------
MIXIN
- gramglan

//メディアクエリ設定
標準はmedium
@include mq {}

//モバイル端末ー縦向き
'xsmall': 320px,
//モバイル端末ー横向き
'small' : 600px,
//タブレット端末ー縦向き
'medium': 768px,
//タブレット端末ー横向き＆PCサイズ
'large' : 1024px,
//1280px以上
'xlarge': 1280px,

@include mq(xsmall){
}
@include mq(small){
}
@include mq(medium){
}
@include mq(large){
}
@include mq(xlarge){
}

'p': portrait,
'l': landscape,

@include or(l){
}
@include or(p){
}
-------------------------------- */
#myCanvas {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: .9; }

#logo {
  position: fixed;
  top: 0px;
  left: 32px;
  z-index: 120; }
  #logo img {
    width: 120px;
    height: auto; }
  #logo.ch-page {
    top: -16px;
    left: auto;
    right: 16px; }
    @media screen and (min-width: 320px) {
      #logo.ch-page {
        top: -16px;
        left: auto;
        right: 16px; } }
    @media screen and (min-width: 1280px) {
      #logo.ch-page {
        top: 0px; }
        #logo.ch-page img {
          width: 180px; } }
  @media screen and (min-width: 320px) {
    #logo.ch-top {
      top: 0px;
      left: auto;
      right: 0;
      width: 100%;
      text-align: center; }
      #logo.ch-top img {
        width: 180px;
        height: auto; } }
  @media screen and (min-width: 768px) {
    #logo.ch-top {
      top: 0px;
      left: auto;
      right: 0;
      width: 100%;
      text-align: center; }
      #logo.ch-top img {
        width: 180px;
        height: auto; } }
  @media screen and (min-width: 1024px) {
    #logo.ch-top {
      text-align: left;
      padding-left: 16px; } }

.retuen {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 120; }
  @media screen and (min-width: 320px) {
    .retuen span {
      background: #E62387;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: block;
      text-align: center;
      padding-top: 6px; }
      .retuen span img {
        width: 25px;
        height: auto; } }
  @media screen and (min-width: 768px) {
    .retuen span {
      background: #E62387;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: block;
      text-align: center;
      padding-top: 6px; }
      .retuen span img {
        width: 25px;
        height: auto; } }
  @media screen and (min-width: 1280px) {
    .retuen span {
      background: #E62387;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: block;
      text-align: center;
      padding-top: 6px; }
      .retuen span img {
        width: 25px;
        height: auto; } }

#sp_ch {
  background: url(../img/bg-ch.jpg) no-repeat center center;
  background-size: cover;
  padding: 80px 0px 24px 0; }
  #sp_ch ul li {
    margin-bottom: 16px;
    position: relative; }
    #sp_ch ul li a, #sp_ch ul li span {
      display: block;
      position: relative; }
      @media screen and (min-width: 320px) {
        #sp_ch ul li a, #sp_ch ul li span {
          padding-right: 16px; } }
      #sp_ch ul li a .linkimg, #sp_ch ul li span .linkimg {
        width: 100%;
        height: auto;
        position: relative; }
    #sp_ch ul li .voice {
      position: absolute;
      background-color: #fff;
      background-size: cover;
      z-index: 20; }
      @media screen and (min-width: 320px) {
        #sp_ch ul li .voice {
          right: 8px;
          bottom: 8px;
          height: 40px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #sp_ch ul li .voice {
      height: 80px;
      width: 135px; } }

@media screen and (min-width: 600px) and (orientation: landscape) {
  #sp_ch ul li .voice {
    height: 80px;
    width: 150px; } }
      @media screen and (min-width: 768px) {
        #sp_ch ul li .voice {
          right: 16px;
          bottom: 16px;
          height: 100px;
          width: 200px; } }
      #sp_ch ul li .voice a {
        color: #fff;
        display: block;
        text-align: center; }
        #sp_ch ul li .voice a img {
          -webkit-transition: 0.7s;
          -o-transition: 0.7s;
          transition: 0.7s;
          opacity: 1; }
        #sp_ch ul li .voice a:hover img {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1); }
        @media screen and (min-width: 320px) {
          #sp_ch ul li .voice a {
            padding: 8px 19px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #sp_ch ul li .voice a {
      padding: 13px 32px; } }

@media screen and (min-width: 600px) and (orientation: landscape) {
  #sp_ch ul li .voice a {
    padding: 10px 32px; } }
        @media screen and (min-width: 768px) {
          #sp_ch ul li .voice a {
            padding: 10px 40px; } }
        #sp_ch ul li .voice a img {
          width: 100%;
          height: auto;
          vertical-align: top; }
    #sp_ch ul li .arrow_box {
      position: absolute;
      z-index: 10;
      text-align: center;
      background-color: #fff;
      color: #00529B;
      padding: 1px 16px; }
      @media screen and (min-width: 320px) {
        #sp_ch ul li .arrow_box {
          font-size: 9px;
          font-size: 0.9rem;
          right: 8px;
          top: 8px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #sp_ch ul li .arrow_box {
      font-size: 24px;
      font-size: 2.4rem; } }
      @media screen and (min-width: 600px) {
        #sp_ch ul li .arrow_box {
          font-size: 14px;
          font-size: 1.4rem; } }
  @media screen and (min-width: 600px) and (orientation: portrait) {
    #sp_ch ul li .arrow_box {
      font-size: 16px;
      font-size: 1.6rem; } }
  @media screen and (min-width: 600px) and (orientation: landscape) {
    #sp_ch ul li .arrow_box {
      font-size: 32px;
      font-size: 3.2rem; } }
      @media screen and (min-width: 768px) {
        #sp_ch ul li .arrow_box {
          right: 16px;
          top: 16px;
          font-size: 32px;
          font-size: 3.2rem; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    #sp_ch ul li .arrow_box {
      font-size: 32px;
      font-size: 3.2rem;
      padding: 0 32px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    #sp_ch ul li .arrow_box {
      font-size: 40px;
      font-size: 4rem; } }
      @media screen and (min-width: 1280px) {
        #sp_ch ul li .arrow_box {
          font-size: 35px;
          font-size: 3.5rem; } }

#ch-menu {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: url(../img/bg-ch.jpg) no-repeat center center;
  background-size: cover;
  z-index: 10;
  min-height: 100vh;
  height: 100%; }
  #ch-menu #myCanvas2 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: .5; }
  #ch-menu .wrap {
    position: relative;
    min-height: 100vh;
    height: 100%;
    min-width: 640px;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 120; }
    #ch-menu .wrap ul {
      min-height: 100vh;
      height: 100%;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      /*@include max-screen($breakpoint-mobile) {display: block;}*/
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      /* キャラ設定 */
      /**/
      /**/
      /**/
      /**/ }
      #ch-menu .wrap ul li {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        /*@include max-screen($breakpoint-mobile) {display: block;}*/
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 20%;
        min-height: 100vh;
        height: 100%;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center; }
        #ch-menu .wrap ul li img {
          max-width: 100%;
          height: auto; }
        #ch-menu .wrap ul li a {
          display: block;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1; }
          #ch-menu .wrap ul li a img {
            -webkit-transition: 0.7s;
            -o-transition: 0.7s;
            transition: 0.7s;
            opacity: 1; }
          #ch-menu .wrap ul li a:hover img {
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1); }
      #ch-menu .wrap ul li.haru {
        background: url(../img/bg-typ-1.png) repeat-y left top;
        background-size: 40%;
        position: relative; }
        #ch-menu .wrap ul li.haru .voice {
          position: absolute;
          text-align: center;
          padding-top: 3px;
          top: 50%;
          margin-top: -200px;
          right: 30px;
          background-image: url(../img/wrap-come.svg);
          background-size: cover;
          width: 62px;
          height: 60px;
          z-index: 100; }

@media screen and (min-width: 768px) and (orientation: landscape) {
  #ch-menu .wrap ul li.haru .voice {
    right: 5px; } }
          #ch-menu .wrap ul li.haru .voice a {
            color: #fff; }
            #ch-menu .wrap ul li.haru .voice a img {
              -webkit-transition: 0.7s;
              -o-transition: 0.7s;
              transition: 0.7s;
              opacity: 1; }
            #ch-menu .wrap ul li.haru .voice a:hover img {
              -webkit-transform: scale(1.1);
              -ms-transform: scale(1.1);
              transform: scale(1.1); }
        #ch-menu .wrap ul li.haru .arrow_box {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 6em;
          margin-left: -3em;
          margin-top: -340px;
          text-align: center;
          color: #00529B;
          font-size: 10px;
          font-size: 1rem;
          padding: 4px; }
      #ch-menu .wrap ul li.rin {
        background: url(../img/bg-typ-2.png) repeat-y left top;
        background-size: 40%;
        position: relative; }
        #ch-menu .wrap ul li.rin .voice {
          position: absolute;
          text-align: center;
          padding-top: 3px;
          top: 50%;
          margin-top: -200px;
          right: 30px;
          background-image: url(../img/wrap-come.svg);
          background-size: cover;
          width: 62px;
          height: 60px;
          z-index: 100; }

@media screen and (min-width: 768px) and (orientation: landscape) {
  #ch-menu .wrap ul li.rin .voice {
    right: 5px; } }
          #ch-menu .wrap ul li.rin .voice a {
            color: #fff; }
            #ch-menu .wrap ul li.rin .voice a img {
              -webkit-transition: 0.7s;
              -o-transition: 0.7s;
              transition: 0.7s;
              opacity: 1; }
            #ch-menu .wrap ul li.rin .voice a:hover img {
              -webkit-transform: scale(1.1);
              -ms-transform: scale(1.1);
              transform: scale(1.1); }
        #ch-menu .wrap ul li.rin .arrow_box {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 6em;
          margin-left: -3em;
          margin-top: -340px;
          text-align: center;
          color: #E62387;
          font-size: 10px;
          font-size: 1rem;
          padding: 4px; }
      #ch-menu .wrap ul li.itsuki {
        background: url(../img/bg-typ-3.png) repeat-y left top;
        background-size: 40%;
        position: relative; }
        #ch-menu .wrap ul li.itsuki .voice {
          position: absolute;
          text-align: center;
          padding-top: 3px;
          top: 50%;
          margin-top: -200px;
          right: 30px;
          background-image: url(../img/wrap-come.svg);
          background-size: cover;
          width: 62px;
          height: 60px;
          z-index: 100; }

@media screen and (min-width: 768px) and (orientation: landscape) {
  #ch-menu .wrap ul li.itsuki .voice {
    right: 5px; } }
          #ch-menu .wrap ul li.itsuki .voice a {
            color: #fff; }
            #ch-menu .wrap ul li.itsuki .voice a img {
              -webkit-transition: 0.7s;
              -o-transition: 0.7s;
              transition: 0.7s;
              opacity: 1; }
            #ch-menu .wrap ul li.itsuki .voice a:hover img {
              -webkit-transform: scale(1.1);
              -ms-transform: scale(1.1);
              transform: scale(1.1); }
        #ch-menu .wrap ul li.itsuki .arrow_box {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 6em;
          margin-left: -3em;
          margin-top: -340px;
          text-align: center;
          color: #E62387;
          font-size: 10px;
          font-size: 1rem;
          padding: 4px; }
      #ch-menu .wrap ul li.nana {
        background: url(../img/bg-typ-5.png) repeat-y left top;
        background-size: 40%;
        position: relative; }
        #ch-menu .wrap ul li.nana .voice {
          position: absolute;
          text-align: center;
          padding-top: 3px;
          top: 50%;
          margin-top: -200px;
          right: 30px;
          background-image: url(../img/wrap-come.svg);
          background-size: cover;
          width: 62px;
          height: 60px;
          z-index: 100; }

@media screen and (min-width: 768px) and (orientation: landscape) {
  #ch-menu .wrap ul li.nana .voice {
    right: 5px; } }
          #ch-menu .wrap ul li.nana .voice a {
            color: #fff; }
            #ch-menu .wrap ul li.nana .voice a img {
              -webkit-transition: 0.7s;
              -o-transition: 0.7s;
              transition: 0.7s;
              opacity: 1; }
            #ch-menu .wrap ul li.nana .voice a:hover img {
              -webkit-transform: scale(1.1);
              -ms-transform: scale(1.1);
              transform: scale(1.1); }
        #ch-menu .wrap ul li.nana .arrow_box {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 6em;
          margin-left: -3em;
          margin-top: -340px;
          text-align: center;
          color: #E62387;
          font-size: 10px;
          font-size: 1rem;
          padding: 4px; }

.arrow_box {
  position: relative;
  background: #fff; }
  .arrow_box:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 8px;
    margin-left: -8px; }

#main {
  background: url(../img/main-bg.png) repeat #fff;
  z-index: 80;
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 320px) {
    #main {
      padding-top: 80px; } }
  @media screen and (min-width: 1024px) {
    #main {
      padding-top: 0;
      margin-top: 100vh; } }
  @media screen and (min-width: 1280px) {
    #main {
      margin-top: 100vh; } }
  #main.chara-top {
    padding-top: 0px; }
  #main .comment {
    padding: 16px; }
    #main .comment h4 {
      color: #E62387;
      border-bottom: 1px solid #ddd;
      padding: 8px;
      margin-bottom: 8px; }
    #main .comment p {
      font-size: 10px;
      font-size: 1rem;
      padding: 8px; }
  #main .col2 {
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/
    min-width: 1200px; }
    @media screen and (min-width: 320px) {
      #main .col2 {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 0; } }
    @media screen and (min-width: 1024px) {
      #main .col2 {
        min-width: 1024px;
        max-width: 1400px; } }
    @media screen and (min-width: 320px) {
      #main .col2 h2 {
        text-align: center;
        padding-bottom: 16px; } }
    @media screen and (min-width: 768px) {
      #main .col2 h2 {
        text-align: center; } }
    @media screen and (min-width: 1024px) {
      #main .col2 h2 {
        text-align: left;
        padding-bottom: 0px; } }
    #main .col2 .photo {
      position: relative;
      z-index: 300;
      /* キャラ設定 */ }
      @media screen and (min-width: 320px) {
        #main .col2 .photo {
          width: 100%;
          padding: 16px;
          padding-top: 80px; } }
      @media screen and (min-width: 1024px) {
        #main .col2 .photo {
          width: 50%;
          padding-top: 100px; } }
      #main .col2 .photo .sc {
        position: relative; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo .sc {
            right: 0px; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo .sc {
            right: -80px; } }
  @media screen and (min-width: 1024px) and (orientation: portrait) {
    #main .col2 .photo .sc {
      right: 0px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    #main .col2 .photo .sc {
      right: 0px; } }
      #main .col2 .photo .voice {
        position: absolute;
        z-index: 100;
        background: url(../img/wrap-come.svg) no-repeat;
        background-size: contain;
        text-align: center;
        padding-top: 6px; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo .voice {
            width: 110px;
            height: 110px;
            top: 115px;
            right: 3px;
            padding-top: 4px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #main .col2 .photo .voice {
      width: 140px;
      padding-top: 20px;
      height: 140px;
      right: 50px; } }
        @media screen and (min-width: 768px) {
          #main .col2 .photo .voice {
            top: 250px;
            right: 32px;
            padding-top: 24px;
            width: 180px;
            height: 180px; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo .voice {
            right: 46px;
            top: 80px;
            padding-top: 12px; } }
  @media screen and (min-width: 1024px) and (orientation: portrait) {
    #main .col2 .photo .voice {
      width: 100px;
      height: 100px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    #main .col2 .photo .voice {
      width: 140px;
      height: 140px;
      right: 12px; } }
        @media screen and (min-width: 1280px) {
          #main .col2 .photo .voice {
            width: 180px;
            height: 180px;
            padding-top: 24px; } }
        #main .col2 .photo .voice a {
          color: #fff; }
          #main .col2 .photo .voice a img {
            -webkit-transition: 0.7s;
            -o-transition: 0.7s;
            transition: 0.7s;
            opacity: 1; }
          #main .col2 .photo .voice a:hover img {
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1); }
        #main .col2 .photo .voice img {
          height: auto; }
          @media screen and (min-width: 320px) {
            #main .col2 .photo .voice img {
              width: 30px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #main .col2 .photo .voice img {
      width: 50px; } }
          @media screen and (min-width: 768px) {
            #main .col2 .photo .voice img {
              width: 60px; } }
          @media screen and (min-width: 1024px) {
            #main .col2 .photo .voice img {
              width: 40px; } }
          @media screen and (min-width: 1280px) {
            #main .col2 .photo .voice img {
              width: 40px; } }
        #main .col2 .photo .voice span {
          display: block;
          padding-top: 4px; }
          @media screen and (min-width: 320px) {
            #main .col2 .photo .voice span {
              font-size: 8px;
              font-size: 0.8rem; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #main .col2 .photo .voice span {
      font-size: 10px;
      font-size: 1rem; } }
          @media screen and (min-width: 768px) {
            #main .col2 .photo .voice span {
              font-size: 14px;
              font-size: 1.4rem; } }
          @media screen and (min-width: 1024px) {
            #main .col2 .photo .voice span {
              font-size: 12px;
              font-size: 1.2rem; } }
          @media screen and (min-width: 1280px) {
            #main .col2 .photo .voice span {
              font-size: 14px;
              font-size: 1.4rem; } }
      #main .col2 .photo.haru-wrap {
        padding-top: 16px;
        padding-bottom: 16px; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo.haru-wrap {
            background: none; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo.haru-wrap {
            background: url(../img/bg-cha-1.png) no-repeat;
            background-size: contain; } }
      #main .col2 .photo.rin-wrap {
        padding-top: 16px;
        padding-bottom: 16px; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo.rin-wrap {
            background: none; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo.rin-wrap {
            background: url(../img/bg-cha-2.png) no-repeat;
            background-size: contain; } }
      #main .col2 .photo.rin-wrap {
        padding-top: 16px;
        padding-bottom: 16px; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo.rin-wrap {
            background: none; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo.rin-wrap {
            background: url(../img/bg-cha-2.png) no-repeat;
            background-size: contain; } }
      #main .col2 .photo.itsuki-wrap {
        padding-top: 16px;
        padding-bottom: 16px; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo.itsuki-wrap {
            background: none; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo.itsuki-wrap {
            background: url(../img/bg-cha-3.png) no-repeat;
            background-size: contain; } }
      #main .col2 .photo.nana-wrap {
        padding-top: 16px;
        padding-bottom: 16px; }
        @media screen and (min-width: 320px) {
          #main .col2 .photo.nana-wrap {
            background: none; } }
        @media screen and (min-width: 1024px) {
          #main .col2 .photo.nana-wrap {
            background: url(../img/bg-cha-5.png) no-repeat;
            background-size: contain; } }
    #main .col2 .text {
      padding: 48px 0;
      position: relative;
      z-index: 300; }
      @media screen and (min-width: 320px) {
        #main .col2 .text {
          width: 100%; } }
      @media screen and (min-width: 1024px) {
        #main .col2 .text {
          width: 50%; } }
    #main .col2 .spec {
      padding: 16px; }
      #main .col2 .spec.haru-clr {
        color: #00529B; }
        #main .col2 .spec.haru-clr li {
          border-bottom: 1px solid #00529B; }
      #main .col2 .spec.rin-clr {
        color: #E62387; }
        #main .col2 .spec.rin-clr li {
          border-bottom: 1px solid #E62387; }
      #main .col2 .spec.itsuki-clr {
        color: #353123; }
        #main .col2 .spec.itsuki-clr li {
          border-bottom: 1px solid #353123; }
      #main .col2 .spec.nana-clr {
        color: #3FAFD4; }
        #main .col2 .spec.nana-clr li {
          border-bottom: 1px solid #3FAFD4; }
      #main .col2 .spec li {
        padding: 8px;
        margin-bottom: 8px;
        font-size: 11px;
        font-size: 1.1rem; }
    @media screen and (min-width: 320px) {
      #main .col2 .ch-mov {
        padding: 8px  24px; } }
    @media screen and (min-width: 1024px) {
      #main .col2 .ch-mov {
        padding: 16px 80px; } }
    #main .col2 .ch-mov.haru-clr a, #main .col2 .ch-mov.haru-clr span {
      border: 3px solid #00529B; }
    #main .col2 .ch-mov.rin-clr a, #main .col2 .ch-mov.rin-clr span {
      border: 3px solid #E62387; }
    #main .col2 .ch-mov.itsuki-clr a, #main .col2 .ch-mov.itsuki-clr span {
      border: 3px solid #353123; }
    #main .col2 .ch-mov.nana-clr a, #main .col2 .ch-mov.nana-clr span {
      border: 3px solid #3FAFD4; }
    #main .col2 .ch-mov a, #main .col2 .ch-mov span {
      display: block;
      border-radius: 16px; }
      #main .col2 .ch-mov a img, #main .col2 .ch-mov span img {
        border-radius: 12px; }
    #main .col2 .faceup {
      padding: 16px; }

#mv360 {
  text-align: center;
  /* キャラ設定 */ }
  @media screen and (min-width: 320px) {
    #mv360 {
      padding: 16px; } }
  @media screen and (min-width: 768px) {
    #mv360 {
      padding: 80px; } }
  #mv360.haru-wrap {
    background-color: #002240;
    background-image: url(../img/360-haru-bg.png);
    background-position: center center;
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #mv360.haru-wrap {
        background-size: 80%; } }
    @media screen and (min-width: 1024px) {
      #mv360.haru-wrap {
        background-size: 40%; } }
  #mv360.rin-wrap {
    background-color: #002240;
    background-position: center center;
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #mv360.rin-wrap {
        background-size: 80%; } }
    @media screen and (min-width: 1024px) {
      #mv360.rin-wrap {
        background-size: 40%; } }
  #mv360.itsuki-wrap {
    background-color: #002240;
    background-position: center center;
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #mv360.itsuki-wrap {
        background-size: 80%; } }
    @media screen and (min-width: 1024px) {
      #mv360.itsuki-wrap {
        background-size: 40%; } }
  #mv360.nana-wrap {
    background-color: #002240;
    background-position: center center;
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #mv360.nana-wrap {
        background-size: 80%; } }
    @media screen and (min-width: 1024px) {
      #mv360.nana-wrap {
        background-size: 40%; } }
  #mv360 .col2 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*@include max-screen($breakpoint-mobile) {display: block;}*/ }
    #mv360 .col2 li {
      width: 50%;
      padding: 8px; }
      #mv360 .col2 li img {
        width: 100%;
        height: auto; }
  #mv360 .cs {
    padding: 10px;
    display: block; }
    #mv360 .cs img {
      height: auto; }
      @media screen and (min-width: 320px) {
        #mv360 .cs img {
          width: 100%; } }
      @media screen and (min-width: 768px) {
        #mv360 .cs img {
          width: 600px; } }

#model {
  background: #002240;
  padding: 0 250px;
  position: relative; }
  #model h4 {
    position: absolute;
    z-index: 200;
    top: 50%;
    margin-top: -53px;
    left: 16px; }
    #model h4 img {
      width: 201px;
      height: auto; }

#model-link {
  background: #002240 url(../img/360-haru-bg.png) no-repeat center center;
  background-size: 80%;
  padding: 24px;
  text-align: center; }

#angle {
  background-color: #FFE6F3;
  /* キャラ設定 */ }
  #angle .wrap {
    margin: 0 auto;
    text-align: center;
    padding: 32px;
    position: relative; }
    @media screen and (min-width: 320px) {
      #angle .wrap {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 0; } }
    @media screen and (min-width: 1024px) {
      #angle .wrap {
        min-width: 1024px;
        max-width: 1400px; } }
    @media screen and (min-width: 320px) {
      #angle .wrap {
        padding: 16px;
        padding-top: 120px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #angle .wrap {
      padding-top: 120px;
      padding: 16px 16px 16px 200px; } }
  @media screen and (min-width: 320px) and (orientation: portrait) {
    #angle .wrap {
      padding-top: 120px; } }
    @media screen and (min-width: 768px) {
      #angle .wrap {
        padding: 24px; } }
    #angle .wrap h4 {
      position: absolute;
      left: 170px;
      top: 50px;
      width: 182px;
      height: auto; }
      @media screen and (min-width: 320px) {
        #angle .wrap h4 {
          left: auto;
          top: 10px;
          right: 10px;
          width: 40%; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #angle .wrap h4 {
      width: 30%;
      left: 16px;
      right: auto; } }
      @media screen and (min-width: 768px) {
        #angle .wrap h4 {
          left: 50px;
          top: 10px;
          width: 160px; } }
      @media screen and (min-width: 1024px) {
        #angle .wrap h4 {
          width: 200px; } }
      @media screen and (min-width: 1280px) {
        #angle .wrap h4 {
          width: 250px; } }
    #angle .wrap .mov h3 span {
      background: #E62387;
      color: #fff;
      display: inline-block;
      border-radius: 8px 8px 0 0;
      padding: 8px 16px;
      line-height: 1; }
      @media screen and (min-width: 320px) {
        #angle .wrap .mov h3 span {
          font-size: 7px;
          font-size: 0.7rem; } }
      @media screen and (min-width: 600px) {
        #angle .wrap .mov h3 span {
          font-size: 8px;
          font-size: 0.8rem; } }
      @media screen and (min-width: 1024px) {
        #angle .wrap .mov h3 span {
          font-size: 12px;
          font-size: 1.2rem; } }
    #angle .wrap .mov a {
      display: block;
      margin: 0 auto; }
      @media screen and (min-width: 320px) {
        #angle .wrap .mov a {
          width: 100%; } }
      @media screen and (min-width: 1024px) {
        #angle .wrap .mov a {
          width: 50%; } }
      #angle .wrap .mov a img {
        border: 3px solid #E62387;
        border-radius: 16px; }
  @media screen and (min-width: 320px) {
    #angle.haru-wrap {
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain; } }
  @media screen and (min-width: 320px) and (orientation: portrait) {
    #angle.haru-wrap {
      background-image: none; } }
  @media screen and (min-width: 768px) {
    #angle.haru-wrap {
      background-image: url(../img/egle-bg-1.png); } }
  #angle.haru-wrap .wrap {
    background-image: url(../img/egle-ch-1.png);
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #angle.haru-wrap .wrap {
        background-position: 50px 10px;
        background-size: 150px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #angle.haru-wrap .wrap {
      background-position: 0px bottom;
      background-size: 200px; } }
    @media screen and (min-width: 768px) {
      #angle.haru-wrap .wrap {
        padding: 24px;
        background-position: 0px bottom; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    #angle.haru-wrap .wrap {
      background-size: 240px;
      background-position: 0px bottom;
      padding-left: 200px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    #angle.haru-wrap .wrap {
      background-size: 120px; } }
    @media screen and (min-width: 1024px) {
      #angle.haru-wrap .wrap {
        margin: 0 auto;
        background-position: 100px bottom;
        background-size: 300px; } }
  @media screen and (min-width: 1024px) and (min-width: 320px) {
    #angle.haru-wrap .wrap {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0; } }
  @media screen and (min-width: 1024px) and (min-width: 1024px) {
    #angle.haru-wrap .wrap {
      min-width: 1024px;
      max-width: 1400px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    #angle.haru-wrap .wrap {
      padding: 32px;
      background-position: 0px bottom;
      background-size: 250px; } }
    @media screen and (min-width: 1280px) {
      #angle.haru-wrap .wrap {
        background-size: 300px; } }
  @media screen and (min-width: 320px) {
    #angle.rin-wrap {
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain; } }
  @media screen and (min-width: 320px) and (orientation: portrait) {
    #angle.rin-wrap {
      background-image: none; } }
  @media screen and (min-width: 768px) {
    #angle.rin-wrap {
      background-image: url(../img/egle-bg-2.png); } }
  #angle.rin-wrap .wrap {
    background-image: url(../img/egle-ch-2.png);
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #angle.rin-wrap .wrap {
        background-position: 50px 10px;
        background-size: 150px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #angle.rin-wrap .wrap {
      background-position: 0px bottom;
      background-size: 200px; } }
    @media screen and (min-width: 768px) {
      #angle.rin-wrap .wrap {
        padding: 24px;
        background-position: 0px bottom; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    #angle.rin-wrap .wrap {
      background-size: 240px;
      background-position: 0px bottom;
      padding-left: 200px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    #angle.rin-wrap .wrap {
      background-size: 120px; } }
    @media screen and (min-width: 1024px) {
      #angle.rin-wrap .wrap {
        margin: 0 auto;
        background-position: 100px bottom;
        background-size: 300px; } }
  @media screen and (min-width: 1024px) and (min-width: 320px) {
    #angle.rin-wrap .wrap {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0; } }
  @media screen and (min-width: 1024px) and (min-width: 1024px) {
    #angle.rin-wrap .wrap {
      min-width: 1024px;
      max-width: 1400px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    #angle.rin-wrap .wrap {
      padding: 32px;
      background-position: 0px bottom;
      background-size: 250px; } }
    @media screen and (min-width: 1280px) {
      #angle.rin-wrap .wrap {
        background-size: 300px; } }
  @media screen and (min-width: 320px) {
    #angle.itsuki-wrap {
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain; } }
  @media screen and (min-width: 320px) and (orientation: portrait) {
    #angle.itsuki-wrap {
      background-image: none; } }
  @media screen and (min-width: 768px) {
    #angle.itsuki-wrap {
      background-image: url(../img/egle-bg-3.png); } }
  #angle.itsuki-wrap .wrap {
    background-image: url(../img/egle-ch-3.png);
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #angle.itsuki-wrap .wrap {
        background-position: 50px 10px;
        background-size: 150px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #angle.itsuki-wrap .wrap {
      background-position: 0px bottom;
      background-size: 200px; } }
    @media screen and (min-width: 768px) {
      #angle.itsuki-wrap .wrap {
        padding: 24px;
        background-position: 0px bottom; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    #angle.itsuki-wrap .wrap {
      background-size: 240px;
      background-position: 0px bottom;
      padding-left: 200px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    #angle.itsuki-wrap .wrap {
      background-size: 120px; } }
    @media screen and (min-width: 1024px) {
      #angle.itsuki-wrap .wrap {
        margin: 0 auto;
        background-position: 100px bottom;
        background-size: 300px; } }
  @media screen and (min-width: 1024px) and (min-width: 320px) {
    #angle.itsuki-wrap .wrap {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0; } }
  @media screen and (min-width: 1024px) and (min-width: 1024px) {
    #angle.itsuki-wrap .wrap {
      min-width: 1024px;
      max-width: 1400px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    #angle.itsuki-wrap .wrap {
      padding: 32px;
      background-position: 0px bottom;
      background-size: 250px; } }
    @media screen and (min-width: 1280px) {
      #angle.itsuki-wrap .wrap {
        background-size: 300px; } }
  @media screen and (min-width: 320px) {
    #angle.nana-wrap {
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain; } }
  @media screen and (min-width: 320px) and (orientation: portrait) {
    #angle.nana-wrap {
      background-image: none; } }
  @media screen and (min-width: 768px) {
    #angle.nana-wrap {
      background-image: url(../img/egle-bg-3.png); } }
  #angle.nana-wrap .wrap {
    background-image: url(../img/egle-ch-3.png);
    background-repeat: no-repeat; }
    @media screen and (min-width: 320px) {
      #angle.nana-wrap .wrap {
        background-position: 50px 10px;
        background-size: 150px; } }
  @media screen and (min-width: 320px) and (orientation: landscape) {
    #angle.nana-wrap .wrap {
      background-position: 0px bottom;
      background-size: 200px; } }
    @media screen and (min-width: 768px) {
      #angle.nana-wrap .wrap {
        padding: 24px;
        background-position: 0px bottom; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    #angle.nana-wrap .wrap {
      background-size: 240px;
      background-position: 0px bottom;
      padding-left: 200px; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    #angle.nana-wrap .wrap {
      background-size: 120px; } }
    @media screen and (min-width: 1024px) {
      #angle.nana-wrap .wrap {
        margin: 0 auto;
        background-position: 100px bottom;
        background-size: 300px; } }
  @media screen and (min-width: 1024px) and (min-width: 320px) {
    #angle.nana-wrap .wrap {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      padding: 0; } }
  @media screen and (min-width: 1024px) and (min-width: 1024px) {
    #angle.nana-wrap .wrap {
      min-width: 1024px;
      max-width: 1400px; } }
  @media screen and (min-width: 1024px) and (orientation: landscape) {
    #angle.nana-wrap .wrap {
      padding: 32px;
      background-position: 0px bottom;
      background-size: 250px; } }
    @media screen and (min-width: 1280px) {
      #angle.nana-wrap .wrap {
        background-size: 300px; } }

.coso {
  background-image: url(../img/cs-bg.png);
  background-repeat: repeat;
  background-position: right center;
  background-size: contain;
  background-color: #E62387;
  text-align: center;
  padding: 48px; }
  .coso img {
    height: auto; }
    @media screen and (min-width: 320px) {
      .coso img {
        width: 60%; } }
    @media screen and (min-width: 1024px) {
      .coso img {
        width: 30%; } }

footer {
  text-align: center;
  background: #fff;
  padding: 16px;
  color: #E62387;
  font-size: 9px;
  font-size: 0.9rem; }
  footer p a {
    display: block;
    padding: 3px;
    padding-top: 16px; }