/*
Theme Name: ThemeArt
Theme URI: http://themeart.co/
Author: ThemeArt
Author URI: http://themeart.co/
Description: A WordPress theme for official site themeart.co.
Version: 1.0
Text Domain: themeart
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Typography
2.0 Menu
3.0 Button
4.0 Separator
5.0 Alignments
6.0 Widgets
7.0 Homepage
8.0 Portfolio
9.0 Content
	9.1 Posts and pages
	9.2 Post Meta
	9.3 Asides
10.0 Media
	10.1 Captions
	10.2 Galleries
11.0 Image Hover Effect
12.0 Footer
13.0 Contact Form 7 Style
14.0 Download Manager Style
15.0 Registration Form Style
16.0 DW Q&A Style
17.0 Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	font-family: 'diavlolight', Arial;
	font-size: 16px;
	color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'diavlolight', Arial;
	color: #18bc9c;
}

h1,
.h1 {
	font-size: 32px;
}

h2,
.h2 {
	font-size: 28px;
}

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

a:focus {
	text-decoration: none;
}

#primary,
#secondary {
	-ms-word-wrap: break-word;
	    word-wrap: break-word;
}

/*--------------------------------------------------------------
2.0 Menu
--------------------------------------------------------------*/
.menu-item span {
	margin-right: 5px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color:#f66a5c;
}

.navbar-brand {
	font-size: 24px;
}

/*--------------------------------------------------------------
3.0 Button
--------------------------------------------------------------*/
.button-area {
	margin: 30px 0;
	text-align: center;
}

.button-area .fa {
	margin-right: 10px;
}

.button-area .btn {
	margin: 5px 10px;
}

.button-area .btn a {
	color: #fff;
}

.button-area span {
	font-size: 12px;
}

#filters {
	margin-top: 20px;
}

/*--------------------------------------------------------------
4.0 Separator
--------------------------------------------------------------*/
.separator {
  line-height: 0.3;
}

.separator span {
  display: inline-block;
  position: relative;  
}

.separator span:before,
.separator span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  top: 0;
  width: 40%;
}

.separator span:before {
  right: 100%;
  margin-right: 15px;
}

.separator span:after {
  left: 100%;
  margin-left: 15px;
}

.separate-block {
	margin-top: 30px;
}

/*--------------------------------------------------------------
5.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------
6.0 Widgets
--------------------------------------------------------------*/
.widget-area {
	margin-top: 35px;
	text-align: center;
	overflow: hidden;
	display: none;
}

.widget {
	margin: 0 0 2.5em;
}

.widget .btn-sm {
	margin: 5px;
}

.widget-title {
	margin-bottom: 30px;
}

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}

.form-control {
	color: #2c3e50;
}

.form-control:focus {
	border-color: #18bc9c;
}

/*--------------------------------------------------------------
7.0 Homepage
--------------------------------------------------------------*/
#heading,
#free,
#best,
#collection {
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
	padding: 10px 0;
	float: left;
}

.info {
	margin-top: 60px;
}

.desc {
	color: #c6c6c6;
}

.logo {
	margin: 20px 0;
}

.header-ad {
	display: none;
}

/*--------------------------------------------------------------
8.0 Portfolio
--------------------------------------------------------------*/
.theme-item {
	margin: 30px 0;
}

.wp-post-image,
.theme-item img {
	height: auto;
	border: 1px solid #eee;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
}

.collection-item {
	text-align: left;
}

.collection-item h1 {
	font-size: 26px;
	margin: 20px 0 10px;
}

.collection-item .entry-content {
	margin: 5px 0 0;
}

.collection-block {
	margin-top: 30px;
}

.collection-ad {
	display: none;
}

.collection-ad img {
	margin-top: 20px;
}

.collection-block .btn a {
	color: #fff;
}

.collection-block .btn .fa {
	margin-right: 10px;
}

.cb-1, .cb-2, .cb-3 {
	margin-bottom: 15px;
}

.filters ul {
	list-style: none;
	text-align: center;
	padding: 0;
}

.filters li {
	display: block;
	margin-right: 5px;
	padding: 5px 20px;
	text-align: center;
	cursor: pointer;
	margin-bottom: 5px;
}

.filters li.active {
	background-color: #18bc9c;
	color: #fff;
}

/*--------------------------------------------------------------
9.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
9.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.8em;
	border-bottom: 1px solid #eee;
	padding-bottom: 1.2em;
}

.post-inner-content {
	padding: 15px 0 40px 10px;
}

.byline,
.updated {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 0.5em 0 0;
}

.single .post .entry-content {
	font-size: 18px;
}

.single img {
	border: 1px solid #eee;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.single-theme .widget-area {
	margin-top: 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.pager li>a {
	margin-bottom: 5px;
}

.panel {
	margin-bottom: 10px;
}

.panel-heading {
	padding: 1px 15px 5px;
}

.recommended-posts {
	padding-bottom: 10px;
}

/*--------------------------------------------------------------
9.2 Post Meta
--------------------------------------------------------------*/
.entry-meta .posted-on,
.entry-meta .byline {
	margin-right: 20px;
}

.posted-on a,
.byline a {
	color: #888;
	text-decoration: none;
}

.entry-meta>span {
	display: block;
}

.ad-post {
	margin: 10px auto;
}

/*--------------------------------------------------------------
9.3 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
10.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object,
img {
	max-width: 100%;
}

img {
	height: auto;
}

/*--------------------------------------------------------------
10.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
10.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
11.0 Image Hover Effect
--------------------------------------------------------------*/
.view {
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

.view .mask,
.view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   display: none;
}

.view h3 {
	line-height: 18px;
	background: #f66a5c;
	color: #fff;
	padding: 10px 5px;
	-webkit-border-radius: 5px;
}

.view-small h3 {
	font-size: 16px;
	margin: 25px 30px;
}

.view-large h3 {
	font-size: 20px;
	margin: 80px 25px 30px;
}

.view a {
   color: #fff;
}

.view p {
	color: #777;
	margin: 0 30px;
}

.view-small p,
.view-small a.button {
	font-size: 14px;
}

.view-large p,
.view-large a.button {
	font-size: 16px;
}

.view a.button {
	padding: 20px 15px;
	color: #f66a5c;
}

.view .fa {
	padding-right: 5px;
}

.image-hover img {
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	    -ms-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

.image-hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(255, 255, 255, 0.8);
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	    -ms-transition: all 0.4s ease-in-out;
	     -o-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
}

.image-hover h2 {
	-webkit-transform: translateY(-100px);
	   -moz-transform: translateY(-100px);
	    -ms-transform: translateY(-100px);
	     -o-transform: translateY(-100px);
	        transform: translateY(-100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

.image-hover p {
	-webkit-transform: translateY(100px);
	   -moz-transform: translateY(100px);
	    -ms-transform: translateY(100px);
	     -o-transform: translateY(100px);
	        transform: translateY(100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	    -ms-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

.image-hover:hover img {
	-webkit-transform: scale(1.1,1.1);
	   -moz-transform: scale(1.1,1.1);
	    -ms-transform: scale(1.1,1.1);
	     -o-transform: scale(1.1,1.1);
	        transform: scale(1.1,1.1);
}

.image-hover a.info {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

.image-hover:hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.image-hover:hover h2,
.image-hover:hover p,
.image-hover:hover a.info {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: translateY(0px);
	   -moz-transform: translateY(0px);
	    -ms-transform: translateY(0px);
	     -o-transform: translateY(0px);
	        transform: translateY(0px);
}

.image-hover:hover p {
	-webkit-transition-delay: 0.1s;
	   -moz-transition-delay: 0.1s;
	    -ms-transition-delay: 0.1s;
	     -o-transition-delay: 0.1s;
	        transition-delay: 0.1s;
}

.image-hover:hover a.info {
	-webkit-transition-delay: 0.2s;
	   -moz-transition-delay: 0.2s;
	    -ms-transition-delay: 0.2s;
	     -o-transition-delay: 0.2s;
	        transition-delay: 0.2s;
}

/*--------------------------------------------------------------
12.0 Footer
--------------------------------------------------------------*/
#footer {
	background: #f3f3f3;
}

#footer .container {
	padding: 25px 15px 5px;
}

.footer-menu {
	margin-left: 0;
	padding: 0;
}

.footer-menu li {
	display: inline;
	list-style-type: none;
}

.footer-menu li a {
	padding: 0 5px;
}

.footer-menu > li:first-child > a {
	padding: 0 5px 0 0;
}

.copyright {
	float: left;
}

.scroll-to-top {
	background: #e9e9e9;
	background: rgba(100, 100, 100, 0.5);
	color: #fff;
	bottom: 7%;
	cursor: pointer;
	display: none;
	position: fixed;
	right: 25px;
	z-index: 999;
	font-size: 24px;
	text-align: center;
	line-height: 40px;
	width: 40px;
	border-radius: 5px;
	-webkit-transition: background-color 0.3s linear;
	   -moz-transition: background-color 0.3s linear;
	     -o-transition: background-color 0.3s linear;
	        transition: background-color 0.3s linear;
}

.scroll-to-top:hover {
	background: #f66a5c;
	opacity: 0.8;
}

/*--------------------------------------------------------------
13.0 Contact Form 7 Style
--------------------------------------------------------------*/
.wpcf7-form {
	padding: 10px 15px; 
	margin-bottom:10px; 
}

.wpcf7-form .left{
	float: left;
	margin-right: 40px;
}

.wpcf7-form input,
.wpcf7-form textarea { 
	border:1px solid #dce4ec; 
	border-radius:4px;
    margin: 5px 0;
    padding: 5px 10px;
    font-size: 16px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out 0.15s;
	            -ms-transition: border-color ease-in-out .15s,box-shadow ease-in-out 0.15s;
	             -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out 0.15s;
	                transition: border-color ease-in-out .15s,box-shadow ease-in-out 0.15s;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
	width: 100%;
}

.wpcf7-form input[name="your-subject"],
.wpcf7-form textarea {
	width: 100%;
}

.wpcf7 input:hover,
.wpcf7 input:focus,
.wpcf7 input:active,
.wpcf7 textarea:hover,
.wpcf7 textarea:focus,
.wpcf7 textarea:active {
	outline-color: #18bc9c;
}

.wpcf7-form .wpcf7-submit {
	display: inline-block;
	padding: 6px 12px;
	float: right;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

.wpcf7-form .wpcf7-submit:hover {
	color: #fff;
	background-color: #f66a5c;
	border-color: #f66a5c;
}

.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-mail-sent-ok,
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 span.wpcf7-not-valid-tip {
	border:2px solid #f66a5c;
	border-radius: 4px;
	padding: 10px;
}

.wpcf7-form .clear {
	clear: both;
}

/*--------------------------------------------------------------
14.0 Download Manager Style
--------------------------------------------------------------*/
.w3eden table {
	font-size: 14px;
	margin-bottom: 1.5em;
	width: 100%;
}

.w3eden table tr.alt {
	background: #ecf0f1;
}

.w3eden table td {
	border-top: 1px solid #ecf0f1 !important;
	border-bottom: 1px solid #ecf0f1 !important;
	padding: 5px;
	vertical-align: middle;
}

.w3eden table th {
	font-weight: 600;
	border-top: 1px solid #ecf0f1 !important;
	border-bottom: 1px solid #ecf0f1 !important;
	padding: 10px 5px;
}

.w3eden table th:last-child {
	text-align: center;
}

.w3eden .panel .panel-heading {
	padding: 10px;
}

.w3eden .table-hover>tbody>tr:hover {
	background-color: #fff;
}

/*--------------------------------------------------------------
15.0 Registration Form Style
--------------------------------------------------------------*/
.gform_wrapper label {
	font-weight: normal;
}

.gform_wrapper .gfield_required {
	vertical-align: sub;
}

.gform_wrapper .top_label .gfield_label {
	margin: .625em 0 0 0 !important;
	font-weight: normal !important;
}

body .gform_wrapper label.gfield_label + div.ginput_container {
	margin-top: 0 !important;
}

.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea { 
	border:1px solid #dce4ec; 
	border-radius:4px;
	margin: 5px 0;
	padding: 5px 10px !important;
	font-size: 16px !important;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
			box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out 0.15s;
				-ms-transition: border-color ease-in-out .15s,box-shadow ease-in-out 0.15s;
				 -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out 0.15s;
					transition: border-color ease-in-out .15s,box-shadow ease-in-out 0.15s;
}

.ginput_container input:hover,
.ginput_container input:focus,
.ginput_container input:active,
.ginput_container textarea:hover,
.ginput_container textarea:focus,
.ginput_container textarea:active {
	border-color: #18bc9c;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.gform_button {
	padding: 6px 12px;
	float: right;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

.gform_button:hover {
	color: #fff;
	background-color: #f66a5c;
	border-color: #f66a5c;
}

.gform_wrapper .gform_footer {
	text-align: right;
	padding: 1em 1.25em .625em 0 !important;
}

.gform_wrapper div.validation_error {
	border: 1px solid #f66a5c !important;
	border-radius: 4px;
	padding: 10px !important;
	color: #f00 !important;
	font-size: 1em !important;
	font-weight: normal !important;
}

.gform_wrapper li.gfield.gfield_error,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
	background-color: inherit !important;
	padding: 0 10px !important;
	border: 1px solid #f66a5c !important;
	border-radius: 4px;
}

.gform_wrapper .validation_message {
	color: #f00 !important;
}

.gform_wrapper li.gfield_error textarea,
.gform_wrapper li.gfield_error input[type=text],
.gform_wrapper li.gfield_error input[type=url],
.gform_wrapper li.gfield_error input[type=email],
.gform_wrapper li.gfield_error input[type=tel],
.gform_wrapper li.gfield_error input[type=number],
.gform_wrapper li.gfield_error input[type=password] {
	border: 1px solid #dce4ec !important;
}

.gform_wrapper .gfield_error .gfield_label {
	color: #666 !important;
}

.donors span {
	margin: 5px;
	display: inline-block;
}

.donors span .fa {
	margin-right: 3px;
}

/*--------------------------------------------------------------
16.0 DW Q&A Style
--------------------------------------------------------------*/
.dwqa-container,
.dwqa-list-question .dwqa-header .dwqa-title {
	font-family: 'diavlolight', Arial;
	font-size: 16px;
	line-height: 1.5em;
}

.dwqa-content a {
	color: #f66a5c !important;
}

.dwqa-single-question .dwqa-favourite {
	width: 84px;
	padding: 5px 10px;
}

.dwqa-container .avatar {
	border-radius: 50%;
}

.dwqa-container .dwqa-btn {
	border-radius: 4px;
}

.dwqa-single-question .dwqa-question .dwqa-category {
	line-height: 32px;
}

.dwqa-single-question .dropdown-toggle.circle {
	margin-top: 4px;
}

.dwqa-list-question .dwqa-meta,
.dwqa-list-question .dwqa-view,
.dwqa-list-question .dwqa-vote,
.dwqa-list-question .dwqa-comment {
	font-size: 13px;
}

.single-dwqa-question img {
	border: none;
}

/*--------------------------------------------------------------
17.0 Media Queries
--------------------------------------------------------------*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
	.entry-meta>span {
		display: inline-block;
	}

	.filters li {
		display: inline-block;
	}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.separator span:before,
	.separator span:after {
	  width: 100%;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.view .mask,
	.view .content {
	   display: block;
	}

	.copyright {
		float: right;
	}

	.header-ad {
		display: block;
	}

	.collection-ad {
		display: block;
		text-align: center;
	}
	
	.foot-social {
	text-align: center;
}

	.widget-area {
	display: block;
}

	#heading h1 {
		margin: 60px 0 15px 0;
		font-size: 48px;
	}

	.home h2 {
		font-size: 34px;
	}

	.type-theme h2 {
		font-size: 24px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}