* {
box-sizing: border-box;
}

/*Sets up area on page for columns*/
.col-container {
color:#551A8B;
display: table;
width: 100%;
}
/*First column controls*/
.col_1 {
display: table-cell;
padding: 16px;
width:55%;
font-size:20px;
}
/*Second column controls*/
.col_2 {
display: table-cell;
padding: 16px;
width:45%;
font-size:20px;
}

/*h2 for columns*/
h2{color:#551A8B;
font-family:tahoma;
text-align:left;
font-size:30px;
padding-bottom:10px;
}


/*Image control to be on left side*/
.img_left{
width:50%;
border:2px solid #551A8B;
float:left;
margin:5px;
}

.img_test{
width:50%;
border:2px solid #551A8B;
float:right;
margin:5px;
}

.img_works{
width:50%;
border:2px solid #551A8B;
float:center;
margin:5px;
}

/*Image control to be on right side*/
.img_right{
width:52%;
border:2px solid #551A8B;
float:right;
margin:5px;
}


.img_center{
width:90%;
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #551A8B;
}

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 600px) {
.col_1 {
display: block;
width: 100%;
}

.col_2 {
display: block;
width: 100%;
}

.img_left{
width:100%;
border:1px solid #551A8B;

}

.img_right{
width:100%;
border:1px solid #551A8B;

}

.img_works{
width: 100%;
border: 1px solid #551A8B;

}

.img_test{
width: 100%;
border: 1px solid #551A8B;
}