@media screen and (max-width:1200px){
	.layout.paddingBot{
		padding-bottom:180px;
	}
	.footer ul li{
		width:50%;
	}
	.footer{
		top:calc(100% - 160px);
	}
	.slide-box{
		max-height:560px;
		padding:0;
	}
	.slide section{
		padding:40px 290px 40px 40px;
	}
	.slide section figure{
		top:auto;
		bottom:0;
		right:20px;
		height:320px;
	}
	.login h2{
		padding:30px;
	}
	.login.bg h2{
		margin-bottom:30px;
	}
	.login form label, .login form .button{
		padding:10px 30px;
	}
	.login form .select{
		padding:10px 30px;
	}
	.profil-layout{
		padding:40px;
	}
	.profil-layout-form{
		padding:15px;
	}
	.table-scroll{
		padding:30px;
		overflow:auto;
	}
	.table{
		width:1200px;
		padding-right:40px;
	}
	.soal-edit{
		min-height:480px;
	}
	.soal-edit ul{
		position:absolute;
		top:0;
		left:-240px;
		height:100%;
		overflow:auto;
		z-index:50;
	}
	.soal-edit ul.active{
		left:0;
	}
	.icon-menu-side{
		display:block;
	}
	.soal-isi{
		padding:100px 20px 20px 20px;
		width:100%;
	}
	.soal-isi .login{
		position:relative;
		left:-20px;
		width:calc(100% + 40px);
	}
	.soal{
		padding:160px 40px 140px 40px;
	}
	.pertanyaan pre{
		left:0;
		width:100%;
		overflow:auto;
	}
}

@media screen and (max-width:900px){
	.header ul{
		font-size:0.95em;
		padding:10px;
	}
	.header ul li figure{
		height:50px;
		margin-right:0;
	}
	.slide section{
		height:420px;
		padding:40px;
	}
	.slide section a{
		font-size:1.2em;
		bottom:20px;
		left:40px;
	}
	.slide section figure{
		height:320px;
		opacity:0.5;
		z-index:-1;
	}
	.slide section p{
		background:rgba(255,255,255,0.7);
		border-radius:20px;
	}
	.slide section h2{
		font-size:3em;
	}
	.slide section h4{
		font-size:1.2em;
	}
	.slick-dots{
		display:none !important;
	}
	.login-layout{
		max-width:580px;
	}
	.login-box{
		width:100%;
	}
	.login.bg{
		display:none;
	}
	.login .button button, .login .button a{
		margin:20px auto;
	}
	.login .button button{
		margin-left:20px;
	}
	.profil-layout{
		font-size:0.9em;
		padding:30px;
	}
	.profil-layout-form{
		padding:5px;
	}
	.profil-test, .profil-score{
		position:relative;
		padding:20px;
	}
	.profil-test ul{
		width:240px;
		padding:20px 0;
	}
	.profil-test ul li{
		width:100%;
		text-align:left;
		padding:10px 10px 10px 30px;
	}
	.profil-test ul:before, .profil-test ul:after{
		display:none;
	}
	.profil-test ul li:before{
		content:"";
		position:absolute;
		top:12px;
		right:auto;
	}
	.profil-test-button{
		position:absolute;
		top:50%;
		right:40px;
		width:auto;
		transform:translateY(-50%);
	}
	.soal-edit-layout{
		padding:30px;
	}
}
@media screen and (max-width:700px){
	.javawebster-layout {
		padding: 0;
	}
	.layout {
		border-radius:0;
	}
	.layout.paddingBot {
		padding-bottom:0;
	}
	.footer {
		position: relative;
		top: 0;
		float:left;
		width:100%;
	}
	.footer ul {
		border-radius:0;
		padding:10px 0;
	}
	.footer ul li {
		width: 100%;
		padding: 5px 10px;
	}
	.footer ol {
		padding:10px 0;
		color: #fff;
		background: #333;
	}
	.footer ol li {
		width:100%;
		margin-right:0;
		padding:5px 10px;
	}
	.header ul {
		padding:0;
	}
	.header ul li.mMobile{
		float:left;
		width:50%;
		padding:10px;
	}
	.header ul li.mMobile a {
		width:100%;
		text-align:center;
	}
	.header ul li.image{
		padding-bottom:0;
	}
	.header ul li.user{
		position:absolute;
		top:0;
		right:0;
	}
	.header ul li.user a {
		font-size: 1.2em;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	.slide-box{
		max-height: none;
		padding:0;
	}
	.slide section{
		height:420px;
		padding:40px 10px;
	}
	.slide section h2 {
		font-size: 2em;
	}
	.slide section h4 {
		margin-bottom: 40px;
	}
	.slide section h4:after {
		bottom: -20px;
	}
	.slide section figure {
		height: 320px;
		opacity: 0.3;
	}
	.login-layout {
		width: calc(100% - 40px);
		max-width: 100%;
		margin: 160px 40px 20px 20px;
	}
	.login form label, .login form .button {
		padding: 10px 20px;
	}
	.login form.split2 label {
		width: 100%;
	}
	.login form label input {
		padding:5px 0;
	}
	.login form .select {
		width: 100%;
		padding: 10px 20px;
	}
	.profil-layout {
		padding:60px 20px 60px 20px;
	}
	
	.profil-button {
		position: relative;
		width: 100%;
		height: auto;
		float: left;
	}
	.profil-button p {
		position: relative;
		margin-top: 40px;
	}
	.profil ul li {
		border-bottom:1px dotted #aaa;
	}
	.profil ul li span {
		width:100%;
		text-align:right;
	}
	.profil ul li span:nth-of-type(1) {
		width:120px;
		text-align:left;
		opacity:0.7;
	}
	.profil-score ul {
		width:100%;
		padding: 20px 20px 0 0;
	}
	.profil-score ul li span:nth-of-type(1) {
		width: 200px;
	}
	.profil-test-button {
		position: relative;
		top: 0;
		right: 0;
		width:100%;
		transform: none;
		padding: 0;
		text-align:right;
	}
	.login h2 {
		padding: 0 0 10px 0;
	}
	.login form label, .login form .button {
		padding: 10px 0;
	}
	.login form .button {
		margin-top:20px;
	}
	.login form .select {
		padding: 10px 0;
	}
	.login .button a.inline {
		margin-right: 0;
	}
	.soal-isi {
		padding: 100px 10px 20px 10px;
	}
	.icon-menu-side {
		top: 10px;
		left: 10px;
	}
	.icon-menu-side span {
		display:none;
	}
	.soal-preview {
		top: 12px;
		right: 10px;
	}
	.soal-isi h2 span {
		display: block;
	}
	.soal-isi .login label.split2 {
		width: 100%;
		padding:10px 20px;
	}
	.login form label p {
		font-size: 0.9em;
	}
	.soal-isi .button .a-left {
		padding: 0;
		margin:0;
		width: 50%;
	}
}