/* CSS Document */

* { box-sizing: border-box; }



/* STRUCTURE */

.wrapper {
	padding-bottom: 5%;
	max-width: 100%;
	width: 90%;
	
}
header {
	padding: 0 35px;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	vertical-align: top;
	
	

}

.column {
	flex: 1;
	margin: 20px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }

}

.column2 {
	flex: 1;
	margin: 10px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }

}




@media screen and (max-width: 780px) {
  .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
			
		}
	}
}

@media screen and (max-width: 680px)  {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 15px 0;
	}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) and (max-width : 320px)  {
   .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
			
		}