* {
  box-sizing: border-box;
}

header {
  background-color: #C7DABB;
}

.logo {
  align-items: center;
}

.logo img {
  height: 200px;
}

body {
  background-image: url(IMAGES/desktop-wallpaper-santiago-de-chile-centro-santiago-de-chile.jpg);
  background-size: 100vw 100vh;
  background-color: #F6F6F4;
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: #000000;
  font-size: 1em;
}

h1 {
  font-size: 3.0em;
  text-align: center;
  color: white;
  font-size: 40px;
}
h2 {
  font-size: 2em;
  margin-top: 20px;
}
h3 {
  font-size: 2em;
}
p {
    font-family: Helvetica;
  font-size: 2.50em;
  color:white;
  
  
}
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,



h6{
font-family: "Fjalla one", sans-serif;
color:#1d4f15;
text-align: center;
line-height:1em;
}

.button {
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  color: white;
  background-color: green;
  text-align: center;
}


.button:hover {
  background-color: rgb(9, 9, 48);
}

.cover {
  height: 250px;
  background-image: url(IMAGES/cherrydeck-05gac-Qn0k4-unsplash.jpg);
 color: white;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0, 0.5);
  background-blend-mode: darken;
}

.cover h1{
  color: #f8f9fa;
}



.cover2 {
  height: 250px;
  
  background-image: url(IMAGES/rsz_jacob-bentzinger-ueecyjamlnc-unsplash.jpg);
  color: white;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0, 0.5);
  background-blend-mode: darken;
}

.cover2 h1 {
  color: #f8f9fa;
}

.cover-small {
  height: 200px;
  background-blend-mode: normal;
}

.card {
  border: 0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0.06);
  background-color: #9EC08D;
  
}

.card-title {
  min-height: 3rem;
  
}

.card-text {
  min-height: 10rem;
  color:white;
  
}

.course-stripe,
.slider {
  overflow-x: scroll;
  padding-top: 1rem;
  padding-bottom: 1rem;
  
}

.stripe-container,
.slider-container {
  display: flex;
  
}

.stripe-container .card {
  width: 300px;
  flex-shrink: 0;
  margin-right: 1rem;
  
}

.responsive-iframe {
  position: relative;
  padding-top: 56.25%;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slider {
  overflow-x: hidden;
}

.slider-container {
  transform: translatex(0);
  animation: slider 10s infinite;
}

.image-container {
  width: 100%;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.avatar {
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
}

nav a {
  font-weight: 600;
  padding-right: 10px;
}



nav a:hover {
  color: #4f0aee;
}

.bg-light {
  background-color: #f8f9fa !important;
}





.container-form a {
font-size: 17px;
display: inline-block;
text-decoration: none;
width: 100%;
margin-bottom: 15px;
color: #000000;
font-weight: 700;
margin-left: 20px;
}

nav a:hover {
color: #4f0aee;
}

.bg-light {
background-color: #f8f9fa !important;
}

form {
width: 450px;
margin: auto;
background: rgba(0, 0, 0, 0.4);
padding: 10px 20px;
box-sizing: border-box; 
margin-top: 20px;
border-radius: 7px;
}
form h2 {
text-align: center;
margin: 0;
margin-bottom: 20px;
font-size: 35px;

}

input, textarea {
  width: 100%;
  margin-bottom: 20px;
  padding: 7px;
  box-sizing: border-box;
  font-size: 17px;
  border: none;
}

textarea{
  min-height: 100px;
  max-height: 200px;
  max-width: 100%;
}



#boton {
padding: 20px;
font-size: 16px;
border: none;
outline: 0px;
background: #2503e3;
color: #ffffff;
border-radius: 3px;
cursor: pointer;
transition: all 300ms ease;
margin-top: 10px;
margin-bottom: 30px;
}

#boton:hover {
  cursor: pointer;
background: #4f0aee;
}

.contenedor-contacto {
width: 100%;
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
}


.contenedorDescriptor {
  font-size: large;
  position: relative;
  margin: auto;
  width: 100%;
  outline: none;
  background-color: #9EC08D;
  transition: color .2s;
  text-align: center;
  max-width: 1000px;
  box-sizing:border-box;
  overflow: flex;
  background-size: cover;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
  border-radius: 7px;
  line-height:2em;
  
}
.contenedorDescriptor h1 {
  color: #1d4f15;
   text-align: center;
}

.contenedorDescriptor b {
    color: white;
}



p {
  display: flex;
  flex-direction: column;
  align-items: center;
  color:white;
  
}

ol {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.containerimg {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  

}






.margin-pbody-cursos{
  display:grid;
  gap: 1rem;
  
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0 auto;
  overflow:hidden;
}




.cursos {
  padding-bottom: 0.675rem;
  
  
  
}


.pbody {
  padding:0 100%;
  padding-bottom:0px;
  
  
}

.confondo {
  background: url();
    background-repeat: repeat;
    background-size: auto;
  background-repeat: repeat-y;
  background-size: cover;
}

.sep6 {
  background-color: #D5D8DC;
  min-height: 30px;
  max-height: 30px;
  color: white;
}

.margin {
  margin: 0 -0.625rem;
}

.margin,
.margin2x {
  display: grid;
}

.box {
  background: #ffffff;
  display: grid;
  padding: 1.25rem 0.675rem;
  margin: 0;
  width: 100%;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
  background-color: #D5D8DC;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
  
  
}

td {
  display: table-cell;
  border-right: 1px solid #f0f0f0;  
  vertical-align: inherit;
  background-color:#A9CCE3;
  
  
}

table tr td,
table tr th {
  padding: 0.625rem;
  
}

table {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #f0f0f0;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%;
  margin:0 auto;
  
  
}
p,
dl,
blockquote,
table,
kbd {
  font-size: 0.85rem;
  line-height: 1.6;
}

.flip {
  width: 100%;
  border: none;
  background: inherit;
  color: #f2f2f2;
  padding: 10px;
  font-size: 11pt;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;
  transition: all 500ms ease;
  
}
#footer{
  position: relative;
  bottom: 0;
  width: 100%;
  height: 205px;
  text-align: left;
 }
 main {
  padding: 1em;
}

.volver {
  text-align: center;
  position: relative;
  background-color: #9EC08D;
  margin-bottom: 1%;
}



@keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

/*button:hover {*/
/*	animation: bounce 1s;*/
/*}*/

.flip:after {
  top: -100%;
  left: 0px;
  width: 100%;
  position: absolute;
  background: var(--barras);
  border-radius: 5px;
  content: "VER VIDEO EXPLICATIVO";
  transform-origin: left bottom;
  transform: rotateX(90deg);
  
}

.flop {
  width: 100%;
  background: var(--barras);
  border-radius: 5px;
  color: #ffffff;

  padding: 10px;
  font-size: 11pt;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;
  background-color: #2471A3;
}

.flip:hover {
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateY(100%);
}

.animado {
  color: red;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {
    color: #94d500;
  }
  to {
    color: #ff4611;
  }
}

/* Standard syntax */
@keyframes example {
  from {
    color: #94d500;
  }
  to {
    color: #ff4611;
  }
}

.example_d{
  color:#ffffff !important;
  background: red;
  padding:20px;
  border: 4px solid red !important;
  border-radius:6px;
  display:inline-block;
}

elemento {
  cursor: pointer;
}

.line {
  clear: left;
}

.size-max .line {
  max-width: 100%;
}
.size-960 .line, .size-1140 .line, .size-1280 .line, .size-max .line {
  margin: 0 auto;
  padding: 0 0rem;
}

.margin-bottom {
  margin-bottom: 1.25rem;
}

.s-1, .s-2, .s-five, .s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-11, .s-12, .m-1, .m-2, .m-five, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12, .l-1, .l-2, .l-five, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8, .l-9, .l-10, .l-11, .l-12 {
  float: left;
  position: static;
}

.s-12 {
  width: 100%;
}

.m-12 {
  width: 100%;
}
.l-12 {
  width: 100%;
}



.margin > .s-1, .margin > .s-2, .margin > .s-five, .margin > .s-3, .margin > .s-4, .margin > .s-5, .margin > .s-6, .margin > .s-7, .margin > .s-8, .margin > .s-9, .margin > .s-10, .margin > .s-11, .margin > .s-12, .margin > .m-1, .margin > .m-2, .margin > .m-five, .margin > .m-3, .margin > .m-4, .margin > .m-5, .margin > .m-6, .margin > .m-7, .margin > .m-8, .margin > .m-9, .margin > .m-10, .margin > .m-11, .margin > .m-12, .margin > .l-1, .margin > .l-2, .margin > .l-five, .margin > .l-3, .margin > .l-4, .margin > .l-5, .margin > .l-6, .margin > .l-7, .margin > .l-8, .margin > .l-9, .margin > .l-10, .margin > .l-11, .margin > .l-12 {
  padding: 0 0.625rem;
}




@media (max-width: 480px) {
  
  form {
    width: 100%;
  }
  
  contenedorDescriptor{
    width: 100%;
  }
}

@keyframes slider {
  0% {
    transform: translatex(0);
  }

  20% {
    transform: translatex(0);
  }

  25% {
    transform: translatex(-100%);
  }

  45% {
    transform: translatex(-100%);
  }
  50% {
    transform: translatex(-200%);
  }

  70% {
    transform: translatex(-200%);
  }

  75% {
    transform: translatex(-300%);
  }

  95% {
    transform: translatex(-300%);
  }
  100% {
    transform: translatex(0);
  }
}
