@charset "UTF-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	color: white;
}

input {
	color: black;
}

select {
	color: black;
}

body {
	background-color:rgba(153,119,59,1.00);
}

button {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius:10px;
	border-style: groove;
	border-width: 2px;
	border-color: rgba(153,119,59,1.00);
	background-color: rgba(59,103,144,1.00);
	cursor: pointer;
}

button:hover {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius:10px;
	border-style: groove;
	border-width: 2px;
	border-color: rgba(59,103,144,1.00);
	background-color: rgba(153,119,59,1.00);
	cursor: pointer;
}

a {
	color: white;
}

a:hover {
	color: lightgrey;
}

#header {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
	background-color:rgba(34,72,118,1.00);
}

#divLogo {
	position: absolute;
	top: 3px;
	left: 60px;
	height: 92px;
	width: 91px;
	overflow: hidden;
	border-radius: 46px;
	box-shadow: 2px 5px 12px 1px #000000;
	z-index: 2;
}

#logoImg {
	position: absolute;
	left: -44px;
	top: -4px;
	box-shadow: 2px 5px 12px 1px #000000;
	border-radius: 50px;
	z-index: 11;
}

#navLinks {
	position: absolute;
	right: 10px;
	top: 10px;
}

#divContent {
	display: flex;
	position: relative;
	top: 70px;
	left: 20px;
	background-image:url("../media/UTMLogo-Idea.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: blue;
	border-radius: 10px;
	box-shadow: 2px 5px 12px 1px #000000;
	z-index: 1;
	overflow: hidden;
}

#divSquareOne {
	position: absolute;
	bottom: 35px;
	right: 35px;
	background-color: darkgreen;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	box-shadow: 0px 2.5px 5px .1px #ffffff;
	z-index: 10;
	pointer-events:none;
}

#divSquareTwo {
	position: absolute;
	bottom: 10px;
	right: 35px;
	background-color: red;
	width: 20px;
	height: 20px;
	box-shadow: 0px 2.5px 5px .1px #ffffff;
	z-index: 10;
	pointer-events:none;
}

#divSquareThree {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background-color: orange;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	box-shadow: 0px 2.5px 5px .1px #ffffff;
	z-index: 10;
	pointer-events:none;
}

#divSquareFour {
	position: absolute;
	bottom: 35px;
	right: 10px;
	background-color: lightblue;
	width: 20px;
	height: 20px;
	box-shadow: 0px 2.5px 5px .1px #ffffff;
	z-index: 10;
	pointer-events:none;
}

#divWel {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divWho {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divWhy {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divExplore {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divServ {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divFor {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divTrust {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divJoin {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#divContact {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#footer {
	font-size: 12px;
	position: fixed;
	bottom: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
	background-color:rgba(34,72,118,1.00);
}
.TitleHead {
	padding: 20px;
	font-size: 50px;
	font-weight: 900;
	text-transform: uppercase;
}

.descRipt {
	font-size: 20px;
	padding: 20px;
}

#loginModal {
	display: none;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 98%;
	height: 96%;
	background-color:rgba(5,15,35,0.85);
	padding: 10px;
	border-radius:10px;
	border-style: solid;
	border-width: 2px;
	vertical-align: middle;
	z-index: 12;
}

#registerModal {
	display: none;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 98%;
	height: 96%;
	background-color:rgba(5,15,35,0.85);
	padding: 10px;
	border-radius:10px;
	border-style: solid;
	border-width: 2px;
	vertical-align: middle;
}

#accessCodeModal {
	display: none;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-30%);
	background: rgba(0,0,0,0.85);
	padding: 20px;
	border-radius: 10px;
	z-index: 1000;
}

#accessDeniedModal {
	display: none;
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -20%);
	background: rgba(0,0,0,0.85);
	padding:20px;
	border-radius: 10px;
	z-index: 1000;
	width: 300px;
}

#divTerms {
	display: none;
	position: absolute;
	top: 10px;
	width: 90%;
	height: 90%;
	overflow: scroll;
	left: 3%;
	padding: 1%;
	background-color: rgba(0,0,0,.95);
	border-radius: 10px;
	border-style: groove;
}

#creativeFields {
	display: block;
}

#registerForm {
	display: none;
}