<?php defined('ABSPATH') || die('Cheatin\' uh?');?>

<link href="https://fonts.google.com/specimen/Roboto?query=roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">
<style>
    .preview-left{
            scale:1;
            margin:auto;
        }
        @media (max-width: 1499px) {
            .preview-left{
                scale:0.9;
            }
        }
        @media (max-width: 1440px) {
            .preview-left{
                scale:0.8;
            }
        }
        @media (max-width: 1335px) {
            .preview-left{
                scale:0.7;
            }
        }
        @media (max-width: 1250px) {
            .preview-left{
                scale:0.65;
            }
        }
        @media (max-width: 1190px) {
            .preview-left{
                scale:0.6;
            }
        }
        .select-preview-pannel.visible{
            display:flex;
            position:absolute;
            bottom:0vw;
            gap:1.1vw;
            background-color:rgba(0,0,0,0.7);
            z-index:9;width:100%;
            padding:1.5vw;
            align-items:center;
            justify-content:center;
            border-radius:1vw;
            backdrop-filter: blur( 13.5px );
            -webkit-backdrop-filter: blur( 18px );
        }
        ::-webkit-scrollbar {
        width: 0.5vw;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: #f1f1f1; 
    }
 
    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #888; 
    border:none;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #555; 
    }
</style>   
    <div class="preview-box" style="left: 10%;top: 55%;position:absolute;z-index:9;display:none;background-color:white;z-index:100;width:70vw;height:57vw;scale:0.73;border-radius:1vw;">
            <div style="position:absolute;top:1vw;left:1vw;display:flex;">
                <?php  echo '<img  style="width:4vw;height:4vw;" src='.plugins_url(). "/starboxnew/view/assets/img/logo.png".' alt="">';?>
                <div style="margin-left:0.5vw;margin-top:0.4vw;">
                    <div style="font-size:1.2vw;font-weight:500;">Starbox</div>
                    <div style="font-size:0.9vw;font-weight:500;color:#fbcc34;margin-top:-.3vw;">Dare to stand out.</div>
                </div>
            </div>

            <?php  echo '<img class="img-close" style="position:relative;top:1vw;height:3.3vw;width:3.3vw;cursor:pointer;z-index:9;" src='.plugins_url(). "/starboxnew/view/assets/img/cross.png".' alt="">'; ?>
            <div class="theme-main-container" style="width:80%;height:38vw;overflow-y:scroll;margin-top:-2vw;margin:auto;padding:1vw;padding-bottom:23vw;"> 
                <div class="preview-left" id="themee" style="height:100%;width:100%;display:flex;align-items:flex-start;"></div>
            </div>
        
            <div class="preview-right" style="position:absolute;bottom:2vw;height:2vw;width:100%;display:flex;align-items:center;justify-content:center;">  
                <div class="preview-info" style="height:10vw;width:25vw;display:flex;flex-direction:column;justify-content:center;align-items:center;">
                    <input class="preview-input" name=""  style="width:18vw;height:3vw;background-color:rgb(251, 204, 52);font-size:1.2vw;font-weight:500;color:black;border-radius:2vw;position:relative;cursor:pointer;border:none;" id="select-theme-edit" type="submit" value="Select" />
                    <input class="preview-input-st select"   style="display:none;width:18vw;height:3vw;background-color:rgb(251, 204, 52);font-size:1.2vw;font-weight:500;color:black;border-radius:2vw;position:relative;cursor:pointer;border:none;"  type="submit" value="Select" />
                </div>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

            <div class="swiper mySwiper" style="width:45vw;height:12vw;top:39vw;position:absolute;left:13vw;box-shadow: rgba(1, 0, 0, 0.1) 0px 20px 150px;padding:0.5vw;border-radius:1vw;">
                <div class="swiper-wrapper" style="">
                        <div class="swiper-slide" style="">
                            <?php echo '<input type="image" class="theme-index" id="prevOne" value="indexone"  class="img-wrapper-options" style="margin-right:0.5vw;height:11vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevTwo" value="indextwo"  class="img-wrapper-options" style="margin-left:0.5vw;height:11vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                            
                        </div>
                        <div class="swiper-slide" style="">
                            <?php echo '<input type="image" class="theme-index" id="prevThree" value="indexthree" class="img-wrapper-options" style="height: 11vw;vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevFour" value="indexfour"  class="img-wrapper-options" style="height: 11vw;vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo '<input type="image" class="theme-index" id="prevFive" value="indexfive"  class="img-wrapper-options" style="height: 11vw;vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevSix" value="indexsix"  class="img-wrapper-options" style="height: 11vw;vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo '<input type="image" class="theme-index" id="prevSeven" value="indexseven" class="img-wrapper-options" style="height: 11vw;vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevEight" value="indexeight" class="img-wrapper-options" style="height: 11vw;vw;width:14vw;border-radius:0.5vw;" alt="">';?>
                        </div> 
                    </div>
                    <div class="swiper-button-next" style="color:#003333;font-size:0.9vw;"></div>
                    <div class="swiper-button-prev" style="color:#003333;font-size:0.9vw;"></div> 
                
                </div>
            </div>
    </div>   

    <div style="background-color:white;">
        <form method="POST" enctype="multipart/form-data">
        <?php STRB_Classes_Helpers_Tools::setNonce('strb_settings_prev', 'strb_nonce'); ?>
        <input type="hidden" name="action" value="strb_settings_prev"/>     
        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>   
        <div class="back-setup" style="position:absolute;top:2.7vw;left:3.6vw;">
            <div>
                <button type="submit" class="go-back" style="font-size:1.2vw;font-weight:500;align-text:center;border:none;width:10vw;height:2vw;border-radius:1vw;background-color:#033;cursor:pointer;color:white;" class="btn rounded-2 btn-primary btn-lg py-2 px-5"><?php echo esc_html__("Back", 'squirrly-seo'); ?></span></button>
            </div>
        </div>
        </form>  
    </div>
    
    <?php
        $theme_types=["visual","standard","modern","sidebar"];
        $visual_types=["all","crafts","fashion","fitness","food","geek","holiday","interior-design","parenting","pets","photograpy","real-estate","tech","travel","wedding"];
    ?>
    
   <div class="top-menu-themes" style="background-color:white;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;height:21vw;padding-bottom:2.5vw;position:absolute;top:8vw;width:100%;border-bottom:0.1vw solid black;">
        <?php   echo '<div class="wrapper-box active" id="all" style="cursor:pointer;width:26vw;top:2vw;height:15vw;background-color:#95a2a1;border-radius:1vw;display:flex;">';
                        $view->show_view('Blocks/Preview1');
                        $view->show_view('Blocks/Preview4');
                        $view->show_view('Blocks/Preview2');
                        $view->show_view('Blocks/Preview3');
                echo' </div>';
                echo '<div style="width:50vw;height:15vw;display:flex;gap:1.5vw;">';
                foreach($theme_types as $type){
                    echo '<div class="wrapper-box type-box" style="width:12vw;height:15vw;background-color:#95a2a1;border-radius:1vw;z-index:2;cursor:pointer;position:relative;" id="'.$type.'">
                            <div style="color:black;display:flex;justify-content:center;align-items:center;flex-direction:column;">
                                <div style="color:white;font-weight:700;color:white;font-size:1vw;">'.$type.'</div>
                                
                                <div style="display:flex;gap:1vw;margin-top:0.5vw;">
                                    <div style="width:6.5vw;display:flex;flex-direction:column;gap:0.3vw;padding-top:0.5vw;">';
                                       for($i=0;$i<15;$i++){
                                         echo '<div style="width:6.5vw;height:0.2vw;background-color:#bfc8c6;"></div>';
                                       }
                                    
                                        if($type=="standard"){echo'
                                            <div style="width:6.5vw;height:2vw;background-color:#dfb928;border-radius:0.5vw;font-weight:700;text-align:center;font-size:1vw;"></div>';}
                                        else if($type=="sidebar"){echo'
                                            <div style="position:absolute;top:2vw;width:3vw;height:2vw;margin-left:7.5vw;background-color:#dfb928;border-radius:0.5vw;font-weight:700;text-align:center;font-size:1vw;"></div>';}
                                        else if($type=="visual"){echo'
                                            <img style="width:3vw;height:3vw;border-radius:0.5vw;margin-left:1.5vw;" src= "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back3.png" /> ';}
                                        else echo '<div style="width:3.5vw;height:2vw;margin-left:1.5vw;background-color:#dfb928;border-radius:0.5vw;font-weight:700;text-align:center;font-size:1vw;"></div>';
                                    echo'</div>';
                                    if($type=="sidebar"){echo'
                                        <div style="width:3vw;height:8.2vw;background-color:#bfc8c6;border-radius:0.6vw;margin-top:2.5vw;"></div>';}
                                    else echo '<div style="width:3vw;height:8.2vw;background-color:#bfc8c6;border-radius:0.6vw;"></div>';
                                    
                                    echo'
                                </div>
                            </div>';
                            if($type!="visual")
                                echo '<div style="position:absolute;bottom:-0.8vw;right:-0.7vw;height:3vw;width:3vw;font-size:0.8vw;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#abdbe3;color:black;border:0.3vw solid white;">NEW!</div>';
                            echo'
                        </div>';
                }
                echo '</div>';
        ?>

        <div class="filteredb" style="z-index:2;display:none;position:absolute;bottom:1.5vw;background-color:transparent;width:100%;justify-content:flex-end;top:17vw;padding-bottom:1vw;padding-top:1vw;padding-left:3vw;">
            <div style="width:100%;padding-left:74%;">
                <div style="font-size:1vw;font-weight:500;color:black;">Filter by blogger type:</div>
                <div class="select-menu" id="select-menutwo" style="margin-right:20px;">
                    
                    <div class="select-btn" id="select-btntwo" style="height:2vw;padding:1.5vw;width:19vw;background-color:#F3F6F8;border:1px solid gray;border-radius:2vw;">
                        <span  class="btn-text" style="color:black;font-size:1vw;font-weight:500;">All</span>
                        <i class="bx bx-chevron-down" style="color:black;font-size:1.4vw;font-weight:500;"></i>
                    </div>
    
                    <ul class="options"style="overflow:hidden;position:absolute; overflow-y:scroll;height:400px;width:19vw;margin-top:5px; z-index:1000;color:black; background-color: white;padding:0px;font-size:1vw;">
                        <li class="option" id="all">
                                    <span class="option-text">All</span>
                        </li>
                        <?php foreach($visual_types as $type){
                            echo '<li class="option" style="" id="'.$type.'">
                                    <span class="option-text">'.$type.'</span>
                                </li>';
                        }
                        ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </div>

    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> 

    <div class="all-themes" style="position:absolute;top:25.1vw;">
    <!--Visul Crafts-->
    <div class="visual-category crafts-wrap" style="">
        <div class="poster-wrapper active"  style="width:100%;z-index:100;padding-top:4vw;">

        <div class="poster" >
            <?php  echo '<img id="Crafts/Lino+Crafting"  style="height:100%;width:100%;" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="position:absolute;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="position:absolute;left:50%;transform:translate(-50%, -50%);color:black"/>      
         </div>

        <div class="poster" >
            <?php  echo '<img id="Crafts/Kniting" style="height:100%;width:100%;" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Pottery" style="height:100%;width:100%;" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Wood" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Blacksmith" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Paper" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Painting" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Carpenter" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Paper Flowers" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>
        </div>
    </div>

    <!--Visul Fashion-->
    <div class="visual-category fashion-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Fashion/Woman" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Fashion/Man" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back9.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Woman+Portrait" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Man1" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Woman1" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Blouse" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Clothes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Man2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Woman2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


    <!--Visul Fitness-->
    <div class="visual-category fitness-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Fitness/Man+Gym" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Fitness/Woman+Gym" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Running" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Woman+Back" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Man+Rope" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Shoes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Man" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Yoga" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Broccoli" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

    <!--Visual Food-->
    <div class="visual-category food-blogger-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Food/Pancakes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Food/Beer" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Clementine" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Cupcakes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Cake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Pasta" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/French+Toast" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Plums" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Quiche" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

     <!--Visul Geek-->
     <div class="visual-category geek-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Geek/Ant+Man" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Geek/Thanos" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back3.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Mandalorian" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Comic+Books" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Deadpool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Game+Boy" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Batman" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Pokemon" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Game+Board" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

     <!--Visul Holiday-->
     <div class="visual-category holiday-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Holiday/Easter+Eggs" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back6.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Holiday/Halloween+Pumpkin" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Mistletoe" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Sparkles" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Christmas" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Easter" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Pink+Easter" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Halloween" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/New+Year" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

     <!--Visul Interior Design-->
     <div class="visual-category interior-design-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Interior+Design/Chairs+and+Lamp" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back1.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Interior+Design/Pillow" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Desk" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Chair" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Frames" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Living+Room" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Table" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Kitchen" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Dinning+Room" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

    <!--Visul Parenting-->
    <div class="visual-category parenting-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Parenting/Mom" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Parenting/Beach" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back8.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Mom+(1)" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Hands" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Mom+(2)" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Dad" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Vacation" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Child" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Legs" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


    <!--Visual Pet-->
    <div class="visual-category pet-blogger-wrap" style="">
        <div class="poster-wrapper active" style="z-index:1000;">

        <div class="poster">
            <?php  echo '<img id="Pets/Dog+With+Hat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back7.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Goat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back8.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoTwo" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indextwo" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Cat+and+Dog" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoThree" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Orange+Dog" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back1.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFour" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Cat+Looking+Up" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFive" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Orange+Cat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSix" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Pets/Dog" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSeven" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Pets/Guinea+Pig+2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back2.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoEight" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Pets/Guinea+Pig" class="img-wrapper"  src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back6.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoNine" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
        </div>
    </div>
        
    <!--Visul Photo-->
    <div class="visual-category photo-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Photography/Desert" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Photography/Cliff" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back7.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Ice+Cave" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Winter+Lake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Lake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Zebra" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Elephant" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Forest" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Leaves" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


    <!--Visul Real Estate-->
    <div class="visual-category real-estate-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Real+Estate/House+with+pool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Real+Estate/House+Wood" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back1.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Inside" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Terace" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Roof" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Pool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/House+with+nature" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Kitchen" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Pool+with+house" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


     <!--Visul Tech-->
     <div class="visual-category tech-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Tech/Lens" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Tech/Camera" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back8.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Woman" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Board" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Drone" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Headphones" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Tech+Board" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Robot" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Room" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


     <!--Visul Travel-->
     <div class="visual-category travel-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Travel/Passports" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Travel/Northern+Lights" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back2.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Pool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/River" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Lake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Desert" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Great+Wall+of+China" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/VW+Bus+T2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Boat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>
        </div>
    </div>

    <!--Visual Wedding-->
    <div class="visual-category wedding-blogger-wrap" style="">
        <div class="poster-wrapper active" style="z-index:1000;">

        <div class="poster">
            <?php  echo '<img id="Wedding/Table" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back8.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Bride" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back2.png".'  alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoTwo" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indextwo" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Bands" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoThree" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Venue" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back1.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFour" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Couple" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back6.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFive" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Table+Setting" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSix" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Wedding/Couple+At+See" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back7.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSeven" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Wedding/Couple+Close+Up" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoEight" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Wedding/Couple+In+Rain" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoNine" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
        </div>
    </div>
    </br>

    <!--Standard-->
    <div class="poster-wrapper-standard active" style="align-items:center;position:relative;padding-bottom:6vh;margin-top:2.7vw;padding-top:2vw;">
        <div style="display:flex;align-items:center;justify-content:center;flex-wrap: wrap;min-height: 23vw;position:relative;background-color: white; gap:2vw; ">
            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Standard1.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" placeholder="im1" name="classic/business"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Standard2.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" placeholder="im1" name="classic/business2"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business2"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Standard3.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" placeholder="im1" name="classic/business3"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business3"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern1.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business4"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business4"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern2.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business5"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business5"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern3.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business6"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business6"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern4.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business7"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business7"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern5.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business8"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business8"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern6.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business9"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business9"/>
                </div>
            </div>

            
            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern7.png";?>">
                </div>
                <div class="select-preview-pannel">
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business10"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business10"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.7vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern8.png";?>">
                </div>
                <div class="select-preview-pannel"> 
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business11"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business11"/>
                </div>
            </div>

            <div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                <div class="" style="width:25vw;height:12.5vw;box-shadow: 0 4px 30px rgba(0,0,0,0.2);">
                    <img class="img-wrapper" style="width:100%;height:100%;" src="<?php echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Modern/Modern11.png";?>">
                </div>
                <div class="select-preview-pannel"> 
                    <input class="preview-standard preview-button" type="submit" value="Preview" name="classic/business12"/>
                    <input class="select select-button" type="submit" value="Select" name="classic/business12"/>
                </div>
            </div>

        </div>
    </div>
                
    <!--Modern-->
    <div class="poster-wrapper-modern active" style="position:relative;width:100%;gap:1vw;justify-content:space-between;background-color:white;min-height:80vh;padding:3vw;margin-top:2.7vw;">  
        <?php
            for($p=1;$p<17;$p++){
                echo '<div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                        <div class="select-preview-pannel">
                            <input class="preview-standard" type="submit" value="Preview" name="modern/modern'.$p.'" style="z-index:9;height:2vw;width:8vw;font-size:1vw;font-weight:700;background-color:#95a2a1;color:white;cursor:pointer;border:none;border-radius:2vw;"/>
                            <input class="select" type="submit" value="Select" name="modern/modern'.$p.'" style="z-index:9;height:2vw;width:8vw;font-size:1vw;font-weight:700;cursor:pointer;border:none;border-radius:2vw;background-color:#dfb928;"/>
                        </div>';
                        $view->show_view("Themes/previews/preview".$p);
                echo '</div>';
            }
        ?>
    </div>

     <!--Sidebar thmes-->
     <div class="poster-wrapper-sidebar" style="display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;background-color:white;min-height:80vh;gap:1vw;display:none;padding:3vw;margin-top:2.7vw;">
        <?php
            for($p=1;$p<21;$p++){
                echo '<div class="teme-display-pannel" style="position:relative;display:flex;align-items:center;justify-content:center;">
                        <div class="select-preview-pannel">
                            <input class="preview-standard" type="submit" value="Preview" name="sidebar/sidebar'.$p.'" style="z-index:9;height:2vw;width:8vw;font-size:1vw;font-weight:700;background-color:#95a2a1;color:white;cursor:pointer;border:none;border-radius:2vw;"/>
                            <input class="select" type="submit" value="Select" name="sidebar/sidebar'.$p.'" style="z-index:9;height:2vw;width:8vw;font-size:1vw;font-weight:700;cursor:pointer;border:none;border-radius:2vw;background-color:#dfb928;"/>
                        </div>';
                        $view->show_view("Themes/previews/sidebar_previews/preview".$p);
                echo '</div>';
            }?>
    </div>

    </div>
    </br>
    <div class="edit-theme" style="display:none;">
        <div  style="position:absolute;top:0px;height:100%;width:100%;background-color:rgba(0,0,0,0.7);">
            <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->get_view('Blocks/EditTheme');?>
        </div>
    </div>
    <?php wp_enqueue_media();?>
        </div>
    </div>
            
<script>
    swiper;
    var swiper = new Swiper(".mySwiper", {
    pagination: {
        el: ".swiper-pagination",
        type: "fraction",
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    });

    (function ($){
        $(".wrapper-box").click((e) => {
            if ($(e.currentTarget).attr("id") === "sidebar") {
                $(".poster-img").css("filter", "grayscale(100%)");
                $(".sidebar").css("filter", "grayscale(0%)");
                $(".poster-wrapper-sidebar").css("display","flex");
                $(".poster-wrapper-standard").removeClass("active");
                $(".poster-wrapper-modern").removeClass("active");
                $(".poster-wrapper").removeClass("active");
                $(".filteredb").css("display", "none");
            }
            else if ($(e.currentTarget).attr("id") !== "sidebar"){
                    $(".poster-wrapper-sidebar").css("display","none");
                }
        });
                
        $(".select").click((event) => { 
            $("body").css("height", "100vw");
            $("body").css("overflow", "hidden");
            $("html").animate({ scrollTop: 0 }, "slow");
            $(".all-themes-pannel").css("display","block");
        });
                
        $(".change-theme").click((event) => { 
            $("body").css("height", "100%");
            $("body").css("overflow-y", "scroll");
            $(".all-themes-pannel").css("display","none");
        });

        $(".quit-edit-theme").click((event) => {
            $(".edit-theme").css("display", "none");
            $("body").css("height", "100vw");
            $("body").css("overflow-y", "scroll");
            location.reload();
        });

        $(".new-user-data-btn").click(()=>{
            $("body").css("overflow-y", "scroll");
        });
     
        $(".preview-input").click(()=>{
            $(".all-themes-pannel").css("display","block");
            $("body").css("overflow", "hidden");
        });
        $(".teme-display-pannel").hover((e)=>{
            $(e.currentTarget).children(".select-preview-pannel").toggleClass("visible");
        });
              
    }(jQuery));
</script>
   
<style>
    body{
        background-color:white;
    } 
    .select-preview-pannel{
        display:none;
    }
    .select-preview-pannel.visible{
        display:flex;
        position:absolute;
        bottom:0vw;
        gap:1.1vw;
        background-color:rgba(0,0,0,0.7);
        z-index:9;width:100%;
        padding:1.5vw;            
        align-items:center;
        justify-content:center;
        border-radius:1vw;
        box-shadow: 0 4px 30px rgba(0,0,0,0.3); 
        backdrop-filter: blur( 13.5px );
        -webkit-backdrop-filter: blur( 18px );
    }
    .preview-button{
        z-index:9;
        height:2vw;
        width:8vw;
        font-size:1vw;
        font-weight:700;
        background-color:#95a2a1;
        color:white;
        cursor:pointer;
        border:none;
        border-radius:2vw;
    }
    .select-button{
        z-index:9;
        height:2vw;
        width:8vw;
        font-size:1vw;
        font-weight:700;
        cursor:pointer;
        border:none;
        border-radius:2vw;
        background-color:#dfb928;
    }
</style>
   
    
    
   