/*ESTILOS DOCK*/
/* dock - top */
.dock {
    left: 37%;
    margin-top: 0%; 
    height: auto; 
    text-align: center;
}
.dock-container {
    text-align: justify;
}
.dock-container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.dock-container:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li {
    display: inline-block;
    margin-right: -.25em;
    position: relative;
    top: 1.25em;
}

@media (min-width: 576px){
    .dock-item img {
        border: none;
        width: 80%;
    }
     .langImgContainer {
        margin-top: 25%;
    }
}
@media (max-width: 575px){
    .dock-item img {
        border: none;
        width: 3.5%;
    }
}

.blackAndWite{
    /*filter: grayscale(80%);*/
}



/*ESTILOS DE CARROUSEL*/
.carousel-control-container-left {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -35px;
    line-height: 48px;
    border-radius: 50%;
    background: #1b1b1b;
    border: 0;
    opacity: 0.5;
    text-shadow: none;
    z-index: 5;
    right:0;
    transition: all 0.2s ease-in-out 0s;
}
.carousel-control-container-rigth {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -35px;
    line-height: 48px;
    border-radius: 50%;
    background: #1b1b1b;
    border: 0;
    opacity: 0.5;
    text-shadow: none;
    z-index: 5;
    left:0;
    transition: all 0.2s ease-in-out 0s;
}
.carousel-control-prev {
    left: -45px;
    width: 42px;
}
.carousel-control-next {
    right: -45px;
    width: 42px;
}
.modal-body {
    padding: 45px;
    padding-top: 5px;
}
@media (min-width: 576px){
    .modal-dialog {
        max-width: 600px;
        margin: 30px auto;
    }
}
.carousel-item {
    position:relative;
    width: 100%;
    display: none;
    background-color: #FFF;
}

.carousel-indicators li {
    height: 15px;
    max-width: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: rgba(204,204,204,.5);
}
.carousel-indicators .active {
    background-color: rgba(0,0,0,.8);
}
.carousel-indicators {
    bottom: -38px;
}
.carousel-extra-border{
    border: 1px solid #eceeef;
    width: 100%;
    padding: 5px;
}

.yt-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.yt-container iframe, .yt-container object, .yt-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


.background {
    width: 100%;
    background-color: #5BA6F6;
    /*height: 3473px;
    background: url(../img/fondo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;*/
}
.bg-wrapper > img {
    width: 100%;
}

.p4r_container:hover .componentes {
    opacity: 1;
    cursor: pointer;
}

.p4r_container:hover .middle {
    /*opacity: 1;*/
}
.p4r_container{
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
}

.artefact-container{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.componentes {
    opacity: 0.9;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.text {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

.audio-img-wrapper{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
}

@-webkit-keyframes slideIn {
    0% {
        transform: translateX(-900px);
    }
    100% {
        transform: translateX(0);
    }
}
@-moz-keyframes slideIn {
    0% {
        transform: translateX(-900px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slideIn {
    0% {
        transform: translateX(-900px);
    }
    100% {
        transform: translateX(0);
    }
}

.bid-logo-wrapper{
    left: 1%;
    margin-top: 2%;
    right: 80%;
    width: 20%;
    height: 10%;
}

@media (min-width: 576px){
    .bid-language-wrapper{
        margin-top: 3%;
        left: 97.5%;
    }
}
@media (max-width: 575px){
    .bid-language-wrapper{
        margin-top: 7.5%;
        left: 1%;
        z-index: 999;
    }
}

.pm4r-logo-wrapper{
    margin-top: 3%;
    right: 5%;
    width: 10%;
    height: 13%;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

.tractor-wrapper{
    left: 68%;
    margin-top: 29.5%;
}
#tractor {
    height: auto;
    max-width: 85%;
    width:85%;
}

.documentos-wrapper{
    left: 21%;
    margin-top: 31.3%;
    right: 29%;
}
#documentos {
    height: auto;
    max-width: 85%;
    width:85%;
}

.flag-helper{
    width: 28%;
    height: 8.5%;
    position: absolute;
    top: 0;
    cursor: pointer;
}

/*PASO 1 - EDT*/
.edt-wrapper {
    right: 82%;
    margin-top: 41%;
}
#edt{
    max-width: 90%;
    width: 90%;
    max-height: 90%;
    height: 90%;
}
.flag-edt{
    margin-top: 48.5%;
    left: 17.5%;
}



.tiempos-wrapper{
    right: 60%;
    left: 15.5%;
    margin-top: 72.7%;
}
#tiempos{
    max-width: 85%;
    max-height: 90%;
    width: 85%;
    height: 90%;
}
.flag-tiempos{
    left: 40%;
    margin-top: 69.6%;
}


.costos-wrapper{
    right: 42.1%;
    left: 33%;
    margin-top: 87.9%;
}
#costos{
    max-width: 80%;
    max-height: 92%;
    width: 80%;
    height: 92%;
}
.flag-costos{
    left: 4.6%;
    margin-top: 102.4%;
}

.adquisiciones-wrapper{
    right: 4%;
    left: 66%;
    margin-top: 77.7%;
}
#adquisiciones{
    max-width: 72%;
    max-height: 90%;
    width: 72%;
    height: 90%;
}
.flag-adquisiciones{
    left: 64.5%;
    margin-top: 95.2%;
}

.riesgos-wrapper{
    left: 75%;
    right: 0%;
    margin-top: 109.5%;
}
#riesgos {
    max-width: 88%;
    max-height: 90%;
    width: 88%;
    height: 90%;
}
.flag-riesgos{
    left: 70.3%;
    margin-top: 134%;
}

.comunicaciones-wrapper{
    right: 45%;
    left: 25.3%;
    margin-top: 117.5%;
}
#comunicaciones{
    max-width: 75%;
    max-height: 85%;
    width: 75%;
    height: 85%;
}
.flag-comunicaciones{
    left: 26%;
    margin-top: 132.3%;
}

.raci-wrapper{
    right: 69.5%;
    left: 9%;
    margin-top: 137%;
}
#raci{
    max-width: 90%;
    max-height: 90%;
    width: 90%;
    height: 90%;
}
.flag-raci{
    width: 16%;
    left: 0.3%;
    margin-top: 152.6%;
}

.ejecucion-wrapper{
    right: 32%;
    left: 19.5%;
    margin-top: 162%;
}
#ejecucion{
    max-width: 90%;
    max-height: 90%;
    width: 90%;
    height: 90%;
}
.flag-ejecucion{
    width: 16%;
    left: 48%;
    margin-top: 171%;
}

.cierre-wrapper{
    right: 8.5%;
    left: 64%;
    margin-top: 161%;
}
#cierre{
    max-width: 64%;
    max-height: 90%;
    width: 64%;
    height: 90%;
}


/* ------------------------------------- */
/* Preloader styles .................... */
/* ------------------------------------- */
#loading {
    width: 100vw;
    height: 100vh;
    background: #5ba6f6;
    position: fixed;
    z-index: 999;
}
#loading #preloader {
    position: relative;
    width: 100%;
    height: 80px;
    top: calc(50% - 50px);
    text-align: center;
    margin: 0 auto;
}
#loading #preloader:after {
    content: "Cargando los 7 Pasos...";
    /* Text under the circles */
    position: absolute;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1px;
    font-family: Montserrat, "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
    top: 90px;
    width: 100%;
    left: 0;
    right: 0;
    height: 1px;
    text-align: center;
}
#loading #preloader span {
    position: absolute;
    border: 8px solid #c7af63;
    border-top: 8px solid transparent;
    border-radius: 999px;
}
#loading #preloader span:nth-child(1) {
    width: 80px;
    height: 80px;
    left: calc(50% - 40px);
    -webkit-animation: spin-1 1s infinite ease;
    -moz-animation: spin-1 1s infinite ease;
    animation: spin-1 1s infinite ease;
}
#loading #preloader span:nth-child(2) {
    top: 20px;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    -webkit-animation: spin-2 1s infinite ease;
    -moz-animation: spin-2 1s infinite ease;
    animation: spin-2 1s infinite ease;
}

@-webkit-keyframes spin-1 {
    0% {
        -webkit-transform: rotate(360deg);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(180deg);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
}
@-moz-keyframes spin-1 {
    0% {
        -moz-transform: rotate(360deg);
        opacity: 1;
    }
    50% {
        -moz-transform: rotate(180deg);
        opacity: 0.5;
    }
    100% {
        -moz-transform: rotate(0deg);
        opacity: 1;
    }
}
@keyframes spin-1 {
    0% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 1;
    }
    50% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }
}
@-webkit-keyframes spin-2 {
    0% {
        -webkit-transform: rotate(0deg);
        opacity: 0.5;
    }
    50% {
        -webkit-transform: rotate(180deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(360deg);
        opacity: 0.5;
    }
}
@-moz-keyframes spin-2 {
    0% {
        -moz-transform: rotate(0deg);
        opacity: 0.5;
    }
    50% {
        -moz-transform: rotate(180deg);
        opacity: 1;
    }
    100% {
        -moz-transform: rotate(360deg);
        opacity: 0.5;
    }
}
@keyframes spin-2 {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 0.5;
    }
    50% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 0.5;
    }
}