style.css

/*************** BASICS ***************/

body {
    padding-top: 80px;
    padding-bottom: 0px;
}

p {
    text-align: justify;
}


h1 {
    font-weight: bold;
    text-align: center;
}

h2 {
    font-weight: bold;
    text-align: center;
    margin-top:1em;
    margin-bottom:0.5em;
}

h4 {
    font-weight: bold;
    text-align: center;
}

h3 {
    font-weight: bold;
    padding-top: 60px;
    padding-bottom: 10px;
    margin: -60px 0 0;
}

code {
    background-color: #ffffff;
    color: #000000;
    border: none;
    font-size: 100%;
    font-family: courier;
    margin: 0;
    padding: 0;
}

pre {
    margin-bottom: 1em;
    /* padding: 0; */
}

blockquote p {
    font-size: 14px;
}

video {
  max-width: 100%;
}



/*************** NAVIGATION ***************/

.navbar-brand {
  font-weight: bold;
  font-size:2em;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #7298D8;
    color: white;
}

.dropdown:hover .dropdown-menu {
    display: block;
 }

.sidebar-nav {
    position:fixed;
    width: 15.5em;
    background-color: #f5f5f5;
    border: 1px solid #CBCBCB;
    border-radius: 5px;
    line-height:0.3em;
}

.sidebar-nav ul,
.sidebar-nav li{
    display: block;
}

.nav > li.disabled.nav-header > a {
    color: black;
    cursor: default;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1em;
}

.sidebar-nav li a:hover,
.sidebar-nav li:focus,
.sidebar-nav li:active,
.sidebar-nav li .active,
.open .dropdown-toggle.btn {
  background-color: #7298D8;
   color: white;
}


@media (max-height: 770px) {
    .sidebar-nav {
        position:static;
        width: auto;
    }
}

@media (max-width: 990px) {
    .sidebar-nav {
        position:static;
        width:auto;
        margin-top:3em;
    }
}

@media (max-width: 768px) {
    .sidebar-nav {
        position:static;
        width:auto;
        margin-top:0;
    }
}

/*************** CONTENT ***************/

.thumbnail .caption p {
    text-align: center;
}

 .container {
     margin: 0 auto;
    max-width: 1000px;
}
.container > hr {
    margin: 60px 0;
}


.jumbotron {
    background-color:transparent !important;
    margin: 0 0 0 0;
    text-align: center;
}


.jumbotron h1 {
    font-size: 75pt;
    line-height: 1;
}

.jumbotron p {
    text-align: center;
    font-size: 1.45em;
}

.jumbotron .btn {
    font-weight: bold;
    padding: 14px 24px;
}

.btn {
    color: #7298D8;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn .active,
.open .dropdown-toggle.btn {
  color: white;
  background-color: #7298D8;
}


@media (max-width: 979px) {
    .jumbotron h1 {
        font-size: 50pt;
    }
}

@media (max-width: 500px) {
    .jumbotron h1 {
        font-size:35pt;
    }
}


/*************** MISC ***************/

.black{
    color: black;
}

.fixed-size {
    width: 150px !important;
}

.spaced {
margin-top: 4em;
margin-bottom:1em;
}


/*************** MEDIA ***************/

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px),
only screen and (device-width: 1024px) and (device-height: 600px),
only screen and (width: 1280px) and (orientation: landscape),
only screen and (device-width: 800px),
only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}


/* Audio player*/

/* .playa input[type=range] { */
/*     -webkit-appearance:none; */
/*     -moz-apperance:none; */
/*     background-color:#ddd; */
/*     border: 1px solid #bbb; */
/*     height:.5em; */
/*     border-radius:.5em; */
/*     width:100%; */
/*     margin:-2px; */
/*     padding:0 !important; */
/*     line-height:0; */
/* } */
/* .playa input[type=range]::-webkit-slider-thumb { */
/*     -webkit-appearance:none; */
/*     -moz-apperance:none; */
/*     z-index:3; */
/*     height:1em; */
/*     width:1em; */
/*     border-radius:1em; */
/*     border:1px solid #aaa; */
/*     background-image: -webkit-gradient(linear, */
/*                                        left top, */
/*                                        left bottom, */
/*                                        color-stop(0, #fefefe), */
/*                                        color-stop(0.49, #dddddd), */
/*                                        color-stop(0.51, #d1d1d1), */
/*                                        color-stop(1, #a1a1a1)); */
/* } */

/* .playa .thumbnail  { */
/*     width:96%; */
/*     padding:1.5%; */
/* } */

/* .playa  .btn-group  { */
/*     text-align:center; */
/* } */

/* @media (max-width: 979px) and (min-width: 768px){ */
/*     .col-md-4 .playa, .playa .col-md-4{ */
/*         padding:0; */
/*     } */
/* } */
/* @media (min-width: 768px){ */
/*     .playa .btn-group .btn { */
/*         padding:4px 3px; */
/*         margin:auto; */
/*         display:inline-block; */
/*         float:none; */
/*     } */
/*     .playa .btn-group .col-md-1 { */
/*         width:8%; */
/*     } */
/*     .playa .btn-group .col-md-2 { */
/*         width:16%; */
/*     } */
/*     .playa .btn-group .col-md-3 { */
/*         width:25%; */
/*     } */
/*     .playa .btn-group .col-md-4{ */
/*         width:33%; */
/*     } */
/*     .playa .col-md-2 .btn-group .btn, */
/*     .playa .col-md-1 .btn-group .btn, */
/*     .col-md-2 .playa .btn-group .btn, */
/*     .col-md-1 .playa .btn-group .btn{ */
/*         width:100%; */
/*         display:block; */
/*     } */
/*     .col-md-4 .playa, */
/*     .col-md-3 .playa, */
/*     .col-md-2 .playa, */
/*     .col-md-1 .playa, */
/*     .playa .col-md-4, */
/*     .playa .col-md-3, */
/*     .playa .col-md-2, */
/*     .playa .col-md-1{ */
/*         padding:0; */
/*         overflow:hidden; */
/*     } */
/* } */