body {
 overflow-x: hidden;
 font-family: 'Raleway', sans-serif; }
p {
 line-height: 1.75;}
a {
 color: #1D71B9;}
a.orlink {
 color: #ffac2b;}
a:hover {
 color: #ffac2b;}
.text-primary {
 color: #1D71B9 !important;}
h2, h3, h4, h5, h6 {
 font-weight: 700;
 font-family: 'Montserrat', sans-serif; }
section {
 padding-top: 45px;
 padding-bottom: 25px;
 padding-left: 0px;
 padding-right: 0px;}
section.classicsection {
 padding: 25px 0;}
section.section-section {
 padding: 120px 0;}
section h3.section-heading {
 font-size: 25px;
 margin-top: 10px;
 margin-bottom: 15px;}
section h3.section-subheading,
section h3.section-subheading-2 {
 font-size: 16px;
 font-weight: 400;
 margin-bottom: 40px;
 text-transform: none;
 font-family: 'Raleway', sans-serif; }
section h3.section-subheading-2 {
 color: #b7bbbf !important;}
section h2.detailed-h2 {
 font-size: 16px;
 line-height: 1.75;
 font-family: 'Raleway', sans-serif;
 margin-top: 0;
 margin-bottom: 1rem;
 display: block;
 font-weight: 400;}
.normal_title_h2 {
 font-size: 17px;
 line-height: 1.75;
 font-family: 'Raleway', sans-serif;
 margin-top: 20px;
 margin-bottom: 10px;}
.justify_content_normal {
 font-size: 16px;
 text-align: justify;
 text-justify: inter-word;
 color: #6c757d;}
.content_info_plus {
 font-size: 14px;
 text-align: justify;
 text-justify: inter-word;
 color: #6ba2d1;}
div.blue_bar {
 border-top: 1px solid #1d71b9;
 margin-right: 35%;
 margin-left: 35%;
 width: auto;}
.blue-text {
 color: #1d71b8!important;}
.displaynone {
 display:none!important; }
.btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;}
.btn-xl {
  font-size: 16px;
  padding: 15px 20px;}
.btn-primary {
  background-color: #1D71B9;
  border-color: #1D71B9;}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #ffad17 !important;
  border-color: #ffad17 !important;
  color: white;}
.btn-primary:active, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;}
::-moz-selection {
  background: #1D71B9;
  text-shadow: none;}
::selection {
  background: #1D71B9;
  text-shadow: none;}

ul.classicdot { 
 list-style:none;
 font-size:15px;
 text-align: left!important;
 padding-left:0px;
 padding-right:0px;} 

ul.classicdotbig {
 font-size:20px;}
 
img#videoLaunch {
 cursor: pointer;}
img::selection {
  background: transparent;}
img::-moz-selection {
  background: transparent;}

#mainNav {
 background-color: #212529; }
#mainNav .navbar-toggler {
 font-size: 12px;
 right: 0;
 padding: 13px;
 text-transform: uppercase;
 color: white;
 border: 0;
 background-color: #1D71B9;
 font-family: 'Montserrat', sans-serif; }
#mainNav .navbar-brand {
 color: #1D71B9;
 font-family: 'Montserrat', sans-serif; }
#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
 color: #fec503; }
#mainNav .navbar-nav .nav-item .nav-link {
 font-size: 13px;
 font-weight: bold;
 padding: 0.75em 0;
 letter-spacing: 1px;
 color: #ffffff;
 font-family: 'Montserrat', sans-serif; }
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
 color: #1D71B9; }
#mainNav .nav-btn {
 color: white;
 margin: 1em 0em !important; }
#mainNav .dropdown-menu.show,
#mainNav .dropdown-item:hover {
 background-color: #212529; }
#mainNav .dropdown-item {
 color:#ffffff; 
 font-size: 13px; }
#mainNav .dropdown-item:hover {
 color:#1D71B9; }

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden; }
.video-container iframe,  
.video-container object,  
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;}

.intro-next {
 padding-top: 40px;
 text-align: center; }
 
.demo-request {
 display: none; }
.demo-request>div {
 display: none; }
.demo-request>div>button.close { 
 display: none; }

.bd-type1 {
 position: relative;
 padding: 1rem;
 border: solid #f7f7f9;
 font-size: 0.9rem; }
.bd-type1>.bd-type1-1 {
font-size : 1.1rem; 
font-weight: 700!important;}	
 
h2.blog-article {
 font-size: 15px!important;
 margin-bottom: 10px!important; }
	
@media (max-width: 991px) {
.fa-4x {
 font-size: 2em; }
.btn {
 font-size: 0.8rem; }
.demo-request {
 float: left;
 z-index: 99999;
 display: block;
 bottom: 2%;
 position: fixed;
 border-radius: 10px;
 text-align: center;
 font-size: 12px;
 cursor: pointer;
 left: 20px;}
.demo-request>div {
 display: block;
 padding-left:2px;
 padding-right:26px;
 padding-top:2px;
 padding-bottom:2px; }
.demo-request>div>button.close { 
 display: block;
 padding-left:2px;
 padding-right:7px;
 padding-top:3px;
 padding-bottom:2px; } 
.demo-request>div>a.btn {
 font-size:10px; }
.bd-type1 {
 margin-bottom: 10px;}
.bd-type1>h4 {
 font-size: 1.3rem;}
.bd-type1>.bd-type1-1 {
 font-size : 1.0rem;
 line-height: 1.1;}
ul.classicdotbig {
 font-size:15px;} 
}

@media (min-width: 992px) {
 #mainNav {
   padding-top: 25px;
   padding-bottom: 25px;
   -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
   -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
   transition: padding-top 0.3s, padding-bottom 0.3s;
   border: none;
   background-color: transparent;  }
 #mainNav .navbar-brand {
   font-size: 1.75em;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;  }
 #mainNav .navbar-nav .nav-item .nav-link {
   padding: 1.5em 0.85em;  }
 #mainNav.navbar-shrink {
   padding-top: 0;
   padding-bottom: 0;
   background-color: #212529;  }
 #mainNav.navbar-shrink .navbar-brand {
   font-size: 1.6em;
   padding: 10px 0; }
 #mainNav .nav-btn {
   margin: 1em 1em !important; }
 .intro-next {
   padding-top: 80px; }
}

@media (min-width: 1200px) { 
 #mainNav .navbar-nav .nav-item .nav-link {
 font-size: 16px;
 padding: 1.1em 1em !important; }
 #mainNav .dropdown-item {
 font-size: 13px; }
}

/* masthead */
header.masthead {
  text-align: center;
  color: #1d71b9;
  background-color : #f8f9fa;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
header.masthead .intro-text {
 padding-top: 90px;
 padding-bottom: 20px;}
header.masthead .intro-text .intro-lead-in {
 font-size: 24px;
 line-height: 30px;
 margin-bottom: 25px;
 font-family: 'Raleway', sans-serif;
 color: #1d71b8;}
header.masthead .intro-text .intro-heading {
 margin-bottom: 30px;
 font-family: 'Montserrat', sans-serif;
 font-weight: normal;
 line-height: 30px;
 color:#000000;
 font-size: 20px; }
header.masthead .intro-text .intro-heading img{
 height:50px;}
 
/* classichead */
header.classichead {
  text-align: center;
  color: #1d71b9;}
header.classichead .intro-text {
 padding-top: 100px;}
header.classichead .intro-text .intro-lead-in {
  font-size: 25px;
  line-height: 30px;
  margin-bottom: 25px;
  font-family: 'Raleway', sans-serif;
  color: #ffac2b;}
header.classichead .intro-text .intro-lead-in-smart {
  font-size: 36px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 15px;
  font-family: 'Montserrat', sans-serif;
  color: #212529;}  
header.classichead .intro-text .intro-heading {
  font-size: 25px;
  font-weight: 700;
  line-height: 55px;
  margin-bottom: 25px;
  font-family: 'Montserrat', sans-serif;}
  header.classichead .intro-text .intro-heading-smart {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
  text-transform: none;
  font-family: 'Raleway', sans-serif;}
header .intro-marketing {
  font-size: 20px;
  font-style: italic;
  color: #ffac2b;
  text-shadow: #000000 1px 1px;
  padding-top: 45px;
  padding-bottom: 35px;
  padding-right: 10%;
  padding-left: 10%;}
.service-heading {
  margin: 15px 0;
  text-transform: none;} 

@media (min-width: 768px) and (max-width: 991px) {
  .container {
 max-width: 760px; }
}
 
@media (min-width: 768px) {
 header.masthead {
  background-image: url("../img/header_bkground_gouti.png");
  margin-top: 60px;  }
 header.masthead .intro-text .intro-lead-in {
  font-size: 30px;
  line-height: 35px;
  margin-bottom: 30px;}
  header.masthead .intro-text .intro-heading img{
  height:80px;}
 .btn-xl {
  font-size: 18px;
  padding: 20px 40px;}
 section h3.section-heading {
  font-size: 36px;
  margin-top: 10px;
  margin-bottom: 15px;}  
}

@media (min-width: 992px) {
 header.masthead .intro-text {
  padding-bottom: 35px;}	
 header.masthead .intro-text .intro-lead-in {
  font-size: 38px;
  line-height: 50px;}
 header.classichead .intro-text .intro-heading {
  font-size: 38px!important;}
}

@media (min-width: 1200px) {
 header.classichead .intro-text .intro-heading {
  font-size: 36px!important;}
}

#portfolio .portfolio-item {
  right: 0;
  margin: 0 0 15px;}
#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
  background: rgba(254, 209, 54, 0.9);
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: white;}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;}
#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  background-color: #fff;}
#portfolio .portfolio-item .portfolio-caption h4 {
  margin: 0;
  text-transform: none;}
#portfolio .portfolio-item .portfolio-caption p {
  font-size: 16px;
  margin: 0;
  font-family: 'Raleway', sans-serif; }
#portfolio * {
  z-index: 2;}

@media (min-width: 768px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;  }
}

.portfolio-modal {
  padding-right: 0px !important;}
.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;}
.portfolio-modal .modal-content {
  padding: 100px 0;
  text-align: center;}
.portfolio-modal .modal-content h2 {
  font-size: 3em;
  margin-bottom: 15px;}
 
@media (max-width: 991px) {
header.classichead .intro-text .intro-lead-in-smart {
 font-size: 30px;}
}
 
@media (max-width: 767px) {
header.masthead .intro-text .intro-heading {
 margin-bottom: 10px;
 line-height: 25px;
 font-size: 15px; }
header.classichead .intro-text .intro-lead-in-smart {
 font-size: 30px;} 
section h3.section-subheading,
section h3.section-subheading-2 {
 font-size: 15px; }
header.masthead .intro-text input.form-control {
 display:none; }
header.masthead .intro-next {
 padding-top: 1px; }
.portfolio-modal .modal-content h2 {
 font-size: 2em;
 margin-bottom: 10px; }
.pricing_footer {
 border-top: 0!important;
 background-color:#f8f9fa!important; 
 padding: 1px 30px 30px 30px!important;}
}

.portfolio-modal .modal-content p {
  margin-bottom: 30px;}
.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 20px 0 30px;
  font-family: 'Raleway', sans-serif; }
.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;}
.portfolio-modal .modal-content img {
  margin-bottom: 30px;}
.portfolio-modal .modal-content button {
  cursor: pointer;}
.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;}
.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;}
.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;}

.timeline {
  position: relative;
  padding: 0;
  list-style: none;}
.timeline:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 2px;
  margin-left: -1.5px;
  content: '';
  background-color: #e9ecef;}
.timeline > li {
  position: relative;
  min-height: 50px;
  margin-bottom: 50px;}
.timeline > li:after, .timeline > li:before {
  display: table;
  content: ' ';}
.timeline > li:after {
  clear: both;}
.timeline > li .timeline-panel {
  position: relative;
  float: right;
  width: 100%;
  padding: 0 20px 0 100px;
  text-align: left;}
.timeline > li .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;}
.timeline > li .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;}
.timeline > li .timeline-image {
  position: absolute;
  z-index: 100;
  left: 0;
  width: 80px;
  height: 80px;
  margin-left: 0;
  text-align: center;
  color: white;
  border: 7px solid #e9ecef;
  border-radius: 100%;
  background-color: #1D71B9;}
.timeline > li .timeline-image h4 {
  font-size: 10px;
  line-height: 14px;
  margin-top: 12px;}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
  padding: 0 20px 0 100px;
  text-align: left;}
.timeline > li.timeline-inverted > .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;}
.timeline > li.timeline-inverted > .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}
.timeline > li:last-child {
  margin-bottom: 0;}
.timeline .timeline-heading h4 {
  margin-top: 0;
  color: inherit;}
.timeline .timeline-heading h4.subheading {
  text-transform: none;}
.timeline .timeline-body > ul,
.timeline .timeline-body > p {
  margin-bottom: 0;}

@media (min-width: 768px) {
  .timeline:before {
    left: 50%; }
  .timeline > li {
    min-height: 100px;
    margin-bottom: 60px; }
  .timeline > li .timeline-panel {
    float: left;
    width: 41%;
    padding: 0 20px 20px 30px;
    text-align: right;
  }
  .timeline > li .timeline-image {
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px; }
  .timeline > li .timeline-image h4 {
    font-size: 13px;
    line-height: 18px;
    margin-top: 16px; }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left; }
}

@media (min-width: 992px) {
  .timeline > li {
    min-height: 150px; }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px;
  }
  .timeline > li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px; }
  .timeline > li .timeline-image h4 {
    font-size: 18px;
    line-height: 26px;
    margin-top: 30px; }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 20px 20px; }
}

@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}

/** fonctionnalité **/
.title-t1 {
 font-size:2rem; }
.image-ronde {
 z-index: 100;
 width: 90px;
 height: 90px;
 min-width:  90px;
 min-height: 90px; 
 margin-left: 0;
 text-align: center;
 color: white;
 border: 5px solid #e9ecef;
 border-radius: 100%;
 background-color: #1D71B9;}
div.items-list-left {
 padding-left: 80px; 
 padding-right: 10px;
 padding-top: 10px;
 padding-bottom: 10px; }
div.items-list-right {
 padding-left: 20px;
 padding-right: 80px;
 padding-top: 10px; 
 padding-bottom: 10px; }
div.items-list-left div,
div.items-list-right div {
 font-size:17px;}
.line-top {
 border-top: 2px solid #e9ecef; }
.line-bottom {
 border-bottom: 2px solid #e9ecef; }
.line-left {
 border-left: 2px solid #e9ecef; }
.line-right {
 border-right: 2px solid #e9ecef; }

@media (max-width: 767px) {
.image-ronde {
 width: 70px;
 height: 70px;
 min-width: 70px;
 min-height: 70px;}
div.items-list-left div,
div.items-list-right div {
 font-size:15px;}
}
 
@media (min-width: 1000px) {
.title-t1 {
 font-size:2.5rem; }
.image-ronde {
 width: 140px;
 height: 140px;
 border: 7px solid #e9ecef; }
div.items-list-left {
 padding-left: 140px; }
div.items-list-right {
 padding-right: 140px; }
div.items-list-left div,
div.items-list-right div {
 font-size:19px;}
} 

.team-member {
  margin-bottom: 50px;
  text-align: center; }
.team-member img {
  width: 225px;
  height: 225px;
  border: 7px solid #fff; }
.team-member h4 {
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: none; }
.team-member p {
  margin-top: 0;}

section#contact {
  background-color: #212529;
  background-image: url("../img/map-image.png");
  background-repeat: no-repeat;
  background-position: center;}
section#contact .section-heading {
  color: #fff;}
section#contact .form-group {
  margin-bottom: 25px;}
section#contact .form-group input,
section#contact .form-group textarea {
  padding: 10px;}
section#contact .form-group input.form-control {
  height: auto;}
section#contact .form-group textarea.form-control {
  height: 260px;}
section#contact .form-control:focus {
  border-color: #1D71B9;
  box-shadow: none;}
section#contact ::-webkit-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  font-family: 'Montserrat', sans-serif;}
section#contact :-moz-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* Firefox 18- */
  font-family: 'Montserrat', sans-serif;}
section#contact ::-moz-placeholder {
 font-weight: 700;
 color: #ced4da;
 /* Firefox 19+ */
 font-family: 'Montserrat', sans-serif; }
section#contact :-ms-input-placeholder {
 font-weight: 700;
 color: #ced4da;
 font-family: 'Montserrat', sans-serif; }

footer {
 padding: 25px 0;
 text-align: center;
 background: #f8f9fa;
 border-top: 1px solid #ececec; }

footer ul.quicklinks {
 font-size: 80%;
 line-height: 25px;
 margin-bottom: 0;
 text-transform: none;
 font-family: 'Montserrat', sans-serif; }

ul.social-buttons {
 margin-bottom: 0; }

ul.social-buttons li a {
 font-size: 20px;
 line-height: 40px;
 display: block;
 width: 40px;
 height: 40px;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 color: white;
 border-radius: 100%;
 outline: none;
 background-color: #212529;}

ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
  background-color: #1D71B9;}

.pricing {
 background: #fff;}
.pricing .title {
 height: 125px;
 color: #fff;
 padding: 15px 0 0;
 text-align: center;}
.accounttype1 {
 background: #28a746;}
.accounttype2 {
 background: #ffc108;}
.accounttype3 {
 background: #1a95bb;}
.textaccounttype1 {
 color: #28a746;}
.textaccounttype2 {
 color: #ffc108;}
.textaccounttype3 {
 color: #1a95bb;} 
.pricing .title h2 {
  text-transform: capitalize;
  font-size: 18px;
  border-radius: 5px 5px 0 0;
  margin: 0;
  font-weight: 400;}
.pricing .title h3 {
  font-size: 30px;
  margin: 10px 12px 8px 12px; }
 .pricing .title h3 span {
  font-size: 20px;
  margin: 12px;
  background: none;}
.pricing .title span {
  background: rgba(51, 51, 51, 0.28);
  padding: 2px 5px; }
.pricing_features {
  background: #FAFAFA;
  padding: 20px 15px;
  min-height: 230px; }
.pricing_features ul {
  margin-top: 15px;
  font-size: 15px;
  font-weight: bold;
  color: #1995ba; 
  text-transform: uppercase;}
.pricing_features ul li {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: normal;
  color: initial; 
  text-transform: none;  }
.pricing_footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  text-align: center;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px; }
.pricing_footer p {
  font-size: 13px;
  padding: 10px 0 2px;
  display: block; }

.ui-ribbon-container {
  position: relative; }
.ui-ribbon-container .ui-ribbon-wrapper {
  position: absolute;
  overflow: hidden;
  width: 85px;
  height: 88px;
  top: -3px;
  right: -3px; }
.ui-ribbon-container.ui-ribbon-primary .ui-ribbon {
  background-color: #5b90bf; }
.ui-ribbon-container .ui-ribbon {
  position: relative;
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  transform: rotate(45deg);
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  line-height: 20px;
  background-color: #dc7f29;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.ui-ribbon-container.ui-ribbon-primary .ui-ribbon:after, .ui-ribbon-container.ui-ribbon-primary .ui-ribbon:before {
  border-top: 2px solid #5b90bf; }
.ui-ribbon-container .ui-ribbon:before {
  left: 0;
  bottom: -1px; }
.ui-ribbon-container .ui-ribbon:before {
  right: 0; }
.ui-ribbon-container .ui-ribbon:after, .ui-ribbon-container .ui-ribbon:before {
  position: absolute;
  content: " ";
  line-height: 0;
  border-top: 2px solid #b17d30;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent; }

/* **** goutiFlexBox *****/
#flex-container1, #flex-container2, #flex-container3 {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 width: 100%;
 min-height: 400px;
 max-width: 1000px;
 margin: auto;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 position: relative; }
#left-zone1, #left-zone2, #left-zone3 {
 -webkit-box-flex: 0;
 -ms-flex: 0 0 auto;
 flex: 0 0 auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width: 100%; }
#left-zone1 .list, #left-zone2 .list, #left-zone3 .list {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 list-style: none;
 -ms-flex-line-pack: stretch;
 align-content: stretch;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-flex: 1;
 -ms-flex: 1 1 auto;
 flex: 1 1 auto;
 margin: auto;
 padding: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box; }
.item-goutiFlexBox input {
 display: none; }
label.label-goutiFlexBox {
 display: block;
 opacity: 0.6;
 height: 52px;
 text-align: center;
 line-height: 50px;
 position: relative; }
label.label-goutiFlexBox:hover {
 opacity: 0.75;
 cursor: pointer; }
.content-test {
 position: absolute;
 right: 0;
 bottom: 0;
 opacity: 0;
 -webkit-transform: translateY(100%);
 -ms-transform: translateY(100%);
 transform: translateY(100%);
 height: 50%;
 width: 100%;
 -webkit-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: 0.5s ease-out;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 pointer-events: none;
 padding: 20px; }
#right-zone1, #right-zone2, #right-zone3 {
 width: 100%;
 -webkit-box-flex: 1;
 -ms-flex: 1 0 auto;
 flex: 1 0 auto;
 height: 50%; }
input:checked ~ .content-test {
 -webkit-transform: translateY(0%);
 -ms-transform: translateY(0%);
 transform: translateY(0%);
 -webkit-transition: -webkit-transform 1s;
 transition: -webkit-transform 1s;
 -o-transition: transform 1s;
 transition: transform 1s;
 transition: transform 1s, -webkit-transform 1s;
 opacity: 1; }

@media (min-width: 768px) {
#flex-container1, #flex-container2,#flex-container3 {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 min-height: auto;
 height: 450px;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0; }
.content-test {
 width: 65%;
 height: 100%;
 pointer-events: auto;
 -webkit-transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 transform: translateY(-100%);  }
#left-zone1, #left-zone2, #left-zone3 {
 width: 35%;  }
#right-zone1, #right-zone2, #right-zone3 {
 height: 100%;
 width: 65%;  }
}

@media (max-width: 991px) {
.item-goutiFlexBox > label.label-goutiFlexBox {
 line-height: 40px;
 font-size: 0.9rem;
 padding-top: 5px;}
.content-test {
 font-size: 0.9rem;
 height: 100%;
 padding: 10px; }
}

@media (max-width: 767px) {
#flex-container1, #flex-container2, #flex-container3 {
 height:700px; }
.item-goutiFlexBox > label.label-goutiFlexBox {
 line-height: 22px;
 font-size: 1.1rem;
 padding-top: 5px;
 height: 35px;}
.content-test {
 font-size: 0.9rem;
 height: 75%;
 padding: 10px; }
}

@media (max-width: 480px) {
#flex-container1, #flex-container2, #flex-container3 {
 height:650px; }
.item-goutiFlexBox > label.label-goutiFlexBox {
 font-size: 1rem;
 line-height: 25px;
 height: 35px;}
.content-test {
 font-size: 0.9rem;
 height: 65%;
 padding: 5px; } 
}

input:checked ~ label.label-goutiFlexBox {
 opacity: 1;
 color: #fff; }
input:checked ~ label.label-goutiFlexBox.blueLabel {
 background-color: #1D71B9; }
input:checked ~ label.label-goutiFlexBox.greenLabel {
 background-color: #28a746; }
input:checked ~ label.label-goutiFlexBox.orangeLabel {
 background-color: #ffc107; }	
.label-goutiFlexBox:hover {
 font-size: 1.15rem;
 -webkit-transition: font-size 0.5s;
 -o-transition: font-size 0.5s;
 transition: font-size 0.5s; }
.img-goutiFlexBox {
 width: 70%; }
.description-goutiFlexBox {
 margin-top: 20px;
 text-align: left; }

 @media (max-width: 480px) {
  .gouti-citation {
    font-size: 1.5em !important;}
}

blockquote.gouti-citation {
  font-size: 3em;
  font-style: italic;
  margin: 0.25em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #ffffff;}

blockquote.gouti-citation:before {
  position: absolute;
  font-size: 3em;
  line-height: 1;
  top: 0;
  left: -0.3em;
  content: "\201C";}

blockquote.gouti-citation:after {
  font-size: 3em;
  position: absolute;
  right: 0;
  bottom: -0.5em;
  content: "\201D";}

blockquote.gouti-citation cite {
  color: #ededed;
  font-size: 14px;
  display: block;
  margin-top: 5px;}

blockquote.gouti-citation cite:before {
  content: "\2014 \2009";}

.transcure-line {
  width: 15em;
  margin-left: 0px;
  border: 3px solid #8D5076;
  border-radius: 6px;
  background-color: #8D5076;}

.words-transcure {
  background-color: #8D5076;
  padding: 20px;}

.answer-transcure {
  border-left: 6px solid #8D5076;}

.btn-transcure {
  background-color:#7A345E;
  border-color:#7A345E;
  color: white;
  align-self: center;}

.ecogreen-line {
  width: 15em;
  margin-left: 0px;
  border: 3px solid #7AB598;
  border-radius: 6px;
  background-color: #7AB598;}

.words-ecogreen {
  background-color: #7AB598;
  padding: 20px;}

.answer-ecogreen {
  border-left: 6px solid #7AB598;}

.btn-ecogreen {
  background-color:#63A887;
  border-color:#63A887;
  color: white;
  align-self: center;}

.belfort-line {
  width: 15em;
  margin-left: 0px;
  border: 3px solid #D14A60;
  border-radius: 6px;
  background-color: #D14A60;}

.words-belfort {
  background-color: #D14A60;
  padding: 20px;}

.answer-belfort {
  border-left: 6px solid #D14A60;}

.btn-belfort {
  background-color:#C82744;
  border-color:#C82744;
  color: white;
  align-self: center;}

.carousel-inner {
  height: auto;}

.carousel {
  margin: 15px;}

.carousel-indicators {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  margin-top: 20px;
  z-index: 15;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  list-style: none;
  align-items: center;
  padding-left: 0;
  margin-right: initial;
  margin-left: initial;}

.carousel-indicators li {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  margin-right: 5px;
  margin-left: 5px;
  text-indent: -999px;
  background-color: #b6b6b6;}

.carousel-indicators .active {
  background-color: #1D71B9;}

.carousel-control-next, .carousel-control-prev {
  position: relative;
  top: auto;
  bottom: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  opacity: 1;
  margin: 0.3rem;	}