/* 
Theme Name: JSPTheme
Theme URI: 
Author: Michael Rosser
Version: 2.0 
Tags: Simple, effective 
*/ 
 /* Global Styles - Start */

      * {
  box-sizing: border-box;
}
    
  	body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
        background: white;
		font-size: 15px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
    
img {
    max-width: 100%;
    height: auto;
}

  

    /*GridCols*/
	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}
	
	.col {
		padding:1em;
		margin: 8px;
	}
    
    .colfooter {
        padding:1em;
		margin: 8px;
        text-align: center;
        
    }

.colfooter p {
    margin: 0;
    padding: 0;
    color: white;
}

.colfooter a:link, .colfooter a:visited {
    color: yellow;
    text-decoration: none;
}
	[class*='col-'] {
		width:100%;
		float: left;
		min-height: 1px;
	}
	
	.col-mob-1 {width:8.33333%;}
	.col-mob-2 {width:16.66667%;}
	.col-mob-3 {width:25%;}
	.col-mob-4 {width:33.33333%;}
	.col-mob-5 {width:41.66667%;}
	.col-mob-6 {width:50%;}
	.col-mob-7 {width:58.33333%;}
	.col-mob-8 {width:66.66667%;}
	.col-mob-9 {width:75%;}
	.col-mob-10 {width:83.33333%;}
	.col-mob-11 {width:91.66667%;}
	.col-mob-12 {width:100%;}
    
.slideshow {
    height: 300px;
    background-position: center;
    background-size: cover;
    padding: 10px;
}

/*Slideshow*/

.container {
  width: 100%;
  height: 500px;
    overflow: hidden;
  position: relative;
	background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container .slide {
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  transition: opacity 1s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}
.container .slide.show {
  opacity: 1;
}



post img {
    width: 100%;
    height: auto;
}

article {
  background-size: cover;
    background-position: center;
    height: 300px;
}

article a {
    width: 100%;
    height: 100%;
    display: block;
}

.horiz-cell {
    margin:0;
    padding: 0;
    
}

.horiz-cell h2 {
    text-align: center;
    color: white;
}

.show {
    opacity: 1;
        }

    .navbar {
    display: none;
}
    .top_bar{
        width: 100%;
        height: 50px;
        background-color: #941e6a;
     
    }

.top_container {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    
}
    
    .wrapper {
        width: 100%;
        max-width: 1900px;
        height: auto;
        
        margin: 0 auto;
       
    }
    
    .row2 {
        height: auto;
        overflow: hidden;
        background-image: url("https://j-s-p.co.uk/wl/wp-content/uploads/2020/04/BGLogo.png");
        background-position: left center;
        background-repeat: no-repeat;
        max-width: 1900px;
        margin: 0 auto;
        padding: 10px;
        
    }
    
    .left {
        width: 100%;
        height: auto;
        margin: 0 auto;
        float:left;
        text-align: center;
      
    }
    
    .left img {
        vertical-align: middle;
    }
    .right {
    width: 100%;
         height: auto;
        margin: 0 auto;
        position: relative;
          float: left;
    
    }
    
    .strapline {
      background-color: rgba(167,28,102,0.78);
        padding: 10px;
        width: 95%;
        position: absolute;
        bottom: 10px;
        right: 0;
        left: 0;
        margin: 0 auto;
        z-index: 2;
    }

.strapline h1 {
    color:white;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
}
    
     .row_container {
        width: 100%;
        height: auto;
        clear: both;
        margin: 0 auto;
         max-width: 1200px;
    }
    
    .row3 {
        height: auto;
        overflow: hidden;
        clear: both;
        margin: 0 auto;
    }
    

 .post_container {
                 width: 100%;
                 height: auto;
                 margin: 0 auto;
     overflow: hidden;
     border-bottom: thin rgba(115,115,115,1.00) solid;
             }
             
             .blog_image {
                 height: 300px;
                 background-position: center;
                 background-size: cover;
             }
             
             .blog_text h3 {
                 color: rgba(167,28,102,0.78);
                 font-size: 25px;
             }
             
             .blog_text p {
                 color: rgba(167,28,102,1.00);
                 font-size: 17px;
             }
.blog_text a:link, .blog_text a:visited {
    color: grey;
}

.blog_text a:hover{
    color: rgba(167,28,102,1.00);
}
       
             
             .author {
                 font-size: 13px;
             }
             
            
             
             
            .menu-bottom-nav-container li { 
                display: block;
                
                
                
                
             }
                       .menu-bottom-nav-container a {
    width: 100%;
    padding: 5px;
    color: #f8f0ee;
    text-decoration: none;
    display: block;
    text-align: right;
    
}

.menu-bottom-nav-container a:hover {
    color: grey;
    text-decoration: none;
    display: block;
}
    .content {
        text-align: center;
        height: auto;
        overflow: hidden;
    }
    
    .content h3 {
        color: grey;
    }
    
    .content p {
    color: rgba(167,28,102,1.00);
        font-size: 17px;
    }
    
    .row4 {
        height: auto;
        overflow: hidden;
           clear: both;
        margin: 0 auto;
        background-image: url('https://j-s-p.co.uk/wl/wp-content/uploads/2020/05/JSPBG.png');
        background-repeat: repeat-x;
        background-position: center;
        background-size: contain;
      background-color: #696969;
        padding: 10px;
    }
    
.home_image {
       height: 300px;
    background-position: center;
    background-size: cover;
}

.box_image {
    height: auto;
    padding-bottom: 20px;
    -webkit-box-shadow: 0 0 8px 1px #595959;
box-shadow: 0 0 8px 1px #595959;
    position: relative;
    background-color: rgba(167,28,102,1.00);
}

.box_title {
  overflow: auto;
    padding: 10px;
    background-color:rgba(131,131,131,1.00);
    color: white;
    left:0;
    right: 0;
    margin-bottom: 10px;
}

.box_title h2 {
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
}

.box_quotes {
    height: auto;
    overflow: hidden;
    padding: 10px;
    margin: 0 auto;
    text-align: center;
   
}

.moreinfo:link, .moreinfo:visited {
    text-align: center;
    color: white;
    font-size: 20px;
    padding: 20px;
    margin: 20px;
    border: thin rgba(255,255,255,1.00) solid;
    text-decoration: none;
}

.moreinfo:hover {
    background-color: white;
    color: rgba(167,28,102,1.00);
}


.box_quotes p {
    color: white;
    font-size: 15px;
}
      .row5 {
        height: auto;
           clear: both;
        margin: 0 auto;
		  overflow: hidden;
       background-color: #a71c66;
    }
    
       .row6 {
        height: 50px;
           padding: 10px;
           clear: both;
        margin: 0 auto;
       background-color: #696969;
    }

.row6 p {
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
    color: white;
}
    
    
    .address {
        height: auto;
        color: white;
        text-align: center;

    }
    
    
      .quick_links {
       height: auto;
        color: white;
       text-align: center;


    }
    
    
.social {
    width: auto;
    height: 50px;
    margin: 5px;
} 

.sidebar-box img {
	display: none;
}

.sidebar-title {
	color: #a71c66;
	font-size: 1.5rem;
	text-align: center;
}

.row_shop {
	height: auto;
	overflow: hidden;
	background-image: url('https://j-s-p.co.uk/wl/wp-content/uploads/2020/11/shownow.jpg');
background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 10px;
	text-align: center;
}
.shop_content {
	margin-top: 100px;
	margin-bottom: 100px;
	height: auto;
	
}
.row_shop h2 {
	color: white;
	font-size: 2.5rem;
}

.row_shop p {
	color: white;
	font-size: 1.5rem;
}
.shopnow:link, .shopnow:visited {
    text-align: center;
    color: white;
    font-size: 20px;
    padding: 20px;
    margin: 0 auto;
    border: thin rgba(255,255,255,1.00) solid;
    text-decoration: none;
	display: block;
	width: 50%;
}

.shopnow:hover {
    background-color: white;
    color: rgba(167,28,102,1.00);
}


    
         @media only screen and (min-width: 768px) {
        		.col-dt-1 {width:8.33333%;}
	.col-dt-2 {width:16.66667%;}
	.col-dt-3 {width:25%;}
	.col-dt-4 {width:33.33333%;}
	.col-dt-5 {width:41.66667%;}
	.col-dt-6 {width:50%;}
	.col-dt-7 {width:58.33333%;}
	.col-dt-8 {width:66.66667%;}
	.col-dt-9 {width:75%;}
	.col-dt-10 {width:83.33333%;}
	.col-dt-11 {width:91.66667%;}
	.col-d-12 {width:100%;}
    
             
                 .top_bar{
        width: 100%;
        height: 50px;
        background-color: #941e6a;
        position: fixed;
        top: 0;
        z-index: 3;
     
    }
    
    .wrapper {
        width: 100%;
        max-width: 1900px;
        height: auto;
        
        margin: 0 auto;
        margin-top: 50px;
    }
    
    .row2 {
        height: auto;
       
        background-position: left center;
        background-repeat: no-repeat;
        max-width: 1900px;
        margin: 0 auto;
        padding: 10px;
        
    }
    
    .left {
        width: 300px;
        height: 500px;
        float:left;
        position: relative;
    }
             
             .logo {
                 height: auto;
                 position: absolute;
                 top:180px;
             }
             
             .details {
                 height: auto;
                 position: absolute;
                 bottom: 0;
                 width: 100%;
                 text-align: center;
             }
             
             .details p {
                 font-size: 18px;
                 margin: 0;
                 padding: 0;
                 margin-bottom: 5px;
                 color: grey;
             }
    
    .left img {
        vertical-align: middle;
    }
    .right {
    width: calc(100% - 340px);
        float: left;
        height: 500px;
        position: relative;
        padding: 10px;
    }
    
    .strapline {
        padding: 10px;
        width: 90%;
        position: absolute;
        bottom: 10px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
             
             /* Style the navigation menu */
             
             .menu {
                 padding: 0;
                 margin: 0;
             }
                .menu-top-menu-container {
                  width: 90%;
                  float: left;
              }
             
                ul{
	list-style: unset !important;
					text-align: center;
				
					margin: 0 auto;
					padding: 0;
}
             
            .top_bar ul li{
             text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
             }
			 
			 
			 .content ul li {
				 width: auto;
				 	margin-bottom: 10px;
			 }
			 
	
			 
.navbar {
    display: inherit;
  width: 100%;
}

/* Navigation links */
.navbar a {
  float: left;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  /* width: 10.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

/* Add a background color on mouse-over */
.navbar a:hover {
 color: grey;
}

/* Style the current/active link */
.navbar a.active {
 
}
              
              .menu ul {
                  margin: 0;
                  padding: 0;
              }
             
             
             .cart {
                 float: right;
                 width: 10%;
             }
    
    .row3 {
        height: auto;
        overflow: hidden;
        padding: 10px;
        margin: 0 auto;
    }
             
             .page_image {
                 width: 100%;
                 height: auto;
                 padding: 10px;
                 background-size:contain; 
                 background-repeat: no-repeat;
            

             }
    
             .page_text {
                 width: 100%;
                 height: auto;
                      padding: 10px;
                
             }
    
    
             .slideshow {
                 height: 500px;
             
             
             }
    
      .row5 {
        height: auto;
           clear: both;
        margin: 0 auto;
		  	  overflow: hidden;
       background-color: #a71c66;
    }
    
       .row6 {
        height: 50px;
           clear: both;
        margin: 0 auto;
       background-color: #696969;
    }
             
             
                .address {
       height: auto;
        color: white;
        text-align: left;

    }
    
      .image {
        height: auto;
        color: white;
 text-align: center;
    }
    
      .quick_links {
        height: auto;
        color: white;
       text-align: right;
 }
             
               .blog_image {
                 height: 500px;
                 background-position: center;
                 background-size: cover;
             }
             
            
}