/* Mobile first */

@font-face {
  font-family: 'social';
  src: url('social.eot?3182676');
  src: url('social.eot?3182676#iefix') format('embedded-opentype'),
       url('social.woff?3182676') format('woff'),
       url('social.ttf?3182676') format('truetype'),
       url('social.svg?3182676#social') format('svg');
  font-weight: normal;
  font-style: normal;
}

 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "social";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */ 

  font-variant: normal;
  text-transform: none;  
  line-height: 1em;
  margin-left: .2em;
 

}
 
.icon-dribbble:before { content: '\e802'; } /* '' */
.icon-gplus:before { content: '\e804'; } /* '' */
.icon-instagramm:before { content: '\e801'; } /* '' */
.icon-linkedin:before { content: '\e803'; } /* '' */
.icon-twitter:before { content: '\e800'; } /* '' */

.social {text-align: center; margin-top: 50px;}
.social a {font-size: 30px;margin: 0 10px;color: #c6c6c6;-webkit-transition: all .2s;
   -moz-transition: all .2s;
    -ms-transition: all .2s;
     -o-transition: all .2s;
        transition: all .2s;}
.social a:hover {text-decoration: none;}

body {  
  font-family: brandon-grotesque, sans-serif;  
  -ms-overflow-x: hidden;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
}

::selection {
	background: #333333; /* Safari */
	color: #FFF;
	}
::-moz-selection {
	background: #333333; /* Firefox */
	color: #FFF;
}

h1, h2, h3, h4, p {font-family: brandon-grotesque, sans-serif;} 
#hero {
  padding: 40px 0;
  text-align: left;
  background: ; 
  color: #FFF;  
  background: url(../img/hero-bg.jpg) repeat scroll center #111;  
 
}
.logo {position: relative;padding-top:20px;padding-bottom:10px;z-index: 10;text-align: left;}
.logo img {width:47px;height:auto}


h1 {margin-top: 100px;font-size: 32px;font-weight:500;max-width: 90%}
h2 {text-transform: uppercase;font-size:22px;font-weight:700;}
h3 {letter-spacing: 0.0625em;font-size: 18px;text-transform: uppercase;font-weight: 700;}
p {font-size: 16px;font-weight:300;font-family:'adelle';line-height:1.8;}
a {color: #E15D53;}
a:hover {color: #E15D53;}

#about p a {color: inherit;}
#about {
  background-color: #1dc588;
position: relative;
width: 100%;
height: auto;
padding-bottom: 60px;
z-index: 5;
padding-top: 60px;}
#about p {color: #FFF;font-family: brandon-grotesque;sans-serif;font-size: 20px}

.btn {text-transform: uppercase;-webkit-border-radius: 2px; border-radius: 2px;width:100%;font-weight:500;-webkit-transition: all .2s;
   -moz-transition: all .2s;
    -ms-transition: all .2s;
     -o-transition: all .2s;
        transition: all .2s;}
.cta-head {color: #FFF;width: auto;float: right;margin-top: 8px}
.cta-head:hover {color: inherit;}
.btn-lg {padding: 10px 50px;letter-spacing: 0.0625em;}
.btn-primary {background-color: #e15d53;border:2px solid #e15d53;font-size:16px;}
.btn-default {background-color: transparent;border:2px solid #e7e7e7;color: #e7e7e7;margin-top:30px;font-size:16px;}
.btn-primary:hover {background-color: transparent;border-color:#f66a60;}
.btn-xs {font-size:14px;font-size: 14px;
border: 2px solid transparent;
margin-left: 5px;
margin-right: 5px;}
.btn-xs.btn-primary {margin-right: 0;margin-left: 10px}
.btn-default:hover {background-color: #e7e7e7;border-color:#e7e7e7;}
#portfolio .btn-default {letter-spacing: 0.0625em;margin:0;border-color:#1c1c1c;border-width:2px;color:#1c1c1c;font-size:16px;font-weight:700;margin-top:10px;margin-bottom:20px;}
#portfolio .btn-default:hover {background-color:#1c1c1c;color:#e7e7e7;}

#portfolio-wrap {background: #FFF;position: relative;z-index:2;padding-top:150px;}
#portfolio .row {margin-bottom:100px;}
#portfolio .img-responsive {margin-bottom:50px;}
.description {border-top: 4px solid #e5e5e5;}
.description p {color: #515151;}

.footer {height: auto; width:100%; background: #e7e7e7;padding-top: 100px;padding-bottom: 40px;} 
.footer-placeholder {height:0;} 
.footer .copyright {border-top:1px solid #cacaca;padding-top:40px;margin-top:60px;}
.footer .copyright p {opacity:.5;text-align: center;}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 

#hero {
  padding: 40px 15px;
  position:relative;     
  min-height: 800px;
  z-index:8;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover; 
}
.logo {text-align: left;position: fixed;width: 100%;left: 0;top:0;padding-top:50px;padding-bottom:10px;z-index: 10;-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;}
.logo img {width:80px;height:auto}
.affix.logo {padding-top:10px; background: rgba(0,0,0, .85)}
.affix.logo img {width: 40px; height: auto;} 

.cta-head {display:inline-block;float:right;margin-top:8px;}

h1 {margin-top: 400px;font-size: 48px;}

p {font-size: 16px;}
p.lead {max-width: 970px;margin:20px auto 40px auto;font-size: 20px;}
.btn {text-transform: uppercase;-webkit-border-radius: 2px; border-radius: 2px;width:auto;}
.btn-primary {}
.btn-default {margin-top:30px;}
.social a {margin: 0 40px;}

#about { padding-bottom: 80px;padding-top: 80px;}
#about p {font-size: 26px}

 }


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  


.footer {height: 620px;position:relative; } 
.footer-placeholder {display:none} 
.img-responsive {max-width:100%;}


}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

#hero {background: url(../img/hero-bg.jpg) repeat fixed top center #111;  }



.footer {height: 580px; position:fixed; bottom:0; z-index:1;} 
.footer-placeholder {height: 580px;display:block} 
.img-responsive {max-width:none;}

 }