*{ font-family: 'Barlow Semi Condensed', sans-serif; box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; font-size: 13pt; background: #ffffff; color: #222222; text-align: center; padding: 0; margin: 0; }
img { border: 0px; }
a, a:visited { text-decoration: none; color: #222222; outline: none; }
a:hover { text-decoration: none; color: #666666; }

#content img { max-width: 98% !important; height: auto; }

h1 {
    color: #444444;
    font-size: 23pt;
    clear: both;
    display: block;
    margin-bottom: 15px;
    text-align: center;
    font-weight: normal;
}

table td{ vertical-align: top; }

#content input { border: 1px solid #cccccc; }
.btn { border: 0 !important; color: #ffffff; background: #446688; padding: 3px 5px 3px 5px; text-align: center; display: block; margin: 5px; }

div#main { text-align: left; margin: auto; background: #ffffff; z-index: 2; }

#hamburger { display: none; position: absolute; left: 10px; top: 10px; background: transparent url('images/hamburger.png') center center no-repeat; background-size: contain; width: 25px; height: 25px; z-index: 100; filter: invert(1); }

div#head { height: 180px; background: #ffffff url('images/karaszi_logo.png') center center no-repeat; overflow: hidden; }
div#topmenu { color: #444444; background: #dddddd; font-size: 12pt; text-align: center; z-index: 99; }
div#topmenu a { color: #444444; display: inline-block; vertical-align: middle; padding: 10px 30px 10px 30px; font-weight: 300; }
div#content  { max-width: 1000px; width: 100%; margin: auto; padding: 30px 10px 30px 10px; min-height: calc(100vh - 289px);}
div.placeholder { height: 0px; font-size: 1px; clear: both; overflow: hidden;}
div#foot { background: #000000; clear: both; line-height: 12pt; padding: 20px; color: #dddddd; font-size: 8pt; text-align: center; }
div#foot a { color: #dddddd; }

.b { font-weight: bold;  }
.i { font-style: italic; }
.u { text-decoration: underline !important; }
.r { text-align: right;  }
.l { text-align: left;   }
.c { text-align: center; }
.hid,
.h { display: none; }

form.search { margin-bottom: 30px; text-align: center; }
form.search input { width: 300px; }
form.search input.btn { width: auto; }
.search_element { display: block; margin-bottom: 10px; }
.search_element a { display: block; font-weight: bold; color: #0000dd; }
.search_element a:hover { text-decoration: underline; }
.search_element span { display: block; font-size: 9pt; padding: 5px; }

#i_head { width: 100%; background: transparent; height:500px; max-width: 1920px; position: relative; margin-bottom: 10px; margin-left: auto; margin-right: auto; }
#i_head span { display: block; z-index: 30; position: absolute; bottom: 30px; left: calc(50% - 350px); color: #ffffff; width: 100%; max-width: 700px; text-align: center; 
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
#i_head span:hover { margin-bottom: 10px; } 
#i_head h1 { font-weight: normal; color: #ffffff; }
#i_head img {     clear: both;     display: inline-block;     margin-top: 20px; }


#i_balls { height: 20px; text-align: center; margin: 20px 0 20px 0; }
span.i_ballsel { display: inline-block; background: transparent url('images/dot1.png') center center no-repeat; width: 20px; height: 20px; }
span.i_ball { display: inline-block; background: transparent url('images/dot2.png') center center no-repeat; width: 20px; height: 20px; }
#i_content { text-align: center; padding-top: 10px; }

#i_block1,
#i_block2,
#i_block3 {
    display: inline-block;
    vertical-align: middle;
    width: 33.3%;
    height: 240px;
    padding-top: 90px;
    text-align: center;
    color: #ffffff;
    font-size: 17pt;
    margin: 20px 0 20px 0;
    position: relative;
}


#i_block1 div,
#i_block2 div,
#i_block3 div {
    position: absolute;
    bottom: -30px;
    left: calc(50% - 40px);
    background: transparent url('images/magnifier_grey.png') center center no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#i_block1:hover div,
#i_block2:hover div,
#i_block3:hover div {
    position: absolute;
    bottom: -20px;
    left: calc(50% - 40px);
    background: transparent url('images/magnifier_black.png') center center no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
}

#i_blocks { width: 100%; max-width: 1000px; margin: auto; padding-bottom: 40px; }
#i_block1 { background: transparent url('images/kor_foto1.png') center center no-repeat; background-size: contain; }
#i_block2 { background: transparent url('images/kor_foto2.png') center center no-repeat; background-size: contain; }
#i_block3 { background: transparent url('images/kor_foto3.png') center center no-repeat; background-size: contain; }


#t_block1,
#t_block2,
#t_block3,
#t_block4 {
    display: inline-block;
    vertical-align: middle;
    width: 24%;
    height: 240px;
    padding-top: 90px;
    text-align: center;
    color: #ffffff;
    font-size: 15pt;
    margin: 20px 43px;
}

#t_block1 a,
#t_block2 a,
#t_block3 a,
#t_block4 a{ color: #ffffff; display: block; padding-left: 20px; padding-right: 20px;  margin-left: auto; margin-right: auto; }

#t_blocks { width: 100%; max-width: 1000px; margin: auto; }
#t_block1 { background: transparent url('images/keretek.png') center center no-repeat; background-size: contain; padding-top: 105px; }
#t_block2 { background: transparent url('images/lencsek.png') center center no-repeat; background-size: contain; }
#t_block3 { background: transparent url('images/kontakt.png') center center no-repeat; background-size: contain; padding-top: 105px; }
#t_block4 { background: transparent url('images/napszemuk.png') center center no-repeat; background-size: contain; padding-top: 105px; }

div#uzleteink{
    margin-top: 30px;
    margin-bottom: 50px;
}

div#uzleteink img{
    padding: 10px;
    margin: 10px;
}

#bemutatkozo{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#i_newsblock { width: 100%; padding: 20px 0 60px 0; background: #ffffff; }
#i_newsblockb { width: 100%; max-width: 1000px; margin: auto; }
.i_news { width: 33.3%; height: 300px; display: inline-block; vertical-align: middle; apadding-top: 200px; font-size: 12pt; position: relative; padding-left: 20px; padding-right: 20px;}
.i_news a.readbtn{
    position: absolute;
    bottom: -25px;
    left: calc(50% - 20px);
    background: transparent url('images/magnifier_grey.png') center center no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.i_news:hover a.readbtn{
    position: absolute;
    bottom: -5px;
    left: calc(50% - 20px);
    background: transparent url('images/magnifier_black.png') center center no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
}

.newsit{ overflow: hidden; }


.stickymenu { width: 100%; position: fixed !important; top: 0; margin: auto; z-index: 50; }
::selection      { background: #aaaaaa; }
::-moz-selection { background: #aaaaaa; }

/*
@media screen and (min-width: 1920px){
    #i_head,
    {
	margin-left: calc(50% - 960px);
    }
}
*/
@media screen and (max-width: 1000px){
    #t_block1,
    #t_block2,
    #t_block3,
    #t_block4 { font-size: 12pt; }

    table{ width: auto !important; table-layout: fixed; } 
    td{ width: auto !important; } 
    table, thead, tbody, th, td, tr { 
	display: block;
	margin-left: auto;
	margin-right: auto;
    }
    td{ height: auto; }


    div#topmenu { font-size: 10pt; }
    div#topmenu a { padding: 5px 10px 5px 10px; }

    div#i_content{ padding: 20px; }
}


@media screen and (max-width: 750px){
    body { font-size: 10pt; }
    div#head { height: 80px; background-size: contain; margin: 10px 0 10px 0; }
    
    #i_head { height: 300px; }
    #i_head span { bottom: 20px; left: 0; width: 100%; max-width: 100%; }
    #i_block1 { width: 32%; margin-right: 1%; height: 200px; padding-top: 90px; font-size: 13pt; }
    #i_block2 { width: 32%; margin-right: 1%; height: 200px; padding-top: 80px; font-size: 13pt; }
    #i_block3 { width: 32%; margin-right: 0; height: 200px; padding-top: 80px; font-size: 13pt; }

    #t_block1,
    #t_block2,
    #t_block3,
    #t_block4 { font-size: 12pt; width: 49%; margin-left: auto; margin-right: auto; }

    #t_block1 a,
    #t_block2 a,
    #t_block3 a,
    #t_block4 a{ padding-left: 40px; padding-right: 40px; }

    #content { overflow: hidden; }
}

@media screen and (max-width: 550px){
    div#topmenu { display: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; }
    div#topmenu a { width: 100%; clear: both;padding: 15px 0 15px 0; font-size: 12pt; }
    #hamburger { display: block; }
    #i_block1,
    #i_block2,
    #i_block3 { width: 100%; }
    .i_news { display: block; margin-left: auto; margin-right: auto; margin-top: 20px; width: 90%; margin-bottom: 30px; }

    #t_block1,
    #t_block2,
    #t_block3,
    #t_block4 { width: 100%; display: block; }

    #t_block1 a,
    #t_block2 a,
    #t_block3 a,
    #t_block4 a{ width: 50%; padding-left: 20px; padding-right: 20px; }

    div.news_list{ 
	padding: 0 !important; 
    }
    div.news_list a{ 
	margin-left: calc(50% - 120px);
	amargin-left: auto !important; 
	amargin-right: auto !important; 
	
    }

    div#i_content{ font-size: 12pt; }
}

.erfalogo{
    width: 10%;
    position: fixed;
    bottom: 0;
    right: 0;
}