img.logo-nav{
    width:150px;
}
.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index:1;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media only screen and (min-width:768px){
    img.mainwriting{
          width:100%;
          margin-top:40vh;
    }
    header {
          width: 100%;
          height: 100vh;
          font-family: "Helvetica Neue",sans-serif;
          font-weight: lighter;
          background-image:url('background-new.png');
          background-size:cover;
          height:100vh;
          background-attachment: fixed;

    }


    .section-2{
        height:100vh;
    }

    .container-image {
        position: relative;
        width: 50%;
      }


      .container-image{
        margin-left:25%;
        margin-top:20%;
        width: 50%;
        height: auto;
      }

      .image-1{
          width:100%;
          height:auto;
      }

      /*Style the button and place it in the middle of the container/image */
      .container-image .login-2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        border: none;
        flex: 1 1 auto;
        margin: 10px;
        padding-right: 30px;
        padding-left: 30px;
        padding-top:5px;
        padding-bottom:5px;
        text-align: center;
        text-transform: uppercase;
        border-style:none;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        transition: 0.5s;
        background-position:right;
        background-image: linear-gradient(to bottom,#B5345E 0%, #952667 50%);
        margin-left:-1px;
        margin-top:-2px;
      }















    @media only screen and (max-width: 786px) {


          body {
                font-family: "Helvetica Neue",sans-serif;
                font-weight: lighter;
                background-image:url('images/background-0.png');
                background-size:cover;
                height:100vh;
                background-attachment: fixed;
                overflow-x:hidden;
                background-position: center;

          }
          .wrapper{
                width:100%;
          }
          header{
                width:100%;
                overflow-x:hidden;
          }
          .logo {
                position: fixed;
                top: 0;
                margin-top: 16px;
          }

          nav ul {
                max-height: 0px;
                background: #000;
          }

          nav.black ul {
                background: #000;
          }

          .showing {
                max-height: 34em;
          }

          nav ul li {
                box-sizing: border-box;
                width: 100%;
                padding: 24px;
                text-align: center;
          }

          .menu-icon {
                display: block;
          }

          img.logo-nav{
                width:90px;
          }


          header {
                width: 100%;
                height: 100vh;
                background-image:linear-gradient(
                  -50deg, rgba(185,54,98,0.8) 40%, rgba(26,26,26,0.8));

                background-size: cover;
          }
        }