@charset "UTF-8";
/* CSS Document */


body {
font-family:Gantari, Verdana, sans-serif;
background-color: #fff;

margin: 0;
}

/* FONT RULES */

.main_titles {
color:#ee3d96;
font-family:Ainsdale, sans-serif;
font-size:54px;
letter-spacing: 2px;
line-height: .80;
font-style:normal;
font-weight:300; 
}

.main_titles_2ndline {
color:#ee3d96;
font-family:Ainsdale, sans-serif;
font-size:42px; /* originaly was 60 */
letter-spacing: 2px;
line-height: .80;
font-style:normal;
font-weight:300; 
}

.sub_title {
color:#ee3d96;
font-family:"Gantari SemiBold", sans-serif;
font-size:20px;
line-height: 1.25;
font-style:italic;
font-weight:600;

	content: "\A";
	white-space: pre;
 	display: block;
	
	margin-left: 60px;

}


.split_line {
content: "\A";
	white-space: pre;
 	display: block;
	line-height: 1.2;
	margin-left: 60px;
}

/* content */

.txt_light {

color:#000000;
font-family:Gantari, Verdana, sans-serif;
font-size:14px;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:5px;

}

.txt_semibold {
color:#000000;
font-family:"Gantari SemiBold", Verdana, sans-serif;
font-size:14px;
line-height:2;
font-style:normal;
font-weight:600;

}

.txt_pink_ital {
color:#ee3d96;
font-family:"Gantari SemiBold", sans-serif;
font-size:14px;
font-style:italic;
font-weight:600;

}


/* PHONE */
.quote {
font-size:32px;
line-height: 1.25;
width: 100%;
color:#ee3d96;
font-weight:800;
}

.name {
color:#000000;
font-family:"Gantari", sans-serif;
font-size:24px;
font-style:normal;
font-weight:800;

}

.nac {
color:#000000;
font-family:Gantari, sans-serif;
font-size:16px;
font-weight:300;
}

.afiliation {
color:#000000;
font-family:"Gantari SemiBold", sans-serif;
font-size:16px;
font-style:normal;
font-weight:600;

}

.six_light {
color: #000;
font-family:Gantari, sans-serif;
font-size:12px;
line-height: .25;
font-weight: 300;
}

.six_bold {
color:#000;
font-family:"Gantari SemiBold", sans-serif;
font-size:12px;
font-style:normal;
line-height: 1.25;
font-weight:600;

}

p.six_light {
line-height:2;
}


span.six_light {
color: #000;
font-family:Gantari, sans-serif;
font-size:12px;
line-height: 1;
font-weight: 300;


display: inline-block;
text-align:left;
letter-spacing: 1.15pt;

}

span.six_bold {
color:#000;
font-family:"Gantari", sans-serif;
font-size:12px;
font-style:normal;
line-height: 1.15;
font-weight:600;


display: inline-block;
text-align:left;
letter-spacing: 1pt;

}



.text-block br {
line-height: 1;

}


.map_name {
color:#000000;
font-family:"Gantari ExtraBold", sans-serif;
font-size:18px;
font-style:normal;
font-weight:800;
}

.map_lastname {
color:#000000;
font-family:"Gantari ExtraBold", sans-serif;
font-size:13px;
font-style:normal;
font-weight:800;
}

.pink_exbold {
color:#ee3d96;
font-family:"Gantari ExtraBold", sans-serif;
font-size:8px;
font-style:normal;
font-weight:800;

}


/* - - - - - - CLOSE FONT RULES */
/* - - - - - - CLOSE FONT RULES */



* {box-sizing: border-box;}


main {
width: 100%;
padding: 0px 5px;
margin: 0px auto;
margin-bottom: 30px;

}

header {
width: 100%;
margin-bottom: 50px;
padding-top: 15px;
display: flex;
align-items: center;
flex-flow: row;

background-color: #fff;
}


/* PHONE */
header img {
max-width: 100%;
}

.logo_bar {
width: 50%;
float: left;
margin-left: 20px;
}


.header_hr {
text-align: left;
width: 90%;
border: 1px solid #fff;
}



.video {
width: 100%;
background-color: #000;
margin: 0px auto;
text-align: center;
padding: 15px 0px;
}


.artist {
 margin: 30px 0px;
 display: flex;
}


.artist2 {
margin: 30px 0px;
display: flex;
}

.artist_double {

display: flex;
flex-direction: column;
justify-content: space-between;
}


.artist_pic {
background-color: #666;
}

.artist_pic img {
border-bottom: 3px solid #fff;
}


.bio {
margin-left: 30px;
max-width: 85%;

}


.index_icon {
width: 55px;
display: inline;
text-align: left;
margin-bottom: -5px;
}


 /* Container holding the MAIN image and the text */
.container {
width: 100%;
height: 100%;
background-color: #000;
position: relative;

border: 1px solid #000;
}

/* Bottom right text */
.text-block {
  position:relative;
  width: 100%;
 
  background-color: #fff;
  color: #333;
  padding: 20px;
  
 
} 




/* interesting new trick */
article br {
margin-bottom: 10px;
}

article hr {
border: 1px solid #000;
margin-top: 20px;
margin-bottom: 20px;
}

/* w3 // https://www.w3schools.com/css/css3_multiple_columns.asp */

article .txt_light  {
display: inline;
}


/* PHONE */
article {
 column-count: 1;
 column-width: 100%;
 
 margin-top: 35px;
}



/* --- PHONE :: list of artists in the artist list -- */

.name_list {
 column-count: 1;
 column-width: 80%;


margin-top: 30px;
margin-bottom: 35px;
}

.name_list hr {
border: 1px solid #000;
margin-top: 20px;
margin-bottom: 20px;
}

.list_icon {
 display: inline-block;
margin-right: 25px;
margin-left: 40px;
margin-top: -10px;
 float: left;
 width: 60px;
}

.list_icon:hover {
box-shadow: 0px 0px 2px 2px #ee3d96;
border-radius: 55px;
background-color: #fff;

}



.name_list a{
text-decoration: none;
}

.name_list a:link > span{
color: #000;
text-decoration: none;
transition: 0.4s;
}

.name_list a:hover > span{
color: #fff;
text-shadow: 1px 1px 2px #ee3d96;
}




 /* Holds the flex image set */
 
 .images {
 width: 100%;
 padding-bottom: 10px;
 
 }
 
.images img {
width: 100%;
}

img.half {
width: 50%;
}

/* suqre images */

 .row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0px 5px;
   margin-top: 15px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  
  border: 1px solid #000;
}




/* close :: flex image set // https://www.w3schools.com/howto/howto_js_image_grid.asp */


/* - - - - - - - - - - - - - - - - - - -  */
/* ... footer rules ... */

footer {
 width: 100%;
 background-color:#ee3d96;
 padding: 5px;
}

footer div{
width: 100%;
margin: 0px auto;
text-align: center;
}

footer img {
width: 50%;
margin-bottom: 15px;
}

footer hr {
border: 1px solid #000;
margin-top: 20px;
}

nav {
column-count: 2;
column-width: 100%;
margin-top: 15px;
margin-bottom: 25px;
}


nav a {
color: #eee;
text-decoration: none;
}

nav a:hover {
color: #000;
text-decoration: none;
}


footer ul {
list-style-type: none;
display: inline;

}


/* PHONE */
footer li {
display: block;
text-align: left;
margin:5px 15px;
}






/* - - - - - - - - - - - - - - - - -  */
/* . . .  workshops pages . . .  */
/* - - - - - - - - - - - - - - - - -  */

body.workshops {
background-color: #000;
}

#more {display: none;}

button {
  background-color: #ee3d96; /* pink */
  border: 1px solid rgba(255,255,255,1);
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display:block;
  margin: 0px auto;
  font-size: 16px;
  
  border-radius: 25px;
}

button:hover {
  background-color: #000; /* black */
  border: 1px solid #fff;
  color: #fff;
}

.piece br {
margin-bottom: 10px;
}

.workshop_intro {

background-color: #000;
color:#eee;
font-family:"Gantari SemiBold", Verdana, sans-serif;
font-size:14px;
line-height:2;
letter-spacing: .5px;
font-style:normal;
font-weight:600;

}

.workshop_article {
color:#fff;
font-family:Gantari, Verdana, sans-serif;
font-size:14px;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:5px;
}


.workshop_intro_light {

background-color: #000;
color:#eee;
font-family:"Gantari", Verdana, sans-serif;
font-size:14px;
line-height:2;
letter-spacing: .5px;
font-style:normal;
font-weight:300;

margin-top: 35px;
}


.just_pink {
background-color: #ee3d96;
padding: 15px;
margin-top:15px;
}

article.pink_box {
background-color: #ee3d96;
color:#fff;
font-family:Gantari, Verdana, sans-serif;
font-size:14px;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:5px;
}



.quote_white {
color:#fff;
font-family:"Gantari", sans-serif;
font-size:36px;
line-height: 1.25;
font-style:normal;
font-weight:800;
}

article .txt_white {
display: inline;
}


.program {
overflow: auto;
margin-bottom: 35px;

}


.workshop_hr {
border: 1px solid #ee3d96;
}

.white_line {
border: 1px solid #fff;
margin: 25px 0px;
}


/* . . . .  */

.about_artist {
overflow: auto;
margin-top: 35px;
margin-bottom: 35px;
padding: 0px 25px;
}


.about_artist img {
width: 65%;
text-align: center;
margin: 0px auto;
margin-bottom: 35px;
display: block;
}


.description {
width:90%;

color:#fff;
font-family:Gantari, Verdana, sans-serif;
font-size:14px;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:5px;
}

section.side_pink {
width: 85%;
background-color: #ee3d96;
float: right;
position:relative;
right: 0px;
padding: 20px 0px 20px 35px;
margin-bottom: 25px;

border-left: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

section.side_pink:hover {
background-color: #fff;
color: #ee3d96!important;
border-left: 1px solid #ee3d96;
border-top: 1px solid #ee3d96;
border-bottom: 1px solid #ee3d96;
}


.side_pink span{
line-height: 1;
}




/* - - - - - - - - - - - - - - - -  */
/* index page */
/* - - - - - - - - - - - - - - - -  */

.index_logo {
margin-top: 30px;
margin-bottom: 50px;
width: 100%;
}

nav.index_nav {
margin:25px 20px 0px 40px;
}


/* PHONE */
nav.index_nav a {
margin-left: 0px;
}


nav.index_nav a:hover {
color: #ee3d96;
text-decoration: none;
}




.index_hr {
text-align: left;
width: 90%;
border: 1px solid #000;
}






/* - - - - - - - - - - - -  */
/*   essays.    */
/* - - - - - - - - - - - -  */



.esy_intro {

background-color: #000;
padding: 35px 0px;

}

.esy_center {

max-width: 960px;
margin: 0px auto;
padding: 0px 15px;

}


.esy_article {
color:#000;
font-family:Gantari, Verdana, sans-serif;
font-size:14px;
font-variant:normal;
font-weight:300;
line-height:2;
margin-bottom:5px;
}


.six_light_white {
color:#fff;
font-family:Gantari, sans-serif;
font-size:12px;
line-height: 2;
font-weight: 300;
}


.side_pink_esy {
width: 85%;
background-color: #ee3d96;
float: right;
position:relative;
right: 0px;
padding: 20px 20px 20px 35px;
margin-bottom: 25px;
}

.side_pink_esy span{
line-height: 1;
}


.esy_article img {
width: 17px;
height: 17px;
margin-bottom: -3px;
}





.gap {
height: 35px;
}


/* image mapper */

a:link rect {
fill: rgba(252,34,247,0);
}

a:hover rect {
/* fill:rgba(238,61,150,0.75); */
fill: rgba(252,34,247,0.5);
}