html, body{
    /*display:flex;*/
    justify-content:center;
    align-items:center;
   /* overflow:hidden;*/
    width:100%;
   
    margin:0;
    font-family:monospace;
    background-image: url(https://tictacsolutions.mx/img/bg.png);
    background-size:cover;
    position:relative;
    padding-bottom:8vh;
    min-height:100vh;
}
.principal{
    width:100%;
    height:900px;
    background-image:url(https://www.tictacsolutions.mx/img/bg.png);
    background-position:center;
    background-size:cover;
    display:grid;
    place-items:center;
}
.bienv{
    position:absolute;
    top:7vh;
}
.bienv h1{color:#fff;font-size:40px;letter-spacing:5px;margin:0px; }
h1 span
{
color:#f7931d;
}

.tipado{
    width:380px;
    animation:typing 3s steps(27)  alternate, blink .5s infinite;
    white-space:nowarp;
    overflow:hidden;
    border-right:4px solid #f7931d;
    font-family:monospace;
    
}
.tipado-se{
    width:580px;
    animation:typing 3s steps(27)  alternate, blink .5s infinite;
    white-space:nowarp;
    overflow:hidden;
    border-right:4px solid #f7931d;
    font-family:monospace;
    
}
.tpro{width:250px;}
@keyframes typing{  from{width:0;} }
@keyframes blink{  10%{border-color:transparent;} }

.logo{
    position:absolute;
    top:20vh;
    text-align:center;
}
.logo img{
    animation: fadeIn 1s ease;
    animation:flotante 3s ease-in-out infinite;
}
.logo-esq{
    position:absolute;
    top:0;
    right:0;
    }
.logo-esq img{width:50%; animation: fadeIn 1s ease;
    animation:flotante 3s ease-in-out infinite;} 

@keyframes fadeIn {
    0%{
        opacity:1;
        filter:blur(15px);
    }
    10%{
        opacity:0;
        filter:brightness(2) blur(10px);
    }
    }
@keyframes flotante {
     0%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
    100%{transform:translateY(0);}
}

.cont-btns{position:absolute;width:80%;bottom:auto;/*padding:50px;*/display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:25px;border:solid red 0px;justify-items:center;}
.cont-btns-index{position:absolute;width:80%;bottom:auto;/*padding:50px;*/display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:25px;border:solid red 0px;justify-items:center;}
.btn{padding:3vh;background-color:#000;color:#f7931d;border:solid #f7931d 1px;border-radius:12px;}

@keyframes anmbtn{
    from{opacity:0;transform:translateY(50px);}
      to{opacity:1;transform:translateY(0);}
}
/* button 1 */
.btn1 {
  /*margin: 100px;*/
  padding: 5vh;
    width: 30vh;
  border:solid #f7931d 1px;
  outline: none;
  color: #f7931d;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn 2s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
}
.btn1::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  left: 0;
  top: 0;
  border-radius: 10px;
}
/* glow */
.btn1::before {
  content: "";
  background: linear-gradient(
    45deg,
    #f15207, #FF7300, #f7931d, #fff,
    #FF7300, #f7931d, #fff, #f15207
  );
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 2px);
  height:  calc(100% + 2px);
  filter: blur(2px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}

/* hover */
.btn1:hover::before {
  opacity: 1;
}

.btn1:active:after {
  background: transparent;
}

.btn1:active {
  color: #000;
  font-weight: bold;
}

/* button 2 */
.btn2 {
  /*margin: 100px;*/
  padding: 5vh;
  width: 30vh;
  border:solid #f7931d 1px;
  outline: none;
  color: #f7931d;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn 4s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
}
.btn2::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  left: 0;
  top: 0;
  border-radius: 10px;
}
/* glow */
.btn2::before {
  content: "";
  background: linear-gradient(
    45deg,
    #f15207, #FF7300, #f7931d, #fff,
    #FF7300, #f7931d, #fff, #f15207
  );
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 2px);
  height:  calc(100% + 2px);
  filter: blur(2px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}

/* hover */
.btn2:hover::before {
  opacity: 1;
}

.btn2:active:after {
  background: transparent;
}

.btn2:active {
  color: #000;
  font-weight: bold;
}
/* button 3 */
.btn3 {
  /*margin: 100px;*/
  padding: 5vh;
  width: 30vh;
  border:solid #f7931d 1px;
  outline: none;
  color: #f7931d;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn 6s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
}
.btn3::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  left: 0;
  top: 0;
  border-radius: 10px;
}
/* glow */
.btn3::before {
  content: "";
  background: linear-gradient(
    45deg,
    #f15207, #FF7300, #f7931d, #fff,
    #FF7300, #f7931d, #fff, #f15207
  );
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 2px);
  height:  calc(100% + 2px);
  filter: blur(2px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}

/* hover */
.btn3:hover::before {
  opacity: 1;
}

.btn3:active:after {
  background: transparent;
}

.btn3:active {
  color: #000;
  font-weight: bold;
}


.contacto{
    width:100%;
    background-image:url(https://www.tictacsolutions.mx/img/bg-contacto.jpg);
    background-position:center;
    background-size:cover;
    
}

footer{
    position:absolute;
  
    width:100%;
    height:7vh;
   background-color:black;
   opacity:.8;
    text-align:center;
    align-content: space-evenly;
    color:#f7931d;
        margin-top: 100px;
}




/* PAGINA PROYECTOS*/

.menup{
    width:100%;
    height:100%;
    display:grid;
    align-items:center;
    justify-content:center;
    background-image:url(https://www.tictacsolutions.mx/img/bg.png);
    background-position:center;
    background-size:cover;
    border:solid red 0px;
     place-items:center;
}
.center-menup{bottom:150px;}
.center{text-align:center;}

.left{
    width:50px;
    height:50px;
    transition:0.5s;
    float:left;
    box-shadow:-5px 5px 0 rgba(247,147,29,1.5);
    cursor:pointer;
    transform:rotate(45deg);
    position:absolute;
    margin:100;
    color:#f7931d;
}
.left:hover{box-shadow:-5px 5px 0 rgba(255,255,255,1.5);}

/* FIN PAGINA PROYECTOS*/
/* PAGINA SOLUCIONES IT*/
.menu-sit{
    width:100%;
    height:100%;
    display:grid;
    gap:40px;
    align-items:center;
    justify-content:center;
    background-image:url(https://tictacsolutions.mx/img/bg.png);
    background-size:cover;
    background-position:center;
    place-items:center;
}
 .cont-btnssit{bottom:25px;}
.tsit{width:340px;}


/*REDES VOY Y DATOS*/
.tit-cont{
    position:absolute;
    top:7vh;
    width:480px;
}
.tit-cont-se{
    position:absolute;
    top:7vh;
    width:580px;
}
.subtit-cont{
 font-weight:900;
 text-shadow:3px 3px 0px #222, 5px 5px 0px #f7931d;
    width:80%;
}
.tit-cont h1{color:#fff;font-size:40px;letter-spacing:5px;margin:0px; }
.tit-cont-se h1{color:#fff;font-size:40px;letter-spacing:5px;margin:0px; }
.subtit-cont h1{color:#fff;font-size:40px;letter-spacing:5px;margin:0px; }

.cont-redes{
    width:100%;
   
    display:grid;
    gap:40px;
    place-items:center;
    
   }
   .left-content{
    width:50px;
    height:50px;
    transition:0.5s;
    float:left;
    box-shadow:-5px 5px 0 rgba(247,147,29,1.5);
    cursor:pointer;
    transform:rotate(45deg);
    position:absolute;
    margin:50;
    color:#f7931d;
}
.left-content:hover{box-shadow:-5px 5px 0 rgba(255,255,255,1.5);}
   
   .info{
        margin-top:10%;
       background: linear-gradient(-85deg, #f4bb79, #f7931d, #f4bb79, #f7931d, #f4bb79);
	background-size: 400% 400%;
	animation: gradient 155s ease infinite;
	width:80%;
	padding:50px;
    border-radius:50px; 
    font-size:20px;
    font-family:sans-serif;
   
       
   }
   @keyframes gradient {
	0%{background-position: 0% 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0% 50%;}
}

.carrousel
{
	-webkit-perspective: 250px;
	-moz-perspective: 250px;
	width: 300px;
	height: 150px;
	top:50px;
	position: relative;
	margin: 0 auto;
}

@-webkit-keyframes carrousel
{
  from
  {
	  -webkit-transform: rotateY( 360deg ) translateZ( 100px ) rotateY( -360deg );
	  -moz-transform: rotateY( 360deg ) translateZ( 100px ) rotateY( -360deg );
	  z-index: 10;
	  opacity: 0.9
  }
  50%
  {
    z-index: -10;
  }
  to 
  {
	  -webkit-transform: rotateY( 0deg ) translateZ( 100px ) rotateY( 0deg );
    -moz-transform: rotateY( 0deg ) translateZ( 100px ) rotateY( 0deg );
	  z-index: 10;
	  opacity: 0.9
  }
}

@-moz-keyframes carrousel
{
  from
  {
	  -moz-transform: rotateY( 360deg ) translateZ( 100px ) rotateY( -360deg );
	  z-index: 10;
	  opacity: 0.9
  }
  50%
  {
    z-index: -10;
  }
  to
  {
	  -moz-transform: rotateY( 0deg ) translateZ( 100px ) rotateY( 0deg );
	  z-index: 10;
	  opacity: 0.9
  }
}

.card
{
	width: 150px;
	height: 100px;
	background-color: #442222;
  font-size: 40px;
	opacity: 0;
	position: absolute;
	/*top:35px;*/
	left:125px;
	border: solid darkgray 2px;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgba(0,0,0,.5);
  text-align: center;
  -webkit-animation-name: carrousel;
  -moz-animation-name: carrousel;
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
 }

.card:hover
{
  border: solid #f7931d 3px;
  box-shadow: 0px 0px 10px #f7931d;
}
#c13
{
  background-image: url(../img/redesvozydatos/dlink.png);
  background-size:150px;
  }
#c12
{
  background-image: url(../img/redesvozydatos/hp.png);
  background-size:150px;
  -webkit-animation-delay: -200s;
	-moz-animation-delay: -200s;
}
#c11
{
  background-image: url(../img/redesvozydatos/ubiquiti.png);
  background-size:150px;
  -webkit-animation-delay: -300s;
	-moz-animation-delay: -300s;
}
#c10
{
  background-image: url(../img/redesvozydatos/panduit.png);
  background-size:150px;
  -webkit-animation-delay: -400s;
	-moz-animation-delay: -400s;
}
#c9
{
  background-image: url(../img/redesvozydatos/belden.png);
  background-size:150px;
  -webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}
#c8
{
  background-image: url(../img/redesvozydatos/condumex.png);
  background-size:150px;
  -webkit-animation-delay: -6s;
	-moz-animation-delay: -6s;
}
#c7
{
  background-image: url(../img/redesvozydatos/leviton.png);
  background-size:150px;
  -webkit-animation-delay: -7s;
	-moz-animation-delay: -7s;
}
#c6
{
  background-image: url(../img/redesvozydatos/tplink.png);
   background-size:150px;
	-webkit-animation-delay: -8s;
	-moz-animation-delay: -8s;
}
#c5
{
  background-image: url(../img/redesvozydatos/mimosa.png);
   background-size:150px;
	-webkit-animation-delay: -9s;
	-moz-animation-delay: -9s;
}
#c4
{
  background-image: url(../img/redesvozydatos/linksys.png);
   background-size:150px;
	-webkit-animation-delay: -10s;
	-moz-animation-delay: -10s;
}
#c3
{
  background-image: url(../img/redesvozydatos/totalground.png);
   background-size:150px;
	-webkit-animation-delay: -11s;
	-moz-animation-delay: -11s;
}
#c2
{
  background-image: url(../img/redesvozydatos/charofil.png);
   background-size:150px;
	-webkit-animation-delay: -12s;
	-moz-animation-delay: -12s;
}
#c1
{
  background-image: url(../img/redesvozydatos/systimax.png);
   background-size:150px;
	-webkit-animation-delay: -13s;
	-moz-animation-delay: -13s;
}
#c0
{
  background-image: url(../img/redesvozydatos/north.png);
   background-size:150px;
	-webkit-animation-delay: -14s;
	-moz-animation-delay: -14s;
}
        *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.stand {
  width: 400px;
  margin: 300px;
}

.carrousel-3d {
  margin: auto;
  width: 130px;
  perspective: 1000px;
  position: relative;
  margin-top: 50px;
  margin-bottom:50px;
}

.content-carrousel {
  width: 100%;
  position: absolute;
  animation: rotar 30s infinite linear;
  transform-style: preserve-3d;
}

.content-carrousel:hover{
  animation-play-state: paused;
  cursor: pointer;
}

.content-carrousel figure {
  width: 100%;
 
  overflow: hidden;
  position: absolute;
  box-shadow: 0px 0px 10px 0px black;
  border: solid darkgray 2px;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}

.content-carrousel figure:hover{
  box-shadow: 0px 0px 0px 0px black;
  transition: all 300ms;
   border: solid #f7931d 3px;
  box-shadow: 0px 0px 10px #f7931d;
}

.content-carrousel figure:nth-child(1){transform: rotateY(0deg)
translateZ(300px);}
.content-carrousel figure:nth-child(2){transform: rotateY(25.71deg)
translateZ(300px);}
.content-carrousel figure:nth-child(3){transform: rotateY(51.42deg)
translateZ(300px);}
.content-carrousel figure:nth-child(4){transform: rotateY(77.13deg)
translateZ(300px);}
.content-carrousel figure:nth-child(5){transform: rotateY(102.84deg)
translateZ(300px);}
.content-carrousel figure:nth-child(6){transform: rotateY(128.55deg)
translateZ(300px);}
.content-carrousel figure:nth-child(7){transform: rotateY(154.26deg)
translateZ(300px);}
.content-carrousel figure:nth-child(8){transform: rotateY(179.97deg)
translateZ(300px);}
.content-carrousel figure:nth-child(9){transform: rotateY(205.68deg)
translateZ(300px);}
.content-carrousel figure:nth-child(10){transform: rotateY(231.39deg)
translateZ(300px);}
.content-carrousel figure:nth-child(11){transform: rotateY(257.10deg)
translateZ(300px);}
.content-carrousel figure:nth-child(12){transform: rotateY(282.81deg)
translateZ(300px);}
.content-carrousel figure:nth-child(13){transform: rotateY(308.52deg)
translateZ(300px);}
.content-carrousel figure:nth-child(14){transform: rotateY(334.23deg)
translateZ(300px);}


.content-carrousel img {
  width: 100%;
}

.content-carrousel img:hover{
  transform: scale(1.5);
  transition: all 300ms;
}

@keyframes rotar{
  from{
    transform: rotateY(0deg);
  }to{
    transform: rotateY(520deg);
  }
}




/* REDES VOZ Y DATOS */

/*FIN SOLUCIONES IT*/





/*BAJA Y ALTA RESOLUCION*/
@media only screen and (max-width:600px) {
   
    footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:7vh;
   background-color:black;
   opacity:.8;
    text-align:center;
    align-content: space-evenly;
    color:#f7931d;
}
    .cont-btns{
    position:absolute;
    width:100%;
    bottom:auto;
    padding:0px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:25px;
    border:solid red 0px;
    justify-items:center;
}
.center-menup {
    bottom: 170px;}
    
    .cont-btnssit{
    width:100%;
    top:35%;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:25px;
    border:solid red 0px;
    }

.logo{
    position:absolute;
    text-align:center;
    border:solid red 0px;
    top: 13vh;
}
.logo img{width:70%;}
.logo-esq{
    position:absolute;
    top:0;
    right:-40;
    text-align: right;
    }
.bienv{width:180px;top:5vh;}
.bienv h1{color:#fff;font-size:20px;letter-spacing:5px;margin:0px; }
.tsit{width:210px;}
 .tpro{width:150px;}

.left{margin:20;width:30px;height:30px;}
.container{padding:23px;}

/* REDES VOZ Y DATOS */
.tit-cont{
    position:absolute;
    top:17vh;
    width:70%;
}
.tit-cont h1{color:#fff;font-size:17px;letter-spacing:5px;margin:0px; }

.subtit-cont h1{font-size:20px;}
.info{
    margin-top:40%;
     background: linear-gradient(-85deg, #f4bb79, #f7931d, #f4bb79, #f7931d, #f4bb79);
	background-size: 400% 400%;
	animation: gradient 155s ease infinite;
	width:80%;
	padding:25px;
    border-radius:50px; 
    font-size:15px;
    font-family:sans-serif;
    }
.card
{
	width: 150px;
	height: 100px;
	background-color: #442222;
  font-size: 40px;
	opacity: 0;
	position: absolute;
	/*top:35px;*/
	left:75px;
	border: solid darkgray 2px;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgba(0,0,0,.5);
  text-align: center;
  -webkit-animation-name: carrousel;
  -moz-animation-name: carrousel;
  -webkit-animation-duration: 14s;
  -moz-animation-duration: 14s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
 }
 .carrousel-3d {
    margin: auto;
    width: 130px;
    perspective: 1000px;
    position: relative;
    margin-top: 50px;
    margin-bottom: 250px;
}

/* FIN DE VOZ Y DATOS*/
    
} /*FIN MAS 600PX*/



@media (min-width:1800px){
  .principal{  
  width: 100%;
    height: 100%;
    background-image: url(https://www.tictacsolutions.mx/img/bg.png);
    background-position: center;
    background-size: cover;
    display: grid;
    place-items: center;
  }
  .cont-btns {
    position: absolute;
    width: 80%;
    bottom: 100px;
    /* padding: 50px; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    border: solid red 0px;
    justify-items: center;
  }
  .center-menup {
    bottom: 30%;}
  .cont-btns-index{position:absolute;width:80%;bottom:60%;/*padding:50px;*/display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:25px;border:solid red 0px;justify-items:center;}
  footer{
    position:absolute;
  
    width:100%;
    height:7vh;
   background-color:black;
   opacity:.8;
    text-align:center;
    align-content: space-evenly;
    color:#f7931d;
        margin-top: 100px;
}
  
    
}