/* ______________________________________________*/
/*ARTICLEBOX*/

.articlebox {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;

position: relative;
box-sizing: border-box;

background-color: rgba(230,230,230,.8);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.articlebox .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

.articlebox .p4 {
font-size: 280%;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
text-align: center;
margin-top: 1%;
margin-bottom: 1%;
}

.articlebox .p5 {
font-size: 120%;
font-family:Grunge Overlords new Regular;
text-align: center;
margin-top: 2%;
margin-bottom: 1%;
color: black;
text-shadow: none;
}

/* ___________________________*/

.articlesection {
position: relative;
box-sizing: border-box;

color: black;
font-family: Calibri, monospace;
text-align: center;

overflow: hidden;
}

/* ______________________________________________*/
/*ARTCLCLMLEFT*/

.artclclmnleft {
position: relative;
float:left;

display: block;
padding:1%;
box-sizing: border-box;

text-align: center;
font-size:1vw;
}

.artclclmnleft img {
display: block;
width: 100%;
height: auto;
margin-bottom:2vh;
box-sizing: border-box;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

.artclclmnleft iframe {
position: relative;
width: 100%;
height: 22.6vw;
margin-bottom:2vh;
box-sizing: border-box;

border: 3px double black;
border-radius: 25px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

.artclclmnleft .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

/* ______________________________________________*/
/*ARTCLCLMNRIGHT*/

.artclclmnright {
position: relative;
float:right;

display: block;
padding:1%;
box-sizing: border-box;

text-align: center;
font-size:1vw;
}

.artclclmnright img {
display: block;
width: 100%;
height: auto;
margin-bottom:2vh;
box-sizing: border-box;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

.artclclmnright iframe {
position: relative;
width: 100%;
height: 22.6vw;
margin-bottom:2vh;
box-sizing: border-box;

border: 3px double black;
border-radius: 25px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

.artclclmnright .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

.textbox::-webkit-scrollbar {
display: none;
}

/* ______________________________________________*/
/*ARTCLROW*/

.artclrow3 {
position:relative;
width:100%;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-column-gap: 0.5%;
padding: 1%;
box-sizing: border-box;
}

.artclrow3 img {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}

.artclrow3 iframe {
display: block;
width: 100%;
height: 16vw;
box-sizing: border-box;
}

.artclrow3 .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

/* ___________________________*/

.artclrow4 {
position:relative;
width:100%;
display: grid;
grid-template-columns: 24.625% 24.625% 24.625% 24.625%;
grid-column-gap: 0.5%;
padding: 1%;
box-sizing: border-box;
}

.artclrow4 img {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}

.artclrow4 iframe {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}

.artclrow4 .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

/* ___________________________*/

.artclrow2 {
position:relative;
width:100%;
display: grid;
grid-template-columns: 49.75% 49.75%;
grid-column-gap: 0.5%;
padding: 1%;
box-sizing: border-box;
}

.artclrow2 img {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}

.artclrow2 iframe {
display: block;
width: 100%;
height: 22.6vw;
box-sizing: border-box;
}

.artclrow2 .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

/* ___________________________*/

.artclrow5 {
position:relative;
width:100%;
display: grid;
grid-template-columns: 19.6% 19.6% 19.6% 19.6% 19.6%;
grid-column-gap: 0.5%;
padding: 1%;
box-sizing: border-box;
}

.artclrow5 img {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}

.artclrow5 iframe {
display: block;
width: 100%;
height: 22.6vw;
box-sizing: border-box;
}

.artclrow5 .textbox {
position:relative;
display: block;
width:100%;
height:100%;
padding: 3%;
box-sizing: border-box;

background-color:rgba(230,230,230,.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
font-family: Calibri, monospace;
font-size: 17px;
text-align: justify;
color: black;
flex-wrap: wrap;
overflow-y: auto;
}

/* ______________________________________________*/
/*RESPONSIVENESS*/

@media screen and (max-width: 1000px) {
.artclclmnleft {
width: 100% !important;
display: block !important;
font-size: 80%;
margin-left: auto;
margin-right: auto;
}
}

@media screen and (max-width: 1000px) {
.artclclmnleft iframe {
height: 40vw;
}
}

@media screen and (max-width: 1000px) {
.artclclmnright {
width: 100% !important;
display: block !important;
font-size: 80%;
margin-left: auto;
margin-right: auto;
}
}

@media screen and (max-width: 1000px) {
.artclclmnright iframe {
height: 40vw;
}
}

/* ___________________________*/

@media screen and (max-width: 1000px) {
.artclrow3 {
grid-template-columns: 100%;
height:auto !important;
}

@media screen and (max-width: 1000px) {
.artclrow3 iframe {
height: 40vw;
}
}

@media screen and (max-width: 1000px) {
.artclrow3 img {
margin-bottom:1%;
}
}

/* ___________________________*/

@media screen and (max-width: 1000px) {
.artclrow4 {
grid-template-columns: 100%;
height:auto !important;
}

@media screen and (max-width: 1000px) {
.artclrow4 iframe {
height: 40vw;
}
}

@media screen and (max-width: 1000px) {
.artclrow4 img {
margin-bottom:1%;
}
}