@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

*{
	font-family:Roboto;
}

body {
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
	font-size:14px;
	color:#777777;
	text-align:center;
	background-color: #fffcf2;
	padding:0;
	margin:0;
}
h1{
	font-size:30px;
	color:#555555;
	margin:0;
	text-shadow: rgba(0, 0, 0, 0.44) 0px 0px 13px;
}
h3 {
	font-size:16px;
	color:#555555;
	margin:0;
	display:none;
}
.clr{
	clear:both;
	display:table;
	height:0px;
}
input{
	margin:5px;
	padding:5px;
	font-size:20px;
	width:300px;
}
.bm_link{
	color:#FF4081;
	text-decoration:none;
	font-size:20px;
}
.bm_link:hover{
	font-weight:bold;
}
.header{
	/*padding: 20px;*/
    box-shadow: 0px 0px 12px 7px rgba(0,0,0,0.1);
    /*background-color: #C9C3FD;*/
    background-color: #3483C1;
	margin-bottom:20px;
	
	/*background-image:url("/images/header2.jpg");*/
	background-size: 120px;
}
.header h1,.header h3{
	padding:20px;
	color:#fff;
}
.head_layout {
	font-size:40px;
	color:#555555;
	margin:10px;
	margin-top:20px;
	text-transform:uppercase;
	border-bottom:1px solid #dfdfdf;
}
.slide_layout{
	height:320px;
	width:955px;
	margin:auto;
	margin-bottom:15px;
}
.layout{
	position:relative;
	height:320px;
	margin:auto
}
.project_item{
	float:left;
	margin-left:20px;
	overflow:hidden;
	position:relative;
	z-index: 1;
	
	height:300px;
	width:300px;
	border-radius:50%;
	border:2px solid #fff;
	box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.5);
	
	
	/*
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	filter: blur(2px);
	*/
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.project_item:first-child{
	/*margin-left:0px;*/
}
.preview{
	text-align:center;
	position:relative;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.preview .name{
	font-size:16px;
	position:absolute;
	z-index:10;
	top:190px;
	width:100%;
	color:#444;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.preview .icon{
	position:absolute;
	z-index:10;
	height:80px;
	width:80px;
	top:100px;
	left:calc(50% - 40px);
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.preview .icon img{
	height:100%;
	width:100%;
}

.content{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0);
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.content .text{
	position:absolute;
	top:300px;
	padding:0 30px;
	/*text-align:justify;*/
	color:#777;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.project_item:hover{
	border:2px solid rgba(0,0,0,0.5);
}
.project_item:hover .icon{
	top:10px;
	height:50px;
	width:50px;
	left:calc(50% - 25px);
}
.project_item:hover .name{
	top:60px;
	color:#fff;
	font-size:12px;
}
.project_item:hover .content{
	background-color:rgba(0,0,0,0.5);
}
.project_item:hover .content .text{
	color:#fff;
	top:100px;
}


.project_item.stylist{
	background-image:url("/images/stylist_bg.png");
	background-size: 200px;
}
.project_item.tourist{
	background-image:url("/images/tourist_bg.png");
	background-size: 300px;
	background-position-y: -80px;
}
.project_item.phobia{
	background-image:url("/images/phobia_bg.png");
	background-size: 300px;
}
.project_item.demifood{
	background-image:url("/images/demifood_bg.jpg");
	background-size: 300px;
}
.project_item.topriga{
	background-image:url("/images/topriga_bg.png");
	background-size: 780px;
}
.project_item.mediawaves{
	background-image:url("/images/mw_bg.png");
	background-size: 100%;
}
.project_item.yametro{
	background-image:url("/images/yametro_bg.png");
	background-size: 110%;
    background-position: center;
}
.project_item.demifood .name,.project_item.tourist .name, .project_item.phobia .name,.project_item.topriga .name{
	color:#fff !important;
}
.project_item:hover  .saturn {
	display:block;
}
.saturn {
	position: absolute;
	display:none;
	left: 147px;
	top: 147px;
	width:5px;
	height:5px;
	border-radius:50%;
	background-color:#fff;

	-webkit-animation: myOrbit 4s linear infinite;
	   -moz-animation: myOrbit 4s linear infinite;
		 -o-animation: myOrbit 4s linear infinite;
			animation: myOrbit 4s linear infinite;

}

@-webkit-keyframes myOrbit {
	from { -webkit-transform: rotate(0deg) translateX(148px) rotate(0deg); }
	to   { -webkit-transform: rotate(360deg) translateX(148px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
	from { -moz-transform: rotate(0deg) translateX(148px) rotate(0deg); }
	to   { -moz-transform: rotate(360deg) translateX(148px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
	from { -o-transform: rotate(0deg) translateX(148px) rotate(0deg); }
	to   { -o-transform: rotate(360deg) translateX(148px) rotate(-360deg); }
}

@keyframes myOrbit {
	from { transform: rotate(0deg) translateX(148px) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(148px) rotate(-360deg); }
}



@media all and (max-device-width: 380px), screen and (max-width: 380px) {
	
	.slide_layout{
		width:100%;
		overflow-x: scroll;
	}
}