
/* -------------------------  TEXT & IMAGE  -------------------------- */

.text-n-img .text {
  padding: 4vw;
  flex: 4;
}
.text-n-img .text > *{
  text-align:left;
  padding-left:0;
  padding-right:0;
}
.text-n-img .text p{
  font-size:1em;
  padding: 2em 0 0 0 !important;
}
.text-n-img .text .btns{
  margin: 1em 0 0 0 !important;
}
.text-n-img .img{
  background-position: 50% 50%;
  background-size: cover !important;
  flex: 6;
  min-height: 36vw;
  padding: 0;
}
.text-n-img .layer-icon{
  position: absolute;
  display: block;
  pointer-events: none;
  width: 8vw;
  height: 8vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 5vw;
  background-color: #00b9e9;
  top: calc(50% - 4vw);
  border-radius: 50%;
}

/*----------  LAYOUT & ORDER  ----------------*/

.section:nth-child(even) .text-n-img .text{ order:1; }
.section:nth-child(even) .text-n-img .img{ order:2; }
.section:nth-child(even) .text-n-img .layer-icon{ left: -4vw; }
.section:nth-child(odd) .text-n-img .text{ order:2; }
.section:nth-child(odd) .text-n-img .img{ order:1; }
.section:nth-child(odd) .text-n-img .layer-icon{ right: -4vw; }

.section:nth-child(even) .text-img-icon .text{ padding-right: 7vw; }
.section:nth-child(odd) .text-img-icon .text{ padding-left: 7vw; }


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  .text-n-img .text { flex: 5; }
  .text-n-img .img{ flex: 6; }
  .text-img-icon .img{ flex: 6.5; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .text-n-img .text { padding: 6vw; flex: none;}
  .text-n-img .text p{ padding: 2em 0 0 0 !important; }
  .text-n-img .text .btns{ margin: 1em 0 0 0 !important; }
  .text-n-img .img{ flex: none; min-height: 56vw; }
  .text-n-img .layer-icon{ width: 16vw; height: 16vw; background-size: 10vw; top: auto; bottom: -8vw; left: calc(50% - 8vw) !important; }
  .section:nth-child(even) .text-img-icon .text, .section:nth-child(odd) .text-img-icon .text { padding: 14vw 5vw 5vw 8vw; }
  .section:nth-child(even) .text-n-img > div, .section:nth-child(odd) .text-n-img > div { order: 0 !important; }
}
