*{
    /* font-family: "Open Sans", sans-serif; */
    font-family: 'Sharp Sans', sans-serif;
}
.body{
    margin: 0;
    padding: 0;   
    font-size: 14px;
}
/* for custom scrollbar */
/* width */
::-webkit-scrollbar {
    width: 10px;
}  
  /* Track */
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey;  */
    border-radius: 10px;
}   
  /* Handle */
::-webkit-scrollbar-thumb {
    background:#1a1a1a; 
    height: 5px;
    border-radius: 10px;
}  
  /* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
  background:red
} */

/* html{
    overflow-y: hidden;
} */
h4,h5,h6{
    font-weight: bold;
    color: #1a1a1a;
}
h3{
    font-weight: 500;
}
.sm-ds{
    display: none !important
}
.landing-section{
    overflow: hidden;
    width: 100%;
    height: 100%;  
}
.container-small{
    height: 80vh;
    box-sizing: border-box;
}
.container{
    max-width: 90%;
}
.nav-link,.navbar-brand{
    color:black;
    font-size:14px
}
.main-content-area.full-window-h {
    min-height: calc(80vh);
}
.active-btn{
    background-color: black;
    color: white;
}
.site-map a{
     color: grey;
     text-decoration: none;
     font-size: 18px;
}
.site-map ul{
    padding: 0;
}
.site-map li{
    color: grey;
    list-style-type: none;
}
.site-map a:hover{
    text-decoration: underline;
    color: floralwhite;
}
.button-section-type.size .active,.book-images-icon button.active{
    border: 2px solid white;
    outline: 4px solid black;       
}
.open{
    display: block !important
}
.landing-section-left > div{
    margin-bottom: 10px;
}
.landing-section-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}
.layout-logo img{
    width: 75%;
}
.img2 img{
    width:90%;
    /* height:200px; */
}
.img1 img{
    width: 70%;
    /* height: 200px; */
}
.digital-layout{
 margin-top:auto
}
.home-btn-section{
    margin-top: 20px;
}
.home-btn-section .align-self{
   align-self:flex-end;
   text-align:center
}
.layout-top-section h1{
    font-size: 72px;
    font-weight: 100;
}
.home-btn-section .button{
    border:2px solid black;
    display: inline-block;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    font-size: 0.9vw;
    padding: 10px 15px;
    background-color: white;
    color: black;
    margin-top: 20px;
}
.layout-type{
    font-size: 21px;
    font-weight: normal;
}
.custom-hr{
    opacity:1;
}
.home-btn-section .button:hover{
    background-color: black;
    color: white;
}
.footer{
    background-color: black;
    color:rgba(255, 255, 255,0.5);
    padding:30px 0
}
.newspaper-layout.open,.magazine-layout.open,.parts-of-newspaper.open,.layout.open,.button-section-type.open{
    display: block !important
}
.layout-icon{
    position: relative;

}
.layout-icon img{
  display: block;
  margin: 0 auto;
}
.layout-icon .icon-text{
    position: absolute;
    padding:20px 50px;
    font-size: 2vw;
    width: 29%;
    height: 83%;
    font-family: 'Sharp Sans', sans-serif;
}
.layout-icon.book .icon-text{
    width: 16%;
    padding:20px 30px;
}
.layout-icon.magazine .icon-text{
  width: 20%;
  padding: 20px 30px;
}
.parts{  
    top: 2%;  
    left: 4.9%; 
}
.parts.book{
    top: 2%;  
    left: 22%; 
}
.parts.magazine{
    top: 2%;
    left:19%
}
.layouts{
    top: 2%;
    left: 35%;
}
.layouts.book{
    top: 2%;
    left: 42%;
}
.layouts.magazine{
    top: 2%;
    left: 40%;
}
.types{
    top: 2%;
    left: 68%;
}
.types.book,.types.magazine{
    top: 2%;
    left: 62%;
}
.button-section-type{
    display:none  !important
}
.button-section-type.open.ds-fx{
    display: flex !important
}
.right-btn{
    display: none;
}
.right-btn .open{
    display: block !important
}
.right-btn.size{
    display: none !important
}
.right-btn.ds-fx.open{
    display: flex !important
}
/*for types of book */
.right-section{
    display: none;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}
.right-section.open{
    display: flex !important;
    opacity:1
}
.right-btn.typeface div{
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}
.fa-arrow-left{
    color: #1a1a1a;
}
.main-sub-btn-list{
    margin: 1rem 0 1.2rem 0 ;
}
.main-sub-btn-list button.active{
  background-color:black;
  color:white
}
.main-sub-btn-list button{
    background-color:white;
    color: black;
    border: 2px solid black;
    border-radius: 10px;
    padding: 5px 10px;
    width: 19%;
    font-size: 1.1vw;
}
/* .left-side-sub-intro{
    margin-top: 0rem;
} */
.left-side-sub-intro .para,.type-intro{
      font-size: 20px;
}
.left-btn-list .button-section-type.size >button,.book-images-icon button{
  border: 2px solid rgb(181, 180, 180);
  background-color: white;
  margin-right: 25px;  
  color:transparent;
}

.left-btn-list .button-section-type.size .btn1{
    width: 60px;
    height: 90px;
}
.left-btn-list .button-section-type.size .btn2{
    width: 50px;
    height: 70px;
}
.left-btn-list .button-section-type.size .btn3{
    width: 40px;
    height: 50px;
}
.left-btn-list .button-section-type.size >button:hover,.book-images-icon button:hover{
    border: 2px solid white;
    outline: 4px solid black;    
}
.left-btn-list .xtra-btn button{
    width: 25%;
    min-width: 50px; 
    max-width: 80px;
    padding:8px 0;
    border-radius: 10px;
    margin-right: 10px;
}
.left-btn-list .xtra-btn :hover{
  background-color: black;
  color:white
}
.left-btn-list .button-section-type.margin >div >div{
   padding-bottom: 10px; 
}
.button-section-type.margin{
    flex-direction: column;
}
.button-section-type.grid.newspaper,.button-section-type.images{
    position: relative; 
    height: 50px; 
}

.button-section-type.grid.book img{
    width: 15%;
}
.button-section-type.grid.magazine img{
  width: 10%;
  margin-right: 10px;
}
.button-section-type.type{
    height: 80px;
}
.button-section-type.comics{
    padding-bottom: 20px;
}
.button-section-type.comics label{
  padding-right: 10px;
}
.button-section-type.book input[type="radio"]{
    accent-color: #000000;
}
.custom-dropdown.disabled{
    border: 2px solid grey; 
    color: grey;
}
.custom-dropdown button.disabled{
    color: grey;
    border-bottom: 2px solid grey;
}
.enabled{
    pointer-events: none;
    color: grey;
}
.custom-dropdown {
    font-size: 14px;
    transition: all 0.5s ease;
    max-height: 40px;
    background: #fff;
    width: 250px;
    z-index: 1;
    position: absolute;
    border: 2px solid #414BB2;
    border-radius: 10px;
    overflow: hidden;
}
.custom-dropdown.do-dont,.custom-dropdown.basic-to-rem,.types-of-book,.types-of-book-elements{
    width: 90%;
    z-index: 99;
}
.custom-dropdown > ul {
    padding: 5px 10px 10px 10px;
    margin: 0;
}
.custom-dropdown > ul > li {
    display: block;    
} 
.custom-dropdown li {
    cursor: pointer;
    transition: opacity 0.5s ease;
    opacity: 0;
    padding-bottom: 5px;
}
.custom-dropdown li.active {
    font-weight: 700;
}
.custom-dropdown li:hover {
    font-weight: 700;
}
.custom-dropdown button {
    background: white;
    width: 100%;
    padding: 8px 16px;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-bottom: 2px solid #414BB2;
    border-radius: 10px;
}
.custom-dropdown.open {
    max-height: 500px;
}
.custom-dropdown.open li {
    opacity: 1;
}
/* .custom-dropdown.open button{
  border-bottom: 2px solid #414BB2;
} */
.bleed-area{
  accent-color:#DA0063; /* Color for Bleed Area */
}
.trim-area{
 accent-color: #12CDD4;
}
.print-area{
 accent-color: #CEE741;
}

.range-wrapper-outer{
    width: 40%;    
}
.range-wrapper-outer .range-wrapper-division {
    display: flex;
    justify-content: space-between;
}
.control-range {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    background: #ccc;
    height: 8px;
    width: 100%;
    max-width: 100%;
    border-radius: 5px;
    z-index: 2;
}

.control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 10px;    
    background: grey;
    cursor: pointer;
    border-radius: 5px;
}
.control-range::-moz-range-thumb {
    width: 50px;
    height: 10px;
    background: grey;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
}
.toggle-switch .switch input{
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
.toggle-switch input:checked + .slider {
    background-color: #1a1a1a;
}  
.toggle-switch input:focus + .slider {
    box-shadow: 0 0 1px #1a1a1a;
}  
.toggle-switch input:checked + .slider:before {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
}  
  /* Rounded sliders */
.toggle-switch .slider.round {
    border-radius: 25px;
}  
.toggle-switch .slider.round:before {
    border-radius: 50%;
}
.image-container.part{
    overflow-y: auto;
    position: relative;
}
svg.image-map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
    /* z-index: 1000; */
}
svg.image-map rect{
   fill: transparent;
}
svg.body-text{
   width: 100%;
   height: 100%;
   display: none;
   position: absolute;
   top: 0;
   left: 0;
}
svg.body-text rect{
    fill: transparent;
}

.info{
    position:absolute;
    background-color: white;
    color: black;
    border: 2px solid cyan;
    padding: 5px;
    pointer-events: none; /* to make sure the tooltip doesn't interfere with mouse events */
}
.right-btn.type.headline{
    flex-direction: column;
}
.prev,.next{
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
}
.next.parts,.prev.parts{
    width: 30%;
}
.prev.open,.next.open{
    display: block;
}
/* .js-arrow-btn img{
    width: 50%;
} */
.arrow-btn{
    position: relative;
}
/* .prev,.next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
} */
.image-wrapper img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.right-btn.type.headline.newspaper img{
 width: 100%;
 transition: filter 0.3s;
}
.right-btn.type.headline img:hover{
    filter: invert(200%); 
}
.active-icon{
    filter: invert(200%); 
}
.right-btn-list.newspaper,.right-btn-list.book.type{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/* .right-btn-list.book{
    display: flex;
    flex-direction: row;
    align-items: center;
} */
.right-btn.type.alignment{
    display: flex;
    align-items: center;
    justify-content: center;
}
.right-btn.type.alignment img{
    width: 5%;
    margin-right: 15px;
}
.right-btn.type.alignment img:hover{
 filter: invert(70%);
}
.right-btn.grids,.right-btn.navigation,.right-btn.breakout{
    text-align: center;
}
.right-btn.grids ul,.right-btn.navigation ul{
    display: inline-block;
    padding: 0;
}
.right-btn.grids li,.right-btn.navigation li{
    float: left;
    display: block;
    list-style-type: none;
    padding: 10px 0;
    margin: 10px;
    color: grey;
    border-bottom: 3px solid transparent;
    font-size: 16px;
}
.right-btn.grids li:hover,.right-btn.navigation li:hover{
    border-bottom: 3px solid #1a1a1a;
    color: black;
}  
.right-btn.grids li.active,.right-btn.navigation li.active {
    border-bottom: 3px solid #1a1a1a;
    color: black;
}
.right-btn.breakout img{
    width: 5%;
    filter: invert(80%);
}
.right-btn.breakout img.active{
 filter: invert(0%);
}
.right-btn.images{
    margin: auto;
    text-align: center;
}
.right-btn.images button{
   background: white;
   padding: 5px 10px;
   border-radius: 25px;
   font-size: 14px;
}
.right-btn.images button.active{
    background: black;
    color: white;
}
.right-btn.variations{
    justify-content: center;
}
.right-btn.variations .left,.right-btn.variations .right{
    display: grid;
    font-size: 14px;
}
.right-btn.variations .left span,.right-btn.variations .right span{
    grid-column: 1 / span 3;
    grid-row: 1;
    padding-bottom: 5px;
}
.bottom-btn.balloons{
    display: flex;
    justify-content: center;
}
.bottom-btn.balloons label{
  padding: 0px 20px 0 10px;
}
.comic.panel{
 display: flex;
 flex-direction:column;
 justify-content:end;
 align-items: end;
}
.comic.panel img:hover{
    src: url("assets/images/book/icons/Horizontal-2.png");
}
.active-icon-bottom{
    filter: invert(20%);
}
.dot{
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
  
.dot:hover {
    background-color: #717171;
}
.dot.active{
    background-color: #717171;
}
.circle-btn button{
    border:none;
    border-radius: 50%;
    background: lightgray;
    color: black;
    font-weight: bold;
    margin: 5px;
    width: 35px;
    height: 35px;
}
.circle-btn button:hover{
    background-color: #1a1a1a;
    color: white;
}
.circle-btn button.active{
    background-color: #1a1a1a;
    color: white;
}
.dropdown-menu{
    background-color:white;
    border: 2px solid black;
    padding: 5px;
}
.dropdown-menu li{
    color:black
}
/****************************types of newspaper ***************/
.image-wrapper-type img{
    width: 80%;
    display: block;
    margin: 0 auto;
}
.button-section.layout-type{
    margin-top: 80px;
}
.button-section.layout-type img{
   width:5%;
   margin-right:10px;
}
/* .custom-dropdown.type-of-layout-dropdown{
  width: 250px;
} */
.dropdown-heading.hide ,.type-intro.hide{
  display: none;
  transition: all 0.5s ease;
}
.span2.active-color{
    color: #12CDD4;
}
.span3.active-color{
    color: red;
}
/*****************************Book layout ****************************/
.left-side-btn-section.book,.left-side-btn-section.magazine{
height: 85%;
overflow-y: auto;
overflow-x: hidden;
}
.left-side-btn.book,.left-side-btn.magazine{
    font-size: 0;
    margin-bottom: 10px;
}
.left-side-btn.book button,.left-side-btn.book div,.left-side-btn.magazine div,.left-side-btn.magazine button{
    width: 40%;
    height: 120px;
    border: 2px solid grey;
    margin: 0;
    word-break:normal;
    font-size: 14px;
    display: inline-block;
    padding: 0;
    vertical-align: text-top;  
    background-color: white; 
    z-index: 1;
    position: relative;
}
/* .left-side-btn.book button[disabled],.left-side-btn.magazine button[disabled]{
    border: 2px solid grey;
} */
.instruction{
    visibility:hidden;
}
.line{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    background-color:#1a1a1a;
    transform: translateX(-50%);
}
.line.front{
 width: 50%;
 background-color: white;
 z-index: -1;
 transform: none;
}
.line.back{
    width: 50%;
    background-color: white;
    z-index: -1;
    transform: none;
    left: 0;
}
.line.cover{
    width: 2%;
    background-color: grey;
    left: 10%;
}
.left-side-btn.book button:hover,.left-side-btn.magazine button:hover{
    background-color: #1a1a1a;
    color: white;
    font-weight: bold;
    border: none;
}
.left-side-btn.book button.active,.left-side-btn.magazine button.active,.left-side-btn-section-mbl button.active{
    background-color:#1a1a1a;
    color:white;
    font-weight: bold;
    border: none;    
}
.book-type{
    margin-left: 30%;
}
.image-wrapper-part{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.svg-part,.svg-part-mobile{
    position: absolute;
    top: 0;
    left: 0;
}
rect{
    fill: transparent;
    /* stroke:  #0000FF;
    stroke-width: 2; */
}
.svg-part .area,.svg-part-mobile .area{
    display: none;
}
.svg-part-mobile .area.sub-1{
    display: block;
}
.book-images-icon{
    display: flex;
    justify-content:center;
    align-items: center;
    padding-top:5px;
    width: 250px;
}
.book-images-icon button{
    display: none; 
    margin-right: 15px;
    margin-left: 15px;
    
}
.book-images-icon .square-size{
    width: 30px;
    height: 30px;
}
.book-images-icon .portrait-size{
    width: 40px;
    height: 60px;
}
.book-images-icon .landscape-size{
    width: 60px;
    height: 30px;
}
.left-side-bottom-text .do{
    color:green
}
.left-side-bottom-text .dont{
    color:red
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(128, 128, 128,0.8) /* Fallback color */
  }
  
  /* Modal Content (image) */
.modal-img {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 800px;
    background-color: white;
}
  /* Add Animation */
.modal-img{  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
  
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
  
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
  
  /* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
  
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.left-side-btn-section .left{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    padding: 30px 0;    
}
.left-side-btn-section .left span{
    transform: rotateZ(270deg);
    display: inline-block;
    transform-origin: center;
    white-space: nowrap;
}
  /* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
}
/* .read-more-scroll-wrap {
    position: absolute;
    right: -270px;
    top: 96px;
    transition: all 0.5s ease;
    background: #ccc;
    padding: 30px;
    color: #333;
    width: 300px;
    height: 63.1vh;
    max-height: 63.1vh;
    z-index: 9;
}
.read-more-scroll-wrap .trigger {
    width: 50px;
    position: absolute;
    cursor: pointer;
    color: #696969;
    left: -45px;
    top: 50px;
}
.read-more-scroll-wrap .trigger:after {
    width: 20px;
    height: 20px;
    content: "";
    transform: rotate(45deg);
    display: block;
    position: absolute;
    background: #ccc;
    top: 22%;
    right: -10px;
}
.read-more-scroll-wrap .sroll-content-area {
    color: #696969;
    max-height: 45vh;
}
.read-more-scroll-wrap.open {
    right: 0px;
} */
.magazine-type-icon span{
  padding: 0 10px;
  color: black;
}
.magazine-type-icon i.type.active,.magazine-type-icon span.type.active{
 color: #8fd144;
}
.magazine-type-icon i.entry.active,.magazine-type-icon span.entry.active{
  color: #2d9bf0;
}
.magazine-type-icon i.eye.active,.magazine-type-icon span.eye.active{
  color: #f24726;
}
.spread-icons img.active{
    outline: 3px solid black;
}
.right-top-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
}
.button-section-type.book.margin.open.mbl-screen{
    display: none !important
}

@media (max-width :1399px){
    .range-wrapper-outer{
        width: 50%;    
    }
    .layout-top-section h1{
        font-size:70px ;
    }
    .left-side-sub-intro .para,.type-intro{
        font-size: 18px;
    }
    .site-map li a{
        font-size: 12px;
    }
}
@media (min-width: 1400px) and (max-width: 1899px){
    /* .container{
        max-width: 90%;
    } */
    .image-wrapper img{
        width:90% ;
    }
    .layout-top-section h1{
        font-size:80px ;
    }
}
@media (min-width: 1900px) {
    .container{
      max-width: 1800px;
    }
    /* .layout-top-section h1{
        font-size:100px ;
    } */
    .home-btn-section .button{
        font-size: 16px;
    }
    .layout-icon .icon-text{
        font-size: 42px;
    }
    .main-sub-btn-list button{
      font-size: 18px;
    }
    .left-side-sub-intro .para,.type-intro{
        font-size: 24px;
    }
}
@media (max-width:992px){
    /* .container-small{
        max-width: 95%;
    }
    .container{
        max-width: 95%;
    } */
    *{
      font-size: 14px;
    }
    .left-side-sub-intro .para,.type-intro{
      font-size: 16px;
    }
    /* .custom-dropdown.do-dont,.custom-dropdown.basic-to-rem{
        width: 95%;
    } */
    .layout-top-section h1{
        font-size:50px ;
    }
    .layout-type{
        font-size: 16px;          
    }
    .main-sub-btn-list button{
        width: 18%;
    }
    .nav-link,.navbar-brand{
        font-size:12px
    }
}
@media only screen and (max-width: 767px){
    .container-small{
        height:auto;       
    }
    .footer{
        display: none;
    }
    /* .col-1,.col-10{
        padding: 0;
    } */
    .newspaper-part-image{
        height: auto;
    }
    svg{
      height: 100%;
    }
    html{
        overflow: auto;
    }
    .lg-ds{
        display: none !important
    }
    .parts-of-newspaper.mobile-screen{
        display: block !important;
        margin-bottom: 20px;        
    }
    .parts-of-newspaper.custom-dropdown select{
        width: 100%;
        outline: 2px solid blue;
    }
    .home-right-section{
        flex-direction: column;      
    }
    .home-right-section button{
        padding: 20px;
        margin-bottom: 10px;
        font-size: 16px;
    }
    .custom-dropdown{
        width: 100%;
        z-index: 999;
        max-height: 55px;
    }
    .custom-dropdown button{
        padding: 17px 10px;
    }    
    .sm-ds{
        display: block !important;
    }
    .sm-ds.ds-fx{
        display: flex!important;
    }
    .left-btn-list .button-section-type.size >button{
        border:none;
        background-color:rgb(185, 181, 181);
        color: grey;
        margin-right: 5px; 
        padding: 15px 0px;
    }
    .left-btn-list .button-section-type.size .btn1,.left-btn-list .button-section-type.size .btn2,.left-btn-list .button-section-type.size .btn3{
        width: 30%;
        border-radius: 10px;
        height: auto;
    }
    .button-section-type.layout button.active,.left-btn-list .button-section-type.size >button:hover{
        border:none;
        outline: none;      
        background-color: black; 
        color: white;
    }
    .left-side-sub-intro .para{
        padding-top: 80px;
        font-size: 18px;
    }
    .button-section-type.margin{
        flex-direction: row;
    }
    .button-section-type.layout.margin.magazine > div, .button-section-type.layout.margin.newspaper > div{
      padding-right: 8px;
    }
    .button-section-type.grid .custom-dropdown,.button-section-type.images .custom-dropdown{
      width: 80%;
    }
    .landing-section-right{
        margin-top: 20px;
        height: auto;
    }  
    .top-main-sub.layout-type{
        margin-bottom: 80px;
    }
    .image-wrapper-type{
        text-align: center;
    }  
    .button-section.layout-type{
        padding-top: 20px;
    }  
    .button-section.layout-type img{
        width:10%;
        margin-right:10px;
     }
    .layout-type-img.web img{
        width: 50%;
    } 
    .layout-type-img.book img,.layout-type-img.magazine img{
        width: 100%;
    } 
    .layout-type-img.basics img{
        width: 30%;
    }      
    .home-btn-section .align-self{
        text-align:left
    }   
    .layout-type-img.basics a{
      font-size: 16px;
    }                               
    .home-btn-section > div,.layout-logo{
      margin-bottom: 20px
    }
    .home-btn-section{
        margin-top: 0;
    }
    .layout-icon-mobile img{
        margin-bottom: 10px;
    } 
    .layout-icon-mobile{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icon-text{
        position: absolute;
        width: 60%;
        top: 10%;
        height: 80%;
        padding-left: 10px;
        font-size: 4.5vw;
        font-size: 22px;
    }
    .icon-text:hover{
        color:black
    }
   .prev,.next{
    width: 70%;
   }
   .range-wrapper-outer{
    width: 80%;    
   }
   .range-wrapper-outer.lineSpacing{
    width: 100%;    
   }
  .right-btn.type.alignment img{
   width: 12%;
   margin: 0 10px;
  }
  .right-btn.type.headline img{
   width: 15% !important
  }
  .button-section-type.grid.book img{
    width: 25%;
  }
  .button-section-type.book.images{
    height: 70px; 
  }
  .types-of-book,.types-of-book-elements{
    width: 90%;
  }
  .right-section img{
    width:100%
  }
  .button-section-type.grid.magazine img{
    width: 15%;
  }
  .left-side-btn-section-mbl{
      width: 100%;
      overflow-x: auto;
      display: flex;   
      padding: 20px 0px;
  }
  .left-side-btn-section-mbl .parent{
      display: flex;  
      flex-direction:column ;
      padding: 0 2px;
  }
  .left-side-btn-section-mbl .parent div{
      padding: 0 5px;
  }
  .left-side-btn-section-mbl button{
      width: 100px;
      height: 120px;
      background-color: white;
      border: 2px solid grey;
      margin: 0;
      font-size: 14px;
  }
  .part-top-section{
      white-space:nowrap;
  }
  .part-top-section span{
      display: inline-block;
  }
   .right-top-row{
    height: auto;
  }
 .magazine-type-icon span{
    padding: 0 8px;
  }
  .magazine-type-icon{
    margin-bottom: 25px;
  }
  .right-btn.variations{
    justify-content:space-evenly;
    margin-top:20px;
  }
  .right-btn.variations .left,.right-btn.variations .right{
    display: block;
  }
  .right-btn.typeface ul,.right-btn.size ul{
    display: inline-block;
    padding: 0;
  }
  .right-btn.typeface li,.right-btn.size li{
    float: left;
    display: block;
    list-style-type: none;
    padding: 5px 0;
    margin: 10px;
    color: grey;
    border-bottom: 3px solid transparent;
    font-size: 14px;
  }
  .right-btn.typeface li:hover,.right-btn.size li:hover{
    border-bottom: 3px solid #1a1a1a;
    color: black;
  }  
  .right-btn.typeface li.active,.right-btn.size li.active{
    border-bottom: 3px solid #1a1a1a;
    color: black;
  }
  /* .right-btn.typeface.ds-fx{
    display: none !important
  } */
  .order1{
    order: 2;
  }
  .order0{
    order: 1;
  }
  .right-btn.breakout img{
    width: 10%;
  }
  .right-btn.grids li{
    font-size: 12px;
  } 
  .right-btn.navigation li{
   font-size: 2.8vw;
   margin: 0;
   margin-right: 5px;
  }
  .right-btn.images button{
    background: white;
    padding: 5px;
    border-radius: 25px;
    font-size: 12px;
  }
  .right-btn.size.open{
    display: block !important
  }
  .button-section-type.book.margin.open{
    display: none !important
  }
  .button-section-type.book.margin.open.mbl-screen{
    display: block !important
  }

}