Location Sections

by Roshan Karunarathna

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <!-- Card Projects -->
        <div class="col-md-6 col-md-offset-3">
            <div class="card"><a href="/contact-us-in-sweden/" style="text-decoration:none;">
                <div class="card-image">
                    <img class="img-responsive" src="http://www.globalblue.com/tax-free-shopping/sweden/article641223.ece/alternates/LANDSCAPE2_970/Gamla-Stan-View-Stockholm-Sweden.jpg">
                    <span class="card-title"><h5>SWEDEN</h5></span>
                </div>
                <div class="card-content">
                    <p>Mäster Samuelsgatan 36,<br>111 57 Stockholm,<br>Sweden</p>
                </div></a>
                <!--<div class="card-action">
                         <a href="#" target="new_blank">Link</a>
                    <a href="#" target="new_blank">Link</a>
                    <a href="#" target="new_blank">Link</a>
                    <a href="#" target="new_blank">Link</a>
                    <a href="#" target="new_blank">Link</a>
                </div>-->
            </div>

            <div class="card"><a href="/contact-us-in-sri-lanka/" style="text-decoration:none;">
                <div class="card-image">
                    <img class="img-responsive" src="http://static.asiawebdirect.com/m/kl/portals/srilanka-hotels-ws/homepage/nightlife/pagePropertiesImage/srilanka-night.jpg.jpg">
                    <span class="card-title"><h5>SRI LANKA</h5></span>
                </div>
                <div class="card-content">
                   <p>Eyepax IT Consulting (pvt) Ltd,<br>189,<br>Galle Road,<br>Colombo 03,<br>Sri Lanka</p>
                </div> 
                <!--<div class="card-action">
                        <a href="#" target="new_blank">Link</a>
                   ...

CSS

#Content {
    padding-top:0px;
}
.email-column{
    background:#32549d;
    color:#fff;
}
.email-column h5,.email-column h4,.email-column h4 a{
    color:#fff;
}
.visit-us-block{
    color:#257cff;
    font-size:20px;
}
.visit-us-block .visit-us-text{
    padding:30px 0;
}
.address-column img{
    padding-top:30px;
}
.email-column > div,.address-column > div,.visit-us-block > div {
  display: flex;                /* [1] */ 
  justify-content: center;      /* [2] */
  align-items: center;          /* [3] */

}
.image-back img{
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#company-slider > div {
    padding-top:0px;
    padding-bottom:0px;
}
#company-slider .wpb_wrapper > div{
    padding-bottom:0px;
    margin-bottom: 0px;
}
.wpb_single_image .vc_single_image-wrapper{
    margin-bottom:0px;
}
@media only screen and (max-width: 768px) {
.address-text-section{
    text-align:center;
}
}
.address-block{
    align-content: center;
    text-align: center;
    float: none;
    margin: 0 auto;
}
@media only screen and (min-width: 768px) {
    .column{
        margin:0;
    }
    .map-block-inner{
       overflow: hidden;
       /*width: 100%!important;*/
       margin: 0;
       padding: 0;
    }
    .column_map{
        width: 100%!important;
    }
    .address-block-wrap{
        /*padding-left: 15%;*/
        margin: 3% auto auto auto;
        z-index:20;
    }
    .column_map .section-wrapper img{
        height: 98vh!important;
    }
    .local-address-block{
        padding-top:5%;
    }
}
@media only screen and (max-width: 768px) {
    .column_map{
       visibility:hidden;
       display:none;
    }
    .my-hover .hover_box{
       text-align: center;
       line-height: 0;
       margin: 0 auto;
       width: 60%;
    }
    .address-block-wrap{
        text-align:center;
    }
    #Content {
        padding-top:30px;
    }
}
@media only...