/*
Theme Name: WEB VIS
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Typography
3.0 Elements
4.0 Forms
5.0 Navigation
	5.1 Links
	5.2 Menus
6.0 Accessibility
7.0 Alignments
8.0 Clearings
9.0 Widgets
10.0 Content
	10.1 Posts and pages
	10.2 Asides
	10.3 Comments
11.0 Infinite scroll
12.0 Media
	12.1 Captions
	12.2 Galleries
13.0 Plugins
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
	color: #404040;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Montserrat', Helvetica, arial, sans-serif;
	margin-top: 0;
	font-weight: 700;
	letter-spacing: -0.035em;
	clear: both;
}

h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 28px; line-height: 32px; }
h4 { font-size: 24px; line-height: 28px; }
h5 { font-size: 20px; line-height: 24px; }
h6 { font-size: 16px; line-height: 20px; }

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #f1f1f1; /* Fallback for when there is no custom background color defined. */
}

body.body-home {
	background: #111; /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #25b5f1;
	border-radius: 3px;
	background: #25b5f1;
	box-shadow: none;
	color: #FFF;
	font-size: 13px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	padding: 1.2em 2em 1.2em;
	text-shadow: none;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #07a2e2;
	background: #07a2e2;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #07a2e2;
	background: #07a2e2;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}

textarea {
	padding-left: 3px;
	width: 100%;
}

button.about-close {
	padding: 0 0 20px 0;
	background: none;
	text-transform: uppercase;
	display: none;
	border: none;
}

button.about-close:hover {
	background: none;
	border: none;
}

/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
	color: #25b5f1;
	outline: 0;
	text-decoration: none;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

a:hover {
	color: #07a2e2;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

a:focus {
	outline: 0;
}


/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	width: 100%;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.5em;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a {
}

.main-navigation ul ul :hover > a {
}

.main-navigation ul ul a:hover {
}

.main-navigation ul li:hover > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}

/* Small menu. */
.menu-toggle {
	display: block !important;
	width: 100px;
	height: 100px;
	line-height: 50px;
	border-radius: 0;
	font-size: 30px;
	padding: 0;
}

@media screen and (max-width: 6000px) {
	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		display: block;
	}

	.main-navigation ul {
		display: none;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
7.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-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

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

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

.widget-area section {
	padding-bottom: 15px;
}

/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/

.site-header {
    display: block;
    float: left;
    height: 100%;
    position: fixed;
    text-align: center;
    width: 100px;
    z-index: 1000;
	background: #fff;
}

.site-branding {
	position: absolute;
	top: 20px;
	right: 20px;
	width: auto;
	max-width: 100px;
	max-height: 100px;
	z-index: 9;
}

.site-branding-home {
	position: fixed;
	top: 20px;
	right: 20px;
	width: auto;
	max-width: 200px;
	max-height: 200px;
}

.site-footer {
	width: auto;
	position: relative;
	float: right;
	margin-right: 10px;
}

.site-footer-home {
	width: auto;
	position: fixed;
	bottom: 0;
	right: 0;
}

.site-info {
	font-size: 11px;
	font-weight: 500;
	color: #b3b3b3;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 7px;
}

#home-content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	height: 100vh;
	width: 600px;
	background: #000;
	background: rgba(0,0,0,0.75);
	padding: 20px 50px 20px 150px;
	color: #fff;
	overflow: auto;
}

#home-content h1 {
	font-size: 45px;
	line-height: 52px;
}

.content-container {
	height: 100%;
	width: 100%;
	display: table;
}

.content-container > div {
	display: table-cell;
	vertical-align: middle;
	padding-bottom: 1.5em;
}

ul.social-media-icons {
  	margin: 0;
  	padding: 0;
}

.social-media-icons li {
  	list-style: none outside none;
}

.social-media-icons li .fa {
	display: block;
	width: 100px;
	height: 100px;
	font-size: 30px;
	line-height: 100px;
	border-bottom: 1px solid #eaeaea;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
  	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

.social-media-icons li .fa:hover {
	color: #fff;
	background: #dadada;
	border-bottom: 1px solid #dadada;
	-webkit-transition: ease-in-out 0.2s;
	-moz-transition: ease-in-out 0.2s;
  	-ms-transition: ease-in-out 0.2s;
	-o-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}

ul.home-details {
	margin: 0 0 3em;
	padding: 0 0 3em;
	list-style: none;
	font-size: 13px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

ul.home-details li {
	padding-left: 35px;
	margin-bottom: 15px;
}

ul.home-details li .fa {
	margin-left: -35px;
	margin-top: 2px;
	float: left;
	font-size: 16px;
	color: #25b5f1;
}

button.resume {
	border-color: #ffffff;
	color: #111111;
	background: #ffffff;
	margin-left: 10px;
}

button.resume:hover {
	background: #fff;
	background: rgba(255,255,255,0.8);
	color: #000;
	color: rgba(0,0,0,0.8);
}

.bio-content {
	color: #fff;
	padding: 20px 50px;
}

.about-bio-widget {
    margin: 0 0 8.5em;
}

.bio-image {
	width: 100%;
	position: relative;
}

.bio-image::after {
    background: linear-gradient(to top, #25b5f1, rgba(37, 181, 241, 0)) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

button.hired-about-button {
	background-color:#ffffff;
	color:#25b5f1;
	border-color:#ffffff;
}

button.hired-about-button:hover {
	background-color:#ffffff;
	color:#25b5f1;
	border-color:#ffffff;
}

#home-hero {
	width: 100%;
	height: 100vh;
	position: relative;
	background: #111;
	overflow: hidden;
}

#hero-background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.hero-content-container {
	width: 100%;
	height: 100%;
	display: table;
	z-index: 1;
	position: relative;
}

.hero-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 50px;
	color: #fff;
	color: rgba(255,255,255,0.8);
}

.hero-content h1 {
	font-size: 90px;
	line-height: 100px;
	margin: 0.25em 0;
}

.hero-content h1 span {
	font-style: italic;
}

.home-widget {
  clear: both;
  padding: 40px 0 0;
  text-align: center;
}

/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

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

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

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

#page-content-container {
	padding: 30px 150px 30px 140px;
}

#single-content-container {
	padding: 30px 110px 30px 200px;
}

.blog-archive-container article {
	background: #fff;
	max-width: 900px;
	margin-bottom: 40px;
}

.blog-archive-container .masonry-post {
	width: 30.3333%;
	margin-right: 3%;
	float: left;
}

.blog-archive-container .masonry-post h1.entry-title {
	font-size: 26px;
	line-height: 34px;
}

.blog-archive-container article .entry-header img {
	width: 100%;
	display: block;
}

.blog-archive-container article .entry-title a {
	color: #444;
}

.blog-archive-container article .entry-title a:hover {
	color: #25b5f1;
}

.blog-archive-container article .entry-meta {
	font-size: 13px;
	font-weight: 500;
	color: #999;
}

.blog-archive-container article .entry-content,
.blog-archive-container article .entry-footer {
	padding: 30px;
	margin-top: 0;
}

.single-entry-header {
	position: relative;
	background-color: #333;
	background-position: center center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	padding: 120px 110px 80px 200px;
	color: #fff;
	z-index: -1;
}

.single-entry-header .entry-meta {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.single-entry-header .entry-title {
	font-size: 72px;
	line-height: 80px;
}

.header-image-overlay {
	background: rgba(0,0,0,0.3);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 0;
}

.single-entry-content {
	position: relative;
	z-index: 1;
}

#single-content-container article.post,
#single-content-container article.project {
	background: #fff;
	padding: 10px 30px 30px;
	margin-top: -60px;
}

.search-archive article {
	padding: 30px 30px 5px !important;
	background: #fff;
	margin-top: 0 !important;
}

.hired-aboutme-page {
	background-color:#f1f1f1;
}


.hired-aboutme-header {
	background-color:#333333 !important;
}


.hired-aboutme-header .entry-title {
	color:#ffffff;
}


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

/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comments-area ol {
    list-style: outside none none;
    margin: 0;
}
.comments-area ol.children {
    margin-left: 1.5em;
}
#comments input {
    width: 100%;
}
#comments {
    border-top: 1px dotted #999;
    padding-top: 20px;
}
#comments img.avatar {
    border-radius: 100px;
}
.comment-form-author, .comment-form-email, .comment-form-url {
    float: left;
    font-family: "Montserrat",Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    width: 33.2833%;
}
.comment-form-author, .comment-form-email {
    padding-right: 0.5em;
}
.form-allowed-tags {
    display: none;
}
#reply-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
}
.comment-form-comment {
    font-family: "Montserrat",Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}
.comment-notes {
    font-size: 13px;
    font-style: italic;
}
#comments {
    border-top: 1px dotted #999;
    padding-top: 20px;
}
#commentform {
    margin-bottom: 40px;
}
h2.comments-title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 20px;
    padding-top: 5px;
}
ol.comment-list {
    border-bottom: 1px dotted #999;
    list-style: outside none none;
    margin: 0 0 30px;
    padding-bottom: 30px;
}
li.comment article {
    background: none repeat scroll 0 0 #fff;
    margin-bottom: 8px;
    overflow: auto;
    padding: 15px;
}
footer.comment-meta {
    float: left;
    text-align: center;
    width: 30%;
}
div.comment-author {
    font-size: 16px;
}
div.comment-author img {
    display: block;
    margin: 0 auto;
}
div.comment-content {
    float: right;
    font-size: 16px;
    width: 70%;
}
.comment-metadata {
    font-size: 12px;
}
div.reply {
    display: block;
    font-size: 15px;
    overflow: auto;
    padding-left: 30%;
    width: 100%;
}
p.form-submit input.submit {
    padding: 15px;
}

/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
12.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;
}

/*--------------------------------------------------------------
12.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;
}

/*--------------------------------------------------------------
13.0 Plugins
--------------------------------------------------------------*/

#mt-projects > .grid,
#mt-clients > .grid,
#mt-members > .grid,
#mt-services > .grid,
#mt-testimonials > .grid,
#mt-skills > .grid,
#mt-details .grid,
#home-news .grid,
#home-cta .grid {
	min-width: 0;
}

#mt-projects > .grid-pad,
#mt-clients > .grid-pad,
#mt-members > .grid-pad,
#mt-services > .grid-pad,
#mt-testimonials > .grid-pad,
#mt-skills > .grid-pad,
#mt-details .grid-pad,
#home-news .grid-pad,
#home-cta .grid-pad,
#mt-projects > .grid > [class*="col-"],
#mt-clients > .grid > [class*="col-"],
#mt-members > .grid > [class*="col-"],
#mt-services > .grid > [class*="col-"],
#mt-testimonials > .grid > [class*="col-"],
#mt-skills > .grid > [class*="col-"],
#mt-details .grid [class*="col-"],
#home-news .grid [class*="col-"],
#home-cta .grid [class*="col-"] {
	padding: 0;
}

#secondary #mt-details .grid [class*="col-"] {
	display: block;
	width: 100%;
}

.skills-p {
	padding: 15px !important;
	text-align:left;
}

.bio-content #mt-skills {
	margin-bottom: 30px;
}

.project-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #151515;
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

.project-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.project-content {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}

.project-bg {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    -webkit-opacity: 1;
	opacity: 1;
	background-position: center center;
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

.project-box:hover .project-bg {
    -webkit-opacity: 0.3;
	opacity: 0.3;
    -webkit-transform: scale3d(1.1, 1.1, 1);
	-moz-transform: scale3d(1.1, 1.1, 1);
	-o-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

.project-content div {
   display: table;
   width: 100%;
   height: 100%;
}

.project-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white;
	padding: 15px;
}

.project-content span h3 {
    -webkit-opacity: 0;
	opacity: 0;
	margin: 1em 0;
	font-size: 24px;
	line-height: 28px;
    -webkit-transform: scale3d(1.25, 1.25, 1);
	-moz-transform: scale3d(1.25, 1.25, 1);
	-o-transform: scale3d(1.25, 1.25, 1);
    transform: scale3d(1.25, 1.25, 1);
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

.project-box:hover .project-content span h3 {
	-webkit-opacity: 1;
	opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
	-moz-transform: scale3d(1, 1, 1);
	-o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

h2.project-title,
h2.testimonials-title,
h2.clients-title,
h2.team-title,
h2.services-title {
	text-align: center;
	margin: 1em 0 1.5em;
	letter-spacing: -0.05em;
}

.lax-project article footer {
	display: none;
}

.lax-projects {
	margin-bottom: 4em;
}

#secondary section {
	margin: 0 0 1.5em;
}

#secondary section button {
    display: block;
    margin: 1em auto 0;
}

#secondary > #mt-projects > .grid,
#secondary > #mt-testimonials > .grid,
#secondary > #mt-clients > .grid,
#secondary > #mt-members > .grid,
#secondary > #mt-services > .grid,
#secondary > #mt-skills > .grid,
#secondary > #mt-details > .grid  {
	min-width: 0px;
}

#secondary > #mt-projects > .grid-pad,
#secondary > #mt-testimonials > .grid-pad,
#secondary > #mt-clients > .grid-pad,
#secondary > #mt-members > .grid-pad,
#secondary > #mt-services > .grid-pad,
#secondary > #mt-skills > .grid-pad,
#secondary > #mt-details > .grid-pad {
	padding-top: 0;
	padding-left: 0;
}

#secondary > #mt-projects > .grid > [class*="col-"],
#secondary > #mt-testimonials > .grid > [class*="col-"],
#secondary > #mt-clients > .grid > [class*="col-"],
#secondary > #mt-members > .grid > [class*="col-"],
#secondary > #mt-services > .grid > [class*="col-"],
#secondary > #mt-skills > .grid > [class*="col-"],
#secondary > #mt-details > .grid > [class*="col-"]  {
	padding-right: 0;
	width: 100%;
	overflow: hidden;
}

#secondary > #mt-projects .mt-project {
	margin-bottom: 10px;
}

#secondary > #mt-testimonials .testimonial,
.shortcodes .testimonial {
	margin-bottom: 25px;
}

.shortcodes .testimonial {
	padding: 0 15px;
}

#secondary > #mt-projects img {
	display: block;
	width: 100%;
    -webkit-transform: scale3d(1, 1, 1);
	-moz-transform: scale3d(1, 1, 1);
	-o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

#secondary > #mt-projects img:hover {
    -webkit-transform: scale3d(1.1, 1.1, 1);
	-moz-transform: scale3d(1.1, 1.1, 1);
	-o-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
	-webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s, -moz-transform 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s, -o-transform 0.5s ease 0s;
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}

#secondary > #mt-testimonials .testimonial p,
.shortcodes .testimonial p {
	background: #fff;
	padding: 15px 15px 55px 15px;
	font-size: 13px;
	line-height: 20px;
	font-style: italic;
	margin: 0;
}

#secondary > #mt-testimonials .testimonial img,
.shortcodes .testimonial img {
	width: 80px;
	height: 80px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	margin: -40px auto 0;
	display: block;
}

#secondary > #mt-testimonials .testimonial h3,
.shortcodes .testimonial h3 {
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	margin-bottom: 2px;
	margin-top: 10px;
}

#secondary > #mt-testimonials .testimonial span,
.shortcodes .testimonial span {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	display: block;
}

#secondary > #mt-clients .client-container {
	margin: 15px 0;
}

#secondary > #mt-clients .client-container img {
	display: block;
	margin: 0 auto;
}

.shortcodes .client-container {
	width: 100%;
	padding: 0 25px;
	height: 100px;
	margin-bottom: 20px;
}

.shortcodes .client-container img {
	max-height: 100px;
	margin: 0 auto;
	display: block;
	width: auto;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#secondary > #mt-members .member img,
.shortcodes .member img {
	-webkit-border-radius: 100%;
	border-radius: 100%;
	max-width: 75%;
	display: block;
	margin: 0 auto 15px;
}

#secondary > #mt-members .member h3 {
	font-size: 20px;
	line-height: 24px;
	text-align: center;
}

#secondary > #mt-members .member p {
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

.shortcodes .member {
	text-align: center;
	margin-bottom: 3em;
	padding: 0 20px;
}

.shortcodes .member h3 {
	font-size: 26px;
	line-height: 30px;
}

.shortcodes .member h3:after {
    border: 1px solid #222;
    content: " ";
    display: block;
    margin: 20px auto 15px;
    width: 35px;
}

.shortcodes .member .fa {
	border: 1px solid #1f2023;
    border-radius: 100px;
    color: #1f2023;
    font-size: 16px;
    height: 40px;
    line-height: 38px;
    margin: 5px;
    text-align: center;
	-o-transition:all 0.2s ease-in-out 0s;
  	-ms-transition:all 0.2s ease-in-out 0s;
  	-moz-transition:all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
    width: 40px;
}

.shortcodes .member .fa:hover {
    background: none repeat scroll 0 0 #1f2023;
    color: #fff;
    -o-transition:all 0.2s ease-in-out 0s;
  	-ms-transition:all 0.2s ease-in-out 0s;
  	-moz-transition:all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}

#mt-services .service-content {
	text-align: center;
	margin-bottom: 30px;
}

.shortcodes .service-content {
	padding: 0 20px;
}

#mt-services .service-content .fa,
.shortcodes .service-content .fa {
	border: 2px solid #ffffff;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    color: #ffffff;
    font-size: 20px;
    height: 60px;
    line-height: 54px;
    margin: 12px;
    text-align: center;
    width: 60px;
}

.content-area #mt-services .service-content .fa,
.content-area .shortcodes .service-content .fa {
	border: 2px solid #404040;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    color: #404040;
    font-size: 20px;
    height: 60px;
    line-height: 54px;
    margin: 12px;
    text-align: center;
    width: 60px;
}

#mt-services .service-content h5,
.shortcodes .service-content h5 {
	margin-bottom: 1em;
}

.progressBar div {
	background-color: #25b5f1;
	color:#ffffff;
}

.detail h4 {
	font-size:14px;
}


@media handheld, only screen and (max-width: 959px) {
	.blog-archive-container .masonry-post {
		width: 100%;
		margin-right: 0;
	}

}

@media handheld, only screen and (max-width: 767px) {

	.site-header, .menu-toggle, .social-media-icons li .fa {
		width: 60px;
	}

	.menu-toggle, .social-media-icons li .fa {
		height: 60px;
		line-height: 60px;
	}

	#home-content {
		width: 100%;
		padding: 20px 40px 20px 100px;
	}

	#home-content h1,
	.single-entry-header .entry-title {
		font-size: 24px;
		line-height: 28px;
	}

	ul.home-details {
		margin: 0 0 1.5em;
		padding: 0 0 1em;
	}

	button.resume {
		display: block;
		margin: 10px 0 0 0;
	}

	.site-branding-home,
	.site-footer-home {
		display: none;
	}

	.bio-content {
		padding: 20px 30px;
	}

	.blog-archive-container .masonry-post h1.entry-title {
		font-size: 18px;
		line-height: 24px;
	}

	.single-entry-header {
		padding: 100px 30px 60px 90px;
	}

	#single-content-container {
		padding: 115px 30px 30px 90px;
	}

	#page-content-container {
  		padding: 115px 30px 30px 90px;
	}

	button.about-close {
		display: block;
	}

}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] {
    width: 100%;
    padding: 10px;
    margin: 10px 10px 10px 10px;
    background: #04393f !important;
}

input, select, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 10px 10px 10px;
    background: #04393f !important;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	background: #04393f !important;
    color: #FFF !important;
}

.cbp-spmenu-left.menu-open {
    left: 0px;
    background: #04393f !important;
}

.cbp-primary {
    background: #04393f !important;
}


.wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label {
    color: #fff !important;
}

.wc-blocks-components-select .wc-blocks-components-select__container {
    color: #fff !important;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
    color: #fff !important;
}

.wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input.is-active input[type=email] {
    color: #fff !important;
}

select {
    margin: 0px !important;
}


.woocommerce div.product form.cart .button {
    width: 100%;
    vertical-align: middle;
    float: left;
    padding: 20px;
}


/* Контейнер для кнопки */
.book-preview-single-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

/* Стилизация самой кнопки */
.book-preview-single-wrapper .wc-book-preview-link.button {
    /* Цвет фона и текста */
    background-color: #2ecc71 !important; 
    color: #ffffff !important;            
    
    /* Размеры и позиционирование */
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    border: none;
    height: auto !important;
    
    /* Внутренние отступы: 15px сверху/снизу, 25px слева/справа */
    padding: 15px 25px !important; 
    
    /* Высота строки и размер шрифта, чтобы текст стоял ровно по центру */
    line-height: 1.4 !important;
    font-size: 1.3em !important;
    font-weight: bold !important;

    /* Скругление углов как у желтой кнопки (капсула) */
    border-radius: 50px !important; 
}

    /* Скругление углов других кнопок */
.buy-now-inline-btn {
    border-radius: 50px !important;
}
.back-to-shop-btn {
    border-radius: 50px !important;
}



@media (max-width: 767px) {
    .soon-static-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media handheld, only screen and (max-width: 767px) {
    #single-content-container {
        padding: 5px 30px 30px 90px !important;
    }
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
    background: orange !important;
		border-radius: 50px !important;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    color: #fff !important;
    background: #118a00 !important;
    display: inline-flex;
    font-size: 1.3em;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

/* Делаем все кнопки WooCommerce круглыми */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit, 
.woocommerce #content input.button, 
.woocommerce-page a.button, 
.woocommerce-page button.button, 
.woocommerce-page input.button, 
.woocommerce-page #respond input#submit, 
.woocommerce-page #content input.button,
.woocommerce div.product .cart .single_add_to_cart_button,
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    border-radius: 50px !important;
    padding-left: 25px !important; /* Немного увеличиваем боковые отступы для красоты */
    padding-right: 25px !important;
}

/* Товары WooCommerce по 1 в ряд на мобильных устройствах */
@media (max-width: 767px) {
    .woocommerce ul.products[class*="columns-"] li.product,
    .woocommerce-page ul.products[class*="columns-"] li.product,
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important; /* Отступ между товарами по вертикали */
    }
}




/**
 * Настройка WOO кнопки купить
 */

.woocommerce ul.products li.product .button {
    color: #fff !important;
    /* Усиливаем контраст градиента: верх ещё светлее, низ темнее */
    background: linear-gradient(to bottom, #a0e895 0%, #3e9e31 100%) !important;
    background-size: 100% 200% !important;
    background-position: top center !important;
    
    display: inline-flex;
    font-size: 1.3em;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    border-radius: 50px !important;
    
    /* Делаем обводку чуть темнее и чётче */
    border: 1px solid #2d7824 !important;
    
    /* СЛОЖНАЯ ТЕНЬ ДЛЯ ОБЪЁМА:
       1. Внутренняя белая (блик сверху) — ярче и шире.
       2. Внутренняя тёмная (внизу) — создаёт эффект подгиба.
       3. Внешняя тень — более тёмная, мягкая и глубокая. */
    box-shadow: 
        inset 0 3px 5px rgba(255, 255, 255, 0.7), 
        inset 0 -2px 3px rgba(0, 0, 0, 0.15),
        0 8px 12px rgba(0, 0, 0, 0.25) !important;
    
    transition: all 0.3s ease-out !important;
}

/* Эффект при наведении (ховер) */
.woocommerce ul.products li.product .button:hover {
    background-position: bottom center !important;
    
    /* При ховере внешняя тень становится ещё глубже, 
       а внутренний блик смещается */
    box-shadow: 
        inset 0 1px 3px rgba(255, 255, 255, 0.5), 
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 12px 20px rgba(0, 0, 0, 0.3) !important;
}


.woocommerce div.product form.cart .button {
    color: #fff !important;
    /* Усиливаем контраст градиента: верх ещё светлее, низ темнее */
    background: linear-gradient(to bottom, #a0e895 0%, #3e9e31 100%) !important;
    background-size: 100% 200% !important;
    background-position: top center !important;
    
    display: inline-flex;
    font-size: 1.3em;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    border-radius: 50px !important;
    
    /* Делаем обводку чуть темнее и чётче */
    border: 1px solid #2d7824 !important;
    
    /* СЛОЖНАЯ ТЕНЬ ДЛЯ ОБЪЁМА:
       1. Внутренняя белая (блик сверху) — ярче и шире.
       2. Внутренняя тёмная (внизу) — создаёт эффект подгиба.
       3. Внешняя тень — более тёмная, мягкая и глубокая. */
    box-shadow: 
        inset 0 3px 5px rgba(255, 255, 255, 0.7), 
        inset 0 -2px 3px rgba(0, 0, 0, 0.15),
        0 8px 12px rgba(0, 0, 0, 0.25) !important;
    
    transition: all 0.3s ease-out !important;
}

/* Эффект при наведении (ховер) для страницы товара */
.woocommerce div.product form.cart .button:hover {
    background-position: bottom center !important;
    
    /* При ховере внешняя тень становится ещё глубже */
    box-shadow: 
        inset 0 1px 3px rgba(255, 255, 255, 0.5), 
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 12px 20px rgba(0, 0, 0, 0.3) !important;
}

.book-preview-single-wrapper .button,
.book-preview-single-wrapper button {
    color: #fff !important;
    
    /* Оранжевый сочный градиент: верх светлее, низ темнее */
    background: linear-gradient(to bottom, #ffb03a 0%, #f37303 100%) !important;
    background-size: 100% 200% !important;
    background-position: top center !important;
    
    /* Точное соответствие шрифту и размерам кнопки "В корзину" */
    font-size: 1.4em !important;
    font-weight: bold !important; /* Делаем текст жирным */
    letter-spacing: normal !important;
    text-transform: none !important;
    
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    border-radius: 50px !important;
    
    /* Оранжево-коричневая рамка для чёткости */
    border: 1px solid #c65e02 !important;
    
    /* Объёмные тени (белый внутренний блик сверху + глубокая внешняя тень) */
    box-shadow: 
        inset 0 3px 5px rgba(255, 255, 255, 0.7), 
        inset 0 -2px 3px rgba(0, 0, 0, 0.15),
        0 8px 12px rgba(0, 0, 0, 0.25) !important;
    
    transition: all 0.3s ease-out !important;
}

/* Эффект ховера для оранжевой кнопки */
.book-preview-single-wrapper .button:hover,
.book-preview-single-wrapper button:hover {
    background-position: bottom center !important;
    
    /* Тень становится глубже при наведении */
    box-shadow: 
        inset 0 1px 3px rgba(255, 255, 255, 0.5), 
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 12px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Убираем заголовок вкладки таба */

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    display: none !important;
	}