/*------------------------------------------
Document: santhome.css (Style Sheet)
Dated	  : September 2025
Author	: Antony Yesudas
Company	: St. Thomas Conference Santhome (ssvpsanthome.com)
Purpose	: Web Style
--------------------------------------------*/
@charset "utf-8";

* {
  margin:0;
  padding:0;
  border:0;
  box-sizing: border-box;
}

*:focus, button:focus {
  outline:none;
  box-shadow:none;
  box-sizing: border-box;
}

html {
	overflow-x: hidden;
}


/*___________________ FONTS ______________________*/

@font-face {
  font-family:"Bahnschrift-Bold";
  src:url("../fonts/Bahnschrift-Bold.ttf") format("truetype");
}

@font-face {
  font-family:"SourceSans-Bold";
  src:url("../fonts/SourceSansPro-Bold.ttf") format("truetype");
}

@font-face {
  font-family:"SourceSans-SemiBold";
  src:url("../fonts/SourceSansPro-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family:"SourceSans-Light";
  src:url("../fonts/SourceSansPro-Light.ttf") format("truetype");
}

@font-face {
  font-family:"GillSansMT-Bold";
  src:url("../fonts/GillSansMT-Bold.ttf") format("truetype");
}

@font-face {
  font-family:"GillSansMT-Regular";
  src:url("../fonts/GillSansMT-Regular.ttf") format("truetype");
}

h1, h2, h3, h4, h5, h6 {
}

h1 {
  /* page heading */
  font-family:"Bahnschrift-Bold";
  font-weight: bold;
  color: #0075bd;
  font-size: 25pt;
}

h2 {
  /* sliders/products */
  font-family:"GillSansMT-Bold";
  font-size: 50pt;
}

h3 {
  /* section header */
  font-family:"GillSansMT-Bold";
  font-size: 30pt;
  margin-bottom: 20px;
}

h4 {
  /* element title */
  font-size: 30pt;
}

h5 {
  /* sub header */
  font-size: 20pt;
}

h6 {
  /* customized */
}

font {
}

span {
}

em {
}

small {
  display:block; font-size:7pt;
}

strong {
}

p {
  line-height:1.5;
  padding-bottom: 10px;
  text-align:justify;
  clear:both;
}

blockquote {
  /* testimonial quotes */
  font-style:italic; line-height:16pt;
  padding-bottom:12px;
}

a, a:hover {
  color: #FFFFFF;
  text-decoration:none;
}


/*_________________ POINTS ___________________*/

ul, li {
  list-style:none;
  margin:0;
  padding:0;
}


/*___________________ PAGE ______________________*/

body {
  font-family:"SourceSans-Light";
  font-size: 15pt; color: #000000;
}

/*___________________ HEADER ______________________*/

header {
	padding: 20px 0px;
}

.mail {
	text-align: right;
}
.mail a {
  color: #000;
}



/*___________________ NAV MENU ______________________*/

.navbar-collapse  {
  justify-content: flex-end;
}

.navbar {
	float: right;
	margin-top: 25px;
}

#WebMenu {
    padding: 0px 40px;
	background-color: #03619f !important;
}

.navbar-nav ul {
	text-align: right;
}

.navbar-nav li {
	display: inline-block;
	font-family:"Bahnschrift-Bold";
	text-align: right;
	padding: 8px 25px;

}

.nav-link {
  color: #FFF !important;
}



/*___________________ SLIDER ______________________*/

#hero-slider {
}


/*
#patrons::after {
	content: "";
    background-color: rgba(233, 233, 233, 0.8);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
*/

.slider {
	background: #0070BA;
	background: linear-gradient(90deg,rgba(0, 112, 186, 1) 0%, rgba(255, 255, 255, 0.8) 100%);	
	position: relative;
}

.slider h6 {
	font-family:"Bahnschrift-Bold";
	font-weight: bold;
	text-transform: uppercase;
    font-size: 30pt;
	color: #76cdfa;
	margin-bottom: 50px;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.caption {
	font-family:"GillSansMT-Bold";
	font-size: 45pt;
	color: #FFF;
	border-left: 8px solid #f4bb0e;
	padding-left: 20px;
	line-height: 1;
}

.subtitle {
  font-family:"GillSansMT-Regular";
    font-size: 26pt;
	color: #FFF;
	position: absolute;
	top: 70%;
	right: 5%;
}

#slider-hep-money {
	padding: 200px 0px 300px 0px;
	background-image :url('../images/slider/Help-Money.png');
	background-repeat: no-repeat;
	background-position: right;
}

/*___________________ CAPTION ______________________*/

.textflash {
  animation: textflash 1s linear;
  animation-fill-mode: forwards;
}
@keyframes textflash {
  100% {
    opacity: 1;
  }
}
.textshow {
  opacity:1 !important;
}
.texthide {
  opacity:0 !important;
}



/*___________________ ABOUT ______________________*/

#about {
	padding: 100px 0px 120px 0px;
	background-image :url('../images/Santhome-Church-Adoration-slanted.jpg');
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}

.universal {
	background-color: #FFF;
	padding: 12px 20px;
	border-left: 8px solid #f4bb0e;

	font-family:"GillSansMT-Bold";
	color: #033b60;
	font-size: 23pt;
}


/*___________________ SERVICES ______________________*/

#services {
	padding: 110px 0px 120px 0px;
}

#services h3 {
	color: #FFF;
	margin-bottom: 60px;
}

.activity {
	text-align: center;
}

.activity h5 {
  font-family:"GillSansMT-Bold";
  color: #86d3fa;
  font-size: 23pt;
}

.activity img {
	margin: 20px 0px;
}

.activity p {
	color: #FFF;
	text-align: center;
}


/*___________________ PATRONS ______________________*/

#patrons {
	background-image :url('../images/St.Vincent-Mission.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#patrons .screen-glass {
	background-color: rgba(233, 233, 233, 0.9);
	padding: 100px 0px 70px 0px;
}

#patrons h3 {
	margin-bottom: 50px;
}

#patrons p {
	font-size: 18pt;
	padding-top: 20px;
}

#patrons label {
	font-family:"GillSansMT-Bold";
	background-color: #FFF;
	color: #033b60;
	font-size: 20pt;
	text-align: center;
	padding: 15px 10px;
}

.st-vincent {
	text-align: right;
	position: relative;
}

.st-vincent label {
	width: 60%;
	position: absolute;
	 top: 57%;
    right: 20%;
}

.ozanam {
	position: relative;
}

.ozanam label {
	width: 60%;
	position: absolute;
	 top: 60%;
    right: 20%;
}

/*___________________ EVENTS ______________________*/

#events {
	padding: 100px 0px 130px 0px;
}

#events h3 {
	margin-bottom: 40px;
}

.event {
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	border-left: 10px solid #f4bb0e;
	position: relative;
}

[data-img="old-age-home"] {
	background-image :url('../images/events/old-age-home/old-group-visit.jpg');
}

.event h5 {
	font-family:"GillSansMT-Bold";
	background-color: #FFF;
	padding: 15px 10px;
	width: 75%;
	text-align: center;
	position: absolute;
	top: 77%;
	right: 0;
}

.event label {
	color: #FFF;
	padding: 6px 15px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 68%;
	right: 0;
}


/*___________________ MEMBERS ______________________*/

#members {
	padding: 100px 0px 90px 0px;
}

#members h3 {
}

.member {
	text-align: center;
	margin: 30px 0px;
}

.member img {
	padding-bottom: 15px;
}

.member h5 {
  font-family:"GillSansMT-Bold";
  color: #FFFFFF;
}

.member b {
  font-family:"SourceSans-SemiBold";
}
	

/*___________________ HOURS ______________________*/

#office {
	padding: 60px 0px;
}

.working-hours {
	padding-left: 30px;
}

.feasts {
	border-left: 5px solid #0465a5;
	padding-left: 40px;
}

.feasts li {
	padding: 5px 0px 0px 10px;
}

.feasts li::before {
	content: "◾";
	padding-right: 8px;
}



/*___________________ FOOTER ______________________*/

footer{
    background-color: #3a3a3a;
    padding-top: 50px;
	color: #FFFFFF;
}

/*------ Address ------*/

.address {
  margin: 30px 0px 50px 0px;
}

.address h6 {
  font-family:"SourceSans-Bold";
  font-size: 20pt;
  margin-bottom: 20px;
}

.location {
	border-left: 6px solid #f4bb0e;
	padding-left: 15px;
	line-height: 1.7;
}

/*------ Quick Links ------*/

.links {
  color: #FFFFFF;
  margin-top: 20px;
}

.links li {
	padding: 10px 0px;
}

/*------ Address ------*/

.contact h6,
.social-bar strong {
	font-family:"SourceSans-SemiBold";
	font-size: 17pt;
	color: #c2bbbb;
}

#phone {
	margin-top: 30px;
	background: url('../icon/phone.png') no-repeat;
	background-size: 45px 44px;
	padding-left: 60px;
}

#email {
	background: url('../icon/email.png') no-repeat;
	background-size: 45px 32px;
	padding-left: 60px;
	margin: 40px 0px;
}

/*------ Social Bar ------*/

.social-bar {
	margin-bottom: 50px;
}

.social-bar a {
  font-size: 18pt;
  color: #FFFFFF;
  margin-left: 15px;
  transition: color 0.5s;
}

.social-bar a:hover {
  color: #909090;
}

/*------ Copyright ------*/

.copyright {
	background-color: #000;
	padding: 25px 0px;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: center;
}


/*_________________ WEB LOADER ___________________*/

#screenloader {
	position:fixed;
	z-index: 99;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgb(255 255 255 / 95%);
}

#circle {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #0070ba;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spinner 2s linear infinite;
  position: fixed;
  top: 40%;
  left: 46%;
}

@keyframes spinner { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}



/*_________________ MISCELLANEOUS ___________________*/

p.last, .last {
  padding-bottom:0px;
}

.blue {
  color: #033b60;
}

section[data-bg="blue"] {
  background-color: #0070ba;
}

.yellow {
	background-color: #f4bb0e;
}

section[data-bg="ash"] {
  background-color: #004481;
}