.loaded .screen1 img.maintext, .loadscreen2 .screen2 img.maintext,
.loadscreen3 .screen3 img.maintext,.loadscreen3 .screen3 img.maintextPortrait,
.menuopen .overlay-navigation > div,
.loadscreen4 .screen4 img.maintext, .loadscreen4 .screen4 img.maintextPortrait,
.loadcontactScreen .contentWarpper
{
  opacity: 0;
-webkit-animation: appearelement 0.3s ease forwards;   /* Safari 4+ */
-moz-animation: appearelement 0.3s ease forwards;   /* Fx 5+ */
-o-animation: appearelement 0.3s ease forwards; /* Opera 12+ */
animation: appearelement 0.3s ease forwards; /* IE 10+, Fx 29+ */
}
.loaded .screen1 img.maintext, .menuopen .overlay-navigation > div, .loadcontactScreen .contentWarpper
{
  animation-delay: 0.7s;
}
.loadscreen2 .screen2 img.maintext,
.loadscreen3 .screen3 img.maintext, .loadscreen3 .screen3 img.maintextPortrait,
.loadscreen4 .screen4 img.maintext, .loadscreen4 .screen4 img.maintextPortrait
{
  animation-delay: 1.8s;
}


@-webkit-keyframes appearelement {
  0%{ opacity: 0;}
100%{ opacity: 1;}
}
@keyframes appearelement
{
  0%{  opacity: 0;}
100%{ opacity: 1;}
}
/* appear 1screen logo end */

.loadscreen2 .screen1 img.maintext, .loadscreen3 .screen2 img.maintext,
.loadscreen4 .screen3 img.maintext, .loadscreen4 .screen3 img.maintextPortrait,
.backtoloadscreen3 .screen4 img.maintext, .backtoloadscreen3 .screen4 img.maintextPortrait
{
  opacity: 1;
-webkit-animation: hideelement 0.3s ease forwards;   /* Safari 4+ */
-moz-animation: hideelement 0.3s ease forwards;   /* Fx 5+ */
-o-animation: hideelement 0.3s ease forwards; /* Opera 12+ */
animation: hideelement 0.3s ease forwards; /* IE 10+, Fx 29+ */

}
.loadscreen2 .screen1 img.maintext, .loadscreen3 .screen2 img.maintext,
 .loadscreen4 .screen3 img.maintext, .loadscreen4 .screen3 img.maintextPortrait,
.backtoloadscreen3 .screen4 img.maintext, .backtoloadscreen3 .screen4 img.maintextPortrait
{
  animation-delay: 0.7s;
}

@-webkit-keyframes hideelement {
  0%{ opacity: 1;}
100%{ opacity: 0;}
}
@keyframes hideelement
{
  0%{  opacity: 1;}
100%{ opacity: 0;}
}
/* hide 1screen logo end */

.loadscreen4header header
{
  top: -100px;
-webkit-animation: appearheader 0.7s ease forwards;   /* Safari 4+ */
-moz-animation: appearheader 0.7s ease forwards;   /* Fx 5+ */
-o-animation: appearheader 0.7s ease forwards; /* Opera 12+ */
animation: appearheader 0.7s ease forwards; /* IE 10+, Fx 29+ */
  animation-delay: 1.5s;
}
.showheader header
{
  top: -100px;
-webkit-animation: appearheader 0.7s ease forwards;   /* Safari 4+ */
-moz-animation: appearheader 0.7s ease forwards;   /* Fx 5+ */
-o-animation: appearheader 0.7s ease forwards; /* Opera 12+ */
animation: appearheader 0.7s ease forwards; /* IE 10+, Fx 29+ */
  animation-delay: 1.5s;
}

@-webkit-keyframes appearheader {
  0%{ top: -100px;}
100%{ top: 0px;}
}
@keyframes appearheader
{
  0%{  top: -100px;}
  100%{   top: 0px;}
}




.loadscreen3 .screen3 img.cursivetext
{
  opacity: 1;
  left: 70vw;
-webkit-animation: cursivetextappear 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: cursivetextappear 0.6s ease forwards;   /* Fx 5+ */
-o-animation: cursivetextappear 0.6s ease forwards; /* Opera 12+ */
animation: cursivetextappear 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.loadscreen3 .screen3 img.cursivetext, .loadscreen4 .screen4 img.cursivetext
{
  animation-delay: 2s;
}
@-webkit-keyframes cursivetextappear {
  0%{left: 70vw;}
100%{left: 148vw;}
}
@keyframes cursivetextappear
{
  0%{  left: 70vw;}
100%{ left: 148vw;}
}




.loadscreen4 .screen3 img.cursivetext
{
  opacity: 1;
  left: 148vw;
-webkit-animation: cursivetexthide 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: cursivetexthide 0.6s ease forwards;   /* Fx 5+ */
-o-animation: cursivetexthide 0.6s ease forwards; /* Opera 12+ */
animation: cursivetexthide 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.loadscreen4 .screen3 img.cursivetext
{
  animation-delay: 0.5s;
}
@-webkit-keyframes cursivetexthide {
  0%{left: 148vw;}
100%{left: 70vw;}
}
@keyframes cursivetexthide
{
  0%{  left: 148vw;}
100%{ left: 70vw;}
}
/* screen 3 cursive text end */


.loadscreen4 .screen4 img.cursivetext
{
  opacity: 1;
  left: -50vw;
-webkit-animation: screen4cursivetextappear 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: screen4cursivetextappear 0.6s ease forwards;   /* Fx 5+ */
-o-animation: screen4cursivetextappear 0.6s ease forwards; /* Opera 12+ */
animation: screen4cursivetextappear 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.loadscreen4 .screen4 img.cursivetext
{
  animation-delay: 2s;
}
@-webkit-keyframes screen4cursivetextappear {
  0%{left: -50vw;}
100%{left: 20vw;}
}
@keyframes screen4cursivetextappear
{
  0%{  left: -50vw;}
100%{ left: 20vw;}
}


.backtoloadscreen3 .screen4 img.cursivetext
{
  opacity: 1;
  left: 20vw;
-webkit-animation: screen4cursivetexthide 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: screen4cursivetexthide 0.6s ease forwards;   /* Fx 5+ */
-o-animation: screen4cursivetexthide 0.6s ease forwards; /* Opera 12+ */
animation: screen4cursivetexthide 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.backtoloadscreen3 .screen4 img.cursivetext
{
  animation-delay: 0.5s;
}
@-webkit-keyframes screen4cursivetexthide {
  0%{left: 20vw;}
100%{left: -50vw;}
}
@keyframes screen4cursivetexthide
{
  0%{  left: 20vw;}
100%{ left: -50vw;}
}
/* screen 4 cursive text end */

.loadscreen3 .nextArrow, .loadscreen4 .backArrow, .backtoloadscreen3 .nextArrow
{
  opacity: 1;
  -webkit-animation: nextarrowappear 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: nextarrowappear 0.6s ease forwards;   /* Fx 5+ */
-o-animation: nextarrowappear 0.6s ease forwards; /* Opera 12+ */
animation: nextarrowappear 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.loadscreen3 .nextArrow, .loadscreen4 .backArrow, .backtoloadscreen3 .nextArrow
{
  animation-delay: 2s;
}
@-webkit-keyframes nextarrowappear {
  0%{bottom: -50%;}
100%{bottom: 20px;}
}
@keyframes nextarrowappear
{
  0%{bottom: -50%;}
100%{bottom: 20px;}
}



.loadscreen4 .nextArrow, .backtoloadscreen3 .backArrow
{
  opacity: 1;
  -webkit-animation: nextarrowhide 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: nextarrowhide 0.6s ease forwards;   /* Fx 5+ */
-o-animation: nextarrowhide 0.6s ease forwards; /* Opera 12+ */
animation: nextarrowhide 0.6s ease forwards; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes nextarrowhide {
  0%{bottom: 20px;}
100%{bottom: -50%;}
}
@keyframes nextarrowhide
{
  0%{bottom: 20px;}
  100%{bottom: -50%;}
}



/* comman css end here */

@media (orientation: landscape) {


.loaded .screen1 .topShape::after, .loadscreen2 .screen2 .topShape::after,
.loadscreen3 .screen3 .topShape::after, .loadscreen4 .screen4 .topShape::after,
.loadcontactScreen .contactScreen .topShape::after
{
    -webkit-animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}
.loadscreen2 .screen2 .topShape::after, .loadscreen3 .screen3 .topShape::after,
.loadscreen4 .screen4 .topShape::after
{
  animation-delay: 1s;
}

@-webkit-keyframes topShape {
  0%{ height: 0vw;}
100%{height: 190vw;}
}
@keyframes topShape{
  0%{ height: 0vw;}
100%{height: 190vw;}
}
  /* ===============top shapecoming  end================ */


.loadscreen2 .screen1 .topShape::after, .loadscreen3 .screen2 .topShape::after,
.loadscreen4 .screen3 .topShape::after, .backtoloadscreen3 .screen4 .topShape::after,
.backtoloadscreen3from4 .contactScreen .topShape::after
{

    -webkit-animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes topShapereverse {
  0%{ height: 190vw;}
100%{height: 0vw;}
}
@keyframes topShapereverse{
  0%{ height: 190vw;}
100%{height: 0vw;}
}

  /* ===============topshape going end ================ */


.loaded .screen1 .bottomShape::after, .loadscreen2 .screen2 .bottomShape::after,
.loadscreen3 .screen3 .bottomShape::after, .loadscreen4 .screen4 .bottomShape::after,
.loadcontactScreen .contactScreen .bottomShape::after {
  -webkit-animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}


.loadscreen2 .screen2 .bottomShape::after, .loadscreen3 .screen3 .bottomShape::after,
.loadscreen4 .screen4 .bottomShape::after
{
  animation-delay: 1s;
}
@-webkit-keyframes bottomShape {
  0%{ height: 0vw;}
100%{height: 190vw;}
}
@keyframes bottomShape{
  0%{ height: 0vw;}
100%{height: 190vw;}
}
  /* ===============bottom shapecoming  end================ */


.loadscreen2 .screen1 .bottomShape::after, .loadscreen3 .screen2 .bottomShape::after,
.loadscreen4 .screen3 .bottomShape::after, .backtoloadscreen3 .screen4 .bottomShape::after{

  -webkit-animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes bottomShapereverse {
  0%{ height: 190vw;}
100%{height: 0vw;}
}
@keyframes bottomShapereverse{
  0%{ height: 190vw;}
100%{height: 0vw;}
}
  /* ===============bottom shape going  end================ */

}


@media (orientation: portrait) {

  /* ===============screen3 start================ */
  .loaded .screen1 .topShape::after, .loadscreen2 .screen2 .topShape::after, .loadscreen3 .screen3 .topShape::after,
  .loadscreen4 .screen4 .topShape::after, .loadcontactScreen .contactScreen .topShape::after
  {

      -webkit-animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
      -moz-animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
      -o-animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
      animation: topShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  }
  .loadscreen2 .screen2 .topShape::after, .loadscreen3 .screen3 .topShape::after,
  .loadscreen4 .screen4 .topShape::after
  {
    animation-delay: 1s;
  }

  @-webkit-keyframes topShape {
    0%{ height: 0vh;}
  100%{height: 190vh;}
  }
  @keyframes topShape  {
    0%{ height: 0vh;}
  100%{height: 190vh;}
}

.loadscreen2 .screen1 .topShape::after, .loadscreen3 .screen2 .topShape::after,
.loadscreen4 .screen3 .topShape::after, .backtoloadscreen3 .screen4 .topShape::after,
.backtoloadscreen3 .contactScreen .topShape::after
{

    -webkit-animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: topShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes topShapereverse {
  0%{ height: 190vh;}
100%{height: 0vh;}
}
@keyframes topShapereverse{
  0%{ height: 190vh;}
100%{height: 0vh;}
}


  .loaded .screen1 .bottomShape::after, .loadscreen2 .screen2 .bottomShape::after, .loadscreen3 .screen3 .bottomShape::after,
  .loadscreen4 .screen4 .bottomShape::after, .loadcontactScreen .contactScreen .bottomShape::after  {

    -webkit-animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: bottomShape 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  }
  .loadscreen2 .screen2 .bottomShape::after, .loadscreen3 .screen3 .bottomShape::after,
  .loadscreen4 .screen4 .bottomShape::after
  {
    animation-delay: 1s;
  }

  @-webkit-keyframes bottomShape {
    0%{ height: 0vh;}
  100%{height: 190vh;}
  }
  @keyframes bottomShape  {
    0%{ height: 0vh;}
  100%{height: 190vh;}
}


.loadscreen2 .screen1 .bottomShape::after, .loadscreen3 .screen2 .bottomShape::after,
.loadscreen4 .screen3 .bottomShape::after, .backtoloadscreen3 .screen4 .bottomShape::after{

  -webkit-animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: bottomShapereverse 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes bottomShapereverse {
  0%{ height: 190vh;}
100%{height: 0vh;}
}
@keyframes bottomShapereverse{
  0%{ height: 190vh;}
100%{height: 0vh;}
}
/* ===============shape bottom going eng================ */
.loadscreen4 .screen4 img.cursivetext
{
  opacity: 1;
  left: -60vw;
-webkit-animation: screen4cursivetextappear 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: screen4cursivetextappear 0.6s ease forwards;   /* Fx 5+ */
-o-animation: screen4cursivetextappear 0.6s ease forwards; /* Opera 12+ */
animation: screen4cursivetextappear 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.loadscreen4 .screen4 img.cursivetext
{
  animation-delay: 2s;
}
@-webkit-keyframes screen4cursivetextappear {
  0%{  left: -60vw;}
  100%{ left: 11vw;}
}
@keyframes screen4cursivetextappear
{
  0%{  left: -60vw;}
100%{ left: 11vw;}
}


.backtoloadscreen3 .screen4 img.cursivetext
{
  opacity: 1;
  left: 11vw;
-webkit-animation: screen4cursivetexthide 0.6s ease forwards;   /* Safari 4+ */
-moz-animation: screen4cursivetexthide 0.6s ease forwards;   /* Fx 5+ */
-o-animation: screen4cursivetexthide 0.6s ease forwards; /* Opera 12+ */
animation: screen4cursivetexthide 0.6s ease forwards; /* IE 10+, Fx 29+ */

}
.backtoloadscreen3 .screen4 img.cursivetext
{
  animation-delay: 1s;
}
@-webkit-keyframes screen4cursivetexthide {
  0%{  left: 11vw;}
100%{ left: -60vw;}
}
@keyframes screen4cursivetexthide
{
  0%{  left: 11vw;}
  100%{ left: -60vw;}
}
/* screen 4 cursive text end */
}