/* for social menu pc */
.contact-info{position: fixed;top:40%;z-index: 99999;left:0;  }

.option1{cursor: pointer;position: relative;}
.option1 i{display: block;width: 50px;text-align: center;height: 50px;line-height: 50px;font-size: 25px;background: green;color: white;transition: 0.6s;border-bottom-right-radius: 50%;border-top-right-radius: 50%;margin-bottom: 2px;}
.option1:hover .text1{left:30px;}
.text1{position: absolute;height: 50px;width: 210px;font-size: 20px;text-align: center;background-color: green;top:0;z-index: -1;left:-180px;color: white;line-height: 50px;transition: 0.6s}

.option3{cursor: pointer;position: relative;}
.option3 i{display: block;width: 50px;text-align: center;height: 50px;line-height: 50px;font-size: 25px;background: blue;color: white;transition: 0.6s;border-bottom-right-radius: 50%;border-top-right-radius: 50%;margin-bottom: 2px;}
.option3:hover .text3{left:30px;}
.text3{position: absolute;height: 50px;width: 210px;font-size: 20px;text-align: center;background-color: blue;top:0;z-index: -1;left:-180px;color: white;line-height: 50px;transition: 0.6s}

.option4{cursor: pointer;position: relative;}
.option4 i{display: block;width: 50px;text-align: center;height: 50px;line-height: 50px;font-size: 25px;background: red;color: white;transition: 0.6s;border-bottom-right-radius: 50%;border-top-right-radius: 50%;margin-bottom: 2px;}
.option4:hover .text4{left:30px;}
.text4{position: absolute;height: 50px;width: 210px;font-size: 20px;text-align: center;background-color: red;top:0;z-index: -1;left:-180px;color: white;line-height: 50px;transition: 0.6s}


/* Portfolio Section
--------------------------------*/
#portfolio { padding: 60px 0;}

#portfolio .portfolio-item { position: relative; height: 150px; align-items: center; overflow: hidden;}
#portfolio .portfolio-item figure { background: #cccccc; overflow: hidden; height: 120px; position: relative; border-radius: 4px 4px 0 0; margin: 0;}
#portfolio .portfolio-item figure::before {	position: absolute;	top: 0;	left: -75%;	z-index: 2;	display: block;	content: '';	width: 50%;	height: 100%;	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	-webkit-transform: skewX(-25deg);	transform: skewX(-25deg);}
#portfolio .portfolio-item figure:hover::before {	-webkit-animation: shine .75s;	animation: shine .75s;}
@-webkit-keyframes shine {	100% {		left: 125%;	}}
@keyframes shine {	100% {		left: 125%;	}}
#portfolio .portfolio-item .portfolio-info {  background: #fff; text-align: center;  padding: 20px;  height: 50px; border-radius: 0 0 3px 3px;}
#portfolio .portfolio-item .portfolio-info h4 {  font-size: 18px;  line-height: 1px;  font-weight: 700;   padding-bottom: 0px;}
#portfolio .portfolio-item .portfolio-info h4:hover { color: #ed3c0d; cursor: pointer;}

/* Portfolio Details
--------------------------------*/
.portfolio-details { padding-top: 30px;}
.portfolio-details .portfolio-details-container { position: relative;}
.portfolio-details .portfolio-details-carousel { position: relative; z-index: 1;}
.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots { margin-top: 5px; text-align: left;}
.portfolio-details .portfolio-details-carousel .owl-dot { display: inline-block;  margin: 0 10px 0 0;  width: 12px;  height: 12px;  border-radius: 50%;  background-color: #ddd !important;}
.portfolio-details .portfolio-details-carousel .owl-dot.active { background-color: #18d26e !important;}
.portfolio-details .portfolio-info { padding: 30px;  position: absolute;  right: 0; bottom: -70px; background: #fff; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); z-index: 2;}
.portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700;  margin-bottom: 20px;  padding-bottom: 20px;  border-bottom: 1px solid #eee;}
.portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px;}
.portfolio-details .portfolio-info ul li + li { margin-top: 10px;}
.portfolio-details .portfolio-description { padding-top: 50px;}
.portfolio-details .portfolio-description h2 { width: 50%;  font-size: 26px;  font-weight: 700;  margin-bottom: 20px;}
.portfolio-details .portfolio-description p { padding: 0 0 0 0;}
@media (max-width: 768px) { .portfolio-details .portfolio-description h2 {   width: 100%; }
  .portfolio-details .portfolio-info {  position: static;  margin-top: 30px; }}