@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
/*----------- Angularjs doc's ---------------*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

body {  
background: Azure;
background: AliceBlue;
background: GhostWhite;
background: ivory;
background: snow;
background: floralWhite;
background: WhiteSmoke;
background: radial-gradient(circle, WhiteSmoke, snow);

}


/* Filter options: blur(px), brightness(%),contrast(%),grayscale(%),hue-rotate(deg),
invert(%),saturate(num),sepia(%)*/

table td:nth-child(even) {
  background-color: rgba(51,51,51,1);
  color: WhiteSmoke;
}

footer {
font-size: 0.8em;
text-align: center;  
}
.visitorcounter {
background:;
font-size:110%;
padding: 2px;
color: rgba(220, 20, 60, 1.0);
color: crimson;

}
hr {            /* https://css-tricks.com/examples/hrs/ */
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(220, 20, 60, 0.75), rgba(0,0,0,0));

}

small {
  font-size: 0.7em;
}
section h5 {
 font-family: 'Permanent Marker', cursive;
 font-weight: 100;
}


/* #########  Masonary styling ##########*/
.inner_wrapper {
/* float: left;  
border-left: 1px dotted rgba(190,190,190,1);
width: 100%; */
-moz-column-width: 300px; /* GA MOD NEWSFEED */
-webkit-column-width: 300px; /* GA MOD NEWSFEED */
column-width: 300px;
-moz-column-gap: 1em; /* GA MOD NEWSFEED */
-webkit-column-gap: 1em; /* GA MOD NEWSFEED */
column-gap: 1em;

}

.item {
 display: inline-block;
 width:  100%;   
 border: 0.5pt rgba(230,230,230,1) dotted;
 margin-bottom: 6px;
background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 10px, #abced4 10px, #abced4 11px, transparent 11px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.6em; 
padding: 0.8em;

}

.item:nth-child(2n+4) {
background: #ffff88; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
;
/* Safari */
-webkit-transform: rotate(1.5deg);

/* Firefox */
-moz-transform: rotate(1.5deg);

/* IE */
-ms-transform: rotate(1.5deg);

/* Opera */
-o-transform: rotate(1.5deg);

}
section.item {
  padding: 0 12px 0 12px;
}

/*---------------------------------------------------------------------------------------------------------------------------*/
/*BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB Bootstrap Mods BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB*/
.btn-success_ga {
  color: #ffffff;
  background-color: rgba(220, 20, 60, 1.0);
  border-color: rgba(220, 20, 60, 0.5);
  margin: 1% 0;
}

/*BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB END Bootstrap Mods BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB*/

/*
  We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .repeated-item
  class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
  -webkit-transition:0.7s linear all;
  -moz-transition:0.7s linear all;
  -o-transition:0.7s linear all;
  transition:0.7s linear all;
  opacity:0;
}

/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
  opacity:1;
}

/*
  We're using CSS keyframe animations for when
  the leave event is triggered for the element
  that has the .repeated-item class
*/
.repeated-item.ng-leave {
  -webkit-animation:0.7s my_animation;
  -moz-animation:0.7s my_animation;
  -o-animation:0.7s my_animation;
  animation:0.7s my_animation;
}

@keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-moz-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}





/*MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM Media Queries MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM*/
 @media only screen and (max-device-width:768px){


} /* END Media query*/
 
/*MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM END Media Queries MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM*/

.element {
  position: relative;
  z-index: -10;
  display: inline-block;
 background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(220,20,60,0.9), rgba(0,0,0,0));
  height: 30px;
  width: auto;
  font-size: 18px;
  padding: 1px 24px;
  color: snow;
  margin-right: 5px;
  margin-left: 5px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: 1;
  border-radius: 4px;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* body, html {
  height: 100%;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
} */




/*---------------------------------------------------------------------------------------*/
/* GA Personal Mods */


.border {
  border: 1px solid #555;
}
.border_top {
  border-top: 1px dotted rgba(91,91,91,0.2);  
}
.border_bottom {
  border-bottom: 1px dotted rgba(91,91,91,0.2);  
}
.border_left {
  border-left: 1px dotted rgba(91,91,91,0.2);  
}
.border_right {
  border-right: 1px dotted rgba(91,91,91,0.2);  
}
.date_text {
  font-size: 0.65em;
  float: right;
}

.transparency {
  background:#7f7f7f;
  background:rgba(255,255,255,0.8)
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$*/


.border-temp {
border: dotted 1pt lightGrey;
}
.bg-red {
  background: rgba(131,14,22,1); /* Tina hex codes */
}
.bg-grey {
    background: grey;
}

.bg-green {
    background: #34cb48; /* Tina hex codes */
}

.bg-yellow {
    background: #ffff00; /* Tina hex codes */
}
.bg-black {
    background: black;
}
.bg-blue {
    background: #0000ff; /* Tina hex codes */
}
.bg-pink {
    background: pink;
}
.bg-orange {
    background: orange;
}
.bg-gold {
background-color: #FFEEB5;
/* For WebKit (Safari, Chrome, etc) */
background: #FFEEB5 -webkit-gradient(linear, left top, left bottom, from(#AE8913), to(#FFEEB5)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #FFEEB5 -moz-linear-gradient(top, #AE8913, #FFEEB5) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#AE8913, endColorstr=#FFEEB5) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#AE8913, endColorstr=#AE8913)" no-repeat;
}


/*################### Tinted Backgrounds #######################*/
.color-a {
  background-color: red;
}

.color-b {
  background-color: green;
}

.color-c {
  background-image: repeating-linear-gradient(45deg, yellow, yellow 10px, blue 10px, blue 20px);
}

.tint1 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.1);
}

.tint2 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.2);
}

.tint3 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.3);
}

.tint4 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.4);
}

/*########### MEDIA QUERy ###############*/
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { 

} /* END 320px */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px)and (max-device-width : 480px) {

} /* END Smartphones (portrait and landscape) ----------- */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px)and (max-device-width : 640px) {

} /* END Smartphones (portrait and landscape) ----------- */

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

} /* END   iPhone 4 ----------- */

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {

}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

}
/* ###########################End media queries  #################### */