/*
Theme Name: E Rieu US Tax Consulting
Author: Port 80 Services
Author URI: https://port80.services/
Description: Customisations of Modules theme for E Rieu US Tax Consulting
Template: modules
Version: 1.0.0
Text Domain: p80_modules 
*/

/*temp hiding of footer widget till he gets some blog content */

#colophon .inner-footer >div:last-child {
display: none}

@media (min-width:960px) {
#colophon .inner-footer >div {
width:30%}	
}

/*typography, global elements*/
#content #main .qbtn, #content #main .read-more, #content .wpcf7-submit, #content .modheader-btn {
box-shadow: none;
letter-spacing: 1px;
border-radius:0;
background: #963c3c;
color: #fff;
padding: 12px 26px;	
font-size: 14px}

#site-navigation li a, #msite-navigation li a, #content .our-services h1, #colophon .widget-title  {
font-family: "Work Sans"} 

#site-navigation li a {
font-size:14px}

.type-page a:not(.qbtn) {
text-decoration: underline}

.type-page a:hover {
text-decoration: none}

b, strong {
color: #00263D}
  
/*Header*/
.header-layout20 #masthead {
padding: 0;
box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.10);	
height:auto}

.header-layout20 #masthead .header-1st-row  {
text-align:left;	
padding: 0 10px;	
background: #00263d!important}

.header-layout20 #masthead .header-2nd-row  {
padding: 10px}

.header-layout20 #masthead .header-1st-row .inner-header, .header-layout20 #masthead .header-2nd-row .header-left  {
height: auto;	
width:100%;	
display: flex;
justify-content:space-between;
align-items: center}

.header-layout20 #masthead .header-2nd-row .inner-header, .header-layout20 #masthead .header-2nd-row .header-left {
height: 100%}

.header-layout20 #masthead .header-1st-row .inner-header > div{
position: static}

.header-layout20 #masthead .header-1st-row .widget_text a{
color: #fff;
font-size: 14px;
font-weight: 400}

.header-layout20 #masthead .site-branding {
position: static;
text-align:left;	
width:90%}	

.header-layout20 #masthead .site-branding img{
margin: 0}

.header-layout20 #masthead .menu-toggle {
position: relative;
top: initial;
right: initial}

.header-layout20 #masthead .widget_icl_lang_sel_widget {
height: 40px;
display: flex;
align-items: center}

.header-layout20 #masthead .widget_icl_lang_sel_widget >div{
padding: 0;
margin-top: -5px}

.header-layout20 #masthead .widget_icl_lang_sel_widget a {
text-transform: uppercase;
font-size: 14px}

.header-layout20 #masthead .wpml-ls-current-language a {
pointer-events:none}

.header-layout20 #masthead .widget_icl_lang_sel_widget:has(li:nth-child(2)) li:first-child::after{
content:"";	
display:inline-block;
border-right: 1px solid #fff;
height: 10px;
position: relative;
top: 1px;
left: -3px}

.header-layout20 #masthead .widget_icl_lang_sel_widget li img {
border-radius:2px}

.header-layout20 #masthead .widget_icl_lang_sel_widget li:last-child a {
padding-right: 0}

@media only screen and (max-width: 400px) {
.header-layout20 #masthead .header-1st-row .widget_text a {
display: none}	
}

@media only screen and (min-width: 600px) {
.header-layout20 #masthead .header-1st-row {
padding: 0 40px}	

.header-layout20 #masthead .header-2nd-row  {
padding: 10px 40px}	
}
@media only screen and (min-width: 960px) {
.header-layout20 #masthead .site-branding {
width:25%}
}

/*nav*/
#site-navigation li.current-menu-item a::after, #site-navigation li:hover a::after {
opacity: 1;
border-radius:100%;	
background: #963C3C;
top: 16px;
left: -12px;
width: 8px;
height: 8px;
border: 0}

#site-navigation li.current-menu-item a, #site-navigation li:hover a{
color: #963C3C}

#site-navigation ul.menu li:last-child {
margin-right: 0}

#site-navigation ul.menu li:last-child a{
padding-right: 0}

#msite-navigation {
background: #00263d}

#msite-navigation ul.menu li  {
transition:.3s;	
padding-left:15px}

#msite-navigation ul.menu li a {
color: #fff;
font-size: 14px}

#msite-navigation ul.menu li.current-menu-item, #msite-navigation ul.menu li:hover {
background: #963C3C}

#msite-navigation .mm-panels > .mm-panel {
padding:20px}

/*footer*/
#colophon .inner-footer {
padding-top:60px}

#colophon .footer-logo {
display: block;
filter: saturate(0) brightness(10);
width: 220px;	
margin: -15px 0 15px;}

#colophon .widget-title {
font-size: 19px;
font-weight: normal;
margin-bottom: 24px}

#colophon .widget-title::after {
display: block;
content: "";	
margin: 8px 0 30px 0;
border-bottom: 2px solid #963C3C}

#colophon .widg-layout1 p:not(.meta), #colophon .widg-layout1 li {
font-size: 15px}

#colophon .widg-layout1 i, #colophon .menu li::before, #secondary i {
color: #963C3C;
margin-right: 4px}

#colophon .menu li::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f054";
display: inline-block} 
 
#colophon li.quadro-rpost  {
margin-bottom:25px}

#colophon li.quadro-rpost img {
width:40px}

#colophon .site-info p {
text-align:left;	
margin: 0}

a#p80{
text-decoration: none!important;
font-size: 12px;
background: url(https://port80.services/img/port80-logo-sml.png) no-repeat 0 1px;
padding-left: 17px;
background-size: 17px 17px;
font-family: sans-serif;
letter-spacing: .2px;
line-height: 18px;
display: inline-block;
color: #fff!important}

a#p80 span{
font-size: inherit;
display: inline;
color: #0785c4}

/*modules - global*/
#content p.modheader-intro {
margin-top: 15px;	
font-size: 110%;
opacity:1}

#content h1.mod-title {
color: #00263D}

@media (max-width: 767px) {
#content h1.mod-title,#content .our-services.type-canvas p.modheader-intro {
font-size: 32px!important;
line-height: normal}
}
	
@media only screen and (max-width: 1199px) {
#content section.quadro-mod  {
background-attachment: scroll!important}
}

/*banners - slogan*/
#content .type-image .dark-overlay{
z-index:3}

#content .type-image .inner-mod{
max-width: 100%}

#content .type-slogan .mod-content, #content .type-image .mod-content img{
height: auto;
display:block;	
object-fit:cover;
min-height: 350px;
width: 100%;
aspect-ratio: 16/4.5}	

.home #content .type-slogan .mod-content {
aspect-ratio: 16/8}	

#content .type-slogan .slogan-wrapper * {
color: #fff;
text-align: left;
line-height: 130%;
font-size: 16px;
font-weight: 400}

#content .type-slogan .slogan-wrapper a.qbtn{
margin-top:20px}

#content .type-slogan .slogan-wrapper h1 {
font-size: 30px}

@media (max-width: 959px) {
#content .type-slogan .mod-content{
padding: 20px}

#content .type-slogan .slogan-wrapper{ 	
top: initial;
bottom: 0;	
transform: none}	
}

@media (min-width: 960px) {
.home #content .type-slogan .slogan-wrapper{ 
width: 550px;
max-width: 100%;
left: 0;
margin: 0;
padding: 40px;	
background: rgba(150,60,60,.9)}	

#content .type-slogan .slogan-wrapper * {	
line-height: 165%;
font-size: 18px;
font-weight:300}
	
#content .type-slogan .slogan-wrapper a.qbtn{
background: none;
color: #fff;
border: 1px solid #fff}
	
#content .type-slogan .slogan-wrapper .dark-overlay {
display: none}

#content .type-slogan .slogan-wrapper h1 {
font-size: 40px}
}
/*service blocks*/
#content .our-services * {
text-align: left}

#content .our-services h1 {
color: #963C3C;
font-size: 20px;
line-height: normal;	
text-transform: uppercase;
max-width:100%;	
letter-spacing: 4px}

#content .our-services h1::after {
display: inline-block;
content: "";	
margin: 0 0 0 10px;
width:100px;
border-bottom: 2px solid #963C3C}

#content .our-services p.modheader-intro {
font-family: "DM Serif Display";		
max-width:100%;	
margin-top: 0;	
font-size: 25px}

#content .our-services.hasbg p.modheader-intro {
color: #fff}

#content .our-services .service-content p {
color: #fff}

#content .our-services h2.service-title::after {
display: block;
content: "";	
margin: 15px 0 25px;
width:70%;
border-bottom: 2px solid #963C3C}

#content .our-services ul.quadro-services{
margin: 0;
display: flex;
justify-content:space-between;
flex-wrap:wrap}

#content .our-services ul.quadro-services::before, #content .our-services ul.quadro-services::after {
display: none}

#content .our-services li.quadro-service {
width: 48%;
padding: 10px;	
margin: 0;
border: 1px solid}

#content h2.service-title a {
text-decoration: none}

@media (min-width:600px){
#content .our-services h1 {
display: flex;
align-items: center}

#content .our-services p.modheader-intro {
font-size: 48px}	
}
@media (min-width:1024px){
#content .our-services li.quadro-service {
padding: 40px}

#content .our-services li .service-icon{
width: 160px;
position: absolute;
top: 10px;
right: 15px}
}

/*insights*/
#content .er-insight  {
width:1280px;
margin:auto;
max-width:100%}

.home #content .er-insight  {
width:1600px}

body:not(.home) #content .er-insight  {
padding:20px}

#content .er-insight .inner-mod {
max-width: 100%}

#content .er-insight li.insight{
width: 100%;
aspect-ratio: 16/6;
display: flex;
flex-wrap:wrap;	
align-items: center}

#content .er-insight li.insight p{
font-size: 100%}

body:not(.home) #content .er-insight .insight-text{
text-align:left}

#content .er-insight li.insight h2 {
font-size:25px;	
color: #00263D}

@media (min-width:760px) {
#content .er-insight li.insight img {
height: 100%;	
object-fit: cover}
}
/*Lists*/
#content .type-list .listitem-icon {
background: #963c3c;
text-align: center}

#content .type-list .quadro-list {
columns: 2 400px}

#content .type-list .quadro-list::before {
display: none}

#content .quadro-listitem {
break-inside: avoid}

#content .quadro-listitem::before {
content: "";
height: 300%;
border-left: 1px solid #963c3c;
display: block;
position: absolute;
top: -11px;
  left: 15px;}

#content .type-list h4, #content .type-list p{
color: #fff;
font-weight: 300;	
break-inside: avoid;	
font-size: 19px;	
line-height: 145%;	
text-transform: none}

#content .type-list p a{
color: inherit}

/*cta module-bottom of pages*/
#content .type-cta .mod-content {
display: flex;
align-items: center;
width: 100%;
aspect-ratio: 16/4.5}

#content .type-cta .mod-content *{
color: #fff}

/*blog*/
#content .type-blog #grid {
height: auto!important;
justify-content: center;
flex-wrap: wrap;	
display: flex}

#content .type-blog #grid article{
background: #f5f5f5;
padding: 15px;
position: static!important}

#content .type-blog #grid .posted-on{
background: #fff}

#content .type-blog .entry-summary{
font-size: 16px}

#content .type-blog .entry-thumbnail img {
display: block;
width: 100%;
object-fit: cover;	
aspect-ratio: 16/11}

#content .type-blog #grid article .cat-links a{
display: inline-block;
color: #963c3c!important;
font-weight: 400;
text-decoration: underline;
font-size: 14px}

#content .type-blog #grid article .cat-links a:hover {
text-decoration: none}

#content .type-blog .post_format-post-format-video .entry-title::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f03d";
display: inline-block}

#content .type-blog .post_format-post-format-video .entry-thumbnail::after {
color:#fff;
transition: .3s;	
background: #963c3c}	

#content .type-blog .post_format-post-format-video .entry-thumbnail:hover:after {
opacity:1}	

@media (min-width: 760px){
#content .type-blog #grid article{
padding: 30px}

}
/*single post*/
.single-post #content .entry-header {
width: 100%;
aspect-ratio: 16/4.5;
background-attachment: scroll;	
display: flex;
align-items: center}

.single-post #content .byline {
display: none}

/*contact */
#content .type-wrapper .mod-content {
max-width: 1300px;
padding-top: 0;	
margin: auto}

#content .type-wrapper #secondary {
padding: 55px 0 0 1%;
box-sizing: border-box}

@media (max-width: 760px){
#content .type-wrapper #secondary{
display: none}
}
#content .type-wrapper #secondary li{
font-size: 16px;
font-weight: 400}

#content .type-wrapper #secondary li a{
color: #963c3c}

#content .wpcf7 {
max-width:100%}

#content .wpcf7 label {
font-family: "Work Sans";
text-transform: uppercase;
font-size: 14px;
color: #00263d;	 
font-weight: 400}

#content .wpcf7 input:not(.wpcf7-submit), #content .wpcf7 textarea {
transition: .4s;
background: #f7f7f7;
border-radius:2px;
transition: .3s;	
border: 1px solid #ccc}

#content .wpcf7 input:not(.wpcf7-submit):focus, #content .wpcf7 textarea:focus{
background: #fff;
border-color: #00263d}

/*Canvas module / non-modular (legal) pages*/
#content .our-services.type-canvas p.modheader-intro {
color: #00263D;
font-size: 40px}

#content .our-services.type-canvas ul li, .page-template-template-centered .page-content ul li{
margin: 0 0 15px 15px}

.page-template-template-centered .page-header{
background: none}

.page-template-template-centered .page-header h1, .page-template-template-centered h2{
color: #00263D}

.page-template-template-centered .page-breadcrumbs{
display: none}