@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css")
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:700&display=swap')
@import url('https://fonts.googleapis.com/css?family=Poppins:400&display=swap')
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css')

@import "navigation"
@import "project"
@import "member"
@import "profile"

body
  background: #eee
  margin: 0
  font-family: 'Poppins', sans-serif

footer
  display: block

  h6
    font-size: 1rem

  .sub-footer
    background: #333
    color: #999
    padding: 1rem


    div
      align-items: center
      display: flex
      justify-content: center
      text-align: center
      margin: 0.5vh 0.5rem

    img
      height: 3.2rem
      padding: 0 0.5rem

    img[alt="bi0s"]
      position: relative
      height: 6.2rem
      top: -4px

    a
      padding: 0.3rem
      color: #999
      text-decoration: none
      font-size: 0.8rem

    a:hover
      color: white

h1, h2, h3, h4, h5, h6
  font-family: 'Josefin Sans', sans-serif
  font-weight: 700

a
  text-decoration: none
  color: black

a:hover
  text-decoration: none
  color: black

h1
  font-size: calc(2rem + 1.2vw)

h2
  font-size: calc(1.8rem + 1vw)

h3
  font-size: calc(1.5rem + 0.8vw)

h4
  font-size: calc(1.3rem + 0.6vw)

h5
  font-size: calc(1rem + 0.5vw)

h6
  font-size: calc(1rem + 0.4vw)

.content-text-size
  font-size: calc(0.8rem + 0.5vw)
  text-align: justify
  text-justify: inter-word

.bg-brand
  background: #ffc107!important

.heading-font
  font-family: 'Josefin Sans', sans-serif

#page-container
  position: relative
  margin-top: 4rem

.card-no-hover
  background: white
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)
  border: none
  border-radius: 0

.card
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)
  border: none
  border-radius: 0
  .cover
    object-fit: cover
    height: 220px

.card:hover, .card:focus
  box-shadow: 4px 5px 10px 0 rgba(46, 61, 73, 0.15)
  outline: none

.no-decoration:hover
  text-decoration: none!important

.post-header
  background-repeat: no-repeat
  background-size: cover
  background-position: center

.post-cover
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)
  border-radius: 0.6vh
  width: 100%
  object-fit: cover
  max-height: 500px
  height: 100%

.post-card
  color: black
  display: block
  text-decoration: none
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)
  padding: 0!important
  border-radius: 0.6vh
  position: relative

  p
    font-size: 1rem
  img
    width: 100%
    height: 33vh
    object-fit: cover

  .post-card-footer span
      position: absolute
      margin-left: 3vh
      bottom: 3vh

.loading
  min-height: 100vh
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center

.tag
  padding: 0.2rem 1rem
  font-size: calc(0.7rem + 0.3vw)
  display: inline-block
  margin: 1rem
  color: white
  border-radius: 1rem
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3)
  cursor: pointer

.Member
  background: #4A148C!important
.Alumni
  background: #00897B!important
.Club
  background: #E65100!important


.Meetup
  background: #E65100!important
.OpenTalks
  background: #4A148C!important
.BootCamp
  background: #00897B!important
  
.post-card:hover
  text-decoration: none
  box-shadow: 4px 5px 10px 0 rgba(46, 61, 73, 0.15)
  outline: none
  color: black

.project-card
  display: block
  background: white
  padding: 1rem
  text-decoration: none
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)

  img
    width: 100%

.project-card:hover
  text-decoration: none
  box-shadow: 4px 5px 10px 0 rgba(46, 61, 73, 0.15)
  outline: none

@media (min-width: 900px)
  #sidebar
    display: flex
  #page-container
    margin-left: 15rem

#page-container
  padding: 0 0

.blog-author
  display: block
  background: white
  padding: 1rem
  text-decoration: none
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)


.title-card
  background: #ffc107
  text-decoration: none
  font-weight: 500
  min-height: 25vh
  height: 100%
  align-items: center
  color: #333
  padding: 5vw
  box-shadow: 5px 3px 3px 4px rgba(0, 0, 0, 0.2)
  display: flex


.list-card
  background: white
  .list-heading
    padding: 1rem
    font-size: calc(1rem + 0.4vw)
    font-weight: 900
    background: #ffc107
    color: #000
    select
      background: none
      border: none
      font-weight: 900
      float: right
  .list:hover, .list:focus
    background: inherit!important
  a
    text-decoration: none !important
    color: black
    padding: 0.2rem

  h6
    margin-bottom: 0.2rem

  .item-details
    margin-left: 0.5rem
    display: flex
    align-items: center

  .list-tagline
    font-size: calc(0.8rem + 0.2vw)
    font-weight: 400

  img
    width: 80px
    height: 80px
    object-fit: contain

  a:hover, a:focus
    background: #eee
    color: black

.blog-image
  padding-left: 4rem
  border: 1px none black

#home-video
  width: 100%

.home-sections
  p
    font-size: calc(0.8rem + 0.3vmax)

  .cover
    width: 100%

  .quote
    font-size: calc(0.8rem + 0.6vw)
    text-align: center

  .points
    text-align: center

    img
      width: 15vmax
      max-width: 100%
      min-width: 180px

    h5
      span
        display: block
        font-size: 90%

%flex-center
  display: flex
  align-items: center
  justify-content: center

#footer-nav
  @extend %flex-center
  background-color: #ffc107
  color: #000
  padding: 2rem
  min-height: 50vh
  font-size: 1rem

  a
    color: inherit
    display: inline-block
    padding: 0.5rem 0

  a:hover
    text-decoration: none
    padding-bottom: 0.3rem
    border-bottom: 2px solid

  .row
    width: 100%

  h4
    font-weight: 900
    font-size: calc(1rem + 0.8vmin)
    border-bottom: 2px solid
    margin: 1rem 0
    display: inline-block

  ul
    list-style: none
    padding: 0 0.5rem

    li
      line-height: 110%

  form
    %form-border-black
      box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3)
      border-radius: 0

    input, textarea
      font-size: 1rem
      @extend %form-border-black

    button
      color: black
      background: white
      margin: 0
      @extend %form-border-black

#sub-footer
  background-color: #333
  color: #999
  padding: 0.3rem
  font-size: 90%

  #footer-logos
    height: 6rem
    @extend %flex-center

  img
    height: 3.2rem
    padding: 0 0.5rem

  a
    padding: 0.3rem
    color: #999

  div
    text-align: center
    padding: 0.3rem

  a:hover
    color: #eee
    text-decoration: none
    outline: none

.alert-box
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,114,255,1) 0%, rgba(0,132,255,1) 90% )
  color: white

  .button
    padding:  0.5rem 1rem
    border-radius: 5px
    display: inline-block
    background-color: rgba(256,256,256,0.1)
    border: 1px solid white
    color: white
    font-weight: 900
    font-size: calc(0.8rem + 0.7vw)
  .button:hover
    background: white
    color: black


.box
  border: none
  margin: 0
  background-color: white
  color: #43CBFF

main .profile
  background-color: #eeeeee!important

@media (min-width: 576px)
  #contact-details
    justify-content: center

@media (max-width: 80rem)
  #footer-nav
    .row
      div
        div
          width: 100%

#home-landing
  position: relative
  height: 100vmin
  background-repeat: no-repeat
  background-size: cover
  background-position: center
  background-color: #333
  background-image: url("../public/photos/cover.jpg")
  color: white
  .overlay
    background: linear-gradient(to right, rgba(0,0,0,0.70),rgba(0,0,0,0.75),rgba(0,0,0,0.80),rgba(0,0,0,0.75),rgba(0,0,0,0.70))
    height: 100%
    #landing-info
      height: 100%
      display: flex
      align-items: center
      justify-content: center
      padding: 2vw
      top: 0
      bottom: 0
      h1
        font-size: calc(1.3rem + 1.5vw)
        line-height: 1
        span
          font-size: calc(1.5rem + 1.8vw)
          display: block
          margin-top: 0.5rem
          color: rgb(255, 193, 7)
      p
        max-width: 1200px
        line-height: 1.5
        font-size: 1.2rem
        margin-bottom: 2rem
    #landing-btn
      position: absolute
      bottom: 1.5rem
      text-align: center
      justify-content: center
      width: 100%
      a
        color: white
        padding: 0.5rem 1rem
        margin: 1rem 0.5rem
        font-size: calc(1rem + 2vw)
        text-decoration: none
      a:hover
        text-decoration: none

.stats-card
  padding: 6vh 0
  h6
    font-size: calc(1.2rem + 5vmin)
    font-weight: 900
  div
    font-size: calc(1rem + 0.3vw)

#cta-section
  background: #4527A0
  padding: 2vh 5vh
  color: white
  #why-join
    color: black
  #join-invitation
    margin: 8vh 5vw

#thank-you
  background: #ffe

.blog-content
  img
    max-width: 100%
    object-fit: cover


#img-main
  img
    height: auto
    display: block
    margin-left: auto
    margin-right: auto
    width: 100%
    transition: transform .2s

  .img:hover
    transform: scale(1.1)

  .img-title
    text-align: center
    margin-top: 1rem


    
#img-top 
  img
    height: auto
    display: block
    margin-left: auto
    margin-right: auto
    width: 50%
    transition: transform .2s

  .img:hover
    transform: scale(1.1)

  .img-title
    text-align: center
    margin-top: 1rem
  
  .card-img-link
    text-align: center
  
#img-white-horizontal
  img
    height: auto
    display: block
    margin-left: auto
    margin-right: auto
    width: 100%
    transition: transform .2s

  .img:hover
    transform: scale(1.1)

  .img-title
    text-align: center
    margin-top: 1rem
  
  .card-img-link
    text-align: center

.badge
  
  .badge-yellow
    background-color: #FFC107
    display: inline-block
    color: white
    border-radius: .5rem


  .badge-black
    background-color: #000000
    display: inline-block
    color: white
    border-radius: .5rem

.table_view
  margin-left: 4rem

.card-black-no-hover
  background: #37474F
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)
  border: none
  border-radius: 0

.card-black
  box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, 0.15)
  background: #37474F
  border: none
  border-radius: 0
  .cover
    object-fit: cover
    height: 220px

.card-black:hover, .card-black:focus
  box-shadow: 4px 5px 10px 0 rgba(46, 61, 73, 0.15)
  outline: none


#img-black-top
  a
    color: white
  strong
    color: white
  img
    height: auto
    display: block
    margin-left: auto
    margin-right: auto
    width: 50%
    transition: transform .2s

  .img:hover
    transform: scale(1.1)

  .img-title
    text-align: center
    margin-top: 1rem
    color: yellow
  
  .card-img-link
    text-align: center

#img-black-horizontal
  a
    color: white
  strong
    color: white
  img
    height: auto
    display: block
    margin-left: auto
    margin-right: auto
    width: 100%
    transition: transform .2s

  .img:hover
    transform: scale(1.1)

  .img-title
    text-align: center
    margin-top: 1rem
    color: yellow
  
  .card-img-link
    text-align: center

hr.black
  border-top: .1rem dashed black

hr.yellow
  border-top: .1rem dashed yellow

.card-body-middle
  margin-left: 2rem
  margin-top: 9rem

.content_center
  display: flex
  justify-content: center
  align-items: center
  width: 250px
  height: 150px

.vertical-align
  display: flex
  align-items: center
@property --num
  syntax: "<integer>"
  initial-value: 0
  inherits: false

.font-new
  font-size: 2rem


@media only screen and (min-width: 768px)
  .vertical-timeline-element-content .vertical-timeline-element-date
    font-size: 2rem

.card-flip > div 
  backface-visibility: hidden
  transition: transform 300ms
  transition-timing-function: linear
  width: 100%
  height: 15rem
  margin: 0
  display: flex

.bottompad
  padding: 10px

.card-front 
  transform: rotateY(0deg) 

.card-back 
  transform: rotateY(180deg) 
  position: absolute
  top: 0


.card-flip:hover .card-front 
  transform: rotateY(-180deg)
  
.card-flip:hover .card-back 
  transform: rotateY(0deg)


.font-lg
  font-size: 21.5px
@media only screen and (min-width: 771px )
  .right
    right : 70px
.righttitile
  right : 70px