.font-condensed { font-family: "Rajdhani", Sans-serif }



/* COLOR DEFAULT
//////////////////////////////////////////////////////////////////////////////////////////*/
.text-primary, 
a         { color: #C52F33 }
.text-decondary, 
a:hover   { color: #707070 }



/* GLOBAL CONFIG
//////////////////////////////////////////////////////////////////////////////////////////*/
body { 
  border-bottom: 5px solid #C52F33; 
  font-family: "Open Sans", Sans-serif;
  font-weight: 400;
  font-size: 12pt;
  color: #333 }

body.inner { padding-top: 150px }  

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both }

@media(max-width:425px){
  body.inner { padding-top: 70px }  
}



/* ANIMATION: DELAY / DURATION
//////////////////////////////////////////////////////////////////////////////////////////*/
.delay1   { animation-delay: 500ms !important }
.delay2   { animation-delay: 1000ms !important }
.delay3   { animation-delay: 1500ms !important }
.delay4   { animation-delay: 2000ms !important }
.delay5   { animation-delay: 2500ms !important }
.delay6   { animation-delay: 3000ms !important }
.delay7   { animation-delay: 3500ms !important }
.delay8   { animation-delay: 4000ms !important }
.delay9   { animation-delay: 4500ms !important }
.delay10  { animation-delay: 5000ms !important }
.delay11  { animation-delay: 6000ms !important }

.duration1  { animation-duration: 100ms !important }
.duration2  { animation-duration: 200ms !important }
.duration3  { animation-duration: 300ms !important }
.duration4  { animation-duration: 400ms !important }
.duration5  { animation-duration: 500ms !important }
.duration6  { animation-duration: 600ms !important }
.duration7  { animation-duration: 700ms !important }
.duration8  { animation-duration: 800ms !important }
.duration9  { animation-duration: 900ms !important }
.duration10 { animation-duration: 1000ms !important }
.duration20 { animation-duration: 2000ms !important }
.duration30 { animation-duration: 3000ms !important }
.duration40 { animation-duration: 4000ms !important }
.duration50 { animation-duration: 5000ms !important }
.duration60 { animation-duration: 6000ms !important }
.duration70 { animation-duration: 7000ms !important }
.duration80 { animation-duration: 8000ms !important }
.duration90 { animation-duration: 9000ms !important }
.duration100 { animation-duration: 10000ms !important }



.ico { 
  position: relative;
  top: 3px;
  display: inline-block;
  background:url("img/icons.png") top left no-repeat }

.ico-in-red { width:26px; height:26px; background-position:0 0; }
.ico-fb-red { width:26px; height:26px; background-position:0 -26px; }
.ico-ig-red { width:26px; height:26px; background-position:0 -52px; }
.ico-in-white{ width:24px; height:23px; background-position:0 -78px; }
.ico-fb-white{ width:23px; height:23px; background-position:0 -101px; }
.ico-ig-white{ width:23px; height:23px; background-position:0 -124px; }
.ico-wp { width:19px; height:18px; background-position:0 -147px; }

.ico-product1{ width:67px; height:59px; background-position:0 -245px; }
.ico-product2{ width:56px; height:57px; background-position:0 -304px; }
.ico-product3{ width:67px; height:67px; background-position:0 -361px; }
.ico-product4{ width:63px; height:53px; background-position:0 -428px; }

.ico-arrow-left{ width:20px; height:40px; background-position:0 -165px; }
.ico-arrow-right{ width:20px; height:40px; background-position:0 -205px; }


  
  


/* WRAPPER AND CONTAINER
//////////////////////////////////////////////////////////////////////////////////////////*/
.container { position: relative }

.wrapper { padding: 60px 0 }

@media (min-width: 1299px) {
  .container { 
    width: 1280px;
    padding: 0 25px }
}

@media(max-width: 1298px){
  .container { 
    width: auto;
    padding: 0 45px }
}



/* HEADER
//////////////////////////////////////////////////////////////////////////////////////////*/
header { 
  position: absolute;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,0.9);
  height: 150px;
  width: 100% }

.inner header { 
  background: #F6F6F6 !important;
  border-bottom: 1px solid #DDD }

header.affix { 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: #FFF;
  height: 70px;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100% }

.topbar {
  overflow: hidden;
  color: #FFF;
  background: #C52F33;
  position: relative;
  line-height: 50px }

.topbar .row > div:last-child a { margin-left: 15px }

header.affix .topbar { display: none !important }

@media(min-width:1299px){
  .topbar .container { padding: 0 }  
}

@media(max-width:1298px){
  .topbar .container { padding: 0 20px }  
}

@media(max-width:425px){
  header { height: 70px }

  header.affix { position: absolute }
}


/* BRAND
//////////////////////////////////////////////////////////////////////////////////////////*/
.brand { 
  transition: top 400ms ease-in-out;
  position: absolute;
  z-index: 100;
  top: 10px;
  left: 0 }

.brand img { 
  height: 76px;
  transition: height 300ms ease-in-out }

.navbar-brand  { 
  position: relative;
  z-index: 100 } /* class mobile device */

@media(max-width: 767px){
  .navbar-brand img { width: 60% }
}

@media(min-width: 768px){
  header.affix .brand { top: 10px }
  header.affix .brand img { height: 50px }
}

@media(max-width:1298px){
  .brand,
  .navbar-brand { left: 20px }
}

@media(max-width:425px){
  .navbar-brand { padding: 10px 0 }
}





/* NAVBAR
//////////////////////////////////////////////////////////////////////////////////////////*/
.navbar-nav li a { 
  font-size: 112.5%;
  text-transform: uppercase;
  color: #C52F33 }

@media (min-width: 1025px) {

  .navbar-menu { padding: 0 }

  .navbar {  
    transition: top 400ms ease-in-out;
    z-index: 100;
    position: absolute;
    top: 33px;
    right: 0 }
  
  header.affix .navbar { top: 18px }

  .navbar-nav {
    width: 100%;
    display: table;
    table-layout: auto }

  .navbar-nav > li { margin-left: 41px }

  .navbar-nav > li:after { 
    content: " ";
    position: absolute;
    right: -21px;
    top: 5px;
    height: 20px;
    width: 1px;
    background: #C52F33;
    margin-left: 30px   }

  .navbar-nav li:last-child { 
    background: none;
    margin-right: 0;
    padding-right:  }

  .navbar-nav li:last-child:after { content: none }

  .navbar-nav > li > a { padding: 5px 0 }

  .navbar-nav > li.active > a,
  .navbar-nav li:active > a,
  .navbar-nav li:focus > a,
  .navbar-nav li:hover > a,
  .nav>li>a:focus, 
  .nav>li>a:hover { 
    color: #707070;
    background: none }

  .navbar-nav li:last-child a { 
    transition: 200ms;
    border-radius: 5px;
    padding: 5px 10px;
    border: 1px solid #C52F33 }

  .navbar-nav li:last-child a:hover { 
    color: #FFF;
    background: #C52F33}
}

@media (max-width: 1024px) {

  .navbar {
    border: 0 !important;
    position: absolute;
    top: 0; 
    left: 0;
    width: 100% }

  .navbar-menu { padding: 0 }
  
  .navbar-collapse.collapse { display: none !important }
  .navbar-collapse.collapse.in { display: block !important }

  .navbar-collapse { 
    top: 70px;
    z-index: 10000;
    width: 30%;
    right: 20px;
    position: absolute;
    margin-top: -4px  }
  
   header.affix .navbar-collapse { top: 55px }

  .navbar-nav { 
    background: #C52F33;
    text-align: center;
    border-radius: 5px;
    border-top-right-radius: 0;
    overflow: hidden;
    width: 100%;
    margin: 0 }

  .navbar-nav > li { 
    width: 100%;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) }

  .navbar-nav > li:last-child { border: 0 }

  .navbar-nav > li > a {
    line-height: 40px;
    font-size: 120%;
    color: #FFF !important  }

  .navbar-nav > li > a:hover,
  .navbar-nav > li > a:focus,
  .navbar-nav > li > a:active { background: rgba(0,0,0,0.3) }

  .navbar-nav li a .glyphicon-user { margin-top: 8px } 

  .navbar-nav li.socialmedia a { display: inline-block }

  button.navbar-toggle {
    transition: top 400ms ease-in-out;
    margin: 0;
    border: 2px solid #C52F33;
    position: absolute;
    top: 30px;
    right: 20px;
    z-index: 10000;
    display: block }

  header.affix button.navbar-toggle { top: 15px }
  
  button.navbar-toggle:active,
  button.navbar-toggle:focus,
  button.navbar-toggle:hover { background: #C52F33 }

  button.navbar-toggle .icon-bar { 
    background: #C52F33;
    height: 3px }

  button.navbar-toggle:active .icon-bar,
  button.navbar-toggle:focus .icon-bar,
  button.navbar-toggle:hover .icon-bar { background: #FFF }
}

@media (max-width: 767px) {
  button.navbar-toggle { 
    top: 23px;
    right: 15px; }

  .navbar-collapse { 
    z-index: 100;
    width: 100%;
    top: 70px;
    right: 0;
    border: 0;
    border-radius: 0;
    position: absolute;
    margin-top: 0  }

  .navbar-nav { border-radius: 0 }
}

@media(max-width:1298px){
  .navbar { right: 20px }
}

@media(max-width: 425px){
  header button.navbar-toggle { top: 15px }
}


/* HEADINGS, PARAGRAFHS, LISTS, ETC.
//////////////////////////////////////////////////////////////////////////////////////////*/
h1 { 
  position: relative;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-family: "Rajdhani", Sans-serif;
  font-size: 220%;
  color: #C52F33;
  font-weight: 500;
  margin: 0 0 45px }

h1:before { 
  background: url(img/bg-h1-before.png) bottom;
  content: " ";
  display: block;
  position: absolute;
  top: -20px;
  left: -25px;
  height: 24px;
  width: 27px }

h1.white     { color: #FFF }
h1.white:before { background-position: top }

h2 { 
  text-transform: uppercase;
  font-family: "Rajdhani", Sans-serif;
  font-size: 180%; 
  font-weight: 500;
  letter-spacing: -1px;
  margin: 0 0 15px }

h3 { 
  font-family: "Rajdhani", Sans-serif;
  font-weight: 500;
  font-size: 150%; 
  margin: 0 0 25px }

h4 { 
  font-size: 120%; 
  margin: 0 0 15px }

p { 
  line-height: 160%;
  margin-bottom: 25px }

p:last-of-type { margin-bottom: 50px }

p ~ h2,
p ~ h3,
p ~ h4 { margin-top: 40px }

a.link-more { 
  font-size: 87.5%;
  font-weight: 300;
  color: #E2B578;
  text-transform: uppercase }

@media (max-width: 767px) {

  h1, h2 { margin: 0 0 30px }

  h1 { 
    font-size: 180%;
    margin: 0 0 20px }

  h2  { font-size: 150% }

  h3, h4 { margin: 0 0 15px }

  h3 { font-size: 130% }
  h4 { font-size: 120% }

  p { 
    line-height: 140%;
    margin-bottom: 15px }
}



/* CAROUSEL
//////////////////////////////////////////////////////////////////////////////////////////*/
.carousel-slideshow,
.carousel-slideshow .carousel-inner,
.carousel-slideshow .carousel-inner .item { 
  width: 100%;
  min-height: 500px }

.carousel-slideshow .carousel-inner .item { padding-top: 180px }

.carousel-slideshow .carousel-inner .item > img { 
  position: absolute;
  top: 0; 
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover }

.carousel-slideshow .caption { margin-top: 0 }

.carousel-slideshow h1 { 
  font-size: 225%;
  margin-bottom: 45px;
  line-height: 120%;
  color: #C52F33 }

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
          transition-property: opacity }          

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

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1 }

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0) } 

.carousel-indicators { 
  position: absolute;
  bottom: 15px;
  padding: 0 }
  
.carousel-indicators li {
  background: #FFF;
  border-radius: 0;
  width: 40px !important;
  height: 10px !important;
  border: 0 !important;
  margin: 0 }

.carousel-indicators li.active { 
  background: #C52F33;
  opacity: 1 }

@media (max-width: 768px) {
  .carousel-slideshow .caption-inner { width: 100% }

  .carousel-slideshow .caption-inner h1 {
    font-size: 180%;
    display: inline;
    background: rgba(255,255,255,0.9)
  }

  .carousel-slideshow .caption-inner h1:after {
    content: " ";
    margin-bottom: 45px;
    display: block }

  .carousel-slideshow .caption-inner .btn { 
    color: #FFF;
    background: #C52F33 }
}
 
@media(min-width:426px){
  .carousel-slideshow { margin-top: 50px }
}

/* PRODUCT-BAR
//////////////////////////////////////////////////////////////////////////////////////////*/
.product-bar { background: #090303 }

.product-bar .container { padding: 0 }

.product-bar ul { 
  display: flex;
  margin: 0 }

.product-bar li { 
  display: flex;
  width: 100% }

.product-bar li a { 
  transition: 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 200%;
  line-height: 100%;
  width: 100%;
  text-decoration: none;
  color: #FFF;
  padding: 45px }

.product-bar li:nth-child(1) { 
  background: url(img/bg-product-link1.jpg) no-repeat;
  background-size: cover }

.product-bar li:nth-child(2) { 
  background: url(img/bg-product-link2.jpg) no-repeat;
  background-size: cover }

.product-bar li:nth-child(3) { 
  background: url(img/bg-product-link3.jpg) no-repeat;
  background-size: cover }

.product-bar li:nth-child(4) { 
  background: url(img/bg-product-link4.jpg) no-repeat;
  background-size: cover }

.product-bar li a:hover { background: rgba(0,0,0,.3) }

@media(max-width: 1024px){
  .product-bar li a { 
    padding: 45px 15px;
    font-size: 150% }
}

@media(max-width: 425px){
  .product-bar ul { flex-direction: column }
}

/* TECNOLOGY
//////////////////////////////////////////////////////////////////////////////////////////*/
.tecnology {
  color: #FFF;
  background: url(img/bg-tecnology.jpg) no-repeat center right;
  background-size: cover }

.tecnology .next-step {
  width: 120px;
  height: 45px;
  background: url(img/bg-next-step.jpg);
  position: absolute;
  bottom: -60px;
  left: 0 }

@media(min-width:769px){
  .tecnology p { width: 70% }
}

@media(min-width:769px){
  .tecnology p { width: 70% }
}




/* PRODUCTS
//////////////////////////////////////////////////////////////////////////////////////////*/
.products {
  background: url(img/bg-products.jpg) no-repeat center;
  background-size: cover;
  color: #C52F33}

.home .products { border-bottom: 5px solid #C52F33 }

.products .row .row { 
  display: flex;
  flex-wrap: wrap }

.products .row .row > div { 
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center }

.products .row a { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #9A9B9D;
  background: #EEE;
  border-radius: 10px;
  padding: 20px 45px;
  text-decoration: none;
  border: 1px solid transparent;
  width: 100%;
  height: 100%;
  transition: border 300ms ease }

.products .row a:hover { border-color: #9A9B9D }

.products .row i { margin-bottom: 5px }

.products .row .row h2 { 
  margin: 0;
  font-size: 150% }

.products .row .row { margin: 0 -10px }
.products .row .row div { padding: 0 10px }

@media(max-width: 425px){
  .products .row .row h2 { font-size: 125% }
  .products .row a { border-color: #9A9B9D }
}

@media(max-width: 375px){
  .products .row .row > div { width: 100% }
}



/* CLIENTS
//////////////////////////////////////////////////////////////////////////////////////////*/
.clients .carousel-control { background: none !important }

.clients .carousel-control.right i { left: 0 }
.clients .carousel-control.left i { right: 0 }

.clients .carousel-control i { 
  position: absolute;
  top: 50%;
  margin-top: -20px }

.inner .clients .row > div { margin-bottom: 30px }

@media(max-width:1366px) {
  .clients .carousel-control { width: 30px }
  .clients .carousel-control.right i { left: 0 }
}



/* POST(S)
//////////////////////////////////////////////////////////////////////////////////////////*/
.post-header { 
  width: 800px;
  margin: 0 auto }

.post-header h1 { 
  font-size: 300%;
  margin-bottom: 15px;
  text-transform: initial }

.post-header small { 
  display: block;
  color: #AAA;
  margin-bottom: 15px }

.post-header p {
  line-height: 130%;
  color: #707070;
  font-size: 150% }

.post-body {
  width: 800px;
  margin: 30px auto }

.post-body > * { 
  font-size: 112.5%;
  margin-bottom: 30px;
  line-height: 160% }

.post-body > * > * { margin-bottom: 15px }

.post-body h2 { 
  line-height: 120%;
  font-size: 240%;
  text-transform: initial }

.post-body h3 { 
  line-height: 120%;
  font-size: 180%;
  text-transform: initial }

.posts { background: #EEE }  

.posts .row { margin-bottom: 30px }

.posts a { text-decoration: none }

.posts span { margin-bottom: 15px }

.posts a small { 
  display: inline-block;
  color: #AAA }

.posts h2 { 
  margin-bottom: 30px;
  text-transform: initial }

@media(max-width:1024px){
  .post-header,
  .post-body { width: auto }

  .post-body > * { font-size: 100% }
}

@media(max-width:425px){
  .posts .row  { margin-bottom: 0 }

  .posts .row div { margin-bottom: 15px }

  .posts .row a {
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    background: #FFF;
    display: block;
    position: relative  }

  .posts span.ratio { 
    margin: 0 0 0 30px;
    padding: 0;
    float: right;
    width: 80px;
    height: 80px }

}

/* CONTACT
//////////////////////////////////////////////////////////////////////////////////////////*/
.contact { 
  background: url(img/bg-contact.jpg) no-repeat center left;
  background-size: cover }

.contact > .row { margin: 0 }
.contact > .row > div { padding: 0 }

.contact .contact-inner {
  width: calc((1280px - 50px)/2);
  padding-right: 60px;
  float: right }

.contact .form-control { margin-bottom: 30px }

@media(min-width:1025px){
  .contact { height: 570px }
}

@media(max-width:1298px){
  .contact .contact-inner { 
    padding-left: 45px;
    width: 100% }
}

@media(max-width:425px){
  .contact .contact-inner { padding-right: 45px }
}



/* LOGIN
//////////////////////////////////////////////////////////////////////////////////////////*/
.login-box {
  background: #F6F6F6;
  padding: 45px;
  border: 1px solid #DDD }

.login .form-control { margin-bottom: 30px }

.login .btn { margin-top: 30px }



/* FORMS
//////////////////////////////////////////////////////////////////////////////////////////*/
.form-control { 
  box-shadow: none !important;
  border-radius: 0;
  font-size: 12pt;
  border: 1px solid #DDD;
  color: #C52F33 }

.form-control:not(textarea) { height: 35px }

.form-control:active,
.form-control:focus { border-color: #707070 }

.btn {
  font-size: 112.5%;
  font-family: "Rajdhani", Sans-serif;
  border: 0;
  border-radius: 5px;
  line-height: auto;
  padding: 5px 15px;
  text-transform: uppercase; }

.btn:hover { box-shadow: 0 0 100px rgba(255,255,255,0.5) }

.btn-md {
  font-size: 112.5%;
  line-height: 45px;
  padding: 0 30px }

.btn-lg {
  line-height: 60px;
  font-size: 112.5%;
  padding: 0 30px }

.btn-primary { 
  color: #FFF !important;
  background: #C52F33 !important }

.btn-secondary { 
  color: #FFF !important;
  background: #707070 !important }

.btn-outline-primary { 
  background: none;
  border: 1px solid #C52F33;
  color: #C52F33 }

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus { 
  color: #FFF;
  background: #C52F33 }

.btn-outline-white { 
  background: none;
  border: 1px solid #FFF;
  color: #FFF !important }

.btn.active,
.btn:active,
.btn:focus,
.btn:hover { box-shadow: inset 1px 1px 100px rgba(255,255,255,0.2) }



/* FOOTER
//////////////////////////////////////////////////////////////////////////////////////////*/
.inner footer { 
  border-top: 1px solid #DDD;
  background: #F6F6F6 }

footer .container > .row { margin: 0 }
footer .container > .row > div { padding: 0 }

.footer-brand { margin-bottom: 30px }

.footer-mapsite { font-family: "Rajdhani", sans-serif }

.footer-mapsite > ul > li:first-child { margin-left: 0 }

.footer-mapsite > ul > li a { 
  font-size: 112.5%;
  text-transform: uppercase;
  color: #C52F33 }

.footer-mapsite > ul > li:last-child { 
  background: none;
  margin-right: 0;
  padding-right: 0 }

.footer-mapsite > ul > li:last-child:after { content: none }

.footer-mapsite > ul > li ul li { margin-bottom: 5px }

.footer-mapsite > ul > li ul { margin-top: 5px }

.footer-mapsite > ul > li ul a { 
  display: block;
  line-height: 120%;
  text-align: left;
  text-transform: initial;
  font-family: "Open Sans", sans-serif;
  font-size: 75%  }

.footer-copyright strong { font-weight: 600 }

.footer-socialmedia {
  position: absolute;
  bottom: 0;
  right: 100px }

.footer-copyright .brand-flexpoint {
  position: absolute;
  bottom: 0;
  right: 25px;
  transition: all 0s;
  display: inline-block;
  text-indent: -1000000px;
  background: url(//www.flexpoint.com.br/addons/flexpoint-site-sign.png) bottom;
  width: 25px;
  height: 27px } 

@media(min-width:769px){
  .footer-mapsite > ul {
    width: 100%;
    table-layout: auto }
  
  .footer-mapsite > ul > li {
    position: relative;
    display: inline-block;
    margin-left: 41px }

  .footer-mapsite > ul > li:after { 
    content: " ";
    position: absolute;
    right: -21px;
    top: 5px;
    height: 20px;
    width: 1px;
    background: #C52F33;
    margin-left: 30px   }

  .footer-mapsite > ul li ul li { padding-bottom: 15px }
  .footer-mapsite > ul li:nth-child(1) ul li:nth-child(2),
  .footer-mapsite > ul li:nth-child(1) ul li:nth-child(3) { padding-bottom: 30px }

  .footer-mapsite > ul li ul li a { position: absolute }
}

@media(max-width:768px){
  .footer-mapsite > ul > li { margin-bottom: 15px }
  .footer-mapsite > ul > li li { margin-left: 10px }

  .footer-copyright .brand-flexpoint { bottom: 0 }
}

@media(min-width:1299px){
  .footer-mapsite { text-align: right }
}

@media(max-width:425px){
  .footer-socialmedia { position: initial }
}



/* AFFIX
//////////////////////////////////////////////////////////////////////////////////////////*/
.affix.gotop {
  z-index: 1000000;
  position: fixed !important; 
  bottom: 20px;
  margin-left: -25px;
  left: 50% }

@media(max-width:768px){
  .affix.gotop { 
    margin-left: -20px;
    bottom: 45px }
}

.btn-whatsapp {
  z-index: 1000;
  transition: right 200ms ease-in-out;
  position: fixed;
  top: calc(50% - 156px/2);
  right: -30px }

.btn-whatsapp:hover { right: 10px }

.inner .btn-whatsapp { top: calc(50% - 360px/2) }



/* ASPECT RATIOS
//////////////////////////////////////////////////////////////////////////////////////////*/
.ratio {
  position: relative;
  overflow: hidden;
  display: block }

.ratio-1p1  { padding-top: 100% }
.ratio-3p2  { padding-top: 66.66% }
.ratio-8p5  { padding-top: 62.5% }
.ratio-16p9 { padding-top: 56.25% }

.ratio img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover }

.ratio-h img { 
  height: auto;
  width: 100% }

.ratio-v img { 
  width: auto;
  height: 100% }



.modal .row > div { margin-bottom: 15px }
.modal .modal-body { background: #EEE }