::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #707070;
}

.bodoni-moda-title {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  width: 100%;
}


html,body{
  margin:0;
  height:120%;
  font-family: "Bebas Neue", sans-serif;
  scroll-behavior: smooth; 
  scrollbar-width: none;  /* Firefox */
}
a{
  text-decoration:none
}
.header{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  height:100vh;
  min-height:400px;
  min-width:300px;
  color:#eee;
  text-shadow:0 2px 6px #000a
}
.header:after{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  bottom:0;
  left:0;
  z-index:-1;
 background: linear-gradient(to bottom, rgba(0,0,0,0.12) 50%,rgba(0,0,0,1) 100%);
}
.header:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
  backface-visibility: hidden;
  scale: 1.0 1.0;
  transform: translateZ(0);
  background:#1B2030 url(/images/pexels-pixabay-274973.jpg) 0 no-repeat;
  background-size:100%;
  background-attachment:fixed;
  z-index:-2
}
@media (max-width:750px){
  
  .header:before {
    content: "";
    width: 115%;
    height: 100vh;
    left: 60px;
    scale: 2.0 2.0;
    background-color: #1B2030; 
    background-image:  url(/images/pexels-pixabay-274973.jpg); 
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment:fixed;
    z-index: -2;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
  }
}

.header a{
  color:#eee
}
.menu{
  display:block;
  width:40px;
  height:30px;
  border:2px solid #fff;
  border-radius:3px;
  position:absolute;
  right:20px;
  top:20px;
  text-decoration:none
}
.menu:after{
  content:"";
  display:block;
  width:20px;
  height:3px;
  background:#fff;
  position:absolute;
  margin:0 auto;
  top:5px;
  left:0;
  right:0;
  box-shadow:0 8px, 0 16px
}
.logo{
  border:4px solid #fff;
  border-radius:3px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  align-content:center;
  margin:20px;
  padding:10px 10px;
  font-weight:900;
  font-size:1.1em;
  line-height:1;
  box-sizing:border-box;
  width: fit-content;
}

.logo img{
  width: 60px;
  
}
.sides, .info{
  flex: 0 0 auto;
  width:50%
}
.info{
  flex-direction: column;
  width:100%;
  padding:0% 10% 0 10%;
  text-align:center; 
}
.author{
  display:inline-block;
  width:50px;
  height:50px;
  border-radius:50%;
  background:url(https://i.imgur.com/6DLCsZcb.jpg) center no-repeat;
  background-size:cover;
  box-shadow:0 2px 3px rgba(0,0,0,0.3);
  margin-bottom:3px
}
.info h4, .meta{
  font-size:0.7em
}

.list-of-services{  
  padding-top: 0;
  padding-bottom: 10%;
  padding-left: 10%;
  padding-right: 10%;
  text-align:justify;
  color:white;
}
.btn{
  color:#333;
  border:2px solid;
  border-radius:3px;
  text-decoration:none;
  display:inline-block;
  padding:5px 10px;
  font-weight:600
}

dialog {
    display: block;
    inset: 0;    
    transition: opacity .5s;
     border-radius:3px;
    padding:20px; 
    box-shadow: 0 0 10px 0 #000a;
  background:#fffd;
  border:0;
  min-width:60vw
}
 
dialog:not([open]) {
    pointer-events: none;
    opacity: 0;
}

dialog::backdrop {
  backdrop-filter: blur(0.25rem);
}
 
dialog a {
   font-size:1.4em;
  display:block;
  text-align:center;
  margin:10px 15px;
  padding:5px;
  font-weight:600;
  color:#333;
  &:hover{
    text-decoration:underline;
    color:#000
  }
}

.twtr{
  margin-top:100px
}.btn.twtr:after{content:"\1d54f";padding-left:5px}


/*///////////////////////////////////////////////////////////////*/

.content {
	background: linear-gradient( rgba(0,0,0), rgb(42, 41, 41) 100.71%)
            
}
.tilesWrap {
	padding: 0;
	margin: 50px auto;
	list-style: none;
	text-align: center;
}
.tilesWrap li {
	display: inline-block;
	width: 20%;
	min-width: 200px;
	max-width: 230px;
	padding: 80px 20px 40px;
	position: relative;
	vertical-align: top;
	margin: 10px;
	font-family: 'helvetica', san-serif;
	height: 30vh;
	background: #262a2b;
  border: 3px solid black;
  border-radius:1rem;
	text-align: left;
  box-shadow: 5px 5px 5px #1f1f1f;
  transition: all 0.3s ease-in-out;
}
.tilesWrap li h2 {
	font-size: 114px;
	margin: 0;
	position: absolute;
	opacity: 0.2;
	top: 50px;
	right: 10px;
	transition: all 0.3s ease-in-out;
}
.tilesWrap li h3 {
	font-size: 25px;
	color: #b7b7b7;
	margin-bottom: 5px;
  font-weight: 600;
}
.tilesWrap li p {
	font-size: 16px;
	line-height: 18px;
	color: #b7b7b7;
	margin-top: 5px;
}
.tilesWrap li button {
	background: transparent;
	border: 1px solid #b7b7b7;
	padding: 10px 20px;
	color: #b7b7b7;
	border-radius: 3px;
	position: relative;
	transition: all 0.3s ease-in-out;
	
	opacity: 1;
	cursor: pointer;
	overflow: hidden;
  z-index: 10;
}
.tilesWrap li button:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 120%;
	background: #b7b7b7;
	top: 0;
	opacity: 0;
	left: -140px;
	border-radius: 0 20px 20px 0;
	z-index: -1;
	
}

.tilesWrap li button:hover {
	color: #262a2b;
}
.tilesWrap li button:hover:before {
	left: 0;
	opacity: 1;
}
.tilesWrap li:hover h2 {
	top: 0px;
	opacity: 0.6;
}
:root {
  interpolate-size: allow-keywords;
}
.tilesWrap li:hover{
  max-height: fit-content;
}

/*.tilesWrap li:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	z-index: -1;
  background: #000000;
  
}*/
.tilesWrap li:after {
	content: '';
	position: absolute;
	width: 40%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, 0.02);
}



.wedding {
  box-sizing: border-box;
  background: linear-gradient( rgb(0, 0, 0),rgb(42, 41, 41) 100.71%);
}

.baptism{
  box-sizing: border-box;
  background: linear-gradient( rgb(42, 41, 41),rgba(0,0,0) 100.71%);
}

.bio{
  box-sizing: border-box;
  background: linear-gradient( rgb(42, 41, 41),rgba(0,0,0) 100.71%);
  padding-bottom: 10%;
  height: fit-content;
}

.bio .gallery-text{
  height: fit-content;
}
.bio .gallery-quote{
  padding-top: 3%;
  padding-bottom: 3%;
  padding-right: 5vw;

  text-align: justify;
}

.external {
  overflow: hidden;
  height: 100vh;
}

.gallery-text{
  height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: left;
  margin-left: 5vw;
}
.gallery-title{

  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
}
.gallery-quote{
	font-family: 'helvetica', san-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
}
.horizontal-scroll-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100vw;
  overflow-y: hidden;
  overflow-x: auto;
  padding-left: 0;
  padding-right: 0;
  height: 70vh;
  perspective: 1px; 
  scrollbar-width: none;  /* Firefox */ 
  -ms-overflow-style:none;  /* IE and Edge */
}
.img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  transform-origin: 50% 50%;
  transform: translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
  transition: 1s;
}

.slower {
  transform: translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
}
.slower1 {
  transform:  translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
}
.slower2 {
  transform:  translateZ(-.3px) scale(1.3) translateX(0%) translateY(2vh);
}
.slower-down {
  transform:  translateZ(-.2px) scale(1) translateX(0%) translateY(16vh) ;
}
.faster {
  transform:  translateZ(.15px) scale(0.8) translateX(25%) translateY(10vh) ;
}
.faster1 {
  transform:  translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh) ;
}
.fastest {
  transform:  translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh) ;
}
.vertical {
   transform:  translateZ(-.15px) scale(1.15) translateX(0%) translateY(0%) ;
}
.last {
  transform:  translateZ(-.2px) scale(1.1) translateX(0) translateY(18vh) ;
}
.scroll-info, header {
  position: absolute;
  left: 1rem;
}


.img-wrapper a {
  overflow: hidden;
  display: block;
  padding: 1vh ;
  background: #efecdb;
  box-shadow: 0 10px 30px #7272725d;
}
img {
  max-width: 45vh;
  max-height: 50vh;
  transition: .5s;
  vertical-align: top;
  filter: saturate(40%) sepia(30%) hue-rotate(5deg);
}
a:hover img {
  filter: none;
}

.contact-info {
  color: #ffff;
  box-sizing: border-box;
  background: linear-gradient(  rgba(0,0,0),rgb(42, 41, 41) 100.71%);
  font-family: 'helvetica', san-serif;
}

.contact-info .info{
  width:100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 0%;
  padding-right: 0%;
  padding-bottom: 10%;
  justify-content: center;
}

.contact-info .info div{
  min-width: 250px;
  width: 18%;
  justify-content: center;
}

.contact-info .info ul{
  list-style: none;
  justify-self: center;
  justify-items: left;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: fit-content; /* Could be more or less, depending on image size */
  height: fit-content;
}

.modal .portrait{
  height: 100vh;
  width: 66vh;
}
.modal .landscape{
  height: 100vh;
  width: 149vh;
}
@media (max-width:750px){
  .modal .portrait{
    height: 136vw;
    width: 90vw;
  }
  .modal .landscape{
    height: 60.4vw;
    width: 90vw;
  }
  .modal-content .close-button{
    height: fit-content !important;
  }
}

.modal-content .image-container{
  height: 95%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.modal-content .close-button{
  width: 100%;
  display: flex;
  justify-content: right;
  height: 5%;
  align-items: baseline;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

.social-media-links ul li a{
  height: fit-content;
  display: flex;
  flex-direction: row;
}

.social-media-links ul{
  margin: none;
}
.social-media-links li{
margin: none;
max-height: fit-content;}

#facebook h3{
  margin: 0;
  color: white;

}
#instagram h3{
  color: white;
}

.right-side{
  display: inline-flex;
  flex-direction: row;
  height: min-content;
  width: 100%;
  align-items:  center;
  justify-content: flex-end;
  margin-top: 7px;

}

.social-media-icons {
  width: fit-content;
  margin-right: 100px;
}
.social-media-icons ul{
  width: fit-content;
  margin:0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  
}
.social-media-icons ul li{
  margin-left: 10px;
  height: fit-content;
}