@charset "UTF-8";
/* CSS Document */

/*
Spectral
font-family: 'Spectral', serif;
font-style: normal;
font-style: italic;

Montserrat Regular

font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;

Montserrat Italic

font-family: montserrat, sans-serif;
font-weight: 400;
font-style: italic;

Montserrat Medium

font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;

Montserrat Medium Italic

font-family: montserrat, sans-serif;
font-weight: 500;
font-style: italic;

Montserrat Bold

font-family: montserrat, sans-serif;
font-weight: 700;
font-style: normal;

Montserrat Bold Italic

font-family: montserrat, sans-serif;
font-weight: 700;
font-style: italic;

Montserrat Black

font-family: montserrat, sans-serif;
font-weight: 900;
font-style: normal;

Montserrat Black Italic

font-family: montserrat, sans-serif;
font-weight: 900;
font-style: italic;

*/

*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
--colordarkgrey: #2c333e; 
--colorcream: #f7f4e9; 
--colorcoral: #fa7268;
--coloryellow: #ecc43e;
}

body {
margin:0px auto;
padding:0px auto;
width:100%;
overflow-y: scroll;
overflow-x: hidden !important;
font-size:100%;
background:transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
font-family: proxima-nova,sans-serif;
background:#fff;
}
/* ------------------------------------------------------------------ 
GENERAL
--------------------------------------------------------------------- */
h1{
font-family: montserrat, sans-serif;
font-weight: 900;
font-style: normal;
font-size: calc(28px + (36 - 28) * ((100vw - 375px) / (1280 - 375)));
line-height:calc(32px + (44 - 32) * ((100vw - 375px) / (1280 - 375)));
}
h2{
font-family: montserrat, sans-serif;
font-weight: 700;
font-style: normal;
font-size: calc(24px + (28 - 24) * ((100vw - 375px) / (1280 - 375)));
line-height:calc(28px + (44 - 28) * ((100vw - 375px) / (1280 - 375)));
}
h3{
font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;
font-size: calc(22px + (24 - 22) * ((100vw - 375px) / (1280 - 375)));
line-height:calc(28px + (30 - 28) * ((100vw - 375px) / (1280 - 375)));
}
h4{
font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;
font-size: calc(20px + (22 - 20) * ((100vw - 375px) / (1280 - 375)));
line-height:calc(24px + (28 - 24) * ((100vw - 375px) / (1280 - 375)));
}
p, ul li{
font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;
font-size:17px;
line-height:26px;
margin-bottom:20px;
}
.darkgrey{
color:#2c333e;
}
.cream{
color:#f7f4e9;
}
.coral{
color:#fa7268;
}
.yellow{
color:#ecc43e;
}
.white{
color:#fff;
}
.bg_darkgrey{
background-color:#2c333e;
}
.bg_cream{
background-color:#f7f4e9;
}
.spanbold{
font-weight: 900;
}


.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 16:9 ratio*/
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
background-color:#000;
margin-top:30px;
margin-bottom:30px;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
}

.mt60 {
margin-top: 60px;
}
.mt80 {
margin-top: 80px;
}

.full_screen {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top:0px;
}
.sticky_extended {
position: -webkit-sticky;
position: sticky;
top:0px;
}
@media (max-width: 992px) {
.sticky {
position: relative;
top:0px;
}
}
.sectionleft {
width:100%;
height:100vh;
overflow: hidden;
margin:0px auto;
padding:0px auto;
}

.sectionright_insidewrap{
min-height:100vh;
padding-top:120px;
padding-bottom:120px;
}
.sectionright_insidewrap_footer{
min-height:100vh;
padding-top:15px;
padding-bottom:15px;
}
.sectionleft_insidewrap{
min-height:100vh;
padding-top:60px;
padding-bottom:60px;
}
@media (max-width: 992px) {
.section {
max-width:100%;
min-height: 0;
height:auto;
margin:0px auto;
padding:0px auto;
}
.sectionleft {
width:100vw;
height: 100vw;
}	
.sectionright_insidewrap{
min-height: 0;
height:auto;
padding-top:60px;
padding-bottom:60px;
}
.sectionright_insidewrap_footer{
min-height: 0;
height:auto;
padding-top:60px;
padding-bottom:15px;
}
}
@media (max-width: 576px) {
.sectionright_insidewrap{
min-height: 0;
height:auto;
padding-top:30px;
padding-bottom:30px;
}
.sectionright_insidewrap_footer{
min-height: 0;
height:auto;
padding-top:30px;
padding-bottom:15px;
}
}
/* ------------------------------------------------------------------ 
SECTIONS
--------------------------------------------------------------------- */
header{
width:180px;
position: fixed;
top:15px;
z-index:99;
left: 30px;
}
header img{
max-width:100%;
height: auto;
}
@media (max-width: 992px) {
header{
width:100px;
position: fixed;
top:15px;
z-index:99;
left: 15px;
}
}
@media (max-width: 768px) {
header{
left: calc(4% + 25px);
}
}
#main {	
position:relative;
min-height:100vh;
width:100%;
}
#fixedbg {
position:fixed;
width:100%;
height:100%;
background-image: url(../img/fruit_01.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size: cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size: cover; 
z-index:1;	
}
#section_01 {
position:absolute;
top:34vh;
left:50%;
transform: translateX(-50%);
width:92%;
max-width:738px;
z-index:2;	
padding-bottom:300px;
}
.content {
background-color: #fff;
height:auto;
padding:45px 20px 45px 20px;
}
.fullpadding {
padding:0px 20px 0px 20px;
}
.greywrap {
background-color: var(--colorcoral);
padding:20px 20px 20px 20px;
background-image: url("../img/triangle.svg");
background-repeat: no-repeat;
background-size: 50px auto;
background-position: center top;
}
.custombutton {
margin:30px 0px 60px 0px;
}
.fullpadding a {
color:var(--colordarkgrey);
text-decoration: none;
}
.fullpadding a:hover {
color:var(--colorcoral);
text-decoration: none;
transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-webkit-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
}

@media (max-width: 992px) {
#section_01 {
top:32vh;
padding-bottom:200px;
}
.content {
background-color: #fff;
height:auto;
padding:45px 15px 45px 15px;
}
.fullpadding {
padding:0px 10px 0px 10px;
}
.greywrap {
background-color: var(--colorcoral);
padding:20px 10px 20px 10px;
background-image: url("../img/triangle.svg");
background-repeat: no-repeat;
background-size: 50px auto;
background-position: center top;
}
.custombutton {
margin:30px 0px 60px 0px;
}
}

/* ------------------------------------------------------------------ 
SIGNUP FORM
--------------------------------------------------------------------- */

.newsletter{
font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;
color: var(--colorcoral);
width:100%;
}
.newsletter h3{
font-family: montserrat, sans-serif;
font-weight: 700;
font-style: normal;
color: var(--colorcoral);
text-align:left;
text-transform: none;
margin-top:0px;
margin-bottom:24px;
font-weight:700;
font-style:normal;
}
*:focus {
outline: 0;
}
textarea:focus, input:focus{
outline: 0;
}
.newsletter input[type=email],.newsletter input[type=text] { 
background-color: rgba(255, 255, 255, 0); 
border-top: solid 3px var(--colorcoral);
border-bottom: solid 3px var(--colorcoral);
border-left: solid 3px var(--colorcoral);
border-right: solid 3px var(--colorcoral);
padding: 8px; 
width:100%; 
color: var(--colorcoral);
font-size: 16px;
font-weight: 500;
font-style: normal;
transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-webkit-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
margin-bottom:12px;
}
.newsletter input[type=submit] { 
background: var(--colorcoral);
padding: 8px; 
width:100%;
color:#fff;
font-weight:700;
font-style:normal;
text-transform: uppercase; 
letter-spacing: 1px; 
transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-webkit-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
font-size: 16px;
margin-top:12px;
margin-bottom:12px;
border:3px solid var(--colorcoral);
cursor:pointer;
white-space: normal;
}
.newsletter input[type=submit]:hover { 
background: var(--colorcoral);
color:#fff;
}
::-webkit-input-placeholder {
color: var(--colorcoral);
}
::-moz-placeholder { 
color: var(--colorcoral);
}
:-ms-input-placeholder {
color: var(--colorcoral);
}
:-moz-placeholder {
color: var(--colorcoral);
}
@media only screen 
and (max-width : 576px)  { 
.newsletter input[type=email],.newsletter input[type=text]  { 
border-top: solid 3px var(--colorcoral);
border-bottom: solid 3px var(--colorcoral);
border-left: solid 3px var(--colorcoral);
border-right: solid 3px var(--colorcoral);
text-align:center;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.newsletter input[type=submit] { 
margin-top:10px;
border:3px solid var(--colorcoral);
}
.newsletter h2{
text-align:left;
text-transform: none;
margin-top:40px;
margin-bottom:15px;
}
}
@media only screen 
and (max-width : 340px)  { 
.newsletter input[type=email],.newsletter input[type=text]  { 
padding: 5px; 
}
.newsletter input[type=submit] { 
padding: 5px; 
}
}



/* Effect: border slight translate */
.link-effect a {
padding: 12px 10px 12px 10px;
margin-bottom:0px;
width:100%;
text-align: center;
}
.link-effect a::before,
.link-effect a::after  {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid var(--colordarkgrey);
border-radius: 2px;
content: '';
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.link-effect a::after  {
border-color: var(--colorcoral);
opacity: 0;
-webkit-transform: translateY(-7px) translateX(6px);
-moz-transform: translateY(-7px) translateX(6px);
transform: translateY(-7px) translateX(6px);
}
.link-effect a:hover::before,
.link-effect a:focus::before {
opacity: 0;
-webkit-transform: translateY(5px) translateX(-5px);
-moz-transform: translateY(5px) translateX(-5px);
transform: translateY(5px) translateX(-5px);
}
.link-effect a:hover::after,
.link-effect a:focus::after  {
opacity: 1;
-webkit-transform: translateY(0px) translateX(0px);
-moz-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
.link-effect a {
font-family: montserrat, sans-serif;
font-weight: 700;
font-style: normal;
font-size: calc(20px + (26 - 20) * ((100vw - 375px) / (1280 - 375)));
line-height:1;
letter-spacing: 0px;
position: relative;
display: inline-block;
margin-top: 20px;
outline: none;
color: var(--colordarkgrey);
text-decoration: none;
}
.link-effect a:hover,
.link-effect a:focus {
outline: none;
text-decoration: none;
color: var(--colorcoral);
}
@media (max-width: 992px) {
.link-effect a {
margin-bottom:0px;
}
}
@media (max-width: 768px) {
.link-effect a {
padding: 15px 10px 15px 10px;
}
.link-effect a {
margin-top: 10px;
}
}