@font-face {
    font-family: Corbel;
    src: url("Fonts/corbel.ttf");
}

body {
padding: 0;
margin: 0;
font-family: Corbel,Trebuchet MS,Tahoma;
font-size: 1.5em;
color: black;
max-height: 999999px;
overflow-x: hidden;
background: #f2f2f2; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #d9d9d9, #ffffff, #d9d9d9); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #d9d9d9, #ffffff, #d9d9d9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #d9d9d9, #ffffff, #d9d9d9); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #d9d9d9, #ffffff, #d9d9d9); /* Standard syntax */
}

header {
padding: 4em;
background-image: url("Assets/rotator/banner1.jpg");
background-size: cover;
background-position: center center;
position: relative;
}

.fader {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #888;
font-size: 1.2em;
padding-top: 2em;
background: black;
z-index: 5;
opacity: 1;
overflow-y: none;
transition: 3s all;
}

.header-text {
width: 100%;
margin-left: -3.7em;
margin-top: 7em;
position: absolute;
text-align: center;
color: white;
line-height: 100%;
letter-spacing: .4em;
text-transform: uppercase;
text-shadow: 0px 0px 20px black;
z-index: 2;
}

h1 {
font-size: 3em;
}

h2 {
font-size: 1.2em;
}

.rotator-shell {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}

.rotator {
position: absolute;
width: 100%;
height: 100%;
background-size: contain;
-webkit-animation: rotate 30s linear infinite; /* Safari 4.0 - 8.0 */
animation: rotate 30s linear infinite;
}

.ring1 {
background-image: url("Assets/rotator/ring1.png");
}

.ring2 {
background-image: url("Assets/rotator/cal-shape7.png");
-webkit-animation: counter-clockwise 5s linear infinite; /* Safari 4.0 - 8.0 */
animation: counter-clockwise 5s linear infinite;
}

.ring3 {
background-image: url("Assets/rotator/cal-shape6.png");
-webkit-animation: clockwise 3s linear infinite; /* Safari 4.0 - 8.0 */
animation: clockwise 3s linear infinite;
}

.ring4 {
background-image: url("Assets/rotator/cal-shape8.png");
-webkit-animation: counter-clockwise 4s linear infinite; /* Safari 4.0 - 8.0 */
animation: counter-clockwise 4s linear infinite;
}

@keyframes clockwise {
    0%   { -ms-transform: rotate(0deg); webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes counter-clockwise {
    0%   { -ms-transform: rotate(360deg); webkit-transform: rotate(360deg); transform: rotate(360deg); }
    100% { -ms-transform: rotate(0deg); webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

.content {
margin: 0 auto;
margin-top: 1.5em;
margin-bottom: 1.5em;
max-width: 1000px;
}

p,ul {
width: 80%;
max-width: 900px;
margin: 0 auto;
line-height: 2em;
}

li { margin-left: 3em; }

a {
padding-top: 2em;
color: black;
font-size: .9em;
text-decoration: none;
}

a:visited {
color: black;
}

h3 {
font-size: 1.4em;
width: 100%;
text-align: center;
padding-top: .7em;
padding-bottom: .7em;
font-weight: bold;
letter-spacing: .2em;
text-transform: uppercase;
margin: 0;
background: #f2f2f2; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#ffffff, #d9d9d9); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ffffff, #d9d9d9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ffffff, #d9d9d9); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ffffff, #d9d9d9); /* Standard syntax */
transition: .4s all;
}

.centered { text-align: center; }
.padding-80 { width: 80%; margin-left: 10%; margin-right: 10%; }
.padding-60 { width: 60%; margin-left: 20%; margin-right: 20%; }

#spartan-logo {
width: 10%;
transition: .4s all;
}

.skills {
max-width: 2400px;
}

.skills > ul {
list-style: none;
text-align: center;
max-width: 2400px;
padding: 0;
}

.skills > ul > li {
font-size: 1.2em;
display: inline-block;
padding: .3em .8em .3em .8em;
margin: .6em .3em .6em .3em;
background: #ccc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#ededed, #ccc); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ededed, #ccc); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ededed, #ccc); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ededed, #ccc); /* Standard syntax */
border-radius: 7px;
}

.skills > ul > li:hover {
background: #0B3C6E; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#1A72C9, #0B3C6E); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1A72C9, #0B3C6E); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1A72C9, #0B3C6E); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1A72C9, #0B3C6E); /* Standard syntax */
}

#best > li:hover {
color: white
}

#better > li:hover {
color: white
}

#good > li:hover {
color: white;
}

.proj {
position: relative;
display: inline-block;
vertical-align: top;
min-height: 360px;
width: 46%;
margin: 2%;
transition: .4s all;
}

.proj:hover {
background-color: #ccc;
}

.proj > img {
width: 100%;
}

.proj > p {
margin-left: 2.5%;
width: 95%;
}

footer {
color: white;
text-align: center;
padding: 1em;
font-size: .9em;
background-image: url("Assets/rotator/banner1.jpg");
background-size: cover;
background-position: center center;
background: #424242; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#424242, #545454, #424242); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#424242, #545454, #424242); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#424242, #545454, #424242); /* For Firefox 3.6 to 15 */
background: linear-gradient(#424242, #545454, #424242); /* Standard syntax */
}

footer > p > a {
font-size: 1em;
color: white;
}

footer > p > a:visited {
color: white;
}

footer > p > a:hover {
text-decoration: underline;
}

.social {
width: 40%;
margin: 0 auto;
}

.social > a {
width: 33%;
}

.social > a > img {
width: 12%;
height: auto;
margin: 6.5%;
opacity: .4;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
transition: .5s all;
}

.social > a > img:hover {
opacity: 1;
}

@media all and (orientation:portrait) {
    .proj {
        width: 86%;
        margin: 7%;
    }
    #spartan-logo {
    	width: 25%;
    }
    .skills > ul > li {
        font-size: 2em;
        border-radius: 14px;
    }
    footer {
        padding: 3em .5em 2em .5em;
    }
    .proj > p,footer > p {
        font-size: 2em;
    }
    .social {
        width: 100%;
    }
}