
.wrapperleft {
position:static;
width:48.5%;
float: left;
margin-left: .5%;
margin-right: auto;
display:block;
}

.collapsibleleft {
width:100%;
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
text-align: center;
margin-bottom: 10px;
box-shadow: 1px 1px 15px black, 0 0 50px white, 1px 1px 20px blue;
display: block;
}

.collapsibleleft:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}


.activeleft{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 100%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 0px;
box-shadow: none;
}

.activeleft:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}

.activeleft:hover + .contentleft {
transform:translateY(4px);
}

.contentleft {
display: none;
position: relative;
margin-bottom: 10px;
padding-top: 3%;
padding-bottom: 3%;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
float:left;
}


.contentleft::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.wrapperleft iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 90%;
height:450px;
}


.wrapperright {
position:relative;
width:48.5%;
float: right;
margin-left: auto;
margin-right: .85%;
display:block;
}

.collapsibleright {
width:100%;
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
text-align: center;
margin-bottom: 10px;
box-shadow: 1px 1px 15px black, 0 0 50px white, 1px 1px 20px blue;
display: block;
}

.collapsibleright:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}


.activeright{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 100%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 0px;
box-shadow: none;
}

.activeright:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}

.activeright:hover + .contentright {
transform:translateY(4px);
}

.contentright {
display: none;
position: relative;
margin-bottom: 10px;
padding-top: 3%;
padding-bottom: 3%;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
}

.contentright::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.wrapperright iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 90%;
height:450px;
}

.collapsible1 {
width: 98%;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding: 1.5%;
border: 6px double black;
border-radius: 30px;
outline: none;
overflow: hidden;
margin-bottom: 10px;
box-shadow: 1px 1px 15px black, 0 0 50px white, 1px 1px 20px blue;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
font-size: 360%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 180px;
}

.collapsible1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}


.active1{
position: relative;
background-color: rgba(217,217,217,.6);
cursor: pointer;
padding: 1.5%;
width: 98%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-bottom: 0px;
box-shadow: none;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
font-size: 360%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 180px;
}

.active1:hover{
text-shadow: 2px 2px 5px white;
transform:translateY(4px);
}

.active1:hover + .content1 {
transform:translateY(4px);
}

.content1 {
display: none;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 1.5%;
width: 98%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
overflow: hidden;
box-sizing: border-box;
}

.content1 .p1 {
font-size: 180%;
text-shadow: 2px 2px 5px #6699ff;
margin: 0.5px;
margin-top: 70px;
margin-bottom: 70px;
}

.content1 .p2 {
font-size: 100%;
color: white;
text-shadow: 2px 2px 5px #6699ff;
}

.content1 .p3 {
font-size: 280%;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 8px;
}

.content1 .p4 {
font-size: 100%;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 8px;
}

.content1::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.wrapperleft1 {
position:static;
width:48.4%;
float: left;
margin-left: .5%;
margin-right: auto;
display:block;
font-family:Grunge Overlords new Regular;
text-align: center;
text-shadow: 2px 2px 5px #6699ff;
font-size: 260%;
}

.wrapperright1 {
position:static;
width:48.4%;
float: right;
margin-left: auto;
margin-right: .5%;
display:block;
font-family:Grunge Overlords new Regular;
text-align: center;
text-shadow: 2px 2px 5px #6699ff;
font-size: 260%;
}

.wrapperright1 iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 95%;
height:450px;
float: none;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}

.wrapperleft1 iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 95%;
height:450px;
float:none;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}

.contentleft1 iframe {
float:none;
width: 90%;
}

.contentright1 iframe {
float:none;
width: 90%;
}

.collapsibleleft1 {
width:95%;
position: relative;
background-color:rgb(148, 148, 184, .6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
text-align: center;
margin-bottom: 10px;
box-shadow: 1px 1px 15px black, 0 0 30px white, 1px 1px 10px #6699ff;
display: block;
float:none;
margin-left:auto;
margin-right: auto;
}

.collapsibleleft1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}


.activeleft1{
position: relative;
background-color:rgb(148, 148, 184, .6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 95%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 0px;
box-shadow: none;
float:none;
margin-left:auto;
margin-right: auto;
}

.activeleft1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}

.activeleft1:hover + .contentleft1 {
transform:translateY(4px);
}

.contentleft1 {
display: none;
position: relative;
margin-bottom: 10px;
width: 95%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color:rgb(148, 148, 184, .6);
text-align: center;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
float:none;
margin-left:auto;
margin-right: auto;
}

.collapsibleright1 {
width:95%;
position: relative;
background-color:rgb(148, 148, 184, .6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
text-align: center;
margin-bottom: 10px;
box-shadow: 1px 1px 15px black, 0 0 30px white, 1px 1px 10px #6699ff;
display: block;
float:none;
margin-left:auto;
margin-right: auto;
}

.collapsibleright1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}


.activeright1{
position: relative;
background-color:rgb(148, 148, 184, .6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 95%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 0px;
box-shadow: none;
float:none;
margin-left:auto;
margin-right: auto;
}

.activeright1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}

.activeright1:hover + .contentright1 {
transform:translateY(4px);
}

.contentright1 {
display: none;
position: relative;
margin-bottom: 10px;
width: 95%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color:rgb(148, 148, 184, .6);
text-align: center;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
float:none;
margin-left:auto;
margin-right: auto;
}