body
{
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

html
{
  scroll-behavior: smooth;
}


.scene, .scene2
{

width: 100%;

height: 100%;

display: flex;

perspective: 880px;

/* background: blue; */

transition: transform 0.2s ease-out;

justify-content: center;

align-items: center;

transform-style: preserve-3d;
/* animation: mobileAnim 35 infinite elinearalternate;  */

/* perspective-origin: 50% 41%; */
}

@keyframes mobileAnim {
  0%
  {
    transform: rotateX(-2.7deg) rotateY(6.28875deg) rotateZ(1.45573deg);
  }
  100%
  {
    transform: rotateX(2.24deg) rotateY(-4.815deg) rotateZ(-1.11458deg);
  }
}

.image3
{

position: absolute;
width: 261px;
}

.phonesSect .image3
{

 width: 239px;
}

/* phone stuff */
.phone-outline
{
  width: 260px;position: absolute;
}

.innervid
{
  height: 535px;
  width: 269px;
  top: -20px;
  left: -13px;
  position: absolute;
}

.phone-inner-div
{
    position: relative;
    width: 240px;
    height: 496px;
    top: 10px;
    left: 10px;
    background: black;
    border-radius: 40px;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 800px;
}

img.border-image
{
    width: 100%;
    position: absolute;
    top: 0;
    pointer-events: none;
}
/* ------------- */

.overflow
{
  overflow: hidden;
  width: 100%;
  /* background: blue; */
}

.rightText
{

/* width: 40%; */

display: flex;

flex-direction: column;

justify-content: center;

margin-left: 62%;

/* align-items: center; */

margin-left: 59px;
}



.whiteone img
{
  width: auto;
}

.threeContainer
{

  width: 100%;

  height: 100vh;
}

.threeGroup {
    position: absolute;
    /* transition: none!important; */
    transform-style: preserve-3d;
    perspective: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section
{

display: flex;

height: 100vh;

width: 100%;

position: relative;

min-height: 856px;

/* background: #1e1ea9; */
}


#imageSelector
{
  position: fixed;
  padding: 10px;
  top: 150vh; /*off screen*/
  /* bottom: 200px;
  width: 10vw;
  display: flex;
  flex-wrap: wrap; */
  /* flex-direction: column; */
  /* opacity: 0.0; */
}

.controls
{

  position: fixed;

  display: flex;

  flex-direction: column;

  top: 0;

  right:  0;

  background: #ffffffb8;

  padding: 42px;
}

.center
{
  display:none;
  width: 9px;

  height: 9px;

  background: black;

  border-radius: 50%;
}

.seeThrough
{
  opacity: 0.3;
}


h1
{
  position: absolute;
  padding: 10px;
}

h1, h2
{

  font-family: Bomber;

  width: -moz-fit-content;

  width: fit-content;
  white-space: nowrap;
  /* text-shadow: 2px 2px 6px #0000006b; */

  font-weight: 100;

  user-select: none;

  font-size: 38px;
}

h2
{

/* font-size: 47px; */
}

p
{
  font-family: Nasa;
  line-height: 26px;
}

.darkButton:hover
{
  border-color: #051587;color: #051587;box-shadow: none;
}

.darkButton
{

transform: none;

background: #051587;

color: white;

padding: 15px 39px;

width: 59%;

margin-top: 64px;

box-shadow: -4px 5px 9px #0515873d;

border: 2px solid #051587;

/* border-radius: 6px; */
}

.phonesSect p
{

  width: 465px;

  margin: 0px;
}


/* phone */

.phoneTop
{

  z-index: 2;
}

.phoneBot
{

  position: relative;

  top: -9.8%;

  z-index: 4;
}

.phoneOverflow
{

  border-radius: 50px;

  width: 95%;

  left: 2.5%;

  position: relative;

  top: -7%;
}

.fullPhone
{

  width: 486px;

  height: 1185px;

  display: flex;

flex-direction: column;

position: absolute;

/* background: white; */
}

.frame
{

position: absolute;

height: 88%;

width: 5%;

z-index: 1;

top: -2px;

/* top: 2; */
}

.leftPhoneFrame
{

left: 0;

transform: rotate(180deg);
}

.rightPhoneFrame
{

right: 0;

/* top: 0; */

/* transform: rotate(180deg); */
}

.phoneInner
{

position: relative;

height: 80%;

/* background: white; */

border-radius: 20px;

display: flex;

/* height: 454px; */
}

.overflow100 .overflow
{
  width: 100%;
}

.overflow100 .image3
{
  width: 14vw;
}


.phonegrid .image3
{
  width: 13vw;
}

.phoneScene
{
  transition: perspective-origin 0.4s ease-out, transform 0.2s ease-out;
}

.threeBgSection
{

display: flex;

width: 100%;

height: 100%;

justify-content: center;

align-items: center;
}

.twoColumn
{

position: absolute;

background: #0202b169;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;
}

form
{

width: 50%;

padding: 60px;
}

input, textarea
{

font-family: 'Nasa';

padding: 10px;

width: 100%;

margin-bottom: 20px;

border-radius: 6px;

box-sizing: border-box;

border-style: solid;

border: 2px solid #051587;

letter-spacing: 0.5px;
}

#mailtoLink
{

margin-top: 33px;

font-size: 21px;
}

a
{

color: #051587;
}

input[type='submit']
{
  background: #051587;
  color: white;
  cursor: pointer;
  margin: 0;
}

.leftSide
{
  width:50%;
  padding: 39px;
  padding-left: 80px;
}

.formDiv
{

/* position: absolute; */

background: url('wordbg.jpg');

padding: 20px;

width: 66%;

background-size: cover;

font-family: 'Nasa';

border-radius: 6px;

height: 60%;

/* text-align: center; */

display: flex;

/* justify-content: center; */

align-items: center;

/* flex-wrap: wrap; */
}

#loadScreen
{
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  opacity: 1;
  z-index: 1;
  transition: all 1s ease;
  pointer-events: none;
}

#loadPercent
{
    /* transform: translate3d(0px, 155px, 75px); */
    color: black;
    /*transform: translate(50%);*/
    left: 50%;
    position: absolute;
    top: 44%;
    z-index: 100;
    font-family: impact;
    /* font-weight: 900; */
    text-stroke: 1px solid white;
    -webkit-text-stroke: 1px white;
    letter-spacing: -4px;
    font-size: 100px;
    margin:0;
}

.mobSect
{
  display: none;
}

.mobScene
{
  perspective: 800px;
}


@font-face {
    font-family: Bomber;
    src: url("bomb.otf") format("opentype");
}
@font-face {
    font-family: Nasa;
    src: url("nasa.otf") format("opentype");
}

/* @media only screen and (max-width: 1000px)
{

  }
} */

@media only screen and (max-width: 600px)
{
  .mobSect
  {
    display: flex;
  }

  .bigScreenSect
  {
    display:none;
  }

  .scene, .scene2
  {
    animation: mobileAnim 3s infinite ease alternate;
  }
}