@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700);

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: #231f20;
    background: #FFF;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    height: 100% !important;
}

/* line 3, ../scss/sass/_common.scss */
.clearfix:after, .clearfix:before {
    content: "";
    display: table;
}
/* line 7, ../scss/sass/_common.scss */
.clearfix:after {
    clear: both;
}
/* line 10, ../scss/sass/_common.scss */
.clearfix {
    *zoom: 1;
}


.clear { clear:both; }

img { border: 0px; max-width: 100%; }

a { 
    text-decoration: none;
    color: #231f20;
}

.w5 {
    float: left;
    width: 50%;
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

div#wrapper {
    min-height: 100%;
}

div#container { width: 100%; padding-bottom: 64px;  }
div#content {
}

div#logo { line-height: 150px; height: 150px; text-align: center; }
div.shadow-top {
    width: 100%;
    height: 15px;
    background: url('../images/commons/up_shadow.png') top left repeat-x;
}

div.shadow-bottom {
    width: 100%;
    height: 19px;
    background: url('../images/commons/down_shadow.png') top left repeat-x;
    margin-bottom: -19px;
    position: relative;
    z-index: 7500;
}
div#mainmenu { margin-top: -20px; }
div#mainmenu ul { list-style: none; margin: 0; padding: 10px 0px; text-align: center; background: #d1d3d4;  }
div#mainmenu ul li { display: inline-block; margin: 5px; text-transform: uppercase; }

div#mainmenu ul li.active a { font-weight: bold; }

div.square-bar {
    width: 100%;
    height: 27px;
    background: url('../images/commons/squares_pattern.png') top left repeat-x;
}

#pre-content-container { position:relative; }
#pre-content-container img { display: block; width: 100%; }

.transparent {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* Netscape */
    -moz-opacity: 0;

    /* Safari 1.x */
    -khtml-opacity: 0;

    /* Good browsers */
    opacity: 0;
}

#footer { background: #FFF; margin-top: -64px; }
#footer-text { text-align: center; padding-top: 1px; }
#footer a {
    font-weight: bold;
}

.page-header {
    background: #d1d3d4;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 15px;
}

#portfolio {
    padding-bottom: 40px;
}

#portfolio-categories {
    background: #e6e7e8;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
}

#portfolio-categories img {
    max-width: 18%;
    margin: 5px;
}

#about {

}

#about-text {
    position: relative;
    background: #00afec;
    min-height: 100%;
}

#about-text div {
    padding: 20px;
    font-size: 22px; 
    text-align: justify;
}

.white-text { color: #FFFFFF; }

#about img.desktop { display:block; width: 100%; }


#contact {

}

#portfolio {
    background: #e6e7e8;
}

#contact-form {
    background: #8ec549;
}

#contact-form div {
    padding: 20px;
    font-size: 22px; 
}

#contact img {display:block; width: 100%; }


#contact-form .form-row {
    background: #a9d072;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}

.form-row label {
    margin-left: 10px;
    line-height: 34px;
    font-size: 24px;
}

.form-row input {
    background: transparent;
    border: 0px;
    height: 30px;
    width: 350px;
    font-size: 24px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    margin-left: 5px;
    padding: 0px;
}

.form-row textarea {
    margin-right: 10px;
    height: 250px;
    width: 98%;
    background: transparent;
    resize: none;
    border: 0px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    font-size: 20px;
    padding: 5px;
}

#contact-form  .form-row-area {
    margin-bottom: 0px;
    border-bottom-right-radius: 0px;
}

#contact-form .form-row-area label img {
    position: relative;
    top: 1px;
}

#contact-form label span {
    color: #FFF;
    margin-left: 5px;
}

::-webkit-input-placeholder {
    color: white;
}

:-moz-placeholder { /* Firefox 18- */
    color: white;  
}

::-moz-placeholder {  /* Firefox 19+ */
    color: white;  
}

:-ms-input-placeholder {  
    color: white;  
}

#contact a {
    color: #FFF;
    font-weight: 500;
}

#contact-form #submit-button { float: right; }

#contact-form img { width: auto; display: inline; position:relative;top: 4px; margin-right: 5px; }


#errors { font-weight: bold; color: #cd0a0a; font-size: 14px; }
#success { font-weight: bold; color: #231f20; font-size: 14px; }

.page-header .arrow {
    position: relative;
    top: -2px;
}

.projects { 
    width: 1280px;
    margin: auto;
    text-align: center;
}

.project-item {
    width: 200px;
    height: 200px;
    display: inline-block;
    /*    margin: 25px;*/
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 50px;
    box-shadow: 5px 5px 25px #888888;
    text-transform: uppercase;
    color: #000;
    font-size: 18px;
    line-height: 16px;
    text-align: center;
    position: relative;
}

.project-casa {
    background-color: #231f20;
    color: #FFF;
}

.project-casa strong {
    color: #818181;
}

.project-item .table {
    width: 200px;
    height: 200px;
}

.project-item .table-cell {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}


.project-collana { position: relative; }
.project-collana .table { position: relative; }

.project-collana img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.project-collana .table {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.project-collana .table span {
    position:relative;
}

.project-collana {
    background-color: #939597;
    color: #000;
}

.project-collana span { color: #000; }

.project-item img {
    width: 200px;
    height: 200px;
}

.project-big {
    width: 300px;
    height: 300px;
}

.project-big img {
    width: 100%;
    height: 100%;
}