/* COLORS 
Dark dark grey: rgba(24,27,33,1)
Dark grey: rgba(50,59,75,1)
Grey: rgba(82,97,119,1)
Light grey: rgba (221,236,246,1)
red: rgba (160,25,60,1)
*/

/* global styling */
body {
  margin-top: 50px;
  font-size: 16px;
  line-height: 1.6em;
  font-family: "Open Sans", sans-serif;
  position: relative;
  }

h1, h2 {
  font-family: "Bitter", serif; }

h1 {
  color: white !important;
  text-shadow: 2px 2px #000000;
  font-size: 2em !important; }

h2 {
  color:rgba(50,59,75,1);
  font-size: 1.5em; }

h3 {
  color: #7c1b1b;
  font-size: 1.5em;
  font-weight: 800; }

h4 {
  font-weight: 800;
  font-size: 1em;
  color: #aba81e; }

header .jumbotron {
  background: url(../images/artley-academie_28.jpg) no-repeat center center;
  background-size: cover;
  height: 500px; 
  }
header img {
  height: 50px; }

.btn {
  background:rgba(50,59,75,1);
  color: white; }
  .btn:hover, .btn:active {
    background: #7c1b1b;
    color: white; }

/* navigation */
nav.navbar-inverse {
  background-color: rgba(50,59,75,1);
  border: none; }
nav.navbar-inverse a {
    color: white; }
nav.navbar-inverse li.active > a, nav.navbar-inverse li.active > a:focus, nav.navbar-inverse li.active > a:hover {
    color: #fff;
    background-color: #080808 !important; }
nav.navbar-inverse .navbar-brand {
    background: url("../images/lgArtley_general.png") no-repeat center center;
    background-size: contain;
    text-indent: -999px;
    width: 230px;
    height: 30px;
    margin: 10px 0; }

/* gastverblijven */
.article {
  margin-bottom: 2em; }

/* contact */
#contact {
  background: #f0f5f5;
  padding: 2em 0; }


/* image gallery */
#links a, #links2 a {
  display: block;
  width: 50%;
  height: 120px;
  float: left;
  overflow: hidden; }
#links a img, #links2 a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #links a img.horz, #links2 a img.horz {
      width: auto;
      height: 100%; }

/* Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap */
      
/* Small devices (landscape phones, 576px and up)*/
      @media (min-width: 576px) { ... }
      
/* Medium devices (tablets, 768px and up) */
      @media (min-width: 768px) { 
        h1 {
          font-size: 3em !important; }
        
        h2 {
          font-size: 2em; }
        header img {
            height: 150px; }
        #links a, #links2 a {
            width: 25%;}

       }
      
/* Large devices (desktops, 992px and up) */
      @media (min-width: 992px) { ... }
      
/* Extra large devices (large desktops, 1200px and up) */
      @media (min-width: 1200px) { ... }