@import url(https://fonts.googleapis.com/css?family=Special+Elite);
.bird-details h1.name,.page-title h1{text-transform:uppercase}
:root{--pure-white:#fff;--transparent-blue:#1994ad79;--bird-info-type-0-button-bg:#1994ad79;--bird-image-type-0-color:#00a651;--bird-info-type-1-button-bg:#00aeef79;--bird-image-type-1-color:#00aeef;--bird-info-type-2-button-bg:#00aeef79;--bird-image-type-2-color:#00aeef;--bird-info-type-3-button-bg:#00aeef79;--bird-image-type-3-color:#00aeef;--bird-info-type-4-button-bg:#00aeef79;--bird-image-type-4-color:#00aeef;--bird-info-type-5-button-bg:#00aeef79;--bird-image-type-5-color:#00aeef;--bird-info-type-6-button-bg:#00aeef79;--bird-image-type-6-color:#00aeef;--hard-green:#1c7923;--green:#00a651;--light-green:#7cc576;--yellow:#dadc24;--dark-yellow:#b0b31b;--light-yellow:#fff568;--red:#f26c4f;--dark-red:#c55a41;--black:#000;--light-grey:#bcbabe;--grey-yellow:#a3a575b9;--orange:#fc922a;--error-bg:#ffa352;--error-x:#ff0000;--error-text:#5d3b01}
body{margin:0;padding:0;background:url(../asserts/background_3.jpg) center center no-repeat fixed;background-size:cover;height:100vh}
.body-type-0{background:url(../asserts/background-type-0.png) center center no-repeat;background-size:cover}
.body-type-1{background:url(../asserts/background-type-1.jpg) center center no-repeat;background-size:cover}
.body-type-2{background:url(../asserts/background-type-2.jpg) center center no-repeat;background-size:cover}
.body-type-3{background:url(../asserts/background-type-3.jpg) center center no-repeat;background-size:cover}
.body-type-4{background:url(../asserts/background-type-4.jpg) center center no-repeat;background-size:cover}
.body-type-5{background:url(../asserts/background-type-5.jpg) center center no-repeat;background-size:cover}
#frmBird,img{width:100%}
.error-popup,.page-title{text-align:center}
/* RPS ORI -> .page-title h1{font-family:'Special Elite',cursive;color:var(--pure-white);font-size:18px;margin-top:5px} */
.page-title h1{font-family:'Special Elite',cursive;color:#efe;font-size:62px;margin-top:35px}
.page-title h2{font-family:'Special Elite',cursive;color:#efe;font-size:18px;margin-top:5px}
/* RPS ORI -> .logo-wrapper .logo{width:5vw;margin:17px} */
.logo-wrapper .logo{width:15vw;margin-top:0px;margin-left:27px;margin-right:27px}
.auspicio-wrapper .logo{width:45vw;margin-top:0px;margin-left:27px;margin-right:27px}
.auspicio-wrapper p{font-family:'Special Elite',cursive;color:#abe3ab;font-size:16px;margin-top:5px;text-align:center}
.buttons-container{width:100%;margin-bottom:15px;padding:0 20px}
.buttons-container .wrapper{width:100%;height:110px;border-radius:50px}
.buttons-container-type-0 .wrapper{background:var(--bird-info-type-0-button-bg)}
.buttons-container-type-1 .wrapper{background:var(--bird-info-type-1-button-bg)}
.buttons-container-type-2 .wrapper{background:var(--bird-info-type-2-button-bg)}
.buttons-container-type-3 .wrapper{background:var(--bird-info-type-3-button-bg)}
.buttons-container-type-4 .wrapper{background:var(--bird-info-type-4-button-bg)}
.buttons-container-type-5 .wrapper{background:var(--bird-info-type-5-button-bg)}
.buttons-container-type-6 .wrapper{background:var(--bird-info-type-6-button-bg)}
.button-container{margin:0 20px}
.button-container .btn{height:55px;width:195px;font-size:28px;font-family:Arial;font-weight:700;border-radius:15px}
.button-container .btn.btn-bird-info-type-0-button,.button-container .btn.btn-primary{color:var(--black);background:var(--yellow);border:var(--yellow)}
.button-container .btn.btn-bird-info-type-1-button,.button-container .btn.btn-bird-info-type-2-button,.button-container .btn.btn-bird-info-type-3-button,.button-container .btn.btn-bird-info-type-4-button,.button-container .btn.btn-bird-info-type-5-button,.button-container .btn.btn-bird-info-type-6-button{color:var(--black);background:#7ddff6;border:var(--yellow)}
.button-container .btn.btn-secondary{color:var(--pure-white);background:var(--red);border:var(--red)}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{background:var(--dark-yellow);border:var(--dark-yellow);color:var(--black);background-color:var(--light-grey);border-color:var(--light-grey)}
.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{background:var(--dark-red);border:var(--dark-red);color:var(--pure-white)}
.btn-primary.focus,.btn-primary:focus{box-shadow:none}
button.btn.btn-primary.enterURLbutton{background:var(--light-grey);border-color:var(--light-grey);width:65px;height:55px;border-radius:6px}
button.btn.btn-warning.abortURLbutton{width:65px;height:55px;border-radius:6px;background:var(--orange);border-color:var(--orange);color:#fbf300;margin-left:10px}
button.btn.btn-primary.enterURLbutton>img{width:90%;height:auto}
.buttons-container input#urlInput{height:55px;border-radius:6px;background:var(--light-yellow);border-color:var(--light-yellow)}
.buttons-container input#urlInput,.buttons-container input#urlInput::placeholder{font-size:26px;font-family:Arial;font-weight:700;color:var(--grey-yellow)}
.url-expanded .button-container:first-child,.url-expanded .button-container:nth-child(2),.url-expanded .input#urlInput{margin-right:8px}
.url-expanded .button-container:nth-child(2),.url-expanded .button-container:nth-child(3){margin-left:8px}
span.back-arrow{display:none;color:var(--pure-white);font-size:20px;cursor:pointer}
button.btn.btn-primary.abortButton,button.btn.btn-primary.uploadButton{background-color:var(--red);border-color:var(--red);color:var(--pure-white)}
button.btn.btn-primary.processButton{background-color:var(--green);border-color:var(--green);color:var(--pure-white)}
.process-abort-expanded .button-container:nth-child(2){margin-right:15px}
.process-abort-expanded .button-container:first-child{margin-left:15px}
.processing-expanded h3.label{font-family:Arial;font-weight:700;font-size:30px;margin-bottom:10px;color:#d1fecb}
.bird-details h1,.navigation #menuToggle #menu{font-family:'Special Elite',cursive}
.processing-expanded .processing-bar{position:relative;width:300px;height:22px;border-radius:15px;background-color:var(--light-green)}
.processing-expanded span.processing-cursor{position:absolute;width:45px;height:100%;background:var(--light-yellow);border-radius:15px;top:0;left:0;animation:moving 4s infinite}
.bird-image,.bird-image img{border-radius:50%}
.container{cursor:pointer;color:#fff;position:absolute;display:inline-block;top:45px;z-index:2;left:20px;width:auto}
.container-birdlogo{cursor:pointer;color:#fff;position:absolute;display:inline-block;top:35px;z-index:2;right:10px;width:auto}
.container-birdlogo img{width:75%}
.bar1,.bar2,.bar3{width:35px;height:5px;background-color:#fff;margin:6px 0;transition:.4s}
.navigation{z-index:1;height:100%;position:absolute;overflow-x:hidden;background:url(../../asserts/menu_bg.jpg);width:250px;display:none}
.navigation #menuToggle{position:absolute;top:100px;left:30px;z-index:1}
.navigation #menuToggle #menu{margin:0;padding:0;list-style:none}
.navigation #menuToggle #menu li{font-size:22px;margin-bottom:10px}
.navigation #menuToggle #menu li a{text-decoration:none;color:#eeedeb}
.navigation #menuToggle #menu li a:hover{color:#e3305a}
@keyframes moving{0%{left:0}
50%{left:calc(100% - 45px)}
}
#dragButton{width:55vw}
.image-wrapper{max-width:40vw}
.image-wrapper-vertical{max-width:20vw}
.bird-image img{height:auto;width:28vw}
.bird-image-type-0 img{border:10px solid var(--bird-image-type-0-color)}
.bird-image-type-1 img{border:10px solid var(--bird-image-type-1-color)}
.bird-image-type-2 img{border:10px solid var(--bird-image-type-2-color)}
.bird-image-type-3 img{border:10px solid var(--bird-image-type-3-color)}
.bird-image-type-4 img{border:10px solid var(--bird-image-type-4-color)}
.bird-image-type-5 img{border:10px solid var(--bird-image-type-5-color)}
.bird-image-type-6 img{border:10px solid var(--bird-image-type-6-color)}

.bird-details{padding-left:120px}

# [2020.01.30 RPS]
# .bird-details h1{color:var(--pure-white);font-size:22px;letter-spacing:2px}
# .distr-map>img{height:250px;width:auto}
# .play-sound{margin-bottom:-5px;cursor:pointer}
# .play-sound>img{height:60px;width:auto}
.bird-details h1{color:var(--pure-white);font-size:22px;letter-spacing:0;width:100%}
.bird-details h1 span.column-one,.bird-details h1 span.column-two{width:50%;float:left}
#.bird-details h1 span.column-one {width:45%;float:left}
#.bird-details h1 span.column-two {width:55%;float:left}
.bird-details h1.bird-sound span.column-two{width:290px}
.bird-details h1.bird-sound span.column-two audio{width:100%}
.bird-details h1.distr-map span.column-one{vertical-align:top}
.bird-details h1.distr-map span.column-two{width:235px}
.bird-details h1.distr-map span.column-two audio{width:100%}

#dragUploadContainer{display:inherit}
#urlContainer{display:contents}
#birdContainer,#buttonContainer,#processingContainer{display:none!important}
.error-popup{position:absolute;font-size:24px;font-family:Arial;background:var(--error-bg);color:var(--error-text);top:110px;left:0;width:calc(100% - 67px);border-radius:6px;line-height:50px;padding:35px 0;z-index:100;display:none}
.error-popup>p{margin:0}
.error-popup>span#close-error{content:'';position:absolute;top:-13px;right:-13px;width:30px;height:30px;background:var(--error-x);border-radius:50%;border:2px solid #a0410d;cursor:pointer;color:#fff;display:flex;justify-content:center;align-items:center;font-size:14px}
div#buttonContainer,div#processingContainer,div#uploadContainer{background:var(--bird-info-type-0-button-bg)}
@media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (orientation:landscape){.image-wrapper{max-width:40vw}
}
@media screen and (max-width:600px){span.back-arrow{display:block}
.urlButton{display:none}
.button-container{margin:0 25px}
.wrapper.d-flex.flex-row-reverse.process-abort-expanded{justify-content:space-between}
.logo-wrapper .logo{width:45vw!important;margin:10px}
}
@media screen and (max-width:500px){.bird-details h1{font-size:18px;letter-spacing:0;margin-bottom:15px}
.page-title h1{font-size:36px;width:60%;margin:35px auto 0}
.logo-wrapper{flex-direction:column!important;display:flex!important;align-items:center}
.button-container .btn{height:40px;width:100px;font-size:15px;font-family:Arial;font-weight:700;border-radius:15px}
.buttons-container input#urlInput,.buttons-container input#urlInput::placeholder{height:40px;font-size:15px}
button.btn.btn-primary.enterURLbutton,button.btn.btn-warning.abortURLbutton{height:40px;width:40px}
button.btn.btn-primary.enterURLbutton>img{width:80%}
.buttons-container .wrapper{bottom:15px;height:90px}
.button-container{margin:0 20px}
.processing-expanded h3.label{font-size:15px}
.bird-details{padding-left:20px!important}
}
@media screen and (min-width:501px) and (max-width:767px){.page-title h1{font-size:40px}
.logo-wrapper .logo{width:31vw;margin:10px}
.logo-wrapper{display:flex;flex-direction:column;align-items:center}
.button-container{margin:0 35px}
.button-container .btn{width:165px;height:50px;font-size:23px}
.bird-details{padding-left:50px!important}
.buttons-container .wrapper{height:95px}
}
@media screen and (max-width:400px){.buttons-container .wrapper{height:60px}
.processing-expanded h3.label{margin-bottom:5px}
.processing-expanded .processing-bar{height:15px;width:calc(100vw - 90px)}
}
@media screen and (max-width:350px){.bird-details h1{font-size:15px}
.bird-details{margin-top:25px;padding:0 15px}
.bird-image img{width:200px;height:200px}
}
@media screen and (max-width:1260px){#dragButton{width:55vw}
}
@media screen and (min-width:921px) and (max-width:1180px){#dragButton{width:50vw;font-size:20px}
#uploadButton,#urlButton{font-size:20px;width:150px}
.image-wrapper{max-width:40vw!important}
.bird-image img{width:35vw}
.bird-details{padding-left:100px!important}
.distr-map>img{height:200px;width:auto}
}
@media screen and (max-width:1024px){#dragButton{display:none}
.container{top:15px}
.container-birdlogo{top:10px;right:20px;text-align:right}
.container-birdlogo img{width:25%}
}
@media screen and (max-width:920px){.image-wrapper{max-width:75vw!important}
.bird-details{padding-left:70px}
.distr-map>img{height:170px;width:auto}
.bird-details h1{font-size:25px}
}
@media screen and (max-width:830px){.bird-details h1{font-size:15px}
}
@media screen and (max-width:575px){.uploaded-image-wrapper{flex-direction:column;align-items:center}
}
@media only screen and (min-device-width:320px) and (max-device-height:680px) and (orientation:landscape){.page-title h1{font-size:29px;margin-top:15px}
.bird-details-wrapper{flex-direction:row!important;margin-top:0;margin-bottom:0;height:100%}
.buttons-container .wrapper{height:45px}
.processing-expanded h3.label{font-size:15px;margin-bottom:5px}
.processing-expanded .processing-bar{height:15px}
.button-container .btn.btn-primary,.button-container .btn.btn-secondary,.button-container .btn.btn-warning,.buttons-container input#urlInput,.buttons-container input#urlInput::placeholder,button.btn.btn-primary.abortButton,button.btn.btn-primary.enterURLbutton,button.btn.btn-primary.processButton,button.btn.btn-primary.uploadButton,button.btn.btn-primary.urlButton{height:35px!important;font-size:15px}
.homepage-buttons-wrapper .button-container:nth-child(2),.process-abort-expanded .button-container:nth-child(2){margin-right:15px}
.button-container:first-child,.process-abort-expanded .button-container:first-child,.upload-expanded .button-container:first-child,.url-expanded .button-container:first-child{margin-left:15px;margin-right:15px}
button.btn.btn-primary.enterURLbutton>img{width:60%}
.enterURLbutton-wrapper{margin-right:15px!important}
.button-container .btn{width:120px}
.image-wrapper{max-width:25vw!important}
.bird-details{margin:0;padding-left:25px!important}
.bird-details h1{font-size:20px}
.bird-image img{width:50%;height:auto;border-width:5px}
.bird-image{text-align:center}
}
@media only screen and (max-device-width:600px) and (orientation:portrait){.buttons-container .wrapper{height:60px}
.page-title h1{font-size:30px}
.logo-wrapper .logo{width:60vw;margin:10px}
.logo-wrapper{display:flex;flex-direction:column;align-items:center}
}
@media screen and (min-width:1600px){.distr-map>img{height:300px}
.bird-details{padding-left:250px!important}
}
@media screen and (max-width:767px){.bird-details-wrapper{order:2}
.bird-image-wrapper{order:1}
.bird-details{padding-left:30px;margin-top:0}
}
@media screen and (min-width:320px) and (max-width:480px) and (orientation:portrait){
.page-title h1{font-size:25px;margin-top:20px;margin-bottom:20px}
.page-title h2{font-size:14px}			// [2020.01.17 RPS] Este es el que se gatilla en moz
.image-wrapper-vertical{max-width:50vw}	// [2020.01.17 RPS] Este es el que se gatilla en moz
.bird-details h1{font-size:15px}
.buttons-container .wrapper{height:55px}
#uploadButton{width:auto}
.buttons-container{padding:0 5px}
.bird-details h1 span.column-one,.bird-details h1.bird-sound span.column-two,.bird-details h1.distr-map span.column-two{width:50%}
.bird-details h1.bird-sound span.column-one{vertical-align:top}
}
@media screen and (min-width:320px) and (max-width:480px) and (orientation:landscape){
.page-title h1{font-size:25px;margin-top:20px;margin-bottom:20px}
.page-title h2{font-size:14px}			// [2020.01.17 RPS] Este es el que se gatilla en moz
.image-wrapper-vertical{max-width:50vw}	// [2020.01.17 RPS] Este es el que se gatilla en moz
.bird-details h1{font-size:15px}
.buttons-container .wrapper{height:55px}
.bird-image img{width:30vw!important;border-width:5px}
.content-wrapper .container-fluid>.row:nth-child(2){flex-direction:row!important;flex-wrap:nowrap!important}
.bird-details-wrapper{order:1;max-height:150px;justify-content:center}
.bird-image-wrapper{order:2;max-height:150px;justify-content:center}
.bird-details{padding-left:30px;margin-top:15px}
#uploadButton{width:auto}
.buttons-container{padding:0 5px}
}
@media screen and (min-width:320px) and (max-width:568px) and (orientation:portrait){
.page-title h1{font-size:25px;margin-top:20px;margin-bottom:20px}
.page-title h2{font-size:14px}			// [2020.01.17 RPS] Este es el que se gatilla en moz
.image-wrapper-vertical{max-width:50vw}	// [2020.01.17 RPS] Este es el que se gatilla en moz
.bird-details h1{font-size:15px}
.buttons-container .wrapper{height:55px}
.content-wrapper .container-fluid>.row:nth-child(2){padding-bottom:30px}
.bird-image img{width:90%;height:90%}
.bird-image{text-align:center}
}
@media screen and (min-width:320px) and (max-width:568px) and (orientation:landscape){
.page-title h1{font-size:25px;margin-top:20px;margin-bottom:20px}
.page-title h2{font-size:14px}			// [2020.01.17 RPS] Este es el que se gatilla en moz
.image-wrapper-vertical{max-width:50vw}	// [2020.01.17 RPS] Este es el que se gatilla en moz
.bird-details h1{font-size:15px}
.buttons-container .wrapper{height:55px}
.bird-image img{width:90%;height:auto;border-width:5px}
.content-wrapper .container-fluid>.row:nth-child(2){flex-direction:row!important;flex-wrap:nowrap!important;padding-bottom:30px}
.bird-details-wrapper{order:1;max-height:150px;justify-content:center}
.bird-image-wrapper{order:2;max-height:150px;justify-content:center}
.bird-details{padding-left:30px;margin-top:15px}
.button-container .btn{width:165px;height:45px;font-size:20px}
#urlButton{width:85px}
.bird-details h1 span.column-one,.bird-details h1.bird-sound span.column-two,.bird-details h1.distr-map span.column-two{width:50%}
.bird-details h1.bird-sound span.column-one{vertical-align:top}
}
@media screen and (min-width:375px) and (max-width:667px) and (orientation:portrait){
.page-title h1{font-size:30px;margin-top:30px;margin-bottom:20px}
.bird-image{border-radius:50%;text-align:center}
.buttons-container .wrapper{height:55px}
.content-wrapper .container-fluid>.row:nth-child(2){padding-bottom:30px}
.bird-image img{width:85%}
.bird-details h1{font-size:17px;margin-bottom:0}
.bird-details h1.bird-sound span.column-one{vertical-align:top}
.bird-details h1 span.column-one{width:50%}
.bird-details h1.bird-sound span.column-two,.bird-details h1.distr-map span.column-two{width:175px}
}
@media screen and (max-width:500px){.error-popup{padding:15px 0;font-size:17px;top:90px}
}
@media only screen and (min-device-width:320px) and (max-device-height:640px) and (orientation:landscape){.error-popup{padding:15px 0;font-size:17px;top:90px}
}
@media only screen and (device-width:320px) and (device-height:480px) and (orientation:portrait){.error-popup{padding:12px 0;font-size:16px}
}
@media only screen and (device-width:320px) and (device-height:480px) and (orientation:landscape){.error-popup{padding:12px 0;font-size:16px}
}
@media only screen and (max-device-height:680px) and (min-device-width:320px) and (orientation:landscape){.bird-image.bimg{width:25%}
#newBird{width:auto}
}
@media only screen and (device-width:823px) and (device-height:411px) and (orientation:landscape){
.bird-image.bimg{width:70%}
.bird-image.bimg img{width:100%}
.bird-details h1{font-size:17px;margin-bottom:0}
.bird-details h1.bird-sound span.column-one{vertical-align:top}
.bird-details h1 span.column-one{width:50%}
.bird-details h1.bird-sound span.column-two,.bird-details h1.distr-map span.column-two{width:195px}
#newBird{height:40px;font-size:20px}
}
@media only screen and (device-width:812px) and (device-height:375px) and (orientation:landscape){
.bird-image.bimg{width:70%}
.bird-image.bimg img{width:100%}
.bird-details{padding-left:0!important;margin-top:15px}
.bird-details h1{font-size:16px}
.bird-details h1 span.column-one{width:50%}
.bird-details h1.bird-sound span.column-two audio{height:30px}
.bird-details h1.distr-map span.column-two img{width:65%}
#newBird{height:40px;font-size:20px}
}
@media only screen and (device-width:736px) and (device-height:414px) and (orientation:landscape){
/* .distr-map-sound.d-flex.flex-row.align-items-end>img{width:25%!important} */
.bird-details h1,.buttons-container.buttons-container-type-0{margin-bottom:0}
.bird-details-wrapper{height:auto}
#newBird,.bird-details h1.bird-sound span.column-two audio{height:40px}
.bird-details h1.bird-sound span.column-one{vertical-align:top}
.bird-details h1.distr-map span.column-two img{width:55%}
#newBird{font-size:20px}
.bird-image img{width:20%}
}
@media only screen and (device-width:414px) and (device-height:736px) and (orientation:portrait){
.bird-details h1 span.column-one{width:50%}
.bird-details h1.bird-sound span.column-two,.bird-details h1.distr-map span.column-two{width:185px}
}
@media only screen and (device-width:731px) and (device-height:411px) and (orientation:landscape){.distr-map-sound.d-flex.flex-row.align-items-end>img{width:35%!important}
.play-sound>audio{height:35px}
.bird-details h1{margin-bottom:0}
}
@media only screen and (device-width:667px) and (device-height:375px) and (orientation:landscape){.distr-map-sound.d-flex.flex-row.align-items-end>img{width:25%!important}
.play-sound>audio{height:35px}
.bird-details h1{margin-bottom:0}
}
@media only screen and (device-width:640px) and (device-height:360px) and (orientation:landscape){.distr-map-sound.d-flex.flex-row.align-items-end>img{width:25%!important}
.play-sound>audio{height:35px}
.bird-details h1{margin-bottom:0}
}
@media screen and (max-width:414px){.bird-image.bimg{width:55%}
}