/* GLOBAL STYLES
-------------------------------------------------- */

/* Padding below the footer and lighter body text */
body {
    color: #5a5a5a;
    background-color: #ffffff; /* #2255ff; no aplica si despues viene image*/
    /*background-image: url("../img/skywall.png");*/
}

@font-face {
    font-family: "Flexo";
    src: url('../fonts/Flexo-Bold.otf') format("opentype");
}

@font-face {
    font-family: "Calibri Light";
    /*src:url(https://www.estampamilagrosa.com/font/fonts/myriadpro/myriadpro-bold.otf) format("opentype");*/
    src: url(../fonts/CalibriL.ttf) format("truetype");
}

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports 
class="navbar custom-navbar wow fadeIn" */

.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    height: 70px;
}

.navbar-wrapper .navbar {
    padding-right: 10px;
    padding-left: 10px;
    height: 70px;
}

.navbar-wrapper .navbar .container {
    width: auto;
    height: 70px;
}

.navbar-header .navbar-text {
    color: #ffffff;
}

.navbar-inverse {
    height: 70px;
    background-color: rgb(12, 125, 183); /*color de fondo del header 0070cc oscuro    #3594FC azul del header claro */
    color: #ffffff; /* letras del header*/
    /*border-radius:0;
	border-bottom-color:transparent;
	background-image: url("../img/skyheader.png");
	height:120px; el alto de la franja azul header */
}

.navbar-header .navbar-text {
    color: #ffffff;
}

.navbar-right {
    background-color: #80d4ff;
    opacity: 0.4;
}

.navbar-inverse .navbar-nav > li > a {
    height: 70px;
    color: #ffffff;
    /*top:45px;  distancia a la que a aprecerá el menuright*/
    font-size: 16px;
    font-weight: bold;
}


.navbar .navbar-nav > li > a {
    height: 70px;
    color: #ffffff;
    /*top:45px;  distancia a la que a aprecerá el menuright*/
    font-family: "Flexo", sans-serif;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff; /* color de fondo al pasar el mouse en el naver right*/
    background-color: #808080; /*#7F1119;*/
}

@media (min-width: 768px) {
    /* Navbar positioning foo */
    .navbar-wrapper {
        margin-top: 20px;
        height: 70px;
    }

    .navbar-wrapper .container {
        height: 70px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .navbar-wrapper .navbar {
        padding-right: 0;
        padding-left: 0;
    }

    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {
        border-radius: 4px;
        height: 70px;
    }

    /* Icono instagram con TRANSICIÓN opción 1  idea medio tomada de https://kadumweb.com/crear-sprite-css-ejemplo-mejora-seo/*/
    .instagram64 {
        width: 44px;
        height: 44px;
        /*background: transparent url("../images/Instagram-44.png");*/
        background-position: 0 0;
        transition-property: background-position;
        transition-duration: .1s;
        transition-timing-function: ease-out;
        float: left;
    }

    /* Icono twitter CON TRANSICIÓN opción 2 */
    .twitter {
        width: 44px;
        height: 44px;
        /*background: transparent url("../images/Twitter-44.png");*/
        background-position: -44px 0;
        transition: background-position .1s ease-out;
        float: left;
    }

    /* Icono youtube con TRANSICIÓN opción 1 */
    .youtube {
        width: 44px;
        height: 44px;
        /*background: transparent url("../images/Youtube-44.png");*/
        background-position: -88px 0;
        transition-property: background-position;
        transition-duration: .1s;
        transition-timing-function: ease-out;
        float: left;
    }

    /* Icono facebook CON TRANSICIÓN opción 2 */
    .facebook {
        width: 44px;
        height: 44px;
        /*background: transparent url("../images/Facebook-44.png");*/
        background-position: -132px 0;
        transition: background-position .1s ease-out;
        float: left;
    }

    .instagram64:hover {
        background-position: 0 -44px;
    }

    .twitter:hover {
        background-position: -44px -44px;
    }

    .youtube:hover {
        background-position: -88px -88px;
    }

    .facebook:hover {
        background-position: -132px -44px;
    }

    .contenedor a {
        margin: 10px;
    }

    .test {
        font-size: 10px;
    }
}

.font-calibri {
    font-family: "Calibri Light", sans-serif !important;
    font-weight: 200 !important;
    font-size: 25px !important;
}

li.nav-item a.btn-round {
    font-size: 14px !important;
    margin-top: 12px !important;
}

section .row {
    margin-right: 0;
    margin-left: 0;
}

/**
* Styles for the-curve page
*
*/
/* esto es la ruedita del loader gif se llama como <div class="loader"></div> */
.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

#loadergif {
    position: absolute;
    left: 500px;
    top: 45px;
    z-index: 1100;
    visibility: hidden;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

div.google-visualization-tooltip {
    width: 90px !important;
    height: 65px !important;
    left: 42% !important;
    top: 51% !important;
    font-size: 375% !important;
    background-color: transparent;
    color: #ffffff;
    border: 0 transparent;
    text-align: center;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    z-index: 0;
}

.division {
    max-width: 100%;
}

.division label.radio-inline {
    font-size: 20px !important;
}

label.radio-inline input[type=radio] {
    margin-top: 6px;
}

label#conferenceschool {
    font-size: 20px;
}

/**
* Styles for my-profile page
*
*/

ul.personal_info strong {
    font-weight: 300;
    width: 90px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    color: grey;
}

ul.personal_info_medium strong {
    font-weight: 300;
    width: 140px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    color: grey;
}

ul.personal_info_long strong {
    font-weight: 300;
    width: 200px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    color: grey;
}

ul.personal_info span, ul.personal_info_medium span, ul.personal_info_long span {
    font-weight: 400;
}



/**
* Styles for update-times page
*
*/

.more_times_page_container #pedirtiempos select.form-control {
    height: inherit !important;
}

.more_times_page_container #pedirtiempos label {
    font-size:11px;
    padding:2px;
    font-weight: bold;
}

label.custom-file-label {
    font-weight: 400;
}

#times_form .input-group {
    margin-bottom: 10px;
}

#listatipoevento select#event1selected {
    height: auto;
}

.timeinputs select#course1selected {
    height: auto;
}

select#event1selected option#evento1 {
    white-space: normal;
    height: 65% !important;
    font-size: 90% !important;
    padding: 6px !important;
}

.timeinputs {
    display: inline-block;
    text-align: center;
}

.timeinputs .input-group label {
    color: gray;
    font-size:11px;
    padding:2px;
}

.timeinputs .input-group input[type=number] {
    width:60px;
    font-size:11px;
}