Difference between revisions of "Template:IIT Kanpur/CSS"
| Line 98: | Line 98: | ||
#fp-nav { | #fp-nav { | ||
//position: fixed; | //position: fixed; | ||
| − | z-index: | + | z-index: 2000; |
margin-top: -32px; | margin-top: -32px; | ||
top: 50%; | top: 50%; | ||
| Line 112: | Line 112: | ||
.fp-slidesNav{ | .fp-slidesNav{ | ||
position: absolute; | position: absolute; | ||
| − | z-index: | + | z-index: 2000; |
opacity: 1; | opacity: 1; | ||
-webkit-transform: translate3d(0,0,0); | -webkit-transform: translate3d(0,0,0); | ||
| Line 147: | Line 147: | ||
display: block; | display: block; | ||
position: relative; | position: relative; | ||
| − | z-index: | + | z-index: 2000; |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| Line 166: | Line 166: | ||
border-radius: 50%; | border-radius: 50%; | ||
position: absolute; | position: absolute; | ||
| − | z-index: | + | z-index: 2000; |
height: 4px; | height: 4px; | ||
width: 4px; | width: 4px; | ||
Revision as of 06:53, 9 October 2018
/*!
* fullPage 3.0.3 * https://github.com/alvarotrigo/fullPage.js * * @license GPLv3 for open source use only * or Fullpage Commercial License for commercial use * http://alvarotrigo.com/fullPage/pricing/ * * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo */
html.fp-enabled, .fp-enabled body {
margin: 0; padding: 0; overflow:hidden;
/*Avoid flicker on slides transitions for mobile phones #336 */ -webkit-tap-highlight-color: rgba(0,0,0,0);
} .fp-section {
position: relative; -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ -moz-box-sizing: border-box; /* <=28 */ box-sizing: border-box;
} .fp-slide {
float: left;
} .fp-slide, .fp-slidesContainer {
height: 100%; display: block;
} .fp-slides {
z-index:2000; height: 100%; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ transition: all 0.3s ease-out;
} .fp-section.fp-table, .fp-slide.fp-table {
display: table; table-layout:fixed; width: 100%;
} .fp-tableCell {
display: table-cell; vertical-align: middle; width: 100%; height: 100%;
} .fp-slidesContainer {
float: left; position: relative;
} .fp-controlArrow {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ position: absolute; z-index: 2000; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
} .fp-controlArrow.fp-prev {
left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent;
} .fp-controlArrow.fp-next {
right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff;
} .fp-scrollable {
overflow: hidden; position: relative;
} .fp-scroller{
overflow: hidden;
} .iScrollIndicator{
border: 0 !important;
} .fp-notransition {
-webkit-transition: none !important; transition: none !important;
}
- fp-nav {
//position: fixed; z-index: 2000; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0,0,0);
}
- fp-nav.fp-right {
right: 17px;
}
- fp-nav.fp-left {
left: 17px;
} .fp-slidesNav{
position: absolute; z-index: 2000; opacity: 1; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); left: 0 !important; right: 0; margin: 0 auto !important;
} .fp-slidesNav.fp-bottom {
bottom: 17px;
} .fp-slidesNav.fp-top {
top: 17px;
}
- fp-nav ul,
.fp-slidesNav ul {
margin: 0; padding: 0;
}
- fp-nav ul li,
.fp-slidesNav ul li {
display: block; width: 14px; height: 13px; margin: 7px; position:relative;
} .fp-slidesNav ul li {
display: inline-block;
}
- fp-nav ul li a,
.fp-slidesNav ul li a {
display: block; position: relative; z-index: 2000; width: 100%; height: 100%; cursor: pointer; text-decoration: none;
}
- fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
- fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%; }
- fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%; position: absolute; z-index: 2000; height: 4px; width: 4px; border: 0; background: #333; left: 50%; top: 50%; margin: -2px 0 0 -2px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
}
- fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
width: 10px; height: 10px; margin: -5px 0px 0px -5px;
}
- fp-nav ul li .fp-tooltip {
position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; cursor: pointer;
}
- fp-nav ul li:hover .fp-tooltip,
- fp-nav.fp-show-active a.active + .fp-tooltip {
-webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1;
}
- fp-nav ul li .fp-tooltip.fp-right {
right: 20px;
}
- fp-nav ul li .fp-tooltip.fp-left {
left: 20px;
} .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{
height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: auto !important;
}
/*Only display content to screen readers*/ .fp-sr-only{
position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
} /* Default Font and Sizing of Website */
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
}
html, body {
height: 98%;
}
/* Visiting Links */
a, a:hover {
color: #52658F; text-decoration: none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease-in-out;
}
a:visited {
color: #333A56;
}
.col-centered {
float: none; margin: 0 auto;
}
.backTop {
height: 40px; width: 40px; position: fixed; bottom: 10px; right: 5px; z-index: 1000; cursor: pointer; -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; -ms-transition: all ease 0.4s; -o-transition: all ease 0.4s; transition: all ease 0.4s;
}
.backTop:hover {
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.red {
color: #EA3923;
}
.blue {
color: #0C68E6;
}
.darkblue {
color: #52658F;
}
.yellow {
color: #FFDF1E;
}
.green {
color: #32BE01;
}
.cream {
color: #F7F5E6;
}
.grey {
color: #E8E8E8;
}
.darkgrey {
color: #8C8C8C;
}
/* Body */
body {
font-family: 'Roboto', sans-serif;
}
.indent {
text-indent: 50px;
}
hr {
border-color: #333A56; border-width: 3px; max-width: 50px; margin-top: 25px; margin-bottom: 25px; margin-left: auto; margin-right: auto;
}
hr.light {
border-color: white;
}
hr.grey {
border-color: #E8E8E8;
}
hr.blue {
border-color: #333A56;
}
/* Cover Image */
- banner {
position: relative; z-index: 0; /*background-position: 10px -200px;*/ background-color: #F7F5E6; background-size: contain; background-repeat: no-repeat;
}
- GRObanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/2/2e/T--Imperial_College--cellpopn.gif');
background-position: 0px -200px;
background-color: #aaa;
background-size: cover;
background-repeat: no-repeat;
}
- integratedbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/7/72/T--Imperial_College--IntegratedBanner.png');
background-position: 200px 70px;
background-size: contain;
background-repeat: no-repeat;
}
- outreachbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/d/dc/T--Imperial_College--outreach_banner.png');
background-position: 200px 70px;
background-size: contain;
background-repeat: no-repeat;
}
- modelbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/d/d4/T--Imperial_College--modelling_banner.png');
background-position: 200px 70px;
background-size: contain;
background-repeat: no-repeat;
}
- safetybanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/c/cb/T--Imperial_College--SafetyBanner.png');
background-position: 200px 70px;
background-size: contain;
background-repeat: no-repeat;
}
- Protobanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/e/e4/T--Imperial_College--ProtoBanner.png');
background-position: 200px 70px;
background-size: contain;
background-repeat: no-repeat;
}
- Proofbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/1/12/T--Imperial_College--ProofBanner.png');
background-position: 200px 70px;
background-size: contain; background-repeat: no-repeat;
}
- humanbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/9/95/T--Imperial_College--HumanPracBanner.png?format=1500w');
background-size: cover;
background-repeat: no-repeat;
}
- brainbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/3/3a/T--Imperial_College--brainstorm_banner.png');
background-size: contain;
background-position: 200px 40px;
background-repeat: no-repeat;
}
- collabbanner {
position: relative; z-index: 0;
background-position: 0px -160px;
background: url('https://static.igem.org/mediawiki/2016/d/d9/T--Imperial_College--collaboration_banner.png');
background-position: 200px 70px;
background-size: contain; background-repeat: no-repeat;
}
- attribbanner {
position: relative;
z-index: 0;
background: url('https://static.igem.org/mediawiki/2016/f/fb/T--Imperial_College--AttributionsBanner.png');
background-position: 200px 70px;
background-size: contain;
background-repeat: no-repeat;
}
- bannercontent:not(center) {
height: 75%; padding-top: 25%; padding-left: 20px; padding-right: 20px; padding-bottom: 25%; box-sizing: border-box; margin: auto;
}
.container, .container-fluid {
color-background: #F7F5E6; color: black;
}
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #52658F;
}
.carousel-inner img {
width: 100%; max-height: 600px
}
.Image-inner img {
width: 90%; max-height: 400px
}
.carousel-control {
width: 0;
}
.carousel-control.left, .carousel-control.right {
opacity: .7; color: #52658F; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none;
}
.carousel-control.left span {
padding: 30px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .fa-arrow-left, .carousel-control .fa-arrow-right, .carousel-control .icon-prev, .carousel-control .icon-next {
position: absolute; top: 50%; z-index: 5; display: inline-block;
}
.carousel-control .fa-arrow-left, .carousel-control .icon-prev {
left: 0;
}
.carousel-control .fa-arrow-right, .carousel-control .icon-next {
right: 0;
}
.carousel-control.left span, .carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover, .carousel-control.right span:hover {
opacity: 1; filter: alpha(opacity=70);
}
/* Navbar */
.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;
}