sakrecoer-mother-web/assets/css/frontpage.css

---
---
{% include base.html %}
{% include normalize.css %}
{% include style.css %}

/*! sakrecoer front-sheet */

html{
 -webkit-transition:.5s background;
 transition:.5s background;
 background:url({{ base }}/assets/img/bg/frontpage.jpg) no-repeat;
 background-size:cover;
}
body{
 margin:0;
 padding:0;
 background:transparent;
 font-family: futura, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4 {
 font-family: futura;
 text-transform: uppercase;
}
a:link,
a:visited,
a:hover,
a:active,
a:focus {
 text-decoration: none;
  -webkit-transition:.5s background;
 transition:.5s background
}
a,
a:link,
a:visited {
 color: #fff;

-webkit-transition-property: hover;
 -webkit-transition: color 0.5s ease-in-out;
 -moz-transition: color 0.5s linear 0s; /* firefox 4 */
  -o-transition-property: color; /* opera 10.5 */
  -o-transition-duration: 0.5s;
text-shadow: 1px 0px 14px rgba(255, 255, 255, 0.5),
	    -1px 0px 14px rgba(255, 255, 255, 0.5),
             0px -1px 14px rgba(255, 255, 255, 0.5),
	     0px 1px 14px rgba(255, 255, 255, 0.5);
-webkit-transition-property: hover;
 -webkit-transition: text-shadow .5s ease-in-out;
 -moz-transition: text-shadow .5s linear 0s; /* firefox 4 */
  -o-transition-property: text-shadow; /* opera 10.5 */
  -o-transition-duration: .5s;
}

a:hover {
 color: #f00;
text-shadow: 1px 0px 4px rgba(255, 255, 255, 0.5),
	    -1px 0px 4px rgba(255, 255, 255, 0.5),
             0px -1px 4px rgba(255, 255, 255, 0.5),
	     0px 1px 4px rgba(255, 255, 255, 0.5);
}
a:active {
 color: #000;
}
div{

 z-index: -10
}
/* ------ magicvideo ---- */

video{
 position:fixed;
 right:0;
 bottom:0;
 min-width:100%;
 min-height:100%;
 width:auto;
 height:auto;
 z-index:-100;
 background:url({{ base }}/assets/img/bg/frontpage.jpg) no-repeat;
 background-size:cover;
 -webkit-transition:1s opacity;transition:1s opacity;
}

h1{
 font-size:3rem;
 text-transform:uppercase;
 margin-top:0;
 letter-spacing:.3rem;
  font-family: futurabold;
}
.stopfade{
 opacity:.5
}
#video_pause {
 font-family: futura;
 text-transform: uppercase;
 position: fixed;
 bottom: 10px;
 right: 10px;
 display:block;
 width:50px;
 padding:.2rem;
 border:none;
 margin:0rem 0rem;
 font-size:.7rem;
 background:rgba(255,0,0,.23);
 color:#fff;
 border-radius:3px;
 cursor:pointer;
 -webkit-transition:.3s background;
 transition:.3s background;
}
#video_pause:hover{
 background:rgba(0,0,0,.5);
 color: #fff;
} 

/* ---- hide divs  ---- */



#abcdef,#abcde,#abcd,#abc,#ab {
    display: none;
    background-color: transparent;
   

}
/*show .ab*/
#music:hover ~ #ab {
    display: block;
    
}
/*show .abc*/
#about:hover ~ #abc {
    display: block;
}
/*show .abcd*/
#log:hover ~ #abcd {
    display: block;
}
/*show .abcde*/
#discog:hover ~ #abcde {
    display: block;
}
/*show .abcdef*/
#links:hover ~ #abcdef {
    display: block;
}
#music:hover ~ #a,
#about:hover ~ #a,
#log:hover ~ #a,
#discog:hover ~ #a,
#links:hover ~ #a{
    display: none;

}
#music,
#about,
#log,
#discog,
#links{
  font-family: futurabold;
  line-height: 1.2;
  text-transform: uppercase;
  float:right;
  font-size: 5em;
  font-weight: bold;
  width: 100%;
  text-align: left;
  color: transparent;
  border-radius: 3px;
}
#music:hover{
    background-color: rgba(255, 0, 24, 0.3);

}

#about:hover{

    background-color: rgba(153, 255, 0, 0.5);

}

#log:hover{
    background-color: rgba(0, 255, 229, 0.3);

}

#discog:hover{
    background-color: rgba(102, 0, 255, 0.3);

}

#links:hover{
    background-color: rgba(0, 0, 0, 0.3);

}

#a, #ab, #abc, #abcd, #abcde, #abcdef{
     position:absolute;

   width: 100%;
   height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/* default */
#a{
 background:url('../img/sakrecoerLOGO.png') no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain; 
     background-color:rgba(255, 0, 24, 0.5);
     height: 90%;
     top: 10%;
     position:absolute;
     text-align: center;
    background-color: rgba(0, 0, 0, 0);
    opacity: .8;
}

/*  music  */
#ab{
    background:url('../img/bg/boombbox.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
     background-color: rgba(255, 0, 24, 0.5);
    font-family: futura;
    opacity: .75;
}

/*  about  */
#abc{
    position:fixed;
    top:30%; left:36%;
    width: 350px; height: 350px; padding: 0 7px 30px 7px;
    background-color: rgba(153, 255, 0, 1);
    font-family: futura;
    opacity: 1;
    letter-spacing: -1px;
    text-transform: uppercase; font-size:24px; 
    text-align: center;   
    border-radius:4px; color:#000;
}
#abc p {
line-height:24px;
}
/*  blog  */
#abcd{
    background-color: rgba(0, 255, 229, 0.2);
    font-family: futura, Helvetica; color: rgba(0, 255, 229, 0.2);
    letter-spacing: -1px;
    text-transform: uppercase; font-size:24px; 
    text-align: justify;   
    border-radius:4px;
}
/*  discog  */
#abcde{
    background:url('../img/discog2014.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
     background-color: rgba(255, 0, 24, 0.5);
    font-family: futura;
    opacity: .6;
}
/*  links  */
#abcdef{
    background:url('../img/Chain_1.png') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
    text-align: center;
    font-family: futura;
}

#logo {
 margin: auto
}