/**
 * main.css
 */
@font-face {
    font-family: 'Louis_Condensed';
    src: url('fonts/louiscondensedregular-webfont.woff2') format('woff2'),
         url('fonts/louiscondensedregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Mrseaves_Smallcaps';
    src: url('fonts/mrseavessmallcapsregular-webfont.woff2') format('woff2'),
         url('fonts/mrseavessmallcapsregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima_Nova';
    src: url('fonts/proximanova-bold-webfont.woff2') format('woff2'),
         url('fonts/proximanova-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html, body { position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

h1, h2, h3, h4, h5 { font-weight: 100; }

* { margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box; }

.pnova { font-family: 'Proxima_Nova'; font-weight: 100; }
.luis { font-family: 'Louis_Condensed'; font-weight: 100; }
.mrseaves { font-family: 'Mrseaves_Smallcaps'; font-weight: 100; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; -webkit-font-feature-settings: 'liga' 0; font-feature-settings: 'liga' 0; }

.unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }

.table { display: table; width: 100%; height: 100%; }
.table-cell { display: table-cell; vertical-align: middle; }


/**
 * application
 */
#application { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-color: #fff; }


/**
 * sections
 */
#application>section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#application>section .section { position: relative; width: 100%; height: 100%; text-align: center; }

#application>section .section .section-title { position: absolute; top: 50px; left: 0; right: 0; height: auto; text-align: center; text-transform: uppercase; letter-spacing: .1em; color: #999; font-size: 18px; }

@media (max-width: 1024px) {
    
    #application>section .section .section-title { top: 90px;  }
}


/**
 * sprites
 */
.arrow-sprite { position: absolute; background-color: #e0e0e0; }
.arrow-sprite:after { content: ''; position: absolute; }
.arrow-sprite.arrow-top { width: 1px; height: 35px; }
.arrow-sprite.arrow-top:after { top: 2px; left: -1px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid #e0e0e0; -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.arrow-sprite.arrow-bottom { width: 1px; height: 35px; }
.arrow-sprite.arrow-bottom:after { bottom: 2px; left: -3px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid #e0e0e0; -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.arrow-sprite.arrow-left { width: 35px; height: 1px;  }
.arrow-sprite.arrow-left:after { top: -3px; left: 2px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 3px solid #e0e0e0; -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.arrow-sprite.arrow-right { width: 35px; height: 1px;  }
.arrow-sprite.arrow-right:after { top: -1px; right: 2px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #e0e0e0; -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }

.scroll-icon { position: absolute; top: 50%; margin-top: 226px; right: -1.5em; }
.scroll-icon span { position: absolute; bottom: 125px; width: 130px; color: #181818; text-transform: uppercase; font-size: 10px; letter-spacing: .15em; }
.scroll-icon .line { position: absolute; bottom: 50px; left: 0; width: 1px; height: 65px; background-color: #181818; }
.scroll-icon .icon { position: absolute; bottom: 0; left: -12px; width: 25px; height: 35px; }
.mobile .scroll-icon { display: none; }

@media (max-width: 1024px) {
    
    .scroll-icon { display: none; }
}

#record-tool { position: absolute; top: 0; left: 70px; z-index: 2; }
#record-tool img { position: absolute; top: 0; left: 0; width: 65px; height: 80px; margin: -37px 0 0 -32px; padding: 20px; z-index: 2; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record-tool .rec-icon { position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: #ff0000; }
#record-tool.it-tool .rec-icon { top: 162px; left: -2px; }
#record-tool.en-tool .rec-icon { top: 182px; left: -3px; }
#record-tool .tool-line-mask { position: absolute; top: 0; left: -10px; width: 20px; background-color: #fff; }
#record-tool.it-tool .tool-line-mask { height: 342px; margin-top: -155px; }
#record-tool.en-tool .tool-line-mask { height: 332px; margin-top: -126px; }
#record-tool .tool-line { position: absolute; width: 1px; top: 0; bottom: 0; background-color: rgba(153,153,153,.2); left: 50%; margin-left: -1px; }
#record-tool .label-mask { position: absolute; top: 0; left: 0; }
#record-tool .label-mask .label { position: absolute; top: 0; font-size: 10px; width: 100%; height: 100%; text-transform: uppercase; letter-spacing: .15em; overflow: hidden; }
#record-tool .label-mask .label span { position: absolute; display: inline-block; color: #333; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record-tool .label-top .label { text-align: left; left: 0; }
#record-tool .label-bottom .label { text-align: right; right: 0; }
#record-tool.it-tool .label-top { width: 100px; height: 12px; margin: -92px 0 0 -49px; }
#record-tool.it-tool .label-bottom { width: 118px; height: 12px; margin: 92px 0 0 -58px; }
#record-tool.en-tool .label-top { width: 74px; height: 12px; margin: -78px 0 0 -36px; }
#record-tool.en-tool .label-bottom { width: 135px; height: 12px; margin: 102px 0 0 -67px; }
#record-tool.it-tool .label-top .label span { width: 100px; left: 0; }
#record-tool.it-tool .label-bottom .label span { width: 118px; right: 0; }
#record-tool.en-tool .label-top .label span { width: 74px; left: 0; }
#record-tool.en-tool .label-bottom .label span { width: 135px; right: 0; }
#record-tool:hover img { opacity: 1 !important; }
#record-tool:hover .label span { opacity: .75 !important; }

#record-tool .waves { position: absolute; top: 50%; left: 0; margin: -35px 0 0 0; }
#record-tool svg.waves { position: absolute; top: 2px; left: 0; width: 200px; height: 200px; margin: -100px 0 0 -100px; }
#record-tool .waves .wave { position: absolute; top: 0; left: 0; border: 2px dotted #ff0000; border-radius: 50%; }
#record-tool .waves .wave { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
/*#record-tool .waves .wave-1 { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
#record-tool .waves .wave-2 { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
#record-tool .waves .wave-3 { width: 186px; height: 186px; margin: -93px 0 0 -93px; }*/
@media (max-width: 767px) {
    
    #record-tool { display: none !important; }
}

/* video filter */
#video-filters { position: absolute; top: 24px; left: 50%; width: 400px; height: 38px; margin-left: -200px; }

#video-filters .arrow { position: absolute; top: 0; left: 50%; width: 34px; height: 33px; z-index: 1; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#video-filters .arrow:hover { opacity: .5; }
#video-filters .arrow .arrow-icon { position: absolute; top: 50%; left: 50%; border-radius: 2px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
#video-filters .arrow-prev { margin-left: -240px;  }
#video-filters .arrow-next { margin-left: 210px;  }
#video-filters .arrow-prev .arrow-icon { border-right: 8px solid rgba(102,102,102,1); margin: -6px 0 0 -4px; }
#video-filters .arrow-next .arrow-icon { border-left: 8px solid rgba(102,102,102,1); margin: -6px 0 0 -4px; }
#video-filters .arrow.disabled,
#video-filters .arrow.disabled:hover { cursor: default; opacity: .2 !important; }

#video-filters #filter-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; overflow: hidden; }
#video-filters #filter-slider ul { position: relative; /*width: 400px;*/ width: auto; height: 100%; list-style: none; } /* width: 1242px */
#video-filters #filter-slider ul li { position: relative; float: left; display: block; font-size: 18px; color: rgba(102,102,102,.5); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#video-filters #filter-slider ul li:hover { background-color: #eee; }
#video-filters #filter-slider ul li.selected { background-color: #666; color: #fff; }
#video-filters #filter-slider .iScrollHorizontalScrollbar { position: absolute; bottom: -9px; left: 0; right: 0; height: 12px; background-color: transparent; display: none; visibility: hidden; }
#video-filters #filter-slider .iScrollHorizontalScrollbar:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: #ddd; }
#video-filters #filter-slider .iScrollIndicator { position: absolute; bottom: 0; left: 0; right: 0; height: 12px; background-color: transparent; cursor: pointer; }
#video-filters #filter-slider .iScrollIndicator:after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: #666; }

#video-filters #filter-select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 20px; display: none; }
#video-filters #filter-select select { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: #eee; padding: 0 10px; cursor: pointer; text-transform: uppercase; -webkit-appearance: none; appearance: none; }
#video-filters #filter-select #select-cta { position: absolute; top: 0; left: 20px; right: 20px; bottom: 0; background-color: #666; line-height: 30px; text-align: left; padding: 0 10px; text-transform: uppercase; letter-spacing: .1em; color: #fff; font-size: 15px;z-index: 2; pointer-events: none; }
#video-filters #filter-select #select-cta:after { content: ''; position: absolute; top: 10px; right: 10px; width: 15px; height: 10px; background-image: url(../img/assets/select-arrow.png); background-size: 100%; }

/* gallery filter */
#gallery-filters { position: absolute; top: 24px; left: 50%; width: 400px; height: 38px; margin-left: -200px; }

#gallery-filters .arrow { position: absolute; top: 0; left: 50%; width: 34px; height: 33px; z-index: 1; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#gallery-filters .arrow:hover { opacity: .5; }
#gallery-filters .arrow .arrow-icon { position: absolute; top: 50%; left: 50%; border-radius: 2px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
#gallery-filters .arrow-prev { margin-left: -240px;  }
#gallery-filters .arrow-next { margin-left: 210px;  }
#gallery-filters .arrow-prev .arrow-icon { border-right: 8px solid rgba(102,102,102,1); margin: -6px 0 0 -4px; }
#gallery-filters .arrow-next .arrow-icon { border-left: 8px solid rgba(102,102,102,1); margin: -6px 0 0 -4px; }
#gallery-filters .arrow.disabled,
#gallery-filters .arrow.disabled:hover { cursor: default; opacity: .2 !important; }

#gallery-filters #filter-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; overflow: hidden; }
#gallery-filters #filter-slider ul { position: relative; width: 1242px; height: 100%; list-style: none; } /* width: 1242px */
#gallery-filters #filter-slider ul li { position: relative; float: left; font-size: 18px; color: rgba(102,102,102,.5); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#gallery-filters #filter-slider ul li:hover { background-color: #eee; }
#gallery-filters #filter-slider ul li.selected { background-color: #666; color: #fff; }
#gallery-filters #filter-slider .iScrollHorizontalScrollbar { position: absolute; bottom: -9px; left: 0; right: 0; height: 12px; background-color: transparent; display: none; visibility: hidden; }
#gallery-filters #filter-slider .iScrollHorizontalScrollbar:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: #ddd; }
#gallery-filters #filter-slider .iScrollIndicator { position: absolute; bottom: 0; left: 0; right: 0; height: 12px; background-color: transparent; cursor: pointer; }
#gallery-filters #filter-slider .iScrollIndicator:after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: #666; }

#gallery-filters #filter-select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 20px; display: none; }
#gallery-filters #filter-select select { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: #eee; padding: 0 10px; cursor: pointer; text-transform: uppercase; -webkit-appearance: none; appearance: none; }
#gallery-filters #filter-select #select-cta { position: absolute; top: 0; left: 20px; right: 20px; bottom: 0; background-color: #666; line-height: 30px; text-align: left; padding: 0 10px; text-transform: uppercase; letter-spacing: .1em; color: #fff; font-size: 15px;z-index: 2; pointer-events: none; }
#gallery-filters #filter-select #select-cta:after { content: ''; position: absolute; top: 10px; right: 10px; width: 15px; height: 10px; background-image: url(../img/assets/select-arrow.png); background-size: 100%; }

@media (max-width: 767px) {
    
    /* video filter */
    #video-filters { top: 80px; left: 0; width: 100%; height: 30px; margin-left: 0; }

    #video-filters #filter-slider { display: none; }

    #video-filters #filter-select { display: block; }
    
    /* gallery filter */
    #gallery-filters { top: 80px; left: 0; width: 100%; height: 30px; margin-left: 0; }

    #gallery-filters #filter-slider { display: none; }

    #gallery-filters #filter-select { display: block; }
}

/* video counter */
#video-counter { position: static; }

#video-counter #video-circle-counter { position: absolute; display: block; top: 50%; right: 0; width: 100px; height: 100px; margin-top: -50px; z-index: 2; }
#video-counter #video-circle-counter svg { width: 100px; height: 100px; }
#video-counter #video-circle-counter .count { font-size: 30px; color: #999; position: absolute; top: 50%; left: 50%; margin: -26px 0 0 -32px; text-align: right; width: 30px; }
#video-counter #video-circle-counter .line { font-size: 30px; color: rgba(153,153,153,.2); position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -3px; }
#video-counter #video-circle-counter .total { font-size: 18px; color: #999; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 4px; letter-spacing: -.1em; }

#video-counter #video-lines-counter { position: absolute; left: 20px; right: 20px; bottom: 25px; height: 20px; display: none; }
#video-counter #video-lines-counter .line { position: relative; display: inline-block; width: 2px; height: 20px; margin: 0 5px; }
#video-counter #video-lines-counter .line:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background-color: rgba(163,163,163,.5); z-index: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#video-counter #video-lines-counter .line:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background-color: rgba(163,163,163, 1); z-index: 2; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#video-counter #video-lines-counter .line.selected:after { height: 100%; }

/* gallery counter */
#gallery-counter { position: static; }

#gallery-counter #gallery-circle-counter { position: absolute; display: block; top: 50%; right: 0; width: 100px; height: 100px; margin-top: -50px; z-index: 2; }
#gallery-counter #gallery-circle-counter svg { width: 100px; height: 100px; }
#gallery-counter #gallery-circle-counter .count { font-size: 30px; color: #999; position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -18px; }
#gallery-counter #gallery-circle-counter .line { font-size: 30px; color: rgba(153,153,153,.2); position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -3px; }
#gallery-counter #gallery-circle-counter .total { font-size: 18px; color: #999; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 4px; letter-spacing: -.1em; }

#gallery-counter #gallery-lines-counter { position: absolute; left: 20px; right: 20px; bottom: 25px; height: 20px; display: none; }
#gallery-counter #gallery-lines-counter .line { position: relative; display: inline-block; width: 2px; height: 20px; margin: 0 5px; }
#gallery-counter #gallery-lines-counter .line:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background-color: rgba(163,163,163,.5); z-index: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#gallery-counter #gallery-lines-counter .line:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background-color: rgba(163,163,163, 1); z-index: 2; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#gallery-counter #gallery-lines-counter .line.selected:after { height: 100%; }

@media (max-width: 767px) {
    
    /* video counter */
    #video-counter #video-circle-counter { display: none; }

    #video-counter #video-lines-counter { display: block; }

    /* gallery counter */
    #gallery-counter #gallery-circle-counter { display: none; }

    #gallery-counter #gallery-lines-counter { display: block; }
}

#video-slider { position: absolute; top: 80px; bottom: 80px; left: 140px; right: 140px; overflow: hidden; z-index: 1; }
#video-slider .video-slider-row { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
#video-slider .video-slider-row { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; }
/*#video-slider .video-slider-row:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }*/
#video-slider .video-slider-row .video-slider-item { position: relative; width: 100%; height: 100%; float: left; overflow: hidden; }
#video-slider .video-slider-row .video-slider-item .video-slider-item-holder { position: absolute; top: 0; left: 0; }
#video-slider .video-slider-row .video-slider-item video { position: relative; width: 100%; height: 100%; }
#video-slider .video-slider-row .video-slider-item img { position: relative; width: 100%; height: 100%; }
#video-slider .video-slider-row .video-slider-item .subs { position: absolute; bottom: 1em; left: 0; right: 0; text-align: center; }
#video-slider .video-slider-row .video-slider-item .subs span { background-color: rgba(255,255,255,1); font-size: 18px; color: #666666; display: inline-block; padding: .5em 1em; letter-spacing: .05em; }
#video-slider .video-slider-row .video-slider-item .play-video { position: absolute; display: none; z-index: 2; top: 50%; left: 50%; width: 120px; height: 120px; border-radius: 50%; margin: -60px 0 0 -60px; cursor: pointer; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#video-slider .video-slider-row .video-slider-item .play-video img { position: relative; width: 100%; height: 100%; }
#video-slider .video-slider-row .video-slider-item .video-slider-title { position: absolute; left: 0; right: 0; bottom: 80px; padding: 0 30px; text-align: center; z-index: 1; }
#video-slider .video-slider-row .video-slider-item .video-slider-title h3 { position: relative; font-size: 14px; letter-spacing: .1em; color: #fff; }
#video-slider .video-slider-row .video-slider-item .video-slider-title h2 { position: relative; font-size: 22px; letter-spacing: .1em; color: #fff; line-height: 1.25em; padding: .5em 0 0; text-transform: uppercase; }
#video-slider .video-slider-row .video-slider-item .video-slider-title h3 span,
#video-slider .video-slider-row .video-slider-item .video-slider-title h2 span { text-shadow: 1px 2px 0px rgba(0,0,0,.4) }
.mobile #video-slider .video-slider-row .video-slider-item .play-video { display: block; }


#video-slider .video-slider-row .video-slider-item {

    -moz-mask: url(../img/assets/mask-sprite.png);
    -webkit-mask: url(../img/assets/mask-sprite.png);
    mask: url(../img/assets/mask-sprite.png);

    -moz-mask-size: 2100% 100%;
    -webkit-mask-size: 2100% 100%;
    mask-size: 2100% 100%;
    
    -moz-mask-position: 0% 0%;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}


@media (max-width: 767px) {
    
    #video-slider .video-slider-row .video-slider-item .video-slider-title { display: none !important; }

    #video-slider { top: 125px; bottom: 70px; left: 20px; right: 20px; }
}

#gallery-slider { position: absolute; top: 50%; left: 0; right: 0; height: 80px; margin-top: -40px; }
#gallery-slider .gallery-slider-user { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 80px; overflow: hidden; }
#gallery-slider .gallery-slider-user p { font-size: 48px; color: #666; text-transform: uppercase; letter-spacing: .05em; opacity: .25; }

#gallery #gallery-mobile { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; background-color: #fff; }
#gallery #gallery-mobile h4 { position: relative; color: #999; font-size: 22px; line-height: 28px; letter-spacing: .1em; overflow: hidden; }
#gallery #gallery-mobile h4 span { position: relative; display: inline-block; }
#gallery #gallery-mobile h3 { position: relative; color: #181818; font-size: 42px; letter-spacing: .1em; margin: .15em 0; overflow: hidden; }
#gallery #gallery-mobile h3 span { position: relative; display: inline-block; }

#player-tool { position: absolute; top: 50%; left: 70px; }
#player-tool .icons { position: absolute; top: -50px; left: 0; }
#player-tool .icons .red-circle { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #ff0000; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin: -50px 0 0 -50px; }
#player-tool .icons .white-circle { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #ffffff; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin: -50px 0 0 -50px; }
#player-tool .icons .icon { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #ff0000; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin: -50px 0 0 -50px; }
#player-tool .icons .icon img { position: absolute; top: 50%; left: 50%; width: 25px; height: 40px; margin: -30px 0 0 -12px; }
#player-tool .icons .icon span { position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin-top: 18px; }
#player-tool .icons .icon .del { position: absolute; top: 50%; left: 50%; width: 2px; height: 36px; background-color: #fff; margin-top: -26px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#player-tool .icons .icon.rec-icon { z-index: 2; cursor: pointer; /*-moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;*/ }
#player-tool .icons .icon.rec-icon:hover { /*opacity: .5 !important;*/ } 
#player-tool .icons .icon.stop-icon { z-index: 1; cursor: pointer; /*-moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;*/ }
#player-tool .icons .icon.stop-icon:hover { /*opacity: 1 !important;*/ } 
#player-tool .line { position: absolute; top: 20px; left: 0; width: 1px; height: 40px; background-color: rgba(24,24,24,.3); }
#player-tool .time { position: absolute; top: 60px; left: -32px; color: #666; font-size: 36px; overflow: hidden; }
#player-tool .time>span { position: relative; display: inline-block; }

#player-countdown { position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 350px; color: #666; line-height: 130px; text-align: center; }
#player-countdown span { position: absolute; width: 160px; height: 170px; top: 50%; left: 50%; margin: -85px 0 0 -80px; }

#ink-cloud { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
#ink-cloud img { position: absolute; top: 50%; left: 50%; margin: -256px 0 0 -256px; z-index: 1; }

.tip-sprite { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.tip-sprite .icon { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #ff0000; color: #fff; margin: -150px 0 0 -50px; }
.tip-sprite .red-circle { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #ff0000; margin: -150px 0 0 -50px; }
.tip-sprite .gray-circle { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #efefef; margin: -150px 0 0 -50px; }
.tip-sprite .white-circle { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border-radius: 50%; background-color: #ffffff; margin: -150px 0 0 -50px; }
.tip-sprite .icon img { position: absolute; top: 50%; left: 50%; width: 25px; height: 40px; margin: -30px 0 0 -12px; }
.tip-sprite .icon span { position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin-top: 18px; }
.tip-sprite .icon .del { position: absolute; top: 50%; left: 50%; width: 2px; height: 36px; background-color: #fff; margin-top: -26px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.tip-sprite .text-icon { background-color: #ffffff; border: 2px solid #efefef; }
.tip-sprite .text-icon img { width: 52px; height: 34px; margin: -17px 0 0 -26px; }
.tip-sprite .counter { position: absolute; top: 50%; left: 50%; color: #fff; }
.tip-sprite .counter .base { position: absolute; top: 0; left: 0; }
.tip-sprite .counter .base:before { content: ''; position: absolute; top: -30px; left: 0; width: 1px; height: 60px; background-color: rgba(24,24,24,.2); }
.tip-sprite .counter .base:after { content: ''; position: absolute; top: 0; left: 0; margin: -19px 0 0 -19px; width: 38px; height: 38px; background-color: #999; border-radius: 50%; } {}
.tip-sprite .counter span { position: absolute; top: 0; left: 0; z-index: 1; margin: -5px 0 0 -6px; }
.tip-sprite p { position: absolute; top: 50%; left: 0; right: 0; margin-top: 50px; overflow: hidden; }
.tip-sprite p span { position: relative; display: inline-block; }
.tip-sprite .red { color: #ff0000; }
.tip-sprite.tip-2 p { margin-top: 56px; }
.tip-sprite.tip-2 .text-alias { position: relative; width: 290px; margin: 1.85em auto; font-size: 14px; line-height: 1.5em; text-align: left; overflow: hidden; }
.tip-sprite.tip-2 .text-alias span { position: relative; display: inline-block; }
.tip-sprite.tip-3 .time { position: absolute; top: 50%; right: 50%; margin: -16px -90px 0 0; font-size: 24px; letter-spacing: -.01em;}

.cta { position: relative; font-size: 10px; border: 1px solid #fff; display: inline-block; text-transform: uppercase; letter-spacing: .15em; padding: 1.5em 1.75em; margin: 1em; cursor: pointer; }
.cta.linear-cta { background: none; border: 0; font-size: 9px; color: #999; }
.cta.default-cta { background-color: rgba(255,255,255,.5); color: #666; border-color: #e5e5e5; }
.cta.connect-cta { background-color: rgba(68,105,176,1); color: #fff; border-color: transparent;  }
.cta.linear-cta a { color: #999; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } 
.cta.default-cta.disabled { cursor: default !important; }
.cta.default-cta.disabled span { opacity: .4 !important; }


/**
 * preloader
 */
#preloader { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background-color: #fff; }
#preloader #loader { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; z-index: 2; }
#preloader #loader svg { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#preloader #loader .progress { position: relative; width: 100%; height: 100%; line-height: 98px; text-align: center; font-size: 20px; color: #666; padding-left: .25em; }
#preloader #loader .progress .perc { font-size: 14px; }
#preloader #alert { position: absolute; top: 50%; left: 50%; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: .05em; margin: 70px 0 0 -70px; color: #999; }
#preloader #alert img { position: relative; width: 20px; height: 20px; display: inline; opacity: .5; top: 4px; }


/**
 * canvas
 */
canvas#app-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/**
 * header
 */
header { position: static; }

header #main-logo { position: absolute; left: 0; top: 0; cursor: default; z-index: 5; padding: 20px 20px 5px 30px; background-color: #fff; }
header #main-logo h1 { position: relative; top: -4px; left: 0; }
header #main-logo h1 span { position: absolute; text-indent: -999em; }
header #main-logo h2 { position: relative; top: -8px; left: 0; font-size: 14px; color: #999; }
header #main-logo img { position: relative; width: 110px; height: 30px; top: 0; left: -3px; }

header #main-menu { position: absolute; right: 66px; top: 30px;cursor: default; z-index: 5; }
header #main-menu .hit-area { position: relative; width: 44px; height: 44px; margin: -13px -7px 0 0; background-color: rgba(0,0,0,0); cursor: pointer; }
header #main-menu .hamb-icon:before,
header #main-menu .hamb-icon,
header #main-menu .hamb-icon:after { position: absolute; right: 0; height: 2px; background-color: #666; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; }
header #main-menu .hamb-icon:before { content: ''; width: 10px; top: -8px; }
header #main-menu .hamb-icon { width: 22px; top: 50%; margin-top: -1px; right: 7px; }
header #main-menu .hamb-icon:after { content: ''; width: 30px; top: 8px; }
header #main-menu h4 { position: absolute; top: 120px; left: -6px; width: 80px; text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: .15em; color: #999; }
header #main-menu .hit-area:hover .hamb-icon:before { width: 30px; }
header #main-menu .hit-area:hover .hamb-icon:after { width: 10px; }

@media (max-width: 767px) {
    
    header #main-logo { left: -10px; }

    header #main-menu { right: 20px; }
    header #main-menu .arrow-sprite.arrow-top { display: none; }
    header #main-menu h4 { display: none; }
}

header #open-menu { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background-color: #181818; } 
header #open-menu .menu-close-icon { position: absolute; top: 18px; right: 50px; width: 44px; height: 44px; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
header #open-menu .menu-close-icon:before { content: ''; position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -1px; height: 30px; width: 2px; background-color: #fff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
header #open-menu .menu-close-icon:after { content: ''; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -18px; width: 36px; height: 2px; background-color: #fff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
header #open-menu .menu-close-icon:hover { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
header #open-menu ul { line-height: 3em; list-style: none; }
header #open-menu ul li { position: relative; text-align: center; }
header #open-menu ul li a { position: relative; color: #fff; text-decoration: none; font-size: 40px; letter-spacing: .1em; }
header #open-menu ul li a:after { content: ''; position: absolute; top: 50%; left: -8px; right: -8px; height: 2px; margin-top: 5px; background-color: #fff; -moz-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
header #open-menu ul li a.active:after {}
header #open-menu ul li a.active.ready:after { -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
header #open-menu ul li a:hover:after { -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
header #open-menu .menu-line { position: absolute; width: 1px; height: 100px; background-color: rgba(255,255,255,.2); left: 50%; top: 50%; }
header #open-menu .menu-line.line-top { margin-top: -265px; }
header #open-menu .menu-line.line-bottom { margin-top: 155px; }

header #open-menu #menu-terms { position: absolute; display: none; left: 0; right: 0; bottom: 20px; width: 100%; text-align: center; text-transform: uppercase; z-index: 1; }
header #open-menu #menu-terms a { text-decoration: none; color: #999; font-size: 8px; letter-spacing: .15em; padding: .75em; }

header #open-menu #menu-share { position: absolute; display: none; top: 50%; left: 50%; margin: 140px 0 0 -10px; }
header #open-menu #menu-share img { position: absolute; right: 0; width: 26px; height: 26px; cursor: pointer; z-index: 2; }
header #open-menu #menu-share img.fb-icon { top: 0; left: -45px; }
header #open-menu #menu-share img.gp-icon { top: 0; left: 0; }
header #open-menu #menu-share img.tw-icon { top: 0; left: 45px; }

header #open-menu .menu-lang { position: absolute; display: none; top: 50%; left: 0; right: 0; text-align: center; margin: 176px 0 0 0; color: #fff; font-size: 9px; letter-spacing: .2em; }
header #open-menu .menu-lang.it .lang-icon.lang-it { display: none; }
header #open-menu .menu-lang.it .lang-icon.lang-en { display: block; }
header #open-menu .menu-lang.en .lang-icon.lang-it { display: block; }
header #open-menu .menu-lang.en .lang-icon.lang-en { display: none; }

@media (max-width: 767px) {

    header #open-menu ul { line-height: 2.15em; padding-bottom: 60px; }
    header #open-menu ul li a { font-size: 16px; }
    header #open-menu ul li a:after { margin-top: 2px; }
    header #open-menu .menu-line { height: 50px; }
    header #open-menu .menu-line.line-top { margin-top: -185px; }
    header #open-menu .menu-line.line-bottom { margin-top: 75px; }
    header #open-menu .menu-close-icon { right: 10px; }
    header #open-menu #menu-share { display: block; }
    header #open-menu #menu-terms { display: block; }
    header #open-menu .menu-lang { display: block; }
}


/**
 * footer
 */
footer { position: static; }

footer #foo-tools { position: absolute; z-index: 5; }

footer #foo-tools .share {}
footer #foo-tools .share img { position: absolute; right: 0; width: 20px; height: 20px; cursor: pointer; z-index: 2; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
footer #foo-tools .share img.fb-icon { bottom: 65px; }
footer #foo-tools .share img.gp-icon { bottom: 32px; right: -2px; }
footer #foo-tools .share img.tw-icon { bottom: 0px; }
footer #foo-tools .share img:hover { opacity: 1 !important; }

footer #foo-tools .lang { position: absolute; bottom: 38px; right: 24px; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
footer #foo-tools .lang .lang-icon { position: absolute; color: #333; bottom: 0; right: 0; font-size: 10px; letter-spacing: .15em; cursor: pointer; padding: 1em; }
footer #foo-tools .lang .lang-icon.lang-it { right: 5px; }
footer #foo-tools .lang.it .lang-icon.lang-it { display: none; }
footer #foo-tools .lang.it .lang-icon.lang-en { display: block; }
footer #foo-tools .lang.en .lang-icon.lang-it { display: block; }
footer #foo-tools .lang.en .lang-icon.lang-en { display: none; }
footer #foo-tools .lang:hover { opacity: 1 !important; }

footer #foo-tools .audio { position: absolute; right: 61px; bottom: -4px; cursor: pointer; }
footer #foo-tools .audio img { position: relative; width: 20px; height: 20px; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
footer #foo-tools .audio:after { content: ''; position: absolute; top: 0; left: 9px; width: 2px; height: 20px; background-color: #999; -moz-transform: rotate(40deg) scale(1, 0); -webkit-transform: rotate(40deg) scale(1, 0); transform: rotate(40deg) scale(1, 0); -webkit-transition: .335s ease-in-out; transition: .335s ease-in-out; }
footer #foo-tools .audio.muted:after { -moz-transform: rotate(40deg) scale(1, 1); -webkit-transform: rotate(40deg) scale(1, 1); transform: rotate(40deg) scale(1, 1); }
footer #foo-tools .audio:hover img { opacity: 1 !important; }
footer #foo-tools .audio:hover:after { background-color: #333; }

@media (max-width: 767px) {

    footer #foo-tools { display: none; }
}

footer #foo-terms { position: absolute; width: 100%; text-align: center; text-transform: uppercase; z-index: 1; }
footer #foo-terms a { text-decoration: none; color: #333; font-size: 9px; letter-spacing: .15em; padding: 1.25em; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
footer #foo-terms a:hover { opacity: 1 !important; }

@media (max-width: 767px) {

    footer #foo-terms { display: none; }
}


/**
 * intro
 */
#intro { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; overflow: hidden; }
#intro video { position: relative; width: 100%; height: 100%; background-color: #fff; }
#intro .skip-intro { position: absolute; bottom: .5em; left: 0; right: 0; text-align: center; z-index: 1; }
#intro .skip-intro .skip-cta { position: relative; display: inline-block; padding: 1em; }
#intro .skip-intro .skip-cta span { position: relative; display: inline-block; padding: 0 0 .25em 0; font-size: 10px; text-transform: uppercase; color: #999; border-bottom: 1px solid #999; letter-spacing: .15em; cursor: pointer; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#intro .play-intro { position: absolute; display: none; z-index: 2; top: 50%; left: 50%; width: 120px; height: 120px; border-radius: 50%; margin: -60px 0 0 -60px; cursor: pointer; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 2 !important; }
#intro .play-intro img { position: relative; width: 100%; height: 100%; }
#intro .skip-intro .skip-cta:hover span { color: #666; }
.mobile #intro .play-intro { display: block; }


/**
 * sound
 */
#sound { position: absolute; bottom: 0; left: 0; display: none; z-index: 10; }


/**
 * sections
 */
.section { position: relative; }


/**
 * bio section
 */
#bio {  }
#bio #bio-steps-scroller { position: relative; width: 100%; height: 100%; }
#bio #bio-steps-scroller #bio-steps-scroller-wrap { width: 100%; height: auto; padding-bottom: 2em; }
#bio #bio-steps-scroller .iScrollVerticalScrollbar { position: absolute; bottom: 2px; right: 4px; top: 2px; width: 5px; background-color: transparent; }
#bio #bio-steps-scroller .iScrollIndicator { position: absolute; bottom: 0; right: 0; top: 0; width: 5px; background-color: #666; border-radius: 2px; }
#bio #bio-steps { position: relative; width: 100%; height: 100%; text-align: center; color: #181818; }
#bio #bio-steps .light-grey { color: #999999; }
#bio #bio-steps #max-wrap { position: relative; width: 100%; max-width: 768px; padding: 0 20px; height: auto; margin: 0 auto; } 
#bio #bio-steps .init-title { position: absolute; top: 50px; width: 100%; z-index: 1; font-size: 18px; text-transform: uppercase; text-align: center;}
#bio #bio-steps .step { position: relative; width: 100%; height: auto; margin-bottom: 50px }
#bio #bio-steps .step-initial { height: 100%; min-height: 100%; width: 100%; max-width: 768px; padding: 0 20px; margin: 0 auto }
#bio #bio-steps .max-w-img { width: 100%; margin: 0 auto; }
#bio #bio-steps .max-h-img { height: 100%; margin: 0 auto; }
#bio #bio-steps .name { letter-spacing: 0.15em; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#bio #bio-steps .name_s { font-size: 36px; margin-left: -53%; margin-top: -5%; line-height: 35px; }
#bio #bio-steps .name_l { font-size: 60px; margin-left: -33%; line-height: 60px; }
#bio #bio-steps .line-bullet { position: relative; margin: 0px auto 50px; width: 50px; height: 100px; display: table; }
#bio #bio-steps .line-bullet::before { content: ''; position: absolute; left: 0; height: 100px; width: 1px; background-color: #b9b9b9  }
#bio #bio-steps .line-bullet p { display: table-cell; vertical-align: middle; font-size: 24px }
#bio #bio-steps .step-initial p { position: relative; z-index: 1; }
#bio #bio-steps .step-paragraph p.paragraph { text-align: left; padding-bottom: 20px; letter-spacing: .1em }
#bio #bio-steps .step-img-caption img.max-w-img { margin-bottom: 10px }
#bio #bio-steps .step-img-caption .caption { font-size: 10px; text-align: left; text-transform: uppercase; letter-spacing: .1em; }
#bio #bio-steps .step-quote-img .quote-wrap { position: relative; width: 100%; text-align: center; cursor: pointer; }
#bio #bio-steps .step-quote-img .quote-wrap p { position: relative; z-index: 2; font-size: 36px; line-height: 50px; margin: 0 auto; vertical-align: middle; }
#bio #bio-steps .step-quote-img .quote-wrap span { letter-spacing: .125em; }
#bio #bio-steps .quote p { font-size: 34px; line-height: 46px; margin: 0 auto; vertical-align: middle; letter-spacing: .1em; }
#bio #bio-steps .img-quote-wrap { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#bio #bio-steps .iframe-yt-video { width: 100%; max-width: 660px; height: 360px; background-color: #000; }
#bio #bio-steps .img-quote-wrap img { position: absolute; top: 0; left: 0; height: 100%; width: auto; }

@media screen and (max-width: 767px) {
    
    #bio #bio-steps .name_s { margin: 0 auto; font-size: 26px; }
    #bio #bio-steps .name_l { margin: 0 auto; font-size: 50px; line-height: 50px; }
    #bio #bio-steps .quote p { font-size: 26px; line-height: 38px; }
    #bio #bio-steps .step-quote-img .quote-wrap p { font-size: 26px; line-height: 38px; }
    #bio #bio-steps .step-initial .table-cell { padding-top: 5em; }
    #bio #bio-steps .quote p br, #bio #bio-steps .step-quote-img p br { display: none; }
} 


/**
 * record section
 */
#record .waves { position: absolute; top: 50%; left: 50%; }
#record .waves .wave { position: absolute; top: 0; left: 0; border: 2px dotted #999; border-radius: 50%; }
#record .waves .wave { width: 800px; height: 800px; margin: -400px 0 0 -400px; }
#record svg.waves { position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px; }
#record svg.waves circle {  }
/*#record .waves .wave-1 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
#record .waves .wave-2 { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
#record .waves .wave-3 { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
#record .waves .wave-4 { width: 660px; height: 660px; margin: -330px 0 0 -330px; }*/

#record #record-form { position: static; } 

#record #record-form #record-steps { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

#record #record-form #record-steps .step { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

#record #record-form #record-steps .step .slider ul { position: absolute; top: 0; left: 0; list-style: none; width: 1000em; overflow: hidden; }
#record #record-form #record-steps .step .slider ul li { position: relative; display: block; float: left; padding: 0 25px; color: #181818; cursor: pointer; }

#record #record-form #record-steps .step .cta {  }
#record #record-form #record-steps .step .cta span { -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-steps .step .cta:hover {  }
#record #record-form #record-steps .step .cta:hover span { opacity: .4; }
#record #record-form #record-steps .step .cta.linear-cta:hover span { opacity: 1; }
#record #record-form #record-steps .step .cta.linear-cta a:hover { opacity: .4; }

#record #record-form #record-steps .step.step-1 { }
#record #record-form #record-steps .step.step-1 .main-cat { position: absolute; top: 50%; left: 50%; margin-top: -26px; }
#record #record-form #record-steps .step.step-1 .main-cat ul li { font-size: 48px; max-width: 560px; line-height: 1em; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-1 .main-cat ul li>span { position: relative; display: inline-block; }

#record #record-form #record-steps .step.step-2 { }
#record #record-form #record-steps .step.step-2 .main-cat-selection { position: absolute; top: 50%; left: 0; right: 0; margin-top: -180px; font-size: 48px; color: rgba(24,24,24,.2); line-height: 1em; letter-spacing: .1em; text-align: center; overflow: hidden; }
#record #record-form #record-steps .step.step-2 .sub-cat { position: absolute; top: 50%; left: 50%; margin-top: -40px; }
#record #record-form #record-steps .step.step-2 .sub-cat ul li { font-size: 30px; height: 80px; line-height: 1em; letter-spacing: .1em; overflow: hidden; /*max-width: 640px;*/ }

#record #record-form #record-steps .step.step-3 { }
#record #record-form #record-steps .step.step-3 p { position: relative; width: 100%; font-size: 10px; color: #666; display: inline-block; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; }
#record #record-form #record-steps .step.step-3 p span:before { content: ''; position: absolute; top: 2px; left: -25px; color: #999; border-radius: 50%; width: 5px; height: 5px; background-color: #ff0000; }
#record #record-form #record-steps .step.step-3 h4 { position: relative; color: #999; font-size: 24px; margin: 0 auto; line-height: 1em; letter-spacing: .1em; overflow: hidden; /*width: 390px;*/ }
#record #record-form #record-steps .step.step-3 h3 { position: relative; color: #181818; font-size: 30px; line-height: 1em; padding: .5em 0 .75em; letter-spacing: .1em; }
#record #record-form #record-steps .step.step-3 h4 span,
#record #record-form #record-steps .step.step-3 p span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-3 .cta { position: absolute; width: 120px; top: 50%; left: 50%; margin: 90px 0 0 -60px; }

#record #record-form #record-steps .step.step-4 { }
#record #record-form #record-steps .step.step-4 ul { position: relative; width: 100%; height: auto; overflow: hidden; padding: 1em; list-style: none; }
#record #record-form #record-steps .step.step-4 ul li { position: relative; float: left; width: 33.32%; min-height: 320px; height: auto; }
#record #record-form #record-steps .step.step-4 ul li { font-size: 10px; text-transform: uppercase; color: #999; letter-spacing: .15em; padding: 0 2em; }
#record #record-form #record-steps .step.step-4 .table-cell { position: relative; }
#record #record-form #record-steps .step.step-4 .cta { position: absolute; top: 50%; left: 50%; width: 292px; margin: 125px 0 0 -146px; }
#record #record-form #record-steps .step.step-4 .cta.linear-cta { width: 380px; margin: 170px 0 0 -190px; }

#record #record-form #record-steps .step.step-5 { }
#record #record-form #record-steps .step.step-5 #text-holder { position: relative; width: 600px; height: 220px; margin: 0 auto; text-align: left; cursor: default; }
#record #record-form #record-steps .step.step-5 #text-holder #text-scroller { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#record #record-form #record-steps .step.step-5 #text-holder #text-scroller #text-scroller-wrap { position: relative; width: 100%; height: auto; padding: 0 30px; }
#record #record-form #record-steps .step.step-5 #text-holder #text-scroller #text-scroller-wrap p { position: relative; font-size: 14px; letter-spacing: .125em; color: #666; text-transform: uppercase; text-align: justify; line-height: 2em; }
#record #record-form #record-steps .step.step-5 #text-holder #text-scroller .iScrollVerticalScrollbar { position: absolute; bottom: 2px; right: 0; top: 2px; width: 5px; background-color: transparent; }
#record #record-form #record-steps .step.step-5 #text-holder #text-scroller .iScrollIndicator { position: absolute; bottom: 0; right: 0; top: 0; width: 5px; background-color: #666; border-radius: 2px; }

#record #record-form #record-steps .step.step-6 { }
#record #record-form #record-steps .step.step-6 h4 { position: relative; color: #999; font-size: 24px; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-6 h4 span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-6 h3 { position: relative; color: #181818; font-size: 48px; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-6 .radio { position: relative; overflow: hidden; }
#record #record-form #record-steps .step.step-6 .radio input { position: relative; display: inline-block; top: 2px; left: 0; }
#record #record-form #record-steps .step.step-6 .radio label { position: relative; display: inline-block; font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: .15em; padding: 1em; }
#record #record-form #record-steps .step.step-6 .radio label a { color: #666; }
#record #record-form #record-steps .step.step-6 .table-cell { position: relative; }
#record #record-form #record-steps .step.step-6 p.error { font-size: 10px; color: #ff0000; text-transform: uppercase; letter-spacing: .15em; position: absolute; bottom: 50%; margin-bottom: -140px; right: 0; left: 0; text-align: center; }

#record #record-form #record-steps .step.step-7 { }
#record #record-form #record-steps .step.step-7 h4 { position: relative; color: #999; font-size: 24px; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-7 h4 span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-7 h3 { position: relative; color: #181818; font-size: 48px; letter-spacing: .1em; margin: .15em 0; overflow: hidden; }
#record #record-form #record-steps .step.step-7 p { position: relative; color: #666; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin: 1em 0; overflow: hidden; }
#record #record-form #record-steps .step.step-7 p span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-7 .share { position: absolute; left: 0; right: 0; top: 50%; margin-top: 100px;} 
#record #record-form #record-steps .step.step-7 .share p { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: #999; }
#record #record-form #record-steps .step.step-7 .share .share-icons {}
#record #record-form #record-steps .step.step-7 .share .share-icons img { position: relative; padding: .5em; width: 40px; height: 40px; margin: 0 .15em; opacity: .4; cursor: pointer; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-steps .step.step-7 .share .share-icons img:hover { opacity: 1 !important; }
#record #record-form #record-steps .step.step-7 .share .share-icons img.gp-icon { margin-right: 0; }

#record #record-form #record-steps .step.step-8 { }
#record #record-form #record-steps .step.step-8 h4 { position: relative; color: #999; font-size: 24px; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-8 h4 span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-8 h3 { position: relative; color: #181818; font-size: 48px; letter-spacing: .1em; margin: .15em 0; overflow: hidden; }
#record #record-form #record-steps .step.step-8 h3 span { position: relative; display: inline-block; }

#record #record-form #record-steps .step.step-9 { }
#record #record-form #record-steps .step.step-9 h4 { position: relative; color: #999; font-size: 22px; line-height: 28px; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-9 h4 span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-9 h3 { position: relative; color: #181818; font-size: 42px; letter-spacing: .1em; margin: .15em 0; overflow: hidden; }
#record #record-form #record-steps .step.step-9 h3 span { position: relative; display: inline-block; }

#record #record-form #record-steps .step.step-10 { }
#record #record-form #record-steps .step.step-10 h4 { position: relative; color: #999; font-size: 24px; letter-spacing: .1em; overflow: hidden; }
#record #record-form #record-steps .step.step-10 h4 span { position: relative; display: inline-block; }
#record #record-form #record-steps .step.step-10 h3 { position: relative; color: #181818; font-size: 48px; letter-spacing: .1em; margin: .15em 0; overflow: hidden; }
#record #record-form #record-steps .step.step-10 h3 span { position: relative; display: inline-block; }

#record #record-form #record-ui { position: static; }

#record #record-form #record-ui #record-ui-head { position: absolute; top: 10px; left: 0; right: 0; }
#record #record-form #record-ui #record-ui-head h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: #999; padding: 10px 0; }
#record #record-form #record-ui #record-ui-head h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .1em; color: #666; }

#record #record-form #record-ui #record-ui-arrows { position: absolute; top: 50%; left: 50%; margin-top: 7%; z-index: 2; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow,
#record #record-form #record-ui #record-ui-arrows .next-arrow { position: absolute; top: 0; text-transform: uppercase; color: #999; font-size: 10px; letter-spacing: .15em; cursor: pointer; padding: 1em; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow.it,
#record #record-form #record-ui #record-ui-arrows .next-arrow.it { width: 155px; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow.en,
#record #record-form #record-ui #record-ui-arrows .next-arrow.en { width: 105px; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow span,
#record #record-form #record-ui #record-ui-arrows .next-arrow span { -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow { right: 0; text-align: left; }
#record #record-form #record-ui #record-ui-arrows .next-arrow { left: 0; text-align: right; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow .arrow-sprite { right: 10px; top: 16px; background-color: #999; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-ui #record-ui-arrows .next-arrow .arrow-sprite { left: 10px; top: 16px; background-color: #999; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow .arrow-sprite:after { border-right-color: #999; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-ui #record-ui-arrows .next-arrow .arrow-sprite:after { border-left-color: #999; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow:hover {}
#record #record-form #record-ui #record-ui-arrows .prev-arrow:hover span { color: #333; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow:hover .arrow-sprite { background-color: #333; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow:hover .arrow-sprite:after { border-right-color: #333; }
#record #record-form #record-ui #record-ui-arrows .next-arrow:hover {}
#record #record-form #record-ui #record-ui-arrows .next-arrow:hover .arrow-sprite { background-color: #333; }
#record #record-form #record-ui #record-ui-arrows .next-arrow:hover .arrow-sprite:after { border-left-color: #333; }
#record #record-form #record-ui #record-ui-arrows .next-arrow:hover span { color: #333; }

#record #record-form #record-ui #record-ui-arrows .prev-arrow.disabled,
#record #record-form #record-ui #record-ui-arrows .next-arrow.disabled { cursor: default; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow.disabled .arrow-sprite,
#record #record-form #record-ui #record-ui-arrows .next-arrow.disabled .arrow-sprite { background-color: #ddd; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow.disabled .arrow-sprite:after { border-right-color: #ddd; }
#record #record-form #record-ui #record-ui-arrows .next-arrow.disabled .arrow-sprite:after { border-left-color: #ddd; }
#record #record-form #record-ui #record-ui-arrows .prev-arrow.disabled span,
#record #record-form #record-ui #record-ui-arrows .next-arrow.disabled span { color: #ddd; }

#record #record-form #record-ui #record-ui-line-nav { position: absolute; bottom: 75px; left: 50%; }
#record #record-form #record-ui #record-ui-line-nav ul { position: relative; height: 20px; width: 72px; margin-left: -36px; list-style: none; }
#record #record-form #record-ui #record-ui-line-nav ul li { position: relative; float: left; margin: 0 5px; width: 2px; height: 20px; }
#record #record-form #record-ui #record-ui-line-nav ul li:before { content: ''; position: absolute; bottom: 0; left: 0; width: 2px; height: 10px; background-color: rgba(24,24,24,.2);  }
#record #record-form #record-ui #record-ui-line-nav ul li:after { content: ''; position: absolute; bottom: 0; left: 0; width: 2px; height: 0px; background-color: rgba(24,24,24,1); -webkit-transition: 1s ease-out; transition: .5s ease-in-out; }
#record #record-form #record-ui #record-ui-line-nav ul li.selected:after { height: 20px; }

#record #record-form #record-ui #record-ui-back { position: absolute; left: 55px; bottom: 75px; text-transform: uppercase; font-size: 10px; letter-spacing: .15em; color: #999; z-index: 2; padding: 10px 30px; margin-bottom: -32px; cursor: pointer; }
#record #record-form #record-ui #record-ui-back:before { content: ''; position: absolute; top: 50%; left: 0; width: 20px; height: 2px; margin-top: -1px; background-color: #181818; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#record #record-form #record-ui #record-ui-back.it:hover:before { width: 95px; }
#record #record-form #record-ui #record-ui-back.en:hover:before { width: 70px; }


/**
 * credits section
 */
#credits {  }
#credits .step { float: left; }
#credits #credits-steps { position: relative; width: 100%; height: 100%; color: #181818; }
#credits #credits-steps-scroller { position: relative; width: 100%; height: 100%; }
#credits #credits-steps-scroller #credits-steps-scroller-wrap { width: 100%; height: auto; padding-bottom: 1em; }
#credits #credits-steps-scroller .iScrollVerticalScrollbar { position: absolute; bottom: 2px; right: 4px; top: 2px; width: 5px; background-color: transparent; }
#credits #credits-steps-scroller .iScrollIndicator { position: absolute; bottom: 0; right: 0; top: 0; width: 5px; background-color: #666; border-radius: 2px; }
#credits #credits-steps .light-grey { color: #999; }
#credits #credits-steps .devil-grey { color: #666; }
#credits #max-wrap { position: relative; width: 100%; max-width: 768px; padding: 0 20px; height: auto; margin: 0 auto; overflow: hidden; } 
#credits .intro-title { position: relative; margin-top: 150px; margin-left: -150px; margin-bottom: 50px; width: 100%; z-index: 1; font-size: 44px; text-align: center;}
#credits .step { position: relative; width: 100%; height: auto; margin-bottom: 50px }
#credits .step--initial { height: 100%; min-height: 100%; width: 100%; max-width: 768px; padding: 0 20px; margin: 0 auto }
#credits .max-w-img { width: 100%; margin: 0 auto; }
#credits .line-bullet { position: relative; margin: 0px auto 50px; width: 50px; height: 100px; display: table; }
#credits .line-bullet::before { content: ''; position: absolute; left: 0; height: 100px; width: 1px; background-color: #b9b9b9  }
#credits .line-bullet p { display: table-cell; vertical-align: middle; font-size: 24px }
#credits .step--initial p { position: relative; }
#credits .step--paragraph p.paragraph { text-align: left; padding-bottom: 20px; letter-spacing: .1em }
#credits .step--paragraph p.paragraph img { position: relative;}
#credits .step--paragraph p.paragraph img.logo-cdec { width: 150px; height: auto; margin-left: -8px; }
#credits .step--paragraph p.paragraph img.logo-shoah { width: 80px; height: auto; margin-left: 20px; }
#credits p.paragraph--title { font-size: 30px; text-align: left; margin-bottom: 40px }
#credits .clmn-wrap { float: left; width: 100%; }
#credits .clmn-wrap a { color: #666; text-decoration: none; -moz-transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#credits .clmn-wrap a:hover { color: #333; }
#credits .clmn { float: left; width: 50%; text-align: left; }
#credits .side-title { font-size: 18px; margin-bottom: 20px; padding: 10px 0 0 }
#credits .people-list { list-style: none; }
#credits .people-wrap { padding: 10px 0; }
#credits .people-wrap p { text-transform: uppercase; }
#credits p.people-name { font-size: 14px; } 
#credits p.people-title { font-size: 18px; } 

@media screen and (max-width: 667px){
    #credits .intro-title { margin-left: 0; text-align: left; font-size: 40px }
    #credits .clmn { width: 100% }
    #credits p.paragraph--title { font-size: 24px }
    #credits .people-list, 
    #credits .side-title { width: 80%; margin: 0 auto 20px }
}


/**
 * IOS hide media ui
 */
*::-webkit-media-controls-panel { display: none!important; -webkit-appearance: none; appearance: none; }

*::--webkit-media-controls-play-button { display: none!important; -webkit-appearance: none; appearance: none; }

*::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; appearance: none; }