@font-face {
    font-family: 'monika_sansregular';
    src: url('monikasans-regular-webfont.eot');
    src: url('monikasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('monikasans-regular-webfont.woff') format('woff'),
         url('monikasans-regular-webfont.ttf') format('truetype'),
         url('monikasans-regular-webfont.svg#monika_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'monika_sansbold';
    src: url('monikasans-bold-webfont.eot');
    src: url('monikasans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('monikasans-bold-webfont.woff') format('woff'),
         url('monikasans-bold-webfont.ttf') format('truetype'),
         url('monikasans-bold-webfont.svg#monika_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


/**
*	[Master Stylesheet]
*	Date : 13.09.2013   
*	Author : Can Guney Aksakalli
*	Description: It is a fully responsive design for Stacey.
*/

/* Table of Contents
==================================================
#General Things
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Landscape)
#Mobile (Portrait)

/* #General Things
================================================== */
body, input { font-family: 'monika_sansregular', Arial, sans-serif; line-height: 1.5; letter-spacing:1px; font-size:14px;}
a { text-decoration: none; color: #000; text-shadow: none;
-webkit-transition: 100ms linear 0s;
-moz-transition: 100ms linear 0s;
-o-transition: 100ms linear 0s;
transition: 100ms linear 0s;
outline: 0 none; }
a:hover {color:#0000ff;}	
body, html { width:100%; }
img {outline: 0; max-width: 100%; height: auto;}

/* #Base 960 Grid
================================================== */
.container { 
	position:relative; 
	width:940px; 
	margin:15px auto; 
}
.container .header {
	border-bottom:1px solid black;
	padding:10px 0 40px;
	margin: 0 20% 0 20%;
}

.container .header:after
{
	content:".";
	visibility:hidden;
	clear:both;
	display:block;
	line-height:0px;
}

.container .header .logo {
	float: none;
	text-align: center;
	margin-left: auto ;
  	margin-right: auto ;
	padding: 20px;
}

.container .header .logo a {
	font-size:1em;
}

.container .header .logo img {
outline: 0; max-width: 100%; height: auto; width: 150px;
}

.container .header .navigation {
	float: none;
	text-align: center;
	margin-left: auto ;
  	margin-right: auto ;
	font-size:1em;
}

.bordermenu {
	border-bottom: 1px solid #000;
	padding-bottom: 3px;
	line-height: 2;
        
	}


.container .site {
	margin: 10px auto 10px auto;
		width: calc( 100% - 20px );
}

.container .site:after
{
	content:".";
	visibility:hidden;
	clear:both;
	display:block;
	line-height:0px;
}

.container .site .category-header {
	border-bottom:0px solid black;
	padding:10px 0 5px;
	clear:both;
	text-align:center;
	margin: 0 20% 0 20%;
}

.container .site .category-container {
	padding:5px 10px 10px;
}

.project {
	float: left;
border-radius: 40%;
width: 100%; 
	height: 100%; 
	margin:10px 0 10px 0;
	background-color:#fff;
	border: 1px solid #000;
	
}

.project .project-info {
	width:100%;
	height:100px;
	text-align:center;
	display:table;
	opacity:1;
	-webkit-transition:all .1s ease-in-out;
	-moz-transition:all .1s ease-in-out;
	-o-transition:all .1s ease-in-out;
	transition:all .1s ease-in-out;

}

.project:hover { 
background-color:#000;
opacity:0.1;
}

.project:hover .project-info{
	opacity:1;

}

.project .project-info > div {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	width: 90%;
	color:#000;
	
}


.project .project-info  > div h2{
	margin: 0;
	padding: 15px 0px 0px 0px;
	color:#000;

}

.project .project-info  > div p{
	color:#000;
	margin: 0;
	padding: 15px;
}

.container .site .media {
	width:500px;
	float: none;
	text-align: center;
	margin: auto;
}

.container .site .media p {
	padding:0 10% 0 10%;
	}

.container .site .media img{
	max-width: 100%;
	margin: 20px 0;
	float: none;
}

.container .site .project-detail-info {
	width: 500px;
	float: none;
	text-align: justify;
	margin: auto;
	padding-top: 5px;
}
.container .site .project-detail-info h4 {
	text-align: center;
}
.container .site .project-detail-info center {
	text-align: center;
}
.footer {
	clear: both;
	position: relative;
	border-top: 1px solid black;
	text-align: center;
	padding: 20px 0;
	margin: 0 20% 0 20%;
}

a.atom-rss {
	margin: 0px 0px 0px 6px;
	padding: 2px 3px 0px;
	font-size: 0.93em;
	letter-spacing: 0.08em;
	background: #ddd;
}

.description {width: 50%;
	}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container  { 
		width: 748px; 
	}
	.container .site {
		width: calc( 100% - 20px );
	}
	.container .site .category-container .project {
		width: 100%;
		height:100%;
	}
	.project .project-info  > div h2{
		padding: 6px;
		font-size:1em;
	}

	.project .project-info  > div p{
		font-size:1em;
		padding: 6px;
	}
	
	.container .site .media {
		width:550px;.contenttop{
      text-align: center;
}
		float: none;
	}
	
	.container .site .project-detail-info {
		float: none;
	}
}	

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container { 
		width: 480px; 
	}
	.container .site {
		width: calc( 100% - 20px );
	}
	.container .site .category-container .project {
		width: 100%;
		height:100%;
	}	
	
	.project .project-info  > div h2{
		padding: 7px;
		font-size:1em;
	}

	.project .project-info  > div p{
		font-size:1em;
		padding: 7px;
	}

	.container .site .media {
		width:420px;
		float: none;
	}
	
	.container .site .project-detail-info {
		width:420px;
		float: none;
	}	
	
}


/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 479px) {
    .container { 
		width: 300px; 
	}
	
	.container .site .category-container .project {
		width:100%;
		height:100%;
	}
	.project .project-info  > div h2{
		padding: 5px;
		font-size:1em;
	}

	.project .project-info  > div p{
		font-size: 1em;
		padding: 5px;
	}
	
	.container .site .media {
		width:300px;
		float: none;
	}
	
	.container .site .project-detail-info {
		width:300px;
		float: none;
	}
}