:root {
   --primary: #564c7a;
   --primaryHover: rgb(63, 55, 89);
   --primary-light: #CBC8D6;
   --secondary: #41395C;
   --secondaryHover: #231f32;
   --alt: #ABA88D;
   --alt-light: #F0EFE7;
   --light: #F7F6FA;
   --text: #767676;
   --text-light: #9E9E9E;
   --subMenu: #E6E4EB;
   ;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box !important;
}

html {font-size: 100%;}

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--text) !important;
   background-color: var(--white);
   font-family: "Outfit", serif !important;
   font-optical-sizing: auto;
   font-size: 1.06rem;
   font-weight: 400;
   font-style: normal;
   position: relative !important;
}



.nav-link {
   font-weight: 400;
   font-size: 1.1rem;
   color: var(--primary) !important;
}

.nav-link:hover, .nav-item .active  {
   color: var(--dark) !important;
}
.nav-item .active{
   font-weight: bold !important;
   color: var(--primaryHover) !important;
   transition: ease all 0.2s;
}

@media (min-width: 1300px){
   .nav-item {
      margin:auto 0.8rem;
   }   
}

.dropdown-item.active, .dropdown-item:active {
   color: var(--bs-dropdown-link-active-color);
   text-decoration: none;
   background-color: var(--bs-white) !important;
}

/* Footer
---------------*/
footer a:hover{color:#ffffff !important;}
/* end ---*/




/* História
---------------*/

.two-columns {
   columns: 2;
   column-gap: 2rem;
}

/* end ---*/



/* Catequese
---------------*/

.catequese {
   display: grid;
   grid-row-gap: 1px;
   grid-column-gap: 1px;
   grid-template-rows: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);
}

.catequese > div {padding: 1rem;}

.month-1 { grid-area: 1 / 1 / 2 / 2; }
.month-2 { grid-area: 1 / 2 / 2 / 3; }
.month-3 { grid-area: 1 / 3 / 2 / 4; }
.month-4 { grid-area: 2 / 1 / 3 / 2; }
.month-5 { grid-area: 2 / 2 / 3 / 3; }
.month-6 { grid-area: 2 / 3 / 3 / 4; }
.month-7 { grid-area: 3 / 1 / 4 / 2; }
.month-8 { grid-area: 3 / 2 / 4 / 3; }
.month-9 { grid-area: 3 / 3 / 4 / 4; }
.month-10 { grid-area: 4 / 1 / 5 / 2; }
.month-11 { grid-area: 4 / 2 / 5 / 3; }
.month-12 { grid-area: 4 / 3 / 5 / 4; }

.icon-md {
   width: 60px;
   min-width: 60px;
   height: 60px;
   min-height: 60px;
}

/* end ---*/




/* Galeria
---------------*/
.galeriaItem:before{
   content: "";
   position: absolute;
   width: 100%;
   height: 1px;
   background: #eeeeee;
   top: 52%;
   z-index: 0;
}
/* end ---*/


/* SOCIAL ICONS
---------------*/
.btnIcons{
   width: 50px; height: 50px;
}
.btnIcons:hover{
   background: var(--bs-light) !important;
}
/* end ---*/



/* HELPERS
---------------*/

.hoverToCircle:hover .border{border-radius: 50% !important;}
.shadowHover:hover .hoverToCircle{border-radius: 50% !important;}

/* Sizes & Dimensions */
.shadowHover:hover{
   box-shadow: 0 0 10px rgba(86, 76, 122, 0.55);
   border-radius:15px !important;
}

.shadowHover:hover .galeriaItem{
   padding:0 1rem !important;
   transition:ease all .3s;
}

.w-fit {width: fit-content;}
.h-screen {height: 100vh; height: 100dvh;}

.transition-04 {
   transition: all linear .4s;
   -o-transition: all linear .4s;
   -moz-transition: all linear .4s;
   -webkit-transition: all linear .4s;
}
.transition-03 {
   transition: all linear .3s;
   -o-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -webkit-transition: all linear .3s;
}
.transition-02 {
   transition: all linear .2s;
   -o-transition: all linear .2s;
   -moz-transition: all linear .2s;
   -webkit-transition: all linear .2s;
}


.btn-primary {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--primary);
   --bs-btn-border-color: var(--primary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--primaryHover);
   --bs-btn-hover-border-color: var(--primaryHover);
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--primary);
   --bs-btn-active-border-color: var(--primary);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: var(--primary);
   --bs-btn-disabled-border-color: var(--primary);
}


.btn-secondary {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--secondary);
   --bs-btn-border-color: var(--secondary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--secondaryHover);
   --bs-btn-hover-border-color: var(--secondaryHover);
   --bs-btn-focus-shadow-rgb: 130, 138, 145;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--secondaryHover);
   --bs-btn-active-border-color: var(--secondaryHover);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: var(--secondary);
   --bs-btn-disabled-border-color: var(--secondary);
}

.container-fluid{max-width:1920px !important;}

@media (min-width:1199.98px){
   .h0{font-size: 60px;}
}

.fs-7 {font-size: .9rem; line-height: 1.4rem !important;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}

.lh-1{line-height: 1rem !important;}
.lh-1_1{line-height: 1.1rem !important;}
.lh-0{line-height: 0rem !important;}

/* Colors */
.text-body {color: var(--text) !important;}
.text-primary {color: var(--primary) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-muted {color: var(--text-light) !important;}


.bg-cover{background-size:cover !important; background-repeat:no-repea !important; background-position:center center !important;}
.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-light {background-color: var(--light) !important;}
.bg-alt {background-color: var(--alt) !important;}
.bg-alt-light {background-color: var(--alt-light) !important;}
.bg-subMenu {background-color: var(--subMenu) !important;}
.bg-primary-light {background-color: var(--primary-light) !important;}

.bg-overlayPrimary{ 
   background: #F2F2F7;
   position: absolute;
}


.hover\:bg-light:hover {background-color: var(--light);}


.img-cover {
   object-fit: cover;
   object-position: center center;
}

