@charset "utf-8";
/* CSS Document */

.column2 {
	display: none;
}


/* The sidebar menu */
.sidenav {
  height: 100vh; /* Full-height: remove this if you want "auto" height */
  width: 306px;; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: white; /*#B4B3B3;*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 150px;
}



/* The navigation menu links */
.sidenav a {
  padding: 15px 0px 0px 80px;
  text-decoration: none;
  font-size: 30px;
  color: #818181;
  display: block;
  font-size-adjust: none;
	letter-spacing: 2px;
	word-spacing: 5px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* My name */
.myName {
  padding: 15px 10px 6px 40px;
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: white;
  overflow-x: hidden; /* Disable horizontal scroll */
  font-size: 50px;
  padding-top: 70px;
	font-family:  0;
  text-decoration: none;
	display: block;
	letter-spacing: 2px;
	word-spacing: 5px;
}

.myName a {
	text-decoration: none;
	  display: block; /* Display block instead of inline */
	 color: #000000;

	
}
  

/* Instagram */
.social-icons {
  text-align: 0;
	position: fixed;
	z-index: 2;
	margin-top: 250px;
	margin-left: 30px;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:30px;
  height:30px;
  margin-right: 0px;
}


/* Style page content */
.main {
  height: 100%;
  margin-left: 306px; /* Same as the width of the sidebar */
  background-color: ;
  margin-top: 40px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}




/* image grid */

/*create opacity on gallery images when hovering*/
#img_gal_1_1:hover {opacity: 0.9;}
#img_gal_1_2:hover {opacity: 0.9;}
#img_gal_1_3:hover {opacity: 0.9;}
#img_gal_1_4:hover {opacity: 0.9;}
#img_gal_2_1:hover {opacity: 0.9;}
#img_gal_2_2:hover {opacity: 0.9;}
#img_gal_2_3:hover {opacity: 0.9;}
#img_gal_2_4:hover {opacity: 0.9;}
#img_gal_3_1:hover {opacity: 0.9;}
#img_gal_3_2:hover {opacity: 0.9;}
#img_gal_3_3:hover {opacity: 0.9;}
#img_gal_3_4:hover {opacity: 0.9;}
#img_gal_4_2:hover {opacity: 0.9;}
#img_gal_4_4:hover {opacity: 0.9;}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}


/* Create four equal columns that sits next to each other */
.column {
  flex: 23%;
  max-width: 31%;
  padding: 0 4px;
  margin-top:-100px;
  margin-left:8px;
}


.column img {
  margin-top: 15px;
  margin-left: 0%;

  vertical-align: middle;
  width: 100%;

}



.aboutMePhoto img {
	margin: 70px 60px 30px;
	width: 30%;
	heigh: 30%;
	
}

.aboutMeText {
	/*background-color: #9F9D9D;*/
	position: fixed;
	margin-top: -25vw;
	margin-right: 30vw;
	margin-left: 30vw;
	font-size: 20px;
	font-family:  ;
	letter-spacing: 2px;
	word-spacing: 5px;
	line-height: 30px;
}


.ProjectTitles {
	background-color: white;
	margin-top: 5vw;
	margin-right: 10vw;
	margin-left: 40vw;
	font-size: 40px;
	font-family:  ;
	letter-spacing: 2px;
	word-spacing: 5px;
	line-height: 120px;
}

.ProjectTitles a {
	text-decoration: none;
	  display: block; /* Display block instead of inline */
	 color: #000000;
}

.ProjectTitles a:hover {
  color: #f1f1f1;
}








/* Responsive layout tablet - makes one column-layout instead of four columns */
@media screen and (max-width: 1000px) {
	
		.aboutMePhoto img {
	margin: 40px 0px 30px;
	width: 40%;
	heigh: 40%;
	
}

.aboutMeText {
	/*background-color: #9F9D9D;*/
	position: fixed;
	margin-top: -35vw;
	margin-right: 10vw;
	margin-left: 30vw;
	font-size: 17px;
	font-family:  ;
	letter-spacing: 2px;
	word-spacing: 5px;
	line-height: 30px;
}
	

.main {
	background-color: white;
	margin-left: 30vw;
	margin-top: 5vw;
}

.column {
	display: none;
}
	
	
.row2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}


/* Create four equal columns that sits next to each other */
.column2 {
  flex: 23%;
  display: block;
  max-width: 46%;
  padding: 0 4px;
  margin-top:-10vw;
  margin-left:5px;
}


.column2 img {
  margin-top: 15px;
  margin-left: 0%;
  vertical-align: middle;
  width: 100%;

}
	
	
	
	
	
/* The sidebar menu */
.sidenav {
  height: 100vh; /* Full-height: remove this if you want "auto" height */
  width: 30vw;; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: white; /*#B4B3B3;*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 150px;
}



/* The navigation menu links */
.sidenav a {
  padding: 15px 0px 0px 55px;
  text-decoration: none;
  font-size: 3vw;
  color: #818181;
  display: block;
  font-size-adjust: none;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* My name */
.myName {
  padding: 15px 5px 6px 30px;
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: white;
  overflow-x: hidden; /* Disable horizontal scroll */
  font-size: 5vw;
  padding-top: 70px;
	font-family:  0;
  text-decoration: none;
	display: block;
}

.myName a {
	text-decoration: none;
	  display: block; /* Display block instead of inline */
	 color: #000000;

	
}
  

/* Instagram */
.social-icons {
  text-align: 0;
	position: fixed;
	z-index: 2;
	margin-top: 250px;
	margin-left: 30px;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:30px;
  height:30px;
  margin-right: 0px;
}
	
	
	.ProjectTitles {
	background-color: white;
	margin-top: 5vw;
	margin-right: 20vw;
	margin-left: 40vw;
	font-size: 24px;
	font-family:  ;
	letter-spacing: 1px;
	word-spacing: 3px;
	line-height: 100px;
}
	

	
	
}




@media screen and (max-width: 700px) {
	
	
.ProjectTitles {
	background-color: white;
	margin-top: 5vw;
	margin-right: 20vw;
	margin-left: 40vw;
	font-size: 20px;
	font-family:  ;
	letter-spacing: 0px;
	word-spacing: 2px;
	line-height: 90px;
}
	
	
	
	.aboutMePhoto img {
	margin: 0px 130px 30px;
	width: 50%;
	heigh: 50%;
	
}

.aboutMeText {
	/*background-color: #9F9D9D;*/
	position: fixed;
	margin-top: 0vw;
	margin-right: 10vw;
	margin-left: 20vw;
	font-size: 15px;
	font-family:  ;
	letter-spacing: 2px;
	word-spacing: 5px;
	line-height: 30px;
}
	
	
	
	
	


}







/* MOBILE */

/* Responsive layout mobile - makes one column-layout instead of four columns */
@media screen and (max-width: 500px) {
/* Create four equal columns that sits next to each other */

.column img {
  margin-top: 15px;
  vertical-align: middle;
  width: 100%;

}
	
	
	.curtainMenu {
	    background-color: white;
		z-index: 5;
		margin-top:0vw;
		margin-left: 6vw;
		position: absolute;
	}
	
	
	.curtainMenuAbout {
		background-color: white;
		z-index: 5;
		margin-top:0vw;
		margin-left: 6vw;
		position: absolute;
	}
	
	
	
	/* My name */
.myName {
	    padding: 0;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		margin-top: -10px;
		position: static;
		background-color: white;
	
}

.myName a {
	text-decoration: none;
	font-size: 8.3vw;
	  display: block; /* Display block instead of inline */
	 color: #000000;

	
}
	
	.sidenav {
		display: none;
	}
	
	
	
	.social-icons {
		margin-top: 4px;
		margin-left: 70vw;
		position: absolute;
	} 
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:6vw;
  height:6vw;
  margin-top: -10px;
  position: absolute;
}
	
	

	
	/* Style page content */
  .main {
	  margin-top: 60px;
	  height: 100%;
	  width: 100%;
	  margin-left: 0px; /* Same as the width of the sidebar */
	  background-color: ;
	  position: relative;
  }
	
	.aboutMePhoto img {
		display: block;
		position: static;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		margin-top: 50px;
	
	
}

.aboutMeText {
	
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	margin-top: 0px;
	position: static;
	background-color: white;
	font-size: 16px;
	font-family:  ;
	letter-spacing: 2px;
	word-spacing: 5px;
	line-height: 30px;
}


	
	/* CURTAIN MENU */
	

	
		/* The Overlay (background) */
	.overlay {
	  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
	  height: 0%;
	  width: 100%;
	  position: fixed; /* Stay in place */
	  z-index: 4; /* Sit on top */
	  left: 0;
	  top: 0;
	  background-color: rgb(0,0,0); /* Black fallback color */
	  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
	  overflow-x: hidden; /* Disable horizontal scroll */
	  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	/* Position the content inside the overlay */
	.overlay-content {
	  position: relative;
	  top: 25%; /* 25% from the top */
	  width: 100%; /* 100% width */
	  text-align: center; /* Centered text/links */
	  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	}

	/* The navigation links inside the overlay */
	.overlay a {
	  padding: 8px;
	  text-decoration: none;
	  font-size: 36px;
	  color: #818181;
	  display: block; /* Display block instead of inline */
	  transition: 0.3s; /* Transition effects on hover (color) */
	}

	/* When you mouse over the navigation links, change their color */
	.overlay a:hover, .overlay a:focus {
	  color: #f1f1f1;
	}

	/* Position the close button (top right corner) */
	.overlay .closebtn {
	  position: absolute;
	  top: 20px;
	  right: 45px;
	  font-size: 60px;
	}
	
	
	
	.column {
		display: none;
	}
	
	
	
	.row2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}


/* Create four equal columns that sits next to each other */
.column2 {
  flex: 23%;
  display: block;
  max-width: 46%;
  padding: 0 4px;
  margin-top:15px;
  margin-left:8px;
}


.column2 img {
  margin-top: 15px;
  margin-left: 0%;

  vertical-align: middle;
  width: 100%;

}
	
	
	.ProjectTitles {
	background-color: white;
	margin-top: 5vw;
	margin-right: 20vw;
	margin-left: 30vw;
	font-size: 4.5vw;
	font-family:  ;
	letter-spacing: 0px;
	word-spacing: 2px;
	line-height: 80px;
}
	

	
}

	@media screen and (max-width: 374px) {
		
	.ProjectTitles {
	background-color: white;
	margin-top: 5vw;
	margin-right: 20vw;
	margin-left: 30vw;
	font-size: 13px;
	font-family:  ;
	letter-spacing: 0px;
	word-spacing: 2px;
	line-height: 70px;
}
		
	.myName a {
	text-decoration: none;
	font-size: 6.9vw;
	margin-left: 5vw;
	  display: block; /* Display block instead of inline */
	 color: #000000;

	
}
		
}
	
	
	

	/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
	@media screen and (max-height: 450px) {
	.overlay {overflow-y: auto;}
	  .overlay a {font-size: 20px}
	  .overlay .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
	  }
	}


	
	
	
	
	
	
	
}






/* fixar så texten ej ändras i menyn när höjdne ändras */
@media screen and (max-height: 500px) {
/* The sidebar menu */
	.sidenav {
	  height: 100vh; /* Full-height: remove this if you want "auto" height */
	  width: 306px; /* Set the width of the sidebar */
	  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	  z-index: 1; /* Stay on top */
	  top: 0; /* Stay at the top */
	  left: 0;
	  background-color:  
	  overflow-x: hidden; /* Disable horizontal scroll */
	  padding-top: 150px;
	}



	/* The navigation menu links */
	.sidenav a {
	  padding: 15px 0px 0px 80px;
	  text-decoration: none;
	  font-size: 30px;
	  color: #818181;
	  display: block;
	  font-family:  ;
	  font-size-adjust: none;
}

}