/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-sans-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/noto-sans-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-v11-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}




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


body {
	padding: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.4;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	font-style: normal;
	background-color: white;
	margin: 0;
}

#size {
	position: fixed;
	top: 44px;
	right: 10px;
	z-index: 999;
	width: 82px;
	height: 17px;
	font-size: 16px;
	color: #0045e6;
	text-align: right;
	font-weight: bold;
	display: none;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

 

a {
	text-decoration: none;
	color: #ff671b;
	outline: none;
	cursor: pointer;
}

a:hover, a:focus {
	color: #ff671b;
	text-decoration: underline;
}

a:visited {
    color: #ff671b;
}


p {
	margin: 0;
}

.scalepict {
	width: 100%;
	height: auto;
	display: block;
}

.orange {
	color: #ff671b;
}

h1 {
	font-size: 80px;
	line-height: 1;
	color: #fff;
	width: auto;
	text-align: left;
	margin: 0;
	display: inline-block;
}

h2 {
	font-size: 35px;
	line-height: 1.25;
	color: #fff;
	display: inline-block;
	width: auto;
	margin: -10px 0 0;
	max-width: 700px;
}

#header {
	width: 100%;
	height: 126px;
	display: block;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 30px;
	margin: 0;
}

#logo {
	width: 286px;
	display: inline-block;
	position: relative;
}


#bg {
	width: 100%;
	height: calc(100vh - 380px);
   	position: relative;
	color: white;
	background: url(../picts/remass_bg.jpg) left bottom no-repeat;
	background-size: cover;
	display: block;
}

#bg h1 {
	position: relative;
	_text-shadow: 1px 1px 1px #ccc;
	top: 50%;
	left: 40px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}



#content {
	background: #ff671b;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: visible;
	padding-right: 40px;
	padding-left: 40px;
	height: 254px;
}

#right {
	white-space: nowrap;
	margin-left: 20px;
}






/* #Media Queries
================================================== */



@media only screen and (max-width: 840px) {
body {
font-size: 15px;
}
h1 {
font-size: 76px;
}
h2 {
font-size: 33px;
}	
#header {
height: 116px;
padding-left: 20px;
padding-right: 20px;
padding-top: 25px;
}
#logo {
width: 266px;
}
#bg {
height: calc(100vh - 370px);
}
#bg h1 {
left: 20px;
}
#content {
padding-right: 20px;
padding-left: 20px;
}


}




@media only screen and (max-width: 640px) {
h1 {
font-size: 65px;
}
h2 {
font-size: 32px;
}
	
}



@media only screen and (max-width: 600px) {
#bg {
height: calc(100vh - 420px);
}
#content {
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
height: 304px;
}
#left {
width: 100%;
margin-top: 20px;
margin-bottom: 15px;
}
#right {
width: 100%;
margin-left: 0;
margin-bottom: 15px;
}
	
}




@media only screen and (max-width: 460px) {
body {
font-size: 14px;
}
h1 {
font-size: 56px;
}
h2 {
font-size: 30px;
}
#header {
height: 96px;
padding-top: 22px;
}
#logo {
width: 226px;
}
#bg {
height: calc(100vh - 400px);
}

}


@media only screen and (max-width: 400px) {
h1 {
font-size: 47px;
}
h2 {
font-size: 27px;
}
#content {
height: 294px;
}
#bg {
height: calc(100vh - 390px);
}

}



@media only screen and (max-width: 340px) {
body {
font-size: 13px;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 24px;
}
#header {
height: 86px;
padding-top: 20px;
}
#logo {
width: 206px;
}
#bg {
height: calc(100vh - 390px);
}	
			
}