/****************************/
/* HOMEPAGE                 */
/****************************/
#homePage {
    background-image: url(/static/images/home/background.png);
    background-size: cover;
}

/*--------------------------*/
/* HEADER                   */
/*--------------------------*/
#homePage__header {
    width: 100%;
    height: 790px;
    background-image: url(/static/images/home/header-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
#homePage__headerContent {
    max-width: 1100px;
    margin: 0 auto;
}

/*--------------------------*/
/* INTRO                    */
/*--------------------------*/
#homePage__intro {
    max-width:880px;
    margin:0 auto;
    padding-top:240px;
    text-align:center;
}
#homePage__intro h1 {
    font: 60px merriweather, palatino, serif;
    font-weight:bold;
    font-style:italic;
    color: var(--white);
}
#homePage__intro-content {
    font: 26px/1.46 merriweather, palatino, serif;
    color: var(--white);
    margin-top:25px;
}
#homePage__intro-signupButton {
    margin-top:40px;
}

/*--------------------------*/
/* IOS SECTION              */
/*--------------------------*/
.homePage__ios {
    background-color:var(--gray-100);
}
.homePage__iosContent {
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    margin:0 auto;
    max-width:1000px;
    overflow:hidden;
}
.homePage__iosContent-center {
    padding:40px;
    text-align: center;
}
.homePage__iosContent-left {
    /*justify-content: flex-end;*/
    height:174px;
    align-self: end;
}
.homePage__iosContent h2 {
    font: 600 23px poppins, lucida, arial, sans-serif;
    color: var(--gray-500);
}
.homePage__iosContent p {
    font: 16px merriweather, palatino, serif;
    margin: 5px 0 20px;
    color: var(--gray-500);
}
#homePage__iosButton, #homePage__iosButtonMobile {
    background: url(/static/images/buttons/apple-download-button.png) 0 0/100% transparent;
    width: 160px;
    height: 54px;
    border: 0;
    cursor: pointer;
}
#homePage__iosButton {
    margin-top: 20px;
}
#homePage__iosButtonMobile {
    margin:0 0 20px 0;
}
.homePage__iosMobile {
    display:none;
    background-color:var(--gray-100);
    text-align:center;
    padding:10px 15px 0 15px;
    clear:both;
    margin-top:100px;
}
.homePage__iosMobile h2 {
    font: 600 16px poppins, lucida, arial, sans-serif;
    color: var(--gray-500);
}
.homePage__iosMobile p {
    font: 12px merriweather, palatino, serif;
    margin: 5px 0 20px;
    color: var(--gray-500);
}
.homePage__iosContentMobile {
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;
}
.homePage__iosContentMobile img {
    width:40vw;
    height:42vw;
}


/*--------------------------*/
/* SIMPLE SECTIONS          */
/*--------------------------*/
#homePage__simpleSections {
    background-image:url(/static/images/backgrounds/landing-section2.png);
    background-position:center;
    background-repeat: no-repeat;
}
.homePage__simpleSection {
    max-width: 1100px;
    margin: 80px auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
}
.homePage__simpleSection-image img {
    -webkit-filter: drop-shadow(0 5px 25px var(--gray-overlay-100));
    filter: drop-shadow(0 5px 25px var(--gray-overlay-100));
}
.homePage__simpleSection-content {
    padding-left: 40px;
    border-left:solid 3px var(--yellow-200);
    max-width:360px;
}
.homePage__simpleSection-content h2 {
    font: 600 23px poppins, lucida, arial, sans-serif;
    color: var(--gray-500);
}
.homePage__simpleSection-content p {
    font: 14px/1.6 merriweather, palatino, serif;
    color: var(--gray-500);
}

/*--------------------------*/
/* VIDEO                    */
/*--------------------------*/
#homePage__introVideo {
    max-width: 1100px;
    margin: 80px auto;
    text-align: center;
    padding: 0 15px;
}
#homePage__introVideo h2 {
    font: 600 23px poppins, lucida, arial, sans-serif;
    color: var(--gray-500);
}
#homePage__introVideo p {
    margin-top:5px;
    font: 14px/1.5 merriweather, palatino, serif;
    color: var(--gray-500);
}
#homePage__videoPlayer {
    margin-top:40px;
    width:100%;
    height:550px;
    outline: none;
}

/*--------------------------*/
/* INSPIRATION              */
/*--------------------------*/
#homePage__inspiration {
    max-width: 1100px;
    margin: 20px auto 130px auto;
}
#homePage__inspiration h2 {
    font: 30px merriweather, palatino, serif;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    padding-bottom:20px;
    border-bottom: solid 1px var(--gray-500);
    width:300px;
    margin: 60px auto;
}
#homePage__inspiration h3 {
    font: 700 16px poppins, lucida, arial, sans-serif;
    letter-spacing: 4px;
    text-align:center;
}
#homePage__inspiration p {
    font: 14px/1.5 merriweather, palatino, serif;
    text-align:center;
}
#homePage__favorites {
    display: flex;
    flex-flow: row wrap;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
}
.homePage__trip {
    width: calc(25% - 20px);
    /* min-width: 240px; */
    height: 200px;
    margin: 10px 10px 35px 10px;
    float: left;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
}
.homePage__trip a {
    font: 600 16px poppins, arial, sans-serif;
    position: absolute;
    bottom: 0;
    width: calc(100% - 30px);
    text-align:center;
    background-color: var(--gray-overlay-200);
    color: var(--white);
    padding:15px 15px 30px 15px;
}
.homePage__tripFooter {
    background: var(--white);
    padding: 2px 10px 4px 10px;
    bottom: -22px;
    width: calc(100% - 40px);
    position:absolute;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
}
.homePage__tripOwner {
    display: flex;
    flex-flow: row nowrap;
    justify-content:flex-start;
    align-items:center;
    width: calc(100% - 30px);
}
.homePage__tripOwner img {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 0;
    margin-right: 5px;
}
.homePage__tripOwner span {
    font: 12px/1.5 poppins, arial, sans-serif;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.homePage__tripFav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
.homePage__tripFav span {
    font: 600 12px poppins, arial, sans-serif;
    color: var(--gray-500);
    margin-right:4px;
}
.homePage__tripFav img {
    height: 16px;
    width: 17px;
    border: 0;
}

#homePage__featuredDestinationSection {
    margin-top:80px;
}
#homePage__featuredDestination {
    margin-top:40px;
    height:300px;
    padding-top:150px;
    background-size:cover;
    background-position:center;
    text-align:center;
    cursor: pointer;
}
#homePage__featuredDestination a {
    font: bold italic 60px merriweather, palatino, serif;
    color: var(--white);
}
.homePage__featuredDestination-spacer {
    background-color:var(--white);
    width:50px;
    height:1px;
    margin:10px auto 20px auto;
}
.homePage__featuredDestination-subTitle {
    font: italic 20px/1.3 merriweather, palatino, serif;
    color: var(--white);
}

/*--------------------------*/
/* QUOTES                   */
/*--------------------------*/
#homePage__quotes {
    max-width: 1100px;
    margin: 80px auto 0 auto;
}
#homePage__quotes h2 {
    font: 30px merriweather, palatino, serif;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    color: var(--gray-500);
}
#homePage__quoteList {
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
    margin-top:50px;
}
.homePage__quote {
    width:290px;
    height:160px;
    padding:60px 30px 30px 30px;
    background-color: var(--white);
    background-image: url(/static/images/home/blue-quote.png);
    background-position: 30px 30px;
    background-repeat: no-repeat;
    box-shadow: 0 5px 25px var(--gray-overlay-100);
    background-size: 20px;
}
.homePage__quote p {
    font: 14px/1.64 merriweather, palatino, serif;
    color: var(--gray-500);
}
.homePage__quote h3 {
    font: 600 16px poppins, lucida, arial, sans-serif;
    text-align: right;
    color: var(--gray-500);
}
.homePage__quote h4 {
    font: italic 14px  merriweather, palatino, serif;
    text-align: right;
    color: var(--gray-500);
}

/*--------------------------*/
/* DEVICES                  */
/*--------------------------*/
#homePage__devices {
    max-width: 1100px;
    margin: 120px auto 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
}
.homePage__devices-image img {
    -webkit-filter: drop-shadow(0 5px 25px var(--gray-overlay-100));
    filter: drop-shadow(0 5px 25px var(--gray-overlay-100));
    margin-right: -120px;
}
.homePage__devices-content {
    max-width:310px;
}
.homePage__devices-content h2 {
    font: 600 30px/1.2 merriweather, palatino, serif;
    font-style:italic;
    color: var(--gray-500);
}
.homePage__devices-content p {
    margin-top:20px;
    font: 14px/1.64 merriweather, palatino, serif;
    color: var(--gray-500);
}

/*--------------------------*/
/* REGISTRATION             */
/*--------------------------*/
#homePage__register {
    width: 100%;
    height: 600px;
    margin-top:20px;
    background-image: url(/static/images/home/register-background.png);
    background-size: cover;
    background-repeat: no-repeat;
}
#homePage__registerContent {
    padding-top:300px;
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}
#homePage__registerContent h2 {
    font: 600 italic 30px merriweather, palatino, serif;
    color: var(--white);
}
#homePage__registerContent p {
    font: 14px/1.64 merriweather, palatino, serif;
    color: var(--white);
    margin-top:20px;
}
#homePage__register-signupButton {
    margin-top:40px;
}

/* ipad and small laptop */
@media only screen and (min-width : 768px) and (max-width : 1100px) {
  #homePage__header, #homePage__simpleSections, #homePage__quotes, #homePage__devices, #homePage__register {padding: 0 20px;}
  #homePage__header {width: calc(100% - 40px); height: 70vw; max-height: 790px;}
  #homePage__intro {padding-top: 20vw;}
  .homePage__simpleSection {margin: 10vw 0;}
  .homePage__simpleSection:nth-child(odd) .homePage__simpleSection-image img {margin-left: 30px;}
  .homePage__simpleSection:nth-child(even) .homePage__simpleSection-image img {margin-right: 30px;}
  .homePage__simpleSection-image img {width: 55vw; height: auto;}
  #homePage__quotes {margin-top: 10vw;}
  .homePage__quote {margin-right: 15px; height: 240px;}
  .homePage__quote:last-of-type {margin-right: 0;}
  #homePage__devices {margin-top: 5vw;}
  .homePage__devices-image img {width: 65vw; height: auto; margin-right: 0;}
  .homePage__devices-content {max-width: none;}
  #homePage__register {height: 450px; margin-top: 0; width: calc(100% - 40px);}
  #homePage__registerContent {padding-top: 200px;}
  #homePage__videoPlayer {height: 450px;}
}

/* mobile portrait */
@media only screen and (max-width : 767px) and (orientation : portrait) {
  #homePage__header, #homePage__simpleSections, #homePage__quotes, #homePage__devices, #homePage__register {padding: 0 15px;}
  #homePage__header {height: 525px; width: calc(100% - 30px);}
  #homePage__intro {padding-top: 150px;}
  #homePage__intro h1 {font-size: 37px;}
  #homePage__intro-content {font-size: 16px;}
  .homePage__ios { display:none; }
  .homePage__iosMobile { display:block; }
  .homePage__simpleSection {display: block;}
  .homePage__simpleSection-image img {width: 100%; height: auto;}
  .homePage__simpleSection:nth-child(3) .homePage__simpleSection-image img {margin-top: 20px;}
  .homePage__simpleSection-content {padding-left: 15px;}
  .homePage__simpleSection-content h2 {font-size: 18px;}
  #homePage__inspiration {margin: 20px auto;}
  #homePage__inspiration h2 {font-size: 23px; margin-bottom: 30px;}
  #homePage__inspiration h3 {font-size: 14px;}
  #homePage__favorites {padding: 0 15px;}
  .homePage__trip {width: calc(50% - 8px); margin-left: 0; margin-right: 0;}
  .homePage__tripOwner img {display: none;}
  .homePage__tripFooter {padding: 10px 10px 8px 10px;}
  #homePage__featuredDestinationSection h3, p {padding: 0 15px;}
  #homePage__featuredDestination {height: 200px; padding-top: 60px;}
  #homePage__featuredDestination a {font-size: 37px;}
  .homePage__featuredDestination-subTitle {font-size: 16px;}
  #homePage__quoteList {display: initial;}
  .homePage__quote {padding: 60px 20px 30px 20px; width: calc(100% - 40px); background-position: 20px 30px; margin-bottom: 15px; height: initial;}
  #homePage__quotes h2 {font-size: 23px; margin-bottom: 25px;}
  #homePage__devices {display: block; margin-top: 80px;}
  .homePage__devices-content {max-width: none;}
  .homePage__devices-content h2 {font-size: 23px; text-align: center;}
  .homePage__devices-image img {width: 100%; height: auto;}
  #homePage__register {height: initial; padding-top: 100px; width: calc(100% - 30px); background-size: 190% 450px; background-position: bottom;}
  #homePage__registerContent {padding-top: 0; max-width: none; padding-bottom: 40px;}
  #homePage__registerContent h2 {font-size: 23px;}
  #homePage__videoPlayer {height: 225px;}
  #homePage__introVideo h2 {font-size: 18px;}
}