/*
Theme Name: Turpentine Creek Education Resources
Author: Sharp Hue
Version: 2020
*/ 

/*Visual Composer Styles*/
#content .homepage-tagline { font-size: 22px; font-style: italic; }
#content .homepage-h1 { line-height: 1.2em; padding: 0 0 7px 0; font-size: 38px; font-weight: bold; }
#content .contact-heading {font-size: 28px;}
#content .social-media-heading {font-size: 32px;}
#content .contact-text p {font-size: 18px;}
#content .white-text { color:#fff !important; }

/* VC FAQ */
#content h4.vc_tta-panel-title { margin:0; padding:0; }
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading {background-color: #2b5e27 !important;}
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title>a {color: #fff !important;}
.vc_tta-controls-icon::before {border-color: #fff !important;}
.vc_tta-controls-icon::after {border-color: #fff !important;}


/* .barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-extrabold {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
} */


/*Fonts*/
h1, h2, h3, h4, h5, h6, ul, ol, li, p, div, span { font-family: 'Barlow', sans-serif; }
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
ul, ol, li, p, div, span {font-weight: 400;}

#content p a, #content li a {color:#ff8b00; font-weight: 600;}

a {color: #ff8b00;}

/*Header*/
body { position:relative; padding-top:120px; }
body.admin-bar #header.fixed  { top:32px !important; }
@media(max-width: 782px) {
	body.admin-bar #header.fixed  { top:46px !important; }
}
@media(max-width: 867px) {
  body.home { padding-top:60px; }
}
@media(max-width: 600px) {
  body { padding-top:50px; }
  body.admin-bar { position:inherit; }  
  body.admin-bar #header.fixed  { top:0 !important; }
  body.admin-bar #header.absolute  { top:46px !important; }  
  body.admin-bar #header.absolute.fixed  { top:0 !important; }
}
#header { min-height: 60px; background:#fff; border-bottom:1px solid #ccc; z-index: 99999; position:relative; }
body.home { padding-top:0; }
body.home #header { background:none; border:none; }
#header.transition,
#header.transition div { -webkit-transition: all 100ms; transition: all 100ms; }
#header.absolute { position: absolute; top: 0; width: 100%; }
body #header.fixed { position: fixed; top: 0; width: 100%; }
#header .container { max-width: 1230px; position: relative; padding: 0 15px; }
#header .logo { padding:10px 0; line-height: 100px; }
body.home #header .logo { padding:30px 0; line-height: 120px; }
#header.compact .logo { line-height: 80px; }
#header .logo img { max-width:120px; width: 100%; vertical-align:middle; }
body.home #header .logo img { max-width:120px; width: 100%; vertical-align:middle; }

#header.slide { animation-name: slide; animation-duration: 300ms; }
@-webkit-keyframes slide { from {top: -200px;} to {top: 0px;} }
@keyframes slide { from {top: -200px;} to {top: 0px;} }

#header.fade { animation-name: fade; animation-duration: 300ms; }
@-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} }
@keyframes fade { from {opacity: 0;} to {opacity: 1;} }

.sticky {position: fixed;
  top: 0;
  width: 100%;}

@media(max-width: 800px) {
	
}
@media(max-width: 600px) {
	body.home #header .logo,
  #header .logo { padding:10px 0; line-height: 50px; }
  body.home #header .logo img,
  #header .logo img { width:60px;}
}
body.home #header.compact,
#header.compact { background:#fff !important; min-height:50px !important; 
-webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
	 -moz-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
	      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
}
#header.compact .logo { padding:0 !important; line-height:50px !important; }
#header.compact .logo img { width:50px !important; }
#header.compact .menu { margin:0 !important; color:#333 !important; }
#header.compact .menu a {color: #000 !important;}
#header.compact .btn.orange { margin:10px !important; padding:0 10px !important; height:30px !important; border-radius:15px !important; line-height:30px !important; font-size:13px !important; }

/*Nav*/
#nav { position:absolute; top:0; right: 10px; }
body.home #nav { top:40px; }
#header.compact #nav { top:0px !important; }
#nav nav { position:fixed; right:-650px; top:0; bottom:0; width:80%; height:100%; max-width:400px; background:#fff; overflow:auto;
-webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
	 -moz-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
	      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1); 
-webkit-transition: left 200ms; 
        transition: left 200ms;
} 
.menu-on #nav nav { right:0; }
html.menu-on { overflow:hidden; } 
#nav nav > ul { list-style:none; padding:40px; }
#nav ul > li {  }
#nav ul li > a { display:block; padding:7px 20px; line-height:26px; font-size:18px; color:#222; font-weight:bold; text-decoration:none; }
#nav ul li:hover > a { color:#2b5e27; }
#nav ul li.current-menu-item > a,
#nav ul li.current-menu-parent > a,
#nav ul li.current_page_parent > a  {  }
#nav ul li.menu-item-has-children > a {  }
#nav .menu { display: inline-block; cursor:pointer; font-size:30px; margin:30px; width:50px; height:50px; line-height:50px; color:#000;text-align:center; vertical-align:top; }
#nav .menu a {color: #000;}
body.home #nav .menu a { color:#fff; }
#nav .close { position:absolute; right:20px; top:20px; width:50px; height:50px; line-height:50px; text-align:center; color:#555; font-size:30px; cursor:pointer; }
#nav .btn.orange { display:inline-block; margin:30px 0; padding:0 30px; background:#ff8b00; height:50px; border-radius:25px; line-height:50px; white-space:nowrap; color:#fff; font-size:16px; text-decoration:none; font-weight:bold; text-transform:uppercase; vertical-align:top; }
#nav .btn.orange i { margin-right:10px; }

/*Sub Nav*/
#nav ul li { position:relative; }
#nav ul ul { display:none; height:auto; list-style:none; margin:0 0 30px 20px; }
#nav ul li:last-child ul { left:auto; right:0; }
#nav ul li.on ul { display:block; }
#nav ul li ul li { float:none; margin:0; padding:0; }
#nav ul li ul li a { display:block; height:auto; padding:0 15px; line-height:35px; font-size:13px; color:#444; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
#nav ul li ul li:hover a { color:#2b5e27; }
#nav ul li ul li ul { display:none; }
@media(max-width: 600px) {
  body.home #nav { top:0; }
  #nav nav { width:100%; max-width:100%; }
  #nav nav > ul { padding:20px; }
  body.home #nav .menu,
  #nav .menu { margin:10px 10px 10px 0; }
  body.home #nav .btn.orange,
  #nav .btn.orange { margin:20px 0; padding:0 10px; height:30px; border-radius:15px; line-height:30px; font-size:13px; }
}

/*Nav Btns*/
#nav .btn { padding:0; margin:0; }
#nav .btn a { padding: 12px 18px; margin-left: 5px; line-height:16px; height:auto; color: #fff; text-decoration: none; text-transform: uppercase; white-space:nowrap; }
#nav .btn a i { margin-right: 5px; }
#nav .btn.primary a { margin-left:50px; }
#nav .btn.primary a { background-color: #a9a9a9; }
#nav .btn.primary a:hover { transition: : .8s; }
#nav .btn.secondary a { background-color: #c0c0c0; }
#nav .btn.secondary a:hover { transition: .8s; }

/*Promo*/
#promo { position:relative; }
#promo .prev { z-index:2; position: absolute; top:50%; left: 25px; margin-top: -13px; font-size: 26px; color: #fff; cursor:pointer; }
#promo .next { z-index:2; position: absolute; top:50%; right: 25px; margin-top: -13px; font-size: 26px; color: #fff; cursor:pointer; }
#promo .wrapper { position:relative; width:100%; }
#promo .container { padding:400px 5px; max-width:1200px; }
#promo .video { position: relative; display: block; width: 100%; max-width: 100%; margin: 0 auto;overflow: hidden; padding-top: 56.25%; }
#promo .video iframe,
#promo .video video { background: #f1f1f1; width: 100%; max-width: 100%; height: auto !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#promo .video iframe { border:none; height:100% !important; }
#promo .message.has-video { position:absolute; left:0; top:0; height:100%; width:100%; }
#promo h1 { margin:0 0 20px 0; padding:0; font-size:40px; line-height:42px; font-weight:bold; color:#fff; text-align:center; }
#promo h1:before { display:none; }
#promo p { margin:0; padding:0; font-size:18px; line-height:24px; color:#fff; text-align:center; margin-bottom:33px; }

#promo .slider-btn {font-size: 16px; padding: 15px 25px; border-radius: 3px; background: #555; color: #fff; text-decoration:none;}
#promo .slider-btn:hover {background: #666; }
#promo .slider-btn-holder {text-align: center;}

@media(max-width:600px){
  #promo .container { padding: 30vh 30px; }
  #promo h1 { font-size:24px; line-height:32px; }
}

/*Footer*/
#footer .wrapper { background-color: #2b5e27; }
#footer .wrapper.copyright { background-color: #2b5e27; }
#footer .container { max-width: 1230px; padding: 90px 30px 80px 30px; }
#footer nav { background-color: #2b5e27; }
#footer nav:after { position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: #2b5e27; content: ''; }
#footer nav ul { list-style-type: none; margin:none; }
#footer nav ul li a { margin-bottom: 5px; display:inline-block; text-decoration: none; color: #fff; font-size: 15px; line-height: 13px; }
#footer nav > ul { display:table; width:100%; }
#footer nav > ul > li { float:left; width:31.333333%; padding-right:2%; margin-bottom:25px; }
#footer nav > ul > li > a,
#footer nav ul li.large > a { margin: 20px 0 5px 0; font-size: 18px; font-weight: bold; text-transform: uppercase; line-height: 22px; }
#footer nav ul li.large.no-sub-menu > a { margin-top:5px; }
#footer .sub-menu { margin-bottom:20px; }
#footer .copyright p { padding: 20px; margin:0; color: #fff; font-size: 12px; text-align:center; }
#footer .copyright p br { display:none; }
#footer .copyright a { color: #fff; text-decoration: underline; }
#footer .contact-info { background-color: #2b5e27;  }
#footer .contact-info .contact { position: relative; padding-left: 39px; margin-bottom: 30px; color: #fff; }
#footer .contact-info .contact .contact-body { font-size: 15px; }
#footer .contact-info .contact .contact-icon { position: absolute; top: -5px; left: 0; font-size: 21px; color: #fff; }
#footer .contact-info .footer-img {display: block; margin: 0px auto 20px;}
#footer .contact-info .footer-img2 {display: block; padding-top: 20px;max-width:180px;margin:0 auto;}
#footer .contact-info .footer-btn { background:none; margin: 0px auto 10px; text-align:center; }
#footer .contact-info .footer-btn a { text-decoration: none; color: #fff; min-width:100px; padding: 15px 50px; text-transform: uppercase; color:#ffffff; background-color: #ff8b00; font-size: 15px; font-weight: bold; display: inline-block; text-decoration: none; border:none; cursor:pointer; border-radius: 90px; margin-bottom: 10px; }
#footer .contact-info .footer-btn span {padding-right: 10px;}
/* #footer .contact-info .footer-btn:hover { color: #fff; transition: .4s;} */
#footer .contact-info .footer-btn-holder {text-align: center;}
#footer .contact-info .footer-contact-btn { min-width:100px; padding: 15px 50px; text-transform: uppercase; color:#2b5e27; font-size: 15px; font-weight: bold; background-color: #fff; display: inline-block; text-decoration: none; border-radius: 90px;}
/* #footer .contact-info .footer-contact-btn:hover { color: #fff; transition: .4s; } */
#footer .social { display:flex; width:100%; max-width: 350px; margin-top: 25px; justify-content: center; gap: 10px; }
#footer .social a { line-height:30px; width:30px; height:30px; background:#ff8b00; border-radius:50%; text-aligncenter; }
#footer .social a i { width:30px; height:30px; line-height:30px; text-align:center; color:#fff; }

@media( max-width: 1000px ) {
	#footer .container { padding: 60px 30px;}
	#footer .contact-info .footer-btn { margin-bottom: 10px;}
  #footer nav > ul > li { 
		width: 40%;
	}
  #footer .col-70 { width:60%; }
  #footer .col-30 { width: 40%; }
}

@media( max-width: 800px ) {
	#footer nav > ul > li { 
		width: 50%;
	}
}

@media (max-width: 700px) {
	#footer .col-70,
  #footer .col-30 { width: 100%; }
  #footer nav > ul > li { 
		width: 100%;
	}
	#footer nav {
		margin-bottom: 30px; 
	}
}

@media( max-width: 600px ) {
	#footer .col-333 { width: 50%;}
	#footer .contact-info { padding: 0;}
  #footer .copyright p br { display:block; }
}

/*404*/
.error-404 { text-align:center; }
.error-404 h1 { text-align:center; font-size:40px; }
.error-404 i { font-size:100px; }
.error-404 .screen-reader-text { display:none; }

/* homepage */
/*#content #popular-species-section {padding-top: 10%;}*/
#content #popular-species-section h2 {font-size: 32px; line-height: 42px; color: #2b5e27;}
#content #popular-species-section h3 {font-size: 25px; line-height: 36px; color: #000;}
#content #popular-species-section .main-photo .vc_column-inner {padding: 50% 0px; border-radius: 0px 10px 10px 0;}
#content #popular-species-section .popular-species-column .vc_column-inner {padding-right: 5%;}
#content #popular-species-section .popular-species-column .inner-species-row {padding-bottom: 10%;}
#content #home-teacher-resources {padding: 16% 0;}
#content #home-teacher-resources .vc_icon_element-color-custom {background: #fff1c7; padding: 50px;}
#content #home-teacher-resources .vc_icon_element-icon {color: #2b5e27; font-size: 60px !important;}
#content #home-teacher-resources h2 {font-size: 40px; line-height: 55px; color: #fff; margin-bottom: 40px;}
#content #home-teacher-resources h3 {color: #fff; font-size: 27px; line-height: 40px;}
#content #our-mission-section {padding: 15% 0;}
#content #our-mission-section h2 {font-size: 37px; line-height: 49px; color: #fff;}
#content #our-mission-section p {color: #fff;}
#content #blogs-articles {padding: 5% 0;}
#content #blogs-articles h2 {font-size: 28px; line-height: 40px;}
#content #blogs-articles .blogs {color: #2b5e27;}
#content #blogs-articles .articles {color: #2b5e27;}

#unsponsored-heading { padding-top:10%; }

#unsponsored-heading h2 { font-size: 32px; line-height: 42px; }

@media (max-width:767px) {
    .popular-heading-desktop { display:none!important; }
    .unsponsored-heading-text { margin-bottom: 30px; }
    .main-photo { margin-bottom:60px; }
}

@media (min-width:768px) {
    .popular-heading-mobile { display:none!important; }
}


#fun-fact-section {padding-bottom: 90px}
#fun-fact-slider {position: relative; text-align: center;}
#fun-fact-slider img {border-radius: 100%; max-width: 180px; height: auto !important; position: relative; left: 0; right: 0; margin: auto; top: 90px;}
#fun-fact-slider .content-box {border-radius: 5px; margin: 0px auto; padding: 130px 10px 50px; background: url('https://tcwreducation.omnihue.com/wp-content/uploads/2020/04/events-pattern.png') repeat #ff8b00;}
#fun-fact-slider .content-box h4 {font-size: 25px; line-height: 37px; color: #fff;}
#fun-fact-slider .content-box p {color: #fff; font-size: 18px; line-height: 30px; max-width: 1000px; margin: 0px auto;}
#fun-fact-slider .prev { z-index:2; position: absolute; top:79%; left: 25px; margin-top: -13px; font-size: 26px; color: #fff; cursor:pointer; }
#fun-fact-slider .next { z-index:2; position: absolute; top:79%; right: 25px; margin-top: -13px; font-size: 26px; color: #fff; cursor:pointer; }

@media(max-width: 1230px){
  #fun-fact-slider .prev {display: none;}
  #fun-fact-slider .next {display: none;}
}

/*programs-and-activites*/
#programs-and-activites .container { max-width: 1400px; margin:0 auto; padding: 0 20px; }
#programs-and-activites .events h2 { margin-bottom:25px;  }
#programs-and-activites .events h2 a { text-decoration:none; color:#2b5e27; }
#programs-and-activites .events h2 i { font-size: 19px; padding-left: 10px;}
#programs-and-activites .events .flow { overflow:auto; height:480px; direction:rtl; }
#programs-and-activites .events .eve { padding-left:170px; min-height:140px; margin-bottom:50px; display:block; position:relative; text-decoration:none; }
#programs-and-activites .events .eve img { width:130px; height:130px !important; border-radius:65px; position:absolute; left:20px; top:0; }
#programs-and-activites .events .eve h3 { color:#000; font-size:24px; padding:0; margin-bottom:15px; text-align:left; }
#programs-and-activites .events .eve b { color:#000; display:block; font-size:18px; margin-bottom:15px; text-align:left; font-weight: 400;}
#programs-and-activites .events .eve b i { float:left; margin:3px 5px 0 0; color: #2b5e27;}
#programs-and-activites .events .eve p { color:#000; font-size:18px; padding:0; font-weight:300; margin-bottom:20px; text-align:left; line-height: 30px; direction: ltr;}
#programs-and-activites .featured { overflow:hidden; border-radius:10px 0 0 10px; }
#programs-and-activites .featured .img { height:350px; background-position:center center; background-size:cover; background-repeat:no-repeat; }
#programs-and-activites .featured .eve { background:#396882; padding:20px; }
#programs-and-activites .featured .eve h3 { color:#fff; font-size:24px; padding:0; margin-bottom:15px; }
#programs-and-activites .featured .eve b { color:#fff; display:block; font-weight:700; font-size:18px; margin-bottom:10px; }
#programs-and-activites .featured .eve p { color:#fff; font-size:18px; font-weight:300; padding:0; margin-bottom:20px; }
#programs-and-activites .featured .eve a { color:#fff; padding:10px 30px; height:20px; font-size:15px; font-weight:700; line-height:20px; border-radius:20px; text-decoration:none; background:#ff8b00; text-transform:uppercase; display:inline-block; }
#programs-and-activites ::-webkit-scrollbar { width: 8px; }
#programs-and-activites ::-webkit-scrollbar-track { background:#ccc; border-radius: 10px; } 
#programs-and-activites ::-webkit-scrollbar-thumb { border-radius: 4px; width:8px; background:#111; }

/*latest-articles*/
#latest-articles { padding-top:20px; }
#latest-articles .eve { position:relative; }
#latest-articles .eve img { width:100%; border-radius:10px; }
#latest-articles .eve h3 { color:#000; font-size:24px; margin:30px 0 25px 0; }
#latest-articles .eve h3 a { text-decoration:none; color:#000; }
#latest-articles .eve b { position:absolute; left:-5px; top:20px; padding:5px 10px; color:#2b5e27; display:inline-block; font-weight:700; font-size:18px; margin-bottom:10px; background:#fff1c7; border-radius:3px; }
#latest-articles .eve b i { margin-right:5px; }
#latest-articles .eve > a { color:#fff; padding:10px 30px; height:20px; font-size:15px; font-weight:700; line-height:20px; border-radius:20px; text-decoration:none; background:#2b5e27; text-transform:uppercase; display:inline-block; }

/*educational-blogs*/
#educational-blogs { padding-top:20px; }
#educational-blogs .events .eve { padding-left:150px; min-height:140px; margin-bottom:55px; display:block; position:relative; text-decoration:none; }
#educational-blogs .events .eve img { width:130px; height:130px !important; border-radius:65px; position:absolute; left:0; top:0; }
#educational-blogs .events .eve h3 { color:#000; font-size:24px; padding:0; margin-bottom:15px; text-align:left; }
#educational-blogs .events .eve b { color:#2b5e27; display:block; font-weight:700; font-size:18px; margin-bottom:10px; text-align:left; }
#educational-blogs .events .eve p { color:#000; font-size:18px; font-weight:400; padding:0; margin-bottom:15px; text-align:left; }

/* generic inner page */
.entry-header.has-featured-image .fun-fact {color: #fff; padding: 0px 15px 10px 0px !important; text-align: right;}
#content .inner-heading h2 {color: #2b5e27;}
#content .inner-content h3 {color: #2b5e27;}
#content ul li {font-size: 18px; line-height: 30px;}
#content .content-btn a {  font-weight: bold; text-decoration: none; font-size: 18px; white-space: nowrap; background: #ff8b00; color: #fff; padding: 15px 50px; border-radius: 90px; text-transform: uppercase;}
#content .content-btn2 a {  font-weight: bold; text-decoration: none; font-size: 18px; white-space: nowrap; background: #2b5e27; color: #fff; padding: 15px 50px; border-radius: 90px; text-transform: uppercase;}
#content .lesson-plan-grade {text-align: center; margin-bottom: 10px;}
#content .lesson-plan-grade p {font-size: 20px; color: #2b5e27;}
#content .lesson-heading {margin-bottom: 5px;}
#content .lesson-heading h2 {color: #2b5e27; font-size: 20px; line-height: 30px; }

/* species info */
#content .species-info-heading {text-align: center; margin-bottom: 5px;}
#content .species-info-heading span {padding-left: 10px;}
#content .species-info-heading a {text-decoration: none;}
#content .species-info-heading h3 {color: #2b5e27; font-size: 24px;}
#content .species-info-text p {padding: 0 0 5px 0;}
#content .species-info-text p .vulnerable {color: #ff8b00;}
#content .species-info-text p .endangered {color: #ff0000;}
#content .species-row {border-bottom: 1px solid #f1f1f1; margin-bottom: 70px;}

/* Meet the team */
#content .meet-team-row {padding: 60px 0 40px;}

/*Events*/
#events {padding: 60px 30px 30px;}
#events .container {max-width: 1400px; margin: 0 auto; padding: 0 20px;}
#events .grid {display: flex; flex-wrap: wrap; justify-content: space-between;}
#events .col-333 {width: calc(33.333% - 14px);}
#events .event { position:relative; padding:15px 20px 5px 20px; margin:0 0 30px 0; background:#fbfbfb; border-bottom:2px solid #eee; }
#events .date { position:absolute; left:0; top:0; width:70px; height:70px; text-align:center; color:#f1f1f1; font-size:30px; line-height:30px; text-transform:uppercase; font-weight:300; background:#999; }
#events .date span { display:block; padding:15px 0 0 0; line-height:15px; font-size:14px; font-weight:700; }
#events h2 { padding:0 0 0 70px; color:#2b5e27; font-size:24px; line-height:30px; font-weight:400; background:transparent; border:none; }
#events .location { padding:0 0 0 70px; }
#events .text { padding:10px 0 0 0; }

/* Calendar of Event */
#events .event-card { border: 1px solid #eee; border-radius: 10px; overflow: hidden; position: relative; min-height: 400px; margin-bottom: 30px;}
#events .event-card .event-date {position: absolute; font-size: 27px; font-weight: bold; padding: 10px; color: #2b5e27; background-color: #fff1c7; border-top-left-radius: 10px; text-transform: uppercase;}
#events .event-card .event-text-content {padding: 15px;}
#events .event-card .event-text-content h2 {padding: 0; font-size:22px; line-height: 22px; text-align: center; font-weight: bold; margin: 0 0 18px 0; border:none;}
#events .event-card .event-text-content p {text-align: center; font-size: 17px; }
@media(max-width: 950px) {
  #events .col-333 {width: 50%;}
}
@media(max-width: 600px) {
  #events .event-card { min-height: 0; }
  #events .event-card .event-text-content h2 {background: none;}
  #events .col-333 {width: 100%; padding:0 8%; }
}

/*archive-search-form*/
#archive-search-form form { padding:30px; text-align:center; background:#f9f9f9; }
#archive-search-form form input[type="search"] { width:500px; }
@media(max-width: 800px) {
  #archive-search-form form input[type="search"] { width:60%; }
}