/*

    Fonts
    * Headings/bold -- font-family: Titillium Web, PT Sans, sans-serif;
    * Paragraph sans-serif -- font-family: PT Sans, sans-serif;

    .Storage Colors:

    Darkest Red = #681010
    Red = #C4261E
    Orange Red = #E5461C
    Light Red = #FC5B5B
    Lighter Red = #F79A8B
    Pale Red = #F9E8E4

    Black = #191818
    Dark Gray = #3F3E3E
    Gray = #777575
    Light Gray = #AFAEAE
    Lighter Gray = #DDDDDD
    Off White = #F9F7F7

    Navy Blue = #182447
    Dark Blue = #193C93
    Blue = #3B50EA
    Light Blue = #5498FC
    Pale Blue = #D9EDFC

    * Spacing (padding, margin) - increments of 20 (or 10)

    * Primarily mobile first

    * Mix of SMACSS and BEM naming conventions
    * .block__modifier, .block__element-modifier
        * ex: .button__small, .heading__1-alt, .list__checklist, .list__checklist-red
        * Could be made more consistent. Not all class names follow this style yet.

*/

/*  Reset
    Minified normalize.css - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:600;font-family:Titillium Web, PT Sans, sans-serif;}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

body > iframe {
    position: absolute;
    height: 0;
}

/* Box-sizing */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Hide images accessibly */
.image-replacement,
.ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    height: 0;
}

/* Sup (for Trademark/TM) */
sup {
    font-size: 1.4rem;
    margin-left: 3px;
    top: -0.75em;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Email Addresses */
.email-address {
    vertical-align: text-bottom;
}

/*=================================
Base Size

These are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many other styles.
Remember, keep it light: Speed is Important. This will be used across
all viewports.
=================================*/

/*=================================

Body, General Styles

=================================*/

/* 62.5% = 10px which makes for easier rem-to-pixel conversions
ex: 1.4rem = 14px */
html {
    font-size: 62.5%;
}

body {
    font-family: PT Sans, sans-serif;
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1;
    color: #3F3E3E;

    /* Improves appearance of fonts */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    /* Sticky footer */
    min-height: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*=================================

Typography

=================================*/

.main-content {
    line-height: 1.5;
    min-height: 600px;

    /* Sticky footer */
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

/* Paragraphs with typographic improvements:
http://www.newnet-soft.com/blog/csstypography */
p {
    /* Enable ligatures */
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -ms-font-feature-settings: "liga";
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    margin-top: 0;
    margin-bottom: 20px;
}

/* Remove space after last paragraph or after single paragraphs */
p + p:last-child,
p:only-of-type {
    margin-bottom: 0;
}

/*=================================

Layout

=================================*/

/*  .rows limit the width of content and adds vertical
    spacing too. If you want a full width background
    color/image it will need to be outside a .row */
.row {
    clear: both;
    zoom: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

.main-content .row,
.site-footer .row {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.main-content .row {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Exceptions to padding */
.main-content .row__no-bottom-padding { padding-bottom: 0; }
.main-content .row__no-top-padding { padding-top: 0; }

.main-content .row,
.site-footer .row,
.header-logo-container {
    -webkit-transition: padding .17s;
    -moz-transition: padding .17s;
    -ms-transition: padding .17s;
    -o-transition: padding .17s;
    transition: padding .17s;
}

/*=================================

Links

=================================*/

a {
    color: #3B50EA;
}

.main-content a:hover,
.main-content a:focus {
    color: #193C93;
}

.bg__dark a:hover,
.bg__dark a:focus {
    color: #5498FC;
}

/* Hover transitions*/
button,
input,
a,
button:hover,
button:focus,
input:hover,
input:focus,
a:hover,
a:focus {
    -webkit-transition: color .25s, background .25s, padding .25s;
    -moz-transition: color .25s, background .25s, padding .25s;
    -ms-transition: color .25s, background .25s, padding .25s;
    -o-transition: color .25s, background .25s, padding .25s;
    transition: color .25s, background .25s, padding .25s;
}

button,
input,
a {
    -webkit-transition: color .17s, background .17s, padding .17s;
    -moz-transition: color .17s, background .17s, padding .17s;
    -ms-transition: color .17s, background .17s, padding .17s;
    -o-transition: color .17s, background .17s, padding .17s;
    transition: color .17s, background .17s, padding .17s;
}

.link__external:after {
    content: '';
    display: inline-block;
    vertical-align: -3px;
    height: 16px;
    width: 16px;
    margin-left: 4px;
}

.cssmask .link__external:after {
    background-color: #fff;
    -webkit-mask-image: url('/assets/img/baseline-open_in_new-24px.svg');
    mask-image: url('/assets/img/baseline-open_in_new-24px.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right center;
    mask-position: right center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-transition: background .17s;
    -moz-transition: background .17s;
    -ms-transition: background .17s;
    -o-transition: background .17s;
    transition: background .17s;
}

.cssmask .link__external:hover:after,
.cssmask .link__external:focus:after {
    background-color: #5498FC;
    -webkit-transition: background .25s;
    -moz-transition: background .25s;
    -ms-transition: background .25s;
    -o-transition: background .25s;
    transition: background .25s;
}

.no-cssmask .link__external:after,
.no-cssmask .link__external:hover:after,
.no-cssmask .link__external:focus:after {
    background-color: transparent;
    background-image: url('/assets/img/baseline-open_in_new-24px.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 16px;
}


/*=================================

Headings

    * Use classes rather than heading elements to dictate style.

=================================*/

h1,
h2,
h3,
h4,
h5,
h6,
.heading__1,
.heading__2,
.heading__3,
.heading__4,
.heading__5,
.heading__6 {
    color: #777575;
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: 600;
    line-height: 1.33;
    text-rendering: optimizelegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-size: 100%;
}

.heading__1 {
    color: #191818;
    font-size: 3rem;
    margin-bottom: 20px;
}

.heading__2 {
    color: #C4261E;
    font-size: 2.6rem;
    margin-bottom: 20px;
}

.heading__3 {
    font-size: 2.1rem;
    margin-bottom: 10px;
}

.heading__4 {
    font-size: 1.8rem;
}

.heading__5 {
    font-size: 1.6rem;
    line-height: 1.5;
}

.heading__6 {
    font-family: PT Sans, sans-serif;
    font-weight: 400;
    font-style: italic;
}

.tagline__reg {
    font-size: 50%;
    top: -0.75em;
}

/*=================================

Lists

=================================*/

/* Reset a <ul> or <ol> */
.list__reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Checklist */
.list__bulleted,
.list__bulleted ul {
    list-style: none;
    margin: 10px 0 0 20px;
    padding: 0;
}

.list__bulleted li {
    margin-bottom: 10px;
    padding-left: 20px;
    min-height: 20px;
    line-height: 1.33;
    background-image: url('/assets/img/box-dot-outline.png');
    background-image: -webkit-linear-gradient( transparent,  transparent), url('/assets/img/box-dot-outline.svg');
    background-image:  linear-gradient( transparent,  transparent), url('/assets/img/box-dot-outline.svg');
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 0 4px;
}

/* Basic list styles */
.list__basic,
.list__basic ul,
.list__basic ol {
    margin-top: 20px;
    margin-bottom: 20px;
}

.list__basic ul,
.list__basic ol {
    margin-top: 10px;
    margin-bottom: 0;
    margin-left: 20px;
}

.list__basic li {
    margin-bottom: 10px;
}

/* Ordered list */
.list__ordered {
    list-style-type: decimal;
}

.list__bulleted .list__ordered li {
    background: none;
    padding-left: 0;
}

/* Lists in columns */
.list__2-col > li,
.list__3-col > li,
.list__4-col > li {
    vertical-align: top;
    display: inline-block;
    padding-right: 20px;

    width: 100%;
}


.list__parenthesis {
    counter-reset: list;
}
.list__parenthesis > li {
    list-style: none;
    position: relative;
}
.list__parenthesis > li:before {
    counter-increment: list;
    content: counter(list, decimal) ") ";
    position: absolute;
    left: -1.4em;
}



/*=================================

Blockquote

=================================*/

blockquote {
    background-color: #F9F7F7;
    margin: 2rem 0;
    padding: 2rem;
    border-top: 5px solid #ddd;
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: 600;
}

/*=================================

Tables

=================================*/

.table__basic {
    border: 2px solid #AFAEAE;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Some <th> elements are in the <thead>, others are in the <tbody> and form a heading column */
.table__basic-heading {
    font-weight: 600;
    font-family: Titillium Web, PT Sans, sans-serif;
    background-color: #DDDDDD;
    padding: 10px 15px;
}

.table__basic-body .table__basic-heading {
    text-align: left;
}

.table__basic-cell {
    border: 1px solid #DDDDDD;
    padding: 10px 15px;
}

/* Zebra striping */

.table__zebra tr:nth-of-type(even) {
    background-color: #F9F7F7;
}

/*
    Responsive table solution by ZURB Foundation
    http://zurb.com/playground/responsive-tables

    Replaced 767px media query (MQ) with 800px
    If this CSS MQ is changed, be sure to change the JS MQ too.

    Foundation v2.1.4 http://foundation.zurb.com */

.table__responsive-caption {
    display: none;
}

@media only screen and (max-width: 800px) {
    .table__responsive-caption {
        display: block;
        margin-top: -20px;
        margin-bottom: 30px;
        font-style: italic;
        text-align: center;
    }
    table.responsive {
        margin: 0;
        border-left: none;
        border-right: none;
    }
    .pinned {
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
        width: 150px;
        overflow: hidden;
        overflow-x: scroll;
        border-right: 2px solid #AFAEAE;
        border-left: 2px solid #AFAEAE;
    }
    .pinned table {
        border-right: none;
        border-left: none;
        margin: 0;
        width: 100%;
    }
    .pinned table th,
    .pinned table td {
        white-space: nowrap;
    }
    .pinned td:last-child {
        border-bottom: 0;
    }
    div.table-wrapper {
        position: relative;
        margin-top: 40px;
        margin-bottom: 40px;
        overflow: hidden;
        border-right: 2px solid #AFAEAE;
    }
    div.table-wrapper div.scrollable {
        margin-left: 150px;
    }
    div.table-wrapper div.scrollable {
        overflow: scroll;
        overflow-y: hidden;
    }
    table.responsive td,
    table.responsive th {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
    }
    table.responsive th:first-child,
    table.responsive td:first-child,
    table.responsive td:first-child,
    table.responsive.pinned td {
        display: none;
    }
}

/*==================================================================

Buttons

    * Use .button for basic button style to any element
    * ADD .button__(modifier) classes to modify base button
* Use .button__reset instead of .button to reset <button> element

==================================================================*/

.button__reset {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
}

/* Default: red */
.button {
    /* Reset */
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-font-smoothing: antialiased;
    border: none;
    text-shadow: none;
    background: none;
    cursor: pointer;
    text-decoration: none;

    /* Basic style */
    margin: 2rem;
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: 600;
    text-align: center;
    color: #C4261E;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 3px;
    border: 4px solid #C4261E;
    padding: .75rem 2rem;
    display: inline-block;
}

.button:hover,
.button:focus {
    background: #C4261E;
    color: #fff;
    outline: none;
    box-shadow: 0 2px 9px rgba(119, 117, 117, 0.5);
}

a.button,
.button a {
    color: #C4261E;
    text-decoration: none;
}

.dark-pattern-bg .button {
    color: #fff;
    border-color: #fff;
}

.dark-pattern-bg .button:hover,
.dark-pattern-bg .button:focus {
    border-color: #C4261E;
    box-shadow: 0 2px 9px rgba(52, 21, 21, 0.5);
}

a.button:hover,
a.button:focus,
.button a:hover,
.button a:focus {
    color: #fff;
}

.button:hover,
.button:focus,
.button {
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.form__basic-field .button {
    margin-left: 0;
}

/* .button Modifiers */

/* Sizes
    (Further defined in media queries)
*/

.button__small {
    padding: .25rem .75rem;
    font-size: 1.5rem;
    border-width: 3px;
}

.button__large {
    padding: 1.5rem 2.5rem;
    font-size: 2.4rem;
    border-width: 5px;
}

/* Widths
	(Further defined in media queries)
*/

.button__narrow {}
.button__wide {}

/* Groups of buttons */

.button__collection-wide {
    margin: 5px 0;
    min-width: 270px;
}

/* Alternate Styles */
.button__simple {
    border: none;
    background-color: #777575;
    color: #fff;
    text-transform: none;
    letter-spacing: 0px;
}

/*=================================

Forms

=================================*/

/*
    Basic form
*/

.form__basic-field {
    margin-bottom: 20px;
}

.form__quick-field {
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
}

.form__quick-field .button {
    margin-left: auto;
    margin-right: auto;
}

/* Labels */
.form__basic-label {
    display: block;
    margin-bottom: 7px;
    font-size: 1.6rem;
    color: #777575;
    font-weight: 600;
    font-family: Titillium Web, PT Sans, sans-serif;
}

.form__basic-label .asterisk {
    color: #C4261E;
}

/* Hide label accessibly */
.placeholder .hide-label {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    height: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
}

/* Browsers/devices that don't support placeholders get labels */
.no-placeholder .hide-label {
    margin-bottom: 5px;
}

.form__basic-select,
.form__basic-input,
.form__basic-textarea {
    border-radius: 0;
    border: 2px solid #777575;
    outline: none;
    background-color: #fff;
    color: #3F3E3E;
    font-weight: 400;
    font-family: PT Sans, sans-serif;
    font-size: 1.6rem;
    width: 100%;
    min-height: 50px;
    padding: 15px;
}

.form__basic-input:focus,
.form__basic-select:focus,
.form__basic-textarea:focus {
    box-shadow: 0 2px 9px rgba(119, 117, 117, 0.5);
}

/* Selects */
.form__basic-select {}

.no-bgpositionshorthand.appearance .form__basic-select {
    background-position: 95% center;
}

.appearance .form__basic-select {
    padding-right: 30px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url('/assets/img/dropdown-arrow.png');
    background-image: -webkit-linear-gradient(transparent, transparent), url('/assets/img/dropdown-arrow.svg');
    background-image: linear-gradient(transparent, transparent), url('/assets/img/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: 95% center;
    background-position: right 10px bottom 45%;
}

/* Inputs */
.form__basic-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Textarea */
.form__basic-textarea {
    height: 110px;
}

/* Radio buttons */
.form__basic-radio-container {
    list-style: none;
    padding: 0;
}

.form__basic-radio-container li {
    display: inline-block;
    width: 80px;
}

.form__basic-radio-button,
.form__basic-label-radio {
    display: inline-block;
}

.form__basic-radio-button {
    margin-right: 5px;
}

::-webkit-input-placeholder { color: #AFAEAE; font-style: italic; }
::-moz-placeholder { color: #AFAEAE; font-style: italic; } /* firefox 19+ */
:-ms-input-placeholder { color: #AFAEAE; font-style: italic; } /* ie */
:-moz-placeholder { color: #AFAEAE; font-style: italic; }

/*=================================

Alerts

=================================*/

.alert {
    text-align: center;
    margin: 3rem auto;
}

.alert p {
    background-color: #dddddd;
    display: inline-block;
    padding: .5em 1em;
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: bold;
}

.alert__error p {
    background-color: #F9E8E4;
    color: #E5461C;
}

.alert__success p {
    background-color: #D9EDFC;
    color: #193C93;
}

/*=================================

Header, Site Banner, Navigation

===================================*/

.site-header {
    background-color: #F9F7F7;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.site-header .row {
    position: relative;
    overflow: initial;
}

.site-header a {
    text-decoration: none;
}

.header-logo-container {
    text-align: center;
}

.header-logo-container a {
    display: inline-block;
    vertical-align: top;
}

.site-logo {
    min-height: 40px;
}

/* Mobile nav */

.button__mobile-nav {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px;
}

/* Navigation */

nav ul,
nav ol {
    margin: 0;
    padding: 0;
}

.nav-item {
    display: block;
}

.main-nav-link {
    line-height: 1;
    display: block;

    color: #777575;
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: 600;
}

.header-nav .main-nav-link {
    padding: 15px;
    text-align: center;
}

.header-nav .main-nav-link:hover,
.header-nav .main-nav-link:focus {
    color: #C4261E;
}

/*=================================

Footer, Footer nav

===================================*/

.site-footer {
    background-color: #681010;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 60px;
}

.site-footer a {
    text-decoration: none;
}

.footer-nav .nav-item {
    margin-bottom: 10px;
}

.footer-nav .main-nav-link {
    color: #fff;
    display: inline-block;
    line-height: 1.25;
}

.footer-nav .main-nav-link:hover,
.footer-nav .main-nav-link:focus {
    color: #5498FC;
}

.footer-logo img {
    vertical-align: text-top;
}

/* Copyright */

.site-copyright {
    margin-top: 40px;
    padding-bottom: 30px;
    line-height: 1.33;
}

/* Social Icons */

.social-icons {
    padding: 0;
    list-style: none;
}

.social-icons li {
    display: inline-block;
    text-align: center;
    background-image: url('/assets/img/icon-sprite-2017.png');
    background-image: -webkit-linear-gradient(transparent, transparent), url('/assets/img/icon-sprite-2017.svg');
    background-image: linear-gradient(transparent, transparent), url('/assets/img/icon-sprite-2017.svg');
    background-repeat: no-repeat;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    -webkit-transition: .25s ease-out;
    -moz-transition: .25s ease-out;
    -ms-transition: .25s ease-out;
    -o-transition: .25s ease-out;
    transition: .25s ease-out;
}

.social-icons li:hover {
    -webkit-transform: scale(1.17) rotate(-5deg);
    -moz-transform: scale(1.17) rotate(-5deg);
    -ms-transform: scale(1.17) rotate(-5deg);
    -o-transform: scale(1.17) rotate(-5deg);
    transform: scale(1.17) rotate(-5deg);
}

.main-content .social-icons {
    margin-top: 20px;
    margin-bottom: 20px;
}

.main-content .social-icons li {
    height: 50px;
    width: 50px;
    background-size: auto 50px;
    margin-left: 5px;
    margin-right: 5px;
}

.main-content .social-icons li:hover {
    -webkit-filter: brightness(30%);
    -moz-filter: brightness(30%);
    -ms-filter: brightness(30%);
    -o-filter: brightness(30%);
    filter: brightness(30%);
}

.site-footer .social-icons li {
    height: 25px;
    width: 25px;
    background-size: auto 25px;
    margin-left: 2px;
    margin-right: 2px;

    -webkit-filter: brightness(200%);
    -moz-filter: brightness(200%);
    -ms-filter: brightness(200%);
    -o-filter: brightness(200%);
    filter: brightness(200%);
}

.social-icons a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.facebook-icon { background-position: 0 0; }
.twitter-icon { background-position: 9% 0; }
.instagram-icon { background-position: 17.5% 0; }
.youtube-icon { background-position: 26% 0; }
.google-plus-icon { background-position: 35% 0; }
.etsy-icon { background-position: 44% 0; }
.pinterest-icon { background-position: 51.5% 0; }
.vimeo-icon { background-position: 60.5% 0; }
.linkedin-icon { background-position: 69% 0; }
.email-icon { background-position: 78% 0; }
.rss-icon { background-position: 86.5% 0; }
.tumblr-icon { background-position: 95.5% 0; }
.soundcloud-icon { background-position: 101.5% 0; }

/*==================================================================

Icons, misc

==================================================================*/

/*
    SVG logos with fallback PNG background-images
    PNG fallback for SVG objects
    Including this fallback in main.css
    instead of ie.css for old droid support
*/
.fallback {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
}

/* Dropdowns */
.dropdown__parent {
    position: relative;
}

.dropdown__button,
.dropdown__parent .nav-link {
    display: inline;
    vertical-align: middle;
}

.dropdown__button {
    outline: none;
    height: 18px;
    width: 18px;
    margin-left: 3px;
}

/* Arrow icon */
.dropdown__button:hover .arrow,
.dropdown__button:focus .arrow {
    fill: #136e7f;
}

.svg .icon__dropdown.fallback { display: none; }
.no-svg .icon__dropdown.fallback { display: block; }

.dropdown__open svg {
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.dropdown__button svg {
    -moz-transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -webkit-transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -o-transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -ms-transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/*==================================================================

<hr>

==================================================================*/

hr,
.hr-line {
    width: 100%;
    height: 2px;
    background-color: #DDDDDD;
    border: none;
    margin: 15px auto;
}

/*==================================================================

Backgrounds for full width areas (ex: homepage)

==================================================================*/

.bg__gray {
    background-color: #AFAEAE;
}

.bg__dark {
    background-color: #191818;
    color: #fff;
}

.bg__light {
    background-color: #FAF7F7;
}

/*=================================

Home

===================================*/

.home__splash-content {
    position: relative;
    z-index: 99;
}

.dark-pattern-bg {
    background-color: #191818;
    background-image: url('/assets/img/repeating-box.png');
    color: #fff;
    border-bottom: 7px solid #e5461c;
    position: relative;
}

.dark-pattern-bg:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#191818+40,191818+100&0.9+40,0.4+100 */
    background: -moz-linear-gradient(45deg,  rgba(25,24,24,0.9) 40%, rgba(25,24,24,0.4) 100%);
    background: -webkit-linear-gradient(45deg,  rgba(25,24,24,0.9) 40%,rgba(25,24,24,0.4) 100%);
    background: linear-gradient(45deg,  rgba(25,24,24,0.9) 40%,rgba(25,24,24,0.4) 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    z-index: 9;
}

.reg__logos {
    text-align: center;
}

.reg__logos-heading {
    text-align: center;
}

.register-page .reg__logos-heading {
    margin-top: 20px;
}

.reg__logos li {
    padding-right: 0;
    max-width: 200px;
}

.reg__logos img {
    padding: 0 10px;
}

.large-logo,
.extra-large-logo {
    width: 100%;
    max-width: 250px;
}

/* Recent Registrations */

@-webkit-keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
}

.recent-reg {
    margin-top: 10px;
}

.recent-reg__item {
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-family: Titillium Web, PT Sans, sans-serif;
    display: inline-block;
}

.no-js .recent-reg {
    display: none;
}

.js-loaded .recent-reg__item {
    -webkit-animation: fadeInOut 5s 1;
    animation: fadeInOut 5s 1;
}

.recent-reg__heading,
.recent-reg__container {
    text-align: center;
}

.recent-reg__heading {
    color: #fff;
    font-size: 1.4rem;
}

/*=================================

TLD Timeline

===================================*/

.tld-timeline {
    text-align: center;
    counter-reset: timeline;
}

.timeline-item {
    padding: 50px 15px;
    background-color: #E5461C;
}

.t2.timeline-item { background-color: #C4261E; }
.t3.timeline-item { background-color: #681010; }

.timeline-item,
.timeline-item a,
.timeline-item a:hover,
.timeline-item a:focus {
    color: #fff;
}

.timeline-item a:hover,
.timeline-item a:focus {
    text-decoration: none;
}

.active.timeline-item {
    padding-top: 70px;
    margin-top: -20px;
    margin-bottom: -20px;
}

.timeline-head:before {
    counter-increment: timeline;
    content: counter(timeline);
    background-color: #fff;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto 20px auto;
    font-size: 2.8rem;
    color: #E5461C;
    line-height: 50px;
    font-weight: 600;
    font-family: Titillium Web, PT Sans, sans-serif;
}

.t2 .timeline-head:before { color: #C4261E; }
.t3 .timeline-head:before { color: #681010; }

.timeline-head h3 {
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 10px;
}

.timeline-head h4 {
    margin-bottom: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.timeline-body {
    font-family: PT Sans, sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
}

/* /live Featured Sites */
.featSites {
    /* Clearfix: */
    overflow: auto;
}

.featSites__nav {
    display: block;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

.featSites__nav-heading:after {
    content: '|';
    font-size: 2rem;
    color: #DDDDDD;
    display: inline-block;
    margin-left: 5px;
    margin-right: 10px;
}

.featSites__nav-heading,
.featSites__nav-list,
.featSites__nav-list li {
    display: inline-block;
}

.featSites__nav button:hover,
.featSites__nav button:focus {
    text-decoration: underline;
    outline: none;
}

/* Square grid */

.grid__square-item {
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;

    background-color: #F9F7F7;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 90% auto;
    cursor: pointer;

    -webkit-transition: .75s ease-in-out;
    -ms-transition: .75s ease-in-out;
    -moz-transition: .75s ease-in-out;
    -o-transition: .75s ease-in-out;
    transition: .75s ease-in-out;
}

.grid__square-item:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.ie8 .grid__square-item {
    background-image: none !important;
}

/* Grid background-colors */
/* Category: Dealer */
.grid__square-item:nth-of-type(odd) {
    background-color: #F9F7F7;
}

/* Category: Manufacturer */
.grid__square-item:nth-of-type(even),
.grid__square-item:nth-of-type(4n+3) {
    background-color: #f1f1f1;
}

/* Category: Services */
.grid__square-item:nth-of-type(3n+2) {
    background-color: #e8e8e8;
}

/* Category: News */
.grid__square-item:nth-of-type(5n),
.grid__square-item:nth-of-type(7n+1) {
    background-color: #DDDDDD;
}

.grid__square-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: -5;
    opacity: 0;

    -moz-transform: scale(.25);
    -webkit-transform: scale(.25);
    -o-transform: scale(.25);
    -ms-transform: scale(.25);
    transform: scale(.25);
}

.csstransition .grid__square-overlay {
    -webkit-transition: .17s ease-out;
    -ms-transition: .17s ease-out;
    -moz-transition: .17s ease-out;
    -o-transition: .17s ease-out;
    transition: .17s ease-out;
}

.no-touch .grid__square-item:hover .grid__square-overlay,
.no-touchevents .grid__square-item:hover .grid__square-overlay,
.touchevents .show-overlay .grid__square-overlay,
.touch .show-overlay .grid__square-overlay {
    background-color: rgb(25, 24, 24);
    background-color: rgba(25, 24, 24, 0.85);

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#191818+40,191818+100&0.9+40,0.4+100 */
    background: -moz-linear-gradient(125deg, rgba(25,24,24,0.9) 40%, rgba(25,24,24,0.6) 100%);
    background: -webkit-linear-gradient(125deg, rgba(25,24,24,0.9) 40%,rgba(25,24,24,0.6) 100%);
    background: linear-gradient(125deg, rgba(25,24,24,0.9) 40%,rgba(25,24,24,0.6) 100%);

    display: block;
    z-index: 5;
    opacity: 1;
    height: 100%;
    width: 100%;

    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);

    -webkit-transition: .17s ease-out;
    -ms-transition: .17s ease-out;
    -moz-transition: .17s ease-out;
    -o-transition: .17s ease-out;
    transition: .17s ease-out;
}

.grid__square-link {
    display: table-cell;
    vertical-align: middle;

    text-decoration: none !important;
}

.grid__square-link,
a.grid__square-link:hover,
a.grid__square-link:focus {
    color: #fff;
}

.ie8 .grid__square-link {
    color: #3B50EA;
}

.grid__square-content {
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}

.grid__square-content h2 {
    font-family: Titillium Web, PT Sans, sans-serif;
    font-weight: 600;
    font-size: 2.4rem;
    color: #fff;
    margin-bottom: 10px;
}

.featSites__item-category,
.featSites__item-location {
    font-size: 1.8rem;
    margin-bottom: 0;
}


/*=================================

Why Page

=================================*/
.why-page .js-loaded .fadeCopy {
    -webkit-animation: fadeInOut 5s 1;
    animation: fadeInOut 5s 1;
}

.why-page .tld-steps .arrows {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.why-page .tld-steps .arrow {
    float: left;
    margin: 0;
    width: 33%;
    padding: 31px 10px;
    position: relative;
    text-align: center;
}

.why-page .tld-steps .arrow:after {
    border-top: 48px solid transparent;
    border-bottom: 48px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: -17px;
    top: 0;
    width: 0;
    z-index: 2;
}

.why-page .tld-steps .arrow:last-child:after {
    border: none;
    right: 0;
}

.why-page .tld-steps .step1 { background-color: #E5461C; }

.why-page .tld-steps .step2 { background-color: #C4261E; }

.why-page .tld-steps .step3 { background-color: #681010; }

.why-page .tld-steps .arrow.step1:after { border-left: 17px solid #E5461C; }

.why-page .tld-steps .arrow.step2:after { border-left: 17px solid #C4261E; }

.why-page .tld-steps .arrow.step3:after {
    border: none;
    right: 0;
}

.why-page .tld-steps .arrow span { position: relative; }


@media only screen and (max-width: 449px) {

    .why-page .tld-steps .arrow {
        float: none;
        padding-left: 20px;
    }

    .why-page .tld-steps .arrow:after { left: 10px; }
}

@media only screen and (max-width: 929px) {
    .why-page .tld-steps .arrow {
        float: none;
        padding-right: 10px;
        padding-left: 35px;
        text-align: left;
        width: 100%;
    }

    .why-page .tld-steps .arrow:first-child { border-radius: 6px 6px 0 0; }

    .why-page .tld-steps .arrow:last-child { border-radius: 0 0 6px 6px; }

    .why-page .tld-steps .arrow:after {
        top: auto;
        bottom: -17px;
        left: 23px;
        background-color: transparent;
        border-top: 17px solid transparent;
        border-right: 17px solid transparent;
        border-bottom: 0 solid transparent;
        border-left: 17px solid transparent;
    }

    .why-page .tld-steps .arrow.step1:after {
        border-top-color: #E5461C;
        border-left-color: transparent;
    }

    .why-page .tld-steps .arrow.step2:after {
        border-top-color: #C4261E;
        border-left-color: transparent;
    }
}


.why-page .why-storage .section-icon { text-align: right; }

.why-page .why-storage .section-icon .accent {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.why-page .why-storage .section-icon .accent div {
    height: 42px;
    margin: 10px 0;
    width: 39px;
}

.why-page .why-storage .section-icon .icon {
    display: inline-block;
    height: 169px;
    margin: 0 15px;
    width: 158px;
    vertical-align: middle;
}

.why-page .why-storage .get-found .accent div {background: url('/assets/img/lander-get-found-accent.svg') no-repeat; }
.why-page .why-storage .get-found .icon { background: url('/assets/img/lander-get-found.svg') no-repeat; }

.why-page .why-storage .pricing .accent div {background: url('/assets/img/lander-pricing-accent.svg') no-repeat; }
.why-page .why-storage .pricing .icon { background: url('/assets/img/lander-pricing.svg') no-repeat; }

.why-page .why-storage .migration .accent div {background: url('/assets/img/lander-migration-accent.svg') no-repeat; }
.why-page .why-storage .migration .icon { background: url('/assets/img/lander-migration.svg') no-repeat; }

@media only screen and (max-width: 799px) {
    .why-page .why-storage .section-icon .icon {
        display: block;
        margin: 0 auto;
    }
}


@media only screen and (max-width: 899px) {
    .why-page .why-storage .section-icon .accent { display: none; }
}


.why-page .sample-domains div { margin-bottom: 0px; }

@media only screen and (max-width: 799px) {
    .why-page .sample-domains div:first-child {
        margin-bottom: 30px
    }
}



    /*=================================

    Contact page

    ===================================*/

.contact-page section {
    margin-bottom: 55px;
}

.contact-form-wrapper {
    margin-top: 50px;
    margin-bottom: 50px;
}

.contact-form-wrapper .button {
    margin: 0;
}

.contact__address {
    text-align: center;
    margin-bottom: 20px;
}

.anti-abuse p img {
    width: 150px;
}

/* Google Map Embed */

.map-embed--container {
    position: relative;
    padding-bottom: 50%;
    margin-bottom: 60px;
    height: 0;
    overflow: hidden;
}

.map-embed--iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/*=================================

Case Studies

===================================*/

.case-study-device {
    max-width: 250px;
}

/*=================================

Blog

=================================*/

.blog-post-preview {
    padding: 1rem 0;
}

.blog-post-preview__image {
    margin-bottom: .5rem;
}

/*=================================

Sitemap

=================================*/

.list__sitemap {
    max-width: 300px;
    margin: 0 auto;
}

/*=================================

Register, domain search

"domain search" shortened to "ds"
(classes are prefixed with .ds__)

===================================*/

.ds .row {
    padding-top: 20px;
}

.ds__form-submit {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.form__domain-search-container {
    position: relative;
}

.avail-prefix-input {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    height: 54px;
    background-color: #fff;
    color: #222;
    font-weight: 400;
    padding-left: 15px;
    font-family: PT Sans, sans-serif;
    font-size: 1.6rem;

    left: 0;
    position: absolute;
    z-index: 0;
    width: 0;
    background: none;
    padding-right: 0;
    color: #222;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
}

.prefix-active .avail-prefix-input {
    width: 105px;
    z-index: 555;
}

/* Compensate for visible label when placeholders aren't supported */
.no-placeholder .avail-prefix-input {
    top: 24px;
}

.prefix-active #ds__form-input {
    padding-left: 102px;
}

/* Cart status/count */
.ds__cart-status {
    font-weight: 400;
    font-size: 1.8rem;
    display: block;
}

.ds__cart-status:hover,
.ds__cart-status:focus {
    text-decoration: underline;
    outline: none;
}

.icon__cart {
    vertical-align: middle;
    margin-left: 5px;
}

/* Search results and suggestions */
.ds__results-list {
    margin-top: 10px;
    margin-bottom: 40px;
}

.ds__results-item {
    font-size: 1.8rem;
    border-top: solid 2px #f1f1f1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ds__results-item:last-of-type {
    border-bottom: solid 2px #f1f1f1;
}

.ds__results-item:hover {
    color: #C4261E;
}

.ds__unavailable,
.ds__unavailable:hover {
    color: #777575;
}

.ds__add {
    margin: 0;
    width: 60px;
    vertical-align: middle;
}

.ds__in-cart .ds__add {
    background-color: #C4261E;
}

.icon__add-to-cart {
    font-weight: 600;
    font-family: Titillium Web, PT Sans, sans-serif;
    font-style: normal;
}

/* Unavailable/disabled button */
.ds__add[disabled],
.ds__add[disabled]:hover,
.ds__add[disabled]:focus,
.ds__unavailable:hover .ds__add[disabled],
.ds__unavailable:focus .ds__add[disabled] {
    color: #AFAEAE;
    background-color: #f1f1f1;
    box-shadow: none;
}

.ds__results-domain {
    padding-left: 20px;
    display: inline-block;
    vertical-align: middle;
    width: -webkit-calc(100% - 65px);
    width: calc(100% - 65px);
    text-transform: lowercase;
    /* Wrap long domain names, except for TLD (see .ds__tld below) */
    white-space: pre-line;
    -ms-word-break: break-all;
    word-break: break-all;
    word-wrap: break-word;
}

.ds__in-cart .ds__results-domain {
    background-image: url('/assets/img/checkmark.png');
    background-image: -webkit-linear-gradient( transparent,  transparent), url('/assets/img/checkmark.svg');
    background-image:  linear-gradient( transparent,  transparent), url('/assets/img/checkmark.svg');
    background-position: 1px 7px;
    background-repeat: no-repeat;
    background-size: auto 12px;
    color: #C4261E;
}

/* Keep TLD together instead of breaking between letters */
.ds__tld {
    white-space: nowrap;
}

.ds__available-registrars {
    padding: 0 10px;
}

/* Checkout options */
.ds__checkout-list {
    text-align: center;
}

.ds__checkout-registrar {
    display: inline-block;
    vertical-align: top;
}

.ds__checkout-registrar .button {
    border-color: #ddd;
    margin: 0 1rem 2rem;
    max-width: 200px;
}

.ds__checkout-registrar .button:hover,
.ds__checkout-registrar .button:focus {
    background-color: #fff;
    border-color: #C4261E;
}

.ds__checkout-registrar img {
    display: block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Empty error styles */

@-webkit-keyframes iconSlideIn {
    0% {
        background-position: 3% -50%;
    }
    100% {
        background-position: 3% 50%;
    }
}

@keyframes iconSlideIn {
    0% {
        background-position: 3% -50%;
    }
    100% {
        background-position: 3% 50%;
    }
}

.ds__form-input.is-empty {
    border-color: #C4261E;
    background-image: -webkit-linear-gradient( transparent, transparent), url('/assets/img/exclaim-red-bold.svg');
    background-image: linear-gradient( transparent, transparent), url('/assets/img/exclaim-red-bold.svg');
    background-repeat: no-repeat;
    background-position: 97% 50%;
    background-position: top 50% right 15px;
    -webkit-animation: iconSlideIn .33s cubic-bezier(.05,.12,.47,1.33) 1 forwards;
    animation: iconSlideIn .33s cubic-bezier(.05,.12,.47,1.33) 1 forwards;
}

/*==================================================================

    Reusable helper classes

    Prefixes:
    * .s__ for style
    * .t__ for typography
    * .l__ for layout

==================================================================*/

.s__margin-bottom { margin-bottom: 20px; }
.s__margin-top { margin-top: 20px; }
.s__margin-left { margin-left: 20px; }
.s__margin-right { margin-right: 20px; }

.s__margin-top-neg { margin-top: -20px; }

.s__margin-none { margin: 0; }
.s__margin-bottom-none { margin-bottom: 0; }
.s__margin-top-none { margin-top: 0; }
.s__margin-left-none { margin-left: 0; }
.s__margin-right-none { margin-right: 0; }

.s__padding-bottom { padding-bottom: 20px; }
.s__padding-top { padding-top: 20px; }
.s__padding-left { padding-left: 20px; }
.s__padding-right { padding-right: 20px; }

.s__padding-top-half { padding-top: 10px; }

.s__padding-none { padding: 0; }
.s__padding-bottom-none { padding-bottom: 0; }
.s__padding-top-none { padding-top: 0; }
.s__padding-left-none { padding-left: 0; }
.s__padding-right-none { padding-right: 0; }

.s__left { text-align: left; }
.s__center { text-align: center; }
.s__right { text-align: right; }

.t__normal { font-weight: 400; }
.t__bold { font-weight: 600; font-family: Titillium Web, PT Sans, sans-serif; }

/* Allow long words (like URLs) to break to avoid being cut off/overflow scroll */
.t__break-word {
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
}

small,
.t__small {
    font-size: 1.4rem;
}
.t__medium { font-size: 1.8rem; }
.t__large { font-size: 2.2rem; }

.t__italic { font-style: italic; }

.t__uppercase { text-transform: uppercase; }

.t__color-red { color: #C4261E; }
.t__color-gray { color: #777575; }
.t__color-black { color: #191818; }
.t__color-white { color: #fff; }

.l__align-top { vertical-align: top; }
.l__align-middle { vertical-align: middle; }
.l__align-bottom { vertical-align: bottom; }

.l__center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.l__right {
    float: right;
    margin: 1rem 0 1rem 1rem;
}

.l__left {
    float: left;
    margin: 1rem 1rem 1rem 0;
}

.l__relative { position: relative; }

.l__width-small {
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.l__width-medium {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}

/*==================================================================

Media Queries

    * Mobile first responsive design (mostly!)
    * http://bradfrost.com/blog/mobile/the-many-faces-of-mobile-first/
    * http://bradfrost.com/blog/post/responsive-strategy/#mobile-first

==================================================================*/

/* Under 450px / Small mobile specific styles */
@media only screen and (max-width: 449px) {

    .mobile-hide {
        display: none;
    }

    .main-content .row,
    .site-footer .row,
    .header-logo-container {
        -webkit-transition: padding .17s, left .17s;
        -moz-transition: padding .17s, left .17s;
        -ms-transition: padding .17s, left .17s;
        -o-transition: padding .17s, left .17s;
        transition: padding .17s, left .17s;
    }

    .header-logo-container {
        margin-left: 20px;
        text-align: left;
    }

    .site-logo {
        max-width: 175px;
    }

}

@media only screen and (min-width: 450px) {

    /* Lists */
    .list__3-col li,
    .list__4-col li {
        width: 48%;
        width: -webkit-calc(50% - 5px);
        width: calc(50% - 5px);
    }

    .grid__square-item {
        width: 50%;
    }

    /* Domain search */
    .ds__add {
        width: 100px;
    }

    .ds__results-domain {
        padding-left: 33px;
        width: -webkit-calc(100% - 105px);
        width: calc(100% - 105px);
    }

    .ds__in-cart .ds__results-domain {
        background-position: 7px 6px;
        background-size: auto 16px;
    }

}

@media only screen and (max-width: 599px) {

    .form__newsletter-submit {
        max-width: 180px;
        padding: 15px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .reg__logos li {
        padding-right: 0;
    }

    /* Register, domain search */
    .ds__cart-status {
        margin: -20px auto 40px;
    }

    .ds__help-tooltip {
        padding-top: 10px;
    }

}

@media only screen and (min-width: 600px) {

    .heading__1 {
        font-size: 4rem;
    }

    .heading__2 {
        font-size: 2.8rem;
    }

    .heading__3 {
        font-size: 2.2rem;
    }

    /* HR */
    hr,
    .hr-line {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /* Buttons */
    .button {
        font-size: 2.2rem;
        padding: 1rem 2.5rem;
    }

    .button__small {
        font-size: 1.6rem;
        padding: .5rem 1rem;
    }

    .button__large {
        padding: 1.5rem 3.5rem;
        font-size: 2.8rem;
    }

    .button__collection-wide {
        margin: 10px;
        min-width: 290px;
    }

    /* Lists */
    .list__2-col > li {
        width: 48%;
        width: -webkit-calc(50% - 5px);
        width: calc(50% - 5px);
    }

    .list__3-col > li,
    .list__4-col > li {
        width: 31.33%;
        width: -webkit-calc(33.33% - 5px);
        width: calc(33.33% - 5px);
    }

    /* Registrars */
    .form__subscribe-group {
        padding-left: 20px;
        width: 50%;
        display: inline-block;
        vertical-align: top;
        margin-right: -4px;
    }

    .form__subscribe-group:first-of-type {
        padding-left: 0;
        padding-right: 20px;
    }

    .form__subscribe-group:last-of-type {
        margin-left: 50%;
    }

    .list__registrar-logos li {
        height: 130px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Blog */

    .blog-post-preview {
        display: inline-block;
        vertical-align: top;
        width: 47%;
        width: -webkit-calc(50% - 5px);
        width: calc(50% - 5px);
        padding-bottom: 3rem;
    }

    .blog-post-preview:nth-of-type(odd) {
        padding-right: 2rem;
    }

    .blog-post-preview:nth-of-type(even) {
        padding-left: 2rem;
    }

    .blog-post-preview__image {
        max-width: none;
        width: 100%;
    }

    /* Domain search */
    .ds {
        background-color: #faf7f7;
    }

    .form__domain-search-container,
    .ds__form-submit {
        display: inline-block;
        vertical-align: top;
    }

    .form__domain-search-container {
        width: 58%;
        width: -webkit-calc(100% - 235px);
        width: calc(100% - 235px);
        margin-right: 10px;
    }

    .ds__form-submit {
        width: 40%;
        width: -webkit-calc(220px);
        width: calc(220px);
        margin-top: 0;
        font-size: 1.8rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ds__cart-status {
        float: right;
    }

    .ds__suggestions .ds__cart-status {
        margin-top: -25px;
        margin-bottom: 25px;
    }

    .ds__checkout {
        clear: both;
    }

    .ds__checkout-list {
        margin-bottom: 20px;
    }

    .ds__checkout-submit {
        font-size: 2.4rem;
        padding: 25px 40px;
    }

    .ds__add {
        padding-left: .5rem;
        padding-right: .5rem;
    }

}

/* Under 800px / Mobile specific styles */
@media only screen and (max-width: 799px) {

    /* Hide until toggled visible */
    #header-main-nav {
        display: none;

        padding-top: 1rem;
        padding-bottom: 1rem;
        box-shadow: inset 0 0 10px #AFAEAE;
        position: absolute;
        top: 100%;
        top: -webkit-calc(100% + 1.5rem);
        top: calc(100% + 1.5rem);
        width: 100%;
        right: 0;
        z-index: 999;
        background-color: #ddd;
    }

    /* Footer */
    .site-footer {
        text-align: center;
    }

    .footer-nav {
        margin-top: 20px;
    }

    /* Contact */
    .contact__address-left {
        padding-top: 30px;
    }

    .featSites__nav-heading,
    .featSites__nav-list,
    .featSites__nav-list li {
        display: block;
        border-right: none;
    }

    .featSites__nav-list li {
        text-align: center;
        margin: 5px auto;
    }

    .featSites__nav-list {
        display: none;
    }

    .featSites__nav-heading {
        cursor: pointer;
    }

    .featSites__nav-heading:after {
        display: none;
    }

    .featSites__nav-heading .dropdown__button {
        display: inline-block;
        vertical-align: text-bottom;
    }

}


/* Wider than 800px - Most of our tablet/desktop styles */
@media only screen and (min-width: 800px) {

    .dark-pattern-bg {
        border-bottom-width: 13px;
    }

    .main-content .row:last-of-type {
        padding-bottom: 60px;
    }

    .featSites__nav-list {
        display: inline-block !important;
    }

    .featSites__nav-heading .dropdown__button {
        display: none;
    }

    .featSites__nav-list li:not(:last-of-type):after {
        content: '|';
        font-size: 2rem;
        color: #DDDDDD;
        display: inline-block;
        margin-left: 5px;
        margin-right: 10px;
    }

    .grid__square-item {
        width: 33.3%;
    }

    /* Grid */

    [class*="-column"] {
        padding-right: 50px;
        display: inline-block;
        vertical-align: top;
    }

    /* Removes gutter/padding-right for last columns with sibling(s) */
    [class*="-column"] ~ [class*="-column"]:last-child,
    .full-column {
        padding-right: 0;
    }

    .half-column {
        width: 48%;
        width: -webkit-calc(50% - 5px);
        width: calc(50% - 5px);
    }

    .half-column:first-of-type {
        padding-right: 25px;
    }

    .half-column + .half-column {
        padding-right: 0;
        padding-left: 25px;
    }

    .third-column {
        width: 31.3%;
        width: -webkit-calc(33.3% - 5px);
        width: calc(33.3% - 5px);
    }

    .third-column:nth-child(2n) {
        padding-right: 50px;
    }

    .third-column:last-child {
        display: inline-block;
        margin-top: 0;
    }

    .two-thirds-column {
        width: 64%;
        width: -webkit-calc(66.6% - 5px);
        width: calc(66.6% - 5px);
    }

    .fourth-column {
        width: 23%;
        width: -webkit-calc(25% - 5px);
        width: calc(25% - 5px);
    }

    .three-fourths-column {
        width: 73%;
        width: -webkit-calc(75% - 5px);
        width: calc(75% - 5px);
    }

    .two-fifths-column {
        width: 38%;
        width: -webkit-calc(40% - 5px);
        width: calc(40% - 5px);
    }

    .three-fifths-column {
        width: 58%;
        width: -webkit-calc(60% - 5px);
        width: calc(60% - 5px);
    }

    /* Lists */
    .list__4-col > li {
        width: 23%;
        width: -webkit-calc(25% - 5px);
        width: calc(25% - 5px);
    }

    /* Navigation */

    .button__mobile-nav,
    .icon__mobile-nav.fallback {
        display: none;
    }

    /* Keeps nav visible at desktop if nav was closed in mobile */
    #header-main-nav {
        display: inline-block !important;
    }

    .header-logo-container {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        margin-left: 20px;
        /* Keep logo clickable and above the absolutely positioned nav */
        position: relative;
        z-index: 9999;
    }

    .header-nav {
        position: absolute;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 20px;
        background: none;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }

    .header-nav .top-level-nav {
        padding: 0;
        text-align: right;
    }

    .header-nav .nav-item {
        display: inline-block;
        margin-left: 3rem;
    }

    .header-nav .main-nav-link {
        padding: 0;
    }

    .main-nav-link:focus {
        outline: none;
    }

    /* Footer */

    .site-footer {
        padding-bottom: 100px;
    }

    /* Align right half-column */
    .footer-nav {
        text-align: right;
    }

    .site-footer .social-icons li {
        margin-top: 0;
    }

    .site-footer .social-icons li:first-child {
        margin-left: 0;
    }

    .footer-nav .main-nav-item:first-of-type .main-nav-link {
        padding-top: 0;
    }

    /* Contact */
    .contact__address {
        width: 50%;
        display: inline-block;
        vertical-align: middle;
        padding-top: 20px;
    }

    .contact__address-left {
        text-align: right;
        padding-right: 20px;
    }

    .contact__address-right {
        text-align: left;
        padding-left: 20px;
    }

    .reg__logos img {
        padding: 5px 20px;
    }

    /* Recent registrations */
    .recent-reg {
        text-align: left;
    }

    .recent-reg__heading,
    .recent-reg__container {
        display: inline-block;
        text-align: left;
    }

    .recent-reg__heading {
        margin-right: .25em;
    }

    .recent-reg__item {
        font-size: 2.1rem;
    }

    .l__flex-vert-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .extra-large-logo {
        max-width: 350px;
    }

    /* Domain search */
    .ds .row {
        padding-top: 60px;
    }

}

/* Narrower than 1100px
	1100px = ( 1000px + (50px * 2) )
	1100px = ( rowWidth + (padding * eachSide) ) */
@media only screen and (max-width: 1099px) {

    .tld-timeline {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Active Timeline */
    .active.timeline-item {
        margin: 0 -10px;
        padding-top: 50px;
    }

}

/* Wider than 1100px
    1100px = ( 1000px + (50px * 2) )
    1100px = ( rowWidth + (padding * eachSide) ) */
@media only screen and (min-width: 1100px) {

    /* Header */
    .header-nav {
        right: 0;
    }

    .header-logo-container {
        margin-left: 0;
    }

    .header-nav .nav-item {
        margin-left: 5rem;
    }

    /* Timeline */
    /* TLD Timeline */

    .tld-timeline {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        /* Make all children equal height */
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .timeline-item {
        width: 33.3%;
        display: inline-block;
        vertical-align: top;
        padding-bottom: 35px;
    }

    /* Don't need container padding */
    .main-content .row,
    .site-footer .row {
        padding-right: 0;
        padding-left: 0;
    }

    /* Headings */
    .page-title {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    /* Forms */
    .form__subscribe-group {
        width: 33.33%;
    }

    .form__subscribe-group:first-of-type {
        margin-left: 0;
        padding-right: 30px;
    }

    .form__subscribe-group:nth-of-type(2n) {
        padding-left: 15px;
        padding-right: 15px;
    }

    .form__subscribe-group:last-of-type {
        margin-left: 0;
        padding-left: 30px;
    }

    .form__subscribe-submit {
        width: 250px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 5px;
    }

    .form__subscribe .form__basic-field {
        min-height: 88px;
    }

    .footer-logo img {
        max-height: none;
    }

}

@media only screen and (min-width: 1400px) {

    .grid__square-item {
        width: 16.66%;
    }

    .grid__square-item {
        font-size: 1.8rem;
    }

}

/*=================================

Retina (2x Resolution Devices)

=================================*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {}

/*=================================

Retina (2x Resolution Devices)

=================================*/
@media print {

    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }

    a, a:visited {
        color: #3F3E3E !important;
        text-decoration: underline;
    }
    a:after, a:visited:after {
        content: " (" attr(href) ")";
    }
    a abbr[title]:after, a:visited abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm; }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    nav {
        display: none;
    }
}