@charset "UTF-8";
/* CSS Document */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ca5c69;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
/* ---General-------------------------------------------------------------------------------- */
a, a:active {
	color:#84c5c8;
	text-decoration:none;
	cursor:pointer;
	letter-spacing:3px;
	 -webkit-transition: all 0.3s ease-in-out 0s;
 	 transition: all 0.3s ease-in-out 0s;
}
a:hover {
	color:#ca5c69;
}
h1 {
	color:#fff;
	font-weight:400;
	font-size:5em;
	letter-spacing:0.2em;
	line-height:1.5em;
	opacity: 0.8;
}
h2 {
	color:#CA5C69;
	font-weight:400;
	font-size:5em;
	letter-spacing:0.2em;
	line-height:1.5em;
	padding: 0 5%;
}
h3 {
	color:#84c5c8;
	font-weight:400;
	font-size:3em;
	letter-spacing:0.15em;
	line-height:1em;
}
b {
	font-family: 'Poppins', sans-serif;
	font-weight:700;
}

/* ---Body structure-------------------------------------------------------------------------------- */
body, html {
	height:100%;
}
body {
	font-family: 'Poppins', sans-serif;
	font-size:11px;
	line-height:14px;
	letter-spacing:1px;
	color:#000;
	background:#000;
	margin:0 auto;
	max-width:1440px;
}
.button {
	background:rgba(0,0,0,0.5); 
	padding:10px;
	margin-right:20px;
	float:left;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px; /* future proofing */
}
footer {
	position:fixed;
	bottom:27px;
	right:-300px;
	padding:5px;
	z-index:501;
	transform: rotate(-90deg);
	transform-origin:0% 0%;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin:0% 0%;
	background:rgba(255,255,255,0.4);
	-moz-border-radius: 0 2px 0 0;
	-webkit-border-radius: 0 2px 0 0;
	border-radius: 0 2px 0 0;
}
/* ---Navigation-------------------------------------------------------------------------------- */
header {
	position:fixed;
	top:0;
	width:100%;
	max-width:1440px;
	height:70px;
	background:#fff;
	border-bottom:#000 thin solid;
	padding:0 5%;
	z-index:15;

}
#logo {
	display:block;
	position:absolute;
	left:5%;
	Top:10px;
	width:50px;
	height:50px;
	z-index:11;
	background:url(../img/logo-bt.png) 0 0 no-repeat;
	transition:none;
}
#logo:hover {
	background:url(../img/logo-bt.png) 0 -51px no-repeat;
}
#main-nav  ul {
	height:70px;
	margin:0 100px;
	padding:0;
}
#main-nav ul li {
	float: left;
	width:85px;
	margin:30px 20px 0 0;
}
#main-nav ul li a {
  	position: relative;
  	text-decoration: none;
}
#main-nav ul li a:before {
	content: "";
 	position: absolute;
 	width: 100%;
 	height: 1px;
	bottom: -5px;
 	left: 0;
 	background-color: #000;
 	visibility: hidden;
  	-webkit-transform: scaleX(0);
  	transform: scaleX(0);
  	-webkit-transition: all 0.3s ease-in-out 0s;
  	transition: all 0.3s ease-in-out 0s;
}
#main-nav ul li a:hover:before {
  	visibility: visible;
  	-webkit-transform: scaleX(1);
  	transform: scaleX(1);
}
#main-nav ul li .active {
	color:#ca5c69;
}
#main-nav ul li .active:before  {
	content: "";
 	position: absolute;
 	width: 100%;
 	height: 1px;
	bottom: -5px;
 	left: 0;
 	background-color: #000;
	 visibility: visible;
  	-webkit-transform:none;
  	transform:none;
  	-webkit-transition:none;
  	transition:none;
}
/* --- Mobile Navigation --- */
.menu-section {
	display:none;
}
/* ---H O M E Section------------------------------------------------------------------------------------- */
#home {
	width: 100%;
	height: 100%;
	position:relative;
	padding:70px 0 0 0;
	background:#000;
	overflow:hidden;
}
#home-content {
	position:absolute;
	z-index:7;
	width:100%;
	height:100%;
	padding:70px 5%;
}
#we img {
	width:200px;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes vertical {
    0%   {bottom:20px;}
	50%   {bottom:30px;}
	100%   {bottom:20px;}
}
/* Standard syntax */
@keyframes vertical {
    0%   {bottom:20px;}
	50%   {bottom:30px;}
	100%   {bottom:20px;}
}
/* ---W O R K Section------------------------------------------------------------------------------------- */
#work {
	padding-top:70px;
	overflow:auto;
	background:#f7f8f8;
	border-bottom:#000 thin solid;
}
.grid-wrap {
	position:relative;
	margin:0;
	width: 100%;
	height:100%;
	padding: 0;
	border-top:#000 thin solid;
}
.grid {
	position: relative;
	
}
.grid a{
	margin:0;
	display:block;
	cursor: pointer;
	float:left;
	position:relative;
	width: 25%;
}
.grid a img {
	display: block;
	width: 100%;
}
/* Thumbnail overlay */
a .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  text-align:center;
  color:#84c5c8;
  font-size:5em;
  padding-top:45%;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

a:hover .content-overlay {
  opacity: 1;
}
.work {
	width: 50px;
	height: 50px;
	float:right;
	padding:8px;
	background:rgba(255,255,255,0.6); 
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px; /* future proofing */
	z-index:9;
}
/* Projects */
.project-title {
	float:left;
	padding:10px;
	margin-right:10px;
}
.project-detail {
	float:left;
	padding:10px;
	background:rgba(255,255,255,0.9);
}
.close {
	cursor:pointer;
  	position:fixed;
  	right: 5%;
  	top: 22px;
  	width: 25px;
  	height: 25px;
	z-index:500;
}
.close:before, .close:after {
  	position: absolute;
  	left: 15px;
  	content: ' ';
  	height: 26px;
  	width: 2px;
  	background-color: #fff;
}
.close:before {
  	transform: rotate(45deg);
}
.close:after {
  	transform: rotate(-45deg);
}
.close:hover:before ,.close:hover:after {
  	background-color: #ca5c69;
	-webkit-transition: all 0.3s ease-in-out 0s;
  	-moz-transition: all 0.3s ease-in-out 0s;
  	transition: all 0.3s ease-in-out 0s;
}
/* Project Headers */
.project1 {
	background:#3b9672;
}
.project2 {
	background:#87c457;
}
.project3 {
	background:#007ab5;
}
.project4 {
	background:#a9292d;
}
.project5 {
	background:#c5b8d0;
}
.project6 {
	background:#9aceb4;
}
/* ---A B O U T Section------------------------------------------------------------------------------------- */
#about {
	min-height:645px;
	padding:70px 5%;
	overflow:auto;
	background:url(../img/about-img.jpg) top right no-repeat #ca5c69;
	border-bottom:#000 thin solid;
}
#about p {
	font-size:1.5em;
	line-height:1.25em;
	width:50%;
}
.uniquelink {
	color:#FFF;
}
.uniquelink:hover {
	color:#FFF;
	opacity:0.5;
}
/* ---S K I L L  Section------------------------------------------------------------------------------------- */
#skills {
	padding:70px 5%;
	overflow:auto;
	background:#84c5c8;
}
#skill-col {
	float:left;
	width:45.5%;
}
#skill-col:nth-of-type(odd) {
  margin-right: 5%;
}
.skillbar {
	position:relative;
	display:block;
	margin-bottom:15px;
	width:100%;
	background:#f7f8f8;
	height:35px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.skillbar-title {
	position:absolute;
	top:0;
	left:0;
	width:110px;
	font-weight:bold;
	font-size:13px;
	color:#fff;
	background:#84c5c8;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}
.skillbar-title span {
	display:block;
	background:rgba(0, 0, 0, 0.1);
	padding:0 20px;
	height:35px;
	line-height:35px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}
.skillbar-bar {
	height:35px;
	width:0px;
	background:rgba(132, 197, 200, 0.6);
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	opacity: 0;
}
.skill-bar-percent {
	position:absolute;
	right:10px;
	top:0;
	font-size:11px;
	height:35px;
	line-height:35px;
	color:#ffffff;
	color:rgba(0, 0, 0, 0.4);
}
@-webkit-keyframes animate-positive{
    0% { width: 0%; }
}
@keyframes animate-positive{
    0% { width: 0%; }
}

#features {
  background:#f7f8f8;
  overflow:auto;
  padding:0 5% 30px 5%;
  height:400px;
}
#features h1 {
	color:#84c5c8;
}
#features div {
  display:block;
  float:left;
  width:25%;
  text-align:left;
}
#features h2 {
	padding:0;
	margin:0;
}
/* ---E N D------------------------------------------------------------------------------------- */

#downbt {
	position:fixed;
	width: 50px;
	height: 50px;
	bottom: 0;
	right:0;
	background:rgba(0,0,0,0.5); 
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px; /* future proofing */
	z-index:9;
}
.arrow-down{
	position: absolute;
	width: 0;
	height: 0;
	bottom: 20px;
	left: 15px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
	-webkit-animation: vertical 2s ease infinite;
	animation: vertical 2s ease infinite;
}
#topbt {
	display:none;
	position:fixed;
	width: 50px;
	height: 50px;
	bottom: 0px;
	right: 0px;
	background:rgba(0,0,0,0.5); 
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px; /* future proofing */
	z-index:9;
}
.arrow-up{
	position:absolute;
	top:20px;
	left:15px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
}
/* ---Media Queries------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1900px) {
}
@media only screen and (min-width: 1560px) {
#home {
	position:relative;
}
#features {
	height:750px;
}
}
@media only screen and (max-width: 1115px) {
#about p {
	width:35%;
}
}
@media only screen and (max-width: 1024px) {
h1, h2 {
	font-size:4.5em;
	letter-spacing:0.15em;
	line-height:1.5em;
}
.grid a {
	width: 50%;
}
.close {
  	right:15px;
}
#about {
	background:url(../img/about-img.jpg) 450px 0 no-repeat #ca5c69;
}
#about p {
	width:60%;
}
#skill-col {
	float:none;
	width:100%;
}
#features div {
  width:50%;
}
}
@media only screen and (max-width: 800px) {
.work {
	margin-right:50px;
}
}
@media only screen and (max-width: 768px) {
/* --- Mobile Navigation --- */
#main-nav {
	display:none;
}
.menu-section {
	display:block;
}
.menu-toggle {
	width: 25px;
	height: 25px;
	position: absolute;
	top: 22px;
	right: 5%;
	cursor: pointer;
}
.menu-toggle.on .one {
	-moz-transform: rotate(45deg) translate(6px, 5px);
  	-ms-transform: rotate(45deg) translate(6px, 5px);
  	-webkit-transform: rotate(45deg) translate(6px, 5px);
  	transform: rotate(45deg) translate(6px, 5px);
  	background:#fff;
}
.menu-toggle.on .two {
  	opacity: 0;
}
.menu-toggle.on .three {
  	-moz-transform: rotate(-45deg) translate(6px, -6px);
  	-ms-transform: rotate(-45deg) translate(6px, -6px);
  	-webkit-transform: rotate(-45deg) translate(6px, -6px);
  	transform: rotate(-45deg) translate(6px, -6px);
  	background:#fff;
}
.one,
.two,
.three {
  	width: 100%;
  	height: 2px;
  	background:#CA5C69;
  	margin: 6px auto;
  	backface-visibility: hidden;
  	-moz-transition-duration: 0.3s;
  	-o-transition-duration: 0.3s;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
}
nav ul {
  	padding: 0;
  	list-style: none;
  	margin: 67px auto;
  	text-align: center;
}
nav ul.hidden {
  	display: none;
}
nav ul a {
  	color:#fff !important;
  	font-size: 2em;
  	line-height: 2;
  	width: 100%;
  	display: block;
}
nav ul a:focus, nav ul a:active {
	background:rgba(255,255,255,0.3);
}
.menu-section.on {
  	width: 100%;
  	height: 100%;
  	display: block;
  	background-color:#CA5C69;
  	position: fixed !important;
  	top:0;
  	left:0;
}
h1, h2 {
	font-size:3em;
	letter-spacing:0.15em;
	line-height:1.5em;
}
}
@media only screen and (max-width: 667px) {
h1, h2 {
	font-size:2.5em;
	letter-spacing:0.15em;
	line-height:1.5em;
}
#home-content {
	width:100%;
	height:100%;
	padding:30px 5%;
}
#we img {
	width:150px;
}
.button {
	display:none;
}
.project-title {
	float:none;
	margin-right:0;
	margin-top:10px;
}
.extra {
	margin-top:70px;
}
.project-detail {
	float:none;
	margin-top:10px;

}
.work {
	float:none;
}
.grid a {
	width: 100%;
}
	#about {
	background:url(none) #ca5c69;
	}
	#about p {
	background:none;
	width:100%;
	padding:0;
	}
footer {
	bottom:0;
	left:0;
	width:65%;
	transform: rotate(0);
	transform-origin:0% 0%;
	-webkit-transform: rotate(0);
	-webkit-transform-origin:0% 0%;
}
.work-footer {
	display:none;
}
#home {
		background:url(../img/cover-mobile.jpg) center 70px no-repeat #ca5c69;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		height:100vh;
	}
}