@import url('./general.css');

.color-catalog {
	background: #0c8ccd; /* proyectil educacion logo */
	background: #0f75bc; /* proyectil educacion banner 1*/
	background: #1fa6de; /* proyectil educacion banner 2 */
	background: #00bfd7; /* fisherprice 1 */
	background: #6ad1e2; /* fisherprice 2 */
	background: #0a8ee1; /* fisherprice 3 */
	background: #0971ce; /* papalote 1 */
	background: #1bbdf6; /* papalote blog 1 */
	background: #00afec; /* papalote blog 2 */
	background: #0591de; /* google arts logo 1 */
	background: #0497e4; /* google arts logo 2 */
	background: #1a73e8; /* google arts page */
	background: #eceff1; /* google highlight white menu */
}

/* Home */
#main-content { margin-top: -64px; }

#main-content.pag-home {  }

	#main-content.pag-home .head-banner-cont {
		background: url('../images/bgheader00.jpg') no-repeat top right / 100% auto #0095d7;
	}

	#main-content.pag-home .head-banner-cont .head-banner {
		padding: 5rem 0 5rem;
	}

		#main-content.pag-home .head-banner-cont .head-banner .banner-left {
			color:  #ffffff;
		}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left img {
				height: auto;
				width: 15vw;
				position: relative;
				margin:  2rem 0 0rem;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text {
				width: 100%;
			}

				#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text h1 {
					font-family: 'Roboto', sans-serif;
					font-size: 3.5rem;
					font-weight: bold;
					text-shadow: 2px 2px 0 #888888;
				}

				#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text p {
					font-size: 2rem;
					line-height: 2.5rem;
					text-shadow: 2px 2px 0 #888888;
				}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .btn {
				margin: 0 0 5rem;
				border-radius: 1rem;
				font-family: 'Roboto',sans-serif;
				font-size: 1.8rem;
				text-transform: none;
			}

		#main-content.pag-home .head-banner-cont .head-banner .banner-right {
		}

			#main-content.pag-home .head-banner-cont .head-banner .banner-right #web-model {
				position: relative;
				width: 100%;
				height: 100%;
			}

				#main-content.pag-home .head-banner-cont .head-banner .banner-right #web-model img {
					position: absolute;
					width: auto;
					height: 70%;
					max-width: 100%;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto auto;
				}

				#main-content.pag-home .head-banner-cont .head-banner .banner-right #web-model canvas {
					outline: none;
					-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
				}

	#main-content.pag-home .sec-1 {
		margin-bottom: -12rem;
		overflow: visible;
	}

		#main-content.pag-home .sec-1 .mosaic-grid {
			position: relative;
			width: 100%;
			top: -7rem;
			padding:  2rem 0;
			z-index: 2;
			border-radius: 1rem;
		}
			#main-content.pag-home .sec-1 .mosaic-grid .stage-yt {
				position: relative;
				width: 90%;
				height: 0;
				padding-bottom: 56.25%;
			}

				#main-content.pag-home .sec-1 .mosaic-grid .stage-yt .video {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

			#main-content.pag-home .sec-1 .mosaic-grid h1 {
				font-family: 'Roboto',sans-serif;
				font-size: 2.5rem;
				font-weight: bold;
			}

			#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row {
				margin: 2rem 4rem;
			}

				#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row .mosaic-l {

				}

				#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row .mosaic-r {

				}

				#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row .mosaic-img {
					width: 100%;
				}

				#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row h2.mosaic-ttl {
					font-family: 'Roboto', sans-serif;
					font-size: 2.5rem;
					color:  #001830FF;
					margin: 1rem 0;
				}

				#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row .mosaic-txt {
					font-size: 1.2rem;
					color:  #282828;
				}

	#main-content.pag-home .sec-2 {
		padding: 7rem 0 2rem;
		overflow: visible;
	}

		#main-content.pag-home .sec-2 h1 {
			font-size: 2.5rem;
		}

		#main-content.pag-home .sec-2 .tutorials {}

			#main-content.pag-home .sec-2 .tutorials .tuto {}

				#main-content.pag-home .sec-2 .tutorials .tuto .yt-video {
					position: relative;
					width: 90%;
					height: 0;
					padding-bottom: 56.25%;
				}

					#main-content.pag-home .sec-2 .tutorials .tuto .yt-video iframe {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

				#main-content.pag-home .sec-2 .tutorials .tuto h2 {
					font-family: 'Roboto', sans-serif;
					font-size: 2rem;
				}

				#main-content.pag-home .sec-2 .tutorials .tuto p {
					font-size: 1.5rem;
				}

	#main-content.pag-home .sec-3 {
		padding: 3rem 0;
		overflow: visible;
		background: url('../images/bgfooter00.jpg') no-repeat top left / 100% auto #00a3e4 ;
	}

		#main-content.pag-home .sec-3 .comingsoon {
			color: #ffffff;
		}

			#main-content.pag-home .comingsoon h1.ttl-sec {
				font-family: 'Roboto', sans-serif;
				font-size: 4rem;
				font-weight: bold;
			}

			#main-content.pag-home .comingsoon .comming-item p {
				font-size: 1.5rem;
			}

		#main-content.pag-home .sec-3 .nl-sec {
			padding-top: 3rem;
		}

			#main-content.pag-home .sec-3 .nl-sec .nl-sec-ttl {
				font-family: 'Roboto',sans-serif;
				font-weight: bold;
				font-size: 3rem;
			}

			#main-content.pag-home .sec-3 .nl-sec .nl-cont {
				border-radius: 0.5rem;
				padding: 3rem 0;
			}


				#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box {
					text-align: center;
				}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social {
						position: relative;
						width: auto;
						display: inline-block;
					}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link {
							width: 3rem;
							height: 3rem;
							position: relative;
							padding: 0;
							display: inline-block;
							border-radius: 1.5rem;
							cursor: pointer;
							background: #ffffff;
							text-align: center;
							font-size: 1.5rem;
							line-height: 3rem;
							color: #303f9f;
						}

							#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link svg.aux {
								height: 1em;
								width: auto;
								display: inline-block;
								margin: 0.7rem 0;
								fill: #303f9f;
							}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link:hover {
							color: #ffffff;
						}

							#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link:hover svg.aux {
								fill: #ffffff;
							}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link.fb:hover {
							background: #3c5a99;
						}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link.ig:hover {
							background: #833ab4;
						}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link.yt:hover {
							background: #e53935;
						}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link.tt:hover {
							background: #000000;
						}

				#main-content.pag-home .sec-3 .nl-sec .nl-cont .row.aux {
					padding: 0 10%;
				}

				#main-content.pag-home .sec-3 .nl-sec .nl-cont h2 {
					text-align: center;
					font-size: 2rem;
					color: #444444;
				}

				#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-message {
					text-align: center;
					font-size: 2rem;
					font-weight: bold;
					padding: 3rem 0;
				}

				#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm {
				}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm .row {
						margin: 0;
					}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm .col {
						margin: 1rem 0;
					}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm .btn {
						margin: 1rem 0;
					}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm .form-errors {
						padding: 0 1rem;
						color: #ff3300;
						font-size: 0.7rem;
					}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm .input-field,
					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm .input-aux {
						margin-top: 0;
					}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm label#verif span#veriftxt.wrong:before {
							background: #ff6666;
						}

							#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm label#verif span#veriftxt i {
								font-style: normal;
							}

					#main-content.pag-home .sec-3 .nl-sec .nl-cont #nl-frm #btn-suscribe {
						width: 100%;
						border-radius: 2rem;
					}


/* End Home */

@media only screen and (max-width : 1200px) {

			#main-content.pag-home .head-banner-cont .head-banner .banner-left img {
				width: auto;
				height: 6rem;
				position: relative;
				margin:  1rem 0;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text h1 {
				font-size: 3rem;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text p {
				margin:  0 0 1rem;
				font-size: 1.7rem;
				line-height: 2rem;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left img {
				width: 12vw;
				height: auto;
			}

				#main-content.pag-home .sec-2 .tutorials .tuto h2 {
					font-family: 'Roboto', sans-serif;
					font-size: 1.5rem;
					margin:  1rem 0;
				}

				#main-content.pag-home .sec-2 .tutorials .tuto p {
					font-size: 1.2rem;
				}

			#main-content.pag-home .sec-3 .nl-sec .nl-cont {
				width: 100%;
				padding: 2rem 0;
			}

}

@media only screen and (max-width : 992px) {

	#main-content.pag-home .head-banner-cont {
		background: url('../images/bgheader00.jpg') no-repeat top right / auto 100% #0095d7;
	}

		#main-content.pag-home .head-banner-cont .head-banner .banner-left {
			padding:  0 1rem 0 2rem;
		}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left img {
				position: relative;
				width: 20%;
				height: auto;
				margin: 1rem 0;
				float: left;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text {
				position: relative;
				width: 79%;
				float: left;
				margin: 1rem 0;
			}

				#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text p {
					margin: 1rem 0 2rem;
				}
}

@media only screen and (max-width : 600px) {

	#main-content.pag-home .head-banner-cont {
		background: url('../images/bgheader00.jpg') no-repeat top right / auto 70% #0095d7;
	}


		#main-content.pag-home .head-banner-cont .head-banner .banner-left {
			padding:  0 1rem 0 5rem;
		}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .btn {
				font-size: 1.3rem;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left img {
				width: 40%;
				height: auto;
			}

			#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text {
				position: relative;
				width: 100%;
				float: left;
				margin: 1rem 0;
			}

				#main-content.pag-home .head-banner-cont .head-banner .banner-left .pres-text p {
					margin: 1rem 0 2rem;
				}

		#main-content.pag-home .head-banner-cont .head-banner .banner-right {
			max-height: 40vh;
		}

						#main-content.pag-home .sec-3 .nl-sec .nl-cont .social-box .cont-social .social-link {
							margin: 0 0.5rem;
						}

			#main-content.pag-home .sec-1 .mosaic-grid .mosaic-row {
				margin: 2rem 2rem;
			}

	#main-content.pag-home .sec-3 {
		padding: 3rem 0;
		overflow: visible;
		background: url('../images/bgfooter00.jpg') no-repeat top left / auto 34% #00a3e4 ;
	}
}