@charset 'utf-8';

@media(max-width:1000px){

    .wrapper{padding: 0 50px;}


    /* STICKY NAV */
    .header_logo{
        left: 0;
        width: 138px;
        background-size: 140px;
    }

    /* WORK */
    #work{
        margin: 0 -50px;
    }
    .work_pod{
        padding: 51% 0 0 0;
        margin: 0 ;
    }
    .img_grid{
        margin: 0 0 60px 0;
    }
    .img_grid .tile{
        margin: 8px 0;
    }
    .img_grid .tile.half.left{
        margin-right:5px;
        margin-left:0;
    }
    .img_grid .tile.half.right{
        margin-left:5px;
        margin-right:0;
    }
    /* .img_grid .tile:nth-child(2n+1){
        margin-left:0;
    }
    .img_grid .tile:nth-child(2n+2){
        margin-right:0;
		margin-left: 0;
    } */
    /*.img_grid .tile:nth-child(2n+1):last-of-type{
        margin: 0 0 13px 0;
    }*/

    .work_pod:last-of-type{margin: 0 0 30px 0;}
    .main_img,
    .right_pod .main_img{
        width:100%;
        border:none;
        padding: 20% 0 0 0;
    }
    .alt_img{display:none;}

    .case_quote blockquote{
        padding: 0 80px 40px 80px;
        font-size:19px;
    }
    .case_quote blockquote:before, .case_quote blockquote:after {
        font-size: 80px;
        top: 20px;
        left: 40px;
    }
    .case_quote blockquote:after{
        left:initial;
        right:40px;
    }
    #work > p{
        padding: 0 60px 60px 60px;
        font-size:19px;
    }

    /* Homepage hero */
    #hero nav{top:33px;}
    #hero{
        min-height:0;
		height: 88vh;
    }
    .hero_logo {
        left:50px;
        /*width: 140px;
        height: 50px;
        background-size: 140px;*/
		width: 210px;
		height: 35px;
		background-size: 210px;
    }

    /* Homepage */
    .service_text{
        flex-flow:column;
    }
    .service_text h2{
        width: 100%;
        margin: 0 0 20px 0;
    }
    .service_text p{
        padding: 0;
    }

    /* Case Study Page */
    .buttons_holder{
        flex-direction:column;
        align-items: flex-start;
    }
    .buttons_holder .linkbutton{
        flex: 1 0 auto;
    }

    .work_pod{
        margin-bottom: 20px;
    }

    /* Services Main */
    .service_items,
    .service_image_row{
        columns:3;
    }
    .service_image_row img:nth-child(3){
        display:none;
    }


    /* PREFOOTER */
    #prefooter{
        padding: 70px 0 40px 0;
    }
    .prenav{
        flex-flow:row wrap;
    }
    .prenav_col{
        flex: 1 0 34%;
        margin: 0 0 50px 0;
    }

}
@media(max-width:900px){


    /* Homepage Hero */
    .hero_text h2 {
        font-size: 85px;
        line-height: 69px;
    }

    #hero nav:after{
        padding: 14px 16px;
        width:0px;
    }

    /* Work */
    .case_quote .name{font-size:16px;}
    .case_quote blockquote{
        font-size:16px;
        padding: 0 80px 20px 80px;
    }
    .case_quote .company{
        font-size:14px;
    }
    .img_grid .tile.text{
        font-size: 14px;
        line-height: 1.5em;
    }

    #work > p{font-size:16px;}

    /* Case Study */
    .tag_cats{
        flex-direction:column;
        justify-content: space-between;
        align-items: flex-start;
        margin: 0 0 30px 0;
		display: none;
    }
    .tag_cats h2{
        font-size:20px;
        width:100%;
        flex:1 1 100%;
    }
    .tag_cats .filters{
        color:#fff;
        flex: 1 1 100%;
        margin: 10px 0 0 0;
        right:20px;
        max-width:100%;
        text-align:left;
    }
    #case_details p{font-size:14px;}


    /* Services Detail */
    .capabilites{columns:2;}


    /* Contact */
    form#contact_form .form_footer{
        flex-direction:column;
    }
    form#contact_form .form_controls{
        align-items: flex-start;
    }
    .news_signup{margin: 0 0 40px 0;}

      /* About */
    .member_image{
        min-height: 340px;
    }

    /* Services Main */
    .services_panel{
        overflow:hidden;
        position: relative;
    }
    #page .services_panel .wrapper{position:initial;}
    .service_wrap{
        padding:0;
        position: initial;
        margin: 0 0 40px 0;
    }
    .service_items{
        column-gap: 1rem;
        padding: 0 0 30px 0;
    }
    .service_items li{
        padding: 0 30px 0 30px;
    }
    .service_image_row{
        column-gap: 1rem;
        padding:0;
    }


    .services_panel h2{padding: 0 40% 0 0;}
    .service_background_image{
        top:-140px;
        left:initial;
        right:50px;
        height:300px;
        width:30%;
        background-size:contain;
        background-position: bottom right;

    }

	.logo_nav {
		flex-direction: column;
		align-items: baseline;
	}
	.logo_nav .linkbutton {
		margin-bottom: 15px;
	}
	.logowall {
		padding: 0px;
	}
	.logowall::after {
		right: -75%;
		top: -60px;
		background-size: 160px;
		width: 100%;
	}
	.logo_item h2 {
		font-size: 36px;
		padding-right: 30%;
	}

}
@media(max-width:850px){

    /* About */
    .member_image{
        min-height: 360px;
    }
    .member{
        flex: 1 0 34%;
    }

    .services_thirds_pod.left{
        min-height: 0px;
        flex-flow: row wrap;
    }
    .thirds_pod{
        min-height: 0px;
    }
    .pod_text{
        position:relative;
        margin: 0 0 10px 0;
        flex: 1 0 100%;
    }
    .services_thirds_pod .thirds_pod_image.half.center,
    .services_thirds_pod .thirds_pod_image.half{
        flex:1 0 50%;
        position:relative;
        padding: 34% 0 0 0;
        left:initial;
        right:initial;
    }
    .services_thirds_pod.right{
        flex-flow:column nowrap;
    }
    .services_thirds_pod.right .thirds_pod_image{
        padding: 34% 0 0 0;
        flex: 1 0 100%;
        position:relative;
        left:initial;
        width:100%;
        border:none;
    }
    .services_thirds_pod .thirds_pod.pod_vessel{
        display:flex;
        margin: 10px 0 0 0;
    }
    .vessel.bottom,
    .vessel.top{
        flex: 1 0 50%;
        position: relative;
        padding: 34% 0 0 0;
        left: initial;
        right: initial;
        border:none;
    }
    .vessel.top{
        border-right: 10px solid #f6f6f6;
    }

    .services_thirds_pod.down{
        flex-flow:column;
    }
    .services_thirds_pod.down .firsthalf{
        border-right:none;
    }
    .services_thirds_pod.down .thirds_pod{
        min-height:0;
        margin: 0;
        background:transparent;
    }
    .services_thirds_pod.down .thirds_pod_image,
    .services_thirds_pod.down .thirds_pod{
        min-height:0;
        padding: 60% 0 0 0;
    }
    .services_thirds_pod.down .centerhalf{
        padding: 0;
    }
    .services_thirds_pod.down .centerhalf .vessel{
        border: none;
        margin: 0 0 10px 0;
    }

    .services_thirds_pod.down .firsthalf,
    .services_thirds_pod.down .centerhalf,
    .services_thirds_pod.down .lasthalf{
        flex: 1 0 100%;
        width:100%;
    }


}
@media(max-width:780px){


    #page{
        padding: 20px 0 0 0;
    }
    .page_text{display:block;}

    /* STICKY NAV */

    header.on_color.active nav a{
        color: #3f3f40;
    }
    .on_color.active .header_logo{
        background-image: url('../img/spiral-logo-pink.png');
    }

    .header_logo{
        /*height:70px;
        width:108px;
        background-size: 110px;*/
		height: 70px;
		width: 170px;
		background-size: 170px;
    }
    #mnavbutton{
        display:block;
    }
    header .header_logo,
    #mnavbutton.active{
       z-index: 1300;
    }
    header.active{
        position:fixed;
        top:20px;
        z-index: 1300;
    }

    header nav{
        position:fixed;
        display:none;
        z-index: 1200;
        top:0px;
        left:0;
        right:0;
        padding: 90px 30px;
        bottom:0;
        background-color:#f6f6f6;
        background-size: 340px;
        background-repeat:no-repeat;
        background-position: top -40px center;
        background-image: url('../img/spiral-logomark-2.png');
    }
    header nav.active{
        display:flex;
        flex-flow:column nowrap;
        justify-content: center;
    }
    header nav a{
        text-align: center;
        font-weight:700;
        font-size:34px;
        line-height:34px;
        padding: 20px 0;
        border-bottom: 1px dashed #ddd;
        margin: 0px 0;
    }
    header nav a:last-child{border:none;}




    /* Homepage Hero */
    .hero_logo{left:30px;}
    #hero nav{display:none;}
    .hero_text h2{
        font-size: 50px;
        line-height: 45px;
		margin: 0px 0 150px 0;
    }
	.hero_text h2 span {
		font-size: 33px;
		line-height: 32px;
	}
    .hero_case_study_callout {
        padding: 29px 50px 29px 15px;
		margin-bottom: 40px;
    }
    .hero_pink{width:90%;box-shadow: 0 -200px 220px 88px #cf1a6b;}

    /* Work */
    .pod_text span{
        font-size: 29px;
        line-height: 28px;
    }
    .pod_text h3{
        font-size:32px;
    }
    /*.filters.workfilters{
        display:none;
    }*/
	.filters.workfilters {
		text-align: left;
		max-width: none;
	}
	.workfilters .filters_inner_offest {
		right: auto;
		margin-top: 25px;
	}

    .pod_text span br{display:none;}
    .pod_text span{
        font-size:18px;
    }
    .pod_text h3{
        font-size:26px;
        margin: 0px 0 20px 0;
    }
    .pod_text h4{
        font-size:13px;
		letter-spacing: 2px;
    }

    /* Case Study */
    #case_details{
        margin: 20px 0;
    }
    #case_details h1{
        font-size:28px;
    }

    .article_image{
        width: 100%;
        height: 260px;
    }
    .article_callout{
        padding: 260px 0 0 0;
    }
    .article_inner p{margin: 0 0 30px 0;}
    .article_inner h2{padding: 0 10% 0 0;}

    /* PREFOOTER */
    .prenav_top_info{
        margin: 0 0 50px 0;
        text-align:left;
    }
    .prenav_col{
        flex: 1 0 51%;
        margin: 0 0 50px 0;
    }
    .prenav_top_info h3 {
        font-size: 13px;
    }

    /* Instagram */
    .insta_tile:nth-child(4),
    .insta_tile:nth-child(5){
        display:none;
    }
    .insta_tile{
        padding: 33% 0 0 0;
    }

    /* FOOTER */
    #footer_inner{
        padding: 70px 0;
    }
    .copyright_text_badges{
        flex-flow:column;
    }
    .copyright_text{margin: 0 0 20px 0;}
    .copyright_text p{padding:0;}


    /* Services Main */
    #services_list{
        margin:20px 0 0 0;
    }
    .service_items{
        columns:1;
        padding: 0 0 20px 0;
    }
    .service_items li{
        padding: 0 0 0 30px;
    }
    .service_image_row{
        /*columns:1;*/
        padding:0;
    }

    .main_cap_nav{
        justify-content: center;
    }

    /* Services Detail */
    .service_halves{
        margin: 0 0 40px 0;
        flex-direction: column;
        border-bottom:1px dotted #ddd;
    }
    .service_halves.noborder{border:none;}
    .service_half{
        padding: 0;
        margin: 0 0 20px 0;
    }

    .services_thirds_pod{
        flex-direction: column;
        margin: 0 0 30px 0;
    }
    .thirds_pod.image_one_third,
    .services_thirds_pod.left .thirds_pod_image,
    .services_thirds_pod .thirds_pod_image{
        padding: 60% 0 0 0;
        position:relative;
        width:100%;
        border:none;
        margin: 0 0 0 0;
    }
    .services_thirds_pod .thirds_pod_image{
        background-color:transparent;
    }
    .services_thirds_pod.left .thirds_pod_image, .services_thirds_pod .thirds_pod_image{
         padding: 0 0 0 0;
     }
     .left.services_thirds_pod{margin: 0 0 10px 0;}

     .services_thirds_pod .thirds_pod_image.half.center,
     .services_thirds_pod.left .thirds_pod_image.lasthalf,
     .services_thirds_pod .thirds_pod_image.lasthalf{
         padding: 34% 0 0 0;
     }
     .services_thirds_pod.right .thirds_pod_image{
         padding: 60% 0 0 0;
     }


    .thirds_pod{
        padding: 30px 40px 50px 30px;
        min-height:0;
    }


    #service_capabilites{padding: 50px 0;}
    .capabilites{
        columns:1;
        margin: 0 0 20px 0;
    }
    .capabilites:after{
        width:320px;
        background-size:320px;
    }
    #service_capabilites h2{margin:0 0 50px 0;}
    .cap_nav .prev_service, .cap_nav .next_service{display:none;}

    #more_services h2{
        padding:0;
        font-size:20px;
        margin: 0 0 50px 0;
    }
    .more_services_grid_item:nth-child(3){display:none;}


    /* CONTACT */
    #contact{
        flex-direction: column;
    }
    #contact aside{
        flex: 1 1 auto;
        order:1;
    }
    form#contact_form{
        order:2;
        width:100%;
        flex: 1 1 auto;
        padding:0;
    }

    /* About */
    .member_image{
        min-height: 300px;
    }



}
@media(max-width:600px){

    .wrapper{padding: 0 35px;}

    .page_text h1{
        font-size:40px;
    }
    .page_text h1 span {
        font-size: 43px;
        line-height: 42px;
    }
    /* HOMEPAGE */
    .service_text{margin: 20px 0 60px 0;}
    .service_text h2{
        font-size:32px;
    }


    /* Case Study */
    #work{
        margin: 0 -35px;
    }
    .article_image{
        height: 200px;
    }
    .article_callout{
        margin: 0 0 50px 0;
        padding: 200px 0 0 0;
    }
    .prev_next_study{
        margin: 0 0 50px 0;
    }
    #case_details h1{font-size:25px;}
    #work > p{font-size:14px;}
    .filters a{font-size:10px;}
    .tag_cats .filters{margin:30px 0 0 0;}
    #case_details p{line-height:1.5em;}
    .case_quote blockquote {
        font-size: 14px;
        padding: 30px 35px 20px 35px;
        text-align:left;
    }
    .case_quote blockquote:after{display:none;}
    .case_quote blockquote:before{
        font-size: 80px;
        left: 31px;
        top: 7px;
    }
    .case_quote .name,
    .case_quote .company{
        padding: 0 35px;
        text-align:left;
    }

    /* WORK */
    .pod_text {
        padding: 15px;
    }
    .pod_text h3{font-size:21px;/*margin:0;*/}
    /*.pod_text h4{display:none;}*/
    .work_pod{
        padding: 60% 0 0 0;
    }
	
	.main_img:hover h3 {
		margin-bottom: 30px;
	}


    /* PREFOOTER */
    .prenav_col{
        margin: 0 0 30px 0;
    }
    .prenav_col ul{
        display:none;
    }
    .prenav_top_info{margin: 0 0 30px 0;}
	.prenav_col h4 {
		font-size: 14px;
	}

    /* FOOTER */
    .footer_center{
        margin: 0 0 10px 0;
    }
    .footer_center h2 {
        font-size: 26px;
    }
    .copyright_logo_social{
        flex-flow:column nowrap;
    }
    #copyright{margin: 0;}
    .social_icons{
        margin: 0 0 60px 0;
        order:1;
        text-align:center;
    }
    .footer_logo{order:2;}

    /* SERVICES MAIN */
    .service_background_image{
        right:35px;
    }

    /* SERVICES Detail */
    .capabilites{padding:0;}
    .capabilites:after{display:none;}

    .thirds_pod blockquote{font-size:22px;}
    .thirds_pod p{font-size:14px;}
    .thirds_pod .quote_mark:after {
        height:25px;
        font-size: 50px;
        line-height: 60px;
    }
    #services_textblock {
        margin: 30px 0 40px 0;
        border:none;
        padding: 20px 0px;
    }

    #more_services{margin:0px;}
    #more_services h2{margin: 0 0 30px 0;}
    .more_services_grid{
        margin:0;
        flex-direction: column;
    }
    .more_services_grid_item{
        margin: 20px 0;
    }

    /* WORK DETAILS */
    .img_grid .tile:first-child{
        margin-bottom:0;
    }
    .img_grid .tile.half{
        margin: 8px 0 !important;
        flex: 1 0 100%;
    }


    /* About */
    .member_image{
        min-height: 330px;
    }
    .member{
        flex: 1 0 51%;
    }

    .left.services_thirds_pod{margin:0;}
    .services_thirds_pod .thirds_pod_image.half.center, .services_thirds_pod.left .thirds_pod_image.lasthalf, .services_thirds_pod .thirds_pod_image.lasthalf{
        padding: 60% 0 0 0;
        flex: 1 0 100%;
        border:none;
        margin: 0 0 10px 0;
    }

    .services_thirds_pod .thirds_pod.pod_vessel{flex-flow:column nowrap;}
    .vessel.bottom,
    .vessel.top{
        flex: 1 0 100%;
        border:none;
        margin: 0 0 10px 0;
        padding: 60% 0 0 0;
    }


	.footer_logo::after {
		display: none;
	}
	
	#logo_wall {
		columns: 2;
		column-gap: 1rem;
	}


}