/* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-size - arguments: Width: 100%, Height: 100% - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transition - arguments: What: all, Length: 1s, Easing: ease-in-out - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 ------------------------------------------------------------- */ /* BACKGROUND GRADIENT */ /* BACKGROUND SIZE */ /* BORDER RADIUS */ /* BOX */ /* BOX RGBA */ /* BOX SHADOW */ /* BOX SIZING */ /* COLUMNS */ /* DOUBLE BORDERS */ /* FLEX */ /* FLIP */ /* FONT FACE */ /* OPACITY */ /* OUTLINE RADIUS */ /* RESIZE */ /* ROTATE*/ /* TEXT SHADOW */ /* TRANSFORM */ /* TRANSITION */ /* TRIPLE BORDERS */ @import url(jquery.mThumbnailScroller.css); article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } html { background: white; color: black; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; } body { margin: 0; } a { background: transparent; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } q:before, q:after { content: ''; content: none; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } /* Standard */ html { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; height: 100%; width: 100%; font-family: "Oswald", sans-serif; color: white; font-size: 16px; min-width: 320px; background: #000; color: #fff; position: relative; } body { height: 100%; width: 100%; position: relative; } ::-moz-selection { background: #edc300; color: #000; text-shadow: none; } ::selection { background: #edc300; color: #000; text-shadow: none; } textarea { resize: vertical; } a { text-decoration: none; color: #edc300; } a:hover, a:active { text-decoration: underline; } h1 { margin: 0; text-transform: uppercase; font-family: "Oswald", sans-serif; text-align: center; font-size: 4.0625em; padding: 0.5em; } p, ul, ol { margin: 1rem 0; } img { vertical-align: middle; max-width: 100%; -webkit-backface-visibility: hidden; -ms-interpolation-mode: bicubic; } .clear { clear: both; } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: table; clear: both; } .left { float: left; } .right { float: right; } .wrapper { max-width: 1024px; padding: 0; margin: 0 auto; } .m { display: none; } #wrapAll { height: 100%; } #wrapContent { position: relative; height: calc(100% - 10.125em); } #wrapContent #videos { position: absolute; top: 0; text-align: center; height: 100%; left: 0; width: 100%; overflow: hidden; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #wrapContent #videos ul { margin: 0; padding: 0; list-style-type: none; } #wrapContent #videos li { cursor: pointer; margin: 0; padding: 0; font-size: 1.875em; font-family: "Oswald", sans-serif; -moz-transition: color 0.5s ease-in-out; -o-transition: color 0.5s ease-in-out; -webkit-transition: color 0.5s ease-in-out; -ms-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; padding: 0.25% 0; } #wrapContent #videos li:hover, #wrapContent #videos li.selected { color: #edc300; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -webkit-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } #wrapContent #video { position: absolute; top: 0; right: 0; text-align: center; height: 100%; overflow: hidden; width: 0; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #wrapContent #video video { margin: 0 auto; width: 100%; height: 100%; position: relative; z-index: 2; } .playing #wrapContent #videos { width: 25%; } .playing #wrapContent #video { width: 70%; } @media all and (min-width: 641px) { .menuMobile, .toggleMenuMobile, .m { display: none !important; } } @media all and (max-width: 1000px) { #wrapContent { height: calc(100% - 6.5em); } #videos { padding: 0 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1 { font-size: 2.5em; white-space: nowrap; } .playing h1 { cursor: pointer; -moz-transition: color 0.5s ease-in-out; -o-transition: color 0.5s ease-in-out; -webkit-transition: color 0.5s ease-in-out; -ms-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; } .playing h1:hover { color: #edc300; } .playing #videos { position: fixed; display: none; width: 100% !important; height: 100% !important; background: #000; top: auto !important; bottom: 0; z-index: 5; } .playing #video { width: 100% !important; } } @media all and (max-width: 640px) { h1 { font-size: 1.75em; } } /* Impression */ @media print { .menuCss1 { display: none !important; } }