@import url(fonts/fonts.css);
html {font-family: 'Helvetica Neue';
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body { margin: 0; font-family: 'Helvetica Neue';}
p,h1,h2,h3,h4,h5,ol,ul{padding: 0px; margin: 0px;}
*{box-sizing: border-box;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block;}
strong {font-weight: 700;}
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;}
img { height: auto; max-width: 100%; vertical-align: middle; border: 0;}
ol,ul{list-style-type: none;}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder { color: #686868; font-family: 'Helvetica'; }
:-moz-placeholder { color: #686868; font-family: 'Helvetica'; }
::-moz-placeholder { color: #686868; font-family: 'Helvetica'; opacity: 1; }
:-ms-input-placeholder { color: #686868; font-family: 'Helvetica';}

a{ color: #007acc; text-decoration: none; background-color: transparent;}
a:hover,
a:focus,
a:active { color: #686868;}
a:focus { outline: thin dotted;}
a:hover,
a:active { outline: 0;}

/**
 *  Menus
 */

.site-header-menu { display: none; position: absolute; top: 40px; right: 0px; width: 250px; background: #fff;}

.site-header-menu.toggled-on,
.no-js .site-header-menu { display: block; }

.main-navigation { font-family: 'Helvetica'; }
.main-navigation ul { list-style: none; margin: 0;}
.main-navigation li { position: relative;text-align: left; }
.main-navigation li a {font-size: 18px; font-weight: 500; color: #000; display: block; line-height: 1.3125; outline-offset: -1px; padding: 7px 0 7px 30px;}
.main-navigation li.home-icon a{background: url(assets/images/home.png) no-repeat left 9px; background-size: 20px auto;}
.main-navigation li.discover-icon a{background: url(assets/images/compass.png) no-repeat left 9px; background-size: 20px auto;}
.main-navigation li.about-icon a{background: url(assets/images/info.png) no-repeat left 9px; background-size: 20px auto;}
.main-navigation li.specifications-icon a{background: url(assets/images/list.png) no-repeat left 9px; background-size: 20px auto;}

.main-navigation li.home-icon:hover a{background: url(assets/images/home-hover.png) no-repeat left 9px; background-size: 20px auto;}
.main-navigation li.discover-icon:hover a{background: url(assets/images/compass-hover.png) no-repeat left 9px; background-size: 20px auto;}
.main-navigation li.about-icon:hover a{background: url(assets/images/info-hover.png) no-repeat left 9px; background-size: 20px auto;}
.main-navigation li.specifications-icon:hover a{background: url(assets/images/list-hover.png) no-repeat left 9px; background-size: 20px auto;}

.main-navigation a:hover,
.main-navigation a:focus { color: #a7c658; outline:0 }
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a { font-weight: 700;}
.main-navigation .primary-menu {padding: 20px 15px 20px 30px;}

.dropdown-toggle { background-color: transparent; border: 0; border-radius: 0; color: #1a1a1a; content: ""; height: 48px; padding: 0; position: absolute; right: 0; text-transform: none; top: 0; width: 48px;}
.dropdown-toggle:after { border: 0 solid #d1d1d1; border-left-width: 1px; content: "\f431"; font-size: 24px;left: 1px; position: relative; width: 48px;}
.dropdown-toggle:hover,
.dropdown-toggle:focus { background-color: transparent; color: #007acc;}
.dropdown-toggle:focus { outline: thin dotted; outline-offset: -1px;}
.dropdown-toggle:focus:after { border-color: transparent;}
.dropdown-toggle.toggled-on:after { content: "\f432";}

/** ***** 
- Header
********** */
.site-header { position: absolute; left: 0px; top: 0px; z-index: 9; width: 100%; padding: 50px }
.site-header .custom-logo-link{float: left;}
.site-header .site-header-main{position: relative;}

.menu-toggle {cursor: pointer; float: right; font-family: 'Helvetica'; border:0; color: #fff; font-size: 14px; background: url(assets/images/menu-icon.png) no-repeat left 7px; padding: 5px 0px 5px 30px;}
.menu-toggle:hover,
.menu-toggle:focus { background-color: transparent; }
.menu-toggle.toggled-on{background: url(assets/images/menu-icon-active.png) no-repeat left 7px;}
.menu-toggle:focus { outline: 0;}
.menu-toggle.toggled-on:focus { outline: 0;}
header{-webkit-transition: background 1s; transition: background 1s;}
header.on-scroll{background:rgba(255,255,255,0.7);}
.section-2 .menu-toggle,
.section-3 .menu-toggle{background: url(assets/images/menu-icon-black.png) no-repeat left 7px; color: #000}
.section-2 .menu-toggle.toggled-on,
.section-3 .menu-toggle.toggled-on{background: url(assets/images/menu-icon-black-active.png) no-repeat left 7px; }

.wrapper { max-width: 1280px; width: 100%; margin: 0 auto;}

.content-up { text-align: center; opacity: 0; transform: translateY(20px); transition: all .3s ease-in-out; }
.current .content-up { opacity: 1; transform: translateY(0);}

#wall .section-1 {background: url(assets/images/slide-1-bc.jpg) no-repeat center left fixed ;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.section{text-align: center;}
.section-1 .content-up{position: absolute; top: 50%; margin-top: -107px; left: 0; right: 0; color: #fff;}
.section-1 p{font-size: 30px; }
.section-1 h1{font-size: 60px; font-weight: bold; margin-bottom: 50px;}
.section-1 .button{cursor:pointer; text-transform: uppercase; background: #fff; color: #000; font-size: 15px; font-weight: 700; letter-spacing: 2px; border: 1px solid #e5e5e5; padding: 15px 25px;
-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#wall .section-2 { background-color: #eff0f4; text-align: center;  }
#wall .section-2 .wrapper,
#wall .section-3 .wrapper,
#wall .section-4 .wrapper{margin: 120px auto 50px; display: inline-block;}
/*#wall .section-3 .wrapper{margin: 90px auto 40px;}*/

#wall .section-2 .wrapper{max-width: 840px}
#wall .section-2 p{font-size: 24px; max-width: 1000px; display: inline-block; line-height: 32px; margin-bottom: 20px;}
#wall .section-2 p span{font-weight: bold;}
#wall .section-2 figure{ width: 100%;margin: 0px; }

@media only screen and (min-width: 680px) {
#wall .section-2 aside{width: 59.5%; float: left;}
#wall .section-2 .section-2-mobile{display: none}
  .section-3-mobile{display: none}

#wall .section-2 aside img:first-child{margin-bottom: 30px}
#wall .section-2 aside:last-child{width:calc(40.5% - 30px); float:right; margin-left: 30px;}
#wall .section-2 aside:last-child img:first-child{margin-bottom: 30px}
}



#wall .section-3 { background: url(assets/images/slide-3-bc.jpg) no-repeat center center fixed ;font-weight: 500; color: #494f5d; font-size: 22px; padding-bottom: 70px;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#wall .section-3 figure{display: inline-block; margin: 0px auto; max-width: 1920px; width: 100%}
#wall .section-3 .wrapper p{line-height: 34px;}
#wall .section-3 aside{float: left; width: 48%; font-size: 18px; position: relative;}
#wall .section-3 aside p{float: right; width: 50%; margin: 25px 0 0; line-height: 27px}
#wall .section-3 aside:last-of-type{float: right;}
#wall .section-3 aside:last-of-type p{margin:0 0 25px; float: left;}
#wall .section-3 aside .img{ width: 100%; padding-top: 47%;float: left; background: url(assets/images/left-hand.png) no-repeat right top ; background-size: 100% auto;}
#wall .section-3 aside:last-of-type .img{background: url(assets/images/right-hand.png) no-repeat left top ;background-size: 100% auto; }
#wall .section-3 aside .content{position: absolute;  transition: 1s;}
#wall .section-3 aside.first .content{transform: translateX(-100px); padding-bottom: 50px;}
#wall .section-3.current aside.first .content{transform: translateX(0px); transition: 1s;}
#wall .section-3 aside.last .content{transform: translateX(100px); }
#wall .section-3.current aside.last .content{ transition: 1s; transform: translateX(0px);}



#wall .section-4 { background-color: #494f5d; color: #fff }
#wall .section-4 .plillow-logo img{max-width: 350px;}
#wall .section-4 .plillow-logo span{display: block; font-size: 42px; margin-top: 10px;}
#wall .section-4 .plillow-logo{display: inline-block; margin-bottom: 80px;}
#wall .section-4 .imageBlock,
#wall .section-4 .contentBlock,
#wall .section-4 footer ul,
#wall .section-4 .whereBuy {width: 100%; float: left;}
#wall .section-4 .imageBlock li{float: left; width: 31%} 
#wall .section-4 .imageBlock li.center{margin:0 3.5% }
#wall .section-4 .contentBlock{margin: 50px 0 80px; padding: 0px 6%}
#wall .section-4 .contentBlock li{float: left; width: 100%; margin-bottom: 50px;  text-align: left;}
#wall .section-4 .contentBlock li > div{width: 48%; float: left;}
#wall .section-4 .contentBlock li > div.right{padding-left: 4%}
#wall .section-4 .contentBlock li > div h5{font-weight: bold; font-size: 30px;padding-bottom: 5px; }
#wall .section-4 .contentBlock li > div p{font-size: 22px;   font-weight: 400; margin-top: 10px; }
#wall .section-4 .whereBuy{ text-align: center; margin-bottom: 80px }
#wall .section-4 .whereBuy h4{display: block; margin-bottom: 20px; font-size: 26px; font-weight: bold;}
#wall .section-4 .whereBuy img{margin: 0px 10px;}
#wall .section-4 footer ul{text-align: center; }
#wall .section-4 footer ul li{display: inline-block; padding: 0px 15px; position: relative;}
#wall .section-4 footer ul li::after{content: ""; position: absolute; right: -4px; width: 2px; z-index: 9; background: #9ea1a9; height: 23px; top: 0px;}
#wall .section-4 footer ul li:last-child::after {display: none}
#wall .section-4 footer ul li a{ font-size: 18px; color: #fff; }
#wall .section-4 footer p{font-size: 18px; display:inline-block; margin-top:50px;}


.dot { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); text-align: center; padding: 0; margin: auto; }
.dot > li { width: 16px; height: 16px; margin-bottom: 10px; background: #c2c4c8; border-radius: 50%;  box-sizing: border-box; list-style: none; cursor: pointer; }
.dot > li.active,
.dot > li:hover { background-color: #fff;}
.dot.section-3 > li{background: #494f5d;}
.dot.section-3 > li.active,
.dot.section-3 > li:hover {background: #7f7d76;}
.contact-div{position: absolute;right: -5px; bottom: 80px; transform: translateY(-50%) rotate(90deg); text-align: center;padding: 0; margin: auto; z-index: 999; font-size: 24px}
.contact-div a{color: #fff;}
.contact-div.sec-2 a,
.contact-div.sec-3 a{color: #000}

.contact-div::before{content: ""; position: absolute;   width: 30px; left: -50px; z-index: 9; background: #fff; height: 2px; top: 17px;}
.contact-div.sec-2::before,
.contact-div.sec-3::before{background: #000;}

/* Lightbox */ 
.white-popup {position: relative; background: #FFF; padding: 20px 40px; width: auto; max-width: 700px; margin: 20px auto;
text-align: justify; width: 90%;}

.mfp-content h2{margin-bottom: 15px; font-size: 20px;}
.mfp-content p{margin-bottom: 10px; line-height: 21px; font-family: 'Helvetica Neue'; font-size: 14px}
.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span{ background: url(assets/images/arrow-left.png) no-repeat left top ; width: 23px; height: 47px; font-size: 0px; float: left; }
.owl-carousel .owl-nav button.owl-next span{ background: url(assets/images/arrow-right.png) no-repeat left top ;}

.white-popup ul{padding-left: 18px;}
.white-popup ul li{margin-bottom: 10px; list-style-type: disc; line-height: 21px; font-family: 'Helvetica Neue'; font-size: 14px;}
.white-popup ul ul li{list-style-type: circle;}
.white-popup ul ul{margin-top: 15px}
.white-popup h3{font-size: 18px; margin-bottom: 5px; font-weight: normal;}
.white-popup strong{font-size: 16px;}
.white-popup p{text-align: left;}
.white-popup a{color: #000; text-decoration: underline;}
.white-popup a:hover {color: #a7c658; }
.white-popup table{border-collapse: collapse; margin-top: 10px;}
.white-popup table th,
.white-popup table td{border: 1px solid #ccc; padding: 5px 8px}



/**
 *  Media Queries
 */

/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;`
}
@media only screen and (max-width: 1280px) {
  .wrapper {padding: 0 30px }
  .site-header{padding: 30px 30px}

}
@media only screen and (max-width: 1024px) {
  .section-1 h1{font-size: 50px}
  .section-1 p{font-size: 26px;}
  #contact-div,
  #vertical-nav.dot{display: none}
  #wall .section-2 p{font-size: 26px; line-height: 30px;}

  #wall .section-3{font-size: 22px} 

  #wall .section-3 aside{font-size: 18px;}
  #wall .section-3 aside p{width: 83%}
  #wall .section-3 aside .img{background-size: auto 100%}

  #wall .section-3 aside:last-of-type .img{background-size:auto 100% ; }
  #wall .section-3 aside .img{padding-top: 77%;}

  #wall .section-4 .contentBlock li > div h5{font-size: 26px;}
  #wall .section-4 .contentBlock li > div p{font-size: 22px;}
  #wall .section-4 footer ul li a,
  #wall .section-4 footer p{font-size: 18px}
}

@media only screen and (max-width: 680px) {
  #wall .section-3 .owl-carousel .owl-nav{top: 33%;}
  #wall .section-2 p{line-height: 22px; font-size: 16px}
  #wall .section-2 figure{display: none}
  #wall .section-2 .section-2-mobile{display: block; position: relative; }

  #wall .section-3{line-height: 22px; font-size: 16px padding-bottom: 0}
  #wall .section-3 figure{display: none}
  #wall .section-3 .wrapper p{line-height: 22px; font-size: 16px}
  #wall .section-3 .section-3-mobile{position: relative; display: block; padding: 0px 30px 0px;max-width: 460px; }
  #wall .section-3 .section-3-mobile p{line-height: 22px; font-size: 16px; margin-top: 15px;}

  #wall .section-4 .imageBlock{display: none}
  #wall .section-4 #section-4-block{max-width: 400px; margin: auto;}
  /*#wall .section-4 .imageBlock li.center, 
  #wall .section-4 .imageBlock li:last-child{display: none}*/
  #wall .section-4 .contentBlock{margin-bottom: 50px; padding: 0px;}
  #wall .section-4 .contentBlock li{margin-bottom: 0px;}
  #wall .section-4 .whereBuy{margin-bottom: 20px;}
  #wall .section-4 .whereBuy img{margin-bottom: 10px;}
  #wall .section-4 footer ul li {padding: 0px 8px; margin-bottom: 8px}
  .white-popup{ max-height: 600px; overflow: auto;}

}

@media only screen and (max-width: 480px) {
  .section-1 h1{font-size: 40px; padding: 0px 20px;}
  .section-1 p{font-size: 22px;}
  
  #wall .section-2 .wrapper, 
  #wall .section-3 .wrapper, 
  #wall .section-4 .wrapper{ margin: 100px auto 30px;}
  #wall .section-3 .wrapper{ margin-bottom: 20px;}
  #wall .section-2 .section-2-mobile .slide{margin-top: 220px}
  #wall .section-4 .plillow-logo{    margin-bottom: 40px;}
  #wall .section-4 .plillow-logo img{max-width: 200px;}
  #wall .section-4 .plillow-logo span{font-size: 24px;}
  #wall .section-4 .contentBlock li > div{width: 100%; margin-bottom: 30px;}
  #wall .section-4 .contentBlock li > div.right{padding: 0px;}
  #wall .section-4 .contentBlock li > div h5{font-size: 22px;}
  #wall .section-4 .contentBlock li > div p{font-size: 18px;}
  #wall .section-4 .whereBuy h4{font-size: 22px; margin-bottom: 10px}
  #wall .section-4 .whereBuy img{max-width: 130px;}
  #wall .section-4 footer p{margin-top: 20px;}
  #wall .section-4 footer ul li {padding: 0px 8px; }
  #wall .section-4 footer ul li a,
  #wall .section-4 footer p{font-size: 14px}
  #wall .section-4 footer ul li::after{height: 20px;}

}