/* CSS Document */

/*PAGE LAYOUT*/
body {
	margin-left: 2%;
	margin-top: 0px;
	margin-right: 2%;
	margin-bottom: 0px;
}

:root {
--page-width: auto;
--left-width: 275px;
--content-width: auto;
--text-size: 12px;
--largetext-size: 16px;
--titletext-size: 24px;
--smalltitle-size: 20px;
--header-height: 97px;
--menu-bg:#333;
}

#content {width: 1070px;}
#logo{float:left; background-image:url(TTGAClogo2.png); width:275px; height:213px;}
#rotated {transform:rotate(-15deg); align: right;} 

@media screen and (max-width: 1070px) {
:root {
--content-width: auto;
--page-width: auto;
--left-width: 100%;
--text-size: 24px;
--largetext-size: 28px;
--titletext-size: 48px;
--smalltitle-size: 36px;
--header-height: 97px;
}

#content {width: auto;}
#logo{float:left; width:25px; height:23px;}
#rotated {transform:rotate(0deg);} 

}

#toptop { display: flex;
    justify-content: space-between;
    width:100%;}

#topheader{float:right; width:var(--content-width);  background-color:#F0F0F0; position:relative}
#toplinks{position:absolute; right:10px; top:10px;}
#menu{float:right; width:var(--content-width); height:32px; background-image:url(bg_menu.gif); background-repeat:repeat-x;}
#submenu{float:right; width:var(--content-width); height:32px; background-image:url(bg_submenu.gif); background-position:top; background-repeat:repeat-x;}
#contenttext{float:right; width:var(--content-width);}
#contentadvert{float:right; width:225px; border:solid 1px #666666; background-color:#F7F7F7; padding:10px; margin:10px;}
#leftpanel{float:left; width:var(--left-width);}
#footer{float:left; width:var(--page-width); height:40px; background-color:#F0F0F0;}
#menu-position{float:right; width:var(--content-width); height:32px}


#ddmenu{margin: 0; padding: 0; z-index: 30}
#ddmenu li {margin: 0; padding: 0; list-style: none; float: left;}
#ddmenu li a {display: block; margin: 0 1px 0 0; padding: 12px 5px; width: 102px; background-image:url(bg_menu.gif); background-repeat:repeat-x; text-align: center; text-decoration: none}
#ddmenu li a:hover {background: #6C444D; color: #FFFFFF}
#ddmenu div {position: absolute; visibility: hidden; margin: 0; padding: 0; background: #4B91AA; border: 1px solid #ffffff}
#ddmenu div a{position: relative; display: block; border-bottom: 1px solid #999999; border-left: 1px solid #999999; border-right: 1px solid #999999; margin: 0; padding: 8px 10px; width: 120px; white-space: nowrap; text-align: left; text-decoration: none; background: #ffffff; color: #999999;}
#ddmenu div a:hover {background: #6C444D; color: #FFFFFF}


/*GRAY PANEL*/
.graypanel{
	border:solid 1px #666666; background-color:#F7F7F7; padding:10px; margin:10px;
}

/*TEXT STYLES*/
.bodytext {
	font: 0.7em Tahoma, sans-serif;
	color: #666666;
	font-size: var(--largetext-size);
}

.largebodytext {
	font: 0.7em Tahoma, sans-serif;
	font-size: var(--text-size);
	color: #666666;
}

.titletext {
	font: 0.7em Tahoma, sans-serif;
	font-size:var(--titletext-size);
	font-weight:bold;
	color:#6C444D;
}
.whitetitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:var(--titletext-size);
	font-weight:bold;
	color:#FFFFFF;
}

.smalltitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:var(--smalltitle-size);
	font-weight:bold;
	color:#6C444D;
}
.smallwhitetext {
	font: 0.7em Tahoma, sans-serif;
	font-size: var(--text-size);
	font-weight:bold;
	color: #FFFFFF;
}
.smallwhitetext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: var(--text-size);
	font-weight:bold;
	color: #FFFFFF;
	text-decoration:none;
}
.smallwhitetext a:hover{
	text-decoration:underline;
}
.smallgraytext {
	font: 0.7em Tahoma, sans-serif;
	font-size: var(--text-size);
	font-weight:bold;
	color:#999999;
}
.smallgraytext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: var(--text-size);
	font-weight:bold;
	color:#999999;
	text-decoration:none;
}
.smallgraytext a:hover{
	text-decoration:underline;
}
.smallredtext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#6C444D;
}
.smallredtext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: var(--text-size);
	font-weight:bold;
	color:#6C444D;
	text-decoration:none;
}
.smallredtext a:hover{
	text-decoration:underline;
}

.register {
	border-radius: 6px;
	padding: 16px 16px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	font-size: var(--largetext-size);
	background-image: linear-gradient(to bottom right,#FFFFFF,#80b4d9);
	background-color:#c8d5f6;
   border: 2px solid;
   color: black;
}

.register:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

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

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

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

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

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

.float {
 position: fixed;
 bottom: 0;
 overflow: hidden;

}

.fb-page {
    width:var(--content-width);
}
.example1 {
 height: 84px;	
 overflow: hidden;
 position: relative;
 clip-path: inset(0% 0% 0% 0%);
}
.example1 div {

 margin: 0;
 width: 786px;
 line-height: 50px;
 text-align: left;
 z-index: 1;
 /* Apply animation to this element */	
 -moz-animation: example1 25s linear infinite alternate;
 -webkit-animation: example1 25s linear infinite alternate;
 animation: example1 25s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(10%); }
 100% { -moz-transform: translateX(-80%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(10%); }
 100% { -webkit-transform: translateX(-80%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(10%); /* Firefox bug fix */
 -webkit-transform: translateX(10%); /* Firefox bug fix */
 transform: translateX(10%); 		
 }
 100% { 
 -moz-transform: translateX(-80%); /* Firefox bug fix */
 -webkit-transform: translateX(-80%); /* Firefox bug fix */
 transform: translateX(-80%); 
 }

}

.navbar {

  overflow: hidden;
  background-color: var(--menu-bg);
}

.navbar a, .dropbtn .dropdown {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font: 0.7em Tahoma, sans-serif;
  font-size: var(--titletext-size);
}


.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: var(--menu-bg);
}

.navbar a.active, .dropdown a.active {
  background-color: #6C444D;
  color: white;
}

.navbar .icon {
  display: none;
}



/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: var(--titletext-size);
  border: none;
  outline: none;
  color: white;
  padding: 4px 6px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}


/* Dropdown content (hidden by default) */
.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;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: inline-block;
} 

.burger {
  position: fixed;
  top:0;
  left:0;
  height: 70px;
  width: 65px;
    right: 10%;
  cursor: pointer;
  display: none;
    background-color: var(--menu-bg)
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #FFFFFF;
  margin: 6px 6px;
  transition: 0.4s;
  transform: translate(0px, 15px);
}

.change .bar1 {
  transform: translate(0, 20px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, 0px) rotate(45deg);
}



@media screen and (max-width: 1070px) {

  /* Fixed sidenav, full height */
.navbar {
	font: 0.7em Tahoma, sans-serif;
	font-size:var(--titletext-size);
  height: 1px;
  width: 1px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 65px;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.navbar a, .dropbtn {
  padding: 6px 8px 6px 6px;

  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.navbar a:hover, .dropbtn:hover {
  color: #f1f1f1;
}


/* Dropdown content (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-content {
  position: relative;
  display: inline-block;
  padding-left: 5px;
   z-index: 1;
}


  .navbar a {display: none;}
  .navbar a.icon {
    float: right;
    display: inline-block;
  }

  .dropbtn { display: none };
  .dropbtn.responsive { 
    position: relative;
    float: none;
    display: inline-block;
    text-align: left;
    z-index: 1;
  }
  .navbar.responsive {
   height: 100%;
   width: 90%;
     overflow-x: hidden;
     }
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: inline-block;
    text-align: left;
  }
  .burger {
      display: block;
  }
  
 
  
}