body { 
    	margin:0; 
    	padding:0; 
		font-family: 'BioRhyme', serif;
    	font-weight: 400;
    	font-size:17px;
    	letter-spacing: 0.02em;
		overflow-x: hidden;
		color: #333399;
		background-color: #E4E7EA;

    }

		.firstContainer {
			width:100%;
    		min-height:100vh;
    		background: #E4E7EA;
    		position:absolute;
		}

		.secondContainer 
		{
			min-height:1300px;
			background: #F16652;
			position:absolute;
			right:0px;
			transition: width 0.5s;
		}

		.firstActive .secondContainer {
			width: 80px;
			cursor: pointer;
		}
	
		.secondActive .secondContainer {
			width: calc(100% - 80px);
		}


		.second {
			color:blue;
		}




		.firstContainer .vertical {
		   -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
			color:#333399;
			padding:30px 30px 30px 30px; 
			white-space: nowrap;
			position: fixed;
			transition: left 0.4s  ease 0.2s;
			top:90px;
		}



		.secondContainer .vertical {
   -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
			color:E4E7EA;
			top:110px;
			left: calc(100% - 122px);
			padding:0; 
			white-space: nowrap;
			position: fixed;
			transition: left 0.4s  ease 0.1s;

		}

		.firstActive .firstContainer .vertical {
			left:-150px;
		}
		

		.secondActive .secondContainer .vertical {
			left:100%;
		}
		
		.secondActive .firstContainer .vertical {
			left:-90px;
		}



		.main_text {
			
			margin:0 20% 0 20%;	
			background: #E4E7EA;		

		}

		.firstActive .gallery {
			display:none;
			opacity:0;
		}

		.gallery{
			margin:0 10%;
			transition: opacity 0.5s ease 0.5s;
			color: #E4E7EA;

		}


		a {
			color:#F16652;
			text-decoration: none;
		}

		.secondContainer a {
			color:#ffcaca;
			text-decoration: none;
		}

		.secondContainer a:hover {
			color:#ffcaca;
			text-decoration: none;
		}

		h1{
			font-size: 22px;
			margin:200px 0 150px 0;
			font-weight: normal;
			    	letter-spacing: 0.04em;
		}

		h3{
			font-size: 14px;
			font-weight: bold;
			margin:40px 0 0 0;
			letter-spacing: 0.05em;
		}
		
		p{
			margin:10px 0 110px 5%;
			line-height: 150%;
			font-size: 26px;
			    	letter-spacing: 0.02em;

		}

		i{

			border-bottom:1px solid #ffebeb;
			padding:0 0 1px 0;
		}

		li{
			margin:10px 0 0 5%	;

		}
		ul {
			margin:20px 0 20px 0;
			padding: 0;
			list-style: none;
		}
		


.container {
  margin-top:2em;
  position:relative;
  width:100%;
  text-align: center;
}

img {
 
    opacity: 100;
    margin:20px;
    width:40%;
  transition: opacity 0.7s ease-in;
}


 a{

	
		padding:0 0 3px 0;

}


a:hover{

	border-bottom: 1px solid #E4E7EA;
			padding:0 0 3px 0;
	color:#ff9d9c;

	  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}



	.tooltip{
   			display: inline;
    		position: relative;
    		border-bottom:1px solid #ffebeb;
			padding:0 0 1px 0;
    		    			

		}
		
		.tooltip:hover:after{
    		background: #E4E7EA;
    		border:1px solid #F16652;
    		border-radius: 3px;
    		top: 45px;
    		color: #F16652;
    		content: attr(title);
    		left: -40px;
    		padding: 15px 15px;
    		position: absolute;
    		z-index: 98;
    		width: 120px;
    		font-size:12px;
    		font-style: italic;
    		text-align: center;
    		line-height: 100%;
   		}
		
		.tooltip:hover:before{
    		border:1px solid #F16652;
    		border-width: 1px 0px 20px 1px;
    		top: 25px;
    		content: "";
    		left: 50%;
    		position: absolute;
    		z-index: 99;


		}




@media screen and (max-width: 924px) {    


			.secondContainer 
		{
			min-height:1170px;
			background: #F16652;
			position:absolute;
			right:0px;
			transition: width 0.5s;
		}

			.main_text {
			
			margin:0 20% 0 10%;	
			background: #E4E7EA;		

		}

		h1 {

			font-size:18px;
			margin:100px 0 30px 5%;
			width: 70%;
		}

h1 a {font-size: 12px; line-height: 200%;}

p {
			
			font-size:18px;
		}

	
	.firstActive .secondContainer {
			width: 60px;
			cursor: pointer;
		}


	.firstActive .firstContainer .vertical {
			left:-150px;
		}
		

	.secondActive .secondContainer .vertical {
			left:100%;
		}
		
	.secondActive .firstContainer .vertical {
			left:-90px;
		}



	.firstContainer .vertical {
		   -webkit-transform: rotate(90deg);   
           -moz-transform: rotate(90deg);
           -ms-transform: rotate(90deg);
           -o-transform: rotate(90deg);
           
    transform: rotate(90deg);
			color:#333399;
			padding:30px 30px 30px 30px; 
			white-space: nowrap;
			position: fixed;
			transition: left 0.4s  ease 0.2s;
			top:90px;
		}



		.secondContainer .vertical {
    -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
			color:E4E7EA;
			top:110px;
			left: calc(100% - 100px);
			padding:0; 
			white-space: nowrap;
			position: fixed;
			transition: left 0.4s  ease 0.1s;

		}

				.secondActive .secondContainer {
			width: calc(100% - 50px);
		}

		li{
			font-size: 14px;
			width: 60%;
			line-height: 140%;
		}

  }