|
|
| Line 5: |
Line 5: |
| | | | |
| | <!--<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">--> | | <!--<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">--> |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | .some-padding {
| |
| − | padding-top: 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar */
| |
| − |
| |
| − | .navbar-default {
| |
| − | background-color: white;
| |
| − | border-color: rgba(255, 255, 255, 0.3);
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-weight: 300;
| |
| − | -webkit-transition: all 0.35s;
| |
| − | -moz-transition: all 0.35s;
| |
| − | transition: all 0.35s;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*NavBar Imperial iGEM Information*/
| |
| − |
| |
| − | .navbar-default .navbar-header .navbar-brand {
| |
| − | color: #52658F;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-weight: bold;
| |
| − | font-size: 22px;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Changes colour of the Imperial iGEM logo in the navbar.*/
| |
| − |
| |
| − | .navbar-default .navbar-header .navbar-brand:hover,
| |
| − | .navbar-default .navbar-header .navbar-brand:focus {
| |
| − | color: #52658F;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .navbar-header .navbar-toggle {
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-weight: 400;
| |
| − | font-size: 14px;
| |
| − | color: #333A56;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .nav > li > a,
| |
| − | .navbar-default .nav > li > a:focus {
| |
| − | text-transform: uppercase;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-weight: 400;
| |
| − | font-size: 14px;
| |
| − | color: #222222;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .nav > li > a:hover,
| |
| − | .navbar-default .nav > li > a:focus:hover {
| |
| − | color: #333A56;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .nav > li.active > a,
| |
| − | .navbar-default .nav > li.active > a:focus {
| |
| − | color: #333A56 !important;
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .nav > li.active > a:hover,
| |
| − | .navbar-default .nav > li.active > a:focus:hover {
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .navbar-toggle {
| |
| − | border: none;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .dropdown-menu > li > a:hover,
| |
| − | .navbar-default .dropdown-menu > li > a:focus {
| |
| − | background-color: #F7F5E6;
| |
| − | color: #333A56;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .dropdown-menu {
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | text-transform: uppercase;
| |
| − | font-weight: 400 !important;
| |
| − | font-size: 13.2px !important;
| |
| − | color: #222222;
| |
| − | }
| |
| − |
| |
| − | #sitelinks a {
| |
| − | display: inline-block;
| |
| − | border: 3px solid #fff;
| |
| − | color: #fff;
| |
| − | padding: 10px 20px;
| |
| − | margin: 10px
| |
| − | }
| |
| − |
| |
| − | #footer {
| |
| − | background: #333;
| |
| − | text-align: center;
| |
| − | color: #fff;
| |
| − | line-height: 50px;
| |
| − | }
| |
| − |
| |
| − | #footer a {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Titles and text */
| |
| − |
| |
| − | specialh1 {
| |
| − | font-size: 100px;
| |
| − | font-weight: 400;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | text-align: center;
| |
| − | color: #333A56;
| |
| − | letter-spacing: 3px;
| |
| − | border-bottom: none;
| |
| − | }
| |
| − |
| |
| − | specialh2 {
| |
| − | font-size: 40px;
| |
| − | font-weight: 400;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | text-align: center;
| |
| − | color: #333A56;
| |
| − | border-bottom: none;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − |
| |
| − | specialh3 {
| |
| − | font-size: 30px;
| |
| − | font-weight: 400;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | text-align: center;
| |
| − | color: #52658F;
| |
| − | border-bottom: none;
| |
| − | }
| |
| − |
| |
| − | specialh4 {
| |
| − | font-size: 22px;
| |
| − | font-weight: 400;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | text-align: center;
| |
| − | color: #52658F;
| |
| − | border-bottom: none;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-family: 'Quicksand', sans-serif !important;
| |
| − | font-size: 50px !important;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-family: 'Quicksand', sans-serif !important;
| |
| − | font-size: 40px !important;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | font-family: 'Quicksand', sans-serif !important;
| |
| − | font-size: 35px !important;
| |
| − | }
| |
| − |
| |
| − | h4 {
| |
| − | font-family: 'Quicksand', sans-serif !important;
| |
| − | font-size: 30px !important;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | font-family: 'Roboto', sans-serif !important;
| |
| − | ;
| |
| − | font-weight: 400 !important;
| |
| − | ;
| |
| − | font-size: 18px !important;
| |
| − | line-height: 1.5;
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .bg-primary {
| |
| − | background-color: #F7F5E6;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | .bg-dark {
| |
| − | background-color: #333A56;
| |
| − | }
| |
| − |
| |
| − | .bg-danger {
| |
| − | background-color: #52658F;
| |
| − | }
| |
| − |
| |
| − | .text-faded {
| |
| − | color: rgba(255, 255, 255, 0.7);
| |
| − | }
| |
| − |
| |
| − | .text-dark {
| |
| − | color: rgba(38, 12, 12, 0.8);
| |
| − | }
| |
| − |
| |
| − | section {
| |
| − | padding: 100px 0;
| |
| − | }
| |
| − |
| |
| − | aside {
| |
| − | padding: 50px 0;
| |
| − | }
| |
| − |
| |
| − | .no-padding {
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .section-heading {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − |
| |
| − | .service-box {
| |
| − | max-width: 400px;
| |
| − | margin: 50px auto 0;
| |
| − | }
| |
| − |
| |
| − | .call-to-action h2 {
| |
| − | margin: 0 auto 20px;
| |
| − | }
| |
| − |
| |
| − | .text-primary {
| |
| − | color: #333A56;
| |
| − | }
| |
| − |
| |
| − | .no-gutter > [class*='col-'] {
| |
| − | padding-right: 0;
| |
| − | padding-left: 0;
| |
| − | }
| |
| − |
| |
| − | .btn-default {
| |
| − | color: #222222;
| |
| − | background-color: #F7F5E6!important;
| |
| − | border-color: white;
| |
| − | -webkit-transition: all 0.35s;
| |
| − | -moz-transition: all 0.35s;
| |
| − | transition: all 0.35s;
| |
| − | }
| |
| − |
| |
| − | .btn-default:hover,
| |
| − | .btn-default:focus,
| |
| − | .btn-default.focus,
| |
| − | .btn-default:active,
| |
| − | .btn-default.active,
| |
| − | .open > .dropdown-toggle.btn-default {
| |
| − | color: #222222;
| |
| − | background-color: #E8E8E8 !important;
| |
| − | border-color: #ededed !important;
| |
| − | }
| |
| − |
| |
| − | .btn-default:active,
| |
| − | .btn-default.active,
| |
| − | .open > .dropdown-toggle.btn-default {
| |
| − | background-image: none;
| |
| − | }
| |
| − |
| |
| − | .btn-default.disabled,
| |
| − | .btn-default[disabled],
| |
| − | fieldset[disabled] .btn-default,
| |
| − | .btn-default.disabled:hover,
| |
| − | .btn-default[disabled]:hover,
| |
| − | fieldset[disabled] .btn-default:hover,
| |
| − | .btn-default.disabled:focus,
| |
| − | .btn-default[disabled]:focus,
| |
| − | fieldset[disabled] .btn-default:focus,
| |
| − | .btn-default.disabled.focus,
| |
| − | .btn-default[disabled].focus,
| |
| − | fieldset[disabled] .btn-default.focus,
| |
| − | .btn-default.disabled:active,
| |
| − | .btn-default[disabled]:active,
| |
| − | fieldset[disabled] .btn-default:active,
| |
| − | .btn-default.disabled.active,
| |
| − | .btn-default[disabled].active,
| |
| − | fieldset[disabled] .btn-default.active {
| |
| − | background-color: white;
| |
| − | border-color: white;
| |
| − | }
| |
| − |
| |
| − | .btn-default .badge {
| |
| − | color: white;
| |
| − | background-color: #222222;
| |
| − | }
| |
| − |
| |
| − | .btn-primary {
| |
| − | color: white !important;
| |
| − | background-color: #52658F !important;
| |
| − | border-color: #333A56 !important;
| |
| − | -webkit-transition: all 0.35s;
| |
| − | -moz-transition: all 0.35s;
| |
| − | transition: all 0.35s;
| |
| − | }
| |
| − |
| |
| − | .btn-primary:hover,
| |
| − | .btn-primary:focus,
| |
| − | .btn-primary.focus,
| |
| − | .btn-primary:active,
| |
| − | .btn-primary.active,
| |
| − | .open > .dropdown-toggle.btn-primary {
| |
| − | color: white !important;
| |
| − | background-color: #333A56 !important;
| |
| − | border-color: #52658F !important;
| |
| − | }
| |
| − |
| |
| − | .btn-primary:active,
| |
| − | .btn-primary.active,
| |
| − | .open > .dropdown-toggle.btn-primary {
| |
| − | background-image: none;
| |
| − | }
| |
| − |
| |
| − | .btn-primary.disabled,
| |
| − | .btn-primary[disabled],
| |
| − | fieldset[disabled] .btn-primary,
| |
| − | .btn-primary.disabled:hover,
| |
| − | .btn-primary[disabled]:hover,
| |
| − | fieldset[disabled] .btn-primary:hover,
| |
| − | .btn-primary.disabled:focus,
| |
| − | .btn-primary[disabled]:focus,
| |
| − | fieldset[disabled] .btn-primary:focus,
| |
| − | .btn-primary.disabled.focus,
| |
| − | .btn-primary[disabled].focus,
| |
| − | fieldset[disabled] .btn-primary.focus,
| |
| − | .btn-primary.disabled:active,
| |
| − | .btn-primary[disabled]:active,
| |
| − | fieldset[disabled] .btn-primary:active,
| |
| − | .btn-primary.disabled.active,
| |
| − | .btn-primary[disabled].active,
| |
| − | fieldset[disabled] .btn-primary.active {
| |
| − | background-color: #333A56;
| |
| − | border-color: #333A56;
| |
| − | }
| |
| − |
| |
| − | .btn-primary .badge {
| |
| − | color: #333A56;
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | .btn {
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | border: none;
| |
| − | border-radius: 300px;
| |
| − | font-weight: 400;
| |
| − | font-size: 15px !important;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − |
| |
| − | .btn-xl {
| |
| − | padding: 15px 30px;
| |
| − | }
| |
| − |
| |
| − | ::-moz-selection {
| |
| − | color: white;
| |
| − | text-shadow: none;
| |
| − | background: #222222;
| |
| − | }
| |
| − |
| |
| − | ::selection {
| |
| − | color: white;
| |
| − | text-shadow: none;
| |
| − | background: #222222;
| |
| − | }
| |
| − |
| |
| − | img::selection {
| |
| − | color: white;
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − | img::-moz-selection {
| |
| − | color: white;
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | webkit-tap-highlight-color: #222222;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* TIMELINE */
| |
| − |
| |
| − | 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 -------------------------------- */
| |
| − |
| |
| − | header {
| |
| − | height: 200px;
| |
| − | line-height: 200px;
| |
| − | text-align: center;
| |
| − | background: #303e49;
| |
| − | }
| |
| − |
| |
| − | header h1 {
| |
| − | color: white;
| |
| − | font-size: 18px;
| |
| − | font-size: 1.125rem;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | header {
| |
| − | height: 300px;
| |
| − | line-height: 300px;
| |
| − | }
| |
| − | header h1 {
| |
| − | font-size: 24px;
| |
| − | font-size: 1.5rem;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #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: 50%;
| |
| − | margin-left: -2px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-timeline-block {
| |
| − | position: relative;
| |
| − | margin: 2em 0;
| |
| − | }
| |
| − |
| |
| − | .cd-timeline-block:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | .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 white, 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: white;
| |
| − | border-radius: 0.25em;
| |
| − | padding: 1em;
| |
| − | box-shadow: 0 3px 0 #d7e4ed;
| |
| − | }
| |
| − |
| |
| − | .cd-timeline-content:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | .cd-timeline-content h2 {
| |
| − | color: #303e49;
| |
| − | }
| |
| − |
| |
| − | .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: white;
| |
| − | 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 white;
| |
| − | }
| |
| − |
| |
| − | @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: 45%;
| |
| − | }
| |
| − | .cd-timeline-content::before {
| |
| − | top: 24px;
| |
| − | left: 100%;
| |
| − | border-color: transparent;
| |
| − | border-left-color: white;
| |
| − | }
| |
| − | .cd-timeline-content .cd-read-more {
| |
| − | float: left;
| |
| − | }
| |
| − | .cd-timeline-content .cd-date {
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | left: 122%;
| |
| − | 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: white;
| |
| − | }
| |
| − | .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);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .timeline {
| |
| − | background-color: rgb(82, 101, 143);
| |
| − | }
| |
| − |
| |
| − | .animated {
| |
| − | -webkit-animation-fill-mode: both;
| |
| − | -moz-animation-fill-mode: both;
| |
| − | -ms-animation-fill-mode: both;
| |
| − | -o-animation-fill-mode: both;
| |
| − | animation-fill-mode: both;
| |
| − | -webkit-animation-duration: 1s;
| |
| − | -moz-animation-duration: 1s;
| |
| − | -ms-animation-duration: 1s;
| |
| − | -o-animation-duration: 1s;
| |
| − | animation-duration: 1s;
| |
| − | }
| |
| − |
| |
| − | .animated.hinge {
| |
| − | -webkit-animation-duration: 2s;
| |
| − | -moz-animation-duration: 2s;
| |
| − | -ms-animation-duration: 2s;
| |
| − | -o-animation-duration: 2s;
| |
| − | animation-duration: 2s;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes bounceIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: scale(0.8);
| |
| − | }
| |
| − | 50% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1.05);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes bounceIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: scale(0.8);
| |
| − | }
| |
| − | 50% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: scale(1.05);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes bounceIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -o-transform: scale(0.8);
| |
| − | }
| |
| − | 50% {
| |
| − | opacity: 1;
| |
| − | -o-transform: scale(1.05);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -o-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes bounceIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | transform: scale(0.8);
| |
| − | }
| |
| − | 50% {
| |
| − | opacity: 1;
| |
| − | transform: scale(1.05);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .bounceIn {
| |
| − | -webkit-animation-name: bounceIn;
| |
| − | -moz-animation-name: bounceIn;
| |
| − | -o-animation-name: bounceIn;
| |
| − | animation-name: bounceIn;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fadeIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fadeIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeIn {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .delay {
| |
| − | -webkit-animation-delay: 0.30s;
| |
| − | -moz-animation-delay: 0.30s;
| |
| − | -o-animation-delay: 0.30s;
| |
| − | animation-delay: 0.30s;
| |
| − | }
| |
| − |
| |
| − | .delay-three {
| |
| − | -webkit-animation-delay: 0.60s;
| |
| − | -moz-animation-delay: 0.60s;
| |
| − | -o-animation-delay: 0.60s;
| |
| − | animation-delay: 0.60s;
| |
| − | }
| |
| − |
| |
| − | .delay-two {
| |
| − | -webkit-animation-delay: 1.0s;
| |
| − | -moz-animation-delay: 1.0s;
| |
| − | -o-animation-delay: 1.0s;
| |
| − | animation-delay: 1.0s;
| |
| − | }
| |
| − |
| |
| − | .delay-one {
| |
| − | -webkit-animation-delay: 1.5s;
| |
| − | -moz-animation-delay: 1.5s;
| |
| − | -o-animation-delay: 1.5s;
| |
| − | animation-delay: 1.5s;
| |
| − | }
| |
| − |
| |
| − | .fadeIn {
| |
| − | -webkit-animation-name: fadeIn;
| |
| − | -moz-animation-name: fadeIn;
| |
| − | -o-animation-name: fadeIn;
| |
| − | animation-name: fadeIn;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeInUp {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateY(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fadeInUp {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: translateY(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fadeInUp {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -o-transform: translateY(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -o-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeInUp {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | transform: translateY(20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .fadeInUp {
| |
| − | -webkit-animation-name: fadeInUp;
| |
| − | -moz-animation-name: fadeInUp;
| |
| − | -o-animation-name: fadeInUp;
| |
| − | animation-name: fadeInUp;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeInDown {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateY(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fadeInDown {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: translateY(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fadeInDown {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -o-transform: translateY(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -o-transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeInDown {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | transform: translateY(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .fadeInDown {
| |
| − | -webkit-animation-name: fadeInDown;
| |
| − | -moz-animation-name: fadeInDown;
| |
| − | -o-animation-name: fadeInDown;
| |
| − | animation-name: fadeInDown;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeInLeft {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fadeInLeft {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fadeInLeft {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | -o-transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | -o-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeInLeft {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | transform: translateX(-20px);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .fadeInLeft {
| |
| − | -webkit-animation-name: fadeInLeft;
| |
| − | -moz-animation-name: fadeInLeft;
| |
| − | -o-animation-name: fadeInLeft;
| |
| − | animation-name: fadeInLeft;
| |
| − | }
| |
| − |
| |
| − | .fadeOutDown {
| |
| − | -webkit-animation-name: fadeOutDown;
| |
| − | -moz-animation-name: fadeOutDown;
| |
| − | -o-animation-name: fadeOutDown;
| |
| − | animation-name: fadeOutDown;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeOutLeft {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateX(0);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateX(-20px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fadeOutLeft {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | -moz-transform: translateX(0);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | -moz-transform: translateX(-20px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fadeOutLeft {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | -o-transform: translateX(0);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | -o-transform: translateX(-20px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeOutLeft {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | transform: translateX(-20px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeOut {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes fadeOut {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes fadeOut {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeOut {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .animated.fadeOut {
| |
| − | -webkit-animation-name: fadeOut;
| |
| − | -moz-animation-name: fadeOut;
| |
| − | -o-animation-name: fadeOut;
| |
| − | animation-name: fadeOut;
| |
| − | }
| |
| − |
| |
| − | .animated.fadeOutLeft {
| |
| − | -webkit-animation-name: fadeOutLeft;
| |
| − | -moz-animation-name: fadeOutLeft;
| |
| − | -o-animation-name: fadeOutLeft;
| |
| − | animation-name: fadeOutLeft;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
