/* ===========================
    distance calc tab general
   =========================== */

#background{
    background-color: lightcoral;
}

.mainMaps{
    display:block;
}

nav a {
    color: #d3bfff;
}

#infobox {
    background-color: white;
    text-align: left;
    border: 10px solid white;
    padding: 20px;
}

.accordion {
    color: white;
    background-color: #3a1854;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    align-items: center;
    border-radius: 20px 20px 0px 0px;
    box-shadow: none;
    box-shadow: 0px 0px 5px 1px #3f3f3f;
}

.panel {
    padding: 0 5px;
    display: none;
    background-color: white;
    overflow: hidden;
    width: 100%;
}

.centerImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.centerImage2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 102%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.centerImage3 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

button{
    font-size: 14px;
}

.header-container {
    border-bottom: 0px solid #39295c;
}

.main aside {
    border-top: 10px solid #39295c;
}

.header-container,
.main aside {
    background: #8d7bb5;
}

.title {
    color: white;
}

.left {
    float: left;
    width: 40%;
}

.left2 {
    float: left;
    width: 40%;
}

.hideMytext{
    display: none;
}

.ie7 .title {
    padding-top: 20px;
}

@media only screen and (min-width: 320px) {
       
    #infobox {
        border: 10px solid white;
        padding: 0px;
    }

    .accordion {

        font-size: 15px;
    }

}

@media only screen and (min-width: 360px) {

    #infobox {
        border: 10px solid white;
        padding: 20px;
    }

    .accordion {
        font-size: 15px;
    }
        

}

@media only screen and (min-width: 375px) {

    #infobox {
        border: 10px solid white;
        padding: 20px;
    }

    .accordion {
        font-size: 15px;
    }

}

@media only screen and (min-width: 414px) {

    #infobox {
        border: 10px solid white;
        padding: 20px;
    }

    .accordion {
        font-size: 15px;
    }
        
}

@media only screen and (min-width: 768px) {

    .title {
        float: inside;
    }
        
    .left {
        float: left;
        width: 30%;
    }

    .left2 {
        float: left;
        width: 30%;
    }
    
    .right {
        margin-left: 35%;
    }

    .right2 {
        margin-left: 35%;
    }  

    .accordion {
        font-size: 20px;
    }
        
    .panel {
        font-size: 20px;
    }

    .main aside {
        border-top: 20px solid #39295c;
    }
        
    #infobox {
        border: 10px solid white;
        padding: 20px; 
    }

}


@media only screen and (max-width: 1024px) { 

    .mainMaps{
        display:none;
    }
        
    img#europe {
        display: none;
    }
        
    .hideMytext{
        display:block; 
    }

    img#africaa{
        display:none;
    }

}

@media only screen and (min-width: 1024px) {
    
    
    #infobox {
        border: 10px solid white;
        padding: 20px;
    }

    .accordion {
        font-size: 20px;
    }
        
    .panel {
        font-size: 20px;
    }

}

@media only screen and (min-width: 1140px) {

/* ===============
    PC Width
=============== */

    #infobox {
        background-color: white;
        width: 900px;
        text-align: left;
        border: 0px solid white;
        padding-top: 70px;
        margin: auto;
    }

    .accordion {
        background-color: #3a1854;
        color: white;
        cursor: pointer;
        padding: 32px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 25px;
        transition: 0.4s;
    }

    .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        width: 100%;
    }

    .centerImage {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    .titlehead {
        width:45.3%;
    }

}