/* Author: Roger Andersson */

/* =============================================================================
   Mobil
   ========================================================================== */

@media (max-width: 767px) {
	.body {
		background-color: rgb(66, 65, 60);
		background-position: 0% 0%;
		background-repeat: repeat;
		background-attachment: scroll;
		background-size: auto;
		}
	
	.wrapper {
		position: relative;
		min-height: 100vh;
		width: clamp(320px, auto, 480px);
		margin-left: 0px;
		margin-right: 0px;
		background-image:url("../../img/bgs/BakgrundY480-blur.jpg");
		background-position: 0% 0px;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: 100%;
		-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
		-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
		box-shadow: 0px 0px 0px rgba(0,0,0,0);
		margin-top: 0px;
		float: none;
		clear: none;
		}
	
	.header {
		float: none;
		width: auto;
		height: clamp(50px, 100%, 75px);
		margin-top: 0px;
		margin-left: 0px;
		clear: none;
		background-color: rgba(40,40,40,0.30);
	}
	
	#logga768 {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		clear: none;
		color: rgb(0, 0, 0);
		display: block;
	}
	
	.sidebar {
		float: none;
		position: static;
		width: auto;
		hight: auto;
		min-height: 100vh;
		margin-top: 17%;
		clear: none;
		margin-left: 0px;
		top: 0px;
		left: 0px;
		display: none;
	}
	
	#portfolio {
		float: none;
		width: clamp(100px, auto, 200px);
		height: clamp(100px, auto, 200px);
		max-hight: 100%;
		padding-top: 0%;
		padding-bottom: 0%;
		padding-right: 33%;
		padding-left: 33%;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#info {
		float: none;
		width: clamp(100px, auto, 200px);
		height: clamp(100px, auto, 200px);
		padding-top: 10%;
		padding-bottom: 0%;
		padding-right: 33%;
		padding-left: 33%;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#kontakt {
		float: none;
		width: clamp(100px, auto, 200px);
		height: clamp(100px, auto, 200px);
		padding-top: 10%;
		padding-bottom: 0%;
		padding-right: 33%;
		padding-left: 33%;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#about {
		float: left;
		width: 100%;
		height: auto;
		max-heigth: 973px;
		min-height: 100vh;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		-khtml-border-radius: 0px;
		border-radius: 0px;
	    clear: none;
		background-color:rgba(40,40,40,0.30);
	}
	
	#text {
		padding-top: 6%;
		padding-left: 3%;
		padding-right: 3%;
	}
	
	#textspan {
		float: none;
		font-size: 1em;
		text-align: left;
		font-weight: normal;
		line-height: 1.2em;
		word-wrap: break-word;
		margin-left: auto;
		margin-right: auto;
		clear: none;
		color: rgb(255, 255, 255);
		font-family: Verdana, Geneva, sans-serif;
	}		
	
	@media
	only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
	only screen and (max-width: 480px) and (min--moz-device-pixel-ratio: 2),
	only screen and (max-width: 480px) and (-o-min-device-pixel-ratio: 2/1),
	only screen and (max-width: 480px) and (min-device-pixel-ratio: 2),
	only screen and (max-width: 480px) and (min-resolution: 192dpi),
	only screen and (max-width: 480px) and (min-resolution: 2dppx) {
		.wrapper {
			background-image:url("../../img/bgs/BakgrundY480-blur-hi-res.jpg");
		}	
	}
}

/* =============================================================================
   Tablet portrait
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.body {
		background-color: rgb(66, 65, 60);
		background-position: 0% 0%;
		background-repeat: repeat;
		background-attachment: scroll;
		background-size: auto;
    }
    
    .wrapper {
        position: relative;
		min-height: 100vh;		
   		height: clamp(1024px, 100vh, 1366px);
   		width: clamp(768px, auto, 1024px);
		margin-left: 0px;
		margin-right: 0px;
		background-image:url("../../img/bgs/BakgrundY1024-blur.jpg");
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 100%;
        -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        box-shadow: 0px 0px 0px rgba(0,0,0,0);
        margin-top: 0px;
        float: none;
        clear: none;
    }
	
	.header {
		float: none;
		width: auto;
		height: 128px;
		margin-top: 0px;
		margin-left: 0px;
		clear: none;
		background-color: rgba(40,40,40,0.30);
	}
	
	#logga768 {
		float: left;
		width: auto;
		max-width: 100%;
		height: auto;
		max-hight: 100%;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
		display: block;
	}
	
	.sidebar {
		float: right;
		position: static;
		width: 164px;
		hight: 648px;
		margin-top: 10%;
		top: 0px;
		left: 0px;
		clear: none;			
	}
	
	#portfolio {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 20%;
		padding-bottom: 20%;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 10%;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#info {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 20%;
		padding-bottom: 20%;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 10%;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#kontakt {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 20%;
		padding-bottom: 20%;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 10%;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#about {
		float: left;
		position: relative;
		top: 0px;
		left: 0px;
		height: auto;
		width: 60%;
		max-height: auto;
		max-width: 650px;
		margin-top: 17%;
		margin-left: 12%;
		margin-right: auto;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-khtml-border-radius: 6px;
		border-radius: 6px;
		clear: none;
		background-color:rgba(40,40,40,0.30);
	}
	
	#text {
		padding-top: 5%;
		padding-left: 15%;
		padding-right: 15%;
	}
	
	#textspan {
		float: none;
		font-size: 1em;
		text-align: left;
		font-weight: normal;
		line-height: 1.2em;
		word-wrap: break-word;
		min-height: 85px;
		clear: none;
		color: rgb(255, 255, 255);
		font-family: Verdana, Geneva, sans-serif;
	}	
		
	@media
	only screen and (min-width: 768px) and (max-width: 1024) and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-width: 768px) and (max-width: 1024) and (min--moz-device-pixel-ratio: 2),
	only screen and (min-width: 768px) and (max-width: 1024) and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-width: 768px) and (max-width: 1024) and (min-device-pixel-ratio: 2),
	only screen and (min-width: 768px) and (max-width: 1024) and (min-resolution: 192dpi),
	only screen and (min-width: 768px) and (max-width: 1024) and (min-resolution: 2dppx) {
		.wrapper {
			background-image:url("../../img/bgs/BakgrundY1024-blur-hi-res.jpg");
		}
	}
}	 	

/* =============================================================================
   Tablet landscape
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1366px) {
	.body {
		background-color: rgb(66, 65, 60);
		background-position: 0% 0%;
		background-repeat: repeat;
		background-attachment: scroll;
		background-size: auto;
	}
		
	.wrapper {
		position: relative;
		max-height: 100vh;
		height: clamp(1024px, 100vh, 1067px);
		width: clamp(1025px, auto, 1366px);
		margin-left: auto;
		margin-right: auto;
		background-image:url("../../img/bgs/BakgrundX1366-blur.jpg");
		background-position: 0% 0px;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: 100%;
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		float: none;
		margin-top: 0px;
		clear: none;
	}
	
	.header {
		float: none;
		width: auto;
		height: 128px;
		margin-top: 0px;
		margin-left: 0px;
		clear: none;
		background-color: rgba(40,40,40,0.30);
	}
	
	#logga768 {
		float: left;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		clear: none;
		color: rgb(0, 0, 0);
		display: block;
	}  
	
	.sidebar {
		float: right;
		position: static;
		width: 164px;
		hight: 648px;
		margin-top: 0px;
		top: 0px;
		left: 0px;
		clear: none;			
	}	
	
	#portfolio {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 80px;
		padding-bottom: 30px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#info {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 30px;
		padding-bottom: 30px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#kontakt {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 30px;
		padding-bottom: 30px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	 #about {
		 float: none;
		 position: relative;
		 top: 0px;
		 left: 0px;
		 height: auto;
		 width: 50%;
		 max-height: auto;
		 max-width: 650px;
		 margin-top: 7%;
		 margin-left: auto;
		 margin-right: auto; 
		 -webkit-border-radius: 6px;
		 -moz-border-radius: 6px;
		 -khtml-border-radius: 6px;
		 border-radius: 6px;
		 clear: none;
		 background-color:rgba(40,40,40,0.30);
	}
	
	#text {
		padding-top: 7%;
		padding-left: 15%;
		padding-right: 15%;
	}
	
	#textspan {
		float: none;
		font-size: 1em;
		text-align: left;
		font-weight: normal;
		line-height: 1.2em;
		word-wrap: break-word;
		min-height: 85px;
		clear: none;
		color: rgb(255, 255, 255);
		font-family: Verdana, Geneva, sans-serif;
	}
	
	@media
	only screen and (min-width: 1025px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-width: 1025px) and (max-width: 1366px) and (min--moz-device-pixel-ratio: 2),
	only screen and (min-width: 1025px) and (max-width: 1366px) and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-width: 1025px) and (max-width: 1366px) and (min-device-pixel-ratio: 2),
	only screen and (min-width: 1025px) and (max-width: 1366px) and (min-resolution: 192dpi),
	only screen and (min-width: 1025px) and (max-width: 1366px) and (min-resolution: 2dppx) {
		.wrapper {
			background-image:url("../../img/bgs/BakgrundX1366-blur-hi-res.jpg");
		}	
	}

} 	

/* =============================================================================
   Laptop
   ========================================================================== */

@media (min-width: 1367px) and (max-width: 1920px) {
	.body {
		background-color: rgb(66, 65, 60);
		background-position: 0% 0%;
		background-repeat: repeat;
		background-attachment: scroll;
		background-size: auto;
	}
	
	.wrapper {
		position: relative;
		max-height: 100vh;
		height: clamp(1024px, 100vh, 1280px);
		width: clamp(1367px, auto, 1920px);
		margin-left: auto;
		margin-right: auto;
		background-image:url("../../img/bgs/BakgrundX1920-blur.jpg");
		background-position: 0% 0px;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: 100%;
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		float: none;
		margin-top: 0px;
		clear: none;
	}
	
	.header {
		float: none;
		width: auto;
		height: 128px;
		margin-top: 0px;
		margin-left: 0px;
		clear: none;
		background-color: rgba(40,40,40,0.30);
	}
	
	#logga768 {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		clear: none;
		color: rgb(0, 0, 0);
		display: block;
	}   
	
	.sidebar {
		float: right;
		position: static;
		width: 164px;
		hight: 648px;
		margin-top: 0px;
	    margin-left: 0px;
		top: 0px;
		left: 0px;
		clear: none;			
	}

	#portfolio {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 80px;
		padding-bottom: 30px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#info {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 40px;
		padding-bottom: 30px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#kontakt {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 40px;
		padding-bottom: 30px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	
	 #about {
		 float: none;
		 position: relative;
		 top: 0px;
		 left: 0px;
		 height: auto;
		 width: 36%;
		 max-height: auto;
		 max-width: 700px;
		 margin-top: 7%;
		 margin-left: auto;
		 margin-right: auto; 
		 -webkit-border-radius: 6px;
		 -moz-border-radius: 6px;
		 -khtml-border-radius: 6px;
		 border-radius: 6px;
		 clear: none;
		 background-color:rgba(40,40,40,0.30);
	}
	
	#text {
		padding-top: 7%;
		padding-left: 15%;
		padding-right: 15%;
	}
	
	#textspan {
		float: none;
		font-size: 1em;
		text-align: left;
		font-weight: normal;
		line-height: 1.2em;
		word-wrap: break-word;
		min-height: 85px;
		clear: none;
		color: rgb(255, 255, 255);
		font-family: Verdana, Geneva, sans-serif;
	}
	
	@media
	only screen and (min-width: 1367px) and (max-width: 1920px) and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-width: 1367px) and (max-width: 1920px) and (min--moz-device-pixel-ratio: 2),
	only screen and (min-width: 1367px) and (max-width: 1920px) and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-width: 1367px) and (max-width: 1920px) and (min-device-pixel-ratio: 2),
	only screen and (min-width: 1367px) and (max-width: 1920px) and (min-resolution: 192dpi),
	only screen and (min-width: 1367px) and (max-width: 1920px) and (min-resolution: 2dppx) {
		.wrapper {
			background-image:url("../../img/bgs/BakgrundX1920-blur-hi-res.jpg");
		}
	}
	
} 	
	
/* =============================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1921px) and (max-width: 2560px) {  
	.body {
		background-color: rgb(66, 65, 60);
		background-position: 0% 0%;
		background-repeat: repeat;
		background-attachment: scroll;
		background-size: auto;
	}   

	.wrapper {
		position: relative;
		max-height: 100vh;
		height: clamp(1024px, 100vh, 2048px);
		width: clamp(1921px, auto, 2560px);
		margin-left: auto;
		margin-right: auto;
		background-image: url("../../img/bgs/BakgrundX2560-blur.jpg");
		background-position: 0% 0px;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: 100%;
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		float: none;
		margin-top: 0px;
		clear: none;
	}
	
	.header {
		float: none;
		width: auto;
		height: 128px;
		margin-top: 0px;
		margin-left: 0px;
		clear: none;
		background-color: rgba(40,40,40,0.30);
	}
	
	#logga768 {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		clear: none;
		color: rgb(0, 0, 0);
		display: block;
	}   
	
	.sidebar {
		float: right;
		position: static;
		width: 164px;
		hight: 1296px;
		margin-top: 0px;
	    margin-left: 0px;
		top: 0px;
		left: 0px;
		clear: none;
	}   			
	
	#portfolio {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 140px;
		padding-bottom: 40px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#info {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 40px;
		padding-bottom: 40px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#kontakt {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 40px;
		padding-bottom: 40px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}	
		
	 #about {
		 float: none;
		 position: relative;
		 top: 0px;
		 left: 0px;
		 height: auto;
		 width: 27%;
		 max-height: auto;
		 max-width: 700px;
		 margin-top: 7%;
		 margin-left: auto;
		 margin-right: auto; 
		 -webkit-border-radius: 6px;
		 -moz-border-radius: 6px;
		 -khtml-border-radius: 6px;
		 border-radius: 6px;
		 clear: none;
		 background-color:rgba(40,40,40,0.30);
	}
	
	#text {
		padding-top: 7%;
		padding-left: 15%;
		padding-right: 15%;
	}
	
	#textspan {
		float: none;
		font-size: 1em;
		text-align: left;
		font-weight: normal;
		line-height: 1.2em;
		word-wrap: break-word;
		min-height: 85px;
		clear: none;
		color: rgb(255, 255, 255);
		font-family: Verdana, Geneva, sans-serif;
	}	
	
} 	

/* =============================================================================
   Desktop 4K display
   ========================================================================== */

@media (min-width: 2561px) {    
	.body {
		background-color: rgb(66, 65, 60);
		background-position: 0% 0%;
		background-repeat: repeat;
		background-attachment: scroll;
		background-size: auto;
	}
	
	.wrapper {
		position: relative;
		max-height: 100vh;
		height: clamp(1024px, 100vh, 2048px);
		width: clamp(2561px, 100%, inherit);
		margin-left: 0px;
		margin-right: 0px;
		background-image:url("../../img/bgs/BakgrundX3440-blur.jpg");
		background-position: 0% 0px;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: 100%;
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
		float: none;
		margin-top: 0px;
		clear: none; 
	}
	
	.header {
		float: none;
		width: auto;
		height: 128px;
		margin-top: 0px;
		margin-left: 0px;
		clear: none;
		background-color: rgba(40,40,40,0.30);
	}
	
	#logga768 {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		clear: none;
		color: rgb(0, 0, 0);
		display: block;
	} 
	
	.sidebar {
		float: right;
		position: static;
		width: 164px;
		hight: 1296px;
		margin-top: 0px;
	    margin-left: 0px;
		top: 0px;
		left: 0px;
		clear: none;			
	}
	
	#portfolio {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 120px;
		padding-bottom: 45px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#info {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 45px;
		padding-bottom: 45px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	#kontakt {
		float: right;
		width: 100px;
		height: 100px;
		padding-top: 45px;
		padding-bottom: 45px;
		padding-right: 32px;
		padding-left: 32px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		clear: none;
		color: rgb(0, 0, 0);
	}
	
	 #about {
		 float: none;
		 position: relative;
		 top: 0px;
		 left: 0px;
		 height: auto;
		 width: 20%;
		 max-height: auto;
		 max-width: 700px;
		 margin-top: 5%;
		 margin-left: auto;
		 margin-right: auto; 
		 -webkit-border-radius: 6px;
		 -moz-border-radius: 6px;
		 -khtml-border-radius: 6px;
		 border-radius: 6px;
		 clear: none;
		 background-color:rgba(40,40,40,0.30);
	}
	
	#text {
		padding-top: 7%;
		padding-left: 20%;
		padding-right: 20%;
	}
	
	#textspan {
		float: none;
		font-size: 1em;
		text-align: left;
		font-weight: normal;
		line-height: 1.2em;
		word-wrap: break-word;
		min-height: 85px;
		clear: none;
		color: rgb(255, 255, 255);
		font-family: Verdana, Geneva, sans-serif;
	}

}