.wrapper {
	max-width: 1000px;
	margin: auto;
	height: 100vh;
}

@media screen and (min-width: 786px) and (max-width: 991.9px) {
	.wrapper {
		max-width: 900px;
	}
}

body {
	background-color: #000;
	font-size: 20px;
	color: #FFF;
}

@media screen and (max-width: 991.9px) {
	body {
		font-size: 17px;
	}
}

@media screen and (max-width: 576px) {
	body {
		font-size: 15px;
	}
}

.container-box { 
		height: 100vh;
	}
	.container-logos { 
		flex-wrap: wrap;
	}
	.box-child { 
		width: 100%;
	}
	.box-child object{ 
		margin: auto;
		display: block;
		width: 40%;
	}
	
	.box-child:nth-child(1) object{ 
		margin-top: 5%;
		max-width: 150px;
		width: 30%;
	}
	
	.box-child:nth-child(2) object{ 
		max-width: 400px;
		width: 35%;
	}
	
	.box-child:nth-child(2) span { 
		width: 300px;
	}
	/*
	.box-child:nth-child(5) object { 
	   max-width: 400px;
	   width: 48%;
	}	
	*/

	.box-child  span { 
	   display: block;
	   margin: auto;
	   padding: 0.8em 0 0.8em 0;
	   width: 1em;
	 }

	 .box-text {
		display: block;
		position: absolute;
		padding: 4em 0 6em 0;
		top: 120vh;
		left: 20%;
	}

	.container-logos .frase {
		display: block;
		margin: 1.5em 0 2em 0;
		font-size: 1em;
	}

/*Efecto caja de luz*/
	.box-text {
	 display: block;
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	}

.box-text span {
	font-size: 1.2em;
	font-family: 'Rubik Mono One', sans-serif;
	position: absolute;
	top: 40px;
	width: 300px;
	text-align: center;
}

.border {
		background: #d0f0dd;	
		border-radius: 4px;
		position: absolute;
}

.border-left {
    box-shadow: 0px 0px 0 #FCC10C,
      0px 0px 4px #FCC10C,
      0px 0px 8px #FCC10C,
      0px 0px 16px #FCC10C;
	  animation-name: border-left;
	  animation-duration: 2s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;    
	  animation-play-state: running;
	  width: 4px;
}

@keyframes border-left{
    0%  {height: 0; top: 96px; left: 0;}
    20% {height: 100px; top: 0; left: 0;}
    40% {height: 0; top: 0; left: 0;}
}

.border-top {
    box-shadow: 0px 0px 0 #109139,
      0px 0px 4px #109139,
      0px 0px 8px #109139,
      0px 0px 16px #109139;
	  height: 4px;
	  animation-name: border-top;
	  animation-duration: 2s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;    
	  animation-play-state: running;
}

@keyframes border-top{
    0%  {width: 0; top: 0; left: 0;}
    20% {width: 0; top: 0; left: 0;}
    40% {width: 300px; top: 0; left: 0;}
    60% {width: 0; top:0; left: 300px;}
}

.border-right {
    box-shadow: 0px 0px 0 #E30613,
      0px 0px 4px #E30613,
      0px 0px 8px #E30613,
      0px 0px 16px #E30613;
	  width: 4px;
	  animation-name: border-right;
	  animation-duration: 2s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;    
	  animation-play-state: running;
}

@keyframes border-right{
    0%  {height: 0; top: 0; left: 296px;}
    40% {height: 0; top: 0; left: 296px;}
    60% {height: 100px; top: 0; left: 296px;}
    80% {height: 0; top: 100px;left: 296px;}
}

.border-bottom {
    box-shadow: 0px 0px 0 #009FE3,
      0px 0px 4px #009FE3,
      0px 0px 8px #009FE3,
      0px 0px 16px #009FE3;
	  height: 4px;
	  animation-name: border-bottom;
	  animation-duration: 2s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;    
	  animation-play-state: running;
}

@keyframes border-bottom{
    0%  {width: 0; top: 96px; left: 296px;}
    60% {width: 0; top: 96px; left: 296px;}
    80% {width: 300px; top:96px; left: 0px;}
    100% {width: 0px; top:96px; left: 0px;}
}


.container {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

.box {
  width: 400px;
  height: 150px;
  /*background-color: #f0f0f0;*/
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
	width: 180px;
}

.frase {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.2em;
  padding: 0 1em 0 1em;
}

.box-text {
  display: block;
  position: relative;
  padding: 4em 0 6em 0;
  top: 65%;
  left: -38%;
  transform: translateY(-50%);
}

@media (max-width: 576px) {
	.logo {
		width: 160px;
	}
	
    .frase {
      width: 250px;
    }
}