@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

/* Shared */
.button {
  border-radius: 100px;
}

/* Sections */
.section {
  padding: 6rem 0 5rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}
.section-download {
  padding: 5rem 0 5rem;
  text-align: center;
  background-color:#00549F;
}

.section-message {
  padding: 4rem 0 1rem;
  text-align: center;
  margin-bottom: 3.0rem;
}



/* Hero */
.phones {
  position: relative;
}
.phone {
  position: relative;
  max-width: 70%;
  margin: 3rem auto -10rem;
}
.phone + .phone {
  display: none;
}
.hero-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #FFF;
}

/* Values */
.section-values {
  background-size: cover;
  background-color:#FFF;
  color: #333;
  padding: 5rem 0;
}
.value-multiplier {
  margin-bottom: .5rem;
  color: #00549F;
}
.value-heading {
  margin-bottom: .3rem;
  text-align: left;
  color:#00549F;
  font-size:3rem;
  font-weight: 700;
}
.value-description {
  font-weight: 300;
  font-size: 2rem;
  text-align: left;
  margin-bottom: 0;
}

/* Alerts */
.section-alerts {
  background-image: url('../images/alerts-bg.jpg');
  background-size: cover;
  background-color:#FFF;
  color: #333;
  padding: 5em 0;
}
.section-alerts img {
  max-width: 100%;
  height: auto;
}
.alerts-multiplier {
  margin-bottom: .5rem;
  color: #00549F;
}
.alerts-heading {
  font-size:3rem;
  line-height: 4rem;
  color: #FFF;
  letter-spacing: 0;
  margin-bottom: 1rem;
}
.alerts-heading span {
  display: block;
}
.alerts-description {
  letter-spacing: 0;
  font-weight: bold;
  font-size: 2.5rem;
  text-align: center;
  color: #FFF;
  margin-top: 1em;
}

/* Help */
.get-help {
  background-color: #bebab0;
  padding: 4rem 0;
  text-align: center;
}
.get-help h3 a {
  color: #FFF;
  text-decoration: none;
}

.get-help h3 a:hover {
	text-decoration: underline;
}

/* Key Features */
.key {
  background-size: cover;
  color: #fff;
  background-color: #f7f7f7;
}
.key-description {
  font-size: 1.5rem;
  color: #333;
}
.key-heading {
	letter-spacing: 0;
	border-bottom: 1px solid #CCC;
	font-size: 3rem;
	line-height: 8rem;
	color: #00549F;
}
.key .two-contain img {
  display: none;
  width: 100%;
  max-width: 120px;
  height: auto;
}
.feature-heading {
	font-size: 2rem;
	font-weight: bold;
	color: #333;
	padding-bottom: 0;
	margin-bottom: 0;
}
.feature-description {
  font-size: 1.5rem;
  color: #333;
}
.logo {
  padding: 1rem 0;
  background: #FFF;
}
.logo img {
  width: 200px;
  height: auto;
}





/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 6rem 0;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
  	max-width: 80%;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 3.3rem;
  }
  .key .two-contain {
  	min-height: 280px;  /*  400px; */
  	background: transparent url('../images/line.png') center center repeat-y;
  	vertical-align: middle;
  	padding-top: 100%;   /*  320%;  */
  }
  .key .two-contain img {
  	display: block;
  }
}





/* Bigger than 750 */
@media (min-width: 750px) {
  .logo {
    padding: 2rem 0;
  }
  .logo img {
    width: auto;
  }
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 5.5rem;
  }
  .alerts-heading {
    font-size:5rem;
    line-height: 7rem;
  }
  .alerts-description {
    font-size: 3rem;    /*  2.5rem */
  }
  .alerts-description span {
    display: block;
  }
  .alerts-heading span {
    display: inline;
  }
  .get-help {
  	padding: 6rem 0;
  }
  .hero {
    padding: 7rem 0 14rem; /*  16rem */
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
  .categories {
    padding: 15rem 0 8rem;
  }
  .key .two-contain {
  	min-height: 220px;   /* 360px */
  	padding-top: 120%;   /* 200% */
  }
}

/* Smaller than 1000 */
@media (max-width: 1000px) {
  .section-values .one-half {
    width: 100%;
  }
}







/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 8rem 0;
  }
  .hero {
    padding: 7rem 0 24rem;
  }
  .hero-heading {
    font-size: 6.5rem;
    letter-spacing: 0;
    line-height: 1.2;
	margin-right: -65px;
  }
  .key-heading {
	font-size: 4rem;
	line-height: 10rem;
}
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
  .key .two-contain {
  	min-height: 220px;   /*  320px */
  	padding-top: 70%;   /* 100% */
  }
}