/*
Theme Name: Thomas Devaney - January 2018
Author: Equivocal LLC
Author URI: http://equivocal.org/
Description: custom WordPress theme by Equivocal LLC for Thomas Devaney
Version: 1.0
*/

/**
 *
 *  1- SETTINGS & CLASSES - PAGE STRUCTURE
 *  2- SETTINGS & CLASSES - DISPLAY & TYPOGRAPHY
 *    2.1- TYPOGRAPHY SCALE 
 *  3- SITE MENUS / HEADER / FOOTER
 *  4- HOME PAGE
 *  5- PAGE CONTENT STYLES
 *    5.1- CONTACT FORM 
 *  6- IMAGES / GALLERIES / MEDIA
 *  7- FOOTER
 *  8- MEDIA QUERIES
 *     
**/

body {
  font-family: 'Roboto', sans-serif; 
  font-size: 24px;
  font-weight: 400;
  line-height: 1.55;
  color: #231f20;
  overflow-y: scroll;
}

section.content-wrap {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transition: .25s opacity;
  transition: .25s opacity;
} 
body.fade section.content-wrap {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: none;
  transition: none;
}
body.fade-out section.content-wrap {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: .5s opacity;
  transition: .5s opacity;
}


/* ICON FONT */

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?5791271');
  src: url('fonts/fontello.eot?5791271#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff2?5791271') format('woff2'),
       url('fonts/fontello.woff?5791271') format('woff'),
       url('fonts/fontello.ttf?5791271') format('truetype'),
       url('fonts/fontello.svg?5791271#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?5791271#fontello') format('svg');
  }
}
*/    
    
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .3125em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before { content: '\e800'; margin-right: .4375em; font-size: 1.0625em; } /* '?' */
.icon-instagram:before { content: '\f16d'; font-size: 1.05875em; } /* '?' */
.icon-facebook:before { content: '\f230'; } /* '?' */






/* =============================================================================
    1- SETTINGS & CLASSES - PAGE STRUCTURE
   ========================================================================== */

header,
section.content-wrap,
footer .content-wrap {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 4%;
  overflow: hidden;
}
header {
  overflow: visible;
}

section.content-wrap {
  xmargin-bottom: 6em;
}

/* FLEX STYLES */

.flex-grid-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.flex-1-1 { width: 100%; }
.flex-3-4 { width: 75%; }
.flex-2-3 { width: 66.67%; }
.flex-1-2 { width: 50%; }
.flex-1-3 { width: 33.33%; }
.flex-1-4 { width: 25%; }
.flex-1-5 { width: 20%; }

.publications-grid .flex-1-2 {
  padding-right: 3em;
}





/* ============================================================================= 
    2- SETTINGS & CLASSES - DISPLAY & TYPOGRAPHY
   ========================================================================== */
   
.condensed {
  font-family: 'Open Sans Condensed', 'Open Sans', sans-serif;
  letter-spacing: -.0625em;
}
.all-caps {
  text-transform: uppercase;
}
.no-break {
  white-space: nowrap;
}
.bold {
  font-weight: 700;
}
.roboto {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

p, ul, ol {
  margin: 0 0 1.5em 0;  
}
ul, ol {
  margin-left: 1.5em;
}
ul li, ol li {
  margin-bottom: 1em;
}
em, i {
  font-style: italic;
}
strong, b {
  font-weight: 600;
}
blockquote {
  margin: 2.25em 0;
  padding: 0 5vw 0 3vw;
  font-size: .8125em;
}
blockquote cite {
  display: block;
  margin: .5em;
  font-size: 1.0625em;
  font-weight: 700;  
}



/* BUTTON LINKS */

.button-link {
  display: inline-block;
  margin: 1em 0;
  padding: 1em .625em;
  border: 4px solid;
  border-radius: 0;
  font-size: 1.1875em;
  font-weight: 600;
  line-height: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: #ff6c00;
  background-color: #ffffff;
  -webkit-transition: all 0.15s ease-in-out 0s;
  transition: all 0.15s ease-in-out 0s;
  cursor: pointer;
}
.button-link:hover {
  color: #ffffff;
  background-color: #231f20;
  border-color: #231f20;
  cursor: pointer;  
}
.button-link.long-label {
  margin-bottom: .875em;
  padding: .4125em .625em;
  line-height: 1.2;
}
.error404 .button-link {
  margin: 0 0 1em;
}
input[type="submit"] {
  -webkit-appearance: none;
}


/*  POST NAVIGATION PREVIOUS/NEXT */

.post-navigation-previous.flex-1-2 {
  text-align: left;
  padding-right: 4vw;
}
.post-navigation-next.flex-1-2 {
  text-align: right;
  padding-left: 4vw;
}
.post-navigation-grid h3 {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  line-height: 1.55;
}
.post-navigation-grid a {
  line-height: 1;
}
.single .post-navigation-grid .post-date {
  margin-bottom: .75em;
}



/* =============================================================================
    2.1- TYPOGRAPHY SCALE
   ========================================================================== */    

h1, .h1 {
  font-size: 2.38888889em;
  line-height: 1.2;
  margin-top: 0.60465116em;
  margin-bottom: 1.0625em;
}
h2, .h2 {
  font-size: 1.4375em;
  line-height: 1.25;
  margin-top: 1.8125em;
  font-weight: 700;
  margin-bottom: 1.5em;
}
h3, .h3 {
  font-size: 1.28125em;
  line-height: 1.35;
  margin-top: 1.69273333em;
  margin-bottom: 1.08333333em;
  font-weight: 700;
}
h4, .h4 {
  font-size: 1.0625em;
  line-height: 1.44444444em;
  margin-top: 1.5em;
  margin-bottom: .9375em;
  font-weight: 700;
}
h5, .h5 {
  font-size: 1em;
  line-height: 1.44444444em;
  margin-top: 1.44444444em;
  margin-bottom: 0em;
}
p, ul, ol, pre, table {
  margin-top: 0em;
  margin-bottom: 1.25em;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: .9375em;
}
hr, .hr {
  height: 1px;
  margin: 3em 0;
  border: 0;
  background: #231f20;
}
a, b, i, strong, em, small, code {
  line-height: 0;
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}





/* =============================================================================
    3- SITE MENUS / HEADER / FOOTER
   ========================================================================== */

/* GENERAL SITE MENUS */

nav a {
  font-size: 1em;
}
nav a,
nav a:hover {
  color: #231f20;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
nav a:hover,
nav .current-menu-item a,
nav .current-page-ancestor a {
  border-bottom: 2px solid;
  color: #231f20;
}
.header-menu,
.footer-menu {
  margin-left: 0;
  list-style: none;
}




header { 
  margin-top: 4em;
  margin-bottom: 2em;
}

.header-logo {
  display: block;
}
.header-logo img {
  width: 100%;
  max-width: 400px;
  height: auto;
}


.site-title {
  font-size: 1.6875em;
  font-weight: 700;
  line-height: 1.20930233em;
  margin-top: 0.60465116em;
  margin-bottom: 1.20930232em;
}
.site-title a {
  border: 0 none;
  color: #231f20;
  text-decoration: none;
}


header nav {
  margin: 2em 0;
}

nav ul {
  margin-left: 0;
  list-style: none;
}
header nav li,
footer nav li {
  display: inline-block;
  margin-right: .625em;
}
nav a {
  border-bottom: 2px solid #ffffff;
  color: #ff6c00;
  text-decoration: none;
}

nav a:hover,
nav .current-menu-item a {
  border-bottom: 2px solid #231f20;
  color: #231f20;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

footer .site-title {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 2px solid;
}
.footer-icon-links li:first-child {
  margin-right: .6875em;
}
.footer-icon-links li:last-child {
  margin-right: 0;
}
.footer-icon-links a {
  padding-bottom: .125em;
}




/* =============================================================================
    4- HOME PAGE
   ========================================================================== */





/* =============================================================================
    5 - PAGE CONTENT STYLES
   ========================================================================== */

.page-title {
  margin-top: 0;
  line-height: 1.125;
}
.post-title {
  font-size: 1.6875em;
}

.post-date {
  display: block;
  margin: 0 0 .625em;
  font-size: .8125em;
}

main a {
  border-bottom: 2px solid #ffffff;
  color: #ff6c00;
  text-decoration: none;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
main a:hover {
  border-bottom: 2px solid;
  color: #231f20;
}

main ul li {
  margin-bottom: 1em;
}

main ul ul,
main ol ol,
main ul ol,
main ol ul {
  margin-top: .3125em;
}

main ul ul li,
main ol ol li,
main ul ol li,
main ol ul li {
  margin-bottom: 0;
}






/* PUBLICATIONS ARCHIVE */

.publications-grid [class^="flex-"] {
  margin-bottom: 2em;
  padding-right: 1.5em;
}
.publications-grid .flex-1-3 {
    max-width: 300px;
}
.publications-grid .post-thumbnail {
  margin-bottom: .875em;
}
.publications-grid .post-thumbnail:hover {
  border-color: #ffffff;
}

.publications-grid .flex-1-3 img {
  max-width: 100%;
  height: auto;
}


.publications-grid .post-title {
  line-height: 1.25;
}
.publications-list-item {
  margin-bottom: 1em;
}


/* NEWS ARCHIVE */

.archive .post-title {
  line-height: 1.2;
}
.archive .post-excerpt {
  margin-top: .125em;
}


/* NEWS SINGLE */

.single-news h1.page-title {
  margin-bottom: .3125em;
}

.single .post-date {
  margin: 0;
  margin-bottom: 1.9375em;
  font-size: .75em;
}





/*  5.1 - PUBLICATIONS
   ========================================================================== */

/* ARCHIVE */









/*  5.X- CONTACT FORM
   ========================================================================== */    

.wpcf7 label {
  display: block;
  margin-bottom: .325em;
  font-weight: 600;
  line-height: 1.32;
}
.wpcf7 span input,
.wpcf7 span textarea {
  display: block;
  width: 100%;
  padding: 1em;
  border: 0 none;
  font-family: inherit;
  font-size: 1em;
  color: #555555;
  background-color: #e6e6eb;  
}
.wpcf7 input.button-link {
  margin-top: .5em;
  margin-bottom: .5em;
}
div.wpcf7 .ajax-loader {
  margin-left: .5em;
  margin-bottom: 8px;
}
span.wpcf7-not-valid-tip {
  margin-top: .25em;
  font-weight: 600;
}
div.wpcf7-response-output {
  margin: 0;
  padding: 1em;
  line-height: 1.32;
  border-width: 4px; 
}
div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {
  border-width: 4px;
}
.right-column-wrap div.wpcf7-mail-sent-ok {
  border-color: #de3cb7;
}
.right-column-wrap div.wpcf7-validation-errors {
  border-color: #ff0000;
}
.wpcf7 form p:first-of-type {
  margin-bottom: 2.1111em;
}





/* =============================================================================
    6- IMAGES / GALLERIES / MEDIA
   ========================================================================== */

main figure {
  margin: 3em 0;
}
main figure:first-child {
  margin-top: 0;
}
figcaption {
  font-size: .625em;
  font-style: italic;
}
section img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e6e6e6;
}

main figure a,
main figure a:hover {
  border: 0 none;
}


/* EMBEDDED MEDIA / IFRAME */

.arve-embed-container,
main iframe,
main twitter-widget {
  margin-top: 3em!important;
  margin-bottom: 3em!important;
}
.arve-wrapper,
main .arve-embed-container iframe {
  margin: 0!important;
}


/* =============================================================================
    7- FOOTER
   ========================================================================== */

footer,
footer .content-wrap {}

footer .content-wrap {
  padding-bottom: 6em;
}
.copyright {
  position: absolute;
  bottom: 2em;
  font-size: .6875em;
}






/* =============================================================================
    8- MEDIA QUERIES
   ========================================================================== */    

/* BELOW 1500PX WIDTH **********************************************************/
@media handheld, only screen and (max-width: 1499px) {

/* GENERAL */
  body {
    font-size: 22px;
  }

}


/* BELOW 1100PX WIDTH **********************************************************/
@media handheld, only screen and (max-width: 1099px) {

/* GENERAL */
  body {
    font-size: 20px;
  }

}


/* BELOW 768PX WIDTH **********************************************************/
@media handheld, only screen and (max-width: 767px) {

/* GENERAL */
  body {
    font-size: 17px;
  }
  .grid {
		width: 100%;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	[class*='col-'],
  footer .right-column-wrap [class*='col-'] {
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}

}


/* BELOW 600PX WIDTH **********************************************************/
@media handheld, only screen and (max-width: 599px) {

/* GENERAL */
  .publications-grid .flex-1-3 {
    width: 40%;
  }
  .publications-grid .flex-2-3 {
    width: 60%;
  }

}


/* BELOW 480PX WIDTH **********************************************************/
@media handheld, only screen and (max-width: 479px) {

  /* GENERAL */
  main a,
  main a:hover, 
  nav a,
  nav a:hover,
  nav .current-menu-item a,
  nav .current-page-ancestor a {
    border-bottom-width: 1px;
  }

}