/*
Title:      Alex Bussa Photography Screen Styles
Author:     Alex Bussa
Copyright:  2013, Alex Bussa - All rights reserved
*/
/* MIXINS STYLESHEETS
----------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Open+Sans);
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
/* COLOR VARIABLES
----------------------------------------------------------- */
/* WEB FONTS
----------------------------------------------------------- */
/* FONT VARIABLES
----------------------------------------------------------- */
/* LINKS
----------------------------------------------------------- */
p a {
  color: #0099d2;
  text-decoration: none;
}
p a:hover {
  color: #999999;
}
/* HELPERS
----------------------------------------------------------- */
em {
  font-style: italic;
}
b {
  font-weight: bold;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before {
  display: table;
  content: "";
}
.clearfix:after {
  display: table;
  content: "";
  clear: both;
}
/* FORM ELEMENTS
----------------------------------------------------------- */
label {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 14px;
  display: block;
}
input,
textarea {
  width: 320px;
  margin: 1px 1px 15px 1px;
  padding: 3px 5px 4px 5px;
  background: #f4f4f4 url(/images/form-shadow.png) no-repeat 50% 0;
  border: 1px solid #cccccc;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #999999;
  border-radius: 0px;
}
input.error,
textarea.error {
  background: #e99e9e url(../images/form-shadow.png) no-repeat 50% 0;
  color: #555555;
}
input:focus,
textarea:focus {
  outline: none;
  margin: 0px 0px 14px 0px;
  border: 2px solid #0099d2;
  color: #000000;
}
textarea {
  width: 364px;
  height: 170px;
  margin-bottom: 5px;
  resize: none;
}
textarea:focus {
  margin-bottom: 4px;
}
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: block;
  width: auto;
  background: #555555;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  padding: 5px 15px 5px 15px;
  font-size: 12px;
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
}
button.secondary,
.button.secondary,
input[type="submit"].secondary,
input[type="button"].secondary,
input[type="reset"].secondary {
  background: #999999;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background: #0099d2;
  text-decoration: none;
}
/* DEFAULT DESKTOP LAYOUT: 1280px
----------------------------------------------------------- */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  background: #f4f4f4;
}
.js #flash {
  display: none;
}
object {
  outline: none;
}
body {
  color: #231f20;
  background: #f4f4f4;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 20px;
  -webkit-text-size-adjust: 100%;
  /* Stops Mobile Safari from auto-adjusting font-sizes */
}
#site-nav {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 186px;
  padding: 20px 20px 0 20px;
}
#site-nav #homeBar {
  display: none;
}
#site-nav #logo {
  margin: 0 0 0 -5px;
  line-height: 0;
}
#site-nav #logo a {
  display: block;
}
#site-nav #logo img {
  display: inline;
  width: 191px;
  height: 46px;
}
#site-nav #menuToggle {
  display: none;
}
#site-nav #menuToggle a {
  text-decoration: none;
}
#site-nav #menuToggle a i {
  line-height: 20px;
}
#site-nav #menu a {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
}
#site-nav #menu a:hover,
#site-nav #menu a:focus,
#site-nav #menu a:active {
  color: #0099d2;
}
#site-nav #menu a.active {
  color: #0099d2;
  cursor: default;
}
#site-nav #menu #works,
#site-nav #menu #pages {
  margin: 40px 0 0 0;
}
#site-nav #menu .tablet {
  display: none;
}
#site-nav #menu .mobile {
  display: none;
}
#site-nav #menu .desktop {
  display: block;
}
#site-nav .label {
  font-size: 12px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}
#site-content {
  margin: 20px 20px 20px 226px;
}
#site-content #site-content-inner .container {
  background: #ffffff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 1px 1px;
  padding: 20px;
}
.footer {
  position: fixed;
  left: 20px;
  bottom: 15px;
  width: 196px;
}
.footer .copyright .copyrightText {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 12px;
  margin-bottom: -6px;
  text-transform: uppercase;
  color: #999999;
  vertical-align: middle;
}
.footer .copyright .contact-link {
  display: inline-block;
  font-size: 13px;
  color: #999999;
  cursor: pointer;
  padding: 0 4px 1px 4px;
  vertical-align: middle;
}
.footer .copyright .contact-link:hover,
.footer .copyright .contact-link.active {
  color: #0099d2;
}
/*---------- Portfolio ----------*/
.swiper-container .swiper-wrapper .swiper-slide {
  margin-right: 20px;
}
.swiper-container .swiper-wrapper .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
}
.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
  display: none;
}
#thumbnails {
  display: none;
  margin-right: -10px;
  margin-bottom: -10px;
}
#thumbnails .item {
  margin: 0 0 10px 0;
}
#thumbnails .item a {
  display: block;
}
#thumbnails .item img {
  width: 100%;
  display: block;
  border: 0;
}
#thumbnails .item:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  transition: opacity 0.3s;
  -moz-transition: -moz-opacity 0.3s;
  -webkit-transition: -webkit-opacity 0.3s;
}
.isMobile #thumbnails .item:hover {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
}
.portfolio-controls {
  display: none;
  margin-left: -6px;
}
.portfolio-controls .photo-status {
  clear: both;
  display: inline-block;
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 18px;
  text-transform: uppercase;
  color: #000000;
  vertical-align: middle;
}
.portfolio-controls a {
  display: inline-block;
  font-size: 18px;
  padding: 3px 6px 3px 6px;
  color: #000000;
  cursor: pointer;
  vertical-align: middle;
}
.portfolio-controls a:hover {
  color: #0099d2;
}
#mobile-scroll {
  display: none;
  position: absolute;
  width: 100%;
}
.swiperOpen #container-inner {
  position: fixed;
  width: 100%;
  height: calc(100%);
}
.swiperOpen #site-content {
  height: calc(100% - 40px);
}
.swiperOpen #site-content #site-content-inner {
  height: 100%;
}
.swiperOpen .swiper-container {
  height: 100%;
}
/*---------- Contact ----------*/
#contact {
  max-width: 370px;
  _width: 370px;
  width: auto !important;
  margin: 85px 0 0 0;
}
#contact p {
  margin: 0 0 20px 0;
}
#contact .social {
  font-size: 60px;
}
#contact .social a {
  color: #231f20;
}
#contact .social a:hover {
  color: #0099d2;
}
/* Styles to make footer snap to bottom of the window */
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
#container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto;
}
footer,
.push {
  display: none;
}
/* LARGE DESKTOP 1280px +
----------------------------------------------------------- */
/* SMALL DESKTOP & HORIZONTAL TABLET LAYOUT: 991px - 1024px
----------------------------------------------------------- */
@media only screen and (min-width: 991px) and (max-width: 1024px) {
  #site-nav {
    position: fixed;
  }
  .swiperOpen #mobile-scroll {
    display: block;
  }
  .swiperOpen #container-inner {
    position: fixed;
    width: 100%;
  }
}
/* VERTICAL TABLET LAYOUT: 768px - 990px
----------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 990px) {
  #site-nav {
    position: static;
    width: auto;
    padding: 20px 0 20px 20px;
  }
  #site-nav #logo {
    float: left;
  }
  #site-nav #menu {
    float: right;
  }
  #site-nav #menu a {
    display: inline-block;
    padding: 11px 20px;
    vertical-align: middle;
  }
  #site-nav #menu #works {
    float: left;
    margin: 0;
  }
  #site-content {
    margin: 0 20px 15px 20px;
  }
  #site-content #site-content-inner {
    margin: 0 0 0 0;
  }
  .footer {
    position: static;
    width: inherit;
    padding: 0 16px 0 15px;
  }
  .footer .portfolio-controls {
    float: left;
    margin-left: 0;
  }
  .footer .copyright {
    float: right;
  }
  #mobile-scroll {
    display: block;
  }
  .swiperOpen #container-inner {
    position: fixed;
    width: 100%;
    height: calc(100% - 41px);
  }
  .swiperOpen #site-content {
    height: calc(100% - 86px - 15px);
  }
  .swiperOpen #site-content #site-content-inner {
    height: 100%;
  }
  .swiperOpen .swiper-container {
    height: 100%;
  }
  .swiperOpen .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #contact {
    margin: 45px 0 0 0;
  }
  /* Styles to make footer snap to bottom of the window */
  #container {
    margin: 0 auto -41px;
  }
  .footer,
  .push {
    display: block;
    height: 41px;
  }
}
/* MOBILE LAYOUT: less than 768px
----------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  #site-nav {
    position: static;
    width: auto;
    padding: 10px 0 10px 10px;
  }
  #site-nav #logo {
    float: left;
    margin: 0 0 0 -3px;
  }
  #site-nav #logo img {
    width: 134px;
    height: 32px;
  }
  #site-nav #menu {
    float: right;
  }
  #site-nav #menu a {
    display: inline-block;
    padding: 6px 10px;
    line-height: 20px;
    vertical-align: middle;
  }
  #site-nav #menu #works {
    float: left;
    margin: 0;
  }
  #site-content {
    margin: 0 10px 5px 10px;
  }
  #site-content #site-content-inner {
    margin: 0;
  }
  .footer {
    position: static;
    width: inherit;
    padding: 0 6px 0 4px;
  }
  .footer .portfolio-controls {
    float: left;
    margin-left: 0;
  }
  .footer .portfolio-controls .photo-status {
    font-size: 16px;
  }
  .footer .portfolio-controls a {
    font-size: 16px;
  }
  .footer .copyright {
    float: right;
  }
  #mobile-scroll {
    display: block;
  }
  .swiperOpen #container-inner {
    position: fixed;
    width: 100%;
    height: calc(100% - 29px);
  }
  .swiperOpen #site-content {
    height: calc(100% - 52px - 5px);
  }
  .swiperOpen #site-content #site-content-inner {
    height: 100%;
  }
  .swiperOpen .swiper-container {
    height: 100%;
  }
  .swiperOpen .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #contact {
    margin: 35px 0 0 0;
  }
  /* Styles to make footer snap to bottom of the window */
  #container {
    margin: 0 auto -29px;
  }
  .footer,
  .push {
    display: block;
    height: 29px;
  }
}
/* MOBILE LAYOUT: 375px - 499px
----------------------------------------------------------- */
@media only screen and (min-width: 375px) and (max-width: 499px) {
  #site-nav #menu a {
    font-size: 16px;
  }
}
/* MOBILE LAYOUT: less than 375
----------------------------------------------------------- */
@media only screen and (max-width: 374px) {
  #site-nav {
    overflow: hidden;
  }
  #site-nav #logo {
    transition: margin 450ms cubic-bezier(0.175, 0.885, 0.32, 1.5) 150ms;
  }
  #site-nav #menuToggle {
    display: block;
    position: absolute;
    right: 0;
    top: 10px;
  }
  #site-nav #menuToggle a {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 20px;
    font-size: 16px;
    padding: 6px 10px;
    color: #000000;
    cursor: pointer;
    vertical-align: middle;
  }
  #site-nav #menuToggle a .toggle-open {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    position: absolute;
    left: 10px;
    top: 6px;
    transition: opacity 350ms linear 750ms;
  }
  #site-nav #menuToggle a .toggle-close {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    position: absolute;
    left: 14px;
    top: 6px;
    transition: right 250ms;
  }
  #site-nav #menu {
    margin-right: -100%;
    white-space: nowrap;
    transition: margin-right 250ms;
    width: 100%;
    text-align: center;
  }
  #site-nav #menu a {
    font-size: 16px;
  }
  #site-nav #menu #works {
    float: none;
    margin: 0 10px 0 0;
  }
  #site-nav.menuOpen #logo {
    margin: 0 0 0 -145px;
    transition: margin-left 50ms;
  }
  #site-nav.menuOpen #menuToggle a .toggle-open {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    transition: opacity 0ms linear 0ms;
  }
  #site-nav.menuOpen #menuToggle a .toggle-close {
    right: 9px;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    transition: opacity 350ms linear 750ms;
  }
  #site-nav.menuOpen #menu {
    margin-right: 0;
    transition: margin-right 350ms cubic-bezier(0.175, 0.885, 0.32, 1.5);
  }
  .footer {
    padding: 0 6px 0 4px;
  }
  .footer .portfolio-controls .photo-status {
    font-size: 16px;
  }
  .footer .portfolio-controls a {
    font-size: 16px;
  }
  /* Styles to make footer snap to bottom of the window */
  #container {
    margin: 0 auto -29px;
  }
  .footer,
  .push {
    display: block;
    height: 29px;
  }
}
/* RETINA DISPLAY
    Overrides styles for devices with a 
    device-pixel-ratio of 2+, such as iPhone 4.
----------------------------------------------------------- */
/*# sourceMappingURL=stylesheet.css.map */