/* 
  ##Device = Macbook 13inch
*/
@media  only screen and (max-width: 1440px) {
	
	.header .banner img{
		width: 350px;
	}
	
	.header .logo {
    	width: 90px;
    }
    
    
    .login-box {
	    padding: 60px;
	
	
	}
	
	.tree{
		width: 400px;
		right: 90px;
	}
	
	.globe{
		width: 160px;
	}
	
	.banner-intro {
    	width: 400px;
    }
    
    .text-intro{
	    font-size: 23px;
    }
    
    
    .button-intro button{
	    font-size: 23px;
		    padding: 15px;
    width: 180px;
}
	
	.action-container{
		top: 45%;
	}
	
	
	
	.globe img {
    	height: 300px;
    
    }

	
	.text-footer{
		font-size: 14px;	
	}
}

@media  only screen and (max-width: 1199px) {
	.main .globe img {
	    height: 280px;
	}
	
	@keyframes mymove2 {
	  0%   {
		  top: -280px;
		 transform: scale(0.5);
	}
	  100% {
		  top: -30px;
		  transform: scale(1);
		}
	}
	
	.tree {
	    width: 350px;
		right: 30px;
			bottom: -30px;
	}
}

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




/* 
  ##Device = Tablets, Ipads (portrait)
*/
@media only screen and (max-width:800px) and (orientation: portrait){
	.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: 380px;
		right: 30px;
		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"; }
}



/* 
  ##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: 767px) {
  	
  	
  	
}



/* 
  ##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;
	}
	
	
	body.clasament{
		overflow-y: auto;
	}
	
	html.clasament{
		overflow-y: auto;
	}
	
	
	
	
	#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;
	}
	
	.top_page{
		padding-top: 120px;
	}
	
	.tree {
	    width: 200px;
	    right: 30px;
	    bottom: -150px;
	}
	
	.tree-up{
		bottom: -10px;
	}	
		.globe{
			right: 20px;
			width: auto;
		}

.globe img {

    height: 170px;

}

	.text-footer {
	    padding: 0;
	    font-size: 14px;
	    line-height: 20px;
	}
	
	.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;
	}

}

@media only screen and (max-width: 375px) {
	.action-container {
	    position: relative;
	    transform: none;
	    padding-top: 20px;
	}
	
	.banner-intro {
    width: 300px;
    
   }
   
   
   .tree{
	 bottom: 130px;  
	}
   
   
   .text-intro {
	    font-size: 17px;
	}
	
	
	.button-intro button {
	    font-size: 18px;
	    padding: 8px;
	    width: 137px;
	}
	
	
	
	.tree {
	    width: 200px;
	    right: 20px;
	    bottom: -150px;
	}
	
	.tree-up{
		bottom: -50px;
	}
	
	
	
	
	
	
}

@media only screen and (max-width: 320px) {
	
	
	.action-container{
		padding-top: 10px;
	}
	
	
	.tree {
	    width: 180px;
	    right: 10px;
	    bottom: -150px;
	}
	
	.tree-up{
		bottom: -10px;
	}
	

}