@font-face{font-family:'Lato',sans-serif;src:url(https://fonts.googleapis.com/css?family=Lato:100,300,900)}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes #dialog {
	position:absolute;
	top:50% !important;
	left:50%  !important;
	z-index: 999999;
	width:500px;  /* adjust as per your needs */
	height:500px;   /* adjust as per your needs */
	margin-left:-250px;   /* negative half of width above */
	margin-top:-250px;   /* negative half of height above */
  padding:90px 80px;
  background-color:#ffffff;
  border-top-left-radius:50%;
  border-bottom-left-radius:50%;
  border-top-right-radius:50%;
  border-bottom-right-radius:50%;
  border-left: 20px solid #54d7cd;
  border-right: 20px solid #d93c98;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#lorem{
  font-size: 12px;
  text-align:center;
}
#lorem img{
   margin-bottom:20px;
}
#lorem h2{
	font-family: 'Lato',sans-serif;
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 900;
	margin-top: 10px;
        margin-bottom: 10px;
}
#lorem h2 span{
	color: #ca2624;
}
/*
#lorem h2{
	font-family: 'Lato',sans-serif;
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 900;
	margin-bottom:20px;
}
#lorem h2 span{
	color: #05a8cf;
}*/
#boxes #dialog form .form-control {
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius:0px;
}
#boxes #dialog .btn{
    display: block;
    width: 100%;
    height: 50px;
    padding: 15px 12px;
    text-transform: uppercase;
	font-size: 16px;
	font-weight: 900;
    line-height: 1.42857143;
    color: #ffffff;
    background-color: #ca2624;
    border: 1px solid #ccc;
    border-radius:0px;
}
/*#boxes #dialog .btn{
    display: block;
    width: 100%;
    height: 50px;
    padding: 15px 12px;
    text-transform: uppercase;
	font-size: 16px;
	font-weight: 900;
    line-height: 1.42857143;
    color: #ffffff;
    background-color: #05a8cf;
    border: 1px solid #ccc;
    border-radius:0px;
}*/
#popupfoot{
	font-size: 16px !important;
    padding: 10px 20px;
    text-align:center;
}
#popupfoot a{
	color:#000 !important;
	opacity: 1 !important;
	font-size: 16px !important;
	font-weight: normal !important;
	text-decoration:underline;
}
#popupfoot .close{
	float:none;
}
.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
	background-color:#D1D1D1;
	color: green;
}
.popupoption2:hover{
	color: red;
}

#boxes.black #dialog{
	border: 2px solid #000 !important;
	background-image: url(../img/christmas-patteren.jpg) !important;
}
#boxes.black #dialog #lorem{
    padding: 10px;
	color: #fff;
    background: #000;
}
#boxes.black #dialog #lorem img {
    margin-bottom: 0px;
}
#boxes.black #dialog #popupfoot{
	color: #fff;
	padding-top: 0px;
    background: #000;
}
#boxes.black #dialog #popupfoot a{
	color: #fff !important;
	text-decoration: none;	
}
@media (max-width:767px) {
	#boxes #dialog {
	position:absolute;
	top:50% !important;
	left:50%  !important;
	z-index: 999999;
	width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    padding: 60px 60px;
}
#lorem h2 {
    font-size: 26px;
}
}
@media (max-width:480px) {
	#boxes #dialog {
	position:absolute;
	top:50% !important;
	left:50%  !important;
	z-index: 999999;
	width: 300px;
    height: 300px;
    margin-left: -150px;
    margin-top: -150px;
    padding: 40px 40px;
}
#lorem img{
    width: 140px;
    margin-bottom:10px;
}
#lorem h2 {
    font-size: 20px;
	margin-bottom: 10px;
}
#boxes #dialog .btn {
	height: 40px;
    padding: 10px 12px;
    font-size: 13px;
}
#popupfoot {
    padding: 6px 20px;
}
}