@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-9afa8b5a.css
---------------------------------------------------------
00. /var/www/archidb/public/css/page.features.css
*/

/*
---------------------------------------------------------
00. /var/www/archidb/public/css/page.features.css
---------------------------------------------------------
*/

body#page-features                                                  { background-color: var(--advanced-bg-color);}

.features-section .inner											{ padding: 50px 0; color: var(--theme-text-color);}
.features-section h2 												{ font-size: 1.8em; font-weight: 500; letter-spacing: .06em; line-height: 1.5em; margin-bottom: 10px;}
.features-section h3 												{ font-size: 1.1em; font-weight: 500; letter-spacing: .1em;}
.features-section h4 												{ font-size: 1.1em; font-weight: 500; letter-spacing: .1em; margin-top: 25px; margin-bottom: 14px;}
.features-section h4:first-child                                    { margin-top: 15px; }

.expandable-paragraph-menu 											{ border-bottom: 1px solid var(--light-border-color); }
.expandable-paragraph-title 										{ padding: 20px 0; border-top: 1px solid var(--light-border-color); cursor: pointer;}
.expandable-paragraph-title i 										{ font-size: 13px; transition: transform .4s .4s;}
.expandable-paragraph-body 											{ padding: 0 0 20px 0; font-size: 1.02em; line-height: 1.6em; }
.expandable-paragraph-item.active .expandable-paragraph-title i		{ transform: rotate(45deg); }
.expandable-paragraph-image 										{ width: 100%; overflow: hidden;}
.expandable-paragraph-image img 									{ width: 100%;}

.paragraph-column-2 .col-item:nth-child(1)							{ width: 360px; margin-right: 0; flex-shrink: 0;}
.paragraph-column-2 .col-item:nth-child(2)							{ width: auto; flex-grow: 1; margin-left: 15%;}
.paragraph-column-2 .narrative                                      { margin-bottom: 40px; }
.paragraph-column-2 .narrative:last-child                           { margin-bottom: 0; }
.paragraph-column-2 .narrative.interactive                          { margin-bottom: 15px; padding: 20px; cursor: pointer; }
.paragraph-column-2 .narrative.interactive:last-child               { margin-bottom: 0; }
.paragraph-column-2 .narrative.interactive h4                       { margin-top: 0}
.paragraph-column-2 .narrative-content                              { border-radius: 2px; cursor: pointer; transition: all .2s; }
.paragraph-column-2 .narrative-content .fr-view                     { font-size: 1rem; } 
.paragraph-column-2 .narrative.active .narrative-content            { background: #f0f4f4; box-shadow: 0 0 0 20px #f0f4f4; }
.paragraph-column-2 .narrative-image                                { display:none; }
.paragraph-column-2 .narrative-image.active                         { display:block; }

.feature-icon-tabs .tabs 											{ margin: 40px 0; border-bottom: 1px solid var(--light-border-color); position: relative;}
.feature-icon-tabs .tabs .tab 										{ width: 16.66666666666667%; flex-shrink: 0; flex-grow: 0; text-align: center; font-size: 1.15em; letter-spacing: .1em; padding: 1.2em 1em; transform: translateY(1px); cursor: pointer;}
.feature-icon-tabs .tabs .tab i 									{ margin-right: 10px;}
.feature-icon-tabs .tabs .indicator 								{ width: 16.66666666666667%; height: 2px; background: var(--light-border-color); position: absolute; left: 0; bottom:-1px; transition: left .4s; }
.feature-icon-tabs .tabs .new-tag                                   { background-color: #F0DEAE; color: #fff; padding: 2px 14px 3px 14px; margin-left: 6px; font-size: 11px; letter-spacing: .1em; border-radius: 30px; }

.features-banner 													{ position: relative; max-width: 960px; margin: 80px auto 0 auto; background-color:#fff; border-radius: 30px; overflow: hidden;}
.features-banner .banner-text                                       { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.features-banner .banner-text h2                                    { color: var(--mid-text-color); font-size: 2em; letter-spacing: .15em; margin-bottom: 20px !important; }
.features-banner .banner-text .button                               { background-color: var(--midtone2-bg-color); letter-spacing: .1em;}
.features-banner img                                                { display: block;}

.thumb-animation 													{ padding-top: 66.66666666%; position: relative; opacity: 0; transition: opacity .8s; }
.thumb-animation.loaded                                             { opacity: 1;}
.thumb-animation img 												{ position: absolute; left: 0; top: 0; transition: transform .8s; }
.thumb-animation.loaded.in-view img									{ transform: translate(0) !important;}

#page-features .main-content .inner 								{ margin: auto;}

#features-section-1 .inner 											{ padding-bottom: 0; }
#features-section-1 h2	                							{ font-size: 1.8em; font-weight: 600; letter-spacing: .1em; margin-bottom: 5px; }
#features-section-1 .summary 										{ font-size: 1.2em; letter-spacing: .06em; line-height: 1.5em;}

#features-section-2 .inner 											{ padding-bottom: 0; }
#features-section-2 .paragraph-column-2 .col-item:nth-child(2)      { margin-left: 6%;}
#features-section-2 h2												{ margin-bottom: 30px;}
#features-section-2 h3 												{ }
#features-section-2 img 											{ width: 100%;}

#features-section-3 h3 												{ font-size: 2em; margin-bottom: 20px; }
#features-section-3 .tab-body 										{ margin: auto;}
#features-section-3 .tab-body img 									{ width: 100%;}
#features-section-3 .tab-body .set 									{ display: none;}
#features-section-3 .tab-body .set.active 							{ display: block;}

#features-section-4 .inner                                          { padding: 30px 0 20px 0;}
#features-section-4 .paragraph-column-2 .col-item:nth-child(1)		{ width: 35%; }
#features-section-4 .paragraph-column-2 .col-item:nth-child(2)		{ width: 58%; margin-left: 7%; }

#features-section-5 h2 												{ margin-bottom: 40px;}
#features-section-5 h3 												{ margin-bottom: 12px; font-weight: 500;}
#features-section-5 .icon 											{ font-size: 24px; height: 45px; color: var(--light-text-color); }
#features-section-5 .column-4 .col-item 							{ width:21.25%; margin-right:5%; margin-top:50px; }
#features-section-5 .column-4 .col-item:nth-child(4n)       		{ margin-right:0; }
#features-section-5 .column-4 .col-item:nth-child(-n+4)     		{ margin-top:0; }

#play-video-button 													{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block; width: auto; padding: 0 24px 0 42px; letter-spacing: .04em; background-color: var(--theme-bg-color); box-shadow: 2px 2px 10px rgba(0,0,0,.1); }
#play-video-button::before											{ position: absolute; left: 22px; top: 50%; transform:translate(0, -50%); content:''; border-left:7px solid #fff; border-right:7px solid transparent; border-top:5px solid transparent; border-bottom:5px solid transparent; }
#play-video-button:hover 											{ filter: none; background-color: var(--midtone-bg-color);}


/*
-----------------------------
For 1600px or less
-----------------------------
*/
@media screen and (max-width: 1600px) {

.features-section .inner        { padding: 40px 0;} 
#features-section-1 .summary    { font-size: 1.15em;}
#features-section-3 h3          { font-size: 1.8em; }

}


/*
-----------------------------
For 1440px or less
-----------------------------
*/
@media screen and (max-width: 1440px) {

.features-section .inner                    { width: 100%;}
.features-section h2                        { font-size: 1.7em;}
.features-banner .banner-text h2            { font-size: 1.8em; }
.paragraph-column-2 .col-item:nth-child(1)  { width: 30%; }
.paragraph-column-2 .col-item:nth-child(2)  { width: 60%; margin-left: 10%;}
.paragraph-column-2 .narrative              { margin-bottom: 40px; }
.paragraph-column-2 .narrative:last-child   { margin-bottom: 0}

}


/*
-----------------------------
For 1280px or less
-----------------------------
*/
@media screen and (max-width: 1280px) {

.feature-icon-tabs .tabs { margin: 30px 0;}    
.feature-icon-tabs .tabs .tab { font-size: 1.05em; padding: 1em;}
.feature-icon-tabs .tabs .new-tag { display: none;}

.features-section h2    { font-size: 1.5em; }
.features-section h3    { font-size: 1.2em; }    
.features-section h4    { font-size: 1.1em; }

.expandable-paragraph-title     { padding: 18px 0;}

#features-section-1 .inner      { padding-bottom: 15px; }
#features-section-1 h2          { font-size: 1.7em;}
#features-section-1 .summary    { font-size: 1.05em;}
#features-section-2 .inner      { padding-bottom: 20px;}
#features-section-2 h2          { margin-bottom: 20px;}
#features-section-2 h3          { font-size: 1.1em; }

}


/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) {

.features-banner .text                                          { width: 240px; }
.features-banner .text h2                                       { font-size: 1.6em; }    
.feature-icon-tabs .tabs .tab                                   { font-size: 1.05em; }
.paragraph-column-2                                             { flex-direction: column; }    
.paragraph-column-2 .col-item:nth-child(1)                      { width: 100%; margin-bottom: 30px; }
.paragraph-column-2 .col-item:nth-child(2)                      { width: 100%; margin-left: 0%;}
.paragraph-column-2 .narrative.interactive                      { margin-bottom: 10px; padding: 15px; cursor: pointer; }
.paragraph-column-2 .narrative.interactive:last-child           { margin-bottom: 0; }
.paragraph-column-2 .narrative.active .narrative-content        { box-shadow: 0 0 0 15px #f0f4f4; }
#features-section-2 .inner                                      { padding-top: 0; } 
#features-section-2 .paragraph-column-2                         { flex-direction: column-reverse; }
#features-section-2 .paragraph-column-2 .col-item:nth-child(1)  { margin-bottom: 0; }
#features-section-4 .inner                                      { padding-top: 0;}
#features-section-4 .paragraph-column-2 .col-item:nth-child(1)  { width: 100%;}
#features-section-4 .paragraph-column-2 .col-item:nth-child(2)  { width: 100%; margin: 0;}
#features-section-5                                             { margin-bottom: 80px;}
#features-section-5 .inner                                      { padding-bottom: 0;}
#features-section-5 h2                                          { margin-bottom: 30px;}
#features-section-5 .icon                                       { font-size: 21px; height: 40px; }
#features-section-5 .column-4 .col-item 						{ width:47%; margin-right:6%; margin-top:30px; }
#features-section-5 .column-4 .col-item:nth-child(4n)       	{ margin-right:0; }
#features-section-5 .column-4 .col-item:nth-child(-n+4)     	{ margin-top:30px; }
#features-section-5 .column-4 .col-item:nth-child(2n)       	{ margin-right:0; }
#features-section-5 .column-4 .col-item:nth-child(-n+2)     	{ margin-top:0; }
#features-section-5 .button-wrapper                             { margin-top: 40px; }

}


/*
-----------------------------
For 768px or less
-----------------------------
*/
@media screen and (max-width: 768px) {

.feature-icon-tabs .tabs .tab       { letter-spacing: normal; padding:1em 0; }
.feature-icon-tabs .tabs .tab i     { display: none; }

.features-banner                    { height: 320px; margin-top: 50px; border-radius: 20px; }
.features-banner img                { object-fit: cover; display: block; width:auto; height: 100%;}
.features-banner .banner-text h2    { font-size: 1.7em;}

}


/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {

.fr-view                            { font-size: 1em;}

.paragraph-column-2 .narrative              { margin-bottom: 30px; }
.paragraph-column-2 .narrative:last-child   { margin-bottom: 0}

.features-section .inner            { padding: 20px 0;}
.features-section h2                { font-size:1.5em; }

.feature-icon-tabs .tabs            { margin: 20px 0 ;}
.feature-icon-tabs .tabs .tab       { font-size: 1em; }

#features-section-1 h2              { font-size: 1.6em; }
#features-section-2 h2              { margin-bottom: 15px; }

} 


/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {

.features-section h2                                            { font-size:1.4em; }
.features-section h3                                            { font-size:1.1em; }

.feature-icon-tabs .tabs                                        { margin: 10px 0 20px 0; }

.features-banner                                                { margin-top: 30px; }
.features-banner .banner-text h2                                { font-size: 1.6em; line-height: 1.4em; white-space: nowrap; }

#features-section-1 h2                                          { font-size: 1.4em; }
#features-section-2 h3                                          { font-size:1.05em; padding: 16px 0; }
#features-section-3 h2                                          { margin-bottom: 0;}
#features-section-4 .inner                                      { padding-top: 10px;}
#features-section-5 .column-4 .col-item 						{ width:100%; margin-right:0; margin-top:30px; display: flex; flex-wrap:wrap; align-items: center; }
#features-section-5 .column-4 .col-item:nth-child(4n)       	{ margin-right:0; }
#features-section-5 .column-4 .col-item:nth-child(-n+4)     	{ margin-top:30px; }
#features-section-5 .column-4 .col-item:nth-child(2n)       	{ margin-right:0; }
#features-section-5 .column-4 .col-item:nth-child(-n+2)     	{ margin-top:30px; }
#features-section-5 .column-4 .col-item:nth-child(1)     	    { margin-top:0; }
#features-section-5 .icon                                       { margin-right: 15px; margin-bottom: 8px; height: 18px; font-size: 17px; }
#features-section-5 h3                                          { margin-bottom: 10px;}
#features-section-5 .fr-view                                    { width: 100%;  }
#features-section-5 .button-wrapper                             { margin-top:30px; }
}