<style>
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .col-s-1 { width: 20%; }
    .col-s-2 { width: 40%; }
    .col-s-12 { width: 100%; }
}

@media only screen and (min-width: 768px) {
    .col-1 { width: 20%; }
    .col-2 { width: 40%; }
    .col-12 { width: 100%; }
}

@font-face {
    font-family: 'tbc_contracticaregular';
    src: url('tbccontractica.woff2') format('woff2'),
         url('tbccontractica.woff') format('woff'),
		 url('tbccontractica.woff') format('woff'),
         url('tbccontractica.ttf') format('truetype'),
         url('tbccontractica.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tbc_contracticabold';
    src: url('tbccontractica-bold.woff2') format('woff2'),
         url('tbccontractica-bold.woff') format('woff'),
		 url('tbccontractica-bold.woff') format('woff'),
         url('tbccontractica-bold.ttf') format('truetype'),
         url('tbccontractica-bold.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}

.business-card {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 0px;
    background-color: #123336;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 360px;
    margin: 0 auto;
}

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.name {
    font-size: 20px;
	color: #EDE2D8;
	text-align: center;
	margin-top: 25px;
    margin-bottom: 5px;
	font-family: tbc_contracticabold;
}

.line {
    width: 55%;
    height: 1px;
    background-color: #EDE2D8;
    margin: 0 auto 10px auto;
}

.title {
    font-size: 13px;
	color: #EDE2D8;
	margin-left: 79px;
    margin-bottom: 5px;
	font-family: tbc_contracticaregular;
}

.title2 {
    font-size: 13px;
	color: #EDE2D8;
	margin-left: 79px;
    margin-bottom: 20px;
	font-family: tbc_contracticaregular;
}

.company, .mobile, .phone, .email, .work, .address {
    font-size: 12px;
	color: #EDE2D8;
	margin-left: 79px;
    margin-bottom: 2px;
	font-family: tbc_contracticaregular;
}

#downloadBtn {
    display: block;
    background-color: #123336;
    color: #EDE2D8;
	font-size: 13px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
    text-decoration: none;
	font-family: tbc_contracticaregular, Arial;
}

a:link {
  color: #EDE2D8;
  text-decoration: none;
}

a:visited {
  color: #EDE2D8;
  text-decoration: none;
}

a:hover {
  color: #EDE2D8;
  text-decoration: none;
}

a:active {
  color: #EDE2D8;
  text-decoration: none;
} 

#downloadBtn:hover {
    background-color: #EDE2D8;
	color: #123336;
}

#qrCode {
    margin-top: 10px;
	margin-bottom: 30px;
    text-align: center;
}

.share-btn {
    display: none;
    background-color: #123336;
    color: #EDE2D8;
	font-size: 13px;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
	font-family: tbc_contracticaregular, Arial;
}

.share-btn:hover {
    background-color: #EDE2D8;
	color: #123336;
}  

  @media screen and (max-width: 768px) {
 	.share-btn {
     display: block;
}