@charset "utf-8";
/*------------------------------------------------------------------
[Master Stylesheet]

Project:	UFO 404 Page
Version:	1.0
Last change:	01/09/15
Assigned to:	Frekvenca spleta s.p. / Frequency Themes
Primary use:	404 Error Page 
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Fonts
2. Reset
3. Standard
   3.1 Placeholder
4. Content / .wrapper
5. Sidebar / .ufo-text
6. Menu / .menu
7. Search / .search
8. Footer / .footer
9. Responsive

-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[1. Fonts]*/

@font-face {
    font-family: 'sansationbold';
    src: url('../fonts/sansation_bold.eot');
    src: url('../fonts/sansation_bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansation_bold.woff') format('woff'),
         url('../fonts/sansation_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sansationregular';
    src: url('../fonts/sansation_regular.eot');
    src: url('../fonts/sansation_regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansation_regular.woff') format('woff'),
         url('../fonts/sansation_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------------------------------------
[2. Reset]*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
html {overflow-y: scroll;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul {list-style:none; display: flex; justify-content: center;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
hr {display:block; height:0; background-color: #c7c7c7; border-top: 1px solid #c7c7c7; border-left:0; border-right:0; border-bottom: 1px solid #FFF; margin:1em 0; padding:0;}
*+html hr {height: 2px;}

/*------------------------------------------------------------------
[3. Standard]*/

html,
body {
	width: 100%;
	height: 100%;
	-webkit-transition:all .5s linear;
	-moz-transition:all .5s linear;
	-o-transition:all .5s linear;
	transition:all .5s linear;
}

body {
	background: #160925 url('../images/background.jpg') no-repeat center top;
	font-family: 'sansationbold';
	color: #FFF;
}

a {
	color: #FFF;
}

*:focus {
    outline: 0;
}

/*------------------------------------------------------------------
[3.1 Placeholder]*/

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #a0ff56;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #a0ff56;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #a0ff56;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #a0ff56;
}

/*------------------------------------------------------------------
[4. Content]*/

.wrapper {
	margin: 0 auto;
	width: 1024px;
	height: 800px;
	position: relative;
}

.field {
	width: 100%;
	height: 800px;
	background: url('../images/field.png') no-repeat center 450px;
}

.ufo {
	position: absolute;
	top: 0;
	right: 14px;
	z-index: 1;
}

.smoke {
	position: absolute;
	top: 202px;
	right: 477px;
	z-index: 2;
}

.light {
	position: absolute;
	top: 44px;
	right: 195px;
	z-index: 3;
}

/*------------------------------------------------------------------
[5. Sidebar]*/

.ufo-text {
	position: absolute;
	margin: 50px 0 0 32px;
	z-index: 1000;
	max-width: 435px;
}

.ufo-text h1 {
	font-size: 32px;
	line-height: 34px;
	margin: 8px 0 7px 0;
	font-weight: normal;
}

.lines {
	font-size: 28px;
	color: #adff6d;
	padding-left: 156px;
	background: url('../images/lines.png') no-repeat left top;
}

/*------------------------------------------------------------------
[6. Menu]*/

.menu nav ul {
	padding: 0;
}

.menu nav ul li {
	display: inline-block;
	margin-left: 12px;
}

.menu nav ul li:first-child {
	margin-left: 0;
}

.menu {
	margin-top: 47px;
}

.menu a {
	display: inline-block;
	float: left;
	font-size: 15px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: 2px #FFF solid;
	padding: 12px 34px;
}

.menu a:hover {
	background: #FFF;
	color: #160925;
}

.menu a:first-child {
	margin-left: 0;
}
/*------------------------------------------------------------------
[7. Search Field]*/

.search {
	display: inline-block;
	position: relative;
	margin-top: 11px;
	width: 100%;
}

.search input {
	width: 100%;
	border: 2px #a0ff56 solid;
	background: none;
	padding: 17px 20px 17px 60px;
	font-size: 16px;
	color: #a0ff56;
	font-family: 'sansationregular';
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-transform: uppercase;
}

.search button {
	position: absolute;
	top: 10px;
	left: 12px;
	width: 30px;
	height: 33px;
	background: url('../images/icon.png') no-repeat;
	border: 0;
	cursor: pointer;
	
}

/*------------------------------------------------------------------
[8. Footer]*/

.footer {
	position: absolute;
	width: 584px;
	bottom: 35px;
	text-align: center;
	z-index: 10000;
	left: 50%;
	margin-left: -292px;
	display:flex;
	justify-content:center;
	flex-direction:column;
}

.icn {
	float: left;
	display: inline-block;
	width: 42px;
	height: 42px;
	margin-right: 8px;
}

/*Facebook icon*/
.fb {
	background: url('../images/fb.png') no-repeat;
}

.fb:hover {
	background: url('../images/fb-a.png') no-repeat;
}

/*Twitter icon*/
.tw {
	background: url('../images/tw.png') no-repeat;
}

.tw:hover {
	background: url('../images/tw-a.png') no-repeat;
}

/*Linkedin icon*/
.ln {
	background: url('../images/ln.png') no-repeat;
}

.ln:hover {
	background: url('../images/ln-a.png') no-repeat;
}

/*Google Plus icon*/
.gp {
	background: url('../images/gp.png') no-repeat;
}

.gp:hover {
	background: url('../images/gp-a.png') no-repeat;
}

.copy {
	float: left;
	margin: 2px 0 0 8px;
	font-size: 12px;
	border: 2px #FFF solid;
	padding: 12px 30px;
	letter-spacing: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	line-height: 16px;
}

/*------------------------------------------------------------------
[9. Responsive]*/

@media (max-width: 1024px) {
	.field  {
		background-size: 1500px;
	}
	.wrapper {
		width: 768px;
	}
	.ufo {
		right: 33px;
		width: 450px;
		top: 137px
	}
	.light {
		right: 163px;
		width: 549px;
		top: 178px;
	}
	.smoke {
		right: 342px;
	}
}

@media (max-width: 768px) {
	.wrapper {
		width: 300px;
	}
	.field {
		background-size: 740px;
		background-position: center 506px;
	}
	.ufo {
		right: 0;
		width: 196px;
		top: 388px
	}
	.light {
		right: 61px;
		width: 209px;
		top: 409px;
	}
	.ufo-text {
		margin: 20px 0 0 0;
		padding: 0 20px;
	}
	.oh-no {
		width: 200px;
	}
	.ufo-text h1 {
		font-size: 26px;
	}
	.lines {
		font-size: 19px;
		padding-left: 110px;
		padding-top: 4px;
		background-position: -50px top;
	}
	.menu a {
		padding: 12px;
		font-size: 11px;
	}
	.smoke {
		right: 130px;
		width: 78px;
		top: 410px;
	}
	.footer {
		width: 100%;
		margin-left: 0;
		left: 0;
		padding: 0 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.footer ul li {
		display: inline-block;
	}	
	.icn {
		float: none;
	}
	.copy {
		margin: 15px 0;
	}
}