@if not variable-exists(main-color) 
  $main-color: #009688 !global
$main-color-darken: darken($main-color, 15) 
$correct-color: #0f9d58
$wrong-color: #d9534f
.welcome-page.jumbotron
  background-color: $main-color
  color: white
  padding-left: 20px
  padding-right: 20px
  h1
    font-size: 3em
    text-align: center
    position: relative
    left: 0
    margin-top: 0px
  [class*="col-"]
    float: none
  .btn-default
    border-color: white
  .block-welcome_page
    font-size: 1.25em
    line-height: 120%
    padding: 0
    .flatblock-content
      text-align: center
      padding-bottom: 10px
      padding-top: 10px

md-toolbar.material-theme-dark
  padding: 17px
  display: block
  background-color: $main-color-darken !important
  i, i:hover, i:focus
    color: #ddd
  .navbar-brand
    margin: 0 40px
    padding: 5px 0
    float: none
    overflow: hidden
    height: auto
    color: #ddd

.btn-menu
  width: 43%
  margin-left: 4%
  margin-top: 10px

$anim-time: 0.5s

.how-it-works
  -webkit-transition: all linear $anim-time
  -moz-transition: all linear $anim-time
  -o-transition: all linear $anim-time
  transition: all linear $anim-time
  align: center
  h2
    text-align: center
  margin-top: -30px
  padding: 20px
  h3
    margin-bottom: 0px
  li
    list-style-type: circle
    margin: 5px 0 5px 0px
  .works-div
    font-size: 1.2em
    text-align: justify
    margin-bottom: 60px
    i.glyphicon
      font-size: 2em
      float: left
      margin-right: 15px
      margin-left: -10px

.navbar 
  margin-bottom: 0px
  border-radius: 0px

h1, h2, h3
  font-weight: bold

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
  display: none

.plugins-social
  text-align: center
  margin-top: 20px

.btn-huge
  margin: 5px
  text-shadow: none
  color: $main-color
.btn-huge:hover
  color: darken($main-color, 2) 

.col-centered
  text-align: center

html
  min-height: 100%
body, .row
  height: 100%

html
  background: #eee

.row
  margin-right: 0

#wrap 
  height: 100%
  padding-right: 0px
  padding-left: 15px
  padding-bottom: 30px


.homepage
  margin-left: 300px

#ng-view
  position: absolute 
  min-height: 80%
  min-height: calc(100% - 75px)
  min-width: calc(100% - 380px)
  height: auto
  top: 45px
  -webkit-animation: slideInRight .5s ease-out
  -moz-animation: slideInRight .5s ease-out
  animation: slideInRight .5s ease-out
  .welcome-page
    display: none

#ng-view.ng-leave
  -webkit-animation: slideOutRight .5s ease-out
  -moz-animation: slideOutRight .5s ease-out
  animation: slideOutRight .5s ease-out

.left-bar
  background-color: #fff
  position: relative
  min-height: 100%
  height: auto

.main-nav
  margin-top: 20px
  padding-bottom: 50px
  margin-bottom: 20px

.menu-item, .questions-item
  background-color: #fff
  border-width: 0
  cursor: pointer
  display: block
  color: #333
  font-size: inherit
  font-weight: bold
  margin: 0
  outline: 0
  padding: 0 15px
  position: relative
  text-align: left
  text-decoration: none
  width: 100%
  &:hover
    color: #999
    text-decoration: none

.submenu-item
  padding: 0 25px

.menu-item
  line-height: 40px
  max-height: 40px

.menu-item.active 
  background-color: #eee
  font-weight: 700
  color: $main-color

.btn
  text-transform: uppercase
  transition: .2s linear transform
  transition-property: box-shadow,transform
  box-shadow: none

.btn-lg
  border-width: 2px

.btn-default:not([disabled]) 
  border-color: $main-color
  color: $main-color
  &:hover 
    background-color: $main-color
    color: white
    border-color: white


#___plusone_0 iframe
  position: relative !important
  top: 6px !important

img
  max-width: 100%

.navbar-brand
  white-space: nowrap
  overflow: hidden

#feedback 
  position: fixed 
  top: 390px 
  right: -60px
  a 
    transform: rotate(-90deg) 
    -webkit-transform: rotate(-90deg) 
    -moz-transform: rotate(-90deg) 
    -o-transform: rotate(-90deg) 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) 
    display: inline-block 
    width: 160px
    border-radius: 4px 4px 0 0
    font-size: 1.3em

@media (min-width: 767px)
  #wrap
    position: fixed
    width: 300px
  #ng-view
    margin-left: 320px
    margin-right: 50px
    margin-bottom: 30px
  .btn-huge
    margin: 1.3%
    font-size: 27.5px
  .visible-xs-block
    display: none
    
@media (min-width: 1170px)
  .btn-huge
    margin: 1%
  #ng-view
    margin-left: calc(310px + 10%)
    margin-right: 10%
    min-width: calc(80% - 310px)


@media (max-width: 767px)
  #feedback
    display: none
  #ng-view
    top: 64px
    min-height: calc(100% - 64px)
    width: 100%
  .welcome-page
    p
      padding: 10px
    
  .welcome-page.jumbotron
    font-size: 1em
    h1
      font-size: 3em
      padding-top: 10px
    p
      font-size: 0.65em
      padding: 5px
    .main-paragraph
      font-size: 1em
  .jumbotron 
    padding: 0 0 20px 0
  #wrap 
    position: relative
    width: 100%
    padding-left: 0px
  .row
    margin: 0

.material-whiteframe-z5
  z-index: initial
