@charset "UTF-8"; /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-loading .slick-list { background: white url("../images/ajax-loader.gif") center center no-repeat; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } /* Icons */ /* @if $slick-font-family == "slick" { @font-face { font-family:"slick"; src: slick-font-url("slick.eot"); src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } } */ /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } .slick-prev:before { content: "\2190"; } .slick-next { right: -25px; } .slick-next:before { content: "\2192"; } /* Dots */ .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } /** Use: @include animate(delay, duration, animation); with waypoints: &.animate { @include animate(delay, duration, animation) } Animations: fadein, slidefromtop, slidefromleft; grow, draw. */ /** Animations */ @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadein30 { 0% { opacity: 0; } 100% { opacity: 0.3; } } @keyframes fadein30 { 0% { opacity: 0; } 100% { opacity: 0.3; } } @-webkit-keyframes slidefromleft { 0% { left: -100%; opacity: 0; } 100% { opacity: 1; } } @keyframes slidefromleft { 0% { left: -100%; opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes slidefromright { 0% { left: 200%; opacity: 0; } 100% { opacity: 1; } } @keyframes slidefromright { 0% { left: 200%; opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes slidefromtop { 0% { top: -100%; opacity: 0; } 100% { opacity: 1; } } @keyframes slidefromtop { 0% { top: -100%; opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes grow { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes grow { 0% { transform: scale(0); } 100% { transform: scale(1); } } @-webkit-keyframes draw { 0% { stroke-dashoffset: 10000; } 100% { stroke-dashoffset: 0; } } @keyframes draw { 0% { stroke-dashoffset: 10000; } 100% { stroke-dashoffset: 0; } } @keyframes meshrotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #rob { visibility: hidden; } #rob #wire-portrait { margin-top: -60px; position: absolute; top: 1px; left: 0px; opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; width: 960px; height: 700px; } #rob #wire-portrait.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 40s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 40s; animation-name: draw; animation-fill-mode: forwards; } #rob #s1-glow { background: url("../images/s1_robdyrdek/glow2.png") center center no-repeat; width: 919px; height: 634px; margin-top: -60px; position: absolute; top: 0px; right: 0px; opacity: 1; } #rob #robdyrdek { background: url("../images/s1_robdyrdek/rob-dyrdek.svg"); width: 480px; height: 39px; position: absolute; margin-top: -60px; left: 245px; top: 170px; } #rob #s1-subtitle1 { font-size: 46px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; text-align: left; margin-top: -60px; letter-spacing: -1px; position: absolute; left: 242px; top: 220px; z-index: 50; } #rob #s1-subtitle1 .tag { margin-right: 3px; padding: 0 4px; } #rob #s1-copy { /*background: url('../images/s1_robdyrdek/copy.png');*/ height: 70px; width: 480px; margin-top: -60px; position: absolute; top: 275px; left: 242px; } #rob #s1-stats { background: url("../images/s1_robdyrdek/stats.png"); width: 960px; height: 226px; position: absolute; left: 0px; top: 335px; margin-top: -60px; } #mobile-slider { visibility: hidden; } #slider { visibility: hidden; position: absolute; top: 397px; width: 1152px; left: 50%; margin-left: -576px; } #slider .stat { height: 226px; width: 344px; background: url("../images/slider/background.png") no-repeat center bottom; opacity: 1; -webkit-filter: brightness(35%); -moz-filter: brightness(35%); filter: brightness(35%); text-align: center; } #slider .stat.slick-center { opacity: 1; -webkit-filter: brightness(100%); -moz-filter: brightness(100%); filter: brightness(100%); } #slider .stat h2 { color: #02b1c1; font-family: 'AlternateGothicCom-No3'; text-transform: uppercase; } #slider .stat img { width: 300px; margin-left: 42px; margin-top: 25px; } #slider #ticker8 img { width: 220px; margin-left: 82px; margin-top: 35px; } #slider .slick-prev { width: 20px; height: 31px; background: url("../images/slider/arrows.png") no-repeat left bottom; left: 375px; top: 121px; } #slider .slick-prev:before { content: ""; } #slider .slick-prev:hover { background: url("../images/slider/arrows_white.png") no-repeat left bottom; } #slider .slick-next { width: 20px; height: 31px; background: url("../images/slider/arrows.png") no-repeat right bottom; content: ""; right: 375px; top: 121px; } #slider .slick-next:before { content: ""; } #slider .slick-next:hover { background: url("../images/slider/arrows_white.png") no-repeat right bottom; } #networksection { visibility: hidden; } #networksection #network { /*background: url('../images/s2_thedyrdeknetwork/network-bg.png') center center no-repeat;*/ width: 953px; height: 517px; position: absolute; top: 676px; left: 0px; opacity: 0.8; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; z-index: -999; } #networksection .spaceCrap { width: 953px; height: 517px; position: absolute; top: 0px; left: 0px; } #networksection canvas { width: 100%; height: 100%; } #networksection #mesh1 { position: absolute; top: 676px; left: 3px; opacity: 0.4; } #networksection #s2-title1 { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(255, 255, 255, 0.902); line-height: 0.846; -moz-transform: matrix(0, -1.50241, 1.51672, 0, 0, 0); -webkit-transform: matrix(0, -1.50241, 1.51672, 0, 0, 0); -ms-transform: matrix(0, -1.50241, 1.51672, 0, 0, 0); position: absolute; left: 175px; top: 790px; } #networksection #s2-title2 { font-size: 112px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; letter-spacing: -0.02em; text-align: right; position: absolute; left: 240px; top: 750px; } #networksection #s2-title2 span { padding: 0 8px 0 2px; } #networksection #s2-copy { /*background: url('../images/s2_thedyrdeknetwork/copy.png');*/ width: 500px; height: 137px; position: absolute; top: 861px; left: 241px; } #networksection #s2-quote { font-family: 'AlternateGothicCom-No3'; color: red; font-size: 36px; letter-spacing: 0em; line-height: 0px; } #networksection #s2-quote #s2-quote1 { position: absolute; top: 1058px; left: 598px; } #networksection #s2-quote #s2-quote2 { position: absolute; top: 1091px; left: 611px; } #networksection #s2-quote #s2-quote3 { position: absolute; top: 1125px; left: 611px; } #networksection #s2-quote #s2-quote4 { position: absolute; top: 1159px; left: 611px; } #networksection #s2-quote-author { height: 12px; width: 75px; position: absolute; top: 1197px; left: 765px; color: #fff; font-family: 'AvantGarde-Book'; font-size: 12px; } #section3 #fantasyfactorytag { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 1176px; width: 85px; height: 408px; z-index: 50; } #section3 #fantasy-factory { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: black; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: -100px; top: 1358.998px; z-index: 50; } #section3 #s3-title1 { font-size: 44px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 238px; top: 1325px; z-index: 50; } #section3 #s3-mesh svg { position: absolute; top: 1150px; left: 10px; width: 450px; height: 450px; opacity: 0.4; } #section3 #car-mask { visibility: hidden; background: url("../images/s3_fantasyfactory/car-mask.png"); width: 168px; height: 152px; position: absolute; top: 1378px; left: 501px; } #section3 #carsvg { position: absolute; top: 1381px; left: 40px; width: 962px; height: 289px; z-index: 20; } #section3 #carsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section3 #s3-copy { /*background: url('../images/s3_fantasyfactory/copy.png');*/ width: 368px; height: 342px; position: absolute; top: 1711px; left: 123px; } #section3 #s3-copy .quote { width: 305px; float: left; line-height: 1.2; position: relative; margin-left: -102px; hanging-punctuation: first; text-indent: -0.8ex; } #section3 #s3-cta { width: 159px; margin-top: 20px; } #section3 #s3-cta-0 { width: 159px; margin: 10px auto 0; font-size: 13px; } #section3 #s3-facts img { visibility: hidden; } #section3 #s3-fact0 { background: url("../images/s3_fantasyfactory/elipse3.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 294px; height: 294px; position: absolute; top: 1591px; left: 540px; z-index: 100; } #section3 #s3-fact0 img { width: 217px; height: 141px; margin-left: 37px; margin-top: 60px; visibility: visible; } #section3 #s3-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 218px; height: 218px; position: absolute; top: 1938px; left: 550px; } #section3 #s3-fact1 img { width: 130px; height: 163px; margin-left: 44px; margin-top: 30px; } #section3 #s3-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 189px; height: 189px; position: absolute; top: 2060px; left: 765px; } #section3 #s3-fact2 img { width: 138px; height: 127px; margin-left: 24px; margin-top: 35px; } #section3 #s3-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 285px; height: 285px; position: absolute; top: 2180px; left: 336px; } #section3 #s3-fact3 img { width: 181px; height: 201px; margin-top: 45px; margin-left: 50px; z-index: 100; } #section3 #shark-mask { background: url("../images/s3_fantasyfactory/shark-mask.png"); width: 250px; height: 156px; position: absolute; top: 2196px; left: 589px; } #section3 #tiger-mask { background: url("../images/s3_fantasyfactory/tiger-mask.png"); width: 288px; height: 247px; position: absolute; top: 2234px; left: 100px; } #section3 #tigersvg { position: absolute; top: 2231px; left: 15px; } #section3 #tigersvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section3 #sharksvg { position: absolute; top: 2190px; left: 554px; } #section3 #sharksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section3 #s3-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 1523px; left: 533px; } #section4 #s4-tag1 { border-radius: 2px; background-color: red; position: absolute; left: 881px; top: 2682px; width: 86px; height: 408px; } #section4 #ridiculousness { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(1, 9, 10, 0.902); line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 795px; top: 2870px; } #section4 #s4-title1 { font-size: 47.105px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 592px; top: 2834px; } #section4 #ridiculousnesssvg { position: absolute; top: 2666px; left: 40px; } #section4 #ridiculousnesssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section4 #s4-copy { /*background: url('../images/s4_ridiculousness/copy.png');*/ width: 382px; height: 333px; position: absolute; top: 3150px; left: 122px; line-height: 1.8; position: absolute; border-top: 2px solid #fff; padding-top: 10px; text-align: left; z-index: 50; } #section4 #s4-copy .quote { width: 350px; float: left; line-height: 1.2; font-size: 18px; position: relative; margin-top: 10px; margin-left: -80px; } #section4 #s4-cta { width: 159px; margin-top: 20px; } #section4 #s4-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 181px; height: 181px; position: absolute; top: 3044px; left: 578px; } #section4 #s4-fact1 img { width: 149px; height: 88px; margin-left: 15px; margin-top: 50px; } #section4 #s4-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 308px; height: 308px; position: absolute; top: 3356px; left: 564px; } #section4 #s4-fact2 img { width: 265px; height: 128px; margin-left: 10px; margin-top: 90px; } #section4 #s4-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 218px; height: 218px; position: absolute; top: 3648px; left: 253px; } #section4 #s4-fact3 img { width: 142px; height: 144px; margin-top: 35px; margin-left: 40px; z-index: 100; } #section4 #scorpions { background: url("../images/s4_ridiculousness/scorpbody.png"); width: 135px; height: 107px; position: absolute; top: 3696px; left: 130px; } #section4 #scorpionsanimation { background: url("../images/s4_ridiculousness/Top3Categories_Animated.gif"); position: absolute; top: 3696px; left: 54px; width: 223px; height: 122px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section4 #slamsvg { position: absolute; top: 3580px; left: 688px; } #section4 #slamsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section4 #s4-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 2925px; left: 131px; } #section5 #s5-tag1 { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 4034px; width: 85px; height: 408px; } #section5 #s5-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 4336px; left: 642px; } #section5 #dcshoes { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: black; text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: -30px; top: 4220px; } #section5 #s5-title1 { font-size: 43px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 235px; top: 4185px; z-index: 50; } #section5 #s5-dclogo { background: url("../images/s5_dcshoes/dclogo.png"); width: 39px; height: 39px; position: absolute; top: 4298px; left: 561px; } #section5 #dcshoesvg { position: absolute; top: 4159px; left: 443px; } #section5 #dcshoesvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section5 #s5-copy { /*background: url('../images/s5_dcshoes/copy.png');*/ width: 356px; height: 372px; position: absolute; top: 4459px; left: 122px; } #section5 #s5-copy .quote { width: 263px; float: left; line-height: 1.2; font-size: 18px; position: relative; margin-top: 10px; margin-left: -80px; } #section5 #s5-cta { width: 190px; margin-top: 20px; } #section5 #s5-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 215px; height: 215px; position: absolute; top: 4554px; left: 677px; } #section5 #s5-fact1 img { width: 144px; height: 155px; margin-left: 30px; margin-top: 30px; visibility: hidden; } #section5 #s5-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 190px; height: 190px; position: absolute; top: 4964px; left: 89px; } #section5 #s5-fact2 img { width: 150px; height: 120px; margin-left: 15px; margin-top: 30px; } #section5 #s5-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 232px; height: 232px; position: absolute; top: 5154px; left: 416px; } #section5 #s5-fact3 img { width: 169px; height: 121px; margin-left: 30px; margin-top: 60px; } #section5 #s5-robandbiglogo { background: url("../images/s5_dcshoes/robandbiglogo.png"); width: 133px; height: 86px; position: absolute; top: 5126px; left: 585px; } #section5 #robandbigsvg { position: absolute; top: 5121px; left: 585px; } #section5 #robandbigsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section5 #s5-guard { background: url("../images/s5_dcshoes/guard.png"); width: 131px; height: 188px; position: absolute; top: 5195px; left: 253px; } #section5 #robandbigviralsvg { position: absolute; top: 5197px; left: 108px; width: 380px; height: 229px; } #section5 #robandbigviralsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #street-dreams { top: 5470px; position: absolute; } #random0 { position: relative; } #random0 #r0-bg { padding: 1px 0; position: absolute; top: 5470px; left: 0px; width: 960px; height: 990px; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-50.png") repeat-y; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #random0 #r0-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; right: 26px; top: 5518px; width: 480px; height: 480px; } #random0 #r0-fact img { margin: 40px 125px 10px; } #random0 #r0-fact .cta { width: 140px; margin: 0 auto; } #random0 #dyrdek-poster { position: absolute; top: 5500px; left: 150px; width: 390px; height: 548px; } #random0 #dyrdek-poster.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section6 #slslogosvg { width: 228px; height: 313px; position: absolute; top: 6217px; left: 71px; } #section6 #slslogosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section6 #slstag { border-radius: 2px; background-color: red; position: absolute; left: 881px; top: 6129px; width: 86px; height: 649px; } #section6 #s6-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 6392px; left: 177px; } #section6 #sls { font-size: 42.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(1, 9, 10, 0.902); text-transform: uppercase; line-height: 0.926; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 697.091px; top: 6434.905px; width: 450px; } #section6 #s6-title1 { font-size: 47.105px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 441.234px; top: 6401.238px; z-index: 551; } #section6 #s6-copy { /*background: url('../images/s6_sls/copy.png');*/ width: 355px; height: 372px; position: absolute; top: 6611px; left: 121px; } #section6 #s6-copy .quote { width: 263px; float: left; line-height: 1.2; font-size: 18px; position: relative; margin-left: -80px; } #section6 #s6-cta1 { width: 160px; margin-top: 20px; float: left; } #section6 #s6-cta2 { width: 160px; float: right; margin-top: 20px; } #section6 #s6-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 557px; top: 6723px; width: 208px; height: 208px; } #section6 #s6-fact1 img { position: absolute; top: 30px; left: 35px; } #section6 #s6-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 234px; top: 7078px; width: 252px; height: 252px; } #section6 #s6-fact2 img { position: absolute; top: 50px; left: 50px; } #section6 #s6-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 588px; top: 7281px; width: 267px; height: 267px; z-index: 50; } #section6 #s6-fact3 img { position: absolute; top: 50px; left: 50px; z-index: 50; } #section6 #s6-skate { background: url("../images/s6_sls/skate.png"); width: 46px; height: 114px; position: absolute; top: 7570px; left: 440px; } #section6 #s6-trophy { background: url("../images/s6_sls/trophy.png"); width: 96px; height: 183px; position: absolute; top: 6911px; left: 750px; } #section6 #trophysvg { position: absolute; top: 6895px; left: 703px; transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); z-index: -999; } #section6 #trophysvg.animate { z-index: -999; } #section6 #trophysvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; z-index: -999; } #section6 #skateparksvg { position: absolute; top: 7303px; left: 84px; z-index: 0; } #section6 #skateparksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section6 #skatingsvg { position: absolute; top: 7495px; left: 282px; } #section6 #skatingsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section6 #s6-fact4 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 541px; top: 7683px; width: 225px; height: 225px; z-index: 50; } #section6 #s6-fact4 img { position: absolute; top: 50px; left: 50px; z-index: 50; } #section7 #s7-bg { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000); padding: 1px 0; position: absolute; top: 8940px; left: 0px; width: 960px; height: 585px; z-index: -999; } #section7 #s7-tag { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 8105px; width: 85px; height: 408px; } #section7 #s7-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 8128px; left: 755px; } #section7 #superjacket { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(1, 9, 10, 0.902); line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: -60px; top: 8295px; } #section7 #s7-title { font-size: 45px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: left; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 250px; top: 8255px; z-index: 50; } #section7 #jacketsvg { position: absolute; top: 8083px; left: 507px; z-index: -10; } #section7 #jacketsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section7 #s7-copy { /*background: url('../images/s7_superjacket/copy.png');*/ width: 355px; height: 372px; position: absolute; top: 8490px; left: 121px; } #section7 #s7-copy .quote { width: 263px; float: left; line-height: 1.2; font-size: 18px; margin-top: 10px; position: relative; margin-left: -80px; } #section7 #s7-cta { width: 198px; margin-top: 20px; } #section7 #s7-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 578px; top: 8567px; width: 285px; height: 285px; z-index: 50; } #section7 #s7-fact1 img { position: absolute; top: 74px; left: 32px; z-index: 50; } #section7 #s7-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 678px; top: 8956px; width: 172px; height: 172px; z-index: 50; } #section7 #s7-fact2 img { position: absolute; top: 11px; left: 6px; visibility: hidden; z-index: 50; } #section7 #s7-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 116px; top: 8987px; width: 244px; height: 244px; z-index: 50; } #section7 #s7-fact3 img { position: absolute; top: 45px; left: 30px; z-index: 50; } #section7 #s7-fact4 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 449px; top: 9204px; width: 295px; height: 295px; z-index: 50; } #section7 #s7-fact4 img { position: absolute; top: 55px; left: 61px; z-index: 50; } #near-death-wave { top: 9528px; position: absolute; } #random1 #r1-bg { padding: 1px 0; position: absolute; top: 9528px; left: 0px; width: 960px; height: 950px; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-50.png") repeat-y; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #random1 #r1-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 26px; top: 9583px; width: 494px; height: 494px; } #random1 #r1-fact img { visibility: hidden; position: absolute; top: 100px; left: 105px; } #random1 #r1-cta { position: absolute; width: 160px; left: 164px; top: 417px; z-index: 50; } #random1 #wavesvg { position: absolute; top: 9659px; left: 414px; z-index: 50; } #random1 #wavesvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section8 #s8-tag { border-radius: 2px; background-color: red; position: absolute; left: 881px; top: 10254px; width: 86px; height: 408px; } #section8 #s8-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 10449px; left: 365px; } #section8 #alienworkshop { font-size: 46.105px; width: 350px; font-family: 'AlternateGothicCom-No3'; color: rgba(1, 9, 10, 0.902); text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 750px; top: 10440px; } #section8 #s8-title { font-size: 47.105px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 638px; top: 10405px; z-index: 50; } #section8 #alienlogosvg { position: absolute; top: 10233px; left: 321px; } #section8 #alienlogosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section8 #s8-copy { /*background: url('../images/s8_alienworkshop/copy.png');*/ width: 360px; height: 225px; position: absolute; top: 10652px; left: 120px; } #section8 #s8-cta { width: 160px; margin-top: 20px; } #section8 #s8-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 578px; top: 10724px; width: 285px; height: 285px; } #section8 #s8-fact1 img { position: absolute; top: 60px; left: 46px; } #section8 #s8-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 289px; top: 11049px; width: 265px; height: 265px; } #section8 #s8-fact2 img { position: absolute; top: 46px; left: 41px; } #section8 #s8-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 576px; top: 11293px; width: 293px; height: 293px; } #section8 #s8-fact3 img { visibility: hidden; position: absolute; top: 39px; left: 20px; width: 247px; height: 200px; } #section8 #decksvg { visibility: hidden; position: absolute; top: 11050px; left: 166px; transform: rotate(2deg); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); } #section8 #decksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section8 #s8-bg { position: absolute; top: 10120px; left: 0px; width: 960px; height: 352px; z-index: -999; background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); } #jockey-skills { top: 11669px; position: absolute; } #random2 #r2-bg { position: absolute; top: 11669px; left: 0px; width: 960px; height: 604px; z-index: -999; background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); } #random2 #r2-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 43px; top: 11716px; width: 494px; height: 494px; z-index: 50; } #random2 #r2-fact img { position: absolute; top: 107px; left: 112px; z-index: 50; visibility: hidden; } #random2 #r2-cta { position: absolute; width: 160px; left: 169px; top: 407px; } #random2 #horsesvg { position: absolute; top: 11786px; left: 438px; width: 477px; height: 348px; } #random2 #horsesvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section9 #s9-bg { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; position: absolute; width: 960px; left: 0; top: 12274px; height: 615px; z-index: -999; } #section9 #s9-tag { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 12343px; width: 85px; height: 408px; } #section9 #s9-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 12645px; left: 642px; } #section9 #wildgrinders { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: black; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: -75px; top: 12530px; } #section9 #s9-title { font-size: 43px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 230px; top: 12495px; } #section9 #s9-meaty { background: url("../images/s9_wildgrinders/meaty.png"); width: 113px; height: 156px; position: absolute; top: 12615px; left: 661px; } #section9 #robandmeatysvg { position: absolute; top: 12503px; left: 458px; z-index: -10; } #section9 #robandmeatysvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section9 #s9-copy { /*background: url('../images/s9_wildgrinders/copy.png');*/ width: 355px; height: 372px; position: absolute; top: 12729px; left: 121px; } #section9 #s9-copy .quote { width: 315px; line-height: 1.2; margin-top: 5px; margin-left: -100px; float: left; } #section9 #s9-cta { width: 160px; margin-top: 20px; } #section9 #s9-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 677px; top: 12863px; width: 215px; height: 215px; } #section9 #s9-fact1 img { position: absolute; top: 23px; left: 40px; } #section9 #s9-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 594px; top: 13171px; width: 261px; height: 261px; } #section9 #s9-fact2 img { position: absolute; top: 39px; left: 27px; } #section9 #s9-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 233px; top: 13301px; width: 248px; height: 248px; } #section9 #s9-fact3 img { position: absolute; top: 58px; left: 15px; } #section9 #wildgrinderslogosvg { position: absolute; top: 13230px; left: 71px; } #section9 #wildgrinderslogosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #machine { top: 13621px; position: absolute; } #random3 #r3-bg { position: absolute; top: 13621px; left: 0px; width: 960px; height: 604px; z-index: -999; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-50.png") center top no-repeat; } #random3 #r3-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 60px; top: 13702px; width: 435px; height: 435px; z-index: 50; } #random3 #r3-fact img { position: absolute; top: 103px; left: 46px; z-index: 50; visibility: hidden; } #random3 #r3-clock { background: url("../images/r3_fact/clock.png"); width: 423px; height: 323px; position: absolute; top: 13751px; left: 503px; visibility: hidden; } #random3 #r3-clock-data { width: 423px; height: 323px; position: absolute; top: 13751px; left: 503px; z-index: 100; } #random3 #r3-clock-data .clock-data { font-family: "AlternateGothicCom-No3"; font-size: 56px; color: #ff0000; } #random3 #r3-clock-data #avg-hours { margin-top: 68px; margin-left: 230px; display: none; } #random3 #r3-clock-data #massages { margin-top: 84px; margin-left: 68px; display: none; float: left; } #random3 #r3-clock-data #workouts { margin-top: 84px; margin-left: 93px; letter-spacing: -1px; display: none; float: left; } #random3 #r3-clock-data #sleeping { margin-top: 84px; margin-left: 87px; letter-spacing: -1px; display: none; float: left; } #random3 #clocksvg { width: 423px; height: 323px; position: absolute; top: 13751px; left: 503px; visibility: hidden; } #section10 #s10-bg { position: absolute; top: 14193px; left: 0px; width: 960px; height: 604px; z-index: -999; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-50.png") center top no-repeat; } #section10 #s10-tag { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 14283px; width: 85px; height: 408px; } #section10 #s10-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 14580px; left: 557px; } #section10 #stance { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: black; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: -11px; top: 14475px; } #section10 #s10-title { font-size: 44px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 197px; top: 14433px; } #section10 #sockssvg { position: absolute; top: 14330px; left: 275px; z-index: -10; } #section10 #sockssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section10 #s10-copy { /*background: url('../images/s10_stance/copy.png');*/ width: 359px; height: 246px; position: absolute; top: 14786px; left: 121px; } #section10 #s10-cta { width: 160px; margin-top: 20px; } #section10 #s10-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 559px; top: 14803px; width: 215px; height: 215px; } #section10 #s10-fact1 img { position: absolute; top: 35px; left: 35px; } #section10 #s10-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 494px; top: 15139px; width: 281px; height: 281px; } #section10 #s10-fact2 img { position: absolute; top: 42px; left: 45px; } #section10 #s10-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 55px; top: 15131px; width: 248px; height: 248px; } #section10 #s10-fact3 img { position: absolute; top: 49px; left: 35px; } #section10 #misfitssvg { position: absolute; top: 15187px; left: 679px; } #section10 #misfitssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #hand-rail { top: 15532px; position: absolute; } #random4 #r4-bg { position: absolute; top: 15532px; left: 0px; width: 960px; height: 596px; background: url("../images/bg/bg-glow-50.png") center top no-repeat; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); z-index: -999; } #random4 #r4-gradient { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000); position: absolute; top: 15790px; left: 0px; width: 960px; height: 335px; z-index: -999; } #random4 #r4-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 233px; top: 15579px; width: 494px; height: 494px; z-index: 50; } #random4 #r4-fact img { position: absolute; top: 74px; left: 135px; z-index: 50; visibility: hidden; } #random4 #r4-cta { position: absolute; width: 160px; left: 165px; top: 417px; } #random4 #stairssvg { position: absolute; top: 15430px; left: 604px; } #random4 #stairssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #random4 #r4-rob { background: url("../images/r4_fact/rob.png"); width: 39px; height: 140px; position: absolute; top: 15668px; left: 778px; visibility: hidden; } #section11 .s11-bg { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; position: absolute; width: 960px; left: 0; top: 16122px; height: 750px; z-index: -999; } #section11 #s11-tag { border-radius: 2px; background-color: red; position: absolute; left: 881px; top: 16257px; width: 86px; height: 408px; } #section11 #s11-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 16380px; left: 309px; } #section11 #monster { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: #01090a; text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 853.558px; top: 16455px; } #section11 #s11-title { font-size: 45px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 598px; top: 16440px; } #section11 #monsterlogosvg { position: absolute; top: 16270px; left: 254px; z-index: -10; } #section11 #monsterlogosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section11 #s11-copy { /*background: url('../images/s11_monster/copy.png');*/ width: 359px; height: 303px; position: absolute; top: 16682px; left: 121px; } #section11 #s11-cta { width: 160px; margin-top: 20px; } #section11 #tattoosvg { position: absolute; top: 16650px; left: 537px; } #section11 #tattoosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section11 #s11-tattoo { background: url("../images/s11_monster/mtattoo.png"); width: 159px; height: 218px; position: absolute; top: 16713px; left: 640px; } #section11 #s11-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 495px; top: 16948px; width: 211px; height: 211px; } #section11 #s11-fact1 img { position: absolute; top: 49px; left: 36px; } #section11 #s11-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 103px; top: 17204px; width: 270px; height: 270px; } #section11 #s11-fact2 img { position: absolute; top: 66px; left: 50px; } #section11 #s11-slsbg { background: url("../images/s11_monster/slsbg.png"); width: 336px; height: 77px; position: absolute; top: 17293px; left: 392px; } #section11 #skaterssvg { position: absolute; top: 17289px; left: 237px; } #section11 #skaterssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #dyrdek-day { top: 17720px; position: absolute; } #random5 #r5-bg { position: absolute; top: 17720px; left: 0px; width: 960px; height: 604px; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-career.png") center top no-repeat; z-index: -999; } #random5 #r5-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 80px; top: 17794px; width: 442px; height: 442px; z-index: 50; } #random5 #r5-fact img { position: absolute; top: 55px; left: 91px; z-index: 50; visibility: hidden; } #random5 #r5-cta { position: absolute; width: 160px; left: 140px; top: 370px; } #random5 #dyrdeksvg { position: absolute; top: 17939px; left: 454px; } #random5 #dyrdeksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section12 #s12-bg { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-50.png") center top no-repeat; width: 960px; left: 0; z-index: -999; height: 715px; position: absolute; top: 18324px; } #section12 #s12-tag { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 18431px; width: 85px; height: 408px; } #section12 #s12-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 18733px; left: 642px; } #section12 #ivi { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: black; text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 23.715px; top: 18620px; } #section12 #s12-title { font-size: 47px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 228px; top: 18580px; } #section12 #glassessvg { position: absolute; top: 18565px; left: 419px; z-index: -10; } #section12 #glassessvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section12 #s12-copy { /*background: url('../images/s12_ivi/copy.png');*/ width: 359px; height: 267px; position: absolute; top: 18908px; left: 121px; } #section12 #s12-cta { width: 190px; margin-top: 20px; } #section12 #s12-execglasses { background: url("../images/s12_ivi/execglasses.png"); width: 99px; height: 41px; position: absolute; top: 19431px; left: 129px; } #section12 #s12-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 594px; top: 19104px; width: 254px; height: 254px; } #section12 #s12-fact1 img { position: absolute; top: 48px; left: 57px; } #section12 #s12-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 110px; top: 19492px; width: 253px; height: 253px; } #section12 #s12-sunglasses { background: url("../images/s12_ivi/sunglasses.png"); width: 61px; height: 42px; position: absolute; top: 18938px; left: 624px; } #section12 #s12-fact2 img { position: absolute; top: 62px; left: 52px; } #section12 #s12-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 587px; top: 19616px; width: 268px; height: 268px; z-index: 50; } #section12 #s12-fact3 img { position: absolute; top: 67px; left: 37px; } #section12 #robandjeromesvg { position: absolute; top: 18869px; left: 557px; z-index: -10; } #section12 #robandjeromesvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section12 #execpacksvg { position: absolute; top: 19236px; left: 81px; } #section12 #execpacksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section12 #getbusylivingsvg { position: absolute; top: 19553px; left: 550px; } #section12 #getbusylivingsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section13 #s13-tag { border-radius: 2px; background-color: red; position: absolute; left: 881px; top: 20063px; width: 86px; height: 408px; } #section13 #s13-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 20119px; left: 278px; } #section13 #habitat { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(1, 9, 10, 0.902); text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 862.652px; top: 20255px; } #section13 #s13-title { font-size: 47.105px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 379.275px; top: 20215px; } #section13 #habitatlogosvg { position: absolute; top: 19948px; left: 82px; z-index: -10; } #section13 #habitatlogosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section13 #s13-copy { /*background: url('../images/s13_habitat/copy.png');*/ width: 359px; height: 244px; position: absolute; top: 20464px; left: 121px; } #section13 #s13-cta { width: 160px; margin-top: 20px; } #section13 #s13-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 578px; top: 20525px; width: 285px; height: 285px; } #section13 #s13-fact1 img { position: absolute; top: 81px; left: 56px; } #section13 #s13-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 95px; top: 20786px; width: 285px; height: 285px; } #section13 #s13-fact2 img { position: absolute; top: 92px; left: 43px; } #section13 #s13-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 334px; top: 21117px; width: 285px; height: 285px; } #section13 #s13-fact3 img { position: absolute; top: 61px; left: 44px; } #section13 #habitatboard { position: absolute; background: url("../images/s13_habitat/board.png"); top: 20990px; left: 643px; width: 281px; height: 501px; } #bull { top: 21515px; position: absolute; } #random6 #r6-bg { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-career.png") center top no-repeat; position: absolute; top: 21515px; left: 0px; width: 960px; height: 604px; z-index: -999; } #random6 #r6-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 410px; top: 21562px; width: 494px; height: 494px; z-index: 50; } #random6 #r6-fact img { position: absolute; top: 83px; left: 91px; z-index: 50; visibility: hidden; } #random6 #r6-cta { position: absolute; width: 160px; left: 162px; top: 404px; } #random6 #bullsvg { position: absolute; top: 21597px; left: 32px; } #random6 #bullsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section14 #s14-bg { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; position: absolute; width: 960px; left: 0; z-index: -999; top: 22119px; height: 715px; } #section14 #s14-tag { border-radius: 2px; background-color: red; position: absolute; left: 0px; top: 22235px; width: 85px; height: 408px; } #section14 #s14-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 22365px; left: 540px; } #section14 #snackoff { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: black; text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: -35px; top: 22422px; } #section14 #s14-title { font-size: 44px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 205px; top: 22385px; } #section14 #snackofflogosvg { position: absolute; top: 22132px; left: 355px; z-index: -10; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } #section14 #snackofflogosvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section14 #s14-copy { /*background: url('../images/s14_snackoff/copy.png');*/ width: 360px; height: 424px; position: absolute; top: 22643px; left: 120px; } #section14 #s14-cta { width: 160px; margin-top: 20px; } #section14 #s14-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 617px; top: 22673px; width: 215px; height: 215px; } #section14 #s14-fact1 img { position: absolute; top: 33px; left: 45px; } #section14 #s14-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 679px; top: 23084px; width: 203px; height: 203px; } #section14 #s14-fact2 img { position: absolute; top: 45px; left: 30px; } #section14 #s14-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 140px; top: 23195px; width: 319px; height: 319px; } #section14 #s14-fact3 img { position: absolute; top: 54px; left: 46px; } #section14 #eddiesvg { position: absolute; top: 22483px; left: 613px; } #section14 #eddiesvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section14 #sporksvg { position: absolute; top: 23018px; left: 635px; } #section14 #sporksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #car-jump { top: 23654px; position: absolute; } #random7 #r7-bg { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-career.png") center top no-repeat; position: absolute; top: 23654px; left: 0px; width: 960px; height: 604px; z-index: -999; } #random7 #r7-fact { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 233px; top: 23701px; width: 494px; height: 494px; z-index: 50; } #random7 #r7-fact img { position: absolute; top: 54px; left: 111px; z-index: 50; visibility: hidden; } #random7 #r7-cta { position: absolute; width: 160px; left: 165px; top: 387px; } #random7 #jumpsvg { position: absolute; top: 24016px; left: 147px; } #random7 #jumpsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section15 #s15-bg { width: 960px; left: 0; position: absolute; height: 715px; z-index: -999; top: 24258px; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; } #section15 #s15-tag { border-radius: 2px; background-color: red; position: absolute; left: 885px; top: 24285px; width: 86px; height: 408px; } #section15 #s15-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 24479px; left: 340px; } #section15 #kraft { font-size: 43.105px; font-family: 'AlternateGothicCom-No3'; color: black; text-transform: uppercase; line-height: 0.905; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 740px; top: 24470px; width: 370px; } #section15 #s15-title { font-size: 44px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 637.191px; top: 24436px; } #section15 #fullyuploadedsvg { position: absolute; top: 24375px; left: 171px; z-index: -10; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } #section15 #fullyuploadedsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section15 #s15-copy { /*background: url('../images/s15_kraft/copy.png');*/ width: 359px; height: 284px; position: absolute; top: 24611px; left: 121px; } #section15 #s15-cta { width: 190px; margin-top: 20px; } #section15 #s15-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 556px; top: 24747px; width: 215px; height: 215px; } #section15 #s15-fact1 img { position: absolute; top: 46px; left: 40px; } #section15 #s15-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 552px; top: 25104px; width: 344px; height: 344px; } #section15 #s15-fact2 img { position: absolute; top: 18px; left: 54px; } #section15 #s15-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; left: 88px; top: 25261px; width: 300px; height: 300px; } #section15 #s15-fact3 .factbg { -webkit-filter: brightness(55%); z-index: -10; } #section15 #s15-fact3 img { position: absolute; top: 51px; left: 63px; z-index: 20; } #section15 #bearwrap { position: absolute; top: 25032px; left: 96px; z-index: -9999; } #section15 #bearwrap svg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section16 { box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-career.png") center top no-repeat; } #section16 #s16-tag { border-radius: 2px; background-color: red; position: absolute; left: 881px; top: 25723px; width: 86px; height: 408px; } #section16 #connect { font-size: 43.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(1, 9, 10, 0.902); text-transform: uppercase; line-height: 0.846; text-align: center; -moz-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -webkit-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); -ms-transform: matrix(0, -1.36799, 1.36748, 0, 0, 0); position: absolute; left: 785.103px; width: 280px; top: 25908px; } #section16 #s16-title { font-size: 47px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -webkit-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); -ms-transform: matrix(2.3936, 0, 0, 2.3945, 0, 0); position: absolute; left: 685px; top: 25873px; } #section16 #s16-copy { position: absolute; top: 26114px; left: 121px; width: 300px; line-height: 1.8; } #section16 #dogssvg { position: absolute; top: 25785px; left: 157px; z-index: -10; } #section16 #dogssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section16 #mc_embed_signup { position: absolute; top: 26117px; left: 600px; } #section16 #mc_embed_signup input { width: 236px; height: 35px; margin-bottom: 15px; border: 1px solid #808080; padding-left: 15px; } #section16 #mc_embed_signup input.error { border: 2px solid #f00; } #section16 #mc_embed_signup .error-inputs { position: absolute; width: 258px; border: 2px solid #f00; height: 146px; top: -4px; left: -4px; visibility: hidden; z-index: -99; } #section16 #mc_embed_signup .error-inputs .error-sentence { position: absolute; width: 150px; min-height: 30px; background-color: #f00; color: #000; left: -185px; font-family: 'AvantGarde-Medium'; font-size: 11px; padding: 5px 10px; border-radius: 2px; top: 50px; } #section16 #mc_embed_signup .error-inputs .error-sentence .arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #f00; position: absolute; right: -8px; top: 12px; } #section16 #mc_embed_signup #subscribe { position: absolute; width: 160px; right: 0px; } #section16 #mc_embed_signup input[type=submit] { display: none; } #section16 #mc_embed_signup #message { margin-top: 50px; } #section16 #s16-bg { width: 960px; left: 0; position: absolute; height: 715px; z-index: -999; top: 25653px; box-shadow: inset 0 10px 6px -11px rgba(255, 255, 255, 0.5); background: transparent url("../images/bg/bg-glow-100.png") center top no-repeat; } #section16 .anchor-mobile { display: none; } /* width < 640px */ @media only screen and (max-width: 480px) { svg { visibility: hidden; } #slider { visibility: hidden; } /* anchor */ header { height: 40px; } .anchor-mobile { visibility: visible; display: block; background-color: #f00; text-align: left; text-transform: uppercase; padding: 10px 40px; color: #000; font-family: 'AlternateGothicCom-No3'; font-size: 36px; visibility: visible; border-bottom: 2px solid #000; } .anchor-mobile:hover { text-decoration: none; } /* section 1 */ #rob { visibility: visible; position: relative; left: 0; width: 100%; height: 480px; } #rob #wire-portrait { top: 1px; left: 0px; width: 100%; height: auto; display: block; /* &.animate { path { @include animate(0, 40s, draw); } } */ } #rob #s1-glow { background: url("../images/s1_robdyrdek/glow2.png") center center no-repeat; width: 100%; height: auto; min-height: 500px; margin-top: -60px; position: absolute; top: 0px; right: 0px; left: 0; opacity: 1; } #rob #robdyrdek { width: 65.3%; position: relative; right: 0; margin: 0 auto; top: 50px; display: block; left: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } #rob .relentlessly_Manufacturing_Amazing { font-size: 30.105px; font-family: "Alternate Gothic Com"; color: red; text-transform: uppercase; line-height: 1.295; text-align: left; -moz-transform: matrix(0.68218, 0, 0, 0.67321, 0, 0); -webkit-transform: matrix(0.68218, 0, 0, 0.67321, 0, 0); -ms-transform: matrix(0.68218, 0, 0, 0.67321, 0, 0); position: absolute; left: 9.77px; top: 92.007px; z-index: 581; } #rob #s1-subtitle1 { font-size: 30.105px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; text-align: center; line-height: 1.295; -moz-transform: matrix(0.68218, 0, 0, 0.67321, 0, 0); -webkit-transform: matrix(0.68218, 0, 0, 0.67321, 0, 0); -ms-transform: matrix(0.68218, 0, 0, 0.67321, 0, 0); letter-spacing: -1px; position: relative; left: 0; top: 55px; z-index: 50; display: block; margin: 0 auto; } #rob #s1-subtitle1 .tag { margin-right: 2px; padding: 0; } #rob #s1-copy { /*background: url('../images/s1_robdyrdek/copy.png');*/ height: auto; width: 90%; position: relative; top: 80px; left: 0; right: 0; margin: 0 auto; padding: 0; } #rob #s1-copy.copy { font-size: 16px; line-height: 1.1; text-align: left; float: none; } #rob #s1-copy.copy strong { font-size: 16px; line-height: 1.1; } #rob #s1-stats { background: url("../images/s1_robdyrdek/stats.png"); width: 960px; height: 226px; position: absolute; left: 0px; top: 335px; margin-top: -60px; } /* section 2 slider */ #slider { visibility: hidden; position: relative; top: 500px; width: 1152px; left: 50%; margin-left: -576px; } #slider img { visibility: hidden; } /* section 3 */ #networksection { visibility: visible; position: relative; padding-bottom: 40px; background: black url("../images/poster-glow.jpg") center center repeat-y; z-index: -999; } #networksection #network { width: 100%; height: 517px; position: relative; top: 0; left: 0px; } #networksection #s2-title1 { font-size: 46.105px; font-family: 'AlternateGothicCom-No3'; color: rgba(255, 255, 255, 0.902); line-height: 0.846; -moz-transform: matrix(0, -1.50241, 1.51672, 0, 0, 0); -webkit-transform: matrix(0, -1.50241, 1.51672, 0, 0, 0); -ms-transform: matrix(0, -1.50241, 1.51672, 0, 0, 0); position: absolute; left: 40px; top: 80px !important; } #networksection #s2-title2 { font-size: 112px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; letter-spacing: -0.02em; text-align: right; position: absolute; left: 95px; top: 40px; } #networksection #s2-title2 span { padding: 0 8px 0 2px; } #networksection #mesh1 { top: 0; } #networksection #s2-copy { /*background: url('../images/s2_thedyrdeknetwork/copy.png');*/ width: 80%; height: 137px; position: absolute; top: 170px; left: 0; right: 0; margin: 0 auto; padding: 0 60px; } #networksection #s2-quote { font-family: 'AlternateGothicCom-No3'; color: red; font-size: 36px; letter-spacing: 0em; line-height: 0px; position: relative; text-align: center; top: 0; left: auto; margin-top: -140px; } #networksection #s2-quote #s2-quote1 { position: relative; top: auto; left: auto; display: block; height: 30px; } #networksection #s2-quote #s2-quote2 { position: relative; top: auto; left: auto; display: block; height: 30px; } #networksection #s2-quote #s2-quote3 { position: relative; top: auto; left: auto; display: block; height: 30px; } #networksection #s2-quote #s2-quote4 { position: relative; top: auto; left: auto; display: block; height: 30px; } #networksection #s2-quote-author { height: 12px; width: 75px; position: relative; top: 0; left: auto; display: block; text-align: center; margin: 0 auto; } /* section 4 */ #section3 { position: relative; min-height: 1500px; overflow: hidden; display: none; background: black url("../images/poster-glow.jpg") center center repeat-y; } #section3 #fantasyfactorytag, #section3 #fantasy-factory, #section3 #s3-mesh, #section3 #smallmeshsvg, #section3 #mesh1, #section3 #s3-dot1 { display: none; visibility: hidden; } #section3 #s3-title1 { font-size: 44px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; -moz-transform: none; -webkit-transform: none; -ms-transform: none; position: relative; left: 40px; top: 40px; z-index: 50; } #section3 #car-mask { background: url("../images/s3_fantasyfactory/car-mask.png"); width: 168px; height: 152px; position: absolute; top: 0; left: 0; } #section3 #carsvg { position: absolute; top: 0; left: 0; z-index: 20; width: 962px; height: 289px; } #section3 #carsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section3 #s3-copy { /*background: url('../images/s3_fantasyfactory/copy.png');*/ width: 87%; height: auto; position: relative; left: 0; right: 0; margin: 0 auto; display: block; padding: 0 40px; top: 80px; font-size: 21px; line-height: 1.1; } #section3 #s3-copy p { display: inline; } #section3 #s3-copy .quote { display: inline; float: none; line-height: 1.1; position: relative; margin-left: 0; hanging-punctuation: first; width: auto; font-size: 21px; text-indent: 0; } #section3 #s3-copy.copyblock { border-top: none; } #section3 #s3-cta { width: 159px; margin-top: 20px; } #section3 #s3-facts img { visibility: visible; } #section3 #s3-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 228px; height: 228px; position: relative; top: 600px; left: auto; display: block; margin: 0 auto; } #section3 #s3-fact1 img { width: 130px; height: 163px; margin-left: 50px; margin-top: 30px; position: absolute; } #section3 #s3-fact2 { display: none; } #section3 #s3-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 285px; height: 285px; position: relative; top: 750px; left: auto; margin: 0 auto; display: block; } #section3 #s3-fact3 img { width: 181px; height: 201px; margin-top: 45px; margin-left: 50px; z-index: 100; position: absolute; } #section3 #shark-mask { background: url("../images/s3_fantasyfactory/shark-mask.png"); width: 250px; height: 156px; position: relative; top: 600px; left: auto; right: -400px; } #section3 #tiger-mask { background: url("../images/s3_fantasyfactory/tiger-mask.png"); width: 288px; height: 247px; position: relative; top: 180px; left: 50px; } #section3 #tigersvg { position: relative; visibility: visible; top: 300px; left: 15px; /* &.animate { path { @include animate(0, 20s, draw); } } */ } #section3 #sharksvg { position: absolute; top: 2118px; left: 554px; } #section3 #sharksvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } /* section 5 */ #section4 { position: relative; min-height: 1500px; overflow: hidden; background: black url("../images/poster-glow.jpg") center center repeat-y; display: none; } #section4 #s4-tag1, #section4 #ridiculousness { display: none; visibility: hidden; } #section4 #s4-title1 { font-size: 47.105px; font-family: 'AlternateGothicCom-No1'; color: white; text-transform: uppercase; line-height: 0.828; text-align: right; -moz-transform: none; -webkit-transform: none; -ms-transform: none; position: relative; left: auto; top: 40px; right: 40px; } #section4 #ridiculousnesssvg { position: relative; top: 0; left: 40px; display: none; } #section4 #ridiculousnesssvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section4 #s4-copy { /*background: url('../images/s4_ridiculousness/copy.png');*/ width: 87%; height: auto; position: relative; left: 0; right: 0; margin: 0 auto; display: block; padding: 0 40px; border-top: none; text-align: left; z-index: 50; top: 80px !important; font-size: 21px; line-height: 1.1; } #section4 #s4-copy p { display: inline; } #section4 #s4-copy .quote { display: inline; float: none; line-height: 1.1; position: relative; margin-left: 0; hanging-punctuation: first; width: auto; font-size: 21px; text-indent: 0; } #section4 #s4-cta { width: 159px; margin-top: 20px; } #section4 #s4-fact1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 320px; height: 320px; position: relative; top: 550px; left: auto; margin: 0 auto; } #section4 #s4-fact1 img { width: 149px; height: 88px; position: absolute; margin: 70px auto; left: 0; right: 0; } #section4 #s4-fact2 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 320px; height: 320px; position: relative; top: 650px; left: auto; margin: 0 auto; } #section4 #s4-fact2 img { width: 265px; height: 128px; position: absolute; margin: 95px auto; left: 0; right: 0; } #section4 #s4-fact3 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 218px; height: 218px; position: absolute; top: 3648px; left: 253px; } #section4 #s4-fact3 img { width: 142px; height: 144px; margin-top: 35px; margin-left: 40px; z-index: 100; } #section4 #scorpions { background: url("../images/s4_ridiculousness/scorpbody.png"); width: 135px; height: 107px; position: absolute; top: 3696px; left: 130px; } #section4 #scorpionsanimation { background: url("../images/s4_ridiculousness/Top3Categories_Animated.gif"); position: absolute; top: 3696px; left: 54px; width: 223px; height: 122px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section4 #slamsvg { position: absolute; top: 3580px; left: 688px; } #section4 #slamsvg.animate path { -webkit-animation-delay: 0; -webkit-animation-duration: 20s; -webkit-animation-name: draw; -webkit-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 20s; animation-name: draw; animation-fill-mode: forwards; } #section4 #s4-dot1 { background: url("../images/ellipse2.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 20px; height: 20px; position: absolute; top: 2925px; left: 131px; } }