@charset "UTF-8";


.wrap{
	width: 100%;
	max-width: 1200px;
	padding: 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
}
.wrap *{
	box-sizing: border-box;
}

main{
	width: 100%;
	max-width: 880px;
	padding: 30px 40px 30px 0;
	float: left;
}

aside {
    width: 300px;
    padding: 20px 0 0;
    float: right;
    margin-top: 10px;
}

aside > section{
	padding: 20px 0;
}

aside > section h2{
	padding: 10px 20px;
	background-color: #505ea7;
	color: #fff;
}
aside > section a:hover h2{
	background-color: #342550;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

aside > section h3{
	padding: 10px 20px;
	background-color: #7e8ac9;
	color: #fff;
}
aside > section a:hover h3{
	background-color: #505ea7;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

aside > section p{
	padding: 10px 20px;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
aside > section a:hover p{
	background-color: #e6eaff;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}


#side_col {
    width: 300px;
    float: right;
    margin-top: 10px;
}
aside > section img{
  width: 100%;
}

@media screen and (max-width: 950px){
.wrap{
	padding: 30px 20px;
}
main{
	padding: 0;
	float: none;
}
aside,#side_col {
    width: auto;
    float: none;
}
}