/*=============================menu======================*/
.hp-logo{
  text-align:center;
  margin-top:40px;
  position: relative;
    z-index: 70;
}

.line-1{
  width: 25px;
  transition:.3s;
  margin-top:10px;
  height: 3px;
  background-color:#000;
}
.line-2{
  width: 45px;
  transition:.2s;
  margin-top:10px;
  height: 3px;
  background-color:#000;
}
.line-3{
  width: 55px;
  transition:.1s;
  margin-top:10px;
  height: 3px;
  background-color:#000;
}
.line-1, .line-2, .line-3, .line-4{
  margin-top:5px;
  height:3px;
  background-color:#000;
}

.line-4{
  margin-top:-13px;
  width:65px;
}

.menu-bar{
  margin:unset;
  opacity: 0;
  text-align:center;
  transform: translateY(0);
  width: 65px;
}
.main-line:hover .menu-bar{
  display:block;
  opacity: 1;
  transition:.7s;
  transform: translateY(-10px);
}
.ver-line:last-child{
  display:none;
}

.dropbtn {
  background:transparent;
  font-size: 16px;
  height: 85px;
  width:150px;
}
.main-line:hover .line-1  {
  opacity: 0;
  transition:.4s;
  transform: translateY(65px);
}
.main-line:hover .line-2 {
  opacity: 0;
  transition:.7s;
  transform: translateY(45px);
}
.main-line:hover .line-3 {
  opacity: 0;
  transition:1s;
  transform: translateY(25px);
}
.dropdown {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 46px;
  margin-top: 42px;
  margin-left:20px;
}

.dropdown-content {
  opacity: 0;
  position: absolute;
  overflow: auto;
  overflow:visible;
  z-index: 1;
  right:0;
}

.dropdown-content a {
  height: 15px;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  margin-top: 20px;
  color: white;
  letter-spacing: 2px;
  text-align: center;
}
.dropdown-content{
  animation-name: verticle;
  animation-duration: .9s;
  animation-fill-mode: both;
}
@keyframes verticle {
  0% {
    opacity: 1;
    transform: translateY(00%);
  }
  100% {
    opacity: 0;
    transform: translateY(50%);
  }
}
.main-line{
  position:relative;
}
.ver-line{
  height:50px;
  width:3px;
  margin:0 auto;
  margin-top:20px;
  background-color:black;
}

.show{
  animation-name: verticle3;
  animation-duration: .9s;
  animation-fill-mode: both;
  opacity: 1;
}
@keyframes verticle3 {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
/*============================shopify-guru================================*/
.main-animation1{
  position:relative;
  background:{{ section.settings.back-color}};
  height: 31vw;
  width:100%;
  font-family: "Work Sans",sans-serif;

}
.animation-text1 {
  position: absolute;
  font-family: 'Guko', serif;
  color: white;
  top: 30%;
  margin: unset;
  right: 47%;
  font-size:4.5vw;
  transform: translate(-50%,-50%);
  animation-name: slideInLeft;
  animation-duration: 500ms;
  animation-fill-mode: both;
  transform: scale(2);
  text-transform:uppercase;
  letter-spacing:5px;
}
@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity:0;
  }
  100% {
    opacity:1;
    transform: translateX(0%);
  }
}
.animation-text2 {
  position: absolute;
  font-family: 'Guko', serif;
  color: white;
  font-size: 4.5vw;
  top: 54%;
  left: 50%;
  margin: unset;
  transform: translate(-50%,-50%);
  animation-name: shopify1;
  animation-duration: 500ms;
  animation-fill-mode: both;
  text-transform:uppercase;
  letter-spacing:5px;
}
.animation-text2>p{
  color:white;

}
.shopifytextr2>p{
  color:white;
}
@keyframes shopify1 {
  0% {
    opacity:0;
    transform: translateX(200%);
  }
  100% {
    opacity:1;
    transform: translateX(0%);
  }
}
.linet1 {
  height:4px;
  width: 13%;
  background-color: black;
  position: absolute;
  top: 40%;
  left: 58.5%;
  transform: translate(-50%,-50%);
}
.linet1 {
  animation-name: linet1;
  animation-duration: 500ms;
  animation-fill-mode: both;
  animation-delay: .5s;
}
@keyframes linet1{
  0% {
    transform: translateX(-300%);
    visibility: visible;
    opacity:0;
  }
  100% {
    transform: translateX(-30%);
    opacity:1;
  }
}
.linet2 {
  height:4px;
  width: 13%;
  background-color: black;
  position: absolute;
  top: 62%;
  left: 35%;
  transform: translate(-50%,-50%);
}
.linet2 {
  animation-name: linet2;
  animation-duration: 500ms;
  animation-fill-mode: both;
  animation-delay: .5s;
}
@keyframes linet2 {
  0% {
    transform: translateX(300%);
    /*   visibility: visible; */
    opacity:0;
  }
  100% {
    transform: translateX(0%);
    opacity:1;
  }
} 
.verticla-line{
  height:30vw;
  width:100%;
  position:relative;
}
.scroll-line{
  position:absolute;
  right: 50.5%;
  top: 42%;
  transform:translate(-50%,-50%);
  color:white;
  font-size:20px;
}
.scroll-line1{
  position:absolute;
  left:53%;
  top: 42%;
  transform:translate(-50%,-50%);
  color:white;
  font-size:20px;
}
.line-animate {
  position:absolute;
  top:35%;
  left:49%;
  transform:translate(-50%,-50%);
  width: 2px;
  height:53px;
  background-color:black;
  transition:3s;
  transform-origin: 0% 0%;
  transform: scaleY(1);
  animation-name: fadeInDown;
  animation-iteration-count:infinite;
  animation-direction: alternate;
  animation-duration: 1s;
  z-index:1;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity:1;
    transform: scaleY(.01);
  }
  100% {
    opacity:1;
    transform: scaleY(1.5);
  }
}
.shopify-Guru-bold{
  height: 31vw;
  width:100%;
  position:relative;
}
.bold-shopify {
  position: absolute;
  font-size: 9vw;
  font-family: 'Guko', serif;
  color: white;
  right: 50%;
  top: 0%;
}
.bold-Guru {
  position: absolute;
  font-size: 9vw;
  font-family: 'Guko', serif;
  color: white;
  right:45%;
  top:31%;
}
.text-wir {
  position: absolute;
  left: 68%;
  top: 27%;
  transform: translate(-50%,-50%);
  color:black;
  font-size:1.5vw;
}
/*=============scroll-down================*/
.main-rev{
  width:100%;
  height:500px;
  position:relative;
}
.shopifytextr1, .shopifytextr2{
  position: absolute;
  font-size:4.5vw;
  color:#fff;
}
.shopifytextr2 {
  top: 37%;
  left: 45%;
  color:#fff;
}
.line2r ,.line1r{
  position: absolute;
  background-color: black;
  height:5px;
  width:15%;
}
.line1r{
  top:31%;
  left:52%;
}
.line2r{
  top: 46%;
  left: 26%;
}

.shopifytextr1 {
  top:20%;
  right:50%;
  animation-name: slidetextr1 ;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: .2s;
}
@keyframes slidetextr1 {
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%);
  }
} 
.line1r{

  animation-name: line1r;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes line1r{
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(-300%);
  }
} 
.line2r{

  animation-name: line2r;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes line2r{
  0% {
    transform: translateX(0%);
  }
  100% {

    opacity:0;
    transform: translateX(300%);
  }
}

@keyframes slidetextr {
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(300%);
  }
} 
.shopifytextr2{

  animation-name: slidetextr2 ;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: .2s;
}
@keyframes slidetextr2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(50%);
  }
} 

/*==========================Contact-form-End======================================================*/
.contact-form.form-vertical {
  width: 60%;
  margin: 0 auto;
  border-radius: 5px;
  background: #eff3f6;
  box-shadow: 0px 10px 5px grey;
}
/*   .medium-up--one-half{
margin:10p% auto;
} */
form#ContactForm {
  padding: 10%;
}
input#contactFormbusinessname {
  width: 97%;
  margin-left: 3%;
}
label.show {
  padding-left: 3%;
  display: -webkit-box !important;
  
}
input.btn{
  background-color:#14cfd8;
}
textarea#ContactForm-message {
  height: 11vw;
}
input.btn:hover{
  background-color:#1faeb5 !important;
} 
.button-center{
  text-align:center;

}
.button-color{
  padding:20px;
  border:none;
  color:white;
  background-color:#14cfd8;
  box-shadow: 0 10px 10px rgba(0,0,0,0.4);
}
.lineClose2 {
  transform: rotate(-45deg);
  margin: -2px 0px 0px -1px;
  width: 40px;
  height: 3px;
  background-color: #000;
}
.lineClose1 {
  transform: rotate(45deg);
  margin: 0;
  width: 40px;
  height: 3px;
  background-color: #000;
}
#closeIcon{
  position: fixed;
  top: 65px;
  right: 98px;
  z-index: 90;
  display: none;
}
#closeIcon.showIcon{
  display:block;
}
#displayicon div{
  background-color: transparent; 

}
#displayicon h4.menu-bar{
  color: transparent;
}

#displayicon.showIcon div{
  background-color: #000;

}
#displayicon.showIcon h4.menu-bar{
  color: #000;
}
/*==========================hide-top-gap===================================*/
ins#aswift_0_expand {
  display: unset !important;
}
/* ===========================shopify-expert-section-start================================= */
.shopify-expert{
 	 position:relative;
     font-family: 'Guko', serif;
     height:100vh;
     margin-top:-100px;
     text-align:right;
     z-index:100;
}
.template-page .site-header__mobile-nav {
    background: transparent;
}
.template-page  .site-header {
    background: transparent;
}
.sopify-img1 {
    margin-top: -45px;
    position: absolute;
    top: 0;
    z-index:100;
    right: 0;
    margin-right: 10%;
}
.div-rotation-main{
    height:100%;
    width:100%;
    overflow:hidden;
    position:relative;
    animation: partial-rotation 50s linear infinite;
}
  .div-rotation {
     position:absolute; 
     right:-18%;
     top:-20%;
     height:500px;
     width:150%;
     background-color:#14cfd8;
     z-index:-1;
     animation-name: div-rotation;
     animation-duration: 5s;
     animation-iteration-count:infinite;
  }
.div-rotation1{
     position:absolute; 
     right:-20%;
     top:-20%;
     height:600px;
     width:150%;
     background-color:#f1f1f1;
     z-index:-1;
     animation-name: div-rotation;
     animation-duration: 5s;
     animation-iteration-count:infinite;
}
.shopify-expert-text {
    font-family: 'Guko', serif;
    letter-spacing: 5px;
    font-size: 96px;
    font-size: 6rem;
    z-index: 100;
    top: 35%;
    border-bottom: 10px solid #3d4246;
    left: 10%;
    position: absolute;
}
.subtitle-s-text {
    font-family: 'Lato', sans-serif;
    position:absolute;
    top:66%;
    left: 10%;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.3em;
    line-height: 1.4em;
    letter-spacing: 1px;
    font-weight: 700;
    z-index:1000;
    color: #003d40;
}
.line-animation-text{
	position:absolute;
	top:-11.5vw;
    left:7%;
    height:5px;
  	width:300px;
    background-color:black;
    transform: translate(0, 0px);
    transform-origin: 0 0;
    transition: all .3s ease;
}
.Essai-Gratuit, .VERSUCHEN-SIE-KOSTENLOS {
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    height: 45px;
    width: 180px;
    background-color: black;
    z-index: 1000;
    position: absolute;
    line-height: 45px;
    text-align: center;
    top: -13vw;
    left:12%;
    color: #fff;
    transform: translate(0, 0px);
    transform-origin: 0 0;
    transition: all .3s ease;
}
.INSTALLATION>a{
	color:white;
}
.Design-btn-text>a{
	color:white;
}
.VERSUCHEN-SIE-KOSTENLOS{
	left:27%;
    width:300px;
}
.Essai-Gratuit-main{
   width:100%;
   z-index:200;
   position:relative;
   transform: translate(0px, 0px);
   background:#14cfd8;
   transform-origin: 0 0;
   transition: all .3s ease;
} 
  .Essai-Gratuit-main:hover .VERSUCHEN-SIE-KOSTENLOS,.Essai-Gratuit-main:hover .Essai-Gratuit{
   transform: translate(10px, 0px);	
} 
.VERSUCHEN-SIE-KOSTENLOS:hover{
      padding-left: 20px;

}
/*  .Essai-Gratuit-main:hover .Essai-Gratuit{
   transform: translate(0px, 0px);
 	
} */
.btn {
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin-left: 10px;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.btn .leading-line {
    position: absolute;
    top: 32%;
    left: 0;
    -ms-transform: translate(-50px, -50%);
    -webkit-transform: translate(-50px, -50%);
    transform: translate(-50px, -50%);
    width: 65px;
    height: 4px;
    margin-right: 15px;
    transition: width 0.3s ease-out, transform 0.3s cubic-bezier(0.92, 0.77, 0.49, 1);
    background-color: #000000;
    transition-delay: .3s, .35s;
    opacity: .8;
}
.btn .leading-line:before {
    top: 50%;
    -ms-transform: rotate(30deg) translateY(-50%);
    -webkit-transform: rotate(30deg) translateY(-50%);
    transform: rotate(30deg) translateY(-50%);
}


.btn:not(.static-line):hover .leading-line:before, .btn:not(.static-line):hover .leading-line:after {
    width: 30px;
    transition-delay: .35s;
}
.btn .leading-line:after {
    bottom: 50%;
    -ms-transform: rotate(330deg) translateY(50%);
    -webkit-transform: rotate(330deg) translateY(50%);
    transform: rotate(330deg) translateY(50%);
}
.btn .content {
    position: relative;
    height: 45px;
    transition: all .3s ease;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}.btn .leading-line:before {
    top: 50%;
    -ms-transform: rotate(30deg) translateY(-50%);
    -webkit-transform: rotate(30deg) translateY(-50%);
    transform: rotate(30deg) translateY(-50%);
}
.btn .leading-line:after {
    bottom: 50%;
    -ms-transform: rotate(330deg) translateY(50%);
    -webkit-transform: rotate(330deg) translateY(50%);
    transform: rotate(330deg) translateY(50%);
}
.btn .leading-line:before, .btn .leading-line:after {
    content: "";
    position: absolute;
    right: 0;
    width: 0;
    height: 4px;
    opacity: .8;
    transform-origin: right;
    background-color: #000000;
    transition: all 0.3s cubic-bezier(0.92, 0.77, 0.49, 1) 0s;
}

.btn:not(.static-line):hover .leading-line {
    width: 100%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition-delay: .1s, 0s;
}
.content>a {
    color: white;
}
.content>a:hover {
    color: white;
}
/* -----------------------======================= */
.Essai-Gratuit:hover{
	transform: translate(10px, 0px) !important;
}
.Essai-Gratuit-main:hover .line-animation-text{
	transform: translate(30px, 0px) !important;
}

  @keyframes div-rotation{
0% {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

20% {
    -ms-transform: rotate(80deg);
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
}
30% {
    -ms-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
60% {
    -ms-transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
}
70% {
    -ms-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
}
100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
  }
.shopify-img-pick {
    position: absolute;
    bottom: 3%;
    right: 2%;
   z-index: 100;
}
.Shopify-fournit-text{
  background-color:#14cfd8;
  width:100%;
}
/*==========================section-seconds=====================*/
.main-color{  
 	background:#14cfd8;
    height:auto;
    z-index:100;
}
.Shopify-fournit,.Abhngig-vom-Budget,.Was-bietet {
    font-size: 18px;
    height:50px;
    font-size: 1rem;
    font-weight:bold;
    line-height: 1.2em;
    color: #003d40;
    text-align: center;
    width: 80%;
    max-width: 700px;
    margin:0  auto;
    padding-top:70px;
}
.Shopify-fournit{
   padding-top:110px;	
}
.animated-box-main{
    position:relative;
	width:40%;
    height:180px;
    margin-left:5%;
    margin-top:10%;
    font-weight:550;
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    font-size: 1.875rem;
    letter-spacing: 1.5px;
    color: #ffffff;
    letter-spacing: 3px;
}
.animated-box1{
 	position:absolute;
    width:95%;
    height:40%;
    left:4%;
    top:10%;
    transition:.3s;
    background:white;
}
.animated-box2{
 	position:absolute;
    width:95%;
    height:40%;
    background:#323232;
    line-height:60px;
    text-align:center;
}
.animated-box-main:hover .animated-box1{
  top:2%;
  left:1%;
  transition:.3s;	
}
.animated-box-text1-main{
    height:auto;
	position:relative;
    z-index:100;
    width:100%;
} 
.animated-box-text1{
    color: #f1f1f1;
    line-height: 1.4em;
    max-width: 320px;
    display: inline-block;
    text-align:left;
    position: absolute;
    left: 52%;
    bottom: 53px;
}
.INSTALLATION{
	left: 53%;
    top: -38px;
}
.INSTALLATION,.Design-btn-text,.TEMPLATES{
	height:40px;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 3px;
    position:absolute;
    text-transform: uppercase;
    color: #fff;
    transition: all .3s ease;
}
.INSTALLATION:hover,.Design-btn-text:hover{
    transform:translate(10px,0);
	transition: all .3s ease;
}
.animated-box-text2-main {
    position: relative;
    height: 200px;
    margin-top:6%;
}
.Die-Shopify {
    color: #f1f1f1;
    position: absolute;
    right: 52%;
    text-align: right;
    line-height: 1.4em;
    max-width: 320px;
}
.Design-btn-text {
      top: 68%;
     right: 52%;
}
.animated-box-mainr{
    position:relative;
}
.animated-box1r {
    position: absolute;
    height: 60px;
    width: 40%;
    top: 20px;
    left: 52.4%;
    background: white;
    transition: all .3s ease;
}
.animated-box2r{
    position: absolute;
    height: 60px;
    width: 40%;
    background:#323232;
    line-height:60px;
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    font-size: 1.875rem;
    letter-spacing: 1.5px;
    text-align:center;
    color:white;
    left:51%;
}
.animated-box-mainr:hover .animated-box1r  {
  top:5px;
  left:51.5%;
  transition: all .3s ease;
}
/* shopify-expert-section-end */
/*=============================Media-query================================*/

@media only screen and (min-width: 750px){
  .medium-up--one-half {
    width: 100%;
  }
}
@media (max-width:1900px){
  .scroll-line1 {
    left: 51.2%;
  }
}
@media (max-width:1440px){
  .scroll-line1 {
    left: 52.5%;
  }
}
@media (max-width:1024px){
  .scroll-line1 {
    left: 53%;
  }
}
@media (max-width:992px){
  .sopify-img1{
  	display:none;
  }
  .Essai-Gratuit-main{
    margin:0 auto;
   	text-align:center;
  }
  .shopify-img-pick{
  	bottom:-10px;
    right:10px;
  }
}
@media (max-width:768px){
  .scroll-line1 {
    left: 58%;
  }
  div#shopify-section-shopifyexperts{
	overflow:hidden;
  }
  .shopify-expert{
  margin-top:0;
  }
  .template-page .site-header__mobile-nav {
    background: #14cfd8;
}
.template-page  .site-header {
    background: #14cfd8;
}
}


@media (max-width:480px){
  .scroll-line1 {
    left: 59%;
  }
  .contact-form.form-vertical{
    width:100%;
  }
  .shopify-expert-text{
  	top:25%;
    left:0;
  }
  .Essai-Gratuit{
  left:20px;
  }
  .subtitle-s-text{
  	left:20px;
    text-align:left;
  }
  .Essai-Gratuit, .VERSUCHEN-SIE-KOSTENLOS{
    top:-16vw;
  }
  .VERSUCHEN-SIE-KOSTENLOS{
    left:20px;
    top:0;
  }
  .shopify-img-pick{
      bottom: -112px;
      left:20px;
  }
  .animated-box-main{
    width:80%;
    height: 100px;
    margin:0 auto;
  }
  .Shopify-fournit, .Abhngig-vom-Budget, .Was-bietet{
   height:100%;
   padding-top: 20px;
  }
  .Shopify-fournit{
  padding-top:110px;
  }
  .animated-box1r,.animated-box2r {
    position: absolute;
    height: 60px;
    width: 80%;
    left: 20px;
    top: 20px;
    transition: all .3s ease;
}
  .animated-box1r{
  left:30px;
  top:30px;
  }
  .animated-box-text1 {
    padding: 20px 20px;
    max-width:unset;
    text-align: center;
    position: unset;
  }
  .INSTALLATION, .Design-btn-text, .TEMPLATES{
     position:unset;
    text-align:center;
  }
  .animated-box2,.animated-box1{
    height:60px;
    top:30px;
  }
  .animated-box1{
  top:45px;
  }
  .Die-Shopify {
    padding: 0 20px;
    top: 117px;
    text-align: center;
    line-height: 1.4em;
    max-width: unset;
    right:unset;
}
  .animated-box-mainr{
     height:100px;
     position:unset;
  }
  .Design-btn-text {
    padding-top: 250px;
  }
  .animated-box-text2-main{
  height:275px;
  }
  .line-animation-text{
  	display:none;
  }
}
@media (max-width:320px){
  .scroll-line1 {
    left: 64%;
  } 
  .Design-btn-text {
/*     padding-top: 240px; */
 }
  .Die-Shopify{
  top:70px;
  }
  .animated-box-text1{
   padding:0 20px;
  }
   .animated-box2r{
  	top:-15px;
  }
  .animated-box1r{
  top:0px;
  }
  .animated-box-main{
    height:90px;
    margin-top:10px;
  }
  .animated-box2, .animated-box1 {
    top: 0px;
  }
  .animated-box1 {
    top: 16px;
 }

}