/* Import fonts */
@import url(https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap);

/* .headerpic{position:relative;padding-top:12rem;padding-bottom:12rem;height:200px;text-align:center;} */
.headerpic{position:relative;padding-top:12rem;padding-bottom:12rem;text-align:center;}

/* Navbar settings, colour and behaviour */
.navbar{position:relative} /* This pushes the navbar above the picture, it actually looks quite nice with overlap */
.navbar-nav .nav-link{text-transform:uppercase;font-size:16px;display:inline;}
.navbar-nav .nav-item.active a{color:#ad3333;} 
.navbar-nav .nav-item .nav-link:hover{color:#ad3333}

/* Button settings */
.btn{border-radius:2; border:2px solid #ad3333; background-color: white; color:#ad3333;font-family:sans-serif;text-transform:uppercase;font-size:16px}
.btn:hover{border-radius:2; border:2px solid #ad3333;color:#ffffff;background-color:#ad3333;font-family:sans-serif;text-transform:uppercase;font-size:16px}

/* Horizontal red rule fading to the right */
hr{opacity:1;border:0;height:2px;background: linear-gradient(to right,#ad3333,#ffffff)}

/* Header font settings */
h1,h3,h4,h5,h6,section h2{color:#ad3333;font-family:'Tangerine',sans-serif;font-size:3rem;line-height:80%;}
.carousel-caption h3, .headerpic h3, .popup-title h3{font-family:'Tangerine',sans-serif;font-size:3rem;font-weight:700;color:#ffffff;}
.popup-title h4{font-family:'Tangerine',sans-serif;font-size:2rem;font-weight:700;color:#ffffff;}

/* Emoji sizes and alignments */
img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

/* Image carousel options */
.carousel-caption{top:50%} /* Shift the text up */
.carousel-item::before{background-image:linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,1) 100%);top:0;content:"";height:200px;left:0;right:0;position:absolute;} /* Vertical fade */

/* Puts a curved edge around the images in the various sections */
section img{border-radius:10px}

/* Sets link colour and behaviour for body and contact details */
section a, address a{color:#ad3333}
section a:hover, address a:hover{color:#ffffff;background-color: #ad3333}

/* Sets the colours and behaviour of the social media icons */
.fab{color:#ad3333;font-size:3rem;padding-left:4px;padding-right:4px;padding-bottom:2px}
.fab:hover{color:white;text-shadow: 0px 0px 20px #ad3333, 0px 0px 10px #ad3333, 0px 0px 1px #ad3333;} /* outline:0px solid #ad3333;} */

/* ---------------- Pop Up Gallery stuff (Bootstrap) ----------------- */

    .container-gallery
    {
    	 width: 100%;
        display: flex;
        position: relative;
        transform-style: preserve-3d;
        justify-content: center;
        padding: 25px 0;
    }

    .popup
    {
        width: 25%;
        margin: 0 -3%; 
        position: relative;
        border-radius: 10px;
        box-shadow: 0px 0px 40px -5px rgba(173, 51, 51, 0.5);
        background-size: cover;
        background-position: center;
		  text-align: center;
    }

    .popup:hover
    {
        transition: .2s;
        image-rendering: smooth;  /* Ensures better image quality when scaled up */
        transform: translateZ(5px) translateY(-20px) scale(1.5);
    }

    .popup-1,
    .popup-4
    {
        transform: translateZ(1px);
    }

    .popup-2,
    .popup-5
    {
        transform: translateZ(2px) translateY(-5px);
    }

    .popup-3
    {
        transform: translateZ(3px) translateY(-10px);
    }

    .popup-1:hover ~ .popup-2
    {
        transform: translateZ(4px) translateY(-15px);
    }

	 .popup-4
	 {
	 		order: 5;
	 }

    .popup-4:hover ~ .popup-5
    {
        transform: translateZ(3px) translateY(-15px);
    }

.popup-title {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.popup:hover .popup-title {
	visibility: visible;
	opacity: 1;
}

.popup:before 
{
  content: '';
  display: block;
  position: absolute;
  height: 0%;
  width: 100%;
  bottom: 0;
  transition: height 0.5s ease-out;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
  border-radius: 10px;
}

.popup:hover:before
{
	height: 30%;
}

/* ----------- Curvy text stuff ----------- */
path {
  fill: transparent;
}

text {
  fill: #ad3333;font-family:'Tangerine',sans-serif;font-size:2.2rem;}
}