/* RESPONSIVE CSS STYLESHEET
/* SNAKKLE.COM	
/* AUTHOR: Alfonso Catron
/* 14/08/2018


/* ----------- */
@media (max-width: 979px) {
/* Styles */

	body {
		width: 96% !important;
		min-width: auto;
		margin: auto
	}
	
	#w-1, #w-2 { 
		max-width: 100%;
		
	}
	
	#wrapper, #wrapper-lower, #header, #footer .footer-holder {
    	width: auto;
	}
	
	#footer .footer-holder {
    	text-align: center
	}
	
	#footer ul li {
		display: inline-block;
		float: none;
		padding: 6px;
	}


	#wrapper-lower {
/* 		display: none !important */
	}
	
	#content {
		float: none;
		width: 100%;
	}
	
	
	#header .topnav {
		float: none;
		padding: 10px 0 10px;
		text-align: left;
		display: none;
	}
	
	#header .logo {
		float: none;

	}
	
		
	.followfame {
		text-align: left !important;
		float: none !important;
		padding: 0 0 10px 0 !important;
		display: none;
	}
	
	#header .topnav li.registration{
		display: none;
	}
	
	#header .topnav li {
	    display: inline-block;
	    margin: 0 6px;
	    float: none;
	}
		

	#nav {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	    float: left;
	    font: 12px  Arial, Helvetica, sans-serif;
	    text-transform: uppercase;
	}	
		
	#content .posts-holder {
	    padding: 10px;
	}

		
	.posts-holder .post {
	    float: none;
	    padding: 0 0 9px 0;
	    margin-right: 0;
	    width: 100%;
	}
	.post img, 	.sections-holder .section img {
	    display: block;
	    width: 100%;
	    height: auto;
	}
	
	.main-post .title {
	    width: auto;
	}
	
	.section h4 {
	    left: 41px;
	    top: 0;
	    background: #333;
	    font: 9px/30px Arial, Helvetica, sans-serif;
	    text-transform: none;
	    width: 100%;
		}


	.post .title {
	    width: auto;
	    text-align: left
	}
	
	.sections-holder {
    	width: 100% !important;
    	
	}
	
	.sections-holder .section {
	    width: 45% !important;
	    margin: 0 0px 10px 0;
	}

	.section .heading {
	    top: auto !important;
	    bottom: -5px !important;
	    opacity: 0.6 !important
	}
	
	.section .holder a {
		position: relative !important;
		display: block !important;
	}
	
	.video .heading, .story .heading, .photo .heading, .section .heading  {
	    width: 100% !important;
	    height: 35px;
	    overflow: hidden !important;
	}
		
	.section .title  {
	   background: #FFF;
/* 	    padding-top: 41px; */
	}
	
	.section .title a {
	    font-size: 14px;
	}
	
	.sections-menu {
	    font: 13px/26px Arial, Helvetica, sans-serif;
	    text-transform: uppercase;
	    font-weight: bold;
	    text-align: center;
	    padding: 20px 0;
	}
	
	.sections-menu li{
	   float: none;
	   display: inline-block;
	}	
	
	
	#sidebar {
	    float: none;
	    width: 100%;
	    text-align: left;
	}
	
	
	.popular-list li.story span, .story-icon {
	    width: 229px;
	}


	#jjmelofooterbox {
	    height: auto;
	    float: none;
	    width: 97%; 
	}
	
	#rssheader {
	    width: 100%;
	}
	
	#rsstitle {
	    width: 78%;
	}
	#rssicon {
	    width: 18%;
	}
	
	
	#wrapper-lower .banner, #header .banner {
     width: 100%; 
     height: auto;
	}
	
	
	#sidebar .box h2 {
	    width: 100%;
	    float: none;
	}


	#sidebar .add-list {
	    width: 100%;
	}

	#sidebar .options {
	    width: 100%; 
	}
	
		
	.gallery-holder .about, .gallery_page .about {
	    float: none;
	    width: auto;
	}
	
	input, textarea, select {
   	 width: 100%;
	}
   	 
   	 
   	.gallery-holder .visual img {
	    max-width: 100%;
	    height: auto;
	    margin-bottom: 20px;
	}
	
	.rel-box div {
	    width: auto;
	    overflow: hidden;
	}
	
	iframe {
	    border: none;
	    max-width: 100%;
	    height: auto;
	}
	
	.gallery-holder .options-box, .gallery_page .options-box {
	     float: none; 
	}
	
	
	#content .pictures-list {
	    width: 100%;
	}
	
	.pictures-list li {
	    width: auto;
	}
	
	.add-list li {
	    width: 45%;
	}

	.add-list li .visual {
	    height: auto !important;
	}
	
	.add-list li img {
	    width: 100%;
	    height: auto;
	}
	
	.stories-nav .story-next, .stories-nav .story-prev {
	    width: 50%;
	}

}


@media (max-width: 460px) {
	
	.sections-holder .section {
	    width: 45%;
	    margin: 0 0px 10px 0;
	}
	

}


@media screen and (min-width: 721px) {
  .mobile-show{ display: none !important}
}


@media screen and (min-width: 0px) and (max-width: 720px) {
  .mobile-hide{ display: none !important}
}