@import 'https://fonts.googleapis.com/css?family=Kaushan+Script';
body {
font-family: Arial, Helvetica, sans-serif;
margin:auto;
background-image:url(back3.png);
}
.background{
 	width:100%;
	margin:auto;
	}
	
.background img{
background-image:url(Logo.png);
background-position:center; 
background-position:top;
background-repeat:no-repeat;
background-size:600px ;
opacity: 0.5;
    filter: alpha(opacity=50);
	height:620px;
	z-index:-1;
	position:absolute;
	width:100%;
	}

.header {
font-family: 'Kaushan Script', cursive;
font-size:80px;
text-align:center;
color:#000000;/*#FF6633;*/
font-size: 50px;
text-shadow: rgb(255, 51, 102) 0px 0px 4px;
background-color:rgba(255,255,255,0.8);
}
.h1text{font-size:40px; text-align:center; text-shadow: rgb(255, 150, 105) 0px 0px 4px;}

.radius{border-radius: 15px 50px;}
.lightback {background-color:rgba(255,255,255,0.8);}

.promo-area {
width:100%;
margin:auto;
height: 200px;
padding: 2% 0 20px;
}
.container {
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
	}
.container p{font-weight:bold;}
.container-fluid {
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
}
.row {
  /*margin-right:-15px;*/
	margin-left:40px;
}
.brands-area {
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5;
  color: #fff;
  padding: 20px 0 20px;
}

.single-promo {

    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid #a1a1a1;
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
    border-radius: 15px 50px;
	color:#FFFFFF;
	
}

.BOX1 {
    font-size: 15px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid #ff5733;
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
    color:#ff5733;
	transition: background 0.8s ease;
	background-color:rgba(255,255,255,0.8);
}
.BOX1 i{
    font-size: 75px;
}
.BOX1:hover {color:#FFFFFF;  background: #ff5733;}

.BOX2 {
    font-size: 15px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid #FA2C7E;
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
    color:#FA2C7E;
	transition: background 0.8s ease;
	background-color:rgba(255,255,255,0.8);
}
.BOX2 i{
    font-size: 75px;
	}
.BOX2:hover {color:#FFFFFF;  background: #FA2C7E;}

.BOX3 {
    font-size: 15px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid #EE3233;
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
    color:#EE3233;
	transition: background 0.8s ease;
	background-color:rgba(255,255,255,0.8);
}
.BOX3 i{
    font-size: 75px;
}
.BOX3:hover {color:#FFFFFF;  background: #EE3233;}/*#F50057*/

.BOX4 {
    font-size: 15px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid  #bf1481;/*#4abebd #14bf8e*/
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
   	color: #bf1481;
	transition: background 0.8s ease;
	background-color:rgba(255,255,255,0.65);
}
.BOX4 i{
    font-size: 75px;
}
.BOX4:hover {color:#FFFFFF;  background:  #bf1481 ;}


.BOX5 {
    font-size: 15px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid  #FF5959;/*#4abebd #14bf8e*/
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
   	color: #FF5959;
	transition: background 0.8s ease;
	background-color:rgba(255,255,255,0.65);
}
.BOX5 i{
    font-size: 75px;
}
.BOX5:hover {color:#FFFFFF;  background: #FF5959;}

.BOX6 {
    font-size: 15px;
    font-weight: 200;
    padding: 10px 10px;
    text-align: center;
	box-sizing:border-box;
	border: 1px solid  #F20056;/*#4abebd #14bf8e*/
    padding: 10px 20px; 
    width: 190px;
	height:130PX;
   	color: #F20056;
	transition: background 0.8s ease;
	background-color:rgba(255,255,255,0.65);
}
.BOX6 i{
    font-size: 75px;
}
.BOX6:hover {color:#FFFFFF;  background: #F20056;}

.promo4 { background:#4abebd;}


.bigicon { font-size:500px;}




.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
	position:relative;
	min-height:1px;
	padding-right:1%;
	padding-left:2PX;
	float:left;
	padding-bottom:15px;
}
.colsmall{
	min-height:1px;
	padding-right:2px;
	padding-left:2px;
	width:200px;
	height:50px;
	float:left;
	padding-bottom:15px;
}




.menuarea {
    font-size: 25px;
    font-weight: 200;
    padding: 2px 0px;
    text-align: center;
	box-sizing:border-box;
	
}
.menuarea i {
  font-size: 20px;
}
.menuarea p {
  font-size: 12px;
}

.menuarea:hover {color: #fff;background: #222;}
.menuarea1 { background:#5a88ca;}
.menuarea2 { background:#ffd900;}
.menuarea3 { background:#fa8072;}
.menuarea4 { background:#4abebd;}
.menuarea5 { background:#FF9933;}
.rowsmall {
padding-left:10%;
width:100%;
margin:auto;
}
	
.loginbutton{
width:200px;
height:50px;
margin:auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color:#5F5FCD;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px; 
box-shadow: #B3B3B3 2px 2px 2px;
color:#FFFFFF;
}

.loginbutton div{
padding:10px 35px;
color:#FFFFFF;
}
.loginbutton div i{
font-weight:bold;
font-size:30px;
}	
.loginbutton div i span{
font-size:25px;
font-family: 'Kaushan Script', cursive;
}
.loginbutton:hover{
background-color:#5252CA;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px; 
box-shadow: #000000 4px 4px 15px;
color:#FFFFFF;
}

.supportbtn {
	width:60px ;
	height:20px ;
    border-style: solid !important;
    border-top-width: 2px !important;
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    border-left-width: 2px !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
    top: 1rem !important;
    border-color: #AA0114/*rgb(255, 199, 111)*/ !important;
    border-radius: 4px !important;
    color: #AA0114 !important;
    right: 2rem !important;
	position:absolute;
	float:right;
	font-weight:bold;
}
.supportbtn:hover {
			border-color: #3737D5!important;
			color: #3737D5!important;
}

.helpbtn {
	width:80px !important;
	height:20px !important;
    border-style: solid !important;
    border-top-width: 2px !important;
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    border-left-width: 2px !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
    top: 1rem !important;
    border-color: #6DD8BB !important;
    border-radius: 4px !important;
    color: #6DD8BB !important;
    right: 9.5rem !important;
	position:absolute;
	float:right;
	font-weight:bold;
}
.helpbtn:hover {
			border-color: #3737D5!important;
			color: #3737D5!important;
}

.fadebtn {

    background-color: #d15757;
    color: #fff;
    padding: 20px;
	margin:auto;
	margin-right:20px;
	right:0;
	position:absolute;
	margin-top: -45px;
	display:none;

}

.fadebtn:hover{ background-color:#0066CC;}

.footer{
color:#FFFFFF;
background:#666666;
width:100%;
text-align:center;
height:1rem;
position:fixed;
bottom:0;
padding:5px 5px;

}


/*ANIMATION*/	

.BOX1:HOVER,.BOX2:HOVER,.BOX3:HOVER,.BOX4:HOVER,.BOX5:HOVER,.BOX6:HOVER{
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    
}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}
	
/*ANIMATION END*/	
	
	
	
/*	
@media (min-width:200px) {
	.header{font-size:30px;		 
	}
	.supportbtn {
	width:30px ;
	height:8px ;
	font-size:12px;
	font-size:8px;}
}
@media (min-width:992px) {
	.header{font-size:40px;		 
	}
	.supportbtn {
	width:30px ;
	height:20px ;}
}
@media (min-width:1200px) {
.header{font-size:60px;		 
	}
	.supportbtn {
	width:60px ;
	height:20px ;
	font-size:16px;}
}*/

/*Popup Window*/
			#mask {
			  position:absolute;
			  left:0;
			  top:0;
			  z-index:9000;
			  background-color:#000;
			  display:none;
			}  
			#boxes .window {
			  position:absolute;
			  left:0;
			  top:0;
			  width:440px;
			  height:200px;
			  display:none;
			  z-index:9999;
			  padding:20px;
			}
			#boxes #dialog {
			  width:580px; 
			  height:380px;
			  padding:10px;
			  background-image:url(popup-stpaul.png);
			  background-position:center;
			}
			.close {
			text-align:right;
			float:right;
			position:absolute;
			margin-left:438px;
			margin-top:-27.5px;
			color:#FF0000;
			font-weight:bold;
			text-decoration:none;
			font-size:30PX !important;
			
			
			}
					
			
/*End Popup Window*/

/*SUPPORT POPUP WINDOW*/
.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */



/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
/*END SUPPORT POPUP WINDOW*/


@media (min-width:200px) {
	.promo-area {
	height:300px ;}
	.BOX1,.BOX2,.BOX3,.BOX4,.BOX5,.BOX6 { 
	width: 160px;
	height:110PX; 
	font-size:10px;
		}
}

@media (min-width:992px) {
	.promo-area {
	height:200px ;}
	.BOX1,.BOX2,.BOX3,.BOX4,.BOX5,.BOX6  { 
	width: 160px;
	height:110PX; 
	font-size:10px;}
	
}

@media (min-width:1020px) {
	.promo-area {
	height:200px ;}
	.BOX1,.BOX2,.BOX3,.BOX4,.BOX5,.BOX6  { 
	width: 150px;
	height:110PX; 
	font-size:10px;}
	
}

@media (min-width:1200px) {
.promo-area {
	height:200px ;}
.BOX1,.BOX2,.BOX3,.BOX4,.BOX5,.BOX6  { 
	width: 190px;
	height:130PX; 
	font-size:15px;}
	
	}