@charset "UTF-8";

@import url("//hello.myfonts.net/count/2c873e");
@font-face {
    font-family: 'robotoregular';
    src: url('../webfonts/Roboto-Regular-webfont.eot');
    src: url('../webfonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../webfonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../webfonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotothin';
    src: url('../webfonts/Roboto-Thin-webfont.eot');
    src: url('../webfonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/Roboto-Thin-webfont.woff') format('woff'),
         url('../webfonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../webfonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background: #fff;
  padding-top: 0; }

.page-title {
color: #F0A726!important;
margin-top: 13px!important;
font-weight: lighter; }
  h1 a:hover, h1 a:active, h1 a{
	  
color: #F0A726!important;
	text-decoration: none!important;}

h2 {
  color: #fff;
  background-color: #261C21;
  padding: 15px; 
  font-weight: lighter;}

h2 {
  font-size: 2em; }

.clear {
  clear: both; }


header {
  background: #261C21;
  max-height: 67px;
  min-height: 60px; }

.padding-0 {
  padding: 0; }

#navbar {
  float: right;
  margin-right: -15px;
  max-height: 67px;
  padding: 0; }

.navbar {
  margin-bottom: 0; }

.navbar-default {
  background: transparent;
  border: 0; }

.navbar-nav {
  height: 67px; }

.navbar-nav a {
	font-family: "robotoregular";
  cursor: pointer;
  color: #fff;
  font-size: 34px; }

.navbar-nav .active a > focus {
  background-color: #F0A726 !important; }

.navbar-toggle {
  border: 0;
  margin: 0;
  border-radius: 0;
  margin-top: 18px; }

.navbar-collapse {
  border: 0 !important;
  background: #261C21;
  padding: 0;
  color: #fff; }

.navbar-nav {
  margin-top: -1px !important;
  position: relative;
  border: 0;
  z-index: 222; }

.navbar-nav li {
  text-transform: uppercase; }

.navbar-nav li a {
  color: #fff;
  padding: 23.5px 20px 23.5px 20px;
  
  font-size: 1em!important;
  /* ...and now for the proper property */
  transition: .2s; }

.navbar-nav li a:hover {
  color: #fff;
  background-color: #E19C22!important; }

.carousel-outer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b33654+0,8a1b39+100 */

background: #b33654; /* Old browsers */

background: -moz-linear-gradient(top,  #b33654 0%, #8a1b39 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  #b33654 0%,#8a1b39 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  #b33654 0%,#8a1b39 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b33654', endColorstr='#8a1b39',GradientType=0 ); /* IE6-9 */


  background-position: center;
  background-repeat: repeat-x;
  display: block;
  width: 100%;
  max-height: 400px;
  width: auto;

  height: auto; }

.clear {
  clear: both; }

.main {
  color: #261C21 !important;
  padding: 0; }

.main h2 {
  display: inline;
  text-transform: uppercase; }

footer {
  margin-top: 20px;
  padding: 15px; }

.margin-left {
  margin-left: 15px; }

.negative-margin-top {
  margin-top: -20px; }

.nav-tabs {
  margin-top: 20px; }

.nav-tabs .active a {
  background-color: #040522 !important;
  color: #fefefe !important; }

.tab-content {
  padding: 15px 0; }

.img-desktop {
  border: 1px solid #ddd !important;
  max-width: 750px;
  max-height: 372px;
  overflow-y: hidden;
  margin-right: 15px; }

.img-mobile {
  border: 1px solid #ddd !important;
  margin-left: 15px;
  max-width: 345px;
  max-height: 372px;
  overflow-y: hidden; }

@media (min-width: 992px) and (max-width: 1199px) {
  .img-desktop {
    border: 1px solid #ddd !important;
    max-width: 622px;
    max-height: 308px;
    overflow-y: hidden;
    margin-right: 15px; }

  .img-mobile {
    border: 1px solid #ddd !important;
    margin-left: 15px;
    max-width: 286px;
    max-height: 308px;
    overflow-y: hidden; } }
@media (min-width: 768px) and (max-width: 991px) {
  .img-desktop {
    border: 1px solid #ddd !important;
    max-width: 509px;
    max-height: 235px;
    overflow-y: hidden;
    margin-right: 15px; }

  .img-mobile {
    border: 1px solid #ddd !important;
    margin-left: 15px;
    max-width: 210px;
    max-height: 235px;
    overflow-y: hidden; } }
@media (max-width: 767px) {
  .img-desktop {
    border: 1px solid #ddd !important;
    max-height: 235px;
    overflow-y: hidden;
    margin-bottom: 20px;
    margin-right: 0;
    text-align: center !important; }

  .img-mobile {
    border: 1px solid #ddd !important;
    max-width: 100%;
    margin-left: 0;
    text-align: center;
    max-height: 235px;
    overflow-y: hidden; }

  .img-mobile img {
    display: inline;
    max-width: 50%; } }
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition: opacity 1.5s ease-in-out; }

.carousel-fade .carousel-inner .active {
  opacity: 1; }

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1; }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1; }

.carousel-fade .carousel-control {
  z-index: 2; }
.carousel-inner div img{
	margin: 0 auto;
	width: 764px;}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%; }

.carousel .item {
  max-height: 400px;
  /*slider height*/ }

/*add some makeup*/
.carousel .carousel-control {
  background: none;
  border: none;
  top: 50%; }

.left {
  text-align: left !important; }

.right {
  text-align: right !important; }

/*full width container*/
.margin-top-20 {
  margin-top: 20px; }

.margin-bottom-40 {
  margin-bottom: 40px !important; }

.thumb-list {
  width: 100%;
  padding: 0;
  margin: 0 0 2em 0;
  list-style-type: none; }

.thumb-list li {
  float: left;
  width: 33.3%;
  padding: 0;
  margin: 0;
  background-color: #000;
  border: 10px solid #fff;
  box-sizing: border-box;
  overflow: hidden; }

.thumb-list li a {
  display: block;
  width: 100%; }

.thumb-list li a img {
  display: block;
  max-width: 100%; }

.cv #nav-cv, .projects #nav-projects, .contact #nav-contact, .case-studies #nav-case-studies{
  background-color: #F0A726!important; }

.filters {
  margin-bottom: 20px;
  float: right; }

.element-item {
  overflow: hidden !important;
  position: absolute;
  padding-left: 10px;
  padding-right: 10px; 
}

.element-item img {
  width: 100%;
  transition: all 0.2s ease;
  }

.element-item img:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  z-index: 2 !important;
  position: relative; }

.img-outer {
  border: 1px solid #ddd;
  z-index: 777;
  position: relative;
  overflow: hidden;
  }

.isotope {
  margin-left: -15px;
  margin-right: -15px; }

.panel-inner {
  z-index: 888 !important;
  background: #000;
  padding: 10px !important;
  transition: bottom 0.2s ease-in-out;
  -o-transition: bottom 0.2s ease-in-out;
  -ms-transition: bottom 0.2s ease-in-out;
  -moz-transition: bottom 0.2s ease-in-out;
  -webkit-transition: bottom 0.2s ease-in-out;
  position: absolute;
  color: #fff;
  opacity: 0.93;
  bottom: -90px;
  left: 10px;
  right: 10px; }
  
  .panel-inner  {
	font-family: "robotoregular";
 }
p, label, .send-btn{
	font-family: "robotoregular";
	}
.panel-inner a {
	font-family: "robotoregular";
  color: #F0A726 !important; }

.panel-inner h3 {
	font-family: "robotothin"!important;
  color: #fff;
  margin-top: 0; 
  font-weight: lighter!important}

.element-item:hover .panel-inner {
  bottom: 20px !important; }

.hidden-spacer {
  position: relative !important;
  height: 20px;
  bottom: 0;
  display: block;
  background: #fff;
  z-index: 999; }

.button {
  background-color: #261C21;
  color: #fff;
  border: 0;
  padding: 10px;
  /* ...and now for the proper property */
  transition: .2s; }

.button:hover {
  background-color: #201d31 !important; }

.footer {
  display: block;
  text-align: center;
  margin: 0 auto; }

.footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

.footer ul li {
  display: inline;
  padding: 20px; }

.footer ul li a {
  font-size: 2em;
  color: #777777;
  /* ...and now for the proper property */
  transition: .2s; }

.footer ul li a:hover {
  color: #201d31 !important; }

.margin-top-0 {
  margin-top: 0; }

.margin-top-40 {
  margin-top: 40px; }

.form-control {
  border-radius: 0; }

p {
  text-align: justify; }

.padding-left-0 {
  padding-left: 0; }

.padding-right-0 {
  padding-right: 0; }


.send-btn {
  padding: 15px; }

  .main h3, .main h4, h5, .main ul li {
    font-family: "robotoregular";
  }
  
   .main h4{
	   color: #F0A726;}
	   
	   .main h5{
		   font-size: 14px;
		   font-weight: bold;}
		   
		   .placeholder{
			   border: 1px solid red;}
			   
			  

 textarea.form-control{

	 height: 100px!important;
}

.case-study-img{
	width: 100%;
	margin-bottom: 1em;
}