/*zapobiega zmianom wielkosci fonta przy zmianie horyzontalnej w iOS i WP*/
html{-webkit-text-size-adjust: 100%; -ms-text-size-adjust:100%;  }

/*daje padding inside the box i margin outside the box*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


/*----------------------------------------------DEFAULT CSS-------------------------------------------------------------------*/

body{
    font-family: 'Varela Round', sans-serif;
    font-size:10px;
     width: 100vw;
    height: 100vh;
}


/*------------------------- CON AND NAV CSS------------------------ */

.container{
    display: flex;
    flex-direction: column;
    width:100vw;
    border: 3px solid blue;
}

 .bgimage{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 80vh;
    /*background-image: url("partysmallcolor.jpg");*/
    background:orange;
    background-size: 100% 100%;
    color:white;
}

nav{
    display:flex;
    position: relative;
    width: 100%;
    height: 10vh;
    background: rgba(0,0,0);

}

.nav-left{
    display:flex;
    align-items:center; /*powoduje ze elementy sa na srodku np logo*/
    width: 50vw;
    height: 10vh;
}



.nav-left img{
    width:5em;
    height: 3.5em;
}

.header{
    height: 10vh;
    width:100%; /*ma 100% szerokosci rodzica czyli nav-left*/
}

.title{
    display: flex;
    align-items: flex-end;
    height: 6vh; /* tym mozemy ustalic pozycje titla i subtitla, max vh=10*/
    font-size:2em;
    font-weight:bold;
}

.subtitle{
    display: flex;
    align-items:center;
    height: 4vh; /* tym mozemy ustalic pozycje titla i subtitla, max vh=10*/
    padding-bottom:.5em;
    font-size:.8em;
    font-style:italic;

}

.nav-right{
    display:flex;
    justify-content: flex-end;
    align-items: center;
    width: 50vw;
    height: 10vh;
}

.nav-right img {
    width:3em;
    height: 2em;
    margin-right:10%;
}

.nav-right ol{
        display: none;
}

.nav-right ol{
    font-weight: bold;
}

.nav-right li:hover{
    color:orange;
}

/* ------------------- BANNER ----------------- */

.banner{
    display: flex;
    flex-direction: column;
    flex-grow:1;
     /* wypelnia banner reszta miejsca rodzica */
    border-bottom: 3px solid orange;
    text-align: center;
}

 .banner p:first-child{
    margin-top:15vh; /*bylo 6rem */
    font-size: 3em;
     font-weight: bold;
     text-decoration: underline;
}

.banner p:nth-child(3){
     margin-top:15vh; /* 6 rem*/
    font-size: 2em;
}

.banner-buttons{
    display: flex;
    justify-content: center;
    margin-top:3vh;
}

.signup{
    width: 25%;
    padding: 1.3em;
    margin-right:5%;
    margin-left:5%;
    border: 1px solid rgb(255,100,0);
    border-radius:25px;
    background:darkorange;
}

.signup:hover{
    background:rgb(255,110,0);
    transition: all 0.2s ease;
}

/*-------------------------MAIN CSS------------------------ */

 main{
    position:relative;
    width:100%;
    border: 3px solid brown;

}
/*-------------------------FOOTER CSS------------------------ */

footer{
    position:relative;
    width: 100%;
    height: 30vh;
    background: black;
}

/*-------------------------------------------------MEDIUM CSS-------------------------------------------------------- */

@media only screen and (min-width: 560px){

    body{
        font-size: 16px;
    }

    .bgimage{
        background-image: url("partymediumcolor.jpg");
    }

    .subtitle{
        margin-left:10%;
    }

    .signup{
        width: 20%;

    }

}/*END OF MEDIA QUERY*/

/*-------------------------------------------------LARGE CSS-------------------------------------------------------- */
@media only screen and (min-width:1140px){


    .bgimage{
        background-image: url("partyscaledcolor.jpg");
    }

    .nav-right img {
        display: none;
    }

    .nav-right ol{
        display: flex;
        justify-content: space-evenly;
        width:100%;
    }

    .nav-right li{
        list-style: none;
    }

    .signup{
        width: 13%;

    }

}/*END OF MEDIA QUERY*/