/*General info*/

@font-face {
    font-family: 'pala';
    src: url('fonts/palanquindark-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	display:inline-block;
	position:absolute;
	margin-left:-26px;
	margin-top:-25px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    align: center;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 12px;
	margin:	0px;
}

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

/* Create an active/current tablink class */
.tab button.active {
    background-color: #5F6EA5;
	color:	#FFF;
}

/* Style the tab content */
.tabcontent {
    display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
	overflow: auto;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.containerDes {
  position: relative;
  width: 33%;
  margin:	auto;
}

.image {
  display: block;
  width: 98%;
  height: auto;
  padding:	0px;
  border-radius: 0px 40px 0px 40px;
  transition: 0s ease;
}

.containerDes:hover .image {
	box-shadow:	4px 4px 0px #999;
	background-color:	#999;
}

.overlay {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 0;
  background-color: #333;
  overflow: hidden;
  width: 98%;
  height: 0;
  opacity:	0.2;
  transition: .5s ease;
  border-radius: 0px 50px 0px 50px;
}

.overlayOpen {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 0;
  background-color: #333;
  overflow: hidden;
  width: 880px;
  height: 98%;
  opacity:	0.9;
  transition: .5s ease;
}

.containerDes:hover .overlay {
  height: 95%;
  opacity:	0.8;
}

.innerText{
	position:	absolute;
	margin-left:	15%;
	font-size:	20px;
	color: white;
	margin-top:	35px;
	text-shadow: 2px 2px 4px #000000;
	transition: .2s ease;
}

/* .containerDes:hover .innerText {
  color: white;
  margin-top: 10px;
  z-index:	3;
  text-shadow: 0px 0px #555;
} */

.containerDes:hover .innerText {
	transform: scale(1.03);
	text-shadow: 2px 2px 8px #000000;
	z-index:	3;
}

.text:first-child {
  margin-top: 70px;
}

.text {
  color: white;
  width:	90%;
  margin:	auto;
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  border-radius:15px;
  border:0px solid white;
}

.text2 {
  color: white;
  width:	33%;
  margin:	auto;
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  border-radius:15px;
  border:0px solid white;
}

.text:hover {
  color: black;
  background-color:	#5F6EA5;
  box-shadow: 0px 0px 10px;
}

.text2:hover {
  color: black;
  background-color:	#5F6EA5;
  box-shadow: 0px 0px 10px;
}

.text2 {
  color: #FFF;
  margin-top: 10px;
  font-size: 16px;
  text-align: center;
}

  a.inLink:link {
  color: #FFF;
	}
	a.inLink:hover {
	  color: orange;
	}
	
	a.ex1:hover, a.ex1:active {color: red;}
	
.headerOverlay {
	background-color: rgba(210,210,210,1);
	position:	relative;
	height: 181px;
	width: 0px;
	margin-left:	-86px;
	margin-top:	-7px;
	padding: 5px;
	z-index:	6;
	transition: .5s cubic-bezier(1,0,0,1);
}

.headerOverlayOpen {
	background-color: rgba(0,0,0,0.5);
	box-shadow: 0px 0px 55px -20px rgba(0,0,0,1);
	border-radius:	0px;
	position:	relative;
	height: 181px;
	width: 405px;
	margin-left:	-86px;
	margin-top:	-7px;
	padding: 5px;
	z-index:	6;
	transition: .5s ease;
}

.headerHidden {
	position:	absolute;
	color:	#FFF;
	word-wrap: normal;
	left:	-450px;
	text-shadow: 1px 1px 5px #000;
	visibility:	hidden;
}

.up {
  border: solid black;
  border-width: 0px 4px 4px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

@-webkit-keyframes arrow-jump {
  0%   { opacity: 0;}
  100% { opacity: 1;
    }
  
}
#arrow {
  -webkit-animation: arrow-jump 1s infinite; /* Safari 4+ */
}


.screen {
			font-size: 0.5em;
			margin: 0;
			width: 100%; /* BenM mentioned this in answer*/
			height: 100%; /* take full browser height */
			left: 0;
			top: 0;
}

.screen .main {
			width: 100%; /* <--now this takes full browser dimension  */
			height: 100%; /* <--now this takes full browser dimension  */
}

.pop	{
	box-shadow: 0px 0px #888888;
	transition: box-shadow 1s;
	transition: transform 1s;
}

.pop:hover	{
	box-shadow: 3px 3px 1px #555;
	/* transform: translateY(-8px); */
	transition-timing-function: ease;
	transition: 0s;
}

.popb	{
	box-shadow: 0px 0px #888888;
	border:	0px solid black;
	transition: box-shadow 1s;
	transition: transform 1s;
	transition: border 0s;
	background-color:	#FFF;
}

.popb:hover	{
	box-shadow: 10px 10px #888888;
	border:	1px solid black;
	transform: translateY(-8px);
	transition-timing-function: ease;
	transition: 0.5s;
}

@keyframes animatehome {
  from {bottom:-1200px; opacity:0}
  to {bottom:0; opacity:1}
}

.homeSlide	{
	position: relative;
	animation-timing-function: ease-in-out;
	animation-name: animatehome;
	animation-duration: 1.5s;
	animation-delay: 0s
}

@keyframes animatefadein {
  from {opacity:0}
  to {opacity:1}
}

.fadein	{
	position: relative;
	animation-name: animatefadein;
	animation-duration: 2s;
	animation-delay: 0s
}

.background{
	background-image:url(images/bg_2.jpg);
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
}


@keyframes animatetopin {
  from {top:-200px; opacity:0; visibility: hidden;}
  to {top:0; opacity:1; visibility: visible;}
}

.logoIn {
	background-image: url('./images/TAS_Logo_2.png');
	background-repeat: no-repeat;
	background-size:     contain;
	position:	relative;
	margin-left:	330px;
	margin-top:	15px;
	width: 390px;
	height:	67px;
	border:	0px solid black;
	visibility: visible;
	z-index:	2;
	opacity:	1.0;
	animation-name: animatetopin;
	animation-duration: 1s;
	animation-delay: 0s
}

.logo {
	background-image: url('./images/TAS_Logo_2.png');
	background-repeat: no-repeat;
	background-size:     contain;
	position:	relative;
	margin-left:	330px;
	margin-top:	15px;
	width: 390px;
	height:	67px;
	border:	0px solid black;
	overflow:	hidden;
	visibility: visible;
	z-index:	2;
}

body {
font-family: Verdana;
font-size: 76%;
text-align: center;
}

a {text-decoration: none; color: #FFF; background-color: inherit;}
a:hover {text-decoration: underline;color:blue;}

h1,h2,h5,h6,form {margin: 0; color: #5F6EA5;text-shadow: 1px 1px #FFF;}
h4	{
	font-weight:	strong;
	font-size: 20px;
	color: #000;
	margin: 0;
}

h3	{
		color:	#2E3092;
		margin: 0;
}

blockquote {padding: 5px; margin: 2px; border: 1px dotted #000000;}
.info {padding: 5px; font-weight: bold; border: 1px solid #b1b1b1; background: #eeeeee; color: #000066;}

img.left, img.right, img {padding: 5px; margin: 0;}
img.left {float: left;}
img.right {float: right;}

#lista ul	{
	list-style-image:url("http://www.adworks.co.za/images/tick.jpg");
	list-style-type:square;
}

#lista li	{
	padding: 4px;
}

/*Page*/

#page {
border-right: 1px solid #dddddd;
width: 946px;
text-align: left;
overflow: hidden;
margin: auto;
box-shadow: 0 8px 6px -6px #000;
border-radius: 0px 0px 10px 10px;
}

/*header information*/

#header {
background-image: url('./images/New_Header4.jpg');
background-repeat: no-repeat;
background-size:     cover;
background-color: inherit;
height: 80px;
width: 935px;
padding: 5px;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-top: 1px solid #dddddd;
}

/*Menu Style*/
.navbar {
    overflow: hidden;
	width: 947px;
    background-color: #333;
    font-family: Arial;
}

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

.navbar a.active {
  background-color: #5F6EA5;
  color: white;
}

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

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
	transition: 0.4s;
}

.dropdown .dropbtn2 {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: #5F6EA5;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #5F6EA5;
}

.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;
}

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

#menu {
background-image: url('./images/bar.gif');
background-repeat: repeat-x;
border: 6px solid #5F6EA5;
padding-bottom: 5px;
padding-left: 177px; /* <--To move menu bar items left or right, use this value, as well as decrease/increase width below  */
font-size: 1.1em;
height: 26px;
width: 658px;
float: left;
overflow: hidden;
}

#menu ul {list-style-type: none; padding: 0; margin: 0}
#menu li {display: inline; margin: 0; float:left;}

#menu li a {
background-image: url('http://www.adworks.co.za/images/nav.gif');
background-repeat: repeat-x;
border-right: 0px solid #dddddd;
font-weight: bold;
text-decoration: none;
padding: 9px;
display: block;
}

#menu li a:hover {background-image: url('http://www.adworks.co.za/images/pressed.gif'); background-repeat: repeat-x;}

/*Contenarea style*/

#contentarea {
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
padding: 5px;
width: 935px;
overflow: hidden;
float: left;
background-color:	white;
}

/*main content*/

#content {
padding: 5px;
width: 925px;
float: left;
overflow: hidden;
}


/*footer syle*/

#footer {
background: #333;
color: white;
text-align: center;
width: 945px;
padding: 1px;
overflow: hidden;
clear: both;
font-size: 20px;
position:	relative;
z-index:	2;
box-shadow: 0 -10px 30px -12px #000;
border-radius: 0px 0px 10px 10px;
}