body {	
	height: 1080px;
    width=100%;
  }
@media screen and (max-width: 629px) { /* put it here separately so that it does not affect the landscape layout */
  body {	
    background: url(bckgr-vertical.jpg);
    background-repeat: no-repeat;
    background-size: contain;
	background-color: #243A74;
  }
  #usr_data1 {	
    position: absolute;
	top: -10%;
	width: 100%;
  }	
/*#usr_data2,*/ #inp_area {	
    position: absolute;
	width: 100%;
  }  
  #mainp {
	//height: 1920px;
	width: 100%;
    /*background: url(bckgr-vertical.jpg);
    background-repeat: no-repeat;
    background-size: contain;*/
  }
}  
 

#texts {
	  font-family: verdana;
	  color: white;
	  font-size: 3vw;
	  text-align: center;
 }	
 #firsttext {
	  position: absolute;
      left: 5%;
	  //top: 22%;
	  top: 28vw;
	  width: 90%;  
 }
 #secondtext {
	  position: absolute;
      left: 37%;
	  //top: 39%;
	  top: 57vw;
	  width: 62%;
 }  
 #stores {
	 position: absolute;
	 width: 60%;
	 height: 65px;
     left: 35%;
	 //top: 30%;
	 top: 42vw;
  } 
  #gplay {
	float: right;
	/*width: 162px;
	height: 63px; */
	height: auto;
	width: 45%;	
  }	  
  #appstore {
	float: left;
	height: auto;
	width: 45%;	
  }
  #bottom {
	position: absolute;
	//top: 83%;  
	top: 120vw;
	height: 1200px;
	width: 100%;
  }
  #contactus { /* Bize Ulaşın title */
	position: absolute;
    left: 0%;	
	top: -5%;
	//transform: translateX(-50%);
	width: 50%;
    font-family: verdana;
	text-decoration: underline;
	color: white;
	font-size: 5vw;
  }	  
  #takvim { /* Bizi Takip Edin title */
	position: absolute;
    left: 0%;	
	top: 32%;
	width: 50%;
    font-family: verdana;
	text-decoration: underline;
	color: white;
	font-size: 5vw;
  }	
  #takip { /* Bizi Takip Edin title */
	position: absolute;
    left: 0%;	
	top: 46%;
	width: 50%;
    font-family: verdana;
	text-decoration: underline;
	color: white;
	font-size: 5vw;
  }	  
  #social {
	position: absolute;
    width: 25%;
	height: auto;
    left: 0%;
	top: 49%;
  }	  
  #portal {
	position: absolute;
    width: 65%;
	top: 33%;
	left: 42%;
  }	
  #prtl {
    width: 70%;
	height: auto;
	display: block;  /* these 3 lines center the image horisontally */
    margin-left: auto;
    margin-right: auto;
  }	
  #instagr {
    float: left;
	width: 45%;
	height: auto;
  }	
  #fb {
    float: right;
	width: 45%;
	height: auto;
  }  
  #inp_area {
    position: absolute;
	top: 10%;
  }	 
  #chckbx {
    position: absolute;
	font-family: verdana;
	color: white;
	font-size: 2.5vw;
	width: 100%;
	top: 20%;
  }
  a.aydinlatma {
    text-decoration: none;
	color: white;
  }	  
  #submit {
    position: absolute;
	top: 26%;
  }	
  .button {
    border: 1px solid white;
	border-radius: 6px;
	/*background-color: #243A74;
	color: white;*/
	background-color: white;
	color: #243A74;
  }	
  #cpr {
	position: absolute;
	top: 55%;
    //left: 6%;	
    font-family: verdana;
	color: white;
	font-size: 2vw;
  }	
  .input {
	width: 95%;
	border: 1px solid #8cb1ed;  
    border-radius: 8px;
	background-color: #2E447E/*2f5ca3*/;
	color: #eee;
	outline: none;
  }	  
  .txt1, .txt2 {
    width: 88%;
	border: none;
    border-bottom: 1px solid #8cb1ed;
	background-color: #243A74;
	color: #ccc;
	outline: none;
	border-radius: 0px;
  }	 
  .txt1 {
    background-image: url('icon-person.png');
    background-position: 5px 0px;
    background-repeat: no-repeat;
    padding-left: 30px;
  }	 
  .txt2 {
    background-image: url('Icon - Letter.png');
    background-position: 5px 0px;
    background-repeat: no-repeat;
    padding-left: 30px;
  }  
  #thankyou {
    position: absolute;
    width: 90%;
	height: 200px;
    left: 0%;
    top: 0%;
    font-family: verdana;
	color: white;
	font-size: 3.2vw	
  }	
  #hata {
    position: absolute;
    width: 90%;
	height: 200px;
    left: 0%;
    top: 0%;
    font-family: verdana;
	color: red;
	font-size: 3.2vw	
  }	

@media screen and (min-width: 630px) {
  body {	
    background: url(bckgr-landscape.jpg);
    background-repeat: no-repeat;
    background-size: contain;
	background-color: #243A74;
  }	
  #mainp {
	/*top: 15vw;
	height: 1080px;
	background: url(bckgr-landscape.jpg);
    background-repeat: no-repeat;
    background-size: contain;*/
  }
  #texts {
	  font-family: verdana;	  
	  color: white;
	  font-size: 1.5vw;
	  text-align: center;
  }	
  #firsttext {
	  position: absolute;
      left: 30%;
	  //top: 38%;
	  top: 20vw;
	  width: 70%;
	  //transform: translate(-0%, -100%);
  }
  #secondtext {
	  position: absolute;
      left: 35%;
	  //top: 61%;
	  top: 32vw;
	  width: 60%;
	  //transform: translate(-0%, -100%);
  }
  #stores {
	 position: absolute;
	 width: 40%;
	 height: 65px;
     left: 45%;
	 //top: 47%;
	 top: 25vw;
	 //transform: translate(-0%, -150%);
  } 
  #gplay {
	float: right;
	/*width: 162px;
	height: 63px; */
	height: auto;
	width: 40%;	
  }	  
  #appstore {
	float: left;
	height: auto;
	width: 40%;	
  }
  #bottom {
	position: absolute;
	width: 65%;
	height: 265px;
    left: 35%;
	//top: 80%;  
	top: 40.5vw;
  }	     
  #contactus {
	position: absolute;
    width: 40%;
    left: 2%;
    top: 36%;
    font-family: verdana;
	font-style: italic;
	text-decoration: none;
	color: white;
	font-size: 1vw;	
  }	  
  #takvim {
	position: absolute;
    width: 14%;
	//height: 110px;
    left: 1%;
    top: 2%;
	font-family: verdana;
	font-style: italic;
	text-decoration: none;
	color: white;
	font-size: 1vw;	
  }	   
  #social {
	position: absolute;
    width: 12%;
	height: 110px;
    left: 1%;
    top: 44%;
  }	  
  #portal {
	position: absolute;
    width: 17%;
	height: 200px;
    left: 17%;
    top: 10%;	
  }	
  #instagr {
    float: left;
	width: 48%;
	height: auto;
  }	
  #fb {
    float: right;
	width: 48%;
	height: auto;
  }  
  #prtl {
    width: 100%;
	height: auto;
  }	  
  #form {
    position: absolute;
    width: 60%;
	height: 200px;
    left: 40%;
    top: 0%;	
  }	  
  #thankyou {
    position: absolute;
    width: 60%;
	height: 200px;
    left: 40%;
    top: 10%;
    font-family: verdana;
	color: white;
	font-size: 1.2vw	
  }	
  #hata {
    position: absolute;
    width: 60%;
	height: 200px;
    left: 40%;
    top: 10%;
    font-family: verdana;
	color: red;
	font-size: 1.2vw	
  }
  #inp_area {
    position: absolute;
	top: 20%;
	left: 50%;
  }	  
  #chckbx {
    position: absolute;
	font-family: verdana;
	color: white;
	font-size: 0.75vw;
	width: 50%;
	top: 70%;
  }	  
  #submit {
    position: absolute;
	top: 80%;
	left: 50%;	
  }	
  .button {
    border: 1px solid white;
	border-radius: 6px;
	background-color: white;
	color: #243A74;
  }	  
  #takip { /* Hiding this text in landscape browsers */
	position: absolute;
    left: 55%;	
	top: 25%;
	width: 10%;
    font-family: verdana;
	color: #243A74;
	font-size: 0.1vw;
  }	  
  #cpr {
	position: absolute;
	top: 58%;
    left: -45%;	
    font-family: verdana;
	color: white;
	font-size: 0.75vw;
  }	 
  .input {
	border: 1px solid #8cb1ed;  
    border-radius: 8px;
	background-color: #2E447E/*2f5ca3*/;
	width: 100%;
  }	  
  .txt1, .txt2 {
    width: 40%;
	border: none;
    border-bottom: 1px solid #8cb1ed;
	background-color: #243A74;
	color: #ccc;
	outline: none;
  }	 
  #usr_data1, #usr_data2, {
	height: 100%;
	margin-top: -10px;
  }	     
}  

@media screen and (min-width: 1500px) {
	#bottom {
	position: absolute;
	width: 65%;
	height: 265px;
    left: 35%;
	top: 85%;  
  }	
}