.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave { transition-duration: 500ms; transition-timing-function: linear; } .slide-in-down.mui-enter { -webkit-transform: translateY(-100%); transform: translateY(-100%); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-in-down.mui-enter.mui-enter-active { -webkit-transform: translateY(0); transform: translateY(0); } .slide-in-left.mui-enter { -webkit-transform: translateX(-100%); transform: translateX(-100%); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-in-left.mui-enter.mui-enter-active { -webkit-transform: translateX(0); transform: translateX(0); } .slide-in-up.mui-enter { -webkit-transform: translateY(100%); transform: translateY(100%); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-in-up.mui-enter.mui-enter-active { -webkit-transform: translateY(0); transform: translateY(0); } .slide-in-right.mui-enter { -webkit-transform: translateX(100%); transform: translateX(100%); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-in-right.mui-enter.mui-enter-active { -webkit-transform: translateX(0); transform: translateX(0); } .slide-out-down.mui-leave { -webkit-transform: translateY(0); transform: translateY(0); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-out-down.mui-leave.mui-leave-active { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .slide-out-right.mui-leave { -webkit-transform: translateX(0); transform: translateX(0); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-out-right.mui-leave.mui-leave-active { -webkit-transform: translateX(100%); transform: translateX(100%); } .slide-out-up.mui-leave { -webkit-transform: translateY(0); transform: translateY(0); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-out-up.mui-leave.mui-leave-active { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .slide-out-left.mui-leave { -webkit-transform: translateX(0); transform: translateX(0); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-out-left.mui-leave.mui-leave-active { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .fade-in.mui-enter { opacity: 0; transition-property: opacity; } .fade-in.mui-enter.mui-enter-active { opacity: 1; } .fade-out.mui-leave { opacity: 1; transition-property: opacity; } .fade-out.mui-leave.mui-leave-active { opacity: 0; } .hinge-in-from-top.mui-enter { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); -webkit-transform-origin: top; transform-origin: top; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .hinge-in-from-top.mui-enter.mui-enter-active { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); opacity: 1; } .hinge-in-from-right.mui-enter { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); -webkit-transform-origin: right; transform-origin: right; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .hinge-in-from-right.mui-enter.mui-enter-active { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); opacity: 1; } .hinge-in-from-bottom.mui-enter { -webkit-transform: perspective(2000px) rotateX(90deg); transform: perspective(2000px) rotateX(90deg); -webkit-transform-origin: bottom; transform-origin: bottom; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .hinge-in-from-bottom.mui-enter.mui-enter-active { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); opacity: 1; } .hinge-in-from-left.mui-enter { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); -webkit-transform-origin: left; transform-origin: left; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .hinge-in-from-left.mui-enter.mui-enter-active { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); opacity: 1; } .hinge-in-from-middle-x.mui-enter { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); -webkit-transform-origin: center; transform-origin: center; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .hinge-in-from-middle-x.mui-enter.mui-enter-active { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); opacity: 1; } .hinge-in-from-middle-y.mui-enter { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); -webkit-transform-origin: center; transform-origin: center; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .hinge-in-from-middle-y.mui-enter.mui-enter-active { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); opacity: 1; } .hinge-out-from-top.mui-leave { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); -webkit-transform-origin: top; transform-origin: top; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .hinge-out-from-top.mui-leave.mui-leave-active { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } .hinge-out-from-right.mui-leave { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); -webkit-transform-origin: right; transform-origin: right; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .hinge-out-from-right.mui-leave.mui-leave-active { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } .hinge-out-from-bottom.mui-leave { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); -webkit-transform-origin: bottom; transform-origin: bottom; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .hinge-out-from-bottom.mui-leave.mui-leave-active { -webkit-transform: perspective(2000px) rotateX(90deg); transform: perspective(2000px) rotateX(90deg); opacity: 0; } .hinge-out-from-left.mui-leave { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); -webkit-transform-origin: left; transform-origin: left; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .hinge-out-from-left.mui-leave.mui-leave-active { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } .hinge-out-from-middle-x.mui-leave { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); -webkit-transform-origin: center; transform-origin: center; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .hinge-out-from-middle-x.mui-leave.mui-leave-active { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } .hinge-out-from-middle-y.mui-leave { -webkit-transform: perspective(2000px) rotate(0deg); transform: perspective(2000px) rotate(0deg); -webkit-transform-origin: center; transform-origin: center; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .hinge-out-from-middle-y.mui-leave.mui-leave-active { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } .scale-in-up.mui-enter { -webkit-transform: scale(0.5); transform: scale(0.5); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .scale-in-up.mui-enter.mui-enter-active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .scale-in-down.mui-enter { -webkit-transform: scale(1.5); transform: scale(1.5); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .scale-in-down.mui-enter.mui-enter-active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .scale-out-up.mui-leave { -webkit-transform: scale(1); transform: scale(1); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .scale-out-up.mui-leave.mui-leave-active { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } .scale-out-down.mui-leave { -webkit-transform: scale(1); transform: scale(1); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .scale-out-down.mui-leave.mui-leave-active { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } .spin-in.mui-enter { -webkit-transform: rotate(-0.75turn); transform: rotate(-0.75turn); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .spin-in.mui-enter.mui-enter-active { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } .spin-out.mui-leave { -webkit-transform: rotate(0); transform: rotate(0); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .spin-out.mui-leave.mui-leave-active { -webkit-transform: rotate(0.75turn); transform: rotate(0.75turn); opacity: 0; } .spin-in-ccw.mui-enter { -webkit-transform: rotate(0.75turn); transform: rotate(0.75turn); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 0; } .spin-in-ccw.mui-enter.mui-enter-active { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } .spin-out-ccw.mui-leave { -webkit-transform: rotate(0); transform: rotate(0); transition-property: -webkit-transform, opacity; transition-property: transform, opacity; opacity: 1; } .spin-out-ccw.mui-leave.mui-leave-active { -webkit-transform: rotate(-0.75turn); transform: rotate(-0.75turn); opacity: 0; } .slow { transition-duration: 750ms!important; } .fast { transition-duration: 250ms!important; } .linear { transition-timing-function: linear!important; } .ease { transition-timing-function: ease!important; } .ease-in { transition-timing-function: ease-in!important; } .ease-out { transition-timing-function: ease-out!important; } .ease-in-out { transition-timing-function: ease-in-out!important; } .bounce-in { transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245)!important; } .bounce-out { transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845)!important; } .bounce-in-out { transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245)!important; } .short-delay { transition-delay: 300ms!important; } .long-delay { transition-delay: 700ms!important; } .shake { -webkit-animation-name: shake-7; animation-name: shake-7; } @-webkit-keyframes shake-7 { 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { -webkit-transform: translateX(7%); transform: translateX(7%); } 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { -webkit-transform: translateX(-7%); transform: translateX(-7%); } } @keyframes shake-7 { 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { -webkit-transform: translateX(7%); transform: translateX(7%); } 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { -webkit-transform: translateX(-7%); transform: translateX(-7%); } } .spin-cw { -webkit-animation-name: spin-cw-1turn; animation-name: spin-cw-1turn; } @-webkit-keyframes spin-cw-1turn { 0% { -webkit-transform: rotate(-1turn); transform: rotate(-1turn); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes spin-cw-1turn { 0% { -webkit-transform: rotate(-1turn); transform: rotate(-1turn); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } .spin-ccw { -webkit-animation-name: spin-cw-1turn; animation-name: spin-cw-1turn; } @keyframes spin-cw-1turn { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .wiggle { -webkit-animation-name: wiggle-7deg; animation-name: wiggle-7deg; } @-webkit-keyframes wiggle-7deg { 40%, 50%, 60% { -webkit-transform: rotate(7deg); transform: rotate(7deg); } 35%, 45%, 55%, 65% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); } 0%, 30%, 70%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes wiggle-7deg { 40%, 50%, 60% { -webkit-transform: rotate(7deg); transform: rotate(7deg); } 35%, 45%, 55%, 65% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); } 0%, 30%, 70%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } } .infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .slow { -webkit-animation-duration: 750ms!important; animation-duration: 750ms!important; } .fast { -webkit-animation-duration: 250ms!important; animation-duration: 250ms!important; } .linear { -webkit-animation-timing-function: linear!important; animation-timing-function: linear!important; } .ease { -webkit-animation-timing-function: ease!important; animation-timing-function: ease!important; } .ease-in { -webkit-animation-timing-function: ease-in!important; animation-timing-function: ease-in!important; } .ease-out { -webkit-animation-timing-function: ease-out!important; animation-timing-function: ease-out!important; } .ease-in-out { -webkit-animation-timing-function: ease-in-out!important; animation-timing-function: ease-in-out!important; } .bounce-in { -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245)!important; animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245)!important; } .bounce-out { -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845)!important; animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845)!important; } .bounce-in-out { -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245)!important; animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245)!important; } .short-delay { -webkit-animation-delay: 300ms!important; animation-delay: 300ms!important; } .long-delay { -webkit-animation-delay: 700ms!important; animation-delay: 700ms!important; } div.orbit ul.orbit-container { /*//background-color: rgba(50, 50, 50, 1); /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+10,2c2c2c+30,2c2c2c+50,2c2c2c+70,595959+90,4c4c4c+100 / background: rgb(76, 76, 76); /* Old browsers / background: -moz-linear-gradient(left, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 10%, rgba(44, 44, 44, 1) 30%, rgba(44, 44, 44, 1) 50%, rgba(44, 44, 44, 1) 70%, rgba(89, 89, 89, 1) 90%, rgba(76, 76, 76, 1) 100%); /* FF3.6-15 / background: -webkit-linear-gradient(left, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 10%, rgba(44, 44, 44, 1) 30%, rgba(44, 44, 44, 1) 50%, rgba(44, 44, 44, 1) 70%, rgba(89, 89, 89, 1) 90%, rgba(76, 76, 76, 1) 100%); /* Chrome10-25,Safari5.1-6 / background: linear-gradient(to right, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 10%, rgba(44, 44, 44, 1) 30%, rgba(44, 44, 44, 1) 50%, rgba(44, 44, 44, 1) 70%, rgba(89, 89, 89, 1) 90%, rgba(76, 76, 76, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ / filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#4c4c4c', GradientType=1); /* IE6-9 */ background-image: url('../images/hexabump.png'); height: auto !important; } li.orbit-slide { text-align: center; /*margin-top: 20px; margin-bottom: 20px;*/ } li.orbit-slide img { box-shadow: 5px 5px 5px rgba(0, 0, 0, 1); } div.audio-container { margin: 5px auto 0; text-align: center; } .hidden { display: none; } .switch::after { content: "Autoplay?"; color: #09346B; vertical-align: top; line-height: 38px; font-size: 20px; padding-right: 5px; } input:checked ~ .switch-paddle { background: #09346B; } .slide-selection-menu { position: relative; margin: 0 auto; background-color: rgba(30, 30, 30, 0.90); height: 90%; overflow-y: scroll; z-index: 10; border: 2px solid black; padding: 20px 15px 125px; border: 2px solid rgb(100, 100, 100); border-top-left-radius: 10px; } .slide-selection-menu-right { border-top-right-radius: 10px; } .slide-selection-menu.in-and-hidden { top: 5px; height: 0; transition: all 1s; border: 1px solid rgb(150, 150, 150); border: none; padding: 0; } .slide-selection-menu.out-and-about { top: -90%; transition: all 1s; margin: 0 auto -90%; } div.card img { max-width: 100%; width: 100%; } div.card-section p { color: #666; text-align: center; background-color: #fff; } div.card:hover { cursor: pointer; box-shadow: -3px 0px 7px rgb(250, 250, 250, 1), 3px 0px 7px rgb(250, 250, 250, 1); transition: 0.5s; } .audio-menu-row { position: fixed; bottom: 0; width: 100%; z-index: 20; background-color: #fff; /*height: 60px;*/ box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.7); border-top: 4px solid #ccc; border-bottom: 4px solid #ccc; } audio::-webkit-media-controls-timeline { display: none; } audio::-moz-media-controls-timeline { display: none; } body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#021841+0,1e5799+50,021841+99 */ background: rgb(2, 24, 65); /* Old browsers */ background: -moz-linear-gradient(left, rgba(2, 24, 65, 1) 0%, rgba(30, 87, 153, 1) 50%, rgba(2, 24, 65, 1) 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(2, 24, 65, 1) 0%, rgba(30, 87, 153, 1) 50%, rgba(2, 24, 65, 1) 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(2, 24, 65, 1) 0%, rgba(30, 87, 153, 1) 50%, rgba(2, 24, 65, 1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#021841', endColorstr='#021841', GradientType=1); /* IE6-9 */ overflow: hidden; } .page-header { box-shadow: 1px 5px 5px rgba(0, 0, 0, 1); color: #fff; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#021841+0,1e5799+50,021841+99 */ background: rgb(2, 24, 65); /* Old browsers */ background: -moz-linear-gradient(left, rgba(2, 24, 65, 1) 0%, rgba(30, 87, 153, 1) 50%, rgba(2, 24, 65, 1) 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(2, 24, 65, 1) 0%, rgba(30, 87, 153, 1) 50%, rgba(2, 24, 65, 1) 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(2, 24, 65, 1) 0%, rgba(30, 87, 153, 1) 50%, rgba(2, 24, 65, 1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#021841', endColorstr='#021841', GradientType=1); position: relative; z-index: 1000; } .logo-globe { width: 50px; padding-left: 5px; margin-left: 0; } .logo-comet { width: 50px; margin-left: -50px; animation: 20s linear 0s normal none infinite running globeMoves; } .top-bar, .top-bar ul { background-color: transparent; } .menu > li { padding-top: 3px; } ul.menu { /*margin: -7px;*/ } div.top-bar { border-bottom: 5px solid #ccc; } .top-bar-right { float: none; } @keyframes globeMoves { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } } div.audio-blocker { width: 150px; height: 30px; position: relative; z-index: 10000; top: -41px; right: -195px; } div.card-section p { color: #363636; text-align: center; background-color: #fff; min-height: 50px; font-size: 15px; font-weight: bold; background-color: #d5d5d5; padding: 5px; } div.replay-screen { width: 100%; height: 100%; } #aPlayer > audio { width: 100% } .large-icon { font-size: 30px; } .audio-player span { line-height: 18px; vertical-align: middle; /*padding-bottom: 13px;*/ font-size: 24px; } .audio-player span { line-height: 18px; vertical-align: middle; /*padding-bottom: 13px;*/ font-size: 24px; } .audio-player span:not(*:root) { vertical-align: inherit; } .audio-player input#slider { max-width: 60px; } .audio-player button { margin-right: 25px; } .audio-player button#button-volume { /*margin-left: 15px;*/ margin-left: 0px !important; margin-right: 5px; } .audio-player { color: #09346B; /*margin-top: 7px;*/ margin-top: 0px; } .dimmed { cursor: default; color: #AFAFAF; opacity: 0.5; } .to-the-back { position: absolute; z-index:-10000; transition: 1s all; } @media screen and (min-width: 1000px) and (max-width: 1500px) { .audio-player span { display: none; } h2 { font-size: 2rem; } } @media screen and (min-width: 800px) and (max-width: 1060px) { .audio-player button { margin-right: 15px; } input#slider { display:none; } .large-icon { font-size: 20px; } li.presentation-menu { font-size: 28px; } li.presentation-menu a i.fi-list { font-size: 20px; } .switch::after { content: "Autoplay?"; color: #09346B; vertical-align: top; line-height: 38px; font-size: 15px; padding-right: 5px; } h2 { font-size: 2rem; } .audio-player span { display: none; } } @media screen and (min-width: 1px) and (max-width: 866px) { .audio-player button { margin-right: 7px; } .audio-player span { display: none; } .large-icon { font-size: 10px; } .switch::after { content: "Autoplay?"; color: #09346B; vertical-align: top; line-height: 38px; font-size: 15px; padding-right: 5px; } h2 { font-size: 2rem; } #button-volume { display: none; } input#slider { display:none; } li.presentation-menu { font-size: 15px; } li.presentation-menu a i.fi-list { font-size: 10px; } /* .medium-1{max-width:500px} .medium-2{max-width:500px} .medium-3{max-width:500px} .medium-4{max-width:500px} .medium-5{max-width:500px} .medium-6{max-width:500px} .medium-7{max-width:500px} .medium-8{max-width:500px} .medium-9{max-width:500px} .medium-10{max-width:500px} .medium-11{max-width:500px} .medium-12{max-width:500px} .small-1{max-width:500px} .small-2{max-width:500px} .small-3{max-width:500px} .small-4{max-width:500px} .small-5{max-width:500px} .small-6{max-width:500px} .small-7{max-width:500px} .small-8{max-width:500px} .small-9{max-width:500px} .small-10{max-width:500px} .small-11{max-width:500px} .small-12{max-width:500px} */ } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* HIDE DOWNLOAD AUDIO BUTTON */ #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } body { background-image: url(../images/hexabump.png) !important; height: 100% !important; width: 100% !important; } .orbit, .orbit-container { height: 100%; margin: 0 auto !important; padding: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 100% !important; padding: 0 !important; } @media only screen and (max-width: 1023px) and (min-width: 768px) { .logo-globe, .logo-comet { width: 35px !important; } .logo-comet { margin-left: -35px !important; } } @media screen and (min-width: 768px) { li.orbit-slide { height: inherit; padding-bottom: 160px; max-height:100% !important; } } @media screen and (min-width: 480px) and (max-width: 768px) { li.orbit-slide { height: inherit; padding-bottom: 50px; max-height:100% !important; } } @media screen and (max-width: 480px) { li.orbit-slide { height: inherit; padding-bottom: 0px; max-height:100% !important; } } @media screen and (min-width: 768px) { .bottom-row { padding-bottom: 150px !important; } } @media screen and (min-width: 640px) and (max-width: 768px) { .bottom-row { padding-bottom: 50px !important; } button.orbit-previous { display: none; } button.orbit-next { display: none; } } @media screen and (min-width: 480px) and (max-width: 640px) { .bottom-row { padding-bottom: 0px !important; } button.orbit-previous { display: none; } button.orbit-next { display: none; } } @media screen and (max-width: 480px) { .bottom-row { padding-bottom: 0px !important; } button.orbit-previous { display: none; } button.orbit-next { display: none; } /*.mobile-centerer { margin-top: 110px !important; } ul.orbit-container li.orbit-slide img.android-centerer { margin-top: -180px !important; }*/ } div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { margin: 0 auto; height: auto; max-width: 100% !important; max-height: 100% !important; } /*@media screen and (max-height: 300px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 400px !important; } .bottom-row { padding-bottom: 250px !important; } } @media screen and (min-height: 300px) and (max-height: 400px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 400px !important; } .bottom-row { padding-bottom: 250px !important; } } @media screen and (min-height: 400px) and (max-height: 500px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 355px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 400px !important; } .bottom-row { padding-bottom: 120px !important; } } @media screen and (min-height: 500px) and (max-height: 600px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 420px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 500px !important; } .bottom-row { padding-bottom: 120px !important; } } @media screen and (min-height: 600px) and (max-height: 700px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 560px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 600px !important; } .bottom-row { padding-bottom: 120px !important; } } @media screen and (min-height: 700px) and (max-height: 800px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 680px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 700px !important; } .bottom-row { padding-bottom: 120px !important; } } @media screen and (min-height: 800px) and (max-height: 900px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 820px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 800px !important; } .bottom-row { padding-bottom: 120px !important; } } @media screen and (min-height: 900px) and (max-height: 1000px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 950px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 900px !important; } .bottom-row { padding-bottom: 120px !important; } } @media screen and (min-height: 1000px) and (max-height: 1100px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 1000px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 1000px !important; } .bottom-row { padding-bottom: 110px !important; } } @media screen and (min-height: 1100px) { div#slideShowStage.orbit > ul.orbit-container li.orbit-slide > img { width: 1150px !important; margin: 0 auto !important; } div#slideShowStage.orbit > ul.orbit-container { background-image: url(../images/hexabump.png); height: 1000px !important; } .bottom-row { padding-bottom: 50px !important; } }*/ body, html { width:100%; }