body,
html {
	font-family: 'Open sans', verdana, sans-serif;
	line-height: 1.75em;
	font-weight: 300;
}

.white {	color: #fff;}
.red {color:#fd0000;}
.black {color: #000}

.background-black {
	background: rgba(0,0,0,0.9)
}
h2,h3 {
	margin-bottom: 1em;
	font-weight: 300
}

h1 {
	margin-bottom: 1em;
	font-weight: 700
}
.background-red {
	background: rgba(253,0,0,1)
}
.background-copper {
	background: rgba(184, 114, 66,1);
}
.background-grey {
	background: rgba(153, 153, 153,1);
}
.background-yellow {
	background:rgba(236, 229, 154,1);
	}
nav {
	position: fixed;
	width:100%;
	background: rgba(0,0,0,0.9);
	z-index: 1000
}

nav a {
	font-weight:300;
	color:#fff;
	padding: 10px 20px;
	transition: all 0.33s ease-in-out;;
	font-size: 1.25rem;
}

nav a:hover {
	color:#fff;
	text-decoration: none;
	background:#fd0000;
}
nav a:nth-child(2).active {
	background: rgba(253,0,0,1)
}
nav a:nth-child(3).active {
	background: rgba(184, 114, 66,1);
}
nav a:nth-child(4).active {
	background: rgba(153, 153, 153,1);
}
nav a:nth-child(5).active {
	background: rgba(253,0,0,1)
}
nav a:nth-child(6).active {
	background: rgba(184, 114, 66,1);
}
nav a:nth-child(7).active {
	background:rgba(236, 229, 154,1);
	color:#000;
}
nav .container {
	padding: 0;
}

section.area {
	background-size: cover;
	background-position: center center;
	width:100%;
	min-height: 100vh;
	position: relative;
}
.logo {
	width:500px;
	height:auto;
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
}
.area-content {
	width: 100%;
	min-height: 100vh;
	top: 0;
	left: 0;
}

#home h1{
	font-size: 4rem;
	font-weight: 300;
	line-height: 1.5em
	
}

#home h2 {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.5em;
	margin-bottom: 1em;
	
}

.white-button {
	background:#fff;
	font-size: 2rem;
	border-radius: 0;
	color: #000;
	border:0;
}

.white-button:hover {
	color:#fd0000;
}

.whitelink {
	text-decoration: underline;
	color: #fff;
}
.whitelink:hover {
	color:rgb(236, 229, 154);
}

section .container.fullheight {
	min-height: 100vh;
	padding: 75px 40px 40px 40px
}

.casestudygrid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin:2em 0;
    }
     .casestudygrid a{
	 display: block;
	 width:50%;
	 background-size: cover;
	 background-position: center center;
	 padding-top: 300px;
     position: relative;
	 transition: all .25s ease-in-out;
	 overflow: hidden
	 
 }  
  .casestudygrid a:before {
	  content:'';
	  background:url(casestudy.png);
	  position: absolute;
	  top:0;
	  left:0;
	  width: 100%;
	  height: 40px;
	  background-position: top left;
	  background-size: contain;
	  z-index: 50;
	  background-repeat: no-repeat;
	  
  } 
   .casestudygrid a .copy {
	   padding: 20px;
	   font-size: 1.25rem;
	   height: 150px;
	   text-align: center;
	   background: rgba(255,255,255,.95);
	   color:#fd0000;
	   transform: translateY(100%);
   }  
   
   .casestudygrid a:hover {
	   text-decoration: none;
   }
   .casestudygrid a:hover .copy{
	    transition: all .25s ease-in-out;
	    transform: translateY(0);
	    
   }
   
   .img-responsive-full {
	  width: 100%;
	  height: auto;
	  display: block;
   }
   
   .white-grid p {
    display:block;
    background:#fff;
    padding:20px;
    width: 48%;
    margin-bottom: 2em;
	   
   }
   strong {
	   font-weight: 800;
   }
   
   .fa-li {
	   color: #fd0000
   }
   .fa-ul {margin-left:1.5em}
   .fa-ul li {
	   margin-bottom: 2em;
   }
   .padding-20 {
	   padding: 20px;
   }
   .arketians > div {
	   padding: 5px
   }
   .arketians img {
    width: 100%;
    height: auto;

}


.photogrid{;
  display: flex;
  flex-wrap: wrap;
}
.photogrid:hover .box {
	opacity: .6;
	transition: all .25s ease-in-out
}
.box{
  width: 25%;
  background: #E9D2FF;
  background-size: cover;
  background-position: center center
}

.box:after{
  content: '';
  display: block;
  padding-bottom: 100%;
}

.box:hover {
	   cursor: pointer;
	   text-decoration: none;  
	   opacity: 1 !important;
	   position: relative;
   }
.logo-slide-holder img{
	height: 50px;
	width:auto;
	display: inline-block !important
	
}
.logo-slide-holder {
	text-align: right
}

.slide-stop-0 .prevSlide {
	opacity: 0;
}
.slide-stop-6 .nextSlide {
	opacity: 0;
}

.logo_container {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	padding-top: 70px;
}

@media (max-width:1200px) {
	nav a {
	font-weight:300;
	color:#fff;
	padding: 10px 20px;
	transition: all 0.33s ease-in-out;
	font-size: 1rem;
}
h2 {
	font-size: 2rem
}
h3 {
	font-size: 1.5rem
}
}

@media (max-width:1024px) {
	nav a {

	padding: 5px 10px;

	font-size: .75rem;
}
h2 {
	font-size: 1.75rem
}
h3 {
	font-size: 1.25rem
}
}