/* ######################## */
/* # Fonts                #*/
/* ######################## */
@font-face {
    font-family: "Catana_One";
    src: url("/Fonts/Catana_One/CatanaOne-Regular.ttf") format("opentype");
}
@font-face {
    font-family: "Domine";
    src: url("/Fonts/Domine/Domine-VariableFont_wghtt.ttf") format("opentype");
}
@font-face {
    font-family: "Koh_Santepheap";
    src: url("/Fonts/Koh_Santepheap/KohSantepheap-Regular.ttf") format("opentype");
}
@font-face {
    font-family: "LT_Soul";
    src: url("/Fonts/LTSoul/LTSoul-Regular.otf") format("opentype");
}
@font-face {
    font-family: "LT_Soul_SemiBold";
    src: url("/Fonts/LTSoul/LTSoul-SemiBold.otf") format("opentype");
}

/*########################*/
/*# HERO PANEL           #*/
/*########################*/
.herocontainer                      {z-index:20; width:100%; height:100vh; background-image:linear-gradient(to top, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.4)),url('../Images/_Photos/Hero_Firepit.jpg?1=2'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; position:relative;}
.herocontainer a                    {font-family:LT_Soul; font-size:1.2rem}
.herocontainer nav ul               {display: flex; justify-content:space-evenly; list-style-type: none;}                    
.heropanel                          {position:absolute; box-sizing: border-box; display:flex; flex-direction:row; justify-content:center; align-items:center; bottom:0; padding:0px; width:100%; height:auto; color:white; font-family:LT_Soul; font-size:70px;}
.heropanel .title                   {position:absolute; bottom:0; width:30%; text-align:center; margin-bottom:20vh; border:0px red solid}
.herolinks                          {position:absolute; bottom:0; left:0; right:0; color:#3B413C; padding:15px;}
.herolinks ul                       {display: flex; justify-content:space-evenly; list-style-type: none;}                    

.stickyheader a                     {font-family:LT_Soul; font-size:1.2rem}

/*########################*/
/*# listen             #*/
/*########################*/
.listen                             {margin-top:0px; padding-top:80px; padding-bottom:60px; position:relative; width:100vw;} 
.listen h2                          {font-family:LT_Soul}
.listen .carouselcontainer          {border:0px red solid; display:flex; flex-direction:row; align-items:center; justify-content:space-around}
.listen .carousel                   {border:0px red solid; width:70vw; max-width:1000px; height:400px; display:flex; align-items:center; justify-content:center; overflow-x:hidden; position:relative; gap:60px}
.listen .arrow                      {width:100px; height:100px; display:flex; flex-direction:column; justify-content:center; align-items:center}
.listen .arrow .img                 {height:50px; width:auto; opacity:0.5; transition-duration:0.5s}
.listen .arrow .img:hover           {height:50px; width:auto; opacity:1; cursor:pointer}
.listen .carousel .carouselitem     {border:0px blue solid; width:300px; height:300px; text-align:center; cursor:pointer; display:flex; flex-direction: column; justify-content:space-around; align-items:center; max-width:100%; position:absolute;}
.listen .carousel .next             {transform:translateX(750px); transition-duration:0.75s}
.listen .carousel .current          {transform:translateX(0); transition-duration:0.75s}
.listen .carousel .prev             {transform:translateX(-750px); transition-duration:0.75s}
.listen .carousel .carouselitem .albumcover {height:80%; width:auto}
.listen .carousel .carouselitem .albumtitle {font-family:LT_Soul; font-size:1.5rem}
.listen .carousel .carouselitem .icon {position:absolute; opacity:0; transition-duration:0.5s; width:100%; height:auto}
.listen .carousel .carouselitem .icon:hover {position:absolute; opacity:0.3; cursor:pointer}
/*########################*/
/*# CALL TO ACTION       #*/
/*########################*/
.calltoaction                       {background-color: #1A374D; height:100vh; color:white; display:flex; box-sizing:border-box; flex-direction:column; align-items:center; margin:0 0 20px 0; padding:40px 20px 40px 20px;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)),url('../Images/_Photos/Forest_Lake.jpg?1=1'); background-attachment: fixed; background-size: cover ; background-position:left; background-repeat: no-repeat;}
.calltoaction .content              {width:700px; max-height:75vh; overflow-y:auto; border: 1px red solid; margin-left:400px; margin-top:auto; margin-bottom:auto; box-sizing: border-box; padding:10px; border:1px rgba(255, 255, 255, 0.2) solid; box-shadow:0px 20px 20px 0px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px) contrast(1) saturate(100%); backdrop-filter: contrast(1) saturate(100%) blur(5px); background-color: rgba(180, 205, 230, 0.0)}
.calltoaction h2                    {font-size:2rem; margin:20px 0 20px 0; font-family:LT_Soul}
.calltoaction p                     {padding:1.5rem; font-family:LT_Soul}
.calltoaction p a                   {color:white; font-family:LT_Soul_SemiBold; transition-duration:0.25s}
.calltoaction p a:Hover             {color:gray; font-family:LT_Soul_SemiBold; transition-duration:0.25s}
/*########################*/
/*# PORTFOLIO            #*/
/*########################*/
.portfolio                          {margin:50px 5% 50px 5%; padding-top:70px;}
.portfolio .row                     {display:flex; flex-direction: row; justify-content:center; align-items: center top; flex-wrap:nowrap; padding:50px;}
.portfolio .picture                 {width:400px; }
.portfolio .text                    {flex-grow: 1; padding:0 30px 0 30px;}
.portfolio .macscreen               {width:400px;}

/*########################*/
/*# PRICES               #*/
/*########################*/
.socials                            {margin:0px 0 0 0; padding:50px 30px 50px 30px;}
.socials h1                         {font-family:LT_Soul; font-size:30px; color:#102230; margin:0 0 10px 0;}
.socialcontainer                    {display:flex; width:100%; flex-direction:row; justify-content:space-evenly; margin-top:0px; flex-wrap:wrap; }
.socialcontainer .mediaicon         {height:100px; width:auto; opacity:0.7; margin-top:20px; padding-bottom:10px; transition-duration:0.5s}
.socialcontainer .mediaicon:hover   {height:100px; width:auto; opacity:1; margin-top:20px; padding-bottom:10px; cursor:pointer}
.socialcontainer #instagram         {height:100px; border:0px red solid; width:100px; opacity:0.5; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Instagram_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
.socialcontainer #facebook          {height:100px; border:0px red solid; width:100px; opacity:0.5; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Facebook_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
.socialcontainer #tiktok            {height:100px; border:0px red solid; width:100px; opacity:0.5; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/TikTok_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
.socialcontainer #youtube           {height:100px; border:0px red solid; width:100px; opacity:0.5; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Youtube_Colour.png); background-size:100px 100px; background-repeat:no-repeat}

.socialcontainer #instagram:hover         {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:1; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Instagram_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
.socialcontainer #facebook:hover          {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:1; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Facebook_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
.socialcontainer #tiktok:hover            {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:1; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/TikTok_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
.socialcontainer #youtube:hover           {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:1; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Youtube_Colour.png); background-size:100px 100px; background-repeat:no-repeat}

/*########################*/
/*# TESTIMONIALS         #*/
/*########################*/
.testimonials                       {background-color: #1A374D; color:white; margin:50px 0 0 0; padding:80px 20px 10px 20px;background-image:linear-gradient(to bottom,  rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.4)),url('../Images/testimonialsbg.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }
.testimonials p                     {padding:0px; margin:20px 0 0 0;}
.testimonials .footnote             {margin:20px 0 20px 0;}
.testimonials h2                    {padding-bottom: 0px;}
.testimonialcontainer               {padding-bottom:20px; border:0px red solid;display:flex; flex-direction: row; height:auto; justify-content:flex-start; align-items: flex-start; flex-wrap:nowrap; overflow:auto;}
.testimonial                        {box-sizing: border-box; padding:20px; border:1px rgba(255, 255, 255, 0.2) solid; min-width:300px; height:auto; margin:20px; box-shadow:0px 20px 20px 0px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px) contrast(1) saturate(100%); backdrop-filter: contrast(1) saturate(100%) blur(8px); background-color: rgba(180, 205, 230, 0.2)}

/*########################*/
/*# CONTACT              #*/
/*########################*/
.contact                            {margin:0px 0 0 0; padding:20px 30px 50px 30px;}
.contact h1                         {font-family:LT_Soul; font-size:30px; color:#102230; margin:0 0 10px 0;}
.contactcontainer                   {display:flex; width:100%; flex-direction:row; gap:50px; justify-content:space-evenly; align-items:center; margin-top:0px; flex-wrap:wrap; border:0px red solid}
.contactcontainer .infocontainer    {height:50px; width:auto; gap:20px; border:0px blue solid; display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
.infocontainer .imgicon             {height:100%; width:auto;}
.infocontainer .info                {font-family:LT_Soul; font-size:1.2rem}
/*#####################################################################*/
/*# Mobile Styles (Less than 900 px screen width)                     #*/
/*#####################################################################*/
@media only screen and (max-width: 1180px) 
{
    /*########################*/
    /*# HERO SECTION         #*/
    /*########################*/
    .herocontainer                  {background-size:cover; background-position:center; background-attachment:scroll; background-image:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)),url('../Images/_Photos/Hero_Firepit.jpg?1=2');}
    .herocontainer a                {font-family:LT_Soul}
    .heropanel                          {position:absolute; box-sizing: border-box; display:flex; flex-direction:row; justify-content:center; align-items:center; bottom:0; padding:0px; width:100%; height:auto; color:white; font-family:Koh_Santepheap; font-size:70px;}
    .heropanel .title                   {position:absolute; bottom:0; width:50%; text-align:center; margin-bottom:20vh; border:0px red solid}
    
    /*########################*/
    /*# listen               #*/
    /*########################*/
    .listen                         {margin-top:0px; padding-top:20px; padding-bottom:20px; position:relative} 
    .listen h2                      {font-family:LT_Soul}
    .listen .arrow                  {display:none}
    .listen .carousel .carouselitem     {border:0px blue solid; width:200px; height:200px; display:flex; flex-direction: column; max-width:100%; position:absolute; display:flex; flex-direction:row; justify-content:center; align-items:center}
    /*########################*/
    /*# CALL TO ACTION       #*/
    /*########################*/
    .calltoaction                   {background-color: black; color:white; margin:0 0 20px 0; padding:20px;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2)),url('../Images/_Photos/Fire_Look_Right.JPEG?1=1'); background-attachment: scroll; background-size: cover; background-repeat: no-repeat; }
    .calltoaction .content          {width:700px; height:auto; max-height:80%; border: 1px red solid; max-width:90vw; margin-left:0px; margin-top:auto; margin-bottom:auto; box-sizing: border-box; padding:10px; border:1px rgba(255, 255, 255, 0.2) solid; box-shadow:0px 20px 20px 0px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px) contrast(1) saturate(100%); backdrop-filter: contrast(1) saturate(100%) blur(5px); background-color: rgba(180, 205, 230, 0.0)}
    .calltoaction h2                {font-size:30px; margin:20px 0 20px 0; font-family:LT_Soul}
    .calltoaction p                 {padding:20px; font-family:LT_Soul}

    /*########################*/
    /*# PORTFOLIO            #*/
    /*########################*/
    .portfolio                      {margin:50px 0px 50px 0px; padding:20px 10px 0 10px}
    .portfolio .row                 {display:flex; flex-direction: row; justify-content:center; align-items: center; flex-wrap: wrap; padding:30px 0px 30px 0px;}
    .portfolio .row.odd             {flex-direction: column-reverse; padding-right:0px;}
    .portfolio .row.even            {flex-direction: column; padding-right:0px;}
    .portfolio .picture             {flex-grow:1; width:auto;}
    .portfolio .text                {flex-grow:1; text-align:center; padding:0 20px 0 20px}
    .portfolio .macscreen           {width:70%}
    /*########################*/
    /*# TESTIMONIALS         #*/
    /*########################*/
    .testimonials                   {background-color: black; color:white; margin:0px 0 0 0; padding:50px 20px 50px 20px;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),url('../Images/testimonialsbg.jpg'); background-attachment: fixed; background-size: auto; background-position: center; background-repeat: no-repeat; }
    
    /*########################*/
    /*# PRICES               #*/
    /*########################*/
    .socials                            {margin:0px 0 0 0; padding:20px 30px 10px 30px;}
    .socials h1                         {font-family:LT_Soul; font-size:30px; color:#102230; margin:0 0 10px 0;}
    .socialcontainer                    {display:flex; width:100%; flex-direction:row; justify-content:space-evenly; margin-top:0px; flex-wrap:wrap; gap:15px}
    .socialcontainer .mediaicon         {height:100px; width:auto; opacity:0.7; margin-top:20px; padding-bottom:10px; transition-duration:0.5s}
    .socialcontainer .mediaicon:hover   {height:100px; width:auto; opacity:1; margin-top:20px; padding-bottom:10px; cursor:pointer}
    .socialcontainer #instagram         {height:100px; border:0px red solid; width:100px; opacity:0.2; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Instagram.png); background-size:100px 100px; background-repeat:no-repeat}
    .socialcontainer #facebook          {height:100px; border:0px red solid; width:100px; opacity:0.2; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Facebook.png); background-size:100px 100px; background-repeat:no-repeat}
    .socialcontainer #tiktok            {height:100px; border:0px red solid; width:100px; opacity:0.2; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/TikTok.png); background-size:100px 100px; background-repeat:no-repeat}
    .socialcontainer #youtube           {height:100px; border:0px red solid; width:100px; opacity:0.2; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Youtube.png); background-size:100px 100px; background-repeat:no-repeat}

    .socialcontainer #instagram         {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:0.7; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Instagram_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
    .socialcontainer #facebook          {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:0.7; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Facebook_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
    .socialcontainer #tiktok            {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:0.7; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/TikTok_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
    .socialcontainer #youtube           {cursor:pointer; height:100px; border:0px red solid; width:100px; opacity:0.7; margin-top:20px; padding-bottom:10px; transition-duration:0.5s; background-image:url(/Images/Youtube_Colour.png); background-size:100px 100px; background-repeat:no-repeat}
    
    .listen .carousel .carouselitem     {border:0px blue solid; width:300px; height:300px; text-align:center; cursor:pointer; display:flex; flex-direction: column; justify-content:space-around; align-items:center; max-width:100%; position:absolute;}
    .listen .carousel .carouselitem .albumcover {height:80%; width:auto}

    /*########################*/
    /*# CONTACT              #*/
    /*########################*/
    .contact                            {margin:0px 0 0 0; padding:20px 30px 50px 30px;}
    .contact h1                         {font-family:LT_Soul; font-size:30px; color:#102230; margin:0 0 10px 0;}
    .contactcontainer                   {display:flex; width:100%; flex-direction:row; gap:50px; justify-content:space-evenly; align-items:center; margin-top:0px; flex-wrap:wrap; border:0px red solid}
    .contactcontainer .infocontainer    {height:50px; width:300px; gap:20px; border:0px blue solid; display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
    .infocontainer .imgicon             {height:100%; width:auto;}
    .infocontainer .info                {font-family:LT_Soul; font-size:1.2rem}

    /*########################*/
    /*# INPUT FIELDS         #*/
    /*########################*/
    /* iOS adds it's own look to text fields so override this to make them look the same across all devices */
    textarea,
    input[type="text"],
    input[type="button"],
    input[type="submit"]                {-webkit-appearance: none;border-radius: 0;}
}