/*============= RESETS =============*/

/*-- iPhone X Remove Gutters --*/
html {
   padding: env(safe-area-inset);
}
/*-- Body Font --*/
body {
   font-family: 'Lato', sans-serif;
   color: #505962;
}

/*-----------Headings-------------------*/
h1:after {
   display: block;
   height: 2px;
   background-color: #d4af37;
   content: " ";
   width: 300px;
   margin: 0 auto;
   margin-top: 30px;
}

h4:after {
   display: block;
   height: 1px;
   background-color: #d4af37;
   content: " ";
   width: 100px;
   margin: 0 auto;
   margin-top: 20px;
}

h5:after {
   display: block;
   height: 1px;
   background-color: #d4af37;
   content: " ";
   width: 100px;
   margin: 0 30px;
   margin-top: 10px;
   
}
h6:after {
   display: block;
   height: 1px;
   background-color: #d4af37;
   content: " ";
   width: 100px;
   margin: 0 auto;
   margin-top: 10px;
}

#ui-id-1 {z-index: 9999;}
/*============= NAVIGATION =============*/

.container img {
   height: 5rem;
}

.navbar-toggler-icon{
   background-image: url(/img/three-line.png)!important;
}

.navbar {
   font-weight: 400;
   letter-spacing: .05rem;
}

/*-----------search bar----------------------------*/


/*============= LANDING PAGE =============*/

/*-- Fixed Landing Page Section --*/
.landing {
   position: relative;
   width: 100%;
   height: 100vh;
   display: table;
   background: #fafafa;
   z-index: -8;
}
.home-wrap {
   clip-path: inset(0% 0% 0% 0%);
   transform: translate(0);/*needed for clip-path or page fades randomly
   clip: rect(0, auto, auto, 0);*/
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform: translate(0);
}
.home-inner {
   background-image: url('../img/Wallpaper.jpg');
   position: fixed;
   display: table;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center center;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   will-change: transform;
   opacity: .8;
}

.home-family {
   background-image: url('../Family/img/FamilyProgramImage.jpg');
   /*position: fixed;*/
   display: table;
   top: 10%;
   left: 0;
   width: 100%;
   height: 100vh;
   background-size: cover;
   background-position: center center;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   will-change: transform;
   opacity: .9;
   padding-top: 8%;
   
}


.container .row{
   
   left: 50px;
   background-color: rgba(255, 255,255, .3);
   
  
}

.caption-honors {
   
   z-index: 1;
   text-align: center;
}



.caption {
   z-index: 1;
   top: 40%;
   position: absolute;
   text-align: center;
}

.caption-Family {
   
   padding-bottom: 5%;
   z-index: 1;
   top: 10%;
   position: absolute;
   text-align: center;
}


/*-- Landing Page Content --*/







/* ----- BUTTONS ----- */
.btn {
   border-width: medium;
   padding: .5rem 1.2rem;
   text-transform: uppercase;
   border-radius: 0;
   color: #ffffff;
   border-color: #d4af37;
   background-color: #000000;
   
   
}


.btn:link,
.btn:visited,
input[type=submit] {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-full:link,
.btn-full:visited,
input[type=submit] {
    /*background-color: ;*/
    border: 1px solid #d4af37;
    color: #ffffff;       
}

.btn-full:hover{
   background-color: #d4af37;
}

.btn-full:hover,
.btn-full:active
 {
    border: 1px solid #d4af37;
}

.btn-ghost:hover,
.btn-ghost:active {
    border: 1px solid #d4af37;
    color: #000;
}

.button.btn-af img {
   height: 5rem;
}
/*============= ABOUT SECTION =============*/


.about-brand img {
   height: 18rem;
}
.navbar-brand img {
   height: 5rem;
    
}
.newsletter-brand img {
   height: 10rem;
    
}
.contact-img img{
   height: 5rem;
}

/*-- Scrollspy Offset --*/
.offset:before {
   content: "";
   height: 62px;
   margin-top: -42px;
   display: block;
}

.heading {
   text-transform: uppercase;
   font-weight: 700;
}

.heading-underline {
   width: 3rem;
   height: .25rem;
   background-color: #d4af37;
   margin: 1.5rem auto;
}


/*-----------------------------------------------Useful Links Section----------------------------------------*/

.useful-links a:hover{
   color: #d4af37;
}

.useful-links
 a:link{
   text-decoration: none;
}

.useful-links a{
   align-items: center;
   text-align: left;
   display: list-item;
   color: black;
}

.useful-links .list-group-item {
   padding: 1px;
   
}



/*--------card flip-----------------------------*/

.flip-card {
   background-color: transparent;
   width: 300px;
   height: 200px;
   
   perspective: 1000px; /* Remove this if you don't want the 3D effect */
 }
 
 /* This container is needed to position the front and back side */
 .flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
   
 }
 
 /* Do an horizontal flip when you move the mouse over the flip box container */
 .flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
 }
 
 /* Position the front and back side */
 .flip-card-front, .flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden; /* Safari */
   backface-visibility: hidden;
 }
 
 /* Style the front side (fallback if image is missing) */
 .flip-card-front {
   background-color: rgb(255, 255, 255);
   color: black;
 }
 
 /* Style the back side */
 .flip-card-back {
   background-color: rgb(0, 0, 0);
   color: white;
   transform: rotateY(180deg);
 }


.modal-title{
   text-align: center!important;
   
}

.figure {
   
   float: right;
}



/*---------footer -------------------*/

.list-group-item{
   border: 0;
   background-color: transparent;
}

.footer a:link{
   text-decoration: none;
}

.footer a:hover{
color: #d4af37;
}

.PFC {
   display:block;
   margin-left: auto;
   margin-right:auto;
   width: 50%;
}