/* FONTS */

/* first for Internet Explorer < 9 */
  @font-face {
    font-family: 'DINLight';
    src: url("../fonts/DINWeb-Light.eot");
}
  @font-face {
    font-family: 'DINBold';
    src: url("../fonts/DINWeb-Bold.eot");
}
  /* then for WOFF-capable browsers */
  @font-face {
    font-family: 'DINLight';
    src: url("../fonts/DINWeb-Light.woff") format("woff");
}
  @font-face {
    font-family: 'DINBold';
    src: url("../fonts/DINWeb-Bold.woff") format("woff");
}


/* GLOBAL */

body {
  font-family: DINLight, sans-serif;
  color: #333;
  margin-bottom: 50px;
}

p, ul {
  font-size: 20px;
  line-height: 28px;
  font-family: DINLight;
}

a {
  color: #f6982e;
}

a:hover {
  color: #e95700;
}

.wrapper {
  width: 100%;
}

.button-link {
  background-color: #f6982e;
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
  font-family: DINLight;
  text-align: center;
  padding: 17px 15px 15px 15px;
  border: none;
}

.button-container {
  text-align: center;
  margin: 50px auto;
}

.button-link:hover {
  background-color: #fecb2b;
  color: #fff !important;
  text-decoration: none;
}

.button-link:active {
  background-color: #fecb2b;
  color: #fff !important;
  text-decoration: none;
}

.button-link:focus {
  background-color: #fecb2b;
  color: #fff !important;
  text-decoration: none;
}

a:focus { outline: none; }


/* NAVIGATION */

.navbar {
  width: 100%;
  height: 100px;
  background-color: rgba(255,255,255,0.95) !important;
  border-radius: 0px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  font-family: DINLight, sans-serif;
  font-size: 16px;
}

.navbar-brand-name {
  margin: 10px 0;
  font-size: 16px;
  font-family: DINLight;
  text-transform: uppercase;
}

.navbar-brand-name > {
  display: inline-block;
  float: left;
}


.navbar-brand-name > img {
  display: inline-block;
  float: left;
  padding: 0 10px 0 0;
}

nav li {
  margin: 40px 0 20px 0;
  text-transform: uppercase;
}

nav li.last {
  margin-right: 0px;
}

nav li.current {
  font-family: DINBold;
}

.bold-name {
  font-family: DINBold;
}

.project-branding {
  margin: 20px auto;
  display: block;
}



/* WORK */

/*header*/

header .container {
  width: 100%;
  margin-top: 100px;
}

header .tabletop {
  background-color: #666;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+49,0e0e0e+100 */
  background: #0e0e0e; /* Old browsers */
  background: -moz-linear-gradient(left, #0e0e0e 0%, #7d7e7d 49%, #0e0e0e 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #0e0e0e 0%,#7d7e7d 49%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #0e0e0e 0%,#7d7e7d 49%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 */
  text-align: center;
}

header .tabletop img {
  margin: 30px auto -30px auto;
}

header .jlr {
  background-color: #999;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#707070+0,b2b2b2+49,707070+100 */
  background: #707070; /* Old browsers */
  background: -moz-linear-gradient(top, #707070 0%, #b2b2b2 49%, #707070 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #707070 0%,#b2b2b2 49%,#707070 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #707070 0%,#b2b2b2 49%,#707070 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#707070', endColorstr='#707070',GradientType=0 ); /* IE6-9 */
  text-align: center;
}

header .jlr img {
  margin: 70px auto 30px auto;
}


header .rondo360 {
  background-color: #333;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+49,0e0e0e+100 */
  background: #333333; /* Old browsers */
  background: -moz-linear-gradient(left, #0e0e0e 0%, #333333 49%, #0e0e0e 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #0e0e0e 0%,#333333 49%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #0e0e0e 0%,#333333 49%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 */
  text-align: center;
}

header .rondo360 img {
  margin: 30px auto;
}

header .rappr {
  background-color: #002032;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+49,0e0e0e+100 */
  background: #002032; /* Old browsers */
  background: -moz-linear-gradient(left, #002032 0%, #00466c 49%, #002032 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #002032 0%,#00466c 49%,#002032 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #002032 0%,#00466c 49%,#002032 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 */
  text-align: center;
}

header .rappr img {
  margin: 0 auto 10px auto;
}

header .ps2 {
  background-color: #fa5f01;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+49,0e0e0e+100 */
  background: #fa5f01; /* Old browsers */
  background: -moz-linear-gradient(left, #fa5f01 0%,#fb7e33 49%,#fa5f01 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #fa5f01 0%,#fb7e33 49%,#fa5f01 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #fa5f01 0%,#fb7e33 49%,#fa5f01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5f01', endColorstr='#fa5f01',GradientType=1 ); /* IE6-9 */
  text-align: center;
}

header .ps2 img {
  margin: 30px auto;
}

header .salon {
  background-color: #73A8B0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+49,0e0e0e+100 */
  background: #73A8B0; /* Old browsers */
  background: -moz-linear-gradient(left, #548289 0%, #7bb7c0 49%, #548289 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #548289 0%, #7bb7c0 49%, #548289 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #548289 0%, #7bb7c0 49%, #548289 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#548289', endColorstr='#548289',GradientType=1 ); /* IE6-9 */
  text-align: center;
}

header .salon img {
  margin: 30px auto 0 auto;
}


header h1 {
  font-family: DINBold;
  font-size: 100px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  margin: 10px auto 0 auto;
}

header h2 {
  font-family: DINLight;
  margin: -5px auto 50px auto;
  text-transform: uppercase;
  color: #fff;
}


/*main*/

main .container .work {
  margin: 0 auto;
  padding: 15px;
 }

main .container .about {
  margin: 0 auto;
  padding: 15px;
}

main h1 {
  font-family: DINLight;
  font-size: 36px;
  text-align: center;
  text-transform: uppercase;
  margin: 50px auto 30px auto;
  padding: 0 15px;
}

main h2 {
  font-family: DINLight;
  font-size: 28px;
  margin: 80px auto 30px auto;
  text-transform: uppercase;
  text-align: center;
  padding: 0 15px;
}

.work p {
  max-width: 700px;
  margin: 0 auto;
}

.work ul {
  max-width: 700px;
  margin: 0 auto;
}

.callout {
  font-family: DINLight !important;
  font-size: 32px !important;
  line-height: 36px !important;
}

.fineprint {
  font-size: 14px;
  line-height: 20px;
}


.wireframes, .visual {
  margin: 0 auto;
}

.wireframes img  {
  border: 1px solid #ccc;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

.visual img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

.easyzoom-scale img {
  max-width: auto;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.columnLeft {
  width: 49%;
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  float: left;
}

.columnRight {
  width: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
  float: right;
  display: inline-block;
}

/* HOME */

header .home {
  background-color: #fb7e33;
  background: #fb7e33; /* Old browsers */
  background: -moz-linear-gradient(left, #fb7e33 0%, #f9a82d 49%, #fb7e33 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #fb7e33 0%,#f9a82d 49%,#fb7e33 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #fb7e33 0%,#f9a82d 49%,#fb7e33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7e33', endColorstr='#fb7e33',GradientType=1 ); /* IE6-9 */
  text-align: center;
}

.home h1 {
   font-family: DINLight !important;
   font-size: 60px;
   text-transform: uppercase;
   margin: 100px auto 0 auto;
}

.home h2 {
   font-family: DINLight !important;
   font-size: 24px !important;
   text-transform: uppercase;
   margin: 0 auto 100px auto;
}

.home h3 {
  font-family: DINLight;
  font-size: 24px;
  margin: 20px auto;
}

.home h4 {
  font-family: DINBold;
  font-size: 40px;
  text-transform: uppercase;
  margin: 0 0 0 0;
}

.home h5 {
  font-family: DINLight;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}

p.homedetails {
  font-family: DINLight;
  font-size: 24px;
  line-height: 32px;
  margin: 0 0 0 0 !important;
  padding: 0 0 0 0 !important;
}

.homedetails {
  margin: 30px 0 20px 30px;
  max-width: 400px;
  display: inline-block;
}

.imghome {
  margin: 50px auto 0 auto;
  max-width: 100%;
}

.homesalon {
  max-width: 100%;
  margin: 0 auto;
}

.greyrow1 {
  background-color: #b2b2b2;
}

.greyrow2 {
  background-color: #e5e5e5;
}

.button-container-home {
  margin: 30px 0;
}

.ps2container {
  margin: 0 auto;
  max-width: 339px;
  border: 1px solid pink;
}

.ps2aligncontainer {
  width: 100%;
  margin: 0 auto 0 auto;
}

.rappr-logo {
  margin-top: 50px;
}

/* BRANDING */
.branding {
  padding: 5px;
  margin: 0 0 0 0;
}

.branding-row {
  margin: 0;
}


h1.branding {
  font-family: DINLight !important;
  color: #ccc;
  font-size: 36px !important;
  text-transform: uppercase;
  margin: 150px auto 0 auto;
}

h2.branding {
  font-family: DINLight !important;
  color: #666;
  font-size: 24px !important;
  text-transform: uppercase;
  margin: 5px auto 0px auto;
  text-align: center;
}

h3.branding {
  font-size: 18px;
  font-family: DINLight;
  margin: -5px auto 18px auto;
  text-transform: uppercase;
  text-align: center;
  color: #aaa !important;
}

.fancybox-caption {
    font-family: DINLight !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    text-align: center;
}

.fancybox-toolbar {
  display: none;
}

.fancybox {
	cursor: default;
}


.debug {
  border: 1px solid yellow;
}

/* ABOUT ME */

header .about {
  background-color: #fb7e33;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+49,0e0e0e+100 */
  background: #fb7e33; /* Old browsers */
  background: -moz-linear-gradient(left, #fb7e33 0%, #f9a82d 49%, #fb7e33 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #fb7e33 0%,#f9a82d 49%,#fb7e33 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #fb7e33 0%,#f9a82d 49%,#fb7e33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7e33', endColorstr='#fb7e33',GradientType=1 ); /* IE6-9 */
  text-align: center;
 }

.me {
  border-radius: 50%;
  margin: 20px auto 0 auto;
  width: 200px;
  height: 200px;
}

.about-container {
  max-width: 700px;
  margin: 20px auto !important;
}

.about p {
  max-width: 700px;
}

.errors {
  color: red !important;
  font-size: 16px !important;
  text-transform: uppercase;
}

.control-label {
  font-family: DINLight;
  font-size: 16px;
  text-transform: uppercase;
}

.contactform {
  margin: 20px auto;
  max-width: 700px;
}

.asteriskField {
  color: red;
}



/* MEDIA QUERIES */

@media (max-width: 990px) {
  .floatleft {
    float: none;
    margin: 0 auto;
  }

  .floatright {
    float: none;
    margin: 0 auto;
  }

  .columnLeft {
    width: 100%;
    float: none;
  }

  .columnRight {
    width: 100%;
    float: none;
  }


}

@media (max-width: 768px)
{
  #hamburger {
    margin-top: 30px;
  }

  .navbar.navbar-default .navbar-collapse {
    border: none;
  }

  .navbar-brand-name {
    font-size: 16px;
  }

  .mm-logo {
    width: 100px;
    position: relative;
    top: -3px;
  }

  .fineprint {
    font-size: 12px;
    line-height: 16px;
  }


  .navbar ul {
    margin-top: 28px;
  }

  .navbar li {
    background-color: #fff;
    margin: auto;
  }

  header h1 {
    font-size: 50px;
  }

  header h2 {
    font-size: 24px;
  }

  .homedetails {
    margin-top: 0;
  }

  p.homedetails {
    font-size: 18px;
    line-height: 24px;
  }

  .project-branding {
    margin: 20px auto;
    width: 90%;
    display: block;
  }

  .floatleft, .floatright {
    float:none;
  }

  .columnLeft {
    width: 100%;
    float: none;
  }

  .columnRight {
    width: 100%;
    float:none;
    margin-top: 0;
  }

  .imghome {
    margin: 20px auto;
  }

  .work p, ul {
    font-size: 16px;
    line-height: 24px;
  }
  main h1 {
    font-size:30px;
  }
  main h2 {
    font-size: 20px;
  }

  .about p {
    font-size: 16px;
    line-height: 24px;
    margin: 30px auto !important;
  }

  .control-label {
    font-size: 12px;
  }

  .form-group {
    margin: 0 20px 5px 20px;
  }

  .errors {
    padding: 0 0 0 20px !important;
  }

  .button-link {
    font-size: 16px;
  }

  h3.branding {
    font-size: 16px;
    font-family: DINLight;
    margin: -5px auto 0 auto;
  }

}

@media (max-width: 375px)
{
  .navbar-brand-name {
    font-size: 14px;
    line-height: 17px;
  }

  .navbar-brand-name.navbar-text {
    top: 50px !important;
  }


}