@charset "UTF-8";
/*
/* Empieza el RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ENCABEZADO */

body{
	font-family: 'Anton', sans-serif;
    background-color: white;
}
.texto{
    color: black;
    text-decoration: none;
    text-align: center;
    }
h1{
    font-size: 10em;
    font-weight: 600px;
    letter-spacing: 1px;
    padding:0.25em 0.25em;
    color: black;

}

h2{
    font-size: 3em;
    font-weight: 50px;
    letter-spacing: 2px;
    padding:0.50em,0.25em;
    color: white;
    text-align: center;
}
h3{
    font-size: 5em;
    font-weight: 8000px;
    letter-spacing: 1px;
    padding:0.50em,0.25em;
    color: white;
}

h4{
    font-size: 2em;
    font-weight: 5px;
    letter-spacing: 1px;
    padding:0.50em,0.50em;
    color: white;
    padding: 50px;
}
h5{
    font-size: 1em;
    font-weight: 5px;
    letter-spacing: 1px;
    padding:0.50em,0.50em;
    padding: 50px;
    text-align: center;
    color: black;
    
}
h6{
    font-size: 2em;
    font-weight: 600px;
    letter-spacing: 1px;
    padding:0.25em 0.25em;
    color: black;

}
h7{
    font-size: 2em;
    font-weight: 600px;
    letter-spacing: 1px;
    padding:0.25em 0.25em;
    color: black;
    text-align: center;
}
h8{
    font-size: 2em;
    font-weight: 600px;
    letter-spacing: 1px;
    padding:0.25em 0.25em;
    color: black;
    text-align: center;
}



/* RELOJ */
.wrap {
width: 100%;
max-width: 1000px;
/*margin:auto;*/
}

.widget {
width: 100%;
margin:4em 1em 5em 1em;
/*margin:32px; */
}

.widget p {
display: inline-block;
line-height: 1em;
}

.fecha {
text-align: center;
font-size:3em;

width: 100%;
color: black;
}

.reloj {
width: 100%;
padding: 5px;
font-size: 3em;
text-align: right;
color: black; 
}

.reloj .caja-segundos {
display: inline-block;
}

.reloj .segundos,
.reloj .ampm {
font-size: 3rem;
display: block;
text-align: right;
}

/*IMAGEN DUOTONO 1 */
.portrait {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  height: 500px;
  position: relative;
  overflow: hidden;
}
.portrait:hover .hover {
  filter: progid:DXImageTransform.Microsoft.Alpha;
  opacity: 100;
}
.portrait:hover .hover-img {
  -moz-transform: translate(var(--translate-x), var(--translate-y));
  -ms-transform: translate(var(--translate-x), var(--translate-y));
  -webkit-transform: translate(var(--translate-x), var(--translate-y));
  transform: translate(var(--translate-x), var(--translate-y));
}

.fill, .hover-img:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.z-10 {
  z-index: 10;
}

.hover {
  -moz-transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -o-transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -webkit-transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.hover-img {
  -moz-transition: opacity, -moz-transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -o-transition: opacity, -o-transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -webkit-transition: opacity, -webkit-transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
  transition: opacity, transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
}
.hover-img:after {
  content: '';
  background-color: #ORANGE;
  mix-blend-mode:#black;
}

.cover-img1 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion1.jpg);
}
.cover-img2 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion2.jpg);
}
.cover-img3 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion3.jpg);
}
.cover-img4 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion4.jpg);
}
.cover-img5 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion5.jpg);
}
.cover-img6 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion6.jpg);
}




/*IMAGEN CON ZOOM IN*/
.geeks {
                        width:600px;
                        height: 600px;
                        overflow: hidden;
                    }

                    .geeks img {
                        transition: 0.2s all ease-in-out;
                    }

                    .geeks:hover img {
                        transform: scale(1.2);
                    }

/*VOLTEAR IMAGEN*/
.espejo:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*IMAGEN PINCHAS Y CAMBIA*/

<style>
	img {cursor:pointer;}
</style>

.btn-outline-{
    background: black;
    font-family: 'Anton', sans-serif;
    border: black;

    }

}

/*BOTONES HOME*/
.boton3:hover {
  background: #ffffff;
  color: #fff !important;
}
.boton3 {
    margin-top: 100px;
    
    }

/*BOTONES FOOTER*/

.button {
        background-color: #white;
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        -webkit-transition-duration: 0.1s; /* Safari */
        transition-duration: 0.1s;
        cursor: pointer;

    
    
}

.button1 {
        background-color: white; 
        color: black; 

}

.button1:hover {
        background-color: #FF9700;
        color: black;

 }

.margen {
    margin-top: 30px;
     }
.alineacion{
    margin-left: 20px;
     }
.enlace{
    text-decoration: none;
    color: black;
     }
/*ADAPTACION A MOVIL*/
@media only screen and (max-width: 768px){
    h1{
    font-size: 4.5em;
    font-weight: 600px;
    letter-spacing: 1px;
    padding:0.25em 0.25em;
    color: black;
    margin-top: 20px;

}
    
    /*reloj*/
    .wrap {
width: 90%;
max-width: 1000px;
/*margin:auto;*/
}

.widget {
width: 100%;
margin:1em 1em 1em 1em;
/*margin:32px; */
}

.widget p {
display: inline-block;
line-height: 1em;
}

.fecha {
text-align: center;
font-size:3em;

width: 100%;
color: black;
}

.reloj {
width: 100%;
padding: 10px;

font-size: 3em;
text-align: right;
color: black; 
}

.reloj .caja-segundos {
display: inline-block;
}

.reloj .segundos,
.reloj .ampm {
font-size: 3rem;
display: block;
text-align: right;
}
.img-fluid{
   max-width:100%;
   height:auto;

    
}
.img1-fluid{
   max-width:0%;
   height:auto;
    
}


    
    h3{
    font-size: 2em;
    font-weight: 8000px;
    letter-spacing: 1px;
    padding:0.50em,0.25em;
    color: white;
    margin-left: 60px;
        
}
.texto{
    color: black;
    text-decoration: none;
    text-align: center;
    }
    h7{
    font-size: 2em;
    font-weight: 600px;
    letter-spacing: 1px;
    color: black;
    text-align: center;
    margin-left: 75px;

}
        h8{
    font-size: 2em;
    font-weight: 600px;
    letter-spacing: 1px;
    color: black;
    text-align: center;
    margin-left: 270px;

}
    .boton3:hover {
  background: #ffffff;
  color: #fff !important;
}
.boton3 {
    margin-top: 5px;
    padding: 10px;
    text-decoration:none;
    font-size: 20px;
    }
    /*IMAGEN DUOTONO 1 */
.portrait {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: 190px;
  position: relative;
  overflow: hidden;
}
.portrait:hover .hover {
  filter: progid:DXImageTransform.Microsoft.Alpha;
  opacity: 100;
}
.portrait:hover .hover-img {
  -moz-transform: translate(var(--translate-x), var(--translate-y));
  -ms-transform: translate(var(--translate-x), var(--translate-y));
  -webkit-transform: translate(var(--translate-x), var(--translate-y));
  transform: translate(var(--translate-x), var(--translate-y));
}

.fill, .hover-img:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.z-10 {
  z-index: 10;
}

.hover {
  -moz-transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -o-transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -webkit-transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  transition: all 380ms cubic-bezier(0.16, 0.01, 0.77, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.hover-img {
  -moz-transition: opacity, -moz-transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -o-transition: opacity, -o-transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
  -webkit-transition: opacity, -webkit-transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
  transition: opacity, transform 320ms cubic-bezier(0.16, 0.01, 0.77, 1);
}
.hover-img:after {
  content: '';
  background-color: #ORANGE;
  mix-blend-mode:#black;
}

.cover-img1 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion1.jpg);
}
.cover-img2 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion2.jpg);
}
.cover-img3 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion3.jpg);
}
.cover-img4 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion4.jpg);
}
.cover-img5 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion5.jpg);
}
.cover-img6 {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url(composicion6.jpg);
}
    .geeks {
                        width:600px;
                        height: 400px;
                        overflow: hidden;
                    }

                    .geeks img {
                        transition: 0.2s all ease-in-out;
                    }

                    .geeks:hover img {
                        transform: scale(1.2);
                    }
    .button {
        background-color:orange;
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        -webkit-transition-duration: 0.1s; /* Safari */
        transition-duration: 0.1s;
        cursor: pointer;

    
    
}

.button1 {
        background-color: white; 
        color: black; 
}

.button1:hover {
        background-color: #FF9700;
        color: black;
    

 }

.margen {
    margin-top: 30px;
     }
.alineacion{
    margin-left: 20px;
     }
.enlace{
    text-decoration: none;
    color: black;
     }

    




    



}