/*
 Theme Name:   Roofer Near Me
 Description:  Custom theme
 Author:       Carnoustie Creative
 Author URI:   https://www.carnoustiecreative.co.uk
 Template:     baseline
 Version:      1.0.8
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  baseline-child

font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: normal;

font-family: proxima-nova, sans-serif;
font-weight: 500;
font-style: normal;

font-family: itc-avant-garde-gothic-pro, sans-serif;
font-weight: 500;
font-style: normal;

*/

:root {
    --rnm-slate-grey: #595959;
    --rnm-saffron: #F2BB33;
    --rnm-martinique: #1D2446;
    --rnm-dodger-blue: #008AFF;
    --rnm-sail: #A2D6F9;
    --rnm-alice-blue: #E6F0F7;
}

.baseline {
    --baseline-aos-distance: 30px;
    --baseline-aos-distance-negative: -30px;
}

body.baseline {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
    font-family: proxima-nova, sans-serif;
    font-size: clamp(1.6rem, 2vw, 1.8rem);
    font-weight: 400;
    font-style: normal;
}

.baseline h1,
.baseline h2,
.baseline h3 {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--rnm-martinique)
}

.baseline h1 {
    font-size: clamp(3.5rem, 4vw, 5rem);
}

.baseline h2 {
    font-size: clamp(2.3rem, 4vw, 2.9rem);
}


.baseline header .custom-logo {
    width: 19vw !important;
    min-width: 13rem;
}

@media ( max-width: 1100px ) {

    .baseline header .custom-logo {
        width: 60% !important;        
        max-width: 35rem;
    }

}

.header-wrap .container,
footer .container {
    max-width: 96%;
    width: 96%;
}

.roof-pattern {
    background-color: var(--rnm-slate-grey);
}

.baseline footer {
    margin-top: 5rem;
}

.baseline footer,
.roof-pattern {
    background-image: url('roof-pattern.svg');
    background-repeat: repeat;
}

.widget-area.footer-bottom,
.widget-area.footer-bottom p {
    margin-bottom: 0;
}

.widget-area.footer-bottom {
    margin-top: 3rem;
}

.baseline header .menu li a {
    border-top: 0.2rem solid transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.2rem solid transparent;
}

header .widget .menu li.menu-circle a,
footer .menu li a .fa-solid,
footer .menu li a .fa-brands,
.mobile-nav.side li a .fa-solid,
.mobile-nav.side li a .fa-brands {
    background-color: var(--rnm-saffron);
    width: 3rem;
    height: 3rem;
    color: #000;
    font-size: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header .widget .menu li.menu-circle a:hover,
footer .menu li a:hover .fa-solid,
footer .menu li a:hover .fa-brands,
.mobile-nav.side li a:hover .fa-solid,
.mobile-nav.side li a:hover .fa-brands {
    background-color: var(--rnm-sail);
}

.mobile-nav.side #menu-choices-side .menu li a {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

footer .menu li a .fa-solid,
footer .menu li a .fa-brands,
.mobile-nav.side li a .fa-solid,
.mobile-nav.side li a .fa-brands {
    margin-right: 1rem;
}

header .widget .menu li.menu-circle a:hover {
    text-decoration: none;
}

.footer-50-right .menu li a {
    display: flex;
    flex-direction: row;    
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
}

@media ( max-width: 900px ) {

    .footer-50-right .menu li a {
        justify-content: center;     
    }

}

.baseline header .right .menu li.current-menu-item > a {
    border-bottom-color: var(--rnm-saffron);
    font-weight: 500;
}

.baseline header .right .menu li.current-menu-item a:hover {
    text-decoration: none;
}

.baseline header .right .sub-menu {
    padding-top: 1.5rem;
}

.menu-divider a {
    position: relative;
    color: transparent !important;    
    pointer-events: none;
}

@media ( max-width: 1100px ) {

    #menu-choices-side.expandable li.menu-divider {
        display: none;
    }

}

.menu-divider a:before {
    margin-top: 1.5rem;
    content: "";
    width: 0.1rem;
    height: 4rem;
    background-color: var(--rnm-saffron);
    display: block;
}

.col-alice-blue.has-bgcolor h2,
.col-alice-blue.has-bgcolor h3 {
    color: var(--rnm-dodger-blue);
}

.after-content-full {
    margin-top: -5.5rem;
}

.baseline .main .content {
    background: transparent; 
    position: relative;
    z-index: -1;
}

.baseline  header .first {
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header .first .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.baseline .button, 
.baseline .woocommerce #respond input#submit, 
.baseline .woocommerce a.button, 
.baseline .woocommerce button.button, 
.baseline .woocommerce input.button, 
.baseline button, 
.baseline input[type=button], 
.baseline input[type=reset], 
.baseline input[type=submit] {
    padding: 1.2rem 2.2rem;
    font-size: 1.7rem;
    font-weight: 500;
}

.baseline header li.button,
.baseline .menu-bar li.button {
    padding: unset;        
}

.baseline .menu-bar li.button a,
.baseline header li.button a {    
    font-size: 1.7rem;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.baseline .menu-bar li.button a {
    font-size: 1.5rem;
}

.baseline .button {
    font-weight: 500;        
}


@media ( min-width: 900px ) {

    footer .six.columns:nth-child(1) {
        width: 70%;
    }
    
    footer .six.columns:nth-child(2) {
        width: 25%;
        position: relative;
    }

    footer .six.columns:nth-child(2):before {
        position: absolute;
        display: block;
        content: "";
        height: 100%;
        width: 0.1rem;
        background-color: rgba(255, 255, 255, 0.3);
        left: -25%;
    }
    
}

.baseline footer {
    padding-top: 4rem;
}

#header-hero {
    height: 50vh;
    min-height: 32rem;    
    max-height: 45rem;
}

#header-hero .wrapper {
    background-size: 30vw;
    background-position: 75% 0;
    background-repeat: no-repeat;
}

@media ( max-width: 1100px ) {

	#header-hero {
		height: 30vh;
	}
	
    #header-hero .wrapper {
        background-position: 70% center;
        background-size: 70vw;
        background-position: right top;
    }

    .baseline h1 {
        font-size: clamp(2.8rem, 3vw, 4rem);
    }

}

#header-hero.cde-wide-text.has-bgcolor {
    padding: 0;
}

#header-hero .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;    
}

#header-hero .inner {
    width: 50%;
    margin-left: 5%;
}

h1 em {
    display: inline-block;    
    color: var(--rnm-saffron);
    font-style: normal;
    margin-left: 3rem;
    position: relative;
    top: -0.8rem;
}

.logotitle .eight.columns.right {
    margin-left: 0;
    width: 70%;
}

.cde-two-cols.slate-right.has-bgcolor {
    padding: 0;
}

.cde-two-cols.slate-right.has-bgcolor .container {
    width: 100%;
    max-width: 100%;
}

.slate-right .right-col {
    background-color: var(--rnm-slate-grey);
    background-image: url('roof-pattern.svg');
    background-repeat: repeat;
    padding: 0;
}

.cde-two-cols.slate-right .inner {
    grid-template-columns: 1fr 30%;    
}

@media ( max-width: 900px ) {

    .cde-two-cols.slate-right .inner {
        grid-template-columns: 1fr;    
    }

}

.cde-two-cols.slate-right.has-bgcolor .left-col {
    margin-left: 4%;
    padding: 4rem;
}

.cde-two-cols.slate-right.has-bgcolor .right-col {
    padding: 4rem 6rem 6rem 6rem;    
    margin-top: -4rem;
}

.slate-right .right-col {
    color: #fff;
    border-top-left-radius: 1rem;
}

@media ( max-width: 900px ) {

    .slate-right .right-col {     
        border-top-right-radius: 1rem;
    }

}

.slate-right .right-col h2 {
    color: #fff;
}

.slate-right .right-col .button {
    position: relative;
    top: 2rem;
}


.baseline .button.alt,
.baseline  a.button.alt, 
.baseline .mobile-nav li.button, 
.baseline button.alt,
#callback-right input[type=submit] {
    background-color: var(--rnm-saffron);
    color: #000;
}

.baseline .button.alt:hover,
.baseline  a.button.alt:hover, 
.baseline .mobile-nav li.button:hover, 
.baseline button.alt:hover,
#callback-right input[type=submit]:hover {
    background-color: var(--rnm-martinique);
    color: #fff;
}

.style-1 .box-menu-item {
    background-color: var(--rnm-martinique);
    border-radius: 1.2rem;
}

.style-1 .box-menu-item h2 {
    color: #fff;
    font-family: proxima-nova, sans-serif;
    font-size: clamp(2.5rem, 2vw, 2.9rem);
    margin-bottom: 0;
    position: relative;
    padding-right: 3rem;
}

.style-1 .box-menu-item h2:after {
    content: "\f061";
    font-family: "Font Awesome 6 Pro";
    font-size: 3rem;
    display: block;
    position: absolute;
    right: 1rem;
    top: -0.3rem;
    color: var(--rnm-saffron);
}

.style-1 .box-menu-item .option {
    padding: 2rem 3rem;
}

.style-1.cde-box-menu .box-menu-item .img:before {
    border-top-right-radius: 1.2rem;
    border-top-left-radius: 1.2rem;
}

.baseline .header-wrap {
    border-bottom-color: #ddd;
}

.style-1.items-per-row-3 {
    grid-gap: 5vw;
    margin-top: 5rem;
}

#callback-right .right-col {
    background-color: var(--rnm-dodger-blue);
    padding: 4rem;
    border-radius: 1.2rem;
    color: #fff;
}

#callback-right .right-col p {
    color: var(--rnm-sail);
}

#callback-right .right-col h2 {
    position: relative;
    color: #fff;
}

#callback-right .right-col h2:after {
    content: "\f82d";
    font-family: "Font Awesome 6 Pro";
    font-size: 4rem;
    color: #000;    
    font-weight: 900;
    float: right;
    margin-top: -1rem;
}

#callback-right .gform_wrapper.gravity-theme .gfield_required {
    color: #fff;
}

#callback-right .left-col,
#map-right .right-col {
    background-image: url('dot-map.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#callback-right .left-col ul,
#map-right .right-col ul {    
    list-style: none;
}

#map-right .right-col ul {
    padding: 7rem 0;
}

#callback-right .left-col li,
#map-right .right-col li {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--rnm-martinique);
    border-radius: 0.5rem;
    color: var(--rnm-saffron);
    text-transform: uppercase;
    margin-right: 3rem;
    margin-bottom: 4rem;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 500;
}

#map-right .right-col li {
    margin-right: 2rem;
    margin-bottom: 2rem;
}

#callback-right .left-col h2,
#map-right .right-col h2 {
    margin-top: 4rem;
    margin-bottom: 8rem;
}

.extra-padding .inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.narrow .inner {
    max-width: 80rem;
    margin: 0 auto;
}

.inline-list.tool-list li {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    font-weight: 500;
}

.inline-list.tool-list li:after {
    background-image: url('hammer-icon.svg');
    width: 2.9rem;
    height: 2.7rem;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    background-color: transparent;
    position: relative;
    top: 0.5rem;
}

.extra-padding ul.tool-list {
    margin: 3rem 0 0 0;
}

/* Testimonials - grid/flickty */

.testi .flickity-viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.testi .container {
    width: 100%;
    max-width: 100%;    
}

.testi .cde-grid-item {        
    width: 100%;        
    box-sizing: border-box;    
}

.testi .inner {
    border-radius: 1.2rem;
    background-color: var(--rnm-martinique);                
    padding: 4rem 0;
}

.testi .before h2 {
    color: var(--rnm-saffron);
}

.testi .cde-grid-item-inner {    
    margin: 0 10%;
    border-radius: 1.2rem;            
    padding: 4rem 8rem;
    color: #fff;    
    display: grid;
    grid-template-areas: "testi-top"
                         "testi-bottom";
    grid-column-gap: 4rem;
}

.testi .flickity-button {
    display: none;
}

.testi .flickity-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testi .cde-grid-item-inner .item-label {
    grid-area: testi-bottom;
    font-size: 1.9rem;
    opacity: 0.8;
}

.testi .cde-grid-item-inner .item-label span:before {
    content: "—";
    margin-right: 0.8rem;
}

.testi .cde-grid-item-inner .item-content {
    font-size: clamp(1.7rem, 3vw, 2rem);    
}

.testi .cde-grid-item-inner {
    position: relative;
}

.testi .cde-grid-item-inner:before {
    content: "\f10d";
    display: block;
    font-family: "Font Awesome 6 Pro";
    color: #000;
    font-size: 10rem;
    left: -4rem;
    top: -4rem;
    font-weight: 900;
    position: absolute;
    z-index: -1;
}

.testi .xl .cde-grid-item-inner .item-content {
    font-size: clamp(2.3rem, 2vw, 3rem);
}

@media ( max-width: 720px ) {

    .testi .cde-grid-item-inner {
        margin: 0 2rem;
        padding: 3rem;
    }

    .testi .cde-grid-item-inner .item-label {
        font-size: 1.5rem;
    }

}

.testi .flickity-page-dots {
    bottom: 0rem;
}

.testi .flickity-page-dots .dot {
    background: var(--rnm-dodger-blue);
}

.testi .flickity-page-dots .dot.is-selected {
    background: var(--rnm-saffron);
}

/* End of testimonials */

#menu-footer-left.menu {
    column-count: 3;
} 

@media ( max-width: 900px ) {

    #menu-footer-left.menu {
        width: 90%;
        column-count: 1;
        border-bottom: 0.1rem solid #999;
        padding-bottom: 3rem;
        margin: 0 auto 3rem auto;
    } 
    
}

.baseline #hamburger {
    padding: 0.8rem;
}

.baseline #hamburger,
.baseline .close-button {
    border-radius: 0.5rem;    
}

.fa-circle-check {
    color: #0a0;
    font-size: 2rem;
}


.baseline .menubar-menu li.button a {
    color: #000;
}

.text-header {
    background-color: var(--rnm-martinique);
    color: #fff;
    text-align: center;
}

.text-header h1, 
.text-header h2,
.text-header h3 {
    color: #fff;
    margin: 0;
} 

.text-header .wrapper {
    padding: 6rem 0;
}

.gallery-page .cde-gallery-grid .text {
    max-width: 70rem;
    margin: 0 auto 5rem auto;
}

.cde-gallery-grid .image-wrapper:hover {
    opacity: 0.7;
}

.cols-three .image-wrapper {
    max-height: 35rem;
}

.cde-wide-text .inner {
    max-width: 70rem;
    margin: 0 auto;
}

.container .has-bgcolor {
    border-radius: 1.2rem;
}

.services.cde-grid-list .inner {
    padding: 0 2rem;
}

@media ( min-width: 800px ) {

    .services.cde-grid-list .inner {
        padding: 0 10rem;
    }
    
}

.cde-gallery-grid .image-wrapper img {
    border-radius: 1.2rem;
}

.services.cde-grid-list .cde-grid-item-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 2.3rem;
    font-weight: 500;
}

@media ( max-width: 800px ) {

    .services.cde-grid-list .cde-grid-item-inner {
        font-size: 1.9rem; 
    }

    .baseline .services.cde-grid-list .grid-list {
        grid-gap: 1.7rem;
    }

}

.services .cde-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services.cde-grid-list .cde-grid-item-inner:before {
    content: "\f2f7";
    font-family: "Font Awesome 6 Pro";
    color: var(--rnm-dodger-blue);
    font-size: 4rem;
    margin-right: 1rem;
    font-weight: 900;
}

.cde-wide-text.image-header.first {
    margin-top: 5rem;        
    position: relative;
    z-index: 1;
}

@media ( max-width: 600px ) {

    .cde-wide-text.image-header.first {
        margin-top: 1rem;
    } 

}

.cde-wide-text.image-header .wrapper {
    border-radius: 1.2rem;
    height: 30vw;
    max-height: 40rem;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;    
    z-index: 1;
}

.cde-wide-text.image-header .wrapper:before {
    content: "";
    position: absolute;
    border-radius: 1.2rem;
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.image-header .inner {
    position: relative;
    z-index: 3;
}


.image-header .inner h1,
.image-header .inner p,
.image-header .inner,
.image-header .inner a {
    color: #fff;
}

[data-aos="tada"].aos-animate {
    -webkit-animation-name: tada;
    animation-name: tada;
    animation-duration: 1.8s;
}

/* TA-DA animation */
@-webkit-keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  .animate__tada {
    -webkit-animation-name: tada;
    animation-name: tada;
  }

/* End of TADA animation */


.baseline h1+div+p, 
.baseline h2+div+p, 
.baseline h2+p, 
.baseline h3+div+p, 
.baseline h3+p, 
.baseline h4+div+p, 
.baseline h4+p, 
.baseline h5+div+p,
.baseline  h5+p,
.baseline  h6+div+p,
.baseline  h6+p {
    margin-top: 3rem;
}

.baseline .slate-right h3+p {
    margin-top: 1rem;
}

.quote-button {
    margin-top: 2rem;
}

.baseline #box-menu-item-458 .img:before {
    background-position: bottom top;
}

.baseline .popmake.pum-container.pum-responsive  {
    border-radius: 1.5rem;
}

.grid-list.cols-0 {
    align-items: center;
    justify-content: space-evenly;
}

.baseline .grid-list.cols-0 li {
    max-width: 27rem;
    margin: 1rem 2rem;
}