@import 'https://fonts.googleapis.com/css?family=Montserrat';

body{
  margin: 0px auto;
  width: 100%;
  overflow-x: hidden;
  background-color: #009bdc;
}
aside.top {
  width: 75%;
  margin: 0 auto;
  text-align: center;
  display: block;
  background: rgba(115, 115, 115, 0.82);
  font: 700 17px/24px Arial;
  color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.container {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  box-sizing: border-box;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.center {text-align: center;}
.left {float: left !important;}
.right {float: right !important;}

img.responsive-img, video.responsive-video {max-width: 100%; height: auto;}

.top{top:110px; z-index: 5;}

/* preloader */
#preloaderCont{
  width:100%;
  background-color: #009bdc;
  position: absolute;
  z-index:200;
}

div.preContainer{
  width: 40%;
  margin: 100px auto;
  height: 1000px;
  text-align: center;
}

#preloadDino{
  overflow: hidden;
  width: 141px;
  height: 181.4px;
  margin: 0 auto;
  background-image: url('../assets/images/dinosaur.jpg');
  background-position: 0px 0px;
  top: 25px;
  position: relative;
}

#preloadBar{ max-width: 100%;}

.preCircule{
  background-color: white;
  height: 240px;
  border-radius: 50%;
  width: 240px;
  margin: 0 auto;
  box-shadow: 0px 0px 25px white;  
}

.textPreloader{
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 18px;  
  text-align: center;
}

.headContainer {
  width: 100%;
  height: 750px;
  background-image: url('../assets/images/headContainer/headBg.png');
  background-color: #ffc432;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 0;
}

/* headContainer's images */
.headPurpleChar{
  position: absolute;
  top: 330px;
  left: 3%;
  z-index: 2;
}

.headYellowChar{
  position: absolute;
  top: 130px;
  left: 72%;
  z-index: 3;
}

.headSunChar {
  position: absolute;
  top: 30px;
  left: 10%;
  z-index: 4;
}

div.menu{
  width:680px;
  height: 279px;
  margin: 0 auto;
  background-image: url('../assets/images/headContainer/menuContainer/menuCloud.png');
  background-repeat: no-repeat;
  background-size: 100%;
}

div.logoPlayDoh{
  width: 50%;
  height: 180px;
  margin: 0 auto;
  position: relative;
  top:-50px;
  background-image: url('../assets/images/headContainer/menuContainer/menuPlaydohLogo.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
img.logoPlayDo{display: none;}

/* Main Menu */
nav{
  width: 100%;
  height: 40px;
  margin: 0 auto;
  position: relative;
  top: -40px;
}
nav ul{list-style:none; margin: 0 auto;}
nav ul li{float: left; padding: 0px 10px;}

div.btnCrea{
  width: 110px;
  height: 38px;
  background-image: url('../assets/images/headContainer/menuContainer/btnCrea.png');
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}

div.btnDownload{
  width: 180px;
  height: 38px;
  background-image: url('../assets/images/headContainer/menuContainer/btnDownload.png');
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}

div.btnMorePlay{
  width: 230px;
  height: 38px;
  background-image: url('../assets/images/headContainer/menuContainer/btnPlayDo.png');
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}

div.btnCrea:hover, div.btnDownload:hover, div.btnMorePlay:hover{background-position: bottom; height: 46px;}

/* button up home */
.btnHomeUp {
  width: 60px;
  position: absolute;
  margin-top: 200px;
  right: 20px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: width 0.5s;
          transition: width 0.5s;
}

.btnHomeUp:hover{width: 90px;}

.buttonNext{
  width: 92%;
  margin: 0 auto;
  position: relative;
  z-index: 12;
  bottom: 320px;
}

div.btn_slide-left{
  width: 62px;
  height: 90px;
  background-image: url('../assets/images/headContainer/slideContainer/btn_slide-left.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  cursor: pointer;
}

div.btn_slide-right{
  width: 62px;
  height: 90px;
  background-image: url('../assets/images/headContainer/slideContainer/btn_slide-right.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  cursor: pointer;
}

.btn_slide-left:hover, .btn_slide-right:hover{background-position: bottom;}

div.slideImg {
  width: 100%;
  height: 410px;
  position: relative;
  z-index: 10;
  text-align: center;
  top: -90px;
  cursor: pointer;
}

/* slider old and new */
#slideNew{
  position: absolute;
  left: 0px;
}

div.slideImg img {width: 100%;}
.createContainer {
  width: 100%;
  height: 880px;
  background-image: url('../assets/images/createContainer/createBg.png');
  background-color: #00adf0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 0;
}

.slideImgMobile{display: none;} /* style hidden for desktop version */

.createTitle {left: 10%; top: 20px; position: relative;}

.createChar { position: absolute; left: 5%; z-index: 20;}

.createCastle {width: 22%; position: absolute; left: 72%; z-index: 20;}

.createSubtitle {top: 100px; position: absolute; left: 22%;}

div.text {
  width: 50%;
  margin: 70px auto;
  margin-left: 25%;
  font-family: 'Montserrat', sans-serif;
  color: #0b2570;
  font-size: 18px;  
}

.videosPlay-doh{
  width: 100%;
  margin: 30px auto;
  position: absolute;
}

/* buttons video player*/
.videoBtn{position: relative; text-align: center; bottom: 20%;}
.videoBtn button{border: none;}
#bstop, #bpause, #bplay{ width: 45px; height: 45px; background-color: transparent; cursor: pointer;}
#bplay{
  background-image: url('../assets/images/createContainer/createPlayBtn.png');
  background-repeat: no-repeat;
  background-size:100%;
}
#bpause{
  background-image: url('../assets/images/createContainer/createPauseBtn.png');
  background-repeat: no-repeat;
  background-size:100%;
  cursor: pointer;
}
#bstop{
  background-image: url('../assets/images/createContainer/createStopBtn.png');
  background-repeat: no-repeat;
  background-size:100%;
  cursor: pointer;
  display: none;
}
#bstop:hover, #bpause:hover, #bplay:hover{}

button:focus {outline: none;}

.videoBox{
  width: 75%;
  margin: 14.5% auto;
}
.videoPlayer{
  height:0px;
  width:100%;
  max-width:560px;
  padding-top:56.25%;
  position:relative;
}

iframe#ytplayer {
  position:absolute;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}

#videoSliderUl{
  visibility:visible;
  overflow:hidden;
  height: 280px;
}

.createVisorContent {
  width: 70%;
  height: 511px;
  background-image: url('../assets/images/createContainer/createVisorContent.png');
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
}

.createSlideBg {
  width: 20%;
  height: 479px;
  background-image: url('../assets/images/createContainer/createSlide/createSlideBg.png');
  background-repeat: no-repeat;
  background-size: 100%;
}

.navVid{
  list-style:none;
  margin: 0 auto;
}

div#videoSliderUl ul li{cursor: pointer;}

.navDown {
	list-style:none;
	display: inline-flex;
}
.navDown li{float:left;}

.createBtnUp {
  width: 61px;
  height: 44px;
  top: 12px;
  margin: 15px auto;
  background-image: url('../assets/images/createContainer/createSlide/createBtnUp.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  cursor: pointer;
}

.createBtnDown {
  width: 83px;
  height: 57px;
  margin: 5px auto;
  background-image: url(../assets/images/createContainer/createSlide/createBtnDown.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  cursor: pointer;
}

.createBtnUp:hover, .createBtnDown:hover{background-position: bottom;}

.downloadContainer {
  width: 100%;
  height: 1050px;
  background-image: url('../assets/images/downloadContainer/downloadBg.png');
  background-color: #83d82c;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 0;
}

.downloadTitle {
  top: 25px;
  left: 5%;
  position: relative;
}

.downloadSubtitle {left: 15%; position: relative;}

.downloadChar {
  position: absolute;
  left: 60%;
  -ms-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.downloadImg {
  top:-70px;
  width: 78%;
  height: 590px;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0 auto;
  z-index: 32;
}

.downloadDownBtn {background-image: url(../assets/images/downloadContainer/downloadDownBtn.png);}
.downloadPrintBtn {background-image: url(../assets/images/downloadContainer/downloadPrintBtn.png);}
.downloadDownBtn, .downloadPrintBtn {
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  cursor: pointer;
}

.btnDownloads {
  width: 118px;
  margin: 0 auto;
  position: relative;
  top: 510px;
  z-index:1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.downloadSlideBg {
  width: 85%;
  height: 162px;
  margin: 0 auto;
  background-image: url('../assets/images/downloadContainer/downloadSlide/downloadSlideBg.png');
  background-repeat: no-repeat;
  background-size: 100%;
}

.downloadPrevBtn {
  width: 40px;
  height: 61px;
  margin-left: 15px;
  margin-top: 45px;
  background-image: url('../assets/images/downloadContainer/downloadSlide/downloadPrevBtn.png');
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}

.downloadNextBtn {
  width: 40px;
  height: 61px;
  margin-right: 15px;
  margin-top: 45px;
  background-image: url('../assets/images/downloadContainer/downloadSlide/downloadNextBtn.png');
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}

.downloadPrevBtn:hover, .downloadNextBtn:hover {background-position:bottom;}

.thumbsDown {
  width: 84%;
  height:110px;
  height:110px;
  margin: 0 auto;
  position: relative;
  top: 22px;
  visibility:visible;
  overflow:hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div.thumbsDown img{margin-left: 2%; cursor: pointer;}
div.thumbsDown img:focus{outline: none;}

.productsContainer {
  width: 100%;
  height: 1150px;
  background-image: url('../assets/images/productsContainer/productsBg.png');
  background-color: #fda500;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 0;
}

.productsList{
  width: 100%;
  background-image: url('../assets/images/productsContainer/productsList.png');
  background-repeat: no-repeat;
  background-position: bottom;
  position: relative;
  top: -50px;
}

.logoProducts{position: relative;}
.products{width: 90%; margin: 0 auto;}

.row {display: flex;}
.colProduct{width: 33.33%;}
div.colProduct img{width: 80%;}

.description{
  width: 200px;
  height: 50px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  color: #46189f;
  padding-top: 5px;
  background-color: white;
  border: 3px solid #ffc343;
  border-radius: 10px;
  display: block;
  position: relative;
  top: -45px;
  cursor: pointer;
  -webkit-transition: width 0.3s, background-color 0.5s;
          transition: width 0.3s, background-color 0.5s;
}

.description:hover{
  width: 210px;
  color: white;
  background-color: #46189f;
  box-shadow: 0px 0px 0px #888888; ;
}

.singleLine{padding-top: 10px; display: block;}

a{text-decoration: none;}

.footer {
  width: 100%;
  height: 260px;
  background-image: url('../assets/images/footerContainer/footerBg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  background-color: #fda500;
}

.imgFooter {margin-top: 70px;}

/* --- responsive --- */

@media (max-width: 1200px){ /* styles for img-responsive */
  img.headSunChar {max-width: 15%;}
  img.headPurpleChar {max-width: 20%;}
  img.headYellowChar {max-width: 20%; top: 270px; left: 80%;}
  img.createChar {max-width: 23%; left: 2%}
  img.createCastle {max-width: 21%; top:830px;left: 72%}
  img.downloadChar {max-width: 22%; margin-top: 90px; left: 68%;}
} 

@media (max-width: 1024px){
  #preloadBar{max-width: 70%;}
  img.headPurpleChar,
  img.headYellowChar {display: none;}
  .btnHomeUp {width: 70px;}
}

@media (max-width: 1000px){
  #preloadBar{max-width: 100%;}
  .container{width: 768px}
  .headContainer{height: 680px;}
  .btnHomeUp{width: 60px; margin-top: 160px; right: 40px;}
  .btnHomeUp:hover{width: 70px;}
  img.createCastle,
  img.createArrow,
  img.downloadChar,
  div.text p br {display: none;}
  div.text{width: 73%; margin-top: 70px; margin-bottom: 30px; margin-left: 10%;}
  .buttonNext {bottom: 370px;}
  .createSlideBg {width: 170px; height: 460px;}
  .navVid {padding-left: 25px}
  .videosPlay-doh{margin: 0 auto; width: 90%;}
  .createBtnUp, .createBtnDown {margin: 5px auto;}
  .createBtnDown {width: 50px; height: 35px;}
  .createVisorContent{height: 370px; left: 4%;}
  .createContainer{height: 670px;}
  .createSubtitle{width: 485px; left: 20%;}
  .downloadContainer{height: 900px;}
  .downloadTitle{left: 10%;}
  .downloadImg{height: 490px;}
  #downloadImgCont img{max-width: 100%; height: auto;}
  .btnDownloads{top: 87%;}
  .downloadSlideBg{height: 130px;}
  .thumbsDown{width: 78%; top: 20px;}
  .thumbsDown img {width: 120px;}
  .productsTitle {width: 350px; left: 10%; position: relative;}
  img.logoProducts {width: 420px;}
  .productsList{background-size: 90%; background-position: 50% 90%;}
  .products{width: 85%;}
  .productsContainer{height: 850px;}
}