element */ .header h1 { font-size: 40px; } /* Style the top navigation bar */ .navbar { background-color: #333; /* Dark background color */ } /* Style the navigation bar links */ .navbar a { float: left; /* Make sure that the links stay side-by-side */ display: block; /* Change the display to block, for responsive reasons (see below) */ color: white; /* White text color */ text-align: center; /* Center the text */ padding: 14px 20px; /* Add some padding */ text-decoration: none; /* Remove underline */ z-index: 50; } /* Right-aligned link */ .navbar a.right { float: right; /* Float a link to the right */ } /* Change color on hover/mouse-over */ .navbar a:hover { background-color: #ddd; /* Grey background color */ color: black; /* Black text color */ } /* Ensure proper sizing */ * { box-sizing: border-box; } /* Column container */ .row { display: flex; flex-wrap: wrap; } /* Create two unequal columns that sits next to each other */ /* Sidebar/left column */ .side { flex: 30%; /* Set the width of the sidebar */ background-color: #f1f1f1; /* Grey background color */ padding: 20px; /* Some padding */ } /* Main column */ .main { flex: 70%; /* Set the width of the main content */ background-color: white; /* White background color */ padding: 20px; /* Some padding */ z-index: 10; } /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 700px) { .row { flex-direction: column; } } /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } } .footer { padding: 20px; /* Some padding */ text-align: center; /* Center text*/ background: #ddd; /* Grey background */ } .dropdown-menu{ background-color: #333; color: white; /* White text color */ } .dropdown-item { position: relative; background-color: #333; } .dropdown-item a { color: white; /* White text color */ text-align: center; /* Center the text */ padding: 14px 20px; /* Add some padding */ text-decoration: none; /* Remove underline */ z-index: 50; } /* Change color on hover/mouse-over */ .dropdown-item a:hover { background-color: #ddd; /* Grey background color */ color: white; /* Black text color */ } #nav-link-menu { text-align: center; float: none; color: #ddd; display: grid; } #nav-link-menu:hover{ color: white; background-color: #ddd; display: grid; } #nav-link-side { text-align: left; float: left; color: black; display: grid; } .card { border: none; } .card-image { position: relative; } .image-overlay { top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background: rgba(0, 0, 0, 0.5); color: white; position:absolute; text-align:center; box-sizing:border-box; padding:20px; border-color: white } .card:hover .image-overlay { opacity: 1; } .card:hover .card-image{ transform: scale(1.02); transition: .5s ease; } .area{ background: #50a3a2; background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); width: 100%; height:35vh; } .circles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .circles li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.6); animation: animate 25s linear infinite; bottom: -150px; } .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } /* Logo, navigation menu styling */ #manual_sele { display: none; } /* stylinf navigation menu */ #advanced_options { display:none; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } #results_table { border-collapse: collapse; width: 100%; } #results_th, #results_td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; background-color: white; } #results_tr:hover {background-color: #50a3a2;}