.blog-title {
    font-size: 20px !important;
    letter-spacing: -1px !important;
}

.h-entry p {
    margin-top: 10px !important;
}

.leia-mais {
    margin-bottom: 20px;
    margin-top: 15px;
}

.mybuttom-small {
    padding: 10px 10px 10px 10px !important;
}

.material-image {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin-top: 15px;
}

.h-entry img {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.h-entry a {
    text-decoration: underline;
}

.titulo-blog {
    margin-bottom: 15px;
}


/* this stylesheet contains some example styling for the blog pages. For the full layout you will require the default Perch Quill Feather. Feel free to edit  */

.date {
    font-weight: bold;
    padding: 0.5em 0 0 0;
    padding-bottom: 10px;
}

.comments {
    border-bottom: 1px dotted #DEE0E0;
}

.author h2 {
    font-size: 107.7%;
    margin-top: 0;
}



@media only screen and (min-width: 700px) {
    .comments li {
       overflow: auto;
    }

    .comments img,
    .author img {
        float: left;
        margin-right: 2.8571429%; /* 20 / 700 */
        margin-bottom: 20px;
        width: 12.8571429%; /* 90 / 700 */
    }
    
    .comments .comment,
    .author .author {
        float: right;
        width: 83.5714286%; /* 585 / 700 */
    }

    .author:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

}

/* ==========================================================================
   First Break: max-width: 619px - Mobile Portrait to Mobile Landscape
   ========================================================================== */

@media screen and (max-width: 617px) { 

.wrapper-blog {
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
}

}

/* ===============================================================================================
   Second Break: 620px to 1024px - All Mobile Sizes + Tablet Portrait to Tablet Landscape 
   =============================================================================================== */

@media screen and (min-width: 618px) and (max-width: 1024px) { 

.wrapper-blog {
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
}

    }


/* ==========================================================================
Third Break: min-width: 1025px - Standard Desktop
========================================================================== */
    
@media screen and (min-width: 1025px) { 

.wrapper-blog {
    width: 80%;
    margin: 0 auto;
    margin-top: 130px;
    max-width: 1024px;
}

}

/* ==========================================================================
Third Break: min-width: 1025px - Standard Desktop
========================================================================== */
    
@media screen and (min-width: 1260px) { 

.wrapper-blog {
    padding-left: 30px !important;
}

}

/* *** 2. SECTION SPECIFIC STYLING *** */

img.logo {
    border: none;
    margin: 20px 0 10px 0;
}

.company-name {
	margin: 0 0 0.5em 0;
}

/* *** MAIN-NAV *** */
.main-nav {
    border-top: 1px solid #e2e2e2;
    margin-bottom: 40px;
}

.main-nav li {
    list-style-type: none;
}

.main-nav li a {
    color: #555;
    display: block;
    font-weight: bold;
    letter-spacing: 1px;
    padding: .8em 1.6em;
    text-decoration: none;
    text-transform: uppercase;
}

.main-nav li.selected a {
	color: #fff;
    background-color: #000;
}

.main-nav li a:hover {
	color: #000;
}

.main-nav ul li.selected a {
    background: #000;
    color: #fff;
}

/* *** SUB NAV *** */
.sidebar ul{
	font-weight: bold;
    margin: 0 0 1.2em 1.2em;
    font-size: 13px;
}

/* *** TAGS *** */
.tags ul, .primary-content .tags ul {
    overflow: hidden;
    margin:0;
    padding: 0;
}

.tags li {
    float: left;
    list-style-type: none;
    margin: 5px 10px 5px 0;
}

.tags li a {
    background: url("../img/tag.png") no-repeat scroll right center #e2e2e2;
    display: block;
    padding: 0 25px 0 5px;
}

.tags li a:hover, .tags li a:active {
    background: url("../img/tag.png") no-repeat scroll right center #c6c6c6;
}

/* *** MODULES *** */
.modules {
	overflow: auto;
    
}

.module {
    background: #f0f0f0;
    border: 1px solid #dee0e0;
    padding: 1.5em 1.5em 0 1.5em;
    margin: 0 0 1.5em 0;
    /* the below means that we don't need to calculate the width+padding+border when using these in the responsive design. */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.module h3 {
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 0;
    text-transform: uppercase;
}

/* *** LISTINGS *** */
.listing,
.primary-content ul.listing {
	list-style:none;
	margin: 0;
}

.listing li {
	border-top: 1px dotted #dee0e0;
    padding-top: 1em;
}

/* *** PRIMARY-CONTENT ***
The following rules only effect content inside the main content area of the page.
*/

.primary-content {
	padding: 0 0 2em 0;
}

.primary-content ul, .primary-content ol {
	margin: 0 0 1.2em 1.2em;
}

/* *** LAYOUT-FOOTER *** */
.layout-footer {
    background: #f0f0f0;
    border-top: 1px solid #dee0e0;
    margin-top: 40px;
    padding: 1.5em 0 1.5em 0;
    clear:both;
}

.layout-footer ul.social-links li {
    list-style-type: none;
}

.layout-footer ul.social-links li a {
    color: #787878;
}

/* *** 3. LAYOUT RULES *** */

/* this is a mobile first responsive design. Therefore we start out by displaying the rules for the smallest size and then add rules as the screen size gets wider.
You could also have each section as a separate stylesheet, it is up to you. */

/*Screen width above 320px. Mobile phones. */
@media only screen and (min-width: 320px) {
    .main-nav {
        border-bottom: 1px solid #e2e2e2;
        overflow: hidden;
        padding: 0;
    }
    
    .main-nav ul {
        overflow: hidden;
        padding: 5px 20px;
    }
    
    .main-nav li {
        float: left;
    }
    
    .main-nav li a {
        float: left;
        margin: .5em 0;
        padding: .5em 1.5em;
    }
    
    .layout-footer ul.social-links {
        overflow: hidden;
        padding-bottom: 5px;
    }
    
    .layout-footer ul.social-links li {
        float: left;
        width: 20%; /* 1/5 of 100% */
    }
    
    .layout-footer ul.social-links li a {
        background: url("../img/social-icons.png") top left no-repeat;
        display: block;
        height: 0;
        margin: 0 auto;
        opacity: .5;
        overflow: hidden;
        padding-top: 50px;
        width: 40px;
    }
    
    .layout-footer ul.social-links li.facebook a {
        background-position: -60px 0;
    }
    
    .layout-footer ul.social-links li.flickr a {
        background-position: -120px 0;
    }
    
    .layout-footer ul.social-links li.linkedin a {
        background-position: -182px 0;
    }
    
    .layout-footer ul.social-links li.rss a {
        background-position: -240px 0;
    }
    
    .layout-footer ul.social-links li a:hover,
    .layout-footer ul.social-links li a:active {
        opacity: .8;
    }
    
    .layout-footer small {
        display: block;
        text-align: center;
    }
}

@media only screen and (min-width: 460px) {
	
}

@media only screen and (min-width: 700px) {
    .layout-footer ul.social-links {
        float: left;
    }
    
    .layout-footer ul.social-links li a {
        background: url("../img/social-icons.png") 0 -70px no-repeat;
        margin: 0;
        padding-top: 30px;
        width: 30px;
    }
    
    .layout-footer ul.social-links li.facebook a {
        background-position: -27px -70px;
    }
    
    .layout-footer ul.social-links li.flickr a {
        background-position: -55px -70px;
    }
    
    .layout-footer ul.social-links li.linkedin a {
        background-position: -82px -70px;
    }
    
    .layout-footer ul.social-links li.rss a {
        background-position: -109px -70px;
    }
    
    .layout-footer ul.social-links li a:hover,
    .layout-footer ul.social-links li a:active {
        opacity: .8;
        
    }
    
    .layout-footer small {
        display: block;
        text-align: right;
    }
	
}

@media only screen and (min-width: 960px) {
/* LARGE SCREENS */
    
    
    .main-nav ul {
        overflow: hidden;
        padding: 0;
    }
    
    .main-nav ul li a {
        margin: 0;
        padding: .8em 1.6em;
    }
    
    .main-nav ul li:first-child a {
        margin-left: 1.6em;
    }
    
    .main-nav ul li.selected:nth-child(1) a {
        margin-left: 0;
    }
    
    .main-nav ul li:last-child a {
        margin-right: 1.6em;
    }
    
    .main-nav ul li.selected:last-child a{
        margin-right: 0;
    }
    
    .cols2-nav-left .sidebar {
	   float: left;
        width: 18.75%; /* 180/960*/
    }
    
    .cols2-nav-left .primary-content {
	   float:right;
        width: 75%; /* 720/960*/
    }
    
    .cols2-nav-right .sidebar {
       float: right;
        width: 18.75%; /* 180/960*/
    }
    
    .cols2-nav-right .primary-content {
       float:left;
        width: 75%; /* 720/960*/
    }
    
    .cols1 .primary-content {
	   margin: 0 auto 0 auto;
       width: 90%;
    }

    .modules .module {
	   width: 31.25%;
       float:left;
       margin: 0 0 1.5em 3.125%;
    }
    
    .modules .module:nth-child(3n+1) {
	   margin: 0 0 1.5em 0;
    
    }
}

@media only screen and (min-width: 1200px) {
    .wrapper, .main-nav ul {
        display: block;
        margin-right: auto;
        margin-left: auto;

    }
    

}