/*!
Theme Name: Spinnaker Tower
Theme URI: https://blue2.co.uk
Author: Blue2 Digital
Author URI: https://blue2.co.uk
Description: Theme by Blue2 Digital Ltd
Version: 1.0.0
Text Domain: Spinnaker Tower
*/



.page-template-offers header{
    position: absolute;
    width: 100%;
}
.xmascontent {
background: url(https://www.spinnakertower.co.uk/wp-content/themes/spinnaker/images/xmasbg.jpg);
background-size: cover !important;
}
.xmascontent::before{
    content:'';
    width:100%;
    height:400px;
    top:0px;
    left:0px;
    position: absolute;
    background: linear-gradient(to bottom,  rgba(0,0,0,0.58) 0%,rgba(0,0,0,0) 100%);

}
body#has-no-banner .brand-image svg path, body#has-no-banner .brand-image svg rect{
    fill:#412f55 !important;
}


.socials .formcontainer{
text-align: right;
font-size: 11pt;
padding-left: 20px;
padding-bottom: 40px;
padding-right:20px;
}

@media (max-width: 768px) {
   footer .socials{
   display: block !important;
   }
   .socials .formcontainer{
   padding-left:0;
   padding-right:0;
   }
	
}






.xmasheader{
    position: relative;
}
.xmasheader::before{
    content: "";
display: block;
height: 150px;
}
.xmasfooter, .newabovefooter{
    position: relative;
}
.xmasfooter::before, .newabovefooter::before{
    content: "";
display: block;
padding-top: 12%;
}
.offerheader{
    position: absolute;
top: 0;
left:0;
width: 100%;
pointer-events:none;
}
.offerfooter{
    position: absolute;
bottom: 0;
left:0;
width: 100%;
pointer-events:none;
}
.preoffers{
    width:90%;
    max-width:680px;
    margin:auto;
    text-align: center;
    position: relative;
z-index: 1;
color:#fff;
}
.comeback{
    
color: #fff;
text-transform: uppercase;
padding: 40px;
padding-top: 20px;
font-size: 18pt;
padding-bottom: 5px;
max-width:600px;
font-weight: 700;
font-family: futura-pt-bold,sans-serif;
}
.page-template-offers .webwrap{
    background: #f5e7da;
}
#demo2{
    margin-top:0px;
}
#demo, #demo2{
    font-size: 40pt;
font-weight: 700;
margin-bottom: 25px;

}
#demo2 span, #demo span{
    background: #fff;
    display:inline-block;
    font-size: 60pt;
font-weight: 700;
line-height: 1;
padding: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 1px 4px 2px rgba(36,0,75,0.4); 
box-shadow: 1px 1px 4px 2px rgba(36,0,75,0.4);
vertical-align: middle;
margin-left:2px;
margin-right:2px;
color:#24004b;
}
#demo span{
    font-size: 45pt;
}
#demo2 div{
    font-weight:700;
    padding-top:10px;
    font-size: 16pt;
}
#demo div{
    font-weight:700;
   
    font-size: 16pt;
}
.offertitle{
    width:90%;
    max-width:450px;
    margin-bottom: 20px;
}
.remindtoggle{
    display:none;
}
.remindtoggle.on{
    display:block;
}
.remindtrigger.checked{
    display:none;
}
.remindtrigger{
    max-width: 300px;
margin: auto;
border: solid 2px #24004b;
font-weight: 700;
font-size: 16pt;
padding: 5px;
position: relative;
cursor: pointer;
color:#24004b;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b1fd93+0,3cfede+100 */
background: linear-gradient(to right,  rgba(177,253,147,1) 0%,rgba(60,254,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.remindtrigger:hover{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3cfede+0,b1fd93+99 */
background: linear-gradient(to right,  rgba(60,254,222,1) 0%,rgba(177,253,147,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#006691 !important;
}
.remindtrigger svg{
    margin-left:10px;
}
.xmasoffer{
    width:90%;
    max-width:680px;
    margin:auto;
    text-align: center;
    position: relative;
z-index: 1;
color:#fff;
}
.xmasofferinner{
    font-weight: 700;
    font-family: futura-pt-bold,sans-serif;
color: #fff;
text-transform: uppercase;
padding: 40px;
padding-top: 20px;
font-size: 16pt;
padding-bottom: 1px;
margin-bottom: 15px;
}
.xmasofferinner h2{
    color:#fff;
}
.xmasofferinner .xmassubtitle2{
    
    color: #24004b;
}
.xmassubtitle1{
    font-size:16pt;
    font-weight:700;
    margin-bottom:15px;
    display: none;
}
.getoffer{
    max-width: 300px;
margin: auto;
border: solid 2px #24004b;
font-weight: 700;
font-size: 16pt;
padding: 5px;
position: relative;
cursor: pointer;
display: block;
color:#24004b !important;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fb33e7+0,fdb398+100 */
background: linear-gradient(to right,  rgba(251,51,231,1) 0%,rgba(253,179,152,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
text-decoration: none;
}
.getoffer:hover{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdb398+0,fb33e7+100 */
background: linear-gradient(to right,  rgba(253,179,152,1) 0%,rgba(251,51,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: #fff !important;
}
.offerday{
    position:relative;
    margin-bottom: 0px;
    color:#24004b;
}
.offerday img{
    width:200px;
}
.offerday div{
    position: absolute;
width: 100%;
height: auto;
text-align: center;
font-weight: 700;
font-size: 22pt;
top: 22px;
line-height: 1;
transform: rotate(-9deg);
}
.offerday span{
    transform: rotate(8deg);
display: inline-block;
}
.bauble{
    position:absolute;
    width:3.5%;
    top:0px;
    -webkit-transform-origin: 50% 00%;
-ms-transform-origin: 50% 00%;
transform-origin: 50% 00%;
-webkit-animation: swaysubtle 6s infinite ease-in-out;
animation: swaysubtle 6s infinite ease-in-out;
-webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg)
}


.xmaslights2{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    -webkit-animation: lights 4s infinite ease-in-out;
animation: lights 4s infinite ease-in-out;
}


@-webkit-keyframes scalein {
    0% {
        
    }


    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scalein {
    0% {
        
    }


    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}





@-webkit-keyframes starrotate {
    0% {
        
    }


    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes starrotate {
    0% {
        
    }


    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@-webkit-keyframes giftshake {
    0% {
        
    }
    
    75% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    80% {
        -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    
    85% {
        -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    90% {
        -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    
    95% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes giftshake {
    0% {
        
    }
    
     75% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    80% {
        -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    
    85% {
        -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    90% {
        -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    
    95% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}
.xmasswirl{
    position: relative;
}
.xmasswirl1::before{
    content: '';
position: absolute;
background: url(https://www.spinnakertower.co.uk/wp-content/themes/spinnaker/images/swirl1.png);
width: 100%;
height: 450%;
display: block;
background-size: 100% 100%;
bottom: calc(-155%);
}
.xmasswirl2::before{
    content: '';
position: absolute;
background: url(https://www.spinnakertower.co.uk/wp-content/themes/spinnaker/images/swirl2.png);
width: 100%;
height: 340%;
display: block;
background-size: 100% 100%;
bottom: calc(-100% + 00px);
}
.xmasswirl1{
    margin-top: 60px;
}
.xmasswirl2{
    margin-bottom: 60px;
}
.page-template-offers footer, .page-template-offers footer .centered-logo img{
    background: #24004b;
}
.xmascontent{
        overflow: hidden;
    }
.xmasgift1{
    position: absolute;
top: 100%;
left: 2%;
width: 12%;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
}
.xmasstar1{
    position: absolute;
top: 70%;
left: 19%;
width: 10%;

-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: .5s; animation-delay: .5s;
}
.xmascane1{
    position: absolute;
top: 230%;
left: 10%;
width: 13%;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: .1s; animation-delay: 1s;
}
.xmascane2{
    position: absolute;
top: 70%;
right: 20%;
width: 13%;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.xmasstar2{
    position: absolute;
top: 60%;
right: 4%;
width: 10%;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 2s; animation-delay: 2s;
}
.xmasgift2{
    position: absolute;
top: 170%;
right: 10%;
width: 13%;
z-index: 1;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}
.xmasgift3{
    position: absolute;
bottom: 180%;
left: 12%;
width: 13%;
z-index: 1;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 3s; animation-delay: 3s;
}
.xmasstar3{
    position: absolute;
bottom: 140%;
right: 22%;
width: 10%;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 3.5s; animation-delay: 3.5s;
}
.xmascane3{
    position: absolute;
bottom: 200%;
right: 2%;
width: 13%;
z-index: 1;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 4s; animation-delay: 4s;
}
.xmasgift4{
    position: absolute;
bottom: 40%;
right: 10%;
width: 13%;
z-index: 1;
-webkit-animation: scalein 3s forwards ease-in-out;
animation: scalein 3s forwards ease-in-out;
transform:scale(0);
-webkit-animation-delay: 4.5s; animation-delay: 4.5s;
}
.xmastower{
    position: absolute;
bottom: 0%;
left: 3%;
width: 13%;
max-width: 180px;
}
.xmasgift1 img{
    width:100%;
    -webkit-animation: giftshake 4s infinite ease-in-out;
animation: giftshake 4s infinite ease-in-out;
}
.xmasstar1 img{
    width:100%;
    -webkit-animation: starrotate 24s infinite linear;
animation: starrotate 24s infinite linear;
}
.xmascane1 img{
    width:100%;
}
.xmascane2 img{
    width:100%;
}
.xmasstar2 img{
    width:100%;
    -webkit-animation: starrotate 24s infinite linear;
animation: starrotate 24s infinite linear;
animation-direction: reverse;
}
.xmasgift2 img{
    width:100%;
    -webkit-animation: giftshake 4s infinite ease-in-out;
animation: giftshake 4s infinite ease-in-out;
-webkit-animation-delay: 2s; animation-delay: 2s;
}
.xmasgift3 img{
    width:100%;
    -webkit-animation: giftshake 4s infinite ease-in-out;
animation: giftshake 4s infinite ease-in-out;
-webkit-animation-delay: 3s; animation-delay: 3s;
}
.xmasstar3 img{
    width:100%;
    -webkit-animation: starrotate 24s infinite linear;
animation: starrotate 24s infinite linear;
}
.xmascane3 img{
    width:100%;
}
.xmasgift4 img{
    width:100%;
    -webkit-animation: giftshake 4s infinite ease-in-out;
animation: giftshake 4s infinite ease-in-out;
}
.xmastower img{
    width:100%;
}
#wosform8 ::placeholder{
    color:#24004b;
}
#wosform8 > .row{
    display:none;
}
#wosform8 .newformleft{
    margin-bottom:20px;
}
#wosform8 .newformleft input, #wosform8 .newformright input{
    max-width:300px;
    margin: auto;
}
#wosform8 .g-recaptcha{
    display:none;
    margin-top:20px;
}
#wosform8 .g-recaptcha div{
    margin:auto;
}
#wosform8 .g-recaptcha.checked{
    display:block;
}
#wosform8 .newformbutton{
    text-align: center;
}
#wosform8 .newformbutton input{
   max-width: 300px;
margin: auto;
border: solid 2px #24004b;
font-weight: 700;
font-size: 16pt;
padding: 5px;
position: relative;
cursor: pointer;
color: #24004b;
background: linear-gradient(to right,  rgba(177,253,147,1) 0%,rgba(60,254,222,1) 100%);
margin-top: 20px;
width: 100%;
border-radius: 0;
}
#wosform8 .newformbutton input:hover{
    background: linear-gradient(to right,  rgba(60,254,222,1) 0%,rgba(177,253,147,1) 99%);
color: #006691 !important;
}
#wosform8 label{
    display:none;
}
#wosform8 input[type="text"]{
    background: #fff;
background-image: -webkit-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0));
border: 1px solid #bbb;
-webkit-border-radius: 3px;
border-radius: 3px;
display: block;
padding: .7em;
width: 100%;
}

.btn-primary{
       /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b0fd93+0,48fed5+100 */
background: linear-gradient(45deg,  #b0fd93 0%,#48fed5 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    border: 2px solid #84ff95 !important;
    color:#24004c !important;
}
.btn-primary:hover{
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#24004c+0,24004c+100 */
background: linear-gradient(45deg,  #24004c 0%,#24004c 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 2px solid #84ff95 !important;
    color:#84ff95 !important;
}


.page-template-offers .newabovefooter{
    display:none !important;
}
.page-id-36 .newabovefooter::before{
    padding-top: 5%;
}
.banner-image-with-overlay .wrapper .overlay{
    bottom:30% !important;
}
.banner-image-with-overlay .wrapper .overlay span{
    padding-left:10px;
}
.events-section #accordion .card{
    border-top: 2px solid #ff38d9 !important;
}
.btn-primary{
    border-radius:0 !important;
}
.events-section .btn-primary{
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f524ef+0,ffb79c+100 */
background: linear-gradient(45deg,  #f524ef 0%,#ffb79c 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border:0 !important;
}
.events-section .btn-primary:hover{
    
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#24004c+0,24004c+100 */
background: linear-gradient(45deg,  #24004c 0%,#24004c 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#84ff95;
border:0 !important;
}
.events-section #accordion .card-header button .text .date{
    color:#24004c !important;
}
.events-section #accordion .card-header button .toggle-wrapper svg{
    color:#84ff95 !important;
}
.events-section #accordion .card-header button .toggle-wrapper{
    background: #24004c !important;
    border: 2px solid #24004c !important;
}
.card{
    border-radius:0 !important;
}
body.home .media-content-split{
    background: #24004c !important;
    color:#fff !important;
    position: relative;
}
body.home .media-content-split::before{
    content: '';
background: url(https://www.spinnakertower.co.uk/wp-content/themes/spinnaker/images/waveswhite.png);
position: absolute;
width: 60%;
height: 400px;
right: 0px;
bottom: 40px;
background-size: 100% 100%;
opacity: 0.3;
}
body.home .cards-with-short-text{
    position: relative;
}
body.home .cards-with-short-text::before{
    content: '';
background: url(https://www.spinnakertower.co.uk/wp-content/themes/spinnaker/images/wavesnavy.png);
position: absolute;
width: 100%;
height: 300px;
right: 0px;
bottom: -60px;
background-size: 100% 100%;
opacity: 0.15;
}
body.home .media-content-split h1, body.home .media-content-split h2{
    color:#fff !important;
}
body.home .banner-image-with-overlay .btn-primary{
    background: #24004c !important;
    color:#84ff95 !important;
    border: 2px solid #24004c !important;
}
body.home .banner-image-with-overlay .btn-primary:hover{
    color:#fff !important;
}
body{
    background: #fff !important
}
body.home .events-section{
    background: #edf4f7 !important
}
.latest-news-carousel .news-item a .content-wrapper button, .latest-news-carousel .news-button{
    background: #24004c !important;
    border: 2px solid #24004c !important;
     color:#84ff95 !important;
}

.latest-news-carousel .news-item a:hover .content-wrapper button, .latest-news-carousel .news-button:hover, .image-carousel .image-carousel-buttons .image-button{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b0fd93+0,48fed5+100 */
background: linear-gradient(45deg,  #b0fd93 0%,#48fed5 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    border: 2px solid #24004c !important;
    color:#24004c !important;
}

.footer-contain a, .latest-news-carousel .title-section .primary a, .centred-text-with-ctas ul.ctas a, a{
    -webkit-text-decoration-color: #84ff95 !important;
-moz-text-decoration-color: #84ff95 !important;
text-decoration-color: #84ff95 !important;
}
.cards-with-short-text .card-col .card-wrapper .content-wrapper .card-cta{
    -webkit-transform: translate(-50%,0%) !important;
transform: translate(-50%,00%) !important;

width: auto !important;
max-width: 100% !important;
bottom: 20px !important;
}
.cards-with-short-text .card-col .card-wrapper .content-wrapper{
    width: 100% !important;
    padding: 2rem 2rem 5rem !important;
}
.media-content-split .media-col .image-wrapper.portrait{
    background-color: transparent !important;
}
.centred-text-with-ctas ul.ctas{
    border-radius: 0 !important;
    border: 2px solid #24004c !important;
}
.ticket-display-section .ticket-wrapper{
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,.16);
box-shadow: 0 8px 10px rgba(0,0,0,.16);
}















@media (max-width: 991px) {
    .hero-banner-carousel .inner-slide .title-layout {
width: 100%;
padding: 0 !important;
position: absolute;
top: auto;
-webkit-transform: translateY(-0%);
transform: translateY(-0%);
bottom: 85px;
}
.hero-banner-carousel .inner-slide .title-layout h1{
    color: #fff !important;
}
.hero-banner-carousel .inner-slide .title-layout .btn-primary{
    margin-top: 1rem !important;
}
.hero-banner-carousel .scroll-wrapper .contain{
    padding-left:15px;
}
.hero-banner-simple .main-wrapper .title-wrapper{
    top: unset !important;
bottom: 3rem;
height: unset !important;
}
body.home .media-content-split::before{
    width: 100%;
height: 350px;
right: 0px;
bottom: -40px;
}
}





@media (max-width: 800px) {
    
    .xmasswirl1::before, .xmasswirl2::before{
        width: 190%;
left: -50%;
    }
    .xmasheader::before{
content: "";
display: block;
height: 290px;
}
.hero-banner-carousel .inner-slide .media-wrapper video{
    height: 120% !important;
    margin-top: -10%;
}
}





@media (max-width: 599px) {
   .xmasheader::before{
content: "";
display: block;
height: 320px;
}

.xmasfooter::before, .newabovefooter::before{
height:160px;
}
.offerfooter{
    height:100px;
}
.preoffers, .xmasoffer{
    width:100%;
}
.preoffers p, .xmasoffer p, .xmassubtitle1{
    width:90%;
    margin-left:auto;
    margin-right:auto;
}
.xmassubtitle1{
    display: block;
    font-size: 18pt;
}
.xmassubtitle2{
    display:none;
}
#demo span{
    font-size: 35pt;
}


.xmasgift1{
    display:none;
}
.xmasstar1{
    position: absolute;
top: 66%;
left: 74%;
width: 25%;
}
.xmascane1{
    display:none;
}
.xmascane2{
    position: absolute;
top: 80%;
right: 33%;
width: 32%;
}
.xmasstar2{
    display:none;
}
.xmasgift2{
    position: absolute;
top: 70%;
right: 70%;
width: 32%;
z-index: 1;
}
.xmasgift3{
    display:none;
}
.xmasstar3{
    position: absolute;
bottom: 20%;
right: 45%;
width: 30%;
}
.xmascane3{
    position: absolute;
bottom: 150%;
right: -5%;
width: 23%;
z-index: 1;
}
.xmascane3 img{
    transform: rotate(-80deg);
}
.xmasgift4{
    bottom: 10%;
right: 5%;
width: 35%;
}
.xmastower{
    width: 22%;
}
.offertitle{
    margin-bottom: 20px;
}
.xmasoffer .offertitle{
    margin-bottom: 10px;
}
.xmasgift2{
    -webkit-animation-delay: .3s;
animation-delay: .3s;
}
.xmascane2{
    -webkit-animation-delay: .6s;
animation-delay: .6s;
}
.xmasstar1{
    -webkit-animation-delay: .9s;
animation-delay: .9s;
}
}