/* ---------------- start general overrides ----------------------- */

.mobile
{
	display:block;
}
.desktop
{
	display:none;
}




#wrapper
{
	width: 100%;
	margin-top:0px;
}


#wrapper::after
{ 
	content: '';
    display: block;
    clear: both;

}



#pagecontainer
{
	width: 100%;
		min-height:inherit;

}

#pagecontainer2
{
	
	width: 100%;
	

}

#pagecontainer3
{
	width: 100%;
		


}






#pagebody
{
	
	width: 100%;
	border:none;
	min-height: 300px;
}




#body_content
{
	
	width: 100%;
	margin-left:0px;
	left:0px;
	min-height: 300px;

}








*,body, h1, h2, h3, h4, h5, h6 p, a, a:hover, ul, ol, td, th,input, select, textarea,form,table,tr,div,span,nobr,em,b,i,header, section, footer, aside, nav, main, article, figure, a b, a:hover b

{
	font-size: 16px;
	line-height:1.2em;
	
}





body
{
	padding-bottom:0px;
	margin: 0px;
}


H1
{
	font-size: 20px;
	
}


H2
{
	font-size: 18px;
	line-height:1.2em;
}



H3
{
	font-size: 16px;
	line-height:1.2em;
}










/* ---------------- end general overrides ----------------------- */









/*======================= pageheader ==================================*/

#pageheader
{
	width:100%;	
}


#pageheader #pageheader_inner
{
	width:100%;	
	
}



#pageheader #logo
{
	left:20px;
	background-image:url('../images/Gilmex_logo_400.png');
	background-size: cover;
}

#pageheader #logo img
{
	
}






#topmenu
{
	
	width:100%;
	display:none;
}

#topmenu_services .arrow-down 
{
   border-left-width: 0px;
  border-right-width: 0px;
  
  border-top-width: 0px;
  margin-left:0px;
  display:inline;
}



#mobile_menu_icon_container
{
	display:block;
	width: 45px;
	height: 45px;
	position:absolute;
	top:24px;
	right:15px;
	cursor:pointer;
}
#mobile_menu_icon_container img
{
	width: 45px;
	height: 45px;
	
}









#topmenu_mobile_backdrop
{
	overflow:hidden;
	width: 100%;
	height: auto;
	min-height:300px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index:1;
	background-color:gray;
	opacity:0.5;
	display:none;
	
}


#topmenu_mobile_container
{
	overflow:hidden;
	width: 90%;
	max-width:90%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index:2000;
	height:auto;
	
	
	min-height: 1px;
	
	
	
}

@-webkit-keyframes mobile_menu_transition
{
     from {left: -90%;}
     to {left: 0px;}
} 

/* Standard syntax */ 
@keyframes mobile_menu_transition
{
     from {left: -90%;}
     to {left: 0px;}

}






#topmenu_mobile
{
	left: 0px;
	width: 90%;
	max-width:90%;
	position: relative;
	top: 0px;
	min-height: 32px;
	z-index:2;
	background-color:#ffffff;
	border: none;
	overflow:auto;
	height:auto;
	padding-bottom:40px;
	padding-top:46px;
	display:none;
}




#topmenu_mobile #topmenu_inner
{
	min-height: 16px;
	width:auto;
	flex-direction: column;
	height:	auto;
}


#topmenu_mobile #topmenu_inner::after
{ 
	content: '';
    display: block;
    clear: both;

}


#topmenu_mobile.mobile_menu_transition
{
	left: -90%;
	-webkit-animation: mobile_menu_transition 0.5s forwards;
    animation: mobile_menu_transition 0.5s forwards;

}






#topmenu_mobile .topmenu_but
{
	position:relative;
	overflow:auto;
	clear: both;
	float: none;
	font-size: inherit;
	line-height: inherit;
	
	text-decoration: none;
	min-width: 20px;
	text-transform:none;
	cursor:pointer;
	background-image:none;
	text-align:center;
	
	height: auto;
	min-height: 18px;
	margin-top:0px;
	padding-left:15%;
	padding-right:15%;
}



#topmenu_mobile .topmenu_but_back
{
	
	height:40px;
	width:40px;
	position:absolute;
	top:6px;
	right:6px;
	cursor:pointer;
	z-index:10;
}



#topmenu_mobile .topmenu_but_back::after, #topmenu_mobile .topmenu_but_back::before
{ 
	content:'';
    position:absolute;
    width:40px;
    height:2px;
    background-color:#12aae3;
    border-radius:1px;
    top:18px;
    
}


#topmenu_mobile .topmenu_but_back:before
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:0px;
}
#topmenu_mobile .topmenu_but_back:after
{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:0px;
}



#topmenu_mobile #topmenu_mobile_supplementary
{
	
}



#topmenu_mobile #topmenu_mobile_supplementary .topmenu_but
{
	
}

#topmenu_mobile #topmenu_mobile_supplementary .more
{
	
}



#topmenu_mobile #topmenu_mobile_supplementary .topmenu_but::after
{ 
	content: '';
    display: block;
    clear: both;
	
}


#topmenu_mobile .topmenu_but:hover
{
	
}

#topmenu_mobile a
{
	
	display: block;
	color: #12aae3;
	line-height: inherit;
	height: inherit;
	text-decoration: none;
	min-width: 20px;
	text-transform:none;
	padding-left:10px;
	padding-right:4px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 2px #12aae3 solid;
	
}



#topmenu_mobile .topmenu_but:last-child a
{
	border-bottom-width: 0px;
}




#topmenu_mobile a:hover, #topmenu_mobile .topmenu_but a:hover, #topmenu_mobile .hi a
{
	text-decoration: none;
	background-color:#12aae3;

	color:#ffffff;
}





/*======================= Gilmex general ==================================*/

.picture_h1
{
	font-size: 24px;
	line-height:26px;
	

}

.picture_h2
{
	font-size: 16px;
	line-height:18px;
	
	text-wrap: balance;
	max-width: 90%;
}


#main_wording
{
	margin-top: -2px;
	
}


#main_image
{
	
	margin-left:12px;
	
}





#main_content
{
	padding-left:12px;
	padding-right:12px;
	justify-content: space-between;
	align-items:flex-start;
	flex-direction: column;
}




#focus_image_container
{
	
	width:100%;
	margin-top:20px;
}




#main_narrative
{
	width:auto;
}


#case_studies_container
{
	padding-left:12px;
	padding-right:12px;
}




.case_study
{
	
	justify-content: space-between;
	align-items:flex-start;
	flex-direction: column;

}

.case_study_narrative
{
	width:auto;
}



.case_study_image_container
{
	width:100%;
	margin-top:20px;
}






/*======================= home ==================================*/



#home #main_image_container
{
	padding-bottom:66%;
	background-image: url(../images/main/home_main_mobile.jpg);
   box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.45);

}



#home #main_image
{
	
	margin-left:0px;
	justify-content:center;

}



#home .picture_h2
{
	font-size: 30px;
	line-height:40px;
	text-align:center;
	padding-left:12px;
	padding-right:12px;
	max-width:400px;
}


#home .picture_h2 br
{
	/* display:none; */

}


#service_icons
{
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top:-30px;
	
}





#service_icons .service_icon 
{
	height: 60px;
	padding: 4px;
	
	margin-top:30px;
	
}



#service_icons .service_icon span
{
	height: 60px;
	font-size: 16px;
	line-height:18px;
	min-width: none;
	max-width: none;
	width: 140px;
}




/*======================= personalised_print ==================================*/



#personalised_print .case_study_narrative
{
	width:100%;
}

#personalised_print .case_study_image_container
{
	width:100%;
	max-width:437px;
}



/*======================= document_finishing ==================================*/




#document_finishing .case_study_narrative
{
	width:100%;
}

#document_finishing .case_study_image_container
{
	width:100%;
	max-width:472px;
}




/*======================= stitched_and_perfect_bound ==================================*/





#stitched_and_perfect_bound .case_study_narrative
{
	width:100%;
}

#stitched_and_perfect_bound .case_study_image_container
{
	width:100%;
	max-width:230px;
	margin-top:20px;
	margin-bottom:40px;
}



#stitched_and_perfect_bound .case_study
{
	
	flex-direction: column;

}


#stitched_and_perfect_bound .case_study_narrative
{
	margin-left:0px;
	
}



/*======================= products ==================================*/




#products #focus_image
{
	background-image: url(../images/focus/focus_products_767a.jpg);
	
}





/*======================= contact ==================================*/





#contact #main_narrative
{
	width:auto;
	min-width:230px;
	
}


#contact #focus_image_container
{
	width:auto;
	height:0;
	max-width:100%;
	padding-bottom: 56.25%;
	margin-left:0;
	margin-right:0;
	overflow:hidden;
}

#contact #focus_image_container iframe
{

    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;

}



#contact #main_content a[href^="tel:"] 
{
	color: #1F52D8;
	text-decoration: underline;
	cursor:pointer;
}



/*======================= about ==================================*/



#about #offer_panels
{
	justify-content: space-around;
	align-items:stretch;
	flex-direction: row;
	flex-wrap: wrap;
	
}



#about .offer_panel p
{
	font-size:16px;
	line-height: 18px;
	
}







/*======================= footer ==================================*/





#footer
{
	min-height:120px;
	width:100%;
	margin-left:0%;
	margin-right:0%;
	padding-bottom:30px;
}
	

#footer_inner
{
	flex-direction:column-reverse;
	justify-content:center;
}



#footer #footer_contact
{
	text-align:center;
	min-width:200px;
	padding-top:10px;
	padding-bottom:40px;
}


#footer #footer_logos
{
	width:auto;
	height: auto;
	
}

#footer #footer_logos img
{
	width:100%;
	height: auto;
	
}



#footer #footer_contact a[href^="tel:"] 
{
	text-decoration: none;
	cursor:pointer;
}


#footer #footer_contact a[href^="tel:"]:hover 
{
	text-decoration: underline;
	
}