.page-img-portrait {
        height: 100;
        width: auto;
        margin: 10% 10% -6% 18%;
        border: 1px solid #ddd;
        -moz-box-shadow: 1px 1px 1px #fff;
        -webkit-box-shadow: 1px 1px 1px #fff;
        box-shadow: 1px 1px 1px #fff;
    }
    
    .page-img-landscape {
        height: 100;
        width: auto;
        margin: 30% 5% -4% 5%;
        border: 1px solid #ddd;
        -moz-box-shadow: 1px 1px 1px #fff;
        -webkit-box-shadow: 1px 1px 1px #fff;
        box-shadow: 1px 1px 1px #fff;
    }




    
    .fb-page p {
        text-align: center;
    }

    .fb-page a {
        color:#000;
    }
    .fb-page a:hover {
        color:#f17282;
    }



.button-container {
    margin:20% 0 0 0;
    text-align: center;
}

.button-container button{
    
            font-family: 'Handlee', cursive;
            font-size: 16px;
            line-height: 40px;
            color: #000;    
}

.reset-container {
    margin:0;
    text-align: center;
}

.reset-container button{
    
            font-family: 'Handlee', cursive;
            font-size: 18px;
            line-height: 20px;
            color: #000;    
}



    
    .cover {
        background-image: url(../img/tp-cover-front.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }
    
    .cover-inner {
        background-image: url(../img/tp-cover-front-inner.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
    .cover-inner-back {
        background-image: url(../img/tp-cover-back-inner.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

/*Turn JS*/

.catalog-app{
    background-image: url(../img/tp-oak-bg.jpg);  
} 

#viewer{
    background-image: url(../img/about-bg-3.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} 

        
        .ui-flipbook{
            margin-top: 3%;

}
        
        .ui-flipbook .page{
           /*background: linear-gradient(0deg, rgb(209, 209, 209) 15%, rgb(255, 255, 255));
           background: -webkit-linear-gradient(0deg, rgb(209, 209, 209) 15%, rgb(255, 255, 255));*/
           background: linear-gradient(to right, #E1E1E1 1%, #fff, #fff, #eeeeee);
           background: -webkit-linear-gradient(to right, #E1E1E1 1%, #fff, #fff, #eeeeee);   
        }
    
        
       .fb-page h1{font-family: 'Pacifico', cursive; font-size: 20px; color: #BD2026; text-align: center;padding: 10% 2% 1% 2%;}
       .fb-page h2{font-family: 'Pacifico', cursive; font-size: 30px; color: #BD2026; text-align: center;padding: 10% 2% 1% 2%; margin: 50% 0 6% 0;}
       .fb-page h3{font-family: 'Pacifico', cursive; font-size: 20px; color: #000; text-align: center;padding: 0% 2% 1% 2%; margin: 0;}
       .fb-page h3:hover{color: #5d5d5d; }
       .fb-page p{font-family: 'Handlee', cursive; font-size: 14px; text-align: center;padding: 0%;}
       .fb-page ul{font-family: 'Handlee', cursive; font-size: 20px; text-align: center;padding: 1% ;}
       
        
      .page-1 .s1{
        -webkit-transform: translateY(100px);
        -webkit-transition: all 1.5s;
        opacity: 0;

      }
      .page-1 .s2{
        -webkit-transform: translateY(100px);
        -webkit-transition: all 1s;
        -webkit-transition-delay: 0.5s;
        opacity: 0;
        font-family: 'Lily Script One', cursive;  
        font-style: normal;
        font-weight: 400;
        font-size: 40px;
        text-align: center;
        color:#B30000;
      }
    
      .page-1.animation-on .s1{
        -webkit-transform: translateY(0px);
        opacity: 1;
      }
      .page-1.animation-on .s2{
        -webkit-transform: translateY(0px);
        opacity: 1;
      }    


/* Media Queries */


/* Landscape */

@media only screen and (max-width: 2560px) and (max-height: 1600px) and ( orientation: landscape)  {
    
#viewer{
    background-image: url(../img/about-bg-3-2560.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 2560px) and (max-height: 1440px) and ( orientation: landscape) {
    
    #viewer{
        background-image: url(../img/about-bg-3-2560x1440.png);
          -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    } 
    
}

@media only screen and (max-width: 2048px) and (max-height: 1536px) and ( orientation: landscape) {
    
#viewer{
    background-image: url(../img/about-bg-3-2048.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1920px) and (max-height: 1200px) and ( orientation: landscape)  {
    
#viewer{
    background-image: url(../img/about-bg-3-1200.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1920px) and (max-height: 1080px) and ( orientation: landscape)  {
    
#viewer{
    background-image: url(../img/about-bg-3-1080.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1680px) and (max-height: 1050px) and ( orientation: landscape)  {
    
#viewer{
    background-image: url(../img/about-bg-3-1680.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}


@media only screen and (max-width: 1600px) and (max-height: 900px) and ( orientation: landscape) {
    
#viewer{
    background-image: url(../img/about-bg-3-1600.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1440px) and (max-height: 900px) and ( orientation: landscape) {
    
#viewer{
    background-image: url(../img/about-bg-3-1440.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1366px) and (max-height: 768px) and ( orientation: landscape) {
    
#viewer{
    background-image: url(../img/about-bg-3.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1280px) and (max-height: 800px) and ( orientation: landscape)  {
    
#viewer{
    background-image: url(../img/about-bg-3-1280.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1280px) and (max-height: 620px) and ( orientation: landscape)  {
    
#viewer{
    background-image: url(../img/about-bg-3-1280x620.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1024px) and (max-height: 768px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-1024.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1024px) and (max-height: 600px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-1024x600.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 960px) and (max-height: 640px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-960.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 960px) and (max-height: 540px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-540.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 854px) and (max-height: 480px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-854.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 800px) and (max-height: 480px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-800-ls.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 736px) and (max-height: 414px) and ( orientation: landscape)  {
    .catalog-app{ height: 100%;}  
#viewer{
    background-image: url(../img/about-bg-3-736.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}



/* Portrait */

@media only screen and (max-width: 1536px) and (max-height: 2048px) and ( orientation: portrait) {
    
#viewer{
    background-image: url(../img/about-bg-3-1536.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 1080px) and (max-height: 1920px) and ( orientation: portrait) {
    
#viewer{
    background-image: url(../img/about-bg-3-1920.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 800px) and (max-height: 1280px) and ( orientation: portrait) {
    
#viewer{
    background-image: url(../img/about-bg-3-800.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 768px) and (max-height: 1366px) and ( orientation: portrait) {
    
#viewer{
    background-image: url(../img/about-bg-3-768x1366.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 768px) and (max-height: 1024px) and ( orientation: portrait) {
    
#viewer{
    background-image: url(../img/about-bg-3-768.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 640px) and (max-height: 960px) and ( orientation: portrait) {
    
#viewer{
    background-image: url(../img/about-bg-3-640x960.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}     
    
}

@media only screen and (max-width: 600px) and (max-height: 1024px) and ( orientation: portrait) {
    
#viewer{
    /*background-image: url(../img/about-bg-3-600.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}     
    
}

@media only screen and (max-width: 540px) and (max-height: 960px) and ( orientation: portrait) {
    
#viewer{
  /*  background-image: url(../img/about-bg-3-540x960.png);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}     
background-image: none!important;
}

@media only screen and (max-width: 480px) and (max-height:854px) and ( orientation: portrait) {
    
#viewer{
    background-image:none!important;

}     
    
}

@media only screen and (max-width: 375px) and (max-height: 667px) and ( orientation: portrait) {
    
#viewer{
    background-image:none!important;

}    
    
}