body {
    padding: 0;
    margin: 0;
}

/*#014e75  #38c4f3*/


#map {
    width: 100%;

}
#grid {
    margin-top:-4px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-areas:
        "image text"
        "image contact";
}


#image {
    grid-area: image;
}

#image img {
    width: 100%
}

#text {
    grid-area: text;
    padding: 40px;
    box-sizing: border-box;
}

.text-style h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 37px;
    color: #38c4f3;
    margin-bottom: 10px;
    line-height: initial;
}

.text-style h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 22px;
    color: #38c4f3 ;
    margin-top: 0;
    margin-bottom: 30px;
}

.text-style,
.text-style p {
    color: #606060;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    line-height: 26px;
}

a {
    color: #014e75 ;
    text-decoration: none;

}

footer {
    color: white;
    text-align: center;
    clear: both;
    padding: 10px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    background: #606060;

}


#slogan2,
#slogan {
    background: #014e75 ;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 35px;
    clear: both;
    padding: 70px 50px;
    text-align: center;
    font-style: italic;
}



#text2 {
    padding: 34px;
    display: flex;
    flex-wrap: wrap;
}


.text-box {
    display: flex;
    flex: 33%;
    padding: 10px;
    box-sizing: border-box;
}

.text-div h3 {
    font-weight: 500;
    font-family: 'Roboto Slab', serif;
    margin: 0;
    font-size: 18px;
    height: 60px;
    padding-top: 10px;
    box-sizing: border-box;
    color:#014e75 ;
    ;


}

.text-div {
    flex: auto;
    box-sizing: border-box;
    padding: 15px;
    padding-top: 0;
    font-family: 'Open Sans', sans-serif;
    color: #606060;
    line-height: 26px;

}

.icon-div {
    flex: 50px;
    box-sizing: border-box;

}

.icon-div i {
    border-radius: 70%;
    border: 1px solid #f1f1f1;
    font-size: 28px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #38c4f3 ;
}

.icon-div i:hover {
    background: #38c4f3  ;
    color: white;
}

#contact {
    grid-area: contact;
    padding: 20px 20px 20px 30px;
    box-sizing: border-box;
}

#contact h2 {
    margin-left: 15px;
}

.icons {
    font-size: 17px;
    padding-top: 20px;
    margin-left: 5px;
}

.icons a {
    display: inline-block;
    margin-left: 15px;
}

.icons i {
    font-size: 26px;
    transform: rotate(-45deg);
    text-align: center;
    position: relative;
    top: 7px;
}


.icons-border {
    border: 1px solid #f1f1f1;
    width: 45px;
    transform: rotate(45deg);
    height: 45px;
    text-align: center;
}


.icons-border:hover {
    background: #014e75 ;
    color: white;
    border-color: #014e75 ;
}

a:hover {
    color: #38c4f3;
}

#footer-stavros {
    color: #38c4f3;

}
@media screen and (max-width: 1400px) {
    #grid {
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "image text"
            "contact text";
    }

    .text-box {
        flex: 50%;
    }
}

@media screen and (max-width: 1000px) {
    #grid {
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "image contact"
            "text text";
    }

    #contact {
        align-self: center;
    }
}

@media screen and (max-width: 1000px) {
    .text-box {
        flex: 100%;
    }
}

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

    #slogan2,
    #slogan {
        font-size: 20px;
    }
}

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

    #text,
    #text2 {
        padding: 20px;
    }

    #grid {
        grid-template-rows: auto;
        grid-template-areas:
            "image image"
            "contact contact"
            "text text";
    }
}


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

    #slogan2,
    #slogan {
        padding: 40px 20px;
    }

}

@media screen and (max-width: 450px) {
    .text-box {
        flex-wrap: wrap;
        padding: 5px 0;
    }

    #text,
    #text2 {
        padding: 15px;
    }

    .icon-div {
        flex: 100%;
    }

    .text-div {
        flex: 100%;
    }

}