* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
/*background: #ADA996;  *//* fallback for old browsers */
/*background: -webkit-linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.header {
  text-align: center;
  padding: 1%;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex!important;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap!important;
  padding: 0 4px;

}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%!important;
  max-width: 33%!important;
  padding: 0 4px;
}

.column.all img:hover {
		border-width: 2px;
		border-color: gray;
		border-style: inset;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%!important;
    flex: 50%!important;
    max-width: 50%!important;
  }
}

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

.modal-body p, .modal-heading p, .modal-footer p {
  /*text-align: right;*/
  /*font-weight: 600;*/
  font-family: 'Cabin', sans-serif!important;
  padding: 2%;
  margin: 5%;
  text-indent: 12px;
  padding-left: 5%;
  color: #004454;
  font-size: 1.1rem;
}

h2.modal-title {
  font-family: 'Exo';
  font-size: 1.7rem;
  padding-bottom: 2%;
  /*margin-left: 12%;*/
  display: inline;
  font-family: 'Comfortaa';
    font-variant: small-caps;
  text-transform: capitalize;
}

.carousel-inner {
  padding: 0% 0;
  margin: 2% 0;
}

.modal-body {
  /*height: 50vh!important;
  padding-top: 2%!important;*/
}


.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: justify;
  justify-content: center;
  padding: 1em;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  float: none;
  margin: 0;
}

.modal-header.modal-title {
  font-family: 'Comfortaa', cursive;
  font-size: 3rem;
  font-variant: small-caps;
  text-transform: capitalize;
}

h1.modal-title {
  font-family: 'Comfortaa', cursive;
  font-size: 3em;
  margin-left: 4%;
font-variant: small-caps;
  text-transform: capitalize;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 1%;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

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