@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&display=swap'); /* Phone Number Font */
/* 
------------   NOTES     ------------
font-family: "Merriweather", serif;
font-family: "BBH Hegarty", 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;
scroll-snap-type: y proximity;
scroll-snap-align: start;

Gradient Site : https://cssgradient.io/
*/

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

html, body {
width:100%; margin:0 auto;
height:auto;
padding: 0; margin: 0;
scroll-behavior: smooth;
scrollbar-color:rgb(0, 0, 0); scrollbar-width:none;
/*scroll-snap-type: proximity;
scroll-snap-type: y proximity; */
scroll-snap-type: mandatory;
scroll-snap-type: y mandatory;
scroll-snap-points-y: repeat(100vh);
font-family: "Merriweather", serif;}

#structure { width:100%; margin:0 auto;  }



@media (max-width: 800px) 
{

body {width:auto}

#structure {
display:grid;
width:100%; margin:0 auto;
height:auto;
grid-template-columns: auto;
grid-template-rows: 6vh auto auto auto;
grid-template-areas:
"fixed-menu"
"homepage"
"pages"
"footer" ; }

/* -----------------FIXED MENU----------------------- */

#structure > #fixed-menu {
grid-area: fixed-menu;
display: grid;
width:100%;   /* 100% to display men bar all the way across */
height:6vh;
z-index:99;
position: fixed; top:0;
border-bottom:solid 2px black;
background-color: #222;
grid-template-columns: 125px auto;
grid-template-rows: auto;
grid-template-areas:
"fixed-menu-left fixed-menu-right" ;}

#fixed-menu > .fixed-menu-left {
grid-area:fixed-menu-left;
width:auto;
height:auto;
background-color: #555;
display: flex; justify-content: center; text-align: center; align-items: center; }

#fixed-menu > .fixed-menu-right {
grid-area:fixed-menu-right;
width:auto;
height:auto;
background-color: #555;
display: flex; justify-content: center; text-align: center; align-items: center; }
.fixed-menu-right a {font-family: "BBH Hegarty", sans-serif; color:#f1f1f1; font-size: 28px;}

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

#structure > #homepage {
display:grid;
grid-area:homepage;
width:auto;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
margin-bottom:10%;
grid-template-columns: auto;
grid-template-rows: 30vh 35vh 10vh ;
grid-template-areas:
"head1"
"head3"
"head4"; }

#homepage > #head1 {
grid-area: head1;
width:100%;
display: flex; justify-content: center; align-items: center; text-align: center; }
#head1 img {height:15vh; object-fit: cover; overflow: hidden;}

#homepage > #head2 {
grid-area: head2;
width:auto; height:0vh;
display: flex; align-items: center; justify-content: center; text-align: center;}
#head2 a {font-size: 18px; color:#333; padding:2%;}

#homepage > #head3 {
grid-area: head3;
display: grid;
width:auto;
height:auto;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas:
"subhead1"
"subhead2"
"subhead3"
"subhead4" ; }

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

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

#homepage > #head4 {
grid-area: head4;
width:auto;
height:auto;
margin-bottom:5%; 
margin:0 auto;
display: flex; justify-content: center; align-items:center; text-align: center; }


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

#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"
"graphicdesign"
"vehicle"
"webdesign"
"marquee" ; }


#pages > #screenprint {
grid-area: screenprint;
display: grid;
width:100vw;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"pages-heading"
"pages-image"
"pages-text"
"pages-small-text"; }

#pages > #direct-to-film {
grid-area: direct-to-film;
display: grid;
width:100vw;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"pages-heading"
"pages-image"
"pages-text"
"pages-small-text";}

#pages > #embroidery {
grid-area: embroidery;
display: grid;
width:100vw;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
border-bottom:solid 1px red;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"pages-heading"
"pages-image"
"pages-text"
"pages-small-text"; }

#pages > #vehicle {
grid-area: vehicle;
display: grid;
width:100vw;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
border-bottom:solid 1px red;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"pages-heading"
"pages-image"
"pages-text"
"pages-small-text"; }

#pages > #graphicdesign {
grid-area: graphicdesign;
display: grid;
width:100vw;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
border-bottom:solid 1px red;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"pages-heading"
"pages-image"
"pages-text"
"pages-small-text"; }

#pages > #webdesign {
grid-area: webdesign;
display: grid;
width:100vw;
height:94vh;
scroll-snap-align: start;
scroll-margin-top: 6vh;
border-bottom:solid 1px red;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"pages-heading"
"pages-image"
"pages-text"
"pages-small-text"; }


ul {width:100%; height:auto; padding-left:50px;}
li {width:100%; height:auto; padding-left:2%;}


.pages-heading {
grid-area:pages-heading;
width:100%;
height:8vh;
font-size:2.2em; color:#222;
padding-left:2%; padding-right:2%;
border-top:solid 2px #333;
font-family: "Merriweather", serif;
display: flex; justify-content: center; align-items: center; text-align: center; }

.pages-image {
grid-area:pages-image;
width:100%;
height:20vh;
font-size:50px;
display: flex; justify-content: center; align-items: center; text-align: center; }
.pages-image img {max-width:80%; max-height:300px; object-fit: contain; overflow: hidden;}

.pages-text {
grid-area:pages-text;
width:100%;
height:20vh;
font-size:22px; color:#222;
padding-left:4%;
display: flex; justify-content: center; align-items: center; text-align: left; }

.pages-small-text {
grid-area:pages-small-text;
width:100%;
height:20vh;
font-size:20px; color:#888;
padding-left:50px; padding-right:2%;
display: flex; justify-content: center; align-items: start; text-align:left; } 


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


#structure > #footer {
display:grid;
grid-area:footer;
width:100%;
height:96vh;
scroll-snap-align: start;
background-color:#555;
border-top:solid 2px lightblue;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"foot1 foot2 foot3"
"footer-image footer-image footer-image"
"footer-marquee footer-marquee footer-marquee"
"foot4 foot4 foot4"; }

#footer > #foot1 {
grid-area:foot1;
display:grid; text-align: center; padding-left:5px; padding-right:5px; }
#foot1 a {font-size: 14px; color:white; padding-top:35px;}

#footer > #foot2 {
grid-area:foot2;
display:grid; text-align: center; padding-left:5px; padding-right:5px; }
#foot2 a {font-size: 14px; color:white; padding-top:35px;}

#footer > #foot3 {
grid-area:foot3;
display:grid; text-align: center; padding-left:5px; padding-right:5px; }
#foot3 a {font-size: 14px; line-height: 18px; color:white; padding-top:35px;}

#footer > #foot4 {
grid-area:foot4;
width: 100%;
font-size: 12px; color:white;
padding:1%;
display: flex; justify-content: center; align-items: center; text-align: center;}

#footer > #footer-marquee {
grid-area: footer-marquee;
width:90%;
display: grid;
width:100%;
height:auto;
display: flex; justify-content: center; align-items: center; text-align: center; }

#footer > #footer-image {
grid-area:footer-image;
width:100%;
display: flex; justify-content: center; align-items: center; text-align: center;
}

#footer-image img {
width:100%;
}




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




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

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

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

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

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

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

@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; 
display: flex; text-align: center; justify-content: center; align-items: center;}

#menu-bar {
width: 45px;
height: 35px;
margin: 25% 0 20px 33px;
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; margin-top:2%; }

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

.nav li a {
color:#f1f1f1;
font-size: 16px;
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: 10%;
height: 0;
margin: 30px 0 20px 20px;
background-color: #555;
/* background: radial-gradient( circle, #0d1eb4, #dc052d); */
border-radius: 0%; /* 50% */
transition: 0.3s ease; }

.change { display: block; }

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

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

.change #bar2 { opacity: 0; }

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

.change-bg {
width: 960px;
height: 100vh; 
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: 90%; 
height: 100px;
}




/*  ***** RINGING PHONE ******* */


.Phone {
  position: relative;
  display: block;
  margin: 0;
  width: 1.5em;
  height: 1em;
  font-size: 110px;
  background-color:;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
  transform: translate3d(0, 0, 0) scale(1);
}

.Phone::before,
.Phone::after {
  position: absolute;
  content: "";
}

.Phone::before {
top: 0;
left: 0;
width: 1em;
height: 1em;
background-color:;
border-radius: 100%;
opacity: 1;
transform: translate3d(0, 0, 0) scale(0);
}

.Phone::after {
top: 0.25em;
left: 0.25em;
width: 1.0em;
height: 1.0em;
background-image: url('phone_300_red.png');

  /*
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYuNiAxMC44YzEuNCAyLjggMy44IDUuMSA2LjYgNi42bDIuMi0yLjJjLjMtLjMuNy0uNCAxLS4yIDEuMS40IDIuMy42IDMuNi42LjUgMCAxIC40IDEgMVYyMGMwIC41LS41IDEtMSAxLTkuNCAwLTE3LTcuNi0xNy0xNyAwLS42LjQtMSAxLTFoMy41Yy41IDAgMSAuNCAxIDEgMCAxLjIuMiAyLjUuNiAzLjYuMS40IDAgLjctLjIgMWwtMi4zIDIuMnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=);
  */

  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0, 0, 0);
}

.Phone.is-animating {
  animation: phone-outer 3000ms infinite;

  &::before {
    animation: phone-inner 3000ms infinite;
  }

  &::after {
    animation: phone-icon 3000ms infinite;
  }
}

@keyframes phone-outer {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
  }
  33.3333% {
    transform: translate3d(0, 0, 0) scale(1.1);
    box-shadow: 0 0 0 0em rgba(#3498db, 0.1),
      0em 0.05em 0.1em rgba(#000000, 0.5);
  }
  66.6666% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0.5em rgba(#3498db, 0),
      0em 0.05em 0.1em rgba(#000000, 0.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
  }
}

@keyframes phone-inner {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0);
  }
  33.3333% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  66.6666% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
}

@keyframes phone-icon {
  0% {
    transform: translate3d(0em, 0, 0);
  }
  2% {
    transform: translate3d(0.01em, 0, 0);
  }
  4% {
    transform: translate3d(-0.01em, 0, 0);
  }
  6% {
    transform: translate3d(0.01em, 0, 0);
  }
  8% {
    transform: translate3d(-0.01em, 0, 0);
  }
  10% {
    transform: translate3d(0.01em, 0, 0);
  }
  12% {
    transform: translate3d(-0.01em, 0, 0);
  }
  14% {
    transform: translate3d(0.01em, 0, 0);
  }
  16% {
    transform: translate3d(-0.01em, 0, 0);
  }
  18% {
    transform: translate3d(0.01em, 0, 0);
  }
  20% {
    transform: translate3d(-0.01em, 0, 0);
  }
  22% {
    transform: translate3d(0.01em, 0, 0);
  }
  24% {
    transform: translate3d(-0.01em, 0, 0);
  }
  26% {
    transform: translate3d(0.01em, 0, 0);
  }
  28% {
    transform: translate3d(-0.01em, 0, 0);
  }
  30% {
    transform: translate3d(0.01em, 0, 0);
  }
  32% {
    transform: translate3d(-0.01em, 0, 0);
  }
  34% {
    transform: translate3d(0.01em, 0, 0);
  }
  36% {
    transform: translate3d(-0.01em, 0, 0);
  }
  38% {
    transform: translate3d(0.01em, 0, 0);
  }
  40% {
    transform: translate3d(-0.01em, 0, 0);
  }
  42% {
    transform: translate3d(0.01em, 0, 0);
  }
  44% {
    transform: translate3d(-0.01em, 0, 0);
  }
  46% {
    transform: translate3d(0em, 0, 0);
  }
}



}