@media (max-width: 900px) {
    .form-details{
        display: block !important;
        width: 95% !important;
        margin: auto !important;
        margin-top: 20px !important;
    }
    #container{
        width: 95%;
    }
    .form-image{
        display: none !important;
    }
}



#container{
	box-shadow: 0 15px 30px 1px grey;
	background: rgba(255, 255, 255, 0.90);
	text-align: center;
	border-radius: 5px;
	overflow: scroll;
	margin: 5em auto;
    height: 520px;
	width: 75%;

}

#container2{
	box-shadow: 0 15px 30px 1px grey;
	background: rgba(255, 255, 255, 0.90);
	text-align: center;
	border-radius: 5px;
	/* overflow: scroll; */
	margin: 5em auto;
    /* height: 520px; */
	/* width: 75%; */

}



.form-details {
	position: relative;
	text-align: left;
	overflow: hidden;
	padding: 10px;
	/* height: 100%; */
	float: right;
	width: 40%;
    margin: 50px;
}

#container .form-details h1{
	font-family: 'Bebas Neue', cursive;
	display: inline-block;
	position: relative;
	font-size: 30px;
	color: #344055;
	margin: 0;
	
}

#container .form-details h1:before{
	position: absolute;
	content: '';
	right: 0%; 
	top: 0%;
	transform: translate(25px, -15px);
	font-family: 'Bree Serif', serif;
	display: inline-block;
	background: #ffe6e6;
	border-radius: 5px;
	font-size: 14px;
	padding: 5px;
	color: white;
	margin: 0;
	animation: chan-sh 6s ease infinite;

}


.hint-star {
	display: inline-block;
	margin-left: 0.5em;
	color: gold;
	width: 50%;
}
#container .form-details > p {
	text-align: center;
	font-size: 18px;
    padding:10px;
	color: #7d7d7d;
	
}
.form-image {
	transition: all 0.3s ease-out;
	display: inline-block;
	position: relative;
	overflow: hidden;
	min-height:100%;
	float: left;
	width: 45%;
	display: inline-block;
}
.materialert.success{
    background-color: #43a047;
    color: #fff;
}
.materialert{
    position: relative;
    min-width: 150px;
    padding: 13px;
    margin-bottom: 15px;
	margin: auto;
    margin-top: 15px;
	text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.1s linear;
    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.materialert .material-icons{
    margin-right: 10px;
}
.materialert .close-alert{
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    background: 0 0;
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    filter: alpha(opacity=40);
    margin-bottom: -5px;
    position: absolute;
    top: 16px;
    right: 5px;
}

#container img {width: 100%;height: 100%;}

.info {
    background: #325172;
    font-family: 'Bree Serif', serif;
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    font-size: 105%;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    padding:20px;
    text-align:center;
    left: 0;
    top: 0;
}

.info2 {
    background: #325172;
    font-family: 'Bree Serif', serif;
    
    font-size: 105%;
    cursor: no-drop;
    color: #FFF;
    margin-bottom: 0 !important;
}

.info h2 {text-align: center}
.form-image .info{transform: translateX(0);}

.info ul li{transition: 0.3s ease;}
.info ul li{transform: translateX(50px) scale(1.3);}

.form-image img {transition: all 0.3s ease-out;}
.form-image img {transform: scale(1.2, 1.2);}