|
@import "compass"; |
|
html, body, div, span, applet, object, iframe, |
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
a, abbr, acronym, address, big, cite, code, |
|
del, dfn, em, img, ins, kbd, q, s, samp, |
|
small, strike, strong, sub, sup, tt, var, |
|
b, u, i, center, |
|
dl, dt, dd, ol, ul, li, |
|
fieldset, form, label, legend, |
|
table, caption, tbody, tfoot, thead, tr, th, td, |
|
article, aside, canvas, details, embed, |
|
figure, figcaption, footer, header, hgroup, |
|
menu, nav, output, ruby, section, summary, |
|
time, mark, audio, video { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
font-size: 100%; |
|
font: inherit; |
|
vertical-align: baseline; |
|
} |
|
|
|
/* HTML5 display-role reset for older browsers */ |
|
article, aside, details, figcaption, figure, |
|
footer, header, hgroup, menu, nav, section { |
|
display: block; |
|
} |
|
|
|
body { |
|
line-height: 1; |
|
} |
|
|
|
ol, ul { |
|
list-style: none; |
|
} |
|
|
|
blockquote, q { |
|
quotes: none; |
|
} |
|
|
|
blockquote:before, blockquote:after, |
|
q:before, q:after { |
|
content: ''; |
|
content: none; |
|
} |
|
|
|
table { |
|
border-collapse: collapse; |
|
border-spacing: 0; |
|
} |
|
|
|
/* !CSS RESET */ |
|
/* prefix declarations */ |
|
/* THEME STYLES */ |
|
#sequence-theme { |
|
color: white; |
|
font-size: 0.625em; |
|
margin: 0 auto; |
|
position: relative; |
|
width: 100%; |
|
height: 600px; |
|
max-width: 1280px; |
|
-webkit-backface-visibility: hidden; |
|
/* prevent graphical glitches in WebKit browsers when using transitions */ |
|
} |
|
#sequence-theme #sequence { |
|
height: 100%; |
|
margin: 0 auto; |
|
position: relative; |
|
overflow: hidden; |
|
max-width: 1280px; |
|
width: 100%; |
|
background-color: #D9D9D9; |
|
background-image: url("../images/bg-sequence.jpg"); |
|
background-repeat: no-repeat; |
|
background-position: 50% 100%; |
|
} |
|
#sequence-theme .next, |
|
#sequence-theme .prev { |
|
color: white; |
|
cursor: pointer; |
|
display: none; |
|
font-weight: bold; |
|
padding: 10px 15px; |
|
position: absolute; |
|
top: 50%; |
|
z-index: 1000; |
|
height: 75px; |
|
margin-top: -47.5px; |
|
} |
|
#sequence-theme .pause { |
|
bottom: 0; |
|
cursor: pointer; |
|
position: absolute; |
|
z-index: 1000; |
|
} |
|
#sequence-theme .paused { |
|
opacity: 0.3; |
|
} |
|
#sequence-theme .prev { |
|
left: 3%; |
|
} |
|
#sequence-theme .next { |
|
right: 3%; |
|
} |
|
#sequence-theme .prev img, |
|
#sequence-theme .next img { |
|
height: 100%; |
|
width: auto; |
|
} |
|
#sequence-theme #sequence-preloader { |
|
background: #d9d9d9; |
|
} |
|
#sequence-theme .nav { |
|
bottom: 1%; |
|
display: none; |
|
right: 6%; |
|
position: absolute; |
|
-webkit-transition-duration: 0.5s; |
|
-moz-transition-duration: 0.5s; |
|
-ms-transition-duration: 0.5s; |
|
-o-transition-duration: 0.5s; |
|
transition-duration: 0.5s; |
|
} |
|
#sequence-theme .nav li { |
|
display: inline-block; |
|
height: 140px; |
|
} |
|
#sequence-theme .nav li { |
|
*display: inline; |
|
/* Hack for IE7 and below as they don't support inline-block */ |
|
} |
|
#sequence-theme .nav li img { |
|
cursor: pointer; |
|
opacity: 0.5; |
|
-webkit-transition-duration: 1s; |
|
-moz-transition-duration: 1s; |
|
-ms-transition-duration: 1s; |
|
-o-transition-duration: 1s; |
|
transition-duration: 1s; |
|
} |
|
#sequence-theme .nav li img.active { |
|
opacity: 1; |
|
} |
|
#sequence-theme #sequence li { |
|
height: 100%; |
|
position: absolute; |
|
top: -50%; |
|
width: 100%; |
|
} |
|
#sequence-theme #sequence li > * { |
|
position: absolute; |
|
} |
|
#sequence-theme #sequence li img { |
|
height: 96%; |
|
} |
|
#sequence-theme h2 { |
|
color: white; |
|
font-family: 'Sirin Stencil', serif; |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
} |
|
#sequence-theme h3 { |
|
font-family: 'Ruluko', serif; |
|
} |
|
#sequence-theme .next, |
|
#sequence-theme .prev { |
|
position: absolute; |
|
opacity: 0.6; |
|
-webkit-transition-duration: 1s; |
|
-moz-transition-duration: 1s; |
|
-ms-transition-duration: 1s; |
|
-o-transition-duration: 1s; |
|
transition-duration: 1s; |
|
} |
|
#sequence-theme .next:hover, |
|
#sequence-theme .prev:hover { |
|
opacity: 1; |
|
-webkit-transition-duration: 1s; |
|
-moz-transition-duration: 1s; |
|
-ms-transition-duration: 1s; |
|
-o-transition-duration: 1s; |
|
transition-duration: 1s; |
|
} |
|
#sequence-theme .title { |
|
font-size: 3.4em; |
|
left: 65%; |
|
width: 35%; |
|
opacity: 0; |
|
bottom: 1%; |
|
z-index: 50; |
|
} |
|
#sequence-theme .animate-in .title { |
|
left: 50%; |
|
opacity: 1; |
|
-webkit-transition-duration: 0.5s; |
|
-moz-transition-duration: 0.5s; |
|
-ms-transition-duration: 0.5s; |
|
-o-transition-duration: 0.5s; |
|
transition-duration: 0.5s; |
|
} |
|
#sequence-theme .animate-out .title { |
|
left: 35%; |
|
opacity: 0; |
|
-webkit-transition-duration: 0.5s; |
|
-moz-transition-duration: 0.5s; |
|
-ms-transition-duration: 0.5s; |
|
-o-transition-duration: 0.5s; |
|
transition-duration: 0.5s; |
|
} |
|
#sequence-theme .subtitle { |
|
color: black; |
|
font-size: 2em; |
|
left: 35%; |
|
width: 35%; |
|
opacity: 0; |
|
top: 101%; |
|
} |
|
#sequence-theme .animate-in .subtitle { |
|
left: 50%; |
|
opacity: 1; |
|
-webkit-transition-duration: 0.5s; |
|
-moz-transition-duration: 0.5s; |
|
-ms-transition-duration: 0.5s; |
|
-o-transition-duration: 0.5s; |
|
transition-duration: 0.5s; |
|
} |
|
#sequence-theme .animate-out .subtitle { |
|
left: 65%; |
|
opacity: 0; |
|
-webkit-transition-duration: 0.5s; |
|
-moz-transition-duration: 0.5s; |
|
-ms-transition-duration: 0.5s; |
|
-o-transition-duration: 0.5s; |
|
transition-duration: 0.5s; |
|
} |
|
#sequence-theme .model { |
|
left: 30%; |
|
bottom: -48%; |
|
opacity: 0; |
|
position: relative; |
|
height: auto !important; |
|
max-height: 568px !important; |
|
width: 30%; |
|
min-width: 225px; |
|
/*prevents the model from shrinking when the browser is resized*/ |
|
max-width: 266px; |
|
} |
|
#sequence-theme .animate-in .model { |
|
left: 15%; |
|
opacity: 1; |
|
-webkit-transition-duration: 1s; |
|
-moz-transition-duration: 1s; |
|
-ms-transition-duration: 1s; |
|
-o-transition-duration: 1s; |
|
transition-duration: 1s; |
|
} |
|
#sequence-theme .animate-out .model { |
|
left: 15%; |
|
opacity: 0; |
|
-webkit-transition-duration: 0.5s; |
|
-moz-transition-duration: 0.5s; |
|
-ms-transition-duration: 0.5s; |
|
-o-transition-duration: 0.5s; |
|
transition-duration: 0.5s; |
|
} |
|
|
|
@media only screen and (min-width: 1224px) { |
|
/*only display the hover effect on desktops/laptops*/ |
|
#sequence-theme .nav li img:hover { |
|
opacity: 1; |
|
-webkit-transition-duration: 1s; |
|
-moz-transition-duration: 1s; |
|
-ms-transition-duration: 1s; |
|
-o-transition-duration: 1s; |
|
transition-duration: 1s; |
|
} |
|
} |
|
@media only screen and (min-width: 992px) { |
|
#sequence-theme .title { |
|
width: 42%; |
|
} |
|
} |
|
@media only screen and (max-width: 838px) { |
|
#sequence-theme { |
|
height: 550px; |
|
} |
|
#sequence-theme .model { |
|
max-height: 530px !important; |
|
width: auto; |
|
} |
|
} |
|
@media only screen and (max-width: 768px) { |
|
#sequence-theme { |
|
height: 500px; |
|
} |
|
#sequence-theme .title { |
|
font-size: 2.8em; |
|
} |
|
#sequence-theme .subtitle { |
|
font-size: 1.6em; |
|
} |
|
#sequence-theme .next, |
|
#sequence-theme .prev { |
|
height: 60px; |
|
margin-top: -40px; |
|
} |
|
#sequence-theme .model { |
|
max-height: 480px !important; |
|
width: auto; |
|
} |
|
} |
|
@media only screen and (max-width: 568px) { |
|
#sequence-theme .model { |
|
left: 50%; |
|
min-width: 40%; |
|
/*prevents the model from shrinking when the browser is resized*/ |
|
width: 40%; |
|
} |
|
#sequence-theme .animate-in .model { |
|
left: 50%; |
|
margin-left: -20%; |
|
} |
|
#sequence-theme .animate-out .model { |
|
left: 50%; |
|
margin-left: -20%; |
|
} |
|
#sequence-theme .title { |
|
background: #a1a1a1; |
|
background: rgba(0, 0, 0, 0.3); |
|
bottom: 0; |
|
left: 100%; |
|
padding: 4%; |
|
bottom: -50%; |
|
width: 100%; |
|
z-index: 10; |
|
} |
|
#sequence-theme .animate-in .title { |
|
left: 0%; |
|
} |
|
#sequence-theme .animate-out .title { |
|
left: -100%; |
|
} |
|
#sequence-theme .subtitle { |
|
visibility: hidden; |
|
} |
|
#sequence-theme .nav { |
|
bottom: 40px; |
|
} |
|
#sequence-theme .nav li img { |
|
height: 100px; |
|
} |
|
} |
|
@media only screen and (max-width: 518px) { |
|
#sequence-theme { |
|
height: 450px; |
|
} |
|
} |
|
@media only screen and (max-width: 468px) { |
|
#sequence-theme { |
|
height: 415px; |
|
} |
|
#sequence-theme .nav { |
|
opacity: 0; |
|
visibility: hidden; |
|
} |
|
} |
|
@media only screen and (max-width: 418px) { |
|
#sequence-theme { |
|
height: 375px; |
|
} |
|
} |
|
@media only screen and (max-width: 368px) { |
|
#sequence-theme { |
|
height: 325px; |
|
} |
|
#sequence-theme .title { |
|
font-size: 2.2em; |
|
} |
|
} |
|
@media only screen and (max-width: 320px) and (orientation: portrait) { |
|
/*iphone portrait*/ |
|
#sequence-theme { |
|
height: 320px; |
|
} |
|
#sequence-theme .model { |
|
min-width: 45%; |
|
width: 45%; |
|
} |
|
#sequence-theme .animate-in .model { |
|
margin-left: -22.5%; |
|
} |
|
#sequence-theme .animate-out .model { |
|
margin-left: -22.5%; |
|
} |
|
} |
|
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) { |
|
#sequence-theme { |
|
height: 260px; |
|
} |
|
#sequence-theme .model { |
|
min-width: 24%; |
|
width: 24%; |
|
} |
|
#sequence-theme .animate-in .model { |
|
left: 17.5%; |
|
margin-left: 0; |
|
} |
|
#sequence-theme .animate-out .model { |
|
left: 17.5%; |
|
margin-left: 0; |
|
} |
|
#sequence-theme .nav { |
|
right: 17.5%; |
|
} |
|
} |
|
.sharrre .box{ |
|
float:left; |
|
} |
|
.sharrre .count { |
|
color:#444444; |
|
display:block; |
|
font-size:17px; |
|
line-height:34px; |
|
height:34px; |
|
padding:4px 0; |
|
position:relative; |
|
text-align:center; |
|
text-decoration:none; |
|
width:50px; |
|
background-color:#eee; |
|
-webkit-border-radius:4px; |
|
-moz-border-radius:4px; |
|
border-radius:4px; |
|
} |
|
.sharrre .share { |
|
color:#FFFFFF; |
|
display:block; |
|
font-size:11px; |
|
height:16px; |
|
line-height:16px; |
|
margin-top:3px; |
|
padding:0; |
|
text-align:center; |
|
text-decoration:none; |
|
width:50px; |
|
background-color:#9CCE39; |
|
-webkit-border-radius:4px; |
|
-moz-border-radius:4px; |
|
border-radius:4px; |
|
} |
|
.sharrre .buttons { |
|
display:none; |
|
position:absolute; |
|
margin-left:50px; |
|
z-index:10; |
|
background-color:#fff; |
|
} |
|
.sharrre .button { |
|
float:left; |
|
max-width:50px; |
|
margin-left:10px; |
|
} |