body
{
	background: #000000;
	color: #999;
	font-family: 'Raleway';
	font-size: 16px;
	font-weight: 400;
}

/* start all section */
#home,
#home .fp-slide,
#home .fp-tableCell,

#work,
#work .fp-slide,
#work .fp-tableCell,

#about,
#about .fp-slide,
#about .fp-tableCell,

#contact,
#contact .fp-slide,
#contact .fp-tableCell,

#portfolio,
#portfolio .fp-slide,
#portfolio .fp-tableCell,

footer,
footer .fp-slide,
footer .fp-tableCell
{
    height: auto !important;
}

/* end all section */

/* start all heading */
h1,h2,h3,h4,h5
    {
        color: #ffffff;
        font-weight: bold;
    }
/* end all heading */

/* start simpletextrotator */
.rotating {
  display: inline-block;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
  -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
  -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
  -o-transform: rotateX(0) rotateY(0) rotateZ(0);
  transform: rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-origin-x: 50%;
}

.rotating.flip {
  position: relative;
}

.rotating .front, .rotating .back {
  left: 0;
  top: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rotating .front {
  position: absolute;
  display: inline-block;
  -webkit-transform: translate3d(0,0,1px);
  -moz-transform: translate3d(0,0,1px);
  -ms-transform: translate3d(0,0,1px);
  -o-transform: translate3d(0,0,1px);
  transform: translate3d(0,0,1px);
}

.rotating.flip .front {
  z-index: 1;
}

.rotating .back {
  display: block;
  opacity: 0;
}

.rotating.spin {
  -webkit-transform: rotate(360deg) scale(0);
  -moz-transform: rotate(360deg) scale(0);
  -ms-transform: rotate(360deg) scale(0);
  -o-transform: rotate(360deg) scale(0);
  transform: rotate(360deg) scale(0);
}

.rotating.flip .back {
  z-index: 2;
  display: block;
  opacity: 1;
  
  -webkit-transform: rotateY(180deg) translate3d(0,0,0);
  -moz-transform: rotateY(180deg) translate3d(0,0,0);
  -ms-transform: rotateY(180deg) translate3d(0,0,0);
  -o-transform: rotateY(180deg) translate3d(0,0,0);
  transform: rotateY(180deg) translate3d(0,0,0);
}

.rotating.flip.up .back {
  -webkit-transform: rotateX(180deg) translate3d(0,0,0);
  -moz-transform: rotateX(180deg) translate3d(0,0,0);
  -ms-transform: rotateX(180deg) translate3d(0,0,0);
  -o-transform: rotateX(180deg) translate3d(0,0,0);
  transform: rotateX(180deg) translate3d(0,0,0);
}

.rotating.flip.cube .front {
  -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);
  -moz-transform: translate3d(0,0,100px) scale(0.85,0.85);
  -ms-transform: translate3d(0,0,100px) scale(0.85,0.85);
  -o-transform: translate3d(0,0,100px) scale(0.85,0.85);
  transform: translate3d(0,0,100px) scale(0.85,0.85);
}

.rotating.flip.cube .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9);
  -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
  -ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
  -o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
  transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
}

.rotating.flip.cube.up .back {
  -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);
  -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
  -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
  -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
  transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
}
/* end simpletextrotator */

/* start home */       
#home
	{
        position: relative;
        overflow: hidden;
        text-align: center;
	}

    .photo-container {
        position: relative;
        width: auto;
        height: auto;
        overflow: hidden;
        padding: 35px 0px;
    }
    
    .background-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: -1; /* Ensure the photo stays behind other content */
    }
    
    .container {
        position: relative;
        z-index: 1; /* Ensure the content stays above the photo */
    }

#home h1
    {
        border: 2px solid #D43F52;
        color: #D43F52;
        display: inline-block;
        letter-spacing: 6px;
        padding: 15px 25px;
        margin: 30px 0;
    }

#home h4
    {
        color: #ffffff;
        letter-spacing: 1px;
        padding: 0px 0px;
        margin: 0px 0;
    }

/* Add a new style for the main heading */
#home .main-heading {
    color: #ffffff;
    display: inline-block;
    letter-spacing: 6px;
    padding: 25px 35px;
    margin-top: 40px;
    margin-bottom: 10px;
}

/* Adjust the padding for the h1 */
#home .h1-name {
    padding-bottom: 10px;
    /* Add or adjust styles as needed */
}

#home .btn
    {
        background: transparent;
        border: 2px solid #D43F52;
        color: #D43F52;
        font-size: 16px;
        font-weight: bold;
        width: 180px;
        height: 60px;
        margin-top: 40px;
        padding-top: 18px;
        transition: all 0.4s ease-in-out;
    }
#home .btn:hover
    {
        background: #D43F52;
        border-color: transparent;
        color: #ffffff;
    }

/* end home */

/* start work */
#work
    {
        background: #1a1a1a;
        padding-top: 5px;
        padding-bottom: 45px;
    }
#work h2
    {
        text-align: center;
    }

#work .media
    {
      margin-top: 10px;
    }
	
#work .media .fa
    {
        border: 2px solid #ffffff;
        border-radius: 50%;
        color: #D43F52;
        font-size: 24px;
        margin-right: 24px;
        width: 60px;
        height: 60px;
        line-height: 55px;
        text-align: center;
        vertical-align: middle;
        transition: all 0.4s ease-in;
    }
#work .media .fa:hover
    {
        background: #ffffff;
        cursor: pointer;
    }
#work .media .media-heading
    {
        font-weight: 600;
        font-size: 20px;
        padding-bottom: 10px;
    }
/* end work */

/* start about */
#about 
    {
        padding-top: 30px;
        padding-bottom: 30px;
    }
#about h4
    {
        padding: 15px 0;
		color: #D43F52;
    }
#about .progress
    {
        border-radius: 4px;
        background: #ffffff;
        height: 4px;
    }
#about .progress .progress-bar-danger
    {
        background: #D43F52;
    }
#about .text-top
    {
        padding-top: 50px;
    }
#about span
    {
        color: #ffffff;
        font-weight: bold;
        display: block;
        padding-bottom: 6px;
    }
#about small
    {
        font-weight: bold;
        float: right;
    }
/* end about */

/* start portfolio */
#portfolio {
    background: #000000;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

#portfolio h4,h5 {
    color: #000000;
}

#portfolio h2 {
    padding-bottom: 30px;
}

#portfolio .portfolio-thumb {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    padding: 0; /* Remove padding */
}

#portfolio .portfolio-thumb img {
    border: 2px solid #D43F52;
}

#portfolio .portfolio-thumb .portfolio-overlay{
    background: #D43F52;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    padding-top: 60px;
    transition: all 0.4s ease-in-out;
}

#portfolio .portfolio-thumb:hover .portfolio-overlay {
    cursor: pointer;
    opacity: 0.8;
    transform: scale(0.9);
}

/* end portfolio */

/* start htb */
#htb {
    background: #000000;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 60px;
    height: auto !important;
}


#htb h2 {
    padding-bottom: 30px;
}

#htb h4,h5 {
    color: #000000;
}

#htb .htb-thumb {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    padding: 0; /* Remove padding */
}

#htb .htb-thumb-hard img {
    border: 2px solid #750000c9;
}

#htb .htb-thumb-medium img {
    border: 2px solid #fbff00;
}

#htb .htb-thumb-easy img {
    border: 2px solid #00ff00;
}

#htb .htb-thumb-hard .htb-overlay-hard{
    background: #750000c9;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    padding-top: 60px;
    transition: all 0.4s ease-in-out;
}

#htb .htb-thumb-hard:hover .htb-overlay-hard {
    cursor: pointer;
    opacity: 0.8;
    transform: scale(0.9);
}

#htb .htb-thumb-medium .htb-overlay-medium{
    background: #fbff00;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    padding-top: 60px;
    transition: all 0.4s ease-in-out;
}

#htb .htb-thumb-medium:hover .htb-overlay-medium {
    cursor: pointer;
    opacity: 0.8;
    transform: scale(0.9);
}

#htb .htb-thumb-easy .htb-overlay-easy{
    background: #00ff00;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    padding-top: 60px;
    transition: all 0.4s ease-in-out;
}

#htb .htb-thumb-easy:hover .htb-overlay-easy {
    cursor: pointer;
    opacity: 0.8;
    transform: scale(0.9);
}

/* end htb */

/* start contact */
#contact {
    text-align: left;
    background-color: #000000;
    padding-top: 60px; 
    padding-bottom: 60px;
}

#contact address {
    padding-bottom: 18px;
}

#contact .contact-title {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 20px;
    color: #ffffff;
}

#contact .fa {
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #D43F52;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    margin-right: 20px;
}

#contact .form-control {
    background: transparent;
    border: 2px solid #999;
    border-radius: 0;
    box-shadow: none;
    color: #ffffff;
    margin-bottom: 20px;
    width: 100%; /* Ensure input fields take up full width */
}

#contact input {
    height: 50px;
}

#contact input[type="submit"] {
    background: #D43F52;
    border: 2px solid transparent;
    color: #ffffff;
    font-weight: bold;
    transition: all 0.4s ease-in-out;
}

#contact input[type="submit"]:hover {
    background: #ffffff;
    color: #D43F52;
}
/* end contact */

/* start footer */
footer
    {
        border-top: 1px solid #090909;
        text-align: center;
        padding-top: 40px;
        padding-bottom: 20px;
    }
footer hr
    {
        width: 100px;
    }
/* end footer */

/* start social icon */
.social-icon
    {
        position: relative;
        padding: 0;
        margin: 0;
    }
.social-icon li
    {
        display: inline-block;
        list-style: none;
    }
.social-icon li a
    {
        border-radius: 50%;
        color: #606060;
        text-decoration: none;
        transition: all 0.4s ease-in-out;
        text-align: center;
        margin-right: 10px;
    }
.social-icon li a:hover
    {
        color: #D43F52;
    }
/* end social icon */
/* Estilos generales */
/* Resetear márgenes predeterminados */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Estilos para la sección de bienvenida */
.welcome-section {
    background-color: #303030;
    padding: 20px;
    padding-bottom: 20px; /* Agrega un espacio de 20px en la parte inferior de cada sección */
}

.welcome-section h2 {
    color: #ffffff; /* Color de texto blanco */
    text-align: center; /* Centra el texto */
    padding-bottom: 20px; /* Agrega un espacio de 20px en la parte inferior de cada sección */    
}
.welcome-section p {
    color: #ffffff; /* Color de texto blanco */
    text-align: center; /* Centra el texto */
    padding-bottom: 10px; /* Agrega un espacio de 20px en la parte inferior de cada sección */
    padding-top: 20px;
}

.welcome-section h1 {
    color: #ffffff; /* Color de texto blanco */
    text-align: center; /* Centra el texto */
    padding-bottom: 20px; /* Agrega un espacio de 20px en la parte inferior de cada sección */
    border-bottom: 2px solid #D43F52; /* Línea roja debajo del h1 */
    padding-bottom: 10px; /* Ajusta el relleno debajo del h1 */
}

/* Estilos específicos para la tabla de posiciones */
.table-section {
    background-color: #303030; /* Cambia el color de fondo de la sección de la tabla */
    margin-bottom: 20px; /* Añade margen inferior */
    padding-bottom: 20px; /* Agrega un espacio de 20px en la parte inferior de cada sección */
}

.table-section h2,
#photos-section h2 {
    padding-bottom: 20px; /* Agrega un espacio de 20px debajo de los títulos */
    text-align: center;
}

table {
    width: 100%;
    max-width: 100%; /* Agregamos un ancho máximo */
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center; /* Centrar todo el texto */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
th {
    background-color: #f2f2f2;
}
tbody tr {
    background-color: #222222; /* Establecer el fondo de todas las filas en negro */
    color: #ffffff; /* Establecer el color del texto en blanco */
}

/* Estilos para el contenedor de las fotos */
.photos-container {
    overflow: hidden;
    position: relative; /* Añadido para asegurar que las flechas de navegación queden correctamente posicionadas */
    margin-bottom: 20px; /* Añade margen inferior */
}

.carousel-container {
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    width: 100%; /* Ajusta el ancho según sea necesario */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel img {
    width: calc(50% - 10px); /* Ancho de una imagen (50% del contenedor) menos el espacio entre las imágenes */
    margin-right: 10px; /* Eliminar el margen derecho para evitar espacio adicional entre las imágenes */
    max-width: 100%;
    height: auto;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 1;
}

.arrow:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.prev {
    left: 25px;
}

.next {
    right: 25px;
}


/* Estilos para el título "FOTOS" */
.carousel-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Estilos para centrar la tabla en dispositivos móviles */
@media only screen and (max-width: 600px) {
    .table-container {
        text-align: center; /* Centra el contenido horizontalmente */
        overflow-x: auto; /* Habilita el desplazamiento horizontal si es necesario */
        max-width: 100%; /* Establece el ancho máximo del contenedor */
    }
    .table {
        display: inline-block; /* Permite que la tabla sea centrada */
    }
}

.top-section {
    text-align: center;
    background-color: #303030; /* Color de fondo gris */
}

.top-section .record {
    background-color: #303030; /* Color de fondo gris */
    padding: 30px; /* Ajusta el relleno según lo necesites */
    margin-bottom: 25px; /* Ajusta el margen inferior según lo necesites */
    display: inline-block;
    border: 3px solid #D43F52; /* Contorno negro */
    color: #ffffff; /* Color del texto */
}

.top-section .record h3 {
    color: #ffffff; /* Color del texto */
    font-weight: normal; /* Elimina el estilo negrita */
    margin-bottom: 10px; /* Agrega espacio entre el h3 y la línea */
    border-bottom: 2px solid #D43F52; /* Línea roja debajo del h3 */
    padding-bottom: 10px; /* Ajusta el relleno debajo del h3 */
}

.top-section .record h4 {
    color: #ffffff; /* Color del texto */
    font-weight: normal; /* Elimina el estilo negrita */
}

.top-section .record a {
    display: inline-block; /* Cambiado a inline-block */
    margin-top: 10px;
    color: #D43F52; /* Color del texto del enlace */
    font-weight: bold;
    border: 3px solid #D43F52; /* Contorno negro */
    padding: 10px 20px; /* Ajusta el relleno del enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.top-section .record a:hover {
    background-color: #D43F52; /* Cambia el color de fondo al pasar el ratón */
    color: #ffffff; /* Cambia el color del texto al pasar el ratón */
}

.top-section h2 {
    margin-bottom: 40px;
    color: #ffffff; /* Color del texto */
    font-weight: bold;
    border-top: 2px solid #D43F52; /* Línea roja debajo del h2 */
    padding-top: 10px; /* Ajusta el relleno debajo del h2 */
}

br {
    display: block;
    margin-top: 1em; /* Establece el espacio mínimo entre líneas */
    content: ""; /* Agrega un espacio en blanco */
}