/*
Theme Name:     Clutch Cuts 2017
Theme URI:      http: //www.ClutchCuts.com
Description:    Clutch Cuts' custom theme - child theme for Rational Start
Author:         Nikki Blight
Author URI:     http: //nlb-creations.com
Template:       rational-start
Version:        1.2
*/

body {
	background-color: #000000;
}

.clear {
	clear: both;
}

#header-logo {
	max-width: 730px;
	min-height: 525px;
	margin: 0 auto;
	background: url(images/clutch-logo-transparent.png) no-repeat center;
	background-size: 100%;
	text-indent: -9000px;
}

header.site {
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: #000000;
}

.header-phone,
.header-phone a,
.header-address {
	color: #ffffff;
	font-size: 1.3em;
	margin-top: 50px;
}

.header-address {
	float: left;
	margin-left: 50px;
}

.header-phone {
	float: right;
	margin-right: 50px;
}

@media screen and (max-width: 875px) {
  .header-phone,
  .header-address {
    visibility: hidden;
    display: none;
  }
}

.menu-back {
	background-color: #ed1c24;
}

nav.site {
	float: none;
	width: 100%;
	clear: both;
}

nav.site > ul {
	float: none;
	width: 100%;
	text-align: center;
	clear: both;
}

nav.site li {
	float: none;
	display: inline;
}

nav.site li a {
	display: inline-block;
	font-weight: bold;
}

nav.site .current-menu-item > a, nav.site .current_page_item > a {
	color: #ffffff;
}

nav.site li {
	color: #000000;
}

nav.site li:hover, nav.site li.open {
	background: none;
	color: #ffffff;
}

article.home-article {
	margin-top: 0px;
}

.footer-beside-copyright li img {
	display: block;
	float: right;
	padding-left: 10px;
}

.wpcf7-submit {
	width: 25%;
}

.contact-table {
	width: 100%;
}

.contact-table td {
	border: none;
	vertical-align: top;
}

.clutch-section {
	width: 48%;
	margin-right: 1%;
	float: left;
}

.home article#content header.article h1 {
	display: none;
}

.front-slider .slick-next {
	right: 12px;
}

.front-slider .slick-prev {
	left: 12px;
}

.front-slider .slick-prev,
.front-slider .slick-next {
	z-index: 100;
	width: 30px;
	height: 30px;
}

.slick-prev::before, .slick-next::before {
	font-size: 30px;
}

ul.slick-dots {
    position: absolute;
    bottom: 20px !important;
    list-style-type: circle;
}

ul.slick-dots li button {
	color: transparent;
	background: #c0c0c0;
	border-radius: 100%;
	border: 4px solid #fff;
	width: 20px;
	height: 20px;
	margin-top: -1px;
	margin-left: 0px;
}

ul.slick-dots li button:before {
	color: transparent !important;
}

ul.slick-dots li.slick-active button:before {
	color: #666666 !important;
	opacity: 1;
	font-size: 16px;
}

.slick-dotted.slick-slider {
	margin-bottom: 0px !important;	
}

/* ------ START CUSTOM CSS for Stylists ----*/

/* Enter Your Custom CSS Here */

.clearfix {
	clear: both;
}

.clutch-stylist-item {
    width: 100%;
    height: auto;
    max-width: 900px;
    margin: 10px auto 60px auto;
    overflow: hidden;
}

.clutch-stylist-item p {
    margin: 0px;
}

img.clutch-stylist-item-photo {
    width: 230px;
		height: 300px;
    border: solid 1px #777;
    object-fit: cover;
		float: left;
}

.clutch-stylist-item-text {
    width: -moz-calc(100% - 260px);
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
	  float: right;
}

h3.clutch-stylist-item-name {
    font-size: 30px;
    line-height: 1em;
    padding: 0px;
    margin: 0px;
    font-weight: 600;
		color: #333;
}

h4.clutch-stylist-item-title {
    font-size: 20px;
    line-height: 1em;
    padding: 0px 0px 15px 0px;
    margin: 10px 0px 0px 0px;
    font-weight: 600;
    border-bottom: solid 1px #CCC;
		color: #999;
}

.clutch-stylist-item p.clutch-stylist-item-profile {
    line-height: 1.8em;
    font-weight: 400;
    font-size: 16px;
		margin: 15px 0px 0px 0px;
}

/* -------------------------------------------------------------------- */
@media (max-width: 767px) {

		img.clutch-stylist-item-photo {
    width: 180px;
		height: 250px;
		}
	
		.clutch-stylist-item-text {
    width: -moz-calc(100% - 210px);
    width: -webkit-calc(100% - 210px);
    width: calc(100% - 210px);
		}
	
		h3.clutch-stylist-item-name {
    font-size: 25px;
		}
	
		h4.clutch-stylist-item-title {
    font-size: 17px;
		}
	
		.clutch-stylist-item p.clutch-stylist-item-profile {
    font-size: 15px;
		}

}

/* -------------------------------------------------------------------- */
@media (max-width: 575px) {
	
		.clutch-stylist-item {
    max-width: 300px;
    margin: 10px auto 70px auto;
		}

		img.clutch-stylist-item-photo {
    width: 180px;
		height: 250px;
		float: none;
		margin: 0px auto 20px auto;
		display: block;
		}
	
		.clutch-stylist-item-text {
    width: 100%;
		max-width: 350px;
		margin: 0 auto 0 auto;
		float: none;
		}
	
		h3.clutch-stylist-item-name {
    text-align: center;
		}
	
		h4.clutch-stylist-item-title {
    text-align: center;
		}
	
		.clutch-stylist-item p.clutch-stylist-item-profile {
    text-align: justify;
		}

}

/* ----- END CUSTOM CSS for Stylists ------*/