@import url(http://fonts.googleapis.com/css?family=Roboto:900,100,400|Roboto+Condensed:700);

@font-face {

    font-family: 'commandocommando';

    src: url('fonts/commando-webfont.eot');

    src: url('fonts/commando-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/commando-webfont.woff') format('woff'),

         url('fonts/commando-webfont.ttf') format('truetype'),

         url('fonts/commando-webfont.svg#commandocommando') format('svg');

    font-weight: normal;

    font-style: normal;

}

html, body, h1, h2, h3, h4, ul, ol, li, p, a {

  	padding: 0;

 	border: 0;

 	margin: 0;

}

body {

	width: 100%;

	height: 100vh;

	overflow: visible;

	background: #8bc5cc;

	background: -webkit-radial-gradient(#8bc5cc, #7b9aa7); /* Safari 5.1 to 6.0 */

  	background: -o-radial-gradient(#8bc5cc, #7b9aa7); /* For Opera 11.6 to 12.0 */

  	background: -moz-radial-gradient(#8bc5cc, #7b9aa7); /* For Firefox 3.6 to 15 */

  	background: radial-gradient(#8bc5cc, #7b9aa7); /* Standard syntax */

	font-family: 'Roboto', 'Montserrat-Regular', sans-serif;

}

.hidden {

	display: none;

}

#background-wrap {

	opacity: 0.4;

}

#firstsection {

	position: relative;

	height: 100%;

}

.consoleimg {

	z-index: 1;

	width: 80%;

	position: absolute;

  	top: 55vh;

  	left: 50%;

  	transform: translate(-50%, -50%);

  }

.wrappercon {

	display: -webkit-box;      

  	display: -moz-box;         

  	display: -ms-flexbox;      

  	display: -webkit-flex; 

	display: flex;

	align-items: center;

	justify-content: center;

}

.consoleimg a { 

	position: relative;

	display: inline-block;

	padding: 30px;



}

.consoleimg a img { 

	padding-bottom: 50px;

	padding-bottom: 50px;

	height: auto; 

    width: 80%; 

}

.selectedcon {

	width: 100%;

	position: absolute;

  	top: 55vh;

  	left: 50%;

  	transform: translate(-50%, -50%);

}



.wrappercircle {

	display: -webkit-box;      

  	display: -moz-box;         

  	display: -ms-flexbox;      

  	display: -webkit-flex; 

	display: flex;

	justify-content: center;

}

.wrappercircle div{ 

	position: relative;

	display: inline-block;

	margin: 30px;

	width: 70px;

	height: 70px;

    -webkit-border-radius: 50%; 

    -moz-border-radius: 50%; 

    border-radius: 50%; 

    padding: 50px;

    background: white;

    -moz-box-shadow:    0px 3px 0px 0px #f7941d;

    -webkit-box-shadow: 0px 3px 0px 0px #f7941d;

    box-shadow:         0px 3px 0px 0px #f7941d;

}

#cr1{ 

	top: 75px;

	left: -12px;

}

#cr2{ 

	top: 9px;

	left: -4px;

}

#cr3{ 

	top: 9px;

	left: -2px;

}

#cr4{ 

	top: 9px;

	left: -32px;

}

#cr5{ 

	top: 16px;

	left: -29px;

} 





.consoleimg:hover #cr1{

	opacity: 1;

}

@-webkit-keyframes Floating {

  from {

    -webkit-transform: translate(0, 0px);

  }

  65% {

    -webkit-transform: translate(0, 20px);

  }

  to {

    -webkit-transform: translate(0, 0px);

  }

}

@-moz-keyframes Floating {

  from {

    -moz-transform: translate(0, 0px);

  }

  65% {

    -moz-transform: translate(0, 20px);

  }

  to {

    -moz-transform: translate(0, 0px);

  }

}



.consoleimg a img:hover {

	-webkit-animation: Floating 3s infinite; 

    animation: Floating 3s infinite;

    -moz-animation: Floating 3s infinite;

    -webkit-animation-timing-function: ease-in-out;

	width: 90%;

	height: auto;



}



.hwrap {

	position: absolute;

	-webkit-transform: rotate(-10deg);

	-ms-transform: rotate(-10deg);

	-moz-transform: rotate(-10deg);

	line-height: 100px;

	top: 3%;

	z-index: 2;

}

.hwrap h1 {

	font-family: 'commandocommando' , Arial , sans-serif;

	position: relative;

	font-size: 120px;

	font-weight: 900;

	text-align: left;

	text-transform: uppercase;

	color: white;

	text-shadow: 2px 2px #f7941d;

}

.hwrap h2 {

	line-height: 70px;

	font-family: 'commandocommando' , Arial , sans-serif;

	position: relative;

	font-size: 90px;

	font-weight: 900;

	text-align: left;

	text-transform: uppercase;

	color: white;

	text-shadow: 2px 2px #f7941d;

	margin-top: -30px;

	z-index: 999;

}

.nav  {

	display: inline;

}

.nameidwrap {

	position: absolute;

  	top: 80vh;

  	transform: translate(-50%, 50%);

	width: 100%;

	z-index: 98;

	-webkit-animation: Floating 3s infinite; 

    animation: Floating 3s infinite;

    -moz-animation: Floating 3s infinite;

    -webkit-animation-timing-function: ease-in-out;

}

.nameidwrap .ispis {

	margin: 0 auto;

  	-moz-box-shadow:    0px 3px #f7941d;

    -webkit-box-shadow: 0px 3px #f7941d;

    box-shadow:         0px 3px #f7941d;

    -moz-border-radius: 0 20px;

    -webkit-border-radius: 0 20px;

    border-radius: 0 20px; 

    overflow: hidden;

    background: white;

    padding: 0px; 

    width: 250px;

    height: 50px; 

    text-align: center;

}

.ispis p {

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 32px;

	margin-top: 9px;

}



.mwrap {

	position: fixed;

	width: 100%;

	top: 5%;

	left: 15%;

	-webkit-transform: rotate(2deg);

	-ms-transform: rotate(2deg);

	-moz-transform: rotate(2deg);

	z-index: 999;

}



#cssmenu {

	float: right;

	position: relative;

  	width: 650px;

  	height: 60px;

  	left: -25px;

	color: #000000; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 24px;

    line-height: 15px;

    text-transform: uppercase;

    text-align: left;

}

#cssmenu  ul {

  width: auto;

  list-style-type: none;

  padding: 0;

  margin: 0;

  background: #ffffff;

  border-bottom: 3px solid #f7941d;

  -webkit-border-radius: 2px;

  -moz-border-radius: 2px;

  -o-border-radius: 2px;

  border-radius: 2px;

}



#cssmenu ul li {

  display: inline-block;

}

#cssmenu ul li.right {

  float: right;

}

#cssmenu ul li.podmenu {

  position: relative;

}



#cssmenu ul li.podmenu ul {

  display: none;

  width: 250px;

  position: absolute;

  margin: 0;

  padding: 0;

  list-style-type: none;

  background: #ffffff;

  border: 1px solid #f7941d;

  border-bottom: 3px solid #f7941d;

  border-top: 0 none;

}

#cssmenu ul li.podmenu ul li {

  display: block;

}



#cssmenu ul li a {

  display: block;

  padding: 12px 24px 11px 24px;

  text-decoration: none;

  color: #000;

  background: white;

}

#cssmenu ul li a:hover {

 

  color: #fff;

}

.neaktivanLink {

   pointer-events: none;

   cursor: pointer;

}

.additional_links {

	display: block;

	position: relative;

	top: 90%;

	float: right;

	width: 300px;

	height: 30px;

	background-color: white;

	-webkit-transform: rotate(2deg);

	-ms-transform: rotate(2deg);

	-moz-transform: rotate(2deg);

	-moz-box-shadow:    0px 3px #f7941d;

    -webkit-box-shadow: 0px 3px #f7941d;

    box-shadow:         0px 3px #f7941d;

    padding-left: 15px;

}

.additional_links ul li {

	display: inline-block;

	margin-right: 15px;

	margin-top: 4px;

	font-family: 'Roboto' , Arial, sans-serif;

	font-weight: 900;

}

.additional_links ul li a {

	text-decoration: none;

	color: black;

}

/* Vectrex CSS */

#secondsection {

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: #00a092;

	top: 0;

	clear: both;

}

.animated-console{

	z-index: 1;

	display: block;

	align-items: center;

	margin-top: 140px;

	height: 0;

	-webkit-animation: Floating 3s infinite; 

    animation: Floating 3s infinite;

    -moz-animation: Floating 3s infinite;

    -webkit-animation-timing-function: ease-in-out;

}

.info-console {

	position: relative;

	width: 60%;

	text-align: right;

	float: right;

	margin-right: 150px;

	transform: translate(0%, 50%);

}

.info-console .imecon-back {

	position: relative;

	margin-left: 65%;

	height: 45px;

	 -ms-transform: skew(-45deg, 0deg);

	 -moz-transform: skew(-45deg, 0deg);

    -webkit-transform: skew(-45deg, 0deg);

    transform: skew(-45deg, 0deg);

    background: #121212;

}

.info-console .imecon-back .imeconsole {

	padding-top: 5px;

	text-align: right;

	margin-right: 50px;

	 -ms-transform: skew(45deg, 0deg);

	 -moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

	color: #00a092; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 24px;

	line-height: 18px;

}

.info-console .imecon-back .imeconsole span{

	font-size: 18px;

}

.info-console .info-text {

	font-family: 'Roboto' , Arial , sans-serif;

	font-size: 12px;

	font-weight: 900;

	line-height: 14px;

	color: #121212;

}

.info-console .galerija {

	position: relative;

	margin-left: 71%;

	height: 45px;

	margin-top: 15px;

	 -ms-transform: skew(45deg, 0deg);

	 -moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

    background: #fff;

    border-bottom: 3px solid #f7941d;

}

.info-console a {

	text-decoration: none;

}

.info-console .galerija:hover {

	background: #f7941d;

    border-bottom: 3px solid #fff;

}

.info-console .galerija p {

	padding-top: 2px;

	text-align: right;

	margin-right: 50px;

	 -ms-transform: skew(-45deg, 0deg);

	 -moz-transform: skew(-45deg, 0deg);

    -webkit-transform: skew(-45deg, 0deg);

    transform: skew(-45deg, 0deg);

	color: #121212; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 48px;

}



/* Atari CSS */

#thirdsection .hwrap h2 {

	margin-top: -20px;

}

#thirdsection {

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: #84c8c8;

	top: 0;

	clear: both;

}

#thirdsection .info-console {

	position: relative;

	width: 60%;

	text-align: right;

	float: right;

	margin-right: 150px;

	transform: translate(0%, 70%);

}

#thirdsection .info-console .imecon-back .imeconsole {

	padding-top: 5px;

	text-align: right;

	margin-right: 50px;

	 -ms-transform: skew(45deg, 0deg);

	 -moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

	color: #84c8c8; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 24px;

	line-height: 18px;

}



/* SNES CSS */

#fourthsection .hwrap h2 {

	margin-top: -40px;

}

#fourthsection {

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: #1d6478;

	top: 0;

	clear: both;

}

#fourthsection .info-console {

	position: relative;

	width: 60%;

	text-align: right;

	float: right;

	margin-right: 150px;

	transform: translate(0%, 50%);

}

#fourthsection .info-console .imecon-back .imeconsole {

	padding-top: 5px;

	text-align: right;

	margin-right: 50px;

	 -ms-transform: skew(45deg, 0deg);

	 -moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

	color: #1d6478; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 24px;

	line-height: 18px;

}

/* PSOne CSS */

#fifthsection .hwrap h2 {

	margin-top: -40px;

}

#fifthsection {

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: #7a705c;

	top: 0;

	clear: both;

}

#fifthsection .info-console {

	position: relative;

	width: 60%;

	text-align: right;

	float: right;

	margin-right: 150px;

	transform: translate(0%, 50%);

}

#fifthsection .info-console .imecon-back .imeconsole {

	padding-top: 5px;

	text-align: right;

	margin-right: 50px;

	 -ms-transform: skew(45deg, 0deg);

	 -moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

	color: #7a705c; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 24px;

	line-height: 18px;

}



/* XBox CSS */

#sixthsection .hwrap h2 {

	margin-top: -40px;

}

#sixthsection {

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: #107c0f;

	top: 0;

	clear: both;

}

#sixthsection .info-console {

	margin-top: 45px;

	position: relative;

	width: 60%;

	text-align: right;

	float: right;

	margin-right: 150px;

	transform: translate(0%, 32%);

}

#sixthsection .info-console .imecon-back .imeconsole {

	padding-top: 5px;

	text-align: right;

	margin-right: 50px;

	 -ms-transform: skew(45deg, 0deg);

	 -moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

	color: #107c0f; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 24px;

	line-height: 18px;

}



/* AboutMe CSS */



#toAboutMe .hwrap h2 {

	margin-top: -40px;

}

#toAboutMe {

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: #2c8a90;

	top: 0;

	clear: both;

}

#toAboutMe .aboutme-tekst {

	position: relative;

	width: 80%;

	text-align: center;

	top: 10%;

	margin: 0 auto;

}

.aboutmeimg {

	margin-bottom: 15px;

	-webkit-animation: Floating 3s infinite; 

    animation: Floating 3s infinite;

    -moz-animation: Floating 3s infinite;

    -webkit-animation-timing-function: ease-in-out;

}

#toAboutMe .aboutme-tekst span{

	font-size: 18px;

	font-weight: 900;

}

.aboutme-tekst .imeprediv {

	position: relative;

	margin: 0 auto;

	height: 45px;

	width: 60%;

	-ms-transform: skew(45deg, 0deg);

	-moz-transform: skew(45deg, 0deg);

    -webkit-transform: skew(45deg, 0deg);

    transform: skew(45deg, 0deg);

    background: #121212;

}

#toAboutMe .aboutme-tekst .imeprediv .imepre {

	position: relative;

	padding-top: 16px;

	text-align: center;

	-ms-transform: skew(-45deg, 0deg);

	-moz-transform: skew(-45deg, 0deg);

    -webkit-transform: skew(-45deg, 0deg);

    transform: skew(-45deg, 0deg);

	color: #fff; 

	font-family: 'commandocommando' , Arial , sans-serif;

	font-size: 48px;

	line-height: 18px;

}

.social_icons {

	margin-top: 35px;

}

.social_icons span img{

	position: relative;

	width: 32px;

	height: 32px;

	opacity: 0.5;

}

.social_icons span {

	margin: 5px;

}

.social_icons span img:hover{

	box-shadow: 2px 3px 15px #fff;

	opacity: 1;

	top: 5px;

}

/*Survey Forma*/



#SuggestionBox .hwrap h2 {

	margin-top: -40px;

}

#SuggestionBox{

	z-index: 130;

	position: absolute;

	height: 100%;

	width: 100%;

	background: black;

	background: #2980b9;

    background: rgba(0, 0, 0, 0.7);

	top: 0;

	clear: both;

}

.suggestionbox {

	display: block;

	position: relative;

	top: 48%;

	left: 0;

	padding-top: 15px;

	margin: 0 auto;

	height: 600px;

	width: 450px;

	background-color: #ffffff;

	box-shadow: 0 0 5px #000000;

	text-align: center;

	transform: translateY(-250px);

}

.suggestionbox hr {

	border: 1px;

	width: 330px;

	height: 1px;

	opacity: 0.5;

}

.inputareastyleone {

	display: inline-block;

	position: relative;

	top: 10px;

	left: 0;

	margin-top: 5px;

	width: 330px;

}

.inputareastyleone p {

	margin-bottom: 5px;

	font-family: 'Roboto Condensed', 'Arial' sans-serif;

	font-size: 12px;

	font-weight: 700;

	color: #333333;

}

.inputareastyleone input {

    width: 263px;

    height: 40px;

    border: 1px solid #cccccc;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box; 

    display:block;

    font-family: 'Roboto', 'Arial' sans-serif;

    font-size:12px;

    color: #333333;

    padding-left:45px;

    padding-right:20px;

    margin-bottom:10px;

}

.inputareastyleone input:focus { 

	background-color: #eeeeee 0.5;

    -moz-box-shadow: 0 0 5px 1px #297fb8;

    -webkit-box-shadow: 0 0 5px 1px #297fb8;

    box-shadow: 0 0 5px 1px #297fb8;

	overflow: hidden; 

	outline-color: #3687bc;

	outline: 2px;

	border: 1px solid #ffffff;

}

.inputareastyletwo {

	width: 294px;

	border: 1px solid #cccccc;

	text-align: left;

	margin-left: 60px;

	margin-top: 15px;

	padding-left: 35px;

	padding-bottom: 10px;

	padding-top: 10px;

}

.inputareastyletwo input {

	width: 35px;

    display:inline-block;

    text-align: left;

    padding: 3px;

}

.inputareastyletwo p {

	display: inline-block;

	 font-family: 'Roboto', 'Arial' sans-serif;

    font-size:16px;

    font-weight: 400;

    color: #333333;

}

.buttonstylesubmit {

	display: inline-block;

	position: relative;

	left: 0;

	bottom: -10px;

	margin-top: 10px;

	width: 330px;

}

.buttonstylesubmit input.btn {

    width: 330px;

    height: 50px;

    border: solid 0px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box; 

    display:block;

    font-family: 'Roboto Condensed', 'Arial' sans-serif;

    font-weight: 700;

    font-size:24px;

    color: #ffffff;

    text-transform: uppercase;

    background: #f7941d;

    box-shadow: 0px -7px 0px 0px rgba(000, 000, 000, 0.2) inset; 

}

.buttonstylesubmit input.btn:active {

    height: 43px;

    border: solid 0px;

    margin-top: 7px;

    outline: 0;

    box-shadow: 0px 0px 0px 0px rgba(000, 000, 000, 0.2) inset;

}

.buttonstylesubmit input.btnre {

    width: 330px;

    height: 50px;

    border: solid 0px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box; 

    display:block;

    font-family: 'Roboto Condensed', 'Arial' sans-serif;

    font-weight: 700;

    font-size:24px;

    color: #ffffff;

    text-transform: uppercase;

    background: #f7941d;

    box-shadow: 0px -7px 0px 0px rgba(000, 000, 000, 0.2) inset; 

}

.buttonstylesubmit input.btnre:active {

    height: 43px;

    border: solid 0px;

    margin-top: 7px;

    outline: 0;

    box-shadow: 0px 0px 0px 0px rgba(000, 000, 000, 0.2) inset;

}

.backlink {

	display: inline-block;

	position: relative;

	bottom: -25px;

	left: 0;

	right: 0;

	margin-top: 10px;

	width: 330px;

}

.backlink a {

	font-size: 14px;

	color: #333333;

	text-decoration: none;

	font-style: italic;

}

.formcontainer #emailmsg {

	font-size: 10px;

	padding-bottom: 2px;

	padding-top: 2px;

	margin-bottom: 5px;

	background: red;

	display: none;

	color: white;

	font-weight: 400px;

}

.formcontainer #nickmsg {

	font-size: 10px;

	padding-bottom: 2px;

	padding-top: 2px;

	margin-bottom: 5px;

	background: red;

	display: none;

	color: white;

	font-weight: 400px;

}

.formcontainer #radiomsg {

	font-size: 10px;

	padding-bottom: 2px;

	padding-top: 2px;

	margin-top: 10px;

	background: red;

	display: none;

	color: white;

	font-weight: 400px;

	width: 330px;

	margin-left: 60px;

}

.ispisanketewrapper {

	display: none;

	position: absolute;

	top: 50%;

	left: 50%;

	padding-top: 15px;

	margin: 0 auto;

	height: 100px;

	width: 450px;

	background-color: #ffffff;

	box-shadow: 0 0 5px #000000;

	text-align: center;

	transform: translate(-225px,-50px);

}

.exitresults {

	display: block;

	position: absolute;

	top: 0;

	left: 425px;

	width: 25px;

	height: 25px;

	font-weight: 900;

	font-size: 18px;

	color: white;

	font-family: 'Roboto', Arial, sans-serif;

	background-color: #84c8c8;

}

.exitresults:hover {

	background-color: #f7941d;

}

.exitresults a {

	pointer-events: none;

   	cursor: pointer;

   	text-decoration: none;

   	color: white;

}