body{
    background: #214547;
    height: 100%;
}

.container{
    width: 100%;
    max-width: 620px;
    margin: 200px auto 20px auto;
}

.box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 124px;
    border: 3px solid #FFFFFF;  
}


.name{
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.8mm;
    line-height: 44px;
    text-transform: uppercase;
    color: #FFFFFF;
}



.accordion{
    background-color: inherit;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
    width: 100%;
    padding: 18px;
    text-align: left;
    font-family: 'Montserrat';
    font-weight: 300;
    font-size: 20px;
    line-height: 29px;
    transition: 0.4s;
    outline: none;
}

.accordion-section{
    padding-top: 5vw;
}

.active, .accordion:hover {
    background-color:  #162e30;
  }

.accordion:after{
    content: '\02039';
    transform: rotate(270deg);
    font-size: 28px;
    color: #FFFFFF;
    float: right;
    margin-left: 5px; 
    transition: 0.4s;
} 

.active:after{
    content: '\02039';
    transform: rotate(90deg);
    float: right;
}

.sub-accordion{
    background-color: inherit;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
    width: 100%;
    padding: 10px;
    text-align: left;
    font-family: 'Montserrat';
    font-weight: 250;
    font-size: 15px;
    line-height: 29px;
    transition: 0.4s;
    outline: none;
}

.sub-active, .sub-accordion:hover {
    background-color: #22494d;
  }

.sub-accordion:before{
    content: '\002B';
    color: #FFFFFF;
    font-size: 25px;
    padding-right: 10px;
}

.sub-active:before{
    content: '\2212';
}

.sub-panel{
    position: relative;
    padding: 0 18px;
    left: 10px;
    max-height: 0;
    color: #FFFFFF;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /*Firefox*/
}

  
.panel {
    padding: 0 18px;
    left: 10px;
    max-height: 0;
    color: #FFFFFF;
    font-family: 'Montserrat';
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
    overflow: auto;
    transition: max-height 0.4s ease-out;
}

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

hr{
    border: 1px solid #7E8180;
}

.social-media{   
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa{
    color: #FFFFFF;
    padding: 50px 30px;
}

.accordion-links{
    color:  #FFFFFF;
}

.accordion-links:hover{
    color: black;
}

.inner-buttons {
    background-color: #e0e6e4;
  padding: 8px 18px;
  border: none;
  font-family: 'Montserrat';
  font-weight: 500;  
  margin: 15px 0px 15px;
text-align: center;
padding: 8px 18px;
width: 220px;
transition: all 0.5s;
cursor: pointer;
margin: 15px 0px 15px;
box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);

}

.inner-buttons{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
color: black;
}

.inner-buttons:after {
content: '»';
opacity: 0;  
top: 14px;
right: -20px;
transition: 0.5s;
}

.inner-buttons:hover{
padding-right: 24px;
padding-left:8px;
}

.inner-buttons:hover:after {
opacity: 1;
right: 10px;
}

@media only screen and (max-width: 700px) {
    .container{
        max-width: 85vw;
    }
    .box{
        height: 13vw;  
        border: 3px solid #FFFFFF;
    }

    .name{
        font-size: 5vw;
    }

    .accordion{
        font-size: 3vw;
        padding: 2vw;
    }

    .accordion-section{
        padding-top: 10vw;
    }

    .container{
        margin: 150px auto 20px auto;
    }
}

@media screen and (max-width: 500px){
    .container{
        max-width: 85vw;
    }
    .box{
        height: 13vw;  
        border: 3px solid #FFFFFF;
    }

    .name{
        font-size: 5vw;
    }

    .accordion{
        font-size: 4vw;
    }

    .container{
        margin: 150px auto 20px auto;
    }

}