@media (min-width: 600px) {
	#container {
		background: rgb(255, 255, 255);
		padding-left: 0px;
		margin-top: 0px;
		margin: 0px;
	}

	btn {
		font-size: 16px;
		display: inline-block;
		position: relative;
		height: 42px;
		font-weight: 200;
		width: 140px;
		box-sizing: border-box;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
		line-height: 42px;
		cursor: pointer;
		text-align: center;
		white-space: nowrap;
		background: #fafafa;
		background: linear-gradient(#FFF, #F6F6F6);
		border: 1px solid rgba(0, 0, 0, 0.18);
		color: #292920;
	}

	page {
		position:absolute;
		top: 2;
		left:0px;
		width:100%;
		height:100%;
		display:block;
		overflow:hidden;
		border-radius: 5px;
		opacity: 0;
		pointer-events:none;
		transition: opacity 0.4s;
	}
	#container[showingIdx="front"] page[idx="front"],
	#container[showingIdx="summary"] page[idx="summary"] {
		pointer-events: all;
		opacity: 1;
	}

	sectionLeft, sectionRight {
		position:relative;
		display:inline-block;
		vertical-align: top;
		height: 100%;
		box-sizing:border-box;
	}
	page[idx="front"] sectionLeft {
		width:300px;
	}
	page[idx="front"] sectionRight {
		width:calc(100% - 300px);
	}
	page[idx="summary"] sectionLeft {
		width:357px;
		padding: 14px 42px;
	}
	page[idx="summary"] sectionRight {
		width: calc(100% - 357px);
	}

	split {
		position:relative;
		display:inline-block;
		top:0px;
		left:0px;
		height:100%;
		width:297px;
		background: #2684c7;
	}
	splitElementsContainer {
		position:absolute;
		top: 0px;
		left: 0px;
		width:100%;
		height:100%;
		box-sizing:border-box;
		transition: padding 0.8s ease-out;
	}
	splitElementsContainer[idx="unselected"] {
		z-index:2;
	}
	splitElementContainer {
		position:relative;
		display:block;
		box-sizing:border-box;
		height: 116px;
		cursor:pointer;
		transition: height 0.8s ease-out, border 0.8s cubic-bezier(1, 0, 0.5, 0), box-shadow 1.2s cubic-bezier(0.4, 0, 1, 1);
		border-top: 1px solid #1d5399;
		border-right: 1px solid #1d5399;
		background: #2586c7;
		color: #fff;
		box-shadow: 1px 0px 16px #00000088;
	}
	splitElementContainer:first-child {
		border-top: none;
	}
	splitElementContainer.visited {
		opacity: 0;
		box-shadow: none;
	}
	splitElementContainer:not(.visited) + splitElementContainer.visited {
		border-top-color: transparent;
	}
	splitElement {
		position:relative;
		display: block;
		width:100%;
		height:100%;
		font-size: 33px;
		background:inherit;
		z-index: 2;
	}
	splitElement:hover {
		background: #216eb2;
	}
	splitCenterer {
		position: absolute;
		top:50%;
		left:33px;
		width: 100%;
		height: 100%;
		transform:translate(0px, -50%);
		background:url('../assets/textWhiteStructure.svg');
		background-position:left center;
		background-repeat:no-repeat;
	}
	splitElementContainer[idx="process"] splitCenterer {
		background-image: url('../assets/textWhiteProcess.svg');
	}
	splitElementContainer[idx="language"] splitCenterer {
		background-image: url('../assets/textWhiteLanguage.svg');
	}
	splitElementContainer[idx="identity"] splitCenterer {
		background-image: url('../assets/textWhiteIdentity.svg');
	}
	splitElementContainer[idx="technology"] splitCenterer {
		background-image: url('../assets/textWhiteTechnology.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="structure"] splitCenterer {
		background-image: url('../assets/textGrayStructure.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="process"] splitCenterer {
		background-image: url('../assets/textGrayProcess.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="language"] splitCenterer {
		background-image: url('../assets/textGrayLanguage.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="identity"] splitCenterer {
		background-image: url('../assets/textGrayIdentity.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="technology"] splitCenterer {
		background-image: url('../assets/textGrayTechnology.svg');
	}

	splitElementsContainer[idx="selected"] splitElementContainer[idx="structure"].showing splitCenterer {
		background-image: url('../assets/textSelectedStructure.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="process"].showing splitCenterer {
		background-image: url('../assets/textSelectedProcess.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="language"].showing splitCenterer {
		background-image: url('../assets/textSelectedLanguage.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="identity"].showing splitCenterer {
		background-image: url('../assets/textSelectedIdentity.svg');
	}
	splitElementsContainer[idx="selected"] splitElementContainer[idx="technology"].showing splitCenterer {
		background-image: url('../assets/textSelectedTechnology.svg');
	}

	splitElementsContainer[idx='selected'] splitElementContainer {
		transition:none;
	}
	splitElementsContainer[idx='selected'] splitElementContainer.showing + splitElementContainer {
		border-top-color: #1d5399;
	}
	splitElementsContainer[idx='selected'] splitElementContainer:not(.showing) {
		background:#f6f6f7;
		border-right:1px solid #1d5399;
		border-top-color: #cbcbcb;
		box-shadow: none;
	}
	splitElementsContainer[idx='selected'] splitElementContainer.showing {
		border-right:none;
		background: #fff;
		box-shadow: none;
		border-top-color: #1d5399;
	}
	descriptionContent {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: block;
		padding: 60px 80px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease-out;
	}
	descriptionContentContainer {
		display:block;
		box-sizing:border-box;
	}
	btnContainer {
		display: block;
		text-align: center;
		margin-top: 42px;
	}
	btn[idx="frontNext"] {
		height: 65px;
		line-height: 65px;
	}

	slideBtnContainer {
		display:inline-block;
		width:50%;
		vertical-align:top;
	}
	slideBtn {
		position:relative;
		display:block;
		height:60px;
		line-height:60px;
		color: #fff;
		font-size:16px;
		background:#6b2326;
	}
	slideBtn:not(.selected) {
		background:#a83f43;
		box-shadow: 0 0 7px #00000088;
		cursor:pointer;
	}
	slideBtn:not(.selected) + selectedDescription {
		opacity: 0;
	}
	selectedDescription {
		margin-top: 48px;
		display:block;
		position: relative;
		font-weight: 700;
		font-size: 14px;
		color: #6b2426;
	}
	selectedDescription::before {
		content:'';
		position:absolute;
		bottom: calc(100% + 0px);
		left: 50%;
		width:24px;
		height:24px;
		background: url(../assets/blueArrow.svg) center no-repeat;
		background-size: 100%;
		transform:translate(-50%, -50%);
	}

	splitDescriptionTitle {
		display: block;
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 12px;
	}

	page[idx="front"][showingIdx="front"] splitElementsContainer{
		pointer-events:none;  
	}
	page[idx="front"][showingIdx="frontExplain"] splitElementsContainer[idx="unselected"]{
		background:#2685c7;
	}
	page[idx="front"] descriptionContent {
		line-height: 22px;
		font-size:13px;
	}
	page[idx="front"] descriptionContent[idx="front"],
	page[idx="front"] descriptionContent[idx="frontExplain"] {
		padding: 100px 80px; 
		font-size: 16px;
		line-height: 29px;
	}
	page[idx="front"][showingIdx="front"] splitElementsContainer {
		background: #2586c7;
		padding-top: 90px;
	}
	page[idx="front"][showingIdx="front"] splitElementContainer {
		height:80px;
		border-top: 1px solid rgb(38, 132, 199);
		border-right: 1px solid rgb(38, 132, 199);
		box-shadow: none;
	}
	page[showingIdx="front"] descriptionContent[idx="front"],
	page[showingIdx="frontExplain"] descriptionContent[idx="frontExplain"],
	page[showingIdx="structure"] descriptionContent[idx="structure"],
	page[showingIdx="process"] descriptionContent[idx="process"],
	page[showingIdx="language"] descriptionContent[idx="language"],
	page[showingIdx="identity"] descriptionContent[idx="identity"],
	page[showingIdx="technology"] descriptionContent[idx="technology"] {
		opacity: 1;
		pointer-events: all;
	}
	page[idx="front"].showingSummaryButton btn[idx="summary"] {
		opacity:1;
		pointer-events:all;
	}
	btn[idx="summary"] {
		position: absolute;
		top: calc(100% - 55px);
		left: calc(100% - 150px);
		opacity:0;
		transform: translate(-50%, -50%);
		transition: opacity 0.3s;
		pointer-events: none;
	}

	reset {
		position: absolute;
		top: 24px;
		left: calc(100% - 24px);
		width: 24px;
		height: 24px;
		background: url('../assets/resetIcon.svg');
		background-position: center;
		background-repeat: no-repeat;
		transform: translate(-50%, -50%);
		cursor: pointer;
		opacity: 0.8;
		z-index: 4;
	}

	reset:hover {
		opacity: 1;
	}

	finalDescription {
		padding: 124px 76px;
		display: block;
		font-size: 14px;
		line-height: 24px;
	}

	splitFinalElement {
		display:block;
	}
	splitFinalTitle,
	splitFinalRange {
		display:block;
		width:320px;
		height: 40px;
		background: url('../assets/rangeArrow.svg');
		background-repeat: no-repeat;
		background-position: center;
	}
	splitFinalTitle {
		margin-top: 38px;
		background-position-x: 94px;
	}
	splitFinalRange {
		height:24px;
	}
	splitFinalElement[idx="structure"] splitFinalTitle { 
		background-image: url('../assets/textDarkStructure.svg');
	}
	splitFinalElement[idx="process"] splitFinalTitle {
		background-image: url('../assets/textDarkProcess.svg');
	}
	splitFinalElement[idx="language"] splitFinalTitle {
		background-image: url('../assets/textDarkLanguage.svg');
	}
	splitFinalElement[idx="identity"] splitFinalTitle {
		background-image: url('../assets/textDarkIdentity.svg');
	}
	splitFinalElement[idx="technology"] splitFinalTitle {
		background-image: url('../assets/textDarkTechnology.svg');
	}
}