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

/* Large devices (laptops/desktops, 601px and up) */
@media screen and (min-width: 601px) {





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:72px; /* originaly was 60 */
letter-spacing: 2px;
line-height: .75;
font-style:normal;
font-weight:300; 
}

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

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

content: "\A";
	white-space: pre;
 	display: inline;
	
	margin-left: 0px;

}

.sub_title_alignment {
margin-left: 60px;

}

.split_line {
content: "\A";
	white-space: pre;
 	display: inline;
	
	margin-left: 0px;
}

/* 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;

}


.break_line {
	content: "\A";
	white-space: pre;
 	display: block;
	
}


.quote {

max-width: 60%;
color:#ee3d96;
font-family:"Gantari", sans-serif;
font-size:40px;
line-height: 1.25;
font-style:normal;
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: 1;
font-weight: 300;
}

p.six_light {
color: #000;
font-family:Gantari, sans-serif;
font-size:12px;
line-height: 2;
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;
}

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: 1pt;

}

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: .75pt;


}

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


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

.map_lastname {
color:#000000;
font-family:"Gantari ExtraBold", sans-serif;
font-size:16px;
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 {
max-width: 960px;
padding: 50px 5px;
margin: 0px auto;


}

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

background-color: #fff;
}

header img {
max-width: 200px;
display: inline;
}


.logo_bar {
width: 50%;
float: left;

}


.header_content {
width: 960px;
margin: 0px auto;

/* border: 1px solid red; */
}

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




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


.artist {
 margin: 30px 0px;
  width: 60%;

 display: flex;
}

.artist2 {
 margin: 30px 0px;
  width: 47%;

 display: flex;
}

.artist_double {

display: flex;
flex-direction: row;

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: 2px;
}


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

/* Bottom right text */
.text-block {
  position:absolute;
  width: 225px;
  bottom: 20px;
  right: 20px;
  background-color: rgba(255,255,255,0.75);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
} 



article {
 column-count: 2;
 column-gap: 40px;
 column-width: 50%;

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

}

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

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

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

article .txt_light  {
display: inline;
}


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

.name_list {
 column-count: 3;
 column-gap: 20px;
 column-width: 33%;

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

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

.list_icon {
 display: inline-block;
 margin-right: 10px;
 margin-left: 5px;
margin-top: -5px;
 float: left;
 width: 55px;
}

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

}


.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;
}


 


/* suqre images */

.column img {
border: 1px solid #000;
width: 95%;
margin: 5px;
}

 
 .row {
 width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px;
  
}

/* Create two equal columns that sits next to each other */
.column {

 display: flex;
  flex-direction: row;
  padding: 0px 5px;
  margin-top: 15px;
  
}



/* 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{
max-width: 960px;
margin: 0px auto;
text-align: center;
}


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

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

nav {
column-count: 1;
margin-bottom: 25px;
}

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

}

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


footer ul {
list-style-type: none;

}

footer li {
display: inline-block;
margin:0px 15px;
}





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

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


#more {
    display: block;
  }
span#dots {
    display: none;
  }

button, #myBtn {
    display: none!important;
  }

.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_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;
}

.workshop_intro_light article {
padding: 0px 35px;
}

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

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

.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;
}


.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:40px;
line-height: 1.25;
font-style:normal;
font-weight:800;

}

article .txt_white {
display: inline;
}


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

}

/* . . . .  */

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


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


.description {
width:60%;
float: right;
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;
}

nav.index_nav a {
font-size: 55px;
color: #333;
text-decoration: none;
transition: 0.4s;
margin-left: 200px;


}



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);
}


/* tool tip */
/* https://www.w3schools.com/howto/howto_css_tooltip.asp */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}





} /* close @media */