/* --------------------------------------------

main.css : main style file
Project : cvCard
version : 1.2.1
Author : pixelwars 

---

CONTEXT:

1. BASE
1.1 ELEMENTS
1.2 FONTS
1.3 TYPOGRAPHY
2. FORMS
3. COMMON
4. LAYOUT
5. MODULES
7. MEDIA QUERIES
8. THEME

-------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');  
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&family=Poppins:wght@300;400;500;700&display=swap');

/*  --------------------------------------------

1. BASE (@base) - base html elements

-------------------------------------------- */

/* ----- 1.1 ELEMENTS ----- */   
*,
*:after,
*::before {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html {
font-size: 100%; -webkit-font-smoothing: antialiased;
}
html,
body {
position: relative; width: 100%; height: 100%;
}
body {
font-size: 1em; line-height: 1.66; -webkit-text-size-adjust: none;
}
a {
color: #096; text-decoration: none; outline: none;
}
a:hover,
a:focus {
text-decoration: none; outline: none;
}
a:hover {
color: #5BCF80
}
iframe {
border: none
}
ul {
list-style: square
}
img {
max-width: 100%; height: auto;
}
/* ----- 1.2 FONTS ----- */ 
/* BODY */
body,
input,
textarea,
select,
button {
font-family: Lato, sans-serif; font-weight: 500;
}
/* FONT AWESOME chrome svg hack for smooth icons : 
http://www.adtrak.co.uk/blog/font-face-chrome-rendering/#fix */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
@font-face {
font-family: 'FontAwesome'; src: url('fonts/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
}
}
/* FONT AWESOME ICONS */
.fancy-ico:before,
#fancybox-close:before,
.icon,
.icon:before,
.mask:before,
.widget-twitter ul:before,
.widget-twitter ul li:before,
.alert:before,
.site-alert:before,
blockquote:before,
.testo:before,
.post-format:before,
.flex-direction-nav a:before,
.toggle h4:before,
dd:before,
.portfolio-nav .back:before,
.process:before {
font-family: FontAwesome; font-weight: normal; text-align: left; font-style: normal; display: inline-block; text-decoration: inherit;
}

/* ----- 1.3 TYPOGRAPHY ----- */
/* headings and paragraphs  */
h1 {
font-size: 2.20em; margin: 0.8em 0 0.4em 0;
}
h2 {
font-size: 1.50em; margin: 1.0em 0 0.6em 0; font-weight: 800;
}
h3 {
font-size: 1.20em; margin: 1.0em 0 .6em 0;
}
h4 {
font-size: 1.00em; margin: 2.0em 0 .6em 0;
}
h5 {
font-size: 1.00em; margin: 1.0em 0 .8em 0;
}
h6 {
font-size: 0.90em; margin: 1.0em 0 .8em 0;
}
p {
margin: 1.2em 0
}
/* blockquote  */
blockquote {
position: relative; margin: 2em 0; padding: .3em 2em 1em 2.0em; font-size: 1.6em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 300; font-style: italic;
}
blockquote:before {
display: block; content: "\f10d"; line-height: 1; font-size: 1.2em; position: absolute; left: 0; top: -0.1em; color: #DDE4E6;
}
blockquote cite {
display: block; font-size: 14px; letter-spacing: .04em; text-align: right; padding-right: 1em; margin-top: 12px; font-style: normal; font-weight: 400; color: #B7C6C9;
}
blockquote cite:before {
content: "\2014 \2009"
}
hr {
padding: .6em 0 1em 0; margin-bottom: 1em; outline: 0; border-width: 0 0 1px 0; border-style: solid; border-color: #eee;
}
/* tables  */
table {
font-size: .9em; margin-bottom: 3em; text-align: center;
}
tr th {
padding: .8em 2em .8em 2em; font-weight: 800; border-bottom: 2px solid #DDE4E6; text-transform: uppercase;
}
tr td {
color: #6A7686; padding: .8em 1em .6em 1em; border-bottom: 1px solid #eee;
}
tfoot tr td {
border-bottom: 0
}
tr:nth-child(odd) td {
background: #FAFCFD;
}
/* code and pre  */
code,
pre {
padding: 0 3px 2px; margin-bottom: 4em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: #333333; white-space: pre; overflow: auto;
}
code {
display: inline-block; margin: 0 .4em; padding: 1px 6px; background: #fff; border: 1px solid #DDE4E6; box-shadow: 1px 1px 0 #fff, 2px 2px 0 #DDE4E6;
}
/* lists  */
ol,
ul {
margin: .2em 0 1em 0; line-height: 1.8;
}
ul {
list-style: circle
}
dt {
margin-bottom: .4em;
}
dd {
padding-bottom: 1em; margin-left: 1.4em;
}
dd:before {
content: "\f0a4"; font-size: 14px; margin-right: 12px; color: #B7C6C9;
}


/*  --------------------------------------------

2. FORMS (@forms) - form elements

-------------------------------------------- */
form p {
position: relative; margin: 1.6em 0;
}
label {
display: block; font-size: 10px; font-family: Arial, sans-serif; margin-bottom: .2em; letter-spacing: 1px; color: #666; font-weight: 700; text-transform: uppercase;
}
::-webkit-input-placeholder { 
color: rgba(106, 118, 134, 0.9); font-weight: 600;
}
::-moz-placeholder { 
color: rgba(106, 118, 134, 0.9); font-weight: 600;
} 
:-ms-input-placeholder { 
color: rgba(106, 118, 134, 0.9); font-weight: 600;
}
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea,
select {
padding: .7em; max-width: 100%; font-size: 1em; color: #6A7686; border: 1px solid #b7c6c9; border-radius: 4px; background-color: #fefefe; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 15px; text-transform: none; transition: all 0.3s;
}
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
input:focus,
select:focus,
div.uploader:hover {
border-color: #6A7686; outline: 0; transition: all 0.3s;
}
select {
max-height: 48px; cursor: pointer; line-height: 20px;
}
select option {
font-weight: 600;
text-transform: uppercase;
}
textarea {
width: 50%; min-width: 262px; min-height: 11em;
}
.inline-label {
display: inline-block; margin-right: 2em; font-weight: 500; color: #6A7686; letter-spacing: 0;
}
/* uniform  */
div.selector.disabled,
div.checker.disabled,
div.radio.disabled {
opacity: .4
}
div.selector {
font-size: .9em; padding: .4em; width: 262px !important; line-height: 55px; height: 55px; padding-left: 1em; background: #fff; border: 2px solid #e9eeee; border-radius: 4px;
}
div.selector:before,
div.checker span:before,
div.radio span:before,
div.uploader 
span.action:before {
font-family: FontAwesome; font-weight: normal; font-size: 9px; width: 1.8em; text-align: right; font-style: normal; display: inline-block; text-decoration: inherit;
}
div.selector:before {
position: absolute; top: 0; right: 15px; font-size: 26px; color: #b7c6c9; content: "\f107";
}
div.selector.focus {
border-color: #b7c6c9
}
div.selector.focus:before {
color: #6A7686
}
div.selector.focus,
div.selector.hover,
div.selector:hover {
border-color: #b7c6c9
}
div.selector span {
padding-top: 8px; padding-left: 0; color: #6A7686; background: none;
}
div.selector select {
width: 98% !important; left: 1% !important; height: auto; min-height: 53px; line-height: 53px; font-size: 1em; -webkit-tap-highlight-color: transparent;
}
.android div.selector select {
font-size: 2em
}
/* checkboxes  */
div.checker,
div.radio {
width: 20px; height: 29px; margin-right: 7px;
}
div.checker span,
div.radio span {
background: none
}
div.checker span:before,
div.radio span:before {
text-align: left; position: absolute; top: 0; left: 0; font-size: 22px; line-height: 120%; color: #6A7686; content: "\f096";
}
div.checker span.checked:before,
div.radio span.checked:before {
content: "\f046"
}
div.radio span:before {
content: "\f10c"
}
div.radio span.checked:before {
content: "\f111"
}
/* file upload  */
div.uploader {
width: 262px; height: 55px; background: #fff; border: 2px solid #e9eeee; border-radius: 4px;
}
div.uploader input {
width: 100%; z-index: 100; line-height: 55px; min-height: 55px;
}
div.uploader span.filename {
padding: 0 12px; width: 100%; 100; line-height: 50px; min-height: 55px; border-left: 0; font-size: 13px; color: #6A7686;
}
div.uploader span.action {
width: 10px; text-indent: -999em; background: #fff; padding: 8px 16px 8px 36px; position: absolute; top: 0; right: 0; font-size: 13px; border-left: 2px solid #e9eeee; height: 100%;
}
div.uploader:hover span.action {
border-left-color: #b7c6c9;
}
div.uploader span.action:before {
text-indent: 0; content: "\f0ee"; color: #b7c6c9; font-size: 22px; text-align: center; position: absolute; top: 15px; left: 7px;
}
/* contact form 7 compatibility  */
.wpcf7 {
padding: 0
}
.wpcf7 input[type=submit] {
margin-top: 1.4em
}
.wpcf7 label {
display: inline-block; margin-right: 2em;
}
.wpcf7 div.checker,
.wpcf7 div.radio {
margin-right: 0px
}
/* validation  */
label.error {
position: absolute; bottom: -20px; left: 0; min-width: 180px; font-size: 13px; font-weight: 800; text-transform: uppercase; padding: .2em .8em; border-radius: 3px; background-color: #DA4842; color: #fff; letter-spacing: 0;
}
label.error:after {
content: " "; position: absolute; left: 1.6em; bottom: 100%; pointer-events: none; width: 0; height: 0; border-bottom: 8px solid #DA4842; border-right: 8px solid transparent;
}

select {
border: 1px solid #b7c6c9; 
outline: 0; 
cursor: pointer;
width: 100%;
background-color: #fefefe;
transition: all 0.3s;
line-height: 1.5em;
padding: 0.5em 1em 0.5em 1em;
border-radius: 4px;	
color: #6A7686;
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
}

select:focus {
background-image: linear-gradient(45deg, #6A7686 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, #6A7686 50%),
linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em,
calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
border-color: #6A7686;
outline: 0;
}

/*  --------------------------------------------

3. COMMON (@common) - common and helper classes

-------------------------------------------- */
.cf:before,
.cf:after {
content: " "; display: table;
}
.cf:after {
clear: both
}
.center {
text-align: center
}
.easing,
.media-box .mask,
.client img {
-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.easing-short,
input,
.social li a,
#fancybox-close,
.classic-layout .vs-nav li a,
.latest-posts article header a,
.button,
.portfolio-nav a.button,
.fancy-ico,
.single-page-layout .vs-nav li i,
.entry-title a,
a.more-link,
.format-link .link-content > a:first-child,
.flex-control-paging li a,
.navigation a,
.pagination a,
.entry-meta a,
.nav-single a,
.comment a,
.filters li a,
.entry-title a {
-webkit-transition: color 0.1s, background-color .2s, border-color .2s; transition: color 0.1s, background-color .2s, border-color .2s; text-transform: uppercase;
}
.no-csstransitions #nprogress .spinner {
display: none !important;
}
/*  --------------------------------------------

4. LAYOUT (@layout) : layout styles

-------------------------------------------- */
.container {
position: relative; width: 100%; padding-left: 0; padding-right: 0;
}
.container:before,
.container:after {
display: none;
}
.no-touch .container {
overflow-x: hidden
}
.content {
position: relative; padding: 1em 2em; margin: auto; width: 100%; text-align: left;
}
.readable-content {
width: 90%; max-width: 740px; margin-left: auto; margin-right: auto;
}
.full-width-content {
max-width: 90%; margin-left: auto; margin-right: auto;
}
.hentry {
padding: 0.25em 0 2.5em 0
}
.entry-title {
margin-top: 0; font-size: 3.0em; line-height: 1.2; font-weight: 800; text-align: center;
}
.entry-content {
padding: 0.25em 0 1.250em 0
}

/* ----- 4.1 HEADER ----- */
.header {
z-index: 200; margin: 0 auto; padding: 15px; width: 100%; text-align: center; -webkit-backface-visibility: hidden; background-image: url("../images/bg-1.jpg"); background-repeat: no-repeat; background-position: top; background-size: 100% 265px;
}
.header h1 {
margin: 0; padding: 0; font-weight: 400; font-size: 1.3em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); line-height: 1.4; -webkit-backface-visibility: hidden; 	
}
.header img {
max-height: 180px; border-radius: 0%; margin-bottom: 10px;
}
.header p {
font-size: 0.9em; font-weight: 600; width: 200px; margin: 0 auto; margin-top: 20px; display: block; font-style: italic; padding: 6px 10px; background: #FAF46A; color: #345; color: rgba(0,0,0,.7); border-radius: 4px; line-height: 1;
}
/* single page menu  */
.single-page-layout .vs-nav li a {
letter-spacing: -1px; margin: 0 4px; padding: 0;
}
.single-page-layout .vs-nav li i {
font-size: 17px; display: inline-block; width: 58px; line-height: 53px; text-align: center; border-radius: 50%; color: #6A7686; border: 2px solid #ECF0F1; background: #fff;
}
.single-page-layout .vs-nav li i:hover,
.single-page-layout .vs-nav li i.active {
color: #fff; border-color: transparent;
}

/* TRIPLE LAYOUT */
.vs-nav {
position: relative; display: block; margin: .7em auto 0 auto; padding: 0; list-style: none;
}
.vs-triplelayout .vs-nav {
width: 33.33%; max-width: 360px; height: 60px;
}
.vs-nav li {
display: inline-block; margin-bottom: 10px; text-align: center; text-decoration: none;
}
.vs-triplelayout .vs-nav li {
position: absolute; visibility: hidden; width: 100%;
}
.vs-nav li a {
font-family: Arial, Helvetica, sans-serif; position: relative; color: #D0DADC; letter-spacing: -2px; text-decoration: none; font-weight: 700; font-size: 2.7em;
}
.vs-nav li a:hover {
color: #BECACC;
}
.vs-nav li a:focus,
.vs-triplelayout .vs-nav .vs-nav-current a,
.vs-nav li.current_page_item a,
.container.vs-move-left .vs-nav-right a,
.container.vs-move-right .vs-nav-left a {
color: #345;
}
.container.vs-move-left .vs-nav-current a,
.container.vs-move-right .vs-nav-current a {
color : #D0DADC
}
.vs-triplelayout .vs-nav .vs-nav-left,
.vs-triplelayout .vs-nav .vs-nav-right,
.vs-triplelayout .vs-nav .vs-nav-left-outer,
.vs-triplelayout .vs-nav .vs-nav-right-outer,
.vs-triplelayout .vs-nav .vs-nav-current {
visibility: visible
}
.vs-triplelayout .vs-nav .vs-nav-current {
left: 0%
}
.vs-triplelayout .vs-nav .vs-nav-current a {
cursor: default
}
.vs-triplelayout .vs-nav .vs-nav-left {
left: -100%
}
.vs-triplelayout .vs-nav .vs-nav-right {
left: 100%
}
.vs-triplelayout .vs-nav .vs-nav-right-outer {
left: 200%
}
.vs-triplelayout .vs-nav .vs-nav-left-outer {
left: -200%
}
.container.vs-move-left .vs-nav-left,
.container.vs-move-left .vs-nav-left-outer,
.container.vs-move-left .vs-nav-current,
.container.vs-move-left .vs-nav-right,
.container.vs-move-left .vs-nav-right-outer {
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);
}
.container.vs-move-right .vs-nav-left,
.container.vs-move-right .vs-nav-left-outer,
.container.vs-move-right .vs-nav-current,
.container.vs-move-right .vs-nav-right,
.container.vs-move-right .vs-nav-right-outer {
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);
}
.container.vs-move-left .vs-nav-left,
.container.vs-move-right .vs-nav-right {
opacity: 0
}
.wrapper {
position: relative; display: block; overflow: hidden; width: 100%;
}
.vs-triplelayout .wrapper {
min-height: 100%
}
.wrapper > section {
z-index: 1; min-height: 100%; margin: 0 auto; padding: 0 0 30px; width: 100%; background: #fff;
}
.vs-triplelayout .wrapper > section {
position: absolute; top: 0; left: 0%; margin: 0; visibility: hidden; -webkit-backface-visibility: hidden;
}
.vs-triplelayout .wrapper > section:not(.vs-current) {
overflow: hidden; height: 100%;
}
.vs-triplelayout .wrapper .vs-left,
.vs-triplelayout .wrapper .vs-left-outer,
.vs-triplelayout .wrapper .vs-current,
.vs-triplelayout .wrapper .vs-right,
.vs-triplelayout .wrapper .vs-right-outer {
visibility: visible
}
.vs-triplelayout .wrapper .vs-left {
left: -100%;
}
.vs-triplelayout .wrapper .vs-left-outer {
left: -200%;
}
.vs-triplelayout .wrapper .vs-current {
position: relative; z-index: 100;
}
.vs-triplelayout .wrapper .vs-right {
left: 100%;
}
.vs-triplelayout .wrapper .vs-right-outer {
left: 200%;
}

.container.vs-move-left .vs-left,
.container.vs-move-left .vs-current,
.container.vs-move-left .vs-right,
.container.vs-move-left .vs-right-outer {
-webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);
}
.container.vs-move-right .vs-left,
.container.vs-move-right .vs-left-outer,
.container.vs-move-right .vs-current,
.container.vs-move-right .vs-right {
-webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);
}
/* FAST NAVIGATE MODE */
.fast-navigate .container.vs-move-left .vs-left,
.fast-navigate .container.vs-move-left .vs-current,
.fast-navigate .container.vs-move-left .vs-right,
.fast-navigate .container.vs-move-left .vs-right-outer {
-webkit-transition: -webkit-transform 0.1s; transition: transform 0.1s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);
}
.fast-navigate .container.vs-move-right .vs-left,
.fast-navigate .container.vs-move-right .vs-left-outer,
.fast-navigate .container.vs-move-right .vs-current,
.fast-navigate .container.vs-move-right .vs-right {
-webkit-transition: -webkit-transform 0.1s; transition: transform 0.1s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);
}
.fast-navigate .container.vs-move-left .vs-nav-left,
.fast-navigate .container.vs-move-left .vs-nav-left-outer,
.fast-navigate .container.vs-move-left .vs-nav-current,
.fast-navigate .container.vs-move-left .vs-nav-right,
.fast-navigate .container.vs-move-left .vs-nav-right-outer {
-webkit-transition: -webkit-transform 0.1s, opacity 0.1s; transition: transform 0.1s, opacity 0.1s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);
}
.fast-navigate .container.vs-move-right .vs-nav-left,
.fast-navigate .container.vs-move-right .vs-nav-left-outer,
.fast-navigate .container.vs-move-right .vs-nav-current,
.fast-navigate .container.vs-move-right .vs-nav-right,
.fast-navigate .container.vs-move-right .vs-nav-right-outer {
-webkit-transition: -webkit-transform 0.1s, opacity 0.1s; transition: transform 0.1s, opacity 0.1s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);
}
/* Page Opacity Effect */
.vs-triplelayout .vs-right,
.vs-triplelayout .vs-left,
.vs-triplelayout .vs-left-outer,
.vs-triplelayout .vs-right-outer,
.container.vs-triplelayout.vs-move-left .vs-current,
.container.vs-triplelayout.vs-move-right .vs-current {
opacity: .3
}
.container.vs-triplelayout.vs-move-left .vs-right,
.container.vs-triplelayout.vs-move-right .vs-left {
opacity: 1
}
.vs-sidenav {
display: none;
}
.vs-sidenav div {
position: fixed; top: 0; z-index: 500; width: 10%; height: 100%; cursor: pointer;
}
.vs-sidenav .vs-sidenav-left {
left: 0px
}
.vs-sidenav .vs-sidenav-right {
right: 0px
}
/* classic layout : for mobile and non supported browsers */
.classic-layout .wrapper {
max-width: 1440px; margin-left: auto; margin-right: auto;
}
.classic-layout .vs-nav {
margin-top: 2em; 
margin-bottom: 1em;
}
.classic-layout .vs-nav li a {
font-size: 20px; font-weight: 400; display: inline-block; margin: 0 2px; width: 50px; height: 50px; color: #18191D; background-color: #fff; line-height: 48px; letter-spacing: 0; border: 2px solid #fff; border-radius: 50%;;
}
/* Classic Layout Nav Active Item */
.classic-layout .vs-nav li a:hover,
.classic-layout .vs-nav li.current_page_item a {
color: #fff; background: #FAB921; border-color: transparent;
}
.classic-layout .vs-nav li a span{
display: block; font-size: 9px; color: #333; text-transform: uppercase; margin-top: 7px; font-weight: 700!important;
}
.classic-layout .vs-nav li span{
display: block; font-size: 9px; color: #333; text-transform: uppercase; margin-top: 7px; font-weight: 700!important;
}

/* SEARCH */
.header-search { 
display: none; padding: 1.4em 0;
}
.search-link { 
cursor: pointer; 
} 
.search-link:hover, 
.search-link.active { 
border-color: rgba(0, 0, 0, 0) !important; background: #456 !important; 
} 
#search-form { 
position:relative; margin-left: -14px; 
}
#search-form #search { 
width: 280px; padding-right: 36px; outline: 0; 
}
#search-form #search:focus { 
color:#333; 
}
#search-submit { 
margin: 0 0 0 -40px; font-size:17px; text-shadow:none; color:#444; border:0; outline:0; padding:0; background:none; 
}


/*  --------------------------------------------

5. MODULES @modules : reusable styles

-------------------------------------------- */

/* HEADING WITH ICON */
h2 i[class^="icon-"], h2 i[class*=" icon-"], h2 i.fa {
font-size: 16px; margin-right: 14px; line-height: 39px; text-align: center; color: #B7C6C9; background: #fff; border-radius: 50%; border: 4px solid #F4F6F7; display: inline-block; width: 47px;
}
h2 i[class^="icon-"]:before, h2 i[class*=" icon-"]:before, h2 i.fa:before {
display: inline; margin-left: 0; margin-right: 0;
}

/* SECTION-TITLE */
.section-title { 
position: relative; margin-bottom: 1em; font-size: 12px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; 
}
.section-title:before { 
content: ""; position:absolute; top: 50%; left: 0; margin-top: 3px; width: 100%; border-bottom: 4px solid #F4F6F7; 
}
.section-title span { 
position:relative; display: inline-block; padding-right: 1.4em; background: #fff; 
}
.row + .section-title {
margin-top: 3em;
}
.section-title + p {
margin-top: 2em;
}

/* INTRO */
.intro {
text-align: center; padding: 0 0 1em 0;
}
.intro h2 {
font-size: 2.0em; font-weight: 300; line-height: 1.4;
}
.intro h2 strong {
letter-spacing: -1px; font-weight: 800;
}

/* ROTATE WORDS */
.rotate-words {
display: inline-block; min-width: 180px; min-height: 34px; text-align: left; text-indent: 4px;
}
.rotate-words span {
position: absolute; opacity: 0; font-weight: 800; letter-spacing: -1px;
}
.rotate-words span.rotate-in {
animation: rotateInWord .5s linear forwards;
-webkit-animation: rotateInWord .5s linear forwards;
}
.rotate-words span.rotate-out {
animation: rotateOutWord .5s linear forwards;
-webkit-animation: rotateOutWord .5s linear forwards;
}
.rotate-words span:first-child {
opacity: 1; 
}
.no-csstransforms .rotate-words span {
display: none; opacity: 1;
}

@-webkit-keyframes rotateInWord {
0% { opacity: 0; -webkit-transform: translateY(-30px); }
100% { opacity: 1; -webkit-transform: translateY(0px); }
}
@-webkit-keyframes rotateOutWord {
0% { opacity: 1; -webkit-transform: translateY(0px); }
100% { opacity: 0; -webkit-transform: translateY(30px); }
}
@keyframes rotateInWord {
0% { opacity: 0; transform: translateY(-30px); }
100% { opacity: 1; transform: translateY(0px); }
}
@keyframes rotateOutWord {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(30px); }
}

/* TWITTER WIDGET */
.widget-twitter ul {
list-style: none; padding: 0;
}
.widget-twitter li {
position: relative; margin-bottom: .2em; padding-top: .1em; font-size: 14px;
}
.widget-twitter li:before {
content: "\f099"; position: absolute; top: -12px; left: 50%; font-size: 36px; color: #567; margin-left: -16px;
}
.widget-twitter .tweet {
padding: 1.5em 2.4em; color: #6A7686; background: #E4F1F6; border-radius: 4px;
}
.widget-twitter .timePosted {
font-size: 10px; color: #B7C6C9; margin-top: -12px; text-align: center; letter-spacing: 1px; text-transform: uppercase;
}
.widget-twitter .timePosted a {
color: #ccc;
}
.widget-twitter .interact {
display: none; 
}
.widget-twitter ul li span + a {
float: right; margin-top: .4em; color: #aaa;
}

/* SERVICE */
.service {
text-align: center; padding: 1.6em 0 2em 0;
}
.service:last-child:after {
display: none;
}
.service i { 
display: inline-block; width: 86px; line-height: 86px; font-size: 32px; color: #fff; border-radius: 50%; text-align: center; background: #5BCF80;
}
.service i:before { 
margin: 0 .2em; display: inline-block; 
}
.service p {
font-size: 15px; margin-top: .4em; color: #96A5A8;
}
.service h4 {
font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800;
}
@media (min-width: 768px) and (max-width: 991px) {
.col-sm-6:nth-child(2n+1) {
clear: left;
}
}

/* PROCESS */
.process { 
position: relative; text-align: center; 
}
.process:before { 
content: "\f178"; position:absolute; top: 50%; margin-top: -10px; right: -30px; 
}
.process .process-box { 
width: 120px; height: 120px; padding: 24px 10px; margin: 1em auto 3em; background: #EAEEEF; border-radius: 50%; 
}
.process-box i { 
font-size: 38px; width: 52px; line-height: 52px; 
}
.process-box h4 { 
margin: 0; font-weight: 400; font-size: 11px; letter-spacing: .07em;
}
.row [class^="col-"]:last-child .process:before { 
display: none; 
}

/* FUN FACT */
.fun-fact { 
padding: 2em .2em 4em 0; 
}
.fun-fact i { 
display: block; float: left; margin-bottom: 12px; width: 82px; line-height: 64px; font-size: 61px; border-radius: 50%; text-align: center; 
}
.fun-fact i:before { 
margin: 0 .2em; display: inline-block; 
}
.fun-fact h4 { 
margin: 5px 0 0 96px; font-size: 24px; letter-spacing: 1px; line-height: 1.2; font-weight: 300; 
}

/* CLIENT */
.client { 
margin: 1em 0; text-align: center; 
}
.client img { 
max-width:90%; max-height: 64px; opacity: .4; 
}
.client a:hover img { 
opacity: 1; 
}

/* TIMELINE */
.timeline {
position: relative; padding-left: 112px; padding-bottom: 8px;
}
.timeline h2 {
position: relative; margin-bottom: 2em; font-size: 19px; font-weight: 300; letter-spacing: 1px;
}
.timeline h2 [class^="icon-"], .timeline h2 [class*=" icon-"], .timeline h2 .fa {
display: block; font-size: 28px; position: absolute; top: -27px; left: -112px; width: 86px; line-height: 78px; margin: 0;  z-index: 120;
}
.timeline h2 [class^="icon-"]:before, .timeline h2 [class*=" icon-"]:before, .timeline h2 i.fa:before {
margin:0; 
}
.timeline h5 {text-transform: uppercase;}		
.event {
position: relative; padding: 26px 32px; margin-bottom: 3em; background: #ffffff; border: 3px solid #EDF1F3; border-radius: 6px;
}
.event:after,
.event:before {
right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.event:after {
border-right-color: #ffffff; border-width: 10px; margin-top: -10px;
}
.event:before {
border-right-color: #EDF1F3; border-width: 15px; margin-top: -15px;
}
.event .date {
position: absolute; top: 45%; margin-top: -24px; left: -106px; width: 68px; height: 68px; line-height: 78px; text-align: center; background: #999; display: block; z-index: 120; color: #fff; border-radius: 50%; border: 3px solid #999; font-family: Oswald; font-weight: 400; font-size: 11px; letter-spacing: 1px;
}
.event .date i{
font-size: 35px;
}
.event.current .date {
border-color: #009966; outline: 5px solid #FFF; background-color: #009966;
}
.timeline + .timeline .event:last-child p:before {
height: 76%
}
.event h4 {
margin: 0; padding: 0;
}
.event h5 {
margin: 0; padding: 0 0 .3em 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: #888; margin-top: 10px;
}
.event p {
margin: .6em 0 .2em 0; font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
}
.event p:before {
display: block; content: ""; position: absolute; top: -30px; left: -72px; height: 160%; width: 4px; background: #F4F6F7;
}

@media only screen and (max-width: 762px) {
.event p{
text-align: center;	
}
.timeline h5{
text-align: center;	
}
}

/* SKILLS */
.skillset {
padding: 0 0 3.2em 0
}
.skill-unit {
padding-bottom: 0
}
.skill-unit h4 {
margin-bottom: -26px; font-weight: 800; font-size: 11px; letter-spacing: 1px; color: #fff; position: relative; z-index: 100; padding-left: 14px; text-transform: uppercase;
}
.skill-unit .bar {
position: relative; width: 100%; height: 36px;
}
.skill-unit .bar .progress {
position: absolute; top: 0; left: 0; width: 0; height: 100%; border-radius: 4px; background : #FAB921; /*box-shadow: 4px 4px 0 #e7e7e7;*/
}

/* TESTIMONIAL */
.testo-group {
padding: 1em 0 2em 0;
}
.testo {
position: relative; padding: 1.4em 2.2em; margin: 0 16px 40px 0; background: #fafafa; border-radius: 6px; box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.testo .price {
display: block; float: right; width: 100px; height: 100px; background-color: #333; color: #fff; border-radius: 50%; margin: -40px -60px 10px 20px; border: 8px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3); line-height: 85px; font-size: 20px; text-align: center;
}
.testo h4 {
position: relative; margin: 0; font-weight: 700; color: #6A7686; font-size: 16px; text-transform: uppercase;
}
.testo span {
display: inline-block; font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #777; text-transform: uppercase; 
}
.testo p {
position: relative; margin: .6em 0 0.2em 0; font-size: 11px; line-height: 120%; color: #6A7686; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;
}

.testo p span{
font-weight: 400;
font-size: 10px;
}

.testo p b {
margin-right: 10px;	
}

.detalhes-1 { font-family: "Poppins", sans-serif; font-weight: 100; font-size: 20px;  margin-bottom: 30px; }

.detalhes-2 {
padding: 20px 40px!important;
background: #fafafa; 
border-radius: 6px; 
box-shadow: 0 0 5px rgba(0,0,0,0.3); 	
}
.detalhes-2 h4{
font-family: "Poppins", sans-serif; font-weight: 600; font-size: 20px; margin: 0!important; text-transform: uppercase; letter-spacing: 1px;
}
.detalhes-2 p{
font-weight: 500; font-size: 12px; margin: 0!important; padding-top: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.detalhes-2 p span{
float: right;
font-size: 14px;
font-weight: 700;
}
.detalhes-2 a{
margin-top: 15px;
}

/* DOWNLOAD BUTTON */		
.download-button { 
margin-bottom: 4em; 
}
.download-button .button { 
padding: 1.7em 3em; margin-top: 1em;
}

.empresa-img {
display: block; width: 100%; margin: 10px; height: auto; border-radius: 50%!important; border: 5px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.letter-info { padding-top: 20px; }		
.letter-info p i {
display: inline-block; padding: 7px 9px; font-size: 15px; color: #fff; background: #5BCF80; margin: 0 14px 10px 0; border-radius: 50%; transition: all 0.3s;
}
.letter-info p i:hover {
background: #FAB921; transition: all 0.3s;
}		
.letter-info p {
margin: 0; font-size: 14px;
}
@media only screen and (max-width: 992px) {
.empresa-img {
width: 320px;
display: block;
position: relative;
margin: 0 auto;
}
.letter-info {
padding-top: 0px;
margin-top: 30px;
}
}
/* SOCIAL LINKS */
.social {
padding: 0; margin: 2em 0 4em 0; list-style: none;
}
.social li {
display: inline-block; padding: 0; margin-bottom: -3px;
}
.social li a {
display: block; float: left; margin: 0 .4em .3em 0; text-align: center; font-size: 14px; font-family: "fontello"; width: 42px; line-height: 40px; color: #516075; border-radius: 4px; border: 1px solid #dde4e6;
}
.social li a.facebook:before {
content: '\e800'
}
.social li a.twitter:before {
content: '\e801'
}
.social li a.flickr:before {
content: '\e810'
}
.social li a.rss:before {
content: '\e80b'
}
.social li a.dribbble:before {
content: '\e806'
}
.social li a.lastfm:before {
content: '\e80a'
}
.social li a.linkedin:before {
content: '\e802'
}
.social li a.vimeo:before {
content: '\e80c'
}
.social li a.forrst:before {
content: '\e80d'
}
.social li a.skype:before {
content: '\e812'
}
.social li a.picasa:before {
content: '\e8e0'
}
.social li a.tumblr:before {
content: '\e815'
}
.social li a.behance:before {
content: '\e868'
}
.social li a.blogger:before {
content: '\e80f'
}
.social li a.delicious:before {
content: '\e818'
}
.social li a.digg:before {
content: '\e807'
}
.social li a.friendfeed:before {
content: '\e867'
}
.social li a.github:before {
content: '\e805'
}
.social li a.wordpress:before {
content: '\e816'
}
.social li a.google-plus:before {
content: '\e803'
}
.social li a.youtube:before {
content: "\e813"
}
.social li a.pinterest:before {
content: "\e804"
}
.social li a.instagram:before {
content: "\e8c2"
}
.social li a.stack-overflow:before {
content: "\e817"
}
.social li a.foursquare:before {
content: "\e80e"
}
.social li a.xing:before {
content: "\e809"
}
.social li a.weibo:before {
content: "\e811"
}
.social li a.soundcloud:before {
content: "\e814"
}
.social li a.fivehundredpx:before {
content: "\e856"
}
.social li a.slideshare:before {
content: "\e8db"
}	
.social li a.deviantart:before {
content: "\e8e6";
}
.social li a:hover {
color: #fff !important; background-color: #333; border-color: transparent;
}
.social li a.facebook:hover {
background-color: #3c5fac
}
.social li a.twitter:hover {
background-color: #5ec3df
}
.social li a.flickr:hover {
background-color: #FF0084
}
.social li a.rss:hover {
background-color: #ff9900
}
.social li a.dribbble:hover {
background-color: #EA4C89
}
.social li a.lastfm:hover {
background-color: #D51007
}
.social li a.linkedin:hover {
background-color: #2089b5
}
.social li a.vimeo:hover {
background-color: #0dadd6
}
.social li a.google-plus:hover {
background-color: #c63d2d
}
.social li a.forrst:hover {
background-color: #5b9a68
}
.social li a.skype:hover {
background-color: #00aff0
}
.social li a.picassa:hover {
background-color: #ffd34e
}
.social li a.youtube:hover {
background-color: #c8312b
}
.social li a.pinterest:hover {
background-color: #cb2027
}
.social li a.tumblr:hover {
background-color: #2C4762
}
.social li a.behance:hover {
background-color: #3878F6
}
.social li a.blogger:hover {
background-color: #fc9947
}
.social li a.delicious:hover {
background-color: #3274d1
}
.social li a.digg:hover {
background-color: #205891
}
.social li a.friendfeed:hover {
background-color: #2f72c4
}
.social li a.github:hover {
background-color: #222
}
.social li a.wordpress:hover {
background-color: #0083b3
}
.social li a.instagram:hover {
background-image: linear-gradient(to bottom, #5442D4 , #E2225D, #FEC053);
transition: all 0.3s;
}
.social li a.stack-overflow:hover {
background-color: #F90
}
.social li a.foursquare:hover {
background-color: #009FE0
}
.social li a.xing:hover {
background-color: #006567
}
.social li a.weibo:hover {
background-color: #E64141
}
.social li a.soundcloud:hover {
background-color: #FA3219
}
.social li a.fivehundredpx:hover {
background-color: #222
}
.social li a.slideshare:hover {
background-color: #ED9D2C
}
.social li a.deviantart:hover {
background-color: #506256;
}

/* MAP */
.map {
margin: 1.6em 0 3em 0; line-height: 0; border: 1px solid #E9EEEE; box-shadow: 0 0 5px rgba(0,0,0,0.3); 
}
.map iframe {
width: 100%; border-width: 0; outline: none; height: 350px; border-radius: 4px;
}
.map-canvas {
height: 342px; margin: 0px; padding: 0px; line-height: 1.6;
}
.map-canvas img { 
max-width: none; 
}

/* FILTERS */
.filters {
list-style: none; padding: 0; margin: 2em 0; text-align: center;
}
.filters li {
display: inline-block; margin: .6em .4em;
}
.filters li a {
color: #666; font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 7px 12px; border: 1px solid #888; border-radius: 30px;
}
.filters li a:hover {
color: #FAB921; border-color: #FAB921;
}
.filters .current a,
.filters .current a:hover {
color: #fff; background: #FAB921; border-color: transparent;
}

.mh-300 {
min-height: 300px!important;	
}

/* MEDIA CELL DESC */
.media-cell-desc {
display: block; padding: 10px 20px; border-style: solid; border-width: 1px; text-align: center;  background: #fff; border-color: #EAEDEF; border-radius: 0 0 10px 10px; min-height: 180px;
}	
.media-cell-desc h3 {
text-transform: uppercase; padding: 0; margin-top: 10px; margin-bottom: 10px; font-weight: 700; font-size: 14px; letter-spacing: .03em;
}
.media-cell-desc h3 a {
color: #444; border-bottom: 2px solid #FFF; transition: all 0.3s;
}
.media-cell-desc h3 a:hover {
color: #FAB921; transition: all 0.3s;
}
.media-cell-desc h3 a:active {
color: #FAB921; transition: all 0.3s;
}
.media-cell-desc p {
font-size: 14px; letter-spacing: .04em; color: #555; font-weight: 400;
}
.media-cell-desc small {
font-size: 8px; letter-spacing: .04em; margin-bottom: 20px!important; color: #333; font-weight: 600; text-transform: uppercase;
}
.media-cell-desc .date {
float: left; margin-right: 16px; padding: 6px 7px; text-align: center; font-size: 14px; line-height: 1; color: #fff; border-radius: 2px; margin-top: -66px; position: relative; background: #FFF; margin-left: 0%; background: #5BCF80;;
}
.media-cell-desc .date .day {
display: block; font-size: 26px; letter-spacing: -1px; font-weight: 800; color: #fff;
}
.portfolio-items .media-cell-desc {
text-align: center; 
}

/* MEDIA BOX */
.media-box {
position: relative; margin-bottom: 0; background-color: #fff; border: 1px solid #eaeaea; overflow: hidden; border-radius: 10px 10px 0 0;
}

.price {
display: block; margin-top: 20px; position: relative; color: #FAB921; text-align: center; font-size: 18px; font-weight: 600;
}

.media-box a {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; filter: alpha(opacity = 0);
}

.media-box .tela {
display: block;
width: 100%;
height: 100%;
z-index: 999;
position: absolute;
background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}
.media-box img {
display: block; width: 100%;
transition: all 0.3s;
}	
.media-box:hover img {
transform: scale(1.2);
transition: all 0.3s;
}
.media-box .mask {
opacity: 0; filter: alpha(opacity = 0); position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; text-align: center; overflow: hidden; background: #333; background: rgba(0, 0, 0, 0.6);
}
.media-box:hover .mask {
opacity: 1; filter: alpha(opacity = 100);
}
.media-box .mask:before {
position: absolute; left: 50%; top: 50%; margin: -38px 0 0 -38px; width: 76px; line-height: 76px; font-size: 18px; text-align: center; content: "\f0a6"; color: #fff; background: #FAB921; border-radius: 50%; 
}	
.hentry.video .mask:before {
content: "\f03d"
}
.hentry.audio .mask:before {
content: "\e888"; font-family: Fontello;
}
.hentry.image .mask:before {
content: "\f03e"
}
.hentry.url .mask:before {
content: "\e86c"; font-family: Fontello;
}
.latest-posts .mask:before {
content: "\f040"
}

/* LATEST POSTS */
.latest-posts {
margin-top: 2em;
}

/* MEDIA WRAP */
.media-wrap iframe {
width: 100%; 
}

/* HTTP ALERT */
.http-alert {
text-align: center
}
.http-alert h1 {
margin: 0 0 .1em 0; font-size: 9em; letter-spacing: .03em; line-height: 1; color: #eee; text-shadow: 11px 12px 12px rgba(0, 0, 0, 0.2), -1px -1px 1px #345, 1px 1px 0 #345, 3px 3px 0 #345, 4px 4px 0 #345, 5px 5px 0 #345, 6px 6px 0 #345, 7px 7px 0 #345, 8px 8px 0 #345, 9px 9px 0 #345, 10px 10px 0 #345, 11px 11px 0 #345;
}
.http-alert p {
font-style: italic
}

/* TAGLINE */
.tagline {
margin: 2em 0; padding: 1em 2em;
}
.tagline *:first-child {
margin-top: 0
}
.tagline * {
padding-bottom: 0; margin-bottom: 0;
}
.tagline h3 {
font-size: 2em; padding: 0; line-height: 1.4; font-weight: 300; color: #6A7686;
}

/* DROP CAP */
.drop-cap:first-letter {
font-size: 50px; font-weight: 800; line-height: .8; float: left; padding: 4px 16px 0px 0;
}

/* ICON LIST */
.icon-list {
list-style: none; padding-left: 12px;
}
.icon-list i {
padding-right: 0; color: #B7C6C9; font-size: 14px; line-height: 23px; width: 27px; text-align: center; display: inline-block; margin-right: 12px;
}

/* BUTTONS */
input[type=submit],
input[type=button],
button,
a.button {
display: inline-block; position: relative; padding: 1.3em 2.6em; font-size: 11px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; line-height: 1.2; border: 0; outline: 0; background: #fff; border: 2px solid #6A7686; color: #6A7686; text-shadow: none; border-radius: 4px;
}
input[type=submit]:hover,
input[type=button]:hover,
button:hover,
a.button:hover,
input[type=submit].colored,
input[type=button],
button.colored,
a.button.colored {
color: #fff; background-color: #FAB921; border-color: transparent; transition: all 0.3s;
}
input[type=submit].colored:hover,
input[type=button]:hover,
button.colored:hover,
a.button.colored:hover {
transform: scale(1.1); 
transition: all 0.3s;
}
input[type=submit].colored:active,
input[type=button]:active,
button.colored:active,
a.button.colored:active {
background: #FAB921; 
}
input[type=submit]:active,
input[type=button]:active,
button:active,
a.button:active {
color: #eee;
}
/* Large Buttons */
input[type=submit].big,
input[type=button].big,
button.big,
a.button.big {
padding: 1.8em 3.6em;
}
/* Small Buttons */
input[type=submit].small,
input[type=button].small,
button.small,
a.button.small {
font-size: 10px; padding: .8em 1.6em;
}
/* blue buttons  */
input[type=submit].blue:hover,
input[type=button].blue:hover,
button.blue:hover,
a.button.blue:hover,
input[type=submit].blue.colored,
input[type=button].blue.colored,
button.blue.colored,
a.button.blue.colored {
background: #37B5FF
}
input[type=submit].blue.colored:hover,
input[type=button].blue.colored:hover,
button.blue.colored:hover,
a.button.blue.colored:hover {
background: #008DE1
}
input[type=submit].blue:active,
input[type=button].blue:active,
button.blue:active,
a.button.blue:active,
input[type=submit].blue.colored:active,
input[type=button].blue.colored:active,
button.blue.colored:active,
a.button.blue.colored:active {
background: #008DE1
}

/* purple buttons  */
input[type=submit].purple:hover,
input[type=button].purple:hover,
button.purple:hover,
a.button.purple:hover,
input[type=submit].purple.colored,
input[type=button].purple.colored,
button.purple.colored,
a.button.purple.colored {
background: #9673FF
}
input[type=submit].purple.colored:hover,
input[type=button].purple.colored:hover,
button.purple.colored:hover,
a.button.purple.colored:hover {
background: #972FFF
}
input[type=submit].purple:active,
input[type=button].purple:active,
button.purple:active,
a.button.purple:active,
input[type=submit].purple.colored:active,
input[type=button].purple.colored:active,
button.purple.colored:active,
a.button.purple.colored:active {
background: #972FFF
}

/* red buttons  */
input[type=submit].red:hover,
input[type=button].red:hover,
button.red:hover,
a.button.red:hover,
input[type=submit].red.colored,
input[type=button].red.colored,
button.red.colored,
a.button.red.colored {
background: #BE3C3A
}
input[type=submit].red.colored:hover,
input[type=button].red.colored:hover,
button.red.colored:hover,
a.button.red.colored:hover {
background: #AD2B29
}
input[type=submit].red:active,
input[type=button].red:active,
button.red:active,
a.button.red:active,
input[type=submit].red.colored:active,
input[type=button].red.colored:active,
button.red.colored:active,
a.button.red.colored:active {
background: #9B2A28
}
/* green buttons  */
input[type=submit].green:hover,
input[type=button].green:hover,
button.green:hover,
a.button.green:hover,
input[type=submit].green.colored,
input[type=button].green.colored,
button.green.colored,
a.button.green.colored {
background: #009966
}
input[type=submit].green.colored:hover,
input[type=button].green.colored:hover,
button.green.colored:hover,
a.button.green.colored:hover {
background: #007952
}
input[type=submit].green:active,
input[type=button].green:active,
button.green:active,
a.button.green:active,
input[type=submit].green.colored:active,
input[type=button].green.colored:active,
button.green.colored:active,
a.button.green.colored:active {
background: #3F964A
}
/* yellow buttons  */
input[type=submit].yellow:hover,
input[type=button].yellow:hover,
button.yellow:hover,
a.button.yellow:hover,
input[type=submit].yellow.colored,
input[type=button].yellow.colored,
button.yellow.colored,
a.button.yellow.colored {
background: #DDAD0B
}
input[type=submit].yellow.colored:hover,
input[type=button].yellow.colored:hover,
button.yellow.colored:hover,
a.button.yellow.colored:hover {
background: #B68F0A
}
input[type=submit].yellow:active,
input[type=button].yellow:active,
button.yellow:active,
a.button.yellow:active,
input[type=submit].yellow.colored:active,
input[type=button].yellow.colored:active,
button.yellow.colored:active,
a.button.yellow.colored:active {
background: #B68F0A
}

/* dark buttons  */
input[type=submit].dark:hover,
input[type=button].dark:hover,
button.dark:hover,
a.button.dark:hover,
input[type=submit].dark.colored,
input[type=button].dark.colored,
button.dark.colored,
a.button.dark.colored {
background: #444
}
input[type=submit].dark.colored:hover,
input[type=button].dark.colored:hover,
button.dark.colored:hover,
a.button.dark.colored:hover {
background: #222
}
input[type=submit].dark:active,
input[type=button].dark:active,
button.dark:active,
a.button.dark:active,
input[type=submit].dark.colored:active,
input[type=button].dark.colored:active,
button.dark.colored:active,
a.button.dark.colored:active {
background: #222
}


/* Buttons with icons */
input[type=submit].button-icon,
input[type=button].button-icon,
button.button-icon,
a.button.button-icon {
padding-left: 2.8em
}
input[type=submit].button-icon.big,
input[type=button].button-icon.big,
button.button-icon.big,
a.button.button-icon.big {
padding-left: 5em
}
input[type=submit] i,
input[type=button] i,
button i,
a.button i {
position: absolute; top: .45em; left: 1.2em; line-height: 1; font-size: 1.4em; margin-right: .4em; margin-left: -0.35em; margin-bottom: -1em; color: #B7C6C9;
}
input[type=submit].big i,
input[type=button].big i,
button.big i,
a.button.big i {
top: .7em; left: 1.1em; font-size: 23px;
}
input[type=submit]:hover i,
input[type=button]:hover i,
button:hover i,
a.button:hover i,
input[type=submit].colored i,
input[type=button].colored i,
button.colored i,
a.colored i {
color: #fff; color: rgba(255, 255, 255, 0.9);
}
/* Colored Buttons */
input[type=submit].colored,
input[type=button].colored,
button.colored,
a.button.colored {
color: #fff; border-color: transparent;
}

/* TABS */
.tabs {
font-size: 1em; margin-bottom: 2em;
}
.tabs .tab-titles {
padding: 0; margin: 0 0 -2px 0;
}
.tabs .tab-titles li {
display: inline-block;
}
.tabs .tab-titles li a {
display: inline-block; padding: 1em 2em; font-size: 12px; letter-spacing: .06em; font-weight: 600; border: 0; cursor: pointer;
}
.tabs .tab-titles li a.active {
font-weight: 700; background-color: #FAB921; border-bottom-color: #FAB921; color: #fff; border: 2px solid #FAB921; border-bottom: none; border-radius: 6px 6px  0 0;
}
.tabs .tab-content {
margin-top: -1px; border: 2px solid #EAEEEF; border-radius: 0px 0px 0px 0px;
}
.tabs .tab-content > div {
padding: 2em; font-size: 15px; display: none;
}

/* TOGGLES */
.toggle-group {
margin-bottom: 2em;
}
.toggle {
font-size: 1em;
}
.toggle h4 {
position: relative; font-size: 1em; font-weight: 300; border-left: 0; padding: .8em 1em .8em 1.8em; margin: 0; cursor: pointer; border-bottom: 1px solid #EAEEEF;
}
.toggle h4.active {
border-bottom: 0; font-weight: 600;
}
.toggle h4:before {
content: "\f067"; color: #B7C6C9; position: absolute; top: 1.7em; left: 0.4em; font-size: 12px; line-height: 1;
}
.toggle h4.active:before {
content: "\f068";
}
.toggle .toggle-content {
display: none; padding: .2em 0 1em 1.8em; border-bottom: 1px solid #eee;
}

/* ALERTS */
.alert {
position: relative; padding: 1.2em 1em 1em 4.4em; margin-bottom: 2em; font-size: 15px; border-radius: 6px; border: 3px solid #EAEEEF;
}
.alert:before {
content: "\f0c6"; color: #B7C6C9; position: absolute; top: 0.6em; left: .9em; font-size: 27px; line-height: 1;
}
.alert.success {
border-color: #AEE2A3
}
.alert.success:before {
content: "\f087"
}
.alert.info {
border-color: #E4E6C4
}
.alert.info:before {
content: "\f05a"
}
.alert.error {
border-color: #EE8F8F
}
.alert.error:before {
content: "\f06a"
}
.alert strong {
font-weight: 800
}

/* CTA */
.cta,
.project-action {
margin: 2em 0; padding: 2em 0; border-style: solid; border-width: 5px 0; border-color: #EAEEEF;
}
.cta h3,
.cta p {
margin: 0
}
.cta .cta-button {
text-align: right
}
.cta p {
font-size: .9em
}

/* PROJECT ACTION */
.project-action {
padding: 2em 0 0 0; text-align: center;
}
.project-action .button {
margin-right: 1em; margin-bottom: 3.2em
}
.project-action .button:last-child {
margin-right: 0
}	

/* LAUNCH */
.launch {
text-align: center; padding: 2.6em 0;
}
.launch .button {
padding: 1.8em 3.6em; line-height: 1;
}	

/* SITE ALERT */
.site-alert {
display: none; position: fixed; z-index: 9900; top: 50%; left: 50%; margin: -80px 0 0 -80px; font-size: 6em; line-height: 1; padding: .4em .5em; color: #fff; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); background: #264150; background: rgba(38, 65, 80, 0.4); border-radius: 20px;
}
.site-alert:before {
content: "\f14a"
}
.site-alert.error {
background: #F30; background: rgba(206, 78, 62, 0.6);
}
.site-alert.error:before {
content: "\f00d"
}	

/* CONTACT FORM */
.contact-form {
margin: 1.6em 0 3em 0; overflow: auto;
}
.contact-form p {
margin: 0 0 1.8em 0; width: 50%; float: left;
}
.contact-form p:nth-of-type(1) {
padding-right: 32px;
}
.contact-form p:nth-of-type(3), 
.contact-form p:nth-of-type(4) {
width: 100%
}	
.contact-form input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]),
.contact-form textarea {
width: 100%; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
.contact-form textarea {
height: 100px
}

/* ISOTOPE FILTERING */
.isotope-item {
z-index: 2
}
.isotope-hidden.isotope-item {
pointer-events: none; z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;
}

/* GRID PAGE */
.show-grid div {
font-size: .8em; padding-top: .9em; padding-bottom: .9em; text-align: center; margin-bottom: 1.4em; border: 1px solid #EAEEEF; border-radius: 4px;
}

/* SHORTCODES PAGE */
.show-buttons .button {
margin: 0 1em 1em 0
}

/* FANCYBOX STYLES */
#fancybox-tmp, 
#fancybox-loading, 
#fancybox-overlay, 
#fancybox-wrap {
z-index: 5000;
}
.lightbox-active .container {
-webkit-filter: saturate(10%); filter: saturate(10%);
}
.lightbox.hidden {
display: none
}
#fancybox-loading {
display: none !important
}
.fancy-ico {
padding: 16px 16px 13px 16px; line-height: 100%; font-size: 8px; color: #333; background: #fff; border-radius: 4px;
}
#fancybox-left:hover .fancy-ico,
#fancybox-right:hover .fancy-ico {
color: #fff; background: #333;
}
#fancybox-close:before,
.fancy-ico:before {
display: inline
}
#fancybox-close:before {
content: "\f00d"; font-size: 1em;
}
.fancy-ico:before {
font-size: 3em
}
#fancybox-right-ico:before {
content: "\f105"
}
#fancybox-left-ico:before {
content: "\f104"
}
.fancy-ico,
#fancybox-close {
display: inline-block; cursor: pointer;
}
.fancy-ico:hover,
#fancybox-close:hover {
opacity: 1
}
#fancybox-close {
padding: 26px; line-height: 80%; font-size: 16px; opacity: 1; color: #fff; background: #5BCF80; border-radius: 50%;
}
#fancybox-close:hover {
background: #D4643E
}

/* PORTFOLIO DETAILS */
.p-overlay-on #container {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; -webkit-filter: saturate(10%); filter: saturate(10%);
}
.p-overlay {
display: none; position: absolute; z-index: 3000; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; min-height: 100vh; overflow: auto; background: #fff;
}
.portfolio-single {
margin: 0 auto; width: 90%; max-width: 1440px;
}
.single-page-layout .portfolio-single {
padding-top: 2em
}
.one-page-layout .portfolio-single {
padding-top: 3em
}
.portfolio-field {
padding-bottom: 2em
}
.portfolio-field p {
margin-top: 0
}
.portfolio-field img,
.portfolio-field .fluid-width-video-wrapper,
.portfolio-field .media-wrap {
margin-bottom: 50px
}
.portfolio-field .flexslider .slides img {
margin-bottom: 0; 
}
.portfolio-title h2 {
margin: 0; font-size: 2em;
}
.portfolio-field h3 {
margin: 2em 0 .6em 0; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: #c8d3d6;
}
.portfolio-field h3:first-child {
margin-top: 0
}
.portfolio-field .btn {
margin: 2em auto 2em
}
.portfolio-field .launch {
text-align: left;
}
/* TAGS  */
.tags {
margin: 0 0 1em 0; padding: 5px; list-style: none;
}
.tags li {
display: inline-block
}
.tags a {
display: inline-block; line-height: 30px; font-size: 12px; position: relative; margin: 0 14px 8px 6px; padding: 0 10px 0 12px; background: #EAEEEF; text-transform: uppercase; color: #6A7686; border-radius: 0 2px 2px 0;
}
.tags a ,
.tags a:hover {
color: #345;
}
.tags a:before {
content: ""; float: left; position: absolute; top: 0px; left: -11px; width: 0; height: 0; border-color: transparent; border-right-color: #EAEEEF; border-style: solid; border-width: 15px 11px 15px 0;
}
.tags a:after {
content: ""; position: absolute; top: 11px; left: 0; float: left; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
/* portfolio details nav  */
.portfolio-nav {
text-align: right
}
.portfolio-nav.bottom {
margin-bottom: 40px
}
.portfolio-nav .button {
display: inline-block; text-align: center; padding: 0; line-height: 33px; width: 40px; font-size: 18px; color: #B7C6C9; border: 3px solid #DDE4E6; cursor: pointer; border-radius: 50%;
}
.portfolio-nav a.button:hover {
color: #096; border-color: #096; background: none;
}
.icon.prev:before {
content: "\f104"
}
.icon.next:before {
content: "\f105"
}
.portfolio-nav a.button.back {
display: none; margin-left: 34px; border-width: 0; line-height: 70px; width: 70px; font-size: 16px; color: #fff; background: #5BCF80; border-radius: 50%;
}
.portfolio-nav a.button.back:before {
display: inline; content: "\f00d"; font-size: 1em;
}
.portfolio-nav a.button.back:hover {
color: #fff; background: #D4643E
}
.one-page-layout .portfolio-nav a.button.back {
display: inline-block
}

/* BLOG */
.blog-posts .entry-title {
margin: 6px 0 0 0; font-size: 1.8em; text-align: left;
}
.entry-title a {
color: #345
}
.entry-title a:hover {
color: #096
}
/* entry-meta */
.blog-posts .entry-meta {
float: left; width: 66px; font-weight: 400; font-size: 0.750em;
}
.blog-posts .entry-meta > span {
display: block; margin: 0 auto 14px auto; max-width: 55px; min-height: 20px; text-align: center;
}
.entry-meta .post-format {
display: inline-block; font-size: 17px; width: 53px; line-height: 46px; padding: 0; background: #fff; color: #6A7686; border: 3px solid #DDE4E6; border-radius: 50%;
}
.hentry .entry-date .day, .hentry .entry-comment .count  {
display: block; margin: 0; line-height: 1; font-size: 32px; font-weight: 800;
}
.entry-meta {
color: #BFC5CD; font-weight: 400; font-size: 0.750em;
}
.entry-meta span {
display: inline-block; margin-right: 8px; margin-bottom: 12px;
}
.entry-meta a,
.post-pagination li a {
padding: 4px 10px; margin: 0 2px; border: 1px solid #DDE4E6; border-radius: 4px; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; font-weight: 800;
}
.entry-meta a,
.nav-single a,
.comment-meta a,
.comment-reply-link,
.navigation a,
.post-pagination a,
.related-posts a,
.archives a,
.tabs .tab-titles li a {
color: #6A7686
}
.entry-meta a:hover,
.nav-single a:hover,
.navigation a:hover,
.post-pagination a:hover,
.archives a:hover,
.entry-content a.more-link:hover,
.archives-tag.post-list a:hover,
.tagcloud a:hover {
color: #fff; border-color: transparent;
}
.entry-meta a:active,
.nav-single a:active,
.comment-meta a:active,
.comment-reply-link:active,
.navigation a:active,
.post-pagination a:active,
.related-posts a:active,
.archives a:active,
.entry-content a.more-link:active {
color: #eee
}
.entry-meta .edit-link {
float: right
}
.entry-content .media-wrap, .entry-content .flexslider {
margin-top: 22px; 
}
/* more link */
a.more-link {
display: block; max-width: 17em; text-align: center; margin: 2em 0 0 0; padding: 1.4em 0; color: #6A7686; font-weight: 400; font-size: 12px; letter-spacing: .03em; background: none; border: 2px solid #DDE4E6; border-radius: 4px; text-transform: uppercase; font-weight: 800;
}
a.more-link:hover {
background: #096
}
/* featured image */
.featured-image {
margin-top: 26px
}
.featured-image img {
display: block; margin: 0 auto;
}
.featured-image .media-wrap {
margin-bottom: 1.4em; 
}
.blog-posts .featured-image,
.blog-posts .entry-header,
.blog-posts .entry-content {
margin-left: 90px
}

/* POST FORMATS */
.format-status .post-format:before,
.format-aside .post-format:before,
.format-link .post-format:before,
.format-chat .post-format:before,
.format-audio .entry-meta .post-format:before,
.format-image .entry-meta .post-format:before,
.format-gallery .entry-meta .post-format:before {
font-family: Fontello
}
/* standart  */
.hentry .post-format:before {
content: "\f040"
}
/* sticky  */
.hentry.sticky .post-format:before {
content: "\f08d"
}
/* quote  */
.format-quote .post-format:before {
content: "\f10d"
}
.format-quote blockquote {
font-size: 2em; margin: 0; font-weight: 300; padding: 0 0 2em 0; line-height: 1.5; margin-top: -8px;
}
.format-quote blockquote:before {
content: ""
}
/* link  */
.format-link .post-format:before {
content: "\e86c"
}
.format-link .link-content > a:first-child {
font-size: 1.5em; font-weight: 300; word-break: break-all; text-transform: uppercase; padding: .4em 1.2em; margin-top: 1em; border-radius: 8px; color: #456; display: inline-block; border: 2px dashed #DDE4E6; 	
}
.format-link .link-content > a:first-child:hover {
border-color: #096
}
.format-link header {
text-align: center
}
/* status  */
.format-status .post-format:before {
content: "\e87d"
}
.format-status .entry-content > p:first-child {
padding: .5em 1em; border: 1px solid #DDE4E6; border-radius: 4px; font-size: 1.6em; line-height: 1.5; font-weight: 300;
}
/* chat  */
.format-chat .post-format:before {
content: "\e87b"
}
.chat-transcript {
margin-top: 1.2em; 
}
.chat-row:after {
display: table; content: ""; line-height: 0;
}
.chat-author {
float: left; width: 88px; text-transform: uppercase;
}
.chat-text {
padding-left: 100px
}
.chat-text p {
margin-top: 0
}
.chat-author cite {
display: inline-block; min-width: 80%; margin-right: .1em; font-size: 0.9em; font-weight: 800;
}
/* video  */
.format-video .entry-meta .post-format:before {
content: "\f008"
}
/* audio  */
.format-audio .entry-meta .post-format:before {
content: "\e888"
}
.mejs-audio {
margin: 0 0 2em 0; 
}
/* image  */
.format-image .entry-meta .post-format:before {
content: "\e8c4"
}
.format-image .entry-content {
margin-bottom: 1em
}
/* gallery  */
.format-gallery .entry-meta .post-format:before {
content: "\e8c4"
}
.format-gallery .flexslider {
margin-bottom: 50px
}
.flex-direction-nav a {
text-align: center; color: #fff;
}
.flex-direction-nav a:hover {
color: #fff
}
.flex-direction-nav a:before {
display: block; width: 100%; text-align: center; font-size: 20px; line-height: 37px;
}
.flex-direction-nav .flex-next:before {
content: "\f105"
}
.flex-direction-nav .flex-prev:before {
content: "\f104"
}
.flex-title {
position: absolute; bottom: 20px; left: 20px; margin: 0; padding: .5em 1em; font-size: 14px; color: #333; background: #fff; background: rgba(255, 255, 255, 0.95);
}
.flex-control-nav {
bottom: -46px
}
.flex-control-paging li a {
width: 12px; height: 12px; border: 2px solid #DDE4E6; background: none;
}
.flex-control-paging li a:hover {
border-color: #096; background: none;
}
.flex-control-paging li a.flex-active {
border-color: transparent; background: #096;
}
/* aside  */
.format-aside .post-format:before {
content: "\e86d"
}
.format-aside .entry-content .aside-content {
position: relative; padding: .2em 2em .2em 3.7em; margin: 0 0 2em 0; border-radius: 4px; line-height: 1.9; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #5a4f43; text-shadow: 0 1px 0 white; background: #FFFFF4; border: 1px solid #E0DACE;
}
.format-aside .entry-content .aside-content:before {
content: ''; position: absolute; top: 0; bottom: 0; left: 2em; width: 4px; border: solid #efcfad; border-color: rgba(239, 207, 173, 0.9); border-width: 0 1px;
}

/* PAGINATION */
.navigation,
.post-pagination {
padding: 3em 0
}
.navigation > div {
width: 50%; float: left;
}
.navigation a {
display: inline-block; padding: 1.6em 2.2em; border: 2px solid #DDE4E6; border-radius: 4px; font-size: 11px; letter-spacing: .06em; font-weight: 800; text-transform: uppercase;
}
.navigation .nav-next {
text-align: right
}
.navigation .meta-nav {
margin-right: .5em
}
.navigation .nav-next .meta-nav {
margin-left: .5em; margin-right: 0;
}
/* NUMBERED PAGINATION */
.post-pagination ul {
list-style: none; text-align: center; padding: 0;
}
.post-pagination li {
display: inline-block; font-size: .9em; margin: .3em .1em;
}
.post-pagination li a {
display: inline-block; padding: .5em 1.2em; margin: 0 4px; font-weight: 400; border-width: 2px;
}
.post-pagination li.current a,
.post-pagination li.current a:hover {
border-color: #6A7686; font-weight: 800; background: #fff; color: #6A7686; cursor: default;
}
.related-posts li a:hover,
.nav-single a:hover {
text-decoration: underline
}
/* MEDIA ELEMENT PLAYER STYLES */
.mejs-container {
background: none
}
.mejs-container .mejs-controls,
.mejs-controls .mejs-volume-button .mejs-volume-slider {
background: #25313C
}
.mejs-container.mejs-audio .mejs-controls {
border-radius: 4px
}
.mejs-controls .mejs-button button:focus {
outline: none
}
.mejs-container .mejs-controls {
height: 50px
}
.mejs-container .mejs-controls div {
width: 50px; height: 50px;
}
.mejs-controls .mejs-button button {
margin: 17px 17px
}
.mejs-controls .mejs-time-rail .mejs-time-total {
margin: 15px 5px
}
.mejs-container .mejs-controls .mejs-time {
height: 41px
}
.mejs-container .mejs-controls .mejs-time span {
margin-top: 11px
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
top: 21px
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 62px
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #565C61
}
.mejs-controls div.mejs-horizontal-volume-slider {
height: 50px; width: 80px;
}
.mejs-container .mejs-controls .mejs-time {
padding-left: 8px
}
.mejs-controls .mejs-volume-button .mejs-volume-slider {
left: 10px; border-radius: 4px 4px 0 0;
}
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #096
}
.mejs-overlay-loading {
background: rgba(0, 0, 0, 0.6); border-radius: 8px;
}

/* BLOG SINGLE */
.blog-single .entry-content p {
font-size: 18px; line-height: 29px;
}
.blog-single .entry-meta {
line-height: 1.9; text-align: center; padding-bottom: 20px;
}
.nav-single,
.navigation {
font-size: .8em; overflow: auto;
}
.nav-single {
padding: 3em 0; 
}
.nav-single a {
font-size: 1.4em; text-transform: uppercase; font-weight: 300; line-height: 1.4;
}
.nav-single .meta-nav {
margin-right: .6em
}
.nav-single .nav-next .meta-nav {
margin-left: .6em; margin-right: 0;
}
.nav-single .nav-next {
text-align: right
}
.nav-single h4,
.related-posts h3,
.about-author > h3,
.entry-meta h3 {
font-size: 12px; font-weight: 900; letter-spacing: .15em; color: #DDE4E6;
}

/* COMMENTS */
.comments-title,
#reply-title {
font-size: 18px; font-weight: 400;
}
.comments-area {
padding: 2em 0
}
.commentlist {
padding: .5em 0 1.5em 0
}
.comments-area ol {
list-style: none; padding-left: 0;
}
.comments-area ol li {
padding-top: 1em
}
.comments-area ol ol {
margin-left: 13%
}
.comments-area ol ol li {
padding-top: 0
}
.comments-area ol ol ol {
margin-left: 15%
}
.comments-area article {
position: relative; margin-left: 105px; margin-bottom: 2em; padding: 1em 1.6em; border: 2px solid #EAEEEF; border-radius: 8px;
}
.comments-area article:after,
.comments-area article:before {
top: 37px; right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.comments-area article:after {
border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 10px; margin-top: -10px;
}
.comments-area article:before {
border-color: transparent; border-right-color: #EAEEEF; border-width: 13px; margin-top: -13px;
}
.comment-meta img {
position: absolute; top: 0; left: -105px; border-radius: 50%;
}
.comments-area ol ol .comment-meta img {
width: 65px; left: -95px;
}
.comments-area ol ol article {
position: relative; margin-left: 95px;
}
.comment-meta .fn,
.comment-reply-link {
font-size: 13px; font-style: normal; font-weight: 800; text-transform: uppercase;
}
.comment-meta .fn + a {
float: right; font-size: .8em; color: #D1DCDE; border-bottom: 0;
}
.comment-content {
font-size: .9em;
}
.comment-content p {
margin: .8em 0 .2em 0
}
.comment .reply {
text-align: right
}
.comment-reply-link {
font-weight: normal; font-size: 11px; letter-spacing: 1px; font-weight: 800;
}
.comment-meta a:hover,
.comment-meta .fn + a:hover,
.comment-reply-link:hover {
color: #096
}
/* comment by post author  */
.bypostauthor > article {
border-color: #096
}
.bypostauthor > article:before {
border-right-color: #096
}

/* COMMENT FORM */
#respond {
padding: 0 0 1em 0
}
#respond h3 {
font-size: 1.6em; font-weight: 900;
}
#reply-title {
margin-bottom: 1.5em; 
}
#reply-title small {
padding-left: 14px; text-transform: uppercase; font-size: 16px;
}
.form-allowed-tags,
.comment-notes {
display: none; font-size: .9em;
}
.form-allowed-tags code {
margin-top: 1em
}
.form-submit {
margin-top: 2em
}

/* ABOUT THE AUTHOR */
.about-author {
padding: 1em 0
}
.author-bio {
padding: 1.4em 0; border: 1px solid #EAEEEF; border-right: 0; border-left: 0; overflow: hidden;
}
.author-img {
width: 126px; float: left;
}
.author-img img {
display: block; margin-top: 6px; max-width: 96px; border-radius: 50%;
}
.author-info .author-name {
text-transform: uppercase; font-weight: 800;
}
.author-info p {
font-size: .9em; margin: .4em 0;
}
.author-info *:first-child {
margin-top: 0
}
/* RELATED POSTS */
.related-posts {
padding: 2em 0 0; text-align: center;
}
.related-posts ol {
list-style: none; padding-left: 0;
}
.related-posts ol li a {
display: inline-block; margin-bottom: .4em; line-height: 1.2; font-size: 1.2em; text-transform: uppercase; font-weight: 300;
}		
/* TAGS  */
.blog-single footer.entry-meta {
position: relative; padding-bottom: 1em;
}



/*  --------------------------------------------

7. MEDIA QUERIES - responsive layouts

-------------------------------------------- */

/* DESKTOPS MEDIUM */
@media screen and (min-width: 1200px) { 

.vs-triplelayout .wrapper > section {
width: 90%; left: 5%;
}
.vs-triplelayout .wrapper .vs-left {
left: -85%; /* 90 - 5 */
}
.vs-triplelayout .wrapper .vs-left-outer {
left: -175%; /* - 85 - 90 */
}
.vs-triplelayout .wrapper .vs-current {
position: relative; z-index: 100;
}
.vs-triplelayout .wrapper .vs-right {
left: 95%; /* 90 + 5 */
}
.vs-triplelayout .wrapper .vs-right-outer {
left: 185%; /* 95 + 90 */
}
.vs-sidenav {
display: block;
}

/* CLASIC LAYOUT */
.classic-layout .wrapper > section {
width: 100%;
}
}

/* DESKTOPS LARGE */	
@media screen and (min-width: 1400px) { 

.content {
padding: 1em 3em;
}
.vs-triplelayout .wrapper > section {
width: 80%; left: 10%;
}
.vs-triplelayout .wrapper .vs-left {
left: -70%; /* 80 - 10 */
}
.vs-triplelayout .wrapper .vs-left-outer {
left: -150%; /* - 70 - 80 */
}
.vs-triplelayout .wrapper .vs-right {
left: 90%; /* 80 + 10 */
}
.vs-triplelayout .wrapper .vs-right-outer {
left: 170%; /* 90 + 80 */
}
}

/* DESKTOPS XLARGE */	
@media screen and (min-width: 1600px) { 
/* increase column gutter on large screens */
.content {
padding: 1em 4em;
}
}

/* TABLETS */
@media screen and (max-width: 991px) { 

/* LAYOUT */
.header {
width: 100%;
}
.vs-nav li a {
font-size: 2.4em
}
.content {
padding: 1em 3em; 
}

/* PORTFOLIO SINGLE */
.portfolio-single {
width: 80%;
}
.portfolio-field {
padding: 0 0 1em 0;
}

.portfolio-field img,
.portfolio-field .fluid-width-video-wrapper,
.portfolio-field .media-wrap {
margin-bottom: 1.8em
}
.portfolio-nav,
.portfolio-title {
text-align: center
}
.portfolio-nav {
padding-bottom: 1.5em
}
.portfolio-title h2 {
font-size: 1.5em; padding-left: 0;
}
.portfolio-field h3 {
margin-top: 1em
}
.portfolio-field .launch {
text-align: center;
}

/* PROCESS */
.row [class^="col-"]:nth-child(3n) .process:before { 
display: none; 
}

}

/* SMARTPHONES */
@media screen and (max-width: 767px) { 

/* MOBILE LAYOUT : more space for content */
.content {
padding: 1em;
}
.header {
width: 100%; padding: 1.4em 1em .2em 1em; background-image: url("../images/bg-2.jpg"); background-repeat: no-repeat; background-position: top; background-size: 100% 220px;
}
.header img {
max-height: 120px;
}
.single-page-layout .vs-nav {
margin-top: 0;
}
.vs-triplelayout .vs-nav {
height: 40px;
}
.vs-triplelayout .vs-nav li a {
width: auto; font-size: 130%; letter-spacing: -1px;
}
.classic-layout .vs-nav {
margin-top: 1em; 
}

/* page title */
.entry-title {
font-size: 1.6em; margin-top: .6em;
}
.entry-content {
padding-top: 0; 
}

/* intro text */
.intro h2 {
font-size: 1.6em; 
}
.rotate-words {
min-height: 28px; min-width: 166px;
}

/* timeline */
.timeline {
padding-left: 0; 
}
.timeline h2 [class^="icon-"], .timeline h2 [class*=" icon-"], .timeline h2 .fa {
position: relative; top: auto; left: auto; margin: -12px auto 6px auto; border: 0; line-height: 1;
}
.event {
padding: 16px; margin-top: 104px;
}
.event:first-of-type {
margin-top: 116px; 
}
.event:first-of-type .date {
top: -74px; 
}
.event:before, .event:after {
display: none; 
}
.event .date {
top: -64px; left: 50%; margin-left: -32px; 
}
.timeline h2, .event h4, .event h5 {
text-align: center; 
}
.event p:before {
left: 50%; z-index: -1; 
}
.timeline .event:last-child p:before {
height: 100%;
}

/* PROCESS */
.row [class^="col-"]:nth-child(3n) .process:before { 
display: inline-block; 
}
.row [class^="col-"]:nth-child(2n) .process:before { 
display: none; 
}

/* skills */
.skill-unit h4 {
font-size: 14px; margin: 1em 0 0 0; color: #345; padding: 0; font-weight: 400;
}
.skill-unit .bar {
height: 6px;
}

/* download button */
.download-button {
text-align: center;
}

/* tagline */
.tagline {
padding: .2em 1em; 
}
.tagline h3 {
font-size: 1.4em;
}

/* blockquotes */
blockquote {
padding-left: 1em; padding-right: 1em; font-size: 1.3em; 
}
blockquote:before {
top: -0.6em; font-size: 1em;
}

/* tabs */
.tabs .tab-content > div {
padding: .8em 1.2em; 
}
.tabs .tab-titles li a {
padding: .7em 0.8em; 
}

/* cta */
.cta,
.cta .cta-button {
text-align: center
}
.cta .cta-button {
margin-top: 1em
}

/* project-action */
.project-action {
padding-top: 1.2em
}
.project-action .button {
margin-bottom: 1.2em
}

/* letter */
.letter-title {
text-align: center; font-size: 2.2em;
}
.stamp {
float: none; margin: 0 auto 16px auto;
}
.letter-info {
margin-left: 0;
}

/* contact form */
.contact-form p {
width: 100%; padding-right: 0 !important;
}

/* BLOG INDEX */
.blog-posts .entry-meta {
float: none; width: 100%; margin-bottom: 14px;
}
.blog-posts .entry-meta .entry-date {
display: none
}
.blog-posts .featured-image,
.blog-posts .entry-header,
.blog-posts .entry-content {
margin-left: 0
}
.blog-posts .entry-title {
font-size: 1.2em; text-align: center
}
.blog-posts .hentry {
padding-bottom: 1em; 
}
.entry-meta .post-format {
font-size: 19px; width: 44px; line-height: 34px;
}
a.more-link {
padding: 1em; max-width: none;
}
.format-quote blockquote {
padding-bottom: 1em; font-size: 1.4em; text-align: center;
}
.format-quote blockquote cite { 
text-align: center; margin: 8px 0 0;
}
.format-link .link-content > a:first-child {
font-size: 1.2em;
}
.link-content {
text-align: center;
}
.format-status .entry-content > p:first-child {
font-size: 1.3em;
}
.navigation, .post-pagination {
padding-top: 0; 
}
.navigation a {
padding: 1em; 
}

/* BLOG SINGLE */
.blog-single .entry-content p {
line-height: 29px;
}
.related-posts ol li a {
margin-bottom: .8em; 
}
.comments-area h2,
#respond h2 {
font-size: 1.2em; 
}
.comments-title span {
display: block
}
.comment-meta .fn + a {
display: block; float: none;
}
.comments-area ol ol {
margin-left: 5%
}
.comments-area ol ol ol {
margin-left: 8%
}
.comment-meta img {
position: static; top: auto; left: auto; float: left; margin: 0 1em .6em 0;
}
.comment-meta .fn {
display: block;
}
.comments-area article,
.comments-area ol ol article {
margin-left: 0
}
.comment-content {
clear: left
}
.about-author {
text-align: center
}
.author-img {
float: none; width: auto;
}
.author-img img {
margin: 0 auto 1em auto
}

/* PORTFOLIO SINGLE */
.one-page-layout .portfolio-single {
padding-top: 1.4em;
}

}	



/*  --------------------------------------------

8. THEME - customize colors etc...

-------------------------------------------- */
body {
color: #345;
}
/* Links */
a {
color: #096;
}
a:hover {
color: #5BCF80;
}

/* Text Selection */
::selection {
text-shadow: none; color: #333; background: #FFFFCF;
}
::-moz-selection {
text-shadow: none; color: #333; background: #FFFFCF;
}

/* Service Icons */	
.color1 i { 
background: #F8CB30; 
}
.color2 i { 
background: #74BADE; 
}
.color3 i { 
background: #5BCF80; 
}
.color4 i { 
background: #E25E5B; 
}	

/* PRIMARY COLOR : #FAB921================================================== */
.navigation a:hover,
.pagination a:hover,
.entry-meta a:hover,
.single-page-layout .vs-nav li i:hover,
.media-box .mask:before,
.button.primary:hover,
a.more-link:hover,
.flex-control-paging li a.flex-active,
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #FAB921}
.entry-title a:hover,
.portfolio-nav a.button:hover,
.related-posts li a:hover,
.nav-single a:hover,
.comment-meta a:hover, 
.comment-meta .fn + a:hover, 
.comment-reply-link:hover {
color: #FAB921}
.portfolio-nav a.button:hover,
.format-link .link-content > a:first-child:hover,
.flex-control-paging li a:hover,
.bypostauthor > article {
border-color: #FAB921}

/* SECONDARY COLOR : #5BCF80 - lighter than primary color
================================================== */	
.skill-unit .bar .progress,
.letter-info p i,
.media-cell-desc .date,
#nprogress .bar,
#fancybox-close,
.portfolio-nav a.button.back {
background: #FAB921;
}
#nprogress .spinner-icon {
border-top-color: #FAB921; border-left-color: #FAB921;
}

/* FIX FOR CHROME FULSCREEN VIDEO ISSUE */
:-webkit-full-screen-ancestor:not(iframe) *:not(video) {
animation: none; -webkit-animation: none;
}

.p-5 {
padding: 10px;	
}

.buscador {
margin-top: 50px;
width: 350px;
height: 45px; 
background-color: #fff;
font-size: 12px;
color: #333;
text-align: center;
border-radius: 30px!important;
border: 1px solid #eaeaea;
transition: all 0.3s;
}	

.buscador::placeholder {
color: #333;
letter-spacing: 1px;
font-weight: 400;
}

.buscador::-moz-placeholder {
color: rgba(255,255,255,0.9)!important;
letter-spacing: 1px;
font-weight: 600;
}

.cart-item {
font-size: 10px;
color: #333;  
position: absolute;
right: 12px;
font-weight: 600;
bottom: 12px;
}

.classic-layout .vs-nav li a:hover .cart-item,
.classic-layout .vs-nav li.current_page_item a .cart-item {
color: #fff;
}

.tooltipster-default {
background-color: #FAB921;
}

.voltar {
display: block;
position: absolute;
top: 25px;
right: 10px;
background-color: #1F2024;  
width: 60px;
height: 60px;
text-align: center;
line-height: 68px;
text-transform: uppercase;
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}

.voltar i {
font-size: 25px; 
}

.voltar:hover {
background-color: #FAB921; 
color: #fff!important;  
transform: scale(1.2);  
}

.voltar:focus {
background-color: #FAB921; 
color: #fff!important;  
transform: scale(1.2);  
}

.btn-center {
display: block;
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;  
}

/* primary buttons  */
input[type=submit].primary:hover,
input[type=button].primary:hover,
button.primary:hover,
a.button.primary:hover,
input[type=submit].primary.colored,
input[type=button].primary.colored,
button.primary.colored,
a.button.primary.colored {
background: #FAB921}
input[type=submit].primary.colored:hover,
input[type=button].primary.colored:hover,
button.primary.colored:hover,
a.button.primary.colored:hover {
background: #FAB921}
input[type=submit].primary:active,
input[type=button].primary:active,
button.primary:active,
a.button.primary:active,
input[type=submit].primary.colored:active,
input[type=button].primary.colored:active,
button.primary.colored:active,
a.button.primary.colored:active {
background: #FAB921}

.busca {
width: 100%;
margin-top: 80px;
text-align: center;	
padding: 20px;
border: 1px solid #eaeaea;
background-color: #eee;
text-transform: uppercase;
letter-spacing: 1px;
}	

.m-l-5 {
margin-left: 5px!important;		
}

.m-l-10 {
margin-left: 10px!important;		
}

.m-r-5 {
margin-right: 5px!important;		
}

.m-20 {
margin: 20px!important;	
}

.m-t-10 {
margin-top: 10px!important;	
}

.m-t-20 {
margin-top: 20px!important;	
}

.m-t-25 {
margin-top: 25px!important;		
}

.m-t-15 {
margin-top: 15px!important;	
}

.m-b-10 {
margin-bottom: 10px!important;	
}

.m-b-15 {
margin-bottom: 15px!important;	
}

.m-b-5 {
margin-bottom: 5px!important;	
}

.m-l-10 {
margin-left: 10px!important;	
}

.m-l-20 {
margin-left: 20px!important;		
}

.m-t-40 {
margin-top: 40px!important;	
}

.m-t-60 {
margin-top: 60px!important;	
}

.horario {
margin-bottom: 20px;	
}

.horario p{
padding: 15px;
border-radius: 4px;
text-transform: uppercase;
font-size: 12px!important;
letter-spacing: 1px;
color: #fff;
background-color: #FAB921;	
}

.form-group {
display: block;
width: 300px;
margin-bottom: 10px;
}

.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
transition: all 0.3s;
}

.form-group label {
position: relative;
display: inline-block;
cursor: pointer;
font-size: 11px;
color: #777;
font-weight: 600;
transition: all 0.3s;
}

.form-group span {
margin-left: 10px;
font-size: 15px;
color: #333;
font-weight: 600;
}

.form-group label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid #C7D3D3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 8px;
display: inline-block;
position: relative;
vertical-align: middle;
top: 0px;
cursor: pointer;
margin-right: 10px;
transition: all 0.3s;
}

.form-group input:checked + label:after {
content: '';
display: block;
position: absolute;
top: -1px;
left: 8px;
width: 10px;
height: 18px;
border: solid #FAB921;
border-width: 0 4px 4px 0;
transform: rotate(45deg);
transition: all 0.3s;
}

.radio {
margin: 0.5rem;	
width: 250px!important;
}

.radio input[type="radio"]:checked,
.radio input[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.radio input[type="radio"]:checked + label,
.radio input[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 30px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
.radio input[type="radio"]:checked + label:before,
.radio input[type="radio"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border: 2px solid #C7D3D3;
border-radius: 100%;
background: #fff;
}
.radio input[type="radio"]:checked + label:after,
.radio input[type="radio"]:not(:checked) + label:after {
content: "";
width: 12px;
height: 12px;
background: #FAB921;
position: absolute;
top: 5px;
left: 5px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.radio input[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.radio input[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.radio label b {
font-size: 12px;
font-weight: 600;  
}

.cupom {
display: inline-block;
width: 100%;
height: 140px;
padding: 10px 10px; 
border-radius: 0px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);  
box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
margin-bottom: 20px; 
}

.cupom h4{	
font-size: 30px!important;
color: #fff!important;
letter-spacing: 1px; 
padding: 0!important;  
margin: 0!important; 
}

.cupom span{
font-family: Arial, sans-serif;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 1px;  
}

.cupom p{
font-family: Arial, sans-serif;
text-transform: uppercase;
font-size: 10px;
padding: 5px 10px;
background-color: #fff;
color: #333!important;
font-weight: 600;
letter-spacing: 1px;  
text-shadow: none;
}

.bg-danger { background-color: #EF483E!important;  color: #fff!important; border-color: #EF483E!important; }
.bg-warning { background-color: #F0B500!important; color: #fff!important; border-color: #F0B500!important; } 
.bg-success { background-color: #05B085!important; color: #fff!important; border-color: #05B085!important; }
.bg-purple { background-color: #8B52D1!important;  color: #fff!important; border-color: #8B52D1!important; }

.sem-cupom {
padding: 20px;
text-transform: uppercase;
letter-spacing: 1px; 
background-color: #fafafa;
margin: 30px; 
border: 1px solid #eaeaea;  
}

.descricao span{
font-size: 12px;
color: #fff;
background-color: #333;
padding: 8px 15px;
border-radius: 3px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;  
}

.descricao img{
margin-top: 20px;
border-radius: 5px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);	
}

.descricao p{
padding: 20px;	
font-size: 13px;
background-color: #fafafa;  
border: 1px solid #eaeaea;
}

.cash {
display: block;	
padding: 15px 0;
margin-left: 20px;
margin-bottom: 30px;
font-size: 12px;
text-transform: uppercase;
color: #FAB921;
font-weight: 700;
letter-spacing: 1px;	
}

.preco {
margin-top: 0!important;
padding: 0!important; 
display: inline-block;
margin-right: 10px;  
letter-spacing: 1px;
}

.topico {
margin-left: 15px;	
padding: 2px 10px; 
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}

.topico p{
margin: 0;
}

.topico span{
font-size: 10px;
font-weight: 400;
}

.preco_1 {
display: inline-block;	
}
.preco_2 {
display: none;	
}
.preco_3 {
display: none;	
}
.preco_4 {
display: none;	
}
.preco_5 {
display: none;	
}
.preco_6 {
display: none;	
}

.itens{
position: relative;
margin-right: 60px;
float: right;
}

.itens span{
margin-left: 15px;	
}

.input-number{
width: 60px!important;
padding: 0 12px;
vertical-align: center;
text-align: center;
outline: none;
border-radius: 0!important;
margin: 0!important;
border: 1px solid #ccc!important;
}

.input-number,
.input-number-decrement,
.input-number-increment{
height: 40px;
user-select: none;
}

.input-number-decrement,
.input-number-increment{
display: inline-block;
width: 40px;
line-height: 36px;
background: #555;
border: 1px solid #555!important;
color: #fff;
text-align: center;
font-weight: bold;
cursor: pointer;
margin-top: -2px;
transition: all 0.3s;
}
.input-number-decrement:active,
.input-number-increment:active{
background: #222;
color: #fff;
border-color: #222!important;
transition: all 0.3s;
}

.input-number-decrement:hover,
.input-number-increment:hover{
background: #222;;
color: #fff;
border-color: #222;!important;
transition: all 0.3s;
}

.input-number-decrement{
border-right: none;
border-radius: 5px 0 0 5px!important;
padding-left: 5px;
}

.input-number-increment{
border-left: none;
border-radius: 0 5px 5px 0!important;
padding-right: 5px;
}

@media only screen and (min-width: 1580px){
.descricao {
margin-left: -30px!important;  	  
}
}

.t-absolute {
position: fixed;
bottom: 15px;
z-index: 1;
padding: 15px;
background-color: #fff;
border: 1px solid #eaeaea;	
}

@media only screen and (min-width: 992px){
.t-absolute {	
position: relative;
bottom: 15px;
z-index: 1;
padding: 15px;
background-color: #fff;
border: 1px solid #eaeaea;	
}
}

.m-t-50 {
margin-top: 50px;	
}

.carrinho{
width: 950px;
position: relative;
margin: 0 auto;
margin-top: 50px;  	
}

.carrinho table{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.carrinho table tr{
display: block;	 
padding-bottom: 0px;	
border-bottom: 1px solid #eaeaea;
border-top: 1px solid #eaeaea;
}

.carrinho .modificar{
display: inline-block;
width: 40px;
padding: 10px;
border: 2px solid #eaeaea;
background-color: #fefefe;
height: auto;
margin: 20px;
border-radius: 30px;
}

.carrinho .modificar p{
display: block;
margin: 0px;
width: 18px;
text-align: center;
color: #333; 
font-size: 15px;
font-weight: 600;
}

.carrinho .modificar a{
display: block;
opacity: 0.7;
padding: 0px;
text-align: center;
font-size: 25px; 
color: #333; 
transition: all 0.3s; 
}

.carrinho .modificar a:hover{
opacity: 1;
transition: all 0.3s;
}

.carrinho .img{
display: inline-block;
overflow: hidden; 
background-color: #fff;
padding-right: 20px;
cursor: pointer;
border: none;
}

.carrinho .img img{
width: 180px;
height: auto;
padding: 5px;
border: 1px solid #eaeaea;

}

.carrinho .description{
padding: 15px; 
text-align: left;
display: inline-block;
width: 200px;
min-height: 150px;  
text-transform: uppercase; 
background-color: #fefefe;
border: 1px solid #eaeaea;
margin: 2px;   
}

.carrinho .description span{
display: block;	
font-size: 12px;
}

.carrinho .description .categoria{
font-family: 'Arial', sans-serif;
font-size: 11px;
letter-spacing: 1px; 
font-weight: 700;  
}

.carrinho .description .produto{
font-family: 'Poppins', sans-serif;
color: #1F2024;
font-size: 15px;
font-weight: 400;  
}

.carrinho .description span span{
font-weight: 800;
color: #333;   
}

.carrinho .preco{
display: inline-block;
font-family: 'Poppins', sans-serif;
font-size: 30px;
padding: 15px;
width: 120px;
border: none;
font-weight: 600;
background-color: #fff;
color: #333;
text-align: center;
}

.carrinho .preco a{
margin-top: 15px;	
display: block;	
opacity: 0.8;
color: #EF483E!important;	
font-size: 20px;
transition: all 0.5s ease;
}

.carrinho .preco a:hover{
transform: scale(1.2);
opacity: 1;
transition: all 0.5s ease;
}

@media only screen and (max-width: 992px){
.carrinho {
width: 390px;
}
.carrinho .modificar{
margin: 10px;
}
.carrinho .img{
display: none;
}
.carrinho .preco{
display: inline-block;
font-family: 'Poppins', sans-serif;
font-size: 20px;
padding: 15px;
width: 100px;
border: none;
font-weight: 600;
background-color: #fff;
color: #333;
text-align: center;
}	
}


@media only screen and (max-width: 400px){
.carrinho {
width: 100%;
margin-left: 0px;
}	
.carrinho .modificar{
margin: 10px;	
}
.carrinho .description{
width: 160px;	
}
.carrinho .preco{
width: 60px;	
}
}

.total{
width: 100%;
text-align: center;	
background-color: #fefefe;
border: 1px solid #eaeaea;
color: #333;
padding: 20px;
}

.total span{
margin: 10px!important;
display: block;
text-transform: uppercase;
letter-spacing: 1px;
}

.total h1{
margin: 0!important;	
}

.resumo{
text-align: center;	
text-transform: uppercase;	
font-family: 'Poppins', sans-serif;
font-size: 18px;
color: #333;
font-weight: 200;
}

.resumo b{
color: #05B085;	
}

.retirada p {
padding: 12px 10px;
border-radius: 4px;
background-color: #05B085;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
width: 100%!important;	
}

#retirar { display: none; }
#aviso { font-weight: 700!important; }

.totalizador {
float: left;	
background-color: #fafafa;
border: 2px solid #E9EEEE;
padding: 20px;
width: 300px;
color: #6D7987;
margin-right: 20px;	
border-radius: 4px;
margin-top: 40px;
}

.totalizador p{
width: 100%;	
display: block!important;
margin: 10px!important;
padding: 0!important;
text-transform: uppercase;	
font-family: 'Poppins', sans-serif;
font-size: 13px;
letter-spacing: 1px;
}

.totalizador p span{	
float: right!important;
font-size: 15px;
font-weight: 600;
padding-right: 20px;
}

.total_final {
color: #333!important;
font-size: 18px!important;
font-weight: 600;
padding-bottom: 15px!important;	
}

.total_final span{
font-size: 25px!important;
font-weight: 700;
margin-top: -10px;		
}

.totalizador a{
margin-left: 10px;	
}

.no-display {
display: none;	
}

.w-262 {
width: 262px!important;	
}

.select-cupom {
display: block;	
width: 300px!important;
}

.select-cupom:focus {
border-color: #333;	
}

.select-cupom:placeholder {
color: rgba(255,255,255,0.8); 
letter-spacing: 1px;	
}

#remover {
width: 175px;
text-align: center;	
display: none;	
}

#aplicar {
width: 175px;
text-align: center;	
}

.float-left {
float: left;	
}

.title-1 {
margin: 0!important;
padding: 0!important;
font-size: 18px;	
}

.cash-span{
font-size: 12px;	
}

.cash-span b{
font-weight: 700;
color: #FAB921;
}

.title-saldo {
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin-bottom: 15px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
}

.saldo {
display: block;
margin: 0 auto;
position: relative;	
width: 250px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 50%;
height: 250px;
border: 2px solid #6A7686;
background-color: #fafafa;
font-family: 'Poppins', sans-serif;
font-size: 40px;
line-height: 240px;
transition: all 0.3s;
}

.saldo:hover {
background-color: #6A7686;
color: #fff;
transition: all 0.3s;	
}

.p-saldo {
font-size: 11px;
text-align: center;
letter-spacing: 1px;
padding: 15px;	
}

@media only screen and (max-width: 600px) {
.content {
padding: 0.5em;
}
.voltar {
width: 45px;
height: 45px;
line-height: 45px;	
}
.voltar i {
font-size: 18px;
margin-right: 3px;  
}
.row {
margin-left: 0;
margin-right: 0;
padding: 0;
}
}

.font-22 {
font-size: 22px!important;	
}

.gif-preloader {
width: 256px;
position: relative;
margin: 0 auto;
display: block;	
margin-top: 50px;
}

.category {
color: #555!important;
font-weight: 500;  
}

.button-pedido {
text-shadow: 0px 1px 3px rgba(0,0,0,0.5)!important;	
width: 100%;
font-size: 12px!important;
}

.button-pedido span{
float: right;
padding-top: 2px;
font-size: 10px;	
}

.button-pedido:hover{
animation-name: pulse;
animation-duration: 1s;
transition: all 2s;
}

.button-pedido i{
padding-top: 7px!important;
}

.star{ color: #FFC926!important; }

@keyframes pulse {
0%   {transform: scale(1);}
50%  {transform: scale(1.05);}
100% {transform: scale(1);}
}

.p_detalhes {
color: #222;
font-weight: 700!important;	
}

.text-danger {
color: #EF483E!important;	
}

.text-success {
color: #05B085!important;	
}

.text-info {
color: #00A3D9!important;		
}

.avaliacao {
margin-top: 20px;
margin-bottom: 20px;	
}

.wp-custom {
position: fixed;
right: 0px;
top: 100px; 
z-index: 999;   
}

.wp-custom ul li {
cursor: pointer;
display: block;
width: 155px;
padding: 3px 8px;
border-radius: 10px 0 0 10px;
margin-right: -105px;
background-color: rgba(0,0,0,0.4);
margin-bottom: 5px;
transition: all 0.3s;
}

.wp-custom ul li i {
color: #fff;
font-size: 30px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
display: inline-block;
}

.wp-custom ul li span {
color: #fff;
font-size: 10px;
margin-left: 10px;
top: 16px;
letter-spacing: 1px;
text-transform: uppercase;
position: absolute;
font-family: Arial, sans-serif;
opacity: 0;
transition: all 0.3s;
}

.wp-custom ul .wp:hover {
background-color: #34BD49;
transform: translate(-60%);
transition: all 0.3s;
}

.wp-custom ul .ca:hover {
background-color: #FAB921;
transform: translate(-60%);
transition: all 0.3s;
}

.wp-custom ul .te:hover {
background-color: #333;
transform: translate(-60%);
transition: all 0.3s;
}

.wp-custom ul .wp:hover span {
opacity: 1;
transition: all 0.3s;
}

.wp-custom ul .ca:hover span {
opacity: 1;
transition: all 0.3s;
}

.wp-custom ul .te:hover span {
opacity: 1;
transition: all 0.3s;
}

.info-m {
font-size: 11px!important;	
}

.filtro {
width: 350px;
margin: 0 auto;
display: block;
position: relative;	
margin-bottom: 50px;
margin-top: 30px;
}

.filtro select {
width: 100%!important;
letter-spacing: 1px;
text-transform: uppercase;
}

.m-b-30 { margin-bottom: 30px!important; }

.p-t-30 { padding-top: 30px!important; }

.p-30 { padding: 30px!important; }

.developer {
width: 100%;
color: #666;
padding: 20px;
text-align: center;	
}

.developer a {
color: #222;
font-weight: 600;
transition: all 0.3s;
}

.developer a:hover {
color: #FAB921;
transition: all 0.3s;
}

.Form-Login{
width:350px;
display: block;
margin: 0 auto;
background-color: #fefefe;
border: 1px solid #eaeaea;
padding: 30px 20px;
margin-top: 50px;
text-align: center;
}

.Form-Login .telefone {
margin-bottom: 20px;
}

.Form-Login label {	
margin-bottom: 10px;
font-size: 10px;
}

.Form-Login input {
width: 80%;
background-color: #fff!important;
border-radius: 30px!important;
text-align: center;
}

.Form-Login .password {
display: block;
}

.Form-Login .password span {
position: absolute;
width: 30px;
right: 0;
color:#777;
cursor:pointer;
}

.Form-Login a {
font-size: 12px;
text-transform: uppercase;
color: #333;
display: block;
font-weight: 600;
text-decoration: none;
margin-top: 10px;
transition: all 0.3s;
}

.Form-Login a:hover {
letter-spacing: 2px;	
transition: all 0.3s;	
}

.Form-Login .btn-login {
width: 250px;
border-radius: 30px;
text-align: center;
font-size: 15px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 40px;
margin-bottom: 20px;
padding: 15px 0;	
background-color: #333;
color: #fff;
border: none;
transition: all 0.3s;
}

.Form-Login .btn-login:hover {
background-color: #FAB921;	
transform: scale(1.1);
transition: all 0.3s;	
}

#recuperar {
display: none;	
}

.Button-Endereco {
background-color: #fefefe;
padding: 15px 0;
text-align: center;
font-size: 15px;
font-weight: 500;
color: #333;	
position: relative;
width: 100%;
display: block;
border: 3px solid #eaeaea;
margin-top: 10px;
margin-bottom: 20px;
}

.Button-Endereco i {
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
line-height: 47px;
font-weight: 400;
background-color: #990000;
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
color: #fff;
border-radius: 50%;
font-size: 20px;
right: -15px;	
top: -20px;
transition: all 0.3s;
}

.Button-Endereco i:hover {
transform: scale(1.1);
transition: all 0.3s;	
}

.Button-Endereco p {
display: block;
margin-top: 20px;	
}

.Button-Endereco span {
display: block;	
font-size: 13px;
font-weight: 400;
color: #777;	
}

.Button-Endereco .excluir {
margin: 10px;
margin-top: 20px;
padding-left: 0!important;
padding-right: 0!important;
text-align: center!important;
width: 130px;
transition: all 0.3s;	
}

.Button-Endereco .excluir:hover {
background-color: #333;
transition: all 0.3s;	
}

#mapa-usuario #mapa{
display: block;
padding: 0!important;
background-color: #ccc;
width: 100%;
height: 600px;
margin: 0 auto;
border: 1px solid #eaeaea;	
}

#mapa-usuario a {
font-size: 12px;
text-transform: uppercase;
text-align: center;
color: #333;
display: block;
font-weight: 600;
text-decoration: none;
margin-top: 25px;
transition: all 0.3s;
}

#mapa-usuario a:hover {
letter-spacing: 2px;	
transition: all 0.3s;	
}

#mapa {
display: block;	
width: 100%;	
height: 600px;
border: 1px solid #eaeaea;
}

#pac-input {
background-color: #fff;
font-family: Poppins, sans-serif;
outline: none!important;
font-size: 13px;
font-weight: 400;
display: block;
position: absolute;
text-align: center;
top: 80px!important;
height: 50px!important;
width: 350px;
padding: 15px;
border: 1px solid #eaeaea; 
box-shadow: 0 0 5px rgba(0,0,0,0.2);
opacity: 0;
}

#pac-input:focus {
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border: 1px solid #eaeaea!important; 	
}

#pac-input:focus {
border-color: #4d90fe;
}

#mapa-usuario .bnt-mapa {
padding: 20px;
text-align: center;
width: 230px;
display: block;
cursor: pointer;
text-transform: uppercase;
border: 2px solid #fff;
background-color: #FAB921;
color: #fff;
letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 30px;
position: absolute;	
top: 600px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
outline: none;
transition: all 0.3s;
}

#mapa-usuario .bnt-mapa:hover {
transform: scale(1.1);
transition: all 0.3s;	
}

#confirmar {
display: none;
text-align: center;
padding: 30px 50px;	
}

#confirmar h4{
letter-spacing: 1px;	
}

#endereco-final {
background-color: #fefefe;
padding: 15px 0;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #333;	
position: relative;
margin: 0 auto;
width: 100%;
border: 3px solid #eaeaea;
margin-top: 30px;
margin-bottom: 30px;
}

#endereco-final span {
font-size: 11px;
font-weight: 400;
color: #777;	
}

.btn-2 {
padding: 20px 0;	
width: 200px;
text-align: center;
cursor: pointer;
background-color: #FAB921!important;
color: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
border: 2px solid #fff;
letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
border-radius: 30px;
position: relative;	
text-transform: uppercase;
margin: 5px;
margin-top: 30px;
outline: none;
transition: all 0.3s;
}

.btn-2:hover {
transform: scale(1.1);
transition: all 0.3s;		
}

#voltar {
display: none;	
position: absolute;
top: 0px;
right: 10px;
background-color: #1F2024;  
width: 60px;
height: 60px;
text-align: center;
line-height: 68px;
text-transform: uppercase;
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}

#voltar i {
background-color: transparent;
color: #fff;
border: none;
outline: none;	
font-size: 25px;
margin-right: 5px;  
}

#voltar:hover {
background-color: #FAB921; 
color: #fff!important;  
transform: scale(1.2);  
}

#voltar:focus {
background-color: #FAB921; 
color: #fff!important;  
transform: scale(1.2);  
}

#navbar .vs-nav {
display: none;
position: fixed!important;
background-color: #fff;
border-bottom: 1px solid #eaeaea;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
text-align: center;
z-index: 999;
top: -35px;
width: 100%;
margin-left: -15px!important;
height: 120px;
padding: 15px 0;
vertical-align: middle;
transition: all 0.4s;
}

.sticky .vs-nav {
display: block!important;
padding-top: 30px!important;
transition: all 0.4s!important;	
}

@media only screen and (max-width: 772px) {	
.header h1 { font-size: 16px; }
}

.indicador {
width: 360px;
display: block;
position: relative;
margin: 0 auto;
margin-top: 40px;
}

.indicador .i-whatsapp,
.indicador .i-facebook {
background-color: #333;
display: inline-block;
color: #fff;
font-size: 12px;
padding: 15px 20px;
letter-spacing: 1px;
border-radius: 5px;
text-align: center;
transition: all 0.3s;
}

.indicador .i-whatsapp {
float: left;	
}

.indicador .i-facebook {
float: right;	
}

.indicador a i {
font-size: 18px;
margin-right: 10px;	
}

.indicador .i-whatsapp:hover {
transform: scale(1.1);	
background-color: #29C44D;
color: #fff!important;	
transition: all 0.3s;
}

.indicador .i-facebook:hover {
transform: scale(1.1);	
background-color: #4064AC;
color: #fff!important;	
transition: all 0.3s;
}

.i-info {
display: block;
font-size: 10px;
padding: 10px 20px;
letter-spacing: 1px;
background-color: #fefefe;
border: 1px solid #eaeaea;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}

.time_p {
position: relative;
margin: 5px;	
}

.time_p span {	
background-color: #fefefe;
border: 1px solid #eaeaea;
padding: 10px 40px;
font-size: 11px;
border-radius: 0px;
}

.time_p i {
margin-right: 10px;
font-size: 15px;
}

.text-center {
text-align: center!important;	
}

.add-btn {
display: block;
position: relative;
width: 100%;
height: 60px;
line-height: 58px;
text-align: center;
color: #333;
font-size: 15px;
background-color: #fdfdfd;
border: 1px solid #eaeaea;
border-radius: 5px;
letter-spacing: 2px;
font-weight: 600;
margin-top: 20px;
transition: all 0.3s;	
}

.add-btn:hover {
background-color: #FAB921;
color: #fff;	
transition: all 0.3s;	
}

.uppercase {
text-transform: uppercase!important;	
}

.bt_empresa {
display: block;
position: absolute;
top: 10px;
right: 10px;
font-size: 10px;
font-weight: 600;
color: #333;
text-transform: uppercase;	
background-color: #fefefe;
border: 1px solid #eaeaea;
padding: 7px 25px;
border-radius: 30px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
transition: all 0.3s;
}

.bt_empresa:hover {
color: #333;
transform: scale(1.1);
background-color: #fff;
transition: all 0.3s;	
}

.cartao {
width: 350px;
display: block;
margin: 0 auto;	
text-align: center;
padding: 20px;
border: 1px solid #eaeaea;
margin-top: 30px;
}

.cartao img {
margin-bottom: 20px;
width: 100%;	
}

.cartao h3 {
padding: 10px;	
margin: 0;
margin-bottom: 15px;
background-color: #00A3D9;
color: #fff;
width: 100%;
font-size: 40px;
font-weight: 700;
text-shadow: 0 2px 3px rgba(0,0,0,0.2);
text-align: center;	
}

#form-checkout {
display: flex;
flex-direction: column;
} 

.cartao .c_div, .cartao input, .cartao select {
height: 50px;
width: 100%;
display: block;
font-weight: 500!important;
color: #444444!important;
display: inline-block;
border: 1px solid #eaeaea;
border-radius: 2px;
padding: 10px;
margin-bottom: 10px;
}

.cartao button {
background-color: #00C292;
border-color: #00C292;
border-radius: 30px;
width: 220px;
margin: 0 auto;
margin-top: 20px;
color: #fff;	
transition: all 0.3s;	
}

.cartao button:hover {
transform: scale(1.05);
transition: all 0.3s;	
}

#status_bar {
width: 350px;
display: block;
margin: 0 auto;		
padding: 20px;
border-radius: 0px;
background-color:  #333;
color: #fff;
text-align: center;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
}

.pix {
width: 350px;
display: block;
margin: 0 auto;	
text-align: center;
padding: 20px;
border: 1px solid #eaeaea;
margin-top: 30px;
}

.pix h3 {
padding: 10px;	
margin: 0;
margin-bottom: 15px;
background-color: #00A3D9;
color: #fff;
width: 100%;
font-size: 40px;
font-weight: 700;
text-shadow: 0 2px 3px rgba(0,0,0,0.2);
text-align: center;
}

.pix img {
border: 5px solid #000;	
margin-top: 5px;
}

.pix input {
width: 100%;
border: 1px solid #eaeaea;
padding: 10px;	
margin-top: 20px;
text-align: center;
margin-bottom: 20px;
}

.pix button {
margin-bottom: 20px;
background-color: #333;
border-color: #333;
color: #fff;	
transition: all 0.3s;
}

.pix button:hover {
transform: scale(1.1);
background-color: #00A3D9;
border-color: #00A3D9;
color: #fff;	
transition: all 0.3s;
}

.pix .continuar {
background-color: #00C292!important;
border-color: #00C292!important;
color: #fff;	
transition: all 0.3s;
}

.central_l {
display: block;
position: absolute;
left: 10px;
top: 10px;
color: #333;
background-color: #fff;
width: 50px;
height: 50px;
line-height: 50px;	
border-radius: 50%;
font-size: 18px;
transition: all 0.3s;
}

.central_l:hover {
transform: scale(1.1);	
background-color: #FAB921;
color: #fff;	
transition: all 0.3s;
}

.swiper {
width: 100%;
height: 170px;
}

.swiper-slide {
text-align: center;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #fff;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: block;
width: 40%!important;
margin: 20px 5px!important;
margin-right: 5px!important;
height: 120px!important;
border-radius: 5px;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}

@media only screen and (min-width: 992px) {
.filtro {
width: 650px;
margin: 0 auto;
display: block;
position: relative;	
margin-bottom: 50px;
margin-top: 30px;
}
.swiper-slide {
width: 20%!important;
}	
}

.swiper-slide:hover {
transform: scale(1.05)!important;
transition: all 0.3s;	
}

.swiper-slide:nth-child(1n) {
margin-left: 5px;
}

.swiper-slide .mascara {
background-color: rgba(0,0,0,0.3);	
width: 100%;
height: 120px;
line-height: 120px;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper-pagination {
top: 150px;  
}

.swiper-pagination-bullet-active {
background-color: #000 !important;
}

#produtos_li { padding: 10px; }

.produto-c {
width: 100%;
display: block;
background: rgba(252,252,248,0.3)!important;
padding: 15px;
cursor: pointer;
border-radius: 5px;
border: 1px solid #eaeaea;
margin-bottom: 10px;
transition: all 0.3s;
}

.produto-c:hover {
transform: scale(1.05);
transition: all 0.3s;
}

.produto-c .imagem {
position: relative;
display: inline-block;
width: 29%;
}

.produto-c .conteudo {
width: 66%;
display: inline-block;
text-align: left;
color: #222;
}

.produto-c .conteudo h2{
display: block;
font-size: 13px;
color: #222;
text-transform: uppercase;
}

.produto-c .conteudo span{
display: block;
font-size: 18px;
font-weight: 600;
color: #222;
}

.produto-c .imagem .img {
width: 80px;
height: 80px; 
border-radius: 5px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #eaeaea;
margin-top: 10px;
margin-left: 10px;
}

.lembrete {
width: 98%!important;
display: block;	
margin-top: 10px;
padding: 15px!important;
border: 1px solid #eaeaea!important;
}

.m-5 {
margin: 15px;	
}

.p-15 {
padding: 10px 30px;	
}

.toogle-sabor {
display: none;
width: 100%;	
}
