body {
	margin: 0;
}

body .ab-iam-root.v3.ab-animate-in.ab-animate-out.ab-effect-html.ab-show {
    position: fixed !important;
    z-index: 9999999999999999999;
}

#liner-desktop-container {
	width: 1280px;
	margin: 0 auto;
}

#liner-landscape-container {
	width: 1024px;
	margin: 0 auto;
}

main.desktop {
	margin-top: 64px;
	margin-left: 224px;
	display: flex;
}

main.landscape {
	width: 1024px;
	margin-top: 64px;
	justify-content: center;
	display: flex;
}

main.portrait {
	justify-content: center;
	display: flex;
}

#liner-desktop-main-container {
	width: 712px;
	height: 100%;
	margin-bottom: 100px;
	display: flex;
}

#liner-landscape-main-container {
	width: 624px;
	height: 100%;
	margin: 0 16px 100px 40px;
	display: flex;
}

#liner-desktop-menu-container {
	width: 216px;
	position: fixed;
	top: 98px;
	margin-left: -16px;
	z-index: 1;
}

#liner-mobile-menu-container {
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
	left:0;
	z-index: 1;
}

#liner-recommendation-container {
	width: 320px;
	margin-left: 24px;
	margin-top: 40px;
}

.ab-feed.ab-show {
	z-index: 20;
}

.ab-feed-buttons-wrapper {
	background-color: #00bdb8 !important;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

button {
	border: none;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
}

*:focus {
	outline: none;
}

a {
	text-decoration: none;
	cursor: pointer;
}

input {
	border: none;
	background-color: transparent;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Old versions of Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

/* Thin Scrollbar */
.win:root {
	scrollbar-color: rgba(75, 75, 75, 0.351) rgba(0, 0, 0, 0) !important;
	scrollbar-width: thin !important;
}
.win::-webkit-scrollbar {
	width: 8px !important; 
}

.win::-webkit-scrollbar-thumb {
	border-radius: 8px !important;
	background-color: rgba(75, 75, 75, 0.351) !important;
}

.overlay { 
    @media only screen and (min-width : 280px) {
        display: none;
    }
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 1025px) {
        width: 100%;
        height: 100%;
        position: fixed; 
        z-index: 98;
        background-color: $grayscale-1-900;
        opacity: 0.2;
        display: block;
    }
}

#liner-landing {
    @include column-flexbox();
    
    &.scroll-lock {
        overflow-y:hidden;
        position: fixed;
    }
    
    // Header
    &-header {
        width: 100%;
        padding: 0 6% 0 6%;
        height: 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        z-index: 5;
        background-color: $white;

        @media only screen and (min-width : 280px) {
            height: 48px;
        }
        /* Medium Devices, Desktops */
        @media only screen and (min-width : 1025px) {
            height: 64px;
        }

        #liner-logo {
            background-image: url('/src/images/liner-desktop.svg');
            z-index: 1;
            /* Small Devices, Tablets */
            @media only screen and (min-width : 280px) {
                @include backgroundImage(84px, 16px);
            }
            /* Medium Devices, Desktops */
            @media only screen and (min-width : 1025px) {
                @include backgroundImage(125px, 24px);
            }
        }

        .header-btn-container {
            height: 40px;
            display: flex;
            align-items: center;

            // Button Styles
            @include fontStyle(14px, 400, -0.35px , $primary-500, normal);

            a {
                /* Small Devices, Tablets */
                @media only screen and (min-width : 280px) {
                    display: none;
                }
                /* Medium Devices, Desktops */
                @media only screen and (min-width : 1025px) {
                    padding: 11px 21px 11px 23px;
                    height: 40px;
                    border-radius: 8px;
                    border: solid 1px $primary-500;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: $primary-500;

                    .bold {
                        font-weight: 500 !important;
                    }
                    .light {
                        font-weight: normal;
                        margin-left: 5px;
                    }
                    &:hover {
                        background-color: $primary-500;
                        color: white;
                    }

                    &.hide {
                        display: none;
                    }
                    margin-right: 32px;
                }
            }

            button {

                &:hover {
                    color: $primary-600;
                }
                
                /* Small Devices, Tablets */
                @media only screen and (min-width : 280px) {
                    @include fontStyle(14px, 400, -0.35px , $primary-500, normal);
                }
                /* Medium Devices, Desktops */
                @media only screen and (min-width : 1025px) {
                    @include fontStyle(16px, 400, -0.35px , $primary-500, normal);
                }
            }

            button + button {
                /* Small Devices, Tablets */
                @media only screen and (min-width : 280px) {
                    margin-left: 16px;
                }
                /* Medium Devices, Desktops */
                @media only screen and (min-width : 1025px) {
                    margin-left: 24px;
                }
            }

        }

    }

    &-body {
        margin-top: 64px;
        width: 100%;
        overflow-x: hidden;
        position: relative;
        @include column-flexbox();

        #highlight-section {
            @media only screen and (min-width : 280px) {
                width: 264px;
                height: 587px;
                margin-top: 48px;

                #highlight-text {
    
                    #title-wrap {
                        @include fontStyle(32px, bold, -1.2px , $grayscale-1-900, normal);
                        margin-bottom: 16px;
                    }
                    #content-wrap {
                        @include fontStyle(14px, normal, -0.45px , $grayscale-1-800, 24px);
                        #highlighted {
                            width: max-content;
                            background-color: #ffff83;
                        }
                    }
    
                    #button-wrap {
                        margin-top: 25px;
                        
                        #add_chrome {
                            width: max-content;
                            padding: 10px 22px 10px 22px;
                            height: 48px;          
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            @include fontStyle(16px, normal, -0.4px , white, normal);
                        }
                    }
                }
                #highlight-animation {
                    width: 264px;
                    height: 300px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 20px 0 rgba(39, 43, 49, 0.05);
                    margin-top: 30px;
                }
            }

            @media only screen and (min-width : 500px) and (max-width: 1366px) {
                #highlight-animation.desktop {
                    width: 300px;
                    height: 225px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 20px 0 rgba(39, 43, 49, 0.05);
                    margin-top: 30px;
                }
            }
            /* Medium Devices, Desktops */
            @media only screen and (min-width : 1367px) {
                display: flex;
                justify-content: space-between;
                width: 1025px;
                height: 360px;
                margin-top: 160px;

                #highlight-text {
                    width: 400px;
    
                    #title-wrap {
                        @include fontStyle(48px, bold, -1.2px , $grayscale-1-900, normal);
                        margin-bottom: 32px;
                    }
                    #content-wrap {
                        @include fontStyle(18px, normal, -0.45px , $grayscale-1-800, 26px);
                        #highlighted {
                            width: max-content;
                            background-color: #ffff83;
                        }
    
                        
                    }
    
                    #button-wrap {
                        margin-top: 40px;
                        #add_chrome {
                            width: max-content;
                            padding: 15px 22px 15px 22px;
                            height: 48px;          
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            @include fontStyle(16px, normal, -0.4px , white, normal);
                        }
                    }
                }
                #highlight-animation {
                    width: 480px;
                    height: 360px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 20px 0 rgba(39, 43, 49, 0.05);
                    
                }
            }
        }

        #comment-section {
            /* Small Devices, Tablets */
            @media only screen and (min-width : 280px) {
                width: 256px;
                height: 304px;
                margin-top: 121px;
                display: flex;
                flex-direction: column-reverse;
                justify-content: center;
                align-items: center;

                #comment-circle {
                    position: absolute;
                    margin-top: -90px;
                    margin-left: -38px;
                    background-image: url('/src/images/landing-circle1.svg');
                    @include backgroundImage(227px, 236px);
                    z-index: 1;

                }
                #comment-text {
                    width: 350px;
                    height: 63px;
                    text-align: center;
                    #title-wrap {
                        @include fontStyle(24px, bold, -0.8px , $grayscale-1-800, normal);
                    }
                    #content-wrap {
                        margin-top: 16px;
                        @include fontStyle(14px, normal, -0.45px , $grayscale-1-800,24px);
                    }
                }
                #comment-animation {
                    width: 200px;
                    height: 227px;
                    margin-top: 54px;
                    z-index: 2;
                }
            }

            @media only screen and (min-width : 500px) and (max-width: 1366px) {
                #comment-animation.desktop {
                    width: 240px;
                    height: 195px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    z-index: 2;
                    margin-top: 50px;
                }
            }
            /* Medium Devices, Desktops */
            @media only screen and (min-width : 1367px) {
                display: flex;
                width: 840px;
                height: 378px;
                margin-top: 171px;
                align-items: center;
                flex-direction: row;
                justify-content: center;

                #comment-circle {
                    position: absolute;
                    background-image: url('/src/images/landing-circle1.svg');
                    @include backgroundImage(445px, 378px);
                    z-index: 1;
                    margin-top: 0;
                    left: 38%;

                }
                #comment-text {
                    width: 403px;
                    height: 85px;
                    position: relative;
                    left: 40px;
                    top: 60px;
                    text-align: left;
                    #title-wrap {
                        @include fontStyle(32px, bold, -0.8px , $grayscale-1-800, normal);
                    }
                    #content-wrap {
                        margin-top: 24px;
                        @include fontStyle(18px, normal, -0.45px , $grayscale-1-800,26px);
                    }
                }
                #comment-animation {
                    width: 400px;
                    height: 320px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    z-index: 2;
                    margin-top: 0;
                }
            }
            
        }

        #share-section {
            /* mobile */
            @media only screen and (min-width : 280px) {
                display: flex;
                flex-direction: column;
                width: 261px;
                height: 332px;
                margin-top: 120px;
                align-items: center;
                justify-content: center;
                
                #share-text {
                    width: max-content;
                    #title-wrap {
                        text-align: center;
                        @include fontStyle(24px, bold, -0.8px , $grayscale-1-800, normal);
                    }
                    #content-wrap {
                        margin-top: 24px;
                        text-align: center;
                        @include fontStyle(14px, normal, -0.45px , $grayscale-1-800,24px);
                    }
                }
                #share-animation {
                    margin-top: 24px;
                    width: 200px;
                    height: 227px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    background-color: white;
                    z-index: 2;
                }
                #share-circle {
                    position: absolute;
                    margin-left: 80px;
                    margin-top: 130px;
                    background-image: url('/src/images/landing-circle2.svg');
                    @include backgroundImage(234px, 206px);
                    z-index: 1;
                }

            }

            @media only screen and (min-width : 500px) and (max-width: 1366px) {
                #share-animation.desktop {
                    width: 240px;
                    height: 195px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    z-index: 2;
                    margin-top: 30px;
                }
            }
            /* Medium Devices, Desktops */
            @media only screen and (min-width : 1367px) {
                display: flex;
                flex-direction: row;
                width: 788px;
                height: 320px;
                margin-top: 132px;
                align-items: center;
                // justify-content: space-between;
                
                #share-text {
                    position: relative;
                    top: 75px; 
                    right: 40px;
                    height: 107px;
                    min-width: 348px;

                    #title-wrap {
                        text-align: right;
                        @include fontStyle(32px, bold, -0.8px , $grayscale-1-800, normal);
                    }
                    #content-wrap {
                        margin-top: 24px;
                        text-align: right;
                        @include fontStyle(18px, normal, -0.45px , $grayscale-1-800,26px);
                    }
                }
                #share-animation {
                    margin-top: 0;
                    width: 400px;
                    height: 320px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    background-color: white;
                    z-index: 2;
                }
                #share-circle {
                    position: absolute;
                    left: 53%;
                    margin-top: 0;
                    background-image: url('/src/images/landing-circle2.svg');
                    @include backgroundImage(499px, 440px);
                    z-index: 1;
                }
            }
        }
        #features-section {
            @media only screen and (min-width : 280px) {
                display: flex;
                flex-direction: column;
                margin-top: 120px;
                .section-items + .section-items {
                    margin-top: 54px;
                }
                .section-items {
                    // position: relative;
                    height: 96px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    // justify-content: center;
                    .item-icon {
                        @include backgroundImage(80px, 80px);
                    }
                    
                    .item-title {
                        margin-left: 24px;
                        height: 22px;
                        display: flex;
                        align-items: center;
                        white-space: pre;
                        vertical-align: middle;
                        @include fontStyle(18px, bold, -0.5px , $grayscale-1-800, normal);
                    }

                    .item-content {
                        // width: 216px;
                        margin-top: 16px;
                        margin-left: 24px;
                        @include fontStyle(14px, normal, -0.4px , $grayscale-1-800,24px);
                    }
                }
            }
            @media only screen and (min-width : 1025px) {
                height: 248px;
                display: flex;
                flex-direction: row;
                &.top {
                    margin-top: 160px;
                }
                &.bottom {
                    margin-top: 80px;
                }
                
                .section-items + .section-items {
                    margin-left: 148px;
                    margin-top: 0;
                }
                .section-items {
                    position: relative;
                    height: 248px;
                    min-width: 280px;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    .item-icon {
                        @include backgroundImage(120px, 120px);
                    }
                    
                    .item-title {
                        margin-left: 0px;
                        margin-top: 24px;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        white-space: pre;
                        vertical-align: middle;
                        @include fontStyle(21px, bold, -0.5px , $grayscale-1-800, normal);
                    }

                    .item-content {
                        width: max-content;
                        margin-left: 0px;
                        margin-top: 16px;
                        @include fontStyle(16px, normal, -0.4px , $grayscale-1-800,24px);
                    }
                }
            }
            
        }

        #recommend-section {

            @media only screen and (min-width : 280px) {
                width: 100%;
                margin-top: 160px;
                @include column-flexbox();

                .recommend-text {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .title {
                        @include fontStyle(24px, bold, -0.8px , $grayscale-1-800, normal);
                        margin-bottom: 16px;

                    }
                    .content {
                        text-align: center;
                        @include fontStyle(14px, normal, -0.4px , $grayscale-600, normal);
                    }
                }
                
                #recommend-animation {
                    margin-top: 32px;
                    width: 360px;
                }
            }

            @media only screen and (min-width : 1367px) {
                width: 100%;
                margin-top: 240px;
                @include column-flexbox();

                .recommend-text {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .title {
                        @include fontStyle(32px, bold, -0.8px , $grayscale-1-800, normal);
                        margin-bottom: 24px;

                    }
                    .content {
                        text-align: center;
                        @include fontStyle(16px, normal, -0.4px , $grayscale-600, normal);
                    }
                }
                
                #recommend-animation {
                    margin-top: 80px;
                    width: 720px;
                }
            }
            

        }


        #linerhome-section {

            &.mobile {
                @media only screen and (min-width : 280px) {
                    // height: 629px;
                    margin-top: 40px;
                    margin-bottom: 80px;
                    .image {
                        width: 280px;
                        height: 509px;
                        border-radius: 16px;
                        border: 1px solid $grayscale-1-100;
                        box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    }
                }
    
                @media only screen and (min-width : 1367px) {
                    height: 765px;
                    margin-top: 0px;
                    margin-bottom: 0px;
                    .image {
                        width: 840px;
                        height: 525px;
                        border-radius: 16px;
                        box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    }
                }
            }

            &.desktop {
                @media only screen and (min-width : 280px) {
                    // height: 629px;
                    margin-top: 40px;
                    margin-bottom: 80px;
                    .image {
                        width: 280px;
                        height: 509px;
                        border-radius: 16px;
                        border: 1px solid $grayscale-1-100;
                        box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    }
                }
    
                @media only screen and (min-width : 1025px) {
                    height: 765px;
                    margin-top: 0px;
                    margin-bottom: 0px;
                    .image {
                        width: 840px;
                        height: 525px;
                        border-radius: 16px;
                        box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                    }
                }
            }
            
            
        }

        #linerhome-section.desktop {
            @media only screen and (min-width : 500px) and (max-width: 1024px) {
                height: 500px;
                margin-top: 0px;
                margin-bottom: 0px;
                .image {
                    width: 525px;
                    height: 325px;
                    border-radius: 16px;
                    box-shadow: 4px 8px 10px 0 rgba(39, 43, 49, 0.05);
                }
            }
        }

        #everywhere-section {
            @media only screen and (min-width : 280px) {
                width: 100%;
                height: max-content;
                // min-height: 1265px;
                background-color: $grayscale-1-50;
                display: flex;
                align-items: center;
                flex-direction: column;

                .everywhere-text {
                    margin-top: 40px;

                    text-align: center;
                    .title {
                        @include fontStyle(24px, bold, -0.8px , $grayscale-1-800, normal);
                    }
                    .content {
                        line-height: 24px !important;
                        margin-top: 24px;
                        @include fontStyle(14px, normal, -0.8px , $grayscale-600, normal);
                        
                    }
                }

                .everywhere-list {
                    margin-top: 40px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .section-items + .section-items {
                        margin-top: 40px;
                    }

                    .section-items {
                        width: 285px;
                        text-align: center;
                        // height: 331px;
                        .item-icon {
                            &#browser_extensions {
                                width: 285px;
                                height: 219px;
                                margin-left: 18px;
                            }
                            &#liner_mobile_apps, &#ocean_our_mb {
                                height: 219px;
                                margin-left: 46px;
                            }
                        }
                        .item-title {
                            text-align: center;
                            display: flex;
                            justify-content: center;
                            width: 280px;
                            @include fontStyle(18px, bold, -0.5px , $grayscale-1-800, normal);
                        }
                        .item-content {
                            margin-top: 8px;
                            text-align: center;
                            display: flex;
                            justify-content: center;
                            align-items: flex-start;
                            width: 280px;
                            @include fontStyle(14px, normal, -0.4px , $grayscale-1-800, 24px);
                        }

                        .item-buttonwrap {
                            margin-top: 24px;
                            margin-bottom: 40px;
                            
                            .button-container {
                                display: flex;
                            }
                            
                            &#ocean {
                                margin-top: 24px !important;
                            }

                            a.extension {
                                width: 280px;
                                padding: 10px 12px 11px 12px;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            
                            button.apple, button.android {
                                width: 132px;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-right: 16px;
                            }

                            a, button {
                                &:hover {
                                    background-color: $grayscale-1-100;
                                }
                            }

                            .app-icon {
                                margin-right: 7px;
                                &#apple {
                                    display: inline-flex;
                                    background-image: url('/src/images/apple.svg');
                                    width: 14px;
                                    height: 16px;
                                }
                                &#android {
                                    display: inline-flex;
                                    width: 20px;
                                    height: 12px;
                                    background-image: url('/src/images/android.svg');
                                }
                            }

                            .button-content {
                                @include fontStyle(14px, normal, -0.4px , $grayscale-1-700, normal);
                            }
                            
                        }

                        .item-footer {
                            display: none;
                            
                        }
                        .QRcode-wrapper {
                            display: none;
                        }
                    }
                }
            
            }
            @media only screen and (min-width : 1025px) {
                width: 100%;
                min-height: 690px;
                background-color: $grayscale-1-50;
                display: flex;
                align-items: center;
                flex-direction: column;

                .everywhere-text {
                    margin-top: 80px;
                    text-align: center;

                    .title {
                        
                        @include fontStyle(32px, bold, -0.8px , $grayscale-1-800, normal);
                    }
                    .content {
                        
                        line-height: 24px !important;
                        margin-top: 24px;
                        @include fontStyle(16px, normal, -0.8px , $grayscale-600, normal);
                        
                    }
                }

                .everywhere-list {
                    
                    margin-top: 64px;
                    width: 814px;
                    height: 509px;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;

                    .section-items + .section-items {
                        margin-left: 24px;
                        margin-top: 0px;
                    }

                    .section-items {
                        width: 285px;
                        height: 434px;
                        text-align: left;
                        .item-icon {
                            &#browser_extensions {
                                width: 285px;
                                height: 219px;
                                margin-left: 0px;
                            }
                            &#liner_mobile_apps, &#ocean_our_mb {
                                // width: 171px;
                                height: 219px;
                                margin-left: 46px;
                            }
                        }
                        .item-title {
                            height: 62px;
                            text-align: left;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            @include fontStyle(21px, bold, -0.5px , $grayscale-1-800, normal);
                        }
                        .item-content {
                            margin-top: 12px;
                            height: 48px;
                            display: flex;
                            text-align: left;
                            align-items: flex-start;
                            justify-content: flex-start;
                            @include fontStyle(16px, normal, -0.4px , $grayscale-1-800, 24px);
                        }

                        .item-buttonwrap {
                            margin-top: 43px;
                            margin-bottom: 0px;
                            .button-container {
                                display: flex;
                            }
                            
                            &#ocean {
                                margin-top: 24px !important;
                            }

                            a.extension {
                                width: max-content;
                                padding: 10px 12px 11px 12px;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            
                            button.apple {
                                width: 71px;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-right: 16px;
                            }
                            button.android {
                                width: 114px;
                                height: 40px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }

                            a, button {
                                &:hover {
                                    background-color: $grayscale-1-100;
                                }
                            }

                            .app-icon {
                                margin-right: 7px;
                                &#apple {
                                    display: inline-flex;
                                    background-image: url('/src/images/apple.svg');
                                    width: 14px;
                                    height: 16px;
                                }
                                &#android {
                                    display: inline-flex;
                                    width: 20px;
                                    height: 12px;
                                    background-image: url('/src/images/android.svg');
                                }
                            }

                            .button-content {
                                @include fontStyle(16px, normal, -0.4px , $grayscale-1-700, normal);
                            }
                            
                        }

                        .item-footer {
                            display: block;
                            margin-top: 16px;
                            text-decoration: underline;
                            a {
                                @include fontStyle(14px, normal, -0.35px , $grayscale-1-500, normal);
                                &:visited {
                                    color: $grayscale-1-500;
                                }
                            }
                            
                        }

                        .QRcode-wrapper {
                            display: block;
                            position: absolute;
                            background-color: white;
                            width: 200px;
                            height: 210px;
                            border-radius: 8px;
                            box-shadow: 0 10px 20px 0 rgba(39, 43, 49, 0.1);
                            border: solid 1px $grayscale-1-100;
                            margin-top: 8px;

                            .title-section, .email-section {
                                margin-top: 16px;
                                margin-left: 20px;
                                span {
                                    @include fontStyle(14px, bold, -0.35px , $grayscale-1-500, normal);
                                }

                                .form {
                                    margin-top: 16px;
                                    input {
                                        width: 188px;
                                        height: 32px;
                                        border-radius: 8px;
                                        background-color: $grayscale-1-50;
                                        &::-webkit-input-placeholder { 
                                            opacity: 0.3 !important; 
                                        }
                                        padding-left: 16px;
                                        @include fontStyle(14px, normal, normal, $grayscale-2-800, normal);
                                    }
                                    button {
                                        margin-left: 16px;
                                        @include fontStyle(14px, bold, normal, $primary-500, normal);
                                    }
                                }
                            }
                            .qrcode-section {
                                width: 100%;
                                margin-top: 16px;
                                display: flex;
                                justify-content: center;
                                .qrcode-img {
                                    width: 120px;
                                    height: 120px;
                                    border-radius: 4px;
                                }
                            }
                            

                            
                        }
                    }
                }
            }
            
        }


        #signup-section {
            width: 100%;   
            background-color: $primary-50;
            display: flex;
            flex-direction: column;
            align-items: center;

            @media only screen and (min-width : 280px) {
                #signup-container {

                    .info-container, .form-container {
                        width: 100%;
                    }

                    .info-container {
                        margin-bottom: 32px;
                        text-align: center;
                        .title {
                            margin-top: 40px;
                            @include fontStyle(24px, bold, -0.8px, $primary-600, normal);
                        }
                        .content {
                            margin-top: 16px;
                            @include fontStyle(14px, normal, normal, $primary-600, normal);
                        }
                    }

                    .liner-signinup-section {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    
                }
            }

            @media only screen and (min-width : 1025px) {
                #signup-container {
                    height: 578px;
                    display: flex;
                    .info-container, .form-container {
                        width: 400px;
                    }
                    .info-container {
                        text-align: left;
                        .title {
                            margin-top: 230px;
                            @include fontStyle(32px, bold, -0.8px, $primary-600, normal);
                        }
                        .content {
                            margin-top: 40px;
                            @include fontStyle(20px, normal, normal, $primary-600, normal);
                        }
                    }
                    .form-container {
                        margin-left: 40px;
                        margin: auto;
                        width: 400px;
                    }

                    .liner-signinup-section {
                        display: block;
                    }
                }
            }
            .email-login {
                display: flexbox;
                flex-direction: column;
                align-items: center;
                position: relative;
                

                .email-container, .password-container, .name-container {
                    @media only screen and (min-width : 280px) { 
                        width: 280px;
                    }
                    @media only screen and (min-width : 1025px) { 
                        width: 100%
                    }
                    position: relative;
                    text-align: center;
                    .email, .password, .name {
                        line-height: 1.5;
                    }
                    .view {
                        position: absolute;
                        width: 18px;
                        height: 13px;
                        right: 16px;
                        top: 16px;
                    }
                }

                .email-container + .password-container {
                    margin-top: 8px;
                }
                
                .password-container + .name-container {
                    margin-top: 8px;
                }
            }

            .social-login {
                display: flexbox;
                flex-direction: column;
                align-items: center;

                a.google-login {
                    height: 48px;
                    margin-bottom: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: rgba(255, 255, 255, 0.7);
                    &:hover {
                        background-color: white;
                    }
                    @media only screen and (min-width : 280px) { 
                        width: 280px;
                    }
                    @media only screen and (min-width : 1025px) { 
                        width: 100%;
                    }

                    .google {
                        background-image: url('/src/images/google-login.svg');
                        @include backgroundImage(20px, 20px);
                        margin-right: 16px;
                        
                    }
                    span {
                        @include Montserrat();
                        font-size: 16px;
                        font-weight: 500;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: normal;
                        letter-spacing: -0.4px;
                        color: $grayscale-600;
                    }
                    
                }
            }

            .border {
                display: flex;
                align-items: center;
                margin: 24px 0;

                .line {
                    
                    @media only screen and (min-width : 280px) { 
                        width: 108px;
                    }
                    @media only screen and (min-width : 1025px) { 
                        width: 177px;
                    }
                    border-bottom: solid 1px #b2ebe9;
                    
                }

                .or {
                    display: block;
                    @include Montserrat();
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: normal;
                    letter-spacing: -0.35px;
                    text-align: center;
                    color: #b2ebe9;
                    margin: 0 16px;
                    width: 30px;
                }
            }

            input {
                height: 48px;
                padding: 14px 16px;
                border-radius: 8px;
                opacity: 0.7;
                background-color: white;
                &:focus {
                    opacity: 1;
                }
                @include Roboto();
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.5;
                letter-spacing: normal;
                color: $grayscale-2-800;
                @media only screen and (min-width : 280px) {
                    width: 280px;
                }
    
                @media only screen and (min-width : 1025px) { 
                    width: 100%;
                }
            }
    
            input:-webkit-autofill.error,
            input:-webkit-autofill.error:hover, 
            input:-webkit-autofill.error:focus {
                -webkit-box-shadow: 0 0 0 30px #fdeeed inset !important;
            }
            
    
            input::placeholder {
                opacity: 0.3;
            }
            
            input.error {
                background-color: #fdeeed !important;
            }
    
            .caution-message {
                @include Montserrat();
                font-size: 14px;
                font-weight: 500;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.2;
                letter-spacing: -0.35px;
                text-align: right;
                color: $negative;
                position: absolute;
                right: 16px;
                top: 16px;
                background-color:#fdeeed;
                padding-left: 8px;
                padding-right: 8px;
                z-index: 2;
                height: 20px;
            }
    
            .signup-btn {
                height: 48px;
                margin: 16px 0 40px 0;
                @include Montserrat();
                font-size: 16px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: -0.4px;
                display: flex;
                align-items: center;
                justify-content: center;
    
                @media only screen and (min-width : 280px) {
                    width: 280px;
                }
                @media only screen and (min-width : 1025px) { 
                    width: 100%;
                }
            }



            


        }


        #reviews-section {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            @media only screen and (min-width : 280px) {
                height: 352px;
                margin-bottom: 120px;

                .outer-wrap {
                    width: 280px;
                }

                .review-container {
                    &.top {
                        text-align: left;
                        margin-bottom: 64px;
                        position: relative;
                        .back-circle {
                            position: absolute;
                            left: 0;
                            margin-top: -14px;
                            margin-left: -40px;
                            background-image: url('/src/images/landing-circle3.svg');
                            @include backgroundImage(224px, 204px);
                            z-index: 1;
                            
                        }
                    }
                    &.bottom {
                        text-align: right;
                        position: relative;
                        .back-circle {
                            position: absolute;
                            margin-top: -19px;
                            right: -27px;
                            background-image: url('/src/images/landing-circle4.svg');
                            @include backgroundImage(240px, 203px);
                            z-index: 1;
                        }

                    }
                }
                .content {
                    @include fontStyle(14px, normal, -0.5px , $grayscale-1-800, 1.4);
                }
                .author {
                    .name {
                        margin-top: 24px;
                        @include fontStyle(14px, bold, -0.45px , $grayscale-1-800, 1.33);
                    }
                    .job {
                        margin-top: 4px;
                        @include fontStyle(14px, 500, -0.45px , $grayscale-1-800, 1.33);
                    }
                }

            }

            @media only screen and (min-width : 1025px) { 
                height: 516px;
                margin-bottom: 160px;

                .outer-wrap {
                    width: 840px;
                }
                .review-container {
                    &.top {
                        text-align: left;
                        margin-bottom: 18px;
                        position: relative;
                        .back-circle {
                            position: absolute;
                            left: 0;
                            margin-top: -49px;
                            margin-left: -105px;
                            background-image: url('/src/images/landing-circle3.svg');
                            @include backgroundImage(445px, 378px);
                            z-index: 1;
                            
                        }
                    }
                    &.bottom {
                        text-align: right;
                        position: relative;
                        .back-circle {
                            position: absolute;
                            margin-top: -26px;
                            right:0;
                            background-image: url('/src/images/landing-circle4.svg');
                            @include backgroundImage(364px, 308px);
                            z-index: 1;
                        }

                    }
                }
                .content {
                    @include fontStyle(20px, normal, -0.5px , $grayscale-1-800, 1.4);
                }
                .author {
                    .name {
                        margin-top: 40px;
                        @include fontStyle(18px, bold, -0.45px , $grayscale-1-800, 1.33);
                    }
                    .job {
                        margin-top: 7px;
                        @include fontStyle(18px, 500, -0.45px , $grayscale-1-800, 1.33);
                    }
                }

            }

            
        }
    }
    // Footer
    &-footer {
        @media only screen and (min-width : 280px) {
            width: 280px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 80px;
            margin-bottom: 40px;

            .outer-container {
                width: 100%;
                
            }

            .link-section {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 40px;
            }

            .link-container {
                width: 180px;
            }
            .label {
                @include fontStyle(14px, bold, normal , $grayscale-600, normal);
                margin-bottom: 13px;
            }
            .link-content {
                @include fontStyle(14px, normal, normal , $grayscale-600, normal);
                a {
                    color: $grayscale-600;
                    &:hover {
                        color: $grayscale-1-700;
                    }
                }
            }
            .link-content + .link-content {
                margin-top: 8px;
            }

            .logo-container {
                margin-top: 40px;
                display: flex;
                justify-self: flex-start;
                @include fontStyle(12px, bold, normal , $grayscale-1-300, normal);
                .logo {
                    background-image: url('../browslylogo.png');
                    width: 16px;
                    height: 16px;
                    margin-right: 8px;
                }
            }
            
        }

        @media only screen and (min-width : 360px) {
            width: 360px;
            margin-left: 40px;
        }

        @media only screen and (min-width : 480px) {
            width: 400px;
        }

        @media only screen and (min-width : 1025px) {
            width: 900px;
            margin-top: 80px;
            margin-bottom: 40px;

            .outer-container {
                display: flex;
                justify-content: space-between;
            }
            .link-container {
                width: 180px;
            }
            .label {
                @include fontStyle(14px, bold, normal , $grayscale-600, normal);
                margin-bottom: 13px;
            }
            .link-content {
                @include fontStyle(14px, normal, normal , $grayscale-600, normal);
                a {
                    color: $grayscale-600;
                }
            }
            .link-content + .link-content {
                margin-top: 8px;
            }

            .logo-container {
                margin-top: 80px;
                display: flex;
                @include fontStyle(12px, bold, normal , $grayscale-1-300, normal);
                .logo {
                    background-image: url('../browslylogo.png');
                    width: 16px;
                    height: 16px;
                    margin-right: 8px;
                }
            }
        }
        
    }
}

.sidebar-wrapper {
    @media only screen and (min-width : 280px) {
        
        &.hide {
            visibility: hidden;
        }
        width: 100%;
        min-height: 120%;
        background-color: $white;
        position: fixed;
        overflow: auto;
        bottom: 0;
        right:0;
        top: 0;
        z-index: 99;
        visibility: inherit;
        
        input {
            background-color: $grayscale-1-50 !important;
        }
        
        .sidebar-headbutton {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 8px 2% 0 6%;
            align-items: center;
            .close-button {
                @include iconButton();
                position: relative;
                background-image: url('/src/images/close-light.svg');
                z-index: inherit;
            }
            .sidebar-liner-logo {
                background-image: url('/src/images/liner-desktop.svg');
                @include backgroundImage(84px, 16px);
                position: relative;
                z-index: 1;
                
            }
        }
        
    }
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 1367px) {
        &.hide {
            transform: translateX(100%);
        }
        width: 640px;
        box-shadow: -10px 2px 10px 0 rgba(39, 43, 49, 0.05);
        background-color: $grayscale-1-50;
        justify-content: center;
        position: fixed;
        right:0;
        top: 0;
        z-index: 99;
        transform: translateX(0);
        display: flex;
    
        &#transition-effect {
            transition: all 0.2s linear;
        }
        
        input {
            background-color: white !important;
        }
    
        .close-button {
            @include iconButton();
            position: absolute;
            left:0;
            margin: 28px 0 0 28px;
            background-image: url('/src/images/close-light.svg');
            &:hover {
                width: 32px;
                height: 32px;
                background-color: $grayscale-1-100;
            }
        }
    }
}

// Upgrade page?? ???? ?? ??? ???
#appstore-section {
    @media only screen and (min-width : 280px) {
        padding: 48px 0 0 0;

        .title {
            font-size: 18px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: -0.45px;
            text-align: center;
            color: #33373d;
        }

        .appstore {
            width: 320px;

            h4 {
                text-align: center;
                margin: 0 auto;
                margin-bottom: 16px;
                width: 72px;
                height: 15px;
            }

            img {
                width: 100%;
            }
        }

        .title, .app-text .content {
            @include Montserrat();
        }

        .app-text {
            .content {
                display: none;
            }
        }

        .app-chart {
            margin-top: 32px;

            .image {
                position: relative;

                .chart {
                    width: 268px;
                    height: 190px; 
                    display: inline-block;
                    box-shadow: 4px 8px 20px 0 rgba(39,43,49,.05);
                    border-radius: 17px;
                    position: relative;
                    
                    img {
                        height: 190px; 
                    }
                }
            }

            .app-liner {
                width: 228px;
                height: 55px;
                box-shadow: 4px 8px 20px 0 rgba(39, 43, 49, 0.05);
                position: absolute;
                bottom: 46px;
                left: 90px;

                img {
                    width: 228px;
                    height: 55px;
                }
            } 
        }
    }

    @media only screen and (min-width : 1025px) {
        width: 100%;
        padding: 120px 0 0 0;

        .appstore {
            width: 840px; 
            margin: 0 auto; 
            text-align: center;

            h4 {
                width: 125px;
                height: 25px; 
                margin: 0 auto; 
                margin-bottom: 16px;

                img {
                    width: 100%;
                }
            }
        }

        .title, .app-text .content {
            @include Montserrat();
        }

        .app-text {
            .content {
                display: block;
            }
        }
        
        .title {
            font-weight:700;
            font-size: 32px;
            letter-spacing: -.8px;
            color: #33373d; 
            margin-bottom: 24px;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
        }
        
        .content {
            text-align: center;
            font-weight: 400; 
            font-size: 16px;
            letter-spacing: -.4px; 
            color: #787d86;
        }

        .app-text, .app-chart {
            width: 100%;
        }

        .app-chart {
            margin-top: 80px;

            .image {
                width: 100%; 
                height: 503px;
                position: relative;

                .chart {
                    width: 705px; 
                    height: 100%; 
                    position: absolute; 
                    left: 0; 
                    top: 0;
                    box-shadow: 4px 8px 20px 0 rgba(39,43,49,.05);
                    border-radius: 17px;

                    img {
                        height: 503px;
                    }
                }
            }

            .app-liner {
                width: 600px; 
                height: 146px; 
                position: absolute; 
                left: 240px; 
                bottom: 112px; 
                box-shadow: 4px 8px 20px 0 rgba(39,43,49,.05);  
                
                img {
                    width: 600px; 
                    height: 146px;     
                }
            }
        }
    }
    
}

// Upgrade page?? ???? ?? ??? ???
#users-section {
    @media only screen and (min-width : 280px) {
        width: 100%;
        height: 372px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .users-text {
            text-align: center;
            .title {
                @include fontStyle(18px, bold, -0.8px , $grayscale-1-800, normal);
            }
            .content {
                display: none;
            }
        }
        #users-image {
            margin-top: 44px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .company{
                @include backgroundImage(320px, 76px);
                height: auto;
            }
            .univ {
                @include backgroundImage(282px, 57px);
                height: auto;
            }
            
            .divider {
                width: 360px;
                margin-top: 24px;
                margin-bottom: 23px;
                height: 1px;
                border-top: solid 1px $grayscale-1-200;
            }
        }
    }
    @media only screen and (min-width : 1025px) {
        width: 100%;
        height: 881px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .users-text {
            text-align: center;
            .title {
                @include fontStyle(24px, bold, -0.8px , $grayscale-1-800, normal);
            }
            .content {
                margin-top: 24px;
                display: block;
                @include fontStyle(16px, normal, -0.8px , $grayscale-600, normal);
            }
        }
        #users-image {
            margin-top: 64px;
            width: 840px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .company{
                // width: 840px;
                @include backgroundImage(840px, 174px);
                // background-image: url('/src/images/company@3x.png');
            }
            .univ {
                @include backgroundImage(840px, 138px);
                // background-image: url('/src/images/univ@3x.png');
            }
            // .company, .univ {
            //     width: 840px;
            //     object-fit: contain;
            // }
            .divider {
                width: 400px;
                margin-top: 56px;
                margin-bottom: 55px;
                height: 1px;
                border-top: solid 1px $grayscale-1-200;
            }
        }
    }
}