main.sass

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
  font-family: 'Montserrat', sans-serif
  margin: 0
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline

*
  box-sizing: border-box

h1, h2, h3, h4, h5, h6
  font-family: 'Montserrat', sans-serif
  margin: 0

p
  font-family: "Montserrat", sans-serif
  font-size: 100%
  font-weight: normal
  line-height: 1.5em
  letter-spacing: 0.03rem
  color: #fff
  strong
      color: #2AEA9C

a
  font-family: 'Montserrat', sans-serif
  font-size: 100%
  font-weight: normal
  line-height: 1.5em
  letter-spacing: 0.03rem
  color: #FF00FF
  text-decoration: none

.navbar-fixed-top
  align-items: center
  display: flex
  justify-content: center
  padding: .5em 0
  position: fixed
  top: 0
  width: 100%
  z-index: 9999
  @media only screen and (max-width: 1112px)
    justify-content: space-between
    flex-wrap: wrap
    padding: 1em 0
    overflow-y: scroll
    .nav
      display: none !important
      margin-top: 1em
      width: 100%
      li
        height: 3.5em
        width: 100%
        a
          color: #ffffff
          align-items: center
          background-color: #000000
          border-bottom: solid .01em #efefef
          display: flex
          flex-grow: 1
          height: 100%
          margin: 0
          padding: .2em 1em 0 1em
          width: 100%
    .active
      display: flex !important
      flex-wrap: wrap

  .logo
    background-image: url('../../assets/images/codesync-logo.svg')
    background-position: 0 0
    background-repeat: no-repeat
    background-size: contain
    display: block
    height: 2em
    width: 2em
    @media only screen and (max-width: 1112px)
      margin-left: 2em
  .nav
    display: flex
    li
      list-style-type: none
      a
        color: #ffffff
        padding-bottom: .5em
    .current-menu-item
      a
        @media only screen and (max-width: 1112px)
          background-color: #2a2828 !important
  .page-scroll
    font-weight: 200
    margin: 0 1em
  .active
    a
      color: $primary-color
      border-bottom: solid .1em $primary-color
      @media only screen and (max-width: 1112px)
        border: none
        color: #5e5e5e
  .dropbtn
    font-weight: 200
    margin: 0 1em
    @media only screen and (max-width: 1112px)
      padding: 1em !important
      width: 100%

.dropdown
  cursor: pointer
  float: left
  overflow: hidden
  @media only screen and (max-width: 1112px)
    width: 100%
  &:hover
    .dropdown-content
      display: flex
      flex-flow: column
      @media only screen and (max-width: 1112px)
        width: 100%
      a
        color: #17222b !important
        border-bottom: solid .1em #eeeeee
        font-weight: 200
        padding: .5em
        @media only screen and (max-width: 1112px)
          padding: 1em
        &:hover
          background-color: #eee
  .dropdown-content
    display: none
    position: absolute
    background-color: #f9f9f9
    min-width: 160px
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
    z-index: 1

.navbar-shrink
  background: $dark

.section
  height: 35em
  width: 100%

.btn-outline
  align-items: center
  background: none
  border: solid .1em #fff
  color: #ffffff
  border-radius: .3em
  display: flex
  justify-content: center
  font-size: 1.3em
  font-weight: 500
  letter-spacing: .16em
  padding: .5em 2.7em
  @media screen and (max-width: 900px)
    text-align: center

.btn-purple
  &:hover
    background-color: #fff
    color: #543465

.btn-blue
  &:hover
    background-color: #ffffff
    color: #2f5677

.btn-orange
  border: solid .1em $primary-color
  color: $primary-color
  &:hover
    background-color: $primary-color
    color: #fff

.btn-orange-hover-white
  &:hover
    background-color: #ffffff
    color: $primary-color

.btn-grey
  &:hover
    background-color: #ffffff
    color: #323333

.ml-1
  @media only screen and (min-width: 981px)
    margin-left: 1em
  @media only screen and (max-width: 980px)
    margin-left: 0

.mt-0
  margin-top: 0 !important
.mt-1
  margin-top: 1em !important
.mb-1
  margin-bottom: 1em
.mb-2
  margin-bottom: 2em
.mb-3
  margin-bottom: 3.1em
.w-100
  width: 100%

.section
  align-items: center
  background-color: $dark
  display: flex
  flex-wrap: wrap
  height: auto
  justify-content: center
  padding: 6em 3em
  width: 100%
  @media only screen and (max-width: 1112px)
    padding: 2em 1em
  .title
    color: #fff
    font-size: 2em
    font-weight: 600
    letter-spacing: .1em
    text-align: center
    min-width: 100%
    width: 100%
  .section-text
    color: #fff
    font-style: italic
    font-weight: 500
    font-size: .9em
    text-align: center
    width: 100%
  hr
    border: none
    background: linear-gradient(to right, $secondary-color 50%, $primary-color 50%)
    display: block
    height: .3em
    margin-top: 2em
    margin-bottom: 2em
    margin-left: auto
    margin-right: auto
    width: 5em
  .row
    display: flex
    @media screen and (max-width: 900px)
      flex-wrap: wrap
      justify-content: center
      text-align: center
    .left-content
      padding: 1em
      width: 50%
      @media screen and (max-width: 900px)
        align-items: center
        display: flex
        justify-content: center
        flex-flow: column
        width: 100%
    .right-content
      padding: .6em 1em
      width: 50%
      @media screen and (max-width: 900px)
        align-items: center
        display: flex
        justify-content: center
        flex-flow: column
        width: 100%

.text-title
  color: #fff
  letter-spacing: .1em
  font-family: 'Lato'
  font-size: 1.5em

.text-subtitle
  color: #fff
  letter-spacing: .1em
  font-family: 'Lato'
  font-size: 1.5em
  font-weight: 100

.text-content
  color: #fff
  letter-spacing: .1em
  font-family: 'Lato'
  font-size: 1em
  font-weight: 100

.items-container
  display: flex
  justify-content: center
  flex-wrap: wrap
  margin-top: 2em
  width: 100%
  .item
    align-items: flex-start
    background-color: $dark
    border-radius: .5em
    color: #fff
    display: flex
    flex-flow: column
    margin: 1em
    transition: box-shadow 150ms linear
    width: 18em
    @media screen and (max-width: 580px)
      width: 100%
    .item-head-link
      width: 100%
    .img
      background-position: 0 0
      background-repeat: no-repeat
      background-size: cover
      border-radius: 50%
      display: block
      height: 14em
      margin: 2em auto 1em auto
      width: 14em
      @media screen and (max-width: 580px)
        height: 14em
      i
        display: none
    .item-name
      color: #fff
      font-size: 1.35em
      line-height: 1.45em !important
      font-weight: 500
      margin: 1em 1em .8em 1em
    .item-position
      color: #ffffff
      font-style: italic
      font-weight: 500
      font-size: 1em
      text-align: left
      margin: 0 1em 1em 1.45em
    .item-training
      color: $secondary-color
      font-family: 'Montserrat', sans-serif !important
      font-size: 1.2em
      font-weight: 500
      line-height: 1.45em !important
      margin: 0 1em 1em 1em
      &:hover
        color: $secondary-hover-color
    &:hover
      box-shadow: 0 2px 6px rgba(0,0,0,.2)
      .img
        align-items: center
        display: flex
        justify-content: center
        background-image: none !important
        background-color: #14c2c9
        transition: box-shadow 150ms linear
        i
          color: #ffffff
          display: block
          font-size: 2.8em

.toggle-menu
  color: #ffffff
  cursor: pointer
  display: none
  @media only screen and (max-width: 1112px)
    margin-right: 2em
    display: block

.flex-end
  display: flex
  justify-content: flex-end

.align-center
  align-items: center

.newsletter
  background-color: $secondary-color
  .title, .section-text
    color: #fff
  hr
    background: linear-gradient(to right, #ffffff 50%, $primary-color 50%)
  iframe
    margin: 0 auto

.fake-button
  font: bold
  text-decoration: none
  background-color: #15c2c8
  padding: 2px 6px 2px 6px
  border-top: 1px solid
  border-right: 1px solid
  border-bottom: 1px solid
  border-left: 1px solid

.call-for-talks
  align-items: center
  display: flex
  flex-flow: column
  @media only screen and (max-width: 634px)
    padding: 0 2em 2em 2em

.column
  float: left
  width: 25%

/* Clear floats after the columns */
.row:after
  content: ""
  display: table
  clear: both

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
  .column
    width: 100%