﻿@font-face {
    font-family: daysone_my; /* Гарнитура шрифта */
    src: url(../fonts/DaysOne.ttf); /* Путь к файлу со шрифтом */
 }
@font-face {
    font-family: badscript_my; /* Гарнитура шрифта */
    src: url(../fonts/badscript.ttf);
 }
@font-face {
    font-family: prostoone_my; /* Гарнитура шрифта */
    src: url(../fonts/ProstoOne.ttf);
 }
@font-face {
    font-family: vivaldi_my; /* Гарнитура шрифта */
    src: url(../fonts/Vivaldi.ttf);
 } 
@font-face {
    font-family: animeace_my; /* Гарнитура шрифта */
    src: url(../fonts/animeace.ttf);
 } 
 
@font-face {
    font-family: akzidenz_my; /* Гарнитура шрифта */
    src: url(../fonts/akzidenz.otf);
 } 
 @font-face {
    font-family: lobster_my; /* Гарнитура шрифта */
    src: url(../fonts/lobster.ttf);
 } 
 @font-face {
    font-family: blogger_my; /* Гарнитура шрифта */
    src: url(../fonts/blogger.ttf);
}  
body{
 	margin-top: 0px;
 	margin-left: auto;
 	margin-right: auto;
 	margin-top: 0px;
 	margin-bottom: 0px;
 	background-color: #D184B6;
 	opacity: 0.0;
 }
 #main{
 	margin-top: 0px;
 	margin-left: auto;
 	margin-right: auto;
 	margin-top: 0px;
 	margin-bottom: 0px;
 	background-color: #D184B6;
 	height: 800px;
 }

 #content{
	margin: auto;
	width: 1260px;
	/*height: auto;*/
	height: 700px;
	/*border: 1px solid black;*/
	background-color: white;
	background-image: url(../images/fon_butterfly.png);
	
}
#thissitename{
	-ms-user-select: none;/*запрет выделения во всех браузерах*/
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	z-index: 3;
	position: absolute;
	left: auto;
	padding-left: 100px;
	padding-top: 10px;
	box-sizing: border-box;/*свойство не даёт увеличиваться размеру дива при увеличении отступов паддинг*/
	margin-left: 40px;
	margin-top: 10px;	
	width: 324px;
	height: 54px;
	/*border: 1px solid black;*/
	opacity: 1.0;
	color: white;
	text-align: left;
	font-weight: 200;
	font-size: 20px;	
	background-image: url(../images/fon_sitename-02.png);
	font-family: lobster_my;
	/*font-family: akzidenz_my;	*/	
	/*text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /*тень для текста толщиной 1 пиксель*/
}
#thissitename_down{
	-ms-user-select: none;/*запрет выделения во всех браузерах*/
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	z-index: 3;
	position: absolute;
	left: auto;
	/*padding: 5px;*/
	box-sizing: border-box;/*свойство не даёт увеличиваться размеру дива при увеличении отступов паддинг*/
	margin-left: 40px;
	margin-top: 10px;	
	width: 324px;
	height: 54px;
	/*border: 1px solid black;*/
	opacity: 1.0;
	color: black;
	text-align: center;
	font-weight: 200;
	font-size: 20px;	
	font-family: akzidenz_my;		
	/*text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /*тень для текста толщиной 1 пиксель*/
	cursor: pointer;
}
#text1{
	-ms-user-select: none;/*запрет выделения во всех браузерах*/
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	z-index: 2;
	position: absolute;
	left: auto;
	padding-top: 55px;
	padding-left: 0px;
	box-sizing: border-box;/*свойство не даёт увеличиваться размеру дива при увеличении отступов паддинг*/

	margin-left: 500px;
	margin-top: 150px;	
	width: 700px;
	height: 500px;
	/*border: 1px solid black;*/
	opacity: 1.0;
	
	text-align: center;
	font-weight: 200;
	font-size: 45px;

	/*color: #06c7ff;*/
	color: white;
	font-family: lobster_my;
	/*font-family: akzidenz_my;*/		
	/*text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /*тень для текста толщиной 1 пиксель*/
}
#text1_down{
	-ms-user-select: none;/*запрет выделения во всех браузерах*/
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	z-index: 1;
	position: absolute;	
	padding-top: 60px;
	padding-left: 5px;
	box-sizing: border-box;/*свойство не даёт увеличиваться размеру дива при увеличении отступов паддинг*/
	left: auto;
	margin-left:500px;
	margin-top: 150px;
	width: 700px;
	height: 500px;
	/*background-color: white;*/
	background-image: url(../images/fon_text_end.png);
	/*background-color: #06c7ff;*/
	text-align: center;
	font-weight: 200;
	font-size: 45px;
	font-family: lobster_my;
	color: gray;
	/*border: 1px solid black;*/
	opacity: 1.0;
}
#text_cont{
	z-index: 2;
	position: absolute;
	left: auto;
	padding-top: 75px;
	padding-left: 0px;
	box-sizing: border-box;/*свойство не даёт увеличиваться размеру дива при увеличении отступов паддинг*/

	margin-left: 500px;
	margin-top: 310px;	
	width: 700px;
	height: 300px;
	/*border: 1px solid black;*/
	opacity: 1.0;
	
	text-align: center;
	font-weight: 200;
	font-size: 25px;

	/*color: #06c7ff;*/
	color: white;
	font-family: blogger_my;
	/*font-family: akzidenz_my;*/		
	/*text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /*тень для текста толщиной 1 пиксель*/
}

#portf_l{
    		margin: auto;
    		width: 100px;
    		height: auto;
    		/*margin-top: 0px;
    		margin-left: 1000px;*/
    		font-size: 25px;
    		text-decoration: none;
    		text-align: center;
    		font-family: blogger_my; 
    		text-decoration: underline;  
}
#portf_l a:visited{/*посещённая*/
    		color: black;
    		/*text-decoration: none;*/
}
#portf_l a:link{/*нормальное состояне*/
    		color: black;
    		/*text-decoration: none;*/
}
#portf_l a:hover{/*при наведении*/
	color: white;
    		
}
#portf_l a:active{/*во время нажатия*/
    		color: gray;
    		/*text-decoration: underline;*/
}



/*1+*****************************************/
.butterfly{
	z-index: 2;
}
#but1{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 325px;
	margin-top: 160px;

}
#but2{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 200px;
	margin-top: 270px;

}
#but3{
	background-image: url(../images/butterfly_one6.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 270px;
	margin-top: 230px;

}
#but4{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 315px;
	margin-top: 330px;

}
#but5{
	background-image: url(../images/butterfly_one6.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 400px;
	margin-top: 200px;

}
#but6{
	background-image: url(../images/butterfly_one6.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 410px;
	margin-top: 370px;
	
}
#but7{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 350px;
	margin-top: 545px;
	
}
#but8{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 210px;
	margin-top: 400px;

}
#but9{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 260px;
	margin-top: 100px;
	
}
#but10{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 760px;
	margin-top: 50px;
	
}
#but11{
	background-image: url(../images/butterfly_one4.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 270px;
	margin-top: 480px;
	
}
#but12{
	background-image: url(../images/butterfly_one6.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 825px;
	margin-top: 320px;
	
}
#but13{
	background-image: url(../images/butterfly_one6.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 400px;
	margin-top: 290px;
	
}
#but14{
	background-image: url(../images/butterfly_one10.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 500px;
	margin-top: 20px;
	
}
#but15{
	background-image: url(../images/butterfly_one11.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 90px;
	margin-top: 180px;
	
}
#but16{
	background-image: url(../images/butterfly_one11.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 400px;
	margin-top: 40px;
	
}
#but17{
	background-image: url(../images/butterfly_one11.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 605px;
	margin-top: 83px;

}
#but18{
	background-image: url(../images/butterfly_one9.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 505px;
	margin-top: 260px;
	
}
#but19{
	background-image: url(../images/butterfly_one9.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 460px;
	margin-top: 135px;
	
}
#but20{
	background-image: url(../images/butterfly_one12.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 900px;
	margin-top: 25px;
	
}
#but21{
	background-image: url(../images/butterfly_one12.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 140px;
	margin-top: 95px;
	
}
#but22{
	background-image: url(../images/butterfly_one13.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 1000px;
	margin-top: 55px;
	
}
#but23{
	background-image: url(../images/butterfly_one13.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 130px;
	margin-top: 345px;
	
}
#but24{
	background-image: url(../images/butterfly_one9.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 190px;
	margin-top: 165px;
	
}
#but25{
	background-image: url(../images/butterfly_one12.png);
	position: absolute;
	left: auto;	
	opacity: 1;
	margin-left: 340px;
	margin-top: 415px;
	
}
/*1-******************************************/


#feedback{
	width: 160px;
    height: 20px;
    margin-top: 0px;
    margin-left: 820px;
    /*color: white;*/
}
#admpanel{
	width: 160px;
    height: 20px;
    margin-top: 0px;
    margin-left: 1050px;
}
#portf{
	width: 140px;
    height: 20px;
    margin-top: 0px;
    margin-left: 940px;
}
.navigation{
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    font-family: blogger_my;    
}
.navigation a:visited{/*посещённая*/
    color: #424242;
    text-decoration: none;
}
.navigation a:link{/*нормальное состояне*/
    color: #424242;
    text-decoration: none;
}
.navigation a:hover{/*при наведении*/
    text-decoration: underline;
}
.navigation a:active{/*во время нажатия*/    
    color: #d1d2d3;
    text-decoration: none;
}
.navigation2{
    position: absolute;
    z-index: 5;
    box-sizing: border-box;/*свойство не даёт увеличиваться размеру дива при увеличении отступов паддинг*/
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    font-family: blogger_my;    
}
.navigation2 a:visited{/*посещённая*/
    color: white;
    text-decoration: none;
}
.navigation2 a:link{/*нормальное состояне*/
    color: white;
    text-decoration: none;
}
.navigation2 a:hover{/*при наведении*/
    text-decoration: underline;
}
.navigation2 a:active{/*во время нажатия*/    
    color: #d1d2d3;
    text-decoration: none;
}
/*+++верхний слайдер*/
#slide_panel_top_wrap {
	z-index: 6;
    width:20%;
    height: 250px;
    left: 40%;
    position:absolute; /*обязательное свойство*/
    overflow:hidden; /*обязательное свойство*/
    /*border: 1px solid red;*/
}
#slide_panel_top {
    margin-top:-240px; /*обязательное свойство*/
    width:99%; 
    height: 220px;
    position:relative; /*обязательное свойство*/
    float: left;
    top:0; /*обязательное свойство*/
    left:0; /*обязательное свойство*/
    background-color: white;
    color: black;
    font-family: blogger_my;
    opacity: 0.1;
    border-radius:0 0 40px 40px; /*закругляем углы*/
	-webkit-border-radius:0 0 40px 40px; /*закругляем углы*/
	-moz-border-radius:0 0 40px 40px; /*закругляем углы*/
	-khtml-border-radius:0 0 40px 40px;/*закругляем углы*/
	border: 1px solid gray;
}
.setters_top{
    width: 50px;
    height: 50px;
    border: 1px solid white;
}
/*---верхний слайдер*/
/*+++форма почты*/
#mailer{	
 	font-size: 12px;
}
.mailer_inp{
	height: 25px;
	border: 1px solid gray;
	font-family: blogger_my;
	border-radius:5px; /*закругляем углы*/
	-webkit-border-radius:5px; /*закругляем углы*/
	-moz-border-radius:5px; /*закругляем углы*/
	-khtml-border-radius:5px;/*закругляем углы*/
	font-size: 12px;
}
.mailer_inp:focus { 
  outline: none;
  border: 1px solid gray;
} 
.mailer_inp:required:invalid {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
  	border: 1px solid gray;
}
.mailer_ta{
	font-family: blogger_my;
	border: 1px solid gray;
	border-radius:5px; /*закругляем углы*/
	-webkit-border-radius:5px; /*закругляем углы*/
	-moz-border-radius:5px; /*закругляем углы*/
	-khtml-border-radius:5px;/*закругляем углы*/
	resize: none;
	font-size: 12px;
}
.mailer_ta:focus {
  outline: none;
  border: 1px solid gray;
} 
.mailer_ta:required:invalid {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
  	border: 1px solid gray;
}
.mailer_btn{
    font-family: blogger_my;  
    width: 50%;
    height: 25px;
    margin-left: 25%;
    border: 1px solid gray;
    color: black;
    background-color: white;
    border-radius:5px; /*закругляем углы*/
    -webkit-border-radius:5px; /*закругляем углы*/
    -moz-border-radius:5px; /*закругляем углы*/
    -khtml-border-radius:5px;/*закругляем углы*/
    cursor: pointer;
    font-size: 12px;
}
#id_mailer_close{
	position: absolute;
	width: 50%;
	margin-left: 25%;
	bottom: 0px;
	height: 20px;
	text-align: center;
	font-size: 12px;
	color: #D184B6;
	cursor: pointer;
	-ms-user-select: none;/*запрет выделения во всех браузерах*/
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#id_mailer_close:hover{
	text-decoration: underline;
};
/*---форма почты*/