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

	Custom CSS



	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

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

 .red {

      object-position: 100% 70%;

      width: 50%;

      height: 380px;

      object-fit: none;

      padding: 5px;

      right: 0;

      position: absolute;

      transition: .5s;

	 opacity: .7;

	 filter: grayscale(1);

      }



      .red1 {

      object-position: 0% 70%;

      width: 50%;

      height: 380px;

      object-fit: none;

      padding: 5px;

      left: 0;

      position: absolute;

      transition: .5s;

	 opacity: .7;

	 filter: grayscale(1);



	

      }

 

      .red:hover{

      object-position: 100% 70%;

      width: 100%;

      height: 380px;

      padding: 5px;

      transition: .5s;

      position: absolute;

      right: 0;

	 opacity: 1;

	 filter: grayscale(0);

		

      }

       .red1:hover{

      object-position: 0% 70%;

      width: 100%;

      height: 380px;

      padding: 5px;

      transition: .5s;

      position: absolute;

      left: 0;

      z-index: 	99 !important;

	 opacity: 1;

	 filter: grayscale(0);

      

      }





.text-white-c {

	color: white !important;

	transition: .5s;

}



.text-white-c:hover {

	color: #343a40 !important;

	transition: .5s;

}



.icon-product {

	width: 40%;

    position: absolute;

    top: 0px;

    right: 0;

    opacity: .3;

}



.preview-html {

    scroll-behavior: smooth;

}

.pv-service-wrapper {

    -ms-grid-columns: (1fr) [4];

    grid-template-columns: repeat(4, 1fr);

    grid-row-gap: 50px;

    display: -ms-grid;

    display: grid;

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .pv-service-wrapper {

        -ms-grid-columns: (1fr) [2];

        grid-template-columns: repeat(2, 1fr);

    }

}

@media only screen and (max-width: 767px) {

    .pv-service-wrapper {

        -ms-grid-columns: (1fr) [1];

        grid-template-columns: repeat(1, 1fr);

    }

}

.pv-service-wrapper .single-grid {

    position: relative;

    padding: 10px;

		transition: .3s;



}

.pv-service-wrapper .single-grid::before {

    position: absolute;

    content: "";

    right: 0;

    top: 0;

    bottom: 0;

    background: url(/create/images/grid-separator-dashed.png) repeat-y;

    width: 1px;

}

.pv-service-wrapper .single-grid .inner {

    max-width: 390px;

    margin: 0 auto;

    padding: 0 15px;

}

.pv-service-wrapper .single-grid .inner h4 {

    font-size: 20px;

    font-family: Poppins, sans-serif;

    line-height: 1.4;

    margin-bottom: 0;

    word-wrap: break-word;

    max-width: 100%;

}

.preview-grid-metro {

    margin: 0 -30px;

}

.preview-grid-metro .portfolio-33-33 {

    width: 33.33%;

    padding: 0 30px;

    margin-bottom: 30px;

}

.preview-grid-metro .resizer {

    width: 33.33%;

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .preview-grid-metro .portfolio-33-33 {

        width: 50%;

    }

    .preview-grid-metro .resizer {

        width: 50%;

    }

}

@media only screen and (max-width: 767px) {

    .preview-grid-metro .portfolio-33-33 {

        width: 100%;

    }

    .preview-grid-metro .resizer {

        width: 100%;

    }

}

.preview-grid-metro .portfolio {

    text-align: center;

}

.preview-grid-metro .portfolio .thumb {

    position: relative;

    margin-bottom: 40px;

    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);

    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);

    -webkit-transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

    -o-transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

    transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

}

.preview-grid-metro .portfolio .pv-port-info h5 a {

    color: #222;

    font-size: 18px;

    line-height: 1.39;

}



.single-grid:hover{

		background: #ec5d71;

		color: white;

		transition: .3s;

}