/*  --------------------------------------------------------------------------  */
/*  -------------------------------- For wide screen browsers (wider than 1024) */
/*  --------------------------------------------------------------------------  */

html, body {
  height: 100%;
}

body {
    font: 400 13pt 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #584642;
    letter-spacing: -0.5px;
    background: #443a2d;
}

a {
    color: #ff0000; 
    text-decoration: none; 
    outline: 0;
    }
a:hover {
    color: #e40000;
    text-decoration: none;
    }
a img  {
    border: none;
}

.clear {
    clear: both;
}

h1 {
    margin: 0;
    padding: 0 0 40px;
    font: 400 30pt/90% 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    letter-spacing: 0; 
    text-transform: uppercase;
}

h2 {
    margin: 0;
    padding: 25px 0 7px;
    font: normal 25pt 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    letter-spacing: -1.5px; 
}

h3 {
    margin: 0;
    padding: 20px 0 7px;
    font: normal 18pt 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

h4 {
    margin: 0;
    padding: 25px 0 7px;
    font: bold 15pt 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

p {
    margin: 7px 0 7px;
    line-height: 150%;
    text-align: left;
    }
p.emphasis {
    display: block;
    margin: 0 0 14px;
    font: 300 19pt/150% 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    letter-spacing: -0.75px;
}

ol {
    margin: 0 0 0 18px;
    }
ul li, ol li{
    margin: 7px 0 7px;
    line-height: 28px;
    text-align: left;
}


#container {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    min-height: 100%;
}

body.pg-home #container {
    background: #443a2d url('../images/bg-container-home.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-previous #container,
body.pg-current #container,
body.pg-future #container {
    background: #666159 url('../images/bg-container-projects.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-gallery #container {
    background: #b49b85 url('../images/bg-container-gallery.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-contact #container {
    background: #ccc8af url('../images/bg-container-contact.jpg') no-repeat center top;
    background-size: 100%;
}

.content {
    margin: auto;
    width: 1248px;
    background: url('../images/bg-content-left.png') repeat-y left top,
                url('../images/bg-content-right.png') repeat-y right top;
}

/*  ----------------------------------------------- HEADER  */


/*  -- Banner */

header {
    padding: 0;
    height: 450px;
}

body.vanilla header{
    height: 115px;
}

#menubar {
    height: 115px;
    }
#menubar .content {
    position: relative;
    height: 450px;
}

body.pg-home #menubar {
    background: url('../images/bg-menubar-home.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-previous #menubar,
body.pg-current #menubar,
body.pg-future #menubar {
    background: url('../images/bg-menubar-projects.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-gallery #menubar {
    background: url('../images/bg-menubar-gallery.jpg') no-repeat center top;
    background-size: 100%;
}

body.pg-contact #menubar {
    background: url('../images/bg-menubar-contact.jpg') no-repeat center top;
    background-size: 100%;
}






/*  -- Logo */

a#logo {
    position: absolute;
    left: 30px;
    top: 18px;
    display: block;
    width: 276px;
    height: 78px;
    background: url('../images/bg-logo.png') no-repeat top;
    }
a#logo:hover{
    background-position: bottom;
}

/*  -- MENU */

nav {    
    position: absolute;
    right: 30px;
    top: 0;
    margin: 0;
    height: 115px;
}

ul#menu {
    width: 100%;
    height: 115px;
    text-align: right;
    }
ul#menu ul {
    list-style: none;
    width: 246px;
    }
ul#menu li {
    display: inline-block;
    margin: 0;
    height: 115px;
    }
ul#menu a {
    display: block;
    padding: 0 15px;
    width: 100%;
    line-height: 107px;
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: -0.25px;    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    *zoom: 1;
    color: #fff;
    text-shadow: 0 0 5px #000;
    }
ul#menu li a:hover {
    color: #fff;
    border-bottom: 4px solid rgba(255,255,255,0.8);
}

    
.pg-home ul#menu li.btn-home,
.pg-previous ul#menu li.btn-previous,
.pg-current ul#menu li.btn-current,
.pg-future ul#menu li.btn-future,
.pg-gallery ul#menu li.btn-gallery,
.pg-contact ul#menu li.btn-contact {
    border-top: 4px solid #ff0000;
}

.pg-home ul#menu li.btn-home a:hover,
.pg-previous ul#menu li.btn-previous a:hover,
.pg-current ul#menu li.btn-current a:hover,
.pg-future ul#menu li.btn-future a:hover,
.pg-gallery ul#menu li.btn-gallery a:hover,
.pg-contact ul#menu li.btn-contact a:hover {
    border-bottom: none;
}


/*  -- BODY */

#body {
    flex: 1;
    background: rgba(255,255,255,0.8);
    }
#body .content {
    padding: 50px;
}


/*  -- FOOTER  */

footer {
    padding: 0;
    background: #dad9d5;  
}

footer .content {
    padding: 30px 0;
}

ul#footermenu {
    margin: auto;
    text-align: center;
    }
ul#footermenu li {
    display: inline-block;
    padding: 0;
    font-size: 11pt;
    color: #555; 
    }
ul#footermenu a {
    padding: 10px;
    width: 100%;
    font-size: 11pt;
    letter-spacing: -0.5px;    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #555; 
    }
ul#footermenu li a:hover {
    color: #000; 
}

.pg-home ul#footermenu li a.btn-home,
.pg-previous ul#footermenu li a.btn-previous,
.pg-current ul#footermenu li a.btn-current,
.pg-future ul#footermenu li a.btn-future,
.pg-gallery ul#footermenu li a.btn-gallery,
.pg-contact ul#footermenu li a.btn-contact {
    color: #999;
    cursor: default;
}

ul#footermenu li.webdesign:before {
    padding-right: 3px;
    content: "|"
    }
ul#footermenu li.copyright:before {
    padding-right: 12px;
    content: "|"
}


/*  -- CONTENT ----------  */


/*  -- home  */


section.homeleft {
    float: left;
    width: 55%;
}

section.homeright {
    float: right;
    padding: 0 0 0 50px;
    border-left: 1px dotted #555;
    width: calc(45% - 51px);
    }
section.homeright h4 {
    padding: 0;
}





/* Projects */

#projects{
    margin-left: -10px;
}

.projectlisting {
    float: left;
    margin: 0 0 10px 10px;

    background-color: rgba(255,255,255,0.5);
    }
.projectlisting .summary {
    padding: 10px 20px 0;
    }
.projectlisting .summary h3 {
    padding: 0 0 7px;
}


body.pg-previous .projectlisting {
    width: calc(20% - 10px);
    }
body.pg-previous .projectlisting .summary{
    height: 400px;
}

body.pg-current .projectlisting {
    width: calc(25% - 10px);
    }
body.pg-current .projectlisting .summary{
    height: 200px;
}



/* Gallery */

ul.roxgal{
    list-style-type: none;
    margin: 0 0 0 -4px;
    padding: 0;
    }
ul.roxgal li{
    float: left;
    display: block;
    margin: 4px;
    padding: 0;
    width: 275px;
    height: 175px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 2px 0 #555;
    box-shadow: 0 0 2px 0 #555;
    }
ul.roxgal li:hover{
    -webkit-box-shadow: 0 0 2px 0 #555;
    box-shadow: 0 0 2px 0 #555;
    }
ul.roxgal li a {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }
ul.roxgal a:hover{
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    -webkit-box-shadow: inset 0 0 1px 5px rgba(255,255,255,0.8);
    box-shadow: inset 0 0 1px 5px rgba(255,255,255,0.8);
}



/* Contact */

.contactleft {
    float: left;
    width: 343px;
    text-align: right;
}

form.basicform {
    position: relative;
    margin: 0 0 3px;
    padding: 20px;
    background-color: rgba(0,0,0,0.1);
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    }
form.basicform span {
    position: absolute;
    top: -15px;
    right: 0;
    font-size: 8pt;
    }
form.basicform h3 {
    padding: 0;
    text-align: left;
    }
form.basicform p {
    line-height: 13pt;
    }
form.basicform label {
    display: block;
    text-align: left;
    }
form.basicform .textfield {
    display: block;
    margin: 0 0 3px;
    padding: 10px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    background: #fff;
    border: none;
    font: 600 11pt 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    }
form.basicform .textarea {
    min-height: 145px;
    }
.g-recaptcha {
    margin: 10px 0 0;
    float: right;
    }
form.basicform .submit {
    display: inline-block;
    float: right;
    margin: 10px 0 0;
    padding: 7px 17px;
    background-color: #ff0000;
    border: 0;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    }
form.basicform .submit:hover {
    color: #fff;
    background-color: #e40000;
}

.formconfirmation {
    margin: 0;
    padding: 20px 25px;
    width: 100%;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    }
.formconfirmation h3 {
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    }
.formconfirmation p {
    margin: 5px 0;
    line-height: 20px;
    }
.formconfirmation a {
    color: #fff;
}

.fc-fail {
    background: #a21c25;
    }
.fc-win {
    background: #3b8c39;
}

#ValidatedForm label{
    display: block;
    margin: 10px 0 0;
    }
#ValidatedForm label input{
    margin: 0 7px 5px 0;
    }
#ValidatedForm label.error{
    display: block;
    margin: 0 0 10px 10px;
    width: auto;
    color: red;
}

table.contacts {
    float: right;
    width: calc(100% - 383px);
    }
table.contacts td {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
    }
table.contacts td.map {
    padding: 15px 0 10px;
    border-bottom: none;
    }
table.contacts td.map iframe {
    float: left;
    margin: 0;
    width: 100%;
    height: 380px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}