/* Theme Name: Greensboro Science Center Author: Sandlapper Creative Author URI: http://www.sandlappercreative.com Version: 1.0 */ /*Reset*/ a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom} /*Styles*/ body{} body, select, input, textarea{ font-family: "Montserrat", Helvetica, Arial, sans-serif;} a{ color: #2888c9;} a:hover, a:focus{ color: #20409a;} .button, button{ -webkit-appearance: none; display: inline-block; border: none; font-size: 16px; line-height: 16px; letter-spacing: .025em; border-radius: 1000px; padding: 20px 50px; color: #fff; text-decoration: none; font-weight: 600; background-color: #88bf40;} .button:hover, button:hover, .button:focus, button:focus{ background-color: #608b3d; color: #fff;} .screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;} a, img, .button, button{ transition: all .1s ease 0s;} h1, h2, h3, h4, h5, h6{ line-height: normal;} h1{} h2{} h3{} h4{} h5{} h6{} .eyebrow, .more{ font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing: .2em; font-weight: 700;} .more{ text-decoration: none; letter-spacing: .15em;} .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{ margin-top: 35px;} .page-wrap{} .wrapper, .container{ width: 95%; max-width: 1400px; margin: 0 auto;} .container{ display: flex;} .wrapper:after{ content: ""; display: table; clear: both;} nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;} nav ul a{ display: block; line-height: 32px; text-decoration: none;} nav ul li{ position: relative; float: left; margin: 0; padding: 0;} nav ul li.current-menu-item a, .nav ul li:hover > a{} nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left;} nav ul ul li{ float: none; width: 200px;} nav ul ul a{ line-height: 120%;} nav ul ul ul{ top: 0; left: 100%;} nav ul li:hover > ul{ display: block;} .fixed-header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999;} .subheader{ background-color: #111; color: #fff; font-size: 10px; line-height: 10px; text-transform: uppercase; padding: 15px 0; letter-spacing: .1em; font-weight: 500;} .subheader .container{ justify-content: space-between;} .subheader .subheader-left{ display: flex;} .subheader .subheader-left a{ color: #fff; text-decoration: none; margin-left: 30px;} .subheader .subheader-left .directions{ display: flex; align-items: center;} .subheader .subheader-left .directions:before{ content: ""; width: 9px; height: 11px; background-image: url(images/directions.png); background-size: cover; display: block; margin-right: 8px;} .subheader nav ul li{ margin: 0 15px 0 0; display: flex;} .subheader nav ul li:after{ content: "|"; margin-left: 15px;} .subheader nav ul li a{ line-height: 10px; color: #fff;} .subheader a:hover{ color: #2888c9;} .header{ padding: 30px 0 30px; background-color: #fff;} .header .container{ justify-content: space-between; align-items: center;} .header .logo{ max-width: 270px;} .header .nav #menu-primary{ display: flex; align-items: center;} .header .nav li{ margin-left: 30px;} .header .nav a{ font-size: 15px; line-height: 15px; font-weight: 700; color: #111; letter-spacing: .025em;} .header .nav li:hover > a{ color: #2888c9;} .header .nav li.button{ padding: 0;} .header .nav li.button a{ color: #fff; padding: 20px 50px; display: inline-block;} .header .nav li.button-orange{ background-color: #f8a131;} .header .nav li.button-orange:hover{ background-color: #d46527;} .header .nav .sub-menu{ background-color: #fff; left: -10px; padding: 14px 0 5px; z-index: 9;} .header .nav .sub-menu li{ margin: 0;} .header .nav .sub-menu li a{ font-size: 13px; padding: 7px 10px; font-weight: 600;} .rmp-menu-subarrow{ font-family: "Font Awesome", FontAwesome, "Font Awesome 6 Free";} .rmp-menu .button{ background: none; padding: 0;} .content{ margin-top: 150px;} .content p{ margin-top: 25px;} .content ul{ list-style: disc; margin: 15px 0 0 30px;} .content ol{ margin: 15px 0 0 30px;} .meta{} .search-form{} .search-input{} .search-submit{} .footer{ background-color: #111; color: #fff; padding: 60px 0; font-size: 14px; margin-top: 10px;} .footer .container{ justify-content: space-between;} .footer .logo{ width: 270px; margin-bottom: 20px;} .footer .navigation{ display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; font-weight: 300;} .footer .navigation li{ padding: 6px 0; border-bottom: 1px solid #333;} .footer .navigation li:nth-last-of-type(1){ border-bottom: 0;} .footer a{ color: #fff; text-decoration: none;} .footer a:hover{ color: #ccc;} .footer .phone{ margin: 10px 0;} .footer .phone, .footer .address, .footer .contact{ display: flex;} .footer .phone:before{ content: ""; width: 16px; height: 16px; background-size: cover; background-position: center center; background-image: url(images/phone.png); margin-right: 8px;} .footer .address:before{ content: ""; width: 16px; height: 16px; display: block; background-size: contain; background-position: top center; background-repeat: no-repeat; background-image: url(images/directions.png); margin-right: 8px;} .footer .contact:before{ content: ""; width: 16px; height: 16px; background-size: cover; background-position: center center; background-image: url(images/email.png); margin-right: 8px;} .footer .social{ display: flex; font-size: 24px;} .footer .social li{ margin-left: 15px;} .sub-footer{ text-align: center; margin: 30px 0 100px; font-size: 14px;} .sub-footer .credit a{ font-size: 11px; text-decoration: none; color: #999;} .sub-footer .credit a:hover{ color: #111;} .video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0;} .video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .satisfi_chat-button{ bottom: 45px !important; right: 45px !important;} .xola-checkout{ margin-top: 30px;} .basic-container.pw-form{ margin-top: 220px;} /* Common Sections */ .callouts-container .container{ justify-content: space-between; align-items: center; flex-direction: row-reverse;} .callouts-container .callout-visual{ width: 50%; background-size: cover; background-position: center center; background-color: #eee; border-radius: 10px;} .callouts-container .callout-visual:after{ content: ""; padding-bottom: 56.25%; display: block;} .callouts-container .callout-content{ width: 45%; font-size: 16px; line-height: 28px;} .callouts-container .callout-content .eyebrow{ color: #23c2ed;} .callouts-container .callout-content h2{ font-size: 30px; line-height: 36px; margin: 20px 0 0; color: #204099;} .callouts-container .callout-content .button{ margin-top: 30px; background-color: #f8a131;} .callouts-container .callout-content .button:hover{ background-color: #d46528;} .cta-container{ text-align: center; padding: 80px 0 100px; background-image: url(images/cta-green.jpg); background-size: cover; background-position: center center; color: #fff; font-size: 16px; line-height: 28px; font-weight: 500;} .cta-container .wrapper{ max-width: 700px;} .cta-container h2{ font-size: 36px; line-height: 36px; margin: 20px 0 10px; color: #385b1c;} .cta-container ul{ margin: 30px 0 0; list-style: none;} .cta-container ul li{ display: inline-block; margin: 0 10px;} .cta-container .button{ background-color: #5f8b3d;} .cta-container .button:hover{ background-color: #385b1c;} .features-container{ display: flex; justify-content: flex-end; overflow: hidden;} .features-container .features-content{ width: 97.5%; box-sizing: border-box; padding: 55px 0 55px 40px; background-color: #009a9d; color: #fff; font-size: 16px; line-height: 28px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 10px; border-bottom-left-radius: 10px;} .features-container .features-content .eyebrow{ color: #a7dbd7;} .features-container .features-content h2{ font-size: 30px; line-height: 36px; margin: 20px 0 10px;} .features-container .features-content .button{ margin-top: 30px; background-color: #f8a131;} .features-container .features-content .button:hover{ background-color: #d46527;} .features-container .features-intro{ width: 33.33%;} .features-container .features-carousel{ width: 60%; display: flex; position: relative;} .features-container .features-carousel:before{ content: ""; width: 2px; height: calc(100% - 82px); background-color: #f8a131; display: block; left: -36px; top: 42px; position: absolute;} .features-container .single-slide{ background-color: #fff; border-radius: 10px;} .features-container .single-slide .slide-visual{ background-color: #eee; background-size: cover; background-position: center center; border-top-left-radius: 10px; border-top-right-radius: 10px;} .features-container .single-slide .slide-visual:after{ content: ""; padding-bottom: 75%; display: block;} .features-container .single-slide .slide-content{ color: #444; font-size: 14px; line-height: 24px; padding: 30px 20px 75px; position: relative;} .features-container .single-slide .slide-content h3{ font-size: 18px; font-weight: 700; color: #009a9d;} .features-container .single-slide .slide-content .more{ position: absolute; bottom: 25px; left: 20px; color: #f07d3e;} .features-container .single-slide .slide-content .more:hover{ color: #f8a131;} .features-container .slick-list{ overflow: hidden; padding-right: 25%; padding-left: 0;} .features-container .slick-slide{ margin: 0 10px;} .features-container .slick-list{ margin: 0 -10px;} .features-container .slick-arrow{ left: -50px; opacity: 1 !important; z-index: 10; pointer-events: auto;} .features-container .slick-arrow::before{ width: 30px; height: 30px; display: block; background-size: cover !important; background-position: center center !important; opacity: 1 !important;} .features-container .slick-prev{ top: auto; bottom: 0;} .features-container .slick-prev::before{ background-image: url(images/slick-prev.png);} .features-container .slick-next{ top: 10px; right: auto;} .features-container .slick-next::before{ background-image: url(images/slick-next.png);} .features-container .slick-prev:before, .features-container .slick-next:before{ content: "";} /* Homepage */ .home .slider .single-slide{ background-size: cover; background-position: center center; position: relative;} .home .slider .single-slide:after{ content: ""; padding-bottom: 45%; display: block;} .home .slider .slide-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);} .home .slider .slide-content{ width: 55%; font-size: 21px; line-height: 29px; font-weight: 500; color: #fff;} .home .slider .slide-content .eyebrow{ color: #f8a131;} .home .slider .slide-content h1{ margin: 30px 0 10px; font-size: 48px; line-height: 48px; font-weight: 700;} .home .slider .slide-content p{ width: 80%; min-width: 575px;} .home .slider .slide-content .button{ margin-top: 40px;} .home .intro{ padding: 80px 0;} .home .intro .container{ justify-content: space-between; align-items: center;} .home .intro .intro-visual{ width: 66.667%; background-size: cover; background-position: center center; background-color: #eee; border-radius: 10px;} .home .intro .intro-visual:after{ content: ""; padding-bottom: 56.25%; display: block;} .home .intro .intro-content{ width: 28%; font-size: 18px; line-height: 22px;} .home .intro .intro-content .eyebrow, .home .intro .intro-content a:hover{ color: #f07d3e;} .home .intro .more{ color: #111; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-top: 10px; display: inline-block;} .home .intro .address{ margin: 20px 0;} .home .intro .details{ display: flex; align-items: flex-start; justify-content: flex-start;} .home .intro .details:before{ content: ""; height: 35px; width: 35px; display: block; background-size: cover; background-position: center center; margin: 15px 15px 0 0;} .home .intro .hours:before{ background-image: url(images/hours.png);} .home .intro .address:before{ background-image: url(images/address.png);} .home .intro .contact:before{ background-image: url(images/contact.png);} .home .callouts-container{ margin: 80px 0;} /* Single Experience*/ .single-experience .hero{ display: flex; justify-content: space-between; flex-direction: row-reverse;} .single-experience .hero .hero-content, .single-experience .hero .hero-visual{ width: 50%; box-sizing: border-box;} .single-experience .hero .hero-visual{ background-color: #eee; background-size: cover; background-position: center center;} .single-experience .hero .hero-visual:after{ content: ""; padding-bottom: 100%; display: block;} .single-experience .hero .hero-content{ display: flex; flex-direction: column; justify-content: center; padding: 0 2.5%; background-color: #20409a; color: #fff; font-size: 18px; line-height: 28px;} .single-experience .hero .hero-content .eyebrow{ color: #23c2ed;} .single-experience .hero .hero-content h1{ font-size: 48px; line-height: 48px; margin: 20px 0 10px;} .single-experience .hero .hero-content p{ margin-top: 0;} .single-experience .about{ background-color: #f4f4f4; padding: 100px 0 110px; font-size: 21px; line-height: 34px;} .single-experience .about .container{ justify-content: space-between;} .single-experience .about-content{ width: 65%;} .single-experience .about-details{ width: 30%; font-size: 18px; line-height: 22px; margin-top: 45px;} .single-experience .about-details .eyebrow{ color: #20409a; margin-bottom: 10px;} .single-experience .about-details .more a{ color: #444; text-decoration: none;} .single-experience .about-details .more a:hover{ color: #23c2ed;} .single-experience .about h2.entry-title{ font-size: 36px; line-height: 40px; color: #20409a; margin: 0;} .single-experience .about ul li::marker{ color: #23c2ed;} .single-experience .video{ margin: 60px 0 70px;} .single-experience iframe{ border-radius: 10px;} .gallery-container{ display: grid; grid-template-columns: repeat(3,1fr);} .gallery-container .single-image{ background-size: cover; background-position: center center; transition: all .2s ease 0s; position: relative;} .gallery-container .single-image:hover{ opacity: .85; transition: all .2s ease 0s;} .gallery-container .single-image:after{ content: ""; display: block; padding-bottom: 100%;} .gallery-container .single-image a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .single-experience .cta-container{ background-image: url(images/cta-blue.jpg);} .single-experience .cta-container h2{ color: #20409a;} .single-experience .cta-container .button{ background-color: #20409a;} .single-experience .cta-container .button:hover{ background-color: #2287c9;} /* Flexible Content */ .hero{ background-size: cover; background-position: center center; position: relative;} .hero:after{ content: ""; padding-bottom: 45%; display: block;} .hero .hero-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);} .hero .hero-content{ width: 55%; font-size: 21px; line-height: 25px; font-weight: 500; color: #fff;} .hero .hero-content .eyebrow{ color: #f8a131;} .hero .hero-content h1{ margin: 30px 0 10px; font-size: 48px; line-height: 48px; font-weight: 700;} .hero .hero-content ul{ margin: 40px 0 0; list-style: none;} .hero .hero-content ul li{ display: inline-block; margin-right: 20px;} .hero .hero-content p{ width: 80%; min-width: 575px;} .hero .hero-logo{ position: absolute; right: 60px; bottom: 60px; max-width: 300px;} .page-section{ margin-top: 80px;} .basic-container{ margin: 90px 0 110px;} .basic-container .wrapper{ max-width: 860px; font-size: 18px; line-height: 28px;} .basic-container h2.entry-title{ font-size: 36px; line-height: 40px; color: #01647c;} .flex .callouts-container .single-callout{ margin-bottom: 60px;} .flex .callouts-container .single-callout:nth-last-of-type(1){ margin-bottom: 0;} .flex .callouts-container .single-callout:nth-of-type(even) .container{ flex-direction: row;} .flex .callouts-container .single-callout .callout-content{ padding: 60px 0;} .faq-container .wrapper{ max-width: 850px;} .faq-container .faq-intro{ text-align: center; margin-bottom: 40px;} .faq-container .faq-intro h2{ font-size: 36px; color: #01647c;} .faq-container .faq-intro p{ font-size: 21px; line-height: 34px; margin-top: 10px;} .faq-container .tabs input{ position: absolute; opacity: 0; z-index: -1;} .faq-container .tabs .row{ display: flex;} .faq-container .tabs .row .col{ flex: 1;} .faq-container .tabs .row .col:last-child{ margin-left: 1em;} .faq-container .tabs{ overflow: hidden;} .faq-container .tabs .tab{ width: 100%; overflow: hidden; border-top: 2px solid #dddddd;} .faq-container .tabs .tab-label{ display: flex; justify-content: space-between; align-items: center; padding: 1.25em 0.5em; cursor: pointer; color: #01647c; font-size: 21px; font-weight: 700;} .faq-container .tabs .tab-label:hover{} .faq-container .tabs .tab-label::after{ content: "+"; width: 1em; height: 1em; text-align: center; transition: all 0.35s; color: #009b9f; font-size: 36px; line-height: 36px; font-weight: 400;} .faq-container .tabs .tab-content{ max-height: 0; padding: 0 1em; transition: all 0.35s; visibility: hidden; opacity: 0; display: none; font-size: 16px; line-height: 28px;} .faq-container .tabs .tab-close{ display: flex; justify-content: flex-end; padding: 1em; cursor: pointer;} .faq-container .tabs .tab-close:hover{} .faq-container .tabs input:checked + .tab-label{ padding-bottom: 0;} .faq-container .tabs input:checked + .tab-label::after{ content: "-";} .faq-container .tabs input:checked ~ .tab-content{ max-height: 100vh; padding: 0 10em 2.5em 1em; visibility: visible; opacity: 1; display: block;} .faq-container .tabs .tab-content p:nth-of-type(1){ margin-top: 15px;} .fwimg-container img{ width: 100%;} .intro-container{ text-align: center; font-size: 21px; line-height: 34px; margin: 90px 0 110px;} .intro-container .wrapper{ max-width: 860px;} .intro-container .eyebrow{ color: #009b9f;} .intro-container h2{ font-size: 36px; margin: 20px 0 10px; color: #01647c;} .intro-container p{ margin-top: 0;} .logo-container{ margin-bottom: 80px;} .logo-container h2{ text-align: center; font-size: 36px; color: #01647c; margin-bottom: 20px;} .logo-container .single-logo{ display: flex !important; align-items: center; justify-content: center; padding: 0 30px; aspect-ratio: 3 / 2;} .logo-container .single-logo img{ max-width: 100%; max-height: 100%; object-fit: contain; width: auto; height: auto;} .people-container{ margin-bottom: 80px;} .people-container h2{ text-align: center; font-size: 36px; color: #01647c; margin-bottom: 20px;} .people-container .people-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; text-align: center;} .people-container .people-grid .person-headshot{ background-size: cover; background-position: center center; aspect-ratio: 1/1;} .people-container h3{ font-size: 21px; line-height: 24px; margin-top: 10px;} .people-container h4{ font-size: 16px; line-height: 20px; font-weight: normal;} .columns-container{ margin-bottom: 80px; text-align: center;} .columns-container h2{ font-size: 36px; color: #01647c; margin-bottom: 20px;} .columns-container .columns-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 40px;} .columns-container .columns-intro{ max-width: 860px; margin: 0 auto; font-size: 21px; line-height: 34px;} .columns-container .column-visual{ background-size: cover; background-position: center center; aspect-ratio: 16/9; margin-bottom: 25px;} .columns-container .column-content h3{ font-size: 21px; line-height: 24px;} .columns-container .column-content p:nth-of-type(1){ margin-top: 5px;} .columns-container .column-content{ font-size: 16px; line-height: 28px;} .columns-container .column-content ul, .columns-container .column-content ol{ list-style: none; margin-left: 0;} .half-columns.columns-container .columns-grid{ grid-template-columns: repeat(2,1fr);} /* Color Themes */ /* Blue */ .theme-blue .hero .button, .theme-blue .cta-container .button, .theme-blue .callouts-container .button, .theme-blue .features-container .features-content .button, .single-experience .theme-blue .hero .hero-content, .single-experience .theme-blue .cta-container .button{ background-color: #20409a;} .theme-blue .hero .button:hover, .theme-blue .cta-container .button:hover, .theme-blue .callouts-container .button:hover, .theme-blue .features-container .features-content .button:hover, .single-experience .theme-blue .cta-container .button:hover{ background-color: #2287c9;} .theme-blue .hero .eyebrow, .theme-blue .features-container .features-content .eyebrow, .theme-blue .intro-container .eyebrow, .theme-blue .features-container .features-carousel .single-slide .more, .theme-blue .faq-container .tab-label:after, .single-experience .theme-blue .hero .hero-content .eyebrow, .single-experience .theme-blue .about-details .more a:hover, .single-experience .theme-blue .about ul li::marker, .theme-blue .columns-container .eyebrow{ color: #23c2ed;} .theme-blue .cta-container, .single-experience .theme-blue .cta-container{ background-image:url(images/cta-blue.jpg);} .theme-blue .basic-container h2, .theme-blue .cta-container h2, .theme-blue .faq-container h2, .theme-blue .faq-container .tab-label, .theme-blue .intro-container h2, .theme-blue .logo-container h2, .theme-blue .callouts-container h2, .single-experience .theme-blue .about-details .eyebrow, .single-experience .theme-blue .about h2.entry-title, .single-experience .theme-blue .cta-container h2, .theme-blue .columns-container h2, .theme-blue .columns-container h2{ color: #20409a;} .theme-blue .features-container .features-content{ background-color: #20409a;} .theme-blue .features-container .features-carousel:before{ background-color: #2287c9;} .theme-blue .features-container .features-carousel .single-slide h3{ color: #2287c9;} /* Green */ .theme-green .hero .button, .theme-green .cta-container .button, .theme-green .callouts-container .button, .theme-green .features-container .features-content .button, .single-experience .theme-green .hero .hero-content, .single-experience .theme-green .cta-container .button{ background-color: #5f8b3d;} .theme-green .hero .button:hover, .theme-green .cta-container .button:hover, .theme-green .callouts-container .button:hover, .single-experience .theme-green .cta-container .button:hover{ background-color: #385b1c;} .theme-green .hero .eyebrow, .theme-green .features-container .features-content .eyebrow, .theme-green .intro-container .eyebrow, .theme-green .features-container .features-carousel .single-slide .more, .theme-green .faq-container .tab-label:after, .theme-green .callouts-container .eyebrow, .single-experience .theme-green .hero .hero-content .eyebrow, .single-experience .theme-green .about-details .more a:hover, .single-experience .theme-green .about ul li::marker, .theme-green .columns-container .eyebrow{ color: #88c040;} .theme-green .cta-container, .single-experience .theme-green .cta-container{ background-image:url(images/cta-green.jpg);} .theme-green .basic-container h2, .theme-green .cta-container h2, .theme-green .faq-container h2, .theme-green .faq-container .tab-label, .theme-green .intro-container h2, .theme-green .logo-container h2, .theme-green .callouts-container h2, .single-experience .theme-green .about-details .eyebrow, .single-experience .theme-green .about h2.entry-title, .single-experience .theme-green .cta-container h2, .theme-green .columns-container h2, .theme-green .columns-container h2{ color: #385b1c;} .theme-green .features-container .features-content{ background-color: #385b1c;} .theme-green .features-container .features-carousel:before, .theme-green .features-container .features-content .button:hover{ background-color: #88bf40;} .theme-green .features-container .features-carousel .single-slide h3{ color: #5f8b3d;} /* Orange */ .theme-orange .hero .button, .theme-orange .callouts-container .button, .theme-orange .features-container .features-content .button, .single-experience .theme-orange .hero .hero-content{ background-color: #f9a132;} .theme-orange .hero .button:hover, .theme-orange .callouts-container .button:hover, .theme-orange .cta-container .button, .single-experience .theme-orange .cta-container .button{ background-color: #d46528;} .theme-orange .hero .eyebrow, .theme-orange .intro-container .eyebrow, .theme-orange .features-container .features-carousel .single-slide .more, .theme-orange .faq-container .tab-label:after, .theme-orange .callouts-container .eyebrow, .single-experience .theme-orange .about-details .more a:hover, .single-experience .theme-orange .about ul li::marker, .theme-orange .columns-container .eyebrow{ color: #f8a131;} .theme-orange .cta-container, .single-experience .theme-orange .cta-container{ background-image:url(images/cta-orange.jpg);} .theme-orange .basic-container h2, .theme-orange .faq-container h2, .theme-orange .faq-container .tab-label, .theme-orange .intro-container h2, .theme-orange .logo-container h2, .theme-orange .callouts-container h2, .single-experience .theme-orange .about-details .eyebrow, .single-experience .theme-orange .about h2.entry-title, .theme-orange .columns-container h2, .theme-orange .columns-container h2{ color: #009a9d;} .theme-orange .features-container .features-content{ background-color: #009a9d;} .theme-orange .features-container .features-content .eyebrow{ color: #a7dbd7;} .theme-orange .features-container .features-carousel:before, .theme-orange .features-container .features-content .button:hover{ background-color: #f9a132;} .theme-orange .features-container .features-carousel .single-slide h3, .single-experience .theme-orange .hero .hero-content .eyebrow, .single-experience .theme-orange .cta-container .eyebrow{ color: #d46528;} .theme-orange .cta-container h2, .single-experience .theme-orange .cta-container h2{ color: #fff;} .theme-orange .cta-container .button:hover, .single-experience .theme-orange .cta-container .button:hover{ background-color: #fff; color: #d46528;} /* Wonderlights */ .theme-purple .hero .button, .theme-purple .callouts-container .button, .single-experience .theme-purple .hero .hero-content, .theme-purple .features-container .features-content .button{ background-color: #7b5ba6;} .theme-purple .hero .button:hover, .theme-purple .callouts-container .button:hover{ background-color: #47215e;} .theme-purple .intro-container .eyebrow, .theme-purple .faq-container .tab-label:after, .theme-purple .callouts-container .eyebrow, .single-experience .theme-purple .cta-container .eyebrow, .single-experience .theme-purple .about-details .more a:hover, .single-experience .theme-purple .about ul li::marker, .theme-purple .columns-container .eyebrow{ color: #009b9f;} .theme-purple .cta-container, .single-experience .theme-purple .cta-container{ background-image:url(images/cta-purple.jpg);} .theme-purple .basic-container h2, .theme-purple .faq-container h2, .theme-purple .faq-container .tab-label, .theme-purple .intro-container h2, .theme-purple .logo-container h2, .theme-purple .callouts-container h2, .single-experience .theme-purple .about-details .eyebrow, .single-experience .theme-purple .about h2.entry-title, .theme-purple .columns-container h2, .theme-purple .columns-container h2{ color: #01647c;} .theme-purple .features-container .features-content{ background-color: #009b9f;} .theme-purple .features-container .features-content .eyebrow{ color: #a7dbd7;} .theme-purple .features-container .features-carousel:before, .theme-purple .features-container .features-content .button:hover{ background-color: #47215e;} .theme-purple .features-container .features-carousel .single-slide h3{ color: #7b5ba6;} .theme-purple .cta-container h2, .single-experience .theme-purple .cta-container h2{ color: #fff;} .theme-purple .cta-container .button:hover, .single-experience .theme-purple .cta-container .button:hover{ background-color: #7b5ba6;} .theme-purple .hero .eyebrow{ color: #a7dbd7;} .theme-purple .cta-container .button, .single-experience .theme-purple .cta-container .button{ background-color: #009b9f;} .theme-purple .features-container .features-carousel .single-slide .more, .single-experience .theme-purple .hero .hero-content .eyebrow{ color: #47215e;} /* Media queries */ /* Media queries */ @media (max-width: 1200px) { .header .nav{ display: none;} .home .slider .single-slide::after{ padding-bottom: 56.25%;} } @media (max-width: 960px) { .home .slider .single-slide::after, .hero::after{ padding-bottom: 80%;} .home .slider .slide-content, .home .slider .slide-content p{ width: 100%;} .home .intro .intro-visual{ width: calc(100% - 350px);} .home .intro .intro-content{ width: 250px; margin: 0 auto;} .callouts-container .container{ flex-direction: column !important;} .callouts-container .callout-visual, .callouts-container .callout-content{ width: 100%;} .callouts-container .callout-visual{ margin-bottom: 30px;} .footer .container{ flex-direction: column; align-items: center;} .footer .social{ margin-top: 30px;} .footer .navigation{ display: block; text-align: center;} .footer .navigation .column{ border-top: 1px solid #333;} .footer .navigation .column:nth-of-type(1){ border-top: none; margin-top: 30px;} .features-container .features-content{ flex-direction: column; width: 95%; margin: 0 auto; border-radius: 10px; box-sizing: border-box; padding: 55px 10%;} .features-container .features-intro{ width: 100%; text-align: center;} .features-container .features-carousel{ width: 100%; margin-top: 30px;} .features-container .slick-list{ padding-right: 0; padding-left: 0;} .features-container .slick-arrow, .features-container .features-carousel::before{ display: none !important;} .faq-container .tabs .tab-label{ font-size: 21px; align-items: center;} .cta-container h2, .basic-container h2.entry-title, .faq-container .faq-intro h2, .single-experience .about h2.entry-title{ font-size: 30px;} .hero .hero-content .eyebrow{ margin-top: 0;} .hero .hero-content h1, .single-experience .hero .hero-content h1{ font-size: 36px;} .hero .hero-content{ font-size: 18px; line-height: 26px; width: 100%;} .intro-container, .single-experience .about, .single-experience .about-details, .columns-container .columns-intro{ font-size: 18px; line-height: 26px;} .flex .callouts-container .single-callout .callout-content{ padding: 0 0 60px;} .single-experience .hero{ flex-direction: column;} .single-experience .hero:after{ padding: 0;} .single-experience .hero .hero-content, .single-experience .hero .hero-visual{ width: 100%;} .single-experience .hero .hero-content{ padding: 60px 2.5%; text-align: center;} .single-experience .hero .hero-content h1{ margin: 0 0 10px;} .single-experience .hero .hero-content p{ width: 100%;} .single-experience .hero .hero-visual::after{ padding-bottom: 56.25%;} .single-experience .about .container{ flex-direction: column;} .single-experience .about-content, .single-experience .about-details{ width: 100%;} .columns-container .columns-grid{ grid-template-columns: repeat(1,1fr) !important;} .people-container .people-grid{ grid-template-columns: repeat(3,1fr);} .hero .hero-logo{ position: relative; right: auto; bottom: auto; max-width: 200px; margin-top: 30px;} } @media (max-width: 800px) { .home .slider .single-slide::after{ padding-bottom: 150%;} .hero::after{ padding: 0;} .hero{ height: 100vh; min-height: 550px; max-height: 800px;} .hero .hero-content p{ width: 100%; min-width: 0;} .single-experience .hero{ height: auto; max-height: 100%; min-height: 100%;} .faq-container .tabs input:checked ~ .tab-content{ padding: 0 1em 2.5em;} .hero .hero-content ul li, .cta-container ul li{ width: 100%; display: block; margin: 0 0 20px;} .people-container .people-grid{ grid-template-columns: repeat(2,1fr);} .home .intro .container{ flex-direction: column;} .home .intro .intro-visual, .home .intro .intro-content{ width: 100%;} .home .intro .intro-visual{ margin-bottom: 30px;} .home .slider .slide-content p{ min-width: 100%;} } @media (max-width: 600px) { .gallery-container{ grid-template-columns: repeat(1,1fr);} }