*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* I do this for all my projects */
}


.body {
	margin-top: 122px;
}

.subTitles {
    width: 100%;
    margin-left: 12px;
}

h4 {
 font-weight: normal;
}

h2 {
    /* text-align: center; */
    padding-left: 12px;
	margin-left: -40px;
}

.wrapper:first-of-type {
    margin-top: 40px;
}

.wrapper {
    width: 100vw;
	overflow-x: hidden;
    text-align: left;
    margin-top: 20px;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.image-box {
    width: 150px;
    text-align: center;
}

.image-box img {
    max-width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.image-box small {
    display: block;
    margin-top: 22px;
    margin-bottom: 20x;
    color: black;
    font-size: 18px;
}

.images {
    margin-top: 18px;
    margin-left: 40px;
}

image-container {
}

.image-container {
}

@media (max-width: 768px),
(hover: none) and (pointer: coarse) {
body {
    font-family: 'MyCustomFont', serif;
		overflow-x: hidden;

    margin-left: 12pxpx;
    margin-right: 12pxpx;
    margin-top: 15px;
}
	

h2 {
		margin-left: auto;

	
	}

	.wrapper {
    width: 100%;
}

.images {
    margin-top: 18px;
    margin-left: auto;
}
	
.image-box {
    width: 15%;
    margin-right: 1.5%;
    text-align: center;
}

.image-container {
width: auto;
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
/* justify-content: space-between; */
}

h1 {
    margin-bottom: 40px;

}

.image-box small {
    font-size: 13px;
    margin-bottom: 5px;
}

}