html{
    height: 100%;
    width: 100%;
    margin: 0%;
    padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}

.gridcontainer{
    display: grid;
    grid-template-columns: 10vw 10vw 10vw 20vw 50vw;
    grid-template-rows:10vh 70vh 20vh;

}
.grid-item{
    text-align: center;
    padding: 3%;
    font-size: 30em;
}

.item1,.item3, .item4{
    grid-column: 1 / span 4;
    text-align: left;
}
.item1{
    grid-row: 1;
    
}
.item2{
    display: flex;

    grid-column: 5;
    grid-row: 1 / span 3;
    font-size: 100%;
    background:#C52146;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center
    
}

.item2_hidden{
    display: none;
    grid-column: 1/ span 5;
    grid-row: 4;
    font-size: 100%;
    background:#C52146;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center
    
}

.item3{
    grid-row: 2;
    font-size: 1.7em;
    
    
}
#html-spinner{
    width:40px;
    height:40px;
    border:4px solid #fcd779;
    border-top:4px solid white;
    border-radius:50%;
  }
  
  #html-spinner, #svg-spinner{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1.2s;
    -webkit-animation-name: rotate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    
    -moz-transition-property: -moz-transform;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 1.2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    
    transition-property: transform;
    animation-name: rotate; 
    animation-duration: 1.2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @-webkit-keyframes rotate {
      from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
  }
  
  @-moz-keyframes rotate {
      from {-moz-transform: rotate(0deg);}
      to {-moz-transform: rotate(360deg);}
  }
  
  @keyframes rotate {
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
  }
  
  
  
  body{
    
    
    -webkit-font-smoothing: antialiased;
    color:#393D3D;
  }
  
  #container{
    width:50%;
    max-width:700px;
    margin:1em auto;
    float: top;
    
  }
  

  /* #btn {
    position: absolute;
    transition: .5s;
    
    padding: 10px;
    height: 40px;
    width: 150px;
} */
  

  
  #html-spinner, #svg-spinner{
    position:absolute;
    top:80px;
    margin-left:-24px;
    color: #C52146;
  }
  
  #html-spinner{
    left:25%; 
  }
  
  #svg-spinner{
    left:75%; 
  }
  
  #html-para, #svg-para{
    position:absolute;
    top:100px;
    width:40%;
    padding:5%;
    text-align:center;
  }
  
  #svg-para{
    left:50%;
  }


.item4{
 
 font-size: 1em;
 color:grey;
 
 
}

.iphoneImage{
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 300px;
   height: 480px;
   animation-name: irritant;
   position: relative;
   animation-duration: 0.3s; 
   animation-iteration-count: infinite;
}

.iphoneImage_hidden{
    display: none;
 }
 
    @keyframes irritant {
        0%   { left:0px; top:0px;}
        25%  { left:0px; top:0px;}
        50%  { left:0px; top:100px;}
        75%  { left:0px; top:100px;}
        100% { left:0px; top:0px;}
      }
      .milkshake{ 
        animation-name: milk;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        position: relative;
        
        
      }
      @keyframes milk {
        from   {    transform: rotateX(0deg);}
    to { transform: rotateY(360deg);
    }