@import url(https://fonts.googleapis.com/css?family=Mallanna);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {
    font: 16px/20px 'Open Sans Condensed', sans-serif;
    color: #000;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
}
.container p {
    margin: 5px 0 0 5px;
}
.container .thumbnail {
    padding: 0;
}

@media (max-width: 767px) {                         /* x-small devices */
    body {
    }
    .container {
        padding-right: 30px;
        padding-left: 25px;
    }
    #header.container, #footer.container {
        padding-left: 15px;
    }
    #portfolio.thumbnails {
      margin-right: -20px;
    }
    #portfolio .container-img:hover img {
      opacity: 1 !important;
    }
    #portfolio .container-img .overlay {
        display: none;
    }
    .navbar-brand {
        margin-left: 10px !important;
        font-size: 4em !important;
        letter-spacing: 6px !important;
    }
    .navbar-brand + #blog-description {
        clear: both;
        padding: 0px 0px 10px 20px  !important;
        letter-spacing: 2px  !important;
    }
    .navbar-nav {
        margin: 5px 0 0 -25px !important;
    }
    .navbar-nav > li, .navbar-nav {
        margin-top: -1px !important;
    }
    div.navbar-header {
        margin-left: -29px !important;
    }
    .nav > li > a {
        margin-right: -5px !important;
    }
    #logo {
        width: 280px !important;
    }
    #about #team li.spacer {
        display: none;
    }
    #about #team p {
        margin: 10px 0px !important;
    }
    #about #team li h4 {
        margin-top: 10px !important;
    }
    #about #team li > img {
        margin-left: 0 !important;
    }
    #about #team li:first-child h4 {
        margin-top: -10px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {  /* small devices */
}
@media (min-width: 992px) and (max-width: 1199px) { /* medium devices */
}
@media (min-width: 1200px) {                        /* large devices */
}

/**
 * Typography
 */
.post-title {
    font-style: italic;
    margin-bottom: 6px;
}
.post-subtitle {
}

/**
 * Elements
 */
#logo {
    width: 300px;
}
#wrapper.container {
    width: 100%;
}
#header.container {
    padding-top: 20px;
    padding-bottom: 20px;
}
#footer.container {
    padding-top: 0;
    border: 0;
}
#footer #footer-contents {
    background-color: #fff;
    color: #222;
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 0 0 5px 0;
}
#info {
    padding-left: 5px;
}
#about #team.thumbnails li {
    margin-bottom: 10px;
}
#about #team li {
    border: 0;
    padding-left: 5px;
}
#about #team li h4 {
    margin-top: 0;
}
#about #team li > img {
    width: 100%;
}
#about #team li > div {
    width: 100%;
    padding-top: 10px;
}
#about #team p {
    text-align: center;
    margin-top: 16px;
}
.pager .next > a, .pager .next > span {
    float: left;
}

/**
 * Grid
 */
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 5px;
    padding-left: 5px;
}
#portfolio .mix {
    display: none;
}
.thumbnails {
    list-style: none;
    padding: 0;
}
.thumbnails li a.thumbnail {
    border: none;
    outline: none;
    padding: 0;
}

/**
 * Thumbnail image
 */
#portfolio .container-img {
    position: relative;
}

#portfolio .container-img > img {
    display: inline;
}

#portfolio .container-img .logo {
    position: absolute;
    top: 6%;
    right: 5%;
    width: 25%;
}

#portfolio .container-img img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

#portfolio .container-img .overlay {
  transition: .1s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

#portfolio .container-img:hover img {
  opacity: 0.3;
}

#portfolio .container-img:hover .overlay {
  width: 100%;
  opacity: 1;
}

#portfolio .container-img .text {
  color: black;
  font-size: 18px;
}

#portfolio .container-img .position, #portfolio .container-img .date {
  font-size: 16px;
  font-style: italic;
}

/**
 * Navigation
 */
#bs-navbar::before {
    clear: both;
}
ul.navbar-nav {
    margin-top: 0.3em;
    display: inline;
}
.nav > li > a {
    padding-left: 0;
    padding-right: 0;
    margin-left: 15px;
    margin-right: 15px;
}
.navbar {
    margin-bottom: 5px;
    margin-left: -16px;
    border-width: 0;
    font-size: 14px;
}
.navbar-header {
    margin-left: -15px !important;
}
.navbar-nav {
    margin: 10px 0 0 -25px;
}
.navbar-inverse {
    background-color: #fff;
    border-color: #fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: transparent;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border: none;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
    margin-left: -5px;
}
.navbar-brand {
    padding: 0;
    text-transform: uppercase;
    font-size: 5em;
    letter-spacing: 15px;
    line-height: 1em;
    height: inherit;
}
a.navbar-brand, a.navbar-brand:active, a.navbar-brand:link,
a.navbar-brand:visited, a.navbar-brand:hover {
    color: #000 !important;
}
.navbar-brand #blog-title {
    padding: 15px;
}
.navbar-brand + #blog-description {
    clear: both;
    padding: 0px 0px 20px 5px;
    text-transform: initial;
    font-size: initial;
    letter-spacing: 4px;
    line-height: 1em;
}
.navbar-nav > li.active > a,
.navbar-nav > li > a:active,
.navbar-nav > li > a:hover {
    color: #222 !important;
    padding-bottom: 0;
    outline: none;
    position: relative;
}
/*.navbar-nav > li > a:hover:after,*/ /* BUG: forces double click in iPhone */
/*.navbar-nav > li > a:active:after,*/ /* BUG: blinking on click */
.navbar-nav > li.active > a:after {
    content: '   ';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: -2px;

    border-width: 0 0 1px;
    border-style: solid;
    border-color: black;
}

.navbar-nav > li > a,
.navbar-nav > li > a:visited {
    color: #222 !important;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 0;
    outline: none;
}

.navbar-collapse.in {
    overflow-y: hidden;
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #222;
}
.navbar-inverse .navbar-toggle:hover .icon-bar {
    background-color: #fff;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
    background-color: #222;
}

/* turn off navbar-toggle */
.navbar-toggle {
    display: none;
}
.navbar-collapse.collapse {
    display: block !important;
}
.navbar-nav > li, .navbar-nav {
    float: left !important;
    margin-top: -3px;
}
.navbar-nav.navbar-right:last-child {
    margin-right: -15px !important;
}
.navbar-right {
    float: right !important;
}

/**
 * Video lightboxes
 */
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #222 !important;
}
.mfp-bg {
   background: #eee !important;
}
.mfp-iframe-scaler iframe {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6) !important;
}
.mfp-content + #title {
    position: absolute;
    padding: 5px 0px;
    background: rgba(255,255,255,0.6);
    font-style: italic;
}

/*
 * Animations
 */
.fade-in {
    opacity: 0;  /* make things invisible upon start */
    -webkit-animation: fade-in ease-in 1;  /* name, timing, repeat */
       -moz-animation: fade-in ease-in 1;
        -ms-animation: fade-in ease-in 1;
            animation: fade-in ease-in 1;
    -webkit-animation-duration: 600ms; /* chrome, safari, opera */
       -moz-animation-duration: 600ms; /* firefox */
        -ms-animation-duration: 600ms; /* ie */
            animation-duration: 600ms;
    -webkit-animation-fill-mode: forwards;  /* after animation is done, remain at the last keyframe */
       -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes fade-in { from { opacity: 0; opacity: 1\9; /* IE9 only */ } to { opacity: 1; } }
@-moz-keyframes fade-in { from { opacity: 0; opacity: 1\9; /* IE9 only */ } to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; opacity: 1\9; /* IE9 only */ } to { opacity: 1; } }

/* example: <div class="zoom-in-stage"><img class="zoom-in" src="/images/airport-concourse-500.jpg" /></div>
.zoom-in-stage {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 300px;
       -moz-perspective: 300px;
        -ms-perspective: 300px;
            perspective: 300px;
}
.zoom-in {
    -webkit-transform: translate3d(0, 0, -14400px);
       -moz-transform: translate3d(0, 0, -14400px);
        -ms-transform: translate3d(0, 0, -14400px);
            transform: translate3d(0, 0, -14400px);
    -webkit-animation: zoom-in ease-out 1; // name, timing, repeat
       -moz-animation: zoom-in ease-out 1;
        -ms-animation: zoom-in ease-out 1;
            animation: zoom-in ease-out 1;
    -webkit-animation-duration: 600ms; // chrome, safari, opera
       -moz-animation-duration: 600ms; // firefox
        -ms-animation-duration: 600ms; // ie
            animation-duration: 600ms;
    -webkit-animation-fill-mode: forwards;  // after animation is done, remain at the last keyframe
       -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}*/
@-webkit-keyframes zoom-in { from { transform: translate3d(0, 0, -14400px); } to { transform: translate3d(0, 0, 0); } }
@keyframes zoom-in { from { transform: translate3d(0, 0, -14400px); } to { transform: translate3d(0, 0, 0); } }