@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese');

*{ 
	box-sizing: border-box;
	margin:0;
	padding:0;
	font-family:'Oswald', sans-serif;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.container {
	max-width: 100rem;
}


html {
	scroll-behavior: smooth;
  }

body {
	margin: 0;
	font-size: 1rem; /*texto responsive*/		
	font-family: 'Oswald', sans-serif;
	overflow: scroll;
	scrollbar-base-color: #01bad9;
  }

p{
	font-weight: light;
	font-display: swap;
	font-family: 'Oswald', sans-serif;
	font-size: 1rem; /*texto responsive*/
}

h1,h2,h3,h4,h5,h6{
	color: var(--titleColor);	
	font-display: swap;
}  

h1{
	font-size: 3em;
} 

#main-h1{
	font-size: 4em;
}

h2, h3, h4, h5{
	font-size: 2.5em;
	font-family: 'Oswald', sans-serif;
}

@media screen and (max-width: 768px){  
	#main-h1{
		font-size: 3em;
	}
	h1{
		font-size: 2.5em;
	}
	h2, h3, h4, h5, h6{
		font-size: 2em;
	}	
}

@media screen and (max-width: 480px){  
	#main-h1, h1{
		font-size: 2em;
	}

	/*h1{
		font-size: 1.5em;
	}	

	h2, h3, h4, h5{
		font-size: 1em;
	}	*/
}

section{
	overflow: hidden;
}

/*OBJETOS SELECCIONADOS*/

p::selection {
    background: #01bad9;
    color: white;
}

h1::selection {
    background: #01bad9;
    color: white;
}

strong::selection {
    background: #01bad9;
    color: white;
}
br::selection {
    background: #01bad9;
    color: white;
}

h2::selection {
    background: #01bad9;
    color: white;
}

h3::selection {
    background: #01bad9;
    color: white;
}

h4::selection {
    background: #01bad9;
    color: white;
}

h5::selection {
    background: #01bad9;
    color: white;
}

h6::selection {
    background: #01bad9;
    color: white;
}

img::selection {
    background: #01bad9;
    color: white;
}

a::selection {
    background: #01bad9;
    color: white;
}

b::selection {
    background: #01bad9;
    color: white;
}

span::selection {
    background: #01bad9;
    color: white;
}
		/*seleccionados 2*/

p::-moz-selection {
	background: #01bad9;
    color: white;
}

/*SCROLLBAR*/
::-webkit-scrollbar{
    width: 0.6rem;
    background-color: #ffffff;
}
::-webkit-scrollbar-track{
	width: 10px;
    background-color: #ffffff;
}
::-webkit-scrollbar-thumb{
background-image: -webkit-gradient(linear, left bottom, left top, from(#021855), to(#01bad9));
/*background-image: -webkit-linear-gradient(bottom, darkturquoise 0%, #005c86 100%);
background-image: linear-gradient(to top, darkturquoise 0%, #005c86 100%); */
}
	
/*MENU DE NAVEGACIÓN*/

header{
	width: 100%;
	z-index: 2000;
	background-image: linear-gradient(to top right, rgba(60, 60, 60, .7), rgba(76, 76, 76, .7));
}

  .navbar-brand {
	float: left;
	margin-right: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  }

.logo{
	justify-content: left;
	align-items: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

  nav{
	  width: 100%;
	  background: white;
	  z-index: 2000;
	  position: fixed;
	  box-shadow: rgba(60, 60, 60, .7);
  }

  nav .menu1{
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	color: #16151b;
	position:  relative;
	display: inline-block;
  }

  nav ul{
	  list-style: none;
  }

  .menu > li{
	position: relative;
	display: inline-block;
}

.menu > li > a{
	display: block;
	margin-right: 40px;
	margin-left: 40px;
	padding: 30px 0;
	text-decoration: none;
}

.nav-item:link{
	background: white;
}

.dropdown-toggle::after {
    display:none;
}

  /*línea hover menú*/

  nav .menu1:before{
	content:'';
	position: absolute;
	width: 0%;
	height: 3px;
	background:#16151b;
	top: 50%;
	animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
  }

  nav .menu1:hover:before{
	width: 100%;
	animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;  
  }

/* Submenu*/


.submenu{
	justify-content: center;
	text-align: center;
}

.nav-item .dropdown-menu .dropdown-item {
	padding: auto;
	margin: auto;
	text-decoration: none;
}

.submenu .dropdown-item:hover{
	font-weight: 500;
	background: black;
}

@media (max-width:768px){
	.nav-item .dropdown-menu .dropdown-item {
		margin: 5px;
		padding: 5px;
	}
}


/*Linea hover menu*/
  @keyframes in{
	0%{
	  width: 0;
	  left:0;
	  right:auto;
	}
	100%{
	  left:0;
	  right:auto;
	  width: 100%;
	}
  }
  @keyframes out{
	0%{
	  width:100%;
	  left: auto;
	  right: 0;
	}
	100%{
	  width: 0;
	  left: auto;
	  right: 0;
	}
  }
  @keyframes show{
	0%{
	  opacity:0;
	  transform:translateY(-10px);
	}
	100%{
	  opacity:1;
	  transform:translateY(0);
	}
  }

  .navbar-light{
	transition: all 1s ease;
}

 /*ABOUT US*/
 .us{
	background-color: #000000;/*#021855*/
	/*background-image: url('https://images.pexels.com/photos/1694000/pexels-photo-1694000.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
	width: 100%;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	justify-content: center;
	align-items: center;	
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;*/
 }

 .linea1{ /*sección de nosotros*/
	background-color: #cf2bd0;
	height: 20px;
	width: 45%;
	animation-duration: 3s;
	animation-name: slidein;
	animation-iteration-count: 3;	
 }

  @keyframes slidein {
	from {
	  margin-left: 45%;
	  width: 300%
	}
  
	to {
	  margin-left: 0%;
	  width: 45%;
	}
  }

 .linea2{ /*sección de nosotros*/
	background-color: #01bad9;
	height: 20px;
	width: 45%;
	margin-left: 55%;
	animation-duration: 3s;
	animation-name: increase;
	animation-iteration-count: 3;
 }

 @keyframes increase {
	from {
	  margin-left: 0%;
	  width: 300%
	}
  
	to {
	  margin-left: 55%;
	  width: 45%;
	}
  }

 .linea{ /*alinea a la izq*/
	height: 2px;
	width: 7%;
	background-color: #01bad9;
  }

  .lineaa{ /*alinea a la izq*/
	height: 2px;
	width: 7%;
	background-color: #cf2bd0;
  }
  
  .linea0{ /*alinea a la der*/
	  height: 2px;
	  width: 7%;
	  background-color: #cf2bd0;
	  margin-left: 93%;
  }

  .lineacen{ /*centro*/
	height: 2px;
	width: 7%;
	background-color: #cf2bd0;
	margin-left: 46%;
}
	.lineacen1{ /*centro*/
		height: 2px;
		width: 7%;
		background-color: #01bad9;
		margin-left: 46%;
	}
 
 /*SERVICIOS CELULAR*/
 @media screen and (min-width: 1024px){
	#services{
		display: none;
	}
}

.cards-list {
	z-index: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
  }
        
  @media all and (max-width: 700px) {
	.card-list {
	  /* On small screens, we are no longer using row direction but column */
	  flex-direction: column;
	}
  }
/*servicios celular cards*/


 /*Servicios ordenador*/
 .gallery-wrap{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 70vh;
  }

  @media screen and (max-width: 1023px){
	#servicios6{
		display: none;
	}
}
  
  .item {
	flex: 1;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: none;
	transition: flex 0.8s ease;
  }
  
  /*texto invisible y eso de servicios grandes*/
 .column#caption {
	position: relative;
 }
 .column#caption .text {
	position: absolute;		
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
    opacity: 0;
    transition: all 0.8s ease;			
 }
 .column#caption:hover .text {
	opacity: 1;
 }
/*texto invisible y eso de servicios grandes*/

/*GALERÌA */
  .item:hover{ /*zoom de imagen*/
	flex: 7;
  }
  
  .item-1 { /*corporativo*/
	background-image: url('https://images.unsplash.com/photo-1612188842101-f976582906fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80');
  }
  
  .item-2 { /*web*/
	background-image: url('https://images.unsplash.com/photo-1621839673705-6617adf9e890?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80');
  }
  
  .item-3 { /*ilustración*/
	background-image: url('../img/2/Monster\ For\ Art.webp');
  }
  
  .item-4 { /*foto*/
	background-image: url('https://images.pexels.com/photos/1595244/pexels-photo-1595244.jpeg?auto=compress&cs=tinysrgb&w=1600');
  }
  
  .item-5 { /*catálogos*/
	background-image: url('https://images.pexels.com/photos/682501/pexels-photo-682501.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  }
    
  .item-6 { /*RENDER 3D*/
	background-image: url('https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  }


  /*BANNERS*/
  .banner0{
	background-color: #000000;
  }

  .banner0 p{
	font-weight: 600;
	text-transform: uppercase;
  }

  @media screen and (max-width: 768px){
	.banner0 p, .banner1 p, .banner2 p{
		font-size: 1.5rem;
			}
	}

/*BANNER CON IMAGEN*/
  .banner1{
	background-image: url('../img/fort\ art\ banner.webp');
	width: 100wh;	
	height: 50vh;
	background-position: center;
	background-size: cover;
  }
  @media screen and (max-width: 1023px){
	.banner1{
		display: none;
			}
	}
  .banner1 p{
	font-weight: 600;
	text-align: left;
	margin-top: 4em;
  }

  .banner2{
	background-color: #000000;
  }

  .banner2 p{
	font-weight: 600;
  }
  @media screen and (min-width: 1024px){
	.banner2{
		display: none;
			}
	}

  /*banner diagonal*/
  .banner {
	position: relative;
	z-index: 1;
	margin: 80px auto;
	width: 330px;
}

.banner .line {
	margin: 0 0 10px;
	width: 100%;
	height: 78px;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.05);
	text-align: center;
	text-transform: uppercase;
	font-size: 3em;
	line-height: 78px;
	transform: skew(0, -15deg);
}

.banner .line:after,
.banner .line:first-child:before {
	position: absolute;
	top: 44px;
	left: 0;
	z-index: -1;
	display: block;
	width: 330px;
	height: 78px;
	border-radius: 4px;
	background: rgba(180,180,180,0.8);
	content: '';
	transform: skew(0, 15deg);
}

.banner .line:first-child:before {
	top: -10px;
	right: 0;
	left: auto;
}

.banner .line:first-child:before,
.banner .line:last-child:after {
	width: 0;
	height: 0;
	border-width: 38px;
	border-style: solid;
	border-color: rgba(180,180,180,0.8) rgba(180,180,180,0.8) transparent transparent;
	background: transparent;
}

.banner .line:last-child:after {
	top: 12px;
	border-color: transparent transparent rgba(180,180,180,0.8) rgba(180,180,180,0.8);
}

.banner span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background: rgba(255,255,255,0.9);
	color: #666;
	text-shadow: 1px 1px 0 #444;
}


/*galería con zoom*/
.row.no-gutters [class*=col-]{
	padding-left: 0;
	padding-right: 0;
  }
  .img-wrapper {
	overflow: hidden;
  }
  .img-wrapper img{
	transition: transform .5s ease;
  }
  .img-wrapper img:hover{
	transform: scale(1.5);
	cursor: pointer;
  }
/*galeria con zoom}*/

 /*CLIENTES*/
#clientes{
	padding-top: 50px;
}

#clientes h4{
	justify-content: right;
}

/*slider clientes*/
	@media (min-width: 768px) {
	.carousel-multi-item-2 .col-md-3 {
	float: left;
	width: 25%;
	max-width: 100%; } }
	
	.carousel-multi-item-2 .card img {
	border-radius: 2px; }

/*clientes*/
.slider{
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}


/* Animation*/
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 24))}
}


/*Styling*/
.slider1 {
	background: white;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
	overflow:hidden;
	position: relative;
}
	
	.slider1::before,
	.slider1::after {
		content: "";
		position: absolute;
		z-index: 2;
	}
	
	.slider1::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	.slider1::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: scroll 60s linear infinite;
		display: flex;
		color: #fff;
	}

	.slide{
		padding: 1rem;
	}
	


/*Cotiza*/
#cotiza{
	background-color: #000000;
}

@media (max-width: 767px){
	#cotiza{
		display: none;
	}
}

/*WHATSAPP*/
.appWhatsapp{
	position: fixed;
	right: 100px;
	bottom: 100px;
	width: 3em;
	filter: drop-shadow(5px 5px 10px #000000);
	z-index: 4000;
  }
  
#appWhatsapp:hover{
	content: url('../img/whatsapp\ 2.webp');
	}


@media (max-width: 767px){
	.appWhatsapp{
		right: 60px;
		bottom: 50px;
		z-index: 3000;
	  }	  
	  
	#appWhatsapp{
		width: 150%;
	  }
}

@media (min-width: 768px){ /*ESTE PUNTO DE RUPTURA EVITA QUE EN LOS TAMAÑOS +768PX SE DESBORDE*/
	.appWhatsapp{
		right: 60px;
		bottom: 50px;
		z-index: 3000;
	  }	  
	  
	#appWhatsapp{
		width: 150%;
	  }
}

@media (max-width: 360px){
	.appWhatsapp{
		right: 40px;
		bottom: 50px;
		z-index: 3000;
	  }
	  
   	#appWhatsapp{
		width: 150%;
      }
}
.tooltip{
	font-size: 1.2em;
}

/*INSTAGRAM*/

.appInstagram{
	position: fixed;
	right: 100px;
	bottom: 100px;
	width: 3em;
	filter: drop-shadow(5px 5px 10px #000000);
	z-index: 4000;
  }

#appInstagram:hover{
	content: url('../img/insta1.webp');
	}


@media (max-width: 767px){
	.appInstagram{
		right: 60px;
		bottom: 150px;
		z-index: 3000;
	  }	  
	  
	#appInstagram{
		width: 150%;
	  }
}

@media (min-width: 768px){
	.appInstagram{
		right: 60px;
		bottom: 150px;
		z-index: 3000;
	  }	  
	  
	#appInstagram{
		width: 150%;
	  }
}

@media (max-width: 360px){
	.appInstagram{
		right: 40px;
		bottom: 130px;
		z-index: 3000;
	  }
	  
   	#appInstagram{
		width: 150%;
      }
}

/*MENSAJE DE WHATSAPP*/



 /*FOOTER*/