/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@font-face{
  font-family: "roboto-regular";
  src: url(fonts/RobotoCondensed-Regular.ttf);
  font-display: swap;
}
html{
  scroll-behavior: smooth;
}

body {
  font-family: 'roboto-regular';
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}
.cover
{
	padding-bottom:10px;
}


nav{
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.card{
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 5px;
	min-height: 100%;
}
.card-1{
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 5px;
}

.masthead {
  height: 510px;
  background-image: url('../../img/35.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}






/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */


@media screen and (min-width: 769px)
{


  #orbit-system {
    position: relative;
    width: 18em;
    height: 18em;
    margin: 0 auto;
  }
  
  .system {
    position: relative;
    width: 100%;
    height: 100%;
    
    -webkit-transform: rotateX(75deg) rotateY(-30deg);
    transform: rotateX(75deg) rotateY(-30deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
   .satellite-orbit, .satellite {
    position: absolute;
    top: 50%;
    left: 50%;
    
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .planet {
    position: absolute;
    width: 18em;
    height: 18em;
    left: 0%;
    top:-20%;
    background: url('../../img/rikk.png');
    background-size: cover;
    
    text-align: center;
    line-height: 9em;
    
    -webkit-transform: rotateY(30deg) rotateX(-75deg);
    transform: rotateY(30deg) rotateX(-75deg);
  }
  
  .satellite-orbit {
    width: 22em;
    height: 22em;
    margin-top: -14em;
    margin-left: -10em;
    
    border: none;
    border-radius: 50%;
    
    -webkit-animation-name: orbit;
    animation-name: orbit;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  
  .satellite {
    position: absolute;
    top: 100%;
    width: 5em;
    height: 5em;
    margin-top: -1.5em;
    margin-left: -1.5em;
    
    
    background: url(../../img/satellite.png);
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 3em;
    
    -webkit-animation-name: invert-orbit;
    animation-name: invert-orbit;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
}
@media screen and (min-width: 1440px)
{
.cart{
margin-left: 5em;
}
}
@media screen and (max-width: 768px)
{
  
#orbit-system {
  position: relative;
  width: 15em;
  height: 15em;
  margin: 0 auto;
}

.system {
  position: relative;
  width: 100%;
  height: 100%;
  
  -webkit-transform: rotateX(75deg) rotateY(-30deg);
  transform: rotateX(75deg) rotateY(-30deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

 .satellite-orbit, .satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.planet {
  position: absolute;
  width: 11em;
  height: 11em;
  left: 10%;
  top:-10%;
  background: url('../../img/rikk.png');
  background-size: cover;
  
  text-align: center;
  line-height: 9em;
  
  -webkit-transform: rotateY(30deg) rotateX(-75deg);
  transform: rotateY(30deg) rotateX(-75deg);
}

.satellite-orbit {
	width: 15em;
  height: 15em;
  margin-top: -12em;
  margin-left: -8em;
  
  border: none;
  border-radius: 50%;
  
  -webkit-animation-name: orbit;
  animation-name: orbit;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.satellite {
  position: absolute;
  top: 100%;
  width: 4em;
  height: 4em;
  margin-top: -1.5em;
  margin-left: -1.5em;
  
  
  background: url(../../img/satellite.png);
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 3em;
  
  -webkit-animation-name: invert-orbit;
  animation-name: invert-orbit;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
}

svg{
 width: 32px;
 height: 32px;
 opacity: .6 ;
}
svg:hover{
 width: 32px;
 height: 32px;
 
 opacity: .8 ;
}
@-webkit-keyframes orbit {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
@keyframes orbit {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

/*
In order to invert the rotation, do the rotate* transforms in reverse order.

Here, we rotated the system with rotateX(75deg) rotateY(-30deg), and then we are animating the rotation of the orbit with rotateZ(0-360deg). To reverse that, we need to reverse the last transform applied (rotateZ), then rotateY, then rotateX.

The rotateX/Y reversal is easy since it's not animated, so just use its opposite (30deg, -75deg). The rotateZ is trickier since it's animating, but since it's rotating from 0 to 360, we just need to animate the satellite from 360 to 0.
*/
@-webkit-keyframes invert-orbit {
    0% {
        transform: rotateZ(360deg) rotateY(30deg) rotateX(-75deg);
    }

    100% {
        transform: rotateZ(0deg) rotateY(30deg) rotateX(-75deg);
    }
}
@keyframes invert-orbit {
    0% {
        transform: rotateZ(360deg) rotateY(30deg) rotateX(-75deg);
    }

    100% {
        transform: rotateZ(0deg) rotateY(30deg) rotateX(-75deg);
    }
}

.card{
  margin-top: 1em;
}
.card-1{
  margin-top: 1em;
}
#contact .svg{
  width: 42px;
}
a:link{
  text-decoration: none;
  color:#222;
}
a:hover{
  text-decoration: none;
}
/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}




/*Form*/


.form{
  width: 100%;
  padding: 15px;
  background:#f8f8f8;
  border:1px solid rgba(0, 0, 0, 0.075);
  margin-bottom:25px;
  color:#727272 !important;
  font-size:13px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.form:hover{
  border:1px solid #8BC3A3;
}

.form:focus{
  color: white;
  outline: none;
  border:1px solid #8BC3A3;
}

.textarea{
  height: 200px;
  max-height: 200px;
  max-width: 100%;
}

/* Generic Button Styles */

.button{
  padding:8px 12px;
  background:#0A5175;
  display: block;
  width:120px;
  margin:10px 0 0px 0;
  border-radius:3px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  text-align:center;
  font-size:0.8em;
  box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
}

.button:hover{
  background:#8BC3A3;
  color:white;
}

/* Send Button Styles */

.form-btn{
  width:180px;
  display: block;
  height: auto;
  padding:15px;
  color:#fff;
  background:#8BC3A3;
  border:none;
  border-radius:3px;
  outline: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin:auto;
  box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
}

.form-btn:hover{
  background:#111;
  color: white;
  border:none;
}

.form-btn:active{
  opacity: 0.9;
}
center{
margin-top:330px;
}
input {
  position: relative;
 
}

.form-btn
{
background: #64AA2B !important;
}