/*
TEMPLATE FOR MEDIA QUERIES
	@media screen and (min-width:1180px) {}
	@media screen and (min-width:880px) and (max-width:1179px) {}
    @media screen and (max-width:879px) {}

INDEX
	- STRUCTURE
    - HEADER
	- FLOATING BUTTON
*/

/*-----------------------------------------------------------  STRUCTURE ----------------------*/

/*div#banner_top_img {
    display: none;
}

div#pg_title h1 {
    background: #02c058;
    color: #FFF;
}
*/

section.has_aside{
	width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.content {
	width: 100% !important;
    padding-right: 0 !important;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}




@media screen and (min-width: 1121px) {
	.new_content{
		max-width: 1150px;
		margin: 0 auto;
	}
	
}

@media screen and (max-width: 1120px) {
	
	.new_content{
		max-width: 1150px;
		margin: 0 15px;
	}
	
}

div#contact_info {
    max-width: 1150px;
    margin: 0 auto;
}

aside {
    display: none !important;
}


.catholic_banner .imgC {
    margin-bottom: 0;
    display: none;
}

div#pg_title {
    max-width: 100%;
}

/*-----------------------------------------------------------  HEADER -------------------------*/
@media screen and (min-width:1250px) {
    #pg_top { height: 500px; }
}

@media screen and (min-width:650px) and (max-width:1249px) {
    #pg_top { height: 290px; }
}

@media screen and (max-width:649px) {
    #pg_top { height: 230px; }
}

#pg_top {
	position: relative;
    background-color: #000000;
    background-attachment: fixed !important;
    background-position: top !important;
    width: 100%;
    margin: 0;
    background-size: cover !important;
    padding: 75px 0;
}

#pg_top section{height: 100%;}
#pg_top section .content{height: 100%; padding: 0; margin: 0;}


h3.navigation_title {
    display: none;
}
/*-----------------------------------------------------------  FLOATING BUTTON ----------------*/

/* Floating button styles */
.floating-button {
	position: fixed;
	bottom: 50%;
	right: 20px;
	background-color: #ff4b1b;
	color: white;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	z-index: 1000;
}

div#floatingButton a {
    color: #FFF;
}

.phone-icon {
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    width: 100%;
    display: block;
}

.tooltip {
    visibility: hidden;
    width: 180px;
    background-color: #1a2535;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    bottom: 0;
    right: 60px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Hover effect */
.floating-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Hide the floating button when it reaches the footer */
.hide {
    display: none;
}

/*-----------------------------------------------------------  WRAP MORE ----------------------


div#welcome-cards {
    padding: 40px 0 70px 0;
    background: #fbfbfb;
}


div#welcome-cards H1 {
    font-size: clamp(30px, 3vw, 43px);
    text-align: center;
    margin-bottom: 25px;
}

*/
/*-----------------------------------------------------------  WRAP TITLE ---------------------*/

.wrap_title {
    padding: 50px 0;
    background: #5b82ac;
    text-align: center;
    color: #FFF;
}

.wrap_title h1 {
    font-size: clamp(30px, 3vw, 43px);
    color: #FFF;
}
.wrap_title p {
    max-width: 630px;
    margin: 0 auto;
    font-size: 20px;
}


/*-----------------------------------------------------------  WRAP ABOUT ----------------------*/


.wrap_about {
    padding: 25px 0;
	margin-bottom: 30px;
}
.wrap_about  h2 {
   color: #888888;
    font-size: clamp(18px, 2vw, 24px);
    text-align: center;
    font-weight: lighter;
    font-style: italic;
    line-height: clamp(26px, 3vw, 38px);
    margin-bottom: clamp(30px, 5vw, 55px);
    padding: 0;
}

.wrap_about .vmenu01 h3 {
    background-color: var(--color_gray_1);
    padding: 3px 0 3px 17px;
    border-left: 4px solid var(--color_pl);
    font-size: 13px !important;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #000;
}


.wrap_about div#buttonsPolicy {
	width: 100%;
    max-width: 640px;
    margin: 0 auto 28px auto;
}

.wrap_about  a.bluebutton {
    width: 100%;
    text-align: center;
    background: var(--color_p2);
    display: table;
    color: #FFF;
    padding: 0px 13px 15px 13px;
	font-size: 15px;
}

.wrap_about  a.bluebutton:hover { background: var(--color_p3);}

div#onlybuttons .bluebutton {
    padding: 17px;
    text-transform: uppercase;
}

.wrap_about .vmenu01.fx_3 {
    width: 100%;
}

.wrap_about .vmenu01>ul {
    padding: 4px 7px;
    margin-bottom: 20px;
    border-left: 2px solid var(--color_gray_1);
    margin-left: 0;
}

.wrap_about .contact-title {
    color: var(--black);
    font-size: 12px;
    font-weight: bold;
    border-bottom: none;
	line-height: 15px;
}

.wrap_about .contact-phone {
    font-size: 12px;
    color: var(--color_gray_2);
}

.wrap_about .contact-url {
    display: table;
	margin-bottom: 10px;
    font-size: 12px;
}

.wrap_about .contact-email {
    display: table;
    margin-bottom: 10px;
	font-size: 12px;
}

.wrap_about .vmenu01 a {
	float: left;
    padding: 0 !important;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: 0;
}

.wrap_about .vmenu01 a:hover {
    color: #d1930d;
    background: none;
    transition: 0.5s;
}

.description span {
    color: #d1930d;
    position: relative;
    padding: 5px;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    clear: both;
}

#welcome-cards .card .card-col{position: relative}

img.logoAdobe {
    width: 28px;
    position: relative;
    top: 9px;
    margin-right: 6px;
}

.card.flex {
    max-width: 590px;
    margin: 0 auto;
}

#welcome-cards .description {
    height: 90px;
}

/*-----------------------------------------------------------  WRAP FOOTER --------------------*/
.wrap_Report_Now {
	background: #000a11cf url(/library/includes/home_2024/img/cathoholic/bg_catholic.png);
	background-blend-mode: overlay;
	background-size: cover;
}

.wrap_Report_Now .flex#contact { display: flex;
    flex-wrap: wrap;
    clear: both;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.default.v2 { width: 100%;}


.default.v2 label {
	display: block;
	margin-bottom: 4px !important;
	font-weight: 600;
	text-align: left;
}

.default.v2 input {
	display: block;
	margin-bottom: 4px !important;
	font-weight: 600;
	text-align: left !important;
	width: 100% !important;
	box-sizing: border-box;
}

.wrap_Report_Now .new_content {
    max-width: 750px;
    background: #FFFFFF;
    padding: 40px;
    border-radius: 15px;
    top: -46px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: solid 1px #cecece;
}

form.default.v2 textarea {
    height: 90px !important;
    margin-bottom: 20px;
}


@media screen and (max-width: 799px) {
    form.default input, form.default select, form.default label {
        clear: both;
        display: block;
        margin: 0;
        width: 100% !important;
    }

    section {
        margin: 0 15px;
    }
}


/*----------------------------------------------------------- STRUCTURE INTERN ----------------*/

@media screen and (min-width:1180px) {
	.Cols-aside-left {
		display: grid;
		grid-template-columns: 465px 600px;
		grid-column-gap: 60px;
		grid-row-gap: 10px;
		justify-items: stretch;
		align-items: stretch;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	.Cols-aside-right{
		display: grid;
        grid-template-columns: 800px 300px;
        grid-column-gap: 50px;
        grid-row-gap: 10px;
        justify-items: stretch;
        align-items: stretch;
        width: 100%;
        padding: 0;
        margin: 0;
	}
	
}

@media screen and (max-width:879px) {
	.Cols-aside-left{
		display: grid;
		grid-template-rows: auto auto;
		grid-row-gap: 17px;
		justify-items: stretch;
	}
	
	.Cols-aside-right{
		display: grid;
		grid-template-rows: auto auto;
		grid-row-gap: 17px;
		justify-items: stretch;
	}
	
	.Cols-aside-left .col1 img, .Cols-aside-right .col2 img{width: 95%;}
	
	.Cols-aside-left .half-content, .Cols-aside-right .half-content{
		grid-template-columns: 49% 49%;
		grid-column-gap: 2%;
		display: grid;
		width: 100%;
		background: #fbfbfb;
	}
	
	.col1.half-content img.imgC{width: 100%; margin: 0 auto;}

}


.col1 h1 {
    margin: 1px;
    padding-left: 10px;
    padding-top: 0;
    padding-bottom: 0;
}


/*----------------------------------------------------------- WRAP HOTLINE ----------------*/


.wrap_hotline {
    background: #012643;
    padding: 70px 0;
    color: #FFF;
	font-size: 18px;
}

.wrap_hotline p{
	font-size: 18px;
}


.wrap_hotline img.titleicon {
    width: 100%;
    max-width: 400px;
}

@media (max-width: 825px) {
    dl.hotline-calls {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
    }
	
	dl.hotline-calls dt.iconTitle{margin-bottom: 10px;}
}

@media (min-width: 826px) {
 dl.hotline-calls {
		display: flex;
		flex-direction: row;
		align-content: center;
		align-items: center;
		justify-content: center;
	}
	
	dl.hotline-calls dt.iconTitle{margin-right: 20px;}
}

dl.hotline-calls {
    width: 100%;
    margin: 0 auto;
    max-width: 475px;
}

dt.iconTitle {
    width: 25%;
    float: left;
}

span.textTitle {
    color: #ffffff;
    font-size: clamp(15px, 2.5vw, 17px);
    display: block;
    font-weight: bold;
}

a.numberhotline {
    color: #ebab2e;
    font-size: clamp(42px, 4vw, 52px);
    display: block;
}

a#buttonBlue {
    background: var(--color_p);
    color: #FFF;
    padding: 10px;
    margin: 10px auto;
    display: block;
    max-width: 201px;
    text-align: center;
}

a#buttonBlue:hover {
    background: #ebab2e;
    color: #012643;
}