/* 414px x 896px */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	font-family: 'Roboto', sans-serif;
	color: #2B4E84;
}

body {
	width: 100%;
	height: 100%;
	padding-top: 14vh;
	padding-bottom: 14vh;
	background: linear-gradient(153deg, rgba(83,183,225,1) 0%, rgba(75,139,181,1) 15%, rgba(60,70,118,1) 34%, rgba(92,52,80,1) 57%, rgba(114,44,51,1) 76%, rgba(172,49,55,1) 92%, rgba(172,49,55,1) 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.main_container_cls {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	border-radius: 30px; 
	box-shadow: 0px 20px 35px 2px rgba(0, 0, 0, 0.14);
	padding: 25px;
	overflow-wrap: break-word;
	text-align: center;
}

.logo_cnt_cls {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 8px;
	position: relative;	
}

.outer {
    height: 35vw;
    width: 35vw;
	justify-content: center;
    position: relative;	
}

.circle {
    display: block;
    height: 35vw;
    max-width: 35vw;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: 9;
}

.logo_img_cls {
	border-radius: 50%;
	box-shadow: 0px 6px 20px 2px rgba(0, 0, 0, 0.14);
	display: block;
    height: 35vw;
    width: 35vw;
    border-radius: 100%;
    position: absolute;
}

.title_text_cls h1 {
	font-size: 35px;
	font-weight: 900;
	margin-bottom: 4px;
}

.title_text_cls h2 {
	font-size: 25px;
}

.title_text_cls h3 {
	font-size: 20px;
	margin-top: 30px;
}

.form_container_cls {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 80%;
	padding: 20px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	display: block;
}

input:focus, label:focus {
	outline: none;
}

#form_inp_box_id {
	margin-top: 10px;
	border-bottom: 4px solid #2B4E84;
	height: 50px;
	width: 100%;
	background-color: #F2F2F2;
	font-size: 18px;
	font-weight: 300;
	padding-left: 20px;
}

input[type="submit"] {	
	margin-top: 60px;
	margin-bottom: 20px;
	background-color: #2B4E84;
	color: #FFF;
	border: none;
	border-radius: 20px;
	height: 60px;
	font-size: 20px;
	font-weight: 700; 
	width: 70%;
	cursor: pointer;
	transition-duration: 0.2s;
	box-shadow: 2px 2px 4px grey;
}

input[type="submit"]:hover {
	background-color: #1E375C;
	box-shadow: 0 2px 6px 0 rgba(0,0,0,0.24), 0 7px 10px 0 rgba(0,0,0,0.19);
}

input[type="submit"]:active {
	transform: translateY(4px);
}



/* 768px x 1024px */
	
@media (min-width: 768px) {

body {
	padding-top: 14vh;
	padding-bottom: 14vh;
}

.main_container_cls {
	width: 70%;
}

.outer {
    height: 24vw;
    width: 24vw;
}

.circle {
    height: 24vw;
    width: 24w;
}

.logo_img_cls {
    height: 24vw;
    width: 24vw;
}

#form_inp_box_id {
	width: 70%;
}

input[type="submit"] {	
	width: 45%;
}

}

/* 1280px x 720px */

@media (min-width: 1280px) {

body {
	padding-top: 5vh;
	padding-bottom: 5vh;
}

.main_container_cls {
	width: 40%;
}

.outer {
    height: 15vw;
    width: 15vw;
}

.circle {
    height: 15vw;
    width: 15w;
}

.logo_img_cls {
    height: 15vw;
    width: 15vw;
}

#form_inp_box_id {
	width: 80%;
}

input[type="submit"] {	
	width: 60%;
}

}

/* 1366px x 768px */

@media (min-width: 1366px) {

body {
	padding-top: 8vh;
	padding-bottom: 8vh;
}

.main_container_cls {
	width: 40%;
}

.outer {
    height: 14vw;
    width: 14vw;
}

.circle {
    height: 14vw;
    width: 14w;
}

.logo_img_cls {
    height: 14vw;
    width: 14vw;
}
	
#form_inp_box_id {
	width: 80%;
}

input[type="submit"] {	
	width: 60%;
}

}

/* 1440px x 900px */

@media (min-width: 1440px) {

body {
	padding-top: 14vh;
	padding-bottom: 14vh;
}

.main_container_cls {
	width: 40%;
}

.outer {
    height: 14vw;
    width: 14vw;
}

.circle {
    height: 14vw;
    width: 14w;
}

.logo_img_cls {
    height: 14vw;
    width: 14vw;
}

#form_inp_box_id {
	width: 70%;
}

input[type="submit"] {	
	width: 50%;
}

}

/* 1920px x 1080px */

@media (min-width: 1920px) {

body {
	padding-top: 12vh;
	padding-bottom: 12vh;
}

.main_container_cls {
	width: 35%;
	height: 840px;
	padding-top: 60px;
}

.outer {
    height: 11vw;
    width: 11vw;
}

.circle {
    height: 11vw;
    width: 11w;
}

.logo_img_cls {
    height: 11vw;
    width: 11vw;
}

.title_text_cls h3 {
	margin-top: 40px;
}

.form_container_cls {
	margin-top: 40px;
}

#form_inp_box_id {
	width: 70%;
}

input[type="submit"] {	
	margin-top: 80px;
	width: 40%;
}

}