How to adjust the size of the button on the main page slider so that it adjusts to the screen size

Hello, good day. I am working on a site on localhost and I realize that the size of the button of the slider on the home page stays the same regardless of the screen size.

Could you please provide me with the code to adjust the button size for different screen sizes.

Here is a pic of what I am talking about:
Mobile

Desktop

I believe this is the HTML for the page in question:




    <title>Ghost Stories R Us – Ghost Stories, Ghost Pictures, Hauntings and more!</title>
    <link rel="dns-prefetch" href="//maps.google.com">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//s.w.org">
    <link rel="alternate" type="application/rss+xml" title="Ghost Stories R Us » Feed" href="http://localhost/ghoststories/wordpress/feed/">
    <link rel="alternate" type="application/rss+xml" title="Ghost Stories R Us » Comments Feed" href="http://localhost/ghoststories/wordpress/comments/feed/">
    		<script type="text/javascript">
    			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/ghoststories\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.1"}};
    			!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56794,8205,9794,65039],[55358,56794,8203,9794,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
    		</script><script src="http://localhost/ghoststories/wordpress/wp-includes/js/wp-emoji-release.min.js?ver=4.9.1" type="text/javascript" defer=""></script>
    		<style type="text/css">
    img.wp-smiley,
    img.emoji {
    	display: inline !important;
    	border: none !important;
    	box-shadow: none !important;
    	height: 1em !important;
    	width: 1em !important;
    	margin: 0 .07em !important;
    	vertical-align: -0.1em !important;
    	background: none !important;
    	padding: 0 !important;
    }
    </style>
    <link rel="stylesheet" id="dashicons-css" href="http://localhost/ghoststories/wordpress/wp-includes/css/dashicons.min.css?ver=4.9.1" type="text/css" media="all">
    <link rel="stylesheet" id="admin-bar-css" href="http://localhost/ghoststories/wordpress/wp-includes/css/admin-bar.min.css?ver=4.9.1" type="text/css" media="all">
    <link rel="stylesheet" id="sydney-bootstrap-css" href="http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/css/bootstrap/bootstrap.min.css?ver=1" type="text/css" media="all">
    <link rel="stylesheet" id="edsanimate-animo-css-css" href="http://localhost/ghoststories/wordpress/wp-content/plugins/animate-it/assets/css/animate-animo.css?ver=4.9.1" type="text/css" media="all">
    <link rel="stylesheet" id="siteorigin-panels-front-css" href="http://localhost/ghoststories/wordpress/wp-content/plugins/siteorigin-panels/css/front-flex.css?ver=2.6.0" type="text/css" media="all">
    <link rel="stylesheet" id="tt-easy-google-fonts-css" href="http://fonts.googleapis.com/css?family=Nosifer%3Aregular&amp;subset=latin%2Call&amp;ver=4.9.1" type="text/css" media="all">
    <link rel="stylesheet" id="sydney-fonts-css" href="https://fonts.googleapis.com/css?family=Poppins%3A400%2C600%7CUbuntu%3A400%2C400i%2C500%2C500i" type="text/css" media="all">
    <link rel="stylesheet" id="sydney-style-css" href="http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/style.css?ver=20170930" type="text/css" media="all">
    <style id="sydney-style-inline-css" type="text/css">
    .site-title { font-size:32px; }
    .site-description { font-size:16px; }
    #mainnav ul li a { font-size:13px; }
    h1 { font-size:52px; }
    h2 { font-size:42px; }
    h3 { font-size:32px; }
    h4 { font-size:25px; }
    h5 { font-size:20px; }
    h6 { font-size:18px; }
    body { font-size:16px; }
    .single .hentry .title-post { font-size:36px; }
    .text-slider .maintitle { font-size:68px; }
    .text-slider .subtitle { font-size:18px; }
    .header-image { background-size:cover;}
    .header-image { height:300px; }
    .facts-section.style2 .roll-counter i,.roll-team.type-b.style2 .team-item .team-social li:hover a,.portfolio-section.style2 .project-filter li a:hover,.timeline-section.style2 .timeline .icon .fa::before, .style1 .plan-icon, .style3 .plan-icon, .roll-team.type-b .team-social li a,#mainnav ul li a:hover, .sydney_contact_info_widget span, .roll-team .team-content .name,.roll-team .team-item .team-pop .team-social li:hover a,.roll-infomation li.address:before,.roll-infomation li.phone:before,.roll-infomation li.email:before,.roll-button.border,.roll-button:hover,.roll-icon-list .icon i,.roll-icon-list .content h3 a:hover,.roll-icon-box.white .content h3 a,.roll-icon-box .icon i,.roll-icon-box .content h3 a:hover,.switcher-container .switcher-icon a:focus,.go-top:hover,.hentry .meta-post a:hover,#mainnav > ul > li > a.active, #mainnav > ul > li > a:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .text-color, .social-menu-widget a, .social-menu-widget a:hover, .archive .team-social li a, a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .classic-alt .meta-post a, .single .meta-post a, .header-contact .fa,.social-navigation li a:hover,.widget_sydney_testimonials .fa-quote-left,.timeline-section.style2 .timeline-date { color:#f40e0e}
    .roll-team.type-b.style2 .avatar::after,.project-filter li a.active, .project-filter li a:hover,.woocommerce div.product .woocommerce-tabs ul.tabs li.active,.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.project-filter li.active, .project-filter li:hover,.roll-team.type-b .team-item .team-social li:hover a,.preloader .pre-bounce1, .preloader .pre-bounce2,.roll-team .team-item .team-pop,.roll-progress .progress-animate,.roll-socials li a:hover,.roll-project .project-item .project-pop,.roll-project .project-filter li.active,.roll-project .project-filter li:hover,.roll-button.light:hover,.roll-button.border:hover,.roll-button,.roll-icon-box.white .icon,.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span,.go-top,.bottom .socials li:hover a,.sidebar .widget:before,.blog-pagination ul li.active,.blog-pagination ul li:hover a,.content-area .hentry:after,.text-slider .maintitle:after,.error-wrap #search-submit:hover,#mainnav .sub-menu li:hover > a,#mainnav ul li ul:after, button, input[type="button"], input[type="reset"], input[type="submit"], .panel-grid-cell .widget-title:after, .social-section.style2 .social-menu-widget li a:hover, .cart-amount, .sydney-video.vid-lightbox .toggle-popup,.footer-contact .widget-title:after,.fp-contact .fa,.reply, .pricing-section.style4 .plan-item.featured-plan .plan-header, .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background-color:#f40e0e}
    .owl-theme .owl-controls .owl-page:hover span,.owl-theme .owl-controls .owl-page.active span,.roll-team.type-b .team-social li a,.roll-socials li a:hover,.roll-socials li a,.roll-button.light:hover,.roll-button.border,.roll-button,.roll-icon-list .icon,.roll-icon-box .icon,.comment .comment-detail,.widget-tags .tag-list a:hover,.blog-pagination ul li,.hentry blockquote,.error-wrap #search-submit:hover,textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus, button, input[type="button"], input[type="reset"], input[type="submit"], .archive .team-social li a,.latest-news-wrapper.carousel.style2 .meta-post a:hover { border-color:#f40e0e}
    .timeline-section.style2 .timeline .icon { background-color:rgba(244,14,14,0.25)!important;}
    .site-header.float-header { background-color:rgba(0,0,0,0.9);}
    @media only screen and (max-width: 1024px) { .site-header { background-color:#000000;}}
    .site-title a, .site-title a:hover { color:#ffffff}
    .site-description { color:#ffffff}
    #mainnav ul li a, #mainnav ul li::before { color:#ffffff}
    #mainnav .sub-menu li a { color:#ffffff}
    #mainnav .sub-menu li a { background:#1c1c1c}
    .text-slider .maintitle, .text-slider .subtitle { color:#ffffff}
    body { color:#ffffff}
    #secondary { background-color:#000000}
    #secondary, #secondary a { color:#ffffff}
    .footer-widgets { background-color:#000000}
    .site-footer { background-color:#1c1c1c}
    .site-footer,.site-footer a { color:#ffffff}
    .overlay { background-color:#000000}
    .btn-menu { color:#ffffff}
    #mainnav ul li a:hover { color:#d65050}
    .panel-grid-cell .widget-title { margin-bottom:60px; }
    @media only screen and (max-width: 1024px) { .panel-grid-cell .widget-title { margin-bottom:30px;}}
    .panel-grid-cell .widget-title { text-transform:none; }
    .header-contact { background-color:#1c1c1c}
    @media only screen and (max-width:1024px) {.has-hero .header-contact { background-color:#1c1c1c} }
    .header-contact { color:#c5c5c5}
    .roll-button { padding-top:12px;padding-bottom:12px; }
    .roll-button { padding-left:35px;padding-right:35px; }
    .roll-button { font-size:13px; }
    .roll-button { border-radius:3px; }
    .header-widgets {background-color:#ffffff;}
    .header-widgets {color:#767676;}
    .page-wrap { padding-top:83px;}
    .page-wrap { padding-bottom:100px;}
    @media only screen and (max-width: 1025px) {		
    			.mobile-slide {
    				display: block;
    			}
    			.slide-item {
    				background-image: none !important;
    			}
    			.header-slider {
    			}
    			.slide-item {
    				height: auto !important;
    			}
    			.slide-inner {
    				min-height: initial;
    			} 
    		}
    @media only screen and (max-width: 780px) { 
        	h1 { font-size: 32px;}
    		h2 { font-size: 28px;}
    		h3 { font-size: 22px;}
    		h4 { font-size: 18px;}
    		h5 { font-size: 16px;}
    		h6 { font-size: 14px;}
        }
    @media only screen and (max-width: 767px) { 
        	.text-slider .maintitle { font-size: 32px;}
        }
    @media only screen and (max-width: 479px) { 
        	.text-slider .maintitle { font-size: 18px;}
    		.text-slider .subtitle { font-size: 16px; }    	
        }

    </style>
    <link rel="stylesheet" id="sydney-font-awesome-css" href="http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/fonts/font-awesome.min.css?ver=4.9.1" type="text/css" media="all">
    <!--[if lte IE 9]>
    <link rel='stylesheet' id='sydney-ie9-css'  href='http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/css/ie9.css?ver=4.9.1' type='text/css' media='all' />
    <![endif]-->
    <link rel="stylesheet" id="sccss_style-css" href="http://localhost/ghoststories/wordpress?sccss=1&amp;ver=4.9.1" type="text/css" media="all">
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
    <script type="text/javascript" src="//maps.google.com/maps/api/js?ver=4.9.1"></script>
    <link rel="https://api.w.org/" href="http://localhost/ghoststories/wordpress/wp-json/">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/ghoststories/wordpress/xmlrpc.php?rsd">
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/ghoststories/wordpress/wp-includes/wlwmanifest.xml"> 
    <meta name="generator" content="WordPress 4.9.1">
    <link rel="canonical" href="http://localhost/ghoststories/wordpress/">
    <link rel="shortlink" href="http://localhost/ghoststories/wordpress/">
    <link rel="alternate" type="application/json+oembed" href="http://localhost/ghoststories/wordpress/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fghoststories%2Fwordpress%2F">
    <link rel="alternate" type="text/xml+oembed" href="http://localhost/ghoststories/wordpress/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fghoststories%2Fwordpress%2F&amp;format=xml">
    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #000000; }
    </style>
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
    	html { margin-top: 32px !important; }
    	* html body { margin-top: 32px !important; }
    	@media screen and ( max-width: 782px ) {
    		html { margin-top: 46px !important; }
    		* html body { margin-top: 46px !important; }
    	}
    </style>
    				<style type="text/css" media="all" id="siteorigin-panels-layouts-head">/* Layout 2 */ #pgc-2-0-0 , #pgc-2-1-0 { width:100%;width:calc(100% - ( 0 * 30px ) ) } #pg-2-0 , #pl-2 .so-panel , #pl-2 .so-panel:last-child { margin-bottom:0px } #pg-2-0.panel-no-style, #pg-2-0.panel-has-style > .panel-row-style , #pg-2-1.panel-no-style, #pg-2-1.panel-has-style > .panel-row-style { -webkit-align-items:flex-start;align-items:flex-start } #panel-2-0-0-0> .panel-widget-style { padding:0px 0px 0px 115px } #pg-2-1> .panel-row-style { background-size: cover !important } #panel-2-1-0-0> .panel-widget-style { padding:120px 0px 0px 0px } @media (max-width:780px){ #pg-2-0.panel-no-style, #pg-2-0.panel-has-style > .panel-row-style , #pg-2-1.panel-no-style, #pg-2-1.panel-has-style > .panel-row-style { -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column } #pg-2-0 .panel-grid-cell , #pg-2-1 .panel-grid-cell { margin-right:0 } #pg-2-0 .panel-grid-cell , #pg-2-1 .panel-grid-cell { width:100% } #pl-2 .panel-grid-cell { padding:0 } #pl-2 .panel-grid .panel-grid-cell-empty { display:none } #pl-2 .panel-grid .panel-grid-cell-mobile-last { margin-bottom:0px }  } </style><link rel="icon" href="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/09/cropped-Real-Scary-True-Ghost-Stories-1-32x32.png" sizes="32x32">
    <link rel="icon" href="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/09/cropped-Real-Scary-True-Ghost-Stories-1-192x192.png" sizes="192x192">
    <link rel="apple-touch-icon-precomposed" href="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/09/cropped-Real-Scary-True-Ghost-Stories-1-180x180.png">
    <meta name="msapplication-TileImage" content="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/09/cropped-Real-Scary-True-Ghost-Stories-1-270x270.png">
    		<style type="text/css" id="wp-custom-css">
    			h1 {
        color: red;
        text-shadow: 2px 2px 4px #000000;
        
    }


    .text-slider .maintitle{
      color: red;
        text-shadow: 4px 4px 1px black, 0 0 25px red, 0 0 5px darkblue !important;
    }



    .slide-inner{
      margin-top: 100px;
    }



    .roll-button.button-slider{
      /* Button color, border color, text color */
    font-size: 20px;
      color: white;
      background-color: black;
      border: 1px solid white;

    }



    .slide-inner .button-slider:hover {
      /* Button color on hover state */
      color: #red;
      background-color: #ff0000;
      border-color: #ff0000;   
    } 



    .site-title, .site-title a {
    	/* Change site title's font type, color and its margin */
        font-family: "Nosifer";
        font-size: 3.4rem;
        color: brown;
        margin-left: 0px;
    }



    .content-wrapper {
        background-color: transparent !important;
    }



    .site-header .col-md-4 {
        width: 20%;
        margin:0 auto;
    }



    .site-header .col-md-8 {
        width: 100%;
     margin: 0 auto;
    }


    .home .entry-title {
    /*Hides your damned home title cuz its causing probs*/
    display: none !important; 
    }


    #mainnav ul li a{
      font-weight: bold;
      font-size: 93.7%;
    }



    .site-header .col-md-8.col-sm-4.col-xs-12:nth-of-type(2) {
        margin-top: -60px;
        }

    .site-header .float-header {
       background-color: transparent;
    }



    .site-title, .site-title a {
        left: -10px;
        position: relative;
    }



    @media only screen and (min-width: 1024px) {
    /* This controls the height of any row you make; just give it a row css */
      .RowHeight {
          height: 150vh;
      }
    } 

    @media only screen and (min-width: 1024px) {
    /* This controls the height of any row you make; just give it a row css */
      .LandingPage1 {
          height: 150vh;
      }
    } 



    @media only screen and (min-width:992px) and (max-width:1024px){
      
      body:not(.home) .page-wrap{
        margin-top: 165px !important;
      }
    }


    @media only screen and (min-width:100px) and (max-width:1024px){
    /*This fixes the problem on the mobile devices where the 'enter the world of the undead' button was not showing properly*/
    .home .slide-inner {
        top: 6%;
    }
    } 

    @media only screen and (min-width:300px) and (max-width:500px){
    .site-title, .site-title a {
        margin-left: 100%;
        margin-top: -1px 
    }
    }



    @media only screen and (min-width:100px) and (max-width:500px){

    .site-header {
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      float: none;
    }
    }

    .btn-menu {
    color: white;
    margin-top: 18%;
    margin-left: auto;

    }



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

    .site-header {
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
      float: none;
    }


    .btn-menu {
    color: white;
    margin-top: 8%;
    margin-left: auto;

    }
    }

    @media only screen and (min-width:501px) and (max-width:1024px){
    .site-title, .site-title a {
        margin-left: auto;
        margin-top: -1px; 
    }

    .slide-inner{
    /*move down the position of the slider text*/
      margin-top: 10%;
      padding-bottom: 0;
      padding-top: 25%;
      padding-left: 8%;
    }

    .slide-inner{
    margin-left: 0px; 
    background-size: cover; 

    }
    }



    .single .entry-header, .page .entry-header {
    /*sets the space between the header slider and other content to an acceptable width*/
      margin-bottom: auto;
      margin-top: -100px; 
    }

    @media only screen and (min-width:992px) and (max-width:1024px){
    /*This ensures that the background image of grim reaper on first page shows on mobile*/
    .HomeGrimmy{
        position: relative;
        float: left;
        width:  799px !important;
        height: 531px !important;
        background-position: 50% 50%;
        background-repeat:   no-repeat;
        background-size:     contain;
    }
    }

.page-id-44 .entry-header {
/* Hides the automatic title for my ‘About Us’ page so that I can use my About us image instead*/
display: none;
}

    .page-id-44 .content-wrapper {
    /*This puts my picture AboutUs right up under the site image*/
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin-top: -190px;
        
    }

    .page-id-436 .site-header{
        background-color: transparent !important;
    }


    .page-id-488 .site-header {
        background-color: transparent !important;
    }

    .page-id-488 .site-logo {
    display: none !important;
    }

    .page-id-488 .hentry .title-post {
    padding-bottom: 0px;
    padding-top: 0px; 
    }

    .page-id-488 .page-wrap { 
    /*On your landing page, the row where your site icon would be, there was always a black space that won't go away. This command removes that black space*/
    padding-top:-10px;
    padding-bottom:0px;
    background-color: transparent !important;
    }

    .page-id-488 {
    	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50% 50% !important;
    }


     /* Home */
    .home header#masthead {
        background-color: transparent;
    }


    /*Baby girl, this, along with the html code on your contact us page, gives you a video background*/
    video#bgvid { 
        position: fixed;
        top: 56.8%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-40%);
        background: no-repeat;
        background-size: cover; 
    }






    .site-info.container {
    /*This removes the PROUDLY POWERED BY WORDPRESS | THEME: SYDNEY BY ATHEMES found on most of the pages*/
        display: none;
    }

    .preloader {
        display: none !important;
    }

    .Vamp {
    background-size: cover !important;
        position: absolute;
        overflow: hidden;
        height: 100%;
    }
    	
    	.Vamp .panel-grid-cell .widget-title{
    		/*This moved the position of the 'Sign up here' text on the vamp pic on the home page*/
    		position: absolute;
    		  left: 35%;
    		  right: 35%;
    		  top: 3%;
    }


    .HomeGrimmy {
    background-size: 100%   !important;
    background-position: 0px 80px !important;
    	margin-top: -15px !important;
    	background-attachment: fixed;
    }

    .wp-image-768 { 
    	position: absolute;
        left: -6%;
        top: -10vh;
    	max-width: 30%;
        height: auto;
    }

    .2ndbat {
    	position: absolute;
    	left: -12;
    	top: -20vh;
    	max-width: 30%;
    	height: auto;
    }

    div.panel-row-style {
    	/*This reduces the space between the rows on my home screen*/
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    	
    .slides-container .slide-item {
    	/*Some white space was showing up in mobile on the right side of my slide. This css corrects that*/
    	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
    }

    		</style>
    	<style id="tt-easy-google-font-styles" type="text/css">p { }
    h1 { color: #ff0000; font-family: 'Nosifer'; font-size: 10px; font-style: normal; font-weight: 400; line-height: 0.8; }
    h2 { }
    h3 { }
    h4 { }
    h5 { }
    h6 { }
    </style><style id="fit-vids-style">.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style><style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
    .en-markup-crop-options {
        top: 18px !important;
        left: 50% !important;
        margin-left: -100px !important;
        width: 200px !important;
        border: 2px rgba(255,255,255,.38) solid !important;
        border-radius: 4px !important;
    }

    .en-markup-crop-options div div:first-of-type {
        margin-left: 0px !important;
    }
    </style><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/31/3/common.js"></script><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/31/3/util.js"></script><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps-api-v3/api/js/31/3/stats.js"></script></head>

    <body class="home page-template-default page page-id-2 logged-in admin-bar custom-background siteorigin-panels  siteorigin-panels-home has-hero customize-support" style="margin: 0px;">

    	<div class="preloader" style="opacity: 0; display: none;">
    	    <div class="spinner">
    	        <div class="pre-bounce1"></div>
    	        <div class="pre-bounce2"></div>
    	    </div>
    	</div>
    	
    <div id="page" class="hfeed site">
    	<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    	
    		

    	<header id="masthead" class="site-header" role="banner">
    		<div class="header-wrap">
                <div class="container">
                    <div class="row">
    				<div class="col-md-4 col-sm-8 col-xs-12">
    		        					<a href="http://localhost/ghoststories/wordpress/" title="Ghost Stories R Us"><img class="site-logo" src="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/ghosticonmaybe-1.gif" alt="Ghost Stories R Us"></a>
    		        				</div>
    				<div class="col-md-8 col-sm-4 col-xs-12">
    					<div class="btn-menu"></div>
    					<nav id="mainnav" class="mainnav" role="navigation">
    						<div class="menu-home-container"><ul id="menu-home" class="menu"><li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-75"><a href="http://localhost/ghoststories/wordpress">Home</a></li>
    <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"><a href="http://localhost/ghoststories/wordpress/ghost-stories/">Ghost Stories</a></li>
    <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost/ghoststories/wordpress/ghost-pictures/">Ghost Pictures</a></li>
    <li id="menu-item-465" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-465"><a href="http://localhost/ghoststories/wordpress/436-2/">Hauntings</a></li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://localhost/ghoststories/wordpress/are-ghosts-real/">Are Ghosts Real?</a></li>
    <li id="menu-item-605" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-605"><a href="http://localhost/ghoststories/wordpress/hungry-for-more/">Hungry for more?</a></li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://localhost/ghoststories/wordpress/about-us/">About Us</a></li>
    <li id="menu-item-591" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-591"><a href="http://localhost/ghoststories/wordpress/contact-us/">Contact Us</a></li>
    </ul></div>					</nav><!-- #site-navigation -->
    				</div>
    				</div>
    			</div>
    		</div>
    	</header><!-- #masthead -->

    	
    	<div class="sydney-hero-area" style="height: auto;">
    		
        <div id="slideshow" class="header-slider" data-speed="9000" data-mobileslider="responsive" style="position: relative; overflow: hidden; width: 100%; height: 700px;">
            <div class="slides-control" style="position: relative; height: 100%; width: 1108px; left: -1108px;"><div class="slides-container" style="margin: 0px; padding: 0px; list-style: none; position: relative; height: 100%;">
                                                <div class="slide-item slide-item-1" style="background-image: url(&quot;http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/realgghoststories-1.png&quot;); display: none; left: 1108px; position: absolute; overflow: hidden; height: 100%; width: 1108px; top: 0px; z-index: 0; opacity: 1;">
                            <img class="mobile-slide preserve" src="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/realgghoststories-1.png">
                            <div class="slide-inner">
                                <div class="contain animated fadeInRightBig text-slider">
                                <h2 class="maintitle">Are you looking for real ghost stories and tales of the undead?</h2>
                                <p class="subtitle"></p>
                                </div>
                                <a href="#primary" class="roll-button button-slider">Enter the world of the undead</a>                        </div>
                        </div>
                                            <div class="slide-item slide-item-2" style="background-image: url(&quot;http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/Scary-Ghost-Stories-1.jpg&quot;); display: block; left: 1108px; position: absolute; overflow: hidden; height: 100%; width: 1108px; top: 0px; z-index: 2; opacity: 1;">
                            <img class="mobile-slide preserve" src="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/Scary-Ghost-Stories-1.jpg">
                            <div class="slide-inner">
                                <div class="contain animated fadeInRightBig text-slider">
                                <h2 class="maintitle">Think you can handle tales of ghosts and ghouls who roam the Earth looking for victims like you?</h2>
                                <p class="subtitle"></p>
                                </div>
                                <a href="#primary" class="roll-button button-slider">Enter the world of the undead</a>                        </div>
                        </div>
                                            <div class="slide-item slide-item-3" style="background-image: url(&quot;http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/trueghoststories-1.png&quot;); display: none; left: 1108px; position: absolute; overflow: hidden; height: 100%; width: 1108px; top: 0px; z-index: 0; opacity: 1;">
                            <img class="mobile-slide preserve" src="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/trueghoststories-1.png">
                            <div class="slide-inner">
                                <div class="contain animated fadeInRightBig text-slider">
                                <h2 class="maintitle">If you answered the previous questions with a yes, then say no more!</h2>
                                <p class="subtitle">Just...</p>
                                </div>
                                <a href="#primary" class="roll-button button-slider">Enter the world of the undead</a>                        </div>
                        </div>
                         
            </div></div>
                          
        </div>

        		<div class="header-image">
    			<div class="overlay"></div>			<img class="header-inner" src="" width="1920" alt="Ghost Stories R Us" title="Ghost Stories R Us">
    		</div>
    		
    			</div>

    	
    	    

    	<div id="content" class="page-wrap">
    		<div class="content-wrapper container">
    			<div class="row">	
    	<div id="primary" class="content-area col-md-9">
    		<main id="main" class="post-wrap" role="main">

    			
    				
    <article id="post-2" class="post-2 page type-page status-publish hentry">
    	<header class="entry-header">
    		<h1 class="title-post entry-title">ghost stories, horror stories, scary stories, ghost pictures, hauntings and much more!</h1>	</header><!-- .entry-header -->

    	<div class="entry-content">
    		<div id="pl-2" class="panel-layout"><div id="pg-2-0" class="panel-grid panel-has-style"><div class="HomeGrimmy siteorigin-panels-stretch panel-row-style panel-row-style-for-2-0" style="padding: 100px 0px; background-image: url(&quot;http://localhost/ghoststories/wordpress/wp-content/uploads/2017/09/real-ghost-stories-Copy.png&quot;); background-size: 2486.87px 1652.73px; background-position: 50% 0px; margin-left: -99px; margin-right: -354px; border-left: 0px; border-right: 0px;" data-stretch-type="full-stretched" data-hasbg="hasbg" data-siteorigin-parallax="{&quot;backgroundUrl&quot;:&quot;http:\/\/localhost\/ghoststories\/wordpress\/wp-content\/uploads\/2017\/09\/real-ghost-stories-Copy.png&quot;,&quot;backgroundSize&quot;:[799,531],&quot;backgroundSizing&quot;:&quot;scaled&quot;,&quot;limitMotion&quot;:&quot;auto&quot;}" data-overlay-color="#000000"><div id="pgc-2-0-0" class="panel-grid-cell" style="padding-left: 0px; padding-right: 0px;"><div id="panel-2-0-0-0" class="so-panel widget widget_text panel-first-child" data-index="0"><div style="text-align: left;" data-title-color="#443f3f" data-headings-color="#443f3f" data-title_alignment="center" class="panel-widget-style panel-widget-style-for-2-0-0-0"><h3 class="widget-title" style="color: rgb(68, 63, 63);">Ghost Stories Just for you!</h3>			<div class="textwidget"><p><strong>Now….</strong></p>
    <p><strong>we could have just chosen to throw you into our archives, let you get lost in the hundreds of ghostly tales and then sneak up on you and haunt you for all eternity-</strong></p>
    <p><strong>But we’re not gonna do that…at least not yet!</strong></p>
    <p><strong>So relax!</strong></p>
    <p><strong>Click on one of our most popular categories of ghost stories below, view our recommendations look at real ghost pictures taken from around the world or find popular hauntings near you!</strong></p>
    <p>blah blah blah blacksheep testing out this shit because I have to get ready to go to fucking school that I hate but I don’t wanna lose because I don’t have a better alternative yet. I love my site, though. despite all the hiccups, I do believe that it is coming along beautifully and &nbsp;I really can’t wait to see the finished site and more importantly, I can’t wait until I make enough money to be able to hire a real programmer to fix up everything so that it renders beautifully on all mobiles.</p>
    <p>blah- if he ask about it, imma be like:</p>
    <p>&nbsp;</p>
    </div>
    		</div></div><div id="panel-2-0-0-1" class="so-panel widget widget_text panel-last-child" data-index="1"><div style="text-align: left;" data-title-color="#443f3f" data-headings-color="#443f3f" data-title_alignment="center" class="panel-widget-style panel-widget-style-for-2-0-0-1"><h3 class="widget-title" style="color: rgb(68, 63, 63);">Alternately, you can choose to learn more about the different species of the undead</h3>			<div class="textwidget"></div>
    		</div></div></div></div></div><div id="pg-2-1" class="panel-grid panel-has-style"><div class="Vamp siteorigin-panels-stretch panel-row-style panel-row-style-for-2-1" style="padding: 100px 354px 100px 99px; background-image: url(&quot;http://localhost/ghoststories/wordpress/wp-content/uploads/2017/09/Vampires-Suck-2010.gif&quot;); background-size: 2112.73px 2112.73px; background-position: 50% 0px; margin-left: -99px; margin-right: -354px; border-left: 0px; border-right: 0px;" data-stretch-type="full" data-hasbg="hasbg" data-siteorigin-parallax="{&quot;backgroundUrl&quot;:&quot;http:\/\/localhost\/ghoststories\/wordpress\/wp-content\/uploads\/2017\/09\/Vampires-Suck-2010.gif&quot;,&quot;backgroundSize&quot;:[1024,1024],&quot;backgroundSizing&quot;:&quot;scaled&quot;,&quot;limitMotion&quot;:&quot;auto&quot;}" data-overlay-color="#000000"><div id="pgc-2-1-0" class="panel-grid-cell"><div id="panel-2-1-0-0" class="so-panel widget widget_text panel-first-child panel-last-child" data-index="2"><div class="TitleD panel-widget-style panel-widget-style-for-2-1-0-0" style="text-align: left;" data-title-color="#443f3f" data-headings-color="#443f3f" data-title_alignment="center"><h3 class="widget-title" style="color: rgb(68, 63, 63);">Sign up here</h3>			<div class="textwidget"><p><img class="alignnone wp-image-768" src="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/1-bat.png" alt="" width="418" height="277"><img class="alignnone size-full wp-image-768" src="http://localhost/ghoststories/wordpress/wp-content/uploads/2017/12/1-bat.png" alt="" width="800" height="531"></p>
    <p>If you’ve made it this far, then</p>
    <p>(1) you’re either so excited that you don’t know where to begin,</p>
    <p>or</p>
    <p>(2) you’re deathly afraid that one of our ghosts are going to haunt you for all eternity!</p>
    <p>Option 2 sounds veeeery exciting, but if you sign up now, we’ll grant you immunity to our powers so that you won’t ever have to be afraid again:</p>
    <p>[sign up form]</p>
    <p>[put a button that says ‘Grant me immunity’ and have that emoji falling effect when you click on it]</p>
    <p>&nbsp;</p>
    <p>blah blah blah blacksheep testing out this shit because I have to get ready to go to fucking school that I hate but I don’t wanna lose because I don’t have a better alternative yet. I love my site, though. despite all the hiccups, I do believe that it is coming along beautifully and &nbsp;I really can’t wait to see the finished site and more importantly, I can’t wait until I make enough money to be able to hire a real programmer to fix up everything so that it renders beautifully on all mobiles.</p>
    <p>blah- if he ask about it, imma be like:</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>blah blah blah blah</p>
    </div>
    		</div></div></div></div></div></div>			</div><!-- .entry-content -->

    	<footer class="entry-footer">
    		<span class="edit-link"><a class="post-edit-link" href="http://localhost/ghoststories/wordpress/wp-admin/post.php?post=2&amp;action=edit">Edit</a></span>	</footer><!-- .entry-footer -->
    </article><!-- #post-## -->

    				
    			
    		</main><!-- #main -->
    	</div><!-- #primary -->

    			</div>
    		</div>
    	</div><!-- #content -->

    	
    	
    	
        <a class="go-top"><i class="fa fa-angle-up"></i></a>

        	<footer id="colophon" class="site-footer" role="contentinfo">
    		<div class="site-info container">
    							<a href="http://wordpress.org/">Proudly powered by WordPress</a>
    				<span class="sep"> | </span>
    				Theme: <a href="https://athemes.com/theme/sydney-pro" rel="designer">Sydney Pro</a> by aThemes.					</div><!-- .site-info -->
    	</footer><!-- #colophon -->
    	
    		
    </div><!-- #page -->

    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-includes/js/admin-bar.min.js?ver=4.9.1"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/plugins/animate-it/assets/js/animo.min.js?ver=1.0.3"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/plugins/animate-it/assets/js/jquery.ba-throttle-debounce.min.js?ver=1.1"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/plugins/animate-it/assets/js/viewportchecker.js?ver=1.4.4"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/plugins/animate-it/assets/js/edsanimate.js?ver=1.4.4"></script>
    <script type="text/javascript">
    /* <![CDATA[ */
    var edsanimate_options = {"offset":"75","hide_hz_scrollbar":"1","hide_vl_scrollbar":"0"};
    /* ]]> */
    </script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/plugins/animate-it/assets/js/edsanimate.site.js?ver=1.4.5"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/js/scripts.js?ver=4.9.1"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/js/main.js?ver=20170930"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/themes/sydney-pro-ii/js/skip-link-focus-fix.js?ver=20130115"></script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-includes/js/wp-embed.min.js?ver=4.9.1"></script>
    <script type="text/javascript">
    /* <![CDATA[ */
    var panelsStyles = {"fullContainer":"body"};
    /* ]]> */
    </script>
    <script type="text/javascript" src="http://localhost/ghoststories/wordpress/wp-content/plugins/siteorigin-panels/js/styling-260.min.js?ver=2.6.0"></script>
    <script type="text/javascript">document.body.className = document.body.className.replace("siteorigin-panels-before-js","");</script>	<!--[if lte IE 8]>
    		<script type="text/javascript">
    			document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
    		</script>
    	<![endif]-->
    	<!--[if gte IE 9]><!-->
    		<script type="text/javascript">
    			(function() {
    				var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

    						request = true;
    		
    				b[c] = b[c].replace( rcs, ' ' );
    				// The customizer requires postMessage and CORS (if the site is cross domain)
    				b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    			}());
    		</script>
    	<!--<![endif]-->
    			<div id="wpadminbar" class="">
    							<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
    						<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
    				<ul id="wp-admin-bar-root-default" class="ab-top-menu">
    		<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/ghoststories/wordpress/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
    		<li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/about.php">About WordPress</a>		</li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
    		<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a>		</li>
    		<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a>		</li>
    		<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a>		</li>
    		<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a>		</li></ul></div>		</li>
    		<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/ghoststories/wordpress/wp-admin/">Ghost Stories R Us</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
    		<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/">Dashboard</a>		</li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
    		<li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/themes.php">Themes</a>		</li>
    		<li id="wp-admin-bar-widgets"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/widgets.php">Widgets</a>		</li>
    		<li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/nav-menus.php">Menus</a>		</li>
    		<li id="wp-admin-bar-background" class="hide-if-customize"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/themes.php?page=custom-background">Background</a>		</li>
    		<li id="wp-admin-bar-header" class="hide-if-customize"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/themes.php?page=custom-header">Header</a>		</li></ul></div>		</li>
    		<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%2Fghoststories%2Fwordpress%2F">Customize</a>		</li>
    		<li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 comments awaiting moderation</span></a>		</li>
    		<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
    		<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php">Post</a>		</li>
    		<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/media-new.php">Media</a>		</li>
    		<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=page">Page</a>		</li>
    		<li id="wp-admin-bar-new-services"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=services">Services</a>		</li>
    		<li id="wp-admin-bar-new-employees"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=employees">Employees</a>		</li>
    		<li id="wp-admin-bar-new-testimonials"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=testimonials">Testimonials</a>		</li>
    		<li id="wp-admin-bar-new-clients"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=clients">Clients</a>		</li>
    		<li id="wp-admin-bar-new-projects"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=projects">Projects</a>		</li>
    		<li id="wp-admin-bar-new-timeline-events"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=timeline-events">Timeline Events</a>		</li>
    		<li id="wp-admin-bar-new-pricing_tables"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post-new.php?post_type=pricing_tables">Pricing Table</a>		</li>
    		<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/user-new.php">User</a>		</li></ul></div>		</li>
    		<li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post.php?post=2&amp;action=edit">Edit Page</a>		</li>
    		<li id="wp-admin-bar-so_live_editor" class="live-edit-page"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/post.php?post=2&amp;action=edit&amp;so_live_editor=1">Live Editor</a>		</li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
    		<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost/ghoststories/wordpress/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150"><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"></form></div>		</li>
    		<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost/ghoststories/wordpress/wp-admin/profile.php">Howdy, <span class="display-name">Em Jai</span><img alt="" src="http://1.gravatar.com/avatar/7d0c5254d70fd0a411f1bd1c0c82517d?s=26&amp;d=mm&amp;r=g" srcset="http://1.gravatar.com/avatar/7d0c5254d70fd0a411f1bd1c0c82517d?s=52&amp;d=mm&amp;r=g 2x" class="avatar avatar-26 photo" height="26" width="26"></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
    		<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost/ghoststories/wordpress/wp-admin/profile.php"><img alt="" src="http://1.gravatar.com/avatar/7d0c5254d70fd0a411f1bd1c0c82517d?s=64&amp;d=mm&amp;r=g" srcset="http://1.gravatar.com/avatar/7d0c5254d70fd0a411f1bd1c0c82517d?s=128&amp;d=mm&amp;r=g 2x" class="avatar avatar-64 photo" height="64" width="64"><span class="display-name">Em Jai</span></a>		</li>
    		<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-admin/profile.php">Edit My Profile</a>		</li>
    		<li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost/ghoststories/wordpress/wp-login.php?action=logout&amp;_wpnonce=b0fc97cb96">Log Out</a>		</li></ul></div>		</li></ul>			</div>
    						<a class="screen-reader-shortcut" href="http://localhost/ghoststories/wordpress/wp-login.php?action=logout&amp;_wpnonce=b0fc97cb96">Log Out</a>
    					</div>

    		


    </body></html>

The CSS for the button in question is .roll-button.button-slider

Hello,

Can you please provide a link to your website if it’s available?

Kind Regards, Roman.

Hey Roman.

its not up on the net as yet.
Its on localhost

Hello, I don’t think that I can provide much help here without a link, unfortunately.

Kind Regards, Roman.