*{
  margin:0 0 0 0;
  padding: 0 0 0 0;
  webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font-family: "proxima-nova", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  color:#777c93;
  background-color: #f5f4f5;
  min-width: 800px;
}

a{
  color:#388CF3;
  text-decoration: none;
}
a:hover{
  color: #1546D2;
}

p{
  color:#333;
}

.button{
  display: inline-block;
  background: #388CF3;
  margin-top: 10px;
  border:none;
  border-radius: 2px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  color:#fff;
  font-size: 0.9em;
  padding:10px 18px;
}

.button:hover{
  cursor: pointer;
  color:#fff;
  background: #1546D2;
}

@-webkit-keyframes animation-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes animation-rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes animation-rotate {
  100% {
    -o-transform: rotate(360deg);
  }
}
@keyframes animation-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.button--loading {
  position: relative;
  cursor: wait;
  color:transparent !important;
}
.button--loading:before {
  margin: -13px 0 0 -13px;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  content: '';
  -webkit-border-radius: 24px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 24px;
  -moz-background-clip: padding;
  border-radius: 24px;
  background-clip: padding-box;
  border: rgba(255, 255, 255, 0.25) 2px solid;
  border-top-color: #fff;
  -webkit-animation: animation-rotate 750ms linear infinite;
  -moz-animation: animation-rotate 750ms linear infinite;
  -o-animation: animation-rotate 750ms linear infinite;
  animation: animation-rotate 750ms linear infinite;
}
.button--loading span,
.button--loading:hover span,
.button--loading:active span {
  color: transparent;
  text-shadow: none;
}

.min-title{
  display: block;
  font-weight: 300;
  font-size: 0.9em;
  margin-bottom: 10px;
}

#wrapper{
  display: flex;
  width: 100%;
  min-width: 750px;
  /*padding: 0 10%;*/
  justify-content: center;
  margin: 0 auto;
}

#wrapper #content{
  width: 58%;
  margin-top: 35px;
}

#wrapper #sidebar{
  width: 28.5%;
  /*margin-top: 27px;*/
  /*background: #f9fcff;*/
  padding:26px;
  border-left:1px solid #e2e2e2;
  margin-left: 4%;
}

#wrapper #sidebar .subscriptions{
  margin-bottom: 40px;
}

#wrapper #sidebar .subscriptions .title{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 16px;
  margin-bottom: 5px;

  color:#999;
  font-size: 0.75em;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

#wrapper #sidebar .subscriptions .title .learner{
  padding:8px 16px;
  background: #FE2CFE;
  line-height: 1;
  border-radius: 90px;
  color:#fff;
  font-size:0.9em;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#wrapper #sidebar .subscriptions .start_learning{
  display: block;
  background: #fff;
  border:1px solid #e2e2e2;
  border-radius: 2px;
  padding:22px;
  font-size: 0.9em;
}

#wrapper #sidebar .subscriptions .start_learning .call{
  font-size: 1.2em;
  color:#111;
  line-height: 1.45;
  margin-bottom: 2px;
}

#wrapper #sidebar .subscriptions .start_learning .call_sub{

  color:#999;
  font-size: 1.1em;
  line-height: 1.45;

}

#wrapper #sidebar .subscriptions .start_learning .button{
  margin-top: 20px;
}

#wrapper #sidebar .subscriptions li{
  display: flex;
  width: 100%;
  background: #fff;
  padding:8px;
  list-style: none;
  margin-bottom: 12px;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  font-size:0.8em;
  justify-content: space-between;
  color:#666;
}

#wrapper #sidebar .subscriptions li:hover{
  border-color:#1546D2;
  cursor: pointer;
}

#wrapper #sidebar .subscriptions li .content{
  display: flex;
}

#wrapper #sidebar .subscriptions li .content .ico{
  height: 70px;
  width: 60px;
  background-size: cover !important;
  background-position: center !important;
  margin-right: 8px;
}

#wrapper #sidebar .subscriptions li .content .data{

}

#wrapper #sidebar .subscriptions li .content .data .title_d{
  font-size: 1.2em;
  color:#111;
  margin-top: 5px;
  margin-bottom: 3px;
}

#wrapper #sidebar .subscriptions li .content .data .resources{
  display: flex;
  color:#999;
  margin-top: 8px;
}

#wrapper #sidebar .subscriptions li .content .data .resources .icon{
  display: inline-block;
  margin-right: 3px;
  font-size: 1.2em;
  color: #1546D2;
}

#wrapper #sidebar .subscriptions li .options{

}

#wrapper #sidebar .courses{
  margin-bottom: 40px;
}

#wrapper #sidebar .courses .title{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  margin-bottom: 5px;
  margin-top: 10px;
  padding-bottom: 16px;

  color:#999;
  font-size: 0.75em;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

#wrapper #sidebar .courses .title .teacher{
  padding:8px 16px;
  background: #34E842 ;
  line-height: 1;
  border-radius: 90px;
  font-weight: 500;
  color:#fff;
  font-size:0.9em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#wrapper #sidebar .courses .start_teaching{
  display: block;
  background: #fff;
  border:1px solid #e2e2e2;
  border-radius: 2px;
  padding:22px;
  font-size: 0.9em;
}

#wrapper #sidebar .courses .start_teaching .call{
  font-size: 1.2em;
  color:#111;
  line-height: 1.45;
  margin-bottom: 2px;
}

#wrapper #sidebar .courses .start_teaching .call_sub{
  color:#999;
  font-size: 1.1em;
  line-height: 1.45;
}

#wrapper #sidebar .courses .start_teaching .button{
  margin-top: 20px;
}

#wrapper #sidebar .courses .start_teaching .new{
  margin-top: 10px;
}

#wrapper #sidebar .courses li{
  list-style: none;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e2e2;
  font-size:0.8em;
  justify-content: space-between;
  color:#666;
  width: 100%;
}

#wrapper #sidebar .courses li .course-item{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  width: 100% !important;
}

#wrapper #sidebar .courses li .course-item .buttons{
  display: flex;
  width: 100%;
  justify-content: flex-end;
  vertical-align: middle;
  align-items: center;
  text-align: right;
  color:#999;
}

#wrapper #sidebar .courses li .course-item .buttons .topics-c{
  margin-right: 20px;
}

#wrapper #sidebar .courses li .course-item .buttons .close{
  opacity: 0.5;
}

#wrapper #sidebar .courses li .course-item .buttons .close:hover{
  opacity: 1;
  color:red;
}

#header{
  display: flex;
  width: 100%;
  /*margin-bottom: 35px;*/
  background: #1546D2;
  background: #fff;
  /*box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1),inset 0 -1px 0 1px rgba(0,0,0,0.1);*/
  height: 60px;
  z-index: 9999;
  /*border-bottom: 1px solid #e2e2e2;*/
}

#header #wrapper{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: space-between;
  width: 85%;
  margin: 0 auto;
}

#header .pull-left{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#header .pull-right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#header .logo_menu{
  position: relative;
  color:#1546D2;
  font-size: 0.9em;
  background:url('../image/logo-b.png') no-repeat;
  background-size:auto 100%;
  background-position: left center;
  height: 22px;
  width: 180px;
  margin-right: 26px;
  /*border-bottom: 1px solid #1546D2;*/
}

#header .logo_menu::after{
  position: absolute;
  content: 'beta';
  margin-left:138px;
  top: -1px;
  font-size: 0.75em;
  color:#1546D2;
  opacity: 0.75;
  /*border-radius: 3px;*/
  font-style: italic;
}

#header .karma{
  display: flex;
  vertical-align: middle;
  align-items: center;
  position: relative;
  z-index: 20;
  min-width: 42px;
  min-height: 42px;
  border-radius: 90px;
  background-size: cover !important;
  background-position: center;
  margin-left: 20px;
  color:#888;
  font-weight: 300;
  font-size: 0.9em;
  color:#1c4bcf;
}

#header .karma:hover{
  cursor: pointer;
}

#header .karma b{
  display: flex;
  vertical-align: middle;
  align-items: center;
  position: relative;
  margin-right: 6px;
}

#header .karma .icon{
  margin-top: 4px;
  margin-right: 5px;
  font-size: 1.25em;
}

#header .avatar{
  position: relative;
  z-index: 20;
  min-width: 42px;
  min-height: 42px;
  border-radius: 90px;
  background-size: cover !important;
  background-position: center;
  margin-left: 15px;
}

#header .avatar:hover{
  cursor: pointer;
}

#header .avatar:active{
  box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.1);
}

#header .avatar .menu{
  display: none;
  position: absolute;
  z-index: 999;
  background: #fff;
  top:52px;
  right:0px;
  min-width: 220px;
  list-style: none;
  font-size: 0.9em;
  color:#1546D2;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 0px 1px 1px rgba(0, 0, 0, 0.1);
}

#header .avatar .menu .arrow{
  position: absolute;
  z-index: 999;
  top:-10px;
  right:10px;
  background:url('../image/arrow-up.png') no-repeat;
  background-size: cover;
  width: 21px;
  height:10px;
}

#header .avatar .menu li{
  display: block;
  text-align: left;
  border-bottom: 1px solid #e2e2e2;
  padding:13px 15px;
  font-size: 0.9em;
}

#header .avatar .menu li:hover{
  background: #f9f9f9;
}

#header .avatar .menu li a{
  display: flex;
  vertical-align: middle;
  align-items: center;
  color:#999;
  font-weight: 300;
}

#header .avatar .menu li a .icon{
  font-size: 1.2em;
  margin-right: 12px;
  color:#aaa;
}

#header .how{
  min-width: 120px;
  font-size: 0.8em;
  margin:0 30px;
  color:#1546D2;
}

#header .how:hover{
  cursor: pointer;
}

#header .head-menu{
  display: flex;
  vertical-align: middle;
  align-items: center;
  color:#1546D2;
  list-style: none;
}

#header .head-menu .or{
  margin-left: 0;
  padding:7px 9px;
  margin:0 5px;
  border-radius: 90px;
  background: #e2e2e2;
  z-index: 9;
  line-height:0.9;
}

#header .head-menu .email{
  color: #1546D2;
}

#header .head-menu .email:hover{
  cursor: pointer;
  opacity: 0.9;
  color: #777;
}

#header .head-menu .fb{
  color: #1546D2;
}

#header .head-menu .fb:hover{
  cursor: pointer;
  opacity: 0.9;
  color: #777;
}

#header .head-menu li{
  list-style: none;
  color:#888;
  font-size: 0.8em;
  margin: 0 16px;
}

#header .head-menu .new{
  display: inline-flex;
  /*background: #1546D2;*/
  color:#999;
  font-size:0.9em;
  line-height: 1;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  height: 34px;
  width: 34px;
  background: #e2e2e2;
  border-radius: 90px;
}

#header .head-menu .new .icon{
  line-height: 1;
  font-size: 1.8em;
  margin-top: 3px;
}

#header .head-menu .new:hover{
  cursor: pointer;
  color:#777;
  background: #aaa;
}

#header .head-menu .todo{
  display: inline-flex;
  color: #ED4CBA;
  height: 60px;
  /*color:#fff;*/
  font-size:0.9em;
  line-height: 1;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}

#header .head-menu .todo .icon{
  line-height: 1;
  margin-right: 12px;
  font-size: 1.4em;
  margin-top: 1px;
}

#header .head-menu .todo:hover{
  cursor: pointer;
  color: #0fc052;
}


#header input{
  width: 100%;
  border-radius: 2px;
  color:#fff !important;
}

#header .searchBar{
  width: 300px;
}

#header .searchBar .selectize-input{
  width: 100%;
  /*border-radius: 2px;*/
  padding:10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border:none;
  color:#fff !important;
}

#header .searchBar .not-full #searchBar-selectized{
  width: 200px !important;
}

/* Category Nav */
#category-nav{
  display: block;
}

#category-nav ::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

#category-nav ::-webkit-scrollbar-track {
    background:#fff;
}

#category-nav ::-webkit-scrollbar-thumb {
    background: #ccc;
    /*border-radius: 5px;*/
}

#category-nav .holder{
  display: flex;
  overflow-y: auto;
  width: 100%;
  margin: 0 auto;
  background: #e9e9e9;
}

#category-nav .holder li{
  list-style: none;
  text-decoration: none;
  padding:18px 18px 18px 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  font-size:0.9em;
  line-height: 1;
  color:#fff;
  border-radius: 0px;
  margin:0 0 0 0px;
}

#category-nav .holder li .icon{
  margin-right: 5px;
  line-height: 1;
}

#category-nav .holder li:hover{
  cursor: pointer;
  opacity: 0.85;
}

#alcamy-welcome{
  background: #fff;
  padding:50px 40px;
  border-bottom: 1px solid #e2e2e2;
}

#alcamy-welcome #wrapper{
  width: 90%;
  margin: 0 auto;
}

#alcamy-welcome .content{
  display: flex;
  justify-content: space-between;
  width: 100%;
  vertical-align: middle;
  align-items: center;
}

#alcamy-welcome .content .left{
  width: 68%;
}

#alcamy-welcome .content .left .title{
  color:#000;
  font-size: 2em;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.45;
}

#alcamy-welcome .content .left .des{
  line-height: 1.4;
  color:#888;
  font-size: 1.1em;
  font-weight: 300;
  width: 75%;
}

#alcamy-welcome .content .left .signup{
  display: flex;
  margin-top:30px;
}

#alcamy-welcome .content .left .signup .btn{
  display: flex;
  vertical-align: middle;
  align-items: center;
  background: #e2e2e2;
  padding:0 18px;
  height: 50px;
  border-radius: 3px;
  margin-right: 10px;
  font-size: 0.9em;
  color:#444;
}

#alcamy-welcome .content .left .signup .btn:hover{
  cursor: pointer;
  opacity: 0.85;
}

#alcamy-welcome .content .left .signup .facebook{
  padding:0 16px;
  background: #334f8d;
  color:#fff;
}

#alcamy-welcome .content .left .signup .facebook .icon{
  height: 26px;
  width: 26px;
  background: url('../image/social/facebook_w.png') no-repeat;
  background-size: cover !important;
  margin-right: 12px;
}

#alcamy-welcome .content .right{
  text-align: center;
  width: 32%;
}


/* BASE QUIZ STYLES */
/* These styles ensure that the necessary elements are hidden for toggling */

/* DO NOT EDIT UNLESS YOU KNOW WHAT YOU ARE DOING!! */

.startQuiz,
.nextQuestion,
.backToQuestion,
.questions li.question,
.questions li.question .responses,
.questions li.question .responses .correct,
.questions li.question .responses .incorrect,
.quizResults {
    display: none;
}

/* If response messages are disabled or only shown on quiz completion,
   nextQuestion button IS checkAnswer button - so it must be displayed */
.nextQuestion.checkAnswer {
    display: block;
}

ol.questions,
ul.answers,
ul.responses,
ol.questions li,
ul.answers li,
ul.responses li {
    list-style-type: none;
}

/* Accessibility */
.quizName span:first-child {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#slickQuiz{
  border:1px solid #e2e2e2;
  padding:22px;
  border-radius: 4px;
  line-height: 1.45;
  background: #fff;
}

#slickQuiz .quizName{
  font-size: 1.2em;
  font-weight: 500;
  color:#333;
}

#slickQuiz .quizName{
  font-size: 1.2em;
  font-weight: 500;
  color:#333;
  margin-bottom: 5px;
}

#slickQuiz .quizHeader{
  margin-top: 5px;
  margin-bottom: 0px;
}

#slickQuiz .quizHeader .startQuiz{
  display: inline-block;
  background: #388CF3;
  margin-top: 10px;
  border-radius: 2px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  color:#fff;
  font-size: 0.9em;
  padding:10px 18px;
}

#slickQuiz .questions{
  margin-top: 10px;
}

#slickQuiz .questions .questionCount{
  margin-bottom: 10px;
  font-size: 0.9em;
}

#slickQuiz .questions .answers{
  margin-top: 10px;
}

#slickQuiz .questions h3{
  color:#333;
}

#slickQuiz .questions .answers li{
  margin-bottom: 10px;
}

#slickQuiz .questions .complete{
  display: block;
  margin-bottom: 20px;

}

#slickQuiz .questions .responses{
  margin-top: 10px;
  margin-bottom: 20px;
}

#slickQuiz .quizResults{
  margin:20px 0;
}

#slickQuiz .quizResults .quizResultsCopy{
  margin-top: 10px;
}

#courses{
  display: block;
  margin:50px 0;
}

#courses #courseList{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

#courses #courseList .course{
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin:0 10px 10px 0;
  border:1px solid #e2e2e2;
  height: 40px;
  padding: 0 20px;
  font-size: 0.95em;
  border-radius: 90px;
  background: #fff;
}

#courses #courseList .course:hover{
  cursor: pointer;
  background: #f3f3f3;
}

#courses #courseList .course .buttons{
  display: flex;
  overflow: hidden !important;
  width: 0;
  margin: 0;
  padding:0;
  vertical-align: middle;
  align-items: center;
  text-align: right;
  line-height: 1;
  font-size: 0.75em;
  -moz-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  -o-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  justify-content: center;
}

#courses #courseList .course:hover .buttons{
  width: 20px;
  text-align: center;
  margin-left: 12px;
  -moz-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  -o-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
}

#courses #courseList .course .buttons .material-icons{
  display: none;
  align-self: center;
  font-size: 1.6em;
}

#courses #courseList .course:hover .buttons .material-icons{
  display: inline-block;
}

#courses #courseList .course .buttons .close{
  color:#999;
}

#courses #courseList .course .buttons .close:hover{
  color: #1546D2;
}

#quizzesPage{
  margin-top: 30px;
}

#quizzesPage .title{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  color:#999;
  font-weight: 300;
}

#quizzesPage .title .icon{
  font-size: 1.4em;
  color:#bbb;
  margin-right: 9px;
  margin-top: 6px;
}

#createQuestion{
  margin:50px 0;
}

#createQuestion form{
  padding:22px;
  border:1px solid #e2e2e2;
  border-radius: 4px;
  background: #fff;
}

#createQuestion form .min-title{
  font-weight: 500;
}

#createQuestion form input{
  padding:12px;
  font-size: 0.9em;
  border:1px solid #e2e2e2;
  border-radius: 2px;
  width: 100%;
  outline: none;
  focus:none;
}

#createQuestion form input:focus{
  border-color: #1546D2;
}

#createQuestion form textarea{
  padding:12px;
  font-size: 0.9em;
  border:1px solid #e2e2e2;
  border-radius: 2px;
  width: 100%;
  outline: none;
  focus:none;
  min-height: 100px;
  line-height: 1.45;
}

#createQuestion form textarea:focus{
  border-color: #1546D2;
}

#createQuestion form .responses{
  display: block;
  margin: 20px 0;
}

#createQuestion form .responses .input-group{
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin: 10px auto;
}

#createQuestion form label{
  font-weight: 500;
}

#createQuestion form .responses .input-group label{
  font-size: 0.9em;
  margin-right: 10px;
  align-self: center;
}

#createQuestion form .responses .input-group input{
  align-self: center;
}

#createQuestion form .responses .input-group .correct{
  border-color: #95ee77;
}

#createQuestion form .responses .wrong{
  border-color: #f3a3a3;
}

#createQuestion form .responses .wrong_input_group{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#createQuestion form .responses .wrong_input_group .newWrong{
  margin-top: 10px;
  align-self: center;
}

#createQuestion form .responses .wrong_input_group .remove_field{
  display: inline-block;
  align-self: center;
  margin-left: 10px;
}

#createQuestion form .responses .wrong_input_group .remove_field .material-icons{
  align-self: center;
  line-height: 1;
  margin-top: 13px;
  color:red;
}

#createQuestion form .responses .wrong_input_group .remove_field .material-icons:hover{
  color:#d61f1f;
}

#createQuestion form .responses .add-field-button{
  border:none;
  background-color: none;
  background: none;
  padding:0;
  margin: 0 0 0 10px;
  font-size: 1.2em;
  color:#388CF3;
}

#createQuestion form .responses .add-field-button:hover{
  cursor: pointer;
  color: #1546D2;
}

#createQuestion form .responses .add-field-button .material-icons{
    font-size: 1.55em;
    margin-top: 4px;
}

#createQuestion form .tag-group{
  display: flex;

  justify-content: space-between;
  padding-bottom:21px;
}

#createQuestion form .tag-group .half{
  width: 48%;
}

#createQuestion form .tag-group .half label{
  display: block;
  margin-bottom: 10px;
  font-size: 0.9em;
}

/*
#createQuestion form .tag-group .half .left .selectize-input{
  border-radius: 2px 0px 0px 2px;
}

#createQuestion form .tag-group .half .right .selectize-input{
  border-radius: 0px 2px 2px 0px;
}*/

#createQuestion form .buttons{
  text-align: right;
}

#createQuestion form .buttons .button{
  font-size: 0.9em;
  padding:14px 24px;
}

#questionsList{
  margin: 40px 0;
}

#questionsList .questions{
  margin: 0;
  padding:0;
  list-style: none;
  margin-top: 10px;
}

#questionsList .questions h3{
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
}

#questionsList .questions h3 .test{
  display: inline-block;
  align-self: center;
  font-size: 0.65em;
  background: #e2e2e2;
  border-radius: 90px;
  padding:8px 20px;
  font-weight: 400;
  color:#444;
}

#questionsList .questions h3 .test:hover{
  cursor: pointer;
  background: #388CF3;
  color:#fff;
}

#questionsList .questions li{
  margin: 14px 0;
  border:1px solid #e2e2e2;
  border-radius: 2px;
  padding:18px;
}

#questionsList .questions li .question{
  color:#333;
  font-weight: 200;
  font-size: 1.2em;
  -moz-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  -o-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
}

#questionsList .questions li .correct_answer{
  overflow: hidden;
  height: 0px;
  margin-top: 2px;
  opacity: 0;
  -moz-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  -o-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
}

#questionsList .questions li:hover .correct_answer{
  height: auto;
  opacity: 1;
  -moz-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  -o-transition:  all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.2, 1);
}

#shareBar{
  margin: 40px 0;
}

#shareBar .shareButton{
  display: inline-block;
  border:1px solid #e2e2e2;
  padding: 12px 22px;
  margin-right: 8px;
  border-radius: 90px;
  font-size: 0.9em;
}

#shareBar .shareButton:hover{
  cursor: pointer;
}

#shareBar .facebook:hover{
  background: #3b5998;
  border-color: #3b5998;
  color: #fff;
}

#shareBar .messenger:hover{
  background: #1787fb;
  border-color: #1787fb;
  color: #fff;
}

#shareBar .friends{
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}

#shareBar .friends .friend{
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  height: 50px;
  width: 50px;
  border-radius:90px;
  background-size: cover !important;
  background-position: center !important;
}

#teach{

}

#teach .teach-head{
  padding:30px;
  border:1px solid #1546D2;
  margin-bottom: 40px;
  border-radius: 4px;
  background: #fff;
}

#teach .teach-head .title{
  font-weight: 200;
  font-size: 1.6em;
  color: #1546D2;
}

#teach .teach-head .des{
  margin-top: 5px;
  font-weight: 300;
  line-height: 1.45;
}

#teach .teach-head .cannot{
    font-size:0.9em;
    margin-top: 15px;
    font-weight: 500;
    color:#da3b3b;
}

#teach .create{
  margin-bottom: 40px;
}

#teach .create .title{
  font-weight: 400;
  font-size: 0.8em;
  margin-bottom: 10px;
}

#teach .create form{
  background: #fff;
  border:1px solid #e2e2e2;
  border-radius: 4px;
  padding:22px;
}

#teach .create form label{
  display: block;
  margin-bottom: 8px;
  font-size: 0.8em;
}

#teach .create form input{
  border:1px solid #e2e2e2;
  padding:12px;
  border-radius: 2px;
  outline: none;
  display: block;
  font-size: 0.9em;
  width: 100%;
}

/* Library version 1 */

#library{
  text-align: left;
  width: 95%;
  display: block;
  margin: 40px 0;
}

#library .title{
  color:#000;
  margin-bottom: 20px;
  font-size:1.2em;
  font-weight: 300;
}

#library .popular{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#library .popular .topic{

  /*min-width: 245px;*/
  width: 19%;
  margin-right: 1%;
  margin-bottom: 30px;
}

#library .popular .topic:hover{
  opacity: 0.9;
  cursor: pointer;
}

#library .popular .topic .image{
  min-height: 330px;
  background: #e2e2e2;
  min-width: 100%;
  background-size: cover !important;
  background-position: center !important;
}

#library .popular .topic .content{
  margin-top: 12px;
}

#library .popular .topic .content .title{
  font-size: 1em;
  font-weight: 500;
}

#library .popular .more{
  /*min-width: 245px;*/
  display: flex;
  width: 19%;
  margin-right: 1%;
  background: #1546D2;
  padding:22px;
  height: 320px;
  font-weight: 500;
  color:#fff;
  font-size: 1.2em;
  text-align: center;
  vertical-align: middle;
  align-items: center;
}

/* Library version 2 */

#library-b{
  text-align: left;
  width: 85%;
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

#library-b .sidebar{
  width: 32%;
}

#library-b .sidebar .intro-panel{
  background: #fff;
  padding:26px;
  border:1px solid #e2e2e2;
  margin-top: 30px;
  border-radius: 4px;
  margin-bottom: 30px;
}

#library-b .sidebar .intro-panel .title{
  display: flex;
  color:#111;
  font-size: 0.9em;
  font-weight: 500;
}

#library-b .sidebar .intro-panel .des{
  font-size: 1em;
  color:#888;
  line-height: 1.45;
  margin-top: 14px;
  font-weight: 300;
}

#library-b .sidebar .intro-panel .des ul{

}

#library-b .sidebar .intro-panel .des ul ol{
  list-style: decimal;
  margin-bottom: 8px;
}

#library-b .sidebar .top-contributors{
  background: #fff;
  padding:26px;
  border:1px solid #e2e2e2;
  margin-top: 30px;
  border-radius: 4px;
  margin-bottom: 30px;
}

#library-b .sidebar .top-contributors .title{
  display: flex;
  color:#111;
  font-size: 0.9em;
  font-weight: 500;
}

#library-b .sidebar .top-contributors .list{
  margin-top: 10px;
}


#library-b .sidebar .top-contributors .list .item{
  display: flex;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  padding: 16px 0;
  font-size:0.9em;
  color:#000;
  border-bottom: 1px solid #e2e2e2;
}

#library-b .sidebar .top-contributors .list .item .avatar{
  height: 34px;
  width: 34px;
  margin-right: 9px;
  border-radius: 90px;
  background-size:cover !important;
}

#library-b .topic-list{
  width: 65%;
}

#library-b .topic-list .featured{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#library-b .topic-list .featured .title{
  width: 100%;
  display: block;
  margin-bottom: 15px;
  font-size: 0.8em;
  text-transform: uppercase;
  color:#999;
  font-weight: 500;
}

#library-b .topic-list .featured .topic{
  display: inline-block;
  position:relative;
  width: 23%;
  border-radius: 4px;
  margin-bottom: 30px;
}

#library-b .topic-list .featured .topic:hover{
  cursor: pointer;
  opacity: 0.9;
}

#library-b .topic-list .featured .topic .image{
  position: relative;
  width: 100%;
  height: 230px;
  background: #ddd;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 14px;
  border-radius: 3px;
}

#library-b .topic-list .featured .topic .content{

}

#library-b .topic-list .featured .topic .content .title{
  color:#111;
  font-size: 1.1em;
  line-height: 1.45;
  font-weight: 400;
  text-transform: capitalize;
}

#library-b .topic-list .featured .topic .content .des{
  color:#888;
  font-size: 0.9em;
  margin-top: -7px;
  line-height: 1.45;
}


#library-b .topic-list .featured .topic .content .by{
  /*display: flex;*/
  display: none;
  vertical-align: middle;
  align-items: center;
}

#library-b .topic-list .featured .topic .content .by .a_avatar{
  height:25px;
  width: 25px;
  background-size: cover !important;
  background-position: center !important;
  margin-right: 10px;
  border-radius: 90px;
}

#library-b .topic-list .featured .topic .content .by .a_name{
  font-size: 0.8em;
  color:#000;
}

#library-b .topic-list .featured .topic .content .resources{
  display: inline-block;
  background: #e2e2e2;
  margin-top: 12px;
  padding:7px 14px;
  border-radius: 90px;
  color:#888;
  font-size:0.85em;
}


#library-b .topic-list .list{
  display:block;
  background: #fff;
  border:1px solid #ddd;
  border-radius: 4px;
}

#library-b .topic-list .list .title-l{
  margin:20px 20px 0px 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e2e2;
  color:#111;
  font-weight:300;
}

#library-b .topic-list .list .topic{
  display: flex !important;
  width: 100%;
  padding:20px;
  border-bottom: 1px solid #e2e2e2;
}

#library-b .topic-list .list .topic .image{
  height: 130px;
  width: 100px;
  margin-right: 16px;
  background-size: cover !important;
  background-position: center !important;
}

#library-b .topic-list .list .topic .content{
  width: 100%;
}

#library-b .topic-list .list .topic .content .title{
  display: flex;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  justify-content: space-between;
  color:#111;
  font-weight: 500;
  font-size: 1.3em;
  margin-top: 5px;
  text-transform: capitalize;
}

#library-b .topic-list .list .topic .content .des{
  color:#888;
  font-weight: 300;
  font-size:0.9em;
  line-height: 1.45;
  margin-top: 3px;
}

#library-b .topic-list .list .topic .content .bottom{
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  font-size: 0.85em;
  font-weight:300;
  color:#111;
}

#library-b .topic-list .list .topic .content .bottom .by{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#library-b .topic-list .list .topic .content .bottom .by .c{
  margin-right: 10px;
  font-size: 0.95em;
}

#library-b .topic-list .list .topic .content .bottom .by .owner{
  border:2px solid #e2e2e2;
  height: 34px !important;
  width: 34px !important;
  margin-right: 8px !important;
}

#library-b .topic-list .list .topic .content .bottom .by .c_avatar{
  height: 30px;
  width: 30px;
  border-radius: 90px;
  margin-right: -10px;
  background-size: cover !important;
  background-position: center !important;
}

#library-b .topic-list .list .topic .content .bottom .right{
  display: flex;
}

#library-b .topic-list .list .topic .content .bottom .right .open{
  padding:7px 12px;
  border:1px solid #e2e2e2;
  border-radius: 2px;
  font-size: 0.85em;
  background: #f9f9f9;
  color:#111;
}

#library-b .topic-list .list .topic .content .bottom .right .open:hover{
  cursor: pointer;
  border-color: #111;
}

#library-b .topic-list .list .topic .content .bottom .right .resources{
  display: flex;
  align-items: center;
  vertical-align: middle;
  font-weight: 300;
  color:#bbb;
  margin-right: 20px;
  text-transform: lowercase;
}

#library-b .topic-list .list .topic .content .bottom .right .resources .no{
  background: #bbb;
  min-width: 20px;
  height: 20px;
  color:#fff;
  border-radius: 90px;
  text-align: center;
  line-height: 20px;
  margin-right: 5px;
}


#manage_topic{
  text-align: left;
  width: 100%;
  display: block;
  margin: 0 auto;
}

#manage_topic #header_manage{
  background: #fff;
  padding:25px 0;
  border-bottom: 1px solid #e2e2e2;
  color:#000;
  font-weight: 300;
}

#manage_topic #header_manage b{
  font-weight: 500;
}

#manage_topic #header_manage #wrapper{
  display:block;
}

#manage_topic #wrapper{
  text-align: left;
  justify-content: space-between;
  margin: 0 auto;
  width: 90%;
}

#manage_topic .sidebar{
  width: 370px;
  margin-right: 30px;
  border-right: 1px solid #e2e2e2;
  padding-top: 40px;
  padding-bottom: 40px;
}

#manage_topic .sidebar .menu{
  display: block;
  list-style: none;
}

#manage_topic .sidebar .menu li{
  list-style: none;
  color:#777;
  line-height: 1;
  margin-bottom: 12px;
}

#manage_topic .content{
  text-align: left;
  width: 100%;
  padding:40px 0;
}

#manage_topic .content .title_s{
  font-size: 1.4em;
  color:#222;
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}

#manage_topic .content .title_sub{
  font-size: 1.1em;
  color:#222;
  display:block;
  margin-bottom: 12px;
}

#manage_topic .content .section_list{
  display: block;

}

#manage_topic .content .section_list .item{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  padding:10px 16px;
  font-size: 0.9em;
  color:#222;
  border:1px solid #e2e2e2;
  margin-bottom: 10px;
}

#manage_topic .content .section_list .item:hover .right .icon{
  color:#666;
}

#manage_topic .content .section_list .item .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#manage_topic .content .section_list .item .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: flex-end;
}

#manage_topic .content .section_list .item .icon{
  color:#ddd;
  margin: 3px 0 0 0;
  padding:0;
  line-height: 1;
  font-size: 1.4em;
}

#manage_topic .content .section_list .item .title{
  margin-left: 14px;
  font-size: 500;
}

#manage_topic .content .section_list .item .stats{
  margin-left: 24px;
  color:#999;
}

#manage_topic .content .section_list .item .right .icon:hover{
  color:#222;
  cursor: pointer;
}

#manage_topic .content .section_list .item .right .add{
  margin: 0;
  line-height: 1;
  margin-right: 18px;
}

#manage_topic .content #add_resource{

}

#manage_topic .content #add_resource .resource_type{
  margin-top: 30px;
}

#manage_topic .content #add_resource .resource_type .title_r{
  color:#777;
  font-weight: 300;
  font-size: 1em;
}

#manage_topic .content #add_resource .resource_type .radio-tile-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
}
#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container {
  position: relative;
  height: 7rem;
  width: 7rem;
  margin-right: 15px;
}
#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container .radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}
#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container .radio-tile {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  flex-wrap: wrap;
  align-items: stretch;
  border:2px solid #1546D2;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
  text-align: center;
  color:#1546D2;
  padding:16px;
  border-radius:3px;
}

#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container .radio-tile .icon{
  display: block;
  width: 100%;
  margin: 10px 0 10px 0;
  font-size: 2em;
  text-align: center;
}

#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container .radio-tile-label {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:#1546D2;

}
#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container .radio-button:checked + .radio-tile {
  background-color: #1546D2;
  border: 2px solid #1546D2;
  color: white;
}

#manage_topic .content #add_resource .resource_type .radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
  color: white;
}

#library_topic{
  text-align: left;
  width: 85%;
  display: block;
}


#library_topic #topic_header{
  display: flex;
  justify-content: space-between;
  /*background: #fff;*/
  padding:27px 0%;
  /*border-bottom: 1px solid #e0e0e0;*/
  vertical-align: middle;
  align-items: center;
}

#library_topic #topic_header .title{
  display: flex;
  color:#000;
  font-size:1.2em;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  line-height: 1;
}

#library_topic #topic_header .title li{
  margin-right: 10px;
  list-style: none;
}

#library_topic #topic_header .title .lib{
  color:#999;
}

#library_topic #topic_header .title .sep{
  line-height: 1;

  color:#999;
}

#library_topic #topic_header .title .sep .icon{
  padding: 0;
  margin: 2px 0 0 0;
  line-height: 1;
}

#library_topic #topic_header .title .top{
  color:#1546D2;
  font-weight: 400;
}

#library_topic #topic_header .stats{
  display: flex;
  align-content: center;
  vertical-align: middle;
}



#library_topic #topic_header .stats .subscribe{
  padding:11px 20px;
  border-radius: 3px;
  border:1px solid rgba(0,0,0,0.1);
  margin: 0;

  color:#fff;
  background:
  font-size: 0.9em;
  margin-left: 10px;
}

#library_topic #topic_header .stats .subscribe:hover{
  cursor: pointer;
  opacity: 0.9;
}

#library_topic #topic_header .stats .subscribed{
  padding:11px 20px;
  margin: 0;
  color:#999;
  font-weight: 300;
  font-size: 0.9em;
  margin-left: 10px;
}

#library_topic #topic_header .stats .contribute{
  padding:11px 20px;
  border:1px solid rgba(0,0,0,0.1);
  background: #40b34f;
  margin: 0;
  border-radius: 3px;
  color:#fff;
  background:
  font-size: 0.9em;
}

#library_topic #topic_header .stats .contribute:hover{
  cursor: pointer;
  opacity: 0.9;

}


#library_topic #topic_header .stats .manage{
  padding:11px 20px;
  margin: 0;
  border-radius: 90px;
  font-size: 0.9em;
  margin-left: 10px;
  align-content: center;
  vertical-align: middle;
}

#library_topic #topic_nav{
  display: flex;
  justify-content: space-between;
  background: #f9f9f9;
  padding:16px 5%;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 10px;
  vertical-align: middle;
  align-items: center;
}

#library_topic #topic_nav .menu{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#library_topic #topic_nav .menu li{
  list-style: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.75em;
  margin-right: 32px;
  color:#999;
}

#library_topic #topic_nav .menu li:hover{
  cursor: pointer;
  color: #1546D2;
}

#library_topic #topic_resources{
  margin-top: 40px;
  margin-bottom: 10px;
  min-width: 500px;
  vertical-align: middle;
  align-items: center;
}

#library_topic #topic_resources #section{
  position: relative;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between !important;
  width: 100%;
}

#library_topic #topic_resources #section .begin{
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 3px solid #e2e2e2;
  padding:10px 0 50px 0;
}

#library_topic #topic_resources #section .begin .left{

}

#library_topic #topic_resources #section .begin .left .title_b{
  font-size: 3em;
  font-weight: 600;
  color:#333;
}

#library_topic #topic_resources #section .begin .left .title_b b{
  color:#bbb;
}

#library_topic #topic_resources #section .begin .left .des{
  font-weight: 300;
  margin-top: 10px;
  width: 70%;
  line-height: 1.45;
  color:#888;
}

#library_topic #topic_resources #section .begin .left .button{
  padding:14px 30px;
  margin-top: 20px;
  font-size: 1em;
  font-weight: 300;
  margin-right: 5px;
}

#library_topic #topic_resources #section .begin .left .contribute{
  background: #3AB54A;
}

#library_topic #topic_resources #section .newly-subscribed{
  display: block;
  width: 100%;
  background: #fff;
  /*border-bottom: 3px solid #e2e2e2;*/
  padding:30px;
  border:1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
  margin-bottom: 20px;
}

#library_topic #topic_resources #section .newly-subscribed .title_ns{
  color:#111;
  font-size:1.2em;
  font-weight: 300;

}

#library_topic #topic_resources #section .newly-subscribed .des_ns{
  margin-top: 10px;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
  color:#999;
}

#library_topic #topic_resources #section .title{
  color:#111;
  font-size: 1.1em;
}

#library_topic #topic_resources #section .holder{
  display: flex;
  justify-content: space-between !important;
  flex-wrap: nowrap;
  width: 100%;
}

#library_topic #topic_resources #section .timeline{
  min-width: 300px;
}

#library_topic #topic_resources #section .timeline .intro{
  background: #fff;
  border:1px solid #e2e2e2;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

#library_topic #topic_resources #section .timeline .intro .head{
  padding:22px;
  border-bottom: 1px solid #e2e2e2;
}

#library_topic #topic_resources #section .timeline .intro .title{
  display: flex;
  vertical-align: middle;
  align-items: center;
  line-height: 1.45;
  margin-top: -6px;
}

#library_topic #topic_resources #section .timeline .intro .title a{
  text-decoration: none;
  color:#1546D2;
  font-size: 1.2em;
  font-weight: 500;
}

#library_topic #topic_resources #section .timeline .intro .des{
  color:#777;
  font-size: 0.9em;
  line-height: 1.45;
  margin-top: 2px;
}

#library_topic #topic_resources #section .timeline .intro .head .creator{
  margin-top: 20px;
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#library_topic #topic_resources #section .timeline .intro .head .creator .avatar{
  height: 50px;
  width: 50px;
  border-radius: 4px;
  background-size: cover !important;
  margin-right:10px;
}

#library_topic #topic_resources #section .timeline .intro .head .creator .name{
  font-size: 0.95em;
  font-weight: 500;
  color:#000;
}

#library_topic #topic_resources #section .timeline .intro .head .creator .deets{
  color:#999;
  font-size: 0.9em;
  margin-top: 4px;
}

#library_topic #topic_resources #section .timeline .intro .creator-actions{
  padding:22px;
  background: #F4E6A9;
  border-bottom: 1px solid #e2e2e2;
}

#library_topic #topic_resources #section .timeline .intro .creator-actions .act{
  color:rgba(0,0,0,0.6);
  font-size:0.75em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#library_topic #topic_resources #section .timeline .intro .stats{
  padding:16px 22px;
  background: #f9f9f9;
}

#library_topic #topic_resources #section .timeline .intro .stats .act{
  color:#888;
  font-size:0.75em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#library_topic #topic_resources #section .timeline .intro .stats .subscribed{
    font-size: 0.9em;
}

#library_topic #topic_resources #section .timeline .intro li{
  display: flex;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  line-height: 1;
  font-size: 0.9em;
  padding:5px 0;
  margin-bottom: 3px;
  color:#1546D2;
}

#library_topic #topic_resources #section .timeline .intro li:hover{
  cursor: pointer;
  opacity: 0.85;
}

#library_topic #topic_resources #section .timeline .intro li .icon{
  margin-top: 1px;
  margin-right: 7px;
  font-size: 1.1em;
}

#library_topic #topic_resources #section .timeline .intro .contribute{
  color:#096D6D;
}


#library_topic #topic_resources #section .timeline .active{
  color:#1546D2 !important;
}

#library_topic #topic_resources #section .timeline .active .item .s_title, .active .item .s_stats, .active .item .left{
  color:#1546D2 !important;
}

#library_topic #topic_resources #section .timeline .item{
  display: flex;
  justify-content: flex-start;
  border-bottom:2px solid #e2e2e2;
  padding-top:20px;
  padding-bottom:20px;
  line-height: 1.45;
}

#library_topic #topic_resources #section .timeline .item .left{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  min-width: 50px;
  line-height: 1em;
  font-size: 2.4em;
  color:#bbb;
  font-weight: 500;
  vertical-align: text-top;
}

#library_topic #topic_resources #section .timeline .item:hover .left{
  color:#1546D2;
  cursor: pointer;
}

#library_topic #topic_resources #section .timeline .item:hover{
  cursor: pointer;
  /*border-color:#1546D2;*/
}

#library_topic #topic_resources #section .timeline .item:hover .s_title{
  color:#1546D2;
  cursor: pointer;
}

#library_topic #topic_resources #section .timeline .item:hover .s_stats{
  color:#1546D2;
  cursor: pointer;
}

#library_topic #topic_resources #section .timeline .item .s_title{
  color:#000;
  font-size:1em;
}

#library_topic #topic_resources #section .timeline .item .s_stats{
  color:#888;
  font-size:0.8em;
  font-weight:300;
  margin-top: 3px;
}


#library_topic #topic_resources #section .timeline .create-new-section{
  padding:9px 10px;
  border-radius: 3px;
  border:1px solid  #1546D2;
  background:  #1546D2;
  color:#fff;
  font-size: 0.9em;
  font-weight: 500;
  min-width: 110px;
  text-align: center;
  margin-top: 10px;
}

#library_topic #topic_resources #section .timeline .create-new-section:hover{
  cursor: pointer;
  border-color:  #1546D2;
  background-color:  #fff;
  color: #1546D2;
}

#library_topic #topic_resources #section .list{
  display: block;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-x:auto;
  width: 100%;
  margin: 0 40px;
  min-width: 500px;
}

#library_topic #topic_resources #section .section-details{
  margin-bottom: 20px;
}

#library_topic #topic_resources #section .section-details .top{
  display: flex;
  justify-content: space-between;
}

#library_topic #topic_resources #section .section-details .top .section-title{
  font-size:1.2em;
  color:#000;
}

#library_topic #topic_resources #section .section-details .top .edit-section{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size:0.9em;
  color:#1546D2;
}

#library_topic #topic_resources #section .section-details .top .edit-section .icon{
  margin-right: 7px;
  font-size: 1.1em;
  margin-top: 1px;
}

#library_topic #topic_resources #section .section-details .top .edit-section:hover{
  cursor: pointer;
  opacity: 0.85;
}

#library_topic #topic_resources #section .section-details .des_s{
  color:#777;
  line-height: 1.45;
  font-size:0.95em;
  margin-top: 3px;
}

#library_topic #topic_resources #section .list .add_new_resource{
  display: block;
  width: 100%;
  border-radius: 3px;
  margin-bottom:20px;
  background: #fff;
  font-size: 0.9em;
  border:1px solid rgba(0,0,0,0.12);
  overflow: hidden;
}

#library_topic #topic_resources #section .list .add_new_resource .title_r{
  color:#111;
  font-size: 0.9em;
  padding:18px 18px 18px 18px;
  font-weight:500;
}

#library_topic #topic_resources #section .list .add_new_resource ::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

#library_topic #topic_resources #section .list .add_new_resource ::-webkit-scrollbar-track {
    background:#fff;
}

#library_topic #topic_resources #section .list .add_new_resource ::-webkit-scrollbar-thumb {
    background: #ccc;
    /*border-radius: 5px;*/
}

#library_topic #topic_resources #section .list .add_new_resource .resource_type{
  display: flex;
  justify-content: flex-start;
  overflow-x:auto;
  padding:0px 18px 15px 18px;
}



#library_topic #topic_resources #section .list .add_new_resource .resource_type .item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  min-width: 25.5%;
  border:1px solid rgba(0,0,0,0.15);
  background: #fff;
  padding:20px 12px;
  text-align: center;
  margin-right: 10px;
  font-size: 1em;
  border-radius: 3px;
  color:#1546D2;
}

#library_topic #topic_resources #section .list .add_new_resource .resource_type .item:active{
  opacity: 0.9;
}

#library_topic #topic_resources #section .list .add_new_resource .resource_type .item .icon{
  display: block;
  width: 100%;
  font-size: 2.6em;
  margin-bottom: 10px;
}

#library_topic #topic_resources #section .list .add_new_resource .resource_type .item:hover{
  background: #1546D2;
  color:#fff;
  cursor: pointer;
}

#library_topic #topic_resources #section .list .resource_type_title{
  font-weight: 300;
  margin-bottom: 15px;
  font-size: 0.8em;
}

#library_topic #topic_resources #section .right-sidebar{
  display: block;
  flex-wrap: wrap;
  min-width: 370px;
}

#library_topic #topic_resources #section .right-sidebar .privacy-toggle{
  border:1px dashed #fbbd4c;
  padding:18px;
  border-radius: 3px;
  margin-bottom: 30px;
  background: #ffebc7;
}

#library_topic #topic_resources #section .right-sidebar .privacy-toggle .title_p{
  color:#444;
  font-weight: 500;
  font-size: 0.85em;
}

#library_topic #topic_resources #section .right-sidebar .privacy-toggle .button_p{
  display: inline-block;
  background: #7f5811;
  padding:10px 18px;
  margin-top: 14px;
  border-radius: 3px;
  border:1px solid rgba(0, 0, 0, 0.1);
  color:#fff;
  font-size: 0.9em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

#library_topic #topic_resources #section .right-sidebar .privacy-toggle .button_p:hover{
  cursor: pointer;
  background: #8c6217;
}

#library_topic #topic_resources #section .right-sidebar .privacy-toggle .des_p{
  font-weight: 400;
  margin-top: 10px;
  font-size: 0.8em;
  color:#444;
  line-height: 1.5;
  opacity: 0.8;
}

#library_topic #topic_resources #section .right-sidebar .facebook-page-like{
  border:1px solid #8093bb;
  padding:18px;
  border-radius: 3px;
  margin-bottom: 30px;
  background: #fff;
  overflow: hidden;
}

#library_topic #topic_resources #section .right-sidebar .facebook-page-like .title{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: space-between;
  color:#334f8d;
  font-size: 0.9em;
  margin-bottom: 10px;
}

#library_topic #topic_resources #section .right-sidebar .facebook-page-like .title .icon{
  height: 28px;
  width: 28px;
  background: url('/image/social/facebook.png') no-repeat;
  background-size: cover;
}

#library_topic #topic_resources #section .right-sidebar .earn-karma{
  border:1px solid #e2e2e2;
  border-radius: 3px;
  margin-bottom: 30px;
  background: #fff;
  overflow: hidden;
}

#library_topic #topic_resources #section .right-sidebar .earn-karma .padding{
  padding:18px;
}

#library_topic #topic_resources #section .right-sidebar .earn-karma .title{
  font-size: 1.2em;
  line-height: 1.4;
}

#library_topic #topic_resources #section .right-sidebar .earn-karma .des{
  font-size: 1em;
  line-height: 1.4;
  color:#999;
  margin-top: 5px;
}

#library_topic #topic_resources #section .right-sidebar .section-details{

}

#library_topic #topic_resources #section .right-sidebar .section-details .top{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  color:#888;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.82em;
  line-height: 1.45;
  margin-bottom: 10px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .top .edit-section{
  padding:6px 10px;
  border-radius: 3px;
  border:1px solid  #1546D2;
  background:  #1546D2;
  color:#fff;
  font-size: 0.9em;
  font-weight: 500;
  min-width: 110px;
  text-align: center;
  margin-left: 20px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .top .edit-section:hover{
  cursor: pointer;
  border-color:  #1546D2;
  background-color:  #fff;
  color: #1546D2;
}

#library_topic #topic_resources #section .right-sidebar .section-details .des_s{
  display: block;
  line-height: 1.45;
  color:#222;
  font-weight: 300;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  margin-top: 30px;
  border-top: 1px solid #e2e2e2;
  padding-top: 10px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .title_c{
  display: block;
  width: 100%;
  margin-bottom: 18px;
  font-size: 0.8em;
  color:#999;
  font-weight: 300;
}


#library_topic #topic_resources #section .right-sidebar .section-details .starter .user{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .user .avatar{
  height: 36px;
  width: 36px;
  background: #e2e2e2;
  background-size: cover !important;
  border-radius: 90px;
  margin-right: 9px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .user .name{
  color:#222;
  font-weight: 500;
  font-size: 0.8em;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .share{
  display: flex;
  margin-left: 30px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .share .twitter{
  background:#24a9e6 url('../image/social/twitter_w.png') no-repeat;
  background-size:14px auto;
  background-position: center;
  height: 32px;
  width: 50px;
  border-radius: 3px;
  margin-right: 5px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .share .twitter:hover{
  cursor: pointer;
  background-color: #1693ce;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .share .facebook{
  background:#42609c url('../image/social/facebook_w.png') no-repeat;
  background-size:14px auto;
  background-position: center;
  height: 32px;
  width: 50px;
  border-radius: 3px;
}

#library_topic #topic_resources #section .right-sidebar .section-details .starter .share .facebook:hover{
  cursor: pointer;
  background-color: #294a8e;
}

#library_topic #topic_resources #section .right-sidebar .section-details .contribute{
  margin-top: 30px;
  display: block;
  font-size: 0.8em;
  color:#222;
}

#library_topic #topic_resources #section .right-sidebar .section-details .contribute .title{
  display: block;
}

#library_topic #topic_resources #section .right-sidebar .section-details .contribute .add{
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  background: #fff;
  color:#222;
  padding:5px 20px 5px 15px;
  border-radius: 90px;
  line-height: 1;
  border:1px solid #e2e2e2;
  text-align: center;
  justify-content: space-between;
}

#library_topic #topic_resources #section .right-sidebar .section-details .contribute .add:hover{
  color: #1546D2;
  cursor: pointer;
}

#library_topic #topic_resources #section .right-sidebar .section-details .contribute .add:hover .icon{
  color: #1546D2;

}

#library_topic #topic_resources #section .right-sidebar .section-details .contribute .add .icon{
  margin-right: 10px;
  font-size: 2em;
  line-height: 1;
  margin-top: 4px;
  color:#999;
}

#library_topic #topic_resources #section .discussion{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-x:auto;
  min-width: 370px;
}

#library_topic #topic_resources #section .discussion .title_d{
  color:#111;
  font-weight: 500;
  font-size: 0.8em;
  line-height: 1;
  /*text-transform: uppercase;*/
}

#library_topic #topic_resources #section .right-sidebar .sponsor{
  margin-top:40px;
}

#library_topic #topic_resources #section .right-sidebar .sponsor .title_s{
  color:#888;
  font-weight: 500;
  font-size: 0.8em;
  margin-bottom: 14px;
}

#library_topic #topic_resources #section .right-sidebar .sponsor img{
  display: block !important;
  width: 100%;
  height:auto;
}

#library_topic #topic_resources #section .right-sidebar .get-certified{
  /*background: #fff url('../image/certificate-pattern.png');*/
  background-size:70%;
  background: #fff;
  padding:25px 30px;
  margin-top:40px;
  border:1px solid #e2e2e2;
  border-radius: 4px;
  /*box-shadow: 0 0 15px rgba(0,0,0,0.1);*/
}

#library_topic #topic_resources #section .right-sidebar .get-certified .title{
  /*text-transform: uppercase;*/
  font-weight: 500;
  font-size: 0.8em;
  color:#000;
  display: block;
  margin-bottom: 5px;
}

#library_topic #topic_resources #section .right-sidebar .get-certified .card{
  display: flex;
  vertical-align:text-top;
  align-items: center;
}

#library_topic #topic_resources #section .right-sidebar .get-certified .card .icon-c{
  background:url('../image/certificate.png') no-repeat;
  background-size:cover;
  min-height: 80px;
  min-width: 80px;
  margin-right: 30px;
}

#library_topic #topic_resources #section .right-sidebar .get-certified .card .text{
  line-height: 1.45;
  font-size: 0.9em;
  color:#666;
  font-weight: 300;
  width: 100%;
}

#library_topic #topic_resources #section .right-sidebar .get-certified .card .text .actions{
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin-top: 15px;
  font-size:0.8em;
}

#library_topic #topic_resources #section .right-sidebar .get-certified .card .text .actions .start{
  background:#1546D2;
  color:#fff;
  padding:6px 16px 6px 16px;
  border-radius: 90px;
}

#library_topic #topic_resources #section .right-sidebar .get-certified .card .text .actions .sample{
  padding:6px 16px 5px 16px;
  color:#999;
}


#single_resource{
  text-align: left;
  width: 100%;
  display: block;
}

#single_resource #wrapper{
  width: 90%;
  margin: 40px auto;
}

#single_resource #section{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#single_resource #section .left{
  display: inline-block;
  width: 63%;
}

#single_resource #section .left .header{
  margin-bottom: 15px;
}

#single_resource #section .left .header .title{
  display: flex;
  justify-content: flex-start;
  vertical-align: middle;
  align-items: center;
  font-size:0.9em;
  color:#999;
}

#single_resource #section .left .header .title .icon{
  margin:0 5px;
  margin-top: 3px;
  color:#aaa;
}

#single_resource #section .left .header .title .low{

}

#single_resource #section .left .header .title .bright{
  color:#1546D2;
}

#single_resource #section .left .resource{
  min-height: 450px;
  background: #fff;
  width: 100%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border:1px solid #e2e2e2;
  overflow: hidden;
  padding:8px;
  border-bottom: none;
}

#single_resource #section .left .resource .embed iframe{
  min-height: 450px !important;
  border:none;
  margin: 0 0 -3px 0;
  padding: 0;
}

#single_resource #section .left .community_feedback{
  display: flex;
  background: #fff;
  border:1px solid #e2e2e2;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

#single_resource #section .left .community_feedback .adder{
  padding:17px 20px 20px 20px;
  border-right: 1px solid #e2e2e2;
}

#single_resource #section .left .community_feedback .upvoters{
  padding:17px 20px 20px 20px;

}

#single_resource #section .left .community_feedback .top{
  color:#999;
  font-size: 0.75em;
  text-transform: uppercase;
  font-weight: 300;
}

#single_resource #section .left .community_feedback .user{
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin-top: 12px;
}

#single_resource #section .left .community_feedback .user .avatar{
  height: 36px;
  width: 36px;
  border-radius: 90px;
  background: #e2e2e2;
  background-size: cover !important;
  margin-right: 4px;
}

#single_resource #section .left .community_feedback .user .name{
  color:#222;
  font-size: 0.85em;
  font-weight: 600;
  margin-left: 4px;

}

#single_resource #section .right{
  display: inline-block;
  width: 34%;
}

#single_resource #section .right .header{
  margin-top: 50px;
}

#single_resource #section .right .header .title{
  color:#444;
  font-size: 2em;
  font-weight: 500;
  line-height: 1.25;
}

#single_resource #section .right .header .actions{
  display: flex;
  margin-top:20px;
  vertical-align: middle;
  align-items: center;
  font-size: 0.8em;
}

#single_resource #section .right .header .actions .markas{
  display: flex;
  vertical-align: middle;
  align-items: center;
  height: 30px;
  background: #fff;
  border-radius: 3px;
  border:1px solid #e2e2e2;
  line-height: 1;
  padding: 18px;
  margin-right: 10px;
}

#single_resource #section .right .header .actions .markas:hover{
  background: #3AB54A;
  color: #fff;
}

#single_resource #section .right .header .actions .votes{
  height: 30px;
  display: flex;
  vertical-align: middle;
  align-items: center;
  background: #fff;
  border-radius: 3px;
  border:1px solid #e2e2e2;
  line-height: 1;
  padding: 18px;
}

#single_resource #section .right .next{
  margin-top: 40px;
}

#single_resource #section .right .next .title_n{
  color:#999;
  font-size: 0.85em;
  font-weight: 300;
}

#single_resource #section .right .next .resource{
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding:8px;
  border:1px solid #e2e2e2;
  border-radius: 3px;
  margin-top: 12px;
}

#single_resource #section .right .next .resource .image{
  width: 38%;
}

#single_resource #section .right .next .resource .content{
  width: 60%;
  font-size:0.8em;
}

#sub-page{
  background: #fff;
  width: 65%;
  min-width: 600px;
  padding:50px;
  border:1px solid #e2e2e2;
  margin: 30px auto;
  border-radius: 6px;
}

#sub-page .title{
  font-size: 1.6em;
  font-weight: 500;
  color:#111;
}

#sub-page .des{
  color:#999;
  font-size: 1.2em;
  margin-top: 8px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 10px;
}

#sub-page h3{
  color:#222;
  font-size: 1.1em;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 8px;
}

#sub-page p{
  color:#888;
  font-weight: 300;
  line-height: 1.45;
  margin-bottom: 10px;
}

#sub-page li{
  font-size: 0.9em;
  font-weight: 300;
  margin-bottom: 10px;
  color:#111;
}

/* Dashboard */

#dashboard{
  display: flex;
  justify-content: space-between;
  width: 85%;
  margin: 40px auto;
}

#dashboard #side-feed{
  min-width: 210px;
  width: 15%;
}

#dashboard #side-feed .bookmarks{
  margin-bottom: 30px;
}

#dashboard #side-feed .bookmarks .title{
  color:#999;
  font-size:0.8em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#dashboard #side-feed .bookmarks .list{
  display: block;
}

#dashboard #side-feed .bookmarks .list .bookmark{
  display: flex;
  vertical-align: middle;
  align-items: center;
  margin-bottom: 8px;
}

#dashboard #side-feed .bookmarks .list .bookmark:hover{
  cursor: pointer;
  opacity: 0.8;
}

#dashboard #side-feed .bookmarks .list .bookmark .icon{
  height: 28px;
  width: 28px;
  background: #e2e2e2;
  background-size: cover !important;
  background-position: center !important;
  margin-right: 7px;
}

#dashboard #side-feed .bookmarks .list .bookmark .name{
  font-size: 0.75em;
  color:#222;
}

#dashboard #feed{
  display: block;
  min-width: 500px;
  width: 50%;
  margin: 0 30px;
}

#dashboard #feed .empty_feed{
  margin-bottom: 30px;
  margin-top: 20px;
  font-size: 0.9em;
  color:#999;
  line-height: 1.45;
  text-align:center;
}

#dashboard #right-side{
  min-width: 340px;
  max-width:  380px;
  width: 30%;
  width: auto;
}

#dashboard #right-side .facebook{
  background: #fff;
  padding:18px;
  border-radius: 4px;
  border:1px solid #e2e2e2;
  margin-bottom: 30px;
}

#dashboard #right-side .facebook .title{
  font-size: 0.9em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color:#000;
}

#dashboard #right-side .earn-karma{
  border:1px solid #e2e2e2;
  border-radius: 3px;
  margin-bottom: 30px;
  background: #fff;
  overflow: hidden;
}

#dashboard #right-side .earn-karma .padding{
  padding:18px;
}

#dashboard #right-side .earn-karma .title{
  font-size: 1.2em;
  line-height: 1.4;
  color:#000;
}

#dashboard #right-side .earn-karma .des{
  font-size: 1em;
  line-height: 1.4;
  color:#999;
  margin-top: 5px;
}

/* SETUP */

#setup{
  display: block;
  width: 100%;
  margin: 0px auto;
}

#setup #wrapper{
  display: block;
  width: 80%;
  margin: 100px auto;
}

#setup #wrapper .title_s{
  display:block;
  width: 100%;
  font-size: 1.6em;
  color:#444;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  margin-bottom: 30px;
}

#setup .basic_profile{
  display: block;
  width: 500px;
  margin: 0 auto;
}

#setup .basic_profile label{
  display: block;
  color:#777;
  font-weight: 300;
  margin-bottom: 10px;
}

#setup .basic_profile input{
  padding:12px;
  border-radius: 3px;
  width: 100%;
  border:1px solid #e2e2e2;
  outline: none;
  font-size: 1em;
}

#setup .basic_profile button{
  padding:12px;
  border-radius: 3px;
  outline: none;
  font-size: 0.9em;
}

#profile-b{
  display: block;
  position: relative;
  width: 100%;
}

#profile-b .bg{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 300px;
  background: #1546D2;
  background-image: linear-gradient(to top, #1546D2 0%, #3479df 100%);
}

#profile-b #wrapper{
  display: block !important;
  max-width: 600px;
  margin: 40px auto;
}

#profile-b .header{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  width: 100%;
  background: #fff;
  border:1px solid #e2e2e2;
  padding:30px;
  border-radius: 4px;
}

#profile-b .header .settings{
  position: absolute;
  top:14px;
  right:14px;
  background: #fff;
  border-radius: 3px;
  color:#999;
  border:1px solid #e2e2e2;
  border-radius: 3px;
  padding:8px 12px;
  font-size: 0.9em;
}

#profile-b .header .settings:hover{
  border-color: #999;
  cursor: pointer;
}

#profile-b .header .avatar{
  height: 130px;
  width: 130px;
  background-size: cover !important;
  border-radius: 90px;
  background-position: center !important;
  margin-bottom: 10px;
}

#profile-b .header .name{
  display: block;
  width:100%;
  color:#000;
  font-size: 1.6em;
  font-weight: 500;
  margin-bottom: 5px;
}

#profile-b .header .title{
  font-size: 0.9em;
  color:#999;
}

#profile-b .header .social{
  display: flex;
  vertical-align: middle;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  justify-content: center;
}

#profile-b .header .social .twitter{
  height: 28px;
  width: 28px;
  background: url('../image/social/social-twitter.png') no-repeat;
  background-size: cover !important;
  background-position: center !important;
  margin: 0 6px;
}

#profile-b .header .social .twitter:hover{
  cursor: pointer;
  opacity: 0.85;
}

#profile-b .header .social .facebook{
  height: 28px;
  width: 28px;
  background: url('../image/social/social-facebook.png') no-repeat;
  background-size: cover !important;
  background-position: center !important;
  margin: 0 6px;
}

#profile-b .header .social .facebook:hover{
  cursor: pointer;
  opacity: 0.85;
}

#profile-b .header .social .linkedin{
  height: 28px;
  width: 28px;
  background: url('../image/social/social-linkedin.png') no-repeat;
  background-size: cover !important;
  background-position: center !important;
  margin: 0 6px;
}

#profile-b .header .social .linkedin:hover{
  cursor: pointer;
  opacity: 0.85;
}

#profile-b .header .influencerIn{
  display: block;
  width: 100%;
  margin-top: 20px;
}

#profile-b .header .influencerIn .holder{
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}

#profile-b .header .influencerIn .holder .title-i{
  font-size: 0.9em;
  margin-right: 10px;
}

#profile-b .header .influencerIn .holder li{
  margin-right: 8px;
  list-style: none;
  color:#fff;
  padding:10px 14px 10px 12px;
  font-size: 0.9em;
  line-height: 1;
  border-radius: 3px;
}

#profile-b .header .influencerIn .holder li:hover{
  opacity: 0.9;
  cursor: pointer;
}

#profile-b .header .askMe{
  display: block;
  width: 100%;
  margin-top: 20px;
}

#profile-b .header .askMe .btn{
  display: inline-flex;
  padding:6px 22px 4px 9px;
  background: #ED4CBA;
  color:#fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  font-size:0.9em;
  border-radius: 90px;
  line-height: 1.1;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}

#profile-b .header .askMe .btn .icon{
  line-height: 1;
  margin-right: 10px;
  font-size: 1.9em;
  margin-top: 2px;
}

#profile-b .header .askMe .btn:hover{
  cursor: pointer;
  background: #0fc052;
}

#profile-b .ama{
  background: #f3f3f3;
  border:1px solid #e2e2e2;
  border-top:none;
  padding:20px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#profile-b .ama .title{
  color:#999;
  font-size: 0.85em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#profile-b .ama .title{
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color:#548c2c;
  text-align: center;
  font-size: 0.8em;
}

#profile-b .ama .title .icon{
  color:#548c2c;
  margin-right: 10px;
  font-size: 1.8em;
  line-height: 1;
  margin-top: 3px;
}

#profile-b .ama textarea{
  width: 100%;
  border-radius: 4px;
  background: #fff;
  border:1px solid #e2e2e2;
  padding:20px;
  font-size: 1em;
  outline: none;
  height: 100px;
  line-height: 1.45;
}

#profile-b .ama button{
  padding:16px 30px;
  background: #1546D2;
  border-radius: 4px;
  color:#fff;
  border:none;
  font-size: 0.9em;
  margin-top: 5px;
  width: 100%;
}


#profile-b .profile-content{
  position: relative;
  display: block;
  width: 100%;
  margin-top: 30px;
}

#profile-b .profile-content .created{
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#profile-b .profile-content .title_c{
  display: block;
  width: 100% !important;
  color:#999;
  margin-bottom: 16px;
  font-size: 0.9em;
  text-transform: uppercase;
}

#profile-b .profile-content .topic{
  display: block;
  width: 31% !important;
  margin-bottom: 30px;
  font-size: 0.9em;
}

#profile-b .profile-content .topic .pic{
  position:relative;
  height: 290px;
  width: 100%;
  margin-right: 15px;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

#profile-b .profile-content .topic ::-webkit-scrollbar              {
  height: 0px;
  width: 0px;
  opacity: 0;
}
#profile-b .profile-content .topic::-webkit-scrollbar-button       {
  height: 0px;
  width: 0px;
  opacity: 0;
}
#profile-b .profile-content .topic::-webkit-scrollbar-track        {
  height: 0px;
  width: 0px;
  opacity: 0;}
#profile-b .profile-content .topic::-webkit-scrollbar-track-piece  {
  height: 0px;
  width: 0px;
  opacity: 0;}
#profile-b .profile-content .topic::-webkit-scrollbar-thumb        {
  height: 0px;
  width: 0px;
  opacity: 0;
}
#profile-b .profile-content .topic::-webkit-scrollbar-corner       {
  height: 0px;
  width: 0px;
  opacity: 0;
}
#profile-b .profile-content .topic::-webkit-resizer                {
  height: 0px;
  width: 0px;
  opacity: 0;
}

#profile-b .profile-content .topic .pic .contributors{
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  overflow-x: scroll;
}

#profile-b .profile-content .topic .pic .contributors .c_avatar{
  display: inline-block;
  min-height: 32px;
  min-width: 32px;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 90px;
  margin-right:6px;
}

#profile-b .profile-content .topic .content{

}

#profile-b .profile-content .topic .content .topic_title{
  font-size: 1.2em;
  color:#000;
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.45;
}

#profile-b .profile-content .topic .content .stats{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  margin-top: 5px;
  font-size: 0.9em;
}

#profile-b .profile-content .topic .content .stats .resources{
  display: inline-block;
  color:#888;
}

#profile-b .profile-content .topic .content .stats .resources .no{
  display: inline-block;
  margin-right: 4px;
  font-weight: 500;
}

#profile-b .profile-content .topic .content .stats .open{
  display: inline-block;
  padding:4px 5px 5px 5px;
  border:1px solid #1546D2;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: 400;
  text-transform: uppercase;
}

#profile-b .profile-content .topic .content .stats .open:hover{
  background: #fff;
}

#profile-b .profile-content .call_to{
  display: flex;
  background: #fff;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  line-height: 1.5;
  padding:24px;
  border-radius: 4px;
  border:1px solid #e2e2e2;
  color:#777;
  margin-bottom: 30px;
}

#profile-b .profile-content .call_to b{
  margin-bottom: 10px;
  font-size: 1.4em;
  font-weight: 500;
  color:#000;
}

#profile-b .profile-content .call_to .icon{
  font-size: 4em;
  line-height: 1;
  margin-right: 30px;
  color:#ddd;
}

#profile-b .profile-content .call_to .button{
  margin-top: 15px;
}

#profile-b .profile-content .quizzes{
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

#profile-b .profile-content .title_q{
  display: block;
  width: 100% !important;
  color:#bbb;
  font-weight: 500;
  margin-bottom: 16px;
  font-size: 0.8em;
  /*text-transform: uppercase;*/
}

#profile-b .profile-content .quiz_list{
  display: flex;
  width: 100% !important;
  flex-wrap: wrap;
}

#profile-b .profile-content .quiz_list .quiz{
  width: 31.5%;
  margin-right: 1.5%;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  padding:18px 22px;
  margin-bottom: 15px;
}

#profile-b .profile-content .quiz_list .quiz .name{
  color:#000;
  font-weight: 500;
  font-size:1.3em;
  line-height: 1.45;
}

#profile-b .profile-content .quiz_list .quiz .questions{
  color:#999;
  margin-top: 1px;
}

#profile-b .profile-content .quiz_list .quiz .take{
  border:1px solid #e2e2e2;
  border-radius: 3px;
  text-transform: uppercase;
  color:#999;
  font-weight: 400;
  font-size: 0.8em;
  padding:8px 14px;
  margin-top: 20px;
  text-align: center;
}

#profile-b .profile-content .quiz_list .quiz .take:hover{
  cursor: pointer;
  border-color: #1546D2;
  color:#1546D2;
}


/* PROFILE */

#profile{
  display: block;
  width: 100%;
  margin: 0px auto;
}

#profile .coming_soon{
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  color:#000;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  padding:100px;
  font-size: 1.8em;
  line-height: 1.8em;
  font-weight: 300;
  z-index: 9;
}

#profile .header_p{
  display: block;
  background: #fff;
  width: 100%;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

#profile .header_p #wrapper_p{
  display: flex;
  vertical-align: middle;
  align-items: center;
  width: 80%;
  min-height: 80px;
  margin: 0 auto;
  padding:10px 0;
  justify-content: space-between;
}

#profile .header_p .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#profile .header_p .left .avatar{
  height: 80px;
  width: 80px;
  border-radius: 3px;
  background-position: center !important;
  background-size: cover !important;
  margin-right: 20px;
  /*box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);*/
}

#profile .header_p .left .info{

}

#profile .header_p .left .info .name{
  color:#000;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1;
}

#profile .header_p .left .info .username{
  color:#bbb;
  font-weight: 500;
  font-size: 1em;
  margin-top:2px;
}

#profile .header_p .left .info .title{
  color:#000;
  font-weight: 300;
  font-size:0.8em;
  margin-top: 5px;
  color:#555;
}

#profile .header_p .right{
  display: flex;
  font-size: 0.8em;
  color:#888;
}

#profile .header_p .right b{
  color:#000;
  font-size: 2em;
  margin-left: 12px;
}

#profile .header_p .right .teaching{
  display: flex;
  vertical-align: middle;
  align-items: center;
  padding:10px;
  font-weight: 300;
  margin-right: 35px;
}

#profile .header_p .right .learning{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  padding:10px;
}

#profile #profile_content{
  margin:40px 0;
}

#profile #profile_content #profile_c_wrapper{
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  color:#000;
  font-weight: 300;
}



#profile #profile_content #profile_c_wrapper .s{
  width: 33%;
}

#profile #profile_content #profile_c_wrapper .s .activity{
  background: #fff;
  padding:14px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  margin-top: 32px;
}

#profile #profile_content #profile_c_wrapper .s .activity .title_a{
  color:#bbb;
  font-weight: 500;
  font-size: 0.9em;
  margin-bottom: 12px;
  line-height: 1;
}

#profile #profile_content #profile_c_wrapper .s .activity .item{
  margin-bottom: 8px;
  margin-top:6px;
  display: flex;
  width: 100%;
}

#profile #profile_content #profile_c_wrapper .s .activity .item .icon{
  margin-right: 7px;
  color: #1546D2;
  font-size: 1em;
  line-height: 1;
  margin-top: 1px;
}

#profile #profile_content #profile_c_wrapper .s .activity .item .text{
  line-height: 1.4;
  font-size: 0.8em;
  font-weight: 300;
}

#profile #profile_content #profile_c_wrapper .s .activity .item .text a{
  font-weight: 500;
}

#profile #profile_content #profile_c_wrapper .s .activity .item .text b{
  font-weight: 300;
  color:#999;
}

#profile #profile_content #profile_c_wrapper .s .share{
  background: #fff;
  padding:14px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  margin-top: 22px;
}

#profile #profile_content #profile_c_wrapper .s .share .title_s{
  color:#bbb;
  font-weight: 500;
  font-size: 0.9em;
  margin-bottom: 12px;
  line-height: 1;
}

#profile #profile_content #profile_c_wrapper .s .share .buttons{
  display: flex;
}

#profile #profile_content #profile_c_wrapper .s .share .twitter{
  background:#24a9e6 url('../image/social/twitter_w.png') no-repeat;
  background-size:14px auto;
  background-position: center;
  height: 32px;
  width: 60px;
  border-radius: 3px;
  margin-right: 5px;
}

#profile #profile_content #profile_c_wrapper .s .share .twitter:hover{
  cursor: pointer;
  background-color: #1693ce;
}

#profile #profile_content #profile_c_wrapper .s .share .facebook{
  background:#42609c url('../image/social/facebook_w.png') no-repeat;
  background-size:14px auto;
  background-position: center;
  height: 32px;
  width: 60px;
  border-radius: 3px;
}

#profile #profile_content #profile_c_wrapper .s .share .facebook:hover{
  cursor: pointer;
  background-color: #294a8e;
}


/* Notes include */
#notes_include{
  margin-top: 25px;
}

#notes_include .title{
  font-size: 0.9em;
  font-weight: 400;
  text-transform: uppercase;
  color:#999;
  margin-bottom: 8px;
}

#notes_include .single_note{
  background: #fff;
  border:1px solid #e2e2e2;
  border-radius: 3px;
  padding:16px;
  font-weight: 300;
  font-size: 0.85em;
  margin-bottom: 10px;
}

#notes_include .single_note .note_head{
  color:#999;
  margin-bottom: 10px;
}

#notes_include .single_note .note_text{
  color:#000;
  font-size: 1.1em;
  line-height: 1.45;
  font-weight: 400;
}

#notes_include .single_note .note_footer{
  margin-top: 14px;
  display: flex;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  justify-content: space-between;
}

#notes_include .single_note .note_footer .topic{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#notes_include .single_note .note_footer .topic .icon{
  height: 28px;
  width: 28px;
  background: #e2e2e2;
  border-radius: 3px;
  margin-right: 9px;
}

#notes_include .single_note .note_footer .topic .name{
  color:#000;
  font-weight: 400;
}

#notes_include .single_note .note_footer .options{
  display: flex;
  color:#999;
  font-size: 0.95em;
}

#notes_include .single_note .note_footer .options li{
  list-style: none;
  margin-left:20px;
}

#notes_include .single_note .note_footer .options li:hover{
  cursor: pointer;
  color:#000;
}




/* REACT RESOURCES */
/* Resource */

.react_resource{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #fff;
  min-width: 300px;
  border:1px solid #e2e2e2;
  border-radius: 3px;
  justify-content: space-between;
  margin-bottom: 20px;
  overflow: hidden;

}

.react_resource_quiz{
  border:2px solid #e2e2e2;
  background: #e2e2e2;
}

.react_resource_text_resource{

}

.react_resource_text_resource .content .name{

}

.react_resource_text_resource .content .des{
  font-size: 1.2em !important;
}

.react_resource iframe{
  width: 100% !important;
  height: 290px !important;
}

.react_resource .top_user{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  padding:15px;
  width: 100%;
}

.react_resource .top_user .left{
  display: flex;
  justify-content: flex-start;
}

.react_resource .top_user .left .avatar{
  height: 42px;
  width: 42px;
  border-radius: 2px;
  background-size: cover !important;
  background-position: center !important;
  margin-right:8px;
}

.react_resource .top_user .left .c_user{
  display: flex;
  flex-wrap: wrap;
  vertical-align: middle;
  align-items: center;
  line-height: 1;
}

.react_resource  .top_user .left .c_user .name{
  display: block;
  width: 100%;
  color:#000;
  font-size:0.95em;
  line-height: 1;

}

.react_resource .top_user .left .c_user .time{
  display: block;
  color:#999;
  font-size:0.8em;
  line-height: 1;
  margin-top: -8px;

}

.react_resource .top_user .right{
  display: flex;
  justify-content: flex-end;
  vertical-align: middle;
  align-items: center;
}

.react_resource .top_user .right .purchase{
  display: inline-flex;
  position: relative;
  padding:6px 14px 4px 14px;
  background: #EE7D33;
  color:#fff;
  height: 36px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  font-size:0.9em;
  border-radius: 3px;
  line-height: 1.1;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  margin-left: 5px;
  overflow: hidden;
  text-decoration: none;
}

.react_resource .top_user .right .purchase:hover{
  cursor: pointer;
  background: #FDAA26;
}

.react_resource .top_user .right .todo{
  display: inline-flex;
  position: relative;
  padding:6px 12px 4px 48px;
  background: #ED4CBA;
  color:#fff;
  height: 36px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  font-size:0.9em;
  border-radius: 3px;
  line-height: 1.1;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  margin-left: 5px;
  overflow: hidden;
}

.react_resource .top_user .right .todo .icon{
  position: absolute;
  left:0;
  top:0;
  line-height: 41px;
  margin-right: 5px;
  font-size: 1.6em;
  margin-top: 1px;
  background: rgba(0,0,0,0.1);
  height:36px;
  width: 36px;
  text-align: center;
}

.react_resource .top_user .right .todo:hover{
  cursor: pointer;
  opacity: 0.9;
}

.react_resource .top_user .right .inTodo{
  background: #888;
}

.react_resource .padded{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding:18px 18px 18px 18px;
}

.react_resource .uploaded_image{
  width: 100%;
  display: block;
}

.react_resource .product_images{
  width: 100%;
  display: block;
  overflow-x: auto;
  background: #f0f0f0;
  padding:10px;
}

.react_resource .product_images .holder{
  width: auto;
  display:inline-flex;
}

.react_resource .product_images .holder img{
  height: 240px;
  width: auto;
  margin-right: 10px;
}

.react_resource .embed{
  width: 100%;
  display: block;
}

.react_resource .embed .image{
  position: relative;
  border-top:1px solid #e2e2e2;
  border-bottom:1px solid #e2e2e2;
}

.react_resource .embed .image .play{
  position: absolute;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  top:50%;
  left:50%;
  font-size: 3em;
  margin-top: -40px;
  margin-left: -40px;
  color:#1546D2;
  height: 80px;
  width: 80px;
  background: #fff;
  line-height: 80px !important;
  text-align: center;
  border-radius: 90px;
  padding-left: 7px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);

}

.react_resource .embed .image .play:hover{
  cursor: pointer;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  color:#ec2424;
}

.react_resource .external{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  background: #f8f8f8;
  border-bottom: 1px solid #e2e2e2;
  width: 100%;
  padding:35px 30px 30px 30px;
  text-align: center;
  height: 260px;
}

.react_resource .external .overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  background-size: cover !important;
  background-position:center !important;
}

.react_resource .external .overlay .overoverlay{
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  opacity: 0.8;
}

.react_resource .external .icon{
  display: none;
  position: relative;
  font-size: 2.8em;
  color:#000;
  opacity: 0.5;
  margin-top: 5px;
  display: block;
  width: 100%;
}

.react_resource .external .open_ext{
  position: relative;
  border:1px solid #e2e2e2;
  border-radius: 90px;
  padding:10px 22px;
  text-align: center;
  font-size: 0.9em;
  margin-top: 2px;
  background: #fff;
  margin: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(0, 0, 0, 0.5);
}

.react_resource .external .open_ext:hover{
  border-color: #ddd;
}

.react_resource:active{
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  /*opacity: 0.85;*/
  border-color:#e2e2e2 !important;
}

.react_resource:hover{
  border-color:#ccc;
  cursor: pointer;
}

.react_resource .image{
  min-height: 0px;
  height: auto;
  width: 100%;
}

.react_resource .content{
  display: block;
  width: 100%;
}

.react_resource .content .name{
  display: block;
  width: 100%;
  font-weight: 400;
  color:#222;
  font-size: 1.05em;
  align-items: flex-end;
  vertical-align: text-bottom;
}

.react_resource .content .name_quiz{
  display: flex;
  width: 100%;
  font-weight: 400;
  color:#222;
  font-size: 1.05em;
  vertical-align: middle;
  align-items: center;
  border-bottom:1px solid #e2e2e2;
  padding-bottom: 18px;
  justify-content: space-between;
}

.react_resource .content .name_quiz .icon{
  margin-right: 15px;
  font-size: 1.8em;
  color:#bbb;
  margin-top: 5px;
}

.react_resource .content .des{
  display: block;
  width: 100%;
  font-size: 0.9em;
  font-weight: 300;
  margin-top: 5px;
  line-height: 1.45;
  align-items: flex-end;
  vertical-align: text-bottom;
  color:#999;
}


.react_resource .content .bottom{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  color:#999;
  font-size: 0.85em;
  font-weight: 300;
  text-align: right;
}

.react_resource .content .bottom .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.react_resource .content .bottom .left .delete{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  border:1px solid #e2e2e2;
  padding: 3px 8px 3px 8px;
  line-height: 1;
  border-radius: 2px;
  color:#222;
  font-size: 0.9em;
  height: 28px;
  margin-right: 12px;
  opacity: 0.5;
}

.react_resource .content .bottom .left .delete:hover{
  opacity: 1;
  color:#d73b63;
  border-color: #d73b63;
}

.react_resource .content .bottom .left .added_by{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  margin-right: 20px;
  font-size:0.9em;
  color:#999;
}

.react_resource .content .bottom .left .added_by .avatar{
  height: 27px;
  width: 27px;
  background-size:cover !important;
  background-position: center !important;
  border-radius: 90px;
  margin-right: 7px;
  margin-left: 8px;
}

.react_resource .content .bottom .left .added_by .adder_name{
  font-weight: 500;
  color:#555;
}

.react_resource .content .bottom .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.react_resource .content .bottom .level{
  font-size: 0.9em;
  margin-right: 12px;
}

.react_resource .content .bottom .quiz{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  border:1px solid #e2e2e2;
  padding: 3px 8px 3px 8px;
  line-height: 1;
  border-radius: 2px;
  color:#222;
  font-size: 0.9em;
  height: 28px;
  margin-right: 12px;
}

.react_resource .content .bottom .quiz:hover{
  color:#999;
}

.react_resource .content .bottom .quiz .icon{
  margin-right: 6px;
  font-size: 1.2em;
  margin-top: 1px;
}

.react_resource .content .bottom .take_quiz{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  border:1px solid #1546D2;
  padding: 3px 8px 3px 8px;
  line-height: 1;
  border-radius: 2px;
  font-size: 0.9em;
  height: 28px;
  margin-right: 12px;
  background: #1546D2;
  color:#fff;
}

.react_resource .content .bottom .take_quiz:hover{
  background: #3AB54A;
  border-color: #3AB54A;
}


.react_resource .content .bottom .markas{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  border:1px solid #e2e2e2;
  padding: 3px 8px 3px 8px;
  line-height: 1;
  border-radius: 2px;
  color:#222;
  font-size: 0.9em;
  height: 28px;
  margin-right: 12px;
}

.react_resource .content .bottom .markas:hover{
  color: #3AB54A;
  border-color: #3AB54A;
}

.react_resource .content .bottom .markasdone{
  background: #3AB54A;
  border-color: #1aa22c;
  color:#fff;
}

.react_resource .content .bottom .markasdone:hover{
  border-color: #1aa22c;
  color:#fff;
}

.react_resource .content .bottom .votes{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  font-weight: 300;
  border:1px solid #e2e2e2;
  padding: 3px 8px 3px 6px;
  line-height: 1;
  border-radius: 2px;
  color:#222;
  font-size: 0.9em;
  height: 28px;

}

.react_resource .content .bottom .votes:hover{
  background:#1546D2;
  border-color: #1546D2;
  color: #fff;
  cursor: pointer;
}

.react_resource .content .bottom .upvoted{
  background:#1546D2;
  border-color: #1546D2;
  color: #fff;
}

.react_resource .content .bottom .votes .icon{
  margin-right: 4px;
  margin-top: 2px;
  font-size: 1.2em;
  line-height: 1;
}

.react_resource .discussion-container{
  display: block;
  width: 100%;
  padding:18px;
  background: #f0f0f0;
  border-top: 1px solid #e2e2e2;
  font-size: 0.8em;
}

.react_resource .status{
  display: flex;
  vertical-align: middle;
  align-items: center;
  min-width: 130px;
  text-align: center;
  justify-content: center;
}

.react_resource .status .icon{
  display: inline-block;
  font-size: 2.8em;
  line-height: 1 !important;
  padding: 0;
  margin: 0;
  color:#ddd;
}

.remodal-resource{
  position: relative;
  min-width: 93% !important;
  min-height: 85% !important;
  padding:0 !important;
}

.remodal-resource .notice{
  position: absolute;
  height: 500px;
  width: 600px;
  top:50%;
  left:50%;
  margin-top: -250px;
  margin-left: -300px;
  text-align: center;
  z-index: 1;
}

.remodal-resource .notice .text{
  font-size: 1.6em;
  color:#999;
  margin-bottom: 40px;
}

.remodal-resource .notice .btn{
  display: inline-block;
  background:#1546D2;
  color:#fff;
  padding:16px 39px;
  border-radius:90px;
}

.remodal-resource .notice .btn:hover{
  cursor: pointer;
  opacity: 0.9;
}

.remodal-resource .link{
  position: absolute;
  bottom:-25px;
  left:0px;
  color:#fff !important;
  font-size: 0.85em;

}

.remodal-resource .link a{
  color:#fff !important;

}


.remodal-resource iframe{
  position: relative;
  border:none;
  min-height: 100%;
  width: 100%;
  border-radius: 5px;
  background: none;
  z-index: 9;
}

.remodal-resource .remodal-close{
  position: absolute;
  top:0px;
  right:-42px;
  background: #fff;
  border-radius: 90px;
}

.remodal-resource-video{
  min-width: 800px !important;
  width: 800px;
  max-width: 900px !important;
  padding:0 !important;
  background: none !important;
  border:none !important;
}


.remodal-resource-video iframe{
  width: 100% !important;
  min-height: 550px !important;
  height: auto !important;
}

.remodal-resource-video .remodal-close{
  position: absolute;
  top:0px;
  right:-42px;
  background: #fff;
  border-radius: 90px;
}


#login-register-form{
  display: block;
  min-width: 400px;
  margin: 70px auto;
}

#login-register-form .title{
  display: inline-block;
  margin-bottom: 30px;
  font-size: 1.2em;
  text-align: center;
  color:#777;
}

#login-register-form label{
  display: block;
  font-size: 0.9em;
  font-weight: 300;
  margin-bottom: 10px;
}

#login-register-form input{
  display: block;
  width: 100%;
  padding:14px;
  font-size: 1em;
  border:1px solid #ddd;
  outline: none;
  margin-bottom: 15px;
  border-radius: 3px;
}

#login-register-form input:focus{
  border-color: #1546D2;
}

#login-register-form button{
  display: block;
  text-align: center;
  width: 100%;
  background: #1546D2;
  color:#fff;
  border:none;
  border-radius: 90px;
  padding:20px;
  font-size: 0.9em;
  text-transform: uppercase;
}

#login-register-form button:hover{
  cursor: pointer;
  opacity: 0.9;
}

#article{
  margin: 70px auto;
}

#article #wrapper{
  display: block;
  width: 80%;
  margin: 0 auto;
}

#article #wrapper .content{
  max-width: 600px;
  line-height: 1.5;
  font-weight: 300;
  color:#444;
  background: #fff;
  border:1px solid #e2e2e2;
  padding:50px 60px 70px 60px;
}

#article #wrapper .content .title{
  font-size: 2em;
  color: #1546D2;
  margin-bottom: 30px;
}

#article #wrapper .alcamy{
  max-width: 600px;
  line-height: 1.5;
  font-weight: 300;
  color:#fff;
  background: #1546D2;
  border:1px solid #e2e2e2;
  border-radius: 4px;
  margin-top: 20px;
  padding:40px;
}

#article #wrapper .alcamy .l{
  margin-bottom:30px;
  opacity: 0.9;
}

#article #wrapper .alcamy .title{
  font-weight: 400;
  color:#fff;
  margin-bottom: 10px;
  font-size: 1.4em;
}

#article #wrapper .alcamy .des{
  color: #a7b8ff;
}

#article #wrapper .alcamy .btn{
  display: inline-block;
  color:#1546D2;
  background: #fff;
  margin-top: 20px;
  border-radius: 90px;
  padding: 12px 30px;
}

#article #wrapper .alcamy .btn:hover{
  opacity: 0.9;
  cursor: pointer;
}

#category{
  margin:40px 0;
  width: 85%;
}

#category .header{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 50px;
}

#category .header .left{

}

#category .header .left .title{
  display: flex;
  vertical-align: middle;
  align-items: center;
  width: 100%;
  font-size: 2.8em;
  font-weight: 500;
}

#category .header .left .title .icon{
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  background: #e2e2e2;
  width: 50px;
  height: 50px;
  font-size: 0.65em;
  line-height: 1;
  border-radius: 4px;
}

#category .header .left .tag{
  display: block;
  margin-top: 6px;
  font-size:1.2em;
  line-height: 1.45;
  color:#999;
  font-weight: 300;
  max-width: 70%;
}

#category .header .right{
  display: flex;
  justify-content: flex-end;
  width: 40%;
}

#category .header .right .share{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#category .header .right .share .share_button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  padding:12px 18px;
  color:#fff;
  border-radius: 3px;
  margin-left: 10px;
}

#category .header .right .share .share_button:hover{
  opacity: 0.9;
  cursor: pointer;
}

#category .header .right .share .facebook{
  background: #334f8d;
}

#category .header .right .share .facebook .icon{
  height: 26px;
  width: 26px;
  background: url('../image/social/facebook_w.png') no-repeat;
  background-size: cover !important;
  margin-right: 12px;
}

#category .header .right .share .twitter{
  background: #00a3ea;
}

#category .header .right .share .twitter .icon{
  height: 26px;
  width:26px;
  background: url('../image/social/twitter_w.png') no-repeat;
  background-size: cover !important;
  margin-right: 12px;
}

#category ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

#category ::-webkit-scrollbar-track {
    background:#fff;
}

#category ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

#category .topics{

}

#category .topics .title{
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
  text-transform: uppercase;
  color:#fff;
  background: #444;
  padding:10px 18px;
  border-radius: 90px;
}

#category .topics .holder-h{
  overflow-x: auto;
}

#category .topics .holder{
  display: inline-flex;
  vertical-align: text-top;
  align-items: flex-start;
  margin-top: 20px;
  width: auto;
  padding-bottom: 20px;
}

#category .topics .holder .topic{
  display: inline-block;
  width: 200px;
  margin-right: 20px;
}

#category .topics .holder .topic:hover{
  cursor: pointer;
  opacity: 0.9;
}

#category .topics .holder .topic .image{
  width: 100%;
  height: 250px;
  background: #e2e2e2;
  margin-bottom: 10px;
  background-size: cover !important;
  background-position: center !important;
}

#category .topics .holder .topic .title_t{
  color:#000;
  font-size: 1.25em;
  line-height: 1.45;
  font-weight: 500;
}

#category .topics .holder .topic .des_t{
  color:#999;
  font-size: 0.9em;
  margin-top:5px;
  line-height: 1.45;
}

#category .topics .holder .topic .meta{
  margin-top:12px;
}

#category .topics .holder .topic .meta .resource{
  display: inline-block;
  margin-right: 10px;
  background: #e2e2e2;
  color:#999;
  border-radius: 90px;
  padding:7px 14px;
  font-size: 0.9em;
}

#category .influencers{
  margin-top:40px;
}

#category .influencers .title{
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
  text-transform: uppercase;
  color:#fff;
  background: #444;
  padding:10px 18px;
  border-radius: 90px;
}

#category .influencers .holder-h{
  overflow-x: auto;
}

#category .influencers .holder{
  display: inline-flex;
  vertical-align: text-top;
  align-items: flex-start;
  margin-top: 20px;
  width: auto;
  padding-bottom: 20px;
}

#category .influencers .holder .influencer{
  width: 250px;
  background: #fff;
  padding:20px;
  border:1px solid #e2e2e2;
  border-radius: 4px;
  text-align: center;
  margin-right: 15px;
}

#category .influencers .holder .influencer .name{
  font-size: 1em;
  font-weight: 500;
  color:#000;
}

#category .influencers .holder .influencer .avatar{
  display: inline-block;
  margin: 0 auto;
  border-radius:90px;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

#category .influencers .holder .influencer .why{
  font-size: 0.9em;
  margin-top: 9px;
  line-height: 1.45;
  color:#888;
}

#category .influencers .holder .influencer .ask{
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #B7E67E;
  border-radius: 90px;
  line-height: 1;
  padding:3px 17px;
  color:#548c2c;
  text-align: center;
  font-size: 0.8em;
  margin-top: 14px;
  border:1px solid rgba(0, 0, 0, 0.1);
}

#category .influencers .holder .influencer .ask .icon{
  color:#548c2c;
  margin-right: 10px;
  font-size: 1.8em;
  line-height: 1;
  margin-top: 3px;
}

#category .influencers .holder .influencer .ask:hover{
  cursor: pointer;
  background-color: #a8e063;

}

#category .influencers .holder .become-influencer{
  width: 250px;
  background: #fff;
  padding:30px 20px;
  border:1px solid #e2e2e2;
  border-radius: 3px;
  text-align: center;
  margin-right: 12px;
}

#category .influencers .holder .become-influencer .icon{
  font-size: 3em;
  color:#ddd;
}

#category .influencers .holder .become-influencer .t{
  line-height: 1.45;
  font-size: 1.2em;
  margin-bottom: 6px;
}

#category .influencers .holder .become-influencer .button:hover{
  opacity: 0.9;
}


#footer{
  display: block;
  color:#aaa;
  font-size: 0.9em;
  padding-top: 70px;
  padding-bottom: 30px;
  background: #f9fcff;
  border-top:1px solid #e2e2e2;

}

#footer #wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  vertical-align: text-top;
  width: 85%;
  margin: 0 auto;
}

#footer .logo-f{
  display: inline-block;
  width: auto;
}

#footer .logo-f .image{
  height: 30px;
  width: 250px;
  background: url("../image/logo-b.png") no-repeat;
  background-size: auto 100%;

  opacity: 1;
}

#footer .tag{
  margin-top: 15px;
  max-width: 30%;
  line-height: 1.45;
}

#footer .menus{
  display: flex;
  justify-content: flex-end;
  width: 68%;
}

#footer .menus .menu{
  margin-left: 90px;
  font-weight: 300;
  font-size:0.9em;
}

#footer .menus .menu .title{
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 12px;
  color:#444;
  font-size: 0.9em;
}

#footer .menus .menu li{
  list-style: none;
  margin-bottom: 8px;
}

#footer .menus .menu li a{
  color:#999;
}

#footer .menus .menu li a:hover{
  color: #1546D2;
}

#footer .bar{
  display: flex;
justify-content: space-between;
  width: 100%;
  padding-top: 15px;
  border-top:1px solid #e2e2e2;
  margin-top: 45px;
  font-weight: 300;
  font-size: 0.85em;
}

#how_to_learn{
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left:0;
  z-index: 9999;
}

#how_to_learn .bg{
  position: absolute;
  height:100%;
  width: 100%;
  background: rgba(21, 70, 210, 0.95);
}

#how_to_learn .wrapper{
  position: relative;
  width: 70%;
  max-width: 600px;
  margin: 80px auto;
}

#how_to_learn .title{
  display: block;
  color: #fff;
  font-size: 1.6em;
  font-weight: 300;
  margin-bottom: 40px;
  text-align: center;
}

#how_to_learn .step{
  background: #fff;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
  border:1px solid #e2e2e2;
  color:#000;
  padding:30px;
  border-radius: 2px;
  margin-bottom: 25px;
}

#how_to_learn .step .text{
  font-size: 1.2em;
  line-height: 1.45;
  font-weight: 300;
  color:#888;
}