/*
Theme Name: ubud-val
Theme URI: 
Description: ubud val theme for mathilde grebot
Version: 1.0.0
Author: Jan Tack
Author URI: digidrom.de
Template: ubud
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/

@import url("../ubud/style.css");

/* open-sans-regular - latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('./fonts/open-sans-v15-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/open-sans-v15-latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/open-sans-v15-latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/open-sans-v15-latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/open-sans-v15-latin-ext-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-ext-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('./fonts/open-sans-v15-latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/open-sans-v15-latin-ext-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/open-sans-v15-latin-ext-italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/open-sans-v15-latin-ext-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/open-sans-v15-latin-ext-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-ext-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('./fonts/open-sans-v15-latin-ext-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/open-sans-v15-latin-ext-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/open-sans-v15-latin-ext-600.woff') format('woff'), /* Modern Browsers */
       url('./fonts/open-sans-v15-latin-ext-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/open-sans-v15-latin-ext-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* archivo-narrow-regular - latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/archivo-narrow-v8-latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'),
       url('./fonts/archivo-narrow-v8-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/archivo-narrow-v8-latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/archivo-narrow-v8-latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/archivo-narrow-v8-latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/archivo-narrow-v8-latin-ext-regular.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
}
/* archivo-narrow-italic - latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/archivo-narrow-v8-latin-ext-italic.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Italic'), local('ArchivoNarrow-Italic'),
       url('./fonts/archivo-narrow-v8-latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/archivo-narrow-v8-latin-ext-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/archivo-narrow-v8-latin-ext-italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/archivo-narrow-v8-latin-ext-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/archivo-narrow-v8-latin-ext-italic.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
}
/* archivo-narrow-700 - latin-ext */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/archivo-narrow-v8-latin-ext-700.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Bold'), local('ArchivoNarrow-Bold'),
       url('./fonts/archivo-narrow-v8-latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/archivo-narrow-v8-latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/archivo-narrow-v8-latin-ext-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/archivo-narrow-v8-latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/archivo-narrow-v8-latin-ext-700.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *       C O M M O N * P A R T S / M A I N * T E M L P A T E             * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* body and headlines */

body, 
#site-title h1 a, 
#site-title p.site-title a {
    color: #666;
    font-family: 'Open Sans', sans-serif;
}

#site-title p.site-title {
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 635px) {
    #site-title h1,
    #site-title p.site-title {
	font-size: 60px;
	font-size: 3.75rem;
	letter-spacing: -2px;
        display: block;
        line-height: 1.15;
	margin: 0;
	padding: 0;
    }
}       

#site-title p.site-description {
	margin: 0;
	font-size: 14px;
	font-size: 0.8125rem;
	line-height: 1.7;
	font-weight: normal;
        
}





h1 {
    margin-left: -0.1ex!important;
}

header#masthead {
    margin-top: 4ex;
}

#masthead h1, 
#masthead p.site-title {
    margin-left: -0.13ex!important;
}

h1, h2, h3, h4, h5, h6, #masthead p.site-title {
    font-family: inherit!important;
    font-weight: 600;
}    

h1.entry-title {
    margin-bottom: 0.3ex!important;
}

header.entry-header {
    margin-bottom: 40px;
}

header.entry-header h1.entry-title {    
    font-size: 200%;
}

header.entry-header h1.entry-title div.subtitle{    
    margin: 12px 0 22px;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.35;
    /*    font-size: 1.2rem;
        margin-bottom: 1rem;*/
}

header.entry-header h1.entry-title + div{    
    line-height: 1.5;
    margin-bottom: 1rem;
}


/* Mainnavigation */

#site-nav ul li a:hover {
    background-color: #aaa;
}

#site-nav ul li a {
    color: #666;
}


/* Search field  */
.search-wrap ::-webkit-input-placeholder {color: #666;font-size: 12px;}
.search-wrap :-moz-placeholder {color: #666;font-size: 12px;}
.search-wrap ::-moz-placeholder {color: #666;font-size: 12px;}
.search-wrap :-ms-input-placeholder {color: #666;font-size: 12px;}
.search-wrap #searchform input#s:active,
.search-wrap #searchform input#s:focus {
    border-bottom: 2px solid #666;
}

/* Site footer */

#colophon {
	background: #ddd;
}

.page footer#colophon,
.page footer#colophon a,
footer#colophon,
footer#colophon a{
    color: #444!important;
}

#footer-sidebar-one, 
#footer-sidebar-two, 
#footer-sidebar-three, 
#footer-sidebar-four, 
#footer-sidebar-four aside{
    padding-bottom: 0px;
    width: 230px;
    float: none;
    display: inline-block;
    vertical-align: top;
    padding-left: 0px;
    /*background-color: red;*/
}

#footer-sidebar-two, #footer-sidebar-three {
    width: auto;
    margin-right: 50px;
}

footer#colophon aside#qtranslate-2 h3.widget-title {
    display: none;
}

footer#colophon aside#qtranslate-2  {
    text-align: right;
    margin-right: 5px;

}

#footer-sidebar-wrap {
    position: relative;
    min-width: 250px;
}

footer#colophon #footer-sidebar-four,  
footer#colophon #footer-sidebar-four aside{
    /*    width: auto;
        background-color: yellow;
        padding-left: 0;
        max-width: 80px;
        max-height: 40px;
        padding-bottom: 10px;*/
    position: absolute;
    top:-1px;
    right:0;
}

footer#colophon.widget-area .widget {
    padding: 0px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                         P O R T F O L I O                             * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.page.portfolio {
    min-width: 100%!important;
}

.page.portfolio .portfolio-items {
    /*    background-color: yellow;*/
    margin-left: -1.7%;
    margin-right: -1.7%;
    max-width: 1320px;
}

.page.portfolio .item-outer-wrapper {
    display: inline-block;
    width: 33.33%;
    /*background-color: yellow;*/
    vertical-align: top;
}

.page.portfolio .item-outer-wrapper:nth-child(even) {
    /*background-color: blue;*/
}
.page.portfolio .item-inner-wrapper {
    padding-top: 100%;
    position: relative;
}

.page.portfolio .item {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 5%;
}

.page.portfolio .item a{
    background-color: silver;
    display: block;
    position: absolute;
    top: 5%; right: 5%; bottom: 5%; left: 5%;
}

.page.portfolio .item div.text{
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 75%;
    right: 0%; bottom: 0%; left: 0%;
    padding: 5%;
}

.page.portfolio .item div.text div.title {
    display: block;
    color: white;
    opacity: 1;
    font-size: larger;
    font-weight: bold;
}

.page.portfolio .item div.text div {
    display: inline;
    color: white;
}


.page.portfolio .item div.text .subtitle {
    position: relative;
    top: 1.2ex;
}

/* hover effect */ 
.page.portfolio .item .pic {
    position: absolute; 
    display: inline-block;
    overflow: hidden!important;
    top: 0; right: 0; bottom: 0; left: 0;
}

.page.portfolio .item .pic img{
    position: absolute;    
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.page.portfolio .item:hover .pic img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    filter: blur(0);
    -webkit-filter: blur(0);;
    -moz-filter: blur(0);;
    -o-filter: blur(0);
    -ms-filter: blur(0);
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                      P R O J E C T * I N F O                          * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* T A B L E */
table.set tr:nth-child(even){
    width: auto;
    background-color: #f5f5f5;
}

table.set td {
    padding: 5px;
    border-top: 1px solid #777;
    line-height: 1.4;
}

table.set tr td:nth-child(odd){
    font-weight: bold;
    
}

table.project_actors_group tr td:nth-child(even){
    /*background-color: yellow;*/
    width: 50%;
}


@media screen and (min-width: 1002px){
    .left{
        width: 60%;
        padding-right: 5%;
        /*background-color: yellow;*/
    }

    .right {
        width: 40%;
        /*background-color: yellowgreen;*/
        position: relative;
    }

    .left, .right {
        display: table-cell;
        vertical-align: top;
    }

    table.set{
        width: 100%;
        margin-right: 20px;
    }
}


@media screen and (max-width: 1001px){
    div.main div.left,
    div.main div.right {
        width: 100%;
        display: block;
        margin-bottom: 50px;
        position: static;

    }


    table.set {
        width: 100%;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                    P R O J E C T * R E V I E W S                      * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.review {
    padding: 0.7em 2em 25px;
    max-width: 600px;
}

.review h3{
    margin-top: 0px;
}


.review .review-text {
    font-style: italic;
}

.review div.review-origin {
    margin: 1.5ex 0 34px 0;
    text-align: right;
}

.review div.review-text span.start{
    margin-left: -0.7ex;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                      P R O J E C T * V I D E O                        * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div.video-div video{
    margin-bottom: 3ex;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *               P R O J E C T * I M A G E * G R I D                     * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* big version */
.grid .grid-item{
    margin-bottom: 34px;
    position: relative;
}

.grid-item--width2{
    width: 420px;
}

.grid:after {
    content: '';
    display: block;
    clear: both;
}


/* small version*/

.small-grid .grid-item{
    margin-bottom: 20px;
    position: relative;
}

.small-grid:after {
    content: '';
    display: block;
    clear: both;
}

/* Grid items */

.grid-item .pane {
    position: absolute; 
    top:0; bottom:0; left:0; right:0; 
    background-color: black;
    opacity: 0;
}

.grid-item .pane:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}

.grid-item .lens {
    width: 50px;
    height: 50px;
    /*background-color: yellow;*/
    position: absolute;
    top:0; bottom:0; left:0; right:0; 
    margin: auto;
    color: white;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5 );
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *              P R O J E C T * R O W * G A L L E R Y                    * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* big version */
.row-gallery {
    margin: -14px;
    margin-right: -30px;
    display: block;
}

.row-gallery a {
    display: inline-block;
    margin: 14px;
}

.row-gallery.height115 {
    margin: -10px;
    display: block;
}

.row-gallery.height115 a.row-item {
    display: inline-block;
    margin: 10px;
}

.row-gallery .row-item{
    position: relative;
}


.row-gallery:after {
    content: '';
    display: block;
    clear: both;
}


/* small version*/

.small-row-gallery .row-item{
    margin-bottom: 20px;
    position: relative;
}

.small-row-gallery:after {
    content: '';
    display: block;
    clear: both;
}

/* Grid items */

.row-item .pane {
    position: absolute; 
    top:0; bottom:0; left:0; right:0; 
    background-color: black;
    opacity: 0;
}

.row-item .pane:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}

.row-item .lens {
    width: 50px;
    height: 50px;
    /*background-color: yellow;*/
    position: absolute;
    top:0; bottom:0; left:0; right:0; 
    margin: auto;
    color: white;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5 );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                   G A L L A R Y - T O G G L E                         * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.show-on-big-screens-only  {
    display: block;
}
.show-on-small-screens-only {
    display: none;
}

@media screen and (max-width: 767px){
    .show-on-big-screens-only  {
        display: none;
    }
    .show-on-small-screens-only {
        display: block;
    }
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                            G A L L A R Y                              * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* hidde Navigation bar if gallery is in use */
#site-nav.hidden {
    display: none !important;
    z-index: 0;
}

body.lg-on{
    overflow: hidden;
}

/* Styling (black to white and withe font to gray) */ 

.lg-backdrop.in {
    background-color: white;
}

.lg-toolbar.group, 
.lg-toolbar.group #lg-counter, 
.lg-sub-html, 
.lg-actions .lg-icon.lg-next, 
.lg-actions .lg-icon.lg-prev,
.lg-toolbar .lg-icon {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(40, 40, 40, 1);
}

.lg-toolbar.group {
    background-color: transparent;
} 

.lg-actions .lg-icon.lg-next:hover, 
.lg-actions .lg-icon.lg-prev:hover,
.lg-toolbar .lg-icon:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(32, 32, 32, 1);
}

.lg-thumb-outer {
    display: none;
}

.lg-outer .lg-image {
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    max-height: 80%;
    width: auto !important;
    height: auto !important;
} 

.main {
    padding: 0;
    margin-bottom: 50px;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *             P R O J E C T  * N A V I G A T I O N                      * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.navable {
    display: none;
}

nav.project-navigation {           
    margin-top: 40px; 
    padding-bottom: 10px;
    /*background-color: yellow;*/
}

nav.project-navigation ul,
nav.project-navigation li {           
    list-style: none; 
    margin: 0; 
    padding: 0;
    border: 0;
    font-size: 80%;

}

nav.project-navigation li {           
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 80px;
    margin-right: 10ex;
    margin-bottom: 20px;
    text-align: center;
    text-align: center;
    border-radius: 5%;
    position: relative;
    background-color: #d8d8d8;
}

nav.project-navigation li a{           
    color: #aaa;
}

nav.project-navigation li.last {           
    margin-right: 0ex;
}

nav.project-navigation li:last-child {           
    margin-right: 0ex;
}

nav.project-navigation ul {
    max-width: 95ex;
}

nav.project-navigation ul li a{
    position: absolute;
    top: 0; bottom: 0; right: 0; left:0;
}

nav.project-navigation ul li a i{           
    position: absolute;
    top: 0; bottom: 0; right: 0; left:0;
    width: 50px;
    height: 50px;
    margin: auto;
    line-height: 50px;
    /*background-color: red;*/
}

nav.project-navigation ul li:hover,
nav.project-navigation ul li.active{           
    background-color: yellowgreen;
}

nav.project-navigation ul li a i{           
    background-image: url("images/sprite.png");
    background-size: 600px;
    display: block;
}

nav.project-navigation ul li a i.foto{           
    background-position: -50px 0; 
}

nav.project-navigation ul li a i.info{           
    background-position: -100px 0;
}

nav.project-navigation ul li a i.fig{           
    background-position: -150px 0;
}

nav.project-navigation ul li a i.review{           
    background-position: -200px 0;
}

nav.project-navigation ul li a i.video{           
    background-position: 0px 0;
}

nav.project-navigation ul li a i.portfolio{           
    background-position: -550px 0;
}

nav.project-navigation ul li a i.back{           
    background-position: -450px 0; 
}

nav.project-navigation ul li a i.forward{           
    background-position: -500px 0;
}




nav.project-navigation li.active i,
nav.project-navigation li:hover i {           
    color: white;
}

nav.project-navigation li div.nav-link-description {
    display: none
}

nav.project-navigation li:hover div.nav-link-description {
    display: block;
    position: absolute;
    top: 90px;
    left: -30px;
    right: -30px;
    font-size: 100%;
    overflow-x: visible;
}


nav.project-navigation li.inactive {
    opacity: 0.5;
} 

nav.project-navigation li.inactive:hover i{
    color: #aaa;
} 

nav.project-navigation li.inactive:hover .nav-link-description{
    display:none;
} 

/*nav.project-navigation li i.fa {
    position: relative;
}

nav.project-navigation li i.fa.fa-camera{
    top: 2px;
}*/





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

    
    nav.project-navigation ul li a i{           
        position: absolute;
        top: 0; bottom: 0; right: 0; left:0;
        width: 40px;
        height: 40px;
        margin: auto;
        line-height: 40px;
/*        background-color: red;*/
    }

    nav.project-navigation ul li a i{           
        background-image: url("images/sprite.png");
        background-size: 480px;
    }

    nav.project-navigation ul li a i.foto{           
        background-position-x: -40px;
    }

    nav.project-navigation ul li a i.info{           
        background-position-x: -80px;
    }

    nav.project-navigation ul li a i.fig{           
        background-position-x: -120px;
    }

    nav.project-navigation ul li a i.review{           
        background-position-x: -160px;
    }

    nav.project-navigation ul li a i.video{           
        background-position-x: 0px;
    }

    nav.project-navigation ul li a i.portfolio{           
        background-position-x: -440px;
    }

    nav.project-navigation ul li a i.back{           
        background-position-x: -360px;
    }

    nav.project-navigation ul li a i.forward{           
        background-position-x: -400px;
    }


    nav.project-navigation li{           
        width: 55px;
        height: 55px;
    }


    /*    nav.project-navigation li {           
            width: 60px;
            height: 60px;
            font-size: 70%;
        }
    
        nav.project-navigation li i{           
            position: relative;
            top: calc(50% - 17px);
        }   
    
        nav.project-navigation li{           
            margin-right: 25px;
        }*/

    nav.project-navigation li:hover div.nav-link-description {
        top: 70px;
    }

}

@media screen and (max-width: 500px){
/*    nav.project-navigation li{           
        width: 55px;
        height: 55px;
        font-size: 60%;
    }



    nav.project-navigation li i{           
        position: relative;
        top: calc(50% - 15px);
    }   

    nav.project-navigation li{           
        margin-right: 25px;
    }

*/    nav.project-navigation li:hover div.nav-link-description {
        top: 57px;
    }

}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                       F I G U R I E N                                 * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.page article.figurien .entry-content h2 a {
    text-decoration: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                        C O N T A C T                                  * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

form.wpcf7 {
    position: relative;
} 

input[type="submit"]  {
    background-color: #d8d8d8;
    color: gray;
    border-radius: 5%;
    /*font-size: 120%;*/
    text-transform: none;
    font-weight: 400;
    position: absolute;
    right: 2%;
}

input[type="submit"]:hover  {
    background-color: gray;
}

div.wpcf7-response-output {
    width: 98%;
    margin-left: 0px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                                                                       * */
/* *                 R E S P O N I S E * L A Y O U T                       * */
/* *                                                                       * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                               > 1235                                  * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (min-width: 1236px) {
    #digi-menu,
    header#masthead,
    div#main-wrap, 
    div.main-wrap, 
    footer#colophon #site-info   {
        padding-left: 0px;
        padding-right: 0px;
        width: 1136px!important;
        /*background-color: orange;*/
    }

    .page.portfolio .item div.text{
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        top: 75%;
        right: 0%;
        bottom: 0%;
        left: 0%;
        padding: 4%;
    }

    .page.portfolio .item div.text .subtitle {
        top: 0.5ex;
    }


}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                            1002 - 1235                                * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (min-width: 1002px) and (max-width: 1235px) {
    #digi-menu,
    header#masthead,
    div#main-wrap, 
    div.main-wrap, 
    footer#colophon  #site-info   {
        padding-left: 0px;
        padding-right: 0px;
        width: 902px!important;
        /*background-color: yellowgreen;*/
    }

    .page.portfolio .item div.text{
        top: 73%;
        padding: 5%;
        font-size: 80%;
    }

    .page.portfolio .item div.text .subtitle {
        top: 1ex;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                             768 - 1001                                * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (min-width: 768px) and (max-width: 1001px) {
    #digi-menu,
    header#masthead,
    div#main-wrap, 
    div.main-wrap, 
    footer#colophon  #site-info   {
        padding-left: 0px;
        padding-right: 0px;
        width: 668px!important;
        /*background-color: orchid;*/
    }

    .page.portfolio .portfolio-items {
        margin-left: -2.6%;
        margin-right: -2.6%;
    }

    .page.portfolio .item div.text{
        top: 73%;
        padding: 5%;
        font-size: 90%;
    }

    .page.portfolio .item div.text .subtitle {
        top: 1ex;
    }

    .page.portfolio .item-outer-wrapper {
        width: 50%;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                             670 - 767                                 * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (min-width: 670px) and (max-width: 767px){
    #digi-menu,
    header#masthead,
    div#main-wrap, 
    div.main-wrap, 
    footer#colophon #site-info   {
        padding-left: 0px;
        padding-right: 0px;
        width: 600px!important;
        /*background-color: yellow;*/
    }

    nav.project-navigation li {           
        margin-right: 30px;
    }

    .page.portfolio .portfolio-items {
        margin-left: -2.6%;
        margin-right: -2.6%;
    }

    .page.portfolio .item div.text{
        top: 74%;
        font-size: 80%;
        padding: 5%;
    }

    .page.portfolio .item div.text .subtitle {
        top: 1ex;
    }

    .page.portfolio .item-outer-wrapper {
        width: 50%;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                             470 - 669                                 * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (min-width: 470px) and (max-width: 669px){
    #digi-menu,
    header#masthead,
    div#main-wrap, 
    div.main-wrap, 
    footer#colophon #site-info   {
        padding-left: 0px;
        padding-right: 0px;
        width: 445px!important;
        /*background-color: cyan;*/
    }

    header#masthead h1 a,
    header#masthead p.site-title a {
        font-size: 36px;
        padding-top: 5px;
    }


    nav.project-navigation li {           
        margin-right: 25px!important;
    }

    .page.portfolio .item div.text{
        top: 80%;
        padding: 3%;
    }

    .page.portfolio .item div.text .subtitle {
        top: 0.2ex;
    }

    .page.portfolio .item-outer-wrapper {
        width: 100%;
        margin-bottom: 30px;
    }

    .page.portfolio .portfolio-items {
        /*background-color: red;*/
        padding: 0!important;
        margin-left: 0;
        margin-right: 0;
    }

    .page.portfolio div.item {
        /*background-color: gray;*/
        padding-left: 0px!important;
        padding-right: 0px;
    }

    .page.portfolio div.item a{
        top:0; bottom: 0; left: 0; right: 0;
    }

}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                               < 470                                   * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (max-width: 469px){
    #digi-menu,
    header#masthead,
    div.main-wrap, 
    div#main-wrap, 
    footer#colophon #site-info   {
        padding-left: 15px;
        padding-right: 15px;
        width: 320px!important;
        /*background-color: violet;*/
    }

    header#masthead h1 a, 
    header#masthead p.site-title a {
        /*color: red;*/
        font-size: 36px;
        padding-top: 5px;
    }

    header h1.entry-title {
        font-size: 24px!important;
    }


    nav.project-navigation li {           
        margin-right: 25px;
    }

    .page.portfolio .item div.text{
        top: 80%;
        padding: 3%;
        font-size: 80%;
    }

    .page.portfolio .item div.text .subtitle {
        top: 0.2ex;
    }

    .page.portfolio .item-outer-wrapper {
        width: 100%;
        margin-bottom: 30px;
    }

    .page.portfolio .portfolio-items {
        /*background-color: red;*/
        padding: 0!important;
        margin-left: 0;
        margin-right: 0;
    }

    .page.portfolio div.item {
        /*background-color: gray;*/
        padding-left: 0px!important;
        padding-right: 0px;
    }

    .page.portfolio div.item a{
        top:0; bottom: 0; left: 0; right: 0;
    }
    
    .small-grid {
        position: relative;
        left: -15px
    }
    
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* *                         A N I M A T I O N                             * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.site-content .page.animation {
    max-width: 1236px;
    /*background-color: red;*/
}