/*
	Theme Name: Junior Optika
	Author: Kreativ Vonalak
	Version: 1.0
*/

/* resets */

*{
	padding:0px;
	margin:0px;
}

img{
	border:0px;
	max-width:100%;
}

sup{
	vertical-align:top;
	position:relative;
	top:-0.5em;
	padding-left:1px;
}

sub{
	vertical-align:bottom;
	position:relative;
	bottom:-0.5em;
	padding-left:1px;
}

u{
	text-underline-position:under;
}

ul > li{
	list-style-type:none;
}

.center{
	text-align:center;
}

.clear{
	display:block;
	height:0px;
	line-height:0px;
	font-size:0px;
	clear:both;
}

.clear.divider10{
	height:10px;
}

.clear.divider20{
	height:20px;
}

.clear.divider30{
	height:30px;
}

.img{
	font-size:0px;
	line-height:0px;
}

a, a:hover, a:active, a:focus{
	text-decoration:none;
	outline:none;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner,
select::-moz-focus-inner{
	border:none;
	outline:none!important;
}

input{
	border-radius:0px; /* disable iOS browsers auto border radius */
	background:none; /* disable Firefox default grey background */
	outline:none;
	/* for iOS browsers */
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
}

/* disable arrows for input number */

input[type=number] {
	-moz-appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
	-webkit-appearance:none;
	margin:0;
}

input[type=submit]{
}

textarea{
	background:none; /* disable Firefox default grey background */
	resize:none;
	outline:none;
	overflow:auto; /* disable scrollbar in IE */
	/* for iOS browsers */
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
	border-radius:0px; /* disable default radius in iOS browsers */
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
}

select{
	background:none; /* disable default grey background */
	outline:none; /* for Chrome */
	-moz-appearance:none; /* hide arrow */
	-webkit-appearance:none;
	appearance:none;
}

select:-moz-focusring{
	color:transparent!important;
	text-shadow: 0 0 0 #000!important;
}

option:not(:checked){
	color:black; /* prevent <option>s from becoming transparent as well */
}

table{
	/* kis kijelzon hosszu szavak tordelesehez */
	table-layout:fixed;
}

table td{
	/* kis kijelzon hosszu szavak tordelesehez */
	word-wrap:break-word;
	overflow-wrap:break-word;
}

::placeholder{
	opacity:1;
}

::-webkit-input-placeholder{
	/* ezt kulon ki kell irni, mert mobil Chrome-ban csak igy mukodik, ha az elozo melle irom vesszovel, akkor nem */
	opacity:1;
}

::selection{
	color:#030000;
	background:#63d9f5;
}

::-moz-selection{
	color:#030000;
	background:#63d9f5;
}

/* */

html{
	/* ez iOS eszkozoknek kell, iPhone-nak biztos, mert van, hogy nem jol jelenitik meg az oldalt */
	-webkit-text-size-adjust:100%;
}

body.touchScreen *{
	/* mobiloknak, ha kattintunk, akkor ne valtozzon az elem szine/hatterszine, pl. mobil Chrome-ban kekre */
	-webkit-tap-highlight-color:transparent;
	tap-highlight-color:transparent;
}

/* mobile menu */

.mobileMenu{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	background-color:rgba(0, 0, 0, 0.5);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding-top:100px;
	display:none;
	z-index:100000;
}

.mobileMenu > div{
	text-align:center;
	vertical-align:middle;
	opacity:0;
}

.mobileMenu.absolute > div{
	display:block;
	margin-right:auto;
	margin-left:auto;
}

.mobileMenu > div > a.close{
	font-size:30px;
	color:#ffffff;
}

.mobileMenu > div > div > ul{
	font-size:0px;
	padding-top:40px;
}

.mobileMenu > div > div > ul > li{
	line-height:20px;
	padding-bottom:15px;
	list-style-type:none;
}

.mobileMenu > div > div > ul > li:last-child{
	padding-bottom:0px;
}

.mobileMenu > div > div > ul > li > a{
	font-family:'Barlow Condensed';
	font-size:22px;
	color:#ffffff;
	text-transform:uppercase;
	text-decoration:none;
	@media screen and (max-width:599px){
		font-size:20px;
	}
}

.mobileMenu > div > div > ul > li > ul{
	display:none;
}

.mobileMenu > div > .languages > ul{
	display:inline-block;
}

.mobileMenu > div > .languages > ul > li{
	float:left;
	margin-right:20px;
}

.mobileMenu > div > .languages > ul > li:last-child{
	margin-right:0px;
}

.mobileMenu > div > .languages > ul > li.active > a{
	font-weight:700;
}

/* popup */

.popupBg{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	background-color:rgba(0, 0, 0, 0.5);
	display:none;
}

.popup{
	position:fixed;
	top:100px;
	left:0px;
	width:100%;
	text-align:center;
	display:none;
}

.popup > div{
	display:inline-block;
	/* min-width:...px; */
	background-color:#ffffff;
}

.popup > div > div{
	position:relative;
	padding:50px;
	text-align:left;
}

.popup > div > div > a{
	display:inline-block;
	position:absolute;
	top:20px;
	right:20px;
	font-size:18px;
	color:@colorBlack2;
}

.popup > div > div > div{
}

.popup > div > div > div > h2{
	font-weight:600;
	font-size:70px;
	line-height:70px;
	padding-bottom:18px;
}

.popup > div > div > div > h3{
	font-weight:500;
	font-size:36px;
	line-height:36px;
	padding-bottom:22px;
}

.popup > div > div > div > p{
	max-width:360px;
	font-weight:300;
	font-size:18px;
	line-height:22px;
	padding-bottom:25px;
	text-align:justify;
}