/*********************/
/* Image Control     */
/*********************/
img.mobile{
    display:none;
}
@media (max-width: 425px) {
    img.desktop{
        display:none;
    }
    img.mobile{
        display:block;
    }
}


/*********************/
/* First Break Point */
/*********************/
@media (max-width: 1200px) {
    .header_title_container {
        z-index:8;
        Xbackground-color: #000bff26;
        max-width: 988px;
        margin:0;
        padding-left: 5em;
        padding-right: 5em;   
    }
    .header_title_container p{
        width:60%
    }
    .header_title_container .members {
        text-align: center;
        position: absolute;
        bottom: 30px;
        right: 0;
    }    
    .nav_right{
        padding-right:10px;
    }
    .caption-inner .head{
        position: static;
        display: inline-block;
        width:100%;
    }
    .caption-inner .text{
        display: block;
    }
    .caption-inner .image{
        display: block;
    }
}


/*********************/
/* Second Break Point */
/*********************/
@media (max-width: 992px) {
		.grid{
			 grid-template-columns: 1fr 1fr;
			-ms-grid-columns: 1fr 1fr;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: none;
		}

		#clients .grid {
				grid-template-columns: 1fr 1fr 1fr 1fr;
		}

		/*#impact.intro-animation svg g{
			filter: none !important; 
			opacity: 0.9 !important; 
		}*/

    .tile.header .main-navigation ul li:last-of-type{
        padding-right: 0px;
    }
    .mobile-menu-open, .mobile-menu-open #snap-content{
        overflow: hidden;
        position: fixed;
    }
    .tile.header .main-navigation .responsive-menu-close.active {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        cursor: pointer;
        display: block;
    }
    .tile.header .main-navigation ul {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(45, 83, 154, 0.95);
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=95);
        opacity: .95;
        padding-top: 100px;
        padding-top: 40px;
        z-index: 80;
    }
    .tile.header .main-navigation ul.active {
        display: block
    }
    .tile.header .main-navigation ul li {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        margin: 0
    }

/********/

    .tile.header .main-navigation{
        padding:0 20px!important;
    }

    .tile.header .main-navigation ul{
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(45, 83, 154, 0.95);
        filter:progid: DXImageTransform.Microsoft.Alpha(Opacity=95);
        opacity:.95;
        padding-top:100px;
        padding-top:40px;
        z-index:80;
    }

    .tile.header .main-navigation ul li{
        display:block;
        width:100%;
        text-align:center;
        padding:10px 0;
        margin:0;
    }
    .tile.header .main-navigation ul li a{
        font-size:1.25em;
    }
    .tile.header .main-navigation ul li.has-dropdown{
        padding-right:0;
    }
    .tile.header .main-navigation ul li.has-dropdown:after{
        display:none;
    }

    .tile.header .main-navigation ul li.has-dropdown+li{
        padding-top:2px;
    }
    .tile.header .main-navigation ul li.has-dropdown .sub-menu{
        display:block;
        position:relative;
        width:100%;
        top:0;
        padding-top:4px;
        box-shadow:none;
        background-color:transparent;
    }
    .tile.header .main-navigation ul li.has-dropdown .sub-menu li{
        background-color:transparent;
    }
    .tile.header .main-navigation ul li.has-dropdown .sub-menu li a{
        color:white;
    }
    .tile.header .main-navigation ul li.has-dropdown .sub-menu li+li{
        border-top:none;
    }
    .tile.header .main-navigation .responsive-login-link,.tile.header .main-navigation .responsive-menu-open{
        display:inline-block;
    }

    .nav_left{
            display: inline-block;
        max-width: 82px;
        padding: 8px 0 7px 0;
    }

    .nav_right {
        top:0px;
        padding-left: 0px;
        min-height: 100vh;
        height: 100%;
        overflow: auto;
    }

    .tile.header .main-navigation ul li .sub-menu{
        width:100%;
    }
    .tile.header .main-navigation ul li .sub-menu li{
        width:100%;
        padding: 14px 18px;
    }
    .tile.header .main-navigation ul li.has-dropdown:hover{
        background:none;
    }
    .tile.header .main-navigation ul li.has-dropdown .mobile_hide:after{
        width: 100%;
        background:white;
    }
    h1{
        font: normal normal bold 60px/1.4em raleway,sans-serif;
        line-height: 1em;
    }
    .header_title_container{
        z-index:8;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .nav_right{
        padding-left:0px;
    }
    .tile.header .main-navigation ul li.has-dropdown{
        padding-right:0px;
    }
    .caption-inner .head img{
        max-width: 120px;
        float: unset;
        display: block;
        margin: auto;
        padding: 10px;
    }
		
    .caption-inner p,
	#about .about_block div p	{
        font-size: 1em;
        line-height: 1.4em;
    }
		
		#about .about_block div img{
			 max-width: 150px;
			     max-height: 230px !important;
		}
		
		#contact .about_block > div p{
			font-size: 3vw;
			line-height: 4.5vw;			
		}
		
		#contact .about_block > div h3{
			font-size: 5vw;
			line-height: 4.5vw;	
		}
}


/*********************/
/* Third Break Point */
/*********************/
@media (max-width: 768px) {
    h1{
        font: normal normal bold 3.3em/1.4em raleway,sans-serif;
        line-height: 1em;
    }
    .header_title_container{
        z-index:8;
        position: absolute;
    }
    .inner-padding{
        padding: 1.5em 1.5em
    }
    .empty_window_background{
        top: 0;
        height: 100%;
        position: absolute;
        z-index: 5;
    }
    .header_title_container{
        position: relative;
        z-index: 10;
        height:auto;
    }
    .contact_block .field.half {
        width: 100%;
        padding: 1.5em 0 0 0;
    }
		.grid{
			 xgrid-template-columns: 1fr;
			x-ms-grid-columns: 1fr;
			xgrid-template-columns: 1fr;
			xgrid-template-areas: none;
		}
		#creative .layout-grid a{
			xheight: 382px;
			xheight: 128px;
		}
		.glightbox-box a{
		    transform: translate3d(0px, 0, 0);
				width: 100%;
		}
}

/*********************/
/* Forth Break Point */
/*********************/
@media (max-width: 500px) {
		#creative .layout-grid a{
			xheight: 128px;
		}


    .header_title_container h1{
        font-size: 2.7em;
        width: auto;
    }
    .header_title_container p{
        font-size: 1.7em;
    }
    .header_title_container{
        z-index:8;
        position: absolute;
        padding-left: 2em;
        padding-right: 0em;
    }
    .fixed_anchor_list{
        top: -1000px;
    }
    .header_title_container .members{
        position: absolute;
        top: 75vh;
        right: 0;
        padding-right: 20px;
    }
    .header_title_container p{
        width:65%
    }
    .client_listings{
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        grid-gap: 0em;
    }

    .empty_window_background{
        top: 0;
        height: 100%;
        position: absolute;
        z-index: 5;
    }

    .header_title_container{
        position: relative;
        z-index: 10;
        height:auto;
    }
    /****************/
    /* Case Study
    /****************/
    .cs-h {
        grid-template-columns: 1fr;
        grid-template-areas:
                "image image"
                "text text";
    }
    .cs-h-img {
        justify-self: center;
    }
    .cs-b {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .caption-inner p,
	#about .about_block div p	{
        font-size: 1em;
        line-height: 1.4em;
    }
		
		#about .about_block div p img{
			 max-width: 200px;
		}

    /****************/
    /* Contact Us
    /****************/
    .contact_block p.sub {
        margin: 3em 0em 3em 0em;
    }
    
    /****************/
    /* Footer 
    /****************/
    .footer-content-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em 2rem;
    }
    .footer-content-container .footer-logos{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        xgrid-template-columns: repeat(min-content);
        xgrid-template-columns: repeat(auto-fit);
        gap: 1em 2rem;
    }
    /****************/
    /* Cookie
    /****************/
    .cookie-wrap{
        width: auto;
    }
    .cookie-wrap .cookie-controls a{
        width: 160px;
        margin: 0;
    }
    .cookie-wrap .cookie-controls a:last-child{
        width: 160px;
        margin: 1em 0 0 0!important;
    }
}


/*********************/
/* Forth Break Point */
/*********************/
@media (max-width: 350px) {
    .header_title_container h1{
        font-size: 2.0em;
        width: auto;
    }
    .header_title_container p{
        font-size: 1.0em;
    }
    .header_title_container .members img{
        width:7em;
    }
}

/*********************/
/* iPAD portrait     */
/*********************/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    .fixed_anchor_list{
        top: -1000px;
    }
    .head_empty_window_container .cd-section:nth-child(1),
    .about_empty_window_container .cd-section:nth-child(1) {
        background-attachment: scroll;
    }
    .header_title_container{
        top: 1vh;
        height: calc(100% - 13vh);
        max-width: 708px;
    }
    .about_block div p{
        font-size: 1.5em;
        line-height: 1.5em;
    }
    .about_block p.sub{
        font-size: 1.5em;
        line-height: 1.6em;
    }
    .header_title_container h1 span{
        color: #181a1d;
        margin-top:5px;
        outline-color: white;
        outline-width: 1px;
        text-shadow: -1px -1px 0 #3c9ad873, 1px -1px 0 #3c9ad873, -1px 1px 0 #3c9ad873, 1px 1px 0 #3c9ad873;
        font-weight: 900;
    }
    .header_title_container p{
        font: normal normal 3.3em/1.1em raleway,sans-serif;
        padding-right:3em;
        margin-top:1.0em
    }
    .header_title_container p{
        width:100%
    }
    h1{
        font: normal bold 4.8em/1.4em raleway,sans-serif;
        letter-spacing:3px;
        line-height: 1em;
    }
}