/*------------------------------------------
Document: responsive.css (Style Sheet)
Dated 	: September 2025
Author	: Antony Yesudas
Company : St. Thomas Conference Santhome (ssvpsanthome.com)
Purpose	: Mobile/iPad/Tab/Laptop Responsiveness
------------------------------------------------*/

/*___________________ LARGE SCREEN  _______________________*/


@media only screen and (max-width: 1440px) {

  body {
    border-left: 1px solid orange;
  }
  .navbar-nav li {
	  padding: 8px 15px;
  }
}


@media only screen and (max-width: 1350px) {
  
  body {
    border-left: 0px solid green;
  }
  .navbar-nav li {
	  padding: 8px 10px;
  }
  
  .event h5 {
	  width: 90%;
  }

}


/*____________________ DESKTOPS  __________________________*/


@media (max-width: 1200px) {

  body {
    border-left: 0px solid blue;
  }
  
  #WebMenu {
	  padding: 0px 20px;
  }
  .navbar-nav li {
	  padding: 8px 5px;
  }
  
  #patrons label {
	  width: 85%;
	  position: static;
  }
  
  .event {
	  width: 500px;
	  margin: 0px auto 40px auto;
  }
  
}


/*____________________ IPAD/TABLET  __________________________*/

@media only screen and ( max-width: 992px ) {

  body {
    border-left: 0px solid yellow;
  }
  
  h1 {
	  font-size: 23pt;
  }
  
  #about {
	  background-image: none;
  }
  
  .st-vincent,
  .ozanam  {
	  text-align: center;
  }
}


/*____________________ SMART PHONES  _________________________*/

@media only screen and ( max-width: 767px) {
  
  body {
    border-left: 0px solid red;
  }
  .logo {
	  text-align: center;
		margin-bottom: 20px;
  }
  h1 {
	  text-align: center;
  }
  .subtitle {
	  position: relative;
	  margin-top: 40px;
	  right: 0;
  }
}

/*____________________ MOBILES  __________________________*/

@media only screen and ( max-width: 576px) 
{
  body {
    border-left: 0px solid blue;
  }
  
  #patrons img {
	  width: 90%;
  }
  
  .event {
	  width: 90%;
  }
  
}


/*____________________ TINY DEVICES  __________________________*/

@media only screen and (max-width: 425px) {

  body {
    border-left: 0px solid yellow;
  }
  
  
}

@media only screen and (max-width: 380px)
{
}

@media only screen and (max-width: 320px)
{
}