body {
    /*background-color: #5784b4;
    background-color: #1b242f;*/

    background-color: #F7F7F7;
}

a {
    cursor: pointer;
}

.hidden {
    display: none;
}

/* Hero section */
/*
#hero {
    /*height: 832px;*/
    /*height: 100vh;
    /*padding-top: 280px;*/
    /*background-color: #5784b4;
    box-sizing: border-box;*/
/*}
/*
#hero .content {
    padding-top: 0px;
    padding-bottom: 0px;
}

#hero .content:after {
    content: '';
    width: 350px;
    height: 2px;
}

#hero .profile {
    position: absolute;
    top: calc(54vh - 158px)
}

#hero .picture {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-bottom: 20px;

    background: url('https://cdn.rolandhorvath.hu/site/assets/images/logo/picture-isef.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#hero .greetings {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    line-height: 46px;
    margin: 0;
    float: left;
    /*margin-left: -54px;*/
/*}
/*
#hero .screenshots {
    position: relative;
    float: right;
    top: -190px;
    right: -132px;
    width: 570px;
    height: 690px
}*/


.badge {
    width: 132px;
    height: 40px;
    margin-right: 8px;
    display: block;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.badge.app-store {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/badges/app-store.png');
}

.badge.google-play {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/badges/google-play.png');
}

.badge.producthunt {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/other/producthunt.png');
    width: 100px;
    height: 64px;
    margin-top: -12px;
}



#hero {
		/* height: 100vh; */
		position: relative;
    height: calc(100vh - 150px);

    font-weight: 600;
    font-size: 60px;
    color: white;
    letter-spacing: -1.65px;
    line-height: 60px;
}

#hero .bold {
    font-weight: 700;
}

#hero .content {
    /* padding-top: calc(50vh - 170px); */
    padding-top: calc(100vh - 340px - 200px);
    padding-bottom: 0px;
    padding-left: 72px;
		max-width: 1830px;
		height: auto;
}

#hero .container {
    width: 772px;
    height: 252px;
}

#hero .label.name {
    margin-bottom: 4px;
    margin-left: -4px;
    overflow: hidden;
    height: 68px
}

#hero.animated .label.name p {
    animation: reveal 1.5s ease-in-out;
}

@keyframes reveal {
    0% {
        margin-top: 100px;
    }
    100% {
        margin-top: 0px;
    }
}

#hero .label {
    margin-bottom: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
}

#hero .label.designer {
    float: left;
    display: block;
}

#hero .label.designer text,
#hero .label.developer span {
  font-family: 'Rutan';
  font-weight: 800;
  font-size: 93px;
  letter-spacing: -1.8px;
}

#hero .label.designer text {
    fill: white;
    /* fill-opacity: 1; */
}

#hero.animated .label.designer text {
  stroke-dasharray: 230%;
  stroke-dashoffset: 230%;
  animation: draw 6.5s forwards 0.5s, fade-in 0.75s forwards linear 6.25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  fill-opacity: 0;
}

#hero .label.developer span {
    margin-left: -5px;
    margin-right: 16px;

		/* -webkit-text-fill-color: transparent; */
    /* -webkit-text-stroke-width: 2px; */
    /* -webkit-text-stroke-color: white; */
}

#hero .cursor {
  display: inline-block;
  height: 100%;
  width: 4px;
  /* Change colour of Cursor Here */
  background-color: white;
  z-index: 1;
  opacity: 0;
}

#hero.animated .cursor {
  animation: flash 0.5s none 0.75s 11.5 alternate;  
}

@keyframes flash{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@media (max-width: 550px) {

}



@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
    0% {
      fill-opacity: 0
    }
    100% {
      /* fill-opacity: 1; */
      /* stroke-opacity: 0; */
    }
}


#hero .label.developer {
    width: 564px;
    height: 70px;
    /*background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/developer-label-white.png');
    background-size: cover;
    white-space:nowrap;
    overflow:hidden;
    display: block;
    float: left;
    animation: type 4s;
    animation-fill-mode: forwards;*/
}

@keyframes type{
    0%    { width: 0px; }
    10.99%{ width: 0px; }
    11%   { width: 60px; }
    21.99%{ width: 60px; }
    22%   { width: 116px; }
    32.99%{ width: 116px; }
    33%   { width: 182px; }
    43.99%{ width: 182px; }
    44%   { width: 234px; }
    54.99%{ width: 234px; }
    55%   { width: 284px; }
    65.99%{ width: 284px; }
    66%   { width: 360px; }
    76.99%{ width: 360px; }
    77%   { width: 420px; }
    87.99%{ width: 420px; }
    88%   { width: 472px; }
    98.99%{ width: 472px; }
    99%   { width: 534px; }
    100%  { width: 534px; }

    /*

    0%    { width: 0%; }
    10.99%{ width: 0%; }
    11%   { width: 11%; }
    21.99%{ width: 11%; }
    22%   { width: 21.7%; }
    32.99%{ width: 21.7%; }
    33%   { width: 34%; }
    43.99%{ width: 34%; }
    44%   { width: 43.8%; }
    54.99%{ width: 43.8%; }
    55%   { width: 53%; }
    65.99%{ width: 53%; }
    66%   { width: 67.4%; }
    76.99%{ width: 67.4%; }
    77%   { width: 78.6%; }
    87.99%{ width: 78.6%; }
    88%   { width: 88.3%; }
    98.99%{ width: 88.3%; }
    99%   { width: 100%; }
    100%  { width: 100%; }

    */
}

#hero .label.and span {
    font-family: 'Times New Roman';
    font-weight: 600;
    font-size: 74px;
    line-height: 80px;
    margin-right: 0px;
    width: 70px;
    height: 70px;
    display: block;
}

#hero.animated .label.and span {
    margin-top: 100px;
    animation: reveal 1.5s ease-in-out 0.5s forwards;
}

#hero .label.and {
    width: 70px;
    height: 70px;
    margin-left: 16px;
    overflow: hidden;
}

#hero .background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}

#hero .background .base {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #101010;
}

#hero .background .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.25;
}

#hero .background .image {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	object-fit: cover;
	opacity: 0;
}

#hero .background .image.nudge {
    /* background-position-x: 50%; */
    padding-left: 20%;
}

#hero .background .image.active {
    opacity: 1;
    animation: image-open 1.15s ease-out forwards;
}

#hero.scale .background .image.active {
    transform: scale(1.025);
    animation: image-open-scale 1.15s ease-in-out forwards;
}

@keyframes image-open-scale {
    0% {
        opacity: 0;
        transform: scale(1.025)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes image-open {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*#hero .label.developer:after {
    content: '.';
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 108px;
    line-height: 106px;
    float: right;
    margin-right: -48px;
}*/


#hero .scroll-icon .icon {
  width: 20px;
  height: 32px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
  border-radius: 25px;
  opacity: 0.5;
  margin: 0 auto;
  position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 48px;
    height: 32px;
    display: none;
}
#hero .scroll-icon .icon:before {
  content: '';
  width: 4px;
  height: 6px;
  background: #fff;
  opacity: 1;
  margin: 8px;
  border-radius: 4px;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: scroll;
  float: left;
}
@keyframes scroll {
  0% {
    opacity: 0
  }
  25% {
    opacity: 1;
    transform: translateY(0px);
  }
  35% {
    opacity: 1;
    transform: translateY(0px);
  }
  45% {
    opacity: 1;
  }
  85% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}


#hero .location {
    position: absolute;
    bottom: 60px;
    right: 64px;
    height: 36px;
    opacity: 0;
    animation: location-fade 0.75s 0.5s forwards;
    transition: 0.5s
}

#hero .stepper {
    position: absolute;
    bottom: 52px;
    left: 64px;
    height: 44px;
    opacity: 0;
    animation: location-fade 0.75s 0.5s forwards;
}

#hero .stepper .left {
    width: 32px;
    height: 32px;
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/icons/left-chevron.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: -10px;
    opacity: 0.75;
    cursor: pointer;
    display: none
}

#hero .stepper .right {
    width: 32px;
    height: 32px;
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/icons/right-chevron.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    opacity: 0.75;
    cursor: pointer;
    z-index: 9;
}

@keyframes location-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

#hero .location:not(.no-icon):before {
    content: '';
    display: block;
    margin-left: -28px;
    width: 18px;
    height: 18px;
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/icons/location.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

#hero .location p.main {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.5px;
    line-height: 0.9;
    margin-bottom: 4px;
}
#hero .location p.description {
    font-weight: 600;
    font-size: 16px;
    height: 20px;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.9
}

#hero .location p.alt {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.75
}



/*#hero .screenshots .screenshot {

}

#hero .screenshots .screenshot.top {
    width: 482px;
    height: 428px;
    position: relative;
    right: 58px;
    float: right;
    z-index: 3;

    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/crushmatcher/screenshots/hero.png');
}

#hero .screenshots .screenshot.middle {
    width: 570px;
    height: 520px;
    float: right;
    position: relative;
    margin-top: -390px;
    z-index: 2;

    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/menutrend/screenshots/hero.png');
}

#hero .screenshots .screenshot.bottom {
    margin-top: -390px;
    z-index: 1;
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots/hero.png');
}*/


#particles {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    z-index: -9;
}


/* About section */

#about {
}

#about .content {
	padding-bottom: 48px;
}

#about .title {
    color: #424242;
		margin-bottom: 16px;
}

#about .about {
    max-width: 770px;
    color: #424242;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: 35px;
    margin-top: 10px;
    margin-left: 172px;
}

#about .about a {
	color: #6a6a6a;
	/* text-decoration: none; */
}

#about .me {
    width: 130px;
    margin-right: 32px;
    float: left;
}

#about .me .photo {
    width: 130px;
    height: 130px;
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/photo-2019.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50px;
    margin-top: 16px;
}

#about .me .links {
	display: inline-flex;
	margin-top: 30px;
	width: 100%;
}

#about .me .link {
    width: 28px;
    height: 28px;
    display: block;
    margin: 0 auto;
}

#about .me .link.twitter {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/social-twitter.png');
    background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
    width: 32px;
}

#about .me .link.github {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/social-github.png');
    background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
}

/* Skills section */

#skills {
    /*background-color: #38424b;*/
    color: #404040;
}

#skills .title {
    color: #404040;
}

#skills .content {
    padding-bottom: 40px;
}

#skills .columns {
	display: flex;
	justify-content: space-between;
	margin: 0 -25px;
	padding-top: 30px;
}

#skills .columns ul {
	padding: 0;
	width: 60%;
	margin: 0 25px;
}

#skills .columns ul.inline .stack {
	display: flex;
}

#skills .columns ul.inline .row {
	display: inline-block;
	margin-right: 18px;
}

/* #skills .left-group {
    width: calc(50% - 2px);
    height: 100%;

    padding: 0;
    margin: 0;

    padding-top: 30px;
    box-sizing: border-box;

    display: inline-block;
    float: left;
}

#skills .right-group {
    width: calc(50% - 2px);
    height: 100%;

    padding: 0;
    margin: 0;

    padding-top: 32px;
    padding-left: 56px;
    margin-right: -32px;
    box-sizing: border-box;

    display: inline-block;
} */

#skills .vertical-separator {
    width: 2px;
    height: 396px;
    background-color: #9EA6AE;
    opacity: 0.66;
    margin-top: 32px;
    margin-left: -2px;
    display: inline-block;
    float: left;
}

#skills .row {
    min-height: 24px;
    color: #404040;
    font-family: 'Rutan';
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 32px;
    list-style: none;
}

#skills .row:before {
    content: '';
    display: block;
    background: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/design.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 24px;
    height: 24px;
    float: left;
    margin: 2px 15px 12px 1px;
}

#skills .row.app-dev:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/app-dev.png");
    background-size: contain;
}

#skills .row.design:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/design.png");
    background-size: contain;
}

#skills .row.website:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/website.png");
    background-size: contain;
}

#skills .row.cms:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/cms.png");
    background-size: 22px;
}

#skills .row.api:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/api.png");
    background-size: 20px 16px;
}

#skills .row.database:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/database.png");
    background-size: 16px 20px;
}

#skills .row.learning:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/learning.png");
    background-size: 14px 20px;
}

#skills .row.hq:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/hq.png");
    background-size: contain;
}


#skills .row.unity:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/unity-dark.png");
    background-size: contain;
}

#skills .row.swift:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/swift.png");
    background-size: contain;
}

#skills .row.frontend:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/frontend.png");
    background-size: 26px 17px;

    width: 26px;
    margin-right: 14px;
    margin-left: -1px
}

#skills .row.nodejs:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/nodejs.png");
    background-size: 22px 24px;
    background-size: contain;

    width: 26px;
    margin-right: 14px;
    margin-left: -1px
}

#skills .row.backend:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/backend.png");
    background-size: 28px 24px;

    width: 28px;
    margin-right: 13px;
    margin-left: -2px
}

#skills .row.sketch:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/sketch.png");
    background-size: contain;
}

#skills .row.photoshop:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/photoshop.png");
    background-size: 22px;
}

#skills .row.premiere:before {
    background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/premiere.png");
    background-size: 22px;
}

#skills .row.security:before {
	background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/security.png");
	background-size: 24px;
}

#skills .row.ar:before {
	background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/ar.png");
	background-size: 24px;
}

#skills .row.ship:before {
	background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/ship.png");
	background-size: 24px;
}

#skills .row.vue:before {
	background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/vue.png");
	background-size: 24px;
}

#skills .row.reactnative:before {
	background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/reactnative.png");
	background-size: 24px;
}

#skills .row.nextjs:before {
	background-image: url("https://cdn.rolandhorvath.hu/site/assets/images/icons/skills/nextjs.png");
	background-size: 24px;
}


#skills .row.last {
    margin-bottom: 48px;
}

#skills .row.packages {

}

#skills .row.packages:before {
	display: none;
}

#skills .row.packages span {
	color: #93A3B9;
	font-size: 16px;
	margin-right: 24px;
	display: inline-block;
}


#skills .row .progress {
    width: 180px;
    height: 4px;
    background-color: #9EA6AE;
    margin-top: 11px;
    margin-right: -24px;
    float: right;
		position: relative;
		display: none;
}

#skills .row .progress:before {
    content: '';
    position: absolute;
    width: 180px;
    height: 4px;
    background-color: #404040;
    transform: scaleX(0);
    transform-origin: 0% 0%;
    animation-fill-mode: forwards;
}

#skills .row .progress.load:before {
    animation: progress 1s ease-in-out;
    animation-fill-mode: forwards;
}

#skills .row.unity     .progress:before { width: 94% }
#skills .row.swift     .progress:before { width: 80% }
#skills .row.frontend  .progress:before { width: 92% }
#skills .row.backend   .progress:before { width: 80% }
#skills .row.nodejs    .progress:before { width: 80% }
#skills .row.sketch    .progress:before { width: 94% }
#skills .row.photoshop .progress:before { width: 69% }
#skills .row.premiere  .progress:before { width: 72% }


@media (max-width: 950px) {
    #skills .vertical-separator {
        display: none;
    }

    #skills .left-group {
        width: 100%;
    }

    #skills .right-group {
        padding-left: 0;
        width: 100%;
    }

    #skills .row .progress {
        margin-right: 0px;
    }
}

/* Project section */

/*.project {
    height: 470px;
    background-color: #446485;
}

.project .about {
    float: left;
    margin-top: 40px;
}

.project .app-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    margin-left: -76px;
    margin-top: -2px;
}

.project .app-name {
    height: 36px;
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.87px;
    line-height: 36px;
}

.project .description {
    width: 372px;
    height: 130px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    margin-top: 10px;
    margin-bottom: 24px;
}

#crushmatcher.project .description { width: 374px; }

.project .button {
    height: 18px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 11px 26px 9px 26px;
    border-radius: 100px;
    background-color: #3edc65;
    text-decoration: none;
    margin-left: -3px;
    display: block;
    float: left;
    line-height: 18px;
}

.project .screenshots {
    float: right;
}

.project .screenshots .screenshot {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*------------------*/

/*.project .screenshots.default {
    margin-right: -172px;
    margin-top: -30px;
    float: right;
    display: inline-flex;
}

.project .screenshots.default .screenshot {
    width: 188px;
    height: 384px;
    margin-left: 15px;
}

/*------------------*/

/*.project .screenshots.multi-device {
    margin-right: -90px;
    margin-top: -22px;
    display: inline-flex;
}

.project .screenshots.multi-device .screenshot:nth-child(1) {
    margin-right: -24px;
    float: left;
    width: 489px;
    height: 345px;
}

.project .screenshots.multi-device .screenshot:nth-child(2) {
    margin-top: 202px;
    margin-left: -298px;
    position: absolute;
    width: 352px;
    height: 172px;
}

/*------------------*/

/*#menutrend.project    { background-color: #3fc460; }
#crushmatcher.project { background-color: #e15756; }
#transitnap.project   { background-color: #3c3e5c; }
#mutasd.project       { background-color: #32b2d5; }
#layp.project         { background-color: #333538; }

#menutrend.project    .app-icon { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/menutrend/app-icon.png'); }
#crushmatcher.project .app-icon { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/crushmatcher/app-icon.png'); }
#transitnap.project   .app-icon { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/app-icon.png'); }
#mutasd.project       .app-icon { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/mutasd/app-icon.png'); }
#layp.project         .app-icon { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/layp/app-icon.png'); }

#menutrend.project    .button { background-color: #3edc65; }
#crushmatcher.project .button { background-color: #f17675; }
#transitnap.project   .button { background-color: #5c5e7e; }
#mutasd.project       .button { background-color: #2bcae9; }
#layp.project         .button { background-color: #1f2020; }

#menutrend.project .screenshots .screenshot:nth-child(1) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/menutrend/screenshots/mockup-1.png'); }
#menutrend.project .screenshots .screenshot:nth-child(2) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/menutrend/screenshots/mockup-2.png'); }
#menutrend.project .screenshots .screenshot:nth-child(3) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/menutrend/screenshots/mockup-3.png'); }

#crushmatcher.project .screenshots .screenshot:nth-child(1) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/crushmatcher/screenshots/mockup-1.png'); }
#crushmatcher.project .screenshots .screenshot:nth-child(2) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/crushmatcher/screenshots/mockup-2.png'); }
#crushmatcher.project .screenshots .screenshot:nth-child(3) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/crushmatcher/screenshots/mockup-3.png'); }

#transitnap.project .screenshots .screenshot:nth-child(1) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots/mockup-1.png'); }
#transitnap.project .screenshots .screenshot:nth-child(2) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots/mockup-2.png'); }
#transitnap.project .screenshots .screenshot:nth-child(3) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots/mockup-3.png'); }

#mutasd.project .screenshots .screenshot:nth-child(1) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/mutasd/screenshots/mockup-1.png'); }
#mutasd.project .screenshots .screenshot:nth-child(2) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/mutasd/screenshots/mockup-2.png'); }

#layp.project .screenshots .screenshot:nth-child(1) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/layp/screenshots/mockup-1.png'); }
#layp.project .screenshots .screenshot:nth-child(2) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/layp/screenshots/mockup-2.png'); }
#layp.project .screenshots .screenshot:nth-child(3) { background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/layp/screenshots/mockup-3.png'); }*/

/* Achievements section */

/* Awards an publications */

#awards {
    color: #404040;
}

#awards .content {
    margin: 0 auto;
    padding-bottom: 0px;
    height: 100%;
}

#awards .title {
    font-size: 32px;
    margin-bottom: 0;
    color: #404040
}

#awards .publications .title {
    padding-left: 14px;
}

#awards .show-more {

    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 16px 0;
    color: #404040;
    cursor: pointer;
    width: calc(100%);
    float: right;
}

#awards .section {
    overflow: hidden;
}

#awards .list {
    margin-top: 32px;
    display: flex;
}

#awards .list .header {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .5;
    font-weight: 600;
    margin-bottom: 2px;
}

#awards .list .row {
    width: 100%;
    min-height: 82px;
    position: relative;
    display: flex;
}

#awards .list .row .about {
    width: 100%;
    height: 100%;
    position: relative;
}

#awards .list .row .icon {
    width: 56px;
    margin-right: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#awards .list .row .icon img {
    filter: invert(100%);
    opacity: 0.8
}

#awards .list .row .info {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#awards .list .row .award {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.5px;
}

#awards .list .row .alt {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.65;
    letter-spacing: -0.25px;
}

#awards .list .row .prize {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.5px;
}


#awards .list .row.double {
    height: 94px;
}

#awards .list .row.double .award {
    line-height: 19px;
    margin-top: 16px;
    margin-bottom: 2px;
    max-width: 270px;
}

#awards .list .row.double .prize {
    line-height: 84px;
}

#awards .list .section.extra {
    height: 0;
}



@keyframes progress {
  0% { transform: scaleX(0);}
  100% { transform: scaleX(1); }
}

span.at {
    font-size: 14px;
}

span.copyright {
    font-size: 14px;
}


#videos {
}

#videos .title {
    color: #424242;
    margin-bottom: 40px;
}

#videos .content {
    padding-bottom: 32px;
}

#videos .content .title .notice {
    float: right;
    font-size: 30px;
    opacity: 0.9;
}

#videos .videos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
}

#videos .videos .video {
    margin-bottom: 32px;
    cursor: pointer;
}

#videos .videos .video .thumbnail {
    width: 190px;
    height: 120px;
    background: #525F76;
    box-shadow: 0 2px 24px 0 rgba(147,163,185,0.50);
    border-radius: 6px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.15s;
}

#videos .videos .video .thumbnail:hover {
    transform: scale(1.02);
    cursor: pointer;
}

#videos .videos .video .thumbnail .icon {
    -webkit-backdrop-filter: blur(10px);

    /*box-shadow: 0 0 8px 0 rgba(65,69,82,0.60);*/

    width: 48px;
    height: 48px;

    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/play-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
}

#videos .videos .video .thumbnail .icon.hidden {
    display: none
}

#videos .videos .video .title {

    height: 20px;
    line-height: 20px;
    margin-top: 16px;
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 20px;
    color: #414552;
    letter-spacing: -0.6px;
}

#videos .videos .video .channel {

    height: 16px;
    line-height: 16px;
    margin-top: 6px;
    font-weight: 600;
    font-size: 16px;
    color: #5A697D;
    letter-spacing: -0.47px;
}

#videos .quote {

    font-weight: 600;
    font-size: 25px;
    color: #404040;
    letter-spacing: -1px;
    line-height: 38px;
    max-width: 724px;
    margin: 0 auto;
    margin-top: 40px;
    
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#videos .quote .text {
    max-width: 654px;
}

#videos .quote .text .author {
    font-weight: 500;
    font-size: 21px;
    color: #404040;
    letter-spacing: -1px;
    margin-top: 12px;
}

#videos .quote .text .author img {
    float: left;
    margin-right: 8px
}

#videos .quote .text .author span {
    line-height: 32px;
    height: 32px;
    display: block;
}

#videos .quote .symbol {
    font-weight: 600;
    font-size: 50px;
    color: #404040;
    letter-spacing: -2px;
    line-height: 38px;
}

#videos .quote .symbol:first-of-type {
    align-self: flex-start;
}

#videos .quote .symbol:last-of-type {
    align-self: flex-end;
    margin-bottom: 20px;
}

.articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 820px;
    margin: 0 auto;
    margin-top: 64px;
}

.articles .item {
    width: 164px;
    height: 90px;
    border-radius: 8px;
    flex-basis: 164px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.65;
    transition: 0.2s
}

.articles .item.clickable:hover {
    opacity: 0.8;
    transform: scale(1.01)
}

.articles .item .icon {
    width: 100%;
    height: 100%;
    max-width: 130px;
    max-height: 58px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(100%);
}

.articles .item.computerworld .icon {
    max-width: 160px;
    max-height: 64px;
}
.articles .item.kisalfold .icon {
    max-width: 140px;
}

.articles .item.itbusiness .icon {
    max-height: 42px;
}

.articles .item.origo .icon,
.articles .item.divany .icon {
    max-width: 120px;
}

.articles .item.app-store .icon {
	max-height: 62px;
}

.articles .item.idb .icon {
	max-height: 62px;
}


.video-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #101214;
    z-index: 9999;
    transition: 0.5s;

    display: flex;
    justify-content: center;
    align-items: center;
}

.video-overlay .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #101214;
    z-index: -1;
}

.video-overlay.template {
    opacity: 0;
    display: none;
}

.video-overlay.hidden {
    opacity: 0;
}

.video-overlay .close-button {

    position: fixed;

    top: 54px;
    right: 54px;

    width: 46px;
    height: 46px;

    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/close-icon.png');
    background-size: contain;
    background-repeat: no-repeat;

    cursor: pointer;
}

.video-overlay .content {
    width: 65%;
    max-width: 1600px;
    max-height: 80%;
}

.video-overlay .content .video {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
  
.video-overlay .content .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-overlay .content .row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 32px;
    width: 100%;
}

.video-overlay .info {
    width: 33.3%;
}

.video-overlay .title {

    font-weight: 600;
    font-size: 32px;
    color: #FFFFFF;
    letter-spacing: -0.96px;
    display: block;
    line-height: 32px;
    height: 32px;
}

.video-overlay .date {
    opacity: 0.76;
    font-weight: 600;
    font-size: 20px;
    color: #B5C1CB;
    letter-spacing: -0.59px;
    display: block;

    line-height: 20px;
    height: 20px;
    margin-top: 8px;
}

.video-overlay .apps {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 33.3%;
}

.video-overlay .app {
    width: 50px;
    height: 50px;
    margin: 0 8px;
    border-radius: 6px;
    opacity: 0.6;
    transition: 0.15s;

    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/app-icon.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.video-overlay .app:hover {
    opacity: 1;
}

.video-overlay .channel {   
    width: 33.3%;
}

.video-overlay .channel .icon {
    width: 115px;
    height: 70px;
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/media/soprontv.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(0%);
    float: right;
}

@media (max-width: 1000px) {
    #hero .background .image.nudge {
        padding-left: 0%;
    }
}

@media (max-width: 680px) {
    #hero .stepper {
        display: none
    }

    #hero .content {
        padding-left: 0;
        padding-right: 0;
        padding-top: calc(50vh - 182px);
    }

    #hero .container {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/splash.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        width: 90%;
        max-width: 350px;
        margin: 16px auto;
        height: 234px;
    }

    #hero .container .label {
        display: none
    }

    #hero .location {
        bottom: 32px;
        right: 32px;
        display: none;
    }

    #hero .location:before {
        width: 14px;
        height: 14px;
        margin-left: -22px;
    }

    #hero .location p.main {
        font-size: 16px;
        height: 14px;
        margin-bottom: 2px;
    }

    #hero .location p.description {
        font-size: 14px;
        height: 16px;
        float: left;
    }

    #hero .location p.alt {
        font-size: 13px;
        height: 14px;
        margin-top: 2px;
        margin-left: 4px;
        float: right;
        display: none;
    }

    #hero .scroll-icon {
        position: absolute;
        width: 100%;
        height: 64px;
        bottom: 0;
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/site/arrow-down.png');
        background-size: 32px;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5
    }

    #about .me {
        width: 72px;
        margin-right: 14px;
        margin-top: 16px;
        display: flex;
        
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: space-around;
        
    }

    #about .me .photo {
        width: 72px;
        height: 72px;
        float: left;
        margin: 0;
        margin-bottom: 14px;
    }

    #about .me .link {
        margin: 0;
        background-position: center;      
        height: 24px;  
    }

    #about .about {
        margin-top: 16px;
        margin-left: 0;
        font-size: 17px;
        line-height: 30px;
        font-weight: 500;
    }

    #skills .left-group {
        padding-top: 16px;
    }
    
    #skills .left-group:after {
        content: '';
        display: block;
        width: 64px;
        height: 2px;
        background-color: #9EA6AE;
        opacity: 0.66;
        bottom: 0;
        display: none;
    }

    #skills .row {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 14px;
    }

    #skills .row:before {
        width: 20px !important;
        background-size: contain !important;
        background-position: center !important;
        margin-right: 14px !important;
        margin-left: 0 !important;
        height: 20px;
        margin-right: 12px;
        margin-top: 0;
	}

    #skills .row.nodejs {
        margin-bottom: 20px;
    }

    #skills .right-group {
        padding-top: 20px;
    }

    #skills .row .progress {
        width: 110px;
    }

    #videos .quote {
        font-size: 22px;
        margin-top: 12px;
    }

    #videos .quote .symbol {
        font-size: 40px;
    }

    #videos .quote .text {
        margin: 0 12px;
        line-height: 34px;
    }

    #videos .quote .text .author img {
        height: 28px;
    }

    #videos .quote .text .author span {
        line-height: 28px;
        height: 28px;
        font-size: 20px;
    }

    .articles {
        margin-top: 18px;
    }

    .articles .item {
        width: 130px;
        height: 70px;
        padding: 0px 10px;
        box-sizing: border-box
    }

    .video-overlay .close-button {
        top: 32px;
        right: 32px;
    }

    .video-overlay .content {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        margin-top: -56px;
    }

    .video-overlay .content .row {
        align-items: inherit;
        box-sizing: border-box;
        position: relative;
        margin-top: 24px;
    }

    .video-overlay .info {
        width: 50%;
        padding-left: 24px;
        box-sizing: border-box;
    }

    .video-overlay .title {
        font-size: 26px;
    }

    .video-overlay .date {
        font-size: 18px;
        margin-top: 4px;
    }

    .video-overlay .apps {
        margin-top: 90px;
        width: 100%;
        position: absolute;
    }

    .video-overlay .channel {
        width: 50%;
        padding-right: 24px;
        box-sizing: border-box;
    }

    .video-overlay .channel .icon {
        max-width: 100px;
        height: 58px;
    }

    .video-overlay .apps {
        margin-top: 100px;
    }



    #awards .list {
        flex-direction: column;
        margin-top: 16px;
    }

    #awards .list .row {
        min-height: 0;
        margin-bottom: 18px;
    }

    #awards .list .header {
        margin-bottom: 6px;
    }

    #awards .show-more {
        width: 100%;
        margin-top: 6px;
    }
}

@media (max-width: 450px) {

    #videos .videos .video {
        margin-bottom: 16px;
    }

    #videos .videos .video .thumbnail {
        width: 154px;
        height: 100px;
    }
}

@media (max-width: 400px) {
    #hero {

    }
}



/* CARDS */

#cards {

}

#cards .content {
	padding-bottom: 32px;
	/* padding-top: 0; */
}

#cards .columns {
	display: flex;
	margin: -15px;
}

#cards .card {
	width: 100%;
	height: 240px;
	border-radius: 8px;
	box-shadow: 0 2px 24px 0 rgba(147,163,185,0.30);
	margin: 15px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	transform: scale(1);
	transition: 0.175s ease-in-out;
}

#cards .card:hover {
	transform: scale(1.01);
}

#cards .card::before,
#cards .card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
	border-radius: 8px;
	z-index: 1;
}

#cards .card::after {
	background-position: right bottom;
	z-index: 0;
}

#cards .card.appstore {
	background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/cards/appstore/background.png');
}

#cards .card.appstore::before {
	background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/cards/appstore/overlay-left.png');
}

#cards .card.appstore::after {
	top: -20px;
	background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/cards/appstore/overlay-right.png');
}

#cards .card.wwdc {
	background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/cards/wwdc/background.png');
}

#cards .card.wwdc::before {
	background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/cards/wwdc/overlay-left.png');
}

@media (max-width: 800px) {
	#cards .columns {
		flex-direction: column;
	}

	#cards .card {
		width: auto;
	}
}

#articles .content {
	padding-top: 20px;
	padding-bottom: 5px;
}

#articles .articles {
	margin-top: 0;
}

#articles .subtitle {
	/* color: #424242; */

	font-weight: 600;
	font-size: 18px;
	color: #93A3B9;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 16px;
	
	text-align: center;
}