*{
box-sizing:border-box;
}
@font-face {
font-family: 'agavantgardecyr';
src: url('./fonts/agavantgardecyr.eot');
src: url('./fonts/agavantgardecyr.eot?#iefix') format('embedded-opentype'),
url('./fonts/agavantgardecyr.woff') format('woff'),
url('./fonts/agavantgardecyr.ttf') format('truetype'),
url('./fonts/agavantgardecyr.svg#agavantgardecyr') format('svg');
font-weight: normal;
font-style: normal;
}
	
@font-face {
		font-family: 'calibri_web';
		src: url('/fonts/calibri.eot');
		src: url('/fonts/calibri.eot?#iefix') format('embedded-opentype'),
			 url('/fonts/calibri.woff') format('woff'),
			 url('/fonts/calibri.ttf') format('truetype'),
			 url('/fonts/calibri.svg#calibri') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'calibri_web';
		src: url('/fonts/calibrib.eot');
		src: url('/fonts/calibrib.eot?#iefix') format('embedded-opentype'),
			 url('/fonts/calibrib.woff') format('woff'),
			 url('/fonts/calibrib.ttf') format('truetype'),
			 url('/fonts/calibrib.svg#calibri') format('svg');
		font-weight: bold;
		font-style: normal;
	}
	@font-face {
		font-family: 'calibri_web';
		src: url('/fonts/calibrii.eot');
		src: url('/fonts/calibrii.eot?#iefix') format('embedded-opentype'),
			 url('/fonts/calibrii.woff') format('woff'),
			 url('/fonts/calibrii.ttf') format('truetype'),
			 url('/fonts/calibrii.svg#calibri') format('svg');
		font-weight: normal;
		font-style: italic;
	}
	@font-face {
		font-family: 'calibri_web';
		src: url('/fonts/calibriz.eot');
		src: url('/fonts/calibriz.eot?#iefix') format('embedded-opentype'),
			 url('/fonts/calibriz.woff') format('woff'),
			 url('/fonts/calibriz.ttf') format('truetype'),
			 url('/fonts/calibriz.svg#calibri') format('svg');
		font-weight: bold;
		font-style: italic;
	}
BODY{
margin:0px;
background:#797979 url(./img/bg.png);
font-family: calibri, 'calibri_web', verdana;
font-size:16px;

background: lightblue;
background: lightgray;
background: darkolivegreen;
/* background: linear-gradient(45deg, black, transparent); */
background: lightcoral;
background: lightseagreen;
background: dodgerblue;
background: darkseagreen;
background: darkorchid;
background: darkcyan;
background: lightslategrey;
}
INPUT, TEXTAREA, BUTTON{
font-family: calibri, 'calibri_web', verdana;
font-size:16px;
}
.orange{
color:#FF4800;
}
.centerbody{
width: 100%;
min-height: 100vh;
background: radial-gradient(#ffffff9e, #ffffff40);
display: flex;
justify-content: center;
align-items: center;
position:relative;
/* padding:100px; */
padding:40px;
padding-bottom: 100px;
padding-bottom:140px;
/* box-shadow: 0px 5px 5px #333; */
}
.centerbody:nth-child(1){
padding-bottom:40px;	
}
.pics{
margin-top:25px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
/* width:100px; */
width:80px;
}
.divbutton{
/* width: 340px; */
width: 300px;
/* height: 254px; */
background: #fff;
display: inline-block;
margin: 10px;
padding: 20px;
cursor: pointer;
overflow:hidden;
border-radius: 4px;
color:#000;
opacity:0;
height:0px;
margin:0px;
padding:0px;
max-width: 45%;

-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.divbutton:HOVER{
box-shadow:0px 0px 5px #777;
}
.divbutton P{
margin:0px;
opacity:0;

-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.divbutton:HOVER IMG{
margin-top:0px;
}
.divbutton:HOVER P{
opacity:1;
}
.divbutton:HOVER H2{
opacity:1;
color:#FF4800;
}
.divbutton H2{
margin:0px;
margin-top: 10px;
margin-bottom: 5px;
}
.startlogo{
text-align: center;
/* background: green; */
/* max-height: 60vh; */
}
.startlogoimg
{
width:300px;
max-width: 30vh;
opacity:0;

-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.starturls{

}
.menubottom .mbdivs:FIRST-CHILD IMG{
width:58px;
}
.mbimgs{
width:50px;

-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
/* .mbimgs:HOVER, .menubottom .mbdivs:FIRST-CHILD IMG:HOVER{
width:75px;
} */
.mbdivs:HOVER .mbimgs, .mbdivs:FIRST-CHILD:HOVER IMG{
width:75px;
}
.menubottom{
position: fixed;
z-index:100;
bottom: -240px;
left: 50%;
margin-left: -234px;
/* background: #00000054;
padding: 20px 20px 10px;
border-radius: 6px; */

-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.mbdivs{
display: inline-block;
width: 75px;
text-align: center;
cursor: pointer;
}
.popupmenu{
color:#000;
background: #f3f3f3;
padding: 5px 10px;
bottom: 85px;
position: absolute;
/* display: none; */
display:block;
opacity:0;
font-size: 14px;
/* left: 0px; */
border-radius: 4px;

-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.mbdivs:HOVER .popupmenu{
/* display: block; */
opacity:1;
}
.menubottom A:nth-child(1) .popupmenu{
margin-left: -18px;
}
.menubottom A:nth-child(2) .popupmenu{
margin-left: -28px;
}
.menubottom A:nth-child(3) .popupmenu{
margin-left: 11px;
}
.menubottom A:nth-child(4) .popupmenu{
margin-left: -6px;
}
.menubottom A:nth-child(5) .popupmenu{
margin-left: 3px;
}
.menubottom A:nth-child(6) .popupmenu{
margin-left: 0px;
}
.bodytext
{
max-width:1000px;
text-align:center;
}
.nametext{
font-size:32px;
margin-bottom: 20px;
font-weight:normal;
text-align:left;
}
.preim{
text-align:center;
text-align:left;
}
.preims{
/* background: #F3F3F3; */
background: #fff;
display: inline-block;
border-radius: 4px;
max-width: 20%;
padding: 20px;
text-align: center;
margin: 10px;
width: 184px;
height: 211px;
vertical-align: top;
cursor: pointer;
overflow: hidden;

margin-left: 6px;
}
.preims:HOVER{
box-shadow:0px 0px 5px #777;
}
.preims:HOVER .preimimg{
margin:0px;
}
.preims:HOVER .preimtext{
opacity:1;
}
.preims:HOVER .preimname{
color:#FF4800;
}
.preims:first-child, .preims:nth-child(6n){
margin-left:0px;
}
.divurl
{
text-decoration:none;
border:none;
color:inherit;
}
.divurl .preims:first-child, .divurl  .preims:nth-child(6n){
margin-left:6px;
}
.divurl:first-child .preims, .divurl:nth-child(5n+1) .preims{
margin-left:0px;
}
.divurl:nth-child(5n) .preims{
margin-right:0px;
}
.preims:nth-child(5n){
margin-right:0px;
}
.preims .order{
background: #ff4800;
padding: 5px 10px;
border-radius: 6px;
color: #fff;
font-size: 14px;
}
.portdesc .order{
background: #ff4800;
/* padding: 5px 10px; */
border-radius: 6px;
color: #fff;
/* font-size: 14px; */
cursor:pointer;
}
.portdesc .order:HOVER{
background: #00c853;
}
.preims .order:HOVER{
background: #00c853;
}
.preimname{
font-weight:bold;
margin: 0px;
margin-top: 10px;
margin-bottom: 5px;
text-transform: uppercase;
}
.preimimg
{
width: 80px;
margin-top:30px;

-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.preimtext{
margin:0px;
opacity:0;
/* text-align: left; */

-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.whitebody
{
background:#fff;
border-radius: 4px;
padding:20px;
margin: 10px 0px;
text-align:left;
}
.whitebody P{
text-align:left;
}
.imgtext{
float: left;
margin-right: 20px;
width: 110px;
}
.imgtext2{
float: left;
margin-right: 20px;
width: 110px;
margin-top:18px;
}
.imgtext3{
float: left;
margin-right: 20px;
width: 110px;
margin-top:8px;
}
.imgtext4{
float: left;
margin-right: 20px;
width: 110px;
margin-top:28px;
}
.textareas{
width:532px;
resize:none;
margin-bottom:10px;
}
.inputs{
border:none;
padding:10px 20px;
border-radius:4px;
border: solid 2px #FF4800;
}
.inputssub{
border:none;
padding:10px 20px;
border-radius:4px;
border: solid 2px #DDDDDD;
cursor:pointer;
}
.inputs:FOCUS, .inputssub:FOCUS
{
outline: none;
}
.nourl{
text-decoration:none;
border:none;
color:unset;
}
.minilogo{
width:150px;
position:absolute;
left: 50%;
margin-left: -75px;
z-index:1;
}
.miniheader{
position:relative;
text-align:center;
min-height: 162px;
/* margin-bottom:-50px; */
margin-bottom:-20px;
}
.miniheader DIV{
display:inline-block;
padding-top: 45px;
width: 49%;
vertical-align: middle;
}
.namesite{
font-size: 50px;
margin:0px;
text-align:right;
padding-right:100px;
font-family: 'agavantgardecyr';
padding-bottom:10px;
}
.pagename{
margin:0px;
font-size: 32px;
font-weight: normal;
text-align:left;
padding-left:100px;
padding-bottom: 4px;
}
.minipics
{
width: 40px;
margin-right: 10px;
margin-left: 20px;
margin-bottom: -10px;
}
.urlsdiv .minipics:first-child{
margin-left:0px;
}
.contacts SPAN:first-child .minipics{
margin-left:0px;
}
.contacts
{
font-size:24px;
}
.pismodivs1{
display:inline-block;
max-width:290px;
vertical-align: middle;
padding-right:20px;
}
.pismodivs2{
display:inline-block;
max-width:533px;
vertical-align: middle;
}
.pismodivs2 INPUT:nth-of-type(1){
width: 125px;
}
.pismodivs2 INPUT:nth-of-type(2){
width: 180px;
}
.pismodivs2 INPUT:nth-of-type(3){
width: 100px;
text-align: center;
}
.price{
font-weight:bold;
font-size:30px;
}
.pricetext{
text-align:center;
margin-top: -5px;
margin-bottom: 5px;
}
.portfolioimg{
width:144px;

/* margin-top:30px; */

-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.portorder{
margin-top:4px;
display:inline-block;
}
.nameport{
margin-top: 0px;

-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.preims:HOVER .nameport{
margin-top:-35px;
opacity:0;
}
.buttons{
background:#ff4800;
padding:10px 20px;
border-radius:6px;
margin-top: 20px;
display: inline-block;
color:#fff;
text-decoration:none;
border:none;
cursor:pointer;
}
.buttons:HOVER{

}
.buttonsgreen{
background:#00c853;
}
.urls{
text-decoration: none;
color:#FF4800;
margin-right:40px;
}
.urlsdiv{
margin-top: 50px;
margin-bottom: 10px;
}
/* модальное окно*/
#modal_form {
	width: 400px; 
	height: 520px;
	border-radius: 4px;
	border: 0px #000 solid;
	background: #fff;
	position: fixed;
	top: 45%;
	left: 50%;
	margin-top: -260px;
	margin-left: -200px;
	display: none; 
	opacity: 0; 
	z-index: 5;
	padding: 20px 20px;
	padding-top: 0px;
	box-sizing: border-box;
}
#modal_form .nametext{
margin-bottom:10px;
}
#modal_form .buttons{
border: solid 2px #ff4800;
}
#modal_form2 {
	width: 290px; 
	height: 382px; /* Размеры должны быть фиксированы */
	border-radius: 0px;
	border: 0px #000 solid;
	background: #fff;
	position: fixed; /* чтобы окно было в видимой зоне в любом месте */
	top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
	left: 50%; /* половина экрана слева */
	margin-top: -193px;
	margin-left: -145px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
	display: none; /* в обычном состоянии окна не должно быть */
	opacity: 0; /* полностью прозрачно для анимирования */
	z-index: 5; /* окно должно быть наиболее большем слое */
	padding: 20px 20px;
	padding-top: 0px;
	text-align: center;
	box-sizing: border-box;
}

.inputorder
{
width: 100%;
/* font-size: 20px; */
color: #000;
border: solid 2px #ff4800;
margin-bottom: 10px;

/* padding: 5px 10px; */
font-family: calibri, 'calibri_web';
/* font-size: 18px; */
border: solid 2px #ff4800;
box-sizing: border-box;
}

.inputarea
{
font-family: Calibri, 'calibri_web', verdana;
width: 100%;
/* padding: 5px 10px; */
height: 80px;
font-size: 18px;
border: solid 2px #ff4800;
resize: none;
margin-bottom: 6px;
box-sizing: border-box;
}

.inputarea:FOCUS
{
outline: none !important;
}

.inputorder:FOCUS
{
outline: none !important;
}

.inputorder:REQUIRED 
{
}

.inputorder:FOCUS:INVALID
{
box-shadow: 0 0 5px red;
}

.inputorder:INVALID
{
background: url('./img/noncheck.png') no-repeat 98%;
}

.inputorder:VALID
{
background: url('./img/check.png') no-repeat 98%;
}

.submit
{
padding: 5px 10px;
background-color: #75BB1E;
border: none;
color: #fff;
font-size: 18px;
}

.modalh1
{
margin: 0px;
color: #FF4800;
font-weight: normal;
font-size: 36px;
}

.modaltext
{
margin: 0px;
margin-top:20px;
margin-bottom: 20px;
}
.uspehp{
font-size: 60px;
margin: 40px 0px 20px;
}
#modal_form #modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
#overlay {
	z-index: 3; 
	position: fixed; 
	background-color: #000; 
	opacity: 0.8; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0;
	cursor: pointer;
	display: none;
}

#modal_form2 #modal_close2 {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
.modalimg
{
float: left;
width: 72px;
margin-right: 20px;
margin-top: 3px;
margin-bottom:20px;
}
.hideprimer{
display:none;
width:240px;
}
/* модальное окно*/
.whitebodyname{
font-size: 26px;
font-weight: normal;
text-align: left;
margin-bottom: -10px;
margin-top: 16px;
}
.coverimg{
float: left;
margin-right: 20px;
width:450px;
}
.imgportfolio{
width: 160px;
max-width:25%;
position: relative;
vertical-align: middle;
}
.coverdiv
{
display:inline-block;
vertical-align: middle;
}
.portdesc{
display:inline-block;
max-width:484px;
vertical-align: middle;
}
.mobilemenu, .mobilemenubutton{
display:none;
}
.texturl
{
color:#FF4800;
text-decoration:underline;
}
/* snow */
.snowflake {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
 @-moz-keyframes 
spin { 100% {
-moz-transform: rotate(360deg);
}
}
 @-webkit-keyframes 
spin { 100% {
-webkit-transform: rotate(360deg);
}
}
 @keyframes 
spin { 100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
/* snow */
.novgod{
position:fixed;
bottom:-5px;
left:20px;
display:none;
cursor:pointer;
z-index:20;
}
.elka{
height:150px;
}
::selection{
background:#FF4800;
color:#fff;
}
#chatButton{
background: #ff4800;
padding: 10px 20px;
border-radius: 6px;
margin-top: 20px;
display: inline-block;
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;	
position: fixed;
right: 40px;
bottom: -100px;

transition: all .3s ease-out;
z-index:102;
}
#chatButton .popupmenu{
bottom: 60px;
right: 0px;
width: max-content;
}
#chatButton:HOVER .popupmenu{
/* display: block; */
opacity:1 !important;
}
.messDiv{
position: absolute;
right: 126px;
background: #fff;
display: inline-block;
width: max-content;
padding: 3px 10px;
padding-top: 4px;
top: 7px;
border-radius: 6px;
display: none;
transition: all .3s ease-out;
font-size: 26px;
color: #000;
background: #f3f3f3;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
}
.messDiv SPAN:nth-child(1){
color:#32A9E1;
}
.messDiv SPAN:nth-child(2){
color:#774E97;	
}
#chatButton:HOVER .messDiv{
display:inline-block;	
}
#colorDiv{
background: #fff;
padding: 10px 20px;
border-radius: 6px;
margin-top: 20px;
display: inline-block;
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;	
position: fixed;
left: 40px;
bottom: -100px;
color: inherit;

transition: all .3s ease-out;
z-index:102;	
}
#colorDiv .popupmenu{
bottom: 60px;
left: 0px;
width: max-content;
}
#colorDiv:HOVER .popupmenu{
/* display: block; */
opacity:1;
}

.colors{
position: absolute;
left: 120px;
background: #fff;
display: inline-block;
width: max-content;
padding: 9px 10px;
top: 0px;
border-radius: 6px;	
display:none;
transition: all .3s ease-out;
}
.colors SPAN{
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
vertical-align: middle;	
}
.colors SPAN:nth-child(1){background: lightblue;}
.colors SPAN:nth-child(2){background: lightgray;}
.colors SPAN:nth-child(3){background: darkolivegreen;}
.colors SPAN:nth-child(4){background: lightcoral;}
.colors SPAN:nth-child(5){background: lightseagreen;}
.colors SPAN:nth-child(6){background: dodgerblue;}
.colors SPAN:nth-child(7){background: darkseagreen;}
.colors SPAN:nth-child(8){background: darkorchid;}
.colors SPAN:nth-child(9){background: darkcyan;}
.colors SPAN:nth-child(10){background: lightslategrey;}
#colorDiv:HOVER .colors{
display:inline-block;	
}
.lights{
display:none;
height: 70px;
position: fixed;
top: -70px;
left: 0px;
width: 100%;
background: url('./img/balls/cristballs.png') top repeat-x;
background-position-y: -10px;
background-size: 60px;
transition: all .3s;
cursor:pointer;
z-index:1;
}
.lightsOn{
background-image:url('./img/balls/cristballs2.png');	
}
.persatt
{
	font-size: 10px;
	display: block;
	text-align: right;
	padding: 0px;
	padding-top: 0px;
}

.sogltext
{
	display: none;
	width: 350px;
	height: 536px;
	background: #fff;
	top: 50%;
	left: 50%;
	margin-top: -268px;
	margin-left: -175px;
	position: fixed;
	z-index: 200;
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
}

.sogltext P
{
	font-size: 16px;
}

.soglok
{
cursor: pointer;
text-decoration: underline;
}

.zakr
{
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;		
text-decoration: none;
}
.pcurl{
	
}
.cookieDiv{
background:#fff;
border-radius: 6px;
padding: 10px 20px;
font-size:14px;
position:fixed;
bottom: 20px;
bottom: 130px;
display: inline-block;
color:#000;
left: 50%;
transform: translate(-50%);
z-index:200;
bottom:-200px;
display:none;
transition: all .3s ease-out;
}
.cookieDiv P{}
.cookieDiv SPAN{
background: #ff4800;
padding: 10px 20px;
border-radius: 6px;	
color:#fff;
margin-left: 20px;
cursor:pointer;
}