html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}


.p-t-10 { padding-top:10px;}
.p-t-20 { padding-top:20px;}
.p-t-30 { padding-top:30px;}
.p-t-40 { padding-top:40px;}
.p-t-50 { padding-top:50px;}
.p-t-100 { padding-top:100px;}

.p-b-10 { padding-bottom:10px;}
.p-b-20 { padding-bottom:20px;}
.p-b-30 { padding-bottom:30px;}
.p-b-40 { padding-bottom:40px;}
.p-b-50 { padding-bottom:50px;}

.m-t-10 { margin-top:10px;}
.m-t-20 { margin-top:20px;}
.m-t-30 { margin-top:30px;}
.m-t-40 { margin-top:40px;}
.m-t-50 { margin-top:50px;}

.m-b-10 { margin-bottom:10px;}
.m-b-20 { margin-bottom:20px;}
.m-b-30 { margin-bottom:30px;}
.m-b-40 { margin-bottom:40px;}
.m-b-50 { margin-bottom:50px;}

.p-0 { padding:0;}

.c-blanco {
    color:rgba(255,255,255,1);
}

.c-azul-1 {
    color:rgba(0,255,255,1) !important;
}


p {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 300;
    font-size: 1.1em;
    line-height: 1.1;
    color: inherit;
}

.entrena{
    font-family: 'Titillium Web', sans-serif;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 1.1;
    color: inherit;
}

h1 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
}

h2 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.bgm-negro {
    background: black;
}

.menu-principal {
    font-weight: 400;
    font-family: 'Titillium Web', sans-serif;
    z-index: 99;
    width: 100%;
    line-height: 80px;
    padding:0px 30px;
    background: rgba(0,0,0,0);
    -webkit-transition: all ease 400ms;
}

.menu-principal li a {
    text-transform: uppercase;
    font-size: 1.1em;
    color:rgba(255,255,255,1);
}

.seccion-planes {
    /*background: url(../img/b3-bg-planes.jpg) no-repeat top;
    background-size: cover;*/
    background-color:black;
}


.seccion-planes img {
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    transition: all ease 400ms;
    outline: 0px solid rgba(0,0,0,0);
    outline-offset: 0px;
}

.seccion-planes img:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
    outline: 10px solid rgba(0,0,0,0.8);
    outline-offset: -10px;
}

.seccion-b3-online{
    background-color:black;
}


.seccion-coaches{
    background-color:black;
}


.seccion-coaches img{
    -webkit-filter: grayscale(1);
    opacity: 0.7;
    -webkit-transition: all ease 400ms;
}

.seccion-coaches img:hover{
    -webkit-filter: grayscale(0);
    opacity: 1;
}

.seccion-sucursales {
    background: url(../img/b3-bg-sucursales.jpg) no-repeat top right;
    background-size: cover;
}

.seccion-sucursales img {
    -webkit-filter: grayscale(1);
    -webkit-transition: all ease 400ms;
}

.seccion-sucursales img:hover {
    -webkit-filter: grayscale(0);
}

.modal-perfil img{
    max-height: 80vh;
}

.modal {
    background: rgba(0,0,0,0.8);
}
.modal-content {
    border:0;
    background: none;
    box-shadow: none;
}

.close {
    color:white;
    opacity: 0.5;
    font-size: 3em;
}


.close {
    color:white;
    opacity: 1;
    font-size: 3em;
}

.navbar-top { 	position: fixed;
    z-index: 999;
    width: 100%; 
    background:rgba(1,65,102,0);
    box-shadow:0 0 10px rgba(0,0,0,0);
    transition: ease all 500ms;
    }
    
.navbar-top-2 { background:rgba(0,0,0,0.8);
        box-shadow:0 0 10px rgba(0,0,0,0.1); }

/*efecto de carousel*/
 
.carousel-control.right { background-image: none; }

.carousel-control.left { background-image: none; }



.btn { 	border-radius: 0 !important;
	border: 1;
	padding: 10px 40px;
	text-transform: uppercase;}	

.btn-login { 	border-radius: 0 !important;
		border: 1;
		background: rgba(0,254,254,1);
		color: rgba(35,0, 65, 1) ;
		font-family: "Montserrat", sans-serif;
        font-weight: 600;
        font-style: italic;
		text-transform: uppercase;}


/* YOUR CSS simplified */  
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    height: auto;
    width: 100%;
    line-height: 1;
}

/*Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from:       http://codepen.io/transportedman/pen/NPWRGq
and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from:  http://codepen.io/Rowno/pen/Afykb*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}    
.carousel-fade .carousel-inner .active {
opacity: 1;
}    
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}    
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}    
.carousel-fade .carousel-control {
z-index: 2;
}

/*WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
Need to override the 3.3 new styles for modern browsers & apply opacity*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
}