@charset "UTF-8";


body { width: 100%; height: 100%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

::selection { background: transparent; color: #ccc;}
::-moz-selection { background: transparent; color: #ddd; }

#wrapper { width: 100%; height: 100%; overflow: hidden; }

#one, #two, #three, #four, #five { width: 100%; height: 1000px; position: relative; overflow: hidden; }

#one { background: url(../images/bg1.jpg) #000000 no-repeat center; height: 725px; }
#two { background: url(../images/renk8.png) #E5E5E5 no-repeat left; }
#three { background: url(../images/bg2.jpg) #aa756d no-repeat center; height: 725px; }
#four { background: url(../images/bg3.jpg) #e2e2e2 no-repeat center; height: 725px; }
#five { background-color: #bcbcbc; height: 850px; }

a { text-decoration: none; color: #3a3a3a; }
a:hover { color: #f58812; }

.transition { 
-webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
	 -o-transition: all 0.1s ease-in-out;
		transition: all 0.1s ease-in-out;
}

.totop { position: absolute; right: 20px; bottom: 20px; width: 50px; height: 50px; }
.totop:hover { cursor: pointer; }

/* MENU */

#nav { width: 100%; height: 60px; position: fixed; margin: auto; top: 5%; z-index: 1010; }

.menu01 {
	width: 200px;
	height: 60px;
	position: relative;
	float: left;
	background-image: url(../images/ozone_logo.png);
}
.menu02, .menu03, .menu04, .menu05, .menu06 { width: 150px; height: 60px; position: relative; float: left; cursor: pointer; }
.menu01 { background: url('../images/ozone_logo.png') 50% no-repeat; background-color: #3a3a3a; }
.menu02 { background-color: #4D4D4D; }
.menu03 { background-color: #595959; }
.menu04 { background-color: #666666; }
.menu05 { background-color: #737373;}
.menu06 { background-color: #808080;}
.menu07 { background:#000;}
.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p  { font-size: 18px; font-weight: 400; color: white; text-transform: uppercase; margin-left: 40px; margin-top: 21px; }

.menu07 p { font-size: 18px; font-weight: 400; color: black; texts-transform: uppercase; margin-right: 20px; margin-top: 21px; text-align: right; }
 
.menu02:hover, .menu03:hover, .menu04:hover, .menu05:hover, .menu06:hover{ background-color: #e67d0b; }
.menu02:hover p, .menu03:hover p, .menu04:hover p, .menu05:hover p, .menu06:hover p{ color: #FFF; margin-left: 45px; }

/* BONES */

#anotherheader { width: 100%; height: 125px; background-color:#999 ; }
.arrow-left, .arrow-right { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #999; }
.arrow-left { left: 10%; top: 125px; position: absolute; }
.arrow-right { right: 10%; top: 125px; position: absolute; }

.subtitle-left { margin-left: 5%; top: 55px; position: relative; text-align: left; }
.subtitle-right { margin-right: 5%; top: 55px; position: relative; text-align: right; }

h2 { font-size: 54px; font-weight: 600; color: white; text-transform: uppercase; }
h3 { font-size: 32px; font-weight: 400; color: white; text-transform: uppercase; }
h4 { font-size: 42px; font-weight: 600; color: #222222; text-transform: uppercase; }
h5 { font-size: 24px; font-weight: 400; color: #333333; padding-top: 5px; padding-left: 5px; line-height: 28px; }
h6 { font-size: 24px; font-weight: 600; color: white; text-transform: uppercase; text-align: right; margin-top: 30px; }
.getnotified p { font-size: 15px; font-weight: 400; color: white; text-align: right; line-height: 20px; margin-top: 15px; margin-bottom: 30px; }

/* INTRO */

.intro { float: right; position: relative; margin-right: 10%; margin-top: 300px; }
.intro p { font-size: 50px; font-weight: 500; line-height: 62px; text-transform: uppercase; text-align: center; color: white; padding: 50px 0 20px 0; }

#whipit { width: 90px; height: 120px; background: red; position: absolute; left: 50%; margin-left: -180px; top: 50%; margin-top: 0px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

/* */

#downloaddesktop { position: relative; }
#desktop { float: left; width: 890px; position: relative; top: 100px; margin-left: -300px; }
#getdesktop { float: left; position: relative; margin-top: 40px; margin-left: 20px;}
#getdesktop4 { float: left; position: relative; margin-top: -40px; margin-left: 20px;}
#urunler { float: left; position: relative; margin-left: 0;}
#getwindows, #getapple { float: left; position: relative; width: 100%; padding-top: 10px; }
#getwindows p, #getapple p { font-size: 20px; font-weight: 600; text-transform: uppercase; padding: 20px 0; }
#getwindows p a, #getapple p a { color: #f58812; }
#getwindows p a:hover, #getapple p a:hover { color: #3a3a3a; }
#getwindows { margin-left: -30px; }
#sol{width: 240px; float:left; padding-top: 10px;}
#sag{width: 950px; padding-top:10px;}

/* GO MOBILE */

#mobile { float: right; width: 750px; position: relative; top: 150px; margin-right: -120px; }
#getmobile { float: left; position: relative; margin-top: 250px; margin-left: 100px; width: 500px; }
#getandroid { margin-top: 20px; }


/* SHOUTCAST */

/*
table { width: 60%; margin: auto; position: relative; top: 100px;}
thead {line-height: 50px; }
thead tr td { font-weight: 600; color: #f58812; text-transform: uppercase; max-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
tbody tr td { font-weight: 400; color: #3a3a3a; vertical-align: middle; max-width: 0; text-overflow: ellipsis; overflow: hidden; }
*/

.icon { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);}
.icon:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}

#morestations { position: relative; top: 150px; text-align: center; }
#morestations .btn-sc { background-color: #f58812; border: 0; font-size: 13px; font-weight: 600; color: white; text-transform: uppercase; border-radius: 2px; width: 180px; height: 43px;  }
#morestations .btn-sc:hover { background-color: #e67d0b; cursor: pointer; padding-left: 15px; }

/* MORE INFO */

#moreinfo { float: right; position: relative; margin-right: 130px; margin-top: 80px; text-align: right; }
.sep { width: 400px; height: 1px; background: white; }

form { display:inline; }
input[type="email"], input.email { font-size: 12px; color: #3a3a3a; height: 28px; width: 160px; padding: 0 10px; border: 0; border-radius: 3px; text-align: right; border-bottom: 1px solid white; margin-bottom: 30px; vertical-align: top; }
input[type="email"]:focus, input.email:focus { outline: none; }
/*
input[type="submit"] { background: url('../images/icon-send.png') no-repeat; background-color: #f58812; height: 29px; width: 30px; border: 0; margin-left: 10px; border-radius: 3px; padding-bottom: 11px; vertical-align: top; color: transparent; }
input[type="submit"]:hover { background-color: #e67d0b; cursor: pointer; }
*/
.sent { background: url('../images/icon-sent.png') 50% !important; background-color: #57a800 !important; height: 29px; width: 30px; border: 0; margin-left: 10px; border-radius: 3px; padding-bottom: 11px; }

.forum { font-size: 22px; color: white; text-transform: uppercase; line-height: 28px; margin-top: 50px; }
p.forum a { border-bottom: 1px dashed #3a3a3a; padding-bottom: 3px; }
p.forum a:hover { border-bottom: 1px dashed #fff; padding-bottom: 3px; }

.social { margin-top: 50px; }

.bottom { left: 50%; margin-left: -100px; position: relative; top: 520px; }

/* MODAL */
.button { font-family:Tahoma; font-weight:bold; color:#444; font-size:9pt; border: 0; background:#DDD; padding:5px; border-radius:3px;}
.button:hover { background:#666; color:#FFF;}
#download-lang { display:none; }
#lang { width: 100%; margin-top: 50px; }
button[type="submit"] { width: 100%; height: 50px; background-color: #f58812; border: 0; margin-top: 10px; font-size: 20px; font-weight: 600; color: white; text-transform: uppercase; border-radius: 2px; }
button[type="submit"]:hover { background-color: #e67d0b; padding-left: 15px; cursor: pointer; }

#simplemodal-overlay { background-color: #3a3a3a; }

#simplemodal-container { height: 165px; width: 300px; color: #f1f1f1; background-color: #3a3a3a; border-radius: 3px; padding:12px; }
#simplemodal-container .simplemodal-data { padding: 8px; }
#simplemodal-container a { color: #f1f1f1; }
#simplemodal-container a.modalCloseImg { background: url('../images/close.png') no-repeat; width: 25px; height: 29px; display: inline; z-index: 3200; position: absolute; top: 10px; right: 10px; cursor: pointer; }
#simplemodal-container h3 { font-size: 20px; margin-top: -3px; }


#fiko{
	width: 65%;
	margin:auto;
	position:relative;
	top:100px;
}


/* QUERIES */

@media only screen and (min-width: 1601px) and (max-width: 1920px) {
	.intro { margin-right: 17%; }
	#desktop { margin-left: -200px; }
	#getdesktop { margin-left: 200px; }
	#mobile { margin-right: -80px; }
	#getmobile { margin-left: 300px; }
	
}

@media only screen and (min-width: 1367px) and (max-width: 1600px) {		
	#desktop { margin-left: -220px; }
	#getdesktop { margin-left: 150px; }
	#getmobile { margin-left: 200px; }
}

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
	#getdesktop { margin-left: 50px; }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
	
	#desktop { margin-left: -400px; }

	#mobile { margin-right: -290px; }
	#getmobile { margin-left: 40px; }	
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {

	.menu02, .menu03, .menu04, .menu05, .menu06 { width: 150px; }
	.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p  { margin-left: 17px; }
	.menu02:hover p, .menu03:hover p, .menu04:hover p { margin-left: 30px; }
	
	.intro { margin-right: 5%; }
	#desktop { margin-left: -400px; }
	#mobile { margin-right: -290px; }
	#getmobile { margin-left: 40px; }
	thead tr td, tbody tr td { padding-left: 0; }
	#moreinfo { margin-right: 70px; }
		
	#desktop { float: none; margin-top: 180px; position: absolute; left: 50%; margin-left: -435px; }
	#getdesktop { float: none; text-align: center; }
	#getwindows, #getapple { padding-top: 50px; display: inline-block; float: none; }
	
	#mobile { float: none; margin-top: 250px; position: absolute; left: 50%; margin-left: -375px; margin-top: 510px; }
	#getmobile { float: none; text-align: center; margin: auto; margin-top: 120px; width: 90%; }
	#getandroid { margin-top: 50px; }		
}

@media only screen and (min-width: 603px) and (max-width: 768px) {
	
	.subtitle-left, .subtitle-right { margin: auto; text-align: center; }
	h2 { font-size: 44px; text-align: center; }
	h3 { text-align: center; }
	.arrow-left { left: 50%; margin-left: -20px; }
	.arrow-right { right: 50%; margin-right: -20px; }
	
	#one { background: url(../images/bg1.jpg) #000000 no-repeat 20% center; }
	
	.menu02, .menu03, .menu04, .menu05, .menu06 { width: 150px; }
	.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p { margin-left: 17px; }
	.menu02:hover p, .menu03:hover p, .menu04:hover p { margin-left: 30px; }
	
	.intro { float: none; text-align: center; margin-right: 0; margin-top: 310px; }
	
	#desktop { float: none; margin-top: 180px; position: absolute; left: 50%; margin-left: -435px; }
	#getdesktop { float: none; text-align: center; margin-top: 170px; }
	#getwindows, #getapple { padding-top: 50px; display: inline-block; float: none; }
	
	#mobile { float: none; margin-top: 180px; position: absolute; left: 50%; margin-left: -375px; margin-top: 510px; }
	#getmobile { float: none; text-align: center; margin: auto; margin-top: 120px; width: 90%; }
	#getandroid { margin-top: 50px; }
	
	thead tr td, tbody tr td { padding: 0; }
	
	#moreinfo { float: none; margin-right: auto; }
	#moreinfo, h6, .getnotified p { text-align: center; }
	.sep { width: 330px; margin: auto; }
	.bottom { top: 60px; }
	
}

@media only screen and (min-width: 536px) and (max-width: 602px) {
	
	#whipit { display: none; }
	
	.subtitle-left, .subtitle-right { margin: auto; text-align: center; }
	h2 { font-size: 44px; text-align: center; }
	h3 { text-align: center; }
	.arrow-left { left: 50%; margin-left: -20px; }
	.arrow-right { right: 50%; margin-right: -20px; }
	
	#one { background: url(../images/bg1.jpg) #000000 no-repeat 20% center; }
	
	.menu01 { width: 100%; }
	.menu02, .menu03, .menu04, .menu05, .menu06 { width: 160px; }
	.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p { margin-left: 25px; }
	.menu02:hover p, .menu03:hover p, .menu04:hover p { margin-left: 30px; }
	
	.intro { float: none; text-align: center; margin-right: 0; margin-top: 310px; }
	
	#desktop { float: none; margin-top: 180px; position: absolute; left: 50%; margin-left: -435px; }
	#getdesktop { float: none; text-align: center; margin-top: 120px; }
	#getwindows, #getapple { padding-top: 50px; display: inline-block; float: none; }
	
	#mobile { float: none; position: absolute; left: 50%; margin-left: -375px; margin-top: 510px; }
	#getmobile { float: none; text-align: center; margin: auto; margin-top: 120px; width: 90%; }
	#getandroid { margin-top: 50px; }
	
	thead tr td, tbody tr td { padding: 0; }
	
	#moreinfo { float: none; margin-right: auto; }
	#moreinfo, h6, .getnotified p { text-align: center; }
	.sep { width: 330px; margin: auto; }
	.bottom { top: 60px; }
		
}

@media only screen and (min-width: 536px) and (max-width: 624px) {
	
	#nav { width: 100%; top: 0; }
	.menu01 { width: 100%; }
	.menu02, .menu03, .menu04, .menu05, .menu06 { width: 100%; height: 60px; cursor: pointer; }
	.menu02 p, .menu03 p, .menu04 p { margin-top: 22px; }
	
	#one { background: url(../images/bg1.jpg) #000000 no-repeat 25% bottom; height: 950px; }

}


@media only screen and (min-width: 321px) and (max-width: 535px) {
	
	#whipit { display: none; }
	
	#nav { width: 100%; top: 0; }
	.menu01 { width: 100%; }
	.menu02, .menu03, .menu04, .menu05, .menu06 { width: 100%; height: 45px; cursor: pointer; }
	.menu02 p, .menu03 p, .menu04 p { margin-top: 22px; }
	
	#one { background: url(../images/bg1.jpg) #000000 no-repeat 25% bottom; height: 950px; }
	#five { background-color: #bcbcbc 40% bottom; height: 950px; }
	
	#subheader { height: 180px; }
	.subtitle-left, .subtitle-right { margin: auto; text-align: center; }
	h2 { font-size: 22px; text-align: center; }
	h3 { font-size: 20px; text-align: center; padding-top: 20px; }
	h4 { font-size: 26px; }
	h5 { font-size: 18px; padding-top: 20px; }
	.arrow-left { left: 50%; margin-left: -20px; }
	.arrow-right { right: 50%; margin-right: -20px; }
	
	.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p { margin-left: 25px; }
	.menu02:hover p, .menu03:hover p, .menu04:hover p { margin-left: 30px; }
	
	.intro { float: none; text-align: center; margin-right: 0; margin-top: 310px; }
	.intro p { font-size: 46px; }
	.intro > img { width: 350px; }
	
	#desktop { float: none; margin-top: 180px; position: absolute; left: 50%; margin-left: -435px; }
	#getdesktop { float: none; text-align: center; margin-top: 120px; }
	#getwindows, #getapple { padding-top: 50px; display: inline-block; float: none; width: 120px; }
	
	#mobile { float: none; margin-top: 410px; position: absolute; left: 50%; margin-left: -375px; }
	#getmobile { float: none; text-align: center; margin: auto; margin-top: 80px; width: 90%; }
	#getandroid { margin-top: 50px; }
	
	thead tr td, tbody tr td { padding: 0; font-size: 13px; }
	.icon { opacity: 0; }
	
	#moreinfo { float: none; margin-right: auto; }
	#moreinfo, h6, .getnotified p { text-align: center; background:#000; }
	.forum { font-size: 20px; }
	.sep { width: 330px; margin: auto; }
	.bottom { top: 60px; }
	
	.totop { display: none !important; }	

}

@media only screen and (max-width: 320px) {
	
	#whipit { display: none; }
	
	#nav { width: 100%; top: 0; }
	.menu01 { width: 100%; }
	.menu02, .menu03, .menu04, .menu05, .menu06 { width: 100%; height: 40px; }
	.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p { margin-top: 11px; }
	
	#one { background: url(../images/bg1.jpg) #000000 no-repeat 25% bottom; height: 950px; }
	#two { background: url(../images/renk8.png) #E5E5E5 no-repeat 25% bottom; height: 950px; }
	#five { background-color:#bcbcbc 40% bottom; height:950px; }
	
	#subheader { height: 180px; }
	.subtitle-left, .subtitle-right { margin: auto; text-align: center; }
	h2 { font-size: 22px; text-align: center; }
	h3 { font-size: 20px; text-align: center; padding-top: 20px; }
	h4 { font-size: 26px; }
	h5 { font-size: 18px; padding-top: 10px; }
	.arrow-left { left: 50%; margin-left: -20px;}
	.arrow-right { right: 50%; margin-right: -20px; }
	
	.menu02 p, .menu03 p, .menu04 p, .menu05 p, .menu06 p { margin-left: 25px; }
	.menu02:hover p, .menu03:hover p, .menu04:hover p { margin-left: 30px; }
	
	.intro { float: none; text-align: center; margin-right: 0;}
	.intro p { font-size: 40px; }
	.intro > img { width: 325px; }
	
	#desktop { float: none; margin-top: 180px; position: absolute; left: 50%; margin-left: -435px; }
	#getdesktop  { float: none; text-align: center; margin-top: 150px; }
	#getdesktop2 { float: none; text-align: center; margin-top: 50px; }
	#getdesktop3 { float: none; text-align: center; margin-top: 50px; overflow:auto;}
	#getdesktop4 { float: none; margin-top: 50px; }
	#iletisim { float: none; text-align: center; margin-top: 120px; }
	#getwindows, #getapple { padding-top: 50px; display: inline-block; float: none; width: 120px; }
	#sag{ float: none; text-align: center;  padding-top:10px;}	
	
	#mobile { float: none; margin-top: 410px; position: absolute; left: 50%; margin-left: -375px; }
	#getmobile { float: none; text-align: center; margin: auto; margin-top: 180px; width: 90%; }
	#getandroid { margin-top: 50px; }
	
	thead tr td, tbody tr td { padding: 0;}
	.icon { opacity: 0; }
	
	#moreinfo { float: none; margin-right: auto; }
	#moreinfo, h6, .getnotified p { text-align: center; }
	.forum { font-size: 20px; }
	.sep { width: 330px; margin: auto; }
	.bottom { top: 60px; }
	
	.totop { display: none !important; }
		
}