/* Media Queries */

@media screen and (max-width: 800px) {
	#border {
		width:calc(100% - 10px);
		margin:0;
		position:relative;
		left:5px;
		padding-bottom:40px;
		display:block;
		float:left;
	}
	
	/* TOP */
	#top {
		width:100%;
		position:relative;
	}
	
	#top .logo{
		margin:-23px -170px;
		padding:0;
		position:absolute;
		left:50%;
		top:50%;
	}
	
	#top .icons{
		width:auto;
		height:18px;
		display:block;
		margin:0;
		padding:0;
		position:absolute;
		bottom:5px;
		right:0;
	}
	
	/* TOP BAR */
	
	#topbar {
		width:100%;
		display:block;
		border-radius:10px 10px 0 0;
		overflow:hidden;
	}
	
	#topbar .left, #topbar .right {
		display:none;
	}
	
	#topbar .buttons{
		width:100%;
	}
	
	#topbar .buttons a{
		padding:6px 18px 0 18px;
	}
	
	#plusbtn {
		display:none;
	}
	
	/* GENERAL */
	
	#general {
		width:100%;
		background:none;
		background-color:#fff;
	}
	
	#left {
		width:100%;
		display:block;
		margin:0;
		padding:0;
		float:left;
	}
	
	#right {
		display:none;
	}

	/* Banners */
	/* 728x90 */

	#banner728x90{
		width: 100%;
		height:90px;
		padding:5px 0;
		margin:0;
	}
	
	#banner728x90 p{
		width: 728px;
		height:90px;
		margin:0 0 0 -364px;
		position:absolute;
		left:50%;
	}
	
/* GENERAL */
	
	#general {
		padding-top:60px;
	}
	
	/* TOP */
	
	#top {
		width:100%;
		height:50px;
		position:fixed;
		background-color:#4b4b4b;
		left:0;
		top:0;
		z-index:9998;
	}
	
	#top .logo{
		margin:0;
		padding:0;
		position:absolute;
		left:10px;
		top:0;
		height:50px;
		width:225px;
	}
	
	#top .logo a, #top .logo a:hover{
		width:225px;
		height:50px;
		display:block;
		margin:0;
		padding:0;
		background:none;
		background-position:0 0 !important;
		background-image:url(../images/logo_responsive.png);
	}
	
	#top .icons{
		display:none;
	}
	
	#top .btn-menu-responsive {
		width:50px;
		height:50px;
		display:block;
		float:right;
		background:url(../images/btn_menu_responsive.png) no-repeat;
	}
	
	#top .btn-search-responsive {
		width:50px;
		height:50px;
		display:block;
		float:right;
		background:url(../images/btn_search_responsive.png) no-repeat;
	}
	
	#search-bar-responsive {
		display:none;
		width:calc(100% - 50px);
		height:50px;
		position:absolute;
	}
	
	#search-bar-responsive input.textbox{
		width:calc(100% - 72px);
		height:48px;
		display:block;
		float:left;
		border:1px solid #75dafa;
		font-size:18px;
		padding:0 10px;
		color:#4b4b4b;
	}
	
	#search-bar-responsive input.btn_search {
		width:50px;
		height:50px;
		display:block;
		float:right;
		background:url(../images/btn_search_responsive.png) no-repeat;
		border:none;
	}
	
	
	/* Block Content */
					
	#block-content{
		width:100%;
		height:calc(100% - 50px);
		display:none;
		background-color:#4b4b4b;
		opacity:0.75;
		position:fixed;
		top:50px;
		left:0;
		z-index:9996;
	}
	
	#topbar {
		position:fixed;
		top:0;
		z-index:9999;
		width:60%;
		height:100%;
		background:none;
		background-color:#5f5f5f;
		right:-60%;
		border-radius:0;
	}
	
	#topbar .btn-menu-back-responsive {
		width:50px;
		height:50px;
		display:block;
		float:left;
		background:url(../images/btn_menu_back_responsive.png) no-repeat;
		position:absolute;
		left:0;
		top:0;
	}
	
	#topbar .buttons{
		width:100%;
		height:100%;
		display:block;
		float:left;
		background:none;
		overflow:auto;
		overflow-x:none;
		overflow-y:scroll;
	}
	
	#topbar .buttons a{
		padding:10px 20px 10px 0;
		margin:0;
		width:calc(100% - 20px);
		text-align:right;
		border-bottom:1px dotted #999;
		height:auto;
	}
	
	#topbar .buttons span {
		background-color: #323232;
	    border-bottom: 1px dotted #999;
	    color: #75dafa;
	    display: block;
	    float: left;
	    font-size: 22px;
	    height: 38px;
	    margin: 0;
	    padding: 12px 20px 0 0;
	    text-align: right;
	    width: calc(100% - 20px);
	}
	
	/* Mostrar/Ocultar Sidebar Menu */
	.mostrar{
		transition: transform .50s ease-in-out;
		-webkit-transition: -webkit-transform .50s ease-in-out;
		
		transform: translate3d( -100%, 0, 0);
		-webkit-transform: translate3d(-100%, 0, 0);
	}
	
	.ocultar{
		transition: transform .50s ease-in-out;
		-webkit-transition: -webkit-transform .50s ease-in-out;
		
		transform: translate3d( 0, 0, 0 );
		-webkit-transform: translate3d( 0, 0, 0 );	
	}
	
	/* INFO */
	#info {
		width:calc(100% - 10px);
	}
	
	#info img{
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius:10px 10px 0 10px;
		border-radius:10px 10px 0 10px;
		border:1px solid #75dafa;
	}
	
	#info a{
		font-weight:bold;
		color:#000;
	}
	
	#info a:hover{
		color:#75dafa;
	}
	
	#info .readmore{
		width:100%;
		display:block;
		padding:10px 0 0 0;
		margin:0;
		float:left;
	}
	
	#info .readmore a {
		width:100%;
		height:15px;
		display:block;	
		float:left;
		padding:0;
		margin:0;
		background-image:url(../images/showhide.gif);
		background-size:100% 60px;
		background-repeat: no-repeat;
	    background-position: center;
	}
	
	#info .showhide {
		width:100%;
	}
	
	/* MY SHOPPING */
	
	#myshopping {
		width:100%;
	}
	
	#myshopping_top {
		width:100%;
	}
	
	/* SUB-TITLE */
	
	#left .sub-title {
		width:calc(100% - 9.5px);
		-moz-border-radius:0;
		-webkit-border-radius:0;	
		border-radius:0;		
	}
	
	/* LIST */
	
	#list, #left .last-list {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list p, #left .last-list p{
		width:260px;
		height:210px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list a, #left .last-list a{
		width:250px;
		height:200px;
		display:block;
		margin:0;
		padding:5px;
		float:left;
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius: 10px 10px 0 10px;	
		border-radius: 10px 10px 0 10px;	
		text-decoration:none;
		color:#000;
		font-size:12px;
		line-height:17px;	
	}	
	
	#list p a img, #left .last-list p a img{
		width:250px;
		height:105px;
		display:block;
		float:left;
	}
	
	#list a strong, #left .last-list a strong{
		width:191px;
		height:19px;
		display:block;
		margin:2px 0 0 0;
		padding:1px 0 0 5px;
		float:left;
		overflow:hidden;
		white-space:nowrap;
	}
	
	/* LIST TUTORIALS */
	
	#list-tutorials {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list-tutorials p{
		width:391px;
		height:220px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list-tutorials a{
		width:381px;
		height:210px;
	}
	
	#list-tutorials a img{
		width:381px;
		height:105px;
	}
	
	#list-tutorials a strong{
		width:322px;
	}
	
	iframe[name=WidgetFontonic] {
		display:none;
	}
	
	/* GENERAL BOTTOM */
	
	#generalbottom{
		width:100%;
		height:15px;
		display:block;
		margin:0 0 70px 0;
		padding:0;
		float:left;
		background:none;
		background-color:#fff;
		border-radius:0 0 10px 10px;
	}
	
	/* BOTTOM */
	
	#bottom{	
		display:none;
	}
	
	#myshopping_top {
		margin-bottom:20px;
	}
	
	#title {
		width:calc(100% - 5px);
	}
	
	#title .round {
		display:none;
	}
	
	#title h1{
		width:100%;
	}
	
	#path, #pb-popular .popular282 {
		display:none;
	}
	
	#paging {
		width:calc(100% - 20px);
	}
	
	#paging span {
		display:none;
	}
	
	#pb-popular {
		display:none;
	}
	
	#title.title-responsive {
		position:fixed;
		width:calc(100% - 15px);
		top:50px;
		border-top:5px solid #fff;
	}
	
	#list.list-responsive {
		padding-top:31px;
	}
	
	#filter {
		width:calc(100% - 19px);
		height:auto;
		padding-top:10px;
		padding-bottom:10px;
		position:fixed;
		background-color:#fff;
		float:left;
		top:82px;
	}
	
	#filter span {
		display:none;
	}
	
	#filter a {
		width:calc(34% - 16px);
		height:auto;
		margin:5px 2.5px;
		padding:8px 0;
		text-align:center;
	}
	
	#file, #download {
		width:calc(100% - 10px);
	}
	
	#file .details, #file .details-terms {
		width:100%;
	}
	
	#file .details .image{
		width:calc(100% - 305px);
	}
	
	#file .details strong {
		width:400px;
	}
	
	#file .details-terms #terms{
		width:calc(100% - 305px);
		line-height:21px;
		text-align:justify;
	}
	
	#download p {
		width:calc(50% - 64px);
	}
	
	#download p span, #download p a.dw {
		width:100%;
	}
	
	#download p a.dw {
		padding-left:0;
		padding-right:0;
	}
	
	#download .addthis_toolbox a{
		margin-left:6px;
		margin-right:6.5px;
	}
	
}

@media screen and (max-width: 768px) {
	
	/* LIST */
	
	#list, #left .last-list {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list p, #left .last-list p{
		width:250px;
		height:210px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list a, #left .last-list a{
		width:240px;
		height:200px;
		display:block;
		margin:0;
		padding:5px;
		float:left;
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius: 10px 10px 0 10px;	
		border-radius: 10px 10px 0 10px;	
		text-decoration:none;
		color:#000;
		font-size:12px;
		line-height:17px;	
	}	
	
	#list p a img, #left .last-list p a img{
		width:240px;
		height:101px;
		display:block;
		float:left;
	}
	
	#list a strong, #left .last-list a strong{
		width:180px;
		height:19px;
		display:block;
		margin:2px 0 0 0;
		padding:1px 0 0 5px;
		float:left;
		overflow:hidden;
		white-space:nowrap;
	}
	
	/* LIST TUTORIALS */
	
	#list-tutorials {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list-tutorials p{
		width:375px;
		height:220px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list-tutorials a{
		width:365px;
		height:210px;
	}
	
	#list-tutorials a img{
		width:365px;
		height:101px;
	}
	
	#list-tutorials a strong{
		width:305px;
	}
	
	#file .details strong {
		width:370px;
	}
	
	#download .addthis_toolbox a{
		margin-left:6px;
		margin-right:3.8px;
	}
	
}

@media screen and (max-width: 640px) {
	
	#banner728x90, #info {
		display:none;
	}
	
	#info.show-msg {
		display:block;
		font-size:28px;
		line-height:28px;
		text-align:center;
		padding-top:40px;
	}
	
	#info.contact-msg {
		font-size:20px;
	}
	
	#mailing{
	    background-position: center center;
	    padding: 10px 0;
	    width: calc(100% - 5px);
	}
	
	#mailing2{
		display: block;
	    float: none;
	    height: 21px;
	    margin: 0;
	    padding: 2px 0 0;
	}
	
	#left .sub-title a {
		display:none;
	}
	
	/* LIST */
	
	#list, #left .last-list {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list p, #left .last-list p{
		width:310px;
		height:250px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list a, #left .last-list a{
		width:300px;
		height:240px;
		display:block;
		margin:0;
		padding:5px;
		float:left;
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius: 10px 10px 0 10px;	
		border-radius: 10px 10px 0 10px;	
		text-decoration:none;
		color:#000;
		font-size:16px;
		line-height:17px;	
	}	
	
	#list p a img, #left .last-list p a img{
		width:300px;
		height:126px;
		display:block;
		float:left;
	}
	
	#list a strong, #left .last-list a strong{
		width:240px;
		height:19px;
		display:block;
		margin:2px 0 0 0;
		padding:1px 0 0 5px;
		float:left;
		overflow:hidden;
		white-space:nowrap;
	}
	
	#list a span, #left .last-list a span, #list a strong, #left .last-list a strong {
		font-size:12px;
	}
	
	/* LIST TUTORIALS */
	
	#list-tutorials {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list-tutorials p{
		width:310px;
		height:200px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list-tutorials a{
		width:300px;
		height:190px;
		font-size:16px;
	}
	
	#list-tutorials a img{
		width:300px;
		height:83px;
	}
	
	#list-tutorials a strong{
		width:240px;
	}
	
	#list-tutorials a strong, #list-tutorials a span {
		font-size:12px;
	}
	
	#list.list-responsive {
		padding-top:135px;
	}
	
	#filter {
		width:calc(100% - 19px);
		height:auto;
		padding-top:10px;
		padding-bottom:10px;
		position:fixed;
		background-color:#fff;
		float:left;
		top:82px;
	}
	
	#filter span {
		display:none;
	}
	
	#filter a {
		width:calc(35% - 16px);
		height:auto;
		margin:5px 2.5px;
		padding:8px 0;
		text-align:center;
	}
	
	#file, #download {
		width:calc(100% - 10px);
	}
	
	#file .details, #file .details-terms {
		width:100%;
	}
	
	#file .details .image, #file .details span, #file .details strong{
		width:calc(100% - 320px);
	}
	
	#file .details-terms #terms{
		line-height:19.5px;
	}
	
	#download .addthis_toolbox a{
		margin-left:3px;
		margin-right:-3.2px;
	}
	
	.pb-responsive {
		display:block;
		width:100%;
		height:100px;
		float:left;
		position:fixed;
		bottom:0;
		left:0;
	}
	
	.pb-responsive p{
		display:block;
		width:320px;
		height:100px;
		float:left;
		position:absolute;
		padding:0;
		margin: 0 -160px;
		left:50%;
	}
	
}

@media screen and (max-width: 480px) {
	
	/* LIST */
	
	#list, #left .last-list {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list p, #left .last-list p{
		width:230px;
		height:200px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list a, #left .last-list a{
		width:220px;
		height:190px;
		display:block;
		margin:0;
		padding:5px;
		float:left;
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius: 10px 10px 0 10px;	
		border-radius: 10px 10px 0 10px;	
		text-decoration:none;
		color:#000;
		line-height:17px;	
	}	
	
	#list p a img, #left .last-list p a img{
		width:220px;
		height:93px;
		display:block;
		float:left;
	}
	
	#list a strong, #left .last-list a strong{
		width:160px;
		height:19px;
		display:block;
		margin:2px 0 0 0;
		padding:1px 0 0 5px;
		float:left;
		overflow:hidden;
		white-space:nowrap;
	}
	
	/* LIST TUTORIALS */
	
	#list-tutorials {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list-tutorials p{
		width:230px;
		height:170px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list-tutorials a{
		width:220px;
		height:160px;
	}
	
	#list-tutorials a img{
		width:220px;
		height:61px;
	}
	
	#list-tutorials a strong{
		width:160px;
	}
	
	#file, #download {
		width:calc(100% - 10px);
	}
	
	#file .details #pb, #file .details-terms #pb {
		display:none;
	}
	
	#file .details, #file .details-terms {
		width:100%;
	}
	
	#file .details .image{
		width:100%;
		text-align:center;
		padding-top:10px;
		height:auto;
	}
	
	#file .details .image img{
		width:100%;
	}
	
	#file .details span{
		width:100%;
		padding-top:8px;
		padding-bottom:8px;
		background-color:#ededed;
		text-align:center;
		margin:10px 0;
	}
	
	#file .details strong{
		width:calc(100% - 5px);
		text-align:center;
	}
	
	#file .details-terms #terms{
		width:100%;
		line-height:19.5px;
	}
	
	#file .details-terms #pb {
		display:block;
		width:100%;
		float:left;
	}
	
	#download p {
		width:100%;
		padding:0;
		margin-top:10px;
	}
	
	#download p span, #download p a.dw {
		width:100%;
	}
	
	#download p a.dw {
		padding-left:0;
		padding-right:0;
	}
	
	#download .addthis_toolbox {
		margin-top:20px;
		position:relative;
		left:-22px;
	}
	
	#download .addthis_toolbox a{
		margin-left:22px;
		margin-right:4px;
	}
	
}

@media screen and (max-width: 360px) {
	
	#pb-popular {
		display:block;
		width:100%;
	}
	
	#pb-popular .pb336 {
		padding:15px 24px 15px 26px;
	}
	
	/* LIST */
	
	#list, #left .last-list {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list p, #left .last-list p{
		width:349px;
		height:240px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list a, #left .last-list a{
		width:339px;
		height:230px;
		display:block;
		margin:0;
		padding:5px;
		float:left;
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius: 10px 10px 0 10px;	
		border-radius: 10px 10px 0 10px;	
		text-decoration:none;
		color:#000;
		line-height:17px;	
	}	
	
	#list p a img, #left .last-list p a img{
		width:339px;
		height:143px;
		display:block;
		float:left;
	}
	
	#list a strong, #left .last-list a strong{
		width:279px;
		height:19px;
		display:block;
		margin:2px 0 0 0;
		padding:1px 0 0 5px;
		float:left;
		overflow:hidden;
		white-space:nowrap;
	}
	
	/* LIST TUTORIALS */
	
	#list-tutorials {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list-tutorials p{
		width:349px;
		height:200px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list-tutorials a{
		width:339px;
		height:190px;
	}
	
	#list-tutorials a img{
		width:339px;
		height:94px;
	}
	
	#list-tutorials a strong{
		width:279px;
	}
	
	#download .addthis_toolbox {
		margin-top:20px;
		position:relative;
		left:-10px;
	}
	
	#download .addthis_toolbox a{
		margin-left:5px;
		margin-right:3px;
	}
}

@media screen and (max-width: 320px) {
	
	#top .logo a, #top .logo a:hover{
		width:200px;
		height:44px;
		display:block;
		margin:3px 0 0 0;
		padding:0;
		background:none;
		background-position:0 0 !important;
		background-image:url(../images/logo_responsive.png);
		background-size:200px 44px;
	}
	
	/* LIST */
	
	#list, #left .last-list {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list p, #left .last-list p{
		width:309px;
		height:240px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list a, #left .last-list a{
		width:299px;
		height:230px;
		display:block;
		margin:0;
		padding:5px;
		float:left;
		-moz-border-radius:10px 10px 0 10px;
		-webkit-border-radius: 10px 10px 0 10px;	
		border-radius: 10px 10px 0 10px;	
		text-decoration:none;
		color:#000;
		line-height:17px;	
	}	
	
	#list p a img, #left .last-list p a img{
		width:299px;
		height:126px;
		display:block;
		float:left;
	}
	
	#list a strong, #left .last-list a strong{
		width:239px;
		height:19px;
		display:block;
		margin:2px 0 0 0;
		padding:1px 0 0 5px;
		float:left;
		overflow:hidden;
		white-space:nowrap;
	}
	
	/* LIST TUTORIALS */
	
	#list-tutorials {
		width:calc(100% - 5px);
		display:block;
		margin:0;
		padding:5px 5px 5px 0;
		float:left;
	}
	
	#list-tutorials p{
		width:309px;
		height:185px;
		display:block;
		margin:0 0 0 1px;
		padding:0;
		float:left;
	}
	
	#list-tutorials a{
		width:299px;
		height:175px;
	}
	
	#list-tutorials a img{
		width:299px;
		height:82px;
	}
	
	#list-tutorials a strong{
		width:239px;
	}
	
	#file .details-terms #terms{
		line-height:18px;
		text-align:justify;
	}
	
	#download .addthis_toolbox {
		margin-top:20px;
		position:relative;
		left:5px;
	}
	
	#download .addthis_toolbox a{
		margin-left:-10px;
		margin-right:12px;
	}
}