/* gallery bxslider home */
*{
    margin: 0px;
    padding: 0px;
}
body, html{
    height: 100%;
}
.bx-viewport, .bx-wrapper{
    position:relative;
    width:100%;
    height:100% !important;
    top:0;
    left:0;
}
.bxslider, .bxslider li{
    height: 100% !important;;
}
.bxslider li{
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bx-wrapper .bx-viewport{
    border: none !important;
}

.bx-wrapper {
  border: none !important;
}

.bx-default-pager {
  bottom: 10px !important;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #eee;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: rgba(35, 93, 103, 1.0);

}

@media screen and (max-width: 500px) {
  .bx-default-pager {
    bottom: 80px !important;
  }
}

/* Globals */
html,
body {
  width: 100%;
  overflow: hidden;
  display: block;
}

.fade-in {
  opacity: 0;
}

.active a {
  color: #bbb !important;
}

/* Mobile Nav Bar */

.nav-icon {
  display: none;
}

.nav-icon a {
  font-size: 30px !important;
  margin-right: -40px !important;
  padding: 40px !important;
}

@media screen and (max-width: 1140px) {
  #bar {
    height: 50px !important;
    margin-left: 47px !important;
  }
  #logo {
    height: 50px !important;
    width: 47px !important;
  }
  #left-bar {
    height: 50px !important;
  }
  #right-bar {
    height: 50px !important;
    margin-right: 50px !important;
  }
}

@media screen and (max-width: 600px) {
  #left-bar > a > h1 {
    font-size: 22px !important;  
    position: absolute !important;
    margin-top: -13px;
  }
  .nav-icon a {
    font-size: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body {
    position: fixed !important;
    overflow: hidden !important;
  }
  #home-slideshow-image {
    height: 100vh !important;
    margin-left: -50%;
    position: fixed !important;
    display: block !important;
  }
  #right-bar > ul > li.responsive.nav-icon {
    margin-top: 7px !important;
    padding-bottom: 8px !important;
  }

}


@media screen and (max-width: 1140px) {
  #right-bar > ul li:not(:first-child) {display: none;}
  #right-bar > ul li.nav-icon {
    float: right;
    display: block;
  }
}

/* This fixes the dropdown spacing bug */
@media screen and (min-width: 600px) , screen and (max-width: 1140px) {
  #right-bar > ul > li.responsive.nav-icon {
    margin-top: 1px;
    padding-bottom: 1px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1140px) {
  #right-bar > ul > li.responsive:not(:first-child) a {
    display: block !important;
    text-align: right !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #000;
  }
  #right-bar > ul > li:nth-child(2) {
    border-top: 5px solid rgba(35, 93, 103, 1.0);  
  }
  #right-bar > ul li.responsive:not(:first-child) {
  -webkit-animation: fadein2 1s forwards;
     -moz-animation: fadein2 1s forwards;
      -ms-animation: fadein2 1s forwards;
       -o-animation: fadein2 1s forwards;
          animation: fadein2 1s forwards;

    background-color: #F7F7F7;
    display: block !important;
    clear: both;
    float: right !important;
    width: 140px;
    margin-right: -10px;
  }
  #arrw img {
    display: none;
  }
  #arrw.responsive {
    margin-right: 0;
  }

}

p {
  font-family: 'Source Sans Pro', sans-serif;
}

/* Animation */
@keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-moz-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-webkit-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-ms-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-o-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

/* animation 2 */

@keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-ms-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-o-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Top Half */
#content {
  height: 100vh;
  width: 100%;
  display: block;
  overflow: hidden;
}

/* Gallery */
#home-slideshow {
  width: 100%;
  height: 100vh;
  display: block;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
}

#home-slideshow-image {
  position: absolute; 
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

#home-slideshow-image img {
  position: fixed; 
  width: 100%;
  overflow: hidden;
}

@media (max-width: 1230px) {
  #home-slideshow-image img {
    height: 100%;
    width: auto;
  }
}

#navigation {
  position: absolute;
  width: 100%;
  z-index: 10;
  display: inline-block;
  height: 74px;
}

#logo {
  float: left;
  width: 70px;
  height: 74px;
  display: block;
}

#logo img {
  width: 100%;
}

#bar {
  width: 100%;
  top: 0;
  height: 74px;
  margin-left: 70px;
  display: block;
  background-color: rgba(18, 46, 51, 0.5);
  z-index: 10;
}

#left-bar {
  float: left;
  display: table;
  height: 74px;
  text-align: center;
}

#left-bar a {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
}

#left-bar a h1 {
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-size: 36px;
  padding-left: 15px;
  font-weight: 200;
  display: table-cell;
  vertical-align: middle;
}

#right-bar {
  float: right;
  height: 74px;
  display: table;
  text-align: center;
  margin-right: 100px;
}

#right-bar ul {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

#right-bar ul li {
  float: left;
  list-style: none;
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 200;
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
}

#right-bar > ul > li > a {
  text-decoration: none;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
}

#right-bar > ul > li > a:hover {
  color: #bbb;
}

#right-bar ul li img {
  position: absolute;
  padding-top: 2px;
  padding-left: 2px;
  width: 20px;
}

#arrw {
  margin-right: 20px;
}

#arrw:hover > #dropdown {
  display: block;
  -webkit-animation: fadein2 .75s forwards;
     -moz-animation: fadein2 .75s forwards;
      -ms-animation: fadein2 .75s forwards;
       -o-animation: fadein2 .75s forwards;
          animation: fadein2 .75s forwards;

}

#dropdown ul {
  width: 250px;
  background-color: #F7F7F7;
  float: right;
  margin-right: 10px;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}

#dropdown ul li {
  display: inline-block;
  text-align: right;
  float: right;
  clear: both;
  width: 100%;
  margin-right: 10px;
}

#dropdown ul li a {
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  width: 100%;
}

#dropdown ul li a:hover {
  -webkit-animation: fadein .5s forwards;
     -moz-animation: fadein .5s forwards;
      -ms-animation: fadein .5s forwards;
       -o-animation: fadein .5s forwards;
          animation: fadein .5s forwards;
}

#dropdown {
  display: none; 
  position: absolute;
  width: 300px;
  margin-left: -200px;
  margin-top: 25px;
  background-color: #F7F7F7;
  border-top: 5px solid rgba(35, 93, 103, 1.0);
}

#dropdown ul li a p {
  color: #000;
}

#dropdown ul li a p {
  display: inline-block;
  text-align: right;
  margin-top: 7px;
  margin-bottom: 7.5px;
}

.projects-container {
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.projects-container li {
  background-color: #ccc;
  padding: 10px;
  width: 300px;
  height: 225px;
  color: #fff;
  text-align: center; 
}


@media screen and (max-width: 350px) {
  #left-bar a h1 {
    font-size: 18px !important;
    margin-top: -10px !important;
  }
}