* { box-sizing: border-box; } body { font-family:'Kavivanar',Sans-Serif; width: 100%; max-width:966px; font-size:28px; margin:0 auto; text-align:left; border:0px solid #666; padding: 20px 0; background: #fff; } h1, h2 { font-size: 38px; font-family:'Mystery Quest',Sans-Serif; margin: 0; padding: 0; display: inline; } h2 { padding: 0 20px 0 25px; } /*.tablebg { background-image: url("../img/papier.png"); background-size: 100%; padding-top: 70px; margin-top: 120px; opacity: 0.7; }*/ .tablebg { background-color: rgba(245, 230, 177, 0.43);; border-radius: 30px; padding: 30px 0; } table { font-family:'Kavivanar',Sans-Serif; width: 100%; max-width: 800px; font-size:20px; /*margin:10px auto;*/ text-align:left; border:0px solid #666; /*padding:10px;*/ opacity: 1; } .buchen { font-family:'Mystery Quest',Sans-Serif; font-size:35px; } .decosnowboard { font-family: 'kr_bloombonanza'; font-weight: normal; font-style: normal; font-size:60px; } .decoski { font-family:'kr_bloombonanza'; font-size:60px; } .decoski2 { font-family:'kr_skiregular'; font-size:60px; } a.buchen { margin:60px 30px 0 30px; text-align:left; border:0px solid #666; padding:5px 30px 10px; display: inline-block; color: white; background-color: #00adff; -webkit-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; border-radius: 5px; } @media only screen and (max-width: 568px) { a.buchen { margin:60px 0 0 0; } } a.buchen:hover { color:white; background-color: #ff005e; } a { color:#000000; } .deco:link { text-decoration: none; } .deco:visited { text-decoration: none; } .deco:hover { text-decoration: none; } .deco:active { text-decoration: none; } .txt { font-family:'Kavivanar',Sans-Serif; color:#000000; font-size:30px; margin:0 auto; text-justify: inter-word; border:0px solid #666; padding: 12px 10px 0 12px; width: 100%; max-width: 910px; display: block; } .google-maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } #instagram-target { position: relative; width: 100%; height: 320px; padding: 0 -10px; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } #instagram-target > * { -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } #instagram-target > .sk-folding-cube { opacity: 0; } .slide { height: 100%; width: 320px; margin-right: 3px; } .slide img { height: 100%; } .flickity-page-dots { bottom: 15px; opacity: 0.7; display: none; } /* white circles */ .flickity-page-dots .dot { width: 6px; height: 6px; opacity: 1; background: transparent; border: 2px solid white; margin: 0 4px; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background: white; } .flickity-prev-next-button { width: 50px; height: 50px; background: transparent; } .flickity-prev-next-button:hover { background: transparent; } .flickity-prev-next-button .arrow { fill: white; } .flickity-prev-next-button.no-svg { color: white; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .invisible > * { opacity: 0; } .invisible > .sk-folding-cube { opacity: 1 !important; } .burger { display: inline-block; border: 0; background: none; outline: 0; padding: 0; cursor: pointer; border-bottom: 4px solid currentColor; width: 38px; transition: border-bottom 1s ease-in-out; -webkit-transition: border-bottom 1s ease-in-out; } .burger::-moz-focus-inner { border: 0; padding: 0; } .burger:before { content: ""; display: block; border-bottom: 4px solid currentColor; width: 100%; margin-bottom: 5px; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .burger:after { content: ""; display: block; border-bottom: 4px solid currentColor; width: 100%; margin-bottom: 5px; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .burger-check { display: none; } .burger-check:checked ~ .burger { border-bottom: 4px solid transparent; transition: border-bottom 0.8s ease-in-out; -webkit-transition: border-bottom 0.8s ease-in-out; } .burger-check:checked ~ .burger:before { transform: rotate(-405deg) translateY(1px) translateX(-3px); -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px); transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .burger-check:checked ~ .burger:after { transform: rotate(405deg) translateY(-4px) translateX(-5px); -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px); transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .navigation { overflow: hidden; max-height: 0; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .burger-check:checked ~ .navigation { max-height: 600px; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } a { color: inherit; } small { font-size: 14px; } ul { margin: 0; padding: 0; } li { list-style: none; font-size: 35px; padding: 5px 0; } li a { text-decoration: none; font-weight: bold; font-family:'Mystery Quest',Sans-Serif; color: #000000; // background-color: #cccccc; } li a:hover { text-decoration: underline; } .navi { z-index: 100; position:fixed; width: 100%; text-align: right; right: 20; top: 20; } .noopaque { opacity:1; } .content { background-color: white; z-index: 1; position: relative; } .overlay { /* Height & width depends on how you want to reveal the overlay (see JS below) */ height: 100%; width: 100%; text-align: right; position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ right: 0; top: 0; overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ } .fancybox-slide>div.slide { width: 70%; height: auto; } .addthis_inline_follow_toolbox { display: inline-block; } .sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); position: absolute; left: calc(50% - 20px); top: 120px; } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }