/**
* ALL custom CSS goes here. Rather here than inline.
**/

/********* GLOBAL STYLES *********/
/* Removes the margin from top of page */
body {
    margin-top: 0px;
}
/********* END GLOBAL STYLES *********/

/********* MAIN MENU LINKS *********/
/*** Make active link bold **/
.navbar-default .navbar-nav .is-active {
	background-color:transparent;
	font-weight:bold;
}

/*** Make navbar shorter in height ***/
.navbar {
    margin-bottom: 0px;
}

/*** Home colored menu bar ***/
.navbar .navbar-nav a.home-main-menu:hover, .navbar .navbar-nav a.home-main-menu:focus, .navbar .navbar-nav .home-main-menu.is-active {
        border-bottom:3px solid #2AA232;
}

/*** About colored menu bar ***/
/** .navbar .navbar-nav a.about-main-menu:hover, .navbar .navbar-nav a.about-main-menu:focus, .navbar .navbar-nav .about-main-menu.is-active {
        border-bottom:3px solid #f36C53;
} **/
.navbar .navbar-nav a.about-main-menu:hover, .navbar .navbar-nav a.about-main-menu:focus, .navbar .navbar-nav .about-main-menu.is-active {
        border-bottom:3px solid #2AA232;
}

/*** CNDO colored menu bar ***/
.navbar .navbar-nav a.cndo-main-menu:hover, .navbar .navbar-nav a.cndo-main-menu:focus, .navbar .navbar-nav .cndo-main-menu.is-active {
        border-bottom:3px solid #f36C53;
}

/*** BGP for All colored menu bar  ***/
.navbar .navbar-nav a.bgp-main-menu:hover, .navbar .navbar-nav a.bgp-main-menu:focus, .navbar .navbar-nav .bgp-main-menu.is-active {
        border-bottom:3px solid #f89406;
}

/*** perfSONAR yellow menu bar ***/
.navbar .navbar-nav a.perf-main-menu:hover, .navbar .navbar-nav a.perf-main-menu:focus, .navbar .navbar-nav .perf-main-menu.is-active {
        border-bottom:3px solid #f5d04c;
}

/*** Science DMZ colored menu bar  ***/
.navbar .navbar-nav a.scidmz-main-menu:hover, .navbar .navbar-nav a.scidmz-main-menu:focus, .navbar .navbar-nav .scidmz-main-menu.is-active {
        border-bottom:3px solid #4CA1F5;
}

/*** FedIdM colored menu bar  ***/
.navbar .navbar-nav a.fedidm-main-menu:hover, .navbar .navbar-nav a.fedidm-main-menu:focus, .navbar .navbar-nav .fedidm-main-menu.is-active {
        border-bottom:3px solid #2ECC71;
}

/*** Contact Us colored menu bar ***/
.navbar .navbar-nav a.contact-main-menu:hover, .navbar .navbar-nav a.contact-main-menu:focus, .navbar .navbar-nav .contact-main-menu.is-active {
        border-bottom:3px solid #8e44ad;
}

/********* END MAIN MENU LINKS *********/

/*** THE FIFTH COLUMN ***/
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths,
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths,
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths,
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths,
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths,
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

    @media (min-width: 576px) {
    .col-sm-5ths {width: 20%;float: left;}
    .col-sm-two5ths {width: 40%;float: left;}
    .col-sm-three5ths {width: 60%;float: left;}
    .col-sm-four5ths {width: 80%;float: left;}
}

@media (min-width: 768px) {
    .col-md-5ths {width: 20%;float: left;}
    .col-md-two5ths {width: 40%;float: left;}
    .col-md-three5ths {width: 60%;float: left;}
    .col-md-four5ths {width: 80%;float: left;}
}

@media (min-width: 992px) {
    .col-lg-5ths {width: 20%;float: left;}
    .col-lg-two5ths {width: 40%;float: left;}
    .col-lg-three5ths {width: 60%;float: left;}
    .col-lg-four5ths {width: 80%;float: left;}
}

@media (min-width: 1200px) {
    .col-xl-5ths {width: 20%;float: left;}
    .col-xl-two5ths {width: 40%;float: left;}
    .col-xl-three5ths {width: 60%;float: left;}
    .col-xl-four5ths {width: 80%;float: left;}
}
/*** END FIFTH COLUMN ***/

/********* HOME PAGE VIDEO MENU BLOCK *********/
.home-sponsors-container .col-md-3{
  padding-left: 8px;
  padding-right: 8px;
}

.learn-cat-box{
  margin:10px 0px;
  column-gap: 8px;
}

.learn-cat-box a{
  text-decoration:none;
}

.round{
  border-radius:4px;
  -moz-border-radius: 4px;
   -o-border-radius: 4px;
   -webkit-border-radius: 4px;
}

.cat-hvr-box{
  position:relative;
  margin:0 auto; 
}

.cat-hvr-box span{
    -webkit-transition:opacity .4s ease-in-out;
    -moz-transition:opacity .4s ease-in-out;
    -o-transition:opacity .4s ease-in-out;
    transition:opacity .4s ease-in-out;
  display:block;  
  text-align:center;  
  color: #ffffff;
  padding: 0 10px 0 10px;  
}

.cat-hvr-box span.top{
    padding-top: .5em; 
/*  font-size: 2.0em; */ 
/*  line-height: 1em; */
    font-weight: bold;
}
.cat-hvr-box span.subTop{
    padding-top: .25em; 
/*  font-size:1em; */
}
.cat-hvr-box span.middle{
    padding-top: .5em;
/*  font-size: 1.5em; */ 
    opacity: 0.6; 
    color: #fff; 
}  

a:hover .cat-hvr-box span.middle{
    padding-top: .5em;
    opacity: 1.0;
}

.cat-hvr-box span.bottom {
    padding-top: .5em;
    font-size:1.5em;
}
.catColorBox{
    min-height: 360px;
    margin: 0 10px 0 10px;
}

/** Shapes **/
.bgpShape{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f89406+-1,d37d02+85,c07101+100 */
background: #f89406; /* Old browsers */
background: -moz-linear-gradient(top, #f89406 -1%, #d37d02 85%, #c07101 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f89406 -1%,#d37d02 85%,#c07101 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f89406 -1%,#d37d02 85%,#c07101 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f89406', endColorstr='#c07101',GradientType=0 ); /* IE6-9 */
}

.cndoShape{
/** Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f36C53+-1,d37d02+85,c07101+100 */
background: #f36C53; /* Old browsers */
background: -moz-linear-gradient(top, #f36C53 -1%, #f04628 85%, #ef3312 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f36C53 -1%,#f04628 85%,#ef3312 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f36C53 -1%,#f04628 85%,#ef3312 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff36C53', endColorstr='#ef3312',GradientType=0 ); /* IE6-9 */
}
.perfShape{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5d04c+0,e5ae30+91,e5ae30+100 */
background: #f5d04c; /* Old browsers */
background: -moz-linear-gradient(top, #f5d04c 0%, #e5ae30 91%, #e5ae30 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f5d04c 0%,#e5ae30 91%,#e5ae30 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f5d04c 0%,#e5ae30 91%,#e5ae30 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5d04c', endColorstr='#e5ae30',GradientType=0 ); /* IE6-9 */
}

.sciDmzShape{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4ca1f5+-1,207eda+85,126dc7+100 */
background: #4ca1f5; /* Old browsers */
background: -moz-linear-gradient(top, #4ca1f5 -1%, #207eda 85%, #126dc7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4ca1f5 -1%,#207eda 85%,#126dc7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4ca1f5 -1%,#207eda 85%,#126dc7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ca1f5', endColorstr='#126dc7',GradientType=0 ); /* IE6-9 */
}

.fedIdmShape{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ecc71+0,11aa51+85,049942+100 */
background: #2ecc71; /* Old browsers */
background: -moz-linear-gradient(top, #2ecc71 0%, #11aa51 85%, #049942 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2ecc71 0%,#11aa51 85%,#049942 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2ecc71 0%,#11aa51 85%,#049942 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ecc71', endColorstr='#049942',GradientType=0 ); /* IE6-9 */
}

/********* END HOME PAGE VIDEO MENU BLOCK *********/

/********* CATEGORY LANDING PAGE STYLES *********/

/*** Main Category Colored Video List Containers ***/
.main-cat-lg-container#bgp-cat-lg-container{
        background-color:#faab3c;
}

.main-cat-lg-container#cndo-cat-lg-container{
        background-color:#dcdcdc;
}
/***.main-cat-lg-container#cndo-cat-lg-container{
        background-color:#f68b78;
} ***/
.main-cat-lg-container#perf-cat-lg-container{
        background-color:#f5d04c;
}

.main-cat-lg-container#sciencedmz-cat-lg-container{
        background-color:#4CA1F5;
}

.main-cat-lg-container#fid-cat-lg-container{
	background-color:#2ecc71;
}

.main-cat-lg-container{
        padding-top:1px;
        padding-bottom:1px;
/* Rounded Corners for Category Listing */
	-moz-border-radius:4px; 
	-o-border-radius: 4px;
	-webkit-border-radius:4px; 
    border-radius: 4px;
}

.main-cat-vid-list-container h3{
	font-weight: bold;
}

.main-cat-vid-list-container ul.main-cat-vid-list{
    /*	list-style:none; */
	padding:0px 24px;
}

ul.main-cat-vid-list li a{
        text-decoration:none;
        color:#333333;
}

ul.main-cat-vid-list li a:hover{
        color:#000000;
}

span.main-cat-vid-list-num{
	color:#ffffff;
	font-weight:bold;
	position: relative;
	right:6px;
}
/********* END CATEGORY LANDING PAGE STYLES *********/

/********* FEDIDM CATEGORY PAGE STYLES *********/
.home-sponsors-container {
    text-align: center;
}

.home-sponsors-container h2 {
    text-align: left;
}

.home-sponsors-container img {
    max-width: 200px;
    padding: 20px 0px;
}

.home-sponsors-container hr {
    clear: both;
}
/********* END FEDIDM CATEGORY PAGE STYLES *********/

/********* CATEGORY PAGE SIDEBAR STYLES *********/

/*** For perfSonar and FedIdM Pages ***/
.page-node-type-test-category-series-page .region-sidebar-first.well{
	background-color:transparent;
	padding:0px;
	border: none;
}

/*** For BGP and SciDMZ Pages ***/
.page-node-type-page .region-sidebar-first.well{
       background-color:transparent;
       padding:0px;
       border: none;
}

.cat-page-sidebar-list-container{
	padding:10px;
}

/*** perfSonar Sidebar Logo ***/
.perf-logo-img{
        width:85%;
}

/*** Video Topics Sidebar Panel ***/
#bgp-group, #bgp-sections-group, #cndo-sections-group, #perf-group, #perf-sections-group,
#sci-group, #sci-sections-group, #fed-group, #fed-sections-group{
        margin-bottom: 2px;
}

/** Make links grey **/
.panel-collapse .panel-body a{
	color:#444444;
}
.panel-heading h4{
	font-weight:bold;
    color: #444444;
}

/** Panel shrink margin **/
.panel-body {
padding: 5px;
}

/** Panel Background Color **/
.panel-default.perfColor{
	background-color:rgba(245, 208, 76, 0.3);
}
.panel-default.sciDmzColor{
	background-color:rgba(76, 161, 245, 0.3);
}
.panel-default.fedIdmColor{
	background-color:rgba(46, 204, 113, 0.3);
}
.panel-default.bgpColor{
    background-color:rgba(248, 148, 6, 0.3);
}
.panel-default.cndoColor{
    background-color:rgba(246, 139, 120, 0.3);
}

/*** END Video Topics Sidebar Panel ***/
/********* END CATEGORY PAGE SIDEBAR STYLES *********/


/********* VIDEO PAGE STYLES *********/
/*** iFrame Video Styles ***/
iframe{
        border:none;
}
.iframe-vid-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
    margin-bottom:12px;
}

.iframe-vid-container iframe, .iframe-vid-container object, .iframe-vid-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


#collapseTwo {font-size: 18px}; //make Related Documents links larger

/*** FEDIDM CLOSED CAPTION ALERT TEXT ***/
.ccText{
	text-align:right;
	font-size:.85em;
	color:#686868;
}

/*** Accordion Panels ***/
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
/*    margin-top: -20px; */
    color: #333333;      /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
/*    margin-top: -20px; */ 
}

#transcript-group .panel-heading, #accordion .panel-heading{
	padding:10px 5px;
}
#transcript-group  .panel-title a, #accordion .panel-title a{
	font-weight:bold; 
	text-decoration:none;
	font-size:18px;
}
#transcript-group .panel-default > .panel-heading, #accordion .panel-default > .panel-heading{
        background-color: transparent;
        border-color: transparent;
}
#accordion .panel, #accordion .panel-default, #accordion .panel-body,
#transcript-group .panel, #transcript-group .panel-default, #transcript-group .panel-body{
        background-color: transparent;
        border-color: transparent;
        padding:0px;
}
#accordion .list-group-item{
	background-color:transparent;
	border:none;
	color: #333333;
}
/********* END VIDEO PAGE STYLES *********/

/********* FOOTER STYLES *********/
.footer{
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
}

/** Make footer extend full width of page **/
.footer.container-fluid{

	padding-left: 0px;
	padding-right:0px;
}

.simple-footer{
	padding-top:20px;
	padding-bottom:20px;
}

.footIcons img{
/*	width:50px; 
	margin: 2px; */
}

#footNavNew a{
	color:#ffffff; 
	padding: 0 10px 0 5px;
}

#footNavNew a:not(:last-child){
	border-right:solid 1px #ffffff;
}
/********* END FOOTER STYLES *********/

/********* CONTACT PAGE STYLES *********/
.contactOrgCont{
	margin-bottom:30px;
}
.contactOrgCont .shape{
	float:left;
	margin: 0px 10px 10px 15px;
}
.shape{
  text-align:center;
  border-radius:4px;
  width:200px;
  height:100px;
  line-height:100px;
  color:white;
  position:relative;
  margin:0px 10px 10px 15px;
  font-size: 30px;
}
.shape:before{
  content:"";
  width:0px;
  height:0px;
}

.nsrcShp{
background-color:#185baa;
}
.learnShp{
background-color:#f36c53;
}
.perfShp{
background-color:#f5d04c;
}
.sciDmzShp{
background-color:#4ca1f5;
}
.fedIdmShp{
background-color:#2ecc71;
}
/********* END CONTACT PAGE STYLES *********/

/******** Fix Search Button ********/
#block-search-form .btn{
        padding:5px 12px;
}

.input-group .form-control, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
	margin-top: 7px;
}

/* Icon Forward */
.hvr-icon-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-left: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward:before {
  content: "\e131";
  position: absolute;
  left: 1em;
  padding: 0 1px;
  font-family: 'Glyphicons Halflings';
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before {
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.video-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
#transcript-youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

// Media query to size video iframe for mobile screens
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 2) {
}

@media only screen and (min-width: 1px) and (max-width:540px){
        .catColorBox{
                min-height: 180px;
                margin: 0 4px 0 4px;
        }
        .col-md-5, .col-md-12{
                padding-right: 0px;
                padding-left: 0px;
                margin-gap: 5px!important;
        }
        .col-md-5ths {
                float: left !important;
                width: 100%!important;
                display: inline-block!important;
                padding-right: 0px;
                padding-left: 0px;
        }
	h1, .h1 {
 		font-size: 20px;
		margin-top: 0px;
}
	body {
    font-size: 12px;
    }
        .learn-cat-box {
                margin: 2px 0px;
    }
}

@media only screen and (min-width: 541px) and (max-width:867px){
	.catColorBox{
		min-height: 240px;
		margin: 0 4px 0 4px;
	}
	.col-md-5, .col-md-12{
		padding-right: 0px; 
                padding-left: 0px;
		margin-gap: 5px!important;
	}
	.col-md-5ths {
		float: left !important; 
		width: 50%!important;
		display: inline-block!important;
		padding-right: 0px;
    		padding-left: 0px;
	}
	h1, .h1 {
                font-size: 22px;
		margin-top: 0px;
}
	.learn-cat-box {
    		margin: 4px 0px;
    }
}
@media only screen and (min-width: 1080px) {
  /* For desktop: */
}