@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Anton:300,400,700'); /*for text sponsors*/

html {background: url(../images/default/background.jpg) repeat top left;}

body {font-family:'Poppins', sans-serif; font-weight:300;}

* { margin: 0; padding: 0; }

/******************************************Global Setting**********************************************/
.clear {clear: both;}

label.sr-only {display:none;}
span.sr-only {display:none;}

a#skiptocontent {
    position: absolute;
    left: 0;
    top: -95px;
    transition: all .2s;
    background-color: #0c63ae;
    color: #fff;
    padding: 10px 15px 14px 15px;
    font-size: 16px;
}
a#skiptocontent:focus {
    top: 0;
    z-index: 2000;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.display-flex { /*vertically centered*/
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.centerV {display:flex; align-items:center;}/*vertically centered*/
.centerH {display:flex; justify-content:center;}/*horizontally centered*/

a:link, a:visited {color:#006bee; transition: 0.4s all; text-decoration:none;}
a:hover, a:active, a:focus {color:#00ce4e;}

img {display:block; margin:0px; max-width:100%; height:auto;}
  a img {border:none;}

iframe {max-width:100%;}
/*iframe responsive - about/staff*/
.video-container {position:relative; height:0; overflow:hidden;}
.video-container-16x9 {padding-bottom:52.25%;}
.video-container-4x3 {padding-bottom:75%;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.videoright {float:right; width:50%; margin:1rem;}

#scroll {
    position:fixed; cursor:pointer;
    right:10px; bottom:10px;
    width:50px; height:50px;
    background-color:#BABABA; opacity:0.5;
    text-indent:-9999px; display:none;
    -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px
}
#scroll span {
    position:absolute;
    top:50%; left:50%; height:0; width:0;
    margin-left:-8px; margin-top:-12px;
    border:8px solid transparent;
    border-bottom-color:#FFF; transition:all 0.5s;
}
#scroll:hover {
    background-color:#71a300;
    opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)";
}


.wrapper {max-width:1100px; margin:0 auto;}

/*Header*/
header {display:block; background-color:#FFF; height:auto;}

nav.topnav {text-align:right; margin-right:8px; margin-bottom:9px;}
nav.topnav ul {margin:0;}
nav.topnav ul li {list-style-type:none; display:inline-block; padding:0.5rem 0.6rem 0 0.6rem;}
nav.topnav a {color:#03a049; transition: 0.4s all; font-size:1.86rem;}
nav.topnav a:hover {color:#9dcb3c;}

/*Matrix icon links*/
nav.sign_log {float:left; margin-left:0.5rem;}
nav.sign_log ul {margin:0;}
nav.sign_log ul li {list-style-type: none; display:inline-block;}
nav.sign_log a {color:#03a049; font-weight:400; transition:0.4s all; padding:0 0.5rem;}
nav.sign_log a:hover {color:#9dcb3c;}
nav.sign_log a.fa-icon::before {padding-right:5px;}
.fa-icon::before {font-family: FontAwesome;}

/*Logo*/
h1.logo {max-width:480px; position:absolute; top:22px; margin-left:10px;}
h1.logo img {max-width:480px;}
/*#search {width:38%; float:right; margin-top:-15px;}
.gsc-control-cse table, .gsc-control-cse tr, .gsc-control-cse td {border: 0; margin:0;}*/

/*3 buttons*/
nav.bts {float:right; margin:2.8rem 1rem 0.3rem 0.5rem;}
nav.bts ul {display:inline-block;}
nav.bts ul li {list-style:none; float:left; padding:0; border-radius:5px; width:134px; transition:all .3s;}
nav.bts ul li:hover {opacity:0.8;}
nav.bts ul li.order {background:url(../images/default/button1.png) no-repeat; background-size:134px; margin-right:1px;}
nav.bts ul li.news {background:url(../images/default/button2.png) no-repeat; background-size:134px; margin-right:1px;}
nav.bts ul li.contact {background:url(../images/default/button3.png) no-repeat; background-size:134px;}
nav.bts ul li a {color:#FFF; font-family:'Poppins', sans-serif; font-size:14px; line-height:18px; display:block; text-align:center; padding:5px 0px; white-space:nowrap;}
nav.bts ul li a:hover {text-decoration:none;}

/***********************************Main Nav**************************************/
a.navhighlight {opacity:0.8 !important; background-color:#00a7ff;}

nav.main {
height:76px; background-color:#55b5e8;
position: relative;
z-index:9999;
    -webkit-box-shadow: 0 6px 6px -6px black;
	   -moz-box-shadow: 0 6px 6px -6px black;
	        box-shadow: 0 6px 6px -6px black;
}
#mainnav ul, #mainnav li {list-style:none; padding:0; margin:auto 0; display:inline; height:auto;}
#mainnav ul li {float:left; position:relative; background-color:#55b5e8; transition:all 0.3s; width:19.9%; margin:0 !important; padding:0 !important;}
#mainnav ul li a {
	text-decoration:none; color:#FFF; font-family:'Poppins', sans-serif; font-size:1.1rem; padding:4px 0;
	text-transform:uppercase; display:block; text-align:center;
	white-space:nowrap;
	transition: background .3s ease-in-out;
}
#mainnav ul li a:hover {opacity:0.8;}
#mainnav ul li:hover {background-color:#00a7ff;}
#mainnav ul li div {text-align:center; color:#FFF; font-size:2.4rem; line-height:0; margin-top:3px;}

#mainnav ul ul{ /*2nd level*/
	font-family:'Poppins', sans-serif;
	text-align:left; width:auto; position:absolute; 
	top:-99999px; left:0;
	opacity:0; transition: opacity .5s ease-in-out;
	z-index:497;
	box-shadow:none; margin:0;
	background-color:#00a7ff;
}
#mainnav ul li ul li {background-color:#00a7ff; opacity:0.9; width:100%;}
#mainnav ul li ul li a {color:#FFF; font-size:0.85rem; margin:0; padding:4px 4px 4px 6px; text-align:left; background:none; height:20px !important; line-height:21px !important; text-transform:none;}
#mainnav ul li ul li a:hover {background-color:#FFF; color:#0caafd; opacity:1;}
#mainnav ul ul ul { 
	position:absolute; 
	top:-99999px; left:100%; 
	opacity:0; transition:opacity .5s ease-in-out;
}
#mainnav ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
#mainnav ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;} /*3rd level*/
#mainnav ul li ul li ul li a {color:#FFF; font-size:12px; margin:0; padding:3px 2px; text-align:left; background:none;}

#mobilemenu {display:none;}

/*****************************************************Footer******************************************************/
footer {width:100%; margin-top:50px; vertical-align:top; -webkit-flex:1; -ms-flex:1; flex:1; background-color:#e7eae7; width:100%; height:100px; position:relative;}
.footerbar1 {background-color:#1e3226; width:100%; height:1px; position:absolute; top:1px;}
.footerbar2 {background-color:#cde1d5; width:100%; height:2px; position:absolute; top:3px;}
.footerbar3 {background-color:#294534; width:100%; height:5px; position:absolute; top:5px;}
.footerbar4 {background-color:#5e9438; width:100%; height:21px; position:absolute; top:10px;}

footer img {width:300px; position:absolute; top:45px; margin-left:15px;}


/***********************************************HOMEPAGE**************************************************/
#slide {z-index:0;}

.homecol {-webkit-flex: 1; -ms-flex: 1; flex: 1;
  position:relative; background-color:#FFF;
  border:1px solid rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-bottom-right-radius:3px; border-bottom-left-radius:3px;
  transition:all 0.3s;
}
.homecol:hover {opacity:0.8;}
#home-columns1 .homecol:nth-child(1),
#home-columns1 .homecol:nth-child(2) {
  margin-right:20px;
}
#home-columns2 .homecol:nth-child(1),
#home-columns2 .homecol:nth-child(2) {
  margin-right:20px;
}
#home-twocolumns .homecol:nth-child(1){margin-right:30px;}

.homecol .featured-pic {
height:210px; margin-top:18px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#home-twocolumns .homecol .featured-pic {height:300px !important;}

#home-columns1 .homecol:nth-child(1) .featured-pic {background-image: url(../images/home/global.jpg);}
#home-columns1 .homecol:nth-child(2) .featured-pic {background-image: url(../images/home/virtual.jpg);}
#home-columns1 .homecol:nth-child(3) .featured-pic {background-image: url(../images/home/distance.jpg);}

#home-twocolumns .homecol:nth-child(1) .featured-pic {background-image: url(../images/home/workshops.jpg);}
#home-twocolumns .homecol:nth-child(2) .featured-pic {background-image: url(../images/home/give.jpg);}

/*#home-columns2 .homecol:nth-child(1) .featured-pic {background-image: url(../images/home/kits.jpg);}
#home-columns2 .homecol:nth-child(2) .featured-pic {background-image: url(../images/home/virtualbarn.jpg);}*/
#home-onecolumn {width:50%; margin:0 auto; text-align:center;}
#home-onecolumn .homecol:nth-child(1) .featured-pic {background-image: url(../images/home/workshops.jpg); height:300px;}

.homecol:nth-child(1) .topbar {background:url(../images/default/item1.png) no-repeat;}
.homecol:nth-child(2) .topbar {background:url(../images/default/item2.png) no-repeat;}
.homecol:nth-child(3) .topbar {background:url(../images/default/item3.png) no-repeat;}

.homecol:nth-child(1) .hd {color:#3697c8;}
.homecol:nth-child(2) .hd {color:#ec8435;}
.homecol:nth-child(3) .hd {color:#753472;}

.topbar {
top:12px; left:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position:absolute;
text-align:center;
width:100.1%; height:25px; 
}
.homecol h2 {text-align:center; text-transform: uppercase; margin:35px 10px 20px 10px; font-weight:500; font-size:1.5rem; line-height:1.5rem; font-family:'Playfair Display';
  height:100px; margin:0 8px !important;
  align-items: center; justify-content:center; display: flex;
  flex-direction: row; flex-wrap: wrap;}

section#home-columns1,
section#home-columns2,
section#home-twocolumns {margin-top:calc(5vh + 5px);}
section#home-onecolumn {margin-top:0;}

section.section {margin:5vh 0;}

/**************************************************SUBPAGE******************************************************/
/*Title Heading1*/
.title_wrap {margin:0 auto; margin-top:15px; width:1100px; background:url(../images/default/background_title.png) no-repeat; background-size:1100px; height:106px;}
.title_wrap h2 {
  font-size:3.4rem; line-height:3.4rem; font-family:'Playfair Display'; color:#FFF; text-transform:uppercase; letter-spacing:1px; font-weight:300;
  text-align:center; text-shadow:2px 2px 2px #959595;
  align-items: center; justify-content:center; display:flex;
  flex-direction: row; flex-wrap: wrap; height:100px;
}
.title_wrap h2.matrix {text-transform:none; font-size:2.4rem; line-height:2.4rem;}
.content_wrap {
background:#FFF; min-height:500px; width:88%; margin:30px auto; padding:40px;
border-radius:8px;
border: 0px solid #000000;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.45);
}

/*A H5  {font-size: 110%;}
.mediatype  {font-size:120%;}*/

.subpage {margin-top: calc(2vh + 5px); margin-bottom: calc(2vh + 5px); font-size:1.05rem; line-height:1.75rem;}

.subpage h3 {font-family:'Playfair Display'; font-size:3.3rem; line-height:3.3rem; font-weight:400; margin-bottom:2.6rem; color:#59b4e4; text-shadow:1px 1px 1px #959595; text-align:center;}
.subpage h3.small {font-size:2.9rem; line-height:3.3rem; margin-bottom:0; text-align:left;} /*mission, contact*/
.subpage h4, .subpage h5, .subpage h6, .subpage h7 {font-family:'Poppins'; font-weight:400;}
.subpage h4 {font-size:2.2rem; line-height:2.6rem; margin:0.2rem 0rem 1.0rem 0rem;}
.subpage h4.small {font-size:1.9rem; line-height:2.2rem; margin-bottom:0;}
.subpage h5 {font-size:1.8rem; line-height:2.1rem; margin:0.2rem 0.5rem 0.1rem 0.8rem;}
/*.subpage h5.small {font-size:1.5rem; line-height:1.8rem; margin-bottom:0;}*/
.subpage h6 {font-size:1.5rem; line-height:1.8rem; margin:0.2rem 0.5rem 0.1rem 1rem;}
.subpage h7 {font-size:1.3rem; line-height:1.5rem; margin:0.2rem 0.5rem 0.1rem 1rem;}

.subpage p {margin:5px 5px 20px 20px;}
.subpage p.br {margin:5px 5px 5px 20px;}
.subpage p.dent {margin:5px 5px 20px 45px;}
.subpage p.dentbr {margin:5px 5px 5px 45px;}
.center {margin:0 0 20px 0; text-align:center !important;}
strong {font-weight:500;}
.subpage ul, .subpage ol {margin:0 5px 20px 45px;}
.subpage ul ul, .subpage ol ol, .subpage ul ol, .subpage ol ul {margin:0 0 10px 20px;}

.partner {margin:0 1rem 1rem 1.5rem;}
partner_name {font-size:1.16rem; line-height:1.5rem; font-weight:400;}
/*
table {border-collapse: collapse;}
table, th, td {border: 1px solid #777; vertical-align: middle; color:#666; padding: 5px;}
th {font:1.4em/1.2 'Poppins', sans-serif; font-weight:300; color:#454545; text-align:left;}
*/
.subpage ul.listlink {margin:0 0.5rem 1.5rem 2.2rem;}
.subpage ul.listlink.br {margin-bottom:0 !important;}
.subpage ul.listlink li {list-style-type:none; margin:0;}
.subpage ul.listlink li a {padding:3px 15px; position:relative; display:block;}
.subpage ul.listlink li a::before {
  content:"\f0da"; font-size:1.2rem;
  font-family:FontAwesome;
  position:absolute;
  left:2px; top:3px;
  transition:all .2s;
  color:#0c63ae;
}
.subpage ul.listlink li a:hover::before {left:6px; color:#00ce4e;}
.subpage ul.listlink li span {margin-left:1.0rem;}
/*sublevel*/
.subpage ul.listlink li ul {margin-bottom:0 !important;}
.subpage ul.listlink li ul li a::before {content:"\f105"; font-size:1.0rem;}
/*sclb*/
.subpage ul.listlink li a.nobullet {padding:0; position:static;}
.subpage ul.listlink li a.nobullet::before {content:none;}
/*mybinder*/
.subpage ul.listlink li a.largefont {font-size:1.3rem;}
.subpage ul.listlink li a.largefont::before {font-size:1.4rem; top:4px;}

/********************************************Subpages Columns******************************************************/
.subcol {-webkit-flex: 1; -ms-flex: 1; flex: 1;
  position: relative;
  border-bottom-right-radius:3px; border-bottom-left-radius:3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.padbottom {padding-bottom:15px;} /*used only in about/index*/
#sub-columns1 .subcol:nth-child(1),
#sub-columns1 .subcol:nth-child(2){margin-right:20px;}
#sub-columns2 .subcol:nth-child(1),
#sub-columns2 .subcol:nth-child(2){margin-right:20px;}
#sub-columns3 .subcol:nth-child(1),
#sub-columns3 .subcol:nth-child(2){margin-right:20px;}
#sub-columns4 .subcol:nth-child(1),
#sub-columns4 .subcol:nth-child(2){margin-right:20px;}
#sub-columns5 .subcol:nth-child(1),
#sub-columns5 .subcol:nth-child(2){margin-right:20px;}
#sub-twocolumns1 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns2 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns3 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns4 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns5 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns6 .subcol:nth-child(1){margin-right:20px;}

.subcol:nth-child(1) .topbar {background:url(../images/default/item1.png) no-repeat;}
.subcol:nth-child(2) .topbar {background:url(../images/default/item2.png) no-repeat;}
.subcol:nth-child(3) .topbar {background:url(../images/default/item3.png) no-repeat;}

.subcol:nth-child(1) .hd {color:#3697c8;}
.subcol:nth-child(2) .hd {color:#ec8435;}
.subcol:nth-child(3) .hd {color:#753472;}
.subcol:nth-child(1) .hd:hover {color:#00a9ff;}
.subcol:nth-child(2) .hd:hover {color:#ff6e00;}
.subcol:nth-child(3) .hd:hover {color:#b823b1;}

.topbar {
top:12px; left:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position:absolute;
text-align:center;
width:100.1%; height:25px; 
}

section#sub-columns1,
section#sub-columns2,
section#sub-columns3,
section#sub-columns4,
section#sub-columns5,
section#sub-onecolumn,
section#sub-twocolumns1,
section#sub-twocolumns2,
section#sub-twocolumns3,
section#sub-twocolumns4,
section#sub-twocolumns5,
section#sub-twocolumns6 {margin: calc(1.0vh + 15px);}

/*landing pages*/
.subcol h3 {font-size:1.5rem; line-height:1.6rem; text-align:center; font-weight:400;
  font-family:'Poppins'; text-shadow:none;
  height:100px; margin:14px 5px 0 5px;
  align-items:center; justify-content:center; align-content:right; display:flex;
  flex-direction: row; flex-wrap: wrap; transition:0.2s all;
}

.subcol h4, .subcol h5, .subcol h6 {
  font-size:1.7rem; line-height:2rem; text-align:center; font-weight:400;
  height:80px; margin:14px 8px 0 8px;
  align-items: center; justify-content:center; align-content:right; display: flex;
  flex-direction: row; flex-wrap: wrap; transition:0.2s all;
}

.subcol a {text-decoration: none;}
.subcol a:hover {transition: all 0.4s; color:#03a8e5;}

.sub-box {font-size:1rem; font-weight:300; padding:15px;}
.sub-box p {margin:0;} /*description for videos*/

.sub-box ul {list-style-type: none; margin:0 0 20px 18px !important;}
.sub-box ul.agmag {list-style-type: none; margin:0 5px 20px 1px !important;}
.sub-box ul li {line-height:1.3rem; padding:0.4rem 0;}
.sub-box ul li a {padding:0 1rem; display:block; position:relative;}
.sub-box ul li a::before {
  content:"\f0da";
  font-family:FontAwesome;
  position:absolute;
  left:2px; top:0;
  transition:all .2s;
  color:#0c63ae;
}
.sub-box ul li a:hover::before {left:8px; color:#03a8e5;}

/*EDUCATOR index*/
.subcol .edu-pic {height:188px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.edu-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-columns1 .subcol:nth-child(1) .edu-pic {background-image: url(../images/edu/index/virtual.jpg);}
#sub-columns1 .subcol:nth-child(2) .edu-pic {background-image: url(../images/edu/index/distance.jpg);}
#sub-columns1 .subcol:nth-child(3) .edu-pic {background-image: url(../images/edu/index/specialist.jpg);}
#sub-columns2 .subcol:nth-child(1) .edu-pic {background-image: url(../images/edu/index/mybinder.jpg);}
#sub-columns2 .subcol:nth-child(2) .edu-pic {background-image: url(../images/edu/index/agmag.jpg);}
#sub-columns2 .subcol:nth-child(3) .edu-pic {background-image: url(../images/edu/index/matrix.jpg);}
#sub-columns3 .subcol:nth-child(1) .edu-pic {background-image: url(../images/edu/index/fft.jpg);}
#sub-columns3 .subcol:nth-child(2) .edu-pic {background-image: url(../images/edu/index/garden.jpg);}
#sub-columns3 .subcol:nth-child(3) .edu-pic {background-image: url(../images/edu/index/cream.jpg);}
#sub-columns4 .subcol:nth-child(1) .edu-pic {background-image: url(../images/edu/index/video.jpg);}
#sub-columns4 .subcol:nth-child(2) .edu-pic {background-image: url(../images/edu/index/book.jpg);}
#sub-columns4 .subcol:nth-child(3) .edu-pic {background-image: url(../images/edu/index/materials.jpg);}
#sub-columns5 .subcol:nth-child(1) .edu-pic {background-image: url(../images/edu/index/agventures.jpg);}
#sub-columns5 .subcol:nth-child(2) .edu-pic {background-image: url(../images/edu/index/journey.jpg);}
#sub-columns5 .subcol:nth-child(3) .edu-pic {background-image: url(../images/edu/index/podcast.jpg);}
#sub-onecolumn .subcol:nth-child(1) .edu-pic {background-image: url(../images/edu/index/tour.jpg); height:300px;}


/*FFT*/
.subcol .fft-pic {height:288px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.fft-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-twocolumns1 .subcol:nth-child(1) .fft-pic {background-image: url(../images/edu/fft/k2.jpg);}
#sub-twocolumns1 .subcol:nth-child(2) .fft-pic {background-image: url(../images/edu/fft/35.jpg);}
#sub-twocolumns2 .subcol:nth-child(1) .fft-pic {background-image: url(../images/edu/fft/68.jpg);}
#sub-twocolumns2 .subcol:nth-child(2) .fft-pic {background-image: url(../images/edu/fft/912.jpg);}
#sub-twocolumns3 .subcol:nth-child(1) .fft-pic {background-image: url(../images/edu/fft/maps.jpg);}
#sub-twocolumns3 .subcol:nth-child(2) .fft-pic {background-image: url(../images/edu/fft/intermap.jpg);}

/*distance_hyper*/
.subcol .hyper-pic {height:220px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.hyper-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-twocolumns1 .subcol:nth-child(1) .hyper-pic {background-image: url(../images/edu/distance/hyper/k2.jpg);}
#sub-twocolumns1 .subcol:nth-child(2) .hyper-pic {background-image: url(../images/edu/distance/hyper/35.jpg);}
#sub-twocolumns2 .subcol:nth-child(1) .hyper-pic {background-image: url(../images/edu/distance/hyper/68.jpg);}
#sub-twocolumns2 .subcol:nth-child(2) .hyper-pic {background-image: url(../images/edu/distance/hyper/912.jpg);}
.subcol h5.hyper {height:auto;}

/*AgMag*/
.subcol .agmag-pic {height:188px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.agmag-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-columns1 .subcol:nth-child(1) .agmag-pic {background-image: url(../images/edu/agmag/gradeK.jpg);}
#sub-columns1 .subcol:nth-child(2) .agmag-pic {background-image: url(../images/edu/agmag/grade1.jpg);}
#sub-columns1 .subcol:nth-child(3) .agmag-pic {background-image: url(../images/edu/agmag/grade2.jpg);}
#sub-columns2 .subcol:nth-child(1) .agmag-pic {background-image: url(../images/edu/agmag/grade3.jpg);}
#sub-columns2 .subcol:nth-child(2) .agmag-pic {background-image: url(../images/edu/agmag/grade4.jpg);}
#sub-columns2 .subcol:nth-child(3) .agmag-pic {background-image: url(../images/edu/agmag/grade5.jpg);}

/*Video*/
.subcol .video-pic {height:188px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.video-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-columns1 .subcol:nth-child(1) .video-pic {background-image: url(../images/edu/video/follow.jpg);}
#sub-columns1 .subcol:nth-child(2) .video-pic {background-image: url(../images/edu/video/farmers.jpg);}
#sub-columns1 .subcol:nth-child(3) .video-pic {background-image: url(../images/edu/video/poultry.jpg);}
#sub-columns2 .subcol:nth-child(1) .video-pic {background-image: url(../images/edu/video/beef.jpg);}
#sub-columns2 .subcol:nth-child(2) .video-pic {background-image: url(../images/edu/video/dairy.jpg);}
#sub-columns2 .subcol:nth-child(3) .video-pic {background-image: url(../images/edu/video/pork.jpg);}
#sub-columns3 .subcol:nth-child(1) .video-pic {background-image: url(../images/edu/video/specialty.jpg);}
#sub-columns3 .subcol:nth-child(2) .video-pic {background-image: url(../images/edu/video/corn.jpg);}
#sub-columns3 .subcol:nth-child(3) .video-pic {background-image: url(../images/edu/video/tours.jpg);}

/*Materials*/
.subcol .materials-pic {height:288px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.materials-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-twocolumns1 .subcol:nth-child(1) .materials-pic {background-image: url(../images/edu/materials/index_poster_ag.jpg);}
#sub-twocolumns1 .subcol:nth-child(2) .materials-pic {background-image: url(../images/edu/materials/index_poster_where.jpg);}
#sub-twocolumns2 .subcol:nth-child(1) .materials-pic {background-image: url(../images/edu/materials/index_card.jpg);}
#sub-twocolumns2 .subcol:nth-child(2) .materials-pic {background-image: url(../images/edu/materials/index_profile.jpg);}
#sub-onecolumn .subcol:nth-child(1) .materials-pic {background-image: url(../images/edu/materials/index_global.jpg);}

/*Turkey*/
.subcol .turkey-pic {height:188px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.turkey-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-columns1 .subcol:nth-child(1) .turkey-pic {background-image: url(../images/edu/turkey/virtual.jpg);}
#sub-columns1 .subcol:nth-child(2) .turkey-pic {background-image: url(../images/edu/turkey/lesson.jpg);}
#sub-columns1 .subcol:nth-child(3) .turkey-pic {background-image: url(../images/edu/turkey/video.jpg);}
#sub-columns2 .subcol:nth-child(1) .turkey-pic {background-image: url(../images/edu/turkey/activities.jpg);}
#sub-columns2 .subcol:nth-child(2) .turkey-pic {background-image: url(../images/edu/turkey/book.jpg);}
#sub-columns2 .subcol:nth-child(3) .turkey-pic {background-image: url(../images/edu/turkey/fun.jpg);}

/*grants/index*/
.subcol .grants-pic {height:288px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.grants-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-twocolumns1 .subcol:nth-child(1) .grants-pic {background-image: url(../images/grants/index/literacy.jpg);}
#sub-twocolumns1 .subcol:nth-child(2) .grants-pic {background-image: url(../images/grants/index/award.jpg);}

/*programs/index*/
.subcol .programs-pic {height:288px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.programs-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-twocolumns1 .subcol:nth-child(1) .programs-pic {background-image: url(../images/programs/index/global.jpg);}
#sub-twocolumns1 .subcol:nth-child(2) .programs-pic {background-image: url(../images/programs/index/workshops.jpg);}
#sub-twocolumns2 .subcol:nth-child(1) .programs-pic {background-image: url(../images/programs/index/book.jpg);}
#sub-twocolumns2 .subcol:nth-child(2) .programs-pic {background-image: url(../images/programs/index/tour.jpg);}


/*about/index*/
.subcol .about-pic {height:288px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.about-pic:hover {opacity:0.8; transition: all 0.4s;}
#sub-twocolumns1 .subcol:nth-child(1) .about-pic {}
#sub-twocolumns1 .subcol:nth-child(2) .about-pic {}
#sub-twocolumns2 .subcol:nth-child(1) .about-pic {background-image: url(../images/about/ag_story.jpg);}
#sub-twocolumns2 .subcol:nth-child(2) .about-pic {background-image: url(../images/about/lead.jpg);}
#sub-twocolumns3 .subcol:nth-child(1) .about-pic {background-image: url(../images/about/supporters.jpg);}
#sub-twocolumns3 .subcol:nth-child(2) .about-pic {background-image: url(../images/about/connect.jpg);}
.subcol h3.about {text-align:center; margin:30px 0 0 0; text-shadow:none; font-size:2.3rem; line-height:2.7rem; font-family:'Poppins';}
.subcol h4.about {text-align:center; font-size:1.4rem; line-height:1.5rem; text-transform:none; margin-bottom:-25px !important;}
.subcol p.about {text-align:center; line-height:1.3rem; margin:10px 2px;}
.eqheight {height:190px; margin:0 5px 15px 5px; align-items: center; justify-content:center; align-content:right; display: flex;
  flex-direction: row; flex-wrap: wrap;}


/*********************************************************GRID***************************************************/
/*ABOUT, FOUNDATION*/
/*about/index impact grids and image*/
.impactgrid {display:grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); margin:0;}
.impactgrid > div {padding:1rem 0.2rem 0.2rem 0.2rem; text-align:center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); background-color:#67bae8; color:#FFF;}
.impactgrid > div i {font-size:5rem;}
.impactgrid > div p { font-size:0.9rem; line-height:1.1rem; margin:10px 1px;}
.impactimg {width:90%; margin:0 auto; text-align:center;}

/*about/index social icons*/
.connect {margin:0 auto; text-align:center; width:100%;}
.connect ul {margin:0;}
.connect ul li {list-style-type:none; display:inline-block; padding:0.5rem 0.6rem 0 0.6rem;}
.connect a {font-size:2rem; color:#03a049;}
.connect a:hover {color:#9dcb3c;}

/*about/news*/
.newsgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(1px, 100%));
  grid-gap:1rem; margin:0 5px;}
.newsgrid > div {
	margin:0; padding:3px 0;
	background-color:#F8F8F8;
	border-top:36px solid #03a049;
	border-bottom-right-radius:5px; border-bottom-left-radius:5px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.newsgrid > div h3 {margin:-31px 0 5px 0; color:#FFF; font-size:1.7rem; line-height:1.5rem; text-shadow:none; text-align:center;}
.newsgrid > div ul {margin:15px 0 15px 15px;}
.newsgrid > div ul li {list-style-type:none; margin:0;}
.newsgrid > div ul li a {padding:0 10px 0 20px; display:block; position:relative;}
.newsgrid > div ul li a::before {
  content:"\f0da";
  font-family:FontAwesome;
  position:absolute;
  left: 2px; top:0;
  transition:all .2s;
  color:#0c63ae;
}
.newsgrid > div ul li a:hover::before {left:8px; color:#03a8e5;}

/*about/staff, foundation/index*/
.staffgrid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); justify-items:center;
  grid-gap:1rem; margin:25px 5px; text-align:center;}
.staffgrid > div h5 {font-size:1.5rem; line-height:1.8rem; margin-bottom:0;}
.staffgrid > div img {width:200px; margin:10px auto; transition:all 0.3s;}
.staffgrid > div img:hover {opacity:0.9; transform: scale(1.02);}

/*FOUNDATION*/
/*foundation/sponsors*/
.threelogos {display:grid; grid-template-columns: repeat(3, 1fr); grid-gap:1.0rem; margin:0 5px 45px 5px;}
.threelogos > div {
	border-top:5px solid #55b5e8;
    background-color:#FFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding:1rem; 
	display:flex; justify-content:center; alignment-baseline:center; align-items:center; align-content:right; flex-direction:row; flex-wrap:wrap;
}
.threelogos > div.svg {display:block;}
.threelogos > div.svg img {position: relative; top: 50%; transform: translateY(-50%);} /*vertical center aligned*/
/*.threelogos > div > div {margin:8px 0; text-align:center;}*/


.fourlogos {
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-gap:1.0rem; margin:0 5px 45px 5px; }
.fourlogos > div {
	border-top:5px solid #fece00;
    background-color:#FFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding:1rem;
	display:flex; justify-content:center; align-items:center;
}
/*.fourlogos > div > div {margin-top:8px;}*/

.fivelogos {
  display:grid; grid-template-columns: repeat(5, 1fr);
  grid-gap:1.0rem; margin:0 5px 45px 5px; }
.fivelogos > div {
	border-top:5px solid #03a049;
    background-color:#FFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding:1rem;
	text-align:center; font-weight:300;
	display:flex; align-items:center;
}
.fivelogos > div > div.textlogo {background-color:#c3e2f3; padding:0.7rem; margin:0 auto; text-align:center;}
.textlogo a {color:#000; text-align:center; font-weight:600; font-family:'Anton'; letter-spacing:0.1rem; font-size:1.4rem; line-height:1.2rem; margin:0 auto;}
.fivelogos > div > div.textlogo_short {background-color:#c3e2f3; padding:2rem 0.7rem; margin:0 auto; text-align:center;}
.textlogo_short a {color:#000; text-align:center; font-weight:600; font-family:'Anton'; letter-spacing:0.1rem; font-size:2.3rem; line-height:2rem; margin:0 auto;}
/*.fivelogos > div > div {margin-top:8px;}*/

.sixlogos {
  display:grid; grid-template-columns: repeat(5, 1fr);
  grid-gap:1.0rem; margin:0 5px 45px 5px; }
.sixlogos > div {
	border-top:5px solid #f68b2e;
    background-color:#FFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding: 1rem;
	text-align:center; font-weight:300;
	display:flex; align-items:center;
}
/*.sixlogos > div > div {margin-top:8px;}*/

/*EDUCATOR*/
/*fft Map 3 Grids*/
.mapgrid {display:grid; grid-gap:1rem; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));}
.mapgrid > div {
  padding:10px;
  background-color:#FAFAFA; border: 1px solid #ddd;
  -webkit-flex: 1; -ms-flex: 1; flex: 1;
  font-size:1.0rem; font-family:'Poppins'; font-weight:300; text-align:center;
}
.mapgrid > div img {text-align:center; margin:0 auto; transition:all 0.3s; width:90%;}
.mapgrid > div img:hover {opacity:0.9; transform: scale(1.02);}
.mapgrid > div a {color:#03a8e5;}

/*3 Grids - Distance Learning, Virtual Field Trips*/
.edu3grid {
  display:grid; grid-template-columns: repeat(3, minmax(1px, 100%));
  grid-gap:1rem; margin:35px 5px;
}
.edu3grid > div {
	margin:0; padding-bottom:3px;
	background-color:#F8F8F8; border-top:8px solid #023866;
	border-bottom-right-radius:5px; border-bottom-left-radius:5px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.edu3grid > div.greentop {border-top:8px solid #78be21;}
.edu3grid > div ul {margin:15px 0 15px 15px;}
.edu3grid > div ul li {list-style-type:none; line-height:1.3rem; padding:0.4rem 0;}
.edu3grid > div ul li a {padding:0 10px 0 20px; display:block; position:relative;}
.edu3grid > div ul li a::before {
  content:"\f0da";
  font-family:FontAwesome;
  position:absolute;
  left: 2px; top:0;
  transition:all .2s;
  color:#0c63ae;
}
.edu3grid > div ul li a:hover::before {left:8px; color:#03a8e5;}
.edu3grid > div p {margin:1rem 1rem 1.5rem 1rem; line-height:1.55rem;}
.edu3grid > div img {transition:all 0.3s;}
.edu3grid > div img:hover {opacity:0.9; transform: scale(0.98);}

/*2 Grids - educator/book, materials_poster_ag, materials_poster_where*/
.edu2grid {
  display:grid; grid-template-columns: repeat(2, minmax(1px, 100%));
  grid-gap:2rem; margin:35px 5px;
}
.edu2grid > div {
	background-color:#F8F8F8; padding:17px 5px;
	border-bottom-right-radius:5px; border-bottom-left-radius:5px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	-webkit-flex: 1; -ms-flex: 1; flex: 1;
}
.edu2grid > div h4 {font-size:1.5rem; text-align:center; margin:8px 0;}
.edu2grid > div ul {margin:0 25px;}
.edu2grid > div ul li {list-style-type:disc; margin-left:20px;}
.edu2grid > div ul.gridlink {margin:15px;}
.edu2grid > div ul.gridlink li {list-style-type:none; margin-left:13px;}
.edu2grid > div ul.gridlink li a {padding:0 10px 0 20px; display:block; position:relative;}
.edu2grid > div ul.gridlink li a::before {
  content:"\f0da";
  font-family:FontAwesome;
  position:absolute;
  left: 2px; top:0;
  transition:all .2s;
  color:#0c63ae;
}
.edu2grid > div ul.gridlink li a:hover::before {left:8px; color:#03a8e5;}
.edu2grid > div img {text-align:center; margin:8px auto; transition:all 0.3s; width:90%;}
.edu2grid > div img:hover {opacity:0.9; transform: scale(1.02);}


/********************************************************SUBPAGE STYLE*******************************************************/
/*ABOUT US*/
/*index list - about/index, foundation/index*/
.indexlist {height:280px; align-items: center; justify-content:center; align-content:right; display: flex;
  flex-direction: row; flex-wrap: wrap; transition:0.2s all;}
.indexlist ul {list-style-type: none; margin:20px 0 20px -35px;}
.indexlist ul li {line-height:1.3rem; padding:0.5rem 0;}
.indexlist ul li a {padding:0 35px; font-size:1.3rem; position: relative;}
.indexlist ul li a::before {
  content:"\f005";
  font-family:FontAwesome;
  position:absolute;
  left:2px; top:3px;
  transition:all .2s;
  color:#ffbf00;
}
.indexlist ul li a:hover::before { transform: scale(1.15); color:#ffce00;}

/*FOUNDATION*/
/*foundation/index*/
.photo_desc {float:right; width:400px; font-size:0.9rem; line-height:1.2rem; color:#555; text-align:center;}
.photo_desc img {width:100%; margin-bottom: 10px;}

/*EDUCATOR*/
/*lessons list*/
#fftlesson h3 {font-family:'Playfair Display'; font-size:3.3rem; line-height:2.9rem; color:darkgreen; letter-spacing:1px; text-shadow:none; border-bottom: 2px solid darkgreen; text-align:center; margin-bottom: 35px;}  /*H3: Food for Thought Lesson Plans*/
#fftlesson h4, #fftlesson h5, #fftlesson h6, #fftlesson h7 {font-family:'Poppins'; font-weight:400;}
#fftlesson h4 {font-size:2.8rem; line-height:2.8rem; text-align:center; margin:30px auto; color:000;} /*lesson title*/
#fftlesson h5 {font-size:1.6rem; line-height:2.1rem; margin-left:5px; margin-bottom:0;} /*Grade level, time, vocabulary...*/
#fftlesson h6 {font-size:1.3rem; line-height:1.7rem; margin-left:10px; margin-bottom:0;}
#fftlesson h7 {font-size:1.22rem; line-height:1.3rem; margin-left:15px; margin-bottom:0;}

#fftlesson ol li ol {margin-left:30px;}
#fftlesson ul li ul {margin-left:30px;}
#fftlesson ol li ul {margin-left:30px;}
#fftlesson ol li ol li ol {margin-left:20px;}
#fftlesson ul li ul li {list-style-type:circle;}
#fftlesson ul li ul li ul li {list-style-type:square;}
#fftlesson ol li ol li {list-style-type:lower-alpha;}
#fftlesson ol li ol li ol li {list-style-type:lower-roman;}
#fftlesson ol li ol li ol li ol li {list-style-type:decimal;}
#fftlesson ol li ul li ul li {list-style-type:circle;}
#fftlesson ol li ol li ul li {list-style-type:disc;}
#fftlesson ol li ul li {list-style-type:disc;}
#fftlesson ul.nobullet li {list-style-type:none;}

#fftlesson a {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/*FFT Lesson Grid*/
.lessontablegrid1 {display:grid; grid-template-columns:200px auto; border: 1px solid #ddd; margin:0 5px 25px 5px;}
.lessontablegrid1 > div {padding:5px; border: 1px solid #ddd;}
.lessontablegrid1 > div.tblhead {font-weight:500; font-size:1.2rem;}

.lessontablegrid2 {display:grid; grid-template-columns: repeat(9, minmax(1px, 100%)); border: 1px solid #ddd; margin:0 0 15px 0;}
.lessontablegrid2 > div {padding:2px; border: 1px solid #ddd; font-size:0.9rem; text-align:center;}
.lessontablegrid2 > div.tblhead {padding:3px 1px; font-weight:500; font-size:0.9rem; line-height:0.9rem; text-align:center; display:flex; align-items:center;}

.lessontablegrid3 {display:grid; grid-template-columns:75px 75px auto 110px; border: 1px solid #ddd; margin:0 5px 25px 5px;}
.lessontablegrid3 > div {padding:5px; border: 1px solid #ddd; font-size:1.0rem;}
.lessontablegrid3 > div.tblhead {padding:3px 1px; font-weight:500; font-size:1.0rem; text-align:center;}

.lessontablegrid4 {display:grid; grid-template-columns:135px 35px 135px 35px 135px 35px; margin:0 5px 25px 5px;}
.lessontablegrid4 > div {padding:5px; border: 1px solid #ddd; font-size:1.0rem;}
.lessontablegrid4 > div.num {text-align:center;}

/*materials list*/
.materials {margin:10px auto; text-align:center;}
.materials ul li {list-style-type:none; margin:0; display:inline-block;}
.materials ul li a {padding:3px 10px 3px 25px; position:relative; color:#12793a;}
.materials ul li a:hover {color:#00ce4e;}
.materials ul li a::before {
  content:"\f13a"; font-size:0.93rem;
  font-family:FontAwesome;
  position:absolute;
  left:3px; top:0;
  transition:all .2s;
  color:#12793a;
}
.materials ul li a:hover::before {top:3px; color:#00ce4e;}

/*programs/workshops*/
.workshop {font-size:1.22rem; margin-left:2rem;}


hr {border:0; height:1px; background: #333;
    background-image: linear-gradient(to right, #FFF, #12793a, #FFF);
	width:100%; margin:0 auto; margin-top:18px;}
	
/*********************************Button***************************************/
/*.buttonwrap {display:inline-grid; grid-template-rows:30px; grid-template-columns:450px; grid-gap:3px;}*/
.buttonwrap > div {display:flex; justify-content:center; align-items:center;}
.wrapdonate {margin:2rem 0 2rem 1rem;}
.wrapfft {margin:0 0 3rem 0;}
.wrapagmag {margin:2rem 0 2rem 1rem;}
.button {
  font-family:'Raleway'; font-size:1.1rem; line-height:1.1rem; text-align:center; color:#FFF;
  border-radius:6px; display:block; border:none; background-color:#008bec;
  padding:10px 20px; transition: all 0.5s; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); cubic-bezier(.25,.8,.25,1);
}
.button:hover {background-color:#03a8e5;}
.button a {color:#FFF !important;}
.button span {cursor:pointer; display:block; position: relative; transition: 0.5s;}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity:0; transition: 0.5s;
  top:0; right:-20px;
}
.button:hover span {padding-right:25px;}
.button:hover span:after {opacity:1; right:0;}
.button_donate {width:250px; text-transform:uppercase;}
.button_order {width:520px;}
/*
 .gradient-button {
background-image: -webkit-linear-gradient(#63dbfb, #008bec);
background-image: -o-linear-gradient(#63dbfb, #008bec);
background-image: linear-gradient(#63dbfb, #008bec);
    margin:10px 2%; padding:6px 0; width:300px; border-radius:6px;
    font:1.2em/1.2 'Raleway', sans-serif; text-align:center;
    text-transform: uppercase;
    background-size: 200% auto;      
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer; display: inline-block;
}
.gradient-button a {color:#FFF !important;}
.gradient-button a:hover {text-decoration:none !important;}
.gradient-button:hover{
    box-shadow: 0 5px 8px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
   background-position: top;
}*/
/***********************************Anchor Links**************************************/
/*about/staff, grants/award, educator/video, educator/turkey*/
.anchorlinks ul {list-style:none; text-align:center; margin:-25px 0 25px 20px;}
.anchorlinks ul li {display:inline-block;}
.anchorlinks ul li a {padding:0 20px; display:block; position:relative; text-decoration:none;}
.anchorlinks ul li a::before {
  content:"\f13a";
  font-family:FontAwesome;
  position:absolute;
  left:1px; top:0;
  transition:all .2s;
}
.anchorlinks ul li a:hover::before {top:2px; color:#00ce4e;}
/*
.anchorlinks ul li a.anchorhome::before {content:"\f015"; font-size:1.3rem; left:0;}
.anchorlinks ul li::before.anchorOn {color:#333; content:"\f13a";
  font-family:FontAwesome;}
.anchorlinks ul li.anchorOn::before {color:#333;}
*/
/********************************************Image Styles*************************************************/
.dropshadow {box-shadow: 3px 3px 4px #777;}
.width400 {width:400px;}
.width300 {width:300px;}
.marginright {margin:13px 5px 15px 15px;}
.floatright {float:right;}
.centerimg {margin:25px auto; text-align:center;}
/************************************************Matrix Styles***********************************************/
#submitsearch  { margin-bottom: 4px; }
.matrix-subpage {margin-top:calc(3vh + 5px); margin-bottom:calc(6vh + 5px); font-size:1.0rem; line-height:1.35rem; font-weight:300;}
.matrix-subpage label {font-size:1.15rem; line-height:1.55rem; font-weight:300;}
.matrix-subpage hr {border:0; height:1px; background-image: linear-gradient(to right, #FFF, #59b4e4, #FFF);	width:100%; margin:0 auto; position: relative;}

h3.matrixh3 {font-family:'Playfair Display'; font-size:2.8rem; line-height:3.0rem; font-weight:400; margin:0 0.1rem; color:#59b4e4; text-align:center;}
h4.matrixh4 {font-size:2.2rem; line-height:2.2rem; margin:0 1rem 3rem 1rem; font-family:'Playfair Display'; font-weight:400; text-align:center;}
h5.matrixh5 {font-size:1.9rem; line-height:2.0rem; margin:1rem 0.5rem 0.3rem 0.8rem; font-family:'Raleway'; font-weight:400;}
h6.matrixh6 {font-size:1.4rem; line-height:1.6rem; margin:0 0.5rem 0 0.9rem; font-family:'Raleway'; font-weight:400;}
p.matrix {margin:0 0.2rem 1rem 0.8rem;}

.searchhead {text-align:left; font-size:1.4rem; line-height:1.6rem; margin-left:10px; margin-bottom:0; font-weight:400;}
.errorcode  { margin: 20px 0px 0px 10px; color: #cc1515; font-weight: bold; background-color: #ffcccc; text-align: center; padding: 6px 0px; }
.successcode  { margin: 20px 0px 0px 10px; background-color: #a7e3bc; padding: 6px 0px;}
.successcode span {font-size:1.15rem; line-height:1.55rem; font-weight:300;}

ul.matrixlink {margin:3rem 0.5rem 3rem 1.5rem;}
ul.matrixlink li {list-style-type:none; margin:0; padding:6px 0;}
ul.matrixlink li a {padding:0 15px; position:relative; display:block; font-size:1.2rem;}
ul.matrixlink li a::before {
  content:"\f0da"; font-size:1.2rem;
  font-family:FontAwesome;
  position:absolute;
  left:2px; top:0;
  transition:all .2s;
}
ul.matrixlink li a:hover::before {left:6px; color:#00ce4e;}

.mxbutton {
  font-family:'Raleway'; font-size:1.1rem; line-height:1.0rem; text-align:center; color:#FFF;
  border-radius:6px; display:inline-block;
  border:none; background-color:#03a049;
  padding:10px 20px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); cubic-bezier(.25,.8,.25,1);
  margin-left:20px; margin-bottom:20px;
}
.mxbutton:hover {background-color:#00ce4e;}
.mxbutton a {color:#FFF !important; }
.mxbutton span {cursor: pointer;
  display:block;
  position: relative;
  transition: 0.5s;}
.mxbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.mxbutton:hover span {padding-right: 25px;}
.mxbutton:hover span:after {opacity: 1; right: 0;}

.mxsearchw {width:180px;}
.mxcenterw {width:46%; margin:3px auto;}
.mxLRbutton {width:29.3%;}
.mxbuttonwrap {display:block; margin:50px auto; text-align:center;}

/*matrix.tpl login*/
.logingrid {
  display:grid;
  grid-template-columns:auto auto;
  margin:0 15px;
}
.logingrid > div {
  padding:5px 0 9px 0;
  display:inline-block;
  align-items: center;
}
.logingrid label {display:block; margin-left:2px;}
#mybinderlogin {margin:0 auto; display:flex; justify-content:center;}
.logininputs  {border:1px solid #888888; width:94.5%; padding:6px 8px; font-size:1.1rem; line-height:1.1rem; display:inline-block; border-radius:4px; transition:all 0.3s;}
.logininputs:hover  {border:1px solid #051a3a; background-color:#f9fbff;}
.errorcode  { margin: 20px 0px 0px 10px; color: #cc1515; font-weight: bold; line-height: 120%; background-color: #ffcccc; text-align: center; padding: 10px 20px; }

/*createuser.tpl, editprofile.tpl*/
h5.checkboxlist {margin:25px 15px 0 0; font-family:'Poppins'; font-weight:400; font-size:1.4rem;}
label.checkbox {font-size:1rem; line-height:1rem;}
#create  { margin: 0px 20px; }
#location  { cursor: pointer; }
.required  { color: #cc1313; }
.half  { width: 50%; padding-right: 2%; }
.whole  { width: 100%; }
.half, .whole  { float: left; margin: 5px 0px; box-sizing: border-box; font-size: 1em; line-height: 1em;}
.inputs  {border: 1px solid #cccccc; width: 70%; padding:5px 8px; border-radius:5px;}
.redinput  { background-color: #ffdddd; border: 1px solid #cc1313; color: #cc1313; }
.showerror  { margin: 5px 0px; color: #cc1313; font-weight: bold; }

/* forgotpassword.tpl resetpassword.tpl */
#address  {margin:0 auto; text-align:center;}
#resetpassword, #resetemail {display:flex; justify-content:center; width:44%;}
#resetpassword::placeholder, #resetemail::placeholder  {color:#888; font-weight:normal;}
#forgoterror  {margin-bottom:20px;}
.resetinputs  {border:1px solid #888; padding:6px 10px; font-size:1rem; line-height:1rem; border-radius:5px; margin:0 auto; display:flex; justify-content:center; transition:all 0.3s;}
.resetinputs:hover {border:1px solid #8aa1a8; background-color:aliceblue;}

/*mybinder.tpl*/
.deletebtn  { padding: 5px 20px; margin: 5px 15px 20px 10px; background-color: #03a049; color: #ffffff; border-radius: 6px; border: none; display: inline-block; font-size: 1em; line-height: 1em; cursor: pointer; }
.deletebtn:hover  { background-color: #00ce4e; }
.deletebtn.disable  { background-color: #a7a7a7; color: #ffffff; }
.deletebtn.disable:hover  { background-color: #bbbbbb; color: #ffffff; }
.mark2  {top:12px !important; left:10px !important;} /*position of checkbox for only MyBinder*/
.lessonanchor  { font-size: 1.3em; line-height: 1.1em; display: inline-block; }
.purpose2  {margin:0 0.2rem 0.2rem 3.5rem;}
.purpose2 p  {margin: 0px; }

/*searchresult.tpl*/
h5.searchlesson {font-size:1.3rem; line-height:1.5rem; font-family:'Poppins'; font-weight:400; margin-left:15px;}
h6.searchresource {font-size:1.3rem; line-height:1.5rem; font-family:'Poppins'; font-weight:400; margin-left:15px;}
h5.resourcetype {font-size:1.6rem; line-height:1.7rem; font-family:'Poppins'; font-weight:300; margin:15px 0px 0px 15px;}
.noresults  { text-align: center; background-color: #e8e8e8; padding: 5px 0px; }
.purpose  { font-size: 1em; line-height: 1.3em; margin: 5px 0px 20px 15px; }
.purpose p  { font-size: 1em; line-height: 1.3em; margin:0; }
/*View more...button in search*/
.showall  {width:100%; position:relative;}
.showallfade  {height:80px; width:100%; position:absolute; z-index:2; bottom:0px; left:0px; background-image:url("/images/matrix/whiteblend.svg"); background-repeat:repeat-x; background-size:auto 100%;}
.showallbtn  {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border:none; border-radius:5px; padding:7px 15px 8px 15px; background-color:#03a049; color:#ffffff; font-size:1em; cursor:pointer; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.6); transition:all 0.3s;}
.showallbtn:hover  {background-color: #00ce4e; }
.showrest.hidden  {display: none; }

/*lesson.tpl*/
h5.lessontitle {font-size:2.0rem; line-height:2.2rem; margin:2rem 0.2rem 1rem 0rem; font-weight:400;}
h6.Lcategory  {font-size:1.5rem; line-height:1.7rem; margin:0.9rem 0.2rem 0.2rem 0.3rem; font-weight:400;}
/*standards buttons*/
#standardbtns  {width:100%; border-collapse:collapse; margin-top:30px; margin-left:0px; margin-right:0px; border:none; }
#standardbtns TR TD  {border:none; width:33.3%; padding:0px 5px; margin:0;}
#standardbtns.four TR TD  {width: 25%;}
#standardbtns TR TD  {vertical-align:top;}
#standardbtns TR TH  {vertical-align:middle;}
#standards  {width:100%; min-height:200px;}

.standardbtn  {border:none; font-size:0.98rem; line-height:1.18rem; cursor:pointer; width:100%; background-color:#b54343; color:#FFF; display:block; text-align:center; padding:8px 10px; border-radius:8px; transition:all 0.3s; height:55px;}
.standardbtn:hover  { background-color: #00ce4e; color: #ffffff; } 
.standardbtn.clicked  { background-color: #419a75; color: #ffffff;  transition:all 0.3s;}
.standardbtn.clicked:hover  { background-color: #61ba95; color: #ffffff; }
.showstd.hidden  { display: none; }
.showstd h5 {font-size:1.6em; line-height:1.8em; margin:15px 5px 0 5px; font-weight:400;}
.showstd h6 {font-size:1.3em; line-height:1.5em; margin:0 5px 5px 10px; font-weight:400;}
.showstd ul  {margin:5px 0px 5px 20px;}
.showstd ul li  {padding:1px 0px 1px 2px; margin-left:30px; }
.showstd p  {font-size:1.1rem; line-height:1.45em; padding-bottom:20px;}
.showstd ul.stdul {margin:-22px 0px 5px 20px;}
.showstd .statestandard  {margin:0 15px 5px 20px;}
.showstd .contentstandard  {margin:0 15px 5px 20px;}
.ccdesc {padding: 10px 0px 2px 0px; font-size:1.0rem;}
/*View more...button in lesson*/
#backgroundcrop  { width: 100%; overflow: hidden; height: 170px; position: relative; }
#showmorebackground  { width: 104%; height: 60px; position: absolute; bottom: 0px; left: -2%; background-image: url("/images/matrix/whiteblend.svg"); background-size: auto 100%; background-repeat: repeat-x; }
#seemore  { color: #ffffff; background-color: #03a049; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); cursor: pointer; padding: 5px 15px 7px 15px; border-radius: 6px; border: none; font-size: 16px; line-height: 16px;  transition:all 0.3s;}
#seemore:hover  { background-color: #00ce4e; }
#showmorebackground.hidden  { background-image: none; bottom: 0px; }
#backgroundcrop.show  { height: auto; overflow: visible; padding-bottom: 35px; }
.Lsection  { display: block; margin:0.5rem 0.1rem; clear: both; }
.Lsection > div {margin-left:1rem;}
.Lsection > div ul, .Lsection > div ol  {margin-left:30px; margin-bottom:10px;}
.Lsection ul ul, .Lsection ul ul ul, .Lsection ul ol ul, .Lsection ul ol ol  {margin-left:1.2rem; padding-left:0;}
.Lsection ol ol, .Lsection ol ol ol, .Lsection ol ul ol, .Lsection ol ul ul {margin-left:1.2rem; padding-left:0;}
.Lsection > div p  { margin:0; }
.Lsection IMG  { padding: 15px; }
/*.Lsection OL LI UL LI, .Lsection UL LI UL LI  { margin-left: 0px; padding-left:2px; }
.Lsection > div.leftmargin {margin-left:20px;}
.Lsection ul, .Lsection ol  {margin:0 0.2rem 0.2rem 3rem;}
.Lsection p {margin:0px 0.2rem 0 1rem;}*/


/* lesson/resource */
.additionalactions  { width: 102%; margin-left: -1%; }
.additionalactions a {color:#FFF;} /*to change button link color*/
.action  {display:inline-block; color:#FFF;}
.action:hover  {text-decoration:none;}
.action.disabled  {background-color:#999;}
.action.disabled:hover {color:#FFF;}
.action.inbinder {background-color:#b71d21; color:#DDD; transition:all 0.3s;}
.action.inbinder:hover  {background-color:#d73d41; color:#FFF;}

/* resource.tpl */
h5.resourcetitle {font-size:2.0rem; line-height:2.2rem; margin:0.2rem 0.2rem 0.5rem 0.1rem; font-weight:400;}
h6.Rcategory  {font-size:1.5rem; line-height:1.7rem; margin:0.5rem 0.2rem 0rem 0.2rem; font-weight:400;}
.leftmargin {margin-left:1.3rem;}
.lessons {margin:0 1rem 1rem 3rem;}
.lessons li {padding-top:2px; padding-left:5px;}
#thumbnail  { margin: 20px 0px 15px 50px; max-width: 100%; height:auto;}
.Rsection {display:block; margin:0.5rem 0.2rem 0.5rem 1rem; clear:both;}
.Rsection p {margin:0 !important;}
.Rsection ul, .Rsection ol {margin:0 0.2rem 0.2rem 2rem;}
.Rsection OL LI UL LI, .Rsection UL LI UL LI  {margin-left:0; padding-left:0;}
.Rsection IMG  {padding:15px;}

/*Phenomenon table*/
table.phenomenon {border-collapse: collapse; border:1px solid #b3cf8f; margin:1rem;}
table.phenomenon th {border:1px solid #b3cf8f; padding:5px; text-align:center; font-weight:600; font-size:0.9rem; line-height:1.0rem; color:#FFF;}
table.phenomenon td {border:1px solid #b3cf8f; padding:5px; vertical-align:top; font-size:0.9rem; line-height:1.15rem; color:#000;}
table.phenomenon td ul {margin-left:15px; margin-top: 0; margin-right: 0;}
table.phenomenon td ol {margin-left:15px; margin-top: 0; margin-right: 0;}
table.phenomenon td ul li {font-size:0.9rem; line-height:1.15rem; color:#000;}
table.phenomenon td ol li {font-size:0.9rem; line-height:1.15rem; color:#000;}

/*Callout*/
h5.naitcheader {font-size:1.8rem; font-weight:400; margin-top:1rem; margin-bottom:0.6rem; margin-left:0;}

/* button */
#createmybinder  {}
#createmybinder:hover  {}
#mybinder  {}
#mybinder:hover  {}



/*KIT
#kitcols {margin:0 auto; width:100%; padding:25px 0;}
#kitcols ul {list-style: none; margin:0 auto; text-align: center;}
#kitcols ul li {width:27.7%; height:auto; vertical-align: top; padding:22px 6px 0 6px; margin:0; margin-bottom: 10px;
	display: inline-block; background:none;}
#kitcols ul li.i-first {background:#FAFAFA url(../images/default/item1.png) no-repeat top center; margin-right:10px;}
#kitcols ul li.i-middle {background:#FAFAFA url(../images/default/item2.png) no-repeat top center; margin-right:10px;}
#kitcols ul li.i-last {background:#FAFAFA url(../images/default/item3.png) no-repeat top center;}
#kitcols p {font:0.85em/1.2 'Poppins', sans-serif; color:#3f3f3f; text-align:left;  margin:0 0 15px 0; height: 90px;}*
#kitcols p {height: auto; font:1.1em/1.1 'Poppins', sans-serif; color:#3f3f3f; text-align:left;  margin:15px 0 20px 0; text-align: center;}
*/


/***********************************************RESPONSIVE***********************************************************/
@media screen and (max-width: 1120px) {
/*#wrap {width:100%;}*/
.wrapper {max-width:98%; margin:0 auto;}

h1.logo {max-width:400px;}
h1.logo img {max-width:400px;}

/************Subpage************/
.title_wrap {max-width:100%; width:100%; background:url(../images/default/background_title2.png) no-repeat center center; background-size:1100px;}
.content_wrap {width:93%; padding:25px 20px;}

.staffgrid {grid-template-columns:repeat(2, minmax(1px, 100%));}
}

@media screen and (max-width: 900px) {
#scroll {bottom:0;}

h1.logo {max-width:68%;}
h1.logo img {max-width:68%;}
nav.bts ul {margin:0 !important;}
#mainnav ul li {width:19.85%;}
#mainnav ul li a {font-size:0.95rem;}

/************Homepage************/
#home-columns1.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#home-columns2.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#home-twocolumns.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#home-columns1 .homecol:nth-child(1),
#home-columns1 .homecol:nth-child(2) {margin: 0 0 30px 0;}
#home-columns2 .homecol:nth-child(1),
#home-columns2 .homecol:nth-child(2) {margin: 0 0 30px 0;}
#home-twocolumns .homecol:nth-child(1),
#home-twocolumns .homecol:nth-child(2) {margin: 0 0 30px 0;}

.homecol .featured-pic {height:350px;}

#home-onecolumn {width:auto; margin:0 auto; text-align:center;}
#home-onecolumn .homecol:nth-child(1) .featured-pic {height:350px;}

section#home-columns1 {padding-top:50px;}

section#home-columns1,
section#home-columns2,
section#home-onecolumn,
section#home-twocolumns {margin:0 0 30px 0;}

/*3 Columns*/
#sub-columns1.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns2.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns3.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns4.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns5.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns1.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns2.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns3.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns4.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns5.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns6.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-onecolumn.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns1 .subcol:nth-child(1),
#sub-columns1 .subcol:nth-child(2){margin: 0 0 20px 0;}
#sub-columns2 .subcol:nth-child(1),
#sub-columns2 .subcol:nth-child(2){margin: 0 0 20px 0;}
#sub-columns3 .subcol:nth-child(1),
#sub-columns3 .subcol:nth-child(2){margin: 0 0 20px 0;}
#sub-columns4 .subcol:nth-child(1),
#sub-columns4 .subcol:nth-child(2){margin: 0 0 20px 0;}
#sub-columns5 .subcol:nth-child(1),
#sub-columns5 .subcol:nth-child(2){margin: 0 0 20px 0;}

#sub-twocolumns1 .subcol:nth-child(1),
#sub-twocolumns1 .subcol:nth-child(2) {margin: 0 0 20px 0;}
#sub-twocolumns2 .subcol:nth-child(1),
#sub-twocolumns2 .subcol:nth-child(2) {margin: 0 0 20px 0;}
#sub-twocolumns3 .subcol:nth-child(1),
#sub-twocolumns3 .subcol:nth-child(2) {margin: 0 0 20px 0;}
#sub-twocolumns4 .subcol:nth-child(1),
#sub-twocolumns4 .subcol:nth-child(2) {margin: 0 0 20px 0;}
#sub-twocolumns5 .subcol:nth-child(1),
#sub-twocolumns5 .subcol:nth-child(2) {margin: 0 0 20px 0;}
#sub-twocolumns6 .subcol:nth-child(1),
#sub-twocolumns6 .subcol:nth-child(2) {margin: 0 0 20px 0;}

#sub-onecolumn .subcol:nth-child(1){margin: 0 0 20px 0;}
.subcol .edu-pic {height:300px;}
.subcol .fft-pic {height:380px;}
.subcol .hyper-pic {height:380px;}
.subcol .agmag-pic {height:300px;}
.subcol .video-pic {height:300px;}
.subcol .materials-pic {height:380px;}
.subcol .turkey-pic {height:380px;}
.subcol .grants-pic {height:300px;}
.subcol .programs-pic {height:380px;}
.subcol .about-pic {height:380px;}

section#sub-columns1,
section#sub-columns2,
section#sub-columns3,
section#sub-columns4,
section#sub-onecolumn,
section#sub-twocolumns1,
section#sub-twocolumns2,
section#sub-twocolumns3,
section#sub-twocolumns4,
section#sub-twocolumns5 {margin: 0;}

.newsgrid {grid-template-columns: repeat(3, minmax(1px, 100%));}
.edu3grid {grid-template-columns: repeat(2, minmax(1px, 100%));}

/*Image styles*/
.width400 {width:45%;}
.width300 {width:35%;}

/*Matrix*/
.standardbtn  { padding: 8px 10px; border-radius: 8px; height: 55px;}
.logingrid {grid-template-columns:repeat(1, minmax(1px, 100%)); grid-gap:0.1rem; margin:0 15px;}
.buttonwrap {display:block; grid:block;}
}

@media screen and (max-width: 768px) { /*iPad*/

nav.main {display:none;}
#mobilemenu {display:block; position: relative; z-index:9999; box-shadow: 0px 3px 4px #000;}

/************Subpage************/
.title_wrap h2 {font-size:2.9rem; line-height:2.9rem;}

/*FFT*/
.videoright {float:none; width:90%; margin:1rem auto; text-align:center;}
.lessontablegrid1 {grid-template-columns:115px auto;}
.lessontablegrid1 > div {padding:1px; font-size:0.9rem; line-height:1.1rem;}
.lessontablegrid1 > div.tblhead {padding:1px; font-size:0.9rem; line-height:1.1rem;}
.lessontablegrid2 > div {padding:1px; font-size:0.6rem; line-height:0.8rem;}
.lessontablegrid2 > div.tblhead {padding:1px; font-size:0.7rem; line-height:0.9rem;}
.lessontablegrid3 {grid-template-columns:60px 60px auto 80px; margin:0 2px 25px 0;}
.lessontablegrid3 > div {padding:1px; font-size:0.8rem; line-height:1.0rem;}
.lessontablegrid3 > div.tblhead {padding:1px; font-size:0.8rem; line-height:1.0rem;}

.lessontablegrid4 {display:grid; grid-template-columns:100px 20px 85px 20px 95px 20px; margin:0 2px 25px 0;}
.lessontablegrid4 > div {padding:2px; font-size:0.9rem; line-height:0.8rem}

.newsgrid {grid-template-columns: repeat(2, minmax(1px, 100%));}
.newsgrid > div ul li a {padding:0 5px 0 20px;}

.threelogos {grid-template-columns: repeat(2, 1fr); grid-gap:0.5rem;}
.fourlogos {grid-template-columns: repeat(3, 1fr); grid-gap:0.5rem;}
.fivelogos {grid-template-columns: repeat(4, 1fr); grid-gap:0.5rem;}
.sixlogos {grid-template-columns: repeat(5, 1fr); grid-gap:0.5rem;}

.edu2grid {grid-template-columns: repeat(1, minmax(1px, 100%));}

/*Kit*/
#kitcols ul li {width:90%;}

/*Matrix*/
.half  { width: 100%; padding-right: 0%; padding-top: 10px; }
.logingrid {grid-template-columns:repeat(1, minmax(1px, 100%)); grid-gap:0.1rem; margin:0 15px;}
.resetinputs {width:72%;}
.mxsearchw {width:93.5%; margin-top:2px !important; margin-left:0 !important;}
.mxcenterw {width:75%;}
#resetpassword, #resetemail {width:71%;}
.mxLRbutton {width:75%;}
.lessonanchor {display:block; margin-left:3.2rem;}
.mark2  {top:36px !important; left:10px !important;}
.purpose2 {margin:0 0.5rem 0rem 3.4rem !important;}
#standardbtns TR TD  {padding:0px 1px;}
.standardbtn {padding:6px 2px; border-radius:5px; height:75px;}

/*Callout*/
.naitccallout  {display:block; width:100%; margin-top:20px;}
.naitccallout TR  {display block; width:100%;}
.naitccallout TR TD  {display:block; width:100%;}
.naitccallout TR TD:first-child  {display:block; margin-left:auto; padding-left:15px; margin-right:auto;}
.naitccallout TR TD:last-child  {display:block; width:100%; }
.naitccallout TR TD:last-child h5.naitcheader  {margin-top:0; padding-top:0; text-align:center;}

}

@media screen and (max-width: 680px) {
#scroll {display: none !important;}

h1.logo {max-width:85%; position:static; text-align:center; margin:0 auto;}
h1.logo img {max-width:85%; margin:0 auto; text-align:center; padding-top:5px;}
/*#search {width:90%; float:none; margin:0 auto; text-align:center;}*/

nav.sign_log {float:none; margin-left:0.3rem;}

nav.bts {float:none; padding-bottom:10px; margin:0 auto; text-align:center;}
nav.bts ul {display:block; float:none;}
nav.bts ul li {float:none; width:96%; margin:0 auto; height:29px; text-align:center;}
nav.bts ul li.order {background-repeat: repeat-x; background-size:auto; margin:0 auto;}
nav.bts ul li.news {background-repeat: repeat-x; background-size:auto; margin:1px auto;}
nav.bts ul li.contact {background-repeat: repeat-x; background-size:auto;}


/************Subpage************/
.content_wrap {width:88%;}

.subcol .edu-pic {height:240px;}
.subcol .materials-pic {height:280px;}
.subcol .agmag-pic {height:240px;}
.subcol .fft-pic {height:280px;}
.subcol .hyper-pic {height:280px;}
.subcol .turkey-pic {height:240px;}
.subcol .grants-pic {height:240px;}
.subcol .programs-pic {height:240px;}

.staffgrid {grid-template-columns:repeat(1, minmax(1px, 100%));}

/*Button*/
.buttonwrap {display:block; grid-template-columns:90%; margin-left:0}
.button {width:90%;}
/*Image styles*/
.width400 {width:80%;}
.width300 {width:80%;}
.marginright {margin:15px auto; text-align:center;}
.floatright {float:none;}

}

@media screen and (max-width: 540px) { /*Surface Plus*/
nav.topnav {text-align:right; margin-right:8px; margin-bottom:9px;}
nav.topnav ul li {padding:0 0.4rem;}
nav.topnav a {font-size:1.6rem;}


.subpage h3 {font-size:3.0rem; line-height:3.0rem;}
.subpage h3.small {font-size:2.2rem; line-height:2.6rem;} /*mission, */
.subpage h4 {font-size:1.9rem; line-height:1.9rem; margin:0.2rem 0rem 1.3rem 0rem;}
.subpage h5 {font-size:1.5rem; line-height:1.5rem; margin:0.2rem 0.5rem 0.5rem 0.8rem;}
.subpage h6 {font-size:1.2rem; line-height:1.2rem; margin:0.2rem 0.5rem 0.5rem 1rem;}
.subpage p, .subpage li {font-size:0.95rem; line-height:1.65rem;}

.subcol h3 {font-size:1.5rem; line-height:1.6rem; margin:14px 5px 0 5px;}
.subcol h4, .subcol h5, .subcol h6 {font-size:1.7rem; line-height:2rem; margin:14px 8px 0 8px;}

.newsgrid {grid-template-columns: repeat(1, minmax(1px, 100%));}
.newsgrid > div ul {margin:15px 0 15px 10px;}
.edu3grid {grid-template-columns: repeat(1, minmax(1px, 100%));}

.threelogos {display:block; grid-template-columns: repeat(1, 1fr);}
.threelogos > div {margin:5px;}
.threelogos > div.svg img {top:0%; transform: translateY(0%);}
.fourlogos {display:block; grid-template-columns: repeat(1, 1fr);}
.fourlogos > div {margin:5px;}
.fivelogos {display:block; grid-template-columns: repeat(1, 1fr);}
.fivelogos > div {margin:5px;}
.sixlogos {display:block; grid-template-columns: repeat(1, 1fr);}
.sixlogos > div {margin:5px;}

}

@media screen and (max-width: 414px) { /*iPhone X*/
h1.logo {max-width:95%;}
h1.logo img {max-width:95%;}
#slide {display: none;}
footer img {width:90%; display:flex; justify-content:center;}

/************Subpage************/
.content_wrap {width:80%;}
.title_wrap h2 {font-size:2.5rem; line-height:2.5rem;}

/*Matrix*/
#thumbnail  {margin:1rem auto; max-width:70%;}
.standardbtn {font-size:0.8rem; line-height:0.9rem;}

}