/* Full */

/* Basics */

body {
max-heigth:auto;
overflow-x: hidden;
}

header	{
width:auto;
height:120px;
padding:0 5% 0 5%;
background-color:#f7f7f7;
position:relative;
}

footer {
position:relative;
background-color:#fff;
height:auto;
width:auto;
margin:0 auto;	
padding:38px 5% 32px 5%;
text-align:center;
}

.wrapper { 
overflow:hidden;
margin: 0 auto;
max-width: 900px;
}

.wrapper div {
min-height: 100px;
}

#about, #portfolio {
width:100%;
position:relative;
z-index:100;
background-color:#fff;
height:100%;
width:auto;
padding:0 5% 0 5%;
}

#work {
background-color:#fff;
height:100%;
width:auto;
padding:0 3.1% 0 3.1%;
}

#nav-top	{
top:39px;
right:5%;
margin-right:-19px;
position:fixed;
text-align:center;
z-index:101;
padding:13px 5px 12px 7px;
border:solid 1px;
border-radius:20px;
border-color:#868686;
transition: all 0.1s ease-in-out;
transition-property: color, border-color;
}

#nav-btm	{
bottom:39px;
right:5%;
margin-right:-19px;
position:fixed;
text-align:center;
z-index:101;
padding:13px 5px 12px 5px;
border:solid 1px;
border-radius:20px;
border-color:#868686;
transition: all 0.1s ease-in-out;
transition-property: color, border-color;
}

#nav-bck {
top:39px;
left:5%;
margin-left:-19px;
position:fixed;
text-align:center;
z-index:101;
padding:13px 5px 12px 5px;
border:solid 1px;
border-radius:20px;
border-color:#868686;
transition: all 0.1s ease-in-out;
transition-property: color, border-color;
}

#nav-top:hover, #nav-btm:hover, #nav-bck:hover	{
border-color:#4ce1b7;
color:#4ce1b7;
}

#logo {
position:relative;
top:39px;
height:34px;
width:42px;
fill: #333;
display: inline-block;
}

#logo path {
transition: 0.2s;
transition-timing-function: ease-in-out;
-webkit-transition: 0.2s;
-webkit-transition-timing-function: ease-in-out; 
}

#logo:hover path {
fill: #4ce1b7;
}

.column-left	{
position:relative;
height:auto;
width:32%;
float:left;
}

.column-right	{
position:relative;
height:auto;
width:32%;
float:right;
}

.column-center	{
position:relative;
height:auto;
width:32%;
float:left;
margin:0 2% 0 2%;
}

.column-wide	{
height:auto;
width:96%;
margin:0 2% 0 2%;
}

.left	{
width:46.7% !important;
margin:0 1.3% 0 2%;
}

.right	{
width:46.7% !important;
margin:0 2% 0 1.3%;
}

.column-title {
float:left; 
width: -webkit-calc(50% - 200px);
width: -moz-calc(50% - 200px);
width: calc(50% - 200px);
text-align: right;
padding: 13px 0px 30px 70px;
}

.column-description { 
overflow:hidden;
padding: 13px 70px 30px 30px;
}

.content	{
height:auto;
width:auto;	
text-align:center;
padding:0 0 80px 0;
}

.title {
position:relative;
height:auto;
width:auto;	
text-align:center;	
}

.description	{
padding:13px 0 0 0;
text-align:left;
}

.description-narrow	{
padding:13px 0 0 0;
margin:0 auto;
width:185px;
text-align:center;
}

.text-link-arrow {
width: 30px;
padding-left: 3px;
padding-bottom: 2px;
}

/* Thumbnail */

.selection {
cursor: pointer;
}

.selection:hover .animation-arr {
position:relative;
left:8px;
-webkit-animation-name: anim-arr;
-webkit-animation-duration: 0.5s; 
-webkit-animation-iteration-count: 1;
animation-name: anim-arr;
animation-duration: 0.5s;
animation-iteration-count: 1;
}

.thumbnail {
display:inline-block;
position:relative;
text-align:center;
background-color:#f9f9f9;
}

.thumbnail-image {
position:relative;
max-width:100%;
display:inline-block;
vertical-align:middle;
}

.thumbnail span {
position:absolute;
line-height:20px;
display:block;
top:50%;
margin-top:-42.5px;
width:100%;
color:#000;
}

.gap {
margin-bottom:24px;
margin-top:24px;
}

img.thumbnail {
width:100%;
}

img.gap {
margin-bottom:2.2%;
margin-top:0px;
}

.right img {
margin-bottom:4.4% !important;
margin-top:0px;
}

.left img {
margin-bottom:4.4% !important;
margin-top:0px;
}

.column-wide img	{
margin-bottom:2.2% !important;
}

/* Animation */

.animation-fst	{ 
-webkit-animation-name: anim-fs;
-webkit-animation-duration: 1.1s;
animation-name: anim-fs;
animation-duration: 1.1s;
}

.animation-med	{ 
-webkit-animation-name: anim-me;
-webkit-animation-duration: 0.9s;
animation-name: anim-me;
animation-duration: 0.9s;
}

.animation-slw 	{ 
-webkit-animation-name: anim-sl;
-webkit-animation-duration: 0.8s;
animation-name: anim-sl;
animation-duration: 0.8s;
}

.animation-slo	{ 
-webkit-animation-name: anim-sv;
-webkit-animation-duration: 0.9s;
animation-name: anim-sv;
animation-duration: 0.9s;
}

.animation-slv	{ 
-webkit-animation-name: anim-sw;
-webkit-animation-duration: 1.1s;
animation-name: anim-sw;
animation-duration: 1.1s;
}

.animation-lgo	{ 
-webkit-animation-name: anim-lg;
-webkit-animation-duration: 1.6s;
animation-name: anim-lg;
animation-duration: 1.6s;
}

.animation-nav1	{ 
-webkit-animation-name: anim-nv1;
-webkit-animation-duration: 0.9s;
animation-name: anim-nv1;
animation-duration: 0.9s;
}

.animation-nav2	{ 
-webkit-animation-name: anim-nv2;
-webkit-animation-duration:1.5s;
animation-name: anim-nv2;
animation-duration: 1.5s;
}

.animation-nav3	{ 
-webkit-animation-name: anim-nv3;
-webkit-animation-duration:1.2s;
animation-name: anim-nv3;
animation-duration: 1.2s;
}

@-webkit-keyframes anim-fs {
0% {margin-top:30px;}
100% {margin-top:0px;}
}  

@keyframes anim-fs {
0% {margin-top:30px;}
100% {margin-top:0px;}
}

@-webkit-keyframes anim-me {
0% {margin-top: 30px;}
100% {margin-top: 0px;}
}  

@keyframes anim-me {
0% {margin-top: 30px;}
100% {margin-top: 0px;}
}

@-webkit-keyframes anim-sl {
0% {margin-top: 30px;}
100% {margin-top: 0px;}
}  

@keyframes anim-sl {
0% {margin-top: 30px;}
100% {margin-top: 0px;}
}

@-webkit-keyframes anim-sv {
0% {margin-top: 10px;}
100% {margin-top: 0px;}
}  

@keyframes anim-sv {
0% {margin-top: 10px;}
100% {margin-top: 0px;}
}

@-webkit-keyframes anim-sw {
0% {margin-top: 5px;}
100% {margin-top: 0px;}
}  

@keyframes anim-sw {
0% {margin-top: 5px;}
100% {margin-top: 0px;}
}

@-webkit-keyframes anim-lg {
0% {opacity: 0.0;}
70% {opacity: 0.0;}
100% {opacity: 1.0;}
}  

@keyframes anim-lg {
0% {opacity: 0.0;}
70% {opacity: 0.0;}
100% {opacity: 1.0;}
}

@-webkit-keyframes anim-nv1 {
0% {margin-top:30px; opacity:0.0;}
5%	{opacity:1.0;}
100% {margin-top: 0px;}
}  

@keyframes anim-nv1 {
0% {margin-top:30px; opacity:0.0;}
5%	{opacity:1.0;}
100% {margin-top: 0px;}
}

@-webkit-keyframes anim-nv2 {
0% {margin-bottom:-30px; opacity:0.0;}
1%	{opacity:1.0;}
100% {margin-bottom: 0px;}
}  

@keyframes anim-nv2 {
0% {margin-bottom:-30px; opacity:0.0;}
1%	{opacity:1.0;}
100% {margin-bottom: 0px;}
}

@-webkit-keyframes anim-nv3 {
0% {margin-top:30px; opacity:0.0;}
5%	{opacity:1.0;}
100% {margin-top: 0px;}
}  

@keyframes anim-nv3 {
0% {margin-top:30px; opacity:0.0;}
5%	{opacity:1.0;}
100% {margin-top: 0px;}
}

@-webkit-keyframes anim-arr {
0% {left:0px;}
100% {left:8px;}
}

@keyframes anim-arr {
0% {left:0px;}
100% {left:8px;}
}


/* Text */

h1	{
font-family:'brn-bold';
font-size:21px;
letter-spacing:3px;
text-transform:uppercase;
}

h2	{
font-family:'brn-bold';
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
}

h4	{
font-family:'brn-bold';
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
text-align:left;
line-height: 18px;
padding-bottom: 4px;
}

h3	{
font-family:'brn-bold';
font-size:13px;
color:#868686;
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
}

p	{
font-family:'Minion Pro';
font-size:15px;
color:#868686;
line-height:18px;
}

em	{
font-family:'Minion Pro';
font-size:15px;
font-style:italic;
color:#868686;
line-height:18px;
}

strong	{
font-family:'brn-bold';
font-size:13px;
color:#868686;
letter-spacing:1px;
text-transform:uppercase;
vertical-align:30%;
}

p.thumbnail-description {
color:#000;
}

a{
outline: none; 
border: 0; 
text-decoration: none; 
}

a:link	{
color:#000;
text-decoration:none;
}

a:visited	{
color:#000;;
text-decoration:none;
}

a:hover	{
color:#000;
text-decoration:none;
}

a:active	{
color:#000;
text-decoration:none;
}

a.nav-link, a.nav-link:hover	{
color:#868686;
}

a.text-link	{
font-size:15px;
font-style:italic;
text-decoration: underline;
line-height:20px;
color:#868686;
}

a.text-link:hover	{
color:#000;
}

a[href^=tel]{
color:inherit;
text-decoration:none;
}

a.svg {
position: relative;
display: inline-block;
}

a.svg:after {
content: ""; 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0;
}

/* Clearfix */

.clearfix:after	{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
 
.clearfix	{
display:inline-block;
}
 
html[xmlns] .clearfix	{
display:block;
}
 
* html .clearfix	{
height:1%;
}

/* 968px */

@media screen and (max-width:968px)	{

.column-left	{
width:48.7%;
margin:0 1.3% 0 0;
float:left;
}

.column-center	{
width:48.7% !important;
margin:0 0 0 1.3%;
float:left;
}

.column-right	{
width:48.7%;
margin:0 0 0 0;
float:right;
}

.move-left	{
float:left;
}

.move-right	{
float:right;
}

.left	{
width:46.7% !important;
margin:0 1.3% 0 2%;
}

.right	{
width:46.7% !important;
margin:0 2% 0 1.3%;
}

.tablet-gap	{
padding-bottom:32px !important;
}

.gap {
margin-bottom:24px;
}
}

/* 620px */

@media screen and (max-width:620px)	{

.column-description 	{
margin: 0 auto;
padding:0 5% 40px 5%;
}

.column-description p	{
text-align:center !important;
}

.column-description h4	{
text-align:center !important;
}

.column-left 	{
width:100%;
float:none;
margin-left:0px;
margin-right:0px;
}

.column-center	{
width:100% !important;
float:none;
margin-left:0px;
margin-right:0px;
margin-top:0px;
}

.column-right	{
width:100% ;
float:none;
margin-left:0px;
margin-right:0px;
margin-top:0px;
}

.left	{
width:96% !important;
margin-left:2%;
margin-right:2%;
}

.right	{
width:96% !important;
margin-left:2% !important;
margin-right:2% !important;
}

.noshow-mobile	{
display:none;
}

.mobile-gap	{
padding-top:48px;
padding-bottom:90px;
}

.thumbnail span {
top:100%;
}

.gap {
margin-bottom:32px;
margin-top:32px;
}

.column-wide img	{
margin-bottom:2.2% !important;
margin-top: 0px;
}

.right img {
margin-bottom:2.2% !important;
margin-top:0px;
}

.left img {
margin-bottom:2.2% !important;
margin-top:0px;
}
}