@charset "utf-8";
/* 	Uses Bootstrap for responsive. Here are the overrides. */
/* 	Uses fonts.com to bring in rotis font
   	font-family:'RotisSansSerifW01-Light 735438';
	font-family:'RotisSansSerifW01-Light 735435'; Italic
	font-family:'Rotis Sans Serif W01';
	font-family:'RotisSansSerifW01-Itali';
	font-family:'RotisSansSerifW01-Bold';
	font-family:'RotisSansSerifW01-Extra';
	font-family:'RotisSemiSerifW01-Roman';
	font-family:'RotisSemiSerifW01-Bold';
	font-family:'RotisSemiSerifW02-Bold';
	
	Main colour #403f38, light grey #83837f;, green #8BBC3F, red #8f2f47

*/
   
body {
	padding:123px 0 0 0;
	margin:0;
	font-family:'RotisSansSerifW01-Light 735438', Arial, Helvetica;
	font-size:24px;
	line-height:1.4;
	color:#6b6b63;
}
h1, h2, h3, h4, h5, h6 {
	font-family:'RotisSansSerifW01-Bold';
	color:#6b6b63;
}
h1 {
	margin-top:20px;
	margin-bottom:10px;
	font-size:50px;
}
h2 {
	margin-top:25px;
	margin-bottom:10px;
	font-size:26px;
	color:#83837f;
}
h3 {
	margin-top:70px;
	margin-bottom:10px;
	font-size:60px;
}
h4 {
	margin-top:40px;
	margin-bottom:10px;
	font-family:'RotisSansSerifW01-Extra';
	font-size:26px;
}
h5 {
	font-family:'RotisSansSerifW01-Extra';
	font-size:24px;
	line-height:1.3;
}
a, a:visited { text-decoration: none; color: #403f38; }
a:hover {color:inherit; font-weight:inherit;}
a img {border:none;}
p, li {
	margin-top:25px;
	margin-bottom:15px;
	margin-right:20px;
	line-height:1.4;
	font-size:24px;
}
p.copyright {
	margin-top:40px;
	margin-left:15px;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
p.bigger {
	font-size:36px;
	margin-right:0;
	line-height:1.3;
}
p a, p a:visited { /* italic and green */
	font-family:'RotisSansSerifW01-Light 735435'; 
	color:#8BBC3F; 
}
p a:hover {
	color: #ACD072; 
	text-decoration:inherit;
}
.quote {
	width:100%;
	padding:0;
	font-family:'RotisSemiSerifW01-Roman';
	line-height:1.2;
	font-size:40px;
}
strong {
	font-family:'RotisSansSerifW01-Extra';
}
em {
	font-family:'RotisSansSerifW01-Light 735435';
}
.light {
	font-family:'RotisSansSerifW01-Light 735438';
}
.lightitalic {
	font-family:'RotisSansSerifW01-Light 735435';
}
.wrapper {
	width:960px;
	margin:0 auto;
	padding:0;
}
.left, .right {
	padding:0;
	margin:0;
	float:left;
	width:50%; 
}
/* Anchors */
#roger-changed, #why-roger, #where-to-use-roger, #easy-to-try {
	padding:0; 
	margin:0;
	margin-top:-123px;
}
#why-roger, #where-to-use-roger, #easy-to-try {
	position:absolute;
	margin-top:-150px; 
}
#where-to-use-roger {margin-top:-180px;  }
#easy-to-try {margin-top:-150px; } 
/*******************************************/
/* Header row contains logo and menu 
   Menu is sans serif bold, #403f38, 
   Hover green #8BBC3F*/
/*******************************************/
#navcon {
	position:fixed;
	top:0;
	margin:0;
	padding:0;
	z-index:1030;
	min-height:95px; 
	width:960px;
	background-color:#3b3a32;
	border-bottom:#8f2f47 solid 8px;
	z-index:99999;
}
img#logo {
	float:left;
	height:95px;
	width:auto;
	margin: 0 10px 0 0;
	padding:0;
}

#top-nav {
	margin:0;
	padding:0;
	line-height:1;
	width:500px;
	float:left;
	background-color:#3b3a32;
	font-family:'RotisSansSerifW01-Bold';
}
#top-nav > li  {
	float:left;
	padding:0 20px 0 3px;
	margin:38px 0 0 0;
	line-height:1.2;
	list-style:none;
}
#top-nav > li:first-child  {
	padding:0 20px 0 0;
	margin:36px 0 0 28px;
}
#top-nav > li:last-child {
	padding-right:0 !important;
	margin-right:0 !important;
}
#top-nav > li > a {
	padding:1px 0 2px 0;
	color:#fff;
	font-size:18px;
	font-family:'RotisSansSerifW01-Bold';
}

#top-nav > li > a:visited {color:#fff;}

#top-nav > li > a:hover, #top-nav > .active > a, #top-nav > .active > a:hover, #top-nav > .active > a:focus {
	border-bottom:3px solid #913048;
	background:none;
	background-color:#3b3a32;
	background-image:none;
  	-webkit-box-shadow:none;
    box-shadow:none;
	text-decoration:none;
	font-family:'RotisSansSerifW01-Bold';
}
/*******************************************/
/* Section 1           
/*******************************************/
.section1 {
	background-image:url(../img/bgd-section1.jpg);
	background-position:0 100px; /* due to the fixed top menu */
	background-repeat:no-repeat;
	min-height:708px;
	height:708px;
}
.section1 .left, .section1 .right {
	float:left;
	margin:0;
	padding:0;
	min-height:708px;
}
.section1 .left {
	width:38%;
	background-image:url(../img/bgd-section1-left.png);
	background-position:0 100px; /* due to the fixed top menu */
	background-repeat:no-repeat;
	padding-left:0;
	text-align:center;
}
.section1 .left h2 {
	margin-top:475px;
	margin-left:-10px;
	color:#8f2f47;
	font-size:40px;
}
#downbtn {
	margin-bottom:40px;
	margin-left:-10px;
}
.section1 .right {
	width:61%;
}
.section1 .right h1 {
	margin:130px 0 0 -10px;
	padding:0;
	font-size:45px;
}
.section1 .right h2 {
	margin:15px 0 0 -40px;
	padding:0;
	font-family:'RotisSemiSerifW01-Roman';
	font-size:20px;
	text-align:center;
}

/*******************************************/
/* Section 2 Why Roger
/*******************************************/
.section2 {
	background-color:#9db62f;
	padding-bottom:150px;
	padding-top:50px;
}
#butterfly1 {
	padding:0;
	margin:0 0 0 35%;
	max-width:100%;
}
.section2 h2 {
	margin:-80px 0 100px 28%;
	padding:0;
	font-size:45px;
	color:#6b6b63;
}
.section2 p {margin-right:10%;}
.quote1, .quote2, .quote3 {
	height:200px;
	margin:0;
	padding:50px 0 0 51%;
	background-image:url(../img/whyroger-image01.png);
	background-position:top left;
	background-repeat:no-repeat;
	text-align:left;
	color:#fff;
}
.quote2 {
	padding:50px 0 0 5%;
	 background-image:url(../img/whyroger-image02.png);
	 background-position:top right;
}
.quote3 {
	padding:40px 0 0 51%;
	background-image:url(../img/whyroger-image03.png);
}
.quote1 span, .quote2 span, .quote3 span, .quote4 span {
	margin-left:20px;
}
 
/*******************************************/
/* Section 3
/*******************************************/
.section3 {
	padding:80px 40px 40px 40px;
	background-color:#f2f5f7;
}
.section3 h3 {
	margin-top:0;	
}
#rogerproductimage2 {
	float:right;
	margin-left:20px;
	margin-top:-50px;
}
.section3 .left, .section3 .right {
	float:left;
	margin:0;
	padding:0;
	width:50%;
}
.section3 h4  {margin-top:10px; margin-bottom:15px;}
.thisgallery {
	margin-top:80px;
	margin-bottom:80px;
}
.thisgallery .row1 {
	margin-bottom:40px;
}
.thisgallery a img {
	max-width:100%;
	height:auto;
	margin:0 10px 0 0;
	padding:0;
	border:1px solid #969696;
	box-shadow: 5px 5px 10.24px 5.76px rgba(4, 5, 5, 0.17);
}
.thisgallery a span {
	font-size:20px;
}
#rogervideo {
	float:left;
	margin-left:0px;
	margin-top:20px;
}
.quote4 {
	margin-top:50px;
	margin-left:15px;
}
/*******************************************/
/* Section 4
/*******************************************/
.section4 {
	padding:50px 40px 40px 40px;
	background-color:#e4e5e5;
	border-bottom:#8f2f47 solid 8px;
}
.section4 h3 {
	margin-top:0px;	
	margin-bottom:10px;
}
#logo-easy-to-try {
	margin-top:30px;
	max-width:100%;
	height:auto;
}
.darkdiv2 {
	background-color:#3b3a32;
	text-align:center;
	padding-top:10px;
	padding-bottom:20px;
}
#downbtn, #upbtn {
	cursor:pointer;
}
.section4 .right {padding-left:20px;}
/*******************************************/
/* my faves */
.clear, .spacer20 {height:0; clear:both; display:block;}
.spacer20 {height:20px;}
.phoneonly {display:none;}
.center {text-align:center;
	
}
/*******************************************/

@media (min-width: 768px) and (max-width: 991px) {
	.wrapper {
		width:100%;
		max-width:991px;
	}
	/* NAV */
	#navcon {
		min-height:85px; 
		max-width:991px;
	}
	/* Section 1 */
	.section1 {
		background-image:url(../img/bgd-section1.jpg);
		background-position:0 70px; /* due to the fixed top menu */
		background-repeat:no-repeat;
		min-height:678px;
		height:678px;
	}
	.section1 .left, .section1 .right {
		min-height:678px;
	}
	.section1 .left {
		background-position:0 70px; /* due to the fixed top menu */
	}
	.section1 .left h2 {
		margin-top:455px;
		margin-left:40px;
		font-size:40px;
	}
	#downbtn {
		margin-bottom:40px;
		margin-left:40px;
	}
	.section1 .right h1 {
		margin:130px 0 0 0px;
		padding:0;
		font-size:35px;
		text-align:center;
	}
	.section1 .right h2 {
		margin:15px 0 0 0px;
	}
	/* section 3 */
	.section3 h3 {font-size:45px;} /* was 60 */
	.section3 .left {width:60%;}
	.section3 .right {width:40%;}
	.quote4 {margin-top:40px;}
	.quote4 span {margin-left:0;}
	#rogerproductimage2 {max-width:50%;}
	
	/* Anchors */
	#why-roger {margin-top:-125px; } /* was 150 */
	#where-to-use-roger {margin-top:-155px; } /* was -180 */
	#easy-to-try {margin-top:-125px; } /* was -150 */
}
@media (max-width: 959px) {
	.wrapper {
		width:100%;
	}
	#navcon {
		left:0;
		width:100%;
		min-height:50px;
	}
	img#logo {
		height:auto;
		max-width:40%;
		margin: 0 1% 0 0;
	}
	#top-nav {
		width:59%;
	}
	#top-nav > li  {
		margin-top:15px;
	}
	#top-nav > li:first-child  {
		margin-top:14px;
	}
	#top-nav > li > a {
		font-size:14px;
	}
	.quote {font-size:30px;}
	.quote4 {font-size:28px;}
	.quote1 span, .quote2 span, .quote3 span, .quote4 span {
		margin-left:13px;
	}
	.section4 .right {padding-left:20px;}
	.darkdiv2 {
		padding-top:5px;
		padding-bottom:5px;
	}
}
 
/* Samsung tablet portrait, Phones landscape */
@media (max-width: 767px) {
	.wrapper {
		width:100%;
		max-width:767px;
	}
	img#logo {
		width:35%;
		max-width:35%;
	}
	#top-nav {
		width:64%;
		max-width:64%;
	}
	/* section 1 */
	.section1 {
		background-image:none;
		height:350px;
		min-height:350px;
	}
	.section1 .left, .section1 .right {
		background-image:none;
		min-height:350px;
	}
	.section1 .left h2 {
		margin-top:135px;
		margin-left:0px;
		font-size:30px;
	}
	#downbtn {
		margin-bottom:40px;
		margin-left:20px;
		width:30%;
	}
	.section1 .right h1 {
		margin:130px 0 0 0px;
		padding:0;
		font-size:30px;
		text-align:center;
	}
	.section1 .right h2 {
		margin:15px 0 0 0px;
		font-size:20px;
	}
	/* section 2 */
	.section2 {
		padding-bottom:20px;
		padding-top:20px;
		padding-right:20px;
		padding-left:20px;
	}
	.section2 h2 {
		margin:20px 0 15px 0;
		padding:0;
		font-size:60px;
		text-align:center;
	}
	.quote1, .quote2, .quote3 {
		height:40px;
		margin:0;
		padding:5px 0 0 0;
		background-image:none;
		text-align:center;
	}
	.quote1 span, .quote2 span, .quote3 span, .quote4 span {
		margin-left:0;
		margin-right:0;
	}
	/* section3 */
	.section3 {margin-bottom:0;}
	.section3 h3 {text-align:center;}
	.quote4 {
		margin-top:70px;
	}
	p.copyright {
		margin:0;
		padding:0;
		text-align:center;
		line-height:1;
		font-size:12px;
	}
	/* Anchors */
	#why-roger {margin-top:-150px; } /* was 150 */
	#where-to-use-roger {margin-top:-180px; } /* was -180 */
	#easy-to-try {margin-top:-150px; } /* was -150 */  
}
@media (max-width: 568px) { /* iphone landscape very stubborn */
	.wrapper {
		width:100%;
		max-width:568px;
	}
	#navcon {
		min-height:40px;;
		width:100%;
		max-width:568px;
		border-bottom:#8f2f47 solid 3px;
	}
	img#logo {
		width:30%;
		max-width:30%;
	}
	#top-nav {
		margin-top:0px;
		width:69% !important;
		max-width:69%;
	}
	#top-nav > li  {
		float:left;
		margin:5px 0 0 0;
		padding:0 20px 0 1px;
		line-height:1;
	}
	#top-nav > li:first-child  {
		margin:4px 0 0 0;
		padding:0 20px 0 20px;
		line-height:1;
	}
	#top-nav > li > a {
		font-size:14px;
	}
	#top-nav > li > a img {
		height:15px;
		width:15px;
	}
	p {font-size:20px;}
	p.bigger {font-size:25px;}
	.quote {margin-top:15px;font-size:20px;}
	/* section 1 */
	.section1 {
		background-image:none;
		min-height:300px;
		height:300px;
	}
	.section1 .left, .section1 .right {
		background-image:none;
		min-height:300px;
	}
	.section1 .left h2 {
		margin-top:135px;
		margin-left:0px;
		font-size:30px;
	}
	#downbtn {
		margin-bottom:40px;
		margin-left:20px;
		width:30%;
	}
	.section1 .right h1 {
		margin:130px 0 0 0px;
		padding:0;
		font-size:20px;
		text-align:center;
	}
	.section1 .right h2 {
		margin:15px 0 0 0px;
		font-size:15px;
	}
	/* section 2 */
	.section2 {
		padding-bottom:20px;
		padding-top:20px;
	}
	.section2 h2 {
		margin:20px 0 0 0;
		padding:0;
		font-size:30px;
		text-align:center;
	}
	/* section3 and 4*/
	.section3 h3, .section4 h3 {font-size:30px;}
	
	.section3 .right, .section3 .left, .section4 .right, .section4 .left  {float:none; width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0}
	
	p.copyright {
		margin-top:15px;
		margin-bottom:15px;
		text-align:center;
		line-height:1.2;
		font-size:12px;
	}
	/* anchors */
	#why-roger {margin:-60px 0 0 0; }
	#where-to-use-roger { margin:-80px 0 0 0; } 
	#easy-to-try { margin:-80px 0 0 0; }   
}
/* Phones portrait */
@media (max-width: 479px) {
	#navcon {
		min-height:120px;;
		width:100%;
		max-width:479px;
		border-bottom:#8f2f47 solid 3px;
	}
	img#logo {
		width:100%;
		max-width:479px;
	}
	#top-nav {
		margin-top:20px;
		margin-bottom:20px;
		padding-bottom:10px;
		width:100% !important;
		float:none;
		max-width:479px;
	}
	#top-nav > li {
		padding:0 8px 0 0px;
	}
	#top-nav > li:first-child  {
		margin:4px 0 0 0;
		padding:0 8px 0 5px;
	}
	#top-nav > li > a {
		font-size:14px;
	}
	p {font-size:16px;}
	p.bigger {font-size:22px;}
	.quote {margin-top:15px;font-size:16px;}
	.thisgallery a span {font-size:16px;}
	.section3 .right, .section3 .left, .section4 .right, .section4 .left  {float:none; width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0}
	.section3 .left {width:80%;}
	/* anchors */
	#why-roger {margin:-130px 0 0 0; }
	#where-to-use-roger { margin:-170px 0 0 0; } 
	#easy-to-try { margin:-170px 0 0 0; }   
}