@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


/*main*/


body{
  width:100%;
  height: 100%;
  font-size: 100%;
  image-rendering: -webkit-optimize-contrast;
}

 h1, h2, h3, h4, h5, h6, p{
  font-weight: 100;
}

.fw-b{
  font-weight: 600;
}

.fw-xb{
  font-weight: 800;
}

ul{
  list-style-position: inside;
}

.grey-font{
  color: #2a2833;
} 

.text-highlight{
  color:  rgb(24, 130, 190);
}

.page-section{
  height: 50vw;
  width: 98vw;
  max-height: 1930px;
  max-width: 3840px;
  position: relative;
  margin: auto;
  font-family: 'Raleway', sans-serif;
  margin-bottom: 1%;
  -webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.35); 
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* page sections */
/*Header*/

#header {
  overflow: hidden;
  background: #FFF url("img/backgrounds/header-bg.png") no-repeat center;
  background-size: 100% 100%;
  font-family: 'Open Sans', sans-serif;
}

#header h2{
  font-size:min(max(16px, 5vw), 150px);
}

#header-worldcast-logo{
  width:55%;
}

#header-kp9-logo{
  width:35%;
  margin:2%;
}


/*Kp9*/
#kp9 {
  color: rgba(255, 255, 255, 0.822);
}

#kp9-left {
  line-height: 0;
  width:50%;
}

#kp9vid{
  width:100%;
  height:100%;
  object-fit: cover;
  background-color:#292833;
}

#kp9-right {
  background: #292833 url("img/backgrounds/kp9-bg.png") no-repeat center;
  background-size: cover;
  width:50%;
}

#kp9-right-content{
  width:80%;
}

#kp9 h1{
  font-size: min(max(16px, 2.5vw), 100px);
  margin:1%;
}

#kp9 p{
  font-size:min(max(12px, 1.5vw), 72px);
}


/*Problem*/
#problem {
  color: #FFF;
  background: #292833 url("img/backgrounds/problem-bg.png") no-repeat center;
  background-size: cover;
}

#problem ul{
  font-size: min(max(13px, 1.6vw), 70px);
  line-height: 2;
  margin: 2% 0 0 5%;
  list-style-position:outside;
  width:84%;
}

#problem h2{
  font-size:min(max(46px, 7.5vw), 290px);
}

#problem h3{
  width: 75%;
  font-size: min(max(16px, 2vw), 88px);
  text-align: center;
  margin-bottom: 4%;
}

#problem-image{
  width:70%;
}

#problem-right, #problem-left{
  width:50%;
}


/*Solution*/
#solution {
  background: #FFF url("img/backgrounds/solution-bg.png") no-repeat center;
  background-size: cover;
  color: #000;
  height: 100%;
}

#solution-bottom{
  margin-bottom:2%;
}
#solution-left{
  width:60%;
  margin-top:2%;
}

#solution-right{
  width:40%;
  margin-top:2%;
}

#solution-three-screens{
width:72%;
margin: 4% 0px 2% 0px;
}

#solution-worldcast-logo{
  width:45%;
}

#solution h2{
  font-size:min(max(16px, 8.5vw), 320px);
}

#solution h3, #solution ul{
  font-size:min(max(16px, 2vw), 80px);
}

#solution ul{
  width: 89%;
  list-style-position: outside;
  line-height: 1.8;
}

#solution-top h3{
  width:70%;
}



/*Worldcast*/
#worldcast {
  background: #292833 url("img/backgrounds/worldcast-bg.png") no-repeat center;
  background-size: cover;
  color: #FFF;
  white-space: nowrap;
}

#worldcast-left {
  color: #FFF;
}

#worldcast-right{
  color: #000;
}

#worldcast h2{
  font-size:min(max(16px, 5vw), 175px);
  line-height: 0.9;
}

#worldcast h3{
  font-size: min(max(14px, 3.5vw), 140px);
  line-height: 0.9;
}

#worldcast h4{
  font-size: min(max(16px, 2vw), 72px);
}

#worldcast p{
  font-size: min(max(12px, 1vw), 50px);
}

/*video hexagon layers*/

#video-overlay{
  opacity: 1;
  background-color: white;
  height: 100%;
  width: 100%;
  transition:opacity 200ms linear;
}

.contain-hex
{
  background-image:url("img/border1.png");
  background-repeat:no-repeat;
  background-size: 87%;
  width:  800px;
  height: 692px;
  background-position: center;
  line-height: 0;
}

.hex {
  overflow: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  position: relative;
  left: 83px;
  top: 113px;
  }

.hex-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

#hex-in2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
  visibility: visible;
}

#worldcast-video-logo{
  width:50%;
}

#play-button{
  width: 25%;
  margin: 2%;
}

#play-overlay{
  z-index:2;
  width: 50%;
  height: 46%;
  position: absolute;
  bottom: 16%;
  cursor: pointer;
}

.hex1 {
  width:  624px;
  height: 468px;
}

#worldcast-video{
  position: relative;
  height:100%;
  width:100%;
  opacity:0;
  object-fit: fill;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:opacity 200ms linear;
  }

#stop-button{
  width: 24%;
  position: absolute;
  visibility: hidden;
  z-index: 2;
  position: fixed;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  }

/*Business Model*/

#business-model {
  color: #FFF;
  background: #FFF url("img/backgrounds/business-model-bg.png") no-repeat center;
  background-size: cover;
  height:100%;
  font-family: 'Open Sans', sans-serif;
}

#business-model-studios{
  display: block;
}

#business-model-studios-mobile{
  display: none;
}

#business-model-studios, #business-model-studios-mobile{
  width:100%;
}

#business-model-worldcast-logo{
  width:30%;
  height:100%;
}

.blue-rectangle{
  width: 23%;
  height: 12vw;
  min-height: 140px;
  min-width: 250px;
  max-height: 405px;
  background-color: #1683c1;
  margin: 0 1% 0 0;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 4px 1px #000000;
  box-shadow: 0px 0px 4px 1px #000000;
  text-align: center;
}

.blue-rectangle-sm{
  width: 16vw;
    height: 9vw;
    min-height: 101px;
    min-width: 167px;
    max-width: 516px;
    max-height: 235px;
    background-color: #1683c1;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px 1px #000000;
    box-shadow: 0px 0px 4px 1px #000000;
    margin: 0 0 2% 0;
}

#business-model-user-icon{
  width: 34%;
  max-width: 100px;
}

#business-model-widget{
  margin:1%;
  width:0.8%;
  min-width:9px;
}

#business-model-top{
  padding-top:2%;
}

#business-model h3{
  font-size: min(max(16px, 1.5vw), 70px);
  margin-bottom: 4%;
}

#business-model h4{
  font-size: min(max(13px, 1vw), 44px);
}
#business-model h5{
  font-size: min(max(10px, 0.8vw), 32px);
}

#business-model h2{
  font-size: min(max(20px, 1.4vw), 72px);
  color: #000;
}

/*milestones*/
#milestones{
  color:#000;
  background: #FFF url("img/backgrounds/milestones-bg.png") no-repeat center;
  background-size:cover;
}

#milestones-top{
  padding: 1% 2% 1% 6%;;
}

#milestones-top h2{
 font-size: min(max(16px, 3.5vw), 140px);
 margin:0;
}

#milestones-right h2{
  font-size: min(max(12px, 2.5vw), 125px);
}
#milestones-left{
  width:50%;
  border-right: 0.3vw dashed #000;
  padding: 1% 2% 1% 6%;
}

#milestones h3{
  font-size:min(max(16px, 2vw), 80px);
}

#milestones p{
  font-size:min(max(14px, 1.3vw), 54px);
  line-height: 1.4;
  margin: 0 0 5% 0;
}

#milestones ul{
  font-size:min(max(15px, 1.8vw), 70px);
  padding:0;
}

#milestones-right{
  width:50%;
}

#milestones-worldcast-logo{
  width:50%;
}

/*partners*/

#partners {
  color: #FFF;
  background: #292833 url("img/backgrounds/partners-bg.png") no-repeat center;
  background-size: cover;
  text-align: center;
}

#partners h2{
  font-size:min(max(14px, 2vw), 78px);
}

#partners h3{
  font-size:min(max(12px, 1.7vw), 70px)
}

#partners-row-2{
  padding:0 0 3% 0;
}

#logo-ibm{
width:18%;
padding-right: 1%;
}

#logo-canva{
width:9%;
padding-right: 1%;
}

#logo-sketchfab{
width:20%;
}

#partners-row-7 img{
  width:16%;
  padding-right:1%;
}

#partners-row-4 img, #partners-row-5 img{
width:9%;
padding-right:1%;
}

#partners-row-4{
  padding-bottom: 1%;
}

#partners-row-5{
  padding:0 0 3% 0;
}


/*Revenue*/
#revenue{
  background-color: #FFF;
  height: 100%;
  padding:2%;
}

#revenue-quotes{
  position:absolute;
  opacity: 0.1;
  width:8%;
  right:67%;
}

#revenue-chart{
  width:90%;
}

#revenue-row-2{
  margin-left:20%;
  margin-right: 20%;
  text-align: center;
}

#revenue h2{
  font-size: min(max(26px, 4.4vw), 155px);
}

#revenue-row-2 span{
  font-size: min(max(8px, 0.7vw), 32px);
}
#revenue-statistica{
  line-height: 0.3;
}

#revenue h3{
  font-size:min(max(10px, 1.3vw), 54px);
  margin:3% 4% 3% 12%;
  line-height: 1;
}

#revenue h4{
  font-size: min(max(17px, 1.3vw), 70px);
  margin:0;
}


/*market-gap*/
#market-gap{
  color: #000;
  background: #FFF url("img/backgrounds/market-gap-bg.png") no-repeat center;
  background-size: cover;
}

#market-gap h3{
  font-size: min(max(15px, 1.7vw), 90px);
}

#market-gap h5{
  font-size: min(max(10px, 0.8vw), 40px);
  text-align: left;
  margin:0 0 0 5%;
}

#market-gap h4{
  font-size: min(max(12px, 1vw), 50px);
  text-align: left;
  margin:0 0 0 5%;
}

#market-gap-top{
  text-align: center;
  margin-bottom:2%;
}

#market-gap-bottom{
  margin-top:2%;
}

#market-gap-quote,#market-gap-quotes {
  position: absolute;
}
#market-gap-quote{
  top: 20%;
  width: 31%;
  margin-left: 10%;
  
}
#market-gap-quotes {
  left:0;
  opacity: 0.1;
  width:20%;
  right:67%;
}

#market-gap-middle{
  text-align: center;
}

#market-gap-pie-chart{
  width:74%;
  margin-left: 7%;
}

#market-gap-pie-chart-mobile{
  display: none;
  width:80%;
  padding:1%;
}

#market-gap-top h2{
  font-size: min(max(28px, 4.8vw), 160px);
}

#market-gap-bottom h2{
  font-size: min(max(16px, 2.5vw), 110px);
  text-align: center;
}


/*differentiators*/

#differentiators {
  color: #000;
  background: #FFF url("img/backgrounds/differentiators-bg.png") no-repeat center;
  background-size: 100% 100%;
}

#differentiators h2{
  font-size: min(max(16px, 4.8vw), 160px);
  margin-left:5%;
}
#differentiators-chart{
  width: 90%;
}

#differentiators-bottom{
  text-align: center;
}


/*endgame*/
#endgame{
  color: #000;
  background: #FFF url("img/backgrounds/end-game-bg.png") no-repeat center;
  background-size: cover;
  height:100%;
  padding:2%;
}

#endgame-left{
  width:50%;
}

#endgame-right{
  width:50%;
}

#endgame-image{
  width: 87%;
  margin-left: 5%;
}

#endgame-image-mobile{
  display: none;
  width: 100%;
}

#endgame h2{
  font-size: min(max(25px, 6vw), 160px);
  line-height: 0.8;
}

#endgame h3{
  font-size: min(max(15px, 2vw), 80px); 
  margin:4% 0 0 0;
}

#endgame ul{
  font-size: min(max(14px, 1.2vw), 50px);
}
#endgame p{
  font-size: min(max(14px, 1.4vw), 50px);
    line-height: 1.2;
    width: 78%;
    margin:0;
}

/*team*/

#team {
  background: rgb(112, 112, 112) url("img/backgrounds/team-bg.png") no-repeat center;
  background-size: cover;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
}
.team-mobile-view{
  display: none;
}

.team-mobile-view div{
  width:42%;
}

#team-top{
  text-align: left;
  margin-right:5%;
}

#team h2{
  font-size: min(max(38px, 4.8vw), 160px);
}

#team h3{
  font-size: min(max(16px, 2.3vw), 94px);
}

#team h4 {
  font-size: min(max(15px, 1.7vw), 72px);
}

#team img{
  width:13%;
  margin:0 4% 0 4%;
}

#team h4, #team p {
  color: #000;
}
#team p {
  white-space: nowrap;
  font-size:min(max(12px, 1.2vw), 50px)
}
#team-bottom div{
 text-align: end;
 width:23%;
}
#team-bottom{
  margin-right: 8%
}
#team-middle{
  margin-top:6%;
}

/*example*/
#example{
color: #000;
background: rgb(112, 112, 112) url("img/backgrounds/example-bg.png") no-repeat center;
background-size:cover;
}

.example-mobile-view{
  display: none;
}

#avengers-poster-mobile{
  width:70%;
  margin: auto;
}

#example h2{
  font-size: min(max(20px, 3vw), 120px);
  width:73%;
}

#example h3{
  font-size: min(max(18px, 2vw), 72px);
  width:50%;
  color: #FFF;
}

#example-top{
    width: 50%;
    margin-left: 47%;
}

#example-arrow{
  margin-left:52%;
  width:10%;
}

#example-qr{
  width:20%;
  position: absolute;
  top: 47%;
  right: 7%;
}

#example-qr-mobile{
  width:50%;
}

#example-right-bottom{
  margin-top:14%;
  margin-left:12%;
}

#example-right-top{
  margin-top:5%;
  
}
#example-left{
width:40%;
justify-content: flex-end;
}

#example-right{
  width:60%;
}

#avengers-poster{
  width:88%;
}

/*thank you*/
#thank-you {
  background: rgb(112, 112, 112) url("img/backgrounds/thankyou-bg.png") no-repeat center;
  background-size: cover;
}

#thank-you-logo{
  width:45%;
  margin-left:10%;
}

#thank-you-middle img{
  width:60%;
}

#thank-you a{
  width:8%;
}

#thank-you-middle{
  margin-top:10.5%;
}
#thank-you h2{
  font-size: min(max(17px, 3.5vw), 130px);
 
}
#thank-you-top{
  margin: 8% 0 0 21%;
}

#thank-you-bottom h2{
  color: #FFF;
}

#thank-you-bottom h3{
  color:#bad4db;
  font-size: min(max(13px, 1.2vw), 60px);
  margin-bottom:1%;
}

#thank-you-bottom{
  margin-top:2%;
}
#thank-you-worldcast-logo{
  width:15%;
}



/* for mobile devices */

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


  #kp9, #problem, #solution, #worldcast, #milestones, #partners,
  #market-gap, #team, #example, #thank-you{

    height:100%;
  }

  #kp9-right, #kp9-left, #problem-left, #problem-right, #solution-left, 
  #solution-right, #milestones-worldcast-logo, #revenue-chart, #endgame p, #example h2,
  #example-right, #example h3, #market-gap-pie-chart-mobile {

    width:100%;
  }

  #kp9, #problem, #solution-bottom, #worldcast, #business-model-top,
  #milestones-bottom, #partners, #revenue-row-1, #revenue-row-2,
  #market-gap-quote, #team-middle, #example, #example-right-top,
  #thank-you-top{

    flex-direction: column;
  }

  #kp9-right, #worldcast-left, #milestones-top, #milestones-left, #revenue-row-1,
  #market-gap-quote, #team-middle, #endgame, #example, #solution-right, #milestones ul{

    text-align: center;
  }
  #problem-right, #solution-left, #solution-right, #business-model-bottom, #business-model-top, 
  #revenue-row-1, #market-gap-quote, #team-middle, .team-mobile-view, #team-top, #endgame, 
  #example, #thank-you-middle{

    align-items:center!important;
  }

  #kp9-right, #problem-right, #worldcast, #partners, .example-mobile-view, #thank-you{

    padding:2%;
  }
  #business-model-studios,  #market-gap-pie-chart, #team-bottom p, #team-bottom h4, .team-regular,
  #endgame-image, #avengers-poster, .example-regular, #example-left{

    display:none;
  }

  #business-model h3, #business-model h4, #revenue p, #revenue h2, #revenue h3, #market-gap h4,
  #market-gap h5, #team-top, #example-right-bottom, #thank-you-top, #thank-you-logo{

    margin:0;
  }

  .page-section{
    -webkit-box-shadow: 0px 0px 1px 1px rgb(0 0 0 / 35%);
    box-shadow: 0px 0px 1px 1px rgb(0 0 0 / 35%);
    margin-bottom: 2%;
  }

  #kp9-right{
    background-position: bottom;
  }

  #problem{
  background-position: right;
  }

  #problem-image{
    width:60%;
  }

  #solution-right ul{
    list-style-position: inside;
    padding:0;
  }
  #business-model{
    background-position: initial;
  }

  #business-model-studios-mobile{
    display: block;
  }

  #business-model-bottom{
    flex-direction:column-reverse;
  }

  .blue-rectangle{
    width:60%;
    min-width: 230px;
    min-height: 100px;
    margin-bottom:3%;
  }

  .blue-rectangle-sm{
    margin-bottom:2%;
    margin-top:1%;  
  }

  #business-model-worldcast-logo{
    width:72%;
  }

  #milestones-top{
    padding:2% 0 2% 0;
  }
  #milestones-left{
    border-right: 0px;  
    width:90%;
    padding:0;
  }

  #partners{
    background-position: left;
  }

  #logo-ibm{
    width:36%;
    padding-right: 1%;
  }
  
  #logo-canva{
    width:18%;
    padding-right: 1%;
  }
  
  #logo-sketchfab{
    width:40%;
  }
  
  #partners-row-7 img{
    width:32%;
    padding-right:1%;
  }
  
  #partners-row-4 img, #partners-row-5 img{
    width:18%;
    padding-right:1%;
  }

  #revenue-row-2{
    margin:2%;
  }

  #revenue-statistica{
    margin-bottom: 4%;
  }
 
  #revenue-quotes{
    right:77%;
  }

  #market-gap-top{
    margin:2% 0 0 0;
  }

  #market-gap-pie-chart-mobile{
    display: block;
    padding:1%;
  }

  #market-gap-quote{
    position: static;
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: center;
  }

  #market-gap-quotes{
    width: 10%;
    top: 15px;
    margin-right: 79%;
    margin-top: -3%;
    position: relative;
  }

  #team{
    background-image: url("img/backgrounds/team-bg-mobile.png");
    background-position: left;
  }

  .team-mobile-view{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center; 
  }

  #team-top{
    background-color:#292833 ;
    padding:2% 0 2% 0;
  }


  #team img{
    width:72%;
  }

  #endgame{
    flex-direction: column-reverse;
  }

  #endgame-image-mobile{
    display: block;
    margin: auto;
  }

  #endgame h2{
    display: inline;
  }

  #endgame-left, #endgame-right{
    width:80%;
  }

  #endgame ul{
    padding:0;
  }

  #example{
    background-image: url("img/backgrounds/example-bg-sm.png");
    background-position: right;
  }

  #example-right-top{
    background-color: #FFF;
    margin:0 0 2% 0;
    padding:5%;
  }

  .example-mobile-view{
    display: block;
  }

  #example-left{
    justify-content: center;
  }

  #thank-you{
  background-image: url("img/backgrounds/thankyou-bg-sm.png");
  }

  #thank-you-logo{
    width:78%;
  }

  #thank-you-worldcast-logo{
    width:43%;
  }

  #thank-you-middle{
    justify-content: center;
    margin:0 0 1% 0;
  }

  #thank-you-middle img{
    width: 89%; 
  }

  #thank-you-middle a{
    width:14%;
  }
}


@media screen and (max-width:961px){
  #stop-button{
    opacity: 0;
  }
}

/* HEXAGON SIZING -I need to redo how I've done the hexagons at some point...this is messy*/


@media screen and (min-width:2400px){
  .contain-hex{
    width: 1133px;
    height: 856px;
  }

  .hex1{
    width: 797px;
    height: 654px;
  }
  
  .hex{
    left: 160px;
    top: 103px;
  }
}

@media screen and (max-width:1625px){
.contain-hex{
  width: 650px;
  height: 504px;
}
.hex1{
  width: 483px;
  height: 375px;
}

.hex{
  left: 82px;
  top: 65px;
}
}

@media screen and (max-width:1375px){
  .contain-hex{
    width: 519px;
    height: 394px;
  }
  .hex1{
    width: 380px;
    height: 298px;
}
  
  
  .hex{
    left: 69px;
    top: 49px;
  }
}

@media screen and (max-width:1100px){
  .contain-hex{
    width: 392px;
    height: 297px;
  }

  .hex1{
    width: 301px;
    height: 224px;
  }

  .hex{
    left: 44px;
    top: 37px;
  }
}

@media screen and (max-width:365px){
  .contain-hex{
    width: 269px;
    height: 228px;
  }

  .hex1{
    width: 199px;
    height: 154px;
  }

  .hex{
    left: 33px;
    top: 36px;
  }
}