*{
	box-sizing: border-box;
	margin: 0;
	
}
nav{
	background-color: whitesmoke;
	padding: 20px;
	}
nav ul li {
	display: inline-block;
	padding: 5px;
		
}
nav ul li a{
	background-color: cornflowerblue;
	padding: 10px;
	border-radius: 10px;
	color:white;
	text-decoration: none;
}
.active{ /* shows which page you are on*/
	background-color: lightblue;
}

.container-flex{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

.div-flex{
	display: flex;
}
/*page 1*/

#box1{
	height: 100px;
	background-color: lightblue;
}
#box2{
	height: 100px;
	background-color: lightblue;
	
}
#box3{
	height: 100px;
	background-color: lightblue;

}
/*page 2*/
#box-green1{
	height: 230px;
	background-color: darkseagreen;
}
#box-green2{
	height: 110px;
	background-color: darkseagreen;
}
#box-green3{
	height: 110px;
	background-color: darkseagreen;
}
#box-green4{
	height: 69.66px;
	background-color: darkseagreen;
}
#box-green5{
	height: 69.66px;
	background-color: darkseagreen;
}
#box-green6{
	height: 69.66px;
	background-color: darkseagreen;
}
#box-green7{
	height: 180px;
	background-color: darkseagreen;
}
#box-green8{
	height: 40px;
	background-color: darkseagreen;
}
#box-green9{
	height: 50px;
	background-color: darkseagreen;
}
#box-green10{
	height: 50px;
	background-color: darkseagreen;
}
#box-green11{
	height: 50px;
	background-color: darkseagreen;
}
#box-green12{
	height: 50px;
	background-color: darkseagreen;
}
/*page 3*/
#pink1{
	height: 100px;
	background-color: pink;
	
}
#pink2{
	height: 100px;
	background-color: pink;
}
#pink3{
	height: 100px;
	background-color: pink;
}
#pink4{
	height: 100px;
	background-color: pink;
}
#pink5{
	height: 100px;
	background-color: pink;
}
#pink6{
	height: 100px;
	background-color: pink;
}
#pink7{
	height: 100px;
	background-color: pink;
}
#pink8{
	height: 100px;
	background-color: pink;
}
#pink9{
	height: 100px;
	background-color: pink;
}
#pink10{
	height: 100px;
	background-color: pink;
}
#pink11{
	height: 100px;
	background-color: pink;
}
#pink12{
	height: 100px;
	background-color: pink;
}
/*page 4*/
#blue1{
	height: 220px;
	background-color: cornflowerblue;
}
#blue2{
	height: 105px;
	background-color: cornflowerblue;

}
#blue3{
	height: 105px;
	background-color: cornflowerblue;
}
#blue4{
	height: 100px;
	background-color: cornflowerblue;
}
#blue5{
	height: 100px;
	background-color: cornflowerblue;
}
#blue6{
	height: 100px;
	background-color: cornflowerblue;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

	.div-flex{
		margin-bottom: 10px;
	}
	#box2{
		width: 100%;
	}
	#box3{
		width: 100%;
	}
	.container{
		width: 100%;
	}
	/*	page 2*/
	.container-green{
		width: 100%;
	}
/*	page 3*/
	.container-pink{
		width: 100%;
	}
/*	page 4*/
	.container-blue{
		width: 100%;
	}
  .col-xs-1 {width: 8.33%;}
  .col-xs-2 {width: 16.66%;}
  .col-xs-3 {width: 25%;}
  .col-xs-4 {width: 33.33%;}
  .col-xs-5 {width: 41.66%;}
  .col-xs-6 {width: 50%;}
  .col-xs-7 {width: 58.33%;}
  .col-xs-8 {width: 66.66%;}
  .col-xs-9 {width: 75%;}
  .col-xs-10 {width: 83.33%;}
  .col-xs-11 {width: 91.66%;}
  .col-xs-12 {width: 100%;}
	
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.div-flex{
		margin-bottom: 10px;
	}
	.container{
		width: 100%;
	}
/*	page 2*/
	.container-green{
		width: 100%;
	}
/*	page 3*/
	.container-pink{
		width: 100%;
	}
/*	page 4*/
	.container-blue{
		width: 100%;
	}
	#blue1{
		width: 100%;
	}
  .col-sm-1 {width: 8.33%;}
  .col-sm-2 {width: 16.66%;}
  .col-sm-3 {width: 25%;}
  .col-sm-4 {width: 33.33%;}
  .col-sm-5 {width: 41.66%;}
  .col-sm-6 {width: 50%;}
  .col-sm-7 {width: 58.33%;}
  .col-sm-8 {width: 66.66%;}
  .col-sm-9 {width: 75%;}
  .col-sm-10 {width: 83.33%;}
  .col-sm-11 {width: 91.66%;}
  .col-sm-12 {width: 100%;}
	
} 


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.container{
	width: 100%;
	display: flex;
}
	.div-flex{
		margin-bottom: 10px;
		margin-right: 10px;
	}
/*	page 2*/
	
	#box-green1{
	width: 50px;
}
#box-green2{
	width: 50px;
}
#box-green3{
	width: 50px;
}
#box-green4{
	width: 50px;
}
#box-green5{
	width: 50px;
}
#box-green6{
	width: 50px;
}
#box-green7{
	width: 50px;
}
#box-green8{
	width: 50px;
}
#box-green9{
	width: 50px;
}
#box-green10{
	width: 50px;
}
#box-green11{
	width: 50px;
}
#box-green12{
	width: 50px;
}
	.container-green{
		display: flex;
		width: 100%;
	}
	.column{
		display: flex;
		flex-direction: column;
	}
/*	page 3*/
	.container-pink{
		width: 100%;
		display: flex;
	}
/*page 4*/
	.container-blue{
		width: 100%;
		display: flex;
	}
	.container-column{
		width: 50%;
	}
	#blue1{
		width: 50%;
}
	#blue2{
}
	#blue3{

}
	
	#blue4{
}
	#blue5{
}
	#blue6{
		margin-right: 0;
	}
	
  .col-ld-1 {width: 8.33%;}
  .col-ld-2 {width: 16.66%;}
  .col-ld-3 {width: 25%;}
  .col-ld-4 {width: 33.33%;}
  .col-ld-5 {width: 41.66%;}
  .col-ld-6 {width: 50%;}
  .col-ld-7 {width: 58.33%;}
  .col-ld-8 {width: 66.66%;}
  .col-ld-9 {width: 75%;}
  .col-ld-10 {width: 83.33%;}
  .col-ld-11 {width: 91.66%;}
  .col-ld-12 {width: 100%;}
}