/*
Theme Name: Union Pacific v2.0
Theme URI: unionpacific.co.uk
Author: Vivyane Fernando
Author URI: vivyanefernando.info
*/

* {margin:0;padding: 0;box-sizing: border-box;}

html {-webkit-font-smoothing: antialiased;}

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

body, h1, h2, h3 {
    font-family:'Roboto Mono', monospace; font-size: 13px; line-height: 20px; font-weight: normal; letter-spacing: 1px;
    text-rendering: optimizeLegibility;-webkit-font-smoothing: subpixel-antialiased;
}

p {margin: 0 0 20px 0;}

ul, ul li {list-style: none; list-style-type: none;}

.visuallyhidden {display: none;}


/*////////////////////
////// loader ////////
////////////////////*/


#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background-image: url(img/loader.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}


    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background:white;
        z-index: 1000;
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }
    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded styles */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
    }
    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
    }
    .loaded #loader {
        opacity: 0;

        -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
    
        -webkit-transition: all 0.3s 1s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.3s 1s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
    }



/*///////////////////
//// content area ///
///////////////////*/
/*///////////////////
//    structure   ///
///////////////////*/

#wrapper {margin: 172px 35px 0 35px;}
figure {margin:0;}

/* HEADER */

header {
    position: fixed;
    top: 0; left: 0;
    height: 73px;
    width: 100%;
    float: none;
    clear: both;
    padding: 27px 35px 30px 35px;
    z-index: 2;
    background-color: white;
    font-family: 'alte_haas_groteskbold'; letter-spacing: 0.2px;
}

.shadow {
    position: fixed;
    top: 0; left: 0;
    height: 80px;
    width: 100%;
    float: none;
    clear: both;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=0 );
}
.clearfix {width: 100%; clear: both;}

/* header - desktop version specs without toggle */

header ul, header ul li { display: inline;}

#home {width: 30%; float: left; clear: left; font-size: 20px; text-transform: uppercase;}
#archives {width: 40%; float: left; clear: none; font-size: 20px; text-align: center;}
#info {width: 30%; float: left; clear: right; font-size: 14px; text-align: right;}

ul#archives li {padding-right:25px;} ul#info li {padding-right:19px;}

ul#archives li:last-child, ul#info li:last-child {padding: 0;}

/* TOGGLE BUTTON */

button.toggle-button {position: fixed; top: 0; right: 0;}


/* HOME */

section#index {max-width: 1000px; clear: both; margin: 0 auto;}

.bi-break { position: inherit; width: 48.5%; float: left; clear: none; margin:0 3% 80px 0;}
section div.bi-break:nth-child(2n){margin-right:0;}
.bi-break figure {}
.bi-break figure img {width: 100%; height: auto; padding-bottom: 20px;}

h1.title-artist {padding-bottom: 20px;}



/* ARTISTS */

/* archive-artists.php */ 
section#archive-artists {text-align: left;width: 100%; clear: both;padding-bottom: 80px;overflow: auto;}
/*section#archive-artists {width: 100%; clear: both;}*/


/* Thumbnails */
section div.tri-break {position: inherit; width: 31.3%; float: left; clear: none; margin:0 3% 80px 0; border: 0;}
section div.tri-break:nth-child(3n){margin-right:0;clear: right;}
section div.tri-break:nth-child(3n+1) {float: left; clear: left; margin:0 3% 80px 0;}
section div.tri-break figure {border: 0; margin: 0; padding: 0;}
section div.tri-break figure img {width: 100%; height: auto; padding-bottom: 20px;}
/* single-artists.php */
section#artists {margin: 0 auto; text-align: center; max-width: 1200px;}

section#artists article.single figure {width: 100%; margin: 0 auto; clear: both; text-align: center;}
section#artists article.single figure img {height: 80vh; width: auto;}
section#artists article.single figure figcaption, .video_caption {text-align: center; margin:20px auto 75px auto; max-width: 550px;}

/* video */
aside#artists-videos {margin: 0 auto; text-align: center; max-width: 1200px;}
.video-container { width: 70%; text-align: center; margin: 0 auto;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* cv */
section#artists aside#cv {padding-bottom: 130px; text-align: center;font-family: 'alte_haas_groteskbold'; font-size: 20px;letter-spacing: 0.2px;overflow: auto;} 
h1.heading-artist {font-family: 'alte_haas_groteskbold'; font-size: 30px; margin-bottom: 80px;letter-spacing: 0.2px;}



/* EXHIBITIONS */
/* archive-exhibitions.php */
section#archive-exhibitions {max-width: 1000px; clear: both; margin: 0 auto;}
.featured.exhibitions {clear: both;}
.previous.exhibitions {width: 100%; clear: both;}
/* single-exhibitions.php */
section#exhibitions {margin: 0 auto; text-align: center; max-width: 1200px;}
section#exhibitions h1, section#exhibitions h2, section#exhibitions h3 {text-align: left;max-width: 590px;} section#exhibitions h3 {margin-bottom: 80px;}
section#exhibitions aside#cv {margin: 130px auto 130px auto; text-align: center;font-family: 'alte_haas_groteskbold'; font-size: 20px;letter-spacing: 0.2px;} 

section#exhibitions article.single figure {width: 100%; margin: 0 auto; clear: both; text-align: center;}
section#exhibitions article.single figure img {height: 80vh; width: auto;}
section#exhibitions article.single figure figcaption {text-align: center; margin:20px auto 75px auto; max-width: 550px;}

section#exhibitions aside.press {max-width: 590px; margin: 130px auto 130px auto; text-align: left;} 



/* FAIRS */
/* archive-fairs.php */
section#archive-fairs {width: 100%; clear: both;}
/* single-exhibitions.php */
section#fairs {margin: 0 auto; text-align: center; max-width: 1200px;}
section#fairs h1, section#fairs h2, section#fairs h3 {text-align: left; max-width: 590px;} section#fairs h3 {margin-bottom: 80px;}

section#fairs article.single figure {width: 100%; margin: 0 auto; clear: both; text-align: center;}
section#fairs article.single figure img {height: 80vh; width: auto;}
section#fairs article.single figure figcaption {text-align: center; margin:20px auto 75px auto; max-width: 550px;}

section#fairs aside.press {max-width: 590px; margin: 130px auto 130px auto; text-align: left;} 




/* NEWS */
section#archive-news {width: 100%; clear: both;}
section#archive-news div.quad-break {margin-bottom: 80px;}
section#archive-news div.quad-break:nth-child(4n+1) {clear: left;}
.quad-break figure {}
.quad-break figure img {width: 100%; height: auto; padding-bottom: 20px;}


/* CONTACT */
section#contact {text-align: left;width: 100%; clear: both;padding-bottom: 80px}
section#contact .info {padding-bottom: 20px;}
section#contact input, section#contact textarea {padding: 10px;margin: 5px 0 20px 0;font-family:'Roboto Mono', monospace; font-size: 13px; line-height: 20px; font-weight: normal; letter-spacing: 1px; color: grey;border: 1px solid #cccccc; background: transparent;}
section#contact input {width:175px;}
section#contact textarea {width: 300px; outline: 0; border: 1px solid #cccccc;}
section#contact input.wpcf7-form-control.wpcf7-submit:hover {color: black; background-color: #cccccc;}



/* SEARCH */

/* wp menu search font-awesome */

li#menu-item-74 a .link-text {display: none;}

li#menu-item-74 a:before {
  content: "\f002"; 
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  line-height: 20px;
  z-index: 90;
}

/* search results */

section#search {width: 100%; clear: both;}
section#search div.quad-break {margin-bottom: 80px;}
section#search div.quad-break:nth-child(4n+1) {clear: left;}


h1.results-heading {text-align: center;font-family: 'alte_haas_groteskbold'; font-size: 30px; margin-bottom: 80px;letter-spacing: 0.2px; line-height: 36px;}

/* search page */

section#search form {text-align: center; margin: 0 auto; height: 47vh;}

#searchsubmit {
text-indent: -99999px;
border: medium none; 
background: transparent; 
}

#s {
    font-family: 'alte_haas_groteskbold'; font-size: 30px; margin-bottom: 130px;letter-spacing: 1px; color: #cccccc;
    border-bottom: 1px solid grey;
    padding: 10px 0 10px 0;
}

form input, form input:focus, form input[type="text"] {
    outline: none; border: none; background: transparent;
}

::-webkit-input-placeholder {
    color: #cccccc;
    opacity: 1 !important;
    text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
    color: #cccccc;  
    opacity: 1 !important;
    text-align: center;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #cccccc; 
    opacity: 1 !important;
    text-align: center;
}

:-ms-input-placeholder {  
    color: #cccccc;  
    opacity: 1 !important;
    text-align: center;
}


/* FOOTER */

footer {
    width: 100%; clear: both; padding:32px 0 0 0;
    border-top: 5px solid #f2f2f2;
    font-size:9px; line-height: 25px;
}

.gallery-status {color: #cccccc;}

div.footer.quad-break { margin-bottom: 40px;}
.quad-break { position: inherit; width: 22.7%; float: left; clear: none; margin:0 3% 0 0;}
div.quad-break:nth-child(4n){margin-right:0;}

/* mailchimp */

#mc-embedded-subscribe {
text-indent: -99999px;
border: medium none; 
background: transparent; 
}

#mce-EMAIL {
    display: block; clear: both; float: none;
    font-family:'Roboto Mono', monospace; font-size: 9px; line-height: 25px; font-weight: normal; letter-spacing: 1px; color: #cccccc;
    border-bottom: 1px solid grey;
    padding: 0 0 2px 0; text-align: left;
}

footer ::-webkit-input-placeholder {
    color: #cccccc;
    opacity: 1 !important;
    text-align: left;
}

footer :-moz-placeholder { /* Firefox 18- */
    color: #cccccc;  
    opacity: 1 !important;
    text-align: left;
}

footer ::-moz-placeholder {  /* Firefox 19+ */
    color: #cccccc; 
    opacity: 1 !important;
    text-align: left;
}

footer :-ms-input-placeholder {  
    color: #cccccc;  
    opacity: 1 !important;
    text-align: left;
}




/*////////////
//// links ///
////////////*/

header#menu nav ul#archives li.menu-item a:link, header#menu nav ul#archives li.menu-item a:visited {color: black; text-decoration: none;}
header#menu nav ul#archives li.menu-item a:hover, header#menu nav ul#archives li.menu-item a:active {color: #cccccc; text-decoration: none;}

header#menu nav ul#archives li.menu-item.current-menu-item a:link, header#menu nav ul#archives li.menu-item.current-menu-item a:visited, header#menu nav ul#archives li.menu-item.current-menu-item a:hover, header#menu nav ul#archives li.menu-item.current-menu-item a:active {color: #cccccc; text-decoration: none;}

header#menu nav ul#info li.menu-item a:link, header#menu nav ul#info li.menu-item a:visited {color: black; text-decoration: none;}
header#menu nav ul#info li.menu-item a:hover, header#menu nav ul#info li.menu-item a:active {color: #cccccc; text-decoration: none;}

header#menu nav ul#info li.menu-item.current-menu-item a:link, header#menu nav ul#info li.menu-item.current-menu-item a:visited, header#menu nav ul#info li.menu-item.current-menu-item a:hover, header#menu nav ul#info li.menu-item.current-menu-item a:active {color: #cccccc; text-decoration: none;}

a:link, a:visited {color: black; text-decoration: none;}
a:hover, a:active {color: #cccccc; text-decoration: none;}


/*////////////////////
//// media queries ///
////////////////////*/

@media screen and (max-width: 1150px) {  
    
section#exhibitions article.single figure, section#artists article.single figure, section#fairs article.single figure {width: 80%; margin: 0; clear: both; text-align: left;}
section#exhibitions article.single figure img, section#artists article.single figure img, section#fairs article.single figure img {height: 80vh; width: auto; text-align: left;}
section#exhibitions article.single figure figcaption, section#artists article.single figure figcaption, section#fairs article.single figure figcaption, .video_caption {text-align:left; margin:20px 0 75px 0; max-width: 550px;}

}

@media screen and (min-width: 981px) {button.toggle-button, h1.mobile-only { display: none;} }

@media screen and (max-width: 980px) {    
    #wrapper {margin: 80px 15px 0 15px;}   
    button.toggle-button {position: fixed; top: 20px; right: 15px; outline:0; background: transparent; border: 0; font-size: 25px; z-index: 99;cursor: pointer;}
    
    button.toggle-button.icon-toggle {background: url(img/open.png); width: 17px; height: 17px; background-repeat: no-repeat; background-size: contain;}
    button.toggle-button.close {background: url(img/close.png);width: 16px; height: 16px;background-repeat: no-repeat; background-size: contain;}
        
    h1.mobile-only {position: fixed; display: block; font-family: 'alte_haas_groteskbold'; font-size: 17px; letter-spacing: 0.2px; z-index: 3; background: white;padding: 20px 0 20px 0; top:0; left;0; width: 100%;height: 60px; margin: 0;}
    
    .shadow {display: none;}
    
    header {display: none; width: 100%; height: 100%; background: #cccccc; color: white; z-index: 5;}
    header ul, header ul li { display: block; margin-bottom: 17px;}
    #home {width: 100%; float: none; clear: both; font-size: 17px; text-transform: none; text-align: center; margin-top: 25px;}
    #archives {width: 100%; float: none; clear:both; font-size: 17px; text-align: center;}
    #info {width: 100%; float: none; clear: both; font-size: 17px; text-align: center;}
    ul#archives li {padding-right:0;} ul#info li {padding-right:0;}
    ul#archives li:last-child, ul#info li:last-child {padding: 0;}
    li#menu-item-74 a {margin-left:0;}
    li#menu-item-74 a:after {display: none;}
    
        /* link  alterations*/
    
    header#menu nav ul#archives li.menu-item a:link, header#menu nav ul#archives li.menu-item a:visited {color: black; text-decoration: none;}
    header#menu nav ul#archives li.menu-item a:hover, header#menu nav ul#archives li.menu-item a:active {color: black; text-decoration: none;}

    header#menu nav ul#archives li.menu-item.current-menu-item a:link, header#menu nav ul#archives li.menu-item.current-menu-item a:visited, header#menu nav ul#archives li.menu-item.current-menu-item a:hover, header#menu nav ul#archives li.menu-item.current-menu-item a:active {color: white; text-decoration: none;}

    header#menu nav ul#info li.menu-item a:link, header#menu nav ul#info li.menu-item a:visited {color: black; text-decoration: none;}
    header#menu nav ul#info li.menu-item a:hover, header#menu nav ul#info li.menu-item a:active {color: black; text-decoration: none;}

    header#menu nav ul#info li.menu-item.current-menu-item a:link, header#menu nav ul#info li.menu-item.current-menu-item a:visited, header#menu nav ul#info li.menu-item.current-menu-item a:hover, header#menu nav ul#info li.menu-item.current-menu-item a:active {color:white; text-decoration: none;}
    
    
    h1.heading-artist {font-size: 22px; margin-bottom: 60px;}
    #s {font-size: 25px; margin-bottom: 60px;}
    /* ARCHIVE --- TRI-BREAK ---- ARTISTS */
        
    /*section div.tri-break {width: 48.5%; float: left; clear: none; margin-right:3%;}
    section div.tri-break:nth-child(2n){margin-right:0; clear:right; float: left;} 
    section div.tri-break:nth-child(3n){margin-right:3%; clear:left; float: left;} 
    section div.tri-break:nth-child(3n+1){float: left; clear: right; margin-right: 0;}*/
    
    
    section div.tri-break figure {}
    section div.tri-break figure img {width: 100%; height: auto; padding-bottom: 20px;}
    
    
    /* ARCHIVE --- QUAD-BREAK ---- ARTISTS */
    .quad-break {width: 48.5%; float: left; clear: none; margin:0 3% 80px 0;}
    section div.quad-break:nth-child(3n){margin-right:3%;} section div.quad-break:nth-child(2n){margin-right:0;}
    .quad-break figure img {width: 100%; height: auto; padding-bottom: 20px;}
    /* FOOTER --- QUAD BREAK ---- FOOTER */
    div.footer.quad-break { position: inherit; width: 100%; float: left; clear: none; margin:0 0 30px 0;}    
    
    
    /* images single pages*/
    
    section#exhibitions article.single figure, section#artists article.single figure, section#fairs article.single figure {width: 70%; margin: 0 auto; clear: both; text-align: center;}
    section#exhibitions article.single figure img, section#artists article.single figure img, section#fairs article.single figure img {height: auto; width:100%; text-align: center;}
    section#exhibitions article.single figure figcaption, section#artists article.single figure figcaption, section#fairs article.single figure figcaption, .video_caption {text-align: center; margin:20px auto 75px auto; width: auto;}
    .video-container {width: 100%;}
}

@media screen and (max-width: 768px) {
    section {padding-bottom: 60px;}
    p {margin: 0 0 17px 0;}
    body, h1, h2, h3 {font-size: 11px; line-height: 17px;}
    /* INDEX --- BI BREAK ---- HOME */
    .bi-break { width: 100%; float: none; clear: both; margin:0 0 60px 0;}
    .bi-break figure img {padding-bottom: 17px;}
    /* ARCHIVE ---  TRI-BREAK ---- ARTISTS */
    section div.tri-break { width: 100%; float: none; clear: both; margin:0 0 60px 0;}
    section div.tri-break figure img {padding-bottom: 17px;}
    /* SINGLE ---- ARTISTS */
    section#artists article.single figure figcaption, .video_caption {text-align: left; margin-top: 5px;margin-bottom: 60px;}
    section#artists aside#cv {margin: 60px auto 0 auto;}
    section#artists h1, section#artists h2, section#artists h3 {text-align:center;max-width:100%;} section#artists h3 {margin-bottom: 60px;}
    /* ARCHIVE ---  QUAD-BREAK ----NEWS and SEARCH */
    .quad-break { width: 100%; float: none; clear: both; margin:0 0 60px 0;}
    .quad-break figure img {padding-bottom: 17px;}
    /* SINGLE ---- EXHIBITIONS */
    section#exhibitions article.single figure figcaption {text-align: left; margin-top: 5px;margin-bottom: 60px;}
    section#exhibitions aside.press {margin: 60px auto 0 auto;} 
    section#exhibitions h1, section#exhibitions h2, section#exhibitions h3 {text-align:center;max-width:100%;} section#exhibitions h3 {margin-bottom: 60px;}
    /* SINGLE ---- FAIRS */
    section#fairs article.single figure figcaption {text-align: left; margin-top: 5px;margin-bottom: 60px;}
    section#fairs aside.press {margin-top: 60px;} 
    section#fairs h1, section#fairs h2, section#fairs h3 {text-align:center;max-width:100%;} section#fairs h3 {margin-bottom: 60px;}
    section#fairs aside.press {margin: 60px auto 0 auto;} 
    
    /* images single pages*/
    
    section#exhibitions article.single figure, section#artists article.single figure, section#fairs article.single figure {width: 100%; margin: 0 auto; clear: both; text-align: center;}
    section#exhibitions article.single figure img, section#artists article.single figure img, section#fairs article.single figure img {height: auto; width:100%; text-align: center;}
    section#exhibitions article.single figure figcaption, section#artists article.single figure figcaption, section#fairs article.single figure figcaption, .video_caption {text-align: left; margin:20px auto 75px auto; width: auto;}

}