﻿body{
	font-family:Verdana;
	font-size: medium;
	width:70%;
	margin:5% auto 5% auto;
}

p{
text-align:justify; 
text-shadow: 2px 2px 3px #ccc;
margin-left: 5%;
margin-right:5%;
margin-top:1%;
color:#808080;
}

h1           {
margin-left:5%;
margin-right:5%;
font-size: 42px; 
font-weight: 800; 
font-family: Bookman Old Style; 
letter-spacing: 2px; 
color: #DB737D; 
text-shadow: 5px 5px 6px #ccc;
}

h2
{margin-left:5%;
margin-right:5%;
font-size: 28px;
font-weight: 800;
color: #DB737D;
font-family: Bookman Old Style;
letter-spacing: 2px;
text-shadow: 3px 3px 4px #ccc;
}

h3           {
margin-left:5%;
margin-right:5%;
font-size: 20px; 
font-weight: 800; 
color: #DB737D; 
font-family: Bookman Old Style; 
letter-spacing: 2px; 
text-shadow: 3px 3px 4px #ccc;
}
.error {
border:2px red solid;
}

.headpage{
				float:right; margin-right:5%
}

.img_wrapper.loaded img{
    opacity: 1;
}

.img_wrapper img{

    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 3000ms;
    -moz-transition: opacity 3000ms;
    -ms-transition: opacity 3000ms;
    transition: opacity 3000ms;
}

.iconWrapper{
  display: table;
  width: 50px; height: 50px; 
  background-color: white;
  border-radius: 999px;
  box-shadow: 3px 3px 10px #ccc; 
}

ic{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
       }
/*  стилизация маркеров LI
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
  margin: 0.25rem;
}
li::before {
  content: counter(my-awesome-counter);
  background: #662974;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-block;
  line-height: 2rem;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
}
ol ol li::before {
  background: #DE51FF;
}
ol ol ol li::before {
  background: #EE9EFF;
}

*/

.dark {
  position: relative;
}
 
.dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);  
  z-index: 1;
}



               
a:link       { text-decoration: none; color: #000000;  text-shadow: 2px 2px 3px #ccc;}
a:visited    { text-decoration: none; color: #333333;  text-shadow: 2px 2px 3px #ccc;}
a:hover      { text-decoration: none; color: #FF0000;  text-shadow: 2px 2px 3px #ccc;}
a:active     { text-decoration: none; color: #FF0000; text-shadow: 2px 2px 3px #ccc;}

.tb {
	text-indent:10px;
	left:20px
}

.scrollup{
width:40px;
height:40px;
position:fixed;
display:none;
text-indent:-9999px;
}


.parallax {
    min-height: 300px;
    background: transparent;
}
.no-parallax{
    width: 100%;
    /*min-height: 300px; */
    }



.upbutton{position:relative}
.upbutton:hover {position:relative}
.upbutton:hover:after {/* стрелочка вверх */
content: '';
	position: absolute;
	left: 50%;
	top: -10px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #ff0000;
}


.downbutton{position:relative}
.downbutton:hover{position:relative}
.downbutton:hover:after{content:''; position:absolute; left:100%; top: 30px; border-top:6px solid #ff0000; border-left:6px solid transparent; border-right:6px solid transparent; }



.furtherbutton{position:relative}
.furtherbutton:hover{position:relative}
.furtherbutton:hover:after{content:''; position:absolute; left:120%; top: 5px; border-top:6px solid transparent; border-left:6px solid #ff0000; border-bottom:6px solid transparent; }





.anime
{
	width:90%;
	margin:auto;
	
	border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-webkit-border-radius: 6px;
	-ms-border-radius: 6px;
	 z-index: -1;

}

.animeform
{
	height:200px; 
	width:65%; 
	display:inline-block; 
	margin:auto; 
		
	border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-webkit-border-radius: 6px;
	-ms-border-radius: 6px;
	 z-index: -1;
}

.animeimage {
margin:0px 50px 0px 50px;
    border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-webkit-border-radius: 3px;	
	
	-moz-box-shadow: 3 3 10px #ccc;
	-webkit-box-shadow: 3 3 10px #ccc;
	box-shadow: 3px 3px 10px #ccc;
}






#address
{

width:300px;
padding: 10px;
left: 40%;
position: relative;
display:inline;
}


.article
{
width: 98%;
margin: auto;
	
	border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-webkit-border-radius: 6px;
	-ms-border-radius: 6px;
	 z-index: -1;
}
.gradient{
background-image: linear-gradient(to bottom, rgb(242,242,242) 7%, rgb(252,252,252) 54%, rgb(255,255,255) 77%);
background-image: -o-linear-gradient(to bottom, rgb(242,242,242) 7%, rgb(252,252,252) 54%, rgb(255,255,255) 77%);
background-image: -moz-linear-gradient(to bottom, rgb(242,242,242) 7%, rgb(252,252,252) 54%, rgb(255,255,255) 77%);
background-image: -webkit-linear-gradient(to bottom, rgb(242,242,242) 7%, rgb(252,252,252) 54%, rgb(255,255,255) 77%);
background-image: -ms-linear-gradient(to bottom, rgb(242,242,242) 7%, rgb(252,252,252) 54%, rgb(255,255,255) 77%);
background-image: -webkit-gradient(	linear,	left bottom, left top, 	color-stop(0.07, rgb(242,242,242)),	color-stop(0.54, rgb(252,252,252)), color-stop(0.77, rgb(255,255,255)));
}

.toronto {
    -moz-box-shadow: 3 3 10px #ccc;
	-webkit-box-shadow: 3 3 10px #ccc;
	box-shadow: 3px 3px 10px #ccc;	
    border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-webkit-border-radius: 3px;
	width:100%
}

.copyright{
				display:none
}

.bottom_block{
				width:40%; 
				margin:5% auto auto auto;
				font-family:'bookman old style';
				font-size: x-small;
				text-shadow: 3px 3px 4px #ccc; 
				letter-spacing: 1pt;			
}
.bbred{
				color:red
}


/**************************прилипающие кнопки ****/
#pan {display:none;position:fixed;right:0%;bottom:10%;}



.header{
	    position:fixed;    
        z-index: 99;
        height:60px;
        width:100%;
        padding:10px 10px 10px 5%;
        top:0px;
        left:0px;      
}
.caption{
font-family:"Bookman Old Style";
font-size: small;
font-weight:bold;
letter-spacing: 2px; 
color: #DB737D; 
text-shadow: 5px 5px 6px #ccc;
margin-left:5%
}

hr {
margin:2% auto 2% auto; 
width:50%; 
color:#db737d; 
height:1px;
border: 0;
/*background: #000;  */
background-image: -webkit-linear-gradient(left, #fff, #000, #fff);
background-image: -moz-linear-gradient(left, #fff, #000, #fff);
background-image: -ms-linear-gradient(left, #fff, #000, #fff);
background-image: -o-linear-gradient(left, #fff, #000, #fff);
}

/*  кнопки анкеты   */
 
.myradio {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0;
}
.myradio + label {
  cursor: pointer;
}
.myradio:not(checked) {
  position: absolute;
  opacity: 0;
}
.myradio:not(checked) + label {
  position: relative;
  padding: 0 0 0 35px;
}
.myradio:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #FFF;
}
.myradio:not(checked) + label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: indianred;
  box-shadow: inset 0 1px 1px rgba(189,183,189,1);
  opacity: 0;
  transition: all .2s;
}
.myradio:checked + label:after {
  opacity: 1;
}
.myradio:focus + label:before {
  box-shadow: 0 0 3px 3px rgba(189,183,189,1);
}


/* кнопки анкеты конец*/
.form_background{
				background-color:#eee
}


.example-2 .btn-tertiary{color:#ddd;padding:0;line-height:40px;width:300px;margin:auto;display:block;border:2px solid #ddd}
.example-2 .btn-tertiary:hover,.example-2 .btn-tertiary:focus{color:#fff;border-color:#fff}
.example-2 .input-file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
.example-2 .input-file + .js-labelFile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;cursor:pointer;}
.example-2 .input-file + .js-labelFile .icon:before{content:"\f093"}
.example-2 .input-file + .js-labelFile.has-file .icon:before{content:"\f00c";color:#5AAC7B}


.input  {
-moz-box-shadow: 3 3 5px #ccc; 
-webkit-box-shadow: 3 3 5px #ccc; 
box-shadow: 3px 3px 5px #ccc;	
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
height:40px;
}



.a{margin:2% 0 2% 10%; width:40%; position: relative; padding-left:5%; display: inline-block; font-size:medium; box-sizing:border-box; }
.b{margin-left:5%; width:30%; display: inline-block; font-size:medium}
.n{text-indent:15%; background:url(nf.png) no-repeat #fefefe; background-position: 8px  6px ; }
.t{text-indent:15%; background:url(t.png) no-repeat #fefefe;background-position: 8px 6px; }
.s{text-indent:15%; background:url(s.png) no-repeat #fefefe;background-position: 8px 6px; }

.m{text-indent:15%; background:url(m.png) no-repeat #fefefe;background-position: 8px 6px; }
.l{text-indent:15%; background:url(l.png) no-repeat #fefefe;background-position: 8px 6px; }
.d{text-indent:15%; background:url(doctor.png) no-repeat #fefefe;background-position: 8px 6px; }
.per{text-indent:15%; background:url(person.jpg) no-repeat #fefefe;background-position: 8px 6px; }
.c{text-indent:15%; background:url(city.jpg) no-repeat #fefefe;background-position: 8px 6px; }
.lev{text-indent:15%; background:url(level.jpg) no-repeat #fefefe;background-position: 8px 6px; }
.note{text-indent:15%; background:url(note.png) no-repeat #fefefe;background-position: 8px 6px; }
.em{text-indent:15%; background:url(em.jpg) no-repeat #fefefe;background-position: 8px 6px; }
.phon{text-indent:15%; background:url(phone.png) no-repeat #fefefe;background-position: 8px 6px; }

.select {
width:40%;
height:40px;
border-width: 1px;
border-color: #ccc;
border-radius: 5px;
border-style: solid;
-moz-box-shadow: 3 3 5px #ccc; 
-webkit-box-shadow: 3 3 5px #ccc; 
box-shadow: 3px 3px 5px #ccc;
}

.textarea {
border: 1px solid #ccc;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 15px 15px 15px 50px;
-moz-padding: 30px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
}


.text_shadow {text-shadow: 3px 3px 4px #ccc; letter-spacing: 1pt;
}

.shadow {
/*
margin-top:10px;
margin-bottom:10px;*/	
padding-top:10px;
padding-bottom:10px;
border-radius: 5px;
-moz-box-shadow: 3 3 10px #ccc;
-webkit-box-shadow: 3 3 10px #ccc;
box-shadow: 3px 3px 10px #ccc;	
background-color:white;
}

.title{
	margin-top:5%
}
	
#wrapper {
	width: 100%;
	}
/*
#accordion h3.head
{ 
	
	padding: 5px 10px;
	font-size: 17px; 
	font-family: Tahoma; 
	font-weight: normal; 
	color: #fff;
	background: #333; 
	cursor: pointer;
	
	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	
	text-shadow: 1px 1px 0px #000;
	-o-text-shadow: 1px 1px 0px #000;
	-moz-text-shadow: 1px 1px 0px #000;
	-webkit-text-shadow: 1px 1px 0px #000;
}

#accordion h3.active
{
	background: #eee; 
	padding:5px 10px
}
*/
#accordion div.block 
{
	padding: 10px; margin: 0;
	
	border: 1px solid #ccc;
	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;	
}
.accordionButton {	
	width: 100%;
	cursor: pointer;
	font-family: Verdana;
	text-align:left;
border-bottom-color: #ccc;
border-bottom-style: solid;
border-bottom-width: 0.1px;
	
}
	
.accordionContent {	
	width: 100%;
	text-align:justify;
	font-family: Verdana; 
		margin-bottom:2%;
	margin-top:2%;
	text-shadow: 3px 3px 4px #ccc; 
		}
	
#wrap { width: 100%; margin: 50px auto; }

.button{
				
				font-family: 'Bookman Old Style';
				cursor:pointer; 
				color: white; 
				letter-spacing: 1px; 
				font-size:medium; 
				font-weight: bold; 
				padding:10px 20px 10px 20px;
				text-align:center;
				text-decoration:none;
				border:none;
				border-radius:5px;
				background:indianred;
			
-moz-box-shadow: 3 3 10px #ccc;
-webkit-box-shadow: 3 3 10px #ccc;
box-shadow: 3px 3px 10px #ccc;
}

.button:hover{
-moz-box-shadow: 3 3 15px #ccc;
-webkit-box-shadow: 3 3 15px #ccc;
box-shadow: 3px 3px 15px #ccc;	
color:red;
background:white;		
}

.button:active{
-moz-box-shadow: 3 3 5px #ccc;
-webkit-box-shadow: 3 3 5px #ccc;
box-shadow: 3px 3px 5px #ccc;
}
		




/* адаптивное меню  */

.container {
	max-width: 100%;
	padding: 0 20px;
	}
	
.menu {
	/*background-color: #5A62AA;  */
	padding: 5px 0;
	top:0;
	left:0;
position:fixed;
display:none;
width:100%;
text-align:right
	}
	
.menu .container {
	display: flex;
	align-items: center;
	justify-content: space-between;    
		}
		
		
.menu li a{
	display: block;
	margin:1px;
	padding:15px;
	list-style-type: none;
	color:#fff
}
  

.hamburger {
	display: none;
	font-size: 36px;
	padding:5px;
	text-shadow: 3px 3px 4px #ccc;
background: rgb(142,54,41);
background: linear-gradient(0deg, rgba(142,54,41,1) 0%, rgba(194,74,69,1) 50%, rgba(142,54,41,1) 100%);
}


.mobile-menu {
	display: none;
	padding: 10px 0;
}
.mobile-menu li {
	list-style-type: none;
	display: block;
	margin: 5px 0;
	color: #000;
	width:100%;
background: rgb(142,54,41);
background: linear-gradient(0deg, rgba(142,54,41,1) 0%, rgba(194,74,69,1) 50%, rgba(142,54,41,1) 100%);
}
.flex{display: flex;
	 justify-content: space-between;
}
.flex-item{
				width:45% 
}

@media only screen and (max-width : 992px){ 

body{
width:95%;
margin: 15% auto 2% auto;
}


.hamburger {
		display: block;
		cursor:pointer;		
		}
.menu{
	display:block;
	cursor:pointer;
}		
			
#mainmenu{
	display:none
}		

.title{
	margin-top:20%
}

h1{
	font-size:36px
}

.flex{flex-direction: column;
}
.flex-item{
				width:95%; margin:10px auto 10px auto
}

.a{margin:0 5% 2% 5%; width:85%; display: block; font-size:large; text-indent:5%; box-sizing:border-box;}
.b{margin:0 5% 1% 5%; width:85%; display: block; font-size:large}

.bottom_block{
width:90%;				
}

}