@font-face {
    font-family: 'Bebas Neue Regular';
    src: url('../fonts/portfolio/BebasNeueRegular.otf'), url('../fonts/portfolio/BebasNeueRegular.ttf'), url('../fonts/portfolio/BebasNeueRegular.eot');
}

@font-face {
    font-family: 'Bebas Neue Book';
    src: url('../fonts/portfolio/BebasNeueBook.otf'), url('../fonts/portfolio/BebasNeueBook.ttf'), url('../fonts/portfolio/BebasNeueBook.eot');
}

@font-face {
    font-family: 'Segoe UI SemiLight';
    src: url('../fonts/portfolio/SegoeUISemiLight.ttf'), url('../fonts/portfolio/SegoeUISemiLight.eot');
}

@font-face {
    font-family: 'Segoe UI Regular';
    src: url('../fonts/portfolio/SegoeUIRegular.ttf'), url('../fonts/portfolio/SegoeUIRegular.eot');
}

.box-container {
    padding-top: 40px;
}

.portfolio-container {
    width: 100%;
    margin: 0 auto;
    max-height: 500px;
    display: inline-flex;
    margin-bottom: 30px;
}

.content-first-section-left {
    max-width: 70%;
    max-height: 500px;
    display: inline-flex;
    vertical-align: top;
    padding: 0px 30px 30px 0px;
    cursor: pointer;
}

.content-first-section-right {
    max-width: 70%;
    max-height: 500px;
    display: inline-flex;
    vertical-align: top;
    padding: 0px 0px 30px 30px;
    cursor: pointer;
}

.content-second-section-left, .content-second-section-right {
    max-width: 30%;
}

img.big-section {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    width: 800px;
}

img.small-section {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.content-big-img {
    cursor: pointer;
    position: relative;
    max-width: 800px;
    width: 100%;
    height: 500px;
    display: inline-flex;
}

.img-up {
    cursor: pointer;
    position: relative;
    max-width: 100%;
    height: 235px;
    display: inline-flex;
    margin-bottom: 30px;
}

.img-down {
    cursor: pointer;
    position: relative;
    max-width: 100%;
    height: 235px;
    display: inline-flex;
}

.caption {
    background: rgba(0,0,0,0.8);
    color: #838383;
    bottom: 0;
    padding: 10px 10px 10px 20px;
    width: 100%;
    margin: 0;
    position: absolute;
    max-height: 60px;
    min-height: 0;
    font-family: "Segoe UI SemiLight";
    left: 0;
}

.caption > h5 {
    font-family: "Bebas Neue Book";
    font-size: 34px;
    margin-top: 10px;
}

.caption-text {
    opacity: 0;
    color: #838383;
    font-size: 1vmax;
}

.caption-link {
    opacity: 0;
    color: #838383;
    cursor: pointer;
    font-size: 1vmax;
}

.caption-link:hover {
    color: #f8f8f8;
    text-decoration: underline;
    -webkit-transition-duration: 0.5s;
    transition: 0.5s;
}

.content-first-section-left:hover .caption,
.content-first-section-right:hover .caption,
.img-up:hover .caption,
.img-down:hover .caption {
    opacity: 1;
    min-height: 100%;
    -webkit-transition-duration: 1s;
    transition: 1s;
}

.content-first-section-left:hover .caption .caption-text,
.content-first-section-right:hover .caption .caption-text,
.img-down:hover .caption .caption-text,
.img-up:hover .caption .caption-text {
    /*-webkit-transition-duration: 2s;*/
    /*transition: 2s;*/
    animation: hoverAnimation 5s forwards;
    -webkit-animation: hoverAnimation 5s forwards;
    -moz-animation: hoverAnimation 5s forwards;
}

.content-first-section-left:hover .caption .caption-link,
.content-first-section-right:hover .caption .caption-link,
.img-down:hover .caption .caption-link,
.img-up:hover .caption .caption-link{
    /*-webkit-transition-duration: 1s;*/
    /*transition: 1s;*/
    animation: hoverAnimation 5s forwards;
    -webkit-animation: hoverAnimation 5s forwards;
    -moz-animation: hoverAnimation 5s forwards;
}

@keyframes hoverAnimation {
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes hoverAnimation {
    100% {
        opacity: 1;
    }
}

/*@media(min-width: 900px) {
    .caption > h5 {
        font-size: 34px;
    }
}*/

@media(max-width: 1000px) {
    .caption > h5 {
        font-size: 1.7vmax;
    }
}

@media(max-width: 700px) {
    .caption > h5 {
        font-size: 18px;
    }
}

@media(max-width: 600px) {
    .caption > h5 {
        font-size: 16px;
        line-height: 1.2;
        margin-top: 5px;
    }
    .caption-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
    }
    .caption-link {
        font-size: 13px;
    }

}

@media(max-width: 350px) {
    .caption > h5 {
        font-size: 13px;
        margin-left: -10px;
    }
}