@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Hegarty&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap');

/* 
------------   NOTES     ------------
font-family: "Archivo Black", sans-serif;
font-family: "BBH Sans Hegarty", sans-serif;  
font-family: "Nanum Myeongjo", serif;  
font-family: "Atkinson Hyperlegible Next", sans-serif;

background: linear-gradient(to right, #a75454, #c41919); 
width: min-content; *************   
calc(100% - 20px)
transition:2s;
scroll-margin-top: 13vh; ----corrects internal link location with a fixed element 
scroll-snap-align: start;
scroll-snap-stop: always;
*/

* { box-sizing: border-box; margin: 0; padding: 0;  }

html, body { padding: 0; margin: 0; scroll-behavior: smooth;
scrollbar-color:rgb(0, 0, 0); scrollbar-width:none;
font-family: "Archivo Black", sans-serif; 
height: 100vh;
width: 100vw; }

#structure {width:100vw; height:auto;}



@media (max-width: 2000px) 
{

body {background-color: aqua;}

}


@media (max-width: 1800px) 
{

body {background-color: green;}

}


@media (max-width: 1500px) 
{

body {background-color: rgb(0, 255, 106); }

}


@media (max-width: 2000px) 
{

body {width:100%; margin:0 auto; background-color:white;  }
body img {width:100%;}

H2 {font-size:1.8em; margin:0; padding-left:1%; padding-right:1%;}

#structure {
display:grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas:
"fixed-menu"
"site-content" ; }

    #fixed-menu {
    grid-area: fixed-menu;
    width:100%;   /* 100% to display men bar all the way across */
    height:6vh;
    z-index:99;
    position: fixed; top:0;
    font-family: "Archivo Black", sans-serif;
    background-color: #333; }

    #site-content {
    grid-area:site-content;
    display: grid;
    width:auto;
    height:auto;
    position: absolute; top:5.5vh;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
    "header"
    "pages"
    "footer"; }


/*  --------- site content HEADER ---------------- */

#site-content > #header {
display:grid;
grid-area:header;
width:auto;
height:95vh;
background-color: white;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"head1"
"head2"
"head3"
"head4"; }

#header > #head1 {
grid-area: head1;
width:auto;
height:24vh;
font-family: "Archivo Black", sans-serif;
display: flex; justify-content: center; align-items: center; text-align: center; }
#head1 img {width:auto; height:100%;}

#header > #head2 {
grid-area: head2;
width:auto;
height:auto;
background-color:white;}

#header > #head3 {
grid-area: head3;
display: grid;
width:auto;
height:40vh;
background-color: white;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas:
"subhead1"
"subhead2"
"subhead3"
"subhead4" ; }

    #head3 > .subhead1 {
    grid-area: subhead1;
    font-size:6vw;
    border-bottom:solid 1px black;
    display: flex; align-items: center; justify-content: center; text-align: center; }
    #head3 > .subhead2 {
    grid-area: subhead2;
    font-size:6vw;
    border-bottom:solid 1px black;
    display: flex; align-items: center; justify-content: center; text-align: center; }
    #head3 > #subhead3 {
    grid-area: subhead3;
    font-size:6vw;
    border-bottom:solid 1px black;
    display: flex; align-items: center; justify-content: center; text-align: center;}
    #head3 > .subhead4 {
    grid-area: subhead4;
    font-size:6vw; padding-left:1%; padding-right:1%;
    display: flex; align-items: center; justify-content: center; text-align: center;}

.redtext {font-size:40px; color:red; padding-left:2%;}

#header > #head4 {
grid-area: head4;
width:auto; 
height:30vh;
margin:0 auto;
background-color:white;
display: flex; justify-content: center; align-items: center; text-align: center; }
#head4 img {width:auto; height:150px;}

/* ------------------------------------------------------------------------------------  */

/*  --------- site content PAGES ---------------- */

#site-content > #pages {
display: grid;
grid-area: pages;
width:100%;
height:auto;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"screenprint"
"direct-to-film"
"embroidery"
"marquee" ; }


.text-section {
font-size:26px; color:#333;
display: grid; justify-content: center; text-align: center; align-items: center;}
.text-section img {
width:100%;
display: grid; justify-content: center; text-align: center; align-items: center;}

.img-container {
display:flex; justify-content: center; text-align: center; align-items: center; }

.img-container img {width:80%; margin-left:2%; margin-right:2%;}

.small-text {font-size:16px; text-align: left; color:#333;
background-color: #f1f1f1; padding:5px; margin-bottom:2%;}



#pages > #screenprint {
grid-area: screenprint;
width:100vw;
height:50vh; 
background-color:#333; color:#f1f1f1;
border-bottom:solid 1px red;
padding-left:2%; margin-right:2%;}


#pages > #direct-to-film {
grid-area: direct-to-film;
width:100vw;
height:50vh;
background-color:#777; color:#222;
border-bottom:solid 1px red;
padding-left:2%; margin-right:2%;}

#pages > #embroidery {
grid-area: embroidery;
width:100vw;
height:50vh;
background-color:#333; color:#f1f1f1;
border-bottom:solid 1px red;
padding-left:2%; margin-right:2%;}

#pages > #marquee {
grid-area: marquee;
width:100%;
height:30vh;
display: flex; justify-content: center; align-items: center; text-align: center; }

/* ------------------------------------------------------------------------------------- */

/*  --------- site content FOOTER ---------------- */

#site-content > #footer {
display:grid;
grid-area:footer;
background-color: white;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"foot1"
"foot2"
"foot3" ; }

#footer > #foot1 {
grid-area:foot1;
display: flex; justify-content: center; align-items: center; text-align: center; }

#footer > #foot2 {
grid-area:foot2;
display: flex; justify-content: center; align-items: center; text-align: center; }

#footer > #foot3 {
grid-area:foot3;
display: flex; justify-content: center; align-items: center; text-align: center; }

/* -------------------------------------------------------------------------------------- */




/* *** FLIP CONTAINER *** */

#subhead3 > #flipcontainer {
color:#999;
text-transform: uppercase;
font-size:6vw;
font-weight:bold;
margin-left:2%; }

#flip {
height:60px; 
overflow:hidden; }

#flip > div > div {
color:#fff; 
padding:4px 12px;
height:50px;
margin-bottom:45px;
display:inline-block; }

#flip div:first-child { animation: show 10s linear infinite; }

#flip div div { background:red;}
#flip div:first-child div { background:red; }
#flip div:nth-child(1) div { background:red;}
#flip div:nth-child(2) div { background:red;}
#flip div:last-child div { background:red;}

@keyframes show 
{
0% {margin-top:-360px;}
10% {margin-top:-360px;}
45% {margin-top:0px;}
55% {margin-top:0px;}
90% {margin-top:-360px;}
100% {margin-top:-360px;} 
}




/* *** BURGER MENU CODE *** */

#menu { z-index: 2; }

#menu-bar {
width: 45px;
height: 35px;
margin: 25px 0 20px 20px;
cursor: pointer;

}

.bar {
height: 5px;
width: 100%;
background-color:white;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}

#bar1 {
  transform: translateY(-4px);
}

#bar3 {
  transform: translateY(4px);
}

.nav {
  transition: 0.3s ease;
  display: none;
}

.nav ul {
  padding: 0 22px;
}

.nav li {
  list-style: none;
  padding: 12px 0;
}

.nav li a {
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.nav li a:hover {
  font-weight: bold;
}

.menu-bg,
#menu {
top: 0;
left: 0;
position: absolute;
}

.menu-bg { 
z-index: 1;
width: 0;
height: 0;
margin: 30px 0 20px 20px;
background: radial-gradient(circle, #0d1eb4, #dc052d);
border-radius: 50%;
transition: 0.3s ease;

}

.change {
display: block;
}

.change .bar { background-color: chartreuse; }

.change #bar1 { transform: translateY(4px) rotateZ(-45deg); }

.change #bar2 { opacity: 0; }

.change #bar3 { transform: translateY(-6px) rotateZ(45deg); }

.change-bg {
width: 920px;
height: 960px;
transform: translate(-60%, -30%);
}



/* -----------------------------------------------------
   Marquee Structure 
----------------------------------------------------- */
marquee { background:white; }
marquee img {width:auto; height:90px;}

.rightTI { 
background: #ff002b; white-space: nowrap;  overflow: hidden;
animation: marquee 18s linear infinite; }

.rightTI:hover { animation-play-state: paused; }

@-webkit-keyframes marquee {
  0% {text-indent: 100%;}
  100% {text-indent: -100%;}
}

.rightCSS { 
  background: #a35dc1;
  overflow: hidden;
} 
.rightCSS div {
  position: relative;
  animation: CSSright linear 18s infinite;
} 
@keyframes CSSright {
  0% { right: -100% }
  100% { right: 100% }
}
.rightCSS:hover div {
  animation-play-state: paused;
}

.rightJS { background: #ffa900; }

.rightJQ { background: #00a753; }

.li {
float: left;
margin-left:1%;
margin-right:1%;
/* padding: 1%;
margin: 1% 10%; */
border-radius: 0.5em;
box-shadow: 0 0.1em 0.5em;
width: 98%; 
height: 100px;
}




}