@charset "utf-8";
/* CSS Document */
/* Redefine boostrap css */
html {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
font-weight: 400;
font-style: normal;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
}
h1 {
font-family: 'Whitney A', 'Whitney B';
font-weight: 600;
font-style: normal;
font-size: 2.5em;
text-transform: uppercase;
text-align: left;
margin: 0;
}
.jumbotron h1,
.jumbotron .h1 {
font-size: 2.5em;
}
h2 {
font-family: 'Whitney Cond A', 'Whitney Cond B', sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
border: solid #999999;
border-width: 0 0 1px 0;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 15px;
}
h2 a {
color: #2a6496;
}
h3 {
font-family: 'Whitney A', 'Whitney B', sans-serif;
font-weight: 500;
font-style: normal;
font-size: 21px;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
}
h3 a {
color: #333333;
}
.padding-bottom-15 {
padding-bottom: 15px;
}
h4 {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
font-weight: 500;
font-style: normal;
}
h5 {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
padding-bottom: 0;
}
h5 a {
color: #333333;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 1.25em;
font-weight: bold;
text-transform: uppercase;
text-align: left;
margin: 0;
}
h2 {
font-size: 1.5em;
font-family: 'Whitney Cond A', 'Whitney Cond B', sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
border: solid #999999;
border-width: 0 0 1px 0;
margin-top: 0;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
padding-bottom: 10px;
}
h3 {
font-size: 1.25em;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
}
h5 {
font-size: .75em;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
h1 {
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
text-align: left;
margin: 0;
}
h3 {
font-size: 20px;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
}
}
a {
}
.lead {
}
.search_bar {
width: 220px;
margin-right: -50px;
margin-left: 15px;
}
.navbar {
margin-bottom: 0;
}
.navbar-secondary {
background-color: #0180ad;
border-color: #e7e7e7;
}
.navbar-secondary .navbar-text {
color: #ffffff;
}
.navbar-secondary .navbar-nav > li > a {
color: #ffffff;
}
.secondary-nav li a:hover {
color: #666666;
text-decoration: none;
height: 52px;
}
.secondary-nav li:hover {
background-color: #ececec !important;
}
.jumbotron {
padding: 30px;
margin-bottom: 2px;
color: inherit;
background-color: #eeeeee;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 1px;
padding-right: 1px;
}
.thumbnail {
display: block;
padding: 0;
margin-bottom: 2px;
line-height: 1.42857143;
border: none;
border-radius: 0;
}
.thumbnail .caption {
padding: 15px;
color: #333333;
}
.thumbnail p {
margin-top: 10px;
margin-bottom: 0;
}
/* Site-wide tags */
.img-right {
float: right;
clear: both;
margin: 0 0 20px 20px;
}
.cap {
font-family: 'Whitney Cond A', 'Whitney Cond B', sans-serif;
color: #666666;
/* max-width: 388px; */
padding-top: 5px;
}
.bump {
margin-top: 25px;
}
.top-links-bg {
background-color: #ececec;
padding-top: 10px;
padding-bottom: 10px;
}
.top-links {
float: left;
}
.top-link {
float: left;
margin-right: 25px;
}
.banner {
background: url(../images/banner-stripes-tablet.png) right no-repeat;
background-color: #002d5f;
}
.logo {
width: 358px;
height: 60px;
background: url(../images/fia_foundation_logo.png) no-repeat;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
.social-hide {
display: none;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 1.25em;
font-weight: bold;
text-transform: uppercase;
text-align: left;
margin: 0;
}
h2 {
font-size: 1.5em;
/*font-family: 'Open Sans Condensed', sans-serif;*/
text-transform: uppercase;
border: solid #999999;
border-width: 0 0 1px 0;
margin-top: 0;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
padding-bottom: 10px;
}
h3 {
font-size: 1em;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
}
h5 {
font-size: .75em;
}
.banner {
background: url(../images/banner-stripes-mobile.png) right no-repeat;
background-color: #002d5f;
}
.logo {
width: 100%;
height: 45px;
background: url(../images/fia_foundation_logo_mobile.png) no-repeat;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
height: 150px;
}
.carousel-caption {
position: absolute;
left: 5% !important;
right: 5% !important;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: none;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-title {
display: inline-block;
background-color: #333333;
padding: 5px 5px 5px 5px !important;
}
.carousel-description {
display: none !important;
}
.secondary-nav-bg {
min-height: 52px;
margin-top: 1px;
margin-bottom: 1px;
}
.secondary-nav-logo {
background-color: #ffffff;
float: left;
margin-right: 20px;
padding: 6px 10px 6px 10px;
}
.secondary-nav-section {
background-color: #ffffff;
float: left;
margin-right: 20px;
padding: 17px 10px 17px 10px;
}
.secondary-nav {
float: left;
padding: 0;
list-style: none;
}
.secondary-nav li {
width: 100%;
float: none;
}
.secondary-nav li a {
display: block;
border: solid #ffffff;
border-width: 0 0 1px 0;
margin-top: 0;
margin-bottom: 8px;
padding-top: 0;
padding-bottom: 8px !important;
}
.share {
display: none;
}
.border-right {
border: none !important;
margin-bottom: 15px;
padding-bottom: 15px;
}
.publication-img-lg {
width: 33%;
float: left;
}
.social-hide {
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
h1 {
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
text-align: left;
margin: 0;
}
h3 {
font-size: 20px;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
}
.carousel-caption {
position: absolute;
left: 5% !important;
right: 5% !important;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: none;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: none;
height: 300px;
}
.carousel-title {
display: inline-block;
background-color: #333333;
padding: 7px 15px 7px 15px !important;
}
.carousel-description {
display: block;
background-color: #333333;
float: right;
margin-bottom: 2px;
padding: 10px 15px 10px 15px !important;
}
.logo {
width: 358px;
height: 60px;
background: url(../images/fia_foundation_logo.png) no-repeat;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
}
/* end of general media queries tags */
.share {
max-width: 100%;
height: 22px;
float: right;
margin-top: 20px;
}
.share-toggle {
float: left;
margin-right: 25px;
}
.share-toggle a {
color: #ffffff;
float: left;
}
.share-platforms {
float: right;
display: none;
}
.share-platform {
float: left;
margin-right: 25px;
}
.share-platform a {
color: #ffffff;
}
.follow {
max-width: 100%;
height: 25px;
max-height: 25px;
float: right;
margin-top: 20px;
}
.follow-toggle {
float: left;
margin-right: 25px;
}
.follow-toggle a {
color: #ffffff;
float: left;
}
.follow-platforms {
float: right;
display: none;
}
.follow-platform {
float: left;
margin-right: 25px;
}
.follow-platform a {
color: #ffffff;
}
.safe {
background-color: #ebb426;
color: #ffffff;
}
.safe a {
color: #ffffff;
}
.safev2 {
background-color: #ffffff;
color: #ebb426;
}
.safev2 a {
color: #ebb426;
}
.green {
background-color: #9f9f26;
}
.green a {
color: #ffffff;
}
.greenv2 {
background-color: #ffffff;
color: #9f9f26;
}
.greenv2 a {
color: #9f9f26;
}
.general {
/* background-color: #0180ad; */
background-color: #002d5f;
}
.general a {
color: #ffffff;
}
/* secondary-nav tags */
.secondary-nav-bg {
min-height: 52px;
margin-top: 1px;
margin-bottom: 1px;
}
.secondary-nav-logo {
background-color: #ffffff;
float: left;
margin-right: 0;
padding: 6px 10px 6px 10px;
}
.secondary-nav-section {
float: left;
margin-right: 0;
padding: 15px 10px;
}
.secondary-nav {
float: left;
padding: 17px 0 0 0;
list-style: none;
}
.secondary-nav li {
float: left;
}
.secondary-nav li a {
display: block;
padding: 0 15px 0 15px;
}
/* Change background colour to gray on hover */
.secondary-nav li:hover {
margin-top: -17px;
height: 52px;
background-color: #ECECEC !important;
margin-bottom: -17px;
}
.secondary-nav li a:hover {
padding-top: 17px;
color: #666;
overflow: hidden;
}
.gfei-hover li:hover {
background-color: #DEDFBD !important;
}
.rsf-hover li:hover {
background-color: #F8E6B8 !important;
}
/*end background colour on hover */
.light-grey {
background-color: #ececec;
}
.free-content {
padding: 20px 0 20px 0;
}
.img_right {
float: right;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.video_left {
float: left;
margin-right: 20px;
margin-top: 25px;
}
/* General tags */
/* Row tags */
.alt-bg {
background-color: #eae3db;
padding: 25px 0 25px 0;
}
.blog-latest {
}
.featured-news {
}
.issue {
}
.initiatives {
}
.padding-top {
padding-top: 25px;
}
.padding-bottom {
padding-bottom: 25px;
}
.padding {
padding: 25px 0 25px 0;
}
/* Carousel tags */
.carousel {
margin-bottom: 2px;
}
.carousel-caption {
position: absolute;
left: 17%;
right: 17%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: none;
}
.left-col {
width: 300px;
text-align: left;
float: left;
bottom: 20px;
}
.right-col {
width: 300px;
text-align: left;
float: right;
bottom: 20px;
}
.carousel-title {
display: inline-block;
padding: 7px 15px 7px 15px;
}
.carousel-description {
display: inline-block;
float: right;
margin-bottom: 2px;
padding: 10px 15px 10px 15px;
}
.carousel-caption p {
background-color: #666666;
font-size: 1.5em;
float: right;
text-align: left;
padding: 10px;
}
/* Form tags */
.form_name {
width: 50px;
float: left;
margin-right: 20px;
}
.form_email {
width: 50px;
float: left;
margin-right: 20px;
}
.form_field {
float: left;
}
.submit {
margin-top: 20px;
}
.text-box-small {
width: 85%;
}
/* Blog tags */
.blog-post {
border: dotted #999999;
border-width: 0 0 1px 0;
margin-top: 25px;
margin-bottom: 15px;
padding-bottom: 15px;
}
/*
* Override Bootstrap's default container.
*/
/*
*/
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
/*font-size: 18px;
line-height: 1.5; */
padding: 0 15px 0 15px;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 0 15px 0 15px;
margin: 0 -15px 25px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
font-family: 'Whitney A', 'Whitney B';
font-weight: 600;
font-style: normal;
/*font-size: 40px;*/
text-transform: none;
border: solid #999999;
border-width: 0 0 1px 0;
margin-top: 25px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.blog-post-heading {
text-transform: none;
border: none;
padding-top: 10px;
}
/*h2 {
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
border: solid #999999;
border-width: 0 0 1px 0;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 15px;
}*/
.blog-post-meta {
margin-bottom: 0;
color: #999;
}
.blog-post-img {
margin-top: 20px;
margin-bottom: 20px;
}
.blog-post-film {
margin-top: 20px;
margin-bottom: 20px;
}
.blog-post h3 {
margin-bottom: 20px;
}
.tag {
display: inline-block;
background-color: #ececec;
margin-bottom: 2px;
padding: 5px 10px 5px 10px;
}
/* Connect tags */
.twitter {
background-color: #ebf6fc;
}
.social_photo {
min-height: 322px;
background: url(../images/connect-photo-1.jpg) center;
}
.social_photo2 {
min-height: 322px;
background: url(../images/connect-photo-2.jpg) center;
}
.social_photo3 {
min-height: 322px;
background: url(../images/connect-photo-3.jpg) center;
}
.social_icon {
width: 35px;
height: 35px;
float: left;
margin-right: 20px;
}
.flickr_icon {
width: 35px;
height: 35px;
padding: 15px 0 0 15px;
}
.social_image {
margin-top: 15px;
margin-bottom: 15px;
}
.social_film {
width: 485px;
height: 246px;
background: url(../images/film-walking-for-world.jpg) no-repeat;
}
.social_film2 {
width: 485px;
height: 246px;
background: url(../images/film-row-2.jpg) no-repeat;
}
.social_film3 {
width: 485px;
height: 246px;
background: url(../images/film-row-3.jpg) no-repeat;
}
.player-bg-full-width {
background-color: #ececec;
margin: 0;
padding: 0;
}
.player-full-width {
background-color: #000000;
height: 450px;
margin: 0;
padding: 0;
}
.twitter-handle {
margin-top: 15px;
}
.publication-img-lg {
width: 33%;
float: left;
}
.publication-description {
width: calc(67% - 15px);
float: right;
}
.publication-title {
/*font-size: 40px;*/
text-transform: none;
/*font-family: 'Open Sans Condensed', sans-serif;*/
border: solid #999999;
border-width: 0 0 1px 0;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.members-controls {
width: 100% !important;
height: 25px;
margin-bottom: 20px;
}
.members-filter {
background-color: #ffffff;
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 5px 10px 5px 10px;
}
.selected {
background-color: #ececec;
}
/* Footer tags */
footer {
background-color: #333333;
color: #ffffff;
padding: 25px;
margin-bottom: 0;
}
footer a {
color: #ffffff;
}
footer a:hover {
color: #ffffff;
}
.col-content {
padding: 0 15px 0 15px;
}
.border-right {
border: solid #999999;
border-width: 0 1px 0 0;
}
.social-network {
height: 25px;
margin-bottom: 5px;
}
.social-network-icon {
float: left;
margin-right: 15px;
}
.footer-logo {
width: 209px;
height: 35px;
background: url(../images/footer-logo.png);
margin-bottom: 15px;
}
/* Section tags */
.3-col-row {
}
.2-col-row {
}
.social-network-hide {
display: none;
background-color: #ECECEC;
width: 100%;
}
.social-header {
float: left;
padding-right: 15px;
font-weight: bold;
}
.social-network-bottom {
margin: 15px 0 0 55px;
}
.social-network-share, .social-network-follow {
float: left;
padding-bottom: 10px;
}
.social-platform {
float: left;
padding-right: 15px;
}
/* Uneven Colums */
#col3-small {
max-width: 291px;
height: 290px;
}
#col3-medium {
max-width: 388px;
height: 290px;
}
#col3-large {
max-width: 485px;
height: 290px;
}
#col4 {
max-width: 291px;
height: 198px;
}
#col3 {
max-width: 388px;
height: 250px;
}
#col2 {
max-width: 583px;
height: 250px;
}
#col3-small,
#col3-medium,
#col3-large,
#col4, #col3, #col2 {
position: relative;
margin: 0 auto;
}
.image {
position: relative;
}
.imageContainer {
overflow: hidden;
}
@media screen and (max-width: 480px) { /*mobile portrait*/
#col4, #col3, #col2 {
max-width: 100%;
height: 110px;
}
#col3-small,
#col3-medium,
#col3-large {
max-width: 100%;
height: 110px;
}
.follow, .share {
display: none;
}
.social-hide {
display: block;
}
.publication-description {
width: 100%;
float: none;
margin-left: 0;
}
.publication-description h5 {
margin-left: calc(33% + 15px);
}
.publication-description h1 {
font-size: 26px;
margin-left: calc(33% + 15px);
margin-bottom: 30px;
}
.publication-description h2 {
margin-left: 0;
}
.publication-img-lg {
margin-bottom: 15px;
margin-right: 15px;
}
.social-network-hide {
display: block;
padding-top: 5px;
}
.social-header {
margin-bottom: 5px;
}
.social-network-bottom {
margin-left: 15px;
margin-top: 5px;
padding-bottom: 10px;
}
.social-network-share, .social-network-follow {
float: left;
}
.social-network-icon-bottom {
float: left;
margin-right: 0;
}
}
@media screen and (max-width: 768px) and (min-width: 481px) { /*mobile size*/
#col3-small,
#col3-medium,
#col3-large {
max-width: 100%;
height: 198px;
}
#col4, #col3, #col2 {
max-width: 100%;
height: 198px;
}
.follow, .share {
display: none;
}
.publication-description {
width: 100%;
float: none;
margin-left: 0;
}
.publication-description h5 {
margin-left: calc(33% + 15px);
}
.publication-description h1 {
font-size: 32px;
margin-left: calc(33% + 15px);
margin-bottom: 30px;
}
.publication-description h2 {
margin-left: 0;
}
.publication-img-lg {
margin-bottom: 15px;
margin-right: 15px;
}
.social-network-hide {
display: block;
}
}
@media screen and (min-width: 768px) { /*tablet size*/
#col3-small,
#col3-medium,
#col3-large {
max-width: 500px;
}
#col4, #col3 {
max-width: 388px;
}
.publication-description h2 {
margin-left: 0;
}
}
/* New styles */
.img-left-flex {
float: left;
clear: both;
margin: 0 20px 20px 0;
}
.img-right-flex {
float: right;
clear: both;
margin: 0 0 20px 20px;
}
.cap-427 {
font-family: 'Whitney Cond A', 'Whitney Cond B', sans-serif;
color: #666666;
max-width: 427px;
padding-top: 5px;
}
.film-left-flex {
float: left;
clear: both;
margin: 0 20px 20px 0;
}
.film-right-flex {
float: right;
clear: both;
margin: 0 0 20px 20px;
}
.centre-content-container {
display: table;
width: 100%;
height: 415px;
}
.centre-content {
display: table-cell;
text-align: left;
vertical-align: middle;
}
.centre-content-left {
width: 600px;
float: left;
}
.white {
color: #ffffff;
}
.black {
color: #000000;
}
.centre-content-right {
width: 600px;
float: right;
}
.publications-2-col {
float: right;
}
.publications-col-1 {
width: 182px;
float: left;
margin-right: 20px;
}
.publications-col-2 {
width: 182px;
float: right;
}
.video-right {
width: 288px !important;
float: right !important;
clear: both !important;
margin-left: 20px;
margin-bottom: 20px;
}
/* Timeline styles */
/* --------------------------------
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;
}
/* --------------------------------
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: 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;
}
.cd-timeline-img.cd-safe {
background: #ebb426;
}
.cd-timeline-img.cd-clean {
background: #f3c615;
}
.cd-timeline-img.cd-fair {
background: #d47428;
}
.cd-timeline-img.cd-green {
background: #9b9d37;
}
.cd-timeline-img.cd-general {
background: #002d5f;
}
@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);
}
}
/*
New styles - added 14/08/2018
*/
.img-right-new { /* desktop */
float: right;
clear: both;
margin: 0 0 0 0;
padding: 0 0 15px 20px;
}
.video-right-new { /* desktop */
float: right;
clear: both;
margin: 0 0 0 0;
padding: 0 0 15px 20px;
}
.video-left-new { /* desktop */
float: left;
clear: both;
margin: 0 0 0 0;
padding: 0 20px 15px 0;
}
@media screen and (max-width: 768px) and (orientation : portrait) { /* iPhone portrait */
.img-right-new {
float: right;
clear: both;
margin: 0 0 0 0;
padding: 0 0 15px 0;
}
.video-right-new {
float: none;
clear: none;
position: relative;
margin: 0 0 20px 0;
padding: 35px 0 56.25% 20px;
height: 0;
overflow: hidden;
}
.video-right-new iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video-left-new {
float: none;
clear: none;
position: relative;
margin: 0 0 20px 0;
padding: 35px 20px 56.25% 0;
height: 0;
overflow: hidden;
}
.video-left-new iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.body-padding {
margin-left: 20px;
margin-right: 20px;
}
.body-padding h2 {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 5px;
}
.stat-circle {
padding-bottom: 15px;
}
}
@media screen and (max-width: 768px) and (orientation : landscape) { /* iPhone landscape */
.img-right-new {
float: right;
clear: both;
margin: 0 0 0 0;
padding: 0 0 15px 20px;
}
.video-right-new {
float: right;
clear: both;
margin: 0 0 0 0;
padding: 0 0 15px 20px;
}
.video-left-new {
float: left;
clear: both;
margin: 0 0 0 0;
padding: 0 20px 15px 0;
}
.body-padding {
margin-left: 20px;
margin-right: 20px;
}
.body-padding h2 {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.stat-circle {
padding-bottom: 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) { /* iPad */
.img-right-new {
float: right;
clear: both;
margin: 0 0 0 0;
padding: 0 0 15px 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) { /* iPad */
.col-sm-8 .col-xs-12 .mailchimp-list .text-block-padding-right {
margin-left: 20px;
margin-right: 20px !important;
}
}
/*
End
*/
.img-left-new {
float: left;
clear: both;
margin: 0 0 0 0;
padding: 0 0 10px 0;
}
.videoLeft {
float:left;
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
@media (max-width: 599px) {
.blog-post > .video-right {
width: 50% !important; } }
iframe.embed-responsive-item {
max-width: 100%; }
@media (min-width: 559px) {
.embed-responsive-item {
width: 286px;
height: 200px;
}
}
@media (max-width: 558px) {
.embed-responsive-item {
height: 125px;
}
}
@media (max-width: 599px) {
.blog-post > .video-right {
width: 50% !important; } }