@charset "UTF-8";
/* Chiara Daraio CSS Document */

body {font-family: 'Open Sans', sans-serif; background-image:url(../assets/bg2.jpg);}
body {font-family: 'Open Sans', sans-serif;
background: -moz-linear-gradient(top, rgba(39,82,171,0) 0%, rgba(39,82,171,0.65) 100%), url(../assets/bg2.jpg); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(39,82,171,0) 0%,rgba(39,82,171,0.65) 100%), url(../assets/bg2.jpg); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(39,82,171,0) 0%,rgba(39,82,171,0.65) 100%), url(../assets/bg2.jpg); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ), url(../assets/bg2.jpg); /* IE6-9 */
}
a:link, a:visited, a:hover, a:active {color: #FC0;}
li, p {font-family: 'Open Sans', sans-serif;}
strong {font-family: 'Open Sans', sans-serif;}

.topbar {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%), url(../assets/topbg.jpg); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%), url(../assets/topbg.jpg); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%), url(../assets/topbg.jpg); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ), url(../assets/topbg.jpg); /* IE6-9 */
border-bottom: 4px solid #FC0;
}

h1.masthead {font-size: 2.8rem;text-transform: uppercase;margin: 0px 20px 0px 20px;text-align: right;padding: 10px 0 0 0;}
h1.masthead a {color: #afd0fd;}
h1.masthead a:link, .masthead a:hover {text-decoration:none;}
h1.masthead a span {color:#8cbfff;}


.menu-button {float:left; margin: 5px 10px 10px 15px;font-size:30px;cursor:pointer;}
.navbar {padding: 0px;}
.navbar-nav a {font-size: 1.1rem;text-transform: uppercase;color: white;}
.navbar-nav a.active {color: #FC0;}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(253, 203, 44, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>");
}


h2 {text-transform: uppercase; color: white; background-color: rgba(0,0,0,0.8); padding: 15px; margin-bottom: 0px;}
span.menu {font-size: 2em;}
.header {background-color: rgba(0,0,0,0.8); padding: 10px 30px 10px 10px;border-bottom: 4px solid #FC0; margin-bottom: 3rem;}
.headerslider {background-color: rgba(0,0,0,0.8); padding: 10px 30px 10px 10px;border-bottom: 4px solid #FC0; }
.subheader {background-color: rgba(0,0,0,0.8); padding: 10px 30px 10px 10px;border-bottom: 4px solid #FC0; border-top: 4px solid #FC0; margin-bottom: 3rem;}
.header h2, .headerslider h2, .subheader h2 {text-align: right; background:transparent; font-size: 2.9rem; padding: 3px;}
.link h2 {background: url(../assets/yellow-arrows.png) no-repeat right; background-color: rgba(0,0,0,0.8); padding: 15px; }

.carousel {border-bottom: 4px solid #FC0;}
.carousel-caption {bottom: 150px;}
.col-sm-12 .carousel-caption {display: none;}
ul.rslides_tabs, .prev, .next {display:none;}

.portal {background-color: #CCC; outline: 4px solid #FC0; height: 380px;cursor:pointer;margin-bottom: 3rem;}
.portal h2 {background: url(../assets/yellow-arrows.png) no-repeat right; background-color: rgba(0,0,0,0.8); padding: 10px; }
.portal a {color:#FC0;}
.mechmat {background: url(../assets/home-metamat.jpg);}
.biology {background: url(../assets/home-biomech.jpg);}
.nanobionics {background: url(../assets/home-plant.jpg);}

.boxrow {background:rgba(3,14,66,0.80); margin-bottom: 3rem; }
.boxrow {width: 100%;}
.boxrow a {color:#FC0;}
.boxrow h2 a:link {color: white;}
.boxrow > div { padding: 15px; color:white; }
.boxrow > div:nth-child(odd) { background: rgba(64,105,193,0.40); }

#research .header, #facilities .header {margin-bottom: 0px;}
.banner {margin-bottom: 3rem; height: 20rem; width: 100%;}

.jump {text-align: right;padding-right: 20px;}
.jump span a {color: white;margin-left: 3em;}
.jump span a:after {content: '';
  background: url(../assets/yellow-arrows-sm.png) no-repeat;
  height: 15px;
  width: 14px;
  position: absolute;
  margin: 5px 0px 0px 5px;}

.team .row .d-flex .boxrow img {border: 2px solid #FC0;}

.flex-1 { flex: 1; } /* defunct: for the homepage flexbox span */

.date {position:absolute;width: 90px;}
.text {padding-left: 90px;}

footer {text-align:center;color: #FFF;}
footer a {color: #FC0;}
footer a:link, footer a:hover {color: #FC0;}

/* The Overlay Navigation (background) */
/*.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255, .92);
    overflow-x: hidden;
    transition: 0.5s;	
}

.overlay-content {
    position: relative;
    top: 5%;
    width: 100%;
    text-align: center;
    margin-top: 0px;	
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    color: #1a3e7d;
    display: block;
    transition: 0.3s;
	text-transform: uppercase;
}
.overlay-content a {font-size: 3em;}

.overlay-content a:hover, .overlay-content a:focus {
    color: #FC0;
	background-color: #1a3e7d;
}

.overlay .closebtn {
    float:left; margin: 0px 10px 10px 10px;
}
.overlay .masthead-overlay {font-size: 3.7rem;float: right; text-transform: uppercase; margin: 13px 20px 20px 10px;}
.masthead-overlay span {color: #1a3e7d;}
.overlay .overlay-content h2 {margin: .75em 0 .5em 0;}*/

/* More CSS */
.video16by9 {
  width: 100%    !important;
  height: auto   !important;
}
.spacer {width:102%;
              height:10%;
              background-color:#e1e1e1;
              top:-7px;
              position: relative;
}

/* Media Queries */
@media (min-width: 1200px)
_grid.scss:6
.container {
    width: 1440px; 
    max-width: 100%;
}

@media (min-width: 992px){
	.leftcol {margin-right: 1em;}
}

@media screen and (max-width: 880px) {
    .menu-button img, .closebtn img {max-width: 75%;}
}

@media screen and (max-width: 450px) {
  .overlay-content a {font-size: 1.7em; padding: 0px;}
  .topbar .masthead, .overlay .masthead-overlay {font-size: 1.5em;}
  .overlay .masthead-overlay {margin: -10px 28px 20px 10px;}   
  .menu-button img, .closebtn img {max-width: 50%;}
}

@media screen and (max-width: 880px) {
  .menu-button img, .closebtn img {max-width: 75%;}
}