/* Mobile: min-width: 640px */
/* Tablet: min-width: 641px and max-width: 991px */
/* Desktop: min-width: 992px */
body {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400; }

h1 {
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 0;
  padding-top: 0; }
  @media (max-width: 550px) {
    h1 {
      text-align: left;
      font-size: 22px; } }

h2 {
  font-weight: 800; }

img {
  display: block;
  height: auto;
  width: 100%; }

p {
  color: grey; }

* {
  outline: none; }

.header {
  padding-top: 50px;
  padding-bottom: 50px; }
  @media (max-width: 991px) {
    .header {
      text-align: center; } }

.work {
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }
  .work:hover {
    opacity: .7; }
  .work h3 {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    min-height: 40px;
    margin-bottom: 40px; }

/* Responsive video */
.embed-container {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  width: 100%; }

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#videoContainer {
  text-align: right; }
  @media (max-width: 991px) {
    #videoContainer {
      text-align: center; } }
  #videoContainer button {
    margin: 20px 0; }

/* filters */
.filters {
  text-align: right; }
  @media (max-width: 991px) {
    .filters {
      text-align: center; } }
  .filters button {
    margin-bottom: 5px; }

.main-menu {
  font-size: 12px;
  padding-top: 5px;
  text-align: right;
  font-weight: 300; }
  @media (max-width: 991px) {
    .main-menu {
      text-align: center; } }
  .main-menu li {
    display: inline-block;
    padding-right: 10px; }

.about-frank {
  padding-top: 200px;
  padding-bottom: 200px; }

.footer {
  font-size: 12px;
  padding: 40px 0;
  text-align: center; }

.frank-img {
  max-width: 233px;
  float: left;
  margin: 0 10px 10px 0; }

@media (max-width: 550px) {
  .mobile-menu .main-menu {
    margin: 0;
    padding: 0;
    text-align: left; }
    .mobile-menu .main-menu li {
      display: block;
      margin: 0;
      padding: 5px 0; } }
.btn-default {
  border: none; }

.btn {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; }

.modal-body {
  padding: 8%; }

@media (max-width: 510px) {
  .modal-body img {
    float: none; } }
/* Categories */
.categories .cat {
  cursor: pointer;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }
  .categories .cat:hover {
    opacity: .7; }
  .categories .cat h3 {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    min-height: 40px;
    margin-bottom: 40px;
    text-align: center; }

.work {
  display: none; }

@media (max-width: 550px) {
  .mobile-button {
    background: url(img/menu.png) no-repeat center;
    background-size: 80%;
    cursor: pointer;
    height: 40px;
    position: absolute;
    right: 12px;
    top: -40px;
    width: 40px;
    z-index: 9000; }

  .mm {
    display: none; }
    .mm.show {
      display: block; }
    .mm .main-menu {
      font-size: 16px; }
    .mm button {
      background: transparent;
      display: block;
      text-align: left !important;
      padding-left: 0 !important;
      width: 100%; }
      .mm button:hover {
        background: transparent; }
      .mm button.btn-info {
        color: #000; } }