/*
Theme Name: JN Historia
Author: Global Media Group
Author URI: http://www.globalmediagroup.pt/
Description: Theme for JN História
Version: 2019.1
*/


/*****************************************************/
/*____________________ NORMALIZE ____________________*/
/*****************************************************/


* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none!important;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline;}
html {line-height:1;}
ol, ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal; vertical-align:middle;}
q, blockquote {quotes:none;}
q:before, q:after, blockquote:before, blockquote:after {content:""; content:none;}
a img {border:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
a {text-decoration:none;}
audio, canvas, video {display:inline-block; *display:inline; *zoom:1;}
audio:not([controls]) {display:none; height:0;}
[hidden] {display:none;}
html {font-size:100%;  -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
html, button, input, select, textarea {font-family:sans-serif;}
body {margin:0;}
a, a:focus, a:active, a:hover {outline:0;}
abbr[title] {border-bottom:1px dotted;}
b, strong {font-weight:bold;}
blockquote {margin:1em 40px;}
dfn {font-style:italic;}
mark {background:#ff0; color:#000;}
pre {margin:1em 0;}
code, kbd, pre, samp {font-family:monospace, serif; _font-family:'courier new', monospace; font-size:1em;}
pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word;}
q {quotes:none;}
q:before, q:after {content:''; content:none;}
small {font-size:75%;}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
dl, menu, ol, ul {margin:0;}
dd {margin:0 0 0 40px;}
menu, ol, ul {padding:0;}
nav ul, nav ol {list-style:none; list-style-image:none;}
img {border:0; -ms-interpolation-mode:bicubic;}
svg:not(:root) {overflow:hidden;}
figure {margin:0;}
form {margin:0;}
legend {border:0; padding:0; white-space:normal; *margin-left:-7px;}
button, input, select, textarea {font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle;}
button, input {line-height:normal;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance:button; cursor:pointer; *overflow:visible;}
button[disabled], input[disabled] {cursor:default;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0; *height:13px; *width:13px;}
input[type="search"] {-webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
textarea {overflow:auto; vertical-align:top; resize:vertical;}


/*****************************************************/
/*_______________________ VAR _______________________*/
/*****************************************************/


:root {
  --primary:rgba(255,242,0,1);
  --secondary:rgba(103,143,225,1);
  --black:rgba(0,0,0,1);
  --dark:rgba(20,20,20,1);
  --gray:rgba(65,65,65,1);
  --white:rgba(255,255,255,1);
  --beige:rgba(250,250,250,1);

  --primary-10:rgba(255,242,0,.1);
  --secondary-10:rgba(103,143,225,.1);
  --black-10:rgba(0,0,0,.1);
  --dark-10:rgba(20,20,20,.1);
  --gray-10:rgba(65,65,65,.1);
  --white-10:rgba(255,255,255,.1);
  --beige-10:rgba(250,250,250,.1);

  --messenger:rgba(0,132,255,1);
  --whatsapp:rgba(7,188,76,1);
  --pinterest:rgba(230,0,35,1);
  --twitter:rgba(29,161,242,1);
  --facebook:rgba(66,103,178,1);
  --linkedin:rgba(0,115,177,1);
  --youtube:rgba(204,0,0,1);
  --instagram:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --pocket:rgba(211,80,90,1);
  --reddit:rgba(255,69,0,1);

  --Ldesktop:1380px;
  --desktop:1200px;
  --tablet:1024px;
  --smartphone:767px;
}

@-webkit-viewport {width:device-width;}
@-moz-viewport {width:device-width;}
@-ms-viewport {width:device-width;}
@-o-viewport {width:device-width;}
@viewport {width:device-width;}

@font-face {
  font-family:'Social Icons';
  src:url('fonts/social-icon.eot');
  src:url('fonts/social-icon.eot#iefix') format('embedded-opentype'),
  url('fonts/social-icon.woff') format('woff'),
  url('fonts/social-icon.ttf') format('truetype'),
  url('fonts/social-icon.svg#socialicons') format('svg');
  font-weight:normal;
  font-style:normal;
}

[class^="icon--social_"],
[class*=" icon--social_"] {
  font-family:'Social Icons' !important;
  font-size:20px;
  speak:none;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.icon--social_email:before {content:"\e900";}
.icon--social_facebook:before {content:"\e901";}
.icon--social_instagram:before {content:"\e902";}
.icon--social_linkedin:before {content:"\e903";}
.icon--social_messenger:before {content:"\e904";}
.icon--social_pinterest:before {content:"\e905";}
.icon--social_pocket:before {content:"\e906";}
.icon--social_reddit:before {content:"\e907";}
.icon--social_twitter:before {content:"\e908";}
.icon--social_whatsapp:before {content:"\e909";}
.icon--social_youtube:before {content:"\e90a";}

/*****************************************************/
/*_____________________ STYLES ______________________*/
/*****************************************************/

html {width:100%; height:100vh;}
body {position:relative; width:100%; height:100%; overflow:hidden; font-family:'Red Hat Display',sans-serif; font-size:100%; color:var(--dark); background:var(--white); -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%; -webkit-font-smoothing:antialiased;}

.nicescroll-rails {z-index:9999!important;}

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

.toggle--menu {position:fixed; top:40px; right:40px; width:50px; height:50px; background:var(--dark); border-radius:50%; cursor:pointer; z-index:9999; transition:all .5s;}
.toggle--menu:before,
.toggle--menu:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--primary);}
.toggle--menu:before {top:-3px; left:-3px; width:54px; height:54px;}
.toggle--menu:after {top:-5px; left:-5px; width:58px; height:58px;}
.toggle--menu .toggle--menu_button {position:relative; width:100%; height:100%;}
.toggle--menu .toggle--menu_button:before,
.toggle--menu .toggle--menu_button:after {content:''; display:block; position:absolute; left:10px; width:30px; height:7px; border-radius:2px; background:var(--primary); transition:all .5s;}
.toggle--menu .toggle--menu_button:before {top:calc(50% - 9px);}
.toggle--menu .toggle--menu_button:after {top:calc(50% + 2px);}
body.menu-is-open .toggle--menu .toggle--menu_button:before,
body.menu-is-open .toggle--menu .toggle--menu_button:after {top:calc(50% - 3px)}
body.menu-is-open .toggle--menu .toggle--menu_button:before {-webkit-transform:rotate(45deg); transform:rotate(45deg);}
body.menu-is-open .toggle--menu .toggle--menu_button:after {-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}

.toggle--menu:hover {background:var(--primary);}
.toggle--menu:hover .toggle--menu_button:before,
.toggle--menu:hover .toggle--menu_button:after {background:var(--dark);}

.scroll--top {position:fixed; bottom:-40px; right:40px; width:50px; height:50px; background:var(--dark); border-radius:50%; cursor:pointer; opacity:0; z-index:9998; transition:all .5s;}
body.is-scroll .scroll--top {bottom:40px; opacity:1;}

.scroll--top:before,
.scroll--top:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--primary);}
.scroll--top:before {top:-3px; left:-3px; width:54px; height:54px;}
.scroll--top:after {top:-5px; left:-5px; width:58px; height:58px;}
.scroll--top .scroll--top_button {font-size:24px; color:var(--primary); line-height:20px; -webkit-transform:rotate(-90deg); transform:rotate(-90deg);}
.scroll--top:hover {background:var(--primary);}
.scroll--top:hover .scroll--top_button {color:var(--dark);}

header {position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--primary); z-index:9998; -webkit-transform:translate(100%,0) scale(.95,.91); transform:translate(100%,0) scale(.95,.91);}
body.menu-is-close header {-webkit-transform:translate(0,0) scale(1,1); transform:translate(0,0) scale(1,1); -webkit-animation:headerIsComing 1s; animation:headerIsComing 1s; animation-fill-mode:forwards;}
body.menu-is-open header {-webkit-transform:translate(-100%,0) scale(.95,.91); transform:translate(-100%,0) scale(.95,.91); -webkit-animation:headerIsAway 1s; animation:headerIsAway 1s; animation-fill-mode:forwards; animation-delay:.75s;}

@-webkit-keyframes headerIsAway {
 0% {-webkit-transform:translate(100%,0) scale(.95,.91);}
 66% {-webkit-transform:translate(0,0) scale(.95,.91);}
 100% {-webkit-transform:translate(0,0) scale(1,1);}
}
@-webkit-keyframes headerIsComing {
 0% {-webkit-transform:translate(0,0) scale(1,1);}
 66% {-webkit-transform:translate(0,0) scale(.95,.91);}
 100% {-webkit-transform:translate(-100%,0) scale(.95,.91);}
}
@keyframes headerIsAway {
 0% {transform:translate(100%,0) scale(.95,.91);}
 66% {transform:translate(0,0) scale(.95,.91);}
 100% {transform:translate(0,0) scale(1,1);}
}
@keyframes headerIsComing {
 0% {transform:translate(0,0) scale(1,1);}
 66% {transform:translate(0,0) scale(.95,.91);}
 100% {transform:translate(-100%,0) scale(.95,.91);}
}

header .menu--wrapper {position:relative; width:100%; height:100vh; background:var(--dark);}
header .menu {position:relative; width:100%; height:100%;}
header .menu--logo {position:relative; width:293px; text-align:center; margin:0 auto; padding:75px 0 50px; z-index:99; transition:all .5s;}
header .menu .menu--item {position:relative; padding:40px 0; text-align:center;}
header .menu .menu--item a {position:relative; font-size:72px; color:var(--beige); font-weight:800; line-height:80px; z-index:2; transition:all .5s;}
header .menu .menu--item.active a {font-size:96px; color:var(--primary);}

@supports((text-stroke:2px var(--beige)) or (-webkit-text-stroke:2px var(--beige))) {
 header .menu .menu--item a {color:transparent; -webkit-text-stroke:2px var(--beige); text-stroke:2px var(--beige);}
 header .menu .menu--item.active a {color:var(--primary); -webkit-text-stroke:initial; text-stroke:initial;}
}

header .menu .menu--item .menu--background {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; overflow:hidden; z-index:-1; transition:all .5s;}
header .menu .menu--item .menu--background:before,
header .menu .menu--item .menu--background:after {content:''; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;}
header .menu .menu--item .menu--background:before {background:var(--secondary); opacity:.66; mix-blend-mode:darken;}
header .menu .menu--item .menu--background:after {background:var(--dark); opacity:.1;}
header .menu .menu--item.active .menu--background {display:block; z-index:1;}
header .menu .menu--item .menu--background span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; will-change:transform; -webkit-filter:grayscale(100%); filter:grayscale(1); -webkit-animation:backgroundIsActive 1s; animation:backgroundIsActive 1s; animation-fill-mode:forwards;}

@-webkit-keyframes backgroundIsActive {
 0% {opacity:.5; -webkit-transform:scale(1);}
 100% {opacity:1; -webkit-transform:scale(1.05);}
}

@keyframes backgroundIsActive {
 0% {opacity:.5; transform:scale(1);}
 100% {opacity:1; transform:scale(1.05);}
}

.main {position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--beige); -webkit-transform:translate(0,0) scale(1,1); transform:translate(0,0) scale(1,1);}
body.menu-is-close .main {-webkit-transform:translate(100%,0) scale(.95,.91); transform:translate(100%,0) scale(.95,.91); -webkit-animation:mainIsAway 1s; animation:mainIsAway 1s; animation-fill-mode:forwards; animation-delay:.75s;}
body.menu-is-open .main {-webkit-transform:translate(0,0) scale(1,1); transform:translate(0,0) scale(1,1); -webkit-animation:mainIsComing 1s; animation:mainIsComing 1s; animation-fill-mode:forwards;}

@-webkit-keyframes mainIsAway {
 0% {-webkit-transform:translate(100%,0) scale(.95,.91);}
 66% {-webkit-transform:translate(0,0) scale(.95,.91);}
 100% {-webkit-transform:translate(0,0) scale(1,1);}
}
@-webkit-keyframes mainIsComing {
 0% {-webkit-transform:translate(0,0) scale(1,1);}
 66% {-webkit-transform:translate(0,0) scale(.95,.91);}
 100% {-webkit-transform:translate(-100%,0) scale(.95,.91);}
}

@keyframes mainIsAway {
 0% {transform:translate(100%,0) scale(.95,.91);}
 66% {transform:translate(0,0) scale(.95,.91);}
 100% {transform:translate(0,0) scale(1,1);}
}
@keyframes mainIsComing {
 0% {transform:translate(0,0) scale(1,1);}
 66% {transform:translate(0,0) scale(.95,.91);}
 100% {transform:translate(-100%,0) scale(.95,.91);}
}

.main .wrapper {position:relative; width:100%; height:100vh;}
.main .inner {position:relative; width:100%; height:100%; text-align:center;}
.main .section--wrapper,
.main .section {position:relative; width:100%;}
.main h2,
.main h3 {font-family:'Alfa Slab One',cursive;}

.main .section--content {position:relative; display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; height:100%;}

.main .section--flex {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; flex-wrap:wrap; min-height:50vh;}
.main .section--flex .half {width:50%; padding:40px;}
.main .section--flex .half {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; align-items:center; justify-content:center;}
.main .section--flex .half--inner {width:100%;}

.main .half {position:relative;}
.main .half--background {background:var(--secondary-10);}
.main .half--content_inner {width:100%; max-width:500px; margin:0 auto;}

.main--owner {position:absolute; top:35px; left:28px; width:72px; line-height:0; opacity:1; z-index:99; transition:all .5s;}
.main--owner:hover {opacity:.8;}

.main .main--logo {position:absolute; top:25px; left:calc(50% - (293px / 2)); width:293px; text-align:center; line-height:0; z-index:99; transition:all .5s;}
.main .main--title {width:100%;}
.main .main--title h1 {font-size:64px; color:var(--primary); font-weight:900; line-height:94px; transition:all .5s;}
.main .main--title h1 span {background:var(--dark); box-shadow:18px 0 var(--dark),-18px 0 0 var(--dark); transition:all .5s;}

.main .social {position:relative; width:100%; margin-top:60px; z-index:9;}
.main .social--share {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; justify-content:center;}
.main .social--share_button {position:relative; background:var(--dark); width:50px; height:50px; border-radius:50%; margin:0 12px; transition:all .5s;}
.main .social--share_button:before,
.main .social--share_button:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--primary); z-index:-1; transition:all .5s;}
.main .social--share_button:before {top:-3px; left:-3px; width:54px; height:54px;}
.main .social--share_button:after {top:-5px; left:-5px; width:58px; height:58px;}
.main .social--share_button a {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; width:100%; height:100%; color:var(--primary); justify-content:center; align-items:center; transition:all .5s;}

.main .social--share_button:hover {background:var(--primary);}
.main .social--share_button:hover a {color:var(--dark);}
.main .social--share_button.social--share_facebook:hover {background:var(--facebook);}
.main .social--share_button.social--share_facebook:hover:before,
.main .social--share_button.social--share_facebook:hover:after {border-color:var(--facebook);}
.main .social--share_button.social--share_facebook:hover a {color:var(--beige);}
.main .social--share_button.social--share_messenger:hover {background:var(--messenger);}
.main .social--share_button.social--share_messenger:hover:before,
.main .social--share_button.social--share_messenger:hover:after {border-color:var(--messenger);}
.main .social--share_button.social--share_messenger:hover a {color:var(--beige);}
.main .social--share_button.social--share_twitter:hover {background:var(--twitter);}
.main .social--share_button.social--share_twitter:hover:before,
.main .social--share_button.social--share_twitter:hover:after {border-color:var(--twitter);}
.main .social--share_button.social--share_twitter:hover a {color:var(--beige);}
.main .social--share_button.social--share_whatsapp:hover {background:var(--whatsapp);}
.main .social--share_button.social--share_whatsapp:hover:before,
.main .social--share_button.social--share_whatsapp:hover:after {border-color:var(--whatsapp);}
.main .social--share_button.social--share_whatsapp:hover a {color:var(--beige);}
.main .social--share_button.social--share_linkedin:hover {background:var(--linkedin);}
.main .social--share_button.social--share_linkedin:hover:before,
.main .social--share_button.social--share_linkedin:hover:after {border-color:var(--linkedin);}
.main .social--share_button.social--share_linkedin:hover a {color:var(--beige);}
.main .social--share_button.social--share_pinterest:hover {background:var(--pinterest);}
.main .social--share_button.social--share_pinterest:hover:before,
.main .social--share_button.social--share_pinterest:hover:after {border-color:var(--pinterest);}
.main .social--share_button.social--share_pinterest:hover a {color:var(--beige);}
.main .social--share_button.social--share_reddit:hover {background:var(--reddit);}
.main .social--share_button.social--share_reddit:hover:before,
.main .social--share_button.social--share_reddit:hover:after {border-color:var(--reddit);}
.main .social--share_button.social--share_reddit:hover a {color:var(--beige);}
.main .social--share_button.social--share_pocket:hover {background:var(--pocket);}
.main .social--share_button.social--share_pocket:hover:before,
.main .social--share_button.social--share_pocket:hover:after {border-color:var(--pocket);}
.main .social--share_button.social--share_pocket:hover a {color:var(--beige);}
.main .social--share_button.social--share_email:hover {background:var(--gray);}
.main .social--share_button.social--share_email:hover:before,
.main .social--share_button.social--share_email:hover:after {border-color:var(--gray);}
.main .social--share_button.social--share_email:hover a {color:var(--beige);}

.main .button.button--scroll {position:absolute; bottom:50px; left:calc(50% - 25px); width:50px; height:50px; background:var(--primary); border-radius:50%; z-index:9; transition:all .5s;}
.main .button.button--scroll:before,
.main .button.button--scroll:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--dark);}
.main .button.button--scroll:before {top:-3px; left:-3px; width:54px; height:54px;}
.main .button.button--scroll:after {top:-5px; left:-5px; width:58px; height:58px;}
.main .button.button--scroll a {position:relative; display:block; width:100%; height:100%; z-index:2; transition:all .5s;}
.main .button.button--scroll a:before,
.main .button.button--scroll a:after {content:''; display:block; position:absolute; top:calc(50% - 2px); width:20px; height:7px; border-radius:2px; background:var(--dark); transition:all .5s;}
.main .button.button--scroll a:before {left:calc(50% - 15px); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.main .button.button--scroll a:after {left:calc(50% - 6px); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.main .button.button--scroll:hover {background:var(--dark);}
.main .button.button--scroll:hover a:before,
.main .button.button--scroll:hover a:after {background:var(--primary);}

.main .section.section--hero {height:100vh; background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed;}
.main .section.section--hero:before,
.main .section.section--hero:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%;}
.main .section.section--hero:before {background:var(--dark); opacity:.2;}
.main .section.section--hero:after {background:linear-gradient(transparent 0,transparent 75%,var(--secondary) 100%); opacity:.5;}
.main .section.section--hero .section--content {align-items:center; padding:0 20px;}

.main .stamp {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; flex-wrap:wrap; position:absolute; top:20%; left:60%; width:175px; height:175px; background:var(--primary); border-radius:50%;}
.main .stamp p {font-family:'Oswald',sans-serif; font-size:32px; font-weight:900; text-transform:uppercase; margin:auto;}
.main .stamp p span {display:block; font-size:52px;}
.main .stamp p span.tiny {font-size:14px;}
.main .stamp:before,
.main .stamp:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--secondary);}
.main .stamp:before {top:-4px; left:-4px; width:181px; height:181px;}
.main .stamp:after {top:-7px; left:-7px; width:187px; height:187px;}

.main .half--summary {text-align:left;}
.main .half--summary h2 {font-size:42px; margin-bottom:32px; padding-bottom:12px; border-bottom:10px solid var(--primary);}
.main .summary--item {position:relative; padding-right:60px;}
.main .summary--theme {display:inline-block; background:var(--primary); font-size:13px; text-transform:uppercase; line-height:15px; padding:6px 8px; margin-bottom:12px;}
.main .summary--subtitle {font-size:20px; line-height:26px; margin-bottom:24px;}
.main div.summary--item:last-of-type .summary--subtitle {margin-bottom:0;}

.main .summary--item .button.button--scroll {bottom:initial; left:initial; right:5px; top:calc(50% - 20px); width:40px; height:40px; background:var(--dark); text-align:center; line-height:40px;}
.main .summary--item .button.button--scroll:before {top:-3px; left:-3px; width:44px; height:44px;}
.main .summary--item .button.button--scroll:after {top:-5px; left:-5px; width:48px; height:48px;}
.main .summary--item .button.button--scroll a {font-size:24px; color:var(--primary);}
.main .summary--item .button.button--scroll a:before,
.main .summary--item .button.button--scroll a:after {display:none;}
.main .summary--item .button.button--scroll:hover {background:var(--primary);}
.main .summary--item .button.button--scroll:hover a {color:var(--dark);}

.main .section--background {position:relative; width:100%; height:50vh; min-height:400px;background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed; opacity:1; transition:opacity .5s; transition-delay:2s;}
body.menu-is-open .main .section--background {opacity:0;transition-delay:2s;}
body.menu-is-close .main .section--background {opacity:1; transition-delay:2s;}

.section--background:before,
.section--background:after {content:''; position:absolute; left:0; width:100%; background:var(--secondary);}
.section--background:before {top:0; height:8px;}
.section--background:after {top:11px; height:1px; box-shadow:0 3px var(--secondary);}

.main .theme--wrapper {counter-reset:section;}
.main .theme--wrapper article:nth-child(odd) .half.half--pages {order:1;}
.main .theme--wrapper article:nth-child(even) .half.half--pages {order:-1;}

.main .content--theme {display:inline-block; position:relative; background:var(--primary); font-size:13px; text-transform:uppercase; line-height:15px; padding:6px 8px; margin:75px 0 24px;}
.main .content--theme:before {counter-increment:section; content:counter(section); display:block; position:absolute; top:-75px; left:calc(50% - 25px); width:50px; height:50px; background:var(--black); font-family:'Alfa Slab One',cursive; font-size:24px; color:var(--primary); line-height:50px; border-radius:50%; box-shadow:0 0 0 2px var(--beige),0 0 0 3px var(--dark),0 0 0 5px var(--beige),0 0 0 6px var(--dark);}
.main .content--title {font-size:30px; line-height:36px; margin-bottom:24px;}
.main .content--lead {position:relative; padding-bottom:60px;}
.main .content--lead:after {content:''; position:absolute; bottom:26px; left:calc(50% - 40px); width:80px; height:8px; background:var(--dark);}
.main .content--lead p {font-size:16px; font-weight:500; line-height:20px;}
.main .content--sale p {font-size:17px; font-weight:800; text-transform:uppercase; line-height:24px;}
.main .content--sale .content--buttons {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; justify-content:center; margin-top:6px;}
.main .content--sale .button--label {margin:20px 12px 6px;}

.main .pages--list {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; margin:0 25%; transition:all .5s;}
.main .pages--item {width:calc(50% - 10.01px); margin:3px 5px; opacity:1; transition:all .5s;}
.main .pages--item:hover {opacity:.7;}

.main .button--label {margin:20px 0;}
.main .button--label a {display:inline-block; position:relative; background:var(--dark); font-size:14px; color:var(--primary); font-weight:900; text-transform:uppercase; letter-spacing:1px; padding:12px 20px; transition:all .5s;}
.main .button--label a:hover {background:var(--primary); color:var(--dark);}
.main .button--label a:before,
.main .button--label a:after {content:''; display:block; position:absolute; background:transparent; border:1px solid var(--dark);}
.main .button--label a:before {top:-3px; left:-3px; width:calc(100% + 4px); height:calc(100% + 4px);}
.main .button--label a:after {top:-6px; left:-6px; width:calc(100% + 10px); height:calc(100% + 10px);}
.main .button--label:hover a:before {top:-4px; left:-4px; width:calc(100% + 10px); height:calc(100% + 10px);}
.main .button--label:hover a:after {top:-8px; left:-8px; width:calc(100% + 10px); height:calc(100% + 10px);}
.main .button--label.button--highlight a {background:var(--primary); color:var(--secondary);}
.main .button--label.button--primary a {background:var(--primary); color:var(--dark);}
.main .button--label.button--secondary a {background:var(--secondary); color:var(--beige);}
.main .button--label.button--highlight a:before,
.main .button--label.button--highlight a:after {border-color:var(--secondary);}
.main .button--label.button--primary a:before,
.main .button--label.button--primary a:after {border-color:var(--dark);}
.main .button--label.button--secondary a:before,
.main .button--label.button--secondary a:after {border-color:var(--secondary);}
.main .button--label.button--highlight a:hover {background:var(--secondary); color:var(--primary);}
.main .button--label.button--primary a:hover {background:var(--dark); color:var(--primary);}
.main .button--label.button--secondary a:hover {background:var(--beige); color:var(--secondary);}

.fancybox-infobar {background:var(--primary); top:40px!important; left:40px!important; min-width:80px!important; font-family:'Alfa Slab One',cursive; font-size:18px!important; color:var(--dark)!important; text-align:center; line-height:45px!important; border-radius:5px; mix-blend-mode:normal;}
.fancybox-toolbar {right:40px!important; top:40px!important; width:50px; height:50px;}
.fancybox--close {position:relative; width:50px; height:50px; background:var(--dark); border-radius:50%; cursor:pointer; transition:all .5s;}
.fancybox--close:before,
.fancybox--close:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--primary); z-index:99999; mix-blend-mode:normal;}
.fancybox--close:before {top:-3px; left:-3px; width:54px; height:54px;}
.fancybox--close:after {top:-5px; left:-5px; width:58px; height:58px;}
.fancybox--close .fancybox--close_button {position:relative; width:100%; height:100%;}
.fancybox--close .fancybox--close_button:before,
.fancybox--close .fancybox--close_button:after {content:''; display:block; position:absolute; top:calc(50% - 3px); left:10px; width:30px; height:7px; border-radius:2px; background:var(--primary); transition:all .5s;}
.fancybox--close .fancybox--close_button:before {-webkit-transform:rotate(45deg); transform:rotate(45deg);}
.fancybox--close .fancybox--close_button:after {-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.fancybox--close:hover {background:var(--primary);}
.fancybox--close:hover .fancybox--close_button:before,
.fancybox--close:hover .fancybox--close_button:after {background:var(--dark);}

.fancybox-navigation {position:relative; left:0; top:calc(50% - 25px); opacity:0; visibility:hidden; z-index:99997; transition:opacity .25s ease,visibility 0s ease .25s;}
.fancybox-show-nav .fancybox-navigation {opacity:1; visibility:visible;}
.fancybox--nav {position:absolute; top:0; width:50px; height:50px; background:var(--dark); border-radius:50%; cursor:pointer; transition:background .5s;}
.fancybox--prev {left:40px;}
.fancybox--next {right:40px;}
.fancybox--nav:before,
.fancybox--nav:after {content:''; display:block; position:absolute; background:transparent; border-radius:50%; border:1px solid var(--primary);}
.fancybox--nav:before {top:-3px; left:-3px; width:54px; height:54px;}
.fancybox--nav:after {top:-5px; left:-5px; width:58px; height:58px;}
.fancybox--nav .fancybox--nav_button {position:relative; width:100%; height:100%;}
.fancybox--nav .fancybox--nav_button:before,
.fancybox--nav .fancybox--nav_button:after {content:''; display:block; position:absolute; width:20px; height:7px; border-radius:2px; background:var(--primary); transition:background .5s;}
.fancybox--nav .fancybox--nav_button:before {-webkit-transform:rotate(45deg); transform:rotate(45deg);}
.fancybox--nav .fancybox--nav_button:after {-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.fancybox--nav .fancybox--prev_button:before,
.fancybox--nav .fancybox--prev_button:after {left:12px;}
.fancybox--nav .fancybox--prev_button:before {top:calc(50% + 1px);}
.fancybox--nav .fancybox--prev_button:after {top:calc(50% - 8px);}
.fancybox--nav .fancybox--next_button:before,
.fancybox--nav .fancybox--next_button:after {left:16px;}
.fancybox--nav .fancybox--next_button:before {top:calc(50% - 8px);}
.fancybox--nav .fancybox--next_button:after {top:calc(50% + 1px);}
.fancybox--nav:hover {background:var(--primary);}
.fancybox--nav:hover .fancybox--nav_button:before,
.fancybox--nav:hover .fancybox--nav_button:after {background:var(--dark);}

.main .section.section--page {text-align:left;}
.main .section.section--page .section--wrapper {max-width:720px; margin:60px auto; padding:0 20px;}
.main .section.section--page h2 {font-size:24px; font-weight:400; line-height:32px; margin:40px 0 24px;}
.main .section.section--page h3 {font-size:20px; font-weight:400; line-height:28px; margin:24px 0;}
.main .section.section--page h4 {font-size:18px; font-weight:600; line-height:24px; margin:24px 0;}
.main .section.section--page p {font-size:18px; font-weight:400; line-height:24px; margin-bottom:12px;}
.main .section.section--page a {color:var(--secondary); opacity:1; transition:all .5s;}
.main .section.section--page a:hover {opacity:.8;}
.main .section.section--page ol,
.main .section.section--page ul {margin-left:15px;}
.main .section.section--page ol {list-style-type:lower-alpha;}
.main .section.section--page ul {list-style-type:disc;}
.main .section.section--page li {font-size:18px; line-height:24px; margin-bottom:9px; padding-left:3px;}

.main .section.section--404 {height:100vh; background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed; text-align:center;}
.main .section.section--404:before,
.main .section.section--404:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%;}
.main .section.section--404:before {background:var(--dark); opacity:.2;}
.main .section.section--404:after {background:linear-gradient(transparent 0,transparent 75%,var(--secondary) 100%); opacity:.5;}
.main .section.section--404 .section--content {align-items:center; padding:0 20px;}
.main .section.section--404 .button.button--home a {position:relative; display:block; width:200px; height:48px; background:var(--secondary); font-size:15px; color:var(--beige); font-weight:800; letter-spacing:.05em; line-height:48px; margin:40px auto 0; border-radius:3px; z-index:9; transition:all .5s ease-in;}
.main .section.section--404 .button.button--home a:hover {background:var(--primary); color:var(--dark);}

.main .footer {background:var(--dark); padding:40px 40px 20px;}
.main .footer .wrapper {height:auto;}
.main .footer h2,
.main .footer h3,
.main .footer p {font-family:'Red Hat Display',sans-serif;color:var(--beige);}
.main .footer .footer--title {font-size:32px; font-weight:800; text-transform:uppercase; margin-bottom:36px;}
.main .footer .footer--flex {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; flex-wrap:wrap; margin:0 -3px;}
.main .footer .footer--card {width:calc(100% / 3 - 6px); border-top:2px solid var(--secondary); padding-top:40px; margin:0 3px;}
.main .footer .footer--flex section:nth-child(2) {border-top:5px solid var(--secondary);}
.main .footer .footer--card_icon {display:-webkit-box; display:-webkit-flex; display:-ms-flex; display:flex; width:75px; height:75px; background:var(--primary); border-radius:50%; margin:0 auto; box-shadow:0 0 0 2px var(--dark),0 0 0 3px var(--primary),0 0 0 5px var(--dark),0 0 0 6px var(--primary); justify-content:center; align-items:center;}
.main .footer .footer--card_title {font-size:24px; color:var(--primary); font-weight:800; text-transform:uppercase; margin:40px 0 24px;}
.main .footer .footer--card p {font-size:16px; font-weight:500; line-height:24px; padding:0 40px;}
.main .footer .footer--card a {color:var(--primary); transition:all .5s;}
.main .footer .footer--card a:hover {color:var(--secondary);}
.main .footer .footer--banner {padding:0 5px; margin:40px 0;}
.main .footer .footer--banner p {background:var(--primary); font-size:24px; color:var(--dark)!important; font-weight:400; text-transform:uppercase; line-height:28px; padding:12px 12px 9px; box-shadow:0 0 0 3px var(--dark),0 0 0 4px var(--primary),0 0 0 6px var(--dark),0 0 0 7px var(--primary);}
.main .footer .footer--help {text-align:left;}
.main .footer .footer--help p {font-size:14px; line-height:18px; margin-bottom:9px;}
.main .footer .footer--help a {color:var(--primary); transition:all .5s;}
.main .footer .footer--help a:hover {color:var(--secondary);}
.main .footer .copyright {border-top:2px solid var(--primary); margin-top:20px; padding-top:20px;}
.main .footer .copyright p,
.main .footer .footer--menu li {font-size:13px; color:var(--primary)!important;}
.main .footer .footer--menu {margin-bottom:12px;}
.main .footer .footer--menu li {display:inline-block; margin:0 6px;}
.main .footer .copyright a {color:var(--secondary); line-height:28px; transition:all .5s;}
.main .footer .copyright a:hover {color:var(--primary);}


/*****************************************************/
/*___________________ RESPONSIVE ____________________*/
/*****************************************************/


@media screen and (max-width:1366px) {
  .main .main--title h1 {font-size:54px; line-height:82px;}
	.main .pages--list {margin:0 17.5%;}
}

@media screen and (max-width:1024px) {
	header .menu--logo {padding: 30px 0;}
	header .menu .menu--item {padding:30px 0;}
	header .menu .menu--item a,
	header .menu .menu--item.active a {position:absolute; display:block; width:calc(100% - 40px); height:440px; max-height:100vw; font-size:72px; color:var(--primary); margin:0 20px; -webkit-text-stroke:initial; text-stroke:initial;}
	header .menu .menu--item .menu--background,
	header .menu .menu--item.active .menu--background {display:block; position:relative; width:400px; height:400px; max-width:calc(100vw - 40px); max-height:calc(100vw - 40px); margin:40px auto 0; opacity:1; -webkit-transform:scale(1); transform:scale(1); z-index:1;}
	.main .main--title h1 {font-size:54px; line-height:82px;}
	.main .main--title h1 span {box-shadow:15px 0 var(--dark),-15px 0 0 var(--dark);}
	.main .social {margin-top:50px;}
	.main .pages--list {margin:0;} 
	.main .footer .footer--card p {font-size:15px; line-height:22px; padding:0 12px;}
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
	.main .cover {width:80%; margin:0 auto;}
	.main .stamp {top:25%; width:125px; height:125px;} 
	.main .stamp:before {width:131px; height:131px;}
	.main .stamp:after {width:137px; height:137px;}
	.main .stamp p {font-size:25px;}
	.main .stamp p span {font-size:40px;}
	.main .stamp p span.tiny {font-size:11px;}
}

@media screen and (max-width:768px) {
	.scroll--top {display:none;}
	.main .section--flex .half {width:100%;}
	.main .theme--wrapper section:nth-child(even) .half.half--pages {order:1;}
	.main .pages--list {margin:0 12.5%;}
	.main .footer .footer--card {width:calc(100% - 6px); text-align:left; border-top:2px solid var(--beige)!important; padding:40px 0; margin:0 3px;}
	.main .footer .footer--card:after {content:''; display:table; clear:both;}
	.main .footer .footer--card_icon {float:left; width:60px; height:60px; margin:10px 0;}
	.main .footer .footer--card_icon img {width:30px;}
	.main .footer .footer--card_title {margin:0 0 12px; padding-left:100px;}
	.main .footer .footer--card_lead {padding-left:100px;}
	.main .footer .footer--card p {padding: 0;}
	.main .footer .footer--banner {margin:6px 0 20px;}
}

@media screen and (max-width:680px) {
	header .menu--logo {width:221px; padding:35px 0;}
	.main .main--logo {top:35px; left:calc(50% - (221px / 2)); width:221px;}
	.main--owner {top:40px; left:20px; width:60.5px;}
	.main .main--title h1 {font-size:38px; line-height:60px;}
	.main .main--title h1 span {box-shadow:12px 0 var(--dark),-12px 0 0 var(--dark);}
	.main .social {margin-top:40px;}
	.main .cover {width:300px; max-width:calc(100% - 40px); margin:0 auto;}
	.main .stamp {top:50px; width:125px; height:125px;} 
	.main .stamp:before {width:131px; height:131px;}
	.main .stamp:after {width:137px; height:137px;}
	.main .stamp p {font-size:25px;}
	.main .stamp p span {font-size:40px;}
	.main .stamp p span.tiny {font-size:11px;}
}

@media screen and (max-width:480px) {
	header .menu--logo {width:183px; padding:15px 0 30px;}
	header .menu .menu--item {padding:20px 0;}
	header .menu .menu--item a,
	header .menu .menu--item.active a {font-size:58px;}
  
	.toggle--menu {top:20px; right:20px; width:40px; height:40px;}
  .toggle--menu:before {width:44px; height:44px;}
	.toggle--menu:after { width:48px; height:48px;}
	.toggle--menu .toggle--menu_button:before,
	.toggle--menu .toggle--menu_button:after {left:9px; width:22px; height:6px;}
	.toggle--menu .toggle--menu_button:before {top:calc(50% - 8px);}
	.toggle--menu .toggle--menu_button:after {top:calc(50% + 3px);}
	
	.main--owner {top:20px; left:10px; width:48.5px;}
	.main .main--logo {top:15px; left:calc(50% - 85px); width:183px;}
	.main .button.button--scroll {bottom:40px; left:calc(50% - 20px); width:40px; height:40px;}
	.main .button.button--scroll:before {width:44px; height:44px;}
	.main .button.button--scroll:after {width:48px; height:48px;}
	.main .button.button--scroll a:before,
	.main .button.button--scroll a:after {width:17px; height:6px;}
	.main .button.button--scroll a:before {left:calc(50% - 13px);}
  .main .button.button--scroll a:after {left:calc(50% - 5px);}
	.main .main--title h1 {font-size:28px; line-height:46px;}
	.main .social {margin-top:30px;}
	.main .social--share_button {width:40px; height:40px; margin:0 9px;}
  .main .social--share_button:before {width:44px; height:44px;}
	.main .social--share_button:after {width:48px; height:48px;}
	[class^="icon--social_"], [class*=" icon--social_"] {font-size:18px;}
	.main .half--index h2 {font-size:36px; margin-bottom:28px; padding-bottom:9px;}
  .main .content--title {font-size:26px; line-height:32px;}
	.main .section--flex .half {padding:40px 20px;}
	.main .footer {padding:40px 20px 20px;}
	.main .footer .footer--title {font-size:28px; margin-bottom:28px;}
	.main .footer .footer--card_title {font-size:20px;}
  .main .footer .footer--menu li {display:block; margin:0;}

	.fancybox-infobar {top:20px!important; left:20px!important; min-width:75px!important; font-size:16px!important;}
	.fancybox-toolbar {right:20px!important; top:20px!important; width:40px; height:40px;}
	.fancybox--close {width:40px; height:40px;}
	.fancybox--close:before {width:44px; height:44px;}
	.fancybox--close:after {width:48px; height:48px;}
	.fancybox--close .fancybox--close_button:before,
	.fancybox--close .fancybox--close_button:after {top:calc(50% - 3px); left:9px; width:22px; height:6px;}
	.fancybox--prev {left:20px;}
	.fancybox--next {right:20px;}
	.fancybox--nav {width:40px; height:40px;}
	.fancybox--nav:before {width:44px; height:44px;}
	.fancybox--nav:after {width:48px; height:48px;}
	.fancybox--nav .fancybox--nav_button:before,
	.fancybox--nav .fancybox--nav_button:after {width:17px; height:6px;}
	.fancybox--nav .fancybox--prev_button:before,
	.fancybox--nav .fancybox--prev_button:after {left:10px;}
	.fancybox--nav .fancybox--next_button:before,
	.fancybox--nav .fancybox--next_button:after {left:12px;}
}

@media screen and (max-width:380px) {
	header .menu .menu--item.active a {font-size:52px;}
	.toggle--menu {right:15px;}
	.main .cover {margin:0;}
	.main .stamp {top:15%; left:55%;}
	.main .footer .footer--card_icon {float:none; margin:10px auto;}
	.main .footer .footer--card_title {margin:30px 0 12px; padding-left:0; text-align:center;}
	.main .footer .footer--card_lead {padding-left:0; text-align:center;}
	.main .footer .footer--banner p {font-size:20px; line-height:24px;}
}
