@charset "UTF-8";
/*! -------------------------------------------------
Theme Name: Grupos de Apoyo Theme
Theme URI: http://www.gruposdeapoyosevilla.es/
Description: Penkode Framework WordPress theme. It's not necesary the use of Child Themes, you can edit all SASS files included on the theme for build your WordPress site. Created by Paulo Ramalho.
Author: Paulo Ramalho (wwww.penkode.com)
Author web: www.penkode.com
Version: 2.0
.
For exclusive use of Paulo Ramalho, Penkode customers.
.
----------------------------------------------*/
/*
---------------------------- @RESETS   
----------------------------
*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { min-height: 100%; margin: 0px; padding: 0px; }

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

pre { font-family: monospace, monospace; font-size: 1.1em; }

a { background-color: transparent; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

small { font-size: 100%; }

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

sub { bottom: -0.25em; }

sup { top: -0.5em; }

img { border-style: none; }

button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

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

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted; }

fieldset { padding: 0.35em 0.75em 0.625em; }

progress { vertical-align: baseline; }

textarea { overflow: auto; }

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

[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

details { display: block; }

summary { display: list-item; }

template { display: none; }

[hidden] { display: none; }

/*
---------------------------- @BASE   
----------------------------
*/
html { font-size: 16px; }

body { background: #F3F3F3; }

img { height: auto; max-width: 100%; }

figure { margin: 0; /* Extra wide images within figure tags don't overflow the content area. */ }

iframe { border: 0px; }

/*
---------------------------- @FONTS
----------------------------
*/
/*** BEGIN UNUSED FONTS

font-face {
	font-family: 'OpenSans-Regular';
	src: url('fonts/opensans-regular/OpenSans-Regular.woff');
	src: local('☺'), url('fonts/opensans-regular/OpenSans-Regular.woff') format('woff'), url('fonts/opensans-regular/OpenSans-Regular.ttf') format('truetype'), url('fonts/opensans-regular/OpenSans-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Muli-ExtraBold';
	src: url('fonts/muli-extrabold/Muli-ExtraBold.woff');
	src: local('☺'), url('fonts/muli-extrabold/Muli-ExtraBold.woff') format('woff'), url('fonts/muli-extrabold/Muli-ExtraBold.ttf') format('truetype'), url('fonts/muli-extrabold/Muli-ExtraBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Futura-Regular';
	src: url('fonts/futura-regular/futura.woff');
	src: local('☺'), url('fonts/futura-regular/futura.woff') format('woff'), url('fonts/futura-regular/futura.ttf') format('truetype'), url('fonts/futura-regular/futura.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

END UNUSED FONTS ***/
@font-face { font-family: 'Roboto-Light'; src: url("fonts/roboto-light/Roboto-Light.woff"); src: local("☺"), url("fonts/roboto-light/Roboto-Light.woff") format("woff"), url("fonts/roboto-light/Roboto-Light.ttf") format("truetype"), url("fonts/roboto-light/Roboto-Light.svg") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto-Black'; src: url("fonts/roboto-black/Roboto-Black.woff"); src: local("☺"), url("fonts/roboto-black/Roboto-Black.woff") format("woff"), url("fonts/roboto-black/Roboto-Black.ttf") format("truetype"), url("fonts/roboto-black/Roboto-Black.svg") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Playfair-Regular'; src: url("fonts/playfair/PlayfairDisplay-Regular.woff"); src: local("☺"), url("fonts/playfair/PlayfairDisplay-Regular.woff") format("woff"), url("fonts/playfair/PlayfairDisplay-Regular.ttf") format("truetype"), url("fonts/playfair/PlayfairDisplay-Regular.svg") format("svg"); font-weight: normal; font-style: normal; }
p { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; }

article p strong, #main-container article ul li strong, #main-container article ol li strong { font: 1.2rem "Roboto-Black", Helvetica, Arial, sans-serif; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; }

h1, h2, h3, h4, h5, h6 { font-family: "Playfair-Regular", Helvetica, Arial, sans-serif; font-weight: 400; color: #000; margin: 0px 0px 0px 0px; letter-spacing: -0.1rem; }

h1 { font-size: calc(2.9rem + 0.1vw); font-weight: 500; padding-bottom: 0.5em; line-height: calc(2.9rem + 0.1vw); }

h2 { font-size: calc(2.4rem + 0.5vw); font-weight: 500; padding-bottom: 0.5em; line-height: calc(2.4rem + 0.5vw); }

h3 { font-size: calc(1.8rem + 0.5vw); font-weight: 500; padding-bottom: 0.2777777778em; line-height: calc(1.8rem + 0.5vw); }

h4 { font-size: calc(1.5rem + 0.5vw); font-weight: 500; padding-bottom: 0.25em; line-height: calc(1.5rem + 0.5vw)0.1em; }

h5 { font-size: calc(1.2rem + 0.5vw); font-weight: 500; padding-bottom: 0.2380952381em; line-height: calc(1.2rem + 0.5vw)0.1em; }

h6 { font-size: calc(0.9rem + 0.5vw); font-weight: 500; padding-bottom: 0.1785714286em; line-height: calc(0.9rem + 0.5vw)0.1em; }

h1.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; margin: 0px 0px 20px 0px; background: #E0DFC7; }

.page-title .term-name { font: "Playfair-Regular", Helvetica, Arial, sans-serif; font-size: 1.2rem; }

article ul { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; font-size: 1.2rem; color: #000; list-style-type: none; margin: 25px 0 25px 20px; }
article ul li { max-width: 800px; line-height: 1.9rem; }
article ul li:before { content: "\f17b"; font-family: "LineAwesome"; font-size: 1.2rem; color: #000; padding: 0 10px 0 0; }
article ul li:before a { color: #d8ae90; }

article ol { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; font-size: 1.2rem; color: #000; margin: 25px 0 25px 20px; }
article ol li { max-width: 800px; line-height: 1.9rem; }
article ol li::marker { font-weight: 800; color: #E0DFC7; }

blockquote { display: flex; flex-direction: column; border-left: 6px solid #E0DFC7; margin: 40px auto 40px 20px; padding: 40px; max-width: 70%; }

blockquote p { font: italic 1.2rem "Georgia", Times, Times New Roman, Palatino, serif; font-size: 1.4em; line-height: 1.4em; color: #000; text-indent: 1.7em; /*Text indent to fit quote icon size*/ position: relative; margin: 0; }
blockquote p:before { position: absolute; content: open-quote; font: italic 1.2rem "Georgia", Times, Times New Roman, Palatino, serif; font-size: 3em; font-weight: bold; color: #000; top: -10px; left: -50px; /*To match text indent position*/ }
blockquote p:after { content: close-quote; }

cite { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; font-size: 1em; font-style: normal; color: #000; padding: 2px 8px; margin-bottom: 0px; }

pre { font: "Courier", Courier, monospace; color: #000; background: #F3F3F3; border: 1px solid #efefef; margin: 40px 0px 40px 0px !important; padding: 2.5em; white-space: pre-wrap; }

pre a { color: #d8ae90; }

pre a:hover { color: #E0DFC7; }

.wp-block-code { color: #4ae044; background: #2d342a; }

captions, figcaption, p.wp-caption-text, .wp-block-image { font: 400 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-size: 0.9230769231rem; color: #000 !important; margin: -5px 0px 10px 0px; text-align: left; }

/*
---------------------------- @GRID AREAS   
----------------------------
*/
header { grid-area: header; }

nav { grid-area: nav; }

main { grid-area: main; }

article { grid-area: article; }

section { grid-area: section; }

aside { grid-area: aside; }

footer { grid-area: footer; }

h1 { grid-area: h1; }

h2 { grid-area: h2; }

h3 { grid-area: h3; }

h4 { grid-area: h4; }

h5 { grid-area: h5; }

h6 { grid-area: h6; }

.page-title { grid-area: pagetitle; }

.main-container { grid-area: maincontainer; }

.top-header { grid-area: topheader; }

.slider { grid-area: slider; }

#home-full-col { display: grid; grid-template-columns: 12% 1fr 12%; grid-template-rows: 130px auto 1fr auto; min-height: 100vh; grid-template-areas: "header header header" "slider slider slider" "main main main" ". footer ."; }

#grid-one-col { display: grid; grid-template-columns: 20% 1fr 20%; grid-template-rows: 230px 0 1fr auto; height: 100vh; grid-template-areas: "header header header" "pagetitle pagetitle pagetitle" ". main ." ". footer ."; }
@media screen and (max-width: 1440px) { #grid-one-col { grid-template-columns: 15% 1fr 15%; } }
@media screen and (max-width: 768px) { #grid-one-col { grid-template-columns: 5% 1fr 5%; } }

#grid-one-col-wide { display: grid; grid-template-columns: 14% 1fr 14%; grid-template-rows: 130px 250px 1fr auto; height: 100vh; grid-template-areas: "header header header" "pagetitle pagetitle pagetitle" ". main ." "footer footer footer"; }
@media screen and (max-width: 768px) { #grid-one-col-wide { grid-template-columns: 5% 1fr 5%; } }

#grid-two-col { display: grid; grid-template-columns: 18% 1fr 20% 18%; grid-template-rows: 130px 250px 1fr auto; grid-column-gap: 30px; grid-row-gap: 0px; height: 100vh; grid-template-areas: " header header header header" " pagetitle pagetitle pagetitle pagetitle" ". main aside . " "footer footer footer footer"; }
@media screen and (max-width: 768px) { #grid-two-col { grid-template-columns: 5% 1fr 5%; } }
@media screen and (max-width: 768px) and (max-width: 992px) { #grid-two-col { grid-template-columns: 3% 1fr 3%; grid-template-areas: "header header header" "pagetitle pagetitle pagetitle" "main main main" "footer footer footer"; }
  #grid-two-col aside { display: none; } }

#single-blog { display: grid; grid-template-columns: 13% 1fr 20% 13%; grid-template-rows: 140px 400px 1fr auto; grid-column-gap: 0; grid-row-gap: 0; height: 100vh; grid-template-areas: " header header header header" " pagetitle pagetitle pagetitle pagetitle" ". main aside . " ". footer footer ."; }
@media screen and (max-width: 1440px) { #single-blog { grid-template-columns: 5% 1fr 20% 5%; } }
@media screen and (max-width: 992px) { #single-blog { grid-template-columns: 3% 1fr 3%; grid-template-areas: "header header header" "pagetitle pagetitle pagetitle" "main main main" "footer footer footer"; }
  #single-blog aside { display: none; } }

#grid-login { display: grid; grid-template-columns: 25% 1fr 25%; grid-template-rows: 150px 1fr auto; height: 100vh; grid-template-areas: "header header header" ". main ."; }

.post-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 0em; }

.post-col { display: flex; padding: 1em; width: 100%; }

.grid-item { display: flex; flex-direction: column; width: 100%; border-radius: 0.2em; overflow: hidden; background: #FFF; -webkit-box-shadow: 0px 0px 19px 2px rgba(0, 0, 0, 0.19); box-shadow: 0px 0px 19px 2px rgba(0, 0, 0, 0.19); }
.grid-item figure { position: relative; width: 100%; min-height: 150px; overflow: hidden; transition: transform .2s; background: url(images/no-image.png) no-repeat center center; background-size: cover; }
.grid-item figure:hover { transform: scale(1.05); }

.grid-item figure img { width: 100%; height: 240px; object-fit: cover; margin-bottom: 20px; }
@media screen and (max-width: 800px) { .grid-item figure img { height: 200px; width: 100%; object-fit: cover; } }

figure.overlay:before { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; display: inline-block; z-index: 0; }

figure.overlay-color:before { background-color: rgba(0, 0, 0, 0.5); }

figure.overlay:hover:before { opacity: 0.1; transition: 0.5s; cursor: pointer; }

.grid-item-content { display: flex; flex-direction: column; align-items: center; text-align: center; flex-grow: 1; padding: 0.5rem 2.5rem 0.5rem 2.5rem; }

.grid-item-content .time { margin: 0px; }

.grid-item-content p.grid-item-excerpt { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; font-size: 0.95rem; line-height: 1.35rem; margin: 0; text-align: center; }

.grid-item-content h5 { margin: 10px 0px 10px 0px; font-size: 1.8rem; line-height: 1.95rem; }

.flex-spacer { flex-grow: 1; }

/*
---------------------------- @PAGES 
----------------------------
*/
main#main-container { background: white; padding: 40px 60px; margin-bottom: 20px; }

.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; margin: 0px 0px 20px 0px; background: #E0DFC7; }
.page-title h1 { font: 400 calc(2.5rem + 2.5vmin) "Playfair-Regular", Helvetica, Arial, sans-serif; color: #000; letter-spacing: -0.1rem; line-height: calc(2.4rem + 3.5vmin); padding: 0px 20px; }

article#container { padding: 0px 0px 60px 0px; }

.time { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 1em 0px 1em 0px; font-size: 0.85rem; line-height: 1.1445783133rem; }
.time:before { content: '\f017'; font-family: 'FontAwesome'; font-style: normal; font-size: 0.85rem; color: #000; padding: 0px 5px 0px 0px; }

.error404.page-title { display: none; }

.error404 #grid-one-col { grid-template-rows: 130px 100px 1fr auto; }

.post-col.eventos h5 a { color: #000; text-decoration: none !important; }
.post-col.eventos h5 a:hover { color: red; }

p.fecha-evento { margin: 30px auto 0 auto; position: relative; z-index: 2; }
p.fecha-evento:before { content: ""; display: flex; position: absolute; top: -14px; left: -10px; background: #E0DFC7; height: 36px; width: 36px; border-radius: 100px; z-index: -1; }

.single-post .page-title h1 { color: #fff; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.63); }

.single-post .post-image { margin-bottom: 20px; }

.author-container { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; display: grid; grid-template-rows: 30px 50px; grid-template-columns: 80px 100%; grid-gap: 12px; grid-template-areas: "media name" "media desc"; padding: 60px 0px; margin: 0 0 80px 0; }
.author-container .author-name { grid-area: name; align-self: end; font-weight: 800; font-size: 1.0714285714rem; }
.author-container .author-Desc { grid-area: desc; font-weight: 400; font-size: 0.8823529412rem; line-height: 1.5833333333rem; }

.author-container img { grid-area: media; align-self: start; border-radius: 100px; }

.titulo-formulario { margin-bottom: 25px; }

p.info-evento { font-size: 1em !important; background: #fff; padding: 5px 10px; border: 1px solid #E0DFC7; }
p.info-evento strong { font-family: "Roboto-Black", Helvetica, Arial, sans-serif; }

article p.info-evento { font-size: 1em !important; background: #E0DFC7 !important; padding: 5px 10px; border: 1px solid #E0DFC7; display: none; }
@media screen and (max-width: 992px) { article p.info-evento { display: block; } }

#home-full-col .full-slider { position: relative; display: block; width: 100%; top: -130px; }

.home main { display: flex; padding: 0; flex-direction: column; justify-content: center; }

#home-full-col main { display: flex; flex-direction: column; justify-content: center; padding: 0; margin-top: -130px; }

#home-full-col section { display: flex; flex-direction: column; align-items: center; width: 100%; }

#home-full-col article { width: 75.66%; }
@media screen and (max-width: 800px) { #home-full-col article { width: 100%; padding: 60px 5% 60px 5%; } }

#home-full-col main section { padding: 20px 0; }

.home .page-thumb { float: left; padding: 40px 20px 0 0; }

.home h1.blog-title { display: flex; justify-content: flex-start; padding: 20px 0 10px 20px; }

#home-full-col .section-01 { margin-top: -240px; z-index: 99; }
@media screen and (max-width: 780px) { #home-full-col .section-01 { margin-top: -20px; } }

#article-01, #article-02, #article-03 { background: #FFFCF7; padding: 40px 80px; }
@media screen and (max-width: 780px) { #article-01, #article-02, #article-03 { padding: 40px 20px; } }

#article-02 { background: #fff; }

/*
---------------------------- @MAIN NAV  
----------------------------
*/
.main-nav { display: none; flex-direction: row; margin-right: 20px; }

ul.main-nav li { font-size: 1.1009174312rem; }

.main-nav li { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; display: block; margin-bottom: 0px !important; }

.main-nav li a { color: #000; padding: 0.5rem 0.7rem 0.5rem 0.7rem; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }

.main-nav li a:hover { background-color: none; color: #E0DFC7; }

.menu-item-has-children > a:after { content: '\f107'; font-family: 'FontAwesome'; font-size: 1.2rem; font-weight: normal; color: #000; padding-left: 8px; line-height: 1.4em; transform: rotate(0deg); }

.menu-item-has-children > a:after:hover { color: #E0DFC7; }

/*.main-nav li.last-item a { //If you want different styles include "last-item a" on menu's WP dashboard classes color:$branding-color2; font-size: 0.84em; border-radius: 80px; padding: 6px 15px; margin-left: 5px; border-bottom: 2px solid $branding-color1;
 &:hover { color: $white !important; background: $branding-color1; }
}*/
/* SUB MENU *************************** */
.main-nav ul li { font-size: 1.12rem; }

@media (min-width: 560px) { nav ul ul { display: none; position: absolute; } }
nav ul li:hover > ul { display: block; padding-left: 2rem; }

@media (min-width: 560px) { nav ul li:hover > ul { padding-left: 0; background: #ccc; } }
nav ul ul a { width: 200px; }

nav ul li:hover > ul a { color: #000; }

.main-nav .sub-menu li { display: flex; /*padding-right: 3em;*/ white-space: nowrap; }
.main-nav .sub-menu li:hover, .main-nav .sub-menu li a:hover { background-color: #FFFCF7; color: #2a2929; }

nav ul ul ul { margin: 0 0 0 100%; }

.menu-item-has-children .menu-item-has-children > a:after { content: '\f105'; font-family: 'FontAwesome'; font-weight: bold; color: #fff; margin: 0px 0px 0px 8px; transform: rotate(0deg); }

.main-nav li.current-menu-item > a, .main-nav li.current-menu-ancestor > a, .main-nav li.current_page_item > a, .main-nav li.current_page_ancestor > a, .main-nav li.current_page_parent > a { color: #FFFCF7; border-bottom: 4px solid #E0DFC7; }

/*
---------------------------- @FOOTER NAV  
----------------------------
*/
.nav-footer { display: flex; flex-direction: row; justify-content: center; }
.nav-footer li { display: flex; }
.nav-footer li a { padding: 0.5rem; text-decoration: none; text-transform: lowercase; font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; font-size: 1.12rem; color: #000; margin: 0px; }

ul.nav-footer { padding: 0px; }

.nav-footer li a:hover { color: #000; }

#nav-float { display: flex; justify-content: space-between; align-items: center; position: fixed; height: 70px; width: 100%; padding: 0 10px; background: #ededed; z-index: 9999; box-shadow: 2px 2px 5px #767676; }

#nav-float #logo-float-container img { max-height: 50px; }

#nav-float .float-nav { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; font-size: 1em; }

ul.float-nav { list-style: none; display: flex; flex-direction: row; margin: 0 !important; }
ul.float-nav li a { color: #000; text-decoration: none; padding: 0 10px; }
ul.float-nav li a:hover { color: #ccc !important; }

/*
---------------------------- @MOBILE NAV  
----------------------------
*/
.burguer-icon { width: auto; transition: all 1s ease; z-index: 9999; display: flex; }

.bar1, .bar2, .bar3 { width: 33px; height: 3px; background-color: #000; margin: 8px 0; transition: 0.4s; }

@media screen and (max-width: 640px) { .bar1, .bar2, .bar3 { width: 26px; height: 2px; margin: 6px 0; }
  #close-menu .bar1 { -webkit-transform: rotate(-45deg) translate(-3px, 7px); transform: rotate(-45deg) translate(-3px, 7px); }
  #close-menu .bar3 { -webkit-transform: rotate(45deg) translate(-5px, -8px); transform: rotate(45deg) translate(-5px, -8px); } }
a#close-menu .bar1, a#close-menu .bar2, a#close-menu .bar3 { background-color: black; }

#open-menu, #close-menu { display: block; cursor: pointer; position: absolute; left: 20px; top: 70px; }

.home #open-menu, .home #close-menu { top: 40px; }

#close-menu .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-8px, 7px); }

#close-menu .bar2 { opacity: 0; }

#close-menu .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

.panel-nav { display: flex; background: #FFFCF7; flex-direction: column; position: fixed; align-items: center; width: 100%; transition: all 1s ease; left: -100%; top: 180px; bottom: 0px; z-index: 9999; }

.panel-nav:target { left: 0; transition: all 0.3s ease; }

.panel-nav:target + .burguer-icon { width: 90%; }

.panel-nav:target + .burguer-icon a#open-menu { display: none; }

.panel-nav:target + .burguer-icon a#close-menu { display: block; }

a#close-menu { display: none; }

.mobile-nav { font-family: "Playfair-Regular", Helvetica, Arial, sans-serif; font-size: 1.44rem; padding: 0px; list-style: none; width: 100%; display: block; }

.mobile-nav a { color: #000; text-decoration: none; border-bottom: 1px solid #525050; display: block; padding: 5px 10px; }
.mobile-nav a:hover { color: .mobile-nav a:hover branding-color1; background: white; }

.mobile-nav ul.sub-menu li { list-style: none; font-size: 1.1rem; }

.mobile-nav ul.sub-menu { padding-left: 10px; }

.mobile-nav .menu-item-has-children > a:after { content: ''; }

article p a:link, main p a:link, article ul a:link, article ol a:link, p#breadcrumbs a { color: #000; font-weight: bold; text-decoration: none; /*text-decoration-color: $article-link-decoration-color; //use as normal decoration*/ padding: 0px 0px; transition: color 0.6s ease-out, background 0.6s ease-out; background-image: linear-gradient(to right, #d89090 100%, #fff 0); background-position: 0 140%; background-repeat: repeat-x; background-size: 100% 43%; }
article p a:link:hover, main p a:link:hover, article ul a:link:hover, article ol a:link:hover, p#breadcrumbs a:hover { color: #ccc; background: #E0DFC7; text-decoration: none; border-bottom: none; }

.wp-block-gallery figure a, article a img { transition: transform .3s; /* Animation */ }
.wp-block-gallery figure a:hover, article a img:hover { transform: scale(1.013); }

a.link-arrow, p a.link-arrow { font-family: "Playfair-Regular", Helvetica, Arial, sans-serif; font-size: 1.3em; font-weight: normal !important; color: red !important; background-image: none !important; }
a.link-arrow:hover, p a.link-arrow:hover { background: none !important; color: black !important; text-decoration: underline !important; }
a.link-arrow:after, p a.link-arrow:after { content: "\f061"; font-family: 'FontAwesome'; font-size: 0.88em; font-weight: normal; text-decoration: none !important; color: red; position: relative; right: -10px; }

.sidebar a { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; font-size: 1.12rem; text-decoration: none; line-height: 1.7230769231rem; margin: 0px 0px 0.5em 0px; color: #d8ae90; display: block; }
.sidebar a:hover { color: #000; }

.page-template-login article { display: flex; justify-content: center; }

.page-template-login article a { margin: 10px; }

article a img:hover { background: none !important; }

.back-to-top { display: none; position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border: 1px solid #E0DFC7; cursor: pointer; z-index: 999; }
.back-to-top:before { content: '\f106'; font-family: 'FontAwesome'; font-size: 2em; color: #E0DFC7; position: absolute; left: 13px; top: 4px; }

.back-to-top:hover { background: #E0DFC7; }
.back-to-top:hover:before { color: #fff; }

/*
---------------------------- @BUTTONS   
----------------------------
*/
button, .button, a.button, button a, p a.button, input#wp-submit.button.button-primary, input.wpcf7-submit, .page-template-login article a, div.wp-block-button a.wp-block-button__link { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; background: #F3F3F3; color: #000; margin: 20px 0; border: 0.15em solid #FFFCF7; text-decoration: none; text-transform: lowercase; text-align: center; cursor: pointer; -webkit-transition: background 0.6s ease; -moz-transition: background 0.6s ease; -ms-transition: background 0.6s ease; -o-transition: background 0.6s ease; transition: background 0.6s ease; background-size: 210% 100%; background-position: 99% center; background-image: linear-gradient(100deg, white 50%, #F3F3F3 50%); font-size: 1.0909090909rem; padding: 0.5em 2.2em; border-radius: 0.4em; }
button:hover, .button:hover, a.button:hover, button a:hover, p a.button:hover, input#wp-submit.button.button-primary:hover, input.wpcf7-submit:hover, .page-template-login article a:hover, div.wp-block-button a.wp-block-button__link:hover { background: #cecece; color: #000; }

#nav-single .pag-previous a, #nav-single .pag-next a, .post-col.post-full div.grid-item div.grid-item-content a.button { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; background: #F3F3F3; color: #000; margin: 20px 0; border: 0.15em solid #FFFCF7; text-decoration: none; text-transform: lowercase; text-align: center; cursor: pointer; -webkit-transition: background 0.6s ease; -moz-transition: background 0.6s ease; -ms-transition: background 0.6s ease; -o-transition: background 0.6s ease; transition: background 0.6s ease; background-size: 210% 100%; background-position: 99% center; background-image: linear-gradient(100deg, white 50%, #F3F3F3 50%); font-size: 0.9677419355rem; padding: 0.5em 1.3em; border-radius: 0.2em; }
#nav-single .pag-previous a:hover, #nav-single .pag-next a:hover, .post-col.post-full div.grid-item div.grid-item-content a.button:hover { background: #cecece; color: #000; }

/*
---------------------------- @PAGINATION   
----------------------------
*/
#nav-single { display: flex; flex-wrap: wrap; justify-content: space-between; }
#nav-single .pag-previous a, #nav-single .pag-next a { margin: 10px; display: block; }

nav.pagination { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 40px; }
nav.pagination a.page-numbers, nav.pagination span.page-numbers { background-color: #F3F3F3; font-family: "Roboto-Light", Helvetica, Arial, sans-serif; text-transform: lowercase; color: #d8ae90; margin-bottom: 30px; border: 0.01em solid #efefef; border-color: #FFFCF7; border-radius: 0.4em; text-decoration: none; cursor: pointer; padding: 0.3em 0.8em; margin: 0px 2px; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; font-size: 0.95rem; }
nav.pagination a.page-numbers:hover, nav.pagination span.page-numbers:hover { background-color: #cecece; color: #000; }

.pagination span.page-numbers.current { color: #000; background-color: #cecece; }

/*
---------------------------- @SOCIAL BUTTONS  
----------------------------
*/
header .social { position: absolute; right: 20px; }

.social { margin-bottom: 20px; }

.social a i { font-size: 1.2em; color: #fff; background: #000; display: inline-block; border-radius: 40px; height: 40px; width: 40px; padding: 4px; margin: 5px; text-align: center; line-height: 1.8em; /* or 50% width & line-height */ }
.social a i:hover { color: #000; background: #fff; }

/*
---------------------------- @INPUTS   
----------------------------
*/
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { font-size: 1rem; color: #000; background-color: #fff; border: 0px solid #E0DFC7; border-radius: 0.4em; padding: 15px; width: 100%; -webkit-box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.19); -moz-box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.19); box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.19); }
input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active, input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active, input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active, input[type="password"]:hover, input[type="password"]:focus, input[type="password"]:active, input[type="number"]:hover, input[type="number"]:focus, input[type="number"]:active, input[type="tel"]:hover, input[type="tel"]:focus, input[type="tel"]:active, input[type="range"]:hover, input[type="range"]:focus, input[type="range"]:active, input[type="date"]:hover, input[type="date"]:focus, input[type="date"]:active, input[type="month"]:hover, input[type="month"]:focus, input[type="month"]:active, input[type="week"]:hover, input[type="week"]:focus, input[type="week"]:active, input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active, input[type="datetime"]:hover, input[type="datetime"]:focus, input[type="datetime"]:active, input[type="datetime-local"]:hover, input[type="datetime-local"]:focus, input[type="datetime-local"]:active, input[type="color"]:hover, input[type="color"]:focus, input[type="color"]:active, textarea:hover, textarea:focus, textarea:active { border-color: #432424; box-shadow: none; border-color: #E0DFC7; }

textarea { resize: none; overflow: auto; }

label { font-family: "Roboto-Black", Helvetica, Arial, sans-serif; font-size: 1rem; display: flex; line-height: auto; padding-bottom: 20px; }

placeholder { font-family: "Roboto-Black", Helvetica, Arial, sans-serif; font-size: 1rem; display: flex; line-height: auto; }

/*
---------------------------- @TABLES
----------------------------
*/
tr:nth-child(even) { background-color: #f2f2f2; }

tr:first-child td { background-color: #bfbfbf; }

table { max-width: 100%; border-collapse: collapse; border-spacing: 0; border-color: #b8b8b8; margin: 40px auto 40px auto; }

table th, table td, table td { padding: 0.470588235em; text-align: left; border-top: 0.071428571em solid #b8b8b8; font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; font-size: 1rem; }

table th { font-weight: bold; vertical-align: bottom; }

table td { vertical-align: top; }

table thead:first-child tr th, table thead:first-child tr td { border-top: 0; }

table tbody + tbody { border-top: 0.142857143em solid #b8b8b8; }

table-condensed th, table-condensed td { padding: 0.294117647em; }

table-bordered { border: 0.071428571em solid #b8b8b8; border-collapse: collapse; border-radius: 0.470588235em; }

table-bordered th + th, table-bordered td + td, table-bordered th + td, table-bordered td + th { border-left: 0.071428571em solid #b8b8b8; }

table-bordered thead:first-child tr:first-child th, table-bordered tbody:first-child tr:first-child th, table-bordered tbody:first-child tr:first-child td { border-top: 0; }

table-bordered thead:first-child tr:first-child th:first-child, table-bordered tbody:first-child tr:first-child td:first-child { border-radius: 0.470588235em 0 0 0; }

table-bordered thead:first-child tr:first-child th:last-child, table-bordered tbody:first-child tr:first-child td:last-child { border-radius: 0 0.470588235em 0 0; }

table-bordered thead:last-child tr:last-child th:first-child, table-bordered tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 0.470588235em; }

table-bordered thead:last-child tr:last-child th:last-child, table-bordered tbody:last-child tr:last-child td:last-child { border-radius: 0 0 0.470588235em 0; }

/*
---------------------------- @GUTENBERG  
----------------------------
*/
hr { border-top: 1px dashed; border-bottom: none; border-color: hr branding-color1; margin: 40px 0; }

pre.wp-block-verse { background: none; font: "Roboto-Light", Helvetica, Arial, sans-serif !important; }

div.wp-block-cover { padding: 20px 40px; }

div.wp-block-cover p, div.wp-block-cover p strong { font-size: 1rem; }

div.wp-block-cover p, div.wp-block-cover p strong { margin: 0 !important; }

div.wp-block-cover p strong { font: 1.2rem "Roboto-Black", Helvetica, Arial, sans-serif; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; color: #fff; font-size: 1.8rem; line-height: 2.2rem; z-index: 9; }
div.wp-block-cover p strong a { color: #d8ae90; }

div.wp-block-column div.wp-block-image figcaption { font-weight: 800; }

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { height: auto !important; }

.blocks-gallery-item figcaption.blocks-gallery-item__caption { background: none !important; text-align: left; }

.wp-block-latest-posts, .wp-block-archives { margin: 0px; padding: 0px; }

ul.wp-block-latest-posts li { background: #efefef; padding: 8px 15px; margin-bottom: 10px; }
ul.wp-block-latest-posts li a { text-decoration: none; color: #d8ae90; }

ul.wp-block-latest-posts li::before, ul.wp-block-archives li::before { content: none; }

/*
---------------------------- @WORDPRESS MEDIA  
----------------------------
*/
.alignnone { margin: 5px 20px 20px 0; }

.aligncenter, div.aligncenter { display: inline-block; margin: 1em auto 1em auto; /*border-radius: 8px;*/ }

.alignright { float: right; margin: 5px 0 20px 20px; }

.alignleft { margin: 15px 20px 0px 0px; }

.aligncenter { display: block; margin: 5px auto 10px auto; /*border-radius: 8px;*/ }

a img.alignright { float: right; margin: 5px 0 20px 20px; }

a img.alignnone { margin: 5px 20px 20px 0; }

a img.alignleft { float: left; margin: 15px 20px -20px 0px; }

a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.gallery-item img { border: none !important; /*border-radius: 8px;*/ }

/*
---------------------------- @SERCH FORM  
----------------------------
*/
#searchform { position: absolute; top: 45px; right: 30px; z-index: 9999; }

#searchform input[type="text"] { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; height: 30px; width: 0px; display: inline-block; border: none; outline: none; position: absolute; top: 0; right: 0; background: none; z-index: 3; transition: width 0.4s cubic-bezier(0, 0.795, 0, 1); cursor: pointer; box-shadow: none !important; }

#searchform input[type="text"]:focus { background: #fff; border: 1px solid #999; width: 300px; z-index: 1; cursor: text; padding: 22px 4px 22px 20px; }

#searchform input[type="submit"] { height: 30px; width: 30px; display: inline-block; float: right; background: url(images/lupe.png) no-repeat center center; padding: 0px; text-indent: -10000px; border: none; position: relative; z-index: 2; cursor: pointer; transition: opacity .4s ease; margin: 6px 5px 0px 0px; }

/*
---------------------------- @SEARCH PAGE  
----------------------------
*/
.search-terms { font-weight: 800; }

.search-box { margin-bottom: 2em; }

.search-box p, search-box a { margin: 0px; }

.search-box .search-link a { text-decoration: none; color: blue; font-size: 1.5rem; font-weight: 800; }

.search-box .search-date, .search-box .search-url { font-size: 0.9rem; }

.search-box .search-excerpt { font-size: 1.07rem; }

/*
---------------------------- @LOGIN PAGE  
----------------------------
*/
.page-template-login #header, .page-template-login #footer { display: none; }

.page-template-login main { display: flex; flex-direction: column; align-items: center; }
.page-template-login main #loginform { width: 65%; }

.login-remember, .login-submit, .page-template-login #MainContainer, .page-template-login article { display: flex; justify-content: center; }

.login-username > label, .login-password > label { display: block; }

.logged-in main p a { margin: 20px auto; width: 250px; }

/*
---------------------------- @HEADER  
----------------------------
*/
#home-full-col header { background: none; }

header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: none; z-index: 9999; }

.home #logo-container { margin: 40px auto 0 auto; width: 175px; }

#logo-container { margin: 0 auto; width: 175px; }

#logo-container img { shape-rendering: geometricPrecision; width: 100%; height: auto; }

#logo-container a:link, #logo-container a:visited { border: 0px; background: none; cursor: pointer; display: block; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -o-transition: 0.4s ease; transition: 0.4s ease; }

#logo-container a:hover { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); }

.top-header { display: flex; flex-direction: row; align-items: center; width: 100vw; background: #E0DFC7; height: 4em; padding: 1em; }
.top-header p { font-size: 0.8rem; }

/*
---------------------------- @SIDEBAR 
----------------------------
*/
aside { background: none; padding: 20px; background: #FFFCF7; margin-bottom: 20px; border-left: 1px dotted #d9e0c0; }

aside.sidebar { border-left: none; padding: 0; }

.sidebar ul { padding: 0px; margin: 0px 0px 20px 0px; }

.sidebar ul a { color: #000; padding: 8px 15px; margin: 0px 0px 5px 0px; background: white; border: 1px solid #e3e3e3; }
.sidebar ul a:hover { background: #E0DFC7; }

.sidebar ul, .sidebar li { list-style: none; /* a:before { content: '\f1ae'; font-family: 'LineAwesome'; font-size: $text-size; color: $branding-color1; margin: 0px 5px 0px 0px; }*/ }

.sidebar h3 { font-size: calc(1rem + 1vmin); line-height: 1.9rem; }

/*
----------------------------
@FOOTER 
----------------------------
*/
footer { display: flex; text-align: center; align-items: center; background: #E0DFC7; margin-bottom: 20px; padding: 40px; }

.footer-content { margin: 0px auto; padding: 0; }
.footer-content p { font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0px 0px 1.8em 0px; font-size: 0.7272727273rem; line-height: 1.027027027rem; max-width: 750px; text-align: center; }
.footer-content p p b { color: #000; }

.footerbox-container { display: flex; justify-content: center; flex-direction: row; flex-flow: wrap; text-align: center; margin: 0px auto 30px auto; }

.footerbox { margin: 0 40px; }

.footerbox h3 { font-size: 1.45em; margin: 40px 0 0 0; }

.footerbox ul { font-family: "Roboto-Light", Helvetica, Arial, sans-serif; font-size: 0.7rem; color: #000; list-style-type: none; text-align: left; padding: 0px; }
.footerbox ul li { max-width: 800px; line-height: 1.9rem; }
.footerbox ul li:before { content: '\f111'; font-family: 'Fontawesome'; font-size: 0.7em; color: #fff; padding: 0 10px 0 0; }

.footerbox ul li a { text-decoration: none; color: black; }
.footerbox ul li a:hover { color: #fff; }

.copyright small { text-align: center; margin: 10px 20px; }

.logo-footer { display: flex; justify-content: center; }
.logo-footer img { max-width: 130px; }

.ssba-share-text { display: none !important; }

p#breadcrumbs { font-size: 0.9333333333rem !important; font: 1.2rem "Roboto-Light", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.9rem; letter-spacing: .01em; color: #000; margin: 0; margin-bottom: 30px; }

.wpmtst-testimonial { border: none !important; }

.wpmtst-testimonial .testimonial-name { display: none !important; }

.wpcf7-form-control-wrap input p { font: "Roboto-Black", Helvetica, Arial, sans-serif; }

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { font-family: "Roboto-Black", Helvetica, Arial, sans-serif; font-size: 1.2em; text-align: center; background: #cbcb18 !important; border: 0 !important; border-radius: border-m !important; color: #000; padding: 40px; }

form.wpcf7-form p { line-height: 0rem; }

.wpcf7-form-control-wrap { font-family: "Roboto-Black", Helvetica, Arial, sans-serif; color: #000; }

span.wpcf7-not-valid-tip { position: absolute; top: -6px; right: 5px; color: #000; background: #cbcb18; height: auto; line-height: 25px; padding: 8px; border-radius: border-m !important; }

li.blocks-gallery-item:before { content: 'none'; display: none; }

ul.wp-block-gallery { margin: 0px; }

.wp-block-media-text { margin-bottom: 30px; }

.wp-block-media-text .wp-block-media-text__media { overflow: hidden; }

@media screen and (min-width: 800px) { .col-1 { width: 8.33333333%; }
  .col-2 { width: 16.66666667%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.33333333%; }
  .col-5 { width: 41.66666667%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.33333333%; }
  .col-8 { width: 66.66666667%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.33333333%; }
  .col-11 { width: 91.66666667%; }
  .col-12 { width: 100%; } }
@media screen and (max-width: 768px) { #mailpoet_form_1 form.mailpoet_form { padding: 0; }
  .main-nav { display: none; }
  .burguer-icon { display: inline-block; cursor: pointer; }
  footer nav { display: none; }
  article ul { margin-left: 0px; padding-left: 10px; }
  #open-menu, #close-menu { left: 25px; top: 60px; }
  header .social { display: none !important; }
  header { justify-content: flex-end; }
  header #logo-container, .home header #logo-container { margin: 0; }
  header #logo-container img { width: 135px; }
  #grid-one-col { grid-template-rows: 150px 0 1fr auto; }
  main#main-container { padding: 20px; margin-bottom: 20px; }
  footer { padding: 0; } }
@media screen and (max-width: 576px) { p, article ul { font-size: 1.1111111111rem; line-height: 1.6101694915rem; }
  h1 { line-height: 1.1em; }
  .wp-block-image img, .wp-block-image .alignleft, figure.alignleft, img.alignleft, figure.alignright, img.alignright { float: none !important; display: block; } }
/*=== Trigger  ===*/
.animate { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

/*=== Optional Delays, change values here  ===*/
.one { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; }

.two { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }

.three { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; animation-delay: 2.5s; }

.four { -webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; animation-delay: 3.5s; }

.five { -webkit-animation-delay: 4.5s; -moz-animation-delay: 4.5s; animation-delay: 4.5s; }

.six { -webkit-animation-delay: 5.5s; -moz-animation-delay: 5.5s; animation-delay: 5.5s; }

.seven { -webkit-animation-delay: 6.5s; -moz-animation-delay: 6.5s; animation-delay: 6.5s; }

.eight { -webkit-animation-delay: 7.5s; -moz-animation-delay: 7.5s; animation-delay: 7.5s; }

/*=== Animations start here  ===*/
/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

/*=== FADE IN DOWN ===*/
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

/*=== FADE IN UP Big ===*/
.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; }

@-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
/*=== FADE IN DOWN Big ===*/
.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
/*=== FADE IN LEFT Big ===*/
.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
/*=== FADE IN RIGHT Big ===*/
.fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); }
  100% { opacity: 1; -webkit-transform: none; transform: none; } }