body{
    background:url(../images/inspiredpage/background.png);
    background-repeat: no-repeat;
background-size:cover;
    width:100%;
    height:100vh;

}

.inspired_content{
    display:block;
 position:relative;
width: 80%;
left: 90px;
top:300px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 23px;

color: #FFFFFF;

transform: rotate(0.28deg);
}
.title{
    display:block;
 position:relative;
width: 80%;
left: -174px;
top:300px;

font-family: Gill Sans;
font-style: normal;
font-weight: 600;
font-size: 50px;
line-height: 60px;
text-align: center;

color: #00247D;
}
.c{

}
.a{
    display:block;
    position:relative;   
}


.g{
    display:block;
    position:relative;   

}
.e{
    display:block;
    position:relative;   
}

#linkback{
    position: absolute;
    width: 100%;
left: 62px;
top: 600px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 34px;

color: #00247D;  
}
#link1{
    position: absolute;
    width: 100%;
left: 102px;
top: 600px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 34px;

color: #00247D;
}
#link2{
    position: absolute;
    width: 100%;
left: 200px;
top: 600px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 34px;

color: #00247D;
}
.cssanimation, .cssanimation span {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.cssanimation span { display: inline-block }

.elevateRight { animation-name: elevateRight }
@keyframes elevateRight {
    from {
        transform: translateY(100%) rotate(20deg);
        transform-origin: left;
    }
    40% {
        transform: rotate(-20deg);
        transform-origin: left;
    }
    65% {
        transform: rotate(0deg);
        transform-origin: left;
    }
}

:root {
    --mainColor: #860101;
  }
a {
    color: var(--mainColor);
    text-decoration: none;
  }
  
  a:hover {
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 2px var(--mainColor);
  }
  
  @supports not(-webkit-text-stroke: 2px red) {
    a:hover {
      text-shadow:
        3px 3px 0 var(--mainColor),
        -1px -1px 0 var(--mainColor),
        1px -1px 0 var(--mainColor),
        -1px 1px 0 var(--mainColor),
        1px 1px 0 var(--mainColor);
    }
  }



  .c{
    position: absolute;
    width: 49px;
    height: 115px;
    left:1200px;
    top: -30px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 100px;
    line-height: 115px;
    /* identical to box height */
    
    color: rgba(4, 22, 66, 0.38);
    
  }
  .a{
    position: absolute;
    width: 49px;
    height: 115px;
    left:1200px;
    top: 33px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 100px;
    line-height: 115px;
    /* identical to box height */
    
    color: rgba(4, 22, 66, 0.38);
    
  }
.g{
    position: absolute;
    width: 49px;
    height: 115px;
    left:1200px;
    top: 103px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 100px;
    line-height: 115px;
    /* identical to box height */
    
    color: rgba(4, 22, 66, 0.38);
}
.e{
    position: absolute;
    width: 49px;
    height: 115px;
    left:1200px;
    top: 223px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 100px;
    line-height: 115px;
    /* identical to box height */
    
    color: rgba(4, 22, 66, 0.38);
}
.c_reg{
    position: absolute;
    width: 43px;
    height: 113px;
    left: 1200px;
    top:380px;
    
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size: 100px;
    line-height: 113px;
    
    color: rgba(255, 255, 255, 0.5);
}
.a_reg{
    position: absolute;
    width: 43px;
    height: 113px;
    left: 1200px;
    top: 450px;
    
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size: 100px;
    line-height: 113px;
    
    color: rgba(255, 255, 255, 0.5);
}
.g_reg{
/* g */

position: absolute;
width: 43px;
height: 113px;
left: 1200px;
top: 520px;
    

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size: 100px;
line-height: 113px;

color: rgba(255, 255, 255, 0.5);

}
.e_reg{
    position: absolute;
    width: 45px;
    height: 113px;
    left:1200px;
    top: 600px;
    
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size: 100px;
    line-height: 113px;
    
    color: rgba(255, 255, 255, 0.5);
}
.a_bold{

    position: absolute;
    width: 58px;
    height: 116px;
    left:1200px;
    top: 640px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 100px;
    line-height: 116px;
    /* identical to box height */
    
    color: rgba(4, 22, 66, 0.38);
    
}
.g_bold{
  
        position: absolute;
        width: 49px;
        height: 115px;
        left:1200px;
        top: 700px;
        
        font-family: Gill Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 100px;
        line-height: 115px;
        /* identical to box height */
        
        color: rgba(4, 22, 66, 0.38);
    }
    

.e_bold{

}
















@media screen and (max-width:800px) {
    body{
        position: absolute;
        background:url(../images/mobile/inspired.png);
        background-repeat: no-repeat;
        background-color: #CF142B;

    }
    .inspired_content{
        position: absolute;
    width: 80%;
    height: 263px;
    left: 20px;
    top: 320px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 18px;
    
    color: #FFFFFF;
    }
    .c{
        position: absolute;
    width: 40px;
    height: 103px;
    left: 400px;
    top: -33px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 90px;
    line-height: 103px;
    
    color: rgba(4, 22, 66, 0.38);
    
    }
    .a{
    /* a */
    
    position: absolute;
    width: 39px;
    height: 103px;
    left: 400px;
    top: 41px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 90px;
    line-height: 103px;
    
    color: rgba(4, 22, 66, 0.38);
    }
    .g{
        /* g */
    
    position: absolute;
    width: 39px;
    height: 103px;
    left: 400px;
    top: 112px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 90px;
    line-height: 103px;
    
    color: rgba(4, 22, 66, 0.38);
    
    
    
    
        }
        .e{
            position: absolute;
    width: 35px;
    height: 103px;
    left: 400px;
    top: 207px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 90px;
    line-height: 103px;
    
    color: rgba(4, 22, 66, 0.38);
        }
        .c_reg{
            position: absolute;
            width: 42px;
            height: 63px;
            left: 400px;
            top: 288px;
            
            font-family: Gill Sans;
            font-style: italic;
            font-weight: 300;
            font-size: 90px;
            line-height: 102px;
            
            color: rgba(255, 255, 255, 0.5);
    
        }
        .a_reg{
            position: absolute;
            width: 44px;
            height: 102px;
            left: 400px;
            top: 359px;
            
            font-family: Gill Sans;
            font-style: italic;
            font-weight: 300;
            font-size: 90px;
            line-height: 102px;
            /* identical to box height */
            
            color: rgba(255, 255, 255, 0.5);
        }
       .g_reg{
    
    position: absolute;
    width: 39px;
    height: 102px;
    left: 400px;
    top: 424px;
    
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size: 90px;
    line-height: 102px;
    /* identical to box height */
    
    color: rgba(255, 255, 255, 0.5);
    
    
       }
    .e_reg{
    /* e */
    
    position: absolute;
    width: 35px;
    height: 102px;
    left: 400px;
    top: 524px;
    
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size: 90px;
    line-height: 102px;
    /* identical to box height */
    
    color: rgba(255, 255, 255, 0.5);
    }
    .a_bold{
    
    
        position: absolute;
        width: 52px;
        height: 104px;
        left: 400px;
        top: 605px;
        
        font-family: Gill Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 90px;
        line-height: 104px;
        
        color: rgba(4, 22, 66, 0.38);
        
    }
    .g_bold{
        position: absolute;
    width: 51px;
    height: 104px;
    left: 400px;
    top: 670px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 90px;
    line-height: 104px;
    
    color: rgba(4, 22, 66, 0.38);
    
    }
    .e_bold{
    
    position: absolute;
    width: 35px;
    height: 104px;
    left: 400px;
    top: 751px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 90px;
    line-height: 104px;
    
    color: rgba(4, 22, 66, 0.38);
    
    
    }
    .title{
        position: absolute;
    width: 70%;
    height: 95px;
    left:-40px;
    top: 280px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    
    color: #00247D;
    }

  #link1{
  
position: absolute;
width: 550px;
height: 21px;
left: 29px;
top: 641px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 17px;

color: #860101;

  }
  :root {
    --mainColor: #860101;
  }
  #link2{
    position: absolute;
    width: 550px;
    height: 21px;
    left: 146px;
    top: 641px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 17px;
    
    color: #860101;
  }
    a {
        color: var(--mainColor);
        text-decoration: none;
      }
      
      a:hover {
        color: transparent;
        text-decoration: none;
        -webkit-text-stroke: 2px var(--mainColor);
      }
      
      @supports not(-webkit-text-stroke: 2px red) {
        a:hover {
          text-shadow:
            3px 3px 0 var(--mainColor),
            -1px -1px 0 var(--mainColor),
            1px -1px 0 var(--mainColor),
            -1px 1px 0 var(--mainColor),
            1px 1px 0 var(--mainColor);
        }
      }

}

/* ----------- iPhone X ----------- */


  
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {
body{
    background:url(../images/mobile/inspired.png);
    background-repeat: no-repeat;
}
.inspired_content{
    position: absolute;
width: 239px;
height: 263px;
left: 4px;
top: 320px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;

color: #FFFFFF;
}
.c{
    position: absolute;
width: 40px;
height: 103px;
left: 252px;
top: -33px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);

}
.a{
/* a */

position: absolute;
width: 39px;
height: 103px;
left: 257px;
top: 41px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);
}
.g{
    /* g */

position: absolute;
width: 39px;
height: 103px;
left: 253px;
top: 112px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);




    }
    .e{
        position: absolute;
width: 35px;
height: 103px;
left: 252px;
top: 207px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);
    }
    .c_reg{
        position: absolute;
        width: 42px;
        height: 63px;
        left: 255px;
        top: 288px;
        
        font-family: Gill Sans;
        font-style: italic;
        font-weight: 300;
        font-size: 90px;
        line-height: 102px;
        
        color: rgba(255, 255, 255, 0.5);

    }
    .a_reg{
        position: absolute;
        width: 44px;
        height: 102px;
        left: 252px;
        top: 359px;
        
        font-family: Gill Sans;
        font-style: italic;
        font-weight: 300;
        font-size: 90px;
        line-height: 102px;
        /* identical to box height */
        
        color: rgba(255, 255, 255, 0.5);
    }
   .g_reg{

position: absolute;
width: 39px;
height: 102px;
left: 253px;
top: 424px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size: 90px;
line-height: 102px;
/* identical to box height */

color: rgba(255, 255, 255, 0.5);


   }
.e_reg{
/* e */

position: absolute;
width: 35px;
height: 102px;
left: 252px;
top: 524px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size: 90px;
line-height: 102px;
/* identical to box height */

color: rgba(255, 255, 255, 0.5);
}
.a_bold{


    position: absolute;
    width: 52px;
    height: 104px;
    left: 246px;
    top: 605px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 90px;
    line-height: 104px;
    
    color: rgba(4, 22, 66, 0.38);
    
}
.g_bold{
    position: absolute;
width: 51px;
height: 104px;
left: 247px;
top: 670px;

font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 90px;
line-height: 104px;

color: rgba(4, 22, 66, 0.38);

}
.e_bold{

position: absolute;
width: 35px;
height: 104px;
left: 247px;
top: 751px;

font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 90px;
line-height: 104px;

color: rgba(4, 22, 66, 0.38);


}
.title{
    position: absolute;
width: 230px;
height: 95px;
left: -8px;
top: 264px;

font-family: Gill Sans;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
text-align: center;

color: #00247D;
}


}

    @media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
   body{
    background:url(../images/mobile/inspired.png);
    background-repeat: no-repeat;
}
.inspired_content{
    position: absolute;
width: 239px;
height: 263px;
left: 4px;
top: 320px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;

color: #FFFFFF;
}
.c{
    position: absolute;
width: 40px;
height: 103px;
left: 252px;
top: -33px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);

}
.a{
/* a */

position: absolute;
width: 39px;
height: 103px;
left: 257px;
top: 41px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);
}
.g{
    /* g */

position: absolute;
width: 39px;
height: 103px;
left: 253px;
top: 112px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);




    }
    .e{
        position: absolute;
width: 35px;
height: 103px;
left: 252px;
top: 207px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 90px;
line-height: 103px;

color: rgba(4, 22, 66, 0.38);
    }
    .c_reg{
        position: absolute;
        width: 42px;
        height: 63px;
        left: 255px;
        top: 288px;
        
        font-family: Gill Sans;
        font-style: italic;
        font-weight: 300;
        font-size: 90px;
        line-height: 102px;
        
        color: rgba(255, 255, 255, 0.5);

    }
    .a_reg{
        position: absolute;
        width: 44px;
        height: 102px;
        left: 252px;
        top: 359px;
        
        font-family: Gill Sans;
        font-style: italic;
        font-weight: 300;
        font-size: 90px;
        line-height: 102px;
        /* identical to box height */
        
        color: rgba(255, 255, 255, 0.5);
    }
   .g_reg{

position: absolute;
width: 39px;
height: 102px;
left: 253px;
top: 424px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size: 90px;
line-height: 102px;
/* identical to box height */

color: rgba(255, 255, 255, 0.5);


   }
.e_reg{
/* e */

position: absolute;
width: 35px;
height: 102px;
left: 252px;
top: 524px;

font-family: Gill Sans;
font-style: italic;
font-weight: 300;
font-size: 90px;
line-height: 102px;
/* identical to box height */

color: rgba(255, 255, 255, 0.5);
}
.a_bold{


    position: absolute;
    width: 52px;
    height: 104px;
    left: 246px;
    top: 605px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 90px;
    line-height: 104px;
    
    color: rgba(4, 22, 66, 0.38);
    
}
.g_bold{
    position: absolute;
width: 51px;
height: 104px;
left: 247px;
top: 670px;

font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 90px;
line-height: 104px;

color: rgba(4, 22, 66, 0.38);

}
.e_bold{

position: absolute;
width: 35px;
height: 104px;
left: 247px;
top: 751px;

font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 90px;
line-height: 104px;

color: rgba(4, 22, 66, 0.38);


}
.title{
    position: absolute;
width: 230px;
height: 95px;
left: -8px;
top: 264px;

font-family: Gill Sans;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
text-align: center;

color: #00247D;
}
#linkback{
    position: absolute;
    width: 550px;
    height: 21px;
    left: 29px;
    top: 641px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 17px;
    
    color: #860101;  
}
#link1{
  
    position: absolute;
    width: 550px;
    height: 21px;
    left: 80px;
    top: 641px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 17px;
    
    color: #860101;
    
      }
      :root {
        --mainColor: #860101;
      }
      #link2{
        position: absolute;
        width: 550px;
        height: 21px;
        left: 146px;
        top: 641px;
        
        font-family: Gill Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 17px;
        
        color: #860101;
      }
        a {
            color: var(--mainColor);
            text-decoration: none;
          }
          
          a:hover {
            color: transparent;
            text-decoration: none;
            -webkit-text-stroke: 2px var(--mainColor);
          }
          
          @supports not(-webkit-text-stroke: 2px red) {
            a:hover {
              text-shadow:
                3px 3px 0 var(--mainColor),
                -1px -1px 0 var(--mainColor),
                1px -1px 0 var(--mainColor),
                -1px 1px 0 var(--mainColor),
                1px 1px 0 var(--mainColor);
            }
          }
    

  
  }
  
  


  
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    /* STYLES GO HERE */


    body{
        background:url(../images/ipad/inspired.png);
        background-repeat: no-repeat;
    }
    .inspired_content{
        position: absolute;
width: 508.27px;
height: 282.69px;
left: 48.37px;
top: 512px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 17px;
line-height: 20px;

color: #FFFFFF;

    }
.a{
left: 581px;
top: -38px;
font-size: 130px;
    }
.g{
        left: 588px;
        top: 240px;
        font-size: 100px;
    }
    .c{
        font-size: 130px;
left: 578px;
top: 105px;

    }
    .e{
        left: 585px;
top: 369px;
font-size: 100px;

    }
    .title{
        
        left: -70px;
        top: 446px;
        font-weight: 600;
        width:100%;  
        font-size: 40px;
    }
    .c_reg{
     
        left: 599px;
        top: 463px;
        
    
        font-size: 100px;
 
        

        
    }
    .a_reg{
   
        left: 593px;
        top: 524px;
        
  

    }
    .g_reg{

left: 592px;
top: 588px;


font-size: 100px;


    }
    .e_reg{

        left: 591px;
        top: 677px;

font-size: 100px;
line-height: 113px;



    }
    .a_bold{
        left: 579px;
        top: 750px;
        font-size: 100px;
    }
    .g_bold{
        left: 572px;
        top: 848px;
        font-size: 100px;
    }
    .e_bold{
        
        left: 571px;
        top: 966px;
        font-size: 100px;
    }
    #linkback{

position: absolute;
width: 138px;
height: 26px;
left: 22px;
top: 790px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 34px;

color: #860101;
    }
    #link1{

        position: absolute;
        width: 138px;
        height: 26px;
        left: 126px;
        top: 790px;
        
        font-family: Gill Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 30px;
        line-height: 34px;
        
        color: #860101;
    }
    #link2{

        position: absolute;
        width: 245px;
        height: 26px;
        left: 326px;
        top: 790px;
        
        font-family: Gill Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 30px;
        line-height: 34px;
        
        color: #860101;
    }
    :root {
        --mainColor: #860101;
      }
    a {
        color: var(--mainColor);
        text-decoration: none;
      }
      
      a:hover {
        color: transparent;
        text-decoration: none;
        -webkit-text-stroke: 2px var(--mainColor);
      }
      
      @supports not(-webkit-text-stroke: 2px red) {
        a:hover {
          text-shadow:
            3px 3px 0 var(--mainColor),
            -1px -1px 0 var(--mainColor),
            1px -1px 0 var(--mainColor),
            -1px 1px 0 var(--mainColor),
            1px 1px 0 var(--mainColor);
        }
      }


  }