@import url(“fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro|Shadows+Into+Light+Two”); @import url(“fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro|Shadows+Into+Light+Two”); @font-face {
font-family: 'altosinsights'; font-style: normal; src: url("http://localhost:8000/assets/font/altosinsights.eot"); src: local("http://localhost:8000/assets/font/altosinsights"), url("http://localhost:8000/assets/font/altosinsights.eot") format("embedded-opentype"), url("http://localhost:8000/assets/font/altosinsights.woff") format("woff"); }
@font-face {
font-family: 'Zooja'; src: local("http://localhost:8000/assets/font/Zooja.ttf"); }
@font-face {
font-family: 'altosinsights'; font-style: normal; src: url("http://localhost:8000/assets/font/altosinsights.eot"); src: local("http://localhost:8000/assets/font/altosinsights"), url("http://localhost:8000/assets/font/altosinsights.eot") format("embedded-opentype"), url("http://localhost:8000/assets/font/altosinsights.woff") format("woff"); }
@font-face {
font-family: 'Zooja'; src: local("http://localhost:8000/assets/font/Zooja.ttf"); }
header.topo {
width: 100%; padding: 60px 0; }
.logo {
width: 100%; max-width: 320px; margin: 0 auto; display: block; transition: all .25s linear; }
nav.menu {
display: flex; left: 0; right: 0; top: 0; padding: 20px 0; background: #fff; border: 5px solid #f1f1f1; font-family: "altosinsights", sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
nav.menu ul {
display: flex; margin: 0 auto; }
nav.menu li {
margin: 0 31px; list-style: none; }
nav.menu-mobile {
height: 30px; width: 30px; cursor: pointer; position: fixed; left: 15px; top: 20px; z-index: 1; }
nav.menu-mobile:after {
content: ''; position: absolute; left: -50%; top: -50%; z-index: -1; border: 30px solid #607480; border-radius: 50%; height: 0; width: 0; transition: all 150ms; transform: scale(0); }
nav.menu-mobile > span {
background-color: #607480; border-radius: 1px; height: 3px; width: 25px; cursor: pointer; position: absolute; left: 0; top: 50%; margin-top: -1px; transition: all 100ms; }
nav.menu-mobile > span:after, nav.menu-mobile > span:before {
content: ''; background-color: #607480; border-radius: 1px; height: 3px; width: 30px; position: absolute; left: 0; transition: all 200ms; }
nav.menu-mobile > span:after {
top: -7px; }
nav.menu-mobile > span:before {
bottom: -7px; }
nav.menu-mobile.act:after {
transform: scale(8); opacity: 0; }
nav.menu-mobile.act > span {
height: 0; }
nav.menu-mobile.act > span:after, nav.menu-mobile.act > span:before {
background-color: #607480; top: 1px; }
nav.menu-mobile.act > span:after {
transform: rotate(45deg); }
nav.menu-mobile.act > span:before {
transform: rotate(-45deg); }
nav.menu-mobile {
display: none; }
nav.menu-mobile .menu-itens {
width: 200px; min-height: 100%; background: #fff; position: fixed; top: 0; left: -220px; transition: all .25s linear; text-align: center; cursor: initial; }
nav.menu-mobile .menu-itens li.about {
background: transparent; border: 0; width: 50%; margin: 0 auto; padding: 20px 0 0; }
nav.menu-mobile .menu-itens li.about-text {
text-transform: initial; padding: 0 15px; border: 0; background: transparent; }
nav.menu-mobile .menu-itens li.about-text p {
font-size: 10px; }
nav.menu-mobile .menu-itens li {
margin: 5px; padding: 20px 0; background: #fff; border: 5px solid #f1f1f1; font-family: "altosinsights", sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; list-style: none; }
nav.menu-mobile .menu-itens-active {
left: 0; box-shadow: #666 1px 0 10px 0px; }
nav.menu-mobile-active {
left: 213px; }
.social-media {
margin: 0 10px; }
.categoria-image {
width: 287px; }
.main {
display: flex; margin: 30px auto; max-width: 1068px; }
.post-list {
display: block; max-width: 700px; margin-right: 30px; }
.post {
margin-bottom: 50px; }
.sidebar {
display: block; max-width: 337px; }
.sidebar h2 {
margin-bottom: 20px; }
instafeed {
width: 287px; display: block; margin-bottom: -40px; }
.img-insta {
max-width: 136px; width: 100%; margin: 2px 3.5px; transition: all .25s linear; }
.img-insta:hover {
opacity: 0.8; }
.post, .widget {
background: #fff; border: 5px solid #f1f1f1; padding: 20px; }
.about {
text-align: center; }
.about p {
margin: 10px 0px; }
.thumb {
width: 100%; height: 300px; margin: 20px 0; }
.more {
font-size: 16px; text-transform: uppercase; font-family: "Shadows Into Light Two", cursive; font-weight: bold; display: block; margin: 20px 0; }
.rodape {
padding: 20px; text-align: center; }
-
{ margin: 0; padding: 0; }
body {
background: #f4f4f4; }
h1, h2, h3 {
font-family: "altosinsights", sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #3e4041; }
h1, h2 {
font-size: 18px; }
p {
font-family: "Open Sans", sans-serif; color: #607480; font-size: 12px; line-height: 1.625; }
a {
color: #3e4041; transition: all .25s linear; text-decoration: none; }
a:hover {
color: #607480; }
cite {
font-family: "Open Sans", sans-serif; font-style: normal; color: #3e4041; margin: 20px 0 0; display: block; font-size: 12px; }
.img-responsive {
width: 100%; }
.author {
font-family: "Shadows Into Light Two", cursive; color: #3e4041; font-weight: bold; }
.content {
padding-left: 0; padding-right: 0; }
.fix {
position: fixed; z-index: 999; box-shadow: #000 0 -20px 35px; transition: all .25s linear; }
@media screen and (max-width: 1280px) {
.content { padding-left: 5%; padding-right: 5%; } }
@media screen and (max-width: 1020px) {
.sidebar { display: none; } .post-list { max-width: 700px; margin: 0 auto; } .post-list h1, .post-list cite { text-align: center; } }
@media screen and (max-width: 780px) {
nav.menu li { margin: 0 20px; } }
@media screen and (max-width: 580px) {
.categorias { display: none; } header.topo { padding: 20px 0; } nav.menu, .filter-drop-spacer, ::-webkit-scrollbar { display: none; } nav.menu-mobile { display: block; } .main { margin: 0 auto; } }
/*# sourceMappingURL=style.css.map */