html {
    height: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
}

#main-top {
    margin-top: 23px;
}

#img-logo {
    padding-top: 5px;
    width: 201px;
    height: 44px;
}

#instruments-system {
    margin-top: -29px;
    margin-left: 230px;
    min-width: 308.125px;
    float:left; font:normal 28px Arial;
}

#img-30years {
    margin-top: 7px;
    width: 88.484px;
    height: 40px;
}

#img-national-company {
    width: 75px;
    height: 50px;
}

#img-contact {
    width: 153.734px;
    height: 50px;
}

.contato {
    cursor: pointer;
}

#img-top > .col-12 {
    margin: 0; 
    padding: 0;
    background-image: url('../images/img_bkg_main.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
}

#img-top-main {
    width: 100%;
    height: 280px;
}

#slogan {
    height: 27px;
    border-top: 3px solid #DFDFDF;
    text-align: center;
}

#slogan h1 {
    font: bold 12px Arial;
    color: #045180;
    margin: 0 auto;
    text-align: center;
    padding-top: 3px;
}

.page-title {
    font: bold 30px Arial;
    color: #FFF;
}

#page-title-desktop {
    position: absolute;
    bottom: 0;
    left: 17%;

    margin-bottom: 2%;
}

#menu-conversor {
    margin-top: 1%;
}

#menu-desktop {
    margin-top: 7%;
}

#menu-desktop > li {
    width: 100%; 
    border-bottom: 1px solid #DFDFDF;
}

#menu-desktop > li > a {
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
}

#conversor {
    min-height: 180px;
    width: 100px;
    font: bold 20px Arial;
    color: #000;
    text-align: center;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
}

#temperature-converter-m {
    margin-left: 6%;
    min-height: 210px;
    width: 89%;
    margin-top: 5%;
    font: bold Arial;
    color: #000;
    text-align: center;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
}

.unit-name {
    max-width: 110px;
}

.unit-name > h1 {
    font: 14px Arial;
}

.unit-name-m {
    font: 45% Arial !important;
}

.input-unit-m {
    max-width: 70% !important;
    font: 45% Arial !important;
}

#title-conversor {
    font: bold 90% Arial;
    color: #000;
    text-align: center;
}

#col-title-conversor-m {
    font-size: 16px;
    max-height: 30px !important;
}

/* MOBILE */
#container-mobile {
    height: 100%;
    margin: 0;
    padding: 0;
}

#txt-title-mobile {
    font: bold 20px Arial;
}

#nav-mobile {
    width: 100%;
    border-bottom: 3px solid #DFDFDF;
    margin-right: 0;
    padding-right: 0;
    font-size: 16px;
}

#row-conteudo-mobile {
    height: 100%;
    margin-right: 0;
}

#row-conteudo-mobile > .col-sm-4 {
   padding-right: 0;
}

#row-conteudo-mobile > .col-sm-8 {
    padding-left: 0;
    padding-right: 0;
}

#col-verical-menu-m {
    height: 350px;
    min-height: 0px;
    margin: 0;
    padding: 0;
    background-image: url('../images/menu-background.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-right: 3px solid #DFDFDF;
    border-bottom: 3px solid #DFDFDF;
}

.menu-item-m {
    margin-left: 30px;
    text-decoration: none;
    color: silver;
    transition: color 1s;
    font-size: 38%;
}

.menu-item-m:hover {
    margin-left: 30px;
    text-decoration: none;
    color: white;
    transition: color 1s;
}

#nav-vertical-menu {
    height: 100%;
    width: cover;
}

.separator-menu-m {
    margin-bottom: 1rem;
    margin-left: 26px;
    width: 83%;
    border: 0;
    border-top: 1px solid rgba(129, 125, 125, 0.473);
}

#nav-vertical-menu > .nav-item {
    font: bold Arial;
    height: 10%;
    margin-bottom: 3%;
}

#col-mobile-body-info {
    margin: 0;
    padding: 0;
    margin-bottom: 0px;
}

#mobile-body-info {
    margin: 0;
    margin-left: 4%;
    padding: 0;
    height: 100%;
    width: 96%;
    margin-bottom: 30px;
}

#img-top-main-m {
    margin: 0;
    margin-top: 10px;
    margin-left: 3%;
    padding: 0;
    height: 150px;
}

#banner-show {
    background-color: #DFDFDF;
    margin-top: 3%;
    margin-bottom: 200px;
}

#banner-show-m {
    background-color: #DFDFDF;
    margin-top: 4%;
    margin-left: 6%;
    width: 89%;
    border-radius: 5px;
    border-style: solid;
    border-color: #DFDFDF;
}

.col-banner {
    margin-right: 20px !important;
}

.img-banner {
    margin-top: 9px;
    margin-bottom: 9px;
    height: 150px;
    width: 150px;
    cursor: pointer;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.img-banner:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1), opacity 1s;
}

.img-banner-m {
    margin-top: 9px;
    margin-bottom: 9px;
    height: 100px;
    width: 100px;
    cursor: pointer;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.img-banner-m:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1), opacity 1s;
}

.banner-text {
    font: bold 13px Arial;
    text-align: center;
    color: white;
    padding: 5px;
}

.col-banner-m-e {
    margin-left: -33% !important;
}

.banner-text-m {
    font: bold 30% Arial;
    text-align: center;
    color: white;
    padding-top: 5px;
}

#footer-desktop {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: 16px;
    border-top: 3px solid rgb(47, 18, 128);
    background-color: rgb(231, 230, 230);
}

#footer-end-col{
    background-color: black;
    text-align: right;
    color: white;
}

#txt-title-m {
    position: absolute;
    bottom: 0;
    left: 17%;
    color: white;
    font: bold Arial;
    font-size: 45%;
}

#footer-mobile {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 3px solid rgb(47, 18, 128);
    background-color: rgb(231, 230, 230);
}

#footer-end-mobile {
    padding-top: 2px;
    background-color: black;
    text-align: right;
    color: white;
}

.img-social {
    height: 30px;
    width: 30px;
    border-radius: 4px;
}

.img-social {
    float: left;
    margin-right: 10px;
}

#social-desktop {
    margin-top: 1%;
}

#endereco-m {
    max-width: 160px;
    margin: 0;
    padding: 0;
    float: left;
    margin-left: 3px;
}

#social-mobile-m {
    margin-top: 15px;
    min-height: 15px;
    height: 70%;
    width: 80px;
    z-index: 1;
    float: right;
}

.img-social-m {
    min-height: 15px;
    min-width: 15px;
    max-height: 30px;
    max-width: 30px;
    height: 60% !important;
    width: 27% !important;
    margin-right: 4px !important;
}

#banner-show {
    margin-top: 30px;
}

#conversor {
    min-width: 486px !important;
}

.input-group {
    min-width: 142px !important;
}

#banner-show {
    min-height: 258px !important;
}