/*

	00. Font Face
	01. Key Frames fade in
	02. Media Queries MAX WIDTH 1024px
	03. Media Queries MAX WIDTH 960px
	04. Media Queries MAX WIDTH 720px
	05. Media Queries MAX WIDTH 520px
	06. Media Queries for landscapes
	07. Media Queries for Portraits
	08. Media Queries for Works Grid
	09. Mobile Navigation Queries
	
	
*/

/* 00. FONT FACE ================================================== */


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

}

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

}

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

}

/* SOCIAL ICON */


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

}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGMa9awK0IKUjIWABZIchFI8.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff');
}
/* UI DEFAULTS */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0;
}

body {
line-height:1.5;
font:13px/24px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:400;
color:#34495e;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
}

ol,ul {
list-style:none;
margin:0;
padding:0 0 0 30px;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

a,a:visited,a:hover {
outline:0;
}

.alignright {
float:right;
text-align:right;
}

.embed-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.embed-container iframe,.embed-container object,.embed-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.hidden {
display:none!important;
}

em {
font-style:italic;
}

small {
font-size:80%;
}

hr {
border:solid #eee;
clear:both;
height:0;
border-width:1px 0 0;
margin:10px 0 30px;
}

pre {
height:auto;
font-family:Consolas,monospace;
border:1px solid #f0f0f0;
background:#fafafa;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
overflow-x:auto;
margin:0 0 20px;
padding:10px 20px;
}

img {
max-width:100%;
height:auto;
}

a {
color:#e74c3c;
text-decoration:none;
outline:0;
-webkit-transition:all .2s ease;
-moz-transition:all .2s ease;
-ms-transition:all .2s ease;
-o-transition:all .2s ease;
transition:all .2s ease;
}

a:hover,a:focus {
color:#666;
}

a:focus {
outline:0;
outline-offset:0;
}

p a,p a:visited {
line-height:inherit;
}

ul,ol {
margin-bottom:20px;
}

ul {
list-style:none;
}

ul.styled-list {
padding:0;
}

ol {
list-style:decimal;
}

.alignleft {
text-align:left;
}

.aligncenter {
text-align:center;
display:block;
}

h1,h2,h3,h4,h5,h6 {
font-weight:400;
font-family:'Open Sans',sans-serif;
margin-bottom:20px;
line-height:1em;
text-transform:none;
}


h1 {
font-size:40px;
margin-bottom:0;
}

h2 {
font-size:30px;
font-weight:600;
}

h3 {
font-size:24px;
}

h4 {
font-size:20px;
}

h5 {
font-size:18px;
font-weight:600;
}

p {
margin-bottom:25px;
}

/* 01. KEY FRAMES FADE IN ================================================== */


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    opacity: 0.7;
    filter: alpha(opacity=70);
 
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}


/* 02. MAX WIDTH ================================================== */

header 
{
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFF;
    position: absolute;
    background-image: url("../img/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    min-width: 100%;
    min-height: 100%;
}

/* 03. MAX WIDTH 960px ================================================== */



@media screen and (max-width: 960px) {

header {
	background: url('http://placehold.it/1400x800') center; /* CHANGE HERE */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}


/* 04. MAX WIDTH 720px ================================================== */


@media screen and (max-width: 720px) {
header {
	background: url('http://placehold.it/1400x800') center; /* CHANGE HERE */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

}


/* 05. MAX WIDTH 520px ================================================== */


@media screen and (max-width: 520px) {

	
header {
	background: url('http://placehold.it/1400x800') center; /* CHANGE HERE */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }


#contact .row .col1 {
	width:90%;}

#contact .row .col2 {
	width:90%;
	margin-top:30px;
	text-align: center;}

#contact .inner blockquote p{
	color:#fff;
	text-transform:uppercase;
	font:14px/1.3 'OpenSansRegular';
}

#contact .inner form input[type="text"],
#contact .inner form input[type="email"],
#contact .inner form textarea {
	width:95%;
}


#contact .inner form .submit {
	width:100%;}

footer {
	font-size:9px;}
	
}

/* 06. Smartphones (landscape) ================================================== */


@media only screen 
and (max-device-width : 550px) 
and (orientation : landscape) {
header {
	height:100%;
}


#tab a{
	display: none;}

header h1 {
	margin-top:5%;}
#wrapper {
	position:absolute;
	width:100%;}


}

/* 07. Smartphones (portraits) ================================================== */


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation : portrait) {
header {
	height:417px;
}
#wrapper {
	position:absolute;
	top:417px;
	width:100%;}

#tab a{
	position:absolute;
	bottom:-60px;}
	
header h1 
{
	font-size:30pt;
}

/* 07. iPads (landscape) ----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

/* 07. iPads (portrait) ----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
header h1 {
	margin-top:45%;}
}