@charset "utf-8";
body {

	margin: 0;
}

#top #back {
	width: 100%;
	min-width: 300px;
	max-width: 1000px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: -1;
	opacity: 0.8;
}
#top #title h1 {
    color: #FFFFFF;
    font-style: italic;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: xx-large;
    font-weight: lighter;
    background-color: #001DFF;
}
#wrapper #container section {

}
#wrapper #fixed-area {
    background-color: #414141;
    background-image: -webkit-linear-gradient(270deg,rgba(104,104,104,1.00) 0%,rgba(33,33,33,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(104,104,104,1.00) 0%,rgba(33,33,33,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(104,104,104,1.00) 0%,rgba(33,33,33,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(104,104,104,1.00) 0%,rgba(33,33,33,1.00) 100%);
}
#wrapper #container {
    font-family: "Times New Roman", Times, serif;
}

section .sct1 {
	position:relative;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	background-color: #DFDFDF;
}

section .sct1 p {
    margin-left: 11px;
	margin-right: 11px;

}
section .sct1 h2 {
    color: #0005FF;

}







#top {
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}


#wrapper{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

#fixed-area{
  position: -webkit-sticky;
  position: sticky;
  top:0;
	width: 50%;
	height: 100vh;
}

#container{
	width:50%;
}



@media screen and (max-width:768px){
#wrapper{
	display: block;
}
#fixed-area{
 	position:relative!important;
	width:100%;
	height: 100vh;
}
#container{
	width:100%;
}
}

section{
  height: 100vh;
  padding-left: 50px;
padding-right: 50px;
}

section:nth-of-type(2n){
  background:#eee;
}