@font-face {
    font-family: "Lora";
    src: url("../fonts/lora-regular-webfont.eot"); 
    src: url("../fonts/lora-regular-webfont.eot?#iefix") format("eot"), 
    url("../fonts/lora-regular-webfont.woff") format("woff"),
    url("../fonts/lora-regular-webfont.ttf") format("truetype"),
    url("../fonts/lora-regular-webfont.#loraregularwebfont") format("svg");
    font-weight: normal;
    font-style: normal; 

}

/*@font-face {
    font-family: "Lora";
    src: url("../fonts/lora-italic-webfont.eot"); 
    src: url("../fonts/lora-italic-webfont.eot?#iefix") format("eot"), 
    url("../fonts/lora-italic-webfont.woff") format("woff"),
    url("../fonts/lora-italic-webfont.ttf") format("truetype"),
    url("../fonts/lora-italic-webfont.#LoraItalic") format("svg");
    font-weight: normal;
    font-style: italic; 

} */

@font-face {
    font-family: "Amatic";
    src: url("../fonts/amaticsc-regular-webfont.eot"); 
    src: url("../fonts/amaticsc-regular-webfont.eot?#iefix") format("eot"), 
    url("../fonts/lamaticsc-regular-webfont.woff") format("woff"),
    url("../fonts/amaticsc-regular-webfont.ttf") format("truetype"),
    url("../fonts/amaticsc-regular-webfont.#AmaticRegular") format("svg");
    font-weight: normal;
    font-style: italic; 

}

@font-face {
    font-family: "Amatic";
    src: url("../fonts/amaticsc-bold-webfont.eot"); 
    src: url("../fonts/amaticsc-bold-webfont.eot?#iefix") format("eot"), 
    url("../fonts/lamaticsc-bold-webfont.woff") format("woff"),
    url("../fonts/amaticsc-bold-webfont.ttf") format("truetype"),
    url("../fonts/amaticsc-bold-webfont.#AmaticBold") format("svg");
    font-weight: bold;
    font-style: normal; 

}

body {
    font-family: "Amatic"; 
    font-weight: bold;
    font-size: 16px; font-size: 1rem; /*16px*/
    text-align: center;
    color: #fff;
    background-color: #000; 
    background-attachment: fixed;
    background-size: cover;
    font-weight: 300;
    line-height: 100%;


}

video#bgVideo {
    position: fixed;
    z-index: -100;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url("../images/heidigabrielsson_bg_video_master.jpg") no-repeat;
    background-size: cover;
    background-color: #000;
}

h1 {
    font-size: 40px; font-size:3rem; /*40px*/
    font-weight: normal;
    line-height: 1.5; 
    margin-left: auto;
    margin-right: auto;
}

address {
    font-size: 40px; font-size:3rem; /*40px*/
    margin-left: auto;
    margin-right: auto;
}


address a:link{
    text-decoration: none;
    color: #fff;
}

address a:visited{
    text-decoration: none;
    color: #fff;
}

address a:hover {
    text-decoration: none;
    color: #fff;
}

address a:active{
    text-decoration: none;
    color: #fff;
}

h2 {
    font-size: 70px; font-size:5rem; /*60px*/
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
    min-width; 250px;
    margin-left: auto;
    margin-right: auto;
    
}


h2 a:link{
    text-decoration: none;
    color: #ff66cc;
}

h2 a:visited{
    text-decoration: none;
    color: #ff66cc;
}

h2 a:hover {
    text-decoration: none;
    color: #ff66cc;
}

h2 a:active{
    text-decoration: none;
    color: #ff66cc;
}

hr {
    border: solid;
    border-width: thin;
    border-bottom-color: #fff;
    position: relative;
    margin-bottom: 15px;
    margin-top: 15px;
}

#wrapper {
    max-width: 430px;
    width: auto; /*scale width smaller */
    margin-left: auto;
    margin-right: auto;
}

#header {
    height: 30px;
    text-align: center;
    width: auto;
}

#allControls {
    margin-left: auto;
    margin-right: auto;
}

#reloadIcon {
    background-image: url("../images/reload1_20px_100.png");
    background-repeat: no-repeat;
    opacity: 0.5;
    width: 20px;
    height: 20px;
    margin-bottom: -5px;
    float:right;
}

#reloadIcon a {
    display: block;
    width: 100%;
    height: 100%;
}


#logo {
    background-image: url("../images/hg_logo_70px_pink.png");
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    float: left;
    margin-left: 10px;
    margin-top: 25px;
/*    width: 100px;
    height: 100px;
    margin-top: 45px;
    margin-left: auto;
    margin-right: auto;  */

}

#logo a {
    display: block;
    width: 100%;
    height: 100%;
}

#logo span {
    display: none;
}

#content {
    max-width: 430px;
    width: auto; /*scale width smaller*/
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: center;
    font-style: italic;

}
#footer {
    font-family: "Lora"; 
    font-size: 15px; font-size: 1rem;
    line-height: 2;
    font-style: normal;
    font-variant: normal;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

#footer a {
    text-decoration: none;
    color: #fff;
}

#footer a:link {
    text-decoration: none;
}

#footer a:visited {
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

#footer a:active {
    text-decoration: underline;
}

.clear {
    clear: both;
}
.clearRight {
    clear: right;
}
.clearLeft {
    clear: left;
}

#reload {
    font-family: "Lora"; 
    font-size: 15px; font-size: 1rem;
    line-height: 2;
    font-style: normal;
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    float: right;} 
/*  margin-left: auto;
    margin-right: auto; }*/
    

#reload a {
    text-decoration: none;
    color: #fff;
}

#reload a:link {
    text-decoration: none;
}

#reload a:visited {
    text-decoration: none;
}

#reload a:hover {
    text-decoration: none;
}

#reload a:active {
    text-decoration: none;
}

    

/*VIDEO PAUSE */

video#bgVideo { transition: 1s opacity; }
.stopfade { opacity: .5; }

/* BUTTON PAUSE */

button#vidpause {
    width: 170px;
    height: 35px;
 /*  background-color: rgba(0, 0, 0, 0.2); */
    background-color: rgba( 255, 255, 255, 0.3); 
 /*   background-color: none; */
    font-family: "Lora";
 /*   color: #ff66cc; /* #fff;*/ 
    color: #000; /* #fff;*/ 
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin: 5px;
    padding-right: 30px;
    padding-left: 30px;
    position: relative;

    
}

/* BUTTON AUDIO */

button#audioControl {
    width: 170px;
    height: 35px;
    background-color: rgba( 255, 255, 255, 0.3); 
    border: none;
  /*  background-color: rgb( 255, 255, 255, 0.7); */
    font-family: "Lora";
 /*   color: #ff66cc; /* #fff;*/
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    margin-left: auto;
    margin-right: auto;
    margin: 5px;
    padding-right: 30px;
    padding-left: 30px;
    position: relative;

}

video { display: block; } /*fix IE 8 video, shows bg image*/



/*responsive*/


@media only screen and (min-device-width: 768px) {html { font-size: 70%; } }
@media only screen and (max-device-width: 768px) {html { font-size: 70%; } }
@media only screen and (max-device-width: 640px) {html { font-size: 65%; }    }
@media only screen and (max-device-width: 480px) {html { font-size: 60%; }    }
@media only screen and (max-device-width: 360px) {html { font-size: 60%; }  }


@media only screen and (min-width: 300px) and (max-width: 768px) {
    #footer {margin-top:10px;}
    address {line-height: 1;}

    
}

@media only screen and (min-height: 300px) and (max-height: 768px) {
    #footer {margin-top:10px;}
    address {line-height: 1;}
    

    
}

/*still image on mobile devices */
@media screen and (max-device-width: 800px) {
    html {
         background: url("../images/heidigabrielsson_bg_video_master.jpg") #000 no-repeat center center fixed;
         background-size: cover;
    }
    #bgVideo {
        display: none;
    }
    button#vidpause { display: none;}
    button#audioControl { display: none;}
    #hideControls { display: none;}
    #hideCredits { display: none; }
    body { background-color: transparent;}
    #logo {display: none;}
 /*   #logo {margin-top: auto; margin-bottom: auto;}*/
    #header {height: 15px;}

}

@media only screen and (max-device-width: 1280px) and (orientation:portrait) {
    #wrapper {
         margin-left: auto;
         margin-right: auto;
    }

/*iPhone 5 pysty, teksti ei mene kahdelle riville*/
@media only screen and (max-device-height: 568px) and (orientation:portrait) {
    h2 a { font-size: 70%; } }

/*@media only screen and (max-device-width: 1280px) and (orientation:portrait) {
    html {
         background: url("../images/heidigabrielsson_bg_video_master.jpg") #000 no-repeat center center fixed;
         background-size: cover;
    }
    #bgVideo {
        display: none;
    }
    button#vidpause { display: none;}
    button#audioControl { display: none;}
    #hideControls { display: none;}
    #hideCredits { display: none; }
    body { background-color: transparent;}
    
} */