@font-face {
    font-family: 'arquitectaregular';
    src: url('../fonts/latinotype_-_arquitecta-webfont.woff2') format('woff2'),
         url('../fonts/latinotype_-_arquitecta-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'arquitecta_blackblack_italic';
    src: url('../fonts/latinotype_-_arquitectablack-italic-webfont.woff2') format('woff2'),
         url('../fonts/latinotype_-_arquitectablack-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* ---------------------------------------------------------------------- */
/*  Reset & Clearfix (normalize.css v3.0.2)
/* ---------------------------------------------------------------------- */

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body {margin: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}audio:not([controls]) {display: none; height: 0;}[hidden], template {display: none;}a {background-color: transparent;}a:active, a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}b, strong {font-weight: 700;}dfn {font-style: italic;}h1 {margin: .67em 0; font-size: 2em;}mark {background: #ff0; color: #323137;}small {font-size: 80%;}sub, sup {font-size: 75%; line-height: 0; vertical-align: baseline; position: relative;}sup {top: -.5em;}sub {bottom: -.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 1em 40px;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre {overflow: auto;}code, kbd, pre, samp {font-family: monospace,monospace; font-size: 1em;}button, input, optgroup, select, textarea {margin: 0; font: inherit; color: inherit;}button {overflow: visible;}button, select {text-transform: none;}button, html input[type=button], input[type=reset], input[type=submit] {cursor: pointer; -webkit-appearance: button;}button[disabled], html input[disabled] {cursor: default;}button::-moz-focus-inner, input::-moz-focus-inner {padding: 0; border: 0;}input {line-height: normal;}input[type=checkbox], input[type=radio] {box-sizing: border-box; padding: 0;}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height: auto;}input[type=search] {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {margin: 0 2px; padding: .35em .625em .75em; border: 1px solid silver;}legend {padding: 0; border: 0;}textarea {overflow: auto;}optgroup {font-weight: 700;}table {border-spacing: 0; border-collapse: collapse;}td, th {padding: 0;}

*, *:before, *:after {box-sizing: border-box;}

.clearfix:after {display: table; content: ''; clear: both;}

/* ---------------------------------------------------------------------- */
/*  Basic Elements & Classes
/* ---------------------------------------------------------------------- */

html {height: 100%;}
body {width: 100%; height: 100%; background: #fff; font: 16px/1.7 'arquitectaregular', sans-serif; font-weight: 300; color: #292828; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;}

::-moz-selection {background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none;}
::selection {background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none;}

a {color: #323137; text-decoration: none; transition: all .2s ease-out 0s;}

a:hover{text-decoration: underline;}
h1, h1 a {font-size: 18px;  letter-spacing: 1px; font-weight: normal;}
h2, h2 a {margin: 0 0 10px 0; font-size: 35px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase;}
h3, h3 a {margin: 0; font-size: 20px; font-weight: 300; line-height: 110%; text-transform: uppercase;}
h4, h4 a {margin: 10px 0; font-size: 16px; font-weight: 300;}


.main {width: 100%; height: auto; background: url('../images/wallpaper_800x600_1023.jpg'); background-size: 225px 112px; text-align: center}
.grey {width: 100%; text-align: center; background: #808285; color: #fff; padding: 20px 0px; font-style: italic; font-weight: bold; font-size: 17px;}
footer {text-align: center; padding: 20px; font-size: 14px;}

.content {height: 100%;}
.main .topimage {height: 40vh; background: url('../images/top.jpg') no-repeat 57% center; background-size: contain;}

.logo {margin: 20px 0px;}
.main .text {width: 70%; color: #fff; line-height: 130%; font-size: 16px; margin: 20px auto; letter-spacing: 1px; max-width: 800px;}

.nomobile .main .text {font-size: 17px;}

.small {font-size: 14px;}

.nodesktop{display: none;}

/* ---------------------------------------------------------------------- */
/*  Fade In Animation
/* ---------------------------------------------------------------------- */

/* make keyframes that tell the start state and the end state of our object */
@-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 {opacity: 0; -webkit-animation: fadeIn ease-in 1; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;}

.fade-in.one {-webkit-animation-delay: .7s; -moz-animation-delay: .7s; animation-delay: .7s;}
.fade-in.two {-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;}
.fade-in.three {-webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s;}


/* ---------------------------------------------------------------------- */
/*  Grid
/* ---------------------------------------------------------------------- */

.container {max-width: 100%; margin: 0 auto; padding: 1.25em; background: #fff;}
.row {margin: 0 0 1.25em;}
.row:last-child {margin-bottom: 0;}
div[class*='col-'] {padding: 0 1em; float: left;}
div[class*='col-'] a {display: block; position: relative;}
div[class*='col-'] img {display: block; max-width: 100%;}

@media all and (min-width: 37em) {
    .col-2-3 {width: 66.66%;}
    .col-1-2 {width: 50%;}
    .col-1-2:nth-child(2n+1) {clear: left;}
    .col-1-3 {width: 33.33%;}
    .col-1-3:nth-of-type(3n+1) {clear: left;}
    .col-1-4 {width: 25%;}
    .col-1-4:nth-child(4n+1) {clear: left;}
    .col-3-4 {width: 75%;}
    .col-1-5 {width: 20%;}
    .col-1-5:nth-child(5n+1) {clear: left;}
    .col-1-8 {width: 12.5%;}
}






/* ---------------------------------------------------------------------- */
/*  Media Queries
/* ---------------------------------------------------------------------- */

@media only screen and (max-width: 1280px) {
	.text{max-width: 80%!important; width: 80%!important;}
	.main {height: auto!important; padding-bottom: 20px; box-sizing: border-box;}
	
}


@media only screen and (max-width: 1500px) {
	.text{max-width: 600px!important;
    width: 60%!important;}
   
}

@media only screen and (max-width: 1024px) {
	.text{max-width: 800px!important;
    width: 80%!important;}
   
 
}



@media only screen and (max-width: 800px) {
	.nomobile{display: none;}
	.nodesktop{display: block;}
	
	.logo{margin: 0px; padding: 30px 0px 20px 0px; background: #2f2f2f;}
	.logo img{max-width: 330px;}
	.main {height: auto;}
	.main .topimage {height: auto;}
	.text{width: 100%!important; max-width: 100%!important; padding: 20px 40px; text-align: center; line-height: 140%;}
	.text strong{display: block; text-align: center;}
	.grey{padding: 20px; line-height: 120%; font-size: 14px;}
	footer {background: #2f2f2f; color: #fff;}
	footer a {color: #fff}
	
}