@font-face {
	font-family: 'webly';
	src: url('../fonts/WeblySleekUISemilight.eot?') format('eot'), 
	     url('../fonts/WeblySleekUISemilight.woff') format('woff'), 
	     url('../fonts/WeblySleekUISemilight.ttf')  format('truetype'),
	     url('../fonts/WeblySleekUISemilight.svg#WeblySleekUISemilight') format('svg');
}

@font-face {
	font-family: 'weblybold';
	src: url('../fonts/WeblySleekUISemibold.eot?') format('eot'), 
	     url('../fonts/WeblySleekUISemibold.woff') format('woff'), 
	     url('../fonts/WeblySleekUISemibold.ttf')  format('truetype'),
	     url('../fonts/WeblySleekUISemibold.svg#WeblySleekUISemibold') format('svg');
}

/* CSS RESET */
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

* { }
html, body { font-family: 'webly', arial; font-size: 14px; height: 100%; margin: 0; color: #333333; }
a { text-decoration: none; color: #5abee6; }
a:hover, a:active {  }
img { border: 0; }

/* HEADERS */

h2 { font-size: 18px; margin: 40px 0; }
h3 { font-size: 16px; margin: 20px 0; }

.clear { clear: both; }

.btn { display: inline-block; border: 0; cursor: pointer; font-size: 14px; color: #ffffff; padding: 9px 12px 10px 12px; }
.btn.green { background: #8cd248; }
.btn.with-icon { padding: 9px 33px 10px 14px; position: relative; }
.btn.with-icon.large { padding-top: 14px; padding-bottom: 13px; }

.btn-icon { display: inline-block; width: 16px; height: 16px; background: url(../images/sprite.png) 0px 0px no-repeat transparent; }
.btn-icon.arrow-right { background-position: right -7px; position: absolute; right: 11px; top: 9px; }
.btn.with-icon.large .btn-icon.arrow-right { top: 13px; }

.icon { display: inline-block; width: 55px; height: 62px; background: url(../images/sprite.png) 0px 0px no-repeat transparent; }
.icon.mobile { background-position: -1px -156px; }
.icon.provider { background-position: -67px -156px; }
.icon.fuel { background-position: -133px -156px; }
.icon.mall { background-position: -194px -156px; }
.icon.references { background-position: -256px -156px; }
.icon.login-icon { background-position: -323px -156px; }
.icon.contact { background-position: -386px -156px; }
.icon.profile { background-position: -450px -156px; }
.icon.register { background-position: -514px -156px; }
.icon.mission { background-position: -577px -156px; }

#wrap { min-height: 100%; }
#main { overflow: hidden; padding-bottom: 172px; width: 100%; }  /* must be same height as the footer */
#container { width: 1024px; margin: 0 auto; }
#container ul li { font-size: 16px; margin-bottom: 10px; list-style-position: outside; line-height: 21px; margin-left: 20px; padding-left: 10px; }
#header { float: left; width: 100%; background: url(../images/header-bg.png) center center no-repeat transparent; height: 110px; }
#header .inside { margin: 0 auto; width: 1024px; }
#header .logo { float: left; margin: 20px 0px 0px 0px; }
#header .logo a { display: inline-block; width: 105px; height: 55px; background: url(../images/sprite.png) -154px -11px no-repeat transparent; }
#header .phone { float: right; margin: 31px 7px 0px 0px; }
#header .phone a { display: inline-block; width: 18px; height: 32px; background: url(../images/call-icon.png) left 0px no-repeat; margin-right: 0px; position: relative; transition: width .5s; -moz-transition: width .5s; -webkit-transition: width .5s; -o-transition: width .5s; }
#header .phone a:hover { width: 139px; }
#header .phone a img { position: absolute; top: 5px; left: 7px; z-index: 1; }
#header .phone a span { display: inline-block; width: 13px; height: 32px; background: url(../images/call-icon.png) right 0px no-repeat; position: absolute; right: -13px; }
#header .tabs { float: left; margin: 28px 16px 0px 40px; }
#header .tabs ul { float: left; padding: 0; margin: 0; }
#header .tabs ul li { float: left; padding: 0; margin: 0 18px; list-style: none; }
#header .tabs ul li a { display: inline-block; padding: 10px 0 4px; font-size: 15px; text-transform: uppercase; color: #333333; }
#header .tabs ul li a:hover { color: #8cd248; }
#header .tabs ul li.active a { border-bottom: 1px solid #8cd248; }
#header .tabs ul li.myaccount-tab { display: none; }
#content { float: left; width: 100%; }

#footer { position: relative; margin-top: -112px; height: 112px; clear: both; background: #333333; } /* negative value of footer height */
#footer .inside { width: 1024px; margin: 0 auto; }
#footer .block { float: left; padding: 5px 40px 5px 40px; border-right: 1px solid #222222; border-left: 1px solid #454545; height: 62px; line-height: 21px; font-size: 12px; margin-top: 20px; }
#footer .block.first { padding-left: 0; border-left: 0; }
#footer .block.last { border-right: 0; }
#footer .block li { list-style: none; color: #c7c7c7; font-size: 13px; margin-bottom: 0; }
#footer .block li label { width: 69px; font-weight: bold; display: inline-block; }

#left { float: left; width: 290px; margin-top: 30px; }
#left h2 { float: left; width: 100%; margin: 40px 0px 44px; padding: 0; text-transform: uppercase; font-size: 18px; }
#left h2.account { margin-bottom: 20px; margin-top: 13px; padding-bottom: 20px; border-bottom: 1px solid #8cd248; }
#left ul { float: left; width: 100%; padding: 0; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #ffffff; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); }
#left ul li { border-bottom: 1px solid #f0f0f0; float: left; width: 100%; padding: 0px 0px; margin: 0px 0px; list-style: none; position: relative; }
#left ul li span.please-login { display: none; padding-left: 2px; }
#left ul li a { display: table-cell; height: 66px; font-size: 16px; width: 244px; vertical-align: middle; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; font-size: 16px; text-transform: uppercase; color: #000000; }
#left ul li a.tab-icon { background: url(../images/sprite.png) left 0px no-repeat transparent; }
#left ul li a.tab-icon.mobile { background-position: -4px -248px; }
#left ul li a:hover.tab-icon.mobile,#left ul li.active a.tab-icon.mobile { background-position: -622px -248px; }
#left ul li a.tab-icon.provider { background-position: -4px -317px; }
#left ul li a:hover.tab-icon.provider,#left ul li.active a.tab-icon.provider { background-position: -622px -317px; }
#left ul li a.tab-icon.fuel { background-position: -4px -382px; }
#left ul li a:hover.tab-icon.fuel,#left ul li.active a.tab-icon.fuel { background-position: -622px -382px; }
#left ul li a.tab-icon.mall { background-position: -4px -450px; }
#left ul li a:hover.tab-icon.mall,#left ul li.active a.tab-icon.mall { background-position: -622px -450px; }
#left ul li a.tab-icon.references { background-position: -4px -518px; }
#left ul li a:hover.tab-icon.references,#left ul li.active a.tab-icon.references { background-position: -622px -518px; }
#left ul li a:hover, #left ul li.active a { color: #8cd248; background-color: #f8fdf8; }
#left ul li a span { position: absolute; right: 0; top: 0px; height: 66px; display: inline-block; width: 46px; background: url(../images/green-gradient-bg.png) left center repeat-x transparent; }
#left ul li a span i { display: inline-block; width: 12px; height: 18px; background: url(../images/sprite.png) -664px -48px no-repeat transparent; position: absolute; z-index: 1; right: 16px; top: 22px; }
#left ul li.first a { border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; }
#left ul li.first a span { border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; }
#left ul li.last { border-bottom: 0; }
#left ul li.last a { border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; }
#left ul li.last a span { border-radius: 0 0 5px 0; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; }
#left p.label { margin-bottom: 5px; font-weight: bold; }

#right { float: right; width: 686px; margin: 30px 0 0 48px; }
#right.full { width: 100%; margin: 30px 0 0 0; }
#right h1 { margin: 0px 0px 40px 75px; padding: 0px 0px; font-size: 24px; text-transform: uppercase; font-family: 'weblybold'; line-height: 58px; position: relative; border-bottom: 1px solid #8cd248; }
#right h1 .icon { position: absolute; left: -75px; top: 3px; }
#right p { line-height: 26px; font-size: 16px; }

.main-story { float: left; width: 100%; background: center center no-repeat #edf1f3; height: 427px; }
.main-story .container { width: 1024px; margin: 0 auto 0; }
.main-story .background { float: left; width: 1024px; height: 439px; background: url(../images/main-pic.png) center bottom no-repeat transparent; }
.main-story .logo { float: left; margin: 33px 0px 0px 0px; }
.main-story .logo a { display: inline-block; width: 134px; height: 72px; background: url(../images/sprite.png) 0px 0px no-repeat transparent;  }
.main-story .phone { float: right; margin: 17px 13px 0px 0px; }
.main-story .phone a { display: inline-block; width: 18px; height: 32px; background: url(../images/call-icon.png) left 0px no-repeat; margin-right: 0px; position: relative; transition: width .5s; -moz-transition: width .5s; -webkit-transition: width .5s; -o-transition: width .5s; }
.main-story .phone a:hover { width: 139px; }
.main-story .phone a img { position: absolute; top: 5px; left: 7px; z-index: 1; }
.main-story .phone a span { display: inline-block; width: 13px; height: 32px; background: url(../images/call-icon.png) right 0px no-repeat; position: absolute; right: -13px; }
.main-story .tabs { float: right; margin: 13px 16px 0px 0px; }
.main-story .tabs ul { float: left; padding: 0; margin: 0; }
.main-story .tabs ul li { float: left; padding: 0; margin: 0 18px; list-style: none; }
.main-story .tabs ul li a { display: inline-block; padding: 10px 0 4px; font-size: 15px; text-transform: uppercase; color: #333333; }
.main-story .tabs ul li a:hover { color: #8cd248; }
.main-story .tabs ul li.active a { border-bottom: 1px solid #8cd248; }
.main-story .usp { float: left; margin: 72px 0px 0px 0px; width: 326px; }
.main-story .usp ul { margin: 0; padding: 0; }
.main-story .usp .subtitle { float: left; width: 100%; text-align: right; font-size: 20px; font-family: 'weblybold'; color: #bdbdbd; }
.main-story .usp .title { float: left; width: 100%; text-align: right; font-size: 22px; font-family: 'weblybold'; color: #6ec6eb; text-transform: uppercase; margin-top: 4px; }
.main-story .usp .description { float: left; width: 100%; text-align: right; font-size: 14px; line-height: 21px; color: #333333; margin-top: 6px; }
.main-story .usp .forward { float: left; width: 100%; text-align: right; margin-top: 30px; }
.main-story .usp .forward a { display: inline-block; width: 103px; height: 28px; background: url(../images/sprite.png) -1px -98px no-repeat transparent; }
.main-story .usp .please-login { display: none; float:right; margin-top: 8px; }

.tabs .menu-icon { width: 32px; height: 32px; background: url(../images/menu-icon.png) 0px 0px; position: absolute; top: 40px; right: 40px; display: none; }

.boxes { float: left; width: 100%; }
.box-row { display: inline-block; }
.box-row .please-login { display: none; float:left; text-align: center; width: 100%; position: absolute; width: 293px; bottom: -16px; font-size: 16px; }
.boxes .one { float: left; width: 290px; padding: 40px 77px 0 0; position: relative; }
.boxes .one.last { padding-right: 0; }
.boxes .one .icon { float: left; }
.boxes .one .title { float: left; width: 213px; border-bottom: 1px solid #8cd248; height: 50px; display: table-cell; vertical-align: middle; padding: 0px 0px 10px 22px; font-size: 20px; line-height: 55px; }
.boxes .one .title.double { line-height: 24px; }
.boxes .one .description { float: left; font-size: 16px; line-height: 26px; margin-top: 20px; width: 100%; }
.boxes .one .image { float: left; width: 100%; margin-top: 20px; }
.boxes .one .image img {  }
.boxes .one .login { float: left; width: 100%; margin-top: 5px; }
.boxes .one .login .row { float: left; width: 100%; margin-top: 10px; }
.boxes .one .login .row.content-right { text-align: right; }
.boxes .one .login .row label { float: left; width: 76px; margin: 7px 0; line-height: normal; }
.boxes .one .login .row input { float: left; width: 192px; border: 1px solid #e7e7e7; padding: 7px 10px; }
.boxes .one .login .row button {  }
.boxes .one .login .row a.register { margin-right: 10px; }
.boxes .one .login .row a.forgotten { margin-top: 10px; font-size: 12px; display: inline-block; }
.boxes .one .login .error { color: red; font-size: 12px; width: 192px; margin-left: 76px; }
.boxes .one .login .loading { font-size: 12px; width: 192px; margin-left: 76px; }
.boxes .one .account span.label { font-weight: bold; line-height: normal; }
.boxes .one .account .row { float: left; width:100%; margin-bottom: 10px; }
.boxes .one .account .row.first { margin-top: 20px; }
.boxes .one .account .row.last { margin-top: 2px; margin-bottom: 0; }
.boxes .one .account .row div.left { float: left; }
.boxes .one .account .row div.right { float: right; }

.form { float: left; width: 100%; }
.form .form-group { float: left; }
.form .form-group:first-child { margin-bottom: 40px; }
.form .form-group .title { font-weight: bold; font-size: 25px; text-transform: uppercase; margin: 20px 0; }
.form .row { float: left; width: 100%; margin: 5px 0 0 0; overflow: auto; }
.form .row.other { display:none; }
.form .row.error input { border: 1px solid #FF0000; }
.form .row.error label { color: #333333 !important; }
.form .row.error input[readonly="readonly"] { color: #FF0000; }
.form .row.error select { border: 1px solid #FF0000; }
.form .row .data { float: left; }
.form .row .data p { margin: 5px 0 10px; }
.form .row .error-row { float: left; margin: 7px 0 0 20px; color: red; font-size: 12px; }
.form .row.buttons { float: left; width: 857px; margin: 8px 0 0 167px; }
.form .row .captcha { float: left; margin-left: 170px; width: 320px; }
.form label { float: left; width: 150px; margin: 8px 20px 5px 0; font-size: 16px; line-height: normal; }
.form label.for-checkbox { position: relative; top: -2px; left: 3px; margin: 0; width: 299px;  font-weight: normal; }
.form .field { float: left; width: 318px; }
.form .description { float: left; width: 300px; margin-top: 5px; font-size: 12px; color: #777777; padding-bottom: 5px; }
.form .checkbox { float: left; margin-left: 170px; }
.form .row .description-checkbox { clear:both; margin-left: 170px; }
.form .text { padding: 8px; background: #fbfbfb; border: 1px solid #e7e7e7; width: 300px; }
.form .text.gray { color: #777777 !important; }
.form .text.half { width: 150px; }
.form .text.address-1 { width: 28px; padding-left: 2px; padding-right: 2px;  }
.form .text.address-2 { width: 100px; }
.form .text.address-3 { width: 140px; }
.form .text.address-1.error { border: 1px solid #FF0000; color: #333333 !important; }
.form .text.address-2.error { border: 1px solid #FF0000; color: #333333 !important; }
.form .text.address-3.error { border: 1px solid #FF0000; color: #333333 !important; }
.form .text.phone-1 { width: 15px; }
.form .text.phone-2 { width: 15px; }
.form .text.phone-3 { width: 120px; }
.form .text.phone-1.error { border: 1px solid #FF0000; color: #333333 !important; }
.form .text.phone-2.error { border: 1px solid #FF0000; color: #333333 !important; }
.form .text.phone-3.error { border: 1px solid #FF0000; color: #333333 !important; }
.form .select { padding: 8px; background: #fbfbfb; border: 1px solid #e7e7e7; width: 318px; }

/* CONTACT PAGE */

.contact-data { float: left; }
.contact-data h2 { margin-top: 0; margin-bottom: 55px; }
.contact-data p { margin: 20px 0; }
.contact-data .employer { display: table; }
.contact-data .employer.first { margin-top: 60px; margin-bottom: 22px; }
.contact-data .employer .photo { float: left; }
.contact-data .employer .photo img { width: 112px; }
.contact-data .employer .details-container { display: table-cell;  text-align: left; vertical-align: middle; }
.contact-data .employer .details-container .details { display: inline-block; float: left; margin-left: 30px; }
.contact-data .employer .details-container .details  p { margin: 0; padding: 0; }
.contact-data .employer .details-container  .details p.name { font-size: 18px; font-weight: bold; }
.contact-data .employer .details-container  .details p.phone { font-size: 18px; }
.map { float: right; }

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

/* MISC */

.error { color: red; }
.row-space { width: 100%; margin-bottom: 20px; }
.row-space-2 { margin: 10px 0; }
.row-space-3 { margin: 10px 0 40px 0; }
label { font-weight: bold; line-height: normal; }
.p-1 { margin-top: 0 !important; margin-bottom: 10px !important; }
.p-2 { margin-bottom: 40px !important; }
.pull-left { float:left; }
.pull-right { float:right; }
.full-width { width: 100%; }
.indent-1 { margin-left: 40px; }
.init-hide { display:none; }
.display-table { display: table; }
.display-cell { display: table-cell; }
.display-row { display: table-row; }
.a-divider { color: #5abee6; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* TABLE */

table { border: 1px solid #DDDDDD; 	border-collapse: collapse; }
table tr { }
table th { background-color: #8cd248; padding: 10px 5px; }
table th, table td { text-align: center; }
table td { border: 1px solid #DDDDDD; padding: 5px; }

/* PARAGRAPH */

p { margin: 10px 0; }
p.info { font-size: 13px !important; font-style: italic; }

/* UL */

ul li { font-size: 16px; margin-bottom: 10px; list-style-position: inside; line-height: 21px; }

/* OLD BROWSER WARNING */

#old-browser .warning { text-align: center; color: red; padding: 5px; }

/* ACCOUNT BOX COMMON (for index and account pages*/

.account-header { margin-top: 7px; width: 100%; }
.account-header .cart-img { height: 16px; position: relative; top: 2px; } 
.account-header .table-cell { vertical-align: middle; }
.account-header .cart { font-size: 12px !important; font-weight: normal !important; }
.account-header .cart.display-cell { vertical-align: middle; }
.account-header .cart.empty { cursor: default; }
.account-buttons { display: table; width: 100%; margin-top: 17px !important; }
.account-buttons .display-cell { text-align: left; vertical-align: middle; }

/* ACCOUNT INDEX */

.account-index .account-header { display: table !important; margin-top: 0; padding-bottom: 0 !important; }

/* IN CART TABLE */

.cart-table { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 20px; }
.cart-table .display-row:first-child .display-cell { background-color: #8cd248; font-weight: bold; height: 30px; }
.cart-table .display-row:not(:first-child) { height: 100px; }
.cart-table .display-row:last-child { border-collapse: collapse; border-top: 1px dashed #DDDDDD; }
.cart-table .display-row.feedback-row { display: none; background-color: red; height: 40px; }
.cart-table .display-cell { padding: 7px 15px; vertical-align: middle; border-bottom: 1px dashed #DDDDDD; } 
.cart-table .display-row.feedback-row { border-bottom: 0; }
.cart-table .display-row:first-child .display-cell, .cart-table .display-row:last-child .display-cell { border: 0; }
.phone-number-warning {  border: 1px dotted #dddddd; font-style: italic; margin-top: 12px; padding: 5px 12px; }

/* SITE - MOBILE */

table.rates-table { width: 100%; overflow-y: scroll; }
table.rates-table th { vertical-align: middle; }
table.rates-table tr td:first-child { padding: 5px 5px; }
table.rates-table td { padding: 5px 20px; vertical-align: middle; }

/* CART */

.cart-table .price { width: 80px; text-align: center; }
.cart-table .quantity { width: 80px; text-align: right; }
.cart-table .quantity span { position: relative; top: 1px; }
.cart-table input.inp-quantity { margin-right: 10px; padding: 5px 10px; text-align: right; width: 30px; }
.cart-table input.inp-quantity.error, #phone-number.error { border: 1px solid #FF0000; }
#cart-status { margin-bottom: 40px; min-height: 26px; }
#cart-status-in-cart span.quantity { font-weight: bold; }
.phone-number-row { margin-left:20px; margin-top: 10px; font-style: italic; border-bottom: 0 !important; }
.phone-number { border: 1px solid #DDDDDD; padding: 5px 10px; margin: 0 10px; }
.phone-number.error { border: 1px solid #FF0000; color: #333333 !important; }
.phone-number-error { color: #FF0000; }
.cart .feedback-container { margin-top: 10px; height: 50px; }

/* FINALIZE ORDER */

.finelize-order h2 { text-transform: uppercase; margin: 0 0 20px 0; }
.finelize-order .box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block-inline; float: left; margin-bottom: 30px; padding-right: 50px; width: 50%; }
.finelize-order input, .finelize-order select { padding: 5px 10px; }
.finelize-order .cart-table .price { width: 70px; }
.finelize-order .cart-table .quantity { width: 80px; }
.finelize-order .cart-table .summary { text-align: right; width: 120px; }
.finelize-order .display-cell { font-size: 16px; vertical-align: middle; }
.finelize-order .payment.box .display-row .display-cell:first-child { width: 145px; }
.finelize-order .shipping.box .display-row .display-cell:first-child { width: 110px; }
.finelize-order .cart-table { font-size: 14px; }
.finelize-order #template-row { display: none; }
.finelize-order .summary-netto, .finelize-order .summary-brutto { font-size: 16px; }
.finelize-order .summary-netto .amount, .finelize-order .summary-brutto .amount { margin-left: 40px; padding-right: 15px; }
.finelize-order .feedback-container { margin-top: 10px; height: 50px; background-color:yellow; }

/* ORDER FINISHED - MAP */

#map-canvas .infowindow { min-width: 330px; min-height: 210px; }
#map-canvas .infowindow .header img { width: 40px; vertical-align:middle; }
#map-canvas .infowindow .header .partner { font-weight: bold; font-size: 18px; left: 16px; position: relative; top: 3px; }
#map-search { background: none repeat scroll 0 0 #fbfbfb; border: 1px solid #e7e7e7; margin: 20px 0 5px; padding: 8px; width: 300px; }
h2.map-search { margin: 30px 0; }

/* REFERENCES */

.references-container { width: 100%; }
.references-container .ref-item { float: left; margin-right: 40px; margin-bottom: 35px; }
.references-container .ref-item img { height: 80px;  }
.case-studies-container { width: 100%; }

/* RESPONSIVENESS */

@media all and (max-width: 1024px) {
	#container { width: 96%; margin-left: 2%; margin-right: 2%; }
	#header .inside { width: 96%; margin-left: 2%; margin-right: 2%; }
	#footer .inside { width: 96%; margin-left: 2%; margin-right: 2%; }
	.main-story .container { width: 96%; margin-left: 2%; margin-right: 2%; }
	.main-story .background { width: 104%; margin-left: -2%; }
	.box-row .one { width: 40%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0 5%; padding-right: 0; }
	.box-row .please-login { width: 100%; }
	.boxes .one .title { width: calc(100% - 77px); }
	.boxes .one .image { width: 100%; }
	.boxes .one .image img { width: 100%; }
	.box-row .one.last { margin: 0 5%; }
	
	#left { margin: 0; width: 30%; }
	#right { margin: 0; padding: 30px 0 0 48px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 70%; }
	#right.full { padding: 0; }
	
	.please-login { width: 100%; }
}

@media all and (max-width: 768px) {
	.main-story .usp { display: none; }
	.main-story .background { background-image: url(../images/main-pic-centered.png); }
	.main-story .logo a { position: absolute; top: 25px; left: 50%; margin-left: -54px; }
	.main-story .phone { float: left; margin: 42px 0px 0px 40px; }
	.tabs .menu-icon { display: inline-block; }
	
	.tabs ul { background: #ffffff; border: 1px solid #e7e7e7; position: absolute; width: 220px; right: 28px; top: 91px; display: none; z-index: 4; }
	.tabs ul li { float: none; width: 200px; }
	.main-story .tabs ul li a { display: block; padding: 17px 0 17px; width: 90%; }
	.tabs ul li a.active { font-weight: bold; border: 0; }
	
	#header { height: 90px; background-position: center bottom; }
	#header .logo { position: absolute; left: 50%; margin-left: -44px; top: -9px; }
	#header .tabs .menu-icon { top: 26px; right: 18px; }
	#header .phone { float: left; margin: 24px 0px 0px 30px; }
	#header .tabs ul li a { display: block; padding: 17px 0 17px; width: 90%; }
	
	#header .tabs ul li.myaccount-tab { display: inline-block; }
}

@media all and (max-width: 742px) {
	.boxes .one  { width: 90%; }
	#footer { float: left; height: auto; }
	#footer .block { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; border: 0; }
	#footer .block.first { padding: 5px 40px 5px 40px; }
	
	#left { margin: 0 5%; width: 90%; }
	#left .myaccount { margin-top: 30px; }
	#left ul li a:hover, #left ul li.active a { background-color: #ffffff; }
	
	#right,#right.full { margin: 30px 5% 0; width: 90%; padding: 0; }
	#right h1 { margin: 0 0 40px; width: 100%; }
	#right h1 span { display: none; }
	
	.contact-data { width: 100%; }
	.map { width: 100%; margin-top: 30px; }
	
	.phone-number-row { padding: 10px 0 !important; }
	
	.account-buttons { width: auto; }
	.account-buttons .display-cell { float: left; margin-right: 5px; line-height: 38px; }
}

@media all and (max-width: 640px) {
	.finelize-order .box { width: 100%; }
	.form .text { width: 81%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
	.form .select { width: 82%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
	.form .text.phone-2,.form .text.phone-1 { width: 32px; }
	.form label { width: 100%; }
	.form label.for-checkbox { width: 52%; }
	.form .checkbox { margin: 0; }
	.form .form-group .title { text-transform: none; }
	
	.cart-container { float: left; width: 100%; overflow-x: auto; }
	.boxes .one .login .row input { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
	.references-container .ref-item img { height: 80px; max-width: 100%; }
}