/* Design By SP_CREATIVE_ART 
   2018 */

* {
  margin: 0;
  padding: 0;
}
#container {
   min-height: 100%;
}
#main {
  overflow : auto;
  padding-bottom: 100px;
}
.footer {
   position: relative;
   width:100%;
   height: 60px;   /* Height of the footer */
   background:#f1f1f1;
   clear: both;
   margin-top: -100px;
   border-top: 2px solid #e6e6e6;
}
html, body {
  height: 100%;
}
a{
	text-decoration: none !important;
}
.bg-gray {
  background-color: #f1f1f1;
}
.logo {
    height: 75px;
}
.logo-img {
  max-height: 75px
}
.navbar-light .navbar-nav .nav-link {
	color: #fff !important;
  padding-right: 25px !important;
}
.navbar-light .navbar-nav .nav-link:hover {
	color: #ffa525 !important;
}
.dash-menu .navbar-light .navbar-nav .nav-link:hover {
  color: #222 !important;
}
.section-one {
	background-image: url("../img/cours_de_langue_africaines_slide-bilal.jpg");
	background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    height: 895px;
    width: 100%;
    background-position: top center;
}
.form-group > label {
    font-weight: bold;
    width: 100%;
}
@media only screen and (max-width : 480px) {
  .section-one {
	  background-image: url("../img/mobile-cours_de_langue_africaines_slide-bilal.jpg");
	  background-repeat: no-repeat;
	  color: #fff;
	 /* height: 100% !important; */
	  display: inline-block;
	  float: left;
		width: 100%;
	}
	.section-one > .container
	{
		float: left;
		width: 100%;
	}
	.sec-two > .container > .row
	{
		float: left;
	}
  .Main-headding h1 {
	margin-top: 25px !important;
	margin-bottom: 25px !important;
  }
}
.login-btn {
	background-color: #fff;
	color: #222 !important;
	border: 2px solid #fff;
	border-radius: 22px;
	display: block;
    padding: .5rem 2rem;
    margin: 0 5px;
}
.login-btn:hover {
	background-color: transparent;
	color: #fff !important;
}
.Main-headding h1 {
	margin-top: 150px;
	margin-bottom: 30px;
  color: #fff;
}
@media only screen and (max-width : 480px) {
  .Main-headding h1 {
    margin-top: 150px;
    margin-bottom: 30px;
    font-size: 30px;
}
}
.warning-btn {
	background-color: #ffa525;
	color: #fff;
	font-size: 13pt;
	padding: 10px 40px;
	border-radius: 22px;
}
.warning-btn:hover {
	background-color: #fff;
	color: #ffa525
}

.flag-sec {
  margin-top: 10%;
}
@media only screen and (max-width : 480px) {
  .mob {
    display: block;
  }
}
@media only screen and (max-width : 480px) {
  .flag-sec {
     display: none;
  }
}
@media only screen and (min-width : 480px) {
  .mob {
    display: none;
  }
}
.mob a {
  width: 50%;
  display: block;
  margin: auto;
  margin-top: 70%;
}
.flag-sec a {
    margin-top: 20px;
    padding: 0;
}

@media only screen and (max-width : 480px) {
  .flag-sec a {
    margin: 40px;
    padding: 30px 25px;
    background-color: transparent;
    border: 0;
  }
}
@media only screen and (max-width : 480px) {
  .sec-two img {
     margin: auto;
     width: 75%;
     display: block;
  }
}
.sec-two {
	background-color: #f6f6f6;
	color: #222;
	padding: 30px 0; 
}
.sec-two h3 {
	margin-top: 75px;
}
.sec-three {
	background-image: url("../img/apprentissage_de_langues_africaines-bilal.jpg");
	width: 100%;
    background-size: 100% 117%;
    background-repeat: no-repeat;
    padding: 75px 0;
    height: 600px;
    text-align: right;
    color: #fff;
    background-position: center;
}
.sec-three .col-md-6 {
	padding: 0 !important;
}
.blue-box {
    padding: 122px 0px;
    text-align: left;
}
.blue-box p {
    padding: 20px 0px;
}
.sec-four {
	padding: 25px 0;
}
.sec-four h3 {
	padding: 25px 0 50px 0;
}
.sec-four h5 {
	padding: 30px 0 5px 0;
}
.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.sec-five {
	background-color: #f1f1f1;
}
.sec-five a {
    background-color: #222;
    color: #fff;
    padding: 8px 30px;
    border: 2px solid #222;
    border-radius: 22px;
}
.sec-five a:hover {
    background-color: #f1f1f1;
    color: #222;
    border: 2px solid #222;
}
@media only screen and (max-width : 480px) {
  .sec-five img {
    margin-top: 30px;
  }
}
.sec-five {
	padding: 50px 0;
}
.sec-five h3 {
	padding: 5px 0 10px 0;
	margin-top: 10px
}
.sec-five p {
	padding: 0 0 10px 0;
}
.sec-six {
	background-color: #fcdc61;
	background-image: url("../img/apprendre_une_langue_africaine_afrilangues.jpg");
	background-size: contain;
    background-repeat: no-repeat;
    padding: 75px 0;
    height: 521px;
    text-align: right;
    color: #000;
    background-position: center;
}
.sec-six-content {
    margin-top: 120px;
}
@media only screen and (max-width : 480px) {
  .sec-six {
	background-image: url("../img/apprendre_une_langue_africaine_afrilangues.jpg");
	background-size: cover;
	background-repeat: no-repeat;
    height: auto;
}
}
.sec-footer {
	padding: 70px;
	background-color: #f1f1f1;
	color: #222;
}
.sec-footer ul {
    list-style-type: none;
    /*padding: 10px 0 0 30px;*/
}
.sec-footer ul li {
	padding: 0 0 10px 0;
}
.dash-menu {
	width: 100%;
	background: #f12711;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.text-logo {
	font-size: 25pt;
	font-weight: 700;
	color: #fff;
}
.text-logo:hover {
	color: #222;
}
.static-icon {
    font-size: 25pt;
	font-weight: 700;
	color: #fff;
    margin-left: 25px;
}
.static-icon:hover {
	color:  #ffa525;
}
.dash-menu .nav-link {
	padding: 0 !important;
}
.card-one {
	background-color: #fff;
	/*border-bottom: 3px solid #d8d1c8;*/
	border-radius: 0px;
	color: #222;
	padding: 20px;
	margin: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.main-contents {
	background-color: #f1f1f1;
	padding: 25px 0
}
.card-three {
  background-color: #fff;
  /*border-bottom: 3px solid #d8d1c8;*/
  border-radius: 22px 22px 0 0;
  color: #222;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.card-four {
  background-color: #fff;
  /*border-bottom: 3px solid #d8d1c8;*/
  border-radius: 0 0 22px 22px;
  color: #222;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

/* Progress */

.progress-circle {
   font-size: 20px;
   margin: 20px;
   position: relative; /* so that children can be absolutely positioned */
   padding: 0;
   width: 5em;
   height: 5em;
   background-color: #dcdcdc; 
   border-radius: 50%;
   line-height: 5em;
}

.progress-circle:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: white;
    content: " ";
}
/* Text inside the control */
.progress-circle span {
    position: absolute;
    line-height: 5em;
    width: 5em;
    text-align: center;
    display: block;
    color: #222;
    z-index: 2;
}
.left-half-clipper { 
   /* a round circle */
   border-radius: 50%;
   width: 5em;
   height: 5em;
   position: absolute; /* needed for clipping */
   clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/ 
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
   clip: rect(auto,auto,auto,auto);
}
.value-bar {
   /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/ 
   position: absolute; /*needed for clipping*/
   clip: rect(0, 2.5em, 5em, 0);
   width: 5em;
   height: 5em;
   border-radius: 50%;
   border: 0.45em solid #4caf50; /*The border is 0.35 but making it larger removes visual artifacts */
   /*background-color: #4D642D;*/ /* for debug */
   box-sizing: border-box;
  
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
   /*Progress bar for the first 50%, filling the whole right half*/
   position: absolute; /*needed for clipping*/
   clip: rect(0, 5em, 5em, 2.5em);
   background-color: #53777A;
   border-radius: 50%;
   width: 5em;
   height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }


/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }

/* prograsss end */ 

/* card 2 */
.card-two h1 {
    font-size: 80px;
    padding: 20px;
}

.card-two {
    background-color: #fff;
    border-radius: 22px 22px 0 0 ;
    border-bottom: 3px solid #d8d1c8;
    color: #fff;
    padding: 10px;
    margin-top: 20px;
    background: rgb(252, 190, 27);
    background: -moz-linear-gradient(top, rgba(252, 190, 27, 1) 1%, rgba(248, 86, 72, 1) 99%);
    background: -webkit-linear-gradient(top, rgba(252, 190, 27, 1) 1%, rgba(248, 86, 72, 1) 99%);
    background: linear-gradient(to bottom, rgba(252, 190, 27, 1) 1%, rgba(248, 86, 72, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcbe1b', endColorstr='#f85648', GradientType=0);
}
.star {
    padding: 10px 20px;
    margin: 2px;
}
.foot-menu {
    list-style-type: none;
    margin: auto;
    width: 100%;
}
.foot-menu li {
    float: left;
    padding: 20px;
}
.center {
    margin: auto;
    width: 50%;
}

/*    */ 

.user-profile {
    width: 150px;
    height: 150px;
    margin: 25px;

}

.orange-btn {
    background-color: #ffa525;
    color: #fff;
    border-radius: 22px;
    padding: 7px 30px;
    display: block;
    margin: 0 auto;

}
.orange-btn:hover {
    background-color: #222;
    color: #fff;
}
.player-btn {
    background-color: #ff7400;
    color: #fff;
    border-radius: 22px;
    padding: 20px 20px;
    display: block;
    margin: 0 auto;
    font-size: 20px;
}
.player-btn:hover {
    background-color: #222;
    color: #fff;
}
.hello {
  font-size: 70px;
  font-weight: 700;
  margin: 100px 0 10px 0;
  color: rgb(255, 152, 0);
}
.sub-hello {
  color: #9e9e9e;
}

/* Audio */
.audio-player audio {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
.Listen {
  background-color: #f1f1f1;
}
/* match */ 

.p-match-eng {
  margin-top: 50px;
  margin-bottom: 20px;
}
.p-match-other {
  margin-top: 50px;
  margin-bottom: 20px;
}
.match-eng {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  background-color: #f1f1f1;
  display: inline-block;
  color: #222;
  margin: 5px;
  border-radius: 5px;
}
.match-other {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  background-color: #f1f1f1;
  display: inline-block;
  color: #222;
  margin: 5px;
  border-radius: 5px;
}
.match-active, .match-eng:hover {
  padding: 10px 20px;
  background-color: #ffa525;
  color: #fff;
  margin: 5px;
  border-radius: 5px;
}
.match-active-b, .match-other:hover {
  padding: 10px 20px;
  background-color: #ffa525;
  color: #fff;
  margin: 5px;
  border-radius: 5px;
}
.p-match {
  margin-top: 50px;
}
.static h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 50pt;
}
.color-green {
  color: #4caf50;
}
.color-orange {
  color: #ffa525;
}
.color-red {
  color: #e91e63;
}

.log-in .card-one {
  margin: auto;
  width: 50%;
  margin-top: 50px;
  padding: 50px
}
@media only screen and (max-width : 480px) {
  .log-in .card-one {
  margin: auto;
  width: 100%;
  margin-top: 50px;
   padding: 20px
}
}

.log-in h4 {
  margin: 25px 0;
}
.log-in input {
  margin-top: 10px;
  margin-bottom: 5px;
}
.log-in p {
  margin: 20px 0 0 0 ;
}
.orange-btn-full {
    background-color: #ffa525;
    color: #fff;
    border-radius: 5px;
    border: 2px solid #ffa525;
    padding: 7px 0;
    width: 100%;
}
.orange-btn-full:hover {
    background-color: #222;
    color: #fff;
    border-radius: 5px;
    border: 2px solid #222;
    padding: 7px 0;
    width: 100%;
}
.fill h5 {
  margin-top: 8px !important;
  margin-bottom: 75px !important;
  padding: 15px 25px;
  background-color: #fff3d0;
  border: 2px solid #ffa726;
  border-radius: 10px;
  margin: auto;
  width: 50%;
  color: #FF9800;
}
@media only screen and (max-width : 480px) {
  .fill h5 {
      width: 100%;
      text-align: center;
  }
}
.fill .card-one {
  padding: 25px 40px;
}
.fill h3, .multi h3 {
  margin: auto;
  width: 50%;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media only screen and (max-width : 480px) {
  .fill h3, .multi h3 {
    width: 100%;
    font-size: 20px;
  }
}
.input-txt {
    margin: auto;
    width: 100%;
    background-color: #d5edff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid #4fc3f7;
    font-size: 20px
}
.fill .input-txt {
    margin: auto;
    width: 50%;
    background-color: #d5edff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid #4fc3f7;
    font-size: 20px
}
@media only screen and (max-width : 480px) {
.fill .input-txt {
    margin: auto;
    width: 100%;
}
}
.fill label {
  margin: auto;
    width: 50%;
}
@media only screen and (max-width : 480px) {
.fill label {
  margin: auto;
    width: 100%;
}
}

.multi label {
    width: 100;
}
.multi .input-txt {
    width: 100%;
}

/* The container */
 .fill .containers, .multi .containers {
    display: block;
    position: relative;
    padding: 10px 50px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #d5edff;
    border-radius: 10px;
    border: 2px solid #4fc3f7;
}

/* Radio button */

/* Hide the browser's default radio button */
.fill .containers input, .multi .containers input{
    position: absolute;
    opacity: 0;
    cursor: pointer;


}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    margin-top: 15px;
    margin-left: 15px;
}

/* On mouse-over, add a grey background color */
.containers:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containers input:checked ~  .checkmark {
    background-color: #2196F3;
    margin-top: 15px;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.containers input:checked ~ .checkmark:after {
    display: block;
}

/* Radio button */

/* Hide the browser's default radio button */
.fill .containers input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


.fb {
  background-color: #1565C0;
  color: #fff;
  padding: 8px 22px;
  border-radius: 5px;
}
.fb:hover {
  background-color: #f1f1f1;
  color: #1565C0;
  padding: 8px 22px;
  border-radius: 5px;
}
.google {
  background-color: #f44336;
  color: #fff;
  padding: 8px 30px;
  border-radius: 5px;
}
.google:hover {
  background-color: #f1f1f1;
  color: #f44336;
  padding: 8px 30px;
  border-radius: 5px;
}
.fill .object {
  display: block;
  width: 50%;
  margin: auto;
}
.fill button {
  display: block;
  width: 150px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sec-footer li a{
  color: #222;
}
.sec-footer p a {
  padding: 5px 10px;
  font-size: 30px;
  color: #222 !important;
}
@media only screen and (max-width : 480px) {
  .sec-footer p a {
  padding: 5px 5px;
}
}
.sec-footer p a:hover {
  color: #ffa525 !important;
}

/* Tap Styles */
.text{
  width:150px;  
  margin-bottom: 5px;
  margin-right: 20px;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  border: 2px solid #2196f3;
  text-align: center;
}
.pt-30{
  padding-top: 30px;
}
#sentence{
  padding: 10px 10px;
  margin-bottom: 20px;
  background-color: #2196f32e;
  border: 2px solid #2196f3;
  border-radius: 5px;
  min-height: 70px
}
.text_style{
  padding-top: 20px;
  color: #fff;
  font-size: 20px;
}
.blue-btn-tap {
  background-color: #ff7400;
  color: #fff;
  border-radius: 22px;
  padding: 7px 22px;
  float: right;
}
.blue-btn-tap:hover {
  background-color: #222;
  color: #fff;
  border-radius: 22px;
  padding: 7px 22px;
}
/* End Tap Styles */

.blue-btn {
  background-color: #03A9F4;
  color: #fff;
  border-radius: 22px;
  padding: 7px 22px;
  margin: auto;
  display: block;
  width: 50%;
}
.blue-btn:hover {
  background-color: #222;
  color: #fff;
}
@media only screen and (max-width : 480px) {
  .blue-btn {
    margin-bottom: 5px;
  }
	.sec-three {
		height: 400px !important;
	}
}
@media only screen and (max-width : 767px) {
  .sec-three {
	height: 625px;
  }
}
.progress-bar {
  background: #56ab2f !important;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #a8e063, #56ab2f) !important;  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8e063, #56ab2f) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.chat-img {
  width: 60px;
}

/* chat */
.chat-box {
    border: 2px solid #03A9F4;
    background-color: #B3E5FC;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}

.darker {
    border-color: #ff9800;
    background-color: #FFE0B2;
}

.chat-box::after {
    content: "";
    clear: both;
    display: table;
}

.chat-box img {
    float: left;
    max-width: 60px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
}

.chat-box img.right {
    float: right;
    margin-left: 20px;
    margin-right:0;
}
.ans {
    padding: 5px 15px;
    border-radius: 5px;
    border: 2px solid #222;
    width: 150px;
    text-align: center;
}

 #options {
  list-style: none;
  text-align: center;
}

li.a.ui-draggable.ui-draggable-handle {
  display: inline-block;
   padding: 5px 15px;
    border-radius: 5px;
    border: 2px solid #222;
    width: 150px;
    text-align: center;
    height: 40px;
    margin-right: 40px;
    margin-left: 40px;
    cursor: pointer;
}
span>li.a.ui-draggable.ui-draggable-handle{
  display: inline-block !important;
    padding: 0px !important;
    height: 40px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    border: none;
}
.answer {
    border-radius: 5px;
    border: 2px solid #222;
    width: 150px;
    display: inline-block;
    top: 11px;
    height: 40px;
    position: relative;
}
i.fa.fa-times {
    cursor: pointer;
    padding-left: 10px;
}
 .question img {
    width: 100%;
    margin: 20px 0;
}
/* end */

.drop-itm {
  padding: 3px 5px;
  background-color: #f1f1f1;
  margin-bottom: 2px;
}
.drop-itm:hover, .drop-itm a:hover{
  background-color: #ff9800;
  color: #fff;

}
.drop-itm p {
  font-size: 12px
}
.drop-itm a {
  color: #222;
}
.second-nav nav {
  background-color: #f1f1f1 !important;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.nv {
  background-color: #ff7400 !important;
  color: #fff !important;
  padding: 5px 20px;
  margin: 2px 5px;
  border-radius: 5px;
  min-width: 100px !important;
  text-align: center;
}
.nv:hover {
  background-color: #f1f1f1 !important;
  color: #ff9800 !important;
  box-shadow: 2px 2px 10px 0px #03a9f496;
}
.links.active {
  background-color: #66BB6A !important;
}
.linka ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 0 0 30px 30px;
    border: 2px solid #81d4fa;
}

.linka li {
    float: center;
    display: inline-block;
}

.linka li a {
    display: block;
    color: #222;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.linka li a:hover, .linka .active {
    background-color: #f1f1f1;
}
.list-box {
  background-color: #f1f1f1;
  color: #222;
  margin-top: 5px;
}
.img-lesson {
  border: 5px solid #fff;
  border-radius: 50%;
}
.btn-link {
  text-decoration: none !important;
}
#headingOne, #headingTwo, #headingThree{
  cursor: pointer;
}
.card-six {
  padding: 10px;
  width: 100%;
  margin: auto;
}
.card-seven {
  padding: 10px;
  width: 100%;
  margin: auto;
  margin-top: 25px;
}
.card-seven p {
  padding: 20px 0;
}
.button-lesson {
  font-size: 30px;
  padding: 15px 25px;
  background-color: #f1f1f1;
  border-radius: 50%;
  color: #222;
}
.button-lesson:hover, .button-lesson.active  {
  background-color: #ff9800;
  color: #fff;
}
.button-lesson.active:hover {
  background-color: #222;
}
.mobile-menu {
  margin: 20px 15px;
  margin-bottom: 0 !important;
}
@media only screen and (min-width : 480px) {
  .mobile-menu {
  display: none
}
}
@media only screen and (max-width : 480px) {
  .pc-menu {
  display: none
}
}
.community .card {
   border-radius: 22px !important;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

 /* search */

.search .form-control {
  border-radius: 22px 0 0 22px !important;
}

.search .orange-btn {
    background-color: #ffa525;
    color: #fff;
    border-radius: 0 22px 22px 0;
    padding: 7px 30px;
    display: block;
    margin: 0 auto;

}

/* comment */ 
.comment-box {
    margin-top: 30px !important;
}
/* CSS Test end */

.comment-box img {
    width: 50px;
    height: 50px;
}
.comment-box .media-left {
    padding-right: 10px;
    width: 65px;
}
.comment-box .media-body p {
    border: 1px solid #ddd;
    padding: 10px;
}
.comment-box .media-body .media p {
    margin-bottom: 0;
}
.comment-box .media-heading {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 7px 10px;
    position: relative;
    margin-bottom: -1px;
}
.comment-box .media-heading:before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 10px;
    left: -6px;
}

.card-green {
  background-color: #8bc34a;
  /*border-bottom: 3px solid #d8d1c8;*/
  border-radius: 0px;
  color: #222;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.card-red {
  background-color: #e91e63;
  /*border-bottom: 3px solid #d8d1c8;*/
  border-radius: 0px;
  color: #222;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.card-yellow {
  background-color: #cfd8dc;
  /*border-bottom: 3px solid #d8d1c8;*/
  border-radius: 0px;
  color: #222;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.notification h4 {
  color: #fff;
}

.fixed-buttom {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  margin-bottom: 0;
}
.payments-btn-wrap
{
	text-align: center;
}
.section-one a#navbarDropdownMenuLink {
    background: url("../img/earth.svg");
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: right;
	padding-right: 42px !important;
}
.section-one a#navbarDropdownMenuLink:after {
    display: none;
}