/* ----------------> media 400 <---------------------*/
/* Extra small devices (phones, 400px and down) */

@media only screen and (min-width: 301px) and (max-width: 400px)  {
    .nav-menu {
        position: fixed;
        left: -110%;
        top: 0rem;
        flex-direction: column;
        background-color:#103249;
        color:#51B5A6;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
    }

    nav .company-name {
      font-size: 18px  !important;
      margin: 0;
    }

    .traditionally a {
      color: #51B5A6;
      display: initial;
      line-height: 0;
      padding:  0;
      text-decoration: none;
      font-weight: bolder;
      font-size: 15px;
  }

    .header .navbar{
     
      padding-left: 0px;
      padding-right: 40px;
    }

    .nav-menu.active {
        left: 0;
    }

    .w-screen {
      
      height: 100vw;
    }

    .nav-item {
        margin: 2.5rem 0;
    }

    .nav-item > li > a{
      color: rgb(255, 254, 254);
      display: block;
      line-height: 2em;
      padding: 1.5em 1em;
      text-decoration: none;
      font-family:poppins;
    }
  
    .nav-item  a:hover {
        color:#5CCE3E;
    } 

    .hamburger {
        position: fixed;
        display: block;
        cursor: pointer;
        padding-left: 400px;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        -webkit-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        -webkit-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
    }

    .grid-item .secure-your-site {
      font-size: 25px;
      padding-top: 5%;
      padding-left: 40px;
    }

    .grid-item .from-f {
      font-size: 25px;
      line-height: 10px;
      padding-top: 10px;
      padding-left: 40px;
    }

    .grid-item .hackers-are {
      font-size: 15px;
      line-height: 20px;
      text-align: left;
      padding: 30px 40px ;
    }

    .grid-item .phone-img {
      display: none;
     
    }

    /* .grid-item .phone-img-small{
      width: 250px; 
      height: 490px; 
      display: inline;
    } */

    .grid-item .grid-container2 p .download {
      /* float: center; */
      position: inherit;
      margin: -40px;
      width: 133px;
      height: 45px;
      display: inline-block;
      padding: 0;
    }

    /* .grid-item .grid-container4 p a .download {
      position: inherit;
      margin: 15px;
      max-width: 120px;
      height: 55px;display: inline-block;
      padding: 5px;
      width:100%;
    } */

    .grid-container2-nav a .download-nav {
      float: center;    
      width: 150px;
      height: 55px;
      display: inline;
      margin: 1px !important;
    }

    

    .gradient-purple {
      height: 995px !important;
    } 

    .grid-item .belt-img-small {
      float: center;
      width: 335px;
      height: 290px;
      padding: 20px;
      display: inline;
      max-width: 100%;
    }

    .grid-item .traditionally {
      font-size: 15px;
      line-height: 20px;
      text-align: left;
      padding: 30px 40px ;
    }

    .grid-item .belt-img{
      display: none;   
    }

    .grid-item .earn-your-badge {
      font-size: 25px;
      padding-top: 5px;
      padding-left: 40px;
    }

    .earn-your-badge {
      font-size: 25px;
      padding-top: 5px;
      padding-left: 40px;
    }

    .grid-container1 .secure-your-site-pink {
      font-size: 25px;
      padding-top: 20px;
      padding-left: 40px;
      text-align: left;
    }

   .grid-container1 .more-sophisticated{
      font-size: 15px;
      line-height: 20px;
      text-align: left;
      padding: 30px 40px ;
    }

    .gradient-pink {
      height: 550px ;
    } 

    .grid-container3  .ninja-img{
    display: none;
    }

    .grid-item .lessons-gif {
        display: none;
    }

    .grid-item .footer-logo-img-small{
      display: inline;
      float: center;
      width: 125px; 
      height: 105px; 
      margin: 50px 100px 0 100px ;
    }

    .grid-item .footer-logo-img-nav{
      display: inline;
      float: center;
      width: 125px; 
      height: 105px; 
      margin: 50px 100px 0 100px ;
    }
    
    .grid-item .footer-company-name-small{
      display: inline;
      color: rgb(255, 254, 254);
      display: block; 
      font-size: 25px;font-weight: 500;
      font-family:poppins;
      margin: 20px 15px 15px 0px;
    }

    .grid-item .footer-company-name-nav{
      display: inline;
      color: rgb(255, 254, 254);
      display: block; 
      font-size: 25px;font-weight: 500;
      font-family:poppins;
      margin: 20px 15px 0px 0px;
    }

    .gradient-navy {
      height: 1010px !important;
    }

    .grid-container3 .footer-card  {
      margin: 145px 0 0 -266px !important;
       
    }

    .footer-card {
      width: 290px !important;
      height: 435px !important;
  }

    .grid-container2 .footer-card {  
      margin-left: 130px;
    }

    .pad-left{
      padding-left: 20px !important;
    }

    .grid-item .footer-logo-img{
      display: none;
    }
    
    .grid-item .footer-company-name{
      display: none;
    }

    .grid-item .phone-img-small {
      width: 250px;
      height: 490px;
      display: none;
  }

  .phone-border {
    width: 260px;
    height: 513px;
    margin-top: -495px;
    display: none;
  }


  .phone-border-no-video {
    width: 250px;
    height: 490px;
    display: inline;
  }

    /* img.preview-video-mask {
      position: absolute;
      top: 0;
      left: 0;
  } */


    /* .grid-item .footer-logo-img-nav{
      display: none;
    }
    
    .grid-item .footer-company-name-nav{
      display: none;
    } */

    .grid-item ul > li > a{
      color: rgb(255, 254, 254);
      line-height: 1.7em;
      padding: 0.9em 0 0 2.8em;
      text-decoration: none;
      font-size: .9em;
    }

    .grid-item ul.no-bullets {
      margin: 0;
      padding: 0;
    }

    .grid-item ul > li > a:hover {
      color:#5CCE3E;
    }

    .all-white {
     height: 852px !important;
    }

    .grid-item .privacy-title {
      font-size: 25px;
      padding-top: 40px;
      padding-left: 40px;
      margin-left: 0;
  }

    .grid-item .term-title {
      text-align: left;
      font-size: 20px;
      padding: 40px 0 10px 40px;
      font-family: poppins;
      font-weight: bolder;
  }

    .grid-item .all-you {
      font-size: 15px;
      line-height: 20px;
      text-align: left;
      padding: 0px 40px;
      margin-left: 0;
  }

  .grid-item .accordionMenu label {
    height: auto !important;
   
  }

  .grid-item .accordionMenu .content .inner {
    font-size: 1.3rem;
    color: #103249;
    line-height: 1.5;
    padding: 10px;
    text-align: left;
  }

  .grid-item .accordionMenu .content .inner a {
    font-size: 1.3rem;
    color: #526DF1;
    line-height: 1.5;
    padding: 0px;
    text-align: left;
    display: inline-block;
}

.grid-item .all-you a {
  font-size: 15px;
  color: #526DF1;
  line-height: 1.5;
  padding: 0px;
  text-align: left;
  display: inline-block;
}

  .grid-item .accordionMenu{
    margin-left: 40px;
    margin-right: 40px;
}

  .grid-item .privacy-sub {
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    padding: 20px 40px;
    margin: 0;
  }

  .nav-item{
    margin: 0px 0 !important;
  }

  .share-thoughts {
    font-size: 20px;
}

.bg-navy-blue {
  height: 1000px !important;
}

.gradient-navy {
  height: 970px;
}

.grid-container4  .download{
  display: none;
}

/* .text-navy-blue {
  color: #103249;
  font-weight: bold;
  line-height: 30px !important;
} */

/* .pad-foot-nav{
  padding: 3% 0 0 5% ;
  margin-left: 6%;
} */



}

/* -------------> end media 600 */

@media only screen and (min-width: 515px) {
  .phone-border {
    width: 292px;
}

}

@media only screen and (min-width: 546px) {
  .phone-border {
    width: 310px;
}
}

@media only screen and (min-width: 564px) {
  .phone-border {
    width: 315px;
}
}

@media only screen and (min-width: 569px) {
  .phone-border {
    width: 320px;
}
}

@media only screen and (min-width: 571px) {
  .phone-border {
    width: 322px;
}
}

@media only screen and (min-width: 576px) {
  .phone-border {
    width: 332px;
}


@media only screen and (min-width: 581px) {
  .phone-border {
    width: 334px;
}

}

@media only screen and (min-width: 588px) {
  .phone-border {
    width: 348px;
}

}

@media only screen and (min-width: 326)  {
  .gradient-pink {
    height: 505px !important;
}
}

/* @media only screen and (min-width: 317)  {
  .gradient-purple {
    height: 980px !important;
  } 
} */
}