/***************************************************************************

COLORS:

blue - dark	        #00417D			header
blue - medium 	    #005FB6		    links
blue - medium       #007EDC         button hover
blue - light        #0094FF         button
green - dark        #179343         button hover, list price
green - light       #1AB854         button
black               #323232         font color
gray                #CCCCCC         border
gray                #CACACA         select border
gray                #F8F8F8         callout secondary


BREAKPOINTS:

small: 0
medium: 640px
large: 1024px
xlarge: 1200px
xxlarge: 1440px


***************************************************************************/





/***************************************************************************
	html reset
***************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, 
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    background: transparent;
    }

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
    }

body {
	line-height: 1;
    }

ol, ul {
	list-style: none;
    }

blockquote, q {
	quotes: none;
    }

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
    }

table {
	border-collapse: collapse;
	border-spacing: 0;
    }

img {
  border-style: none;
    }


*:focus {                     /* anchor, input, textarea, select, button */
    outline: none;            
}




/***************************************************************************
	html global
***************************************************************************/

html {
    -ms-text-size-adjust: 100%;          
    -webkit-text-size-adjust: none;        /* Prevent font boosting after orientation changes */
    }

html {                                    /* force vertical srollbar to always be on */
    overflow-y: scroll;                   /* stop horizontal content shift on page load */
}

body {
	font-size: 1.1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #323232;
    background-color: #FFFFFF;
	font-weight: normal;
	line-height: 1.8;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

a:link, a:hover, a:visited {
	color: #005FB6;
	text-decoration: none;
	}

a:hover {
    color: #0094FF;
	text-decoration: none;
	}

img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
	}

small { font-size: 80%; }

b { font-weight: bold; }

u { text-decoration: underline; }

i { font-style: italic; }

hr {
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #CCCCCC;
    margin: 0;
    padding: 0;
	}

h1 {
	font-size: 1.9rem;
	}

h2 {
	font-size: 1.7rem;
	}

h3 {
	font-size: 1.5rem;
	}

h4 {
	font-size: 1.3rem;
	}

h5 {
	font-size: 1.1rem;
	}




/***************************************************************************
	global styles
***************************************************************************/

h2.secondary {
	color: #179343;
    }

.callout {
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	padding: 1em;
	}

.callout.secondary {
	background-color: #F8F8F8;
	}

.menu li {
	line-height: 1.2;
	display: block;
	padding: 0.7em 0 .07em 0;
	}

.spacer {
	padding-bottom: 1em;
	}

.hide {
   display: none;
}

.show-for-print {
    display: none;
}




/***************************************************************************
	form input rows
***************************************************************************/

.form-input {
	display: flex;
	}

.form-input > input {
	flex: 1;
	}

.form-textarea {
	display: flex;
	flex-direction: column;
	}	

.form-textarea > textarea {
	padding-top: 0.5em;
	resize: vertical;
	height: 150px;
	}




/***************************************************************************
	form input and textarea
***************************************************************************/

input[type=text], textarea[name=notes]   {              /* remove iOS input shadow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=text], textarea {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0 0.5em;
	height: 2.5em;
	font-size: 1em;
	border-radius: 0;
	outline: none;
	color: #323232;
	border: 1px solid #CACACA;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

input[type=text]:focus, textarea:focus {
	border: 1px solid rgba(72,72,72,0.60);
	}

input::-webkit-contacts-auto-fill-button {        /*  hide safari person icon on form input */
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}




/***************************************************************************
	form placeholder text
***************************************************************************/

*::-webkit-input-placeholder { color: #B4B4B4; font-size: 80%; padding-top: 2px; }
*:-moz-placeholder { color: #B4B4B4; font-size: 80%; padding-top: 2px;} 
*::-moz-placeholder { color: #B4B4B4; font-size: 80%; padding-top: 2px; }
*:-ms-input-placeholder { color: #B4B4B4; font-size: 80%; padding-top: 2px; }




/***************************************************************************
	search input jQuery ui autocomplete
***************************************************************************/

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover {
    background: #DDDDDD;
    }




/***************************************************************************
	contact form error
***************************************************************************/

.message {    
    color: #F00000;
    display: none;
    height: 1em;
    margin-top: -1.3em;
    margin-bottom: 2em;
    font-size: 90%;
}

#spinner {
  display: none;
  text-align: center;
  margin-top: -1em;
  margin-bottom: 3em;
  overflow: auto;
}




/***************************************************************************
	form select
***************************************************************************/

.select-label {
	display:block;
	text-align:center;
	font-size:90%;
	}

select {
	width: 100%;
	height: 2.5em;
    padding: 0.5em;
	font-size: 1em;
	margin-bottom: 1em;
	border: 1px solid #CACACA;
    border-radius: 0;
    background-color: #FFFFFF;
	color: #323232;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
    background-size: 9px 6px;
    background-position: right center;
    background-origin: content-box;
    background-repeat: no-repeat;
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	}




/***************************************************************************
	button
***************************************************************************/

.button {
	background-color: #0094FF;
	color: white;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	display: block;
	cursor: pointer;
	line-height: 1;
	margin: 0;
	font-size: 1em;
	padding: 1em;
	border: 0px;
	border-radius: 0;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	}

.button:hover {
	background-color: #007EDC;
	}

.button:link, .button:active, .button:hover, .button:visited {
	color: white;
	}

.button:focus, .button:active, .button.active, .button:focus:active {
	background-image: none;
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	}

.button-group > a {
	border-right: solid white 1px;
	}

.button-group.expanded {					
	display: flex;
	align-items: flex-start;
	}

.button-group.expanded > a {
	flex-basis: 100%;
	}

.button.secondary {
	background-color: #1AB854;
    }

.button.secondary:hover {
	background-color: #179343;
	}


.button.alert {
	background-color: #D40000;
    }

.button.alert:hover {
	background-color: #9A0000;
	}




/***************************************************************************
	searchbox error close buttons
***************************************************************************/

.hollow {
	background-color: transparent;
	cursor: pointer;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
	padding: 1em 1em 0.5em 1em;
	margin: 1em 0.5em;
    }




/***************************************************************************
	html table
***************************************************************************/

table {
	border: 1px solid rgba(10, 10, 10, 0.05);
	}

tr:nth-child(even) {
	background: rgba(10, 10, 10, 0.05);
	}	

tr {
	height: 2.7em;
	}

tr:hover{
   /* background: #EDEDED;*/
    }

td {
	vertical-align: middle;
	padding-left: 0.5em;
	}




/***************************************************************************
	icons
***************************************************************************/

#icon-hamburger {
	width: 32px;
	height: 32px;
	}
	
#icon-home {
	width: 32px;
	height: 32px;
	}

#icon-home, #icon-hamburger {
	fill: white;	
	}

a svg:hover #icon-home, a svg:hover #icon-hamburger path { 
	fill: yellow;
	}

.icon-camera {
	width: 20px;
	height: 20px;
	position: relative;
	top: 2px;
	left: 0px;
	fill: #00417D;
	}

.icon-camera-virtual-tour {
	width: 20px;
	height: 20px;
	position: relative;
	top: 4px;
	left: 0px;
	fill: #00417D;
	}

a svg:hover .icon-camera-virtual-tour {
	fill: rgba(0,145,255,1.00);
	} 

a svg:hover .icon-camera {
	fill: rgba(0,145,255,1.00);
	}

.icon-arrow-up, .icon-arrow-down {
	width: 17px;
	height: 17px;
	position: relative;
	top: 2px;
	left: 0px;
	fill:white;
	}

.icon-arrow-right, .icon-arrow-left {
	width: 17px;
	height: 17px;
	position: relative;
	top: 3px;
	left: 0px;
	fill: white;
	}

.icon-arrow-right-photoshow, .icon-arrow-left-photoshow {
	width: 28px;
	height: 28px;
	position: relative;
	top: 3px;
	left: 0px;
	fill: #000000;
	}

.icon-printer, .icon-mail {
	width: 20px;
	height: 20px;
	position: relative;
	top: 4px;
	left: 0px;
	}

.icon-printer > path, .icon-mail > path {
	fill: white;
	}

.icon-star {
    width: 21px;
    height: 21px;
    position: relative;
    top: 0px;
    left: 0px;
    fill: #1AB854;
    }

#icon-torsos {
	width: 24px;
	height: 24px;
	position: relative;
	top: 4px;
	right: 3px;
	fill: #005FB6;
	}


/***************************************************************************
	pagination
***************************************************************************/

.pagination {
	margin-left: 0;
	margin-bottom: 1rem; 
	}

.pagination::before, .pagination::after {
	content: ' ';
	display: table; 
	}

.pagination::after {
	clear: both;
	}

.pagination li {
	font-size: 0.875rem;
	margin-right: 0.0625rem;
	border-radius: 0;
	display: none;
	}

.pagination li:last-child, .pagination li:first-child {
	display: inline-block;
	}

.pagination a, .pagination button {
	color: #0a0a0a;
	display: block;
	padding: 0.1875rem 0.625rem;
	border-radius: 0; 
	}

.pagination a:hover, .pagination button:hover {
	background: #e6e6e6; 
	}

.pagination .current {
	padding: 0.1875rem 0.625rem;
	background: #0054A0;
	color: #fefefe;
	cursor: default; 
}

.pagination .disabled {
	padding: 0.1875rem 0.625rem;
	color: #cacaca;
	cursor: not-allowed;
	}

.pagination .disabled:hover {
	background: transparent; 
	}

.pagination .ellipsis::after {
	content: '\2026';
	padding: 0.1875rem 0.625rem;
	color: #0a0a0a; 
}

.pagination-previous a::before, .pagination-previous.disabled::before {
	content: '\00ab';
	display: inline-block;
	margin-right: 0.5rem; 
}

.pagination-next a::after, .pagination-next.disabled::after {
	content: '\00bb';
	display: inline-block;
	margin-left: 0.5rem; 
}


@media only screen and (min-width: 640px) {
	.pagination li {
	    display: inline-block;
	}
}




/***************************************************************************
	snapshot table
***************************************************************************/

.snapTable {
	display: table;
	margin:auto;
	}

.snapRow{
	display:table-row;
	}

.snapCell1 {
	display: table-cell;
	text-align: right;
	width: auto;
	}

.snapCell2 {
	display: table-cell;
	text-align: left;
	width: auto;
	}




/***************************************************************************
	listing details
***************************************************************************/

.category-heading {
	font-size: 1.1em;
	background-color: #DBDBDB;
	margin-top: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 6px 4px;
}

.category-flex {
	display:flex;	
	}

.category-name {
	flex-basis: auto;
	min-width: 165px;
	}

.category-value {
	flex-basis: auto;
	word-break: break-all;
	}




/***************************************************************************
	tabs
***************************************************************************/

.tab {
	overflow: hidden;
	border-bottom: 1px solid #CCCCCC;
	}

.tab button {
    background-color: inherit;
    float: left;
    border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-radius: .6em .6em 0 0;
	border-bottom: hidden;
    outline: none;
    cursor: pointer;
    padding: 1.6em 2em;
    transition: 0.3s;
	font-size: 0.8em;
	margin:0;
	margin-right: -1px;
	}

.tab button:hover {
    background-color: #E9E9E9;
	}

.tab button.active {
    background-color: #E9E9E9;
	}

.tabcontent {
    display: none;
    padding: 1em;
    border: 1px solid #ccc;
    border-top: none;
	}

.tablinks.active > a {
	color:black;
	}




/***************************************************************************
	photoshow
***************************************************************************/

#photoshow-1-container {
	height: 240px;
	margin-bottom: 75px;
	}

@media only screen and (max-width: 640px){
    
#photoshow-1-container {
    margin-right: auto;
    margin-left: auto;
    max-width: 320px;
    }
    
}

#photoshow-1 {
	width: 320px;
	height: 240px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	}
	
#photoshow-1 img {
	vertical-align: middle;
	}

#photoshow-1 div.current {
	z-index: 2;
	}

#photoshow-1 div.previous {
	z-index: 1;
	}

#photoshow-1 div {
	z-index: 0;
	 display:none;
	}

#photoshow-1-nav {
	max-width: 320px;
	margin-top: 1.0em;
	}

#photoshow-2 {
	text-align: center;
	}

#photoshow-2 div.current {
	z-index: 2;
	}

#photoshow-2 div.previous {
	z-index: 1;
	}

#photoshow-2 div {
	z-index: 0;
	}

#photoshow-2-nav {
	margin-top: 1.0em;
	}

/* photoshow image click browser highlight removal */
/* removes blue overlay when fast clicking pics on desktop */
/* disable the quick blinking effect when an img link has been hit on ipad */
 
.clickimgfix {		
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

.clickimgfix {
	-webkit-tap-highlight-color: rgba(0,0,0,0);		
	}




/***************************************************************************
	site container
***************************************************************************/

.container {
	max-width: 639px;
	margin: auto;
	}


@supports (grid-area: auto) {
  
    @media only screen and (min-width: 1px) {	
     
        .container {
            display: grid;
            max-width: 1400px;
            margin: auto;
        }
    }
}




/***************************************************************************
    header
***************************************************************************/

.header {
	background-color: #00417D;
	color: white;
	z-index: 1;
	}

.topbar-small {
	padding: 0 8px 2px 10px;
	margin:0;
	}	

#hamburger-menu {
	display: none;
	}
	
.topbar-medium {
	display:none;
	}
	
.site-name {
	display: flex;
	align-items: center;
	}

.domain {
	color: white;
	font-weight: bold;
	}

.nav ul {
	background-color: #00417D;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	}

.nav ul li {
	list-style-type: none;
	}

.nav ul li a {
	padding: .3rem .7rem;
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	}

.nav ul li a:hover {
	/*background:rgba(239,238,13,0.85);*/
	color:#FAE900;
	}

.has-children ul li a {
	padding-left: 2rem;
	}

@supports (grid-area: auto) {
    
    @media only screen and (min-width: 662px) {	

    .nav ul {
        flex-direction: row;
        }

    .nav ul li {
        position: relative;
        flex: 1 0 auto;
        text-align: left;
        }

    .nav ul li a {
	    padding: .3rem .4rem;
        }   
        
    .nav ul li:hover ul {
        display: flex;
        flex-direction: column;
        }

    .has-children ul {
        display: none;
        width: 150%;
        position: absolute;
        }

    .has-children ul li a {
        padding-left: 1em;
        }

    .topbar-small {
        display: none;
        }

    .topbar-medium {
        display: flex;
        padding: 0 8px 2px 10px;
        margin:0;
        }

    }
}


@supports (grid-area: auto) {
    
    @media only screen and (min-width: 730px) {	

    .nav ul li a {
        padding: .3rem .8rem;
        }
  
    }
}


/***************************************************************************
	footer
***************************************************************************/

.agent-container {	
	padding: 1em;
    margin: 1em 1em 0em;
	}

.agent-image img {
    float: right;
	max-width: 60%;
	}

.footer {
	padding: 1.5em 1em;
	text-align: justify;
	line-height: 1.1em;
	}
	

@supports (grid-area: auto) {

    @media only screen and (min-width: 640px) {	

        .agent-container {
            display: flex;
        }

        .agent-info {
            flex: 1;
        }

        .agent-name {
            text-align: center;
            flex: 1;
        }

        .agent-image {
            flex: 1;
        }

        .agent-image img {
            max-width: 70%;
        }

    }	

    @media only screen and (min-width: 1024px) {

        .agent-image img {
                max-width: 50%;
        }

    }		

}



/***************************************************************************
	sidebar
***************************************************************************/

.sidebar { padding: 0em 1em; }      /* contact sidebar styled as page level - all othera here */


@supports (grid-area: auto) {
  
    
    @media only screen and (min-width: 1px) {
            
        .form-contact {
            padding-left: 2em;
            padding-right: 2em;
        }
        
        .form-agent { 
            padding: 2em;
        }
         
    }
    
    @media only screen and (min-width: 640px) {	
        
        .form-contact { 
            margin: 0;
            padding-left: 1em;
            padding-right: 1em;
        }
        
        .form-agent { 
            padding: 1em 3em;
        }
        
        .sidebar { padding: 0em 10em; }

    }

    @media only screen and (min-width: 800px) {	
        
        .sidebar { padding: 0em 14em; }

    }
    
    @media only screen and (min-width: 1024px) {	
 
        .form-contact {
            padding-left: 2em;
            padding-right: 2em;
        }
        
        .form-agent { 
            padding: 1em 1em;
        }
        
        .sidebar { padding: 0; }
    
    }
    
     @media only screen and (min-width: 1200px) {	

        .form-contact {
            padding-left: 2em;
            padding-right: 2em;
        }
            
        .form-agent { 
            padding: 1em 1.5em;
        }
        
    }
      
    
}




/***************************************************************************
	print page
***************************************************************************/

@media print {
 

.hide-for-print {
    display: none !important;
    }

.show-for-print {
    display: block !important;
    }

body {
    font-family: Georgia, "Times New Roman", Times, serif;
    background: none;
    color: black;
    background-color: white;  
    line-height: 1.5;
    }


/* listing page styles */
    
.container {
    max-width: 100%;
    margin: 0; padding: 0;
    background: none;
    }
    
.tabcontent {
    width: 100%;
    margin: 0; padding: 0;
    background: none;
    }
    
h2.secondary {
    color: black;
    }

.category-heading {
    padding:0;
    background-color: white; 
    }       
    
.tab {
    display:none;
	}

.tab button {
    display:none;
	}

.tabcontent {
    border: none;
	}


}



/***************************************************************************
    back to top button
***************************************************************************/

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    border-radius: 5px;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    }


@media (hover: hover) {
    #back2Top:hover{
        background-color: #0094FF;
        color: white;
    }
}



/***************************************************************************
    map marker
***************************************************************************/

.markerWindowListing {
    font-weight:bold;
    line-height:1.5em;
    padding:0.5em;
}

.markerWindowCondo {
    font-weight:bold;
    line-height:1.5em;
    padding:0.2em;
}



/***************************************************************************
    modal
***************************************************************************/

.modal {
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 3px;
    max-width: 530px;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}




/***************************************************************************
    checkbox
***************************************************************************/

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 28px;
    margin-bottom: 0.5em;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

.checkbox-container input {                 /* hide default checkbox */
    position: absolute;
    opacity: 0;
    cursor: pointer;
    }

.checkmark {                                /* create custom checkbox */
    position: absolute;
    top: 5px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    }

.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
    }

.checkmark:after {                           /* create the checkmark/indicator  */
    content: "";
    position: absolute;
    display: none;
    }

.checkbox-container input:checked ~ .checkmark:after {        /* show checkmark */
    display: block;
    }

.checkbox-container .checkmark:after {       /* style checkmark/indicator */
    left: 6px;
    top: 0px;
    width: 3px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }




/***************************************************************************
   open house 
***************************************************************************/


.open-house-blurb {
    color: #E60000;
    font-weight: 700;
    font-size: .98em;
    display: inline;
    margin-right: 6px;
    white-space: nowrap;
}



/***************************************************************************
    CONNECT ROW (Social + Print / Email)
***************************************************************************/

.connect {
    padding: 10px 0;
}

/* Main row */
.connect-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;              /* allows clean wrapping on phones */
}

/* Print / Email buttons */
.connect-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/***************************************************************************
    SOCIAL SHARE
***************************************************************************/

.social-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;            /* pushes icons to the right on desktop */
    flex-wrap: wrap;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

/* SVG sizing */
.social-btn svg {
    width: 100%;
    height: 100%;
}

/* Background colors */
.social-facebook  svg rect { fill: #1877F2; } /* Facebook */
.social-twitter   svg rect { fill: #000000; } /* X */
.social-linkedin  svg rect { fill: #0A66C2; } /* LinkedIn */
.social-pinterest svg rect { fill: #E60023; } /* Pinterest */
.social-threads   svg rect { fill: #000000; } /* Threads */

/* Hover */
.social-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}



/***************************************************************************
    MOBILE FIXES (iPhone portrait)
***************************************************************************/

@media (max-width: 480px) {

    /* Stack everything vertically */
    .connect-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .connect-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .social-share {
        width: 100%;
		margin-top: 1.2rem;	  		/* space between Print/Email and Icons */
        margin-left: 0;
        justify-content: flex-start;   /* change to flex-end if you prefer */
        gap: 0.5rem;                   /* better finger spacing */
    }

    .social-btn {
        width: 38px;
        height: 38px;
    }
}