/*less css 1.4 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* TO DO: 
- PP section hierarchy of headings 
- text size on contact section funky
- New color scheme

*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* END MEYER RESET ***************/

/* @headerfonts: Baskerville, Libre Baskerville, Times New Roman, serif;
@bodyfonts: heebo, proxima nova, open sans; //--  PN and OS listed somewhere as good sans baskerville pairings

@basesize: 24pt; //masterfontsize
@fontmultiplier: 1.2;
42pt: (38pt * @fontmultiplier);
38pt: (32pt * @fontmultiplier);
32pt: (24pt * @fontmultiplier);
24pt: 24pt;
20pt: (24pt / @fontmultiplier);

//Jan 2020 - mobile-first reboot
//basics
*/
body {
  font-size: 24pt;
  font-family: Baskerville, Libre Baskerville, Times New Roman, serif;
  color: #e7ebee;
  /*background-color: @purple;
  //https://mycolor.space/gradient3?ori=to+top&hex=%234A7FA7&hex2=%235F3F4E&hex3=%23A70D27&submit=submit
  // DARK VERSION*/
  background-image: linear-gradient(
    to bottom,
    #4a7fa7,
    #58719a,
    #62648b,
    #665779,
    #664c66,
    #6b4560,
    #703f57,
    #74384d,
    #833148,
    #912740,
    #9d1c35,
    #a70d27
  );
  /* LIGHT VERSION background-image: linear-gradient(
    to top,
    #f793a4,
    #f19ab0,
    #eaa1ba,
    #e2a8c1,
    #dbafc7,
    #d6b4cd,
    #d0b9d2,
    #ccbed5,
    #c7c3db,
    #c2c8df,
    #bfcde1,
    #bdd2e2
  );*/
  padding: 0.5em 2em;
  text-align: left;
  margin: 0px;
  padding: 0px;
  list-style: disc;
}

a:link {
  color: #ffe5ff;
  text-decoration: none;
}

a:visited {
  color: #ffe5ff;
}

a:hover {
  text-decoration: underline;
}

em {
  font-style: italic;
}

strong {
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
p {
  line-height: 1.3em;
  padding: 0.5em 0em;
  padding-bottom: 0.2em;
  margin: 0em;
  font-weight: 100;
}

h1 {
  font-size: 42pt;
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 1em;
  border-width: 2px;
  padding: 0.2em;
  clear: both;
  line-height: 1.3em;
  text-align: center;
}

h2 {
  font-size: 24pt;
  line-height: 1.3em;
  text-transform: uppercase;
  font-weight: 550;
}

h3 {
  font-size: 20pt;
  line-height: 1.3em;
}

h4,
h5 {
  font-size: 24pt;
  margin-bottom: 0.4em;
  line-height: 1.3em;
}

.mtsmallcaps {
  font-variant: small-caps;
  font-weight: 500;
}

p {
  font-family: heebo, proxima nova, open sans;
  line-height: 1.3em;
  padding-bottom: 0.5em;
}

nav {
  clear: both;
  position: sticky;
  top: 0px;
  z-index: 100;
  width: 100%;
  margin-bottom: 0.5em;
  padding-bottom: 2.5em;
  text-align: center;
  background: #4a7fa7;
  color: #e7ebee;
}

nav a:link {
  color: #e7ebee;
}

nav a:visited {
  color: #e7ebee;
}

#logotype {
  font-size: 1.25em;
  text-align: left;
  font-weight: 400;
  line-height: 0.7em;
  padding: 0.2em;
  padding-left: 1em;
  float: left;
}

#retcontitle {
  padding-bottom: 0em;
  margin-bottom: 0em;
}

#retconsubtitle {
  font-size: 0.7em;
  padding-top: 0em;
  line-height: 1em;
}

#subhed {
  font-size: 0.4em;
  font-variant: small-caps;
  display: none;
}

#menubuttons {
  word-spacing: 40px;
  padding-right: 1em;
  float: right;
}

#menubuttons a {
  text-align: center;
  font-family: Baskerville, Libre Baskerville, Times New Roman, serif;
  word-spacing: inherit;
  width: 33%;
  font-size: 1em;
  padding-top: 0.1em;
  padding-bottom: 0.5em;
  line-height: 1.5em;
}

img,
video {
  width: 100%;
  margin-top: 1em;
}

video {
  z-index: -2;
} /* gets reel off of nav banner */

#greeting {
  max-width: 800px;
  margin: 0 auto;
}

#hellopic {
  float: right;
  width: 50%;
  height: auto;
}

#hellotext {
  font-size: 50pt;
  text-align: right;
  width: 48%;
}

.homesec {
  padding: 0 auto;
  margin: 0 auto;
  max-width: 1200px;
}

.award {
  font-size: 20pt;
  font-style: italic;
}

.prevprod {
  font-size: 15pt;
  margin-left: 2em;
  font-family: heebo, proxima nova, open sans;
}

.centermobilelink {
  text-align: center;
}

.presstitle h2 {
  text-transform: uppercase;
}

.scriptsecsubhed {
  font-size: 38pt;
  text-align: center;
  padding-bottom: 0em;
  margin-bottom: 0em;
}

.fakefooter {
  clear: both;
  padding: 2px;
  /*background-color: #4a7fa7; made them invisible so as to cheat on centering */
}

.itemdiv,
.scriptdiv {
  clear: both;
  padding: 0.5em 2em;
}

.headshotgallery {
  padding: 0.25em;
  margin: 0em;
  width: 48%;
  clear: right;
  float: left;
}

.headshotgallery img {
  padding: 0em;
  margin: 0em;
  border-radius: 1em;
  width: 100%;
}

#ppscriptsec {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  padding: 1em;
}

#ppscriptsec img {
  float: right;
  width: 40%;
}

.pressquote,
h4,
h5 {
  font-size: 0.8em;
  line-height: 0.8em;
}

#photosec {
  text-align: center;
}

#headshotwrapper {
  padding: 0em;
  margin: auto;
  width: 95%;
}

#pppic {
  margin: 1em;
  max-width: 500px;
}

#ppcasting {
  max-width: 800px;
  margin: 1em auto;
  text-align: left;
  font-family: heebo, proxima nova, open sans;
}

#contactsec {
  padding-left: 2em;
  padding-right: 2em;
  margin: auto;
}

/*

// https://pqina.nl/blog/presenting-images-in-an-aspect-ratio-with-css/

<div class="aspect-ratio-box">
  <img src="/media/desk.jpg" alt="" />
</div>

*/

/* Position child elements relative to this element */
.aspect-ratio-box {
  position: relative;
}

/* Create a pseudo element that uses padding-bottom to take up space */
.aspect-ratio-box::after {
  display: block;
  content: "";
  /* 16:9 aspect ratio */
  padding-bottom: 56.25%;
  margin-bottom: 0.5em;
}

/* Image is positioned absolutely relative to the parent element */
.aspect-ratio-box img,
video {
  /* Image should match parent box size */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**************************************start desktop/laptop responsive CSS*/
@media only screen and (min-width: 1100px) {
  body {
    font-size: 16pt;
  }

  #subhed {
    display: block;
    padding-bottom: 1em;
  }

  img,
  video {
    padding: 0.5em 0em;
    margin-top: 0px;
  }

  video {
    border-radius: 0em;
    max-width: 100%;
    max-height: initial;
  }

  #contactsec {
    float: left;
    text-align: left;
    width: 50%;
  }

  #hellotext {
    font-size: 50pt;
    text-align: right;
  }

  #stuffilike {
    float: right;
    width: 45%;
  }

  .itemdiv,
  .scriptdiv {
    padding: 0.5em;
    margin: 0.5em;
    width: 45%;
    clear: right;
    float: left;
  }

  .headshotgallery {
    padding: 0.1em auto;
    margin: 0em;
    width: 19%;
    clear: right;
    float: left;
  }

  #logotype {
    font-size: 1.5em;
  }
}