@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Pressura';
    src: url('../-files/fountain/GT-Pressura-Standard-Regular.woff2') format('woff2'),
        url('../-files/fountain/GT-Pressura-Standard-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pressura';
    src: url('../-files/fountain/GT-Pressura-Standard-Bold.woff2') format('woff2'),
        url('../-files/fountain/GT-Pressura-Standard-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('../-files/fountain/Roobert-Regular.woff2') format('woff2'),
        url('../-files/fountain/Roobert-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('../-files/fountain/Roobert-RegularItalic.woff2') format('woff2'),
        url('../-files/fountain/Roobert-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('../-files/fountain/Roobert-Bold.woff2') format('woff2'),
        url('../-files/fountain/Roobert-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('../-files/fountain/Roobert-BoldItalic.woff2') format('woff2'),
        url('../-files/fountain/Roobert-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

:root {
    --sunset: #D24B19;
    --pine: #465A32;
    --sand: #EBE1CD;
	--sea: #D2F5F5;
  }

*                                                       { box-sizing: border-box; }
img                                                     { border: none; display: block; }
a                                                       { color: #000; text-decoration: underline; }
a:hover                                                 { color: #000; text-decoration: none; }
a:visited                                               { color: #000; }

.for-mobile                                             { display: flex; }
.for-tablet                                             { display: none; }
.for-desktop                                            { display: none; }

/*
///////////////////////////////////////////////////////////////
TYPOGRAPHY 
///////////////////////////////////////////////////////////////
*/

/* FONT FAMILIES                                        ———————————————————————————— */
body                                                    { font-family: 'Roobert', sans-serif; font-weight: normal; font-feature-settings: "ss01"; font-variant-alternates: styleset(ss01); }
#sama-logo, #signature, h2                              { font-family: 'Pressura', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; font-weight: normal; font-feature-settings: normal; font-variant-alternates: styleset(normal); }

/* SIZES & STYLES                                       ———————————————————————————— */
body                                                    { font-size: 1.00em; line-height: 1.50em;  }
#sama-logo                                              { font-size: 5.00rem; line-height: 0.85em; font-weight: bold; }
#main-menu                                              { font-size: 3.00rem; line-height: 1.00em; }
#signature                                              { font-size: 1.00rem; line-height: 1.00em; letter-spacing: 0.10em; }
footer                                                  { font-size: 1.00rem; line-height: 1.50em; }

.intro                                                  { font-size: 1.75rem; line-height: 1.50em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-medium                                            { font-size: 1.25rem; line-height: 1.50em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-large                                             { font-size: 1.50rem; line-height: 1.50em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-extralarge                                        { font-size: 1.75rem; line-height: 1.35em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.button                                                 { font-size: 1.50rem; line-height: 1.00em; }
.plan-info                                              { font-size: 1.00rem; line-height: 2.00em; }
.plan-button .button                                    { font-size: 1.00rem; line-height: 1.00em; }
.credits                                                { font-size: 0.75rem; line-height: 1.00em; }
.disclaimer                                             { font-size: 0.75rem; line-height: 1.25em; }
.plan-header                                            { font-size: 1.25rem; line-height: 1.00em; }
.plan-header h2                                         { font-size: 1.75rem; line-height: 1.00em; font-weight: bold; }
.plan-caption                                           { font-size: 1.25rem; line-height: 1.00em; }
.north                                                  { font-size: 1.25rem; line-height: 1.00em; }

h1.light												{ font-family: 'Roobert', sans-serif; font-size: 3.75rem; line-height: 1em; font-weight: normal; text-transform: uppercase; }
h2.light												{ font-family: 'Roobert', sans-serif; font-size: 1.75rem; line-height: 1em; font-weight: normal; text-transform: uppercase; color: var(--sunset); }

/*
///////////////////////////////////////////////////////////////
STRUCTURE
///////////////////////////////////////////////////////////////
*/

body                                                    { margin: 0; padding: 0; background-color: #FFF; color: #000; }
#page                                                   { width: 100%; height: auto; margin: 0; padding: 0 20px 20px 20px; position: relative; z-index: 100 !important; background-color: #FFF; }

.main-grid                                              { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.break-1x                                               { width: 100%; height: 20px; margin: 0; padding: 0; }
.break-2x                                               { width: 100%; height: 40px; margin: 0; padding: 0; }
.break-3x                                               { width: 100%; height: 60px; margin: 0; padding: 0; }

hr 														{ margin: 15px 0; padding: 0; border: 0; border-top: 1px solid var(--sunset); }

/*
///////////////////////////////////////////////////////////////
HEADER & NAVIGATION
///////////////////////////////////////////////////////////////
*/

#main-header                                            { width: 100%; height: 140px; margin: 0; padding: 0; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; z-index: 900 !important; }

#sama-logo                                              { margin: -0.05em 0 0 0; padding: 0; z-index: 910 !important; }
#sama-logo a                                            { margin: 0; padding: 0; display: block; text-decoration: none; color: #000;}
#sama-logo a:hover                                      { text-decoration: none; color: #000;}

#main-nav                                               { width: 100%; height: auto; margin: 0; padding: 0; position: absolute; top: 0; left: 0; z-index: 920; }
#main-menu                                              { width: 100%; height: auto; margin: 0; padding: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; list-style: none; display: none; flex-direction: column; gap: 20px; align-items: center; justify-content: center; background-color: #FFF; }
#main-menu li                                           { margin: 0; padding: 5px 0; text-align: center; }
#main-menu li.active                                    { border-bottom: solid 1px #000; margin-bottom: -1px; }
#main-menu a                                            { margin: 0; padding: 0; text-decoration: none; color: #000; }
#main-menu a:hover                                      { text-decoration: none; }

#menu-toggle                                            { margin: 0; padding: 0; position: absolute; top: 0; right: 0; text-decoration: none; color: #000; z-index: 990 !important; display: flex; justify-content: center; align-items: center; }
#menu-toggle:hover                                      { text-decoration: none; }

#menu-icon                                              { display: flex;  flex-direction: column;  align-items: center;  justify-content:center; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; }
#menu-icon:after, #menu-icon:before, #menu-icon span    { display: block !important; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; content: ''; margin: 2px 0; height: 3px; width: 24px; background-color: #000; }
#menu-toggle.is-clicked #menu-icon:before               { transform: translateY(6px) rotate(135deg); -webkit-transform: translateY(8px) rotate(135deg); -moz-transform: translateY(6px) rotate(135deg); }
#menu-toggle.is-clicked #menu-icon:after                { transform: translateY(-6px) rotate(-135deg); -moz-transform: translateY(-8px) rotate(-135deg); -webkit-transform: translateY(-6px) rotate(-135deg); }
#menu-toggle.is-clicked #menu-icon span                 { transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); }

.contact-button                                         { width: 24px; height: 100%; margin: 0; padding: 0; text-decoration: none; z-index: 990 !important; justify-content: center; align-items: center; }

/*
///////////////////////////////////////////////////////////////
CONTENT
///////////////////////////////////////////////////////////////
*/

/* GENERAL                                              ———————————————————————————— */
.is-visible                                             { display: flex !important; }
.is-clicked                                             { position: fixed !important; right: 20px !important; }

/* HOMEPAGE                                             ———————————————————————————— */
#portada                                                { width: 100%; margin: 0; padding: 0; transition: height 200ms ease-in; }
#signature                                              { width: 100%; height: 60px; display: flex; flex-direction: row; align-items: center; justify-content: center; }

.cover                                                  { width: 100%; height: 100%;}
.cover img                                              { width: 100%; height: 100%; object-fit: cover !important; }

.intro                                                  { width: 100%; height: auto; margin: 4.5em 0 0 0; padding: 0; color: var(--sunset); grid-column: 1 / span 12; text-align: center; }

.google-map                                             { width: 100%; height: 0; margin: 0; padding: 100% 0 0 0; position: relative;}
.google-map iframe                                      { width: 100%; height: 100% !important; position: absolute; left: 0; top: 0; border: none; }

/* ABOUT                                                ———————————————————————————— */
.wallpaper                                              { width: 100%; height: 80vh; margin: 0; padding: 0; position: sticky; top: -100px; z-index: 0; }
.wallpaper img                                          { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.about                                                  { width: 100%; height: auto; margin: -20vh 0 75vh  0; padding: 20px 0; grid-column: 1 / span 12; color: var(--sunset); background-color: #FFF; z-index: 800 !important; }
.about-text p:first-of-type                             { margin-top: 0; }
.about-text p:last-of-type                              { margin-bottom: 0; }

.colophon                                              	{ width: 100%; height: auto; margin: 0; padding: 9em 0; display: grid; grid-template-columns: repeat(1, fr); gap: 40px; }
.colophon .col1											{ grid-row: 1; grid-column: 1; }
.colophon .col2 										{ grid-row: 2; grid-column: 1; }
.colophon .col3 										{ grid-row: 3; grid-column: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 40px; }
.colophon a                                        		{ color: var(--sunset); }
.colophon a:hover                                  		{ color: var(--sunset); }

.colophon-map											{ width: 100%; height: auto; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, fr); grid-template-rows: repeat(2, fr); gap: 0; border: solid 1px var(--sunset); }
.colophon-map .col1										{ grid-column: 1 / span 3; grid-row: 1; }
.colophon-map .col2 									{ grid-column: 1 / span 1; grid-row: 2; border-top: solid 1px var(--sunset); border-right: solid 1px var(--sunset); padding: 20px; }
.colophon-map .col3 									{ grid-column: 2 / span 2; grid-row: 2; border-top: solid 1px var(--sunset); padding: 20px 50% 20px 20px; }

/* TAN                                                  ———————————————————————————— */
.tan                                                    { width: 100%; height: auto; margin: 0; padding: 0; }
.tan-text                                               { width: 100%; height: auto; margin: 0; padding: 40px 0 0 0; grid-column: 1 / span 12; }
.tan-text p:first-of-type                               { margin-top: 0; }
.tan-text p:last-of-type                                { margin-bottom: 0; }

.img-full 												{ width: 100%; height: auto; }

/* PLANS                                                ———————————————————————————— */
.plans                                                  { width: 100%; height: auto; margin: 0; padding: 0; border-top: solid 1px var(--sunset); }
.plan                                                   { width: 100%; height: auto; margin: 0; padding: 0; border-bottom: solid 1px var(--sunset); }

.plan-header                                            { width: 100%; height: auto; margin: 0; padding: 20px 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: var(--sunset); }
.plan-header:hover                                      { cursor: pointer; }
.plan-header.is-active                                  { border-bottom: dashed 1px var(--sunset); }
.plan-header h2                                         { margin: 0; }

.plan-drawer                                           	{ width: 100%; height: 100%; position: relative; display: none; }
.plan-drawer.is-open                                    { display: block; }
.plan-content                                           { width: 100%; height: 100%; margin: 0; padding: 20px 0; color: var(--sunset); }

.plan-info                                              { margin: 0; padding: 0; grid-column: 1 /span 12; display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }

.plan-areas                                           	{ margin: 0; padding: 0; list-style: none; grid-column: 1 /span 1; }
.plan-areas li                                        	{ margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.plan-areas .tableader                               	{ height: 1px; margin: 0; padding: 0; flex-grow:1; border: none; border-bottom: dotted 1px var(--sunset); }

.plan-button                                            { margin: 0; padding: 2em 0 2.5em 0; grid-column: 1 /span 1; }

.plan-location                                          { width: 100%; height: auto; margin: 0; padding: 0; grid-column: 1 / span 1; }
.plan-location-map                                      { width: 100%; margin: 0; padding: 10px; aspect-ratio: 1 / 1;  background-color: var(--sunset); }
.plan-location-mpa img                                  { width: 100%; height: 100%; object-fit: contain !important; }

.disclaimer                                             { width: 100%; height: auto; margin: 0; padding: 6em 0; }

.full-plan                                              { width: calc(100% + 40px); height: auto; margin: 0 -20px -20px -20px; padding: 20px 60px; background-color: var(--sand); display: flex; align-items: center; justify-content: center; position: relative; }
.full-plan img                                          { width: 100%; height: 100% !important; object-fit: contain !important; }

.north                                                  { position: absolute; left: 20px; top: 20px; display: flex;  }
.north img                                              { width: 20px; height: 40px; display: block; }
.sea                                                  	{ position: absolute; left: 20px; bottom: 20px; display: flex; }
.sea img                                              	{ width: 40px; height: 20px; display: block; }

/* MAIN CAROUSEL                                        ———————————————————————————— */ 
.main-carousel                                          { width: 100%; margin: 0 0 70px 0; padding: 0; }
.carousel-cell                                          { width: 100%; margin: 0 10px 0 0; padding: 0; }
.carousel-cell img                                      { width: 100%; height: 100%; object-fit: cover !important; }
.carousel-text                                          { width: 100%; height: 100%; margin: 0 10px 0 0; padding: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--sunset); color: var(--sand); text-align: center; }
.carousel-text:nth-child(3)                             { background-color: var(--pine); }
.carousel-text:nth-child(12)                            { background-color: var(--sand); color: var(--pine); }

.flickity-prev-next-button                              { margin: auto 0 0 0; transform: translateY(0); top: calc(100% + 20px); }
.flickity-prev-next-button.previous                     { left: 0; }
.flickity-prev-next-button.next                         { right: 0; }
.flickity-fullscreen-button                             { margin: 0 auto; top: calc(100% + 20px); left: 0; right: 0; }

.main-carousel.is-fullscreen                            { width: 100%; height: 100% !important; z-index: 9999 !important; padding: 0; background-color: #FFF; }
.is-fullscreen .carousel-cell                           { width: 100%; height: 100% !important; display: flex; align-items: center; justify-content: center; }
.is-fullscreen .carousel-cell img                       { width: 100%; height: 100% !important; object-fit: contain !important; }
.is-fullscreen .carousel-text                           { display: none; }

.is-fullscreen .flickity-prev-next-button               { bottom: 40px !important; }
.is-fullscreen .flickity-prev-next-button.previous      { left: 20px; }
.is-fullscreen .flickity-prev-next-button.next          { right: 20px; }
.is-fullscreen .flickity-fullscreen-button              { top: calc(100% - 90px); }

/* PLANS CAROUSEL                                       ———————————————————————————— */
.plan-carousel                                          { width: 100% !important; height: 50vh !important; margin: 0 0 90px 0; padding: 0; grid-column: 1 / span 12; grid-row: 1; }
.plan-cell                                              { width: 100% !important; height: 50vh; margin: 0 10px 0 0; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.plan-cell img                                          { width: 100%; height: auto; max-height: 100%; }
.plan-caption                                           { position: absolute; left: 0; top: 0; color: var(--sunset); }

.plan-carousel .flickity-viewport 						{ height: 100% !important; width: 100% !important; display: block; position: relative; }

.plan-carousel .flickity-button                         { border-color: var(--sunset); }
.plan-carousel .flickity-button-icon                    { fill: var(--sunset); }
.plan-carousel .flickity-button:hover                   { background: var(--sunset); color: var(--sand); }
.plan-carousel .flickity-button:hover .flickity-button-icon { fill: var(--sand); }

.plan-carousel.is-fullscreen                            { width: 100%; height: 100% !important; z-index: 9999 !important; padding: 0; background-color: #FFF; }
.is-fullscreen .plan-cell                               { width: 100%; height: 100%; margin: 0; padding: 20px; }
.is-fullscreen .plan-cell img                           { width: 100%; height: auto; max-height: 100%;}
.is-fullscreen .plan-caption                            { left: 20px; top: 40px; }

/* VIDEO                                                ———————————————————————————— */
.video                                                  { width: 100%; height: 0;  margin: 0; padding: 56.25% 0 0 0; position: relative;}
.video iframe                                           { width: 100%; height: 100% !important; position: absolute; left: 0; top: 0; border: none; }

/* VIRTUAL TOUR                                         ———————————————————————————— */
.virtual-tour                                           { width: 100%; height: 0; margin: 0; padding: 100% 0 0 0; position: relative; overscroll-behavior-y: none; }
.vr                                                     { width: 100%; height: 100% !important; position: absolute; left: 0; top: 0; border: none; }

/* SPLASH SCREEN                                        ———————————————————————————— */
.splash-screen                                          { width: 100%; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background-image: url('../-files/img/dunes-c-marinamaliutina-unsplash.jpg'); background-size: cover; background-position: center; }
.splash-screen .credits                                 { width: 100%; height: auto; margin: 0; padding: 0px 20px; position: fixed; bottom: 20px; text-align: center; }

/* BUTTONS                                              ———————————————————————————— */
.button                                                 { width: max-content; height: 48px; margin: 0; padding: 0 48px; border-radius: 24px; border: solid 1px #000; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.button:hover                                           { background-color: #000; color: #FFF; text-decoration: none; }

.button.sunset                                          { border-color: var(--sunset); color: var(--sunset); }
.button.sunset:hover                                    { color: #FFF; background-color: var(--sunset); }

.splash-screen  .button                                 { width: 232px; }
.plan-button    .button                                 { width: max-content; height: 42px; border-radius: 21px; margin: 0 auto; padding: 0 42px; }

.featured-button                                        { width: 100%; margin: 0; padding: 8em 0 9em 0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.featured-button:last-child                             { margin-bottom: -20px; }

/*
///////////////////////////////////////////////////////////////
FOOTER
///////////////////////////////////////////////////////////////
*/

footer                                                  { width: 100%; height: auto; margin: 0; padding: 8em 30px; position: fixed; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: var(--sunset); color: var(--sand); z-index: 1 !important; }

footer a                                                { text-decoration: none; color: var(--sand); }
footer a:hover                                          { text-decoration: none; color: var(--sand); }
footer a:visited                                        { text-decoration: none; color: var(--sand); }

footer .tan-logo                                        { width: 150px; height: auto; display: inline-block; }

/* 768 */
/* 768 */
/* 768 */
@media only screen and (min-width: 768px) {

    /*
    ///////////////////////////////////////////////////////////////
    STRUCTURE
    ///////////////////////////////////////////////////////////////
    */
    
    #page                                                   { padding: 0 40px 40px 40px; }
    
    /*
    ///////////////////////////////////////////////////////////////
    HEADER & NAVIGATION
    ///////////////////////////////////////////////////////////////
    */
    
    #main-header                                            { height: 150px; }
    .is-clicked                                             { right: 40px !important; }
    
    
    /*
    ///////////////////////////////////////////////////////////////
    CONTENT
    ///////////////////////////////////////////////////////////////
    */
    
    /* HOMEPAGE                                             ———————————————————————————— */
    .intro                                                  { grid-column: 2 / span 10; }
    
    /* ABOUT                                                ———————————————————————————— */
    .wallpaper                                              { height: 85vh; }
    .about                                                  { margin-top: -20vh; padding: 40px 0; }
    
	.colophon                                              	{ grid-template-columns: repeat(2,fr); }
	
	.colophon .col1 										{ grid-row: 1; grid-column: 1; }
	.colophon .col2 										{ grid-row: 2; grid-column: 1; }
	.colophon .col3 										{ grid-row: 1 / span 2; grid-column: 2; justify-content: flex-end; padding-top: 0; }

	.colophon-map .col2 									{ padding: 40px; }
	.colophon-map .col3 									{ padding: 40px 50% 40px 40px; }
    
    /* TAN                                                  ———————————————————————————— */
    .tan-text                                               { grid-column: 2 / span 10; }
    
    /* PLANS                                                ———————————————————————————— */
    .plan-header                                            { padding: 30px 0; }
    .plan-content                                           { padding: 30px 0; }
    
    .plan-info                                              { grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
	.plan-button                                            { padding: 2em 0 0 0; }
	.plan-location 											{ grid-column: 2 /span 1; grid-row: 1 / span 2; }

    .full-plan                                              { width: calc(100% + 80px);  margin: 0 -40px -40px -40px; padding: 40px 120px; }
	
	.north                                                  { left: 20px; top: 20px; }
	.north img                                              { width: 25px; height: 50px; }
	.sea                                                  	{ left: 20px; bottom: 20px; }
	.sea img                                              	{ width: 50px; height: 25px; }

    /* BUTTONS                                              ———————————————————————————— */
    .featured-button:last-child                             { margin-bottom: -40px; }
    
}
/* @media 768 */


/* 1024 */
/* 1024 */
/* 1024 */
@media only screen and (min-width: 1024px) {

    .for-mobile                                             { display: none; }
    .for-tablet                                             { display: flex; }
    .for-desktop                                            { display: none; }
    
    /*
    ///////////////////////////////////////////////////////////////
    TYPOGRAPHY 
    ///////////////////////////////////////////////////////////////
    */
    
    #sama-logo                                              { font-size: 5.50rem; }
    #main-menu                                              { font-size: 1.25rem; letter-spacing: 0.05em; }
    #signature                                              { font-size: 1.15rem; }
    
    /*
    ///////////////////////////////////////////////////////////////
    STRUCTURE
    ///////////////////////////////////////////////////////////////
    */
    
    #page                                                   { padding: 0 50px 50px 50px; }
    
    /*
    ///////////////////////////////////////////////////////////////
    HEADER & NAVIGATION
    ///////////////////////////////////////////////////////////////
    */
    
    #main-header                                            { height: 160px; }
    
    #sama-logo                                              { z-index: 990 !important; }
    
    #main-nav                                               { height: 50%; }
    #main-menu                                              { height: 100%; position: relative; display: flex; flex-direction: row; justify-content: flex-start; background-color: transparent; }
    #main-menu li:hover                                     { border-bottom: solid 1px #000; margin-bottom: -1px !important; }
    #main-menu li:nth-child(1)                              { display: none; }
    #main-menu li:nth-child(4)                              { margin-right: auto; }
    
    #menu-toggle                                            { display: none; }
    
    /*
    ///////////////////////////////////////////////////////////////
    CONTENT
    ///////////////////////////////////////////////////////////////
    */

	/* HOMEPAGE                                             ———————————————————————————— */
	.google-map                                             {  padding: 50% 0 0 0; }
    
    /* ABOUT                                                ———————————————————————————— */
    .wallpaper                                              { height: 75vh; top: -50px; }
    .about                                                  { margin-top: -20vh; padding: 40px 50px; grid-column: 2 / span 10; }

	.colophon-map											{ grid-template-columns: repeat(7, fr); grid-template-rows: repeat(3, fr); }
	.colophon-map .col1										{ grid-column: 3 / span 5; grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; }
	.colophon-map .col2 									{ grid-column: 1 / span 2; grid-row: 1 / span 2; border-top: none; padding: 40px; }
	.colophon-map .col3 									{ grid-column: 1 / span 2; grid-row: 3 / span 1; border-right: solid 1px var(--sunset); padding: 40px; }

	.colophon-map .col1 img                               	{ width: 100%; height: 100%; object-fit: cover !important; object-position: right center; }

    /* TAN                                                  ———————————————————————————— */
    .tan-text                                               { grid-column: 3 / span 8; }
    
    /* PLANS                                                ———————————————————————————— */
    .plan-header                                            { padding: 40px 0; }
    .plan-content                                           { padding: 40px 0; gap: 30px; }
    
    .plan-info                                              { grid-column: 9 / span 4; grid-template-columns: repeat(1, 1fr); }
	.plan-button                                            { padding: 2em 0 2.5em 0; }
	.plan-location 											{ grid-column: 1 /span 1; grid-row: 3 / span 1; }

    .full-plan                                              { width: calc(100% + 100px);  margin: 0 -50px -50px -50px; padding: 50px 150px; }

	.north                                                  { left: 30px; top: 30px; }
	.north img                                              { width: 30px; height: 60px; }
	.sea                                                  	{ left: 30px; bottom: 30px; }
	.sea img                                              	{ width: 60px; height: 30px; }


    /* MAIN CAROUSEL                                        ———————————————————————————— */ 
    .main-carousel                                          { height: 60vh !important; margin: 0 !important; }
    .carousel-cell                                          { width: auto !important; height: 100% !important; }
    .carousel-cell img                                      { width: auto !important; height: 100% !important; object-fit: contain !important;  }
    .carousel-text                                          { width: 50vw !important; height: 100%; padding: 120px; text-align: left; }
    .carousel-text:nth-child(3)                             { width: 80vw !important; }
    .carousel-text:nth-child(6)                             { width: 80vw !important; }
    .carousel-text:nth-child(12)                            { width: 70vw !important; }
    .carousel-text:nth-child(16)                            { width: 55vw !important; }
    
    .flickity-prev-next-button                              { margin: auto 0; transform: translateY(-50%); top: 50%; }
    .flickity-prev-next-button.previous                     { left: 20px; }
    .flickity-prev-next-button.next                         { right: 20px; }
    .flickity-fullscreen-button                             { left: auto; right: 20px; top: 20px; }
    
    .main-carousel.is-fullscreen                            { padding: 20px; }
    .is-fullscreen .carousel-cell                           { width: auto; }
    .is-fullscreen .carousel-cell img                       { width: auto; }
    
    .is-fullscreen .flickity-prev-next-button               { transform: translateY(-50%); bottom: auto !important; margin-top: auto; margin-bottom: auto;  }
    .is-fullscreen .flickity-prev-next-button.previous      { left: 40px; }
    .is-fullscreen .flickity-prev-next-button.next          { right: 40px; }
    .is-fullscreen .flickity-fullscreen-button              { left: auto; right: 40px; top: 40px; }
    
    /* PLANS CAROUSEL                                       ———————————————————————————— */
    .plan-carousel                                          { height: 100% !important; margin: 0; grid-column: 1 / span 8; }
    .plan-cell                                              { height: 100%;  }
    .plan-cell img                                          { width: 75%; height: auto; max-height: 100%; }
    
    .plan-carousel .flickity-prev-next-button.previous      { left: 0; }
    .plan-carousel .flickity-prev-next-button.next          { right: 0; }
    .plan-carousel .flickity-fullscreen-button              { right: 0; top: 0; }
    
    .is-fullscreen .plan-cell                               { padding: 90px; }
    .is-fullscreen .plan-cell img                           { width: 80%; height: auto; max-height: 100%; object-fit: contain !important; }
    .is-fullscreen .plan-caption                            { left: 40px; top: 40px; }
    
    .plan-carousel.is-fullscreen .flickity-prev-next-button.previous      { left: 40px; }
    .plan-carousel.is-fullscreen .flickity-prev-next-button.next          { right: 40px; }
    .plan-carousel.is-fullscreen .flickity-fullscreen-button              { top: 40px; right: 40px; }
    
    /* VIRTUAL TOUR                                         ———————————————————————————— */
    .virtual-tour                                           { padding: 56.25% 0 0 0; }
    
    /* SPLASH SCREEN                                        ———————————————————————————— */
    .splash-screen                                          { flex-direction: row; }
    
    /* BUTTONS                                              ———————————————————————————— */
    .featured-button                                        { padding: 8em 0 !important; }
    .featured-button:last-child                             { margin-bottom: -50px; }
    
}
/* @media 1024 */


/* 1280 */
/* 1280 */
/* 1280 */
@media only screen and (min-width: 1280px) {

    .for-desktop                                            { display: flex; }
    
    /*
    ///////////////////////////////////////////////////////////////
    TYPOGRAPHY 
    ///////////////////////////////////////////////////////////////
    */
    
    #sama-logo                                              { font-size: 7.00rem; }
    #signature                                              { font-size: 1.25rem; }
    
    .intro                                                  { font-size: 2.00rem; }
    .text-extralarge                                        { font-size: 2.50rem; line-height: 1.40em; }
    .plan-header                                            { font-size: 2.00rem; }
    .plan-header h2                                         { font-size: 3.00rem; }
    .button                                                 { font-size: 2.00rem; }
    
    /*
    ///////////////////////////////////////////////////////////////
    STRUCTURE
    ///////////////////////////////////////////////////////////////
    */
    
    #page                                                   { padding: 0 80px 80px 80px; }
    
    /*
    ///////////////////////////////////////////////////////////////
    HEADER & NAVIGATION
    ///////////////////////////////////////////////////////////////
    */
    
    #main-header                                            { height: 200px; }
    #main-menu                                              { gap: 20px; }

	#main-menu li:nth-child(4)                              { margin-right: 0px; }
	#main-menu li:nth-child(5)                              { margin-right: auto; }
    
    /*
    ///////////////////////////////////////////////////////////////
    CONTENT
    ///////////////////////////////////////////////////////////////
    */
    
    /* HOMEPAGE                                             ———————————————————————————— */
    #signature                                              { height: 80px; }
    
    
    /* ABOUT                                                ———————————————————————————— */
    .wallpaper                                              { height: 90vh; top: -100px; }
    .about                                                  { margin-top: -30vh; margin-bottom: 100vh; padding: 60px 120px;  }

	.colophon                                              	{ padding: 10em 0; }

	.colophon-map											{ grid-template-columns: repeat(8, fr); }
	.colophon-map .col1										{ grid-column: 3 / span 6; }

    /* TAN                                                  ———————————————————————————— */
    .tan-text                                               { padding-top: 60px; grid-column: 4 / span 6; }
    
    /* PLANS                                                ———————————————————————————— */
    .plan-info                                              { grid-column: 10 / span 3; }
    .plan-button                                            { padding: 3em 0 3.5em 0; }
    .full-plan                                              { width: calc(100% + 160px); margin: 0 -80px -80px -80px; padding: 80px 240px; }
	
    
    /* MAIN CAROUSEL                                        ———————————————————————————— */ 
    .main-carousel                                          { height: 70vh !important; }
    .carousel-text:nth-child(3)                             { width: 55vw !important; }
    .carousel-text:nth-child(6)                             { width: 50vw !important; }
    .carousel-text:nth-child(12)                            { width: 40vw !important; }
    .carousel-text:nth-child(16)                            { width: 45vw !important; }
    
    /* PLANS CAROUSEL                                       ———————————————————————————— */
	/*
    .plan-carousel                                          { height: 75vh; margin: 0; grid-column: 1 / span 9; }
    .plan-cell                                              { height: 75vh; }
    */

    /* SPLASH SCREEN                                        ———————————————————————————— */
    .splash-screen                                          { gap: 30px; }
    
    /* BUTTONS                                              ———————————————————————————— */
    .button                                                 { height: 64px; border-radius: 32px; }
    
    .splash-screen  .button                                 { width: 300px; }
    
    .featured-button                                        { padding: 10em 0 !important; }
    .featured-button:last-child                             { margin-bottom: -80px; }
    
}
/* @media 1280 */


/* 1920 */
/* 1920 */
/* 1920 */
@media only screen and (min-width: 1920px) {

    /*
    ///////////////////////////////////////////////////////////////
    TYPOGRAPHY 
    ///////////////////////////////////////////////////////////////
    */
    
    #sama-logo                                              { font-size: 7.50rem; }
    .intro                                                  { font-size: 2.25rem; }
    .plan-header                                            { font-size: 2.00rem; }
    .plan-header h2                                         { font-size: 3.50rem; }
	.plan-button .button                                    { font-size: 1.50rem; }
    
    /*
    ///////////////////////////////////////////////////////////////
    HEADER & NAVIGATION
    ///////////////////////////////////////////////////////////////
    */
    
    #main-header                                            { height: 260px; }
	#main-menu                                              { gap: 30px; }
    
    /*
    ///////////////////////////////////////////////////////////////
    CONTENT
    ///////////////////////////////////////////////////////////////
    */
    
    /* HOMEPAGE                                             ———————————————————————————— */
    .intro                                                  { grid-column: 3 / span 8; }
    
    /* ABOUT                                                ———————————————————————————— */
    .about                                                  { margin-top: -35vh; padding: 80px 160px; }

	.colophon                                              	{ padding: 12em 0; grid-template-columns: repeat(3,fr); }
	
	.colophon .col1 										{ grid-row: 1; grid-column: 1; }
	.colophon .col2 										{ grid-row: 1; grid-column: 2; }
	.colophon .col3 										{ grid-row: 1 / span 1; grid-column: 3 / span 1; }
    
    /* TAN                                                  ———————————————————————————— */
    .tan-text                                               { padding-top: 80px; }
    
    /* PLANS                                                ———————————————————————————— */
	.plan-info                                              { grid-column: 10 / span 3; }
	.plan-button                                            { padding: 4em 0 4.5em 0; }
    
    /* CAROUSEL                                             ———————————————————————————— */ 
    .main-carousel                                          { height: 65vh !important; }
    .carousel-text:nth-child(3)                             { width: 55vw !important; }
    .carousel-text:nth-child(6)                             { width: 45vw !important; }
    .carousel-text:nth-child(12)                            { width: 30vw !important; }
    .carousel-text:nth-child(16)                            { width: 35vw !important; }
    
    /* BUTTONS                                              ———————————————————————————— */
    .featured-button                                        { padding: 12em 0 !important; }
    .plan-button    .button                                 { height: 48px; border-radius: 24px; }
}
/* @media 1920 */