@import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
  }
  
  html {
	font-size: 16px;
  }
  
  body {
	background-color: #FFF0D9 !important;
  }

  #all_weeks{
	  background-image: url('../images/vacantion/weeks/background_carte.jpg');
	 
	 /* background-repeat: repeat-y; */
	 object-fit: contain;
  }

  button:focus{
	  outline: none;
  }

  #all_weeks::before{
	opacity: 0.75;
  }
  .main_logo_map {
	display: block;
	/* float: left; */
	width: 168px;
	height: 56px;
	background: url(../images/redesign/big_logo.png) center no-repeat;
	margin: 0x 0 0px 3px;
	}
  /* stilizare header*/

  .container_header{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 100%;
  	}

  .main_title{
	font-family: 'Balsamiq Sans';
	color:#472602;
	font-weight: 800;
	font-size: 36px;
	}

  .container_user_box{
	background-color: #FAF7C0;
	width: 25%;
	border: 5px solid #231F20;
	font-family:'Balsamiq Sans';
	font-weight: 700;
	color: #000000;
	position: relative;
	padding: 10px 5px;
  	}
  
  .user_box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  	}

  .user_box p{
	font-size: 20px;
	color: #000000;
	margin: 0;
	}

	.user_box p.user_greeting{
	font-size: 25px;
	color: #F07A7A;
	margin-bottom: 10px;
	margin-left: 50px;
	display: none;
	}

	.user_box p.user_greeting span{
		color: #bb5555;
	}

	.user_box span.nr_red_pages{
	color: #27927B;
	}


	.user_box span.nr_should_read{
	color: #6DCAD1;
	}

  .user_box .img_chenar{
	width: 190px;
	margin-top: -140px;
	margin-left: -232px;
	height: auto;
	object-fit: contain;
	/* transform: rotate(-20deg); */
	position: absolute;
	animation: zoom-in-zoom-out_little_more_1200  8s ease infinite;;
	}

	.user_box button.about_user{
		padding: 7px 15px;
		font-size: 16px;
		font-weight: 500;
		border: none;
		border-radius: 7px;
		background-color: #BB5B3E;
		color: #FFFFFF;
		margin-top: 10px;
	}

	.title_compass_container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 70%;
	}

	.page_title_container{
		width: 71%;
	}

	.compass_container{
		width: 15%;
	}

	.compass_container .compass{
		position: relative;
	}

	.compass_container .compass img{
		width: 130px;
		
	}

	@keyframes spin { 
		from { 
			transform: rotate(0deg); 
		} to { 
			transform: rotate(360deg); 
		}
	}

	@-ms-keyframes spin { 
		from { 
			-ms-transform: rotate(0deg); 
		} to { 
			-ms-transform: rotate(360deg); 
		}
	} 
	 @-moz-keyframes spin { 
		from { 
			-moz-transform: rotate(0deg); 
		} to { 
			-moz-transform: rotate(360deg); 
		}
	} 
	 @-webkit-keyframes spin { 
		from { 
			-webkit-transform: rotate(0deg); 
		} to { 
			-webkit-transform: rotate(360deg); 
		}
	}

	#busola{
		-webkit-animation-name: spin;
		-webkit-animation-duration: 4000ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
	
		-moz-animation-name: spin;
		-moz-animation-duration: 4000ms;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: linear;
	
		-ms-animation-name: spin;
		-ms-animation-duration: 4000ms;
		-ms-animation-iteration-count: infinite;
		-ms-animation-timing-function: linear;
	
		animation-name: spin;
		animation-duration: 4500ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
	
	  #north, #west, #east, #south{
		  position: absolute;
	  }
	
	  #north{
		  top: -15%;
		  left: 50%;
		  width: 15px;
	  }
	
	  #south{
		  bottom: -15%;
		  left: 51%;
		  width: 10px;
	  }
	
	  #west{
		  left: -21%;
		  top: 45%;
		  width: 20px;
	  }
	
	  #east{
	    right: -27%;
    	top: 45%;
		width: 15px;
	  }
  .header_img{
	  max-width: 100%;
	  width: 120px;
  }

  .image_fisrt_screen{
	  width: 200px;
  }

  .einstein_quote{
	  font-family: 'Atma';
	  font-weight: 700;
	  font-size: 19px;
	  width: 50%;
	 }

  .table_title{
	  font-family: 'Atma';
	  font-weight: 700;
	  color: #472602;
	  font-size: 26px;
	  text-align: center;
	  margin-top: 17px;
	  margin-bottom: 23px !important;
	 }

  .grid_cols_7{
	display: grid;
	width: 93%;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	background-color: #FFFCF3;
	border-radius: 33px;
	box-shadow: 0px 3px 30px 0px rgba(0,0,0,0.25);
	padding: 15px 5px;
  }

  .grid_cols_7 .table_square{
	  width:auto;
	  height: 130px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  transition: 0.4s;
	  cursor: pointer;
  }
/* 
  .table_square .tooltiptext{
	transition: 0.5s;
  } */



  	/* Toltip tabel */
	  .table_square .square_state,
	  #menu_legend .table_square .square_state{
		position: relative;
	}

	.table_square .square_state .tooltiptext {
		visibility: hidden;
		width: 190px;
		height: auto;
		background-color: #FFFFFF;
		color: #472602 !important;
		border: 2px solid #000000 !important;
		text-align: center;
		border-radius: 55px;
		padding: 5px 0;
		position: absolute;
		/* z-index: 180; */
		bottom: 100% !important;
		right: -34% !important;
		margin-left: -42%;
		font-size: 18px !important;
		font-weight: 600 !important;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'Atma';
		min-height:93px;
	}
	  
	.table_square .square_state .tooltiptext::after {
		content: '';
		display: block;
		position: absolute;
		z-index: 1;
		top: 87%;
		left: 40%;
		margin-left: -5px;
		width: 41px;
		height: 70px;
		object-fit: contain;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: url(../images/vacantion/first_page/tooltip_table_after.svg);
		transform: rotate(35deg);
	}

	#menu_legend .table_square .square_state .tooltiptext{
		bottom: -100% !important;
		z-index: 999;
	}

	#menu_legend .table_square .square_state .tooltiptext::after{
		transform: rotate(222deg);
		top: -54px;
	}
		
 
	.table_square .square_state img:hover ~ .tooltiptext {
		visibility: visible;
	}
	  /* sfarsit tooltip */

  .grid_cols_7 .table_square span.nr_week_table{
	  position: absolute;
	  bottom: 13px;
	  right: 25px;
	  font-family: 'Atma';
	  font-weight: 700;
	  font-size: 16px;
	  color: #000;
  }

  .grid_cols_7 .table_square .square_state{
	  /* padding: 10px 17px; */
	  height: 120px;
	  width: 120px;
	  /* height: 4rem;
	  width: 4rem; */
	  border-radius: 18px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }

  .grid_cols_7 .state_color_green .square_state {
	  background-color:#1F8D75;
  }
  .grid_cols_7 .state_color_green span,
  .grid_cols_7 .state_color_blue span{
	  color: #ffff;
  }

  .grid_cols_7 .state_color_blue .square_state {
	  background-color:#6DCAD1;
  }

.grid_cols_7 .table_square img{
	width: 70px;
	/* z-index: 1; */
}

.state_opacity{
	/*opacity: 0.5;*/
}
  /* .table_title_container{
	  display: flex;
	  flex-direction:column;
	  align-items: flex-start;
	  justify-content: center;
  } */
  .button_start{
	font-family: 'Atma';
	font-size: 28px;
	font-weight: 700;
	/* padding: 10px 80px; */
	background-color: #B64350;
	border-radius: 10px;
	border: none;
	color: #ffffff;
	margin-bottom: 10px;
	width: 200px;
	height: 60px;
	position: relative;
}


button.button_start::before {
	content: '';
	  border-radius: 1000px;
	  border-radius: 15px;
	  min-width: calc(200px + 12px);
	  min-height: calc(59px + 12px);
	  border: 2px solid #c76f79;
	  box-shadow: 0 0 60px rgb(182 67 80 / 64%);
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  opacity: 0;
	  transition: all .3s ease-in-out 0s;
	}
	
	.button_start:hover,   .button_start:focus {
	  color: #ffeef0;
	  transform: translateY(-6px);
	}
	
	button.button_start:hover::before,   button.button_start:focus::before {
	  opacity: 1;
	}
	
	button.button_start::after {
	  content: '';
	  width: 220px; height: 70px;
	  border-radius: 100%;
	  border: 2px solid #c76f79;
	  position: absolute;
	  z-index: -1;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  animation: ring 1.5s infinite;
	}
	
	button.button_start:hover::after,   button.button_start:focus::after {
	  animation: none;
	  display: none;
	}
	

button.button_question_start{
	background-color: #395852;
	font-family: 'Balsamiq Sans';
	font-size: 20px;
	padding: 5px 30px !important;
	font-weight: 500;
	color: #fff;
	outline: none;
	border: none;
	border-radius: 8px;
	margin-top:35px !important;
	width: auto !important;
	margin: 0 auto;
	/* height: 50px; */
}

button.button_question_start::before{
	border-radius: 13px;
    min-width: calc(198px + 12px);
    min-height: calc(70px + 12px);
    border: 2px solid #4fa08f6e;
	box-shadow: 0 0 60px rgb(119 158 150/64%);
}

button.button_question_start::after{
	border-color: #779e96;

}




.start_title_container{
	display: flex;
	flex-direction: column;
	width: 80%;
	align-items: center;
	justify-content: center;
}

.dif_width{
	width:55px !important;
}

.will_read, .alrd_read{
	font-family: 'Atma';
	font-weight: 700;
	font-size: 22px;
	display: flex;
}

.will_read span, .alrd_read span{
	width: 30px;
	height: 30px;
	border-radius: 12px;
	margin-right: 5px;
	display: block;
}

.will_read span{
	background-color: #6DCAD1;
}

.alrd_read span{
	background-color: #1F8D75;
}

  @media (min-width:992px) and (max-width:1200px){
	  .grid_cols_7{
		  width:95%;
	  }

	  .grid_cols_7 .table_square{
		  height: 120px;
	  }

	  .grid_cols_7 .table_square .square_state{
		  width: 110px;
		  height: 110px;
	  }

	  .grid_cols_7 .table_square img{
		  width:65px;
	  }

	  .grid_cols_7 .table_square span{
		  bottom: 10px;
		  right: 20px;
	  }
  }

  /* @media (max-width:991px){
	.grid_cols_7{
		width:100%;
	}
  } */

  @media (min-width:768px) and (max-width:991px){

	  .grid_cols_7{
		  width: 100%;
		  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		  
	  }

	  .grid_cols_7 .table_square{
		height: 110px;
	  }
	  .grid_cols_7 .table_square img{
		width:60px
	}

	.grid_cols_7 .table_square .square_state{
		height: 100px;
		width:100px
	}

	.grid_cols_7 .table_square span{
	bottom: 8px;
	right: 20px;

	}
	h1.main_title{
		font-size: 28px;
	}

	.header_img{
		width: 110px;
	}

	.user_box{
		width:100%;
		height: 130px;
		
	}

	.einstein_quote{
		font-size: 14px;
		width: 65%;
	}

	#menu_legend .table_square .square_state .tooltiptext{
		bottom: -120% !important;
	}

	#menu_legend .table_square .square_state .tooltiptext::after{
		left: 50%;
		background-size: 93%;
	}
  }

  @media (min-width:576px) and (max-width:767px){
	  .grid_cols_7{
		  width: 100%;
		  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	  }

	  .grid_cols_7 .table_square{
		  height: 95px;
	  }

	  .grid_cols_7 .table_square img{
		width:60px
	}

	.grid_cols_7 .table_square .square_state{
		height: 90px;
		width: 90px;
	}

	.grid_cols_7 .table_square span{
		bottom:4px;
		right:18px;
	}

	.dif_width{
		width: 45px !important;
	}
	h1.main_title{
		font-size: 21px;
	}

	.user_box{
		width:100%;
		height: 106px;
	}

	.header_img{
		width:95px;
	}

	.image_fisrt_screen{
		width:170px;

	}

	.einstein_quote{
		width:65%;
		font-weight: 600;
		font-size: 15px;
	}
  }

  @media (max-width:575px){

	.grid_cols_7{
		width: 96%;
		grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	}

	.grid_cols_7 .table_square{
		height: 95px;
	}

	.grid_cols_7 .table_square .square_state{
		width:83px;
		height: 83px;
	}

	.grid_cols_7 .table_square img{
		width:50px
	}

	.grid_cols_7 .table_square .square_state{
		border-radius: 10px;
	}

	.dif_width{
		width: 40px !important;
	}

	.grid_cols_7 .table_square span{
		bottom: 4px;
		right: 16px;
	}
	.user_box{
		/* width:50%; */
	}

	.main_title{
		font-size: 21px;
	}

	.header_img{
		width: 100px;
	}

	.einstein_quote{
		width:80%;
		font-size: 14px;
		font-weight: 600;
	}

	.table_title{
		font-size: 20px;
	}

	.button_start{
		font-size:24px ;
		width: 150px;
		height: 50px;
	}

	button.button_start::before{
		min-width: calc(150px + 12px);
    	min-height: calc(50px + 12px);
	}

	.container_header{
		flex-direction: column-reverse;
	}

	.title_compass_container {
		width: 100%;
		margin-bottom: 31px;
	}

	.container_user_box{
		width: 50%;
	}
	.page_title_container {
		width: 60%;
	}

	.compass_container{
		width: 30%;
	}

	.main_logo_map{
		margin: 0px 0 0px 3px;;
	}

	button.button_question_start::before{
		min-width: calc(200px + 12px);
		min-height: calc(58px + 12px);
	}
	

  }

  @media (min-width:425px) and (max-width:575px){
	.main_title{
		font-size: 22px;
	}

	.compass_container .compass img{
		width: 80%;
	}

	#north {
		top: -17%;
		left: 36%;
		width: 10px;
	}

	#west {
		left: -16%;
		top: 43%;
		width: 12px;
	}

	#south {
		bottom: -16%;
		left: 37%;
		width: 6px;
	}

	#east {
		right: 8%;
		top: 45%;
		width: 9px;
	}

	.user_box p{
		font-size: 16px;
	}

	.user_box p.user_greeting{
		font-size: 18px;
		margin-bottom: 5px;
		margin-left: 35px;
	}

	.user_box .img_chenar {
		width: 150px;
		margin-top: -104px;
    	margin-left: -185px
	}

	.container_user_box {
		padding: 5px;
	}
  }

  @media (max-width:424px) and (min-width:370px){
	.compass_container .compass img{
		width: 75px;
	}

	#north {
		top: -16%;
		left: 29%;
		width: 10px;
	}

	#west {
		left: -15%;
		top: 43%;
		width: 13px;
	}

	#south {
		bottom: -17%;
		left: 29%;
		width: 7px;
	}

	#east {
		right: 24%;
		top: 44%;
		width: 9px;
	}

	.user_box .img_chenar{
		width: 155px;
		margin-top: -88px;
    	margin-left: -177px;
	}

	.user_box p{
		font-size: 16px;
	}

	.user_box p.user_greeting{
		font-size:18px;
		margin-bottom: 5px;
		margin-left: 20px;
	}

	.container_user_box {
		padding: 3px 5px;
	}
  }

  @media (max-width:370px){
	.compass_container .compass img{
		width: 65px;
	}

	#north {
		top: -16%;
		left: 30%;
		width: 8px;
	}
	#west {
		left: -14%;
		top: 42%;
		width: 11px;
	}

	#south {
		bottom: -17%;
		left: 29%;
		width: 5px;
	}

	#east {
		right: 26%;
		top: 42%;
		width: 8px;
	}

	h1.main_title{
		font-size: 20px;
	}

	.container_user_box {
		width: 60%;
	}

	.container_user_box {
		font-size: 14px;
		padding: 3px 5px;
	}

	.user_box p.user_greeting {
		font-size: 18px;
		margin-bottom: 3px;
		margin-left: 15px;
	}

	.user_box .img_chenar{
		width: 140px;
		margin-top: -88px;
		margin-left: -181px;
	}
	
	.user_box p{
		font-size: 14px;
	}
	
  }

  @media (max-width:408px) and (min-width:371px){
	  #east{
		right: 20% !important;
	  }
  }
  @media (max-width:369px) and (min-width:310px){
	  #east{
		right: 17%;
	  }
  }

  @media (min-width:500px) and (max-width:575px){
	.user_box .img_chenar{
		width: 180px;
		margin-left: -243px;
	}
  }
  @media (max-width:450px){
	.grid_cols_7{
		width: 90%;
		grid-template-columns:1fr 1fr 1fr 1fr;
		border-radius: 20px;
	}

	.grid_cols_7 .table_square .square_state{
		width: 75px;
		height: 75px;
	}

	.grid_cols_7 .table_square span{
		font-size: 14px;
		bottom: 9px;
		right: 18px;
	}

	.will_read, .alrd_read{
		font-size: 18px;
	}
	
	.will_read span, .alrd_read span{
		width: 25px;
		height: 25px;
		border-radius: 7px;
	}
  }

  @media (max-width:370px){
	.grid_cols_7 .table_square{
		height: 76px;
	}

	.grid_cols_7 .table_square img{
		width:40px;
	}

	.table_title{
		font-size: 17px;
	}

	.grid_cols_7 .table_square .square_state{
		width: 92%;
		height: 90%;
	}

	.grid_cols_7 .table_square span{
		font-size: 14px;
		bottom: 2px;
		right: 11px;
	}

	h1.main_title{
		font-size: 21px;
	}

	.button_start{
		font-size: 18px;
		width: 155px;
		height: 45px;
	}

	button.button_start::before{
		min-width: calc(155px + 12px);
		min-height: calc(45px + 12px);	
	}
}

  @media (min-width:992px) and (max-width:1018px){
	.table_square .square_state .tooltiptext{
		width: 11rem;
		height: 8rem;
		font-size: 16px !important;
	}
  }

  @media (min-width:768px) and (max-width:850px){
	.table_square .square_state .tooltiptext{
		width:150px;
		right: -16% !important;
		height: auto;
		font-size: 14px !important;
	}

	.table_square .square_state .tooltiptext::after{
		top: 90%;
		background-size: 90%;
	}
  }

  @media (max-width:767px){
	.table_square .square_state .tooltiptext{
		font-size:12px !important;
		width: 145px !important;
		height: auto;
		border-radius: 49px;
		right: -35%;
		min-height: 78px;
	}

	.paperbook.second_image{
		display: flex;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.table_square .square_state .tooltiptext::after{
		top: 83%;
		background-size: 87%;
	}
	
  }

  @media (max-width:595px) {
	.table_square .square_state .tooltiptext{
		font-size: 10px !important;
    	width: 110px !important;
		right: -8% !important;
		height: auto;
		min-height: 60px;
	}

	#menu_legend .table_square .square_state .tooltiptext{
		bottom: -80% !important;
		right: -33% !important;
	}

	.table_square .square_state .tooltiptext::after{
		background-size: 80%;
		top: 82%;
	}

	#menu_legend .table_square .square_state .tooltiptext::after{
		top: -57px;
		left: 33%;
		transform: rotate(185deg);
	}
  }

  @media (max-width:375px){
	.table_square .square_state .tooltiptext{
		right: -35% !important;
	}

	#menu_legend .table_square .square_state .tooltiptext{
		bottom: -108% !important;
	}

	#menu_legend .table_square .square_state .tooltiptext::after{
		left: 41%;
		transform: rotate(222deg);
	}
  }

  /* saptamani */
  .bg_week{
	  background-color: #FFFCF3;
	  box-shadow: 0px 3px 30px 0px rgba(0,0,0,0.25);
  }

  .container_week{
	  width:100%;
	  position: relative;
	  height: fit-content;
	  border-radius:40px;
	
	  /* padding-right: 60px; */
	   
  }

  #right_up_corner, #left_up_corner,
  #right_down_corner, #left_down_corner{
	  position: absolute;
  }


  

  #right_up_corner{
	  right: -18px;
	  top: -25px;
  }

  #left_up_corner{
	  left: -18px;
	  top: -25px;
  }

  .pin_title{
	display: flex;
    /* width: 70%; */
    justify-content: space-between;
    align-items: flex-end;
    top: 20%;
    z-index: 20;
    left: 45%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .container_image_title{
	    /* position: relative; */
		width: 750px;
		height: auto;
		transform: rotate(-8deg);
		margin-top: 55px;
  }

  .week_title{
	font-family: 'Atma';
    font-weight: 600;
    color: #261202;
    font-size: 27px;
  
  }

  .container_image_title .title_image{
	  width: 100%;
	  object-fit: contain;
	  /* position: absolute;
	  top: -28px;
	  left: 20px;
	  z-index: 10; */
	  /* margin-top: -25px; */
	  margin-left: 15px;
	  position: relative;
  }

  .container_content{
	  padding: 30px 60px;
  }
  
  .container_content_subtheme{
	  
padding: 0 0%;
	 }

.container_image_title .title_pin{
	width: 70px;
	margin-bottom: -4px;
}

.container_author{
	display: flex;
	align-items: center;
	justify-content: center;
}

.container_author .author_desc{
	margin-left: 5px;
}

.container_author .author_desc h4{
	margin-bottom: 0;
}

.buttons_container{
	margin-top: 50px;
	display: flex;
	width: 100%;
	background-color: #FFFCF3;
	box-shadow: 0px 3px 30px 0px rgba(0,0,0,0.25);
	border-radius: 9px;
	height: 52px;
    padding: 6px;
}

#btn_done, #btn_should{
	/* width: 50%; */
	border: none;
	font-family: 'Roboto';
	font-size: 16px;
	font-weight: 700;
	background-color: #FFFCF3;
	color:#261202;
	padding: 4px 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	outline: none;
}

#btn_done{
	border-radius: 7px 0 0 7px;
}

#btn_should{
	border-radius:  0 7px 7px 0;
}

.checkbox {
	width: 30px;
	background-image: url('../images/vacantion/weeks/checked_checkbox_green.png');
	display: block;
}

/* checkbox */
  /* Hide the original checkbox */   
  input[type=checkbox] {   
	visibility: hidden;   
}   
	#btn_done, #btn_should{
		position: relative;
	}
/* creating a custom checkbox*/  
.mark, .mark_blue {   
	position: absolute;   
	top: 15%;   
	left: 85%;   
	height: 25px;   
	width: 25px;   
	border: 1px solid #261202;
	background-color: #ffff;   
	border-radius: 8px;
}   
	
/*background color to be shown when hovering over checkbox */   

/* #btn_done:hover input ~ .mark {   
	background-color: gray;   
}    */
			  
/*background color to be shown when the checkbox is checked */   
#btn_done input:checked ~ .mark,
#btn_should input:checked ~ .mark_blue  {   
	/* background-color: blue;    */
	border-color: #FFFFFF;
}   
	
/* checkmark to be shown in checkbox */   
/* It will not be shown when unchecked */   
.mark:after, .mark_blue:after {   
	content: "";   
	position: absolute;   
	display: none;   
}   
.mark_blue:after {   
	content: "";   
	position: absolute;   
	display: none;   
}   
	
/* display checkmark when checked */   
#btn_done input:checked ~ .mark:after
{   
	display: block;   
}   
#btn_should input:checked ~ .mark_blue:after {
	display: block;
}
	 
/* creating a square to be the sign of   
	checkmark */   
	#btn_done input:checked ~ .mark:after
	  {   
	left: 2px;   
	bottom: -2px;   
	width: 30px;   
	height: 27px;   
	display: block;
	/* border: solid white;    */

	object-fit: contain;
	background-size: 100%;
	background-repeat: no-repeat;
	/* border-width: 4px 4px 4px 4px;    */
}   

#btn_should input:checked ~ .mark_blue:after {
	left: 2px;   
	bottom: -2px;   
	width: 30px;   
	height: 27px;   
	display: block;
	/* border: solid white;    */
	background-image: url('../images/vacantion/weeks/blue_checked.png');
	object-fit: contain;
	background-size: 100%;
	background-repeat: no-repeat;
	/* border-width: 4px 4px 4px 4px;    */
}
	#btn_done input:checked ~ .mark:after{
		background-image: url('../images/vacantion/weeks/green_checked.png');
	}
	#btn_should input:checked ~ .mark_blue:after{
	
	}



.svg_title{
	display: flex;
	width: 100;
	justify-content: flex-start;
	align-items: center;
}
.svg_icon1_default{
	width: 28px;
	margin-right: 5px;
	padding: 1px 5px;

}
.svg_icon2_default{
	width: 30px;
	padding: 1px 5px;
}

.active_green {
	background-color:#27927B !important;
	color: #fff !important;
	padding: 1px 5px;
}
.active_blue {
	background-color:#6DCAD1 !important;
	color: #fff !important;
	padding: 1px 5px;
}

.active_green .svg_icon1_default path{
	fill: #ffffff !important;
}
.active_blue .svg_icon2_default path{
	fill: #ffffff !important;
}

.svg_icon1_default path,
.svg_icon2_default path{
	fill: #261202 !important;
}


.paperbook{
	height: 480px;
	width: 330px;
	/* background-color:#B64350; */
	margin-bottom: 50px;
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	max-width: 100%;
}

.background_iframe{
	width: 100%;
	/* height: 500px; */
	/* background-color: #472602; */
	height: fit-content;
}

.container_second_week_section{
	position: relative;
}
.container_content .image_second_section{
	/* transform: rotate(20deg); */
	position: absolute;
	/* width: 450px; */
	/* object-fit: contain; */
	top: -20px;
	/* right: -100px; */
	max-width: 750px;
    max-height: 600px;
}

.gdpr_modal_info{
	font-family: 'Roboto';
}




.row_reversed .row.container_content {
    display: flex;
    flex-direction: row-reverse;
}

.animatie_wrapper{
	height: 500px;
}

@media (min-width: 576px){
	._modal_dialog_subscribe{
		max-width:45% !important;
	}
}

.close_modal_container{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding: 10px 20px;
}

._modal_body_subscribe{
	padding: 0 2.5rem
}

._modal_content_subscribe{
	background-color: #EFD9C0;
	border: 5px solid #472210;
	border-radius: 0 !important;
	position: relative;
}

#coltStangaSus, #coltDreaptaSus, 
#coltStangaJos, #coltDreaptaJos{
	width: 70px;
	position: absolute;
}

#coltStangaSus, #coltDreaptaSus{
	top:-25px
}

#coltStangaSus, #coltStangaJos{
	left: -23px;
}

#coltDreaptaSus, #coltDreaptaJos{
	right: -23px;
}
#coltDreaptaJos, #coltStangaJos{
	bottom: -25px;
}

.row_modal_title{
	display: flex;
	justify-content: center;
	align-items: center;
}

.row_modal_title h1{
	color: #472210;
	font-size: 30px;
	font-family: 'Atma';
	font-weight: 900;
}

.container_modal_content{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.container_modal_content .container_modal_form{
	width:40%
}

.container_modal_content .container_modal_right_desc{
	width: 60%;
	color:#395852;
	font-family: 'Balsamiq Sans';
	font-size: 20px;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	/* font-weight */
}

.container_modal_content .container_modal_right_desc p{
	width: 80%;
	text-align: center;
}

._form_group_modal_subsc{
	justify-content: center !important;
}

._form_group_modal_subsc label{
	font-family: 'Roboto';
	font-weight: 700;
	font-size: 16px;
	/* padding: 0; */
}

.btn_modal{
	font-family: 'Balsamiq Sans';
	font-weight: 700;
	color: #FFFCF3;
	/* border: 1px solid #707070; */
	border-radius: 6px;
	box-shadow: 0px 3px 30px 0px rgba(0,0,0,0.25);
}

.btn_save_modal_subsc{
	background-color: #395852;
	font-size: 20px;
	border: none !important;
	padding: 8px 40px;
	position: relative;
	overflow: hidden;
	transition:.3s transform ease-in-out;
}

.btn_save_modal_subsc::before{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #66d3bd;
	opacity: 0;
	-webkit-transition: .2s opacity ease-in-out;
	transition: .5s opacity ease-in-out;
}

button.btn_save_modal_subsc:hover::before{
	opacity: 0.2;
}
button.btn_save_modal_subsc:hover, 
button.btn_save_modal_subsc:focus{
	transform:scale(1.1);
}


.btn_modal_continue{
	background-color: #BBAB53;
	font-size: 17px;
	border: none !important;
	padding: 12px 20px;
	position: relative;
	transition: .3s transform ease-in-out;
}

.btn_modal_continue::before{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #fff2a6;
	opacity: 0;
	-webkit-transition: .2s opacity ease-in-out;
	transition: .2s opacity ease-in-out;
}

button.btn_modal_continue:hover::before{
	opacity: 0.2;

}

button.btn_modal_continue:hover, 
button.btn_modal_continue:focus{
	transform: scale(0.95);
}

.or_modal{
	font-family: 'Balsamiq Sans';
	font-size: 20px;
	color: #395852;
}

._form_control_modal{
	border: 2px solid #472210;
	font-family: 'Roboto';
	color: #181717;
}

._form_control_modal:focus {
    color: #181717 !important;
    border-color: #c1a597 !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(90, 64, 51, 0.25) !important;
}

._modal{
	padding: 17px !important;
	top: 2px;
}

._close_modal{
	color: #472210 !important;
	font-weight: 800 !important;
}

._close_modal:hover{
	color: #472210 !important;
	font-weight: 800 !important;
}
@media (max-width:575px){

	._modal{
		top: 0px;
		padding:8px !important;
	}

#coltStangaSus, #coltDreaptaSus, 
#coltStangaJos, #coltDreaptaJos{
	width: 55px;
}
	._modal_body_subscribe{
		padding: 0 1.5rem !important;
	}
	.container_modal_content{
		flex-direction: column-reverse;
	}

	.container_modal_content .container_modal_right_desc,
	.container_modal_content .container_modal_form,
	.container_modal_content .container_modal_right_desc p{
		width: 100%;
	}

	.container_modal_content .container_modal_right_desc img{
		width: 68%;
	}

	._form_control_modal{
		height: calc(1em + 0.75rem + 2px) !important;
	}

	._form_group_modal_subsc{
		margin-bottom: 0.5rem !important;
	}

	.container_modal_content .container_modal_right_desc p{
		font-size: 12px !important;
		margin-bottom: 0;
	}

	.row_modal_title h1{
		font-size: 18px !important;
		margin: 0 20px;
		text-align: center;
	}

	._form_group_modal_subsc{
		justify-content: space-between !important;
		align-items: center;
	}

	._form_group_modal_subsc label{
		font-size: 12px;
	}
	.btn_modal{
		font-weight: 500;
	}
	.btn_save_modal_subsc{
		font-size: 15px;
		/* font-weight: 500; */
	}

	.btn_save_modal_subsc{
		padding:6px 30px;
	}

	.btn_modal_continue {
		font-size: 12px;
		padding: 8px 15px;
	}

	.or_modal{
		font-size: 16px;
	}

	._form_bottom {
		margin-bottom: 0.5rem !important;
	}

	.close_modal_container{
		padding: 5px 20px;
	}
}

@media (min-width:576px) and (max-width:768px){
	._modal_dialog_subscribe{
		max-width: 92% !important;
	}

	.container_modal_content .container_modal_right_desc{
		padding-top: calc(0.375rem + 1px);
		width: 55%;
	}

	.container_modal_content .container_modal_form{
		width: 45%;
	}

	._modal_body_subscribe{
		padding: 0 1.5rem;
	}
	.container_modal_content .container_modal_right_desc p{
		width: 95%;
		font-size: 16px;
	}

	.container_modal_content .container_modal_right_desc img{
		width: 95%;
	}

	.row_modal_title h1{
		font-size: 27px;
	}

	._form_group_modal_subsc label{
		font-size: 14px;
	}

	._form_group_modal_subsc{
		justify-content: space-between !important;
		flex-direction: column;
		margin-bottom: 0.4rem;
	}

	._form_group_modal_subsc label{
		padding-bottom: 4px !important;
	}

	.btn_save_modal_subsc{
		font-size: 16px;
		padding: 6px 28px;
	}

	.or_modal{
		font-size: 16px;
		margin-top: 5px;
	}

	.btn_modal_continue{
		padding: 7px 9px;
		font-size: 14px;
		font-weight: 500;
	}

	._form_bottom{
		margin-bottom: 5px !important;
	}
}

@media (min-width:768px) and (max-width:992px){
	._modal_dialog_subscribe{
		max-width: 90% !important;
	}

	._modal_body_subscribe{
		padding: 0 1.5rem;
	}

	.btn_save_modal_subsc{
		font-size: 16px;
		font-weight: 500;
	}

	.btn_modal_continue{
		font-size: 15px;
		font-weight: 500;
	}

	.or_modal{
		font-size: 18px;
	}
}

@media (min-width:993px) and (max-width:1200px){
	._modal_dialog_subscribe{
		max-width:85% !important;
	}
}

@media (min-width:1201px) and (max-width:1600px){
	._modal_dialog_subscribe{
		max-width:60% !important;
	}

	.container_modal_right_desc img{
		width:97%;
	}
}

@media (max-width:375px){
	._modal_body_subscribe{
		padding: 0 1rem !important;
	}

	/* .row_modal_title h1{
		font-size: 22px !important;
	} */

	/* .container_modal_content .container_modal_right_desc p{
		font-size: 16px !important;
	} */
}

.container_image{
		top: -10%;
		position: absolute;
}


/* stilizare CARTE */
.book_main_title{
	font-family: 'Balsamiq Sans';
	font-size: 43px;
	color: #000;
	font-weight: 700;
}

.container_content_right{
	padding: 0 55px;
}

.book_main_title span{
	color: #B64350;
}

.book_desc{
	font-family: 'Balsamiq Sans';
	font-weight: 700;
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 60px;
	line-height: 25px;
	/* white-space: pre-wrap; */
	/* word-break:
	break-word; */
	/* word-break: keep-all; */
}


.br-red-error{
	border-color: red;
}
.container_author .author_desc{
	font-family: 'Balsamiq Sans';
}

.container_author .author_desc h4{
	font-size: 16px;
	font-weight: 700;
}

.container_author .author_desc span{
	font-size: 15px;
}
.container_author img{
	width: 75px;
}
.min-height-500{
	min-height: 500px;
}
@media (min-width:992px) and (max-width:1200px){
	.container_content_right{
		padding: 0 35px;
	}

	.container_content{
		padding: 30px 15px;
	}

	.compass_container {
		width: 18%;
	}

	.container_user_box{
		width: 29%;
	}

	.page_title_container {
		width: 77%;
	}

}

@media (min-width:768px) and (max-width:991px){

	.compass_container {
		width: 18%;
	}

	.container_user_box{
		width: 28%;
		padding: 10px 8px;
	}

	.user_box p{
		font-size: 16px;
	}
	
	.user_box button.about_user{
		font-size: 14px;
		padding: 5px 12px;
		margin-top: 4px;
	}

	.user_box .img_chenar{
		width: 160px;
		margin-top: -113px;
		margin-left: -163px;
	}

	.user_box p.user_greeting{
		font-size: 20px;
		margin-bottom: 3px;
	}
	
	.page_title_container {
		width: 77%;
	}

	.compass_container .compass img {
		width: 100px;
	}

	

	#north {
		left: 54%;
		width: 12px;
	}

	#west{
		width: 15px;
	}

	#south{
		width: 8px;
		left: 56%;
	}

	#east{
		width: 11px;
		right: -37%;
	}


	.book_main_title{
		font-size: 25px;
	}

	.book_desc{
		font-size: 16px;
		margin-bottom: 30px;
	}

	.container_author img{
		width: 65px;
	}

	.container_author .author_desc h4{
		font-size: 14px;
	}

	.container_author .author_desc span {
		font-size: 13px;
	}

	.container_content {
		padding: 30px 25px;
	}

	.container_content_right {
		padding: 0 19px;
	}

	.buttons_container {
		margin-top: 35px;
	}

	#btn_done, #btn_should{
		font-size: 12px;
	}

	.mark, .mark_blue {
		border-radius: 6px !important;
		height: 20px !important;
		width: 20px !important;
		top: 24% !important;
		left: 84% !important;
	}

	#btn_done input:checked ~ .mark:after,
	#btn_should input:checked ~ .mark_blue:after {
		left: 1px;
		bottom: -2px;
		width: 24px;
		height: 22px;
	}

	.svg_icon1_default{
		width: 25px;
	}

	.svg_icon2_default{
		width: 23px;
	}

	.container_image_title {
		width: 650px;
	}

	.week_title{
		font-size: 23px;
	}
	.container_image_title .title_pin
	{
		width: 60px;
	}

	.container_image_title{
		margin-top: 20px;
	}

	.cloud_1, .cloud_2{
		bottom: 6%;
	}
}

@media (min-width:576px) and (max-width:767px){
	.compass_container .compass img{
		width: 70px;
	}

	#north{
		left: 60%;
		width: 11px;
		top: -18%;
	}

	#west{
		left: -27%;
		width: 14px;
		top: 41%;
	}

	#east{
		width: 10px;
		right: -57%;
		top: 43%;
	}

	#south {
		bottom: -19%;
		left: 60%;
		width: 7px;
	}

	.container_user_box{
		width: 32%;
		padding: 5px;
	}

	.user_box{
		height: auto;
	}

	.user_box p{
		font-size: 14px;
	}
	.page_title_container{
		width: 82%;
	}

	.user_box p.user_greeting{
		font-size: 18px;
		margin-left: 30px;
		margin-bottom: 4px;
	}

	.user_box button.about_user{
		padding: 5px 10px;
    	font-size: 12px;
		margin-top: 5px;
	}

	.user_box .img_chenar {
		width: 140px;
		margin-top: -116px;
		margin-left: -140px;
	}

	.container_user_box{
		width: 32%;
	}

	.week_title {
		font-size: 23px;
	}

	.container_image_title .title_pin{
		width: 50px;
	}

	.week_title{
		width: max-content;
	}

	.pin_title{
		width:auto;
	}

	.pin-title h3{
		margin-bottom: 4px;
	}

	.book_main_title {
		font-size: 35px;
	}

	.book_desc{
		font-size: 16px;
	}

	.container_author img {
		width: 70px;
	}
}

@media (max-width:575px){

}

@media (max-width:575px) and (min-width:425px){
	.book_main_title{
		font-size: 30px;
	}

	.book_desc{
		font-size: 16px;
	}

	.container_author img{
		width: 60px;
	}

	.container_author .author_desc h4{
		font-size: 14px;
	}

	.container_author .author_desc span{
		font-size: 13px;
	}

	#btn_done, #btn_should{
		font-size: 14px;
	}
}


@media (max-width:575px){
	.buttons_container{
		height: 45px;
	}

	.svg_icon1_default{
		width: 25px;
	}

	.svg_icon2_default{
		width: 28px;
	}

	.week_title{
		font-size: 20px;
	}

	.container_image_title .title_pin{
		width: 45px;
	}

	.pin_title{
		top: 26%;
	}
}
@media (max-width:767px){
	.container_content {
		padding:30px 0;
	}

	.book_desc, .buttons_container{
		margin-bottom: 40px;
	}

	.week_title{
		width: max-content;
	}

	.pin_title{
		width:auto;
	}

	#btn_done, #btn_should{
		font-size: 14px;
	}

	.mark, .mark_blue{
		top: 22%;
		height: 20px;
    	width: 20px;
		border-radius: 6px;
	}

	#btn_done input:checked ~ .mark:after,
	#btn_should input:checked ~ .mark_blue:after{
		width: 24px;
		height: 22px;
	}

}


@media (max-width:424px){
	.container_content_right{
		padding: 0 28px;
	}

	.book_main_title{
		font-size: 25px;
	}

	.book_desc {
		font-size: 14px;
	}

	.container_author .author_desc h4{
		font-size: 13px;
	}

	.container_author .author_desc span {
		font-size: 12px;
	}

	.container_author img{
		width: 50px;
	}

	#btn_done, #btn_should{
		font-size: 14px;
	}
}


@media (max-width:350px){
	.week_title{
		font-size:17px
	}

	.container_image_title .title_pin{
		width: 38px;
	}
}


@media (min-width:768px){
	.corner{
		width: 100px;
	}
	
  }
  
  @media (min-width:576px) and (max-width:767px){
	.corner{
		width: 80px;
	}
  }

  @media (max-width:575px){
	  .corner{
		width:55px
	  }

	  #right_up_corner{
		  right: -10px;
		  top: -17px;
	  }

	  #left_up_corner{
		  top:-17px;
		  left: -10px;
	  }
  }

  @media (max-width:1130px){
	img.container_image.image_second_section {
		position: initial;
		width: 100%;
		height: auto;
		left: 0;
	}
	.min-height-500{
		min-height: auto;
	}
	.my-5.min-height-500{
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}
  }
  
  @media (max-width:1250px){
	img.container_image {
		position: initial;
		top: 0;
		width: 100%;
		height: auto;
	}
  }

  @media (max-width:500px){
	.buttons_container{
		display: flex;
		flex-direction: column;
		height: auto;
		width: 70% !important;
		margin: auto;
		margin-top: 30px;
	}

	#btn_done, #btn_should{
		width: 100% !important;
		border-radius: 7px;
	}

	#btn_should{
		margin-top: 5px;
	}
  }

  @media (max-width:370px){
	  .buttons_container{
		  width: 90% !important;
	  }
  }

.bottom_animation .animation-bird {
    bottom: 18% !important;
    top: auto !important;
}

.animation-horse img {
    animation: bounce 1s 6 !important;
}

div#all_weeks {
	/* background-image: url(../images/vacantion/background_body2.png); */
	background-repeat: repeat-y;
	background-size: contain;
	/* background-color: #beb0a3; */
}




.audiojs .play-pause {}

.video_top_title {
    font-family: 'Atma';
    font-size: 22px;
    font-weight: 600;
}

.btn_user_table{
	background-color: #B64350;
	font-family: 'Atma';
	font-weight: 700;
	font-size: 18px;
	border: none;
	outline: none;
	padding: 10px 15px;
	color: #ffff;
	border-radius: 7px;
	position: relative;
}
/* Buton User Table - zona header */

.btn_user_table:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn_user_tablebtn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn_user_table::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 7px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

.btn-white::after {
	background-color: rgba(182, 67, 80, 0.25);
    box-shadow:
	 rgba(182, 67, 80, 0.25) 0px 54px 55px,
	  rgba(182, 67, 80, 0.12) 0px -12px 30px,
	   rgba(182, 67, 80, 0.12) 0px 4px 6px,
	    rgba(182, 67, 80, 0.17) 0px 12px 13px, 
		rgba(182, 67, 80, 0.09) 0px -3px 5px;
	opacity: 0.5;
}

.btn_user_table:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn-animated {
    animation: moveInBottom 5s ease-out;
    animation-fill-mode: backwards;
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* sfarsit buton user table */

.btn_user_table .content_btn_user{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
    height: 30px;
}

.btn_user_table .content_btn_user img{
	width: 20px;
}

.container_user_box_title, .container_einstein_btnUser{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.container_user_box_title{
	width: 65%;
}

.container_einstein_btnUser{
	width: 29%;
}

.container_user_box_title .user_box_static_menu{
	width: 29%;
}

.container_user_box_title .page_title_static_menu{
	width: 59%;
}

.container_einstein_btnUser .eisntein_static_menu{
	width: 40%;
}

.container_einstein_btnUser .btn_user_table{
	width: 50%;
}

.container_einstein_btnUser .eisntein_static_menu .einstein_fara{
	width: 100%;
}

.container_user_box_title .user_box_static_menu img{
	width: 160px;
	margin-top: -29%;
    margin-left: -94%;
	animation: zoom-in-zoom-out_little_more_1200  8s ease infinite;
}

.container_einstein_btnUser .eisntein_static_menu {
	position: relative;
}

.container_einstein_btnUser .eisntein_static_menu .mustata_static_menu{
	position: absolute;
	width: 20px;	
	top: 62%;
    left: 37%;
	animation: shake 3s 4s infinite linear;
}

.container_user_box_title .user_box_static_menu .user_box p{
	font-size: 16px;
}

.container_user_box_title .user_box_static_menu 
.user_box p.user_greeting{
	font-size: 20px;
	margin-bottom: 3px;
}

.container_user_box_title .user_box_static_menu{
	padding: 0 5px;
}
.sticky_menu{
    position: sticky;
    width: 100%;
    z-index: 150;
    background: #FFF0D9 !important;
    display: none;
    opacity: .98;
}
.sticky_menu.show_menu{
	display: block;
}
#menu_legend{
	display: none;
}
.legend_opened #menu_legend{
	display: block;
}

.legend_opened #toggle_see_legend img{
	transform: rotate(180deg);
}

#menu_lengd{
	width: 100%;
}

.icon_final_title_container{
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon_final_title_container .school_ring_container{
	/* display: block; */
	position: relative;
}

.school_ring_container .img_clopotel{
	width: 60px;
	/* position: relative; */
}

@keyframes ringSchool{
	0% {
        transform: rotate(-12deg);
        }
    50% {
        transform: rotate(12deg);
    }
	100%{
		transform: rotate(-12deg);
	}
}
@-webkit-keyframes ringSchool{
	0% {
        -webkit-transform: rotate(-12deg);
        }
    50% {
        -webkit-transform: rotate(12deg);
    }
	100%{
		-webkit-transform: rotate(-12deg);
	}
}
@-ms-keyframes ringSchool{
	0% {
		-ms-transform:rotate(-12deg);
        }
    50% {
        -ms-transform: rotate(12deg);
    }
	100%{
		-ms-transform: rotate(-12deg);
	}
}
@-moz-keyframes ringSchool{
	0% {
		-moz-transform:rotate(-12deg);
        }
    50% {
        -moz-transform: rotate(12deg);
    }
	100%{
		-moz-transform: rotate(-12deg);
	}
}

.school_ring_container .img_betisor {
    width: 30px;
    top: 30px;
    position: absolute;
    left: 40px;
	animation: ringSchool 750ms infinite;
	-webkit-animation-timing-function: linear;

	-webkit-animation-name: ringSchool;
	-webkit-animation-duration: 750ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: ringSchool;
	-moz-animation-duration: 750ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;

	-ms-animation-name: ringSchool;
	-ms-animation-duration: 750ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

	animation-name: ringSchool;
	animation-duration: 750ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}



.final_title{
	font-family: 'Atma';
	color: #ed5b3d;
	font-weight: 600;
	text-align: center;
	font-size: 65px;
	text-shadow: 4px 5px 10px rgba(71,38,2,0.46);
	animation: zoom-in-zoom-out_little 3s ease infinite;
	margin-bottom: -10px;
	margin-left: 40px;
}



.user_box span#nr_done_books{
	color: #F98383;
}




.school_success{
	color: #88C87E;
	font-size:42px;
	text-shadow: 4px 5px 10px rgba(134, 120, 104, 0.46);
	animation: zoom-in-zoom-out_little 3s ease infinite;
}

.last_message{
	font-family: 'Balsamiq Sans';
	font-size:35px;
	font-weight: 700;
	color: #472602;
	text-shadow: 4px 5px 10px rgb(71 38 2 / 46%);
	animation: moving2 1s infinite alternate;
}

.last_message #nr_done_pags.nr_red_pages{
	color: #27927B;
	animation: zoom-in-zoom-out_little 3s ease infinite;
}

.last_message #nr_done_books.nr_done_books{
	color: #F98383;
	animation: zoom-in-zoom-out_little 3s ease infinite;
}



.social_media_header{
	display: flex;
	width: 12%;
	justify-content: space-between;
	align-items: center;
}

.social_media_header img{
	width: 35px;
	animation: zoom-in-zoom-out_little 3s ease infinite;
}


@media (min-width:992px) and (max-width:1200px){
	.social_media_header{
		width:12%
	}

	button.btn_user_table::before{
		border-radius: 9px;
		min-width: calc(137px + 12px);
		min-height: calc(42px + 12px);
	}

}

@media (min-width:768px) and (max-width:991px){
	.social_media_header{
		width:17%
	}

	.container_user_box_title .page_title_static_menu{
		width: 46%;
	}

	button.btn_user_table::before{
		border-radius: 9px;
		min-width: calc(103px + 12px);
		min-height: calc(38px + 12px);
	}
}
@media (min-width:460px) and (max-width:767px){
	.social_media_header{
		width:24%;
	}

	
}

@media (max-width:459px){
	.social_media_header{
		width:30%;
	}
}

@media (max-width:370px){
	.social_media_header img{
		width: 28px;
	}
}

.legend_opened #menu_legend{
	height: auto;
	overflow-y: auto;
	max-height: calc(100vh - 100px);
	margin-top: 10px;
	padding-bottom: 15px;
}

.legend_opened #menu_legend::-webkit-scrollbar {
    width: 7px;
	height: 7px;
}
 
.legend_opened #menu_legend::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 100px;
}
 
.legend_opened #menu_legend::-webkit-scrollbar-thumb {
    background-color: #BAA89B;
    border-radius: 100px;
}

#menu_legend .grid_cols_7{
	box-shadow: none;
	background-color: transparent;
	margin-bottom: 10px;
	border: none;
}



@media (max-width:992px){
	.final_title{
		/* width: 75% !important; */
	}
}

@media (max-width:767px){
	.final_title{
		font-size: 42px;
	}

	.last_message{
		font-size: 28px;
	}

	.school_success{
		font-size: 32px;
	}

	.school_ring_container .img_clopotel{
		width: 50px;
	}

	.school_ring_container .img_betisor{
		width: 25px;
		top: 25px;
		left:35px
	}

	.school_success{
		width: 25px;
	}
}

@media (max-width:575px){
	.final_title{
		font-size: 35px;
		margin-left: 25px;
	}

	.last_message{
		font-size: 25px;
	}

	.school_success {
		font-size: 28px;
	}

	.school_ring_container .img_clopotel{
		width: 45px;
	}

	.school_ring_container .img_betisor{
		width: 20px;
		left: 31px;
	}
}

@media (max-width:400px){
	.final_title{
		font-size: 28px !important;
		margin-left: 15px;
	}

	.school_ring_container .img_clopotel{
		width: 35px;
	}

	.school_ring_container .img_betisor{
		width: 15px;
		top: 22px;
		left: 25px;
	}

	.last_message{
		font-size: 20px;
	
	}

	.school_success{
		font-size: 23px;
	}
	
}




/* woow */
  /* WOOOW */
  .btn {
	padding: 15px;
	font-weight: 700;
	font-size: 2rem;
	text-decoration: none;
	text-align: center;
	transition: all .5s ease; 
  }
  
  .btn--doar {
	color: #fff;
	padding-right: 0;
	background-color: #c0392b;
	-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 70%, 90% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 0 100%);
  
  }
  
  .btn--doar:hover { 
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);  
  }
  
  .btn--doar:after {
	content: "\f004";
	color: #e74c3c;
	font-family: FontAwesome;
	display: inline-block;
	position: relative;
	right: -55px;
	transition: all 0.2s ease;
  }
  
  .btn--doar:hover:after {
	margin: -5px 15px;
	right: 0px;
  }
  
  .btn--promo {
	color: #dff9fb;
	background-color: #130f40;
	border-radius: 50px;
  }
  
  .btn--promo:after {
	content: '40% OFF';
	display: inline-block;
	font-size: 1rem;
	color: #130f40;
	background-color: #f0932b;
	border-radius: 25px;
	padding: 5px;
	position: absolute;
	margin-top: -30px; 
	margin-left: -55px; 
  }
  
  .btn--action{
	display: block;
	width: 100%;
	padding: 1rem;
	border-radius: 1.5rem;
	background-color: #f6e58d;
	color: #000;
	transition: all .5s ease 0s; 
	box-shadow: 0 10px #f9ca24;
  }
  
  /* .btn--action:hover{
  box-shadow: inset 0 0 0 .25rem #ffbe76;
  } */
  
  .btn--action span{
	display: inline-block;
	position: relative;
	transition: all .5s ease;
  }
  
  .btn--action span:before{
	content: '\f04c'; 
	color: #000;
	font-size: 1rem;
	font-family: FontAwesome;
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 1.5rem;
	opacity: 0;
	transition: all .1s ease 0s;
  }
  
  .btn--action:hover span{
	padding-left: 1.5rem; 
  }
  
  .btn--action:hover span:before{
	left: 0;
	opacity: 1;
  }
  
  .btn--action:active {
	box-shadow: 0 5px #f0932b;
	transform: translateY(5px);
  }
  
  /* Redes Sociais */
  .circle-button{
	font-family: 'Roboto', sans-serif;
	color: #ccc;
	display: inline-block;
	font-size: 2rem;
	border-radius: 50%;
	transition: all 0.2s ease;
  }
  
  .circle-button:hover{
	animation: circle-anim 0.3s ease forwards;
	transition: all 0.4s ease;
  }
  
  .grow-container{
	display: inline-block;
	margin: 1em;
  }
  
  .to-red:hover{
	background: #E5393F;
  }
  
  .to-twitter:hover{
	background: #1DA1F3;
  }
  
  .to-facebook:hover{
	background: #3B5998;
  }
  
  .to-linkedin:hover{
	background: #0077B5;
  }
  
  .to-reddit:hover{
	background: #FF4500;
  }
  
  @keyframes circle-anim{
	0% {
	  
	}
	
	90%{
	  padding: 0.35em;
	  margin: -0.35em; 
	}
	
	100%{
	  padding: 0.25em;
	  margin: -0.25em; 
	}
  }
  
  @keyframes ring {
	0% {
	  width: 30px;
	  height: 30px;
	  opacity: 1;
	}
	100% {
	  width: 300px;
	  height: 300px;
	  opacity: 0;
	}
  }



#form_errors{
	color:red;
	display:none;
}
#form_success{
	color:
	green;
	/* display:none; */
}

.grid_cols_7.no_grid_rows {
    display: block;
    border: 2px solid black;
    padding: 2%;
}

.elements_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    margin-bottom: 20px;
}

.no_grid_rows .square_state {
    margin-right: 8px;
}

.big_theme_title {
    text-align: center;
    font-family: 'Balsamiq Sans';
    color: #472602;
    font-size: 31px;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 15px;
}

.sub_theme_title {
    /* text-align: center; */
    font-family: 'Balsamiq Sans';
    font-size: 22px;
    color: black;
    display: inline-block;
    color: #472602;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
}

.sub_theme_title img {
    width: 120px;
}