@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import "fonts.css";

* {
    font-family: 'Open Sans', sans-serif;
    color:black;
  }

.font-miller {
    font-family: 'Miller';
    color:black;
  }
  
.body-font,.body-font b, .body-font i {
	font-family: 'Open Sans', sans-serif;	
}

html {
	font-size:17px;	
}
 
body {
 	margin:0 auto;
 	background:white; 	 	 	
}

a:link, a:visited {
	text-decoration:none;
	
}

a:hover, a:active {	
	text-decoration:none;
	color:black;
}

h1 { 
    font-size: 1.2rem; 
    letter-spacing:0.03em;   
    margin:0;    
    color:#666666;
    font-weight: normal;
    text-transform:uppercase;
    font-family: 'Miller';
}

h2 { 
    font-size: 1rem;    
    margin:0;    
    color:black;
    font-weight: bold;
    font-family: 'Miller';
}

h3 { 
    font-size: 0.9rem;    
    margin:0;    
    color:#666666;
    font-weight: normal;
    text-transform:uppercase;
    font-family: 'Miller';
}

h4, p { 
    font-size: 0.8rem;    
    margin:0;    
    color:black;
    font-weight: normal;
}

h4 li {
	line-height:1.5rem;
}

p b { 	
    font-size: 0.8rem;    
    margin:0;    
    color:black;
    font-weight: bold;
}

p {
	padding-bottom:1rem;
}

h5 { 
    font-size: 0.95rem;    
    margin:0;    
    color:black;
    font-weight: normal;
    
}

h6 { 
    font-size: 0.7rem;    
    margin:0;
    font-weight: normal;
}

.credits {
	padding-top:0.3rem;
	font-style: italic;	
}

/*
	Header
*/

header {
	margin:0 auto;
}

.relative {
	position: relative;
}
.mobile {
	display:none;
}

.mobile-menu {
	display:none;
}

#topnav-bg {
    position: fixed;
    top:0;
    width:100%;   	
	z-index:3;
   	background-color: white;	
}
.topnav {
    background-color: white;   
    overflow: hidden;
    position: fixed;
    top:0;
    width:100%;   	
    z-index:10;
   	background-color: rgba(255,255,255,0);
   	padding-bottom : 1rem;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  background-color: rgba(241,240,240,0.80);    
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  overflow:auto;

}

.navbar {	
    list-style-type: none;    	
    padding : 2rem 3.5rem 0 3.5rem;
    margin : 0;   
 	float:right;    
  	display:inline-block;      	
}
.line-box {
	position:absolute;
	width:4rem;	
	height:0.5rem;
	margin-left: -0.1rem ;
	padding: 0;
	overflow:hidden;
}

.line-menu {
	position:absolute;
	display:block;
	padding:0.2rem 0 0 0;	
	width:4rem;
	left:-4rem;	
}

.line-section-box {
	position:absolute;
	width:4rem;	
	height:0.5rem;
	margin-left: -0.1rem ;
	padding: 0;
	overflow:hidden;
}

.line-section {
	position:absolute;
	display:block;
	padding:0.2rem 0 0 0;	
	width:4rem;
	left:-4rem;	
}

.navbar li a:hover + .line-box .line-menu {
	-webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
	transition:0.2s;
	left:0;
}

.line-hide {
	left:-4rem;
}

/* Style the links inside the navigation bar */
.navbar li .item-menu {    
    display: inline-block;
    margin:0;
    padding: 1.5rem 1rem 0 1rem;      
    box-sizing: border-box;
    overflow:visible;
    position:relative;
}

.navbar li a {    
    text-decoration: none;
    padding: 0;          
    letter-spacing:0.03em;
    font-family:inherit;
    margin:0;
}

.navbar li{   
	line-height:1em;
	display:inline-block;
}


.navcol {	
    list-style-type: none;    
    padding : 0 3.5rem 0 3.5rem;
    margin : 0;	
 	text-align : left; 
 	display : none;    
}

.show {
	display : inline-block;	
}

.hide {
	display : none;	
}

.line-box2 {
	position:absolute;
	width:15rem;	
	height:1rem;
	margin-left: -0.1rem ;
	padding: 0;
	overflow:hidden;
}

.line-submenu {
	position:absolute;
	display:block;
	padding:0.15rem 0 0 0;	
	width:15rem;
	left:-15rem;	
}

.line-hide2 {
	left:-15rem;
}

.line-active {
	left:0;
}

.navcol li a:hover + .line-box2 .line-submenu {
	-webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
	transition:0.2s;
	left:0;
}

.navcol li .menu-title {    
    display: block;
    text-transform:uppercase;
    font-weight : bold;
    margin:0;
    padding: 0 1rem 0.8rem;      
    box-sizing: border-box;
}

.navcol li .menu-info {    
    display: block;
    text-transform:uppercase;
    font-weight : bold;
    margin:0;
    padding: 0 1rem 0.8rem;      
    box-sizing: border-box;
}

.navcol li .menu-option {    
    margin:0;
    padding: 0 1rem 1rem 1rem;      
    box-sizing: border-box;
    overflow:visible;
    position:relative;
}

.navcol li a {    
    text-decoration: none;
    padding: 0;          
    letter-spacing:0.03em;
    font-family:inherit;    
    margin:0;
}

.navcol li a:hover, .menu-selected {    
    color:black;
    font-weight:bold;
}

.menu-unselected {
	color:#666666;
}

.navcol li{   
	line-height:1em;
	display:block;
}


.logo {	
	width:9rem;
	margin:3rem 0 0 3.5rem;
	padding : 0;
}

.logo_url {
	display:inline-block;	
	margin:0;
	padding:0;	
	box-sizing: border-box;
}

/*
	Footer
*/
.back-to-top {
	position:relative;
	padding : 3.5rem 0 3.5rem 0;	
}

.back-to-top-center {
	margin:0 auto;
	text-align:center;
	width:8rem;
}

.line-box3 {		
	position:absolute;
	width:6rem;	
	height:2rem;	
	padding :0;
	left:1rem;
	right:0;
	margin :auto;
	overflow:hidden;	
}

.line-totop {	
	position:absolute;
	display:block;
	padding:0.1rem 0 0 0;	
	width:6rem;
	left:-6rem;		
}

.back-to-top a:hover .line-box3 .line-totop {
	-webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
	transition:0.2s;	
	left:-0.2rem;
}

.copyright {
	margin:1rem 0 2rem 3.5rem;
	
}

/* The Masonry Container */
.masonry {
  margin: 0 auto;
  padding-top:4rem;  
  max-width: 88vw;
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count:3;
  -webkit-column-gap: 1rem; /* Chrome, Safari, Opera */
  -moz-column-gap: 1rem; /* Firefox */
  column-gap:1rem;
  box-sizing: border-box;
}

/* The Masonry Brick */
.item {
  background: #fff;
  padding-bottom: 0.8rem;
  width:100%;  
  vertical-align:top;
  box-sizing: border-box;   
  position:relative;
  display:inline-block;
}

img {
  width:100%;
  padding:0;   
  margin:0;
  box-sizing: border-box;  
}

.item-img{
  width:100%;
  margin:0;
  padding:0;   
  box-sizing: border-box;
  display:inline-block; 
}

.item-body{
  width:100%;
  margin:0;
  padding:0;   
  box-sizing: border-box;
  display:inline-block; 
}

.item-title{
  width:100%;
  margin:0;
  padding-top:0.4rem;    
  box-sizing: border-box;
  display:inline-block;  
}

.item-text{
  width:100%;
  margin:0;
  line-height:1rem;
  padding-bottom:1rem;   
  display:inline-block;   
  box-sizing: border-box; 
}

.template {
  margin: 0 auto;
  padding-top:4rem;
  max-width: 88vw;
  box-sizing: border-box;
}

.template-masonry {
  margin: 0 auto;
  max-width: 88vw;
  -webkit-column-gap: 1rem; /* Chrome, Safari, Opera */
  -moz-column-gap: 1rem; /* Firefox */
  column-gap:1rem;
  box-sizing: border-box;  
}

.template-logo {
	margin: 0 auto;
	padding:0;
	max-width: 70vw;	
	box-sizing: border-box;
	display: inline-block;
	text-align:center;    	
}

.logo-cell {
	width:20%;
	box-sizing: border-box;
	margin:0;
	padding:0 0.5rem 0;
	display: inline-block;
  	vertical-align: middle;   	
}

.template-item {
  background: #fff;
  padding-bottom: 1rem;
  width:100%;  
  vertical-align:top;
  box-sizing: border-box;   
  position:relative;  
}

.count-3 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count:3;	
}

.count-5 {
  -webkit-column-count: 5; /* Chrome, Safari, Opera */
  -moz-column-count: 5; /* Firefox */
  column-count:5;
}

.template1-left {
  margin: 0 auto;
  padding-right:2.5rem;
  width: 30%;
  box-sizing: border-box;
  display : inline-block;
  vertical-align:top;
}

.template1-right {
  margin: 0;
  padding-left : 2.5rem;
  width : 70%;
  box-sizing: border-box;
  display : inline-block;  
}

.template2-left {
  margin: 0 auto;
  padding-right:2.5rem;
  width: 50%;
  box-sizing: border-box;
  display : inline-block;
  vertical-align:top;
}

.template2-right {
  margin: 0;
  padding-left : 2.5rem;
  width : 50%;
  box-sizing: border-box;
  display : inline-block;  
}

.template-body{
  width:100%;
  margin:0;
  padding-bottom:1.5rem;   
  display:inline-block;   
  box-sizing: border-box; 
}

.template-title{
  width:100%;
  margin:0;
  padding-bottom:2rem;
  box-sizing: border-box;
  display:inline-block;  
}

.template-img{
  width:100%;
  margin:0;
  padding-bottom:0.5rem;   
  box-sizing: border-box;
  display:inline-block; 
  text-align:right;	
}

.template-img h6{
  margin-top:-0.3rem;
}

.template-title.blog{
  padding-bottom:1rem;
}

.divider{
  border-top:thin black solid;
  padding-top:1rem;
}

.left-arrow {
	display:inline-block;
	position:relative;
	float:left;
}

.right-arrow {	
	display:inline-block;
	position:relative;
	float:right;
}

.left-arrow img {
	width:1rem;
}

.right-arrow img {	
	width:1rem;	
}

.left-arrow:hover img {
	position:absolute;
	width:2.2rem;
	left:-0.52rem;
	top:-0.65rem;
}

.right-arrow:hover img {	
	width:2.2rem;	
	position:absolute;
	left:-1.45rem;
	top:-0.58em;
}

.left-arrow:hover ~ .project-prev {	
	display:inline-block;
}
.right-arrow:hover ~ .project-next {	
	display:inline-block;
}

.project-prev {
	display:none;
	padding-top:1rem;
	width:100%;
}

.project-next {
	display:none;
	padding-top:1rem;
	width:100%;
}

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

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

.team-name {    
    display: block;
    text-transform:uppercase;
    margin:0;
    padding-top: 0.2rem;      
    box-sizing: border-box;
    color : #666666;
}

.team-title {    
    display: block;    
    margin:0;
    padding-bottom: 2.5rem;      
    box-sizing: border-box;  
}

.team-img {
  width:100%;
  position:relative;  
  margin:0;
  padding:0;   
  box-sizing: border-box;
  display:inline-block; 	
}

.team-img img {
  vertical-align:bottom; 	
}

.team-overlay {
	display:block;	
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	margin:0 auto;
	background:white;
	color : black;	
	box-sizing: border-box;
	padding:1rem;
	opacity:0.5;
}

.team-box {
	display:inline-block;
	position:relative;
	width:100%;
	box-sizing: border-box;
	margin:0;
	padding-right:1rem;
}

.team-box:hover .team-overlay {
	display:none;
}

.team-box:hover .team-info-overlay {
	display:block;
}

.team-box:hover .team-name {    
    color : black;
}

.team-box:hover .team-title2 {    
    padding-bottom : 0.5rem;
}

.template-info{
  width:100%;
  position:relative;
  margin:0;
  padding:0;   
  box-sizing: border-box;
  display:inline-block;
   	
}

.team-box:hover .template-info {
	display:block;
	background:#efefef;
}

.team-box:hover .team-info {
	visibility:hidden;
}

.team-info-overlay {
	display:none;		
	position:absolute;
	width:100%;
	top:0;
	left:0;
	margin:0 auto;
	background:#efefef;
	color : black;	
	box-sizing: border-box;
	padding:0 0.5rem 0.5rem;
	z-index :1;
	opacity:0.8;
}

.spacer-text {
	display:inline-block;		
	position:absolute;
	width:100%;
	top:0;
	left:0;	
	color : white;
	font-size:2.3vw;	
	line-height:2.5vw;
	text-transform:uppercase;	
	box-sizing: border-box;
	padding:1vw 1.5vw;
	z-index :1;

}

.team-col {
	display:inline-block;
	position:relative;
	width:33.3%;
	box-sizing: border-box;
	margin:0;
	padding:0;	
	vertical-align:top;	
}

.blog-tab {
  position: relative;  
  width: 100%;  
  overflow: hidden;
}

.blog-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.blog-tab label {
  position: relative;
  display: block;
  padding: 0 3em 0 0;  
  font-weight: bold;
  line-height: 1.5em;
  cursor: pointer;
}

.template-blog {
  width:100%;
  margin:0;
  box-sizing: border-box; 
  max-height: 0;
  overflow: hidden;  
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
}

.blog-tab input:checked ~ .template-blog {
  max-height: 1000vh;
  padding-bottom:1rem;
}

.blog-tab label::after {
  position: absolute;
  font-family: 'FontAwesome';
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  text-align: center;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.blog-tab input[type=radio] + label::after {
  content: '\f067';  
}

.blog-tab input[type=radio]:checked + label::after {	
    content: '\f068';    
}

/* When the screen is less than media query 992px */
@media screen and (max-width: 992px) {
	html {
		font-size:15px;
	}
		
}		
/*End of @media screen and (max-width: 992px) */
	
	
/* When the screen is less than media query 768px */
@media screen and (max-width: 768px) {
	
	.template1-left {
	  padding-right:1rem;
	  width: 50%;
	}
	
	.template1-right {
	  padding-left : 1rem;
	  width : 50%;
	}
	
	.template2-left {
	  padding-right:1rem;
	  width: 50%;
	}
	
	.template2-right {
	  padding-left : 1rem;
	  width : 50%;
	}
	
	.team-col {
		width:50%;		
	}
	
	.logo-cell {
		width:30%;		
		padding:0 0.5rem 0;
	}		
	
}		
/*End of @media screen and (max-width: 768px) */

	
/* When the screen is less than media query 480px */
@media screen and (max-width: 480px) {
	html {
		font-size:13px;
	}
	.logo {	
		width:7rem;
		margin:1.5rem 0 0 1.5rem;
	}
	.sidenav.show {		
		background-color: rgba(241,240,240,0.98);
	}	
	
	.navcol {	
	    padding : 1rem 3.5rem 0 3.5rem;
	}

	.no-scroll {
	   margin: 0; 
	   max-height: 100%; 
	   overflow: hidden
	}
	
	.mobile {
		display:block;
	    margin:0;
	    color:black;
	    padding: 1rem 1rem 1rem 4.3rem;      
	    box-sizing: border-box;
	    overflow:visible;
	    position:relative;		
	}	
		
	.mobile-menu {
		display:block;
		float:right;
		vertical-align:middle;		
	}
	.navbar li .item-menu {    
	    display: none;
	}		
	.masonry {
	  padding-top:2rem;  
	  max-width: 84vw;
	  -webkit-column-count: 1; /* Chrome, Safari, Opera */
	  -moz-column-count: 1; /* Firefox */
	  column-count:1;
	  -webkit-column-gap: 0; /* Chrome, Safari, Opera */
	  -moz-column-gap: 0; /* Firefox */
	  column-gap:0;
	}
	
	.template {
	  padding-top:2rem;
	  max-width: 84vw;
	}
	
	.count-3 {
	  -webkit-column-count: 1; /* Chrome, Safari, Opera */
	  -moz-column-count: 1; /* Firefox */
	  column-count:1;	
	}
		
	.template1-left {
	  padding:0 0 1rem;
	  width: 100%;
	}
	
	.template1-right {
	  padding:0;
	  width: 100%;
	}
	
	.template2-left {
	  padding:0;
	  width: 100%;
	}
	
	.template2-right {
	  padding:0;
	  width: 100%;
	}	
	.logo-cell {
		width:80%;
		padding:1rem;
	}	
	.spacer-text {
		font-size:6.5vw;	
		padding:2.6vw 4vw;
		line-height:7.5vw;
	}
	
	.team-col {
		width:100%;		
	}
	
	.team-box {
		padding-right:0;
	}
	
}		
/*End of @media screen and (max-width: 480px) */