/*********************************************
 IMPORTS
*********************************************/
@import '/assets/css/materialize.min.css';
@import '/assets/css/animate.min.css';
@import '/assets/fonts/fonts.css';

/*********************************************
 VARIABLES
*********************************************/
body {
	--color_primary : #F57655;
	--color_accent : #2bbbad;
}

/*********************************************
 GLOBAL
*********************************************/
body { background-color: #F0EDE8; color: #444; min-height: 100vh; font: 18px 'Open Sans', sans-serif; overflow-x: hidden; }
h1,.h1 { margin: 0; padding: 15px 0; font-size: 56px; line-height:1.5em; white-space: nowrap; overflow: hidden; font-weight: 200; }
h2,.h2 { margin: 0; padding: 15px 0; font-size: 40px; line-height:1.5em; white-space: nowrap; overflow: hidden; font-weight: 400; }
h3,.h3 { margin: 0; padding: 15px 0; font-size: 26px; line-height:1.5em; white-space: nowrap; overflow: hidden; font-weight: 400; }
hr { border: 0; height: 0; margin: 1em 0; border-top: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
b, strong { font-weight: 700; }
i { font-style: italic; }
p { line-height: 2em; }
a { color: inherit; transition: all .2s ease-out; }
a:not(.btn-large):hover { color: #000;}
.w1000 { width: 100%; max-width:1000px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; }
.bloc { padding : 130px 0; }
.footer { padding : 40px 0; font-size: .9em; color: #BBB; background: #333; }
.footer a:hover{ color: #FFF; }
.input-field > label { font-size: 18px; }

/*********************************************
 BACKGROUNDS
*********************************************/
.ecosystem_industry { position: absolute; right: 100px; top: -275px}
.ecosystem_nature { position: absolute; left: 100px; top: -205px}
.creditcards { position: absolute; left: 100px; top: -70px}
.villa { position: absolute; right: 130px; top: -170px}
.keys { position: absolute; right: 80px; top: -80px}

/*********************************************
 MATERIALIZE TWEAKS
*********************************************/
.modal { height: auto; max-height: initial; top: 50%; left: 50%; transform: translate(-50%,-50%); }

/*********************************************
 INFOBOX
*********************************************/
.infobox { z-index: 1500; border: 2px solid; padding: 20px; border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.25); font-size: 16px; margin-bottom: 15px; line-height: 25px; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); }
.infobox::before { font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 30px; display: inline-block; text-decoration: inherit; margin-right: 15px; vertical-align: top; }
.infobox.success::before { content: '\f058'; color: #8fad3d; }
.infobox.warning::before { content: '\f071'; color: #e6a700; }
.infobox.error::before { content: '\f057'; color: #ad3f2e; }
.infobox.info::before { content: '\f05a'; color: #4381cc; }
.infobox.success { border-color: #8fad3d; color: #586c25; background-color: #eff4d4; }
.infobox.warning { border-color: #e6a700; color: #796101; background-color: #ffea97; }
.infobox.error { border-color: #ad3f2e; color: #923725; background-color: #efcec9; }
.infobox.info { border-color: #4381cc; color: #5d57b9; background-color: #c6d8f0; }

/*********************************************
 ANIMATIONS
*********************************************/
.delay250 { animation-delay: 250ms; -webkit-animation-delay: 250ms; }
.delay500 { animation-delay: 500ms; -webkit-animation-delay: 500ms; }
.delay750 { animation-delay: 750ms; -webkit-animation-delay: 750ms; }
.delay1000 { animation-delay: 1000ms; -webkit-animation-delay: 1000ms; }
.delay1250 { animation-delay: 1250ms; -webkit-animation-delay: 1250ms; }
.delay1500 { animation-delay: 1500ms; -webkit-animation-delay: 1500ms; }
.delay1750 { animation-delay: 1750ms; -webkit-animation-delay: 1750ms; }
.delay2000 { animation-delay: 2000ms; -webkit-animation-delay: 2000ms; }
.delay2250 { animation-delay: 2250ms; -webkit-animation-delay: 2250ms; }
.delay2500 { animation-delay: 2500ms; -webkit-animation-delay: 2500ms; }
.delay2750 { animation-delay: 2750ms; -webkit-animation-delay: 2750ms; }
.delay3000 { animation-delay: 3000ms; -webkit-animation-delay: 3000ms; }
.delay4000 { animation-delay: 4000ms; -webkit-animation-delay: 4000ms; }
.delay5000 { animation-delay: 5000ms; -webkit-animation-delay: 5000ms; }

/*********************************************
 HELPERS
*********************************************/
/** DISPLAYS **/
.float_left { float: left }
.float_right { float: right }
.clear { clear: both; }
.hidden { display: none; }
.absolute {position:absolute;}
.relative { position: relative; }
.fixed {position:fixed;}
.block {display: block;}
.inline_block {display: inline-block;}
.sticky { position: -webkit-sticky; position: -moz-sticky; position: -o-sticky;  position: -ms-sticky; position: sticky; top: 64px; z-index: 50; background: #F8F8F8; border-bottom: 1px solid #ddd;}
/** COLORS **/
.bookiz_bg { background-color:var(--color_primary); }
.accent_bg { background-color: var(--color_accent); }
.stripe_bg { background-color: #635BFF; }
.brighter_bg { background-color: #FFF9; }
.bookiz_text { color:var(--color_primary); }
.accent_text { color: var(--color_accent); }
.stripe_text { color: #635BFF; }
.climate_text { color: #15BE53; }
.grey_text { color: #999999; }
/** STYLES **/
.bold {font-weight:bold;}
.uppercase {text-transform:uppercase;}
.italic { font-style: italic; }
.smaller { font-size: .9em; }
/** DIMENSIONS **/
.h100p { height: 100%; }
.h100vh { height: 100vh; }
.w100p { width: 100%; }
/** ALIGNS **/
.align_left { text-align: left }
.align_right { text-align: right }
.align_center { text-align: center }
.align_justify { text-align: justify }
.valign_top { vertical-align: top; }
.valign_middle { vertical-align: middle }
.valign_bottom { vertical-align: bottom }
.centralize { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.centralizeY { position: relative; top: 50%; transform: translateY(-50%); }
/* SPACES */
.p0 { padding: 0!important }
.p4 { padding: 4px!important }
.p7 { padding: 7px!important }
.p10 { padding: 10px }
.p15 { padding: 15px }
.p20 { padding: 20px }
.m0 { margin: 0!important }
.m5 { margin: 5px }
.mt5 { margin-top: 5px }
.mt10 { margin-top: 10px }
.mt20 { margin-top: 20px }
.mt50 { margin-top: 50px }
.ml10 { margin-left: 10px }
.ml20 { margin-left: 20px }
.mb5 { margin-bottom: 5px }
.mb10 { margin-bottom: 10px }
.mb15 { margin-bottom: 15px }
.mb20 { margin-bottom: 20px }
.mr5 { margin-right: 5px }
.mr10 { margin-right: 10px }
/* OTHERS */
.opacity0 { opacity: 0; }
.opacity50 { opacity: .5; }
.opacity75 { opacity: .75; }
.no_border { border: none!important; }
.no_border_bottom { border-bottom: none; }
.underline::after { display: block; content: ''; width: 170px; height: 3px; background-color: var(--color_primary); margin: 15px auto;}

/*********************************************
 MEDIA QUERIES
*********************************************/
@media only screen and (max-width: 600px) {
    .h100vh { height: auto; }
	.centralize { position:initial; top:auto; left:auto; transform:none; }
	.centralizeY { position:initial; top:auto; transform:none; }
}