/* media queries para ajustes responsive */


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


/* MEDIA QUERIES PARA LARGURA */


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


/* media query para tamanho dos elementos quando a largura é < que 1800px */

@media screen and (max-width: 1800px) {
    /* secção INFOBLUE */
    .title {
        font-size: 5em;
        text-align: right;
        margin-right: 20%;
    }
    .subtitle {
        text-align: right;
        margin-right: 20%;
    }
    .description {
        text-align: right;
        margin-right: 20%;
    }
    /* secção MARCAS */
    .title2 {
        font-size: 5em;
        text-align: right;
        margin-right: 20%;
    }
    .details h4 {
        font-size: 20px;
        font-family: 'Raleway';
        text-align: center;
        margin-top: 15%;
    }
    .details-netpet h4 {
        margin-top: 40%;
    }
    .details p {
        font-family: 'Raleway';
        font-size: 13px;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }
    .brand-site {
        margin-left: auto;
        margin-right: auto;
        text-align: center!important;
    }
    /* secção CONTACTOS */
    .address {
        margin-right: 20%;
    }
}


/* media query para tamanho dos elementos quando a largura é < que 1366px */

@media screen and (max-width: 1366px) {
    /* secção INFOBLUE */
    #bridge {
        width: 55%;
    }
    #infoblue-txt {
        width: 45%;
    }
    .title {
        font-size: 54px;
    }
    .subtitle {
        font-size: 25px;
        font-weight: 300;
    }
    .description {
        font-size: 15px;
    }
    /* secção MARCAS */
    #brandpics {
        width: 57%;
    }
    #brand-txt {
        width: 43%;
    }
    .title2 {
        font-size: 54px;
    }
    .address {
        font-size: 15px;
    }
    .details h4 {
        font-size: 18px;
        font-family: 'Raleway';
        text-align: center;
        margin-top: 7%;
    }
    .details-netpet h4 {
        margin-top: 40%;
    }
    .details p {
        font-family: 'Raleway';
        font-size: 11px;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }
    .brand-site {
        margin-left: auto;
        margin-right: auto;
        text-align: center!important;
    }
}


/* media query para tamanho dos elementos quando a largura é < que 1200px */

@media screen and (max-width: 1200px) {
    /* secção INFOBLUE */
    #infoblue-section {
        height: 100%;
    }
    #brand-section,
    #contact-section {
        height: auto;
    }
    .title {
        font-size: 4em;
        text-align: right;
        margin-right: 10%;
    }
    .subtitle {
        font-size: 1.8em;
        text-align: right;
        margin-right: 10%;
    }
    .description {
        text-align: justify;
        margin-right: 10%;
    }
    /* secção MARCAS */
    .title2 {
        font-size: 4em;
        text-align: right;
        margin-right: 10%;
    }
    .details h4 {
        font-size: 16px;
        font-family: 'Raleway';
        text-align: center;
        margin-top: 5%;
    }
    .details-netpet h4 {
        margin-top: 30%;
    }
    .details p {
        font-family: 'Raleway';
        font-size: 11px;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }
    .brand-site {
        margin-left: auto;
        margin-right: auto;
        text-align: center!important;
    }
    /* secção CONTACTOS */
    .address {
        margin-right: 10%;
    }
}


/* media query para o texto dos efeitos rollover em MARCAS */

@media screen and (max-width: 1050px) {
    #infoblue-section {
        height: 100%;
    }
    #brand-section {
        height: auto;
    }
    #contact-section {
        height: auto;
    }
    .details h4 {
        font-size: 15px;
        font-family: 'Raleway';
        text-align: center;
        margin-top: 3%;
    }
    .details-netpet h4 {
        margin-top: 30%;
    }
    .details p {
        font-family: 'Raleway';
        font-size: 11px;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }
    .brand-site {
        margin-left: auto;
        margin-right: auto;
        text-align: center!important;
    }
}


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


/* media query para tamanho dos elementos quando a largura é < que 992px */

@media screen and (max-width: 992px) {
    /* CSS RULES FOR HTML, BODY */
    html,
    body {
        height: 700px;
    }
    /* secção header */
    .logo {
        width: 30%;
    }
    /*secção landing */
    /*.text-group {
        margin-top: 25%;
        box-sizing: border-box;
    }*/
    .text-group h2 {
        font-size: 36px!important;
    }
    .text-group p {
        font-size: 24px!important;
    }
    #netpet-logo {
        width: 15%;
        margin-top: 2%;
    }
    #lareira-logo {
        max-width: 30%;
    }
    #leiloar-logo {
        max-width: 35%;
    }
    #SDP-logo {
        max-width: 20%;
    }
    /* secção INFOBLUE */
    #bridge {
        height: 600px;
    }
    .title {
        font-size: 54px;
        text-align: center;
    }
    .subtitle {
        text-align: center;
        margin: 0;
    }
    .description {
        text-align: justify;
        margin-left: 5%;
        margin-right: 2.5%;
    }
    /* secção MARCAS */
    #brandpics {
        height: 100%;
        float: left;
        padding-top: 3%!important;
        box-sizing: border-box;
        position: relative;
        left: 0;
    }
    .brandpic {
        margin: 1% 3% 0 0;
        overflow: hidden;
    }
    .title2 {
        font-size: 50px;
        text-align: center;
        margin-right: 0;
        margin-bottom: 5%;
    }
    .p2 {
        margin-bottom: 10%;
    }
    .p3 {
        margin-bottom: 20%;
    }
    #dog {
        width: 100%;
    }
    #food {
        width: 100%;
    }
    #auction {
        width: 100%;
    }
    #SDP {
        width: 100%;
    }
    #SDP-brand {
        margin-top: 1%;
    }
    .transparency {
        background-color: rgba(90, 90, 90, 0.5);
        float: left;
        position: absolute;
        left: 0%;
        width: 100%;
        height: 100%;
    }
    .netpet,
    .lareira,
    .l2b {
        width: 100%;
    }
    .details h4 {
        font-size: 18px;
        font-family: 'Raleway';
        text-align: center;
        margin-top: 7%;
    }
    .details-netpet h4 {
        margin-top: 30%;
    }
    .details p {
        font-family: 'Raleway';
        font-size: 12px;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }
    .brand-site {
        margin-left: auto;
        margin-right: auto;
        text-align: center!important;
    }
    /* secção CONTACTO */
    #name,
    #email,
    #message {
        margin: 0;
        width: 100%;
        margin-bottom: 1%;
        padding-left: 1%;
        right: 1%;
    }
    #mq-visible-992 {
        display: block;
        float: left;
    }
    .address {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
    }
    .p2 {
        margin-bottom: 0;
    }
    #mq-invisible-992 {
        display: none;
    }
    #form-map-container {
        left: 1%;
    }
    #map {
        width: 95%;
    }
    /* secção footer */
    .copyright {
        font-size: 12px;
    }
    .powered-by {
        font-size: 12px;
    }
}


/* media query para tamanho dos elementos quando a largura é < que 768px */

@media screen and (max-width: 768px) {
    /* CSS RULES FOR HTML, BODY */
    html,
    body {
        height: auto;
    }
    /* CSS LANDING SECTION */
    #landing {
        height: 750px;
    }
   
    .height100 {
        height: auto;
    }
    .text-group {
        margin-top: 50%;
        box-sizing: border-box;
    }
    .text-group h2 {
        font-size: 26px!important;
    }
    .text-group p {
        font-size: 18px!important;
    }
    #netpet-logo {
        width: 20%;
    }
    #lareira-logo {
        max-width: 50%;
    }
    #leiloar-logo {
        max-width: 50%;
        margin-top: 5%;
    }
    #SDP-logo {
        max-width: 30%;
    }
    /* INFOBLUE section */
    #mq-visible-768 {
        display: block;
    }
    /* esta declaração de CSS aplica-se também à secção MARCAS porque usam a mesma classe */
    .mq-invisible-768 {
        display: none;
    }
    .mq-title {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }
    #bridge {
        width: 100%;
        height: 300px;
    }
    /* BRAND section */
    .absolute-center {
        margin: auto;
        position: absolute;
        top: 60%;
        left: 0;
        bottom: 0;
        right: 0;
    }
    #mq-visible-768-v2 {
        display: block;
    }
    #brandpics {
        width: 100%;
        height: 100%;
        float: left;
        padding-top: 3%!important;
        box-sizing: border-box;
        position: relative;
        left: 0;
    }
    .details h4 {
        font-size: 30px;
        font-family: 'Raleway';
        text-align: center;
        margin-top: 10%;
    }
    .details-netpet h4 {
        margin-top: 30%;
    }
    .details p {
        font-family: 'Raleway';
        font-size: 18px;
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }
    .brand-site {
        margin-left: auto;
        margin-right: auto;
        text-align: center!important;
    }
    /* CONTACT section */
    #mq-768-padding-override {
        padding-right: 10px;
        padding-left: 10px;
        margin-right: auto;
        margin-left: auto;
    }
    #mq-visible-992 {
        float: none;
    }
    .mq-title2 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }
    #mq-brand-p3 {
        margin-bottom: 5%;
    }
    #mq-description {
        margin-bottom: 10%;
    }
    #form-map-container {
        left: 0;
    }
    #name,
    #email {
        width: 100%;
        float: none;
        margin: 0em 0em 0.5em 0em;
    }
    #footer {
        height: 30px;
    }
    .copyright {
        font-size: 10px;
        margin-top: 1%;
        margin-bottom: 1%;
        margin-left: -35px;
    }
    .powered-by a img {
        width: 100%;
        margin-top: 15%;
        margin-bottom: 3%;
    }
}


/* MEDIA QUERY para posição das marcas na secção LANDING */

@media screen and (max-width: 500px) {
    .text-group {
        margin-top: 60%;
    }
}