/*
purple #9966CC
brown #7B3F00
blue #4682b4
green #AAF0D1
*/

@font-face {
    font-family: "goudy";
    src: url("goudy.TTF");
}

@font-face {
    font-family: "gill";
    src: url("gill.TTF");
}

html {
    background-image: url(Images/diagonal-gradient.png), url(Images/steel.png), url(Images/mint.png), url(Images/am.png);
    background-size:  100% 100%, auto, auto, auto;
    padding:0;
    margin:0;
    height: 100%;
    word-wrap: break-word;
}

#container {
    margin: 0 auto;
    max-width: 50%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.other{
    display: none;
}

.top{
    padding-top: 10px;
}

#main{
    border: 1px solid #7B3F00;
    box-shadow: 15px 15px 30px #888888;
    border-radius: 15px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #dcf9ec;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

h1, h2, h3{
    font-family: "gill", 'Gill Sans MT', 'Trebuchet MS', 'Arial';
    color: #4682b4;
}

.nomargin{
    margin: auto 0;
}

.ion-arrow-left-c{
    font-size: 1.4em;
}
.ion-arrow-right-c{
    font-size: 1.4em;
}

.h1{
    padding-top: 0.5em;
}

.profile{
    float: left;
    padding-right: 10px;
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

.space{
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    -webkit-animation-delay: 0.5s; /* Safari and Chrome */
    animation-delay: 0.5s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

.switch{
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

p{
    font-family: "goudy", 'Goudy Old Style', 'Palatino Linotype', 'Times';
    font-size: 1.4em;
    clear: both;
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

#ian{
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    font-size: 4em;
}

.weblink{
    font-family: "goudy", 'Goudy Old Style', 'Palatino Linotype', 'Times';
    font-size: 1.4em;
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.appear{
    -webkit-animation: one 1.5s;
    animation: one 1.5s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    opacity:0;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

video{
    width: 70%;
}

.portfolio{
    display: none;
}

#none{
    display: none;
}

@-webkit-keyframes one {
    from {

        opacity:0;}
    to {
        opacity:1;}
}

@keyframes one {
    from {
        opacity:0;}
    to {
        opacity:1;}
}

@media (max-width: 1200px) {

    html{
        text-align: center;
        background-color: black;
    }

    .profile{
        float: none;
        padding-right: 10px;
    }

    .top{
        padding-top: 0px;
    }

    #container {
    max-width: 80%;
    }
}


/*  SECTIONS  ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
    text-align: center;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 1200px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF FOUR   ============================================================================= */


.span_4_of_4 {
    width: 100%;
}

.span_3_of_4 {
    width: 74.6%;
}

.span_2_of_4 {
    width: 49.2%;
}

.span_1_of_4 {
    width: 23.8%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 1200px) {
    .span_4_of_4 {
        width: 100%;
    }
    .span_3_of_4 {
        width: 100%;
    }
    .span_2_of_4 {
        width: 100%;
    }
    .span_1_of_4 {
        width: 100%;
    }
}

/*  GRID OF THREE   ============================================================================= */


.span_3_of_3 {
    width: 100%;
}

.span_2_of_3 {
    width: 66.13%;
}

.span_1_of_3 {
    width: 32.26%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 1200px) {
    .span_3_of_3 {
        width: 100%;
    }
    .span_2_of_3 {
        width: 100%;
    }
    .span_1_of_3 {
        width: 100%;
    }
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 1200px) {
    .span_2_of_2 {
        width: 100%;
    }
    .span_1_of_2 {
        width: 100%;
    }
}

a:link{
    font-family: "gill", 'Gill Sans MT', 'Trebuchet MS', 'Arial';
    font-size: 1.3em;
    color: #9966CC;
    text-decoration: none;
}

a:visited {
    color: #9966CC;
    text-decoration: none;
}

a:hover {
    color: #7B3F00;
    text-decoration: none;
}

a:active {
    color: #4682b4;
    text-decoration: none;
}

a:link.contactlink{
    font-family: "goudy", 'Goudy Old Style', 'Palatino Linotype', 'Times';
    font-size: 1em;
    color: #9966CC;
}

a.contactlink:hover{
    color: #7B3F00;
}