Difference between revisions of "Template:IIT Kanpur/CSS"

 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
/*!
 +
* 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:1;
 +
    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: 4;
 +
    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: 10;
 +
    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: 10;
 +
    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: 10;
 +
    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: 10;
 +
    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 */
 
/* Default Font and Sizing of Website */
  
Line 60: Line 296:
 
   bottom: 10px;
 
   bottom: 10px;
 
   right: 5px;
 
   right: 5px;
−
   z-index: 1000;
+
   z-index: 10;
 
   cursor: pointer;
 
   cursor: pointer;
 
   -webkit-transition: all ease 0.4s;
 
   -webkit-transition: all ease 0.4s;

Latest revision as of 21:09, 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:1;
   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: 4;
   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;

}

  1. fp-nav {
   //position: fixed;
   z-index: 10;
   margin-top: -32px;
   top: 50%;
   opacity: 1;
   -webkit-transform: translate3d(0,0,0);

}

  1. fp-nav.fp-right {
   right: 17px;

}

  1. fp-nav.fp-left {
   left: 17px;

} .fp-slidesNav{ 

   position: absolute;
   z-index: 10;
   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;

}

  1. fp-nav ul,

.fp-slidesNav ul { 

 margin: 0;
 padding: 0;

}

  1. 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;

}

  1. fp-nav ul li a,

.fp-slidesNav ul li a { 

   display: block;
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%;
   cursor: pointer;
   text-decoration: none;

}

  1. fp-nav ul li a.active span,

.fp-slidesNav ul li a.active span,

  1. 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%;
}
  1. fp-nav ul li a span,

.fp-slidesNav ul li a span { 

   border-radius: 50%;
   position: absolute;
   z-index: 10;
   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;

}

  1. fp-nav ul li:hover a span,

.fp-slidesNav ul li:hover a span{ 

   width: 10px;
   height: 10px;
   margin: -5px 0px 0px -5px;

}

  1. 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;

}

  1. fp-nav ul li:hover .fp-tooltip,
  2. 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;

}

  1. fp-nav ul li .fp-tooltip.fp-right {
   right: 20px;

}

  1. 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: 10;
 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 */

  1. banner {
 position: relative;
 z-index: 0;
 /*background-position: 10px -200px;*/
 background-color: #F7F5E6;
 background-size: contain;
 background-repeat: no-repeat;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. sitelinks a {
 display: inline-block;
 border: 3px solid #fff;
 color: #fff;
 padding: 10px 20px;
 margin: 10px

}

  1. footer {
 background: #333;
 text-align: center;
 color: #fff;
 line-height: 50px;

}

  1. 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;
 }

}

  1. cd-timeline {
 position: relative;
 padding: 2em 0;
 margin-top: 2em;
 margin-bottom: 2em;

}

  1. 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;

}