@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@500&display=swap');
 html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video,details,summary {
     background:transparent;
     border:0;
     font-size:100%;
     margin:0;
     padding:0;
}
html {
    height: 100%;
    background-color: #121212;
    background-repeat: no-repeat;
    background-size: cover; /* Make the background image cover the viewport */
    background-attachment: fixed;
}


.container:not(#header-container):not(#footer-container) {
    margin-left: 40px;
    margin-right: 40px;
	margin-bottom: 50px;
}
 .preload * {
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -ms-transition: none !important;
     -o-transition: none !important;
}

.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

 svg{
     filter: drop-shadow(1px 1px 0px rgb(0 0 0 / 0.25));
}
 header {
     font-family: 'Catamaran', sans-serif;
     text-shadow: 1px 1px rgb(0 0 0 / 0.25);
     text-align: center;
     z-index: 10;
     top: 0;
	 box-shadow: 0 2px 2px 0px #7d611d;
	 transition: transform 0.3s ease-in-out;
}
 header ul li{
     min-width: 72px;
}
 html::-webkit-scrollbar {
     display:none 
}
 .b-example-divider {
     height: 3rem;
     background-color: rgba(0, 0, 0, .1);
     border: solid rgba(0, 0, 0, .15);
     border-width: 1px 0;
     box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
 .bi {
     vertical-align: -.125em;
     fill: currentColor;
}
 .text-small {
     font-size: 85%;
}
 .dropdown-toggle {
     outline: 0;
}
 .bg-orange {
     background-color: #FF9E0E !important;
}
 .text-opacity {
     opacity: 0.6;
}
 .text-selected {
     background-image: radial-gradient(circle at center, #EBEBEB 1px, transparent 2px);
     background-position-y: 91px;
}
 a:hover,a:focus {
     opacity:1;
}	 

main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: radial-gradient(#ffffff 40%, transparent 0%), radial-gradient(#ffc64f 40%, transparent 0%);
    background-color: #000000;
    background-position: 0px 11px, 7px -9px;
    background-size: 7px 40px;
    /* height: 200px; */
    width: 100%;
    flex-wrap: nowrap;
}

#home {
    max-width: 1400px;
    background-color: #fff;
    padding-top: 50px;
    background: #121212;
    background: url(default-bg.png) repeat;
}

@media screen and (min-width: 1400px) {
    #home {
        margin-right: auto;
        margin-left: auto;
    }
	header {
		position: sticky;
	}
	
}

@media screen and (max-width: 1400px) {
	.container {
		margin-left: auto !important;
		margin-right: auto !important;
	}	
}

@media screen and (max-width: 991px) {	
	.hide-lowres {
		display : none;
	}
	
	.show-lowres {
		display : flex;
	}
}

@media screen and (min-width: 991px) {	
	.hide-lowres {
		display : flex;
	}
	
	.show-lowres {
		display : none;
	}
	
}



footer{
     font-family: 'Catamaran', sans-serif;
     font-weight: 500;
     background:#FF9E0E;
     bottom:0;
     clear:both;
     height:80px;
     left:0;
     overflow:hidden;
     padding-top:25px;
     position:inherit;
     right:0;
     width:100%;
     z-index:10;
     font-size:11px;
     text-shadow: 1px 1px rgb(0 0 0 / 0.25);
     margin: 0 auto;
}

.push{
	/*height: 128px;*/
	height: 80px;
	z-index: -100;
}

 .footer-logo {
     position:absolute;
     height:40px;
     width:40px;
     z-index:20;
}
 footer ul .link {
     padding: 0 26 0 0;
     color: inherit;
     text-decoration:none;
}
 footer ul .link:hover,:focus {
     text-decoration:underline;
}
 footer ul li:not(:first-child) {
     list-style: square;
}
 .intro {
     text-align: center;
     padding-bottom: 50px;
}
/*--*/
 #banner {
     width:100%;
     height:400px;
     background:#FF9E0E;
     border-radius: 15px;
     border-width:3px;
     border-style:solid;
     border-color:#121212;
     outline: 3px solid #EBEBEB;
     text-decoration: none;
     object-fit: cover;
     background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.85) ), url(banner.png);
     background-size: cover;
     background-position: center;
     font-family: 'Source Sans Pro', sans-serif;
}
 #banner a:hover, a:visited, a:link, a:active{
     text-decoration: none !important;
}
 #banner .logo {
     background: url(logo.png);
    /* position: relative;
     */
     width: 500px;
     height: 136px;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     transform: translate(0, 25%);
     transition: transform 0.175s;
    /* Animation */
    /* background-position: center;
     */
    /* display: block;
     */
     margin: auto;
}
 #banner .logo:hover {
     transform: translate(0, 25%) scale(1.025);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
 #banner .title {
    /* position: relative;
     */
     top: 100%;
     transform: translate(0, 173px);
     color: #EBEBEB;
    /* text-align: left;
     */
     font-family: 'Source Sans Pro', sans-serif;
     text-shadow: 2px 2px rgb(0 0 0);
}
 #banner .title h1 {
     text-transform: uppercase;
     margin: 0;
     font-size: 1.75rem;
     white-space: nowrap;
}
 #banner .title p {
     margin: 0;
     font-size: 0.8rem;
}
 #vv {
    border-left: 5px solid #EBEBEB;
    /* height: 104px; */
    margin-left: 25px;
    padding-bottom: 2px;
}
 #vv .title {
    color: #EBEBEB;
    margin-left: 20px;
}
 #vv .title h1 {
    font-size: 2.3rem;
    font-family: monospace;
    letter-spacing: -11px;
}
 #vv .title h2 {
    margin: 0;
    font-size: 1.8rem;
    padding-left: 6px;
}
.joycot {
	background: #00000000;
    color: #EBEBEB;
    padding-left: 10px;
    padding-right: 16px;
    margin-right: 14px;
    transition: 0.1s;
    font-family: fantasy;
	border-radius: 5px 5px 5px 5px;
}
 #vv .title span:hover {
     background-color: #FF9E0E;
     color: #EBEBEB;
}
 #vv-p p {
    /* background: #EBEBEB;
     */
     color: #EBEBEB;
    /* padding-left: 15px;
     */
    /* padding-right: 15px;
     */
    /* margin-left: -20px;
     */
     margin-top: 25px;
     font-weight: 200;
     line-height: 1.4;
     margin-left: 25px;
     margin-right: 50px;
     text-align: justify;
     font-size: 18px;
}
 .mascot {
     background: url(icon-sonucais.png);
    /* width: 100%;
     */
    /* max-height: 170px;
     */
	 max-height: 300px;
     background-size: contain;
     background-position: bottom center;
     background-repeat: no-repeat;
     transform: translate(-35px, 7%);
    /* transition: transform 0.075s;
     */
    /* background-position: center;
     */
    /* display: block;
     */
    /* margin-right: -43px;
     */
    /* margin-left: 50px;
     */
}
 .content-title-projects {
     padding: 55px 0px 5px 18px;
     margin: 0;
     font-size: 18px;
     font-weight: 600;
     color: white;
     border-bottom: 2px solid #FF9E0E;
     margin-bottom: 20px;
}
 .projects {
     width: 100%;
     height: auto;
}
 .projects h3 {
     padding: 6px 0px 0px 0px;
     margin: 0;
     font-size: 21px;
     font-family: Tahoma, Geneva, sans-serif;
     color: #FF9E0E;
}
 .projects .banner {
     width: 100%;
     height: auto;
     border-radius: 5px;
     margin-bottom: 15px;
     -webkit-box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 10%);
     box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 10%);
}

/*
 #project-title {
     padding: 6px 0px 0px 0px;
     margin: 0 0 10px 0;
     font-size: 21px;
     font-family: Tahoma, Geneva, sans-serif;
     color: #FF9E0E;
}

 #project-title a {
     color: #FF9E0E;
}
*/

 .projects p {
     /*margin: 0 0 34px 0;*/
     color: #EBEBEB;
     font-weight: 300;
     font-size: 14px;
     line-height: 1.5;
     text-align: justify;
     text-justify: inter-word;
}

.projects .item {
	padding-left: 18px;
	padding-right: 18px;
	min-height: 126px;
}

.social-links{
	margin-right: 15px;
}

.social-links a{
	color: #FF9E0E;
	margin-left: 4px;
}

#ruffle {
	margin-top:48px;
	height: 400px;
}

.animation-container {
  display: inline-block;
  position: relative;
}

.dot {
  animation: blink 1s infinite;
  margin-left: 10px;
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* Dot is visible */
  }
  50% {
    opacity: 0; /* Dot is invisible */
  }
}

.video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
}

.video-js {
position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}