@charset "UTF-8";
body {
	width: 100%;
	background: url(../images/background.png) repeat;
	background-attachment: fixed;
	font-family: "AlexandriaFLF", Georgia, serif;
	color: #fff;
	text-align: center;
	font-weight: 500;
}

h1, #nav a {
	font-family: "Qanelas Soft DEMO", Futura, Arial, Sans-Serif;
	color: white;
	font-weight: 200;
}

h1 strong {
	font-weight: 800;
}

a {
	color: white;
	text-decoration: underline;
}

a:hover, a:focus {
	color: white;
}

#header {
	width: 100%;
}

#content {
	max-width: 400px;
	margin: auto auto 0 auto;
	text-align: center;
	position: static;
}

#welcome {
	height: calc(100vh - 300px);
	position: relative;
}

.welcome {
	position: absolute;
	bottom: 35px;
}

.snippet {
	padding-top: 25px;
}

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

#nav {
	margin-top: 15px;
	text-align: center;
	width: 100%;
	position: absolute;
	left: 0;
	right:0;
}

#nav a {
	width: 100%;
	display: inline-block;
	color: black;
	text-decoration: none;
}

#nav a:hover {
	background-color: gray;
	color: #fff;
	text-decoration: none;
}

.razin {
	text-align: center;
}

.razin img {
	width: 100%;
}

.logo img {
	width: 300px;
}

.other-link .row {
	padding: 10px 0;
}

.other-icon, .other-icon-vertical {
	text-align: center;
}

.other-icon img {
	width: 30px;
	margin-top: 4px;
}

.other-icon-vertical img {
	width: 30px;
}

.other-text {
	padding: 0;
}

.other-url {
	font-size: 10.5px;
	margin-top: -10.5px;
}

.footer {
	padding-top: 40px;
}

@media only screen and (max-width: 768px) {
	#nav {
		width: 109%;
		background-color: white;
	}
}

@media only screen and (min-width: 768px) {
	body {
		background-attachment: scroll;
	}
	
	.nav-border {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 20px solid white;
	}
	
	#content {
		max-width: 1000px;
		text-align: left;
	}
	
	.snippet {
		max-width: 450px;
	}
	
	.razin {
		position: fixed;
		bottom: 0;
	}
	
	.razin img {
		width: 400px;
	}
}