body { 
	font-family: 'Red Hat Display', sans-serif;
	letter-spacing: 0.0em;
	margin: 0 auto; 
	background-position: center;
	background-attachment: scroll; /*fixed,  scroll*/
}
body *::-moz-selection {
  background: black;
  color: white;
}

body *::-webkit-selection {
  background: black;
  color: white;
}

body *::selection {
  background: black;
  color: white;
}

.layout {
    width: 100%;
	min-height: 1100px;
	margin: 0 auto;
	background: white;
}

#header {
    width: 77%;
    height: 7%;
	min-height: 94px;
	margin: 0 auto;
	align-content: center;
	position:relative;
	background: white;
	margin-top: 5%;
}

#logo { 
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
	transition: 0.1s linear;
}

#topbox {
	z-index: 20;
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
	
}

#onebox {
	z-index: 20;
	margin-left: 2%;
	margin-bottom: 5%;
	display: flex;
}

#twobox {
	width: 96%;
	margin-top: -1%;
	margin-bottom: 1%;
}

#textbox {
	z-index: 20;
	background-color:white;
}

#blocks {
	width: 80%;
	min-height: 1100px;
	margin: 0 auto;
	position:relative;
	background: white;
	margin-left: 10%;
	margin-top: 4%;
	margin-bottom: 0;
}

.box {
	width: 47%;
	margin-left: 2%;
	margin-top: 0%;
	margin-bottom: 2%;
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	background-color: white;
	border-radius: 6%;
	float: left;
}

	/********** Desktop - 920px breakpoint ***************************/
	@media screen and (max-width: 60em) {
		.box {
		 width: 47%;}
	 }
	
	/*iPAD SUPPORT=====================================--*/
	@media (max-width: 56.250em) {
		.box {
		 width: 47%;}
	 }
	
	/*NEXUS SUPPORT=====================================--*/
	@media (max-width: 44.063em) {
		.box {
		 width: 96%; }
 	 }
	
	/*iPhone SUPPORT=====================================--*/
	@media screen and (max-width: 22.500em) {
		.box { 
		width: 96%; }		
	}
	
.box:before{
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}

.logoimg {
	width: 100%;
	height: 100%;
	position:relative;
	z-index: 20;
	display: flex;
	align-items: center;  
	float:left;
}

.logoBox { 
	width: 130pt;
	height: 60pt;
	display: block;	
	padding:0;
	align-content: center;
	position: relative;
	cursor:pointer;
	z-index: 80;
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
}

@media screen and (max-width: 90em) {
	.logoBox { 
	width: 90pt;
	height: 40pt; }		
}

.redBox {
	width: 96%;
	height: 7%;
	min-height: 240px;
	margin: 0 auto;
	align-content: center;
	margin-top: 0;
	margin-bottom: 2%;
	position: relative;
	text-align: center;
	display: flex;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	transition: 0.1s linear;
}

.rectangle {
	width: 100%;
	height: 48%;
	position:relative;
	margin-top: 1%;
	margin-bottom: 1%;
	z-index: 20;
	display: flex;
	background-color:#F1F2F2;
	border-radius: 44px; 
	align-items: center;  
	float:left;
}

.rectangle:before{
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}

.rectangleText {
	width: 100%;
	height: 100%;
	position:relative;
	z-index: 20;
	display: flex;
	align-items: center;  
	float:left;
}

.rectangleText:hover {
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
	opacity: 0.7;
}
	
#bottom {
	width: 96%;
	height: 380px;
	margin: 0 auto;
	align-content: center;
	background: white;
	margin-top: 2%;
	margin-bottom: 2%;
	position: relative;
	display: flex;
	align-items: center;
}

#logoBlack { 
	width: 150px;
	height: 69px;
	align-content: center;
	margin: 0 auto;
	margin-top: 63pt;
	position: relative;
	cursor:pointer;
	display: flex;
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
}

@media screen and (max-width: 60em) {
	#logoBlack { 
	width: 100px;
	height: 45px; }		
}

#mailbox { 
	width: 150px;
	height: 69px;
	display: block;	
	float: right;
	padding:0;
	margin-left:2%;
	position: relative;
	cursor:pointer;
	z-index: 80;
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
}

#legalText { 
	display: block;	
	align-content: center;
	margin: 0 auto;
	margin-top: 3%;
	position: relative;
	cursor:pointer;
	display: flex;
	text-align: center;
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
}

@media screen and (max-width: 44.063em) {
	#legalText { 
	margin-top: 10%; }		
}
	
#gotop { 
	width: 140px;
	height: 28px;
	display: block;	
    border: 1px solid black;
	margin: 0 auto;
	position: relative;
	cursor:pointer;
	z-index: 10;
	text-align: center;
	align-content: center;
	margin-top: 3%;
	margin-bottom: 5%;
	border-radius: 20px; 
	transition: 0.1s linear;
}

@media screen and (max-width: 44.063em) {
	#gotop { 
	margin-top: 10%; }		
}

#gotop:hover {
	padding: 0;
	background-color: black;
	border: 1px solid black;
	text-decoration-color: white;
}

#idea {
	background-color: white;
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
  
}

#logic {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/logic.png);
}

#draw {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/draw.png);
}

#global {
	background-color: white;
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/global.png);
}

#smartphone {
	background-color: white;
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/smartphone.png);
}


#aws {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
	transition: 0.1s linear;
	border-radius: 6%;
}

#text {
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
	transition: 0.1s linear;
}
#aws:hover {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
	opacity: 0.7;
}

#transistor {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    transition: 0.1s linear;
	border-radius: 6%;
}

#transistor:hover {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
	opacity: 0.7;
}

#soon {
    background-color: white;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/images/soon.gif);
    border-radius: 4%; 
}

#support {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/support.png);
}

#time {
	background-color: white;
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/time.png);
}

#switch {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
}

#dialog {
    background-color: white;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/images/dialog.png);
}

#oleg {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/oleg.png);
}

#evgeniy {
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/evgeniy.png);
}

#map {
	background-color: white;
	background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url(/images/map.png);
}

#kvadrat {
	width: 37%;
	margin-left: 2%;
	position:relative;
	z-index: 20;
	background-color:gray;
	border-radius: 4%;    
	float:left;
}

.content{
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.kvadrat {
	width: 48%;
	border-color: black;
	position: relative;
	z-index: 40;
	background-color: #F1F2F2;
	border-radius: 8%;
	float: left;
}

.kvadrat:before {
	content: "";
	display: block;
	padding-top: 100%;           /* initial ratio of 1:1*/
}

.kvadrat1 {
    width: 48%;
    border-color: black;
    position: relative;
    z-index: 40;
    background-color: #F1F2F2;
    border-radius: 8%;
    float: left;
}

.kvadrat1:before {
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}

.kvadrat2 {
	width: 48%;
    margin-left: 4%;
    border-color: black;
    position: relative;
    z-index: 40;
    background-color: #F1F2F2;
    border-radius: 8%;
    float: left;
}

.kvadrat2:before{
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}
.kvadrat3 {
    width: 48%;
    margin-top: 4%;
    border-color: black;
    position: relative;
    z-index: 40;
    background-color: #F1F2F2;
    border-radius: 8%;
    float: left;
}

.kvadrat3:before{
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}

.kvadrat4 {
    width: 48%;
    margin-left: 4%;
    margin-top: 4%;
    border-color: black;
    position: relative;
    z-index: 40;
    background-color: #F1F2F2;
    border-radius: 8%;
    float: left;
}

.kvadrat4:before{
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}

.rectangle {
	width: 100%;
	height: 48%;
	position:relative;
	margin-top: 1%;
	margin-bottom: 1%;
	z-index: 20;
	display: flex;
	background-color:#F1F2F2;
	border-radius: 44px; 
	align-items: center;  
	float:left;
}
.rectangle:before{
  content: "";
  display: block;
  padding-top: 100%;           /* initial ratio of 1:1*/
}

h1{
	font-family: 'Red Hat Display', sans-serif;
	font-size:3.4vw;
	font-weight:200;
	line-height:140%;
	letter-spacing:0.03em;
	color: red;
	margin: 0 auto;
	padding:0;
	margin-top:0;
}

p {	
	font-family: 'Red Hat Display', sans-serif;	
	font-size:14pt;
	font-weight:200;
	line-height:160%;
	letter-spacing:0.03em;
	color: black;
	margin: 0 auto;
	padding:0;
}

h2{
	font-family: 'Red Hat Display', sans-serif;
	font-size:1.4vw;
	font-weight:200;
	line-height:140%;
	letter-spacing:0.03em;
	color: black;
	margin: 0 auto;
	padding:0;
}
h3{
	font-family: 'Red Hat Display', sans-serif;
	font-size:1.6vw;
	font-weight:500;
	line-height:145%;
	letter-spacing:-0.01em;
	color: black;
	margin: 0 auto;
	padding:0;
	margin-top:10%;
}

h4{
	font-family: 'Red Hat Display', sans-serif;
	font-size:1.3vw;
	font-weight:normal;
	line-height:160%;
	letter-spacing:-0.01em;
	color: black;
	margin: 0 auto;
	padding:0;
	margin-top:2%;
}
h5{
	font-size:1vw;
	font-weight:normal;
	line-height:140%;
	letter-spacing:-0.01em;
	color: black;
	margin: 0 auto;
	padding:0;
	margin-top: 11%;
}

h6{
	font-family: 'Red Hat Display', sans-serif;
	font-size:12pt;
	font-weight:200;
	line-height:140%;
	letter-spacing:-0.01em;
	color: black;
	margin: 0 auto;
	padding:0;
	margin-top:2%;
}
h6:hover{
	color: white;
}


.legend {
	margin-left: 5%;
	padding-top: 4%;
}

.normal {
	font-weight: 400;
}

.story {
	font-weight: 500;
	margin-top: 5%;
}

#back { 
	width: 100%;
	text-align: left;
	vertical-align: middle;
	line-height:100%;
	position: relative;
}


.project span{
	width: 100%;
	display: block;		
	margin:0 auto;
	background-color: #F1F2F2;
	position: relative;
}
.project{
    float: left;
    width: 28%;
    height: 430px;
	display: block;	
	margin: 0 2% 2% 0;
	text-align: left;
	background-position: center;
	background-color: #F1F2F2;
	background-size:cover;
    -moz-border-radius:0;
    -webkit-border-radius: 0;
	z-index: 4;
}
@media (max-width:1680px){
  .project {
    width: 28%;
  }
}
@media (max-width:1280px){
  .project {
    width: 46%;
    height:360px;
  }
}
@media (max-width:1024px){
  .project {
    width: 95%;
    height:600px;
    margin: 0 0 5% 0;
  }
}
.project_area {
	line-height:180%;
	height: 100%;
	text-decoration: none;
    background-color: rgba(255, 255, 255, 0.9);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.project_area span {
   padding: 50px 0 0 50px;
}

:focus {
    outline: 0;
}
#portfolio{
	width: 95%;
	display: block;
	margin-left: 5%;
	background-position: center;
	background-size:cover;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;	
}
.portfolio_pictures {
	width: 95%;
	min-width: 50%;
	height: 1000px;
	position: relative;
	background-position: center;
	background-size:cover;
	margin-bottom:3%;
}

@media (max-width:1600px){
  .portfolio_pictures {
     height: 700px;
  }
}
@media (max-width:1024px){
  .portfolio_pictures {
     height: 540px;
  }
}

a img {
    border: none; /* Убираем рамку */
}

#padding1 {
	padding:184px 0 0 10%;
	font-size:26px;
}

@media (max-width:1024px){
  #padding1 {
	 padding:250px 0 0 10%;
     font-size:40px;
  }
}

@media (max-width:1280px){
  #padding1 {
	 padding:150px 0 0 10%;
  }
}

#padding2{
	margin:1% 0 0 10%;
	color: #636466;
}

.email-white  {
	display: inline-block;
	text-decoration: none;
	padding: 0 0 3px 0;
	color: white;
	border-bottom:1px solid;
}
.email-white:hover   {
	display: inline-block;
	text-decoration: none;
	padding: 0 0 3px 0;
	border-bottom: 1px dashed;
}

a {
    display: inline-block;
	text-decoration: underline;
    color: black;
}

hr {
    border: none; /* Убираем границу */
    background-color: #CCCCCC; /* Цвет линии */
    color: #CCCCCC; /* Цвет линии для IE6-7 */
    height: 1px; /* Толщина линии */
	padding:0;
   }
   hr1 {
    border: none; /* Убираем границу */
    background-color: #CCCCCC; /* Цвет линии */
    color: #CCCCCC; /* Цвет линии для IE6-7 */
    height: 1px; /* Толщина линии */
	padding:0;
}