html, body {
	font-family: "Arial";
	font-size: 20px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: justify;
	text-justify: inter-word;
	min-height: 100%;
	
	/*min-width: 1200px;*/
	Width: 100%;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#47b6e7+14,ffffff+53,ffffff+53,ffffff+57 */
	background: #47b6e7; /* Old browsers */
	background: -moz-linear-gradient(top,  #47b6e7 14%, #ffffff 53%, #ffffff 53%, #ffffff 57%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #47b6e7 14%,#ffffff 53%,#ffffff 53%,#ffffff 57%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #47b6e7 14%,#ffffff 53%,#ffffff 53%,#ffffff 57%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47b6e7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}
a{
	text-decoration: none;
}
/************************************
			Header
*************************************/
.header{
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: inline-block;
	position: relative;
}
.hContainer{
	margin-top: 15px;
	display: flex;
}
.Headerlogo, .headerContainer{
	display: inline-block;
	position: relative;
	vertical-align: top;
}
.Headerlogomobile, .Headerlogomobile img{
	margin-left: auto;
	margin-right: auto;
	width: 400px;
}
.headerContainermobile{
	margin-right: auto; 
	width: 500px;
	margin-top: 25px;
}
.Headerlogo, .Headerlogo img{
	margin-left: auto;
	width: 250px;
	margin-top: -7px;
}
.headerContainer{
	width: 700px;
	margin-right: auto;
}
.headertxt{
	width: 100%;
	display: flex;
	justify-content: center;
}
.headercalltxt, .headerdeliverytxt{
	padding: 0px;
	width: 330px;
}
.headerdeliverytxt{
	display: flex;
}

 .headercalltxt h2, .headerdeliverytxt h2{
	padding: 0px;
	margin: 0px;
 }

.headercalltxt{
	margin-left: 75px;
	display: inline-block;
	position: relative;
}

.headercalltxt, .headercalltxt a, .headerdeliverytxt, .headerdeliverytxt a{
	color: #f4e95d;
	text-decoration: none;
	padding-top: 5px;
}

/************************************
		Navigation
*************************************/
.topnav {
	overflow: hidden;
	margin:  15px 0 0;
	text-align: right;
	padding-right: 75px;
}

.topnav a {
	display: inline-block;
	color: white;
	text-align: right;
	padding: 0 14px 25px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.topnav a:hover {
  color: black;
}

.topnav .icon {
  display: none;
}
/************************************
		Main Content
*************************************/
.container{
	min-height: 83%;
	overflow: auto;
	padding-bottom: 15px;
}
.a4advert{
    vertical-align: middle;
    float:right;
}
.indexbuttons table{
    margin-left:0px;
    display:inline-block;
    float:left;
}
.indexbuttons table{
    margin-left:0px;
}
.indexbuttons table img{
    height:125px;
}
.indexbuttons{
    width:60%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    overflow: hidden;
}
.Centerimg, .promotionscontainer{
	text-align: center;
	margin-top: 50px;
}
.maintext,.maintext img, .GYSTable, .Mapcontainer{
	width: 725px;
}
.maintext h3{
	color: #012c6a;
}

.maintext, .promotionscontainer, .prom, .GYSTable,  .contactusstyle, .indexbuttons table{
	margin-left: auto;
	margin-right: auto;
}
.maintext{
	min-height: 250px;
}
.maintext img{
	padding-top: 15px;
	height: 75px;
}
.promotionscontainer{
	width: 65%;
}

.prom, .prom img{
	height: 410px;
	width: 300px;
}
.prom{
	padding-right: 25px;
	padding-left: 25px;
	display: inline-block;
}
.bannercontainer1{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    overflow: hidden;
}
.banner1 {
	width: 70%;
}
.banner2 {
	width:50%;
}


/************************************
		Grow Your Sales
*************************************/
.GYSTable, .GYSTable h3{
	width: 810px;
	
}
.GYSTable h3{
	background: #eee;
	padding-bottom: 15px;
	padding-top: 15px;
	margin-bottom: 2px;
}
.GYSTable, .GYSCategories{
	display: inline-block;
	position: relative;
}

.GYSCategories img, .GYSCategories {
	width: 400px;
	height: 65px;
}

/************************************
		Contactus
*************************************/
.contactusstylemobile{
	display: none;
}

.ContactContainer{
	margin: 0 auto;
	position: relative;
	margin-top: 30px;
	width: 1015px;
}
.MapContainer, .ContactInfo{
	position: relative;
	display: inline-block;
	height: 370px;
	vertical-align: top;
}
.MapContainer, .contactusstyle table{
	width: 700px;
}
.OpeningTime, .OpeningTimes h3, .OpeningTimes p, .Addressinfo, .Addressinfo h3, .Addressinfo p {
	width: 220px;
	margin: 0px;
	padding: 0px;
}
.Addressinfo{
	margin-top: 15px;
}
.OpeningTimes h3, .Addressinfo h3, .contactusstyle table th, .contactusstyle h3{
	color: Black;
	font-size: 22px;
}

.OpeningTimes table, .OpeningTimes p, .OpeningTimes h3, .Addressinfo p, .Addressinfo h3, .Addressinfo table{
	margin-left: 15px;
}

 .contactusstyle,  .contactusstyle table{
	margin-top: 50px;
	width:100%;
}


.contactusstyle input, textarea, .contactusstylemobile input, textarea  {
	padding: 8px;
	border: solid 2px #47b6e7;
	margin-bottom: 5px;
	width: 300px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/* Default property recognized by some browsers- a Good practice to include it*/
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*For Mozilla Firefox Browsers*/
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*For Webkite browsers - Chrome and Safari*/
		cursor:pointer;
 }
 
.contactusstyle input:focus, textarea:focus{
	 background-color:#ffff99;
	 border: solid 1px #a3d869;
} 

.contactusstyle textarea {
	 height: 150px;
	 line-height: 150%;
	 width:500px;
	 resize: none;
 }
.contactusstyle .submit input, .contactusstyle .form label {
	font-size: 18px;

}
.contactusstyle .form label {
	margin-left: 10px;
	color: #999999;
 }


.contactusstyle .submit input {
	padding: 9px 15px;
	color: #FFFFFF;
	cursor:pointer;
 }

 
/************************************
			Footer
*************************************/

.footer, .footer a {
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	text-align: right;
	margin-right: 100px;
}

/************************************
			ad rotator
*************************************/

.adslideshow-container {
width:90%;
    max-width:700px;
  position: relative;
  margin: auto;
  height:auto;
    display:block;
}

.addot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.admySlides {display: none;}

.adactive {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: adfade;
  -webkit-animation-duration: 1.5s;
  animation-name: adfade;
  animation-duration: 1.5s;
}

@-webkit-keyframes adfade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes adfade {
  from {opacity: .4} 
  to {opacity: 1}
}


/************************************
			Lucozade
*************************************/

.a4slideshow-container {
height:260px;
  position: relative;
    vertical-align: middle;
    float:right;
    display: block;
    width:200px;
}


.a4mySlides {display: block;}


/* Fading animation */
.a4fade {
  -webkit-animation-name: a4fade;
  -webkit-animation-duration: 1.5s;
  animation-name: a4fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes a4fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes a4fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.a41{
	width:100%;
	height:260px;
	background-image:url('http://www.sugro.co.uk/Images/Advertisements/Apple Larazade.png');
	background-size:cover;
    background-repeat: no-repeat;
}

.a42{
	width:100%;
	height:260px;
	background-image:url('http://www.sugro.co.uk/Images/Advertisements/Cherry Lucozade.png');
	background-size:cover;
    background-repeat: no-repeat;
}

.adslideshow-container {
    width:97%;
    max-width:750px;
    position: relative;
    margin: auto;
    height:auto;
    display:block;
}

.adslideshow-container img {
	width:100%;
}