﻿@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display+SC:400,400i,700,700i');


/* ------------------------------- Layout ------------------------------- */


#mktgBody {
    width: 100%;
    max-width: 1008px;
}

#mktgHeader {

}

.mktgContent {

}

.mktgAside {

}

.mktgSection {
    margin-bottom: 40px; 
    box-sizing: border-box;
    display: block;
    position: relative;
}

.mktgSection::after {
    content: "";
    clear: both;
    display: block;
}




/* ------------------------------- General Styles ------------------------------- */

.mktgMobile {display: none;}
.pr {position: relative;}
.pa {position: absolute;}
.fullWidth {width: 100%;}
.cfb {clear: both;}
.hideOverflow {overflow: hidden;}
.centerBlock {display: block; margin: 0 auto;}
.r {float:right;}
.l {float:left;}


@media all and (max-width: 599px) {
    
    body, .min1008, .minlfp {min-width: 320px;}
    .mktgDesktop {display: none;}
    .mktgMobile {display: block;}

}




/* ------------------------------- Typography ------------------------------- */

h1, h2, h3, h4, h5, p, li, div, td {color: #111111 !important; font-weight: normal !important; font-family: 'Lato', sans-serif;}
h1, h2, h3, h4, h5, p {margin-bottom: 20px;}

h1 {font-size: 36px; line-height:40px;}
h2 {font-size: 28px; line-height:32px;}
h3 {font-size: 22px; line-height:26px;}
h4 {font-size: 18px; line-height:22px;}
h5 {font-size: 16px; line-height:18px;}
p, a, li, div  {font-size: 14px; line-height:20px;}

.txtl {text-align:left;}
.txtr {text-align:right;}
.txtc {text-align:center;}

.fnts {font-size: 11px;}

#mktgHeader {
    background: url(//images.atgstores.com/images/mktg/newh1bkg.png) no-repeat right top #f2f2f2;
    height: 28px;
    margin-bottom: 40px;
    margin-top: 40px;
}

#mktgHeader h1 {
	font-family: 'Playfair Display SC', serif;
	text-transform: uppercase;
    font-weight: 700 !important;
    font-style: italic;
    font-size: 30px !important;
    line-height: 25px !important;
    background: #ffffff;
    display: inline-block;
    padding-right: 16px;
    margin-bottom: 0px;
    height: 29px;
    color: #0b283a !important;
    margin-top: 0px !important;
}

.accfont {
    font-family: 'Playfair Display', serif;
}

h2.accfont, h3.accfont {
    font-weight: 700 !important;
}

strong {
    font-weight: 700 !important;
}

#mktgBody a {
    font-weight: 700 !important;
    color: #2C5671;
    font-size: 15px;
}

/* ------------------------------- Buttons ------------------------------- */

.btnMKTGsm, .btnMKTG, .btnMKTGlg {
    border: 2px solid #3c6177;
    background: #3c6177;
    color: #fff !important;
    display: inline-block;
    text-transform: uppercase;
    font-family: Lato;
    font-weight: 700;
    font-size: 14px;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    border-radius: 2px; 
}

.btnMKTGsm { 
    padding: 0 20px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    line-height: 34px;
}

.btnMKTG { 
    padding: 0 20px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    line-height: 44px;
}

.btnMKTGlg { 
    padding: 0 20px;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    line-height: 54px;
}

.btnMKTG:hover, .btnMKTGlg:hover, .btnMKTGsm:hover  {
    background: #243e4d;
    border: 2px solid #243e4d;
    color: #FFF !important;
}

.btnMKTGArrow {
    color: #444;
    display: inline-block;
    text-transform: uppercase;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 15px;
    cursor: pointer;
}

.btnMKTGArrow:hover {
    color: #000 !important;
}

/* --- Arrow Text Button --- */

.mktgArrow {
    display: inline-block;
    padding-top: 4px;
}

a.mktgArrow i {
    font-size: 11px;
    font-weight: bold;
}

a.mktgArrow i:last-child {
    margin-left: -6px;
}


/* ------------------------------- Colors ------------------------------------ */

.cblack {
    background-color: #000000;
}

.c333 {
    background-color: #333333;
}

.cwhite {
    background-color: #ffffff;
}

.ceee {
    background-color: #eeeeee;
}


.c0a2 {
    background-color: #0A2839;
}

.c3d6 {
    background-color: #3D6177;
}

.c418 {
    background-color: #418888;
}

.c55b {
    background-color: #55B4B4;
}

.cf4f {
    background-color: #F4F6F6;
}




/* ------------------------------- Youtube iFrame ------------------------------- */

.videoWrapper {
    height: 0;
    margin-bottom: 16px;
    padding-bottom: 56%;
    padding-top: 0;
    position: relative;
}

.videoWrapper iframe {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 99%;
    border-top: 0px;
    margin-bottom: 1px;
    display: block;
}




/* ------------------------------- Animations ------------------------------- */

.mktgAnimate {
    position: relative;
    display: block;
}

.mktgAnimate img.animItem {
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    position: absolute;
    top: 0;
    left: 0;
}

.mktgAnimate:hover img.animItem {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}

@media all and (max-width: 599px) {
    img.animItem {
        display: none;
    }
}




/* ------------------------------- Template Grid ------------------------------- */

.mktgcol {
    float: left; 
    text-align: left; 
    box-sizing: border-box;
    margin-bottom: 2%;
    display: block;
}

.mktgcol img {
    width: 100%;
    padding: 0px;
    margin-bottom: 16px; 
    box-sizing: border-box;
}

/* --- Grid 2 Columns --- */

.mktg2c .mktgcol {width: 49.2%;}
.mktg2c .mktgcol:nth-child(odd) {margin-right: 1.6%;}

/* --- Grid 3 Columns --- */

.mktg3c .mktgcol {width: 32.266%;}
.mktg3c .mktgcol {margin-right: 1.6%;}
.mktg3c .mktgcol:nth-child(3n+0)  {margin-right: 0%;}

/* --- Grid 4 Columns --- */

.mktg4c .mktgcol {width: 23.8%;}
.mktg4c .mktgcol {margin-right: 1.6%;}
.mktg4c .mktgcol:nth-child(4n+0)  {margin-right: 0%;}

/* --- Grid 5 Columns --- */

.mktg5c .mktgcol {width: 18.72%;}
.mktg5c .mktgcol {margin-right: 1.6%;}
.mktg5c .mktgcol:nth-child(5n+0)  {margin-right: 0%;}

/* --- Grid 6 Columns --- */

.mktg6c .mktgcol {width: 15.333%;}
.mktg6c .mktgcol {margin-right: 1.6%;}
.mktg6c .mktgcol:nth-child(6n+0)  {margin-right: 0%;}

/* --- Grid Responsive --- */

@media all and (max-width: 599px) {
    .mktgcol {width: 49% !important;}
    .mktgcol {margin: 0 !important;}
    .mktgcol {margin-bottom: 2% !important;}
    .mktgcol:nth-child(odd) {margin-right: 2% !important;}

    .mktgcolFullW {
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important; 
        margin: 0 auto !important;
    }
}

@media all and (max-width: 440px) {
    .mktgcol {
        width: 100% !important;
        max-width: 400px !important; 
        margin: 2% auto !important;
    }
}

/* --- Text Template 1 --- */

.mktgcolt1 a, .mktgcolt1 a span {
    color: #444;
}

.mktgcolt1 a {font-size: 18px;}
.mktgcolt1 a span {display: block; font-size: 15px; margin-bottom: 4px;}




/* ------------------------------- Custom Grid ------------------------------- */

/* --- Grid Section --- */
.cgSection {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/* --- Grid Column --- */
.cgCol {
	display: block;
	float:left;
    box-sizing: border-box;
	margin: 1% 0 1% 1.6%;
}
.cgCol:first-child { margin-left: 0; }

/* --- Grid Group --- */
.cgGroup:before,
.cgGroup:after { content:""; display:table; }
.cgGroup:after { clear:both;}
.cgGroup { zoom:1; /* For IE 6/7 */ }

/* --- Content Grid --- */
.mktgcol_12_of_12 {width: 100%;}
.mktgcol_11_of_12 {width: 91.53%;}
.mktgcol_10_of_12 {width: 83.06%;}
 .mktgcol_9_of_12 {width: 74.6%;}
 .mktgcol_8_of_12 {width: 66.13%;}
 .mktgcol_7_of_12 {width: 57.66%;}
 .mktgcol_6_of_12 {width: 49.2%;}
 .mktgcol_5_of_12 {width: 40.73%;}
 .mktgcol_4_of_12 {width: 32.26%;}
 .mktgcol_3_of_12 {width: 23.8%;}
 .mktgcol_2_of_12 {width: 15.33%;}
 .mktgcol_1_of_12 {width: 6.866%;}
 
/* --- Grid Responsive --- */

@media all and (max-width: 599px) {
	.cgCol {  margin: 1% 0 1% 0%; }
    
    .mktgcol_1_of_12, .mktgcol_2_of_12, .mktgcol_3_of_12, .mktgcol_4_of_12, .mktgcol_5_of_12, .mktgcol_6_of_12, .mktgcol_7_of_12, .mktgcol_8_of_12, .mktgcol_9_of_12, 
    .mktgcol_10_of_12, .mktgcol_11_of_12, .mktgcol_12_of_12 {
	width: 100%; 
	}
}




/* ------------------------------- Temporary Styles ------------------------------- */

h1#articleTitle  {
   display: none !important;
}

#thellContainer {
    max-width: 1008px;
    padding: 0px !important;
}

.thellArtPostText {
    max-width: 1008px;
}

#RvFdOuterWrapper {
    display: none;
}
