/* Border Colors of the header */ .vcm-border-splash{ border-color: #121212; } /* Change these two color values to change the button Color */ .vcm-base-splash, .vcm-btn-base-splash, .vcm-btn-base-splash-focus:focus, .vcm-btn-base-splash-hover.active, .vcm-btn-base-splash-hover.selected{ background-color: #121212; } .vcm-btn-base-splash-hover:hover, .vcm-btn-base-splash-active:hover{ background-color: #121212; } .vcm-font-splash, .vcm-btn-font-splash, .vcm-btn-font-splash-hover:hover, .vcm-btn-font-splash-hover.active, .vcm-btn-icon-font-splash-hover:hover, .vcm-btn-icon-font-splash-hover.active{ color: #121212; } /* Header Background Color */ .vcm-header-base { background-color: #121212; /* height: 3.5rem; */ } /* Ballooon Color */ .balloon{ /* border: 5px solid #a8c02b; */ } .balloon:before { /* border-color: #a8c02b transparent; */ } /** Show empty box for inactive layers in legend */ .setting-checker.inactive { /*display: block !important;*/ } /* Change Company logo in the upper left corner */ .company-logo { /* background-image: url(../images/logo.jpg); width: 140px;*/ height: 40px; } /* Hier den header ausmachen */ /* ---------------------------------------------------------------------------------------------- */ /* Change these values to change the height of the header (they should all have the same value) */ .vcm-header-height { /* height: 3.5rem; */ line-height: 2.5rem; /**/ } .vcm-map-top { top: 0rem; } #story-frame{ top:0em; } /* Change these values to change the height of the logobox in the lower left Company-box height should be 1rem less */ .vcm-map-bottom { /* bottom: 4rem; */ } .company-box { /* height: 2.5rem; */ display:none; } /* use this for map below header */ .mapElement { /* top : -10px; */ } @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); /* ====================================================================================== */ * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Hide the images by default */ .mySlides1, .mySlides2 {display: none} /* img {vertical-align: middle;} */ /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #121212; background-color: #f2f2f2; border: 1px solid black; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 12px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } #headOne{ font-family: "Roboto", Arial !important; font-weight: 700 !important; font-size: x-large; } .headOne{ font-family: "Roboto", Arial !important; font-weight: 700 !important; font-size: x-large; } h1{ font-family: "Roboto", Arial !important; font-weight: 700 !important; font-size: x-large; } h2{ font-family: "Roboto", Arial !important; font-weight: 500 !important; } h3{ font-family: "Roboto", Arial !important; font-weight: 500 !important; } .SideInfo{ padding:1em; } #SvgjsText1010{ font-family: "Roboto", Arial !important; font-weight: 500 !important; font-size: 18.72px; } .contentOne{ font-family: "Roboto", Arial; font-weight: 400; line-height: 1.6; } #tour-frame::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE and Edge */ #tour-frame { -ms-overflow-style: none; } #headerOne { position: fixed; top: 0; left: 0; right: 0; } /* @media (min-width: 720px) { nav.top { position: sticky; top: 0; } nav .topmenu { display: flex; -ms-flex-pack: justify; justify-content:space-between; flex-wrap: wrap; } } */ h1.sticky { /* position: -webkit-sticky; position: sticky; */ height:35px; top: 30px; font-size: 20px; /* padding:5px; */ padding-bottom:15px; /* background-color: white; */ z-index: 99; } div.tour-top-navi { position: -webkit-sticky; position: sticky; /* height:45px; */ top:0; margin-bottom:10px; background-color: white; padding-left:10px; margin:0px; } /* ´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´´ */ .balloon{ cursor: pointer; } /*----TEST--------------------------*/ .box-1 { background-color: #FF6766; } .box-2 { background-color: #3C3C3C; } .box-3 { /* background-color: #3C3C3C;; */ width: 100%; display: flex; align-items: center; margin-left: 0.5em; /* justify-content: center; */ } .btn { line-height: 50px; height: 50px; text-align: center; width: 200px; cursor: pointer; font-family: "Roboto", sans-serif; font-size: 400; } .btn_standard_settings{ font-weight:500; font-style: 'Roboto', sans-serif; } .btn-three { background-color: #ffffff; color: #3C3C3C; border-radius: 10px; border:1px solid #121212; transition: all 0.5s; position: relative; margin: 5px; width:50%; } .btn-three:hover { background-color:#3C3C3C ; color: #ffffff; border-radius: 10px; border:1px solid #121212; transition: all 0.5s; position: relative; margin: 5px; width:50%; } /* .btn-three::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color:#ffffff; transition: all 0.3s; } .btn-three:hover::before { opacity: 0 ; transform: scale(0.5,0.5); } .btn-three::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); transform: scale(1.2,1.2); } .btn-three:hover::after { opacity: 1; transform: scale(1,1); } */ .switch input { top: 0; right: 0; bottom: 0; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; } .switch { /* width: 180px; height: 55px; position: relative; margin-top: 5px !important; margin-bottom: 5px !important; margin-left: 20px !important; margin-right: 10px !important; */ width: 60px; height: 20px; position: relative; margin-top: 15px !important; margin-bottom: 4px !important; margin-left: 20px !important; margin-right: 10px !important; } .switch label { display: block; width: 80%; height: 100%; position: relative; background: #1F2736; /*#121823*/ background: linear-gradient(#121823, #161d2b); border-radius: 30px 30px 30px 30px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2); -webkit-transition: all .5s ease; transition: all .5s ease; } .switch input ~ label i { display: block; height: 20px; width: 20px; position: absolute; /* left: 2px; top: 2px; */ z-index: 2; border-radius: inherit; background: #283446; /* Fallback */ background: linear-gradient(#36455b, #283446); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 12px 12px rgba(0,0,0,0.4); -webkit-transition: all .5s ease; transition: all .5s ease; /* display: block; height: 20px; width: 20px; position: absolute; */ /* left: 2px; */ /* top: 2px; */ /* z-index: 2; border-radius: inherit; background: #283446; background: linear-gradient(#36455b, #283446); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 0 8px rgb(0 0 0 / 30%), 0 12px 12px rgb(0 0 0 / 40%); -webkit-transition: all .5s ease; transition: all .5s ease; */ } .switch label + span { content: ""; display: inline-block; position: absolute; right: -9px; top: 0px; width: 18px; height: 18px; border-radius: 10px; background: #283446; background: gradient-gradient(#36455b, #283446); box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5); -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } /* Toggle */ .switch input:checked ~ label + span { content: ""; display: inline-block; position: absolute; width: 18px; height: 18px; border-radius: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; background: #b9f3fe; background: gradient-gradient(#ffffff, #77a1b9); box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5); } .switch input:checked ~ label i { left: auto; left: 63%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.3), inset -1px 0 1px #b9f3fe; -webkit-transition: all .5s ease; transition: all .5s ease; } .infobtn { border: none; /* color: grey; */ /* padding: 12px 16px; */ /* font-size: 16px; */ cursor: pointer; float:right; background-color:rgb(60, 60, 60); } .infobtn:before { content: url(../images/Info.svg); width: 20px; float: right; /* margin-right: 5px; */ /* margin-top: -2px; */ } #dropdownMenu{ color:white !important; }