/******************************************************************
  Template Name: Nicely Diseño
  Description:  Página web de diseñador gráfico
  Author: Nicely Diseño
  Author URI: https://nicely.cl
  Version: 1.0
  Created: Sandra Fica Monroy
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Service Section
6.  Class Section
7.  Price Plan Section
8.  Trainer Section
9.  Contact
10.  Footer Style

-------------------------------------------------------------------*/

/*----------------------------------------*/

/*Colores corpotarivos*/
:root{
    --color-corporativo1: #14133B;
    --color-corporativo2: #004899;
    --color-corporativo3: #9DCBEF;
    --color-corporativo4: #c85716;
    --color-corporativo5: #FFFFFF;
    --color-corporativo6: #05041e;
    --color-corporativo7: #39393f;
    
}



*{
margin: 0;
padding: 0;
box-sizing: border-box;
/*background-color: var(--color-corporativo6);*/
}

/*Iconos de Bootstrap*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--color-corporativo5);
	/*font-weight: 400;*/
	font-family: 'M PLUS 1', sans-serif;
}


h1 {
	font-size: 50px;
  font-weight: 700;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 14px;
	font-family: 'M PLUS 1', sans-serif;
	color: #a9a9a9;
	font-weight: 400;
	line-height: 24px;
	margin: 0 0 15px 0;
}

.navbar{
    background-color: rgba(20, 19, 59, 0.95);
}

.top-nav-collapse{
    background-color: #111111 !important;
}

.navbar-dark .navbar-toggler{
    border-color: rgba(0,0,0,.0) !important;
}

.navbar-nav .nav-item{
  color: var(--color-corporativo5);
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--color-corporativo3);
  font-size: 14px;
	font-family: 'M PLUS 1', sans-serif;
}

.navbar .navbar-nav .nav-link:hover {
  color: var(--color-corporativo4)
}

.dropdown-item{
  color: var(--color-corporativo3);
  font-size: 14px;
	font-family: 'M PLUS 1', sans-serif;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0rem;
}


.dropdown-menu{
  background-color: var(--color-corporativo6);
}


/* Primer seccion - Banner home*/

#inicio{
  background-image: url(/assets/img/nicelybanner-01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*.primersection1{
  background-image: url(/assets/img/nicelybanner-01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}*/

/*.primersection2{
  background-image: url(/assets/img/Inicio\ -\ web\ nicely\ A-12.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}*/

.text1{
  margin-top: 300px;
  color: var(--color-corporativo1);
}

.anaranjado{
  color:var(--color-corporativo4);
}

.text2{
  color: var(--color-corporativo1);
}

/* Primer quiebre primer seccion - Banner home
@media (max-width: 1100px){
  
  .text1{
    margin-top:1200px !important;
  }
  
}         
/* FIN Primer quiebre primer seccion - Banner home*/

/* Segundo quiebre primer seccion - Banner home*/
@media (900px <= width <= 1200px){

   #inicio{
    height: 100vh !important;
    background-size: 1200px;
  }
  
  .text1{
    margin-top: 600px !important;
    color: var(--color-corporativo1);
    
    
  }
  
  .anaranjado{
    color:var(--color-corporativo4);
  }
  
  .text2{
    color: var(--color-corporativo1);
    
  }
}
/* FIN Segundo quiebre primer seccion - Banner home*/

/* Segundo quiebre primer seccion - Banner home*/
@media (500px <= width <= 899px){

  #inicio{
    height: 100vh !important;
    background-size: 900px;
  }
  
  .text1{
    margin-top: 540px !important;
    color: var(--color-corporativo1);
    font-size: 40px !important;
  }
  
  .anaranjado{
    color:var(--color-corporativo4);
  }
  
  .text2{
    color: var(--color-corporativo1);
    font-size: 30px;
  }
}
/* FIN Segundo quiebre primer seccion - Banner home*/

/* Tercer quiebre primer seccion - Banner home*/
@media (2000px <= width <= 499px){

  #inicio{
    height: 100vh !important;
    background-size: 900px;
  }
  
  .text1{
    margin-top: 940px !important;
    color: var(--color-corporativo1);
    font-size: 40px !important;
  }
  
  .anaranjado{
    color:var(--color-corporativo4);
  }
  
  .text2{
    color: var(--color-corporativo1);
    font-size: 30px;
  }
}
/* FIN tercer quiebre primer seccion - Banner home*/

/* FIN Primer seccion - Banner home*/

/*Segundo seccion Perfil*/

/*.perfil{
  margin-top: 40px !important;
  
}*/

.textoperfil1{
  color: var(--color-corporativo1);
  transform: rotate(-05deg);
}

.textoperfil2{
  color: var(--color-corporativo7);
}

/* FIN Segundo seccion Perfil*/


/* Tercer seccion Portafolio */


/* Busqueda Portafolio*/

.barra-busqueda{
  width: 30%;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  text-align: center;
  font-size: 14px;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #cdced0; 
  text-align: center;
  font-size: 14px;
  font-family: 'M PLUS 1', sans-serif !important;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--color-corporativo4);
  border-color: transparent !important;
  font-family: 'M PLUS 1', sans-serif !important;
}

/* Fin Busqueda Portafolio*/

/* Inicio Filtro Portafolio*/

#portafolio a{
  text-decoration: none !important;
  color: var(--color-corporativo7);
  font-size: 16px;
	font-family: 'M PLUS 1', sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
}

#portafolio a:hover{
  color: var(--color-corporativo4);
  font-weight: 700;
}

#portafolio a.active{
  color: var(--color-corporativo4);
  font-weight: 700;
}

/* Fin Filtro Portafolio*/

/* Titulo y texto Portafolio */
.linea {
  width: 60px;
  height: 2px;
  color: var(--color-corporativo4);
}

/* Trabajos Portafolio */
.textoportafolio1{
  color: var(--color-corporativo1);
  margin-top: 80px;
}

.textoportafolio2{
  color: var(--color-corporativo7);
  margin-top: 15px;
}

.product{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.product .itemBox{
  position: relative;
  display: block;
}

.product .itemBox.hide{
  display: none;
}



.portafolio img{
  width: 100%;
  height: auto;
  box-shadow: 0 8px 8px 0 rgba(57, 57, 63, 0.40);
  -webkit-transform: perspective(1500px) rotateY(50deg);
  transform: perspective(1500px) rotateY(50deg);
  -webkit-transition: 1s linear;
  transition: 1s linear;
  
}

.portafolio img:hover{
  -webkit-transform: perspective(8000px) rotateY(0deg);
  transform: perspective(8000px) rotateY(00deg);
}

/* Inicio Modal portafolio */

/* Modal header */

.modal-content {
  border: 1px solid rgba(243, 238, 238, 0) !important;
  box-shadow: 0 8px 8px 0 rgba(57, 57, 63, 0.40);
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--color-corporativo2);
}

/*.modal-header .btn-close:hover {
  color: var(--color-corporativo4)
}*/
/* Modal body */

.modal-body p{
  color: var(--color-corporativo7);
}

.modal img{
  box-shadow: 0 8px 8px 0 rgba(57, 57, 63, 0.40);
}

/* Modal footer */

.btn-secondary {
  color: #fff;
  background-color: var(--color-corporativo2);
  border-color: transparent !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--color-corporativo1);
  border-color: transparent !important;
}

.modal-footer .btn:hover {
  background-color: var(--color-corporativo4) !important;
  border-color: transparent !important;
}


/* FIN Modal portafolio */


/* FIN Tercer seccion Portafolio */

/* Inicio Contacto */


#formulario .btn:hover{
  background-color: var(--color-corporativo4);
  border-color: none;
}

/* Inicio migas de pan */
.breadcrumb a, li{
  text-decoration: none !important;
  color: var(--color-corporativo3);
  font-size: 14px;
	font-family: 'M PLUS 1', sans-serif;
}

.breadcrumb a:hover{
  color: var(--color-corporativo4);
}

.breadcrumb .active{
  color: var(--color-corporativo3);
  font-size: 14px;
	font-family: 'M PLUS 1', sans-serif;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: var(--color-corporativo3);
  content: var(--bs-breadcrumb-divider, "/");
}


/* FIN migas de pan */

/* Fin Contacto */


/* INICIO Footer */
.footer{
  background-color: var(--color-corporativo6);
}



.border-bottom {
  border-bottom: 1px solid #39393f!important;
}

.text-muted {
  color: #6c757d!important;
  opacity: 0.5;
}

footer .nav-link:hover {
  color: var(--color-corporativo4) !important;
}

/* Inicio Iconos Footer */
.justify-content-end {
  justify-content: flex-end!important;
}

.d-flex {
  display: flex!important;
}


.text-muted {
  --bs-text-opacity: 1;
  color: #6c757d!important;
}

/* whatsapp flotante*/

.float-wa{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;
}

.float-wa:hover {
  color: var(--color-corporativo4) !important;
}

/* Fin Iconos Footer */

/* FIN Footer */