@charset "UTF-8";
/* CSS Document */

 {
    box-sizing: border-box;
}

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 98vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
 
}

.myImg {display:block;
	min-height:100%;
	margin-right:-50%;
   object-fit:cover;}

.row {
  margin:auto;
   width: 75%;
   display: -ms-flexbox; /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE10 */
   flex-wrap: wrap;

}


/* Create 3 equal columns that floats next to each other */
.column {
    float: left;
    width: 33%;
    padding: 0px;
}

.column img {
    margin-top: 0px;
}



.box1 {border-top:1px solid #60C;
    border-left:1px solid #60C;
	border-right:1px solid #60C;
	border-bottom:1px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }

.box2 {
    border-top:0px solid #60C;
	border-left:1px solid #60C;
	border-right:0px solid #60C;
	border-bottom:0px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }
   
.box3 {
   border-top:1px solid #60c;	
    border-left:0px solid #60C;
	border-right:0px solid #60C;
	border-bottom:0px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }
   
.box4 {border-top:0px solid #60C;
    border-left:0px solid #60C;
	border-right:0px solid #60C;
	border-bottom:1px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }

.box5 {
    border-top:0px solid #60C;
	border-left:0px solid #60C;
	border-right:1px solid #60C;
	border-bottom:0px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }


/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media (max-width: 720px) {
    .column {
       margin:auto;
	    width: 95%;
    }
	.myImg {min-width:100%;
	min-height:100%;	
	object-fit:cover;}
   
	.box1 {border-top:1px solid #60C;
    border-left:1px solid #60C;
	border-right:1px solid #60C;
	border-bottom:1px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }

.box2,.box3, .box4, .box5 {
    border-top:0px solid #60C;
	border-left:1px solid #60C;
	border-right:1px solid #60C;
	border-bottom:0px solid #60C;
	overflow:hidden;
    height: 0;
    padding-bottom: 100%;
   }
   	
}


/*footer*/
.onsetfooter {
   position: relative;
   padding-top:20px;
   botton:20px;
   width: 95%;
   margin:auto;
   text-align: right;
   
}

#social {
	padding: 6px;
	font-size: 20px;
	width: 20px;
	text-align: center;
	text-decoration: none;
	margin: 2px 3px;
	border-radius: 40%;
	color: white;
	background-color: #60C;
}


.fa:hover {
    opacity: 0.7;
}