/* 
/
/
/
/
/
/  CSS RESET, TOP LEVEL CSS  */
@media all{
    
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    html{
        width: 100%;
        -webkit-text-size-adjust: 100%;
        background: white;
    }
    body{
        width: 320px;
    }
    
    /* 
    /
    /
    /
    /  HOME PAGE */
    html#home{
        height: 80vh;
        overflow: hidden;
        position: fixed;
    }
    html#home body{
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    /* "horizontal orientation" and "large screen" scroll fix */
    @media (orientation : landscape), (min-width:415px){
        html#home{
            height: auto;
            overflow: auto;
            position: static;
        }
        html#home body{;
            height: auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: auto;
        }
    }
    
}


/* 
/
/
/
/
/
/  TYPOGRAPHY  */
@media all{
    
    h1,.h1,h2,.h2,h3,.h3,p,.p,a,.a,input,.button{
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        color: #12314c;
        font-weight: normal;
    }
    .superH1{
        font-size: 70px;
        line-height: 3.5rem;
        letter-spacing: -2px;
        font-weight: 800;
        margin-top: 0.05em;
        margin-left: -0.03em;
    }
    h1,.h1{
        font-size: 40px;
        line-height: 2.125rem;
        letter-spacing: 0px;
        font-weight: 800;
        margin-left: -0.03em;
    }
    h2,.h2{
        font-size: 16px;
        line-height: 1.1875;
        letter-spacing: 0px;
        font-weight: 300;
    }
    h3,.h3{
        font-size: 16px;
        line-height: 1.1875;
        letter-spacing: 0px;
        font-weight: 300;
    }
    p,.p,a,.a{
        font-size: 13.5px;
        line-height: 1.15rem;
        letter-spacing: 0px;
        font-weight: 300;
        text-decoration: none;
    }
    ::selection{
        background-color: #dedede;
    }
    
}

/* 
/
/
/
/
/
/  HEADER  */
@media all{
    
    header{
        display: flex;
        justify-content: space-between;
        
        margin: 0.75em 2em 1.5em 2em;
        padding-bottom: 0.75em;
        
        border-bottom: 1px solid #dedede;
    }
    #siteIdentifier{
        width: 110px;
        height: 25px;
        
        margin-bottom: 0px;
        margin-top: 2px;
        float: left;
        
        display: flex;
        justify-content: space-between;
        
        border: none;
    }
    #siteIdentifier > img {
        width: 100%;
    }
    nav{
        display: flex;
        justify-content: space-evenly flex-end;
        margin-top: 1px;
        margin-bottom: -1px;
    }
    nav a {
        font-size: 12px;
        margin: 0.33em 0em 0.33em 1.5em;
        margin-top: 0.5em;
    }
    
}

/* 
/
/
/
/
/
/  MAIN  */
@media all{
    
    main{
        margin: 0em 2em;
    }
    .separator{
        margin: 3em 0em;
    }
    hr {
        margin-bottom: 0.4em;
        border: 0.5px solid #f7911e;
        background: transparent;
        color: transparent;
    }
    
    /* 
    /
    /
    /
    /  FORM  */
    @media all{
        
        form{
            margin-top: 2rem;
        }
        .routeOptions form{
            margin-top: 0px;
        }
        
        /* input */
        input{
            width: 100%;
            height: 33px;
            font-size: 13.5px;
            
            background: transparent;
            border: none;
            text-overflow: ellipsis;
            border-bottom: 1px solid #dedede;
            border-radius: 0px;
        }
        input:focus, select:focus, textarea:focus, button:focus {
            outline: none;
        }
        input[type="text"]:focus {
            border-color: #f7911e;
        }
        input[type="text"]{
            font-weight: 800;
        }
        
        /* label input pair */
        .labelInputPair{
            padding-top: 0.375em;
            padding-bottom: 0.75em;
            margin-bottom: 0.375em;
            overflow: hidden;
        }
        .labelInputPair:first-of-type{
            border-bottom: 1px solid #dedede;
        }
        .labelInputPair:after {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #dedede;
            position: relative;
            top: 5px;
            left: 96%;
            content: '';
            display: inherit;
        }
        .filled:after{ 
            background-color: #64b56a; 
        }
        .unfilled:after{ 
            background-color: #ff6d46; 
        }
        .labelInputPair p{
            font-weight: 800;
            float: left;
        }
        .labelInputPair input{
            width: 60%;
            height: 50px;
            
            margin-top: -1.2em;
            margin-bottom: -1.5em;
            padding-left: 8%;
            
            border: none;
            font-weight: 400;
            float: left;
        }
        
        /* placeholder */
        ::-webkit-input-placeholder {
            color: #12314c;
            opacity: 0.5;
        }
        :-moz-placeholder { /* Firefox 18- */
            color: #12314c;
            opacity: 0.5;
        }
        ::-moz-placeholder {  /* Firefox 19+ */
            color: #12314c;
            opacity: 0.5;
        }
        :-ms-input-placeholder {  
            color: #12314c;
            opacity: 0.5;
        }
        
        /* input example text */
        .inputExample {
            font-size: 10px;
            color: #12314c;
            opacity: 0.66;
            margin-top: 0.25rem;
            margin-bottom: 0.5rem;
        }
        
        /* buttons */
        .button {
            width: calc(100% + 2rem);
            height: 40px;
            background: url('images/rightCaret.svg'), linear-gradient(to bottom,#dedede,#dedede);
            background-repeat: no-repeat;
            background-position: calc(100% - 1rem), 0;
            
            margin-top: 0.5rem;
            padding: 0em 0.85em;
            
            font-weight: 800;
            font-size: 17px;
            text-align: left;
            
            cursor: pointer;   
            
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            border: none;
            text-shadow: none;
        }
        .buttonColored {
            background: url('images/rightCaret.svg'), linear-gradient(to right, #ffbc00, #f7911e);
            background-repeat: no-repeat;
            background-position: calc(100% - 1rem), 0;
        }
        .button-list {
            width: calc(100% + 2rem);
            height: 40px;
            background: url('images/rightCaret.svg');
            background-repeat: no-repeat;
            background-position: calc(100% - 1rem);
            
            padding: 0em 0.85em;
            
            text-align: left;
            
            cursor: pointer;   
            
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            border: none;
            border-bottom: 1px solid #dedede;
            text-shadow: none;
        }
        .button-list.loading {
            color: rgba(18, 49, 77, 0.5);
            background: none;
            display: flex;
            align-items: center;
        }
        .routeOptions .button-list {
            padding: 0em 0em;
        }
        .button-walkingDirections {
            width: 100%;
            height: 40px;
            
            background: url('images/downCaret.svg'), linear-gradient(to bottom,#dedede,#dedede);
            background-repeat: no-repeat;
            background-position: calc(100% - 1rem), 0;
            
            padding: 0.66rem 1rem 0.66rem 1rem;
            margin-top: 1em;
            
            font-weight: 800;
            font-size: 17px;
            text-align: left;
            
        }
        .button-back {
            width: 105px;
            height: 40px;
            
            background: url('images/leftCaret.svg'), linear-gradient(to bottom,#dedede,#dedede);
            background-repeat: no-repeat;
            background-position: 1rem, 0;
            
            padding: 0.66rem 1rem 0.66rem 1rem;
            margin-left: -2rem;
            
            font-weight: 800;
            font-size: 17px;
            text-align: right;
            line-height: 0.5rem;
            
            position: absolute;
            top: 1px;
            outline: 1rem solid white;
        }
        header form {
            margin: 0px;
            height: 27px;
        }
        
        /* to hide elements */
        .hidden{
            display: none;
        }
        
        /* home page specific styles */
        .homeForm{
            margin-top: 2.75rem;
        }
        .homeForm .button{
            margin-top: 2rem;
        }
        
        /* check times specific styles */
        .routeOptionsStatement{
            opacity: 0.5;
            font-size: 12px;
            margin-top: 1em;
            line-height: 1.45em;
        }
        
    }
    
    /* 
    /
    /
    /
    /  DIRECTIONS PAGE  */
    @media all{
        
        .json{
            display: none;
            width: 0px;
            height: 0px;
        }
        
        /* step header */
        .stepHeader{
            background: rgba(255, 255, 255, 0.75);
            width: calc(100% + 4rem);
            margin-left: -2rem;
            padding: 0rem 2rem 1rem 2rem;
        }
        .stepHeader h2, .stepHeader h3{
            margin-top: 0.5rem;
        }
        
        /* route image */
        .routeImage {
            width: 320px;
            height: 320px;
            margin-left: -2rem;
            margin-top: -4rem;
            position: relative;
            z-index: -1;
            background: linear-gradient(0deg,#dfdfdf,#fff);
        }
        .routeImage img {
            width: 100%;
            height: 100%;
            color: transparent;
        }
        #stepContainer .routeImage{
            margin-top: -2rem;
        }
        .routeImage-Arrow {
            width: 100%;
            height: 100vw;
            margin-top: -100vw;

            background: url('images/backgroundArrow.svg');
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: 110%;

            position: relative;
            z-index: 0;
        }
        
        /* step data */
        .stepData{
            padding: 1rem 0rem;
            border-bottom: 1px solid #dedede;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .stepData > span{
            text-align: right;
            font-weight: 800;
            font-size: 30px;
            margin-left: 1rem;
            line-height: 0.9em;
        }
        
        /* walking directions */
        .walkingDirections{
            background-color: #dedede;
            padding: 0rem 1rem;
        }
        .walkingStep{
            padding: 0.5rem 0rem;
            border-bottom: 1px solid white;
        }
        .walkingStep > *{
            padding: 0.25rem;
        }
        .walkingDirectionsStatement {
            margin-top: 0.5rem;
            opacity: 0.5;
            padding-left: 1rem;
            font-size: 12px;
        }
        
        /* page ender */
        #pageEndContainer{
            background-color: white;
            padding-bottom: 22vh;
            margin-top: -1px;
        }
        
    }
        
    /* 
    /
    /
    /
    /  ABOUT PAGE, CONTACT PAGE  */
    @media all{
        .mainTextContainer p {
            margin-top: 1em;
        }
        .mainTextContainer h2 {
            margin-top: 2em;
        }
    }
    
    /* 
    /
    /
    /
    /  ERROR  */
    @media all{
        .error{
            background: #ff6d46;
            width: calc(100% + 4rem);
            margin-left: -2rem;
            margin-top: calc(-1.5em - 1px);
            padding: 0.33em 2em;
        }
        .error p{
            color: white;
            width: calc(100% - 4rem);
            font-size: 12px;
            line-height: 1rem;
        }
    }
    
}