@charset "UTF-8";
 
@font-face {
    font-family: "Cookie Light";
    src: url(Doctor_Soos_Light.ttf) format("truetype");
}

@font-face {
    font-family: "Cookie";
    src: url(Doctor_Soos_Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Header Solid";
    src: url(LoveYaLikeASisterSolid.ttf) format("truetype");
}

@font-face {
    font-family: "Header";
    src: url(LoveYaLikeASister.ttf) format("truetype");
}

/* ----------------- Reset all styles ----------------- */
*{
	margin:0;
	padding:0;
	border:0;
}

.left	{ float:left; }
.right	{ float:right; }
.clear	{ clear:both; float:none; }

.text-left		{ text-align:left; }
.text-right		{ text-align:right; }
.text-center,
.text-centre	{ text-align:center; }

.form tr{
height:50px
}

/* ----------------- Website background and general text colour ----------------- */
body{
	font-family: Arial, sans-serif;
	/*background-image:url(../images/backgroundtexture.png);*/
	background-color:#f2f7ff;
	color:#2d2d2d;
}

select{
	border: 1px solid lightblue;
}

.wrapper{
	background-color:#fff;
	border:0px solid red;
}

.grids{
	border:0px solid green;
}

a{ color: #1057B3;text-decoration:none;}

a.button {
	font-family: Header Solid, sans-serif;
	font-size: 0.9em;
	line-height: auto;
	background-color: #1057B3;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009AC1), to(#1057B3));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #009AC1, #1057B3);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #009AC1, #1057B3);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #009AC1, #1057B3);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #009AC1, #1057B3);/* IE 10+ */
    border: 1px solid #011A9C;
    border-radius: 0px;
    /*box-shadow: 0 1px 0 0 #9BCB76 inset;*/
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 15px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;
}
	
a.button:hover {
	background-color: #009AC1;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1057B3), to(#009AC1));
	background-image: -moz-linear-gradient(#1057B3, #009AC1);
	background-image: -moz-linear-gradient(top, #1057B3, #009AC1);
	background-image: -o-linear-gradient(top, #1057B3, #009AC1);
	background-image: -webkit-linear-gradient(top, #1057B3, #009AC1);
	background-image: -ms-linear-gradient(top, #1057B3, #009AC1);}

.submitbutton {
	font-family: Header Solid, sans-serif;
	font-size: 0.9em;
	line-height: auto;
	background-color: #1057B3;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009AC1), to(#1057B3));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #009AC1, #1057B3);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #009AC1, #1057B3);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #009AC1, #1057B3);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #009AC1, #1057B3);/* IE 10+ */
    border: 1px solid #011A9C;
    border-radius: 0px;
    /*box-shadow: 0 1px 0 0 #9BCB76 inset;*/
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 15px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;}
	
.submitbutton:hover {
	background-color: #009AC1;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1057B3), to(#009AC1));
	background-image: -moz-linear-gradient(#1057B3, #009AC1);
	background-image: -moz-linear-gradient(top, #1057B3, #009AC1);
	background-image: -o-linear-gradient(top, #1057B3, #009AC1);
	background-image: -webkit-linear-gradient(top, #1057B3, #009AC1);
	background-image: -ms-linear-gradient(top, #1057B3, #009AC1);}
	
	
a.delbutton {
	font-family: Header Solid, sans-serif;
	font-size: 0.9em;
	line-height: auto;
	background-color: #353535;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AAAAAA), to(#353535));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #AAAAAA, #353535);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #AAAAAA, #353535);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #AAAAAA, #353535);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #AAAAAA, #353535);/* IE 10+ */
    border: 1px solid #011A9C;
    border-radius: 0px;
    /*box-shadow: 0 1px 0 0 #9BCB76 inset;*/
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 15px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;}
	
a.delbutton:hover {
	background-color: #AAAAAA;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#353535), to(#AAAAAA));
	background-image: -moz-linear-gradient(#353535, #AAAAAA);
	background-image: -moz-linear-gradient(top, #353535, #AAAAAA);
	background-image: -o-linear-gradient(top, #353535, #AAAAAA);
	background-image: -webkit-linear-gradient(top, #353535, #AAAAAA);
	background-image: -ms-linear-gradient(top, #353535, #AAAAAA);
}

a.smallbutton {
	font-family: Header Solid, sans-serif;
	font-size: 0.62em;
	line-height: auto;
	background-color: #353535;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AAAAAA), to(#353535));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #AAAAAA, #353535);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #AAAAAA, #353535);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #AAAAAA, #353535);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #AAAAAA, #353535);/* IE 10+ */
    
    border-radius: 0px;
    /*box-shadow: 0 1px 0 0 #9BCB76 inset;*/
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 2px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;}
	
a.smallbutton:hover {
	background-color: #AAAAAA;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#353535), to(#AAAAAA));
	background-image: -moz-linear-gradient(#353535, #AAAAAA);
	background-image: -moz-linear-gradient(top, #353535, #AAAAAA);
	background-image: -o-linear-gradient(top, #353535, #AAAAAA);
	background-image: -webkit-linear-gradient(top, #353535, #AAAAAA);
	background-image: -ms-linear-gradient(top, #353535, #AAAAAA);
}
	
/* The rest is pretty self explanatory - it appears in the order that it occurs on the HTML document */
#top{
	height:40px;
}

#logo{
	margin-top:5%;
	text-decoration:none;
}

#logoimage{
	width:27px;
	padding-right:10px;
	float:left;
}

#logotitle{
	float:left;
	font-family:Cookie, Helvetica, sans-serif;
	font-weight:normal;
	font-size:215%;
	text-shadow: 0 1px 1px #FFF;
}

#logotitle a{
	color:#2d2d2d;
	text-decoration:none;
}

nav{
	float:right;
	width:400px;
	display:block;
	height:40px;
}

nav ul li{
	display:block;
	width:25%;
	float:left;
	text-align:center;	
}

nav ul li a{
	font-family:Lato, Helvetica, Arial, sans-serif;
	width:90%;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:400;
	line-height:250%;
	display:block;
	color:#2d2d2d;
}

nav ul li a:hover{
	color:#f38094;
}

nav ul li p{
	font-family:Lato, Helvetica, Arial, sans-serif;
	width:90%;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:400;
	line-height:250%;
	display:block;
	color:#f38094;
}

hr{
	height:1px;
	width:100%;
	background-color:#2d2d2d;
	margin:3% 0;
}

header{
	width:100%;
	margin:5% 0 5% 0;
}

header h1{
	font-family: Lato, Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:140%;
	font-weight:normal;
	letter-spacing:1px;
	margin-bottom:1%;
}

header h1 span{
	color:#f38094;
	text-shadow: 0 1px 1px #dadada;
}

header h2{
	font-family: Lato, Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:100%;
	font-weight:normal;
}
	
#slideshow{
	width:100%;
	margin-top:2%;
}
	/*------------------------------------*\
	$MESSAGES
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/
.message{
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #ccc;
	margin-left:0;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
	/*
	With multiple errors it’s nice to group them:
	<ul class=message>
		<li>Please provide a surname.</li>
		<li>Please enter a valid email address.</li>
	</ul>
	*/
	ul.message{
		list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
		padding:10px 10px 10px 56px;
	}
.error{
	border-color:#fb5766;
	background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
	border-color:##669B02;
	background:url(../img/css/icons/success.png) 10px center no-repeat #eaffc4;
}
.info{
	border-color:#85a5be;
	background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
	border-color:#d8d566;
	background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}

#sTop{ width:25px; height:17px; margin-bottom:10px; cursor:pointer; background:url(../images/scrollerArrows.png) 0 0 no-repeat;}
#sTop:hover{ background:url(../images/scrollerArrows.png) -25px 0 no-repeat;}
#sBottom{ width:25px; height:17px; z-index:100; cursor:pointer; background:url(../images/scrollerArrows.png) -50px 0 no-repeat;}
#sBottom:hover{ background:url(../images/scrollerArrows.png) -75px 0 no-repeat;}

/* - - - - - - - - - - - - - - -  Slider START  - - - - - - - - - - - - - - - */

.html_carousel {
}
.html_carousel div.slide {
	position: relative;
}	
.html_carousel div.slide img {
	height:auto;
	-webkit-box-shadow: 0 1px 1px #c1c1c1;
    -moz-box-shadow: 0 1px 1px #c1c1c1;
    box-shadow: 0 1px 1px #c1c1c1;
}
.html_carousel div.slide  {
	text-align:center;
}
.clearfix {
	float: none;
	clear: both;
}

/* - - - - - - - - - - - - - - -  Slider END  - - - - - - - - - - - - - - - */

.left{
	margin-top:4%;
	width:48%;
	float:left;
	margin-bottom:2%;
}

.left h3{
	font-family:Cookie, Arial, Helvetica, sans-serif;
	font-size:180%;
	font-weight:normal;
	text-align:center;
	color:#f38094;
	margin-bottom:5%;
	text-shadow: 0 1px 1px #dadada;
}

.left p{
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:100%;
	line-height:140%;
}

.left p a{
	color:#f38094;
	text-decoration:none;
}
	
.right{
	margin-top:4%;
	width:48%;
	float:right;
	margin-bottom:2%;
}

/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6, h7 {
	font-family: Header, Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	color: #000000;
	
}

h1{font-size:2.3em;	margin-bottom:0.75em; line-height:1.5;}
h2{font-size:2em;	margin-bottom:1em; line-height:1.4em;}
h3{font-size:1.5em; margin-bottom:1em; line-height:1.3;}
h4{font-size:1.3em;	margin-bottom:0.8em; line-height:auto; text-shadow: none; font-weight:bold;}
h5{font-size:1.2em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}
h6{font-size:1.1em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}
h7{font-size:1em; margin-bottom:0.4em; text-shadow: none; line-height:auto;}

p{
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:100%;
	line-height:140%;
}

p a{
	color:#f38094;
	text-decoration:none;
}


/* ----------------------- WORK LINKS START ------------------------- */
#work{
	width:1000px;
	margin:3% auto 3% auto;
}

.item{

	width:240px;
	height:215px;
	background-color:#000;
	margin:10px ;
	float:left;
	-webkit-box-shadow: 0 1px 3px #c3c3c3;
    -moz-box-shadow: 0 1px 3px #c3c3c3;
    box-shadow: 0 1px 3px #c3c3c3;  
	overflow:hidden;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	-moz-transition: box-shadow 0.2s ease-in-out;
	-o-transition: box-shadow 0.2s ease-in-out;
	-ms-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

.item:hover{
	-webkit-box-shadow: 0 0 8px #3972f4, 0 0 8px #3972f4;
    -moz-box-shadow: 0 0 8px #3972f4,  0 0 8px #3972f4;
    box-shadow: 0 0 8px #3972f4,  0 0 8px #3972f4; 
}
	

.item img{
	display:block;
	width:100%;
	-webkit-box-shadow: 0 2px 1px #c3c3c3;
    -moz-box-shadow: 0 2px 1px #c3c3c3;
    box-shadow: 0 2px 1px #c3c3c3;
	
	opacity:1;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	
}

.item img:hover{
	opacity:1;
}


.item p{
	font-family: Cookie Light, Arial, Helvetica, sans-serif;
	font-size:105%;
	font-weight:normal;
	padding:5px 0 0 8px;
	color:#fff;
	text-decoration:none;
	line-height:1.3;
}

.item p a{
	text-decoration:none;
	color:#2d2d2d;
}


.katitem{
	height:187px;
	width:250px;
	background-color:#fff;
	margin:10px ;
	float:left;
	-webkit-box-shadow: 0 1px 3px #c3c3c3;
    -moz-box-shadow: 0 1px 3px #c3c3c3;
    box-shadow: 0 1px 3px #c3c3c3;  
	overflow:hidden;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	-moz-transition: box-shadow 0.2s ease-in-out;
	-o-transition: box-shadow 0.2s ease-in-out;
	-ms-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

.katitem:hover{
	-webkit-box-shadow: 0 0 8px #3972f4, 0 0 8px #3972f4;
    -moz-box-shadow: 0 0 8px #3972f4,  0 0 8px #3972f4;
    box-shadow: 0 0 8px #3972f4,  0 0 8px #3972f4; 
}
	

.katitem img{
	display:block;
	width:100%;
	-webkit-box-shadow: 0 2px 1px #c3c3c3;
    -moz-box-shadow: 0 2px 1px #c3c3c3;
    box-shadow: 0 2px 1px #c3c3c3;
	
	opacity:1;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	
}

.katitem img:hover{
	opacity:1;
}


.katitem p{
	font-family: Cookie Light, Arial, Helvetica, sans-serif;
	font-size:105%;
	font-weight:normal;
	padding:5px 0 0 8px;
	color:#fff;
	text-decoration:none;
	line-height:1.3;
}

.katitem p a{
	text-decoration:none;
	color:#2d2d2d;
}


.kapcsTermekitem{
	height:200px;
	width:180px;
	background-color:#fff;
	margin:10px ;
	float:left;
	-webkit-box-shadow: 0 1px 3px #c3c3c3;
    -moz-box-shadow: 0 1px 3px #c3c3c3;
    box-shadow: 0 1px 3px #c3c3c3;  
	overflow:hidden;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	-moz-transition: box-shadow 0.2s ease-in-out;
	-o-transition: box-shadow 0.2s ease-in-out;
	-ms-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
	text-align:center;
}

.kapcsTermekitem p{
	font-family: Cookie Light, Arial, Helvetica, sans-serif;
	font-size:105%;
	font-weight:normal;
	padding:5px 0 0 8px;
	color:#000;
	text-decoration:none;
	line-height:1.3;
	
}


/* ----------------------- WORK LINKS END ------------------------- */


#bottom h3{
	margin:4% 0 3% 0;
	font-family:Cookie, Arial, Helvetica, sans-serif;
	font-size:190%;
	font-weight:normal;
	text-align:center;
	color:#f38094;
	text-shadow: 0 1px 1px #c1c1c1;
}


#footer{
	width:100%;
	height:450px;
	padding:10px 0;
	background-color:#2d2d2d;
}

.icon{
	float:right;
	width:32px;
	margin:95px 0 2px 4%;
	opacity:0.85;
}

.icon:hover{
	opacity:1;
}

.social{
	color:#f38094;
}


/* ----------------------------- FORM ----------------------------------- */

.left h4{
	font-family:Cookie, Arial, Helvetica, sans-serif;
	font-size:180%;
	font-weight:normal;
	color:#f38094;
	margin-bottom:10px;
}

#formwrap{
	width:100%;
}

.formstyle { 
	border: 1px solid #ccc;
	color: #000;
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:14px;
	width: 95%;
	background-color:rgba(255,255,255,1);
	background-image:url(../images/backgroundtexture.png);
	margin-bottom:10px;
	opacity:0.9;
	padding:3px;
	-webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   border-radius:2px;
}

.formstyletwo { 
	color: #FFF;
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:15px;
	text-align:left;

	background-color:#2d2d2d;
	border:0px;
	
}

.formstyletwo:hover { 
	color:#f38094;
	cursor:pointer;

}

textarea{ 
	border: 1px solid #ccc;
	color: #000;
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:14px;
	width:95%;
	height:80px;
	background-color:rgba(255,255,255,1);
	background-image:url(../images/backgroundtexture.png);
	margin-bottom:10px;
	border-radius:2px;
	padding:3px;
	opacity:0.9;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}


input:focus, input.focused, textarea:focus, textarea.focused {  color: #3e3e3e; opacity:1;}

#error{
	color:#FF7471;
	float:left;
	font-family:Regular, Arial, Helvetica, sans-serif, "Helvetica Neue Light";
	font-size:15px;
}

#error ul{
	list-style-type: none;
	padding-top:5px;
}
	

/* -- Make the highlight colours pretty -- */
::selection      { background:#f38094; color:#FFF;}
::-moz-selection  { background:#f38094; color:#FFF;}


	#menu a img{
		padding:0;
		margin:0;
		width:19.5%;
	}	

/* ---------------------- RESPONSIVE STUFF - ONLY TOUCH IF YOUR'E CONFIDENT WITH CSS ---------------------- */


@media only screen and (max-width: 1279px) {
	.wrapper{
		width:80%;
	}
	.katitem{
		width:164px;
		height:123px;
		margin:5px;
	}	
}

@media only screen and (max-width: 1105px) {
	
	#work{
		width:900px;
}

	.katitem{
		width:164px;
		height:123px;
		margin:5px;
	}	

	.item {
		width:164px;
		height:170px;
		margin:8px;
	}

}

@media only screen and (max-width: 999px) {
	
	.likeBtns
	{
		display: none;
	}	
	

	.katitem{
		width:136px;
		height:102px;
		margin:5px;
	}	
	.item{
		width:136px;
		height:144px;
		margin:7px;
	}
	
	.item h3{
		font-size:90%;
	}
	
	.item p{
		font-size:80%;
	}
}

@media only screen and (max-width: 835px) {
	
	#footer{
		height:460px;
	}		
	
	.likeBtns
	{
		display: none;
	}	
	
	#work{
		width:650px;	
	}

	.katitem{
		width:116px;
		height:87px;
		margin:5px;
	}	
	
	.item{
		width:116px;
		height:121px;
		margin:7px;
	}
	
	.item h3{
		font-size:75%;
	}
	
	.item p{
		font-size:80%;
	}
}

@media only screen and (max-width: 860px) {
	
	#footer{
		height:460px;
	}		
	
	.likeBtns
	{
		display: none;
	}	
	
	header h1{
		font-size:110%;
	}
	
	header h2{
		font-size:80%;
	}
	
	
}

@media only screen and (max-width: 720px) {
	
	#footer{
		height:560px;
	}	
	
	#menu a img{
		width:40%;
	}	
	
	.likeBtns
	{
		display: none;
	}
	
	
		
	h1{font-size:1.9em;margin-bottom:0.75em;line-height:1.7;}
	h2{font-size:1.7em;margin-bottom:1em;line-height:1.5;}
	h3{font-size:1.5em;	margin-bottom:1em;line-height:1.3em;}
	h4{font-size:1.1em;	margin-bottom:0.8em;line-height:auto;font-weight:bold;}
	h5,h6{font-size:1em;margin-bottom:0.8em;line-height:auto;}	
	
	.item h3 
	{
		margin:0;
	}
	
	
	body{-webkit-text-size-adjust:none;}	
	
	.grids{margin:0!important;width:auto!important;}
	[class^="grid-"],
	.grids [class^="grid-"]{
		width:auto!important;
		float:none!important;
		/*margin:0!important;*/
	}	
	
	[class^="grid-"]{
		padding-bottom:5px
	}
	
	#logo{
		width:150px;
		display:block;
		margin:auto;
		margin-bottom:5%;
	}
	
	nav{
		width:100%;
	}
	
	header h1{
		font-size:100%;
		margin-bottom:5%;
	}
	
	header h2{
		font-size:60%;
	}
	
	.left{
		width:100%;
	}
	
	.right{
		width:100%;
	
	}
	
	#work{
		width:460px;	
}

	.katitem{
		width:210px;
		height:157px;
		margin:5px;
	}

	.item{
		width:210px;
		height:215px;
		margin:10px;
	}
	
	.item h3{
		font-size:130%;
	}
	
	.item p{
		font-size:90%;
	}
	
	
}

@media only screen and (max-width: 510px) {
	#footer{
		height:600px;
	}	
	
	.likeBtns
	{
		display: none;
	}
	
	#work{
		width:300px;	
	}

	.katitem{
		width:220px;
		height:165px;
		margin:5px 0;
	}		
	
	.item{
		width:136px;
		height:140px;
		margin:7px;
	}
	
	.item h3{
		font-size:75%;
	}
	
	.item p{
		font-size:80%;
	}
}