/*   
Theme Name: Skinnovation Laser Clinic
Theme URI: www.skinnovation.com.au
Description: Custom wordpress Theme by Fritz Loho.
Author: Fritz Loho
Author URI: http://www.fritzloho.net
Template: twentythirteen
Version: 1.0
Tags: skinnovation
* 
* Copyright 2015, Fritz Loho
*/



@import url("../twentythirteen/style.css");
@import url("css/font-awesome.min.css");
@import url("css/base-fl.css");
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
/*

Text: #292c31 

Main color: #85714d
secondary color: #bc8c2f // gold

light green: #1abc9c 
dark green: #16a085

light blue: #3498db 
dark blue: #2980b9 

light pruple: #9b59b6 
dark pruple: #8239a1 

light red: #f1635e 
dark red: #d7413c 

*/

body { font-family: 'Open Sans', sans-serif; color: #292c31;}
.site, .navbar { max-width: 100%}
section, aside { padding: 2em 0;}

:focus { outline:  none}

h1, h2, h3 { text-transform: uppercase;}
h1 {font-size: 30px;}
h2 {font-size: 24px;}
h3 {font-size: 18px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}

a { color: #bc8c2f }
a span { display: none;}
blockquote { font-size: 14px; font-style: normal; font-weight: normal; margin: 0 0 10px 0;}
.columns p, .column p { text-align: justify}

.primary-color { background: #85714d; color: #FFFFFF }
.secondary-color { background: #bc8c2f; color: #FFFFFF }

.light-green { background: #1abc9c; color: #FFFFFF }
.dark-green { background: #16a085; color: #FFFFFF}

.light-blue { background: #3498db; color: #FFFFFF }
.dark-blue { background: #2980b9; color: #FFFFFF }

.light-purple { background: #9b59b6; color: #FFFFFF } 
.dark-purple { background: #8239a1; color: #FFFFFF }

.light-red { background: #f1635e; color: #FFFFFF }
.dark-red { background: #d7413c; color: #FFFFFF }


/* header 
------------------------------------------*/
.notifications { background: #292c31; color: #EEEEEE; padding: 0.25em 0; font-size: 0.85em; }
.notifications .text-left { margin-top: 5px;}
.notifications .top-text {   padding: 0 0 2px; margin: 0px 0 0 0; display: inline-block; font-size: 18px; vertical-align: bottom}
.fb a{ background: url(./images/icon-facebook.png) no-repeat 0 0; display: block; width: 25px; height: 25px; }
.ig a{ background: url(./images/icon-instagram.png) no-repeat 0 0; display: block; width: 25px; height: 25px; }

.header-branding { background: transparent; padding: 2em 0 1em; }
.logo-img { background: url(/wp-content/uploads/2021/04/SKINNOVATION-LOGO-NEW.png) no-repeat 0 0; display: block; width: 350px; height: 75px; background-size: 100%; }

/* Original logo */
/* .logo-img { background: url(./images/skinnovation-logo.png) no-repeat 0 0; display: block; width: 350px; height: 75px; background-size: 100%; } */ 



.search-bar a { margin: 0 10px 4px 0;}
.search-form { margin-top: 20px; display: inline-block; *display:inline; zoom: 1; display: none}

/* navigation 
------------------------------------------*/
.navbar { background: #FFFFFF; padding: 15px 0;}
.main-nav { padding: 1em 0; } 
ul.nav-menu { padding-right: 0;}
.nav-menu li { padding: 0 10px;}
.nav-menu li a { padding:5px 0; text-transform: uppercase; font-size: 14px; border-bottom: 2px solid #FFFFFF }
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus { border-bottom: 2px solid #bc8c2f; background: none;color:#292c31; }
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { color:#292c31; background: none; border-bottom: 2px solid #bc8c2f; font-style: normal; font-weight: 400}

.nav-menu .sub-menu, .nav-menu .children { border: 0}
    .sub-menu li a { font-weight: normal; border: 0; padding: 10px; text-transform: capitalize;}
    ul.nav-menu ul li:hover, ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, ul.nav-menu ul a:focus, .nav-menu ul ul a:focus{ background: #bc8c2f; color: #FFFFFF; border: 0;}
    .sub-menu .current-menu-item > a { color: #FFFFFF; border: 0}
    
/* banner 
------------------------------------------*/
.hero { background: #FFFFFF; height: auto;}
.entry-thumbnail img { width: 100%; }
#category-name { background: url(images/Homepage1.png) no-repeat; background-position: center; width: 100%; height: 350px; }
#category-name  .container { padding: 100px 0; width: 850px; margin: 0 auto;}
#category-name h1 { font-size: 50px; padding: 0; margin: 0; color: #FFFFFF;}


.sss { height: 0;margin: 0; padding: 0;position: relative;	display: block;	overflow: hidden;}
.ssslide {	width: 100%;	margin: 0;	padding: 0;	position: absolute;	top: 0;	left: 0;	display: none;	overflow: hidden;}
.ssslide img {	max-width: 100%;	height: auto;	margin: 0;	padding: 0;	position: relative;	display: block;}
.sssnext, .sssprev {	width: 25px;	height: 100%;	margin: 0;	position: absolute;	top: 0;	background: url('./images/arr.png') no-repeat;}
.sssprev {	left: 3%;	background-position: 0 50%;}
.sssnext {	right: 3%;	background-position: -26px 50%;}
.sssprev:hover, .sssnext:hover {	cursor: pointer;}

/* content homepage
------------------------------------------*/
.site-content .welcome .row, .site-content .products .row, .site-content .services .row { border-bottom: 0; padding: 0;}
.products img { height: 50px;}
.services h3 { text-align: center}
.services .columns { border: 1px solid #CCCCCC; background: #FFFFFF; padding: 5px;}
.services img { width: 100%; margin-top: 0;}
.services a.fasc-button { display: block; margin: 0 0 5px; text-align: center; text-transform: uppercase}
.partners { text-align: center}
.welcome { background: #f8f8f8 }

/* content general
------------------------------------------*/
.site-content h1, .site-content h2 { margin-top: 0;}
.site-content img.alignnone { display: block; clear: both; }
.site-content .row { border-bottom: 1px solid #f8f8f8; padding: 3em 0;}
.site-content .row:last-child { border: 0;} 


/* content faq
------------------------------------------*/
ol { margin: 0; padding: 0;}
li.faqs { background: #f8f8f8; padding: 10px; list-style: none; margin-bottom: 10px;  }
.questions { color: #292c31; display: block; cursor: pointer; position:relative  }
.questions:before { content: "\f0d7";  position: absolute; font-family: FontAwesome; font-size: 25px;top: -5px; right: 20px; }
.answers { padding: 10px 0; display: none;}

/* content prices
------------------------------------------*/
#priceDiv { display: none}

.priceTab {  margin: 40px 0 0px; padding: 0; list-style: none; text-align: center; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;} 
.priceTab li { display: inline-block; *display:inline; zoom: 1;  padding: 0 0;  margin: 0;}
.priceTab li a.cat-button { background: none;  display: block; padding: 8px 10px;  text-align: center;  text-decoration: none; cursor: pointer; font-weight: normal;  color: #292C31; }
.priceTab li a:hover { text-decoration: underline}
.priceTab li a.cat-button.current { color: #FFF; bordeR: 0;}



.price-group {  margin: 0 0 0px; padding: 0; list-style: none;} 
.price-group li { display: inline-block; *display:inline; zoom: 1;  padding: 0 0;  margin: 0;}
.price-group li a.tab-button { background: none;  display: block; padding: 8px 10px;  text-align: center;  text-decoration: none; cursor: pointer; font-weight: normal; border: 1px solid #CCC; border-bottom: 0; color: #292C31; }
.price-group li a:hover { text-decoration: underline}
.price-group li a.tab-button.current { color: #FFF; bordeR: 0;}

#priceDiv table { width: 100%; border-collapse: separate; border-spacing: 1; }
#priceDiv table tr:nth-child(even) { background: #F8F8F8;} 
#priceDiv table th { padding: 5px 10px; font-weight: 100; color: #FFFFFF;}
#priceDiv table td { padding: 5px 10px; font-weight: 100; border-top: 1px solid #F8F8F8}

.priceTab li a.green.current,.green li a.tab-button.current, table.table-green th { background: #16a085; }
.priceTab li a.blue.current, .blue li a.tab-button.current, table.table-blue th { background: #2980b9; }
.priceTab li a.purple.current, .purple li a.tab-button.current, table.table-purple th { background: #8239a1; }
.priceTab li a.red.current, .red li a.tab-button.current, table.table-red th { background: #d7413c; }





/* content contact us
------------------------------------------*/
.site-content .wpcf7-form input, .site-content .wpcf7-form select { width: 90%; border: 1px solid #EEEEEE; background: #f8f8f8}
.site-content .wpcf7-form textarea { width: 90%; border: 1px solid #EEEEEE; background: #f8f8f8; height: 100px;}
.site-content .wpcf7-form input[type=submit] { width: 60%; background: #bc8c2f; border-radius: 0; border: 0;}


.wpcf7-form .reqAppointment .preferredTime input, 
.wpcf7-form .reqAppointment .preferredTime select { width: 48%; border: 1px solid #EEEEEE; background: #f8f8f8; padding: 0 5px;}

div.wpcf7-mail-sent-ok, div.wpcf7-validation-errors{ border: 0}
div.wpcf7-response-output { margin: 0; padding: 10px;}

/* content cancel & refund
------------------------------------------*/
.cancellation-list { list-style-type: square;}
.cancellation-list li { margin-bottom: 20px;}


/* buttons 
------------------------------------------*/
.btn { margin: 0.25em 0; font-size: 12px; }
.btn.disp-block { display: block}
a.btn:visited { color: #FFFFFF} 

btn.light-green { background: #1abc9c; color: #FFFFFF }
btn.dark-green { background: #16a085; color: #FFFFFF}

btn.light-blue { background: #3498db; color: #FFFFFF }
btn.dark-blue { background: #2980b9; color: #FFFFFF }

btn.light-purple { background: #9b59b6; color: #FFFFFF } 
btn.dark-purple { background: #8239a1; color: #FFFFFF }

btn.light-red { background: #f1635e; color: #FFFFFF }
btn.dark-red { background: #d7413c; color: #FFFFFF }

/* footer 
------------------------------------------*/
aside { background: #3d4045; color: #EEEEEE; }
.footer-copyright { padding: 1em 0; text-align: left  }
.footer-copyright p { margin:  0; color: #EEEEEE;}
.site-footer a { color: #EEEEEE; font-size: 11px;}

.site-footer { background: #292c31; font-size:  0.85em; }
.site-footer .widget { width: 33%; margin: 0; text-align: left; font-size: 12px; }
.widget .widget-title { text-transform: uppercase; font-size: 12px; font-weight: 400; font-family: 'Open Sans', sans-serif; color: #ffffff; font-style: normal}
.widget .menu li { border-bottom: 1px solid #CCCCCC}
.widget .menu li a { color: #FFFFFF;} 
.widget .menu li a:hover { text-decoration: none; color: #CCCCCC;}

.tableFooter { border: 0;}
.tableFooter td { border: 0; padding: 0; font-size: 12px;}


/* contact form
------------------------------------------*/
.site-footer .wpcf7-form input { width: 90%; border: 0; background: #515459}
.site-footer .wpcf7-form textarea { width: 90%; border: 0; background: #515459; height: 70px;}
.site-footer .wpcf7-form input[type=submit] { width: 60%; background: #bc8c2f; border-radius: 0; }

/* subscription form
------------------------------------------*/
#subscription-form { padding: 20px 0; margin: 0; background: #EEEEEE; text-align: center}
#subscription-form input[type="submit"] {  background: #BC8C31; border-radius: 0; border: 0; padding: 7px 20px;}

/* OVERWRITE 
------------------------------------------*/
.site-content { padding: 0px 0;}
.hentry { padding: 0}
.post { margin: 3em 0;}
.entry-header, .entry-content, .entry-summary, .entry-meta { max-width: 1200px;} /* blog full width style*/
.entry-header, .entry-content {  padding: 0 20px; }
footer.entry-meta { border-bottom: 1px solid #000; padding-bottom: 3em !important;} 
.comments-link, #comments { display: none} /* Hide Comments*/ 


/* mobile ------------------------------------------*/

/* smaller than desktop */
@media (max-width: 1150px) {
    .nav-menu li {  padding: 0 5px; }
    .nav-menu li a { font-size: 13px; border: 0;}
}


/* smaller than desktop */
@media (max-width: 1000px) {
    .site-content h1 { margin-top: 20px;}
    
/* Small menu */
    .navbar { background: #bc8c2f; padding: 0;}
    .toggled-on li {  padding: 10px 20px;  border-top: 1px solid #292C31; }
    
    ul.nav-menu,
	div.nav-menu > ul {
		display: none;
	}
    
	.menu-toggle {
		cursor: pointer;
		display: inline-block;
		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
	}

	.menu-toggle,
	.menu-toggle:hover,
	.menu-toggle:focus,
	.menu-toggle:active {
		background: none;
		border: none;
		color: #141412;
		padding: 12px 0 12px 20px;
	}

	.menu-toggle:focus {
		outline: thin dotted;
	}

	.menu-toggle:after {
		content: "\f502";
		font-size: 12px;
		padding-left: 8px;
		vertical-align: -4px;
	}

	.toggled-on .menu-toggle:after {
		content: "\f500";
		vertical-align: 2px;
	}

	.toggled-on .nav-menu,
	.toggled-on .nav-menu > ul {
		display: block;
		margin-left: 0;
		padding: 0;
		width: 100%;
	}

	.toggled-on li,
	.toggled-on .children {
		display: block;
	}

	.toggled-on .nav-menu li > ul {
		background-color: transparent;
		display: block;
		float: none;
		margin-left: 20px;
		position: relative;
		left: auto;
		top: auto;
	}

	.toggled-on .nav-menu li > ul a {
		color: #141412;
		width: auto;
        border: 0;
	}
    
	.toggled-on .nav-menu li:hover > a,
	.toggled-on .nav-menu .children a {
		background-color: transparent;
		color: #fff;
        border: 0;
	}

	.toggled-on .nav-menu > li a:hover,
	.toggled-on .nav-menu > ul a:hover {
		background-color: transparent;
		color: #fff;
        border: 0;
	}

	.toggled-on .nav-menu > li a:focus,
	.toggled-on .nav-menu > ul a:focus {
		background-color: transparent;
		color: #fff;
        border: 0;
	}
   
    
    .toggled-on ul.sub-menu li { border: 0; padding: 0px;}

    .nav-menu .current_page_item > a, 
    .nav-menu .current_page_ancestor > a, 
    .nav-menu .current-menu-item > a, 
    .nav-menu .current-menu-ancestor > a { border: 0;}
    
    
    
    
}

.hidden-desktop-only {
	display: none;
}

/* smaller than ipad */
@media (max-width: 760px) {
	.visible-desktop-only {
		display: none;
	}

	.hidden-desktop-only {
		display: block;
	}

    .column, .columns {margin-bottom: 18px;}
    .notifications, .text-right { text-align: center;}
    
    .logo-img { margin: 0 auto; width: 100%; height: 85px;}
    /*.banner, .hero { display: none;}
.sss img {
    height: 150px;
    transform: scale(2, 1);
}*/
.entry-thumbnail img { display: none}
    .site-footer .widget { display: block; float: none; width: 100%; }
    .footer-copyright { text-align: center}


.price-group li { display: block; }
#priceDiv table tr:nth-child(even) {
    background: none;
}
#priceDiv table { overflow-x: auto;
    display: block;
    padding: 0 0 10px;
    position: relative;
    -webkit-box-shadow: inset -3px 0px 5px -1px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -3px 0px 5px -1px rgba(0,0,0,0.25);
    box-shadow: inset -3px 0px 5px -1px rgba(0,0,0,0.25);
}
    
}