/* ------------------------------------- 
		GLOBAL 
------------------------------------- */

* {
    margin: 0;
    padding: 0;
}

* {
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

img {
    max-width: 100%;
}

.collapse {
    margin: 0;
    padding: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    width: 100%!important;
    height: 100%;
    display: inline-table;
    background-image: url("../images/page-background.jpg");
    background-size: cover;
    background-position: top;
    background-repeat: repeat-y;
}


/* ------------------------------------- 
		ELEMENTS 
------------------------------------- */

a {
    color: #2BA6CB;
}

.btn {
    text-decoration: none;
    color: #FFF;
    background-color: #326a9d;
    padding: 10px 16px;
    font-weight: bold;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 16px;
    border: 0;
}

p.callout {
    padding: 15px;
    background-color: #ECF8FF;
    margin-bottom: 25px;
    text-align: center;
}

.callout a {
    font-weight: bold;
    color: #2BA6CB;
}

table.social {
    /* 	padding:15px; */
    background-color: #ebebeb;
}

.social .soc-btn {
    padding: 3px 7px;
    font-size: 12px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    display: block;
    text-align: center;
}

a.fb {
    background-color: #3B5998!important;
}

a.tw {
    background-color: #1daced!important;
}

a.gp {
    background-color: #DB4A39!important;
}

a.ms {
    background-color: #000!important;
}

.sidebar .soc-btn {
    display: block;
    width: 100%;
}


/* ------------------------------------- 
		HEADER 
------------------------------------- */

table.head-wrap {
    width: 100%;
}

.header.container table td.logo {
    padding: 15px;
}

.header.container table td.label {
    padding: 15px;
    padding-left: 0px;
}


/* ------------------------------------- 
		BODY 
------------------------------------- */

table.body-wrap {
    width: 100%;
}


/* ------------------------------------- 
		FOOTER 
------------------------------------- */

table.footer-wrap {
    width: 100%;
    clear: both!important;
}

.footer-wrap .container td.content p {
    border-top: 1px solid rgb(215, 215, 215);
    padding-top: 15px;
}

.footer-wrap .container td.content p {
    font-size: 10px;
    font-weight: bold;
}


/* ------------------------------------- 
		TYPOGRAPHY 
------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #000;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    font-size: 60%;
    color: #6f6f6f;
    line-height: 0;
    text-transform: none;
}

h1 {
    font-weight: 200;
    font-size: 44px;
}

h2 {
    font-weight: 200;
    font-size: 37px;
}

h3 {
    font-weight: 500;
    font-size: 27px;
}

h4 {
    font-weight: 500;
    font-size: 23px;
}

h5 {
    font-weight: 900;
    font-size: 17px;
}

h6 {
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
}

.collapse {
    margin: 0!important;
}

p,
ul {
    margin-bottom: 10px;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.6;
}

p.lead {
    font-size: 17px;
}

p.last {
    margin-bottom: 0px;
}

ul li {
    margin-left: 5px;
    list-style-position: inside;
}


/* ------------------------------------- 
		SIDEBAR 
------------------------------------- */

ul.sidebar {
    background: #ebebeb;
    display: block;
    list-style-type: none;
}

ul.sidebar li {
    display: block;
    margin: 0;
}

ul.sidebar li a {
    text-decoration: none;
    color: #666;
    padding: 10px 16px;
    /* 	font-weight:bold; */
    margin-right: 10px;
    /* 	text-align:center; */
    cursor: pointer;
    border-bottom: 1px solid #777777;
    border-top: 1px solid #FFFFFF;
    display: block;
    margin: 0;
}

ul.sidebar li a.last {
    border-bottom-width: 0px;
}

ul.sidebar li a h1,
ul.sidebar li a h2,
ul.sidebar li a h3,
ul.sidebar li a h4,
ul.sidebar li a h5,
ul.sidebar li a h6,
ul.sidebar li a p {
    margin-bottom: 0!important;
}


/* ------------------------------------- 
		CUSTOM 
------------------------------------- */

.header img {
    width: 300px;
}

table.column.contact {
    padding: 15px;
}

table.column.contact td {
    padding: 0;
    font-size: 14px;
}

p.browser-view {
    width: 100%;
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
}

p.browser-view a {
    color: #000;
}

.button-container {
    text-align: center;
}

.product-links a {
    line-height: 2;
}

select[name="my_type"] {
    display: none;
}

.open-in-new {
    margin-bottom: -4px;
    width: 20px;
}

/* --------------------------------------------------- 
		RESPONSIVENESS
------------------------------------------------------ */


/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */

.container {
    display: block!important;
    max-width: 600px!important;
    margin: 0 auto!important;
    /* makes it centered */
    clear: both!important;
}


/* This should also be a block element, so that it will fill 100% of the .container */

.content {
    padding: 15px;
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

.signup {
    background: #ffffff;
    border-radius: 25px;
    padding: 25px;
    max-width: 380px;
    margin-top: 5%;
    -webkit-box-shadow: 9px 9px 44px 0px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 9px 9px 44px 0px rgba(0, 0, 0, 0.8);
    box-shadow: 9px 9px 44px 0px rgba(0, 0, 0, 0.8);
}

.terms {
    text-align: center;
    padding-bottom: 0;
}

.terms p {
    margin: 0;
    padding-bottom: 0;
}

input[type="text"] {
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 10px;
    width: 60%;
    margin-left: 10px;
}

form {
    text-align: center;
}


/* Let's make sure tables in the content area are 100% wide */

.content table {
    width: 100%;
}


/* Odds and ends */

.column {
    width: 300px;
    float: left;
}

.column tr td {
    padding: 15px;
}

.column-wrap {
    padding: 0!important;
    margin: 0 auto;
    max-width: 600px!important;
}

.column table {
    width: 100%;
}

.social .column {
    width: 280px;
    min-width: 279px;
    float: left;
}


/* Be sure to place a .clear element after each set of columns, just to be safe */

.clear {
    display: block;
    clear: both;
}


/* ------------------------------------------- 
		PHONE
-------------------------------------------- */

@media only screen and (max-width: 600px) {
    a[class="btn"] {
        display: block!important;
        margin-bottom: 10px!important;
        background-image: none!important;
        margin-right: 0!important;
    }
    div[class="column"] {
        width: auto!important;
        float: none!important;
    }
    table.social div[class="column"] {
        width: auto!important;
    }
}

@media only screen and (max-width: 490px) {
    body {
        background-image: none;
        background-color: #ffffff;
    }
    .signup {
        background: #ffffff;
        border-radius: 25px;
        padding: 15px;
        margin-top: 0;
        box-shadow: none;
    }
}

@media only screen and (max-width: 320px) {
    body {
        width: 320px!important;
    }
}