.flex-row{
		   display: flex;
		  flex-wrap: wrap;
		  padding: 0 4px;
		}
		.flex-column {
		  flex: 25%;
		  max-width: 29%;
		}
		.w25{
		    width: 40% !important
		}
		.w49{width: 56% !important}
		.w54{width: 54% !important}
		.w42{width: 42% !important}

		.metallic-background .item {
		    width: 100%;
		        margin: 7px 6px 7px 7px !important;
		}
		.metallic-background .item:nth-child(2),
		.metallic-background .item:nth-child(4){
		  margin-right: 0 !important
		}

		.flex-container {
		    display: flex;
		    flex-direction: row;
		    flex-wrap: wrap;
		    width: 71%;
		}
		.n90{
		  height:630px !important
		}
		.f80{
		  height: 586px !important;
		  width: 94%  !important;
		}

		@media (max-width: 800px) {
		  .metallic-background .item {
		    height: 135px;
		  }
		  .w49, .w54, .w42, .w25 {
		    width: 97% !important;
		  }
		  .metallic-background .item .name {
		    top: 93px;
		  }
		  .metallic-background .item .text {
		    top: 63px;
		  }

		}

		/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
		@media (max-width: 700px) {
		  .metallic-background .item .name {
		    font-size: 20px;
		    top: 120px;
		}
		.metallic-background .item .text {
		    top: 100px;
		}
		  .metallic-background .item {
		    height: 200px;
		  }
		  .flex-container{
		    width: 100%;
		  }
		  .flex-column {
		    flex: 100%;
		    max-width: 100%;
		  }
		  .metallic-background .item{
		    width: 100% !important;
		  }
		  .f80 {
		    height: 200px !important;
		    width: 94% !important;
		  }
		  .n90 {
		    height: 200px !important;
		    width: 96.5% !important;
		}
		}