/* ==========================================================================
rev. jul. 2nd 12:22
   ========================================================================== */
   @font-face {font-family: 'Calluna-Regular';src: url('../fonts/2B3BE5_0_0.eot');src: url('../fonts/2B3BE5_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/2B3BE5_0_0.woff') format('woff'),url('../fonts/2B3BE5_0_0.ttf') format('truetype');}
   
   @font-face {font-family: 'Calluna-Light';src: url('../fonts/2B3BE5_6_0.eot');src: url('../fonts/2B3BE5_6_0.eot?#iefix') format('embedded-opentype'),url('../fonts/2B3BE5_6_0.woff') format('woff'),url('../fonts/2B3BE5_6_0.ttf') format('truetype');}
   
@font-face {
  font-family: 'FacitWeb';
  src: url("../fonts/FR.eot?#iefix") format("embedded-opentype"), url("../fonts/FR.woff") format("woff"), url("../fonts/FR.ttf") format("truetype");
  font-weight: 400; }

@font-face {
  font-family: 'FacitWeb';
  src: url("../fonts/FR-i.eot?#iefix") format("embedded-opentype"), url("../fonts/FR-i.woff") format("woff"), url("../fonts/FR-i.ttf") format("truetype");
  font-style: italic;
  font-weight: 400; }

@font-face {
  font-family: 'FacitWeb';
  src: url("../fonts/FB.eot?#iefix") format("embedded-opentype"), url("../fonts/FB.woff") format("woff"), url("../fonts/FB.ttf") format("truetype");
  font-weight: 700; }

@font-face {
  font-family: 'FacitWeb';
  src: url("../fonts/FB-i.eot?#iefix") format("embedded-opentype"), url("../fonts/FB-i.woff") format("woff"), url("../fonts/FB-i.ttf") format("truetype");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: 'FacitWeb-Extralight';
  src: url("../fonts/FXL.eot?#iefix") format("embedded-opentype"), url("../fonts/FXL.woff") format("woff"), url("../fonts/FXL.ttf") format("truetype");
  font-weight: 200; }

@font-face {
  font-family: 'FacitWeb-Extralight';
  src: url("../fonts/FXL-i.eot?#iefix") format("embedded-opentype"), url("../fonts/FXL-i.woff") format("woff"), url("../fonts/FXL-i.ttf") format("truetype");
  font-weight: 200;
  font-style: italic; }

@font-face {
  font-family: 'FacitWeb-Light';
  src: url("../fonts/FL.eot?#iefix") format("embedded-opentype"), url("../fonts/FL.woff") format("woff"), url("../fonts/FL.ttf") format("truetype");
  font-weight: 300; }

@font-face {
  font-family: 'FacitWeb-Light';
  src: url("../fonts/FL-i.eot?#iefix") format("embedded-opentype"), url("../fonts/FL-i.woff") format("woff"), url("../fonts/FL-i.ttf") format("truetype");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'FacitWeb-Semibold';
  src: url("../fonts/FSB.eot?#iefix") format("embedded-opentype"), url("../fonts/FSB.woff") format("woff"), url("../fonts/FSB.ttf") format("truetype");
  font-weight: 500; }

@font-face {
  font-family: 'FacitWeb-Semibold';
  src: url("../fonts/FSB-i.eot?#iefix") format("embedded-opentype"), url("../fonts/FSB-i.woff") format("woff"), url("../fonts/FSB-i.ttf") format("truetype");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: 'FacitWeb-Extrabold';
  src: url("../fonts/FXB.eot?#iefix") format("embedded-opentype"), url("../fonts/FXB.woff") format("woff"), url("../fonts/FXB.ttf") format("truetype");
  font-weight: 800; }

@font-face {
  font-family: 'FacitWeb-Extrabold';
  src: url("../fonts/FXB-i.eot?#iefix") format("embedded-opentype"), url("../fonts/FXB-i.woff") format("woff"), url("../fonts/FXB-i.ttf") format("truetype");
  font-weight: 800;
  font-style: italic; }

/* ==========================================================================
   Base
   ========================================================================== */
* {
  margin: 0;
  padding: 0; }

html,
body {
  height: 100%;
   -webkit-text-size-adjust: 100%; }

html,
button,
input,
select,
textarea {
  color: #444444;
  font-family: "FacitWeb", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-rendering: optimizeLegibility; }

  section p:not(.snippet), .read, #main .pricing__features {
    font-family: 'Calluna-Light'; 
    font-size: 18px; 
    font-weight: 100;
  }


/*Newsletter*/

.newsletter {
  line-height: 10px;
  margin: 40px 0px 30px 0px;
}

input.email {
  width:230px;
  line-height: 1.6;
  padding:5px 5px 5px 5px;
  color:#ccc;
}

input.button {
  border:0;
  background-color: #ccc; 
  color:#eee;
  font-weight:200;
  margin:0 !important;
}

.app__description .read {
  font-size: 16px;
}

body {
  background-color: #333333; }

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

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

textarea {
  resize: vertical; }

p {
  margin: 0 0 1em 0;
  }

strong {
  font-family: "FacitWeb", sans-serif !important;
  font-weight: 700 !important; }

svg {
  -webkit-transition: fill 200ms ease-in-out;
  -moz-transition: fill 200ms ease-in-out;
  -o-transition: fill 200ms ease-in-out;
  transition: fill 200ms ease-in-out; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

/* ==========================================================================
   Headings
   ========================================================================== */
h1,
.slogan__text {
  font-family: "FacitWeb-Extralight", sans-serif;
  font-size: 42px;
  font-weight: 200;
  line-height: 1.2;
  margin: 100px 0 20px 0;
  text-align: center; }
  
#slogan .snippet {
  margin-top: 10px; }

h2,
.example__profession {
  color: #333333;
  font-size: 21px;
  font-family: "FacitWeb", sans-serif;
  line-height: 1.3;
  font-weight: 200;
  margin: 0 0 30px 0; }

.article h2 {
  margin: 40px 0 15px 0; }

h3,
#header-nav-wrapper > ul,
.slogan__text h2,
.intro {
  color: #333333;
  font-size: 20px;
  font-family: "FacitWeb-light", sans-serif;
  font-weight: 300;
  margin: 0 0 15px 0; }

.article h3 {
  margin-top: 35px; }

h4 {
  color: #333333;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 10px 0; }

/* ==========================================================================
   Links
   ========================================================================== */
a {
  outline: 0;
  -webkit-transition: color 200ms ease-in-out;
  -moz-transition: color 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out; }

a:link,
a:visited {
  color: #6db3cd;
  text-decoration: none; }

a:hover,
a:active,
a:focus {
  color: #333333;
  text-decoration: none; }

.article a {
  text-decoration: underline; }

.more {
  display: block;
  margin: 10px 0 0 0;
  text-align: right; }

a img {
  border: none !important; }

/* ==========================================================================
   Forms & buttons
   ========================================================================== */
.button {
  display: inline-block;
  zoom:1;
  *display:inline;
  font-size: 14px;
  font-weight: 600;
  line-height: 36px;
  padding: 0 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out; }

.button:link,
.button:visited {
  color: white;
  background-color: #6db3cd;
  text-decoration: none; }

.button:hover,
.button:active,
.button:focus {
  color: white;
  background-color: #5ca2bc;
  text-decoration: none; }

.button_large {
  font-size: 16px;
  padding: 10 20px;
}


.button:hover,
.button:active,
.button:focus {
  color: white;
  background-color: #555;
  text-decoration: none; }


.button_red:link,
.button_red:visited {
  color: white;
  background-color: #c10023;
  text-decoration: none; }

#pricing-wrapper .button:link,
#pricing-wrapper .button:visited,
.button.button--white:link,
.button.button--white:visited {
  background-color: white;
  border-color: #333333;
  color: #333333; }

#pricing-wrapper .button:hover,
#pricing-wrapper .button:active,
#pricing-wrapper .button:focus,
.button.button--white:hover,
.button.button--white:active,
.button.button--white:focus {
  background-color: white;
  border-color: #6db3cd;
  color: #6db3cd; }

.button.button--transparent {
  background-color: transparent;
  border-width: 1px;
  border-style: solid; }

.header--white .button.button--transparent:link,
.header--white .button.button--transparent:visited,
.header--hover-white .button.button--transparent:hover,
.header--hover-white .button.button--transparent:active,
.header--hover-white .button.button--transparent:focus {
  border-color: white; }

.header--white .button.button--transparent:hover,
.header--white .button.button--transparent:active,
.header--white .button.button--transparent:focus {
  border-color: #333333; }

.button--after-title {
  display: none; }

/* ==========================================================================
   Layout
   ========================================================================== */
#page {
  background-color: white;
  min-height: 100%;
  display: table;
  height: 100%;
  width: 100%;
  table-layout: fixed;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  -moz-transition: -moz-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out; }

body.bg-beige #page {
  background-color: #f2f2eb; }

#page.is-open {
  -webkit-transform: translate3d(-235px, 0, 0);
  -moz-transform: translate3d(-235px, 0, 0);
  transform: translate3d(-235px, 0, 0); }

#main {
  display: block;
  overflow: auto;
  padding-bottom: 305px; }

#main.main--white {
  background-color: white; }

.container-wrapper {
  padding: 25px; }

.container {
  display: block;
  margin: 0 auto;
  max-width: 1700px;
  /*  width: 1320px;
    width: 100%;*/
  padding: 15px;
  position: relative; }

.col {
  float: left;
  margin: 15px;
  margin: 1.1363636363636364%;
  /* 15 / 1320 */
  position: relative; }

.container--small .col {
  margin: 1.5151515151515152%;
  /* 15 / 990 */ }

.owl-item .example {
  margin: 1.1363636363636364%;
  /* 15 / 1320 */ }

.col--centered {
  text-align: center; }

.col--right {
  float: right; }

.col--empty {
  display: none; }

.col--only {
  clear: both;
  float: none;
  margin-left: auto;
  margin-right: auto; }

.col--1,
.col--2,
.col--3,
.col--4 {
  width: 1290px;
  width: 97.72727272727273%;
  /* 1290 / 1320 */ }

.section {
  display: block;
  padding: 3% 0; }

.section--light {
  background-color: white; }

.section--medium {
  background-color: #f2f2eb; }

.section--dark {
  background-color: #666666;
  color: white; }

.section-line{
  border-top:1px solid #eee;
}

.banner {
  display: block;
  min-height: 200px;
  overflow: hidden;
  position: relative; }

  #apps_banner {
    display: none;
  }
  
.banner__img {
  display: block;
  margin: 0 -50%;
  width: 200%; }

.banner__title {
  color: white;
  left: 0;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 48%;
  width: 100%;
  text-shadow: 0px 0px 70px black; }

.banner__search {
  left: 0;
  position: absolute;
  text-align: center;
  top: 65%;
  width: 100%; }

.banner__search__input {
  background: transparent url("../img/sprite.svg") no-repeat right -663px;
  background-color: white;
  border: none;
  color: #b1b1b1;
  font-size: 16px;
  padding: 6px 11px;
  width: 220px;
  -webkit-appearance: none; }

.banner__search__input:hover {
  background-position: right -706px; }

.no-svg .banner__search__input {
  background-image: url("../img/sprite.png"); }

.banner__button {
  display: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 99;
  zoom: 1;
  width: 100%; }

.header a:link,
.header a:visited,
#header-nav__toggle span {
  color: #333333; }

.header a:hover,
.header a:active,
.header a:focus,
.no-touch #header-nav__toggle:hover span {
  color: #6db3cd; }

.header--white a:link,
.header--white a:visited,
.header--white #header-nav__toggle span,
.header--hover-white a:hover,
.header--hover-white a:active,
.header--hover-whiter a:focus,
.no-touch .header--hover-white #header-nav__toggle:hover span {
  color: white; }

.header--white a:hover,
.header--white a:active,
.header--white a:focus,
.no-touch .header--white #header-nav__toggle:hover span {
  color: #333333; }


#logo {
  background: transparent url("../img/sprite.svg") no-repeat 17px -24px;
  display: block;
  height: 100%;
  left: 1.1363636363636364%;
  /* 15 / 1320 */
  position: absolute;
  text-indent: -9999px;
  top: 0;
  width: 160px; }
  
#logo-2 {
  background: transparent url("../img/sprite.svg") no-repeat 0px -50px;
  display: block;
  height: 22px;
  margin: 0 auto 25px auto;
  text-indent: -9999px;
  width: 102px;
  zoom: 1.3;
}

.no-svg #logo {
  background-image: url("../img/sprite.png"); }

.header--white:not(.logo--black) #logo {
  background-position: 17px -74px; }

#header-nav {
  display: block;
  float: right;
  margin-right: 1.1363636363636364%;
  /* 15 / 1320 */
  line-height: 64px; }

#header-nav-wrapper > ul {
  background-color: #333333;
  color: white;
  display: block;
  font-size: 20px;
  line-height: 40px;
  margin: 0;
  overflow: hidden;
  width: 235px; }

.header-nav__primary {
  padding: 12px 0 0 0; }

.no-csstransforms3d #page.is-open .header-nav__primary {
  right: 0;
  top: 100%;
  zoom: 1;
  z-index: 110; }

#header-nav-wrapper {
  height: 1000px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out; }

#page.is-open #header-nav-wrapper {
  width: 235px;
  right: -235px; }

#page.is-open .header-nav__primary a:link,
#page.is-open .header-nav__primary a:visited {
  color: white; }

#page.is-open .header-nav__secondary a:link,
#page.is-open .header-nav__secondary a:visited {
  color: #999; }

#page.is-open #header-nav-wrapper a:hover,
#page.is-open #header-nav-wrapper a:active,
#page.is-open #header-nav-wrapper a:focus {
  color: #6db3cd; }

#header-nav__toggle {
  background: transparent url("../img/sprite.svg") no-repeat right -288px;
  cursor: pointer;
  display: block;
  padding: 6px 45px 5px 20px; }

.no-svg #header-nav__toggle {
  background-image: url("../img/sprite.png"); }

.no-touch #header-nav__toggle:hover {
  background-position: right -342px; }

.header--white #header-nav__toggle,
.no-touch .header--hover-white #header-nav__toggle:hover {
  background-position: right -234px; }

.no-touch .header--white #header-nav__toggle:hover {
  background-position: right -288px; }

#header-nav__toggle span {
  display: none; }

.header-nav__item {
  display: inline-block;
  zoom:1;
  *display:inline;
  position: relative; }

.header-nav__item > a {
  display: inline-block;
  zoom:1;
  *display:inline;
  padding: 0 20px;
  white-space: nowrap; }

  #header-nav__trial {
    display: none; }
    
.header__signup {
  display: block;
  float: right;
  padding: 0;
  text-align: right; }

.header__signup a {
  display: inline-block;
  zoom:1;
  *display:inline;
  font-weight: 500;
  line-height: 34px !important;
  margin: 18px 0;
  padding: 2px 14px 0; }

#pricing {
  background-color: #6db3cd;
  border-radius: 0 0 5px 5px;
  color: white;
  display: block;
  font-size: 12px;
  left: -103px;
  padding: 13px 15px 15px 15px;
  position: absolute;
  text-align: left;
  top: 70px;
  width: 238px;
  z-index: 120;
  zoom: 1;
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  visibility: hidden;
  
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out; }
  
#pricing.visible {
  top: 60px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  -khtml-opacity: 1.0;
  opacity: 1.0;
  visibility: visible;
}

#pricing .button {
  white-space: nowrap;
}
#pricing:after {
  content: '';
  position: absolute;
  top: -8px;
  left: 124px;
  border-style: solid;
  border-width: 0 8px 8px;
  border-color: #6db3cd transparent;
  display: block;
  width: 0;
  z-index: 1; }

#pricing h3 {
  color: white;
  margin-bottom: 0; }

#pricing .pricing__price {
  font-size: 16px;
  line-height: 40px;
  margin: 5px 0; }

.pricing__features {
  line-height: 2;
  padding: 10px 0 0 0; }

#main .pricing__features {
  padding: 10px 0 35px 0; }

#pricing .pricing__features {
  padding: 0 0 15px 0; }

.pricing__item {
  list-style: none; }

#pricing .pricing__item:before {
  content: '\203A';
  margin: 0 6px 0 0; }

#main #pricing-content {
  font-size: 16px; }

/* ==========================================================================
   Homepage
   ========================================================================== */
#slide {
  overflow: hidden;
  min-height: 330px;
  position: relative;
  width: 100%;
  z-index: 80;
  zoom: 1; }

#slogan {
  padding-top: 8px;
  height: 53%;
  left: 0;
  position: absolute;
  top: 47%;
  width: 100%;
  z-index: 85;
  zoom: 1; }

.slogan__text {
  cursor: pointer;
  display: block;
  margin-top: -60px;
  text-align: center;
  opacity: 1;
   -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out; }

.slogan__text h2 {
  color: #EEE;
  font-family: "FacitWeb", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0 20px; }

.slogan__text h1 {
  color: #EEE;
  font-size: 26px;
  line-height: 1.5;
  margin: 0;
  padding: 0 20px 20px; }
  
.slogan__text.image-loaded {
  opacity: 1;
  margin-top: -50px;
  text-shadow: 0px 0px 4px rgba(91, 91, 91, 0.12); }

.slogan__text.image-loaded h2 {
  color: white; }

.slogan__text.image-loaded h1 {
  color: white; }
      
.slide__img {
  display: block;
  position: absolute;
  width: 100%; }

#slogan .home_news_item_left_bottom {
  position: absolute; 
  bottom:-10px;
  padding-left:16px;
}

#video {
  display: none;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 83;
  zoom: 1; }

#slidenav {
  display: none; }

#slidenav a {
  background-repeat: no-repeat;
  background-position: -90px -165px;
  cursor: pointer;
  display: block;
  height: 100%;
  margin: -40px 0 0 -50%;
  text-indent: -9999px;
  width: 100%; }

#slidenav .slidenav--right {
  background-image: url("../img/sprite.svg");
  background-position: 30px -165px; }

#slidenav .slidenav--left {
  background-image: url("../img/sprite.svg");
  background-position: 110px -229px; }

.no-svg #slidenav .slidenav--right,
.no-svg #slidenav .slidenav--left {
  background-image: url("../img/sprite.png"); }

#play {
  height: 75px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 75px;
  z-index: 82;
  zoom: 1; }

#play > a {
  background: transparent url("../img/sprite.svg") no-repeat -3px -3px;
  cursor: pointer;
  display: block;
  height: 100%;
  margin: -50% 0 0 -50%;
  width: 100%;
  text-indent: -9999px; }

#play > a:hover {
  background-position: -3px -83px; }

.no-svg #play > a {
  background-image: url("../img/sprite.png"); }

#scrolldown, #slide_pagination {
  bottom: -80px;
  height: 80px;
  left: 50%;
  position: absolute;
  width: 80px;
  z-index: 86;
  zoom: 1; 
  }

#slide_pagination {
  bottom: -40px;
  width:60px;
  margin-left: -30px;
}

#scrolldown > a {
  background: transparent url("../img/sprite.svg") no-repeat center -180px;
  cursor: pointer;
  display: block;
  height: 100%;
  margin: 0 0 0 -50%;
  width: 100%;
  text-indent: -9999px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out; }

#scrolldown > a:hover, #scrolldown > a.animate {
  background-position: center -174px; }

.no-svg #scrolldown > a {
  background-image: url("../img/sprite.png"); }

.icon-playbutton:hover {
  stroke: #f0f; }

#features {
  padding-bottom: 0; }

.feature {
  /*border-bottom: 1px solid #e7e7e1;*/
  font-size: 16px;
  overflow: hidden;
  position: relative; }

.feature .container {
  padding-bottom: 0;
  padding-top: 0; }

.feature__img {
  display: block;
  height: auto;
  margin-left: -25%;
    padding: 27px 0 20px 0;
  width: 120%;
}

.feature__img--left {
  right: 0;
}

.feature__img--right {
  left: 0;
  margin-left: 0;
}

.feature__description { }

.feature__description h2 {
  margin: 0 0 10px 0; }

.feature__description__long-version {
  display: none; }

.featuredsites p {
  font-size: 18px; }
  
.try-viewbook .button {
  margin: 20px 0 0 0;
}

.section .pricing__item {
  padding: 10px 0 0 0; }

.getstarted {
  font-size: 16px; }

.getstarted .button {
  margin: 60px 0 20px 0; }

.getstarted p {
  margin: 0; }

/*
 *  Core Owl Carousel CSS File
 *  v1.3.2
 */
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; }

.owl-carousel {
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y; }

.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px); }

.owl-carousel .owl-wrapper-outer {
  overflow: hidden;
  position: relative;
  width: 0; }

.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out; }

.owl-carousel .owl-item {
  float: left; }

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
  cursor: pointer; }

.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0); }

.owl-theme .owl-controls {
  margin-top: 10px;
  text-align: center; }

.owl-theme .owl-controls.clickable .owl-buttons div:hover {
  text-decoration: none; }

.owl-theme .owl-controls .owl-page {
  display: inline-block;
  zoom: 1;
  *display: inline;}

.owl-theme .owl-controls .owl-page span {
  background: transparent url("../img/sprite.svg") no-repeat 8px -416px;
  display: block;
  height: 26px;
  width: 26px; }

.no-svg .owl-theme .owl-controls .owl-page span {
  background-image: url("../img/sprite.png"); }

.owl-theme .owl-controls .owl-page span:hover,
.owl-theme .owl-controls .owl-page.active span {
  background-position: -32px -415px; }

/* ==========================================================================
   Featured sites
   ========================================================================== */

.featured-nav {
  display: table;   /* Allow the centering to work */
  margin: 0 auto;
}

.featured-nav ul {
}

.featured-nav li {
  float:left;
  list-style:none;
  padding:0px 15px 0px 15px;
}

.subtitle {
  margin-top: 0;
  margin-bottom: 35px; }

.example {
  font-size: 12px;
  list-style: none;
  position: relative;
  overflow: hidden; }
  
.example__name {
  margin: 30px 0; }
  
.article .example__name h2 {
  display: inline;
  padding: 0 10px 0 0;  }
  
.example__profession {
  color: #ccc; }

.example__info {
  display: none; }

.example__info {
  background: #444444;
  background: rgba(68, 68, 68, 0.9);
  color: white;
  display: block;
  height: 100%;
  left: 0;
  padding: 16px;
  position: absolute;
  right: 0;
  top: 100%;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transform: translate3d(0px, 0px, 0px); }

.example__info h3 {
  color: white; }

.example__info p {
  font-size: 12px; }

.example__description {
  display: none; }
  
.feature__description__long-version {
  display: none; }

.no-touch .example:hover .example__info {
  top: 0; }

.example .col {
  float: right; }

.example__image__wrapper {
  position: relative;
  padding-bottom: 70%;
  height: 0;
  overflow: hidden; }

.example__image {
  position: absolute;
  display: block;
  width: 100%; }

.backgroundsize .example__image {
  background: transparent url("../img/browser.png") no-repeat 0 0;
  background-size: 100%;
  padding: 3.3% 0 0 0; }

/* ==========================================================================
   Apps
   ========================================================================== */

.apps {
  display: block;
  width: 100%;}

.app {
  list-style: none;
  margin: 1.5151515151515152%;
  /* 15 / 990 */
  padding-bottom: 20px;
  position: relative;}

.app__image img {
  display: block;
  margin: 27px 0 20px 0;
  width: 100%; }

.appstore {
  background: transparent url("../img/sprite.svg") no-repeat 0 -569px;
  display: block;
  height: 36px;
  text-indent: -9999px;
  width: 121px; }

.appstore:hover,
.appstore:active,
.appstore:focus {
  background-position: 0 -609px; }

.no-svg .appstore {
  background-image: url("../img/sprite.png"); }

/* ==========================================================================
   News
   ========================================================================== */


.article {
  display: block;
  font-size: 16px;
  margin: 0 0 25px 0; }

#examples .article,
#articles li {
  border-top: 1px solid #f2f2eb; }

.bg-beige #examples .article,
.bg-beige #articles .article {
  border-color: #ccc; }

.article__sub,
p.article__sub {
  color: #b1b1b1;
  font-size: 14px;
  margin: 0 0 20px 0; }

.article img {
  height: auto;
  max-width: 100%; }

.lt-ie9 .article img {
  width: 100%; }

.article ul,
.article ol {
  margin: 1em 0 1em 35px;
}

.article__text {
  margin: 15px 0 0 0; }

.pagenav__next {
  float: right;
  white-space: nowrap; }

#infscr-loading {
  margin: 0 0 40px 0; }

#infscr-loading img {
  display: none; }

/* ==========================================================================
   Support
   ========================================================================== */
/* ==========================================================================
   About
   ========================================================================== */
.team__member {
  list-style: none;
  padding: 0 0 30px 0; }

.team__member__image {
  height: 150px;
  margin: 0 0 15px 0;
  width: 150px; }

.team__member__role {
  color: #b1b1b1; }

.team__member__desc, .contact {
  font-size: 16px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  clear: both;
  color: #666666;
  background-color: #FFFFFF;
  display: block;
  font-size: 12px;
  height: 325px;
  line-height: 26px;
  margin: -325px 0 0 0;
  position: relative;
  width: 100%; 
  border-top: solid 1px #EEEEEE; }

.footer .container {
  padding-top: 0;
  padding-bottom: 0; }

.footer-primary-nav,
.footer-secondary-nav {
  display: block;
  float: left;
  margin: 25px 1.13636% 0;
  /* 15 / 1320 */
  width: 45%; }

.footer-primary-nav__item {
  list-style: none; }

.footer-primary-nav__item a:link,
.footer-primary-nav__item a:visited {
  color: #666666; }

.footer-primary-nav__item a:hover,
.footer-primary-nav__item a:active,
.footer-primary-nav__item a:focus {
  color: #6db3cd; }

.footer-secondary-nav {
  float: right;
  text-align: right; }

.footer-secondary-nav__item {
  list-style: none; }

.footer-secondary-nav__item a {
  margin: 0 8px; }

.footer-secondary-nav__item a:link,
.footer-secondary-nav__item a:visited {
  color: #b1b1b1; }

.footer-secondary-nav__item a:hover,
.footer-secondary-nav__item a:active,
.footer-secondary-nav__item a:focus {
  color: #6db3cd; }

.footer-social {
  display: inline; }

.footer-social__item {
  display: inline; }

.footer-social__item a {
  background: transparent url("../img/sprite.svg") no-repeat;
  display: inline;
  height: 30px;
  padding: 8px 15px;
  text-indent: -9999px;
  width: 30px; }

.footer-social__text {
  display: none; }

.no-svg .footer-social__item a {
  background-image: url("../img/sprite.png"); }

.footer-social__item.facebook a {
  background-position: -7px -445px; }

.footer-social__item.facebook:hover a {
  background-position: -47px -445px; }

.footer-social__item.twitter a {
  background-position: -6px -484px; }

.footer-social__item.twitter:hover a {
  background-position: -46px -484px; }

.footer-social__item.googleplus a {
  background-position: -7px -525px; }

.footer-social__item.googleplus:hover a {
  background-position: -47px -525px; }

.footer-extra {
  display: block;
  clear: both;
  margin: 1.1363636363636364%;
  /* 15 / 1320 */
  padding: 30px 0 0 0;
  text-align: center; }

.trademark {
  display: block; }
  
/* ==========================================================================
   Video background
   ========================================================================== */
  /*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */

  font-size: 10px;
  /* Allow poster to be vertially aligned. */

  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/

  /* Provide some basic defaults for fonts */

  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */

  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */

  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute;
}
/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto;
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}
/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}
/* Hide the poster after the video has started playing */
.video-js.vjs-has-started .vjs-poster {
  display: none;
}
/* Don't hide the poster if we're playing audio */
.video-js.vjs-audio.vjs-has-started .vjs-poster {
  display: block;
}
/* Hide the poster when controls are disabled because it's clickable
    and the native poster can take over */
.video-js.vjs-controls-disabled .vjs-poster {
  display: none;
}
/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em;
}
/* Move captions down when controls aren't being shown */
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}
/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-js .vjs-subtitles {
  color: #ffffff /* Subtitles are white */;
}
.video-js .vjs-captions {
  color: #ffcc66 /* Captions are yellow */;
}
.vjs-tt-cue {
  display: block;
}
/* Increase font-size when fullscreen */
.video-js.vjs-fullscreen .vjs-text-track {
  font-size: 3em;
}
/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none;
}
.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}
/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
    The .video-js classname on the video tag also isn't considered.
    This optional paragraph inside the video tag can provide a message to users
    about what's required to play video. */
.vjs-no-js {
  padding: 20px;
  color: #ccc;
  background-color: #333;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}
.vjs-no-js a,
.vjs-no-js a:visited {
  color: #F4A460;
}

#big-video-wrap {
  background-color: #555;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
#big-video-vid,
#big-video-image {
  position: absolute;
  width: 100%;
}

.transparent {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

.vjs-control-bar,
.vjs-big-play-button{
  display: none !important;
}

#videoOverlay {
  /* transparent PNG image for IE8 :'( */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCODFBQTk3RDVCOTQxMUU0OUIyRjhGMDVGNjc2MkNFQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCODFBQTk3RTVCOTQxMUU0OUIyRjhGMDVGNjc2MkNFQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI4MUFBOTdCNUI5NDExRTQ5QjJGOEYwNUY2NzYyQ0VCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI4MUFBOTdDNUI5NDExRTQ5QjJGOEYwNUY2NzYyQ0VCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7Jt5NgAAAA9JREFUeNpiyN18zhcgwAAFuwI8qm/kMAAAAABJRU5ErkJggg==) repeat top left;
  background: rgba(92, 162, 188, 0.3);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  zoom: 1:
  z-index: 90;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 380px) {
  
  #header-nav__toggle span {
    display: inline;
    margin: 0 10px 0 0; }

  .header-nav__primary {
    margin-right: 132px; }
    
  .slogan__text h1 {
    font-size: 28px; }
     
  h2,
  .example__profession {
  font-size: 24px;  
  } }

@media only screen and (min-width: 550px) {

  .container--small .col--1 {
    width: 465px;
    width: 46.96969696969697%;
    /* 465 / 990 */ }

  .container--small .col--1.contact {
    width: 960px;
    width: 96.96969696969697%;
    /* 960 / 990 */ }
    
  .article .example__name h2 {
    display: inline;
    padding: 0 10px 0 0;  }
  
  .example__profession {
    color: #ccc;
    display: inline; }
    
   .more {
    margin: -15px 0 0 0;
    } }

@media only screen and (min-width: 700px) {
  
  .team__member:nth-child(2n-1) {
    clear: both;
  }
  
  body {
    background-color: white; }

  h1 {
    font-size: 40px;
    margin: 115px 0 0 0; }

  h2,
  .example__profession {
    font-size: 30px; }

  h3 {
    margin-bottom: 15px;
  }

  h3,
  .section .pricing__price,
  .header-nav__primary,
  .intro {
    font-size: 22px;
    line-height: 1.4; }

  h4 {
    font-size: 22px; }

  .container {
    padding: 25px; }

  .col--1 {
    width: 630px;
    width: 47.72727272727273%;
    /* 630 / 1320 */ }

  .owl-item .example {
    margin: 2.3809523809523808%;
    /* 15 / 630 */ }

  .col--2 {
    width: 1290px;
    width: 97.72727272727273%;
    /* 1290 / 1320 */ }

  .header__signup {
    position: absolute;
    right: 25px;
    top: 0; }

  #header-nav {
    float: none;
    line-height: inherit;
    margin-left: 150px;
    position: relative;
    right: auto;
    text-align: right;
    top: auto; }

  #header-nav-wrapper {
    height: auto;
    overflow: visible;
    position: relative;
    right: auto;
    top: auto;
    width: auto; }

  #header-nav-wrapper > ul {
    background-color: transparent;
    display: block;
    font-family: "FacitWeb", sans-serif;
    font-size: 14px;
    overflow: visible;
    margin-right: 129px;
    padding: 0;
    position: relative;
    right: auto;
    top: auto;
    width: auto; }

  #header-nav-wrapper .header-nav__secondary {
    display: none; }

  .header__signup {
    margin-right: 16px;
    margin-left: 16px; }

  #header-nav__toggle {
    display: none; }

  .header-nav__item {
    border-bottom: 4px solid transparent;
    margin: 6px 8px 0; }

  #header-nav__home {
    display: none; }
  
    #header-nav__trial {
      display: none; }
    
  .header-nav__item > a {
    line-height: 64px;
    padding: 0; }

  .header__signup {
    display: inline-block;
    zoom:1;
    *display:inline; }

  #main {
    padding-bottom: 91px; }

  .slogan__text h2 {
    font-size: 40px; }

  .slogan__text h1 {
    font-size: 38px; }

  #slidenav {
    display: block;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    z-index: 85;
    zoom: 1; }
    
  .feature {
  border-bottom: none;
  }

  .feature .col {
    display: table;
    height: 540px;
    margin: 0;
    width: 50%; }

  .feature__description {
    padding: 0 15%;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    width: 100%; }

  .feature__description__short-version {
    display: none; }

  .feature__description__long-version {
    display: inline; }

    .create-site .feature__img__container {
      position: relative;
      right: -6%;
    }

    .manage-images .feature__img__container {
      position: relative;
      left: -6%;
    }

  .feature__img {
    height: 450px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 45px;
    width: auto; }

  .example__description {
    display: none; }

  .more {
    display: block;
    margin: 0;
    text-align: right; }

  .button--after-title {
    display: inline-block;
    zoom:1;
    *display:inline;
    margin: 0 0 0 50px;
    vertical-align: 6px; }

  .banner__img {
    margin: 0 -30%;
    width: 160%; }

  .banner__button {
    display: block;
    padding: 20px 25px 0 0;
    position: absolute;
    right: 1.1363636363636364%;
    /* 15 / 1320 */
    top: 0; }
    
  .app {
    max-height: 320px;
    overflow-y: visible;
  }

  .app__description {
    margin: 25px 0 0 220px; }

  .app__image {
    border-right: 1px solid #ccc;
    float: left;
    overflow: hidden;
    width: 192px; }

  .app__image img {
    height: 225px;
    width: auto; }

    .app_lightroom {
      position: relative;
      right: 86px;
    }

    .app_ipad {
      position: relative;
      right: 10px;
    }
     
    .app_iphone {
      position: relative;
      right: 36px;
    }

  .footer {
    height: 91px;
    line-height: 91px;
    margin: -91px 0 0 0;
    text-align: center; }

  .footer-primary-nav {
    display: none; }

  .footer-secondary-nav {
    display: inline;
    float: none;
    text-align: inherit;
    width: auto; }

  .footer-secondary-nav__list {
    display: inline; }

  .footer-secondary-nav__item {
    display: inline; }

  .footer-extra {
    display: inline;
    padding: 0; }

  .footer-social__item {
    margin-top: 20px; }

  .trademark {
    display: inline;
    padding: 0 8px; } 
    
  .team__member {
    float: left;
    margin: 0 1.1627906976744186% 0 0; /* 15 / 1290 */
    width: 48.83720930232558%; /* 630 / 1290 */
  }  
  .team__member:nth-child(2n) {
    margin: 0 0 0 1.1627906976744186%; /* 15 / 1290 */
  } }

@media only screen and (max-width: 700px) {
  .header-nav__item {
    display: block;
  }
  
  #header-nav__trial {
    display: block;
  }
  
  #apps_banner {
    display: block;
  }

  .home_news_item_left_bottom {
    display:none;
  }
}


@media only screen and (min-width: 800px) {
  #header-nav {
    margin-left: 170px; }

  .header-nav__item {
    margin-left: 16px;
    margin-right: 16px; } }
@media only screen and (min-width: 1000px) {
  .col--1 {
    width: 410px;
    width: 31.06060606060606%;
    /* 410 / 1320 */ }

  .owl-item .example {
    margin: 3.6585365853658534%;
    /* 15 / 410 */ }

  .col--2 {
    width: 850px;
    width: 64.39393939393939%;
    /* 850 / 1320 */ }

  .container--small .col--1,
  .container--small .col--1.contact {
    width: 300px;
    width: 30.303030303030304%;
    /* 300 / 990 */ }

  .container--small .col--2 {
    width: 630px;
    width: 63.63636363636364%;
    /* 630 / 990 */ }

  .container--small .col--3 {
    width: 960px;
    width: 96.969696969696973%;
    /* 960 / 990 */ }

  .banner__img {
    margin: 0 -15%;
    width: 130%; }

  .app {
    float: left;
    width: 46.96969696969697%;
    /* 465 / 990 */}

  .app__image {
    height: 320px;
  }

  .app__image img {
    height: 225px;
    margin: 47px 0 40px 0; }
    
  .team__member {
    margin: 0 1.764705882352941% 0 0; /* 15 / 850 */
    width: 48.23529411764706%; /* 410 / 850 */
  }  
  .team__member:nth-child(2n) {
    margin: 0 0 0 1.764705882352941%; /* 15 / 850 */
  } }

@media only screen and (min-width: 1360px) {

    .slogan__text__large h1 {
      font-size: 64px;
    }

  .container--small {
    max-width: 1275px;
    /* width: 990px; */ }

  .col--empty {
    display: block; }

  .col--1 {
    width: 300px;
    width: 22.727272727272727%;
    /* 300 / 1320 */ }

  .col--2 {
    width: 630px;
    width: 47.72727272727273%;
    /* 630 / 1320 */ }

  .col--3 {
    width: 960px;
    width: 72.72727272727273%;
    /* 960 / 1320 */ }

  .owl-item .example {
    margin: 5%;
    /* 15 / 300 */ }

  .banner__img {
    margin: 0;
    width: 100%; }

  .app__image {
    height: 280px; }

  .app__image img {
    margin: 27px 0 20px 0; }
    
  .team__member {
    margin: 0 2.3809523809523808% 0 0; /* 15 / 630 */
    width: 47.619047619047616%; /* 300 / 630 */
  }  
  .team__member:nth-child(2n) {
    margin: 0 0 0 2.3809523809523808%; /* 15 / 630 */
  } }
  
  @media only screen and (min-width: 1700px) {
    .slogan__text h1 {
      font-size: 54px;
    }
  }
  
  @media only screen and (max-width: 400px) {
    #home_feature_title {
      display: block;
      margin-bottom: 14px;
    }
  }
  
  #home_feature_title {
    margin-right: 18px;
    color: white;
    opacity: 0.7;
  }
  #home_video_play_btn {
    position: relative;
    top: 10px;
    left: -2px;
  }

/* ==========================================================================
   Clearfix
   ========================================================================== */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }
Window size: 1423 x 873
Viewport size: 1423 x 801