@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
@import url(animate.css);

/*html, body { height: 100%; overflow-x: hidden; }*/

* { box-sizing: border-box; }
.homeSection{
    position: absolute;
    bottom: 0;
    left: 0;
    /*    transform: translateY(-60%);*/

}
body { padding: 0; margin: 0; background-color: #000; font-size: 16px; }

.fixed-top { top: 0; z-index: 60; }

.hint {
    bottom: 7px;
    color: grey;
    font-size: 12px;
    left: 2px;
    line-height: 14px;
    position: absolute;
    right: auto;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) 0s;
}

.clip { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; display: block; z-index: 0; transition: 200ms linear; }
.clip .overlay { position: absolute; width: 100%; height: 100%; background: url(../images/home-clip-layover.png); }
.clip section { position: relative; height: 100%; }
.clip video { position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

body.toggle md-toolbar .smSearch { opacity: 1; transform: translateY(0%); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); }

body.toggleV .clip { left: 320px; }


.searchContainer { background-color: #222; border-radius: 2px; padding: 0 8px; margin-left: 16px; }
.searchContainer md-icon { margin: 8px 0; }
.searchContainer input[type='text'] { background: none; border: none; min-height: 40px; font-size: 0.800em; color: #FFF; }

.main { height: 100%; }
@keyframes homeSection { 0% { opacity: 0; }
                         100% { opacity: 1; } }
                         .main section.homeSection { width: 100%; z-index: 58; opacity: 0; -webkit-animation-name: homeSection; animation-name: homeSection; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
                         .main section.homeSection .featured { max-width: 1200px; align-self: center; width: 100%; }
                         .main section.homeSection .featured article { text-align: center; position: relative; }
                         .main section.homeSection .featured article:before { position: absolute; left: 0; width: 1px; display: block; background-color: #000; content: ''; }
                         .main section.homeSection .featured article:first-of-type:before { display: none; }
                         .main section.homeSection .featured article p { margin: 0; font-size: 1.500em; color: #FFF; font-weight: 300; }
                         .main section.homeSection .featured article .md-hue-2 { color: #fff !important; }
                         .main section.homeSection footer { text-align: center; color: #FFF; padding: 50px 0 16px; }
                         .main .prom {  text-align: center; color: #FFF; background-color: rgba(0, 0, 0, 0.3); font-size: 10.750em; font-weight: 100; letter-spacing: -10px; line-height: 1;  }

                         .homeAnimate {  left: 0; right: 0; bottom: 0; text-align: center; color: #FFF; width: 100%; display: table; height: 100%; overflow: hidden; }
                         .homeAnimate > div { height: 100%; display: table-cell; vertical-align: middle; }
                         .homeAnimate .wmanimated { -webkit-animation-duration: 12s; animation-duration: 12s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
                         @keyframes wmfadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); }
                                                   20%, 40%, 60%, 80% { opacity: 1; -webkit-transform: none; transform: none; }
                                                   100% { opacity: 0; -webkit-transform: translate3d(2%, 0, 0); transform: translate3d(2%, 0, 0); } }
                                                   @keyframes wmfadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(2%, 0, 0); transform: translate3d(2%, 0, 0); }
                                                                              20%, 40%, 60%, 80% { opacity: 1; -webkit-transform: none; transform: none; }
                                                                              100% { opacity: 0; -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } }
                                                                              @keyframes wmBlur { 0% { -webkit-filter: blur(5px); filter: blur(5px); opacity: 0; }
                                                                                                  20%, 40%, 60%, 80% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 0.7; }
                                                                                                  100% { -webkit-filter: blur(5px); filter: blur(5px); opacity: 0; } }
                                                                                                  .homeAnimate .wmfadeInLeft { -webkit-animation-name: wmfadeInLeft; animation-name: wmfadeInLeft; -webkit-animation-delay: 1s; animation-delay: 1s; }
                                                                                                  .homeAnimate .wmfadeInRight { -webkit-animation-name: wmfadeInRight; animation-name: wmfadeInRight; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
                                                                                                  .homeAnimate .mainPromo { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; display: block; overflow: hidden; letter-spacing: -4px; -webkit-animation-name: wmBlur; animation-name: wmBlur; text-transform: uppercase; line-height: 0.85; font-weight: 700; width: 100%; max-width: 960px; margin: 0 auto; font-size: 6.5em; text-align: left; padding: 10px 0; }
                                                                                                  .homeAnimate .lineFirst, .homeAnimate .lineThird { font-size: 1.2em; font-weight: 300; }
                                                                                                  .homeAnimate .lineFirst { display: inline-block; width: 100%; max-width: 960px; margin: 0 auto; text-align: left; font-size: 3em; text-transform: uppercase; letter-spacing: -1px; }
                                                                                                  .homeAnimate .lineFirst span { border-bottom: 1px solid #666; }
                                                                                                  .homeAnimate .lineThird { display: inline-block; width: 100%; max-width: 960px; margin: 0 auto; text-align: justify; font-size: 2em; color: #0D74B7; font-style: italic; letter-spacing: -1px; }
                                                                                                  .homeAnimate .lineThird span { border-top: 1px solid #666; }



                                                                                                  @media screen and (max-width: 767px) { body { font-size: 14px; }
                                                                                                                                         .clip video { width: auto; height: 100%; }
                                                                                                                                         md-toolbar .tagLine { font-size: 14px; }
                                                                                                                                         .main .prom { font-size: 5.750em; }
                                                                                                                                         .main section .featured article { margin-bottom: 32px; } }
                                                                                                  @media screen and (max-width: 960px) { .searchContainer { margin-left: 0; } }
                                                                                                  @media screen and (max-width: 599px) { .main section .featured article:before { display: none; } }
                                                                                                  @media only screen and (min-width: 0) and (max-width: 959px) and (orientation: portrait) { md-sidenav, .rightSideNav { top: 56px !important; } }
                                                                                                  @media only screen and (min-width: 0) and (max-width: 959px) and (orientation: landscape) { md-sidenav, .rightSideNav { top: 48px !important; } }
                                                                                                  #yii-debug-toolbar-min { display: none !important; }