html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ }

.create-course-info, .imgcontainer-create, .learncreate-header, .showwhenincreate { display: none; }

footer { font-size: 12px; padding-bottom: 30px; padding-top: 30px; }

.hideinlearn { display: none; }

.completionmark, .coursecompletionmark { display: none; }

.content img { max-width: 100%; max-height: 450px; display: block; padding: 10px; }
.content table img { min-width: 100px; }
.content table h4 { font-weight: bold; margin-bottom: 10px; }
.content video { max-width: 100%; display: block; margin: 0 auto; padding: 20px; }

h4 { font-weight: normal; }

h2 { font-size: 29px; }

h3 { font-size: 21px; }

iframe { display: block; width: 720px; height: 405px; margin: 0 auto; padding: 20px 0; border: none; }

.continue-tutorial, .createhr { display: none; }

.header-link { color: #4A90E2; position: absolute; left: -20px; top: 50%; margin-top: -8px; opacity: 0; font-size: 16px; -webkit-transition: opacity 0.2s ease-in-out 0.1s; -moz-transition: opacity 0.2s ease-in-out 0.1s; -ms-transition: opacity 0.2s ease-in-out 0.1s; }

h2:hover .header-link, h3:hover .header-link, h4:hover .header-link, h5:hover .header-link, h6:hover .header-link { opacity: 1; }

.indent-1a.list-group-item, .indent-1button.list-group-item, .indent-1.list-group-item { padding: 3px 10px; padding-left: 35px; font-weight: 300 !important; font-size: 14px; }

.indent-2a.list-group-item, .indent-2button.list-group-item, .indent-2.list-group-item { padding: 3px 10px; padding-left: 70px; font-weight: 300 !important; font-size: 14px; }

.indent-3a.list-group-item, .indent-3button.list-group-item, .indent-3.list-group-item { padding: 3px 10px; padding-left: 105px; font-weight: 300 !important; font-size: 14px; }

.indent-4a.list-group-item, .indent-4button.list-group-item, .indent-4.list-group-item { padding: 3px 10px; padding-left: 140px; font-weight: 300 !important; font-size: 14px; }

.indent-5a.list-group-item, .indent-5button.list-group-item, .indent-5.list-group-item { padding: 3px 10px; padding-left: 175px; font-weight: 300 !important; font-size: 14px; }

.homeh1 { color: #4A90E2; text-align: center; }
.homeh1 :hover { color: #4A90E2; }

.continue-button { font-size: 24px; }

.searchcontainer { margin-top: 30px; width: 100%; }
.searchcontainer .continue-button-parent { float: none; margin: 20px auto 0 auto; }
.searchcontainer .glyphicon { margin-right: 0; }
.searchcontainer .btn { font-size: 16px; }
.searchcontainer input[type='text'], .searchcontainer select, .searchcontainer .checkboxholder { width: 100%; color: #6D6D6D; border: none; border-radius: 3px; height: 35px; padding: 6px 12px !important; }
.searchcontainer select { padding: 1px 0; margin-bottom: 5px; margin-top: -10px; background-color: #ffffff; font-weight: normal; font-size: 16px; max-width: 200px; border: 1px solid #cccccc; }
.searchcontainer select option[selected], .searchcontainer label, .searchcontainer .checkboxholder { color: #4A90E2; }
.searchcontainer .checkboxholder { color: white; background-color: #4A90E2; font-size: 12px; line-height: 22px; display: inline-block; transition: all 0.3s ease 0s; height: 35px; text-align: center; padding-top: 6px; cursor: pointer; }
.searchcontainer .checkboxholder .checkbox { height: 16px; width: 16px; display: inline-block; float: right; padding: 0 0 0 0px; }
.searchcontainer .checkboxholder:hover { background-color: #0a8fd8; }

.filtermenu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; float: right; }

.filtermenu li { float: left; }

.filtermenu li a { display: block; color: #666666; text-decoration: none; margin-right: 20px; padding: 0 4px; }

.filtermenu li a:hover { color: #EC7211; }

.filtermenu li a.active { color: #EC7211; text-decoration: none; border-bottom: 2px solid #EC7211; }

.col-md-4, .col-md-6, .col-sm-6, .col-xs-12 { min-height: 0; }

.titlepart { font-weight: normal; }

.button { background-color: #4A90E2; padding: 15px 30px; color: white; text-align: center; display: table; transition: all 0.3s ease 0s; margin: 10px 0 10px 0; font-size: 12px; border-radius: 3px; }

li { font-weight: normal; }

.fixedoverviewblock { background-color: #ffffff !important; padding: 0 20px; margin: 0 4px 35px 4px; height: 450px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); text-align: left; display: none; }
.fixedoverviewblock .center { text-align: center; }
.fixedoverviewblock .footer { position: absolute; width: 100%; bottom: 45px; margin: 0 -40px; }
.fixedoverviewblock .ribboncontainer { position: absolute; overflow: hidden; width: 100px; height: 80px; }
.fixedoverviewblock .ribboncontainer .ribbon { position: absolute; padding: 5px 25px; font-size: 10px; color: #E5E5E5; letter-spacing: 0; font-weight: 700; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.fixedoverviewblock .topright-ribboncontainer { top: -1px; right: 18px; }
.fixedoverviewblock .topright-ribboncontainer .topright-ribbon { -webkit-transform: rotate(40deg) translate(-50%, -50%); transform: rotate(40deg) translate(-50%, -50%); top: 72%; left: 47%; }
.fixedoverviewblock .topright-ribboncontainer .completionmark { background: #54ad58; }
.fixedoverviewblock .topleft-ribboncontainer { top: -1px; left: 18px; }
.fixedoverviewblock .topleft-ribboncontainer .topleft-ribbon { -webkit-transform: rotate(-40deg) translate(-50%, -50%); transform: rotate(-40deg) translate(-50%, -50%); top: -15%; left: 15%; }
.fixedoverviewblock .topleft-ribboncontainer .newmark { background: #ad060d; }
.fixedoverviewblock .titlecontainer { height: 80px; width: auto; display: block; }
.fixedoverviewblock .shortdescription { height: auto; }
@media (max-width: 767px) { .fixedoverviewblock .shortdescription { height: auto; } }

p { margin-bottom: 15px; }

h2, .difficulty { margin: 20px 0; }

h2 { font-size: 20px; font-weight: normal; }

.difficulty, .button { font-size: 15px; }

hr { border-top-color: #9F9F9F; margin: 15px 0; }
@media (max-width: 767px) { hr { display: none; } }

.imgcontainer { margin: 0 -20px 20px -20px; }
.imgcontainer img { width: 100%; height: 200px; }

.searchimgcontainer { margin-bottom: 16px; }
.searchimgcontainer img { width: 350px; height: 200px; float: left; margin-top: 16px; margin-right: 16px; }

.progressbarcontainer { width: 60px; height: 59px; display: block; float: right; margin-top: 15px; margin-right: 15px; }
.progressbarcontainer .progressbar-text { font-weight: bold; font-size: 15px; }
.progressbarcontainer .progressbar-text:after { content: "%"; }

.coursepartdetails .progressbarcontainer { width: 100px; height: 100px; display: block; }

.coursebutton, .tutorialbutton { width: 80%; margin-top: 25px; margin-bottom: 0; position: absolute; bottom: 50px; }

.button:hover { background-color: #309DD8; }

.nextbutton { float: right; width: auto; }

.previousbutton { float: left; width: auto; }

.largebutton { font-size: 18px; font-weight: normal; }
.largebutton span { font-weight: lighter; }

.width100 { width: 100%; }

.centerbutton { margin: 0 auto; }

.videotutcontainer { background-color: #363636; margin-bottom: 30px; }
.videotutcontainer .container { background-color: #363636; }
.videotutcontainer .container .videotutorial { height: 500px; }

.noresults { text-align: center; }
.noresults img { display: block; margin: 0 auto; }
.noresults span { font-size: 20px; }

.nosearchresults { text-align: center; }
.nosearchresults img { display: block; margin: 0 auto; }
.nosearchresults span { font-size: 20px; }

.overviewblock { background-color: #ffffff; padding: 20px; margin: 0 4px 35px 4px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); text-align: left; }
.overviewblock .ribboncontainer { position: absolute; overflow: hidden; width: 100px; height: 80px; }
.overviewblock .ribboncontainer .ribbon { position: absolute; padding: 5px 25px; font-size: 10px; color: #E5E5E5; letter-spacing: 0; font-weight: 700; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.overviewblock .topright-ribboncontainer { top: -1px; right: 18px; }
.overviewblock .topright-ribboncontainer .topright-ribbon { -webkit-transform: rotate(40deg) translate(-50%, -50%); transform: rotate(40deg) translate(-50%, -50%); top: 72%; left: 47%; }
.overviewblock .topright-ribboncontainer .completionmark { background: #54ad58; }
.overviewblock .topleft-ribboncontainer { top: -1px; left: 18px; }
.overviewblock .topleft-ribboncontainer .topleft-ribbon { -webkit-transform: rotate(-40deg) translate(-50%, -50%); transform: rotate(-40deg) translate(-50%, -50%); top: -15%; left: 15%; }
.overviewblock .topleft-ribboncontainer .newmark { background: #ad060d; }
.overviewblock .shortdescription { height: auto; }
@media (max-width: 767px) { .overviewblock .shortdescription { height: auto; } }

p { margin-bottom: 15px; }

h2, .difficulty { margin: 20px 0; }

h2 { font-size: 20px; font-weight: normal; }

.difficulty, .button { font-size: 15px; }

hr { border-top-color: #9F9F9F; margin: 15px 0; }
@media (max-width: 767px) { hr { display: none; } }

.imgcontainer { margin: 0 -20px 15px -20px; }
.imgcontainer img { width: 100%; height: 200px; }

.progressbarcontainer { width: 60px; height: 59px; display: block; float: right; margin-top: 15px; margin-right: 15px; }
.progressbarcontainer .progressbar-text { font-weight: bold; font-size: 15px; }
.progressbarcontainer .progressbar-text:after { content: "%"; }

.coursepartdetails .progressbarcontainer { width: 100px; height: 100px; display: block; }

.nextpagepart, .previouspagepart { background-color: #4A90E2; padding: 15px 30px; color: white; text-align: center; display: table; transition: all 0.3s ease 0s; margin: 10px 0 10px 0; font-size: 12px; border-radius: 3px; cursor: pointer; }

.nextpagepart { float: right; }

@media (max-width: 767px) { .tagheader { text-align: left; } }

.tag { display: inline-block; float: left; font-size: 12px; background-color: #609de6; padding: 3px 7px; border-radius: 3px; margin: 0 5px 5px 0; color: white; }

.tag:last-of-type { margin-bottom: 15px; }

.coursepartdetails { margin-bottom: 20px; }
.coursepartdetails .progressbarcontainer { margin-bottom: 25px; }
.coursepartdetails .row:first-of-type { position: relative; }
.coursepartdetails .row:first-of-type .verticalhr { width: 1px; height: 100%; background-color: #CECECE; position: absolute; left: 50%; }
@media (max-width: 767px) { .coursepartdetails .row:first-of-type .verticalhr { display: none; } }
.coursepartdetails .row:first-of-type .horizontalhr { width: 90%; height: 1px; background-color: #CECECE; position: absolute; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .coursepartdetails .row:first-of-type .horizontalhr { display: none; } }
.coursepartdetails .col-md-12 { text-align: left; }
.coursepartdetails .col-md-12 p { margin-bottom: 0; }
.coursepartdetails .col-md-12 .sumerianfont-icon-checked { color: #8bc34a; padding: 4px 4px 0 0; }
.coursepartdetails .col-md-12 .time { font-size: 25px; }

.imagedescription { text-align: center; font-size: 14px; }

.header-search input[type=text] { width: auto; max-width: 0px; border: none; cursor: pointer; font-size: 16px; padding: 12px 20px 12px 40px; background-color: transparent; background-image: url("/img/search.svg"); background-position: 8px; background-repeat: no-repeat; -webkit-transition: width 0.8s ease-in-out; transition: width 0.4s ease-in-out; }
.header-search input[type=text]::placeholder { color: white; opacity: .6; }
@media screen and (min-width: 1200px) { .header-search input[type=text]:focus { max-width: 178px; outline: none; color: white; box-sizing: border-box; border-bottom: 1px solid #ccc; padding: 12px 20px 12px 40px; } }
@media screen and (max-width: 1199px) { .header-search input[type=text]:focus { max-width: 178px; outline: none; color: white; box-sizing: border-box; border-bottom: 1px solid #ccc; padding: 12px 20px 12px 40px; } }

#inpage-search { width: 100%; border: none; font-size: 36px; background: url("/img/search-black.svg"); padding: 4px 48px; background-color: transparent; background-position: 8px; background-repeat: no-repeat; outline: none; box-sizing: border-box; border-bottom: 1px solid #ccc; }
#inpage-search ::placeholder { color: black; opacity: .6; }

#search-results { list-style: none; padding-top: 24px; }

.stepsoverview a, .stepsoverview a:hover { color: #6D6D6D !important; }
.stepsoverview h1, .stepsoverview h2 { margin-top: 0; margin-bottom: 20px; font-weight: normal; }
.stepsoverview h2 span { font-weight: lighter; }
.stepsoverview img { padding: 0 !important; width: 100%; height: auto; }
.stepsoverview .coursepartdetails { text-align: left; height: 100%; }
.stepsoverview .coursepartdetails p { margin-bottom: 5px; }
.stepsoverview .coursepartdetails .sumerianfont-icon-checked { color: #8bc34a; padding: 4px 4px 0 0; }

#featured-tag { text-transform: uppercase; color: #ffffff; font-size: 12px; font-weight: 500; background-color: #ff9900; padding-top: 5px; padding-bottom: 5px; }

.lightbox { background-color: rgba(0, 0, 0, 0.35); overflow: scroll; position: fixed; display: none; z-index: 1; bottom: 0; right: 0; left: 0; top: 0; }
.lightbox h2 { padding: 16px 16px 0 32px; }
.lightbox-container { position: relative; max-width: 960px; margin: 4% auto; display: block; height: auto; z-index: 10; }
@media screen and (max-width: 768px) { .lightbox-container { margin-top: 10%; } }
@media screen and (max-width: 414px) { .lightbox-container { margin-top: 13%; } }
.lightbox-content { background-color: white; width: 100%; margin: 0; padding: 0; border-radius: 4px; }
.lightbox-close { background-image: url("../fonts/single_icons/close.svg"); position: absolute; display: block; border: none; padding: 8px; top: 3%; right: 2%; background-size: 16px; }

.video-button { background-image: url("../fonts/single_icons/video.svg"); display: block; padding: 12px 12px 6px 12px; margin-top: 8px; background-size: 24px; width: 24px; }

.video-container { padding-bottom: 56.25%; position: relative; padding-top: 30px; overflow: hidden; height: 0; }

.video-container iframe, .video-container object, .video-container embed { height: 100%; width: 100%; position: absolute; top: 0; left: 0; padding: 0; }

@media (max-width: 767px) { .smallpadding { padding: 40px; } }

.videoblock { background-color: #ffffff !important; height: 400px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2); text-align: left; }
.videoblock .center { text-align: center; }
.videoblock .shortdescription { height: auto; }
@media (max-width: 767px) { .videoblock .shortdescription { height: auto; } }

@media (min-width: 992px) { .col-lg-4:nth-child(3n+1) { clear: right; } }
.howToCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position: relative; }

.howToCarousel .howToCarousel-inner { transition: 1s ease all; float: left; }

.howToCarousel .howToCarousel-inner .item { float: left; }

.howToCarousel .howToCarousel-inner .item > div { padding: 10px; margin: 10px; }

.howToCarousel .howToCarousel-inner .item > div > div > h2 { padding-top: 5px; }

.howToCarousel .leftLst, .howToCarousel .rightLst { position: absolute; border-radius: 3px; top: 90px; text-align: center; height: 100px; clip: rect(-10px, 45px, 110px, -10px); width: 45px; box-shadow: 0 1px 3px #888; }

.howToCarousel .leftLst { left: 0; }

.howToCarousel .rightLst { right: 0; }

.howToCarousel .leftLst.over, .howToCarousel .rightLst.over { pointer-events: none; background-color: #ccc; opacity: .5; }

/* to make lines scroll instead of wrap */
/* from http://stackoverflow.com/a/23393920 */
.highlight pre code * { white-space: nowrap; }

.highlight pre { overflow-x: auto; }

.highlight pre code { white-space: pre; }

/* github style pygments theme for jekyll */
/* from https://github.com/aahan/pygments-github-style */
.highlight pre { background-color: #272822; color: #f8f8f2; max-height: 400px; }

.highlight .hll { background-color: #272822; }

.highlight .c { color: #75715e; }

/* Comment */
.highlight .err { color: #960050; background-color: #1e0010; }

/* Error */
.highlight .k { color: #66d9ef; }

/* Keyword */
.highlight .l { color: #ae81ff; }

/* Literal */
.highlight .n { color: #f8f8f2; }

/* Name */
.highlight .o { color: #f92672; }

/* Operator */
.highlight .p { color: #f8f8f2; }

/* Punctuation */
.highlight .cm { color: #75715e; }

/* Comment.Multiline */
.highlight .cp { color: #75715e; }

/* Comment.Preproc */
.highlight .c1 { color: #75715e; }

/* Comment.Single */
.highlight .cs { color: #75715e; }

/* Comment.Special */
.highlight .ge { font-style: italic; }

/* Generic.Emph */
.highlight .gs { font-weight: bold; }

/* Generic.Strong */
.highlight .kc { color: #66d9ef; }

/* Keyword.Constant */
.highlight .kd { color: #66d9ef; }

/* Keyword.Declaration */
.highlight .kn { color: #f92672; }

/* Keyword.Namespace */
.highlight .kp { color: #66d9ef; }

/* Keyword.Pseudo */
.highlight .kr { color: #66d9ef; }

/* Keyword.Reserved */
.highlight .kt { color: #66d9ef; }

/* Keyword.Type */
.highlight .ld { color: #e6db74; }

/* Literal.Date */
.highlight .m { color: #ae81ff; }

/* Literal.Number */
.highlight .s { color: #e6db74; }

/* Literal.String */
.highlight .na { color: #a6e22e; }

/* Name.Attribute */
.highlight .nb { color: #f8f8f2; }

/* Name.Builtin */
.highlight .nc { color: #a6e22e; }

/* Name.Class */
.highlight .no { color: #66d9ef; }

/* Name.Constant */
.highlight .nd { color: #a6e22e; }

/* Name.Decorator */
.highlight .ni { color: #f8f8f2; }

/* Name.Entity */
.highlight .ne { color: #a6e22e; }

/* Name.Exception */
.highlight .nf { color: #a6e22e; }

/* Name.Function */
.highlight .nl { color: #f8f8f2; }

/* Name.Label */
.highlight .nn { color: #f8f8f2; }

/* Name.Namespace */
.highlight .nx { color: #a6e22e; }

/* Name.Other */
.highlight .py { color: #f8f8f2; }

/* Name.Property */
.highlight .nt { color: #f92672; }

/* Name.Tag */
.highlight .nv { color: #f8f8f2; }

/* Name.Variable */
.highlight .ow { color: #f92672; }

/* Operator.Word */
.highlight .w { color: #f8f8f2; }

/* Text.Whitespace */
.highlight .mf { color: #ae81ff; }

/* Literal.Number.Float */
.highlight .mh { color: #ae81ff; }

/* Literal.Number.Hex */
.highlight .mi { color: #ae81ff; }

/* Literal.Number.Integer */
.highlight .mo { color: #ae81ff; }

/* Literal.Number.Oct */
.highlight .sb { color: #e6db74; }

/* Literal.String.Backtick */
.highlight .sc { color: #e6db74; }

/* Literal.String.Char */
.highlight .sd { color: #e6db74; }

/* Literal.String.Doc */
.highlight .s2 { color: #e6db74; }

/* Literal.String.Double */
.highlight .se { color: #ae81ff; }

/* Literal.String.Escape */
.highlight .sh { color: #e6db74; }

/* Literal.String.Heredoc */
.highlight .si { color: #e6db74; }

/* Literal.String.Interpol */
.highlight .sx { color: #e6db74; }

/* Literal.String.Other */
.highlight .sr { color: #e6db74; }

/* Literal.String.Regex */
.highlight .s1 { color: #e6db74; }

/* Literal.String.Single */
.highlight .ss { color: #e6db74; }

/* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2; }

/* Name.Builtin.Pseudo */
.highlight .vc { color: #f8f8f2; }

/* Name.Variable.Class */
.highlight .vg { color: #f8f8f2; }

/* Name.Variable.Global */
.highlight .vi { color: #f8f8f2; }

/* Name.Variable.Instance */
.highlight .il { color: #ae81ff; }

/* Literal.Number.Integer.Long */
/* Generic Heading & Diff Header */
.highlight .gu { color: #75715e; }

/* Generic.Subheading & Diff Unified/Comment? */
.highlight .gd { color: #f92672; }

/* Generic.Deleted & Diff Deleted */
.highlight .gi { color: #a6e22e; }

/* Generic.Inserted & Diff Inserted */
/* Off Canvas -------------------------------------------------- */
@media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; }
  .row-offcanvas-right { right: 0; }
  .row-offcanvas-left { left: 0; }
  .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
  .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
  .row-offcanvas-right.active { right: 50%; /* 6 columns */ }
  .row-offcanvas-left.active { left: 50%; /* 6 columns */ }
  .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
.tutorial-list { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; margin: -10px; padding: 0; }
.tutorial-list li { display: block; width: 30%; padding: 0; margin: 10px; list-style: none; max-width: 450px; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 1; -moz-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; }
.tutorial-list a { display: block; position: relative; padding-top: 56%; background-size: cover; background-repeat: no-repeat; background-position: 50%; border-radius: 3px; transition: all 0.1s ease-out; box-shadow: 0 3px 8px rgba(33, 35, 38, 0.2); cursor: pointer; }
.tutorial-list a:hover { box-shadow: 0 8px 20px rgba(33, 35, 38, 0.4); /*content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: transparentize(white, 0.8);*/ }
.tutorial-list h4 { position: absolute; display: block; background: rgba(33, 35, 38, 0.8); width: 100%; margin: 0; padding: 15px; color: #ffffff; left: 0; bottom: 0; font-weight: 300; text-align: center; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
@media screen and (max-width: 767px) { .tutorial-list li { width: 40%; } }
@media screen and (max-width: 500px) { .tutorial-list li { width: 100%; } }