/* ----- Main ----- */
html { font-family: 'Advent Pro', sans-serif;
font-family: 'Amatic SC', cursive;
font-family: 'Urbanist', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'Rajdhani', sans-serif;
font-family: 'Space Grotesk', sans-serif;
font-family: 'Tajawal', sans-serif;
font-family: 'Urbanist', sans-serif;
font-size: 14px; color: #606060;}
@media only screen and (min-width: 768px) {
html {font-size: 15px;}
}
* {text-decoration: none; box-sizing: border-box; margin:0; padding:0;}
body {margin: 0 auto; padding: 0;}
header, nav, section, footer {}
/* ----- Headings ----- */
h1, h2 , h3, h4, h5, h6 {font-weight: normal; width: 100%;}
header h1 {font-size: 1.7rem; font-weight: 300; font-family: 'Advent Pro', sans-serif; letter-spacing: 0em; padding: 1em 0 1em .5em;}
h2 {font-size: 0em;} /* ----- The default for H2 is Hidden ----- */
h3 {font-size: 1em; font-family: 'Advent Pro', sans-serif; text-transform: uppercase; margin: 1em;}
h4 {font-size: 3em;}
h5 {margin-left: 1em; font-size: 1em;}
/* ----- header, section, footer ----- */
header, nav, footer, section {padding: 1em; float: left; width: 100%;}
header {width: 100%; padding-left: 0em;}
@media only screen and (min-width: 768px) {
header {position: fixed; width: 20%; padding-left: 2em;}
}
section {width: 100%; float: left;}
@media only screen and (min-width: 768px) {
section {width: 80%; float: right; min-height: 400px; }
}
footer {width: 100%; text-align: right; font-size: .6em; color: #909090;}
.leftfooter { font-family: 'Advent Pro', sans-serif; font-size: .7rem; text-align: left;}
.centerfooter { font-family: 'Advent Pro', sans-serif; font-size: .7rem; text-align: center;}
.rightfooter { font-family: 'Advent Pro', sans-serif; font-size: .7rem; text-align: right; text-align: right;}
/* ----- Navigation ----- */
nav {}
@media only screen and (min-width: 768px) {
nav {border-top: none;}
}
nav ul {margin: 0em; list-style: none;}
nav ul li {display: inline-flex; font-family: 'Advent Pro', sans-serif; font-size: 1em; padding: .7em; margin-bottom: .2em; border: 1px solid;}
@media only screen and (min-width: 768px) {
nav ul {margin: 0}
nav ul li {display: block; font-size: 1.1em; font-weight: 300; padding: .2em .2em .4em 0; margin: 0em; background: none; border: none;} /* <-- */
}
nav .current li, nav .current:visited li {color: #000000; background: #eee;}
nav .current:hover li {color: #c0c0c0;}
nav .current:active li {color: #606060;}
@media only screen and (min-width: 768px) {
nav .current li, nav .current:visited li {color: #b52a33; background: none; font-weight: bold;}
nav .current:hover li {color: #c0c0c0;}
nav .current:active li {color: #606060;}
}
/* ----- Images and Figures ----- */
img {max-width: 100%; }
figure {max-width: 600px; padding: 0em;}
@media only screen and (min-width: 768px) {
figure {max-width: 600px; padding: 1em;}
}
figcaption {font-family: 'Advent Pro', sans-serif; font-size: .8em; text-align: center; margin-bottom: 2em;}
@media only screen and (min-width: 768px) {
figcaption {font-size: .9em; text-align: center; margin-bottom: 3em;}
}
#home figure {max-width: 100%; padding: 0;}
@media only screen and (min-width: 768px) {
#home figure {max-width: 100%; padding: 2em 3em 0 0;}
}
/* ----- Paragraphs and Lists (p, ul, ol, li) ----- */
p, ul, ol {font-family: 'Advent Pro', sans-serif; margin: .5em 1em;}
p {text-align: justify;}
ul, ol {margin-left: 0em;}
/* ----- Links ----- */
a {}
a, a:visited {color: #909090; text-decoration: none;}
header a, header a:visited, .past-list a, .past-list a:visited {color: #909090; text-decoration: none;}
a:hover, header a:hover, #past a:hover, #upcoming a:hover {color: #303030; text-decoration: none;}
a:hover img {opacity: .5 ;}
a:active {color: #000000; text-decoration: underline;}
/* ----- Other typography ----- */
blockquote {text-align: justify; font-style: italic; margin: 0 3em;}
hr {
color: #eeeeee;
margin: 1em;
height: 0px;
}
.cv {margin: 0 1em;}
.cv ul {list-style: none; margin-top: 0;}
@media (min-width: 550px) {.cv ul {list-style: none; margin-top: 1em;}}
.cv ul ul {list-style: none; margin: 0 0 2em 0; } /* ----- list group including title ----- */
.cv ul li {list-style: none; margin: .5em 0;} /* ----- list items individually not including heading ----- */
.cv ul ul li {margin: .3em 0;} /* ----- list items individually not including heading ----- */
.studio {margin: 2em 0 0 0;}
.photocaption {text-align: left; font-size: .7rem; font-style: italic; margin: 0;}
.social {list-style: none; margin: 1em 0 2em 1em;}
.social ul {list-style: none; margin-top: 0;}
.social li {list-style: none; margin: 1em 0;}
/* CLEARING
-------------------------------------------------------------------------------------------------- */
.container:after, .row:after, .u-cf {content: ""; display: table; clear: both; }
/* ----- Extra Stuff ----- */
.title {font-size: 1rem; margin: 1em 0 0 0;}
.title-space {font-size: 1rem; margin: 0 0 2em .1em;}
.ghost {font-size: 0;}
.ghost-phone {display: none;}
@media only screen and (min-width: 768px) {
.ghost-phone {display: initial;}
}
.description {margin: 0 1em 0 1em;}
.wrapper {width: 50%;}
/* ----- multiple ----- */
.columns { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; }
/* ----- Grid System ----- */
[class*="col-"],
.row {
width: 100%;
float: left;
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
/* ----- for testing -----
header, section, footer, nav {border: 1px dashed #c0f0f0;}
[class*="col-"], .container, p, ul, ol, h1, h2, h3, h4 {border: 1px dashed #f0c0c0;}
p, ul, ol, h1, h2, h3, h4 {border: 1px dashed #f0f000;}
/* ----- end ----- */