/* 1. Fonts */
@font-face {
    font-family: 'Mono Social Icons Font';
    src: url('/fonts/MonoSocialIconsFont-1.10.eot');
    src: url('/fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
         url('/fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
         url('/fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
         url('/fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
    src: url('/fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.symbol, a.symbol:before {
    font-family: 'Mono Social Icons Font';
/*
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
*/
}

a.symbol:before {
    content: attr(title);
/*     margin-right: 0.3em; */
    font-size: 130%;
}

@font-face {
    font-family: 'amatic_scregular';
    src: url('/fonts/amaticsc-regular-webfont.eot');
    src: url('/fonts/amaticsc-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/amaticsc-regular-webfont.woff') format('woff'),
         url('/fonts/amaticsc-regular-webfont.ttf') format('truetype'),
         url('/fonts/amaticsc-regular-webfont.svg#amatic_scregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amaticbold';
    src: url('/fonts/amatic-bold-webfont.eot');
    src: url('/fonts/amatic-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/amatic-bold-webfont.woff') format('woff'),
         url('/fonts/amatic-bold-webfont.ttf') format('truetype'),
         url('/fonts/amatic-bold-webfont.svg#amaticbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'verb_extralightregular';
    src: url('/fonts/VerbExtralight-webfont.eot');
    src: url('/fonts/VerbExtralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/VerbExtralight-webfont.woff') format('woff'),
         url('/fonts/VerbExtralight-webfont.ttf') format('truetype'),
         url('/fonts/VerbExtralight-webfont.svg#verb_extralightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'wc_roughtrad_btaregular';
    src: url('/fonts/WC_RoughTrad-webfont.eot');
    src: url('/fonts/WC_RoughTrad-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/WC_RoughTrad-webfont.woff') format('woff'),
         url('/fonts/WC_RoughTrad-webfont.ttf') format('truetype'),
         url('/fonts/WC_RoughTrad-webfont.svg#wc_roughtrad_btaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    color:#fff;
}

a.button .symbol {
    vertical-align: middle;
    font-size: 2.5em;
    margin-right:10px
}

a.button {

}

/* 2. Section styles */

    /* 2.1 Intro */
    #intro {
	    background: #306f84;
	    background: url(../img/yosemite.jpg) fixed no-repeat center center;
	    background-size: cover ;
        height:100vh;
        padding-top:10%;
    }
    
    h1, h2 {
        color: #fff;
    }
    
    h1 {
        font-size: 5em;
        font-family: amatic_scregular;
    }
    
    #intro h1 {
        font-family: amatic_scregular;
        font-size: 5em;
        text-transform: uppercase;
        line-height: 1;
    }
    
    #intro h2 {
        font-size: 1.7em;
    }
    
    #intro p {
        font-size:1.3em;
    }
    
    #icons {
        font-size: 3em;
        text-align: center;
    }
    
/*
    #icons ul {
        text-align: center;
    }
    
    #icons li {
        display: inline-block;
        margin: 0 5px;
    }
*/

        /* Icon colors */   
        
        #icons a {
            color: rgb(255, 255, 255);    

        }
        
/*
        #icons .twitter a:hover {
            color: rgb(85, 172, 238);
        }
        
        #icons .facebook a:hover {
            color: rgb(0, 123, 182);
        }
        
        #icons .linkedin a:hover {
            color: rgb(0, 123, 182);
        }
        
        #icons .vimeo a:hover {
            color: rgb(0, 191, 143);
        }
        
        #icons .fivehundredpx a:hover {
            color: rgb(0, 174, 239);
        }
        
        #icons .instagram a:hover {
            color: rgb(81, 127, 164);
        }
        
        #icons .dribbble a:hover {
            color: rgb(234, 76, 137);
        }
*/
        
    /* 2.2 Presentation */
    #presentation {
	    background: #306f84;
	    background: url(../img/wood.jpg) fixed;
        min-height:100vh;
        padding-top:10%;
    }

    #presentation h1 {
        font-size: 5em;
        text-transform: uppercase;
    }
    
    /* 2.3 Projects */
    #projects {
	    background: #306f84;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-repeat:no-repeat;
        background: -webkit-radial-gradient(to top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 30%, transparent 100%), url(../img/blueprint.png);
        background: -moz-linear-gradient( to top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 30%, transparent 100%);
        background: -ms-linear-gradient( to top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 30%, transparent 100%);
        background: -o-linear-gradient(to top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 30%, transparent 100%);
        background: url(../img/blueprint.png) fixed;
        min-height:100vh;
        padding-top:5%;
    }
    
    #projects h1 {
        font-family: wc_roughtrad_btaregular;
        font-size: 5em;
        font-weight: normal;
    }
    
    #skills {
	    background: #372e31;
        min-height:100vh;
        padding-top:5%;
    }
    
    #skills h1 {
        color:#f0575b;
    }
    
    #skills h3 {
        color:#f0575b;
        font-size: 1rem;
        text-align: center;
    }
    
    #interests {
        background: #28292b;
        min-height:100vh;
        padding-top:5%;        
    }
    
    #interests .row {
        margin-bottom: 2%;
    }
    
    
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
  .foo {
    height: 1024px;
  }
}
 
/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
  .foo {
    height: 768px;
  }
}
 
/**
 * iPhone 5
 * You can also target devices with aspect ratio.
 */
@media screen and (device-aspect-ratio: 40/71) {
  .foo {
    height: 500px;
  }
}