@import "./node_modules/@waca/ca-ui-toolkit/essentials/essentials";

.welcomeViewWrapper{

	& img.welcomeBackground {
		width: 696px;
		height: 522px;
		position: relative;
		float: right;
		display: inline;
		margin-top: -56px;
		margin-right: -88px;
		z-index: 0;
	}
	
	& div.brandTitle {
		margin-top: 56px;
	
		& .brandTitleIcon {
			vertical-align: top;
			height: 64px;
			width: 64px;
		}
	}
	
	& div.primaryTitle {
		margin-top: 24px;
		margin-bottom: 2px;
		font-size: 36px;
		@include theming(color, text-02);
		// width: 38%; // For dynamic space allocation (the background image might overlap the title)
		width: 475px;
		z-index: 900;
		position: relative;
		line-height: 1.25;
	}
	
	& div.secondaryTitle {
		margin-top: 24px;
		font-weight: 300;
		font-size: 20px;
		@include theming(color, text-02);
		z-index: 900;
		position: relative;
		width: 525px;
	}
	
	& div.welcomeTileWrapper {
		margin-top: 112px;
		min-height: 290px;
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
	}
	
	@media only screen and (max-width: 940px) {
		// Resize the image for this screen size
		& img.welcomeBackground {
			width: 450px !important;
			height: 338px !important;
		}
	
		& div.welcomeTileWrapper {
			height: auto;
		}
	}
	
	@media only screen and (max-width: 768px) {
		// Hide the image for this screen size
		& img.welcomeBackground {
			display: none;
		}
	
		& div.welcomeTileWrapper {
			height: auto;
		}
	}

}