@import url('https://fonts.googleapis.com/css?family=Overpass+Mono:400,700');


body {
    font-family: 'Overpass Mono', monospace;
    width: 99.5vw; /*for reasons that even the developers console could not tell me, I was getting horizontal overflow at 100% width... this was an easy fix*/
}

.illustration {
    padding-left: 5vw;
    width: 99%;
    margin-top: -10%;
}

.row {
    padding-bottom: 2vw;
}

/*---------------------------Nav--------------------------*/
nav {
    z-index: 10;
} /*for reasons that again, the developer's console cannot tell me, this is the only way to keep the navigation links active... something must be on top of them otherwise, but I can't figure out what it is!*/

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#212529' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler {
  color: #212529;
  border-color: #212529;
}

.nav-item {
    color: #212529;
}

.nav-link {
    color: #212529 !important;
    font-weight: 300;
    text-align: right;
        }

.dropdown-item {
    text-align: right;
}

.dropdown-menu {
    left: auto !important;
    right: 0px !important;
    }


/*------------------------Title----------------------------------*/

.titlecontainer{
    border-top: 0.75vw solid #212529;
    border-left: 0.75vw solid transparent;
    border-image: linear-gradient(to bottom, #212529, #0000FF) 1;
    width: 95.5vw;
    margin-right: -0.5vw;
    display: none;
}

.titlerow {
    padding-right: 3vw;
}

.titlerow:nth-child(2) {
    padding-top: 2vw;
}

.titcolleft {
    padding-right: 0px;
}

.titcolright {
    padding-left: 0px;
    width: 40%;
}

.titletext {
    text-align: right;
    font-weight: 700;
    font-size: 23vw;
    line-height: 20vw;
    padding-top: 0.5vw;
}

/*------Title for x-small devices-----*/

.titcontxsm {
    display: block;
    font-size: 30vw;
}

.tittxtxsm {
    font-size: 30vw;
    line-height: 27vw;
    font-weight: 700;
    text-align: center;
}

    @media (min-width: 576px) { 
        .titlecontainer {
            display: block;
        }
        .titcontxsm {
            display: none;
        }
    }

/*---------------Text styling-------------------------------------------*/

.num {
    border-bottom: 2px solid #212529;
    text-align: right;
    font-size: 3vw;
}

.sechead {
    font-size: 3vw;
    text-align: center;
}

ul {
    list-style: none;
}

.centered {
    text-align: center;
}

/*--------Background line drawings for text sections------------*/

.uniteback {
    background-image: url('backgrounds/unitelinedrawing.svg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -12%;
    height: 70vh;
}

.habitatback {
    background-image: url('backgrounds/habitatlinedrawing.svg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 70vh;
}

.geiselback {
    background-image: url('backgrounds/geisellinedrawing.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -4%;
    height: 50vh;
    margin-bottom: -4%;
}

.buildback {
    background-image: url('backgrounds/lippocentrelinedrawing.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -7%;
    height: 50vh;
}
/*---------- Carousel -------------*/
.carousel-caption {
    padding-bottom: 0px;
    font-size: 1vw;
}

.creditbadge {
    background-color: #212529;
    color: white;
    padding:4px 6px;
    font-size:12px;
    font-weight:bold;
    line-height:1.2;
    display:inline-block;
    border-radius:3px; 
}

/*-------------Hover images------------*/

/* style for my original overlay-grid idea. */
.lvl1 {
   z-index: 10 !important; 
} /* WHY WON'T THIS WORK?! It works after it's been set by js, but not here...*/

.lvl2 {
    margin-top: -5%;
}

/* ehhh not sure I like this
.shad {
    box-shadow: 1px 7px 25px rgba(33, 37, 41, 0.4) !important;
}*/




/*---------- Angled Line Divisions --------------*/

.spacer1 {
    height: calc(0.08748866352*95.5vw); /*set the height based on tangent so the diagonal lines will always touch the vertical lines.... I can't believe I just used trigonometry in design*/
    width: 95.5vw;
    margin-left: 4.5vw;
    margin-top: -2px;
    display: none;
}

.spacer1:before {
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 90%;
  transform: skewY(5deg);
  transform-origin: 0;
  z-index: -1;
  border-top: 0.75vw solid transparent;
  border-image: linear-gradient(to right, #0000FF, #212529) 1;
}

.cont1 {
    border-right: 0.75vw solid transparent;
    border-image: linear-gradient(to bottom, #212529, #0000FF) 1;
    margin-right: -0.5vw;
}

.spacer2 {
    height: calc(0.08748866352*95.5vw);
    margin-top: 1.5%;
    margin-right: -0.5vw;

}
.spacer2:after {
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 90%;
  transform: skewY(-5deg);
  transform-origin: 0;
  z-index: -1;
  border-bottom: 0.75vw solid transparent;
  border-image: linear-gradient(to left, #0000FF, #212529) 1;
}

.cont2 {
    border-left: 0.75vw solid transparent;
    border-image: linear-gradient(to bottom, #212529, #0000FF) 1;
    margin-top: -1%;
}

.spacer3 {
    height: calc(0.08748866352*95.5vw);
    margin-top: -2px;
    margin-right: -0.5vw;
}

.spacer3:before {
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 90%;
  transform: skewY(5deg);
  transform-origin: 0;
  z-index: -1;
  border-top: 0.75vw solid transparent;
  border-image: linear-gradient(to right, #0000FF, #212529) 1;
}

.cont3 {
    border-right: 0.75vw solid transparent;
    border-image: linear-gradient(to bottom, #212529, #0000FF) 1;
    margin-right: -0.5vw;
    margin-top: 0.5%;
}

.titxsm {
    display: block;
}
 /*makes the correct-width angled spacer appear on xsmall devices*/
    @media (min-width: 576px) { 
        .titxsm {
            display: none;
        }
        .spacer1 {
            display: block;
        }
    }

/*--------Jumbotron---------*/
/*PS I don't quite get the point of this... why not just style a container?*/
.cont2.jumbo {
    border-left: 0.75vw solid transparent;
    border-bottom: 0.75vw solid transparent;
    border-right: 0.75vw solid transparent;
    border-image: linear-gradient(to bottom, #212529, #0000FF) 1;
    margin-top: -1%;
    width: 100vw;
    margin-right: -0.5vw;
}

.btn-mn {
    background-color: #0000FF;
    color: white;
}

/*------------Alignment fixing for the Few More section-------------------------------*/
.downsome {
    margin-top: 5%;
}

.rightjust {
    text-align: right !important;
}
/*----------------images for "A Few More" section----------------------------*/

.buildpics {
    width: 100%;
}