body {
  background-color: white;
  color: black;
  margin: 0;
}
    
.pg-header {
  height: 6rem;
  background: rgb(0,128,128);
  background: linear-gradient(0deg, rgba(0,128,128,1) 0%, rgba(78,41,93,1) 100%);
}

.logo {
  width: auto;
  height: 8rem;
  padding: 1rem;
}

.navigation {
  color: #E2991C;
  font-family: 'Conv_Samarkan',Sans-Serif;
  font-size: 1.5rem;
  padding: 1rem;
}

.navigation a {
  color: #E2991C;
}

.banner {
  height: 6rem;
	background-image: url('../pictures/front-page-banner-3.png');
	background-size: cover;
  background-position: center;
  /* background-repeat: no-repeat; */
}

.content {
  margin: 1rem;
}


a .social-icon-square,
a .social-icon-rounded,
a .social-icon-circle {
  font-size: 1.5em;
  border: solid white;
  border-width: 2px;
  color: white;
  line-height: 1.5em;
  width: 1.7em;
  height: 1.7em;
  text-align: center;
  display: inline-block;
  transition: 0.5s;
  vertical-align: middle;
  opacity: 1;
}

a .social-icon-square {
  border-radius: 0%;
}

a .social-icon-rounded {
  border-radius: 20%;
}

a .social-icon-circle {
  border-radius: 50%;
}

a .fa-envelope-o.social-icon-square:hover,
a .fa-envelope-o.social-icon-rounded:hover,
a .fa-envelope-o.social-icon-circle:hover,
a .fa-facebook.social-icon-square:hover,
a .fa-facebook.social-icon-rounded:hover,
a .fa-facebook.social-icon-circle:hover,
a .fa-instagram.social-icon-square:hover,
a .fa-instagram.social-icon-rounded:hover,
a .fa-instagram.social-icon-circle:hover {
  color: #FFF5EE;
  border-color: #FFF5EE;
  opacity: 1;
}

a .fa-envelope-o.social-icon-square,
a .fa-envelope-o.social-icon-rounded,
a .fa-envelope-o.social-icon-circle {
  color: #333366;
  border-color: #333366;
}

a .fa-facebook.social-icon-square,
a .fa-facebook.social-icon-rounded,
a .fa-facebook.social-icon-circle {
  color: #3B5998;
  border-color: #3B5998;
}

a .fa-instagram.social-icon-square,
a .fa-instagram.social-icon-rounded,
a .fa-instagram.social-icon-circle {
  color: #cd486b;
  border-color: #cd486b;
}


/* Custom Navbar BEGIN */

.navbar-custom {
  /* background-color: #ff5500; */
  /* background: transparent; */
  background: rgb(0,128,128);
  background: linear-gradient(0deg, rgba(0,128,128,1) 0%, rgba(78,41,93,1) 100%);
  font-family: 'Conv_Samarkan',Sans-Serif;
  font-size: 1.5rem;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: rgba(226,153,28);
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
  color: rgba(226,153,28);
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: #ffffff;
}

/* custom hamburger/toggler border */
.custom-toggler.navbar-toggler { 
  border-color: rgba(226,153,28);
} 

/* custom hamburger/toggler icon (color) */
.custom-toggler .navbar-toggler-icon { 
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(226,153,28, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
} 

/* Custom Navbar END */


/* Footer BEGIN */

.footer {
	background-color: #BDBDBD;
	color: #2E2E2E;
	font-size: .8rem;
}

.footer p {
	font-size: .7rem;
}

.footer h5 {
	font-weight: 800;
  font-size: 1rem;
}

.footer .social-icon {
  font-size: 1.5rem;
  margin-top: 2px;
  margin-bottom: 2px;
}

.footer a {
  color: #125688;
}

.footer i:hover {
  opacity: .6;
}

.w-60 {
	width: 60%!important;
}

.h-30 {
	height: 30%!important;
}

.w-40 {
	width: 40%!important;
}

/* Footer END */


/* Responsive Code for non-mobile devices BEGIN */

@media (min-width: 576px) {
  .pg-header {
    height: 8rem;
  }
  .logo {
    height: 9rem;
  }
  .navigation,
  .navbar-custom {
    font-size: 1.5rem;
  }
  .banner{
    height: 10rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .pg-header {
    height: 10rem;
  } 
  .logo {
    height: 10rem;
  }
  .navigation,
  .navbar-custom {
    font-size: 2rem;
  }
  .banner{
    height: 12rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .pg-header {
    height: 12rem;
  }
  .logo {
    height: 12rem;
  }
  .navigation,
  .navbar-custom {
    font-size: 2.5rem;
  }
  .banner{
    height: 16rem;
  }
}

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

}

/* Responsive Code for non-mobile devices END */