@import url("palette.css");

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
    
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#contact-info {
    font-size: 14pt;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#email-block {
    display: flex;
    flex-basis: 55%;
}

#email-icon {
    text-align: center; 
    width: 100px;
}

#email-box {
    align-self: center;
    flex: 1;
}

#phone-block {
    display: flex;
    flex-basis: 45%;
}

#phone-icon {
    text-align: center;    
    width: 100px;
}

#phone-box {
    align-self: center;
    flex: 1;
}

#location-block {
    display: flex;
    flex-basis: 100%;
}

#location-icon {
    text-align:center;
    width: 100px;
}

#location-box {
    align-self: center;
    flex: 1;
}

@media only screen and (max-width: 700px) {
    #email-block {
        flex-basis: 100%;
    }
    #phone-block {
        flex-basis: 100%;
    }
}


.link-button-array {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.link-button {
    text-align: center; 
    flex: 1;
    flex-basis: 8.33%;    
}

@media only screen and (max-width: 700px) {
    .link-button {    
        flex-basis: 16.66%;
    }
}