body.iframe { background:rgba(255,255,255,0)!important; } /* Common */ #slider { font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif; margin:0; padding:0; color:#aaa;} #mask { position: relative; } #patient-t-holder { /*overflow: hidden;*/ max-width: 100%; height: 400px; position: relative; display: block; margin:0 20px; padding:0; list-style:none;} #patient-t-holder li { height: 400px; position: absolute; width: 100%; top:0; left:0; display: block; padding:0; margin:0; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} #patient-t-holder li .slides-inner { max-width: 1400px; margin:0 auto; height: 400px; position: relative; font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;} .play.slides { z-index: 2;} #patient-t-holder li.play { opacity: 1; filter:alpha(opacity=100);} .audio-control, .play_slide, .pause_slide {position: absolute; cursor: pointer; bottom: 0; left:0; z-index: 500; width: 50px; height: 37px; background-repeat: no-repeat; background-color: rgba(0,0,0,0.3);} .play_slide, .pause_slide { z-index: 10; } .audio-control, .audio-control.pause, .pause_slide { background-position: center center; -webkit-background-size: 16px 20px; -moz-background-size: 16px 20px; -o-background-size: 16px 20px; background-size: 16px 20px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABQCAYAAABPlrgBAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVHja7NxdcoIwEMDxhSD04xD2TpyTO9VDVAsSKIvi6AMVNmCnzn9fnCEJH79kAy9u1LatELcRQwAKKNZI5g7Yfe5G2w5HKZrGSxw7ed1IPtZv+7GVpa5biyuq6ijSbY1ptukeyOeh10xCVRWiA+jj9OuGpuLc/iuQNb4rX7ykThEkSYcF7/vrdm3SteV/kj6H0l9AxkLbtd/CJj3IWJzbCp2wh6L0IJmb1Ff7LQgz+Tw6IZpeD0EpfTQZ5AbGOHOX/cO3s8cnp5RaHyVztg++e6l29wFdZN73nvKVvC8b8ypz0qy7UmpJwlLAOD5NIvM1000sT7lS+KIFBRRQQAEFFFAIUEABBRRQQAEFFFBAAQUUUEAhQAEFFFBAAQUUUEABBRRQQAEFAlBAAQUUUEABBRRQQAEFFFAIUEABBRRQQPk/KInUQWU/rOOr2l47qjo266+U2ttu0DpO4y2LzZPh5RH/YHfGSg4urAKEFouxxNyiNrE1Bb7KeTeo/UNTz1g9J199TxniPXOTYbSf9l9oH8zXBAl+++iD1t38lyMbmR7X9gVBLg+rtZ7GYl82ZpBTJgSGpkRyLsVxXQZEj2f98XqV1+b1PjGUGBoqd3WbctC5I8ok8vEGCiigrBs/AgwAO8iO8aKxXSIAAAAASUVORK5CYII='); } .audio-control.play, .play_slide { background-position: center center; -webkit-background-size: 16px 20px; -moz-background-size: 16px 20px; -o-background-size: 16px 20px; background-size: 16px 20px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABQCAYAAABPlrgBAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAF1SURBVHja7NxbbsJADIVhsLzDrHPWVJZSCajUQmguc/Pl91MklAz6dMZv9vX2dSuXRy0X6l7y67nA8Y7yA1NAWa/UOLLxewGF1OxGSYcjJ94JjyMV7xZQEqVGGn0nFI40/l4IHOn03QJKsNTIgDPc4cjAswoojlMjk841jSOTzzeJI0b+RwHFeGrE4JWejmMRZTqOZZRp/cYDyvDUeEEZiuMNZciV8orSNTWeUbrhREBpjhMJpVm/iYhSnZqoKFU40VFO4WRBOdRvsqHsSk1GlE2czCgfcUBZ6TeKxTsMSVkpkvK3FpKyAkJSXjBA+WcWQQCh0e6aVFEw8qGcmmESQHIkpXrCTcGIidJ89lEAiZOUrpOxCobv6zNsblrB8IUybaJewbDfU0zsW1Aw7KGY3MShYNjoKeb3tCgYc1DcbfBRMMb1FNf7nRSMfiihNn8JIG2TEnYvnIJRh5JmY6AAcjwpKfdJKhjbKGwafekpgDzrW4ABAMB/PbhARrnXAAAAAElFTkSuQmCC'); } .prev_slide, .next_slide { position: absolute; color:#ffffff; cursor: pointer; z-index: 100; top: 50%; width: 35px; height: 70px; background-position:center center; /*background-color:rgba(0,0,0,0.3);*/ -webkit-background-size: 80% 80%; -moz-background-size: 80% 80%; -o-background-size: 80% 80%; background-size: 80% 80%; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); background-repeat: no-repeat; display:block; visibility: hidden; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; } #mask:hover .prev_slide, #mask:hover .next_slide { visibility: visible; opacity: 0.5; filter:alpha(opacity=50); } #mask:hover .prev_slide:hover, #mask:hover .next_slide:hover { opacity: 1; filter:alpha(opacity=100); } .prev_slide { left: 3%; } .next_slide { right: 3%; } #patient-t-holder .slides img { height: auto; } .slide-text-holder h3.heading { font-size: 25px; font-weight: 300; text-align: left; line-height: 1.6; color: #ffffff; } .slide-text-holder h3.heading big { font-size: 35px; display: block; font-weight: bold; } .slide-text-holder h3.heading small { display: block; font-size:22px; font-weight: 300; } .slide-text-holder h3.heading small b { font-weight: 700; } /*1st Slide*/ .first-p-t img { max-width:90%; } .play.first-p-t .slides-inner { position: relative; z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .first-p-t .inside-text { opacity: 0; filter:alpha(opacity=0); color: #ffffff; position: absolute; z-index: 30; left: 0; top:0; right: 0; bottom:0; text-align: center; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .first-p-t .text-center { height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-transform:translate(50%,50%); -ms-transform:translate(50%,50%); transform:translate(50%,50%);} .first-p-t .text-center > div { -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .first-p-t h2 { font-weight: bold; font-size: 25px; margin: 0; padding:0;} .play.first-p-t .inside-text {opacity: 1; filter:alpha(opacity=100);} .out.first-p-t .inside-text { opacity: 0; filter:alpha(opacity=0); -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} /*2nd Slide*/ .play.second-p-t .slides-inner { position: relative; opacity: 1; filter:alpha(opacity=100); z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .second-p-t .slides-inner .slide-text-holder { position: absolute; padding:20px; left: 50%; width:42%; top: 60%; max-width: 650px; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -o-transition: all ease 0.6s; -ms-transition: all ease 0.6s; transition: all ease 0.6s; -webkit-transition-delay: 2s; transition-delay: 2s;} .second-p-t img { position: absolute; left:-15%; width: 45%; height: 100%; bottom: 0; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .play.second-p-t img, .out.second-p-t img { opacity: 1; filter:alpha(opacity=100); left:3%; } .play.second-p-t .slide-text-holder, .out.second-p-t .slide-text-holder { top: 50%; opacity: 1; filter:alpha(opacity=100);} /*3rd Slide*/ .play.third-p-t .slides-inner { position: relative; opacity: 1; filter:alpha(opacity=100); z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .third-p-t .slides-inner .slide-text-holder { position: absolute; padding:20px; left: 50%; width:42%; top: 60%; max-width: 650px; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -o-transition: all ease 0.6s; -ms-transition: all ease 0.6s; transition: all ease 0.6s; -webkit-transition-delay: 2s; transition-delay: 2s;} .third-p-t img { position: absolute; left:-15%; width: 45%; height: 90%; bottom: 5%; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .play.third-p-t img, .out.third-p-t img { opacity: 1; filter:alpha(opacity=100); left:3%; } .play.third-p-t .slide-text-holder, .out.third-p-t .slide-text-holder { top: 50%; opacity: 1; filter:alpha(opacity=100);} /*4th Slide*/ .play.fourth-p-t .slides-inner { position: relative; opacity: 1; filter:alpha(opacity=100); z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .fourth-p-t .slides-inner .slide-text-holder { position: absolute; padding:20px; left: 50%; width:42%; top: 60%; max-width: 650px; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -o-transition: all ease 0.6s; -ms-transition: all ease 0.6s; transition: all ease 0.6s; -webkit-transition-delay: 2s; transition-delay: 2s;} .fourth-p-t img { position: absolute; left:-15%; width: 45%; height: 90%; bottom: 5%; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .play.fourth-p-t img, .out.fourth-p-t img { opacity: 1; filter:alpha(opacity=100); left:3%; } .play.fourth-p-t .slide-text-holder, .out.fourth-p-t .slide-text-holder { top: 50%; opacity: 1; filter:alpha(opacity=100);} /*5th Slide*/ .play.fifth-p-t .slides-inner { position: relative; opacity: 1; filter:alpha(opacity=100); z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .fifth-p-t .slides-inner .slide-text-holder { position: absolute; padding:20px; left: 50%; width:42%; top: 60%; max-width: 650px; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -o-transition: all ease 0.6s; -ms-transition: all ease 0.6s; transition: all ease 0.6s; -webkit-transition-delay: 2s; transition-delay: 2s;} .fifth-p-t img { position: absolute; left:-15%; width: 45%; height: 90%; bottom: 5%; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .play.fifth-p-t img, .out.fifth-p-t img { opacity: 1; filter:alpha(opacity=100); left:3%; } .play.fifth-p-t .slide-text-holder, .out.fifth-p-t .slide-text-holder { top: 50%; opacity: 1; filter:alpha(opacity=100);} /*6th Slide*/ .play.sixth-p-t .slides-inner { position: relative; opacity: 1; filter:alpha(opacity=100); z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .sixth-p-t .slides-inner .slide-text-holder { position: absolute; padding:20px; left: 50%; width:42%; top: 60%; max-width: 650px; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -o-transition: all ease 0.6s; -ms-transition: all ease 0.6s; transition: all ease 0.6s; -webkit-transition-delay: 2s; transition-delay: 2s;} .sixth-p-t img { position: absolute; left:-15%; width: 45%; height: 90%; bottom: 5%; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .play.sixth-p-t img, .out.sixth-p-t img { opacity: 1; filter:alpha(opacity=100); left:3%; } .play.sixth-p-t .slide-text-holder, .out.sixth-p-t .slide-text-holder { top: 50%; opacity: 1; filter:alpha(opacity=100);} /*Last Slide*/ .play.lastanimation .slides-inner { position: relative; z-index: 10; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .lastanimation .inside-text { opacity: 0; filter:alpha(opacity=0); color: #ffffff; position: absolute; z-index: 30; left: 0; top:0; right: 0; bottom:0; text-align: center; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} .lastanimation .text-center { height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-transform:translate(50%,50%); -ms-transform:translate(50%,50%); transform:translate(50%,50%);} .lastanimation .text-center > div { -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .lastanimation h2 { font-weight: bold; font-size: 25px; margin: 0; padding:0;} .play.lastanimation .inside-text {opacity: 1; filter:alpha(opacity=100);} .out.lastanimation .inside-text { opacity: 0; filter:alpha(opacity=0); -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} #mask #patient-t-holder .out.slides, #mask #patient-t-holder .out.slides * { -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; -ms-transition: all ease 0.5s; transition: all ease 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} @media only screen and (min-width:768px) and (max-width: 1400px) { #patient-t-holder .slides .slides-inner img { max-width: 45% !important; } /*#patient-t-holder .slides.second-p-t .slides-inner img { max-width: 100% !important; left: -5%;} #patient-t-holder .slides .slides-inner .slide-text-holder { background: rgba(255,255,255,0.75); }*/ } @media only screen and (min-width:768px) and (max-width: 900px) { #patient-t-holder .slides .slides-inner .slide-text-holder h3.heading { font-size: 20px; } #patient-t-holder .slides .slides-inner .slide-text-holder h3.heading big { font-size: 30px; } } @media only screen and (max-width: 767px) { img { max-width: 100%; } #patient-t-holder li.slides h3 { font-size: 20px; font-weight: 300; } #patient-t-holder li.slides h3 big { font-size: 30px; } #mask #patient-t-holder li.slides.first-p-t img { position: inherit; max-width: 100%; left: auto; right: auto; top:auto; bottom:auto; -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0);} #patient-t-holder, #patient-t-holder li .slides-inner, #patient-t-holder li { height: 400px;} #patient-t-holder li .slides-inner .slide-text-holder { left:0; right: 0; bottom: 0; top:auto; max-width:100%; padding: 0; background: rgba(0,0,0,0.6); z-index: 300; width: auto; text-align: center; padding-left: 0; -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0);} #patient-t-holder li .slides-inner .slide-text-holder h3, #patient-t-holder li .slides-inner .slide-text-holder h3 em { color: #ffffff; } #patient-t-holder li .slides-inner .slide-text-holder h3 { padding: 20px; text-align: center; } #patient-t-holder li.slides img { position: absolute; width: auto; max-width: 100%; bottom:0; max-height: 70%; left: 50%; max-height: auto; top:auto; -webkit-transform:translate(-50%,0); -ms-transform:translate(-50%,0); transform:translate(-50%,0); opacity: 0; filter:alpha(opacity=0); -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; -webkit-transition-delay: 1s; transition-delay: 1s;} #patient-t-holder li.slides.third-p-t .slides-inner { background-position: center center; } #patient-t-holder li.slides.second-p-t .slides-inner .slide-text-holder, #patient-t-holder li.slides.third-p-t .slides-inner .slide-text-holder, #patient-t-holder li.slides.fourth-p-t .slides-inner .slide-text-holder, #patient-t-holder li.slides.fifth-p-t .slides-inner .slide-text-holder, #patient-t-holder li.slides.sixth-p-t .slides-inner .slide-text-holder { bottom:auto; top:0; } #patient-t-holder li.slides.second-p-t .slides-inner .slide-text-holder h3 strong { display: inline; } .fourth-p-t, .fifth-p-t { background-size: auto 60%; -webkit-background-size:auto 60%; -moz-background-size:auto 60%; } #patient-t-holder li.play img, #patient-t-holder li.out img { opacity: 1; width: auto; filter:alpha(opacity=100); top: 35%;} #patient-t-holder li.slides img, #patient-t-holder li.play.slides img, #patient-t-holder li.out.slides img { top:auto; max-height:auto; opacity: 1; z-index: 200; filter:alpha(opacity=100); } #patient-t-holder li#last-cares .text-center > div { -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); text-align: center;} #patient-t-holder li#last-cares .inside-text img, #patient-t-holder li#last-cares.play .inside-text img, #patient-t-holder li#last-cares.out .inside-text img { position: relative; max-width: 80%; margin: 0 auto; left: auto; right: auto; top:auto; bottom:auto; -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); } } @media only screen and (max-width: 400px) { #patient-t-holder li.second-p-t.slides h3.heading, #patient-t-holder li.fourth-p-t.slides h3.heading { font-size: 20px; } } /*This is for Menu Animation*/ body.iframe #patient-t-holder, body.iframe #patient-t-holder, body.iframe #patient-t-holder li .slides-inner, body.iframe #patient-t-holder li { height:250px; margin:0; } body.iframe #patient-t-holder li .slides-inner { background:rgba(0,0,0,0.5); border-radius:10px; } @media only screen and (max-width:980px) { body.iframe #patient-t-holder li.slides img { left:3%; top:50%; max-width:40%; max-height:90%; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); } body.iframe #patient-t-holder li .slides-inner .slide-text-holder { left:45%; right:3%; background:rgba(255,255,255,0); top:50% !important; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); } body.iframe #patient-t-holder li.slides h3 { font-size:18px; text-align:left; } body.iframe .prev_slide { left:0;} body.iframe .next_slide { right:30px;} body.iframe .et-pb-icon { font-size:60px; } } @media only screen and (max-width:600px) { body.iframe #patient-t-holder li.slides img { left: 50%; top: 70%; max-width: 40%; max-height: 50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } body.iframe #patient-t-holder li .slides-inner .slide-text-holder { left: 0; right: 0; background:rgba(255,255,255,0); top:0 !important; -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); } body.iframe #patient-t-holder li.slides h3 { text-align:center; font-size:16px !important; background:rgba(0,0,0,0.3); } }