[-data-section~="success"] {
    background: #e9e9e9;
    padding: 1em .5em 1em 0;
}

[-data-section~="success"] h2 {
    font-size: 1.5em;
    font-weight: 100;
    text-align: center;
    margin: 1em;
}

/*read more button*/
[-data-btn~="read-more"] {
    margin: 3em auto;
    display: block;
}

[-data-btn~="read-more"]:after {
    content: url('../img/btnArrow.png');
    margin-left: 1em;
}

/*grid layout*/
[-data-section~="success"]  ul {
    max-width: 940px;
    margin: 0 auto;
    padding: 1em 0 0 1em;
    overflow: hidden;
    position: relative;
}


[-data-grid-wrap=""] ul ~ ul {
    padding-top: 0;
}

/*general grid tile*/
[-data-grid] {
    position: relative;
    float: left;
    overflow: hidden;
    padding: 0 .5em .5em 0;
    width: 33.333333%;
    /*border: solid;*/
    transition: all 300ms ease-in-out;
}

[-data-grid-wrap=""] ul {
    transition: all 500ms ease-in-out;
}

/*aspect ratio small tile*/
[-data-grid] article:before {
    content: "";
    display: inline-block;
    width: 0;
    padding-top: 100%;
    /*border: solid green;*/
}

[-data-grid] article {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

[-data-grid] article > a {
    background: rgba(255,255,255,1);
    display: block;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:  101;
    transition: top 300ms ease-in-out;
}

/*hover effect*/
[-data-grid] article:hover > a {
    top: -100%;
}


/*quote underneath*/
[-data-grid] article > blockquote {
    padding: 1.2em;
    position: absolute;
    background: #0D72A3;
    width: 100%;
    height: 100%;
    color: white;
    z-index: 100;
    top: 0;
    left: 0;
}


/*wide grid tile*/
[-data-grid~="wide"] {
    width: 100%;
}


/*aspect ratio wide tile*/
[-data-grid~="wide"] article:before {
    content: "";
    display: inline-block;
    width: 0;
    padding-top: 66.66666%;
    /*border: solid green;*/
}

/*wide grid styles*/
[-data-grid~="wide"] article > a {
    padding: 1em;
}

[-data-grid~="wide"] img {
    float: left;
    width: 100px;
    height: 110px;
    margin-right: .8em;
    margin-bottom: 1em;
    vertical-align: top;
}

[-data-grid~="wide"] img + blockquote {
    font-size: .91em;
    /*margin-left: 1em;*/
    vertical-align: top;
    word-spacing: 1px;
    line-height: 1.5em;
    font-weight: 400;
}
[-data-grid~="wide"]  p {
    margin-bottom: .2em;
    font-size: .8em;
}

/*blue person name*/
[-data-grid]  p:first-child {
    color: #0D72A3;
}

[-data-grid~="wide"] img + blockquote:before {
    content: url('../img/quote-grey.png');
    margin-right: .4em;
}

[-data-grid] hr {
    clear: both;
    height: 0;
    border: none;
    border-bottom: 1px solid lightgray;
    border-collapse: collapse;
    margin-bottom: .5em;
}

/*company logo*/

[-data-grid~="3mob"] figcaption:before {
    content: "";
    background: url('../img/3mob_w108px_X_h95px.jpg')center center/90% auto ;
    float: right;
    width: 5em;
    height: 2em;
    overflow: hidden;
}

[-data-grid~="mtl"] figcaption:before {
    content: "";
    background: url('../img/multilinks.jpg')center center/100% auto ;
    float: right;
    width: 5em;
    height: 2em;
    overflow: hidden;
}


/*medium grid tile*/
[-data-grid~="medium"] {
    width: 66.67%;
}

[-data-grid~="medium"] article > a {
    padding: 1em;
}

[-data-grid~="ttsky"] figcaption:after {
    content: "";
    background: url('../img/Tata_Sky_w108px_X_h95px.jpg')center center/100% auto ;
    float: right;
    width: 5em;
    height: 2em;
    overflow: hidden;
}

/*aspect ratio medium tile*/
[-data-grid~="medium"] article:before {
    content: "";
    display: inline-block;
    width: 0;
    padding-top: 100%;
    /*border: solid green;*/
}

/*centering only images with no text*/
[-data-grid]  img:only-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

