@import url('https://fonts.googleapis.com/css?family=Patua+One');
html
{
    height: 100%; /* helps to cover the whole website with the background */
}
body
{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    text-align: center;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Patua One', cursive;
    margin: 0;
    /* if video background doesnt work: chose not to use but there is an option to make a backup background */
    /*
    background: url("https://ak01-video-cdn.slidely.com/static/junior-fed-test/bg.jpg") #000 no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    */
}
a
{
    color: white;
}
a:link
{
    text-decoration: none;
}
a:hover
{
}
input
{
    border: none;
    border-bottom: 0.5px solid lightgray;
    width: 300px;
    padding-left: 5px;
    padding-right: 5px;

    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;

    text-rendering: auto;
    color: #232f3a;
    font-size: 22px;
    font-family: 'Patua One', cursive;

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
}
input:hover
{
}
*:focus {outline: none;}
label
{
    color: #232f3a;
    font-size: 22px;
    text-shadow: 2px 2px 8px rgba(0,0,0,.3); /* Example video shows text shadow */
}
h1 {
    color: white;
    font-family: 'Patua One', cursive;
    font-size: 80px;
    text-shadow: 2px 2px 8px rgba(0,0,0,.3);
    text-align: center;
    margin-top: 0;
}
h2 {
    color: white;
    font-family: 'Patua One', cursive;
    font-size: 40px;
    text-shadow: 2px 2px 8px rgba(0,0,0,.3);
    text-align: center;
    margin-top: 0;
}
ul
{
    list-style-type:none;
    list-style-position:outside;
    margin: 0px;
    padding: 0px;
}
.box
{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    margin: auto;
    text-align: center;
    max-width: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
.logo-container
{
    width: auto;
    padding-left: auto;
    padding-right: auto;
}
.logo
{
    background-color: white;
    width: 120px;
    height: 120px;
    border-radius:50%;
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    margin: 10px;
}
.logo#google
{
    background-image: url("https://ak02-cdn.slidely.com/static/junior-fed-test/Google_2015_logo_small.png");
}
.logo#facebook
{
    background-image: url("https://ak03-cdn.slidely.com/static/junior-fed-test/facebook-logo-small.png");
}
.logo#tesla
{
    background-image: url("https://ak04-cdn.slidely.com/static/junior-fed-test/Tesla-logo-small.png");
}
.logo#nike
{
    background-image: url("https://ak01-cdn.slidely.com/static/junior-fed-test/nike_small.png");
    background-position: 20px;  /* Had to move it 20px from the left to be exactly as the example without editing the photo */
}
video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url("style/Sketch.jpg") no-repeat;
    background-size: cover;
    object-fit: contain;
}
.button
{
    background-color: #32bafa;
    padding: 10px;
    line-height: 22px;
    font-size: 22px;
    color: white;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 33px;
}
#popUp-full
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    width: 100%;
    display: none;
    z-index: 999;
}
#popUp-min
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px;
    color: white;
    font-size: 25px;
    z-index: 999;
}
#leaveEmail
{

    position: absolute;
    top: 50%;
    left: 50%;

    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    margin: auto;
    text-align: center;
    width: 480px;
    height: 380px;
    background-color: white;
    color: black;
    border-radius: 4px;
}
#leaveEmail p
{
    font-size: 40px;
    color: #232f3a;
    text-shadow: 2px 2px 8px rgba(0,0,0,.3); /* Example video shows text shadow */
}
@media (min-width:1100px)
{
    .body
    {
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .logo{display: inline-block; vertical-align: top;} /* Orders the list (Seperated to allow the developer to choose different settings for smaller size of screen */
}
@media (max-width:1100px)
{
    body{background: url("style/Sketch.jpg") #000 no-repeat center center fixed;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    /*	body{width:100%;max-width:1100px;}*/
    #bgvid {display: none;}
    h1 {font-size: 2em;}
    h2 {font-size: 1em;}
    label{font-size: 23px;}
    input{font-size: 27px;}
    #popUp-full
    {
    }
    #leaveEmail{max-width: 100%; min-height: 60%; max-height: 60%;}
    #leaveEmail p{font-size: 27px;}
    .box
    {
    }
    .logo-container
    {
        width: 100%;
    }
    .logo
    {
        margin: 0;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        display: inline-block; vertical-align: top; /* Orders the list (Seperated to allow the developer to choose different settings for smaller size of screen */
    }

}
/* media max height 500: rotated phone - in order to avoid the need of scrolling */
@media (max-height:500px)
{
    .logo-container{height: auto;}
    .button{margin-bottom: 10px;}
    #popUp-full{max-width: 100%; min-height: 200px;}
    #leaveEmail{max-width: 100%; min-height: 200px;}
    .box
    {
        top: 0;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
/* media max width 500 / 300: phone - in order to avoid the need of scrolling  */
@media (max-width:500px)
{
    .box
    {
        top: 0;
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@media (max-width:300px)
{
    body {min-width:300px; font-size: 70%;}
}