body {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: #fff;
}
h1, h2 {
    font-family: 'Kalam', serif;
}
h1 {
    font-size: 3em;
    margin-bottom: 0;
}
h2 {
    font-size: 2em;
    margin-top: 0px;
    margin-bottom: 0px;
}
#fullpage {
    display: block;
    position: relative;
}

@media only screen and (min-width: 320px) {
    .profilePic {
        max-width: 40%;
        max-height: 75%;
        height: auto;
        float: right;
        padding: 10px;
    }
    .item img {
        max-width: 100%;
        max-height: 50%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
    }
    h4 {
      margin: 4px;
    }
    #home {
        background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("Images/code1sm.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: white;
    }
    #contact {
        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("Images/laptop1sm.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: white;
    }
    #about p {
        text-align: left;
        padding-left: 5px;
        font-size: 1em;
    }
    #menu {
        list-style: none;
        background: #111;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        text-align: left;
        margin-top: 0;
        padding-left: 20px;
    }
    #menu li a {
        text-decoration: none;
        color: #fff;
        font-family: "Kalam", serif;
        font-size: 1.75em;
    }
    .site-wrap {
        min-width: 100%;
        min-height: 100%;
        background-color: #fff;
        position: relative;
        top: 0;
        bottom: 100%;
        left: 0;
        z-index: 1;
    }
    .nav-trigger {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    label[for="nav-trigger"] {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 2;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' style='fill:#fff;'/><rect y='24' width='30' height='6' style='fill:#fff;'/><rect y='12' width='30' height='6' style='fill:#fff;'/></svg>");
        background-size: contain;
    }
    .nav-trigger:checked+ label {
        left: 215px;
    }
    .nav-trigger:checked~ .site-wrap {
        left: 200px;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
    }
    .nav-trigger+ label, .site-wrap {
        transition: left 0.2s;
    }
    body {
        overflow-x: hidden;
    }
    @media only screen and (max-height: 570px) {
      .logos img {
        max-width: 60px;
      }
      .profilePic {
        max-width: 35%;
      }
      #about p {
        font-size: .85em;
      }
    }
		.logos {
			text-align: left;
			padding-left: 5px;
		}
		.logos i {
			font-size: 2.5em;
		}
}
@media only screen and (min-width: 768px) {
    .profilePic {
        max-width: 50%;
        max-height: 75%;
        height: auto;
        float: right;
        padding: 10px;
        padding-right: 5%;
    }
    #home {
        background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("Images/code1sm.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: white;
    }
    #contact {
        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("Images/laptop1sm.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: white;
    }
    #about p {
        text-align: left;
        padding-left: 15%;
    }
    .nav-trigger {
        display: none;
    }
    label {
        display: none;
    }
    #menu {
        display: block;
        position: fixed;
        text-align: left;
        height: 10px;
        z-index: 2;
        top: 0;
        width: 100%;
        padding: 5px 5px 5px 0;
        background: transparent;
    }
    #menu ul {
        padding: 0 40px;
    }
    ul {
        display: block;
        list-style-type: disc;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        -webkit-padding-start: 40px;
    }
    #menu li {
        display: inline-block;
        position: relative;
        margin: 0 5px 0 5px;
    }
    #menu li a {
        color: #fff;
        text-decoration: none;
        font-family: "Kalam", sans-serif;
        padding: 2px 5px 2px 5px;
        font-size: 1em;
    }
    #menu li.active {
        text-decoration: underline;
    }
    #menu li:hover {
        text-decoration: underline;
    }
		.logos {
			display: inline-block;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
		}
		.logos i {
			font-size: 4em;
		}
}
#contact a {
    text-decoration: none;
    font-size: 3em;
    color: #fff;
    padding: 10px;
}
#contact a:hover {
    color: #92AAC7;
}
#about a {
    color: #fff;
}
#about a:hover {
    color: #92AAC7;
}
.sm-text {
    position: absolute;
    bottom: 5px;
    font-size: .75em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.sm-text i {
    font-size: 1em;
    padding: 2px;
}
.fp-controlArrow.fp-prev {
    border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
}
.fp-controlArrow.fp-next {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
}
.fp-controlArrow.fp-prev:hover {
    border-color: transparent rgba(130, 130, 130, 0.5) transparent transparent;
}
.fp-controlArrow.fp-next:hover {
    border-color: transparent transparent transparent rgba(130, 130, 130, 0.5);
}