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

.hero {
	
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 0.4fr 0.4fr 1fr ; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b c d"
    "e f g h"
	"i i i i"
    
	  ; 
}

.herolr {
	
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 0.4fr 0.4fr 1fr 1fr; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a a b"
    "c d b"
	"c d b"
    "c d b"
	"e e e"	 
	"f g h"  
	  ; 
}
.bherob {
	
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr ; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b c "
    "a b c"
	"d e f "
    "h i j "
	  ; 
}

.royherob {
	
  background-image: url("pictures/Roy and Kimberley Snow copy.png");
	background-repeat: no-repeat;
  background-size: cover;
display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 0.2fr 1fr 1fr ; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a a a a"
    "b c z d"
	"e f z g"
    
	  ; 
}

.herolc {
	
  
display: grid; 
  grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr:  
  grid-template-rows: 55px 1fr 40px 0.8fr 40px 40px; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a a a a b b b "
    "c d e f g h i "
	"k l m m m r s "
    "k l n o p r s "
    "k q q q q q s "
	"u u u u u u u "
	  ; 
}

.herofire {
  
display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  grid-template-rows:60px 1fr 40px 40px; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b b c"
    "h i i j"
	"k r r s"
    "l m m n"
    "o p p q"
	"t v v w"	  ; 
}

.herofirebreak {
  
display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  grid-template-rows:1fr 60px 1fr 1fr; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b c"
    "d d d"
	"e f g"
    "e k g"
   	  ; 
}

.herobnb {
  
display: grid; 
  grid-template-columns: 1fr 1fr 1fr;  
  grid-template-rows:1fr 1fr 1fr; 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b c"
    "d e f"
	"d e g"
    
   	  ; 
}






.a { grid-area: a;  border: 0px solid black; /* Optional: add borders to each cell */}
.b { grid-area: b;  border: 0px solid black; /* Optional: add borders to each cell */}
.c { grid-area: c;  border: 0px solid black; /* Optional: add borders to each cell */}
.d { grid-area: d;  border: 0px solid black; /* Optional: add borders to each cell */}
.e { grid-area: e;  border: 0px solid black; /* Optional: add borders to each cell */}
.f { grid-area: f;  border: 0px solid black; /* Optional: add borders to each cell */}
.g { grid-area: g;  border: 0px solid black; /* Optional: add borders to each cell */}
.h { grid-area: h;  border: 0px solid black; /* Optional: add borders to each cell */}
.i { grid-area: i;  border: 0px solid black; /* Optional: add borders to each cell */}
.j { grid-area: j;  border: 0px solid black; /* Optional: add borders to each cell */}
.k { grid-area: k;  border: 0px solid black; /* Optional: add borders to each cell */}
.l { grid-area: l;  border: 0px solid black; /* Optional: add borders to each cell */}
.m { grid-area: m;  border: 0px solid black; /* Optional: add borders to each cell */}
.n { grid-area: n;  border: 0px solid black; /* Optional: add borders to each cell */}
.o { grid-area: o;  border: 0px solid black; /* Optional: add borders to each cell */}
.p { grid-area: p;  border: 0px solid black; /* Optional: add borders to each cell */}
.q { grid-area: q;  border: 0px solid black; /* Optional: add borders to each cell */}
.r { grid-area: r;  border: 0px solid black; /* Optional: add borders to each cell */}
.s { grid-area: s;  border: 0px solid black; /* Optional: add borders to each cell */}
.t { grid-area: t;  border: 0px solid black; /* Optional: add borders to each cell */}
.u { grid-area: u;  border: 0px solid black; /* Optional: add borders to each cell */}
.v { grid-area: v;  border: 0px solid black; /* Optional: add borders to each cell */}
.w { grid-area: w;  border: 0px solid black; /* Optional: add borders to each cell */}
.x { grid-area: x;  border: 0px solid black; /* Optional: add borders to each cell */}
.y { grid-area: y;  border: 0px solid black; /* Optional: add borders to each cell */}
.z { grid-area: z;  border: 0px solid black; /* Optional: add borders to each cell */}
.ab { grid-area: ab;  border: 0px solid black; /* Optional: add borders to each cell */}
.ac { grid-area: ac;  border: 0px solid black; /* Optional: add borders to each cell */}
.ad { grid-area: ad;  border: 0px solid black; /* Optional: add borders to each cell */}
.ae { grid-area: ae;  border: 0px solid black; /* Optional: add borders to each cell */}
.af { grid-area: af;  border: 0px solid black; /* Optional: add borders to each cell */}
.ag { grid-area: ag;  border: 0px solid black; /* Optional: add borders to each cell */}
.ai { grid-area: ai;  border: 0px solid black; /* Optional: add borders to each cell */}
.aj { grid-area: aj;  border: 0px solid black; /* Optional: add borders to each cell */}
.al { grid-area: al; border: 0px solid black; /* Optional: add borders to each cell */}
.am { grid-area: am; border: 0px solid black; /* Optional: add borders to each cell */}
.an { grid-area: an;  border: 0px solid black; /* Optional: add borders to each cell */}
.ao { grid-area: ao;  border: 0px solid black; /* Optional: add borders to each cell */}
.ap { grid-area: ap;  border: 0px solid black; /* Optional: add borders to each cell */}
.aq { grid-area: aq;  border: 0px solid black; /* Optional: add borders to each cell */}
.ar { grid-area: ar;  border: 0px solid black; /* Optional: add borders to each cell */}
.as { grid-area: as;  border: 0px solid black; /* Optional: add borders to each cell */}
.at { grid-area: at;  border: 0px solid black; /* Optional: add borders to each cell */}
.au { grid-area: au; border: 0px solid black; /* Optional: add borders to each cell */}
.ba { grid-area: ba; border: 0px solid black; /* Optional: add borders to each cell */}
.bb { grid-area: bb; border: 0px solid black; /* Optional: add borders to each cell */}
.bc { grid-area: bc; border: 0px solid black; /* Optional: add borders to each cell */}



.container { 
	
  display: grid;
  background-image:url("pictures/spill.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  grid-template-columns: 2fr 3fr 0.2fr 3fr 0.2fr 3fr .20fr 2fr;
  grid-template-rows: 250px 1.6fr 0.3fr 1.5fr 0.3fr 1.6fr 0.3fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    "lheader header header header header header header rheader"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "footer footer footer footer footer footer footer footer";
}

.lheader {
  grid-area: lheader;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; 
	
}

.header {
  grid-area: header;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; 
	
}
.rheader {
  grid-area: rheader;
	Justify-self:stretch;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}

.main {
 
  grid-area:main;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}
.menu {
  grid-area:menu;
  align-content: top;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}

.footer {
  grid-area: footer;
	
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}

.p1 {
  font-family: "Times New Roman", Times, serif;
	font-size: 100px;
	color: #A81012;
  text-shadow: 1px 1px 2px black, 0 0 25px green, 0 0 5px red;
} 

.p2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 60px;
	color: #6B0102;
  font-weight: bold;
	text-shadow: 2px 2px 4px white;
}   
.p4 {
 font-family: "Times New Roman", Times, serif;
	font-size: 40px;
	color: #6B0102;
  font-weight: bold;
	text-shadow: 2px 2px 4px white;
} 
.p5 {
  font-family: "Times New Roman", Times, serif;
	font-size: 80px;
	color: #6B0102;
  font-weight: bold;
	text-shadow: 2px 2px 4px white;
}   

.p6 {font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #840B0D;
	font-weight: bold;
} 

.vertical-menu {
  width: 300px; /* Set width*/
}

.vertical-menu a {
  
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
	
  padding: 2px; /* padding */
  text-decoration: none; /* Remove underline from links */
}
.btn-1,
.btn-1 *,
.btn-1 :after,
.btn-1 :before,
.btn-1:after,
.btn-1:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-1 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #840B0D;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 2;
  text-transform: uppercase;
}
.btn-1:disabled {
  cursor: default;
}
.btn-1:-moz-focusring {
  outline: auto;
}
.btn-1 svg {
  display: block;
  vertical-align: middle;
}
.btn-1 [hidden] {
  display: none;
}
.btn-1 {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
}
.btn-1:hover {
  color: #999;
}