/****************
Layout Responsive
*****************/

/* 
1º Breakpoint: 1070px
*/

@media only screen and (max-width: 1070px){
    
    .wrapper{
        width: 100%;
    }
    div#especies-fixed-navigation{
        top: 165px;
    }
    div.especies-box{
        padding: 20px 55px 20px 40px;
    }
    div.content-inner div.passos-box ul li.fifth-element{
        left: 801px;
        right: none;
    }

        /* Comprovacions 

div.content-inner{
	color:green;
} */

}
    
/****************
Layout Responsive
*****************/

/* 
1º Breakpoint: 992px
*/

@media only screen and (max-width: 992px){
    
    .wrapper{
        width: 99%;
         -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    div.left-navigation{
        background: none;
        width: 91%;
    }
    div.right-navigation{
        background: none;
        left: auto;
        top: 293px;
        left: 44px;
        width: 91%;
        height: 185px;
    }
    div.right-navigation div.brcm-navigation{
        border-radius: 5px;
    }
    div.left-navigation li.brcm-first-item{
        margin-top: 0px;
    }
    div.left-navigation li.brcm-first-item a{
        border: 5px solid #fff;
    }
    div.left-navigation li.first-element{
        margin-top: 17px;
    }
    div.left-navigation li{
        margin-top: 17px;
    }
    div.left-navigation li.third-element, div.left-navigation li.fourth-element, div.left-navigation li.fifth-element{
        margin-left: 12px;
    }
    div.right-navigation div.brcm-navigation{
        border: 5px solid #fff;
    }
    div.left-navigation li a{
        width: auto;
    }
    div.brcm-newsletter-subscription div.brcm-fields{
        margin-left: 0px;
    }
    div.brcm-newsletter-subscription div.brcm-invitation{
        text-align: left;
    }
    div.left-navigation li.brcm-active-node a{
        width: auto;
    }
    div.left-navigation li.brcm-active-node{
        background: none;
    }
    body.especies div.content-inner div.title-box{
        width: 99%;
    }
    body.especies div.content-inner h1{
        background: rgba(106, 106, 106, 0.8);
        width: 85%;
        height: 48px;
        width: 100%;
        text-align: center;
        margin: 0px;
        padding: 10px 0px;
    }
    div.title-box ul.especies-navigation{
        position: static;
        width: 90%;
    }
    div.title-box ul.especies-navigation li.second-row{
        margin-top: 0px;
    }
    div.title-box ul.especies-navigation li.first-elem{
        margin-left: 0px;
    }
    div.title-box ul.especies-navigation li{
        margin-top: 0px;
        height: 180px;
        background: #fff;
        width: 106px;
        margin-right: 3px;
        margin-bottom: 3px;
    }
    div.title-box ul.especies-navigation li div.image-box{
        padding-top: 20px;
        height: 108px;
    }
    body.especies div.content-inner div.brcm-group-of-images{
        left: 21%;
    }
    body.especies div.content-inner h1{
        height: auto;
        float: left;
        margin-bottom: 4px;
        font-size: 1.4em;
    }
    div.floating-message{
        display: none;
    }
    div.content-inner div.horizontal-especies{
        display: none;
    }
    div.last-news{
        margin-left: 0px;
        top: 450px;
        width: 98.5%;
    }
    div.content-inner div.passos-box ul{
        background: #fff;
        float: left;
        width: 100%;
    }
    div.content-inner div.passos-box ul li{
        background: none;
        float: left;
        position: static;
    }
    div.content-inner div.passos-box ul li.first-element, div.content-inner div.passos-box ul li.second-element, div.content-inner div.passos-box ul li.third-element, div.content-inner div.passos-box ul li.fourth-element, div.content-inner div.passos-box ul li.fifth-element{
        background: none;
        float: left;
        position: static;
        width: 19%;
        border-right: 1px solid #E8E8E8;
        padding: 18px 0px 1px 0px;
    }
    div.content-inner div.passos-box ul li.fifth-element{
        border-right: 0px;
    }
    div.left-navigation li.third-element.brcm-active-node, div.left-navigation li.fourth-element.brcm-active-node, div.left-navigation li.fifth-element.brcm-active-node{
        margin-left: 0px;
    }  
    body.resultats-esperats div.content-inner div.title-box{
        background: rgba(106, 106, 106, 0.8);
        width: 85%;
        height: 150px;
        width: 100%;
        text-align: center;
        margin: 0px;
        padding: 10px 0px;
    }
    
    
    /* Comprovacions 

div.content-inner{
	color:red;
} */

}


/****************
Layout Responsive
*****************/

/* 
2º Breakpoint: 680px
*/

@media only screen and (max-width: 680px){
    
    div.content-inner div.brcm-newsletter-subscription input[type="submit"]{
        margin-top: 10px;
        clear: left;
    }
    div.content-inner div.brcm-newsletter-subscription input[type="text"]{
        margin-top: 10px;
        width: 90%;
    }
    div.brcm-newsletter-subscription label{
        margin-bottom: 0px;
        float: left;
        margin-top: 8px;
    }
    div.content-inner div.brcm-newsletter-subscription h2{
        font-size: 1.6em;
    }
    body.especies div.content-inner div.title-box{
        height: 648px;
    }
    div.especies-definition{
        margin-top: 500px;
    }
    body.especies div.content-inner div.brcm-group-of-images{
        left: 16%;
    }
    div#especies-fixed-navigation{
        display: none;
    }
    div.title-box ul.especies-navigation{
        width: 100%;
    }
    div.last-news{
        top: 474px;
    }
    div.content-inner div.passos-box h3{
        font-size: 1.5em;
    }
    a.life-button{
        width: 74%;
        background: #488F9F;
        padding: 9px 35px;
    }
    a.news-button{
        width: 74%;
        background: #488F9F;
        padding: 9px 35px;
    }
    div.center{
        width: 100%;
    }
    div.news-bt{
        width: 100%;
    }
    
    
     /* Comprovacions 

div.content-inner{
	color:red;
} */

}


/****************
Layout Responsive
*****************/

/* 
2º Breakpoint: 542px
*/

@media only screen and (max-width: 542px){
    
    #header{
        min-height: 786px;
    }
    div.right-navigation{
        width: 90%;
        top: 495px;
        left: 10px;
    }
    #header div.nuvols-box{
        display: none!important;
    }
    div.left-navigation{
        top: 253px;
        left: 10px;
    }
    div.left-navigation li.brcm-first-item{
        width: 100%;
    }
    div.right-navigation ul li{
        width: 87%;
    }
    div.right-navigation a, div.right-navigation li{
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    div.left-navigation li.brcm-first-item{
        width: 100%;
    }
    div.left-navigation li.brcm-first-item a{
        width: 100%;
        border-radius: 5px;
    }
    div.left-navigation li.first-element{
        margin-top: 0px;
    }
    div.left-navigation li a{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 0px;
        width: 100%;
        float: left;
    }
    div.left-navigation li{
        width: 94%;
         -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 0px;
    }
    div.content-inner{
        top: 0px;
    }
    div.signature{
        width: 100%;
    }
    .wrapper{
        width: 95%;
    }
    div.generic-box{
        padding: 20px;
    }
    div.header-inner div.logo{
        float: none;
        margin: 0 auto;
        position: static;
        width: 207px;
    }
    div.header-inner div.right-box{
        float: none;
        margin: 0 auto;
        position: static;
        width: 250px;
    }
    div.signature ul{
        width: 189px;
        float: none;
        margin: 0 auto;
    }
    div.signature ul li.last-item{
        float: left;
        margin-top: 11px;
        margin-left: 0px;
        line-height: 150%;
    }
    div.content-inner h2{
        font-size: 2.2em;
        margin-top: 10px;
    }
    body.especies div.content-inner div.title-box{
        top: 0px;
        left: 0px;
        width: 100%;
    }
    body.especies div.content-inner h1{
        padding: 10px 25px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    div.especies-definition{
        margin-top: 900px;
    }
    body.especies div.content-inner div.brcm-group-of-images{
        left: 0%;
    }
    body.especies div.content-inner div.brcm-group-of-images{
        top: -322px;
    }
    div.especies-box{
        padding: 20px 14px;
    }
    div.last-news{
        position: static;
        float: left;
        margin-left: 0px;
        width: 100%;
        margin-bottom: 20px;
    }
    body.home div.content-inner{
        margin-top: 62px;
    }
    div.zona-box{
        padding: 20px;
    }
    body.resultats-esperats div.naiade-box ul li.naiade-elem, body.resultats-esperats div.naiade-box div.left-box, div.cranc-box div.right-box-cranc span.first-span, div.cranc-box div.first-box div.right-box-cranc ul li, div.second-box div.right-box-second-cranc span.first-cranc-2, div.second-box div.right-box-second-cranc span.second-cranc-2, div.second-box div.right-box-second-cranc div.img-cranc{
        opacity: 1!important;
    }
    body.resultats-esperats div.content-inner{
        margin-top: 305px;
    }
    
    
    
    
        /* Comprovacions 

div.content-inner{
	color:blue;
} */

}

/****************
Layout Responsive
*****************/

/* 
2º Breakpoint: 420px
*/

@media only screen and (max-width: 420px){
    
    body.especies div.content-inner div.brcm-group-of-images{
        top: -252px;
    }
    div.content-inner h2{
        font-size: 1.5em;
    }
    div.header-inner div.right-box{
        width: 100%;
        margin-left: 11px;
        float: left;
    }
    body.home div.brcm-body h2{
        font-size: 1.5em;
    }
    div.brcm-generic-element-with-images-on-the-right, div.brcm-generic-element-with-images-on-the-left, div.brcm-generic-element-with-image-gallery, div.brcm-generic-element-with-big-images, div.brcm-list-of-attachments, div.brcm-list-of-subpages, div.brcm-form, div.generic-box{
        padding: 20px;
    }
    a.life-button{
        padding: 9px 5px;
        font-size: 1.0em;
        width: 100%;
    }
    a.news-button{
        padding: 9px 5px;
        font-size: 1.0em;
        width: 100%;
    }
    div.content-inner div.passos-box ul li.first-element, div.content-inner div.passos-box ul li.second-element, div.content-inner div.passos-box ul li.third-element, div.content-inner div.passos-box ul li.fourth-element, div.content-inner div.passos-box ul li.fifth-element{
        width: 100%;
        height: auto;
        border-right: 0px;
        border-bottom: 1px solid #E8E8E8;
        padding: 10px 0px 20px 0px;
    }
    div.content-inner div.passos-box ul li.fifth-element{
        border-bottom: 0px;
    }
    div.passos-box{
        height: auto;
    }
    
    
            /* Comprovacions 

div.content-inner{
	color:blue;
} */

}


/****************
Layout Responsive
*****************/

/* 
2º Breakpoint: 380px
*/

@media only screen and (max-width: 380px){
    
    
    div.brcm-newsletter-subscription{
        background: none;
        border: 0px;
        border-top: 1px dotted #8E9FA0;
        padding: 10px 0px;
    }
    div.especies-definition{
        margin-top: 1200px;
    }
    body.especies div.content-inner div.brcm-group-of-images{
        top: -224px;
    }
    div.header-inner div.right-box ul li{
        width: 42%;
        margin-top: 13px;
    }
    
            /* Comprovacions 

div.content-inner{
	color:blue;
} */

}


/****************
Layout Responsive
*****************/

/* 
2º Breakpoint: 320px
*/

@media only screen and (max-width: 320px){
    
    body.especies div.content-inner div.brcm-group-of-images{
        top: -144px;
    }
    
                /* Comprovacions 

div.content-inner{
	color:blue;
} */

}