@font-face { font-family: Poppins-Regular; src: url("/library/fonts/Poppins-Regular.otf") format("opentype"); }
@font-face { font-family: Poppins-Bold; src: url("/library/fonts/Poppins-Bold.otf") format("opentype"); }
@font-face { font-family: Fjalla; src: url("/library/fonts/FjallaOne-Regular.otf") format("opentype"); }


* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
body {margin: 0px;padding: 0px;width: 100%;height: auto;background-color: #ffffff;color: #000000;font-family: Poppins-Regular;font-size: 88%;line-height: 1.2;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
a {color: white;text-decoration: none;font-weight: normal;}
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { padding: 0px 5px 0px 5px; margin: 0px; font-size: 100%; font-weight: normal; color: #000000; }
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { font-size: 90%; background: transparent; border: solid #000000 1px; padding: 5px; color: #000000; box-sizing: border-box; font-family: Arial; }
input[type=text], input[type=password]  { height: 30px; }
input[type=button], input[type=submit] { cursor: pointer; background-color: #000000; color: #ffffff; padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
p { padding: 0px 5px 0px 5px; margin: 0px; }
strong { font-weight: normal; font-family: Poppins-Bold;}
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top;}
.hidden { display: none;}
.spacer { display: none;}


/*layout*/
.layoutheader .headertop {padding: 20px 40px; background-size:cover; position: relative; background-image: url(/images/AiGxARGJ1yq4U12bkjz51hc0dw.jpeg); background-color: black;}
.layoutheader .headertop .items {max-width: 960px; margin: 5px auto 0px auto;}
.layoutheader .headertop .headercontent {color: white;width: 41.66667%;text-align: right;}
.layoutheader .headertop .headercontent p {font-size: 20px; padding: 2px 0px; font-weight: bold; font-family: Poppins-Bold;}
.layoutheader .headertop .headercontent .email {font-size: 14px; text-decoration: underline; padding-top: 12px;}
.layoutheader .headertop .headerlogo { margin-top: 25px;}
.layoutheader .headertop .headerlogo img {width: 100%; height: auto;}
.layoutheader .headertop .socials i{font-size: 27px;margin: 0px 4px;color: white;}
.layoutheader .headertop .socials {display: flex;}

@media(min-width: 761px){

    .layoutheader .headertop .items {display: flex;}
    .layoutheader .headertop .socials {justify-content: right;}
    .layoutheader .headertop .headerlogo {width: 58.33333%; margin-top: 25px;}

}
@media(max-width: 760px){

    .layoutheader .headertop .headercontent {color: white; width: 100%; text-align: center;}
    .layoutheader .headertop .socials { justify-content: center;}

}

.layouttopmenu { background:black; padding: 20px; position: sticky; top: 0;}
.layouttopmenu .nav_simple ul {justify-content: space-evenly; display: flex; max-width: 800px; margin: 0px auto;}
.layouttopmenu .nav_simple li, .layouttopmenu .nav_simple a {text-align: center;}
.layouttopmenu .nav_simple a {color: white; transition: 0.2s;  }
.layouttopmenu .nav_simple a:hover {color: green; font-weight: bold; }

@media(min-width: 471px){

    .layouttopmenu .toggle {display: none;} 

}

@media(max-width: 470px){

    .layouttopmenu .toggle {position:absolute;top:5px;right:15px;cursor:pointer; }
    .layouttopmenu .toggleon ul{display:block; position: absolute; top: 35px; right: 0px; width: 100%; background-color: #000000; opacity: 0.8; z-index: 50; text-align: center;}
    .layouttopmenu .toggleon li{padding: 10px 0px 10px 20px;}
    .layouttopmenu svg path{fill: #ffffff; font-size: 22px;}
    .layouttopmenu .toggleoff ul{display:none;}

}
@media(max-width:440px ){

    .layouttopmenu .toggle {position:absolute;top:5px;right:15px;cursor:pointer; }

}
@media(max-width: 367px){

    .layouttopmenu .toggle {position:absolute;top:5px;right:15px;cursor:pointer; }

}

.layoutbreadcrumb_inner .content { padding: 13px; max-width: 900px; margin: 0px auto;}
.layoutbreadcrumb_inner .content .blue { color: rgba(0,169,224,1);}
.layoutbreadcrumb_inner .content .green { color: rgba(0,158,84,1);}
.layoutbreadcrumb_inner .content .dblue { color: rgba(50,52,144,1);}
.layoutbreadcrumb_inner .content i {margin-right: 10px; font-size: 23px;}
.layoutbreadcrumb_inner p {display: flex; align-items: center;}
.layoutbreadcrumb {background: white;}

@media(min-width: 400px){

    .layoutbreadcrumb_inner .content { text-align: center; display: flex; justify-content: space-between;}


}
@media(max-width: 399px){

    .layoutbreadcrumb_inner .content { text-align: center; display: flex; justify-content: center; flex-wrap: wrap;}
    

}


/*HOMEPAGE*/
.homecarousel {position: relative;overflow: hidden; margin: 0px auto 0px auto; background-color: var(--blue);clear: both; background: black; height: 520px;}
.homecarousel .carousel ul { width: 20000em; position: relative; }
.homecarousel li { float: none;position: absolute; text-align: center; background-size: cover; height: 520px; top: 0px; left: 0px;}
.homecarousel .introduction {position: absolute; z-index: 1; max-width: 550px; margin-left: auto; margin-right: auto; left: 0; right: 0;}
.homecarousel .introduction h2 {font-size: 55px;}
.homecarousel .introduction h3 {font-size: 35px; text-align: center;}
.homecarousel .introduction h3, .homecarousel .introduction h2 {font-family: Fjalla; color: white; text-align: center;}
.homecarousel .introduction p, .homecarousel .introduction a {color: white;}
.homecarousel .introduction .contactme a {background: yellow; color: black; padding: 15px 100px;}
.homecarousel .introduction .contactme a:hover {background-color: rgb(0, 158,84); color: white;}
.homecarousel .introduction .contactme {text-align: center; margin-top:30px;}
.homecarousel .introduction .introcont {font-size: 16px; line-height: 28px;}
.homecarousel .introduction .introcont a {text-decoration: underline;}

@media(min-width: 511px){

    .homecarousel .introduction {margin-top: 220px;}


}
@media(max-width: 510px){

    .homecarousel .introduction {margin-top: 100px;}


}

.homeabout {background-size: cover;}
.homeabout .util_textbox_inner {max-width: 950px;margin: 0px auto;padding: 80px 40px;}
.homeabout h2 {color: white; text-align: center; font-size: 25px; font-family: Fjalla;}
.homeabout p {font-size: 14px; color: white; line-height: 21px; max-width: 718px; margin: 0px auto; text-align: center;}
.homeabout strong {font-size: 16px;}


.homekaraoke { padding: 50px 40px;  background-size: cover;}
.homekaraoke .titletxt { color: rgb(0, 169, 224); font-size: 20px; font-family: Fjalla; margin-bottom: 10px;}
.homekaraoke .content { max-width: 300px;}
.homekaraoke .button {margin-top: 30px;}
.homekaraoke a, .homeservices a { font-size: 14px; background-color:rgb(0, 158, 84); padding: 15px 110px; color: white; }
.homekaraoke a:hover, .homeservices a:hover { background-color:rgba(253,233,45,1); color: black;}
.homekaraoke .kcontent {line-height: 21px; font-size: 14px;}


.homeservices {  background-size: cover; margin: 0px auto;   }
.homeservices h2 {color: rgb(50, 52, 144); font-size: 20px; font-family: Fjalla; margin-bottom: 20px; padding: 0px;}
.homeservices .content { max-width: 300px; }
.homeservices p {line-height: 21px; font-size: 14px;}
.homeservices li {list-style-type: disc;list-style-position: inside;}
.homeservices p { padding: 20px 0px;}
.homeservices a { padding: 15px 20px; width: 100%; display: block; text-align: center;}

@media ( min-width: 1200px )
{
    .homeservices .util_textbox_inner { margin-left: 300px; }
}
@media ( min-width: 1000px ) and ( max-width: 1200px )
{
    .homeservices .util_textbox_inner {  margin-left: 200px; }
}
@media ( min-width: 890px ) and ( max-width: 1000px )
{
    .homeservices .util_textbox_inner {  margin-left: 150px; }
}
@media ( min-width: 890px )
{
    .homeservices {  padding: 100px 40px;  height: 360px;}
    .homeservices .util_textbox_inner { position: absolute; left: 50%;  }
}
@media ( max-width: 890px )
{
    .homeservices, .homekaraoke {  padding: 20px; background-image: none !important; }
    .homekaraoke .content, .homeservices .content { max-width: 100%; text-align: center; }
    .homeservices .content ul { text-align: left; max-width: 300px; margin: 0px auto;}
    .homekaraoke h2, .homeservices h2 { text-align: center; }
    .homeservices a { max-width: 277px; margin: 0px auto; }
}

.homebookings{color:white;}
.homebookings .content {font-size: 25px;}
.homebookings .content strong:first-of-type {color:rgb(235, 46, 46); font-weight:bold;}
.homebookings .content strong:last-of-type {color: green; font-weight: bold;}

.homevideo {padding: 50px 5px; background-size: cover;}
.homevideo .imagetop {text-align: center;}
.homevideo iframe {width: 100%; height: 300px; max-width: 400px;}


/* Karaoke, Mobile DJ, Corporate Events */

.genbanner {padding: 70px 5px;}
.genbanner .titletxt {color: white; font-size: 35px; font-family: Fjalla; border: 675px; text-align: center;}
.genbanner .content { color: white; text-align: center;}
.genbanner .content a { font-size: 14px; background-color: rgba(253,233,45,1); color: black; padding: 15px 100px;}
.genbanner .content a:hover { background-color:rgba(0, 158, 84, 1); color: white; }
.genbanner .content p { max-width: 750px; margin: 15px auto; line-height: 1.8;}
.genbanner .content .nonbutton {background: none; margin: 0px; padding: 0px; color: white; text-decoration: underline;}
.genbanner .content .nonbutton:hover {background: none; margin: 0px; padding: 0px; color: white; text-decoration: underline;}

.genbanner .content .button {margin-top: 30px;}

.gencontent .content a { font-size: 14px; background-color: rgba(0, 158, 84, 1); color: white; padding: 15px 100px;}
.gencontent .content {width: 460px; line-height: 21px; padding: 0px 5px;}
.gencontent {margin: 50px 0px;}
.gencontent .content a:hover { background-color:#EB2E2E; }
.gencontent p {padding: 0px 0px 5px 0px;}
.gencontent li {list-style-type: disc; list-style-position: inside;}
.gencontent h2 {font-family: Fjalla; font-size: 20px; color: rgb(0, 169, 224); margin-bottom: 10px; padding-left: 0px;}
.gencontent .darkblue {font-family: Fjalla; font-size: 20px; color: rgb(50, 52, 144); margin-bottom: 10px;}
.gencontent img {width: 100%; height: auto;}

@media(min-width:800px){

    .gencontent .util_textbox_inner {display: flex; max-width: 945px; margin: 0px auto; justify-content: space-between;}
    .gencontent .button {margin-top: 30px;}


}
@media(max-width: 799px){

    .gencontent .util_textbox_inner {display: flex; max-width: 945px; margin: 0px auto; justify-content: center; flex-wrap: wrap;}
    .gencontent .content {margin: 10px 0px;}
    .gencontent .button {margin: 30px auto; text-align: center;}


}


/* Contact Page */

.contactdetails { text-align: center; margin: 40px 0px;}
.contactdetails .titletxt {font-size:  25px; color: rgb(0, 169, 224); font-family: Fjalla; margin: 10px 0px;}
.contactdetails p {margin: 5px 0px;}
.contactdetails i {font-size: 27px; margin: 0px 4px;}



/* Footer */
.layoutfooter p {color: white; line-height: 1.5;}
.layoutfooter .red {color: red;}
.layoutfooter .yellow {color: yellow; margin-top: 25px;}
.layoutfooter .dgreen {color: green;}

.layoutfooter .footerblack { background-color: rgb(15, 15, 15); padding: 35px 5px;}
.layoutfooter .footerblack .items {display: flex; justify-content: space-evenly; max-width: 1100px; margin: 0px auto; }
.layoutfooter .socials i{font-size: 27px;margin: 10px 4px;color: white;}

.layoutfooter .footermenu a {color: white;}
.layoutfooter .footermenu {text-align: center;}
.layoutfooter li {margin-bottom: 15px; }
.layoutfooter li a {transition: all 0.2 ease-out;}
.layoutfooter li:hover a {color: green; font-weight: bold;}
.layoutfooter .footerblack img {max-width: 220px; height: auto; width: 100%; min-width: 150px;}
.layoutfooter .footercopyright {background: rgb(50, 50, 50); padding: 10px; text-align: center;}

.layoutfooter .footercontact a {color: white; text-decoration: underline;}

@media(max-width: 570px){

    .layoutfooter .footerblack .items {flex-wrap: wrap; }


}

.callmenow {font-size: 20px; text-align: center; padding: 70px 5px; background-size: cover;}
.callmenow .lgreen {color: #009e54;}
.callmenow .lred {color: rgb(235, 46, 46);}
.callmenow .lgreen, .callmenow .lred {font-size: 25px;}
.callmenow p:nth-child(4) a { text-decoration: none; }
.callmenow p {color: white; line-height: 1.5;}
.callmenow a {text-decoration: underline;}

.layoutcredits {background: rgb(50, 50, 50); text-align: center; color: white; padding: 5px;}
.layoutcredits a{color:white;}

hr {
    background: linear-gradient(45deg,transparent 10px,currentColor 11px,transparent 12px) 0 0,linear-gradient(-45deg,transparent 10px,currentColor 11px,transparent 12px) 0 0!important;
    height: 15px!important;
    background-color: transparent!important;
    background-repeat: repeat!important;
    background-size: 20px 20px!important;
    min-height: initial!important;
    border-color: currentColor!important;
    border-width: 0!important;
    color: rgba(0,169,224,1)!important;
    max-width: 655px;
    margin-top: 20px;
}

/* Locations */

.locations h2{font-family: Fjalla; text-align: center; margin: 20px 0px; color: rgb(0, 169, 224); font-size: 25px;}
.locations p {margin: 5px 0px;}
.locations .button a { font-size: 14px; background-color: rgba(253,233,45,1); color: black; padding: 15px 100px;}
.locations .button a:hover{ background-color:rgba(0, 158, 84, 1); color: white;}
.locations .button {margin: 40px;}