@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-MediumOblique.eot');
    src: url('../fonts/AvenirLTStd-MediumOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-MediumOblique.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-MediumOblique.woff') format('woff'),
        url('../fonts/AvenirLTStd-MediumOblique.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-MediumOblique.svg#AvenirLTStd-MediumOblique') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Medium.eot');
    src: url('../fonts/AvenirLTStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Medium.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Medium.woff') format('woff'),
        url('../fonts/AvenirLTStd-Medium.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Medium.svg#AvenirLTStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Oblique.eot');
    src: url('../fonts/AvenirLTStd-Oblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Oblique.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Oblique.woff') format('woff'),
        url('../fonts/AvenirLTStd-Oblique.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Oblique.svg#AvenirLTStd-Oblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Roman.eot');
    src: url('../fonts/AvenirLTStd-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Roman.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Roman.woff') format('woff'),
        url('../fonts/AvenirLTStd-Roman.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Book.eot');
    src: url('../fonts/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Book.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Book.woff') format('woff'),
        url('../fonts/AvenirLTStd-Book.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Book.svg#AvenirLTStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-BookOblique.eot');
    src: url('../fonts/AvenirLTStd-BookOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-BookOblique.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-BookOblique.woff') format('woff'),
        url('../fonts/AvenirLTStd-BookOblique.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-BookOblique.svg#AvenirLTStd-BookOblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Light.eot');
    src: url('../fonts/AvenirLTStd-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-Light.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-Light.woff') format('woff'),
        url('../fonts/AvenirLTStd-Light.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-Light.svg#AvenirLTStd-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-LightOblique.eot');
    src: url('../fonts/AvenirLTStd-LightOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirLTStd-LightOblique.woff2') format('woff2'),
        url('../fonts/AvenirLTStd-LightOblique.woff') format('woff'),
        url('../fonts/AvenirLTStd-LightOblique.ttf') format('truetype'),
        url('../fonts/AvenirLTStd-LightOblique.svg#AvenirLTStd-LightOblique') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: middle;
  	background-position: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2em;	background-color: #fed018;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
#wrapper
{
	height: 100%;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	top: 0;
}
#top
{
	background-color: #fff;
	padding: 0;
	border: 0;
	margin: 0;
	width: 100%;
}

.logo img
{
	text-align: center;
	margin: 0 auto;
	margin-top: 50px;
	position: relative;
	height: 150px;
	padding-bottom: 30px;
}
#nav
{
	text-align: center;
	position: relative;
	position: relative;
	height: 75px;
	display:inline-block ;
	padding: 0;
	border: 0 ;
	vertical-align: middle;
}
.guest{

	background-color: #44c9f6 ;
	width: 220px;
	border-right: 2px solid #fff;
	height: 75px;
	float: left;
}
.visitor{

	background-color: #ff3366 ;
	width: 220px;
	border-right: 2px solid #fff;
	height: 75px;
	float: left;
}
.user{

	background-color: #424a9f ;
	width: 220px;
	height: 75px;
	float: left;
}
#nav input[type="radio"]{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #fff;
  	content: url(../media/radio.svg);
  	width: 25px;
  	height: 100%;
  	vertical-align: middle;
  	margin-top: -4px;

}
#nav input[type="radio"]:checked{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #fff;
  	content: url(../media/radiochecked.svg);
  	width: 25px;
  	height: 100%;
  	vertical-align: middle;
  	 margin-top: -4px;

}
#nav input+label{
    color: #fff;
    border: 0px;
    font-family: 'Avenir LT Std';
    font-weight: bolder;
    font-style: normal;
    font-size: 1.4em;
    letter-spacing: 0.1em;
    height: 100%;
    vertical-align: middle;
    padding: 10px;
}
#bottom
{
	background-color: #fed018;
	margin: 0 auto;
	padding: 0;
	color: #424a9f;
	font-family: 'Avenir LT Std';
	 font-size: 1.4em;
	 padding-top: 30px;
	 padding-bottom: 45px;
}
#bottom p
{
	color: #424a9f;
	font-family: 'Avenir LT Std';
	 font-size: 1.5em;
	 margin-top: 25px;
	 margin-bottom: 20px;
}
#bottom input[type="textfield"],input[type="number"]{
	color: #424a9f;
    border: 0px;
    font-family: 'Avenir LT Std';
    font-weight: 400;
    font-style: normal;
    font-size: 0.8em;
    height: 100%;
    vertical-align: middle;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    height: 40px;
    width: 260px;
}

#bottom input[type="radio"]{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #424a9f;
  	content: url(../media/radiocheckedblue.svg);
  	width: 20px;
  	height: 20px;
  	vertical-align: middle;
  	margin-top: -4px;

}

#buy input[type="radio"]{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #fff;
  	content: url(../media/radio.svg);
  	width: 25px;
  	height: 100%;
  	vertical-align: middle;
  	margin-top: -4px;

}
#buy input[type="radio"]:checked{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #fff;
  	content: url(../media/radiocheckedblue.svg);
  	width: 25px;
  	height: 100%;
  	vertical-align: middle;
  	 margin-top: -4px;

}



#bottom label{
	font-family: 'Avenir LT Std';
    font-weight: 400;
    font-style: normal;
    font-size: 0.7em;
    vertical-align: middle;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 80px;
    height: 50px;
}
#bottom input::placeholder {
  color: #424a9f;
  opacity: 1; /* Firefox */
}

#bottom input:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #424a9f;
}

#bottom input::-ms-input-placeholder { /* Microsoft Edge */
 color: #424a9f;
}
#bottom input[type=image]{
	height: 64px;
	width: auto;
}
@media only screen and (max-width: 660px) {
 .logo img
{
	text-align: center;
	margin: 0 auto;
	margin-top: 50px;
	position: relative;
	height: 95px;
	padding-bottom: 30px;
}
 .guest{

	background-color: #44c9f6 ;
	width: 90px;
	border-right: 2px solid #fff;
	height: 40px;
	float: left;
}
.visitor{

	background-color: #ff3366 ;
	width: 100px;
	border-right: 2px solid #fff;
	height: 40px;
	float: left;
}
.user{

	background-color: #424a9f ;
	width: 90px;
	height: 40px;
	float: left;
}
#nav
{
	text-align: center;
	position: relative;
	position: relative;
	height: 40px;
	display:inline-block ;
	padding: 0;
	border: 0 ;
	vertical-align: middle;
}
#nav input[type="radio"]{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #fff;
  	content: url(../media/radio.svg);
  	width: 14px;
  	height: 100%;
  	vertical-align: middle;
  	margin-top: -1px;

}
#nav input[type="radio"]:checked{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #fff;
  	content: url(../media/radiochecked.svg);
  	width: 14px;
  	height: 100%;
  	vertical-align: middle;
  	 margin-top: -1px;

}
#nav input+label{
    color: #fff;
    border: 0px;
    font-family: 'Avenir LT Std';
    font-weight: bolder;
    font-style: normal;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    height: 100%;
    vertical-align: middle;
    padding: 8px;
    margin-left: -8px;
}
#bottom
{
	background-color: #fed018;
	margin: 0 auto;
	color: #424a9f;
	font-family: 'Avenir LT Std';
	 padding-top: 15px;
	 padding-bottom: 15px;
}
#bottom p
{
	color: #424a9f;
	font-family: 'Avenir LT Std';
	 font-size: 0.9em;
	 margin-top: 15px;
	 margin-bottom: 15px;
}
#bottom input[type="textfield"],input[type="number"]{
	color: #424a9f;
    border: 0px;
    font-family: 'Avenir LT Std';
    font-weight: 400;
    font-style: normal;
    font-size: 0.7em;
    height: 100%;
    vertical-align: middle;
    padding-left: 20px;
 
    padding-bottom: 10px;
    margin-top: 20px;
    height: 35px;
    width: 250px;
}

#bottom input[type="radio"]{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    color: #424a9f;
  	content: url(../media/radiocheckedblue.svg);
  	width: 14px;
  	height: 14px;
  	vertical-align: middle;
  	margin-top: -4px;

}


#buy input[type="radio"]{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
        color: #fff;
  	content: url(../media/radio.svg);
  	width: 24px;
  	height: 24px;
  	vertical-align: middle;
  	margin-top: -4px;

}
#buy input[type="radio"]:checked{
 	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
        color: #fff;
  	content: url(../media/radiocheckedblue.svg);
  	width: 24px;
  	height: 24px;
  	vertical-align: middle;
  	 margin-top: -4px;

}




#bottom label{
	font-family: 'Avenir LT Std';
    font-weight: 400;
    font-style: normal;
    font-size: 0.6em;
    vertical-align: middle;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 100px;
    height: 50px;
}
#bottom input::placeholder {
  color: #424a9f;
  opacity: 1; /* Firefox */
}

#bottom input:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #424a9f;
}

#bottom input::-ms-input-placeholder { /* Microsoft Edge */
 color: #424a9f;
}
#bottom input[type=image]{
	height: 44px;
	width: auto;
}
}