

.section-testimonial{
    visibility: visible; 
    background: white;
    min-height: auto !important;
    padding-top: 6em !important;
    padding-bottom: 6em !important;
    min-height: auto !important; 
    visibility: visible; 
    padding-top: 6em!important; 
    padding-bottom: 6em !important;
}

.section-testimonial.engineers-testimonial{
    background: white; 
    display: grid; 
    animation: animateBg 90s linear infinite; 
    background-image: linear-gradient(90deg,#642a30,#68364c,#bf355b,#6a5a61, #a93e5c); 
    background-size: 800% 100%;
}


.section-testimonial.brazil-engineers-display-none{
    display: none;
}


/*  Text Endorsment Top of Apple Device */

.section-testimonial .title-endorsed{
    text-align:center; 
    text-transform: none; 
    padding-left:2em; 
    padding-right:2em;
}

.section-testimonial .jumbotron-press-ny{
    position: relative;
    background: white;
    border-radius: 10px;
    margin-top: 0;
    display: inline-block;
    background:transparent;
    margin-bottom: 0;
}

@media only screen and (max-width: 991px){
    .section-testimonial .jumbotron-press-ny{
        margin-top: 7%;
    }
}

.section-testimonial .hero-testimonial-text-wrapper{
    padding-left: 1em;
    padding-top: 0.3em;
    padding-right: 1em;
    padding-bottom: 0.5em;
}

.section-testimonial .hero-blockquote {
    margin-bottom:0;
    padding-right: 0.5em;
    padding-left: 0.5em;
}

@media only screen and (max-device-width: 991px){
    .section-testimonial blockquote {
      font-size: 1.10em;
      line-height: 1.5em;
      font-style: italic;
      margin-bottom: 1.1304347826087em;
    }
  }

.section-testimonial .quote-sentence{
    color: #2e2e2e;
    font-family: Raleway;
}



/************************************************************************/
/*                       VIDEO BACKGROUND BLUR                          */
/************************************************************************/ 


.section-testimonial .notebook-inner{
    margin:   0 auto;
    position: relative;
    padding-top: 2em !important;
    padding-bottom: 2em;
    /* margin-top:3%; */
  }

@media only screen and (max-width: 991px){
    .section-testimonial .notebook-inner{
        /* padding-top: 15%; */
        padding-bottom: 10%;
    }
}


/** Video Inside Apple Device **/

.section-testimonial .video-apple-wrapper {
    position: relative;
    width: 46.4875vw;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {
    .section-testimonial .video-apple-wrapper {      
      width: 35.56296vw;
    }
}

@media only screen and (max-width: 991px){
    .section-testimonial .video-apple-wrapper{
        width: 83.5vw;
        margin: 0 auto;
    }
}

.section-testimonial .youtube-background {
    filter: blur(4px) brightness(1.15) saturate(1.3);
    display: block;
    border: 1px solid rgb(223, 229, 233);
    position: absolute;
    top: calc(1.071vw + 2px);
    left: calc(1.09395vw + 2px);
    background-image: none;
    width: calc(33.507vw - 4px);
    height: calc(25.245vw - 4px);
    transition: visibility 0.9s;
}



@media only screen and (max-width: 991px) {
    .section-testimonial .youtube-background{
        height: calc(58.5vw - 4px);
        top: calc(2.8vw + 2px);
        left: calc(2.8vw + 2px);
        width: calc(78.3vw - 4px);
    }
}

.section-testimonial .video-apple-wrapper:hover .youtube-background {
    visibility: hidden;
}


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

    .section-testimonial .video-apple-wrapper .youtube-background {
    visibility: hidden;

    }
}

.section-testimonial .video-text-overlay {
    width: calc(33.507vw - 4px);
    height: calc(25.245vw - 4px);
    position: absolute;
    top: calc(1.071vw + 2px);    
    left: calc(1.09395vw + 2px);
    display: block;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1001;
    border-radius: 8px;
}


@media only screen and (max-width: 991px) {
    .section-testimonial .video-text-overlay {
        width: 78.3vw;
        height: 58.5vw;
        top: 2.8vw;
        left: 2.8vw;
    }
}


/*inner overlay inside the video */

.section-testimonial .video-text-overlay-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


/* Text inside testimonial rectangle */

.section-testimonial .first-tier-text-overlay {
    height: 34%;
    text-align: center;
}

.section-testimonial .top-left-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #bf3542 transparent transparent transparent;
    border-top-width: 10.368vw;    
    border-right-width: 20.736vw;
    border-left-width: 0;
    border-bottom-width: 0;
    float: left;
    padding-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: border-top-width 1s, border-right-width 1s, height 1s, border-top-width 0s;
}

@media only screen and (max-width: 991px) {
    .section-testimonial .top-left-triangle {
        border-top-width: 23.76vw;
        border-right-width: 47.5244vw;
    }
}

@media only screen and (max-width: 576px) {
    .section-testimonial .top-left-triangle {
        border-top-width: 23.328vw;
        border-right-width: 46.6605vw;
    }
}

.section-testimonial .video-apple-wrapper:hover .top-left-triangle{
    border-right-width: calc(16.7535vw - 2px);
    border-color: #bf3542;
    height: 100%;
  }

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

    .section-testimonial .video-apple-wrapper .top-left-triangle{
    border-right-width: calc(16.7535vw - 2px);
    border-color: #bf3542;
    height: 100%;
  }
}

@media only screen and (max-width: 991px) {
    .section-testimonial .video-apple-wrapper:hover .top-left-triangle{
        border-right-width: calc(39.15vw);
        border-color: #bf3542;
        height: 100%;
    }
}


@media only screen and (max-width: 991px) {
    .section-testimonial .video-apple-wrapper .top-left-triangle{
        border-right-width: calc(39.15vw);
        border-color: #bf3542;
        height: 100%;
    }
}


/***************** ******************/

/* Top part of the text on the left side */

.section-testimonial .half-pdf-medium{
    position: absolute;
    font-size: 90%;
    line-height: 1.8vw;
    top: 2vw;
    left: 2vw;
    transition-delay: 3s;
    transition: visibility 0.5s, opacity 0.5s;
    color: white;
    text-align: left;
    font-family: Raleway;
}

  

@media only screen and (max-device-width: 991px){
    .section-testimonial .half-pdf-medium{
        font-size: 3.5vw;
        line-height: 4vw;
    }
}

@media only screen and (max-device-width: 576px){
    .section-testimonial .half-pdf-medium{
        font-size: 4.5vw;
        line-height: 6.5vw;
    }
}

.section-testimonial .video-apple-wrapper:hover .half-pdf-medium{
    visibility: hidden;
    opacity: 0;
}

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

    .section-testimonial .video-apple-wrapper .half-pdf-medium{
    visibility: hidden;
    opacity: 0;
    }
}

/** The Text Part when the the Apple device is on hover**/


@media only screen and (max-device-width: 420px){
    .section-testimonial .wrapper-best-of-both {
        top: 7.5%;
    }
}

/** Apple iPhoneX  **/

@media only screen and (max-device-width: 812px){
    .section-testimonial .wrapper-best-of-both{
    font-size: max(4.2vh,7vw);
    }
}

/* The Break point between the right and left side is at col-md */

@media only screen and (max-device-width: 991px) {
    .section-testimonial .wrapper-best-of-both {
        font-size: max(3vh, 4vw);
        line-height: max(3.5vh, 4vw);   
    }
}


@media only screen and (max-device-width: 420px) {
    .section-testimonial .wrapper-best-of-both {
    line-height: max(2.8vh, 3vw);
    }
}


.section-testimonial .wrapper-best-of-both {
    background: transparent;
    color: transparent;
    transition-delay: 3s;
    transition: padding 0s, background 0s , color 0s;
    width: 81%;
    position: absolute;
    font-size: 2.5vw;
    line-height: 2.2vw;
    top: 12.5%;
    left: 10%;
    z-index: 2;
}

.video-apple-wrapper:hover .wrapper-best-of-both{
    color: white;
    transition: color 1s, background 1s, width 1s, height 1s;
}

@media only screen and (max-width: 991px){
   .video-apple-wrapper .wrapper-best-of-both{
        color: white;
        transition: color 1s, background 1s, width 1s, height 1s;
    } 
}

/*** The First Claim */

.section-testimonial .first-best-claim{
    line-height: 3vh;
    font-size: 1.9vw;
 }

@media only screen and (max-device-width: 812px){
    .section-testimonial .first-best-claim{
      font-size: min(6.5vh, 4.2vw);
      line-height: 3vw;
    }
}


@media only screen and (max-device-width: 767px){
    .section-testimonial .first-best-claim{
        font-size: min(8vh, 4.2vw);
        line-height: 3vw;
   }
}


@media only screen and (max-device-width: 420px){
    .section-testimonial .first-best-claim{
        line-height: 4vh;
        font-size: min(6vh, 4.2vw);
    }
}


/******************* Text In the Middle *********************/


.section-testimonial .second-tier-text-overlay {
    height: 34%;
    position: relative;
    z-index: 2;
}


.section-testimonial .docpitch-logo-hero {
    margin-bottom:0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}


.section-testimonial .video-apple-wrapper:hover .docpitch-logo-hero{
    visibility: hidden;
}

@media only screen and (max-width: 991px){
    .section-testimonial .video-apple-wrapper .docpitch-logo-hero{
        visibility: hidden;
    }
}

/*** Play Autopilot Button Wrapper ***/

.section-testimonial .play-autopilot-btn-wrapper{
    visibility: hidden;
}

.section-testimonial .play-autopilot-btn-wrapper {
    text-align: center;
    display: block;
    position: absolute;
    width: 100%;
    transform: translateY(-50%);
    /* vertical-align: middle; */
    top:50%;
}

@media only screen and (max-width: 991px){
    .section-testimonial .section-hero .play-autopilot-btn-wrapper{
      top: 50%;
    }
}

.section-testimonial  .video-apple-wrapper:hover .play-autopilot-btn-wrapper{
    visibility: visible;
}


@media only screen and (max-width: 991px){
    .section-testimonial  .video-apple-wrapper .play-autopilot-btn-wrapper{
        visibility: visible;
    }

}
/**************** Taking care of the Icon Play *************/

.section-testimonial .icon-Video-5 {
    opacity: 1;
    font-size: 3.5vw;
    cursor: pointer;
    background: #ff6171;
    border-radius: 50%;
}

@media only screen and (max-width: 991px){
    .section-testimonial .icon-Video-5 {
      font-size: 7vw;
    }
}

/************ End of middle of screen *******************/

/************** Bottom part of the iPad   ***************/

.section-testimonial .bottom-right-triangle{
    width: 0;
    height: 0;border-style: solid;
    border-top-width: 0;
    border-right-width: 0;
    border-color: transparent transparent #ff6171 transparent;
    float: right;
    padding-bottom: 0px;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: border-bottom-width 1s, border-left-width 1s, height 1s , border-bottom-width 0s;
    border-bottom-width: 10.368vw;
    border-left-width: 20.736vw;
}

@media only screen and (max-width: 991px){
    .section-testimonial .bottom-right-triangle{
        border-bottom-width: 23.76vw;
        border-left-width: 47.5244vw;
      }
}

@media only screen and (max-width: 576px){
    .section-testimonial .bottom-right-triangle{
        border-bottom-width: 23.328vw;
        border-left-width: 46.6605vw;
    }
}

.section-testimonial .video-apple-wrapper:hover .bottom-right-triangle{
    border-left-width: calc(16.7535vw - 2px);
    border-color: #ff6171;
    height: 100%;
}


@media only screen and (max-width: 991px){
    .section-testimonial .video-apple-wrapper .bottom-right-triangle{
      border-left-width: calc(39.15vw);
      border-color: #ff6171;
      height: 100%;
    }
}




/************* Now Taking care of the text  ************/

.section-testimonial .half-video-medium{
    position: absolute;
    font-size: 90%;
    bottom: 2vw;
    right: 2vw;
    line-height: 2vw;
    transition-delay: 3s;
    transition: visibility 0.5s, opacity 0.5s;
    color: white;
    text-align: right;
    font-family: Raleway;
}

@media only screen and (max-device-width: 991px){
    .section-testimonial .half-video-medium{
        font-size: 3.5vw;
        line-height: 4vw;
    }
}

@media only screen and (max-device-width: 576px){
    .section-testimonial .half-video-medium{
        font-size: 4.5vw;
        line-height: 6.5vw;
    }
}
    
.section-testimonial .video-apple-wrapper:hover .half-video-medium{
    visibility: hidden;
    opacity: 0;
}


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

    .section-testimonial .video-apple-wrapper .half-video-medium{
        visibility: hidden;
        opacity: 0;
    }
}

@media screen and (min-width: 1400px) {
    .section-testimonial .half-pdf-medium{
      font-size: 180%;
    }

    .section-testimonial .half-video-medium{
      font-size: 180%;
    }
}

  
  /** Second part of text which shows up on the right side */

.section-testimonial .wrapper-items {
    background: transparent;
    color: transparent;
    transition-delay: 3s;
    transition: padding 0s, background 0s , color 0s;
    width: 80%;
    position: absolute;
    font-size: 2vw;
    line-height: 1.8vw;
    bottom: 25%;
    right: 10%;
    z-index: 2;
}


  /* The Break point between the right and left side is at col-md */

@media only screen and (max-device-width: 991px) {
    .section-testimonial .wrapper-items {
        font-size: max(2.4vh, 3.2vw);
        line-height: max(3.2vh, 3.6vw);
    }
}


@media only screen and (max-device-width: 812px){
    .section-testimonial .wrapper-items{
        font-size: max(3.4vh,5.7vw);
    }
}



@media only screen and (max-device-width: 420px) {
    .section-testimonial .wrapper-items {
        line-height: max(2.5vh, 2.7vw);
    }

    .section-testimonial .wrapper-items {
        bottom: 25%;
    }
}


.section-testimonial .video-apple-wrapper:hover .wrapper-items{
    color: white;
    transition: color 1s, background 1s, width 1s, height 1s;
 }



@media only screen and (max-device-width: 991px){
    .section-testimonial .video-apple-wrapper .wrapper-items{
        color: white;
        transition: color 1s, background 1s, width 1s, height 1s;
    }
}

/***** Taking of the actual list of items in the rectangle */

/* Maybe change the name below */

.section-testimonial .hero-more-deals{
    font-size:max(0.67em, 16px);
    line-height: 1.2em;
}

@media only screen and (max-width: 1024px){
    .section-testimonial .hero-more-deals{
        font-size:max(0.85em, 12px);
        line-height: 1.1em;
    }
}

@media only screen and (max-width: 812px){
    .section-testimonial .hero-more-deals{
        font-size:max(0.55em, 12px);
        line-height: 0.85em;
    }
}


@media only screen and (max-width: 767px){
    .section-testimonial .hero-more-deals{
        font-size:max(0.65em, 12px);
        line-height: 0.85em;
    }
}

@media only screen and (max-width: 420px){
    .section-testimonial .hero-more-deals{
        font-size:max(0.50em, 10px);
        line-height: 0.7em;
    }
}

   /***** Bottom of Apple Device text  ****/

.section-testimonial .hero-testimonial-image{
    border-radius: 50%;
    height: 12vh;
    margin-bottom: 0;
    margin-right: 0;
    /* border: 2px solid #ff6171; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation: fadeinout;
    animation: fadeinout 5s linear infinite;
    animation-delay: 2.5s;
}


.section-testimonial .author-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    /* margin-top: -0.3vh; */    
}

.section-testimonial .hero-quote-author{
    text-align: left;
    font-family: Raleway;
    padding-left: 10px;
    padding-right: 10px;
}
  
.section-testimonial .hero-quote-name{
    color: #2e2e2e;
    font-weight:800;
    font-family: Raleway;
}

  

  /* .video-apple-wrapper:hover .left-hero-block{
    background: white;
  } */




  .video-play-button {
    position: relative;
    z-index: 10;
     margin:30px;
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    /* background: #fa183d; */
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
    animation: fadeinout 5s linear infinite;
  }
  
  .video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #ba1f24;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
  }
  
  .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #fa183d;
    border-radius: 50%;
    transition: all 200ms;
  }
  
  .video-play-button:hover:after {
    background-color: darken(#fa183d, 10%);
  }
  
  .video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
      border-top: 22px solid transparent;
      border-bottom: 22px solid transparent;
  }
  
  @keyframes pulse-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  @keyframes fadeinout{
    0%, 100% { opacity: 0;}
    40%,60% { opacity: 1;}
  }
  

.section-testimonial .dual-media-svg {
    display: block;
    font: 9em 'Raleway';
    width: 80%;
    max-height: 60px;
    margin: 0 auto;
}


/**** ANimation ANTS ************/


.section-testimonial .text-copy {
    fill: none;
    stroke: lavender;
    stroke-dasharray: 6% 29%;
    stroke-width: 3px;
    stroke-dashoffset: 0%;
    letter-spacing: double;
    animation: stroke-offset 5.5s infinite linear;
  }
  
.section-testimonial .text-copy:nth-child(1){
  stroke: #ff6171;
  animation-delay: -1;
  }
  
.section-testimonial .text-copy:nth-child(2){
  stroke: #a3a3a3;
  animation-delay: -2s;
  }
  
.section-testimonial .text-copy:nth-child(3){
  stroke: #bf3542;
  animation-delay: -3s;
  }
  
.section-testimonial .text-copy:nth-child(4){
  stroke: #d75576;
  animation-delay: -4s;
  }
  
.section-testimonial .text-copy:nth-child(5){
  stroke: #b9b9b9;
  animation-delay: -5s;
  }
  
  


  




  



 







 