/** GENERAL ELEMENT **/
	@font-face {
		font-family: "Source Sans Pro";
		src: url(fonts/Source_Sans_Pro/SourceSansPro-Light.ttf);
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url(fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf);
		font-style: italic;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url(fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf);
		font-weight: bold;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url(fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf);
		font-style: italic;
		font-weight: bold;
	}
	@font-face {
		font-family: "Lato";
		src: url(fonts/Lato/Lato-Regular.ttf);
	}
	@font-face {
		font-family: "Lato";
		src: url(fonts/Lato/Lato-Italic.ttf);
		font-style: italic;
	}
	@font-face {
		font-family: "Lato";
		src: url(fonts/Lato/Lato-Bold.ttf);
		font-weight: bold;
	}
	@font-face {
		font-family: "Lato";
		src: url(fonts/Lato/Lato-BoldItalic.ttf);
		font-style: italic;
		font-weight: bold;
	}
	p, h1, h2, h3, h4, h5, h6, span,
	.page {
		font-family: Lato, "Source Sans Pro" !important;
		letter-spacing: 0px;
		line-height: 140%;
		font-style: normal;
	}
    html, body {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
    }
	body, p, .page {
		color: rgb(24, 13, 2);
		font-size: 1rem;
		font-weight: 400;
	}
	h1, h2, h3, h4, h5, h6 {
		color: rgb(146, 70, 52);
		font-size: 1.375rem;
		font-weight: bold !important;
	}
	#menu .list-item__center {
	   font-size: 12pt;
	}
	iframe {
		border: 0;
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	hr {
		background: rgba(0,0,0,.07);
		border: none;
		height: 1px;
	}
	
/** OVERRIDE ONSEN DEFAULTS **/
	a, a:hover, a:visited, a:active {
		color: #e25f16;
	}
	.toolbar--material__center {
		font-size: 16px;
	}
	.text-input--material:focus {
		background-image: linear-gradient(#e25f16, #e25f16), linear-gradient(to top, transparent 1px, #afafaf 1px);
	}
	.text-input--material__label--active {
		color: #e25f16;
	}
    .toolbar {
		background-color: #e25f16;
    }
    .toolbar * {
        color: #fff;
    }
	.toolbar__title {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;;
		justify-content: center;
	}
	.toolbar--material {
	    align-items: center
	}
    .button {
        background-color: #e25f16;
		border-radius: 1.5rem;
		box-shadow: none;
		font-size: 1rem;
		font-weight: bold;
		line-height: 1.5rem;
		padding: 0.25rem 1.50rem;
		text-align: center;
		text-transform: none;
    }
	.button--material {
		font-family: Lato, "Source Sans Pro" !important;
	}
	.page__background {
		background-color: rgb(252, 243, 219);
	}
	
	
/** TITLE STYLES **/
    .title-back-btn .ios-only {
        font-size: 12px;
        position: relative;
        top: -2px;
    }
    .title-logo {
        background: url('../img/title-logo.png?v2') no-repeat center center / auto 80%;
        height: 100%;
    }
    .title-language-selector {
        opacity: 1;
    }
    .title-language-selector:hover,
    .title-language-selector:active,
    .title-language-selector:focus {
        opacity: 1;
    }
    
    
/** MENU STYLES **/
    .start-menu .list-item--chevron div.icon {
        height: 100%;
        width: 100%;
    }
    .startpage-wrapper {
		background-color: #f9fafa;
    	background-attachment: fixed;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: center;
    	height: 100%;
    	overflow: hidden;
    	width: 100%;
    	position: relative;
    }
    .startpage-wrapper .card {
    	background-color: rgba(255,255,255,.9);
		display: flex;
    	height: calc(25% - 51px);
    	overflow: hidden;
    	padding-left: 30px;
    	position: relative;
    	text-align: left;
    }
    .startpage-wrapper .card.with-chevron:before {
		border-right: 2px solid #c7c7cc;
		border-bottom: 2px solid #c7c7cc;
		width: 7px;
		height: 7px;
		background-color: transparent;
		z-index: 5;
		position: absolute;
		content: '';
		right: 16px;
		top: 50%;
		-webkit-transform: translateY(-50%) rotate(-45deg);
		transform: translateY(-50%) rotate(-45deg);
    }
   	.startpage-wrapper .card.split-on-landscape {
   		height: calc(16.67% - 35px);
		width: calc(100vw - 40px);
	}
	.startpage-wrapper .icon-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
	}
    .startpage-wrapper .icon-wrapper .ons-icon {
    	font-size: 34px;
    	line-height: 1;
    	margin-right: 20px;
	}
	.startpage-wrapper .card.split {
		display: block;
		height: 80px;
		line-height: 2;
		padding-left: 16px;
		text-align: center;
		width: 100%;
	}
	.startpage-wrapper .card.split .icon-wrapper {
		width: calc(100% - 32px);
		font-size: 10pt;
	}
	.startpage-wrapper .card.split .ons-icon {
		margin: 0;
		padding: 0;
		display: block;
		font-size: 26px;
	}
	.startpage-wrapper .footer-buttons {
		width: calc(100vw - 20px);
	}
	.startpage-wrapper .footer-buttons .card.split {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
	.startpage-wrapper .footer-buttons .card.split .icon-wrapper {
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
	.startpage-wrapper .footer-buttons .card.split .icon-wrapper span {
		overflow: visible;
		text-wrap: nowrap;
	}
    
    
/** SPLASHSCREEN **/
    #splashscreen {
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        z-index: 10001;
    }
    #splashscreen .backdrop {
       background-color: #fff;
       height: 100%;
       opacity: 1;
       position: absolute;
       transition: opacity .5s linear;
       width: 100%;
       z-index: 10002;
    }
    #splashscreen.loaded .backdrop {
       opacity: 0;
    }
    #splashscreen .backdrop .content {
       text-align: center;
       width: 100%;
       position: absolute;
       bottom: 10%;
    }
    #splashscreen .backdrop .content p {
       color: #777;
       margin: 0;
    }
    
    #splashscreen .title-logo {
        background-image: url('../img/logo.png?v2');
        background-size: 70% auto;
        transition: all .5s linear;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 10003;
    }
    
    
/** FORM STYLES **/
	.textarea {
		display: block;
		width: 100%;
		border: 0;
		padding: 10px 5px;
		background: rgb(252, 243, 219) no-repeat;
		background-image: linear-gradient(to bottom, #e25f16, #e25f16), linear-gradient(to bottom, silver, silver);
		background-size: 0 2px, 100% 1px;
		background-position: 50% 100%, 50% 100%;
		transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	}
	
	.textarea:focus {
		background-size: 100% 2px, 100% 1px;
		outline: none;
	}

/** SECTIONS **/
	.section {
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20px;
		position: relative;
	}
	.section.dark {
	   background: #f4ead0;
	}
	.section .container {
		padding: 20px;
	}
	.section .slim.container {
		max-width: 300px;
	}
	.intro-hero {
	   background-color: rgba(255,255,255,.9);
	   padding: 20px;
	   margin: 0px auto;
	   position: relative;
	   top: 20px;
	   width: 70%;
	   border-radius: 10px;
	}
	

/** MOVIE SECTION **/
	iframe.video-wrapper,
	video.video-wrapper,
	.video-wrapper {
		height: auto;
		width: 100vw;
	}
	.flex-wrapper {
		display:flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}
	.vertical.flex-wrapper {
		flex-direction: column;
	}
	.vertical.flex-wrapper.movie-buttons-wrapper {
		align-items: center;
		width: min(80%, 300px);
	}
	.vertical.flex-wrapper.movie-buttons-wrapper ons-button {
		margin-bottom: 20px;
		width: 100%;
	}


/** SESSION LOG **/
	#create-session-log-dialog .dialog-container {
		text-align: center;
		padding: 10px;
	}
	#create-session-log-dialog .dialog-container .large-icons ons-icon {
		font-size: 1.7em;
	}
	.session-log-list div {
		margin: 0 0 20px 0;
	}
	.session-log-list p {
		line-height: 1;
		margin: 0 0 5px 0;
	}
	.session-log-list p.text-small {
		font-size: 14pt;
	}

/** SHARE SECTION **/
	.share-wrapper .ons-icon {
		color: #fff;
		margin-right: 20px;
	}
	.share-icons-wrapper {
		display: flex;
		justify-content: space-between;
	}
	.share-icons-wrapper a {
		border-radius: 6px;
		color: #fff;
		display: inline-block;
		font-size: 24px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		width: 50px;
	}
	.share-icons-wrapper a.share-copy { background: #1fa67a; }
	.share-icons-wrapper a.share-copy.success { background: #00fa00; }
	.share-icons-wrapper a.share-copy.error { background: #fa0000; }
	.share-icons-wrapper a.share-fb { background: #4a66b0; }
	.share-icons-wrapper a.share-instagram { background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); font-size:30px; font-weight:bold; line-height:50px; }
	.share-icons-wrapper a.share-messenger { background: #5489fd; }
	.share-icons-wrapper a.share-twitter { background: #61acec; }
	.share-icons-wrapper a.share-pinterest { background: #c7162f; }
	.share-icons-wrapper a.share-sms { background: #fbbd29; }
	a.share-qr {
		align-items: center;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 0 20px #ccc;
		display: flex;
		height: 80px;
		justify-content: center;
		width: 80px;
	}
	a.share-qr img {
		height: 60px;
		width: 60px;
	}

	.qr-overlay {
		background: #fff;
		background-image: url('../img/qr-code.png?v2');
		background-repeat: no-repeat;
		background-size: auto 80%;
		background-position:  center center;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20002;
		display: none;
	}
	.qr-overlay.active {
		display: block;
	}

	.split-button-wrapper {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 auto;
		padding: 0;
	}
	.split-button-wrapper .button {
		color: #fff;
		margin: 5px 0px;
		text-align: left;
		padding-left: 25px;
		min-width: 184px;
	}
	.split-button-wrapper ons-button ons-icon {
		margin-right: 5px;
	}
	
	
/** TAPPING GUIDE **/
	.tapping-guide ons-col {
		position: relative;
	}
	.tapping-guide ons-col img {
		border-radius: 10px;
	}
	.tapping-guide div.step {
		text-align: center;
		margin-bottom: 50px;
		padding: 0 10px;
	}
	.tapping-guide .step-number {
		color: rgba(255,255,255,.5);
		font-weight: bold;
		font-size: 16pt;
		position: absolute;
		top: 10px;
		left: 50%;
		margin-left: -100px;
	}
	
	
/** GENERAL STYLES AND CLASSES **/
	.android-only { display: none; }
	.auto-height { height:auto; }
	.auto-width { width:auto; }
	.bg-blue { background-color: #3d5afe; }
	.button-margin-wrapper .button { margin-top:10px; margin-bottom:10px; }
	.full-height { height:100%; }
	.full-width { width:100%; }
	.fullscreen-video-wrapper { width:100%; height:100%; overflow:hidden; }
	.hidden { display: none !important; }
	.hidden-submit { position: absolute; top:-5000px; left:-5000px; }
	.italic { font-style: italic; }
	.ios-only { display: none; }
	.landscape-only { display: none; }
	.low-height-only { display: none; }
	.margin-left-10 { margin-left: 10px; }
	.margin-right-10 {margin-right: 10px; }
	.margin-bottom-20 { margin-bottom: 20px; }
	.margin-bottom-30 { margin-bottom: 30px; }
	.margin-bottom-50 { margin-bottom: 50px; }
	.margin-top-16 { margin-top: 16px; }
	.margin-top-30 { margin-top: 30px; }
	.margin-top-50 { margin-top: 50px; }
	.no-margin { margin: 0; }
	.no-padding { padding: 0 !important; }
	.note { font-size: 12pt; color: #777; }
	.pill { border-radius: 24px; padding: 2px 10px; text-align: center; min-width: 60px; }
	.portrait-only { display: none; }
	.round { border-radius: 50%; }
	.scrollable { overflow-y: auto; }
	.strong { font-weight: bold; }
	.text-bold { font-weight: bold !important; }
	.text-center { text-align: center; }
	.text-gray { color: #666; }
	.text-italic { font-style: italic !important; }
	.text-left { text-align: left; }
	.text-right { text-align: right; }
	.text-success { color: #009a00; }
	.text-danger { color: #9a0000; }
	.text-warning { color: #d37630; }
	.bg-success { background: #009a00; color: #fff; }
	.bg-danger { background: #9a0000; color: #fff; }
	.bg-warning { background: #d37630; color: #fff; }
	.w90p { width: 90% !important; }
	.w100p { width: 100% !important; }
	.min-width-250 { min-width: 250px !important; }
	.max-width-300 { max-width: 300px !important; }
	.max-width-400 { max-width: 400px !important; }
	
	
/** DEVICE DISTINCTIONS USING MEDIA QUERIES **/
    @media all and (orientation:portrait) {
        .portrait-only {
            display: block;
        }
        .fullscreen-video-wrapper {
            height: auto;
        }
        .startpage-wrapper .card {
	       	height: calc(25% - 51px);
        }
		.qr-overlay {
			background-size: 80% auto;
		}
    }
    
    @media screen and (orientation:landscape) {
        .landscape-only {
            display: block;
        }
        #splashscreen .backdrop .content {
			display: none;
        }
        #splashscreen .title-logo {
			background-size: auto 70%;
        }
        .split-on-landscape {
			display: inline-block;
        	width: calc(50% - 20px);
		}
		.startpage-wrapper .card.split-on-landscape {
			height: calc(43% - 85px);
			width: calc(50vw - 26px);
		}
		iframe.video-wrapper,
		video.video-wrapper,
		.video-wrapper {
			height: 60vh;
			width: auto;
		}
    }

	@media screen and (orientation:landscape) and (min-width:719px) and (max-width:960px) {
		.tapping-guide ons-col img {
			width: 40vw;
		}
	}

	@media screen and (orientation:landscape) and (min-height: 496px) {
		.startpage-wrapper .card.split-on-landscape {
			height: calc(37% - 85px);
		}
	}
	@media screen and (orientation:landscape) and (min-height: 764px) {
		.startpage-wrapper .card.split-on-landscape {
			height: calc(37% - 85px);
		}
	}
    
    @media screen and (max-height: 812px) and (max-width: 375px) {
        .startpage-wrapper .card {
        	height: 100px;
        	line-height: 50px;
        	margin: 16px 8px;
        }
    	.startpage-wrapper .card.split-on-landscape {
    		line-height: 110px
        }
    }
    
    @media screen and (max-height: 375px) {
        .startpage-wrapper .card {
        	height: 40px;
        	line-height: 8px;
        }
    	.startpage-wrapper .card.split-on-landscape {
    		height: calc(40% - 55px);
    		line-height: 110px
        }
        .startpage-wrapper .card.split {
        	height: 40px;
        }
        .hide-on-low-height {
        	display: none !important;
        }
        .low-height-only {
        	display: flex;
        	font-size: 10pt;
        	font-weight: bold;
			width: 100%;
        }
        .low-height-only .split.container {
        	display: inline-block;
			width: 100px;
        }
    }
    
    
    @media screen and (min-width: 768px) {
    	.startpage-wrapper .card.split-on-landscape .icon-wrapper {
    		font-size: 22pt;
    	}
    	.startpage-wrapper .card.split-on-landscape .icon-wrapper .ons-icon {
			font-size: 40pt;
			top: 10px;
		}
		.button {
			border-radius: 1.5rem;
			padding: 0.75rem 3rem;
			font-size: 1.25rem;
		}
    }
    @media screen and (orientation:landscape) and (min-width: 813px) {
    	.startpage-wrapper .card.split-on-landscape .icon-wrapper {
    		text-align: center;
    		line-height: 50px;
    		font-size: 18pt;
    	}
    	.startpage-wrapper .card.split-on-landscape .icon-wrapper .ons-icon {
    		display: block;
    		font-size: 25pt;
    	}
		.startpage-wrapper .card.split {
			height: 60px;
		}
	}
	@media screen and (orientation:portrait) and (min-width: 1024px) {
		.startpage-wrapper .card.split-on-landscape .icon-wrapper {
			font-size: 36pt;
		}
		.startpage-wrapper .card.split-on-landscape .icon-wrapper .ons-icon {
			font-size: 60pt;
			margin: 0 20px;
			top: 15px;
		}
	}
	@media screen and (min-width: 1025px) {
		.startpage-wrapper .card.split-on-landscape .icon-wrapper {
			font-size: 24pt;
		}
		.startpage-wrapper .card.split-on-landscape .icon-wrapper .ons-icon {
			font-size: 60pt;
		}
	}
	@media screen and (max-height: 812px) {
		.startpage-wrapper .card.split-on-landscape .icon-wrapper {
			font-size: 18pt;
			line-height: 50px;
		}
		.startpage-wrapper .card.split-on-landscape .icon-wrapper .ons-icon {
			font-size: 30pt;
		}
	}
    
    
/** CSS SPECIFIC TO iOS DEVICES **/ 
@supports (-webkit-overflow-scrolling: touch) {
	.ios-only {
	   display: initial;
	}
}