@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

 body {
	 font-family: 'Roboto Slab', serif;
	 color: #000;
	 margin: 0;
	 padding: 0;
}

 .swiper-container {
	 width: 100%;
	 height: 100%;
}
 .swiper-slide {
	 text-align: center;
	/* Center slide text vertically */
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .container-general {
	 padding: 75px 0;
	 margin: 0 auto;
	 width: 100%;
}

 .container-general .gallery-wrap {
	 display: flex;
	 flex-direction: row;
	 width: 100%;
	 height: 55vh;
}
 .container-general .gallery-wrap .item {
	 flex: 1;
	 height: 100%;
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
	 transition: all 0.8s ease;
	 border-right: 1px solid #fff;
	 text-align:left;
}
 .container-general .gallery-wrap .item:hover {
	 flex: 7;
}
 .wrap-effect-1 .item:first-of-type {
	 background-image: url('../images/video.jpg');
}
 .wrap-effect-1 .item:nth-of-type(2) {
	 background-image: url('../images/brandings.jpg');
}
 .wrap-effect-1 .item:nth-of-type(3) {
	 background-image: url('../images/advertisingss.jpg');
}
 .wrap-effect-1 .item:nth-of-type(4) {
	 background-image: url('../images/web-development.jpg');
}
 .wrap-effect-1 .item:last-of-type {
	 background-image: url('../images/socialmedia.jpg');
}

 @keyframes rotate {
	 0% {
		 transform: rotate(0deg) translate3d(0, 0, 0);
	}
	 25% {
		 transform: rotate(10deg) translate3d(0, 0, 0);
	}
	 50% {
		 transform: rotate(-10deg) translate3d(0, 0, 0);
	}
	 75% {
		 transform: rotate(5deg) translate3d(0, 0, 0);
	}
	 100% {
		 transform: rotate(0deg) translate3d(0, 0, 0);
	}
}
 
 .item span
 {
     display:none;
     color:#fff;
 }
 .item:hover span
 {
     display:block;
     text-align:left;
 }
 .item h2
 {
     color: #fff;
    font-size: 22px;
    text-align: left;
    vertical-align: middle;
    display:inline-block;
    font-weight: 600;
    letter-spacing: 5px;
    padding: 25px;
 }
 .item li
 {
    list-style: square;
 }
 /****************************second line of services styling***************/
  .container-general2 {
	 padding: 0px 0 75px 0;
	 margin: 0 auto;
	 width: 100%;
}

 .container-general2 .gallery-wrap {
	 display: flex;
	 flex-direction: row;
	 width: 100%;
	 height: 55vh;
}
 .container-general2 .gallery-wrap .item {
	 flex: 1;
	 height: 100%;
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
	 transition: all 0.8s ease;
	 border-right: 1px solid #fff;
	 text-align:left;
}
.container-general2 .gallery-wrap .item:hover {
	 flex: 7;
}
.wrap-effect-2 .item:first-of-type {
	 background-image: url('../images/digital.jpg');
}
 .wrap-effect-2 .item:nth-of-type(2) {
	 background-image: url('../images/background-photography.jpg');
}
 .wrap-effect-2 .item:nth-of-type(3) {
	 background-image: url('../images/printing2.jpg');
}
 .wrap-effect-2 .item:nth-of-type(4) {
	 background-image: url('../images/lineproduction.jpg');
}