/* Copyright (c) 2017 Roland Horváth. All Rights Reserved. */

/* My Work section*/

#work {
    overflow: hidden;
}

#work .content {
		/*width: 1200px;*/
		padding-bottom: 32px;
}

#work .content .title {
    color: #5A697D;
    margin-bottom: 36px;
}

#work .content .subtitle {
    font-weight: 600;
    font-size: 20px;
    color: #93A3B9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
		text-align: left;
}

#work .featured .navigation {
    float: right;
    height: 16px;
    width: 200px;
}

#work .featured .slick-list {
    overflow: visible;
    outline: none !important;
}

#work .featured .slick-dots {
    height: 10px;
    padding: 0;
    float: right;
    padding-bottom: 2px;
}

#work .featured .slick-dots li {
    border-radius: 10px;
    width: 10px;
    height: 10px;
    margin: 0 4px;
	background: #C7CFDA;
	transition: 0.25s ease-in-out;
	overflow: hidden !important;
}

#work .featured .slick-dots li button {
    display: none;
}

#work .featured .slick-dots li.slick-active {
	cursor: default;
	width: 20px;
	position: relative;
	z-index: 1;
}

#work .featured .slick-dots li.slick-active:before {
	content: '';
	position: absolute;
	margin-left: -1px;
	margin-right: -1px;
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	animation: 5s slick-dot-fill forwards linear;
	animation-play-state: unset;
	background: #93A3B9;
	transition: 0.1s;
	overflow: hidden !important;
}

#work .featured .slick-dots li.slick-active.paused:before {
	animation-play-state: paused;
}

#work .featured .slick-dots li.slick-active.reset:before {
	animation: none;
}

@keyframes slick-dot-fill {
	0% {
		width: 0%;
		opacity: 1;
	}
	95% {
		width: 100%;
		opacity: 1;
	}
	100% {
		opacity: 0;
		width: 100%;
	}
}

#work .projects {
	margin: 0 -20px;
}

#work .project {
    /* width: 100%; */
    height: 416px;
    /* margin-bottom: 32px; */
    transform: scale(1);
	transition: 0.35s ease-in-out;
	margin: 0 20px;
}

/*#work .project:hover {
    transform: scale(1.005);
}*/


#work .project .background {
    width: 100%;
    height: 390px;

    background: #9EA6AE;
    box-shadow: 0 2px 24px 0 rgba(147,163,185,0.30);
    border-radius: 8px;

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

#work .project .info {
    height: 250px;
    margin-left: 72px;
    width: 280px;
    float: left;
    margin-top: -320px;
}

#work .project .info .app-icon {
    width: 60px;
    height: 60px;

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

    border-radius: 6.6px;
}

#work .project .info .app-name {
    font-weight: 600;
    font-size: 33px;
    color: #404040;
    letter-spacing: -0.55px;
    line-height: 1;
    margin-top: 20px;
}

#work .project .info .description {
    font-weight: 500;
    font-size: 20px;
    color: #404040;
    line-height: 26px;
    margin-top: 14px;
    margin-bottom: 30px;
}

#work .project .button {
    height: 18px;
    color: black;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 22px 9px 24px;
    border-radius: 100px;
    background-color: white;
    text-decoration: none;
    margin-left: -3px;
    display: block;
    float: left;
    line-height: 18px;
}

#work .project .screenshots {
    width: 492px;
    height: 400px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;

    float: right;

    margin-top: -374px;
    margin-right: 12px;
}

#work .project .screenshots video {
    width: 174px;
    height: auto;
    float: right;
    position: relative;
    border-radius: 2.5px;
    margin-top: 43.5px;
    margin-right: 17.5px;
}

#work .project .screenshots video .overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0
}

#work .project[data-project="toiler"] .info .app-icon {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/toiler/app-icon.png');
}

#work .project[data-project="toiler"] .screenshots {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/toiler/screenshots-3.png');
}
#work .project[data-project="toiler"] .background {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/toiler/background.png');
}




#work .project[data-project="transitnap"] .info .app-name,
#work .project[data-project="transitnap"] .info .description {
    color: white;
}

#work .project[data-project="transitnap"] .info .app-icon {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/app-icon.png');
}

#work .project[data-project="transitnap"] .screenshots {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots-3.png');
}
#work .project[data-project="transitnap"] .background {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/background.png');
    background-position: left;
}





#work .project[data-project="trynottosmile"] .info .app-name,
#work .project[data-project="trynottosmile"] .info .description {
    color: white;
}

#work .project[data-project="trynottosmile"] .info .app-icon {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/trynottosmile/app-icon.png');
}

#work .project[data-project="trynottosmile"] .screenshots {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/trynottosmile/screenshots-3.png');
}
#work .project[data-project="trynottosmile"] .background {
    background: #FF2772
}




#work .project[data-project="extra"] .info .app-name,
#work .project[data-project="extra"] .info .description {
    color: white;
}

#work .project[data-project="extra"] .info .app-icon {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/extra/app-icon.png');
}

#work .project[data-project="extra"] .screenshots {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/extra/screenshots-3.png');
}

#work .project[data-project="extra"] .background {
	/* background: #1a1a1a */
	background: none;
	overflow: hidden;
	z-index: -9;
	position: relative;
}

#work .project[data-project="extra"] .background .overlay {
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(30, 35, 40, 0.95), rgba(20, 25, 40, 0.17));
	position: absolute;
}

#work .project[data-project="extra"] .background video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
}






#work .project[data-project="project-avr"] .info {
    width: 400px;
}

#work .project[data-project="project-avr"] .info .app-name,
#work .project[data-project="project-avr"] .info .description {
    color: white;
}

#work .project[data-project="project-avr"] .info .description {
    font-weight: 600;
    margin-top: 24px;
}

#work .project[data-project="project-avr"] .info .app-icon {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/project-avr/app-icon.png');
    width: 86px;
    height: 60px;
}

#work .project[data-project="project-avr"] .background {
    background: none;
    overflow: hidden;
    z-index: -9;
    position: relative;
}

#work .project[data-project="project-avr"] .background .overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(30, 35, 40, 0.95), rgba(20, 25, 40, 0.17));
    position: absolute;
}

#work .project[data-project="project-avr"] .background video {
    width: 100%;
    height: auto;
    position: absolute;
}


#work .project[data-project="mutasd"] {
    /* height: 382px; */
}
#work .project[data-project="mutasd"] .info {
    margin-top: -306px;
}

#work .project[data-project="mutasd"] .info .app-name,
#work .project[data-project="mutasd"] .info .description {
    color: white;
}
#work .project[data-project="mutasd"] .info .app-name,
#work .project[data-project="mutasd"] .info .description {
    color: white;
}
#work .project[data-project="mutasd"] .info .app-icon {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/mutasd/app-icon.png');
}
#work .project[data-project="mutasd"] .background {
    background: #34ABE3;
    height: 356px;
}
#work .project[data-project="mutasd"] .screenshots {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/mutasd/screenshots.png');
    background-position: center right;
    height: 366px;
    margin-top: -338px;
}
#work .project[data-project="mutasd"] .screenshots video {
    width: 432px;
    float: right;
    position: relative;
    border-radius: 2.5px;
    margin-top: 18px;
    margin-right: 30px;
}



@media (max-width: 972px) {
    #work .project[data-project="trynottosmile"] .screenshots {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/trynottosmile/screenshots-2.png');
    }
    #work .project[data-project="transitnap"] .screenshots {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots-2.png');
    }
    #work .project[data-project="toiler"] .screenshots {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/toiler/screenshots-2.png');
    }

    #work .project[data-project="mutasd"] .screenshots {
        width: 342px;
        height: 321px;
    }

    #work .project[data-project="mutasd"] .screenshots video {
        width: 300px;
        margin-top: 46px;
        margin-right: 20px;
    }
}

@media (max-width: 832px) {
    #work .project[data-project="trynottosmile"] .screenshots {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/trynottosmile/screenshots-1.png');
    }
    #work .project[data-project="transitnap"] .screenshots {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/transitnap/screenshots-1.png');
    }
    #work .project[data-project="toiler"] .screenshots {
        background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/toiler/screenshots-1.png');
    }

    #work .project[data-project="mutasd"] .screenshots {
        display: none;
    }
}

@media (max-width: 800px) {
    #work .project[data-project="project-avr"] .background video {
        width: auto;
        height: 100%;
        position:absolute;
        transform: translateX(-50%);
        left: 50%;
    }
}

@media (max-width: 640px) {
    #work .project .screenshots {
        display: none;
    }

    #work .project .info {
        max-width: calc(100% - 140px);
    }

    #work .project {
        margin-bottom: 16px;
        height: 350px;
    }

    #work .project .background {
        height: 350px;
    }

    #work .project .info {
        margin-top: -300px;
        margin-left: 48px;
    }

    #work .project[data-project="project-avr"] .info {
        margin-top: -290px;
    }
}

#work .thumbnails {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    margin: -8px;
	margin-right: -18px;
	/* height: 300px; */
}

#work .thumbnails .container{

    width: 100%;
    height: 100%;
    position: relative;

    max-width: 33%;
    padding-bottom: 33%;
}

#work .thumbnails .container .thumbnail {

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    position: absolute;

    background: #9EA6AE;
    box-shadow: 0 2px 24px 0 rgba(147,163,185,0.30);
    border-radius: 8px;

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

    transform: scale(1);
    transition: 0.15s ease-in-out;
    margin: 16px 8px;
}


#work .thumbnails .container .thumbnail:hover {
    transform: scale(1.01);
}

#work .container .thumbnail[data-project="show-me"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/mutasd/thumbnail.png');
}

#work .container .thumbnail[data-project="layp"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/layp/thumbnail.png');
}

#work .container .thumbnail[data-project="menutrend"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/menutrend/thumbnail.png');
}

#work .container .thumbnail[data-project="csapo"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/csapo/thumbnail.png');
}

#work .container .thumbnail[data-project="sopronivse"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/sopronivse/thumbnail.png');
}

#work .container .thumbnail[data-project="vorosbenjamin"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/vorosbenjamin/thumbnail.png');
}

#work .container .thumbnail[data-project="begin2018right"] {
    background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/begin2018right/thumbnail.png');
}

#work .container .thumbnail[data-project="anon"] {
	background-image: url('https://cdn.rolandhorvath.hu/site/assets/images/projects/anon/thumbnail.png');
}

@media (max-width: 860px) {

    #work .thumbnails .container {
        max-width: 50%;
        padding-bottom: 50%;
        margin-right: -8px;
    }
}

@media (max-width: 680px) {
    #work .content .title {
        margin-bottom: 10px;   
    }

    #work .content .subtitle {
        font-size: 18px;
    }

    #work .project .info .app-icon {
        margin: 0 auto;
    }

    #work .project .info {
        margin: 0 auto;
        margin-top: -300px;
        max-width: 100%;
        text-align: center;
        width: 100%;
    }

    #work .project .badge {
        margin: 8px auto;
        float: none;
    }

    #work .project .info .app-name {
        font-size: 30px;
    }

    #work .project .info .description {
        font-size: 17px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
        line-height: 24px;
        max-width: 230px;
    }

    #work .project .button {
        float: none;
        margin: 0 auto;
        width: 100px;
    }

    #work .project {
        height: 350px;
    }

    #work .project .info {
        margin-top: -292px;
    }

    #work .project .background {
        height: 342px;
    }

    #work .project[data-project="mutasd"] {
        height: 390px;
    }

    #work .project[data-project="mutasd"] .background {
        height: 364px;
    }

    #work .project[data-project="mutasd"] .info .description {
        max-width: 100%;
    }

    #work .project[data-project="mutasd"] .info {
        margin-top: -330px;
    }

    
    
}

@media (max-width: 510px) {
    
        #work .thumbnails .container,
        #work .thumbnails:after {
            max-width: 100%;
            padding-bottom: 100%;
        }

        #work .thumbnails:after {
            display: none
        }
    }


/*#work .thumbnails .thumbnail:nth-child(3n+0) {
    margin-right: 0;
}

#work .thumbnail {
    max-width: calc(33% - 10px);
    display: inline-block !important;
    padding-bottom: calc(33% - 10px) !important;
    margin-bottom: 14px;
}*/


/*@media (max-width: 860px) {

    #work .thumbnails .thumbnail:nth-child(even) {
        margin-right: 0;
    }

    #work .thumbnail {
        max-width: calc(50% - 10px);
        display: inline-block !important;
        padding-bottom: calc(50% - 10px) !important;
        margin-bottom: 14px;
    }
}*/

/*@media (max-width: 550px) {

    #work .thumbnail {

        margin: 0 auto;
        width: 300px;
        height: 300px;
        display: block !important;
    }
}

@media (max-width: 400px) {

    #work .thumbnail {
        margin: 0 auto;
        width: 100%;
        display: inline-block !important;
        margin-right: 0;
        padding-bottom: 100% !important
    }
}*/

#work.other .content {
	padding-top: 0;
}

#work .other .thumbnails {
	display: inherit;
	height: 250px;
	white-space: nowrap;
}

#work .other .thumbnails .container {
	max-width: 250px;
	max-height: 250px;
	padding-bottom: 0;
	display: inline-block;

	width: 250px;
	height: 250px;
}

#work .other .thumbnails {
	margin: -8px -1000px;
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;
}

/* #work .other .thumbnails::before,
#work .other .thumbnails::after {
	content: '';
	width: 100px;
	position: absolute;
	top: 0; left: 0; bottom: 0;
	background: linear-gradient(to left, rgba(247,247,247,0) 0%,rgba(247,247,247,1) 100%);
} */