body{
	font-family: 'Nunito', sans-serif;
	color: #3b3b3b;
	background-color: #fff;
}

/* Logo of site*/ 
#D {
	color: hsl(355, 80%, 50%);
}

.a {
	color: #03A688;
}

.t {
	color: #BFB41B;
}

#r {
	color: #0460D9;
}

/*Typography*/
/* h1 {
	font-size: 48px;
	line-height: 72px;
}

h2 {
	font-size: 36px;
	line-height: 48px;
}

h3 {
	font-size: 20px;
	line-height: 36px;
	font-weight: 550;
}

h4 {
	font-size: 20px;
	line-height: 36px;
	font-style: italic;
}

p {
	font-size: 1rem; 
	line-height: 24px;
}  */


/** Base and fixed size for all small devices **/
h1 {
	font-size: 36px;
	line-height: 48px;
}
h2 {
	font-size: 28px;
	line-height: 36px;
}
h3 {
	font-size: 22px;
	line-height: 24px;
}
h4 {
	font-size: 22px;
	line-height: 24px;
	font-style: italic;
}
p {
	font-size: 16px; 
	line-height: 24px;
}
/** You can do the same for a maximum size if you wish **/
@media (min-width: 1200px) {
	h1 {
		font-size: 48px;
		line-height: 72px;
	}

	h2 {
		font-size: 36px;
		line-height: 48px;
	}

	h3 {
		font-size: 20px;
		line-height: 36px;
		font-weight: 550;
	}

	h4 {
		font-size: 20px;
		line-height: 36px;
		font-style: italic;
	}

	p {
		font-size: 1rem; 
		line-height: 24px;
	}
}
/* Navbar items */
.navbar {
	height: 88px;
	font-size: 18px;
	line-height: 28px;
}

.navbar-light .navbar-nav .active>.nav-link{
    color: hsl(355, 80%, 50%);
	text-decoration: underline;
	font-weight: 900;
}
/* 
nav {
	background: white;
} */

/* Main items */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

article {
	padding: 8px;
}

.col-sm > h3, .col-sm > h4 {
    text-align: center;
}

.col-sm > h3 {
    padding-top: 8px;
}

.col-sm > img {
    border-radius: 50%;
}

#h2_ourTeam {
    margin-bottom: 30px;
}
.centerh2 {
    text-align: center;
}

/* #Gallery Page */
/* quick reset */
* {
	margin: 0;
	padding: 0;
	border: 0;
  }

.sidebar {
	grid-area: sidebar;
	text-align: center;
    overflow: auto;
}
  
/* relevant styles */
.img__wrap {
	position: relative;
	display: inline-block;
	width: 300px;
}

.img__img {
	vertical-align: bottom;
}

.img__description_layer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #F23847;
	color: #fff;
	visibility: hidden;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	/* transition effect. not necessary */
	transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description_layer {
	visibility: visible;
	opacity: 0.7;
}

.img__description {
	transition: .2s;
	transform: translateY(1em);
	font-size: 16px;
}

.img__wrap:hover .img__description {
	transform: translateY(0);
}

.img__wrap:hover {
	cursor:pointer;
}
.img__wrap:active {
	transform: translateY(4px);
}

.search-container {
	float: none;
	margin: 30px 45px;
	transform: translate(87%);
	text-align: left;
	height: 100%;
	width: 35%;
	border: none;
	border-radius: 8px;
	background-color: white;
}

.search-container input {
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 60px);
	height: 40px;
	min-width: 30%;
	border-radius: 20px;
	padding-left: 10px;
	font-size: 1em;
	outline-width: 0;
} 

.search-container button {
	vertical-align: middle;
	background: white;
	border-left: none;
}

input {
	border: 3px solid #03A688;
}

input:focus {
	box-shadow: 4px 4px 8px hsl(169, 100%, 23%, 0.1);
	border: 3px solid hsl(169, 100%, 23%);
}

.fa-search {
	display: inline-block;
	color:hsla(169,100%, 33%);
	border: 3px solid #03A688;
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

/* #searchArt {
	border-left: none;
} */

.fa-search:active {
	border: 3px solid hsl(169, 100%, 23%);
}

.fa-search:hover {
	background-color: rgb(234, 252, 248, 0.5);
	box-shadow: 4px 4px 8px hsl(169, 100%, 23%, 0.1);
}

#searchArt i {
	padding: 8px;
} 

#searchArt {
	outline: none;
}

/* Scroll to Top button */
#back2Top {
    width: 35px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    transform: rotate(270deg);
    position: fixed;
    bottom: 60px;
    right: 0;
	padding-inline-end: 40px;
    background-color: hsl(white, 100%, 0%);
    color: #03A688;
    font-size: 40px;
    text-decoration: none;
	border: 3px solid #03A688;
	border-radius: 30%;
}
#back2Top:hover {
    background-color: #03A688;
    color: white;
}