/*---------------------------------------------------------
            Media queries - bootstrap screen sizes
---------------------------------------------------------*/
/*---------------------------------------------------------
                        Mixins used
---------------------------------------------------------*/
/*
 * http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
 */
/**************************************
                Mixins
**************************************/
/**************************************
                Defaults
**************************************/
@import url(//fonts.googleapis.com/css?family=Courgette&subset=latin,latin-ext);
@import url(//fonts.googleapis.com/css?family=Roboto:400,700,100,300);
@import url(//fonts.googleapis.com/css?family=Oleo+Script);
@import url(//fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext);
@import url(//fonts.googleapis.com/css?family=Dosis:200);
ol, ul {
  list-style: none; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #727272;
  background-color: #f2f2f2; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oleo Script', cursive; }

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100; }

h3 {
  font-size: 33px;
  font-family: 'Dosis', sans-serif;
  font-weight: 200; }

/*
 * Notifications
 */
.notifications-wrapper {
  width: 100%;
  max-width: 500px;
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 1; }
  @media only screen and (min-width: 768px) {
    .notifications-wrapper {
      top: 145px; } }

/**************************************
            Title
**************************************/
.navbar {
  border: none;
  border-radius: 0;
  margin-bottom: 0; }
  .navbar .header-wrapper {
    width: 100%;
    background-color: #fff; }
  .navbar .container-fluid {
    width: 320px; }
    @media (min-width: 768px) {
      .navbar .container-fluid {
        width: 450px; } }
    .navbar .container-fluid .navbar-header {
      margin: 0 auto;
      width: 100%;
      padding-left: 15px; }
      .navbar .container-fluid .navbar-header .navbar-logo {
        height: 70px; }
        @media (min-width: 768px) {
          .navbar .container-fluid .navbar-header .navbar-logo {
            height: 110px; } }
      .navbar .container-fluid .navbar-header .navbar-brand {
        height: 100px;
        padding: 15px 15px 15px 0; }
        @media (min-width: 768px) {
          .navbar .container-fluid .navbar-header .navbar-brand {
            height: 145px; } }
      .navbar .container-fluid .navbar-header h2 {
        background: url(../images/landing/title.png) no-repeat 75px;
        height: 50px;
        text-indent: -10000px;
        color: #444;
        margin-bottom: 0;
        margin-top: 10px;
        background-size: auto 35px; }
        @media (min-width: 768px) {
          .navbar .container-fluid .navbar-header h2 {
            margin-top: 30px;
            background-position: 110px 0;
            background-size: auto; } }
      .navbar .container-fluid .navbar-header h3 {
        font-family: 'Oleo Script', cursive;
        margin-top: 0;
        color: #7f7f7f;
        font-size: 16px;
        text-indent: 4px; }
        @media (min-width: 768px) {
          .navbar .container-fluid .navbar-header h3 {
            font-size: 22px;
            text-indent: 10px; } }

/**************************************
            Login
**************************************/
.login-container {
  background: #fff;
  padding: 5px 0; }
  .login-container > .row {
    margin: 0; }

/**************************************
            Video
**************************************/
.intro-video-wrapper {
  background: url(../images/landing/cooking-pattern-green.png);
  width: 100%;
  margin-bottom: 20px; }
  .intro-video-wrapper .intro-video {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0; }
    .intro-video-wrapper .intro-video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: 720px;
      max-height: 405px; }
    @media (min-width: 768px) {
      .intro-video-wrapper .intro-video {
        padding-bottom: 405px; } }

/**************************************
            Sources
**************************************/
.source {
  background: url(../images/landing/sources-in-progress.png) no-repeat;
  width: 180px;
  height: 181px;
  margin: 0 auto; }

.source.upload {
  background-position: -180px 0; }

.source.save {
  background-position: -360px 0; }

.source.scrape {
  background-position: -540px 0; }

.sources {
  margin-top: 40px;
  font-size: 25px; }
  .sources > div {
    padding-left: 0;
    padding-right: 0; }
  .sources .source-text {
    text-align: center;
    font-family: 'Courgette', cursive;
    text-shadow: 2px 2px #e1e1e1;
    color: #444;
    font-size: 25px;
    margin: 20px auto 0 auto;
    width: 263px;
    height: 100px; }

.navigation-icon {
  background: url(../images/landing/icons.png) no-repeat;
  width: 36px;
  height: 36px; }
  .navigation-icon.next {
    background-position: -36px 0; }

.carousel-control.left {
  background-image: none; }
.carousel-control.right {
  background-image: none; }
.carousel-control .navigation-icon {
  top: 72.5px;
  position: absolute; }
  .carousel-control .navigation-icon.prev {
    left: -10px; }
  .carousel-control .navigation-icon.next {
    right: -10px; }
  @media (min-width: 768px) {
    .carousel-control .navigation-icon.prev {
      left: 5px; }
    .carousel-control .navigation-icon.next {
      right: 5px; } }

/**************************************
            Cloud
**************************************/
.cloud {
  background: url(../images/landing/cloud.png) no-repeat center;
  width: 80vw;
  height: 70vw;
  margin: 0 auto;
  margin-bottom: 25px;
  background-size: contain;
  max-width: 508px;
  max-height: 449px;
  position: relative; }

.cloud-text {
  text-align: center;
  font-family: 'Courgette', cursive;
  text-shadow: 2px 2px #e1e1e1;
  color: #444;
  font-size: 25px;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 270px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  @media (min-width: 500px) {
    .cloud-text {
      font-size: 25px; } }

.cloud-collector {
  width: 56%;
  height: 20px;
  margin: 0 auto;
  margin-top: 25px;
  position: relative;
  display: none; }
  @media (min-width: 768px) {
    .cloud-collector {
      display: block;
      background-color: #8b8b8b; } }
  @media (min-width: 992px) {
    .cloud-collector {
      width: 80%; } }
  .cloud-collector .collector {
    background-color: #8b8b8b;
    width: 20px;
    height: 25px;
    position: absolute;
    top: -25px; }
    .cloud-collector .collector.source-1 {
      left: 0; }
    .cloud-collector .collector.source-2 {
      left: 32%; }
    .cloud-collector .collector.source-3 {
      left: 65%; }
    .cloud-collector .collector.source-4 {
      right: 0; }

/**************************************
            Devices
**************************************/
.device {
  background: url(../images/landing/devices.png) no-repeat bottom;
  height: 209px;
  margin: 0 auto; }

.device.phone {
  background-position: -629px 0;
  width: 66px; }

.device.tablet {
  background-position: -506px 0;
  width: 123px; }

.device.laptop {
  background-position: -250px 0;
  width: 256px; }

.device.desktop {
  background-position: 0 0;
  width: 250px; }
  @media (min-width: 992px) {
    .device.desktop {
      margin-left: 47px; } }
  @media (min-width: 1200px) {
    .device.desktop {
      margin-left: 80px; } }

.devices {
  width: 100%;
  height: 300px; }
  .devices > div {
    padding-left: 0;
    padding-right: 0; }

.devices-holder {
  background: url(../images/landing/devices-holder.png) no-repeat center top 40px;
  width: 95vw;
  max-width: 1440px;
  height: 434px;
  position: absolute;
  bottom: -134px;
  right: 50%;
  -webkit-transform: translate(50%, 0);
  -moz-transform: translate(50%, 0);
  -ms-transform: translate(50%, 0);
  -o-transform: translate(50%, 0);
  transform: translate(50%, 0); }
  @media (min-width: 992px) {
    .devices-holder {
      bottom: auto; } }

.devices-title {
  margin-top: 2vw;
  text-align: center;
  font-size: 2em;
  text-align: center;
  font-family: 'Courgette', cursive;
  text-shadow: 2px 2px #e1e1e1;
  color: #444;
  font-size: 25px; }

/**************************************
                Steps
**************************************/
.steps {
  position: absolute;
  height: 100%;
  width: 60px;
  top: 780px;
  left: 0;
  display: none; }
  @media (min-width: 1050px) {
    .steps {
      display: block; } }
  .steps .step {
    background: url(../images/landing/icons.png) no-repeat -108px 0;
    width: 60px;
    height: 62px; }
    .steps .step span {
      color: #000;
      font-size: 30px;
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      -webkit-transform: translate(0, 25%);
      -moz-transform: translate(0, 25%);
      -ms-transform: translate(0, 25%);
      -o-transform: translate(0, 25%);
      transform: translate(0, 25%);
      padding-left: 15px;
      display: inline-block; }
    .steps .step.one {
      margin-top: 7px; }
    .steps .step.two {
      margin-top: 380px; }
    .steps .step.three {
      margin-top: 320px; }

/**************************************
                Content
**************************************/
.content-container {
  float: none;
  background-color: #e1e1e1;
  padding: 30px; }
  .content-container h4.pros-cons-title {
    font-size: 33px;
    font-family: 'Dosis', sans-serif;
    font-weight: 200; }
    .content-container h4.pros-cons-title.cons-title {
      margin-top: 55px; }
  @media (min-width: 768px) {
    .content-container .pros-cons-row:nth-child(n+2) {
      margin-top: 25px; } }
  .content-container .pros-container-row {
    margin-top: 10px; }
    @media (min-width: 768px) {
      .content-container .pros-container-row {
        margin-top: 35px; } }
  .content-container .pros-cons-logo-container {
    height: 100%; }
  .content-container .pros-cons-row .pros-cons-icon {
    background: url(../images/landing/pros-cons.png) no-repeat bottom;
    height: 44px;
    display: inline-block; }
  .content-container .pros-cons-row .pros-cons-icon.privacy {
    background-position: 0 0;
    width: 36px; }
  .content-container .pros-cons-row .pros-cons-icon.search {
    background-position: -36px 0;
    width: 40px; }
  .content-container .pros-cons-row .pros-cons-icon.storage {
    background-position: -76px 0;
    width: 37px; }
  .content-container .pros-cons-row .pros-cons-icon.practical {
    background-position: -113px 0;
    width: 45px; }
  .content-container .pros-cons-row .pros-cons-icon.organized {
    background-position: -158px 0;
    width: 43px; }
  .content-container .pros-cons-row .pros-cons-icon.share {
    background-position: -201px 0;
    width: 40px; }
  .content-container .pros-cons-row .pros-cons-icon.tagging {
    background-position: -241px 0;
    width: 40px; }
  .content-container .pros-cons-row .pros-cons-icon.simple {
    background-position: -281px 0;
    width: 40px; }
  .content-container .pros-cons-row .pros-cons-icon.cons-cooking {
    background-position: -321px 0;
    width: 44px; }
  .content-container .pros-cons-row .pros-cons-text {
    margin-left: 10px;
    position: absolute;
    top: 50%;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%); }
  @media (max-width: 768px) {
    .content-container .pros-cons-row .pros-row-item, .content-container .pros-cons-row .cons-row-item {
      margin-top: 15px; } }
  @media (min-width: 992px) {
    .content-container .pros-cons-row .pros-row-item:hover {
      color: #f67c38; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.privacy {
        background-position: -365px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.search {
        background-position: -401px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.storage {
        background-position: -441px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.practical {
        background-position: -478px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.organized {
        background-position: -523px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.share {
        background-position: -566px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.tagging {
        background-position: -606px 0; }
      .content-container .pros-cons-row .pros-row-item:hover > .pros-cons-icon.simple {
        background-position: -646px 0; } }
  .content-container .cons-container-row {
    margin-top: 10px; }
    @media (min-width: 768px) {
      .content-container .cons-container-row {
        height: 80px;
        margin-top: 35px; } }
  .content-container #pros-logo {
    width: 175px;
    height: 208px;
    position: absolute;
    background: url(../images/landing/logo-large.png) no-repeat bottom;
    background-position: 0 0; }
  .content-container .cons-logo {
    width: 88px;
    height: 105px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: url(../images/landing/logo-red.png) no-repeat bottom; }

#pros-book-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -55%);
  -moz-transform: translate(0, -55%);
  -ms-transform: translate(0, -55%);
  -o-transform: translate(0, -55%);
  transform: translate(0, -55%);
  padding-left: 8px;
  padding-right: 18px;
  color: #fff;
  font-family: 'Open Sans', sans-serif; }

/**************************************
                Cook
**************************************/
.cook-wrapper {
  max-width: 525px;
  max-height: 500px;
  position: relative;
  margin-top: 80px; }
  @media (min-width: 768px) {
    .cook-wrapper {
      margin-top: 20px; } }
  .cook-wrapper .cook {
    background: url(../images/landing/cook.png) no-repeat left bottom;
    width: 40vw;
    height: 48vw;
    background-size: 195%;
    max-width: 400px;
    max-height: 480px;
    z-index: 1;
    margin-left: -6vmin; }
  .cook-wrapper .cook-text {
    background: url(../images/landing/cook.png) no-repeat;
    background-position: 75% 100%;
    width: 46vw;
    height: 25vw;
    max-width: 287px;
    max-height: 182px;
    position: absolute;
    top: -25%;
    left: 8vw;
    background-size: 300%;
    z-index: 2; }
    @media (min-width: 768px) {
      .cook-wrapper .cook-text {
        background-position: 100% -8%;
        max-width: 450px;
        max-height: 247px;
        top: -10%;
        left: 22vw;
        background-size: 205%;
        z-index: -1; } }
    @media (min-width: 992px) {
      .cook-wrapper .cook-text {
        left: 225px; } }

/**************************************
                Footer
**************************************/
.footer {
  margin-left: 0;
  margin-right: 0;
  position: relative; }

.key-description {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 80px;
  width: 350px; }
  @media (min-width: 768px) {
    .key-description {
      display: block; } }
  @media (min-width: 992px) {
    .key-description {
      width: 560px;
      left: 55%;
      bottom: 150px;
      -webkit-transform: translate(-30%, 0);
      -moz-transform: translate(-30%, 0);
      -ms-transform: translate(-30%, 0);
      -o-transform: translate(-30%, 0);
      transform: translate(-30%, 0); } }
  @media (min-width: 1200px) {
    .key-description {
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      transform: translate(-50%, 0); } }
  .key-description p {
    font-size: 44px;
    color: #000;
    font-family: 'Dosis', sans-serif;
    font-weight: 200; }

.footer-links {
  position: absolute;
  bottom: 5px;
  right: 5%;
  width: 45%;
  max-width: 840px; }
  .footer-links > div {
    padding-left: 0;
    padding-right: 0; }
  @media (min-width: 768px) {
    .footer-links {
      right: 3%;
      width: 72%; }
      .footer-links > div {
        padding-left: 5px;
        padding-right: 5px; } }
  @media (min-width: 992px) {
    .footer-links {
      width: 65%; } }
  .footer-links .info {
    color: #f27e22;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 20px; }
  .footer-links a {
    color: #626262;
    font-size: 11px;
    height: 30px;
    line-height: 30px;
    display: inline-block; }
    .footer-links a > span {
      display: block; }
    @media (min-width: 768px) {
      .footer-links a {
        font-size: 15px; } }
  .footer-links .link-icon {
    background: url(../images/landing/icons.png) no-repeat;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px; }
    .footer-links .link-icon.fb {
      width: 27px;
      background-position: -168px 0; }
    .footer-links .link-icon.tw {
      width: 36px;
      background-position: -195px 0; }
    .footer-links .link-icon.email {
      width: 30px;
      height: 21px;
      background-position: -231px 0; }

.cookie-warning {
  padding-right: 0;
  padding-left: 0; }
  .cookie-warning.hidden {
    display: none; }
  .cookie-warning .alert {
    color: #DE6D10;
    background-color: #FBCF9F;
    border-color: #DE6D10;
    font-size: 14px;
    border-radius: 0;
    margin: 0 20px; }

/*---------------------------------------------------------
                    USER REGISTRATION
---------------------------------------------------------*/
span.form-control-radio-label {
  display: inline-block;
  margin-top: 3px; }

/*# sourceMappingURL=cookbook-landing.css.map */