/*
	Theme Name: Vinyl
	Description: The Basement Series X Vinyl
	Author: Collective Movement
	Text Domain: vinyl
	Version: 1.0.0
*/

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/outfit-v15-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/outfit-v15-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/outfit-v15-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('assets/fonts/outfit-v15-latin-800.woff2') format('woff2');
}

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?gv5cie');
  src:  url('assets/fonts/icomoon.eot?gv5cie#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.ttf?gv5cie') format('truetype'),
    url('assets/fonts/icomoon.woff?gv5cie') format('woff'),
    url('assets/fonts/icomoon.svg?gv5cie#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play-circle-o:before {
  content: "\f01d";
}
.icon-linkedin-square:before {
  content: "\f08c";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-facebook-f:before {
  content: "\f09a";
}
.icon-youtube-play:before {
  content: "\f16a";
}
.icon-instagram:before {
  content: "\f16d";
}
.icon-tiktok:before {
  content: "\e900";
}


/* General */
html { box-sizing: border-box; font-size: 62.5%; -webkit-font-smoothing: antialiased; }
body { background-color: #000; color: #333; display: flex; flex-direction: column; font-family: 'Outfit'; font-size: 1.8rem; font-weight: 400; line-height: 1.625; margin: 0; min-height: 100svh; }
*, *::before, *::after { box-sizing: inherit; }
.site-container:before, .site-footer:before { content: " "; display: table; }
.site-container:after, .site-footer:after { clear: both; content: " "; display: table; }
button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button { transition: all 0.2s ease-in-out; }
a { color: #000; text-decoration: none; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }
a:focus, a:hover { color: #333; text-decoration: none; outline-width: 0; }
:focus { color: #333; outline: none; }
ul { margin: 0; padding: 0; }
li { list-style-type: none; }
h1, h2 { margin: 0; padding: 0; }
p { color: #fff; font-family: 'Outfit'; font-size: 1.8rem; font-weight: 400; line-height: 1.6; margin: 0; padding: 0; }
.entry { display: flex; justify-content: center; margin: 0; }
.entry p { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
h1.entry-title { color: #fff; font-family: 'Outfit'; font-size: 1.8rem; font-weight: 600; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; }
embed, iframe, img, object, video, .wp-caption { max-width: 100%; }
img { height: auto; vertical-align: top; }

/* Framework */
.site-container { display: flex; flex-direction: column; word-wrap: break-word; position: relative; min-height: 100vh; }
.site-inner { clear: both; display: flex; flex-direction: column; margin: 0 auto; padding: 0; width: 100%; flex: 1 0 auto; }

.site-header { background-color: #000; display: flex; flex-direction: row; flex-wrap: wrap; flex-shrink: 0; position: relative; min-height: 100px; padding: 0 2em; width: 100%; z-index: 9999; }
.site-header .wrap { display: flex; align-items: center; margin: 0 auto; padding: 0; max-width: 100%; width: 100%; position: relative; }
.title-area { display: flex; align-items: center; margin-left: 0; margin-right: auto; padding: .8em 0; }
.title-area img { width: 100%; max-width: 300px; }
.social-nav {}
.social-nav ul { clear: both; display: flex; align-items: center; width: 100%; }
.social-nav ul li { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; }
.social-nav ul li a { color: #fff; font-size: 1.8rem; display: inline-block; padding: 0 .6em; }

/* Site Footer */
.site-footer { background-color: #000; border-top: 1px solid #000; padding: 10px 0; text-align: center; }
.site-footer-inner { display: flex; justify-content: center; align-items: center; }
.site-footer p { color: #7d7d7d; font-family: 'Outfit'; font-size: 1.3rem; font-weight: 600; line-height: 1.4em; margin: 0; }
.site-footer .copyright { margin-right: .5em; }
.site-footer .privacy { margin-left: .5em; }
.site-footer a { color: #7d7d7d; text-decoration: none; }
.site-footer a:hover { color: #597686; }

/** Mobile Menu Responsive*/
@media (min-width: 64.01em) {}

/* Media Queries */
@media only screen and (max-width: 1480px) {}

@media only screen and (max-width: 1280px) {}

@media only screen and (max-width: 1140px) {}

@media only screen and (max-width: 1080px) {}

@media only screen and (max-width: 1024px) {
.site-header { min-height: 95px; }
.title-area img { max-width: 280px; }
}

@media only screen and (max-width: 880px) {}

@media only screen and (max-width: 768px) {
.site-header { min-height: 90px; padding: 0 1.5em; }
.title-area img { max-width: 270px; }
}

@media only screen and (max-width: 719px) {}

@media only screen and (max-width: 640px) {
.site-header { min-height: 85px; }
.title-area img { max-width: 260px; }
}

@media only screen and (max-width: 580px) {
.site-header { min-height: 80px; }
.title-area img { max-width: 250px; }
}

@media only screen and (max-width: 520px) {
.site-header { min-height: 75px; }
.title-area img { max-width: 240px; }
}

@media only screen and (max-width: 480px) {
.site-header { padding: 0 1.2em; min-height: 70px; }
.title-area img { max-width: 230px; }
}

@media only screen and (max-width: 420px) {}