@charset "utf-8";
/* CSS Document */
body {
	height: 100vh;
	background-color: #1F456E;
	color: #CCCCCC;
}
h1 { margin: 0 auto; text-align: center;}
h2 { padding: 0 12% 0 12%; font-size:1.5rem; font-style:italic; margin: 0 auto; text-align: center;}
#container {padding: 0 15% 0 15%;
  background-color: transparent;
	
	font-size: 1.2rem;
  height: 100%;
 }
#bottom {
	color:black;
	font-size: 0.8rem;
    margin-top: auto;
	text-align: center;
}
.footer {
  background: transparent;
	font-family: Arial;
  font-size: 0.8rem;
  text-align: center;
  /* float: left; */
  width: 100%;
  margin-top: auto;     /* NEW */
}
.regular {font-weight:normal;}
*{font-family:"Arial Rounded MT Bold", Calibri, Arial;}
  
.margdown {margin-top: 4rem;}
.buttons {
	overflow: hidden;
}

.buttons > div {
	
	width: calc(50% - 40px);
	padding: 20px;
	float: left;
	position: fixed;
	bottom: 0;
	top: 0;
}

.buttons a {
	float: left; 
	margin-right: 20px;
  margin-bottom: 20px;
}
a#link {position: absolute; left: 20px; bottom: 10px; text-decoration: none; color: #555; font-weight: bold;}
/*------------------------------------------------------*/
/* BUTTONS */
/*------------------------------------------------------*/
.btn,
input[type="submit"]{
	cursor: pointer;
    border-radius: 0px;
    text-decoration: none;
    padding: 12px 18px;
    font-size: 1rem;
    line-height: 19px;
    font-family: Verdana;
     font-weight:400;
    
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}

.btn:hover,
input[type="submit"]:hover{
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}
.btn-dark,
input[type="submit"]{
    border:solid 2px gold;
    background: transparent;
    color: gold;
	font-weight: 600;
}
.btn-dark:hover,
input[type="submit"]:hover,
.btn-dark.active{
    border:solid 2px #1F456E;
    background: gold;
    color: #1F456E;
	font-weight: 600;
}

.flex-container {
	  display: flex;
	 align-items: center;
	 justify-content: center;
   }
.flex-container > div {
	  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media only screen and (max-width : 700px)
{	.flex-container {display: flex;
	flex-direction: column;   }
	.flex-container > div {line-height: 2.5rem;
  font-size: 0.8rem;}
	.marg{align-self: auto; margin-left:0;}
	.text2 {text-align:center; }
	.overlay {position: relative;
	margin-top: -11rem;	
	margin-left:0rem;    	}
	.closebtn {display:none;}
	} 
@media only screen and (max-width: 489px)
{	
	.flex-container {display: flex;
	flex-direction: column;   }
	.flex-container > div {line-height: 2.5rem;
  font-size: 0.8rem;}
	.marg{align-self: auto; margin-left:0;}
	.text2 {text-align:center; }
	.overlay {position: relative;
	margin-top: -11rem;	
	margin-left:0rem;    	}
	.closebtn {display:none;}
	} 
@media only screen and (max-width: 275px) 
{	
	.flex-container {display: flex;
	flex-direction: column; 
	align-items: center; }
	.flex-container > div {line-height: 3.5rem;}
	.marg {margin-left: -2.5rem;}
	.marg1 {margin-left: -1.5rem;}
	.text2 { border:1px;  border-radius: 1px;border-style:solid; border-color:#e54603; padding: 0rem;}
	.overlay a {font-size:0.8rem}
}