/*   
Theme Name: MolaFolio
License: Located in the 'Licensing' folder
License URI: Located in the 'Licensing' folder
Description: Promola Portfolio Theme.
Author: Promola
Author URI: http://promola.co.za
Theme URI: http://promola.co.za/#themes
Version: 1
Tags: two-columns, threaded-comments, right-sidebar
Text Domain: molafolio
*/

/*

[Table of contents]

1. Reset
2. HTML5 Tags Declaration
3. WordPress Classes Styling
4. Generic Styling
5. Main Header Styling
6. Intro Section Styling
7. Themes Section Styling
8. Testimonials Section Styling
9. About Me Section Styling
10. Contact Section Styling

*/


/*-------------------------------------------*\
	1. Reset
\*-------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

a img,
iframe,
fieldset {
	border: none;	
}

li {
	list-style: none;
}

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

/*-------------------------------------------*\
	2. HTML5 Tags Declaration
\*-------------------------------------------*/

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section { 
    display: block; 
}

/*-------------------------------------------*\
	3. WordPress Classes Styling
\*-------------------------------------------*/

.screen-reader-text{}

.sticky{}

.gallery-caption a {
	display: inline;
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}

.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}

.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	margin: 12px 0 6px 12px;
}

img.alignleft {
	margin: 12px 12px 6px 0;
}

img.aligncenter {
	margin-top: 12px;
	margin-bottom: 12px;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignnone {
	margin: 12px 0 6px 0;
	text-align: center;
}

.wp-caption {
	max-width: 100%;
	margin: 12px 0;
}

.entry
.wp-caption-text {
	margin-bottom: 0;
  	font-size: 13px;
	font-style: italic;
	color: #ccc;
}

/*-------------------------------------------*\
	4. Generic Styling
\*-------------------------------------------*/

h1, h2, h3, h4, h5 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #212121;
}

h1 {
	font-size: 29px;
	line-height: 39px;
}

h2 {
	font-size: 23px;
	line-height: 31px;
}

h3 {
	font-size: 17px;
	line-height: 25px;
}

h4 {
	font-size: 15px;
	line-height: 23px;
}

h5 {
	font-size: 11px;
	line-height: 17px;
}

p {
	line-height: 27px;
}

.wrapper {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}

body {
	color: #666;
	background-color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #F24C4C;
	text-decoration: none;
	transition: color .3s; 
}

a:hover {
	color: #aaa;
	text-decoration: none;
}

/*** Default Text Styling ***/

.entry {
	clear: both;
	overflow: hidden;
	word-wrap: break-word;
}

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5 {
	margin-bottom: 16px; 
}

.entry ol,
.entry ul {
	margin-bottom: 20px;
	margin-left: 20px;
}

.entry
blockquote p {
	padding: 16px 0 16px 24px;
	clear: both;
	border-top: 2px solid #eee;
	border-bottom: 2px solid #eee;
	background: url(images/quotes.png) no-repeat left 18px;
}

.entry p,
.widget p {
	margin-bottom: 20px;
}

.entry iframe,
.entry img {
	max-width: 100%;
}

select {
	max-width: 100%;
}

/*** Lists Styling ***/

.entry
ul li,
.comment-text
ul li {
	list-style: disc;
}

.entry
ol li,
.comment-text
ol li {
	list-style: decimal;
}

.entry
li,
.comment-text
li {
	list-style-position: inside;
	line-height: 24px;
}

.entry
dt,
.comment-text
dt {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 2px;
}

.entry
dd,
.comment-text
dd {
	margin: 0;
	padding: 0 0 0.5em 0;
}

/*** Tables Styling ***/

.entry
table,
.comment-text
table {
	margin: 20px 0;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}

.entry
table
thead th,
.comment-text
table
thead th {
	font-weight: 700;
}

.entry
table th,
.comment-text
table th {
	font-size: 14px;
	font-weight: normal;
	padding: 10px 8px;
}

.entry
table td,
.comment-text
table td {
	padding: 2%;;
}

.entry
tbody tr:nth-child(odd),
.comment-text
tbody tr:nth-child(odd) {
	background: #F7F7F7; 
}

code, pre { font-family: Consolas, Monaco, "Courier New", Courier, monospace; color: #000; }

a code,
a pre {
	color: inherit;
}

pre {
	background: #f3f3f7;
	border: 1px solid #dedee3;
	padding: 11px;
	font-size: 12px;
	line-height: 1.3em;
	margin-bottom: 22px;
	overflow: auto;
}

/*-------------------------------------------*\
	5. Main Header Styling
\*-------------------------------------------*/

#main-header {
	position: relative;
    z-index: 20;
	height: 70px;
	background-color: #fff;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
}

#logo {
	float: left;
	margin-right: 60px;
	line-height: 70px;
}

#logo img {
	vertical-align: middle;
}

#main-header li {
	float: left;
	margin-right: 24px;
	line-height: 70px;
}

#main-header li:last-child {
	margin-right: 0;
}

#main-header a {
	position: relative;
	display: block;
	height: 70px;
	color: #202020;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

#main-header a:hover 
.blk-line {
	background-color: #202020;
}

#main-header
.blk-line {
	top: 51px;
	background-color: #fff;
}

.blk-line {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 20px;
	height: 1px;
	margin-right: auto;
	margin-left: auto;
	background-color: #202020;
	transition: background .3s;
}

#main-nav {
	float: left;
}

#other-media {
	float: right;
}

#other-media a {
	padding-left: 25px;
	background: url(images/other-media.png) no-repeat 0 2px;
}

.other-media-text {
	position: relative;
	display: block;
	height: inherit;
}

#other-media 
.envato {
	background-position: 0 -80px;
}

/*** Sticky Header Styling ***/

#main-header.stick-it {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 40;
	width: 100%;
}

.stick-it {
	animation-name: slideInDown;
  	animation-duration: .6s;
  	animation-fill-mode: both;
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*-------------------------------------------*\
	6. Intro Section Styling
\*-------------------------------------------*/

#intro {
	position: relative;
	height: 610px;
	border-bottom: 1px solid #F2F2F2;
	background: url(images/intro-bg.png) repeat;
	text-align: center;
}

#intro .wrapper {
	height: inherit;
}

#intro h1 {
	padding-top: 100px;
	font-size: 40px;
}

#intro h2 {
	padding-top: 20px;
	font-size: 30px;
}

#intro-image {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 874px;
    height: 342px;
    margin-left: auto;
	margin-right: auto;
    background: url(images/intro-image.png) no-repeat;
}

/*-------------------------------------------*\
	7. Themes Section Styling
\*-------------------------------------------*/

#themes {
	padding: 50px 0;
	border-bottom: 1px solid #F2F2F2;
}

.section-header {
	position: relative;
	margin-bottom: 40px;
	text-align: center;
	text-transform: uppercase;
}

#themes 
.section-header {
	margin-bottom: 50px;
}

.section-header h2 {
	font-size: 30px;
	font-weight: 600;
}

.section-header 
.blk-line {
	position: static;
	margin: 19px auto;
}

.section-header h3 {
	color: #aaa;
	font-size: 22px;
}

#theme-slider-wrap {
	position: relative;
}

#theme-slider,
.theme-slide {
	width: 1052px;
	height: 308px;
	margin: 0 auto;
	overflow: hidden;
}

.theme-thumb {
	position: relative;
	width: 590px;
	height: 300px;
	float: left;
	margin-right: 26px;
	border: 4px solid #F2F2F2;
}

.theme-thumb a {
	position: relative;
	z-index: 2;
}

.theme-bg-color {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 590px;
	height: 300px;
	background-color: #202020;
}

.theme-thumb img {
	transition: opacity .5s;
}

.theme-thumb:hover img {
	opacity: .7;
}

.theme-name {
	margin-top: 11px;
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 600;
	text-transform: uppercase;
}

.about-theme {
	overflow: hidden;
}

.theme-content {
	height: 184px;
	margin-bottom: 22px;
	overflow: hidden;
}

.theme-content li {
	margin-bottom: 10px;
	padding-left: 10px;
	background: url(images/list-dot.png) no-repeat left center;
	font-size: 16px;
}

.live-prev-btn {
	display: block;
	width: 155px;
	height: 40px;
	color: #fff;
	border-radius: 20px;
	background-color: #202020;
	font-size: 14px;
	font-weight: 600;
	line-height: 40px;
	text-align: center;
	text-transform: uppercase;
	transition: background .3s;
}

.live-prev-btn:hover {
	color: #fff;
	background-color: #F24C4C;
}

/*** Slider Nav Styling ***/

#slider-nav {
	text-align: center;
}

.flex-prev,
.flex-next {
	position: absolute;
	top: 133px;
	z-index: 1;
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 42px;
	background: url(images/slider-nav.png) no-repeat #202020;
	transition: background .3s;
}

.flex-prev {
	left: 0;
}

.flex-next {
	right: 0;
	background-position: 0 -84px;
}

.flex-prev:hover,
.flex-next:hover {
    background-color: #F24C4C;
}

.flex-control-paging {
	display: inline-block;
	width: 172px;
	margin-top: 38px;
	text-indent: -9999px;
}

.flex-control-paging li {
	float: left;
	margin-right: 8px;
}

.flex-control-paging 
li:last-child {
	margin-right: 0;
}

.flex-control-paging a {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	border: 1px solid #202020;
	background-color: #fff;
}

.flex-control-paging 
.flex-active {
	background-color: #202020;
}

/*-------------------------------------------*\
	8. Testimonials Section Styling
\*-------------------------------------------*/

#testimonials {
	padding: 50px 0;
	border-bottom: 1px solid #F2F2F2;
	background-color: #FBFBFB;
	text-align: center;
}

#testimonials 
blockquote {
	position: relative;
	width: 56%;
	margin: 0 auto 15px auto;
}

.quote-icon {
	position: absolute;
	top: 10px;
	z-index: 2;
	display: block;
	width: 37px;
	height: 28px;
	background: url(images/quotes.png) no-repeat;
}

.left-quote {
	left: -50px;
}

.right-quote {
	right: -50px;
	background-position: 0 -93px;
}

#rating-stars {
	display: block;
	width: 100px;
	height: 15px;
	margin: 20px auto 0 auto;
	background: url(images/rating-stars.png) no-repeat;
}

/*-------------------------------------------*\
	9. About Me Section Styling
\*-------------------------------------------*/

#about-me {
	padding: 50px 0;
	border-bottom: 1px solid #F2F2F2;
	text-align: center;
}

#about-me p {
	width: 58%;
	margin: 0 auto;
}

#my-photo {
	display: block;
	width: 140px;
	height: 140px;
	margin: 28px auto 0 auto;
	overflow: hidden;
	border-radius: 140px;
	border: 4px solid #F2F2F2;
}

/*-------------------------------------------*\
	10. Contact Section Styling
\*-------------------------------------------*/

#contact {
	padding: 50px 0 34px 0;
	border-bottom: 1px solid #F2F2F2;
	background-color: #FBFBFB;
}

#contact 
.section-header {
	margin-bottom: 40px;
}

.wpcf7-text {
	margin-top: 20px;
}

.wpcf7-text,
.wpcf7-textarea {
	width: 97.3%;
	height: 44px;
	padding: 0 15px;
	color: #666;
	border-radius: 4px;
	border: 1px solid #E6E6E6;
	font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.wpcf7-text:focus,
.wpcf7-textarea:focus {
	outline: none;
	border-color: #aaa;
}

input:placeholder-shown,
textarea:placeholder-shown {
	color: #aaa;
	text-transform: uppercase;
}

.wpcf7-textarea {
	height: 240px;
	margin-top: 20px;
	padding-top: 15px;
}

.wpcf7-submit {
	display: block;
    width: 155px;
    height: 40px;
    margin-top: 20px;
    color: #fff;
    border-radius: 20px;
    border: none;
    background-color: #202020;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s;
}

.wpcf7-submit:hover,
.wpcf7-submit:focus {
	outline: none;
	background-color: #F24C4C;
}

span.wpcf7-not-valid-tip {
	color: #666;
	font-size: 15px;
}

.wpcf7-validation-errors {
	display: block;
}

div.wpcf7-validation-errors {
	display: none !important;
}

#main-footer {
	height: 90px;
	color: #aaa;
	font-size: 15px;
	text-align: center;
	text-transform: uppercase;
}

#main-footer p {
	line-height: 90px;
}