/* GLOBAL STYLES */

/* BODY
-------------------------------------------------- */

@font-face {
    font-family: TheDogatsFont;
	src: url('../font/TheDogatsFont-Regular.ttf');
}

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-family: TheDogatsFont;
  background: #01ADDB;
}

section {
  scroll-margin-top: 4rem;
}

/* SCROLLBAR
-------------------------------------------------- */

* {
  scrollbar-color: #FBF13A white;
}


/* NAVBAR BODY
-------------------------------------------------- */

.navbar-dark {
  background: #F43D26;
  font-size: 25px;
  text-shadow: 2px 2px 4px #000000;
  outline: 2px solid black;
}


/* NAVBAR TOGGLER
-------------------------------------------------- */

.navbar-dark .navbar-toggler-icon {
  background-image: url("../images/navbar_toggler.png");
}

.navbar-dark .navbar-toggler {
  border-color: white;
  outline: 1px solid black;
} 

/* DROPDOWN MENU
-------------------------------------------------- */

.navbar-nav > li > .dropdown-menu a:hover { 
  background-color: #FBF13A;
}

.navbar-nav > li > .dropdown-menu a { 
  font-size: 25px;
  color: white;
}

/* MARKETING CONTENT
-------------------------------------------------- */

.marketing .col-lg-4 {
  margin-bottom: 1rem;
  text-align: center;
}

/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* FEATURETTES
------------------------- */

.featurette-divider {
  margin: 4rem 0; /* Space out the Bootstrap <hr> more */
  color: #FFFFFF;
}

.featurette-heading {
  letter-spacing: -.05rem;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  .carousel-caption p {
    margin-bottom: 1rem;
    font-size: 1.50rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 60px;
  }
}

.lead {
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;
  font-size: 25px;
}

.title {
  font-size: 50px;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;
}

.popout { position: absolute !important;}

/* BACK TO TOP BUTTON
-------------------------------------------------- */

#backToTop {
  outline: 1px solid black;
  display: inline-block;
  background-color: #FFFFFF;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  padding:10px;
  margin:10px;
  filter: drop-shadow(2px 4px 8px hsla(0deg, 0%, 0%, 0.5))
}

#backToTop:hover {
  cursor: pointer;
  background-color: #FBF13A;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

/* Styles for the content section */

.content {
  width: 77%;
  margin: 50px auto;
  font-size: 17px;
  color: #FFFFFF;
  line-height: 1.9;
}

@media (min-width: 500px) {
  .content {
    width: 43%;
  }
  #button {
    margin: 30px;
  }
}

.content h1 {
  margin-bottom: -10px;
  color: #FFFFFF;
  line-height: 1.5;
}

.content h3 {
  font-style: italic;
  color: #FFFFFF;
}

/* AVATARS ANIMATION
-------------------------------------------------- */

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.avatar {
	width: 300px;
	height: 300px;
	margin: auto;
	border-radius: 50%;
	animation: float 6s ease-in-out infinite;
}

.avatarImg {
 position: absolute;
 left: 0px;
 height: 100%;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('../images/header/header.jpg') black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}

/* COMMUNITY SECTION
-------------------------------------------------- */

section #services {
  transform: translatez(0);
}
section #services h2 {
  margin: 80px 0px 40px;
  color: #fff;
  font-size: 2.4em;
  text-transform: uppercase;
  text-align: center;
}
section #services li {
  width: 120px;
  height: 120px;
  display: inline-block;
  margin: 20px;
  list-style: none;
}
section #services li div {
  width: 120px;
  height: 120px;
  color: #74d4b3;
  font-size: 3.4em;
  text-align: center;
  line-height: 120px;
  background-color: #fff;
  transition: all 0.5s ease;
  border-radius: 4px;
  outline: 1px solid black;
}
section #services li a {
  color: #6495ED;
}
section #services li div:hover {
  transform: rotate(360deg);
  border-radius: 100px;
  background-color: #FBF13A;
}
section #services li span {
  width: 120px;
  height: 20px;
  display: block;
  padding: 15px 0px;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.2em;
  text-align: center;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
  font-size: 3.5rem;
  }
}

.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.center-cropped {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 175px;
  width: 175px;
}

/* FAN ART CAROUSEL
-------------------------------------------------- */

.MultiCarousel {
	float: left;
	overflow: hidden;
	padding: 15px;
	width: 100%;
	position:relative;
}
.MultiCarousel .MultiCarousel-inner {
	transition: 1s ease all;
	float: left;
}

.MultiCarousel .MultiCarousel-inner .item {
	float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
	text-align: center;
	padding:10px;
	margin:10px;
	cursor: pointer;

}

.MultiCarousel .leftLst, .MultiCarousel .rightLst {
	position:absolute;
	top:calc(50% - 20px);
}
.MultiCarousel .leftLst {
	width: 60px;
	height: 60px;
	left: 8px;
}
.MultiCarousel .rightLst {
	width: 60px;
	height: 60px;
	right: 8px;
}
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over {
	visibility: hidden;
}

.fill-button{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

/* FAN ART BUTTON
-------------------------------------------------- */

.btn-primary {
    background-color: #FFFFFF;
	border: 1px solid black;
}

.btn-primary:hover {
    background-color: #FBF13A;
}

/* ZOOM ANIMATION
-------------------------------------------------- */

.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* BUTTON V2
-------------------------------------------------- */

.btn2 {
	border-radius: 4px;
    font-family: inherit;
    font-size: 20px;
    color: white;
    background: none;
    cursor: pointer;
    padding: 15px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
	text-shadow: 2px 2px 4px #000000;
	box-shadow: 2px 2px 4px #000000;
	border: 2px solid white;
	outline: 2px solid black;
    color: white;
}

.btn2:hover {
    color: white;
}

.btn2::after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.btn2:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FBF13A;
}

.btn2:hover:after, .btn2:active:after {
    width: 100%;
}

/* VALIDATION ICON
-------------------------------------------------- */

.validationIco {
  width: 8%;
}

/* LOADING ICON ANIMATION
-------------------------------------------------- */

.loadingIco {
  width: 8%;
  -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

/* CARD TEXT COLOR
-------------------------------------------------- */

.card {
  color: #004668;
}

/* DROP-SHADOW
-------------------------------------------------- */

.drop-shadow {
  filter: drop-shadow(2px 4px 8px hsla(0deg, 0%, 0%, 0.5))
}

form {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	outline: 1px solid black;
	box-shadow: 2px 2px 4px #000000;
}

label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
	outline: 1px solid black;
}

textarea {
    height: 100px;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: white;
    border: none;
    border-radius: 4px;
    font-size: 20px;
	outline: 1px solid black;
	color: black;
	
}

input[type="submit"]:hover {
    background-color: #FBF13A;
}