/*------------------------------------*\
    
    Contained Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Contained Image + Text' block. 
    If there is any reasons why you would need to style them seperately,
    please create a block-specific stylesheet for it (don't forget to resiger that block-specific stylesheet in acf-start-blocks.php)

\*------------------------------------*/


.image-text h2,
.image-text h3 {
    color: #353535;
}

.image-text h2.title{
    padding-top: 0 !important;
}

.image-text__img,
.padding-bottom {
    padding-bottom: 35px;
}

.image-text__img img {
    margin: 0 auto;
}

.home .image-text__img{
    display: none;
}

.dark-bg-gray.image-text h2, 
.dark-bg-gray.image-text h3{
    color: #fff !important;
}

.webinar-form-container{
    background-color: #fff;
    box-shadow: 0 0 10px rgba(2,8,15,0.1);
    border-radius: 3px;
    padding-left: 20px !important;
    padding: 20px;
}

.webinar-form-container h5{
    font-size: 19px;
    line-height: 25px;
}

@media (max-width:980px) {

    .image-text__img img {
        max-width: 410px !important;
        width: 100%;
    }
}

@media (min-width:768px) {
    
    .flex-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-reverse {
        flex-direction: row-reverse;
    }

    .tab-padding {
        padding: 0 32px;
    }

    .webinar-form-container{
        background-color: #fff;
        box-shadow: 0 0 10px rgba(2,8,15,0.1);
        border-radius: 3px;
        padding-left: 40px !important;
        padding: 40px 40px 30px 40px;
    }

    .home .image-text__img{
        display: block;
    }
    
}

@media (min-width:1200px) {
    .half-text-right__wrapper {
        padding-left: 60px;
    }

    .half-text-left__wrapper {
        padding-right: 60px;
    }

    .image-text--right .half-text-right__wrapper {
        padding-left: 0px;
        padding-right: 60px;
    }

    .image-text--right.one-third-image-text .half-text-right__wrapper{
        padding-left: 60px;
        padding-right: 0px;
    }
    
    .image-text .flex-row {
        align-items: center
    }

    .flex-lg-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center
    }

    .flex-lg-reverse {
        flex-direction: row-reverse;
    }

    .image-text__img {
        padding-bottom: 0;
    }

    .tab-padding {
        padding: 0;
    }

    .one-third-image-text .image-text__img img {
        margin: 0 0;
        float: right;
    }

    .one-third-image-text .half-text-left__wrapper {
        padding-right: 60px;
    }
}



/*------------------------------------*\
    
    Full-Width Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Full-Width Image + Text' block. 
    If there is any reasons why you would need to style this separately,
    please create a block-specific stylesheet for it (don't forget to register that block-specific stylesheet in acf-starter-blocks.php)

\*------------------------------------*/

.full-width-image-text {
    position: relative;
    min-height: 400px;
}

.full-width-image-text__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
    object-position: top;
}

.full-width-image-text__content {
    padding: 0;
    position: relative;
    z-index: 2;
}

.full-width-image-text__headline {
    margin-top: 0;
}

.full-width-image-text__description :last-child {
    margin-bottom: 0;
}

.full-width-image-text__content {
    padding: 10px 35px 30px 40px;
}



.full-width-image-text__headline sup{
    font-size: 19px;
    font-family: 'avenir85_heavy';
    text-transform: uppercase;
    top: -0.8em;
}

@media (min-width: 768px) {
    .full-width-image-text__content {
        padding: 35px;
    }

    .full-width-image-text__img {
        display: block;
    }
}

@media (min-width: 1025px) {
    .full-width-image-text__content {
        padding: 50px 60px;
    }
}


/* Full-Width Image + Text - Direct Text Overlay */
.full-width-image-text--direct-overlay .full-width-image-text__content {
    padding: 0 20px;
}

.full-width-image-text--direct-overlay .full-width-image-text__content {
    padding: 0 20px;
}

.full-width-image-text--direct-overlay .full-width-image-text__headline,
.full-width-image-text--direct-overlay .full-width-image-text__description p,
.full-width-image-text--direct-overlay .full-width-image-text__description h2,
.full-width-image-text--direct-overlay .full-width-image-text__description h3,
.full-width-image-text--direct-overlay .full-width-image-text__description h4,
.full-width-image-text--direct-overlay .full-width-image-text__description h5,
.full-width-image-text--direct-overlay .full-width-image-text__description ul li {
    color: #fff;
}


    /* Overlay Color */
    .full-width-image-text--direct-overlay:before {
        content: '';
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .75;
        background-color: #041326;
        display: block;
    }


/* Full-Width Image + Text - Text Box Overlay */
.full-width-image-text--box-overlay .full-width-image-text__content {
    background-color: rgba(255,255,255,0.9);
    border-radius: 4px; 
    box-shadow: 0 1px 30px 0 rgb(0 0 0 / 10%); 
}


.dark-color {
    background-color: #444444;
}

.one-third-width-image-text__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 231px;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
}

.dark-color {
    padding-top: 179px;
    padding-bottom: 90px;
}

.service-tag {
    position: absolute;
    width: 80px;
    right: 10px;
    bottom: -30px;
}

.service-tag img {
    display: block;
    width: 100%;
    height: auto;
}

.dark-color .full-width-image-text--box-overlay,
.dark-color .full-width-image-text__content {
    background-color: #fff;
}

@media (max-width: 480px) and (min-width: 374px) {
    .service-tag {
        right: 30px;
    }
}

@media (min-width: 768px) {
    .dark-color {
        padding-top: 299px;
        padding-bottom: 70px;
    }

    .one-third-width-image-text__img {
        height:400px;
    }

    .dark-color .full-width-image-text__content {
        margin: 0 30px;
        padding: 40px;
    }
    .service-tag {
        right: 40px;
        width: 130px;
    }
    
}

@media (min-width: 1200px) {
    .dark-color {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .one-third-width-image-text__img {
        height:100%;
        width:61%;
    }

    .dark-color .full-width-image-text__content {
        margin: 0;
        padding: 60px;
    }

    .service-tag {
        width: 195px;
        right: -20px;
        bottom: -40px;
    }
}

@media (min-width: 1440px) {

    .service-tag {
        right: -40px;
    }
}

.fx-accordion {
    position: relative;
}

.fx-accordion__panels {
    margin-bottom: 20px;
}

.fx-accordion__panel {
    /* box-shadow: 0 3px 6px rgba(0,0,0,0.16); */
    background-color: #fff;
    border-bottom:1px solid #C4C8C9;
}

.fx-accordion__panel__toggle {
    position: relative;
    list-style-type: none !important;
    margin: 0 0 0 0;
    display: block;
    color: #666666;
    line-height: normal;
    background: #fff;
    padding: 20px 40px 20px 20px;
    text-decoration: none;
    border: none;
    border-radius: 0;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
  
}

.fx-accordion__panel__toggle span {
    display: none;
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle,
.fx-accordion__panel__toggle:hover,
.fx-accordion__panel__toggle:focus {
    text-decoration: none;
}

.fx-accordion__panel .fx-accordion__panel__toggle:after {
    content: '\e901';
    font-family: 'icomoon';
    position: absolute;
    top: 0;
    right: 25px;
    width: 21px;
    height: 100%;
    border-style: solid;
    border-width: 0;
    font-size: 21px;
    color: #231F20;
    font-weight: 400;
    display: flex;
    align-items: center;
    padding-bottom: 2px;
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle:after {
    content: '\e90c';
}

.fx-accordion__panel:not(.is-expanded) .fx-accordion__panel__content {
    display: none;
}

.fx-accordion__panel__content {
    padding: 20px;
    padding-top: 0;
    overflow: hidden;
}

.image-text-accordion .row {
    align-items: center;
}

@media (min-width: 768px) {
    .fx-accordion__panels {
        margin-bottom: 30px;
    }

    .fx-accordion__panel__toggle span {
        display: inline-block;
    }
    
}




/**
 * Images
 */

 .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}














/* Joseph Styles */
.cta-bar {
	position: relative;
	color: #fff;
}

.cta-bar .flex-row {
    align-items: center
}

.cta-bar.bg-overlay::after {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(4,9,38,.7);
}

.cta-bar__bg {
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
}

.cta-bar__content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.cta-bar__content p{
	color: #f8f8f8;
}

.cta-bar__headline {
	margin-top: 0;
	color: #fff;
}

.btn-margin {
	margin-bottom: 18px;
}

.btn-margin:last-child {
	margin-bottom: 0;
}

.full-width-image-text__btn {
	width: 100%;
}
@media (min-width: 768px) {

	.image-text .flex-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

	.cta-bar__content {
		text-align: left;
	}
}

@media (min-width: 768px) and (max-width: 1020px) {

	.cta-bar__content .col-lg-10{
		padding: 20px 55px;
	}
}


@media (min-width: 1200px) {
	.full-width-image-text__btn {
		text-align: right;
	}
}

.counter-item,
.counter-item li {
	padding: 0;
	margin: 0;
}

.counter-item li::before {
	display: none;
}

.counter-bttn h1 {
	font-size: 40px;
	padding-bottom: 3px;
}

.counter-bttn h5 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
}


@media (min-width: 768px) {
	.counter-item li {
		display: inline-block;
		padding: 0 35px;
		vertical-align: top;
	}

	.counter-bttn h1 {
		font-size: 45px;
		padding-bottom: 15px;
	}

	.counter-bttn h5 {
		font-size: 14px;
		max-width: 150px;
		margin-bottom: 0;
		margin: auto;
	}
}

@media (min-width: 1200px) {
	.counter-item li {
		display: inline-block;
		padding: 0 78px;
	}

	.counter-bttn h1 {
		font-size: 60px;
		padding-top: 20px;
	}

	.counter-bttn h5 {
		font-size: 16px;
		max-width: 165px;
	}
}




/*Image Gallery **/

.gallery-heading {
    max-width: 872px;
    margin: 0 auto;
    padding-bottom: 34px;
}

.js-gallery {
    margin: 0 -22px;
    padding-bottom: 45px;
}

.js-gallery-item {
    padding: 10px;
    transition: all .3s;
    height: 326px;
}

.js-gallery .slick-current .js-gallery-item {
    padding: 0;
}

.js-gallery-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
    display: block;
}

@media (min-width: 768px) {

    .gallery-heading {
        padding-bottom: 64px;
    }

    .js-gallery {
        margin: 0 -52px;
        padding-bottom: 65px;
    }

    .js-gallery-item {
        padding: 15px;
    }
}

@media (min-width: 1025px) {

    .gallery-heading {
        padding-bottom: 36px;
    }

    .js-gallery {
        margin: 0 -16px;
        padding-bottom: 65px;
    }

    .js-gallery-item {
        padding: 16px;
    }

    .js-gallery .slick-current .js-gallery-item  {
        padding: 0 !important;
    }
}


/* Masthead **/

.section-padding{
    padding:70px 0;
}

.masthead-section{
    min-height: 560px;
    display: flex;
}
.masthead-content{
    background-color: #F1F5F6;
}

.masthead-content h2{
    color: #666666;
    text-transform: uppercase;
    font-size: 35px;
    font-family: "oswald", sans-serif;
}

.masthead-content p{
    font-size: 16px;
    line-height: 25px;
}

.masthead-content .full-width-image-text__content{
    background-color: #F1F5F6;
}

/* Image + Text Section **/
.image-text{}
.image-text h2{
    color:#666666;
    font-size:35px;
}

.image-text p{
    font-size:16px;
    line-height: 25px;
}

.image-text .image-text-btn{
    display: flex;
}

.image-text .image-text-btn a{
    margin-right: 20px;
    padding:15px 30px
}

.image-text .image-text-btn a.btn-secondary{
    background:#fff;
    border:2px solid #D91E26;
    color:#D91E26;
}
/* cta button 2 */
.full-width-image-text__description a{
    margin-right: 20px;
    padding:15px 30px
}
.full-width-image-text__description a.btn-secondary{
    background:#fff;
    border:2px solid #D91E26;
    color:#D91E26;
}
/* end cta button 2 */
/* Final CTA Block */
.final-cta-block{
    background: #54595F;
}

.final-cta-content:after{
    background: url(../images/overlay-cta-gray.png) no-repeat;
    display: block;
    position: absolute;
    right: -100px;
    width: 100%;
    height: 100%;
    content:'';
    top:0;
    z-index: 8;
}

.final-cta-block .full-width-image-text__content{
    position: relative;
    z-index: 9;
}

.final-cta-block h2{
    color: #F1F5F6 !important;
    font-size: 35px;
}

.final-cta-block p{
    font-size: 16px;
    line-height: 25px;
    color: #F1F5F6 !important;
}


/* CTA BAR */
.cta-bar{}
.cta-bar__content{}
.cta-bar__content h2{
    font-size: 35px;
    color: #F1F5F6;
}

.cta-bar__content p{
    color: #F1F5F6;
    font-size: 16px;
    line-height: 25px;
}

/* Accordion **/
.image-text-accordion{}
.image-text-accordion h2{
    color:#666666;
    font-size: 35px;
}

.image-text-accordion p{
    color: #666666;
    font-size: 16px;
    line-height: 25px;
}

.flex-reverse .image-text-aacordion__text:before,
.has-border:before,
.masthead-content .full-width-image-text__content:before{
    content:' ';
    display: block;
    height: 75%;
    width: 100%;
    border-left: 5px solid #D91E26;
    position: absolute;
    left: -10px;
    top: 0;
    z-index: -1;
}

.image-text-aacordion__img img{
    width: 80%;
}

.has-border:before{
    top:10px;
    height: 70%;
}

.masthead-content .full-width-image-text__content:before{
    height: 100%;
    left: 0;;
}

.fx-accordion__panel__toggle{
    padding-left: 0;
}

.fx-accordion__panel__content{
    padding-left:0;
}

.fx-accordion__panel .fx-accordion__panel__toggle:after,
.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle:after{
    width:15px;
    height:15px;
    background:url(https://waynealarm.com/wp-content/uploads/2022/08/plus.png) no-repeat;
    border:0;
    content:'';
    top:21px;
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle:after{
    background:url(https://waynealarm.com/wp-content/uploads/2022/08/minus.png) no-repeat;
}

.image-text-aacordion__half{
    padding-left: 20px;
}

/** Fullwidth CTA */
.full-width-image-text{}
.full-width-image-text h2{
    font-size: 35px;
    color: #666666;
}

.full-width-image-text p{
    color:#666666;
    font-size: 16px;
    line-height: 25px;
} 

.full-width-image-text .content-image{
    margin-bottom: -250px;
}

/*Image Gallery */
.image-gallery .slick-prev, 
.image-gallery .slick-next{
    width: 60px;
    height: 60px;
    z-index: 9;
}

.image-gallery .slick-prev{
    background: url(https://waynealarm.com/wp-content/uploads/2022/08/arrow-left.png);
}

.image-gallery .slick-next{
    background: url(https://waynealarm.com/wp-content/uploads/2022/08/arrow-right.png);
}

.slick-prev:before, 
.slick-next:before{
    display: none;
}

.image-gallery .slick-current{
    transform: scale(1.2);
}

.image-gallery .slick-list:before,
.image-gallery .slick-list:after{
    position: absolute;
    width: 360px;
    height: 100%;
    content:'';
    display: block;
    top:0;
    z-index: 8;
    background-size: contain;
}

.image-gallery .slick-list:before{
    left:0;
    background: url(https://waynealarm.com/wp-content/uploads/2022/08/slick-before.png);
}

.image-gallery .slick-list:after{
    right: 0;
    background: url(https://waynealarm.com/wp-content/uploads/2022/08/slick-after.png);
}

.image-gallery h2{
    color:#666666;
    font-size: 35px;
}

.image-gallery p{
    line-height: 25px;
    font-size: 16px;
    color:#666666;
}

@media (max-width:767px){

    .section-padding{
        padding:20px 0;
    }

    .full-width-image-text h2{
        font-size: 25px;
    }

    .image-text__img,
    .image-text__text{
        padding:10px 20px 10px 50px!important
    }

    .image-text .image-text-btn{
        display: block;
    }

    .image-text .image-text-btn a{
        margin:0;
        margin-bottom: 20px;
    }

    .full-width-image-text .content-image{
        margin-bottom: 0;
    }

    .gallery-heading{
        padding:10px 40px;
        width: 100%;
    }

    .image-gallery .slick-prev{
        left: 60px;
    }
    .image-gallery .slick-next{
        right: 60px;
    }

    .cta-bar{
        background:#070a1f;
    }

    .cta-bar__content{
        padding:10px 40px;
        width: 100%;
    }

    .image-text-accordion{
        padding:20px 40px !important;
    }

    .img-responsive{
        margin:0 auto;
    }

    .final-cta-content{
        padding:40px;
    }

    .final-cta-content:after{
        display: none;
    }

    .btn{
        padding:15px 40px;
    }

    .image-gallery .slick-list:before,
    .image-gallery .slick-list:after{
        display: none;
    }
}

@media (min-width:768px) and (max-width:900px){
    .full-width-image-text h2,
    .image-text h2{
        font-size: 20px;
    }

    .full-width-image-text p,
    .image-text p{
        font-size: 14px;
    }

    .image-text .image-text-btn{
        display: block;
    }

    .image-text{
        padding:50px 20px 50px 50px;
    }

    .image-text .image-text-btn a{
        margin-bottom: 15px;
        margin-top: 0;
    }

    .full-width-image-text .content-image{
        margin-bottom: -100px;
    }

    .image-gallery{
        padding:50px 100px;
    }

    .image-gallery .slick-list:before,
    .image-gallery .slick-list:after{
        display: none;
    }

    .cta-bar{
        padding:50px;
        background: #070a1f;
    }

    .image-text-accordion{
        padding:50px;
    }
}