a{
  color:white;
}
html, body{
  height:100%;
  margin: 0,0,0,0;
  padding: 0,0,0,0;
}
body {
  font-family: 'Arial', sans-Serif;
  font-weight: 300;
  background: rgba(0,0,0,0.2);
}

header {
  background-color: black;
  border-color: black;
}

header .row,
footer .row {
  display: flex;
  align-items: center;
}

header h1 {
  color: white;
  font-weight: 700;
  margin: 0;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  color: white;
  padding: 0 20px;
  margin: 0;
}

header a:hover{
  text-decoration: none;
  color : #979aa0;
}

.btn.btn-primary {
  border-radius: 2px;
  border: 0px;
  color: #fbd1d5;
  text-shadow: none;
  background-color: #ffffff;
}

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

.btn-secondary {
  background-color: #E8DFE0;
  color: #ffffff;
  margin: 0 0 30px;
}

.footer{
  background-color: black;
  color: white;
  padding-top:0;
}

.container>.row>img{
  max-height:500px;
  width:100%;
  overflow: hidden;
  margin: 0 auto;
}

@media(max-width:767px){
  .fill{
    height: 36vh;
  }
}

@media(min-width: 768px){
  .fill{
    height: 32vh;
  }
}
@media(min-width:992px){
  .fill{
    height: 27vh;
  }
}
@media(min-width:1200px){
  .fill{
    height: 26vh;
  }
  .container{
    width: 1100px;
  }

  .row>img{
    height: 100%;
    left: 0;
    object-fit: cover;
  }

}

@media(min-width:1400px){
  .fill{
    height: 23vh;
  }
  .container{
    width: 1300px;
  }

  .row>img{
    height: 100%;
    left: 0;
    object-fit: cover;
  }

}

@media(min-width:1600px){
  .fill{
    height: 26vh;
  }
  .container{
    width: 1500px;
  }

  .row>img{
    height: 100%;
    left: 0;
    object-fit: cover;
  }

}

@media(min-width:1800px){
  .fill{
    height: 26vh;
  }
  .container{
    width: 1700px;
  }

  .row>img{
    height: 100%;
    left: 0;
    object-fit: cover;
  }
}

/*******************************************/
.tab{
  margin-left:40px;
}
/*********************************/
/*******vertical navbar css****************
.navbar-fixed-left {
  width: 160px;
  position: static;
  border-radius: 0;
  height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
  float: none;  /* Cancel default li float: left
  width: 139px;
}

.navbar-fixed-left + .container {
  padding-left: 160px;
}

.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: 0px;
  margin-left: 140px;
}
*/
/*************************/
/*****Regular Navbar with underline hover**********/
/*make navbar overlap carousel*/
.navbar-wrapper {
   position: absolute;
   top: 0px;
   left: 0;
   right: 0;
   z-index: 20;
}

.navbar-wrapper .container {
   padding-left: 0;
   padding-right: 0;
   padding-top:0px;
}


@media (min-width: 995px) {
  .navbar-wrapper {
    margin-top: 0px;
  }
}
/*Change collopsed menu color*/
@media only screen and (max-width: 995px) {
.collapsing, .in {background-color: #f7f7f7;}

}
.navbar-default .navbar-toggle{
  border-color: black;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

.navbar-default{
  background-color: rgba(255,255,255,0.8);
  border: none;
}

.navbar{
  border-radius:0px;
  margin-bottom:0px;

}

.navbar-header>a>img{
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  max-width:300px;
}

.overlay {
  position: absolute;
  display:block;
  margin:0 auto;
  top: 35%;
  bottom:35%;
  left:8%;
  align-content:center;
  z-index: 10;
  pointer-events: none;
}

/*Text hover css*/
#main-navbar ul li a,
#main-navbar ul li a:visited {
  color: Black;
  display:block;
  padding-bottom: 0px;
  margin-right: 0px;
  -webkit-transition: 1s ease;
  transition: 1s ease;
  text-decoration: none;
  border-bottom: transparent 1px solid;
  margin-bottom: 1px;
  line-height:10px;
  bottom: 0;
}
#main-navbar ul li a:hover {
  border-bottom: #28408c 1px solid;
  -webkit-transition: 1s ease;
  transition: 1s ease;
}

#main-navbar .selected{
    border-bottom: #28408c 1px solid;
}
/*Center-align navbar links
.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}*/
/**********************/
/*fading carousel css*/
.carousel-fade{
  background-color:rgba(0,0,0,1);
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 2s;
  transition-timing-function:linear;
}

.carousel-fade .carousel-inner>.item>img{
  max-height:500px;
  width:100%;
  overflow: hidden;
  margin: 0 auto;

}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}



/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}