/* Variables
---------------------------------------- */
:root {
  --primary: #7d1791;
  --secondary: #F9AB51;
  --dark: #2A0745;
  --light: #f8f8f8;
  --yellowbg: #FFE31E;
  --yellowlite: #fff9d1;
  --red: #e50000;
  --purp: #7d1791;
  --border: #cccccc;
  --color-heading: #111111;
  --color-text: #111111;
  --font-text: "Archivo", sans-serif;
  --font-heading: "Archivo Black", serif;
  
  --paddingamt-micro: 20px;
  --paddingamt-sm: 40px;
  --paddingamt-lg: 80px;
}



/* =============================== */
/*  HANS HTML COLOR BLOCKS  */
/* =============================== */
body {
  background-color: var(--red);
  font-family: var(--font-text);
  line-height: 2;
  background: url(../images/footerbg.jpg) no-repeat;
  background-position: center bottom;
  background-size: cover;
}
.main-wrapper, aside, .highlighted{
  background-color: #ffffff;
}
.node-header{
    display: none; /*user and date at top of pages*/
}
.centercontent{
    text-align: center;
}
.padtop-sm{
    padding-top: var(--paddingamt-sm);
}
.padtop-lg{
    padding-top: var(--paddingamt-lg);
}
.padbottom-sm{
    padding-bottom: var(--paddingamt-sm);
}
.padbottom-lg{
    padding-bottom: var(--paddingamt-lg);
}


/* Header Layout
---------------------------------------- */

.site-logo img{
    max-height: var(--paddingamt-lg);
}
.header {
  padding: 0;  
}
.header-top {
  background-color: none;
}
.header-top a {
  color: var(--color-text);
  border-bottom: 1px dashed var(--primary);
}
.header-top a:hover,
.header-top i {
  color: var(--primary);
}
.header-main {
  background-color: #ffffff;
  padding: var(--paddingamt-lg) 0;
}
header .menu-item{
    font-family: var(--font-heading);
    text-transform: uppercase;
     background-image: none;
  background-position: 0 100%;
  background-size: 100% 8px;
}
.search-icon {
  width: 44px;
  height: 44px;
  background-color: var(--yellowbg);
}
.search-box{
    background: var(--yellowbg);
    padding: var(--paddingamt-lg) 0;
    box-shadow: 0px 0px 0px 4px var(--color-text), 16px 16px 0px 0px var(--color-text);
   margin-top: -16px;
}
.search-box input[type=search]{
    padding: var(--paddingamt-sm);
    background-size: 40px 40px;
    background-position: center right;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-text);
}
.search-box h2{
    display: none !important;
}
.header-search-close{
    border: 0;
    color: var(--color-text);
}
.search-box-content .block-title::before,
.search-box-content .block-title::after {
  content: none;
}
.search-box-content input[type=search],
.search-box-content input[type=search]:focus {
  box-shadow: none;
}
.search-results p, .search-help-link{
    display: none;
}

.mobile-menu span {
  background-color: var(--dark);
}
.page-header {
  padding: var(--paddingamt-lg) 0;
  overflow: hidden;
}
.page-header::before {
  position: absolute;
  content: "";
  background-color: var(--yellowbg);
  width: 100%;h
  height: 100%;
  bottom: 2rem;
}
.region-page-header {
  text-align: center;
}

/* Footer Layout
---------------------------------------- */

footer img{
    max-height: 200px;
    margin-top: var(--paddingamt-sm);
}
.footer {
    background-color: transparent;
}
.footer p, .footer ul, .footer li, .footer h3{
    text-align: center;
}
.footer li, .footer ul, .footer nav{
    margin-left: none !important;
    padding-left: none !important;
}
.footer li{
    border-left: 20px solid var(--red);
}
.site-footer {
  overflow: hidden;
  background-color: var(--red);
  padding-top: var(--paddingamt-lg);
}
.site-footer, .site-footer h3, .footer a{
      color: #ffffff !important;
}
footer h3{
    text-transform: uppercase;
}
a.footerbutton:hover {
  background-color: var(--color-text);
  color: #fff;
}
a.footerbutton, a.footerbutton:active, a.footerbutton:visited{
    display: inline-block;
      background-color: transparent;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid #fff;
  transition: all 0.3s ease;
    outline: 0;
  padding: 12px 20px;
  margin: 10px;
}
.site-footer::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 2rem;
  background: url(../images/footerbg.jpg) no-repeat;
  background-position: center bottom;
  background-size: cover;
border-top: 4em solid var(--purp);
    -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
}

.footer a {
  color: var(--color-text);
}
.footer a:hover {
  color: var(--primary);
}
.footer-bottom-blocks-container{
   margin-bottom: var(--paddingamt-lg);
  padding-top: var(--paddingamt-lg);
}
 .scrolltop{
     margin: 0 var(--paddingamt-sm) var(--paddingamt-sm) 0;
     background: var(--purp);
 }
  .scrolltop:hover{
     background: var(--red);
 }
 


/* =============================== */
/*  HANS TYPOGRAHY  */
/* =============================== */

caption{
    text-align: left;
    margin: var(--paddingamt-sm) 0;
}
li{
    padding: 0;
}
.node-content li{
    margin-left:  var(--paddingamt-sm);
}
h1, h2, h3, h4, h5, h6{
    line-height: 1.4;
}
.orgpageblock h2, .orgpageblock h3, .orgpageblock h4{
    margin: var(--paddingamt-sm) 0;
}
ul, ol, table{
    margin-top: var(--paddingamt-sm);
    margin-bottom: var(--paddingamt-sm);
}

h1{
    font-size: 300%;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 100;
    line-height: 1.2;
   margin-bottom: var(--paddingamt-sm);
}
h2{
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 100;
   margin: var(--paddingamt-sm) 0;
}
h3{
    text-transform: uppercase;
    font-weight: 100;
   margin: var(--paddingamt-sm) 0;
}
caption h3{
   margin-bottom: 0 !important;
}
h4{
   margin: 60px 0 var(--paddingamt-sm) 0;
}
i, em{
    font-family: Archivo Italic;
}
blockquote {
    font-style: italic;
    font-size: 150%;
    padding-right: 0;
    margin:  var(--paddingamt-sm) 0;
    background: url(../images/quotes.png) no-repeat;
    background-color: transparent;
    background-size: 40px 40px;
    padding-left:  54px;
}
.orgpageblock blockquote{
    margin-bottom: 0;
}
.page-tabs li a{
    background: none;
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: 700;
}
ul.page-tabs{
    margin-top: var(--paddingamt-sm);
}
.page-tabs li{
    padding-left: 0;
    margin-left: 0;
}
.page-tabs li a:hover{
    color: #fff;
    background: var(--red);
}
.page-tabs .is-active{
    color: var(--red);
}
ul.page-tabs{
    border-color: var(--border);
    margin-bottom:  var(--paddingamt-sm);
}


/* Links
---------------------------------------- */

a{
     color: var(--color-text);  
}
.node-content p a, .carditem h3 a, .search-results h3 a, .yellowtop a, h2 a, h3 a, .page-type-event .orgpageblock a, .views-element-container ul a, header span a{
  color: var(--color-heading);
  background-image: linear-gradient(to left, #FFE31E 0%, #FFAD1E 100%);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4px;
  padding-bottom: 6px;
}
.node-content p a:hover, .carditem h3 a:hover, .search-results h3 a:hover, .yellowtop a:hover, h2 a:hover, h3 a:hover, .page-type-event .orgpageblock a:hover, .views-element-container ul a:hover, header span a:hover{
  background-image: linear-gradient(to left, #FFE31E 0%, var(--red) 100%);  
  color: var(--color-heading);
}
a img{
    background-image: none;
}
.views-field-title a{
    color: var(--color-text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
}
.views-field-title a:hover, a.websitelink:hover{
        color: var(--color-text);
    border-bottom: 1px solid var(--red);
}


/* Table
---------------------------------------- */
th {
  background: var(--light);
  color: var(--color-heading);
}
th a {
  color: var(--color-heading);
}

td, th{
  border-bottom: 1px solid var(--border);
}


/* Forms
---------------------------------------- */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
textarea {
  outline: 0;
  border: 1px solid var(--color-text);
  transition: all 0.3s linear;
  padding: 12px;
  margin:  var(--paddingamt-sm) 0.5em  var(--paddingamt-sm) 0;
}
fieldset {
  border: 1px solid var(--border);
}

/* Button */
.button, button, [type=button], [type=reset], [type=submit] {
  background-color: transparent;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid var(--color-text);
  transition: all 0.3s ease;
}

.button:hover, button:hover, [type=button]:hover, [type=reset]:hover, [type=submit]:hover {
  background-color: var(--color-text);
  color: var(--light);
}

.block-title {
  margin-bottom:  var(--paddingamt-sm);
}

.block-title::before,
.block-title::after {
  position: absolute;
  content: "";
  bottom: 0;
  height: 2px;
}

.block-title::before {
  left: 0;
  width: 10px;
  background-color: var(--secondary);
}

.block-title::after {
  left: 16px;
  width: 30px;
  background-color: var(--primary);
}






/* =============================== */
/*  Content Type Pages */
/* =============================== */   


.views-view-responsive-grid__item{
    background: #fff;
    
}
.page-type-article div.layout--twocol-section--50-50{
 	border-top: 1px solid var(--border);
 	margin-top: var(--paddingamt-lg);
 	padding-top: var(--paddingamt-sm);
 }
.page-type-article h2:not(:first-child){
     	margin-top: var(--paddingamt-lg);
}
.redborderimg img{
    border-bottom: 40px solid var(--red);
    margin-bottom: 0 !important;
}
.page-type-event .block-content li, .page-type-article .block-content li{
    margin-left: 20px;
}
.page-type-article .block-content header, .page-type-article .block-content h1{
    text-align: center;
}
.teaser{
    text-align: center;
    font-size: 125%;
    line-height: 2;
    padding-top: var(--paddingamt-sm);
}
.page-type-article .block-content header{
   font-size: 75%;
   margin-bottom: 0;
}
@media (min-width: 768px) {
.page-type-intersex-organization div.layout, .page-type-event div.layout{
    box-shadow: 0px 0px 0px 2px var(--color-text), 8px 8px 0px 0px var(--color-text);
    padding: var(--paddingamt-sm);
    margin-bottom: var(--paddingamt-lg);
}
.layout--twocol-section .layout__region--first{
 padding-right: var(--paddingamt-sm);
}
    video{
        max-height: 480px;
    }
}
@media (max-width: 768px) {
    video{
        max-height: 284px;
    }
}

.orgpageblock ul{
    padding: 0;
    margin: 0;
}
.orgpageblock h1{
    margin-top: var(--paddingamt-sm);
    margin-bottom: var(--paddingamt-sm);
}
.orgpageblock h4{
    margin-top: var(--paddingamt-sm);
    text-transform: uppercase;
    border-top: 1px solid var(--color-text);
    padding-top: var(--paddingamt-sm);
    margin-bottom: 20px;
}
.orgpageblock .focusareas ul li, .orgpageblock .views-field-field-event-language ul li, .orgpageblock .views-field-field-event-type ul li, .makeitabox{
    display: inline-block;
    padding: 12px 20px;
    margin: 10px 20px 0 0;
    text-transform: uppercase;
    color: var(--color-text);
    border: 1px solid var(--color-text);
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;
    outline: 0;
}

.eventspage .views-view-responsive-grid__item-inner{
    padding: var(--paddingamt-sm);
    box-shadow: 0px 0px 0px 2px var(--color-text), 8px 8px 0px 0px var(--color-text);
    text-align: center;
}
.eventspage .views-view-responsive-grid__item-inner h2{
    margin-top: 0;
}
.eventspage .views-view-responsive-grid__item-inner h2 a{
    border-bottom: 0 !important;
}
/*contact page */

div#edit-preview{
    margin-bottom: var(--paddingamt-lg);
   padding: var(--paddingamt-sm);
    box-shadow: 0px 0px 0px 2px var(--color-text), 8px 8px 0px 0px var(--color-text);
    background: var(--border);
}
#edit-submit{
    margin-right: 20px;
}
/* =============================== */
/*  Groups Index */
/* =============================== */
text{
    color: red;
  font-family: var(--font-text);
}
.highcharts-subtitle{
    margin-bottom: var(--paddingamt-sm);
}
.tableicon{
   display: inline-block;
   max-width: 20px;
   max-height: 20px;
   margin: 1px 2px;
}
.page-type-intersex-organization .tableicon{

   margin: 4em 1em 4em 0;
   max-width: 37px;
   max-height: 37px;
}
th.views-field-field-country-taxonomy{width:20%}
th.views-field-title{width:38%}
th.views-field-field-website{width:35%}
th.views-field-field-founded-year{width:7%}

.inner-page .yellowtop img{
    float: right;
    width: 400px;
    height: auto;
    margin-left: var(--paddingamt-lg);
    margin-top: var(--paddingamt-sm);
}
tr.inactiverow{
    background: var(--light);
}

/* =============================== */
/*  TIMELINE */
/* =============================== 


/* Timeline: on page itself
========================================*/

.timelinepage .container{ /*on desktop, widen container */
    width: auto;
    max-width: 86% !important;
}
.timeline-marker{  /*appearance of point on line */
    width: 30px !important;
    height: 30px !important;
    top: -14px !important;
    background: var(--color-text) !important;
}
.odd .timeline-marker{
    margin-right: -8px;
}
.even .timeline-marker{
    margin-left: -8px;
}
.timelineitem{  /*all items */
    border-top: 1px solid var(--color-text);
}
.timelineitem h2 span{
    display: block;
}
.timelineitem .timelinedate{
    font-size: 66%;
    margin-bottom: 10px;
}
.timelineitem .timelinetitle, .timelinepage .ui-dialog-title, h2.timelinetitle{
    text-transform: none !important;
    font-family: var(--font-text);
    white-space: normal !important;
}
.timelineitem h2{
    margin-bottom: 10px !important;
    margin-top: -18px;
}
.timelineitem .timelinetitle a{
    background: none;
}
.timelinecategory{
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid var(--color-text);
    padding: 0 8px;
    margin-top: 10px;
    margin-bottom: var(--paddingamt-micro);
}
.whitebg{
    display: inline;
    background: #fff;
    max-width: 240px;
    margin-bottom: var(--paddingamt-sm);
}
.timeline-list li.odd .timelineitem{
    text-align: left;
    padding-right: var(--paddingamt-sm);
}
.timeline-list li.even .timelineitem{
    text-align: right;
    padding-left: var(--paddingamt-sm);
}
.timeline-list li.even .whitebg{
    margin-left: auto; 
    margin-right: 0;
}

/* Timeline: popup box
========================================*/

.timelinepage .ui-widget-overlay{
    background: var(--dark) !important;
    opacity: 0.9 !important;
}

.timelinepage .lightboxy{ /* popup's entire container box has classes: ui-dialog lightboxy ui-widget ui-widget-content ui-front*/
    padding: 0;
    width: 82% !important;
    max-width: 1550px;
   box-shadow: 20px 20px 0px var(--color-text);
   margin-top: -30px;
}
.timelinepage .ui-widget-header{ /* top bar that contains X */
    background: none;
    border: none;
}
.timelinepage .ui-dialog-title{ /* no title in popup, on page instead */
    display: none;
}
.timelinepage .ui-widget-header button{
    z-index: 5000;
    position: sticky;
    float: right;
    border: none;
    background: none;
}
.timelinepage .ui-widget-header button span{
    background-color: var(--red);
    background-image: url(../images/x.png) !important;
    background-size: 100%;
    background-position: 0 0;
}
.timelinepage .ui-widget-header .ui-button-icon{
    padding: 44px;
    box-shadow: 20px 20px 0px var(--color-text);
}

.timelinepage #drupal-modal{ /* encompasses node-content */
}
.timelinepage .ui-dialog .node-content{
    padding: var(--paddingamt-sm) var(--paddingamt-lg);
}
.timelinepage #drupal-modal article{ /* inside node-content */
}
.timelinepage .lightboxy blockquote{
    line-height: 1.5;
}
.timelinepage .lightboxy a{
    background-size: 0%;
    color: var(--red);
    text-decoration: underline;
}
.field-content a:hover{
    color: var(--color-text);
}
.timelinepopupimage img{
    margin: 0 auto;
    box-shadow: 20px 20px 0px var(--color-text);
}









/* =============================== */
/*  Homepage */
/* =============================== */



.homepage h1, .homepage h2, .homepage h3, .chillheading{
    text-transform: none;
    font-family: var(--font-text);
}
.specialtext{
    font-family: var(--font-heading);
}
.uppercase{
    text-transform: uppercase;
}
.yellowtop{
  background: var(--yellowbg);
    padding-top: var(--paddingamt-lg);
  padding-bottom: var(--paddingamt-lg);
  margin-bottom: var(--paddingamt-sm);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
body.homepage .header-main{
    background-color: var(--yellowbg);
}
body.homepage .search-box{
    background: #fff;
}
body.homepage .search-icon{
    background-color: #fff;
}
body.homepage .main-wrapper{
    padding-top: 0;
}
.carditempen{
   	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.carditem{
    background: #fff;
    display: inline-block;
    padding: var(--paddingamt-sm);
    text-align: center;
    width: 100%;
    margin: var(--paddingamt-sm) 20px;
    box-shadow: 0px 0px 0px 2px var(--red), 8px 8px 0px 0px var(--red);
    max-width: 342px;
    height: 680px;
	align-items: center;
	
}
.carditem h3{
    text-transform: uppercase;
}
.carditem img{
    margin-top: var(--paddingamt-sm);
  width: 75%;
   height: auto;
}
.comingsoon{
    color: var(--border);
     box-shadow: 0px 0px 0px 2px var(--border), 8px 8px 0px 0px var(--border);
}
.comingsoon h3{
    color: var(--border);
}

.comingsoon img{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  opacity: 0.4;
}

.redballoon{
      background: var(--red) url(../images/footerbg.jpg) no-repeat;
  background-position: 0 -560px;
    text-align: center;
    border-radius: 60px;
    padding: var(--paddingamt-sm);
    margin-top: var(--paddingamt-lg);
}
.whitetext, .whitetext h2{
    color: #fff;
}
.vennimg{
    width: 600px;
    height: auto;
    float: right;
}


/* container */
.responsive-two-column-grid {
    display:block;
}
.responsive-two-column-grid  div img{
   max-width: 160px !important;
   float: left;
  height: auto;
  margin: 0  var(--paddingamt-sm)  var(--paddingamt-sm) 0;
    border-radius: 0 80px 0 0;
}
.responsive-two-column-grid  div img.right, img.right{
   float: right;
  margin-left:  var(--paddingamt-sm);
  margin-right: 0;
      border-radius: 80px 0 0 0;
}
/* columns */
.responsive-two-column-grid > * {
    padding:0;
        margin-bottom:  var(--paddingamt-lg);
}
/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .responsive-two-column-grid div:first-child{
    padding-right: 2em;
}
.responsive-two-column-grid div:last-child{
    padding-left: 2em;
}
}



.thoughtcontainer {
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  margin:0;
  align-items:center;
  align-content:center;
}
.thought {
  display:flex;
  background-color:#fff;
  padding: 2em;
  border-radius:30px;
  min-width:40px;
  max-width:330px;
  min-height:40px;
  margin: 1.4em 1.4em 2em 1.4em;
  position:relative;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.thought:before,
.thought:after {
  content:"";
  background-color:#fff;
  border-radius:50%;
  display:block;
  position:absolute;
}
.thought:before {
  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  box-shadow:-50px 30px 0 -12px #fff;
}
.thought:after {
  bottom:-10px;
  right:26px;
  width:30px;
  height:30px;
  box-shadow:40px -34px 0 0 #fff,
             -28px -6px 0 -2px #fff,
             -24px 17px 0 -6px #fff,
             -5px 25px 0 -10px #fff;
  
}


@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}
.floaty {
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
}

@keyframes floattwo {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-14px);
	}
	100% {
		transform: translatey(0px);
	}
}
.floatytwo {
	transform: translatey(0px);
	animation: floattwo 6s ease-in-out infinite;
}



/* card */

.cardpen{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	min-height: 100vh;
}

.cardcontainer {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.cardcontainer .card {
	position: relative;
	width: 260px;
	height: 400px;
    margin: 0.5em;
	background: var(--purp);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.cardcontainer .cardred{
	background: var(--red);
    
}
.cardcontainer .card .content {
    padding: 1em;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: 0.5s;
	  display: block;
  text-align: center;
  text-wrap: balance;
}

.cardcontainer .card:hover .content {
	transform: translateY(-20px);
}


.cardcontainer .card .content h3 {
	color: #fff;
	text-transform: uppercase;
	text-align: center;
}

.cardcontainer .card .sci {
	position: absolute;
	bottom: 2em;
	display: flex;
}

.cardcontainer .card .sci{
	list-style: none;
	padding: 1em;
	transform: translateY(2em);
	transition: 0.4s;
	opacity: 0;
}

.cardcontainer .card:hover .sci{
	transform: translateY(0px);
	opacity: 1;
}

.card:hover .content h3{
   	transition: 0.4s;
	opacity: 0;
}
.circlenumber{
    display: block;
    border: 4px solid var(--red);
    color: var(--red);
    padding: 10px;
    border-radius: 50px;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 66px;
}







/*iframe

iframe{
    border: 0;
    box-shadow: 0px 0px 0px 2px var(--color-text), 8px 8px 0px 0px var(--color-text);
}*/



/* =============================== */
/*  TOC GEARS */
/* =============================== */   

.allgearpen{
     text-align: center;
    margin-top: var(--paddingamt-sm);
    margin-bottom: var(--paddingamt-sm);
}
.gearscontainer{
    vertical-align: middle;
    position: relative;
    display: inline-block;
    width: 255px;
    height: 253px;
}
.gear{
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: -10px;
    margin: 0 10px;  
    line-height: 1.25;
    width: 255px;
    height: 253px;
    padding: 85px 76px 0 76px;
}
.gear1{
  /*  background: url(../images/gear1.png) no-repeat;
    background-size: cover;*/
    color: #ffffff;
    font-size: 80%;
}
.gear2{
  /*  background: url(../images/gear2.png) no-repeat;
    background-size: cover; */
    font-size: 70%;
}


@keyframes rotate-center-normal {0% { transform: rotate(0); } 100% { transform: rotate(360deg);} }
@keyframes rotate-center-rev {0% { transform: rotate(0); } 100% { transform: rotate(-360deg);} }
.clockwise{
    animation: rotate-center-normal 30s linear 0s infinite normal none;
}
.counterclockwise{
    animation: rotate-center-rev 30s linear 0s infinite normal none;
}
.gearimage{

}


/* =============================== */
/*  MEDIA QUERIES */
/* =============================== */


/* what to do if widdle */

@media (max-width: 768px) {

.menu-wrap .menu-item > span {
    display: inline-block;
    margin-top: 10px;
    color: var(--purp);
}

  .main-wrapper{
      padding-bottom: var(--paddingamt-lg);
  }
.search-icon, .mobile-menu{
  margin-top: 20px;
}
.header-main{
    padding-right: 20px;
    padding-left: 20px;
}

.redballoon{
  background-position: 0 -380px;
    border-radius: 0px;
}
.vennimg{
    margin-bottom: var(--paddingamt-sm);
}
#bd-email{
    max-width: 140px;
}
a.footerbutton, a.footerbutton:active, a.footerbutton:visited{
   width: 90%;
}
  .footer-bottom-blocks-container, .main-wrapper, .yellowtop{
      padding-right: 20px;
      padding-left: 20px;
  }
blockquote{
    background-size: 50px 50px;
    padding-left:  0px;
    padding-top: 80px;
    font-size: 110%;
        line-height: 1.66;
}
iframe{
    max-width: 320px;
}
body.inner-page{
    overflow-x: hidden;
}
.page-type-intersex-organization .tableicon{
   max-width: 30px;
   max-height: 30px;
}
.page-type-intersex-organization h1{
    font-size: 200%;
}
.orgpageblock .focusareas ul li{
    width: 240px;
}

.orgpageblock .views-field-field-contact-email, .page-type-intersex-organization h1, .page-type-event h1{
    overflow-wrap: break-word;
    hyphens: manual;
}
h1{
  inline-size: 320px;
     overflow-wrap: break-word;
    hyphens: manual;
    font-size: 10vw;
}
.timelineitem h2{ /* make timeline page work on mobile */
    
    font-size: 4.5vw;
}
.thought{
    max-width: 90%;
    margin: 1em 0.5em;
}
.carditem{
    margin: 0 auto;
    margin-bottom: var(--paddingamt-sm);
    margin-top: var(--paddingamt-sm);
    width: 90%;
}
.cardcontainer .card{
	height: 320px;
	width: 90%;
}
.inner-page .yellowtop img{
    margin-bottom: var(--paddingamt-lg);
}
}

/* what to do if BIG! */

@media (min-width: 768px) {
    body.homepage .site-logo img{
    content: url("../images/SLIM-Logo-Black-Text-onWhite.svg");
    max-height: 200px;
}
  html {
    font-size: 18px;
  }
  .main-wrapper{
      padding: 0 0 80px 0;
  }
  .yellowtop{
    /*  border-radius: 40px 40px 0 0;
      border-bottom: 40px solid var(--light);*/
  }
  .holdtheradius{
      border-radius: 0 !important;
  }
  .teaser{
      
    padding: 0 15%;
  }
  /* Header */
  
  .menu a.is-active, .submenu a.is-active{
  /*background-image: linear-gradient(to left, #FFE31E 0%, #FFAD1E 100%);*/
  background-image: linear-gradient(to left, #FFE31E 0%, #FFE31E 100%);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 50% 8px;
}

  .menu-wrap .menu a, .menu-item{
    color: var(--color-heading);    
  }
  .inner-page .menu-wrap .menu-item-level-1{
    padding: 10px 20px 10px 0;
    margin: 0;
   border-right: 1px solid var(--border);
  }
    .inner-page .menu-wrap .menu-item-level-2{
    padding: 20px 0;
  }
  body.homepage .menu-wrap .menu-item{
    background: transparent;
    border-radius: 40px;    
  }
    body.homepage .menu-wrap .menu-item a{
    background: #fff;
    border-radius: 40px;    
  }
  .menu-item a, .menu-item span{
      padding: 10px 12px;
      line-height: 1.0;
  }
  body.homepage .submenu{
      background-color: transparent;
      padding: 10px 0 20px 0;
  }
    body.homepage .submenu li{
        margin: 20px 0 0 0;
      border-bottom: none;
  }
      body:not(.homepage) .submenu li{
     background: #ffffff;
  }
  li.menu-item-level-2{
      text-align: center;
      margin: 0 auto;
  }
body.homepage .menu-item-has-children::after{
    color: #ffffff;
}
  .page-header {
    padding: 4rem 0 10rem 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
  }
  .page-header::before {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
  }
.footer-bottom-block-left, .footer-bottom-block-left img{
    text-align: left;
}
.footer-bottom-block-right{
    text-align: right;
}
}
@media (min-width: 992px) {
  .menu-wrap {
    background-color: transparent;
  }
}/*# sourceMappingURL=style.css.map */







/* =============================== */
/*  THEME DEFAULTS MISC */
/* =============================== */

/* Box */
.box {
  background-color: #ffffff;
  box-shadow: var(--shadow);
}

/* Comments
--------------------------------------*/
#comments {
  border-top: 1px solid var(--border);
}

#comments i {
  color: var(--primary);
}

.comments-title::before,
.comment-form-wrap .add-comment-title::before {
  font-family: "xara";
  color: var(--primary);
  padding-right: 6px;
}

.comments-title::before {
  content: "\f0e6";
}

.comment-form-wrap .add-comment-title::before {
  content: "\e900";
}

/* Comments -> single comment */
.comment {
  box-shadow: var(--shadow2);
}

.comment-header {
  background-color: var(--border);
  border: 0;
  align-items: center;
}

.comment-user-picture {
  flex: 0 0 100px;
}

.comment-title,
.comment-title a {
  color: var(--color-heading);
}

.comment-reply a,
.comment-delete a,
.comment-edit a {
  padding: 4px 12px;
  background: #ffffff;
  border-radius: 4px;
  transition: all 0.4s ease-in-out;
}

.comment-reply a:hover,
.comment-delete a:hover,
.comment-edit a:hover {
  background: var(--primary);
  color: #ffffff;
}

/* Submitted Details */
.node-submitted-details i {
  color: var(--primary);
}

.node-header .image-field {
  margin: 0;
}

.node-author {
  display: flex;
  align-items: center;
}

.author-picture {
  margin-right: 10px;
}

.taxonomy-term a {
  border-radius: 6px;
  background-color: var(--light);
  transition: all 0.3s ease;
}

.taxonomy-term a:hover {
  color: var(--color-text);
  background-color: var(--border);
  border: 2px solid var(--primary);
}

.sidebar .block {
  background-color: var(--light);
  box-shadow: var(--shadow2);
}
/* Feed text */
.feed-icon {
  display: block;
  font-size: 0;
  width: 32px;
  height: 32px;
  background: url(../images/icons/rss.svg) no-repeat;
}

/* Components -> Social icons */
.social-icons {
  position: relative;
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.social-icons li {
  padding: 0;
}

.social-icons li a {
  color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--primary);
  border-radius: 6px;
  transition: all 0.4s ease;
}

.social-icons li a:hover {
  background-color: var(--light);
}
.region-content-home-top .block:nth-child(even) {
  background-color: var(--light);
}

.homepage-content .block {
  padding: 4rem 0;
}

.homepage-content .block-title {
  text-align: center;
}

.homepage-content .block-title::before {
  left: calc(50% - 23px);
}

.homepage-content .block-title::after {
  left: calc(50% - 7px);
}

/* components -> Servies */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  grid-gap: 1rem;
  gap: 1rem;
}

.service {
  position: relative;
  flex: 1 0 250px;
  background-color: #ffffff;
  padding: 2rem 1rem;
  border-radius: 6px;
  box-shadow: var(--shadow);
  text-align: center;
  z-index: 0;
}

.service::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--light);
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  transition: transform 0.5s ease;
}

.service:hover::before {
  transform: scaleX(1);
}

.service-icon {
  margin-bottom: 1rem;
  transition: transform 0.3s linear;
}

.service:hover .service-icon {
  transform: translateY(-1rem);
}

/* Pricing Table */
.pricing {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.pricing-item {
  border-top: 2px solid var(--primary);
  background-color: #ffffff;
  flex: 1 0 300px;
  box-shadow: var(--shadow);
  padding: 2rem;
  border-radius: 10px;
}

.pricing-item h4 {
  color: var(--secondary);
}

.pricing-item h4,
.pricing-item sup,
.pricing-item sub {
  font-weight: 300;
}

.pricing ul {
  list-style: none;
  margin: 0;
  padding: 0 0 1rem 0;
}

.pricing li {
  border-bottom: 1px solid var(--border);
}

/* Projects */
.projects {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.project {
  flex: 1 0 300px;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.project img {
  border-radius: 6px;
  transition: transform 0.5s linear;
}

.project img:hover {
  transform: scale(1.6);
}

.bg-light,
.featured {
  background-color: var(--light);
}