.mobil_menu_button {
	display:none;
}

.mobil_menu_container{
	opacity:1;
	visibility:hidden;	
	transition: all 0.5s ease;
}
@media only screen and (max-width: 1700px) {
	.page_hero h1{
		font-size: 140px;
	}
	.page_hero .back_text{
		font-size: 282px;
	}
	.title h2{
		font-size: 250px;
	}
}
@media only screen and (max-width: 1200px) {


    .case_4:before {
    	content:'';
    	top: 0;
    	border-top: 2px solid #e4e4e4;
    	display: block;
    	width: calc(100vw + 1500px);
    	position: absolute;
    	left: -1500px;
    	opacity: 0.2;
    }
	
	.multi_area video {
	max-width: 100%;
	position: relative;
	height: unset;
	width: 100%;
	}

	.multi_area {
    margin-top: 0 !important;
}
	.multi_area img {
    max-width: 100%;
    position: relative !important;
    width: 100%;
}
	
	.urls {
		width: 100%;
		text-align: left;
		margin: 25px 0;
		bottom: 0;
	}
	
	.cases .services_list .active ul {
		position: relative;
		flex-direction: column-reverse;
	}
	
	.cases .services_list li ul {align-items: end;transition: unset;}
	
	.urls span:first-child {}
	.urls span {}	
	
}
@media only screen and (max-width: 1500px) {
	
	.urls {
	}
	
	.cases .services_list .active ul {
	top: -295%;
	}
	
	.cases .services_list li ul {}
	
	.urls span:first-child {}
	.urls span {}	
	

	.multi_area video {
		/* max-width: 100%; */
	}
	
	.multi_area img {
	}
	
	.multi_area {
		text-align: left;
	}
	
	.cases .services_list li ul .multimedia {}
	
	
	.cases .services_list li{
		font-size: 80px;
	}
}
@media only screen and (max-width: 1400px) {
	.services .services_list li{
		font-size: 70px;
	}
	.services .services_list li:before{
		font-size: 25px;
		left: -35px;
	}
	.services .services_list{
		margin-left: 36px;
	}
}	
@media only screen and (max-width: 1300px) {
	.page_hero h1{
		font-size: 100px;
	}
	.page_hero .slogan{
		font-size: 30px;
	}
	.page_hero .back_text{
		font-size: 222px;
		margin-left: -50px;
	}
	.title h2{
		font-size: 170px;
	}
}	
@media only screen and (max-width: 1220px) {
	.gc{
		width: 100%;
	}
}	
@media only screen and (max-width: 1100px) {
	.cases .services_list li{
		font-size: 50px;
	}
}
@media only screen and (max-width: 1023px) { 
	.cb-cursor{
		display: none !important;
	}
	.inner_circle{
		display: none !important;
	}
	.ul_area {
		opacity: 1 !important;
		display: none;
	}

    .multi_area {
    	margin:0
    }


	.mobil_menu_button {
		display:block;
		float: right;
		padding: 5px 0;
	}

    .mobil_menu_button span {
    color: #fff;
    }
    
	.mh {
		display:none;
	}
	
    .cases .services_list li font {
    	white-space: break-spaces;
    }

	.col-sm-12 {
		width:100% !important;
	}
	
	
	.cases .services_list li {
		font-weight: 900;
		font-size: 36px;
		line-height: 110%;
		padding: 30px 0;
	}
	
	.logo_container .header_logo span {
		font-size:25px;
	}
	.header_logo span b{
		display: none !important;
	}
	.logo_container .header_logo {
		min-width: 110px;
		height:36px;
	}
	
	.menu_container{
		display:none !important;
	}
	
	.page_hero .slogan {
		font-size:17px;
	}

	
	.about_wdwc p {
		font-size:15px;
	}
	
	.about_wdwc {
		margin-top:20px;
	}
	
	.services {
		margin-top:70px;
	}
	
	.page_hero {
			margin-top:50px;
	}
	
	
	.services .services_list {
		margin-top: -25px;
	}


	.cases .services_list .active {
		margin: 0 0;
	}

	.case_1:after {
		border:none !important;
		position:relative;
		
	}

	.cases .services_list li:after {
		top:0;
	}

	.contact .contact_title {
		font-size:36px;
		line-height: 110%;
		margin: 0;
	}

	.contact p {
		font-size:15px!important;
	}
		
	.contact .contact_desc {
		margin: 15px 0;
	}

	.contact .contact_info li a {
		font-size:24px
	}

	.contact .contact_info li span {
		font-size:24px;
		float: left;
		width: 101px;
	}

	.contact_info li {
	    margin-bottom: 18px !important;
	}

	.contact .contact_info {
		margin:50px 0;
	}

	.footer_info{
		margin-top: 50px !important;
	}

	.mobil_menu_container {
	    width: 76%;
	    position: absolute;
	    right: 0;
	    box-shadow: -20px 4px 20px rgba(0, 0, 0, 0.25);
	    height: 100%;
	    padding: 25px;
	    z-index: 999;
	    top: 0;
	}
	.mobil_menu_container ul {
	    padding: 80px 20px;
	}
	.mobil_menu_container ul li {}
	.mobil_menu_container ul li a {
	    float: left;
	    width: 100%;
	    color: #fff;
	    font-size: 24px;
	    line-height: 48px;
	    font-weight: 600;
	    text-transform: uppercase;
	}

	.mobil_menu_active {
		opacity:1;
		visibility:visible;	
	}


	#menuToggle
	{
	  display: block;
	  position: relative;
	  top: 0;
	  right: 0;
	  z-index: 1;
	  -webkit-user-select: none;
	  user-select: none;
	}

	#menuToggle a
	{
	  text-decoration: none;
	  color: #232323;
	  
	  transition: color 0.3s ease;
	}

	#menuToggle a:hover
	{
	  color: tomato;
	}


	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  
	  cursor: pointer;
	  
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  
	  -webkit-touch-callout: none;
	}

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;
	  
	  background: #ffffff;
	  border-radius: 3px;
	  
	  z-index: 1;
	  
	  transform-origin: 4px 0px;
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	              opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
	  transform-origin: 0% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #232323;
	}

	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu
	{
	  position: absolute;
	  width: 300px;
	  margin: -100px 0 0 -50px;
	  padding: 50px;
	  padding-top: 125px;
	  
	  background: #ededed;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */
	  
	  transform-origin: 0% 0%;
	  transform: translate(-100%, 0);
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

	#menu li
	{
	  padding: 10px 0;
	  font-size: 22px;
	}
	#menuToggle input:checked ~ ul
	{
	  transform: none;
	}
	.menu_active .mobil_menu_container{
    right: 0px;
    visibility: visible;
}


.mobil_menu_container{
    opacity: 1;
    right: -76%;
    position: fixed;
    max-width: 350px;
}

#menuToggle{
    z-index: 1000;
}
#menuToggle span{
    border-radius: 0px;
    margin-bottom: 7px;
    height: 2px;
    transition: all 0.4s ease;
    transform-origin: unset  !important;
}
#menuToggle span.m_b{
    position: relative;
    width: 25px;
}
#menuToggle span.m_b:after{
    content: '';
    width: 4px;
    display: block;
    position: absolute;
    right: -8px;
    top: 0px;
    height: 100%;
}
.menu_active #menuToggle span.f_b{
    transform: rotate(45deg) translateY(15px) translateX(3px);
}
.menu_active #menuToggle span.l_b{
    transform: rotate(-45deg) translateY(-10px) translateX(-2px);
}
.menu_active #menuToggle span.m_b{
    opacity: 0;
}
.mobil_menu_container ul {
    padding: 80px 0px 0px 0px;
}
.mobil_menu_container ul li{
    counter-increment: menu_count;

}
.mobil_menu_container ul li a:before{
    content: "0"counter(menu_count);
    font-family: Roboto Mono;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    margin-right: 15px;
    line-height: 0px;
}




.mobile_contact_info{
    display: block;
    width: 100%;
    float: left;
    margin-top: 40px;
}
.mobile_single_info a{
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    font-weight: 600;
    text-transform: uppercase;
}
.mobile_single_info a svg{
    margin-right: 20px;
}
.menu_active{
    overflow: hidden;
}

}
@media only screen and (max-width: 1000px) {

}

@media only screen and (max-width: 850px) {
	.page_hero h1{
		font-size: 80px;
	}
	.services .services_list li{
		font-size: 50px;
	}
}
@media only screen and (max-width: 700px) {
	.title{
		transform: translateX(60px);
	}
	.page_hero h1{
		font-size: 40px;
		line-height: 110%;
	}
	.page_hero .slogan{
		font-size: 17px;
	}
	.page_hero .back_text{
		font-size: 96px;
		line-height: 90%;
		opacity: 0.15;
		margin-left: 0px;
	}
	.page_hero .back_text, .title h2{
		-webkit-text-stroke: 1px #ffffff;
	}
	.title h2{
		font-size: 100px;
	}
	.services .services_list{
		margin-left: 25px;
	}
	.services .services_list li{
		font-size: 36px;
		margin-bottom: 20px;
	}
	.services .services_list li:before{
	    font-size: 14px;
	    left: -25px;
	    top: 3px;
	}
	.gc{
		padding:  0 18px;
	}
	.contact .contact_info li span{
	    font-size: 20px;
	    width: 70px;
	}
	.contact .contact_info li{
		display: flex;
		align-items: center;
	}
	.contact .contact_info li a{
		font-size: 17px;
	}
	
}