html, body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
 	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	image-rendering: -webkit-optimize-contrast;
  
    height:100vh; 
    min-height:100%; 
}

body {
	position: relative;
	color:#1f3749;
	font-size:14px;
	text-align:left;
	background-image: url(pattern.png), url(bgr.jpg);
    background-color: #e2e3e7;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;

   	-webkit-background-attachment: fixed;
    background-attachment: fixed;
    text-decoration:none !important;
	line-height: 1;
	}
 

div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, select, input,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
 
	font-size: 100%;
 
	vertical-align: baseline;
	font-family:"Exo2", Arial, sans-serif;
	font-weight: 100;
	
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	
  	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}
 
 
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{ 
     display:block;
}
 
	
ol, ul {
	list-style: none;
	}

table {
	border-collapse: separate;
	border-spacing: 0;
	}

caption, th, td {
	text-align: left;
	}
	
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
	
blockquote, q {
	quotes: "" "";
	}

textarea{
	resize:none;
}

input:active, input:focus, input:hover,
a, a:hover, a:active, a:focus,
ins, var,
textarea:focus {
	text-decoration: none;
	outline: 0 none;
	}
 
a {
	color:white !important;
}
::selection, ::-webkit-selection, input::selection, input::-webkit-selection{
	background: #5d9cec;
	color: white;
} 

/* ::selection, ::-webkit-selection, input::selection, input::-webkit-selection{
	background: #9ec7f4;
	color: inherit;
}  */
 

img {
  max-width: 100%;
  height: auto;
}

a {
	cursor:pointer;
	}
	
.clear{
	clear:both;
	width:100%;
}

 
@font-face {
  font-family: "Comfortaa";
  src: url(Comfortaa-Light.ttf) format("truetype");
  font-weight: 100;
  font-style: light;
}


@font-face {
  font-family: "Comfortaa";
  src: url(Comfortaa-Regular.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Caviar";
  src: url(CaviarDreams.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
}


div.loginWrp{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width: 67vmin;
    height: 87%;
}

div.loginWrp div.lines{
	width: 2vmin;
    height: 30vmin;
    background: url(lines.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: -3vmin;
    bottom: 0;
    margin: auto;
    z-index: 1;
    max-width: 17px;
    max-height: 265px;
}

div.loginWrp div.top{
	position:relative;
	width:100%;
	height:50%;
	background:white;
	padding:5vmin;
}

div.loginWrp div.top i.icon{
	position: absolute;
    top: 2vmin;
    left: 2vmin;
    margin: auto;
    background-image: url(logo-icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    width:4vmin;
    height: 4vmin;
    max-width: 28px;
    max-height: 28px;
}	
div.loginWrp div.top div.logo{
	float:left;
    text-align:center;
    font-family: "Caviar";
    font-weight: 200;
    font-size: 3.8vmin;
    color:#131313;
	margin-top: 7vmin;
    margin-bottom: 7vmin;
}

div.loginWrp div.bottom{
	position:relative;
	width:100%;
	height:50%;
	background:#5292d3;
	padding:5vmin;
	
	 background-image: url(sugar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    z-index:2;
}

div.loginWrp div.bottom div.heading{
	position:relative;
	float:left;
	width:100%;
	color:white;
}


div.loginWrp div.bottom div.heading a{
	float:left;
	width:100%;
	margin-bottom:0.5vmin;
	
	padding: 1vmin;
	border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
  	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items:center;
 	-webkit-align-items:center;
 	-moz-align-items:center;
 	
 	align-content:center;
 	-webkit-align-content:center;
 	-moz-align-content:scenter;

}

div.loginWrp div.bottom div.heading a:hover{
	background: rgba(70, 130, 191, 0.68);
}

div.loginWrp div.bottom div.heading a:active{
	background: rgba(53, 109, 167, 0.68);
}


div.loginWrp div.bottom div.heading a b{
	width:3vmin;
	height:3vmin;
	background-color: #51c059;
	border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    justify-content:center;
	-moz-justify-content:center;
 	-webkit-justify-content:center;
 	
 	align-items:center;
 	-webkit-align-items:center;
 	-moz-align-items:center;
 	
 	align-content:center;
 	-webkit-align-content:center;
 	-moz-align-content:scenter;
}

div.loginWrp div.bottom div.heading a b i{
    background-image: url(download-icon.png);
    background-repeat: no-repeat;
    width: 12px;
    height: 10px;
    float: left;
}

div.loginWrp div.bottom div.heading a span{
	vertical-align: middle;
    padding-left:14px;
    font-size:1.8vmin;
    
}

div.loginWrp div.bottom i.dots{

	background-image:url("dots.png");
	background-repeat:no-repeat;
	background-size:cover;
	width: 12vmin;
    height: 1.5vmin;
	max-width:48px;
	max-height:6px;
	
	position:absolute;
	top: 25px;
	left:0;
	right:0;
	margin:auto;
	
}

div.loginWrp div.bottom div.footer{
	position: absolute;
    bottom: 5vmin;
    left: 6vmin;
    margin: auto;
    float: left;
    color: white;
}

div.loginWrp div.bottom div.footer p{
	float:left;
	width:100%;
	font-size:1.5vmin;
}

div.loginWrp div.bottom div.footer p:last-child{
	margin-top:0.7vmin;
}

div.loginWrp div.bottom div.footer p.small{
	font-size:1.4vmin;
	margin-top:3vmin;
}

div.containerShadowBottom {
    position: absolute;
    bottom: -2px;
    margin: auto auto 14px;
    background: #000;
    width: 70%;
    height: 1px;
    z-index: 1;
    left: 0;
    right: 0;
    border-radius: 18%;
    -webkit-border-radius: 18%;
    -moz-border-radius: 18%;
    box-shadow: 0 1px 10px 11px #000;
    -webkit-box-shadow: 0 1px 10px 11px #000;
    -moz-box-shadow: 0 1px 10px 11px #000;
}


div.headerBorder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #1e5799;
    background: -moz-linear-gradient(left,rgba(30,87,153,1) 0,rgba(90,151,240,1) 0,rgba(58,185,114,1) 100%);
    background: -webkit-linear-gradient(left,rgba(30,87,153,1) 0,rgba(90,151,240,1) 0,rgba(58,185,114,1) 100%);
    background: linear-gradient(to right,rgba(30,87,153,1) 0,rgba(90,151,240,1) 0,rgba(58,185,114,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#3ab972', GradientType=1 );
}

a.btn{
    float: left;
    width: 100%;
    height: 6vmin;
    text-align: center;
    position: relative;
    border-radius: 30px;
    -mkz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 1px solid rgba(255,255,255,.42);
    background-image: url(bluebutton.jpg);
    background-repeat: no-repeat;
    background-size: 107% 107%;
    background-position: center;
    margin: auto;
    color:white;
    font-size: 2.5vmin;
    padding-top: 1.7vmin;
}

a.btn:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

a.btn:active {
    filter: brightness(95%);
    -webkit-filter: brightness(95%);
    box-shadow: inset 0 0 1px 0 #0049ad;
    -webkit-box-shadow: inset 0 0 1px 0 #0049ad;
    -moz-box-shadow: inset 0 0 1px 0 #0049ad;
}


@media only screen and (max-device-width: 480px) {
	div.loginWrp div.bottom div.heading p,
	div.loginWrp div.bottom div.footer p,
	div.loginWrp div.bottom div.footer p.small{
		font-size:3vmin;
	}
}