.greyH {height: 15vw;}
@media only screen and (max-width: 380px) {
    .font1vw{font-size:10px!important}
    }
@media only screen and (min-width: 1900px) {
  .blueH { height: 12vw;}
  .font1vw { font-size:0.9vw;}
  .font2vw { font-size:2vw;}
  .font1-2vw { font-size:2vw;}
  .fontATL,.fontW, .fontABO { font-size:2vw;}
  .fontJ { font-size:3vw;}
  .content, .content3 {max-width:50%;margin-left: auto; margin-right: auto;}
  .content2 {max-width:75%;margin-left: auto; margin-right: auto;}
  .container {
  	max-width: 1500px;
	}
    }
@media only screen and (min-width: 600px) {
  .medium { width: 27%;}
  .content {max-width:75%;margin-left: auto; margin-right: auto;}
  .content2 {max-width:95%;margin-left: auto; margin-right: auto; }
  .content3 {max-width:85%;margin-left: auto; margin-right: auto;}
  
  }
@media only screen and (min-width: 993px) {
  .medium { width: 16%;}
  .fontATL{font-size:64px!important}
  .content {max-width:60%;margin-left: auto; margin-right: auto;}
  .content2 {max-width:80%;margin-left: auto; margin-right: auto;}
  .content3 {max-width:69%;margin-left: auto; margin-right: auto;}
  .font1-2vw { font-size:1.5vw;}
  }  
@media only screen and (max-width: 600px) {
  .medium { width: 45%;}
  .content {max-width:100%;margin-left: auto; margin-right: auto;}
  .padBlog { margin:3%;}
  } 
@media only screen and (max-width: 350px) {
  body {background-color: white;}
  
  }
 @media (max-width:350px) and (min-width:100px){.w3-hide-mini{display:none!important}}
.fontR, body { font-family: 'Roboto', sans-serif;}
.fontPD,h6, h5, h4, h3, h2, h1 { font-family: 'Playfair Display', serif; }
.color1 {background-color: #1b9c00;}/*basic blue*/
.link {color: #894409 ; /*0c5ac0 replaced by green 1b9c00*/
       text-decoration: none;}/* basic blue*/
.link3 {color: white ;
       text-decoration: none;}/* grey+dark blue*/
 .link2 {color:  #e5e9ed !important;
       text-decoration: none;
       }/* grey*/  
.link:hover, .link2:hover, .link3:hover {color: #d04f03!important; text-decoration: none;}/* turquoise*/ /*use dark green 1b9c00 and light green 21c300*/
.color2 {background-color: #F4A460;}/* dark blue*/ /*replace 083878  by dark green #087839*/
.color1-text {color: #1b9c00;}/*basic blue*/
.color2-text {color: #894409;}/* dark blue*/
.color3 {background-color: #C7D0D8;}/* grey*/
.color3-text {color: #e5e9ed;}/* grey*/
.color4 {background-color: #28f240;}/* green -> color of Data&Visualisation in the Menu when we go over*/
.color5 {background-color: #FF3300;}/* orange*/
.color5-text{color: #FF3300;}/* orange*/
.color6-text{color: #FFFFFF!important}/* white*/
.color7{background-color:#033017;}/*deepest blue*/
.color7-text{color:#033017;background-color:#fff;}/*deepest blue*/
.color8{color: #FFFFFF!important}/* white*/
.navcolor {background-color: #e6ffff;}
.shades {background-color: #f8f8f8;}
.active {background-color:#FFF!important}
.active2 {border-top: 4px solid #e5e9ed!important}
.active3 {border-left: 4px solid #1b9c00!important;}
.active4 {background-color:#2196F3!important}/* have to look for .active which was 2196F3 because I used active for my carousel*/
margin-left:-4px;
}
.w3-light-grey {color:#000!important;background-color:#E0E0E0!important}
.grey2 {background-color: #F1F1F1}
.border{border-right:1px solid #1b9c00!important;}
.borderA{border-bottom:2px solid #087839!important;}
.borderAB{border-bottom:3px solid #FFF!important;}
.mar {padding-left: 20%;}  
.padEU {padding-top: 0%;
        padding-bottom:0%;
         padding-left:0.75%;
         padding-right:0.75%;}
.padTEAM {padding-top:5%;}
.padA {padding-left:10%;
       padding-right:5%;
      padding-top:5%;}
.padASM {padding-left:8%;
       padding-right:5%;
       padding-top:5%;
     }
 .padN{margin-top:5%;
     } 
.line{line-height: 90%;
}
.marT {margin-top:3%;
       margin-bottom:3%;}
.marMed {
        margin-top:10%
}
.marPic {margin-top:-150px;
      margin-left:4vw;
        margin-left:5%;
      }     
.marPic2 {margin-top:3%;}
.marPic3 {margin-top:-200px;
          margin-left:-7%;
          }
 .marDIS {margin-right:10%;}   
       
/*.grad {    background: linear-gradient(to right, #e5f1d7 30%, #2d7f15 100%);
}
 .grad2 {    background: linear-gradient(to bottom, #fff 0%, #C7D0D8 100%);
} */
/*.grad3 {    background: linear-gradient(to top, #fff 0%, #C7D0D8 100%);/*C7D0D8 replaced by e5f1d7*/
/*}   
.grad4 {    background: linear-gradient(to right, #e5f1d7 30%, #2d7f15 100%);*/
/*.grad4 {    background: linear-gradient(to right,  #6AAE87   30%, #83BB9B  100%);
}
.grad5 {    background: linear-gradient(to bottom,#e5ffc8 0%, #0f6a0c 50%);}
*/
/*.grad4 {    background: linear-gradient(to left,#355945  0%, #033017 100%);*/
.grad {    background: linear-gradient(to right, #FFF5EE 10%, #d04f03 100%);
}
 .grad2 {    background: linear-gradient(to bottom, #fff 0%, #C7D0D8 100%);
} 
.grad3 {    background: linear-gradient(to top, #fff 0%, #C7D0D8 100%);
}   
/*.grad4 {    background: linear-gradient(to top, #083878 0%, #031730 100%); /*Nuances de bleu bandeau du haut*/

/*.grad4 {    background: linear-gradient(to top, #FF6600 0%, #FF9900  100%);*/ /*Nuances de vert pour l image sombre de bamboo*/
/*.grad4 {    background: linear-gradient(to top, #000000 0%, #000000  100%);*/ /*Nuances de vert pour l image sombre de bamboo*/
.grad4 {    background: linear-gradient(to left,  #F4A460 0%, #FFF5EE  60%);}
.grad5 {    background: linear-gradient(to bottom,#d04f03 0%, #F5DEB3 100%);
}

.mask1 {

 -webkit-mask-image: linear-gradient(to right,black 45%, transparent 70%, transparent 90%,transparent 100%);
  mask-image: linear-gradient(to right,black 45%, transparent 70%, transparent 90%,transparent 100%);

 			/*background-color: rgba(,0,0,0.5);
		     background-image: linear-gradient(to right, transparent, black); */
  }
  
  
.transparent_class { background-color: rgba(0,0,0,0.5);
		     background-image: linear-gradient(to right, transparent, black); }

.mask2 {

 -webkit-mask-image: linear-gradient(to right,black 0%,black 50% ,transparent 95%,);
  mask-image: linear-gradient(to right,black 0%, transparent 80%,  black 100%);

 			/*background-color: rgba(0,0,0,0.5);
		     background-image: linear-gradient(to right, transparent, black); */
  }
  
  
.transparent_class2 { background-color: rgba(0,0,0,.5);
		     background-image: linear-gradient(to right, transparent, black ,transparent); }
		     
.transparent_class3 { background-color: rgba(0,1,0,.5);
		     background-image: linear-gradient(to right, transparent, black); }

.righthand {
	transform: scaleX(-1);
	}				     
.marPIC3 {margin-top:20%;
                      }
.w3-bottombar{border-bottom:6px solid #087839!important}
.w3-bottombarAB{border-bottom:6px solid #FFF!important}
.greyH {height: 60px;}
.w3-spin{animation:w3-spin 20s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}50%{transform:rotate(7deg)}}
.w3-spin2{animation:w3-spin 10s infinite linear}@keyframes w3-spin{50%{transform:rotate(0deg)}50%{transform:rotate(5deg)}}
.w3-spin3{animation:w3-spin 8s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}50%{transform:rotate(4deg)}}
.abo {margin-bottom:5%;
      }
.marFR {margin:10%;
       margin-bottom:3%;}
.padLarge{padding:12px 8px!important} 
.padLarge2{padding:8px 8px 12px 8px!important} 
.default {cursor: initial;}
.padNew {padding-left: 4%;
padding-right: 4%;
padding-top: 8%;
padding-bottom: 8%;}
.pado{padding-bottom:3%;}
.padNew2 {padding: 4%;}
.cursor {cursor: not-allowed;}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#fff;color:#000!important}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.imgPad {padding:18px 6% 16px 0%;}
.textI {text-align: initial;}
.box {
  float: right;
  width: 70%;
  }
.box2 {
  float: left;
  width: 50%;
  }
h7 {
    font-size: 2.3rem;
    padding: 0 0 10px;
    margin-bottom: 2.5rem;
    color: #894409;
    font-family: 'Playfair Display', serif;
}
/* Added from here carousel, partners */ 


    
.mt-4, .my-4 {
    margin-top: 1.5rem!important;
}

.w-100 {
    width: 100%!important;
}
.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: white;
}

section#consortium {
    padding: 4rem 0 2rem;
    font-size: 0.9rem;
}
#partnersCarousel .carousel-item {
    background: #fff;
}

#partnersCarousel .carousel-inner .carousel-item.active,
#partnersCarousel .carousel-inner .carousel-item-next,
#partnersCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

#partnersCarousel .carousel-inner .carousel-item-right.active,
#partnersCarousel .carousel-inner .carousel-item-next {
    transform: translateX(25%);
}

#partnersCarousel .carousel-inner .carousel-item-left.active,
#partnersCarousel .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
}

#partnersCarousel .carousel-inner .carousel-item-right,
#partnersCarousel .carousel-inner .carousel-item-left {
    transform: translateX(0);
}

#partnersCarousel .carousel-control-next,
#partnersCarousel .carousel-control-prev {
    width: 5%;
    bottom: 40px;
}

#partnersCarousel .carousel-control-next {
    right: -40px;
}

#partnersCarousel .carousel-control-prev {
    left: -40px;
}


#partnersCarousel .carousel-control-prev-icon {
    background-image: url(/media/ntnu/Xdrive/indecol/USERS/Candy/atlantis-to-bamboo/atlantis-master/img/arrow_left.png);
        width: 50px;
    height: 80px;
    background-size: 70%;
}

#partnersCarousel .carousel-control-next-icon {
    background-image: url(/media/ntnu/Xdrive/indecol/USERS/Candy/atlantis-to-bamboo/atlantis-master/img/arrow_right.png);
        width: 50px;
    height: 80px;
    background-size: 70%;
}

#partnersCarousel .carousel-item img {
    height: 120px;
    padding-bottom: 30px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#partnersCarousel .carousel-item img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}
@media (min-width: 767px) and (max-width: 992px) {
    .container {
        max-width: 700px;
    }

    .list-unstyled {
        line-height: 1.4rem;
    }
}

/// Grid system
//
// Generate semantic grid columns with these mixins.

@mixin make-container() {
  width: 100%;
  padding-right: ($grid-gutter-width / 2);
  padding-left: ($grid-gutter-width / 2);
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}

@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: ($grid-gutter-width / -2);
  margin-left: ($grid-gutter-width / -2);
}

@mixin make-col-ready() {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  min-height: 1px; // Prevent collapsing
  padding-right: ($grid-gutter-width / 2);
  padding-left: ($grid-gutter-width / 2);
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.text-center {
    text-align: center!important;
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}


// Notes on the classes:
//
// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
//    the active slide is heading.
// 2. .active.carousel-item is the current slide.
// 3. .active.carousel-item-left and .active.carousel-item-right is the current
//    slide in its in-transition state. Only one of these occurs at a time.
// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
//    is the upcoming slide in transition.

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  align-items: center;
  width: 100%;
  backface-visibility: hidden;
  perspective: 1000px;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
  @include transition($carousel-transition);
}

.carousel-item-next,
.carousel-item-prev {
  position: absolute;
  top: 0;
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  transform: translateX(0);

  @supports (transform-style: preserve-3d) {
    transform: translate3d(0, 0, 0);
  }
}

.carousel-item-next,
.active.carousel-item-right {
  transform: translateX(100%);

  @supports (transform-style: preserve-3d) {
    transform: translate3d(100%, 0, 0);
  }
}

.carousel-item-prev,
.active.carousel-item-left {
  transform: translateX(-100%);

  @supports (transform-style: preserve-3d) {
    transform: translate3d(-100%, 0, 0);
  }
}


//
// Alternate transitions
//

.carousel-fade {
  .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
  }

  .carousel-item.active,
  .carousel-item-next.carousel-item-left,
  .carousel-item-prev.carousel-item-right {
    opacity: 1;
  }

  .active.carousel-item-left,
  .active.carousel-item-right {
    opacity: 0;
  }

  .carousel-item-next,
  .carousel-item-prev,
  .carousel-item.active,
  .active.carousel-item-left,
  .active.carousel-item-prev {
    transform: translateX(0);

    @supports (transform-style: preserve-3d) {
      transform: translate3d(0, 0, 0);
    }
  }
}


//
// Left/right controls for nav
//

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  // Use flex for alignment (1-3)
  display: flex; // 1. allow flex styles
  align-items: center; // 2. vertically center contents
  justify-content: center; // 3. horizontally center contents
  width: $carousel-control-width;
  color: $carousel-control-color;
  text-align: center;
  opacity: $carousel-control-opacity;
  // We can't have a transition here because WebKit cancels the carousel
  // animation if you trip this while in the middle of another animation.

  // Hover/focus state
  @include hover-focus {
    color: $carousel-control-color;
    text-decoration: none;
    outline: 0;
    opacity: .9;
  }
}
.carousel-control-prev {
  left: 0;
  @if $enable-gradients {
    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
  }
}
.carousel-control-next {
  right: 0;
  @if $enable-gradients {
    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
  }
}

// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: $carousel-control-icon-width;
  height: $carousel-control-icon-width;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}
.carousel-control-prev-icon {
  background-image: $carousel-control-prev-icon-bg;
}
.carousel-control-next-icon {
  background-image: /img/2560px-ETH_Zürich_Logo_black.svg.png;
}


// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0; // override <ol> default
  // Use the .carousel-control's width as margin so we don't overlay those
  margin-right: $carousel-control-width;
  margin-left: $carousel-control-width;
  list-style: none;

  li {
    position: relative;
    flex: 0 1 auto;
    width: $carousel-indicator-width;
    height: $carousel-indicator-height;
    margin-right: $carousel-indicator-spacer;
    margin-left: $carousel-indicator-spacer;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba($carousel-indicator-active-bg, .5);

    // Use pseudo classes to increase the hit area by 10px on top and bottom.
    &::before {
      position: absolute;
      top: -10px;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 10px;
      content: "";
    }
    &::after {
      position: absolute;
      bottom: -10px;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 10px;
      content: "";
    }
  }

  .active {
    background-color: $carousel-indicator-active-bg;
  }
}


// Optional captions
//
//

.carousel-caption {
  position: absolute;
  right: ((100% - $carousel-caption-width) / 2);
  bottom: 20px;
  left: ((100% - $carousel-caption-width) / 2);
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $carousel-caption-color;
  text-align: center;
}


.logo {
    padding: 10px 0 ;
    padding-left: 0;
    margin-left: -14px;
    /*j ai essaye de mettre un background blanc derriere les logo mais ca ne fonctionne pas*/
}

.logo img {
    width: 180px;
}

}

//
// Text
//

.text-monospace { font-family: $font-family-monospace; }

// Alignment

.text-justify  { text-align: justify !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }

// Responsive alignment

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

.center {
  display: block;
  margin-left: 25%;
  margin-right: 25%;
  width: 50%;

}

.center2 {
display: block;
display: -webkit-flex;
display: -moz-flex;
display: flex;

justify-content: center;
}


#fcf-form {
    display:block;
}

.fcf-body {
    margin: 0;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    padding: 30px;
    padding-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-width: 100%;
}

.fcf-form-group {
    margin-bottom: 1rem;
}

.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.fcf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fcf-form-control:focus {
    border: 1px solid #313131;
}

select.fcf-form-control[size], select.fcf-form-control[multiple] {
    height: auto;
}

textarea.fcf-form-control {
    font-family: -apple-system, Arial, sans-serif;
    height: auto;
}

label.fcf-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.fcf-credit {
    padding-top: 10px;
    font-size: 0.9rem;
    color: #545b62;
}

.fcf-credit a {
    color: #545b62;
    text-decoration: underline;
}

.fcf-credit a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.fcf-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .fcf-btn {
        transition: none;
    }
}

.fcf-btn:hover {
    color: #212529;
    text-decoration: none;
}

.fcf-btn:focus, .fcf-btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fcf-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.fcf-btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.fcf-btn-primary:focus, .fcf-btn-primary.focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.fcf-btn-block {
    display: block;
    width: 100%;
}

.fcf-btn-block+.fcf-btn-block {
    margin-top: 0.5rem;
}

input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
    width: 100%;
}

.box2 {
    background-color: #d06003;
    color: #fff;
    opacity: .7;
    margin: 2%
}

.container_f {
  display: flex;


}

.image_f{

float: right


}

.text_f {
  font-size: 30px;
 display: block;
    text-align-last: right;
text-align: center;
margin:auto;

}

.text_b {
  font-size: 30px;
 display: block;
text-align: center;


}