style.scss

---
---
// Used media queries:
// @media (max-width: 320px)
// @media (max-width: 470px)
// @media (max-width: 560px)
// @media (max-width: 640px)

// @media (max-width: 750px)
// @media (max-width: 758px)
// @media (max-width: 768px)

// @media (max-width: 960px)
// @media (max-width: 992px)

// @media (max-width: 1150px)
// @media (min-width: 1170px)
// @media (max-width: 1180px)

// iPhone 6
// @media only screen
// and (min-device-width : 375px)
// and (max-device-width : 667px)

// iPhone 6 plus
// @media only screen
// and (min-device-width : 414px)
// and (max-device-width : 736px)

// iPhone 5
// @media only screen
// and (min-device-width : 320px)
// and (max-device-width : 568px)


/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */

body {
  padding: 0 0 0 0;
  color: #333;
  line-height: 1.2em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  min-height: 850px;
}

@media (max-width: 640px) {
  .body {
    min-height: 1200px;
  }
}

.y, .y div {
  border: red 1px solid;
}

.border {
  border: #eee 1px solid;
}

.block {
  display: block;
}

.fixhead-container {
  padding: 8em 0 0 0;
  background: #fff;
  position: relative;
  z-index: 12;
}

.overflow {
  overflow: hidden;
}

.relative {
  position: relative !important;
}


body a {
  color: #337ab7;
  text-decoration: none;
  font-weight: 300;
}

body a:hover {
  color: #337ab7;
  text-decoration: underline;
  cursor: pointer;
}

p {
  color: #636363;
  font-weight: 300;
}

.fading {
  color: #a6a6a6;
}
.light-text{
  color: #4d4d4d;
}

.push-right {
  margin-right: 1em;
}

.push-left {
  margin-left: 1em;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.no-p {
  padding: 0 !important;
}

.top0,
.top1, .top2, .top3, .top4, .top5, top8,
.top-1, .top-2, .top-3, .top-4, .top-5 {
   position: relative !important;
}

.top1 { top: 1px;}
.top2 { top: 2px;}
.top3 { top: 3px;}
.top4 { top: 4px;}
.top5 { top: 5px;}
.top8 { top: 8px;}

.top-1 { top: -1px;}
.top-2 { top: -2px;}
.top-3 { top: -3px;}
.top-4 { top: -4px;}
.top-5 { top: -5px;}

.line12 { line-height: 1.2em;}
.line15 { line-height: 1.5em;}
.line20 { line-height: 2.0em;}

.border-top {
  border-top: #dbdbdb 1px solid;
  padding-top: .5em ;
  margin-top: .5em;
}

.top0 {
  top: 0 !important;
  margin-bottom: .5em;
  display: block;
}

h1 {
  font-size: 1.8em;
  font-weight: 300;
  line-height: 1.2em;
}
h2 {
  font-size: 1.6em;
  font-weight: 300;
}  /* 22px */

h3 {
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.2em;
}  /* 20px */

h4 {
  font-size: 1.25em;
  font-weight: 300;
}  /* 18px */

h5 {
  font-size: 1.1em;
} /* 16px */

.uppercase {
  text-transform: uppercase;
}

/* —————————————————————————————————— HEADER —————————————————————————————————————— */

header {
  padding: 1em 0;
}

.main-header {
  position: relative;
}

.IT-point {
  font-size: 1.8em;
  color: #4d4d4d;
  margin: .55em 0 .4em 0;
  display: block;

  strong {
    color: #337ab7;
    font-weight: 400;
  }
}

.IT-moto {
  font-size: .9em;
  font-style: normal;
  line-height: 2em;
  font-weight: 300;
  color: #a6a6a6;

  em {
    white-space: nowrap;
    display: block;
    min-width: 12em;
    margin-left: 1em;
  }

  img {
    margin-left: 1.1em;
    width: 142px;
  }

  a {
    display: block;

    &:hover {
      opacity: .9;
    }
  }
}

.user-login {
  text-align: center;
  padding-right: 1.5em;

  a {
    padding: 0 0 0 .5em;
    line-height: 3.2em;
    position: relative;
    top: .2em;
  }
}

.liner {
  background: #e9e9e9;
  padding: 2em 2em 1.2em 2em;
}

.header-liner {
  padding: 0 2em;
}

// Main Menu

.main-menu {
  margin-left: -1em;

  a {
    margin-right: 2em!important;
    margin-top: 0.25em!important;
  }

  div .btn {
    margin-right: 1.6em !important;
    border: none !important;

    &:hover {
      border: #ccc 1px solid;
      background-color: #eee;
      color: #337ab7;
    }
  }

  ul a {
    text-transform: none;
    color: #666;
    font-weight: normal;
    font-size: 1em;
  }


  a,
  div .btn {
    text-transform: uppercase;
    color: #fc0;
    font-weight: bold;
    font-size: 1em;

    @media (max-width: 375px) {
      font-size: 0.9em;
      margin-right: 1em !important;
    }

    @media (max-width: 320px) {
      font-size: 0.8em;
      margin-right: 1em !important;
    }
  }
}

/*---------------------------------- Main Menu ---------------------------------------*/

.search-label {
  margin-top: 2em;
}

.block-header {
  text-transform: uppercase;
  font-weight: normal;
  margin-top: 1.2em;
}

.main-btn {
  padding: .7em 1.2em;
  margin: 1em auto;

  text-align: center;

  background: #ffcc00;
  color: #4d4d4d;
  font-size: 1em;
  font-weight: 300;
}


.head-button {
  margin: 0 1em 0 0;
  font-size: .9em;
  white-space: nowrap;
}

.side-btn {
  display: block;
}

.head-octocat img{
  max-width: 90px;
  height: auto;
  margin-top: 0;
}

@media (max-width: 1150px) {
  .head-octocat img{
    position: relative;
    left:1em;
  }
}

@media (max-width: 992px) {
  .IT-point{
    font-size: 1.4em;
    margin-top: .4em;
  }

  /* shift MAINbutton below the search block */

  .head-button {
    padding: .9em 1.2em .8em 1.2em;
    font-size: .85em;
  }

  .head-octocat {
    width: 75%;
  }

  .search-block input {
    position: relative;
    top: .5em;
  }
  /* on article page — give spce to MAIIN button */

  .liner {
    padding: 1em 1em .5em 1em;
  }
  .header-liner {
    padding: 0 1em .2em 1em;
  }
  .search-label {
    margin: 1em 0 0 1.4em;
    position: relative;
    top:.5em;
    z-index: 5
  }
}

@media (max-width: 768px) {
  .main-header div {
    float: left;
    width: auto;
  }

  .IT-moto em{
    display: none;
  }

  .IT-moto img{
    margin: -.2em 1em 0 0;
    width: 75px;
  }

  .IT-point{
    font-size: 1.2em;
    text-align: center;
    margin-top: .3em;
  }

  .main-menu a {
    line-height: 2.5em !important;
  }

  .user-login  {
    text-align: t-colt;
    float: right !important;
  }

  .user-login img{
    width: 14px;
  }

  .user-login a {
    line-height: 1.5em;
  }
}

/*———————————————————— xS screen - shift the main MOTO  down  ————————————————————*/

@media (max-width: 640px) {
  .main-header .col-sm-2 {
    margin-bottom: 3em;
  }

  .main-header .col-sm-7 {
    position: absolute;
    top: 2.5em;
    left: 0;
    font-size: .9em;
  }

  .head-git {
    float: right !important;
    /* margin-top: 0;   */
    margin-top:-4px;
  }
}

@media (max-width: 470px) {
  .head-git {
    float: left !important;
  }
}

/* —————————————————————————————————— LEFT —————————————————————————————————————— */

.square-pointer {
  position: relative;
  top: -.2em;
  color: #fff;
  background: #ffcc00;
  font-weight: bold;
  font-size:90%;
  padding: .2em .7em .1em .6em;
  margin: 0 .8em 0 0;

  &:before{
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    top: .5em;
    left: 1.5em;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent #ffcc00;
  }
}

.link-list {
  list-style: none;
  padding: 0;

  a {
    display: block;
  }

  li {
    padding: .8em 0 .2em 0;
    margin: 0 0;
    border-bottom: #dbdbdb 1px solid;

    &.current {
      background: #ededed;
      padding: .8em 0 .2em 0;

      a,
      a:hover{
        color: #333;
        cursor: default !important;
        text-decoration: none;
      }
    }
  }
}

.date-format{
  color: #a6a6a6;
  font-size: .85em;
  line-height: 2.2em;
}

.bulleted-list .date-format {
  margin-left: .5em;
}

@media (max-width: 992px) {
  .link-list {
    margin: -1em 0 2em 0;
  }

  .link-list li {
    padding: .8em .4em .2em 0;
    position: relative;
  }

  .link-list li:after{
    top: .3em;
  }

  .link-list li a{
    margin-left: 7em;
  }

  .link-list .date-format {
    position: absolute;
    display: block;
    top: .5em;
    left: .7em;
    width: auto;
    z-index: 2
  }
}

.side-btn {
  display: inline;
}

/* ——————————————————————————————————  Center  —————————————————————————————————————— */

.section {
  margin-bottom: 3em;

  p {
    font-size: .9em;
  }
}

.section-title {
  padding: .8em 1em .7em 1em;
  text-align: center;
  background: #ffcc00;
  color: #4d4d4d;
  font-size: 1.5em;
  font-weight: 300;
  position: relative;
  margin: 1.2em 0 0 0 !important;

  .title {
    color: #4d4d4d;
  }

  .counter {
    color: #4d4d4d;
    font-size: .6em;
    margin-right: 0;
    position: relative;
    top: .25em;
    padding: 1px 0 2px 1.25em;
    background: url(images/info/articles-count.png) 0 0 no-repeat;
    background-size: 11px 64px;

    &:hover {
      background-position: 0 -50px;
    }
  }
}

.triangle-bottom {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ffcc00 transparent transparent transparent;
  position: absolute;
  top: 2.6em;
  left: 50%;
  margin-left: -5px;
}

.main-article {
  margin-top: .5em;
  margin-bottom: .25em;
  position: relative;
}

.main-article h3 {
  margin-top: .25em;
}

.section-group {
  h4 {
    word-wrap: break-word;
  }

  @media (max-width: 375px) {
    .article-img {
      display: none;
    }
  }
}

.all-articles {
  text-align: right;
  padding: .5em 0;

  a {
    border-right: #ffd733 2px solid;
    padding-right: 12px;
    position: relative;

    &:after {
      content: " ";
      position: absolute;
      width: 0;
      height: 0;
      top: .35em;
      right: 0;
      z-index: 10;
      border-style: solid;
      border-width: 4px 5px 4px 0 ;
      border-color: transparent #ffcc00 transparent transparent;
    }
  }
}

.article-body img {
  width: auto;
  max-width: 100%;
}

.main-article img {
  max-width: 105%;
  margin-top: .25em;
}

@media (max-width: 768px) /* sm */{
  .section-title {
    font-size: 1.2em;
    text-align: left;
  }

  .section-title .counter {
    font-size: .7em;
  }

  .main-article img {
    max-width: 30%;
    margin: .2em 1em 2em 0;
    float: left;
  }

  .row h3 {
    margin: 1.25em 0 .2em 0!important;
    font-size: 1.2em;
  }
  .main-article h3 {
    margin: 0 0 .4em 0!important;}

  .section .all-articles {
    text-align: left;
    margin-top: 1em;
  }
}

.all-countries {
  padding: 0 0 10px 0;
  overflow: hidden;
  position: relative;
  top: 5px;
  /* border-bottom: #dbdbdb 1px solid; */

  li {
    float: left;
    width: 14%;
    list-style-type: none;
    text-align: center;
    margin-bottom: 15px;
    font-size: 90%;

    img {
      width: 54px;
      margin: 0 auto;
      display: block;
    }
  }
}

@media (max-width: 768px) {
  .all-countries li img {
    width: 21px;
    margin: 0 auto;
    display: block;
  }

  .all-countries li a{
    font-size: 80%;
  }
}

.countries-posts img {
  position: relative;
  top: -3px;
  left: -4px;
}

.countries-posts span {
  font-size: 0.7em;
  position: relative;
  top: -2px;
}

/*--------------------- All POSTs for countries ------------------*/
.country-menu {
  list-style-type: none;
  margin-bottom: .5em;
  padding-left: 0;
/*
  position: fixed;
  top: 27.5em;
*/}

.country-menu li{
  border-bottom: #dbdbdb 1px solid;
  padding: .8em  .2em .8em .4em;
}

.country-menu li img{
  margin-right: .4em;
}

@media (max-width: 1180px) {
  .country-menu {
    position: static;
    top: auto;
  }
}

.country-item-block {
  margin: 0 0 4em 0;

  .main-article{
    margin-top: -2.2em;
    z-index: -1;
  }

  .jobs-list{
    border-bottom: #dbdbdb 1px solid;
    border-top: #dbdbdb 1px solid;
    overflow: hidden;
    margin-bottom: 3em;

    li {
      width: 25%;
      float: left;
      margin: 2em .5em 0 .2em 0;
      border:none;
    }
  }

  ul {
    margin-top: 1em;
  }

  h2 {
    font-size: 1.1em;
    font-weight: 300;
    z-index: 10;
    padding: .8em 1.2em .8em .5em;
    background: #fff;
    margin: 1em 0 ;
    display: inline;
    border-bottom: #dbdbdb 1px solid;

    img {
      margin: -.25em .5em 0 0;
      width: 40px;
    }
  }
}

@media (max-width: 768px) {
  .country-item-block h2 img{
    margin-right: .2em;
    width: 20px;
  }

  .country-item-block h2 {
    font-size: 1em;
    padding: 1em 1.2em .7em .8em;
    top: 2.7em;
  }
}

/*------------------------------  TUTtorial   md - max-container :: 970px   ----------------------------------------*/

.add-tutorial {
  & > .row div {
    overflow: hidden;
  }

  .row {
    margin: 1.7em 0 3.5em;

    p {
      font-size: 120%;
      line-height: 2em;
      text-align: left;
      font-weight: 300;
      margin: .2em 0 0 0;
    }

    & > div:first-child .step-sign {
      margin-left: 1.5em;
    }

    & .row > div+div+div p {
      margin-right: 1.5em;
    }
  }

  h2 {
    font-weight: 300 !important;
    line-height: 1.6em;
    padding: 0 2em ;
    text-align: center;
  }

  .main-btn {
    font-size: 1.5em;
    padding: .7em 2em;
  }
}

.step-sign {
  font-size: 1.7em;
  font-weight: normal;
  padding: .4em .5em;
  border: 3px #ffcc00 solid;
  background: #fff;
  color: #337ab7;
  float: left;
  display: block;
  margin: 0 1em 4em 0;
  position: relative;
  overflow: visible;

  .step-arrow {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 1.6em;
    margin-top: -7px;
    display: block;
    border-style: solid;
    border-width: 7px 0 7px 9px;
    border-color: transparent transparent transparent #ffcc00;


    &:before {
      width: 0;
      height: 0;
      content: " ";

      position: absolute;
      top: -7px;
      left: -15px;
      right: 7px;

      border-style: solid;
      border-width: 7px 0 7px 10px;
      border-color: transparent transparent transparent #fff;
    }
  }
}

@media (max-width: 960px) {
  .add-tutorial h2 {
    font-size: 1.4em;
    text-align: left;
  }

  .add-tutorial .step-sign {
    margin: 0 1em 0 1.5em;
    font-size: 1.1em;
  }

  .add-tutorial .step-sign .step-arrow:before {
    left: -14px;
  }

  .add-tutorial .row p {
    margin: .6em 2em 1.8em 0;
    font-size: 1em;
  }

  .add-tutorial .main-btn {
    position: relative;
    top: 1.5em;
    padding: .8em 1.5em;
    font-size: 1.2em;
  }
}

/*------------------------------  RIGHT  ----------------------------------------*/

.right-col {
  padding-bottom: 1em;
}

.right-col .ads img {
  margin: 0 auto 1.5em auto;
}

.jobs-list,
.new-list {
  list-style-type: none;
  margin-bottom: .5em;
  padding-left: 0;
}

.jobs-list li {
  border-bottom: #dbdbdb 1px solid;
  padding: .8em .5em .8em 2.2em;

  background: url(images/info/position.png) 0 10px no-repeat;
}

.dsq-widget-list {
  padding-left: 0 !important;
}


.new-list {
  border-bottom: #dbdbdb 1px solid;
}

.new-list li{
  padding: .6em .5em .6em 2em;
  background: url(images/info/news.png) 0 12px no-repeat;
}

.newitems-carousel {
  margin: 2em 0;

  .carousel {
    padding-bottom: 2em;
    min-height: 135px;
  }

  .carousel-indicators{
    bottom: 0 !important;
  }
}

.dark-indicators {
  bottom: 0 !important;

  li {
    width: 9px;
    height: 9px;
    margin: 2px 3px;

    background-color: #aaa \9;
    background-color: rgba(0,0,0,0);
    border: 1px solid #aaa;
    border-radius: 10px;

    &:hover {
      width: 12px;
      height: 12px;
      margin: 0 1px 0 2px;
    }
  }

  .active,
  .active:hover {
    width: 13px;
    height: 13px;
    margin: 0 2px;
    background-color: #aaa !important;
  }
}

/*------------------------------  POPular sm - max-container :: 750px ----------------------------------------*/

.popular {
  padding: 2em 0;

  h3 {
    text-align: center;
    margin: 2em 0;
  }

  .date-format {
    display: block;
  }

  .img-crop {
    border-bottom: #ffcc00 7px solid;
    /* border: #ffcc00 2px solid;  */
    img {
      min-height:130px;
      width:100%;
      max-width: 160%;
    }
  }

  .triangle-bottom {
    top: .60em;
    position: relative;
  }

  .row {
    div+div img {
      margin-left: -4px;
    }

    div+div+div img {
      margin-left: -8px;
    }

    div+div+div+div img {
      margin-left: -12px;
    }
  }
}

.popular1 {
  border:1px solid #ffcc00;
}

.ads-long {
  overflow: hidden;

  div {
    padding: 1.7em 0;
    position: relative;
    left: 50%;
    margin-left: -364px;
  }
}

/*---------------- Cropping ACTUAL images to fit same height  -----------------------*/

.img-crop {
  /* max-width: 1200px; /* img src width (if known) */
  max-height: 150px;
  overflow: hidden;

  img {
    /* corrects inline gap in enclosing div */
    display: block;
    max-width: 100%;
    /* just in case, to force correct aspect ratio */
    height: auto !important;
    width: auto\9; /* ie8+9 */
    /* lt ie8 */
    -ms-interpolation-mode: bicubic;
    &.portrait {
      width: 100%!important;
      height: auto;
    }
  }
}

/*
.article-img { position: relative; }
*/

/* ————- xs : <  768  ——————— */
/* ————- sm : >= 768  (760)——————— */
/* ————- md : >= 992  (970)——————— */
/* ————- lg : >= 1200 (1170)———————






@media (min-width: 768px) {
  .img-crop { height: 95px;}
}
@media (min-width: 970px) {
  .img-crop { height: 120px;}
}
@media (min-width: 1170px) {
  .img-crop { height: 150px;}
}

@media (max-width: 768px) {
  .img-crop { height: 115px;}
}


@media (max-width: 768px) {

  .popular h3 {
    text-align: left;
    margin-bottom: 1em}

  .popular .row > div {
    overflow: hidden;
    margin-left: 0;

  }

.popular .img-crop {
    margin: 0 1em 1em 0;
    border-right: #ffcc00 7px solid;
    border-bottom: none!important;
  }
  .article-img {
    float: left;
    width: 30%;
    margin: 0 1em 1em 0;
    overflow: visible;
    margin-bottom: 2em;


  }

  .popular .img-crop {
    margin: 0 1em 0 0!important;}

  .popular .article-img .triangle-bottom {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;


    left:95%;
    top: 45%;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #ffcc00;
    z-index: 1;

  }
}
*/

// Footer

footer {
  background: #4d4d4d;
  padding: 2.5em;
  color: #fff;
  color: #afafaf;

  h4 {
    font-weight: 300;
    font-size: 1.2em;
  }

  .row {
    margin-bottom: 1em!important;
    margin-top: 1em!important;
  }

  ul {
    padding: 0 0;
  }

  li {
    list-style: none;
    display: inline;
  }

  a {
    line-height: 2em;
    margin: 0 0.5em 0 0;
    text-decoration: underline;
    white-space: nowrap;

    &:hover {
      color: #fff;
    }
  }

  .partners {
    margin: 1em 0;

    a {
      text-decoration: none;
      margin: 0 1em 1em 0;
      display: inline-block;
    }
  }
}

.itua-links a {
  margin: 0 1.5em 0 0;
}

@media (max-width: 750px) {
  footer a {
    font-size: .9em;
    margin: 0 1em 0 0;
  }
}


/* ————-  Bootstrap media queries for display width  ——————— */

/* ————- xs : <  768  ——————— */
/* ————- sm : >= 768  (760)——————— */
/* ————- md : >= 992  (970)——————— */
/* ————- lg : >= 1200 (1170)——————— */


/* ——————————————————————————————————  Article  —————————————————————————————————————— */

.left-col h2 {
  text-align: left;
}

.left-col .section-title {
  font-size: 1em;
}

.article-body {
  font-size: 1.15em;
  font-weight: normal;

  line-height: 1.4em;
}

h2 {
  font-weight: normal;
  font-weight: 1.7em;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  font-weight: 400;
  margin-top: 1.5em;
}

.article-body p {
  margin: .25em 0 2em 0;
}

.article-body img {
  margin: 0 0 .25em 0;
}

.article-body h1,
.article-header {
  color: #337ab7;
  font-weight: normal;
  margin: .5em 0 .1em 0;
}

.article-body .article-data {
  margin: -.2em 0 .8em .1em;
  font-size: .85em;
  color: #a6a6a6;
}

.article-body table {
  margin: 2em 1em 2em 0em;
  border: #ededed 1px solid;
  min-width:75%;
  font-size: 1.2em;
}

.article-body th {
  padding: .4em 4em .3em .8em;
}

.article-body td {
  padding: .4em 4em .3em 1em;
}

.article-body tr:nth-child(2n-1) {
  background: #ededed;
}

.article-body th{
  font-size: 1em;
  color: #f3b700;
  font-weight: normal;
  background-color: #fff;
  border-bottom: #ededed 1px solid;
}

.article-body td{
  font-size: .8em;
  font-weight: 300;
}

.article-body td+td,
.article-body th+th{
  border-left: #ededed 1px solid;
}
.article-body tr:nth-child(2n-1) td+td{
  border-left: #fff 1px solid;
}

.article-body ul{
  color: #ffcc00!important;
  padding: 0 0 1em 1em;
  font-weight: 600;
}

.article-body ul li {
  font-weight: 300;
  color: #333;
  position: relative;
  list-style-type: none;
  padding: .2em 1em .2em 1.2em;
}

.article-body ul li:before{
  content: '•';
  font-weight: bold;
  color: #ffcc00;
  font-size: 1.1em;

  position: absolute;
  left: 0;
  top: .1em;
}

cite, blockquote {
  font-size: 1em;
  font-weight: 300;
  display: block;
  position: relative;
  margin: 4em 0 -1em 0;
  padding: 1em 2em 2em 2.2em;
  line-height: 1.5em;
  border:none;
}

cite:before,
blockquote:before {
  content: '“';
  font-weight: bold;
  color: #ffcc00;
  font-size: 5em;
  position: absolute;
  left: -.1em;
  top: .2em;
}

cite:after,
blockquote:after {
  content: '”';
  font-weight: bold;
  color: #ffcc00;
  font-size: 5em;

  position: absolute;
  right: 0em;
  bottom: -.15em;
}

.edit-article {
  text-align: right;
  font-size: .85em;

}

.git-cliche {
  margin-right: .1em;
  position: relative;
}

.edit-article img{
  width: 18px;
  position: relative;
  top: 3px;
  margin-right: .25em;
  margin-bottom: .5em;
}

.git-cliche img{
  width:25px !important;
  margin-right: 0;
  position: relative;
  top: 3px;
}

.git-blue {
  background-color: #337ab7;
}

.author-block .row > div {
  overflow: hidden;
}

.author-block.liner {
  padding:1.5em 1.25em !important;
}

.author-block.author-preview {
  margin: 1em 0 !important;}

.author-block {
  margin-bottom: 2em;
}

.author-block h4,
.author-block h3 {
  margin: .2em 0 .4em 0;
  font-weight: 300 !important;
}

.author-block .main-btn {
  white-space: nowrap;
  font-size: .9em;
}

.author-photo img {
  margin: 0;
  width: 2.5em!important;
}

.author-photo {
  display: block;
  margin: 0 .75em 1em 0;
  padding:.25em;

  background: #fff;
  border: #ffcc00 3px solid;
  position: relative;
}

.author-info p {
  font-size: .9em;
  line-height: 1.25em;
}

.author-info .step-sign {
  margin-left: 0!important;
}

.author-info .step-arrow {
  left: 3em;
}

.became-author p {
  padding: 1em 0;
  margin-bottom: 0 !important;
}

.became-author h3{
  line-height: 1.25em;
  font-size: 1em;
  font-weight: 300 !important;

  border-top: 1px solid #c6c6c6;
  padding-top: 1em;
}

@media (min-width: 1170px) {
  .became-author {
    text-align: right;
  }
  .became-author h3 {
    border: none;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .author-photo {
    margin: 0 .75em 0 0;}
}

/* ——————————————————————————————————  USER profile  —————————————————————————————————————— */

.modest-hr:after {
  content: " " ;
  height: .8em;
  width: 75px;
  display: block;
  border-bottom: #dbdbdb 1px solid;
}

.user-info .step-sign {
  margin-left: 0 !important;
}

.user-info .step-arrow {
  border-width: 15px 0 15px 20px;
}

.user-photo img {
  width: 100%;
}

.user-info {
  clear: both;
  width: 100%;
  float: left;
}

p.socials {
  padding: 1em 2em 1em 1em;
  margin-top: -2em;
  clear: both;
  line-height: 2.7em;
}

.socials a,
.socials span {
  margin: 0 .7em 0 0;
  opacity: 0.70;
  filter: alpha(opacity=50);
}


.socials a:hover{
  margin: 0 .7em 0 0;
  opacity: 1;
  filter: alpha(opacity=100);
  text-decoration: none;
}


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

.thin-hr {
  margin:1em 0 0 0;
}

.user-photo {
  position: relative;
  overflow: visible;
  float: left;

  margin: 1.5em 2em -2em 0;
}

@media (max-width: 758px) {
  .user-header {
    padding-bottom: 2em;
  }
  .user-photo {
    margin: 1.5em 2em 0 0;
  }
}

.user-photo img {
  padding: 10px;
  border: 3px #ffcc00 solid;
  background: #fff;
  display: block;
  width: 98%;

  display: block;
  float: left;
}

.user-photo .step-arrow {
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 24px 0 24px 28px;
  border-color: transparent transparent transparent #ffcc00;

  position: absolute;
  top: 50%;
  left: 98%;
  margin-top: -24px;

  display: block;
  float: left;
}

.user-photo .step-arrow:before {
  width: 0;
  height: 0;
  content: " ";

  border-style: solid;
  border-width: 24px 0 24px 28px;
  border-color: transparent transparent transparent #fff;

  position: absolute;

  top: -24px;
  left: -32px;
}

/*---------------  user image smaller on narrow screens  -----------------*/

@media (max-width: 560px) {
  .user-photo img {
    padding: 8px;
  }

  .user-photo .step-arrow {
    border-width: 16px 0 16px 21px;
    margin-top: -16px;
  }

  .user-photo  .step-arrow:before {
    border-width: 16px 0 16px 21px;
    top: -16px;
    left: -26px;
  }
}

.user-info input {
  padding: .6em .5em .4em .5em;
  width: 90%;
  margin: .25em 0 0 0;
}

.user-info form p {
  text-align: right;
}

.user-info form p span,
.user-info form p img {
  float: left;
  position: relative;
  top: 1em;
}

.user-info form p img {
  top: .5em;
}

.user-info form p input {
  width: 90%;
}

.user-info form .sm-info input {
  width: 64%;
}

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

.bulleted-list {
  padding: 1em 0em 1em 1em;
  margin-left: 0;
  font-weight: 600;
}

.bulleted-list li {
  font-weight: 300;
  line-height: 1.2em;
  color: #333;
  position: relative;
  list-style-type: none;
  padding: .2em 1em .2em 1.2em;
}

.bulleted-list li:before{
  content: '•';
  font-weight: bold;
  color: #ffcc00;
  font-size: 1.25em;

  position: absolute;
  left: 0;
  top: .3em;
}

.bulleted-list li a{
  font-size: 1.15em;
}

/*------------------  Cool style for OL NUmbers --------------------*/

ol {
  counter-reset:li; /* Initiate a counter */
  margin:2em 0 1em 2em; /* Remove the default left margin */
  padding-left:0; /* Remove the default left padding */
}

.article-body ol > li {
  position:relative; /* Create a positioning context */
  margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
  padding:4px 8px; /* Add some spacing around the content */
  list-style:none; /* Disable the normal item numbering */

  font-weight: 300;
}

.article-body ol > li:before {
  content: counter(li); /* Use the counter as content */
  counter-increment: li; /* Increment the counter by 1 */
  /* Position and style the number */
  position: absolute;
  top: 3px;
  left: -2.4em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 2.1em;
  /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  padding: 3px 4px 2px 4px;

  color: #fff;
  background: #ffcc00;
  font-weight: bold;
  font-size: 80%;

  text-align: center;
}

li ol,
li ul {
  margin-top: 6px;
}

ol ol li:last-child {
  margin-bottom: 0;
}

/*-------------------------------  Section - all articles  --------------------------------------*/

.month-articles {
  margin-bottom: 1.5em;
}

.month-view {
  text-align: center;
  font-size: 1.15em;
  padding: .25em 0 1em 0;
  line-height: 1.5em;
}

.month-view:after {
  content: " " ;
  height: 2em;
  width: 80%;
  margin-left: 10%;
  display: block;
  border-bottom: #dbdbdb 1px solid;
}

.month-view span {
  display: block;
}

.date-month {
  color: #a6a6a6;
  margin-left: .2em;
}

.date-year {
  color: #f2b800;;
  font-weight: bold;
}

@media (max-width: 768px) {
  .month-view {
    text-align: left;
    font-weight: 300;
    margin: 1em 0 ;
    padding: 0;
  }
  .month-view:after {
    content: " " ;
    height: .75em;
    width: 100%;
    margin:0;
  }

  .month-view span {
    display: inline;
    margin:0 .5em 0 0;
  }

  .main-article div h3 {
    margin: 2em 0 0 0 ;
  }
}

.month-articles .main-article {
  margin-bottom: 2em;
}

.main-article img {
  width: 100%;
}


// Pagination

.pagination {
  margin: 2.5em 1em 3em 0;

  a {
    padding: .2em .7em;
    font-size: 1.15em;
    border: #ffcd00 2px solid;
    margin: 0 .75em 0 0;

    &.active,
    &.active:hover {
      background:#ffcd00;
      border: #ffcd00 2px solid;
      color: #fff;
      font-weight: bold;
      cursor: default;
    }

    &:hover {
      color: #fff;
      border: #337ab7 2px solid;
      background: #337ab7;
    }
  }

  span {
    font-size: 1.25em;
    font-weight: 600;
  }
}

@media (max-width: 375px) {
  .read-more {
    display: none;
  }
}