@import url("../fonts/stylesheet.css"); 
.container-fluid{
  font-family: 'Helvetica Neue LT Std';
  line-height: 0.9;
}
.upperImage{
  background-image: url("../images/1.png");
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: -400px;
  background-size: 75vh;  
  position: absolute;
  width: 600px;
  height: 900px;
}

.landingPanel{
  min-height: 100vh;
}
.panel1Bg{
  background-image: url("../images/bg_1.jpg");
  background-repeat: no-repeat;
  background-position-x: left;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.imagePhone{
  height: 50vh;
  margin: 25px 25px 0px 25px;
}

.imageLogo{
  height: 17vh;
  margin-bottom: 5vh;
}
img.soundLogo {
  width: 12vh;
}

.gradientBg{
  background-image: linear-gradient(
    90deg,
    hsl(280deg 41% 42%) 0%,
    hsl(276deg 41% 41%) 11%,
    hsl(272deg 42% 41%) 22%,
    hsl(267deg 43% 40%) 33%,
    hsl(263deg 43% 39%) 44%,
    hsl(259deg 44% 38%) 56%,
    hsl(254deg 44% 37%) 67%,
    hsl(249deg 45% 36%) 78%,
    hsl(243deg 46% 35%) 89%,
    hsl(237deg 50% 33%) 100%
  );
}

.gradientBg1{
  background-image: linear-gradient(
    90deg,
    hsl(280deg 41% 42%) 0%,
    hsl(276deg 41% 41%) 11%,
    hsl(272deg 42% 41%) 22%,
    hsl(267deg 43% 40%) 33%,
    hsl(263deg 43% 39%) 44%,
    hsl(259deg 44% 38%) 56%,
    hsl(254deg 44% 37%) 67%,
    hsl(249deg 45% 36%) 78%,
    hsl(243deg 46% 35%) 89%,
    hsl(237deg 50% 33%) 100%
  );
}

.background-gray1{
  background-image: linear-gradient(
    90deg,
    hsl(280deg 41% 42%) 0%,
    hsl(276deg 41% 41%) 11%,
    hsl(272deg 42% 41%) 22%,
    hsl(267deg 43% 40%) 33%,
    hsl(263deg 43% 39%) 44%,
    hsl(259deg 44% 38%) 56%,
    hsl(254deg 44% 37%) 67%,
    hsl(249deg 45% 36%) 78%,
    hsl(243deg 46% 35%) 89%,
    hsl(237deg 50% 33%) 100%
  );
}



.video1{
  width: 80%;
  height: 100%;
}
.video2{
  width: 80%;
  height: 100%;
}
.textSize1_1{
  font-size: 1.1em;
}
.textSize1_3{
  font-size: 1.3em;
}
.textSize1_6{
  font-size: 1.6em;
}
.textSize2_2 {
  font-size: 2.2em;
}
.textSize2_5 {
  font-size: 2.5em;
}
.textWeightLight{
  font-weight: 200;
}
.textWeightBold{
  font-weight: 600;
}


a.emailLink{
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.emailLink {
  padding-bottom: 4vh;
  display: inline-block;
}
.background-blue{
  background-color: #2850a8;
}

.background-gray{
  background-color:#71767C;
}

.background-gray1{
  background-color:#71767C;
  background-image: none;
}

.text-white{
  color: white;;
}

.text-black{
  color: #2e2d2d;
}

.verticalCenter{
  align-items: center;
  display: flex;
  min-width: 400px;
}

.firstPanel{
  background-image: url("../images/1.png");
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: 172%;
  background-size: 74vh;
  right: 10px;
  position: absolute;
  width: 620px;
  height: 900px;
}
.flex {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
  
img.btn-android,img.btn-ios{
  width: 15vh;
  margin-right: 15px;
  margin-bottom: 8px;
  margin-top: 8px;
}

.social-btns img{
  margin-top: 12vh;
}

.guttersContact{
  width: 30px;
}



  /* Small devices (landscape phones, 576px and up) */
  @media (max-width: 575px) {
    .Section2Text{
      font-size: 2em;
    }
    .videoContainer1{
      width: 90vw;
      height: 45.5vw;
      margin: auto;
      background-image: url(../images/phone_video_container.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position-x: center;
      position: relative;
      padding-top: 3vw;
      padding-bottom: 3vw;
      margin-top: 10vw;
      margin-bottom: 10vw;
    }
    .videoContainer2{
      width: 90vw;
      height: 45.5vw;
      margin: auto;
      background-image: url(../images/phone_video_container.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position-x: center;
      position: relative;
      padding-top: 3vw;
      padding-bottom: 3vw;
      margin-top: 10vw;
      margin-bottom: 10vw;
    }
    .imagePhone {
      height: 40vh;
    }
	
	.imageLogo{
    height: 17vh;
    margin-bottom: 5vh;
	}
  .mobileLogo{
    display: initial;
  }
  .textSize1_6 {
    font-size: 1.1em;
  }
  .textSize2_2 {
    font-size: 1.6em;
  }
  a.emailLink {
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
  }
    html{
      font-size: 15px
    }  
    .firstPanel{
     background-image: none;
    }
    .upperImage{
      background-image: none;
    }
    .verticalCenter {
      text-align: center;
      align-items: center;
      display: flex;
      min-width: 200px;
  }
    .background-gray1{
      background-image: linear-gradient(
        90deg,
        hsl(280deg 41% 42%) 0%,
        hsl(276deg 41% 41%) 11%,
        hsl(272deg 42% 41%) 22%,
        hsl(267deg 43% 40%) 33%,
        hsl(263deg 43% 39%) 44%,
        hsl(259deg 44% 38%) 56%,
        hsl(254deg 44% 37%) 67%,
        hsl(249deg 45% 36%) 78%,
        hsl(243deg 46% 35%) 89%,
        hsl(237deg 50% 33%) 100%
      );
    }
    .gradientBg1{
      background-color:#71767C;
      background-image: none;
    }
    .background-gray2{
      background-image: linear-gradient(
        90deg,
        hsl(280deg 41% 42%) 0%,
        hsl(276deg 41% 41%) 11%,
        hsl(272deg 42% 41%) 22%,
        hsl(267deg 43% 40%) 33%,
        hsl(263deg 43% 39%) 44%,
        hsl(259deg 44% 38%) 56%,
        hsl(254deg 44% 37%) 67%,
        hsl(249deg 45% 36%) 78%,
        hsl(243deg 46% 35%) 89%,
        hsl(237deg 50% 33%) 100%
      );
    }
    .verticalSpacer{
      height: 10vw;
      width: 100%;
    }
    img.btn-android, img.btn-ios {
      width: 15vh;
      margin-right: 0px;
      margin-bottom: 8px;
      margin-top: 8px;
  }
  img.soundLogo {
    margin-top: 3vh;
  }
  }
  /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .firstPanel{
    background-image: none;
   }
   .upperImage{
     background-image: none;
   }
   .textSize1_6 {
    font-size: 1.1em;
  }
  a.emailLink {
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
  }
   .videoContainer1{
    width: 430px;
    height: 240px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 2vh;
    padding-bottom: 6vh;
    margin-top: 8vh;
  }
  .videoContainer2{
    width: 400px;
    height: 230px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 14px;
    padding-bottom: 42px;
    margin-top: 10%;
    margin-bottom: 10vw;
  }
  .gradientBg1{
    background-color:#71767C;
    background-image: none;
  }
  .background-gray1{
    background-image: linear-gradient(
      90deg,
      hsl(280deg 41% 42%) 0%,
      hsl(276deg 41% 41%) 11%,
      hsl(272deg 42% 41%) 22%,
      hsl(267deg 43% 40%) 33%,
      hsl(263deg 43% 39%) 44%,
      hsl(259deg 44% 38%) 56%,
      hsl(254deg 44% 37%) 67%,
      hsl(249deg 45% 36%) 78%,
      hsl(243deg 46% 35%) 89%,
      hsl(237deg 50% 33%) 100%
    );
  }
  .verticalSpacer{
    height: 10vw;
    width: 100%;
  }
  .verticalCenter{
    text-align: center;
  }
  img.soundLogo {
    margin-top: 3vh;
  }
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  

  .firstPanel{
    background-image: none;
   }
   .upperImage{
     background-image: none;
   }

  .textSize1_6 {
    font-size: 1.6em;
  }
  a.emailLink {
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .videoContainer1{
    width: 430px;
    /* height: 240px; */
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
  
    padding-top: 2vh;
    padding-bottom: 6vh;
    margin-top: 8vh;
  }
  .videoContainer2{
    width: 400px;
    height: 230px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 14px;
    padding-bottom: 42px;
    margin-top: 10%;
    margin-bottom: 8%;
  }
 
  .background-gray1{
    background-color:#71767C;
    background-image: none;
  }
  .gradientBg1{
    background-image: linear-gradient(
      90deg,
      hsl(280deg 41% 42%) 0%,
      hsl(276deg 41% 41%) 11%,
      hsl(272deg 42% 41%) 22%,
      hsl(267deg 43% 40%) 33%,
      hsl(263deg 43% 39%) 44%,
      hsl(259deg 44% 38%) 56%,
      hsl(254deg 44% 37%) 67%,
      hsl(249deg 45% 36%) 78%,
      hsl(243deg 46% 35%) 89%,
      hsl(237deg 50% 33%) 100%
    );
  }
   .verticalCenter{
    text-align: center;
  }
  img.soundLogo {
    margin-top: 0vh;
  }
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

  .firstPanel{
    background-image: url("../images/1.png");
    background-repeat: no-repeat;
    background-position-x: 94%;
    background-position-y: 479%;
    background-size: 51vh;
    bottom: 0vh;
  }
  .upperImage{
    background-image: url("../images/1.png");
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: -400px;
    background-size: 51vh;  
    top: 0vh;
  }
  .videoContainer2{
    width: 400px;
    height: 230px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 14px;
    padding-bottom: 42px;
    margin-top: 10%;
    margin-bottom: 8%;
  }
  .verticalCenter{
    text-align: right;
  }
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .firstPanel{
    background-image: url("../images/1.png");
    background-repeat: no-repeat;
    background-position-x: 94%;
    background-position-y: 141%;
    background-size: 51vh;
    bottom: -18vh;
  }
  .upperImage{
    background-image: url("../images/1.png");
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: -215px;
    background-size: 51vh;  
  }
  .videoContainer1{
    min-width: 800px;
    height: 450px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 25px;
    padding-bottom: 71px;
  }
  .videoContainer2{
    width: 600px;
    height: 350px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 20px;
    padding-bottom: 67px;
    margin-top: 10%;
    margin-bottom: 8%;
  }
  .verticalCenter{
    text-align: right;
  }
  .mobileLogo{
    display: none;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1440px) {  
  .firstPanel{
    background-image: url("../images/1.png");
    background-repeat: no-repeat;
    background-position-x: 89%;
    background-position-y: 141%;
    background-size: 50vh;
    bottom: -12vh;
  }
  .upperImage{
    background-size: 51vh;  
  }
  
  .videoContainer1{
    width: 800px;
    height: 450px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 25px;
    padding-bottom: 71px;
  }
  .videoContainer2{
    width: 600px;
    height: 350px;
    margin: auto;
    background-image: url("../images/phone_video_container.png");
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative; 
    padding-top: 20px;
    padding-bottom: 67px;
    margin-top: 10%;
    margin-bottom: 8%;
  }
  .verticalCenter{
    text-align: right;
  }
}