/** header **/

@font-face
{
	font-family: issimFont;
	src: url(../fonts/HelveticaRoundedLTStd-BdCn.otf);
}

@font-face
{
	font-family: issimContact;
	src: url(../fonts/HelveticaNeueLTCom-Cn.ttf);
}

body
{
	margin: 0;
	padding: 0;

	background: #ededed;
}

#header
{
	background: transparent;
	position: fixed;
	top: 30px;
	left: 0;

	/*
	height: 100px;
	line-height: 100px;
	*/
	height: 60px;
	line-height: 60px;
	width: 100%;
	margin: 0 auto;

	text-align: center;
	color: #fff;

	z-index: 10;

	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#header-logo
{
	height: 50px;
	margin-top: 5px;
}

.header-content-active
{
	height: 0;

	position: fixed;
	top: 0;
	left: 0;

	background-color: rgba(0, 0, 0, 0.8);

	font-family: issimFont;
	font-size: 2em;

	width: 100%;
	margin: 0 auto;

	-webkit-transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
	transition: height 0.5s ease-in-out;

	z-index: -1;
}

.header-active
{
	background-color: rgb(0, 0, 0)!important;

	height: 60px!important;

	-webkit-transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
	transition: height 0.5s ease-in-out;
}

.header-content
{
	font-family: issimFont;
	font-size: 1.8em;

	width: 90%;
	margin: 0 auto;

	z-index: 10;
}

.header-nav
{
	min-width: 60%;
	margin-top: 3px;
}

.header-nav a,
.header-nav a:visited
{
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

.left
{
	float: left;
}

.right
{
	float: right;
}

.uppercase
{
	text-transform: uppercase;
}

.spaced
{
	margin-left: 40px;
}


/** sections **/
.s-home
{
	/*
	background: url(../img/back/fons1.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/

	background: #222;
	position: relative;
}

.s-home-bottom
{
	position: absolute;
	bottom: 0;

	width: 100%;
}

.s-home-text
{
	color: #fff;
	font-family: issimFont;
	font-size: 2em;

	background-color: rgba(0, 0, 0, 0.4);
	text-align: center;


	padding: 20px 0;
}

.s-home-text-big
{
	font-size: 2.35em;
	margin: 0 0 -16px 0;
}

.s-home-text-small
{
	margin: 8px 0;
}

.s-home-left-arrow
{
	position: absolute;
	left: 5%;
	top: -webkit-calc(50% - 16px);
	top: calc(50% - 16px);

	cursor: pointer;
}

.s-home-right-arrow
{
	position: absolute;
	right: 5%;
	top: -webkit-calc(50% - 16px);
	top: calc(50% - 16px);

	cursor: pointer;
}

.down-arrow
{
	padding: 20px 0;
	text-align: center;
}

.arrow
{
	width: 32px;
	height: 32px;
}

/** section about **/

.s-about
{
 	padding-top: 110px;
	width: 100%;

	background-color: #fff;
	border-bottom: 1px solid #ececec;
}

.wrapper-about
{
	font-family: issimContact;
	font-weight: 400;
	color: #666;
	text-align: left;
	width: 90%;
	margin: 0 auto;
}

.wrapper-about h5
{
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0;
	color: #444;
}

.wrapper-about p
{
	padding-top: 0;
	margin-top: 0;
}

.wrapper-about .bold
{
	color: #444;
	font-weight: bold;
}

.s-about-title
{
	font-size: 3em;
	font-weight: bold;
	font-family: issimFont;
	color: #222;
	padding: 0;
	margin: 0;
}

.column-3-1-2
{
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
	-webkit-column-fill: balance;
	-moz-column-count: 2; /* Firefox */
	-moz-column-gap: 30px; /* Firefox */
	-moz-column-fill: balance;
	column-count: 2;
	column-gap: 30px;
	column-fill: balance;

	width: 66%;
	float: left;

	line-height: 1.5em;
}

.column-3-3
{
	padding-left: 30px;
	width: 34%;
	float: right;
	box-sizing: border-box;
}

.column-3-3 img
{
	width: 100%;
}

@media (max-width: 1000px)
{
	/*
	.s-home-left-arrow,
	.s-home-right-arrow
	{
		display: none;
	}
	*/

	.column-3-1-2
	{
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
		-webkit-column-fill: balance;
		-moz-column-count: 1; /* Firefox */
		-moz-column-gap: 30px; /* Firefox */
		-moz-column-fill: balance;
		column-count: 1;
		column-gap: 30px;
		column-fill: balance;

		width: 50%;
	}

	.column-3-3
	{
		width: 50%;
	}
}

@media (max-width: 800px)
{
	.column-3-1-2
	{
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
		-webkit-column-fill: balance;
		-moz-column-count: 1; /* Firefox */
		-moz-column-gap: 30px; /* Firefox */
		-moz-column-fill: balance;
		column-count: 1;
		column-gap: 30px;
		column-fill: balance;

		text-align: center;

		width: 100%;
		float: none;
	}

	.s-about-title
	{
		text-align: center;
	}

	.column-3-3
	{
		float: none;
		width: 100%;
		padding-left: 0;
	}

	.grid-sizer,
	.grid-item
	{
		width: calc(100% - 10px);
		margin-bottom: 10px;
	}
}

.column-3-1
{
	width: 33%;
	float: left;
	box-sizing: border-box;
}

.column-3-2
{
	width: 34%;
	float: left;
	box-sizing: border-box;
}

.flex
{
	display: flex;
	height: 500px;
}

.center
{
	text-align: center;
}

.right
{
	text-align: right;
}

.clear
{
	clear: both;
}

.little-padding
{
	padding-top: 2em;
}

.about-img
{
	width: 100%;
}

/** section work **/

.s-work
{
	padding-top: 110px;
	width: 100%;
}

.wrapper-work
{
	font-family: issimFont;
	font-weight: 400;
	color: #666;
	text-align: left;
	width: 90%;
	margin: 0 auto;
}

@media (max-width: 480px)
{
	.wrapper-work
	{
		width: 95%;
	}
}

.wrapper-work-content
{
	padding-top: 10px;
	margin: 0 -10px 0 0!important;
}

.s-work-nav
{
	font-size: 1.7em;
}

.s-work-nav a,
.s-work-nav a:visited
{
	color: #222;
	text-decoration: none;
}

.s-work-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.s-work-nav li
{
	float: left;
	padding-right: 35px;
}

/** section contact **/
.s-contact
{
	padding-top: 110px;
	width: 100%;

	-webkit-background: url(../img/contact/background.jpg) no-repeat center center fixed;
	-moz-background: url(../img/contact/background.jpg) no-repeat center center fixed;
	-o-background: url(../img/contact/background.jpg) no-repeat center center fixed;
	background: url(../img/contact/background.jpg) no-repeat center center fixed;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.wrapper-contact
{
	font-family: issimContact;
	text-align: left;
	width: 90%;
	margin: 0 auto;

	color: #ddd;

	min-height: 700px;
}

.wrapper-contact a,
.wrapper-contact a:visited
{
	color: #ddd;
	text-decoration: none;
}

.s-contact-title
{
	font-family: issimFont;
	font-size: 3em;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

.s-contact-columns
{
	width: 100%;
	font-size: 1.3em;
}

.s-contact-column-1
{
	width: 20%;
	float: left;
	box-sizing: border-box;
}

.s-contact-column-2
{
	width: 60%;
	float: left;
	box-sizing: border-box;
	padding: 0 auto;
	text-align: center;
}

.s-contact-column-3
{
	width: 20%;
	float: right;
	box-sizing: border-box;
}

.wrapper-contact p
{
	margin: 10px 0;
}

.s-contact-line
{
	width: 100%;
	border-top: 1px solid #ddd;
	font-size: 1px;
}

.s-contact-form
{
	width: 90%;
	margin: 0 auto;
}

.s-contact-form p
{
	margin: 0 0 15px 0;
}

.s-contact-form-input
{
	width: 100%;
/*
	height: 30px;
	padding: 25px 20px;
*/
	padding: 15px 20px;

	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.8);
	border: 0;

	font-family: issimContact;
	font-size: 1em;
	color: #222;

	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;

	box-shadow: 0;
}

.s-contact-form-input:hover,
.s-contact-form-input:active
{
	box-shadow: inset 0 0 5px #000;
}

.s-contact-form-textarea
{
	width: 100%;
	min-height: 475px;
	padding: 25px 20px;

	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.8);
	border: 0;

	font-family: issimContact;
	font-size: 1em;
	color: #222;

	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.s-contact-form-textarea:hover,
.s-contact-form-textarea:active
{
	box-shadow: inset 0 0 5px #000;
}

.s-contact-form-send
{
	background-color: rgba(255, 255, 255, 0.8);
	border: 0;
	padding: 10px 25px 6px;

	font-family: issimContact;
	font-size: 1em;
	color: #222;

	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.s-contact-form-send:hover,
.s-contact-form-send:active
{
	background-color: rgba(150, 150, 150, 0.8);
}

@media (max-width: 1000px)
{
	.s-contact-column-1, .s-contact-column-2, .s-contact-column-3
	{
		float: none;
		width: 100%;
	}
	.s-contact-column-3
	{
		clear: both;
		padding-top: 1em;
	}

	.s-contact-form
	{
		width: 100%;
	}
}

@media (max-width: 640px)
{
	.s-work-nav li
	{
		text-align: center;
	}

	.s-work-nav li
	{
		float: none;
		padding-right: 0;
		padding-top: 8px;
	}

	.s-contact-form .right
	{
		float: none;
		width: 100%;
		text-align: center;
	}
}

/** section footer **/
.s-footer
{
	height: 60px;
	line-height: 60px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;

	background: #000;
	color: #ddd;
}

.wrapper-footer
{
	font-family: issimFont;
	font-weight: 400;
	text-align: left;
	width: 90%;
	margin: 0 auto;

	color: #ddd;
}

.circle
{
	border-radius: 50%;
	background-color: #ddd;

	width: 50px;
	height: 50px;
}

.numberCircle
{
	border-radius: 50%;

	width: 25px;
	height: 25px;
	padding: 4px;
	margin-top: 5px;

	background: #fff;
	color: #222;
	text-align: center;

	font: 16px Arial, sans-serif;
}

.footer-left
{
	float: left;
}

.footer-right
{
	float: right;
}

.footer-spaced
{
	padding-left: 4px;
	width: 24px;
	height: 24px;
}

.wrapper-footer a:hover i
{
	-webkit-animation: toTopFromBottom 0.3s forwards;
	-moz-animation: toTopFromBottom 0.3s forwards;
	-o-animation: toTopFromBottom 0.3s forwards;
	animation: toTopFromBottom 0.3s forwards;
}

@-webkit-keyframes toTopFromBottom
{
	49% {-webkit-transform: translateY(-100%);}
	50% {opacity: 0;-webkit-transform: translateY(100%);}
	51% {opacity: 1;}
}
@-moz-keyframes toTopFromBottom
{
	49% {-moz-transform: translateY(-100%);}
	50% {opacity: 0;-moz-transform: translateY(100%);}
	51% {opacity: 1;}
}
@-o-keyframes toTopFromBottom
{
	49% {-o-transform: translateY(-100%);}
	50% {opacity: 0;-o-transform: translateY(100%);}
	51% {opacity: 1;}
}
@keyframes toTopFromBottom
{
	49% {transform: translateY(-100%);}
	50% {opacity: 0;transform: translateY(100%);}
	51% {opacity: 1;}
}

.footer-top-fix
{
	padding-top: 5px;
}

.wrapper-footer a
{
	text-decoration: none;
	color: #ddd;
}

.f-ico
{
	height: 50px;
	width: 50px;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media (max-width: 650px)
{
	.s-footer
	{
		height: auto;
	}

	.wrapper-footer
	{
		text-align: center;
		padding-top: 10px;
	}

	.footer-left
	{
		float: none;
		margin: 0 auto;
		margin-bottom: -13px;
		width: 100%;
		text-align: center;
	}

	.footer-right
	{
		display: block;
		float: none;
		text-align: center;
		width: 100%;
	}
}

.f-500
{
	background-image: url('../img/500.png');
}

.f-500:hover
{
	background-image: url('../img/500_on.png');
}

.f-fbook
{
	background-image: url('../img/fbook.png');
}

.f-fbook:hover
{
	background-image: url('../img/fbook_on.png');
}

.f-be
{
	background-image: url('../img/be.png');
}

.f-be:hover
{
	background-image: url('../img/be_on.png');
}

.f-flickr
{
	background-image: url('../img/flickr.png');
}

.f-flickr:hover
{
	background-image: url('../img/flickr_on.png');
}

.f-instagram
{
	background-image: url('../img/instagram.png');
}

.f-instagram:hover
{
	background-image: url('../img/instagram_on.png');
}

.f-pinterest
{
	background-image: url('../img/pinterest.png');
}

.f-pinterest:hover
{
	background-image: url('../img/pinterest_on.png');
}

/*
.f-fbook
{
	background: url('../img/fbook.png');
}

.f-fbook:hover
{
	background: url('../img/fbook_on.png');
}
*/

/** shared styles **/

.nav-selected
{
	border-bottom: 2px solid #fff!important;
}

.work-link-active
{
	border-bottom: 2px solid #222!important;
}

/*!
 * Hover.css (http://ianlunn.github.io/Hover/)
 * Version: 2.0.2
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014. Generated with Sass.
 */

/* Underline From Center */
.hvr-underline-from-center
{
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
}

.hvr-underline-from-center:before
{
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	right: 50%;
	bottom: 0;
	background: #222;
	height: 2px;

	-webkit-transition-property: left, right;
	-moz-transition-property: left, right;
	-o-transition-property: left, right;
	transition-property: left, right;

	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;

	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before
{
	left: 0;
	right: 0;
}

.hvr-underline-from-center-white
{
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
}


.hvr-underline-from-center-white:before
{
	content: "";
	position: absolute;
	z-index: -1;
	left: 51%;
	right: 51%;
	bottom: -2px;
	background: transparent;
	height: 2px;

	-webkit-transition-property: left, right;
	-moz-transition-property: left, right;
	-o-transition-property: left, right;
	transition-property: left, right;

	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;

	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hvr-underline-from-center-white:hover:before
{
	background: #fff;
}

.hvr-underline-from-center-white:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center-white:active:before
{
	left: 0;
	right: 0;
}

.hvr-underline-from-center-2
{
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
}

.hvr-underline-from-center-2:before
{
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	right: 50%;
	bottom: -2px;
	background: #222;
	height: 2px;

	-webkit-transition-property: left, right;
	-moz-transition-property: left, right;
	-o-transition-property: left, right;
	transition-property: left, right;

	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;

	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hvr-underline-from-center-2:hover:before, .hvr-underline-from-center-2:focus:before, .hvr-underline-from-center-2:active:before
{
	left: 0;
	right: 0;
}

.s-home-down-arrow,
.s-about-down-arrow,
.s-work-plus
{
	display: inline-block;

	height: 32px;
	width: 32px;

	margin: auto;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	cursor: pointer;
}

.s-home-down-arrow
{
	background-image: url("../img/arrow-down-white.png");
}
.s-home-down-arrow:hover
{
	background-image: url("../img/arrow-down-red.png");
}

.s-about-down-arrow
{
	background-image: url("../img/arrow-down-black.png");
}
.s-about-down-arrow:hover
{
	background-image: url("../img/arrow-down-red.png");
}

.s-work-plus
{
	background-image: url("../img/plus-black.png");
}
.s-work-plus:hover
{
	background-image: url("../img/plus-red.png");
}

/* vim: set ts=2 sw=2 smarttab: */