|
@import url(http://weloveiconfonts.com/api/?family=entypo); |
|
|
|
/* entypo */ |
|
[class*="entypo-"]:before { |
|
font-family: 'entypo', sans-serif; |
|
} |
|
|
|
|
|
*, *:after, *:before { |
|
|
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
body{ |
|
margin:0; |
|
background-color:#DA635D; |
|
} |
|
header{ |
|
margin:5% 35%; |
|
font-size:4vh; |
|
color:#FFF; |
|
font-weight:bold; |
|
width:100%; |
|
font-style:italic; |
|
} |
|
li a { |
|
color: #888; |
|
text-decoration: none; |
|
} |
|
section{ |
|
margin: 5% 35%; |
|
width:100%; |
|
} |
|
.head2{ |
|
font-size:2vh; |
|
margin-left:10%; |
|
} |
|
.content { |
|
max-width:100%; |
|
margin: 0 auto; |
|
list-style: none; |
|
text-align: left; |
|
} |
|
|
|
.content li { |
|
display: inline-block; |
|
width: 80%; |
|
margin: 0; |
|
padding: 1em; |
|
text-align: left; |
|
position: relative; |
|
} |
|
|
|
|
|
.content img { |
|
margin: 0; |
|
position: relative; |
|
} |
|
|
|
.page img { |
|
max-width: 100%; |
|
display: block; |
|
position: relative; |
|
} |
|
|
|
|
|
.content .social { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
background: #666666; |
|
color: #ed4e6e; |
|
box-shadow:1px 1px 5px 5px rgba(0,0,0,.08); |
|
} |
|
.social .col-1{ |
|
width:30%; |
|
float:left; |
|
border-right:1px solid #777777; |
|
height:100%; |
|
} |
|
.social .col-1 ul{ |
|
margin-top:1em; |
|
padding:.2em; |
|
} |
|
.social .col-1 li{ |
|
display:block; |
|
font-size:2em; |
|
color:#FFF; |
|
cursor:pointer; |
|
} |
|
.social .col-1 li:hover{ |
|
color:#DA635D; |
|
} |
|
.social .col-2{ |
|
width:70%; |
|
float:right; |
|
text-align:left; |
|
padding:1em; |
|
} |
|
.social .col-2 span { |
|
color: #DDDDDD; |
|
display: block; |
|
margin: auto; |
|
} |
|
.author{ |
|
font-style:italic; |
|
} |
|
.content .social h3 { |
|
border-bottom: 1px solid #777777; |
|
color: #FFF; |
|
margin: 0; |
|
padding: 0 0 .5em; |
|
} |
|
|
|
|
|
.content .social a { |
|
text-align: center; |
|
padding: .5em; |
|
border-radius: 2px; |
|
display: inline-block; |
|
background: #FFF; |
|
color: #000; |
|
margin:1em 1em 1em 1em; |
|
cursor:pointer; |
|
|
|
} |
|
|
|
|
|
/* Caption animación*/ |
|
|
|
|
|
.share li { |
|
-webkit-perspective:60%; |
|
-moz-perspective: 60%; |
|
perspective: 60%; |
|
-webkit-perspective-origin: 0 50%; |
|
-moz-perspective-origin: 0 50%; |
|
perspective-origin: 0 50%; |
|
} |
|
|
|
.share .page { |
|
-webkit-transform-style: preserve-3d; |
|
-moz-transform-style: preserve-3d; |
|
transform-style: preserve-3d; |
|
} |
|
|
|
.share .page > div { |
|
overflow: hidden; |
|
} |
|
|
|
.share .page img { |
|
-webkit-transition: -webkit-transform 0.3s ease-out; |
|
-moz-transition: -moz-transform 0.3s ease-out; |
|
transition: transform 0.3s ease-out; |
|
} |
|
|
|
.share .page:hover > img |
|
{ |
|
-webkit-transform: translateX(23%); |
|
-moz-transform: translateX(23%); |
|
-ms-transform: translateX(23%); |
|
transform: translateX(23%); |
|
cursor: pointer; |
|
} |
|
|
|
|
|
|
|
.share .social { |
|
height: 100%; |
|
width: 20%; |
|
opacity: 0; |
|
-webkit-backface-visibility: hidden; |
|
-moz-backface-visibility: hidden; |
|
backface-visibility: hidden; |
|
-webkit-transform-origin: 0 0; |
|
-moz-transform-origin: 0 0; |
|
transform-origin: 0 0; |
|
-webkit-transform: rotateY(-90deg); |
|
-moz-transform: rotateY(-90deg); |
|
transform: rotateY(-90deg); |
|
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; |
|
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; |
|
transition: transform 0.4s, opacity 0.1s 0.3s; |
|
} |
|
|
|
|
|
.share .page:hover .social{ |
|
opacity: 1; |
|
-webkit-transform: rotateY(0deg); |
|
-moz-transform: rotateY(0deg); |
|
transform: rotateY(0deg); |
|
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s; |
|
-moz-transition: -moz-transform 0.4s, opacity 0.1s; |
|
transition: transform 0.4s, opacity 0.1s; |
|
} |
|
|
|
.content .social a:hover { |
|
background: #DA635D; |
|
color:#fff; |
|
-webkit-transition: all 0.2s ease-in; |
|
-moz-transition: all 0.2s ease-in; |
|
-o-transition: all 0.2s ease-in; |
|
} |
|
/*media queries*/ |
|
@media (max-width: 119.167em){ /*1430px*/ |
|
.share .social{ |
|
width:25%; |
|
} |
|
} |
|
.social .col-1 ul{ |
|
padding:.1em; |
|
} |
|
.social .col-1 li{ |
|
font-size:1.5em; |
|
} |
|
} |
|
@media (max-width: 106.667em){ /*1280px*/ |
|
.social .col-1 ul{ |
|
padding:.1em; |
|
} |
|
.social .col-1 li{ |
|
font-size:1.5em; |
|
} |
|
} |
|
@media (max-width: 81.667em){ /*980px*/ |
|
.share .social{ |
|
width:30%; |
|
} |
|
} |
|
@media (max-width: 66.667em){/*800px*/ |
|
.share .social{ |
|
width:40%; |
|
} |
|
} |
|
|
|
@media (max-width: 52.500em){/*630px*/ |
|
.share .social{ |
|
width:60%; |
|
margin:auto; |
|
} |
|
section{ |
|
margin:10% 10%; |
|
} |
|
header{ |
|
margin:10% 10%; |
|
} |
|
@media (max-width: 41.667em){/*500px*/ |
|
.share .social{ |
|
width:65%; |
|
margin:auto; |
|
} |
|
.content .social a{ |
|
margin:.5em .5em .5em .5em; |
|
} |
|
header{ |
|
margin:auto; |
|
font-size:2vh; |
|
} |
|
} |
|
@media (max-width: 30.000em){/*360px*/ |
|
.share .social{ |
|
width:100%; |
|
margin:auto; |
|
font-size:65%; |
|
} |
|
header{ |
|
margin:auto; |
|
} |
|
.social .col-1 ul{ |
|
margin-top:0; |
|
} |
|
} |