@import "../../css/_mixins.scss";
@import "../../css/_theme-vars.scss";

/* About Theme
----------------------------------------------------------------*/
.carlax_about {
	margin: 2em 2em 0 0;
	padding: 3em;
	background-color: #fff;
	border: 1px solid #ddd;
	@include border-radius(2px);
}
@media (max-width: 959px) {
	.carlax_about {
		margin: 1em 1em 0 0;
		padding: 2em;
	}
}

/* Header */
.carlax_about_header {
	overflow:hidden;
}
	.carlax_about_logo {
		float: left;
		display:inline-block;
		max-width: 30%;
		margin: 0 2em 1em 0;
	}
	@media (max-width: 783px) {
		.carlax_about_logo {
			max-width: 50%;
			margin: 0 0 1em 0;
			float: none;
		}
	}
	@media (max-width: 479px) {
		.carlax_about_logo {
			max-width: 100%;
		}
	}
	.carlax_about_logo img {
		max-width: 100%;
		height: auto;
	}

	.carlax_about_title {
		text-align: left;
		margin-top:0;
		line-height:1.5em;
	}
	.carlax_about_description {
		color: #888;
		margin-bottom: 3em;
		line-height:1.5em;
	}
	.carlax_about_description p {
		@include font(1.1538em, 1.5em);
		margin: 0.5em 0 0;
	}
	@media (max-width: 1279px) {
		.carlax_about_description p {
			@include font(1em, 1.7em);
		}
	}
	.carlax_about_description b,
	.carlax_about_description strong {
		color: #333;
	}


/* Tabs */
#carlax_about_tabs > ul > li > a {
	background-color: #eee;
	font-size: 1.1538em;
}
#carlax_about_tabs > ul > li.ui-state-active > a {
	background-color: #f7f7f7;
}

/* Sections */
#carlax_about_tabs .carlax_about_section {
	@include flex;
	@include flex-wrap(wrap);
	background-color: #f7f7f7;
	padding: 2em;
}

/* Blocks */
.carlax_about_block {
	display: inline-block;
	vertical-align:top;
	font-size: 1.1538em;
	width: 25%;
	padding: 0 2em 2em 0;
	@include border-box;
}
@media (max-width: 1679px) {
	.carlax_about_block {
		width: 33.3333%;
	}
}
@media (max-width: 1439px) {
	.carlax_about_block {
		width: 50%;
	}
}
@media (max-width: 1279px) {
	#carlax_about_tabs > ul > li > a {
		font-size: 1em;
	}
	.carlax_about_block {
		font-size: 1em;
	}
}
@media (max-width: 767px) {
	.carlax_about_block {
		width: 100%;
		padding-right:0;
	}
}
.carlax_about_block_inner {
	display: inline-block;
	vertical-align:top;
	padding: 2em;
	@include box(100%, 100%);
	@include border-box;
	background-color: #fff;
	border: 1px solid #ddd;
	@include border-radius(2px);
	@include transition(box-shadow .5s ease);
}
.carlax_about_block_inner:hover {
	@include box-shadow(0 0 20px 0 rgba(0, 0, 0, 0.2));
}
.carlax_about_block_title {
	margin: 0;
}
.carlax_about_block_image {
	max-width: 100%;
	height: auto;
	margin: 1em 0;
}
.carlax_about_block_description {
	margin: 1em 0;
	line-height:1.7em;
}
.carlax_about_block a.carlax_about_block_link,
.carlax_about_block span.carlax_about_block_link {
	@include font(1em, 1.7em);
	padding:0.5em 1em;
	height: auto;
	display: inline-block;
	margin: 0.5em 0.5em 0.5em 0;
	vertical-align:middle;
	@include transition-properties(border,background,color);
}
.carlax_about_block span.carlax_about_block_link_active {
	cursor: default;
	pointer-events: none;
}

/* Section 'Required actions' */
#carlax_about_section_actions .carlax_about_block {
	width: 100%;
	padding-right:0;
}
#carlax_about_section_actions .carlax_about_block_inner {
	border-width: 0 0 0 3px;
	border-color: red;
	@include border-sharp;
}

/* Section Free vs Pro */
table.carlax_about_table {
	border-collapse: collapse;
	width:100%;
}
.carlax_about_table tr {
	border-bottom: 1px solid #ddd;
}
.carlax_about_table td {
	padding: 2em 0;
}
.carlax_about_table td + td {
	padding: 2em 1em;
	text-align: center;
}
.carlax_about_table_info {
	width: 70%;
}
.carlax_about_table_check {
	width: 15%;
}
.carlax_about_table_info_title {
	margin-top: 0;
	margin-bottom: 0.3em;
}
.carlax_about_table thead td.carlax_about_table_check {
	font-size:1.1538em;
	font-weight:bold;
}
.carlax_about_table td.carlax_about_table_check .dashicons {
	@include font(2em, 1em);
	@include box(1em, 1em);
}
.carlax_about_table td.carlax_about_table_check .dashicons:before {
	font-size: 1em;
}
.carlax_about_table td.carlax_about_table_check .dashicons-yes:before {
	color:#00aa00;
}
.carlax_about_table td.carlax_about_table_check .dashicons-no:before {
	color:#aa0000;
}
table.carlax_about_table .carlax_about_block_link {
	float:none;
}