/* To set up a new slide go to Slides >>  Add New >> Content >> Tools >> Source Code >> Paste the below, replacing values denoted by ***

<p class="image-background"><img class="slider-image" src="***IMAGE URL HERE***" alt="" width="100%" /></p>
<h1 class="header-text">***HEADER TEXT HERE***</h1>
<p class="content-text">***DESCRIPTION TEXT HERE***</p>
<p style="text-align: center;"><button class="link-button"><a href="***BUTTON LINK HERE***">***BUTTON TEXT HERE***</a></button></p>

*/

.html-slide img {
    width: 100%;
    display: none;
}
.html-slide:first-child img {
    display: block;
}

/*Makes text show up clearer on bright images*/
.anywhere-slider .image-background {
	background-color: gray;
}

.anywhere-slider .slider-image {
opacity: 0.6 !important;
min-height: 300px !important;
    width: 100%;
    object-fit: cover;
}

.anywhere-slider .slick-arrow {
    color: white !important;
    text-shadow: 0px 2px 5px black;
}

.anywhere-slider .slick-arrow:after {
    color: white !important;
    text-shadow: 0px 2px 3px black;
}

/*Styles content text to display over image and have drop shadow*/
.anywhere-slider .content-text {
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
color: white; 
text-shadow: black 0px 3px 5px; 
text-align: center; 
width: 40%;
}

/* Display differently on smaller screen size*/
@media screen and (max-width: 1200px) {
/*Hide long text*/
  .content-text{
    display: none !important;
  }

/*Make header text smaller*/
    .slider-header-text {
     font-size: 20px !important; 
     position: absolute; 
     transform: translate(-50%, -100%) !important;
     width: 90% !important;
    text-align: center !important;
    }

.anywhere-slider .link-button{
     top: 55% !important; 
}

.anywhere-slider .slick-arrow {
font-size: 12px !important;
transform: translate(-10%, -50%) !important;
top: 60% !important;
}
.anywhere-slider .slick-arrow:after {
    font-size: 9px !important;
    text-shadow: 0px 2px 3px black;
}

}

/*Styles header text to have drop shadow and display correctly over image*/
.anywhere-slider .slider-header-text {
color: white; 
text-shadow: 0px 2px 5px black;
position: absolute; 
top: 40%; 
left: 50%; 
transform: translate(-50%, -50%);
font-size: 28px;
}

/*Adds brand colour to button and display in consistent placing over image*/
.anywhere-slider .link-button{
position: absolute; 
top: 65%; 
left: 50%; 
transform: translate(-50%, -50%); 
background-color: #17eb19 !important; 
border: none; 
color: white; 
padding: 10px 27px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 16px;
}