body {
    background-color:#663333;
    margin: 0;
  padding: 0;
}

a:link, a:visited {
  color: #ccc;
  text-decoration: none;
  text-decoration: underline;
  }
  a:hover, a:active {
  color: #ccc;
  text-decoration-thickness: 4px;
  text-decoration: underline;
  text-shadow: 2px 2px 5px #000;
  }

#wrapper {
    /* Set your own widths, % for fluid, px for fixed */
    width: 100%;
    margin: 0 auto;
    }

    #wrapperdesc {
  /* Set your own widths, % for fluid, px for fixed */
  width: 100%;
  padding:50px 0px 50px 0px;
  margin: 0 auto;
   
  }

  #columnsdesc {
    width: 90%; 
    margin: 0 auto;
    
    }

    .img-desktop {
        display: block;
      
          /* The required Styles */
      
          width: 100%;
          border: 0px;
      }
      
      .img-mobile {
      display: none;
       
      }

      #wrapperposters {
        /* Set your own widths, % for fluid, px for fixed */
        width: 100%;
        padding:30px 0px 30px 0px;
        margin: 0 auto;
        background-color:#ccc;
        }
      
        #columnsposters {
          width: 90%; 
          margin: 0 auto;
          display: table;
          border-collapse: collapse;
          background-color:#ccc;
          }

          .wrapperbook {
            /* Set your own widths, % for fluid, px for fixed */
            width:100%;
            padding:30px 0px 30px 0px;
            margin: 0 auto;
            }
          
            .columnsbook {
              width: 90%;
              margin: 0 auto;
              display: table;
              border-collapse: collapse;
               }

              .infoboxtitle {
                width:100%;
                text-align:center;
                display: block;
                float:left;
                margin: 30px 0px 0px 0px;
                
              }
    
              .infobox2left {
                width:50%;
                text-align:center;
                color: #fff;
                line-height: 2;
                font-size: medium;
                float:left;
                margin: 30px 0px 30px 0px;
                display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: left;
                  vertical-align: middle;
              }
    
              .infobox3right {
                width:50%;
                 height: 526px;
                text-align:center;
                color: #fff;
                line-height: 2;
                font-size: medium;
                float:left;
                margin: 30px 0px 40px 0px;
                display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: left;
                  vertical-align: middle;
              }

              .infobox2right {
                width:50%;
                text-align:right;
                color: #fff;
                line-height: 2;
                font-size: medium;
                float:left;
                margin: 30px 0px 30px 0px;
              }
    
              .infobox3left {
                width:50%;
                 height: 526px;
                text-align:center;
                color: #fff;
                line-height: 2;
                font-size: medium;
                float:left;
                margin: 30px 0px 40px 0px;
                display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: right;
                  vertical-align: middle;
              }

              .infobox3lessleft {
                width:80%;
                text-align:left;
                display: block; 
                float:right;
              }

              .infobox3lessright {
                width:80%;
                text-align:right;
                display: block; 
                float:left;
              }

              
              #wrapperfoot {
                /* Set your own widths, % for fluid, px for fixed */
                width: 100%;
                padding:30px 0px 60px 0px;
                margin: 0 auto;
                }
              
                #columnsfoot {
                  width: 90%; 
                  margin: 0 auto;
                  display: table;
                  border-collapse: collapse;
                  color:#fff;
                  text-align: center;
                  }

          
                  .infobox1 {
                    width:100%;
                    text-align:center;
                    display: block;
                    float:left;
                    margin: 30px 0px 0px 0px;
                  }
                  
                  .infobox {
            width:25%;
            text-align:center;
            display: block; 
            float:left;
            margin-bottom: 20px;
          }

          .box {
          margin: 0 auto;
          width:80%;
          padding:20px;
          height:382px;
          }

          @media (max-width: 1645px){
            .infobox {
              width:50%;
              text-align:center;
              color:#2D2B2B;
              display: block; 
              float:left;
            }
          }

          @media (max-width: 1500px){

            .infobox3right {
              width:50%;
               height: 350px;
              text-align:center;
              color: #fff;
              line-height: 2;
              font-size: medium;
              float:left;
              margin: 30px 0px 40px 0px;
              display: flex;
                justify-content: center;
                align-items: center;
                text-align: left;
                vertical-align: middle;
            }
  
            .infobox3left {
              width:50%;
               height: 350px;
              text-align:center;
              color: #fff;
              line-height: 2;
              font-size: medium;
              float:left;
              margin: 30px 0px 40px 0px;
              display: flex;
                justify-content: center;
                align-items: center;
                text-align: right;
                vertical-align: middle;
            }
          }

          @media (max-width: 1350px){
            .infobox {
              width:50%;
              text-align:center;
              color:#2D2B2B;
              display: block; 
              float:left;
            }
            .infobox3less {
              width:100%;
              text-align:center;
              display: block; 
              float:left;
            }
          }

@media (max-width: 1100px) {
    .img-mobile {
      display: block;
      width: 98%;
      margin: auto;
      border: 0px;
     }
    .img-desktop {
     display: none;
     }

     .infobox {
      width:100%;
      text-align:center;
      color:#2D2B2B;
      
    }

    .box {
    margin: 0 auto;
    margin-bottom: 30px;
    
    }
    
    
  }

  @media (max-width: 950px){


    .infobox3right {
      width:100%;
       height: 150px;
      text-align:center;
      color: #fff;
      line-height: 2;
      font-size: medium;
      float:left;
      margin: 0px 0px 10px 0px;
      display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        vertical-align: middle;
    }

    .infobox3left {
      width:100%;
       height: 150px;
      text-align:center;
      color: #fff;
      line-height: 2;
      font-size: medium;
      float:left;
      margin: 10px 0px 10px 0px;
      display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        vertical-align: middle;
    }

    .infobox3lessleft {
      width:90%;
      text-align:left;
      display: block; 
      float:left;
    }

    .infobox3lessright {
      width:90%;
      text-align:left;
      display: block; 
      float:left;
    }

    .infoboxtitle2 {
      width:100%;
      text-align:center;
      display: block; 
      float:left;
    }

    .infobox2left {
      width:100%;
      text-align:center;
      color: #fff;
      line-height: 2;
      font-size: medium;
      float:left;
      margin: 30px 0px 30px 0px;
      display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        vertical-align: middle;
    }

    .infobox2right {
      width:100%;
      text-align:right;
      color: #fff;
      line-height: 2;
      font-size: medium;
      float:left;
      margin: 30px 0px 30px 0px;
    }

    .infobox1less {
      width:100%;
      text-align:center;
      display: block; 
      float:left;
    }
  }

  @media (max-width: 640px){


    .infobox3right {
      width:100%;
       height: 150px;
      text-align:center;
      color: #fff;
      line-height: 2;
      font-size: medium;
      float:left;
      margin: 50px 0px 70px 0px;
      display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        vertical-align: middle;
    }

    .infobox3left {
      width:100%;
       height: 150px;
      text-align:left;
      color: #fff;
      line-height: 2;
      font-size: medium;
      float:left;
      margin: 10px 0px 50px 0px;
      display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        vertical-align: middle;
    }

  }