/*
Theme Name: 314intermedia
Theme URI: http://314intermedia.com
Description: Astra Child Theme
Author: 314intermedia
Author URI: http://314intermedia.com
Template: astra
Version: 1.0.0
*/
/* BODY  */
body { background: url('images/pi-bg.jpg') top center repeat-x #e2e1e1 !important; }


/* HEADER  */
.ast-primary-header-bar { background-color: transparent !important; }
.header-widget-area { width: 100%; max-width: 700px; }
.ast-below-header-bar { background-color: #fff; border-top: 8px #D3D3D3 solid; border-bottom: 8px #D3D3D3 solid; }
#sp-wp-carousel-free-id-535.sp-wpcp-535 .wpcp-single-item { border: none !important; }
.wpcp-all-captions { color: #606060; font-size: 14px; line-height: 17px; text-align: center; }
.ast-site-title-wrap { display: none; }

/* PAGE  */
.entry-header { max-width: 800px; text-align: center !important; height: 63px; position: relative; margin: 0; }
#title-banner { position: absolute; top: 0; left: 0; z-index: 1; }
.entry-title { color: #fff; position: relative; z-index: 10; padding: 0 25px; line-height: 1.5 !important; }
.wp-block-paragraph { background-color: rgb(226, 225, 225); }


/* FOOTER  */
footer { background: url('images/footerbg.png') top center repeat-x; }
.site-primary-footer-wrap,
.site-below-footer-wrap { background-color: transparent !important; }
#astra-footer-menu li a { color: #606060 !important; }

/* ANIMATION  */
@keyframes FadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@-webkit-keyframes FadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ScaleIn {	
	from { background: #00688f; }
	to { background: #fff; }
}

@-webkit-keyframes ScaleIn {	
	from { background: #00688f; }
	to { background: #fff; }
}


/* 314 LOGO  */
ol.logo314 {
	all: unset;
    display: grid;
    grid-template-columns: repeat(34, 1fr);
    grid-template-rows: repeat(21, 1fr);
    list-style: none;	
	/*border: 1px solid #00688f;*/
	width: 65%;
	/*background: #fff;*/
	opacity: 0;
}

.logo314 li {
    aspect-ratio: 1 / 1;
    /* background: var(--bg); */
	background: transparent;
    grid-area: var(--ga);
	
	border: 1px solid #00688f;

    overflow: hidden;
    position: relative;
	
	opacity: 0;

    &::after {
      aspect-ratio: 1 / 1;
      /* background-color: rgba(255, 255, 255, .3); */
	  background-color: transparent;
      border-radius: 50%;
	  border: 1px solid #00688f;
      content: '';
      display: block;
      inset: 0;
      position: absolute;
	  opacity: 0;
	  
	  scale: 2;
      translate: var(--tl);
	}
	
    &:nth-of-type(1) {
      --bg: #e47a2c;
      --ga: 1 / 1 / 22 / 22;
      --tl: 50% 50%;
    }
    &:nth-of-type(2) {
      --bg: #baccc0 ;
      --ga: 1 / 22 / 23 / 35;
      --tl: -50% 50%;;
    }
    &:nth-of-type(3) {
      --bg: #6c958f;
      --ga: 14 / 27 / 22 / 35;
      --tl: -50% -50%;
    }
    &:nth-of-type(4) {
      --bg: #40363f;
      --ga: 17 / 22 / 22 / 27;
      --tl: 50% -50%;
    }
    &:nth-of-type(5) {
      --bg: #d7a26c;
      --ga: 14 / 22 / 17 / 25;
      --tl: 50% 50%;
    }
    &:nth-of-type(6) {
      --bg: #ae4935;
      --ga: 14 / 25 / 17 / 27;
      --tl: -50% 50%;
    }
    &:nth-of-type(7) {
      --bg: #e47a2c;
      --ga: 16 / 26 / 17 / 27;
      --tl: -50% -50%;
    }
    &:nth-of-type(8) {
      --bg: #f7e6d4;
      --ga: 16 / 25 / 17 / 26;
      --tl: 50% -50%;
    }
}

.text314 {
	
}

.textintermedia {
	
}

ol.logo314.is-visible {
	animation: FadeIn .25s ease-in forwards;
	-webkit-animation: FadeIn .25s ease-in forwards;
	opacity: 1;
}

.logo314.is-visible li {
	opacity: 1;
	
    &::after {
      animation: FadeIn 1.25s ease-in 2s forwards;
	  -webkit-animation: FadeIn 1.25s ease-in 2s forwards;
	}
	
    &:nth-of-type(8) {	  
	  animation: FadeIn 2s ease-in forwards;
	  animation: ScaleIn 2s ease-in 1.75s forwards;
	  -webkit-animation: FadeIn 2s ease-in forwards;
	  -webkit-animation: ScaleIn 2s ease-in 1.75s forwards;
    }
    &:nth-of-type(7) {	  
	  animation: FadeIn 1.75s ease-in forwards;
	  animation: ScaleIn 1.75s ease-in 1.5s forwards;
	  -webkit-animation: FadeIn 1.75s ease-in forwards;
	  -webkit-animation: ScaleIn 1.75s ease-in 1.5s forwards;
    }
    &:nth-of-type(6) {
	  animation: FadeIn 1.5s ease-in forwards;
	  animation: ScaleIn 1.5s ease-in 1.25s forwards;
	  -webkit-animation: FadeIn 1.5s ease-in forwards;
	  -webkit-animation: ScaleIn 1.5s ease-in 1.25s forwards;
    }
    &:nth-of-type(5) {
	  animation: FadeIn 1.25s ease-in forwards;
	  animation: ScaleIn 1.25s ease-in 1s forwards;
	  -webkit-animation: FadeIn 1.25s ease-in forwards;
	  -webkit-animation: ScaleIn 1.25s ease-in 1s forwards;
    }
    &:nth-of-type(4) {
	  animation: FadeIn 1s ease-in forwards;
	  animation: ScaleIn 1s ease-in .75s forwards;
	  -webkit-animation: FadeIn 1s ease-in forwards;
	  -webkit-animation: ScaleIn 1s ease-in .75s forwards;
    }
    &:nth-of-type(3) {  
	  animation: FadeIn .75s ease-in forwards;
	  animation: ScaleIn .75s ease-in .5s forwards;
	  -webkit-animation: FadeIn .75s ease-in forwards;
	  -webkit-animation: ScaleIn .75s ease-in .5s forwards;
    }
    &:nth-of-type(2) {	  
	  animation: FadeIn .5s ease-in forwards;
	  animation: ScaleIn .5s ease-in .25s forwards;
	  -webkit-animation: FadeIn .5s ease-in forwards;
	  -webkit-animation: ScaleIn .5s ease-in .25s forwards;
    }
    &:nth-of-type(1) {  
	  animation: FadeIn .25s ease-in forwards;
	  animation: ScaleIn .25s ease-in forwards;
	  -webkit-animation: FadeIn .25s ease-in forwards;
	  -webkit-animation: ScaleIn .25s ease-in forwards;
    }
	
}


/* Styles apply to screens that are 768px wide or smaller (like mobile phones) */
@media screen and (max-width: 768px) {
  .site-logo-img {
	display: none;
  }
  .ast-site-title-wrap { display: inline; }
  .ast-header-html-1 { width: 33%; }
  .site-header ol.logo314 { width: 300% }
  header.entry-header .entry-title { font-size: 1.2rem !important; }
  .page-id-528 #content ol.logo314 { display: none; }
}
/* Styles apply to screens between 769px and 1024px (like tablets) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .site-logo-img {
	display: none;
  }
  .ast-site-title-wrap { display: inline; }
  .ast-header-html-1 { width: 33%; }
  .site-header ol.logo314 { width: 300% }
  .page-id-528 #content ol.logo314 { display: none; }
}