body {
	background-color: #f1f1f1;

	font-weight: lighter;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	overflow-y: auto;
	margin-top: 32px;

}

body, html{
   height: calc(100% - 32px);
   padding: 0;
}

/*LEFT SIDE*/
	.left_side {
		position: fixed;
		height: 100%;
		width: 45%;

		background-color: #543756;
		
	}

	.left_side:before {
		background-image: url('../images/posters/3/sp-end.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		-ms-background-size: cover;
	    -o-background-size: cover;
	    -moz-background-size: cover;
	    -webkit-background-size: cover;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		opacity: 0.2;
	}

	.sitename {
		font-weight: 600;
		font-size: 30px;
	}

	.sitedesc {
		margin-top: -10px;
		text-align: center;
	}

	.left_label {
		display: inline-block;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		top: 40%;
		position: relative;

		color: white;
	}

	/*TOGGLE*/

	.left_toggle {
		cursor: pointer;
		color: white;
		/*padding: 5px;*/
		display: inline-block;
		position: absolute;
		top: 10px;
		text-align: center;
		border: 2px solid rgba(255,255,255,0.6);
	}

	.left_toggle:hover label div {
		background-color: rgba(255,255,255,0.9);
	}

	.left_toggle label div {
		background-color: rgba(255,255,255,0.6);
		height: 3px;
		margin: 2px auto;
		width: 20px;
		position: relative;
		border-radius: 1px;
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		transition: all .2s ease-out;
	}

	.left_toggle label {
		margin-bottom: 0;
		cursor: pointer;
		width: 100%;
		display: block;
		height: 30px;
		padding-top: 5px;
	}

	#toggle {
		display: none;

	}
	#toggle:checked + label {
		/*border: 2px solid rgba(255,255,255,0.6);
		border-radius: 50%;*/
		/*padding: 4px;*/
		top: 0px;
		left: 0px;
		position: relative;
		-webkit-transition: border .2s ease-out;
		-moz-transition: border .2s ease-out;
		-ms-transition: border .2s ease-out;
		-o-transition: border .2s ease-out;
		transition: border .2s ease-out;
	}
	#toggle:checked + label div:nth-of-type(2) {
		transform: rotate(90deg);
		width: 15px;
		/*left: 5px;*/
		top: 2px;
	}
	#toggle:checked + label div:nth-of-type(1) {
		transform: rotate(150deg);
		top: 9px;
		left: 7px;
		width: 15px;
	}
	#toggle:checked + label div:nth-of-type(3) {
		transform: rotate(30deg);
		top: -1px;
		left: -7px;
		width: 15px;
	}

	.site_map {
		height: 0;
		overflow: hidden;
		-webkit-transition: height .2s cubic-bezier(.91,.8,.54,1.39);
		-moz-transition: height .2s cubic-bezier(.91,.8,.54,1.39);
		-ms-transition: height .2s cubic-bezier(.91,.8,.54,1.39);
		-o-transition: height .2s cubic-bezier(.91,.8,.54,1.39);
		transition: height .2s cubic-bezier(.91,.8,.54,1.39);
		/*margin-top: 20px;*/
		font-size: 20px;
		padding: 0 3px;
	}

	#toggle:checked ~ .site_map {
		height: 250px;
	}

	.site_map a {
		text-decoration: none;
		color: white;
		text-align: left;
	}

	.site_map a:hover {
		text-decoration: none;
		color:rgb(147, 253, 239);
	}

	.site_map a small {
		font-size: 12px;
		font-style: italic;
	}

/*RIGHT SIDE*/
	.right_side {
		width: 55%;
		/*float: right;*/
		height: 100%;

		position: fixed;
		right: 0;
	/*}

	.temp {*/
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4a395d+0,543756+45,5f3559+57,6d345d+100 */
		background: #4a395d; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #4a395d 0%, #543756 45%, #5f3559 57%, #6d345d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4a395d), color-stop(45%,#543756), color-stop(57%,#5f3559), color-stop(100%,#6d345d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  #4a395d 0%,#543756 45%,#5f3559 57%,#6d345d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg,  #4a395d 0%,#543756 45%,#5f3559 57%,#6d345d 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg,  #4a395d 0%,#543756 45%,#5f3559 57%,#6d345d 100%); /* IE10+ */
		background: linear-gradient(135deg,  #4a395d 0%,#543756 45%,#5f3559 57%,#6d345d 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a395d', endColorstr='#6d345d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
	
	.right_scroll {
		overflow: auto;
		height: 100%;
	}

	.right_side section {
		height: 100%;
		padding: 20% 100px;

		color: white;
	}
	
	.right_side section h1 {
		padding-left: 40px;

		color: rgb(147, 253, 239);
	}

	.sub_info {
		margin-top: -5px;
		/*text-decoration: underline;*/
		font-size: 25px;
		font-weight: 500;
		padding-left: 40px;
	}

	.right_side section p {
		margin-top: 20px;
		width: 300px;
		  text-align: justify;
	}
	
	.right_side section form {
		margin-top: 20px;
		width: 500px;
		margin-left: -30px;
	}

	.right_side section form input, .right_side section form textarea {
		display: block;
		padding: 15px;
		border: none;
		margin: 5px 0;
		resize: none;
		outline: none;
		width: 100%;
		-webkit-transition: background-color .5s ease;
		-moz-transition: background-color .5s ease;
		-ms-transition: background-color .5s ease;
		-o-transition: background-color .5s ease;
		transition: background-color .5s ease;
		/*background-color: rgb(231, 234, 240);*/

		border: 1px solid rgb(147, 253, 239);
		background-color: transparent;
	}

	.right_side section form input:focus, .right_side section form textarea:focus {
		/*background-color: white;*/

		background-color: rgba(0,0,0,0.2);
	}
	
	.right_side section form input::-webkit-input-placeholder, .right_side section form textarea::-webkit-input-placeholder {
		color:rgba(175, 195, 239, 0.4);
	}
	.right_side section form input::-moz-placeholder, .right_side section form textarea::-moz-placeholder {
		color:rgba(175, 195, 239, 0.4);
	}
	.right_side section form input:-ms-input-placeholder, .right_side section form textarea:-ms-input-placeholder {
		color:rgba(175, 195, 239, 0.4);
	}

	.right_side section form textarea {
		height: 100%;
	}

	.right_side section form .form_left {
		width: 39%;
		float: left;
		display: inline-block;
		padding-right: 5px;
	}
		
	.right_side section form .form_right {
		width: 60%;
		display: inline-block;
		/*height: 106px;*/

		height: 109px;
	}

	.right_side section form button {
		margin-top: 5px;
		float: right;
		padding: 15px 20px;
		border: none;
		margin-bottom: 10px;
		background-color: rgb(175, 195, 239);
		margin-right: 5px;
		outline: none;

		color: #5f3559;
	}

	.right_side section form button:hover {
		background-color: rgb(160, 180, 224);
		-webkit-transition: background-color .5s ease;
		-moz-transition: background-color .5s ease;
		-ms-transition: background-color .5s ease;
		-o-transition: background-color .5s ease;
		transition: background-color .5s ease;
	}

	.right_side section form button:active {
		background-color: rgb(152, 163, 187);
	}

	.right_side section .direction {
		border:1px solid rgb(175, 195, 239);
		color:rgb(175, 195, 239);
		height: 40px;
		width: 40px;
		margin-top: 30px;
		text-align: center;
		padding: 4px;
		font-size: 20px;
		cursor: pointer;
	}

	.right_side section .direction:hover {
		background-color: rgb(195, 215, 255);
	}

/*PAGE DOTS*/
	.pag_dots {
		position: fixed;
		height: 100%;
		width: 20px;
		right: 10px;
		top: 40%;
	}

	.pag_dots span {
		display: block;
		height: 10px;
		width: 10px;
		border-radius: 50%;
		border:1px solid white;
		margin-bottom: 10px;
	}

	.pag_dots .pag_dots_active {
		background-color: white;
	}
		
@media screen and (max-width: 1080px) {
	.left_side {
		width: 40%;
	}

	.right_side {
		width: 60%;
	}
}

@media screen and (max-width: 990px) {
	.right_side section p {
		width: 90%;
	}

	.left_side {
		width: 35%;
	}

	.right_side {
		width: 65%;
	}

	.left_toggle {
		display: none;
	}
}

@media screen and (max-width: 920px) {
	.left_label {
		left: -40px;
	}

	.left_side {
		width: 55px;
	}

	.right_side {
		width: calc(100% - 55px);
	}
}

@media screen and (max-width: 665px) {
	.right_side section {
		padding: 20% 75px;
	}

	.right_side section form {
		width: 100%;
		margin-left: 0;
	}

	.right_side section form .form_left, .right_side section form .form_right {
		display: block;
		width: 100%;
		clear: both;
		padding: 0;
	}
}

@media screen and (max-width: 560px) {
	.right_side section {
		padding: 20% 40px;
	}
}

@media screen and (max-width: 500px) {
	.left_side {
		display: none;
	}

	.right_side {
		width: 100%;
	}

	.direction {
		display: none;
	}
}