html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
body{
font-family: 'Lato', sans-serif;
color:#413d4b;
background: transparent;
height: 100%;
background: #f8f8f8;
}
html{
height: 100%!important
}
.tar{
text-align: right;
}
.tac{
text-align: center;
}
p{
color:#565656;
margin-bottom: 0px;
font-size: 14px;
font-weight:400;
line-height: 1.4;
}
.m0{
margin:0;
}
.p0{
padding: 0;
}
.p50 {
padding: 50px;
}
.pl10{
padding-left: 10px;
}
.pl15{
padding-left: 15px;
}
.pr10{
padding-right: 10px;
}
.pr15{
padding-right: 15px;
}
.pr20{
padding-right: 20px;
}
.pr30{
padding-right: 30px;
}
.mb25 {
margin-bottom: 25px;
}
.pl{
padding-left: 20px;
}
a:hover,
a:focus,
a:active{
text-decoration: none;
}
b,
strong{
font-weight: 700;
}
h1, h2, h3, h4, h5, h6{
font-weight:900;
}
.mb100{
margin-bottom: 100px;
}
.mb20{
margin-bottom: 20px;
}
h1{
font-size: 30px;
color:#333;
font-weight: 900;
margin-bottom: 30px;
text-align: center;
}
h1 span{
display: block;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 14px;
color: #a3a3a3;
font-weight: 400;
letter-spacing: 1px;
}
h2{
font-size: 32px;
font-weight: 900;
}
h2 span{
font-size: 16px;
}
h3{
font-size: 16px;
text-transform: uppercase;
color:#333;
font-weight: 900;
display: inline-block;
margin-top: 2px;
}
h5{
font-size: 18px;
color:#333;
font-weight: 900;
margin-bottom: 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* header and top text */
.navbar{
background: #fff;
margin:0;
border:none;
}
.navbar-collapse {
text-align: right;
}
.topRight {
display: inline-block;
float: right;
text-align: left;
margin-top: 25px;
vertical-align: middle;
}
#menu {
display: inline-block;
vertical-align: middle;
padding: 18px 0;
padding-right: 15px;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline-block;
}
#menu a {
color: #727272;
font-size: 14px;
text-transform: uppercase;
font-weight: 400;
padding: 14px 14px;
/*border-bottom: 2px solid transparent;*/
display: inline-block;
text-align: center;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu a:after{
content:'';
display: inline-block;
width: 0%;
height: 3px;
background: #00a8c1;
position: absolute;
left:50%;
transform: translate(-50%, 0);
bottom: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu a:hover,
#menu a.active {
/*border-bottom: 2px solid rgb(0, 74, 143);*/
font-weight: 700;
color:#333;
}
#menu a:hover:after,
#menu a.active:after{
width: 55%;
}
.navbar-brand {
height: auto;
padding: 5px 15px;
float: none;
display: inline-block;
vertical-align: middle;
}
.navbar-brand>img{
width: 230px;
}
.navbar-header{
padding: 15px 0;
}
.topRight ul{
list-style: none;
font-size: 0;
display: inline-block;
}
.topRight li{
display: inline-block;
vertical-align: middle;
margin: 0 2px;
}
.logout{
background: url(../img/logout.png) no-repeat center;
background-size: contain;
width: 16px;
height: 16px;
display: inline-block;
}
.colFlex{
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
.rowFlex{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.main{
padding-top: 50px;
min-height: calc(100% - 161px);
}
footer{
background:#00a9bf;
padding: 30px 0;
}
footer p{
color:#fff;
font-size: 14px;
font-weight: 400;
/*text-transform: uppercase;*/
}
.page-title {
text-align: center;
}
.logout .glyphicon{
top:0;
}
.login-page{
background: url(../img/login-bg.jpg) no-repeat center;
background-size: cover;
padding: 50px 0;
}
.login-form {
max-width: 500px;
margin: 40px auto;
background: #f3f3f3;
padding: 40px;
}
.login-form h2{
color: #00a9bf;
text-transform: uppercase;
font-size: 25px;
margin-bottom: 5px;
}
.login-title{
margin-bottom: 30px;
}
.login-title h1{
margin-bottom: 10px;
}
.login-form .email{
margin-bottom: 10px;
}
.forgot-password-link{
color: #00a9bf;
font-weight: 600;
}
.login-box{
background: #f4f4f4;
max-width: 475px;
margin:0 auto;
padding: 55px 40px;
}
.login-box h1{
text-align: center;
color:#00a8c1;
font-weight: 700;
margin-bottom: 50px;
}
form label{
color:#121212;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding: 0 15px;
margin-bottom: 5px;
display: block;
}
form label span{
float: right;
color:#00a8c1;
text-transform: none;
font-weight: 400;
}
.form-control{
border-radius: 50px;
padding: 19px 20px;
background: #fff;
border:1px solid #dbdbdb;
height: auto;
box-shadow: none;
color:#121212;
font-size: 16px;
}
.form-control:focus,
.form-control:active,
.form-control:focus:active{
outline: none;
box-shadow: none;
}
.form-group{
margin-bottom: 10px;
}
.examBox {
margin-left: 50px;
}
.btn{
border-radius: 0;
background: #00a8c1;
width: 100%;
padding: 25px 15px;
color:#fff;
font-size: 18px;
font-weight: 400;
border: none;
position: relative;
}
.btn:after{
content:'';
border-right: 45px solid #00a8c1;
border-top:45px solid transparent;
position: absolute;
bottom:0;
right: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover:after{
border-right: 65px solid #00a8c1;
border-top:65px solid transparent;
}
.btn:hover,
.btn:focus,
.btn:active,
.btnExam:hover,
.btnExam:focus,
.btnExam:active {
color:#fff;
outline: none;
}
.btnExam {
border-radius: 45px !important;
max-width: 300px;
margin: 0 auto;
display: block;
text-align: center;
background: #00a9bf;
padding: 25px 10px;
color: #fff;
font-size: 18px;
}
form label.question{
text-transform: none;
font-size: 16px;
}
.examWrapper{
margin-bottom: 20px;
}
.examBox label{
text-transform: none;
font-size: 16px;
padding-left: 5px;
}
.submit{
margin-top: 50px;
margin-bottom: 20px;
}
.submit-form input {
border-radius: 50px;
margin: 20px 0;
}
.forgot-password{
text-align: right;
}
.forgot-password a{
color:#00a8c1;
font-weight: 700;
font-size: 14px;
text-decoration: underline;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.forgot-password a:hover{
color: #007182;
}
.navbar-toggle .icon-bar{
background: #bdbdbd;
}
.slider-for{
max-width: 1099px;
margin: 0 auto;
margin-bottom: 20px;
padding: 0 70px;
}
.slider-for .slick-slide{
/*padding: 35px;*/
}
.slider-for img{
/*box-shadow: 0 0 35px rgb(0 0 0 / 7%);*/
}
.slick-slide{
height: auto;
}
.slider-nav{
/*max-width: 1099px;*/
margin: 0 auto;
padding: 20px 0px;
background: #f0f0f0;
margin-top: 15px;
}
.slider-nav .slick-slide{
padding: 20px 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slider-nav .slick-slide:hover img{
box-shadow: 0 0 15px rgb(0 0 0 / 7%);
}
.slider-nav .slick-center img,
.slider-nav .slick-center:hover img{
box-shadow: 0 0 20px rgb(0 0 0 / 15%);
}
.slick-next:before,
.slick-prev:before{
display: none;
}
.slick-next,
.slick-next:hover,
.slick-next:focus{
right: -10px;
border-radius: 50%;
width: 70px;
height: 70px;
background-image: url(../img/arrow-right.png);
background-repeat: no-repeat;
background-position: center;
background-size: 48px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slick-prev,
.slick-prev:hover,
.slick-prev:focus{
left: -10px;
border-radius: 50%;
width: 70px;
height: 70px;
background-image: url(../img/arrow-left.png);
background-repeat: no-repeat;
background-position: center;
background-size: 48px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slick-prev:hover,
.slick-next:hover{
background-color: #fff;
}
.slider-nav .slick-slide:hover{
cursor: pointer;
}
.slide-number{
text-align: center;
}
.login-form .glyphicon {
float: left;
margin: 21px 10px 21px 15px;
}
.form-control.login-input {
width: calc(100% - 50px);
}
.message {
text-align: center;
}
table.table-trainings {
margin: 30px 0 50px;
}
table.table-trainings tr td {
padding: 10px;
color: #727272;
font-size: 14px;
/*text-transform: uppercase;*/
font-weight: 400;
vertical-align: middle;
}
.table-trainings tr td a {
color: black;
font-weight: 600;
font-size: 16px;
}
.table-trainings .training-icon {
width: 128px;
}
.table-trainings tr td:nth-child(2) {
width: 30%;
}
.table-trainings tr td:last-child {
text-align: right;
}
.show-training {
display: inline-block;
padding: 10px;
background: #00a9bf;
border-radius: 25px;
color: white !important;
font-weight: 500;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.show-training:hover{
background: #007182;
}
.table-striped>tbody>tr{
border-radius: 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgb(255 255 255 / 80%);
border-radius: 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.table-trainings tr:hover{
box-shadow: 0 0 25px rgb(0 0 0 / 6%);
position: relative;
background-color: rgb(255 255 255);
}
.table-trainings tr:nth-of-type(odd):hover{
background-color: #ffffff;
}
.table.table-trainings>tbody>tr>td{
border-top: 0;
}
.table-trainings tr td:first-child{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.table-trainings tr td:last-child{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.quiz100{
font-weight: 800;
color:#00aabe;
}
.quizDate{
font-size: 13px;
}
/* media queries */
@media (max-width:1199px){
}
@media (max-width:991px){
h1 {
font-size: 25px;
}
h2 {
font-size: 25px;
}
.container>.navbar-collapse{
position: absolute;
background: #fff;
width: 100%;
left: 0;
margin: 0;
text-align: left;
}
#menu ul li {
display: block;
}
}
@media (max-width:767px){
#menu {
display: block;
padding:0;
}
#menu ul li {
display: block;
}
.topRight {
display: block;
float: none;
margin:0;
padding-top: 5px;
border-top: 1px solid #ededed;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
#menu a {
padding: 8px 14px;
border:none;
}
#menu a:hover,
#menu a.active{
border:none;
}
#menu a:after{
display: none;
}
.container>.navbar-collapse{
padding: 15px;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
text-align: center;
}
.navbar-header {
position: relative;
z-index: 100;
background: #fff;
}
.navbar-brand>img{
width: 150px;
}
.topRight ul{
display: block;
margin: 10px 0;
}
.topRight a.logout{
margin-left: 0;
padding: 8px;
text-align: center;
color: #fff;
}
.topRight a.logout:hover{
color: #fff;
}
.log-out li{
display: block;
}
.pr30{
padding-right: 0;
}
.slick-next, .slick-next:hover, .slick-next:focus,
.slick-prev, .slick-prev:hover, .slick-prev:focus{
width: 30px;
height: 30px;
background-size: 24px;
}
.navbar-header {
padding: 10px 0;
}
.navbar-brand{
margin-top: 8px;
}
.slider-for{
padding: 0 30px;
}
.slider-nav{
padding: 0;
}
.slider-nav .slick-slide {
padding: 10px 5px;
}
.slider-nav .slick-center img, .slider-nav .slick-center:hover img {
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.slider-nav .slick-slide:hover img {
box-shadow: 0 0 10px rgb(0 0 0 / 7%);
}
.main{
min-height: calc(100% - 151px);
}
}
@media (max-width:520px){
h1 {
font-size: 20px;
}
.person-img {
width: 70px;
height: 70px;
}
.person-name {
width: calc(100% - 70px);
}
.btn-round {
padding: 5px 10px;
}
.fund-count {
font-size: 18px;
}
.fund-count span {
font-size: 13px;
}
}
@media (max-width:480px){
.donate-profile .btn-round {
position: relative;
right: 0;
top: 0;
transform: none;
margin-top: 15px;
}
.person-name{
padding-right: 0;
text-align: left;
}
.donate-profile{
text-align: center;
}
.account-name p {
font-size: 16px;
}
.account-name p span {
font-size: 11px;
}
.navbar-brand {
padding: 5px 10px;
margin-right: 0px;
padding-right: 5px;
}
.account-name{
padding-left: 10px;
}
.btn-blue{
float: none;
padding: 5px 7px;
background: rgba(0, 0, 0, 0.05);
}
h3{
margin-bottom: 10px;
display: block;
}
.login-box{
padding: 45px 30px;
}
form label{
padding: 0 10px;
}
.login-page{
padding: 20px 0;
}
.actions a {
font-size: 14px;
margin: 5px 3px;
}
.download {
padding: 2px;
padding-left: 15px;
background-size: 14px;
}
.slick-list{
padding: 0 20px!important;
}
}
@media (max-width:350px){
.login-box{
padding: 30px 25px;
}
.login-box h1{
margin-bottom: 30px;
}
.submit {
margin-top: 20px;
}
.fund-count {
margin-top: 15px;
float: none;
}
}