@import url('https://fonts.googleapis.com/css2?family=Rochester&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); 
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/icon?family=Oleo+Script+Swash+Caps');


#snackbar{
visibility: hidden;
width: 100%;
background: white;
color: black;
text-align: center;
}

.hiddenmenu {
	display: none;
}

.flex {
	width:100%;
	display:flex;
	justify-content:center;
	flex-flow: wrap;
	padding-bottom: 30px;
}

.textImg {
	    text-align: center;
}

.textImg > img {
	height: 200px;
}

.yayi {
    	width: 100%;
    	font-family: 'Poppins', sans-serif;
    	text-align: center;
    	color: black;
}

.yayi > a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.boshowicon {
        width: 117px;
        padding: 5px;
        border-radius: 11px;
}

.boshowicon.home {
	/*position: absolute;
   	bottom: 0;
    	right: 0;*/
    	filter: grayscale(0.95) brightness(5);
}

.customAlert {
    position: fixed;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    width: 100vw;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, #646464, #000000a6);
}


.hiddenlink {
	text-decoration: none;
    	color: inherit;
}

.floatSpan {
	    padding: 5px;
    margin: 2px;
    color: white;
    border: 1px solid #ffffff;
    font-size: 15px;
    background: none;
    cursor: pointer;
    border-radius: 5px;
}

.floatSpan:hover, .floatSpan:active, .floatSpan:focus {
   	color: black;
	background: wheat;
}



.customAlertBox {
    width: 95vw;
    max-width: 300px;
    min-height: 150px;
    max-height: 90vh;
    background: #000000;
    box-shadow: 6px 6px 0px -1px #ffde03;
    font-family: 'Poppins', sans-serif;
    color: antiquewhite;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
    border: 5px solid #ff3d00;
}

.customAlertHeader {
	background: #262626;
	text-align: center;
	padding: 5px;
	font-family: 'Poppins';
	font-size: 20px;
	color: antiquewhite;	
	display: none;
} 

.customAlertBody {
	font-size: 15px;
	padding-left: 17px;
	padding-right: 17px;
	padding-bottom: 10px;
	padding-top: 13px;
}

.customAlertText {
	padding-bottom: 6px;
	min-height: 70px;
	font-size: 15px;
}

.customAlertTextBox {
        padding-bottom: 5px;
        min-height: 70px;
        font-size: 15px;
        font-family: 'Poppins';
	text-align: center;
    	padding-top: 10px;
}


.customCloseButton {
    	position: fixed;
    	cursor: pointer;
    	left: 6vw;
    	color: white;	
	background:#262626;
}

.customCloseButton:hover , .customCloseButton:active {
	color: indianred;
} 

.customAlertText > a:hover {
	color: crimson !important;
}

li {
	padding-bottom:10px;
}

.customAlertButtons {
	display: flex;
	justify-content: space-around;
	padding-top: 5px;
	padding-bottom: 5px;
}

.customAlertButtons > button {
position: relative; border: 0;width: 83px;height: 30px;background: #8a8a8a;box-shadow: 2px 2px 0 #ffde03;padding: 2px;text-align: center;cursor: pointer;color: antiquewhite;}
.customAlertButtons > button:hover, .customAlertButtons > button:active {
}

.customAlertButtons > button:hover:focus {
    border: 3px solid burlywood;
}

#customInputText {
	font-size:20px;
}


.topClass {
    position: fixed;
    width: 100%;
    color: white;
    display: flex;
    left: 0;
    font-family: 'Poppins', sans-serif;
    background: #272727;
    bottom: 0;
    justify-content: space-around;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 3px solid #525252;
    cursor: pointer;
    margin-top: 14px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.topClass > a {
	text-decoration: none;
	color: white;
}
.topClass > span {
	cursor: pointer;
}
.topClass > span:hover {
	text-shadow: 0 0 25px antiquewhite, 0 0 50px wheat;
}

.g-recaptcha {
    transform:scale(0.77);
}

#snackbar.show {
  border-radius: 2px;
  padding-top: 16px;
  padding-bottom: 16px;
  position: fixed;
  z-index: 1500;
  bottom: 30px;
  font-size: 12px;
  visibility: visible;
  -webkit-animation: fadein 0.75s, fadeout 0.75s 4s;
  animation: fadein 0.75s, fadeout 0.75s 4s;
  font-family: monospace; 	
}

.unsigned {
	font-size:14px !important;
}

.closeButton {
    position: absolute;
    top: 0;
    padding-top: 15px;
    width: 100%;
    text-align: right;
    padding-right: 35px;
    font-size: 20px;
    cursor:pointer;
}


.logo {
	font-family: 'Rochester';
    	font-size: 77px;
}

.flexClass {
  display: flex !important;
}

#mainImg {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	 -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*button {
	cursor:pointer;
	height: 167px;
	width: 125px;
	flex-flow:wrap;
	justify-content:center;
	align-content:center;
}*/

button {
        cursor:pointer;
        height: 110px;
        width: 125px;
        flex-flow:wrap;
        justify-content:center;
        align-content:center;
}

.options > span:hover {
	cursor:pointer;
	color:coral;
}

span > a:hover {
        cursor:pointer;
        color:coral !important;
}



.loginText {
	height:18px;
	padding-left:5px;
	display:flex;
	flex-direction:row;
	flex-flow:wrap;
	align-content:center;
	color: white;
}

.bottomClass {
  bottom: 0;
  width:100%;
  color: grey;
  position: fixed;
  text-align:center;
  padding-bottom:5px;
  left:0;	
}

.sslPremiumLink {
  font-size: 14px !important;	
  text-decoration: none;
  color: white;
  padding-left:0px !important;	
  font-family: 'Rochester', cursive !important;	
}

.sslPremiumLink:hover{
	color:indianred;
}

.bottomClass > a {
 color:antiquewhite;
 font-family:monospace;
}

.bottomClass > a:hover {
 color:indianred;
}

.gratitude:hover {
	color:antiquewhite !important;
	transition:.5s;
}

body {
	font-family: 'Rochester', cursive;
	background: rgb(255,252,234);
	margin-left: 0px;
	margin-top:0px;
	width: 100%;
	min-height: 100vh;
	overflow-y: scroll;
	display:flex;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	border-top: 6px solid #272727;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

@media (max-aspect-ratio: 1) {
  body {
    /*align-items: flex-start; 
    padding-top:5px;*/
  }
}

.txt {
    margin-top: 15px;
    /* font-family: 'Righteous'; */
    margin-bottom: 11px;
}


.imgDiv {
	width:100%;
	text-align:center;
	font-size:150px;
	opacity:0;
	color:white;
}

.imgDivBottom {
	width:100%;
	text-align:center;
}

@media screen and (max-width:786px) {
	.imgDivBottom > img {
		width:35%;
    	}

	.imgClass_2, .imgDiv {
 }


}

.imgClass {
height:auto;
width:30%;
}


.imgClass_2 {
 	width:100%;
 	text-align:center;
 	color:white;
 	opacity: 1;
 	transition: opacity 1s;
 	font-size: 100px !important;
}

button.generalLogin {
    color: black;
    font-family: 'Righteous', sans-serif;
    font-size: 13px;
}

/*.loginDiv > button {
	border: none;
	box-shadow: 0px 0px 3px wheat;
	border-radius: 8px;
	margin-left: 5px;
    	margin-right: 5px;
	margin-bottom: 25px;
	background: #000d !important;
	position: relative
}*/

.loginDiv > button {
    border: none;
    box-shadow: 4px 3px 0px 0px #ff3d00;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 12px;
    background: #ffffe1;
    border: 2px solid;
    position: relative;
    animation: change-background 2s ease;
	font-family: 'Poppins', sans-serif;
}

@keyframes change-background {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
}

.loginDiv > button > span {
    top: 8px;
    position: absolute;
    right: 8px;
    border-radius: 33px;
    height: 19px;
    width: 19px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: burlywood;
    background: #383737;
}



.loginDiv {
    width: 100%;
    	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-flow: wrap;
}


.floatingloginClass {
    position: absolute;
    z-index: 5;
    background: black;
    color: white;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    flex-direction: row;
    text-align: center;
    flex-flow: column;
    top: 0;
    left: 0;	
}

.flexClass {
   displat: flex !important;
}

.imgcontainer {
    width: 100%;
    padding-bottom: 5px;
    font-size: 25px;
    text-align: center;
}

input {
    	margin-bottom:5px;	
	padding: 10px;
}

.generalLogin {
	display: block;
	text-align: center;
	 -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.generalLogin > img {
	margin-top: 15px;
	height: 82px;
	filter: invert(1);
	display: none;
}

.gratitude {
	content: no-open-quote;
	display: flex;
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	padding-top: 5px;
	color: #000000;
	font-weight: bold;
	font-size: 14px;
}

.poopoo {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    margin-top: -8px;
    margin-bottom: 17px;
    color: black;
    font-weight: 700;
}

@media screen and (min-width: 810px) and (min-height: 590px) {
 .topCLass {
    bottom:0;
    position: fixed;
  }
}

#topClass > a:hover, #topClass > a:active {
	opacity: 0.7;
}

.popo {
	margin-bottom: 10px;
    	margin-top: -4px;
    	font-size: 25px;
	color: #ffe31f;
	font-family: 'Poppins';

}

.infoText {
	animation: 1s appear; 
}

.infoTextRepeat {
        color: white;
        font-family: 'Righteous';
}


@keyframes appear {
  from {opacity: 0}
  to {opcaity: 1}
}

.popo {
    margin-bottom: 10px;
    margin-top: -7px;
    font-size: 27px;
    font-family: 'Oleo Script Swash Caps', cursive;
    color: #e6f3ff;
    text-shadow: 0 0 14px #0d4cbf;
}

button.generalLogin:hover , button#loginSpan:hover, .customAlertButtons > button:hover {
    opacity: 0.9;
}

button.generalLogin:active , button#loginSpan:active {
    left: 3px;
    top: 3px;
    box-shadow: none;
}

.customAlertButtons > button:active {
	left: 2px;
    top: 2px;
    box-shadow: none;

}

#loginSpan {
    font-family: 'Righteous', sans-serif;
    cursor: pointer;
    position: relative;
    font-size: 18px;
    color: 0;
    height: 40px;
    margin-top: 12px;
    margin-bottom: 12px;
    border: 2px;
    box-shadow: 3px 3px 0px #ff3d00;
    background: #373737;
    color: white;
}

.indexlogo {height: 48px;margin-top: 22px;margin-bottom: 16px;filter: drop-shadow(5px 5px 5px #eee);}