/*local para não precisar importar a classe inteira somente por causa das tagas do breadcrumb, classe de origem:  css/local/Bootstrap/bootstrap.css*/
.breadcrumb {
    position: relative;
    padding: 12px 15px;
    margin: 0 0 20px;
    list-style: none;
    background-color: #f5f5f5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .breadcrumb li {
        display: inline-block;
        text-shadow: 0 1px 0 #fff;
    }

    .breadcrumb .divider {
        padding: 0 5px;
        color: #ccc;
    }

    .breadcrumb .active {
        color: #999;
    }

/*customização*/
    .breadcrumb > li + li:before {
        color: #919191;
        content: "\2771\00a0";
        padding: 0 5px;
    }

.ultimoDiretorio {
    color: #737373;
}

.ultimoDiretorio {
    pointer-events: none;
}

a.ultimoDiretorio:link, a.ultimoDiretorio:visited, a.ultimoDiretorio:hover, a.ultimoDiretorio:active {
    text-decoration: none;
}

.breadcrumb span {
    font-size: 12px !important;
}
/*Fixar tamanho da fonte para padronizar, senão o tamanho fica de acordo com cada página*/

.menu_breadcrumb {
    width: 100%;
    padding-top: 90px;
    padding-bottom: 10px;
    float: left;
    height: 40px !important;
}

.menu_breadcrumbSlim {
    width: 100%;
    padding-top: 38px;
    padding-bottom: 10px;
    float: left;
    height: 40px !important;
}

/* ----------------------------------------------------------- CSS Input */

div#openVideoTutorial{
	font-family: "Roboto","Helvetica","Arial",sans-serif;
    cursor: pointer;
	transition: all 0.2s;
	outline: none;
	position:absolute;
	top:6px;
	right:8px;
}

#openVideoTutorial-tooltip {
	font-family: "Roboto","Helvetica","Arial",sans-serif;
    position: absolute;
    top: 8px;
    right: 44px;
    padding: 4px 16px;
    border-radius: 4px;
    color: #ffffff;
	background-color: rgba(0, 0, 0, .54);
    font-size: 12px;
    display: none;
    font-weight: normal;
    box-shadow: none;
}

#mainvideoPlayer {
    padding: 16px;
}
/* ----------------------------------------------------------- CSS Modal Custom */
#frame-modal .jcarousel {
    position: relative;
    overflow: hidden;
}

#frame-modal .jcarousel ul {
    width: 1000em;
    position: relative;
    margin: 0;
}

#frame-modal .jcarousel li {
    float: left;
}

#videoList {
    background-color: #000000;
    padding: 16px;
    border-radius: 0 0 8px 8px;
}

    #videoList p {
	margin-bottom: 0px !important;
	margin-top: 4px !important;
}
	
    #videoList ul {
        list-style: none;
}

#videoList ul li {
            width: 169px;
            margin-right: 24px;
            opacity: .27;
}

#videoList ul li:hover {
                opacity: 1;
	cursor: pointer;
}

            #videoList ul li img {
                width: 100%;
                border-radius: 4px;
}

#videoList-prev {
    position: absolute;
    top: 420px;
    left: -12px;
    background-color: 000000 !important;
    width: 24px !important;
    height: 24px !important;
	border-radius: 50%;
	cursor: pointer;
}

    #videoList-prev i {
        margin-top: 8px;
        margin-left: 6px;
        color: rgba(255, 255, 255, 1) !important;
        font-size: 24px !important;
}

#videoList-next {
    position: absolute;
    top: 420px;
    right: -12px;
    background-color: 000000 !important;
    width: 24px !important;
    height: 24px !important;
	border-radius: 50%;
	cursor: pointer;
}

    #videoList-next i {
        margin-top: 8px;
        margin-left: 6px;
        color: rgba(255, 255, 255, 1) !important;
        font-size: 24px !important;
}

#closePlayer {
    position: absolute;
    top: -24px;
    right: -24px;
	cursor: pointer;
}

    #closePlayer i {
        color: #ffffff;
        font-size: 24px;
}

/* ----------------------------------------------------------- CSS Modal Default */
#frame-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.87);
	position: fixed;
    top: 0;
    z-index: 999;
    font-size: 12px;
    left: 0;
}

    #frame-modal a {
        text-decoration: none;
        color: rgba(0, 0, 0, 0.54);
}

#modal-container {
	font-family: "Roboto","Helvetica","Arial",sans-serif;
    width: 610px;
    border-radius: 8px;
    margin: 120px auto;
	 -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.5s;
    animation-name: animatetop;
    animation-duration: 0.5s;
}

.modal-content {
    background-color: #ffffff;
    border-radius: 8px 8px 12px 12px;
    color: #fff;
    padding: 0;
    position: relative;
}

.modal-close {
    padding: 24px;
    background-color: #ffffff;
    border-radius: 0 0 4px 4px;
}

    .modal-close a {
	color: rgba(0, 0, 0, 0.54);
	transition: all 0.5s;
	outline: none;
}

        .modal-close a:hover {
	color: rgba(0, 0, 0, 0.87);
	transition: all 0.5s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -500px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -500px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

#frame-modal.modal {
    margin-left: 0 !important;
}