/*Circl - style.css
Author: Parker Sherrill
Description: Main style sheet for circl landing page. 
Attempts to follow SMACSS guidelines: 
(Base)Elements, 
Layouts (indicated by l-selector), 
Modules, 
States (indicated by is-selector), 
and Themes. 
            

/*************************************************
            Elements
**************************************************/
html{
    font-size:10px;
    font-family: 'Roboto', sans-serif;
}

html, body{
    margin:0;
    padding:0;
    background-color: white;
}

p, img, a, body{
    font-size:1.6rem;
    box-sizing: border-box;
}

a{
    color:#000000;
    text-decoration: none;
    box-sizing: border-box;
}

p, h1, h2, h3, h4, h5{
    padding:0;
    margin:0;
}

a:hover{
    color:rgb(136, 136, 136);
}


div{
    box-sizing: border-box;
}

img{
    max-height: 100%;
    max-width: 100%;
}

@media (min-width: 769px){
    p, a, img{
        font-size:2rem;
    }  
}

/*************************************************
            Modules
**************************************************/

/*Navbar*/
.l-navbar{
    position:sticky;
    top:0;
    left:0;
    min-height: 4rem;
    width: 100%;
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 4rem;
    z-index: 100;
}

.l-nav-links{
    display:none;
    position: fixed;
    top:4rem;
    width: 100%;
    height: 100vh;
    background-color: white;
}

.mobile-nav-button{
    align-self: center;
    padding-left:1rem;
}

.mobile-nav-button i{
    font-size:2.4rem;
}

.l-nav-links.mobilebutton-is-pressed{
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.l-nav-links a{
    padding:2rem;
    padding-left: 1rem;
    text-align: left;
}

.l-nav-links a.is-active{
    color:#000000;
    background-color: #8ff524;
}

.l-navbar .logo{
    height: 60%;
    align-self: center;
    text-align: center;
}

.logo img{
    max-height: 100%;
}

.l-download-link{
    width: 100%;
    padding-right: 1rem;
    align-self: center;
    text-align: right;
}

.is-desktop{
    display: none;
}

@media (min-width:769px) {
    .l-navbar{
        grid-template-columns: 10% 50% 40%;
        text-align: center;
    }
    
    .l-nav-links{
        grid-column: span 2;
        position: relative;
        top:0;
        height: 100%;
        align-content: center;
        padding-right: 6rem;
    }

    .is-mobile{
        display:none;
    }
    
    .is-desktop{
        display: inline;
    }


    .mobile-nav-button{
        display:none;
    }

    .l-nav-links a{
        padding: 0.5rem;
        text-decoration: underline 0.15em rgba(0, 0, 0, 0);
        transition: text-decoration-color 600ms, color 600ms;
        font-size: 1.2rem;
        align-self: center;
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    .l-nav-links a.is-active{
        text-decoration: underline 0.15em;
        background-color: inherit
    }

    .l-nav-links, .l-nav-links.mobilebutton-is-pressed{
        display: flex;
        justify-content: right;
    }

    .nav-download-button{
        background-color: #8ff524;
        border-radius: 2rem;
    }
}

/*Modals*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    position: relative;
    top:35vh;
    margin: auto;
    display: block;
    max-height: 300px;
    max-width: 300px;
}

/* The Close Button */
.close {
    position: absolute;
    top: 1.5rem;
    right: 3.5rem;
    color: #f1f1f1;
    font-size: 4rem;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/*Front Page*/
.l-front{
    height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    text-align: center;
}


.l-front-screenshot{
    float:left;
    width: 35%;
}

.l-front-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:5rem;
}

/*Download Buttons*/
.download-button{
    font-size: 2rem;
    text-align: center;
    width: 16rem;
    margin:auto;
    padding:1.2rem;
}

.download-button-a{
    margin-top: 4rem;
    margin-bottom: 4rem;
}

/*Download Buttons*/
.l-appstore-buttons{
    width: 100%;
    display: flex;
    gap:6%;
}

.appstore-button{
    width: auto;
    margin:auto;
}

.appstore-button img{
    text-align: center;
    margin:auto;
    height: inherit;
   
}

@media (min-width:769px) {
    .l-front > * {
        max-width: min(90%, 769px);
        margin: auto;
    }
    
    .l-front-right{
        padding-left: 6rem;
    }

    .l-appstore-buttons{
        width: 70%;
    }
}


/*Body*/
.l-body{
    min-height: 100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    
}

/*Legal documents*/
.l-legal{
    max-width: 768px;
    padding: 2rem 2rem 2rem 2rem;
    margin: auto;
    margin-bottom: 5rem;
    margin-top: 5rem;
}

.l-legal p{
    padding: 2rem 0 1rem 0;
    color:rgb(43, 43, 43);
    font-size: 1.5rem;
}
.l-legal ol{
    margin-top:1rem;
}
.l-legal li{
    font-size: 1.5rem;
    color:rgb(43, 43, 43);
    margin-bottom:1rem;
}

.l-legal a {
    font-size: 1.5rem;
    color:#996E6E;
    text-decoration-color:#996E6E;
    text-decoration: underline;
}

@media (min-width: 769px){
        
    /*Legal documents*/
    .l-legal{
        padding: 0;
    }
}

.l-legal > h1 {
    margin-top:4rem;
    font-size: 2.4rem;
}

.l-legal > h2 {
    margin-top:2rem;
    font-size: 1.8rem;
}

/*Features & Screenshots*/
.l-features{
    align-self: center;
    height: 100%;
    width: 100%;
    padding:5rem;
}

.l-features > button{
    display: inline-block;
    position: relative;
    border-radius: 100%;
    border: 0px;
    width: 5rem;
    height: 5rem;
}

.l-features > button > .fa-chevron-left{
    position: absolute;
    top:20%;
    left:23%;
    font-size: 3rem;
    text-align: center;
    color:black;
}

#gallery-button-right{
    margin-left:2rem;
    
}

.l-features > button > .fa-chevron-right{
    position: absolute;
    top:20%;
    left:35%;
    font-size: 3rem;
    text-align: center;
    color:black;
}

.feature{
    width: 100%;
    height: 100%;
    display:flex;
    justify-items: space-around;
    justify-content: center;
    
    text-align: center;
}

.feature > .feature-desc{
    display: flex;
    flex-direction: column;
    justify-content: left;
    min-height: 6rem;
    width:100%;
    margin-top:5rem;
    margin-bottom:3rem;
    font-size: 2.2rem;
}

.feature > .img-container{
    align-content: center;
    margin:auto;
    width: 80%;
    height: 60vh;
}

.img-container img{
    max-width: 100%;
    height: auto;
}
@media (min-width: 769px){
    .l-features{
        width: min(90%, 769px);
        height:50%;
    }

    .feature > .feature-desc{
        margin-top:4rem;
        font-size: 3.2rem;
    }
    
}

/*feature gallery counter*/
.l-gallery-counter{
    padding-left: 30%;
    align-content: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    width: 70%;
    margin-top:2rem;
}

.gallery-counter-container{
    align-content: center;
    justify-content: center;
    margin: .5rem .9rem 0 .9rem;
    height: 1rem;
    width: 100%;
    background-color: rgb(207, 207, 207);
}

.gallery-counter{
    justify-content: center;
    align-content: center;
    height: 100%;
    transition: width 100ms;
}

#gallery-page{
    justify-content: center;
    align-content: center;
    min-width: 2rem;
}

@media (min-width: 769px){
    .gallery-counter-container{
        width: 50%;
    }
}


/*Footer*/
.l-foot{
    min-height: 4rem;
    display:flex;
    justify-content: center;
    gap:2rem;
    padding:1rem;
}

/***Contact and Business Pages Only***/
@media (min-width: 769px){
    .l-contact{
        padding:10rem;
    }

    .l-business{
        padding:10rem;
    }
}


/*Forms*/
.form{
    position: relative;
    margin:auto;
    width: 80%;
    padding:0;
    height: 50%;
}

/*Form submission code pulled from https://www.bram.us/2020/11/04/preventing-double-form-submissions/*/
form .form-submission-cover{
    display:none;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    content: '';
    background: rgba(0,0,0,0.2) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K') no-repeat 50% 50% / 1em 1em;
}



.is-submitting .form-submission-cover{
    display: block;
    z-index: 20;
}

@media (min-width:769px) {
    .form{
        width: min(70%, 700px);
    }
}

label {
    font-size: 1.6rem;
}
input[type=text], input[type=tel], select, textarea {
    width: 100%;
    padding: 12px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 3rem;
    resize: vertical;
    font-size: 1.6rem;
}

input[type=text]::placeholder, input[type=tel]::placeholder, select::placeholder, textarea::placeholder {
    color:rgb(175, 175, 175);
}

input[type=submit] {
    margin-top:3rem;
    border: 1px solid rgb(109, 109, 109);
    background-color: #8ff524;
    padding: 12px 20px;
    width: 100%;
    border-radius: 2rem;
    cursor: pointer;
    color: rgb(36, 36, 36);
    z-index: 30;
}

input[type=submit]:hover {
    background-color: #8ff524;
}

/*Short fade in and fade out animation*/
@keyframes fade-in-out {
    0%   { opacity:0; }
    50% { opacity:1; }
    100%   { opacity:0; }
}
@-o-keyframes fade-in-out{
    0%   { opacity:0; }
    50% { opacity:1; }
    100%   { opacity:0; }
}
@-moz-keyframes fade-in-out{
    0%   { opacity:0; }
    50% { opacity:1; }
    100%   { opacity:0; }
}
@-webkit-keyframes fade-in-out{
    0%   { opacity:0; }
    50% { opacity:1; }
    100%   { opacity:0; }
}

/*Fade in and fade out class*/
.fade-in-out {
    -webkit-animation: fade-in-out 10s;
    -moz-animation: fade-in-out 10s;
    -o-animation: fade-in-out 10s;
    animation: fade-in-out 10s;
}

/*Invisible for fade animations*/
.invisible{
    opacity:0;
}
  


/*Padding and Margins*/
.padding-bot-5{
    padding-bottom: 5rem;
}

.padding-top-2{
    padding-top:2rem;
}

.padding-2{
    padding:2rem;
}

.margin-top-4{
    margin-top:4rem;
}

/*************************************************
            States (not directly related to a module)
**************************************************/
@media (min-width:769px) {
    
    /*class is-mobile only displays if the device is-mobile*/
    .is-mobile{
        display:none;
    }
}


/*************************************************
            Themes
**************************************************/
.montserrat{
    font-family: 'Montserrat', sans-serif;
}

.montserrat *{
    font-family: 'Montserrat', sans-serif;
}

.roboto{
    font-family: 'Roboto', sans-serif;
}

.roboto *{
    font-family: 'Roboto', sans-serif;
}

.nav-theme{
    background-color: white;
    color:#000000;
    font-family: 'Montserrat', sans-serif;
}

.nav-theme a{
    color:#000000;
}

.front-theme{
    color:#000000;
    background-image: url("../images/front.png");
}

.front-theme h4{
    font-size: 3rem;
}

.front-theme h3{
    font-size: 5rem;
}

.front-theme .svg-icon{
    width: 2.7rem;
    height: 2.7rem;
    display: inline;
}

.gallery-counter-theme{
    background-color: #8ff524;
}

.foot-theme{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
}

.foot-theme a{
    font-family: 'Montserrat', sans-serif;
    color:#000000;
    font-size: 1.5rem;
}

.foot-theme a:hover{
    color:#8ff524;
}

.button-theme{
    background-color:#8ff524;
    border-radius: 10rem;
}

@media (min-width:769px) {
    .nav-theme{
        background-color: white;
    }

    .nav-theme a:hover{
        color:#8ff524;
        text-decoration-color:#8ff524;
    }
}
/*shadow temporarily disabled
.shadow{
    box-shadow: 0px 0px 10px rgb(46, 46, 46, 0.5);
}
*/

.centered-text{
    text-align: center;
}


/*Center stuff vertically inside of div element*/
.v-centered-in-div{
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.is-hidden{
    display: none;
}