@media only screen and (max-width:940px){ /* Tablets*/ 
    h1{
       font-size:20px;
      }

      .s1{
       font-size:12px;
      }

      img#cfc {
               max-width: 200px;
               margin: 0 auto; 
              }
    }

@media (min-width: 768px) {

  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

.s1{ background-color:black; height: 30px; color:white; }

.logo2 { width: 100%; margin-left: 60px; }
.logo2 img {
  float: left;
  width: 100px;
  height: 80px;
  background: #555;
}

.logo2 h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

/* NAV BAR */
  .navbar-dark .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: white;
    color: dodgerblue;
   }
    .navbar-dark .navbar-toggle .icon-bar{
              background-color: white; 
                /* Changes regular toggle color */
    }

    #nav a.selected:link, a.selected:visited{
       color: yellow;
    }

    .navbar{border:0;border-radius:0;}

    ul.nav{border-right:1px solid #84B6D0;}

    ul.nav li a{border-left:1px solid #84B6D0;color:#fff; }

    /* height of nav bar */
    .navbar-nav > li > a, .navbar-brand {
       padding-top:5px !important; padding-bottom:0 !important;
       height: 34px;
      }
    .navbar {min-height:34px !important;}

    .navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
     }
/* end of NAV BAR */


* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: white;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: lightgreen;
  color: black;
}

.header a.active {
  background-color: white;
  color: white;
}

.header-right {
  float: left;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.active{ color:pink; }

@media only screen and (min-width: 60em)
.logo1, .logo2, .logo17 {
    background-position: left 0px;
}

@media only screen and (min-width: 45em)
.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17 {
    background-position: left -300px;
}

@media only screen and (min-width: 28em)
.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17 {
    background-position: left -600px;
}

@media only screen and (min-width: 15em)
.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17 {
    background-position: left -900px;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  color: white;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #2c5fb3;
  text-align: center;
}


* {
    box-sizing: border-box;
}



/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 15px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .column {
        width: 100%;
    }
}

.flexcontainer {
     display:flex;
     justify-content: space-between;
     flex-wrap: wrap;

}   

/* 11/08/2018 */
.mySlides {display:none;}
     /* Container for flexboxes */


     div.polaroid {
  
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.c1 {
  text-align: center;
  padding: 10px 20px;
}

.fitim{ 
    max-width: 100%;
    height: auto;
 } 

 .mh1 div {
             height: 5vh; /* 30% of viewport height*/
             background-color: black; 
           }

       .mh2{
                height: 10vw; /* 30% of viewport height*/
            }

        .r2{
                height: 10vw; /* 30% of viewport height*/
            }