@charset "utf-8";
/*@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Roboto+Slab);
@import url(//fonts.googleapis.com/css?family=Lato);
@import url(//fonts.googleapis.com/css?family=Lato:400,300italic);
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,300);
@import url(//fonts.googleapis.com/css?family=Lato:400,300italic,300,100italic,100);
*/
/* === 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 {
   
    cursor: pointer;
    float: right;
    height: 33px;
    top: 20px;
    right: 10px;
    position: relative;
    width: 44px;
}

/* ==== Sign-In and Register Tabs ==== */
#sign-in-tab, #register-tab {
	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;
 border-radius:5px;
 border:#bf0446 10px solid;
}


.flagpart h2
{
 font-size:20px;
  font-family: 'Roboto Slab', serif;
  margin:20px 0 0 0;
  padding:0px;
}

.flagpart p
{
 font-family: 'Lato', sans-serif;
 font-weight:300;
 color:#414042;
 text-align:center;
}

ul.popupform
{
 margin:20px auto 20px;
 padding:0px;
 list-style:none;
 width:80%;
}

ul.popupform li
{
 margin:0px;
 padding:0px;
 width:100%;
 font-size:15px;
  font-family: 'Lato', sans-serif;
   font-weight:300;
 color:#6a6a6a;
}

ul.popupform li input
{
width:100%;
 background:#ffffff;
 border:#b1adad 1px solid;
 font-size:15px;
 font-family: 'Lato', sans-serif;
 font-weight:300;
 color:#6a6a6a;
 height:46px;
 padding:0 0 0 11px;
 border-radius:3px;
 margin-bottom:11px;
}

ul.popupform li input.p-one
{

}

ul.popupform li input.p-two
{

}

ul.popupform li input.p-three
{

}

ul.popupform li input[type="checkbox"]
{
 width:auto;
 height:auto;
 margin-top:4px;
}

ul.popupform li input[type="submit"]
{
 background:#bf0446;
 color:#fff;
 font-size:18px;
 border:none;
 font-weight:600;
}



@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 ==== */