@charset "UTF-8";

/*
  Theme Name:        myEcard 1.0
  Theme URL:         https://afresh.studio
  Version:           1.0
  Description:       Focus Theme by Afresh Studio
  Tags:              Focus Theme, html5, css3, responsive
  Author:            Afresh Studio
  Author URI:        https://afresh.studio
  Copyright:         © Afresh Studio
  License:           Not for personal or commercial use by anyone except Afresh Studio.
  License URI:       N/A
*/

/*=======================================================================================================================================
01 Fonts
02 !!! NO RESET !!!
03 Structure
04 Typography
05 Media
06 Forms & Buttons
07 Front-End Interface
08 WordPress Styles
09 Plugin Styles
10 Page-Specific Layout
=======================================================================================================================================*/

/*=======================================================================================================================================
01 FONTS
=======================================================================================================================================*/



/*=======================================================================================================================================
03 STRUCTURE
=======================================================================================================================================*/
:root {
	--color-white: #ffffff;
	--color-offwhite: #f5f5f5;
	--color-dkgray: #252728;
	
	--border-radius: 1.5rem;
	
	--shadow-almostnone: box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
	--shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xlarge: rgba(0, 0, 0, 0.35) 0px 35px 40px -20px;
}

header#global, header#global.on-scroll {
	height: auto;
	max-height: auto;
	background-color: transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	padding: 10px 0;
}
a#logo, a#logo.on-scroll {
	width: 150px;
	margin: 0 auto;
	filter: brightness(1.25);
}
a#logo.on-scroll {}
@media screen and (max-width: 768px) {
	a#logo {
		width: 150px;
	}
}

header#global .row {
	max-width: 100% !important;
}
header#global .row .col {
	padding: 0 1.5rem;
}
header#global nav#primary {
	right: 1.5rem;
}
header#global.on-scroll nav#primary {
	display: none !important;
}
@media screen and (max-width: 768px) {
	header#global nav#primary {
		display: none !important;
	}
}
nav#primary {
	width: auto;
	height: auto;
	position: absolute;
	top: 7px;
	right: 0;
	display: table !important;
	padding: 0;
}
nav#primary ul li {
	display: inline-block;
}
nav#primary ul li a, nav#primary ul li a:link, nav#primary ul li a:visited {
	font-size: 1.2rem;
	font-weight: 500;
	text-transform: none;
	line-height: inherit;
	color: var(--color-dkgray);
	padding: 2px 20px;
}

main#content, #content {
	padding: 0;
}

footer {
	background-color: var(--color-white);
	padding: 1.5rem 1.5rem;
}
footer p.copyright {
	padding-bottom: 0 !important;
	font-size: .85rem;
	line-height: 1.8;
}
footer p.copyright span {
	display: block;
	text-align: center;
}



/*=======================================================================================================================================
04 TYPOGRAPHY
=======================================================================================================================================*/

body {
	max-width: 600px;
	margin: 0 auto;
	background-color: var(--color-offwhite);
	font-family: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: 1.65;
	color: var(--color-dkgray);
}

h1, h2, h3, h4, h5, h6 {
	padding-bottom: 1.5rem !important;
}

h1 {
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 700;
}

h2 {
	font-size: clamp(1.6rem, 3vw, 1.8rem);
	font-weight: 500;
}

p {
	font-size: clamp(1.1rem, 3vw, 1.8rem);
	font-weight: 400;
	padding-bottom: 1.5rem !important;
}

a, a:link, a:visited {
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}
a:hover, a:active {}

header.light,
header.light h1,
header.light h2,
header.light h3,
header.light h4,
header.light h5,
header.light h6,
header.light p {
	color: var(--color-white);
}

header.dark,
header.dark h1,
header.dark h2,
header.dark h3,
header.dark h4,
header.dark h5,
header.dark h6,
header.dark p {
	color: var(--color-dkgray);
}



/*=======================================================================================================================================
05 MEDIA
=======================================================================================================================================*/

/*  SOCIAL MEDIA
    ------------------------------------------------------------  */

/*  - - - - -  Social "Icon" Buttons  - - - - -  */

/* Global Styling */
a.social-icn, a:link.social-icn, a:visited.social-icn {
}
a:hover.social-icn, a:active.social-icn {
}

/* Behance */
a.social-icn.be:before,
/* Dribbble */
a.social-icn.db:before,
/* Facebook */
a.social-icn.fb:before,
/* Flickr */
a.social-icn.fr:before,
/* Google+ */
a.social-icn.g1:before,
/* Instagram */
a.social-icn.ig:before,
/* LinkedIn */
a.social-icn.li:before,
/* Pinterest */
a.social-icn.pn:before,
/* RSS*/
a.social-icn.rss:before,
/* Tumblr */
a.social-icn.tr:before,
/* Twitter */
a.social-icn.tw:before,
/* Vimeo */
a.social-icn.vm:before,
/* YouTube */
a.social-icn.yt:before {
}

/*  - - - - -  FULLSCREEN / WIDTH  - - - - -  */
.example.full.screen,
.example.full.width {
    background-image:
        linear-gradient(
            rgba(0,0,0,.4),/*rgba(88,88,88,.5),*/
            rgba(0,0,0,.4)/*rgba(20,20,20,.75)*/
    )/*,url('https://unsplash.it/1200/800?image=961'); /* https://unsplash.it/1200/800/?image=516 */
}



/*=======================================================================================================================================
06 FORMS & BUTTONS
=======================================================================================================================================*/

a.btn, a:link.btn, a:visited.btn, p.btn a, p.btn a:link, p.btn a:visited, input[type="submit"], button, .button, #content .wp-block-file__button, #content .wp-block-button__link, input.cf-page-btn, input.cf-page-btn:link, input.cf-page-btn:visited {
	background: transparent;
	border: 3px solid var(--color-dkgray);
	border-radius: 100px;
	transition: all .2s ease-in-out;
	font-weight: 700;
}

a:hover.btn, a:active.btn, p.btn a:hover, p.btn a:active, input[type="submit"]:hover, input[type="submit"]:active, button:hover, button:active, .button:hover, .button:active, #content .wp-block-file__button:hover, #content .wp-block-file__button:active, #content .wp-block-button__link:hover, #content .wp-block-button__link:active, input.cf-page-btn:hover, input.cf-page-btn:active {
	background: transparent;
	transform: scale(1.1);
}



/*=======================================================================================================================================
07 FRONT-END INTERFACE
=======================================================================================================================================*/

/*  PRELOADER
    ------------------------------------------------------------  */
#preloader {
    background-color: var(--color-offwhite);
}
.preload-icon {
    height: 70px;
    width: 70px;
    margin: -35px 0 0 -35px;
    border: 4px solid #f5f5f5;
    border-top: 4px solid var(--color-dkgray);
}
@media all and (min-width: 0px) and (max-width: 735px) {
    /*.preload-icon {
        margin-top: calc(-35px - 82px);
    }*/
}


/*  Hide
    ------------------------------------------------------------  */
.hide {
	display: none;
}


/*  Error 404 Page
    ------------------------------------------------------------  */
body.error404 section#error404 {
    background: var(--color-dkgray) !important;
}



/*=======================================================================================================================================
08 WORDPRESS STYLES
=======================================================================================================================================*/



/*=======================================================================================================================================
09 PLUGIN STYLES
=======================================================================================================================================*/

/*  Kaya QR Code Generator
    ------------------------------------------------------------  */
.qr_code {
	width: 100%;
	padding: 0 0 2rem;
}
@media all and (min-width: 0px) and (max-width: 768px) {
	.qr_code {
		width: 100%;
	}
}
@media (max-width: 768px) {
	#content .qr_code h2 {
		text-align: center;
	}
}
.wpkqcg_qrcode_wrapper {}
.wpkqcg_qrcode_wrapper img.wpkqcg_qrcode {
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-medium);
}

.other_contact_methods {
	width: 100%;
	padding: 3rem 1.5rem 0;
	display: flex;
	flex-direction: column;
}
@media all and (min-width: 0px) and (max-width: 768px) {
	.other_contact_methods {
		display: inline-block;
	}
}

.share {
	text-align: center;
}

.short_url {
	width: 100%;
	height: auto;
	font-size: 1rem;
	vertical-align: middle;
	flex: 1;
}
@media all and (min-width: 0px) and (max-width: 768px) {
	.short_url {
		width: 100%;
		text-align: center;
	}
}
#content .short_url .short_link h2,
#content .short_url .regular_link h2 {
	padding-bottom: 1rem !important;
}
.short_url span {
	display: block;
	padding: 0 0 1.5rem !important;
}
.short_url button {
	color: #000 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
}
.short_url #bitly_url_tocopy,
.short_url #regular_url_tocopy {
	display: none;
	visibility: hidden;
}
.short_url .bitly_url,
.short_url .regular_url {
	width: 100%;
	padding: 0;
	font-size: 1rem;
}
@media all and (min-width: 0px) and (max-width: 768px) {
	.short_url .bitly_url,
	.short_url .regular_url {
		padding: 0;
	}
}
#bitly_url, #regular_url {
	font-size: .75rem;
}
#content .bitly_url h2 {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
#content .bitly_url .short_link,
#content .bitly_url .regular_link {
	background-color: var(--color-white);
	padding-top: 2rem;
	padding-right: 2rem;
	padding-bottom: 2rem;
	padding-left: 2rem;
	margin-bottom: 2rem;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-medium);
}



/*=======================================================================================================================================
10 PAGE-SPECIFIC LAYOUT
=======================================================================================================================================*/

/*	HOME
    ------------------------------------------------------------  */


/*	ABOUT
    ------------------------------------------------------------  */


/*	CONTACT
    ------------------------------------------------------------  */


/*	BLOG
    ------------------------------------------------------------  */

#author-bio {
    margin: 3rem 0;
	padding: 2rem;
	background: #f9fafb;
    border-radius: 1rem;
}
#author-avatar {
    width: 100%;
	float: left;
	margin-right: 3rem;
	border-radius: 100%;
    overflow: hidden;
}
#author-details {
	font-size: 1.25rem;
    line-height: 1.9;
}


/*	SINGLE: DIGITAL CARD
	------------------------------------------------------------  */
body.single-digital_card main#content {
	padding: 4.5rem 0;
}

.dcard-header {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.dcard-thumb {
	padding: 3.5rem;
}

.dcard-companylogo {
	max-width: 24%;
	max-height: 24%;
	margin: -102px auto .5rem;
}
@media screen and (min-width: 768px) {
	.dcard-companylogo {
		margin: -122px auto 1.5rem;
	}
}

.dcard-basicinfo {
	position: relative;
	top: 0;
	transform: translateY(0%);
	padding: 1.5rem 0 3rem !important;
	text-align: center;
}
.dcard-basicinfo h1 {
	padding-bottom: .5rem !important;
}
.dcard-basicinfo p {
	font-size: clamp(1.1rem, 3vw, .95rem);
	font-weight: 500;
	line-height: 1.35;
}
@media screen and (min-width: 768px) {
	.dcard-basicinfo {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}

@media screen and (min-width: 768px) {
	.dcard-about {
		padding: 3rem 0;
	}
}

#content .dcard-contactmethods {
	width: 100%;
	display: inline-block;
	padding: 3rem 0 3rem;
}
@media screen and (min-width: 768px) {
	#content .dcard-contactmethods {
		padding-bottom: 3rem;
	}
}
#content .dcard-contactmethods p {
	display: inline-block;
	padding-bottom: 1rem !important;
}
#content .dcard-contactmethods a {
	display: block;
	padding: 1rem 1.5rem;
	background-color: var(--color-white);
	border-radius: 6rem;
	box-shadow: var(--shadow-medium);
}
@media screen and (min-width: 768px) {
	/*#content .dcard-contactmethods p {
		width: 50% !important;
		float: left;
	}*/
}
#content .dcard-contactmethods img.icon {
	min-width: 33px !important;
	max-width: 33px !important;
	width: 33px !important;
	height: auto;
	float: left;
	margin: -4px 1.25rem 0 0;
}
@media screen and (min-width: 768px) {
	#content .dcard-contactmethods img.icon {
		min-width: 52px !important;
		max-width: 52px !important;
		width: 52px !important;
	}
}
svg.feather {
	width: 33px;
	height: auto;
	float: left;
	margin: -4px 1.25rem 0 0;
}
@media screen and (min-width: 768px) {
	svg.feather {
		width: 52px;
	}
}


/*	SINGLE: DIGITAL CARD - V2
	------------------------------------------------------------  */
.dcard-header {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	max-width: calc(100vw - 1.5rem) !important;
	margin: .75rem auto;
	padding: 1.5rem;
	border-top-left-radius: 3rem;
	border-top-right-radius: 3rem;
	border-bottom-left-radius: 3rem;
	border-bottom-right-radius: 3rem;
}
.dcard-header .row .col-wrapper {
	flex-direction: column;
}

.dcard-thumb {
	width: 140px;
	margin: 0 auto;
	padding: 0 0rem 1.5rem;
}

.dcard-companylogo {
	max-width: 24%;
	max-height: 24%;
	margin: -102px auto .5rem;
	display: none;
}
@media screen and (min-width: 768px) {
	.dcard-companylogo {
		margin: -122px auto 1.5rem;
	}
}

.dcard-basicinfo {
	position: relative;
	top: 0;
	transform: translateY(0%);
	padding: 0 !important;
	text-align: center;
}
.dcard-basicinfo h1 {
	padding-bottom: .5rem !important;
}
.dcard-basicinfo p {
	padding: 0 !important;
	font-size: clamp(.9rem, 3vw, .95rem);
	font-weight: 500;
	line-height: 1.35;
}
/*@media screen and (min-width: 768px) {
	.dcard-basicinfo {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}*/

body.single-digital_card main#content {
	padding: 2rem 0;
}

@media screen and (min-width: 768px) {
	.dcard-about {
		padding: 3rem 0;
	}
}

#content .dcard-about p {
	padding-bottom: 1.5rem !important;
	line-height: 1.5;
	font-weight: 500;
}

#content .dcard-contactmethods {
	width: 100%;
	display: inline-block;
	padding: 1.5rem 0;
}
@media screen and (min-width: 768px) {
	#content .dcard-contactmethods {
		padding-bottom: 3rem;
	}
}
#content .dcard-contactmethods p {
	display: inline-block;
	padding-bottom: 1rem !important;
}
#content .dcard-contactmethods a {
	display: block;
	padding: 1rem 1.5rem;
	background-color: var(--color-white);
	border-radius: 6rem;
	box-shadow: var(--shadow-medium);
}
@media screen and (min-width: 768px) {
	/*#content .dcard-contactmethods p {
		width: 50% !important;
		float: left;
	}*/
}
#content .dcard-contactmethods img.icon {
	min-width: 33px !important;
	max-width: 33px !important;
	width: 33px !important;
	height: auto;
	float: left;
	margin: -4px 1.25rem 0 0;
}
@media screen and (min-width: 768px) {
	#content .dcard-contactmethods img.icon {
		min-width: 52px !important;
		max-width: 52px !important;
		width: 52px !important;
	}
}
svg.feather {
	width: 33px;
	height: auto;
	float: left;
	margin: -4px 1.25rem 0 0;
}
@media screen and (min-width: 768px) {
	svg.feather {
		width: 52px;
	}
}