/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2019, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- HERE
*/

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

html                                            { scroll-behavior:smooth; }
body                                            { padding:0; background-color:var(--color-cream100); display:flex; flex-direction:column; min-height:100vh; color:var(--color-gray500); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.icon--top                                      { position:absolute; top:-1px; left:-10px; width:calc(100% + 40px); }
.icon--down                                     { position:absolute; top:auto; bottom:0; left:50%; transform:translateX(-50%); animation-duration:3s; animation-iteration-count:infinite; animation-name:animateDown; }

.img--80px,
.img--120px                                     { width:40px; height:auto; }

.section                                        { padding:60px 20px; display:flex; gap:40px; flex-direction:column; position:relative; top:0; left:0; overflow:hidden; }

.section--snow                                  { padding-top:100px; background-color:var(--color-snow); }
.section--snow .icon--top                       { color:var(--color-cream100); fill:var(--color-cream100); }

.section--cream                                 { padding-bottom:0; background-color:var(--color-cream100); }

.section--creamDark                             { padding-top:60px; background-color:var(--color-cream300); }
.section--creamDark .icon--top                  { color:var(--color-snow); fill:var(--color-snow); }

.section--brand                                 { padding-top:60px; padding-bottom:0; background-color:var(--color-brand500); color:var(--color-snow); }
.section--brand .icon--top                      { color:var(--color-snow); fill:var(--color-snow); }
.section--brand + .section--snow .icon--top     { color:var(--color-brand500); fill:var(--color-brand500); }
.section--brand + .section--creamDark .icon--top     { color:var(--color-brand500); fill:var(--color-brand500); }
.section--brand h3,
.section--brand h4,
.section--brand h5                              { color:var(--color-snow); }

.section--cream + .section--brand .icon--top    { color:var(--color-cream100); fill:var(--color-cream100); }

.section--black                                 { background-color:var(--color-black); color:var(--color-cream100); }
.section--black a                               { color:var(--color-cream800); text-decoration:none; }
.section--black a:hover,
.section--black strong                          { color:var(--color-cream100); }

.section--map                                   { background:url(../images/map.png); background-size:cover; background-position:top left; background-repeat:no-repeat; }
.grid--map                                      { padding:0; border-radius:var(--radius); position:relative; color:var(--color-black); display:none; }
.icon-resize                                    { width:60px; }
.friend                                         { height:120px; width:auto; }

/*
.section--pumpkins                              { background-color:#F8981F; background:url(../images/bg-pumpkins.jpg); background-position:top left; background-repeat:repeat; }
.section--pumpkins h2,
.section--pumpkins p                            { color:var(--color-snow); }
.section--pumpkins .round                       { background-color:var(--color-snow); display:block; width:130px; border-radius:70px; padding:20px; }
.section--pumpkins .round .friend               { margin:0; }

.section--christmas                             { background-color:#F8981F; background:url(../images/bg-christmas.jpg); background-position:top left; background-repeat:repeat; }
.section--christmas h2,
.section--christmas p                           { color:var(--color-snow); }
.section--christmas .round                      { background-color:var(--color-snow); display:block; width:130px; border-radius:70px; padding:20px; }
.section--christmas .round .friend              { margin:0; }
*/

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  .section                                      { padding:110px 20px; min-height:600px; }

  .section--snow                                { padding-top:300px; }

  .section--creamDark                           { padding-top:200px; }

  .section--brand                               { padding:200px 20px 60px; }

  .grid--map                                    { padding:80px 0; display:grid; background:url(../images/map.jpg); background-size:cover; }

  .grid__item--split                            { flex-direction:row; gap:60px; }

  .icon-resize                                  { width:120px; }
  .img--80px                                    { width:80px; }
  .img--120px                                   { width:120px; }
}

/***********************************************
Desktop - This applies from 1000px onwards
***********************************************/
@media (min-width:1000px) {
/*  .icon-resize                                  { width:initial; }*/
}

/***********************************************
Desktop HD - This applies from 1200px onwards
***********************************************/
@media (min-width:1200px) {
  
}

@media screen and (prefers-reduced-motion:reduce) {
  html                                          { scroll-behavior:auto; }
}



/***********************************************
Scroll animation
***********************************************/
@-webkit-keyframes animateDown {
  0%                                            { bottom:-50px; }
  50%                                           { bottom:-60px; }
  100%                                          { bottom:-50px; }
}
@-moz-keyframes animateDown {
  0%                                            { bottom:-50px; }
  50%                                           { bottom:-60px; }
  100%                                          { bottom:-50px; }
}
@-ms-keyframes animateDown {
  0%                                            { bottom:-50px; }
  50%                                           { bottom:-60px; }
  100%                                          { bottom:-50px; }
}
@-o-keyframes animateDown {
  0%                                            { bottom:-50px; }
  50%                                           { bottom:-60px; }
  100%                                          { bottom:-50px; }
}
@keyframes animateDown {
  0%                                            { bottom:-50px; }
  50%                                           { bottom:-60px; }
  100%                                          { bottom:-50px; }
}