/*---------------------------------------
GENERIC STYLES  
---------------------------------------*/
html {
    font-family: sans-serif;
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color:rgb(0, 0, 0);
    }
    
body {
    font-size: 14px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.42857143;
    color: rgb(0, 0, 0);
    background-color: rgba(255, 255, 255, 0);
    opacity: 1;
    transition-duration: 5s;
    transition-property: opacity;
    
}

body.fade {
    opacity: 0;
    
}

.break {
    flex-basis: 100%;
    height: 0;
}

 footer,
 nav {
    display: block;
    
    
   
 }
 
 .navbar {
    font-size: 2.5em;
    height: 80px;   
    animation: moveLogo 3s; 
}



#logo{
    padding-right: 20px;
    width: 6vw;
     
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

h1 { 
line-height: 100px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: 900;
font-size: 1vw;
text-transform: uppercase;
text-align: center;
color: #4d4d4d;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

h1::after { /* This is the underline */
    display: block;
    content: "";
    height : 10px;
    width: 500px;
    background: #3b3b3b;
    margin: 5px auto 40px;
    box-shadow: 5px 2px 3px rgba(0,0,0,0.5);
}
h1:hover {
    filter: grayscale(5%); /* Adds a slightly gray filter to the h1 headings when hovered over */
    transform: scale(1.1); /* When the h1 elements are hovered over they increase in size by 1.1 */
    transition: transform 1s; 
}

h2 {
    line-height: 100px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: 900;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #4d4d4d;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
h3 {
    line-height: 50px;
    padding-bottom: 20px;
}

h4 {
    
    padding-bottom: 0px;
    font-size: 1em;
    font-weight: 900px;
    text-align: center;
}

h5 {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: 900;
font-size: 75px;
text-transform: uppercase;
text-align: center;
color: #4d4d4d;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

p {
    font-size: 1em;
    font-weight: 300;
    line-height: 30px;
    padding-bottom: 15px;
}

.text-center {
    text-align: center;
}

.heading-padding {
    padding-bottom: 40px;
}

section {
    padding-top: 10px;
    margin-top: 30px;
}

.nav-item {
    text-shadow: 5px 3px 5px rgba(0, 0, 0, 0.9);
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.9); 
    text-transform: uppercase;
    font-variant: small-caps;
    color: rgb(255, 255, 255);
    letter-spacing: 3pt;
    word-spacing: 1pt;
    font-size: .75em;
    text-align: left;
    font-family: sans-serif;
    line-height: 2;
    font-weight: 400;
    padding: 10px;
}

.navitem_1 {
    color: rgba(248, 167, 45, 0.966);

}

.container {
    padding-bottom: 50px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#project_text{
    color: white;
    text-align: center;
    font-size: 1.25vw;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col {
    padding-top: 50px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  

.clearfix:after,
.container:after,
.navbar:after {
    clear: both;
    display: table;
    content: " ";
}

.wrap {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow:hidden;
    top: 0;
    left: 0;
    text-align: center;
}
.menu-container {
    max-height: 340px;
    margin: 0% auto;
    content: " ";
    width: 100%;
    position: fixed;
    z-index: 100;
}

/*-------------------------
HOME SECTION STYLES
-------------------------*/

#home {
    background: url(../images/BG4.png) no-repeat 50% 50%;
    background-color: #6c757d;
    background-position-y: 1%;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#xmen {
    background: url(../images/xmen02.png   ) no-repeat 50% 50%;
    background-color: #6c757d;
    background-position-y: 1%;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#nova {
    background: url(../images/nova01.png) no-repeat 50% 50%;
    background-position-y: 1%;
    background-attachment: fixed;
    background-color: #6c757d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#war {
    background: url(../images/warofnova01.png) no-repeat 50% 50%;
    background-position-y: 1%;
    background-attachment: fixed;
    background-color: #6c757d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#swup {
    background: url(../images/swup01.png) no-repeat 50% 50%;
    background-position-y: 1%;
    background-attachment: fixed;
    background-color: #6c757d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#alliance {
    background: url(../images/alliance01.png) no-repeat 50% 50%;
    background-position-y: 1%;;
    background-attachment: fixed;
    background-color: #6c757d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#cardbrawl {
    background: url(../images/cardbrawl01.PNG) no-repeat 50% 50%;
    background-position-y: 1%;
    background-attachment: fixed;
    background-color: #6c757d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}

#shopheroes {
    background: url(../images/shopheroes01.png   ) no-repeat 50% 50%;
    background-position-y: 1%;
    background-position-y: 1%;
    background-attachment: fixed;
    background-color: #6c757d;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    display: block;
    height: auto;
    padding-top: 400px;
    padding-bottom: 150px;
    color: rgb(255, 255, 255);
}


.head-main {
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.9); 
    font-variant: small-caps;
    color: rgb(255, 255, 255);
    letter-spacing: 5pt;
    word-spacing: 21pt;
    font-size: 6em;
    text-align: left;
    font-family: impact, sans-serif;
    line-height: 2;
    font-weight: 900;
    padding: 10px;
}

.head-sub-main {
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.9); 
    text-transform: uppercase;
    font-variant: small-caps;
    color: rgb(255, 255, 255);
    letter-spacing: 5pt;
    word-spacing: 21pt;
    font-size: 2em;
    text-align: left;
    font-family: sans-serif;
    line-height: 2;
    font-weight: 400;
    padding: 10px;
   
}

.rsvp-text {
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.9); 
    color: rgb(255, 255, 255);
    letter-spacing: 2pt;
    word-spacing: 5pt;
    font-size: 2em;
    text-align: center;
    font-family: sans-serif;
    line-height: 2;
    font-weight: 400;
    padding: 10px;
   
}

.head-last {
    font-size: 10px;
    font-weight: 900;
    padding: 5px 20px 20px 20px;
    border: 1px dotted #fff;
    padding: 5px;
}

.paragraph {
    color: rgb(255, 255, 255);
    font-size: 2em;
    text-align: left;
    font-family: sans-serif;
    line-height: 2;
    font-weight: 100;
    padding: 2px;
}

/*--------------------------------------
CONTACT STYLES
-------------------------------------*/

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    padding-bottom: 30px;
    border-radius: 8px;
    margin: 0px auto;
    background-color: #6c757d;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.5);
}

#contact {
    background-color: #000000;
}

.reservation {
    width: 60%;
    padding: 10px;
    border-radius: 8px;
    margin: 0px auto;
    background-color: rgb(108, 117, 125);
    box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, 1) , 1px 2px 10px 0 rgba(0, 0, 0, 0.5);
}
.nav li {
    text-shadow: rgba(0, 0, 0, 0.9);
}
.reservation h2 {
    width: 70%;
    text-align: center;
    margin: 0px auto;
    color: #13161B;
    font-weight: 500;
    font-size: 1.3em;
    letter-spacing: 0pt;
    word-spacing: 0pt;
}

.reservation h2 span {
    width: 70%;
    text-align: center;
    margin: 0 auto;
    color: #13161B;
    font-weight: 900;
    font-size: 1.5cm;
    font-variant: small-caps;
    letter-spacing: .4pt;
    word-spacing: .3pt;
}

.reservation p {
    color: #13161B;
    width: 50%;
    margin: 0 auto;
}

.reservation form {
    font-size: 15px;
    outline: none;
    font-weight: 600;
    color: #8D8E8F;
    padding: 12px 12px;
    width: 70%;
    border: 1px solid #808080;
    margin: 2% auto;
    border-radius: 7px;
    background: rgb(227, 222, 222);
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.3);
    font-family: 'Raleway', sans-serif;
}

.reservation input[type="text"] {
    font-size: 15px;
    outline: none;
    font-weight: 600;
    color: #8D8E8F;
    padding: 2% 1% 2% 7%;
    width: 80%;
    border-top: 1px solid #090B0D;
    border-right: 2px solid #424549;
    border-bottom: 2px solid #424549;
    border-left: 1px solid #090B0D;
    margin: 10px 1em;
    border-radius: 7px;
    background: #13161B;    
    box-shadow: 0px 3px 0px 0px rgba(5, 5, 5, 0.15);
    font-family: 'Raleway', sans-serif;
}

.reservation input[type="text"]:hover {
    box-shadow: 0 0 18px rgba(19, 255, 118, 0.623);
}

.form-spacer {
    padding: 30px 39px;
}

.terms {
    margin: 30px 1px 0 0 ;
    margin-top: 13%;
    padding-left: 52px;
    font-size: 14px;
    line-height: 5px;
    color: #000;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: 600;
    position: relative;
    display: inline;
    float: right;
   
}

.terms:hover {
    color: rgb(177, 50, 50);
    text-decoration: underline;
}

.submit input[type="submit"] {
    color: rgb(225, 225, 225);
    cursor: pointer;
    border: none;
    font-weight: 900;
    outline: none;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    margin: 0px 3%;
    padding: 7px 0px;
    width: 25%;
    font-size: 18px;
    transition: border-color 0.3s color 0.3s background-color 0.3s;
    border-radius: 7px;
    background-color: #797a7b;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
}

.submit input[type="submit"]:hover {
    color: #000;
    background-color: #8D8E8F;
    box-shadow: inset 1px 2px 15px 0 rgba(0, 0, 0, 0.5);
}

/*--------------
FOOTER
--------------*/

#footer {
    background-color: rgba(100, 65, 0, 0.3);
    color: #000;
    text-shadow: 2px 2px 8px 0 (0,0,0,0.4);
    padding: 20px 50px 20px 50px;
    text-align: right;
}

.Pop_Up_Button {
    position: fixed; /* The element is positioned relative to the viewport and stays in the same location no matter what */
    bottom: 1.0vw; /* Positions the button slightly up from the bottom of the viewport */
    right: .5vw; /* Positions the viewport slightly right from the side of the viewport */
    width: 10vw; /* Sets the width relative to the viewport width */
    background-color: rgba(255, 255, 255, 0.178); /* Sets the background color of the button to white */
    color: rgb(255, 255, 255); /* Sets the color of the button text to black */
    font-size: 1vw;
    border: solid black; /* This makes a solid black border around the button */
    cursor: pointer; /* This changes the cursor when hovered over the button to a pointer */
    -webkit-animation: movePopup 5s; /* Animation for 5 seconds for Safari 4.0-8.0 */
    animation: movePopup 3s; /* Animation set for 5 seconds */
}

/* movePopup animation moves the button from off the right side of the screen to its fixed location on the viewport */
@keyframes movePopup {
    from {right: -40vw;} 
    to {right: .5vw;}
}

@-webkit-keyframes movePopup {
    from {right: -40vw;} 
    to {right: .5vw;}
}

@keyframes moveLogo {
    from {right: -40vw;} 
    to {right: 0vw;}
}

@-webkit-keyframes moveLogo {
    from {right: -40vw;} 
    to {right: 0vw;}
}

/* Styling for the contact form */
.form-popup {
    border: 3px solid #f0f1f0; /* Creates a solid light gray border around the contact form */
    z-index: 8; /* This z-index ensures the contact form shows above all other elements on the page */
    display: none; /* Set the display to none, we will use JavaScript to show the contact form */
    position: fixed; /* The form stays in the same location no matter what */
    bottom: .5vw; /* Slightly up from the bottom of the viewport */
    right: .5vw; /* Slightly in from the right side of the viewport */
}

/* Form styling */
.form-container {
    max-width: 49vw; /* Relative sizing of the form container - 49% of the viewport width */
    padding: 1vw; /* Adds padding between the form-popup and the form-container */
    background-color: white; 
}

/* Input fields */
.form-container input[type=text] {
    width: 100%; /* The input boxes completely fill the width of the form-container */
    padding: .93vw; /* Adds padding to the input boxes */
    margin: .6vw 0 .6vw 0; /* Adds space between the input boxes and the labels */
    border: none; /* Removes the border from the input boxes */
    background: Gainsboro; /* Sets the background color of the input boxes */
    font-size: 1vw; /* Relative font sizing based on the width of the viewport */
}

#formHeading {
  font-size: 3vw;
}

/* General styling for all buttons */
button {
    font-family: "Trebuchet MS", Optima;
    letter-spacing: .3vw; /* Adds slight spacing between the letters */
    font-size: 1.5vw; /* Relative sizing of text */
    font-weight: bold; 
    padding: 1.5vw; /* Adds padding to the text in the button */
    cursor: pointer; /* Changes the cursor to pointer over button elements */
    width: 100%; /* Sets the width of the buttons to 100% of their containers */
    height: auto; /* Allows the height to be resized depending on the content showing */
    /* Hover effect for contact and submit buttons */
}

button:hover, .form-container .btn:hover {
    color: white; /* This makes the text in the buttons white when hovered over */
    background-color: black; /* The background of the button changes to black when hovered over */
    transition-duration: 1s; /* This makes the transition last 1 second */
    -webkit-transition-duration: 1s; /* For Safari 4.0-8.0 */
    border-color: silver; /* The border turns silver when the button is hovered over */
}

/* Submit button */
.form-container .btn {
    background-color: rgb(0, 0, 0); 
    color: rgb(255, 255, 255);
    border-color: black;
    margin-bottom: 1vh; /* Adds space between the submit button and the close button */
}

/* Close button */
.form-container .cancel {
    background-color: #6c757d;;
    color: rgb(255, 255, 255);
    border-color: gray;
}

/* Styling for close button on hover */
.form-container .cancel:hover {
    color: white;
    background-color: darkred;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    border-color: black;
}
/***** End of Contact Form Styling *****/