/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight:500;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

.gradient {
   background: #424242;
   background: linear-gradient(90deg, #424242 0%, #807f80 25%, #807f80 75%, #424242 100%);
}

.bordered {
   border: 1px solid #000;
}

.landing-page-image{
    margin-top:-18px;
    /*width: 50%;*/
}



.brands-first-row .newsletter-card {
    width: 100%;
}

.brands-second-row .newsletter-card {
    width: 100%;
}

.h1 {
    font-weight:900;
    margin-bottom:0;
    font-size: 2.75rem;
}

@media (min-width: 1200px) {

    .brands-first-row {
        display:flex;
        justify-content:center;
        width: 70%;
        margin: 0 auto;
    }

    .brands-second-row {
        display:flex;
        justify-content:center;
        margin: 0 auto;
    }

    .brands-first-row .newsletter-card {
        width: 30%;
    }

    .brands-second-row .newsletter-card {
        width: 15%;
    }

    .h1 {
        font-weight:900;
        margin-bottom:0;
        font-size: 3.75rem;
    }

    .default-newsletter {
        min-height: 350px;
        
    }

    .default-newsletter img {
        max-width:400px;
        
    }


    .default-newsletter-container-count-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*@media (min-width: 1024px) and (max-width: 1200px) {
    .brands-second-row .newsletter-card {
        width: 100%;
    }
}*/



img {
    width:100%;
    height:auto;
}

.brand-img-container {
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content: center;
}

.newsleter-checkbox-container {
   position:relative;
   margin: 0 15px;
   padding:15px 20px;
   opacity: 0.5;
   font-weight:400;
   font-size:12px;
}

.newsleter-checkbox-container.checked {
    opacity: 1;
}

.newsleter-checkbox-container label input[type=checkbox] {
   position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.newsleter-checkbox-container label .checkmark {
    position: absolute;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius:5px;
    top:-10px;
    right:-10px;
}

.newletter-checkbox-container label:hover input ~ .checkmark {
   background-color: #ccc;
}

.newsleter-checkbox-container label input:checked ~ .checkmark {
 background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:before {
 content: "";
 position: absolute;
 display: none;
 font-family: FontAwesome;
}

/* Show the checkmark when checked */
.newsleter-checkbox-container label input:checked ~ .checkmark:before {
    display: block;
}

.newsleter-checkbox-container label .checkmark:before {
   content: "\f00c";
   left: 5px;
   top: 4px;
   color: #a93130;
}

/* Style the checkmark/indicator */
.newsleter-checkbox-container label .checkmark:after {

}


.form-container {
   width: 80%;
   margin: auto;
   padding:30px 0;

}

.form-container a, .form-container a:visited, .form-container a:active, .form-container a:hover {
    color:#fff;
}

.h1, h2, h3, h4, a, a:visited, a:active, a:hover {
   color: #a93130;
   text-decoration: none;
}

.h1,.h2, .h3 {
    text-transform: uppercase;
}



a:hover {
   text-decoration: underline;
}

.btn {
   background-color: transparent;
   border-radius: 40px;
   padding: 5px 45px;
   border: 2px solid #fff;
   font-weight:700;
}

.btn-secondary, .btn-secondary:focus, .btn-secondary:active {

    border-color:#fff;
    color: #fff;
}

.btn-primary, .btn-primary:focus, .btn-primary:active {
   color: #a93130;
   border-color: #a93130;
   background-color:#fff;
}

.btn-primary:hover {
   background-color:#a93130;
   color:#fff;;
   border-color:#fff;
}

.btn-secondary:hover {
   background-color:#fff;
   color:#a93130;
   border-color:#a93130;
}

.form-container select {
    font-size:12px;
    font-weight:300;
    min-height:38px;
}

input::placeholder {
  font-weight:300;
  font-size:12px;
}

.footer {
    font-weight:300;
}
.menu-content {
    display:none;
    border-bottom: 0.5px solid #ccc;
    /*animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;*/
}

.menu-content.menu-content-shown {
    display:block;
}

/*@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}*/

.navbar {
    min-height: 50px;
    display: grid;
    justify-content: end;
    justify-items: center;
    align-content: space-evenly;
    align-items: stretch;
    padding: 0 30px;
}

.navbar a {
    color: #fff;
}

.navbar a:hover {
    color: #a93130;
}

.default-newsletter-container {
    display: grid;
    height: 100%;
    width: 100%;
    align-items: center;
}


.default-newsletter {
    display:flex;
    justify-content: center;
    align-items: center;
}

.default-newsletter label{
    display: grid;
    justify-content: center;
    align-items: self-end;
}