/*!
 * Developed by Brian L Clark using Bootstrap 4
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-3-col-portfolio/blob/master/LICENSE)
 * Last modification: 21 Feb 18
 *
 * CSS Directory:
 * to be added
 */

html { 
  background: #222;
}

@font-face {
    font-family: Comfortaalocal;
    src: url(../fonts/Comfortaa-Regular.ttf);
}

body {
  padding-top: 68px;
  font-family: Futura,"Trebuchet MS",Arial,sans-serif;
  background-color: #fff;
  font-size: 14px;
  min-width: 330px; /* prevent webpage from shrinking even further */
}

@media (max-width: 993px) {
  body {
    padding-top: 70px;
  }
}

p {
  font-size: 0.8125rem
}

a {outline: 0;}
a:link, a:visited {color: #337ab7;}
a:hover {color: #23527c;}

h2 { font-size: 1.313rem; }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0rem; }

hr {
    border-top: 1px dashed #333;
    margin-bottom: 10px;
    margin-top: 10px;
}

small {
  font-size: 65%;
}

@media (min-width: 577px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 577px) {
  .container {
    /* padding-left: 15px !important; */ /* chrome needs important. figure out why */
    /*padding-right: 15px !important; */
  }
} 

@media (min-width: 578px) {
  .no-padding-lg {
    padding: 0;
  }
}

@media (max-width: 577px) {
  .no-padding-lg {
    padding-left: 0;
  }
}

.portfolio-item {
  margin-bottom: 30px;
}

.pagination {
  margin-bottom: 30px;
}

/* Navigation */
nav button:focus {outline:0;}

.navbar {
	min-height: 50px;
  margin-top: -2px;  /* negative margins suck. fix this later. */
  min-width: 330px; /* prevent header from shrinking even further */
}

@media (max-width: 993px) {
  .navbar .container {
     padding: 0;
  }
}

.bg-dark {
	background-color: #222 !important;
	border-color: #080808;
}
.navbar-nav {
	margin-right: -12px;
}

.navbar-nav > li > a {
    padding: 8px 10px;
}
.navbar-expand-md .navbar-nav .nav-link {
    padding-left: .75rem;
}

@media (max-width: 767px) {
  .navbar-collapse {
    background: #222;
    border-radius: 0 0 10px 10px;
    max-width: 148px;
    min-width: 148px;
    position: fixed;
    right: 0;
    top: 47px;
    padding-bottom: 5px;
  }

  .faux-bg {
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: #222;
    width: 100%;
    height: 51px;
  }
}

@media (min-width: 768px) {
  .faux-bg {
    display: none;
  }
}

.navbar-brand {
  font-family: Comfortaalocal,Arial,sans-serif;
  font-display:fallback;
  padding-bottom: 2px;
  margin-right: 0;
}

nav ul li a:link {background-color: transparent; color: #fff !important;}
nav ul li a:hover {background-color: transparent; color: #337ab7 !important;}
nav .active a:hover {background-color: transparent; color: #fff !important;}
nav ul li a:hover::after {content: "\005D"; color: #337ab7;}  /* unicode for [ */
nav .active a::after {content: "\005D"; color: #fff;}         /* unicode for ] */
nav .active a:hover::after {content: "\005D"; color: #fff;}
nav ul li a::after {content: "\005D"; color: #222;}
nav ul li a:hover::before {content: "\005B"; color: #337ab7;}
nav .active a::before {content: "\005B"; color: #fff;}
nav .active a:hover::before {content: "\005B"; color: #fff;}
nav ul li a::before {content: "\005B"; color: #222;}

.navbar-dark .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='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-toggler {
    border: 0;
}

/* Main Content */
.card {
  border: 0;
}

.card-img-top {
  box-shadow: 2px 3px 7px #bfbfbf;
}

.card-body {
  padding: 0.5625rem 1.25rem 2rem 0;
  line-height: 2px;  // move to 0.1rem; after ie support
}

.photocredit {
  text-align: right;
  line-height: 0;
  font-size: 0.813rem;
  margin: -10px 6px 0;
  color: #fff;
  text-shadow: #000 0px 0px 3px;
  font-size: 0.9vw;
}

/* Footer */
footer {
    border-top: 1px dashed #000;
    color: #000;
}

footer .footer-nav {
    margin-bottom: 10px;
}

footer ul {
  margin: 0 auto;
  padding-bottom: 10px;
}

.list-inline > li {
  display: inline-block;
  padding: 0 10px;
}

@media (max-width: 577px) {
  .list-inline > li {
      display: block;
      text-align: center;
  }
}

footer .bottom {
    padding-bottom: 0;
    margin-bottom: -15px;
}

footer a:hover {text-decoration: none;}

footer ul li a:before {content: "\005B"; color: #fff;}
footer ul li a:hover:after {content: "\005D"; color: #337ab7;}
footer ul li a:hover:before {content: "\005B"; color: #337ab7;}
footer ul li a:after {content: "\005D"; color: #fff;}

footer .active a {color: #333;}
footer .active a {color: #333;}
footer .active a:before {content: "\005B"; color: #333;}
footer .active a:after {content: "\005D"; color: #333;}
footer .active a:hover:before {content: "\005B"; color: #333;}
footer .active a:hover:after {content: "\005D"; color: #333; }

/* Contact Modal */

form label {
    color: #333;
    margin-bottom: 0.2rem;
}
form .btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}


.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}
.field-text {
  text-align: right;
  vertical-align: text-top;
}

.btn-success {
  background-color: #337ab7 !important;
  border-color: #337ab7 !important;
}

/* Research Page */

/* Statement Page */
.pull-right, .pull-left {
    width: 44.5%;
    margin: 25px 0 20px 20px;
}

/* Vitae Page */
.doclink {
  line-height: 0;
  padding-bottom: 12px;
}
.cv h2 {
  font-size: 1.1875rem;
  margin-bottom: -8px; /* there has to be a better way to do this */
}
.cv ul {
  display: block;
  margin-top: -15px; /* there has to be a better way to do this */
}
.cv li {
  list-style: none;
  font-size: 0.8125rem;
}
.cv ul li ul {
  margin-top: 0; /* there has to be a better way to do this */
}
.cv .col-sm-2 {
  padding-right: 0 !important;
}
.cv .col-sm-10 {
  padding-right: 0 !important;
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .cv .col-custom-2 {
    -ms-flex: 0 0 19.666667%;
    flex: 0 0 19.666667%;
    max-width: 19.666667%;
  }
  .cv .col-custom-10 {
    -ms-flex: 0 0 80.333333%;
    flex: 0 0 80.333%;
    max-width: 80.333%;
  }
}

@media only screen and (max-width: 767px) and (min-width: 576px) {
  .cv .col-custom-2 {
    -ms-flex: 0 0 19.666667%;
    flex: 0 0 19.666667%;
    max-width: 19.666667%;
  }
  .cv .col-custom-10 {
    -ms-flex: 0 0 80.333333%;
    flex: 0 0 80.333%;
    max-width: 80.333%;
  }
}

@media only screen and (max-width: 575px) {
  .cv .col-custom-2 {
    margin-bottom: -1.0rem; /* change this later. negative margins here are undesirable */
  }
}

/* Bootstrap 4 hide and show content at breakpoints totally sucks, this is simper and better */
@media only screen and (min-width: 1200px) { .hide-xl { display: none; } }
@media only screen and (max-width: 1199px) and (min-width: 992px) { .hide-lg { display: none; } }
@media only screen and (max-width: 991px) and (min-width: 768px) { .hide-md { display: none; } }
@media only screen and (max-width: 767px) and (min-width: 576px) { .hide-sm { display: none; } }
@media only screen and (max-width: 575px) and (min-width: 450px) { .hide-xs { display: none; } }
@media only screen and (max-width: 449px) { .hide-xxs { display: none; } }

@media only screen and (min-width: 1200px) { .show-xl { display: inline; } }
@media only screen and (max-width: 1199px) and (min-width: 992px) { .show-lg { display: inline; } }
@media only screen and (max-width: 991px) and (min-width: 768px) { .show-md { display: inline; } }
@media only screen and (max-width: 767px) and (min-width: 576px) { .show-sm { display: inline; } }
@media only screen and (max-width: 575px) and (min-width: 450px) { .show-xs { display: inline; } }
@media only screen and (max-width: 449px) { .show-xxs { display: inline; } }

@media only screen and (max-width: 575px) { .xxs-no-space { margin-bottom: 0; } }


/* Teaching Page */
.teaching h2 {
  font-size: 1.1875rem;
  margin-bottom: -8px; /* there has to be a better way to do this */
}

/* Project Page */
.projects h4 {
  margin-bottom: -8px;
}
.carousel-control-prev-icon { /* I hate that Bootstrap uses this */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}


.carousel-indicators {
    bottom: -12px;  /* I hate negative margins, find a better way */
}

@media only screen and (max-width:575px) {
  .carousel-indicators {
    display: none;
  }
}


.carousel-indicators li, .carousel-indicators li:hover {
      margin: 0 2px;
      width: 1vw;
      height: 1vw;
      max-width: 12px;
      max-height: 12px;
      min-width: 10px;
      min-height: 10px;
      border: solid #222 2px;
      border-radius: 100%;
      background-color: transparent;
      transition: all 0.25s ease; 
      box-shadow: 0 0 0 1px #777;    
}

.carousel-indicators li:hover {
      background-color: #007bff;        
}

.carousel-indicators .active {
      background-color: #ddd;
      z-index:0;

}

.carousel-control-next, .carousel-control-prev {
      width: 7%;
}

.slides {
  box-shadow: 2px 3px 7px #bfbfbf;
}

.photo-credit {
  margin: -21px 10px 0;
  text-align: right;
  font-size: 0.8vw;
}

@media only screen and (max-width:992px) and (min-width: 768px) {
  .photo-credit {
    font-size: 1vw;
    margin-top: -15px;
    margin-right: 3px;
  }
}

@media only screen and (max-width: 768px) and (min-width: 461px) {
  .photo-credit {
    font-size: 10px;
    margin-top: -15px;
  }
}

@media only screen and (max-width:460px) {
  .photo-credit {
    font-size: 10px;
    margin-top: -15px;
  }
}

.thumb-p {
  margin-left: -4px !important;
  margin-right: -4px !important;
}

/* Lightbox */
.lb-nav a.lb-next, .lb-nav a.lb-prev {
  user-drag: none !important; 
  user-select: none !important;
  -moz-user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}

.lb-nav a.lb-next {
  background-image: url("data:image/svg+xml;utf-8,\
    <svg width='250px' height='250px' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>\
      <g stroke-width='20' stroke='rgb(255,255,255)' fill='rgb(0,0,0)'>\
        <polygon points='234.36,140.877 99.094,275.081 44.931,221.203 125.173,140.877 44.931,60.432 99.094,6.269'></polygon>\
      </g>\
    </svg>") !important;
  background-position: 95% 50% !important;
  background-size: 30px 30px !important;
  background-repeat: no-repeat !important;
  width: 50% !important;

}

.lb-nav a.lb-prev {
  background-image: url("data:image/svg+xml;utf-8,\
    <svg width='250px' height='250px' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>\
      <g stroke-width='20' stroke='rgb(255,255,255)' fill='rgb(0,0,0)'>\
        <polygon points='44.931,140.877 180.197,275.081 234.359,221.203 154.117,140.877 234.359,60.432 180.197,6.269'></polygon>\
      </g>\
    </svg>") !important;
  background-position: 5% 50% !important;
  background-size: 30px 30px !important;
  background-repeat: no-repeat !important;
  width: 50% !important;
}

.lb-data .lb-caption {
  font-weight: 500;
}

/* video */
.embed-responsive-3by2::before {
  padding-top: 66.6%;
  -moz-box-shadow: inset 2px 3px 7px #bfbfbf;  /* 3x3 ratio doesn't cut it */
  -webkit-box-shadow: inset 2px 3px 7px #bfbfbf;
  box-shadow: inset 2px 3px 7px #bfbfbf;
}

.embed-responsive-15by11::before {
  padding-top: 73.3%;
  -moz-box-shadow: inset 2px 3px 7px #bfbfbf;  /* 15x11 ratio doesn't cut it */
  -webkit-box-shadow: inset 2px 3px 7px #bfbfbf;
  box-shadow: inset 2px 3px 7px #bfbfbf;
}

.embed-responsive-53by45::before {
  padding-top: 85%;
  -moz-box-shadow: inset 2px 3px 7px #bfbfbf;  /* 53x45 ratio doesn't cut it */
  -webkit-box-shadow: inset 2px 3px 7px #bfbfbf;
  box-shadow: inset 2px 3px 7px #bfbfbf;
}

.embed-responsive-16by9::before {
  padding-top: 56.3%;
  -moz-box-shadow: inset 2px 3px 7px #bfbfbf;  /* 53x45 ratio doesn't cut it */
  -webkit-box-shadow: inset 2px 3px 7px #bfbfbf;
  box-shadow: inset 2px 3px 7px #bfbfbf;
}

/* Sociable Pint */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;utf-8,\
    <svg width='250px' height='250px' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>\
      <g stroke-width='20' stroke='rgb(255,255,255)' fill='rgb(0,0,0)'>\
        <polygon points='44.931,140.877 180.197,275.081 234.359,221.203 154.117,140.877 234.359,60.432 180.197,6.269'></polygon>\
      </g>\
    </svg>");} /* hells yeah! made a svg! */

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;utf-8,\
    <svg width='250px' height='250px' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>\
      <g stroke-width='20' stroke='rgb(255,255,255)' fill='rgb(0,0,0)'>\
        <polygon points='234.36,140.877 99.094,275.081 44.931,221.203 125.173,140.877 44.931,60.432 99.094,6.269'></polygon>\
      </g>\
    </svg>");}

/* 404 Error Page */