/*-- Body Reset --*/
body {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  color: #616971;
}
.btn-outline-dark {
  color: burlywood;
  border-color: burlywood;
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: burlywood;
  border-color: burlywood;
}
.btn-outline-dark:not(:disabled):not(.disabled).active, 
.btn-outline-dark:not(:disabled):not(.disabled):active, 
.show>.btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: burlywood;
  border-color: burlywood;
}
/*-- Modal reset --*/
.modal-header {
  display: block;
}
.modal-body > p {
  padding: 1.1rem;
}
/*============= TOP BAR HEADER =============*/
.top-bar {
  height: 2.8rem;
  padding: .5rem 0;
}
.top-bar :hover {
  color: burlywood;
}
.top-bar a {
  color: #616971;
  text-decoration: none;
}

/*============= NAVIGATION =============*/
.navbar {
  background-color: rgba(224, 208, 186, 0.8);
}
.nav-item {
  padding-right: 2rem;
  /*padding-left: 1.5rem;*/
}
.nav-item a {
  height: auto;
  overflow: hidden;
  font-weight: 600;
}
.nav-item a span{
  display: inline-block;
  position:relative;
  transition: transform 500ms;
  -webkit-transition: -webkit-transform 500ms;
  -moz-transition: transform 500ms; 
}
.nav-item a span:after{
  content: attr(data-hover);
  position: absolute;
  top: -30px;
  left:0;
  transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
.nav-item a:hover span,
.nav-item a:focus span {
	transform: translateY(30px);
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
}
.nav-item :hover {
  color: burlywood;
}

/*============= SECTIONS =============*/
h2 {
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
  margin: 25px 0 50px 0;
}

h2:after {
	left: 50%;
	z-index: 1;
	width: 60px;
	height: 3px;
	content: " ";
	bottom: -5px;
	margin-left: -30px;
	text-align: center;
	position: absolute;
	background: #D4D4D4;
}

.jumbotron{
  padding: 40px 0;
  color: #fff;
  background-color: burlywood;
  border-radius: 0; /*.3rem*/
 
}
.btn-make-wish {
	border: 3px solid #fff;
	padding: 10px 50px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 900;
	color: #fff;
  display: inline-block;
  text-decoration: none;

	-webkit-transition: all .4s ease; /* Safari and Chrome */
	-moz-transition: all .5s ease; /* Firefox */
	-o-transition: all .5s ease; /* IE 9 */
	-ms-transition: all .5s ease; /* Opera */
	transition: all .5s ease;
}

#jumbotron > div > div > div > div.col-md-5.col-lg-4.col-xl-3.pt-4 > a:link {
  text-decoration: none;
}

#jumbotron > div > div > div > div.col-md-5.col-lg-4.col-xl-3.pt-4 > a:visited {
  text-decoration: none;
}

#jumbotron > div > div > div > div.col-md-5.col-lg-4.col-xl-3.pt-4 > a:hover {
  color: burlywood;
  background-color: #fff;	
  text-decoration: none;
}

#jumbotron > div > div > div > div.col-md-5.col-lg-4.col-xl-3.pt-4 > a:active {
  text-decoration: none;
}

/*============= CITY INTRO =============*/
#city-intro > div > div > div:nth-child(2) > ul > h3 {
  margin: 3% 0 3% 0;
}

/*============= CAROUSEL =============*/
.carousel-control-next-icon, .carousel-control-prev-icon {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: burlywood;
}
#carousel-text {
  background-color: #f8f8f8;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
    position: relative;
}
.blockquote-custom {
  position: relative;
  font-size: 18px;
}
.blockquote-custom-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -25px;
  left: 50px;
}
#carouselContent > div > div > div > blockquote > .bg {
  background-color: burlywood;
}
#carouselContent > div > .p-4 {
  padding: 2.3rem!important;
}
#carouselContent {
  height: 380px;
}
@media (max-width: 768px) {
  #carouselContent{
    height: 650px;
  }
}

/*---Change Carousel Transition Speed --*/

/*-- Carousel Content --*/

/*===== FIXED BACKGROUND IMG =====*/

/*-- Emoji Navbar --*/

/*============= RESUME =============*/
#resume img {
  margin: auto;
  padding: 2% 0 4% 0;
}

#resume figcaption{
  margin-bottom: 3%;
}

.pull-quote {
  border-left: solid 3px burlywood;
  margin-left: .9375rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  color: #7f7f7f;
  padding: .9375rem 0 .9375rem 1.875rem;
  display: block;
}

/*============= FOOTER =============*/

#sponsor {
  width: 100%;
  background-color: #383838;
}
#sponsor ul{
  list-style-type: none;
  display: flex;
  margin: 0 auto;
  padding: 0;
}
ul.sponsor li {
  margin: 0 auto;  
}
ul.sponsor img {
margin: 0 auto;
}
@media (max-width: 767.98px) {
  #sponsor ul{
    
    display: block;
    margin: 0 auto;
  }
}
/*============= SOCKET =============*/
.socket {
  background-color: #222222;
}
.socket p {
  margin: 0 auto;
  color: burlywood;
}
.socket > p > a {
  text-decoration: none;
  color: #616971;;
}
.socket > p > a:hover{
  text-decoration: none;
  color: burlywood;;
}

/*============= MEDIA QUERIES =============*/

/* Devices under 1199px (xl) */
@media (max-width: 1199.98px) {

}
/* Devices under 768px (md) */
@media (max-width: 767.98px) {

}


/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

/*-- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/*-- Fixed Background Image --*/
.fixed-background {
  position: relative;
  width: 100%;
  z-index: 1000!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999 !important;
}
.fixed {
  z-index: -999!important;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
ul.server-list li  {
  margin: 3%;
  list-style: none;
}
.server-list >li >svg {
  margin: 0 5px 0 0px;
	color: burlywood;
}
.example {
  margin: 3% 0 1% 0;
  padding: 0%;
  width: 100%;
}
#examples-city {
  background-color: #f8f8f8;
}
#examples-city .example img {
  width: 100%;
}
.city-item {
  position: relative;
}
#city-concept {
  padding: 0%;
}
.city-text {
  text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
  padding: 3%;
}
#city-concept > div > div.row.row-gutter > div > h3 {
  text-align: center;
}
#city-concept > div > div.row.row-gutter-2 > div > h3 {
  text-align: center;
}
.featured-icon {
  margin: 0 0 0 0;
  float: left;
  font-size: 22px;
  border-radius: 5px;
  width: 55px;
  height: 55px;
  text-align: center;
}
.featured-text {
  text-align: left;
  margin-left: 60px;
}
.featured-item {
  height: auto;
}
#city-concept > div > div.row.col-lg-12.text-center.justify-content-center > img {
  padding: 0;
  border: 2px solid;
  border-image-slice: 2%;
  border-image-source: linear-gradient(135deg, #b88b52, #ffc107, #17a2b8, #20c997, #17a2b8, #007bff);
}

#city-concept > div > div.row.row-gutter > div {
  margin: 3% 4% 6% 4%;
}
#city-concept > div > div.row.row-gutter-2 > div {
  margin: 3% 4% 6% 4%;
}
#city-concept > div > div.row.row-gutter > div:nth-child(1) {
  border: 1px solid #b88b52;
  padding: 10px;
  box-shadow: 5px 2px 18px #b88b52;
  border-radius: 5px;
}
#city-concept > div > div.row.row-gutter > div:nth-child(2) {
  border: 1px solid #ffc107;
  padding: 10px;
  box-shadow: 5px 2px 18px #ffc107;
  border-radius: 5px;
}
#city-concept > div > div.row.row-gutter > div:nth-child(3) {
  border: 1px solid #17a2b8;
  padding: 10px;
  box-shadow: 5px 2px 18px  #17a2b8;
  border-radius: 5px;
}
#city-concept > div > div.row.row-gutter-2 > div:nth-child(1) {
  border: 1px solid #20c997;
  padding: 10px;
  box-shadow: 5px 2px 18px  #20c997;
  border-radius: 5px;
}
#city-concept > div > div.row.row-gutter-2 > div:nth-child(2) {
  border: 1px solid #17a2b8;
  padding: 10px;
  box-shadow: 5px 2px 18px  #17a2b8;
  border-radius: 5px;
}
#city-concept > div > div.row.row-gutter-2 > div:nth-child(3) {
  border: 1px solid#007bff;
  padding: 10px;
  box-shadow: 5px 2px 18px  #007bff;
  border-radius: 5px;
}