|
|
| Line 13: |
Line 13: |
| | | | |
| | <style> | | <style> |
| − |
| |
| − | /**********************************************************************************************************************/
| |
| − | /******************************************************* SLIDESHOW ***************************************************/
| |
| − | /**********************************************************************************************************************/
| |
| − | .slideshow {
| |
| − | position: relative;
| |
| − | width: 80vw;
| |
| − | height: 45vw;
| |
| − | margin: 0 10%;
| |
| − | overflow-y: hidden;
| |
| − | }
| |
| − |
| |
| − | .slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
| |
| − | position:absolute;
| |
| − | right:0;
| |
| − | top:0;
| |
| − | height:100%;
| |
| − | width:10%;
| |
| − | background: rgba(0,0,0,0.3);
| |
| − | -webkit-transition: all 0.3s;
| |
| − | -moz-transition: all 0.3s;
| |
| − | -ms-transition: all 0.3s;
| |
| − | -o-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | z-index:75;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − |
| |
| − | .slideshow .left-arrow-pane {
| |
| − | left:0;
| |
| − | }
| |
| − |
| |
| − | .slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow {
| |
| − | position:absolute;
| |
| − | top:50%;
| |
| − | left:30%;
| |
| − | transform:translate(-50%, -50%);
| |
| − | -webkit-transition: all 0.3s;
| |
| − | -moz-transition: all 0.3s;
| |
| − | -ms-transition: all 0.3s;
| |
| − | -o-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | /*z-index:50;*/
| |
| − | }
| |
| − |
| |
| − | .slideshow .left-arrow-pane .arrow {
| |
| − | right:30%;
| |
| − | left:auto;
| |
| − | transform: translate(50%, -50%);
| |
| − | }
| |
| − |
| |
| − | .slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{
| |
| − | height:5vw;
| |
| − | width:5vw;
| |
| − | transform:rotate(45deg);
| |
| − | border-style: solid;
| |
| − | border-color: rgba(255, 255, 255, .5);
| |
| − | border-width:5px 5px 0 0;
| |
| − | -webkit-transition: all 0.3s;
| |
| − | -moz-transition: all 0.3s;
| |
| − | -ms-transition: all 0.3s;
| |
| − | -o-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | }
| |
| − |
| |
| − | .slideshow .left-arrow-pane .arrow div{
| |
| − | transform:rotate(-135deg);
| |
| − | }
| |
| − |
| |
| − | .slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
| |
| − | background:rgba(0,0,0,.25);
| |
| − | }
| |
| − |
| |
| − | .slideshow .right-arrow-pane:hover .arrow {
| |
| − | left:35%;
| |
| − | }
| |
| − |
| |
| − | .slideshow .left-arrow-pane:hover .arrow {
| |
| − | right:35%;
| |
| − | }
| |
| − |
| |
| − | .slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
| |
| − | border-color:rgb(255,255,255);
| |
| − | }
| |
| − |
| |
| − | .slideshow .bubbles {
| |
| − | position:absolute;
| |
| − | width:100%;
| |
| − | height:10%;
| |
| − | bottom:0;
| |
| − | background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
| |
| − | display:flex;
| |
| − | justify-content: center;
| |
| − | z-index:50;
| |
| − | }
| |
| − |
| |
| − | .slideshow .bubbles div {
| |
| − | height:3vw;
| |
| − | width:3vw;
| |
| − | border-radius:5px;
| |
| − | border:solid white 3px;
| |
| − | margin:0 20px 0 0;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − |
| |
| − | .slideshow .bubbles div:last-child {
| |
| − | margin-right: 0;
| |
| − | }
| |
| − |
| |
| − | .slideshow .bubbles div:hover {
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | .slideshow .bubbles div.active {
| |
| − | background-color:white;
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn {
| |
| − | position:absolute;
| |
| − | height:5vw;
| |
| − | width:5vw;
| |
| − | bottom:1%;
| |
| − | right:12%;
| |
| − | background:rgba(0,0,0,.7);
| |
| − | border-radius:10px;
| |
| − | z-index:60;
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn .bars {
| |
| − | visibility: hidden;
| |
| − | position:absolute;
| |
| − | top:50%;
| |
| − | left:50%;
| |
| − | transform:translate(-50%, -50%);
| |
| − | width:3vw;
| |
| − | height:3vw;
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn .bars > div{
| |
| − | float:right;
| |
| − | width:40%;
| |
| − | height:100%;
| |
| − | background:rgba(255,255,255,.8);
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn .bars > div:first-child {
| |
| − | float:left;
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn:hover {
| |
| − | background: rgba(34,34,34,1);
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn:hover .bars > div {
| |
| − | background: rgba(255,255,255,1);
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn .tri {
| |
| − | visibility: hidden;
| |
| − | position: absolute;
| |
| − | top:50%;
| |
| − | left:50%;
| |
| − | transform: translate(-50%, -50%);
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn .tri > div {
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | border-top: 2vw solid transparent;
| |
| − | border-left-style: solid;
| |
| − | border-left-width: 3vw;
| |
| − | border-left-color:rgba(255,255,255,.75);
| |
| − | border-bottom: 2vw solid transparent;
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn:hover .tri > div{
| |
| − | border-left-color:rgba(255,255,255,1);
| |
| − | }
| |
| − |
| |
| − | .slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
| |
| − | visibility: visible;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content {
| |
| − | position:absolute;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content .slide {
| |
| − | visibility:hidden;
| |
| − | position:absolute;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | height:100%;
| |
| − | width:100%;
| |
| − | overflow-y: hidden;
| |
| − | -webkit-transition: left 1s;
| |
| − | -moz-transition: left 1s;
| |
| − | -ms-transition: left 1s;
| |
| − | -o-transition: left 1s;
| |
| − | transition: left 1s;
| |
| − | }
| |
| − | .slideshow .content .slide video, .slideshow .content .slide img {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content .slide:first-child {
| |
| − | visibility:visible;
| |
| − | left:0;
| |
| − | z-index: 1;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content .slide > img:first-child {
| |
| − | height:auto;
| |
| − | width: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content .slide.active {
| |
| − | left:0 !important;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content .slide.left {
| |
| − | left:-100vw !important;
| |
| − | }
| |
| − |
| |
| − | .slideshow .content .slide.right {
| |
| − | left:100vw !important;
| |
| − | }
| |
| − |
| |
| − | .splash .slideshow .title {
| |
| − | top:65%;
| |
| − | left:200px;
| |
| − | }
| |
| − |
| |
| − | #HQ_page .slideshow .title p {
| |
| − | font-size:7em;
| |
| − | }
| |
| − |
| |
| − | .notransition {
| |
| − | -webkit-transition: none !important;
| |
| − | -moz-transition: none !important;
| |
| − | -ms-transition: none !important;
| |
| − | -o-transition: none !important;
| |
| − | transition: none !important;
| |
| − | }
| |
| − | /**********************************************************************************************************************/
| |
| − | /**********************************************************************************************************************/
| |
| − | /******************************************************* SLIDESHOW *****************************************************/
| |
| − |
| |
| − |
| |
| | #scroll-section { | | #scroll-section { |
| | display: contents; | | display: contents; |
