@font-face {
  font-family: "SF-Regular";
  src: url("../fonts/t80/SFAlienEncounters.woff") format("woff"), /* Modern Browsers */
    url("../fonts/t80/SFAlienEncounters.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF-Italic';
  src: url('../fonts/SFAlienEncounters-Italic.ttf')
      format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF-SolidItalic';
  src: url('../fonts/SFAlienEncountersSolid-Ital.ttf')
      format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SF-Solid";
  src: url("../fonts/t80/Jura-SemiBold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/t80/Jura-SemiBold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lazer84';
  src: url('../fonts/Lazer84.ttf')
      format('ttf');
  font-weight: normal;
  font-style: normal;
}

body {
  background-image: url('/themes/contrib/totally80s/images/bg/stars.png');
  background-repeat: repeat;
  background-position: center;
  background-size: 1000px;
  margin-bottom: 0px;
  font-family: 'boston-regularuploaded_file';
}

.footer {
  padding-bottom: 180px;
}

body::after {
  content: "";
  background-image: url('/themes/contrib/totally80s/images/bg/new-bg.png'); 
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 1400px;
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -3;   
}

/* Navbar */
#navbar {
  align-items: center;
  display: flex;
  border-color: transparent;
}

#navbar-collapse {
  width: 100%;
}

#navbar .navbar-header {
  float: none;
}

#navbar .search-block-form {
  position: static;
}

.main-container > .row > .col-sm-12[role="heading"] {
  margin-bottom: 25px;
}

#block-totally80s-socialicons a {
  margin-right: 10px;
}

#block-totally80s-socialicons .fab {
  font-size: 30px;
  color: white;
  transition-duration: .3s;
  text-shadow: 0.5px 0.5px 5px #f82aff00, 0.5px 0.5px 5px #f82aff00;
}

#block-totally80s-socialicons .fab:hover {
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  color: #fff1ff;
}

#navbar ul > li > a {
  padding-left: 0px;
  text-shadow: 0.5px 0.5px 5px #f82aff00, 0.5px 0.5px 5px #f82aff00;
  transition-duration: .3s;
  font-family: 'SF-Solid';
  margin-right: 15px;
}

#navbar ul > li > a:hover, #navbar ul > li > a:focus, #navbar ul > li > a:active {
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  color: #fff1ff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  background-color: transparent;
}

#navbar .input-group {
  width: 100%;
}

#search-block-form .form-search.form-control {
  border: solid 2px #fff1ff;
  box-shadow: 0.5px 0.5px 5px 0 #f77afb00, inset 0.5px 0.5px 5px 0 #f77afb00;
  color: white;
  padding-left: 40px;
  transition-duration: .3s;
  background-color: transparent!important;
}

#search-block-form .form-search.form-control::placeholder {
  color: white;
}

#search-block-form .form-search.form-control:hover, #search-block-form .form-search.form-control:focus, #search-block-form .form-search.form-control:active  {
  box-shadow: 0.5px 0.5px 5px 0 #f77afb, inset 0.5px 0.5px 5px 0 #f77afb;
}

#navbar .input-group-btn {
  position: absolute;
  left: 5px;
  top: 1px;
}

#navbar .input-group-btn button, #navbar .input-group-btn button:hover, #navbar .input-group-btn button:focus, #navbar .input-group-btn button:active {
  background-color: transparent;
  border-color: transparent;
  outline: none;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent;
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff!important;
  color: #fff1ff!important;
}

/* Carousel */

.carousel-overlay {
  position: absolute;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.0001) 100%);
  height: 50%;
  width: 100%;
  bottom: 0;
  z-index: 0;
}

.home-carousel-item a:last-of-type {
  z-index: 1;
}

/* Sidebar */
.well.region-sidebar-second {
  background-color: rgba(11, 0, 27, 1);
  box-shadow: 0.5px 0.5px 5px 0 #ffffff, inset 0.5px 0.5px 5px 0 #ffffff;
  border-color: transparent;
  background-clip: padding-box;
}

.well.region-sidebar-second::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -2;
  margin: 14px; /* !importanté */
  margin-top: -1px;
  border-radius: inherit; /* !importanté */
  background: linear-gradient(172deg, #feed00, #ff7200 36%, #fe1dbc);
}

#block-totally80s-skyscraper90banner img {
  margin-bottom: 20px;
  max-width: 100%;
}

.region-sidebar-second h2 {
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  color: #fff1ff!important;
  font-family: 'SF-Solid';
}

.region-sidebar-second input {
  border: none;
  color: black;
}

.region-sidebar-second .views-field-title a {
  text-shadow: 0.5px 0.5px 5px #f82aff00, 0.5px 0.5px 5px #f82aff00;
  color: white;
  font-family: 'SF-Solid';
}

.region-sidebar-second .views-field-title a:hover {
  color: white;
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  text-decoration: none;
  
}

.region-sidebar-second button {
  border: none;
  font-family: 'SF-Solid';
  letter-spacing: 1px;
}


/* Articles */ 
.view-recent-articles .views-col *, .region-sidebar-second * {
  color: white;
}

.view-recent-articles .views-col .views-field-field-image {
  margin: 10px 10px;
}

.view-recent-articles .views-col .views-field-field-photo-credit {
  padding: 0px 15px;
}

.view-recent-articles .views-col a {
  color: white!important;
  text-shadow: none;
  font-family: 'SF-Solid';
}

.view-recent-articles .views-col {
  background-color: rgba(11, 0, 27, 1);
  margin: 10px 5px;
  box-shadow: 0.5px 0.5px 5px 0 #f77afb, inset 0.5px 0.5px 5px 0 #f77afb;
  border: solid 1.5px #f77afb!important;
  width: calc(50% - 10px)!important;
}

.view-recent-articles .views-col img {
  max-width: calc(100% - 5px)!important;
  box-shadow: 0.5px 0.5px 5px 0 #f77afb, inset 0.5px 0.5px 5px 0 #f77afb;
  border: solid 1.5px #f77afb;
  border-radius: 3.5px;
}

.views-field-field-photo-credit .field-content {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.514)!important;
}

.view-recent-articles .views-field-last-updated .field-content, .view-recent-articles .views-field-last-updated .field-content em {
  color: white;
  font-family: 'SF-Solid';
}

/* Carousels */
.home-carousel-item a:last-of-type {
  text-shadow: 0.5px 0.5px 5px #f82aff56, 0.5px 0.5px 5px #f82aff56;
  font-family: 'SF-Solid';
}

.home-carousel-item a:last-of-type:hover, .home-carousel-item a:last-of-type:active, .home-carousel-item a:last-of-type:focus {
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  color: #fff1ff!important;
  text-decoration: none;
}

/* Footer */
html body footer section a {
  text-shadow: 0.5px 0.5px 5px #f82aff00, 0.5px 0.5px 5px #f82aff00; 
}

html body footer section .fab {
  font-size: 28px;
  margin-right: 10px;
}

footer nav ul {
  margin: 10px 0px;
}

footer .menu.menu--footer > li > a {
  text-shadow: 0.5px 0.5px 5px #f82aff00, 0.5px 0.5px 5px #f82aff00!important;
  padding-left: 0px;
  font-family: 'SF-Solid';
}

footer .menu.menu--footer > li > a:hover, footer .menu.menu--footer > li > a:active, footer .menu.menu--footer > li > a:focus {
  background-color: transparent;
  text-decoration: none;
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff!important;
}

/* Listening Room */
.view-id-listening_room .views-col {
  background-color: rgba(11, 0, 27, 0.8);
  margin: 10px 5px;
  box-shadow: 0.5px 0.5px 5px 0 #f77afb, inset 0.5px 0.5px 5px 0 #f77afb;
  border: solid 1.5px #f77afb;
  width: calc(33.3333333% - 10px)!important;
}

.view-id-listening_room .views-col a {
  font-family: 'SF-Solid';
}

/* Article Content */
.page-node-type-article .main-container .region.region-content, .page-node-type-video .main-container .region.region-content {
  background-color: rgba(11, 0, 27, 1);
  box-shadow: 0.5px 0.5px 5px 0 #391967, inset 0.5px 0.5px 5px 0 #391967;
  border: solid 1.5px #391967;
}

.page-node-type-article .main-container .region.region-content *, .page-node-type-video .main-container .region.region-content * {
  color: #ececec;
}

.page-node-type-article .main-container .region.region-content p, .page-node-type-article .main-container .region.region-content h1, .page-node-type-video .main-container .region.region-content p, .page-node-type-video .main-container .region.region-content h1 {
  color: #ececec!important;
  font-family: 'SF-Solid'!important;
  letter-spacing: .5px!important;
}

.page-node-type-article .main-container .region.region-content p {
  color: #ececec;
  font-family: 'boston-regularuploaded_file'!important;
  font-size: 16px;
}

html body .content p a, html body .content p a em, html body .content p a * {
  color: #f82aff!important;
  text-shadow: none;
}

article[role="article"] .field--item a {
  color: #f82aff!important;
  text-shadow: none;
}

.view-recent-articles .views-col.article-view-recent-col {
  width: calc(33.3333333% - 10px)!important;
  margin-right: 5px;
  min-height: 420px!important;
}

.view-recent-articles .views-col.article-view-recent-col .views-field-body .field-content {
  color: white;
  font-family: 'boston-regularuploaded_file';
  display: none;
}

.page-node-type-article .main-container .region.region-content h1 {
  font-family: 'SF-Solid';
}

ul.links.inline.list-inline {
  padding: 14px;
}

/* Featured */
.path-taxonomy article {
  background-color: rgba(11, 0, 27, 1);
  box-shadow: 0.5px 0.5px 5px 0 #f77afb, inset 0.5px 0.5px 5px 0 #f77afb;
  border: solid 1.5px #f77afb;
  color: #c9c9c9;
}

.path-taxonomy article .field--type-text-with-summary {
  margin: 10px 0px;
}

article[role="article"] > h2 > a {
  color: #e9e9e9;
  text-shadow: 0.5px 0.5px 5px transparent, 0.5px 0.5px 5px transparent;
}

article[role="article"] > h2 > a:hover {
  text-decoration: none;
}

/* Newsletter Modal */
#newsletter-modal .modal-content {
  background-color: rgba(11, 0, 27, 1);
}

#newsletter-modal {
  color: #c9c9c9!important;
  font-family: 'SF-Solid';
}

#newsletter-modal a {
  color: #f77afb;
  text-shadow: 0.5px 0.5px 5px #f82affa2, 0.5px 0.5px 5px #f82affa2;
}

#newsletter-modal .modal-header, #newsletter-modal .modal-footer {
  border: none;
}

/* Track By Track */
.feed-icon {
  display: none;
}

/* Globals */
html body div a {
  text-shadow: 0.5px 0.5px 5px #f82affa2, 0.5px 0.5px 5px #f82affa2;
  color: white!important;
  transition-duration: .3s;
}

html body div a:hover, html body div a:active, html body div a:focus {
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  color: #fff1ff!important;
  text-decoration: underline;
}

.webform-submission-newsletter-signup-form .form-actions .btn {
  background-image: linear-gradient(103deg, #feed00, #ff7200 53%, #fe1dbc);
  text-transform: uppercase;
  white-space: normal;
}

.path-frontpage .region.region-content h2 {
  text-shadow: 0.5px 0.5px 5px #f82aff, 0.5px 0.5px 5px #f82aff;
  color: #fff1ff!important;
  font-family: 'SF-Solid';
}

.pagination > li > a {
  border-color: #f82aff;
  
}

.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > a:active, .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color:  #f82aff;
  text-decoration: none;
  border-color: #f82aff;
}

h1, h2 {
  font-family: 'SF-Solid';
}

.pager li > a, .pager li > span {
  border: solid 1.5px #f77afb;
  box-shadow: 0.5px 0.5px 5px 0 #f77afb, inset 0.5px 0.5px 5px 0 #f77afb;
  background-color: rgba(11, 0, 27, .75);
}

.pager li > a:hover, .pager li > span:hover {
  background-color: rgba(11, 0, 27, 1);
}

article.article.teaser h2, article.article.teaser .field--type-image, article.article.teaser .field--name-body {
  padding-left: 14px;
  padding-right: 14px;
}

/* article[role="article"] > h2 > a {
  color: black!important;
} */

/* article[role="article"] > h2 > a:hover, article[role="article"] > h2 > a:focus, article[role="article"] > h2 > a:active {
  color: black!important;
} */

/* Mobile */

@media (max-width: 520px) {
  #navbar {
    display: block;
  }

  .navbar-default .navbar-collapse {
    border-top: none;
    box-shadow: none;
  }

  .navbar-default .navbar-toggle {
    border-color: #f82aff;
  }

  .navbar-default .navbar-toggle:hover {
    background-color: #f82aff;
  }

  #navbar ul.menu {
    padding-left: 1.5em;
  }

  .view-recent-articles .views-col {
    width: 100%!important;
  }

  .view-recent-articles .views-col.article-view-recent-col {
    width: 100%!important;
    margin-right: 0px;
  }
}