.stButton .stLarge:hover {background-position:0px !important;}
.EditableTextEdit {clear:left;}
.CookieConsent {text-align:left; width:100%; background-color:#54575a; color:#fff; padding:6px 0px 6px 12px; text-transform:none; font-family:"Lato",sans-serif;}
.CookieConsent a { text-transform:none; font-family:"Lato",sans-serif; color:#fff; text-decoration:underline;}
.CookieConsent .ConsentText {float:left; width:92%; display:inline-block; padding:5px 10px 5px 0; color:#fff;}
.CookieConsent .ConsentButtons {float:left; width:8%; padding:5px 10px 0 0 ; text-align:center;}
.CookieConsent input[type=submit] {width:25px; height:20px; cursor:pointer; color:#54575a; background-color:#fff; border-radius:3px;}
@media only screen and (min-width: 1500px) {
.CookieConsent {text-align:center;}
.CookieConsent .ConsentText {float:none; width:auto;}
.CookieConsent .ConsentButtons {float:none; width:auto; padding:0px;}
}

/* CSS Document */
#mobile:not( .mm-menu ) {display: none;}
.EditMode .columns {-webkit-column-count: auto; -moz-column-count: auto; column-count:auto;}
.EditMode .thirds {display:block;}
button:focus { outline:none !important; }
*:focus { outline:none !important; }
* {box-sizing: border-box; background-repeat:no-repeat;}

#condolences {width:100%; float:left; background-color:#000; padding:10px 20px; text-align:center;}
#condolences p {font-size:16px; color:#fff; margin-bottom:0px;}



/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;}
p {font-size:18px; line-height:1.4em;}
p, li, a, input, select,label, span {font-family: 'Lato', sans-serif; color:#54575a; font-weight:300;}
p a {color:#54575a;}
h1,h2,h3,h4,h5,h6, h1 a, h2 a, h3 a ,h4 a, h5 a, h6 a {text-transform:uppercase; font-family:"Lato",sans-serif; color:#54575a; line-height:1.3em; letter-spacing:1px;}
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
.ErrorLabel {display:none;}
input {-webkit-appearance: none;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; }
.videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}
.middle {display: table-cell; vertical-align: middle;}

#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left;}
#container>div {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1333px; max-width: 100%;}
.content {float: left; width: 80%; max-width: 100%; margin:0 10%; position:relative;}

@media only screen and (min-width: 768px) {
.content {float: left; width: 85%; max-width: 100%; margin:0 7.5%; position:relative;}
#shop .content {width:95%; margin:0 2.5%; padding:5%;}
  }

@media only screen and (min-width: 1024px) {
.content {float: left; width: 90%; max-width: 100%; margin:0 5%; position:relative;}
  }

@media only screen and (min-width: 1333px) {
  .content {padding-left:5%;}
  }

.cycle-slideshow {float:left; width:100%;     z-index: 0;}
.cycle-slideshow .copy {float:none;}

a {transition: background-color 0.5s, color 0.5s, background-image 0.5s;}
a:hover {transition: background-color 0.5s, color 0.5s, background-image 0.5s;}

/*#01 STYLES#*/
.copy.white p {color:#fff;}
.copy.white h2 {color:#fff;}
.copy h1 {margin-bottom:20px;}
.copy h2 {font-size:20px; font-weight:bold; margin-bottom:20px; text-transform:uppercase;}
.copy h2:last-child {margin-bottom:0px;}
.copy h3 {font-size:20px; font-weight:bold; margin-bottom:20px; text-transform:uppercase; margin-top:40px;}
.copy p {margin-bottom:20px; font-size:18px;}
.copy p big {font-size:22px;}
.copy p a {color:#94979a; font-weight:bold;}
.copy p a.highlightButton {color:#fff; background-color: #c2d500; padding:5px 12px 7px 12px; font-weight:normal; border-radius:10px;  margin-top:15px;}
.copy p a.highlightButton:hover {text-decoration:none; background-color:#00814e;}
.copy p a:hover {text-decoration:underline;}
.copy ul {clear:left; margin-bottom:30px;}
.copy ul>li {background-image:url(/wp-content/themes/onroute/assets/bullet.png); background-position:top left; padding-left:35px; line-height:22px; margin-bottom:10px; font-size:16px;}
.copy ul>li>ul {margin-top:20px;}
.copy ul>li>ul>li {background-image:url(/wp-content/themes/onroute/assets/bullet.png); list-style-type:none;}
.copy.first p:first-of-type {font-size:20px;}
.copy p:last-child {margin-bottom:0px;}
.copy p small a {font-size:17px !important;}
.copy p img {float:left; margin:0 30px 20px 0; max-width:100%;}

.copy a.facebookLink {background-image:url(/wp-content/themes/onroute/assets/facebook.png); background-size:cover; display:block; width:34px; height:34px; text-decoration:none; margin-top:10px;}
.copy a.facebookLink:hover {background-image:url(/wp-content/themes/onroute/assets/facebook-hover.png);text-decoration:none;}

.copy .shopButton {display:inline-block; background-color:#00814e; background-image:url(/wp-content/themes/onroute/assets/icon-basket.png); background-position:15px center ; color:#fff; font-size:18px; text-transform:uppercase; font-weight:bold; padding:8px 30px 8px 50px;}
.copy .shopButton:hover {text-decoration:none; background-color:#54575a;}

.copy .button {display:inline-block; width:100%; background-color:#c2d500; cursor:pointer; background-image:url(/wp-content/themes/onroute/assets/icon-arrow.png); background-position:right 20px center ; color:#54575a; font-size:16px; text-transform:uppercase; font-weight:bold; padding:10px 20px 10px 20px;}
.copy .button:hover {text-decoration:none; background-color:#00814e; color:#fff;}

.banner {height:350px; background-size:cover; background-position:center center; position:relative; width:100%; }
.banner .content {height:350px;}

.margin {padding:30px 0;}
.noBottomMargin {padding:30px 0 0 0;}

.left {float:left; width:100%; margin-bottom:30px;}
.right {float:left; width:100%; clear:right; margin-bottom:30px;}
.homeRight {float:left; width:100%;}
.wideRight {float:left; width:100%; clear:right; margin-bottom:30px;}
.wideRight a {display:block; position:relative; float:left;}



@media only screen and (min-width: 768px) {
.copy h1 {margin-bottom:30px;}
.copy h2 {font-size:32px; margin-bottom:30px;}
.copy h3 {font-size:20px; margin-bottom:20px;}
.copy p {font-size:20px;}
.copy p big {font-size:28px;}
.copy.first p:first-of-type {font-size:28px;}
.copy ul li {font-size:20px; margin-bottom:20px;}
.banner {height:436px;}  
.banner .content {height:436px;}
.margin {padding:60px 0;}
.noBottomMargin {padding:60px 0 0 0;}
.greyScroll::before {content: '';  background-color: #f4f5f5; right: 0; bottom:0px; left: 2.5%; height: 10000px; width: 95%; position: absolute; z-index: -1; border-radius:20px;}
.greyScroll2::before {content: ''; background-color: #f4f5f5; right: 0; top:0px; bottom:0px; left: 2.5%;  width: 95%; position: absolute; z-index: -1; border-radius:20px;}
  }

@media only screen and (min-width: 1024px) {
.copy ul {margin-left:0px;}
.banner {height:534px;}  
.banner .content {height:534px;}
.left {width:65%; margin-bottom:60px;}
.right {float:right; width:25%; margin-bottom:60px;}
.wideRight {width:30%; margin-left:5%;}
.homeRight {width:65%;}
.greyScroll::before {width:65%;}
.greyScroll2::before {width:65%;}
.home.greyScroll::before {width:70%;}
  }

@media only screen and (min-width: 1333px) {
.greyScroll::before {display:none;}
.greyScroll2::before {display:none;}
.greyScroll .content::before {content: '';  background-color: #f4f5f5; right: 0; bottom:-30px; left: 0%; height: 10000px; width: 69.5%; position: absolute; z-index: -1; border-radius:20px;}
.greyScroll2 .content::before {content: '';  background-color: #f4f5f5; right: 0; top:-50px; bottom:-30px; left: 0%; width: 69.5%; position: absolute; z-index: -1; border-radius:20px;}
  
.homeRight {float:right; width:27.5%;}
  }


/*#02 MASTER#*/
#topHeader {background-color:#c2d500;}
#topHeader ul#menu-topnav {float:right;}
#topHeader ul#menu-topnav>li:first-child {display:none;}
#topHeader ul#menu-topnav>li {float:left;}
#topHeader ul#menu-topnav>li>a {float:left; color:#fff; font-size:14px; text-transform:uppercase; font-weight:bold; padding:9px 25px;}
#topHeader ul#menu-topnav>li:last-child>a {background-color:#00814e; background-position:14px center; background-size:17px auto; padding:10px 15px 10px 15px;}
#topHeader ul#menu-topnav>li:last-child>a span {font-family: rollerscript-rough, sans-serif; text-transform:lowercase; color:#fff; font-size:18px; line-height:16px;}
#header {background-color:#54575a; height:60px; filter: drop-shadow(2px 4px 6px black); z-index: 1;}
#header a.logo {z-index:10; display:block; position:absolute; top:-8px; z-index:200;}
#header .logo img {position:relative; width:200px; }
#header ul#menu-mainnav {display:none; position:relative; float:right; margin-top:65px; z-index:110;}
#header ul#menu-mainnav>li {float:left; position:relative;}
#header ul#menu-mainnav>li.Highlighted>a,#header ul#menu-mainnav>li.Highlighted>span {font-weight:bold;}
#header ul#menu-mainnav>li.highlighted>a,#header ul#menu-mainnav>li.highlighted>span {font-weight:bold;}
#header ul#menu-mainnav>li>a {color:#fff; text-transform:uppercase; font-size:14px; margin-left:12px; cursor:pointer;}
#header ul#menu-mainnav>li>span {cursor:pointer; color:#fff; text-transform:uppercase; font-size:14px; margin-left:12px;}
#header ul#menu-mainnav>li>ul {display:none;}
#header ul#menu-mainnav>li>ul.block {display:block; position:absolute; z-index:5; background-color:#c2d500; top:45px; } 
#header ul#menu-mainnav>li>ul>li {}
#header ul#menu-mainnav>li>ul>li>a {display:block; color:#fff; text-transform:uppercase; font-size:14px; padding:8px 20px; white-space:nowrap;}
#header ul#menu-mainnav>li>ul>li>a:hover {background-color:#54575a;}
#header a#navButton {float:right; position:relative; margin-top:10px; display:block; height:40px; color:#666666; font-size:16px; text-transform:uppercase; background-image:url(/wp-content/themes/onroute/assets/hamburger.png); background-repeat:no-repeat; background-position:center center; width:40px;}
#footer {background-color:#54575a; margin-top:80px;}
#footer .content { padding-bottom:40px;}
#footer .logo {float:left; margin-top:-20px; margin-bottom:20px;}
#footer .logo img {width:260px;}
#footer ul#menu-footernav {float:left; clear:left; margin:30px 0;}
#footer ul#menu-footernav>li { margin-bottom:10px;}
#footer ul#menu-footernav>li>a {color:#fff; text-transform:uppercase; font-size:14px; padding-bottom:10px;}
#footer ul#menu-footernav>li>a:hover {color:#c2d500;}
#footer ul#menu-footernav>li:last-child {margin-right:0px; padding-right:0px; border-right:0px;} 
#footer .copy {width:75%;}
#footer .copy p {font-size:15px;}
#footer .copy p a {font-weight:300; color:#fff;}
#footer .copy p a:hover {color:#c2d500; text-decoration:none;}
#footer .copy {clear:left; padding:0 0 40px 0;}
#footer .social {float:left; clear:left;}
#footer .social a.instagram {float:left; display:block; height:33px; width:33px; background-image:url(/wp-content/themes/onroute/assets/social-instagram.png); background-size:contain;}
#footer .social a.instagram:hover {background-image:url(/wp-content/themes/onroute/assets/social-instagram-hover.png);}
#footer .social a.facebook {float:left; display:block; height:33px; width:33px; margin-left:10px; background-image:url(/wp-content/themes/onroute/assets/social-facebook.png); background-size:contain;}
#footer .social a.facebook:hover {background-image:url(/wp-content/themes/onroute/assets/social-facebook-hover.png);}
#footer .social a.linkedin {float:left; display:block; height:33px; width:33px; margin-left:10px; background-image:url(/wp-content/themes/onroute/assets/linkedin.png); background-size:contain;}
#footer .social a.linkedin:hover {background-image:url(/wp-content/themes/onroute/assets/linkedin-hover.png);}
#footer .isoLogo {float:left; margin-bottom:20px;}
#copyright {padding:20px 0; background-color:#c2d500;}
#copyright p {color:#fff; font-size:15px; text-transform:uppercase; float:left; width:100%;}
#copyright a.mabanaft {float:left;  margin-top:20px; display:block;}
#copyright a.mabanaft img {width:180px;}

@media only screen and (max-width: 767px) {
#topHeader .content {width:100%; margin:0;}
  }

@media only screen and (min-width: 768px) {
#topHeader ul#menu-topnav>li:first-child {display:block;}
#topHeader ul#menu-topnav>li>a {font-size:14px;}
#topHeader ul#menu-topnav>li:last-child>a {background-size:auto;  padding:9px 25px 9px 25px;}
#header {height:110px; }
#header a.logo {top:-11px;}
#header .logo img {width:auto;}
#footer {margin-top:80px;}
#footer .content { padding-bottom:100px;}
#footer .content {background-position:bottom 40px right;}
#footer .copy {padding:20px 0 40px 0;}
#footer .logo {margin-bottom:40px;}
#footer .logo img {width:auto;}
#footer .social {float:right; margin-top:30px; clear:none;}
#footer .social a.instagram {height:50px; width:50px;}
#footer .social a.facebook {height:50px; width:50px;}
#footer .social a.linkedin {height:50px; width:50px;}
#footer .content {background-position:bottom 40px right;  padding-bottom:0px;}
#footer ul#menu-footernav>li {float:left; border-right:1px solid #fff; margin-right:20px; padding-right:20px; line-height:12px; }
#footer a.mabanaft {float:right; margin-top:-100px; display:block;}
#footer .isoLogo {float:right; margin-top:-110px; display:block;}
#copyright a.mabanaft {float:right; margin:20px 0 0 0px;}
#copyright p {line-height:66px; width:auto;}
  }


@media only screen and (min-width: 1024px) {
#header ul#menu-mainnav {display:block;}
#header a#navButton {display:none;}
  }

@media only screen and (min-width: 1333px) {
  }



/*#03 HOME#*/


.bannerText {background-color:#c2d500; padding:10px 20px 10px 0px; float:left; position:absolute; bottom:60px; min-width:150px; max-width:210px;}
.banner.green .bannerText {background-color:#2ca449;}
.banner.green .bannerText::before   {background-color:#2ca449;}
.banner.green .bannerText::after {background-image:url(/wp-content/themes/onroute/assets/gradient-green.png); }
.banner.green .bannerText p {color:#fff;}
.banner.blue .bannerText {background-color:#004987;}
.banner.blue .bannerText::before   {background-color:#004987;}
.banner.blue .bannerText::after {background-image:url(/wp-content/themes/onroute/assets/gradient-blue.png); }
.banner.blue .bannerText p {color:#00a0df;}
.bannerText h1 {color:#fff; font-size:20px; margin-bottom:5px;}
.bannerText h2 {color:#fff; font-size:20px; margin-bottom:5px;}
.bannerText p {font-family: rollerscript-rough, sans-serif; font-weight: 400; font-style: normal; font-size:20px; line-height:1.0em;}
.bannerText::before {content:''; background-color:#c2d500; position: absolute; top: 0; bottom: 0; width: 9600px; right: 100%;}
.bannerText::after {content:''; background-image:url(/wp-content/themes/onroute/assets/gradient.png); background-size:100% 100%;  position:absolute; top:0; bottom:0; left:100%; width:70px; }
.bannerText a {display:inline-block; background-color:#00814e; color:#fff; margin-top:10px; font-size:14px; text-transform:uppercase; font-weight:bold; padding:6px 20px;}
.bannerText a:hover {text-decoration:none; background-color:#54575a;}

.locations {margin-bottom:30px; float:left; width:100%; }
.locations .locationPreview {float:left; width:100%; background-color:#545759; margin-top:60px; margin-bottom:30px;}
.locations .locationPreview img {width:56px; margin-top:-28px; margin-left:20px; margin-bottom:5px;}
.locations .locationPreview h3 {color:#fff; text-transform:uppercase; font-size:16px; font-weight:300; padding:0 25px; }
.locations .locationPreview h4 {color:#c2d500; font-size:16px;  padding:0 25px; font-weight:300; margin-bottom:10px;}
.locations .locationPreview .image {width:100%; height:180px; background-size:cover; background-position:center center;}
.locations .locationPreview>a {display:inline-block; color:#fff;  width:100%; padding:15px 22px; font-size:20px; text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:1px; background-color:#c2d500; position:relative; background-position: center; transition: background 1.5s; background: #c2d500 radial-gradient(circle, transparent 1%, #c2d500 1%) center/100%; }
.locations .locationPreview>a:hover {background-color: #00814e; background-size: 15000%; transition: background 1.5s;}
.locations .locationPreview>a:after {display:block; content:''; width:19px; height:19px; background-image:url(/wp-content/themes/onroute/assets/icon-arrow.png); background-size:contain; background-repeat:no-repeat; position:absolute; right:20px; top:14px;}

.locations .locationPreview .copy {padding-top:20px; background-color:#fff;}

.facilities {float:left; width:100%; margin-bottom:30px;}
.facilities .facility {float:left; width:45%; margin-left:10%; margin-top:30px;}
.facilities .facility p {font-size:14px;}
.facilities .facility:nth-child(2n+1) {margin-left:0px; clear:left;}
.facilities .facility a {display:flex; background-color:#c2d500; border-radius:10px; text-align:center; width:70px; height:70px; align-items: center; justify-content: center; margin-bottom:10px;}
.facilities .facility span {display:flex; background-color:#c2d500; border-radius:10px; text-align:center; width:70px; height:70px; align-items: center; justify-content: center; margin-bottom:10px;}
.facilities .facility a:hover {background-color:#008656; }
.facilities .facility img {width:100%;}

.quote {background-image:url(/wp-content/themes/onroute/assets/quote.png); background-position:top left; padding-top:70px; margin-top:30px; }
.cycle-slideshow .quote {width:100%;}
.quote p {font-family: rollerscript-rough, sans-serif; font-weight: 400; font-style: normal; font-size:28px; line-height:1.0em; margin-bottom:20px; white-space:normal;}
.quote h4 {font-size:16px; font-weight:300; text-transform:none; white-space:normal;}
.quote h4 strong {color:#c2d500; font-weight:bold;}

.shopScroll {float:left; width:100%; background-color:#54575a;}
.shopScroll .image {background-size:cover; background-position:center center; width:100%; float:left; height:200px;}
.shopScroll .image a {display:block; width:100%; height:200px; position:relative; }
.shopScroll img {margin:-28px 0 0 20px; width:52px;}
.shopScroll p {color:#fff; font-size:17px; font-weight:bold; padding:0 0 10px 20px;}

#shop {background-color:#c2d500;}
#shop .copy {margin:30px 0;}
#shop .copy h3 {color:#fff;}

#newsLinks  {margin:30px 0 0 0;}

@media only screen and (min-width: 768px) {
.bannerText {bottom:60px;  padding:20px 30px 20px 0px; max-width:550px; }
.bannerText h1 {font-size:32px;}
.bannerText h2 {font-size:32px;}
.bannerText p {font-size:30px;}
.bannerText::after {width:90px;}
.locations {margin-bottom:0px;}
.locations .locationPreview {width:45%; margin-left:10%;}
.locations .locationPreview:nth-child(2n+1) {margin-left:0%; clear:left;}
.locations .locationPreview .copy {padding-top:40px;}
.locations .locationPreview .image {height:140px;}
.faciltities {margin-bottom:60px;}
.facilities .facility {width:30%; margin-left:5%;}
.facilities .facility:nth-child(2n+1) {margin-left:5%; clear:none;}
.facilities .facility:nth-child(3n+1) {margin-left:0px; clear:left;}
.facilities .facility p {font-size:20px;}
.facilities .facility a {width:110px; height:110px;}
.facilities .facility span {width:110px; height:110px;}
.quote p {font-size:30px; color:#a4a6a8;}
.quote h4 {font-size:20px;}
#shop {background-color:#fff;}
#shop .cycle-slideshow {float:left; width:35%;}
#shop .copy {float:right; width:60%; margin:0px;}
#newsLinks {margin:0;}
#newsLinks .news {margin:0;}
  }

@media only screen and (min-width: 1024px) {
.bannerText {bottom:150px;  padding:20px 40px 20px 45px; max-width:650px;}
.locations .locationPreview {width:30%; margin-left:5%; margin-top:30px;}
.locations .locationPreview:nth-child(2n+1) {margin-left:5%; clear:none;}
.locations .locationPreview:nth-child(3n+1) {margin-left:0%; clear:left;}
.facilities {width:65%;}
.quote p {color:#a4a6a8;}
  }
  
@media only screen and (min-width: 1333px) {
.bannerText {bottom:150px;  padding:20px 40px 20px 95px; }
.locations .locationPreview img {width:auto;}
.locations .locationPreview h3 {font-size:20px;}
.locations .locationPreview h4 {font-size:20px; margin-bottom:15px;}
.locations .locationPreview a {font-size:20px;}
.locations .locationPreview .image {height:153px;}
.shopScroll .image {height:250px;}
.shopScroll .image a {height:250px;}
.shopScroll p {font-size:20px; padding-bottom:15px;}
.shopScroll img {margin:-36px 0 0 20px; width:auto;}
.quote p {color:#54575a;}
.left.quote p {font-size:48px; color:#a4a6a8;}
  }


#shop .content {background-color: #c2d500; border-radius:20px;}


/*#04 FACILITY#*/

img.icon {float:left; width:70px; margin-bottom:30px;}

@media only screen and (min-width: 768px) {
img.icon {width:112px;}
  }

@media only screen and (min-width: 1024px) {
img.icon {width:180px;}
  }


/*#05 CAFE#*/

.menus {margin:0 0 30px 0; float:left; width:100%; }
.menus .menuPreview {float:left; width:100%; background-color:#545759; margin-top:60px;}
.menus .menuPreview img {width:56px; margin-top:-28px; margin-left:20px; margin-bottom:5px;}
.menus .menuPreview h3 {color:#fff; text-transform:none; font-size:18px; font-weight:300; padding:0 25px; }
.menus .menuPreview h4 {color:#fff; font-size:16px;  padding:0 25px; font-weight:300; margin-bottom:10px;}
.menus .menuPreview .image {width:100%; height:140px; background-size:cover; background-position:center center;}
.menus .menuPreview a {display:inline-block; color:#fff;  width:100%; padding:15px 22px; font-size:20px; text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:1px; background-color:#c2d500; position:relative; background-position: center; transition: background 1.5s; background: #c2d500 radial-gradient(circle, transparent 1%, #c2d500 1%) center/100%; }
.menus .menuPreview a:hover {background-color: #00814e; background-size: 15000%; transition: background 1.5s;}
.menus .menuPreview a:after {display:block; content:''; width:19px; height:19px; background-image:url(/wp-content/themes/onroute/assets/icon-arrow.png); background-size:contain; background-repeat:no-repeat; position:absolute; right:20px; top:14px;}

@media only screen and (min-width: 768px) {
.menus {margin-bottom:60px;}
.menus .menuPreview {width:45%; margin-left:10%;}
.menus .menuPreview:nth-child(2n+1) {margin-left:0%; clear:left;}
  }

@media only screen and (min-width: 1024px) {
.menus .menuPreview {width:30%; margin-left:5%;}
.menus .menuPreview:nth-child(2n+1) {margin-left:5%; clear:none;}
.menus .menuPreview:nth-child(3n+1) {margin-left:0%; clear:left;}
  }


/*#06 SHOP#*/

.shop {margin:40px 0;}
.shop .shopScroll {float:left; width:100%; margin-bottom:40px;}

@media only screen and (min-width: 768px) {
.shop .shopScroll {width:47.5%; margin-left:5%;}
.shop .shopScroll:nth-child(2n+1) {margin-left:0; clear:left;}
}

/*#07 LOCATIONS#*/

.right.manager img {float:left; width:100%; margin:30px 0 20px 0;}
.right.manager a img {width:auto;}

.times {margin-top:40px;}
.times table {float:left; width:100%; margin-bottom:30px; font-family: 'Lato', sans-serif; color:#54575a; font-weight:300;}
.times table td {padding-bottom:3px;}

#map {width:100%; height:510px; margin-bottom:-40px;}

@media only screen and (min-width: 768px) {
.right.manager {margin:60px 0;}
.right.manager img {width:30%; margin:0 10% 0 0;}
.right.manager p {padding-left:40%;}
  
.locationFacilities {width:65%;}
.locationFacilities .facility {width:47.5%;}
.locationFacilities .facility:nth-child(3n+1) {margin-left:5%; clear:none;}
.locationFacilities .facility:nth-child(2n+1) {margin-left:0px; clear:left;}
  
.times {float:right; width:30%;}
#map {height:550px; margin-bottom:-80px;}
}

@media only screen and (min-width: 1024px) {
.right.manager {margin:0 0 60px 0;}
.right.manager img {width:100%; margin:0 0 30px 0;}
.right.manager p {padding-left:0%;}
.times {float:right; width:25%; margin-top:0px;}
.locationFacilities .facility p {width:200px;}
  }

@media only screen and (min-width: 1333px) {
.locationFacilities .facility {width:30%; margin-left:5%;}
.locationFacilities .facility:nth-child(2n+1) {margin-left:5%; clear:none;}
.locationFacilities .facility:nth-child(3n+1) {margin-left:0px; clear:left;}
  
  }
  
  
/*#08 VACANCY#*/

img.vacancy {width:56px; margin-bottom:10px;}
  
@media only screen and (min-width:1024px) {
img.vacancy {width:auto; margin-bottom:20px;}
  }


/*#09 NEWS#*/

.news {float:left; width:100%; margin-bottom:30px;}
.news .newsPreview .image {width:100%; background-size:cover; background-position:center center; margin-bottom:20px; height:180px; overflow:hidden;}
.news .newsPreview {margin-bottom:30px;}
.news .newsPreview .image a {display:block; width:100%; height:180px; background-size:cover; background-position:center center; transition: all 0.5s;}
.news .newsPreview .image a:hover {transform: scale(1.2);}
.news .newsPreview .copy a {font-size:16px; display:block; text-transform:uppercase; background-image:url(/wp-content/themes/onroute/assets/readmore.png); background-position:left center; font-weight:bold; line-height:30px; padding-left:45px;}
.news .newsPreview .copy a:hover {background-image:url(/wp-content/themes/onroute/assets/readmore-hover.png);}

.newsImage img {width:100%; margin-bottom:20px;}
.news a.newsBack {margin-top:40px; font-size:16px; display:block; text-transform:uppercase; background-image:url(/wp-content/themes/onroute/assets/backnews.png); background-position:left center; font-weight:bold; line-height:30px; padding-left:45px;}
.news a.newsBack:hover {background-image:url(/wp-content/themes/onroute/assets/backnews-hover.png);}


@media only screen and (min-width:768px) {
.news {margin-bottom:60px;}
.news .newsPreview {float:left; width:47.5%; margin-left:5%; margin-bottom:60px;}
.news .newsPreview:nth-child(2n+1) {margin-left:0; clear:left;}
.news .newsPreview .image {height:200px;}
.news .newsPreview .image a {height:200px;}
.newsImage img {margin-bottom:40px;}
.news .newsPreview .copy a {font-size:20px;}
.news a.newsBack {font-size:20px;}
  }
  
@media only screen and (min-width:1024px) {
.news .newsPreview {float:left; width:30%; margin-left:5%; margin-bottom:60px;}
.news .newsPreview:nth-child(2n+1) {margin-left:5%; clear:none;}
.news .newsPreview:nth-child(3n+1) {margin-left:0; clear:left;}
.news .newsPreview .image {height:235px;}
.news .newsPreview .image a {height:235px;}

}

.news>.copy h3 {color:#00814e; text-transform:none;}
.news .copy cite {float:left; width:100%; background-image: url(/wp-content/themes/onroute/assets/quote.png); background-position: top left; padding-top: 70px;
  font-family: rollerscript-rough,sans-serif; color:#b4b4b4; font-weight: 400; font-style: normal; font-size: 32px; line-height: 1.2em; margin: 30px 0 50px 0; white-space: normal;}
.news .copy.right h4 strong {color: #c2d500; font-weight: bold;}
.news .copy.right h4 {font-size:20px; text-transform:none; font-weight:normal;}
.news .copy.left.first {margin-bottom:0px;}


#gallery {float:left; width:100%; margin:20px 0 30px 0;}
#gallery a.gallery {float:left; width:100%; height:162px; background-size:cover; background-repeat:no-repeat; margin:0 0 2% 0;}

@media only screen and (min-width: 640px) {
#gallery {width:66%;}
  #gallery a.gallery {width:48%; margin:0 2% 2% 0;}
  }

@media only screen and (min-width: 960px) {
  #gallery a.gallery {width:31.3333%;}
  }


/* PAGER */


.pager {float:left; font-family:"Lato",sans-serif; color:#c2d500; font-size:30px; float:left; width:100%;}
.pager ul li {float:left; text-align:center;}
.pager ul li span {display:inline-block;}
.pager ul li span.current {color:#fff; background-color:#c2d500; font-weight:bold; height:40px; width:40px; padding-top:0px; font-family:"Lato",sans-serif; color:#fff; }
.pager ul li a {font-family:"Lato",sans-serif; color:#c2d500; font-size:30px; font-weight:bold; height:40px; width:40px; display:inline-block; padding-top:0px;}
.pager ul li a.next {background-image:url("/wp-content/themes/onroute/assets/pagerNextPage.png"); background-position:center center; display:inline-block; width:25px; height:40px; margin-left: -6px; background-color: #fff;}
.pager ul li a.prev {background-image:url("/wp-content/themes/onroute/assets/pagerPreviousPage.png"); background-position:center center; display:inline-block; width:25px; height:40px; }
.pager a.page {border-right:1px solid #c2d500;}





/*#10 OUR PEOPLE#*/

.people {float:left; width:100%;}
.people h3 {margin:10px 0 30px 0;}
.staff {float:left; width:100%; margin-bottom:60px;}
.staff .image {width:210px; height:210px; margin-bottom:20px; background-size:cover;}
.staff .copy p a {color:#c2d500; font-weight:normal;}

@media only screen and (min-width:768px) {
.staff {width:47.5%; margin-left:5%;}
.staff:nth-child(2n+1) {margin-left:0; clear:left;}
  }
@media only screen and (min-width: 960px) {
.staff {width:30%; margin-left:5%;}
.staff:nth-child(2n+1) {margin-left:5%; clear:none;}
.staff:nth-child(3n+1) {margin-left:0; clear:left;}
  }
  

/*#11 COMPETITION#*/

#webForm {float:left; width:100%;}
#webForm .spacer {position:relative; float:left; width:100%; margin-bottom:20px;}
#webForm .spacer input[type=text] {float:left; font-size:18px; padding:10px; width:100%; border:1px solid #989898;}
#webForm .spacer input[type=submit] {background-color: #00814e; color:#fff; font-size:18px; text-align:center; padding:10px 50px; font-weight:bold; text-transform:uppercase;}
#webForm .spacer select {float:left; font-size:18px; padding:10px; width:100%; border:1px solid #989898;}

#webForm .spacer>label {float:left; width:80%; margin:-30px 0 0 35px;}

.checkbox {display: inline-flex; cursor: pointer; position: relative;}
.checkbox > span {color: #34495E; padding: 0.5rem 0.25rem;}
.checkbox > input {height: 25px; width: 25px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; border: 1px solid #000;  outline: none; transition-duration: 0.3s;  background-color: #fff; cursor: pointer;}
.checkbox > input:checked {border: 4px solid #ffffff; background-color: #00814e;}
.checkbox > input:checked + span::before {content: '\2713'; display: block; text-align: center; color: #fff; position: absolute; left: 0.7rem;  top: 0.2rem;}
.checkbox > input:active {border: 2px solid #ffffff;}



/*#12 LOCATIONS#*/

#locationMap {width:100%; height:650px; }
img.snapAd {max-width:100%; margin-bottom:40px; margin-top:-10px; position:relative; display:block;}

@media only screen and (min-width:768px) {
#locationMap {height:750px; }
 }

@media only screen and (min-width:1024px) {
img.snapAd {float:right; z-index:-1;}

  }

.gm-style-iw, .gm-style-iw-tc {visibility:hidden;}
.infoWindow {visibility:visible; background-color:#535659; width:240px; border-radius:20px; float:left;}
.infoWindow h3 {color:#fff; text-transform:uppercase; font-weight:bold; font-size:16px; padding:20px 20px 0px 20px;}
.infoWindow h3 span {color:#fff; font-weight:300;}
.infoWindow h4 {color:#c2d500; font-weight:300; font-size:16px; padding:0 20px 10px 20px;}
.infoWindow p {font-size:14px; color:#ffffff; padding:0 20px 10px 20px;}
.infoWindow a {display:block; float:left; background-color:#c2d500; width:100%; font-weight:bold; padding:15px 20px; color:#535659; text-transform:uppercase; font-size:16px;
background-image:url(/wp-content/themes/onroute/assets/infowindow-arrow.png); background-position:center right 20px;}
.infoWindow a.directions {display:block; float:left; background-color:#048757; width:100%; font-weight:bold; padding:15px 20px; color:#ffffff; text-transform:uppercase; font-size:16px;
background-image:url(/wp-content/themes/onroute/assets/direction-icon.png); background-position:center right 20px;}
.infoWindow .mapIcons {width:100%; padding:0 20px 20px 20px;}
.infoWindow .mapIcons>div {float:left; background-size:contain; width:41px; height:41px; margin:0 0 12px 12px; display:inline-block;}
.infoWindow .mapIcons>div:nth-child(4n+1) {margin-left:0px;}
.infoWindow .mapFuel {background-image:url(/wp-content/themes/onroute/assets/icon-pump-large.png); }
.infoWindow .mapShop {background-image:url(/wp-content/themes/onroute/assets/icon-shop-large.png); }
.infoWindow .mapCafe {background-image:url(/wp-content/themes/onroute/assets/icon-cafe-large.png); }
.infoWindow .mapBar {background-image:url(/wp-content/themes/onroute/assets/icon-bar-large.png); }
.infoWindow .mapShowers {background-image:url(/wp-content/themes/onroute/assets/icon-shower-large.png); }
.infoWindow .mapToilets {background-image:url(/wp-content/themes/onroute/assets/icon-toilets-large.png); }
.infoWindow .mapParking {background-image:url(/wp-content/themes/onroute/assets/icon-parking-large.png); }
.infoWindow .mapSecurity {background-image:url(/wp-content/themes/onroute/assets/icon-security-large.png); }
.infoWindow .mapTruckwash {background-image:url(/wp-content/themes/onroute/assets/icon-truckwash-large.png); }



/*#13 FOOD#*/

.foodMenu {background-color:#535659; width:100%; margin-bottom:40px; border-radius:20px; padding:40px; float:left; margin-top:90px;}
.foodMenu img {margin-top:-110px; max-width:100%; margin-bottom:15px;}
.foodMenu h3 {color:#c2d500; margin-bottom:30px; font-size:20px;}
.foodMenu p {color:#fff; margin-bottom:10px; font-size:16px;}
.foodMenu td {color:#fff; margin-bottom:10px; font-size:16px; font-family:"Lato",sans-serif;}
.foodMenu p.green {color:#c2d500;}
.foodMenu table {float:left; width:100%; margin-bottom:40px; border-bottom:1px solid #fff;}
.foodMenu table tr td { padding:10px 0; border-top:1px solid #fff; vertical-align:top;}
.foodMenu table tr td p {margin-bottom:0px;}
.foodMenu table tr td:last-child {text-align:right;}
.accents .copy p {font-weight:500;}
.accents .foodMenu p {font-weight:500;}
.accents .foodMenu td {font-weight:500;}
.foodMenu table:last-child {border-bottom:0px;}

@media only screen and (min-width:768px) {
.foodMenu {width:65%;}  
.foodMenu p {font-size:18px;}
.foodMenu td {font-size:18px;}
 }

@media only screen and (min-width:1024px) {
.foodMenu {width:47.5%; margin-left:5%; }
.foodMenu:nth-child(odd) {clear:left; margin-left:0;}
  }

/*#14 CAREERS#*/

.vacancies {float:left; width:100%;}
.vacancies .quote {width:100%;}
.left .quote {margin-top:30px;}
.jobPreview {float:left; width:100%; margin-bottom:80px; background-image:url(/wp-content/themes/onroute/assets/logo.png); background-position:top left; padding-top:100px;}
.jobPreview h4 {font-size:16px; font-weight:bold; margin-bottom:0px;}
.jobPreview h5 {font-size:16px; font-weight:normal; margin-bottom:15px;}
.jobPreview p {font-size:16px; margin-bottom:20px;}
.jobPreview a {font-size:16px; display:block; text-transform:uppercase; background-image:url(/wp-content/themes/onroute/assets/readmore.png); background-position:left center; font-weight:bold; line-height:30px; padding-left:45px;}
.jobPreview a:hover {background-image:url(/wp-content/themes/onroute/assets/readmore-hover.png);}
a.readMore {font-size:16px; display:block; text-transform:uppercase; background-image:url(/wp-content/themes/onroute/assets/readmore.png); background-position:left center; font-weight:bold; line-height:30px; padding-left:45px;}
a.readMore:hover {background-image:url(/wp-content/themes/onroute/assets/readmore-hover.png); text-decoration:none !important;}

@media only screen and (min-width:768px) {
.jobPreview {width:45%; margin-left:10%;}
.jobPreview:nth-child(2n+1) {margin-left:0; clear:left;}
.jobPreview h4 {font-size:20px;}
.jobPreview h5 {font-size:20px;}
.jobPreview p {font-size:20px;}
.jobPreview a {font-size:20px;}
  }
  
@media only screen and (min-width:1024px) {
.jobPreview {width:30%; margin-left:5%;}
.jobPreview:nth-child(2n+1) {margin-left:5%; clear:none;}
.jobPreview:nth-child(3n+1) {margin-left:0; clear:left;}
  }

@media only screen and (min-width: 1333px) {
.left .quote p {font-size: 48px; color: #a4a6a8;}
}  
  
/*#15 V2#*/

.filter {float: left; clear: both; margin-bottom: 60px;}
.filter select {border: 1px solid #454545; font-size: 18px; padding: 5px 20px 5px 5px;}


#banner {overflow: hidden; height:350px; width:100%;}
.banner .image {height:350px; position: absolute; background-size: cover; background-position: center center; -webkit-transition: all 6s ease; width:100%; }

@media only screen and (min-width: 768px) {
.banner .image {height:436px;}
#banner {height:436px;}
}

@media only screen and (min-width: 1024px) {
.banner .image {height:534px;}
#banner {height:534px;}
.takeawayAd {margin-top:60px !important; width:100%;}
}

.banner.cycle-slide-active .image {-webkit-transform: scale(1.2);}
.banner.cycle-slideshow :nth-child(2) {-webkit-animation-name: loadZoom; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-duration: 4s;}
@-webkit-keyframes loadZoom {0% {-webkit-transform: scale(1.0);} 100% {-webkit-transform: scale(1.0);}}


.greyBackground {background-color:#ebebeb;}
.cycle-carousel-wrap {float:left; width:100%;}
#pager {top:-35px; position:relative;}
#bannerPager span {cursor:pointer; display:block; width:20px; height:20px; background-color:#fff; color:#fff; float:left; margin-right:10px;}
#bannerPager span.cycle-pager-active {color:#c2d500; background-color:#c2d500;}



.locations {width:100%;}
.locations .locationPreviewV2 { width:100%; background-color:#545759; margin:28px 0 30px 0px; }
.locations .locationPreviewV2 img {width:56px; margin-top:-28px; margin-left:20px; margin-bottom:5px;}
.locations .locationPreviewV2 h3 {color:#fff; text-transform:uppercase; font-size:16px; font-weight:300; padding:0 25px; }
.locations .locationPreviewV2 h4 {color:#c2d500; font-size:16px; padding:0 25px; font-weight:300; margin-bottom:10px;}
.locations .locationPreviewV2 .image {width:100%; height:180px; background-size:cover; background-position:center center;}
.locations .locationPreviewV2>a {display:inline-block; color:#fff;  width:100%; padding:15px 22px; font-size:20px; text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:1px; background-color:#c2d500; position:relative; background-position: center; transition: background 1.5s; background: #c2d500 radial-gradient(circle, transparent 1%, #c2d500 1%) center/100%; }
.locations .locationPreviewV2>a:hover {background-color: #00814e; background-size: 15000%; transition: background 1.5s;}
.locations .locationPreviewV2>a:after {display:block; content:''; width:19px; height:19px; background-image:url(/wp-content/themes/onroute/assets/icon-arrow.png); background-size:contain; background-repeat:no-repeat; position:absolute; right:20px; top:14px;}

.locations .locationPreviewV2 .copy {padding-top:20px; background-color:#fff;}
.locations .pager {float:left; margin-top:40px;}
.locations .pager #prev {cursor:pointer; float:left; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 20px solid #c2d500; margin-right:30px;}
.locations .pager #next {cursor:pointer; float:left; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #c2d500;}

.additional {float:left; width:100%; margin-bottom:80px;}
.additional .image {float:left; width:100%; margin-bottom:30px;}
.additional .image img {width:100%;}
.additional .copy {float:left; width:100%:}

@media only screen and (min-width: 640px) {
#pager {top:-50px; position:relative;}
.additional .image {width:35%; margin-bottom:0px;}
.additional .copy {float:right; width:60%; }
.locations .locationPreviewV2 { margin:28px 5% 30px 0px; width:47.5%;}
}

@media only screen and (min-width: 1024px) {
.locations .locationPreviewV2 { margin:28px 5% 30px 0px; width:30%;}
}


#galleryV2 {}
#galleryV2 .galleryImage {float:left; width:100%; height:230px; margin:0 0 30px 0; overflow:hidden;}
#galleryV2 .galleryImage a {float:left; width:100%; height:230px; background-size:cover; background-position:center center; transition: all .5s; image-rendering: -webkit-optimize-contrast }
.galleryImage:hover a {transform: scale(1.2);}

@media only screen and (min-width: 768px) {
#galleryV2 .galleryImage {width:47.5%; margin-left:5%;}
#galleryV2 .galleryImage:nth-child(2n+1) {clear:left; margin-left:0px;}
}

@media only screen and (min-width: 1024px) {
#galleryV2 .galleryImage {width:31%; margin-left:3.5%;}
#galleryV2 .galleryImage:nth-child(2n+1) {clear:none; margin-left:3.5%;}
#galleryV2 .galleryImage:nth-child(3n+1) {clear:left; margin-left:0px;}
}

a.backToTop {position: absolute; top: -50px; right: 0px; font-family: 'Lato',sans-serif; color: #54575a; font-weight: 700; text-transform:uppercase; line-height:30px; font-size:16px;}
a.backToTop span {background-image:url(/wp-content/themes/onroute/assets/backToTop.png); display:block; width:30px; height:30px; float:right; margin-left:12px;transition: all .5s; }
a.backToTop:hover span {background-image:url(/wp-content/themes/onroute/assets/backToTop-hover.png);transition: all .5s;}



.flash .facility {position:relative;}
.flash .facility:hover:before {content: ""; position: absolute; top: 0; left: 0; width: 110px; height: 110px; background-color: #008656; border-radius: 10px;  z-index: -1; animation: pulse 1.5s ; animation-timing-function: ease-out;}

@keyframes pulse { 0% {transform: scale(1); opacity: .5;} 100% {transform: scale(1.3); opacity: 0;}}



/*#16 DRIVER WELFARE#*/

.welfare {float:left; width:100%; position:relative; margin:50px 0 40px 0;}
.welfareIntro {position:relative; text-align:center; background-color:#c2d500; float:left; width:125%; margin-left:-12.5%; padding:0 10% 20px 10%; cursor:pointer;}
.welfareIntro img {width:100px; margin-top:-50px; margin-bottom:10px;}
.welfareDetail {display:none; float:left; width:100%;}
.welfareDetail img {width:100%; margin-bottom:30px; margin-top:70px;}
.welfareDetail p {margin-bottom:15px;}
.active .welfareIntro:after {display: block; position: absolute; bottom: -30px; content: ''; left: 50%; width: 0; height: 0; margin-left: -30px; border-top: 30px solid #c2d500; border-left: 30px solid transparent; border-right: 30px solid transparent;}
.active .welfareDetail {display:block;}

@media only screen and (min-width: 768px) {
.welfare {margin:40px 0 0 0;}
.welfareIntro {float:left; width:100%; text-align:left; margin-left:0%; height:170px; border-radius:85px 0 0 85px; padding-left:210px;}
.welfareIntro img {width:170px; float:left; margin-top:0px; margin-bottom:0px; left:0px; position:absolute;}
.welfareIntro .intro {margin-top:30px;}
.welfareDetail {margin-top:50px;}
.welfareDetail img {width:280px; float:left; margin:0 70px 0 0;}
  }

@media only screen and (min-width: 1024px) {
#welfare {float:left; width:100%; margin-bottom:400px;}
.welfare {margin:0px 0 40px 0;}
.welfareIntro {width:68%;}
.active .welfareIntro:after {display: block; position: absolute; right: -30px; content: ''; left: 100%; top:50%; width: 0; height: 0; margin:-30px 0 0 0px; border-left: 30px solid #c2d500; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right:none;}
.welfareDetail {position:absolute; right:0px; width:25%; margin-top:0px;}
.welfareDetail img {margin:0 0 30px 0;}
}


@media only screen and (min-width: 1280px) {
.welfareIntro {width:66%;}
  }


/*#17 ONROUTE EXTRA#*/

#journey {float:left; width:100%; position:relative; }
#journey .journey {width:100%; float:left; background-color:#545759; padding:30px;}
#journey .journey img {margin-bottom:20px; height:80px;}
#journey .journey p {color:#fff; font-size:20px;}
#journey .journey p strong {font-size:28px;}
#journey .journey:first-child {background-color:#00814e; background-image:url(/wp-content/themes/onroute/assets/app-hand.png); background-position:bottom right -30%; background-size:auto 200px; min-height:300px;}
#journey .journey:first-child h4 {text-transform:none; color:#fff; font-weight:bold; font-size:22px; padding-bottom:20px; line-height:1.1em;}
#journey .journey:first-child h4 strong {font-size:40px; line-height:1.0em;}
#journey .journey:first-child p {color:#c2d500;  font-size:20px; line-height:24px;}
#journey .journey:first-child p strong {font-size:20px;}
#journey .journey:last-child {background-color:#00814e;}
#journey .journey:nth-child(3), #journey .journey:nth-child(5), #journey .journey:nth-child(7) {height:240px;}
#journey .journeyImage1 {background-image:url(/wp-content/themes/onroute/assets/journey1.jpg); background-size:cover; background-position:center center;}
#journey .journeyImage2 {background-image:url(/wp-content/themes/onroute/assets/journey2.jpg); background-size:cover; background-position:center center;}
#journey .journeyImage3 {background-image:url(/wp-content/themes/onroute/assets/journey3.jpg); background-size:cover; background-position:center center;}
ul.extra {padding-top:20px;}
ul.extra li {padding-left:80px; min-height:58px; padding-bottom:20px; line-height:1.2em;}
ul.extra li:nth-child(1) {background-image:url(/wp-content/themes/onroute/assets/bullet-download.png);}
ul.extra li:nth-child(2) {background-image:url(/wp-content/themes/onroute/assets/bullet-star.png);}
ul.extra li:nth-child(3) {background-image:url(/wp-content/themes/onroute/assets/bullet-trophy.png);}

@media only screen and (min-width: 480px) {
#journey .journey:first-child {background-position:bottom right -20px; background-size:auto 250px;}
  }

@media only screen and (min-width: 640px) {
#journey .journey {width:50%;  height:300px; padding:30px;}
#journey .journey:first-child {background-position:bottom -30px right -80px;}
#journey .journey:nth-child(3), #journey .journey:nth-child(5), #journey .journey:nth-child(7) {height:300px;}
#journey .journey:nth-child(3), #journey .journey:nth-child(7) {float:right;}
#journey .journey {}
  }

@media only screen and (min-width: 768px) {
#journey .journey {padding:50px;}
#journey .journey:first-child {padding:30px;}
#journey .journey:first-child {background-position:bottom -20px right -30px; background-size:auto 250px;}
  }

@media only screen and (min-width: 1024px) {
.copy.apps {margin-top:80px;}
.copy.apps img {clear:left;}
#journey {margin-top:-350px;}
#journey .journey {width:33.33%; height:320px;}
#journey .journey:nth-child(3), #journey .journey:nth-child(5), #journey .journey:nth-child(7) {height:320px;}
#journey .journey:first-child {margin-left:66.66%;}
#journey .journey:nth-child(3), #journey .journey:nth-child(7) {float:left;}
ul.extra {width:80%;}
  }

@media only screen and (min-width: 1280px) {
#journey .journey:first-child {background-position:bottom 0px right 0px; }
}

.screens::after {content:''; display:block; background-color:#c2d500; width:700px; height:700px; border-radius:350px; margin:-50px 0 0 -130px; z-index:-1; position:relative;}
.screen {margin-top:100px;}
.screen h4 {color:#008556; font-size:20px; font-weight:bold; margin-bottom:10px; text-transform:none; margin-left:20px; margin-right:60px;}
.screen p {margin-bottom:20px; margin-left:20px; margin-right:40px;}

.copy .buttonGroup {float:left; width:100%;}
.copy a.arrowButton {float:left; margin:0 40px 40px 0; display:inline-block; color:#fff; padding:15px 60px 15px 22px; font-size:20px; text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:1px; background-color:#c2d500; position:relative; background-position: center; transition: background 1.5s; background: #c2d500 radial-gradient(circle, transparent 1%, #c2d500 1%) center/100%; }
.copy a.arrowButton:hover {background-color: #00814e; background-size: 15000%; transition: background 1.5s; text-decoration:none;}
.copy a.arrowButton:after {display:block; content:''; width:19px; height:19px; background-image:url(/wp-content/themes/onroute/assets/icon-arrow.png); background-size:contain; background-repeat:no-repeat; position:absolute; right:20px; top:14px;}

.extraBackground {background-image:url(/wp-content/themes/onroute/assets/extra-background.jpg); background-size:cover;}

.faqs {float:left; width:100%;}
.faqs h4 {float:left; width: 100%; font-size: 22px; text-transform: none;border-top: 1px solid #c2d500; padding: 10px 10% 10px 0; cursor: pointer; background-image: url(/wp-content/themes/onroute/assets/faq-dropdown.png); background-position: right 10px center; font-weight: 300;}
.faqs h4.down {background-image:url(/wp-content/themes/onroute/assets/faq-dropdown-close.png);}
.faqs .answer { display: none; padding:20px 0 40px 0; float:left;}
.faqs .answer p {width:100%; float:left;}

@media only screen and (min-width: 1024px) {
  .faqs {width:75%;}
.faqs h4 {font-size: 28px;}
  .faqs .answer {width:90%;}
  }


/*#18 REFUEL#*/

.refuelBanner {height:500px; background-image:url(/wp-content/themes/onroute/assets/refuel-banner-small.jpg); background-position:top left; background-color:#02814f;}
.refuelBannerIce {height:500px; background-image:url(/wp-content/themes/onroute/assets/refuel-banner-ice-cream-small.jpg); background-position:top left; background-color:#02814f;}
.refuelHeader {width:100%; margin-top:220px;}
.refuelHeader h1 {font-family: rollerscript-rough, sans-serif; text-transform:none; font-size:52px; color:#fff; font-weight:300; line-height:1.0em; margin-bottom:20px;}
.refuelHeader p {font-size:28px; font-weight:700; color:#c2d500;}

.refuelItem {float:left; position:relative; width:100%; margin-bottom:30px; text-align:center;}
.refuelItem img {position:relative; z-index:2; width:140px;}
.refuelItem p {background-color:#c2d500; border-radius:10px; position:relative; float:left; width:100%; padding:95px 20px 20px 20px; margin-top:-85px; font-size:16px;}
.refuelItem p strong {font-size:24px; font-weight:700;}

@media only screen and (min-width: 640px) {
.refuelBanner {height:400px;}
.refuelBannerIce {height:400px;}
  }
  
@media only screen and (min-width: 768px) {
.refuelBanner {height:360px; background-image:url(/wp-content/themes/onroute/assets/refuel-banner.jpg); background-position:center center; }
.refuelBannerIce {height:360px; background-image:url(/wp-content/themes/onroute/assets/refuel-banner-ice-cream.jpg); background-position:center center; }
.refuelHeader {width:55%; margin-top:60px;}
.refuelHeader h1 {font-size:75px;}
.refuelHeader p {font-size:28px;}
  
.refuelItem {height:170px; text-align:left;}
.refuelItem img {position:relative; z-index:2; width:auto;}
.refuelItem p {background-color:#c2d500; border-radius:10px; position:absolute; top:20px; right:0px; height:130px; width:90%; padding:30px 0 0 130px; margin-top:0px; font-size:20px; }
.refuelItem p strong {font-size:28px; font-weight:700;}
  }


@media only screen and (min-width: 1024px) {
.refuelBanner {height:460px;}
.refuelBannerIce {height:460px;}
.refuelHeader {width:50%; margin-top:80px;}
.refuelHeader h1 {font-size:92px;}
.refuelHeader p {font-size:34px;}
  }


@media only screen and (min-width: 1280px) {
.refuelBanner { height:540px;}
.refuelBannerIce { height:540px;}
.refuelHeader {width:50%; margin-top:100px;}
.refuelHeader h1 {font-size:112px;}
.refuelHeader p {font-size:40px;}
  }

@media only screen and (min-width: 1333px) {
.refuelBanner .content {padding-left:0;}
.refuelBannerIce .content {padding-left:0;}
  }


.wpforms-form {float:left; width:100%; font-family: 'Lato', sans-serif; color:#54575a; font-weight:300;}
.wpforms-form .wpforms-field {padding:10px 0;}
.wpforms-form .wpforms-field input[type=text] {border-radius:0; border: 1px solid #989898;}
.wpforms-form .wpforms-field input[type=email] {border-radius:0; border: 1px solid #989898;}
.wpforms-form .wpforms-field input[type=tel] {border-radius:0; border: 1px solid #989898;}
button[type=submit]#wpforms-submit-927 {background-color: #00814e; color: #fff; font-size: 18px; text-align: center; padding: 10px 50px; font-weight: bold;  text-transform: uppercase; border-radius:0px;}


#cookie-notice span {font-size:14px; color:#fff; font-family: 'Lato', sans-serif;}
#cookie-notice #cn-notice-buttons button.cn-button {color:#54575a;}