/* ----------------- RESPONSIVE ----------------- */

/*Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px){


.menu-right {
    width: calc(100% - 510px);
    float: left;
    position: relative;
}

.menu{
    width: 100%;
    height: auto;
    padding: 0px;
    font-size: 13px;
    border-radius: 0px;
}

.menu ul {
    position: static;
    display: none;
    border:  0px;
}

.menu ul li, .menu li a {
    width: 100%;
    text-align:left;
    padding: 0 0 5px 0;
}


.show-menu {
    display:block;
cursor: pointer;}

.menu input[type=checkbox]:checked ~ #menu {
    margin: 0 auto;
}

}   


/*Large devices (desktops)*/

@media (max-width: 1050px){

body {
overflow-x: hidden;}

#header{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 450px;} 

#featured .message-menu .logo {
    width: 100%;
    margin-top: 0;
    background: #b3c5ca url(imgs/logom.png) top center no-repeat;
    height: 180px;}

.menu{
    width: 100%;
    height: auto;
    padding: 0px;
    font-size: 13px;
    margin: 0 auto;
    background: #b7cbd0;}

.menu ul {
    position: static;
    display: none;
    border:  0px;}

.menu ul li a{
    background: rgb(121, 151, 158);}   

.menu ul li, .menu li a {
    width: 100%;
    text-align:left;
    padding: 5px 0 5px 5px;}

.menu a:hover {
    border-bottom: 0px;
   opacity: 0.7;}

.show-menu {
    display:block;
    cursor: pointer;}

.menu input[type=checkbox]:checked ~ #menu {
    width: 95%;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.03);
    padding: 20px;}

.menu-right {
    width: 100%;
    float: left;
    position: relative;}

.welcome{
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 0;}

.banner{
    display: none;}
    
#content {
width: 95%;}

 #featured-left {
    height: auto;
    width: 100%;
    margin-bottom: 20px;}

 #featured-right {
    height: auto;
    width: 100%;
    margin-bottom: 20px;}

#featured-post{
    height: auto;}

#featured-post .featured-infos .featured-credit{
    padding-bottom: 10px;}

.cards {
    width: 100%;
    margin-bottom: 20px;}

.card-text{
    height: auto;}    

.card{
    width: calc(100% / 2 - 20px / 2);}

.card:nth-child(2){
    margin-right: 0px;}

.card:nth-child(4){
    margin-right: 0px;}

.card:nth-child(3){
    margin-right: 20px;}

.gallery-title{
    width: 100%;
    text-align: center;}

.gallery-title img {
    height: auto;
    max-width: 391px;
    width: 100%;}

	.picture {
    width: calc(100% / 5);}
	
.links{
    width: 100%;
    text-align:center;}
        
.post {
max-width: 65%; width: 65%;}

#sidebar {
max-width: 30.3%;}

#footer {
width: 100vw!important;}

#footer .inner {
width: 92vw!important;}

iframe, video, embed, img {
max-width: 100%;}

}

/*Large devices (desktops, 992px and up)*/
@media (max-width: 992px){

.menu{
    width: 100%;}

#search-home{
    width: 100%;
    background: transparent;}

#featured .message-menu{
    padding: 0px;}

 #featured-left {
    height: auto;
    width: 100%;
    margin-bottom: 20px;}

#featured-post {
    height: auto;}

#featured-post .featured {
    height: auto;}

#featured-right {
    width: 100%;}

}

/*Medium devices (tablets, 768px and up)*/
@media (max-width: 768px){

#header{
    height: 400px;}    

#main {
    width: 100%;}

#content {
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;}

.card{
    margin: 0 auto;
    width: 100%;
    margin-bottom: 20px;
}

.card-posts{
    width: 100%;}

#box-afiliates{
    width: 100%;
    margin-bottom: 20px;}

.box-agenda{
    width: 100%;
margin-bottom: 20px;}

.agenda-slide{
    font-size: 10px;}

.box-spotify{
    width: 100%;}
        
#sidebar{
float: none;
width: 100%; 
max-width: 100%;}

#footer {
max-width: 100%;
font-size: 9px;}

.post, .comments, .comments input[type=text], textarea, #cdisplay li {
width: 100%;
 max-width: 100%;
 float: none;}

.post-title a, .post .h3 {
font-size: 22px;}

.post .post-info, .post .post-footer  {
font-size: 14px;}

.entry img, .entry a.img {
max-width: 90%!important;}

.post .featured {
text-align: center;}

.post .featured img {
max-width: 100%!important; 
height: auto!important;}

.wp-caption {
display: none;}

.wp-caption p.wp-caption-text {
display: none;}

iframe, video, embed, img {
max-width: 100%;}

}


/*Small devices (landscape phones, 576px and up)*/

@media(max-width: 576px){


#header{
    height: 300px;}    

.picture {
    width: calc(100% / 5);}
    
#twitter{
width: 100%;
margin-bottom: 20px;}

#facebook {
width: 100%;
margin-bottom: 20px;}

#sidebar {
max-width: 100%;
 float: none;}

#featured {
max-width: 100%;}

#footer {
max-width: 100%;}

#footer .inner {
width: 80vw!important;}

.post, .comments, .comments input[type=text], textarea, #cdisplay li { 
 max-width: 100%;}

.post-title a, .post .h3 {
font-size: 22px;}

.post .post-info, .post .post-footer  {
font-size: 13px;}

.entry img, .entry a.img {
max-width: 90%!important; }

.post .featured {
text-align: center;}

.post .featured img {
max-width: 100%!important; 
height: auto!important;}

.wp-caption {
display: none;}

.wp-caption p.wp-caption-text {
display: none;}

iframe, video, embed, img {
max-width: 100%;}

}

@media  (max-width : 480px){

.post, .comments, .comments input[type=text], textarea, #cdisplay li { 
 max-width: 100%; 
 float: none;}

.post-title a, .post .h3 {
font-size: 22px;}

.post .post-info, .post .post-footer  {
font-size: 9px;}

.entry img, .entry a.img {
max-width: 90%!important;}

.post .featured {
text-align: center;}

.post .featured img {
max-width: 100%!important;
 height: auto!important;}

.wp-caption {
display: none;}

.wp-caption p.wp-caption-text {
display: none;}

iframe, video, embed, img {
max-width: 100%;}

}

@media (max-width: 360px){

#footer {
text-align: center;}

.post, .comments, .comments input[type=text], textarea, #cdisplay li { 
 max-width: 100%;
 float: none;}

.post-title a, .post .h3 {
font-size: 20px;}

.post .post-info, .post .post-footer  {
font-size: 9px;}

.entry img, .entry a.img {
max-width: 70%!important; 
}

.post .featured {
text-align: center;}

.post .featured img {
max-width: 100%!important; 
    height: 300px;}

.wp-caption {
display: none;}

.wp-caption p.wp-caption-text {
display: none;}

iframe, video, embed, img {
max-width: 100%;}

}

@media (max-width: 240px){


#content {
font-size: 90%;}

#footer {
text-align: center;}

.post, .comments, .comments input[type=text], textarea, #cdisplay li {
  max-width: 100%; 
  float: none;}
  
.post-title a, .post .h3 {
font-size: 15px;}

.entry img, .entry a.img {
max-width: 80%!important;}
 
.post .featured {
text-align: center;}
    
.post .featured img {
max-width: 90%!important;
 height: auto!important;}

.wp-caption {
display: none;}

.wp-caption p.wp-caption-text {
display: none;}

iframe, video, embed, img {
max-width: 100%;}

}