*, *:before, *:after {
  box-sizing: border-box;
}


html {
  overflow-y: scroll;
}


body, html {
    height: 100%;
}
    
    
  body {
  background: black url(/img/title.jpg) center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
     
  font-family: 'PT Sans';
} 

     .cont { 
  max-width: 90%;
        
  margin: auto;
  border-radius: 4px;} 
     .centered {
  top: 30%;
  left: 30%;
  text-align: center;
}

    .pad { 
             background:rgba(255, 255, 255, 0.9);
         padding: 30px;
  max-width: 600px;
        
  margin: auto;
  border-radius: 20px;}  


a {
  text-decoration: none;
  color: #1ab188;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.linka {
  text-decoration: none;
  color: #ffffff;
  transition: .5s ease;
}
.linka:hover {
  text-decoration: none;
  color: #ffff11;
  transition: .5s ease;
}



.active {
  background-color: #777; /* Add an active/current color */
}
     .linkc {
  text-decoration: none;
  color: blue;
  transition: .5s ease;
/*         text-decoration: underline;*/
} 

.form {
 background: rgba(19, 35, 47, 0.8);
  padding: 40px;
  max-width: 600px;
  margin: auto;
  border-radius: 15px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

  


       .form1 {

  padding: 0;
  max-width: 600px;
  margin: auto;
  border-radius: 15px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}   



    .formpad {
 padding: 20px 0 0 0;
}
@media only screen and (max-width: 600px) {
    .formpad {
 padding: 0px 0 0 0;
}
    }

@media screen and (max-width: 800px) {
  h4 {
    margin: 10px 0px 7px 0px; /* The width is 100%, when the viewport is 800px or smaller */
  }  
    .homebtn {padding:3px 0px 0px 8px;}
     .tab-group li a {padding:10px;font-size: 100%;}   
    
        h3 {font-size: 110%;}
    input, textarea {padding: 5px 0 0 0;}    
         .pad { padding: 20px;}
}
/* Dropdown Button */



     .homebtn {
/*   background: rgba(35, 35, 47, 0.9);*/
    padding:0 0px 0px 10px; 
    font-size:170%;
  
     float:left;
    border: none;

     transition: .5s ease;
}

@media screen and (max-width: 800px) {
  h4 {
    margin: 10px 0px 7px 0px;; /* The width is 100%, when the viewport is 800px or smaller */
  }
    input, textarea {padding: 5px 0 0 0;}    
    .homebtn {padding:3px 0px 0px 8px;}
     .tab-group li a {padding:10px;font-size: 100%;}   
}

     .homebtn a
     { color: #ffff11; transition: 1s ease; }
       .homebtn a:hover {color: #1ab188;}
/*
    .homebtn a
     { color: #1ab188; transition: 1s ease; }
     .homebtn a:hover {color: #ffff11;}
*/

div.userimage {
    padding: 10px 0 10px 0;
}


div.userimage img {
    width: 90%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #777;
}  


.pimg

{
    width: auto;
    max-width: 90%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #777;
}    


/* The container <div> - needed to position the dropdown content */
.dropdown {
    float:right;
    position: relative;
    display: inline-block;
    
}

.dropbtn {
/*   background: rgba(35, 35, 47, 0.9);*/
   background:  rgba(19, 35, 47, 0.9);
    border: 1px;
    border-radius: 10px;
    color: #a0b3b0;
   border-right: 1px solid #bbb;border-left: 1px solid #bbb;
    padding: 11px;
    font-size: 90%;
     transition: .5s ease;
   
    
}









.dropdown-content a {
    color: #a0b3b0;
    padding: 12px;
    text-decoration: none;
    display: block;
    border: 1px;
    border-radius: 10px;
}


    .dropdown-content {
    display: none;
        float:right;
    position: relative;
/*        left: -50px;*/
   background:rgba(19, 35, 47, 0.9);
     border-radius: 10px;
      color: #a0b3b0;
 font-size: 90%;
    text-align: center;

}





/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(19, 35, 47, 0.9); color:white; cursor:pointer;}

 .dropdown:hover  .dropdown-content {display: block;} 
  .dropdown:hover   .dropbtn {display: none;} 





.tab-group {

 overflow: auto;
/*     clear:left;*/
  list-style: none;
  padding: 0;
    width: 100%;
  margin: 0 0 10px 0;
}
/*
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
*/
.tab-group li a {
 
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 130%;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

/*
h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}
*/
.logobox
    {
    float: left;
        text-align: center;
    max-width: 400px;
    padding: 0;
    margin: 0 30px 10px 10px;
 
}
feedb
     {
    float: right;
        text-align: center;
    max-width: 400px;
    padding: 0;
    margin: 0 30px 10px 10px;
}

h1 { 
    display: block;
    font-size: 200%;
    margin-top: 0;
    margin-bottom: 0;
    color: black;
    font-weight: 300;

}

logo{ 
    display: block;
    font-size: 300%;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 300;
    color: black;

}

h2 { 
    display: block;
    font-size: 160%;
    margin-top: 0;
    margin-bottom: 0;
    color: black;
    font-weight: 300;

} 
h3 { 
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
   color: black;
    font-size: 130%;
   font-weight: 400;
}  
h4 { 
  display: block;
    font-size: 100%;
    color: black;
    font-weight: 300;
    margin: 0 0 10px;
}  
h5 { 
  display: block;
    font-size: 100%;
    color: #ffffff;
/*    font-weight: 300;*/
    margin: 0 0 0 0;
     font-weight: 600;
} 

        h7 { 
  display: block;
    font-size: 70%;
    color: #ffffff;
            font-weight: 300;}

h6 { 
  display: block;
    font-size: 60%;
    color: #fc1f1f;
/*    font-weight: 300;*/
    margin: 0 0 0 0;
}

  h2 {color:black; margin-top: 15px;}
       h3 {color:black; margin-top: 15px;}
      h4 {color:black; font-family: 'Times'; margin-top: 15px;}
      p {color:black; font-size: 110%; margin-top: 15px; line-height: 130%}




.alignleft {
	float: left;
}
.alignright {
	float: right;
}

    #lon,#lat,#near {
    display: none;
}
    
    #citylb,.labels1 { display:inline; font-size: 100%;}

label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;

}


label .req {
  margin: 2px;
  color: #1ab188;
}

label.active {
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  left: 2px;

}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

img {
    width:50px;
}
input {
    height:40px;
}
textarea {
    height:10em;
}

input, textarea {
  font-size: 110%;
  display: block;
  
  width: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

/*
textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
*/

 input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}  

.field-wrap {
  position: relative;
  margin-bottom: 5px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.top-row1 > div {
  margin: auto;
  width: 60%;
}
.top-row2 > div {
  float: center;
  width: 80%;
 
}
.button  {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 200%;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus,
.button1:hover, .button1:focus {
  background: #179b77;
}
.button2:hover, .button2:focus 
{
  color: #179b77;
}
.button1 {
 border: 0;
    
  outline: none;
  border-radius: 0;
  padding: 4px;
  font-size: 150%;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
    
    
}
.button2 {
 border: 0;
  border-radius: 20;  
/*  outline: none;*/
 font-family: 'Titillium Web', 'PT Sans';
  padding: 4px;
  font-size: 150%;
  font-weight: 400;
/*      text-decoration: none;*/
  color: #ffff11;
/*  text-transform: uppercase;*/
/*  letter-spacing: .1em;*/
  background:none;
  transition: all 0.5s ease;
/*  -webkit-appearance: none;*/
    margin:auto;
    
}
.button-block {
  display: block;
  width: 100%;
}
 
    .button3 {
  border: 1px solid #a0b3b0;
  border-radius: 5px;  
  font-family: 'Titillium Web','PT Sans';

  font-size: 150%;
  font-weight: 400;
 background:gray; color:aliceblue;
  transition: all 0.5s ease;
    margin:auto;
    
}
    
    .button3:hover, .button3:focus 
{
  color: #179b77;
}

   
      .button3:hover {background:seagreen;color:yellow}

.forgot {
  margin-top: -20px;
  text-align: right;
}


.custom-select {
  position: relative;
    
/*  font-family: Arial;*/
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
/*  background-color: DodgerBlue;*/
/*    color: rgba(255, 255, 255, 0.7);*/
 
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
    
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  border: 1px solid #a0b3b0;
  color: #ffffff;
  padding: 8px 16px;
  
/*  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/

  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: rgba(19, 35, 47, 0.9);
/*    color: rgba(255, 255, 255, 1);*/
  top: 100%;
  left: 0; 
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}


/*Таки ксс для вывода страницы запроса*/
.row_search {
    border-radius: 20px;
    background: rgba(19, 35, 47, 0.7);
    color: white;
/*    padding: 25px;*/
    margin:  0 0 5px 0;
}
.row_search .wrap{
/*     display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    box-sizing: content-box;*/
 
    background: rgba(35, 35, 47, 0.7);
    width: 90%;
    margin: auto;
}
.row_search .photo{
  flex-basis:100px;
  
  float:right;
}
.search {
  clear:both;

}
.wrap2 {
  display:flex;
}


/* The Modal (background) */

    
.modal {
    
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* Modal Content */


.modal-content {
         background: #c1bdba;
       border-radius: 20px;
    border: 1px solid #888;
  position: relative;
     background-color: white;
background-color: rgba(255,255,255,0.9);
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 600px;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.ranger {
}
.player {
}    
.playbutton {
padding: 7px;
min-width: 30px;
 font-size: 100%;
  cursor: pointer;
} 
.dwnbtn{
     cursor: pointer; 
}
.upbtn{
     cursor: pointer; 
}
 .linkb {
  color: #ffff11;
}     
.pbarstyle
    {   -webkit-appearance: none;
    width: 50%;
    height: 15px;
    background: hsl(44,100%,44%);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;}
    
.playtime
    {display:inline; 
     padding: 0 10px 0px 5px;}
    
    
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    background: rgba(19, 35, 47, 0.9);;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
}      

    ul 
     {font-size: 110%;}


     .pcolor
     {
    color: green; font-style: italic;
} 
     
     #toc_container {
/*    background: #f9f9f9 none repeat scroll 0 0;*/
/*    border: 1px solid #aaa;*/
    display: table;
/*    font-size: 95%;*/
    margin-bottom: 1em;
    padding: 5px;
    width: 100%;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important; font-size: 100%;
}



.icon-bar {
  width: 100%; /* Full-width */
  background-color: #555; /* Dark-grey background */
  overflow: auto; /* Overflow due to float */
}

.icon-bar a {
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  width: 25%; /* Equal width (5 icons with 20% width each = 100%) */
  padding: 5px 1px; /* Some top and bottom padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
 font-size: 17px; /* Increased font size */
}

.icon-bar a:hover {
  background-color: #777; /* Add a hover color */
}

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

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}