/* #####################
## Shadows
######################## */
 @mixin box-shadow($shadow) { /* Makes using box-shadow for elements much easier */
 	 -webkit-box-shadow: $shadow;
 	 -moz-box-shadow: $shadow;
 	 box-shadow: $shadow;
 }
 $shadow: 2px 2px 6px hotpink; /* Shadow size and color */
 
 
/* ##########################
##### Border radius
############################ */
 @mixin border-radius($border-radius) {
 	 -moz-border-radius: $border-radius;
 	 -webkit-border-radius: $border-radius;
 	 border-radius: $border-radius;
 }
 $border-radius: 5px; /* Border radius variable value */
 
 
 
/* #######################
### CLEAR BOTH
########################## */
@mixin clearBeforeAfter() {
 clear: both;
 display:table;
 content:"";
}
 
/* ##################
### COLUMNS DISPLAY
#####################*/
@mixin columns($columns, $margin) { /* Number of columns, margin between columns */
 	 float: left;
 	 margin-left: 0;
 	 margin-right: $margin;
 	 margin-bottom: $margin / 2;
 	 margin-top: $margin / 2;
 	 $space: $margin * ($columns - 1);
 	 width: calc((100% - #{$space}) / #{$columns});
 	 
 	 &:nth-child(#{$columns}n) { margin-right: 0;}
	 &:nth-child(#{$columns}n+1) { clear: left; }
 }
/* ##################
### NEWS DISPLAY
#####################*/	 
@mixin displayNews($columns, $margin, $fullfirst) { /* Number of columns, margin between columns, fullfirst Yes or No*/
 	 float: left;
 	 margin-left: 0;
 	 margin-right: $margin;
 	 margin-bottom: $margin / 2;
 	 margin-top: $margin / 2;
 	 $space: $margin * ($columns - 1);
 	 width: calc((100% - #{$space}) / #{$columns});
 	 
 	 @if($fullfirst == no) {
 	 	 &:nth-child(#{$columns}n) { margin-right: 0;}
 	 }
 	 @else {
 	 	 &:nth-child(1) { margin: 0; width: 100%; }
 	 	 &:nth-child(#{$columns}n - 1) { margin-right: 0;}
 	 }
 	 	 
 }
 	 
/* ##############################
### 2 COLUMNS WITH DIFFERENT SIZES
#################################*/
@mixin twoColumns($left-column, $right-column, $margin) { /* Width of left column, width of right column, margin between columns */
 	 float: left;
 	 margin-left: 0;
 	 margin-right: $margin;
 	 margin-bottom: $margin / 2;
 	 margin-top: $margin / 2;
 	 width: calc(#{$left-column} - #{$margin});
 	 
 	 &:nth-child(2n + 2) {
 	 	 margin-right: 0;
 	 	 width: $right-column;
 	 	 }
 }
/* #########################
### EVERY OTHER LIST ELEMENT
########################## */
@mixin everyOtherLi($color1, $color2) { /* Outputs every other nth-child with two different backgrounds. */
 &>:nth-child(2n + 2) {
 	 background: $color1;
 }
 &>:nth-child(2n + 1) {
 	 background: $color2;
 }
 
}
/* #############################
#### SET CONTRAST COLOR
###############################*/
@function setContrastColor($color, $text-color) {
 @if(lightness($color) > 60) {
 	 @return darken($text-color, 80%);
 
 }
 
 @else { @return lighten($text-color, 80%); }
}
 
/* ###########################
### CHECK BOX ELEMENT
#############################*/
@function checkIfBox($bg) {
 @if(lightness($bg) > 99) or ($contentbg == $theme-color) {
 	 @return 0px;
 
 }
 @else { @return $btnpadding }
}
 
 
/* ###############################
### FANTASTIC BACKGROUND
################################# */
 
@mixin fantasticBackground() {
 	 position:fixed;
 
 	 top:0;left:0;right:0; bottom:0;
 	 margin:0;
 	 
 	 .featured-image {
 	 	 position:fixed;
 	 	 top:0;left:0;right:0; bottom:0;
 	 	 margin:0;
 	 	 background-size: cover;
 	 	 background-position:50% top;
 	 	 transition:opacity 0.3s;
 	 	 opacity:0.1;
 	 	 background-color: $background;
 	 	 
 	 	 &>img { display: none;}
 	 }
 	 .dynamic-image-is-loaded {
 	 	 opacity: 1;
 	 }
 	 
 }