h1, .jumbotron {
	text-align: center;
	font-family: 'Amatic SC', cursive;
  color: black;
  text-emphasis: bold;
  
 
}

.jumbotron {
   color: black;
   text-emphasis: bold; 
   margin: 80px; 
   height: 400px; 
}

body {
	font-family: font-family: 'Josefin Sans', sans-serif;
  text-align: center;
  text-emphasis: bold;
  font-size: 20px;
}

img {
	  width: 400px;
    height: 400px;
    align-content: center; 
}

.btn { 
  color: black;
  background-color: greenyellow; 
  height: 40px; 
  text-emphasis: bold; 
  border-color: #FFFFFF; 
 
} 
 
.btn:hover, 
.btn:focus, 
.btn:active, 
.btn.active, 
.open .dropdown-toggle.btn { 
  color: #ffffff; 
  background-color: #000000; 
  border-color: #FFFFFF; 
} 
 
.btn:active, 
.btn.active, 
.open .dropdown-toggle.btn { 
  background-image: none; 
} 
 
.btn.disabled, 
.btn[disabled], 
fieldset[disabled] .btn, 
.btn.disabled:hover, 
.btn[disabled]:hover, 
fieldset[disabled] .btn:hover, 
.btn.disabled:focus, 
.btn[disabled]:focus, 
fieldset[disabled] .btn:focus, 
.btn.disabled:active, 
.btn[disabled]:active, 
fieldset[disabled] .btn:active, 
.btn.disabled.active, 
.btn[disabled].active, 
fieldset[disabled] .btn.active { 
  background-color: #B8A351; 
  border-color: #FFFFFF; 
} 
 
.btn .badge { 
  color: greenyellow; 
  background-color: #ffffff; 
}
.transbox{
    color: black;
    text-emphasis: bold;
    text-align: center; 
    font-size: 20px;
}
div.transbox {
    margin: 80px;
    background-color: #ffffff;
    /*border: 1px solid black;*/
    opacity: 11;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    
  }
  
  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
        
    }
    [class="transbox"]{
      width: 100%; 
      
      
      
    }
    
    h1 {
      width: 100%; 
    }
    div {
      margin: 0 auto;
      align-content: center; 

    }
    img {
      align-content: center; 
    }
    div.transbox {
      margin: auto;
      background-color: #ffffff;
      /*border: 1px solid black;*/
      opacity: 11;
      filter: alpha(opacity=60); /* For IE8 and earlier */
      
    }
    
    div.transbox p {
      margin: auto;
      font-weight: bold;
      color: #000000;
    }
    img{
      width: 80px;
      height: 80px;
    }
    .jumbotron {
      height: 300px; 
      
    }

  }
  @media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    
    h1 {
      margin: auto; 
      align-content: center; 
      float: center; 
    }
    
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
   
}