/* ------------------------------------------
Style Sheet for Website's Creato.se

version: 2.2
last modified:
author: Jonathan Selwall
email: hello@creato.se
website: http://creato.se
---------------------------------------------*/


/* -------------------------------------------
CONTENTS:
=Resets & General
=Nav
=Background Styles
=Wrappers
=Start Content
---------------------------------------------*/


/* ----------------- RESET ----------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote p:before, q:before{
	content:"\201C"
	}

blockquote p:after, q:after{
	content:"\201D";
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
}


/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

    	html, body {
    		height: 100%;
    		margin: 0;
    		width: 100%;
    	}


    	p a{
    		color: #ff5760;
    	}

    	h2{
    		font-size: 34px;
    		font-family: lato, sans-serif;
    		font-weight: 300;
    	}

    	span.red{
    		color:#ff5760;
    		font-weight: 500;
    	}

    	.half{
    		width: 50%;
    		float:left;
    		padding:0 10px;
    	}




/* -------- NAVIGATION BAR -------- */

#menyknapp{
	left:25px;
	top:25px;
	width: auto;
	position: fixed;
	z-index: 9999999;
	padding: 10px;
}
	#menyknapp > button{
		border: none;
		background: url(../images/sidebar_icon@2x.png);
		background-size: cover;
		outline: none;
		color: #fff;
		display: block;
		width: 27px;
		height: 20px;
		cursor: pointer;
	}

	#menyknapp > button:hover{
		border:none;
	}

	#menyknapp > button.active {
		border:none;
	}

	.menyn{
		margin-top:100px;
		font-family: lato, sans-serif;
		font-weight: 300;
		line-height: 30px;
	}
		.menyn a{
			padding-left: 32px;
			color: #979797;
			font-size: 14px;
		}
			.menyn a:hover{
				   background-color: #f95c65; 
				   background-image: -webkit-gradient(left, (#f95e58), (#f95c65));
				   background-image: -webkit-linear-gradient(left, #f95e58, #f95c65); 
				   background-image:    -moz-linear-gradient(left, #f95e58, #f95c65);
				   background-image:     -ms-linear-gradient(left, #f95e58, #f95c65);
				   background-image:      -o-linear-gradient(left, #f95e58, #f95c65);
					color: #fff;
			}

	.meny-kontakt{
		position: absolute;
	    bottom: 0;
	    padding-left: 32px;
	    padding-bottom: 32px;
	}

		.meny-kontakt h3{
			font-family: lato, sans-serif;
			font-weight: 300;
			color: #fff;
			padding-bottom: 13px;
			font-size: 14px;
		}

		.meny-kontakt p{
			font-family: lato, sans-serif;
			font-weight: 300;
			color: #979797;
			padding-bottom: 13px;
			font-size: 14px;
		}

		.meny-kontakt a{
			font-family: lato, sans-serif;
			font-weight: 300;
			color: #f95e58;
			font-size: 14px;
		}
			.kontakt a:hover{
				background: none;
				color: #fff;
			}

.black{
	background: #151620;
			
}

.transparent{
	background: none;
				
			
}



/* -------- Background Styles -------- */

.bg{
	width: 100%; 
	float:left;
	clear: both;
	min-height: 100%;
 }

#start{
	background: url(../images/startbg.jpg) no-repeat center center; 
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100%;
	clear: both;
	position: relative;
}



#tjanster{
	position: relative;
	background: #eaedf2;
	min-height:100%;
	clear: both;
}

#kundcase{
	background: url(../images/bg3.jpg) no-repeat center center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100%;
	position: relative;
	clear: both;
}



#om{
	background: url(../images/bg4.jpg) no-repeat center center;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100%;
	position: relative;
	clear: both;
}

#footer{
	background: #20232b;
	min-height: 100%;
	position: relative;
	clear: both;
}

/* -------- Wrappers & Globals -------- */

.wrapper{
	margin: 0 auto;
	width:100%;
    max-width:960px;
}

.left{
	float:left;
}

.right{
	float:right;
}

::selection {
	background: #ff5760; /* Safari */
	}
::-moz-selection {
	background: #ff5760; /* Firefox */
}

#awwwards {
	position:absolute;
	top:40px;
	right:0px;
	z-index:1040;
}

/* CHANGE THE URL PATH TO THE RIBBON YOU WANT TO DISPLAY */	
#awwwards a {
	width:70px;
	height:105px;
	text-indent:-8000px;
	display:block;
	background:url('../images/awwwards_sotd_w_right.png') no-repeat;
	overflow:hidden;
}


/* -------- Absolute Centers -------- */


#start-content .absolute-center {
    display:block;
    position:absolute;
    height:500px;
    width:960px;
    right:50%;
    top:50%;
    margin:-250px -480px 0 0;
}

#kundcase-content .absolute-center {
    display:block;
    position:absolute;
    height:300px;
    width:960px;
    right:50%;
    top:50%;
    margin:-150px -480px 0 0;
}

#om-content .absolute-center {
    display:block;
    position:absolute;
    height:400px;
    width:960px;
    right:50%;
    top:50%;
    margin:-200px -480px 0 0;
}



#footer-content .absolute-center {
    display:block;
    position:absolute;
    height:700px;
    width:960px;
    right:50%;
    top:50%;
    margin:-350px -480px 0 0;
}



/* -------- Start -------- */





#start-content{
	width: 100%;
	height: 100%;
	text-align: center;
}
	
	#start-content .words{
		padding-bottom: 80px;
		position: relative
	}

	#start-content h1 {
		font-family: 'Lato', sans-serif;
		font-size: 40px;
		font-weight: 300;
		color: #fff;
	}

		#start-content strong {
			color: #ff5760;
			font-weight: 400;
		}

.knapp{
	position: relative;
	width: auto;
	height: 40px;
	margin: 0 auto;
	text-align: center;
	line-height: 40px;
	clear: both;
}

	.knapp a{
			font-family: 'Lato', sans-serif;
			padding: 10px 30px 10px 30px;
			border-radius: 5px;
			border: 1px solid;
			border-color: rgba(255,255,255,0.3);
			color: #fff;
			font-size: 18px;
			font-weight: 300;
	}

		.knapp a:hover{
			background: rgba(11,12,23,0.25);
		}

		/* -------- START LOGO ANIMATION -------- */

		#start-logo{
			margin: 0 auto;
			width: 300px;
			height: 220px;
			position: relative;
			margin-bottom: 50px;
		}

		.planet1{
			width: 95px;
		    height: 95px;
		    margin:-47.5px 0 0 -47.5px;
			z-index: 10;
			position: absolute;
		    top: 50%;
		    left: 50%;
		    -webkit-animation:spin 4s linear infinite;
		    -moz-animation:spin 4s linear infinite;
		    animation:spin 4s linear infinite;

		}
		@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
		@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
		@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

		.planet2{
			z-index: 20;
			position: absolute;
		    top: 50%;
		    left: 50%;
		    width: 164px;
		    height: 164px;
		    margin:-82px 0 0 -82px;
		    -webkit-animation:spinn 4s linear infinite;
		    -moz-animation:spinn 4s linear infinite;
		    animation:spinn 4s linear infinite;
		}
		@-moz-keyframes spinn { 100% { -moz-transform: rotate(-360deg); } }
		@-webkit-keyframes spinn { 100% { -webkit-transform: rotate(-360deg); } }
		@keyframes spinn { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

		.logo{
			z-index: 30;
			width: 40px;
		    height: 40px;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    margin:-20px 0 0 -20px;
		}

/* -------- TJÄNSTER -------- */

#tjanster-content{
	float:left;
	width: 100%;
	padding-bottom: 150px;
}

	#tjanster-content h2{
			font-family: 'Lato', sans-serif;
			font-weight: 300;
			color: #3e3e3e;
	}

		#tjanster-content h2 span{
			color: #7b7b7b;
		}

		#tjanster-content .words{
			margin-top: 240px;
			text-align: center;
			margin-bottom: 50px;
		}

		.tjanst1 img, .tjanst2 img{
		margin: 0 auto;
		display: block;
		max-width: 340px;
	}
		
	.tjanst1{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 130px;
		padding-bottom: 130px;
		border-bottom: 1px solid #d8dade;
	}

		.tjanst1:last-child{
			border-bottom: none;
		}

	.tjanst2{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 130px;
		padding-bottom: 130px;
		border-bottom: 1px solid #d8dade;
	}

	.tjanst-container{
		display: table;
	}

	.tjanst-bild{
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}

		.tjanst-info{
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}

			.tjanst-info p{
				font-family: 'Lato', sans-serif;
				font-size: 14px;
				font-weight: 300;
				color: #3e3e3e;
				line-height: 24px;
			}

			.tjanst-info h3{
				font-family: 'Lato', sans-serif;
				font-size: 20px;
				font-weight: 400;
				color: #3e3e3e;
				padding-bottom: 10px;
			}

/* -------- KUNDCASE -------- */


#kundcase-content{
	width: 100%;
	height: 100%;
	text-align: center;
	float:left;
}

	#kundcase-content blockquote{
			font-family: 'Lato', sans-serif;
			font-size: 55px;
			font-weight: 300;
			font-style: italic;
			color: #fff;
			padding-bottom: 45px;
	}

	#kundcase-content h3{
			font-family: 'Lato', sans-serif;
			font-size: 18px;
			font-weight: 300;
			color: #fff;
			padding-bottom: 70px;
	}




/* -------- OM -------- */

#om-content{
	width: 100%;
	height: 100%;
	float:left;
	font-family: 'Lato', sans-serif;
}

	#om-content h2{

			font-weight: 300;
			color: #fff;
			padding-bottom: 65px;

	}


	#om-content h3{
		font-size: 18px;
		font-weight: 300;
		color: #fff;
		padding-bottom: 70px;
	}

	.name{
		font-size: 18px;
		font-weight: 300;
		color: #fff;
	}

	.skill{
		font-size: 14px;
		font-weight: 300;
		color: #fff;
		line-height: 28px;
	}

	#selwall{
		width: 45%;
		float: left;
	}

	#agren{
		width: 45%;
		float: right;
	}



	.about-text{
		color: #bcbcbc;
		font-size: 14px;
		line-height: 20px;
		padding-top: 30px;
		font-weight: 300;
		font-family: 'Lato', sans-serif;
	}

	.about-links{
		padding-top: 18px;
		line-height: 22px;

	}
		.about-links a{
			font-size: 14px;
		}

			.about-links a:hover{
				color: #ff5760;
			}


	.dribble, .flickr, .codepen{
		display: block;
		font-family: 'Lato', sans-serif;
		color: #bcbcbc;
		text-decoration: underline;
	}
	.dribble:before{
		content: 'Dribble';
	}
	.flickr:before{
		content: 'Flickr';
	}
	.codepen:before{
		content: 'Codepen';
	}


/* -------- FOOTER -------- */

#footer h2{
	color: #bcbcbc;
	text-align: center;
	padding: 120px 0;
	margin-bottom: 30px;
}

.footer-info{
	font-family: Lato, sans-serif;
	color:#bcbcbc;
	font-weight: 300;
}

.pictures,.info{
	padding-left:50px;
	font-size: 18px;
}

.info{
	margin-top:40px;

	line-height: 25px;
}

.copyright{
	clear:both;
	width: 100%;
	text-align: center;
	padding-top: 100px;
		font-family: Lato, sans-serif;
	color:#393c43;
	font-weight: 300;
}



/* -------- EFFECTS -------- */

.ease{
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease; 
}

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


textarea:focus, input:focus, select:focus{
    outline: 0;
}


form.kontakt-form{
	color: #85888f;
	position: relative;
}

input, select, textarea, option{
	background: #1d2027;
	color: #85888f;
	border: 1px solid #191b21;
	padding:10px;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 300;
	border:none;
    outline:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    margin-bottom: 10px;

}

input, select, option{
	height: 50px;

}

input{
	width: 100%;
}

option{
	display: block;
	height: 30px;
	line-height: 30px;
}

select{
	float:left;
	width: 49%;
	   -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';


}

select[name="budget"]{
	float:right;
}

button[type="submit"]{
	background: #ff414b;
	width: 100px;
	padding:10px;
	border:0;
	color:white;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 300;
	position: absolute;
	right:1px;
	bottom:10px;
}

textarea{
	width: 100%;
	max-width: 100%;
	min-height: 160px;
}

::-webkit-input-placeholder {
   color: #85888f;
}

:-moz-placeholder { /* Firefox 18- */
   color: #85888f;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #85888f;
}

:-ms-input-placeholder {  
   color: #85888f;
}



/* ----------------------------- MEDIA QUERIES ---------------------------------- */

/* Landscape phones and down */
@media (max-width: 480px) {

		.half{
    		width: 100%;
    	}


	#awwwards a {
		width:45px;
		height:68px;
		background:url('../images/awwwards_sotd_w_right_mobile.png') no-repeat;
	}


/* ---------------- Start ---------------- */

#start-content .absolute-center {
    display:block;
    position:absolute;
    height:500px;
    width:320px;
    right:50%;
    top:50%;
    margin:-250px -160px 0 0;
}


.wrapper{
	margin: 0 auto;
	width:100%;
    max-width: 960px;
}

#start-content{
	width: 100%;
	height: 700px;
	text-align: center;
}

#start-content h2{
	font-size: 30px;
	padding: 10px;
}


#start, #kundcase, #om{
	background-attachment: scroll;
}


/* ---------------- TJÄNSTER ---------------- */


#tjanster-content{
	width: 100%;
	padding-bottom: 50px;
	text-align: center;
}


		#tjanster-content .words{
			margin-top: 70px;
			text-align: center;
			margin-bottom: 20px;
			padding: 10px;
		}

		.tjanst1 img, .tjanst2 img{
		margin: 0 auto;
		display: block;
	}
		
	.tjanst1{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.tjanst2{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 50px;
		padding-bottom: 50px;
	}


	.tjanst-bild{
		display: none;
	}

		.tjanst-info{
		display: table-cell;
		vertical-align: middle;
		width: 50%;

	}

			.tjanst-info p{
				font-size: 14px;
				font-weight: 300;
				line-height: 24px;
				padding: 10px;
			}

			.tjanst-info h3{
				font-size: 20px;
				font-weight: 400;
				padding-bottom: 10px;
			}


/* ---------------- KUNDCASE ---------------- */


#kundcase-content{
	width: 100%;
	height: 600px;
	text-align: center;
}


#kundcase-content blockquote{
	font-size: 30px;
}


#kundcase-content .absolute-center {
    display:block;
    position:absolute;
    height:300px;
    width:320px;
    right:50%;
    top:50%;
    margin:-150px -160px 0 0;
}

/* ---------------- OM ---------------- */

#om-content{
	width: 100%;
	height: 900px;
	text-align: left;
}


#om-content h2{
	font-weight: 300;
	padding-bottom: 45px;
	padding-left:10px;

}


#om-content .absolute-center {
    display:block;
    position:absolute;
    height:650px;
    width:320px;
    right:50%;
    top:50%;
    margin:-325px -160px 0 0;
}

#agren{
	width: 95%;
	float:left;
	margin-top: 20px;
}

#selwall{
	width: 95%;
	float:left;
}

	#selwall, #agren{
		padding-left:10px;
	}


}


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


textarea:focus, input:focus, select:focus{
    outline: 0;
}


form.kontakt-form{
	color: #85888f;
	position: relative;
}

input, select, textarea, option{
	background: #1d2027;
	color: #85888f;
	border: 1px solid #191b21;
	padding:10px;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 300;
	border:none;
    outline:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    margin-bottom: 10px;

}

input, select, option{
	height: 50px;

}

input{
	width: 100%;
}

option{
	display: block;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}

select{
	float:left;
	width: 49%;
	cursor: pointer;
	-moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';


}

select[name="Budget"]{
	float:right;
}

button[type="submit"]{
	background: #ff414b;
	width: 100px;
	padding:10px;
	border:0;
	color:white;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 300;
	position: absolute;
	right:1px;
	bottom:10px;
	cursor: pointer;
		-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease; 
}

button[type="submit"]:hover{
	background: white;
	color: #ff414b;
}

textarea{
	width: 100%;
	max-width: 100%;
	min-height: 160px;
}




@media (min-width: 480px) and (max-height: 350px) {
.meny-kontakt{
	display: none;
 }

}


/* Landscape phone to portrait tablet */
@media (min-width: 480px) and (max-width: 767px) {

			.half{
    		width: 100%;
    	}
	/* ---------------- Start ---------------- */

#start-content .absolute-center {
    display:block;
    position:absolute;
    height:500px;
    width:480px;
    right:50%;
    top:50%;
    margin:-250px -240px 0 0;
}



#start-content{
	width: 100%;
	height: 600px;
	text-align: center;
}

#start-content h2{
	padding: 10px;
}



	/* ---------------- TJÄNSTER ---------------- */

#tjanster-content{
	float:left;
	width: 100%;
	padding-bottom: 50px;
	text-align: left;
	
}

	#tjanster-content h2{
			padding: 10px;
	}

		#tjanster-content .words{
			margin-top: 70px;
			margin-bottom: 20px;

		}

		.tjanst1 img, .tjanst2 img{
		margin: 0 auto;
		display: block;
	}
		
	.tjanst1{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.tjanst2{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 50px;
		padding-bottom: 50px;
	}


	.tjanst-bild{
		display: none;
	}

		.tjanst-info{
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}

			.tjanst-info p{
				font-size: 14px;
				font-weight: 300;
				line-height: 24px;
				padding: 10px;
				text-align: center;
			}

			.tjanst-info h3{
				font-size: 20px;
				font-weight: 400;
				padding-bottom: 10px;
				text-align: center;
			}

/* ---------------- KUNDCASE ---------------- */


#kundcase-content{
	width: 100%;
	height: 600px;
	text-align: center;
}


#kundcase-content .absolute-center {
    display:block;
    position:absolute;
    height:300px;
    width:480px;
    right:50%;
    top:50%;
    margin:-150px -240px 0 0;
}

/* ---------------- OM ---------------- */

#om-content{
	width: 100%;
	height: 900px;
	text-align: center;
}


#om-content h2{
	font-weight: 300;
	padding-bottom: 45px;
}


#om-content .absolute-center {
    display:block;
    position:absolute;
    height:650px;
    width:480px;
    right:50%;
    top:50%;
    margin:-325px -240px 0 0;
}

#agren{
	width: 100%;
	float:left;
	margin-top: 40px;
}

#selwall{
	width: 100%;
	float:left;
}

	#selwall, #agren{
		padding:0;
	}

	.about-text{
		padding-top: 0;	
		padding: 10px;
	}

	.about-text p{
		padding: 10px;
	}


}



/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

	/* ---------------- START ---------------- */
	#start-content .absolute-center {
    display:block;
    position:absolute;
    height:500px;
    width:750px;
    right:50%;
    top:50%;
    margin:-250px -375px 0 0;
}



#start-content{
	width: 100%;
	height: 600px;
	text-align: center;
}

#start-content h2{
	padding: 10px;
}

	/* ---------------- TJÄNSTER ---------------- */

#tjanster-content{
	float:left;
	width: 100%;
	padding-bottom: 50px;
	text-align: left;
	
}

	#tjanster-content h2{
			padding: 10px;
	}

		#tjanster-content .words{
			margin-top: 70px;
			margin-bottom: 20px;

		}

		.tjanst1 img, .tjanst2 img{
		margin: 0 auto;
		display: block;
	}
		
	.tjanst1{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.tjanst2{
		width: 100%;
		clear: both;
		float:left;
		padding-top: 50px;
		padding-bottom: 50px;
	}



		.tjanst-info{
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}

			.tjanst-info p{
				font-size: 14px;
				font-weight: 300;
				line-height: 24px;
				padding: 20px;
			
			}

			.tjanst-info h3{
				font-size: 20px;
				font-weight: 400;
				padding-bottom: 10px;
				padding-left: 20px;
				
			}


/* ---------------- KUNDCASE ---------------- */


#kundcase-content{
	width: 100%;
	height: 600px;
	text-align: center;
}



#kundcase-content .absolute-center {
    display:block;
    position:absolute;
    height:300px;
    width:740px;
    right:50%;
    top:50%;
    margin:-150px -370px 0 0;
}

/* ---------------- OM ---------------- */

#om-content{
	width: 100%;
	height: 800px;
	
}

#om-content .words{
	
	float:left;
	
}

#om-content h2{
	font-size: 30px;
	font-weight: 300;
	padding-bottom: 45px;
	padding-left: 10px;
}


#om-content .absolute-center {
    display:block;
    position:absolute;
    height:400px;
    width:750px;
    right:50%;
    top:50%;
    margin:-200px -375px 0 0;
    
}

#agren{
	width: 46%;
	float:right;
	margin-right: 10px;
	
}

#selwall{
	width: 48%;
	float:left;
	margin-left: 10px;
}

	#selwall, #agren{
		padding:0;
	}

	.about-text{
		padding-top: 20px;
		padding-bottom: 10px;
		
	}

	.about-text p{
		padding: 20px;
	}

}

/* Large desktop */
@media (min-width: 1200px) { ... }


/* Target any device with retina display (ie iPad 3 and MacBook Pro)*/
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
/* THIS MEDIA QUERY WILL LOAD THE RIBBON OPTIMIZED FOR A DESKTOP OR TABLET DEVICE THAT HAS A RETINA DISPLAY. ie "iPad 3" or "MacBook Pro" */
	#awwwards a {
		background:url('../images/awwwards_sotd_w_right2x.png') no-repeat;
		background-size: 70px 105px;
	}
}

/* Target only smartphone device with retina display (ie iPhone) */
@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* Styles */
/* THIS MEDIA QUERY WILL LOAD THE RIBBON WITH AN OPTIMIZED SIZE FOR MOBILE THAT HAS A RETINA DISPLAY. ie "iPhone 4S" or "iPhone 5" */
	#awwwards a {
		background:url('../images/awwwards_sotd_w_right_mobile2x.png') no-repeat;
		background-size: 45px 68px;
	}
}