/*########################*/
/*# HERO PANEL           #*/
/*########################*/
body {overflow-x:hidden;}
.herocontainer                      {border:1px #c2a4ea solid; border-bottom:0; z-index:11; width:100%; height:580px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),url('../Images/Header_RollerDisco.png'); background-attachment:fixed; background-position:center top; background-size: 100%; position:relative; background-repeat: no-repeat; background-color:#c2a4ea}
.heropanel                          {position:relative; top:300px;padding-left:20%; width:; min-height:400px;}
.heropanel h1                       {font-size:5rem; line-height:5.7rem; text-align: left; border:0px red solid; width:100%; color:white;}
.herolinks                          {position:absolute; bottom:0; left:0;right:0; color:#3B413C; padding:15px;}

/*########################*/
/*# PROMO                #*/
/*########################*/
.section                {display:flex; width:90%; max-width:1500px; justify-content: center;}

.promo                  {border:0px red solid; width:70%; margin:0px 0 0px 0; padding-top:0px; position:relative; background-color:white; min-height:auto; display:flex; flex-direction: column;}    
.videocontainer         {width:100%; height:auto; position:relative;}
.videoframe             {width:100%; height:auto; position:relative;top:0; left:0; z-index:1;}
.video                  {width:99%; height:auto; position:absolute; top:0; left:0; z-index:0;}
.infocontainer          {border:0px red solid; position:relative;  padding:50px 20px 0 20px; color:black; display:flex; flex-direction: column; align-items: center; justify-content: center;}


/*########################*/
/*# MAP                  #*/
/*########################*/
.mapcontainer                       {min-height:200px; background-color:#f4f4f4; margin:0px 0 0px 0; padding:110px 0 20px 0;}        
.mapcontainer h1                    {font-size:30px; color:#102230; margin:0 0 20px 0;}        
.mapframe                           {width:900px; height:600px;}



/*#####################################################################*/
/*# Mobile Styles (Less than 900 px screen width)                     #*/
/*#####################################################################*/
@media only screen and (max-width: 1024px) 
{
    .herocontainer {height:470px; border:1px white solid}
}
@media only screen and (max-width: 900px) 
{
    /*########################*/
    /*# HERO SECTION         #*/
    /*########################*/
    .heropanel                      {margin:0px 20px 20px 20px; padding-bottom:90px; width:auto; height:400px; box-sizing: border-box;top:0px;padding-left:0%;}
    .herocontainer                  {background-size:cover;background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),url('../Images/Features_Disco.jpg');}
    .heropanel h1                   {color:white; width:100%; text-align: center; border:0px red solid; left:0;}
    
    /*########################*/
    /*# PROMO                #*/
    /*########################*/
    .section                {display:flex; width:100%; justify-content: center; flex-direction:column;}

    .promo                  {border:0px blue solid; width:100%; margin:0px 0 0px 0; padding-top:0px; position:relative; background-color:white; display:flex; flex-direction: column;}
    .videocontainer         {width:100%; height:auto; position:relative;}
    .videoframecontainer    {border:0px green solid; }
    .videoframe             {border:0px red solid; width:100%; height:auto; top:0; left:0; z-index:1; position:relative}
    .video                  {width:99%; height:auto; position:absolute; top:0; left:0; z-index:0;}

    .infocontainer          {border:0px red solid; position:relative; width:100%; padding:10px 20px 0 20px; color:black; display:flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box;}

    /*########################*/
    /*# 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;}
}
@media only screen and (max-width: 500px) 
{
    .herocontainer          {height:180px; border:1px white solid;}    
    .heropanel              {top:15px;}
    .heropanel h1           {font-size:2.5rem; line-height:2.5rem; }
    
}