body {
	
}

header h3 {
	width: 95%;
	max-width: 450px;
	color: #ddd;
	text-align: center;
	margin: 20px auto 20px;
}

/* === the links from where you can choose between the Sign In and Register pop-up forms === */
#options {
	margin: 100px auto 100px;
	text-align: center;	
}

/* === the dark full screen background, which appears on form pop-up === */
#background-on-popup {
    z-index: 1;
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    background: #000000;
    top: 0px;
    left: 0px;
}

/* === The X-mark from the top-right corner of the pop-up form, from which you can close the box === */
div.close {
    background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    float: right;
    height: 16px;
    top: 20px;
    right: 10px;
    position: relative;
    width: 16px;
}

/* ==== Sign-In and Register Tabs ==== */
#sign-in-tab, #register-tab {
	color: #ddd;
	font-size: 25px;
	padding: 8px;
	display: inline-block;
	cursor: pointer;
}

/* ==== Wrapper of the forms ==== */
#sign-in-form {
	max-width: 447px;
min-width: 280px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
display: none;
left: 50%;
top: 20%;
margin-left: -240px;
border-radius: 4px;
z-index: 2;
}



.flagpart
{
 width:100%;
 background:#fff;
 height:167px;
 border-radius:5px;
 border:#4b9be4 10px solid;
}


ul.flaglist
{
 margin:40px 0 0 70px;
 padding:0px;
 list-style:none;
 width:100%;
 float:left;
}

ul.flaglist li
{
 margin:0px 10px 0 0;
 padding:0px;
 float:left;
 text-align:center;
}

ul.flaglist li a
{
 text-decoration:none;
 color:#414042;
}




@media (max-width: 380px) { /* takes care of the responsive behavior of the two column inputs */

.flagpart
{
 width:100%;
 background:#fff;
 height:334px;
 border-radius:5px;
}

ul.flaglist
{
 margin:30px 0 0 0px;
 padding:0px;
 list-style:none;
 width:100%;
 float:left;
}

ul.flaglist li
{
 text-align:center !important;
 width:100%;
 margin-bottom:5px;
}

#sign-in-form {
	max-width: 194px;
min-width:290px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
display: none;
left: 50%;
top: 20%;
margin-left: -240px;
border-radius: 4px;
z-index: 2;
}


	
	
}

@media (max-width: 480px) { /* takes care of the responsive behavior of the pop-up forms */
	#register-form, #sign-in-form {
		margin-left: 0;
		left: 0;
	}
}



/* ==== End of validation bubbles customization ==== */