.initial{
    margin:0px;
}
.blur{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px); 
}

.ortala{
    display: inline-block;
    vertical-align: middle;
    color:white;
  }
    	
#idKaydol:hover, #idGiris:hover {
    color:white   ; /* was 13FF06; */ 
    border-color: white;  
    background-color: rgba(255,255,255,0.25);
}

/* mobile */
@media only screen and (max-width: 749px) 
{ 
   .containerAnim { 
	/* position: relative;
	width:100% !important;
	overflow:hidden; 
	border-bottom-color:red;
	background-color:silver; 
	margin-top: 0px;
	background-color:white;   
	max-height: 670px !important; */
        
        height: 676px; 
        background-image: url(images/bgr-slideAnimation.jpg);
        background-repeat: no-repeat;
	}

    #id1 {
        background-color: #1CA8DD;
        color: white;
        width: 94%;
        height: 50px;
        line-height: 50px;
        margin-left: 3%;
        text-align: center;
        position: absolute;
        font-size: 22px;
        text-align: center;
        vertical-align: middle;	
        
        /*will change*/        
        -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
    }	
    #id1.anim{
        top:90px;
    }
	
    #id2 {
        background-color: red;
        color: white;
        width: 94%;
        height: 50px;
        line-height: 50px;
        margin-left: 3%;
        text-align: center;
        position: absolute;
        font-size: 25px;
        text-align: center;
        vertical-align: middle;	
        /*will change*/        
        -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
    }	
    #id2.anim{
        top:160px;
    }
	
    #id3 {
        color: white;
        width: 94%;
        height: 50px;
        line-height: 50px;
        margin-left: 3%;
        text-align: center;
        position: absolute;
        font-size: 25px;
        letter-spacing: 0.71px;
        text-align: center;
        vertical-align: middle;	
        /*will change*/        
        -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;

    }	
    #id3.anim{
        top: 222px;
    }	 
	
    #idKaydol {
        border: 1px solid #eee;
        color: #eee;
    /*    background-color: rgba(0,0,0,0.1);    */
        border-radius: 5px;
        width: 46%;
        height: 45px;
        margin-left: 3%;
        line-height: 45px; 
        text-align: center;
        position: absolute;
        font-size: 16px;
        text-decoration: none;
        text-align: center;
        vertical-align: middle;	
        
        /*will change*/        
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:650px;
        opacity: 0;
    }	
    #idKaydol.anim{
        top:285px;
        opacity: 1;
    }	
    
    #idGiris {
        border: 1px solid #eee;
        color: #eee;
    /*    background-color: rgba(0,0,0,0.1);*/
        border-radius: 5px;
        width: 45%;
        height: 45px;
        line-height: 45px;
        left: 52%;
        text-align: center;
        position: absolute;
        font-size: 16px;
        text-decoration: none;
        text-align: center;
        vertical-align: middle;	
        
        /*will change*/        
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top: 650px;
        opacity: 0;
    }	
    #idGiris.anim{
        top: 285px;
        opacity: 1;
    }	
	
    #idLaptop{
        position: absolute; 
        top: 340px;
        height: 217px;
        
/*        will-change: transform, opacity;
        -webkit-transform: translateZ(0);*/
        
        /*transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);    !!!Örnek*/
        -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine orjinali, yani : cubic-bezier(0.39, 0.575, 0.565, 1) */
        right: -100%;
        opacity: 0;
    }    
    #idLaptop.anim{
       right: 3%;
       opacity: 1; 
    }
	
    #idCeptel{
        position: absolute;
        top: 362px;
        opacity: 1;
        width: 100px;
        margin-left: 3%; 
        
        -webkit-transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine orjinali, yani : cubic-bezier(0.39, 0.575, 0.565, 1) */
        left:-35%;
        opacity:0;
    }
    #idCeptel.anim{
        opacity: 1;
        left:0%	
    }
	
}

/* ipad portrait */
@media only screen and (min-width: 750px) and (max-width: 999px)
{ 
.containerAnim {
	position: relative;
	width:100% !important;
	overflow:hidden; 
	border-bottom-color:red;
	background-color:silver;
	height: 676px;
	margin-top: 0px;
	background-color:white;
	background-image:url('images/bgr-slideAnimation.jpg');
	background-repeat:no-repeat;

	/*		z-index:100;
z-index: 998; */
	/* max-height: 670px !important; */
	}

 
    #id1 {
        background-color:#1CA8DD;
        color:white;
        width: 350px;
        height: 60px;
        line-height:60px; /* span in dikey ortalanması icin height ile aynı olmalı */
        top: -60px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size:25px;
        text-align: center;
        vertical-align: middle;
        margin-left:5%;	
        
        /*will change*/        
        -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */        
        top:-50px;
	}
    #id1.anim{
        top:150px;
    }	
	
		
    #id2 {
        background-color:red;
        color:white;
        width: 350px;
        height: 60px;
        line-height:60px; /* span in dikey ortalanması icin height ile aynı olmalı */
        top:-60px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size:29px;	
        text-align: center;
        vertical-align: middle;
        margin-left:5%;
        
        /*will change*/        
        -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
	}
    #id2.anim{
        top:240px;
    }
	
    #id3 {
        color:white;
        width: 350px;
        height: 60px;
        line-height:60px; /* span in dikey ortalanması icin height ile aynı olmalı */
        top:670px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size:30px;	
        text-align: center;
        vertical-align: middle;
        margin-left:5%;
        
        /*will change*/        
        -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
	}
    #id3.anim{
        top: 320px;
    }	 
	
    #idKaydol {
        border: 1px solid #eee;
        border-radius: 5px;
        color: #eee;
        width: 165px;
        height: 50px;
        line-height: 50px; /* span in dikey ortalanması icin height ile aynı olmalı */;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size: 16px;
        text-decoration:none;
        text-align: center;
        vertical-align: middle;
        margin-left:5%;	
        
        /*will change*/        
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:650px;
        opacity: 0;
	}
    #idKaydol.anim{
        top:410px;
        opacity: 1;
    }	
	
    #idGiris {
        border: 1px solid #eee;
        border-radius: 5px;
        color: #eee;
        width: 165px;
        height: 50px;
        line-height: 50px; /* span in dikey ortalanması icin height ile aynı olmalı */;
        left: 185px;
        text-align: center;
        position: absolute;
        font-size: 16px;
        text-decoration:none;
        text-align: center;
        vertical-align: middle;
        margin-left:4%;
        
        /*will change*/        
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:650px;
        opacity: 0;
	}
    #idGiris.anim{
        top: 410px;
        opacity: 1;
    }	
	
    #idLaptop{
        position:absolute;
        top:264px; 
        opacity:0;
        right:-5%;  /* to %9 */
        width:522px; /*added for ipad portraid */
        margin-left:7%;
        
        -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine orjinali, yani : cubic-bezier(0.39, 0.575, 0.565, 1) */
        right: -100%;
        opacity: 0;
	}
    #idLaptop.anim{
       right: 8%;
       opacity: 1; 
    }
	
    #idCeptel{
        position:absolute;
        top:345px;  
        opacity:0;	
        width: 115px ;
        margin-left:7%;
        
        -webkit-transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine orjinali, yani : cubic-bezier(0.39, 0.575, 0.565, 1) */
        right:-7%;  
        opacity:0;

	}
    #idCeptel.anim{
        opacity: 1;
        right: 2%;
    }
}


/* ipad landscape and bigger 768 */
@media only screen and (min-width: 1000px)   
{ 
.containerAnim {

	position: relative;
	width:100% !important;
	overflow:hidden; 
	border-bottom-color:red;
	background-color:silver;
	height: 676px;
	margin-top: 0px;
/*	z-index:100;*/
	background-color:white;
	background-image:url('images/bgr-slideAnimation.jpg');
	background-repeat:no-repeat;

	/*	z-index: 998; */
	/* max-height: 670px !important; */
	}


    #id1 {
        background-color:#1CA8DD;
        color:white;
        width: 370px;
        height: 60px;
        line-height:60px; /* span in dikey ortalanması icin height ile aynı olmalı */
        top: -60px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size:25px;
        text-align: center;
        vertical-align: middle;
        margin-left:7%;
        
        /*will change*/        
        -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
	}
    #id1.anim{
        top:150px;
    }	
		
    #id2 {
        background-color:red;
        color:white;
        width: 370px;
        height: 60px;
        line-height:60px; /* span in dikey ortalanması icin height ile aynı olmalı */
        top:-60px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size:30px;	
        text-align: center;
        vertical-align: middle;
        margin-left:7%;
        
        /*will change*/        
        -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
	}
    #id2.anim{
        top:240px;
    }
	
    #id3 {
        color:white;
        width: 370px;
        height: 60px;
        line-height:60px; /* span in dikey ortalanması icin height ile aynı olmalı */
        top:670px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size:27px;	
        text-align: center;
        vertical-align: middle;
        margin-left:7%;
        
        /*will change*/        
        -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:-50px;
	}
    #id3.anim{
        top: 320px;
    }	
	
    #idKaydol {
        border: 1px solid #eee;
        border-radius: 5px;
        color: #eee;
        width: 175px;
        height: 50px;
        line-height: 50px; /* span in dikey ortalanması icin height ile aynı olmalı */;
        top: 700px;
        left: 0px;
        text-align: center;
        position: absolute;
        font-size: 18px;
        text-decoration:none;
        text-align: center;
        vertical-align: middle;
        margin-left:7%;
        
        /*will change*/        
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:650px;
        opacity: 0;
	}
    #idKaydol.anim{
        top:410px;
        opacity: 1;
    }
	
    #idGiris {
        border: 1px solid #eee;
        border-radius: 5px;
        color: #eee;
        width: 175px;
        height: 50px;
        line-height: 50px; /* span in dikey ortalanması icin height ile aynı olmalı */;
        top: 700px;
        left: 190px;
        text-align: center;
        position: absolute;
        font-size: 18px;
        text-decoration:none;
        text-align: center;
        vertical-align: middle;
        margin-left:7%;
        
        /*will change*/        
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        top:650px;
        opacity: 0;
	}
    #idGiris.anim{
        top: 410px;
        opacity: 1;
    }	
	
    #idLaptop{
        position:absolute;
        top:170px;
        opacity:0;
        right:0%;
        width:689px;
        height:399px;
        
        -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine orjinali, yani : cubic-bezier(0.39, 0.575, 0.565, 1) */
        right: -100%;
        opacity: 0;
	}
    #idLaptop.anim{
       right: 8%;
       opacity: 1; 
    }

    #idCeptel{
        position:absolute;
        top:280px;
        right:0%;
        opacity:0;	
        width:135px;
        height:281px;
        
        -webkit-transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine orjinali, yani : cubic-bezier(0.39, 0.575, 0.565, 1) */
        right:-7%;  
        opacity:0;

	}
    #idCeptel.anim{
        opacity: 1;
        right: 2%;
    }
	
}