/*============================== ../fonts =======================================*/

@font-face {

    font-family: 'SourceSansPro';

    src: url('../fonts/SourceSansPro-ExtraLight.eot?');

    src: url('../fonts/SourceSansPro-ExtraLight.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-ExtraLight.otf.woff?') format('woff'), url('../fonts/SourceSansPro-ExtraLight.ttf.woff?') format('truetype'), url('../fonts/SourceSansPro-ExtraLight.svg?') format('svg');

    font-style: normal;

    font-weight: 100;

}



@font-face {

    font-family: 'SourceSansPro';

    src: url('../fonts/SourceSansPro-Light.eot?');

    src: url('../fonts/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-Light.otf.woff?') format('woff'), url('../fonts/SourceSansPro-Light.ttf.woff?') format('truetype'), url('../fonts/SourceSansPro-Light.svg?') format('svg');

    font-style: normal;

    font-weight: 300;

}



@font-face {

    font-family: 'SourceSansPro';

    src: url('../fonts/SourceSansPro-Bold.eot?');

    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-Bold.otf.woff?') format('woff'), url('../fonts/SourceSansPro-Bold.ttf.woff?') format('truetype'), url('../fonts/SourceSansPro-Bold.svg?') format('svg');

    font-style: normal;

    font-weight: 700;

}



@font-face {

    font-family: 'SourceSansPro';

    src: url('../fonts/SourceSansPro-Black.eot?');

    src: url('../fonts/SourceSansPro-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-Black.otf.woff?') format('woff'), url('../fonts/SourceSansPro-Black.ttf.woff?') format('truetype'), url('../fonts/SourceSansPro-Black.svg?') format('svg');

    font-style: normal;

    font-weight: 900;

}



@font-face {

    font-family: 'SourceSansPro';

    src: url('../fonts/SourceSansPro-Regular.eot?');

    src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-Regular.otf.woff?') format('woff'), url('../fonts/SourceSansPro-Regular.ttf.woff?') format('truetype'), url('../fonts/SourceSansPro-Regular.svg?') format('svg');

    font-style: normal;

    font-weight: normal;

}



/*============================== BODY =======================================*/

html {

    height: 100%;

    min-height: 500px;

}

body {

    font-family: 'SourceSansPro', Arial, sans-serif!important;

    font-weight: 300;

    font-size: 14px;

    color: #494949;

    min-width: 320px;

    min-height: 500px;

    position: relative;

    height: 100%;

}



#myModal {display: none;}



a:hover {text-decoration: none;}

header {width:100%;height:100px;padding:15px;}

header .row {position: relative;}

#bd {display: inline-block;margin: 5px;position: absolute;top: 10px; right: 10px;

    -webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;

}

#bd img {margin: 0 0 0 15px}

#bd a {width: 22px; height: 15px;}



.logotipo {max-width: 210px;max-height: 47px;overflow: hidden;margin: 5px 0;}

.logotipo h1 {background: url("../img/logotipo.png") no-repeat;background-size: contain;text-indent: -99999px;width: 210px;height: 39px;margin: 0;}



.lingua {padding-right: 5px;}

.ultima_lingua {width: 22px; height: 15px;}

.inactive {

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

    filter: gray; /* IE6-9 */

    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

}



/*============================== FOOTER =======================================*/

footer {

    background-color:#f0f0f0;width:100%;height:90px;

    -webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;

    position: absolute;bottom: 0;

}

footer .container {padding-top:25px;height: 100%;position: relative;}

footer .container .row {height: 34px;}

footer .container .row > div {display: inline-block;vertical-align: top;}

footer .container .row div .h4, footer .container .row div .p {margin: 0 5px;vertical-align: top;display: inline-block;height: 25px;}

footer .container .row div .h4 {padding-top: 5px;}



footer .rights {width: 360px;}

footer .telefone {width: 135px;}

footer .email {width: 150px;}

footer .areaReservada, footer .imgSistemas {position: absolute;top: 20px;right: 10px;}

footer .imgSistemas {right: 140px;top: 15px;}

footer .imgSistemas img {width:165px; height:43px;}

footer .imgSistemas .links img {width:20px; height:20px;}



footer b {font-weight: 700;}

.button {background-color:#107ca4;box-shadow: 0 3px 0 #05698e;color:#fff;border:0;font-size:14px;}

.icon-sososares {font-size: 25px;}



/*============================== FOOTER =======================================*/

.login {padding: 0 20px 20px 20px !important;}

.login input {padding: 0 0 0 10px !important; border: 1px solid #107ca4;}



/*============================== CAIXAS =======================================*/

.box {width: 170px;height: 170px;display: inline-block;border-radius: 100%;margin: 15px;text-align: center;padding: 30px 15px;

    -webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;

}

#caixilharia {background-color:#107ca4;}

#caixilharia:hover {background-color:#05698e;transition: 0.7s;-webkit-transition: 0.7s;}

#vidro {background-color: #01adee;}

#vidro:hover {background-color: #0088bc;transition: 0.7s;-webkit-transition: 0.7s;}

#extrusao {background-color: #797979;}

#extrusao:hover {background-color: #5a5a5a;transition: 0.7s;-webkit-transition: 0.7s;}

#abrasivos {background-color: #585858;}

#abrasivos:hover {background-color: #3f3f3f;transition: 0.7s;-webkit-transition: 0.7s;}



.center {width: 80%;margin: 0 auto 100px;padding: 15px 0;text-align: center;}

#separador {display: none;}

.h3 {color: #fff;font-size: 17px;font-weight: normal;margin: 10px auto;width: 100%;}

.h4 {display: inline-block;color: #494949;font-size: 13px;font-weight: 900;margin: 0}

main {position: absolute;top: 35%!important;right: 0;left: 0;}

.font {font-size: 60px;color: #fff;}



/*============================== MEDIA QUERIES =======================================*/

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

    .center {width: 90%;text-align: center;}

    main {top: 30%!important;}

}



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

    main {top: 25%!important;}

    .center {width: 100%;padding: 15px 0;margin: 0 auto ;}

    .box {width: 147px;height: 150px;}

    .h3 {font-size: 14px;}

    .font {font-size: 50px}



    footer {height: 120px;}

    footer .rights, footer .telefone, footer .email {display: block!important;width: 350px;text-align: center;padding-left: 15px;}

    footer .telefone, footer .email {padding-left: 0%;}

    footer .areaReservada {top: 70px;right: 20px;}

    footer .imgSistemas {top: 15px;right: 10px;}

    .row {margin: 0;}



}



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

    main {top: 20%!important;}

    .box {width: 165px;height: 160px;}

    .h3 {font-size: 17px;}

    #separador {display: block;background-color: transparent;border: 0;}

    footer .container {margin: 0 10px;}

    .row {margin: 0;}

}



@media screen and (max-width: 768px) and (max-height: 700px) {

    main {top: 13%!important;}

}



@media screen and (max-height: 700px) {

    main {top: 25%!important;}

}



@media screen and (max-width: 768px) and (max-height: 600px) {

    main {top: 65px!important;}

    .box {width: 140px;height: 140px;padding: 22px 15px;}

    .h3 {font-size: 13px;}

    footer {bottom: -30px}

}



@media screen and (max-width: 768px) and (max-height: 500px) {

    .box {width: 110px;height: 110px;}

    .h3 {font-weight: 300;}

    .font {font-size: 35px}

}



@media screen and (max-width: 768px) and (max-height: 550px) {

    .box {width: 125px;height: 125px;}

}



@media screen and (max-height: 650px) {

    main {top: 20%!important;}

}



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

    footer > .container > .row {height: 100%;}

    footer > .container > .row > div.rights {display: block;padding: 0;}

    footer > .container > .row > div.imgSistemas {display: none;}

    .icon-sosoares {display: none;}

    footer > .container > .row > div.telefone, footer > .container > .row > div.email {display: block;}

    footer .areaReservada {top: 44px;right: 25px;}

    footer .container .row div .h4, footer .container .row div .p {display: block;}

    footer .container {padding-top: 14px;}

    footer .rights, footer .telefone, footer .email {width: 250px;}

}



@media screen and (max-height: 600px) {

    main {top: 15%!important;}

}



@media screen and (max-height: 500px) {

    main {top: 65px!important;}

}



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

    header {min-height: 100px;}

    .box {width: 140px;height: 145px;}

    .h3 {font-size: 13px;}

    .icon-sosoares {font-size: 20px!important;}

}



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

    #bd {width: 185px;margin:0 auto;display: block;position: relative;padding-left: 10px;}

    .logotipo {width: 175px;margin:0 auto;display: block;}

    footer .rights, footer .telefone, footer .email {width: 200px;}

}



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

    .box {width: 125px;height: 125px;padding: 22px 15px;}

    .h3 {font-size: 13px;}

}



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

    .box {width: 110px;height: 110px;}

    .h3 {font-weight: 300;}

    .font {font-size: 35px}

    footer .icon-sosoares {font-size: 18px!important;}

    footer .h4 {font-size: 11px;padding-top: 2px;}

    footer .p {font-size: 12px}

}