
.lazyload,.lazyloading{
    opacity:0
}
.lazyloaded{
    opacity:1;
    -webkit-transition:all 300ms ease
}

.innerWrap{
    margin:0 auto 0;
    width:100%;
    padding:0 5% 0 5%;
    clear:both
}

.projectImage img{
    float:left;
    width:100%;
    position:relative;
    border-radius:10px
}
.projectImage{
    float:left;
    width:100%;
    position:relative;
    margin:0 0 50px 0
}
.projectImage:last-child{
    margin:0 0 120px 0
}
.lastImage{
    margin:0 0 120px 0
}
.grey{
    background-color:#EDEEF1;
    color:#1C1C21
}

.black h2{
    color:#fff;
    width:35%;
    float:left
}
.black h3,.contact h3{
    color:#fff
}
.black ul li ul li{
    color:#fff
}


.moreProjects{
    padding:0 0 0 0
}
.about{
    padding:0 0 25px 0
}
.projectIntro{
    padding:0 0 75px 0
}

.info ul,.info{
    float:left;
    list-style-type:none;
    width:100%
}
.black ul{
    width:65%;
    position:relative
}
.black ul li ul{
    width:100%;
    border-bottom:1px dashed #61616A
}
.info ul li{
    float:left;
    width:30%;
    margin:0 5% 75px 0
}
.black ul li{
    width:45%;
    margin:0 8% 75px 0
}

.about ul li:nth-child(3n+3){
    margin:0 5% 75px 0;
    clear:both
}
.about ul li:nth-child(4){
    clear:none
}
.black ul li:nth-child(2){
    margin:0 0 75px 0
}
.black ul li:nth-child(3n+3){
    margin:0 8% 75px 0;
    clear:none
}
.black ul li:nth-child(4){
    clear:none;
    margin:0 0 75px 0
}
.info ul li p{
    float:left
}

blockquote p{
    text-indent:-.3em
}
.testimonials{
    float:left;
    width:100%;
    clear:both;
    padding:115px 0 45px 0;
    position:relative
}
ul.quotes{
    list-style-type:none;
    float:left;
    width:46%;
    margin:0 4% 0 0
}
ul.quotes.quotes2{
    margin:0 0 0 0
}
.experience ul.quotes.quotes2{
    margin:140px 0 0 0
}
ul.quotes li{
    list-style-type:none;
    float:left;
    width:80%;
    margin:0 0 105px 0;
    position:relative;
    background-color:#fff;
    padding:9% 10% 10% 10%;
    border-radius:10px
}
ul.quotes li:after{
    content:"";
    display:inline-block;
    width:60px;
    height:30px;
    background:url(../images/arrow.png) no-repeat center center;
    background-size:60px 30px;
    position:absolute;
    left:10%;
    bottom:-30px
}
ul.quotes li blockquote p{
    float:left;
    width:100%;
    font-family:'formular','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:#1C1C21;
    font-weight:400;
    font-size:20px;
    line-height:33px;
    margin:0 0 18px 0
}
ul.quotes li p.person{
    float:left;
    width:100%;
    font-family:'formular','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:#1C1C21;
    font-weight:400;
    font-size:14px;
    line-height:21px
}
ul.quotes li p.title{
    float:left;
    width:100%;
    font-family:'formular','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:#747B89;
    font-weight:400;
    font-size:14px;
    line-height:21px
}
.experience ul.quotes li{
    list-style-type:none;
    float:left;
    width:100%;
    margin:0 0 105px 0;
    position:relative;
    background-color:#fff;
    padding:0 0 0 0;
    border-radius:10px
}
.experienceDetails{
    float:left;
    width:84%;
    margin:0% 8% 8% 8%
}
.experience ul.quotes li:after{
    display:none
}
.experience ul.quotes li img{
    float:left;
    width:100%;
    border-radius:10px 10px 0 0
}
.projectCopy{
    width:100%;
    padding:70px 0 0 0;
    max-width:760px;
    margin:0 auto 120px;
    clear:both;
    position:relative
}
.projectCopy h2{
    font-family:'formularMedium','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:#1C1C21;
    font-weight:400;
    font-size:13px;
    line-height:135%;
    letter-spacing:1px;
    margin:0 0 10px 0;
    text-transform:uppercase
}
5media screen and (max-width:1200px){
    h1{
        font-size:50px
    }
    .black h2,.black ul{
        width:100%
    }
    .info.black{
        padding:115px 0 45px 0
    }
    .testimonials{
        padding:95px 0 25px 0
    }
    .info ul li ul li{
        font-size:18px
    }
}
@media screen and (max-width:900px){
    .topNav{
        height:60px
    }
    .topNav .innerWrap{
        height:60px
    }
    .topNav .logo{
        margin:40px 0 0 0
    }
    h1{
        font-size:50px;
        margin:100px 0 40px 0;
        line-height:130%
    }
    .titleWrap{
        margin:0 0 110px 0
    }
    .info,.testimonials,.moreProjects,.info.black{
        width:100%;
        padding:70px 0 15px 0;
        float:left
    }
    .moreProjects{
        padding:0 0 0 0
    }
    .about{
        padding:0 0 15px 0
    }
    .projectIntro{
        padding:0 0 60px 0
    }
    h2{
        font-size:38px;
        margin:0 0 55px 0
    }
    .info ul li,.info ul li:nth-child(3n+3){
        width:45%;
        margin:0 10% 75px 0
    }
    .info ul li:nth-child(even){
        margin:0 0 75px 0
    }
    .info ul li:nth-child(4){
        clear:none
    }
    .black h2,.black ul{
        width:100%
    }
    .black ul li ul li{
        width:100%!important;
        padding:36px 0 36px 0
    }
    ul.quotes{
        width:100%;
        margin:0 0 0 0
    }
    ul.quotes li{
        margin:0 0 85px 0
    }
    .projectImage:last-child{
        margin:0 0 90px 0
    }
    .myRole{
        display:none
    }
    h1.aboutTitle{
        width:100%
    }
    .me{
        display:none
    }
    .titleWrap{
        width:100%;
    }
    .titleWrap p{
        font-size:18px;
        line-height:31px
    }
    .experienceDetails{
        float:left;
        width:86%;
        margin:6% 7% 7% 7%
    }
    .experience ul.quotes li{
        margin:0 0 60px 0
    }
    .experience ul.quotes.quotes2{
        margin:0 0 0 0
    }
    .header .innerWrap p{
        width:100%
    }
    .info ul li ul li span{
        margin-right:24px
    }
}
@media screen and (max-width:600px){
    h1{
        font-size:36px;
        margin:70px 0 20px 0
    }
    .titleWrap{
        margin:0 0 80px 0
    }
    h2{
        font-size:36px;
        margin:0 0 45px 0
    }
    h3{
        margin:0 0 6px 0
    }
    .topNav{
        height:55px
    }
    .topNav .innerWrap{
        height:55px
    }
    .topNav .logo{
        display:none
    }
    .topNav .logoMobile{
        width:90px;
        padding:25px 0 0 0;
        display:block;
        float:left
    }
    .mobileWrap{
        float:left;
        height:100%;
        display:none;
        width:100%;
        background:#fff;
        position:absolute;
        top:0;
        left:0;
        z-index:1000
    }
    .mobileInnerWrap{
        display:table-cell;
        text-align:center;
        vertical-align:middle;
        background-color:#111115
    }
    .thumbnail{
        margin:0 0 20px 0
    }
    .footer{
        text-align:center
    }
    .footer ul{
        width:100%;
        float:none
    }
    .footer p{
        display:none
    }
    p{
        font-size:16px;
        line-height:27px
    }
    .info,.testimonials,.moreProjects,.info.black{
        padding:55px 0 15px 0
    }
    .moreProjects{
        padding:0 0 0 0
    }
    .about{
        padding:0 0 15px 0
    }
    .about{
        padding:0 0 15px 0
    }
    .info ul li,.info ul li:nth-child(3n+3){
        width:100%;
        margin:0 0 60px 0
    }
    .info ul li:first-child{
        margin:0 0 0 0
    }
    .info ul li:last-child{
        margin:0 0 60px 0
    }
    .black ul li ul li{
        font-size:16px;
        padding:30px 0 30px 0
    }
    ul.quotes li blockquote p,.titleWrap p{
        line-height:28px;
        font-size:18px
    }
    ul.quotes li{
        margin:0 0 70px 0
    }
    .projectIntro{
        padding:0 0 30px 0
    }
    .projectCopy p{
        line-height:25px
    }
    .projectCopy{
        padding:25px 0 0 0;
        margin:0 auto 70px
    }
    .projectImage:last-child{
        margin:0 0 75px 0
    }
    .projectImage{
        margin:0 0 30px 0
    }
    .myRole{
        display:block
    }
    h3{
        font-size:11px
    }
    .projectCopy h2{
        font-size:11px;
        margin:0 0 8px 0
    }
    .footer ul li a{
        margin:0 10px 0 10px;
        font-size:11px
    }
    .titleWrap p{
        font-size:16px;
        line-height:25px
    }
    .experienceDetails p{
        line-height:25px
    }
    .experience ul.quotes li{
        margin:0 0 40px 0
    }
    .black ul li:first-child ul{
        border-bottom:none
    }
    .Approach{
        margin-top:380px !important;
    }
}
@media screen and (max-width:400px){
    h1{
        font-size:28px
    }
    h2{
        font-size:28px;
        margin:0 0 40px 0
    }
    p{
        line-height:27px
    }
    .info,.testimonials,.moreProjects,.info.black{
        padding:45px 0 5px 0
    }
    .moreProjects{
        padding:20px 0 0 0
    }
    .about{
        padding:0 0 5px 0
    }
    .projectIntro{
        padding:0 0 55px 0
    }
    .info ul li,.info ul li:nth-child(3n+3){
        width:100%;
        margin:0 0 55px 0
    }
    .info ul li:nth-child(even){
        margin:0 0 55px 0
    }
    .projectCopy p{
        line-height:27px
    }
    .projectCopy{
        margin:0 auto 55px
    }
    .projectImage{
        margin:0 0 20px 0
    }
    .projectImage:last-child{
        margin:0 0 55px 0
    }
    .experienceDetails{
        margin:9% 8% 9% 8%;
        width:84%
    }
    .experience ul.quotes li{
        margin:0 0 30px 0
    }
    .Approach{
        margin-top:380px !important;
    }
}
