﻿
.SummerContainer {
  background-color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.TopSection {
  height: 660px;
  background: #19a4c5 url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/header.jpg') center top no-repeat;
  background-size: 100%;
  text-align: center;
  padding-top: 100px;
  position: relative;
}
.TopSection p {
  color: #37474c;
  font-size: 20px;
  width: 60%;
  margin: 30px auto;
}
.TopSectionTitle {
  font-size: 75px;
  font-weight: 300;
  line-height: 60px;
  color: #5565b0;
  text-transform: uppercase;
}
.TopSectionTitle span {
  font-weight: 800;
  color: #3dc0c2;
  font-size: 50px;
  line-height: 50px;
}
.eksoplismos_title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.CategoriesTitle {
  padding: 0 15px;
}
.EquipmentWrapper {
  background-color: #19a4c5;
  padding-bottom: 50px;
  background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/watermelon.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/orange.png');
  background-position: 10px center, 95% 95%;
  background-repeat: no-repeat;
}
.EquipmentContainer {
  width: 90%;
  margin: 0 auto;
  padding-top: 80px;
}
.Boxes {
  float: left;
  height: 400px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.Boxes img {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Boxes .ProductCircle {
  transition: all linear 0.35s;
}
.Boxes .ProductImg {
  transition: all linear 0.18s;
}
.ThreeBoxes {
  width: 33.3%;
}
.ProductTitle {
  color: white;
  font-size: 25px;
  position: absolute;
  line-height: 30px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 100%;
  text-transform: uppercase;
}
.Boxes:hover .ProductCircle {
  transform: translate(-50%, -50%) rotate(-180deg) scale(0.97);
}
.Boxes:hover .ProductImg {
  transform: translate(-50%, -50%) scale(1.07);
}
.FourBoxes {
  width: 25%;
}
.SummerAccessories {
  padding: 50px 0;
  text-align: center;
  background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/kalokairina_aksesouar_bg.jpg');
  background-repeat: repeat;
  overflow: hidden;
}
.SummerAccessories .ProductTitle {
  color: #574a3c;
}
.SummerAccessoriesTitle {
  position: relative;
}
.SummerAccessoriesTitle::after {
  content: url(/images/juice.png);
  position: absolute;
  left: 70%;
  top: 20px;
}
.CampingWrapper {
  background-color: #b3e8b8;
  background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant01.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant03.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingLeftCorner.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingRightCorner.png');
  background-position: 15px top,26% 110px,80% 170px,left bottom, right bottom;
  background-repeat: no-repeat;
  padding: 50px 0 200px 0;
  overflow: hidden;
}
.CampingWrapper .ProductTitle {
  color: #446547;
}
.SeaWrapper {
  padding-top: 50px;
  padding-bottom: 50px;
  background: #2489ac url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/vithos_bg1.jpg') center center no-repeat;
  margin-top: 15px;
  overflow: hidden;
  background-size: cover;
  position: relative;
}
.SeeAll {
  border: solid thin white;
  padding: 10px 30px;
  color: white;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 700;
  border-radius: 8px;
  margin: 20px auto 0 auto;
  text-align: center;
  display: inline-block;
  transition: all linear 0.1s;
}
.SeeAll:hover {
  background-color: #206c8c;
  border: solid thin #206c8c;
}
.Bubble1 {
  position: absolute;
  bottom: -80px;
  width: 30px;
  left: 70px;
  animation: Bubble1 linear infinite 12s 1s;
}
@keyframes Bubble1 {
  0% {
    bottom: -80px;
  }
  100% {
    bottom: 100%;
  }
}
.Bubble2 {
  position: absolute;
  bottom: -50px;
  left: 140px;
  animation: Bubble2 linear infinite 12s 2s;
}
@keyframes Bubble2 {
  0% {
    bottom: -50px;
  }
  100% {
    bottom: 100%;
  }
}
.Bubble3 {
  position: absolute;
  bottom: -180px;
  left: 180px;
  animation: Bubble3 linear infinite 12s;
}
@keyframes Bubble3 {
  0% {
    bottom: -180px;
  }
  100% {
    bottom: 100%;
  }
}
.Bubble4 {
  position: absolute;
  bottom: -80px;
  left: 200px;
  width: 25px;
  animation: Bubble4 linear infinite 12s 3s;
}
@keyframes Bubble4 {
  0% {
    bottom: -80px;
  }
  100% {
    bottom: 100%;
  }
}
.Bubble5 {
  position: absolute;
  bottom: -80px;
  width: 30px;
  left: 80%;
  animation: Bubble5 linear infinite 12s 5s;
}
@keyframes Bubble5 {
  0% {
    bottom: -80px;
  }
  100% {
    bottom: 100%;
  }
}
.Bubble6 {
  position: absolute;
  bottom: -50px;
  left: 83%;
  animation: Bubble6 linear infinite 12s 6s;
}
@keyframes Bubble6 {
  0% {
    bottom: -50px;
  }
  100% {
    bottom: 100%;
  }
}
.Bubble7 {
  position: absolute;
  bottom: -180px;
  left: 88%;
  animation: Bubble7 linear infinite 12s 4s;
}
@keyframes Bubble7 {
  0% {
    bottom: -180px;
  }
  100% {
    bottom: 100%;
  }
}
.Fish1 {
  position: absolute;
  top: 50px;
  left: -50px;
  animation: Fish1 linear infinite 20s;
}
@keyframes Fish1 {
  0% {
    left: -50px;
  }
  100% {
    left: 100%;
  }
}
.Fish2 {
  position: absolute;
  width: 30px;
  top: 100px;
  left: -90px;
  animation: Fish1 linear infinite 20s 3s;
}
@keyframes Fish2 {
  0% {
    left: -90px;
  }
  100% {
    left: 100%;
  }
}
.Fish3 {
  position: absolute;
  top: 150px;
  left: -50px;
  animation: Fish3 linear infinite 20s 2s;
}
@keyframes Fish3 {
  0% {
    left: -50px;
  }
  100% {
    left: 100%;
  }
}
.Fish4 {
  position: absolute;
  bottom: 130px;
  left: -150px;
  animation: Fish4 linear infinite 22s 7s;
}
@keyframes Fish4 {
  0% {
    bottom: 130px;
  }
  100% {
    left: 100%;
  }
}
.Fish5 {
  position: absolute;
  bottom: 80px;
  left: -50px;
  width: 30px;
  animation: Fish5 linear infinite 20s 6s;
}
@keyframes Fish5 {
  0% {
    bottom: 80px;
  }
  100% {
    left: 100%;
  }
}
.Fish6 {
  position: absolute;
  top: 30%;
  right: -50px;
  animation: Fish6 linear infinite 20s;
}
@keyframes Fish6 {
  0% {
    top: 30%;
  }
  100% {
    right: 100%;
  }
}
.TimeToPlayWrapper {
  background-color: #f8b829;
  background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/pineapple.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/timetoplay_bg.jpg');
  background-position: 75% 60px,left top;
  background-repeat: no-repeat, repeat;
  padding-bottom: 50px;
  margin: 15px auto;
}
.DontForgetWrapper {
  padding-bottom: 200px;
  background-color: #f18282;
  background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/seashell.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/seashell02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plants04.jpg'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plants05.jpg');
  background-position: 10px 30px,80% 100px,left bottom, right bottom;
  background-repeat: no-repeat;
}
@media (max-width: 1200px) {
  .EquipmentContainer {
    width: 100%;
  }
  .ThreeBoxes .ProductCircle,
  .FourBoxes .ProductCircle {
    width: 230px;
  }
  .ThreeBoxes .ProductImg,
  .FourBoxes .ProductImg {
    width: 280px;
  }
}
@media (max-width: 991px) {
  .TopSection {
    background: #19a4c5 url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/header.jpg') center top no-repeat;
    background-size: 950px;
    height: 500px;
    padding: 50px 15px 0 15px;
  }
  .TopSection p {
    font-size: 18px;
    width: 100%;
  }
  .TopSectionTitle {
    font-size: 40px;
    font-weight: 300;
    line-height: 40px;
    color: #5565b0;
    text-transform: uppercase;
  }
  .TopSectionTitle span {
    font-weight: 800;
    color: #3dc0c2;
    font-size: 35px;
    line-height: 50px;
  }
  .FourBoxes {
    width: 50%;
  }
  .CampingWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant01.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant03.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingLeftCorner.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingRightCorner.png');
    background-position: 15px top,26% 150px,90% 60px,left bottom, right bottom;
  }
  .SeaWrapper {
    background-size: cover;
  }
}
@media (max-width: 900px) {
  .EquipmentWrapper {
    background-color: #19a4c5;
    padding-bottom: 50px;
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/watermelon.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/orange.png');
    background-position: 10px 30px, 98% 99%;
    background-repeat: no-repeat;
    background-size: 80px, 50px;
  }
  .ThreeBoxes {
    width: 50%;
  }
  .CampingWrapper {
    background-color: #b3e8b8;
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant01.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant03.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingLeftCorner.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingRightCorner.png');
    background-position: 15px top,26% 110px,80% 170px,left bottom, right bottom;
    background-size: auto,auto,auto,180px, 400px;
  }
}
@media (max-width: 768px) {
  .TopSection {
    background: #19a4c5 url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/header.jpg') center top no-repeat;
    background-size: 850px;
  }
  .SummerAccessoriesTitle::after {
    left: unset;
    right: 10px;
    top: 20px;
  }
  .CampingWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant01.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant03.png'), none, url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingRightCorner.png');
    background-position: 15px top,48% 150px,99% 10px,left bottom, right bottom;
    background-size: auto,100px,60px,auto,500px;
  }
  .TimeToPlayWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/pineapple.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/timetoplay_bg.jpg');
    background-position: 95% 60px,left top;
  }
  .DontForgetWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/seashell.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/seashell02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plants04.jpg'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plants05.jpg');
    background-position: 10px 30px,95% 180px,left bottom, right bottom;
    background-size: auto,auto,200px, 400px;
  }
}
@media (max-width: 520px) {
  .ThreeBoxes .ProductCircle,
  .FourBoxes .ProductCircle {
    width: 180px;
  }
  .ThreeBoxes .ProductImg,
  .FourBoxes .ProductImg {
    width: 240px;
  }
  .TopSection {
    background: #19a4c5 url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/header.jpg') center top no-repeat;
    background-size: 650px;
  }
  .SummerAccessoriesTitle::after {
    display: none;
  }
  .TimeToPlayWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/pineapple.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/timetoplay_bg.jpg');
    background-position: 95% 180px,left top;
    background-size: 100px, auto;
  }
  .DontForgetWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/seashell.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/seashell02.png'), none, url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plants05.jpg');
    background-position: 0 0,95% 180px,left bottom, right bottom;
    background-size: auto,auto,200px, 300px;
  }
}
@media (max-width: 400px) {
  .ThreeBoxes,
  .FourBoxes {
    width: 100%;
    float: none;
  }
  .ThreeBoxes .ProductCircle,
  .FourBoxes .ProductCircle {
    width: 80%;
  }
  .ThreeBoxes .ProductImg,
  .FourBoxes .ProductImg {
    width: 100%;
  }
  .CampingWrapper {
    background-image: url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant01.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant02.png'), url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/plant03.png'), none, url('//support3.you.gr/you/newsletter/LANDING_PAGE/summer2018/images/CampingRightCorner.png');
    background-position: 15px top,48% 150px,99% 10px,left bottom, right bottom;
    background-size: auto,100px,60px,auto,300px;
  }
}