@charset "UTF-8";

@import url(fontawesome-all.min.css);

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, small, strong, sub, sup, b, u, i, center, ol, ul, li, aside, footer, header, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    }


/* TYPE */

    .fira-sans-regular {
      font-family: "Fira Sans", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .fira-sans-semibold {
      font-family: "Fira Sans", sans-serif;
      font-weight: 600;
      font-style: normal;
    }

    .fira-sans-regular-italic {
      font-family: "Fira Sans", sans-serif;
      font-weight: 400;
      font-style: italic;
    }

    .fira-sans-semibold-italic {
      font-family: "Fira Sans", sans-serif;
      font-weight: 600;
      font-style: italic;
    }


	body, input, select, textarea {
		color: rgba(255, 255, 255, 0.75);
		font-family: Fira Sans, sans-serif;
		font-size: 16.5pt;
		font-weight: normal;
		line-height: 1.75;
	}

	    @media screen and (max-width: 1680px) {
			body, input, select, textarea {
				font-size: 13pt;
			}
		}

		@media screen and (max-width: 1280px) {
			body, input, select, textarea {
				font-size: 12pt;
			}
		}

		@media screen and (max-width: 360px) {
			body, input, select, textarea {
				font-size: 11pt;
			}
		}

	a {
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
		border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
		color: inherit;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #ffffff;
		}

	strong, b {
		color: #ffffff;
		font-weight: bold;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 0.5em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {font-size: 2.75em;}
    h2 {font-size: 1.75em;}
    h3 {font-size: 1.1em;}
    h4 {font-size: 1em;}

	@media screen and (max-width: 736px) {
		h1 {font-size: 2em;}
		h2 {font-size: 1.25em;}
		h3 {font-size: 1em;}
		h4 {font-size: 0.8em;}
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
    border: 0;
    border-bottom: solid 1px rgba(255, 255, 255, 0.15);
    margin: 2em 0;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    appearance: none;
    transition: color 0.2s ease;
    cursor: pointer;
	}

/* Button */

    .button {
    appearance: none;
    transition: color 0.2s ease;
    background-color: var(--contrast-color);
    border: solid 2px;
    border-color: rgba(255, 255, 255, 0.15);
    border-radius: 3em;
    color: var(--side-back);
    cursor: pointer;
    /* [disabled]display: inline-block; */
    font-size: 0.8em;
    font-weight: bold;
    height: calc(4.75em + 2px);
    letter-spacing: 0.25em;
    line-height: 4.75em;
    padding: 0 3.75em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
	}


/* BASIC */

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
    box-sizing: inherit;
    }

    :root {
        --side-back: #303644;
        --contrast-color: #f98305;
        --light-color: #6192c2;
        --dark-color: #2a3b62;
        --image-back: #040b15;
        --shadow: 0 5px 10px rgba(0,0,0,.3);
        }

    /* Padding */

        :root {
            --side-padding: 5rem;
            --top-bottom-padding: 4rem;
        }

        @media screen and (max-width: 1280px) {
            :root {
                --side-padding: 3rem;
            }
        }

        @media screen and (max-width: 736px) {
            :root {
                --side-padding: 1.5rem;
                --top-bottom-padding: 2.5rem;
            }
        }


/* LAYOUT */

@media screen and (max-width: 981px) {
    body {
        display: block;
        margin: 0; padding: 0;
        }
    .wrapper {
        display: block;
        }
    .left {
        display: block;
        padding: var(--side-padding);
        background-color: var(--light-color);
        }
    .inner-button {
        display: flex;
        justify-content: center;
        height: auto;
        opacity: 1;
        width: 100%;
        padding: var(--side-padding);
        }
    .inner {
        display: block;
        flex-direction: column;
        padding: var(--side-padding);
        /*max-width: 900px;*/
        border-bottom: 1px solid white;
    }
    .right {
        display: block;
        background-color: var(--image-back);
		max-height: 100vh;
        }
    .right > img {
        width: 100%;
        max-height: 100vh;
		object-fit: contain;
		margin: 0 auto;
		
        } 
}

@media screen and (min-width: 981px) {
    body {
        display: block;
        margin: 0;
        padding: 0;
		overflow: hidden;
        }
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        }
    .left {
        grid-area: 1 / 1;
        /*padding: var(--side-padding);*/
        max-height: 100vh;
        }
    .inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--side-padding);
        height: 100vh;
        opacity: 1;
        width: 100%;
        max-height: 100vh;
        }
    .inner-button {
        display: flex;
        justify-content: center;
        height: auto;
        opacity: 1;
        width: 100%;
        padding-top: 2em;
        }
    .right {
        grid: 2 / 1;
        padding: 0;
        background-color: var(--image-back);
		max-height: 100vh;
        }
    .right > img {
        width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
        } 
}


/* CONTENT */

    .style1 {background-color: var(--light-color);}
    .style2 {background-color: var(--dark-color);}
    .style3 {background-color: var(--side-back);}
    .style4 {background-color: var(--image-back);}