body{
min-height: 100vh;
    background: #ffffff;
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
    background: -linear-gradient(top, #ffffff 0%, #ffffff 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
    
    
    /*background: #c9dbe9;
    background: -webkit-linear-gradient(top, #c7cfd6 0%, #f7f7f7 100%);
    background: -linear-gradient(top, #c7cfd6 0%, #f7f7f7 100%);
    background: -moz-linear-gradient(top, #c7cfd6 0%, #f7f7f7 100%);*/
}


.top-left{
    background: #2852c7;
    width: 85%;
    position: fixed;
    height: 600px;
    border-radius: 90%;
    top: -450px;
    left: -600px;
}

.company{
    color: white;
    font-size: 1.8rem;
    bottom: 70px;
    left: 650px;
    position: absolute;
}

.bottom{
    width: 110%;
    bottom: -100px;
    height: 250px;
    position: fixed;
    background: url(../img/rocket1.png);
    background-position: bottom;
	  animation-name: MOVE-BG;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bottom-left{
	font-family: 'Allura', cursive;
	position: fixed;
    bottom: 0;
    left: 0;
    padding: 50px;
    font-size: 3.1rem;
	z-index:5;
}

.middle-left{
	position:fixed;
	left:0;
	top:250px;
		  animation-name: MOVE-BG;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
	
}

.owl-nav{
    position: absolute;
    width: 100%;
    top: calc(50% - 12px);
    left: 0;
}

.owl-carousel .owl-nav button.owl-prev{
float:left;
}
.owl-carousel .owl-nav button.owl-next{
float:right;
}

.owl-next img.right{
    transform: rotateZ(180deg);
}

.bg-secondary {
    background-color: #eaeaea!important;
}

.petek-1, .petek-2, .petek-3, .petek-4, .petek-5, .petek-6{
position:absolute;
top:-35px;
left:0;
width:150px;
}


.click-more{
    position: absolute;
    width: 200px;
    top: -150px;
    left: 120px;
    padding: 20px 20px 0 0;
}

.click-text{
    width: 75px;
    display: inline-block;
    position: relative;
    top: -110px;
    left: 70px;
    font-size: 0.9rem;
}

.click-youtube{
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation-iteration-count:infinite;
  cursor:pointer;
}

.item{
position:relative;
}

.item::after{
position: absolute;
    content: "";
    width: 1px;
    height: 25px;
    top: -25px;
    left: 50%;
    background: #d4d9de;
}
.left-box{
    width: 100%;
    padding-top: 80px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes MOVE-BG {
  10%, 90% {
    transform: translateY(-5%);
    transform: translateX(-5%);
  }
  
  20%, 80% {
    transform: translateY(-15%);
  }

  30%, 50%, 70% {
    transform: translateY(-30%);
  }

  40%, 60% {
    transform: translateY(30%);
	 transform: translateX(0%);
  }
 }
 
  /* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {  
body{
    background: -webkit-linear-gradient(top, #c7cfd6 100%, #f7f7f7 100%);
    background: -linear-gradient(top, #c7cfd6 100%, #f7f7f7 100%);
    background: -moz-linear-gradient(top, #c7cfd6 100%, #f7f7f7 100%);
}

 .company {
   color: white;
   font-size: 1.2rem;
   bottom: 70px;
   left: 650px;
   position: inherit;
   padding: 20px;
}
.left-box{
    width: 100%;
    padding-top: 0px;
}	
.top-left {
    background: #2852c7;
    width: 100%;
    position: inherit;
    height: auto;
    border-radius: 0;
    top: 0;
    left: 0;
	margin-bottom:15px;
}

.bottom-left {
    font-family: 'Allura', cursive;
    position: inherit;
    bottom: 0;
    left: 0;
    padding: 15px;
    font-size: 2.1rem;
}
}
 
 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
 .company {
    color: white;
    font-size: 1.4rem;
    bottom: 70px;
    left: 650px;
    position: inherit;
    padding: 20px;
}

.top-left {
    background: #2852c7;
    width: 100%;
    position: inherit;
    height: auto;
    border-radius: 0;
    top: 0;
    left: 0;
}

.bottom-left {
    font-family: 'Allura', cursive;
    position: inherit;
    bottom: 0;
    left: 0;
    padding: 15px;
    font-size: 2.1rem;
}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 


.click-more {
    position: absolute;
    width: 200px;
    top: -120px;
    left: 25px;
    /*top: -120px;*/
    /*left: 25px;*/

}

.click-more img{width:150px;}

.click-text {
    width: 75px;
    display: inline-block;
    position: relative;
    top: -72px;
    left: 40px;
    font-size: 0.6rem;
}

.top-left {
    left: -400px;
	background: #2852c7;
    width: 85%;
    position: fixed;
    height: 600px;
    border-radius: 90%;
    top: -450px;
}

.company{
color: white;
    font-size: 1.8rem;
    bottom: 40px;
    left: 450px;
    width: 400px;
    position: absolute;
	}

.petek-1, .petek-2, .petek-3, .petek-4, .petek-5, .petek-6{
width:100px;
}
.petek-1 {
    top: -25px;
    left: 0px;
}

.petek-2 {
    top: -15px;
    left: 120px;
}

.petek-3 {
    top: 55px;
    left: 215px;
}

.petek-4 {
    left: 215px;
    top: 170px;
}

.petek-5 {
    left: 120px;
    top: 270px;
}

.petek-6 {
    top: 280px;
    left: 0px;
}

}

@media (min-width: 1200px) { 

.click-more{
    position: absolute;
    width: 200px;
    top: -150px;
    left: 120px;
}

.click-more img{width:200px;}

.click-text{
    width: 75px;
    display: inline-block;
    position: relative;
    top: -110px;
    left: 70px;
    font-size: 0.9rem;
} 

.petek-1, .petek-2, .petek-3, .petek-4, .petek-5, .petek-6{
width:150px;
}

.petek-1{
    top: -40px;
    left: 0px;
}

.petek-2{
     top: -35px;
    left: 155px;
}

.petek-3{
        top: 75px;
    left: 275px;
}

.petek-4{
left: 275px;
    top: 235px;
}

.petek-5{
    left: 155px;
    top: 335px;
}

.petek-6{
    top: 340px;
    left: 0px;
}
    
}

@media (max-width: 1440px) { 

.click-more{
    position: absolute;
    width: 200px;
    top: -150px;
    left: -30px;
}

.click-more img{width:180px;}

.click-text{
    width: 75px;
    display: inline-block;
    position: relative;
    top: -100px;
    left: 60px;
    font-size: 0.8rem;
} 



/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) {  
.container{max-width:1250px;}

.top-left{
    background: #2852c7;
    width: 85%;
    position: fixed;
    height: 600px;
    border-radius: 90%;
    top: -450px;
    left: -600px;
}

.company{
	color: white;
    font-size: 1.8rem;
    bottom: 70px;
	width:auto;
    left: 650px;
    position: absolute;
}

.petek-1, .petek-2, .petek-3, .petek-4, .petek-5, .petek-6{
width:150px;
}

.petek-1{
    top: -40px;
    left: 0px;
}

.petek-2{
     top: -35px;
    left: 155px;
}

.petek-3{
        top: 75px;
    left: 275px;
}

.petek-4{
left: 275px;
    top: 235px;
}

.petek-5{
    left: 155px;
    top: 335px;
}

.petek-6{
    top: 340px;
    left: 0px;
}
    
}

@media (min-width: 1400px) {  
.company{
    bottom: 50px;
}
}

@media (min-width: 1800px) {  
.company{
    bottom: 50px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

.top-left {
    left: -400px;
}

.company{
color: white;
    font-size: 1.8rem;
    bottom: 40px;
    left: 450px;
    width: 400px;
    position: absolute;
	}

.petek-1, .petek-2, .petek-3, .petek-4, .petek-5, .petek-6{
width:100px;
}.
.petek-1 {
    top: -25px;
    left: 0px;
}

.petek-2 {
    top: -15px;
    left: 120px;
}

.petek-3 {
    top: 55px;
    left: 215px;
}

.petek-4 {
    left: 215px;
    top: 170px;
}

.petek-5 {
    left: 120px;
    top: 270px;
}

.petek-6 {
    top: 280px;
    left: 0px;
}

}