html {
box-sizing: border-box;
}
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
margin: 0 auto;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: transparent;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #3399FF, 0 0 5px darkblue;
transform: rotateY(180deg);
}
.flip-card2 {
background-color: transparent;
width: 500px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card2:hover .flip-card-inner2 {
transform: rotateY(180deg);
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: #bbb;
color: black;
}
.flip-card-back2 {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
.btn-group button {
background-color: #13247b; /* Blue background */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
.book-button {
background-color: #13247B;
color: white;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.book-button:focus,
.book-button:hover {
opacity: 0.5;
}
.help-button {
background-color: #13247B;
color: white;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.help-button:focus,
.help-button:hover {
opacity: 0.5;
}
.contactus-button {
background-color: #13247B;
color: white;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.contactus-button:focus,
.contactus-button:hover {
opacity: 0.5;
}
.lifeline-button {
background-color: #13247B;
color: white;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.lifeline-button:focus,
.lifeline-button:hover {
opacity: 0.5;
}
.pricing-button {
background-color: #13247B;
color: white;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.pricing-button:focus,
.pricing-button:hover {
opacity: 0.5;
}
.home-button {
background-color: #13247B;
color: white;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.home-button:focus,
.home-button:hover {
opacity: 0.5;
}
.waiver-button {
background-color: #FFFF8D;
color: black;
padding: 8px 8px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 18px;
}
.waiver-button:focus,
.home-button:hover {
opacity: 0.5;
}
.column {
float: left;
width: 50%;
margin: auto;
padding: 20px;
}
.row: after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 650px) {
.column {
width: 50%;
display: block;
}
}
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
font-family: brush script mt;
font-size: 165%;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #3399FF, 0 0 5px darkblue;
}
.container {
padding: 8px 8px 8px 8px;
margin: 0 auto;
text-align: center;
}
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.title {
color: grey;
font-family: calibri;
font-size: 125%;
text-align: center;
}
body {
font-family: calibri;
}
p3 {
font-size: 100%;
text-align: center;
}
p4 {
font-size: 175%;
text-align center;
}
h1 {
font-size: 150%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #3399FF, 0 0 5px darkblue;
}
h2 {
font-size: 125%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #3399FF, 0 0 5px darkblue;
}
h3 {
font-family: calibri;
font-size: 200%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #3399FF, 0 0 5px darkblue;
}
.booking-button {
background-color: #13247B;
color: black;
padding: 8px 8px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 14px;
}
.booking-button:focus,
.booking-button:hover {
opacity: 0.5;
}
body {
background-image: url('https://www.momentz.info/images/vic4.png');
background-repeat: no-repeat;
background-size: cover;
}
.booking-button {
background-color: #13247B;
color: white;
padding: 40px 5px;
text-decoration: none;
border-radius: 5px;
font-family: calibri;
font-size: 20px;
justify-content: center;
display: flex;
text-shadow: 1px 1px 2px black, 0 0 25px #3399FF, 0 0 5px darkblue;
}
.centered-image {
margin: 0 auto;
width: 100%;
}
.glow {
font-family: calibri;
font-size: 125%;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0391CC, 0 0 40px #0391CC, 0 0 50px #0391CC, 0 0 60px #0391CC, 0 0 70px #0391CC;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #006ebb, 0 0 40px #006ebb, 0 0 50px #006ebb, 0 0 60px #006ebb, 0 0 70px #006ebb, 0 0 80px #006ebb;
}