/*
 * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this
 * software and associated documentation files (the "Software"), to deal in the Software
 * without restriction, including without limitation the rights to use, copy, modify,
 * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 // $color-red: #cc615f;
$color-grey: #4b4b4b;
$color-grey--light: #d3d3d3;
$btn-amzn: #ec7211;

$color-primary: #232f3e;
$bp-s: 65.75em; //700px;
$bp-xs: 34.375em; //550px;

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,800,300);

*{
  box-sizing: border-box;
}
html{
  width: 100%;
  height:100%;
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  height:100%;
  font-family: 'Open Sans','Helvetica Neue',Helvetica, sans-serif;
  font-size: 100%;
  line-height: 1.45;
  color: #141414;
}

a{
  text-decoration: none;

  &:hover{
    text-decoration: none;
  }
}

img{
  max-width: 100%;
}

.btn{
  display: inline-block;
  margin: 1rem 0;
  color: white;
  font-weight: 500;
  font-size: 1.3rem;
  background: $btn-amzn;
  letter-spacing: .02em;
  border: none;
  border-radius: 5px;
  padding: .8rem 1rem .9rem;
  text-shadow: 0 1px rgba(black,.3);
  box-shadow: 0 0 2px rgba(black,.2);

  @media (max-width: $bp-s){
    padding: .5rem .7rem .6rem;
    font-size: 1rem;
  }

  &:hover{
    background: lighten($btn-amzn,5%);
    color: #fff;
  }
  &:focus,
  &:active,
  &:focus:active{
    background: darken($btn-amzn,5%);
    border-color: darken($btn-amzn,5%);
    box-shadow: 0 2px 5px 0 rgba(black,.5) inset;
  }
}

.container{
  margin: 0 auto;
  width: 90%;
  max-width: 900px;
}


header{
  color: white;
  background: #232f3e;
  padding: 10rem 0;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;

  @media (max-width: $bp-s){
    padding: 2rem 0;
  }

  h1{
    font-size: 3rem;
    margin: 0 0 1rem;

    @media (max-width: $bp-s){
      font-size: 2rem;
    }
  }
  h2{
    font-weight: 300;
    font-size: 1.5rem;
    margin: 0 0 1rem;

    @media (max-width: $bp-s){
      font-size: 1.5rem;
    }
  }
}

section{
  background: #fff;
  color: $color-grey;
  padding: 3.5rem 0;

  @media (max-width: $bp-s){
    padding: 2rem 0;
  }

  &.section--primary{
    background: $color-primary;
    color: #fff;
  }
  &.section--primary--alt{
    background: desaturate(lighten($color-primary,15%),10%);
    color: #fff;
  }
  &.section--primary--light{
    background: rgba($color-primary,.1);
  }

  &.section--grey{
    background: $color-grey;
    color: #fff;
  }
  &.section--grey--light{
    background: $color-grey--light;
    color: #fff;
  }

  h3{
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    margin: 0 0 1rem;

    @media (max-width: $bp-s){
      font-size: 1.5rem;
    }
  }

  li{
    font-size: 1.2rem;
    font-weight: 300;
  }
  p{
    font-size: 1.2rem;
    font-weight: 300;
  }
}
.col{
  margin: 0 1.5%;
  display: inline-block;
  vertical-align: top;
}
.col-7{
  @extend .col;
  width: 64%;

  @media (max-width: $bp-s){
    width: 100%;
    margin: 0;
  }
}
.col-3{
  @extend .col;
  width: 29%;

  @media (max-width: $bp-s){
    width: 100%;
    margin: 0;
  }
}
.col-5{
  @extend .col;
  width: 30%;

  @media (max-width: $bp-xs){
    width: 60%;
    margin: 0;
  }
}

.details{
  text-align: left;

  h3{
    font-size: 2rem;
    text-align: left;
  }
}

.features{
  text-align: center;
  padding: 1rem;

  &:hover{
    background: rgba(white,.1);
  }

  @media (max-width: $bp-s){
    width: 100%;
    margin: 0;
    text-align: left;
    border-bottom: 1px solid rgba(white,.2);

    &:last-child{
      border: none;
    }
  }

  i{
    font-size: 4rem;
    margin: 0 0 2rem 0;

    @media (max-width: $bp-s){
      font-size: 1.5rem;
      width: 2rem;
      text-align: center;
      margin: 0 0 1rem 0;
      float: left;
    }
  }

  p{
    margin: 0 0 1rem 0;
    font-size: 1rem;

    @media (max-width: $bp-s){
      margin-left: 3rem;
    }
  }
}

blockquote{
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;

  &:before{
    display: inline-block;
    color: $color-primary;
    font-size: 2rem;
    content: '\201C';
  }

  p{
    margin: 0;
    display: inline;
    font-size: 1.5rem;

    @media (max-width: $bp-s){
      font-size: 1.2rem;
    }
  }

  cite{
    font-size: 1rem;
    display: block;
    margin: .5rem 0 0 1.2rem;

    @media (max-width: $bp-s){
      font-size: .8rem;
    }

    &:before{
      content: '–';
    }
  }
}

footer{
  background: $color-primary;
  color: #fff;
  padding: 2rem 0;
  text-align: center;
  font-size: .8rem;
  color: rgba(white,.4);

  ul{
    margin: 0;
    padding: 0;
    list-style: none;

    li{
      display: inline-block;

      a{
        display: block;
        padding: .4rem .7rem;
        font-size: .9rem;
        text-decoration: none;
        color: rgba(white,.7);

        &:hover{
          color: white;
        }
      }
    }
  }
}

.text--center{
  text-align: center;
}
.text--left{
  text-align: left;
}
.bg-image{
  background: $color-primary;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  //text-shadow: 2px 0 5px black;

  &:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: $color-primary url('../../assets/containers.jpg') no-repeat top center;
    background-size: 100%;
    background-attachment: fixed;
    filter: blur(3px);
    opacity: .8;
    transform: scale(1.1);
  }

  &.bg-image-2:before{
    opacity: .6;
    background-position: center center;
  }
}
