|
|
| Line 3,198: |
Line 3,198: |
| | .gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.0);padding:10px;color: #66cdaa;} | | .gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.0);padding:10px;color: #66cdaa;} |
| | .gototop i{line-height: 0.5em;} | | .gototop i{line-height: 0.5em;} |
| − |
| |
| − |
| |
| − | /* NOTEBOOK */
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Primary style
| |
| − |
| |
| − | -------------------------------- */
| |
| − | html * {
| |
| − | -webkit-font-smoothing: antialiased;
| |
| − | -moz-osx-font-smoothing: grayscale;
| |
| − | }
| |
| − |
| |
| − | *, *:after, *:before {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | font-size: 100%;
| |
| − | font-family: "Droid Serif", serif;
| |
| − | color: #7f8c97;
| |
| − | background-color: #e9f0f5;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | color: #acb7c0;
| |
| − | text-decoration: none;
| |
| − | font-family: "Open Sans", sans-serif;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | max-width: 100%;
| |
| − | }
| |
| − |
| |
| − | h1, h2 {
| |
| − | font-family: "Open Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Modules - reusable parts of our design
| |
| − |
| |
| − | -------------------------------- */
| |
| − | .cd-container {
| |
| − | /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
| |
| − | width: 90%;
| |
| − | max-width: 1170px;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − | .cd-container::after {
| |
| − | /* clearfix */
| |
| − | content: '';
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Main components
| |
| − |
| |
| − | -------------------------------- */
| |
| − |
| |
| − | #cd-timeline {
| |
| − | position: relative;
| |
| − | padding: 2em 0;
| |
| − | margin-top: 2em;
| |
| − | margin-bottom: 2em;
| |
| − | }
| |
| − | #cd-timeline::before {
| |
| − | /* this is the vertical line */
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 18px;
| |
| − | height: 100%;
| |
| − | width: 4px;
| |
| − | background: #d7e4ed;
| |
| − | }
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | #cd-timeline {
| |
| − | margin-top: 3em;
| |
| − | margin-bottom: 3em;
| |
| − | }
| |
| − | #cd-timeline::before {
| |
| − | left: 95%;
| |
| − | margin-left: -2px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-timeline-block {
| |
| − | position: relative;
| |
| − | margin: 2em 0;
| |
| − | }
| |
| − | .cd-timeline-block::after {
| |
| − | clear: both;
| |
| − | content: "";
| |
| − | display: table;
| |
| − | }
| |
| − | .cd-timeline-block:first-child {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | .cd-timeline-block:last-child {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | .cd-timeline-block {
| |
| − | margin: 4em 0;
| |
| − | }
| |
| − | .cd-timeline-block:first-child {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | .cd-timeline-block:last-child {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-timeline-img {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 40px;
| |
| − | height: 40px;
| |
| − | border-radius: 50%;
| |
| − | box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
| |
| − | }
| |
| − | .cd-timeline-img img {
| |
| − | display: block;
| |
| − | width: 24px;
| |
| − | height: 24px;
| |
| − | position: relative;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | margin-left: -12px;
| |
| − | margin-top: -12px;
| |
| − | }
| |
| − | .cd-timeline-img.cd-picture {
| |
| − | background: #75ce66;
| |
| − | }
| |
| − | .cd-timeline-img.cd-movie {
| |
| − | background: #c03b44;
| |
| − | }
| |
| − | .cd-timeline-img.cd-location {
| |
| − | background: #f0ca45;
| |
| − | }
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | .cd-timeline-img {
| |
| − | width: 60px;
| |
| − | height: 60px;
| |
| − | left: 50%;
| |
| − | margin-left: -30px;
| |
| − | /* Force Hardware Acceleration in WebKit */
| |
| − | -webkit-transform: translateZ(0);
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − | .cssanimations .cd-timeline-img.is-hidden {
| |
| − | visibility: hidden;
| |
| − | }
| |
| − | .cssanimations .cd-timeline-img.bounce-in {
| |
| − | visibility: visible;
| |
| − | -webkit-animation: cd-bounce-1 0.6s;
| |
| − | -moz-animation: cd-bounce-1 0.6s;
| |
| − | animation: cd-bounce-1 0.6s;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes cd-bounce-1 {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: scale(0.5);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1.2);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-bounce-1 {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: scale(0.5);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: scale(1.2);
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-bounce-1 {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: scale(0.5);
| |
| − | -moz-transform: scale(0.5);
| |
| − | -ms-transform: scale(0.5);
| |
| − | -o-transform: scale(0.5);
| |
| − | transform: scale(0.5);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1.2);
| |
| − | -moz-transform: scale(1.2);
| |
| − | -ms-transform: scale(1.2);
| |
| − | -o-transform: scale(1.2);
| |
| − | transform: scale(1.2);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: scale(1);
| |
| − | -moz-transform: scale(1);
| |
| − | -ms-transform: scale(1);
| |
| − | -o-transform: scale(1);
| |
| − | transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − | .cd-timeline-content {
| |
| − | position: relative;
| |
| − | margin-left: 60px;
| |
| − | background: rgba(178, 34, 34, 0.1);
| |
| − | border-radius: 0.25em;
| |
| − | padding: 1em;
| |
| − | box-shadow: 0 3px 0 #d7e4ed;
| |
| − | }
| |
| − | .cd-timeline-content::after {
| |
| − | clear: both;
| |
| − | content: "";
| |
| − | display: table;
| |
| − | }
| |
| − | .cd-timeline-content h2 {
| |
| − | color: #ff0000;
| |
| − | }
| |
| − | .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
| |
| − | font-size: 13px;
| |
| − | font-size: 0.8125rem;
| |
| − | }
| |
| − | .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
| |
| − | display: inline-block;
| |
| − | }
| |
| − | .cd-timeline-content p {
| |
| − | margin: 1em 0;
| |
| − | line-height: 1.6;
| |
| − | }
| |
| − | .cd-timeline-content .cd-read-more {
| |
| − | float: right;
| |
| − | padding: .8em 1em;
| |
| − | background: #acb7c0;
| |
| − | color: #ffffff;
| |
| − | border-radius: 0.25em;
| |
| − | }
| |
| − | .no-touch .cd-timeline-content .cd-read-more:hover {
| |
| − | background-color: #bac4cb;
| |
| − | }
| |
| − | .cd-timeline-content .cd-date {
| |
| − | float: left;
| |
| − | padding: .8em 0;
| |
| − | opacity: .7;
| |
| − | }
| |
| − | .cd-timeline-content::before {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | top: 16px;
| |
| − | right: 100%;
| |
| − | height: 0;
| |
| − | width: 0;
| |
| − | border: 7px solid transparent;
| |
| − | border-right: 7px solid #ffffff;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-timeline-content h2 {
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | .cd-timeline-content p {
| |
| − | font-size: 16px;
| |
| − | font-size: 1rem;
| |
| − | }
| |
| − | .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
| |
| − | font-size: 14px;
| |
| − | font-size: 0.875rem;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | .cd-timeline-content {
| |
| − | margin-left: 0;
| |
| − | padding: 1.6em;
| |
| − | width: 90%;
| |
| − | }
| |
| − | .cd-timeline-content::before {
| |
| − | top: 24px;
| |
| − | left: 100%;
| |
| − | border-color: transparent;
| |
| − | border-left-color: rgba(178, 34, 34, 0.1);
| |
| − | }
| |
| − | .cd-timeline-content .cd-read-more {
| |
| − | float: left;
| |
| − | }
| |
| − | .cd-timeline-content .cd-date {
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | left: 110%;
| |
| − | top: 6px;
| |
| − | font-size: 16px;
| |
| − | font-size: 1rem;
| |
| − | }
| |
| − | .cd-timeline-block:nth-child(even) .cd-timeline-content {
| |
| − | float: right;
| |
| − | }
| |
| − | .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
| |
| − | top: 24px;
| |
| − | left: auto;
| |
| − | right: 100%;
| |
| − | border-color: transparent;
| |
| − | border-right-color: rgba(178, 34, 34, 0.1);
| |
| − | }
| |
| − | .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
| |
| − | float: right;
| |
| − | }
| |
| − | .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
| |
| − | left: auto;
| |
| − | right: 122%;
| |
| − | text-align: right;
| |
| − | }
| |
| − | .cssanimations .cd-timeline-content.is-hidden {
| |
| − | visibility: hidden;
| |
| − | }
| |
| − | .cssanimations .cd-timeline-content.bounce-in {
| |
| − | visibility: visible;
| |
| − | -webkit-animation: cd-bounce-2 0.6s;
| |
| − | -moz-animation: cd-bounce-2 0.6s;
| |
| − | animation: cd-bounce-2 0.6s;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | /* inverse bounce effect on even content blocks */
| |
| − | .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
| |
| − | -webkit-animation: cd-bounce-2-inverse 0.6s;
| |
| − | -moz-animation: cd-bounce-2-inverse 0.6s;
| |
| − | animation: cd-bounce-2-inverse 0.6s;
| |
| − | }
| |
| − | }
| |
| − | @-webkit-keyframes cd-bounce-2 {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateX(-100px);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateX(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-bounce-2 {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: translateX(-100px);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: translateX(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-bounce-2 {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateX(-100px);
| |
| − | -moz-transform: translateX(-100px);
| |
| − | -ms-transform: translateX(-100px);
| |
| − | -o-transform: translateX(-100px);
| |
| − | transform: translateX(-100px);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateX(20px);
| |
| − | -moz-transform: translateX(20px);
| |
| − | -ms-transform: translateX(20px);
| |
| − | -o-transform: translateX(20px);
| |
| − | transform: translateX(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @-webkit-keyframes cd-bounce-2-inverse {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateX(100px);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-bounce-2-inverse {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: translateX(100px);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-bounce-2-inverse {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateX(100px);
| |
| − | -moz-transform: translateX(100px);
| |
| − | -ms-transform: translateX(100px);
| |
| − | -o-transform: translateX(100px);
| |
| − | transform: translateX(100px);
| |
| − | }
| |
| − | 60% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateX(-20px);
| |
| − | -moz-transform: translateX(-20px);
| |
| − | -ms-transform: translateX(-20px);
| |
| − | -o-transform: translateX(-20px);
| |
| − | transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| | | | |
| | | | |