html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body {
	font-family: verdana, Arial, sans-serif;
}

@font-face {
    font-family: 'neoteric';
    src:    url(https://www.pixart.ch/fonts/neotericbold.ttf) format('truetype');
}

a {
	outline: 0;
	text-decoration: none;
}

.button {
    outline: none !important;
}

@font-face {
    font-family: 'neuropol';
    src:    url('https://www.pixart.ch/fonts/neuropol.ttf') format('truetype');
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

.godwrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -55px;
}

.pusher {
    height: 57px;
}

#homebanner {
	float: left;
	width: 100%;
	background: url('https://www.pixart.ch/images/layout/homebanner2.jpg') center center no-repeat;
	min-height: 800px;
	background-size: cover;
	height: 100%;
}

#trans {
	background-color: #000;
	position: absolute;
	width: 100%;
	min-height: 750px;
	height: 100%;
	float: left;
	z-index: 0;
	opacity: 0.25;
}

#topnav {
	position: relative;
	z-index: 1;
	background-color: #fff;
	height: 90px;
	width: 100%;
	float: left;
}

#logo {
	float: left;
	background: url('https://www.pixart.ch/images/layout/logo.png') center center no-repeat;
	width: 230px;
    height: 90px;
    background-size: 230px auto;
}

#logo a {
    display: block;
    height: 100%;
}

#nav {
	float: right;
}

#nav ul {
	padding: 0;
	margin: 0;
}

#nav ul li {
	list-style: none;
    float: left;
    padding: 0;
    color: #444;
    font-size: 18px;
    text-transform: normal;
    font-family: 'helvetica', arial, verdana;
    text-transform: uppercase;
}

#nav ul li a {
	color: #575656;
	padding: 36px 30px;
	background-color: #efefef;
	float: left;
	margin: 0px 2px;
	letter-spacing: 1px
}

#nav ul li .menuactive {
	background-color: #127CC1;
	color: #fff;
}

#nav ul li:last-child {
	padding-right: 0px !important;
}

#bannercontent {
	position: relative;
	z-index: 1;
	float: right;
	width: 100%;
}

#bannercontent #bannertitle,
#bannercontent #bannertext {
	float: right;
	width: 100%;
	text-align: right;
}

#bannertitle {
	margin: 400px 0px 0px;
	color: #fff;
	text-shadow: 1px 2px 16px #000;
	font-size: 55px;
	line-height: 28px;
	padding: 10px 0px;
	font-family: 'neuropol';
    text-transform: uppercase;
}

#bannertitle svg {
	font-size: 10px !important;
    top: -12.5px;
    position: relative;
    left: 2px;
}

#bannertext {
    display: none;
	color: #fff;
	font-size: 30px;
	line-height: 28px;
	padding: 25px 0px;
	text-shadow: 1px 2px 16px #000;
}

#productbutton {
/*    border: 4px solid #efefef;
    padding: 15px 30px;
    width: auto;
    text-shadow: 1px 2px 16px #000;
    border-radius: 0px;
*/  color: #fff;
    float: right;
    font-size: 20px;
    margin-top: 10px;

}

#productbutton svg {
	padding-left: 10px;
    font-size: 42px;
}

#productbutton a {
    color: #fff;
}

#solutions {
	float: left;
	width: 100%;
	background: #127CC1 url('https://www.pixart.ch/images/layout/bottomstrip.png') center center no-repeat;
	background-size: cover;
	min-height: 110px;
	margin-top: -110px;
    position: relative;
    z-index: 999;
}

#solutions a {
    height: 100%;
    width: 100%;
    float: left;
    position: absolute;
}

#solutions .product {
	float: left;
	color: #fff;
	text-align: center;
	width: 240px;
	padding: 25px 0px 12px;
	margin: 0px;
}

#solutions .product:first-child {
    width: auto;
    margin-right: 60px;
}

#solutions .product:last-child {
    width: auto;
    margin-left: 60px;
}

#solutions .product svg {
	font-size: 25px !important;
}

#solutions .product h3{
	font-weight: normal;
	color: #fff;
	font-size: 18px;
	line-height: 22px;
	padding: 16px 0px 10px;
	margin: 0px;
}

#boxes {
	float: left;
	min-height: 300px;
	background-color: #efefef;
	width: 100%;
	text-align: center;
}

.grid.portfolio {
    margin-top: 20px !important;
}

#filters .grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 36.5px;
    min-width: 390px !important;
    max-width: 390px !important;
	max-height: 300px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;

}

figure.effect-bubba:first-child {
    margin-left: 0px !important;
}

figure.effect-bubba:last-child {
    margin-right: 0px !important;
}

#filters figure.effect-bubba img {
	-webkit-filter: grayscale(0) !important;
	filter: grayscale(0) !important;
}

#boxes figure.effect-bubba img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#boxes figure.effect-bubba:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

#whypixart {
	float: left;
	width: 100%;
	min-height: 500px;
	background-color: #efefef;
	background-size: 800px auto;
}

#whypixart .content {
	float: left;
	margin: 20px 0px 70px;
	max-width: 500px;
}

#whypixart .content h2 {
	font-weight: normal;
	font-size: 32px;
	line-height: 36px;
	color: #333;
	font-family: verdana;
}

#whypixart .content p {
	font-weight: normal;
	font-size: 18px;
	line-height: 28px;
	color: #333;
	font-family: verdana;
}

#whypixart .image {
	margin: 90px 0px 0px 115px;
	float: left;
}

#whypixart .image img {
	max-width: 585px;
	height: auto;
}

#webdesign {
	float: left;
	width: 100%;
	height: 650px;
	background: url('https://www.pixart.ch/images/layout/homewebdesign.jpg') center center no-repeat;
	background-size: cover;
}

#transi {
    background-color: #000;
    position: absolute;
    width: 100%;
    height: 650px;
    float: left;
    z-index: 0;
    opacity: 0.55;	
}

#webdesign .wrapper {
	position: relative;
	z-index: 999;
}

#homemotivation {
	float: left;
    width: 100%;
    min-height: 348px;
    background: #FBFBFB url('https://www.pixart.ch/images/layout/geometric.png') left center no-repeat;
    background-size: cover;
}

#homemotivation .icon {
	margin: 110px 0px 100px;
	float: left;
	width: 25%;
	text-align: center;
}

#homemotivation .icon img {
	max-height: 50px;
}

#homemotivation .icon h3 {
	color: #444444;
	font-size: 20px;
	font-weight: normal;
	margin: 15px 0px;
	padding: 15px 0px;
	line-height: 24px;
}

#footer {
	min-height: 300px;
	width: 100%;
	background-color: #1D7DBF;
	float: left; 
}

#footpixart {
    margin-left: 0px !important;
}

#footpixart,
#footnav,
#footcontact {
	float: left;
    width: 300px;
    margin: 65px 35px;
}

#footpixart img {
	width: 210px;
	height: auto;
	margin-top: 18px;
}

#footpixart p {
	color: #333;
    line-height: 24px;
    font-size: 16px;
    margin: 20px 0px;
    padding: 5px 0px;
}

#footnav {
    margin-top: 140px !important;
    width: 215px !important;
}

#footnav a {
	color: #333;
    float: left;
    padding: 11px 0px 11px 25px;
    width: 100%;
    margin: 0;
    line-height: 40px;
}

#footnav svg {
    width: 35px;
    text-align: left;
}

#footcontact {
	margin-top: 145px !important;
}

#footcontact p {
	color: #333;
    font-size: 16px;
    line-height: 26px;
    padding: 10px 0px;
    margin: 0px;
}

#footcontact a {
    color: #333;
    text-decoration: underline;
}

.contactspace {
    margin-top: 40px;
    float: left;
}

#footsocial {
    width: 16%;
    margin: 145px 0px;
    float: left;
}

#footsocial img {
    max-width: 200px;
    height: auto;
}

.bottom {
    height: 20px !important;
}

#bottom {
    float: left;
    color: #fff;
    width: 100%;
    font-size: 14px;
    height: 55px;
    background-color: #035EA0;
    text-align: center;
    padding: 20px 0px 20px;
}

#bottom a {
	color: #fff;
	text-decoration: underline;
}

/********************** Pages CSS */

#pagetitle {
	float: left;
	width: 100%;
	background: #127CC1 url('https://www.pixart.ch/images/layout/topstrip.png') center center no-repeat;
	background-size: cover;
	min-height: 75px;
	z-index: 999;
    position: relative;
}

#pagetitle h1 {
	color: #fff;
	font-weight: normal;
	font-size: 24px;
	line-height: 35px;
	padding: 10px 0px;
	margin:  10px 0px;
}

#pagecontent {
	float: left;
	background-color: #efefef;
	min-height: 600px;
	width: 100%;
}

.portfolioback {
    background-color: #fff !important;
}

.product.firstcol, 
.product.lastcol {
    margin-left: 0px !important;
}

#ourproducts {
	padding: 50px 0px;
	float: left;
	width: 100%;
	background-color: #fff;
	min-height: 300px;
}

#ourproducts .product {
	float: left;
	width: 383.3px;
	margin: 20px 10px;
	min-height: 200px;
/*	background-color: #cecece */
}

#ourproducts .product svg {
	color: #127CC1;
    font-size: 30px;
    margin-top: 5px;
}

#ourproducts .product .leftspace {
	height: 215px;
    width: 50px;
    float: left;
}

#ourproducts .product h2 {
	margin: 0px;
	padding: 5px 0px;
	font-weight: normal;
}

#ourproducts .product p {
	line-height: 26px;
    font-size: 16px;
}

#pixartdesign {
	float: left;
	width: 100%;
	background-color: #efefef;
}

#pixartdesign .designcolumn {
	float: left;
	width: 40%;
	padding: 80px 10%;
}

#pixartdesign .designcolumn:first-child {
    padding-left: 0% !important;
}

#pixartdesign .designcolumn:last-child {
    padding-right: 0% !important;
}

#pixartdesign .designcolumn img {
	width: 100%;
}

#ourwaytowork {
	float: left;
	width: 100%;
	min-height: 600px;
	background-color: #fff; 
	padding: 50px 0px;
}

#ourwaytowork h2 {
	font-weight: normal;
	padding: 20px 0px;
	margin: 10px 0px;
	font-size: 44px;
	line-height: 38px;
	text-align: center;
}

#ourwaytowork p {
	font-size: 16px;
	line-height: 20px;
	padding: 10px 0px;
	margin: 0px;
	text-align: center;
}

#ourwaytowork #process {
	float: left;
	width: 100%;
	background-color: #fff;
	height: auto;
	text-align: center;
	margin-top: 50px;
}

#process .proc {
	float: left;
	width: 100%;
	text-align: center;
}

#process .proc svg {
	font-size: 35px;
	color: #1D7DBF;
}

#process .procontent {
	float: left;
    width: 100%;
}

.procontent .idee {
	margin-left: 400px !important;
}

.procontent .support {
	margin-left: 435px !important;
}

.procontent .produktion {
	right: 190px !important;
}

#process .procontent h3 {
	position: relative;
    right: 110px;
    top: -48px;
    font-weight: normal;
}

#process .proc.right .procontent h3 {
	position: normal !important;
    margin-left: 424px;
    top: -48px;
    font-weight: normal;
}

#process .procontent p {
    position: relative;
    right: 245px;
    margin: 0 auto;
    top: -55px;
    font-weight: normal;
    text-align: right;
    width: 350px;
}

#process .proc.right .procontent p {
    position: normal !important;
    left: 245px;
    margin: 0 auto;
    top: -55px;
    font-weight: normal;
    text-align: left;
    width: 350px;
}

.connectionline {
	width: 0px;
    height: 150px;
    margin: -1px auto;
    border: 1px solid #888;
}


/****************************** START Portfolio Boxes ******************************/


.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #035EA0;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 20px;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

/* ---- isotope ---- */

.grid {
    margin-bottom: 40px;
/*border: 1px solid #333;*/
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 390px;
  height: 300px;
  margin: 15px 5px;
/*  padding: 10px;
  background: #888;*/
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}


.element-item.alkali          { background: #333; }
.element-item.alkaline-earth  { background: #444; }
.element-item.lanthanoid      { background: #555; }
.element-item.actinoid        { background: #666; }
.element-item.transition      { background: #777; }
.element-item.post-transition { background: #888; }
.element-item.metalloid       { background: #222; }
.element-item.diatomic        { background: #010101; }
.element-item.halogen         { background: #cecece; }
.element-item.noble-gas       { background: #efefef; }

.element-item img {
    min-width: 390px;
}

#filters {
    margin-top: 40px;
}

/****************************** END Portfolio Boxes ******************************/


/****************************** START CONTACT PAGE ******************************/

#contactmap {
	float: left;
    width: 100%;
    height: 400px;
}

/****************************** START CONTACT FORM ****************************/

#kontaktform input {
  width: 703px;
  position: relative;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  margin-bottom: 10px;
  height: 60px;
  padding: 0 20px 0 25px;
  font-size: 16px;
}

#kontaktform textarea {
    border: 1px solid #dbdbdb;
    min-height: 199px;
    padding: 25px 20px 15px 25px;
    font-size: 16px;
    resize: none;
    width: 703px;
    font-family: verdana;
}

#kontaktform {
    float: left;
    margin: 90px 0px;
}

.submit #m580d3fbrp_submit {
    width: 750px !important;
    background-color: #1D7DBF;
    color: #fff;
    margin-top: 40px;
}

.submit #m580d3fbrp_submit:hover {
    cursor: pointer;
}

/****************************** END CONTACT FORM ******************************/

#contactdata {
    float: right;
    width: 305px;
    height: auto;
    background-color: #fff;
    text-align: center;
    margin-top: 90px;
    padding: 10px 10px 25px;
}

#contactdata p {
	padding: 3.1px 0px;
	line-height: 25px;
}

#contactdata svg {
    font-size: 25px;
    padding: 19px 0px;
}

#contactdata a {
    color: #333;
}

/****************************** END CONTACT PAGE ******************************/

/****************************** Responsive Design *****************************/

@media screen and (max-width: 1250px) {
    
    .wrapper {
        max-width: 600px;
    }
    
    #topnav {
        height: 115px;
    }
    
    #logo {
        margin-top: 15px;
        width: 250px;
        background-size: 250px auto;
    }
    
    #pagetitle {
        min-height: 50px;
    }
    
    #bannertitle {
        font-size: 34px;
        margin-top: 315px;
    }

    #bannertext {
        font-size: 20px;
        line-height: 28px;
        padding: 8px 0px;
    }
    
    #solutions {
        margin-top: -162px;
    }
    
    #solutions .product {
        width: 116px;
        padding: 42px 0px 42px;
    }
    
    #solutions .product:first-child{
        margin-right: 40px;
    }

    #solutions .product:last-child {
        margin-left: 40px;
    }
   
    #solutions .product h3 {
        display: none;
    }
    
    #boxes .grid figure {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        margin: 10px 0px !important;
    }
    
    #whypixart .content {
        margin: 20px 0px 50px;
        max-width: 100%;
    }
    
    #whypixart .image {
        margin: 0px 0px 80px 0px;
    }
    
    #webdesign,
    #transi {
        height: 550px;
    }
    
    .rw-sentence {
        margin-top: 120px !important;
    }
    
    #footpixart, #footnav, #footcontact {
        margin: 65px 0px;
    }
    
    #footpixart {
        margin-right: 80px;    
    }
    
    #footcontact {
        margin-top: 0px !important;
    }
    
    #bottom {
        height: 95px;
        line-height: 25px;
    }
    
    #ourproducts .product {
        width: 280px;
    }
    
    .product .seclast {
        height: 340px !important;
    }
        
    
    .leftspace.messe {
        height: 365px !important;
    }
    
    #process .proc svg {
        font-size: 22px;
    }
    
    #process .procontent h3,
    #process .procontent p {
        position: inherit;
        text-align: center;
    }
    
    #process .procontent {
        margin-top: 30px;
        margin-bottom: 15px;
        min-height: 135px;
        background-color: #fff;
    }
    
    .connectionline {
        height: 205px;
    }
    
    #process .proc.right .procontent h3 { 
        margin-left: 0 !important;
    }
    
    #process .proc.right .procontent p {     
        text-align: center !important;
    }
    
    .proc.right.last .connectionline {
        height: 100px !important;
    }
    
    .bottom {
        height: 50px !important;
    }

    .button-group .button {
        margin-right: 20px;
        margin-bottom: 25px;
    }
    
    .button-group .button {
        margin-right: 27px;
    }
    
    .button-group .button.messe {
        margin-right: 0px;
    }
    
    .grid.portfolio .element-item {
        width: 290px;
        height: auto;
    }
    
    .grid.portfolio .element-item img {
        min-width: 290px;
    }
    
    #boxes figure.effect-bubba h2 {
        padding-top: 44% !important;
    }

    .grid.portfolio figure.effect-bubba h2 {
        padding-top: 22%;
    }
    
    #pagecontent {
        min-height: 1200px;
    }
    
    #kontaktform {
        margin: 60px 0px 0px;
    }
    
    #kontaktform input,
    #kontaktform textarea {
        width: 553px;
    }
    
    .submit #m580d3fbrp_submit {
        width: 600px !important;
    }

    #contactdata {
        margin: 40px 0px;
        float: left;
        width: 580px;
    }

    .contactspace {
        margin-top: 0px;
    }

}

@media screen and (max-width: 950px) {
    
    .wrapper {
        max-width: 300px;
        width: 300px;
    }
    
    #logo {
        width: 100%;
        background-size: 300px;
    }
    
    #homebanner {
        min-height: 600px;
    }
    
    #trans {
        min-height: 100%;
    }
    
    #bannertitle {
        font-size: 16px;
        margin: 130px 0px 0px;
    }

    #bannertitle svg {
        font-size: 5px !important;
        top: -2.5px;
    }

    #bannertext {
        font-size: 14px;
        line-height: 5px;
    }

    #productbutton svg {
        font-size: 30px;
    }

    #solutions .product:first-child {
        margin-right: 10px;
    }

    #solutions .product:last-child {
        margin-left: 10px;
    }

    #solutions .product {
        width: 56.6px;
    }
    
    #boxes .grid figure {
        min-width: 300px !important;
    }
    
    #whypixart .image img {
        max-width: 300px;
    }
    
    #webdesign .rw-sentence span {
        font-size: 19px;
        line-height: 35px;
    }
    
    #webdesign, 
    #transi {
        height: 400px;
    }
    
    #footpixart {
        margin: 50px 0px 30px;
        width: 100%;
    }
    
    #footnav {
        width: 100% !important;
        margin: 0px 0px 35px !important;
    }
    
    #footnav a {
        padding: 12px 0px 12px 0px;
    }
    
    #footnav svg {
        width: 20px !important;
        margin-right: 10px !important;
    }
    
    #footsocial {
        display: none;
    }

    #bottom {
        height: 150px;
        line-height: 28px;
    }
    
    #whypixart .content h2 {
        line-height: 45px;
        text-align: center;
    }
    
    #whypixart .content p {
        text-align: center;
    }
    
    #ourwaytowork h2 {
        line-height: 55px;
    }
    
    #process .procontent {
        margin-top: 36px;
    }
    
    .bottom {
        height: 110px !important;
    }
    
    #pixartdesign .designcolumn {
        width: 100%;
        padding: 20px 0px;
    }
    
    #pixartdesign {
        margin: 50px 0px;
    }
    
    .button-group .button.messe {
        margin-right: 27px !important;
    }
    
    #kontaktform input, #kontaktform textarea {
        width: 250px;
    }
    
    .submit #m580d3fbrp_submit {
        width: 300px !important;
        border-radius: 0px important;
        background-color: #1D7DC2 !important;
    }

    #contactdata {
        margin: 40px 0px;
        float: left;
        width: 280px;
    }
    
    #boxes figure.effect-bubba h2 {
        padding-top: 35% !important;
    }
    
}


















/* Stylesheet: main css Modified On 2018-04-23 13:07:08 */