/* Custom CSS */

/* Navbar */

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: rgba(227, 190, 66, 0.8);
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: rgba(227, 190, 66, 0.8);
}

body {
    overflow-y: scroll;
}

.nav-ul-second > li > a {
    padding-top: 12px;
    padding-bottom: 2px !important;
}

.nav-ul-second {
    margin-left: 134px;
}

/* Buttons */
.btn-primary {
    background-color: #ffcc00;
    border: none;
    color: #000;
}

#nav-secondary {
    margin-top: 50px;
    max-height: 50px;
    height: 64px;
    background-color: #000;
}

.btn-primary:hover {
    background-color: #ffdb4d;
}

.navbar-collapse {
    background: #990000;
}

.btn-default {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-default:hover {
    color: #fff;
    background-color: #FFCC00;
    border-color: #fff;
}

.btn-default:focus,
.btn-default.focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

/* Other classes */

.vertical-center {
    min-height: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
}

.media-object {
    max-width: 64px;
    max-height: 64px;
}

.media-body {
    text-align: left;
}

#intro .title {
    font-size: 70px;
    margin-top: 4.5cm;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
}

.thumbnail {
    min-height: 430px;
}

.thumbnail img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.team-header-section {
    height: auto;
    min-height: 0;
    padding-top: 78px;
    padding-bottom: 8px;
}

.team-header-section h1 {
    margin-top: 0;
    margin-bottom: 12px;
}

.team-header-section .lead {
    margin-bottom: 0;
}

.team-viz-section {
    height: auto;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 24px;
}

.team-viz-section h2 {
    margin-top: 0;
    margin-bottom: 18px;
}

.team-viz-section .lead {
    margin-bottom: 18px;
}

.viz-embed {
    margin: 0 0 36px;
    padding: 18px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: left;
}

.viz-embed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.viz-embed-heading h3 {
    margin: 0;
}

.viz-embed iframe {
    width: 100%;
    height: 620px;
    border: 1px solid #ccc;
    background: #fff;
}

.viz-embed-tall iframe {
    height: 760px;
}

@media (max-width: 767px) {
    .viz-embed-heading {
        display: block;
    }

    .viz-embed-heading .btn {
        margin-top: 10px;
    }

    .viz-embed iframe,
    .viz-embed-tall iframe {
        height: 560px;
    }
}

.thumbnail h3 {
    padding: 3mm 0cm 0cm 0cm;
}

#mime-viz .thumbnail img {
    height: 200px;
    width: 400px;
}

#regular-viz .thumbnail img {
    height: 200px;
    width: 400px;
}

#dynamic-viz .thumbnail img {
    height: 200px;
    width: 400px;
}

#sce-viz .thumbnail img {
    height: 200px;
    width: 400px;
}

#sce-viz .thumbnail {
    height: 30%;
}

#eval-viz .thumbnail img {
    height: 200px;
    width: 400px;
}

#eval-viz .thumbnail {
    height: 30%;
}

#d3-other .thumbnail img {
    height: 200px;
    width: 400px;
}

#about .stylish-panel {
    padding: 20px 0;
    text-align: center;
}

#about .stylish-panel > div > div {
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.2s;
}

#about .stylish-panel > div:hover > div {
    margin-top: -10px;
    border: 1px solid rgb(200, 200, 200);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
    background: rgba(200, 200, 200, 0.1);
    transition: 0.5s;
}

#about .stylish-panel > div:hover img {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

#learn-more .panel .panel-body {
    min-height: 280px;
}

#irdsgroup {
    color: white;
    text-decoration: none;
}

#irdsgroup:hover {
    color: #FFCC00;
}

.sidenav {
    height: 100%;
    width: 320px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #990000;
    overflow-x: hidden;
    padding-top: 20px;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #FFF;
    display: block;
}

.sidenav a:hover {
    color: #f1f1f1;
}

div#centered {
    margin: 40px auto;
    display: inline-block;
    width: 76%;
    padding: 30px;
}

div#side > a:hover {
    background-color: #ffffaa;
    color: #ff0000;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* Zebra striping */
tr:nth-of-type(odd) {
    background: #eee;
}

th {
    background: #333;
    color: white;
    font-weight: bold;
    cursor: s-resize;
    background-repeat: no-repeat;
    background-position: 3% center;
}

td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

th.des:after {
    content: "\21E9";
}

th.aes:after {
    content: "\21E7";
}

@media
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr { border: 1px solid #ccc; }

		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
		*/
		td:before {
		  content: attr(data-th) ": ";
          font-weight: bold;
          width: 6.5em;
          display: inline-block;
		}
	}

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body {
			padding: 0;
			margin: 0;
			width: 320px; }
		}

	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body {
			width: 495px;
		}
	}