* {
    box-sizing: border-box;
    font-variant-numeric: oldstyle-nums;
    padding: 0;
    margin: 0;
}


/*Typography*/

html {
    font-size: 10px;
}

body {
    font-family: 'Work Sans', sans-serif;
    font-size: 2rem;
    line-height: 2.5rem;
}

.MW {
    font-family: 'Merriweather', serif;
}

.highlight em,
em {
    font-style: italic;
}

.highlight {
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 4.3rem;
    max-width: 500px;
}

.quotes {
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 3.5rem;
    width: 60%;
    margin: 0px auto;
}

.quoteby {
    text-align: left;
    margin-left: 51.5%;
    margin-top: 3rem;
    width: 48.5%;
    display: inline-block;
}

h1,
.section {
    font-weight: 900;
    font-size: 1.8rem;
    /*margin: 5% 0px;*/
}

.impactheader {
    font-weight: 100;
    display: block;
    margin-bottom: 50px;
}

.sectionmarkers {
margin-left: -20px;
        margin-right: 5px;
}

.navmarker {
    fill: #333;
    width: 13px;
    margin-right: 10px;
    stroke: none;
}

p {
    margin-bottom: 3rem;
}


/*Containers*/

.container {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    /*background-color: #BDFBFF;*/
}

.bleed {
    width: 100%;
}

.full {
    width: 98%;
    margin: 0px 1%;
    clear: both;
}

.half {
    width: 48.5%;
    /*min-width: 400px;*/
    clear: none;
}

.parallaxbox {
    margin: 30%;
}

.contentunit {
    /*background-color: #FFC4C4;*/
    display: inline-block;
    clear: all;
    margin-bottom: 10%;
}

.breather {
    width: 100%;
    /*margin: 10% auto;*/
    padding-top: 10%;
    text-align: center;
    display: block;
    clear: both;
}

.teamimage {
    margin: 50px auto;
    width: 100%;
    /*margin-top: 100px;*/
}

.inlineimages {
    width: 100%;
    margin-bottom: 5%;
}

.sectionbreak {
    width: 100%;
    /*max-width: 800px;*/
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 20px;
}

.gpw {
    width: auto;
    overflow: auto;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
}

.noborder{
    border:0;
}

/* YouTube Responsive CSS for HubSpot */

.signature {
    width: 50%;
    display: inline-block;
    float: left;
}

.signature a {
    text-decoration: none;
    color: inherit;
}

.signature a:hover {
    color: #f7914d;
}


/*Link Behaviour*/

a {
    color: #0075bc;
    text-decoration: none;
    border-bottom: 1px solid;
}

a:hover {
    color: #f7914d;
}

a,
a:hover {
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
}

.titlelink {
    color: #B3B3B3;
    text-decoration: none;
    display: block;
    float: left;
    font-family: 'Work Sans';
    font-size: 2rem;
    line-height: 2.5rem;
    margin-top: 2rem;
    border-bottom: 1px solid transparent;
}

.titlelink:hover {
    color: #B3B3B3;
    border-bottom: 1px solid #f7914d;
}

.titlelink::before {
    content: 'Read more about ';
}

.titlelink.nonebefore::before {
    content: '';
}

.titlelink.team::before {
    content: 'Meet';
}

.titlelink.mail::before {
    content: 'Email: ';
}


/*Tables*/

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px auto;
    box-sizing: border-box;
}

table.smallertable {
    width: 47%;
    margin-right: 3%;
    display: inline-block;
    float: left;
}

tr {
    width: 100%;
}

td {
    width: 24.5%;
    border: 0px;
    padding: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: right;
    font-variant-numeric: oldstyle-nums tabular-nums;
    vertical-align: top;
}

td.name {
    width: 51%;
    text-align: left;
}

td.smallname {
    text-align: left;
    width: 25.5%;
}


/*.smallertable td:nth-child(2){
	padding-right: 20px;
}*/

td.smallfig {
    /*border-right: 1px #333 solid;*/
    /*padding-right: 10px;*/
}

tr:nth-child(even) {
    background-color: #fff;
    color: #f7941d;
}

tr:nth-child(odd) {
    color: #0075bc;
}

tr.total,
td.total,
.total {
    color: #333;
    font-weight: 600;
}

.contentunitsmall {
    margin-bottom: 10%;
}


/*Portraits*/

.portraits {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    background-position: right;
}

.hemlata {
    background-image: url(images/hemlata.png);
}

.pramodram {
    background-image: url(images/pramodram.png);
}

.pranavkumar {
    background-image: url(images/pranavkumar.png);
}

.mvasudevan {
    background-image: url(images/mvasudevan.png);
}

.sonal {
    background-image: url(images/sonal.png);
}


/*HR*/

hr {
    width: 100%;
    border: none;
    height: 70px;
    clear: both;
}

.smallspace {
    height: 10px;
}

.bigspace {
    height: 130px;
}

.linespace {
    width: 30%;
    clear: all;
    border-top: 1px #ccc solid;
    height: 1px;
    margin: 0px auto;
    margin-top: 30px;
    margin-bottom: 30px;
}


/*Alignment*/

.right {
    margin-right: 0px;
    float: right;
    clear: right;
    display: inline-block;
    /*background-color: #FFA8A8;*/
}

.left {
    float: left;
    clear: none;
    display: block;
    /*background-color: #95FF9F;*/
}

p.qorange {
    margin-top: 10px;
}


/*Colours*/

body {
    background-color: #fff;
    color: #333;
}

.qorange {
    color: #f7941d;
}

.qblue {
    color: #0075bc;
}

.yellowbg {
    background-color: yellow;
}

.grey {
    color: #444;
}

.lightgrey {
    color: #999999;
}

.website {
    width: 100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}


.credits{
	width: 90%;
	height: 100px;
	margin:0px auto;
	text-align: right;
}


/*Parallax CSS Cut and pasted in parallax.css*/


/*New parallax Z movement*/


/*Header*/

.header {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto 0px auto;
}

.vision {

    width: 90%;
    max-width: 1000px;
    font-size: 4rem;
    line-height: 4.7rem;
    font-weight: 100;
    width: 95%;
    /*padding-top: 10px;*/
    padding: 30px 0px;
    margin: 0px auto;
    display: block;
    clear: both;
    text-align: center;
}

.qvision{
    font-size: 1.5rem;
    display: block;
    font-weight: 500;
    line-height: 1rem;
    margin-bottom: 10px;
}

.headerbg {
    display: block;
    clear: both;
    overflow: auto;
}

.questlogo,
.ar17 {
    width: 50%;
    margin: 0px auto;
    /*background-color: #FFDADA;*/
    float: left;
}

.logo {
    width: 100%;
    max-width: 300px;
    margin: 0;
    padding: 0;
    padding-right: 2%;
}

.ar17 {
    padding: 2%;
}

.menubutton {
    position: fixed;
    top: 0;
    right: 0;
}

.menubutton {
    border: none;
}

.menuicon {
    width: 40px;
    margin: 40px 20px;
}


/* Top navigation */

.navigation {
    background-color: #f2f2f2;
    min-height: 70vh;
    max-height: 1000px;
    /*height: auto;*/
    overflow: auto;
    background-repeat: no-repeat;
    padding: 50px 0;
}

.navlinks {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
}

.navlink {
    width: 33.3%;
    /*margin-right: 2.3%;*/
    float: left;
    display: inline-block;
    /*margin-bottom: 2.3%;*/
    background-color: rgba(255, 255, 255, .1);
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;
    padding: 20px;
    min-height: 200px;
}

.navlink:hover {
    background-color: rgba(255, 255, 255, .8);
    color: #f7914d;
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;
    stroke: #f7914d;
}

.navlinks a {
    text-decoration: none;
    color: #0075bc;
    border: none;
}

.blacklink {
    color: #333;
}

.small {
    font-size: 1.8rem;
    margin-bottom: 10px;
}


/*Counter CSS*/

.counter {
    font-family: 'Roboto Mono', monospace;
    font-weight: 100;
    font-size: 6rem;
    font-variant-numeric: tabular-nums;
    color: #0075bc;
}

.counteritem {
    width: 33.3%;
    float: left;
    clear: none;
    margin-bottom: 20px;
}

.counteritem p {
    margin-top: 10px;
}

.counteritem p::before {
    content: '—';
    height: 10px;
    color: transparent;
    min-width: 1px;
    width: 10%;
    border-top: 1px solid #CCCCCC;
    display: block;
}

#impact {
    margin-top: -10%;
    margin-bottom: 10%;
    height: auto;
    overflow: auto;
}


/*Arrows*/

.arrow {
    fill: none;
    stroke-width: 3pt;
    width: 12px;
    margin-left: 2%;
}

.extlink,
.vidlink {
    margin-left: 5px;
}

.rarrow{
	visibility: hidden;
}


.videolink {
    stroke: #444;
}


/*Video Embed Responsive*/

.videoembed {
    position: relative;
    padding-bottom: 50%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.videoembed iframe,
.videoembed object,
.videoembed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;
    background-color: #f7914d;
}

.partners {
    width: 100%;
    margin: 0px auto;
}

.nobottommargin {
    margin-bottom: 40px;
}

.logos {
    margin-top: 0px;
    padding-bottom: 50px;
    overflow: auto;
}

.logos img {
    width: 20%;
    padding: 0;
    margin: 0;
    float: left;
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;
}

.logos img:hover {
    background-color: #fff;
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;
}


/*New parallax Z movement*/

.parallaxwrapper {
    width: 100%;
    height: 800px;
    max-height: 60vh;
    z-index: 0;
    overflow: auto;
    overflow-y: hidden;
}

.cd-background-wrapper {
    position: relative;
    overflow: hidden;
    -webkit-perspective: 2000px;
    perspective: 2000px;
}

.cd-floating-background {
    margin: 0px auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.cd-floating-background.is-absolute {
    /*position: absolute;*/
}

.cd-floating-background img {
    display: block;
    width: 80%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* fixes a Firefox bug - images not correctly rendered*/
    background-color: transparent;
}

.cd-floating-background img:not(:first-child) {
    position: absolute;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.cd-floating-background img:first-child {
    -webkit-transform: translateZ(351px);
    -ms-transform: translateZ(351px);
    transform: translateZ(351px);
}

.cd-floating-background img:nth-child(2) {
    -webkit-transform: translateZ(290px);
    -ms-transform: translateZ(290px);
    transform: translateZ(290px);
}

.cd-floating-background img:nth-child(3) {
    -webkit-transform: translateZ(350px);
    -ms-transform: translateZ(350px);
    transform: translateZ(350px);
}

.cd-floating-background img:nth-child(4) {
    -webkit-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    transform: translateZ(100px);
}

.cd-floating-background img:nth-child(5) {
    -webkit-transform: translateZ(180px);
    -ms-transform: translateZ(180px);
    transform: translateZ(180px);
}

.cd-floating-background img:nth-child(6) {
    -webkit-transform: translateZ(300px);
    -ms-transform: translateZ(300px);
    transform: translateZ(300px);
}

.cd-floating-background img:nth-child(7) {
    -webkit-transform: translateZ(80px);
    -ms-transform: translateZ(80px);
    transform: translateZ(80px);
}

.no-preserve-3d .cd-floating-background {
    /* we target browsers that don't support preserve-3d and show just a standard image - no effect visible */
    position: relative;
}

.centered {
    float: right;
    width: 100%;
    margin: 0px auto !important;
    /*background-color: yellow;*/
}

.menuicon polygon {
    fill: #f7914d;
}

    .svgshape{
    	width: 14px;
    }

     .visionsmall{
display: none;
    }


/*Responsive*/

@media screen and (orientation:portrait) {
    .parallaxwrapper {
        height: 30vh;
        display: none;
    }

}

@media screen and (max-width: 1200px) {
    .navlink {
        width: 50%;
        margin: 0px auto;
        min-height: 150px;
        display: block;
    }
}

@media screen and (max-width: 960px) {
    html {
        font-size: 9px;
    }
    .headerbg {
        display: block;
        clear: both;
        overflow: auto;
        background-image: url("images/parallax/girl-brown.png"), url("images/parallax/girl-green.png"), url("images/parallax/woman-orange.png"), url("images/parallax/girl-blue.png");
        background-repeat: no-repeat;
        background-position: 120% 100%;
        background-size: contain;
        height: 60vh;
        min-height: 300px;
        /*background-color: #fff;*/
    }
    .parallaxwrapper {
        display: none;
    }
    .website {
        max-width: 960px;
        min-width: 100%;
    }
    .half {
        width: 100%;
        /*max-width: 90%;*/
        padding: 5%;
    }
    .right,
    .left {
        float: none;
    }
    .website {
        overflow-x: hidden;
    }
    .contentunit {
        width: 100%;
    }

    .visionsmall{
        display: block;
        width: 100%;
        margin: 20px auto;
    }

    .vision {
        width: 80%;
        margin: 0px auto;
        font-size: 2rem;
        line-height: 2.5rem;
        font-weight: 400;
        /*background-color: #fff;*/
        padding: 0;
    }

    .qvision{
        font-size: 1.8rem;
        font-weight: 400;
        color: #f7914d;
    }

    .visionbg{
display: none;
    }

    .vision, .qvision{
        /*color: #fff;*/
    }

    .sectionmarkers {
        margin-left: 0px;
        margin-right: 5px;
    }
    .navmarker {
        fill: #333;
        width: 10px;
        margin-right: 2%;
        stroke: none;
    }
    .section {
        padding-left: 5%;
    }
    .logos img {
        width: 33.3%;
    }
    .quoteby {
        text-align: left;
        width: 90%;
        margin: 2rem 0px;
    }
    .quotes {
        text-align: left;
        width: 90%;
        float: none;
        font-size: 2rem;
        line-height: 2.7rem;
    }
    .breather {
        margin: 0;
        padding: 0;
        width: 100%;
        background-size: contain;
        background-position: 100% 100%;
    }
    hr {
        height: 20px;
    }
    .navlink {
        width: 100%;
        margin: 0px auto;
        float: none;
        min-height: auto;
        display: block;
    }
    .blacklink {}
    .navigation {
        overflow: auto;
        max-height: 2000px;
        height: auto;
        padding: 0px;
    }
    .signature {
        width: 100%;
        margin-bottom: 20px;
        padding-top: 20px;
        border-top: 1px solid #e6e6e6;
    }
    .impact {
        width: 90%;
        margin: 0px auto;
    }
    .impactheader {
        width: 90%;
        margin: 0px 5%;
        margin-bottom: 50px;
    }
    .highlight {
        width: 90%;
        padding: 5%;
    }
    table {
        width: 90%;
        padding: 5%;
        font-size: 1.5rem;
    }
    table.smallertable {
        width: 100%;
    }
    table.smallertable td {
        width: 100%;
    }
    .titlelink {
        width: 100%;
        margin: 10px auto;
        padding: 0;
        float: none;
        border: none;
    }
    .titlelink.team {
        margin-left: 5%;
    }
    .counter {
        font-size: 5rem;
    }
    .counteritem {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
    }
    .counteritem p {
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .counteritem p::before {
        border: none;
    }
    .questlogo {
        width: 70%;
        margin: 0px auto;
        /*background-color: #FFDADA;*/
        float: left;
    }
    .logo {
        width: 100%;
        max-width: 300px;
        margin: 0;
        padding: 0;
        padding: 4%;
    }
    .ar17 {
        width: 100%;
        padding-top: 30px;
        text-align: center;
    }
    .ar17,
    .ar17 span.qorange {
        color: #000;
    }
    .menuicon {
        width: 30px;
    }

    .svgshape{
    	width: 10px;
    }


}

@media screen and (max-width: 600px) {
    html {
        font-size: 8px;
    }
    .headerbg {
        background-position: 150% 100%;
        background-size: contain;
        /*background-color: #fff;*/
    }
}