@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,900');

body {font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background: #fff;}
ul, li {list-style: none; margin: 0; padding: 0;}
a {text-decoration: none;}
* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.b-card-container {max-width: 1200px; margin: 0 auto; background: #fff; padding: 40px 0;}
.b-card-container:after {content: ""; display: table; clear: both;}
.b-card-design {width: 337px;
                margin: 0 auto;
                border: 1px solid #0088cc;
                border-radius: 22px;
                position: relative;
                text-align: left;
                box-shadow: 2px 0px 14px 3px #0088cc;
                background: #070707 url(images/octave/as.jpg) 0 0 no-repeat;}
.b-card-design:after {content: ""; display: table; clear: both;}

.b-card-design .logo-container {width: 100%;text-align: center;margin-bottom: 12px;margin-top: 40px;float: left;}
.b-card-design .logo {display: inline-block; margin: 0 0 25px;}
.b-card-design .logo img {position: relative; z-index: 2; width: auto; height: auto;}

.b-card-design .logo-container .compname {font: 700 20px/30px 'Merriweather', serif; color: #ccc; display: inline-block; max-width: 320px; width: 100%; margin: 10px 0 0;}
.b-card-design .logo-container .compname span {display: inline-block; position: relative;}
.b-card-design .logo-container .compname span span {color: #fff; font-size: 20px;}

.small-img {float: right; margin: 15px 15px 0 0;}

.b-card-design .logo-container .certified {display: block;font: 13px Arial;color: #fff;padding: 0 20px 45px;background: url(../images/light-floral.png) center 100% no-repeat;background-size: 50% auto;}
.b-card-design .logo-container .certified span {display: block; padding: 0 20px; font: 15px 'Roboto', sans-serif;} 

.b-card-design .caption {margin: 340px 0 0 0; width: 100%; font: 18px/22px Arial; color: #fff; text-align: center; padding: 0 40px;}


.address {float: left;position: relative;color: #fff;font-weight: 400;font-size:15px;margin: 0;padding: 10px 20px;text-align: center;z-index: 2;width:100%;}
.address p {margin: 0;}

.owner {float: left; text-align: center; margin-top: 20px; width: 100%;}
.owner-name {font: 700 20px 'Nunito', sans-serif; color: #fff;margin: 0;display: inline-block;}
.desig {font:13px Arial; color: #fff; margin-top: 0px;margin-bottom: 0;}
.desig a {color: #282826; text-decoration: underline;}

.b-card-design ul:after {content: ""; display: table; clear: both;}
.b-card-design ul {font-size: 0;text-align: center;margin-top: 110%} 
.b-card-design ul li {width: 33.33%;display: inline-block; text-align: center; margin: 10px 0 0;}
.b-card-design ul li.website {margin-bottom: 0;}
.b-card-design ul li a {display: inline-block; text-align: center; font-weight: 500; color: #5a5a5a; position: relative;}
.b-card-design ul li a:hover {color: #0853a8;}
.b-card-design ul li a img {display: inline-block; vertical-align: middle; margin-right: 12px;}

.b-card-design ul li.fax {width: 100%; font-size: 14px; margin-bottom: 15px;}

.b-card-design ul li.contact a:before {content: ""; width: 60px; height: 60px; display: inline-block; vertical-align: top; background: url(images/icon-contact.png) center center no-repeat; background-size: 100% auto;box-shadow: 3px 3px 10px 1px #333;border-radius: 13px;}
.b-card-design ul li.whatsapp a:before {content: ""; width: 60px; height: 60px; display: inline-block; vertical-align: top; background:url(images/icon-whatsapp.png) center center no-repeat; background-size: 100% auto;box-shadow: 3px 3px 10px 1px #333;border-radius: 13px;}
.b-card-design ul li.email a:before {content: ""; width: 60px; height: 60px; display: inline-block; vertical-align: top; background: url(images/icon-mail.png) center center no-repeat; background-size: 100% auto;box-shadow: 3px 3px 10px 1px #333;border-radius: 13px;}
.b-card-design ul li.website a:before {content: ""; width: 60px; height: 60px; display: inline-block; vertical-align: top; background: url(images/icon-web.png) center center no-repeat; background-size: 100% auto;box-shadow: 3px 3px 10px 1px #333;border-radius: 20px;}
.b-card-design ul li.map {margin-bottom: 0;}
.b-card-design ul li.map a:before {content: ""; width: 60px; height: 60px; display: inline-block; vertical-align: top; background: url(images/icon-map.png) center center no-repeat; background-size: 100% auto;box-shadow: 3px 3px 10px 1px #333;border-radius: 13px;}

.b-card-design ul li.powered-by { color: #0088cc; font-size: 14px; width: 100%;font-weight: 700}
.b-card-design ul li.powered-by a {color: #0088cc;font-weight: 800}
.b-card-design ul li.powered-by a:hover {text-decoration: underline;}
ul {
    margin-bottom: 0rem !important;
}

@media screen and (max-width:767px) {
    body {padding: 15px;}
    .b-card-container {padding: 0;}
}


@media screen and (max-width:499px) {
    .b-card-design ul.field-areas {font-size: 18px;}
    .b-card-design ul.field-areas li:after {width: 58%;}
}

@media screen and (max-width:350px) {
    .b-card-design .caption {padding: 0 34px; font-size: 16px;}
    .contact{
        display: none;
    }
}