﻿/* Sticky Ad */ 
.ancrA {
	max-width: 100vw;
	777min-height:70px;
	777max-height:200px;
	7878background: rgba(44,62,80,0.5); background: rgba(44,62,80,0.1);
	/**CREDIT TO: https://csshint.com/css-background-patterns/ **/
  		background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
	position:fixed;
	box-shadow: 0 3px 15px rgba(255,253,252,0.16), 0 3px 15px rgba(255,253,252,0.23);
	11bottom:0;
	11left:0;
	11right:0;
	11padding:5px;
	transition: 0.8s;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:50;
	box-sizing: border-box; /**DO NOT REMOVE**/ 
	clear: both; 
	/**CENTER HORIZONTALLY**/
  		margin: auto;  
  		left:0;
  		right: 0;
  		bottom: 0;
	MARGIN-LEFT: 0PX;
	} 

.ancrC {
	background: rgba(44,62,80,0.5);  background: rgba(44,62,80,0.1); 
  		background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
	width:40px; width: 60px;
	height:30px; height: 60px;
	display:flex;
	box-shadow: 0 0 0 rgba(255,253,252,0.16), 0 0 15px rgba(255,253,252,0.23);
	align-items:center;
	justify-content:center;
	border-radius: 0 12px 0 0;  7878border-radius: 0 12px -24px 12px; border-radius: 50%;
	border-bottom:0;
	border-right:0;
	position:absolute;
	left: 0;
	top:-30px; top: -50px;  
	}

.ancrC:after {
	7878content:'\2715';
	line-height:18px;
	font-size:14px; 
	} 

.ancrCn {
	text-align: center;
	border-top: 1px solid #2C3E50;
	flex-grow:1;
	overflow:hidden;
	display:block;
	position:relative; 
	} 

.ancrI:checked ~ .ancrA {/**RETRACTED**/
	padding:0;
	min-height: 7px;
	} 

.ancrI:checked ~ .ancrA .ancrCn {
	display:none;
	}


/********************************************************************************************************************************/


*,
*::before,
*::after {
  	transition: 400ms all ease-in-out 50ms;
  	box-sizing: border-box;
  	-webkit-backface-visibility: hidden;
          	backface-visibility: hidden;
	}



 

input[type="checkbox"] {
  	display: none;
	}


/*Button is :CHECKED*/

input[type="checkbox"]:checked ~ div {  
	background: rgba(44,62,80,1);
  	box-shadow: 0 0 2px rgba(73,168,68,1);
	}

input[type="checkbox"]:checked ~ div label {
  	7878transform: rotate(360deg); 
	transform: rotate(60deg) !important;
	}



/*'un':checked state*/

.speciality {
  width: 30px !important;
  height: 30px !important; 
  background: rgba(43, 43, 43, 1);
  position: relative;
  top: calc(50vh - 50px);
  left: calc(50vw - 100px);
}

#anchor-ad label {
  	position: absolute;
  	padding-left: 5px;
  	cursor: pointer;
	}

#anchor-ad label::before {
	111font-size: 30px; 
	111color: #FF0000;
  	777content: '⮟'; 
	content: '';
	width: 500px !important; 
	height: 50px !important; 
	background-image: url("../../Picture_Center/navigation-icons/slider-down.png") !important;
	background-repeat: no-repeat;
  	background-position: center;  
	margin-bottom: 27px;
	z-index: 1;
	}

#anchor-ad label::after {
  	content: '';
	}

/* pesduo class on toggle */

#anchor-ad input[type="checkbox"]:checked ~ div label::before{ 
	7878color: #008000;
  	7878content: '⮝'; 
	content: '';
	width: 500px !important; 
	height: 50px !important; 
	background-image: url("../../Picture_Center/navigation-icons/slider-up.png");
	background-repeat: no-repeat;
  	background-position: center;  
	margin-bottom: 27px;  
	}

#anchor-ad input[type="checkbox"]:checked ~ div label::after{
  	77content: '';
	}

#horizontal-ads {
	7878line-height:70px;
	text-align:center; 
	display:inline-block;
	7878max-width: 728px;     
	height: auto; 
	11max-height: 75px; 77max-height: 70px; 77height: 50px !important;
	overflow: hidden; 
	margin: auto; BOTTOM: 0 !IMPORTANT; MARGIN-BOTTOM: 0PX !IMPORTANT; POSITION: ABSOLUTE; 
	/**CENTER DIV HOROZINTALLY**/
  		display: inline-block;    
	}

#widget-HTML-format {
	width: 20px; 
	display: inline;
	}







/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
	.ancrA {
		11width: 90vw;
		max-height: 60px;  
		)

  	.ancrCn {
		7878max-width: 234px; WIDTH: 98VW;
		max-height: 60px;        
  		}

	#horizontal-ads { 
		max-width: 234px !important; 
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
	.ancrA {
		11width: 90vw;
		max-height: 50px;  
		)

  	.ancrCn {
		777max-width: 320px;  WIDTH: 98VW !IMPORTANT;
		max-height: 50px;    
  		}

	#horizontal-ads { 
		max-width: 320px !important; 
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
	.ancrA {
		11width: 100vw;
		max-height: 100px;  
		)

  	.ancrCn {
		777max-width: 320px; WIDTH: 98VW;
		max-height: 100px;   
  		}

	#horizontal-ads { 
		max-width: 320px !important; 
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
	.ancrA { 
		max-height: 60px;  
		)

  	.ancrCn {
		max-width: 468px;
		max-height: 60px;    
  		}

	#horizontal-ads { 
		max-width: 468px !important; 
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
	.ancrA { 
		max-height: 90px; 1111111BORDER: 3PX SOLID YELLOW !IMPORTANT;
		)

  	.ancrCn {
		max-width: 728px; width: 528px !IMPORTANT;
		max-height: 90px;    
  		}

	#horizontal-ads { 
		max-width: 728px !important;  
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	.ancrA { 
		max-height: 90px; 
		)

	.ancrCn {
		max-width: 728px;
		max-height: 90px;   
  		}

	#horizontal-ads { 
		max-width: 728px !important; 
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
	.ancrA { 
		max-height: 90px;  
		)

  	.ancrCn {
		max-width: 728px;
		max-height: 90px;     
  		}

	#horizontal-ads { 
		max-width: 728px !important;  
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
	.ancrA { 
		max-height: 92px;  11width: 728px; 11height: 90px; BORDER: 2PX SOLID GREEN;
		)

  	.ancrCn {
		max-width: 728px;
		max-height: 90px;      
  		}

	#horizontal-ads { 
		max-width: 728px !important;  
		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
	.ancrA { 
		777max-height: 138px; height: 138px; BORDER: 5PX SOLID RED !IMPORTANT; POSITION: ABSOLUTE;
		)

  	.ancrCn {
		max-width: 1120px;
		max-height: 138px;  
		}

	#horizontal-ads { 
		max-width: 1120px !important;  
		}
	}
/*********************************************************************************************************/
