@darkpp: #a0305d;
@lightpp: #db6494;
@yellow: #b57a1d;
@green: #92bb22;
@lightgray: #eee;
@darkgray: #272727;

.round {border-radius: 5px;}
.round-bottom {border-radius: 0px 0px 5px 5px;}
.shadow {box-shadow: 0px 1px 2px #bbb;}
.blurshadow {box-shadow: 0px 1px 4px #bbb;}
.shadowin {box-shadow: 0px 1px 4px #888 inset;}
.shadowinlight {box-shadow: 0px 1px 4px #bbb inset;}
.textinset {text-shadow: 0px -1px 1px #555;}
.buttonify {box-shadow: 0px 1px 4px #bbb inset;}
.noborder {border: none; box-shadow: none !important;}

.tranz-bg {-webkit-transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out;}
.tranz-border {-webkit-transition: border 0.4s ease-in-out; -moz-transition: border 0.4s ease-in-out; -o-transition: border 0.4s ease-in-out; transition: border 0.4s ease-in-out;}
.tranz-opacity {-webkit-transition: opacity 0.9s ease-in-out; -moz-transition: opacity 0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out; transition: opacity 0.9s ease-in-out;}

.serif {font-family: 'Baskerville', 'Gentium Book Basic', serif; font-weight: 200;}
.hide {display: none;}

body {font-size: 14px; line-height: 20px; font-family: 'Open Sans', helvetica, arial, sans-serif; font-weight: 400; background: url(../images/bgnoise.gif);}
a {color: #000;}
p {margin-bottom: 10px;}

/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
img, embed, object, video { max-width: 100%; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }

hr {margin: 0px; margin-top: 39px; margin-bottom: 20px; height: 0px; border: none; border-bottom: 1px solid @lightgray; clear: both;}
h1 {font-size: 80px; .serif; color: @darkpp;}
h3 {font-size: 11px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;}

input, textarea {width: 260px; height: 30px; padding: 0px 10px; margin-bottom: 10px; border: 1px solid #fff; background: #f9f9f9; .round; .shadowin; font-size: 14px; line-height: 30px;}
textarea {height: 10em;}
input[type='checkbox'] {width: 30px; border: none;}
.button, input[type='submit'] {width: 280px; height: 50px; display: block; text-align: center; line-height: 50px; background: @yellow; color: #fff; .round; font-size: 14px; .tranz-bg;}
.button:hover, input[type='submit']:hover {background: @darkpp;}
input[type='submit'] {background: @green;}
.button.nobg {background: none; color: @darkgray; text-align: left;}
input.double, textarea.double {width: 580px;}
div.wpcf7-response-output {float: left; margin: 20px 0px; padding: 10px; line-height: 20px; .round;}
input[type='checkbox'] {width: auto; border: none; vertical-align: middle; margin: 0px 5px 5px 0px;}
span.wpcf7-list-item {width: 200px; margin: 0px !important; display: block; float: left;}

#container {max-width: 960px; margin: 40px auto 20px auto;}

#header {margin-bottom: 30px; height: 65px;}
#logo {margin-left: 10px; float: left;}
#topmenu {float: right; margin-top: 20px; margin-right: 20px; line-height: 30px;}
#topmenu .menu li {display: inline; margin-left: 40px;}
#topmenu .menu li:last-child {margin-left: 10px;}
.menu a {text-decoration: none; padding-bottom: 5px;}
#topmenu li a {border-bottom: 4px solid transparent; .tranz-border;}
#topmenu li.current_page_item a, #topmenu li.current_page_parent a, .page-template-szolgaltatasok-php #topmenu li#menu-item-46 a {border-bottom: 4px solid @darkpp;}
#topmenu li a:hover {border-bottom: 4px solid @lightpp;}
.menu .children {display: none;}

.content {}
.content .col31 {float: left; width: 280px; margin: 20px; margin-bottom: 34px;}
.content .col32 {float: left; width: 600px; margin: 20px; margin-bottom: 34px;}
.content .col32.seal {margin-top: -10px;}
.content .col32 .full {width: 600px; float: left; margin-top: 10px;}
.content .col32 .half {width: 280px; float: left; margin-top: 10px; clear: left;}
.content .col32 .half.right {margin-left: 40px; clear: none;}

#notfound h1 {line-height: 90px; border-right: 1px solid @darkgray;}

.content li {list-style-type: disc; margin-left: 20px; margin-bottom: 10px;}

.content .alignleft {float: left; margin: 0px 40px 40px 0px; .shadow;}
.content .alignright {float: right; margin: 0px 0px 40px 40px; .shadow;}

.content .newsitem {}
.content .newsitem h3 {}

.content #carousel {position: relative; margin-bottom: 20px;}
.content #carousel #slidermask {width: 940px; height: 330px; position: absolute; left: 0px; top: 0px; margin-left: 10px; background: url(../images/slidermask.png); z-index: 300; text-shadow: #444 0px 1px 3px;}
.content #carousel .nivoSlider {position: absolute; width: 940px; height:330px; margin: 10px; background: url(../images/slide1.jpg) no-repeat;}
.content #carousel .nivoSlider img {position: absolute; display: none;}
.content #carousel .nivoSlider a {display: block;}
.content #carousel .nivo-caption {width: 270px; height: 290px; padding: 20px; background: rgba(0, 0, 0, 0.3);}
.content #carousel .nivo-caption h2 {.serif; font-size: 28px; line-height: 30px; margin-bottom: 10px;}
.content #carousel .nivo-controlNav {position: relative; top: 280px; left: 650px; width: 100px;}
.content #carousel .nivo-controlNav a {display: block; float: left; width: 20px; height: 20px; line-height: 20px; font-weight: bold; text-align: center; background: #fff; border-radius: 10px; margin-right: 10px; font-size: 11px; opacity: 0.5; z-index: 400;}
.content #carousel .nivo-controlNav a:hover, .content #carousel .nivo-controlNav a.active {opacity: 1;}

.content #servicelist li {list-style-type: none; margin-left: 0px; height: 60px;}
.content .servicethumb {width: 50px; height: 50px; float: left; margin-right: 20px; background: @lightpp; .round; border: 3px solid #fff; padding: 2px; .shadow; -webkit-transition: all 0.1s ease-in-out; position: relative;}
.content #servicelist li:hover {cursor: pointer;}
.content #servicelist li:hover .servicethumb {left: 7px;}
.content #iso-9001 .servicethumb, .content #iso9001 .servicethumb {background: url(../images/t_wheat.jpg);}
.content #iso-14001 .servicethumb, .content #iso14001 .servicethumb {background: url(../images/t_tulips.jpg);}
.content #iso-22000 .servicethumb, .content #iso22000 .servicethumb {background: url(../images/t_eggs.jpg);}
.content #ohsas-18001 .servicethumb, .content #ohsas18001 .servicethumb {background: url(../images/t_wet.jpg);}
.content #iso-27001 .servicethumb, .content #iso27001 .servicethumb {background: url(../images/t_hdd.jpg);}
.content #haccp .servicethumb, .content #haccp-food-safety-system .servicethumb {background: url(../images/t_spice.jpg);}
.content #sactual .newsitem {margin-bottom: 20px;}
.content #sactual .date {margin-bottom: 0px; color: @darkpp;}
.content #sactual h2 {margin-bottom: 20px;}
.content #scontact #contactbox {background: @darkpp; padding: 20px; color: #fff; .round; margin-bottom: 20px; .textinset;}
.content #newslettertext {color: @darkpp;}
.content #newslettersignup {height: 40px; background: @lightgray; .round; margin-bottom: 20px; margin-top: 20px; overflow: auto; .shadowinlight;}
.content #newslettersignup input {float: left; width: 150px; height: 20px; line-height: 20px; margin: 10px; padding: 0px; background: @lightgray; font-size: 14px; border: none; box-shadow: none;}
.content #newslettersignup #signup {width: 110px; height: 40px; margin: 0px; background: @darkgray; color: #fff; border: none; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; line-height: 30px; z-index: 10; cursor: pointer;}
.content #newslettersignup #signup:hover {background: @darkpp;}
.content #newslettermsg {display: none; color: @darkpp; margin-bottom: 20px; border: 1px solid @darkpp; .round; padding: 10px;}

.content .overview {margin: 10px; clear:both; overflow: auto; height: 220px; background: url(../images/wheat.jpg); .round;}
.content .textbox {margin: 20px 160px; height: 100px; padding: 40px; background: #fff; .round; opacity: 0.9; .blurshadow;}

.content #datas h4 {color: @darkpp; font-weight: normal;}
.content #datas h3 {margin-top: 20px;}
.content #datas h3:first-child {margin-top: 0px;}

.service-tabs {overflow: auto;}
.service-tabs a {text-decoration: none;}
.service-tabs div.tab {float: left; width: 120px; height: 90px; padding: 10px; border-radius: 5px; font-size: 11px; line-height: 15px; margin: 0px 10px; background: @darkpp; color: #fff; text-align: center; .textinset;}
.service-tabs div.tab:hover {background: @lightpp;}
.service-tabs div.active, .service-tabs div.active:hover {background: transparent url(../images/tab_serv_a.png) no-repeat; height: 110px; margin-bottom: -10px;}
.service-tabs div.tab h3 {.serif; font-size: 14px; margin-bottom: 10px; line-height: 30px}
.service-tabs div.tab h3 b {font-size: 28px; display: block; font-weight: 200; line-height: 15px;}
.service-tabs .overview {background: url(../images/wheat.jpg); margin-top: 120px;}
#iso-14001 .service-tabs .overview {background: url(../images/tulips.jpg);}
#iso-22000 .service-tabs .overview {background: url(../images/eggs.jpg);}
#ohsas-18001 .service-tabs .overview {background: url(../images/wet.jpg);}
#iso-27001 .service-tabs .overview {background: url(../images/hdd.jpg);}
#haccp .service-tabs .overview {background: url(../images/spice.jpg);}
.service-tabs .textbox {}

.overview#quote {height: 70px;}
.overview#quote .textbox {position: absolute; z-index: 20; margin: 0px auto; margin-bottom: -20px; width: 900px; height: 50px; background: transparent url(../images/tab_serv_a.png) bottom center no-repeat; color: #fff; padding: 20px; text-align: center; .serif; font-size: 24px; .textinset; opacity: 1; line-height: 30px; box-shadow: none;}
.content .ui-tabs-nav {display: block; height: 50px; padding: 10px 230px; margin: 0px 10px; background: @lightgray url(../images/progressstripes.png) center 10px no-repeat; .round; .shadowinlight;}
.content .ui-tabs-nav li {display: block; list-style-type: none; width: 160px; height: 50px; float: left; text-align: center; margin: 0px;}
.content .ui-tabs-nav li a {text-decoration: none;}
.content .ui-tabs-nav li strong {display: block; height: 20px; width: 20px; padding: 0px; margin: 5px auto; border: 1px solid @darkgray; border-radius: 20px; background: @lightgray; font-size: 11px;}
.content .ui-tabs-nav li.ui-tabs-selected strong {padding: 5px; margin: 0px auto;}
.content .ui-tabs-nav li.ui-tabs-selected em {font-weight: bold;}
.content .ui-tabs-nav li i {display: block; font-size: 11px; font-style: regular;}
.content .ui-tabs-nav li a:hover strong {background: @darkgray; color: @lightgray;}

#quote-steps li {float: left;}
#quote-steps li .nr {width: 20px; height: 20px; padding: 0px; .round;}
#quote-tabs .ui-tabs-hide {display: none;}
#quote-tabs .button {float: left;}
#quote-tabs hr {float: left; clear: both; width: 100%; margin: 20px 0px; border: none; border-bottom: 1px solid @lightgray;}
#quote-tabs .wpcf7-list-item {display: block; height: 30px;}
#quote-tabs #tabs em {display: block; color: @darkpp; font-size: 11px; line-height: 15px;}

#quote-tabs .notvalid, span span.wpcf7-not-valid-tip {background: @darkpp; width: 150px; color: #fff; position: absolute; top: 10px; left: 110px; padding: 5px; font-size: 11px; line-height: 15px; font-weight: bold; .round; .textinset; border: none; .shadow;}
#quote-tabs .notvalid:before, span span.wpcf7-not-valid-tip:before {content:""; position: absolute; right: 100%; top: 10px; width: 0; height: 0; border-top: 4px solid transparent; border-right: 8px solid @darkpp; border-bottom: 4px solid transparent;}
#quote-tabs .kovetelmeny .wpcf7-not-valid-tip {top: -190px; content:"Kérjük, válasszon legelább egy követelményt!";}

#quote-tabs .telephelyek input, #quote-tabs .tevekenysegek input {display: none;}
#quote-tabs .telephely1 input, #quote-tabs .tevekenyseg1 input {display: block;}

.overview#change {height: 70px;}
.overview#change .textbox {position: absolute; z-index: 20; margin: 0px auto; margin-bottom: -20px; width: 900px; height: 60px; background: transparent url(../images/tab_serv_a.png) bottom center no-repeat; color: #fff; padding: 20px; padding-top: 10px; text-align: center; .serif; font-size: 24px; .textinset; opacity: 1; line-height: 30px; box-shadow: none;}

.signuphere {width: 400px; padding: 50px; margin: 100px auto; background: #fff; .round; .shadow; text-align: center;}
.signuphere #newslettersignup input {width: 270px;}

#footer {clear: both; margin: 10px; margin-bottom: 0px; font-size: 11px; line-height: 30px; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid #000;}
#footer a#tonetype {clear: both; display: block; text-align: center; margin-top: 20px; opacity: 0.1; .tranz-opacity; margin-right: -10px;}
#footer a#tonetype:hover {opacity: 1;}
#footer a {color: #888;}
#footer a:hover {color: #000;}
#footer .menu {display: inline; margin-left: 10px; padding-left: 10px; border-left: 1px solid #888;}
#footer ul {display: inline;}
#footer li {display: inline; margin-left: 10px;}


@media screen and (max-width: 960px) {

#logo {margin-left: -10px;}
#container { max-width: 700px; }
.content {clear: both; margin-bottom: 40px; overflow: auto;}
#topmenu {clear: both; width: 100%; line-height: 40px;}
#topmenu .menu li {margin-left: 20px;}
.content .col31, .content .col32 {display: block; width: 100%; margin: 0px;}
.content #servicelist li {float: left; width: 45%; padding-right: 5%; height: auto;}
.content .servicethumb {margin-bottom: 40px;}
.content #newslettersignup {width: 280px;}
h3 {margin-top: 3em;}
.content .col32 .half {width: 40%;}


.content .overview {margin: 3em 0; height: auto;}
.content .textbox {margin: 20px; height: auto;}

.content #carousel #slidermask {display: none;}
.content #carousel .nivoSlider {margin: 20px 0px;}
.content #carousel #slider {width: 100%;}
.content #carousel .nivo-controlNav {display: none;}
.content #carousel .nivo-caption {width: 230px;}

.service-tabs {margin-top: 20px;}
.service-tabs div.tab {width: 90px; height: 120px; margin: 10px 10px 10px 0px;}
.service-tabs > a:last-child div.tab {display: none; margin: 10px 0px 10px 0px;}
.service-tabs div.tab h3 {font-size: 11px; margin-top: 0px;}
.service-tabs div.tab h3 b {font-size: 16px;}
.service-tabs div.active, .service-tabs div.active:hover {background: @lightpp;}

.overview .textbox {width: auto !important;}
.overview#quote .textbox {padding: 20px 10px;}
#quote-tabs ul {display: none;}
#quote-tabs .ui-tabs-nav {display: none;}
input.double, textarea.double {width: 260px;}
.content .col32 .half.right {margin-left: 0px; clear: left;}
.content .col32 .full {width: 100%;}

#map {width: 100% !important;}

#datas {-moz-column-count:2; -o-column-count:2; -webkit-column-count:2; -ms-column-count:2;}
#footer {margin: 0px; margin-top: 3em;}
#footer .menu {display: block; margin-left: 0px;}
#footer li {margin-left: 0px; margin-right: 10px;}
}

@media screen and (max-width: 700px) {
#container {width: 90%;}	
#topmenu {width: 100%; float: left; clear: both;}
#topmenu .menu li {margin-left: 0px; margin-right: 20px;}
.content #carousel {display: none;}
.content .col32 .half {width: 100%;}
.content .col32 .half.right {margin-left: 0px;}
.service-tabs div.tab {display: block; clear: both; width: 100%; height: auto; margin: 0px; margin-bottom: 10px; padding: 5px 0px; text-align: left;}
.content #servicelist li {float: left; width: 100%; clear: both; padding-right: 0; height: auto;}
.content .servicethumb {margin-bottom: 0;}
.service-tabs div.active, .service-tabs div.active:hover {height: auto; margin-bottom: 10px;}
.service-tabs div.tab h3 {display: inline; margin-left: 10px;}
.service-tabs div.tab h3 b {display: inline;}
#datas {-moz-column-count:1; -o-column-count:1; -webkit-column-count:1; -ms-column-count:1;}

}