@charset "UTF-8";

/*
 Theme Name: Sphere Official Website (Metal Band from Norway)
 Template:sphereofficial.com
 Description: Sphere Official Website CSS
 Author:Thomas Federico
 Author URI:https://www.sphereofficial.com
 Version:1.0.0
*/

/* ---------------------------------------------------------
  CSS SUMMARY
  0. =@IMPORTS........(DOCUMENT)
  1. =RESET BOX.......(DOCUMENT)
  2. =HTML/BODY.......(DOCUMENT)
  3. =GENERAL STYLES..(DOCUMENT)
  4. =FX..............(TRANSITION CLASS)
  5. =HEADER..........(TOP BAR)
  6. =NAVIGATION......(TOP NAV)
  7. =MAIN............(CONTAINER FOR SECTIONS)
  8. =QUOTES..........(BETWEEN SECTIONS)
  9. =SECTIONS
  10. =FOOTER
  11.=MODALS
  12.=MEDIA QUERIES
--------------------------------------------------------- */

/*------------------------------------------------------- */
/* ========= Theme customization starts here ============ */
/*------------------------------------------------------- */

/* === 0. @IMPORTS === */



/* === 1. RESET BOX === */

/*!
 * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */

*,::after,::before{box-sizing:border-box}
html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:flex}body{margin:0;font-family:-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:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}

/* === 2. HTML/BODY (DOCUMENT) === */
* {
  -webkit-backface-visibility: hidden;
}

html, body
{
  position: relative;
  transition: all .25s ease;
  font-family: 'Unica One', cursive;
  font-display: swap;
}

html
{
  touch-action: manipulation;
  overflow-x: hidden!important;
}

body
{
 margin:0!important;
 padding:0!important;
 width:100%;
 overflow-x: hidden!important;
 touch-action: manipulation;
 -ms-touch-action: manipulation;
 -webkit-overflow-scrolling: hidden!important;
 background: #0b0b0b;
}

/* Strangely, it prevents the no delay on iPad without being affiliated to anything */
.no-delay {
  touch-action: manipulation;
}

/* === 3. COMMON ELEMENTS / CLASSES === */

  a, a:visited
  {
    color:#fff;
    text-decoration:none!important;
    cursor:pointer;
  }

  a:hover
  {
    color:#fff;
    text-decoration: none;
  }

  img
  {
    width:100%;
    height:auto;
  }

  /* Hide lazyload images if JavaScript is not supported */
  .no-js .lazy {
   display: none;
  }

  /* Avoid empty images to appear as broken */
  img:not([src]):not([srcset]) {
   visibility: hidden;
  }

  /* Fix for images to never exceed the width of the container */
  img
  {
   max-width: 100%;
  }

  .pos-r
  {
    position: relative;
  }

  .f-center
  {
    display:flex;
    width:100%;
    margin:0 auto;
  }

  .v-center
  {
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .t-center
  {
    text-align: center;
  }

  .fldr-r
  {
    flex-direction: row;
  }

  .fldr-c
  {
    flex-direction: column;
  }


  .shadow
  {
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 5px 0px
    rgba(0,0,0,0.5);
  }


  /* === 4. FX === */

  /* TRANSTIONS */

  .transition { transition:all .25s ease; }


#app
{
  margin: 60px auto 0;
}

  /* === 5. NAVIGATION === */

  /* TRANSTIONS */



.menu-bars
{
  display:none;
  color:#fff!important;
}

  nav
  {
    position:fixed;
    top:0;
    left:0;
    height:60px;
    flex-direction: column;
    background: #000; /*#161B21*/
    z-index: 800;
  }

  #navbar-container-desktop
  {
    height:60px;
    max-width: 1440px;
    /*background: blue;*/
  }



  #menu-container
  {
    position: relative;
    width:90%;
    flex:1;
    align-items: center;
    justify-content: center;
    /*background: crimson;*/
  }


  #navbar-container-desktop .pull-sm-left li, .pull-sm-left li a
  {
    display: flex;
    height:100%;
    align-items: center;
    justify-content: center;
    height:46px;
  }

  #navbar-container-desktop .pull-sm-left li
  {
    margin:0;
  }

  #navbar-container-desktop .pull-sm-left li a
  {
    padding:0 1rem;
  }

  #navbar-container-desktop .pull-sm-left li a, .pull-sm-left li a:visited
  {
    text-decoration: none!important;
    color:#fff;
    text-transform: uppercase;
  }


  .pull-sm-right
  {
    list-style: none;
    padding:0 40px 0 0;
  }

  #navbar-container-desktop .pull-sm-right
  {
    margin-left: auto;
    padding:0;
    justify-content: flex-end;
  }

  #navbar-container-desktop .pull-sm-right li, .pull-sm-right li a
  {
    display: flex;
    height:100%;
    align-items: center;
    justify-content: center;
    height:42px;
    width:42px;
  }

  #navbar-container-desktop .pull-sm-right li
  {
    margin:0 1rem 0 0
  }

  #navbar-container-desktop .pull-sm-right li:first-child
  {
    margin:0 1rem 0 0
  }

  .nav-social
  {
    position: relative;
    border-radius: 46px;
  }

  .nav-social i
  {
    z-index: 10;
  }


  .nav-social:before {
    position: absolute;
  content: " ";
  transition: all 355ms ease-in;
  -moz-transition: all 355ms ease-in;
  -webkit-transition: all 355ms ease-in;
  transform: scale3d(0, 0, 0);
  -webkit-transform: scale3d(0, 0, 0);
  width: 46px;
  height: 46px;
  opacity: 1;
  border-radius: 46px;
}

  .nav-social:hover:before {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}


.nav-item a:hover
{
  cursor: pointer;
}

  .active, .active-touch
  {
    background: #007aff;
  }

  .navbar-mobile-controls
  {
    display:none;
  }


  .tooltip
  {
    position: relative;
    display: flex;
  }



  [data-title] {
    position: relative;
  }

  [data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: 60px;
    display: flex;
    padding: 10px;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
    border:1px solid #333;
    box-shadow: 0 2px 5px #000;
  }
  [data-title]:hover::after {
    content: '';
    position: absolute;
    top: 46px;
      display: flex;
    color: #fff;
    border: 8px solid transparent;
    border-bottom: 8px solid #333;
  }

  /* === 6. SECTIONS LAYOUT=== */

  /* SECTIONS */
  .sections
  {
    position:relative;
    flex-direction: column;
    margin: 0 auto 0;
  }

  section, .section
  {
    position:relative;
    flex-direction: column;
  }

  .section-item
  {
    height:100%;
  }

  /* CONTAINERS & ROWS  */
  .container-fluid, .row
  {
    flex-direction: column;
  }

  .container-fluid
  {
    /*background: blue;*/
  }
  .row
  {
    max-width:1440px;
    padding:0 2rem;
  }

  .section-item:last-child .row
  {
    margin:0 auto 7rem
  }

  .section h1
  {
    margin:0 auto;
    padding:7rem 0;
    text-transform: uppercase;
    font-size: 4rem;
    /*background: crimson;*/
  }

  .section h1, .section p
  {
    color:#fff;
  }

  .section p a, .section p a:visited
  {
    color:#007aff;
  }

  /* HOME */

  .banner-header
  {
    width: 100%;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .navbrand
  {
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    max-width: 474px;
    margin: 0 auto;
    z-index: 20;
  }

  .navbrand
  {
    top:7vw;
  }


  .tagline
  {
    color:#fff;
    font-size: 36px;
    text-transform: uppercase;
  }



  /* === 6. CARDS === */

  .card-group
  {
    /*background: crimson!important;*/
  }


  #store .card
  {
    /*background: crimson;*/
  }


  .news-container, .card-groups
  {
    flex-direction: row;
  }

  .news-container, .card-groups {
    margin:0 auto 4rem;
    text-align: center;
    width:100%;
  }

  .news-container,.card-groups:last-child
  {
    margin:0 auto!important;
  }


  .news-item,.card
  {
    width:100%;
    margin:0 30px;
    background:#11131D!important;
    border:0;
    flex:1;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.5);

  }

  /*
  .card:nth-child(even):last-child
  {
    margin:0 30px 0;
  }

  .card:nth-child(odd):last-child
  {
    margin:0;
  }*/

  .card:first-child
  {
    margin:0 30px 0 0;
  }

  .card:last-child
  {
    margin:0 0 0 30px;
  }


  .card .card-avatar
  {
    /*background:purple!important;*/
    text-align:center;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -126%);
    display:flex;
    width: 20vw;
    height:20vw;
    max-width:100px;
    max-height:100px;
    flex-direction:column;
    flex: 1 0 auto;
    justify-content: center;
    margin:0 auto!important;
    text-transform:uppercase;
    z-index: 3;
    font-size: 1em!important;
    padding:0;
    /*background: #1D242C;*/
    background: #171D25;
    box-shadow: 0 2px 5px #000;
    z-index: 5;
    border-radius:60px;
    border:2px solid rgb(255,255,255)!important;
  }


  .card .card-title, .card a.btn, .card a.btn:visited
  {
    color:#fff!important;
  }

  .card .card-title, .news-item .news-title
  {
  position: relative;
  display:flex;
  flex-direction:column;
  justify-content: center;
  margin:0 auto 1rem!important;
  text-transform:uppercase;
  z-index: 3;
  font-size: 1em!important;
  padding:0;
  /*background: #1D242C;*/

  }

  .news-header,.card-header
  {
    position: relative;
    height:11vw;
    max-height:120px;
    overflow: hidden!important;
    padding:0!important;
  }

  .news-header, .card-header, .news-footer, .card-footer
  {
    border-radius: 0!important;
  }

  .overlay, .card-overlay
  {
    position: absolute;
    top:0; left:0;
    width:100%;
    height: 100%;
    z-index: 2;
  }

  .card-overlay
  {
    background: rgba(40,40,40,.4);
  }

  .news-body, .card-body
  {
    position: relative;
    padding:0!important;
  }


  .news-desc, .card-desc
  {
    position: relative;
    display: flex;
    padding:0 15px;
    align-items: flex-end;
    justify-content:center;
  }

  .news-body{
    flex:1;
    height:100%;
  }

  .news-body, .news-body h2, .news-desc p
  {

  }

  .news-body h2
  {

    min-height:100%;
    display:flex;
     flex-shrink:0;
    /*background: crimson;*/
  }
  .card-desc
  {
    height:120px;
  }

  .card-desc p
  {
    font-size: 14px!important;
  }

  .news-desc p
  {
    margin:2rem auto;
  }


  .news-desc, .card-desc h3
  {
    font-size: 1.25rem;
    line-height: 1.25;
    text-transform: uppercase;
    color:#fff;
  }

  .news-desc h2
  {
    margin:40px auto 0;

  }

  .card-desc h3
  {
    margin:40px auto 0;
  }


  .card a.btn
  {
    margin:0 auto;
    width:100%!important;
    font-size:16px!important;
    padding:.75rem!important;
  }

  .card-header, .card-footer
  {
    border:0!important
  }

  .card .card-photo, .news-item .news-photo
  {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 0!important;
  }


  .card img
  {
    width:100%;
    height: auto;
  }

  .overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 80vh;
    /*background: rgba(255, 255, 255, .2);*/
  }


  /* NEWS */

  #news
  {
    /*background:green!important;*/
  }

  /* BAND */

  #band
  {
    /*background:yellow!important;*/
  }

  .band-wrapper
  {
    padding:1.5rem;
    background: #11131D;
  }


  .band-picture-container
  {
    position: relative;
    min-height:40vw;
    max-height:793px;
    overflow: hidden!important;
    padding:0!important;
  }

  .band-picture-container img
  {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    z-index: 0!important;
  }


  .line-up li
  {
    list-style: none;
    padding:0;
    color:#fff
  }
  .band-wrapper h2
  {
    position: relative;
    font-size: 2rem;
    color:#fff;
  }

  .band-wrapper ul
  {
    padding:0;
  }

  .band-wrapper h2, .band-wrapper  ul
  {
    margin:2rem auto 0!important;
  }

  .band-wrapper p
  {
    margin:2rem auto;
  }

  .band-wrapper p:last-child
  {
    margin:2rem auto 1rem;
  }


  /* store */



  /* SOCIAL */



  /* CONTACT */








/* CTA BUTTONS */



.btn-cta
{
  /*background:#225188!important;*/
  border:2px solid #fff!important;
  border-radius:0!important;
  color: #fff!important;
  text-transform:uppercase!important;
  margin:1rem auto .5rem;
}

.card:hover .card-overlay
{

  background: rgba(255,40,40, 0);
  transition: all .2s ease;
}

/*
.card:hover .card-photo, .news-item:hover .news-photo
{
  transform:scale(1.2);
}

*/


.news-date
{
  position: relative;
  display: flex;
  padding:1rem;
  align-items: center;
  justify-content:center;
  margin:-1.5rem auto 0;
  background: #007aff;
  max-width: 140px;
  color:#fff;
}


.news-desc, .card-desc
{
  position: relative;
  display: flex;
  padding:0 15px;
  align-items: center;
  justify-content:center;
}

.news-desc a
{
  color:#007aff;
}

.card-desc
{
  height:160px;
}

.news-footer, .card-footer
{
  padding:0 1.25rem .75rem;
  margin:0 auto 2rem;
}

.news-footer
{
  margin:2rem auto;
}



.cta-order-container
{
  position: absolute;
  bottom:8rem;
  width:100%;
  margin: 0 auto;
  text-align: center;
  color:#fff;
}


.btn-cta:first-child
{
  margin: 0 auto .5rem!important;
}

.btn-cta i
{
  margin-right:.25rem;
  font-display: swap;
}



.news-footer .btn-cta ,.cta-order-container .btn-cta
{
  padding:1rem;
  margin:0 1rem!important;
}

.cta-order-container
{
  z-index: 200!important;
}
.cta-order-container .btn-cta-order
{
  width:300px!important;
}

#contact .card-desc h3
{
  margin:160px auto 0;
}

#contact .card-desc h4
{
  margin:30px auto 0;
  color:#fff;
}

#contact .card-footer
{
  margin:100px auto 1rem;
}

#store .btn-cta, #contact .btn-cta
{
  width:300px!important;
}







#news .news-header
{
  height:14vw!important;
  max-height:200px!important;
}



/* === 6. FOOTER === */

footer div
{
  border-top: 2px solid #007aff;
  padding:3rem 0;
  color:#fff;
  background: #000;
}

footer p
{
  margin-bottom: 0;
}

footer img
{
  max-width:200px;
}

hr
{
  position:fixed;
  top:60px;
  left:0;
  border:0;
  background: red;
  height:1px;
  width:100%;
  z-index: 2000;
  margin:0;
  display:none;
}



footer a, footer a:visited, #loadtime
{
  color:#007aff;
}


 #loadtime
{
  font-weight: bold;
  margin-right:.25rem
}


/* === 6. BACKGROUNDS / COVERS / AVATARS === */


.btn-cta-order
{
  background: #007aff;
}

.avatar
{
background-size:100%!important;
}

.news-cta .btn-instagram:hover, .btn-instagram:hover:before
{
background-image: linear-gradient(to right top, #fcac0f, #fd9522, #fa7f30, #f36a3c, #e85647, #e44751, #dd395b, #d42d65, #d12174, #ca1b85, #be1e96, #ae27a8);

}

.btn-facebook:hover:before
{
  background: #3578E5;
}

.btn-twitter:hover:before
{
  background: #1da1f2;
}

.card-cta .btn-spotify, .btn-spotify:hover:before
{
  background: #1DB954;
}

.news-cta .btn-youtube:hover, .btn-youtube:hover:before
{
  background: #CC0000;
}

.btn-soundcloud:hover:before
{
  background: rgb(255,76,0);
  background: linear-gradient(0deg, rgba(255,76,0,1) 0%, rgba(255,138,0,1) 100%);
}

.card-cta .btn-bandcamp, .btn-bandcamp:hover:before
{
  background: #1DA0C3;
}

.btn-gpm
{
  background: #ff5722;
}

.btn-amazon
{
  background: #f08804;
}

.btn-apple
{
  background: #ec008c;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #fc6767, #ec008c);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #fc6767, #ec008c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}

.btn-lastfm
{
  background: #b90000;
}



.btn-yandex
{
  background: #f33;
}

.webp .bg-primordial
{
  background: url("../img/webp/sphere-album-primordial-bg.webp") center no-repeat;
  background-size:cover;
}

.nowebp .bg-primordial
{
  background: url("../img/jpg/sphere-album-primordial-bg.jpg") center  no-repeat;
  background-size:cover;
}

.bg-404
{
  background: url("../img/jpg/sphere-banner-error-404.jpg") center;
}

.cover-primordial
{
background: url("../img/jpg/sphere-album-cover-primordial.jpg") center;
}

.primordial
{
background: url("../img/png/sphere-avatar-primordial.png") center no-repeat!important;
}

.strandstudio
{
background: url("../img/png/sphere-avatar-strandstudio.png") center no-repeat!important;
}

.erikkirchner
{
background: url("../img/png/sphere-avatar-erikkirchner.png") center no-repeat!important;
}

.thomasfederico
{
background: url("../img/png/sphere-avatar-thomasfederico.png") center no-repeat!important;
}

.bg-size-cover
{
background-size: 100%;
background-repeat: no-repeat;
}

.manage-cookies
{
  padding:3rem 0;
  background:#101010
}

/* === 11. MEDIA QUERIES === */

#btn-menu
{
  display:none;
  color:#fff!important
}

@media screen and (min-width:1427px)
{
  .navbrand
  {
    top:35%;
    transform: translate(-50%, 0);
  }
}

@media screen and (max-width:1426px)
{
  .navbrand
  {
    top:35%;
    transform: translate(-50%, 0);
  }
}


@media screen and (max-width:1219px)
{
  #store .btn-cta, #contact .btn-cta, .cta-order-container .btn-cta-order
  {
    width:100%!important;
  }
}

@media screen and (max-width:1219px)
{
  .btn-cta
  {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
  }

  .btn-cta i
  {
    margin-bottom: .5rem;
  }
}

@media screen and (max-width:768px)
{

  .banner-header
  {
    height:40vw
  }

  .navbrand
  {
    top:12vw;
  }

  .tagline
  {
    font-size: 4vw;
  }
  #btn-menu
  {
    display:flex;
    width:100%;
    align-items: center;
    justify-content: center;
  }



  #btn-menu i
  {
    width:14px;
    margin-right:.5rem;

  }



  #navbar-mobile-panel
  {
    position: fixed;
    top:60px;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(17,19,29, .97);
    z-index: 300;

  }

  #navbar-mobile-panel #menu-container
  {
    justify-content: flex-start;
    will-change: transform;
  }



  #navbar-mobile-panel .pull-sm-left
  {
    flex-direction: column;
    margin:2rem auto;
    width:100%;
    padding:0;
    list-style: none;
  }

  #navbar-mobile-panel .pull-sm-left li
  {
    margin-top:1rem;
  }

  #navbar-mobile-panel .pull-sm-left li:first-child
  {
    margin-top:0;
  }

  #navbar-mobile-panel .pull-sm-left li a
  {
    font-size: 6vw;
  }

  #navbar-mobile-panel .pull-sm-right
  {
    width:42%;
    border-top:1px solid #fff;
    justify-content: center;
    padding:1rem 0 0;
  }

  #navbar-mobile-panel .active, #navbar-mobile-panel .pull-sm-left li a:hover
  {
    background: none;
    color:#007aff;
  }

  .news-container, .card-groups
  {
    flex-direction: column;
  }

  .news-item, .card, #contact .card
  {
    margin:0 auto 30px;
  }

  .news-item:last-child, .card:last-child, #contact .card:last-child
  {
    margin:0 auto;
  }

  #store .card:nth-child(1)
  {
    margin:0 auto 30px!important;
  }

  #news .news-header, .card-header, #contact .card-header
  {
    height:30vw!important;
    max-height:300px!important;
  }

  .news-footer, .card-footer
  {
    margin:0 auto 2rem;
    padding:0 1.25rem;
  }
}


@media screen and (max-width:467px)
{
  .section h1
  {
    padding:2rem 0!important;
    font-size: 3rem;
    /*background: crimson;*/
  }

  .section-item:last-child .row
  {
    margin:0 auto 4rem
  }

}


@media (hover:hover)
{

  .pull-sm-left li a:hover
  {
    background: #007aff;
    transition: all .2s ease;
    color:#fff;
  }


  .news-item, .card
  {
    transition: all .65s ease;
    will-change: transform;
  }

  .news-item:hover, .card:hover
  {
    transform:scale(1.1);
  }

  #btn-menu:hover
  {
    cursor:pointer;
    background: #007aff;
  }

  .manage-cookies:hover
  {
    cursor:pointer;
    background: #007aff;
  }
}