.toLowerBtn { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.toLowerBtn > * { display: block; background-color: #358f31; width: 50%; padding: 0.8em; color: #fff; font-size: 4.0rem; text-align: center; box-sizing: border-box; position: relative; transition: 0.3s; }
@media screen and (max-width: 767px) { .toLowerBtn > * { font-size: 1.6rem; } }
.toLowerBtn a { background-color: #fff; color: #358f31; }
.toLowerBtn a:hover { text-decoration: none; opacity: 0.5; }
.toLowerBtn span:before { content: ""; display: block; width: 0; height: 0; margin: auto; border-style: solid; border-width: 20px 15px 0; border-color: #358f31 transparent transparent; position: absolute; bottom: -20px; left: 0; right: 0; }
@media screen and (max-width: 767px) { .toLowerBtn span:before { border-width: 10px 10px 0; bottom: -10px; } }
.toLowerBtn br { display: none; }
@media screen and (max-width: 767px) { .toLowerBtn br { display: block; } }

.btnIns { text-align: center; font-size: 1.6rem; padding: 10px 20px; border: 1px solid #CCC; background: #FFF; margin: 0 auto; display: block; max-width: 1000px; width: 90%; box-sizing: border-box; }
@media screen and (max-width: 767px) { .btnIns { font-size: 1.2rem; } }

#instafeed { display: flex; flex-wrap: wrap; max-width: 1360px; margin: 0 auto; }
@media screen and (max-width: 767px) { #instafeed { justify-content: space-between; padding: 0 3%; } }

.insta-box { display: inline-block; width: 300px; overflow: hidden; height: 350px; margin: 20px; }
@media screen and (max-width: 767px) { .insta-box { width: 45vw; height: 55vw; margin: 0 0 3% 0; } }

.insta-box a { display: block; width: 300px; height: 300px; overflow: hidden; }
@media screen and (max-width: 767px) { .insta-box a { width: 100%; height: 40vw; } }

.insta-box p { text-align: center; }
@media screen and (max-width: 767px) { .insta-box p { font-size: 1rem; } }

img { max-width: 100%; }

p { margin: 0; }

.ellipsis { background: #eee; overflow: hidden; width: 100%; margin-top: 5px; }
.ellipsis p { font-size: 14px; height: 39.2px; line-height: 1.4; position: relative; }
.ellipsis p:before, .ellipsis p:after { background: #eee; position: absolute; }
.ellipsis p:before { content: "..."; top: 19.6px; right: 0; }
.ellipsis p:after { content: ""; height: 100%; width: 100%; }

.movBox { max-width: 1360px; margin: auto; padding: 0 30px; }
@media screen and (max-width: 767px) { .movBox { max-width: none; padding: 0 3.125vw; } }

#ytList { display: flex; flex-wrap: wrap; }
#ytList li { width: 23.5%; margin: 0 2% 30px 0; }
@media screen and (max-width: 767px) { #ytList li { width: 49%; } }
#ytList li:nth-child(4n) { margin-right: 0; }
@media screen and (max-width: 767px) { #ytList li:nth-child(4n) { margin-right: 2%; } }
@media screen and (max-width: 767px) { #ytList li:nth-child(2n) { margin-right: 0; } }
#ytList li .mov img { width: 100%; }
#ytList li h3 { margin-top: 0.5em; font-size: 1.6rem; text-align: center; }
@media screen and (max-width: 767px) { #ytList li h3 { font-size: 1.4rem; } }

.btnAdd { text-align: center; }
.btnAdd a { display: inline-block; background-color: #358f31; padding: 0.8em 3.0em; color: #fff; font-size: 2.6rem; border-radius: 0.8rem; border: 1px solid #358f31; transition: 0.3s; }
@media screen and (max-width: 767px) { .btnAdd a { font-size: 2.2rem; } }
.btnAdd a:hover { background-color: #fff; color: #358f31; text-decoration: none; }
@media screen and (max-width: 767px) { .btnAdd a:hover { background-color: #358f31; color: #fff; } }
