@font-face {
    font-family: 'SlimSansSerif';
    font-style: normal;
    font-weight: normal;
    src: local('SlimSansSerif'), url('SlimSansSerif.woff') format('woff');
    }






















.sidenav {
  height: 100%;
  width: 0;
  position:fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color: rgb(1,2,9,0.89);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 90px;
}

.sidenav a {
  padding: 0px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  display: block;
  transition: 0.3s;
    font-family:acumin-pro,arial;
    
}

.sidenav li{
 padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  display: block;
  transition: 0.3s;
    font-family:acumin-pro,arial;   
    
}


.Container{
       max-width: 834px;
    min-width: 320px;
        margin: auto;
        
    }

.pid{
   width: 30%;
    height: auto;
    position: fixed;
    z-index: 1;
    margin-left: 30px;
    margin-top: 15px;
    z-index: -1;
   
}


.topnav{
    height: 70px;
   width: 100%;
    position: fixed;
    background-color: #030513;
    margin: 0px;
    top:0;
    left: 0;
    display: block;
    z-index:-1;
    opacity: 0.9;
    
      
}

.foo{
    color: rgb(193, 154, 83);
    position:fixed;
    margin-left: 220px;
    margin-top: 18px;
}
.foo img{
    position:fixed;
    width: 28px;
    margin-left: 60px;
    margin-top: 10px;
}
.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 10px;
    color:#f7cd46;
}
.title{
   overflow: auto; 
    box-sizing: border-box;
    
    
}
.titlesofia h2{
  text-align: left;
    font-family:slimsansserif,arial;
    font-size: 18px;
    font-weight: 200;
    font-stretch:extra-condensed;
    padding: 0px 10px 0px 30px;
    color:lightgray;
    position:absolute;
    flex-direction: column;
    margin-top: 75px;
    z-index: -3;  
    
    
}

/*.img-titlesofia{
   width: 50%;
    position: relative;
    padding-top: 80px;
     margin-left:10%;;
  margin-right: auto;
    display: flex;
    z-index: -4;
    
}
*/
.titlesofia p1{
    
   text-align: justify;
    font-family: slimsansserif,arial;
    font-size: 17px;
    padding: 105px 30px;
color:white;
    opacity: 0.75;
    position: absolute; 
   word-spacing: 5px;
    z-index: -5;
}




.synopsisback{
    
    
    width: 100%;
    height: auto;
    background-color: white;
    position: relative;
    padding-top: 5px;
    padding-bottom: 8px;
    z-index: -8;
    padding-right: 20px;
    padding-left: 20px;
}

.about h2{
    text-align: left;
    font-family:slimsansserif,arial;
    font-size: 20px;
    font-weight: 200;
    font-stretch:extra-condensed;
    padding: 0px 10px 0px 30px;
    color:#f7cd46;
    position:relative;
    flex-direction: column;
    margin-top: 30px;
    z-index: -3;
    
}
.text.synopsis{
    text-align: justify;
   padding: 10px 45px 5px 30px;
}

.text.synopsis p{
    text-align: justify;
    font-family:acumin-pro,arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    font-stretch: condensed;
    color:black;
    opacity: 0.75;
    position:relative;
    margin: 0px;
    z-index: -4;

    

    }

a.lightboxasu img {
height: 90%;
    width:90%;
margin: 150px 0px 5px 20px;
    z-index: -12;
    position: relative ;
    display:block;
    box-sizing: border-box;
}





/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.

/* Styles the close link, adds the slide down transition */



.Copyrightsofia{
    
    
    padding-top: 3%;
    z-index: -30;
}


.Copyrightsofia p1{
    text-align: left;
    font-family: acumin-pro,arial;
    font-size: 12px;
    color:#f7cd46;
    position:relative;
    padding-left: 32%;
    
       z-index: -36;
}
.Copyrightsofia p2{
    text-align: left;
    font-family: acumin-pro,arial;
    font-size: 12px;
    color:#f7cd46;
    position:relative;
   padding-left: 25%;
    z-index: -37;
    }

.titlewilliam{
   overflow: auto; 
    box-sizing: border-box;}

.titlewilliam h2{
  text-align: justify;
    font-family:slimsansserif,arial;
    font-size: 18px;
    font-weight: 200;
    font-stretch:extra-condensed;
    padding: 0px 10px 0px 80px;
    color:lightgray;
    position:absolute;
    flex-direction: column;
    margin-top: 45px;
    z-index: -3;  
    
    
}
.titlewilliam p1{
    
   text-align: justify;
    font-family: slimsansserif,arial;
    font-size: 18px;
    padding: 75px 90px;
color:white;
    opacity: 0.75;
    position: absolute; 
   word-spacing: 5px;
    z-index: -5;
}

a.lightboxwilliam img {
height: 90%;
    width:90%;
margin: 150px 0px 5px 20px;
    z-index: -12;
    position: relative ;
    display:block;
    box-sizing: border-box;
    cursor: default;
}





.Copyrightwilliam{
    
    
    padding-top: 3%;
    z-index: -32;
}


.Copyrightwilliam p1{
    text-align: left;
    font-family: acumin-pro,arial;
    font-size: 12px;
    color:#f7cd46;
    position:relative;
    padding-left: 30%;
    z-index: -34;
        
}
.Copyrightwilliam p2{
    text-align: left;
    font-family: acumin-pro,arial;
    font-size: 12px;
    color:#f7cd46;
    position:relative;
   padding-left: 25%;
    padding-bottom: 15%;
z-index: -35;
    }






@media only screen and (min-device-width: 0px) and (max-width:299px) {

    .Container{display: none}
    
}








  @media only screen and (min-device-width: 300px) and (max-width:359px) {
    
  .Container{
        max-width: 320px;}
      
      
      
      #mySidenav{padding-top: 60px;}
      
    #mySidenav.sidenav a{padding: 6px 8px 8px 32px;font-size: 16px;}
    
    #mySidenav.sidenav li{padding: 13px 8px 8px 32px;font-size: 16px;}
    
    #mySidenav.sidenav span {font-size: 17px;}
    
    #mySidenav.sidenav .closebtn {top: 20px;right: 25px;font-size: 30px;margin-left: 10px;}
      
      .foo img{width: 24px;margin-left: 65px;margin-top: 13px;}
      
      .pid{ margin-top: 25px;width: 60%;}
      
       .topnav{
        height: 60px;}
    
    
      
      
      .titlesofia h2 {margin-top: 75px;font-size: 17px;}
      
      .titlesofia p1{ font-size: 18px;padding: 95px 30px;}
      
       a.lightboxasu img {
height: 90%;
    width:90%;
        margin: 130px 0px 5px 20px;}
      
   .synopsis h2 {font-size: 12px;padding: 125px 20px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify-all;word-spacing: 0px;}
      
    .text.synopsis p {font-size: 16px;padding: 5px 0px 0px 0px;}
      
    .synopsisback {padding:5px 5px 5px 5px;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 13%;}
      
      .titlewilliam h2{padding: 0px 10px 0px 30px;font-size: 17px;margin-top: 35px;}
      
      .titlewilliam p1{ padding: 55px 30px;font-size: 18px;}
      
      .about h2{font-size: 17px;margin-top: 20px;}
      
      a.lightboxwilliam img {
height: 90%;
    width:90%;
margin: 95px 0px 5px 20px;
    
}
      
      .Copyrightwilliam p1{font-size: 12px;padding-left: 20%;padding-bottom: 20%;}
      
      
}



@media only screen and (min-device-width: 360px) and (max-device-width:374px) {
    
  .Container{
        max-width: 360px;}
    
    #mySidenav.sidenav a{padding: 10px 10px 8px 52px;font-size: 15px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 28px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 10px 8px 8px 52px;font-size: 15px;}
    
    #mySidenav.sidenav span {font-size: 15px;}
    
    .foo img{width: 24px;margin-left: 90px;margin-top: 13px;}
    
    .pid{width: 55%;margin-left: 30px;
        margin-top: 25px;}
    
    .titlesofia h2 {margin-top: 80px;padding: 0px 10px 0px 30px;font-size: 16px;}
    
    .titlesofia p1{padding: 98px 30px;font-size: 17px;}
    
    a.lightboxasu img {
height: 90%;
    width:90%;
        margin: 135px 0px 5px 20px;}
    
    
    .synopsisback {padding:5px 2px 8px 7px;}
    
      
   .synopsis h2 {font-size: 14px;padding: 125px 20px 0px 50px;}
    
    .text.synopsis p {font-size: 4.5vw;padding: 5px 13px 0px 6px;word-spacing: -1px;}
    
     .text.synopsis {padding:0px 0px 0px 0px;text-align: justify-all;word-spacing: -1px;}
    
    .about h2{font-size: 16px;font-weight: 200;padding: 0px 10px 0px 25px;margin-top: 20px;}
    
    .titlewilliam h2{padding: 0px 10px 0px 20px;font-size: 16px;margin-top: 35px;}
      
      .titlewilliam p1{ padding: 54px 20px;font-size: 17px;}
    
    a.lightboxwilliam img {margin: 95px 0px 5px 20px;}
    
    .Copyrightsofia p1{padding-left: 16%;}
      
      .Copyrightsofia{ margin-top: 10px;}
    
    .Copyrightwilliam p1{padding-left: 24%;
        padding-bottom: 15%;}
    
}





 @media only screen and (min-device-width: 375px) and (max-device-width:389px) {
    
  .Container{
        max-width: 375px;}
      
      
  
    .foo img{width: 27px;margin-left: 103px;margin-top: 10px;}
      
     #mySidenav.sidenav a{padding: 5px 10px 8px 52px;font-size: 4.3vw;}
    
    #mySidenav.sidenav .closebtn {top: 10px;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 8px 8px 8px 52px;font-size: 4.3vw;}
    
    #mySidenav.sidenav span {font-size: 4.2vw;}
      
      .pid{ margin-top: 22px;width: 55%;}
      
      .titlesofia h2 {margin-top: 85px;font-size: 17px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 18px;padding: 105px 37px;}
      
       a.lightboxasu img {
height: 90%;
    width:90%;
        margin: 145px 0px 5px 20px;}
      
      
   .synopsis h2 {font-size: 14px;padding: 125px 20px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align:left;word-spacing: -1px;}
      
    .text.synopsis p {font-size: 4.4vw;padding: 5px 5px 0px 5px;text-align: justify-all;word-spacing: -2px;hyphens:manual;}
      
    .synopsisback {padding:5px 10px 10px 10px;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 15%;font-size: 12px;}
      
      .titlewilliam{}
      
      .titlewilliam h2{padding: 0px 10px 0px 35px;font-size: 17px;margin-top: 35px;}
      
      .titlewilliam p1{ padding: 55px 37px;font-size: 18px;}
      
      a.lightboxwilliam img {margin: 100px 0px 5px 20px;}
      
      .about h2{font-size: 4.5vw;padding: 0px 10px 0px 25px;margin-top: 17px;}
      
      .Copyrightwilliam p1{padding-left: 23%;
        padding-bottom: 15%;font-size: 12px;}
}








@media only screen and (min-device-width: 390px) and (max-device-width:411px) {
    
  .Container{
        max-width: 390px;}
    .foo img{width: 28px;margin-left: 120px;margin-top: 13px;}
      
      #mySidenav{padding-top: 120px;}
    
    #mySidenav.sidenav a {padding: 15px 10px 8px 62px;font-size: 17px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li {padding: 8px 8px 8px 62px;font-size: 17px;}
    
    #mySidenav.sidenav span {font-size: 17px;}
      
      .pid{ margin-top: 25px;width: 55%;margin-left: 25px;}
      
      .titlesofia h2 {margin-top: 85px;font-size: 17px;padding: 0px 10px 0px 25px;}
      
      .titlesofia p1 {font-size: 18px;padding: 105px 115px 0px 25px;}
    
    a.lightboxasu img {margin: 140px 0px 5px 20px;padding-top: 1%;}
      
   .synopsis h2 {font-size: 14px;padding: 125px 20px 0px 50px;}
      
    .text.synopsis {padding:0px 5px 0px 5px;text-align: justify;}
      
    .text.synopsis p {font-size: 17px;padding: 5px 0px 0px 0px;word-spacing: -2px;}
      
    .synopsisback {padding:5px 10px 10px 10px;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 17%;font-size: 13px;}
      
      .Copyrightsofia p2{ padding-left: 24%;}
      
      .titlewilliam h2{padding: 0px 10px 0px 25px;font-size: 18px;}
      
      .titlewilliam p1{ padding: 65px 25px;font-size: 18px;}
    
    a.lightboxwilliam img {margin: 105px 0px 5px 20px;}
      
      .about h2{padding: 0px 10px 0px 28px;font-size: 17px;font-weight: 200;margin-top: 20px;}
    
      .Copyrightwilliam p1{padding-left: 24%;padding-bottom: 25%;font-size: 13px;}
    
    .Copyrightwilliam p2{padding-left: 29%;}
      
}










@media only screen and (min-device-width: 412px) and (max-device-width:427px) {
    
    .Container{
        max-width: 412px;}
    
   #mySidenav.sidenav{padding-top: 100px;}
    
   #mySidenav.sidenav a {padding: 15px 10px 8px 62px;font-size: 4.2vw;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li {padding: 8px 8px 8px 62px;font-size: 4.2vw;}
    
    #mySidenav.sidenav span {font-size: 4.2vw;}

.foo img{width: 28px;margin-left: 130px;margin-top: 10px;}
    
 .pid{ margin-top: 25px;width: 54%;margin-left: 40px;} 
    
   .titlesofia h2 {margin-top: 90px;font-size: 17.5px;padding: 0px 10px 0px 40px;}
      
      .titlesofia p1 {font-size: 19.5px;padding: 110px 120px 170px 40px;}
    
    .Copyrightsofia{padding-top: 4%;}
    
    a.lightboxasu img {margin: 155px 0px 5px 20px;}
    
    .about h2{padding: 0px 10px 0px 40px;font-size: 4.5vw;font-weight: 200;margin-top: 15px;}
    
    .synopsisback {padding:10px 10px 10px 10px;}
    
     .text.synopsis {padding:0px 5px 10px 5px;text-align: justify;}
      
    .text.synopsis p {font-size: 4.3vw;padding: 5px 0px 0px 0px;word-spacing: -2px;}
    
    .Copyrightsofia p1{padding-left: 17%;font-size: 13px;}
      
      
    
    .titlewilliam h2{padding: 0px 10px 0px 40px;font-size: 17.5px;}
      
      .titlewilliam p1{ padding: 65px 40px;font-size: 19.5px;}
    
     a.lightboxwilliam img {margin: 110px 0px 5px 20px;}
    
    .Copyrightwilliam p1{padding-left: 24%;padding-bottom: 25%;font-size: 13px;}
    
}
    
 



   

@media only screen and (min-device-width: 428px) and (max-device-width:479px) {
    
    .Container{
        max-width: 428px;}
    
    #mySidenav.sidenav{padding-top: 130px;}
    
    #mySidenav.sidenav a{padding: 15px 10px 8px 72px;font-size: 18px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 72px;font-size: 18px;}
    
    #mySidenav.sidenav span {font-size: 18px;}


    
    .foo img{width: 29px;margin-left: 155px;margin-top: 20px;}
    
    .topnav{
        height: 80px;}
    
   .pid{ margin-top: 25px;width: 53%;margin-left: 40px;} 
    
   .titlesofia h2 {margin-top: 90px;font-size: 18px;padding: 0px 10px 0px 40px;}
      
      .titlesofia p1 {font-size: 19px;padding: 110px 120px 170px 40px;}
    
    .Copyrightsofia{padding-top: 4%;}
    
    a.lightboxasu img {margin: 160px 0px 5px 43px;height: 80%;width: 80%;}
    
    .about h2{padding: 0px 10px 0px 40px;font-size: 19px;font-weight: 200;margin-top: 20px;}
    
    .synopsisback {padding:10px 10px 10px 10px;}
    
     .text.synopsis {padding:0px 5px 10px 5px;text-align: justify;}
      
    .text.synopsis p {font-size: 18px;padding: 5px 0px 0px 0px;word-spacing: -2px;}
    
    .Copyrightsofia p1{padding-left: 19%;font-size: 13px;}
      
      
    
    .titlewilliam h2{padding: 0px 10px 0px 40px;font-size: 18px;}
      
      .titlewilliam p1{ padding: 65px 40px;font-size: 19px;}
    
     a.lightboxwilliam img {margin: 110px 0px 5px 23px;}
    
    .Copyrightwilliam p1{padding-left: 24%;padding-bottom: 25%;font-size: 13px;}
    
}


@media only screen and (min-device-width: 480px) {
    
     
     .Container{
        max-width: 100%;}
    
 #mySidenav.sidenav a{padding: 15px 10px 8px 72px;font-size: 19px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 18px 8px 8px 72px;font-size: 19px;}
    
    #mySidenav.sidenav span {font-size: 19px;}
    
    .foo img{width: 30px;margin-left: 200px;margin-top: 15px;}
    
   .pid{ margin-top: 25px;width: 52%;margin-left: 45px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 20px;padding: 0px 10px 0px 45px;}
      
      .titlesofia p1{font-size: 21px;padding: 118px 45px;}
    
    a.lightboxasu img {margin: 150px 0px 5px 50px;padding-top: 4%;height: 80%;
    width:80%;}
    
    .about h2{font-size: 20px;padding: 10px 10px 5px 50px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 19px;padding: 5px 0px 0px 0px;}
      
    .synopsisback {padding:5px 10px 10px 10px;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 20%;font-size: 14px;}
      
      .Copyrightsofia p2{ padding-left: 26%;}
      
      .titlewilliam h2{padding: 0px 10px 0px 45px;font-size: 20px;}
      
      .titlewilliam p1{ padding: 68px 45px;font-size: 21px;}
    
    .Copyrightwilliam p1{padding-left: 26%;padding-bottom: 20%;font-size: 14px;}
    
    .Copyrightwilliam p2{padding-left: 29%;}
    
    a.lightboxwilliam img {margin: 125px 0px 5px 35px;height: 85%;width: 85%;}
      
       }
    
    
    
    
    
    

   
    
    
    
    /* ----------- iPad Pro 9----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 768px)and (max-width: 1024px)
  
    
   {
    

.Container{
        max-width: 768px;}
    
    
 #mySidenav.sidenav a{padding: 25px 10px 8px 140px;font-size: 16px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 140px;font-size: 16px;}
    
    #mySidenav.sidenav span {font-size: 16px;}
       
       #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 170px;
    
    }   
       
    
    .foo img{width: 25px;margin-left: 480px;margin-top: 20px;}
    
    .topnav{height: 80px;}
    
    .pid{ margin-top: 25px;width: 215px;margin-left: 45px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 16px;padding: 0px 10px 0px 45px;}
      
      .titlesofia p1{font-size: 17px;padding: 118px 45px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 180px;padding-top: 4%;height: auto;
    width:50%;}
    
    .about h2{font-size: 17px;padding: 10px 10px 0px 50px;margin-top: 15px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 40px 0px 40px;text-align: justify;}
      
    .text.synopsis p {font-size: 16px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 33%;font-size: 12px;}
      
      
      .titlewilliam h2{padding: 30px 10px 0px 43px;font-size: 16px;}
      
      .titlewilliam p1{ padding: 98px 43px;font-size: 17px;}
    
    .Copyrightwilliam p1{padding-left: 37%;font-size: 12px;}
    
    
    
    a.lightboxwilliam img {margin: 140px 0px 5px 75px;height: auto;width: 80%;}
      
       }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (min-device-width: 810px){
    
    .Container{
        max-width: 810px;}
    
 #mySidenav.sidenav a{padding: 30px 10px 8px 140px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 20px 8px 8px 140px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 17px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }
    
    .foo img{width: 27px;margin-left: 505px;margin-top: 20px;}
    
    .topnav{height: 80px;}
    
    .pid{ margin-top: 25px;width: 215px;margin-left: 45px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 18px;padding: 0px 10px 0px 45px;}
      
      .titlesofia p1{font-size: 18px;padding: 118px 45px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 220px;padding-top: 4%;height: auto;
    width:45%;}
    
    .about h2{font-size: 17px;padding: 20px 10px 0px 50px;margin-top: 0px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 40px 0px 40px;text-align: justify;}
      
    .text.synopsis p {font-size: 17px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 34%;}
      
      
      .titlewilliam h2{padding: 30px 10px 0px 50px;font-size: 18px;}
      
      .titlewilliam p1{ padding: 98px 50px;font-size: 18px;}
    
    .Copyrightwilliam p1{padding-left: 37%;}
    
    
    
    a.lightboxwilliam img {margin: 150px 0px 5px 80px;height: auto;width: 80%;}
      
       }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* ----------- iPad Pro 11----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-height: 1194px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    

.Container{
        max-width: 810px;}
    
 #mySidenav.sidenav a{padding: 25px 10px 8px 150px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 50px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 20px 8px 8px 150px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }
    
    .foo img{width: 25px;margin-left: 515px;margin-top: 20px;}
    
    .topnav{height: 80px;}
    
    .pid{ margin-top: 25px;width: 210px;margin-left: 45px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 16px;padding: 0px 10px 0px 45px;}
      
      .titlesofia p1{font-size: 17px;padding: 118px 45px;}
    
    a.lightboxasu img {margin: 120px 0px 0px 190px;padding-top: 4%;height: auto;
    width:50%;}
    
    .about h2{font-size: 17px;padding: 10px 10px 0px 50px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 30px 0px 30px;text-align: justify;}
      
    .text.synopsis p {font-size: 16px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;}
      
      
      .titlewilliam h2{padding: 30px 10px 0px 45px;font-size: 16px;}
      
      .titlewilliam p1{ padding: 98px 45px;font-size: 17px;}
    
    .Copyrightwilliam p1{padding-left: 37%;}
    
    
    
    a.lightboxwilliam img {margin: 150px 0px 5px 80px;height: auto;width: 80%;}
      
       }
    
    
    
    
    /*ipad  12*/
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px)and (orientation:landscape) {


.Container{
        max-width: 1000px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 220px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 65px;font-size: 27px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 160px;
    
    }

    
    .foo img{width: 27px;margin-left: 720px;margin-top: 20px;}
    
    
    .pid{ margin-top: 30px;width: 215px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 17.5px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 18.5px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 110px 0px 5px 265px;padding-top: 4%;height:auto;
    width:400px;}
    
    .about h2{font-size: 17.5px;padding: 10px 10px 0px 35px;margin-top: 15px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 17px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 12px;}
      
      .titlewilliam h2{padding: 60px 10px 0px 35px;font-size: 17.5px;}
      
      .titlewilliam p1{ padding: 128px 35px;font-size: 18.5px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 12px;}
    
    a.lightboxwilliam img {margin: 180px 0px 5px 85px;height: auto;width:80%;}
      
       }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*Macbook*/

@media only screen and  (min-height: 1440px) and (max-height: 1440px) and (min-width: 2304px) and (max-width: 2304px) {


.Container{
        max-width: 1100px;}
    
#mySidenav.sidenav a{padding: 35px 10px 8px 32px;font-size: 18px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 85px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 18px 8px 8px 32px;font-size: 18px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 18px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 20%;
        transition: 1s;padding-top: 200px;
    
    }

    
    .foo img{width: 31px;margin-left: 805px;margin-top: 20px;}
    
     .pid{ margin-top: 30px;width: 255px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 110px;font-size: 20px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 21px;padding: 140px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 330px;padding-top: 4%;height:auto;
    width:450px;}
    
    .about h2{font-size: 21px;padding: 10px 10px 5px 35px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 20px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 13px;}
      
      .titlewilliam h2{padding: 60px 10px 0px 35px;font-size: 20px;}
      
      .titlewilliam p1{ padding: 135px 35px;font-size: 21px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 13px;}
    
    a.lightboxwilliam img {margin: 190px 0px 5px 85px;height: auto;width:85%;}
      
       }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (min-device-width: 2305px) 
   {
 




.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 32px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 32px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 20%;
        transition: 1s;padding-top: 200px;
    
    }

    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;cursor: none;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 35px;height: auto;width:93%;}
      
       }
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (min-width: 1440px) and (max-width: 2303px)
   {
 




.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 32px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 32px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 20%;
        transition: 1s;padding-top: 200px;
    
    }
    
    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 35px;height: auto;width:93%;}
      
       }
    

    
    
    
    
    
    
    






 /* ----------- Desktop MDPI ----------- */
/* Portrait and Landscape */
@media all 
  and (min-width: 1440px) and (max-width:1440px)
  and (min-height: 900px) and (max-height:900px)  {
 


.Container{
        max-width: 600px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 300px;font-size: 12px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 100px;font-size: 22px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 300px;font-size: 12px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 12px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 150px;
    
    }
    
.topnav{height: 50px;}
    
     .foo img{width: 18px;margin-left: 345px;margin-top: 15px;}
     
    
    .pid{ margin-top: 20px;width: 160px;margin-left: 0px;}
      
      .titlesofia h2 {margin-top: 80px;font-size: 13px;padding: 0px 10px 0px 0px;}
      
      .titlesofia p1{font-size: 14px;padding: 100px 0px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 140px;padding-top: 4%;height:auto;
    width:290px;}
    
    .about h2{font-size: 13px;padding: 10px 10px 0px 0px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 12px;padding: 115px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 12px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:0px 10px 10px 0px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 9px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 0px;font-size: 13px;}
      
      .titlewilliam p1{ padding: 105px 0px;font-size: 14px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 9px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 20px;height: auto;width:90%;}
      
       }
    











    
    
    
    
    
    
    
    
   

@media only screen and (min-device-width: 1367px) and (max-width: 1439px)
   {
 




.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }

    
    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 35px;height: auto;width:93%;}
      
       }
    

    
    
    
    
    
    
     /* ----------- Desktop HIDPI ----------- */

@media only screen and (min-device-width: 1920px) and (max-device-height: 1080px)
   {
 




.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 30px 10px 8px 32px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 100px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 32px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 15px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 20%;
        transition: 1s;padding-top: 200px;
    
    }

    
    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 200px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 240px;padding-top: 4%;height:auto;
    width:380px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 35px;height: auto;width:93%;}
      
       }
    
    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (min-device-width: 1281px)and (max-width:1365px){


.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }

    
   .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
   .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 35px;height: auto;width:93%;}
      
       }
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (min-device-width: 1201px)and (max-width:1279px){
    
    
    
   .Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }
    
    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 50px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 50px;height: auto;width:90%;}
      
       }
    

    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (min-device-width: 1024px)and (max-width:1200px) {

.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }

    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 70px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 70px;height: auto;width:83%;}
      
       }
    

    







/*ipad 11*/
@media only screen and (min-device-width: 1113px) and (max-device-width:1365px)and (orientation:landscape) {


.Container{
        max-width: 1000px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 220px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 65px;font-size: 27px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 80px;
    
    }

    
    .foo img{width: 27px;margin-left: 720px;margin-top: 20px;}  
    
    
    .pid{ margin-top: 30px;width: 210px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 17px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 18px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 110px 0px 5px 270px;padding-top: 4%;height:auto;
    width:380px;}
    
    .about h2{font-size: 17px;padding: 10px 10px 5px 35px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 16px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 12px;}
      
      .titlewilliam h2{padding: 60px 10px 0px 35px;font-size: 17px;}
      
      .titlewilliam p1{ padding: 128px 35px;font-size: 18px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 12px;}
    
    a.lightboxwilliam img {margin: 180px 0px 5px 85px;height: auto;width:80%;}
      
       }
    
    






    /*Laptop-Small size*/


@media only screen and (min-device-width: 1280px)and (max-device-height:800px){


.Container{
        max-width: 600px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 32px;font-size: 10px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 50px;font-size: 15px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 10px 8px 8px 32px;font-size:10px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 10px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 20%;
        transition: 1s;padding-top: 100px;
    
    }
    .topnav{height: 60px;}
    
    
    .foo img{width: 18px;margin-left: 345px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 145px;margin-left: 0px;}
      
      .titlesofia h2 {margin-top: 80px;font-size: 11px;padding: 0px 10px 0px 0px;}
      
      .titlesofia p1{font-size: 12px;padding: 98px 0px;}
    
    a.lightboxasu img {margin: 100px 0px 5px 140px;padding-top: 4%;height:auto;
    width:290px;}
    
    .about h2{font-size: 11px;padding: 0px 10px 0px 0px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 12px;padding: 115px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 11px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:0px 10px 10px 0px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;font-size: 8px;}
      
      .titlewilliam h2{padding: 20px 10px 0px 0px;font-size: 11px;}
      
      .titlewilliam p1{ padding: 82px 0px;font-size: 12px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 8px;}
    
    a.lightboxwilliam img {margin: 115px 0px 5px 0px;height: auto;width:95%;}
      
       }
    
    















/*Laptop-Medium size*/
    
    @media only screen and (min-device-width: 1366px)and (max-device-height:768px){


.Container{
        max-width: 600px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 32px;font-size: 10px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 50px;font-size: 15px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 10px 8px 8px 32px;font-size: 10px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 10px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 20%;
        transition: 1s;padding-top: 100px;
    
    }
    .topnav{height: 40px;}
    
    .foo img{width: 17px;margin-left: 345px;margin-top: 5px;}
     
    
    .pid{ margin-top: 15px;width: 140px;margin-left: 0px;}
      
      .titlesofia h2 {margin-top: 65px;font-size: 11px;padding: 0px 10px 0px 0px;}
      
      .titlesofia p1{font-size: 12px;padding: 80px 0px;}
    
    a.lightboxasu img {margin: 100px 0px 5px 140px;padding-top: 2%;height:auto;
    width:270px;}
    
    .about h2{font-size: 10px;padding: 0px 10px 0px 0px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 11px;padding: 115px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 11px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:0px 10px 10px 0px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;font-size: 8px;}
      
      .titlewilliam h2{padding: 20px 10px 0px 0px;font-size: 11px;}
      
      .titlewilliam p1{ padding: 79px 0px;font-size: 12px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 8px;}
    
    a.lightboxwilliam img {margin: 110px 0px 5px 0px;height: auto;width:96%;}
      
       }
    









    
    
      
   /* ----------- iPad 12 Pro ----------- */
/* Portrait  */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px)and (min-device-height: 1366px) and (max-device-height: 1366px) and (orientation:portrait) {
    

.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 180px;font-size: 17px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 80px;right: 100px;font-size: 25px;margin-left: 30px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 180px;font-size: 17px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 17px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 300px;
    
    }

    
    .foo img{width: 27px;margin-left: 625px;margin-top: 20px;}
    
    
    .pid{ margin-top: 25px;width: 220px;margin-left: 45px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 17.5px;padding: 0px 10px 0px 45px;}
      
      .titlesofia p1{font-size: 18.5px;padding: 118px 45px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height: auto;
    width:45%;}
    
    .about h2{font-size: 17px;padding: 10px 10px 0px 45px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 16.5px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;font-size:12px;}
      
      
      .titlewilliam h2{padding: 30px 10px 0px 45px;font-size: 17.5px;}
      
      .titlewilliam p1{ padding: 100px 45px;font-size: 18.5px;}
    
    .Copyrightwilliam p1{padding-left: 37%;font-size: 12px;}
    
    
    
    a.lightboxwilliam img {margin: 150px 0px 5px 80px;height: auto;width: 80%;}
      
       }
    
    



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   




  
    


































/*ipad 9*/
@media only screen and (min-device-width: 936px) and (max-device-width:1024px)and (orientation:landscape) {

    
    .Container{max-width:950px;}
    
    
   #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 130px;padding-bottom: 60px;
    
    } 
    
#mySidenav.sidenav a{padding: 17px 10px 8px 140px;font-size: 16px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 45px;font-size: 30px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 140px;font-size: 16px;}
    
    #mySidenav.sidenav span {font-size: 16px;}
    
    .foo img{width: 27px;margin-left: 620px;margin-top: 17px;}
    
    .topnav{height: 75px;}
    

.pid{ margin-top: 30px;width: 205px;margin-left: 50px;}
      
      .titlesofia h2 {margin-top: 100px;font-size: 17px;padding: 0px 10px 0px 50px;}
      
      .titlesofia p1{font-size: 18px;padding: 124px 50px;}
    
    a.lightboxasu img {margin: 130px 0px 10px 270px;padding-top: 3%;height: 40%;
    width:40%;}
    
    .about h2{font-size: 17px;padding: 10px 10px 0px 50px;margin-top: 0px;}
    
      
   .synopsis h2 {font-size: 17px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 16px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 30px 10px 30px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;font-size: 12px;}
        
        
        
      
      .titlewilliam h2{padding: 40px 10px 0px 50px;font-size: 17px;}
      
      .titlewilliam p1{ padding: 108px 50px;font-size: 18px;}
    
    .Copyrightwilliam p1{padding-left: 38%;font-size: 12px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 160px 0px 15px 85px;height: 80%;width: 80%;}
      
       }













@media only screen and (min-device-width: 900px)and (max-width:1023px){

.Container{
        max-width: 900px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 140px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 140px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }

    .foo img{width: 23px;margin-left: 610px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 230px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 70px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 15px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 70px;height: auto;width:83%;}
      
       }
    











@media only screen and (min-device-width: 835px) and (max-width:899px) {


.Container{
        max-width: 835px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 140px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 140px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }

    .foo img{width: 23px;margin-left: 530px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 190px;padding-top: 4%;height:auto;
    width:420px;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 70px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 14px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 105px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 38%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 70px;height: auto;width:83%;}
      
       }
    





















@media only screen and (min-device-width: 927px) and (max-device-width:935px)and (orientation:landscape) {



.Container{
        max-width: 853px;}
    
    
#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 25px;padding-bottom: 30px;
    
    }
    
    #mySidenav.sidenav a{padding: 5px 10px 3px 140px;font-size: 17px;}
    
    #mySidenav.sidenav .closebtn {top: 5px;right: 55px;font-size: 27px;margin-left: 40px;}
    
    #mySidenav.sidenav li{padding: 5px 8px 3px 140px;font-size: 17px;}
    
    #mySidenav.sidenav span {font-size: 16px;}
    
     #mySidenav.sidenav a {font-size: 17px;padding-top: 10px;}
    
    .foo img{width: 28px;margin-left: 530px;margin-top: 20px;z-index: 1;}
    
    
     .topnav{height: 75px;z-index: -1;}
    

.pid{ margin-top: 30px;width: 235px;margin-left: 50px;}
      
      .titlesofia h2 {margin-top: 100px;font-size: 19px;padding: 0px 10px 0px 50px;}
      
      .titlesofia p1{font-size: 20px;padding: 124px 50px;}
    
    a.lightboxasu img {margin: 140px 0px 35px 210px;padding-top: 4%;height: 35%;
    width:45%;}
    
    .about h2{font-size: 19px;padding: 5px 10px 5px 50px;margin-top: 0px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 18px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 30px 10px 30px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 32%;font-size: 13.5px;}
        
        
        
      
      .titlewilliam h2{padding: 40px 10px 0px 50px;font-size: 19px;}
      
      .titlewilliam p1{ padding: 108px 50px;font-size: 20px;}
    
    .Copyrightwilliam p1{padding-left: 37%;font-size: 13.5px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 160px 0px 30px 120px;height: 70%;width: 70%;}
      
       }













 @media only screen and (min-device-width: 811px) and (max-width:833px) {

.Container{
        max-width: 811px;}
    
#mySidenav.sidenav a{padding: 20px 10px 8px 130px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 130px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}
    
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    } 
    
    .foo img{width: 23px;margin-left: 490px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 200px;padding-top: 4%;height:auto;
    width:50%;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 65px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 14px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;font-size: 11px;}
      
      .titlewilliam h2{padding: 40px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 108px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 38%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 150px 0px 5px 65px;height: auto;width: 83%;}
      
       }
    


















@media only screen and (min-device-width: 769px) and (max-width:809px) {
    
  
.Container{
        max-width: 769px;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }
    
    
#mySidenav.sidenav a{padding: 20px 10px 8px 130px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 130px;font-size: 14px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 14px;transition: 1s;}

    
    .foo img{width: 23px;margin-left: 470px;margin-top: 13px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 190px;padding-top: 4%;height:auto;
    width:48%;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 75px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 14px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 35%;font-size: 11px;}
      
      .titlewilliam h2{padding: 30px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 98px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 38%;font-size: 11px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 75px;height: auto;width: 80%;}
      
       }
    
















@media only screen and (min-device-width: 601px) and (max-width:767px) {
    
  .Container{
        max-width: 601px;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }
    
#mySidenav.sidenav a{padding: 15px 10px 8px 140px;font-size: 14px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 18px 8px 8px 140px;font-size: 14px;}
    
    #mySidenav.sidenav span {font-size: 14px;}
    
     #mySidenav.sidenav a {font-size: 14px;padding-top: 20px;}
    
    .foo img{width: 23px;margin-left: 320px;margin-top: 15px;}
     
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 140px 0px 5px 120px;padding-top: 4%;height:auto;
    width:58%;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 14px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 33%;font-size: 10px;}
      
      .titlewilliam h2{padding: 20px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 85px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 10px;}
    
    a.lightboxwilliam img {margin: 130px 0px 5px 35px;height: auto;width: 90%;}
      
       }
    



















 /*Ipad 10*/
@media only screen and (min-device-width: 1025px) and (max-device-width:1112px) and (orientation:landscape) {

.Container{
        max-width: 950px;}
    
#mySidenav.sidenav a{padding: 25px 10px 8px 220px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 100px;font-size: 25px;margin-left:0px;}
    
    #mySidenav.sidenav li{padding: 15px 8px 8px 220px;font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav span {font-size: 16px;transition: 1s;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 80px;
    
    }

    
    .foo img{width: 27px;margin-left: 675px;margin-top: 20px;} 

.pid{ margin-top: 30px;width: 220px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 17px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 17px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 120px 0px 0px 240px;padding-top: 4%;height:auto;
    width:400px;}
    
    .about h2{font-size: 17px;padding: 10px 10px 5px 35px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;}
      
    .text.synopsis p {font-size: 17px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: transparent;}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 37%;font-size: 12px;}
      
      .titlewilliam h2{padding: 60px 10px 0px 35px;font-size: 17px;}
      
      .titlewilliam p1{ padding: 128px 35px;font-size: 17px;}
    
    .Copyrightwilliam p1{padding-left: 40%;font-size: 12px;}
    
    a.lightboxwilliam img {margin: 180px 0px 5px 110px;height: auto;width:75%;}
      
       }
    



















@media only screen and (min-device-width: 669px) and (max-device-width:844px)and (orientation:landscape) {
    
    .Container{
        max-width: 669px;}
    

 #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 40px;padding-bottom: 0px;
    
    }
    
    
#mySidenav.sidenav a{padding: 0px 10px 8px 112px;font-size: 16px;}
    
    #mySidenav.sidenav .closebtn {top: 20px;right: 45px;font-size: 25px;margin-left: 30px;}
    
    #mySidenav.sidenav li{padding: 0px 8px 8px 112px;font-size: 16px;}
    
    #mySidenav.sidenav span {font-size: 16px;}
    
     #mySidenav.sidenav a {font-size: 16px;padding-top: 1px;}
    
    .foo img{width: 28px;margin-left: 390px;margin-top: 15px;z-index: 1;}
    

    
    .topnav{height: 65px;z-index: -1;}

.pid{ margin-top: 30px;width: 222px;margin-left: 25px;}
      
      .titlesofia h2 {margin-top: 85px;font-size: 18px;padding: 0px 10px 0px 25px;}
      
      .titlesofia p1{font-size: 19px;padding: 108px 25px;}
    
    a.lightboxasu img {margin: 130px 0px 5px 160px;padding-top: 4%;height: 40%;
    width:50%;}
    
    .about h2{font-size: 18px;padding: 15px 10px 5px 25px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 18px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 13px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 25px;font-size: 18px;}
      
      .titlewilliam p1{ padding: 88px 25px;font-size: 19px;}
    
    .Copyrightwilliam p1{padding-left: 33%;font-size: 13px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 60px;height: 80%;width: 80%;}
      
       }










/*Galaxy S21*/   
       
       
 @media
   only screen and (min-device-width: 800px) and (max-device-width:800px) and (orientation:landscape)
  { 


.Container{
        max-width: 669px;}
    

#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 10px;padding-bottom: 0px;
    
    }
    
    
#mySidenav.sidenav a{padding: 0px 10px 8px 112px;}
    
    #mySidenav.sidenav .closebtn {top: 20px;right: 45px;font-size: 25px;margin-left: 30px;}
    
    #mySidenav.sidenav li{padding: 0px 8px 8px 112px;font-size: 2vw;}
    
    #mySidenav.sidenav span {font-size: 2.1vw;}
    
     #mySidenav.sidenav a {font-size: 2vw;padding-top: 1px;}
    
    
    .foo img{width: 28px;margin-left: 390px;margin-top: 15px;z-index: 1;}
    

    
    .topnav{height: 65px;z-index: -1;}

.pid{ margin-top: 30px;width: 215px;margin-left: 25px;}
      
      .titlesofia h2 {margin-top: 85px;font-size: 17px;padding: 0px 10px 0px 25px;}
      
      .titlesofia p1{font-size: 17px;padding: 108px 25px;}
    
    a.lightboxasu img {margin: 130px 0px 5px 160px;padding-top: 4%;height: 40%;
    width:50%;}
    
    .about h2{font-size: 17px;padding: 15px 10px 5px 25px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 2.3vw;;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 12px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 25px;font-size: 17px;}
      
      .titlewilliam p1{ padding: 88px 25px;font-size: 17px;}
    
    .Copyrightwilliam p1{padding-left: 33%;font-size: 12px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 60px;height: 80%;width: 80%;}
      
       }










@media only screen and (min-device-width: 845px) and (max-device-width:851px)and (orientation:landscape) {

 .Container{
        max-width: 750px;}
    
    
#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 25px;padding-bottom: 10px;
    
    }
    
    #mySidenav.sidenav a{padding: 3px 10px 8px 140px;font-size: 17px;}
    
    #mySidenav.sidenav .closebtn {top: 15px;right: 40px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 5px 8px 8px 140px;font-size: 15px;}
    
    #mySidenav.sidenav span {font-size: 15px;}
    
     #mySidenav.sidenav a {font-size: 15px;padding-top: 1px;}
    
     .foo img{width: 28px;margin-left: 480px;margin-top: 10px;z-index: 1;}
    
    .topnav{height: 65px;z-index: -1;}

.pid{ margin-top: 20px;width: 235px;margin-left: 50px;}
      
      .titlesofia h2 {margin-top: 85px;font-size: 19px;padding: 0px 10px 0px 50px;}
      
      .titlesofia p1{font-size: 19px;padding: 110px 50px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 170px;padding-top: 4%;height: 40%;
    width:50%;}
    
    .about h2{font-size: 19px;padding: 10px 10px 5px 50px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 17.5px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 25px 10px 25px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 13px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 50px;font-size: 19px;}
      
      .titlewilliam p1{ padding: 90px 50px;font-size: 19px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 13px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 50px;height: 80%;width: 84%;}
      
       }






















/*Iphone 14 Pro*/

@media only screen and (min-device-width: 852px) and (max-device-width:852px) and (orientation:landscape){


.Container{
        max-width: 750px;}
    
    
#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 30px;padding-bottom: 0px;
    
    }
    
    #mySidenav.sidenav a{padding: 3px 10px 8px 140px;font-size: 17px;}
    
    #mySidenav.sidenav .closebtn {top: 15px;right: 40px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 5px 8px 8px 140px;font-size: 15px;}
    
    #mySidenav.sidenav span {font-size: 16px;}
    
     #mySidenav.sidenav a {font-size: 15px;padding-top: 2px;}
    
     .foo img{width: 28px;margin-left: 440px;margin-top: 10px;z-index: 1;}
    
    .topnav{height: 65px;z-index: -1;}

.pid{ margin-top: 20px;width: 225px;margin-left: 50px;}
      
      .titlesofia h2 {margin-top: 85px;font-size: 18px;padding: 0px 10px 0px 50px;}
      
      .titlesofia p1{font-size: 19px;padding: 110px 50px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 190px;padding-top: 4%;height: 45%;
    width:45%;}
    
    .about h2{font-size: 19px;padding: 10px 10px 5px 50px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 17.5px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 25px 10px 25px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 31%;font-size: 13px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 50px;font-size: 18px;}
      
      .titlewilliam p1{ padding: 90px 50px;font-size: 19px;}
    
    .Copyrightwilliam p1{padding-left: 36%;font-size: 13px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 105px;height: 70%;width: 70%;}
      
       }

























/*Galaxy Note 5*/

@media only screen and (min-device-width: 853px) and (max-device-width:853px) and (orientation:landscape)



{

.Container{
        max-width: 750px;}
    
    
#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 30px;padding-bottom: 10px;
    
    }
    
    .foo img{width: 33px;margin-left: 490px;margin-top: 20px;}
    
    #mySidenav.sidenav a{padding: 3px 10px 8px 140px;font-size: 18px;}
    
    #mySidenav.sidenav .closebtn {top: 20px;right: 70px;font-size: 30px;margin-left: 0px;}
    
    #mySidenav.sidenav li{padding: 5px 8px 8px 140px;font-size: 18px;}
    
    #mySidenav.sidenav span {font-size: 18px;}
    
     #mySidenav.sidenav a {font-size: 18px;padding-top: 5px;}
    
 .foo img{width: 33px;margin-left: 480px;margin-top: 20px;z-index: 1;}
    
    .topnav{height: 75px;z-index: -1;}

.pid{ margin-top: 30px;width: 245px;margin-left: 15px;}
      
      .titlesofia h2 {margin-top: 90px;font-size: 20px;padding: 0px 10px 0px 20px;}
      
      .titlesofia p1{font-size: 20px;padding: 114px 20px;}
    
    a.lightboxasu img {margin: 130px 0px 5px 160px;padding-top: 4%;height: 45%;
    width:55%;}
    
    .about h2{font-size: 20px;padding: 10px 10px 5px 25px;margin-top: 20px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 19.5px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 25px 10px 25px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 14px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 20px;font-size: 20px;}
      
      .titlewilliam p1{ padding: 88px 20px;font-size: 20px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 14px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 140px 0px 5px 70px;height: 80%;width: 80%;}
      
       }















/*S Galaxy S20 Plus*/

@media only screen and (min-device-width:854px) and  (max-device-width:854px) and (orientation:landscape){

.Container{
        max-width: 650px;}
    
    
   
#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 18px;padding-bottom: 10px;
    
    }
    
    .foo img{width: 26px;margin-left: 410px;margin-top: 20px;}
    
    #mySidenav.sidenav a{padding: 3px 10px 8px 140px;font-size: 15px;}
    
    #mySidenav.sidenav .closebtn {top: 20px;right: 70px;font-size: 27px;margin-left: 0px;}
    
    #mySidenav.sidenav li{padding: 5px 8px 8px 140px;font-size: 15px;}
    
    #mySidenav.sidenav span {font-size: 15px;}
    
     #mySidenav.sidenav a {font-size: 15px;padding-top: 1px;}
    

    
    .topnav{height: 75px;z-index: -1;}

.pid{ margin-top: 30px;width: 205px;margin-left: 20px;}
      
      .titlesofia h2 {margin-top: 90px;font-size: 16.5px;padding: 0px 10px 0px 20px;}
      
      .titlesofia p1{font-size: 17.5px;padding: 114px 20px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 150px;padding-top: 4%;height: 50%;
    width:50%;}
    
    .about h2{font-size: 17px;padding: 10px 10px 5px 25px;margin-top: 15px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 16.5px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 25px 10px 25px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 32%;font-size: 12px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 20px;font-size: 16.5px;}
      
      .titlewilliam p1{ padding: 88px 20px;font-size: 17.5px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 12px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 135px 0px 5px 65px;height: 80%;width: 80%;}
      
       }



















@media only screen and (min-device-width: 855px) and (max-device-width:926px)and (orientation:landscape) {


.Container{
        max-width: 750px;}
    
    
#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 20px;padding-bottom: 10px;
    
    }
    
    #mySidenav.sidenav a{padding: 5px 10px 0px 140px;font-size: 1.8vw;}
    
    #mySidenav.sidenav .closebtn {top: 5px;right: 55px;font-size: 27px;margin-left: 40px;}
    
    #mySidenav.sidenav li{padding: 5px 8px 0px 140px;font-size: 1.8vw;}
    
    #mySidenav.sidenav span {font-size: 2vw;}
    
     #mySidenav.sidenav a {font-size: 1.8vw;padding-top: 10px;}
    
    .foo img{width: 30px;margin-left: 480px;margin-top: 20px;z-index: 1;}
    
    
     .topnav{height: 75px;z-index: -1;}
    

.pid{ margin-top: 30px;width: 235px;margin-left: 50px;}
      
      .titlesofia h2 {margin-top: 100px;font-size: 18.5px;padding: 0px 10px 0px 50px;}
      
      .titlesofia p1{font-size: 20px;padding: 124px 50px;}
    
    a.lightboxasu img {margin: 140px 0px 25px 200px;padding-top: 4%;height: 35%;
    width:45%;}
    
    .about h2{font-size: 19px;padding: 5px 10px 5px 50px;margin-top: 0px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 17.5px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 30px 10px 30px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 32%;font-size: 13.5px;}
        
        
        
      
      .titlewilliam h2{padding: 40px 10px 0px 50px;font-size: 19px;}
      
      .titlewilliam p1{ padding: 108px 50px;font-size: 20px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 13.5px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 160px 0px 30px 85px;height: 75%;width: 75%;}
      
       }





    
    
    
    
    
    
    
    
    
    
    



@media only screen and (min-device-width: 667px) and (max-device-width:668px)and (orientation:landscape) {

#mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 35px;padding-bottom: 10px;
    
    }
    
    
#mySidenav.sidenav a{padding: 0px 10px 8px 112px;font-size: 16px;}
    
    #mySidenav.sidenav .closebtn {top: 20px;right: 35px;font-size: 25px;margin-left: 30px;}
    
    #mySidenav.sidenav li{padding: 0px 8px 8px 112px;font-size: 16px;}
    
    #mySidenav.sidenav span {font-size: 16px;}
    
     #mySidenav.sidenav a {font-size: 16px;padding-top: 0px;}
    
    .foo img{width: 28px;margin-left: 350px;margin-top: 10px;z-index: 1;}
    

    
    .topnav{height: 60px;z-index: -1;}

.pid{ margin-top: 20px;width: 220px;margin-left: 25px;}
      
      .titlesofia h2 {margin-top: 80px;font-size: 19px;padding: 0px 10px 0px 25px;}
      
      .titlesofia p1{font-size: 19px;padding: 104px 25px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 110px;padding-top: 4%;height: 50%;
    width:60%;}
    
    .about h2{font-size: 19px;padding: 15px 10px 5px 25px;margin-top: 15px;}
    
      
   .synopsis h2 {font-size: 21px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 18px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 27%;font-size: 13px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 25px;font-size: 19px;}
      
      .titlewilliam p1{ padding: 88px 25px;font-size: 19px;}
    
    .Copyrightwilliam p1{padding-left: 33%;font-size: 13px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 135px 0px 5px 10px;height: 95%;width: 95%;}
      
       }








    
  @media only screen and (min-device-width: 601px) and (max-device-width:666px)and (orientation:landscape) {


  #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 15px;padding-bottom: 10px;
    
    }
    
    
#mySidenav.sidenav a{padding: 0px 10px 8px 112px;font-size: 15px;}
    
    #mySidenav.sidenav .closebtn {top: 10px;right: 35px;font-size: 25px;margin-left: 30px;}
    
    #mySidenav.sidenav li{padding: 0px 8px 8px 112px;font-size: 15px;}
    
    #mySidenav.sidenav span {font-size: 15px;}
    
     #mySidenav.sidenav a {font-size: 15px;padding-top: 0px;}
    
    .foo img{width: 25px;margin-left: 300px;margin-top: 5px;z-index: 1;}
    
 .topnav{height: 55px;z-index: -1;}  
      
      
    
    .pid{ margin-top: 20px;width: 210px;margin-left: 25px;}
      
      .titlesofia h2 {margin-top: 80px;font-size: 17px;padding: 0px 10px 0px 25px;}
      
      .titlesofia p1{font-size: 17px;padding: 104px 25px;}
    
    a.lightboxasu img {margin: 120px 0px 5px 140px;padding-top: 4%;height: 50%;
    width:50%;}
    
    .about h2{font-size: 18px;padding: 15px 10px 5px 25px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 16px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 11px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 25px;font-size: 17px;}
      
      .titlewilliam p1{ padding: 88px 25px;font-size: 17px;}
    
    .Copyrightwilliam p1{padding-left: 35%;font-size: 11px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 135px 0px 5px 20px;height: 95%;width: 95%;}
      
       }
    
    
    
    
    

@media only screen and (min-device-width: 481px) and (max-width:600px) {
    
.Container{
        max-width: 481px;}
    
    #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 200px;
    
    }
    
    
#mySidenav.sidenav a{padding: 5px 10px 8px 72px;font-size: 14px;}
    
    #mySidenav.sidenav .closebtn {top: 0;right: 25px;font-size: 25px;margin-left: 10px;}
    
    #mySidenav.sidenav li{padding: 18px 8px 8px 72px;font-size: 14px;}
    
    #mySidenav.sidenav span {font-size: 14px;}
    
     #mySidenav.sidenav a {font-size: 14px;padding-top: 15px;}
    
    .foo img{width: 23px;margin-left: 210px;margin-top: 15px;}
    
    .topnav{height: 65px;}
    
    
    .pid{ margin-top: 30px;width: 190px;margin-left: 35px;}
      
      .titlesofia h2 {margin-top: 95px;font-size: 15px;padding: 0px 10px 0px 35px;}
      
      .titlesofia p1{font-size: 16px;padding: 118px 35px;}
    
    a.lightboxasu img {margin: 140px 0px 5px 70px;padding-top: 4%;height: 70%;
    width:70%;}
    
    .about h2{font-size: 15px;padding: 10px 10px 5px 35px;margin-top: 10px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 10px 0px 10px;text-align: justify;word-spacing: -1px;}
      
    .text.synopsis p {font-size: 14px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 30%;font-size: 10px;}
      
      .titlewilliam h2{padding: 20px 10px 0px 35px;font-size: 15px;}
      
      .titlewilliam p1{ padding: 85px 35px;font-size: 16px;}
    
    .Copyrightwilliam p1{padding-left: 33%;font-size: 10px;}
    
    a.lightboxwilliam img {margin: 120px 0px 5px 35px;height: 90%;width: 90%;}
      
       }
    





    @media only screen and (min-device-width: 481px) and (max-device-width:600px) and (orientation:landscape){

   #mySidenav.sidenav{
  height: 100%;
        max-width: 100%;
        transition: 1s;padding-top: 20px;padding-bottom: 5px;
    
    }
    
    
#mySidenav.sidenav a{padding: 0px 10px 8px 82px;font-size: 15px;}
    
    #mySidenav.sidenav .closebtn {top: 5px;right: 25px;font-size: 25px;margin-left: 20px;}
    
    #mySidenav.sidenav li{padding: 0px 8px 2px 82px;font-size: 15px;}
    
    #mySidenav.sidenav span {font-size: 15px;}
    
     #mySidenav.sidenav a {font-size: 15px;padding-top: 0px;}
    
    
    .foo img{width: 26px;margin-left: 240px;margin-top: 15px;z-index: 1;}
    

    
    .topnav{height: 65px;z-index: -1;}
        
        
        
        
     .pid{ margin-top: 30px;width: 210px;margin-left: 15px;}
      
      .titlesofia h2 {margin-top: 80px;font-size: 17px;padding: 0px 10px 0px 20px;}
      
      .titlesofia p1{font-size: 18px;padding: 104px 20px;}
    
    a.lightboxasu img {margin: 130px 0px 5px 100px;padding-top: 4%;height: 60%;
    width:60%;}
    
    .about h2{font-size: 17px;padding: 10px 10px 5px 10px;margin-top: 15px;}
    
      
   .synopsis h2 {font-size: 20px;padding: 125px 30px 0px 50px;}
      
    .text.synopsis {padding:0px 0px 0px 0px;text-align: justify;}
      
    .text.synopsis p {font-size: 17px;padding: 5px 0px 0px 0px;color: white;}
      
    .synopsisback {padding:5px 10px 10px 10px;background: rgba(114,114,114,0.1);}

      .wrapper {width: 100%;} 
      
      .Copyrightsofia{padding-top: 3%;}
      
      .Copyrightsofia p1{padding-left: 25%;font-size: 12px;}
        
        
        
      
      .titlewilliam h2{padding: 20px 10px 0px 20px;font-size: 17px;}
      
      .titlewilliam p1{ padding: 88px 20px;font-size: 18px;}
    
    .Copyrightwilliam p1{padding-left: 30%;font-size: 12px;padding-bottom: 100px;}
    
    a.lightboxwilliam img {margin: 130px 0px 5px 0px;height: 100%;width: 100%;}
      
       }