/**
Theme Name: AgentSync
Author: RoxxiStudios Dev Team
Author URI: https://RoxxiStudios.com
Description: AgentSync Real Estate App is a custom child theme specifically designed for Real Estate Agents. Based on Astra, an award winning wordpress theme, AgentSync focuses on app based digital Real Estate Agent Contact Cards. Our custom designed digital business card app makes it easy to connect and share your business details, helpful links, and social profiles even without a wifi connection. So, ditch physical business cards and expensive chip based cards and get your AgentSync Digital Business Card -- get ready to go viral!
Version: 2.6.02
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agentsync
Template: astra
*/




/*****
* AGENTSYNC PROFILE
*****/

* {
    transition: 250ms;
}

/*** DEVICE DEPENDANCIES ***/

.isMobile {
    display: none;
}

.notMobile {
    display: inherit;
}

li.notMobile {
    display: list-item;
}


/*** INDUSTRY ICONS ***/

.credit.car.ftbs:before {
    content: '\e00a';
    font-family: 'Font Awesome Kit';
    color: #0B96D2;
    padding-right: .25rem;
}


/*** BRANDING ***/

:root {
    --agent-dark: #555;
    --agent-light: #F0F0F1;
    --agent-neutral: #777;
}

::selection {
    background: var(--agent-primary);
}

/*** ASTRA RESETS ***/

.ast-container {
    margin: 0;
    padding: 0;
}


/*** RESETS ***/

html,
body.page-template-agentsync-me {
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: none;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0 auto .25rem;
    margin: 0 auto;
}

#async ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
    margin: 0 auto;
    gap: 20px;
}

#agent_Bio .modal-content #async ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translateX(10px) translateY(8px);
    margin-bottom: 40px;
}

#agent_Bio .modal-content #async ul li {
    margin-left: 20px; 
    list-style: initial;
}




/*********************
* MODAL: LINKS + RESOURCES
*********************/

.modal-content #async ul.profileLinks {
    display: flex;
    justify-content: space-between;
}

.modal-content #async ul.profileLinks:first-child {
    width: 100%;
}

.modal-content #async ul.profileLinks > li {
    flex: 1 1 calc(50% - 20px);
}

.modal-content #async ul.profileLinks > li a {
}

.modal-content #async ul.profileLinks ul {
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}

.modal-content #async ul.profileLinks ul li {
    flex: 1 1 calc(25% - 20px);
}

.modal-content #async ul.profileLinks ul li a {
    padding: 0;
}

.modal-content #async ul.profileLinks ul li a i {
    font-size: 24px;
}

button.center {
    text-align: center;
    width: 80%;
    margin: 1rem auto;
    border-radius: .25rem;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

button:hover {
    outline: none;
}

#async a {
    color: var(--agent-primary);
    text-decoration: none;
    cursor: pointer;
}

#async a:hover {
    color: var(--agent-secondary);
}


/*** ANIMATIONS ***/

#async.flex {
    animation: fadeIn 800ms;
    -moz-animation: fadeIn 800ms;
    -webkit-animation: fadeIn 800ms;
    -o-animation: fadeIn 800ms;
}

button.close {
    animation: fadeDelay 800ms;
    -moz-animation: fadeDelay 800ms;
    -webkit-animation: fadeDelay 800ms;
    -o-animation: fadeDelay 800ms;
}

button.app-btn {
    animation: appButton 1200ms;
    -moz-animation: appButton 1200ms;
    -webkit-animation: appButton 1200ms;
    -o-animation: appButton 1200ms;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@keyframes fadeDelay {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@keyframes appButton {
    0% {
        bottom: -4rem;
    }

    50% {
        bottom: -4rem;
    }

    100% {
    }
}


/*** LAYOUT ***/

body.page-template-agentsync-me .ast-container {
    margin: 0 auto;
    padding: 0;
}

#page .site-content {
    display: flex;
    flex-wrap: wrap;
}

#content .col-3 {
    width: 25%;
    min-width: 25%;
    flex-basis: 25%;
    flex-grow: 1;
}

#content .col-4 {
    width: 33%;
    min-width: 33%;
    flex-basis: 33%;
    flex-grow: 1;
}

#content .col-6 {
    width: 50%;
    min-width: 50%;
    flex-basis: 50%;
    flex-grow: 1;
}

#content .col-6:nth-child(odd) {
    padding-right: .5rem;
    padding-left: 0;
}

#content .col-6:nth-child(even) {
    padding-left: .5rem;
    padding-right: 0;
}

#content .col-12 {
    width: 100%;
    min-width: 100%;
    flex-basis: 100%;
    flex-grow: 1;
}

#async ul.async-btn-group li.col-12 {
    padding: 0;
    flex-basis: auto;
}




/*********************
* PAGE: AGENT PROFILE
*********************/

#async.flex {
    display: flex;
    gap: 15px;
    padding: 40px 20px 60px;
    width: 100vw;
    max-width: 600px;
}

#async .async_Header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 10px;
    width: -webkit-fill-available;
}

#async .agent-headshot {
    display: flex;
    width: 180px;
    height: auto;
    align-items: center;
    justify-content: center;
}

#async .agent-headshot img {
    border-radius: 100vw;
    overflow: hidden;
}

#async .agent_infoBox {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 60%;
}

#async .agent-name {
    font-size: 28px;
    color: black;
    line-height: 1.25;
    font-weight: bold;
    margin: 0;
}

#async .agent-title {
    font-size: 20px;
}

#async .agent_infoBox .agent-title {
    font-size: 18px;
    color: var(--agent-dark);
    margin: 0;
}

#async .agent-title.center a {
    display: flex;
    line-height: normal;
}

#async p.agent-dre {
    color: var(--agent-dark);
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

#async .agent-team {
    padding-top: 10px;
    margin-top: 5px;
    font-weight: 300;
    border-top: 1px solid silver;
}

#async .agent-team a {
    display: inline-flex;
    width: fit-content;
    font-size: 15px;
    font-weight: bold;
}


/*** NAV BUTTON CONTAINER ***/

#async ul.async-nav-box {
    display: flex;
    gap: 15px;
}

#async ul.async-nav-box li {
    flex: 1 auto;
    align-content: center;
    align-items: center;
    justify-content: center;
}

#async ul.async-nav-box li a,
#async ul.async-nav-box li button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    background: var(--agent-primary);
    height: 54px;
    margin: 0;
    padding: 0;
    width: 100%;
    width: -webkit-fill-available;
    border-radius: 5px;
}

#async ul.async-nav-box li a:hover, #async ul.async-nav-box li:hover button {
    background: var(--agent-secondary);
    color: white;
}

/*** LIST BUTTONS ***/
#async ul.async-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

#async ul.async-btn-group li {
    display: flex;
    flex: 1 calc(50% - 20px);
    align-items: center;
    justify-content: center;
}

#content #async ul.social-icons li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
}

#async .button {
    display: flex;
    width: 100%;
    height: 54px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid var(--agent-neutral);
    border-radius: 5px;
}

#async .button:hover {
    color: white;
    background: var(--agent-primary);
    border-color: transparent;
}

#async .button i {
    font-size: 1.25rem;
    margin-right: .5rem;
}

#async .async-nav-box .button i {
    margin-right: 0;
}

#async .button.share-button i {
    color: var(--agent-primary);
    font-size: 1.5rem;
}

body.page-template-agentsync-me .modal #async .button.share-button i {
    color: white;
    font-size: 1.5rem;
}

#async .button.share-button:hover i {
    color: white;
}

#async .button.primary {
    background: var(--agent-primary);
    border-color: var(--agent-primary);
    color: white;
}

#async .button.primary:hover {
    background: var(--agent-secondary);
    border-color: var(--agent-secondary);
    color: white;
}

#async .button.secondary {
    background: var(--agent-secondary);
    border-color: var(--agent-secondary);
    color: white;
}

#async .button.secondary:hover {
    background: var(--agent-primary);
    border-color: var(--agent-primary);
    color: white;
}

#content #async .button.neutral {
    font-size: 18px;
    background: white;
    border-color: var(--agent-dark);
    color: var(--agent-dark);
}

#content #async .button.neutral:hover {
    background: var(--agent-primary);
    border-color: var(--agent-primary);
    color: white;
}

#async ul.social {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#async ul.social a.social.button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .25rem;
    max-height: 3rem;
    max-width: 3rem;
    padding: 1rem;
    line-height: 0;
}

#async ul.social a.social.button i {
    font-size: 1.5rem;
    margin: 0 auto;
}

#share_App button.share-button {
    margin-top: 1rem;
    max-width: 240px;
}

/*** CONTACT DETAILS LIST ***/

#contact_details ul {
    display: flex;
    flex-direction: column;
}

#contact_details ul li h3 {
    display: flex;
    align-items: center;
    gap: 15px;
}

#contact_details ul li h3 i {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 20%;
    font-size: 20px;
    height: 40px;
    max-width: 40px;
    background: var(--agent-primary);
    color: white;
    border-radius: 5px;
}

#contact_details ul li h3 a {
    display: flex;
    flex-direction: column;
    flex: 1 1 80%;
    color: var(--agent-secondary);
    font-size: 18px;
    line-height: normal;
    word-break: break-word;
}

#contact_details ul li h3 a:hover {
    color: var(--agent-primary);
    background: 0 0
}

#contact_details ul li h3 a p {
    font-size: 16px;
    margin: 0;
}


/*** FEATURE ICONS ***/

#async ul.async-feature-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#async ul.async-feature-list li {
    padding: .25rem .5rem;
}

#async ul.async-feature-list li i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    color: gray;
    padding: .5rem;
    border-radius: 99px;
    border: 1px solid gray
}


/*** QRCODE ***/

#async .agent-qrcode {
    width: 100%;
}

#async .agent-qrcode img {
    margin: 0;
    background: none;
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
}




/********************
* PAGE: SHARE APP
********************/

#async.share_App {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: -webkit-fill-available;
    margin: 0 auto;
    padding: 1rem 2rem;
    text-align: center;
}

#async.share_App h2 {
    color: black;
}

#async.share_App ul {
    width: -webkit-fill-available;
    margin: 0 auto;
    padding: 0;
}

#async.share_App ul li {
    margin: 1.5rem auto;
    list-style: none;
}

#async.share_App ul li a {
    display: block;
    color: white;
    text-decoration: none;
    background: var(--agent-secondary);
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    border-radius: 50px;
    font-size: 1.25rem;
    line-height: normal;
    font-weight: bold;
    padding: 1rem;
}

#async ul li a.btnReverse, #async ul li button.btnReverse {
    background: var(--agent-secondary);
}

#async ul li a.btnReverse:hover, #async ul li:hover button.btnReverse {
    background: var(--agent-dark);
}

#async ul li a:hover {
    background: var(--agent-primary);
}

#async.share_App ul li a i {
    padding-right: .5rem;
}

#async li.as-col-6 {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    width: 6rem;
    height: 4rem;
    padding: 0 .5rem;
    margin: 1rem auto 0;
}

#async li.as-col-6 i {
    padding: 0;
    font-size: 1.5rem;
}




/********************
* MODALS
********************/

body.page-template-agentsync-me .modal-dialog {
    margin: 0 auto;
    width: calc(100% - 40px);
    max-width: 600px;
}

body.page-template-agentsync-me .modal-header {
    justify-content: center;
    align-items: center;
    background: var(--agent-secondary);
}

body.page-template-agentsync-me .modal-header button.close {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    bottom: 2rem;
    font-size: 2.5rem;
    width: 4rem;
    height: 4rem;
    background: var(--agent-primary);
    color: white;
    border: .4rem solid white;
    border-radius: 3rem;
    text-shadow: unset;
}

body.page-template-agentsync-me .close:not(:disabled):not(.disabled):focus,
body.page-template-agentsync-me .close:not(:disabled):not(.disabled):hover {
    opacity: 1;
    background: var(--agent-secondary);
}

body.page-template-agentsync-me .modal-header h2 {
    color: white;
    font-weight: bold;
    line-height: normal;
    font-size: 24px;
}

body.page-template-agentsync-me .modal-content {
    align-content: flex-start;
    border: none;
    top: 0px;
    overflow: hidden;
    max-height: calc(100vh - 120px);
}

body.page-template-agentsync-me .modal-content .center {
    justify-content: flex-start;
}

body.page-template-agentsync-me .modal-content p, .modal-content li {
    font-size: 1.25rem;
    line-height: 1.33
}

body.page-template-agentsync-me .modal-content #async {
    padding: 20px;
    overflow-y: auto;
}

body.page-template-agentsync-me .modal-content #async .button {
    flex-direction: row;
}

body.page-template-agentsync-me .modal ul:not(:last-child) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

body.page-template-agentsync-me .modal hr {
    width: 100%;
    margin: .5rem auto 2rem;
    background: var(--agent-light);
}

body.page-template-agentsync-me .modal-content.level_2 {
    box-shadow: 0 8px 16px 50rem rgba(0, 0, 0, .5);
}


/*** MODAL BUTTONS ***/

.modalButtons h2 {
    color: black;
}

.modalButtons ul {
    margin: 0 auto;
    padding: 0;
}

.modalButtons ul li {
    margin: 1.5rem auto;
    list-style: none;
}

.modalButtons ul li a {
    display: block;
    color: white;
    text-decoration: none;
    background: var(--agent-secondary);
    width: 100%;
    max-width: 350px;
    border-radius: 50px;
    font-size: 1.25rem;
    line-height: normal;
    font-weight: bold;
    padding: 1rem;
}

.modalButtons ul li a.btnReverse {
    background: var(--agent-primary);
}

.modalButtons ul li a.btnReverse:hover {
    background: var(--agent-secondary);
}

.modalButtons ul li a:hover {
    background: var(--agent-primary);
}

.modalButtons ul li a i {
    padding-right: .5rem;
}

.modalButtons li.as-col-6 {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    width: 6rem;
    height: 4rem;
    padding: 0 .5rem;
    margin: 1rem auto 0;
}

.modalButtons li.as-col-6 i {
    padding: 0;
    font-size: 1.5rem;
}

.mcalc-full.mcwp-results {
    display: none;
}




/********************
* SHARE APP TOOL
********************/

.share-dialog html {
    box-sizing: border-box;
}

.share-dialog .hidden {
    display: none;
}

.share-dialog .copy-link {
    padding: .65rem 0;
    flex-basis: 200px;
    text-align: center;
    display: block;
}

.share-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.share-dialog {
    display: none;
    margin-top: -50px;
    max-width: 800px;
    box-shadow: 0 8px 16px 50rem rgba(0, 0, 0, .5);
    z-index: -1;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 0.5rem;
    background-color: #fff;
}

.share-dialog.is-open {
    display: block;
    z-index: 9999;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.share-dialog header {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
}

.share-dialog .targets {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 20px;
}

.share-dialog a.button, .share-dialog button {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    background: var(--agent-dark);
    border: none;
    border-radius: .33rem;
    text-decoration: none;
    text-align: left;
}

.share-dialog button ::before, .share-dialog a.button ::before {
    font-size: 1.25rem;
    padding-right: .5rem;
}

.share-dialog a.button:hover {
    color: white;
    background: var(--agent-primary);
    border: none;
    cursor: pointer;
}

.share-dialog.is-open button.close-button {
    background: var(--agent-primary);
    position: absolute;
    display: flex;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.share-dialog.is-open button.close-button ::before {
    color: white;
    font-size: 2rem;
    padding: 0;
}

.share-dialog .link {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    border-radius: 4px;
    background-color: #eee;
}

.share-dialog input.agent-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    padding: .8rem;
    border-radius: 0.5rem;
    border: 1px solid;
}

#content .share-dialog input.agent-url:hover {
    background: var(--agent-primary);
    color: white;
}

#content .share-dialog input.agent-url::selection {
    background: none;
}




/********************
* INSTALL APP BUTTON
********************/

button.app-btn::before {
    content: '\f3cf';
    font-family: 'Font Awesome 6 Pro';
    padding-right: 8px;
    font-size: 1.5rem;
}

body button.app-btn:hover {
    background: var(--agent-secondary) !important;
    color: white !important;
    border-color: var(--agent-secondary) !important;
    outline: none;
}




/********************
* FOOTER
********************/

img.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: -1;
    width: 100vw;
    display: none;
}

#async-footer {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 50px;
    font-size: .75rem;
    color: var(--agent-dark);
    background: white;
    border-top: 1px solid var(--agent-light);
    z-index: 99;
}

#async-footer a {
    margin-left: 8px;
    margin-top: -3px;
}

#async-footer img {
    height: 1.25rem;
}




/********************
* iOS Save Prompt
********************/
.ios-pwa-prompt {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: inherit;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 99999999;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  width: 90%;
  max-width: 340px;
}

.ios-pwa-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.close-ios-prompt {
  position: absolute;
  top: -10px;
  right: -10px;
  border: none;
  padding: 0;
  line-height: 0;
  height: 28px;
  width: 30px;
  border-radius: 3px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  background: var(--agent-primary);
}




/********************
* MEDIA QUERIES
********************/

@media screen and (max-width: 480px) {
    
    #async .async_Header {
        gap: 10px;
    }
    
}

@media screen and (max-width: 200px) {
    
    #async.flex {
        justify-content: flex-start;
    }

    #async .button.neutral i:not(.fa-address-card), #async .button.primary i:not(.fa-address-card) {
        display: none;
    }

    #async center {
        margin: 0 auto;
        overflow: hidden;
    }
    
}

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

    #async .agent-headshot {
        width: 120px;
    }
    
    #async ul.async-nav-box {
        flex-direction: column;
    }

    #async ul.async-nav-box li a, #async ul.async-nav-box li button {
        height: 44px;
    }
    
    .site-content .ast-container {
        padding: 0;
    }

    #content #async .button {
        display: flex;
        align-content: center;
        align-items: center;
        font-size: 16px;
        line-height: 1.2;
        padding: 10px;
        white-space: normal;
        gap: 5px;
        justify-content: center;
        flex-wrap: wrap;
        height: auto;
        text-align: center;
    }

    #async ul.async-btn-group li {
        flex: 100%;
    }

    #content #async ul.async-feature-list {
        flex-direction: column;
        gap: 10px;
    }

    #content #async ul.async-feature-list li {
        text-align: center;
    }

    #async .profileLinks ul li {
        flex-basis: 50%;
    }
    
}

@media (min-width: 361px) and (max-width: 480px) {
    
    #async .agent-headshot {
        width: 140px;
    }
    
    #content .modal .col-6:nth-child(odd), #content .modal .col-6:nth-child(even) {
        padding: 0;
    }
    
}

@media screen and (max-width: 620px) {
    
    .share-dialog .targets {
        display: flex;
        flex-direction: column;
    }

    .share-dialog a.button, .share-dialog button {
        justify-content: center;
    }

    body.page-template-agentsync-me .modal-content #async {
        padding: 20px 20px 40px;
    }
    
}

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

    #async .async_Header {
        text-align: center;
    }
    
    .isMobile {
        display: inherit;
    }

    .notMobile {
        display: none;
    }

    li.notMobile {
        display: none;
    }

    #content #async ul.async-btn-group li a,
    #content .modal-content #async ul.profileLinks li a {
        font-size: 18px;
        display: inline-flex;
    }

    #content .modal-content #async ul.profileLinks li a,
    #content .modal-content #async ul.profileLinks li button {
        gap: 5px;
    }
    
    #async ul.async-btn-group li  a,
    .modal-content #async ul.profileLinks li .button i {
        font-size: 20px;
        margin: 0;
    }
    
    #content .modal-content #async ul.profileLinks ul li a i {
        font-size: 28px;
    }
    
}

@media (min-width: 768px) {

    #async .async_Header {
        flex-direction: row;
    }

    #async p.agent-dre {
        margin-bottom: 0;
    }

    #async ul.async-btn-group li.auto {
        flex: none;
        align-items: center;
        justify-content: center;
        align-content: center;
        align-self: center;
    }
    
    #async ul.async-btn-group li.auto button.button.neutral.share-button {
        padding: 20px;
    }
    
}

@media (min-height: 700px) and (min-width: 768px) {
    
    #content.site-content {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #async.flex {
        display: flex;
        overflow: auto;
        background: white;
        border: 1px solid silver;
        box-shadow: 0 30px 20px -20px rgba(0,0,0,.25);
        border-radius: 1rem;
        height: auto;
        justify-content: flex-start;
        padding: 40px;
        margin-bottom: 80px;
    }

    #async h2.agent-title div {
        display: inline;
    }

    img.footer {
        display: block;
    }
    
}

@media (max-width: 280px) and (max-height: 653px) {
    
    .async_Header {
        justify-content: center;
    }
    
}




/*** EOF ***/