body{
    font-family: 'Noto Sans', sans-serif;
    /* To override default styles */
    font-size: 13px;
}

#logo {
	display: block;
	background-size: contain;
	background-position-x: center;
	margin-top: 2ex;
}

#profile-pic-container {
	padding: 0;
	width:20%;
	max-width: none;
}
	.solo #profile-pic-container {
		margin: 2%;
		padding: 0;
		width:20%;
		max-width: none;
	}

		.solo #logo {
			max-height: 100px;
		}

		.solo #profile-pic {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

#client-content-container{
	padding:2%;
}
	.solo #client-content-container {
		margin: 1% auto;
		width: 50%;
		max-width: 686px;
		text-align: center;
	}
#intro.intro.inline-block {
   background: rgba(255,255,255,0.85);
   border-radius: 10px;
   padding: 2%;
   width: 66%;
}
	.solo #intro.intro.inline-block {
		text-align: left;
		width: 62%;
		margin: 2%;
	}
#intro.intro.inline-block h3{
	display: none;
}
#intro{
	font-size: 19px;
}


#kiosk-container {
   margin-top: 5%;
   margin-right: 5%;
}

	.solo #kiosk-container {
		margin: 1% auto;
		width: 50%;
		max-width: 500px;
		background-color: #F7F7F7;
		padding: 5%;
	}
		.goril.card{
			/* To override default styles */
			margin: auto;
		}
			.solo .goril.card{
				margin: auto;
			}
		.card {
			transition: 1s all ease;
			margin: 0 auto !important;
		}
		.card input{
			padding: 2%;
			font: inherit;
			outline: none;
			border: 1px solid #BBBBBB;
			font-size: 13px;
			color: #333333;
			width: 96%;
			/*height: 40px;*/
			/* To override default styles */
			margin: 0 0 5px 0;
		}
		.formtitle{
			font-size: 18px;
			font-weight: bold;
			height: 40px;
		}
		.card.hidden{
			height: 0px;
			opacity: 0;
			overflow: hidden;
			padding: 0;
		}
		.card span{
			display:inline-block;
		}
		.card span.block{
			display: block;
			font-size: 13px;
			font-weight: bold;
		}

		.card input[type='text'] + span{
			transform: translateY(-62px) translateX(9px);
			transition: all 0.5s ease;
			background: rgba(255,255,255,255);
			padding: 5px;
			font-size: 13px;
			font-weight: bold;

		}

		.card input[type='text'].invalid + span{
			color: red;
		}

		.card select{
			display: block;
			/*margin-bottom: 20px;*/
			width: 100%;

			padding: 2% 2% 2% 2%;
				/* Padding will be effected on desktop. Appearance is non-standard */
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
			background: #FFF;
			/* To override the default styles */
			max-width: 100%;
			margin: 2px 2px 5px 1px;
			border: 1px solid #b3b3b3;
			border-radius: 1px;
				background-image:
					linear-gradient(45deg, transparent 50%, gray 50%),
					linear-gradient(135deg, gray 50%, transparent 50%),
					linear-gradient(to right, #ccc, #ccc);
				background-position:
					calc(100% - 20px) calc(1em + 2px),
					calc(100% - 15px) calc(1em + 2px),
					calc(100% - 2.5em) 0.5em;
				background-size:
					5px 5px,
					5px 5px,
					0 0;
				background-repeat: no-repeat;
		}
			.card select:focus {
				background-image:
					linear-gradient(45deg, gray 50%, transparent 50%),
					linear-gradient(135deg, transparent 50%, grey 50%),
					linear-gradient(to right, #ccc, #ccc);
				background-position:
					calc(100% - 15px) 1em,
					calc(100% - 20px) 1em,
					calc(100% - 2.5em) 0.5em;
				background-size:
					5px 5px,
					5px 5px,
					0 0;
				background-repeat: no-repeat;
				border-color: grey;
				outline: 0;
			}

		.card select.goril.invalid{
			color: red;
		}

		/* Customize the label (the gorillacheckbox) */
		.gorillacheckbox{
			display:block;
			position:relative;
			padding-left:30px;
			margin-bottom:0px;
			cursor:pointer;
			font-size: 12px;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
			min-height: 30px;
		}

		.gorillacheckbox.invalid{
			color: red;
		}
		.gorillacheckbox.invalid .gorillacheckboxbtn{
			background: #ffcaca;
		}

		/* Hide the browser's default checkbox */
		.gorillacheckbox input {
			position:absolute;
			opacity:0;
			cursor:pointer;
			height:0;
			width:0;
		}

		/* Create a custom checkbox */
		.gorillacheckboxbtn {
			position:absolute;
			top:0;
			left:0;
			height:25px;
			width:25px;
			background-color:#eee;
		}

		/* On mouse-over, add a grey background color */
		.gorillacheckbox:hover input ~ .gorillacheckboxbtn {
			background-color:#ccc;
		}

		/* When the checkbox is checked, add a blue background */
		.gorillacheckbox input:checked ~ .gorillacheckboxbtn {
			background-color:#2196F3;
		}

		/* Create the gorillacheckboxbtn/indicator (hidden when not checked) */
		.gorillacheckboxbtn:after {
			content:'';
			position:absolute;
			display:none;
		}

		/* Show the gorillacheckboxbtn when checked */
		.gorillacheckbox input:checked ~ .gorillacheckboxbtn:after {
			display:block;
		}

		/* Style the gorillacheckboxbtn/indicator */
		.gorillacheckbox .gorillacheckboxbtn:after {
			left:9px;
			top:5px;
			width:5px;
			height:10px;
			border:solid white;
			border-width:0 3px 3px 0;
			-webkit-transform:rotate(45deg);
			-ms-transform:rotate(45deg);
			transform:rotate(45deg);
		}

		.card button.requestcall,.card button.requestupdate{
			box-sizing: content-box;
			font-family: 'Noto Sans', sans-serif;
			font-size: 14px;
			text-transform: uppercase;
			text-decoration: none;
			font-weight: bold;
			border-radius: 2px;
			border: 0;
			display: block;
			background-color: #3d587f;
			color: #fff;
			margin: 10px auto;
			min-width: 15vw;
		}

		.card button.requestcall:disabled,  .card button.requestupdate:disabled{
			background-color: #929292;
		}

		.card span.hiddenty {
			display: none;
		}
/*================== Media queries =====================*/
	@media only screen and (max-width: 435px){
		#intro{
			width: 60%;
		}
	}
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
	.card input[type='text'] + span{
		transform: translateY(-57px) translateX(9px);
	}
}

@media only screen and (max-device-width : 1024px) {
	.solo #client-content-container{
		margin: 2% auto;
		width: 85%;
	}
		#profile-pic-container {
			margin: 5% 1%;
			width: 25%;
		}
			.solo #profile-pic-container {
				margin: 5% 1%;
				width: 30%;
			}
		.solo #intro.intro.inline-block {
			margin: 0;
			width: 100%;
		}
	.solo #kiosk-container {
		width: 85%;
		margin: 2% auto;
	}
}

/*================== Safari Only =====================*/
@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {
		.card input[type='text'] + span{
			transform: translateY(-50px) translateX(9px);
		}
		 .card select {
			padding: 2% 2% 2% 3%;
		}
	}
}