body {
margin: 0px;
height: 100%;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "oswald_font";
    src: url('../font/Oswald-Regular.eot');
    src: url('../font/Oswald-Regular.eot') format('embedded-opentype'),
         url('../font/Oswald-Regular.woff') format('woff'),
         url('../font/Oswald-Regular.ttf') format('truetype'),
         url('../font/Oswald-Regular.svg#renogare_font') format('svg');
}
@font-face {
    font-family: "graphik_font";
    src: url('../font/Graphik-Light.eot');
    src: url('../font/Graphik-Light.eot') format('embedded-opentype'),
         url('../font/Graphik-Light.woff') format('woff'),
         url('../font/Graphik-Light.ttf') format('truetype'),
         url('../font/Graphik-Light.svg#graphik_font') format('svg');
}
@font-face {
    font-family: "helvetica_font";
    src: url('../font/HelveticaLTStd-Light_2.eot');
    src: url('../font/HelveticaLTStd-Light_2.eot') format('embedded-opentype'),
         url('../font/HelveticaLTStd-Light_2.woff') format('woff'),
         url('../font/HelveticaLTStd-Light_2.ttf') format('truetype'),
         url('../font/HelveticaLTStd-Light_2.svg#helvetica_font') format('svg');
}


#preload {
display: none;
}


#home_slideshow {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
}


#shadow {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 20%;
z-index: 3;
}
@media screen and (orientation:portrait) {
#shadow {
height: 30%;
}
}


.menu {
position: absolute;
top: 6%;
right: 5%;
width: 65%;
font-family: "helvetica_font", Arial, Helvetica, sans-serif;
font-size: 1.8vh;
letter-spacing: 0.5vh;
text-align: right;
display: block;
z-index: 5;
}
@media screen and (orientation:portrait) {
.menu {
display: none;
}
}


#menu_home {
color: #fff;
}


#menu_section {
color: #333333;
}


.menu span {
opacity: 0.6;
margin-left: 5%;
cursor: pointer;
}


.lang {
margin-left: 0% !important;
}


#selected {
opacity: 1 !important;
}


.menu span:hover {
opacity: 1;
}


#logo {
position: absolute;
top: 1%;
left: 10%;
width: auto;
height: 16%;
cursor: pointer;
z-index: 5;
}
@media screen and (orientation:portrait) {
#logo {
top: 0%;
left: 2%;
width: 50%;
height: auto;
}
}


.social {
position: fixed;
left: 3%;
width: auto;
height: 7%;
cursor: pointer;
z-index: 5;
}
@media screen and (orientation:portrait) {
.social {
left: 5.5%;
width: 14%;
height: auto;
}
}


#fb {
top: 4.5%;
}
@media screen and (orientation:portrait) {
#fb {
top: 18%;
}
}


#ig {
top: 11%;
}
@media screen and (orientation:portrait) {
#ig {
top: 26%;
}
}


#squares {
position: fixed;
bottom: 0px;
right: 0px;
width: auto;
height: 50%;
z-index: 5;
}
@media screen and (orientation:portrait) {
#squares {
height: 45%;
}
}


#menu_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#menu_mobile {
position: fixed;
top: 0px;
left: 0px;
width: 91.5%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
font-family: "renogare_font", Arial, Helvetica, sans-serif;
color: #fff;
font-size: 4.5vw;
line-height: 8vw;
letter-spacing: 0.6vw;
text-align: right;
padding-top: 33%;
padding-right: 8.5%;
z-index: 4;
}
}


#menu_mobile span {
opacity: 0.6;
}



.menu_button {
display: none;
}
@media screen and (orientation:portrait) {
.menu_button {
position: absolute;
top: 3.3%;
right: 6%;
width: 17%;
height: auto;
display: block;
z-index: 5;
}
}


#menu_close {
display: none;
}


#content {
position: absolute;
top: 25%;
left: 12%;
width: 83%;
height: 75%;
}
@media screen and (orientation:portrait) {
#content {
top: 20%;
left: 22%;
width: 70%;
}
}


.thumbnail {
position: relative;
float: right;
width: 32%;
height: auto;
margin-left: 10px;
margin-bottom: 10px;
cursor: pointer;
}
@media screen and (orientation:portrait) {
.thumbnail {
width: 100%;
margin-left: 0px;
margin-bottom: 20px;
}
}


#project_details {
position: absolute;
top: 0px;
left: 0px;
width: 30%;
padding-bottom: 20%;
font-family: "graphik_font", Arial, Helvetica, sans-serif;
color: #333333;
font-size: 1.8vh;
line-height: 3.5vh;
letter-spacing: 0.1vh;
}
@media screen and (orientation:portrait) {
#project_details {
position: relative;
width: 98%;
padding-left: 2%;
font-size: 3.5vw;
letter-spacing: 0.1vw;
}
}


#project_title {
font-family: "oswald_font", Arial, Helvetica, sans-serif;
font-size: 10vh;
line-height: 10vh;
letter-spacing: -0.2vh;
}
@media screen and (orientation:portrait) {
#project_title {
font-size: 13vw;
line-height: 13vw;
letter-spacing: -0.2vw;
}
}


#more {
display: none;
}


#view_more {
cursor: pointer;
}


#project_gallery {
position: absolute;
top: 0px;
left: 36%;
width: 64%;
height: 100%;
}
@media screen and (orientation:portrait) {
#project_gallery {
position: relative;
left: 0%;
width: 100%;
height: 0%;
}
}


.gallery a img {
float: right;
width: 31.5%;
height: auto;
margin-left: 10px;
margin-bottom: 10px;
}
@media screen and (orientation:portrait) {
.gallery a img {
width: 48%;
}
}


#main {
width: 98%;
margin-left: 0px;
margin-bottom: 25px;
}
@media screen and (orientation:portrait) {
#main {
margin-bottom: 40px;
}
}


#spacer {
width: 100%;
margin: 0px;
height: 10px;
}


#contact_form {
position: relative;
width: 100%;
height: 570px;
}
@media screen and (orientation:portrait) {
#contact_form {
height: 800px;
}
}


form {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-family: "graphik_font", Arial, Helvetica, sans-serif;
color: #333333;
font-size: 2.7vh;
line-height: 2.8vh;
letter-spacing: 0.3vh;
}
@media screen and (orientation:portrait) {
form {
font-size: 5.5vw;
line-height: 6vw;
letter-spacing: 0.8vw;
}
}


form input {
width: 95%;
height: 12%;
font-family: "graphik_font", Arial, Helvetica, sans-serif;
color: #333333;
font-size: 2.9vh;
letter-spacing: 0.3vh;
border-width: 0px;
border-bottom: 1px;
border-style: solid;
border-color: #333333; 
background-color: transparent;
}
@media screen and (orientation:portrait) {
form input {
height: 18%;
font-size: 5.5vw;
letter-spacing: 0.8vw;
}
}


#send {
border-bottom: 0px;
text-align: left;
cursor: pointer;
}


#map {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
@media screen and (orientation:portrait) {
#map {
height: 800px;
padding-bottom: 150px;
}
}


#aboutus_content {
position: absolute;
top: 0px;
left: 36%;
width: 64%;
height: 100%;
font-family: "graphik_font", Arial, Helvetica, sans-serif;
color: #333333;
font-size: 2vh;
line-height: 3.7vh;
letter-spacing: 0.1vh;
}
@media screen and (orientation:portrait) {
#aboutus_content {
position: relative;
margin-left: 3%;
left: 0%;
width: 95%;
height: 0%;
font-size: 3.5vw;
letter-spacing: 0.1vw;
}
}


#services_content {
position: absolute;
top: 0px;
left: 36%;
width: 64%;
font-family: "graphik_font", Arial, Helvetica, sans-serif;
color: #333333;
font-size: 1.8vh;
line-height: 3.5vh;
letter-spacing: 0.1vh;
}
@media screen and (orientation:portrait) {
#services_content {
position: relative;
margin-left: 3%;
left: 0%;
width: 95%;
font-size: 3.5vw;
letter-spacing: 0.1vw;
}
}


.part {
position: absolute;
top: 0px;
}
@media screen and (orientation:portrait) {
.part {
position: relative;
}
}


#part01 {
left: 0px;
width: 48%;
}
@media screen and (orientation:portrait) {
#part01 {
width: 100%;
}
}



#part02 {
left: 52%;
width: 48%;
}
@media screen and (orientation:portrait) {
#part02 {
left: 0px;
width: 100%;
}
}


.part img {
width: 18%;
height: auto;
margin-bottom: 3%;
}
@media screen and (orientation:portrait) {
.part img {
width: 25%;
margin-bottom: 4%;
}
}


.part span {
font-family: "oswald_font", Arial, Helvetica, sans-serif;
font-size: 3.4vh;
line-height: 4vh;
letter-spacing: 0vh;
}
@media screen and (orientation:portrait) {
.part span {
font-size: 5.5vw;
line-height: 7.5vw;
letter-spacing: 0vw;
}
}


#contactus_content {
position: absolute;
top: 0px;
left: 36%;
width: 64%;
height: 100%;
}
@media screen and (orientation:portrait) {
#contactus_content {
position: relative;
margin-left: 3%;
left: 0%;
width: 95%;
height: 100%;
}
}