/* Minification failed. Returning unminified contents.
(420,1): run-time error CSS1019: Unexpected token, found '@import'
(420,9): run-time error CSS1019: Unexpected token, found 'url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300)'
(420,75): run-time error CSS1019: Unexpected token, found ';'
(646,66): run-time error CSS1035: Expected colon, found ';'
(995,68): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(997,18): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
 */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize_20161103.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@font-face { font-family: 'Bebas Neue'; src: url('/App_Themes/Learn/fonts/BebasNeueRegular.eot'); src: url('/App_Themes/Learn/fonts/BebasNeueRegular.eot?#iefix') format('embedded-opentype'), url('/App_Themes/Learn/fonts/BebasNeueRegular.woff') format('woff'), url('/App_Themes/Learn/fonts/BebasNeueRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { height: 100%; position: relative }
body { font-family: "Titillium Web", sans-serif; font-weight: 400;  background-color:#f5f5f5; height:100%;}
body > form {height:100%;}
.form-wrapper {height:100%; }
a { text-decoration: none; cursor: pointer; }
img { border: none }
ul, li { margin: 0; padding: 0 }
.clearfix:after { display: table; clear: both; content: "" }
a.author { color: #0ab7ff; display: inline-block; margin-bottom: 5px; font-size: 16px; }
a.author:hover { color: #0086dc; }
.box:empty, li:empty { height: 0 !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; outline: none !important; background: transparent!important; border:none!important; }
h1 { font-size: 35px; font-weight: 300; margin-top: 0; color:#2f2f2f;}
.h1{margin-top:15px; margin-bottom:0;    padding-left: 14px;}
p { font-size: 17px; line-height: 1.8; font-weight: 300 }
span.author { margin-bottom: 5px; overflow: hidden; }
.main-container { clear:both; flex: 1; width: 100%; max-width:1240px; margin: 0 auto; min-height: calc(100% - 204px); -webkit-min-height: calc(100% - 204px);}

.full-width{max-width:100%;}

/* for alt text*/ img{font-size:10px!important;}
/* header */

.header { background-color: #363535; background-image: linear-gradient(67deg, #363535 214px, #363535 211px); padding: 12px; position: relative }
.leftBar { float: left; }
.logo-wrapper { float: left; margin-right: 30px; }
.logo .logo-text { display: inline-block; font-size: 30px; color: #fff; position: relative; top: -14px; }
.top-menu { display: block; float: left; margin-right: 5px; padding-top: 10px; }
.top-menu li { display: inline-block; position: relative; margin-right: 8px; list-style:none; }

.top-menu li a { display: inline-block; padding: 5px; color: rgba(255, 255, 255, 0.9); font-weight: 400; font-size: 18px; }
.top-menu li  a:hover, .top-menu li  a.active { color: rgba(255, 255, 255, 1); }
.header a.logo { display: inline-block; position: relative; top: 6px; }
.header .rightbar { float: right; }
/*.header .rightbar a { display: inline-block; position: relative; top: 10px; margin-left: 10px; }*/
.header .search { display: inline-block; background-color: #fff; background-image: url(../images/search.png); background-repeat: no-repeat; background-position: right 6px center; padding-right: 30px; }
.header .search input { padding: 0 5px; height: 35px; border: none; }
.header .search input:focus { border: 0; outline: 0; }
.login-bar { display: inline-block }

/* header 2 */
.header2 .h1 {    margin: 0;   text-align: center; padding:10px 15px;}
/*.header2{box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); background:#fff; margin-bottom:10px;}*/
.nav-bar-wrapper{position:relative; padding:15px; max-width:1240px; margin:0 auto;margin-top: -72px;}
.drop-down-wrapper{position:relative}
.dropdown-wrap {
    position: relative;
    display: inline-block;
    float: right;
}
.navbar { background-color: #fff; border: 1px solid #e0e0e0; font-size: 14px; position: absolute; width: 250px; height: 340px; overflow: auto ; display: none;     display: none;
    top: 44px;
    z-index: 999;}
.navbar.navbar-all { height: auto; box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2) }
.navbar-shadow { margin-bottom: 30px; }
.shadow:before { content: ""; display: block; position: absolute; height: 100px; width: 100%; left: 0; bottom: 0; box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2); border-radius: 15%; z-index: -1; }
.navbar li { display: block; list-style:none; }
.navbar li a:after { content: ""; display: table; clear: both; }
.navbar li a { color: #2e2e2e; display: block; transition: all .2s; padding: 8px; display: flex; }
.navbar li a:hover{ color: #0ab7ff; background-color: #f7f7f7; }
/*.navbar li a:visited{ color:#0086dc;}*/
.navbar li a.active{ color: #0ab7ff; background-color: #f7f7f7; }
.navbar li a img { display: inline-block; width: 40px; height: 40px; margin-right: 10px; vertical-align: middle }
.navbar li a span { align-self: center; font-size:16px;}
#category-btn { padding: 8px 40px 8px 20px; background: #fff; color: #2e2e2e; float: right; width: 250px; position: relative; font-size: 20px;    overflow: hidden;height: 40px;cursor: pointer; line-height:28px;}
#category-btn:after { content: ""; border-width: 10px 7px 0 7px; position: absolute; border-color: #2e2e2e transparent; border-style: solid; right: 10px; top: 17px; }




/* header 3*/
.filter-bar { padding: 20px; background-color: #f0efef; font-size: 22px; }
.filter-bar input[type=radio] { display: none }
.filter-bar label { display: block; float: left; padding: 12px 20px; border-left: 1px solid #e1e1e1; }
.filter-bar input[type=radio]:checked + label { background: #0ab7ff; color: #fff; }
.filter-bar label:first-of-type { border: none; }
.radio-wrapper { background: #fff; float: left; border: 1px solid #e1e1e1; margin-right: 10px; }

/*.sort-dorpdown { float: right; display: inline-block; padding: 12px; font-size: 22px; border: 1px solid #e1e1e1; }*/
.sort-dorpdown { float: right; position: relative; }
.sort-dorpdown select { display: inline-block; padding: 12px 50px 12px 12px; border: 1px solid #e1e1e1; }
.sort-dorpdown:after { content: ""; position: absolute; background-color: #fbfbfb; border: 1px solid #e1e1e1; width: 50px; height: 100%; top: 0; right: 0; background-image: url(/App_Themes/Learn/images/drop-arrow.png); background-repeat: no-repeat; background-position: center center; pointer-events: none; }

/* main */
.main-wrapper { padding: 30px 15px; background: #ffffff; display:block; display: flex; justify-content: space-around; flex-wrap: wrap; }
.main-wrapper .box a:hover h3 { color: #0086dc; }
.main-wrapper .box { width: 400px; display: inline-block; padding: 10px; margin-bottom: 40px; text-align: left; }
.main-wrapper .box img { width: auto; display: block; float: left; margin-right: 10px; margin-bottom: 10px; }
.main-wrapper .box h3 { font-size: 18px; font-weight: 600; color: #202020; margin-top: 0px; margin-bottom: 14px; }
.main-wrapper .box  P { font-size: 14px; color: #575757; line-height: 1.4; margin-top: 0; overflow: hidden }

/* footer */
.footer { display:block; clear:both;flex: none; }
.footer1 { background-color: #353535; padding: 30px 15px; letter-spacing: .1px; font-size: 13px; clear: both; }
.footer1 .category { max-width: 1240px; margin: 0 auto; display: block; }
.footer1 .category li { display: block; float: left; padding: 3px 15px; width: 25%; list-style:none; }
.footer1 a { color: #d2d2d2; font-size: 16px }
.footer1 a:hover { color: #fff }

/* footer 2 */


.footer2 {width: 100%;display: block;position: relative;height: 49px;padding: 12px 12px;max-width: 1240px;    margin: 0 auto;    display: block;}


.footer2 .socialCntrl { float: right; list-style: none;}
.footer2 .socialCntrl li { float: left; margin-left: 8px; }
.footer2 .socialCntrl li a { display: block; width: 30px; height: 30px; font-size: 30px; line-height: 30px; position: relative; color: #808080; }
.footer2 .socialCntrl li a.facebook { font-size: 25px; }
.footer2 .socialCntrl li a i { position: absolute; left: 0; top: 0; text-align: center; width: 100%; }
.footer2 .socialCntrl li a:hover { color: #f6891f; }

.footer2 .CopyRight {float: left;font-size: 14px;color: #1b1b1b; margin-top:0}

/* tutorials page */
.tutorials-main { padding: 10px; display:block; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }

/* internet explorer hack start*/
@media screen and (min-width:0) and (min-resolution: +72dpi) {  .tutorials-main li{_height:180px;} }
/* internet explorer hack end*/

.tutorials-main > li { width: 31%; display: block; height:180px; _height:180px; float: left; margin: 0px 5px 20px; text-align:center; font-size:20px; border:1px solid rgba(0,0,0,.07); list-style:none; position:relative;box-shadow: 0 2px 5px -4px rgba(0,0,0,.8); cursor:pointer; overflow:hidden;transition-duration: 0.4s;background-size:cover;    background-position: center center!important;}

.tutorials-main li a { color: #fff; }

.student-count{padding: 4px 8px 0;position: absolute;top:121px;width: 100%;height: 180px; color: #FFFFFF;background:rgba(0,0,0,0.7);height:100%;-moz-transition: 0.4s;-webkit-transition: 0.4s;transition: 0.4s;}

@media only screen and (max-width:840px){
.student-count{top:0; padding-top: 16px}

}
@media only screen and (max-width:600px){
    .top-menu {
       margin-left: -39px;
    }
}


.tutorials-main > li:hover .student-count{top:0px; padding-top:26px;text-shadow: 0 0 8px black;}

.student-count a{color:#FFFFFF;font-size:20px;margin:7px 0 13px;text-align:center;line-height: 38px; max-height:69px; overflow-y:hidden; display:block}

.student-count ul{list-style: none;margin: 16px auto 10px;padding: 0; max-width: 230px; font-size:80%;}

.student-count ul:after {    content: "";    display: table;clear:both;}

.student-count ul li.loged-in{float:left;}
.student-count ul li.completed{float:right;}
/*.student-count .topics {font-size:80%;}*/


/* Search page */
.search-head { padding: 10px; }
.search-head h2 { font-size: 36px; font-weight: 300; margin: 0 5px 0 0; }
.search-head h2 + p { margin: 5px 5px 0 0 }
.search-result { margin-top: 15px; }
.search-result li { margin-bottom: 15px; list-style:none; }
.search-result img { display: block; float: left; margin-right: 10px; }
.search-result .box { overflow: hidden; }
.search-result .box a { color: #202020; }
.search-result .box p { margin: 5px 0; }
.search-result .box p.s-title { margin: 8px 0; color: #0086dc; font-size: 22px; display: inline-block }
.search-result .box strong { color: #0086dc; font-weight: normal }
.search-result .box a:hover { color: #0ab7ff; }
.pagination { text-align: center; margin: 20px auto 40px auto }
.pagination ul { display: inline-block }
.pagination li { display: block; float: left; border: 1px solid #dddddd; overflow: hidden; list-style:none; }
.pagination li:not(:last-child) { border-right: none }
.pagination a { display: inline-block; padding: 10px 15px; color: #0ab7ff; font-size: 20px; transition: 0.25s; }
.pagination a:hover, .pagination a.active { color: #2a2b2c; transform: scale(1.2); background-color: #eeeeee; }
.pagination li:first-child a:before { content: ""; width: 12px; height: 12px; display: inline-block; border: 2px solid; transform: rotate(45deg); border-top: none; border-right: none; }
.pagination li:last-child a:before { content: ""; width: 12px; height: 12px; display: inline-block; border: 2px solid; transform: rotate(45deg); border-left: none; border-bottom: none; }

/* tutorials detail */
.turorials-detail-wrapper .responsive-btn { display: none }
.turorials-detail-wrapper { overflow: hidden; margin: 20px auto 0 auto; padding-bottom: 30px; min-height: calc(100% - 276px); -webkit-min-height: calc(100% - 276px);}
.tutorials-nav { width: 370px; margin-left: 15px; float: left; background:#ffffff;}
.tutorials-nav h2 { padding: 12px 20px; font-family: 'Bebas Neue'; font-size: 32px; color: #fff; letter-spacing: 0.04em; background-color: #f4b459; background-image: url(/App_Themes/Learn/images/nav-bg.png); background-position: right 10px center; background-repeat: no-repeat; margin-top: 0; margin-bottom: 25px; }
.tutorials-nav h2.active {background-color: #0086dc;}
.tutorials-nav  a { color: #302f2f; display: inline-block; padding-bottom: 30px; padding-left: 25px; font-size: 18px; font-weight: 300; position: relative }
.tutorials-nav  .responsive-wrapper ul.tutorial-list a {border-left: 4px solid #babec2;}
.tutorials-nav  a:visited{ color:#0086dc;}

.tutorials-nav  > a {display: block; padding: 10px 15px; background:#eaeaea; margin-bottom:15px;}
.tutorials-nav  > a:hover{color:#fff!important; background:#7d7d7d;}
.tutorials-nav .responsive-wrapper li:last-child a { border: none; }
.tutorials-nav .responsive-wrapper li:last-child { padding-left: 4px; }
.tutorials-nav .responsive-wrapper a:before{ content: ""; width: 28px; height: 28px; position: absolute; background:url(/App_Themes/Learn/images/sprite_learn_20161026.png) no-repeat 8px 7px; background-color: #babec2; border-radius: 50%; left: -16px; }
.tutorials-nav .responsive-wrapper a:visited:before { content: ""; width: 28px; height: 28px; position: absolute; background:#0086dc url(/App_Themes/Learn/images/sprite_learn_20161026.png) no-repeat 8px 7px;  border-radius: 50%; left: -16px; }
.tutorials-nav .responsive-wrapper a.video:before { background-position: 11px -1390px;}
.tutorials-nav .responsive-wrapper a.bookmark:before { background-position: 7px -1421px}
.tutorials-nav .responsive-wrapper a:hover:before, .tutorials-nav .responsive-wrapper a.active:before { background-color: #0ab7ff }
.tutorials-nav  a:hover, .tutorials-nav a.active { color: #0ab7ff; border-color: #0ab7ff; }

.tutorials-nav ul { padding-left: 25px; padding-right:15px;}
.tutorials-nav ul li{ list-style:none;}
.turorials-detail { overflow: hidden; padding-left: 50px; padding-right: 20px; }
.bookmark-icon{background:url(/App_Themes/Learn/images/sprite_learn_20161026.png) no-repeat 0 -1456px; height:25px; width:25px; display:inline-block; float:right; position:relative; top:14px; border-radius:50%; transition: 0.1s;}
.bookmark-icon:hover,.bookmark-icon.active{box-shadow:0 0 4px 2px #fff, 0 0 4px 4px rgba(208,119,16,.4)}

a.full-btn {display: block; width: 100%; text-align: center; color: #fff; background-color: #ffbb00; font-size: 25px; font-weight: 300; padding: 10px; margin-top: 20px; }
a.full-btn span{color:#e0e0e0; margin-right:5px;}
a.full-btn:hover { background: #0086dc; }

/* book detail */
.book-detail.wrapper { padding: 0 10px; margin-bottom: 10px; max-width: 1240px; width: 100%; margin: 0 auto; }
.book-detail img { float: left; margin-right: 20px; }
.book-discription { overflow: hidden }
.book-discription li { display: block; float: left; width: 200px; margin-bottom: 20px; line-height: 50px; margin-right: 10px; list-style:none; }
.book-discription li strong { margin-left: 10px; }

/* star rating  */
.book-discription li.rating + li { clear: left }
.book-discription li.rating { width: auto; position: relative; }
.rating-bar { position: relative; width: 150px; display: inline-block; height: 25px; vertical-align: middle; margin: 0 10px; }
.star, .star-filled { position: absolute; height: 25px; top: 0; left: 0; background: url(/App_Themes/Learn/images/star.png) }
.star { width: 150px; background-position: left top; }
.star-filled { background-position: left bottom; z-index: 10; width: 20%; }
.rating-btn { display: inline-block; height: 44px; padding-left: 60px; padding-right: 16px; background-color: #0ab7ff; color: #fff; font-weight: 300; font-size: 26px; background-image: url(/App_Themes/Learn/images/sprite_learn_20161026.png); background-position: 17px -59px; background-repeat: no-repeat; vertical-align: middle; line-height: 40px; }
.rating-btn:hover { background-color: #0086dc; }

/*----------*/
.about-book { clear: both; padding-top: 25px; }
.book-suggest { font-size: 18px; width: 100%; display: flex; flex; justify-content: space-between; flex-wrap: wrap; }
.book-suggest li { width: 33.33%; max-width: 330px; padding: 10px; text-align: center }
.book-suggest img { width: auto; max-width: 100%; margin-bottom: 10px; display: inline-block; float: none }
.book-suggest p { font-weight: 300 }
.book-suggest a { color: #0ab7ff; display: block; clear: both; }
.book-suggest a:hover { color: #0086dc; }
a.download { color: #fff; background: #48b960; padding: 8px 60px 8px 15px; font-size: 18px; display: inline-block; position: relative }
a.download:hover { color: #000; }
a.download:after { content: ""; display: inline-block; height: 100%; width: 46px; background-color: #ffbb00; position: absolute; top: 0; right: 0; background-image: url(/App_Themes/Learn/images/sprite_learn_20161026.png); background-position: 8px -18px; }

/* Search*/
h2.search-title { font-size: 35px; font-weight: 300; width: 100%; padding: 0 10px 0 20px; margin-bottom: -20px; margin-top: 0; }
h2.search-title span { font-size: 20px; }

/*---------------*/

/* Search all*/

.search-all span { color: #484848 }




/* login bar */
.logo_responsive { display: none }
.page * { margin: 0px; padding: 0px; box-sizing:content-box}
.page ul, .page li { list-style: none; margin: 0; padding: 0;}
.loginControl .userdetailCntr label { display: inline-block; margin-top: 3px; }
.loginHeader { background-color: #ffbb00; width: 100%; }
.loginControl { float: right; height: 37px; padding: 0 0 0 20px; text-align: left; width: auto; position: relative; top: 2px; right: 0px; }
.loginControl .image { float: left; margin-right: 5px; margin-top: -2px; }
.loginControl .image img { height: 39px; width: 39px; display: block; background-color: #c3c3c3; border-radius: 100%; }


.loginControl .icons { display: block; float: right; height: 39px; margin: 6px 10px 0 0; text-decoration: none; width: 39px; background: url(/App_Themes/Learn/images/sprite_learn_20161026.png); }
.loginControl .icons.login { background-position: 0 -468px; margin: 6px 0 0; }
.loginControl .icons.signUp { background-position: 0 -419px; }
.loginControl .icons.editor { background-position: 0 -516px; }
.loginControl .icons.admin { background-position: 0 -368px; }
.loginControl .icons.message { background-position: 0px -169px; }
.loginControl .icons.notification { background-position: 0 -271px; }
.loginControl .icons.editorialNotification { background-position: 0 -320px; }
.loginControl .icons.comments { background-position: 0px -218px; }
.loginControl .icons.askaquestion{display:none}




.loginControl .notificationMessageCntr { float: left; position: relative; cursor: pointer; }
.loginControl .notificationMessageCntr .messageCount { color: #fff; background: #008000; display: none; position: absolute; left: 19px; top: 0px; padding: 1px 4px; font-size: 10px; font-weight: bold; }

/*.loginControl .notificationMessageCntr .arrow { background:#fff; width: 12px; height: 7px;position: absolute; top: 35px; left: 6px; display: none; }*/

.loginControl .userdetailCntr label { display: inline-block; margin-top: 7px; }
.userdetailCntr { float: right; color: #fff; font-size: 14px; padding: 8px 10px 12px 8px; display: block; }
.userdetailCntr:hover, .userdetailCntr.hover { background: #fff; color: #6f6e6f; }
.loginPopup { font-size: 14px;
    padding: 10px 10px 0px 10px;
    border: 1px solid #ffbb00;
    position: absolute;
    right: 0px;
    top: 53px;
        width: 282px;
    background: #fff;
    z-index: 999999;}
.loginPopup.loggedIn { display: block; width: 200px; padding: 0px; position: absolute; right: 0; top: 59px; background: #686766; z-index: 9999; right: 0; border: 1px solid #E1E1E1; border-top: none; }
.loginPopup.loggedIn ul { list-style: none; width: 200px; text-align: left; background: #fff; margin: 0px; padding: 0px; overflow: hidden; }
.loginPopup.loggedIn li { display: block; padding: 0px; list-style:none; }


.loginPopup.loggedIn li a { width: 163px !important; display: block; color: #545454; padding: 14px 10px 14px 50px;border-bottom: 1px solid #E1E1E1; background:url(/App_Themes/Learn/images/sprite_learn_20161026.png) no-repeat; }




.loginPopup.loggedIn li a:hover { color: #0086dc; }

.loginPopup.loggedIn li a.myac { background-position: 4px -570px; }
.loginPopup.loggedIn li a.myac:hover { background-position: 4px -912px; }

.loginPopup.loggedIn li a.myQuestion { background-position: 4px -231px; }
.loginPopup.loggedIn li a.myQuestion:hover { background-position: -4px -332px; }

.loginPopup.loggedIn li a.signout { background-position: 4px -859px; border-bottom: none; cursor: pointer; }
.loginPopup.loggedIn li a.signout:hover { background-position: 4px -1201px; border-bottom: none; }

.loginPopup.loggedIn li a.profileview { background-position: 4px -625px; }
.loginPopup.loggedIn li a.profileview:hover { background-position: 4px -967px; }

.loginPopup.loggedIn li a.setting { background-position: 4px -798px; }
.loginPopup.loggedIn li a.setting:hover { background-position: 4px -1140px; }

.loginPopup.loggedIn li a.editprofile { background-position: 4px -680px; }
.loginPopup.loggedIn li a.editprofile:hover { background-position: 4px -1022px; }

.loginPopup.loggedIn li a.changepassword { background-position: 4px -736px; }
.loginPopup.loggedIn li a.changepassword:hover { background-position: 4px -1078px; }





 

.loginPopup.loggedIn li:hover { background: #ebebeb; }
.loginPopup .row input[type="checkbox"] { margin-right: 3px; }
.loginPopup.loggedIn .proImg { margin: 2px 5px 0px -21px; float: left; }
.lableText { float: left;}

.loginControl .notificationMessageCntr .arrow, .loginPopup .arrow {width: 12px;
    height: 7px;
    background: url(/interviews/images/loginArrowWhite.png) left top no-repeat;
    position: absolute;
    right: 11px;
    top: -6px;}

.loginControl .notificationMessageCntr .arrow{top:32px; right:22px; display:none;}

.loginPopup .row {width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    white-space: nowrap;}
.loginPopup .row2 {    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    border-top: 1px solid #ccc;
    white-space: nowrap;}
.loginPopup .lableText, .loginPopup .lableText2 {
    width: 82px;
    text-align: right;
    color: #666;
    padding: 2px 10px 0 0;
    display: inline-block;
    vertical-align: top;
}

.loginPopup a.google {     width: 24px;
    height: 24px;
    display: inline-block;
    background: url(/images/csharp/homeSprite_20160921.png) 0 -1266px no-repeat;}
.loginPopup a.facebook {width: 24px;
    height: 24px;
    display: inline-block;
    background: url(/images/csharp/homeSprite_20160921.png) 0 -1292px no-repeat;}
.loginPopup a.twitter { width: 24px;
    height: 24px;
    display: inline-block;
    background: url(/images/csharp/homeSprite_20160921.png) no-repeat 0 -3145px;}
.loginPopup a.linkedIn {     width: 24px;
    height: 24px;
    display: inline-block;
    background: url(/images/csharp/homeSprite_20160921.png) no-repeat 0 -3430px;}
.loginPopup .inputBox {       color: #666;
    font-size: 12px;
padding: 0 4px;
    width: 180px;
    border: 1px solid #cccccc;}
.loginPopup .inputBox {
    text-align:left;
}

.loginPopup input[type="submit"], .button {     color: #fff;
    font-size: 12px;
    padding: 6px 10px 5px 10px;
    background: #ffbb00;
    border: none;
    cursor: pointer;}
.loginPopup input[type="button"]:hover, .button:hover, .loginPopup input[type="submit"]:hover { background: #0086DC; }
.whiteLink { color: Gray; font-family: 'Roboto', sans-serif; font-size: 12px; text-decoration: none; }

/* ### Header message ### */
.msg_container { border: 1px solid #d6d6d6; max-width: 420px; min-width:320px;width:100%; position: absolute; background: #fff; top: 54px; right: 0px; border-top: none; display: none; overflow: hidden; padding: 10px 0 35px 0; }
.msg_container ul { padding: 0 10px 10px 10px; margin: 0px; list-style: none; max-height: 388px; overflow: auto; }
.msg_container ul li { margin-bottom: 15px; width: 100%; padding: 6px 0px 6px 0px; overflow: hidden; word-break: break-word; font-family: 'Open Sans', sans-serif; color: #7d7d7d; font-weight: 400; font-size: 17px; list-style:none; }
.msg_container ul#dvComments li {font-size:14px;}
.msg_container ul li:last-child { margin-bottom: 0; }
.msg_container a { color: #131313; }
.msg_container a:hover { color: #ffbb00!important; }
.msg_container .NoticationLoading { text-align: center; }
.msg_container p { padding: 0; margin: 0; }
.msg_container ul li .pic { width: 45px; height: 45px; }
.right_content { overflow: hidden; padding-right: 10px; }
.pic { float: left; margin: 0 15px 0 0; }
.pic img { width: 45px; height: 45px; border-radius: 100%; }
.notificationDate { font-size: 11px; display: block; margin-top: 4px; }
.notificationDate .watchICon { margin: 1px 3px 3px 0px; }
.watchICon { background: url(/images/csharp/homeSprite_20160921.png) -1px -2379px no-repeat; display: inline-block; width: 13px; height: 16px; vertical-align: middle; margin-right: 3px; }
.msg_container .gotoAllView { display: block; width: 100%; padding: 8px 0; text-align: center; color: #fff !important; font-size: 14px; background: #0086dc; position: absolute; left: 0; bottom: 0;top: initial!important; }
.msg_container .gotoAllView:hover, .msg_container.general_notifications .gotoAllView:hover { color: #fff !important; background: #ffbb00; }
.msg_container .notificationDate { font-size: 16px; display: block; margin-top: 4px; color: #7d7d7d; font-weight: 300; }
.msg_container.admin_msg_container{ overflow:auto; padding:10px; max-height:373px;}
.msg_container.admin_msg_container ul{ padding:0; max-height:none;}


/*Announcement Popup Start*/
.announcement_modelPopUp { background: #fff; padding: 20px; position: relative; text-align: left; font-size: 14px; width: 540px; }
.announcement_modelPopUp h2 { margin: 0px; padding: 0px 0px 15px 0px; }
.announcement_modelPopUp .image { padding: 5px 20px 0px 0px; float: left; width: 150px; }
.announcement_modelPopUp .image img { width: 150px; height: 150px; }
.announcement_modelPopUp .detail { overflow: hidden; }
.announcement_modelPopUp .detail p { padding: 0px 0px 20px 0px; margin: 0px; line-height: 26px; font-size: 16px; color: #252525; }
.announcement_modelPopUp .detail a.btn { padding: 0px 45px 0px 10px; line-height: 37px; height: 34px; display: block; float: right; font-family: "BebasNeueRegular"; color: #fff; font-size: 20px; background: #0086dc url(/images/csharp/iconSpritImage_20160921.png) 87px -5360px no-repeat; }
.announcement_modelPopUp .closeBtn1 { background: url(/images/CareerAdvice/close_button2.png) left top no-repeat; height: 33px; position: absolute; right: -16px; text-indent: -9999px; top: -20px; width: 33px; }
.announcement_ui-widget-overlay { background: rgba(0, 0, 0, 0.8); left: 0; position: absolute; top: 0; z-index: 9991 !important; }
.announcement_modelPopUp .detail a.btn:hover { background-color: #0074BE; }

/*Announcement Popup End*/
ul.unapproved_stats li{ list-style:none;}
ul.unapproved_stats li a { margin-left: 10px; margin-top: 4px; display: block; float: left; font-size: 17px; color: #131313; }
ul.unapproved_stats li a:hover { color: #01a821; }
ul.unapproved_stats li span.icon { background: url(/images/newSpriteIcons_20161122.png) 0px 0px no-repeat; height: 30px; width: 30px !important; float: left; display: block; }
ul.unapproved_stats li span.icon.article { background-position: 0px -2270px; }
ul.unapproved_stats li span.icon.article_content { background-position: 0px -2316px; }
ul.unapproved_stats li span.icon.news { background-position: 0px -2362px; }
ul.unapproved_stats li span.icon.downloads { background-position: 0px -2407px; }
ul.unapproved_stats li span.icon.resources { background-position: 0px -2453px; }
ul.unapproved_stats li span.icon.reviews { background-position: 0px -2499px; }
ul.unapproved_stats li span.icon.jobs { background-position: 0px -2545px; }
ul.unapproved_stats li span.icon.blogs { background-position: 0px -2589px; }
ul.unapproved_stats li span.icon.codes { background-position: 0px -2635px; }
ul.unapproved_stats li span.icon.company { background-position: 0px -2678px; }
ul.unapproved_stats li span.icon.mvp { background-position: 0px -2721px; }
ul.unapproved_stats li span.icon.stories { background-position: -4px -3630px; }
ul.unapproved_stats li span.icon.event { background-position: 0px -3270px; }

.notificationDate { font-size: 11px; display: block; margin-top: 4px; }
.notificationDate .watchICon { margin: 1px 3px 3px 0px; }
.watchICon { background: url(/images/csharp/homeSprite_20160921.png) -1px -2379px no-repeat; display: inline-block; width: 13px; height: 16px; vertical-align: middle; margin-right: 3px; }




.logo_responsive { display: none !important; }


.login.loader {    display: none;
    position: absolute;
    left: 75px;
    bottom: 62px;}
.logout.loader{display:none;}

.LinkRed, .LinkOrange {color: #ffbb00; font-weight: normal; }
a.LinkRed:hover, a.LinkOrange:hover{ color: #0272b9 !important }
.loginControl #askQuestion{display:none!important;}

/* autofill style*/

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
  transition: background-color 5000s ease-in-out 0s;
}

#LoginSpan .row:nth-of-type(n+4) .lableText:first-of-type{display:none}
.chapter-detail ul,.chapter-detail ol{margin: 16px 0;padding: 0 0 0 40px;}
.chapter-detail img{max-width:100%;}
.dp-highlighter ol{ padding:0!important;}

.modal{ position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.5); padding:10px; text-align:center; z-index:9999}
.modal-dialog{ position:relative;  text-align:left; max-width:480px; width:100%;  background:#999; background:#fff; box-shadow: 2px 2px 4px rgba(0,0,0,0.8); top:50%; transform: translate(-50%, -50%); left:50%;}
.modal:after{ content:""; height:100%; display:inline-block; vertical-align:middle;}
.modal-close-btn{position:absolute; right:0; top:0; height:40px; width:40px; text-align:center; line-height:40px; background:rgba(0,0,0,0.25); color:#fff;  transition:.25s; cursor:pointer;}
.modal-close-btn:hover{ background:rgba(0,0,0,0.5);}
.modal .popUpContainer{ padding:10px; display:block; width:100%;}
.modal .popUpContainer .row{ display:block; }
.modal .popUpContainer .row img{ width:100px; height:100px; float:left; overflow:hidden; margin-right:15px;}
.modal .popUpContainer .row .rightConetntPopup{ overflow:hidden;}
.modal .popUpContainer .row .title{ overflow:hidden; color:#0ab7ff;}
.modal .popUpContainer .row .title:hover{ color:#0086dc;}
.modal h2{ font-weight:normal; color:#fff; background:#0ab7ff; margin:0; padding:7px 20px; font-size:19px; height:40px;}
.modal .bottomBtn{ display:block; text-align:left; margin-top:15px;}
.modal .bottomBtn .commonBtn{ background:#0ab7ff; display:inline-block; height:35px; line-height:35px; vertical-align:top; padding:0 15px; color:#fff; margin:0 5px 5px 0;}
.modal .bottomBtn .commonBtn:hover{ background:#0086dc;}

.tutorials-nav a.go-back{color: #302f2f; margin-bottom:0}
.tutorials-nav a.go-back:visited{color: #302f2f;}
.tutorials-nav a.go-next{color: #302f2f; margin-bottom:0}
.tutorials-nav a.go-next:visited{color: #302f2f;}
.tutorials-nav .next-series {font-weight:400; padding-right:4px;position:relative; top:-2px;}

/* toaster show */
.toasterShow { position: fixed; right: 50px; top: 0; padding: 0; opacity: 0; visibility: hidden; height: 1px; color: #fff; display: block !important; font-size: 16px; width: 100%; text-align: center; z-index: 9999; transition: all 0.5s; }
.toasterShow span { display: block; width: 100%; max-width: 300px; float: right; background: #089804; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; border-radius: 6px; }
.toasterShow.warning span{ background: #D83E3E; }
.toasterShow.showThread { padding: 10px 0; height: auto; visibility: visible; opacity: 1; top: 27px; margin-bottom: 5px; }
/*End toster*/


/* footer style start here */
.page{max-width: 1240px;margin: 0 auto;}
.footer { width: 100%; height: auto; margin-top: 10px; background:#ececec;}
.footer .menuStripGray li.first a, .footer .menuStripBlue ul li.first a, .footer .footerBottom li.first a{ padding-left:0px;}
.menuStripBlue a { display: block; padding: 7px 0; float: left; }
.menuStripBlue { background: #0086dc; float: left; height: 34px; position: relative; width: 100%; z-index: 99; }
.footer .menuStripBlue { z-index:auto;}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu ul li { padding: 0px; display: block; float: left; background: url(/images/csharp/iconSpritImage_20160921.png) 0px -1025px no-repeat; position: relative; }
.menu ul li.first, .menu ul li.first:hover { background: none; }
.menu ul li a { color: #fff; display: block; padding: 8px 10px 0 11px; height: 27px; float: left; text-transform: uppercase; font-weight: normal; font-size: 15px; text-decoration: none; }
.menu ul li a:hover, .menu ul li:hover { color: #f60; }
.menu ul li a.active { background-color: #f60; }

.menuStripGray { width: 100%; height: auto; background-color: #b5b5b5; padding: 5px 0; float: left; }
.menuStripGray ul { float: left; margin: 0; padding: 0; }
.menuStripGray li { padding: 0px; display: block; float: left; background: url(/images/csharp/iconSpritImage_20160921.png) 0px -1084px no-repeat; position: relative; }

.menuStripGray li a { display: block; padding: 4px 10px 4px 15px; font-size: 12px; color: #000;  text-decoration: none; }
.menuStripGray li a:hover { color: #f60; }


.footerBottom { background-color: #000; float: left; padding: 10px 0 10px; width: 100%; }
.footerBottom ul { float: left; margin: 0; padding: 0; }
.footerBottom li { display: block; float: left; background: url(/images/csharp/iconSpritImage_20160921.png) 0px -1056px no-repeat; position: relative; }
.footerBottom li a { color: gray; display: block; padding: 8px 7px 0 10px; font-size: 12px; text-decoration: none; }
.footerBottom li a:hover { color: #f60; }
.menuStripGray li.first,.footerBottom li.first{ background:none;}

.rightlink { float: right; display: block; }
.rightlink a { font-size: 14px; color: #982929; margin-top:3px; display:block; }
.rightlink a span.hosted { color: #000; }
.rightlink a span.hosted:hover { color: #f60; }

.social_link, .social_link ul { float: right; padding-bottom: 6px; }
.social_link li { display: block; float: left; background: none; }
.social_link li a { padding: 0; margin-right: 7px; float: left; text-indent: -9999px; display: block; width: 30px; height: 30px; background: url(/images/csharp/iconSpritImage_20160921.png) 0px -1912px no-repeat; }
.social_link li a.twitter { background-position: 0px -1980px; }
.social_link li a.google { background-position: 0px -1947px; }
.social_link li a.media { background-position: 0px -2014px; }
.social_link p.copyright { clear: both; display: block; font-size:15px; }






.my-bookmarks{position:fixed;right:0;top:0;height:100%;background:#f5f5f5;z-index:9999;overflow:hidden;display:none;box-shadow:-1px 0 8px rgba(0,0,0,.3);padding:0 20px;}
.bookmark-list-container{height:100%;overflow-y:auto;margin-right:-20px;            /*direction: rtl;*/}
.bookmark-list-container::-webkit-scrollbar{width:8px;}
.bookmark-list-container::-webkit-scrollbar-button{width:8px;height:5px;}
.bookmark-list-container::-webkit-scrollbar-track{background:border:thin solid #000000;box-shadow:0px 0px 3px #000 inset;border-radius:10px;}
.bookmark-list-container::-webkit-scrollbar-thumb{                /*background: border: thin solid #f00;*/
background:border:thin solid #ffffff;border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,134,220,0.8);}
.bookmark-list-container::-webkit-scrollbar-thumb:hover{background:#000000;}
.bookmarks-head{font-size:24px;padding:0 4px 10px 0;}
.bookmark-list{list-style:none;margin-top:10px;            /*direction: ltr;*/}
.bookmarked-chapter{padding:8px 0px;}
.bookmark-chapter-link{display:block;color:#000;}
.bookmark-close{font-size:22px;font-weight:bold;margin-left:-10px; margin-bottom:10px;}
.bookmark-close a{color:#ffbb00;padding:10px}
.bookmark-close:hover a{color:#ffbb00;}
.bookmark-right-button{background:#ffbb00;color:#ffffff;right:0;display:inline-block;float:right;position:relative;top:10px;margin-left:10px;z-index:10;display:none;}
.bookmark-right-button:hover{background:#ffbb00;}
.bookmark-right-button a{color:#ffffff;display:inline-block;font-weight:bold;font-size:22px;position:relative;top:-2px;left:0!important;padding:4px 10px;}

/*RPV*/
.rpv-container{width: 300px;z-index: 2;border-radius: 4px;border: 1px solid #EAEAEA;background-color: #fff;text-align: left;position: relative;max-width: 95%;float:right;}
.rpv-head{color: #757575;border-bottom: 1px solid #EAEAEA;font-size: 14px;}
.rpv-head span{padding:10px;display:block;}
.rpv-container .media{padding:10px;zoom: 1;overflow: hidden;}
.rpv-container .media-left, .media-right, .media-body {display: table-cell;vertical-align: top;}
.rpv-container .media-left{padding-right: 10px;}
.rpv-container .media-left img.author-image {height: 48px;width: 48px;border-radius: 50%;min-width: 48px;}
.rpv-container .media-body{width: 10000px;}
.rpv-container .media-body .author{font-size: 14px;color: #616161;}
.rpv-wrapper{color: #757575;font-size: 12px;font-weight: 700;}
.d-icon {position: relative;display: inline-block;line-height: 1;transition: background-color .2s;;background-image: url(/App_Themes/NewDesign/Images/d-icon-sprite.png);background-repeat: no-repeat;}
.icon-author-r, .icon-author-9, .icon-author-v {position: relative;}
.icon-author-r:after, .icon-author-p:after, .icon-author-v:after {content: "";background: url(/App_Themes/NewDesign/Images/d-icon-sprite.png);display: inline-block;width: 10px;height: 10px;}
.icon-author-r:after {background-position: -107px -130px;}
.icon-author-p:after {background-position: -107px -139px;}
.icon-author-v:after {background-position: -107px -148px;}
@media screen and (min-width:1400px) {
    .navbar li:empty { display: none; }
    .allNav li:empty { display: inline-block; }
}
@media screen and (max-width:1023px) {
    .footer1 .category li{ width:33.33%;}
    .loginControl .icons.editor, .loginControl .icons.admin{display:none;}

}
@media screen and (max-width:960px) {
    .main-wrapper .box { width: 50% }
    .book-discription li { margin-bottom: 3px; }
    a.full-btn { font-size: 24px }
    .header .search input { max-width: 125px; }
    .display_none_mobile { display: none !important; }
    .loginControl .userdetailCntr label { display: none }
    .userdetailCntr { padding-right: 0 }

    .responsive-wrapper {position: relative}
    .turorials-detail-wrapper a.responsive-btn { display: block; font-size: 30px; padding: 10px; padding-left: 73px; background-color: #0ab7ff; color: #fff; margin-bottom: 15px; background-image: url(/App_Themes/Learn/images/sprite_learn_20161026.png); background-position: 10px -103px; background-repeat: no-repeat; }
    .r-menu-wrapper { position: relative }
    .tutorials-nav { border: none; float: none; width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;    padding-left: 15px;padding-right: 15px;background: transparent;}
    .tutorials-nav  ul { padding: 0 !important; position: absolute; left: -999px; transition: 0.20s; top: 62px; width:100%}
    .tutorials-nav.responsive  ul { display: block; min-width: 300px; background-color: #fff; left: 0; z-index:999;}
    .tutorials-nav ul li:not(:last-of-type) { display: block; width: 100%; margin-bottom: 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.05) }
    .tutorials-nav a { border: none; font-size: 16px; padding: 15px; width: 100%; }
    .tutorials-nav a:hover, .tutorials-nav a.active { background-color: #0aa0de !important; color: #fff; }
    .tutorials-nav a:before { display: none }
    .turorials-detail { clear: both; padding-left: 20px; }
    .tutorials-main li { width: 47%; margin-bottom:10px; font-size: 18px; text-align: center }
    .tutorials-nav .responsive-wrapper ul.tutorial-list li:last-child a{margin-left:-4px;border-left: 4px solid #babec2;}
    /* turorial page */
    .tutorials-main img { display: block; margin: 0 auto; margin-bottom: 10px; }
    .tutorials-nav h2{font-size:26px; margin-bottom:10px}
    

}
@media screen and (max-width:767px) {

    .main-wrapper .box { width: 100% }
    .search-all .box { width: 50%; }
    .login-bar { position: absolute; top: 12px; right: 12px; }
    .header .search input { max-width: 200px; }
    /*.top-menu { clear: both }*/
    .header {
        background-image: linear-gradient(67deg, #363535 260px, #363535 211px);
    }
    .header .rightbar { padding-top: 10px; }
    .header2 .h1{text-align:left}

    /* turorial page */
    
/* ---------------*/ }
@media screen and (max-width:639px) {
    .footer .category li { width: 50%; }
    .filter-bar { font-size: 14px; }
    .tutorials-main .box { width: 100% }
    .search-head h2 { font-size: 26px; font-weight: 300; margin: 0 5px 0 0; }
    .book-detail .responsive-wrap { text-align: center }
    .book-discription li { width: 100%; }
    .book-discription li.rating { width: 100%; }
    .book-detail img { float: none; margin: 0 auto }
    .search-all .box { width: 100%; }
}
@media screen and (max-width:550px) {
    .header .rightbar { display: flex; justify-content: space-around; width: 100%; }
    .header { background-image: linear-gradient(67deg, #212121 100%, #212121 211px); }
    .sort-dorpdown { font-size: 14px; float: left; }
    .radio-wrapper { margin-bottom: 10px; }
    .search-title { clear: both; margin-top: 10px; }
    .header .search { width: 100% }
    .header .rightbar a { top: 4px; }
    .book-suggest { display: block }
    .book-suggest li { display: block; text-align: left; max-width: 100%; width: 100%; overflow: hidden }
    .book-suggest img { float: left; margin-right: 10px; }
    .book-suggest a { clear: none; }
    .tutorials-main li { font-size: 14px }
}
@media screen and (max-width:480px) {
    .header { padding: 5px; }
    .login-bar { right: 4px }
    .loginControl .image { margin-right: 0; }
    .footer .category li, .footer2 .copyright, .footer2 .policy { width: 100%; text-align: center; }
    .filter-bar .sort-dorpdown { float: left; clear: both; margin-top: 10px; }
    .book-discription li { width: 100%; }
    a.download { font-size: 16px; padding: 8px 50px 8px 8px; }
    a.download:after { background-position: 8px -19px; }
    .turorials-detail { padding-left: 20px; }

    /* ---------------*/
    .tutorials-main li { width: 100%; }
    .tutorials-main li a { overflow: hidden; font-size:16px;     line-height: 1.8;max-height: 62px;     width: 90%;margin: 0 auto;}
    .student-count .topics {font-size: 100%; }
    .student-count {  padding-top: 12px;}
    .student-count ul{margin:13px auto 0}
    .tutorials-main > li:hover .student-count{padding-top: 12px;}

    /* turorial page */

    /* ---------------*/
    .filter-bar { font-size: 13px; }
   .drop-down-wrapper:after{content:""; display:table; clear:both}
   .nav-bar-wrapper{margin:0px 15px 10px 15px; padding:0;}
   .header2 .h1{text-align:center;}
   
   #category-btn, .navbar{width:100%;}
    .header2 .dropdown-wrap {width:100%;}
   .navbar{top:43px; left:0; right:0;}
    }
@media screen and (max-width:380px) {
    .logo .logo-text { font-size: 20px; }
}

@media screen and (max-width:320px) { 
    .loginControl .icons{margin:6px 6px 0 0;}
}

@font-face {
    font-family: 'certification';
    src:url('/fonts/certification.eot?pq156s');
    src:url('/fonts/certification.eot?pq156s#iefix') format('embedded-opentype'),
        url('/fonts/certification.ttf?pq156s') format('truetype'),
        url('/fonts/certification.woff?pq156s') format('woff'),
        url('/fonts/certification.svg?pq156s#certification') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'certification' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-google:before {
    content: "\e900";
}
.icon-clock:before {
    content: "\e901";
}
.icon-download:before {
    content: "\e902";
}
.icon-logout:before {
    content: "\e903";
}
.icon-sign_up:before {
    content: "\e904";
}
.icon-key:before {
    content: "\e905";
}
.icon-facebook:before {
    content: "\e906";
}
.icon-twitter:before {
    content: "\e907";
}
.icon-play:before {
    content: "\e908";
}
.icon-previous:before {
    content: "\e909";
}
.icon-next:before {
    content: "\e90a";
}
.icon-skip:before {
    content: "\e90b";
}
.icon-submit:before {
    content: "\e90c";
}
.icon-home:before {
    content: "\e90d";
}
.icon-print:before {
    content: "\e90e";
}
.icon-add-exam:before {
    content: "\e90f";
}
.icon-add-question:before {
    content: "\e910";
}
.icon-email:before {
    content: "\e911";
}
.icon-login:before {
    content: "\e912";
}
.icon-login-button:before {
    content: "\e913";
}
.icon-password:before {
    content: "\e914";
}
.icon-registration:before {
    content: "\e915";
}
.icon-registration-button:before {
    content: "\e916";
}
.icon-reset:before {
    content: "\e917";
}
.icon-arrow_down:before {
    content: "\e918";
}
.icon-edit:before {
    content: "\e919";
}
.icon-delete:before {
    content: "\e91a";
}