/* 
  ##Device = Macbook 13inch
*/
@media  only screen and (max-width: 1440px) {
	
	.header .banner img{
		width: 350px;
	}
	
	.header .logo {
    	width: 90px;
    }
    
    
    .login-box {
	    padding: 60px;
	
	
	}
	
	
	
	.globe{
		width: 160px;
	}
	
	.banner-intro {
    	width: 400px;
    }
	
	.tree-up {
	  bottom: -100px;
	}
	
    .button-intro button{
	   font-size: 22px;
	   padding: 10px;
	   width: 160px;
}
	
	
	
	
	.globe img {
    	height: 300px;
    
    }

	
	.text-footer{
		font-size: 14px;	
	}
	
	.case {
	  bottom: -50px;
	 }
	 
	 .case img{
		 width: 130%;
	 }
}

@media  only screen and (max-width: 1280px) {
	
	
	.main .globe img {
	    height: 280px;
	}
	
	@keyframes mymove2 {
	  0%   {
		  top: -280px;
		 transform: scale(0.5);
	}
	  100% {
		  top: -30px;
		  transform: scale(1);
		}
	}
	
	
	
	
	.tree {
		width: 470px;
	}
		
		.text-intro{
			font-size: 18px;
		}
		.intro-title{
			font-size: 90px;
		}
		.sun {
		  width: 770px;
		  
		 }
		 
		 
		 .logo-dtse-title, .logo-dtse {
		   position: absolute;
		   top: 50px;
		   height: 30px;
		   z-index: 2;
		 }
		 
		 
		 .button-intro button {
		 font-size: 16px;
		 
	 }
	 
	 .text-intro {
		 font-size: 18px;
	   }
	   
	   
	  
		
		.button-intro {
		  margin-top: 10px;
		}
		
		.text-footer {
			font-size: 12px;
			line-height: 15px;
			box-sizing: border-box;
		  }
		  
		  
		  .case {
			bottom: -30px;
		}
		
		.mos-craciun {
		  width: 600px;
	  }
		
}

@media  only screen and (max-width: 991px) {
	.main .globe  {
	   display: none;
	}
	
	
}




/* 
  ##Device = Tablets, Ipads (portrait)
*/
@media only screen and (max-width:800px) {
	.hide-mobile{
		display: none;
	}
	
	.hide-desktop{
		display: inherit;
	}
	
	.container{
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	
	.q-title br{
		
	}
	
	.listare-block{
		width: 50%;
	}
	
	.listare-block:last-child {
	    width: 100%;
	}
	
	.header .banner img {
	    width: 300px;
	}
	
	/* .action-container{
	  	position: relative;
	  	transform: none;
	  	padding-top: 100px;
  	}
  	 */
  	.logo-intro {
    width: 100px;
    }
    
    .banner-intro {
	    width: 350px;
	    margin-top: 0;
	}
	
	
	.text-intro {
	    font-size: 20px;
	}
	
	.button-intro button {
	    font-size: 21px;
	    padding: 10px;
	    width: 150px;
	}
	
	.tree {
	    width: 270px;
		bottom: -400px;
	}
	.tree-up {
	    bottom: -30px;
	}
	
	.wave img{
		width: 220%;
	}
	
	
	/* Force table to not be like tables anymore */
	#tabel_top , #tabel_top  thead, #tabel_top  tbody, #tabel_top  th, #tabel_top  td, #tabel_top  tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#tabel_top thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#tabel_top tr { border: 1px solid #ccc; }
	
	
	#tabel_top td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 60px; 
	}
	
	#tabel_top td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 50%;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		transform: translateY(-50%);
	}
	
	/*
	Label the data
	*/
	#tabel_top td:nth-of-type(1):before { content: "Loc"; }
	#tabel_top td:nth-of-type(2):before { content: "Email"; }
	#tabel_top td:nth-of-type(3):before { content: "Scor"; }
	
	
	
	
	.logo-dtse {
	  left: 50px;
	}
	
	.logo-dtse-title {
	  right: 50px;
	}
	
	.case {
		bottom: 0;
	  }
	  
	  
	 .intro-title{
		 top: 120px;
	 }
	  
	  
	  
	  .sun {
		  width: 700px;
		}
		
		.tree {
		width: 350px;
		
	}
	
	
	.action-container {
		bottom: 330px;
	  }
	  
	  .tree-up {
		  bottom: -50px;
		}
		
		
		.text-intro {
			font-size: 18px;
		  }
		  
		  
	.button-intro button {
		font-size: 18px;
		padding: 10px;
		width: 140px;
	  }
	  
	 .login-box-bg{
		height: 100vh;	 
	 }
	 
	 .intro{
		min-height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
		 min-height: calc(var(--vh, 1vh) * 100);
		 
	 }
	 
	 .container-intro{
		height: 100vh;
		min-height: calc(var(--vh, 1vh) * 100);	 
	 }
	 
	 video{
		height: 100vh;	 
	 }
	 
	 body,html{
		min-height: 100vh;	 
	 }
	 
	 .intro-title{
		 top: 140px;
	 }
	 
	  
}



/* 
  ##Device = Tablets, Ipads (landscape)
  
*/
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  		
}



/* 
  ##Device = Low Resolution Tablets, Mobiles 
*/
@media only screen and (max-width: 700px) {
  	
  	.intro-title {
		width: 100%;
		text-align: center;  
	  }
	  
	 
	 .sun {
		 width: 100%;
	   }
	   
	 .tree {
		 width: 60%;
	   }
	   
	 .action-container {
		 bottom: 50%;
		 width: 100%;
	   }
	   
	   
	  .intro-title {
		  top: inherit;
		  bottom: 65%;
		}
		
	 .text-intro {
		 font-size: 21px;
		 color: #fff;
	   }
	   
	.button-intro button {
		font-size: 18px;
		padding: 10px;
		width: 180px;
		
		background: #fff;
		color: #E21474;
	  }
	  
  	.case {
		bottom: 30px;
	  }
}



/* 
  ##Device = Most of the Smartphones Mobiles 
*/
@media only screen and (max-width: 480px) {
	
	
	
	.intro{
		height: calc(var(--vh, 1vh) * 100);
		overflow: hidden;
		position: relative;
	}
	
	body,html{
		overflow: hidden;
	}
	
	html.game, html.game body{
		overflow-y: auto;
		min-height: auto;
	}
	body.game{
		overflow-y: auto;
		min-height: auto;
	}
	
	body.clasament{
		overflow-y: auto;
	}
	
	html.clasament{
		overflow-y: auto;
	}
	
	.tree {
		width: 75%;
	  }
	  
	  
	
	
	#game_navigation .welcome .sal{
		width: 100%;
		display: inline-block;
	}
	
	
	#game_navigation .welcome .score{
		width: 100%;
		display: inline-block;
		text-align: left;
	}
	
	
	#game_navigation .welcome .nav{
		width: 100%;
		display: inline-block;
		text-align: left;
		margin-top: 10px;
	}
	
	#game_navigation{
		height: 90px;
	}
	
	#iframe_joc{
		margin-top: 90px;
		height: calc(100vh - 220px);
	}
	
	.top_page{
		padding-top: 120px;
	}
	
	
	
	.sun {
		width: 110%;
	  }
		.globe{
			right: 20px;
			width: auto;
		}

.globe img {

    height: 170px;

}

	.text-footer {
	    padding: 0;
	    font-size: 14px;
	    line-height: 20px;
		padding: 5px;
	}
	
	.tree-up {
		bottom: -30px;
	  }
	
	.wave img {
	    width: 220%;
	    display: block;
	}
	.wave-mobile{
		display: block;
		background: #fff;
		height: 80px;
	}
	
	.footer{
		bottom: 0;
	}
	
	.login-box{
		width: 100%;
	}
	.header .banner img {
	    width: 230px;
	}
	
	.header .logo {
	    width: 60px;
	}
	
/*
	.q-title{
		font-size: 16px;
		line-height: 22px;
	}
*/

	.q-title .r1,
	.q-title .r2{
		display: block;
	}
	
	.q-title .r1{
		font-size: 16px;
		line-height: 18px;
		background: none;
		border: 2px solid #E20074;
		color: #E20074;
	}
	
	.q-title .r2{
		font-size: 13px;
		line-height: 16px;
		background: none;
		border: 2px solid #fff;
		color: #fff;
	}
	
	.login-box.answer {
		padding: 40px;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	
	.login-box.answer .title{
		font-size: 30px;
	}
	
	.login-box .sub-title{
		font-size: 16px;
	}
	
	.login-box {
	    padding: 40px;
	}
	
	.login-box .input-button input{
		width: 100%;
	}
	
	.login-box .title {
		font-size: 40px;	
	}
	
	.video-container video{
		left: 90%;
	}
	
	.header .logo{
		position: relative;
		width: 90px;
		margin: 0 auto;
	}
	
	.header .banner img {
	    width: 90%;
	}
	
	.main-page {
	    padding-top: 30px;
	}
	
	.products-body{
		margin-top: 30px;
	}
	.login-box{
		width: 95%;
	}
	
	
	.action-container{
		padding-top: 40px;
	}	
	
	.footer {
	    bottom: -40px;
	    left: -60px;
	}
	
	
	
	.banner-intro {
	    width: 320px;
	    margin-top: 0;
	}
	
	
	.text-intro {
	    font-size: 18px;
	}
	
	.intro-title {
		top: inherit;
		bottom: 70%;
	  }
	  
	 .action-container {
	 bottom: 56%;
	 padding: 0;
 }
 
 
 	body, html {
	overflow-y: auto;	 
	min-height: auto;
	 }
	 
	 .sun-up {
	   bottom: -40px;
	 }
	 
}

@media only screen and (max-width: 375px) {

	
	.banner-intro {
    width: 300px;
    
   }
   
   
   
   
   .text-intro {
	    font-size: 17px;
	}
	
	
	.button-intro button {
	    font-size: 18px;
	    padding: 8px;
	    width: 137px;
	}
	
	
	.sun {
		width: 130%;
	  }

	
	.intro-title {
		top: inherit;
		bottom: 70%;
	  }
	  
	  
	  .action-container {
	  bottom: 57%;
	  padding: 0;
	  
  }
  
  .text-footer {
  padding: 5px;
  font-size: 12px;
  }
	.tree-up{
		bottom: 0px;
	}
	
	
	.intro-title {
		font-size: 70px;
	  }
	
	
	
	
	
}

@media only screen and (max-width: 320px) {
	
	
	
	
	

}