/*----------------------jumbotron CSS---------------------*/
.jumbotron{
    font-family: Roboto;
    text-align: center;
    color: white;
    height:350px;
    background-color: #03A9F4;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    margin-top: 20px;
}

.jumbotron-text {
  /* fix text in middle of jumbotron*/
  position: relative;
  top: 50%;
  transform: translateY(-60%);
}

/* set global background colour*/
body {
  background-color: #eaeaea;
}

@media(max-width: 768px){
  .extend-down {
    margin-top: 65px;
  }
}

/* ------------------------NAVBAR ----------------------*/
@media(min-width:768px) {
    .navbar-fixed-top {
        padding: 20px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }

    .extend-down {
      margin-top: 110px;
    }
}

.navbar-default {
  background-color: #0288D1;
  border: 0;
}


.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-toggle,
.navbar-default .navbar-brand,
.navbar-default .navbar-toggle .icon-bar
 {
  color: #FFFFFF;
}

.navbar-default .navbar-toggle {
  border-color: #FFFFFF;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFFFFF;
}

.navbar-default .navbar-nav>li>a:hover {
  color:#FFFFFF;
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 {
  padding: 8px 0;
}

.cl-effect-3::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.1);
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  transform: translateY(10px);
}

.cl-effect-3:hover::after,
.cl-effect-3:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}


/* --------------- Content ---------------------*/
.sidebar {  
  background-color: #FFF;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  padding: 15px;
}

.blog-post {
  padding: 20px;
  background-color: #FFF;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.main-content {
  /*padding-right: 25px;*/
}

.blog-post img {
  max-width: 100%;
}

.blog-post p {
  text-align: justify;
}

.fav_projs h1 {
    text-align: center;
    margin-top: 10px !important;
}

.fav_projs h4 {
    font-family: Roboto;
}

.chart {
  width: 100%;
}

/* ------------Projects-----------------*/
.project {
  padding: 10px;
  background-color: #FFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.projectbox {
  margin-bottom: 20px;
}

.project:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  margin-top: -5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project p {
  margin-top:5px;
}

.project img {
    min-width: 100%;
}

.projectlink {
  color: black;
}



/*----------------Buttons----------------*/

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;

  text-decoration: none;
  color: #FFC107;
  
}

.btn {
  background-color: #FFC107;
  color: #212121;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.btn-spotify {
  background-color: #1DB954;
  color: #FFF;
}

.btn-mixcloud {
  background-color: #1D2D3B;
  color: #FFF;
}

.btn-mixcloud:hover {
  color: #ededed;
}


.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 

/* ------------ Back to Top ---------------------*/

.back-to-top {
  background: none;
  margin: 0;
  position: fixed; 
  bottom: 30px; 
  right: 30px; 
  width: 70px; 
  height: 70px; 
  z-index: 100;
  display: none;
  text-decoration: none;
  color: #ffffff;
  background-color: #FFC107;
  border-radius: 50%;
  text-align: center;
}

.back-to-top i {
 font-size: 30px;
 margin: 0 auto;
 transform: translateY(55%);
}


/* ------------Dashboard--------------*/
textarea {
  max-width:100%;
}