/*
	These are the custom css styles for the Clarity Toolkit plugin.
	If you'd like to customize these css codes, I would recommend copying
	the codes below into your theme's stylesheet and editing the codes
	as you see fit. Need help? email: hi@madebyguerrilla.com
*/

/* Button - wide */

a.btn.wide,
a.btn.wide:visited {
	width: 100%;
	text-align: center;
}

/* Button - alt */

a.btn.alt,
a.btn.alt:visited {
	background: #363636;
	color: #FFF;
}

a.btn.alt:hover {
	background: #21759b;
	color: #FFF;
}

/* Button - alt2 */

a.btn.alt2,
a.btn.alt2:visited {
	background: #FFF;
	color: #363636;
}

a.btn.alt2:hover {
	background: #EEE;
	color: #363636;
}

/* Button - alt3 */

a.btn.alt3,
a.btn.alt3:visited {
	padding: 8px;
	background: transparent;
	color: #16679E;
	border: 2px solid #16679E;
}

a.btn.alt3:hover {
	background: #16679E;
	border: 2px solid #16679E;
	color: #FFF;
}

/* Button - alt4 */

a.btn.alt4,
a.btn.alt4:visited {
	padding: 8px;
	background: transparent;
	color: #363636;
	border: 2px solid #363636;
}

a.btn.alt4:hover {
	background: #363636;
	border: 2px solid #363636;
	color: #FFF;
}

/* Button - alt5 */

a.btn.alt5,
a.btn.alt5:visited {
	padding: 8px;
	background: transparent;
	color: #FFF;
	border: 2px solid #FFF;
}

a.btn.alt5:hover {
	background: #FFF;
	border: 2px solid #FFF;
	color: #363636;
}

/* Button - Amazon */

a.btn.amazon,
a.btn.amazon:visited {
	background: #ffa620;
	position: relative;
	padding-left: 34px;
}

a.btn.amazon:before {
    content: "\f270";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	/*--adjust as necessary--*/
    color: #FFF;
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 10px;
}

a.btn.amazon:hover {
	background: #ff9900;
}

/* Button - Shop */

a.btn.shop,
a.btn.shop:visited {
	position: relative;
	padding-left: 34px;
}

a.btn.shop:before {
    content: "\f07a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #FFF;
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 10px;
}

a.btn.shop:hover {
}

/* Button - Large */

a.btn.lrg {
	padding: 20px;
}

a.btn.lrg.alt3,
a.btn.lrg.alt4,
a.btn.lrg.alt5 {
	padding: 18px;
}

a.btn.lrg.shop {
	padding-left: 44px;
}

a.btn.lrg.shop:before {
    content: "\f07a";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #FFF;
    font-size: 18px;
    position: absolute;
    top: 18px;
    left: 18px;
}

a.btn.lrg.amazon {
	padding-left: 44px;
}

a.btn.amazon:before {
    content: "\f270";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	/*--adjust as necessary--*/
    color: #FFF;
    font-size: 18px;
    position: absolute;
    top: 18px;
    left: 18px;
}

/* Button - Rounded */

a.btn.round,
a.btn.round:visited {
	border-radius: 20px;
	padding: 10px 20px;
}

a.btn.shop.round,
a.btn.shop.round:visited,
a.btn.amazon.round,
a.btn.amazon.round:visited {
	padding-left: 44px;
}

a.btn.shop.round:before,
a.btn.amazon.round:before {
	left: 20px;
}

a.btn.round.lrg,
a.btn.round.lrg:visited {
    border-radius: 30px;
    padding: 20px 25px;
}

/* Columns - center text */

.col1.center,
.col2.center,
.col3.center,
.col4.center,
.col5.center,
.col6.center,
.col7.center,
.col8.center,
.col9.center,
.col10.center,
.col11.center,
.col12.center {
	text-align: center;
}

/* Columns - white background */

.col1.white,
.col2.white,
.col3.white,
.col4.white,
.col5.white,
.col6.white,
.col7.white,
.col8.white,
.col9.white,
.col10.white,
.col11.white,
.col12.white {
	background: #FFF;
	padding: 10px;
}

/* HR line */

.clear.hr {
	height: 1px;
	background: #ccc;
	visibility: inherit;
	margin: 12px 0;
	float: left;
	width: 100%;
}

/* Infobox */

.infobox {
	color: #FFF;
	background: #000;
	margin-top: 12px;
	margin-bottom: 12px;
	position: relative;
}

.infobox h3 {
	color: #FFF;
	display: none;
	font-size: 32px;
	text-transform: lowercase;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	z-index: 3;
}

.infobox h3 span {
	color: #FFF;
	display:block;
	display:none;
    width: 100%;
    font-size: 24px;
    text-transform: lowercase;
}

.infobox p {
	display:none;
}

.infobox:hover p,
.infobox:focus p {
	display: inline-block;
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	text-align: center;
	padding: 25%;
	z-index: 5;
}

.infobox:hover h3 {
    display: block;
}

.infobox:hover h3 span {
	display: block;
	margin-top: 10px;
}

.infobox a {
	display: block;
	height: 100%;
	width: 100%;
}

.infobox img {
	float: left;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

.infobox:hover img,
.infobox:focus img {
	opacity: 0.2;
}

/* Dark Infobox */

.infobox.dark {
	color: #252525;
	background: #FFF;
}

.infobox.dark h3,
.infobox.dark h3 span {
	color: #252525;
}

.infobox.dark:hover img,
.infobox.dark:focus img {
	opacity: 0.2;
}

/* Related Posts */

.relatedposts {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-top: 1px solid #e1e1e1;
	float: left;
	font-size: 14px;
	line-height: 18px;
	margin: 24px 0;
	padding: 2% 0;
	width: 100%;
}

.relatedposts .col3 {
	margin: 0 1%;
	width: 23.5%;
}

.relatedposts .col3:nth-child(2) {
	margin-left: 0;
}

.relatedposts .col3:nth-child(5) {
	margin-right: 0;
}

.relatedposts h3 {
    margin-top: 0;
    text-align: center;
}

/* Callouts */

.calloutwrap {
    background: #FFF;
    float: left;
    padding: 48px 0;
    position: relative;
    width: 100%;
}

.calloutwrap.dark {
	background: #101010;
	color: #FFF;
}

.calloutwrap.dark h1,
.calloutwrap.dark h2,
.calloutwrap.dark h3,
.calloutwrap.dark h4,
.calloutwrap.dark h5,
.calloutwrap.dark h6 {
	color: #FFF;
}

/* Social icons widget */

.clarity-social-icons {
	text-align: center;
	width: 100%;
}

.clarity-social-icons a,
.clarity-social-icons a:visited {
	display: inline-block;
	margin: 0 8px;
}

.clarity-social-icons a:first-child {
	margin-left: 0;
}

.clarity-social-icons a:last-child {
	margin-right: 0;
}

/* Popular posts widget */

.clarity-popular-posts {
	float: left;
	margin: 0 0 24px 0;
	position: relative;
	width: 100%;
}

.clarity-popular-posts:last-child {
	margin-bottom: 0;
}

.clarity-popular-posts .title {
	font-size: 15px;
	font-weight: 700;
	line-height: 19px;
	padding: 0;
	margin: 0;
}

.clarity-popular-posts .info {
	color: #d0d0d0;
	font-size: 12px;
	line-height: 16px;
	padding: 0;
	margin: 5px 0 0 0;
}

.clarity-popular-posts .info a,
.clarity-popular-posts .info a:visited {
	color: #d0d0d0;
}

.clarity-popular-posts .info a:hover {
	color: #666;
}