/* ---------- NEW fixes 2020 ---------*/

/*---tidy up fonts---*/

h1 {
	font-size:44px;
	/*line-height:50px;*/
	padding-bottom:12em;
}
h1 {
font-family: 'Major Mono Display', monospace;		
}
h5 {
line-height:1.33em;	
margin-top:5px;
}

h5 small {
line-height:1.15em;
}

/*---image hover effect---*/

img {
		
	 transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}
img:hover {
	
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
    -webkit-filter: grayscale(100%);
        /* FF 35+ */
      filter: grayscale(100%);

    }
/*----------------Tooltip-------------------*/
.wrapTooltip {
  /*text-transform: uppercase;*/
  color: rgba(224,4,139,0.65); /* magenta pink*/
  /*lets use an opaque pink!! #e059a9*/
  /*background: #ececec;*/
max-width:360px;
margin: 0 auto;
  cursor: help;
  /*font-family: "Gill Sans", Impact, sans-serif;*/
  font-size: 22px;
  
  /*margin: 100px 75px 10px 75px;*/
  padding:3px 3px 5px 3px;
  position: relative;
  text-align: center;
  /*width: 200px;*/
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
    -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
}
.wrapTooltip:hover {
color: rgba(178,61,212,.85);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
}

.wrapTooltip .tooltip {
  /*background: rgba(224,4,139,0.65);*/
   /* magenta pink*/
    background :#e059a9;
/* solid purple #ab43d5*/
background :#ab43d5;
  bottom: 100%;
  color: #fff;
  display: block;
  /*left: -25px;*/
  font-size:14px;
font-family: 'Raleway', sans-serif; 

  font-weight:600;
  margin-bottom: 6px;
  opacity: 0;
  padding: 18px 20px 20px 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  max-width: 360px;
  border-radius:7px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapTooltip .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapTooltip .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #ab43d5 /* magenta pink*/ 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapTooltip:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapTooltip .tooltip {
  display: none;
}

.lte8 .wrapTooltip:hover .tooltip {
  display: block;
}
	
/*==================== NEW VIDEO STUFF===================================================================================================*/

#videoBG {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
	
}

/*===media query===*/
/* iPhone XS Max, XR ----------- */
@media (max-width: 640px) {/* Styles */

#videoBG {
  object-fit: cover;
  width: 100vw;
  height: 50vh;
  position: fixed;
  top: 0;
  left: 0;
	
}
}

/*bootsrap 4 nav adjustments*/
.navbar {
	/*background-color: rgba(0,0,0,.31);*/
	
	}
.linkBg {
	background-color:rgba(0,0,0,.74);
	padding:3px;
	margin:5px;
}
/* header items text bgs*/
.textheaderBg {
background-color: rgba(0,0,0,.48);
padding:0;
display: block;
}

/*---gallery boxes----*/
.col-lg-3, col-md-4, col-6 {
			padding:1px;	

		}
	


 /* grad text */
 /* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */

.gradient-text {
  /* Fallback: Set a background color. */
  background-color: #ffffff;
  
  /* Create the gradient. */
  /*background-image: linear-gradient(45deg, #f23461, #70b8fb, #0a4adb);*/ /*pinl cyan, blue */
   background-image: linear-gradient(45deg, #e348a4, #e348a4, #2c7bff, #2c7bff);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
   /* fix for gradient text*/
	  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}


/*+-+-+-+-+-+-MODAL adjustments-=-Liggtbox popped window*/

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: center;
    padding: 3px 8px 8px 8px;
    border-top: 0px solid #fff; 
	font-size:0.9em;
	font-weight:400;
}
.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 7px;
}
.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius:0.0rem;
    outline: 0;
}

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 7px 10px 0px 10px;
   border-bottom: 0px solid #fff; /*not shown*/

}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
		font-size:0.9em;
	font-weight:400;
	
}
.close {
    float: right;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(224,4,139,1.0);
    text-shadow: 0 1px 0 #fff;
    opacity: 0.65;
	font-family: 'Major Mono Display', monospace;		

}
.close:focus, .close:hover {
    color:rgba(178,61,212,1.0); 
    text-decoration: none;
    opacity: 0.80;
}
.ekko-lightbox-nav-overlay a:hover, .ekko-lightbox-nav-overlay a:focus {

    color: #fff; /* keep the arrows on the lightbox white*/

}
.modal-backdrop.show {
    opacity: 0.74;
}
/*----edit this----*/
.footerBits {
	text-align: center;

	}
	
	.footerBits, p {
margin-top: 1.25em;	

	}

/******NEW BG for Sections******************/
.bg-gallery {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    /*color: #fff;*/
    background: rgba(255, 255, 255, 1.0);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	    padding-bottom: 54px; /* overides 'section' padding*/
	}
#footer {
   position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
   background: url(../img/footer-bg.jpg) no-repeat center center;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	
	}
/* ------------------------------------- older stuff*/
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
/* header line height adjust*/
.headerline {
line-height:33px;
padding: 100px 0 100px 0;

}  

	
/********************************************* OVERIDE STYLES ***************************/

.btn-primary {
    border-color: #e0048b; /* not sure where this is. border is set to 0*/
    color: #fff;
	background-color:rgba(224,4,139,0.62); /* the magenta tinted*/
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 2px rgba(178,61,212,.80);
}
/* fix nav icons to left  on handheld */
.fixed-top {
  
    right: unset;
  
}