@import url('../fonts/font-awesome/css/all.css?9');
@import url('../fonts/avenir/stylesheet.css?9');

/* MAIN */
	* {
		padding: 0;
		margin: 0;
	    box-sizing: border-box;

	    --size-header-height: 6em;
		--size-page-padding: 2em;

		--color-body: #ffffff;
		--color-black-lighter: #636676;
		--color-blue: #4C7DF6;
		--color-border: #CCCCCC;
		--color-gray: #83889D;
		--color-green: #A7DC82;
		--color-green-darker: #0F7C24;
		--color-light-blue: #52DDFF;
		--color-red: #FF685F;
		--color-orange: #FFA500;
		--color-input-placeholder: #CCCCCC;
		--color-link: #4C7DF6;
		--color-text: #636676;
		--color-light-gray: #C1C3CE;
		--color-logo: #636676;
		--color-map: #C1C3CE;
	}
	html, body {
		width: 100%;
		min-height: 100vh;
		min-width: 900px;
		max-width: 100vw;
		background-color: var(--color-body);
		color: var(--color-text);
		font-size: 12px;
		font-weight: normal;
		line-height: 1.4;
		background-size: 100% 100%;
		background-attachment: fixed;
		scroll-behavior: auto;
		margin: 0;
		padding: 0;	
		height: auto;
	}
	html, body, input, button, textarea{
		font-family: Avenir Next Cyr, sans-serif;
		font-weight: 500;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		-webkit-focus-ring-color: rgba(255, 255, 255, 0.0);
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		-moz-osx-font-smoothing: graygauge;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	}
	input, button, textarea {
		-webkit-appearance: none;
   		-moz-appearance:    none;
   		appearance:         none;
   		outline: none;
	}
	::-webkit-input-placeholder {

		color: var(--color-input-placeholder);
	}
	::-moz-placeholder {

		color: var(--color-input-placeholder);
	}
	:-ms-input-placeholder {

		color: var(--color-input-placeholder);
	}
	:-moz-placeholder {

		color: var(--color-input-placeholder);
	}
	a {
		text-decoration: none;
		color: var(--color-link);
		text-transform: none;
	}
	sup {

		font-size: 0.9em;
	}
	#main_wrapper {
		width: 100vw;
		
		max-width: 100vw;
		height: auto;
	}		
	section {
		width: 100vw;
		min-height: 100vh;
	}
	.texts {
		position: relative;
	}	
	.texts .h1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: nowrap;
		font-size: 4vw;
		letter-spacing: 1px;
		z-index: 10;
		line-height: 1.3;
		width: 100%;
	}
	.texts.left .h1 {
		align-items: flex-start;
	}
	.texts .h1 p{
		font-size: 0.25em;
        padding-top: 0.5em;
		text-align: right;
	}
	.texts .h1 .line {
		width: 100%;
		text-align: right;
		position: relative;
	}
	.texts.left .h1 .line {
		text-align: left;
	}
	.texts .h1 .small {
		font-weight: 300;
		font-size: 0.5em;
	}
	.texts .h1 > div span {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		transition: all 0.25s ease-in-out 0s
	}
	.texts.left .h1 > div span {
		justify-content: flex-start;
	}
	.texts .h1 > div span:last-of-type {
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transform: translateY(50%);
	}
	.texts .h1 > div p {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 1.3rem;
		transition: all 0.25s ease-in-out 0s
	}

/* ICON SCROLL */
	.scroll-down {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		margin-top: 2em;
		margin-bottom: var(--size-header-height);
	}
	.scroll-down.absolute {
		position: absolute;
		left: var(--size-header-height);
		bottom: 0;
		width: auto;
		justify-content: flex-start;
	}
	.scroll-down.absolute.right {
		right: var(--size-header-height);
		justify-content: flex-end;
	}
	.texts.left .scroll-down {
		justify-content: flex-start;
	}
	.scroll-down span {
		text-align: right;
		text-transform: uppercase;
		margin-right: 1.5rem;
		font-size: 1.25em;
		font-weight: 300;
	}
	.texts.left .scroll-down span {
		text-align: left;
		margin-left: 1.5rem;
		margin-right: 0;
	}
	.icon-scroll {
		position: relative;
	}
	.icon-scroll{
		width: 30px;
		height: 46px;
		
		box-shadow: inset 0 0 0 3px var(--color-gray);
		border-radius: 15px;
	}
	.scroll-down.small .icon-scroll {
		transform: scale(0.7, 0.7);
	}
	.scroll-down.small .icon-scroll {
		transform: scale(0.7, 0.7);
	}
	.scroll-down.small span {
		margin: 0.0 0.5rem;
	}
	.icon-scroll::before{
		content: '';
		position: absolute;
		z-index: 9;
		left: 50%;
		width: 10px;
		height: 10px;
		background: var(--color-gray);
		margin-left: -5px;
		top: 5px;
		border-radius: 5px;
		animation-duration: 1.75s;
		animation-iteration-count: infinite;
		animation-name: scroll;
	}
	@keyframes scroll{
		0% {opacity: 1;}
		100%{opacity: 0; transform: translateY(22px);}
	}
	@keyframes scrollMobile{
		0%{opacity: 1; transform: translateY(22px);}
		100% {opacity: 0;}
	}

/* ENTITY FORM */
	.entity-form {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.65);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .entity-form .entity-form-body {
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
        background: white;
        /* border: 1px solid var(--color-border); */
        padding: 3em;
        border-radius: 1em;
        width: 90%;
        max-width: 540px;
        min-height: 500px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1.2em;
        transform: translate(-50%, -50%);
        box-shadow: 0 1em 2em rgba(0, 0, 0, 0.075);
        z-index: 10001;
    }
    .entity-form .close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        height: 4.5rem;
        top: 0;
        right: 0;
        background: none;
        border: none;
        font-size: 2.5em;
        cursor: pointer;
        outline: none;
        text-decoration: none;
    }
    .entity-form .close::before {
    	content: '\f00d';
    	font-family: 'Font Awesome 5 Pro';
    	font-weight: 300;
    	font-size: 0.8em;
    	color: var(--color-link);
    }
    .entity-form h2 {
    	width: 100%;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	padding: 0;
    	padding-bottom: 2rem;
    	font-size: 2em;
    	margin-bottom: 1rem;
    	border-bottom: 1px solid var(--color-border);
    }
    .entity-form h2 small {
    	font-size: 1.4rem;
    }
    .entity-form .form {
    	flex: 1 1 auto;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	width: 100%;
    }
    .entity-form .form .item {
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
    	justify-content: flex-start;
    	width: 100%;
    	margin-top: 1em;
    }
    .entity-form .form .item label {
    	font-weight: 600;
    	font-size: 0.9em;
    	margin-bottom: 0.2rem;
    }

    .entity-form input[type="text"],
	.entity-form input[type="email"],
	.entity-form input[type="search"],
	.entity-form input[type="password"],
	.entity-form input[type="number"] {
		width: 100%;
		outline: none;
		color: var(--color-text-input);
		border: 1px solid var(--color-border);
		background-color: white;
		border-radius: 0.3rem;
		padding: 0 1rem;
		font-size: 1.1rem !important;
		margin: 0;
		background: transparent;
		outline: none;
		height: 3.5rem;
	}
	.entity-form textarea {
		width: 100%;
		outline: none;
		color: var(--color-text-input);
		border: 1px solid var(--color-border);
		background-color: white;
		border-radius: 0.3rem;
		padding: 1rem;
		font-size: 1.1rem !important;
		margin: 0;
		background: transparent;
		height: 7rem;
		resize: none;
	}
	.entity-form a.submit {
		width: 100%;
		outline: none;
		border: none;
		border-radius: 0.3rem;
		height: 5rem;
		font-weight: 600;
		margin-top: 1rem;
		background-color: var(--color-blue);
		color: white;
		text-decoration: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.entity-form a.submit.process{
		cursor: default;
		font-size: 0px;
	}
	.entity-form a.submit.process::after{
		content: '\f3f4';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 1.6rem;
		font-weight: 600;
	}
	.entity-form .iti {
		width: 100%;
	}

	.entity-form input.error,
	.entity-form textarea.error {
		border: 2px solid var(--color-red);
	}

/* RADIO SEGMENTED CONTROL */
	/* Container for the radio buttons */
	.segmented-control-radio {
		width: 100%;
		height: 3.5rem !important;
	    display: flex;
	    flex-direction: row;
	    align-items: flex-end;
	    overflow: hidden;
	    position: relative;
	    border: 1px solid var(--color-border);
		color: var(--color-text);
		border-radius: 0.2em;
		background-color: var(--color-input-bg);
	}
	.segmented-control-radio.inline {
		border: none;
	}
	/* Hide the original radio buttons */
	.segmented-control-radio input[type="radio"] {
	    display: none;
	}

	/* Style the labels */
	.segmented-control-radio label {
	    cursor: pointer;
	    white-space: nowrap;
	    height: calc(100% - 6px);
	    flex: 1 1 auto;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: var(--color-text);
	    font-weight: 600;
	    margin: 3px;
	    position: relative;
	    z-index: 0;
	    /* padding-top: 0.85rem; */
	    /* transition: background-color 0.3s, color 0.3s; */
	}
	.segmented-control-radio.seven label{
	    flex: 1 1 14.3%;
	}
	.segmented-control-radio.two label{
	    flex: 1 1 50%;
	}
	.segmented-control-radio label.title {
		display: block;
		line-height: 1.4;
		color: var(--color-border);
		position: absolute;
		margin: 0;
		/* text-align: left; */
		top: 0 !important;
		left: 0 !important;
		padding-left: 0.5em;
		padding-top: 0.2em;
		z-index: 99;
	}
	.segmented-control-radio label::before {
		content: '';
		top: 20%;
		bottom: 20%;
		left: -3px;
		display: block;
		width: 1px;
		background-color: var(--color-border);
		position: absolute;
	}
	.segmented-control-radio:not(.inline) label:first-of-type::before {
		display: none;
	}

	/* Remove right border for the last label */
	.segmented-control-radio label:last-child {
	    border-right: none;
	}

	/* Style for the selected state */
	.segmented-control-radio input[type="radio"]:checked + label {
	    background-color: var(--color-blue);
	    color: white;
	    border-radius: 0.2rem;
	    z-index: 3;
	    /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); */
	}
	.segmented-control-radio.default input[type="radio"]:checked + label {
	    background-color: var(--color-border);
	}
	.segmented-control-radio input[type="radio"]:checked + label::before {
		background-color: transparent;
	}
	.segmented-control-radio input[type="radio"]:checked + label::after {
		content: '';
		top: 20%;
		bottom: 20%;
		right: -4px;
		display: block;
		width: 1px;
		background-color: var(--color-input-bg);
		position: absolute;
	}


/* ANIMATIONS */
	@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
	}
	@-webkit-keyframes spin { 
	    100% { -webkit-transform: rotate(360deg); } 
	}
	@keyframes spin { 
	    100% { 
	        -webkit-transform: rotate(360deg); 
	        transform:rotate(360deg); 
	    } 
	}
	@-webkit-keyframes cell-process {
	  0% { background-position: 0 0; }
	  100% { background-position: 32px 0; }
	}
	@-moz-keyframes cell-process {
	  0% { background-position: 0 0; }
	  100% { background-position: 32px 0; }
	}
	@keyframes cell-process {
	  0% { background-position: 0 0; }
	  100% { background-position: 32px 0; }
	}

	@-moz-keyframes blink { 
    100% { opacity: 0; } 
	}
	@-webkit-keyframes blink { 
	    100% { opacity: 0; } 
	}
	@keyframes blink { 
	    100% { opacity: 0; } 
	}

/* RESPONSIVE LAYOUT */
	@media (max-width: 1280px) {
		html, body {
			font-size: 11px;
		}

	}
	/* @media (max-width: 767px) and (hover: none) and (pointer: coarse) { */
	@media (max-width: 767px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 0) {
		html, body {
			min-width: 300px;
			font-size: 10px;
		}

	}