html {
  background:white;
}

body {
  background:white;
  margin:0;
}

a {
  color: black;
}
.container {
  background:white;
}

#offcanvasMainMenu {
  background:white;
}

#offcanvasMainMenuLabel {
  color: #8e7a5e;
}

.offcanvas-link {
  color: black;
  text-decoration: none;
}

.offcanvas-link:hover {
  color: #8e7a5e;
  text-decoration: none;
}

.offcanvas-link-card {
  background:transparent;
  padding: 14px;
  border: solid #3c457c 1px;
  border-radius: 3px;
  margin: 2px;
}

.offcanvas-link-card:hover {
  background:#d0daf7;
  padding: 7  px;
  cursor: pointer;
  color: #3c457c;
}

.offcanvas-link-card-active {
  background:#d0daf7;
  padding: 14px;
  border: solid #3c457c 1px;
  border-radius: 3px;
  margin: 2px;
  color: #3c457c;
}


#offcanvasDoctrine {
  background:#f5f3f3;
}

#offcanvasDoctrineLabel {
  color: #8e7a5e;
}

.doctrine-link {
  color: black;
  text-decoration: none;
}

.doctrine-link:hover {
  color: #8e7a5e;
  text-decoration: none;
}

.doctrine-link-card {
  background:transparent;
  padding: 14px;
  border: solid #3c457c 1px;
  border-radius: 3px;
  margin: 2px;
}

.doctrine-link-card:hover {
  background:#d0daf7;
  padding: 7  px;
  cursor: pointer;
  color: #3c457c;
}

.doctrine-link-card-active {
  background:#d0daf7;
  padding: 14px;
  border: solid #3c457c 1px;
  border-radius: 3px;
  margin: 2px;
  color: #3c457c;
}


.navigation {
  background: #fcfaf9;
}

.nav-links {
  color: #6256fd;
  text-decoration: none;
}

.nav-links:hover {
  color: #a51a18;
}

.nav-links.active {
  color: #a51a18;
}

h1, h2, h3 {
  color: #2d1a0b;
}

.footer {
  background: white;
}

.footer-header {
  color: #23507a;
}

.footer-link {
  color: #1a1c44;
}

.footer-link:hover {
  color: #6c2e16;
}


ul {
  margin: 0;
}


.content-section {
  background: #fcfaf9;;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 21px;
}

.privy-form .text-muted {
  margin-bottom: 20px;
  border: none;
}

.privy-form li {
  padding: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: none;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
  color: #2d1a0b;
}


.flashcontainer {
	z-index: -1;
	cursor:pointer;
	position:relative;
	background-color: #ececec;
	width:550px;
	height: 400px;
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
  border-radius: 50px;
  background: linear-gradient(225deg, #e3d4d4, #fffbfb);
  box-shadow:  -20px 20px 60px #d6c8c8,
               20px -20px 60px #ffffff;
}

.flashcard {
	cursor:pointer;
	display:flex;
	align-items:center;
	position:relative;
	background:transparent;
	width: 95%;
	height: 95%;
	z-index:0;
	visibility:hidden;
	position:absolute;
}

.active {visibility:visible; z-index:5}

.text {
	width:98%;
	word-break:break-all;
	font-family: Courier;
	font-weight: bolder;
	font-size: 1.3em;
  color: black;
}

* {transition: all 1s ease-in-out;}

.flashcontainer.ans,
.flashcontainer.ans .flashcard
{transform:rotatey(180deg);}

.plus-sign {
  color: green;
}

.pencil {
  color: #d48302;
}

.scale {
  color: #ecc86a;
}

.gavel {
  color: #ecc86a;
}

.shield {
  color: #ecc86a;
}

.brush {
  color: #ecc86a;
}

.case {
  color: #ecc86a;
}

.arrow {
  color:#6c2e16;
}

.classnote {
  color: #ecc86a;
}

.btn-primary:not(:disabled):not(.disabled) {
  color: #fff;
  background: #50a6c0;
  border: #50a6c0;
}

.btn-primary:not(:disabled):not(.disabled):hover {
  box-shadow: .5px .5px 1px gray, 0 0 10px gray, 0 0 2px gray;
  background: #50a6c0;
}

.text-pop {
  color: #50a6c0;
}

.btn-danger:not(:disabled):not(.disabled) {
  color: #fff;
  background: red;
}

.btn-danger:not(:disabled):not(.disabled):hover {
  box-shadow: .5px .5px 1px red, 0 0 10px darkred, 0 0 2px red;
}

.btn-secondary:not(:disabled):not(.disabled) {
  color: #fff;
  background: gray;
}

.btn-secondary:not(:disabled):not(.disabled):hover {
  box-shadow: .5px .5px 1px black, 0 0 10px black, 0 0 2px darkgray;
}

.header {
  position:relative;
  text-align:center;
  background: #1c456c;
  color:white;
}


.logo {
  width:50px;
  fill:white;
  padding-right:10px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:4vh;
  width:100%;
  margin: 0;
  padding: 0;

}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:right;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: #fcfaf9;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}


/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

/*landing hero*/
.hero-section .hero-img-slide {
  min-width: 2000px;
  height: 800px;
}
.hero-section .hero-img-slide .banner-img-1 {
  height: 790px;
  animation: 35s linear 0s infinite normal none running slideup;
}
.hero-section .hero-img-slide .banner-img-2 {
  height: 790px;
  animation: 35s linear 0s infinite normal none running slideDown;
}

@keyframes slideup {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  100% {
    transform: translate3d(0px, -100%, 0px);
  }
}
@keyframes slideDown {
  0% {
    transform: translate3d(0px, -100%, 0px);
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}
@keyframes slide {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  100% {
    transform: translate3d(-100%, 0px, 0px);
  }
}
.sliding-wrapper .slide-background .slide {
  animation: 45s linear 0s infinite normal none running slide;
}

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

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