/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img, video {
   width: 100%;
   display: block;
}

body {
   background-color: black;
   color: white;
   font-family: 'Lato', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
}

.title_page {
   width: 100vh;
   height: 100vh;
   object-fit: cover;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   position: sticky;
   position: -webkit-sticky;
   z-index:-1;
}

.background {
   width: 100vw;
   height: 100vh;
   position: sticky;
   position: -webkit-sticky;
   top: 0px;
   z-index: -1;
   object-fit: cover;
}

.background img {
   width: 100%;
   height: 100%;
   object-fit: cover;
    position: sticky;
   position: -webkit-sticky;
   top: 0px;
   z-index: -1;
}


.title {
   max-width: 900px;
   margin: auto;
   margin-top: -100vh;
   z-index: -1;
   font-family: Roboto;
   font-style: bold;
   color: #F9D288;
  height: 424px;
/*  position: relative;*/
  width: 766px;
  padding-left: 60px;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
}

.title .title_page_text {
  height: 424px;
  left: 0;
  position: relative;
  top: 0;
  width: 772px;
  position: sticky;
  position: -webkit-sticky;
  z-index: -1;
}

.title .headline {
  height: 44px;
  left: -1px;
  position: relative;
  top: 250px;
  width: 852px;
  font-size: 20px;
  opacity: 100%;
}

.title .byline {
   color: #f9d288;
  font-family: "Roboto-Bold", Helvetica;
  font-size: 15px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  top: 474px;
  width: 170px;
  opacity: 100%;
}

.title .description {
  color: #f9d288;
  font-family: "Roboto-Regular", Helvetica;
  font-size: 15px;
  font-weight: 400;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
/*  top: 374px;*/
   top: 480px;
  width: 573px;
  text-transform: uppercase;
  opacity: 100%;
}

.h2 {
   font-family: Roboto;
   font-style: normal;
   opacity: 100%;
}

.floatinggraf {
   max-width: 640px;
   margin: auto;
   text-align: center;
   margin-top: 80vh;
   padding-bottom: 60vh;
   font-family: Roboto;
}

.whitebox {
   width: 100%;
   background-color: black;
   color: white;
   /*position: sticky;
   position: -webkit-sticky;
   top: 0px;
   z-index: -1;*/
   padding: 5vh 0vw;
   z-index: -1;
  /* position: sticky;
   position: -webkit-sticky;
   top: 0px;*/
}

.text {
   max-width: 640px;
   margin: 0vh auto;
   color: #f9d288;
   text-align: justify;
   font-family: Roboto;
   text-transform: uppercase;

}

.widepic {
   width: 100vw;
   height: 100vh;
   position: sticky;
   position: -webkit-sticky;
   top: 0px;
   z-index: -1;  
}

.widepic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.scrollingwords {
   max-width: 850px;
   margin: auto;
   text-align: center;
   padding-bottom: 100vh;
   font-family: "Roboto-regular", Helvetica;
   color: #f9d288;
   font-size: 20px;
   text-transform: uppercase;
   position: sticky;
}

.logo {
   position: relative;
   margin: 0auto;
   color: #F9D288;
   font-size: 28px;
   text-justify: left;
}

.interview_video {
   width: 25%;
   height: 25%;
   position: relative;
   justify-content: center;
   margin-left: 550px;
   z-index: 111;
}

.logo svg {
   max-width: 200px;
   position: absolute;
   width: 50%;
   height: 50%;
   opacity: 80%;
   z-index: -1;

}

/*.timeline {
   z-index: 2;
   width: 90%;
}

.container {
   margin: 0;
   padding: 0;
   font-family: 'monsterrat', sans-serif;
   display: block;
   position: relative;
   width: 1100px;
   height: auto;
   overflow: hidden;
   margin: 0 auto;
   z-index: 111;
   padding: 0 50px;
   color: black;
}
*/
.body_image {
   margin-left: 5px;   
   margin-right: 5px;
   position: relative;
}

.body_image img {
   size: 30%;
}

.newbox {
   width: 40%;
   float: right;
   margin: 5px 0px 10px 10px;
}

.images_1 {
   width: 60%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.images_1 img {
   margin-top: 15px;
   margin-bottom: 15px;
}

.images_2 {
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.images_2 img {
   margin-top: 15px;
   margin-bottom: 15px;
}

.text img {
   size: 50%;
}
/*fjsldnfljsd*/

.interactivebox {
   width: 100%;
   height: 100%;
   background-color: WHITE;
   margin-bottom: 500px;
   z-index: -1;
}


.container {
   margin: 0;
   padding: 0;
   font-family: 'Montserrat', sans-serif;
   display: block;
   position: relative;
   width: 1100px;
   height: auto;
   overflow: hidden;
   margin: 0 auto;
   z-index: 111;
   padding: 0 50px;
}

.container_profile {
   padding: 160px 50px 150px 50px;
   /*float: left;*/
   width: 100%;
   z-index: 111;
}

.member_name {
   cursor: pointer;
   z-index: 111;
}

.profile:hover {
   transform: scale(1.05);
   z-index: 111;
}

.member_name {
   float: left;
   width: 160px;
   margin-right: 40px;
   font-size: 12px;
   font-family: 'Montserrat', sans-serif;
   font-style: normal !important;
   font-weight: 800;
   letter-spacing: 0.2em;
   text-align: right;
   color: #F9D288;
   cursor: pointer;
   z-index: 111;
}

.profile_img {
   position: relative;
   width: 530px;
   height: 675px;
   display: block;
   margin: 0;
   padding: 0;
   z-index: 111;
}

.pf_inner {
   position: relative;
   width: 80%;
   height: auto;
   display: none;
   margin-left: 20%;
   z-index: 111;
}

#profile_1{
   display: block;
}

.artist {
   background-color: white;
}
.artist_crbg {
   background-color: #a4bde4 !important;
}

.color_bg {
   position: absolute;
   width: 450px;
   height: 590px;
   top: 10px;
   left: 5%;
   opacity: 0.3;
}

.artist_img {
   position: absolute;
   width: 86%;
   margin: 0 auto;
   top: 40px;
   left: 10%;
/*   box-shadow: 15px 15px 20px 0 #bdbcbc;*/
/*   box-shadow: 15px 15px 20px 0 #F9D288;*/
}

.artist_img img{
   width: 100%;
   object-fit: fill;
   vertical-align: bottom;
   aspect-ratio: auto 455 / 580;
   height: 580px;
}

.profile_txt {
   position: absolute;
   width: 275px;
   bottom: 50px;
   right: 0;
}

.name_tt {
   position: relative;
   width: 275px;
   font-size: 25pt;
   letter-spacing: 0.05em;
   margin-bottom: 15px;
   left: 39.2%;
   color: #F9D288;
}

.profile_txt p {
   position: relative;
   font-size: 12pt;
   margin-top: 10px;
   left: 40%;
   color: #F9D288;
}
/*sdfnjsdlj*/
/*media query for responsive design */

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



}