/***************************************
* Copyright 2015 elementary LLC.       *
* This file is part of elementaryos.io *
***************************************/

/******************
* Responsive Hero *
******************/

.page-index .hero {
    background: url("../images/responsive-images/notebook-small.png") 50% / contain no-repeat;
    height: 176px;
    padding-top: 0;
}

@media all and (min-width: 530px) {

    .page-index .hero {
        background-image: url("../images/responsive-images/notebook-medium.png");
        height: auto;
        padding-top: 35%;
    }

}

@media all and (min-width: 1000px) {

    .page-index .hero {
        background-image: url("../images/responsive-images/notebook-large.png");
    }

}

@media all and (min-width: 1300px) {

    .page-index .hero {
        background-image: url("../images/notebook.png");
    }

}

.payment-button:before {
    content: "$";
    float: left;
    font-size: 14px;
    margin-left: -3px;
    margin-right: 3px;
    vertical-align: super;
}

.pre-amount {
    color: #333;
    font-size: 14px;
    margin-left: 14px;
    margin-right: -21px;
    margin-top: 11px;
    pointer-events: none;
    position: absolute;
}

#amount-custom {
    max-width: 170px;
    padding-left: 24px;
    padding-right: 24px;
    text-align: center;
    width: 100%;
}

.focus-reveal {
    margin: 0 3px;
    opacity: 0 !important;
    transition: 250ms all;
    width: 190px;
}

input:focus + .focus-reveal {
    opacity: 0.8 !important;
    transition: 250ms all;
}

#download {
    margin: 3px auto 6px;
}

#the-press {
    font-size: 24px;
    opacity: 0.65;
}

#carousel {
    background-color: #0d6c7f;
    background-image: linear-gradient(to bottom, #015263, #338b9f);
    color: #fff;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

#carousel a.read-more {
    color: rgba(0, 0, 0, 0.65);
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

#carousel > .row + .row {
    padding-top: 0;
}

#carousel-choices {
    margin-bottom: 0;
}

#carousel-choices .button {
    line-height: 16px;
    padding: 8px 16px;
}

#carousel-choices svg {
    vertical-align: middle;
}

#carousel-choices .label {
    display: none;
}

#carousel .slide .row {
    max-width: 100%;
}

#carousel .slide > .row > .column {
    margin-left: 16px;
    margin-right: 16px;
    vertical-align: top;
}

#carousel .slide > .row > .column:first-child {
    margin: 0;
}

@media (max-width: 404px) {

    #carousel .slide > .row > .column:nth-child(2) {
      margin-top: -48px;
    }

}

@media (min-width: 434px) {

    #carousel-choices .button {
        line-height: initial;
    }

    #carousel-choices .label {
        display: initial;
    }

    #carousel-choices svg {
        display: none;
    }

}

@media (min-width: 1350px) {

    #carousel {
        background-image: url("../images/screenshots/background.jpg");
        background-size: cover;
        min-height: 100vh;
    }

    #carousel .slide > .row > .column:nth-child(2) {
        margin-top: 33px;
    }

    #carousel .slide > .row {
        margin: 0 calc(50% - 700px);
    }

}

#carousel .column.alert img {
    height: 64px;
    width: 64px;
}

#carousel .slide > .row > .column .column:nth-child(2) {
    max-width: 256px;
}

.vertical-top {
    vertical-align: top;
}

/************
* Slingshot *
************/

#slingshot {
    max-width: 1800px;
    width: 100%;
}

#slingshot .column:nth-child(2) .symbolic-icon {
    display: inline-block;
    float: left;
    margin: 4px 6px 4px 0;
}

#slingshot .column:nth-child(2) p {
    margin-left: 24px;
}

@media (min-width: 330px) {

    #slingshot .column:nth-child(2) h2 {
        margin-left: 24px;
    }

}

.symbolic {
    fill: #333;
}

.slingshot {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
                0 3px 6px rgba(0, 0, 0, 0.23);
    display: inline-block;
    height: 512px;
    margin-right: 24px;
    padding: 12px;
    pointer-events: none;
    transition: all 200ms ease-out;
    width: 678px;
}

#slingshot-arrow {
    height: 20px;
    left: 12px;
    position: relative;
    top: 5px;
    width: 30px;
    z-index: 100;
}

.slingshot .linked {
    display: inline-block;
    margin: 0;
    transition: all 200ms ease-out;
}

.slingshot .linked.inactive {
    margin-left: -73px;
}

.slingshot .button {
    background-image: none;
    fill: #333;
    width: 30px;
}

.slingshot .entry {
    background-image: linear-gradient(to bottom, #f0f0f0, #f5f5f5);
    border: 1px solid rgba(61, 155, 218, 0.8);
    border-radius: 2.5px;
    box-shadow: inset 0 0 0 1px rgba(61, 155, 218, 0.23),
                0 1px 0 0 rgba(255, 255, 255, 0.3);
    color: #333;
    display: inline-block;
    fill: #a6a6a6;
    margin-left: 8px;
    text-align: left;
    text-shadow: 0 1px rgba(255, 255, 255, 0.4);
    transition: all 200ms ease-out;
    width: 579px;
}

.slingshot .entry.expanded {
    width: 100%;
}

.entry .symbolic {
    fill: #333;
    opacity: 0.4;
}

.slingshot .button,
.slingshot .entry {
    height: 25px;
    padding: 3px 6px;
}

#slingshot-grid .slingshot-grid {
    margin-left: 12px;
}

.app {
    display: inline-block;
    float: left;
    height: 116px;
    margin: 0;
    margin-top: 27px;
    vertical-align: top;
    width: 130px;
}

.app img {
    height: 64px;
    width: 64px;
}

.app p {
    font-family: "Droid Sans", "Open Sans", Helvetica, sans-serif;
    font-size: 9pt;
    margin-top: 6px;
    text-align: center;
}

#slingshot-pager {
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
    margin-top: 9px;
    width: 200px;
}

#slingshot-pager .button {
    font-family: "Droid Sans", "Open Sans", Helvetica, sans-serif;
    font-size: 9pt;
    height: 23px;
    line-height: 16px;
    margin: 0;
}

/*************
* Categories *
*************/

.slingshot-categories-sidebar {
    border-right: 1px solid #a7a7a7;
    display: block;
    float: left;
    height: 456px;
    margin-top: 16px;
    transition: all 200ms ease-out;
    width: 124px;
}

.slingshot-category {
    color: #a7acab;
    display: block;
    font-family: "Droid Sans", "Open Sans", Helvetica, sans-serif;
    font-size: 9pt;
    line-height: 9pt;
    padding: 7px 12px 6px 16px;
    text-align: left;
    text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}

.slingshot-category.active {
    background-image: linear-gradient(to bottom, #dbdbdb, #e3e3e3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02),
                inset 0 1px 0 0 rgba(0, 0, 0, 0.05),
                inset 0 2px 0 0 rgba(0, 0, 0, 0.05),
                inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
    color: #717171;
}

.slingshot-categories {
    margin-left: 127px;
    padding-top: 12px;
}

.slingshot .search-entry {
    margin: 0 auto;
    width: 653px;
}

/*********
* Search *
*********/

.clear-icon {
    float: right;
}

.clear-icon.inactive {
    display: none;
}

img.result-img {
    display: inline-block;
    float: left;
    height: 32px;
    margin-right: 12px;
    width: 32px;
}

.slingshot-search-results {
    color: #333;
    display: block;
    float: left;
    font-family: "Droid Sans", "Open Sans", Helvetica, sans-serif;
    font-size: 9pt;
    line-height: 9pt;
    margin: 6px 0;
    text-align: left;
    text-shadow: none;
    width: 100%;
}

.slingshot-search-results.inactive {
    display: none;
}

span.search-term,
span.cursor {
    color: #333;
    display: inline-block;
    font-family: "Droid Sans", "Open Sans", Helvetica, sans-serif;
    font-size: 9pt;
    height: 16px;
    line-height: 18px;
    position: relative;
    text-shadow: none;
}

span.search-term {
    margin-right: -8px;
    overflow: hidden;
    transition: all 1.5s steps(3, start);
    width: 19px;
}

span.search-term.inactive {
    transition: none;
    width: 0;
}

span.cursor {
    -webkit-animation: blink 1.2s steps(5, start) infinite;
    animation: blink 1.2s steps(5, start) infinite;
    font-size: 12pt;
    top: -4px;
}

@-webkit-keyframes blink {

    to {
        visibility: hidden;
    }

}

@keyframes blink {

    to {
        visibility: hidden;
    }

}

span.results-title {
    color: #707070;
    display: block;
    font-family: "Droid Sans", "Open Sans", Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    line-height: 9pt;
    margin: 18px 8px 6px 8px;
    text-align: left;
    text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}

.search-result {
    border-radius: 5px;
    display: block;
    margin-left: 12px;
    margin-right: 12px;
    padding: 4px 16px;
}

.search-result:first-child {
    background-color: #c4c4c4;
}

/**********
* Animate *
**********/

.slingshot {
    overflow: hidden;
    position: relative;
}

.slingshot .view {
    bottom: -37px;
    float: left;
    height: 100%;
    left: 0;
    max-width: 680px;
    position: absolute;
    transition: all 200ms ease-in-out;
    width: 100%;
}

.slingshot .view.previous {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateX(-110%);
        -ms-transform: translateX(-110%);
            transform: translateX(-110%);
}

.slingshot .view.active {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}

.slingshot .view.next {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateX(110%);
        -ms-transform: translateX(110%);
            transform: translateX(110%);
}

#slingshot-categories.active {
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}

@media (max-width: 1345px) {

    .slingshot {
        width: 551px;
    }

    .slingshot .entry {
        width: 452px;
    }

    #slingshot-grid .last-row {
        display: none;
    }

}

@media (max-width: 1218px) {

    .slingshot {
        height: 369px;
        width: 424px;
    }

    .slingshot .entry {
        width: 325px;
    }

    #slingshot-categories .last-row,
    #slingshot-grid .middle-row {
        display: none;
    }

    .slingshot-arrow {
          top: -346px;
    }

    .slingshot-categories-sidebar {
        height: 313px;
    }

    #slingshot-categories {
        margin-top: -312px;
    }

}

@media (max-width: 581px) {

    .slingshot {
        height: 269px;
        width: 272px;
    }

    .slingshot .entry {
        width: 173px;
    }

    .app {
        height: 70px;
        margin-top: 27px;
        width: 82px;
    }

    .app img {
        height: 32px;
        width: 32px;
    }

    .slingshot-categories-sidebar {
        width: 104px;
    }

    #slingshot h2 {
        margin-top: 24px;
    }

}