@charset "utf-8";
/* CSS Document */

:root {
  --red: #FF0000;
  --font-clr: #FFF;
  --bg-clr: #000;
  --gray: #5C5C5B;
  --second-gray: #D0D0CF;
}

@font-face { font-family: "Basic-Regular"; src: url("font/Canaro-Medium.ttf"); }
@font-face { font-family: "Basic-Bold"; src: url("font/Canaro-SemiBold.ttf"); }

/* -------- BODY -------- */
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body { padding: 0; margin: 0; color: var(--font-clr); font-family: 'Basic-Regular', sans-serif; font-size: 18px; background: var(--bg-clr); }

body>div.packet { height: auto; }
*, :after, :before { box-sizing: border-box; }

/* -------- BASIC CSS -------- */
h1 { font-family: 'Basic-Bold', sans-serif; color: var(--main-clr); font-size: 2.5em; text-transform: uppercase; padding: 26px 0 6px 0; margin: 0; }
h2, h3 { font-family: 'Basic-Bold', sans-serif; }
h2 { font-size: 1.25em; margin: 50px 0 6px 0; padding: 0; color: var(--red); }
h3 { font-size: 1.5em; margin: 0; padding: 0 0 22px 0; }

p { padding: 0; margin: 20px 0; font-size: 1em; line-height: 1.6em; }
a { color: var(--font-clr); text-decoration: underline; }
a:hover { text-decoration: none; }

.grid { display: flex; align-items: center; justify-content: center; max-width: 650px; margin: 0 auto; column-gap: 50px; }
.grid div { flex: 1 1 0px; }

.right-align { width: 100%; text-align: right; }

/* -------- LAYOUT -------- */
.packet { position: relative; min-height: 100%; height: 100%; margin: 0; padding: 0; }
.head { width: 100%; z-index: 100; background: var(--red); color: var(--font-clr); padding: 20px 0; }

.content { box-sizing: border-box; max-width: 1280px; margin: 0 auto; }
.content { position: relative; min-height: 10px; padding: 0 10px; }
.content img { max-width: 100%; }

.main-body { position: relative; width: 100%; min-height: 200px; padding: 0; }
.main-body .content { margin-bottom: 46px; }

.bg-footer { /*background: url("../img/fire-footer.png");*/ background: url("../assets/footer.gif"); background-repeat: no-repeat; background-position: bottom; background-size: cover; }

.footer { height: 220px; text-align: center; }
.footer p { padding-top: 50px; }

/* -------- HEAD & COVER -------- */
.head .content, .cover .logo { text-align: center; }
.head .content img { max-height: 220px; }

.logo { margin-top: 60px; margin-bottom: 10px; }
.logo img { max-width: 600px; margin-left: 30px; margin-right: 30px; }

video { height: auto; width: 100%; object-fit: cover; }

/* -------- HP -------- */
.info { text-align: center; max-width: 600px; margin: 50px auto; line-height: 1.4em; }
.form { width: 100%; background: var(--gray); padding: 30px 40px; margin-top: 30px; }

/* -------- FORM -------- */
form label { display: block; font-family: 'Basic-Bold', sans-serif; margin-top: 40px; margin-bottom: 10px; }
form input, form select { width: 100%; padding: 10px 8px; background: var(--second-gray); border: 0; outline: none; }
form button { border: none; text-transform: uppercase; padding: 20px 30px; margin-top: 40px; background: var(--red); color: var(--font-clr); font-family: 'Basic-Bold', sans-serif; font-size: 1em; cursor: pointer; transition: 0.4s ease; }
form button:hover { background: var(--second-gray); }

/* -------- RESPONSIVITY -------- */