/*html, body, */

@media (min-width: 768px){
.reset-layout{
	height: 350px;
	}
}

@media (min-width: 575px) and (max-width: 767px){
	.reset-layout{
		height: 325px;
	}
}
@media (min-width: 470px) and (max-width: 574px){
	.reset-layout{
		height: 308px;
		overflow: hidden;
		}
}

@media (max-width: 469px){
	.reset-layout{
		height: 247px;
		overflow: hidden;
	}

	.profile {
		height: 200px!important;
	}
}

.container-splitlayout {
	position: relative;
	width: 100%;
	/*height: 325px;*/
}
.splitlayout {
	position: relative;
	overflow-x: hidden;
	min-height: 100%;
	width: 100%;
}
/* Intro sides */
.side {
	position: absolute;
	top: 0;
	z-index: 100;
	width: 50%;
	height: 100%;
	text-align: center;
	-webkit-backface-visibility: hidden;
}

.open-left .side,
.open-right .side {
	cursor: default;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 499;
	visibility: hidden;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.side-left .overlay {
	background: rgba(0,0,0,0.7);
}

.side-right .overlay {
	background: rgba(0,0,0,0.3);
}

.side-left {
	left: 0;
	/*background: #494383;*/
	background: #28326f;
	color: #fff;
	outline: 1px solid #FFF; /* avoid gap */
	/*background-image: linear-gradient(#D0D0F4 0%, #DCD0DC 51%, #F1D0B2 75%);*/
}

.side-right {
	right: 0;
	/*background: #1B1464;*/
	background: #28326f;
	color: #fff;
	outline: 1px solid #FFF; /* avoid gap */
	/*background-image: linear-gradient(#D0D0F4 0%, #DCD0DC 51%, #F1D0B2 75%);*/
	/*border-left: 1px solid #fff;*/
}

.verde-split .side-left {
	background: #034523;
	outline: 1px solid #034523; /* avoid gap */
}

.verde-split .side-right {
	background: #009242;
	outline: 1px solid #009242; /* avoid gap */
}


/* Intro content, profile image and name, back button */
/*.intro-content {
	position: absolute;
	top: 30%;
	left: 50%;
	padding: 0 1em;
	width: 50%;
	cursor: pointer;
	-webkit-transform: translateY(-30%) translateX(-50%);
	transform: translateY(-30%) translateX(-50%);
}*/
.intro-content {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 1em;
	width: 100%;
	cursor: pointer;
	-webkit-transform: translateY(0%) translateX(0%);
	transform: translateY(0%) translateX(0%);
}

.open-right .intro-content, .open-left .intro-content{ width: 75%;}
.profile {
	margin: 14% auto 0;
    width: 240px;
    height: 240px;
}

@media (min-width: 801px) and (max-width: 900px){
	.profile {
		margin: 22% auto 0!important;
	}
}
	@media (min-width: 901px) and (max-width: 1200px){
	.profile {
		margin: 16% auto 0!important;
	}
}
	


.open-right .profile img{ margin-top: 10px; }
.profile img {
	max-width: 100%;
	
}

.intro-content h2 > span {
	display: block;
}

.intro-content h2 > span:first-child {
	font-weight: 300;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.verde-split .intro-content h2 > span:first-child {
	font-size: .8em;
	margin-top: 1em;
}

.intro-content h2 > span:nth-child(2) {
	position: relative;
	margin-top: 0.5em;
	padding: 0.8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.4em;
}

.intro-content h2 > span:nth-child(2):before {
	position: absolute;
	top: 0;
	left: 25%;
	width: 50%;
	height: 2px;
	background: #fff;
	content: '';
}

.side-right .intro-content h2 > span:nth-child(2):before {
	background: #47a3da;
}

.back {
	position: absolute;
	top: .5em;
	z-index: 500;
	display: block;
	visibility: hidden;
	width: 30px;
	height: 50px;
	border-radius: 50%;
	color: #60A8D0;
	text-align: center;
	font-size: 50px;
	line-height: 0;
	opacity: 0;
	pointer-events: none;
	font-weight: bold;
}
.verde-split .back{ color: #fff}

.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
	position: absolute;
}

.back-left {
	left: 12.5%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.back-right {
	right: 12.5%;
	-webkit-transform: translateX(50%);
	transform: translateX(50%);
	color: #60A8D0;
}

.open-right .back-left,
.open-left .back-right {
	visibility: visible;
	opacity: 1;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	pointer-events: auto;
}
.open-right .back-left:hover,
.open-left .back-right:hover{ text-decoration: none; }

.back:hover {
	color: #fff;
}

/* Pages */
.page {
	position: relative;
	top: 0;
	overflow: auto;
	min-height: 100%;
	width: 75%;
	height: auto;
	/*font-size: 1.4em;*/
	-webkit-backface-visibility: hidden;
}

.page-right {
	left: 25%;
	outline: 5px solid #60A8D0; /* avoid rounding gaps */
	/*background: #CF5634;*/
	background: #60A8D0;
	color: #fff;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.verde-split .page-right {
	outline: 5px solid #034523; /* avoid rounding gaps */
	background: #034523;
}

.splitlayout.open-right {
	background: #60A8D0;
}

.splitlayout.open-right h2 span {
	font-size: .9em;
	color: white;
}

.page-left {
	left: 0;
	outline: 5px solid #60A8D0; /* avoid rounding gaps */
	background: #60A8D0;
	color: #fff;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.verde-split .page-left {
	outline: 5px solid #009242; /* avoid rounding gaps */
	background: #009242;
}


.splitlayout.open-left {
	background: #60A8D0;
}

/* Inner page content */
.page-inner {
	padding: 1em 5px;
}

.splitlayout.open-left h2 span {
	font-size: .9em;
	color: white;
}

.page-inner section {
	padding: 1em;
}

.page-inner h2 {
	margin: 0 0 1em 0;
	font-weight: 300;
	font-size: 1.5em;
}

.page-inner p {
	font-weight: 300;
	font-size: 1em;
	color: #fff !important;
}
.page-inner li{ font-weight: 300;}

/* All transitions */
.side,
.page {
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
}

.overlay {
	-webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
	transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
	-webkit-transition: -webkit-transform 0.6s, top 0.6s;
	transition: transform 0.6s, top 0.6s;
}
.intro-content h2{
	/*background: #5054A2;*/
	background: transparent;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    padding: .2em;
}

@media (min-width: 631px){
	.intro-content h2{    
		height: 19%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.open-left .intro-content h2,
.open-right .side-right .intro-content h2{
	background:transparent; color: #000;
}

.side-right .intro-content h2{
	/*background: #28326f;*/
	background: transparent;
}

.intro-content h2,
.back {
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

/* Open and close */

/* We need to set the position and overflow for the respective page scroll */
.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {
	position: absolute;
	overflow: hidden;
	height: 100%;
}

.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {
	position: relative;
	overflow: auto;
	height: auto;
}

.open-right .side-left .overlay,
.open-left .side-right .overlay {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
}

/* Right side open */
.open-right .side-left {
	-webkit-transform: translateX(-60%);
	transform: translateX(-60%);
}

.open-right .side-right {
	z-index: 200;
	-webkit-transform: translateX(-150%);
	transform: translateX(-150%);
}

.close-right .side-right {
	z-index: 200;
}

.open-right .side-right .intro-content {
	-webkit-transform: translateY(0%) translateX(50%) scale(0.6);
	transform: translateY(0%) translateX(50%) scale(0.6);
	-moz-transform: translateY(0%) translateX(50%) scale(0.6);
}

.open-right .page-right {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* Left side open */
.open-left .side-right {
	-webkit-transform: translateX(60%);
	transform: translateX(60%);
}

.open-left .side-left {
	z-index: 200;
	-webkit-transform: translateX(150%);
	transform: translateX(150%);
}

.close-left .side-left {
	z-index: 200;
}

.open-left .side-left .intro-content {
	-webkit-transform: translateY(0%) translateX(-17%) scale(0.6);
	transform: translateY(0%) translateX(-17%) scale(0.6);
	-moz-transform: translateY(0%) translateX(-17%) scale(0.6);
}

.open-left .codropsheader {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
	transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-left .page-left {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* Media Queries */
@media screen and (max-width: 83em) {
	.intro-content { font-size: 60%; }
}

@media screen and (max-width: 49.4375em) {
	.open-right .side-right {
		-webkit-transform: translateX(-175%);
		transform: translateX(-175%);
	}

	.open-right .side-left {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.open-left .side-right {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	.open-left .side-left {
		-webkit-transform: translateX(175%);
		transform: translateX(175%);
	}

	.page {
		width: 100%;
	}

	.page-right {
		left: 0;
		padding-left: 15%;
	}

	.page-left {
		padding-right: 15%;
	}

	.intro-content {
		width: 100%;
	}

	.open-right .side-right .intro-content {
		display: none;
		top: 100%;
		-webkit-transform: translateY(-75%) translateX(67.5%) scale(0.4);
		transform: translateY(-75%) translateX(67.5%) scale(0.4);
	}

	.open-left .side-left .intro-content {
		display: none;
		top: 100%;
		-webkit-transform: translateY(-207px) translateX(-35.5%) scale(0.4);
		transform: translateY(-207px) translateX(-35.5%) scale(0.4);
	}

	.open-right .intro-content h2,
	.open-left .intro-content h2 {
		opacity: 0;
	}

	.back-left {
		left: 6.25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back-right {
		right: 6.25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

}

@media screen and (max-width: 42.5em) {
	.intro-content { font-size: 50%; 
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.page-inner section{padding: .1em; }


}

@media screen and (max-height: 41.125em) {
	.intro-content {
		-webkit-transform: translateY(0%) translateX(0%);
		transform: translateY(0%) translateX(0%);
	}


}

@media screen and (max-width: 39.375em) {
	.intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
	/*.profile{ margin: 23% auto 0 !important;}*/
	.back { font-size: 30px; }
	.intro-content h2 > span:first-child{ 
		/*display: flex; 
		align-items:center; */
		min-height: 60px; 
		display: flex;
		justify-content: center;
		align-items: center;}
	.profile{ width: 200px;}
}
@media (max-width: 800px){
    .profile{ margin: 20% auto 0; display: flex; justify-content: center; align-items: center; }
}