.gtnResponsiveFeaturesPortlet {
    text-align: right; /* orientation=rt */
    text-align: left; /* orientation=lt */
    margin-bottom: 2.1875em;
    padding: 1.5625em 2.5641% 0;
    position: relative;
}

.gtnResponsiveFeaturesPortlet h1 {
    color: #333;
    font-weight: normal;
    font-size: 2em;
    margin: 0 0 0.3125em 0;
}

.gtnResponsiveFeaturesPortlet .feature {
    width: 28.8288%;
    float: right; /* orientation=rt */
    float: left; /* orientation=lt */
    text-align: center;
    margin: 0 1.8018% 0;
}

/*Creates a new row after 3 features are displayed on a page*/
.gtnResponsiveFeaturesPortlet .features div:nth-of-type(4) {clear: both;}

.gtnResponsiveFeaturesPortlet .feature img {max-width: 100%;}

.gtnResponsiveFeaturesPortlet h2 {
    font-size: 1.375em;
    font-weight: normal;
    margin-bottom: 0.68181818181818em;
    margin-top: 0.63636363636364em;
    text-align: right; /* orientation=rt */
    text-align: left;  /* orientation=lt */
}

.gtnResponsiveFeaturesPortlet p {
    color: #666666;
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 0;
    text-align: right; /* orientation=rt */
    text-align: left;  /* orientation=lt */
}

.gtnResponsiveFeaturesPortlet .footer {
    padding-top: 1.875em;
    text-align: left; /* orientation=rt */
    text-align: right; /* orientation=lt */
    clear: both;
    background-image: url(../images/feature-separator.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 8px;
}

.gtnResponsiveFeaturesPortlet .footer a {
    font-size: 0.875em;
    color: #1C5182;
}

.gtnResponsiveFeaturesPortlet .footer a:hover {text-decoration: underline;}


/* RWD */

@media only screen and (max-width: 64em) {

    .gtnResponsiveFeaturesPortlet h2 {
        font-size: 1.25em;
    }
    
    .gtnResponsiveFeaturesPortlet p {
        font-size: 0.90625em;
        margin-top: 0;
    }

}

@media only screen and (max-width: 48em) {

    .gtnResponsiveFeaturesPortlet {padding-top: 1.25em;}

    .gtnResponsiveFeaturesPortlet h1 {
        font-size: 1.875em;
        margin-bottom: 0;
    }
    
    .gtnResponsiveFeaturesPortlet div.feature {
        float: none;
        width: 96.3964%;
        clear: right; /* orientation=rt */
        clear: left;  /* orientation=lt */
        margin-top: 1.875em;
        display: inline-block;
    }
    
    .gtnResponsiveFeaturesPortlet div.feature:nth-child(1) {margin-top: 0.9375em;}
    
    .gtnResponsiveFeaturesPortlet div.feature:nth-child(2) {
        margin-left: 1.8018%;
        margin-right: 1.8018%;
    }
    
    .gtnResponsiveFeaturesPortlet .feature img {
        float: right; /* orientation=rt */
        float: left; /* orientation=lt */
        margin-left: 1.25em;  /* orientation=rt */
        margin-right: 1.25em; /* orientation=lt */
        width: 12.5em;
    }
    
    .gtnResponsiveFeaturesPortlet div.feature:nth-child(1) img, 
    .gtnResponsiveFeaturesPortlet div.feature:nth-child(3) img {margin-top: -0.5em;}
    
    .gtnResponsiveFeaturesPortlet h2 {
        margin-top: 0;
        margin-bottom: 0.5em;
    }
    
    .gtnResponsiveFeaturesPortlet .footer {padding-top: 0.9375em;}

}

@media only screen and (max-width: 37.5em) {

    .gtnResponsiveFeaturesPortlet .feature img {
        width: 11.25em;
        margin-bottom: 0.3125em;
    }

}

@media only screen and (max-width: 30em) {

    .gtnResponsiveFeaturesPortlet div.feature {margin-top: 1.5625em;}
    
    .gtnResponsiveFeaturesPortlet div.feature:nth-child(1) {margin-top: 0.9375em;}
    
    .gtnResponsiveFeaturesPortlet .feature img {
        width: 18.125em;
        margin-bottom: 0.625em;
    }
    
    .gtnResponsiveFeaturesPortlet .feature:nth-child(2) img {margin-bottom: 1.25em;}

    .gtnResponsiveFeaturesPortlet .feature .text {clear: both;}
    
    .gtnResponsiveFeaturesPortlet .footer {background: none;}

}

@media only screen and (max-width: 20em) {

    .gtnResponsiveFeaturesPortlet h1 {font-size: 1.625em;}
    
    .gtnResponsiveFeaturesPortlet h2  {font-size: 1.125em;}

}
