html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

  body{
    font-family: 'Lexend Zetta', sans-serif;
    color:#000;
    text-align:center;
  }

  main{
    margin:0 auto;
  }

  .images-leaning {
    box-sizing: border-box;
    width: 100%;
    min-width: 800px;
    margin: 2em auto 0;
    min-height: 260px;
    position: relative;
    background-repeat: no-repeat;
    /* background-image: linear-gradient(352deg, transparent 45.2%, #bbb 45.5%, #bbb 45.6%, #ccc 45.8%, #eee 60%), linear-gradient(30deg, #ccc, #eee 90%); */
    background-size: 100% 32.4em;
    background-position: 50% 100%;
  }
  .images-leaning > div {
    width: 250px;
    position: absolute;
    left: 50%;
    bottom: 7.8em;
    z-index: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
            justify-content: flex-end;
  }
  .images-leaning > div:before {
    content: '';
    width: 60%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 9.2%;
    z-index: 1;
    background-repeat: no-repeat;
    background-image: linear-gradient(120deg, transparent 42%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.35) 65%), linear-gradient(20deg, transparent 38%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.23) 55%, rgba(0,0,0,0.13) 75%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.15) 3%, transparent 40%);
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
  /* .images-leaning > div:after {
    content: '';
    width: 60%;
    height: 100%;
    position: absolute;
    z-index: 3;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.3), transparent 70%), linear-gradient(45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.3) 80%);
    -webkit-transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
            transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
  } */

  .images-leaning > div > a {
    width: 60%;
    display: block;
    position: relative;
    z-index: 2;
 }

  .images-leaning > div > a > img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 2;
    border-left: 0.2em solid;
    -webkit-border-image: linear-gradient(105deg, transparent 0.5%, #aaa 0.7%) 1;
         -o-border-image: linear-gradient(105deg, transparent 0.5%, #aaa 0.7%) 1;
            border-image: linear-gradient(105deg, transparent 0.5%, #aaa 0.7%) 1;
    box-shadow: 0.1em 0.2em 0 -0.1em #666;
    -webkit-filter: saturate(90%);
            filter: saturate(90%);
    -webkit-transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
            transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
  }
  .images-leaning > div:nth-of-type(4) {
    --resize: 0.99;
    margin-left: -40.4em;
  }
  .images-leaning > div:nth-of-type(4):before {
    background-size: 100% 85%, 100% 15%, 100% 10%;
    background-position: 0.1em 0, 0 100%, -3em 83%;
  }
  .images-leaning > div:nth-of-type(3) {
    --resize: 0.96;
    margin-left: -15.3em;
    -webkit-transform: scaleY(0.98) translate(-8em, -2.1em);
            transform: scaleY(0.98) translate(-8em, -2.1em);
  }
  .images-leaning > div:nth-of-type(3):before {
    background-size: 100% 84%, 100% 16%, 100% 10%;
    background-position: 0.4em 0, 0 100%, -3em 81%;
  }
  .images-leaning > div:nth-of-type(2) {
    --resize: 0.925;
    margin-left: 10em;
    -webkit-transform: scaleY(0.965) translate(-17em, -4.2em);
            transform: scaleY(0.965) translate(-17em, -4.2em);
  }
  .images-leaning > div:nth-of-type(2):before {
    background-size: 100% 83%, 100% 17%, 100% 10%;
    background-position: 0.6em 0, 0.1em 100%, -3em 81%;
  }
  .images-leaning > div:nth-of-type(1) {
    --resize: 0.895;
    margin-left: 35.2em;
    -webkit-transform: scaleY(0.94) translate(-26.6em, -6.2em);
            transform: scaleY(0.94) translate(-26.6em, -6.2em);
  }
  .images-leaning > div:nth-of-type(1):before {
    background-size: 100% 82%, 100% 18%, 100% 10%;
    background-position: 0.8em 0, 0.1em 100%, -3em 80%;
  }
  body {
    margin: 0 auto;
    padding: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: justify;
            justify-content: space-between;
    background-color: #dfdfdf;
    font-size: 10px;
  }
  .images-basic {
    width: 600px;
    padding: 5em 0;
    margin: 0 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
            flex-direction: row-reverse;
  }
  .images-basic > div {
    width: 130px;
  }
  .images-basic img {
    width: 100%;
    display: block;
  }

  .music-videos{
      
  }

  section.video{
      margin-top:4em;
      margin-bottom:5em;
  }

  .logo{
    display: block;
    margin:0 auto;
    width:20%;
  }



h3{
    font-size:1.2em;
    padding:40px 0;
}



header{
    margin-top:25px;
}



.row{
    padding-top:20px;
    padding-bottom:25px;
    margin:0 5px;
}

.col img{
}

.mv{
  width:240px; 
  padding:40px 0;
}

.summerchild{
  width:75px; 
  margin:40px auto;
}

.socials img{
  max-width: 30px;
}

.socials .col{
  max-width:10%;
}

/* bootstrap override */
@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 800px;
    }
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .container{
      padding:10px;
    }

    .row{
      padding:5px 0;
    }
    .col{
      padding:5px 5px;
    }

    .mv{
      width:155px; 
      padding:10px 0;
    }

    .summerchild{
      width:45px; 
      margin:20px auto;
    }

    .socials .col{
      max-width:12%;
    }
    .socials img{
      max-width:25px;
    }

    h6{
      font-size: .8rem;
    }
}
/* plyr override */
.plyr.plyr--stopped .plyr__controls { display: none }

.plyr{
  min-width:80px
}


/* 
.plyr--full-ui input[type=range] {
    color: #9bd88b;
  }
  
  .plyr__control--overlaid {
    background: rgba(155, 216, 139, .8);
  }
  
  .plyr--video .plyr__control.plyr__tab-focus,
  .plyr--video .plyr__control:hover,
  .plyr--video .plyr__control[aria-expanded=true] {
    background: #9bd88b;
  }
  
  .plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 5px rgba(155, 216, 139, .5);
  }
  
  .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
    background: #9bd88b;
  } */