.video-container { height: 0px; background: no-repeat center center; background-size: cover;  padding: 0; overflow: hidden;
    

    -webkit-box-shadow:inset 0 0 10px 2px rgba(0,0,0,0.2);
    box-shadow:inset 0 0 10px 2px rgba(0,0,0,0.2);
}
.video-container * {  
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
}

/*.video-container.show { height: 220px; }*/
.video-container.active { height: 500px !important; 
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
}
.video-container.hide {
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
}


#hero .video-button, .video-container .video-button { position: absolute; bottom: 0; left: 0; width: 100%;  z-index: 2; text-align: center;
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    transition: all 1.2s;
    
}

#hero .video-button { bottom: 0; }
.video-container .video-button.active { bottom: 0;  }
#hero .video-button, .video-container .video-button { font-size: 20px; }
.video-container .video-button.hide { bottom: -220px; }
.video-container .video-button .arrow { background: url(/images/layout/video/arrow.png) no-repeat center bottom; height: 32px; }
#hero .video-button, .video-container .video-button .video-button-wrapper { display: inline-block; background: #d4461e; padding: 16px 30px 10px; box-sizing: border-box; color: #fff; text-transform: uppercase; text-align: center;  cursor: pointer; }
#hero .video-button .text .bold, .video-container .video-button .text .bold { font-family: "BebasNeueRegular",sans-serif; font-size: 30px; letter-spacing: .01em; }
#hero .video-button .text .normal, .video-container .video-button .text .normal { font-family: "Lobster",cursive; font-size: 20px; text-transform: none; }
#hero .video-button .text .normal { font-size: 18px; }
#hero .video-button { left: 20px; margin: 0; width: auto; }
#hero .video-button .arrow { background: url(/images/layout/video/arrow_sm.png); width: 9px; height: 10px; display: inline-block; vertical-align: middle; }
    

.video-container .video-popup { background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: -1; }
.video-container.active .video-popup { opacity: 1; z-index: auto; }
.video-container .video-wrapper { width: 890px; height: 100%; margin: 0 auto; position: relative; }
.video-container .control { position: absolute; left: 50%; top: 50%; margin-left: -43px; margin-top: -43px; opacity: 0; background: url(/images/layout/video/icon_play.png) no-repeat; width: 86px; height: 85px; cursor: pointer;  }
.video-container .video-wrapper:hover .control { opacity: .9;  }
.video-container .control.pause { background: url(/images/layout/video/icon_pause.png); }
.video-container .video-popup .close { position: absolute; right: 10px; top: 10px; background: url(/images/layout/video/close_sm.png) no-repeat; width: 20px; height: 20px; cursor: pointer;  }

.video-container .special-button { position: absolute; bottom: -220px; width: 100%; left: 0; cursor: pointer; z-index: 2; text-align: center;
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    transition: all 1.2s;       
}
.video-container .special-button-wrapper { background: #d4461e; padding: 10px 15px; box-sizing: border-box; color: #fff; text-align: center; font-size: 14px; letter-spacing: .01em; display: inline-block; text-transform: uppercase; }

.video-container .special-button .arrow { background: url(/images/layout/video/arrow_sm.png); width: 9px; height: 10px; display: inline-block; vertical-align: middle; }
.video-container .special-button a { color: #fff; }
.video-container .special-button span { display: inline-block; vertical-align: middle; }
.video-container .special-button .highlight { font-family: "Lobster",cursive; font-size: 16px; text-transform: none; display: inline; vertical-align: top; }
.video-container .special-button.active { bottom: 0; }

@media screen and (max-width:890px) {
    .video-container .video-wrapper { width: 100%; }
    .video-container.active { height: auto !important; padding-top: 50%; }
}

@media screen and (max-width:767px) {
    #hero .video-button { display: none; }
    .video-container.active { padding-top: 100%; }
    /*.video-container .video-button { padding: 2px 0 4px; width: 220px; margin-left: -110px; }*/
    .video-container .video-button .video-button-wrapper { padding: 6px 4px; width: 100%; font-size: 20px; }
    .video-container .video-button .arrow { height: 24px; }
    .video-container .video-button .text span { display: block; margin: 4px 0; }
    .video-container .special-button span { display: inline; }
}