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

#wrapper {
	width:1080px;
	margin:0 auto;
	height:0 auto;
}

#header {
	background:#FFF;
}

#header1 {
	font-size:20px;
	width:300px;
	padding:0px 0px 0px 20px;
}

#header2 {
	font-size:20px;
	width:300px;
	padding:0px 0px 0px 20px;
}

#header3 {
	font-size:20px;
	width:300px;
	padding:0px 0px 0px 20px;
}

#header4 {
	font-size:20px;
	width:300px;
	padding:0px 0px 0px 20px;
}

input[type=text] {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
    width: 100%;
}

/* Add a black background color to the top navigation */
#navigation ul {
margin:0;
padding:0;
list-style-type:none;
float:center;
overflow:hidden;
background:#333;
width:100%;
}

#navigation ul li {
float:left;
width:auto;
}

#navigation ul li a {
display:block;
padding:20px 50px;

color:#000000;
text-decoration:none;
font-family:Calibri;
font-size:2.1em;
font-weight:bold;
text-align:center;
color:#FFF;
}

#navigation ul li a:hover:not(.active) {
color:#FFF;
background:#CCC;
}

#navigation .active{
background-color:#FCC;
}

#navigation ul li a:hover .dropdown:hover .dropbtn {
color:#FFF;
background:#F3C;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #666;

min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

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

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

.dropdown:hover .dropdown-content {
display: block;
}


#content_area {
	clear:both;
	padding-top:10px;
}

#content {
	float:left;
	width:50%;
	height:480px;
	border:double;
	padding-right:0px;
}

#content1 {
	float:left;
	width:50%;
	border:double;
	font-size:25px;
}

#content2 {
	float:left;
	width:50%;
	height:400px;
	border:double;
	padding-right:0px;
	
}

#content3 {
	background:#999;
}

#content4 {
	float:left;
	width:100%;
	height:auto;
	border:double;
	padding-right:0px;
	background-image:url(../Images/Z.jpg);
	color:#FFF;
}

#content5 {
	float:left;
	width:auto;
	height:auto;;
	padding-right:0px;
}

#content h1, #content p #content img{
	padding:0 10px 0 20px;
}

#content h2 {
	font-size:3.0em;
	margin:0;
}

#content p {
	font-size:1.2em;
}

#block {
	float:right;
	width:48%;
	height:480px;
	border:double;
}

#block2 {
	float:left;
	width:50%;
	height:200px;
	border:double;
}

#block3 {
	
}
.block {
	border:1px solid #000;
	padding:10px;
	margin:5px;
}
#sidebar {
	float:right;
	width:48%;
	height:410px;
	border:double;
}

#sidebar2 {
	float:right;
	width:48%;
	height:410px;
	border:double;
}

#sidebar3 {
	float:right;
	width:48%;
	height:710px;
	border:double;
	margin-top:-100px;
}

#sidebar4 {
	float:right;
	width:48%;
	height:480px;
	border:double;
	margin-top:;
	font-size:15px;
}

#footer {
	clear:both;
	background:#0F9;
	width:100%;
}

#footer p {
	padding:0px 0px;
	color:#06F;
	font-size:1.5em;
	margin:0;
}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px 60px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Suggestions */
input [type=text], select, textarea {
	width:100%;
	padding:12px;
	border:1px solid #ccc;
	border-radius:4px;
	box-sizing:border-box;
	margin-top:6px;
	margin-bottom:16px;
	resize:vertical;
}

input[type=submit] {
	background-color:#4CAF50;
	color:white;
	padding:12px 20px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}

input[type=submit]:hover {
	background-color:#45a049;
}

input[type=reset] {
	background-color:#4caf50;
	color:white;
	padding:12px 20px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}

input[type=reset] {
	background-color:#45a049;
}

.container {
	border-radius:5px;
	background-color:#f2f2f2;
	padding:20px;
	background-image:url(../Images/V.jpg);
	color:#FFF;
	
}

/* Link */

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Navigation */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 500px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	font-size:50px;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}