/************************
   The Basic Formats
 ************************/
:root {

/* Main BG */
  --apricot: #ffb16d;

/* Article BG */
  --peach: #ffbb80;

/* Other Posts BG, Dropdowns etc */
  --avocado: #87a922;

/* Footer BG, Dropdown Hover, Buttons */
  --olive: #6e750e;

/* Text Black */
  --text-black: #212529;

/* Text White */
  --text-white: #fffbfa;

/* Text Blue */
  --text-blue: #9ff3ff;

/* Text Hover */
  --text-hover: #0056b3;
}

body {
background-color: var(--apricot);
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}
.dropdown-menu {
background-color: var(--avocado);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--text-white);
  background-color: var(--olive);
}
.mylogo {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 5rem;
  text-align: center;
}

h1, h2, h3 {
  font-family: 'Dancing Script', cursive;
}
h1 {
  font-size: 3rem;
  font-weight: 700;
}

h2 {
  font-size: 2.25rem;
  font-weight: 500;
}
h3 {
  font-weight: 500;
}
p {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: 400;
}

figure {
float: right;
height: auto;
padding-left: 1.25rem;
}

figcaption {
  background-image: linear-gradient(var(--peach), var(--avocado) 60%, var(--peach));
  border-radius: 15px;
}

.photocaption {
  max-width: 480px;
  background-image: linear-gradient(var(--peach), var(--avocado) 60%, var(--peach));
  border-radius: 15px;
/*  background-color: var(--avocado); */
  padding-left: 10px;
}
.photocaption-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  max-width: 400px;
  background-image: linear-gradient(var(--peach), var(--avocado) 60%, var(--peach));
  border-radius: 15px;
}
.photocaption-right {
  display: flex;
  justify-content: center;
  align-items: right;
  margin: 0 auto 15px;
  max-width: 400px;
  background-image: linear-gradient(var(--peach), var(--avocado) 60%, var(--peach));
  border-radius: 15px;
}
.photocaption-wide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  max-width: 720px;
  background-image: linear-gradient(var(--peach), var(--avocado) 60%, var(--peach));
  border-radius: 15px;
/*  text-align: center; */
}
.posted {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  text-align: left;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.highlight {
  font-family: 'Vollkorn', serif;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-black);
  border-left: 2px solid var(--avocado);
  padding: 8px 10px 0px;
/*  text-shadow: 1px 1px var(--olive); */
  margin-left: 20px;
}

.quote {
  font-family: 'Vollkorn', serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-black);
  text-shadow: 1px 1px var(--olive);
  margin-left: 20px;
}

blockquote {
  font-family: 'Vollkorn', serif;
  background: var(--apricot);
  border-left: 10px solid var(--avocado);
  margin: 15px 10px;
  padding: 8px 10px 0px;
}

@media all and (max-width: 1050px) {
h1 {
  font-size: 2.75rem;
}
h2 {
  font-size: 2rem;
}
}
@media all and (max-width: 400px) {
.mylogo {
  font-size: 4rem;
}
h1 {
  font-size: 2rem;
  text-align: center;
}
h2 {
  font-size: 1.5rem;
  text-align: center;
}
h3 {
  font-size: 1.25rem;
}
}
/************************
   Main Article
 ************************/
.gi45_content {
  background-color: var(--peach);
  max-width : 70%;
  margin: 0 auto;
}
@media all and (max-width: 800px) {
.gi45_content {
  max-width : 80%;
}
}
@media all and (max-width: 600px) {
.gi45_content {
  max-width : 90%;
}
}
/************************
   Rule Bar
 ************************/
.rulepara {
  border: 2px solid var(--text-black);
  opacity: 0.5;
  border-radius: 5px;	
  clear: both;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/************************
   The Link Buttons
 ************************/
.linktext {
  height: 1rem;
  line-height: 1;
  margin-bottom: 1.5rem;
}
.linktext a {
  text-decoration: none;
  color: var(--text-white);
  padding: 0.3rem 0.5rem 0.25rem 0.5rem; /*top right bottom left */
  background-color: var(--olive);
  border-radius: 0.5rem;
  transition: background-color 0.4s, color 0.4s;
  transition-timing-function: ease-in-out;
  }
@media all and (max-width: 600px) {
.linktext {
  height: 1rem;
  line-height: 1;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}
}
.linktext a:visited {
  color: var(--text-white);
}
.linktext a:hover {
  color: var(--text-blue);
  border-bottom: 1px solid var(--olive);
  background-color: var(--avocado);
}
.linktext a:active {
  background-color: var(--olive); 
}
.linknew {
  cursor: pointer;
  border: 0;
  background: #ee6352;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  z-index: 1;
}
.linknew a {
  text-decoration: none;
  color: var(--text-white);
  padding: 0.3rem 0.5rem 0.25rem 0.5rem; /*top right bottom left */
  background-color: var(--olive);
  border-radius: 0.5rem;
  }
.linknew a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--avocado);
  z-index: -1;
  transition: transform 200ms ease-in;
  transform: scaleX(0);
  transform-origin: right;
}

.linknew a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.foottext {
  font-family: 'Dancing Script', cursive;
  font-size: 1.75rem;
  color: var(--text-white);
  margin-top: 10px;
  text-align: center;
}
.foottext a {
  text-decoration: none;
  color: var(--text-white);
  }
.foottext a:visited {
  color: var(--text-white);
}
.foottext a:hover {
  color: var(--text-hover);
  text-decoration: underline;
}
// .foottext a:active {
//   background-color: var(--text-blue);
// }
@media all and (max-width: 600px) {
.foottext {
  line-height: 1;
  font-size: 1rem;
  margin-top: 15px;
}
}

.link-btn {
  border: 0;
  background: var(--olive);
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem 0.25rem 0.5rem; /*top right bottom left */
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.link-btn a {
  text-decoration: none;
  color: var(--text-white);
  transition: background-color 400ms, color 0.4s;
  transition-timing-function: ease-in-out;
  }
.link-btn a:visited {
  color: var(--text-white);
}
.link-btn a:hover {
  color: var(--text-hover);
  border-bottom: 1px solid var(--olive);
}
.link-btn a:active {
  background-color: var(--olive); 
}
.link-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--avocado);
  border-radius: 0.5rem;
  z-index: -1;
  transition: transform 400ms ease-in;
  transform: scaleX(0);
  transform-origin: right;
}

.link-btn:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/************************
   The Carousel
 ************************/
.carousel {
  margin: 0.25rem 0;
}
.carousel-inner img {
    width: 100%;
    height: 100%;
  }
.carousel-indicators li {
    background-color: var(--apricot);
}
/************************
   Category Search Title
 ************************/
.article-posts {
  background-color: var(--avocado);
  margin-bottom: 0.25rem;
}
/************************
   Other Posts and FootBar
 ************************/
.footsquare img{
  max-width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-width: 0.4rem;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--olive);
  transition: border-color 0.5s;
  transition-timing-function: ease-in-out;
}
.footsquare img:hover {
  border-color: var(--text-hover);
}
@media all and (max-width: 500px) {
.footsquare img{
  max-width: 25%;
  border-width: 0.2rem;
  height: auto;
  margin-top: 10px;
}
.foottext {
  margin-top: 5px;
}
}

.footbar{
  font-family: 'Dancing Script', cursive;
  font-size: 1rem;
  color: var(--text-white);
  text-align: center;
  background-color: var(--olive);
  padding: 1rem 0
}
.other-posts {
  background-color: var(--avocado);
  padding: 0.5rem 0;
}
.other-title {
  margin-top: 0.25rem;
}

/************************
   Photo Layouts
 ************************/
.landscape{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.landscape + p{
padding-top: 5px;
}
.sideside {
  height: auto;
  margin: 0 auto;
}
.sideside + p{
padding-top: 5px;
}
.vert-side{
  max-width: 100%;
  height: auto; 
  margin: 0 auto;
  display : block;
}
.landleft{
max-width: 100%; height: auto; margin-right: 15px;
}
.landleft + p{
padding-top: 5px;
}
.vert-center{
  display : block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.vert-center + p{
padding-top: 5px;
}

.vert-left{
  float: left; max-width: 100%; height: auto; padding-bottom: 1rem; margin-right: 15px;
}
.vert-right{
  float: right; max-width: 100%; height: auto; padding-bottom: 1rem; margin-left: 15px;
}
@media all and (max-width: 1100px) {
.landleft {
  float: none;
}
}
@media all and (max-width: 800px) {
.vert-right {
  max-width: 280px;
  height: auto;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}
}
@media all and (max-width: 420px) {
.vert-right {
  float: none;
  max-width: 100%;
  height: auto;
  padding-left: 0;
  padding-bottom: 0.5rem;
  margin-left: 0;
}
}
@media all and (max-width: 800px) {
.vert-left {
  max-width: 280px;
  height: auto;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}
}
@media all and (max-width: 420px) {
.vert-left, landleft {
  float: none;
  max-width: 100%;
  height: auto;
  padding-left: 0;
  padding-bottom: 0.5rem;
}
}
/************************
   The Galleries
 ************************/
.gallery-layout {
  max-width: 800px;
  height: auto;
  margin-bottom: 20px;
}
.gallery-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--olive);
  text-shadow: 1px 1px var(--avocado);
}
/************************
   Navigate Buttons
 ************************/
.bootnavigate {
  padding: 2px;
}
.bootnavbtn {
  color: var(--text-white);
  background-color: var(--avocado);
  border-radius: 10px;
  border: 2px solid var(--text-black);
  min-width: 4rem;
  text-align: center;
  padding: 2px;
  transition-duration: 0.4s;
}
.bootnavbtn a {
  border-color: var(--text-blue);
}
.bootnavbtn a:hover {
  background-color: var(--olive);
  border: 2px solid var(--text-blue);
}

.bootnavbi {
  color: var(--text-blue);
  font-size: 1.25rem;
}
.bootnavbi:hover {
  color: var(--text-hover);
  font-size: 1.25rem;
}

/************************
   Slimbox Fix
 ************************/
#lbCenter, #lbCenter *,
#lbBottomContainer, #lbBottomContainer *{
-moz-box-sizing:content-box!important;
-webkit-box-sizing:content-box!important;
-ms-box-sizing:content-box!important;
box-sizing:content-box!important;
}