body {
    margin: 0;
    padding: 0;
    background: url("images/leviback.jpg") no-repeat fixed center;
    background-size: cover;
    font-family: 'Roboto Mono', monospace;
    font-weight:200;
    font-style:regular;
    color: white;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

a {
color:white;
}


.mobiletitle {
text-align:center;
display:none;
}



.center {
text-align:center;
float:center;

}

h1, h2, h3 {
    font-style:regular;
    font-weight:400;
    text-align: center;
}



/* Left side wrapper (desktop) */
.wrap {
    flex: 1;
    height: 100vh;
    text-align: center;
}

.title {
    margin-top: 5vh;
}

/* Desktop menu */
.text-box {
    width: 20vw;
    margin: 5vh auto;
}

.text-box a {
    color: white;
    text-decoration: none;
}
.text-box a.active {
    text-decoration: underline;
}

/* Right side content container */
.right {
    flex: 4;
    height: 100vh;
    overflow: hidden;
}

/* Content panels */
.contentDiv {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.contentDiv img {
    width: auto;
    max-height: 100vh;
    object-fit: cover;
}

/* What we do rows */
.what {
    width: 45%;
    display: inline-block;
    margin-bottom: 3vh;
    text-align:center;
}
.what img {
    width: 50%;
}

.logo img {
max-width:25vw;
max-height:33vh;
}

/* Contact section offset */
.text {
    margin-top: 12vh;
}

/* Hover image */
.elem {
    width: 140px;
    height: 140px;
    background-image: url("images/levi.png");
    background-size: 100%;
    margin: 5vh auto 0;
    transition: transform 1s;
    cursor: pointer;
}

.elem:hover {
    animation: rotate .5s linear infinite;
}

/* Rotation animation */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* -------------------------
   MOBILE LAYOUT
   ------------------------- */
@media only screen and (max-width: 812px) {
  /* Your phone styles here */

    body {
        display: block;
        overflow: visible;
        height: auto;
            background: black;

    }
    
    .mobiletitle {
		text-align:center;
		display:block;
		padding-bottom: 30px;
	}
	

    .wrap {
        width: 90vw;
        margin: 5vh auto;
        height: auto;
        display: block;
    }

    /* hide desktop menu */
    .text-box {
        display: none;
    }

    .right {
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;
    }

    /* stack all sections */
    .contentDiv {
        display: block !important;
        padding: 20px 0;
    }

    .contentDiv img {
        width: 100%;
        height: auto;
        display: inline-block;

    }

    .what {
        width: 48vw;
        display: inline-block;
        margin-bottom: 4vh;
    }
    
    
    
    .what img {
        width: 70%;
        margin: 0 auto;
        display: inline-block;
    }
    
    .logo img {
	max-width:31vw;
	max-height:auto;
	}

    h1, h2, h3 {
        font-size: 3vh;
        margin-left: 5vw;
        margin-right: 5vw;
        text-align: center;
    }
    
        h3 {
                font-size: 2vh;
    }
    
        .title h1 {
    	font-size: 6vh;
	}
    

    .elem {
        margin-top: 2vh;
    }
    
    .text {
    margin-top: 0vh;
}
    
    .desk {
    display:none;
    
    }  

}