@font-face {
font-family: 'Avenir Next LT Pro Condensed';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Condensed'), url('../fonts/AvenirNextLTPro-Cn.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Demi';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Demi'), url('../fonts/AvenirNextLTPro-Demi.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Demi Condensed';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Demi Condensed'), url('../fonts/AvenirNextLTPro-DemiCn.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Heavy Condensed'), url('../fonts/AvenirNextLTPro-HeavyCn.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Medium Condensed';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Medium Condensed'), url('../fonts/AvenirNextLTPro-MediumCn.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Regular'), url('../fonts/AvenirNextLTPro-Regular.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Ultra Light Condensed';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Ultra Light Condensed'), url('../fonts/AvenirNextLTPro-UltLtCn.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Bold';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Bold'), url('../fonts/AvenirNextLTPro-Bold.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Bold Condensed';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Bold Condensed'), url('../fonts/AvenirNextLTPro-BoldCn.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Bold Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Bold Condensed Italic'), url('../fonts/AvenirNextLTPro-BoldCnIt.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Condensed Italic'), url('../fonts/AvenirNextLTPro-CnIt.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Demi Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Demi Condensed Italic'), url('../fonts/AvenirNextLTPro-DemiCnIt.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Demi Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Demi Italic'), url('../fonts/AvenirNextLTPro-DemiIt.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Heavy Condensed Italic'), url('../fonts/AvenirNextLTPro-HeavyCnIt.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Italic'), url('../fonts/AvenirNextLTPro-It.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Medium Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Medium Condensed Italic'), url('../fonts/AvenirNextLTPro-MediumCnIt.woff') format('woff');
}


@font-face {
font-family: 'Avenir Next LT Pro Ultra Light Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Avenir Next LT Pro Ultra Light Condensed Italic'), url('../fonts/AvenirNextLTPro-UltLtCnIt.woff') format('woff');
}


.headerPayment {
    font-family:'Avenir Next LT Pro Demi';
    font-weight:normal;
    background-color:#00475a;
    padding:10px;
    color:white;
    font-size: 16px;
    text-transform:uppercase;
}
    .headerPayment span {
        display:block;
    }

.SubHeaderPayment {
    font-family:'Avenir Next LT Pro Regular';
    font-weight:normal;
    background-color:#00475a;
    padding:3px 0px 3px 0px;
    color:white;
    font-size: 12px;
    text-transform:uppercase;
}

.headerPaymentImage {
    background-image:url(../images/Locked-Article.png);
    background-position:center center;
    background-repeat:no-repeat;
    background-color:#00475a;
    width:100%;
    min-height:232px;
}


.headerPaymentCenter {
    position:absolute;
    font-family:'Avenir Next LT Pro Regular';
    top:10%;
    left:5%;
    background-color:rgba(255, 255, 255, 0.5);
    border-bottom:solid 3px #00475a;
    width:70%;
}
.headerPaymentCenter .span1 
{
    text-transform:uppercase; 
    color:#00475a; 
    font-size:30px; 
    line-height:30px;
}

.headerPaymentCenter .span2
{
    text-transform:uppercase; 
    color:#0065a0; 
    font-size:30px;
    line-height:30px;
}

.headerPaymentCenter .span3
{
    font-size:16px; 
    color:black; 
    font-family:'Avenir Next LT Pro Demi'; 
    padding-top:10px
}

.headerPaymentCenter .span4
{
    font-size:16px; 
    color:black; 
    font-family:'Avenir Next LT Pro Regular';
}
.headerPaymentContent {
    padding:10px;
}

    .headerPaymentContent span {
        font-family:'Avenir Next LT Pro Bold Condensed';
        display:block;
        padding-bottom:0px;
    }

    .headerPaymentContent span a, .headerPaymentContent span a:link, .headerPaymentContent span a:hover, .headerPaymentContent span a:visited {
        font-family:'Avenir Next LT Pro Demi';
        color:#0065a0;
        font-size:17px; 
    }
    
    
.paymentImg {
    position: absolute;
    right: 25%;
}


    .article-post-subscriber {
    }
    
.subscriberHeader {
    float: right; 
    position: relative; 
    height: 30px; 
    vertical-align: top;
    bottom: 20px;
}

    .subscriberHeader h4 {
        font-size:13px;
    }

.TermsConditions {
    background-color: #d8d5cd;
    padding: 10px;
    height: 165px;
}

    .TermsConditions p {
        width:96%; 
        float:right;
    }
    
/* Large Tablet Layout: 800px. - fluid */
@media only screen and (min-width: 800px) and (max-width: 940px) {
    
    .subscriberHeader h4 {
        font-size:11px;
    }
.headerPaymentCenter {
    width:84%;
}
    .paymentImg {
        position: absolute;
        right: 10%;
    }

}/* Large Tablet Layout: 800px. - fluid */
@media only screen and (min-width: 768px) and (max-width: 799px) {
  
  

    .subscriberHeader h4 {
        font-size:11px;
    }
.headerPaymentCenter {
    top:8%;
    left:20%;
    width:50%;
}


.headerPaymentCenter .span1 
{
    font-size:26px; 
    line-height:30px;
}

.headerPaymentCenter .span2
{
    font-size:26px;
    line-height:30px;
}

.headerPaymentCenter .span3
{
    font-size:14px; 
    padding-top:10px
}

.headerPaymentCenter .span4
{
    font-size:14px; 
}

.headerPaymentContent span a, .headerPaymentContent span a:link, .headerPaymentContent span a:hover, .headerPaymentContent span a:visited {
        
        font-size:14px; 
    }
    .paymentImg {
        position: absolute;
        right: 10%;
    }

}


/* Mobile + Small Tablet shared rules */
@media only screen and (max-width: 767px) {
    .paymentImg {
        position: absolute;
        
        right: 0;
    }
    .paymentImg img{
        display:none
    }
}


@media only screen and (max-width: 360px) {
.headerPayment
{
    font-size:13px;
}
.SubHeaderPayment
{
    font-size:11px;
}
.headerPayment
{
    font-size:12px;
}

.headerPaymentCenter {
    width:84%;
}


.headerPaymentCenter .span1 
{
    font-size:20px; 
    line-height:26px;
}

.headerPaymentCenter .span2
{
    font-size:20px;
    line-height:26px;
}

.headerPaymentCenter .span3
{
    font-size:12px; 
    padding-top:10px
}

.headerPaymentCenter .span4
{
    font-size:12px; 
}

.headerPaymentContent span a, .headerPaymentContent span a:link, .headerPaymentContent span a:hover, .headerPaymentContent span a:visited {
        font-size:12px; 
    }
    
    
.subscriberHeader {
    bottom: -4px;
}

    .subscriberHeader h4 {
        font-size:11px;
        padding-bottom:10px;
    }

    
.TermsConditions {
    padding: 4px;
    font-size:11px;
    height: 140px;
   
}

    .TermsConditions p {
        width:92%; 
        float:right;
    }
    
    
    .article-post-subscriber {
        height:80px;
    }
}


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

.headerPaymentCenter {
    width:84%;
}
.headerPaymentCenter .span1 
{
    font-size:20px; 
    line-height:26px;
}

.headerPaymentCenter .span2
{
    font-size:20px;
    line-height:26px;
}

.headerPaymentCenter .span3
{
    font-size:12px; 
    padding-top:10px
}

.headerPaymentCenter .span4
{
    font-size:12px; 
}
.headerPaymentContent span a, .headerPaymentContent span a:link, .headerPaymentContent span a:hover, .headerPaymentContent span a:visited {
        font-size:12px; 
    }
    
    
.subscriberHeader {
    bottom: -4px;
}

    .subscriberHeader h4 {
        font-size:11px;
        padding-bottom:10px;
    }

    
.TermsConditions {
    padding: 4px;
    font-size:11px;
    height: 140px;
   
}

    .TermsConditions p {
        width:92%; 
        float:right;
    }
    
    
    .article-post-subscriber {
        height:80px;
    }

}