/*
Theme Name: Salient Child Theme
Theme URI: http://hypertextdevelopment.com/
Description: This is a custom child theme for Salient
Author: Neil B
Author URI: http://hypertextdevelopment.com/
Template: salient
Version: 0.1
*/

@font-face {
    font-family: NTF-GrandMediumItalic;
    src: url('../fonts/NorthType-NTF-GrandMediumItalic.otf') format('opentype'),
    url('../fonts/NorthType-NTF-GrandMediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: NTF-GrandMedium;
    src: url('../fonts/NorthType-NTF-GrandMedium.otf') format('opentype');
}

body { background-color: #1b1b1b; padding: 0; margin: 0; }
body, td, p, div, span, li { font-family: interstate-condensed, Arial, Helvetica, sans-serif; font-weight: 400; font-style: normal; color: #fff; -webkit-text-size-adjust: none; }

.wrapper { width: 1200px; margin: 0 auto; padding: 40px 0; }
.container { width: 1200px; margin: 0 auto; }
.headerLeft { float: left; }
.headerImage img { width: 145px; height: auto; max-width: 145px; padding-bottom: 8px; }
.headerText {  letter-spacing: 1px; font-size: 16px; line-height: 24px; text-transform: uppercase; }

.headerRight { float: right; display: inline; vertical-align: top; padding-top: 8px; }
.headerRight td { font-family: interstate-condensed, sans-serif; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: 1px; font-style: normal; text-transform: uppercase; padding-right: 40px; vertical-align: top; text-align: center; }
.headerRight td a { text-decoration: none; color: #fff; position: relative; }
.headerRight td a:active { text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid #00b37e; }
.headerRight td a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: -7px; left: 0; background-color: #00b37e; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.headerRight td a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }
.headerRight img { width: 25px; height: auto; border: 0; }

.mobLinks { display: none; }

.clear { clear: both; }


/* Homepage */

.strap { width: 775px; font-family: "NTF-GrandMedium"; text-transform: uppercase; font-size: 66px; line-height: 56px; padding-bottom: 20px; }
.credentials { font-size: 14px; line-height: 24px; text-transform: uppercase; }
.credentials span:nth-child(1) { padding-left: 0px; }
.credentials span {  letter-spacing: 1.5px; padding-left: 20px; padding-right: 20px; }
.credentials div { display: inline; }
.credentials p { display: inline; color: #888; }

.divider {  letter-spacing: 1px; font-size: 15px; }
.divider span {  letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; }

.stroke { color: #e64179; font-size: 20px; line-height: 26px; padding-right: 7px; }
.title { color: #00b37e; font-size: 16px; line-height: 26px; padding-right: 30px; }
.title:nth-child(last) { padding-right: 0px; }

.examples { font-size: 14px; line-height: 22px; text-transform: uppercase; text-align: center;  letter-spacing: 1px; padding-bottom: 15px; }
.examplesStrap { width: 700px; font-family: "NTF-GrandMedium"; text-transform: uppercase; font-size: 42px; line-height: 36px; padding-bottom: 20px; text-align: center; margin: 0 auto; }

.column { width: 355px; float: left;  margin-left: 15px; margin-right: 15px; margin-bottom: 40px; padding-bottom: 20px; }
.columnImage { border: 1px solid #00b37e; border-radius: 5px; padding: 15px; text-align: center; margin: auto; }
.columnImage:nth-child(1) { margin-left: 0px; }
.columnImage:nth-child(3) { margin-right: 0px; }
.columnImage img { width: 325px; height: 325px;  border-radius: 5px; display: block; transition: transform .5s; }
.columnImage img:hover { opacity: 0.6; transform: scale(1.085); }
.columnTitle { font-family: "NTF-GrandMedium"; text-transform: uppercase; font-size: 42px; line-height: 36px; padding: 15px 0; text-align: left; }
.columnTitle a { color: #fff; text-decoration: none; }
.columnText { font-family: interstate-condensed, sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 2px; font-style: normal; text-transform: uppercase; }
.columnTasks { font-family: interstate-condensed, sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1px; font-style: normal; text-transform: uppercase; color: #00b37e; }

.workedWith { font-size: 14px; line-height: 22px; text-transform: uppercase; text-align: center;  letter-spacing: 1px; padding-bottom: 10px; border-bottom: 1px solid #fff; margin: 0 auto; width: 210px; }
.workedQuote { width: 700px; font-family: "NTF-GrandMediumItalic"; text-transform: uppercase; font-size: 38px; line-height: 36px; padding-bottom: 20px; text-align: center; margin: 0 auto; }
.workedFooter { font-size: 14px; line-height: 22px; text-transform: uppercase; text-align: center;  letter-spacing: 1px; padding-bottom: 15px; margin: 0 auto; }
.workedFooter span { font-size: 14px; line-height: 22px; text-transform: uppercase; text-align: center;  letter-spacing: 1px; padding-bottom: 40px; margin: 0 auto; color: #00b37e; }
.viewMore { font-size: 14px; line-height: 22px; text-transform: uppercase; text-align: center; letter-spacing: 1px; margin: 0 auto; }
.viewMore a { text-decoration: underline; color: #00b37e; }

.footer { padding: 40px; background-color: #00cf98; margin: 0 auto; }
.signOff { width: 600px; font-size: 15px; line-height: 22px; text-transform: uppercase; text-align: center;  letter-spacing: 1px; margin: 0 auto; }


/* Product page */

.productLogo { margin: 0 auto; text-align: center; padding-bottom: 10px; }
.productLogo img { width: 75px; height: auto; }
.productTitle { width: 775px; font-family: "NTF-GrandMedium"; text-transform: uppercase; font-size: 66px; line-height: 56px; padding-bottom: 20px; margin: 0 auto; text-align: center; }
.strapLine { font-family: interstate-condensed, sans-serif; font-weight: 400; width: 600px; font-size: 14px; line-height: 24px; text-transform: uppercase; margin: 0 auto; text-align: center; letter-spacing: 2px; }

.tasks { width: 900px; margin: 0 auto; text-align: center; }
.block { letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; display: inline; color: #e64179; font-size: 20px; line-height: 30px; }
.block span { color: #00b37e; font-size: 14px; line-height: 30px; padding-right: 30px; }

.row { display: table; }
.overview { font-size: 14px; line-height: 22px; text-transform: uppercase; text-align: center;  letter-spacing: 1px; padding-bottom: 15px; }
.overviewLeftText { text-align: left; font-size: 14px; line-height: 22px; letter-spacing: 1px; padding-bottom: 18px; }
.overviewRightText { text-align: left; font-size: 14px; line-height: 22px; letter-spacing: 1px; padding-bottom: 18px; }
.overviewRightImg { text-align: left; font-size: 14px; line-height: 22px; letter-spacing: 1px; padding-bottom: 18px;  }
.overviewBoth { width: 100%; text-align: center; }
.overviewRightImg img, .overviewBoth img { width: 100%; height: auto; }
.overviewTitle { font-family: "NTF-GrandMedium"; text-transform: uppercase; font-size: 36px; line-height: 30px; padding-bottom: 20px; margin: 0 auto; }
.overviewTitle span { font-family: "NTF-GrandMedium"; text-transform: uppercase; font-size: 36px; line-height: 30px; padding-bottom: 20px; margin: 0 auto; }
.overviewBody { font-family: interstate-condensed, sans-serif; font-weight: 400; font-size: 14px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; }
.overviewRightText a, .overviewBody a { color: #00b37e; text-decoration: none; }

.footerProduct { width: 100%; margin: 0 auto; text-align: center; display: inline; vertical-align: top; padding-bottom: 30px; float: none; }
.footerProduct td { font-family: interstate-condensed, sans-serif; font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: 1px; font-style: normal; text-transform: uppercase; padding-right: 40px; vertical-align: top; text-align: center; }
.footerProduct td a { text-decoration: none; color: #fff; position: relative; }
.footerProduct td a:active { text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid #00b37e; }
.footerProduct td a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: -7px; left: 0; background-color: #00b37e; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.footerProduct td a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }
.footerProduct img { width: 25px; height: auto; border: 0; }



/* Spacers */

.spacer30 { height: 30px; }
.spacer35 { height: 35px; }
.spacer50 { height: 50px; }
.spacer75 { height: 75px; }
.spacer120 { height: 120px; }
.spacer165 { height: 165px; }


@media only screen and (max-width: 1200px) {
    body, td, p, div, span, li { font-size: 100%; }
    .wrapper { width: 96%; }
    .container { width: 80%; }
    .headerLeft, .headerRight { text-align: center; width: 100%; margin: 0 auto; }
    .headerImage img { padding-left: 15px; padding-bottom: 30px; }
    .mobLinks { display: block; float: right; }
    .mobLinks .hider { display: none; }
    .mobLinks table { width: 200px; background-color: #ff0000; }
    .mobLinks td { padding: 20px; text-align: left; }
    .strapLine { width: 100%; }
    .strap, .productTitle { width: 100%; }
    
    .headerText { padding-bottom: 30px; }
    .credentials span { padding-left: 0px; padding-right: 0px; }
    .credentials div { display: block; }
    .credentials p { display: none; height: 0; }
    .stroke { float: left; }
    .title { display: block; }
    .column { width: 100%; margin: 0 auto; padding-bottom: 20px; max-width: 530px; display: block; float: none; }
    .columnImage img { width: 100%; height: auto; max-width: 500px; }
    
    .tasks { text-align: left; }
    .overviewLeft, .overviewRight { width: 100%; padding-left: 0px; padding-right: 0px; }
    .spacer120 { height: 40px; }
    .fl { float: left; width: 100%; height: auto; }
}

@media only screen and (max-width: 900px) {
    .tasks { width: 100%; }
    .block { display: block; text-align: center; }
}

@media only screen and (max-width: 699px) {
    .examplesStrap, .workedQuote, .signOff { width: 100%; }
}

@media only screen and (max-width: 550px) {
    .footerProduct table { width: 100%; }
    .footerProduct td, .headerRight td { padding-bottom: 10px; }
}