body {
    font-family: 'Ubuntu', sans-serif;
}
  h1, h2, h3, h4, h5, h6 {
  	font-weight: 800!important;
    font-variant:small-caps!important;
  }

#create{
  text-align:center;
}

#talking_map_id{
  width:30%;
}
  .btn-xl {
  	text-transform: uppercase;
  	padding: 1.5rem 3rem;
  	font-size: .9rem;
  	font-weight: 700;
  	letter-spacing: .1rem
  }
  .bg-black {
  	background-color: #000!important
  }
  .rounded-pill {
  	border-radius: 5rem
  }
  .navbar-custom {
  	padding-top: 1rem;
  	padding-bottom: 1rem;
  	background-color: rgba(0, 0, 0, .7)
  }
  .navbar-custom .navbar-brand {
  	text-transform: uppercase;
  	font-size: 1rem;
  	letter-spacing: .1rem;
  	font-weight: 700
  }
  .navbar-custom .navbar-nav .nav-item .nav-link {
  	text-transform: uppercase;
  	font-size: .8rem;
  	font-weight: 700;
  	letter-spacing: .1rem
  }
  header.masthead {
  	position: relative;
  	overflow: hidden;
  	padding-top: calc(2rem + 55px)!important;
  	padding-bottom: 20px!important;
  	background: linear-gradient(0deg, #217b62 0, #8BC34A 100%);
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-attachment: scroll;
  	background-size: cover
  }
  header.masthead .masthead-content {
  	z-index: 1;
  	position: relative
  }
  header.masthead .masthead-content .masthead-heading {
  	font-size: 4rem
  }
  header.masthead .masthead-content .masthead-subheading {
  	font-size: 2rem
  }
  header.masthead .bg-circle {
  	z-index: 0;
  	position: absolute;
  	border-radius: 100%;
  	background: linear-gradient(0deg, #8BC34A 0, #76bbc3 100%);
  }
  header.masthead .bg-circle-1 {
  	height: 90rem;
  	width: 90rem;
  	bottom: -55rem;
  	left: -55rem
  }
  header.masthead .bg-circle-2 {
  	height: 50rem;
  	width: 50rem;
  	top: -25rem;
  	right: -25rem
  }
  header.masthead .bg-circle-3 {
  	height: 20rem;
  	width: 20rem;
  	bottom: -10rem;
  	right: 5%
  }
  header.masthead .bg-circle-4 {
  	height: 30rem;
  	width: 30rem;
  	top: -5rem;
  	right: 35%
  }
  @media (min-width:992px) {
  	header.masthead {
  		padding-top: calc(10rem + 55px);
  		padding-bottom: 10rem
  	}
  	header.masthead .masthead-content .masthead-heading {
  		font-size: 6rem
  	}
  	header.masthead .masthead-content .masthead-subheading {
  		font-size: 4rem
  	}
  }
  .bg-primary {
  	background-color: #ee0979!important
  }
  .btn-primary {
  	background-color: #ee0979;
  	border-color: #ee0979
  }
  .btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  	background-color: #bd0760!important;
  	border-color: #bd0760!important
  }
  .btn-primary:focus {
  	box-shadow: 0 0 0 .2rem rgba(238, 9, 121, .5)
  }
  .btn-secondary {
  	background-color: #ff6a00;
  	border-color: #ff6a00
  }
  .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
  	background-color: #c50!important;
  	border-color: #c50!important
  }
  .btn-secondary:focus {
  	box-shadow: 0 0 0 .2rem rgba(255, 106, 0, .5)
  }

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

#svgcss{
  position:relative;
}
#svgcss:after{
  content:'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve"><style type="text/css">.bioc-1{fill:#8FBF4B;} .bioc-2{fill:#679B95;} </style>\
<g id="biopama-color-1" class="bioc-1">\
	<polygon points="58.6,37.4 15.9,37.4 0.8,70 69.2,70 	"></polygon>\
</g>\
<g id="biopama-color-2" class="bioc-2">\
	<path d="M35,0C24.8,0,16.6,8.2,16.6,18.4S35,50.2,35,50.2s18.4-21.6,18.4-31.8S45.2,0,35,0z\
		 M35,27.5c-5.6,0-10.1-4.5-10.1-10.1c0-5.6,4.5-10.1,10.1-10.1c5.6,0,10.1,4.5,10.1,10.1C45.1,22.9,40.6,27.5,35,27.5z"></path>\
</g>\
</svg>';
  position:absolute;
  width:70px;
  height:70px;
}

/*Team_page css*/

.team {
	margin-left: 26%;
}

/* Three columns side by side */
.column {
	float: left;
	width: 350px;
	margin-bottom: 16px;
	padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
	.column {
			width: 100%;
			display: block;
	}
}

/* Add some shadows to create a card effect */
.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	align-items: center;
}

/* Some left and right padding inside the container */
.container {
	padding: 0 16px;
}

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

.title {
	color: grey;
}

.button {
	border: none;
	outline: 0;
	display: inline-block;
	padding: 8px;
	color: white;
	background-color: #000;
	text-align: center;
	cursor: pointer;
	width: 100%;
}

.button:hover {
	background-color: #555;
}