@font-face {
  font-family:'icomoon';
  src:url('../fonts/icomoon.eot?l8j70p');
  src:url('../fonts/icomoon.eot?#iefixl8j70p') format('embedded-opentype'),
      url('../fonts/icomoon.woff?l8j70p') format('woff'),
      url('../fonts/icomoon.ttf?l8j70p') format('truetype'),
      url('../fonts/icomoon.svg?l8j70p#icomoon') format('svg');
  font-weight:normal;
  font-style:normal;
}


*, *::before, *::after { border:0 none; box-sizing:border-box; }

body { line-height:1.3em; }
html { -webkit-text-size-adjust: 100%; }

h1, h2, h3, h4, h5 { text-align:left; }

p { line-height:1.6em; }

/*embed, object, video { max-width:100%; width:100%; height:auto; }
img { max-width:100%; width:100%; }
#wrapper img { height:auto; }*/

span.button { display:inline-block; height:auto; margin:0; padding:0; background:none; }
span.button a, span.button input { display:block; height:auto; padding:0.25em 0.5em; line-height:1.5em; background:none; border:0 none; }

/* Buttons */
a.glossy, button.glossy, span.button, span.download-button {
font-weight:normal;

background:#ff6c00;
background:-webkit-gradient(linear, left top, left bottom, color-stop(30%, #ff6c00), color-stop(100%, #f8b868));
background:-webkit-linear-gradient(top, #ff6c00 30%,#f8b868 100%);
background:-moz-linear-gradient(top, #ff6c00 30%, #f8b868 100%);
background:-o-linear-gradient(top, #ff6c00 30%,#f8b868 100%);
background:-ms-linear-gradient(top, #ff6c00 30%,#f8b868 100%);
background:linear-gradient(to bottom, #ff6c00 30%, #f8b868 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6c00', endColorstr='#f8b868', GradientType=0);

position:relative;
color:#333333;
white-space:nowrap;

border:1px solid #a97148;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2);
box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2);

text-shadow:1px 1px 0 rgba(200, 200, 200, 0.5);
text-decoration:none;

}

a.glossy, button.glossy, span.download-button { padding:0.25em 1em; }

.glossy::before, span.button::before, span.download-button::before {
display:block;
content:"";
position:absolute;
top:0;
left:1%;
width:98%;
height:30%;

-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;

background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(8%,rgba(255, 255, 255, 0.7)), color-stop(100%,rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 0.7) 8%,rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 0.7) 8%,rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(255,255,255,0.7) 8%,rgba(255, 255, 255, 0) 100%);
background:linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}

a.glossy img, button.glossy img, span.download-button img { vertical-align:text-bottom !important; }

.glossy.grey {
background:#ff6c00;
background:-webkit-gradient(linear, left top, left bottom, color-stop(30%, #808080), color-stop(100%, #cacaca));
background:-webkit-linear-gradient(top, #808080 30%,#cacaca 100%);
background:-moz-linear-gradient(top, #808080 30%, #cacaca 100%);
background:-o-linear-gradient(top, #808080 30%,#cacaca 100%);
background:-ms-linear-gradient(top, #808080 30%,#cacaca 100%);
background:linear-gradient(to bottom, #808080 30%, #cacaca 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#cacaca', GradientType=0);

border:1px solid #666666;
}

span.download-button { width:300px; height:auto; padding:0.5em 1em; font-size:1.2em; -webkit-box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.5); box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.5); }
span.download-button a { font-size:0.9em; text-shadow:1px 1px 0 rgba(90, 90, 90, 0.5); }


.main a.glossy, .main button.glossy { font-size:1.2em; }

div.csc-default ul { margin-left:1em; }

div.csc-textpic figure.csc-textpic-image { float:left; }
div.csc-textpic figure.csc-textpic-image { margin-right:10px; }
div.csc-textpic figure.csc-textpic-image.csc-textpic-last { margin-right:0; }
div.csc-textpic .csc-textpic-imagewrap figure.csc-textpic-image { margin-bottom:10px;  }

/*div.csc-textpic.csc-textpic-left > div.csc-textpic-imagewrap { margin-right:-10px; }*/
/*div.csc-textpic.csc-textpic-right > div.csc-textpic-imagewrap { margin-left:-10px; }*/


DIV.csc-textpic .csc-textpic-imagewrap FIGURE,
DIV.csc-textpic FIGURE.csc-textpic-imagewrap,
FIGCAPTION.csc-textpic-caption { display:block; }
DIV.csc-textpic-left .csc-textpic-imagewrap { float:none; }
DIV.csc-textpic DIV.csc-textpic-imagecolumn { display:inline-block; float:none; vertical-align:top; }
/*.csc-default { clear:both; }*/




/* Station Map Overview */
#maincontent > div#c78 { display:none; }

#header::after,
#headnav::after,
#company::after,
#content::after,
#footer::after { font-size:0; line-height:0; clear:both; display:block; content:"."; height:0; overflow:hidden; }


.nav-toggle { display:none; }
.nav-toggle::after { content:"\e9bd"; font-family:'icomoon'; }

.mobile-only,
.tablet.portrait-only,
.tablet.landscape-only { display:none; }

#mainnav li.language { padding-left:20px; }
#mainnav li.language a.language.de,
#mainnav li.language a.language.fr { background-position:left center; background-repeat:no-repeat; background-image:url('/fileadmin/gulf/images/flag_de.gif'); }
#mainnav li.language a.language.fr { background-image:url('/fileadmin/gulf/images/flag_fr.gif'); }

#wrapper { width:100%; max-width:1000px; padding:0; }

#headnav { margin-bottom:1em; height:unset; }
#headnav .nav-toggle { float:right; /*height:1.4em;*/ font-size:2.5em; /*line-height:2em;*/ color:#0f3b89; }
#headnav .nav-toggle:hover { color:#f56b16; }

#topnav { height:unset; }
#topnav li { padding-left:1em; }
#topnav a { height:1.4em; line-height:2em; font-size:unset; background-position:left bottom; }

#claim { margin-left:200px; line-height:1.5em; margin-bottom:-1.5em; }

#company { position:relative; height:unset; }

#logo { float:left; width:200px; /*20%; min-width:200px;*/ }
#locator { float:right; position:relative; display:none; width:80px; height:160px; margin-top:20px; overflow:hidden; text-align:center; background:transparent url('../images/station_locator.jpg') center top no-repeat; }
#locator a { display:inline-block; width:100%; height:100%; font-weight:bold; color:#0f3b89; }
#locator a:hover { color:#f56b16; }
#locator span { position:absolute; bottom:1em; left:0; right:0; }
#locator span::after { content:"»"; padding-left:0.5em; }

#rotator { position:relative; top:20px; width:auto; height:160px; }
#slider { width:600px; float:right; }
#prices { float:right; width:200px; /*20%; min-width:200px;*/ height:160px; margin-top:20px; }
#prices img, .prices img { width:auto; }

#orderb { position:absolute; display:none; width:59px; }

#content { position:relative; }

#left_column, #right_column { /*width:20%; min-width:200px; */}
#left_column { float:left; /*position:relative;*/ }
#right_column { float:right; }
#maincontent { float:none; width:auto; overflow:hidden; }

#header,
#content,
#footer { padding:0; }

#left_column .nav-toggle { color:#0f3b89; }
#left_column .nav-toggle::after { content:"\ea3e"; font-size:1.2em; line-height:2.2em; }
.leftnav-open #left_column .nav-toggle::after { content:"\ea3a"; }


#header { margin-bottom:0.5em; }

#navigation { height:unset; margin:0; }

#mainnav { height:unset; background:none; border-bottom:1px solid #afafaf; }
#mainnav li.language { display:none; }

#breadcrumbs { padding:0; margin:0.5em 0; }

#leftnav { margin-bottom:1em; }

#searchform .formbody, #searchform input[type="text"] { height:unset; }

#station_nav { list-style-type:none; margin:0 0 1em; padding:0; background-color:#e6e6e6; }
#station_nav li { display:block; }
#station_nav li a { display:block; padding:0 1em; font-weight:normal; line-height:3em; color:#4d4d4d; }
#station_nav li:hover { background-color:#f17b00; }
#station_nav li:hover a { color:#ffffff; }

#bottomnav li { display:inline-block; line-height:2em; }
#bottomnav li::after { content:"|"; }
#bottomnav li:last-child::after { content:""; }

#map_canvas { max-width:560px !important; width:100% !important; margin-bottom:1em; }

.oilprice-box { height:auto; margin-bottom:1em; padding:1em; background:none; background-color:#f93; line-height:1.5em; color:#0f3b89; text-align:left; }
.oilprice-box .prices { display:block; line-height:1.3em; column-count:2; -moz-column-count:2; -webkit-column-count:2; }
.oilprice-box dl { position:relative; /*display:inline-block;*/ width:100%; height:3.5em; border-bottom:1px solid #ffffff; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid-column; /*white-space:nowrap;*/ }
.oilprice-box dt { /*float:left;*/ position:absolute; bottom:0.25em; width:70%; }
.oilprice-box dd { /*float:right;*/ position:absolute; bottom:0.25em; right:0; }
.oilprice-box .oilprice-hint { display:block; margin-top:0.5em; font-size:0.83em; text-align:right; }

.greyBox { padding:1.5em; margin-bottom:1em; }

.tx-powermail .powermail_fieldset { margin-bottom:0; }

/* Tablet Landscape */
@media only screen and (max-width: 1023px) {
	.tablet.landscape-only { display:block; }

	.oilprice-box.mobile-only { display:block; }

	#wrapper { max-width:768px; }
	#right_column { display:none; float:none; }

	#headnav,
	#breadcrumbs,
	#content,
	#footer { padding:0 0.5em; }

	#maincontent { padding:0 0 0 1em; }
}

/* Tablet Portrait */
@media only screen and (max-width: 959px) {

}

/* Tablet Portrait */
@media only screen and (max-width: 767px) {
	.hide-on-mobile { display:none; }
	.mobile-only { display:block; }

	/*#topnav,*/
	#claim,
	#rotator,
	#calculator,
	#searchbox,
	#left_column > div,
	#right_column > div,
	div.tablet.landscape-only { display:none; }

	#topnav li,
	#maincontent > div#c77 { display:none; }

	div.tablet,
	/*#topnav li.language,*/
	#left_column > div#leftnav-wrapper,
	#right_column > div.tablet,
	#locator { display:block; }

	.nav-toggle { display:block; }

	#wrapper { max-width:480px; }

	#orderb { display:block; bottom:2px; left:148px; }

	#topnav li.language { margin-right:1em; }

	#navigation { position:absolute; top:2em; right:0; width:200px; height:auto; overflow:visible; }

	#content { display:-webkit-flex; /* Safari */ display:flex; flex-direction:column; -webkit-flex-direction:column; }

	#left_column,
	#maincontent,
	#right_column { float:left; width:100% }

	#left_column { order:1; -webkit-order:1; }
	#maincontent { order:2; -webkit-order:2; }
	#right_column { order:3; -webkit-order:3; display:block; }

	#mainnav { position:relative; display:none; height:auto; background-color:#ffffff; border:1px solid #234324; z-index:9999; }
	#mainnav li { float:none; position:unset; display:block; width:auto; text-align:left; }
	#mainnav li a { padding:0 1em; font-size:1.5em; line-height:2em; }
	#mainnav li.active a { border:0; }
	#mainnav li.language { display:block; }
	#mainnav .orderButton { display:none; }

	.menu-open #mainnav { display:block; }

	#leftnav-wrapper .nav-toggle { position:absolute; top:0; right:0; padding:0 1em 0 2em; line-height:3em; z-index:9990; }

	#leftnav li { }
	#leftnav li a { display:block; line-height:3em; }
	#leftnav li ul li.active a,
	#leftnav li ul li.current a { color:unset; }
/*	#leftnav li:first-child a,
	#leftnav li.current a { display:block; }*/
	#leftnav li.current > ul { display:none; }
	#leftnav li ul li ul li.current a { background-color:#cccccc !important; color:#4d4d4d !important; }

	#leftnav-wrapper.isCurrent .nav-toggle { color:#ffffff; }
	.leftnav-open #leftnav-wrapper.first .nav-toggle { color:#ffffff !important; }
	.leftnav-open #leftnav-wrapper.isCurrent .nav-toggle { color:#0f3b89; }

	#leftnav-wrapper.isActive #leftnav li a,
	#leftnav-wrapper.isCurrent #leftnav li a,
	#leftnav-wrapper.noActives #leftnav li a { display:none; }

	#leftnav-wrapper.isActive #leftnav li.current a,
	#leftnav-wrapper.isCurrent #leftnav li.current a,
	#leftnav-wrapper.noActives #leftnav li.first a { display:block; }

	.leftnav-open #leftnav li a,
	.leftnav-open #leftnav li ul { display:block !important; }
	.leftnav-open #leftnav li ul li ul li.current a { background-color:#b8b8b8 !important; color:#ffffff !important; }

	#maincontent { padding:0; }

	.w50p,
	.greyBox { width:100%; }

	#station_nav { column-count:2; -moz-column-count:2; -webkit-column-count:2; }
	#station_nav li { -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid-column; white-space:nowrap; }

	#map_canvas { width:480px !important; height:450px !important; }
	#map_canvas #bodyContent { font-size:0.9em; }
	#map_canvas #bodyContent > br,
	#map_canvas #bodyContent > img { display:none; }
	#map_canvas #bodyContent h2 { font-size:1.2em; }
	#map_canvas #bodyContent p { line-height:1.2em; }

	div.csc-textpic .csc-textpic-imagewrap figure.csc-textpic-image { margin-right:10px; }

	.tx-powermail .powermail_fieldset .powermail_fieldwrap_content * { box-sizing:border-box !important; }

	.tx-powermail fieldset.powermail_fieldset .powermail_fieldwrap span.button { margin-left:0; }
	.tx-powermail fieldset.powermail_fieldset .powermail_fieldwrap_content { width:100%; }
	.tx-powermail fieldset.powermail_fieldset .powermail_fieldwrap_content p { margin-left:0 !important; }
	.tx-powermail fieldset.powermail_fieldset .powermail_fieldwrap_content > div { width:100% !important; }
	.tx-powermail fieldset.powermail_fieldset .powermail_fieldwrap .greyBox { height:auto; }
	.tx-powermail .powermail_fieldset .powermail_field { width:100% !important; }
	.tx-powermail .powermail_fieldset .parsley-errors-list { margin-left:0; }

	fieldset.powermail_fieldset label, fieldset.powermail_fieldset fieldset legend { float:none; display:block; margin-right:0; }
}

/* Smartphone Landscape */
@media only screen and (max-width: 667px) {

}

/* Smartphone Portrait */
@media only screen and (max-width: 479px) {
	#wrapper { max-width:320px; }

	#logo { float:none; width:100%; height:50px; margin-bottom:3em; overflow:hidden; }
	#logo img { width:100%; }
	#prices { float:left; margin-top:0; }
	#locator { width:120px; margin-top:0; }
	#orderb { top:20px; left:50%; margin-left:-30px; }

	#mainnav { position:relative; z-index:9999; }

	#map_canvas { width:320px !important; height:300px !important; }




	.oilprice-box .prices { column-count:1; -moz-column-count:1; -webkit-column-count:1; }

	.csc-textpic figure.csc-textpic-image,
	.csc-textpic-imagewrap { /*float:none !important;*/ }

	.csc-textpic-text { margin:0 !important; }

	.csc-default.floatLeft,
	.csc-default.floatRight { float:none; }
	.csc-default.width50p { width:100%; }

}

@media only screen and (max-width: 767px) {
	.csc-textpic-text img,
  .csc-textpic-imagewrap img {
    width: 100%;
    height: auto;
  }

  .home ul.section-list li {
    float: none;
    display: block;
    width: 100%;
    margin-right: 0;
  }

  ul.formcheck {
    width: 100%;
    margin-left: 0;
}