html, body {
    width:100%;
    min-width:692px;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    font-weight:400;
    color:#231f20;
}

a {color:#231f20;}
a.active,
a:hover {color:#a400a8; text-decoration:none;}

h1, .h1 {font-size:3rem; font-weight:normal;}
h2, .h2 {font-size:2.563rem; font-weight:normal;}
h3, .h3 {font-size:2.250rem; font-weight:normal;}
h4, .h4 {}

@media (min-width: 992px) {
    html, body {font-size:16px;}
    h1 {font-size:4rem;}
}

/** bootstrap override **/
.container {width:80%; max-width:1522px; min-width:692px;}
.container--narrow {max-width:1000px;}

.btn-primary {background-color:#a400a8; border:none;}
.btn-primary:hover {background-color:#820489;}

/** common **/
.font14 {font-size:0.875rem !important;}
.font18 {font-size:1.125rem !important;}
.font21 {font-size:1.313rem !important;}
.font24 {font-size:1.5rem !important;}
.font28 {font-size:1.750rem !important;}

.bg-lightgrey {background-color:#f1f2f2;}
.bg-lightgrey p:last-child {margin-bottom:0;}

.bg-silver {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,224,226,1) 25%, rgba(219,221,223,1) 75%, rgba(255,255,255,1) 100%);
}
.bg-grey {background-color:#d1d3d4 !important;}
.bg-cyan {background-color:#7fd5db !important;}
.bg-lightblue {background-color:#bce9ec !important;}
.bg-turquoise {color:#fff; background-color:#22bfd0 !important;}
.bg-purple {color:#fff; background-color:#a400a8 !important;}

.txt-turquoise {color:#22bfd0;}
.txt-purple {color:#a400a8;}

.banner-grid .row {border-width:0 0 0 1px; border-style:solid; border-color:#bcbec0;}
.banner-grid .row > div {border-width:0 1px 1px 0; border-style:solid; border-color:#bcbec0;}
.banner-grid .row .row,
.banner-grid .row .row > div {border-width:0 1px 0 0 !important;}
.banner-grid.banner-grid--top .row {border-top-width:1px;}

.banner-grid-text p {margin:0;}

.banner-grid p {font-size:1.313rem;}

.banner-grid--home::after {content:''; width:286px; height:519px; position:absolute; bottom:-25px; left:5px; background:url('../../media/static/banner-home-phone.png') center center no-repeat; transition: 0.5s ease-in-out;}
.banner-grid--home:hover::after {animation:shake 0.5s forwards; animation-iteration-count:1;}

@keyframes shake {
    0% { transform:rotate(0deg); }
    10% { transform:rotate(-1deg); }
    20% { transform:scale(1.005) rotate(1deg); }
    30% { transform:scale(1.010) rotate(0deg); }
    40% { transform:scale(1.025) rotate(1deg); }
    50% { transform:scale(1.040) rotate(-1deg); }
    60% { transform:scale(1.055) rotate(0deg); }
    70% { transform:scale(1.070) rotate(-1deg); }
    80% { transform:scale(1.085) rotate(1deg); }
    90% { transform:scale(1.10) rotate(0deg); }
    100% { transform:scale(1.10) rotate(-1deg); }
}

.banner-grid-call {font-size:2.250rem; color:#fff; background-color:#a400a8;}
.banner-grid-phone {font-size:3rem; font-weight:300;}

.banner-grid-sub .row,
.banner-grid-sub .col {border:none !important;}

.banner-grid p,
.banner-grid address {margin:0;}


address {margin:0; line-height:1.75em;}

mark {padding:0; color:#22bfd0; background:transparent;}
mark.purple {color:#a400a8;}

@media (min-width: 992px) {
    .col-count-2 {column-count:2; column-gap:8rem;}
}

@media (min-width: 1200px) {
    .banner-grid-text {border-width:0 1px 1px 0; border-style:solid; border-color:#bcbec0;}
}

/** header **/
header {padding:1rem 0;}
header .header-logo img {max-height:100px;}
header .menu-wrapper {width:300px; height:100%; position:fixed; top:0; right:-300px; background:#fff; transition:right 0.3s ease; overflow-y:scroll; z-index:99;}
header .menu-wrapper.active {right:0;}
header ul {padding:0; list-style-type:none;}
header nav ul {border-top:1px solid #bcbec0;}
header nav ul li {margin:1rem 0; padding:1rem 0 2rem; border-bottom:1px solid #bcbec0;}
header nav a {font-size:2rem; color:#231f20; font-weight:normal;}
header nav a.active {color:#a400a8;}

header .header-social ul {display:flex; justify-content:end; padding-top:2.5rem;}
header .header-social a {font-size:2rem; color:#009fc9;}

header .header-menu-toggle {font-size:2.75rem; padding-top:2rem;}

body.mobile-menu-active {overflow-y:hidden;}
body.mobile-menu-active main::before {content:''; width:100%; height:200%; position:absolute; background-color: rgba(0, 0, 5, 0.55); z-index:98;}

@media (min-width: 992px) {
    header .header-logo img {max-height:none;}
    header .menu-wrapper {display:block; width:auto; height:auto; position:static; top:auto; left:auto; background:transparent; overflow:visible;}
    header nav a {font-size:1.150rem;}
    header nav ul {display:flex; justify-content:space-around; justify-content:start; margin:0; padding:2.5rem 0 0; border:none;}
    header nav ul li {margin-right:3rem; border:none;}

    body.mobile-menu-active {overflow:visible;}
    body.mobile-menu-active main::before {display:none;}
}
@media (min-width: 1200px) {
    header nav ul li {margin-right:3rem;}
    header .header-social a {font-size:1.75rem;}
}

/** banner **/
.banner {position:relative; height:50vh; min-height:507px; background-color:#f2f2f2; background-position:center center; background-size:cover; background-repeat:no-repeat;}
.banner-grid-call {}

.banner--home {background-image:url('../../media/static/banner-home-bg.jpg'); background-position:20% center;}
.banner--home::after {content:''; height:100%; width:100%; position:absolute; top:0; background:url('../../media/static/banner-home-overlay3.png') right bottom no-repeat; background-size:contain;}
.banner--home h1 {position:relative; text-transform:lowercase; z-index:2;}
.banner--home h1 span {color:#fff;}

.banner--contact {background-image:url('../../media/static/banner-contact-bg.jpg');}
.banner--contact h1,
.banner--events h1,
.banner--about h1,
.banner--services h1 {color:#009fc9;}

.banner--about {background-image:url('../../media/static/banner-about-bg.jpg');}
.banner--events {background-image:url('../../media/static/banner-events-bg.jpg');}
.banner--services {background-image:url('../../media/static/banner-services-bg.jpg');}

@media (min-width: 992px) {
    .banner--home::after {background-position:90% bottom;}
    .banner--home .banner-text {padding-bottom:8rem;}
}
@media (min-width: 1200px) {
    .banner--home::after {background-position:75% bottom;}
}

/** Contact **/
.contact-form {margin-top:5rem; padding:3rem 5rem;}
.contact-form input[type=text], .contact-form input[type=email],
.contact-form textarea {width:100%; margin-bottom:2rem; background-color:transparent; border:none; border-bottom:1px solid #231f20;}
.contact-form textarea {min-height:5rem;}
.contact-form .form-code {height:2.5rem; border-bottom:1px solid #231f20;}
.contact-form .form-code input {border:none;}
.contact-form input[type=submit] {width:100%; padding:0.5rem 0; font-size:1.125rem;}

/** Events **/
.banner-grid-clock span {font-size:2rem; font-weight:700;}
.banner-grid-clock span span {color:#22bfd0;}
.banner-grid-clock .col:last-child {min-height:106px; background-image:url('../../media/static/clock-ico.png'); background-position:center center; background-size:contain; background-repeat:no-repeat;}

ul.info-list {padding:0;}
ul.info-list li {display:inline-block; position:relative; padding-left:1rem; margin-bottom:2rem;}
ul.info-list li::before {content:'–'; position:absolute; left:0; top:0;}

/** Services **/
.packages-grid {margin-bottom:2.5rem;}
.packages-grid table th {text-align:right; vertical-align:middle; border:none;}
.packages-grid table thead th {border:1px solid #bcbec0; border-left:none;}
.packages-grid table thead .packages-phone-bg {position:relative; border:none;}
.packages-grid table thead .packages-phone-bg::before {content:''; width:55%; height:100%; position:absolute; top:-1px; left:55%; border-width:1px 0 0 1px; border-style:solid; border-color:#bcbec0;}
.packages-grid table td {font-size:1.750rem; text-align:center; vertical-align:middle; border:1px solid #bcbec0;}
.packages-grid table td i {color:#22bfd0;}

.packages-grid table tbody th {position:relative; font-size:0.938rem; z-index:89;}

.packages-grid table thead .packages-phone-bg div {width:344px; height:715px; position:absolute; top:35px; right:-20px; background:url('../../media/static/packages-phone-bg.png') no-repeat; background-size:cover; z-index:88;}
/*.packages-grid table:hover thead .packages-phone-bg div {transform:scale(1.10); transition: 0.5s ease-in-out;}*/

.packages-grid .table-striped tbody tr {background-color:transparent !important;}
.packages-grid .table-striped tbody tr:nth-of-type(2n+1) td {background-color:#eeefef;}
.packages-grid .table-striped tbody tr:nth-of-type(2n+1) th {padding-right:0;}
.packages-grid .table-striped tbody tr:nth-of-type(2n+1) th span {display:inline-block; padding:0.75rem; color:#fff; background-color:#22bfd0;}

.package-espresso h2 {width:220px; padding:0 3rem 1rem 0; font-size:2.875rem;}
.package-espresso div {padding:0.5rem 3rem; color:#fff; background-color:#22bfd0;}
.package-espresso div::after {content:''; width:152px; height:256px; position:absolute; bottom:-15px; right:0; background:url('../../media/static/coffee-ico.png') center center no-repeat;}

@media (min-width: 992px) {
    .packages-grid table thead .packages-phone-bg div {top:40px;}
    .package-espresso h2 {width:280px; padding:0 3rem 1rem;}
}

/** footer **/
footer {font-size:0.875rem;}
footer .footer-nav {margin:0; padding:0; list-style-type:none;}
footer .footer-nav li {line-height:1.75em;}
footer .footer-nav a {color:#231f20;}
footer .footer-nav a:hover {color:#a400a8; text-decoration:none;}

footer .footer-copyright {font-size:0.750rem;}

/** form general **/
form .float-label {position:relative; z-index:2;}
form .float-label:focus {outline:0; box-shadow:0;}
form .float-label::placeholder {color:transparent;}
form .float-label, form .float-label + label {height:2.5em; padding:0.5em; font-size:0.850rem; line-height:1.15rem;}
form textarea.float-label {height:auto;}
form .float-label + label {position:absolute; top:0; left:0; user-select:none; transition:transform .25s; transform-origin:0 0; z-index:2; cursor:text;}
form .float-label:required + label::before {content:'* ';}
form .float-label:focus + label,
form .float-label:not(:placeholder-shown) + label {height:2em; transform:translate(1%, -90%) scale(0.8); z-index:3;}
form textarea.float-label:focus + label,
form textarea.float-label:not(:placeholder-shown) + label {transform:translate(1%, -90%) scale(0.8);}
form .float-label:invalid {}