@media ( orientation : portrait) {
.datecal {
		background: url(../../images/phosphor/SVGs/regular/calendar.svg) no-repeat;
		background-size: 1.5em 1.5em;
		background-position: right 0.5em;
		opacity: 0.8;
	}
	
	.labeledinput {
		display: inline-flex;
		flex-flow: wrap;
		flex-wrap: wrap;
		position: relative;
		margin: 0.5em;
	}
	.labeledinput label {
		display: inline-block;
		position: relative;
		font-size: 1em;
		margin-left: 0.3em;
		font-family: OpenSans-Regular, Arial;
	}
	.inputtooltip{
		display: inline-block;
        position: relative;
        width: 1.3em;
        height: 1.3em;
        margin-top: 0.1em;
        margin-left: 0.25em;
        cursor: pointer;
	}
	.inputtooltip span{
		display: none;
	}
	.inputtooltip::after{
	 	content: url(../images/phosphor/SVGs/regular/info.svg);
	}
	.labeledinput input[type="text"], input[type="number"], input[type="tel"], select {
		display: block;
		position: relative;
		width: calc(100% - 1em);
		height: 3em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-top: 0em;
		padding-bottom: 0em;
		border-radius: 0.5em;
		clear: both;
		margin-top: 0.4em;
		font-size: 1em;
		font-family: OpenSans-Regular, Arial, Verdana, Helvetica, sans-serif;
		border-width: 1px;
    	border-style: solid;
    	border-color: #CCCCCC;
	}
	.labeledinput select {
		padding-right: 1.5em;
	}
	.labeledinput input[type="text"], input[type="number"], input[type="tel"] {
		padding-right: 0.5em;
	}
	.labeledinput input[type="text"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input:focus {
		outline: none;
		background-color: rgba(245, 214, 72, 0.1);
	}
	.labeledinput textarea {
		display: block;
		position: relative;
		width: calc(100% - 1em);
		min-height: 5em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		border-radius: 0.5em;
		clear: both;
		margin-top: 0.5em;
		font-size: 1em;
		font-family: OpenSans-Regular, Arial, Verdana, Helvetica, sans-serif;
		outline: none;
		border-width: 1px;
    	border-style: solid;
    	border-color: #CCCCCC;
	}
	.labeledswitch {
		display: inline-flex;
		flex-flow: wrap;
		flex-wrap: wrap;
		position: relative;
		margin: 0.5em;
	}
	.labeledswitch .lswtitle {
		display: inline-block;
		position: relative;
		font-size: 1em;
		margin-left: 0.3em;
		font-family: OpenSans-Regular, Arial;
	}
	.switch {
		position: relative;
		display: inline-block;
		width: 3.2em;
		height: 1.8em;
		margin-left: 0.5em;
	}
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .4s;
		transition: .4s;
	}
	.slider:before {
		position: absolute;
		content: "";
		height: 1.4em;
		width: 1.4em;
		left: 0.2em;
		bottom: 0.2em;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}
	input:checked+.slider {
		background-color: #26a269;
	}
	input:focus+.slider {
		box-shadow: 0 0 1px #26a269;
	}
	input:checked+.slider:before {
		-webkit-transform: translateX(1.3em);
		-ms-transform: translateX(1.3em);
		transform: translateX(1.3em);
	}
	.slider.round {
		border-radius: 1em;
	}
	.slider.round:before {
		border-radius: 50%;
	}
	
}