/*** production ***/
.production-item {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.production-item .production-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 8px;
    overflow: hidden;
    z-index: -1;
}

.production-item .production-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    object-fit: cover;
    border-radius: 10px;
}

.production-item .production-img::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    z-index: 1;
}

.production-item .production-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s ease-out;
    z-index: 2;
}

.production-item:hover .production-img::after {
    width: 0;
    left: auto;
    right: 0;
}

.production-item .production-text .production-icon {
    width: 140px;
    height: 140px;
    padding: 15px;
    margin-top: -70px;
    margin-bottom: 40px;
    background: #FFFFFF;
    border-radius: 140px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, .1);
}

.production-item .production-text h5,
.production-item .production-text p {
    transition: .5s;
}

.production-item:hover .production-text h5,
.production-item:hover .production-text p {
    color: #FFFFFF;
}

.production-item .production-text .btn {
    color: var(--secondary);
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .25);
}

.production-item .production-text .btn:hover {
    color: var(--dark);
    background: var(--secondary);
}

/*** Appointment ***/
.expertise {
    background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)), url(../img/production-background.jpg) center center no-repeat;
    background-size: cover;
}

.wrapper {
  padding: 50px 100px;
}

.svg-container { 
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle; 
  overflow: hidden; 
  background: white;
}

.svg-content { 
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.square-flip{
	transform-style: preserve-3d; 
	position:relative;
	width:400px;
	height:400px;
	
}
.square,.square2{
	width:100%;
	height:100%;
}
.square{

	background-size: cover;
	background-position:center center;

	transition: transform 0.4s;
    transform-style: preserve-3d;
	overflow: hidden;

	position:absolute;
	top:0;


	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden;
}
.square-flip .square{
	transform: rotateY(0deg);
	transform-style: preserve-3d;
	z-index:1;
}
.square-flip:hover .square{
	transform: rotateY(180deg);
	transform-style: preserve-3d;
}


.square2{

	background-size: cover;
	background-position:center center;

	transition: transform 0.4s;
    transform-style: preserve-3d;
	overflow: hidden;

	position:absolute;
	top:0;

	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden;
}
.square-flip .square2{
	
	transform: rotateY(180deg);
	transform-style: preserve-3d;
	z-index:1;
}
.square-flip:hover .square2{
	
	transform: rotateY(0deg);
	transform-style: preserve-3d;
}

/*Square content*/
.square-container{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align:center;
	position:relative;
	top:50%;
	transition: transform 0.4s;

	-webkit-transform: translateY(-50%) translateX(0px)  scale(1);
	-ms-transform: translateY(-50%) translateX(0px)  scale(1);
	transform: translateY(-50%) translateX(0px)  scale(1);
	transform-style: preserve-3d;
	z-index:1;
}
.square-flip:hover .square-container{
	
	-webkit-transform: translateY(-50%) translateX(-650px)  scale(1);
	-ms-transform: translateY(-50%) translateX(-650px)  scale(1);
	transform: translateY(-50%) translateX(-650px)  scale(1);
	transform-style: preserve-3d;

}

.square-container2{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align:center;
	position:relative;
	top:50%;
	transition: transform 0.4s;
	
	-webkit-transform: translateY(-50%) translateX(650px) scale(1);
	-ms-transform: translateY(-50%) translateX(650px) scale(1);
	transform: translateY(-50%) translateX(650px) scale(1);

	transform-style: preserve-3d;
	z-index:1;
}
.square-flip:hover .square-container2{
	
	-webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
	-ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
	transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
	transform-style: preserve-3d;
}


/*Style text*/
.square-flip h2{
	color:white;
	font-size:20px;

}
.square-flip h3{
	color:white;
	font-weight:500;
	font-size:14px;

}
/*Elements*/
.flip-overlay{
	display:block;
	background:rgba(0,0,0,0.5);
	width:100%;
	height:100%;
	position:absolute;
	top:0;	
}


.btn-square {
    width: 38px;
    height: 38px;
}

.btn-square,{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-square {
    width: 100px;
    height: 100px;
    border: 20px solid var(--light);
    background: var(--primary);
    border-radius: 50px;
}