/** PAGE IS DIVIDED INTO TWO DIVS - LEFT AND RIGHT **/
/** CODE BELOW STYLES ALL ELEMENTS IN FIRST DIV INCLUDING SIGNUP POPUP! **/
/** SCROLL FURTHER DOWN TO SEE CODE FOR SECOND DIV **/

body{
	overflow: hidden;
}

body, html {
  height: 100%;
}

.rectangle8{
	position: absolute;
	width: 50%;
	height: 100%;
	background: #303061;
	border-radius: 15px;

}

.rectangle3{
	float: right;
	position: relative;
	width: 49%;
	height: 100%;
	border-radius: 15px;
	background: linear-gradient(180deg, #595971 0%, rgba(4, 4, 32, 0) 100%);
}

img.a{
	display:flex;
	margin:auto;
	margin-top: 15px;
	width: 75px;
	height: 66px;
	/*background: rgba(33, 174, 73, 0.7);*/
	/*mix-blend-mode: color-burn;*/
	/*border: 2px solid #77715B;*/
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 15px;
}



.blinking{
    animation:blinkingText 2.8s infinite;
}
@keyframes blinkingText{

     0%{     color: #FFF;    } 
     49%{    color: transparent; } 
     50%{    color: transparent; }  
     99%{    color: transparent;  }  
     100%{   color: #000;    }  
}


img.c{
	display:fixed;
	margin-top: 10px;
	margin-left: 2%;
	width: 180px;
	height: 30px;
	mix-blend-mode: color-burn;
}

img.d{
	display:fixed;
	margin-top: 10px;
	margin-left: 6%;
	width: 75px;
	height: 30px;
	mix-blend-mode: color-burn;
}

img.e{
	display:fixed;
	margin-top: 10px;
	margin-left: 8%;
	width: 80px;
	height: 30px;
	mix-blend-mode: color-burn;
}

img.f{
	display:fixed;
	margin: 10px 20px 10px 20px;
	width: 35px;
	height: 30px;
	mix-blend-mode: color-burn;
}

img.m{

	width: 98%;
	height: 87%;
	mix-blend-mode: color-burn;
	display:flex;
	margin:auto;
	margin-top: 5px;

	mix-blend-mode: color-burn;
	/*border: 2px solid #77715B;*/
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 15px;
}


span.a{
	display:table;
	margin:5px auto;
	font-family: Roboto;
	font-style: normal;
	font-weight: bold;
	font-size: 36px;
	line-height: 80%;
	padding: auto;

	color: #FFFFFF;

   -webkit-text-stroke: 1px EDDA32;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
				/**1px 1px 0 #EDDA32,
				-1px -1px 0 #EDDA32,  
				1px -1px 0 #EDDA32,
				-1px 1px 0 #EDDA32,
				1px 1px 0 #EDDA32;**/
     
}

span.b{

	display:table;
	margin:0px auto;
	width: 65%;
	height: 15%;
	text-align: center;
	padding: auto;
	

	font-family: Roboto;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;


	color: #FFFFFF;
  
}

#switchup{
font-family: Mansalva, Roboto;
font-size: 20px;
}

span.b a:link{
  color: hotpink;
}
span.b a:visited {
  color: hotpink;
}
span.b a:hover {
  color: purple;
}



div.a{
	width: 100%;
	height: 80%;
}

#footer0{

	position: fixed;
	width: 85px;
	height: 76px;
	margin-left: 18%;
	cursor: pointer;
	bottom: 19%;


}

#footer00{

	position: fixed;
	width: 85px;
	height: 76px;
	margin-left: 25%;
	cursor: pointer;
	bottom: 19%;


}

#footer1{

	position: fixed;
	width: 85px;
	height: 76px;
	margin-left: 11%;
	cursor: pointer;
	bottom: 5%;


}

#footer2{

	position: fixed;
	width: 85px;
	height: 76px;
	margin-left: 18%;
	cursor: pointer;
	bottom: 5%;


}

#footer3{

	position: fixed;
	width: 85px;
	height: 76px;
	margin-left: 25%;
	cursor: pointer;
	bottom: 5%;


}

#footer4{

	position: fixed;
	width: 85px;
	height: 76px;
	margin-left: 32%;
	cursor: pointer;
	bottom: 5%;

}


* {box-sizing: border-box}
/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 80%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}


/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
  border-radius:10px;
}

input[type=text], input[type=password]{
  border-radius:10px;
}


/* Set a style for all buttons */
button {

	cursor: pointer;
	width: 16.86%;
	height: 29.61%;
	
	font-family: Roboto;
	font-style: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;

	color: #000000;

  
	background: #FFFFFF;
	border: 1px solid #FAFEFA;
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
}


button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: auto;
  background-color: #875451;
  float: left;
  width: 24.86%;
  height: 12.61%;
}

.signupbtn {
	float: right;
	width: 24.86%;
    height: 12.61%;
    padding: auto;

}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* The Modal (background) */
.modal {
  display: hidden; /* Hidden by default */
  position: fixed;
  z-index: 1; /* Sit on top */
  left: 73%;
  top: 45%;
  width: 25%; /* Full width */
  height: 50%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #303061;
  padding-top: 50px;
  border-radius: 15px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.dropbtn {
    display:table;
	margin:30px auto;
	line-height: 31px;
	padding: auto;
	color: #303061;
	font-size: 24px;

   -webkit-text-stroke: 1px EDDA32;
    text-shadow: 1px 1px 0 #EDDA32,
				-1px -1px 0 #EDDA32,  
				1px -1px 0 #EDDA32,
				-1px 1px 0 #EDDA32,
				1px 1px 0 #EDDA32;
}

span.z{

	 word-wrap: break-word;
	 width: 100px;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

/**XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX**/
/**XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX**/
/**XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX**/

/**XXXXX CODE BELOW HANDLES ALL ELEMENTS IN SECOND DIV XXXXXXX**/

.navbar {
  overflow: hidden;
  background-color: #303061;
  font-family: Arial, Helvetica, sans-serif;
  height: 10%;
  border-radius: 15px;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

.dropdown {
  float: left;
  overflow: hidden;
  
}

.droppbtn{
  width: 100%;
  height: 75%;

}


.dropdown .droppbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  
}

.navbar a:hover, .dropdown:hover .droppbtn, .droppbtn:focus {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}


/**XXXXXXXXXXX KEEP CALM!!! XXXXXXXXXXXXXXXXXX**/
/**XXXXXXXXXXXCODE BELOW HANDLES SIGN IN SECOND DIV XXXXXXX**/

.login {
  width: 400px;
  margin: 16px auto;
  font-size: 16px;
}

/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
  margin-top: 0;
  margin-bottom: 0;
}

/* The triangle form is achieved by a CSS hack */
.login-triangle {
  width: 0;
  margin-right: auto;
  margin-left: auto;
  border: 12px solid transparent;
  border-bottom-color: #303061;
}

.login-header {
  background: #303061;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.login-container {
  background: #ebebeb;
  padding: 12px;
}

/* Every row inside .login-container is defined with p tags */
.login p {
  padding: 12px;
}

.login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
  border-radius: 15px;
}

.login input[type="email"],
.login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}

/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color: #888;
}

.login input[type="submit"] {
  background: #303061;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}

.login input[type="submit"]:hover {
  background: #17c;
}

/* Buttons' focus effect */
.login input[type="submit"]:focus {
  border-color: #05a;
}