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, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-weight: inherit;

    font-style: inherit;

    font-size: 100%;

    font-family: inherit;

    vertical-align: baseline;
}

body{
    font-family: 'Roboto', sans-serif;
}


header{
    background-image: url("public/cluster.jpg");
    height: 100vh;
    width: auto;
}

header h1{
    font-size: 4em;
    font-weight: 600;
    color:white;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    text-shadow: 2px 2px #000000;
    padding-top: 5vh;
}

header img{
    display: block;
    padding-top: 20vh;
    margin-left: auto;
    margin-right: auto;
    height: 40vh;
}

h1{
    padding: 10vh 0 4vh 0;
    font-size: 4em;
    font-weight: 600;
    text-align: center;
    color:#2F3A54;
    text-shadow: 0px 2px 3px #808080;
}


h2{
    padding: 4vh 0 4vh 0;
    font-size: 1.5em;
    font-weight: 500;
    text-align: center;
    color:#2F3A54;
}

h3{
    padding: 2vh 0 2vh 0;
    margin-left: 25vw;
    margin-right: 25vw;
    text-align: center;
    font-size: 1em;
    color: #3B3F48;
    padding-bottom: 10vh;
}

h4{
    padding: 0 0 4vh 0;
    font-size: 2.5em;
    font-weight: 600;
    text-align: center;
    color:#2F3A54;
}


article{
    padding-bottom: 5vh;
}

th, td {
    border-bottom: 1px solid #ddd;
}

th, td {
    padding: 2em;
    text-align: center;
}

tr:nth-child(even) {background-color: #f2f2f2;}


th {
    background-color: #2F3A54;
    color: white;
}


fieldset{
    color: #2F3A54
}
label{
    color: #2F3A54
}

input {
    border-radius: 10px;
}


.nav_top{
    position: fixed;
    width: 100%;
}

.nav_top ul {
    padding: 0;
    overflow: hidden;
    background-color: #E83030;
    text-align:center;
}

.nav_top li {

    display: inline-block;
    list-style-type: none;
}


.nav_top li a img {
    float: left;
    width: 18px;
    height: 18px;
    padding-top:0;
    margin-right: 1vw;
    margin-left: 1vw;
}


.nav_top li a {
    font-size: 1em;
    font-weight: 600;
    width: auto;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px 14px 0;
    text-decoration: none;

}

.nav_top li a:hover {
    background-color: darkred;
}


#tresc{
    background: #f2f2f2;

}

.spis_rakiet{
    width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
}

#tresc table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}


.galeria{
    background-color: #222020;
    padding-bottom: 10vh;
}

.galeria figure{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}



.i_image img{
    margin: 1vh;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    height: 30vh;
    width: 100%;
}

.i_image p{
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;

}

.g{
    padding: 10vh 0 4vh 0;
    font-size: 4em;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    text-shadow: 0px 2px 3px #000000;
}

.formularz{
    background: #f2f2f2;

}
.formularz form{
    margin-left: auto;
    margin-right: auto;
}
.formularz form  { display: table;      }
.formularz p     { display: table-row; text-align: center; }
.formularz label {
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-bottom: 2vh;}
.formularz input { display: table-cell;
margin-bottom: 1vh;
}

.formularz td {
    text-align: center;
    vertical-align: middle;
}

.formularz img{
    display: block;
    margin-left: 43vw;
    width: 10%;
    padding-bottom: 3vh;
}

.prawa{
    background-image: url("public/envio-39.jpg");
    background-size: cover;
    height: 100vh;

}

.prawa h1{
    padding-top: 20vh;
    color: #2F3A54;
    text-shadow: 0 0;
}

.prawa h2{
    color: #ffffff;
    text-shadow: 2px 2px #919191;

}


.prawa h3{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color:#E83030;
    box-shadow: 0 5px 0 darkred;
    padding: 1em 1.5em;
    width: 50vh;
}


.blue{
    font-weight: 600;
    color: #123A68;
}
.link{
    color: #f2f2f2;
    text-decoration: none;
}

.o_mnie{
    background-color: #f2f2f2;
    height: 100vh;
}

.o_mnie h1{
    padding-top: 30vh;
}

.o_mnie h2{
    font-size: 3em;
    font-weight: 600;
}

.o_mnie h3{
    font-size: 2em;
}

.end{
    background-image: url("public/25130.jpg");
    background-size: cover;
    height: 100vh;
}



.v_section{
    background-color: #222020;
    height: 100vh;
}

.v_section h1{
    padding-top: 30vh;
}

.v_section h3{
    color: #f2f2f2;
}



.v{
    text-align: center;
}


.m_section{
    background-color: #f2f2f2;
    height: 100vh;
}

.m_section h1{
    padding-top: 30vh;
}

.maps{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    border: 1px solid #2F3A54;
    border-radius: 10px;
    margin-bottom: 10vh;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}



@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    .maps{
        width: 100%;
        border:0;
    }


    .prawa h1{
        padding-top: 3vh;
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    td:nth-of-type(1):before { content: "Wariant"; }
    td:nth-of-type(2):before { content: "Falcon 1"; }
    td:nth-of-type(3):before { content: "Falcon 1e"; }
    td:nth-of-type(4):before { content: "Falcon 9"; }
    td:nth-of-type(5):before { content: "Falcon 9 v.1.1"; }
    td:nth-of-type(6):before { content: "Falcon 9 v.1.2"; }
    td:nth-of-type(7):before { content: "Falcon Heavy"; }

    .nav_top img{
        display: none;

    }


    .nav_top li{
        width: 30vw;
        font-size: 1vh;
    }

}