* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
body {
	background-color: #57caf5;
	font-family: 'IBM Plex Sans Hebrew', sans-serif;
	color: #000000;
}
.wrapper {
	direction: rtl;
    text-align: center;
}
.main {
	display: flex;
	width: 100%;
	min-height: calc(100vh - 120px);
}
.content {
	max-width: 1200px;
	padding: 30px 90px 50px 90px;
	margin: auto;
}
.sidePhoto {
	width: 40%;
	max-width: 645px;
	background: url(images/topimg.jpg) no-repeat top right/cover;
}
.maxwidth { max-width: 860px; margin-right: auto; margin-left: auto;}
.black {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #57caf5aa;
	z-index: 1000;
	left: 0;
	top: -100%;
	display: flex;
	align-items: center;
    justify-content: center;
	opacity: 0;
	-webkit-transition: opacity 0.4s 0s ease;
	-moz-transition: opacity 0.4s 0s ease;
	-o-transition: opacity 0.4s 0s ease;
	transition: opacity 0.4s 0s ease;
	z-index: 800;
}
.black.shown {
	top: 0;
	opacity: 1;
}
.floater {
	direction: rtl;
	max-width: 1100px;
	margin: 20px;
	position: relative;
	overflow: auto;
}
.floaterWrapper {
	background-color: #FFF;
	background-position: left center;
	background-repeat: no-repeat;
	border-radius: 8px;
	box-shadow: 3px 3px 4px #00000034;
	padding: 25px 30px 25px 260px;
	display: none;
}
.close {
	position: absolute;
	left: 10px;
	top: -5px;
	font-size: 30px;
	display: block;
	padding: 10px;
	cursor: pointer;
}
.close:hover { color: #6a67ae; }
#txt1 { background-image: url(images/photoMetronit.jpg); }
#txt2 { background-image: url(images/photoCablecar.jpg); }
#txt3 { background-image: url(images/photoBuses.jpg); }
.link1 { text-decoration: underline; color: #6a67ae; margin-top: 10px; display: inline-block; }
.link1:hover { text-decoration: none; }
h1 {
	font-size: 79px;
	font-weight: bold;
	line-height: 1;
}
h2 {
	font-size: 44px;
	font-weight: normal;
	line-height: 1;
	margin-top: 10px;
}
h3 {
	font-size: 24px;
	margin-bottom: 10px;
	line-height: 1.1;
}
h4 {
	font-size: 20px;
	margin-top: 10px;
	line-height: 1.1;
}
.nowrap {
	white-space: nowrap;
}
.text1 {
	font-size: 16px;
	line-height: 1.4;
}
.mores {
	font-size: 44px;
	font-weight: bold;
}
.info {
	margin-top: 30px;
	text-align: justify;
	margin: auto;
}
.dot {
	width: 14px;
	height: 14px;
	border-radius: 14px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 13px;
}
.green-dot {
	background: #3aaa35;
}
.red-dot {
	background: #e6332b;
}
.bottomPhoto {
	display: none;
}
.dates {
	margin: 40px auto 40px auto;
}
.soon {
	position: absolute;
	display: block;
	padding: 4px 10px;
	background-color: #FFF;
	font-size: 16px;
	transform: translateX(-50%) rotate(7deg);
    left: 50%;
    top: 115px;
	border-radius: 4px;
	box-shadow: 1px 1px 3px #00000034;
}
.box {
	position: relative;
	width: 24%;
	opacity: 0;
	transform: translateY(30px);
	margin: auto;
	display: inline-block;
	vertical-align: top;
	-webkit-transition: transform 0.8s 0s ease, opacity 0.8s 0s ease;
	-moz-transition: transform 0.8s 0s ease, opacity 0.8s 0s ease;
	-o-transition: transform 0.8s 0s ease, opacity 0.8s 0s ease;
	transition: transform 0.8s 0s ease, opacity 0.8s 0s ease;
	cursor: pointer;
}
.box.start {
	opacity: 1;
	transform: none;
}
.box a {
	text-decoration: none;
	color: #000;
}
.buses { transition-delay: 0.6s; }
.upgrades { transition-delay: 0.4s; }
.cablecar { transition-delay: 0.2s; }
.date {
	margin: auto;
	max-width: 138px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	font-size: 22px;
	font-weight: bold;
	padding: 85px 20px 20px 20px;
	-webkit-transition: transform 0.4s 0s ease;
	-moz-transition: transform 0.4s 0s ease;
	-o-transition: transform 0.4s 0s ease;
	transition: transform 0.4s 0s ease;
}
.box:hover .date {
	transform: translateY(-10px);
}
.buses .date {
	background-image: url(images/buses.png);
}
.upgrades .date {
	background-image: url(images/upgrades.png);
}
.metronit .date {
	background-image: url(images/metronit.png);
}
.cablecar .date {
	background-image: url(images/cablecar.png);
}
.desc {
	padding: 8px;
	font-size: 22px;
	line-height: 1.2;
}
.footer {
	position: relative;
	width: 100%;
	height: 150px;
	text-align: center;
	padding: 40px 50px 20px 50px;
	background: url(images/diagonalWhite.svg) no-repeat center center/cover;
	margin-top: -30px;
}
.logos {
	display: flex;
	height: 100%;
	justify-content: space-evenly;
	align-items: center;
	font-size: 22px;
}
.logos span {
	margin: 0 15px;
}
.logos img {
	max-width: 100%;
	height: auto;
}
.dev { width: 1px; height: 50px; background: #000; }
.topfloat {
	position: absolute;
	top: -10px;
	right: 20px;
	z-index: 450;
	transition: all;
	transition-duration: 0.3s;
}
.topfloat a {
	font-size: 16px;
	display: inline-block;
	vertical-align: middle;
	color: #000;
	background: #FFF;
    text-decoration: none;
    z-index: 800;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 15px 15px 7px 15px;
	box-shadow: 2px 2px 11px #00000034;
}
.topfloat:hover { top: -5px; }
.list1 {
	padding-right: 20px;
	margin-top: 5px;
}
hr {
	border: 0;
    width: 100%;
    height: 1px;
    margin: 30px 0;
    background-image: linear-gradient(90deg, transparent, #6a67ae); ;
}
@media all and (max-width: 1500px) {
	.content { padding-right: 50px; padding-left: 50px; }
}
@media all and (max-width: 1350px) {
	.logos { font-size: 18px; }
	.logos span { margin: 0 10px; }
	.sidePhoto { display: none; }
	.bottomPhoto {
		background: url(images/haifa.jpg) no-repeat center top;
		background-size: 800px auto;
		height: 370px;
		margin: auto;
		display: block; 
	}
}
@media all and (max-width: 900px) {
	.box { width: 49%; margin-top: 20px; }
	.footer	{ padding: 60px 15px 30px 15px; height: auto; margin-top: -60px; }
	.topfloat a { font-size: 16px; }
	.logos { display: block; }
	.logos span { display: inline-block; width: 15%; vertical-align: middle; margin-bottom: 8px; }
	.logos span.dev:nth-child(8), .logos span.dev:nth-child(16) { display: none; }
	.logos span.dev { width: 1px; height: 40px; }
	.logos span:last-child { width: 100%; }
}
@media all and (max-width: 750px) {
	.floater { margin: 15px; }
	.floaterWrapper {
		padding: 25px;
		padding-bottom: 245px;
		background-position: center bottom;
	}
	#txt1 { background-image: url(images/photoMetronit2.jpg); }
	#txt2 { background-image: url(images/photoCablecar2.jpg); }
	#txt3 { background-image: url(images/photoBuses2.jpg); }
}
@media all and (max-width: 550px) {
	.content { padding: 40px 30px;}
	.desc { font-size: 20px; }
	.text1 { font-size: 16px; }
	h1 { font-size: 71px; }
	h2 { font-size: 41px;}
	.mores { font-size: 28px; margin-bottom: 8px; }
	.dot { margin: 0 4px;}
	.dates { margin-top: 0; }
	.box { width: 100%; }
	.bottomPhoto { background-size: 640px auto; height: 250px; }
	.footer { padding-top: 90px; margin-top: -70px; }
	.logos span { display: inline-block; width: 28%; }
	.logos span.dev{ display: none; }
}
@media all and (max-width: 380px){
	.content { padding: 40px 20px 30px 20px; }
	h1{ font-size: 62px; }
	h2 {font-size: 36px; }
	.text1 { font-size: 15px; }
	.mores { font-size: 26px; }
	.bottomPhoto { background-size: 500px auto; height: 200px; }
	.floaterWrapper { padding-top: 20px; padding-bottom: 200px; background-size: auto 180px; }
	.close { left: 0; top: -10px; font-size: 26px; }
}
@media all and (max-height: 680px){
	.floater {
		height: calc(100% - 40px);
	}
}