* {
    image-rendering: -webkit-optimize-contrast;
}
*:focus {
    outline: none !important;
}

@font-face {
  font-family: 'HKGrotesk-Regular';
  src: url('fonts/HKGrotesk-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/HKGrotesk-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HKGrotesk-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HKGrotesk-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/HKGrotesk-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HKGrotesk-Regular.svg#HKGrotesk-Regular') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'HKGrotesk-Light';
  src: url('fonts/HKGrotesk-Light.eot'); /* IE9 Compat Modes */
  src: url('fonts/HKGrotesk-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HKGrotesk-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HKGrotesk-Light.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/HKGrotesk-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HKGrotesk-Light.svg#HKGrotesk-Light') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'HKGrotesk-Medium';
  src: url('fonts/HKGrotesk-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/HKGrotesk-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HKGrotesk-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HKGrotesk-Medium.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/HKGrotesk-Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HKGrotesk-Medium.svg#HKGrotesk-Medium') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'HKGrotesk-SemiBold';
  src: url('fonts/HKGrotesk-SemiBold.eot'); /* IE9 Compat Modes */
  src: url('fonts/HKGrotesk-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HKGrotesk-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HKGrotesk-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/HKGrotesk-SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HKGrotesk-SemiBold.svg#HKGrotesk-SemiBold') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'HKGrotesk-Bold';
  src: url('fonts/HKGrotesk-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/HKGrotesk-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HKGrotesk-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HKGrotesk-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/HKGrotesk-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HKGrotesk-Bold.svg#HKGrotesk-Bold') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'HKGrotesk-Black';
  src: url('fonts/HKGrotesk-Black.eot'); /* IE9 Compat Modes */
  src: url('fonts/HKGrotesk-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HKGrotesk-Black.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/HKGrotesk-Black.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/HKGrotesk-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HKGrotesk-Black.svg#HKGrotesk-Black') format('svg'); /* Legacy iOS */
}

body {
	font-family: 'HKGrotesk-Regular', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5em;
	color: #003612;
}
body.home {
	background-image: url('images/bg-makk-lepke-virag-p.jpg');
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center top;
}
img {
	max-width: 100%;
	height: auto;
}
.wrap {
	max-width: 1600px;
	margin: 0 auto;
}
.iwrapper {
	position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}
.iwrapper iframe {
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
a {
	color: #003612;
}
a:hover {
	color: #000;
}
body.page-template #main {
    margin-top: 170px;
}
body.home #main {
    margin-top: 1rem;
}
.single-post #main, .single-tudosturak #main {
    margin-top: 50px;
}
body.page-template-page-nosidebar .wrap {
    min-height: calc(100vh - 735px);
}

/*** == FONTS == ***/
h1, h2, h3 {
    color: #000;
}
h1, h2 {
    font-size: 3rem;
    text-transform: uppercase;
}
h3 {
    margin-bottom: 30px;
}
strong {
    font-family: 'HKGrotesk-Bold';
}
.sblack {
    font-family: 'HKGrotesk-Black', Helvetica, Arial, sans-serif;
    letter-spacing: 0.15rem;
}
/*** == ELEMENTS == ***/
/* colors */
.white {
    color: #fff !important;
}
.yellow {
	color: #ffb017 !important;
}
.green {
    color: #003612 !important;
}
.bg-white {
    background-color: #fff !important;
}
.bg-yellow {
	background-color: #ffb017 !important;
}
.bg-darkgrey {
    background-color: #2C2C2C !important;
    color: #fff;
}
.bg-darkgreen {
    background-color: #0f271e !important;
    color: #fff;
}
.bg-darkgrey h2, .bg-darkgreen h2 { 
    color: #fff;
}
.boxshadow {
    box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.2);
}
/* box */
.box, .box a {
    color: #fff;
}
.border-box {
    border: 1px solid #e2e2e2;
    /*border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;*/
}
.border-box p {
    margin-bottom: 0;
}
/* video */
.iwrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}
.iwrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/* readmore */
.readmore {
   /* position: relative;
    top: 30px;*/
    margin: -27px 0 0 20px;
}
a.btn {
    background-color: #fff;
    font-family: 'HKGrotesk-Black', Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #003612;
    border-radius: 0;
    text-transform: uppercase;
    padding: 17px 30px 16px 30px;
}
a.btn:hover {
    background-color: #ffffffaa;
    color: #003612;
}
a.btn.bg-yellow:hover {
    background-color: #0f271e !important;
    color: #fff;
}
/* date */ 
.date {
    margin-top: -5px;
}
.date span, .where span {
    font-size: 1.4rem;
}
.day {
    font-size: 2.8rem;
    /*margin-top: 5px;*/
    line-height: 1;
}
hr {
    background-color: #fff;
    height: 2px;
    border: none;
    opacity: 1;
}
.badge {
    width: 75px;
    height: auto;
    background-image: none;
    top: -5px;
    left: 36px;
}

/** == ANIM == **/
.anim {
    position: absolute;
    right: 10vw;
}
.circle {
  height: 200px;
  width: 200px;
  background-color: #FFB017dd;
  border-radius: 50%;
  display: inline-block;
  animation: fade-in ease-in 6s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



/*** == HEADER == ***/
body.home header {
	/*height: 40vw;*/
}
header .icons img {
    height: 55px;
    width: auto;
}
header .icons .hunren img {
    height: 45px;
    width: auto;
}
body.home .wrap-brand {
    margin-bottom: 125px;
}
.social-icons svg {
    width: auto;
    height: 40px;
}
/* nav */
.navbar {
    background-color: #ffb017;
    background-image: none !important;
}
body.home .navbar {
    background-color: transparent;
}
body.home .navbar-nav {
    background-color: #fff;
}
.navbar-brand {
    text-align: center;
    position: absolute;
    left: 50px;
}
body.home .navbar-brand {
    position: static;
}
.navbar-brand img {
    height: 150px;
    width: auto;
}
.brand-logo img {
    width: 295px;
    height: auto;
}
.nav-link {
    font-family: 'HKGrotesk-Black', Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #000;
}
body.home .nav-link {
    color: #000;
}

/*** == MAIN CONTAINER == ***/

/** home **/
body.home main {
    background-image: url('images/bg-bogyo-virag-denever.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
body.home .tudos {
    background-image: url('images/bg-meh-bogyo.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    padding-bottom: 70vh;
}
.title-row {
    font-family: 'HKGrotesk-Black', Helvetica, Arial, sans-serif;
    color: #fff;
}
.jegy {
   padding: 1.5rem 4rem 1.5rem 2rem;
   box-shadow: 5px 6px 10px #555;
   position: absolute;
   bottom: 105px;
   right: 0px;
}
.jegy a {
    font-size: 1.6rem;
}
.kertprog .yellowwrap {
    overflow: hidden;
}
.kertprog h2, h2.big-title {
    font-size: 4.5rem;
}
.kertprog h3 a {
    font-size: 3rem;
    color: #000;
}
.kertprog {
    font-size: 1.2rem;
    line-height: 1.4;
}
.bubi {
    display: inline-block;
    border-top-left-radius: 350px;
    border-top-right-radius: 350px;
    background-color: #ffb017;
    text-align: center;
    position: absolute;
    top: -90px;
    right: 12px;
    width: 188px;
    /*height: 90px;*/
}
.numb {
    font-family: 'HKGrotesk-Bold', Helvetica, Arial, sans-serif;
    position: relative;
    top: 30px;
}
.numb .month {
    font-size: 1.8rem;
    line-height: 1;
}
.numb .day {
    font-size: 4.5rem;
    line-height: 1;
}
.archivum {
    height: 1100px;
    position: relative;
}
.archivumwrap {
    position: absolute;
    bottom: 20vh;
    padding: 0 15px;
}
/** tudos **/
body.page-tudos {
    background-image: url('images/bg-lepke.jpg');
    background-repeat: no-repeat;
    background-size: 35%;
    background-position: 86% top;
}
.entry-header {
    line-height: 1.6;
}
.single-tudosturak .post-thumbnail img {
    max-width: 80%;
}
body.page-prog {
    background-image: url('images/bg-virag.jpg');
    background-repeat: no-repeat;
    background-size: 26%;
    background-position: 86% top;
}

/** podcast **/
body.page-podcast {
    background-image: url('images/bg-virag.jpg');
    background-repeat: no-repeat;
    background-size: 35%;
    background-position: 86% top;
}
.box-title h3 {
    margin-bottom: 15px;
}
/** video **/
body.page-video {
    background-image: url('images/bg-virag2.jpg');
    background-repeat: no-repeat;
    background-size: 26%;
    background-position: 86% top;
}
/** kapcsolat **/
body.page-id-16 {
    background-image: url('images/bg-bogyo.jpg');
    background-repeat: no-repeat;
    background-size: 26%;
    background-position: 86% top;
}

/*** == FOOTER == ***/
.footer-top {
    background-color: transparent !important;
    background-image: url('images/footer-border3.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 82px;
    text-align: right;
}
.footer-top img {
    width: 100px;
    height: auto;
    margin-right: 50px;
}
footer {
    background: transparent url('images/bg-footer2.png') repeat;
    color: #99979c;
    font-size: 85%;
    letter-spacing: 0.08em;
}
footer a {
    color: #99979c;
}
footer h4 {
    font-family: 'HKGrotesk-Bold', Helvetica, Arial, sans-serif;
    color: #f2e3d7;
    font-size: 18px;
    letter-spacing: 0.08em;
}
footer .link {
    color: #99979c;
    margin: 0 0 0 8px;
}
.textwidget {
    position: relative;
}
#footer-widget {
    padding-top: 35px;
}
#custom_html-4 {
    margin-bottom: 50px;
}
.footer-logo, .footer-logo-oko {
    width: 200px;
    height: auto;
}
.footer-logok {
    padding: 0 15px;
    margin-top: 15px;
}
.footer-logok img {
    width: auto;
    height: 56px;
    margin: 0 8px;
}
.social {
    position: absolute;
    left: -178px;
}
.social img {
    width: 65px;
    height: auto;
    margin: 0 10px;
}

/** === RESPONSIVE === **/

@media only screen and (max-width: 1599px) {
    .archivum {
        height: 800px;
    }
    .single-post .container {
        margin-left: 150px;
    }
    body.home .tudos {
        padding-bottom: 50vh;
    }
}

@media only screen and (max-width: 1399px) {
    .navbar-brand {
        left: 25px;
    }
}
@media only screen and (max-width: 1199px) {
    .tudos .item:nth-child(3) {
        display: none;
    }
     .archivum {
        height: 600px;
    }
}
@media only screen and (max-width: 991px) {
    body.home .wrap-brand {
      margin-bottom: -30px;
    }
    .navbar-brand img {
      height: 110px;
      width: auto;
    }
    .navbar-brand {
        left: 10px;
    }
    body.page-template #main {
        margin-top: 120px;
    }
    .single-tudosturak .post-thumbnail img {
      max-width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    h1, h2 {
        font-size: 2.5rem;
    }
    .intro {
        margin-left: auto;
        margin-right: auto;
    }
    .single-post .container {
        margin-left: 0px;
    }
    header .icons img {
        height: 35px;
        width: auto;
    }
    header .icons .hunren img {
      height: 30px;
      width: auto;
    }
    .social-icons svg {
      width: auto;
      height: 25px;
    }
    /* navbar */
    .navbar {
      background-color: transparent;
    }
    body.home .navbar-nav {
      background-color: #FFB017;
    }
    .navbar-brand {
        right: 10px;
        left: unset;
    }
    .navbar-brand img {
        height: 83px;
        width: auto;
    }
    .navbar-toggler {
        border: none;
        position: absolute;
        top: 30px;
        left: 30px;
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar-toggler-icon {
        background: url(images/icon-menu-yellow.svg);
        background-repeat: no-repeat;
        width: 50px;
    }
    .navbar-collapse {
        position: fixed;
        top: 76px;
        left: 0;
        padding: 15px;
        width: 100%;
        background: #FFB017;
        max-width: 320px;
        /*height: 100vh;*/
        overflow-y: auto;
    }
    .navbar-collapse.collapsing {
        height: 100%;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
        z-index: 9;
    }
    #header .navbar-nav .nav-link {
        font-size: 16px;
        padding-left: 15px;
        line-height: 1.2em;
    }
    .dropdown-item.active, .dropdown-item:active {
        background-color: #FFB017 !important;
    }
    body.page-template #main {
        margin-top: 0px;
    }
    body.page-podcast {
      background-position: 70% top;
    }
    body.page-tudos, body.page-prog, body.page-video, body.page-template-page-nosidebar {
        background-position: 70% top;
    }
    .kertprog h2, h2.big-title {
      font-size: 3rem;
    }
    .bubi {
        width: 165px;
        top: -76px;
    }
    .numb .day {
      font-size: 3.5rem;
      line-height: 1;
    }
    .yellowwrap {
        padding-bottom: 100px;
    }
    .jegywrap {
        position: relative;
    }
    .jegy {
        bottom: -55px;
    }
    body.home .tudos {
        padding-bottom: 18vh;
    }
    .archivumwrap {
        position: static;
        margin-top: 40px;
    }
    .single-post #main {
      margin-top: 65px;
    }
    .page-template header, .single-tudosturak header {
        height: 100px;
    }
    body.home header {
      height: 40vw;
    }
}
@media only screen and (max-width: 575px) {
    body.home header {
        height: 23vh;
    }
    .page-template header, .single-tudosturak header {
        height: 124px;
    }
    .navbar-toggler {
        top: 32px;
        left: 16px;
    }
    body.home .navbar-toggler {
        top: 98px;
    }
    h1 {
        font-size: 2.1rem;
    }
    .kertprog h3 a {
      font-size: 2rem;
      color: #000;
    }
    .kertprog h2, h2.big-title {
        font-size: 2rem;
    }
    .numb .month {
        font-size: 1.4rem;
    }
    .numb .day {
        font-size: 2.5rem;
    }
    .bubi {
        width: 106px;
        top: -104px;
        border-top-left-radius: 325px;
        border-top-right-radius: 325px;
    }
    .date span, .where span {
      font-size: 1.2rem;
    }
    .border-box ul li {
        margin-bottom: 10px;
    }
    .jegy {
        bottom: -83px;
    }
    body.page-tudos, body.page-prog, body.page-video, body.page-template-page-nosidebar {
      background-image: url('images/bg-bogyo.jpg');
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: center top;
    }
    .footer-top img {
        margin-right: 0;
    }
}