@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700);
@import url(css/social.css);

h1,h2,h3,h4,h5,h6{
    font-family: 'Source Sans Pro';
    color: #2567cc;
    text-transform: uppercase;
}
h1{font-size: 36px;}
h2{font-size: 30px;}
h3{font-size: 20px;}

ul,li{margin:0px;padding:0px;list-style: none;}
a{color:#2567cc;}
a:hover{color:#000;text-decoration: none;}

body{
    font-family: 'Source Sans Pro';
    color: #9c9c9c;
    font-size: 22px;
    background-color:#fff;
}

p{text-align:justify;}
b{font-weight: 600;}

.full-width{width:100%;}
.imagen{background-size:cover;background-position:center center;background-repeat: no-repeat;}
.imagen:after{
    content:"";
    display:block;
    padding-top:80%;
}

.separa,.separa-10{height:10px;clear:both;}
.separa-20{height:20px;clear:both;}
.separa-30{height:30px;clear:both;}
.separa-40{height:40px;clear:both;}
.margin-bottom-10{margin-bottom:10px;}
.margin-top-10{margin-top:10px;}
.margin-top--30{margin-top:-30px;}

.grey{background-color:#eee;}
.blue{background-color:#2567cc;}
.text-default{color:#999;}
/* GENERALES */

.btn{border:none;border-radius: 20px;}
.btn-primary{background-color:#2567cc;color:#fff;text-transform: uppercase;}
.btn-default{background-color:#fff;color:#444;text-transform: uppercase;border:solid 1px #888;}
.btn-info{background-color:#10c3de;color:#fff;text-transform: uppercase;}
.btn-file {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.wysiswyg img.pull-left{margin-right:20px;margin-bottom:10px;}

.titular{text-align:center;color:#2567cc;padding-bottom:20px;margin-bottom:20px;background-image:url(images/titular.jpg);background-repeat: no-repeat;background-position: bottom center;border-bottom:solid 1px #ddd;}

.wrapper-flex{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex; 

    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.margin-0{margin:0px;}
.relative{position:relative;}

.bg-white{background-color:#fff;}

/* HEADER */

header{
    /*border-top:solid 10px #10c3de;*/
    position:fixed;
    top:0px;
    width:100%;
    left:0px;
    opacity:0;
    z-index:10;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
header.showed{
    opacity:1;
}
.background{height:460px;position:fixed;width:100vw;background-position: center center;background-size:cover;top:0px;left:0px;z-index:-1}
.portada .background{height:100vh;}
#contenido_principal{background-color:#fff;}
/* MENU */

.navbar-default{border:none;margin:0px;background:none;border-bottom:solid 1px #eee;background-color:#fff;z-index:100;}
.navbar-default .navbar-nav>li>a{color:#5d5d5d;padding:26px 15px 26px 15px;font-size:14px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;  -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;}
.navbar-default .navbar-nav>li:last-child{padding:0px;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{background-color:#fff;border-color:transparent;color:#2567cc;}
.navbar-toggle{border:solid 1px rgba(0,0,0,0.8);}
.navbar-default .navbar-toggle .icon-bar{background-color:rgba(0,0,0,0.8);}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background-color:rgba(0,0,0,0.5);}

.navbar-default .redes_sociales img{height:25px;}
.navbar-default .navbar-nav.redes_sociales>li{line-height: 54px;font-size:18px;font-weight: 300;}
.navbar-default .navbar-nav.redes_sociales>li.separator{padding-left:10px;margin-left:13px;border-left:solid 1px #ccc;height:54px;}
.navbar-default .navbar-nav.redes_sociales>li>i{color:#bf0000;}
.navbar-default .navbar-nav.redes_sociales>li>a{padding:15px 5px;}

.navbar-brand{margin:0px;padding:5px !important;}
.navbar-brand img{padding:0px;margin:0px;height:62px;  -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;}


.ampliado .navbar-brand img{padding:0px;margin:0px;height:75px;}
.ampliado .navbar-default .navbar-nav>li>a{color:#5d5d5d;padding:33px 15px 33px 15px;font-size:15px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
.ampliado .navbar-default .navbar-nav>li.active>a{color:#2567cc;padding:33px 15px 33px 15px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}

/* BANNER */
#banner .overlay{position:absolute;top:0px;left:0px;width:100%;height:100vh;z-index:2;text-align:center;}
#banner .overlay .logo{width:100%;max-width:600px;    margin: 0 auto;}
#banner .overlay .eslogan{width:100%;max-width:660px;margin-top:80px;}
#banner .overlay .preinfo{position: absolute;bottom:20px;width:100%;left:0px;}

#banner .overlay .info .btn{width:188px;}
#banner .overlay .info .fa{font-size:30px;color:#fff;}
#banner ul>li>.imagen{height:100vh;background:none;}

#banner.banner-interior{margin-top:90px;height:460px;background-position:center center;background-size:cover;background-repeat:no-repeat;margin-bottom:30px;}

.bloques-de-portada{margin-top:20px;}
.bloques-de-portada .imagen{background-size: cover;margin:0 auto;}
.bloques-de-portada .imagen:after{
    content:"";
    display:block;
    padding-top:80%;
}

.noticia_portada .titular{color:#000;text-transform: none;}
.noticia_portada .titular>span{color:#2567cc;}

.blue .titular{color:#fff;text-transform: none;text-align:left;border-bottom:solid 1px #fff;}
.blue .titular>span{color:#00deff;text-transform: uppercase;}
.blue p{color:#fff;}
.blue .btn{min-width:340px;}


.testimonios .imagen{width:120px;margin:0 auto;background-size:cover;background-position:center center;border-radius: 100%;border:solid 5px #eee;}
.testimonios .imagen:after{
    content:"";
    display:block;
    padding-top:100%;
}

.testimonios h3{font-style: italic;text-transform: none;font-weight: bolder;}
.testimonios .fecha{font-size:12px;font-style: italic;color: #2567cc;margin-top:20px;}
.testimonios p{clear: both;font-style: italic;}

#prefooter{font-size:16px;}
#prefooter li{font-size:16px;}
#prefooter .col-md-4>div{margin:0px;padding:20px;background-color: #2567cc;}
#prefooter .col-md-4{color:#fff;padding:10px;}
#prefooter .col-md-4:nth-child(2)>div{background-color: #3879dd;}
#prefooter .col-md-4:nth-child(3)>div{background-color: #4c8beb;}
#prefooter h4,#prefooter h4.titular{font-size:25px;color:#ffffff;text-align: left;padding-bottom:10px;margin:0px;margin-bottom:10px;background-image:url(images/titular2.jpg);background-position:bottom left;}
#prefooter p{font-size:16px;}
#prefooter .btn{border-radius: 0px;}
#prefooter .col-md-4 a{color:#fff;text-decoration:underline;}
#prefooter .redes_sociales_bajo img{max-width:50px;margin:5px;}
.galeria .imagen{margin-bottom:30px;}

.galeria_album .tit{height:60px;overflow:hidden;color:#fff;font-size:20px;line-height:18px;padding:10px;background-color:#10c3de;}
.galeria .imagen:after{
    content:"";
    display:block;
    padding-top:80%;
}
.galeria .imagen .fa-play-circle{
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -50px;
    margin-left: -30px;
    font-size: 70px;
    color:#2567cc;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.lista_archivos,.lista_archivos li{margin:0px;padding:0px;list-style:none;}
.lista_archivos li{padding:10px;background-color: #eee;border:solid 1px #ddd;margin-bottom:3px;}
.lista_archivos li:nth-child(2n){background-color:#f4f4f4;}
.lista_archivos li>a{color:#000;font-size:14px;}
.lista_archivos li>a>i{color:#999;}

.lista-excursiones li{padding:20px 10px;margin-bottom:20px;background-color:#fff;box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);}
.lista-excursiones h3,.excursion_detalle h3{margin-top:0px;}
.lista-excursiones h4,.excursion_detalle h4{margin-top:0px;color:#555;line-height:130%;font-size:.9em;}
.lista-excursiones p,.excursion_detalle p{color:#666;font-size:16px;}
.lista-excursiones .btn{border-radius: 0px;}
.lista-excursiones .btn-default{color:#015e6c;border-color:#10c3de;}

#reservar_ruta{
    background-color:rgba(255,255,255,0.7);
    border:dashed 2px #ddd;
    padding:20px;
    margin-top:20px;
}
#reservar_ruta h3{margin:0px;padding:0px;}

.opciones_de_compra.precio h1{font-size:40px;margin:0px;margin-top:22px;font-weight:400;color:#ff9000;}
.opciones_de_compra label{font-size:14px;}
.opciones_de_compra.comprar .btn{margin-top:15px; border-radius: 5px;
    font-size: 22px;
    padding: 10px 40px;max-width: 260px;display: inline-block}
.formulario_compra{display:none;}
.formulario_compra textarea{height:123px;}

.panel-group p{font-size:16px;color:#777;}

.contactos li:nth-child(2n){background-color:#eee;}

.personas small{font-size:14px;}
.personas small i{color:#2567cc;}
.personas .fila{background-color:rgba(37, 103, 204, 0.1);}
.personas .fila:nth-child(2n){background-color:#fff;}
.personas .separa-5{height:10px;}

footer{background-color:#10c3de;font-weight: 400;padding-bottom:10px;font-size:14px;color:#fff;}
footer a{color:#fff;}
footer a.otro_contenido{padding-left:10px;margin-left:5px;border-left:solid 1px #fff;line-height: 30px;}
footer a:first-child.otro_contenido{padding-left:0px;margin-left:0px;border:none;}
footer .inferior{font-size:13px;padding:10px;}

.sin-resultados{padding:40px;border:dotted 2px #ddd;background-color:#fff;margin-bottom:20px;}

/*BLOG */
.bloque.principal.noticia{
    border:solid 1px #ddd;
    margin-bottom:30px;
    background-color:#fff;
}
.bloque.principal.noticia .titular{margin:0px;background:none;}
.bloque.principal.noticia .titular h2{
    text-align:left;
    margin:10px;
    font-size:24px;
    margin-top:20px;
    text-transform: none;
    text-align:center;
}
.bloque.principal .contenido{
    padding:20px;
}
.bloque.principal.noticia .post_details{background-color:#eee;padding:15px;}
.bloque.principal.noticia .post_details li{display: inline-block;}
.bloque.principal.noticia .post_details .btn-mio{margin-top:-5px;background-color:#2567cc;color:#fff;}
.bloque.principal.widget .titular{
    margin:0px;
    background:none;
    padding-bottom: 0px;
}
.bloque.principal.widget .titular h2{margin:0px;text-transform: none;font-size:24px;padding-bottom:15px;border-bottom:dotted 2px #ddd;margin-bottom:10px;}
.bloque.principal.widget ul.popular li{font-size:14px;padding:5px;border-bottom:solid 1px #ddd;line-height:30px;height:45px;overflow: hidden;}
.bloque.principal.widget ul.popular li .imagen{width:30px;height:30px;border-radius: 100%;float:left;margin-right:10px;}
.bloque.principal.widget.enmarcado{border:solid 1px #eee;background-color:#f4f4f4;}
.bloque.principal.widget.enmarcado_blanco{border:solid 1px #eee;background-color:#fff;}
.bloque.principal.widget.enmarcado_blanco .titular h2{background-color:#000;padding-top:15px;border:none;color:#fff;}
.bloque.principal.widget.enmarcado_blanco.titulo_azul .titular h2{background-color:#2567cc;padding-top:15px;border:none;color:#fff;}

/**NUEVO 11/16 **/ 
.botones_ruta_portada{    display: flex;}
.botones_ruta_portada>a{    margin:10px; }
.botones_ruta_portada>a.segundo{  background-color: #11aec5}

.sobre_navbar{background-color: #10c3de;padding: 5px 0px}
.sobre_navbar p{margin: 0px; color: #fff; font-size: 14px}
.sobre_navbar .area_privada{color: #fff; margin: 0px 15px}
.sobre_navbar .red_social{color: #fff}
.sobre_navbar .red_social.alt{color: #b7f0f8}

#modalVuelos, #modalVuelos p, #modalVuelos label{font-size: 16px; color: #666}
#modalVuelos .btn {text-transform: uppercase}
p s {font-weight: 700; color: #930504; text-decoration: none}
.captcha {width: 150px;}
input[name="captcha"] {width: 150px!important;margin: 0px!important;font-size: 14px!important;}
.btn-vuelo-modal{border-radius: 5px;font-size: 22px;padding: 10px 40px;}
.form-inline2 .form-group{margin: 0px}
.formulario_compra .bootstrap-select{background-color: transparent}
.modal-dialog.large {
    width: 80%!important; /* respsonsive width */
}

.check_grande{}

.letra_normal{font-size: 16px}
.btn-pagar{padding: 10px 50px}

.galeria .imagen {
    border: 1px solid #dedede;
}

.galeria .imagen.youtube {
    background-size: contain;
    border: 1px solid #dedede;
}
.letra_pequena{font-size: 18px}

#lista_ficheros{font-size: 16px;     margin-bottom: 0px; }
#lista_ficheros li{font-size: 16px}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #10c3de;
    border-color: #10c3de;
}

img.rezo{height: 14px}
img.rezo.badge{       top: 0px!important; right: 15px!important;height: 25px;}

.responsive-calendar .day .badge {
    background-color: transparent;
    font-size: 16px;
    color: #ffd800;
}

.responsive-calendar .day.active a {background-color: #4c8beb;}
.responsive-calendar .day.active a:hover {background-color: #3879dd;}
.responsive-calendar .day.today a{ background-color: #2567cc; color: #fff}

.tabla_rezos {font-size: 16px}
.tabla_rezos .cabecera>div{background-color: #6499e8; color: #fff; text-align: center; }
.tabla_rezos .contenido>div{background-color: rgba(76, 139, 235, 0.1); padding: 2px 0;}
.tabla_rezos .contenido>div:nth-of-type(odd){background-color: rgba(76, 139, 235, 0.2)}

.tabla_rezos .contenido a{text-decoration: none!important; color: #666!important}
.tabla_rezos .contenido>a>div>div{text-align: center; padding: 2px 0px;}

.tabla_rezos .fila_horario>div{text-align: center;     }
.tabla_rezos .fila_horario>div>div{padding: 0;     }

.titulo_horario{text-align: center; font-size: 21px;}

.formulario_div label{    font-size: 16px;}
.formulario_div .form-group{margin-bottom: 0px}
.formulario_div .alert{    font-size: 16px;}

.invisible{color: transparent}

.tabla_rezos  .personas li{
    font-weight: 300;
    font-size: 13px;
    text-align: left;
    padding-left: 3px;
    background-color: #d1e2fb
}
.tabla_rezos  .personas li:nth-of-type(odd){
    background-color: #bcd4f7
}

.proxima_peregrinacion{    padding: 10px;
    background-color: #eee;
    border: solid 1px #ddd;
    margin-bottom: 3px;}
.proxima_peregrinacion h3{margin: 0px; color: #4c8beb}

.proxima_peregrinacion.admin_color{
    background-color: #edf4fd;
    border: solid 1px #dbe8fb;
}

.proxima_peregrinacion.admin_color label{
    font-size: 16px;
}

form#listar_rezos{
    text-align: center;
}

.proxima_peregrinacion.admin_color .form-group{
    padding-right: 20px;
}

.texto_notificaciones{font-size: 18px}

.notificaciones .cuadro{
       padding: 15px 5px;
    background-color: #edf4fd;
    border: solid 1px rgb(208, 221, 241);
    margin-bottom: 5px;}

.notificaciones .cuadro #correo_inscripcion{
/*    min-width: 340px*/
}

.alert{font-size: 16px;
    padding: 10px;}

p.descripcion_corta{    font-size: 17px;}

/*BLOG*/
@media (max-width: 1200px) {
    .navbar-brand img{height:50px;margin-top:10px;}
    .ampliado .navbar-default .navbar-nav>li>a{color:#5d5d5d;padding:33px 10px 33px 10px;font-size:15px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
    .navbar-default .navbar-nav>li>a{color:#5d5d5d;padding:33px 10px 33px 10px;font-size:13px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
    .ampliado .navbar-default .navbar-nav>li.active>a{color:#2567cc;padding:33px 10px 33px 10px;font-size:13px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
}

@media (max-width: 992px) {
    header{background-position: -1370px 0;}
    .navbar-default .navbar-nav>li>a{padding:10px;font-size:11px;}
    .navbar-brand img{height:40px;margin-top:15px;}
    #banner .overlay .logo img{max-width:70%;}#banner .overlay .eslogan img{max-width:70%;}

    .ampliado .navbar-default .navbar-nav>li>a{color:#5d5d5d;padding:33px 8px 33px 8px;font-size:11px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
    .navbar-default .navbar-nav>li>a{color:#5d5d5d;padding:33px 8px 33px 8px;font-size:11px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
    .ampliado .navbar-default .navbar-nav>li.active>a{color:#2567cc;padding:33px 8px 33px 8px;font-size:12px;font-family: "Source Sans Pro";font-weight: 400;text-transform: uppercase;}
    .ampliado .navbar-brand img{height:40px;margin-top:15px;}
    .lista-excursiones .btn.btn-lg{font-size:12px;}

    .botones_ruta_portada{display: block; text-align: center}
    .blue .btn {
        min-width: 200px;
    }
}

@media (max-width: 767px) {
    .contactos{font-size:10px;}
    .contactos .text-right{text-align:left;}
    .ampliado .navbar-brand img{height:35px;margin-top:3px;}
    #banner.banner-interior{height:150px;}
    #banner.banner-interior{margin-top:0px;}
    .navbar-default{background-color:#fff;position:fixed;top:0px;width:100%;z-index:1000;}
    .navbar-nav{margin-top:0px;}
    .navbar-brand{padding:8px;}
    .navbar-brand img{height:35px;margin:0px;}
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{margin-left:0px;}
    body{padding-top:50px;}
    .ampliado .navbar-default .navbar-nav>li.active>a,.ampliado .navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a{padding:15px 8px;font-size:11px;}

    .navbar-default .navbar-nav>li>a>i{display:inline-block;/*width:50px;*/margin-right:20px;}
    .wysiswyg img.pull-left{margin:0px;margin-bottom:10px;width:100%;}

    .bloques-de-portada .imagen{margin-bottom:10px;}
    .lista-excursiones .btn.btn-lg{font-size:12px;width:100%;}

    .modal-dialog.large {
        width: auto!important; /* respsonsive width */
    }
    .personas li{
        font-size: 11px;
        padding: 4px
    }
    .responsive-calendar .day .badge {
        font-size: 10px;}
    img.rezo.badge {
        top: 0px!important;
        right: 11px!important;
        height: 18px;}
}

@media (max-height: 768px) {
    #banner .overlay .info{display:none;}
}


/************
LOGIN
************/

@import url(https://fonts.googleapis.com/css?family=Roboto);

/****** LOGIN MODAL ******/
.loginmodal-container {
    padding: 30px;
    max-width: 350px;
    width: 100% !important;
    background-color: #F7F7F7;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    font-family: "Source Sans Pro";
}

.loginmodal-container h1 {
    text-align: center;
    font-size: 1.8em;
    font-family: "Source Sans Pro";
}

.loginmodal-container input[type=submit] {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    position: relative;
}

.loginmodal-container input[type=text], input[type=password] {
    height: 44px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    /* border-radius: 2px; */
    padding: 0 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover {
    border: 1px solid #b9b9b9;
    border-top: 1px solid #a0a0a0;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal {
    text-align: center;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    height: 36px;
    padding: 0 8px;
    /* border-radius: 3px; */
    /* -webkit-user-select: none;
    user-select: none; */
}

.loginmodal-submit {
    /* border: 1px solid #3079ed; */
    border: 0px;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.1); 
    background-color: #4d90fe;
    padding: 17px 0px;
    font-family: "Source Sans Pro";
    font-size: 14px;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
    /* border: 1px solid #2f5bb7; */
    border: 0px;
    text-shadow: 0 1px rgba(0,0,0,0.3);
    background-color: #357ae8;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a {
    text-decoration: none;
    color: #666;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    opacity: 0.6;
    transition: opacity ease 0.5s;
} 

.login-help{
    font-size: 12px;
}


/*********************
TABS
*********************/
/* written by riliwan balogun https://www.facebook.com/riliwan.rabo*/
.board{
    width: 100%;
    margin: 60px auto;
    min-height: 500px;
    background: #fff;
    /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
    position: relative;
    /* border-bottom: 0; */
    /* width: 80%; */
    margin: 40px auto;
    margin-bottom: 0;
    box-sizing: border-box;

}

.board > div.board-inner{
    background: #fafafa url(https://subtlepatterns.com/patterns/geometry2.png);
    background-size: 30%;
}

p.narrow{
    width: 60%;
    margin: 10px auto;
}

.liner{
    height: 2px;
    background: #ddd;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    /* background-color: #ffffff; */
    border: 0;
    border-bottom-color: transparent;
}

span.round-tabs{
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: white;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}

span.round-tabs.one{
    color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34);
}

li.active span.round-tabs.one{
    background: #fff !important;
    border: 2px solid #ddd;
    color: rgb(34, 194, 34);
}

span.round-tabs.two{
    color: #febe29;border: 2px solid #febe29;
}

li.active span.round-tabs.two{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #febe29;
}

span.round-tabs.three{
    color: #3e5e9a;border: 2px solid #3e5e9a;
}

li.active span.round-tabs.three{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #3e5e9a;
}

span.round-tabs.four{
    color: #f1685e;border: 2px solid #f1685e;
}

li.active span.round-tabs.four{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #f1685e;
}

span.round-tabs.five{
    color: #999;border: 2px solid #999;
}

li.active span.round-tabs.five{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #999;
}

.nav-tabs > li.active > a span.round-tabs{
    background: #fafafa;
}
.nav-tabs > li {
    width: 20%;
}
/*li.active:before {
content: " ";
position: absolute;
left: 45%;
opacity:0;
margin: 0 auto;
bottom: -2px;
border: 10px solid transparent;
border-bottom-color: #fff;
z-index: 1;
transition:0.2s ease-in-out;
}*/
.nav-tabs > li:after {
    content: " ";
    position: absolute;
    left: 45%;
    opacity:0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #ddd;
    transition:0.1s ease-in-out;

}
.nav-tabs > li.active:after {
    content: " ";
    position: absolute;
    left: 45%;
    opacity:1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #ddd;

}
.nav-tabs > li a{
    width: 70px;
    height: 70px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

.nav-tabs > li a:hover{
    background: transparent;
}

.tab-content{
}
.tab-pane{
    position: relative;
    padding-top: 50px;
}
.tab-content .head{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.btn-outline-rounded{
    padding: 10px 40px;
    margin: 20px 0;
    border: 2px solid transparent;
    border-radius: 25px;
}

.btn.green{
    background-color:#5cb85c;
    /*border: 2px solid #5cb85c;*/
    color: #ffffff;
}


@media( max-width : 585px ){

    .board {
        width: 90%;
        height:auto !important;
    }
    span.round-tabs {
        font-size:16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
    .tab-content .head{
        font-size:20px;
    }
    .nav-tabs > li a {
        width: 50px;
        height: 50px;
        line-height:50px;
    }

    li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }

    .btn-outline-rounded {
        padding:12px 20px;
    }
}