.domain_builder { background-color: rgb(247, 247, 247); border: 1px solid rgb(204, 204, 204); padding-top: 32px; }
.mySlides {display: none}
.imageFirst {vertical-align: middle; float: left; margin-bottom: 15px; width:100%; display: block;}
.imageSecond {vertical-align: middle; float: left; margin-bottom: 15px; width:100%; display: block;}
.imageThird {vertical-align: middle; float: left; margin-bottom: 15px; width:100%; display: block;}
.ihrenPromoTopic { width: 100%; text-align: center; color: rgb(33, 49, 77); font-size: 39px; line-height: 53px; }
.slideshow-container { max-width: 1250px; height: 419px; position: relative; margin: auto; padding: 20px 20px 0px 20px;}
.prev { cursor: pointer; position: absolute; top: 44.5%; padding: 7px 20px 10px 11px; color: white; font-size: 28px; transition: 0.6s ease;
user-select: none;
background: rgba(33, 49, 77, 0.9);
height: 19px;
width: 7px;
border-radius: 50%;
left: 0.199%;
z-index: 2;
}
.next { cursor: pointer;
position: absolute;
top: 44%;
padding: 7px 20px 10px 11px;
user-select: none;
color: white;
font-size: 28px;
transition: 0.6s ease;
height: 19px;
width: 7px;
background: rgba(33, 49, 77, 0.9);
border-radius: 50%;
right: 2%;
z-index: 2;
}
/* Caption text */
.textFirst, .textSecond, .textThird { color: rgb(33, 49, 77); font-size: 18px; padding: 15px 0px 2px 20px; background-color: white; }
.whiteColor1 { color: rgb(255, 255, 255); display: block; position: absolute; top: 72%; left: 3%; font-size: 18px; visibility: hidden; z-index: 2;}
.whiteColor2 {color: rgb(255, 255, 255);display: block;position: absolute;top: 72%;left: 35%;font-size: 18px;visibility: hidden;z-index: 2;}
.whiteColor3 {color: rgb(255, 255, 255);display: block;position: absolute;top: 72%;left: 67%;font-size: 18px;visibility: hidden;z-index: 2;}
.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background: rgb(204, 204, 204);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
margin-bottom: 28px;
}
.dot.active, .dot:hover {
background: rgb(132, 188, 52);
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.divFirst {
width: 32%;
height: auto;
float: left;
position: relative;
border: 1px solid rgb(204, 204, 204);
margin-right: 10px;
display: block;
opacity: 1;
}
.divSecond {
width: 32%;
height: auto;
float: left;
position: relative;
border: 1px solid rgb(204, 204, 204);
margin-right: 10px;
display: block;
opacity: 1;
}
.divThird {
width: 32%;
height: auto;
float: left;
position: relative;
border: 1px solid rgb(204, 204, 204);
display: block;
opacity: 1;
}
.mySlides {
width: 100%;
height: 100%;
clear: both;
}
.imagePhone {
    position: absolute;
top: 19%;
right: 5.8%;
border-radius: 16px;
height: 72%;
width: 157px;
}
.klickToggle1 {
width: 100%;
height: auto;
margin-top: -9.5px;
margin-left: 0px;
}
.klickToggle2 {
width: 100%;
height: auto;
margin-top: -9.5px;
margin-left: 0px;
}
.divFirst:hover img {
opacity: 1;
}
.divFirst:after, .divSecond:after, .divThird:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background: rgba(33, 49, 77, 0.9);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index: 1;
}
.divFirst:hover:after, .divSecond:hover:after, .divThird:hover:after, .tarifPassenden:hover {
opacity:0.9;
}
.tarifPassenden {
background: rgb(223, 0, 46);
border: none;
color: rgb(255, 255, 255);
font-size: 16px;
padding: 9px 26.5px;
position: absolute;
text-transform: uppercase;
font-weight: bold;
font-family: Open Sans;
cursor: pointer;
z-index: 2;
}
.firstButton1 {top: 44%;right: 10%;left: 7%;display: none;}
.secondButton2 {top: 44%;right: 0%;left: 39%;display: none;}
.thirdButton3 {top: 44%;right: 0%;left: 71%;display: none;}
.firstButton {top: 45%;right: 10%;left: 15%;display: none;}
.secondButton {top: 45%;right: 0%;left: 15%;display: none;}
.thirdButton {top: 45%;right: 0%;left: 15%;display: none;
}
.animate-right{position:relative;animation:animateright 0.8s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 0.8s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@media screen and (max-width: 1280px ) {
.whiteColor1 {top: 70%;left: 4%;}
.whiteColor2 {top: 70%;left: 36%;}
.whiteColor3 {top: 70%;left: 68%;}
}
@media screen and (max-width: 1170px ) {
.whiteColor1 {
top: 64%;
left: 4%;
}
.whiteColor2 {
top: 64%;
left: 36%;
}
.whiteColor3 {
top: 64%;
left: 68%;
}
}
@media screen and (max-width: 1140px ) {
.slideshow-container {
height: 338px;
}
.whiteColor1 {
top: 77%;
left: 4%;
}
.whiteColor2 {
top: 77%;
left: 36%;
}
.whiteColor3 {
top: 77%;
left: 68%;
}
}
@media screen and (max-width: 1040px ) {
.slideshow-container {
height: 320px;
}
.imagePhone {
top: 18%;
right: 0.8%;
height: 72%;
width: 157px;
}
.whiteColor1, .whiteColor2, .whiteColor3 {
display: none;
}
.tarifPassenden {
display: none !important;
}
.firstButton {
display: none !important;
}
.secondButton {
display: none important;
}
.thirdButton {
display: none !important;
}
.divFirst:after, .divSecond:after, .divThird:after {
display: none;
}
.textFirst, .textSecond, .textThird {
color: rgb(33, 49, 77) !important;
z-index: 1 !important;
background: white !important;
position: initial !important;
}
}
@media screen and (max-width: 980px ) {
.slideshow-container {
height: 303px;
}
.imagePhone {
top: 8%;
right: -2.2%;
height: 72%;
width: 131px;
}
}
@media screen and (max-width: 880px ) {
.slideshow-container {
height: 275px;
}
}
@media screen and (max-width: 800px ) {
.slideshow-container {
height: 256px;
}
.imagePhone {
top: 8%;
right: 1.8%;
width: 112px;
}
.prev {
left: 0.199%;
}
.next {
right: 0.8%;
}
}
@media screen and (max-width: 709px ) {
.slideshow-container {
height: 222px;
}
.divFirst {
width: 31%;
}
.divSecond {
width: 31%;
}
.divThird {
width: 31%;
}
.imagePhone {
top: 4%;
right: -2.2%;
width: 81px;
height: 64%;
}
.next {
right: 3%;
}
}
@media screen and (max-width: 499px ) {
.slideshow-container {
height: 410px;
}
.divFirst {
width: 100%;
display: block;
}
.divSecond {
width: 0%;
display: none;
}
.divThird {
width: 0%;
display: none;
}
.imagePhone {
top: 5%;
right: 2.8%;
border-radius: 16px;
height: 85%;
width: 167px;
}
.prev {
left: 5.199%;
}
.next {
right: 5.2%;
}
}
@media screen and (max-width: 460px ) {
.slideshow-container {
padding: 0px 17px 0px 15px;
height: 380px;
}
.ihrenPromoTopic {
width: 95%;
font-size: 32px;
line-height: 38px;
padding-right: 8px;
}
}
@media screen and (max-width: 414px ) {
.prev {
top: 44%;
}
.next {
top: 43.8%;
}
}
@media screen and (max-width: 400px ) {
.slideshow-container {
padding: 0px 17px 0px 15px;
height: 339px;
}
.imagePhone {
right: 0.8%;
}
}
@media screen and (max-width: 360px ) {
.imagePhone {
right: -0.2%;
}
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}