#btn_StreetDay, #btn_RailDay, #btn_AirDay, #btn_AllDay{ background-color: #ffcc33; /* yellow */ border: none; color: white; width:3.2em; height:1.8em; /* padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 2px; box-shadow: 0 8px 16px 0 rgba(255,204,51,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } #btn_StreetDay:hover, #btn_RailDay:hover, #btn_AirDay:hover, #btn_AllDay:hover{ background-color: #af8a1c; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); cursor: pointer; } #btn_StreetNight, #btn_RailNight, #btn_AirNight, #btn_AllNight{ background-color: #3583f8; /* yellow */ border: none; color: white; width:3.2em; height:1.8em; /* padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 2px; box-shadow: 0 8px 16px 0 #3583f833, 0 6px 20px 0 rgba(0,0,0,0.19); } #btn_StreetNight:hover, #btn_RailNight:hover, #btn_AirNight:hover, #btn_AllNight:hover{ background-color: #235fb9; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); cursor: pointer; } #btn_StreetOff, #btn_RailOff, #btn_AirOff, #btn_AllOff{ background-color: #424242; /* yellow */ border: none; color: white; width:2.4em; height:1.8em; /* padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 2px; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19); } #btn_StreetOff:hover, #btn_RailOff:hover, #btn_AirOff:hover, #btn_AllOff:hover{ background-color: #161616; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); cursor: pointer; } #btn_NoiseSensOn,#btn_NoiseSensOpen,#btn_NoiseSensShow, #btn_NoiseSensOff, .btn_on, .btn_off{ background-color: #424242; /* yellow */ border: none; color: white; width:4em; height:1.8em; /* padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 2px; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19); } #btn_NoiseSensOn:hover,#btn_NoiseSensOpen:hover,#btn_NoiseSensShow:hover, #btn_NoiseSensOff:hover, .btn_on:hover, .btn_off:hover{ background-color: #161616; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); cursor: pointer; } #tourstart-btn, #balloon-startscreen{ /* box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */ /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12) ; */ } .btn-three{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } /* .btn_home{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); width:6em; height:2.3em; border-radius: 4px; text-align: center; margin-top: -15px; } */ .btn_standard{ background-color: #424242; /* yellow */ border: none; color: white; /* padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; width:10em;height:2em; border-radius: 2px; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19); } .btn_standard:hover{ background-color: #161616; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); cursor: pointer; } .dropbtn { color: #303030; background-color: white; border: 1px solid #121212 !important; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #414141; } .leftstuff{ float:left !important } /* Unser Logo */ .logo_kk{ height: 75px; width: 75px; /* float: left; */ z-index: 90; background: white; margin-top: 15px; position: absolute; /* padding: 25px; */ border-bottom-right-radius: 3px; border-top-right-radius: 3px; /* display: inline-block; */ transition: width 1s; overflow:hidden; cursor: pointer } #logo_title{ display:none; position:relative; } .logo_kk:hover{ width:250px; } .logo_kk:hover #logo_title{ display:block; position: relative; float: left; font-size: 20px; font-weight: 600; font-family: 'Roboto',sans-serif; height:75px; margin: 0px; padding: 26px 0; /* -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition: all .8s ease; -o-transition: all .8s ease; */ transition: width 2s; /* padding: 2px; */ } #logo_Main{ height: 75px; width: 75px; /* position: relative; */ padding: 15px; float:left; } .logo-box{ display:none; } .company-logo{ display:none; } .title-box{ display:none; } .btn_size{ padding: 7px !important; cursor: pointer; } .subcontent{ padding:0px !important; } .column3 { float: left; width: 33.33%; padding: 10px; padding-left: 0px; position: relative; text-align: center; color: white; /* height: 350px; Should be removed. Only for demonstration */ } .column23 { float: left; width: 66.66%; padding-left: 10px; position: relative; text-align: left; color: black; margin-top: 5px !important; padding-top:0px !important; /* height: 350px; Should be removed. Only for demonstration */ } .column2 { width: 33.33%; padding: 10px; position: relative; color: black; height: 30px; /*Should be removed. Only for demonstration */ float:left !important; margin-left: 20px; position:absolute; } .top-left { position: absolute; top: 8px; /* left: 16px; */ color:#121212; background-color: white; padding: 4px; padding-left: 7px; margin-left: 15px; padding-right: 7px; border-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; font-family: 'Roboto', sans-serif; font-weight:500; border:1px solid #121212; } .imagecol3{ /* border-color:#121212; */ border-width: 2px; border-radius:4px; border:1px solid #121212 ; } #colum_projects1{ } #colum_projects2{ } #colum_projects3{ } /* Clear floats after the columns */ .row3:after { content: ""; display: table; clear: both; } .row2:after { content: ""; display: table; clear: both; width: 100%; } /* ..-------------- */ #btn_backtotop { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 4px; } #btn_backtotop:hover { background-color: #555; } ul > li { display: inline-block; width: 5px; /* You can also add some margins here to make it look prettier */ zoom:1; *display:inline; /* this fix is needed for IE7- */ } /* The container */ .container { display: block; position: relative; padding-left: 35px; /* margin-bottom: 12px; */ cursor: pointer; /* font-size: 22px; */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color:#f1f1f1; border-width: 2px; border-radius:4px; border:solid #424242 ; box-shadow:0 8px 16px 0 #27272733, 0 6px 20px 0 rgb(0 0 0 / 19%); } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #424242; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 7px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mySlidesNord {display: none;} .mySlidesRosen {display: none;} /* Slideshow container */ .slideshow-containerNord { max-width: 1000px; position: relative; margin: auto; } .slideshow-containerRosen { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prevNord, .nextNord { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .prevRosen, .nextRosen { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; 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 */ .nextNord { right: 0; border-radius: 3px 0 0 3px; } .nextRosen { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prevNord:hover, .nextNord:hover { background-color: rgba(0,0,0,0.8); } .prevRosen:hover, .nextRosen:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .textNord { background-color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; color: #121212; border:1px solid #121212; bottom: 12px; width: 100%; text-align: center; } .textRosen { background-color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; color: #121212; border:1px solid #121212; bottom: 12px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertextNord { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .numbertextRosen { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dotNord { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dotRosen { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .activeNord, .dotNord:hover { background-color: #717171; } .activeRosen, .dotRosen: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} } */ /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prevNord, .nextNord,.textNord {font-size: 11px} } @media only screen and (max-width: 300px) { .prevRosen, .nextRosen,.textRosen {font-size: 11px} }