/*
 * Globals
 */

/* Links */

@font-face {
    font-family: 'Rajdhani';
    src: url('f/Rajdhani-Medium.woff2') format('woff2'),
        url('f/Rajdhani-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('f/Rajdhani-Semibold.woff2') format('woff2'),
        url('f/Rajdhani-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
  font-family: 'fontello';
  src: url('f/icons/fontello.eot?29200108');
  src: url('f/icons/fontello.eot?29200108#iefix') format('embedded-opentype'),
       url('f/icons/fontello.woff2?29200108') format('woff2'),
       url('f/icons/fontello.woff?29200108') format('woff'),
       url('f/icons/fontello.ttf?29200108') format('truetype'),
       url('f/icons/fontello.svg?29200108#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #000;
}

body {
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  color:#000;
  font-family: 'Rajdhani';
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-size: 13px;
  /* These are technically the same, but use both */
 overflow-wrap: break-word;
 word-wrap: break-word;

 -ms-word-break: break-all;
 /* This is the dangerous one in WebKit, as it breaks things wherever */
 word-break: break-all;
 /* Instead use this non-standard one: */
 word-break: break-word;

 /* Adds a hyphen where the word breaks, if supported (No Blink) */
 -ms-hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 hyphens: auto;
}
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-download:before { content: '\e800'; } /* '' */
.icon-info:before { content: '\e801'; } /* '' */


a,
a:focus,
a:hover {
  color: #000;
  text-decoration: none
}



.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}
header {margin-top:1em;}
footer, header {z-index:10}
footer a {line-height: 1; padding: .5em; margin-bottom: .5em; margin-top:.5em;}
ul.sidesocials {
    font-weight: normal;
    margin: 0; padding:0;
    text-align: center;
		font-family: 'Font Awesome 5 Brands';
    list-style: none;
    white-space: nowrap;
    margin-bottom: 10px;

}
@media(min-width:576px){
  ul.sidesocials {
      font-weight: normal;
      margin: 0; padding:0;
      margin-bottom: 0;
      text-align: center;
  		font-family: 'Font Awesome 5 Brands';
      list-style: none;
      position: absolute;
   left: 50%;
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
  }
}
ul.sidesocials li {margin:0 2px; display: inline-block;}
ul.sidesocials li a {font-size:16px;
position: relative;
text-decoration: none;
padding: .3em;
display: block;
}
ul.sidesocials li a:hover {opacity:1}
.swiper-container {position: fixed;top:0;left:0; width: 100%; height:100%; bottom:0; right:0; z-index:1}
.swiper-slide {background-position: center; background-size:cover; background-repeat: no-repeat;}
.slide1 {background-image:url(i/bg_black.jpg)}
.slide2 {background-image:url(i/bg_white.jpg)}
.slide3 {background-image:url(i/bg_black.jpg)}
.slide4 {background-image:url(i/bg_white.jpg)}
.slide5 {background-image:url(i/bg_red.jpg)}
.slide6 {background-image:url(i/6.jpg)}
.slide7 {background-image:url(i/7.jpg)}
.slide8 {background-image:url(i/8.jpg)}

.slide1 .inner img, .slide2 .inner img  {width:75vw}
.slide3 .inner img, .slide4 .inner img  {height:33vh}
.slide5 img.remix_img {width:33vh}
.slide7 img.allin {width:90vw; max-width:600px}
.swiper-slide {padding-top:80px; padding-bottom: 100px}
@media(min-width:576px){
  .swiper-slide {padding-top:80px; padding-bottom: 80px}
  .slide3 .inner img, .slide4 .inner img  {height:50vh}
  .slide5 img.remix_img {height:50vh; width:50vh}
  .slide7 img.allin {max-width:375px}

}


a {  transition:color 0.5s ease;}
.colorwhite, .colorwhite a,
.colorwhite a:focus,
.colorwhite a:hover  {color:#fff}
.colorblack, .colorblack a,
.colorblack a:focus,
.colorblack a:hover {color:#000}
.swiper-scrollbar-drag {border-radius: 0}
.swiper-container-horizontal>.swiper-scrollbar {top:0px; height:2px; border-radius:0; left:2.51em; right:2.51em; width:auto}
.swiper-container-vertical>.swiper-scrollbar {right:4px; width:1px;}

@media(min-width:576px){
  .swiper-container-horizontal>.swiper-scrollbar {bottom:13px;height:1px;}
}
.colorwhite .swiper-scrollbar {
    background: rgba(255,255,255,.1);
}
.colorwhite .swiper-scrollbar-drag {
    background: rgba(255,255,255,.5);
}
.fancybox-container {color:#000 !important}
.fancybox-container a, .fancybox-container a:focus, .fancybox-container a:hover {color:#b13737 !important}