@charset "UTF-8";
/* CSS Document */
/* ----------------------------------
Name: custom.css
 01 contacto
03 video player responsive reel
------------------------------------- */



/* ==========================================================================
   01. Contacto
   ========================================================================== */
#btn-1647943331247{position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
background-color: transparent;
margin: 15px 15px 15px 0;
text-align: center;
font-size: 16px;
font-weight: bold;
font-weight: 500;
overflow: hidden;
cursor: pointer;
border: none;
border-radius: 100px;
z-index: 9;color:white;
}

div#gtx-trans{display:none}

input{
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    display: block;
width: 100%;
background-color: transparent;
padding: 5px 15px;
font-size: 17px;
font-weight: normal;
color: #FFF;
border: 1px solid rgb(136 136 136 / 65%);
border-radius: 0px;margin-bottom: 20px
}


input.sppb-form-check-input{ text-align: left; padding-top: 15px; width: 30px}


input:not(select){
background-color: transparent;
padding-left: 0;
padding-right: 0;
font-size: 17px;
border-width: 0 0 1px 0;
border-style: solid;
border-radius: 0;
}

 textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
     background-color: transparent;
padding-left: 0;
padding-right: 0;
font-size: 17px;
border-width: 0 0 1px 0;
border-style: solid;
border-radius: 0;
     display: block;
width: 100%;
background-color: transparent;
padding: 5px 15px;
font-size: 17px;
font-weight: normal;
color: #FFF;
border: 1px solid rgb(136 136 136 / 65%);
border-radius: 3px; margin: 50px 0px
}



@media (max-width: 600px){
    
    form.sppb-ajaxt-contact-form { padding: 20px 40px
 
}
}





@media (max-width: 1024px){
.portfolio-interactive-item {
    padding: 8% 3% 20% 3%;
    margin-bottom: 20px;
}
}


.tt-ol-submenu-list > li a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger > a {
     text-transform: uppercase;
}
.portfolio-interactive.pi-compact .pi-item-title {
    text-transform: uppercase;
}
.tt-ol-menu-list > li > a, .tt-ol-menu-list > li > .tt-ol-submenu-trigger > a {
 text-transform: uppercase;
}

h2.pli-title{ text-transform: uppercase;}

.course-s-control {
  width: 100%;
}

.course-s-control .glide__arrow {
  border: none;
  background-color: transparent;
}

.course-s-control .glide__arrow i {
  font-size: 11px;
  padding: 16px;
  border-radius: 50%;
  background-color: #111;
  color: #fff;
  cursor: pointer;
}

.course-s-control .glide__arrow i:hover {
  color: #ef5744;
}

.course-s-control .glide__arrow.glide__arrow--left {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}

.course-s-control .glide__arrow.glide__arrow--right {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(50%);
          transform: translateY(-50%) translateX(50%);
}

.portfolio-control {
  width: 100%;
}

.portfolio-control .glide__arrow {
  border: none;
  background-color: transparent;
}

.portfolio-control .glide__arrow i {
  padding: 10px 0 10px 0;
  font-size: 30px;
  color: #ccc;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.portfolio-control .glide__arrow .border-circle {
  display: block;
  position: absolute;
  top: 10px;
  right: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  border-left-color: transparent;
  border-top-color: transparent;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.portfolio-control .glide__arrow.glide__arrow--left {
  position: absolute;
  left: 0;
  bottom: -15px;
}

.portfolio-control .glide__arrow.glide__arrow--left:hover i {
  color: #ef5744;
}

.portfolio-control .glide__arrow.glide__arrow--left:hover .border-circle {
  border-color: #ef5744;
  border-left-color: transparent;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

.portfolio-control .glide__arrow.glide__arrow--right {
  position: absolute;
  right: 0;
  bottom: -15px;
}

.portfolio-control .glide__arrow.glide__arrow--right .border-circle {
  right: inherit;
  left: -15px;
  border-left-color: #ccc;
  border-right-color: transparent;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.portfolio-control .glide__arrow.glide__arrow--right:hover i {
  color: #ef5744;
}

.portfolio-control .glide__arrow.glide__arrow--right:hover .border-circle {
  border-color: #ef5744;
  border-right-color: transparent;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}





.widget-block.video-course {
  position: relative;
  padding: 0;
  margin-bottom: 0;
}

.widget-block.video-course img {
  border-radius: 10px;
}

.widget-block.video-course .bg-half-layer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.widget-block.video-course .bg-half-layer .teacher {
  position: absolute;
  top: 30px;
  right: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.widget-block.video-course .bg-half-layer .teacher img {
  width: 40px;
  height: auto;
  margin-right: 15px;
  border: 2px solid #999;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.widget-block.video-course .bg-half-layer .teacher .teacher-name {
  font-size: 15px;
  font-family: 'Open sans';
  text-shadow: 1px 1px #000;
  letter-spacing: 1px;
  color: #fff;
}

.widget-block.video-course .bg-half-layer .badge {
  padding: 10px 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-size: 10px;
  font-family: 'Open sans';
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  top: 30px;
  left: 30px;
}

.widget-block.video-course .bg-half-layer .badge.pink {
  background-color: purple;
}

.widget-block.video-course .bg-half-layer .badge.orange {
  background-color: orangered;
}

.widget-block.video-course .bg-half-layer .badge.active {
  background-color: #ef5744;
}

.widget-block.video-course .bg-half-layer i.icon-play {
  padding: 15px;
  font-size: 35px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  opacity: 0;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.widget-block.video-course .bg-half-layer i.icon-play:hover {
  color: #ef5744;
}

.widget-block.video-course:hover .bg-half-layer {
  background-color: rgba(0, 0, 0, 0.8);
}

.widget-block.video-course:hover i.icon-play {
  opacity: 1;
}

.widget-block.video {
  padding: 0;
  position: relative;
  background-color: transparent;
}

.widget-block.video img {
  border-radius: 10px;
}

.widget-block.video .video-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.widget-block.video .video-layer a {
  display: inline-block;
}

.widget-block.video .video-layer a i {
  font-size: 32px;
  color: #fff;
  border-radius: 50%;
}

.widget-block.video .video-layer a i:hover {
  color: #ef5744;
}

.widget-block.video:hover .video-layer {
  background-color: rgba(0, 0, 0, 0.8);
}

#VideoPlayer {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 10px;
}



/* ==========================================================================
   03 video player responsive reel
   ========================================================================== */
.video-container-iframe-youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video-iframe-youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media only screen and (max-width: 768px){
    .section-youtube-video{margin-top: 100px}
    .video-container-iframe-youtube {
        
  position: relative;
  width: 100%;
 
}
    }