/* 
*containers cabecera:

container #1   - .section-header - bg-warning 
container #1-1 -  #myCarousel    - bg-info
container #2   - .carousel-inner - bg-danger
container #3-1 - .carousel-1     - bg-primary 
*/

@import url('https://fonts.googleapis.com/css?family=Khula:700');
@import url('https://fonts.googleapis.com/css?family=Arial&effect=shadow-multiple');


/* ...............................contenedores maestros........ */
* {
    color: rgb(71, 68, 68);
    /* color: rgb(211, 203, 203); */
    /* background: black; */
}

body {
    margin: 0;
    padding: 0;
}

main {
    margin: 0;
    padding: 0;
    /* background: green; */
    /* border: solid; */
}

footer {
    /* background: gray; */
    height: 20em;
}

/* **********************************inicio font-effect************************************ */

.hidden {
    opacity: 0;
}

.console-container {
    font-family: Khula;
    font-size: 6em;
    text-align: center;
    height: 200px;
    width: 1000px;
    display: block;
    position: absolute;
    color: white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.console-underscore {
    display: inline-block;
    position: relative;
    top: -0.14em;
    left: 10px;
    color: white;
}

/* **********************************fin font-effect************************************* */

/* ......................... .....contenedores alumnos........ */

/* container #1 */
main .section-header {
    /* border: solid; */
     height: auto
}

/* img de cabecera */
#imgSoftware {
    /* border: solid black; */

    /* border-radius: 0em 0em 8em 0em; */
    min-height: 35rem;
    max-height: 100%;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    /* max-width: 100%; */
    width: auto;
}

/* .carousel-1 {
    min-height: 10em;
    width: 1000px;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    padding-left: 0%;
    padding-right: 0%;
} */

/* ................................navbar..................... */

nav {
    display: block;
}

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#navbarCollapse {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 105%;
    /* border: solid; */
}

#navbarCollapse .dropdown:hover {
    transform: scale(none);
    transition: 0;
}

#navbarCollapse li:hover {
    /* transform: scale(1.15); */
    /* border: solid; */
    border-radius: 0.5em;
    width: auto;
    background-color: rgba(80, 80, 196, 0.76);
    transition: 0.4s;
    margin: auto;
}

/* ................................main...................... */

/* ....................... SECTION #1 ................... */

article {
    /* border: rgb(10, 10, 10) 2px solid; */

    /* height: 20rem; */
}

.cont-espacio-1,
.cont-espacio-2,
.cont-espacio-3,
.cont-espacio-footer {
    /* background: rgb(6, 6, 83); */

    color: rgb(218, 193, 193);
    /* margin-bottom: 2%; */
}

/* .article-start {
} */

/* .article-center{
  height: 25rem;
  border: orange solid 2px;
} */

/* .article-end {
} */

/* .cont-section-main {
  justify-items: center;
} */

/* ********************************* START IZQ ********************************* START  EXECUTE NOW */
/* CONTENEDOR PRINCIPAL LATERAL IZQ **** *** **** *** **** *** ****/
.article-start {
    /* border: orange solid 2px; */
    /* background: rgba(97, 97, 218, 0.931); */

    /* height: 10rem; */
}

/* CONTENEDOR PRINCIPAL LATERAL IZQ **** *** **** *** **** *** ****/

.article-start .featurette {
    /* background: grey; */
    /* border: 3px rgb(74, 72, 72) solid; */

    /* height: 100%; */
}

/* _________________all img init 📸__________________ */
.article-start .featurette .img-article-start {
    /* background: red; */
    /* border: gray solid ; */
    /* height: 80%; */
}

/* _________________all img end 📷____________S______ */

/* ********************************* START IZQ ********************************* START  EXECUTE NOW */

/* CONTENEDOR PRINCIPAL CENTRAL **** *** **** *** **** *** ****/
.article-center {
    height: 25rem;
    /* border: rgb(56, 53, 47) solid 4px; */
    padding-left: 0%;
    padding-right: 0%;
    margin-left: 0%;
    margin-right: 0%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: rgba(97, 97, 218, 0.931); */
    /* position: relative; */
}

/* ESTE CONTENEDOR, ES DONDE SE VA A COLOCAR LAS FLECHAS COROUSEL, IZQ & DER. */
.cont-arrow {
    /* border: rgb(221, 127, 127) solid 3px; */
    /* background: red; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    /* justify-content: space-evenly; */
}

/* CONTENEDOR PRINCIPAL CENTRAL **** *** **** *** **** *** ****/

.article-center .featurette {
    /* background: grey; */
    /* border: 3px rgb(74, 72, 72) solid; */
    min-height: 100%;
    /*con esta line-code, adapto el contenedor, al contenedor padre*/
    /* max-height: 100%; */
    width: 100%;
}

/* _________________all img init 📸__________________ */
/* .article-center .featurette div{
  background: rgb(21, 2, 2);
  height: 100%;
  width: 100%;
} */

.img-article-center-1 {
    /* background: rgb(230, 116, 9); */
    height: 500px;
    width: auto;
}

.article-center .featurette .img-article-center-1 {
    /* background: rgb(230, 116, 9); */
    width: 100%;
    max-width: auto;
    /* align-content: center; */
    /* height: auto; */
    /* position: relative; */
}

/* _________________all img end 📷__________________ */

/* article END #3 ********************END************************************************************ END    - EXECUTE NOW ON   */

/* CONTENEDOR PRINCIPAL LATERAL IZQ **** *** **** *** **** *** ****/
.article-end {
    /* border: orange solid 2px; */
    /* background: rgba(97, 97, 218, 0.931); */

    height: 10rem;
}

/* CONTENEDOR PRINCIPAL LATERAL IZQ **** *** **** *** **** *** ****/

.article-end .featurette {
    /* background: grey; */
    /* border: 3px rgb(74, 72, 72) solid; */

    height: 100%;
}

/* _________________all img init 📸__________________ */
.article-end .featurette .img-article-end {
    /* background: red; */
    /* border: gray solid; */

    height: 80%;
}

/* _________________all img end 📷____________S______ */

/* article END #3 ********************END************************************************************ END    - EXECUTE NOW OFF  */

/* ....................... SECTION #2 ................... */
.cont-section-main,
.cont-section-main-2,
.cont-section-main-3 {
    /* background: yellow; */

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;

    /* height: 610px;
    width: 100%; */
}

.section-main-2 {
    /* background: blue; */

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;

    height: 300px;
    width: 100%;
}

.article-start-2 {
    /* background: red; */

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;

    /* height: 250px;
    width: 100%; */
}

/* .........................cierre main...................... */

/* .............................. footer..................... */

.subcont-footer-start {
    /* border: black 1px solid; */
    height: 13em;
}

.subcont-footer-center {
    /* border: black 1px solid; */
    height: 13em;
}

.subcont-footer-end {
    /* border: black 1px solid; */
    height: 4em;
}

.subcont-footer-logo {
    /* border: black 1px solid; */
    height: 13em;
}

h5 {
    /* background: rgba(255, 0, 0, 0.493); */
}



/* ...........................................GALERIA PRESENTACIÓN...................................................  */


a {
    text-decoration: none;
}

input {
    display: none;
}

/* --------------------------------------- CONTAINERS:   */
/* --------------------------------------- CONTAINERS:   */


/* container # 1  - principal */
.container {

    /* background-color:rgb(240, 227, 39); */
    /* border: rgb(155, 34, 224) solid; */
    /* background-color: rgb(237, 253, 6); */

    display: flex;
    transform-style: preserve-3d;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2em;
    width: 750px;
    height: 500px;
    /* height: 100%;  */
    /* max-width: 1100px; */
    /* max-height: 0;  */
}

/* container # 2  */
/* carta y/o imagen principal, la que permite ver la imagen más grande */
.cards {

    /* background-color:rgb(0, 0, 255); */
    /* border: white solid; */
    /* background-color: #17ac50; */
    /* height: 600px;
    width: 1000px; */
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
    margin: auto;
    position: relative;
    perspective: 400px;
    transform-style: preserve-3d;
    /* max-width: 1100px; */
    /* max-height: 100%;  */
}

/* container # 3  -  contenedor de carta  */
/* alto de las cartas o imagenes ubicadas atras */
.cards label {

    /* background-color: rgb(255, 0, 0); */
    /* background-color: rgb(191, 255, 0); */
    /* height: 500px;
    width: 1000px; */
    height: 100%;
    width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: transform 0.55s ease;
    /* width: 100%; */
}

/* container # 4 */
/* Container de cada carta, Color del container de cartas */
/* Aquí tambien se logra dimensionar la visualización de la imagen */
.cards .card {

    /* border: black solid; */
    /* background-color: orange; */
    background-color: #ecd79e;
    /* padding: 10px 15px; */
    /*padding entre la carta e imagen */
    position: relative;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

/* container # 5 */
.card .image {

    /* background-color: #7489f5; */
    display: flex;
    justify-content: space-between;
    height: 98%;
    width: 100%;
    /* max-height: 200px; */
}

/* container # 6 */
.card .image img {

    height: auto;
    width: 100%;
    border-radius: 5px;
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 50%);
    object-fit: cover;
    display: flex;
    /* margin-top: 5px; */
    /* width: 100%; */
    /* height: 950px; */
    /* border: solid; */
    /* max-width: 100%; */
}

/* container # 6-1 */
.card .infos {

    display: block;
    text-align: end;
    /* max-height: 500px; */
    /* padding-top: 20px; */
}

/* ------------------------------------- FINAL CONTAINERS   */

.a-top {
    width: 30em;
    height: 20px;
    font-size: .8rem;
    background: rgba(255, 255, 255, 0.1);
    color: #d8d8d8a4;
    border-radius: .7rem .2rem .2rem .6rem;
    text-decoration: none;
    padding: 0.2% 2.5%;
}

.a-top:hover {
    border: 1px solid rgba(214, 168, 168, 0.204);
    color: #d8d8d8a4;

}


.card .image .dots {
    text-align: center;
}

/* .card img:hover{
    transform: scale(1.35);
} */

/* puntos verticales laterales de colores */
.dots div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.dots div:nth-child(1) {

    background-color: var(--current-color1);
}

.dots div:nth-child(2) {

    background-color: #5B85F9;
}

.dots div:nth-child(3) {

    background-color: #000;
}

.infos span {

    display: block;
}

/* Titulo del párrafo, del container de carta */
.infos .name {
    margin-bottom: 10px;
    margin-top: 15px;
    /* font-family: var(--bs-font-sans-serif); */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 17px;
    color: black;
    letter-spacing: 2px;
    transition: all .6s ease;
    /* font-family: font-effect-fire-animation; */
    /* font-family: 'Tangerine', serif; */
    /* font-size: 48px;  */
    /* color: var(--current-color1); */
    /* padding-left: 25%; */
}

/* Texto de párrafo y sus Propiedades - del container de carta */
.infos .lorem {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: 10px;
    color: rgb(0, 0, 0);
    letter-spacing: 2px;
    margin-bottom: 0;
    /* color: #ECEAED; */
}

.card .btn-contact {

    width: 100%;
    height: 60px;
    margin: 35px auto;
    border-radius: 5px;
    background-color: var(--current-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: px;
    letter-spacing: 10px;
    font-weight: 700;
    transition: all .7s ease;
}

.card .socials {

    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-top: 20px; */
}

.socials i {

    font-size: 25px;
    transition: all .7s ease;
    color: var(--current-color2);
}

/* cada bloque de las instruccciones a continuación, pertenece a cada carta */

#s1:checked~.cards #slide5,
#s2:checked~.cards #slide6,
#s3:checked~.cards #slide7,
#s4:checked~.cards #slide1,
/*  <-- img central    1 #giro   movimiento 3 */
#s5:checked~.cards #slide2,
#s6:checked~.cards #slide3,
#s7:checked~.cards #slide4 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-105%, 0, -320px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide6,
#s2:checked~.cards #slide7,
#s3:checked~.cards #slide1,
#s4:checked~.cards #slide2,
/*  <-- img central    2 #giro   movimiento 2 */
#s5:checked~.cards #slide3,
#s6:checked~.cards #slide4,
#s7:checked~.cards #slide5 {
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-70%, 0, -220px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide7,
#s2:checked~.cards #slide1,
#s3:checked~.cards #slide2,
#s4:checked~.cards #slide3,
/*  <-- img central    3 #giro  movimiento 1 */
#s5:checked~.cards #slide4,
#s6:checked~.cards #slide5,
#s7:checked~.cards #slide6 {
    box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-35%, 0, -120px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

/* ------------------------------------------------------------- */
#s1:checked~.cards #slide1,
#s2:checked~.cards #slide2,
#s3:checked~.cards #slide3,
#s4:checked~.cards #slide4,
/* <--- img central 4 #giro  -* * (point 1) * * */
/* movimiento 7 */
#s5:checked~.cards #slide5,
#s6:checked~.cards #slide6,
#s7:checked~.cards #slide7 {
    box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%);
    transform: translate3d(0, 0, 0);
    --current-color1: #fad00c;
    --current-color2: #ECEAED;
}

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

#s1:checked~.cards #slide2,
#s2:checked~.cards #slide3,
#s3:checked~.cards #slide4,
#s4:checked~.cards #slide5,
/*  <-- img central    5 #giro  movimiento 6 */
#s5:checked~.cards #slide6,
#s6:checked~.cards #slide7,
#s7:checked~.cards #slide1 {
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(35%, 0, -120px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide3,
#s2:checked~.cards #slide4,
#s3:checked~.cards #slide5,
#s4:checked~.cards #slide6,
/*  <-- img central    6 #giro    movimiento 5 */
#s5:checked~.cards #slide7,
#s6:checked~.cards #slide1,
#s7:checked~.cards #slide2 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(70%, 0, -220px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide4,
#s2:checked~.cards #slide5,
#s3:checked~.cards #slide6,
#s4:checked~.cards #slide7,
/*  <-- img central    7 #giro   movimiento 4 */
#s5:checked~.cards #slide1,
#s6:checked~.cards #slide2,
#s7:checked~.cards #slide3 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(105%, 0, -320px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}




/* _----------------------Modificando CAROUSEL------------------------ */


/* Declare heights because of positioning of img element */
/* .carousel-item {
    display: block;
    position: relative;
    height: 25rem;
    /* background-color: #777; 
  }
  /* .carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 20rem;
  } 

  .carousel-item{

    height: 100%;
  } */