/*/ style for my columnxrows*/


<style>

	.header {padding: 0 15px;
		text-align: center;
		font-size: 21px;
	}
	.columns {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: 5px 0;
	}

.column {
	flex: 1;
	border: 1px solid #6666;
	margin: 2px;
	padding: 10px;
	background:  #3af4;
	transition:0.3s;
}
.column:first-child{
	margin-left: 0;
	border: 122px;
	background: #ff307f;

}
.column:last-child{
	margin-left: 0;
	border: 3px;
	background: #7f99;
}
.wrapper {
	padding: 5px;
	max-width: 1200px;
	width: 95%;
	margin: 20px auto;
}
@media screen and (max-width: 991px) {
	.columns column {
		margin-bottom: 5px;
		flex-basis: 40px;
	}
	.columns column:last-child {
		
		flex-basis: 100%;
		margin: 0;
	}
	.columns column:nth-last-child(2) {
		margin-right: 0;
	}	
}
@media (min-width : 991px) and (max-width: 1200px) {
	.columns column {
		margin-bottom: 5px;
		flex-basis: 40px;
	}
	.columns column:last-child {
		
		flex-basis: 25%;
		margin: 0;
	}
	.columns column:nth-last-child(2) {
		margin-right: 0;
	}	
}


@media screen and (max-width: 636px) {

	.columns .column {
		flex-basis: 100px;
		margin: 0 0 5px 0;

	}		
}


/* Medium Devices, Desktops */
@media (min-width : 992px) {


}
/* Small Devices, Tablets */
@media (min-width : 755px) and (max-width: 991px) {
	.columns .column {
		flex-basis: 25%;
		margin: 0 0 5px 0;

	}	


}


/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {

	/* Slideshow */

	.slides img{
		height: 600px;
		background: blue;
	}
}


</style>