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

body
{
	font-family:Verdana, sans-serif;
	margin:0;
	padding:0;
	user-select:none;
}

:root{
    --font-color:#555;
    --font-hover-color:green;
}

.form{
    padding-top:90px;
}
.form-group{
    margin-bottom:1.5em;
    transition:all .3s;
	width:30%;
	margin:auto;
	overflow:hidden;
/*    border:5px solid red;*/
}
.form-group .fname,
.form-group .lname{
	width:48%;
}
.form-group .fname{
	float:left;
}
.form-group .lname{
	float:right;
}
.form-label{
    font-size:.75em;
    color:var(--font-color);
    display:block;
    opacity:0;
    transition: all .3s;
    transform:translateX(-50px);
}
.form-control{
    box-shadow:none;
    border-radius:0;
    border-color:#ccc;
    border-style:none none solid none;
    width:100%;
    font-size:1.1em;
    transition:all .6s;
/*    border:2px solid lightgreen;*/
}
.form-control::placeholder{
    color:#aaa;
}
.form-control:focus{
    box-shadow:none;
    border-color:var(--font-hover-color);
    outline:none;
}
.form-group:focus-within{
    transform:scale(1.1,1.1);
}

.form-control:invalid:focus{
    border-color:red;
}
.form-control:valid:focus{
    border-color:green;
}

.btn{
    background: 0 0 #fff;
    border:1px solid #aaa;
    border-radius:3px;
    color:var(--font-color);
    font-size:1em;
    padding:10 50px;
    text-transform:uppercase;
    display:flex;
    margin-top:10px;
    margin-bottom:auto;
    margin-left:auto;
    margin-right:auto;
}
.btn:hover{
    border-color:var(--font-hover-color);
    color:var(--font-hover-color);
}
textarea{
    resize:none;
}

.focused > .form-label{
    opacity:1;
    transform:translateX(0px);
}

@media only screen and (max-width: 300px)
{
	.text {font-size: 11px}
}

#navbar
{
	color:#222;
	background-color:#fff;
	min-height:105px;
}

.container
{
	width:100%;
	height:500px;
	margin:auto;
	padding:0;
	
	background-image: url("../images/Contact.jpg");
	background-position: 50% 90%;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.container2 ul
{
	list-style-type: none;
	padding:0;
	text-align:center;
}

.container3
{
	float:left;
	padding-left:20px;
}

.container3 ul li
{
	float:left;
	list-style:none;
	position:relative;
}

.container3 ul li a
{
	display:block;
	font-family:'Varela Round', sans-serif;
	color:#666;
	font-size:17px;
	font-weight:normal;
	text-decoration:none;
	padding:5px 7px;	
}

.container3 ul li a:hover
{
	background-color:#f4f4f4;
	border-radius:3px;
}

.container3 ul li ul
{
	display:none;
	position:absolute;
	background-color:#fff;
	padding:4px;
	z-index:2;
	border-radius:0px 0px 3px 3px;
}

.container3 ul li:hover ul
{
	display:block;	
} 

.container3 ul li ul li
{
	width:100%;
	white-space:nowrap;
}

.container3 ul li ul li a
{
	font-family:'Varela Round', sans-serif;
	color:#666;
	font-size:14px;
	font-weight:normal;
	text-decoration:none;
	padding:5px 5px;
}

.container3 ul li ul li a:hover
{
	background-color:#f4f4f4;
	border-radius:3px;
}

#contact_box
{
	font-family:'Varela Round', sans-serif;
	color:#000;
	font-size:20px;
	font-weight:normal;
	line-height:200%;
	text-align:center;
	position:absolute;
	width:40%;
	margin:10% 30% 0 30%;
	padding:25px;
	opacity:0.7;
	background:#f4f4f4;
	border-radius:3px;
}

.nav-a1
{
	padding-left:5px;
	padding-right:7px;
	padding-top:5px;
	padding-bottom:5px;
	height:8%;
	width:8%;
}

.nav-a1:hover
{
	background-color:#f4f4f4;
	border-radius:3px;
}

.clear
{
	clear:both;
}

#main-footer
{
	background:#fff;
	color:#222;
	font-family: 'Varela Round', sans-serif;
	font-size:12px;
	text-align:center;
	padding:20px;
}

/* ====================== ====================== ====================== ====================== */
/* ====================== responsive for smaller than 320px screen ====================== */
@media (max-width: 320px)
{
}

/* ====================== responsive for larger than 320px screen ====================== */
@media (min-width: 320px)
{
}

/* ====================== responsive for larger than 375px screen ====================== */
@media (min-width: 375px)
{
}

/* ====================== responsive for larger than 425px screen ====================== */
@media (min-width: 425px)
{
}

/* ====================== responsive for larger than 575px screen ====================== */
@media (min-width: 575px)
{
}

/* ====================== responsive for larger than 768px screen ====================== */
@media (min-width: 768px)
{
}

/* ====================== responsive for larger than 1024px screen ====================== */
@media (min-width: 1024px)
{
}

/* ====================== responsive for larger than 1280px screen ====================== */
@media (min-width: 1280px)
{
}

/* ====================== responsive for larger than 1440px screen ====================== */
@media (min-width: 1440px)
{
}

/* ====================== responsive for larger than 1920px screen ====================== */
@media (min-width: 1920px)
{
}

/* ====================== responsive for larger than 2560px screen ====================== */
@media (min-width: 2560px)
{
}

/* ====================== responsive for larger than 3200px screen ====================== */
@media (min-width: 3200px)
{
}

/* ====================== responsive for larger than 3840px screen ====================== */
@media (min-width: 3840px)
{
}