@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
*{
	box-sizing: border-box;
}

}
.contact{
	position: absolute;
	top: 30px;
	left: 50px;
	z-index: 6;
	color: rgba(0,0,0,.5);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 15px;
	border-radius: 20px;
	background: rgba(0,0,0,.1);
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 1px 0px rgba(255,255,255,.1);
	
	&-form{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: white;
		z-index: 5;
		padding: 80px 50px;
		transform: translate3d(-100%, 0, 0);
		transition: .3s ease;
		border-radius: 5px;
		
		&.active{
			transform: translate3d(0,0,0);
		}
		
		.close{
			color: rgba(0,0,0,.7);
			position: absolute;
			right: 30px;
			top: 30px;
		}
	}
}

.cards{
	margin: auto;
	background: #rgba(0,0,0,.0);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,.1), 3px 5px 20px rgba(0,0,0,.2);
	width: 768px;
	height:550px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 30px;
	
	
	.card{
		display: inline-block;
		margin-right: 20px;
	}
	
	.card-toggle{
		z-index: 4;
		position: relative;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		display: block;
		text-align: center;
		line-height: 1.8;
		font-size: 24px;
		cursor: pointer;
		border: 2px solid transparent;
		transition: .3s ease;
		
		&.active{
			color: white;
			border-color: white;
		}
	}
	.card-content{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		transition: -webkit-clip-path 1s ease;
		padding: 40px 0 0;
		overflow: hidden;
		border-radius: 5px;
		
		.row{
			display: table;
			width: 100%;
			height: 100%;
		}
		
		.col{
			width: 50%;
			height: 100%;
			display: table-cell;
			transition: .3s ease .3s;
			transform: translate3d(0,0,0);
			vertical-align: top;
			
			h2{
				font-weight: 300;
				font-size: 3em;
				line-height: 1;
				margin: 0 0 30px;
				strong{
					font-weight: 700;
					display: block;
				}
			}
			
			img{
				max-width:90%;
				width: 100%;
			}
			
			&.left{
				transform: translate3d(0,0, 0);
				opacity: 0;
				padding-left: 50px;
			}
			&.right{
				transform: translate3d(100px,0, 0);
				opacity: 0;
				padding-left: 30px;
			}
		}
	}
	.card.active .col{
		transform: translate3d(0,0,0);
		opacity: 1;
	}
	#italy{
		.card-toggle{
			position: absolute;
			top: 30px;
			right: 30px;
			opacity:1;
			color: white;
		}
		.card-content{
			background-color: rgba(0, 0, 0, .4);
			-webkit-clip-path: circle(0% at 91.5% 75px);
		}
		&.active {
			.card-toggle{opacity: 0}
			.card-content{
				-webkit-clip-path: circle(270% at 91.5% 75px);
			}
		}
		
		.right{
			background: url(https://dl.dropboxusercontent.com/u/26808427/cdn/james.png) no-repeat bottom right;
			background-size: contain;
		}
	}
	
	#turkey, #china, #Czechia, #Russia{
		.card-content{
			color: white;
			
			p{
				color: rgba(255, 255, 255, .8);
			}
		}
	}
	#turkey{ 
		.card-content{ 
			background-color: rgba(73, 158, 149, .8);
			-webkit-clip-path: circle(0% at 76px 88%);
			clip-path: circle(0% at 50px 88%);
	
		}
		&.active .card-content{
			-webkit-clip-path: circle(270% at 76px 88%);
			clip-path: circle(270% at 50px 88%);
		}
	}
	#china {
		.card-content{ 
			background-color: rgba(200, 176, 74, .8);
			-webkit-clip-path: circle(0% at 150px 88%);
			clip-path: circle(0% at 150px 88%);
	
		}
		&.active .card-content{
			-webkit-clip-path: circle(270% at 150px 88%);
			clip-path: circle(270% at 150px 88%);
		}
	}
	#Czechia {
		.card-content{ 
			background-color: rgba(17, 69, 126, .8);
			-webkit-clip-path: circle(0% at 220px 88%);
			clip-path: circle(0% at 220px 88%);
	
		}
		&.active .card-content{
			-webkit-clip-path: circle(270% at 220px 88%);
			clip-path: circle(270% at 220px 88%);
		}
	}
	#Russia {
		.card-content{ 
			background-color: rgba(255, 204, 0, .8);
			-webkit-clip-path: circle(0% at 292px 88%);
			clip-path: circle(0% at 292px 88%);
	
		}
		&.active .card-content{
			-webkit-clip-path: circle(270% at 292px 88%);
			clip-path: circle(270% at 292px 88%);				
		}
	}
}

form{
	.control{
		position: relative;
		margin-bottom: 10px;
		padding-top: 20px;
		label{
			position: absolute;
			top: 30px;
			left: 0;
			transition: .3s ease;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 2px;
			font-size: 14px;
		}
		
		&.submit{
			text-align: right;
		}
	}
	input, textarea{
		width: 100%;
		border: none;
		border-bottom: 1px solid #e3e3e3;
		outline: none;
		padding: 10px 0;
		
	}
	.filled label,input:focus + label,textarea:focus +label{

		top: 0;
		font-size: 12px;

	}
	textarea{
		height: 100px;
		
	}
	input[type="submit"]{
		width: auto;
		background-color: #F06292;
		padding: 10px 40px;
		color: white;
		border-radius: 40px;
	}
}


.card-toggle img {
    width: 39px; /* Установите фиксированное значение ширины */
    height: 39px; /* Установите фиксированное значение высоты */
    border-radius: 50%; /* Округлые края */
    border: 4px solid #ccc;
    margin-top: 2px; /* Опустите иконку на 1 пиксель ниже */
}

   .contact {
       background-color: rgba(255, 0, 0, 0.5); /* Временно измените цвет фона для проверки */
   }