html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #fff;
  font-family: 'Poppins-Regular';
}

body {
overflow: visible;
}

/* Css Loader */
@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
.containAll {
  display: flex;
  position: fixed;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 99999999999999;
  background: #fff;
}
.containAll .containLoader {
  position: relative;
  height: 60px;
  width: 60px;
  margin: auto;
}
.containAll .containLoader .circleGroup {
  position: absolute;
  height: 100%;
  width: 100%;
}
.containAll .containLoader .circle-1 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 30ms;
  animation-delay: 30ms;
}
.containAll .containLoader .circle-2 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 60ms;
  animation-delay: 60ms;
}
.containAll .containLoader .circle-3 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 90ms;
  animation-delay: 90ms;
}
.containAll .containLoader .circle-4 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 120ms;
  animation-delay: 120ms;
}
.containAll .containLoader .circle-5 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
.containAll .containLoader .circle-6 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 180ms;
  animation-delay: 180ms;
}
.containAll .containLoader .circle-7 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 210ms;
  animation-delay: 210ms;
}
.containAll .containLoader .circle-8 {
  border: 7px solid #00bf6f;
  border-radius: 50%;
  box-sizing: border-box;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  -webkit-animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  animation: rotate 1.2s cubic-bezier(0, 0.58, 1, 0.3) infinite;
  -webkit-animation-delay: 240ms;
  animation-delay: 240ms;
}
.containAll .containLoader .innerText {
  position: absolute;
  font-family: "Quicksand", sans-serif;
  bottom: -40px;
  -webkit-animation: flash 1.2s ease-in-out infinite;
          animation: flash 1.2s ease-in-out infinite;
  pointer-events: none;
}

@-webkit-keyframes rotate {
  50% {
    border: 1px solid #00bf6f;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
  }
  100% {
    -webkit-transform: rotatez(360deg);
            transform: rotatez(360deg);
  }
}

@keyframes rotate {
  50% {
    border: 1px solid #00bf6f;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
  }
  100% {
    -webkit-transform: rotatez(360deg);
            transform: rotatez(360deg);
  }
}
@-webkit-keyframes flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Css Loader - End */

#progress {
  position: absolute;
  width: 100%;
  height: 3px;
}

#bar {
  background-color: #fff;
  height: 100%;
  transition: width 0.1s ease;
}

#bar.hide {
  opacity: 0;
  transition: opacity 1s ease;
}

#container {
  width: 100%;
  height: 100%;
}

#container .panolens-canvas{
  width: 100%;
}

.panaroma-switch-elements {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  margin: auto;
  height: 432px;
}

.panaroma-switch {
  width: 40px;
  height: 40px;
  font-size: 0;
  display: block;
  margin: 10px;
  margin: 59px 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  outline: none;
  position: relative;
  cursor: pointer;
}

.panaroma-switch:after {
  content: '';
  height: 63px;
  width: 2px;
  background: #fff;
  position: absolute;
  top: 100%;
}

.panaroma-switch:first-child {
  margin-top: 0;
}

.panaroma-switch:last-child:after {
  content: none
}

.panaroma-switch.active {
  background: #4CAF50;
}

.panaroma-switch.active:before {
  width: 15px;
  height: 15px;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #fff;
  border-radius: 50%;
}

.sound-on-off img.speaker-icon {	
  position: fixed;	
  top: 25px;	
  left: 25px;	
  z-index: 999;	
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";	
  filter: alpha(opacity=50);	
  cursor: pointer;	
  -webkit-transition: all 0.2s ease-in-out;	
  -moz-transition: all 0.2s ease-in-out;	
  -o-transition: all 0.2s ease-in-out;	
  -ms-transition: all 0.2s ease-in-out;	
  transition: all 0.2s ease-in-out;	
}	
.sound-on-off img.speaker-icon.speaker-off {	
  display: none;	
}

body {
  background-size: cover;
}

* {
  padding: 0;
  box-sizing: border-box;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

#container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}

.panolens-infospot {
  top: -40px !important
}

#btn_change_size {
  position: absolute;
  height: 30px;
  left: 10px;
  top: 10px;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 1;
}

#modal-container .modal {
  width: 100%;
  height: 100%;
}

#modal-container .sidepanel-close-button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
  background: #00000052;
  border: 0;
  border-left: 1px solid #cdcdcdad;
  border-bottom: 1px solid #cdcdcdad;
  padding: 13px 22px;
  outline: none
}

#modal-container .sidepanel-close-button svg {
  width: 17px;
}

#modal-container .img-sec {
  /* overflow: hidden; */
  width: 60%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.12);
}

/* .left-sec-content{
  border-right: 1px solid rgba(0, 0, 0, 0.1607843137254902);
}

.right-sec-content{
border-left: 1px solid rgba(0, 0, 0, 0.23137254901960785);
} */

#modal-container .video-sec{	
  height: 100vh;	
  position: sticky;	
  top: 0;	
  background: #0000000d;	
}	
iframe{	
  border:0	
}	
.video-sec .existing-iframe-example.youtube {	
  height: 350px;	
}	
.video-sec .existing-iframe.vimeo {	
  height: 280px;	
}	
.video-sec video, .existing-iframe-example.youtube, .existing-iframe-example.vimeo {	
  width: 100%;	
  padding: 20px;	
  height: 397px;
  max-width: 600px;	
  position: absolute;	
  left: 0;	
  right: 0;	
  top: 50%;	
  /* bottom: 0; */	
  transform: translateY(-50%);	
  margin: auto;	
}

.inner-element video {
  width: 80%;
  height: 297px;
  /* padding: 50px; */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 550px;
}

.inner-element {
  position: relative;
  height: 100%;
}

.inner-element img {
  height: 100%;
  object-position: center;
  object-fit: cover;
  width: 100%;
}

#modal-container .text-sec {
  position: relative;
}

#modal-container .title-container {
  text-align: left;
}

#modal-container .title-container{
  padding: 3% 5%;
  overflow: hidden;
}

#modal-container .text-sec{
  padding: 2% 2%;
      display: flex;
    align-items: center;
    height: 100%;
}

#modal-container .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, #modal-container .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
  right: -26px;
}

#modal-container .text-sec h2 {
  font-size: 48px;
  font-family: sans-serif;
  color: #fff;
  line-height: 1;
  margin-bottom: 5px;
}

#modal-container .img-sec .inner-element img {
  height: 100vh;
}

#modal-container .btm-img {
  position: absolute;
  bottom: 0;
  width: 100%;
}

#modal-container .btm-img img {
  width: 100%;
}

#modal-container.one {
  transform: scaleY(0.01) scaleX(0);
  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one .modal-background .modal {
  transform: scale(0);
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one.out {
  transform: scale(1);
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one.out .modal-background .modal {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two {
  transform: scale(1);
}

#modal-container.two .modal-background {
  background: rgba(0, 0, 0, .0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two .modal-background .modal {
  opacity: 0;
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two+.content {
  animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container.two.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two.out .modal-background .modal {
  animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.two.out+.content {
  animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three {
  z-index: 0;
  transform: scale(1);
}

#modal-container.three .modal-background {
  background: rgba(0, 0, 0, .6);
}

#modal-container.three .modal-background .modal {
  animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three+.content {
  z-index: 1;
  animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three.out .modal-background .modal {
  animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.three.out+.content {
  animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four {
  z-index: 0;
  transform: scale(1);
}

#modal-container.four .modal-background {
  background: rgba(0, 0, 0, .7);
}

#modal-container.four .modal-background .modal {
  animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four+.content {
  z-index: 1;
  animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four.out .modal-background .modal {
  animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.four.out+.content {
  animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five {
  transform: scale(1);
}

#modal-container.five .modal-background {
  background: rgba(0, 0, 0, .0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five .modal-background .modal {
  transform: translateX(-1500px);
  animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container.five.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.five.out .modal-background .modal {
  animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six {
  transform: scale(1);
}

#modal-container.six .modal-background {
  background: rgba(0, 0, 0, .0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six .modal-background .modal {
  background-color: transparent;
  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six .modal-background .modal h2, #modal-container.six .modal-background .modal p {
  opacity: 0;
  position: relative;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six .modal-background .modal .modal-svg rect {
  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container.six.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modal {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modal h2, #modal-container.six.out .modal-background .modal p {
  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modal .modal-svg rect {
  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven {
  transform: scale(1);
}

#modal-container.seven .modal-background {
  background: rgba(0, 0, 0, .0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven .modal-background .modal {
  height: 75px;
  width: 75px;
  border-radius: 75px;
  overflow: hidden;
  animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven .modal-background .modal h2, #modal-container.seven .modal-background .modal p {
  opacity: 0;
  position: relative;
  animation: modalContentFadeIn 0.5s 1.4s linear forwards;
}

#modal-container.seven.out {
  animation: slowFade 0.5s 1.5s linear forwards;
}

#modal-container.seven.out .modal-background {
  background-color: rgba(0, 0, 0, .7);
  animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven.out .modal-background .modal {
  border-radius: 3px;
  height: 162px;
  width: 227px;
  animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.seven.out .modal-background .modal h2, #modal-container.seven.out .modal-background .modal p {
  animation: modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, .8);
  vertical-align: middle;
}

#modal-container .modal-background .modal {
  background: white;
  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
  position: relative;
  background: #0b260d;
  display: flex;
}

#modal-container .modal-background .modal p {
  font-weight: 400;
  line-height: 30px;
}

#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

#modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

.content {
  min-height: 100%;
  height: 100%;
  background: white;
  position: relative;
  z-index: 0;
}

.content h1 {
  padding: 75px 0 30px 0;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
}

.content .buttons {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.content .buttons .button {
  display: inline-block;
  text-align: center;
  padding: 10px 15px;
  margin: 10px;
  background: red;
  font-size: 18px;
  background-color: #efefef;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.content .buttons .button:hover {
  color: white;
  background: #009bd5;
}

.main-sec {
  width: 100%;
  height: 100%;
  position: relative;
}

/* watermark start */

.watermark-block {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  pointer-events: none;
}

.watermark-block img {
  width: 120px;
}

.individual-section {
  /*text-align: center;*/
  width: 100% !important;
}

.img-sec-individual {
  height: 100%;
}

/* .img-sec-individual .inner-element img, .img-sec-individual .inner-element video {
  height: 100% !important;
} */

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, .0);
  }
  100% {
    background: rgba(0, 0, 0, .7);
  }
}

@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, .7);
  }
  100% {
    background: rgba(0, 0, 0, .0);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}

@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}

@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes slideUpLarge {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideDownLarge {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(150px);
  }
}

@keyframes blowUpContent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99.9% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
  }
}

@keyframes blowUpContentTwo {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blowUpModalTwo {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes roadRunnerIn {
  0% {
    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}

@keyframes roadRunnerOut {
  0% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }
  100% {
    transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}

@keyframes sketchIn {
  0% {
    stroke-dashoffset: 778;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 778;
  }
}

@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}

@keyframes modalFadeOut {
  0% {
    background-color: white;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -20px;
  }
}

@keyframes bondJamesBond {
  0% {
    transform: translateX(1000px);
  }
  80% {
    transform: translateX(0px);
    border-radius: 75px;
    height: 75px;
    width: 75px;
  }
  90% {
    border-radius: 3px;
    height: 182px;
    width: 247px;
  }
  100% {
    border-radius: 3px;
    height: 162px;
    width: 227px;
  }
}

@keyframes killShot {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(300px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes fadeToRed {
  0% {
    box-shadow: inset 0 0 0 rgba(201, 24, 24, .8);
  }
  100% {
    box-shadow: inset 0 2000px 0 rgba(201, 24, 24, .8);
  }
}

@keyframes slowFade {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@media only screen and (max-width: 900px) and (orientation: landscape) {
  #modal-container.one .modal-background .modal{
    overflow: auto;
    height: 100vh;
  }

  #modal-container.one .modal-background .modal .img-sec{
    position: sticky;
    top: 0;
  }
}

@media only screen and (max-width: 900px) and (orientation: portrait) {
  #modal-container .img-sec.img-sec-individual video,#modal-container .img-sec.img-sec-individual iframe,
  #modal-container .img-sec.img-sec-individual img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: auto;
  }
  #modal-container .img-sec.img-sec-individual{
   height: 100%;
  }
  .right-sec-content,.right-sec-content{
    border: 0;
  }
  #modal-container {
    height: auto;
  }
  #modal-container .modal {
    display: block;
    overflow: auto;
    height: 100vh;
  }
  #modal-container .img-sec {
    width: 100% !important;
    height: 50%;
    position: relative;
  }
  #modal-container .img-sec .inner-element img {
    height: auto;
  }
  #modal-container .video-sec {
    width: 100% !important;
    height: 50%;
    text-align: center;
    position: relative;
  }
  .inner-element video, .video-sec video, .existing-iframe-example.youtube, .existing-iframe-example.vimeo {
    outline: none;
    width: 100%;
    padding: 18px;
    position: relative;
    top: auto;
    transform: none;
  }
  #modal-container .text-sec {
    width: 100% !important;
  }
  #modal-container.one .modal-background .modal{
    flex-direction: column !important;
  }
}