.mybox {
   width: 181px; height: 190px;
  position: relative;
  }
.ribbon {
  position: absolute;
  right: 25px; top: 45px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}


#bottom_div { 
    height: 40px; 
    position: fixed; 
    bottom:5%;
    width:100%; 
    background-color: #880015; 
	color : white;
    opacity: 1;
	z-index:1;
}

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:20px;
    top:5px;
    background:#ff7f27;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:15px;
}
.notify-badge-green{
    position: absolute;
    right:20px;
    top:5px;
    background:#30f130;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:15px;
}
table {  
  table-layout: fixed;  
  border-collapse: collapse;
  width: 100%;      
  
}

@media screen and (min-width: 601px) {
  table {
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {
  table {
    font-size: 2.5vw;
  }
}


th, td {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #4CAF50;
  color: white;
}

.th1{
  width:10%;
}
.th2{
  width:25%;
}
.th3{
  width:25%;
}
.th4{
  width:15%;
}
.th5{
  width:25%;
}
.notification {
  background-color:#337ab7;
  color: white;
  text-decoration: none;
  margin : 2px;
  padding: 5px 10px;
  position: relative;
  display: inline-block;
  border-radius: 5px; 
  
}


.notification:hover {
  background: red;
}

.notification .badge {
  position: absolute;
  top: -2px;
  left: -5px;
  padding: 0px 5px;
  border-radius: 25%;
  background-color: red;
  color: white;
}




 .LockOff {
         display: none;
         visibility: hidden;
      }

      .LockOn {
            
			 background-color: rgba(238, 238, 238, 0.5);
    box-shadow:0 0 1.5em rgba(0,0,0,0.5);
    z-index:999;
	
    
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    
      }

body {margin:0px;font-family:Arial;}
.row {margin:0px;padding:0px;font-family:Arial; }

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;  
  color: white;
  cursor: pointer;  
}

.float{
	position: fixed;
    width: 50px;
    height: 50px;
    bottom: 50px;
    right: 20px;
    background-color: #48b348;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

.float:hover {
	background-color:green;
	color:white;
}
.my-float{
	position: fixed;
    width: 50px;
    height: 50px;
    bottom: 50px;
    right: 20px;
    background-color: #48b348;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

.float3{
	position:fixed;
	width:50px;
	height:50px;
	bottom : 50px;
	right:20px;

	background-color:#ff7f27;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
  
	
  z-index:100;
}

.float3:hover {

	color:black;
}

.my-float3{
	margin-top:10px;
}



.float2{
	position: fixed;
    width: 50px;
    height: 50px;
    bottom: 50px;
    right: 20px;
    background-color: #48b348;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

.float2:hover{

	background-color:#db6969;
	color:white;
}

.my-float2{
	margin-top:10px;
}



h2 {
  text-transform: capitalize;  
  text-align: center;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
   
}

.sidebar a {
  padding: 8px 8px 8px 32px;  
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
background-color: green;	
  color: white;
}


.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 25px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}





.mySlides {display: none;}
img {vertical-align: middle; width:100%;
box-shadow: 0 2px 12px rgb(0 0 0 / 24%), 0 2px 8px rgb(0 0 0 / 48%);}

/* Slideshow container */
.slideshow-container {  
  position: relative;
  margin: auto;
  
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;  
}

@-webkit-keyframes fade {
  
  from {opacity: 0.1} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.1} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {
  .text {font-size: 11px}
}

.topnav {
  
  overflow: hidden;
  background-color: #880015;  
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 17px;  
}

.active {
  background-color: #ff7f27;
  color: white;
}

.topnav .icon {
  display: none;
}

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

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #ff7f27;
  color: white;
}

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

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

#mylogo {
  max-width: 90%;
  height: auto;
}


@media screen and (max-width: 801px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 801px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
	#
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


* {
  box-sizing: border-box;
  
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  margin-bottom:10px;
  
  }
.column3 {
  float: left;
  width: 33.33%;
  padding: 10px;  
  }
.column2 {
  float: left;
  width: 50.0%;
  padding: 10px;  
  }  

  .column > img{
border-radius: 0px;

}

  .column > a > img{
border-radius: 0px;

}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 25%;
  text-align : center;
}

/* Clear floats after the columns */
.row:after {
  content: "";	
  display: table;
  clear: both;
}


@media (min-width:320px)  {div > p {display:block;} div > span {display:block;}  h1{font: normal normal normal 20px/1 Helvetica, arial, sans-serif;}  h2{min-height:54px;margin: 0.5px; font: normal normal normal 18px/1 Helvetica, arial, sans-serif;}  .column > img{min-height:  150px;width: 100%;    margin: 0.5px;} .column > a > img{height: 150px;    margin: 0.5px;}  .column {padding: 0px;  width: 100%;}.column3 {width: 100%;} .topnav a{ font-size: 12px;padding: 10px 10px;  }}
@media (min-width:480px)  {div > p {display:block;} div > span {display:block;}  h1{font: normal normal normal 20px/1 Helvetica, arial, sans-serif;}  h2{min-height:54px;margin: 0.5px; font: normal normal normal 18px/1 Helvetica, arial, sans-serif;}   .column > img{min-height: 150px;width: 100%;    margin: 0.5px;} .column > a > img{height: 150px;    margin: 0.5px;}  .column {padding: 0px;  width: 100%;} .column3 {width: 100%;} .topnav a{ font-size: 12px;padding: 10px 10px;  }}
@media (min-width:600px)  {div > p {display:block;} div > span {display:block;}  h1{font: normal normal normal 20px/1 Helvetica, arial, sans-serif;}  h2{min-height:54px;margin: 0.5px; font: normal normal normal 18px/1 Helvetica, arial, sans-serif;}  .column > img{min-height: 250px;width: 100%;     margin: 0.5px;} .column > a > img{height: 250px;    margin: 0.5px;}  .column {padding: 0px;  width: 100%;}.column3 {width: 100%;} .topnav a{ font-size: 12px;padding: 10px 10px;  }}
@media (min-width:801px)  {div > p {display:block;} div > span {display:block;}  h2{font-size: 15px;    margin-bottom: 0.5px;    word-spacing: 5px;    letter-spacing: 1px;    line-height: 2;			font: normal normal normal 18px/1 Helvetica, arial, sans-serif;}  .column > img{min-height: 100px;width: 150px;    margin: 0.5px;} .column > a > img{height: 150px;}  .column {padding: 10px;  width: 50%;}.column3 {width: 33.33%;}	.topnav a{ font-size: 17px;  }}
@media (min-width:950px)  {div > p {display:block;} div > span {display:block;}   h2{font-size: 15px;    margin-bottom: 0.5px;    word-spacing: 5px;    letter-spacing: 1px;    line-height: 2;			font: normal normal normal 20px/1 Helvetica, arial, sans-serif;}  .column > img{min-height: 250px;width: 100%;} .column > a > img{height: 250px;}  .column {padding: 10px;  width: 50%;}.column3 {width: 33.33%;} .topnav a{ font-size: 15px; padding: 16px 16px; }}
@media (min-width:1050px) {div > p {display:block;} div > span {display:block;}   h2{font-size: 15px;    margin-bottom: 0.5px;    word-spacing: 5px;    letter-spacing: 1px;    line-height: 2;			font: normal normal normal 20px/1 Helvetica, arial, sans-serif;}  .column > img{min-height: 250px;width: 100%;} .column > a > img{height: 250px;}  .column {padding: 10px;  width: 25%;}.column3 {width: 33.33%;} .topnav a{ font-size: 15px; padding: 16px 16px; }}
@media (min-width:1281px) {div > p {display:block;} div > span {display:block;}   h2{font-size: 15px;    margin-bottom: 0.5px;    word-spacing: 5px;    letter-spacing: 1px;    line-height: 2;			font: normal normal normal 20px/1 Helvetica, arial, sans-serif;}  .column > img{min-height: 250px;width: 100%;} .column > a > img{height: 250px;} .column {padding: 10px;  width: 25%;}.column3 {width: 33.33%;} .topnav a{ font-size: 15px; padding: 16px 16px; }}



Divisions{  
  background:#ff7f27;
  color:#fff;
  width: -webkit-fill-available;
  display:inline-block;
  padding:15px 15px;
  margin-left:0px;
  font-size: medium;
   font-weight: bold;
}



h2{  
  background:green;
  color:#fff;
  width: -webkit-fill-available;
  display:inline-block;
  padding:15px 15px;
  margin-bottom:0.5px;
  font-size: 15px;
  margin-bottom: 0.5px;
  word-spacing: 5px;
  letter-spacing: 1px;
  line-height: 2;			
}

a#apf:hover {
	background-color:#16a4ea;
    color:white;
}


a#heavy:hover 
{
background-color:#008000;
}
a#generator:hover 
{
background-color:#ff0000;
}
a#farmwork:hover 
{
background-color:#480707;
}
a#light:hover 
{
background-color:#ffa500;
}
a#porta:hover 
{
background-color:#6d57bc;
}
a#used:hover 
{
background-color:#0059B2;
}
a#raw:hover 
{
background-color:#5B3F3F;
}
a#skip:hover 
{
background-color:#007FFF;
}
a#transport:hover 
{
background-color:#86c24c;
}



h2.apf
{
background-color:#16a4ea;
}
h2.heavy
{
background-color:#008000;
}
h2.generator
{
background-color:#ff0000;
}
h2.farmwork
{
background-color:#480707;
}
h2.light
{
background-color:#ffa500;
}
h2.porta
{
background-color:#6d57bc;
}
h2.used
{
background-color:#0059B2;
}
h2.raw
{
background-color:#5B3F3F;
}
h2.skip
{
background-color:#007FFF;
}
h2.transport
{
background-color:#86c24c;
}




h4{
  font: normal normal normal 16px/1 Helvetica, arial, sans-serif;
  
  background:white;
  color:black;
      width: -webkit-fill-available;
  display:inline-block;
  padding:10px 10px;
  margin-left:0px;
}
p{
	-moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
	letter-spacing: .03em;
	color: #777;
	text-align:left;
}

.content {
  padding-top: 100px;
  padding-bottom: 100px;
}

html {
  scroll-behavior: smooth;
}


.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  padding:5px;
  height:45px;
  background-color: #880015;
}