@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

h1 { 

font-weight: normal !important;
    text-shadow: 0 0 0 !important;

}



a[href^=tel] { color: inherit; text-decoration: none; }


/* Mobile Layout: 285 to 480px and below. */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
  /* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {

body{
	background-color: #d8d4cc;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px!important;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px!important;    
}
.grid_container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
 }
     h1 {
    font-size: 14px!important;
  
}
.bebas {
    font-family: 'bebas';
    -webkit-transform-style: preserve-3d;
    text-decoration: none !important;
    letter-spacing: 4px;
    font-weight: normal !important;
}
    
.no_spacing {
        letter-spacing: 0px;
}
.gotham_book {
	font-family: 'gotham_book';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

.gotham_med {
	font-family: 'gotham_med';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}
    
.gotham_bold {
	font-family: 'gotham_bold';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

._8 {
	line-height: 18px;
	font-size: 8px;
	text-decoration: none !important;
}
._10 {
	line-height: 18px;
	font-size: 10px;
	text-decoration: none !important;
}


._12 {
	line-height: 18px;
	font-size: 12px;
	text-decoration: none !important;
}
    
._14 {
	line-height: 19px;
	font-size: 14px;
	text-decoration: none !important;
}


._16 {
	line-height: 22px;
	font-size: 16px;
	text-decoration: none !important;
}

._18 {
	line-height: 24px;
	font-size: 18px;
	text-decoration: none !important;
}
    ._20 {
	line-height: 26px;
	font-size: 20px;
	text-decoration: none !important;
}
    ._18_bull {
	line-height: 32px;
	font-size: 18px;
	text-decoration: none !important;
}
    ._20_bull {
	line-height: 34px;
	font-size: 20px;
	text-decoration: none !important;
}


._22 {
	line-height: 30px;
	font-size: 22px;
	text-decoration: none !important;
}
._24 {
	line-height: 24px;
	font-size: 24px;
	text-decoration: none !important;
}
._30 {
	line-height: 34px;
	font-size: 30px;
	text-decoration: none !important;
}
    
._32 {
	line-height: 38px;
	font-size: 32px;
	text-decoration: none !important;
}
._36 {
	line-height: 48px;
	font-size: 36px;
	text-decoration: none !important;
}
    ._42 {
	line-height: 48px;
	font-size: 38px;
	text-decoration: none !important;
}
._48 {
    line-height: 140%;
    font-size: 2.9em;
    text-decoration: none !important;
}
._55 {
	line-height: 65px;
	font-size: 55px;
	text-decoration: none !important;
}    
._64 {
	line-height: 78px;
	font-size: 64px;
	text-decoration: none !important;
}
._72 {
   line-height: 40%;
    font-size: 1.7em;
    text-decoration: none;
}
    
    ._100 {
   line-height: 90%;
    font-size: 1.7em;
    text-decoration: none;
}
.centred {
	text-align: center;
}
.white {
	color: #ffffff;
	text-decoration: none !important;
}
    
.black {
	color: #000000;
	text-decoration: none !important;
}
 
.biege {
	color: #d2c095;
	text-decoration: none !important;
}
    
.red {
	color: #ea6052;
	text-decoration: none !important;
}
.green {
	color: #00260A;
	text-decoration: none !important;
}

a:hover, a:link, a:active
{
    text-decoration: none !important;
    color: #ea6052;
}
    
    a:visited
{
	text-decoration: none !important;
	color: #000000;
	background-color: #EF1418;
	height: 100px;
	width: 0%;
}
    
    p {
    margin-top: 0.25em;
    /* [disabled]margin-right: 0.25em; */
    /* [disabled]margin-left: 0.25em; */
    margin-bottom: 0.25em;
}
    



/*  HEADER  */

.width_wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #003213;
    margin-top: 40px!important;
}
  .header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #00260A;
    z-index: 10;
      padding-bottom: 30px;
}  

.charlie_croker_logo {
    width: 100%;
    height: 120px;
    background-image: url(images/charlie_croker_logo_2.png);
    background-size: 70% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    margin-right: auto;
    margin-left: auto;
    background-position: 50% 25px;
    border-width: none;
    border-right-style: none;
    border-right-color: none;
  display: inline-block;
}
    
 .insta {
	width: 100%;
	height: 118px;
	background-image: url(images/insta.png);
	background-size: 45px auto;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-right: auto;
	margin-left: -100px;
	background-position: 50% 37px;
	border-width: none;
	border-right-style: none;
	border-right-color: none;
	display: inline-block;
	z-index: 995;
    position: absolute;
	
}
    .newmenu {
        z-index: 85;
}
    
    .insta a{
    background: url(https://www.instagram.com/charliecrokerbespoke);
        position: absolute;
}
       .insta_iphone {
	display: block;
           text-align: center;
           padding-bottom:20px;
}
     .top_right_menu {
	display: none;
		    
}  
    
    .header_strapline {
    width: 80%;
    display: inline-block;
    margin-top: -10px;
    margin-left: 10%;
    text-align: center;
}
    
 
 
    


.iphone_menu {
	width: 100%;
	text-align: center;
	height: 100px;
	z-index: 134;
	margin-left: auto;
	margin-right: auto;
    
    display: inline-block;
	
    
}

.p7PM3-01 {
	font-size: 12px !important;
	font-weight: 400;	
}

.p7PM3-01 ul li a {
    padding-right: 0% !important;
    padding-left: 10%!important;
}

:target:before {
  content:"";
  display:block;
  height:130px; /* fixed header height*/
  margin:-130px 0 0; /* negative fixed header height */
}

/*  HEADER END  */

/* ------------------------ MAIN BODY-------------------------  */

.editable_body_content {
	
}
.main_body_content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
}

/*  TOP SLIDER  */

.top_slider {
	width: 100%;
}
    
.top_slider_width_wrapper {
	width: 100%;
	position: relative;
	top: 00px;
	margin-right: auto;
	margin-left: -0px;
	z-index: -100;
}
    
    .contact_spacer {
    width: 100%;
    margin-top: 00px;
}	

.top_slider2 {
	width: 100%;
	z-index: 0;
	position: relative;
	top: 0px;
	height: auto;
	max-width: 1200px;
	right: 0px;
	left: 0px;
	margin-right: auto;
	margin-left: auto;
}

.top_slider_container {
	width: 100%;
	padding-bottom: 57%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 00px;
}
    
    #ccintroanim_hype_container{
     border-radius:0px;
}
    
 
    


/*  TOP SLIDER END */
    
/*  MAIN  */

.middle_wrapper {
	width: 100%;
}
    
.heading {
    width: 80%;
    padding-top: 50px;
    margin-right: auto;
    margin-left: 10%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
    
.intro_copy {
    width: 80%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: 10%;
    text-align: justify;
    overflow-x: hidden;
    padding-bottom: 60px;
    display: inline-block;
  
}	
      .two_col {
   columns: 1;
   column-gap: 40px;
  -moz-columns: 1;
  -moz-column-gap: 40px;
  -webkit-columns: 1;
  -webkit-column-gap: 40px;
  }
    p {
  
  break-inside: avoid;
}	
    
      .products {
    width: 90%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: 5%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
/*  MAIN END */
    
     /*  TOOLS  */

.tools {
    width: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -100px;
    background-image: url(images/stilson.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 50px;
    padding-bottom: 25.5%;
    
}
    
    .vane {
    width: 120%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/vane/french_curve.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -0% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
        .chainsaw {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/logs/chainsaw.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
           .screens {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/screens/amonite.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
     .contact_tool {
    width: 110%;
    margin-top: -20px;
    margin-right: auto;
    margin-left: -00px;
    background-image: url(images/drill.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 40px;
    padding-bottom: 25.5%;
    
}
      .knot {
    width: 100%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/knot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -0% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
    
        .clamp {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/clamp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
       .bus {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/buses.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
          .flash {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/flash.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
         .torch {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/torch.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
              .protractor {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/protractor.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
              .mahl {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/mahl.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                        .balls {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/balls.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
    .baguette {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/baguette.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
    .airbrush {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/airbrush.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 25.5%;    
}
    .stars {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/stars.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
    .clocks {
	width: 95%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10px;
	background-image: url(images/tape.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50%;    
}
    
    .pimms {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/pimms.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
    .trowel {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/trowel.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
    .blades {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/blades.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
        .signs {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/signs.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
             .bentley {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/bentley.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
  
  
    
    
	
/*  TOOLS END */
    
 /*  GALLERY  */

.gallery {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 00%;
    z-index: 35;
    position: relative;
}
    .gallery_image {
    flex-basis: 100%;
    margin-bottom: -4px;
  
  
}
    
     .gallery_image img{
      border-radius:0px;
  
}
    
	
/*  GALLERY END */

/*  PORTFOLIO  */  
    
    .top_folio_image {
    width: 100%;
    padding-bottom: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 00px; 
}
    .folio_desc_container {
    width: 80%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: 10%;
    text-align: left;
    display: block;
    vertical-align: top;
}
    .folio_desc_no {
    height: 152px;
    width: 60%;
    margin-left: 0%;
    padding-right: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    
    
}    
   .folio_desc_no img{
      height: auto;
    object-fit: cover;
    width: 100%;
}
    .folio_desc_heading {
    width: 100%;
    height: auto;
    margin-left: 0%;
    margin-top: -6px;
    padding-right: 1%;
    text-align: left;
    display: block;
    vertical-align: top;
}
    
    .folio_desc_sub_heading {
    width: 100%;
    margin-left: 0%;
    margin-top: -6px;
    padding-left: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
   
    
}
    
     .vert_rule {
    border-bottom: thin solid #C3BDB0;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 00px;
    vertical-align: top; 
        
}
        .horoz_rule {
    border-top: thin solid #C3BDB0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    vertical-align: top;    
}
       .para_heading {
      text-align: left; 
    line-height: 100%;
    font-size: 3em;
    padding-bottom: 15px;
}
    .folio_desc_copy {
    width: 80%;
    margin-right: auto;
    margin-left: 10%;
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    columns: 1;
    column-gap: 30px;
    border-bottom: thin solid #C3BDB0;
    padding-bottom: 40px;
    
}
    .folio_image_container {
    width: 82%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    vertical-align: top;
    margin-top: 00px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 30px;
            }
    
     .folio_image_wrapper {
    flex-basis: 100%;
    margin-right: 1.5%;
    margin-left: 1.5%;
    margin-bottom: 30px;
         
    
            }
    
     .folio_image {
    overflow: hidden; 
         padding-bottom: 20px;
         
    
    
}
    .folio_image img {
    transition: transform .75s ease;
    display: block;    
    
}
    
    .folio_image img:hover {
    transform: scale(1.05);
    
   
}
    .folio_image_arrow {
    margin-top: 8px;
    margin-right: 5px;
    width: 12px;
    height:12px;
    background-image: url(images/arrow.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 12px 12px;
    background-position: 50% 50%;
    vertical-align: top;
}
     .folio_image_text {
    margin-top: 5px;
    display: inline-block;
    vertical-align: top;
        
}
    
    
    
        
        
    /*  PORTFOLIO END */ 
    
     /*  CONTACT */ 
    
    
    .contact_copy
{
     width: 85%;
    padding-top: 100px;
    margin-right: auto;
    margin-left: 10%;
    text-align: justify;
   overflow-x: hidden;
    padding-bottom: 60px;
    display: inline-block;
    text-decoration: none !important;
}
    
        .contact_copy hover
{    
    text-decoration: none !important;
}
    
    /*  CONTACT END*/ 


/*  ___________________________  MAIN BODY END  ______________________*/


/*  FOOTER  */
        
.footer {
    margin-top: 50px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background-color: #003213;
    
}

.footer_copyright {
	margin-left: 10%;
	margin-bottom: 22px;
	display: block;
	vertical-align: top;
	width: 80%;
	text-align: center;
}


/*  FOOTER END  */

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}	

}


/* ipad PORTRAIT layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

/* Media Query for Tablets PORTRAIT */
@media only screen and (min-width : 481px) and (max-width : 768px) {


body{
    background-color: #d8d4cc;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px!important;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px!important;
    
}
.grid_container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
   
}
    
     h1 {
    font-size: 14px!important;
    
   
    
}
.bebas {
    font-family: 'bebas';
    -webkit-transform-style: preserve-3d;
    text-decoration: none !important;
    letter-spacing: 4px;
    font-weight: normal !important;
}
    
.no_spacing {
        letter-spacing: 0px;
}
.gotham_book {
	font-family: 'gotham_book';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

.gotham_med {
	font-family: 'gotham_med';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}
    
.gotham_bold {
	font-family: 'gotham_bold';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

._8 {
	line-height: 18px;
	font-size: 8px;
	text-decoration: none !important;
}
._10 {
	line-height: 18px;
	font-size: 10px;
	text-decoration: none !important;
}


._12 {
	line-height: 18px;
	font-size: 12px;
	text-decoration: none !important;
}
    
._14 {
	line-height: 19px;
	font-size: 12px;
	text-decoration: none !important;
}


._16 {
	line-height: 22px;
	font-size: 16px;
	text-decoration: none !important;
}

._18 {
	line-height: 24px;
	font-size: 0.8em;
	text-decoration: none !important;
}
    ._20 {
	line-height: 26px;
	font-size: 20px;
	text-decoration: none !important;
}
    ._18_bull {
	line-height: 32px;
	font-size: 18px;
	text-decoration: none !important;
}
    ._20_bull {
	line-height: 34px;
	font-size: 20px;
	text-decoration: none !important;
}


._22 {
	line-height: 30px;
	font-size: 22px;
	text-decoration: none !important;
}
._24 {
	line-height: 24px;
	font-size: 24px;
	text-decoration: none !important;
}
._30 {
	line-height: 34px;
	font-size: 30px;
	text-decoration: none !important;
}
    
._32 {
	line-height: 38px;
	font-size: 32px;
	text-decoration: none !important;
}
._36 {
	line-height: 48px;
	font-size: 36px;
	text-decoration: none !important;
}
    ._42 {
	line-height: 48px;
	font-size: 38px;
	text-decoration: none !important;
}
._48 {
    line-height: 140%;
    font-size: 1.6em;
    text-decoration: none !important;
}
._55 {
	line-height: 65px;
	font-size: 55px;
	text-decoration: none !important;
}    
._64 {
	line-height: 78px;
	font-size: 64px;
	text-decoration: none !important;
}
._72 {
   line-height: 40%;
    font-size: 1.7em;
    text-decoration: none;
    }
    ._100 {
   line-height: 90%;
    font-size: 2.0em;
    text-decoration: none;
    }
.centred {
	text-align: center;
}
.white {
	color: #ffffff;
	text-decoration: none !important;
}
    
.black {
	color: #000000;
	text-decoration: none !important;
}
 
.biege {
	color: #d2c095;
	text-decoration: none !important;
}
    
.red {
	color: #ea6052;
	text-decoration: none !important;
}
.green {
	color: #00260A;
	text-decoration: none !important;
}

a:hover, a:link, a:active
{
    text-decoration: none !important;
    color: #ea6052;
}
    
    a:visited
{
    text-decoration: none !important;
    color: #000000;
}
    
    p {
    margin-top: 0.25em;
    /* [disabled]margin-right: 0.25em; */
    /* [disabled]margin-left: 0.25em; */
    margin-bottom: 0.25em;
}
    



/*  HEADER  */

.width_wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #003213;
    margin-top: 40px!important;
}
  .header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #00260A;
    z-index: 10;
}  

.charlie_croker_logo {
    width: 220px;
    height: 100px;
    background-image: url(images/charlie_croker_logo_2.png);
    background-size: 85% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    margin-right: auto;
    margin-left: 5%;
    background-position: 0% 38px;
    border-width: thin;
    border-right-style: solid;
    border-right-color: #D2C095;
  display: inline-block;
}
    
  .insta {
	width: 100%;
	height: 118px;
	background-image: url(images/insta.png);
	background-size: 35px auto;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-right: auto;
	margin-left: -90px;
	background-position: 50% 37px;
	border-width: none;
	border-right-style: none;
	border-right-color: none;
	display: inline-block;
	z-index: 995;
    position: absolute;
	
}
    .newmenu {
        z-index: 85;
}
    
    .insta a{
    background: url(https://www.instagram.com/charliecrokerbespoke);
        position: absolute;
}
       .insta_iphone {
    display:none;
   
        
}
     .top_right_menu {
	position: fixed;
	width: 100px;
	top: 0px;
	z-index: 85;
	right: 00px;
	height: 30px;
	    
}  
    
    .header_strapline {
    width: 35%;
    display: inline-block;
    margin-top: 38px;
    margin-left: 10px;
}
  
    



.iphone_menu {
	display: none;
}

.p7PM3-01 {
	font-size: 12px !important;
	font-weight: 400;	
}

.p7PM3-01 ul li a {
    padding-right: 0% !important;
    padding-left: 10%!important;
}

:target:before {
  content:"";
  display:block;
  height:130px; /* fixed header height*/
  margin:-130px 0 0; /* negative fixed header height */
}

/*  HEADER END  */
    
/*  NEW MENU*/
    

html, body {
    overflow-x: hidden;
    height: 100%;
}


.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    top:0;
    width: 200px;
    margin-top: 00px;
    padding-top:00px;
    transform: translateX(270px);
    transition: transform 250ms ease-in-out;
    background-color: rgb(0 38 10 / 0.7);
}
.sidebarMenuInner{
    margin:0;
    padding-top:100px;
    
}
.sidebarMenuInner li{
    list-style: none;   
    padding-left: 00px;
    padding-top: 10px;
    cursor: pointer;
    width: 140px;
    line-height:18px;
    
}
.sidebarMenuInner li span{
    display: block;    
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
	color: #d2c095;	
	cursor: pointer;
	text-decoration: none;
    font-weight: 300;
}
    .sidebarMenuInner li a:hover{
	color: #FF5308;	
	
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 36px;
    right: 50px;
    height: 35px;
    width: 35px;
    padding:5px;
    border-radius: 30px;
	background-color: #EB5F52; 
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 2px;
    width: 70%;
    background-color: #d2c095;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 5px;
    margin-left: 4px
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    margin-left: 4px;
    margin-top: 5px;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 5px;
    margin-left: 4px
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 11px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -8px;
}
    
    /*  NEW MENU*/


/* ------------------------ MAIN BODY-------------------------  */

.editable_body_content {
	
}
.main_body_content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
}

/*  TOP SLIDER  */

.top_slider {
	width: 100%;
}
    
.top_slider_width_wrapper {
    width: 100%;
    position: relative;
    top: 00px;
    margin-right: auto;
    margin-left: -0px;
    z-index: -100;
}
    
    .contact_spacer {
    width: 100%;
    margin-top: 00px;
}	

.top_slider2 {
	width: 100%;
	z-index: 0;
	position: relative;
	top: 0px;
	height: auto;
	max-width: 1200px;
	right: 0px;
	left: 0px;
	margin-right: auto;
	margin-left: auto;
}

.top_slider_container {
    width: 100%;
    padding-bottom: 57%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 00px;
  
}
    
    #ccintroanim_hype_container{
     border-radius:0px;
}
    
 
    


/*  TOP SLIDER END */
    
/*  MAIN  */

.middle_wrapper {
	width: 100%;
}
    
.heading {
    width: 37%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: 5%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
    
.intro_copy {
    width: 50%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
    overflow-x: hidden;
   
    padding-bottom: 60px;
    display: inline-block;
  
}	
    
    .two_col {
   columns: 1;
   column-gap: 40px;
  -moz-columns: 1;
  -moz-column-gap: 40px;
  -webkit-columns: 1;
  -webkit-column-gap: 40px;
  }
    p {
  
  break-inside: avoid;
}
    
          .products {
    width: 90%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: 5%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
/*  MAIN END */
    
     /*  TOOLS  */

.tools {
    width: 70%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -100px;
    background-image: url(images/stilson.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
    .vane {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/vane/french_curve.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
        .chainsaw {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/logs/chainsaw.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
           .screens {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/screens/amonite.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
     .contact_tool {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 20px;
    background-image: url(images/drill.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
      .knot {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/knot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
        .clamp {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/clamp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
       .bus {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/buses.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
          .flash {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/flash.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
         .torch {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/torch.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
              .protractor {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/protractor.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
              .mahl {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/mahl.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                    .balls {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/balls.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                   .baguette {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/baguette.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                        .airbrush {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/airbrush.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 25.5%;    
}
                            .stars {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/stars.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
                             .tape {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/tape.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
                                 .pimms {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/pimms.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
     .trowel {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/trowel.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
        .blades {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/blades.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
         .signs {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/signs.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
           .bentley {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/bentley.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
  
  
    
    
	
/*  TOOLS END */
    
 /*  GALLERY  */

.gallery {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 00%;
    z-index: 35;
    position: relative;
}
    .gallery_image {
    flex-basis: 46%;
    margin-bottom: -4px;
  
  
}
    
     .gallery_image img{
      border-radius:0px;
  
}
    
	
/*  GALLERY END */

/*  PORTFOLIO  */  
    
    .top_folio_image {
    width: 100%;
    padding-bottom: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 00px; 
}
          .top_folio_image img{
        height:auto;
        
   
}
    .folio_desc_container {
    width: 80%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: 15%;
    text-align: left;
    display: flex;
    vertical-align: top;
   
    
}
    .folio_desc_no {
    height: auto;
    width: 24%;
    margin-left: 0%;
    padding-right: 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
       
    
    
}    
    .folio_desc_no img{
      height: auto;
    object-fit: cover;
    width: 100%;
}
    .folio_desc_heading {
    width: 25%;
    height: auto;
    margin-left: 0%;
    margin-top: -6px;
    padding-right: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
      
}
    
    .folio_desc_sub_heading {
    width: auto;
    margin-left: 2%;
    margin-top: -6px;
    padding-left: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
       
   
    
}
    
     .vert_rule {
    border-left: thin solid #C3BDB0;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 20px;
    vertical-align: top;    
}
    .horoz_rule {
    border-top: thin solid #C3BDB0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    vertical-align: top;    
}
    .para_heading {
    text-align: left;
    line-height: 100%;
    font-size: 3em;
    padding-bottom: 15px;
}
    .folio_desc_copy {
    width: 70%;
    margin-right: auto;
    margin-left: 15%;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    columns: 2;
    column-gap: 30px;
    border-bottom: thin solid #C3BDB0;
    padding-bottom: 40px;
}
    .folio_image_container {
    width: 72%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    vertical-align: top;
    margin-top: 00px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 30px;
            }
    
     .folio_image_wrapper {
    flex-basis: 47%;
    margin-right: 1.5%;
    margin-left: 1.5%;
    margin-bottom: 30px;
         
    
            }
    
     .folio_image {
    overflow: hidden; 
         padding:10px;
         
    
    
}
    .folio_image img {
    transition: transform .75s ease;
    display: block;    
    
}
    
    .folio_image img:hover {
    transform: scale(1.05);
    
   
}
    .folio_image_arrow {
    margin-top: 8px;
    margin-right: 5px;
    width: 12px;
    height:12px;
    background-image: url(images/arrow.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 12px 12px;
    background-position: 50% 50%;
    vertical-align: top;
}
     .folio_image_text {
    margin-top: 5px;
    display: inline-block;
    vertical-align: top;
        
}
    
    
    
        
        
    /*  PORTFOLIO END */ 
    
     /*  CONTACT */ 
    
    
    .contact_copy
{
     width: 50%;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
   overflow-x: hidden;
    padding-bottom: 60px;
    display: inline-block;
    text-decoration: none !important;
}
    
        .contact_copy hover
{    
    text-decoration: none !important;
}
    
    /*  CONTACT END*/ 


/*  ___________________________  MAIN BODY END  ______________________*/


/*  FOOTER  */
        
.footer {
    margin-top: 50px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background-color: #003213;
    
}

.footer_copyright {
	margin-left: 10%;
	margin-bottom: 22px;
	display: block;
	vertical-align: top;
}


/*  FOOTER END  */

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}	


}

/* Media Query for Ipad LANDSCAPE 769 to 1024* iphone 11 landscape /

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media only screen and (min-width : 769px) and (max-width : 1024px) {




body{
    background-color: #d8d4cc;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px!important;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px!important;
    
}
.grid_container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    /* [disabled]max-width: 1200px; */
  
}
    
     h1 {
    font-size: 14px!important;
    
   
    
}
.bebas {
    font-family: 'bebas';
    -webkit-transform-style: preserve-3d;
    text-decoration: none !important;
    letter-spacing: 4px;
    font-weight: normal !important;
}
    
.no_spacing {
        letter-spacing: 0px;
}
.gotham_book {
	font-family: 'gotham_book';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

.gotham_med {
	font-family: 'gotham_med';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}
    
.gotham_bold {
	font-family: 'gotham_bold';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

._8 {
	line-height: 18px;
	font-size: 8px;
	text-decoration: none !important;
}
._10 {
	line-height: 18px;
	font-size: 10px;
	text-decoration: none !important;
}


._12 {
	line-height: 18px;
	font-size: 12px;
	text-decoration: none !important;
}
    
._14 {
	line-height: 19px;
	font-size: 14px;
	text-decoration: none !important;
}


._16 {
	line-height: 22px;
	font-size: 16px;
	text-decoration: none !important;
}

._18 {
	line-height: 24px;
	font-size: 1.em;
	text-decoration: none !important;
}
    ._20 {
	line-height: 26px;
	font-size: 20px;
	text-decoration: none !important;
}
    ._18_bull {
	line-height: 32px;
	font-size: 18px;
	text-decoration: none !important;
}
    ._20_bull {
	line-height: 34px;
	font-size: 20px;
	text-decoration: none !important;
}


._22 {
	line-height: 30px;
	font-size: 22px;
	text-decoration: none !important;
}
._24 {
	line-height: 24px;
	font-size: 24px;
	text-decoration: none !important;
}
._30 {
	line-height: 34px;
	font-size: 30px;
	text-decoration: none !important;
}
    
._32 {
	line-height: 38px;
	font-size: 32px;
	text-decoration: none !important;
}
._36 {
	line-height: 48px;
	font-size: 36px;
	text-decoration: none !important;
}
    ._42 {
	line-height: 48px;
	font-size: 38px;
	text-decoration: none !important;
}
._48 {
    line-height: 140%;
    font-size: 1.9em;
    text-decoration: none !important;
}
._55 {
	line-height: 65px;
	font-size: 55px;
	text-decoration: none !important;
}    
._64 {
	line-height: 78px;
	font-size: 64px;
	text-decoration: none !important;
}
._72 {
   line-height: 40%;
    font-size: 1.7em;
    text-decoration: none;
}
    ._100 {
   line-height: 90%;
    font-size: 2.7em;
    text-decoration: none;
}
.centred {
	text-align: center;
}
.white {
	color: #ffffff;
	text-decoration: none !important;
}
    
.black {
	color: #000000;
	text-decoration: none !important;
}
 
.biege {
	color: #d2c095;
	text-decoration: none !important;
}
    
.red {
	color: #ea6052;
	text-decoration: none !important;
}
.green {
	color: #00260A;
	text-decoration: none !important;
}

a:hover, a:link, a:active
{
    text-decoration: none !important;
    color: #ea6052;
}
    
    a:visited
{
    text-decoration: none !important;
    color: #000000;
}
    
    p {
    margin-top: 0.25em;
    /* [disabled]margin-right: 0.25em; */
    /* [disabled]margin-left: 0.25em; */
    margin-bottom: 0.25em;
}
    



/*  HEADER  */

.width_wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #003213;
    margin-top: 40px!important;
}
  .header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #00260A;
    z-index: 10;
}  

.charlie_croker_logo {
    width: 250px;
    height: 120px;
    background-image: url(images/charlie_croker_logo_2.png);
    background-size: 80% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    margin-right: auto;
    margin-left: 5%;
    background-position: 0% 38px;
    border-width: thin;
    border-right-style: solid;
    border-right-color: #D2C095;
  display: inline-block;
}
        .insta {
	width: 100%;
	height: 118px;
	background-image: url(images/insta.png);
	background-size: 45px auto;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-right: auto;
	margin-left: -100px;
	background-position: 50% 37px;
	border-width: none;
	border-right-style: none;
	border-right-color: none;
	display: inline-block;
	z-index: 995;
    position: absolute;
	
}
    .newmenu {
        z-index: 85;
}
    
    .insta a{
    background: url(https://www.instagram.com/charliecrokerbespoke);
        position: absolute;
}
       .insta_iphone {
    display:none;
   
        
}
     .top_right_menu {
	position: fixed;
	width: 100px;
	top: 0px;
	z-index: 85;
	right: 15px;
	height: 30px;
	    
}  
    
    .header_strapline {
    width: 30%;
    display: inline-block;
    margin-top: 43px;
    margin-left: 20px;
}


.iphone_menu {
	display: none;
}



:target:before {
  content:"";
  display:block;
  height:130px; /* fixed header height*/
  margin:-130px 0 0; /* negative fixed header height */
}

/*  HEADER END  */
    
/*  NEW MENU*/
    

html, body {
    overflow-x: hidden;
    height: 100%;
}


.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    top:0;
    width: 220px;
    margin-top: 00px;
    padding-top:00px;
    transform: translateX(270px);
    transition: transform 250ms ease-in-out;
    background-color: rgb(0 38 10 / 0.7);
}
.sidebarMenuInner{
    margin-top:-0px;
    margin-left:-5px;
    padding-top:130px;
    
}
.sidebarMenuInner li{
    list-style: none;   
    padding-left: 00px;
    padding-top: 10px;
    cursor: pointer;
    width: 180px;
    
}
.sidebarMenuInner li span{
    display: block;    
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
	color: #d2c095;	
	cursor: pointer;
	text-decoration: none;
    font-weight: 300;
}
    .sidebarMenuInner li a:hover{
	color: #FF5308;	
	
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 36px;
    right: 50px;
    height: 45px;
    width: 45px;
    padding:5px;
    border-radius: 30px;
	background-color: #EB5F52; 
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 2px;
    width: 70%;
    background-color: #d2c095;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 7px;
    margin-left: 5px
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    margin-left: 5px;
    margin-top: 7px;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 7px;
    margin-left: 5px
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 15px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}
    
    /*  NEW MENU*/


/* ------------------------ MAIN BODY-------------------------  */

.editable_body_content {
	
}
.main_body_content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
}

/*  TOP SLIDER  */

.top_slider {
	width: 100%;
}
    
.top_slider_width_wrapper {
    width: 100%;
    position: relative;
    top: 00px;
    margin-right: auto;
    margin-left: -0px;
    z-index: -100;
}
    
    .contact_spacer {
    width: 100%;
    margin-top: 00px;
}	

.top_slider2 {
	width: 100%;
	z-index: 0;
	position: relative;
	top: 0px;
	height: auto;
	max-width: 1200px;
	right: 0px;
	left: 0px;
	margin-right: auto;
	margin-left: auto;
}

.top_slider_container {
    width: 100%;
    padding-bottom: 57%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 00px;
  
}
    
    #ccintroanim_hype_container{
     border-radius:0px;
}
    
 
    


/*  TOP SLIDER END */
    
/*  MAIN  */

.middle_wrapper {
	width: 100%;
}
    
.heading {
    width: 30%;
    padding-top: 100px;
    padding-right: 3%;
    margin-right: auto;
    margin-left: 8%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    
}
    
    
.intro_copy {
    width: 50%;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
    overflow-x: hidden;
   
    padding-bottom: 60px;
    display: inline-block;
  
}	
    
    .two_col {
   columns: 2;
   column-gap: 40px;
  -moz-columns: 2;
  -moz-column-gap: 40px;
  -webkit-columns: 2;
  -webkit-column-gap: 40px;
  }
    p {
  
  break-inside: avoid;
}
    
          .products {
    width: 90%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: 5%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
/*  MAIN END */
    
     /*  TOOLS  */

.tools {
    width: 70%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -100px;
    background-image: url(images/stilson.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
    .vane {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/vane/french_curve.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
        .chainsaw {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/logs/chainsaw.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
           .screens {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/screens/amonite.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
     .contact_tool {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 20px;
    background-image: url(images/drill.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
      .knot {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/knot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
        .clamp {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/clamp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
       .bus {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/buses.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
          .flash {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/flash.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
         .torch {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/torch.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
              .protractor {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/protractor.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
               .mahl {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/mahl.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                    .balls {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/balls.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                   .baguette {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/baguette.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                        .airbrush {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/airbrush.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 25.5%;    
}
                            .stars {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/stars.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
                             .tape {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/tape.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
                                 .pimms {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/pimms.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
     .trowel {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/trowel.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
           .blades {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/blades.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
              .signs {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/signs.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
                    .bentley {
	width: 50%;
	margin-top: 100px;
	margin-right: auto;
	margin-left: 5%;
	background-image: url(images/bentley.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 30.5%;    
}
  
  
    
    
	
/*  TOOLS END */
    
 /*  GALLERY  */

.gallery {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 00%;
    z-index: 35;
    position: relative;
}
    .gallery_image {
    flex-basis: 29%;
    margin-bottom: -4px;
  
  
}
    
     .gallery_image img{
      border-radius:0px;
  
}
    
	
/*  GALLERY END */

/*  PORTFOLIO  */  
    
    .top_folio_image {
    width: 100%;
    padding-bottom: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 00px; 
}
      .top_folio_image img{
        height:auto;
          max-width:100%;
   
}
    .folio_desc_container {
    width: 80%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: 10%;
    text-align: left;
    display: flex;
    vertical-align: top;
}
    .folio_desc_no {
    height: 152px;
    width: 33%;
    margin-left: 0%;
    padding-right: 4%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    
    
}    
    .folio_desc_no img{
    height: auto;
    object-fit: cover;
    width: 100%;

}
    .folio_desc_heading {
    width: 32%;
    height: auto;
    margin-left: 0%;
    margin-top: -6px;
    padding-right: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
    
    .folio_desc_sub_heading {
    width: auto;
    margin-left: 2%;
    margin-top: -6px;
    padding-left: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
   
    
}
    
     .vert_rule {
    border-left: thin solid #C3BDB0;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 20px;
    vertical-align: top;    
}
    
        .horoz_rule {
    border-top: thin solid #C3BDB0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    vertical-align: top;    
}
       .para_heading {
      text-align: left;  
}
    .folio_desc_copy {
    width: 80%;
    margin-right: auto;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    columns: 2;
    column-gap: 30px;
    border-bottom: thin solid #C3BDB0;
    padding-bottom: 40px;
    -moz-columns: 2;
  -moz-column-gap: 40px;
  -webkit-columns: 2;
  -webkit-column-gap: 40px;
}
    .folio_image_container {
    width: 82%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    vertical-align: top;
    margin-top: 00px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 30px;
            }
    
     .folio_image_wrapper {
    flex-basis: 47%;
    margin-right: 1.5%;
    margin-left: 1.5%;
    margin-bottom: 30px;
         
    
            }
    
     .folio_image {
    overflow: hidden;
         padding:12px;
         
    
    
}
    .folio_image img {
    transition: transform .75s ease;
    display: block;    
    
}
    
    .folio_image img:hover {
    transform: scale(1.05);
    
   
}
    .folio_image_arrow {
    margin-top: 8px;
    margin-right: 5px;
    width: 12px;
    height:12px;
    background-image: url(images/arrow.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 12px 12px;
    background-position: 50% 50%;
    vertical-align: top;
}
     .folio_image_text {
    margin-top: 5px;
    display: inline-block;
    vertical-align: top;
        
}
     /*  CONTACT */ 
    
    
    .contact_copy
{
     width: 50%;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
   overflow-x: hidden;
    padding-bottom: 60px;
    display: inline-block;
    text-decoration: none !important;
}
    
        .contact_copy hover
{    
    text-decoration: none !important;
}
    
    /*  CONTACT END*/ 
    
    
    
        
        
    /*  PORTFOLIO END */ 


/*  ___________________________  MAIN BODY END  ______________________*/


/*  FOOTER  */
        
.footer {
    margin-top: 50px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background-color: #003213;
    
}

.footer_copyright {
	margin-left: 10%;
	margin-bottom: 22px;
	display: block;
	vertical-align: top;
}


/*  FOOTER END  */

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}	

}

/* Desktop Layout: 1025 and above */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

@media only screen and (min-width: 1025px) {
	
body{
    background-color: #d8d4cc;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px!important;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px!important;
    
}
  
    h1 {
    font-size: 14px!important;
    
   
    
}
    
.grid_container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    /* [disabled]max-width: 1200px; */
    min-width: 1026px;
   
    
}
.bebas {
    font-family: 'bebas';
    -webkit-transform-style: preserve-3d;
    text-decoration: none !important;
    letter-spacing: 4px;
    font-weight: normal !important;
}
    
.no_spacing {
        letter-spacing: 0px;
}
.gotham_book {
	font-family: 'gotham_book';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

.gotham_med {
	font-family: 'gotham_med';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}
    
.gotham_bold {
	font-family: 'gotham_bold';
    -webkit-transform-style: preserve-3d;
	text-decoration: none !important;
}

._8 {
	line-height: 18px;
	font-size: 8px;
	text-decoration: none !important;
}
._10 {
	line-height: 18px;
	font-size: 10px;
	text-decoration: none !important;
}


._12 {
	line-height: 18px;
	font-size: 12px;
	text-decoration: none !important;
}
    
._14 {
	line-height: 19px;
	font-size: 14px;
	text-decoration: none !important;
}


._16 {
	line-height: 22px;
	font-size: 16px;
	text-decoration: none !important;
}

._18 {
	line-height: 24px;
	font-size: 18px;
	text-decoration: none !important;
}
    ._20 {
	line-height: 26px;
	font-size: 20px;
	text-decoration: none !important;
}
    ._18_bull {
	line-height: 32px;
	font-size: 18px;
	text-decoration: none !important;
}
    ._20_bull {
	line-height: 34px;
	font-size: 20px;
	text-decoration: none !important;
}


._22 {
	line-height: 30px;
	font-size: 22px;
	text-decoration: none !important;
}
._24 {
	line-height: 24px;
	font-size: 24px;
	text-decoration: none !important;
}
._30 {
	line-height: 34px;
	font-size: 30px;
	text-decoration: none !important;
}
    
._32 {
	line-height: 38px;
	font-size: 32px;
	text-decoration: none !important;
}
._36 {
	line-height: 48px;
	font-size: 36px;
	text-decoration: none !important;
}
    ._42 {
	line-height: 48px;
	font-size: 38px;
	text-decoration: none !important;
}
._48 {
    line-height: 140%;
    font-size: 2.2em;
    text-decoration: none !important;
}
._55 {
	line-height: 65px;
	font-size: 55px;
	text-decoration: none !important;
}    
._64 {
	line-height: 78px;
	font-size: 64px;
	text-decoration: none !important;
}
._72 {
    line-height: 78px;
    font-size: 72px;
    text-decoration: none;
}
    
._100 {
    line-height: 90px;
    font-size: 90px;
    text-decoration: none;
}
    
.para {
    mnargin-top: -50px;
}
.centred {
	text-align: center;
}
.white {
	color: #ffffff;
	text-decoration: none !important;
}
    
.black {
	color: #000000;
	text-decoration: none !important;
}
 
.biege {
	color: #d2c095;
	text-decoration: none !important;
}
    
.red {
	color: #ea6052;
	text-decoration: none !important;
}
.green {
	color: #00260A;
	text-decoration: none !important;
}

a:hover, a:link, a:active
{
    text-decoration: none !important;
    color: #ea6052;
}
    
    a:visited
{
    text-decoration: none !important;
    color: #000000;
}
    
    p {
    margin-top: 0.25em;
    /* [disabled]margin-right: 0.25em; */
    /* [disabled]margin-left: 0.25em; */
    margin-bottom: 0.25em;
}
    



/*  HEADER  */

.width_wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #003213;
    margin-top: 40px!important;
}
  .header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #00260A;
    z-index: 10;
}  

.charlie_croker_logo {
    width: 350px;
    height: 118px;
    background-image: url(images/charlie_croker_logo_2.png);
    background-size: 80% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    margin-right: auto;
    margin-left: 10%;
    background-position: 0% 25px;
    border-width: thin;
    border-right-style: solid;
    border-right-color: #D2C095;
  display: inline-block;
    
}
    
    .charlie_croker_logo a{
    background: url(../index.html);
}
    
     .insta {
	width: 100%;
	height: 118px;
	background-image: url(images/insta.png);
	background-size: 45px auto;
	background-repeat: no-repeat;
	vertical-align: top;
	margin-right: auto;
	margin-left: -110px;
	background-position: 50% 37px;
	border-width: none;
	border-right-style: none;
	border-right-color: none;
	display: inline-block;
	z-index: 995;
    position: absolute;
	
}
    .newmenu {
        z-index: 85;
}
    
    .insta a{
    background: url(https://www.instagram.com/charliecrokerbespoke);
        position: absolute;
}
       .insta_iphone {
    display:none;
   
        
}
     .top_right_menu {
	position: fixed;
	width: 100px;
	top: 0px;
	z-index: 85;
	right: 50px;
	height: 30px;
	    
}  
    
    .header_strapline {
    width: 40%;
    display: inline-block;
    margin-top: 53px;
    margin-left: 20px;
}
 
    



.iphone_menu {
	display: none;
}

:target:before {
  content:"";
  display:block;
  height:130px; /* fixed header height*/
  margin:-130px 0 0; /* negative fixed header height */
}

/*  HEADER END  */
    
      /*  NEW MENU*/
    

html, body {
    overflow-x: hidden;
    height: 100%;
}


.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    top:0;
    width: 270px;
    margin-top: 00px;
    padding-top:00px;
    transform: translateX(270px);
    transition: transform 250ms ease-in-out;
    background-color: rgb(0 38 10 / 0.7);
}
.sidebarMenuInner{
    margin:0;
    padding-top:100px;
    
    
    
}
.sidebarMenuInner li{
    list-style: none;   
    padding-left: 00px;
    padding-top: 20px;
    cursor: pointer;
    line-height: 1.4;
    width: 200px;
    
    
}
.sidebarMenuInner li span{
    display: block;    
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
	color: #d2c095;	
	cursor: pointer;
	text-decoration: none;
    font-weight: 300;
}
    .sidebarMenuInner li a:hover{
	color: #FF5308;	
	
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 36px;
    right: 50px;
    height: 45px;
    width: 45px;
    padding:5px;
    border-radius: 30px;
	background-color: #EB5F52; 
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 2px;
    width: 70%;
    background-color: #d2c095;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 7px;
    margin-left: 5px
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    margin-left: 5px;
    margin-top: 7px;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 7px;
    margin-left: 5px
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 13px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -6px;
}
    
    /*  NEW MENU*/

/* ------------------------ MAIN BODY-------------------------  */

.editable_body_content {
	
}
.main_body_content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
}

/*  TOP SLIDER  */

.top_slider {
	width: 100%;
}
    
.top_slider_width_wrapper {
    width: 100%;
    position: relative;
    top: 00px;
    margin-right: auto;
    margin-left: -0px;
    z-index: -100;
}
    
    .contact_spacer {
    width: 100%;
    margin-top: 00px;
}	

.top_slider2 {
	width: 100%;
	z-index: 0;
	position: relative;
	top: 0px;
	height: auto;
	max-width: 1200px;
	right: 0px;
	left: 0px;
	margin-right: auto;
	margin-left: auto;
}

.top_slider_container {
    width: 100%;
    padding-bottom: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 00px;
  
}
    
    #ccintroanim_hype_container{
     border-radius:0px;
}
    
 
    


/*  TOP SLIDER END */
    
/*  MAIN  */

.middle_wrapper {
	width: 100%;
}
    
.heading {
    width: 25%;
    padding-top: 80px;
    margin-right: auto;
    margin-left: 15%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
    .sub_heading {
    width: 80%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: 10%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
    
    
.intro_copy {
    width: 45%;
    padding-top: 140px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
   overflow-x: hidden;
    padding-bottom: 80px;
    display: inline-block;
    
}	
    
     .two_col {
   columns: 2;
   column-gap: 40px;
  -moz-columns: 2;
  -moz-column-gap: 40px;
  -webkit-columns: 2;
  -webkit-column-gap: 40px;
 
}
p {
  
  break-inside: avoid;
}
    
    .products {
    width: 80%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-right: auto;
    margin-left: 10%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
    
/*  MAIN END */
    
     /*  TOOLS  */

.tools {
    width: 70%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -100px;
    background-image: url(images/stilson.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
    .vane {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/vane/french_curve.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
        .chainsaw {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/logs/chainsaw.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
           .screens {
    width: 80%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: -30px;
    background-image: url(images/screens/amonite.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
   .contact_tool {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 20px;
    background-image: url(images/drill.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
     .knot {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/knot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
      .clamp {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/clamp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
      .bus {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/buses.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
       .flash {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/flash.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
        .torch {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/torch.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
           .protractor {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/protractor.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 25.5%;
    
}
    
              .mahl {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/mahl.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                .balls {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/balls.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
                   .baguette {
    width: 80%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 00px;
    background-image: url(images/baguette.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -15% 0%;
    margin-bottom: 000px;
    padding-bottom: 35.5%;
    
}
    
                     .airbrush {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/airbrush.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 25.5%;    
}
    
                         .stars {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/stars.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
                             .tape {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/tape.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
                               .pimms {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/pimms.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 35.5%;    
}
    
     .trowel {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 00px;
	background-image: url(images/trowel.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
           .blades {
	width: 80%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: 10%;
	background-image: url(images/blades.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 50.5%;    
}
    
              .signs {
	width: 50%;
	margin-top: 100px;
	margin-right: auto;
	margin-left: 5%;
	background-image: url(images/signs.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 30.5%;    
}
    
                .bentley {
	width: 50%;
	margin-top: 100px;
	margin-right: auto;
	margin-left: 5%;
	background-image: url(images/bentley.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: -0% 0%;
	margin-bottom: -50px;
	padding-bottom: 30.5%;    
}
  
  
    
    
	
/*  TOOLS END */
    
 /*  GALLERY  */

.gallery {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-radius: 00%;
	z-index: 35;
	position: relative;
	background-color: none;
	padding-bottom: 85px;
}
    .gallery_image {
    flex-basis: 29%;
    margin-bottom: -4px;
  
  
}
    
     .gallery_image img{
      border-radius:0px;
  
}
    
	
/*  GALLERY END */

/*  PORTFOLIO  */  
    
    .top_folio_image {
	width: 100%;
	padding-bottom: 56%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 00px;
        
}
 
    .folio_desc_container {
    width: 60%;
    padding-top: 60px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    display: flex;
    vertical-align: top;
        min-width:750px;
}
    .folio_desc_no {
    height: 152px;
    width: 33%;
    margin-left: 0%;
    padding-right: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    
    
}    
    .folio_desc_no img{
    height: 100%;
}
    .folio_desc_heading {
    width: 28%;
    height: auto;
    margin-left: 0%;
    margin-top: -6px;
    padding-right: 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}
    
    .folio_desc_sub_heading {
    width: auto;
    margin-left: 2%;
    margin-top: -6px;
    padding-left: 1%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
   
    
}
    
     .vert_rule {
    border-left: thin solid #C3BDB0;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 00px;
    vertical-align: top;    
}
    
    .horoz_rule {
    border-top: thin solid #C3BDB0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    vertical-align: top;    
}
    
     .para_heading {
      text-align: left;  
}
    .folio_desc_copy {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: left;
    display: block;
    vertical-align: top;
    columns: 3;
    column-gap: 30px;
    border-bottom: thin solid #C3BDB0;
    padding-bottom: 40px;
    min-width: 750px;
    
}
    .folio_image_container {
    width: 62%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    vertical-align: top;
    margin-top: 00px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 30px;
    min-width: 750px!important;
     
}
    
     .folio_image_wrapper {
    flex-basis: 47%;
    margin-right: 1.5%;
    margin-left: 1.5%;
    margin-bottom: 30px;
         
    
}
    
     .folio_image {
	overflow: hidden;
	padding: 25px;
	
}
    .folio_image img {
    transition: transform .75s ease;
    display: block;    
    
}
    
    .folio_image img:hover {
    transform: scale(1.05);
    
   
}
    .folio_image_arrow {
    margin-top: 8px;
    margin-right: 5px;
    width: 12px;
    height:12px;
    background-image: url(images/arrow.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 12px 12px;
    background-position: 50% 50%;
    vertical-align: top;
}
     .folio_image_text {
    margin-top: 5px;
    display: inline-block;
    vertical-align: top;
        
}
    
    .image {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%; 
   
     
}
    
    
    
        
        
    /*  PORTFOLIO END */ 
    
    /*  CONTACT */ 
    
    
    .contact_copy
{
     width: 50%;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
   overflow-x: hidden;
    padding-bottom: 60px;
    display: inline-block;
    text-decoration: none !important;
}
    
        .contact_copy hover
{    
    text-decoration: none !important;
}
    
    /*  CONTACT END*/ 


/*  ___________________________  MAIN BODY END  ______________________*/


/*  FOOTER  */
        
.footer {
    margin-top: 50px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background-color: #003213;
    
}

.footer_copyright {
	margin-left: 10%;
	margin-bottom: 22px;
	display: block;
	vertical-align: top;
}


/*  FOOTER END  */
    
    #navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
    
    

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}

}

/*  FOOTER END */

/*  IMAGE FADE UP  */

/*  IMAGE FADE UP END */