﻿/* stylelint-disable */

/* 	CSS CONTENTS
	----------------------------
	1) NEI Kids Content Area Baseline
	2) Content Area Footer Styles
	3) Ask a scientist Styles
	4) Media Queries
*/


/*-------------------------------------------------------------------------*/
/*-- 1) NEI KIDS CONTENT AREA BASELINE ------------------------------------*/
/*-------------------------------------------------------------------------*/

#neikids-aas-title {
    background-color: #e2e2e2;
    padding-bottom: 20px;
}

#neikids-aas-title p {
	padding-top: 20px;
	padding-bottom: 10px
}

#neikids-aas-main {
	padding: 0 50px;
	background-color: #e2e2e2;
  margin-left: auto;
  margin-right: auto;
}
#neikids-aas-title p,
#neikids-aas-main  p {
	font-size: 1.1em;
  line-height: 1.6em;
}

#neikids-aas-video {
  padding: 50px;
  background-color: #e2e2e2;
}



/*-------------------------------------------------------------------------*/
/*-- 2) Content Area Footer Styles ----------------------------------------*/
/*-------------------------------------------------------------------------*/

.neikids-aas-footer {
    background-color: #25003f;
}
.neikids-aas-footer .neikids-didyouknow-container h4 {
	color: #E37F1A
}



/*-------------------------------------------------------------------------*/
/*-- 3) Ask a scientist Custom Styles --------------------------------------------*/
/*-------------------------------------------------------------------------*/

.video-embed-container .neikids-video-aas {
  display: block;
}

.video-embed-container .neikids-video-aas:focus {
  outline: 3px solid #0055b8;
}

#neikids-aas-main  .neikids-header-head-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#neikids-aas-main > #videoCaption {
    height: auto;
    margin-bottom: 0;
    min-height: 50px;
    padding-top: 55px;
    position: relative;
}

#neikids-aas-video .video-embed-wrapper {
  position: relative;
  margin: 0 auto;
}

#neikids-aas-video .video-embed-wrapper h2 {
  margin: 30px 0 10px;
  font-size: 26px;
}

#neikids-aas-video .video-embed-wrapper-inner {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0;
  padding-bottom: 56.25%;
}

iframe,
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}


.video-embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	max-width: 100%
}

.video-embed-container iframe,.video-embed-container object,.video-embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.neikids-video-aas > img {
    height: auto;
    width: 100%;
    cursor:pointer;
}


/*-------------------------------------------------------------------------*/
/*-- 4) Media Queries -----------------------------------------------------*/
/*-------------------------------------------------------------------------*/


/*content realestate: min 263px scales to max 302px */
@media (min-width: 0px) and (max-width: 359px) {
/* ----------- iPhone 4/S portrait-mode: 320px ----------- */
/* ----------- iPhone 5/S portrait-mode: 320px ----------- */
/* ----------- Galaxy S3  portrait-mode: 320px ----------- */
/* ----------- Galaxy S4  portrait-mode: 320px ----------- */
    #neikids-aas-title{
    padding-left:0;
    padding-right:0;
    }
    #neikids-aas-title p{
    margin:0;
    }
    #neikids-footer {
    height: 265px;
    }
}

@media (min-width: 360px) and (max-width: 413px) {
/* ----------- Galaxy S5  portrait-mode: 360px ----------- */
/* ----------- iPhone 6   portrait-mode: 375px ----------- */
    #neikids-aas-title{
    padding-left:0;
    padding-right:0;
    }
    #neikids-aas-title p{
    margin:0;
    }
    #neikids-footer {
    height: 245px;
    }
}

/*content realestate: min 357px scales to max 510px */
@media (min-width: 414px) and (max-width: 567px) {
/* ----------- iPhone 6+  portrait-mode: 414px ----------- */
/* ----------- iPhone 4/S landscape-mode: 480px----------- */
    #neikids-aas-title{
    padding-left:0;
    padding-right:0;
    }
    #neikids-aas-title p{
    margin:0;
    }
    #neikids-footer {
    height: 240px;
    }
}

/*content realestate: 848px (stays fixed) */
@media (min-width: 1200px) {
    #neikids-aas-title {
     padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    }
}

/* stylelint-enable */
