/* Design & Code (c) Diffuse Interactive */
@import url("http://hello.myfonts.net/count/26c634");
@font-face {font-family: 'MuseoSansRounded-300';src: url('../fonts/26C634_0_0.eot');src: url('../fonts/26C634_0_0d41d.eot?#iefix') format('embedded-opentype'),url('../fonts/26C634_0_0.woff') format('woff'),url('../fonts/26C634_0_0.ttf') format('truetype');}
@font-face {font-family: 'MuseoSansRounded-900';src: url('../fonts/26C634_1_0.eot');src: url('../fonts/26C634_1_0d41d.eot?#iefix') format('embedded-opentype'),url('../fonts/26C634_1_0.woff') format('woff'),url('../fonts/26C634_1_0.ttf') format('truetype');}
@font-face {font-family: 'MuseoSansRounded-500';src: url('../fonts/26C634_2_0.eot');src: url('../fonts/26C634_2_0d41d.eot?#iefix') format('embedded-opentype'),url('../fonts/26C634_2_0.woff') format('woff'),url('../fonts/26C634_2_0.ttf') format('truetype');}
@font-face {font-family: 'MuseoSansRounded-100';src: url('../fonts/26C634_3_0.eot');src: url('../fonts/26C634_3_0d41d.eot?#iefix') format('embedded-opentype'),url('../fonts/26C634_3_0.woff') format('woff'),url('../fonts/26C634_3_0.ttf') format('truetype');}
@font-face {font-family: 'MuseoSansRounded-1000';src: url('../fonts/26C634_4_0.eot');src: url('../fonts/26C634_4_0d41d.eot?#iefix') format('embedded-opentype'),url('../fonts/26C634_4_0.woff') format('woff'),url('../fonts/26C634_4_0.ttf') format('truetype');}
@font-face {font-family: 'MuseoSansRounded-700';src: url('../fonts/26C634_5_0.eot');src: url('../fonts/26C634_5_0d41d.eot?#iefix') format('embedded-opentype'),url('../fonts/26C634_5_0.woff') format('woff'),url('../fonts/26C634_5_0.ttf') format('truetype');}
 
 
* { outline:none; }

html, body {
	padding: 0;
	margin: 0;
}

body {
  font-family: 'MuseoSansRounded-300', 'Helvetica', sans-serif;
  font-size: 13px;
  color: #414346;
  background: #fff;
}

#wrapper {
  width: 100%;
  padding: 0;
}

  section#top-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #303030;
    z-index: 10010; 
/*    -webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.2);    */
    opacity: 0;    
    top: -60px; 
    filter: alpha(opacity=0); 
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;  
  }
  
  section#top-fixed.visible {
    opacity: 1;     
    filter: alpha(opacity=1); 
    top:0;    
  }
  
    section#top-fixed #logo-fixed {
      float : left;
      margin: 19px 0 0 25px;
      height: 23px;
      width: 110px;
      line-height: 24px;
      text-indent: 111px;
      overflow: hidden;
      background: transparent url('../images/sprite.png') no-repeat -140px 0;
    }
  
    section#top-fixed ul.social {
      float : right;
    }

      section#top-fixed ul.social li {
        position: relative;
        float : left;
        height: 60px;
        width: 60px;
        border-left: 1px solid #444;
      }

      section#top-fixed ul.social li a {
        float : left;
        height: 60px;
        width: 60px;
        text-indent: 70px;
        line-height: 70px;
        overflow: hidden;
        background: transparent url('../images/sprite.png') no-repeat -750px -250px;
      }

        section#top-fixed ul.social li a span {
          position: absolute;
          height: 60px;
          width: 60px;
          top: 0;
          left: 0;
          background: #33CCFF url('../images/sprite.png') no-repeat -125px -110px;
          opacity: 0;     
          filter: alpha(opacity=0); 
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;  
        }
      
          section#top-fixed ul.social li a:hover span {
            opacity: 1;
            filter: alpha(opacity=1);
          }
        
      section#top-fixed ul.social li.facebook a {
        background-position : -250px -750px;
      }
      
        section#top-fixed ul.social li.facebook a span {
          background-color : #195E98;
          background-position : -250px -810px;
        }

      section#top-fixed ul.social li.twitter a {
        background-position : -310px -750px;
      }
      
        section#top-fixed ul.social li.twitter a span {
          background-color : #33CCFF;
          background-position : -310px -810px;
        }

      section#top-fixed ul.social li.googleplus a {
        background-position : -370px -750px;
      }
      
        section#top-fixed ul.social li.googleplus a span {
          background-color : #E64724;
          background-position : -370px -810px;
        }

    section#top-fixed nav ul {
      float : right;
      margin : 0 20px 0 0;
    }

      section#top-fixed nav ul li {
        float : left;
        height: 60px;
        line-height: 60px;
        margin: 0 10px;
      }
  
        section#top-fixed nav ul li a {
          font-size: 13px;
          text-transform: uppercase;
          color: #777;
          text-decoration: none;
        }
  
        section#top-fixed nav ul li a:hover {
          color: #fff;
        }
    
  section#top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 10000; 
  }

    section#top #logo {
      float : left;
      margin: 34px 0 0 40px;
      height: 31px;
      width: 135px;
      line-height: 32px;
      text-indent: 136px;
      overflow: hidden;
      background: transparent url('../images/sprite.png') no-repeat top left;
    }

    section#top nav {
      float: right;
    }
  
      section#top nav ul {
        float: right;
        margin: 0 40px 0 0;
      }
  
        section#top nav ul li {
          float: left;
          margin: 0 20px;
          line-height: 100px;
        }
  
        section#top nav ul li a {
          font-size: 14px;
          text-transform: uppercase;
          color: #fff;
          text-decoration: none;
        }

  header#intro {
    position: relative;
    width: 100%;
    height: 600px;
    background: #70bc4b;
    z-index: 1000;
    overflow: hidden;
  }
  
    header#intro .arrow {
      position: absolute;
      width: 100%;
      bottom: -45px;
      height: 10px;
      background: #fff;
      cursor: pointer;
    }
    
      header#intro .arrow span {
        position: absolute;
        left: 50%;
        top: -34px;
        margin-left: -51px;
        width: 102px;
        height: 34px;
        background: transparent url('../images/sprite.png') no-repeat 0 -50px;
      }
    
        header#intro .arrow:hover span {
          -webkit-transform: scale(1.2);
        }
  
    header#intro .text {
      position: absolute;
      margin: 0 0 0 -500px;
      width: 1000px;
      left: 50%;
      top:30%;
      text-align: center;
      opacity:0;
    }
          
      header#intro .text h1 {
        font-size: 63px;
        color: #fff;
      }
      
      header#intro .text h2 {
        font-size: 30px;
        color: #fff;
      }
      
        header#intro .text h2 span {
          font-size: 30px;
          color: #fff;
        }
      
      header#intro .text .playvideo {
        display: inline-block;
        color: #fff;
        background: transparent url('../images/sprite.png') no-repeat 0 -110px;
        height: 56px;
        line-height: 56px;
        margin: 10px 0 0 0;
        padding: 0 0 0 70px;
        font-size: 30px;
        font-weight: 100;
        opacity:0;
        text-decoration: none;
      }
   
/* SECTIONS */
  section {}
  
    .content {
      width: 960px;
      margin: 0 auto;
    }
  
      .content h1 {
        font-size: 50px;
        color: #303030;
        margin: 0 0 10px 0;
      }
  
      .content h2 {
        font-size: 25px;
        color: #777777;
      }    
      
  section#about {
    position: relative;
    width: 100%;
    background: #fff;
    height: auto;
    padding: 10px 0 0 0;
  }
    
    section#about .content {
    text-align: center;
    height: auto;
    padding-bottom: 20px;
    }
      
        #drawings {
          position: relative;
        }
              
          #drawings .drawing {
            position: absolute;
            background: transparent url('../images/sprite.png') no-repeat 0 0;  
          }
        
          #drawings #rocket {
            background-position: 0 -350px;
            width: 179px;
            height: 198px; 
          }
        
          #drawings #cloud1 {
            background-position: -215px -595px;
            width: 230px;
            height: 138px;
          }
        
          #drawings  #cloud2 {
            background-position: 0 -680px;
            width: 175px;
            height: 106px;        
          }
          
          #drawings #tablet {
            background-position: -215px -485px;
            width: 130px;
            height: 105px;
          }
          
          #drawings #chair {
            background-position: 0 -550px;
            width: 210px;
            height: 129px;
          }
          
          #drawings #paris {
            background-position: -180px -350px;
            height: 132px;
            width: 154px;
          }
      
        #phone {
          position: relative;
          width: 309px;
          height: 724px;
          margin: 0 auto;
        }
        
          #phone .app-content {
            position: absolute;
            top: 94px;
            left: 25px;
            width: 258px;
            height: 456px;
            background: #79bf3b;
            overflow: hidden;
          }
        
          #phone .app-controls {
            position: absolute;
            top: 94px;
            left: 25px;
            width: 258px;
            height: 456px;
            background: transparent url('../images/sprite.png') no-repeat -400px 0;
          }
        
          #phone .loadscreen {
            position: absolute;
            top: 94px;
            left: 25px;
            width: 258px;
            height: 456px;
          }
        
          #phone .phone {
            position: relative;
            width: 309px;
            height: 724px;
            background: transparent url('../images/phone-sprite.png') no-repeat 0 0;
          }  

          #phone .phone  {
            background-image: url('../images/phone-sprite.png');
            background-size: 304px auto;
          }
      
  section#availability {
    position: relative;
    width: 100%;
    background: #fff;
    padding-top: 110px;
  }

      section#availability .content {
        text-align: center;
      }
      
      section#availability #download {
        border-top: 0px;
        text-align: left;        
      }
      
        section#availability .content .appstore {
          float: left;
          display: inline;
          width: 200px;
          height: 69px;
          background: transparent url('../images/sprite.png') no-repeat  -450px -480px;
          opacity: 0.5;
          filter: alpha(opacity=0.5);
          margin: 50px 0;
          text-indent: 210px;
          line-height: 70px;
          overflow: hidden;          
          -webkit-transition: all 0.1s ease-in-out;
          -moz-transition: all 0.1s ease-in-out;
          -o-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;  
        }
      
          section#availability .content .appstore:hover {
            opacity: 1;
            filter: alpha(opacity=1);
          }
      
       section#availability .content > div {
          float: left;
          display: inline;
          width: 710px;
          padding: 50px 0 50px 50px;
          line-height: 69px;
          font-size: 28px;
          color: #777;
        }
        
          .availability > div a {
            color: #79bf3b;
          }
      
  section#organize {
    position: relative;
    float: left;
    width: 100%;
    background: #f2f2f2;
    padding: 80px 0 0 0;
  }
  
    section#organize .content {
      text-align: center;
      height: auto;
    }
  
      section#organize .content h2 {
        margin: 0 auto 80px auto;
        width: 500px;
      }
    
      #photos {
        position: relative;
        height: 340px;
      }
        
        #photos .photo {
          position: absolute;
          background: #fff;
          height: 230px;
          width: 200px;
          padding: 10px;
          -webkit-box-shadow:  0px 0px 8px 0px rgba(0, 0, 0, 0.2);      
          box-shadow:  0px 0px 8px 0px rgba(0, 0, 0, 0.2);          
        }
        
    .label {
      background: #303030;
      color: #fff;
      text-transform: uppercase;
      float: left;
      position: absolute;
      line-height: 23px;
      height: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 13px;
      top:290px;
      display:none;
    }
    
      .label.bucketlist {
        left: 90px;
      }
    
      .label.birthday {
        left: 415px;
      }
    
      .label.places {
        left: 780px;
      }
      
  section#discover {
    position: relative;
    float: left;
    width: 100%;
    height: 520px;
    padding: 80px 0 0 0;
  }
  
    section#discover .content {
      text-align: center;
    }
      
      section#discover h2 {
        margin: 0 auto 40px auto;
        width: 610px;
      }
    
    #categories {
      position: relative;
      width: 960px;
      margin: 0 auto;
      height: 300px;
    }
    
      #categories ul {
      position: absolute;
      top: 0;
      left: 0;
      padding: 30px 30px;
      }
    
        #categories ul li {
          float: left;
          display: inline;
          height: 110px;
          width: 150px;
          margin: 0 0 10px 0;
          text-align: center;
          font-size: 12px;
          background: transparent url('../images/sprite-categories.png') no-repeat top left;
        }
    
        #categories ul li.art { background-position: 0 -100px; }
        #categories ul li.activities { background-position: 0 -200px; }
        #categories ul li.food { background-position: 0 -300px; }
        #categories ul li.car { background-position: 0 -400px; }
        #categories ul li.gadget { background-position: 0 -500px; }
        #categories ul li.heel { background-position: 0 -600px; }
        #categories ul li.plane { background-position: 0 -700px; }
        #categories ul li.shirt { background-position: 0 -800px; }
        #categories ul li.soccer { background-position: 0 -900px; }
        #categories ul li.bag { background-position: 0 -1000px; }
        #categories ul li.boat { background-position: 0 -1100px; }
 
 
        #categories ul.scaled {
          background: #fff;
          -webkit-mask:url('../images/mask.png') no-repeat 20px 40px;
          filter: alpha(opacity=0);
          opacity: 0;
          -webkit-transition: opacity .3s ease-in-out;
          -moz-transition: opactiy .3s ease-in-out;
          -ms-transition: opacity .3s ease-in-out;
          -o-transition: opacity .3s ease-in-out;
          transition: opacity .3s ease-in-out;
        }
          
        #categories ul.scaled.visible {
          filter: alpha(opacity=1);
          opacity: 1;
        }
        
          #categories ul.scaled li {
            -moz-transform: scale(1.6);
            -webkit-transform: scale(1.6);
            -o-transform: scale(1.6);
            transform: scale(1.6);
          }
        
          #magnifier {
            position: absolute;
            z-index: 1000;
            filter: alpha(opacity=0);
            opacity: 0;
            background: transparent url('../images/sprite.png') no-repeat -500px -560px;
            width: 136px;
            height: 140px;
            -webkit-transition: opacity .3s ease-in-out;
            -moz-transition: opactiy .3s ease-in-out;
            -ms-transition: opacity .3s ease-in-out;
            -o-transition: opacity .3s ease-in-out;
            transition: opacity .3s ease-in-out;
          }
        
    #magnifier.visible {
      position: absolute;
      z-index: 1000;
      filter: alpha(opacity=1);
      opacity: 1;
    }
      
  section#share {
    position: relative;
    float: left;
    width: 100%;
    background: #f2f2f2;
    padding: 80px 0 0 0;
  }
  
    section#share .content {
      text-align: center;
    }
  
      
      section#share h2 {
        margin: 0 auto 30px auto;
        width: 550px;
      }
      
    #messagebottle {
      position: relative;
      overflow: hidden;
    }
  
      #messagebottle .water {
        position: relative;
        z-index: 1000;
        width: 100%;
        height: 160px;
        margin: 140px 0 0 0;
        background: transparent url('../images/water.png') repeat-x top left;
      }
  
      #messagebottle .bottle {
        z-index: 900;
        position: absolute;
        top: 0;
        left: -165px;
        height: 284px;
        width: 165px;
        background: transparent url('../images/sprite.png') no-repeat 0 -800px;
        transition-property: top, bottom;
        transition-duration: 2s;
        -webkit-transition-property: top, bottom; /* Safari */
        -webkit-transition-duration: 2s; /* Safari */
      }
  
      #messagebottle .bottle.low {
        top: 50px;
      }
      
      
  section#extra {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 0 20px 0;
    background: #f2f2f2;
  }
        
        #extra .content {
          margin: 0 auto;
          width: 700px;
        }
      
          #extra .content .column {
            float: left;
            display: inline;
            width: 265px;
            padding: 0 0 0 60px;
            margin: 0 0 60px 0;
            background: transparent url('../images/sprite-icons.png') no-repeat 0 0;
            opacity: 0;
          }
      
          #extra .content .column.gift {
            float: right;
          }
      
          #extra .content .column.calendar {
            float: left;
            background-position: 0 -100px;
          }
      
            #extra .content .column h3 {
              font-size: 18px;
              padding: 0 0 5px 0;
            }
      
            #extra .content .column p {
              font-size: 14px;
              line-height: 20px;
            }
      
      
  section#final {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 0 100px 0;
  }
  
    #final #mountains {
      position: absolute;
      top: 0;
      width: 100%;
      height: 550px;
      background: transparent url('../images/mountains.png') no-repeat 50% 50%;
    }
        
      #final #phone-animation {
        display: block;
        position: relative;
        overflow: hidden;
        width: 800px;
        height: 550px;
        margin: 0 auto;
        background: transparent url('../images/shadow.png') no-repeat center bottom;
      }
        
        #final #phone-animation .phone {
          position: absolute;
          background: #303030;
          width: 381px;
          top: 500px;
          left: 50%;
          margin-left: -215px;
          height: 905px;
          background: transparent;
        }
        
        #final #phone-animation .phone .mountains { 
          position: absolute;
          width:320px;
          height:600px;
          top: 0;
          left: 0;
          margin: 138px 0 0 33px;
          background: transparent url('../images/mountains-photo.png') no-repeat 0 0;
        }
        
        #final #phone-animation .phone .skin {
          position: absolute;
          background: #303030;
          width: 381px;
          height: 905px;
          top: 0;
          left: 0;
          background: transparent url('../images/phone-sprite.png') no-repeat 0 0;
        }
        
        #final #phone-animation .phone .wishedlabel {
          position: absolute;
          background: #303030;
          width: 120px;
          height: 120px;
          top: 240px;
          left: 50%;
          margin-left: -60px;
          display: none;
          background: transparent url('../images/sprite.png') no-repeat 100% 0;
        }

        #final #phone-animation .phone .shutter { 
          width:320px;
          height:320px;
          margin: 138px 0 0 33px;
        }

          #final #phone-animation .phone .shutterAnimationHolder .film canvas {
            display: block;
            margin: 0 auto;
          }

          #final #phone-animation .phone .shutterAnimationHolder .film {
            position:absolute;
            left:50%;
            top:0;
          }

          #final #phone-animation .phone .shutterAnimationHolder {
            position:absolute;
            overflow:hidden;
            top:0;
            left:0;
            z-index:1000;
          }
        

      
    section#final h1 {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-size: 40px;
      margin: 80px 0 25px 0;
    }
        
    section#final .bigbtn {
      display: block;
      margin: 0 auto 5px auto;
      background-color: #74bb3a;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow:  0px 5px 0px 0px rgba(90, 160, 56, 1);        
      box-shadow:  0px 5px 0px 0px rgba(90, 160, 56, 1);
      color: #fff;
      text-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      filter: dropshadow(color=rgba(0,0,0,0.2), offx=0, offy=2);
      padding: 0 30px;
      height: 75px;
      width: 300px;
      text-decoration: none;
      line-height: 82px;
      font-size: 35px;
      text-align: center;
    }
    
    section#final .bigbtn:active {
      margin: 5px auto 0 auto;
      -webkit-box-shadow:  none;       
      box-shadow:  none;
    }
        
      
  section#press {
    position: relative;
    float: left;
    width: 100%;
    padding: 150px 0 150px 0;
  }
  
    section#press .content {
      position: relative;
      border-top: 1px solid #e5e5e5;
      text-align: center;
    }
  
      section#press .content h3 {
        position: absolute;
        left: 50%;
        background: #fff;
        text-transform: uppercase;
        top: -8px;
        line-height: 20px;
        height: 20px;
        width: 280px;
        margin: 0 0 0 -130px;
        color: #979797;
      }
  
      section#press .content .column {
        float: left;
        display: inline;
        width: 300px;
        margin: 20px 0 0 30px;
      }
      
      section#press .content .column.first {
        margin: 20px 0 0 0;
      }
      
        section#press .content .column img {
          display: block;
          opacity: 0.5;
          -webkit-transition: opacity .3s ease-in-out;
          -moz-transition: opactiy .3s ease-in-out;
          -ms-transition: opacity .3s ease-in-out;
          -o-transition: opacity .3s ease-in-out;
          transition: opacity .3s ease-in-out;
        }
      
        section#press .content .column:hover img {
          opacity: 1;
        }
      
        section#press .content .column p {
          font-size: 18px;
          line-height: 25px;
          color: #979797;
        }
      
  section#social {
    position: relative;
    float: left;
    width: 100%;
    background: #f2f2f2;
    text-align: center;
    padding: 60px 0;
  }
  
    section#social .fb-like {
      
    }
    
  footer {
    background: #303030;
    height: 60px;
    width: 100%;
  }
  
    footer .copy {
      float: left;
      display: inline;
      color: #979797;
      margin: 24px 0 0 0;
    }
  
    footer ul {
      float: right;
      display: inline;
      margin: 24px 0 0 0;
    }
      
      footer ul li {
        float: left;
        display: inline;
        padding: 0 0 0 20px;
      }
      
        footer ul li a {
          color: #979797;
          text-decoration: none;
        }
      
        footer ul li a:hover {
          color: #fff;
        }
  
/* */
.show {
  opacity: 1 !important;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opactiy .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}  

/* Headers */
h1,
#messagebottle .columns .column h3 {
  font-family: 'MuseoSansRounded-700', 'Helvetica', sans-serif;
}

header#intro .text h2,
.label {
  font-family: 'MuseoSansRounded-500', 'Helvetica', sans-serif;
}
.availability > div,
section#slideshow .content h2,
header#intro .text h2 span {
  font-family: 'MuseoSansRounded-100', 'Helvetica', sans-serif;
}

/* CSS3 animate */
header#intro .text .playvideo, 
header#intro .text, 
header#intro .arrow,
header#intro .arrow {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

header#intro .arrow span {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


/*loader*/
#qLpercentage {
  font-family: 'MuseoSansRounded-700', 'Helvetica', sans-serif;
  font-size: 200px !important;
  left: 0 !important;
  margin: -100px 0 0 0 !important;
  width: 100% !important;
  text-align: center !important;
  color: #fff !important;
}
  
.mobile { 
  display: none !important;
}

/*-----------ADMIN SITE--------------*/

.menu-subcategories{
  height: 30px !important;
  margin-top: 55px !important;
  background-color: #373737 !important;
}
.menu-subcategories ul{
  margin: 0.5px 81px 0px 0px !important;
}
.menu-subcategories ul li{
 height: 30px !important;
 line-height: 30px !important;
}

/*-----------SCHEDULED EVENTS--------------*/
.scheduled-event-list{
  width: 100%;
  height: 60px;
  background-color: yellowgreen;
  margin-bottom: 10px;
}