html {
    scroll-behavior: smooth;
}

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}

body {
  font-family: 'Oxygen', sans-serif;
  color:  rgba(0,0,0,0.8);
  letter-spacing: 0.025em;
}

/*.overflowWrap {
  position: relative;
  overflow-x: hidden;
}*/

.navbar {
	padding: 1rem 1rem;
}

.navbar-brand {
	font-family: 'Pragati Narrow';
    font-weight: 700;
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: 0.75em;
    color: #001f3f;
    text-align:  center;
    /*padding-right: 15px;
    padding-left: 15px;*/
}

.navbox {
	font-family: 'Pragati Narrow';
	font-size: 1.15em;
    vertical-align: middle;
    margin-top: 0.75%;
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

.navbox a {
	color: #001f3f;
}

.navbox a:hover {
	text-shadow: 5px 2px yellow;
	text-decoration: none;
}

.navbox a.selected {
	text-shadow: 5px 2px yellow;
	border-width: 0px 0px 1px 0px;
	border-style: double;
	border-color: coral;
}

.navFlex {
  flex-grow:  1;
}

span.skyblue {
	color: skyblue;
}

span.coral {
	color: coral;
}

#offcanvasNavbar {
  background: rgb(254,144,175);
  background: linear-gradient(0deg, rgba(254,144,175,1) 0%, rgba(198,234,141,1) 50%, rgba(135,206,235,1) 100%);
}

.offcanvas-title {
  font-family: 'Pragati Narrow';
    font-weight: 700;
    font-size: 1.25em;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: coral;
    text-align:  center;
}

.offcanvas .dropdown-menu {
  background: skyblue;
  border: 1px solid rgba(198,234,141,1);
  border-radius: 0;
}

.offcanvas .dropdown-menu .dropdown-item {
  background: skyblue;
  transition: background 0.3s ease-in-out;
}

.offcanvas .dropdown-menu .dropdown-item:hover {
  background:  rgba(198,234,141,1);
}


nav {
	padding:  3% 0 0 0;
}

.hamburg {
  margin-top: -7px;
}

.deskNav .nav-link {
    text-transform: uppercase;
    font-family: 'Pragati Narrow';
    letter-spacing: 0.1em;
    border-bottom: 1px solid skyblue;
    color: rgba(0,0,0,0.8);
}

.sideNav .nav-link {
    text-transform: uppercase;
    font-family: 'Pragati Narrow';
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.8);
}

.artistBox1 {
    box-shadow: 5px 5px 8px lightgray;
    padding: 5% 0 0 0;
    margin-bottom: 2%;
}

.artistBox {
    box-shadow: 5px 5px 8px lightgray;
    padding: 1% 0;
    margin-bottom: 2%;
    overflow: hidden;
}

.mobileDetails {
  display:  none;
}

h4 {
  text-decoration:  none;
  font-size: 1.25em;
  color:  rgba(0,0,0,0.8);
  font-family: 'Lekton';
  letter-spacing: 0.125em;
  font-weight: 700;
  text-transform: uppercase;
}

h4 a {
  text-decoration:  none;
  color:  rgba(0,0,0,0.8);
  border-bottom: 1px solid lightgray;
  transition:  all 0.3s ease-in-out;
}

h4 a:hover {
  color:  lightcoral;
  background:  lightgray;
}

a img {
  opacity: 1;
  transition:  opacity 0.2s ease-in-out;
}

a img:hover {
  opacity:  0.8;
}

.artist {
	padding:  3% 3% 1% 3%;
  background:  white;
}

.artist2 {
  padding:  3%;
}

.title a, .titleM a {
	text-decoration:  none;
	font-size: 1em;
	color:  darkslategrey;
	font-family: 'Lekton';
  letter-spacing: 0.125em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid lightgray;
  /*padding:  5px;*/
  word-wrap: break-word;
  background:  transparent;
  transition:  all 0.3s ease-in-out;
}

.title a:hover, .titleM a:hover {
  color:  lightcoral;
  background:  lightgray;
}

.lekton {
  text-decoration:  none;
  font-size: 1em;
  color:  darkslategrey;
  font-family: 'Lekton';
  letter-spacing: 0.125em;
  font-weight: 700;
  text-transform: uppercase;
  padding:  5px;
}

.why {
	padding:  2% 5%;
  display:  none;
}

img {
  padding-bottom:  5%;
}

.city {
  text-decoration:  none;
  font-size: 1em;
  color:  darkslategrey;
  font-family: 'Oxygen';
  letter-spacing: 0.025em;
  font-weight: 400;
  text-transform: capitalize;
}

.medium {
  text-decoration:  none;
  font-size: 1em;
  color:  darkslategrey;
  letter-spacing: 0.025em;
  font-weight: 400;
  text-transform: capitalize;
}

.fa-brands {
  text-decoration:  none;
  font-size: 1em;
  color:  lightcoral;
}

.fa-brands:hover {
  color:  darkslategrey;
}

.vidBg {
  background: black;
  padding: 5%;
}

.aboutBg1 {
  background-image: url(../images/palm6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 1000px;
  /*background: rgb(254,144,175);
  background: linear-gradient(0deg, rgba(254,144,175,1) 0%, rgba(198,234,141,1) 50%, rgba(135,206,235,1) 100%);*/
}

.aboutBg {
  /*background-image: url(../images/palm6.jpg);*/
  background-image: url(../images/z_boringart.webp);
    height: 200px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aboutBg p {
  background:  white;
  color:  black;
}

.galleries h1 {
  font-size:  5rem;
  margin-bottom:  3%;
}

.galleries h2 {
  font-size:  4rem;
  margin-bottom:  3%;
}

.mark2 {
  background:  #cdeeff;
}

.palm1 {
  background-image: url("../images/palm1.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm2 {
  background-image: url("../images/palm2.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm3 {
  background-image: url("../images/palm3.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm4 {
  background-image: url("../images/palm4.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm5 {
  background-image: url("../images/palm5.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm6 {
  background-image: url("../images/palm6.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm7 {
  background-image: url("../images/palm7.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm8 {
  background-image: url("../images/palm8.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm9 {
  background-image: url("../images/palm9.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm10 {
  background-image: url("../images/palm10.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.palm11 {
  background-image: url("../images/palm11.jpg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  height: 1000px;
}

.outer {
  position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    background: white;
    padding:  3%;

}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    background: rgba(255,255,255,0.9);
    padding: 3%;
    box-shadow: 5px 5px 8px lightgray;
}

a.news {
  text-decoration:  none;
  /*font-size: 1.25em;*/
  color:  rgba(0,0,0,0.8);
  font-family: 'Lekton';
  letter-spacing: 0.125em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid lightgray;
  transition:  all 0.3s ease-in-out;
}

a.news:hover {
  color:  lightcoral;
  background:  lightgray;
}


@media screen and (min-width: 769px) and (max-width: 900px) {
  .galleries h1 {
  font-size:  4rem;
}

.galleries h2 {
  font-size:  3rem;
}
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  h4 {
    font-size:  1em;
  }
  p {
    font-size: 0.8em;
  }
  .medium, .city {
    font-size: 0.8em;
  }
}


@media screen and (max-width: 768px) {
  .deskNav {
    display: none;
  }
  .navbar-brand {
    font-size:  1em;
  }
  .city, .medium {
    display:  none;
  }
  .artist {
    padding: 0;
    background:  transparent;
  }
  .artist2 {
  margin-bottom: 20%;
  }
  .fixed-top {
  top: 25px;
  }
  .artistBox {
    box-shadow: 0px 4px 6px lightgray;
    padding: 2%;
    margin-bottom: 5%;
  }
  h4 {
    font-size: 1em;
  }
  .title {
    margin-bottom: 0.25em;
  }
  .titleM {
    font-family: 'Pragati Narrow';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    font-size: 0.9em;
  }
  .title a, .titleM a {
    font-size: 0.85em;
    word-wrap: break-word;
  }
   .lekton {
    font-size: 0.9em;
    word-wrap: break-word;
  }
  .bio {
    font-size: 0.8em;
    margin-bottom:  5px;
  }
  .mobileDetails {
    display:  block;
    margin-top: 2%;
  }
    .galleries h1 {
  font-size:  2.25rem;
}

.galleries h2 {
  font-size:  1.5rem;
}

.aboutBg1 {
  min-height: 300px;
}
.outer {
    width: 95%;
    background: rgba(255,255,255,0.9);
}

.inner {
    width: 95%;
    background: rgba(255,255,255,0.9);
}
.palm1, .palm2, .palm3, .palm4, .palm5, .palm6, .palm7, .palm8, .palm9, .palm10, .palm11 {
  height: 800px;
}

}