/*              General stuff                */

*
{
    box-sizing: border-box;
}

img
{
    box-sizing: content-box
}

/*              Font                */

@font-face
{
	font-family: SanFranciscoThin;
	src: url("Font/SF-UI-Display-Thin.otf")
}

*
{
	font-family: SanFranciscoThin, Helvetica Neue, Arial, sans-serif;
}

/*              Typeface                */

h1, h2, h3, h4, form
{
    margin: 0;
    padding: 20px;
    text-align: center;
    color: white;
    font-weight: 100;
}

strong
{
    font-weight: 100;
}

input, select, textarea
{
    border: 0;
    color: white;
    background: transparent;
    font-size: 1em;
    text-align: center;
}

textarea:focus, input:focus, input:not(focus)
{
    outline: 0;
    color: white;
    font-size: 1em;
}

a
{
    color: white;
}


/*              Background Stuff                */

body
{
    background-color: black;
    background-image: url("https://www.greenweb.com.bd/demo/images/london.jpg");
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*              Page Sections                */

#title
{
/*
    background-color: black;
    opacity: 0.5;
*/

    height:50vh;
    min-height: 150px;
    width:100vw;
    float: left;
    display: table;
}

#moto
{
/*
    background-color: grey;
    opacity: 0.5;
*/
    
    height:20vh;
    min-height: 60px;
    width:100vw;
    float: left;
    display: table;
}

#signup
{
/*
    background-color: darkgray;
    opacity: 0.5;
*/

    height:10vh;
    min-height: 30px;
    width: 100vw;
    float: left;
    display: table;
}

#form
{
/*
    background-color: lightgray;
    opacity: 0.5;
*/

    height:20vh;
    min-height: 60px;
    width:50vw;
    float: left;
    display: table;
}

#twitter
{
/*
    background-color: deepskyblue;
    opacity: 0.5;
*/

    height:20vh;
    min-height: 60px;
    width:50vw;
    float: left;
    display: table;
}

/*              Page Sections Elements              */

#title h1
{
    vertical-align: bottom;
    display: table-cell;
    position: relative;
    padding-bottom: 0;
}

#title h1 img
{
    padding-top: 0;
    width:100%;
    max-width: 500px;
}

#revolution
{
    position: absolute;
    bottom:2px;
    left: calc(20px + 50%);
}

@media (min-width:640px)
{
    #revolution
    {
        font-size:1em;
    }
}

@media (max-width:639px)
{
    #revolution
    {
        font-size: 5vw;
    }
}

#moto h2
{
    vertical-align: bottom;
    display: table-cell;
    padding-bottom: 10px;
}

#signup h3
{
    vertical-align: top;
    display: table-cell;
    padding-top: 10px;
}

#form form
{
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    padding: 0;
    
    text-align: right;
}

#form form input
{
    padding-right:0px;
}

#twitter h4
{
    vertical-align: middle;
    display: table-cell;
    padding: 0px;
    
    text-align: left;
}

#twitter h4 a img
{
    width:50px;
    margin-left:100px;
}

/*              iPhone specific stuff                */

@media (max-width:415px)
{
    #title
    {
        height:40vh;
        min-height: 120px;
    }

    #moto
    {
        height:25vh;
        min-height: 75px;
    }

    #signup
    {
        height:10vh;
        min-height: 30px;
    }

    #form
    {
        height:25vh;
        min-height: 75px;
        width:70vw;
        float: left;
        display: table;
    }

    #twitter
    {
        height:25vh;
        min-height: 75px;
        width:30vw;
        float: right;
        display: table;
    }
    
    #title h1
    {
        vertical-align: bottom;
    }
    
    #revolution
    {
        bottom:5px;
    }   
    
    #moto h2
    {
        padding-bottom: 20px;
    }

    #signup h3
    {
        padding-top: 20px;
    }
    
    #form form
    {
        text-align: left;
    }
   
    #form form input
    {
        padding-left:20px;
        padding-bottom:20px;
    }
    
    #twitter h4
    {
        text-align: right;
        padding:0;
    }

    #twitter h4 a img
    {
        padding-right:20px;
        padding-bottom: 20px;
        padding-left: 0;
        margin: 0;
    }
}

/* -------------------------------------------------------------
                        Submitted form            
------------------------------------------------------------- */


/*      Submitted form page elements     */

#empty_div_1
{
    height:40vh;
    min-height: 120px;
    width:100vw;
    float: left;
    display: table;
}

#thank_you
{
    height:10vh;
    min-height: 30px;
    width:100vw;
    float: left;
    display: table;
}

#contact_soon
{
    height:10vh;
    min-height: 30px;
    width:100vw;
    float: left;
    display: table;
}

#empty_div_2
{
    height:10vh;
    min-height: 30px;
    width:100vw;
    float: left;
    display: table;
}

#socialshare
{    
    height:10vh;
    min-height: 30px;
    width:100vw;
    float: left;
    display: table;
}

#social_icons
{
    padding:0;
    margin: 0;

    height:20vh;
    min-height: 60px;
    width: 100vw;
    float: left;
    display: table;
}

/*              Text stuff              */

#thank_you h1
{
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
}

#contact_soon h2
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
}

#socialshare h2
{
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
}

/*              Social elements              */

#social_list
{
    padding: 0px;
    width: 360px;
    height:100px;
    display: table-cell;
    vertical-align: top;
    text-align: center;
}

.social a img
{
    width: 50px;
    height: 50px;
    padding-right: 20px;
    padding-top:15px;
    padding-bottom:5px;
}

#fb a img
{
    padding-left: 20px;
}

/*              iPhone specific stuff                */

@media (max-width:415px)
{

    #empty_div_1
    {
        height:20vh;
        min-height: 60px;
    }

    #thank_you
    {
        height:10vh;
        min-height: 30px;
    }

    #contact_soon
    {
        height:10vh;
        min-height: 30px;
    }

    #empty_div_2
    {
        height:15vh;
        min-height: 30px;
    }

    #socialshare
    {    
        height:10vh;
        min-height: 30px;
    }
    
    #empty_div_3
    {
        float:left;
        height:10vh;
        width:100vw;
        min-height: 30px;
    }

    #social_icons
    {
        padding:0;
        margin: 0;

        height:25vh;
        min-height: 75px;
    }
    
    .social a img
    {
        width: 40px;
        height: 40px;
        padding-right: 15px;
        padding-top:15px;
        padding-bottom:5px;
    }

    #fb a img
    {
        padding-left: 15px;
    }

}