textarea, input, select {
	outline: none;
	-webkit-appearance: none;
   -moz-appearance: none;
	border-radius: 0;
   resize: vertical;
}

p {
   margin: 0;
   padding: 0 0 15px;
}

p:nth-last-child(1) {
   margin: 0;
   padding: 0;
}

img {
	border: 0;
   -webkit-backface-visibility: hidden;
	vertical-align: top;
}

a {
    color: #000000;
   text-decoration: none;
   padding: 0;
   margin: 0;
}

:focus {
   outline:none;
}

@font-face {
    font-family: 'Aeonik';
    src: url('fonts/Aeonik-Medium.woff2') format('woff2'),
        url('fonts/Aeonik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('fonts/Aeonik-Regular.woff2') format('woff2'),
        url('fonts/Aeonik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body, html {
   height: 100%;
}

.hide-on-responsive {
    display: block;
}

.show-on-responsive {
    display: none;
}

.content {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

.content-left {
    position: relative;
    width: 50%;
    padding: 40px 0;
    background-color: #FDB913;
    color: #FFFFFF;
}

.content-left:after {
        content: '';
        position: absolute;
        top: 0;
        right: -160px;
        height: 100%;
        width: 330px;
        border-radius: 100%;
        background: linear-gradient(90deg, #FDB913 50%, transparent 50%);
        transform: rotate(180deg);
}

.content-top-text {
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    max-width: 610px;
    color: #FFFFFF;
    font-family: 'Aeonik';
    font-size: 50px;
    line-height: 46px;
    font-weight: 400;
}

.content-center {
    position: absolute;
    position: relative;
    top: 50%;
    left: 40px;
    right: 40px;
    width: 780px;
    transform: translateY(-50%);
    z-index: 9;
}

.content-center img {
    width: 100%;
    height: auto;
}

.content-bottom-text {
    position: absolute;
    bottom: 50px;
    left: 40px;
    right: 40px;
    max-width: 610px;
    font-family: 'Aeonik';
    color: #FFFFFF;
    font-size: 30px;
    line-height: 32px;
    font-weight: 400;
}

.content-bottom-text a {
    color: #FFFFFF;
    font-size: 30px;
    line-height: 32px;
    transition: opacity 0.3s ease-in-out;
}

.content-bottom-text a:hover {
    opacity: 0.6;
}

.content-right {
    width: 50%;
}

.content-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floating-bracket {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

.floating-bracket img {
    width: 100%;
    height: auto;
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 980px) and (max-width: 1400px) {

    .content-top-text {
        width: 300px;
        font-size: 40px;
        line-height: 36px;
    }

    .content-center {
        width: 420px;
    }

    .content-bottom-text {
        font-size: 18px;
        line-height: 20px;
    }

    .content-bottom-text a {
        font-size: 18px;
        line-height: 20px;
    }


}

@media only screen and (min-width: 1px) and (max-width: 979px) {

    .hide-on-responsive {
        display: none;
    }
    
    .show-on-responsive {
        display: block;
    }

    .content {
        flex-direction: column-reverse;
    }

    .content-left,
    .content-right {
        width: 100%;
        height: 50%;
    }

    .content-left:after {
        content: '';
        position: absolute;
        top: -88px;
        left: 0;
        right: 0;
        height: 170px;
        width: 100%;
        border-radius: 100% 100% 0 0;
        background: #FDB913;
        transform: none;
    }   

    .content-top-text {
        position: absolute;
        top: -25px;
        left: 0;
        right: 0;
        max-width: initial;
        width: 90%;
        margin: 0 5%;
        text-align: center;
        font-family: 'Aeonik';
        font-size: 30px;
        line-height: 26px;
        z-index: 9;
    }

    .content-center {
        position: absolute;
        position: relative;
        top: 50%;
        left: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
        transform: translateY(-50%);
        z-index: 9;
    }

    .content-bottom-text {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        max-width: none;
        width: 90%;
        margin: 0 auto;
        font-family: 'Aeonik';
        font-size: 16px;
        line-height: 18px;
        text-align: center;
    }

    .content-bottom-text a {
        font-size: 16px;
        line-height: 18px;
    }


    .floating-bracket {
        top: 30px;
        left: 50%;
        width: 227px;
        transform: rotate(0) translateX(-50%);
    }

}