/*from KevinPowell*/


@import url(//fonts.googleapis.com/css?family=Nunito);

@import url(//fonts.googleapis.com/css?family=Lato);

html{
	scroll-behavior:smooth;
	scroll-padding-top:10rem;
}
body{
    font-family:Lato;
	min-height: 100vh;
	background-color: #fff;
}

.nav-link{
	/*color:rgb(242,241,235);*/
	color:#d21d0a;
	text-shadow: 2px 2px 3px #7e1106;
}
 

.imgctr{
display:block;
margin-left:auto;
margin-right:auto;
}

.pekto{
   background: url('../img/bg-showcase-3.jpg') no-repeat center center ;
	 -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
	height:90vh;
}

.jumbotron {
   background: url('../img/bg-showcase-3.jpg') no-repeat center center ;
   
  /*
  -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   height:100vh;
   */
   
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
	height:95vh; 
}

:target{
	border:1px solid gray;
}

*, *::before, *::after{
	box-sizing: border-box;
}

img, picture, sv, video{
	display:block;
	max-width:100%;

}



label {
    padding-left:10px;
	padding-top:5px;
    width:200px;
	color:green;
    text-transform: uppercase;
    display:inline-block;
}

.wrong .bi-check-lg
{
    display: none;
}

.good .bi-x-lg
{
    display: none;
}


table {
    margin:10px 0;
    border-collapse: collapse;
    width: 60%;
    border: 1px solid #ddd;
    }
    th{
        text-decoration: underline;
    }
    th, td {
    text-align: left;
    padding: 16px;
    text-transform: uppercase;
    }


input[type="text"],
input[type="password"],
input[type="email"] {
    padding:17px;
    margin:5px 0;
    border: 2px solid #eee;
    border-radius: 8px;
    box-shadow:4px 4px 10px rgba(0,0,0,0.06);
    transition: .3s background-color;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover{
    border: 2px solid #aaa;
}

.eqpt{
   padding:17px;
    margin:0px 0;
    border: 2px solid #eee;
    border-radius: 8px;
    box-shadow:4px 4px 10px rgba(0,0,0,0.06);
    transition: .3s background-color;

}

select{
  color:#aaa;
  font: 15px Arial;
	
}
option:not(first-child) {
	font: 15px Arial;
	
  
}
.mynavbar{
  /*opacity:1.0;*/
  background-color:#fff;
}

.modalcolor{
    background: rgb(2,0,36);
    background: linear-gradient(166deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(9,16,125,1) 29%, rgba(0,212,255,1) 100%); /*background-color:#d21d0a;*/
}

.modal-title{
	color:#fff;
	text-shadow: 2px 2px 3px #7e1106;
}

#logoimg{
	margin-top:5px;
	margin-bottom:0px;
	margin-left:10px;
}

#container{
    margin:5px 5px;
    padding:7px;
    border: 2px solid #eee;
    border-radius: 8px;
    box-shadow:4px 4px 10px rgba(0,0,0,0.06);
    
}
.error{
  color:#ff5733;  
  border-color:#ff5733;  
  background-image: url("data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22yellow%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-mood-wrrr%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M12%2021a9%209%200%201%201%200%20-18a9%209%200%200%201%200%2018z%22%20/%3E%3Cpath%20d=%22M8%2016l1%20-1l1.5%201l1.5%20-1l1.5%201l1.5%20-1l1%201%22%20/%3E%3Cpath%20d=%22M8.5%2011.5l1.5%20-1.5l-1.5%20-1.5%22%20/%3E%3Cpath%20d=%22M15.5%2011.5l-1.5%20-1.5l1.5%20-1.5%22%20/%3E%3C/svg%3E");
}
 .bg-image {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}
input[type="button"] {

    /* remove default behavior */
    appearance:none;
    -webkit-appearance:none;
  
    /* usual styles */
    padding:10px;
    border:none;
    background-color:#3F51B5;
    color:#fff;
    font-weight:600;
    border-radius:5px;
    width:20%;
  
}
.validfbk {
  color:greenyellow;
  font-weight: bold;
  font-size:15px;
  animation: glow 1s ease-in-out infinite alternate;
}
.invalidfb{
    color:whitesmoke;
    font-weight: bold;
    font-size:15px;
    animation: glow 1s ease-in-out infinite alternate;
}

#pmsg{
  font-size:14px;
}
.modal-backdrop{
  background-color: #fff3cd;
}

.ffname{
  text-transform: capitalize;
}
  
 /* The snackbar - position it at the bottom and in the middle of the screen */
 #snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: rgb(61, 58, 58); /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 10px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  #snackbar.hid{
    visibility:hidden;
  }
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  } 
    /* Animations to fade the snackbar in and out */
@keyframes glow {
      from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6;
  }
}


@media ( width <= 450px  ) {

	/*
	#logoimg {
		content:url('../img/tebinglane.ico');
		
	}
	*/
	/*
	.slide-out-left {
	  animation: fadeIn 5s;
	  -webkit-animation: fadeIn 5s;
	  -moz-animation: fadeIn 5s;
	  -o-animation: fadeIn 5s;
	  -ms-animation: fadeIn 5s;
	}	
	*/
	
	@keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-moz-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-webkit-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-o-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-ms-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}	
	
}

@media ( width >= 452px ){
	
	/*
	#logoimg {
		content:url('../img/tebinglanelogo2.png');
		height:30px;
		
	}
	*/
	/*
	.slide-right {
	  animation: fadeIn 5s;
	  -webkit-animation: fadeIn 5s;
	  -moz-animation: fadeIn 5s;
	  -o-animation: fadeIn 5s;
	  -ms-animation: fadeIn 5s;
	}
	*/

	@keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-moz-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-webkit-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-o-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@-ms-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}
}

/* otp */
.otp-field {
  flex-direction: row;
  column-gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-field input {
  height: 45px;
  width: 42px;
  border-radius: 6px;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  border: 1px solid #ddd;
}
.otp-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.resend {
  font-size: 12px;
}
/* Chrome, Safari, Edge, Opera */
.otp-field input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.otp-field input[type=number] {
  -moz-appearance: textfield;
}
.footer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: black;
  font-size: 12px;
  text-align: right;
  font-family: monospace;
}

.footer a {
  color: black;
  text-decoration: none;
}