@font-face {
    font-family: 'kindid';
    src: url('/g/kindidbold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'kindid';
    src: url('/g/kindidlight.ttf');
    font-weight: normal;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'kindid';
}

body {
    height: 100vh;
    overflow-y: scroll;
    overscroll-behavior-y: none;
}

/* a:link a:visited a:hover a:active { */
a:visited {
    /* display: inline; */
    margin: 0;
    padding: 0;
    color: '#f0f'
}

.icon_link {
    display:inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 0;
}

.crew_cert {
    width: auto;
    height: calc(14pt * 4);
    padding: 3.5pt;
    margin: 3.5pt;
    /* box-shadow: inset -12pt 12pt 12pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5); */
}

/* this exists to fix various mobile browser issues where the bg img does
   not scale correctly */

body:before {
    content: "";
    position: fixed;
    /* stretch a fixed position to the whole screen*/
    top: 0;
    height: 100vh;
    /* fix for mobile browser address bar appearing disappearing */
    left: 0;
    right: 0;
    z-index: -2;
    background: url("/g/bg.jpg") top left no-repeat;
    background-size: cover;
}

.content_div {
    border: 1px solid #d0d0d0;
    margin: 12pt;
    padding: 12pt;
    /* padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%; */
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 24pt;
    /* box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5); */
    box-shadow: inset -12pt 12pt 12pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
    text-align: center;
}

.index_heading {
    width: calc(100% - (12pt + 4% + 2px));
    border: 1px solid #d0d0d0;
    margin: 6pt;
    margin-bottom: 12pt;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 24pt;
    /* border: 1px solid red; */
    box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
}

.index_icon {
    width: 25%;
    /* height: auto;
    float: right; */
}

.index_logo {
    width: 75%;
}


/* menu bar */

@media all and (orientation: landscape) {
    .menu_nav {
        height: 24pt;
        width: 100%;
        z-index: 1;
        top: 0;
        left: 0;
        position: fixed;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .menu_items {
        display: inline;
        height: 100%;
        /* list-style-type: none; */
        /* width: 70vw; */
        /* height: 100%; */
        overflow: auto;
        /* vertical-align: text-bottom; */
        margin: 0;
        /* vertical-align: bottom; */
    }
    #menu_checkbox {
        /* border: 1px solid blue; */
        display: none;
    }
    .menu_label {
        /* border: 1px solid blue; */
        display: none;
    }
    .menu_item {
        height: 100%;
        display: inline;
        width: 10%;
        height: 100%;
        float: left;
        margin: 0;
        padding-top:2pt;
        padding-bottom:2pt;
        /* border:1px solid black; */
        /* vertical-align: bottom; */
    }
    .menu_item_small_img {
        height: 24pt;
    }
    .menu_item_small_a {
        margin-right: 6pt;
        height: 100%;
        /* float: right; */
    }
    .social_buttons {
        height: 100%;
        float: right;
        /* border: 1px solid red;
        margin: -1px; */
    }
    .page_content {
        padding-top: 24pt;
        padding-bottom: 16pt;
        width: 100%;
    }
    .cornercut {
        position: fixed;
        top: 24pt;
        width: 70%;
        height: auto;
        opacity: 50%;
        z-index: -1;
    }

    /* .app_page_top_flex {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr
    }
    .app_page_word_cloud {
    }
    .app_page_video {
    }
    .app_guts_video {
    }
    .app_page_stores {
    } */

    
    .app_page_word_cloud {
        float: left;
        width: calc(20% - 6pt);
        margin-right: 6pt;
        text-align: center;
    }
    .app_page_video {
        width: calc(60% - 12pt);
        margin-left: 6pt;
        margin-right: 6pt;
        float: left;
    }
    .app_guts_video {
        width: 100%;
        height: auto;
    }
    .app_page_stores {
        width: calc(20% - 6pt);
        margin-left: 6pt;
        float:left;
    }
    br {
        border:1px solid red;
    }

    .app_page_words {
        
    }
    /* todo; add these to portrait too  */
    .app_page_screenies {
        width: calc(100% + 12pt);
        /* margin-left: -6pt; */
    }
    .app_page_screenie {
        width: calc(25% - (12pt + 2px));
        /* width: 50%; */
        margin: 0pt 6pt 6pt 6pt;
        height: auto;
        box-shadow: 0pt 0pt 10pt rgba(0, 0, 0, 0.5);
        border: 1px solid #888;
    }
    .main_buttons {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12pt;
    }
    .main_button {
        width:100%;
        filter: drop-shadow(-4pt 4pt 4pt rgba(0, 0, 0, 0.5));
    }
}

.app_div_anchor {
    display: block;
    position: relative;
    top: -48pt;
    visibility: hidden;
}

/* home button might need 'content' to show the menu button
   but only in portrait mode (which may limit us to text) */

@media all and (orientation: portrait) {
    .menu_nav {
        /* height: 24pt; */
        /* border: 1px solid red; */
        width: 100%;
        z-index: 1;
        top: 0;
        left: 0;
        position: fixed;
        height: 24pt;
        background-color: rgba(255, 255, 255, 0.5);
    }
    #menu_checkbox {
        /* border: 1px solid blue; */
        display: none;
    }
    .menu_label {
        /* border: 1px solid black; */
        /* width: 100%; */
        /* width: 24pt;
        height:24pt; */
        display: block;
        width: 100%;
        font-size: 16pt;
        /* border: 1px solid red; */
        /* height: 240pt; */
        /* font-size: 100%; */
        /* vertical-align: top; */
        /* text-align: center; */
    }
    .menu_label:after {
        content: '\00a0\2630\00a0';
        /* border: 1px solid black; */
    }
    /* input:checked ~ .menu_contents { */
        /* content: 'RLY?' */
        /* border: 1px solid red; */
    /* } */
    .menu_contents {
        /* height: calc(8 * 24pt); */
        height: 0;
        width: 100%;
        /* border:1px solid red; */
        overflow: hidden;
        transition: height 0.33s ease-in-out;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .menu_items {
        display: block;
        list-style-type: none;
        /* height: 0%;*/
        /* height: 0; */
        /* max-height:0; */
        margin: 0;
        /* margin-left: 24pt; */
        height: calc(7 * 24pt);
        /* border: 1px solid green; */
        
        /* transition: max-height 0.50s ease-in-out; */


        /* overflow: auto; */
    }
    input:checked ~ .menu_contents {
        /* max-height: 100%; */
        height: calc(8*24pt);
        /* transition: max-height 0.50s ease-in-out; */
        transition: height 0.33s ease-in-out;
    }
    .menu_item {
        display: block;
        width: 100%;
        height: 24pt;
        margin-left: 0pt;
        /* height: 100%; */
        /* float: left; */
    }
    .menu_item_small_img {
        height: 100%;
    }
    .menu_item_small_a {
        margin-right: 6pt;
        height: 100%;
        float: none;
    }
    .social_buttons {
        /* float: right; */
        height: 24pt;
        /* width: 25%; */
        /* 100%; */
    }
    .page_content {
        padding-top: 24pt;
        padding-bottom: 16pt;
        width: 100%;
    }
    .cornercut {
        position: fixed;
        margin-top: 0pt;
        width: 100%;
        height: auto;
        opacity: 50%;
        z-index: -1;
    }
    /* edit inline - but then we are 'syncing' not copying src->dst - interesting */
    .main_buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12pt;
    }
    .main_button {
        width:100%;
        filter: drop-shadow(-4pt 4pt 4pt rgba(0, 0, 0, 0.5));
    }
}

.app_page_app_keywords {
    margin-top: 12pt;
    margin-bottom: 12pt;
    text-align: center;
}

/* actually want the background to be translucent but the actual text to not be 
   sadly there is no "negative" transparency (which would be staggering cool)
   but there is a possibility - a div with 2 divs inside it
   the inner both the inner ones are absolute positioned. */


/*.menu_item li {
    float: left
}*/

.menu_item a {
    display: block;
    color: #000;
    text-decoration: none;
    text-align: center;
    font-size: 12pt;
    line-height: 1.75;
    height: 100%
}

.modal {
    display: none;
    position: fixed;
    z-index: 2;
    padding-top: 0px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.modal_content {
    margin: auto;
    display: block;
    height: 60%;
    margin-top: 10%;
    /* width: 80%; */
    /*    max-width: 700px; */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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


/* content and content types **************************************************/

.intro_img {}

@media all and (orientation: landscape) {
    .app_div {
        border: 1px solid #d0d0d0;
        /* tiresome but 26 to 27 is actually "perfection" */
        border-radius: 32pt;
        margin: 12pt 12pt 6pt 12pt;
        padding: 12pt 12pt 12pt 12pt;
        background-color: rgba(255, 255, 255, 0.25);
        box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
    }
    /* this does *not* work for app pages because they do *not* have a title
       or rather the title is in fact the page title (and subtitle) */
    /* best solution is probably to have these separated e.g. different
       css for the many apps page vs the app apge */
    .app_icon_table {
        width: 25%;
        /* margin-top: -12pt; */
        float: left;
        /* border: 1px solid red; */
    }
    .app_icon {
        /* margin-top: -47pt; */
        /* will-change: filter; */
        /* margin-top: 12pt; */
        width: 100%;
        /* box-shadow: 10px 10px 5px grey; */
        filter: drop-shadow(0 0 12pt #000);
    }
    .app_title_portrait {
        display: none;
    }
    .app_title_landscape {
        /* margin-left: 26%; */
        /* margin-left: 16%; */
        margin-bottom:12pt;
        text-align: center;
        /* text-decoration: underline; */
    }
    /* text-align: center; */
    /* border: 1px solid #d0d0d0;
    margin: 2%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 20pt;
    box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5); */
    .app_div_bottom {
        clear: both;
        height: 6pt;
    }
    /* box is simply split 2 ways man... */
    .apptext {
        /* font-size: 14pt; */
        /* width: 74%; */
        /* height: auto; */
        /* float: right; */
        /* margin-top: 8pt; */
        margin-left: 8pt;
        text-align: left;
    }
    .app_content {
        float: right;
        /* width: 84%; */
        width: 74%;
        /* margin-left: 1%; */
    }
    .app_keywords {
        margin-top: 12pt;
        text-align: center;
    }
    .app_keyword {
        display: inline-block;
        border: 1pt solid #000;
        border-radius: 3pt;
        margin: 0pt 3pt 3pt 0pt;
        /* margin-right: 1pt;
    margin-top: 2pt; */
        padding: 1pt 3pt 1pt 3pt;
        font-size: 12pt;
        white-space: nowrap;
        font-weight: bold;
    }
    .appstorelinks {
        width: 15%;
        float: left;
    }
    .app_store_badge {
        width: 100%;
        margin-bottom: 6pt;
        height: auto;
        /* float: left; */
    }
    .app_store_badges {
        padding-top: 12pt;
        /* width: 100%; */
    }
    .app_breaker {
        content: '';
    }

    .app_content {}
    .app_links {}
    .carouselimg {
        width: calc(25% - (10pt + 2px));
        margin: 0pt 10pt 10pt 0pt;
        height: auto;
        box-shadow: 0pt 0pt 10pt rgba(0, 0, 0, 0.5);
        border: 1px solid #888;
        /* height: 130px;
    width: auto; */
    }
}

@media all and (orientation: portrait) {
    .app_div {
        border: 1px solid #d0d0d0;
        border-radius: 24pt;
        margin: 12pt 12pt 6pt 12pt;
        padding: 12pt 12pt 12pt 12pt;
        background-color: rgba(255, 255, 255, 0.25);
        box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
        text-align: center;
        /* border: 1px solid #d0d0d0;
        margin: 6pt;
        padding-top: 2%;
        padding-left: 2%;
        padding-right: 2%;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 24pt;
        box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5); */
    }
    .app_icon_table {
        display: block;
        width: 100%;
        /* border: 1px solid red; */
        /* margin-left: 1%; */
        /* vertical-align: top; */
        /* height: auto; */
        /* padding-top: 0pt; */
        /* float: left; */
    }
    .app_icon {
        width: 33%;
        display: block;
        /* margin-left: -12pt; */
        padding: 0;
        margin: 0;
        /* float: left; */
        /* text-align: ; */
        filter: drop-shadow(0 0 12pt #000);
        /* border: 1px solid blue; */
        /* vertical-align: top; */
        /* float: right; */
    }
    .app_title_landscape {
        display: none;
    }
    .app_title_portrait {
        /* margin-left: 26%; */
        /* display: inline-block; */

        text-align: center;
        width:66%;
        height : 100%;
        margin-right: 0%;
        /* border: 1px solid blue; */
        /* margin-left:50%; */
        float: right;
        text-align: center;
        /* width: calc(64% - 2px); */
        /* text-decoration: underline; */
    }
    .app_div_bottom {
        clear: both;
    }
    /* box is simply split 2 ways man... */
    .apptext {
        margin-top: 8pt;
        /* font-size: 12pt; */
        /* width: 74%; */
        /* height: auto; */
        /* float: right; */
        text-align: left;
    }

    .app_content {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
        /* border: 1px solid blue; */
    }
    /* dead */
    .appstorelinks {
        width: 15%;
        float: right;
    }
    .app_store_badges {
        width: 19%;
        display: inline-block;
        /* margin-left: 66%; */
        /* float: left; */
    }
    .app_store_badge {
        width: 100%;
        margin-bottom: 6pt;
        height: auto;
        float: left;
    }
    .app_breaker {
        height: 12pt;
        clear: both;
    }

    .app_keywords {
        width: calc(45% - 6pt);
        padding-left: 6pt;
        /* margin-left:  */
        /* float: right; */
        /* margin-top: 10pt; */
        display: inline-block;
        vertical-align: top;
    }
    .app_keyword {
        display: inline-block;
        border: 1pt solid #000;
        border-radius: 3pt;
        margin: 0pt 3pt 3pt 0pt;
        padding: 1pt 3pt 1pt 3pt;
        font-size: 12pt;
        white-space: nowrap;
        vertical-align: top;
    }
    .app_screenies {
        width: calc(100% + 12pt);
        margin-left: -6pt;
        /* padding: 0pt -6pt 0pt -6pt; */
        /* border: 1px solid red; */
        /* background-color: '#800'; */
    }
    /* there's some extra cump on the bottom here -  */
    .carouselimg {
        /* width: calc(33.333% - (12pt + 2px)); */
        width: calc(50% - (12pt + 2px));
        margin: 0pt 6pt 6pt 6pt;
        height: auto;
        box-shadow: 0pt 0pt 10pt rgba(0, 0, 0, 0.5);
        border: 1px solid #888;
        /* height: 130px;
    width: auto; */
    }
    .app_content {}
    .app_links {}
}


/* a {
    border: 1px solid red;
} */


/* TODO; a lot of guff in here after deciding carousels etc were too mcuh work and a total PITA */

#carousel {
    font-size: 12pt;
    width: 100%;
    height: 150px;
    /* not nice */
    float: right;
    /* 
    width: 100%;
    height: 150px; */
    /* background-color: #ff0000; */
    overflow: auto;
    /* overflow: visible; */
    white-space: nowrap;
}


/* perfection requires a "first" subselector */

#carousel .slide {
    display: inline-block;
    margin-right: 10px;
}


/* #carousel .slide img { */


/* 
.carouselimg::before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    height: 10px;
    background-color: black;
    border-radius: 50%;
    z-index: -1;
    transform: rotateX(80deg);
    -webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1);
    box-shadow: 0px 0px 50px 10px rgba(0,0,0,1);    
  } */


/* li {
    display: inline; */


/*margin: 10px 10px 10px 0px;*/


/* } */


/* .socialbutton {
    height:20pt;
} */


/* dead */

.company {
    font-size: 12pt;
    text-align: center;
}


/* dead */

.content {
    /* margin-top: 24pt; */
    /* width: 76%;
    margin-left: 12%; */
    /* border: 1px solid red; */
}

#header {
    position: fixed;
    top: 0vh;
    width: 100vw;
    height: 15vh;
    background-color: rgba(255, 255, 255, 0.333);
}

p {
    font-size: 14pt;
    line-height: 1.6;
    margin-bottom: 14pt;
    font-weight: bold;
}


/* a {
    font-size: 14pt;
    line-height: 1.6;
    margin-bottom: 14pt;
} */

h1 {
    font-size: 28pt;
    padding-top: 6pt;
    padding-bottom: 0pt;
    /* line-height: 1.6;
    margin-bottom: 16pt; */
    text-align: center;
    font-weight: bold;
}

h2 {
    font-size: 20pt;
    margin-bottom: 4pt;
    text-align: left;
    font-weight: bold;
    text-align: center;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /* height: 18pt; */
    /* padding: 1vw; */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.75);
    font-size: 12pt;
    height: 18pt;
    margin: 0;
    padding: 0;
}

.container {
    width: 80vw;
    margin: 0 auto;
}

#countdown {
    font-size: 72pt;
    text-align: center;
    font-family: 'calc';
    font-weight: bold;
    color: #cc0000
}

.imgbox {
    display: inline-block;
    width: 25vw;
    height: 25vw;
    position: relative;
}

.imgboxcont {
    position: absolute;
    margin: 20px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.actual_image {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* needs to be  */
ul {
    margin-left: 19pt;
}

li {
    font-size: 14pt;
    margin-left: 24pt;
    text-align: left;
    list-style-type: disc;
    font-family: 'kindid';
    font-weight: bold;
}


/**************************************************************************/

@media all and (orientation: landscape) {
    .crew_member {
        /* border: 1px solid green; */
        border: 1px solid #d0d0d0;
        margin: 2%;
        padding-left: 1%;
        padding-right: 1%;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 20pt;
        box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
    }
    .crew_picture {
        width: 30%;
        float: left;
    }
    .crew_text {
        padding-top: 19pt;
        float: right;
        width: 70%;
    }
}

@media all and (orientation: portrait) {
    .crew_member {
        /* border: 1px solid green; */
        margin: 2%;
        padding-left: 1%;
        padding-right: 1%;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 20pt;
        box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
    }
    .crew_picture {
        width: 70%;
        margin-left: 15%;
        text-align: center;
        /* float:left; */
    }
    .crew_text {
        /* width: 100%; */
        padding-left: 12pt;
        padding-right: 12pt;
        padding-bottom: 3pt;
        /* border: 1px solid red; */
        /* padding-top: 0pt;
        padding-bottom: 12pt;
        margin-left: 12pt;
        margin-right: 1002pt; */
        /* float:right; */
        /* width:100%; */
    }
}


/**************************************************************************/

.picture-container {
    /* width: 30%; */
    display: inline-block;
    margin-top: 0em;
    padding: 10%;
    animation: 4s rocknroll ease-in-out infinite;
    /* filter: grayscale(100%); */
    /* position: relative; */
    /* background-color: lightgrey; */
    /* height: 500px; */
    /* transform: rotate(5deg); */
}

@keyframes rocknroll {
    0%,
    50%,
    100% {
        transform: rotate(-10deg);
    }
    25%,
    75% {
        transform: rotate(10deg);
    }
}

.picture-container .polaroid:before {
    content: '';
    position: absolute;
    z-index: -1;
    /* transition: all 0.35s; */
    /* height: 20%;
    width: 47%;
    bottom: 30px;
    right: 12px;
    box-shadow: 0 2.1em 2em rgba(0,0,0,0.4); */
}

.polaroid {
    background-image: url('/g/polariod_tile.png');
    padding: 1rem;
    box-shadow: 0 0.9rem 1.2rem rgba(0, 0, 0, 0.5);
}

.polaroid>img {
    max-width: 100%;
    height: auto;
}

.caption {
    text-align: center;
    /* font-size: 1.8rem;
    line-height: 2em; */
}


/**************************************************************************/
    /* padding-left: 1%;
    padding-right: 1%; */
    /* width: %; */
    /* margin: calc(2% - 1px);
    padding: 12pt; */
    /* padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%; */
    /* width: 80vw;
    padding: 1vw; */

.top_icons {
    border: 1px solid #d0d0d0;
    border-radius: 24pt;
    margin: 12pt 12pt 12pt 12pt;
    /* todo; fix this - it seems to derive from the a href but i don't understand why */
    padding: 12pt 12pt 12pt 12pt;
    background-color: rgba(255, 255, 255, 0.25);
    /* box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5); */
    text-align: center;
    overflow: auto;
}

.top_icons:after{ clear:both; }

.app_page_top_bar_icon_left {
    /* i need a better way to do this man */
    /* width: 10vw;
    height: 10vw; */
    width: 96pt;
    height: 96pt;
    float: left;
    display: block;
    filter: drop-shadow(-4pt 4pt 4pt rgba(0, 0, 0, 0.5));
}
.app_page_top_bar_icon_right {
    /* width: 50%; */
    /* float: left; */
    width: calc(100% - 108pt);
    margin-left: 108pt;
    text-align: left;
    /* border: 1px solid red; */
}

.app_page_div_breaker {
    clear: both;
    /* height: 20pt; */
    /* height: 0pt; */
    /* padding-top: -12pt; */
}


.app_page_app_store_badges {
    width: 20%;
    float: left;
}

    /* margin: 0% 2% 0% 2%;
    padding: 12pt;
    border-radius: 20pt;
    border: 1px solid #d0d0d0;
    box-shadow: inset -10pt 10pt 10pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
    text-align: center; */
.kicon {
    width: 10vw;
    height: 10vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    display: inline-block;
    border-radius: 8.5%;
    background: radial-gradient(circle at 40% 20%, rgb(153, 217, 255), rgb(22, 116, 220) 70%);
    background-size: 175% 125%;
    box-shadow: -5pt 5pt 5pt rgba(0, 0, 0, 0.5);
}

.kicon_no_shadow {
    width: 10vw;
    height: 10vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    display: inline-block;
    border-radius: 8.5%;
    background: radial-gradient(circle at 40% 20%, rgb(153, 217, 255), rgb(22, 116, 220) 70%);
    background-size: 175% 125%;
    box-shadow: -5pt 5pt 5pt rgba(0, 0, 0, 0.5);
    border-radius: 20pt;
    border: 3pt solid #000;
}

.kicon_no_shadow_no_border {
    width: 8vw;
    height: 8vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    display: inline-block;
    border-radius: 8.5%;
    background: radial-gradient(circle at 40% 20%, rgb(153, 217, 255), rgb(22, 116, 220) 70%);
    background-size: 175% 125%;
    box-shadow: -5pt 5pt 5pt rgba(0, 0, 0, 0.5);
    border-radius: 20pt;
}

.kicon_no_shadow img {
    margin: 0%;
    width: 100%;
}

.kicon_no_shadow_no_border img {
    margin: 0%;
    width: 100%;
}

.kicon_shadow_no_bg {
    width: 96pt;
    height:96pt;
    margin-left:8pt;
    margin-right:8pt;
    /* display: inline-block; */
    filter: drop-shadow(-4pt 4pt 4pt rgba(0, 0, 0, 0.5));
}
/* margin-left: 0.5vw;
margin-right: 0.5vw; */
/* border-radius: 8.5%; */
/* background: radial-gradient(circle at 40% 20%, rgb(153, 217, 255), rgb(22, 116, 220) 70%); */
/* background-size: 175% 125%; */
/* box-shadow: -5pt 5pt 5pt rgba(0, 0, 0, 0.5); */
/* rgba(255, 255, 255, 0.5)); */

.kicon_shadow_no_bg img {
    /* box-shadow: -5pt 5pt 5pt rgba(0, 0, 0, 0.5); */
    margin: 10%;
    width: 80%;
}


/* yeah - still isn't working - stuff everywhere) */

.kicon_text {
    text-decoration: none;
    font-size: 8pt;
    position: relative;
    display: inline-block;
    left: -10.7vw;
    top: 12pt;
    width: 10.2vw;
    text-align: center;
    margin-bottom: 4pt;
    /* border:1px solid black; */
}

.kicon img {
    box-shadow: -5pt 5pt 5pt rgba(0, 0, 0, 0.5);
    margin: 10%;
    width: 80%;
}


/**************************************************************************/


/* .picture-container .polaroid
{ */


/* position: absolute; */


/* border: 1px solid darkgrey;
    background-color: white;
    padding: 15px 15px 60px 15px;
    box-shadow: 5px 10px 10px rgba(0,0,0,0.5);
} */


/* .picture-container .polaroid:after
{
    content: attr(polaroid-caption); */


/* position: absolute; */


/* bottom: 0px;
    left: 0px;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 30px;
    text-align: center; */


/* font-family: 'Indie Flower', cursive; */


/* } */


/**************************************************************************/


/* this CSS is perculiar to app pages */