﻿@font-face {

    font-family: 'Microgramma D';

    src: url('../fonts/Microgramma-D-Extended-Bold.eot');

    src: url('../fonts/Microgramma-D-Extended-Bold.eot?#iefix') format('embedded-opentype'),

         url('../fonts/Microgramma-D-Extended-Bold.woff2') format('woff2'),

         url('../fonts/Microgramma-D-Extended-Bold.woff') format('woff'),

         url('../fonts/Microgramma-D-Extended-Bold.ttf')  format('truetype'),

         url('../fonts/Microgramma-D-Extended-Bold.svg#Microgramma D') format('svg');

}







@media (max-width: 320px) {

#newheader h1 { font-size: 1em;}
#newheader .display-4 { font-size: .9em;}
#newheader .lead { font-size: .8em;}
#newheader {padding: 5px 5px 5px 5px;}
	
}




@media (max-width: 505px) {
#newheader h1 { font-size: 1em;}
#newheader .display-4 { font-size: 1.7em;}
#newheader .lead { font-size: 1.6em;}
#newheader {padding: 10px 5px 10px 5px;}
}


@media (max-width: 670px) {
h1 { font-size: 3em;}

#newheader h1 { font-size: 1.1em;}
#newheader .display-4 { font-size: 1.1em;}
#newheader .lead { font-size: 1em;}
#newheader {padding: 20px 5px 20px 5px;}

}



@media (max-width: 767px) {
#newheader h1 { font-size: 1.4em;}
#newheader .display-4 { font-size: 1.2em;}
#newheader .lead { font-size: 1.0em;}

#newheader {padding: 20px 5px 20px 5px;}
.navbar-dark .navbar-brand {
 
  font-size: 1.1em;
}



	.lead{font-size:1.0rem; color:white}
	.display-4{font-size:1.4em;}
	 .carousel-item {
 height: 45vh;
 overflow: hidden;}
  #carouselExampleIndicators ol {
	display:none;
}
.titleserve h4 {
	font-size: 1.7rem;

}
}

@media (min-width: 768px) and (max-width: 991px) {
#newheader h1 { font-size: 1.6em;}
#newheader .display-4 { font-size: 1.4em;}
#newheader .lead { font-size: 1.0em;}
#newheader {padding: 20px 5px 20px 5px;}
}


} 

@media  (min-width: 992px) and (max-width: 1023px) {
}

	.overlay { top:5%;  padding:0 10%; }
	.lead{font-size:1.3rem; color: white}
	.display-4{font-size:1.8rem;}
}
.titleserve h4 {
	font-size: 1.7rem;

}


} 

@media  (max-width: 1023px) {

}

@media  (min-width: 1024px) and (max-width: 1365px) {


}


	.lead{font-size:2.5rem; color:white}
	.display-4{font-size:2.8rem;}


} 

@media (max-width: 1366px) {

	
		
	.display-4{font-size:2.8em;}
.lead{font-size:2.5em; color:white}
} 
/* Page background-image landscape for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  
 
  
  #imagecontainer1 .fixedimage1, imagecontainer3 .fixedimage1 {
  
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 632px !important;
    -moz-background-size: 1024px 632px !important; 
    -o-background-size: 1024px 632px !important; 
    background-size: 1024px 632px !important; 
  }
  #imagecontainer2 .fixedimage2 {
   
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 799px !important;
    -moz-background-size: 1024px 799px !important; 
    -o-background-size: 1024px 799px !important; 
    background-size: 1024px 799px !important; 
  }

}
/* Page background-image portrait for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
 #imagecontainer1 .fixedimage1, #imagecontainer3 .fixedimage1 {
   
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%), url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 632px !important;
    -moz-background-size: 1024px 632px !important; 
    -o-background-size: 1024px 632px !important; 
    background-size: 1024px 632px !important; 
  }
  #imagecontainer2 .fixedimage2 {
  
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 799px !important;
    -moz-background-size: 1024px 799px !important; 
    -o-background-size: 1024px 799px !important; 
    background-size: 1024px 799px !important; 
  }

}
/* Page background-image landscape for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
 #imagecontainer1 .fixedimage1, #imagecontainer3 .fixedimage1  {
   
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 632px !important;
    -moz-background-size: 1024px 632px !important; 
    -o-background-size: 1024px 632px !important; 
    background-size: 1024px 632px !important; 
  }
  #imagecontainer2 .fixedimage2 {

    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 799px !important;
    -moz-background-size: 1024px 799px !important; 
    -o-background-size: 1024px 799px !important; 
    background-size: 1024px 799px !important; 
  }

}
/* Page background-image portrait for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
  #imagecontainer1 .fixedimage1, #imagecontainer3 .fixedimage1  {
   
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 632px !important;
    -moz-background-size: 1024px 632px !important; 
    -o-background-size: 1024px 632px !important; 
    background-size: 1024px 632px !important; 
  }
  #imagecontainer2 .fixedimage2 {
   
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%),  url('../images/southwick-masonic-lodge-1024.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 1024px 799px !important;
    -moz-background-size: 1024px 799px !important; 
    -o-background-size: 1024px 799px !important; 
    background-size: 1024px 799px !important; 
  }

}

@media  (min-width: 506px) and (max-width: 767px) {
   #imagecontainer2 {
	display:none;
}
}
@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
    display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  .carousel-inner .carousel-item-end.active,
 .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}
