/* -------------------- --------------------*/

/* ##### COR LINK - FUNCIONA ##### */

/*https://www.htmlprogressivo.net/2014/07/CSS-em-Links-Colocar-Tirar-Sublinhado-Mudar-Cor-Plano-de-Fundo-Tutorial.html 
*/

/*
Paleta de cores

https://www.color-hex.com/

*/

a:link {
/* background: #B1B1B1; */
 color: #000000;
 text-decoration: none;
/* font-weight: bold; */
/* border-width: 4px; */
/* border-style: solid;*/ 
/* border-top-color: #DFDFDF; */
/* border-right-color: #666; */
/* border-bottom-color: #333; */
/* border-left-color: #858585; */

}

/*
a:hover {
 background: #B1B1B1; 
 color: #000000; 
 font-weight: bold; 
 border-color: #B1B1B1; 
}
*/ 

<!--- parte 2 --->

<style type="text/css">

a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #000;
}
</style>

<!--- parte 2 --->

/* ##### COR LINK - FUNCIONA ##### */

/* -------------------- --------------------*/

/* ##### ESTILOS  HR ##### */ 

/*

<hr class="new1">
<hr class="new2">
<hr class="new3">
<hr class="new4">
<hr class="new5">
<hr class="new6">

*/

<style>

/* Red border */

hr.new1 {
  border-top: 1px solid red;
}

/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;
}

/* Dotted red border */
hr.new3 {
  border-top: 1px dotted red;
}

/* Thick red border */
hr.new4 {
  border: 1px solid red;
}

/* Large rounded green border */
hr.new5 {
  border: 10px solid green;
  border-radius: 0px;
}

/* Large rounded green border - Estilo UOL */
hr.new6 {
  border: 4px solid #eeeeee;
  border-radius: 0px;
}

/* Dotted red border */
hr.new7 {
  border-top: 1px dotted blue;
}

/* Thick red border */
hr.new8 {
  border: 1px solid blue;
}

/* Thick red border */
hr.new9 {
  border: 1px solid #f7f3f7;
}

/* Thick red border */
hr.new1 {
  border: 1px solid #eff3ef;
}

/* Thick red border */
hr.new0 {
  border: 1px solid #000000;
}

/* Thick red border */
hr.new12 {
  border: 1px solid #2986cc;
}

</style>

/* ##### ESTILOS  HR ##### */ 

/* -------------------- --------------------*/

/* ##### ESTILOS  TEXTO ITÁLICO ##### */ 

<style>

div.x {
  font-size: 1.1rem;
  color:red;
}

div.b {
  font-size: large;
}

div.c {
  font-size: 100%;
}

p.e {
  font: 1rem Arial, sans-serif;
}

p.f {
  font: italic small-caps 1.3rem Arial Georgia, serif;
}

p.h {
  font: italic  1.15rem Arial Georgia, serif;
}
p.m {
  font: italic  1.3rem Arial Georgia, serif;
}

</style>

/* ##### ESTILOS  TEXTO ITÁLICO ##### */ 

/* -------------------- --------------------*/

/* #####  ##### */ 

        <!-- CSS style to place three div side by side -->
        <style> 
            .container .box { 
                width:540px; 
                margin:50px; 
                display:table; 
            } 
            .container .box .box-row { 
                display:table-row; 
            } 
            .container .box .box-cell { 
                display:table-cell; 
                width:33%; 
                padding:10px; 
            } 
            .container .box .box-cell.box1 { 
                background:white; 
                color:white; 
                text-align:justify; 
            } 
            .container .box .box-cell.box2 { 
                background:whitw; 
                text-align:left 
            } 
            .container .box .box-cell.box3 { 
                background:lime; 
                text-align:justify; 
            }
        </style>
		
/* #####  ##### */ 

/* -------------------- *** -------------------- */

<style type="text/css">
@import "compass/css3";
.popover-content {
    overflow-y: scroll;
    height: 200px;
}

.popover-footer {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    background-color: #F7F7F7;
    border-bottom: 1px solid #EBEBEB;
    border-radius: 5px 5px 0 0;
}

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.flex-item {
    background: tomato;
    /*    padding: 13px;*/
    width: 74px;
    ;
    height: 83px;
    margin-top: 2px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}


/*---------------------*/

#General {
    background: #383a35;
}

#sale {
    background: #ffde6b;
}

#Servicing {
    background: #762963;
}

#Purchasing {
    background: #22d65b;
}

#Billing {
    background: #67a0e1;
}

#Accounts {
    background: #a22ee3;
}

#GST {
    background: #39c5ac;
}

#StockControl {
    background: #ef5836;
}

#System {
    background: #69cbf5;
}

.footer{
      width: 100%;
    margin-left: -0.5%;
  background-color:rgba(128, 128, 128, 0.48);
  margin-bottom:-1%;
  border-bottom-right-radius: 16%;
  border-bottom-left-radius: 16%;
}
</style>

/* -------------------- *** -------------------- */

<style>
body {
  background-color:;
}
#myDIV {
  background-color:#FFFFFF;
  border-top:1px solid #d9d8d8;
  border-bottom:1px solid #d9d8d8;

}
</style>

/* -------------------- *** -------------------- */

<style>

body {
  background-color:;
}
#myDIV-top {
  background-color:#FFFFFF;
  border-top:1px solid #d9d8d8;

}
</style>

/* -------------------- *** -------------------- */

<style>
body {
  background-color:;
}
#myDIV-footer {
  background-color:#FFFFFF;
  border-top:1px solid #d9d8d8;

}
</style>

/* -------------------- *** -------------------- */

<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

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

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column  {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column  {
    width: 100%;
  }
}
</style>
</head>

/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */

<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
}
</style>

/* -------------------- *** -------------------- */

<style>
.responsive {
  width: 100%;
  height: auto;
}
</style>

/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */

.ram-video-1 {
position: relative;
max-width: 800px;
margin: auto;
}
.ram-video-1 .tv-wrap {
margin: 6% 6% 10%;
position: relative;
}
.ram-video-1 .tv-ram {
position: absolute;
z-index: 1;
top: -16%;
left: -11.5%;
width: 123%;
height: 142%;
pointer-events: none;
}
.ram-video-1 .tv-ram img {
width: 100%;
height: 100%;
}
.ram-video-1 .tv-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
background: #000;
cursor: pointer;
}
.ram-video-1 .tv-video:before {
content: "";
border: 3px solid #6a6a6c;
border-radius: 0px;
background-color: rgba(0, 0, 0, 0.7);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSte4QHEnQ9AQYiw2CWL6rcVIdNIeVzVTSXC559DI1EaQixiNo7KwzSiK14XKGBGzIh6quUJTdHcfv5MpIG5_vfZdXVL-EhFwJift7bCbaeDBZqxLVPvJzjbKuthkb86U2BNddmxtFuybl0zLRnxv49wEJ32pmhXfuobrolyiAuhwiyZa6xxwBxM2n/s1600/youtub11.png");
background-repeat: no-repeat;
background-size: 50%;
background-position: 50% 50%;
width: 20%;
height: 25%;
z-index: 2;
box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
position: absolute;
top: 35%;
left: 40%;
transition: 0.3s;
}
.ram-video-1 .tv-video:hover:before {
background-color: #337ab7;
border-color: #bfe2ff;
}
.ram-video-1 .tv-video.show:before {
display: none;
}
.ram-video-1 .tv-video iframe,
.ram-video-1 .tv-video img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */



/* -------------------- *** -------------------- */