@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed:400,100,400italic,700italic,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700');
@import url('https://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400');
@import url('https://fonts.googleapis.com/css?family=Stalemate');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url(animate.css);
/*-----------------------------------*\
  $BASE
\*-----------------------------------*/
html, body {
-webkit-font-smoothing: antialiased;
width: 100%;
margin:0 !important;
background: 
linear-gradient(45deg, 
rgba(255,255,255,0) 48%,
rgba(255,255,255,.05) 50%, 
rgba(255,255,255,0) 52%),
linear-gradient(-45deg, 
rgba(255,255,255,0) 48%,
rgba(255,255,255,.05) 50%, 
rgba(255,255,255,0) 52%);
background-size: 1em 1em;
background-color: #818181;
}
body, .modal-body {
font: 400 15px Lato, sans-serif;
line-height: 1.8em;
color: #818181;
}
#mySite
{
max-width: 1100px;
text-align: center !important;
margin : 0 auto;
}
.container-fluid {
padding: 60px 50px;
}
.container-mail {
padding: 60px 10px;
}
.bg-grey {
background-color: #f6f6f6;
}
.bg-white {
background-color: #ffffff;
}
.col-sm-4, .col-sm-6, .col-sm-8, .col-sm-3 {
text-align: left;
}
hr {
border: none;
margin-top : -1px;
height: 1px;
background-color: #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #0076BA, #c0c8c9, #0076BA);
width: 80%;
}
.hr2 {
border: none;
margin: 5px auto;
height: 1px;
background-color: #0076BA;
background-image: -webkit-linear-gradient(0deg, #FFFFFF, #0076BA, #FFFFFF);
width: 80%;
}
.hr3 {
border: none;
margin: 5px auto;
height: 1px;
background-color : #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #F6F6F6, #c0c8c9, #F6F6F6);
width: 80%;
}
.glyphicontxt {
margin : 0 0.5em 0 0.5em;
}
/*-----------------------------------*\
  $TYPOGRAPHIE
\*-----------------------------------*/
h1,h2,h3,h4,h5,h6,.h7,.h9,.h10
{
font-family:Roboto;
font-style: normal;
font-weight: 100;
color: #3d464d;
}
h1{
font-size: 3em;
letter-spacing: 0.1em;
}
h2 {
font-size: 1.5em;
text-transform: uppercase;
color: #F1F1F1;
font-weight: 600;
margin: 0 0 20 0.3em;
}
h3 {
font-size: 3em;
letter-spacing: 0.1em;
color: #303030;
text-align: center !important;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
text-align: center !important;
}  
h5 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
}  
h6 {
font-size: 1.3em;
color: #F1F1F1;
font-family: Yanone Kaffeesatz;
font-weight: 400;
font-style: italic;
margin : 25px 0;
text-align: justify;
}
.h7 {
font-size: 0.8em;
color: #303030;
font-weight: 400;
}
.h8 {
font-size: 1.3em;
color: #0076BA;
font-family: Yanone Kaffeesatz;
font-weight: 400;
font-style: italic;
}
.h9 {
font-size: 1.5em;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin: 0 0 10 0.3em;
}
.h10 {
margin: 10px 0 30px 0;
letter-spacing: 10px;      
font-size: 20px;
color: #FFF;
font-weight: 600;
}
.logo-small {
color: #0076BA;
font-size: 5em;
text-align: center;
margin : 0 auto;
}
.logo {
color: #0076BA;
font-size: 10em;
text-align: center;
margin : 0 auto;
}
/*-----------------------------------*\
  $MENU
\*-----------------------------------*/
.navbar {
margin : 0 auto;
margin-bottom: 0;
background-color: #0076BA;
z-index: 3 !important;
border: 0;
font-size: 1em !important;
line-height: 2em !important;
border-radius: 0;
font-family: Montserrat, sans-serif;
font-weight: 300;
text-transform: uppercase;
max-width: 1100px !important;
}
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
max-height: 100%;
max-width: 100%;
margin: 7px 0 0 10px;
}
.navbar li a, .navbar .navbar-brand {
color: #f1f1f1 !important;
font: 400 15px Lato, sans-serif;
}
.navbar-nav li a:hover,.navbar-nav li a:active, .navbar-nav li.active a {
color: #0076BA !important;
background-color: #f6f6f6 !important;
font: 400 15px Lato, sans-serif;
}
.navbar-default .navbar-toggle {
border-color: #f6f6f6;
color: #f6f6f6 !important;
background-color: #0076BA;
}
.dropdown-menu {
background-color: #0076BA;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #f6f6f6;
}
.navbar .container{
max-width: 1100px !important;
}
/*-----------------------------------*\
  $INTRO
\*-----------------------------------*/
.jumbotron {
background-color: #0076BA;
color: #f5f5f5;
padding: 60px 50px;
margin: 0 0 0 0 !important;
height: auto;
}
.vertical-center {
  display: flex;
  align-items: center;
}
.btn1 {
padding: .75rem;
margin: .375rem;
background-color: #f1f1f1;
border-radius: 4px;
border: 1px solid #f1f1f1;
color: #0076BA;
transition: .2s;
cursor: pointer;
width: 50%;
}
.btn1:hover, .btn:focus {
border: 1px solid #f1f1f1;
background-color: transparent;
color: #f1f1f1;
}
/*-----------------------------------*\
  $AGENDA
\*-----------------------------------*/
.thumbnail {
padding: 15px auto;
border: none;
border-radius: 0;
}
.thumbnail p {
margin: 15px auto;
color: #555;
}
.btn {
padding: .75rem;
margin: .375rem;
background-color: #0076BA;
border-radius: 4px;
border: 1px solid #0076BA;
color: #f1f1f1;
transition: .2s;
cursor: pointer;
width: 80%;
}
.btn:hover, .btn:focus {
border: 1px solid #0076BA;
background-color: transparent;
color: #0076BA;
}
.AgendaPassed {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
/*-----------------------------------*\
  $Carousel
\*-----------------------------------*/
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f6f6f6;
}
.carousel-indicators li {
border-color: #f6f6f6;
}
.carousel-indicators li.active {
background-color: #f6f6f6;
}
.carousel-inner {
min-height: 90vh;
}
@media screen and (min-width: 768px) {
.carouselimg{
text-align: right !important;
padding-top: 20px !important;
}
}
/*-----------------------------------*\
$Formulaire
\*-----------------------------------*/
.sectionform{
padding: 20px 20px !important;
border-radius: 4px !important;
}
[required] {
border: 1px solid #818181 !important;
width: 100%;
}
button[disabled], button:disabled {
cursor:help !important;
}
input{
border: 1px dashed #818181 !important;
margin: 0 0 0 0 !important;
}
input[type="radio"]{
vertical-align: middle;
border:none;
width:1em;
}
label.inline {
display:inline;
margin-left:5px;
margin-right:50px;
vertical-align: middle;
font-size: 1em;
color: #303030;
font-weight: 100;
}
input:checked {
border: 6px solid #0076BA;
}
feedback{
success:'glyphicon-ok';
error:'glyphicon-remove';
}
.form-control-feedback{
position:relative !important;
float: right;
margin: -32px 5px 0 0 !important;
}
.help-block {
position:relative !important;
float: right;
margin: -30px 10px 0 0 !important;
}
.btn2 {
padding: .75rem;
margin: .375rem;
background-color: #0076BA;
border-radius: 4px;
border: 1px solid #f1f1f1;
color: #f1f1f1;
transition: .2s;
cursor: pointer;
width: 100%;
}
.btn2:hover, .btn2:focus {
border: 1px solid #0076BA;
background-color: transparent;
color: #0076BA;
}
.btn3 {
padding: .75rem;
margin: .375rem;
background-color: crimson;
border-radius: 4px;
border: 1px solid #f1f1f1;
color: #f1f1f1;
transition: .2s;
cursor: pointer;
width: 100%;
}
.btn3:hover, .btn3:focus {
border: 1px solid crimson;
background-color: transparent;
color: crimson;
}
.tooltip.top .tooltip-inner {
background-color: #0076BA !important;
}
.tooltip.top .tooltip-arrow {
border-top-color: #0076BA !important;
}
.tooltip.right {
z-index : 996;
}
.tooltip.right .tooltip-inner {
background-color:transparent !important;
}
.tooltip.right .tooltip-arrow {
border-right-color:transparent  !important;
}
@media screen and (max-height: 575px){
#rc-imageselect,
.g-recaptcha {
transform:scale(0.77);
transform-origin:0;
transform:scale(0.77);
transform-origin:0 0;
-webkit-transform:scale(0.77);
transform:scale(0.77);
-webkit-transform-origin:0 0;
transform-origin:0 0;
}
}
/*-----------------------------------*\
$Animation
\*-----------------------------------*/
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%); 
} 
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
} 
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
/*-----------------------------------*\
 $Modal
\*-----------------------------------*/
.modal {
text-align: center;
padding : 0 !important;
margin : 10px 10px 10px 10px !important;
height: 90vh;
z-index: 9999 !important;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-header, .close{
background-color: #0076BA;
color:white !important;
text-align: center;
font-size: 2.0em;
font-weight: 400;
padding: 20px 10px 10px 10px;
}
.modal-footer {
background-color: #dfdfdf;
}
/*-----------------------------------*\
 $GOOGLEMAP
\*-----------------------------------*/
#googleMap, #googleMap2, #googleMap3, #googleMap4, #googleMap5, #googleMap6 {
width: 100%;
height: 400px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.gm-style-iw {
-webkit-filter: grayscale(0%) !important;
filter: grayscale(0%) !important;
}
/*-----------------------------------*\
 $FOOTER
\*-----------------------------------*/
.footer {
background: #F6F6F6;
height: auto;
padding-bottom: 0px;
margin : 0 auto;
position: relative;
width: 100%;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer .footer-bottom p {
font-size: 0.8em;
font-family:Roboto;
font-weight: 300 !important;
line-height: 1.8em;
}
.footer img {
max-width: 100%;
}
.footer h3 {
border-bottom: 1px solid #BAC1C8;
color: #54697E;
font-size: 0.9em;
font-weight: 600;
line-height: 2.4em;
padding: 10px 0 0 0;
text-transform: uppercase;
text-align: left !important;
font-family:Roboto;
}
.footer ul, ol {
padding: 0;
margin: 0;
list-style: none !important;
}
.footer ul li a {
font-family:Roboto;
font-size: 0.8em;
font-weight: 400;
line-height: 1.8em;
list-style: none;
color: #7F8C8D;
}
.footer ul li a:hover,
.footer ul li a:focus,
.footer ul li a:active{
color : #0076BA;
font-weight: 400 !important;
line-height: 1.8em;
font-family:Roboto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.social {
display: table;
margin: 0 auto;
}
.social li {
float: left;
padding-right: 10px;
}
.social li a {
display: block;
font-size: 2em;
color: #7F8C8D !important;
width: 2.0em;
height: 2.0em;
line-height: 3.2em;
text-align: center;
}
#social-fb:hover,#social-fb:focus,#social-fb:active {
color: #3b5998;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#social-tw:hover,#social-tw:focus,#social-tw:active {
color: #55acee;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#social-is:hover,#social-is:focus,#social-is:active {
color: #e95950;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#social-yt:hover,#social-yt:focus,#social-yt:active {
color: #ff0000;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.footer-bottom {
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
margin : 0;
padding-top: 11px;
padding-bottom: 10px;
font-size: 0.8em !important;
}
/*-----------------------------------*\
  $RESPONSIVE
\*-----------------------------------*/
@media screen and (min-width: 768px) {
.col-sm-4, .col-sm-3, .col-sm-6, .col-sm-8{
text-align: center;
}
.col-sm-5, .col-sm-12{
text-align: left;
}
.btn1 {
width: 100%;
margin-bottom: 35px;
}
.btn2, .btn1 {
width: 100% !important;
margin: 0 auto 35;
}
.btn {
margin: 0 auto 35;
}
}
@media screen and (max-width: 480px) {
.col-sm-12,.col-sm-5, .col-sm-8, .col-sm-4, .col-sm-3, .col-sm-6{
text-align: center;
}
.logo {
font-size: 10em;
text-align: center !important;
margin : 0 auto !important;
}
.col-border{
border-left-color: #F5F5F5;
border: solid 0em !important;
}
body, .modal-body {
font: 400 10px Lato, sans-serif;
line-height: 1.375em;
color: #818181;
}
h1{
font-size: 2.0em;
letter-spacing: 0.1em;
}
h2 {
font-size: 1.3em;
text-transform: uppercase;
color: #F1F1F1;
font-weight: 600;
margin: 10 0 20 0.5em;
}
h3 {
font-size: 2.5em;
letter-spacing: 0.1em;
color: #303030;
}
h4 {
font-size: 14px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}  
h5 {
font-size: 14px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
}  
h6 {
font-size: 1.0em;
color: #F1F1F1;
font-family: Yanone Kaffeesatz;
font-weight: 400;
font-style: italic;
margin : 25px 0;
text-align: justify;
}
.h7 {
font-size: 0.8em;
color: #303030;
font-weight: 400;
}
.h8 {
font-size: 1.0em;
color: #0076BA;
font-family: Yanone Kaffeesatz;
font-weight: 400;
font-style: italic;
}
.h9 {
font-size: 1.3em;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin: 0 0 10 0.5em;
}
.h10 {
margin: 10px 0 10px 0;
letter-spacing: 0.2em;      
font-size: 12px;
color: #FFF;
font-weight: 600;
}
.btn2, .btn1 {
width: 100% !important;
margin: 0 auto 35;
}
.btn {
margin: 0 auto 35;
}
}
/*-----------------------------------*\
 $TIMELINE
\*-----------------------------------*/
*, *::after, *::before {
box-sizing: border-box;
}
.cd-horizontal-timeline a, a:hover, a:active
{
font-family:Roboto;
font-style: normal;
font-weight: 100;
color: #3d464d;
line-height: normal;
text-decoration: none;
}
.cd-horizontal-timeline h2 
{
font-size: 1.5em;
font-family:Roboto;
text-transform: uppercase;
color: #0076BA;
font-weight: 600;
margin : 0 0 1.0em 0;
}
.cd-horizontal-timeline p
{
font-size: 1.0em;
font: 400 Lato, sans-serif;
color: #818181;
text-align: justify;
}
.cd-horizontal-timeline {
opacity: 0;
margin: 2em auto;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'mobile';
display: none;
}
.cd-horizontal-timeline.loaded {
/* show the timeline after events position has been set (using JavaScript) */
opacity: 1;
}
.cd-horizontal-timeline .timeline {
position: relative;
height: 100px;
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
position: relative;
height: 100% !important;
margin: 0 40px;
overflow:hidden;
}
.cd-horizontal-timeline ol, .ListeOL {
list-style: none !important;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
/* these are used to create a shadow effect at the sides of the timeline */
content: '';
position: absolute;
z-index: 2;
top: 0;
height: 50%;
width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
left: 0;
background-image: -webkit-linear-gradient( left , #FFFFFF, rgba(248, 248, 248, 0));
background-image: linear-gradient(to right, #FFFFFF, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
right: 0;
background-image: -webkit-linear-gradient( right , #FFFFFF, rgba(248, 248, 248, 0));
background-image: linear-gradient(to left, #FFFFFF, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events {
/* this is the grey line/timeline */
position: absolute;
z-index: 1;
left: 0;
top: 49px;
height: 2px;
/* width will be set using JavaScript */
background: #dfdfdf;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
/* this is used to create the green line filling the timeline */
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #0076BA;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
position: absolute;
bottom: 0;
z-index: 2;
text-align: center;
font-size: 1.3rem;
padding-bottom: 15px;
color: #383838;
/* fix bug on Safari - text flickering while timeline translates */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
/* this is used to create the event spot */
content: '';
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -5px;
height: 12px;
width: 12px;
border-radius: 50%;
border: 2px solid #C0C8C9;
background-color: #E8E8E8;
-webkit-transition: background-color 0.3s, border-color 0.3s;
-moz-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
background-color: #0076BA;
border-color: #0076BA;
}
.cd-horizontal-timeline .events a.selected {
pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
background-color: #0076BA;
border-color: #0076BA;
}
.cd-horizontal-timeline .events a.older-event::after {
border-color: #0076BA;
}
@media only screen and (min-width: 1100px) {
.cd-horizontal-timeline {
margin: 2em auto;
}
.cd-horizontal-timeline::before {
/* never visible - this is used in jQuery to check the current MQ */
content: 'desktop';
}
}
.cd-timeline-navigation a {
/* these are the left/right arrows to navigate the timeline */
position: absolute;
z-index: 1;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 34px;
width: 34px;
border-radius: 50%;
border: 2px solid #0076BA;
/* replace text with an icon */
overflow: hidden;
color: transparent;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
/* arrow icon */
content: '';
position: absolute;
height: 16px;
width: 16px;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
color: #0076BA;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
left: 0;
-webkit-transform: translateY(-50%) rotate(180deg);
-moz-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
-o-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
border-color: #0076BA;
}
.cd-timeline-navigation a.inactive {
cursor: not-allowed;
border-color: #C0C8C9;
}
.cd-timeline-navigation a.inactive::after {
background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
border-color: #C0C8C9;
}
.cd-horizontal-timeline .events-content {
position: relative;
width: 100%;
height: auto;
margin: 0;
overflow: auto !important;
-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;
transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
position: absolute;
z-index: 1;
width: 100%;
height: auto;
left: 0;
top: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
padding: 0 5%;
opacity: 0;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
/* visible event content */
position: relative;
z-index: 2;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
-webkit-animation-name: cd-enter-right;
-moz-animation-name: cd-enter-right;
animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
-webkit-animation-name: cd-enter-left;
-moz-animation-name: cd-enter-left;
animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
max-width: 800px;
margin: 0 auto;
}
@-webkit-keyframes cd-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-right {
0% {
opacity: 0;
-moz-transform: translateX(100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-left {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
[class*="col"] img{
width: 100%;
height: auto;
list-style: none !important;
}
/*-----------------------------------*\
 $LOADER
\*-----------------------------------*/
#logoloader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 250px;
height: 250px;
margin: -140px 0 0 -140px;
text-align: center;
}
.logoloaderbox {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
width: 250px;
height: 250px;
margin: -125px 0 0 -125px;
border: 16px solid #F6F6F6;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 220px;
height: 220px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 2s;
animation-name: animatebottom;
animation-duration: 2s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 } 
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
from{ bottom:-100px; opacity:0 } 
to{ bottom:0; opacity:1 }
}
#mySite {
display: none;
text-align: center;
}
/*-----------------------------------*\
 $Ruban
\*-----------------------------------*/