@charset "UTF-8";
* { outline: none; }

html, body{
  height:100%;
}

@font-face {
    font-family: avenirNext;
    src: url('font/Avenir-Black.ttf');
}
@font-face {
    font-family: avenir;
    src: url('font/Avenir-Medium.ttf');
}

@font-face {
    font-family: avenirLight;
    src: url('font/Avenir-Light.ttf');
}

body {

	background:url(../images/bg.jpg);
	background-position:center top;
	margin:0px;
	padding:0px;
	font-family: avenirNext

}

.donate-mobile, .slogan-mobile, .left-girl, .right-girl { display:none; }

.logolar-container { width:100%;max-width:1200px;margin:0px auto;height:50px; }

.kanser-savascilari-logo { margin-left:120px;margin-top:85px;}

.elidor-logo { float:right; margin-top:95px; margin-right:110px}

.elidor-container { width:100%; max-width:475px; margin:0px auto; position:absolute; height: 100%; max-height:1080px;top:0px; bottom:0px; left: 0;  right: 0; margin-left: auto; margin-right: auto; z-index:2 }


.form-elidor{ position:absolute; max-width:475px;margin-left: auto;
margin-right: auto;
left: 0;
right: 0; top:390px;z-index:20}
.video-container { text-align:center; position:absolute; max-width:475px;margin-left: auto;
margin-right: auto;
left: 0;
right: 0;top:541px; z-index:20 }

.tweet { width:100%; padding:15px 20px; border:0px; font-size: 14px; height: 80px;  font-family:avenirLight}


.btn, .donate { cursor:pointer; z-index:10; }

.donate { margin-top:60px; z-index:10;}

textarea {
    resize: none;
}

.slogan { color: #ffe41d; font-size:30px; font-weight:400; letter-spacing:6px; text-align:center; font-family:avenir; background-color:#fd7986; margin-top:40px; }

.girls { font-size:27px; font-family: avenir; text-align:center; color:#fff; position:absolute; bottom:0px; top:596px; left:-380px; letter-spacing:8px; line-height:36px; }

.avenirbold { font-family: avenirNext }


.text { font-family: avenirLight; font-size:13px; color:#ffffff;margin:16px auto; line-height:28px;letter-spacing:1px; text-align:center; width:90%;background-color:#fd7986; }


.form-elidor { margin-bottom:12px; }

.mr-5 { margin-right: 5px!important; }
.ml-35 { margin-left: 35px!important; }
.mr-35 { margin-right: 35px!important; }


.video-js, .vjs-poster {
    background-color: #000!important;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loading.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

#videoBox.out {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 999;
  animation: an 0.5s;
}

#videoBox.in { animation: ac 1s; }



@media all and (max-width: 768px) {
	
	
	body { 
	  background: url(../images/bg-mobile.jpg) no-repeat; 
	}
	
	.girls, .donate { display: none }
	
	.elidor-container { margin-top:50px }
	.elidor-logo { margin-right:20px;margin-top:20px; }
	.kanser-savascilari-logo { margin-left:20px; margin-top:20px; width:60px}
	.slogan { font-size:20px;background:transparent }
	.text { width:70%; font-size:15px;background:transparent }
	
	#player { width:100% }
	
	.video-container { width:100%; top:440px; }
	
	.form-elidor { top:750px;  z-index:20}
	
	.donate-mobile { position:absolute; margin-left: auto; margin-right: auto; left: 0;  right: 0; top:900px; display:block; z-index:20  }
	.slogan-mobile { position:absolute; top:1320px; display:block; width:100%; color:#ffffff; font-size:30px; text-align:center; font-family:avenir; letter-spacing:8px }
	
	.left-girl { position:absolute; left:0px; top:385px;display:block }
	.right-girl { position:absolute; right:0px; top:241px;display:block }
	
}

@media all and (max-width: 640px) {
	
	
	body { 
	  background: url(../images/bg-mobile.jpg) top no-repeat; 
	}
	
	.donate-mobile { max-width:320px;top:850px  }
	.slogan-mobile { top:1220px; font-size:20px; letter-spacing:5px }
	
	.video-container { width:100%; top:440px;left:0px;right:0px }
	
	.form-elidor { top:750px; }
	.text { width:90%}
	
	
}

@media all and (max-width: 480px) {
	
	.video-container { width:100%; top:450px; }
	.tweet { width:90% }
	.text { width:90%}
	
	.left-girl { position:absolute; left:0px; top:355px;display:block; width:60px }
	.right-girl { position:absolute; right:-20px; top:241px;display:block }
	.form-elidor { top:700px; }
	
	
}

@media all and (max-width: 375px) {
	
	.video-container { width:100%; top:440px; }
	.left-girl { display:none; }
	.right-girl { display:none; }	
	.form-elidor { top:680px;width:90%s }
	
	
	
}

@media all and (max-width: 320px) {
	
	
	.video-container { top:430px }
	.text { width:90%; font-size:13px;  }
	.slogan { font-size:18px;letter-spacing:3px }
	.form-elidor { top:640px; }
	.donate-mobile { max-width:300px;top:800px  }
	.slogan-mobile { top:1170px; font-size:20px; letter-spacing:5px }
	
}