@font-face {
    font-family: pompadur;
    src: url(../fonts/pompadur.ttf);
}
@font-face {
    font-family: snell;
    src: url(../fonts/snell.ttf);
}

@font-face {
    font-family: rose;
    src: url(../fonts/rose.ttf);
}


body {
    padding: 0;
    margin: 0;
}

.header {
    text-align: center;
    font-family: pompadur;
    font-weight: bold;
    color: #fff;
    /* padding: 4% 0; */
    /* background-image: url(../images/pink_fon_3.jpg); 
    background-size: cover; */
    
    
}

.header a {
    text-decoration: none;
    color: #FFF;
    font-size: 30px;
}

.header-title {
    
    position: absolute;
    top: 5px;
    z-index: 99;
    text-align: center;
    background: rgb(193, 127, 166, 0.4);
    
}

.header-title h1 {
    font-size: 50px;
}

.header-title p, h1 {
    
    line-height: 1;
}



.main-banner {
    
    color: #FFF;
    background-image: url(../images/fon.jpg);
    position: relative;
    display: flex;
    justify-content: center;
    border-top: 5px solid #C46D40;
    
    background-size: cover;
    height: 260px;
}
.zodiac {
    background-image: url(../images/banner-zodiak1.png);
    background-size: auto;
    overflow: hidden;
    
    opacity: .7;
    height: 240px;
    width: 240px;
    z-index: 2;
    background-repeat: no-repeat;
    animation: rotation 30s linear 0s infinite ;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

header {
    border-bottom: 5px solid #C46D40;
}
.header_h1 {
    text-align: center;
    font-size: 40px;
    position:absolute;
    z-index: 99;
    display: flex;
    top: 30%;
    font-family: rose;
}

.main-banner p {
    text-align: center;
    font-size: 30px;
    position: absolute;
    z-index: 99;
    top: 55%;
    font-family: rose;
}
.services {
    padding: 5% 0;
}
.wrap-services {
    background-image: url(../images/fon.jpg);
    background-size: 250%;
    border-top: 5px solid #C46D40;
    border-bottom: 5px solid #C46D40;
    padding: 5% 0;
}

.services-body {
    background-color: rgba(18, 35, 156, 0.5);
    padding: 5% 0;
    border: 1px solid #C46D40;
    border-radius: 2%;
    width: 460px;
    
    
}
.row-header {
    margin: 0px auto;
    padding: 0px auto;
    font-family: snell;
}
.row-content {
     margin: 0px auto;
    padding: 0px auto;
    border-bottom: 1px ridge; 
    margin-bottom: 20px;
    width: 100%;
}
.media-body {
    background-color: #ff95f4;
    color: #212529;
}
.btn-pink {
    background-color: #6366D7;
    color: white;
    
}

.btn-green {
    background: #a0ff25;
}

#slider {
	width:300px;
	overflow:hidden;
	border: 3px solid #C46D40;
	height:600px;
	position:relative;
	margin:auto;
    border-radius: 1%;
}

#slider ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
}

#slider ul li img {
	display: block;
    width: 300px;
}

.back-image {
    /* background-image: url(../images/fon_3.png); */
    color: black;
    
    padding: 5% 0;
    
}

.image {
    background-image: url(../images/fon_3.png);
}

.border-my {
    border-top: 1px solid #C46D40;
}
.border-my-bottom {
    border-bottom: 1px solid #C46D40;
    padding-bottom: 5%;
}

.cursive {
    font-family: pompadur;
}

#blink {
    
    animation: blink 0.8s linear infinite;
  }
  @-webkit-keyframes blink {
    50% { color: rgb(34, 34, 34); }
    51% { color: rgba(34, 34, 34, 0); }
    100% { color: rgba(34, 34, 34, 0); }
  }
  @keyframes blink {
    50% { color: rgb(34, 34, 34); }
    51% { color: rgba(34, 34, 34, 0); }
    100% { color: rgba(34, 34, 34, 0); }
  }





.stars {
    position: relative;
    overflow: hidden;
    
    
    
    background:  url(../images/e77a7caf9935450fadf788ed0e98e9f1.png);
  }
  
  .blink, .blink_2, .blink_3, .blink_4 {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    opacity: 0;
    
    background: url(../images/e77a7caf9935450fadf788ed0e98e9f1.png);
    
    -webkit-animation: stars 5s linear infinite;
    animation: stars 5s linear infinite;
  }
  
  .blink_2 {
    background-position: 100px 100px;
    
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  
  .blink_3 {
    background-image: url(../images/72e5d64c5b7444aa81987f069417435b.png);
    background-position: 300px 100px;
    
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  
  .blink_4 {
    background-image: url(../images/72e5d64c5b7444aa81987f069417435b.png);
    background-position: 0 0;
    
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    
  }
  
  @-webkit-keyframes stars {
    0%, 50%, 100% {opacity: 0;}
    1%, 49% {opacity: 1;}
  }
  
  @keyframes stars {
    0%, 50%, 100% {opacity: 0;}
    5%, 45% {opacity: 1;}
  }




















  div.cosmos {
    background: url(../images/pink_fon_3.jpg);
    background-size: cover;
    box-sizing: border-box;
    perspective: 600px;
    height: 200px;
    overflow:hidden;
 }
 
 .planets{
     width: 90vw;
     height: 30vw;
     margin: 0px auto;
     transform: rotateX(70deg);
     transform-style: preserve-3d;
 }
 
 .block1 {
    transform-style: preserve-3d;
    /* borde: 1px solid gold; */
    border-radius: 50%;
    position: absolute;
    animation: orbe infinite linear;
 }
 
 .orbit_sun {
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    animation: none;
 }
 
 .orbit_mercury {
    width: 130px;
    height: 130px;
    top: calc(50% - 65px);
    left: calc(50% - 65px);
    animation-duration: 6s;
 }
 
 .orbit_venus {
    width: 170px;
    height: 170px;
    top: calc(50% - 85px);
    left: calc(50% - 85px);
    animation-duration: 8s;
 }
 
 .orbit_earth {
    width: 230px;
    height: 230px;
    top: calc(50% - 115px);
    left: calc(50% - 115px);
    animation-duration: 10s;
 }
 
 .orbit_moon {
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    left: calc(50% - 140px);
 }
 
 .orbit_mars {
    width: 310px;
    height: 310px;
    top: calc(50% - 155px);
    left: calc(50% - 155px);
    animation-duration: 12s;
 }
 
 .orbit_jupiter {
    width: 400px;
    height: 400px;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    animation-duration: 14s;
 }
 
 .orbit_saturn {
    width: 550px;
    height: 550px;
    top: calc(50% - 275px);
    left: calc(50% - 275px);
    animation-duration: 16s;
 }
 
 .orbit_uran {
    width: 650px;
    height: 650px;
    top: calc(50% - 325px);
    left: calc(50% - 325px);
    animation-duration: 18s;
 }
 
 .orbit_neptun {
    width: 750px;
    height: 750px;
    top: calc(50% - 375px);
    left: calc(50% - 375px);
    animation-duration: 20s;
 }
 
 .block2 {
    position: absolute;
    /* borde: 1px solid white; */
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: invert infinite linear;
 }
 
 .sun {
    width: 100px;
    height: 100px;
    background: url(../images/FuE8.png);
    background-size: cover;
    transform: rotateX(-80deg);
    animation: sun 90s infinite linear;
 }
 
 .mercury {
    width: 15px;
    height: 15px;
    top: 60px;
    left: -8px;
    background: url(../images/FuE4.png);
    animation-duration: 6s;
 }
 
 .venus {
    width: 25px;
    height: 25px;
    top: 75px;
    left: -15px;
    background: url(../images/FuFB.png);
    animation-duration: 8s;
 }
 
 .earth {
    width: 30px;
    height: 30px;
    top: 100px;
    left: -20px;
    background: url(../images/FuE1.png);
    animation-duration: 10s;
 }
 
 .moon {
    width: 8px;
    height: 8px;
    top: 16px;
    left: -5px;
    background: url(../images/FuE5.png);
    animation-name: moon;
    animation-duration: 10s;
 }
 
 .mars {
    width: 25px;
    height: 25px;
    top: 142px;
    left: -15px;
    background: url(../images/FuE3.png);
    animation-duration: 12s;
 }
 
 .jupiter {
    width: 60px;
    height: 60px;
    top: 170px;
    left: -30px;
    background: url(../images/FuE2.png);
    animation-duration: 14s;
 }
 
 .saturn {
    width: 90px;
    height: 50px;
    top: 250px;
    left: -40px;
    background: url(../images/FuE7.png);
    animation-duration: 16s;
 }
 
 .uran {
    width: 20px;
    height: 20px;
    top: 315px;
    left: -10px;
    background: url(../images/FuFA.png);
    animation-duration: 18s;
 }
 
 .neptun {
    width: 20px;
    height: 20px;
    top: 365px;
    left: -10px;
    background: url(../images/FuE6.png);
    animation-duration: 20s;
 }
 
 .block2 {
    background-size: cover;
 }
 
 @keyframes sun{
    0%{transform:rotateX(-80deg) rotateZ(0deg);}
    100%{transform:rotateX(-80deg) rotateZ(360deg);}
 }
 
 @keyframes orbe {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
    100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
 }
 
 @keyframes invert {
    0% {transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg);}
    100% {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
 }
 
 @keyframes moon {
    0% {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
    100% {transform: rotateX(90deg) rotateY(-360deg) rotateZ(0deg);}
 }
 


 .footer
{
    
    
    
}
.footer-main
{
    display: grid;
    grid-template-columns: 1fr;
    
    padding: 5% 5% 10%;
}
.copyright
{
    font-style: italic;
    
    margin: 0 0 40px 40px;
}
.copyright p
{
    margin: 0;
}
.copyright-wrap
{
    display: flex;
    justify-content: space-between;
}
.site
{
    margin-right: 40px;
}
.site a
{
    
    font-style: italic;
    font-size: 11px;
    color: #000;
}

/*Footer телефон*/
.footer-phones
{
    
    border: 1px solid hsla(0, 0%, 110%, .5);
    
}
.inner
{
    display: flex;
    
    padding: 40px;
    flex-direction: column;
    align-items: center;
}

.phones-elem  li{
    list-style-type: none;
}

.phones-elem a {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.phones-elem {
    padding: 0;
    margin: 0;
}
.phone
{
    background: 
    linear-gradient(to bottom left, #ffb300 0%, #fd0 100%) ;
    min-width: 16px;
    height: 16px;
    width: 45px;
    min-height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    margin-bottom: 20px;
}
.phone img
{
    position: relative;
    top: 15%;
    left: 15%;
}
.inner a
{
    
}

/*Footer социальные сети*/
.whatsapp-icon
{
    width: 45px;
    max-width: 45px;
    margin-right: 20px;
}
.footer-social
{
    border: 1px solid hsla(0, 0%, 110%, .5);
    display: flex;
    justify-content: center;
    border-left: none;
}
.social-inner
{
    display: flex;
    
    
    
    align-self: center;
}
.instagram-icon
{
    width: 45px;
    
    
    max-width: 45px;
    
}
.ok-icon
{
    width: 43px;
    border-radius: 10px;
    
    margin-left: 20px;
}