@charset "utf-8";
@font-face{
	font-family:"mj-moharram";
	src:url(../fonts/Mj_Moharram%20Light.TTF);
	}
@font-face{
	font-family:"tech";
	src:url(../fonts/A%20Hemmat%20AsanDownload.com.ttf);
}
html{
    width: 100%;
    height: 100%;
	margin:0px;
	padding:0px;
	background-image:url(../images/pic-back.jpg);
    background-size:cover;
    background-position: top center;
	background-repeat:no-repeat;
	//background-color:#614a17;
	}
a{
	margin: 4px;
	margin-bottom: 2px;
    opacity: 0.7;
    text-decoration: none;
    display: inline-block;
    outline:none;
    width: 150px;
    height: 175px;
    position: relative;
    transition-duration: 1s;
    transition-property: filter;
}
a.home-link{
    width: auto;
    height: auto;
    position: absolute;
    text-decoration: none;
    right: 40px;
    top: 40px;
}
div.one{
    display: flex;
    text-align: center;
	padding:0;
	width:460px;
	margin:auto;
}
div.one a{display: none;}
div.two{
	margin-top:-42px;
	width:310px;}
div.one img{
	width:150px;
	box-shadow:none;}
a:hover{
	opacity:1;
	}
.name{
    display: block;
    color: white;
    font-size: 20px;
    font-family:"mj-moharram";
    text-shadow:0px 0px 5px black;
    padding-top: 60px;
}
.name2{
    color: white;
    font-family:"tech";
    font-size: 15px;
    text-shadow:0px 0px 2px black;
}
a.home-link{
	z-index: 30;
	position:fixed;
	text-decoration: none;
	right: 20px;
	top: 20px;
}
@media screen and (max-width:700px){
	div.one{
		display: block;
		width: auto;
		width: 335px;
		margin: auto;
		text-align: left !important;
	}
	div.one a{
		background-size: 100% 100%;
		display: none;
		width: 100px;
		height: 120px;
		text-align: center;
	}
	div.two{
		margin: auto;
		width: 225px;
		margin-top:-25px;
	}
	div.one img{
		width:100%;
		box-shadow:none;
	}
	.name{
	    font-size: 15px;
		padding-top: 40px;
	}
	.name2{
	    font-size: 11px;
	}

}
