@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap');

body{
	background-color: #F1F5FB;
}
h1{
	display: block;
	font-size: 35px;
	font-weight: 300;
	text-align: center;
	color: #012D2D;
	margin: 30px;
	padding-top: 50px;
	font-family: 'Mulish', sans-serif !important;
	text-transform: uppercase;
}
p{
	color: #012D2D;
	font-size: 15px;
	margin-top: -10px;
	text-align: center;
	font-family: 'Mulish', sans-serif !important;
}
.animate,
.animate:focus,
.animate:hover,
.animate:active{
	width: 200px;
	margin: auto;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
}
.animate option{
	cursor: pointer;
}
.body-bg{
	background-color: #eaecf1;
}
.retro-content{
	max-width: 700px;
	margin: 30px auto;
	text-align: center;
	padding-top: 100px;
}
button,
button:hover,
button:active,
button:focus{
	border: 0 !important;
	outline: 0 !important;
}
.btn-retro{
	font-family: 'Mulish', sans-serif !important;
	font-weight: 400;
	letter-spacing: 0.5px;
	font-size: 14px !important;
	padding: 8px 20px !important;
	cursor: pointer;
	color: #FFF !important;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	border: 0 !important;
	margin: 5px;
	-webkit-box-shadow: 0 3px 20px rgb(0 0 0 / 8%);
	-moz-box-shadow: 0 3px 20px rgb(0 0 0 / 8%);
	-ms-box-shadow: 0 3px 20px rgb(0 0 0 / 8%);
	-o-box-shadow: 0 3px 20px rgb(0 0 0 / 8%);
	box-shadow: 0 3px 20px rgb(0 0 0 / 8%);
}
.btn-retro:hover{
	-webkit-box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
	-moz-box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
	-ms-box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
	-o-box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
	box-shadow: 0 5px 14px rgb(0 0 0 / 15%);
}

/** BLUE **/
.btn-retro-blue{
	background-color: #007197 !important;
}
.btn-retro-outline-blue{
	background-color: #FFF;
	border: 1px solid #007197 !important;
	color: #007197 !important;
}
/** GRAY **/
.btn-retro-gray{
	background-color: #75A4A9 !important;
}
.btn-retro-outline-gray{
	background-color: #FFF;
	border: 1px solid #75A4A9 !important;
	color: #75A4A9 !important;
}
/** BLACK **/
.btn-retro-black{
	background-color: #012D2D !important;
}
.btn-retro-outline-black{
	background-color: #FFF;
	border: 1px solid #012D2D !important;
	color: #012D2D !important;
}
/** YELLOW **/
.btn-retro-yellow{
	background-color: #FFAF65 !important;
	color: #012D2D !important;
}
.btn-retro-outline-yellow{
	background-color: #FFF;
	border: 1px solid #FFAF65 !important;
	color: #FFAF65 !important;
}
/** SKY **/
.btn-retro-sky{
	background-color: #A0ECCF !important;
	color: #012D2D !important;
}
.btn-retro-outline-sky{
	background-color: #FFF;
	border: 1px solid #A0ECCF !important;
	color: #A0ECCF !important;
}
/** RED **/
.btn-retro-red{
	background-color: #F14C27 !important;
}
.btn-retro-outline-red{
	background-color: #FFF;
	border: 1px solid #F14C27 !important;
	color: #F14C27 !important;
}
/** WHITE **/
.btn-retro-white{
	background-color: #EFF2F7 !important;
	color: #012D2D !important;
}
.btn-retro-outline-white{
	background-color: #EFF2F7;
	border: 1px solid #EFF2F7 !important;
	color: #012D2D !important;
}
/** GREEN **/
.btn-retro-green{
	background-color: #6EB89C !important;
}
.btn-retro-outline-green{
	background-color: #FFF;
	border: 1px solid #6EB89C !important;
	color: #6EB89C !important;
}


.retro-trans{
	background-color: transparent !important;
}

/* Navbar */
.navbar{
    background-color: #FFF !important;
    -webkit-box-shadow: 0 3px 15px rgb(0 0 0 / 7%);
    -moz-box-shadow: 0 3px 15px rgb(0 0 0 / 7%);
    -ms-box-shadow: 0 3px 15px rgb(0 0 0 / 7%);
    -o-box-shadow: 0 3px 15px rgb(0 0 0 / 7%);
    box-shadow: 0 3px 15px rgb(0 0 0 / 7%);
}
.navbar a{
    color: #4F5764 !important;
}
.fixed-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 999;
}
.user-avatar{
    float: left;
    width: 42px;
    height: 42px;
    border: 2px solid #dfe1e1;
    border-radius: 50%;
    background-color: #f0f2f5;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}
.brand-name{
    float: left;
    font-size: 15px;
    text-transform: capitalize;
    margin: 9px 10px;
}
i{
	bottom: -1px;
    position: relative;
}