@font-face {
  font-family: 'open-sans';
  src:  url('../fonts/opensanshebrew-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'open-sans-bold';
  src:  url('../fonts/opensanshebrew-bold-webfont.woff') format('woff');
}

html, body {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

body {
	background-image: url(../img/box.png);
    background-repeat: no-repeat;
    background-size: cover;
}

h1, h2 {
	font-family: open-sans-bold;
	white-space: nowrap;
}

h1 {
	font-size: 2.5vw;
}

h2 {
	font-size: 2vw;
}

h3 {
	font-size: 1.5vw;
}

#header {
	width: 100%;
	padding: 1rem;
	background-color: #F40C0C;
	color: white;
}

#header  a {
	color: white;
}

#header img {
	height: 3rem;
}

#wrapper {
	font-family: open-sans;
	font-size: large;
	color: black;
	justify: right;
	direction: rtl;
}

#content {
	display: flex;
	align-items: start;
}

.left {
	margin: 2rem;
	flex: 1;
	text-align: center;
	background-color: #EFEFEF;
}

.grad-gray {
  background: -webkit-linear-gradient(#EFEFEF, #CBCBCB); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#EFEFEF, #CBCBCB); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#EFEFEF, #CBCBCB); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#EFEFEF, #CBCBCB); /* Standard syntax */
}

.separator {
	height: 1px;
	border-bottom: 1px solid white;
	border-top: 1px solid lightgray;
}

.right {
	margin: 2rem;
	flex: 2;
    background-color: rgba(0,0,0,0.5);
}

.right p, .right h1 {
	margin-right: 10px;
	opacity: 1.0;
	color: white;
}

.phones {
	text-align: right;
	margin: 10px;
	display: inline-block;
}

#footer {
	text-align: center;
}

#footer a {
	color: black;
}

#doodle {
	right: 1%;
	color: black;
}

#contactForm {
	display: flex;
	flex-direction: column;
	padding: 2rem;
	gap: .5rem;
}

button {
	background-color: #F40C0C;
	color: white;
	font-weight: bold;
}

input, button {
	padding: .5rem;
	font-size: large;
	border: none;
}

@media screen and (max-width: 800px) {
	h1, h2, h3 {
		font-size: inherit;
	}
	
	#header {
		position: sticky;
		top: 0;
		z-index: 999;
		text-align: center;
		padding: .5rem;
	}
	
	#header img {
		height: 25px;
	}

	#content {
		flex-direction: column-reverse;
		padding: .5rem;
	}
	
    .left {
		width: 100%;
		text-align: center;
		background-color: #EFEFEF;
		margin: .5rem 0;
	}

	.right {
		width: 100%;
		margin: .5rem 0;
	}
}