/*CSS Design Rifat Seferi */
/*TBC =to be complete   */
/*TBA= TO ACTIVETED*/
/*TBD=to be decided*/
/*main-page = All the page body class */
/*main-paragraph = the main paragraph on the page usally the most important*/
/*BOTH(1) lascia 5vw di differenza*/

/*
         _____                    _____                    _____             
         /\    \                  /\    \                  /\    \            
        /::\    \                /::\    \                /::\    \           
       /::::\    \               \:::\    \              /::::\    \          
      /::::::\    \               \:::\    \            /::::::\    \         
     /:::/\:::\    \               \:::\    \          /:::/\:::\    \        
    /:::/__\:::\    \               \:::\    \        /:::/  \:::\    \
   /::::\   \:::\    \              /::::\    \      /:::/    \:::\    \
  /::::::\   \:::\    \    ____    /::::::\    \    /:::/    / \:::\    \
 /:::/\:::\   \:::\____\  /\   \  /:::/\:::\    \  /:::/    /   \:::\____\
/:::/  \:::\   \:::|    |/::\   \/:::/  \:::\____\/:::/    /     \:::|    |
\::/   |::::\  /:::|____|\:::\  /:::/    \::/    /:::/    /      /:::|____|
 \/____|:::::\/:::/    /  \:::\/:::/    / \/____/:::/____/      /:::/    /    
       |:::::::::/    /    \::::::/    /         \::\    \     /:::/    /     
       |::|\::::/    /      \::::/____/           \::\    \   /:::/    /      
       |::| \::/____/        \:::\    \            \::\    \ /:::/    /       
       |::|   |               \:::\    \            \::\    /:::/    /        
       |::|   |                \:::\    \            \::\__/:::/    /         
       \::|   |                 \:::\____\            \:::::::/    /
        \:|   |                  \::/    /             \:::::/    /
         \|___|                   \/____/               \:::/____/












*/
* {
	box-sizing: border-box;
	text-decoration:none;
	cursor:pointer;

	scroll-behavior:smooth;

 	outline: none;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

#home-button {
	display:none; 
}
.home-design {
	width:4vw;
	height:3vw;
	background-color:white;
	display:block; /*So can in the same line with MENU */
	padding:0.1vw;
	float:left;
	transition:all 1s;
	-webkit-transition:all 1s; 
	position:absolute;
  

	}
.home-design div {
	position:relative;
	
	margin-top:0.5vw;
	margin:;
	margin-left:0.9vw;
	
	padding:;
	background-color:black;
	width:2vw;
	height:0.25vw;
} 


.home-design:active {
		/*--Animation --*/
    position:relative;
    -webkit-animation: homeButton 10s cubic-bezier(.02,1.19,.86,-0.37) infinite; /* Safari 4.0 - 8.0 */
    animation: homeButton 10s cubic-bezier(.02,1.19,.86,-0.37) infinite;
    box-shadow:solid tomato 20vw;

background: radial-gradient(circle, green,transparent, black); /* Standard syntax (must be last) */
}
   
	
  



body>div {
	margin-left:5vw; 

}
body>section {
	margin-left:1vw; 

}

/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes homeButton {
    
   
    from {border:rgba(0,255,0,.4);}
    to {border:rgba(0,255,0,.4);}
	}

@keyframes homeButton {
     
    from {transform: rotate(0deg);}
    to {transform: rotate(1200deg);} /*CTRL the velocity*/
   
    /*CTRL the velocity*/




    from{background: radial-gradient(circle,green,transparent, black);}
    to{background: radial-gradient(circle, green,transparent, black);}
    from {border-left:solid 0.25vw rgba(0,180, .8);}

    to {border-left:solid 0.25vw rgba(0, 100, 0,.4);}
    from {border-top:solid 0.25vw rgba(0,180,0,.5);}
  	to {border-top:solid 0.25vw rgba(0,100,0,.6);}
    from {border-right:solid 0.25vw rgba(0,180, 0,.8);}
    to {border-right:solid 0.25vw rgba(0,100,0,.6);}
  	from {border-bottom:solid 0.25vw rgba(0,180,0,.4) ;}
 	to {border-bottom:solid 0.25vw rgba(0,100, 0,.5) ;}
  
  
}
		
.home-design:hover {


    background: radial-gradient(circle,white,white, black);
}	




.home-design div:hover,.home-design div:active {

} 














#HOME {
	/*float:right;
	display:block;
	position:fixed;
	background-color:red;
	background-image: url("../img/BackgrundPaternInverted.png");
	background-size:10vw;
	border-radius:50%;
	background-repeat: no-repeat;------------------TIP logo*/

	float:right;
	display:block;
	position:relative;
	background-color:red;
	overflow:hidden;

}

#HOME:hover {


}
#enrollNow {
	float:right;
	position:fixed;
	margin-top:40vw;
	margin-left:85vw; 
	background-color:;
	width:5vw;
	color:white;
	border-radius:50%;
	font-size:1vw;
	height:5vw;
	text-align:center;
	padding-top:3vw;
	background-image:url("../img/chef-academy-logo.png");
	background-position:top;
	background-size:2vw;
	background-repeat:no-repeat;
	text-decoration:none;
	border:solid .1vw transparent;
	opacity:0.5; 
	transition:all .5s;
	-webkit-transition:all .5s; 


}
#enrollNow:hover {
	background-position:center;
	background-color:red;
	border:solid .1vw transparent;
	background-size:6vw;
	color:transparent;
	opacity:1;




}

#enrollNow:active {
	border:solid .1vw red;
	opacity:.6;
	transition:all .4s;
	-webkit-transition:all .4s;
	
}


header {
}
header:hover {
 
	
}

h1 {
	text-align:center;/*il colore lo prende da la classe div>h1 sotto */
	color:white;
	margin:1vw;
	font-family: 'Alex Brush', cursive;
	font-weight:lighter;
}

/*-----------------Input the symbol asterix(*) ------------------------*/
#asterix {
	color: red;
}
/*-----------------Input the symbol asterix(*) x ----------------------*/
.main-page {
	margin:0vw;
	color: white;
	background-image: url("../img/BackgrundPaternInverted.png");
	background-size:0.6vw;
	opacity: 1;
	font-size:1.75vw;
	font-family:"Courier New", Courier, monospace;

	transition:all 0.1s;
	-webkit-transition:all 0.1s; 
	/*display:inline;/*will put the Navigator to all the width;*/
}
/*.main-page:active {
	color: DodgerBlue;
	background-image:none;
	background-color:black;
	transition:all 0.4s;
	-webkit-transition:all 0.4s; 

}*/
/*-------------------------FLASH click setup--------------------*/


/*
.main-page:active {
	color: DodgerBlue;
	background-image:none;
	background-color:black;
	
	
}
*/
.main-page>section,.main-page>div, .main-page p, .main-page form,.main-page input {
 font-family: 'Sofia', cursive;
}
.main-page-2 {
	margin-left:10vw;
	
	background-size:0.6vw;
	opacity: 1;
	font-size:1.75vw;
	font-family:"Courier New", Courier, monospace;

	transition:all 0.1s;
	-webkit-transition:all 0.1s; 
	/*display:inline;/*will put the Navigator to all the width;*/
}
#logo {
	position:fixed;
	padding:1vw;
	background-image:url("../img/chef-academy-logo.png");
	background-repeat:no-repeat; 
	background-size:2.3vw;
	color:transparent;/*Prava a settare un imagine con link*/
	
}
#logo:hover {
	padding-top:0vw;


	}


/*---------------------MENU NAVIGATOR -TRANSparent Part--------------------------------------*/
#navigator{
	/*---------MOBILE--------------margin-top:8vw;*/
	display:block;
	position:sticky;
	height:2vw;
	background-image:url("../img/advanced-professional-chef.jpg");
	background-size:100vw;
	background-repeat: no-repeat;
	overflow:hidden;

	transition:all .8s;

	-webkit-transition:all .8s;
	-webkit-animation:sliderBar 30s linear both infinite ; /* Safari 4.0 - 8.0 */
    animation-fill-mode: sliderBar 10s linear both infinite;

}
#navigator:hover {
	height:30vw;/*TBD */
	background-size:100vw;
	background-repeat: no-repeat;
	overflow:hidden;
	position:relative;
	
	

}




/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

			/* Safari 4.0 - 8.0 */
			@-webkit-keyframes mypersonal {
			 
			  

			}

			@keyframes sliderBar {
				
				0% {background-image:url("../img/advanced-professional-chef.jpg");}
			   	20% {background-image:url("../img/Slider1.jpg");}
   				45% {background-image:url("../img/Slider3.jpg");}
   				65% {background-image:url("../img/Slider4.jpg");}
   				85% {background-image:url("../img/Slider5.jpg");}
   				100% {background-image:url("../img/Slider7.jpg");}
   				
     /*CTRL the velocity*/
			

   		    /*-----------TBA--------*/ 
			   }


















/*---------------------Contener NAVIGATOR BLACK-LINE-------------------*/

.contaner-nav {
	background-image:url();
	background-repeat:no-repeat;
	background-size:2.5vw;/*Misura di dipendenza logo */
	opacity:0.8;
	font-weight: bold;

	height:2vw;
	width:100vw;
	display:block;
	position:fixed;

	padding-top:0vw;
	margin-bottom:1vw;/*Diventa visibile il titolo senza perdita*/
	background-color:#1d1d1b;/*Sfortunatamente il logo non è black*/
	overflow:hidden;
	text-decoration:none;
	text-align: center;



	transition:all .4s;
	-webkit-transition:all .4s; 

}

.contaner-nav:hover,.contaner-nav:active {
/*	padding-top:10vw;

	position:fixed;
	display:block;
	height:20vw;/*height of the black line menu
	font-size:0vw;

* ----MOBILE-----*/
	opacity:1;
}




/*---------------------Contener of buttons------------------*/
.navbar-header {
	margin-top:3vw;
	background-color:;
	display:inline;/*change of menu in inline or block--------TBD*/

}

.navbar-header:hover {
}
/*---------------------Navigator <a as buttons>------------------*/
/*---------------------Ottimizzato fino a 4 pulsanti non di più------------------*/

.navbar-header a {
	box-shadow:none;
	background-color:;
	display:inline;
	position:sticky;/*it works without opacity otherwise if any problem set opacity on */
	margin:2vw;
	font-size:1vw;/*is cancel from .contaner-nav:hover, */
	padding-left:2vw;
	box-shadow:0;
	border:;
	padding-right:2vw;
	opacity:0.5;
	color:white;
    transition: all .4s;
	-webkit-transition: all .4s;


}


.navbar-header a:hover{
	font-size:1vw;
	opacity:1;
	
	color:white;

    position: relative;
  
   	position:sticky;
   

}
.navbar-header a:active {
	
	-webkit-animation: navigatoButton .1s cubic-bezier(.02,1.19,.86,-0.37) 1; /* Safari 4.0 - 8.0 */
    animation: navigatoButton 1s cubic-bezier(.02,1.19,.86,-0.37) 2;
}



/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

			/* Safari 4.0 - 8.0 */
			@-webkit-keyframes navigatoButton {
				
				from {	font-size:1vw;}
			   	 to {	font-size:1.1vw;}
    			
     /*CTRL the velocity*/
			

   		    /*-----------TBA--------*/ 
			   }
			@keyframes navigatoButton {
				
				from {	font-size:1vw;}
			   	 to {	font-size:1.1vw;}
    			
     /*CTRL the velocity*/
			

   		    /*-----------TBA--------*/ 
			   }
	
	






.main-paragraph:hover {

	}


/*------------Contener dentro ai section------------------------ */
.contaner-level-zero { 

background-color:;
height:4vw;
margin:3vw;
padding:0vw;
position:;
overflow:hidden;
width:55vw;
	transition: all .4s, width 1s;
	-webkit-transition: all .4s, width 1s;
	
}

.contaner-level-zero:hover {
	width:70vw;

	background-color:;
	margin-top:5vw;
	margin-bottom:1vw;
	height:20vw;
	font-size:1.15em;
	box-shadow:0.1vw 0.3vw 2vw .1vw #888;/*h-offset v-offset blur spread*/



}
.contaner-level-zero:active,.contaner-level-zero:focus {
	
}



.contaner-list {
	

   }









/*-----------------Personal data  ------------------------------*/

.list-Personal-info {
	
	 
}




.list-Personal-info:hover {
	


	
	 
}

.list-Personal-info>li {




}
	

.list-Personal-info>li:hover {

}







/*---------Info aggiunte dal Admin---------------*/
.personl-info { 
	
	text-shadow: .1vw .1vw .1vw  .1vw rgba(150, 150, 150,0.1);
	color:tomato;
	

	text-decoration:none;

	
		/*--Animation --*/

    position:inherit;/*cosi si apre il menu a tendina con il planeta */
    -webkit-animation: mypersonal 1s cubic-bezier(.02,1.19,.86,-0.37); /* Safari 4.0 - 8.0 */
    animation: mypersonal 1s cubic-bezier(..02,1.19,.86,-0.37);

}



/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

			/* Safari 4.0 - 8.0 */
			@-webkit-keyframes mypersonal {
			    from {left: 1500px;}
			    from {opacity:0;}
			     to {opacity: 1;}
			    from {opacity:0.3;}
			   	 to {opacity:0;}
			    to {left: 0px;}
			   
			  

			}

			@keyframes mypersonal {
				from {left: 150vw;}
				from {opacity:0;}
				 to {opacity: 1;}
				from {opacity:0.3;}

 				to {opacity:0;}
			    to {left: 0vw;}
			    /*-----------TBA--------*/ 
			   }


/*-----------------Personal data X ------------------------------*/




/*-----------------PersonalBLOG ------------------------------*/

/*------------------Atention ----------------------------------*/
/*------------add div ,pading , margin so will not vibrate during limit-hover*/



#blog-part1-firstPage {
	width:100vw;
	background-color:/*tomato;/* Cosi evidenzi ogni volta */ 
	padding:2vw;

	margin-bottom:10vw; 
	margin-top:10vw;
	height:45vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/

	overflow:hidden;
	transition: all .1s;
	-webkit-transition: all .1s;




	


}
#blog-part1-firstPage:hover {
	background-color:;
	width:100vw;
	padding-left:7vw; 
}


#blog-part1-firstPage p {
	background-color:/*green;/* Cosi evidenzi ogni volta */ 
	height:40vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/
	position:inherit;
	width:50vw;
	margin:2vw;
	padding:5vw;
	opacity:1;/*Opacity is changing the behavior during SCROOLLL"*/
	color:;
	transition: all .1s;
	-webkit-transition: all .1s;
	overflow:hidden;
}
#blog-part1-firstPage p:hover {
	opacity:1;
	width:85vw;
	margin:2vw;
	font-size:2.5vw;
	transition: all .1s;
	-webkit-transition: all .1s;


}
#blog-part1-firstPage p>text {
 background-color:/*cyan;* Cosi evidenzi ogni volta */ 
 padding:.5vw;
 margin:.1vw;
	
}




















#blog-part1-firstPage p>text:hover {
	padding-left:2vw;
	padding-right:2vw;
	margin-left:0vw;
	margin-right:0vw;
	font-size:3vw;
	position:absolute;
	display:inline;
	color:tomato;
	opacity:1;
	font-weight:bold;
	transition: all .4s;
	-webkit-transition: all .4s;
	background-color:black;
	

	
}

#blog-part1-firstPage:active {

  }

 #blog-part2-firstPage {
	width:100vw;
	background-color:/*DodgerBlue;/* Cosi evidenzi ogni volta */ 
	padding:2vw;

	margin-bottom:10vw; 
	margin-top:10vw;
	height:30vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/

	transition: all .1s;
	-webkit-transition: all .1s;


	


}
#blog-part2-firstPage:hover {
	background-color:;
	width:100vw;
	padding-left:7vw; 
}


#blog-part2-firstPage p {
	background-color:/*green;/* Cosi evidenzi ogni volta */ 
	height:25vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/
	position:inherit;
	width:50vw;
	margin:2vw;
	padding:5vw;
	opacity:1;/*Opacity is changing the behavior during SCROOLLL"*/
	color:;
	transition: all .1s;
	-webkit-transition: all .1s;
	overflow:hidden;
}
#blog-part2-firstPage p:hover {
	opacity:1;
	width:85vw;
	margin:2vw;
	font-size:2.5vw;
	transition: all .1s;
	-webkit-transition: all .1s;


}
#blog-part2-firstPage p>text {
 background-color:/*cyan;* Cosi evidenzi ogni volta */ 
 padding:.5vw;
 margin:.1vw;
	
}




#blog-part2-firstPage p>text:hover {
	padding-left:2vw;
	padding-right:2vw;
	margin-left:0vw;
	margin-right:0vw;
	font-size:3vw;
	position:absolute;
	display:inline;
	color:tomato;
	opacity:1;
	font-weight:bold;
	transition: all .4s;
	-webkit-transition: all .4s;
	background-color:black;
	

	
}

#blog-part2-firstPage:active {

  }


#AboutUs {
	width:100vw;
	background-color:;/*DodgerBlue;/* Cosi evidenzi ogni volta */ 
	padding:2vw;

	margin-bottom:10vw; 
	margin-top:10vw;
	height:200vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/

	transition: all .1s;
	-webkit-transition: all .1s;


	
}
#AboutUs:hover {
	background-color:;
	width:100vw;
	padding-left:7vw; 


}

#AboutUs::after { 

    content: " ... see more";
}

#AboutUs:hover::after{ 
    content: none;
}


#AboutUs p {
	background-color:;/*green;/* Cosi evidenzi ogni volta */ 
	height:150vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/
	position:inherit;
	width:50vw;
	margin:2vw;
	padding:5vw;
	opacity:1;/*Opacity is changing the behavior during SCROOLLL"*/
	color:;
	transition: all .1s;
	-webkit-transition: all .1s;
}
#AboutUs p:hover {
	height:150vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/

	opacity:1;
	width:85vw;
	margin:2vw;
	font-size:2.5vw;
	transition: all .1s;
	-webkit-transition: all .1s;

}
.section3-AboutUs {
	height:20vw;/*BOTH(1) pagina non vibra da cambiare a seconda del la lunghezza testo*/
	background-color:;/*grey;*/
	overflow:hidden;

	transition: all .4s;
	-webkit-transition: all .4s;
}
.section3-AboutUs:hover,.section3-AboutUs:active {
	height:170vw;

}


#sectionCourses {
background-color:;
overflow:hidden;
}


#sectionCourses:hover,#sectionCourses:active {
background-color:;
transition: all .4s;
	-webkit-transition: all .4s;
}






/*-----------------Input data for <form> ------------------------*/
input { 
	background-color:transparent; 
	color: white;

	border:solid .1vw transparent; /*cosi la pagina non vibra in hover*/
	text-align: center;
	text-decoration: none;
	box-shadow:inset .2vw .2vw .2vw .2vw #888; 
	display: block;
	font-size:0.9em;
	height:3vw;
	width:25vw;
	transition:all 0.4s;
	-webkit-transition:all 0.4s; /* Safari */

}

input:hover { 

	color: tomato;
	border:solid .1vw transparent; /*cosi la pagina non vibra in hover*/
	border-radius :1.5vw;		
	-webkit-box-shadow: inset 0.1vw 0.1vw 0.1vw 0.1vw #888; 
	
	box-shadow: inset 0.1vw 0.1vw 0.1vw 0.1vw #888; 
	cursor: pointer;
	transition:all 0.4s;
	-webkit-transition:all 0.4s; /* Safari */

}
input:focus,input:active,input:checked,input:target{

	
	text-decoration:none;
	cursor:none;
	font-size:110%;
	background-color:black;
	color:tomato;/*green for text like unix terminal */
	box-shadow:none;
	border:solid black 0.2vw;
	border-radius:0vw; /*to cancel the radius */
	
	

	transition:background-color 2s,box-shadow inset 2s,all 0.4s;
	-webkit-transition:background-color 2s,box-shadow inset 2s,all 0.4s; /* Safari */
	
 /* caret-color: transparent; cursore trasparent*/

}




/*--------Input the symbol @ to be align on left  ----------*/

#et-symbol { 
	text-align:center; 

}
/*--------Input the symbol @ to be align on left X ----------*/


/*--------Input:Radio; to be delete the style on input -------------*/
.radio-unstyle {
	width:1vw;
    color: tomato;
	border-style:thin;
	border-radius:none;
	background-image:none;
	box-shadow: none;
	display: inline;

}

.label-hover:hover {
    color: red;
    transition:all 0.4s;
	-webkit-transition:all 0.4s; /* Safari */
	
}
	




/*--------Input:Radio; to be delete the style on input X-------------*/
/*--------Input:Textarea; trasparent-mode   ----------*/





textarea {



	width:35vw;
	height:15vw;
	font-family: 'Alex Brush', cursive;
;/*TBC*/
	min-height: 15vw;
	min-width: 35vw; 
	font-size:0.9em;/*TBC*/
	border:none;
	background-color:transparent; 
	color:white;
	box-shadow:inset.1vw .1vw .1vw 0vw #888; 
	display: block;
	overflow:hidden;/*Non visibile l'ascensore laterale*/
	position:relative;
	;/*Non trovando il default value per qui funzina lo scroll ho barato con */
	/*--transions back from focus --*/
	transition:all 0.4s,background-color 2s;
	-webkit-transition:all 0.4s,background-color 2s; /* Safari */
	
	/*--Animation --*/

    position: relative;
    -webkit-animation: mytextarea 0.6s cubic-bezier(0, 0, 1,1.87) ; /* Safari 4.0 - 8.0 */
    animation: mytextarea 0.6s cubic-bezier(0, 0, 1,1.87) ;




}



/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mytextarea {
    from {bottom: 200px;}
    from {opacity:0;}

    to {bottom: 0px;}
    to {opacity: 1;}

}

@keyframes mytextarea {
from {bottom: 20vw;}
from {opacity:0;}

    to {bottom: 0vw;}
    to {opacity: 1;} /*-----------TBA--------*/ 
   }



/*--Animation Funciton &-Effected special X------*/






textarea:hover {
 
	color: tomato;
	border-radius :1.5vw;
	transition:border-radius 0.4s,height 0.4s,width 0.4s ,font-size 0.4s;
	-webkit-transition:border-radius 0.4s,height 0.4s,width 0.4s ,font-size 0.4s; /* Safari */
	text-decoration: none;
	box-shadow:0vw 0vw 0.1vw 0vw #888;
	border:solid .1vw transparent;



}
/*--------Input:Textarea; trasparent-mode-X----------*/

/*--------Input:Textarea; terminal style   ----------*/

textarea:focus,textarea:active {
	height: 30vw;
	width: 50vw;
	font-size: 1.3em;
	
	color:red;
	font-family:;
	font-style:;
	text-shadow:.1vw 0vw .1vw  #330000;
	cursor:none;/*--pointer mouse non visible--*/
	border-radius:0vw;
	border-color: black;
	box-shadow:0.1vw 0.3vw 2vw .1vw #888;/*h-offset v-offset blur spread*/
	border:none;



	transition:all 0.4s,background-color 2s;
	-webkit-transition:all 0.4s,background-color 2s; /* Safari */


}

#textarea-welcome {
	visibility:hidden;
}

#textarea-welcome:focus {

	visibility:visible;
}

/*--------Input:Textarea; terminal style X----------*/



.inputbox {

}
/*--------Input:Choose-File-Button; to be align on left  ----------*/
#Choose-File-Button{
	border:1px solid black; /*Doesn't vibrate  on hover  if is solid----------*/
    width: 25vw;
	height:3vw;
	font-size:2vw;
	border-radius:none;
	background-image:none;
	text-overflow:;
	display:block;

	/*--transions back from focus --*/
	
	transition:border 0.4s,background 0.4s;
	-webkit-transition:border 0.4s,background 0.4s; /* Safari */

}
#Choose-File-Button:hover,#Choose-File-Button:active,#Choose-File-Button:visited #Choose-File-Button:focus {
	
	border:1px solid black;
	border-radius:none;
	background-color:black;
	border-radius:0px;
	box-shadow: none;
	transition:border 0.4s,background 0.4s,all 0.4s;
	-webkit-transition:border 0.4s,background 0.4s,all 0.4s; /* Safari */

	


}
/*--------Input:Choose-File-Button; to be align on left x ----------*/




/*--------: <a that are as button;----------*/

.link-to-button ,.link-to-button:visited {
	text-decoration:none;
	border:solid .1vw rgba(0,0,0,0.5); /*without 1 px border will move the elements down*/ 
	border-radius:1.5vw;
	text-align: center;
	color:white;
	background-color:transparent;
	display:block;
	width:25vw;
	box-shadow:inset .2vw .2vw .2vw .2vw #888;
	margin-left:30vw;
	margin-bottom: 1vw;



	transition: all 0.4s;
	-webkit-transition: all 0.4s;

   }



.link-to-button:hover{
	color: tomato;
	text-decoration:none;
	background-color:black;
	box-shadow:inset .1vw .1vw .1vw 0vw;
	
	
	transition:background-color 0.4s,color 0.4s,font-size 0.4s,box-shadow 0.4s;
	-webkit-transition:background-color 0.4s,color 0.4s,font-size 0.4s,box-shadow 0.4s; /* Safari */
	
}
.link-to-button:focus , .link-to-button:active  {
	text-decoration:none;
	-moz-text-decoration:none;
	
	text-align:center;
	color:white;
	background-color:red;
	display:block;
	
	
	
	-moz-border:solid .3vw black;
	
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	transition: all 0.4s ,opacity 0.1s;
	-webkit-transition: all 0.4s ,opacity 0.1s;
	
}



/*--------<a that are as button; x----------*/

/*--------<input button-send-request --------*/

/*#button-send-request:focus {
	text-decoration:none;
	
	text-align: center;
	color:white;
	background-color:DodgerBlue;
	text-decoration:none;
	border-style:inset;
	border-width:1px;
	border-radius:15px;
	border:solid 1px black;
	box-shadow:none;

}*/


.link-to-button-as-input {
	background-color:transparent; 
	color: white;
	padding-top:0.4vw;
	border:solid 0.1vw transparent; /*cosi la pagina non vibra in hover*/
	text-align: center;
	text-decoration: none;
	box-shadow:inset 0.15vw 0.15vw 0.15vw 0.15vw #888; 
	display:block;
	height:3vw;
	width:25vw;
	margin-bottom: 1vw;
	
	transition: all 0.4s,font-size 0.2s,padding 0.1s ;
	-webkit-transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */

	
}



.link-to-button-as-input:hover { 

	color:tomato;
	border:solid 0.1vw transparent; /*cosi la pagina non vibra in hover*/
	border-radius :1.5vw;		
	box-shadow: inset 0.1vw 0.1vw 0.1vw 0.1vw #888; 


	 transition: all 0.4s,color 1s  ;
	 -webkit-transition: all 0.4s,color 1s;
	
		/*--Animation --*/

    position: relative;
    -webkit-animation: mylinkTObutton 10s cubic-bezier(.04,1.57,0,.99) infinite; /* Safari 4.0 - 8.0 */
    animation: mylinkTObutton 10s cubic-bezier(.04,1.57,0,.99) infinite;

   
  


}



/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mylinkTObutton {
    
   
    from {color:grey;}
    from {font-size:2vw;}
	 
 	to {font-size:3vw;}
	
    
    to {color:white;}
}

@keyframes mylinkTObutton {

 
    

/*--Animation Funciton &-Effected special X------*/


		}

.link-to-button-as-input:active {
	
	box-decoration-break:transparent;

	font-size:2.5vw;
	background-color:transparent;
	color:#fff;

	border:solid 0.1vw black;
	border-radius:2vw; /*to cancel the radius */
	padding-top:0.1vw;
	
	box-shadow:0.1vw 0.1vw 0vw .1vw #888;/*h-offset v-offset blur spread*/

	transition: all 0.4s,font-size 0.2s,padding 0.1s ;
	-webkit-transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */
/*-----STOP the animation----*/
	-webkit-animation:mylinkTObutton 0s; /* Safari 4.0 - 8.0 */
    animation: mylinkTObutton 0s ;
 	
}



/*--------<input button--send-request X--------*/


























a, a:visited,a:link,a:active ,a:focus,a div>p,a p,a div>p:visited,a p:visited{

	text-decoration:none;
}

a:hover  {
	text-decoration:none;
}


/*any theader /title inside a div*/
div>h1,h2,h3,h4{
	color:white;
	font-size:5vw ; /* responsive size unit  viewport  1 vw =1 % */
	font-weight:lighter;
}

.div-circle-Level3 {
	margin:10vw;
	width:20vw;
	height:20vw;


	border-radius:50%;
	 
	-webkit-box-shadow: 2px 2px 30px 13px rgba(224,50,7,0.31);
	-moz-box-shadow: 2px 2.5px 30px 13px rgba(224,50,7,0.31);
	box-shadow: 0.1vw 0.1vw 3vw 1.3vw rgba(224,50,7,0.31);




	margin-left:;
	border-bottom:solid 0.25vw transparent;
	border-left:solid 0.25vw green;
	border-right:solid 0.25vw transparent;

	border-top:solid 0.25vw transparent;


	/*--Animation --*/

    position: relative;
    -webkit-animation: myTimer 50s linear infinite; /* Safari 4.0 - 8.0 */
    animation: myTimer 50s linear infinite;


	background: radial-gradient(circle, green,transparent, black); /* Standard syntax (must be last) */

    transition: all 2s;
	-webkit-transition: all 2s;
}
   
	
  






/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myTimer {
    
   
    from {border:rgba(0,255,0,.4);}
    to {border:rgba(0,255,0,.4);}
   
}

@keyframes myTimer {
    
 	
    from {transform: rotate(0deg);}
    to {transform: rotate(7200deg);} /*CTRL the velocity*/




    from {border-left:solid 0.25vw rgba(0,180, .8);}
    from{background: radial-gradient(circle, green,transparent, black);}
    to{background: radial-gradient(circle, DodgerBlue,transparent, black);}

    to {border-left:solid 0.25vw rgba(0, 100, 0,.4);}
    from {border-top:solid 0.25vw rgba(0,180,0,.5);}
  	to {border-top:solid 0.25vw rgba(0,100,0,.6);}
    from {border-right:solid 0.25vw rgba(0,180, 0,.8);}
    to {border-right:solid 0.25vw rgba(0,100,0,.6);}
  	from {border-bottom:solid 0.25vw rgba(0,180,0,.4) ;}
 	to {border-bottom:solid 0.25vw rgba(0,100, 0,.5) ;}
  
  
}








.div-circle-Level2 {
	margin:2.5vw;
	width:5vw;
	height:5vw;
	border-radius:50%;
	background: radial-gradient(circle,DodgerBlue,transparent, DodgerBlue); /* Standard syntax (must be last) */
	position: relative;


	/*--Animation --*/

    position: relative;
    -webkit-animation: DodgerBluestar 4s linear infinite; /* Safari 4.0 - 8.0 */
    animation: DodgerBluestar 4s linear infinite;

    
}
   
	
  






/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes DodgerBluestar {
    
   
    from {border:rgba(0,255,0,.4);}
    to {border:rgba(0,255,0,.4);}
   
}

@keyframes DodgerBluestar {
    
 	
    from {transform: rotate(0deg);}
    to {transform: rotate(-1200deg);} /*CTRL the velocity*/




	
	from{width:20vw;}
	to	{width:2vw;}
	from{height:20vw;}
	to	{height:0vw;}


	from{opacity:0;}
	to{opacity:1;}




    from {border-left:solid 0.25vw rgba(180,0, .8);}
    to {border-left:solid 0.25vw rgba(100,0, 0,.4);}
    from {border-top:solid 0.25vw rgba(180,0,0,.5);}
  	to {border-top:solid 0.25vw rgba(100,0,0,.6);}
    from {border-right:solid 0.25vw rgba(180,0, 0,.8);}
    to {border-right:solid 0.25vw rgba(100,0,0,.6);}
  	from {border-bottom:solid 0.25vw rgba(180,0,0,.4) ;}
 	to {border-bottom:solid 0.25vw rgba(100,0,0,.5) ;}
    
   
   
}









.div-circle-Level3:hover {

	width:2vw;

	margin-left:18vw;
	border-radius:50%;
	border-bottom:solid 5vw green;
	border-left:solid 0.5vw transparent;
	border-right:solid 5vw green;

	border-top:solid 0.5vw green;
	opacity:0;


	position: relative;
	-webkit-animation: myLII .1s linear infinite; /* Safari 4.0 - 8.0 */
    animation: myLII .1s linear infinite;
	transition: all 5s,font-size 0.2s,padding 0.1s ;
	-webkit-transition: all 4s,font-size 0.2s,padding 0.1s ;/* Safari */
	

}
/*--Animation Funciton &-Effected special X------*/
@-webkit-keyframes myTimer {
    
   
    from {border:rgba(0,255,0,.4);}
    to {border:rgba(0,255,0,.4);}
   
}

@keyframes myLII {



    from {transform: rotate(0deg);}
    to {transform: rotate(7200deg);} /*CTRL the velocity*/


    from{background: radial-gradient(circle,white,transparent, black);}
    to{background: radial-gradient(circle, white,rgba(5, 5, 5,.6), transparent);}

    from {border-left:solid 0.4vw rgba(255, 255, 255,1);}
    to {border-left:solid 0.4vw rgba(255, 255, 255,.4);}
    from {border-top:solid 0.4vw rgba(255, 255, 255,.5);}
  	to {border-top:solid 0.4vw rgba(255, 255, 255,.2);}
    from {border-right:solid 0.4vw rgba(255, 255, 255,.4);}
    to {border-right:solid 0.4vw rgba(255, 255, 255,.1);}
  	from {border-bottom:solid 0.4vw rgba(255, 255, 255,.4) ;}
 	to {border-bottom:solid 0.4vw rgba(255, 255, 255,.5) ;}
    
	
 
   
 
	
}




.div-circle-Level3:focus,.div-circle-Level3:active {

	animation: myLII .1s linear infinite;
	
	}

.div-circle-Level2:hover {
	border-right:solid 0vw rgba(255, 255, 255,1);
	border-bottom: solid 0vw rgba(0255, 255, 255,1);
	border-left: solid 0vw rgba(255, 255, 255,.9);
	border-top:solid 1vw rgba(255, 255, 255,.3);

	transition: all 2s  ;
	-webkit-transition: all 2s  ;/* Safari */

}

/*---------------------Second circle2----------------*/



.div-circle2-Level3 {
	width:0vw;
	height:0vw;
	border-radius:50%;
	overflow:hidden;
    background: DodgerBlue; /* For browsers that do not support gradients */
    background: radial-gradient(circle, cyan,black,cyan); /* Standard syntax (must be last) */





	border-bottom:solid 0.25vw transparent;
	border-left:solid 0.25vw cyan;
	border-right:solid 0.25vw transparent;

	border-top:solid 0.25vw transparent;

	transition: all 10s;
	-webkit-transition: all 10s;
	/*--Animation --*/

    position: relative;
    -webkit-animation: greenstar 4s linear infinite; /* Safari 4.0 - 8.0 */
    animation: greenstar 4s linear infinite;

    
}
   
	
  






/*--Animation Funciton &-Effected special--------*/

	/*--Animation Funciton  --*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes greenstar {
    
   
    from {border:rgba(0,255,0,.4);}
    to {border:rgba(0,255,0,.4);}
   
}

@keyframes greenstar {
    
 	
    from {transform: rotate(0deg);}
    to {transform: rotate(-1200deg);} /*CTRL the velocity*/




	
	from{width:20vw;}
	to	{width:1vw;}
	from{height:20vw;}
	to	{height:3vw;}
	from{opacity:0;}
	to{opacity:1;}





    from {border-left:solid 0.25vw rgba(0,180, .8);}
    to {border-left:solid 0.25vw rgba(0, 100, 0,.4);}
    from {border-top:solid 0.25vw rgba(0,180,0,.5);}
  	to {border-top:solid 0.25vw rgba(0,100,0,.6);}
    from {border-right:solid 0.25vw rgba(0,180, 0,.8);}
    to {border-right:solid 0.25vw rgba(0,100,0,.6);}
  	from {border-bottom:solid 0.25vw rgba(0,180,0,.4) ;}
 	to {border-bottom:solid 0.25vw rgba(0,100, 0,.5) ;}
    
   
   
}



























.div-circle2-Level2 {
	margin:0.25vw;
	width:0vw;
	height:0vw;
	border-radius:50%;
	background-color:transparent;
	position: relative;
	border:solid 0.25vw cyan;



}

.div-circle2-Level3:hover {
	border-bottom:solid 0.5vw green;
	border-left:solid 0.5vw transparent;
	border-right:solid 0.5vw green;

	border-top:solid 0.5vw green;

	transition: all 0.4s,font-size 0.2s,padding 0.1s ;
	-webkit-transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */
	

	position: relative;
	-webkit-animation: myLIISecond .1s linear infinite; /* Safari 4.0 - 8.0 */
    animation: myLIISecond .1s linear infinite;
	

}
/*--Animation Funciton &-Effected special X------*/
@-webkit-keyframes myTimer {
    
   
    from {border:rgba(0,255,0,.4);}
    to {border:rgba(0,255,0,.4);}
   
}

@keyframes myLIISecond {



    from {transform: rotate(0deg);}
    to {transform: rotate(7200deg);} /*CTRL the velocity*/

    
    from {border-left:solid 0.5vw rgba(255, 115, 137,1);}
    to {border-left:solid 0.5vw rgba(255, 115, 137,.4);}
    from {border-top:solid 0.5vw rgba(255, 115, 137,.5);}
  	to {border-top:solid 0.5vw rgba(255, 115, 137,.2);}
    from {border-right:solid 0.5vw rgba(255, 115, 137,.4);}
    to {border-right:solid 0.5vw rgba(255, 115, 137,.1);}
  	from {border-bottom:solid 0.5vw rgba(255, 115, 137,.4) ;}
 	to {border-bottom:solid 0.5vw rgba(255, 115, 137,.5) ;}
    
   
 
	
}




.div-circle2-Level3:focus,.div-circle2-Level3:active {


}

.div-circle2-Level2:hover {
	border-bottom:solid 0.5vw transparent;
	border-left:solid 0.5vw transparent;
	border-right:solid 0.5vw transparent;

	border-top:solid 0.5vw DodgerBlue;

	transition: all 0.4s,font-size 0.2s,padding 0.1s ;
	-webkit-transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */

}





.div-footer {

	margin-top:50vw;
	background-color:black;
	display:block;
	text-align:center;


	}

.div-footer a {
	text-decoration:none; 
	color:white;
		transition: all 4s;/* Safari */

	}

.div-footer a:hover,.div-footer a:focus {
	color:red;
	font-size:2vw;
	
}

.div-footer:hover {
height:10vw;
padding-bottom:4vw; 
position:sticky;
}












.paragraph-word-count {
	transition: all 4s;

}

.paragraph-word-count:hover {
	border:solid .1vw tomato;
	padding-left:10vw;
	padding-right:10vw;
	margin:2vw;
	overflow:hidden;
	font-family:"Helvetica";

	transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */
	

}




.word-count{
transition: all 4s;
}
.word-count:hover {
	border:solid .1vw tomato;
	padding-left:10vw;
	padding-right:10vw;
	margin:2vw;
	font-family:"Helvetica";
	overflow:hidden;
	
	transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */

	}



#scriptRequest {
	margin-bottom:20vw;
}








/*------------------------VideoKaset----*/



/*.div-circle-Level2:hover {
border-right:solid 3vw rgba(0, 0, 0,1);
border-bottom: solid 2vw rgba(255, 255, 255,0.5);
border-left: solid 3vw rgba(0, 0, 0,1);
border-top:solid 2vw rgba(255, 255, 255,0.5);

transition: all 0.4s,font-size 0.2s,padding 0.1s ;
-webkit-transition: all 0.4s,font-size 0.2s,padding 0.1s ;/* Safari */

/*}
*/





/*------------------------BUKUR----*/


/*.div-circle-Level2:hover {
border-right:solid 3vw rgba(0, 0, 0,1);
border-bottom: solid 10vw rgba(0, 0, 0,1);
border-left: solid 10vw rgba(0, 0, 0,1);
border-top:solid 3vw rgba(0, 0, 0,1);

transition: all 4s,font-size 0.2s,padding 0.1s ;
-webkit-transition: all 4s,font-size 0.2s,padding 0.1s ;/* Safari */


/*------------------   ^   -----------------------------------*/

/*
#return-menu {
display:block;
opacity: 0.6;
position:fixed;
float:right;
width:3vw;
margin-left:50vw;
 


}

#return-menu:active {
margin-bottom:10vw;
height:0vw;
opacity:0;
}*/