@import url(font/font.css);

*{
	margin: 0;
	padding: 0;
	list-style: none;
}

html{	
	height: 100%;
}

body{
	background: #f5f5f5;
	height: 100%;
}

.clear{
	clear: both;
}

.header_mobil{
	display: none;
}

.header_mobil nav{
	height: auto;
}

.header_mobil li, .header_mobil li:hover{
	padding: 5px;
	background: none;
}

.header_mobil li:after{
	display: none;
}

.header_mobil a{
	font-size: 120%;	
	text-shadow: none;
}

.header_mobil li.mn_szoftver a:hover{
	color: #5dc5e7;
}

.header_mobil li.mn_web a:hover{
	color: #4fb6b7;
}

.header_mobil li.mn_host a:hover{
	color: #84cc6d;
}

.header_mobil li.mn_kiemelt a{
	color: #f0138a;
}

.header_mobil li.mn_kiemelt a:hover{
	color: black;
}

.header_mobil li.mn_ref a:hover{
	color: #00ff90;
}

.header_mobil li.mn_kapcs a:hover{
	color: rgba(81, 87, 91, 1);
}

.container{
	min-height: 100%;
	margin: 0 6%;
	background: white url(pict/hatszogek_szurke.png) no-repeat right bottom;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 90%;
	line-height: 1.5;
	overflow: hidden;
}

.header{
	height: 302px;
	background: url(pict/hatszogek_szines2.png) no-repeat left top, url(pict/header_bg2.jpg) no-repeat center 63px;
	display: block;
}

.header.inner{
	background: white;
	height: 63px;
	border-bottom: 1px solid rgba(145,145,145,0.3);
	display: none;
	visibility: hidden;
	transition: all linear 0.3s 0s;
	z-index: 9999;
}

.my-sticky-element{
	display: block; 
}

.my-sticky-element span{
	padding: 1em;
	display: block;
}

.my-sticky-element.stuck {
	position:fixed;
	top: 0;
	left: 0;
	display: block;
	visibility: visible;
	width: 88%;
	margin: 0 6%;
}

.my-sticky-element.stuck nav{
	background: url(pict/logo_kicsi.png) no-repeat right top;
}
	
.sticky-wrapper{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.wrapper{
	margin: 0 auto;
	width: 90%;
}

nav{
	height: 63px;
	font-family: bebas_neueregular, Arial, Helvetica;	
}

nav ul li {
    display: inline;
    float: left;
    padding: 13px 0 12px;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

nav ul li:after{
	content: "";
    display: block;
    height: 5px;
    left: 0;
    position: relative;
    top: 13px;
    width: 100%;
	background: transparent;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

nav ul li a{	
	font-size: 150%;
	color: #919191;
	text-decoration: none;	
	padding: 0 10px;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
	text-shadow: 1px 1px 0 white;
	display: block;
}

nav ul li:hover a{	
	color: #000;
}

.mn_kiemelt{
	background: rgba(255,0,132,0.7);	
}

.mn_kiemelt:hover{
	background: rgba(255,0,132,1);	
}

.mn_kiemelt:hover a{
	color: white;
	text-shadow: none;
}

.mn_kiemelt:after {
    background: rgba(255,0,132,1);   
}

.mn_kiemelt:hover:after {
    background: rgba(227,0,118,1);   
}

.mn_kiemelt a{	
	color: #000;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);	
}

.mn_szoftver:hover{
	background: rgba(93,197,231,0.7);
}

.mn_szoftver:hover:after{
	background: rgba(93,197,231,1);
}

.mn_web:hover{
	background: rgba(78,182,183,0.7);
}

.mn_host:hover:after{
	background: rgba(132,204,109,1);
}

.mn_host:hover{
	background: rgba(132,204,109,0.7);
}

.mn_web:hover:after{
	background: rgba(78,182,183,1);
}

.mn_ref:hover{
	background: rgba(0,255,144,0.5);
}

.mn_ref:hover:after{
	background: rgba(0,255,144,1);
}

.mn_kapcs:hover{
	background: rgba(235,235,235,0.6);
}

.mn_kapcs:hover:after{
	background: rgba(235,235,235,1);
}

.logo_big{
	height: 238px;
	background: url(pict/kam.png) no-repeat right top;
}

.logo_big h1{
	font-size: 70pt;
	font-style: italic;
	color: #3b3b3b;
	font-weight: normal;	
	position: relative;
    right: 150px;
    top: 88px;
	float: right;
}

.logo_big h1 span:first-child{
	font-weight: bold;
	color: #51575a;
}

.logo_big h1 span:nth-of-type(2){
	color: #c0c0c0;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 6px;
	display: block;
	font-style: normal;
	margin-top: -10px;
}

.ceginfo{
	margin: 1.5em 0;
	padding: 1.5em 0 0;
	border-top: 5px solid rgba(81,87,91,0.3);
}

.ceginfo p{
	margin: 0 0 1.5em 0;
	font-size: 150%;
	font-family: bariol_regularregular, Arial, Helvetica;
	color: #51575a;
	text-align: justify;
}

.ceginfo p:last-child{
	margin-bottom: 0;
}

.kap{
	PADDING-TOP: 500PX;
}

.szoftver, .web, .host{
	margin: 2em 0;
    padding: 3em 0 0;
	border-top: 5px solid #5dc5e7;
}

.web{
	border-top: 5px solid rgb(78,182,183);
}

.host{
	border-top: 5px solid #84cc6d;
}

.szoftver_ikon, .vallaljuk, .mukodes, .web_ikon, .host_ikon{
	display: flex;
	flex-flow: row wrap;
}

.ikon{
	margin: auto 0;
}

.ikon_cim{
	margin: auto 0;
	overflow: hidden;
}

.ikon img{
	max-width: 100%;
}

.szoftver_ikon h1, .web_ikon h1, .host_ikon h1{
	font-family: bebas_neueregular, Arial, Helvetica;	
	font-size: 400%;
	color: #5dc5e7;
	padding-left: 30px;
}

.web_ikon h1{
	color: rgb(78,182,183);
}

.host_ikon h1{
	color: #84cc6d;
}

.host_ar{
	background: #f5f5f5;
	border-radius: 3px;
	font-family: bebas_neueregular, Arial, Helvetica;	
	font-size: 500%;
	color: #929292;
	text-align: center;
	padding: 0.7em;
}

.szoveg{
	margin: auto;
	padding: 2em 2em 2em 0;
	flex: 1 1 35%;
}

.szoveg h1{
	color: #;
	font-size: 250%;
	font-family: bariol_regularregular, Arial, Helvetica;
	font-weight: normal;
}

.szoveg ol{	
	padding: 0 0 0 40px;
}

.szoveg ol li{
	font-family: bariol_regularregular, Arial, Helvetica;	
	font-size: 150%;
	list-style-image: url(pict/list.png);
}

.kep{
	margin: auto;
}

.kep img {
	max-width: 100%;
	/*margin-top: -100px;*/
}

.miert{
	font-family: /*bariol_lightlight*/bariollight_italic, Arial, Helvetica;
	font-size: 500%;
	color: #5dc5e7;
	line-height: 1.2;
	background: rgba(0,0,0,0.03);
    border-radius: 0 25px;
	margin: 0.2em 0;
    padding: 0.2em;
	text-align: center;
}

.web .miert{
	color: rgb(78,182,183);
}

.host .miert{
	color: #84cc6d;
	margin-top: 50px;
	margin-bottom: 100px;
}

.muk_szoveg{
	margin: auto 0;
	padding: 2em 2em 2em 0;
	flex: 1 1 75%;
}

.ref{
	margin: auto 0 auto auto;
}

.muk_szoveg ol{
	padding: 0 0 0 40px;
}

.muk_szoveg ol li{
	font-family: bariol_regularregular, Arial, Helvetica;	
	font-size: 250%;
	color: #418ca5;
	list-style-image: url(pict/list.png);
}

.mukodes.webfejl .muk_szoveg ol li{
	color: #2a9293;
}

.ref_alap{
	width: 162px;
	height: 140px;
	background: url(pict/ref_alap.png) no-repeat center center;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.ref_alap:hover{
	transform: rotate(-30deg);
}

.ref_alap:hover span{
	transform: rotate(30deg);
	opacity: 0.7;
	
}

.ref_alap span{
	width: 162px;
	height: 140px;
	display: block;
	background: url(pict/ref_szoft.png) no-repeat center center;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	opacity: 1;
}

.kapcsolat{
	background: #f5f5f5;
	padding: 30px;
	margin: 0 10px;
	color: #616161;
}

.container .kapcsolat:last-child{
	border-top: 1px solid #e1e1e1;
}

.kapcsolat h2, .kapcsolat h1{
	font-family: bebas_neueregular, Arial, Helvetica;
	font-size: 250%;
	text-align: center;
}

.kapcsolat h1{
	font-size: 350%;
}

.cimek{
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto;
    width: 80%;
	align-content: space-between;
	/*border-bottom: 1px solid #e1e1e1;*/
}

.mail, .tel{
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    margin: 30px auto;
    min-width: 370px;
    padding: 10px;
}

.mail p, .tel p{
	font-size: 200%;
	font-family: bariol_regularregular, Arial, Helvetica;
	padding-left: 100px;
	background: url(pict/hatszog_kicsi_sz.png) no-repeat center left;
	padding: 20px 0 20px 100px;
	position: relative;
}

.mail p span, .tel p span{
	height: 90px;
    left: 2px;
    position: absolute;
    top: 0;
    width: 90px;
}

.tel p span{
	background: url(pict/tel.png) no-repeat center 15px;
}

.mail p span{
	background: url(pict/mail.png) no-repeat center 20px;
}

.uzenet_form{
	max-width: 750px;
	margin: 40px auto;	
	padding: 0 25px;
}

.uzenet_mezok{
	display: flex;
	flex-flow: row wrap;
	padding-bottom: 20px;
}


.uzenet_mezok > div {
    flex: 1 1 48%;	
}

.uzenet_mezok > div:first-child {
    margin: 0 2% 0 0;
}

.uzenet_mezok > div:last-child {
    margin: 0 0 0 2%;
}

.uzenet_form label{
	display: block;
	color: #616161;
	font-size: 140%;
	font-family: bariol_boldbold,Arial,Helvetica;
	padding-bottom: 5px;
}

.uzenet_mezok input{
	background: #e1e1e1;
	border: none;
	border-radius: 2px;
	color:  #616161;
	font-size: 120%;
	padding: 10px;
	width: 100%;
}

.uzenet_mezok input:focus, .uzenet_text textarea:focus{
	background:rgba(93, 197, 231, 0.3);
}

.uzenet_text{
	padding: 0 0 25px 0;
}

.uzenet_text textarea{
	background: #e1e1e1;
	border: none;
	border-radius: 2px;
	color:  #616161;
	font-size: 120%;
	width: 100%;
	padding: 10px;
	height: 200px;
	font-size: 110%;
	font-family: bariol_boldbold,Arial,Helvetica;
}

.uzenet_gombok{
	text-align: center;
}

.uzenet_gombok button{
	font-family: bebas_neueregular, Arial, Helvetica;
	font-size: 250%;
	padding: 10px 30px;
	background: #616161;
	color: #e1e1e1;
	margin: 0 10px;
	border-radius: 2px;
	border: none;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}

.uzenet_gombok button:hover{
	background:rgba(93, 197, 231, 1);
	color: #fff;
}

.foot_menu ul{
	width: 90%;
	text-align: center;	
	margin: 30px auto;
}

.foot_menu ul li{
	display: inline;
	margin: 0 10px;
}

.foot_menu ul li a{
	color: #616161;
	text-decoration: none;
	font-size: 150%;
	font-family: bariol_boldbold,Arial,Helvetica;
}

.foot_menu ul li:nth-of-type(1) a:hover{
	color: #5dc5e7;
}

.foot_menu ul li:nth-of-type(2) a:hover{
	color: #4fb6b7;
}

.foot_menu ul li:nth-of-type(3) a:hover{
	color: #84cc6d;
}

.foot_menu ul li:nth-of-type(4) a:hover{
	color: #f0138a;
}

.foot_menu ul li:nth-of-type(5) a:hover{
	color: #00ff90;
}

.foot_menu ul li:nth-of-type(6) a:hover{
	color: #bcbcbc;
}

.foot_menu ul li a:hover{
	text-decoration: underline;
}

.copyright{
	width: 50%;
	margin: 0 auto;
	background: #f5f5f5;
	border-radius: 2px;
	padding: 15px;
	text-align: center;
}

.copyright p{
	color: #616161;
	font-size: 120%;
}

.copyright h1{
	color: #343739;
	font-style: italic;
	font-weight: bold;
	font-size: 400%;
}

.copyright h1 span{
	font-weight: normal;
}

.foor_cam{
	height: 330px;
	width: 100%;
	background: url(pict/foot_cam.png) no-repeat center bottom;
}

@media only screen and (min-width: 1281px){

	.wrapper{
		width: 75%;
	}
	.container{
		margin: 0 10%;
	}
	.my-sticky-element.stuck{
		margin: 0 10%;
		width: 80%;
	}

}

@media only screen and (max-width: 1080px){
	
	.my-sticky-element.stuck nav {
		background-size: 120px auto;	
	}
	.header{
		background-position: -45px top, center 63px;
	}
}

@media only screen and (max-width: 1000px){

	.my-sticky-element.stuck nav {
		background: none;
	}
	nav ul{
		text-align: center;
	}
	
	nav ul li{
		display: inline-block;
		float: none;
	}
}	

@media only screen and (max-width: 963px){
	.ref{
		margin: auto;
	}
	
	
	.miert{
		text-align: center;
	}
}


@media only screen and (max-width: 963px) and (min-width: 873px){
	
	.logo_big h1 {
	    font-size: 60pt;
	    right: 120px;
	    top: 104px;
	}
	.logo_big h1 span:nth-of-type(2) {
	    letter-spacing: 3.5px;
	}
}

@media only screen and (max-width: 820px){
	.ikon, .ikon_cim{
		margin: auto;
	}
	.szoveg{
		padding: 2em;
	}
	.miert{
		text-align: center;
		font-size: 400%;
	}
}

@media only screen and (max-width: 873px){
	.header, .stuck, .sticky-wrapper{
		display: none;
	}
	
	.header_mobil{
		display: block;
	}
	
	.ceginfo{
		margin-top: 0;
	}
}

/* News */
.news-slider {
  /* Style the actual content */
}
.news-slider .text-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1em;
  width: 30%;
  height: 100%;
}
.news-slider .text-content h2 {
  margin: 0;
}
.news-slider .text-content p {
  margin: 1em 0;
}
.news-slider .text-content a.button-link {
  padding: 0.25em 0.5em;
  position: absolute;
  bottom: 1em;
  right: 1em;
}
.news-slider .image-content {
  line-height: 0;
}
.news-slider .image-content img {
  max-width: 100%;
}
.news-slider .news-pager {
  text-align: right;
  display: block;
  margin: 0.2em 0 0;
  padding: 0;
  list-style: none;
}
.news-slider .news-pager li {
  display: inline-block;
  padding: 0.6em;
  margin: 0 0 0 1em;
}
.news-slider .news-pager li.sy-active a {
  color: #31ace2;
}
.news-slider .news-pager li a {
  font-weight: 500;
  text-decoration: none;
  display: block;
  color: #222;
}