/*axmail css file [aximon account]

*@author Myyxo victor 
*@version v1.0.0
*/

@media screen and (min-width:900px){
	*{
		margin:0;
		padding:0;
		box-sizing:border-box;
	}
	
	
	.cover{
		width:80%;
		height:100vh;
		background:white;
		border-radius:30px;
		box-shadow:0 2px 10px 5px #EDEDED, 0 8px 10px 5px #EDEDED;
		margin:100px auto;
		padding:2em;
		display:flex;
		flex-wrap:wrap;
		
	}
		
		.centerLogo{
			width:90px;
			height:100px;
			margin:0 auto;
			display:block;
			padding:16px;
		}
		#cH2{
			text-align:center;
			font-size:36px;
	
			font-family:Arial;
		}
		.txt{
			display:block;
			margin:10px auto;
			width:45%;

		}
		
		.frm{
			display:block;
			margin:10px auto;
			width:50%;
		}
			.input{
				width:360px;
				height:60px;
				border:2px solid darkblue;
				border-radius:5px;
				padding:1em;
				outline:none;
				margin-top:60px ;
				
			}
			
			.lBtn{
				width:170px;
				height:40px;
				padding:10px;
				border:none;
				border-radius:20px;
				background:#EDEDED;
				margin:15px;
				float:left;
			}
			
			.sBtn{
				width:120px;
				height:40px;
				padding:10px;
				border:none;
				border-radius:20px;
				background:darkblue;
				margin:15px;
				float:right;
				color:white
			}
			
			
		.input >	.sel{
				width:70px;
				height:50px;
				border:none;
				border-radius:5px;
				padding:6px;
				outline:none;
				background:white;
				
			}
			
		.input > .inp{
				width:280px;
				height:50px;
				border:none;
				border-radius:5px;
				padding:10px;
				outline:none;
				background:white;

				
			}
			
			
			
			/*####################################################################################
			#####################################################################################*/
			/*complete preloader code for aximon*/
			.preloader{
				width:100%;
				height:106vh;
				position:fixed;
				background:#00000057;
				display:block;
			}
			#loader{
				border-bottom:6px solid fuchsia;
				border-top:6px solid fuchsia;
				border-left:6px solid darkblue;
				border-right:6px solid darkblue;
				border-radius:50px;
				width:70px;
				height:70px;
				animation: spin 1s linear infinite;
				z-index:10;
				background:transparent;
			}
			.center{
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin: auto;
				display:block;
			}
			
			@keyframes spin{
				100%{
					transform: rotate(360deg);
				}


			}
			
			/*###############################################################################
			##########################################################################3##3333*/
		.top{
			width:width:100%;
			height:80px;
			background:white;
			display:flex;
			justify-content:space-between;
			padding:15px;
			line-height:80px;
			z-index:5;
		}
		
		.box1{
		display:flex;
	justify-content:space-evenly;
	color:black;
	font-size:25px;
	max-width:500px;

		}
			
			.android{
				display:none;
			}
			
			.logo1{
				width:50px;
				height:60px;
			}
			
			
		.box2{
		display:flex;
	justify-content:space-between;
	color:black;
	font-size:35px;
	max-width:500px;
	padding-right:2em;

		}
			
         .profile{
           width:50px;
            height:50px;
              border-radius:100px;
                padding:2px;
				border:1px solid #EDEDED;
				
		 }
		 .grid0{
			 width:100%;
			 display:flex;
			 background:transparent;
			 height:auto;
			 justify-content:space-evenly;
		 }
		 
		    .grid1{
			 width:20%;
			 height:120vh;
			 float:left;
			 background:transparent;
			text-align:center;
			 padding:1em;
		
		  }
            .grid2{
 			width:56%;
          	height:auto;
			padding:1em;
			background:transaparent;
			}
			
			 .grid3{
			 width:25%;
			 height:400px;
			 float:right;
			 background:transparent;
			border:8px solid #EDEDED;
			 padding:1em;

			 	border-radius:30px;
		  }
			
			.mtp{
				margin:10px;
			}
			
             .grid1 p{
				 width:160px;
				 height:50px;
				 line-height:50px;
				 border-radius:30px;
				 font-weight:700;
			 }
			 
			 .grid1 p:hover{
				 background:#EDEDED;
			 }
			
	          #active{
            		background:#EDEDED;
			  }
             .profileX{
                 width:100px;
                     height:100px;
                        border-radius:200px;
                            border:1px solid #EDEDED;
                                display:block;
                                   margin:10px auto;
								   padding:10px;
			 }
			 
			#ps{
				font-weight:700;
				text-align:center;
			}
			
			.scrollDiv{
				width:100%;
				justify-content:space-evenly;
				display:flex;
				
			}
			.conBox{
				width:48%;
				height:270px;
				padding:1em;
			
				border-radius:12px;
                background:#EDEDED;
			}
			.orred{
			 background:#FF9A9A;
			}
			
			
			#1h{
				font-family:Arial;
				font-weight:700;
			}
			
			.conBut{
				width:160px;
				height:40px;
				border-radius:5px;
				background:red;
				color:white;
				display:block;
				margin:5px auto;
				text-align:center;
				border:none;
				cusor:pointer;
			}
			
			
			.wideDiv{
				width:90%;
				height:320px;
				border-radius:15px;
				border:1px solid #EDEDED;
				padding-top:15px;
				padding-bottom:15px;
				display:block;
				margin:30px auto;
			}
			
			.appScroll{
				
			width:100%;
			height:200px auto;
			overflow-Y:scroll;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-evenly;
			border-bottom:1px solid black;
		
			}
			
			.app{
				width:70px;
				height:70px;
				border-radius:6px;
				background:#EDEDED;
				margin:5px;
				font-size:40px;
				text-align:center;
				padding-top:17px;
				color:navy;
			}
			.app:hover{
				box-shadow:0 4px 5px #EEEEED, 0 6px 7px #EDEDED;
			}
				
			#hd{
				font-family:Arial;
		
				font-size:30px;
			}
			
			.divbtn{
				height:60px;
				padding-left:20px;
				padding-right:10px;
				padding-bottom:15px;
				border-bottom:1px solid #EDEDED;
				line-height:60px;
			}
			
			.divbtn:hover{
				background:#EDEDED;
			}
			
			.flexy{
				width:100%;
				height:auto;
				display:flex;
				justify-content:space-evenly;
			}
			
			.flexy .left{
				width:49%;
				height:auto;
				float:left;
				padding-top:10em;
				padding-left:1em;
				padding-right:1em;
			}
			
			.flexy .right{
				width:49%;
				height:auto;
				float:right;
				
			}
			
			#text{
				font-family:Arial;
				font-size:55px;
				font-weight:600;
			}
			
			#psp{
				font-weight:500;
				
			}
			.bannerImg{
				width:100%;
				height:auto;
				border-radius:6px;
				z-index:0;
			}
			
			.lft{
				width:35%;
				height:30vh;
				background:#EDEDED;
				border-right:1px solid black;
				border-bottom:1px solid black;
				border-top:1px solid black;
				padding:1em;
			}
			
			.cnt{
				width:35%;
				height:30vh;
				background:#EDEDED;
			    border-bottom:1px solid black;
						border-top:1px solid black;
						padding:1em;
			}
			
			.rgt{
				width:35%;
				height:30vh;
				background:#EDEDED;
				border-left:1px solid black;
				border-bottom:1px solid black;
						border-top:1px solid black;
						padding:1em;
			}
			
			.infoUser{
				width:70%;
				margin:60px auto;
				display:block;
			}
			
			.logo-dis{
				width:80px;
				height:80px;
				margin:10px auto;
				display:block;
			}
			
			.brand{
				width:200px;
				height:auto;
			}
			.height{
				height:auto;
			}
			
	        .hor{
				height:auto;
			}
			.smallImg{
				width:60px;
				height:auto;
				display:block;
				margin:0 auto;
				padding:5px;
			}
			
			.newCon{
		position:relative;
	}
	
 .imgSpan{
		position:absolute;
		top:60px;
		left:160px;
		width:300px;
		height:auto;
	}
	
	.newCon span{
		position:absolute;
		top:160px;
		left:240px;
		width:300px;
		height:auto;
		font-size:35px;
		color:white;
		font-weight:700;
	}
	.flx{
		display:flex;
		margin:20px auto;
	}
		.sInput{
		width:600px;
		display:block;
        
		height:50px;
		background:white;
		border:2px solid #EDEDED;
		border-top-left-radius:20px;
		border-bottom-left-radius:20px;
		color:black;
		padding:1em;
		font-size:16px;
		outline:none;
	}	
	
	.Sbtn{
		width:130px;
		height:50px;
		padding:1em;
		border-top-right-radius:20px;
		border-bottom-right-radius:20px;
		background:darkblue;
		color:white;
		text-align:center;
		outline:none;
		border:2px solid #EDEDED;
		cursor:pointer;
		
	}
	
	.result{
		display:block;
	}
	
	
	.resultContent{
		width:450px;
		height:80px;
		padding:1em;
		border-radius:8px;
		box-shadow:0 1px 13px 1px #EDEDED, 0 1px 1px 1px #EDEDED;
		margin:4px;
	}
	.pull{
		display:flex;
	}
	
	.user-profile{
		width:50px;
		height:50px;
		border-radius:100px;
		border:1px solid #EDEDED;
	}
	.name{
		margin-top:13px;
		padding-left:13px;
		width:50px;
		font-size:16px;
		font-weight:700;
	}
	.bR{
		border-radius:20px;
		width:90%;
	}
	.norm{
		margin-top:10px;
	}
	
	.preview{
		width:360px;
		height:auto;
		border-radius:50px;
		display:block;
		margin:50px auto;
		padding:10px;
	}
	
	.buton{
		width:140px;
		height:40px;
		padding:10px;
		border:none;
		border-radius:12px;
		background-image:linear-gradient(45deg, darkblue, fuchsia);
		margin:8px auto;
		display:none;
		color:white;
	}
	
		.butn{
		width:200px;
		height:40px;
		padding:10px;
		border:none;
		border-radius:12px;
		background:#EDEDED;
		margin:30px auto;
		display:block;
		color:black;
	}
			
			
			
			
}







/*#############################################################################################################################################################################################################################################################################################################################################################################################################*/

/*Mobile*/


@media screen and (max-width:898px){
	*{
		margin:0;
		padding:0;
		box-sizing:border-box;
	}
	
	
	.cover{
		width:100%;
		height:110vh;
		background:white;

		margin:0 auto;
		
		display:black;
		
		
	}
		
		.centerLogo{
			width:100px;
			height:110px;
			margin:0 auto;
			display:block;
			padding:16px;
		}
		#cH2{
			text-align:center;
			font-size:30px;
	
			font-family:Arial;
		}
		.txt{
			display:block;
			margin:10px auto;
			width:100%;
			padding:15px;

		}
		
		.frm{
			display:block;
			margin:10px auto;
			width:100%;
			padding:15px;
		}
			.input{
				width:300px;
				height:70px;
				border:2px solid darkblue;
				border-radius:5px;
				padding:1em;
				outline:none;
				margin:0 auto;
				display:block;
				
			}
			
			.lBtn{
				width:150px;
				height:40px;
				padding:10px;
				border:none;
				border-radius:20px;
				background:#EDEDED;
				margin:15px;
				float:left;
			}
			
			.sBtn{
				width:120px;
				height:40px;
				padding:10px;
				border:none;
				border-radius:20px;
				background:darkblue;
				margin:15px;
				float:right;
				color:white
			}
			
			
		.input >	.sel{
				width:70px;
				height:65px;
				border:none;
				border-radius:5px;
				padding:6px;
				outline:none;
				background:white;
				
			}
			
		.input > .inp{
				width:200px;
				height:50px;
				border:none;
				border-radius:5px;
				padding:10px;
				outline:none;

				
			}
			
			
			
			/*####################################################################################
			#####################################################################################*/
			/*complete preloader code for aximon*/
			.preloader{
				width:100%;
				height:106vh;
				position:fixed;
				background:#00000057;
				display:block;
			}
			#loader{
				border-bottom:6px solid fuchsia;
				border-top:6px solid fuchsia;
				border-left:6px solid darkblue;
				border-right:6px solid darkblue;
				border-radius:50px;
				width:70px;
				height:70px;
				animation: spin 1s linear infinite;
				z-index:10;
				background:transparent;
			}
			.center{
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin: auto;
				display:block;
			}
			
			@keyframes spin{
				100%{
					transform: rotate(360deg);
				}


			}
			
			/*###############################################################################
			##########################################################################3##3333*/
		.top{
			width:width:100%;
			height:80px;
			background:white;
			display:flex;
			justify-content:space-between;
			padding:15px;
			line-height:70px;
			z-index:5;
		}
		
		.box1{
		display:flex;
	justify-content:space-evenly;
	color:black;
	font-size:25px;
	max-width:300px;
	line-height:80px;

		}
			
			.android{
				display:block;
				padding-bottom:10px;
			}
			
			.logo1{
				width:50px;
				height:60px;
			}
			
			
		.box2{
		display:flex;
	justify-content:space-between;
	color:black;
	font-size:20px;
	max-width:500px;
	padding-right:2em;

		}
			
         .profile{
           width:30px;
            height:30px;
              border-radius:60px;
                padding:2px;
				border:1px solid #EDEDED;
				margin:1em;
				
		 }
		 .grid0{
			 width:100%;
			 display:block;
			 background:transparent;
			 height:auto;
		
		 }
		 
		    .grid1{
			 width:100%;
			 height:110vh;
			
			 background:white;
			text-align:center;
			 padding:1em;
			 display:block;
			 position:fixed;
			 z-index:20;
			 margin-top:-1000px;
			 transition:all 2s;
		
		  }
            .grid2{
 			width:100%;
          	height:auto;
			padding:1em;
			background:transaparent;
			}
			
			 .grid3{
			 width:90%;
			 height:400px;
			
			 background:transparent;
			border:8px solid #EDEDED;
			 padding:1em;
			 display:block;
			 margin:0 auto;

			 	border-radius:30px;
		  }
			
			.mtp{
				margin:1em;
			}
			
             .grid1 p{
				 width:300px;
				 height:50px;
				 line-height:50px;
				 border-radius:30px;
				 font-weight:700;
				 margin:0 auto;
				 display:block;
			 }
			 
			 .grid1 p:hover{
				 background:#EDEDED;
			 }
			
	          #active{
            		background:#EDEDED;
			  }
             .profileX{
                 width:100px;
                     height:100px;
                        border-radius:200px;
                            border:1px solid #EDEDED;
                                display:block;
                                   margin:10px auto;
			 }
			 
			#ps{
				font-weight:700;
				text-align:center;
			}
			
			.scrollDiv{
				width:100%;
				justify-content:space-evenly;
				display:block;
			
				
			}
			.conBox{
				width:90%;
				height:260px;
				padding:1em;
				margin:10px;
			
				border-radius:12px;
                background:#EDEDED;
			}
			.orred{
			 background:#FF9A9A; 
		
              
			}
			
			
			#1h{
				font-family:Arial;
				font-weight:700;
			}
			
			.conBut{
				width:160px;
				height:40px;
				border-radius:5px;
				background:red;
				color:white;
				display:block;
				margin:5px auto;
				text-align:center;
				border:none;
				cusor:pointer;
			}
			
			
			.wideDiv{
				width:100%;
				height:280px;
				border-radius:15px;
				border:1px solid #EDEDED;
				padding-top:15px;
				padding-bottom:15px;
				display:block;
				margin:30px auto;
			}
			
			.appScroll{
				
			width:100%;
			height:200px auto;
			overflow-Y:scroll;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-evenly;
			border-bottom:1px solid black;
			margin:0 auto;
		
			}
			
			.app{
				width:70px;
				height:70px;
				border-radius:6px;
				background:#EDEDED;
				margin:5px;
				font-size:30px;
				padding-top:17px;
				color:Navy;
			}
			
			.app:hover{
				box-shadow:0 4px 6px #EEEED, 0 6px 8px #EEEED;
			
			}
			
			
				
			#hd{
				font-family:Arial;
		
				font-size:20px;
			}
			
			.divbtn{
				height:50px;
				padding-left:20px;
				padding-right:10px;
				padding-bottom:15px;
				border-bottom:1px solid #EDEDED;
				line-height:50px;
				display:flex;
				justify-content:space-evenly;
				}
			
			.divbtn:hover{
				background:#EDEDED;
			}
			
			
			#ps1{
				font-size:15px;
			}
			
			
			.flexy{
				width:100%;
				height:auto;
				display:flex;
				justify-content:space-evenly;
				flex-wrap:wrap;
			}
			
			.flexy .left{
				width:95%;
				height:auto;
				
			padding:1em;
			}
			
			.flexy .right{
				width:95%;
				height:auto;
				padding:1em;
				
			}
			
			#text{
				font-family:Arial;
				font-size:50px;
				font-weight:600;
			}
			
			#psp{
				font-weight:500;
				
			}
			.bannerImg{
				width:100%;
				height:auto;
				border-radius:6px;
			}
			
			.lft{
				width:100%;
				height:30vh;
				background:#EDEDED;
				border-bottom:1px solid black;
				padding:1em;
			}
			
			.cnt{
				width:100%;
				height:30vh;
				background:#EDEDED;
			    border-bottom:1px solid black;
					
						padding:1em;
			}
			
			.rgt{
				width:100%;
				height:30vh;
				background:#EDEDED;
				
						padding:1em;
			}
			
			.infoUser{
				width:100%;
				margin:60px auto;
				display:block;
			}
			
			.logo-dis{
				width:80px;
				height:80px;
				margin:10px auto;
				display:block;
			}
			
			.brand{
				width:200px;
				height:auto;
			}
			
			.height{
				height:170vh;
			}
			
			.smallImg{
				width:60px;
				height:auto;
				display:block;
				margin:0 auto;
				padding:5px;
			}
			
			
						.newCon{
		position:relative;
	}
	
 .imgSpan{
		position:absolute;
		top:10px;
		left:50px;
		width:200px;
		height:80px;
		padding:5px;
	}
	
	.newCon span{
		position:absolute;
		top:90px;
		left:80px;
		width:auto;
		height:auto;
		font-size:30px;
		color:white;
		font-weight:700;
	}
			
		.flx{
		display:flex;
		margin:20px auto;
	}
		.sInput{
		width:250px;
		display:block;
        
		height:40px;
		background:white;
		border:2px solid #EDEDED;
		border-top-left-radius:20px;
		border-bottom-left-radius:20px;
		color:black;
		padding:1em;
		font-size:14px;
		outline:none;
	}	
	
	.Sbtn{
		width:100px;
		height:40px;
		padding:5px;
		border-top-right-radius:20px;
		border-bottom-right-radius:20px;
		background:darkblue;
		color:white;
		text-align:center;
		outline:none;
		border:2px solid #EDEDED;
		cursor:pointer;
		
	}
	
	.result{
		display:block;
	}
	
	
	.resultContent{
		width:100%;
		height:70px;
		padding:1em;
		border-radius:8px;
		box-shadow:0 1px 13px 1px #EDEDED, 0 1px 1px 1px #EDEDED;
		margin:4px;
	}
	.pull{
		display:flex;
	}
	
	.user-profile{
		width:50px;
		height:50px;
		border-radius:100px;
		border:1px solid #EDEDED;
	}
	.name{
		margin-top:13px;
		padding-left:13px;
		width:50px;
		font-size:16px;
		font-weight:700;
	}
	
		.preview{
		width:250px;
		height:auto;
		border-radius:50px;
		display:block;
		margin:50px auto;
		padding:10px;
	}
	
	.buton{
		width:140px;
		height:40px;
		padding:10px;
		border:none;
		border-radius:12px;
		background-image:linear-gradient(45deg, darkblue, fuchsia);
		margin:8px auto;
		display:none;
		color:white;
	}
		.butn{
		width:200px;
		height:40px;
		padding:10px;
		border:none;
		border-radius:12px;
		background:#EDEDED;
		margin:50px auto;
		display:block;
		color:black;
	}
			
			
			
 
		

}