/*****
*
*		Description:	Styling for the shopp plugin
*
*		INDEX:
*			- MOBILE MENU						: styling controlling the general settings for the mobile menu
*			- MOBILE NAVIGATION STYLING			: styles for the mobile menu navigation
*			- MOBILE - REGION					: styling for the region selector: mobile view
*			- SEARCH INPUT						: styling for the mobile search area
*			- MENU ICONS						: styling for the menu icons
*			- SIGN UP BUTTON					: signup menu button styles
*			- SIDE MENU FORM					: contact form styles for the mobile menu
*			- ERROR CONTAINER - STYLING			: style errors for the form in the mobile menu
*****/

/**** MOBILE MENU ****/

.mobile-menu-side {
	  float:left;
	  width:100%;
	  display:none;
	  left:0;
	  height:100%;
	  bottom:0;
	  position:absolute;
	  z-index:0; }
	  
.mobile-menu-side.openmenu {
	display:block;
	left:0;
	top:0;
	height:100%;
	bottom:0; }
	  
#mobile-menu-button { display:none; }
.hide-extra { background:#383838; z-index: 0; right: 0; top: 0; bottom:0; height:100%;overflow:hidden; }
.mobile-menu-side > .full-width { width:80%; -webkit-overflow-scrolling : auto;-webkit-overflow-scrolling : touch; overflow:auto; }
.row.centre#logo-mobile-centre { width:40%; }
.mobile-menu-logo { padding-top:14%; padding-bottom:14%; }
.banner-wrap.repos-banner { display:none; }

/**** MOBILE NAVIGATION STYLING ****/

.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation { display:block; float:left; margin:0; padding:0; list-style-type:none; list-style:none; width:100%; }
.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li { display:block; float:left; margin:0; padding:3% 0 3% 0; list-style-type:none; list-style:none; width:100%; border-bottom:1px solid #494949; }
.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li:hover { background:#DA5B5B; border-bottom:1px solid #DA5B5B; }
.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li a { color:white; font-weight:200; text-transform:uppercase; display:block; float:left; width:66%; padding-right:15%; padding-left:7%; }

.outer-body-wrap.open { box-shadow:-4px -3px 14px -3px #000000; -webkit-box-shadow:-4px -3px 14px -3px #000000; -moz-box-shadow:-4px -3px 14px -3px #000000; overflow:hidden; top:0; height:100%; bottom:0; }

.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li ul.sub-menu { display:none; float:left; padding:0; margin:0; list-style:none; list-style-type:none; width:80%; padding:2% 10% 2% 10%; }
.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li ul.sub-menu li { display:block; float:left; padding:0; margin:0; list-style:none; list-style-type:none; border-bottom:none; }

.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li span.mobile-sub-counter { display:block; float:left; border-radius:25px; -moz-border-radius:25px; width:25px; height:24px; text-align:center; background:#2A2A2A; color:white; cursor:pointer; }
.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li span.mobile-sub-counter:hover { background:white; color:black; }

/** prevent selection on click of counter element **/

.mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li, .mobile-menu-side .menu-mobile-navigation-container #menu-mobile-navigation li a, span.mobile-sub-counter {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

/**** SEARCH INPUT ****/
.mobile-menu-side .full-width.search-bar form label { display:none; }
.mobile-menu-side .full-width.search-bar { background:#EFEFEF;margin-top:0;margin-bottom:0;padding:0; display:none; }
.mobile-menu-side .full-width.search-bar form { display:block; float:left; width:100%; margin:0; padding:0; }
.mobile-menu-side .full-width.search-bar input { background:none; display:block; float:left; width:75%; border:none; padding:4% 4% 4% 5%; margin:0 2% 0 0; font-style:italic; color:#B3B3B3; }
.mobile-menu-side .full-width.search-bar input[type='submit'] { display:block; float:left; width:18px; height:18px; cursor:pointer; background:url(../images/icon-search.png) center center no-repeat;text-indent:-9999px; margin-top:1.5%; border:none; }
.mobile-menu-side .full-width.search-bar > .row.centre, .mobile-menu-side .search-bar .row.centre form > div { margin:0; width:100%; float:left; max-width:100%; }
.site-search-right { float:right; width:30%; }
.site-search-right label { display:block; float:left; color:white; text-transform:uppercase; padding-right:2%; font-size:0.7em; font-weight:200; margin-top:8%; margin-left:6%; }

/***** MENU ICONS ******/

#icon-mobile { background:#474747; margin-bottom:2%; }
#search-mobile-icon { float:right; width:18px; height:18px; background:url(../images/icon-search.png) center center no-repeat #2F2E2E; width:18px; height:18px; padding:7%; float:right; cursor:pointer; }
#search-mobile-icon:hover { background:url(../images/icon-search-hover.png) center center no-repeat #5A5A5A; padding:7%; }

/***** SIGN UP BUTTON ******/

.button-wrap { float:left; }
.button-wrap#signup-button { margin-top:7%; background:url(../images/icon-signup.png) 7% 11px no-repeat #2A2A2A; width:100%; color:#838383; text-align:center; text-transform:uppercase; font-weight:300; cursor:pointer; }
.button-wrap#signup-button a { color:#838383; display:block; float:left; width:100%; padding-top:3%; padding-bottom:2%; height:30px; }
.button-wrap#signup-button:hover { background:url(../images/icon-signup-hover.png) 7% 11px no-repeat #444444; }
.button-wrap#signup-button a:hover { color:#ffffff; }

.button-wrap#cart-button { margin-top:4%; background:url(../images/icon-cart.png) 7% 11px no-repeat #2A2A2A; width:100%; color:#838383; text-align:center; text-transform:uppercase; font-weight:300; cursor:pointer; }
.button-wrap#cart-button a { color:#838383; display:block; float:left; width:100%; padding-top:3%; padding-bottom:2%; height:30px; }
.button-wrap#cart-button:hover { background:url(../images/icon-cart-hover.png) 7% 11px no-repeat #444444; }
.button-wrap#cart-button a:hover { color:#ffffff; }

.button-wrap#my-account-button { margin-top:4%; background:url(../images/icon-account.png) 7% 11px no-repeat #2A2A2A; width:100%; color:#838383; text-align:center; text-transform:uppercase; font-weight:300; cursor:pointer; }
.button-wrap#my-account-button a { color:#838383; display:block; float:left; width:100%; padding-top:3%; padding-bottom:2%; height:30px; }
.button-wrap#my-account-button:hover { background:url(../images/icon-account-hover.png) 7% 11px no-repeat #444444; }
.button-wrap#my-account-button a:hover { color:#ffffff; }

/***** SIDE MENU FORM ******/

.full-width#mobile-contact { padding: 5% 7% 5% 7%; width:86%; background:#474747; margin:8% 0 2% 0; }
.full-width#mobile-contact h3 { font-size:1em; }
.full-width#mobile-contact form label { color:#AEAEAE; }
.full-width#mobile-contact form input.text, .full-width#mobile-contact form textarea { padding:3% 5% 2% 6%; position:relative; -webkit-appearance:none; border-radius:0; -moz-border-radius:0; }
.full-width#mobile-contact form input.text:focus, .full-width#mobile-contact form textarea:focus { outline: none; border:1px solid #77C2F0; box-shadow:inset 0px 0px 9px -1px #6ED1FC; -moz-box-shadow:inset 0px 0px 9px -1px #6ED1FC; -webkit-box-shadow:inset 0px 0px 9px -1px #6ED1FC; }
.full-width#mobile-contact form .form-row.full-width#submit-wrap { border-top:1px solid #7C7C7C; }
.full-width#mobile-contact form .form-row.full-width#submit-wrap input[type='submit'] { -webkit-appearance: none; background:#DA5B5B; color:white; border:none; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -ms-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; border-radius:0; -moz-border-radius:0; }
.full-width#mobile-contact form .form-row.full-width#submit-wrap input[type='submit']:hover { background:#E57373; }

/*** ERROR CONTAINER - STYLING ***/

.full-width#mobile-contact form  div.wpcf7-validation-errors { float:left; width:90%; padding:4% 5% 4% 5%; display:block; border:none; margin:7% 0 3% 0; font-family:'Open Sans',sans-serif; font-weight:500; text-transform:uppercase; background:#DA5B5B; color:white; font-size:0.9em; line-height:1.3em; }
.full-width#mobile-contact form  span.wpcf7-not-valid-tip { display:block; float:left; width:94%; padding:2% 3% 2% 3%; text-align:center; background:#DA5B5B; color:white; font-size: 0.9em; text-transform: uppercase; margin:3% 0 3% 0; font-weight:500; }

/*********************************************************************************/

/************************ MEDIA QUERIES TABLET ***********************************/

/*********************************************************************************/
  
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	
	
}


/*********************************************************************************/

/************************ MEDIA QUERIES MOBILE ***********************************/

/*********************************************************************************/

@media only screen and (max-width:767px) {
	/** HEADER ELEMENTS **/
	
	#navigation { display:none; }
	.col_3.first#header-logo { width :30%; float:right; padding-top:3%; padding-bottom:5%; }
	
	#mobile-menu-button { display:block;float:left;width:30px;height:30px;background:url(../images/icon-hamburger.png) center center no-repeat; cursor:pointer; margin-top:4.5%; }
	#mobile-menu-button.clickMobile { display:block;float:left;width:30px;height:30px;background:url(../images/icon-hamburger-cross.png) center center no-repeat; cursor:pointer; }
	
	/***** SIDE MENU FORM ******/
	.full-width#mobile-contact h3 { font-size:1em; font-weight:200; padding:2% 0 3% 0; margin:0; }
	
	
	/*** FOOTER LOGO ***/
	
	.full-width#footer-wrap #footer-left #footer-links ul li { width:100%; }
	.full-width#footer-wrap #footer-left #footer-links ul li a { font-size:0.6em; }
	.full-width#footer-wrap #footer-left .footer-logo-wrap { width:75%; }
	.full-width#footer-wrap { padding-top:5%; padding-bottom:5%; }
	.full-width#footer-wrap #footer-right p.copy a { font-size:0.9em; }
	.full-width#footer-wrap #footer-right { width:20%; min-width:0; }
	.full-width#footer-wrap #footer-left #footer-links { width:100%; margin-left:0; padding-top:11%; }
	#footer-links { padding-left:0; border-left:0; }
	#percept-logo { margin-top:15px; }
	
}