/*------------------------------------------*/
/* CSS Reset							
/*------------------------------------------*/

html, 
body, 
div, 
span, 
applet, 
object, 
iframe,
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre,
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code,
del, 
dfn, 
em, 
img, 
ins, 
kbd, 
q, 
s, 
samp,
small, 
strike, 
 
sub, 
sup, 
tt, 
var,
b, 
u, 
i, 
center,
dl, 
dt, 
dd, 
ol, 
ul, 
li,
fieldset, 
form, 
label, 
legend,
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td,
article, 
aside, 
canvas, 
details, 
embed,
figure, 
figcaption, 
footer, 
header, 
main, 
hgroup,
menu, 
nav, 
output, 
ruby, 
section, 
summary,
time, 
mark, 
audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
	background: transparent;
}

html, body {height: 100%}

* { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;         
}

img {
	height: auto;
	float: left;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;    
}

img,
a img {
	border: none;
}

a {
	text-decoration: none;
	color: inherit;
}

body {
	font-family:"futura-pt",'Work Sans',sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 1.5em;
}

h1 {
	font-size: 1.5em;
}

/****************
Basic 
*****************/
.viewport {
	height: 100%;
	width: 100%;
	width: 100%;
	margin: 0 auto;
}

.clear {
	clear: both;
}

.gallery {
	width: 40%;
	height: 100%;
	float: left;
}

.page {
	width: 40%;
	float: left;
	margin-left: 40%;
	padding-left: 40px;
}

.header,
.content,
.footer {
	width: 100%;
	float: left;
}

.colmn {
	width: 33.33333%;
	float: left;
}

/****************
Gallery
*****************/
.gallery {
	overflow: hidden;
	position: fixed;
	height: 100%;
	width: 40%;
	background-image: url('img/feischo-new.jpg');
	background-size: cover;
	background-position: bottom;
}

.gallery img {
	height: 100%;
	float: left;
}

/****************
Header
*****************/
.header {
	padding: 30px 0;
	margin-bottom: 0px;
}

.mainNav {
	float: left;
}

.mainNav ul {
	list-style: none;
}

.mainNav i {
	color: #A01349;
	margin-left: 5px;
}

.mainNav ul li {
	text-transform: uppercase;
	float: left;
	margin-right: 30px;
	padding-right: 30px;
	border-right: 1px solid #000;
	line-height: 1em;
	font-size: 14px;
}

.mainNav ul li:last-child {
	border: none;
}

.logo {
	float: right;
	width: 100px;
}

/****************
Content
*****************/
.content {
	margin-top: 50px;
}

.content h1 {
	margin-bottom: 20px;
}

.content p {
	margin-bottom: 20px;
}

/****************
Footer
*****************/

.footer {
	margin-top: 80px;
	font-size: 15px;
	line-height: 1.5em;
}

.row {
	margin-left: -25px;
	margin-right: -25px;
	position: relative;
}

.colmn {
	padding: 0 25px;
}

.footer a {
	font-weight: 500;
}

.footer a i {
	background: #A01349;
	color: #fff;
	padding: 10px;
	margin-top: 15px;
	width: 40px;
	text-align: center;
}

.footer a.partner {
	width: 100%;
	float: lefT;
	
}

/**************
Media Query
***************/
@media (max-width: 1700px) {
	.page {
		width: 50%;
	}
}

@media (max-width: 1350px) {
	.page {
		width: 60%;
	}
}

@media (max-width: 1150px) { 
	.colmn {
		width: 50%;
		margin-bottom: 20px;
	}
	
	.mainNav 	{
		width: 50%;
	}
	
	.mainNav ul li {
		border: none;
		width: 100%;
		margin-bottom: 20px;
	}
	
	.page {
		width: 60%;
		padding-right: 20px;
	}
}

@media (max-width:520px) { 
	.page {
		width: 100%;
		padding: 0 20px;
		margin: 0;
	}
	
	.gallery {
		display: none;
	}
	
	.colmn {
		width: 100%;
		margin-bottom: 40px;
	}
	
	.logo {
		float: left;
	}
	
	.mainNav {
		width: 100%;
		margin-top: 30px;
	}
}