/*-----------------------------------------------------------------------------
	Name	    : Images
	Description	: images settings
	Author		: abcreativity
	Author URL	: https://abcreativity.pl/
	Created		: 01 September 2019
	License		: All Rights Reserved. Do Not Copy!
-------------------------------------------------------------------------------*/



.portfolio-screen {
/*    background: #f7f7f7;*/
/*    margin-top: 4rem;*/
/*    margin-bottom: 4rem;*/
/*    width: 100%;*/
   

}
.portfolio-screen img {
    display: block;
    margin: 0 auto 2rem;
    

}
.portfolio-screen img:last-child {
margin-bottom: 0;
}


.portfolio-screen-img {
    text-align: center;
            padding: 2rem;
/*
 -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
*/
    background: #FFF;

}
.portfolio-screen-img.black-bg {
    background: #000;
}





/*
====================================
Images cover
====================================
*/
.img-cover {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media (min-width: 576px) {
.img-sm-cover {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}
}

@media (min-width: 768px) {
.img-md-cover {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}
}

@media (min-width: 992px) {
.img-lg-cover {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}
}

@media (min-width: 1200px) {
.img-xl-cover {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}
}
/*
====================================
Images 50% page width
====================================
*/

.img-cover-50.timeline {
    position: static;
    overflow: visible;
    top: auto;
    bottom: auto;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    padding-top: 1rem;
}

@media (min-width: 992px) {
.img-cover-50.timeline {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: auto;
    left: 50%;
    width: 50%;
    height: 100%;
    padding-top: 0;
}
}
.img-cover-50, .img-cover-50-md, .img-cover-50-lg {
    position: static;
    overflow: visible;
    top: auto;
    bottom: auto;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}
.img-cover-33, .img-cover-33-md, .img-cover-33-lg {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    width: 33.333333%;
    height: 100%;
}
.img-cover-50.left, .img-cover-50-md.left, .img-cover-50-lg.left {
    left: 0;
    right: auto;
}
.img-cover-50.right, .img-cover-50-md.right, .img-cover-50-lg.right {
    right: 0;
    left: auto;
}

@media (min-width: 768px) {
.img-cover-50-md {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 50%;
    height: 100%;
}
.img-cover-33-md {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 33.333333%;
    height: 100%;
}
}

@media (min-width: 992px) {
.img-cover-50-lg {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 50%;
    height: 100%;
}
}
/* Image md 33% lg 50%*/
.img-cover-33-md-50-lg {
    position: static;
    overflow: visible;
    top: auto;
    bottom: auto;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
.img-cover-33-md-50-lg {
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    height: 100%;
    width: 33.333333%;
}
}

@media (min-width: 992px) {
.img-cover-33-md-50-lg {
    width: 50% !important;
}
}
.img-overlay {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
/*
====================================
Backgrounds overlay
====================================
*/

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg-overlay.bg-dark-1 {
    background: rgba(5, 5, 33, 0.5);
}
.bg-overlay.bg-light-1 {
    background: rgba(255, 255, 255, 0.5);
}
.bg-overlay.bg-dark-dot {
    background: rgba(0,0,0,.2) url(../../images/dot_012.png) repeat;
}
.bg-overlay.bg-light-dot {
    background: url(../../images/dot_012-light.png) repeat;
}