/* Smooth Scrolling */
html {
	scroll-behavior: smooth;
}

html, body {
	height: 100%;
}

.sso-hypens {
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

a {
	cursor: pointer;
	text-decoration: none;
}

.sso-inline {
	display: inline;
}

#wave {
	position: absolute;
	bottom: 0;
}

.sso-menu {
	position: relative;
	top: 0;
	width: 100%;
}

.sso-intro-image {
	width: 70%;
}

.sso-color-container, .sso-intro-btn-color {
	background-color: #764ba2;
	color: #f1f1f1;
}

.sso-tool-btn-color:hover {
	background-color: #667eea;
	color: #f1f1f1;
}

.sso-intro-btn-color:hover, .sso-tool-btn-color {
	background-color: #f1f1f1;
	color: #764ba2;
}

.sso-color-container-gradient {
	background-image: linear-gradient(#764ba2, #667eea);
	color: #f1f1f1;
}

.sso-color-container-footer {
	background-color: #667eea;
	color: #f1f1f1;
}

.sso-max-width {
	max-width: 1100px;
}

.sso-form-max-width {
	max-width: 700px;
}

.sso-settings-navi-bg {
	background-color: #FFFFFF;
	color: #333333;
}

.sso-container-color {
	background-color: #f1f1f1;
	color: #333333;
}

.sso-container-round {
	border-style: solid;
	border-width: 1px;
	border-color: #333333;
	border-radius: 4px;
}


/* GRID STYLING */
.sso-grid-container, .sso-grid-container-reverse, .sso-about-grid {
	display: grid;
	grid-gap: 10px;
	text-align: left;
}

.sso-about-grid {
	grid-template-rows: 450px;
	grid-template-columns: 50% 50%;
}

.sso-grid-container  {
	grid-template-columns: 33% 67%;
}

.sso-grid-container-reverse  {
	grid-template-columns: 67% 33%;
}

.sso-intro-item-navi { grid-area: navi; }
.sso-intro-item-left { grid-area: left; text-align: center;}
.sso-intro-item-right { grid-area: right;}
.sso-intro-item-wave { grid-area: wave; }

.sso-intro-grid-container {
	display: grid;
	grid-gap: 10px;
	height: 100%;
	grid-template-areas:
		'navi navi'
		'left right'
		'wave wave';
	grid-template-columns: 50% 50%;
	grid-template-rows: 70px auto 160px;
}

.sso-middle-center-container {
    position: relative;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


/* ICON STYLING */
.sso-compatible-icon {
	font-size: 48px;
}

/* RESPONSIVE */
@media screen and (max-width: 1200px) {
	.sso-intro-image {
		width: 90%;
	}
	
	.sso-intro-grid-container {
		grid-template-areas:
			'navi navi'
			'left right'
			'wave wave';
		grid-template-columns: 45% 55%;
		grid-template-rows: 70px auto 110px;
	}
}

@media screen and (max-width: 900px) {
	.sso-intro-item-right { text-align: center;}
	
	.sso-intro-image {
		width: 80%;
	}
	
	.sso-intro-grid-container {
		grid-template-areas:
			'navi'
			'right'
			'left'
			'wave';
		grid-template-columns: 100%;
		grid-template-rows: 70px auto auto 80px;
	}
}

@media screen and (max-width: 600px) {
	.sso-intro-image {
		width: 90%;
	}
	
	.sso-intro-grid-container {
		grid-template-rows: 70px auto auto 50px;
	}
	
	.sso-grid-container, .sso-grid-container-reverse, .sso-about-grid { 
		grid-template-rows: auto;
		grid-template-columns: 100%;
	}
	
	.sso-grid-item-1 { grid-area: 1 / 1 / 1 / 2; }
	.sso-grid-item-2 { grid-area: 2 / 1 / 2 / 2; }
	
	.sso-about-item-1 { grid-area: 1 / 1 / 1 / 2; }
	.sso-about-item-2 { grid-area: 2 / 1 / 2 / 2; }
}