.buy {
  background: url("images/about-bg.svg") no-repeat;
  background-size: cover;  
  margin: auto;
  width: 30%;
  height: auto;
  margin-bottom: 100px;
}

.about-story {
  background: url("images/story-bg.svg") no-repeat;
  background-size: cover;  
  margin: auto;
  width: 80%;
  height: auto;
  margin-bottom: 100px;
}

.who-are {
    margin: auto;
    width: 80%;
    height: auto;
    margin-bottom: 100px;
}

.boy-text {
    background: url("images/boy-bg.svg") no-repeat;
    background-size: cover;
    float: left;
    width: 30%;
    height: auto;
}

.girl-text {
    background: url("images/girl-text-bg.svg") no-repeat;
    background-size: cover;
    float: right;
    width: 30%;
    height: auto;
}

.boygirl-image {
    float: left;
    width: 40%;
    height: auto;
}

.history {
    clear: both;
    background: url("images/history-bg.svg") no-repeat;
    background-size: cover;
	a font-size: 24pt;
    margin: auto;
    width: 60%;
    height: auto;
    margin-bottom: 50px;
}

@media only screen and (min-width: 1081px) {
  /* Style adjustments for viewports that meet the condition */
}

@media (min-width: 601px) and (max-width: 1080px) {

.about-story {
  background: url("images/story-bg.svg") no-repeat;
  background-size: cover;  
  margin: auto;
  width: 80%;
  height: auto;
  margin-bottom: 100px;
}

.who-are {
    margin: auto;
    width: 80%;
    height: auto;
    margin-bottom: 100px;
}

.boy-text {
    background: url("images/boy-bg.svg") no-repeat;
    background-size: cover;
    float: left;
    width: 40%;
    height: auto;
}

.girl-text {
    background: url("images/girl-text-bg.svg") no-repeat;
    background-size: cover;
    float: right;
    width: 40%;
    height: auto;
}

.boygirl-image {
    margin: auto;
    width: 100%;
    height: 50%;
}

.history {
    clear: both;
    background: url("images/history-bg.svg") no-repeat;
    background-size: cover;
	a font-size: 24pt;
    margin: auto;
    width: 80%;
    height: auto;
    margin-bottom: 50px;
}
}

@media (max-width: 600px) {

.about-story {
  background: url("images/story-bg.svg") no-repeat;
  background-size: cover;  
  margin: auto;
  width: 80%;
  height: auto;
  margin-bottom: 50px;
}

.who-are {
    margin: auto;
    width: 80%;
    height: auto;
    margin-bottom: 50px;
}

.boy-text {
    background: url("images/boy-bg.svg") no-repeat;
    background-size: cover;
    float: left;
    width: 40%;
    height: auto;
}

.girl-text {
    background: url("images/girl-text-bg.svg") no-repeat;
    background-size: cover;
    float: right;
    width: 40%;
    height: auto;
}

.boygirl-image {
    margin: auto;
    width: 100%;
    height: 50%;
}

.history {
    clear: both;
    background: url("images/history-bg.svg") no-repeat;
    background-size: cover;
	a font-size: 24pt;
    margin: auto;
    width: 80%;
    height: auto;
    margin-bottom: 50px;
}
}