body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #0086cb; }
.nav-link-size {font-size: 1.25rem;}


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* All Page items */
.page-intro { text-align: center; border:5px solid; border-color: #e5007e}
.image-class {border: 1px solid; border-color: black}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/*Colors*/
    /*Pink: #e5007e
        Blue: #0086cb */
.nav-link-color {color:white !important}

/*Images*/
.generalimage {
  display: block;
  width: 60%;
  margin: auto;
  border: 1px #000000 solid;
}

.generalimagenob {
  display: block;
  width: 60%;
  margin: auto;
}

.generalimage2{
  display: block;
  width: 80%;
  margin: auto;
  border: 1px #000000 solid;
}

.generalimage2nob{
  display: block;
  width: 80%;
  margin: auto;
}

.generalimage3{
  display: block;
  width: 40%;
  margin: auto;
  border: 1px #000000 solid;
}

.generalimage3nob{
  display: block;
  width: 40%;
  margin: auto;
  margin-bottom: 1rem;
}



figcaption {
    text-align: center;
}

h2 {
    font-weight: bold;
    color: #e5007e
}

h3 {
    font-weight: bold;
}

/*social icon popping out*/

.social {
  /*padding-top: 10px;
  font-size: 2vw;*/
  width: 3vw;
  /*vertical-align: center;
  text-align: center;
  margin-left: 15px;
  background: #e0e0e0;*/
  transition: transform .2s;
}

.social:hover {
 -ms-transform: scale(1.5); /* IE 9 */
 -webkit-transform: scale(1.5); /* Safari 3-8 */
 transform: scale(1.5); 
 border: none;
}

/* Meet the team card code ----------------------------------------------------------*/

.card-title {
    font-weight: bold;
}

.card {
  border: 2px black solid;
}

/* Fancy modeling page classes for fun --------------------------------------------------------------*/
.state0{
  background-color: black;
  color: rgb(255,255,255);
}

.state1{
  color: rgb(0,204,0);
}
.state2{
  color: rgb(234,162,33);
}
.state3{
  color: rgb(0,255,255);
}
.state4{
  color: rgb(128,0,128);
}
.state5{
  color: rgb(255,235,0);
}
.state6{
  color: rgb(215,131,127);
}
.state7{
  color: rgb(0,0,255);
}
.state8{
  color: rgb(255,0,0);
}
.state9{
  color: rgb(0,62,2);
}
.state10{
  color: rgb(121,58,0);
}



/* Timeline code and classes --------------------------------------------------------*/

* {
  box-sizing: border-box;
}

.timelinebackground {
  background-color: #c2c2c2;
  border: solid black 5px;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timelinecontainer {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timelinecontainer::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #e5007e;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.timelineleft {
  left: 0;
}

/* Place the container to the right */
.timelineright {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timelineleft::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.timelineright::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.timelineright::after {
  left: -16px;
}

/* The actual content */
.timelinecontent {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/*Adding in thumbnails*/
.timeline img{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}
.timeline img:hover {
  box-shadow: 0 0 2px 1px rgba(176, 0, 0, 1);
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .timelinecontainer {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .timelinecontainer::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .timelineleft::after, .timelineright::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .timelineright {
  left: 0%;
  }
}

/* Notebook Classes and Such -----------------------------------------------------------------------*/

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.columnnotebook {
  float: left;
  width: 33.33%;
  padding: 10px;
  text-align: center;
  background: white;
  display: table-cell;
}

.rownotebook {
border: black solid 2px;}

/* Clear floats after the columns */
.rownotebook:after {
  content: "";
  display: table;
  clear: both;
}

.accordionnotebook {
  background-color: #a3a3a3;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-top: black solid 3px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.8s;
}

.active22, .accordionnotebook:hover {
  background-color: #0086cb;
  color: black;
}

.accordionnotebook:after {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active22:after {
  content: "\2212";
  color: black;
}

.panelnotebook {
  padding: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: white; 
}

.columnnotebook li {
text-align: left;
margin-left: 5%;
}

.underlinewet {
       text-decoration: none; 
       position: relative; 
     }   

.underlinewet:after {
        position: absolute;
        content: '';
        height: 5px;
        bottom: -5px; 
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 50%;
        background: #e5007e;
    }
          
 .underlinedry {
       text-decoration: none; 
       position: relative; 
     }   

.underlinedry:after {
        position: absolute;
        content: '';
        height: 5px;
        bottom: -5px; 
        margin: 0 auto;
    left: 0;
        right: 0;
    width: 50%;
    background: #c15206; }
          
 .underlinehp {
       text-decoration: none; 
       position: relative; 
     }   

.underlinehp:after {
        position: absolute;
        content: '';
        height: 5px;
        bottom: -5px; 
        margin: 0 auto;
    left: 0;
        right: 0;
    width: 50%;
    background: #34c97b; }

.columnnotebook h2 {
color: black !important;
font-size: 1.6em !important;
}

.columnnotebook h4 {
font-size:.8em !important;
font-weight: bold !important;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnnotebook {
    width: 100%;
  }
}

/* button/accordian stuff ***********************************************************************************************************/

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  border-color: black black white;
  color: #34C97B;
}

.nav-tabs .nav-link{
  border: 1px solid;
}
/*
#34C97B
#0086CB
#E5007E */