/** ❥ *********************************************************************************************/
/** ❥ (1) body styles *****************************************************************************/
/** ❥ *********************************************************************************************/


/** ✎ the only current working method (a css hack) that stops mobile webkit devices from font boosting **/
html * {
    max-height:1000000px;    }


/** ✎ background ******************************************************/

/* static styles */
body {
    background-image: url('/images/brooklyn_bridge_silver_vinsavage.jpg'), url('/images/black_bg.jpg');
    background-position: center top, left top;
    background-repeat: no-repeat, repeat;
    background-size: 100% auto, auto auto;
    margin: 0px;   }
#bg_image_container {
    position: absolute;
    top: 0px;
    z-index: 0;
    width: 100%; }
#bg_image_container div {
    position: absolute;
    background-repeat: repeat, no-repeat;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0; }
#bg_overlay_gradient {
    position: absolute;
    left: 0;
    width: 100%;
    /* background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%); */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);  }


/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
/* filter_grid */
    #bg_img_press {
        background-image: url('/images/transparent.png'), url('/images/film_camera_focus_posa.jpg');  }
    #bg_img_aboutus {
        background-image: url('/images/transparent.png'), url('/images/movie_reel_film_light_posa_3.jpg');  }
    #bg_img_screeningroom {
        background-image: url('/images/transparent.png'), url('/images/vintage_movie_camera_posa.jpg');  }
    #bg_img_testimonials {
        background-image: url('/images/transparent.png'), url('/images/reels.png');  }
    #bg_img_contact {
        background-image: url('/images/transparent.png'), url('/images/the_end_posa.jpg');  }

/* Small devices (tablets, 768px and up) and no other queries after this, so 1700+ is included too */
@media (min-width: 768px) {
    #bg_img_press {
        background-image: url('/images/transparent.png'), url('/images/film_camera_focus_posa.jpg');  }
    #bg_img_aboutus {
        background-image: url('/images/transparent.png'), url('/images/movie_reel_film_light_posa_3.jpg');  }
    #bg_img_screeningroom {
        background-image: url('/images/transparent.png'), url('/images/vintage_movie_camera_posa.jpg');  }
    #bg_img_testimonials {
        background-image: url('/images/transparent.png'), url('/images/reels.png');  }
    #bg_img_contact {
        background-image: url('/images/transparent.png'), url('/images/the_end_posa.jpg');  }  }

/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
    body {
        background-position: right top;
        background-size: 1000px auto;  }
    #bg_image_container div {
        background-position: left top, right top;
        background-size: auto auto, 1000px auto;  }
    #bg_image_container div  {
        height: 600px;  }
    #bg_overlay_gradient {
        top: 370px;
        height: 400px;    }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body{
        background-position: right top;
        background-size: 1000px auto;  }
    #bg_image_container div {
        background-position: left top, right top;
        background-size: auto auto, 1000px auto;  }
    #bg_image_container div  {
        height: 600px;  }
    #bg_overlay_gradient {
        top: 370px;
        height: 400px;    }  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        background-position: center top;
        background-size: 100% auto;  }
    #bg_image_container div {
        background-position: left top, center top;
        background-size: auto auto, 100% auto;  }
    #bg_image_container div  {
        height: 60vw;  }
    #bg_overlay_gradient {
        top: 39vw;
        height: 40vw;    }  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        background-position: center top;
        background-size: 100% auto;  }
    #bg_image_container div {
        background-position: left top, center top;
        background-size: auto auto, 100% auto;  }
    #bg_image_container div  {
        height: 60vw;  }
    #bg_overlay_gradient {
        top: 37vw;
        height: 40vw;    }  }

/* Huge devices (large desktops, 1700px and up) */
@media (min-width: 1700px) {
    body {
        background-position: center top;
        background-size: 100% auto;  }
    #bg_image_container div {
        background-position: left top, center top;
        background-size: auto auto, 100% auto;  }
    #bg_image_container div  {
        height: 60vw;  }
    #bg_overlay_gradient {
        top: 36vw;
        height: 40vw;    }  }



/** ❥ *********************************************************************************************/
/** ❥ (2) navigation ******************************************************************************/
/** ❥ *********************************************************************************************/

/** ✎ navigation ******************************************************/

/* static styles */
.navigation {
    background-image: url('/images/logo_silver.png');
    background-repeat: no-repeat;
    z-index: 2;
    /* for testing */
    /* border: solid 1px #ffffff; */  }
#menu_box {
    position: absolute;
    z-index: 2;
    /*display: none;*/
    /*control the height using javascript, later*/
    height: 60px;
    /*for testing*/
    /*border: 1px solid #ffffff;*/
    /*background: #ffcc66;*/ }
#menu_triangle_up {
    position: absolute;
    z-index: 3;
    /* old size */
    /* width: 60px;
    height: 60px; */
    width: 50px;
    height: 50px;
    /*for testing*/
    /*border: 1px solid #ffffff;*/
    /*rotation*/
    /*-webkit-transition: -ms-transform 1s, -webkit-transform 1s, transform 1s;
    transition: -ms-transform 1s, -webkit-transform 1s, transform 1s;*/    }
#menu_box:hover #menu_triangle_up, #menu_box:hover #menu_triangle_glow {
    /*-ms-transform: rotate(60deg);*/ /* IE 9 */
    /*-webkit-transform: rotate(60deg); *//* Chrome, Safari, Opera */
    /*transform: rotate(60deg); */
    /*top: -9px;*/  }
#menu_triangle_glow {
    position: absolute;
    z-index: 1;
    /* old size */
    /* width: 60px;
    height: 60px; */
    width: 50px;
    height: 50px;
    /*rotation*/
    /*-webkit-transition: -ms-transform 1s, -webkit-transform 1s, transform 1s;
    transition: -ms-transform 1s, -webkit-transform 1s, transform 1s; */   }
.menu_item {
    letter-spacing: 2px;
    font-size: 18px;
    border: 0px solid #404748;
    margin-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.0);
    color: #ffffff;
    position: absolute;
    top: -100px;
    opacity: 0;
    padding: 6px 6px 6px 17px;
    -webkit-transition: padding 1s, letter-spacing 1s; /* Safari */
    transition: padding 1s, letter-spacing 1s;
    /* for testing */
    /* background: #777777;
    top: 100px;
    opacity: 1; */ }
.menu_item:hover {
    /*background-color: #99adb0;*/
    /* background-image: url('/images/silverbar.jpg');
    color: #000000; */
    text-shadow: 0px 0px 4px #ffffff;
    padding: 6px 0px 6px 23px;
    letter-spacing: 2px;  }

/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
    .navigation {
        width: 300px;
        height: 333px;
        background-size: 300px 333px;
        top: 5px;
        right: calc((100% - 302px) / 2);
        position: absolute;  }
    #menu_triangle_up, #menu_triangle_glow {
        top: 0px;
        left: 10px; }
    #menu_box {
        top: 325px;
        left: 26px;
        width: 248px;  }
    .menu_item {
        width: 217px;
        margin-left: 0px; }

/* Small devices (tablets, 580px and up) */
@media (min-width: 580px) {
    .navigation {
        width: 100%;
        height: 333px;
        background-size: 300px 333px;
        top: 14px;
        right: 0px;
        position: absolute;  }
    #menu_triangle_up, #menu_triangle_glow {
        top: 52px;
        left: -5px; }
    #menu_box {
        top: -46px;
        left: 290px;
        width: calc(100% - 330px);  }
    .menu_item {
        width: calc(100% - 69px);
        margin-left: 53px; } }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navigation {
        width: 300px;
        height: 333px;
        background-size: 300px 333px;
        top: 23px;
        right: 5px;
        position: fixed;  }
    #menu_triangle_up, #menu_triangle_glow {
        top: 0px;
        left: 10px; }
    #menu_box {
        top: 325px;
        left: 26px;
        width: 248px;  }
    .menu_item {
        width: 217px;
        margin-left: 0px; }  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navigation {
        width: 255px;
        height: 283px;
        background-size: 255px 283px;
        top: 18px;
        right: 5px;
        position: fixed;  }
    #menu_triangle_up, #menu_triangle_glow {
        top: 0px;
        left: 10px; }
    #menu_box {
        top: 280px;
        left: 26px;
        width: 203px;  }  /* 300-248=52 */
    .menu_item {
        width: 172px;  /* 248-217=31 */
        margin-left: 0px; }  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .navigation {
        width: 306px;
        height: 341px;
        background-size: 306px 341px;
        top: 21px;
        right: 5px;
        position: fixed;  }
    #menu_triangle_up, #menu_triangle_glow {
        top: 0px;
        left: 10px; }
    #menu_box {
        top: 338px;
        left: 30px;
        width: 244px;  } /* 340-278=62 */
    .menu_item {
        width: 216px; /* 278-247=31 */
        margin-left: 0px; }  }

/* Huge devices (large desktops, 1700px and up) */
@media (min-width: 1700px) {
    .navigation {
        width: 400px;
        height: 446px;
        background-size: 400px 446px;
        top: 28px;
        right: 5px;
        position: fixed;  }
    #menu_triangle_up, #menu_triangle_glow {
        top: 0px;
        left: 10px; }
    #menu_box {
        top: 432px;
        left: 36px;
        width: 328px;   }
    .menu_item {
        width: 297px;
        margin-left: 0px; }  }

/* overrides for the last bar of navigation */
#menu_item_links {
    border: 0px solid #000000;
    background-color: rgba(0, 0, 0, 0.0); }
#menu_item_links:hover {
    text-shadow: none;
    padding: 6px 6px 6px 17px;
    letter-spacing: none;  }

#facebook_icon, #twitter_icon, #instagram_icon, #youtube_icon, #menu_item_home {
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    display: inline-block;
    z-index: 5;  }
#facebook_icon {
    background-image: url('/icon/facebook.png'), url('/icon/facebook.png');
    /*margin-left: calc(100% - 190px);*/
    margin-left: calc((100% - 190px) / 5);  }
#facebook_icon:hover {
    background-image: url('/icon/facebook.png'), url('/icon/facebook_glow.png');  }
#twitter_icon {
    background-image: url('/icon/twitter.png'), url('/icon/twitter.png');
    margin-left: calc((100% - 190px) / 5);  }
#twitter_icon:hover {
    background-image: url('/icon/twitter.png'), url('/icon/twitter_glow.png');  }
#instagram_icon {
    background-image: url('/icon/instagram.png'), url('/icon/instagram.png');
    margin-left: calc((100% - 190px) / 5);  }
#instagram_icon:hover {
    background-image: url('/icon/instagram.png'), url('/icon/instagram_glow.png');  }
#youtube_icon {
    /*margin-left: 5px;*/
    background-image: url('/icon/youtube.png'), url('/icon/youtube.png');
    margin-left: calc((100% - 190px) / 5);  }
#youtube_icon:hover {
    background-image: url('/icon/youtube.png'), url('/icon/youtube_glow.png');  }
#menu_item_home {
    background-image: url('/icon/home.png'), url('/icon/home.png');  }
#menu_item_home:hover {
    background-image: url('/icon/home.png'), url('/icon/home_glow.png');  }



/** ❥ *********************************************************************************************/
/** ❥ (3) formatting of contents ******************************************************************/
/** ❥ *********************************************************************************************/

/** ✎ videos ******************************************************/

iframe {
    width: 100%;  }
video {
    width: 100%;
    height: 100%;  }
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;  }
.embed-responsive-16by9 {
    padding-bottom: 56.25%;  }
.embed-responsive-4by3 {
    padding-bottom: 75%;  }

/** ✎ fonts ******************************************************/

body {
    /*font-family: 'Mallanna', sans-serif; */
    /*font-family: 'Exo 2', sans-serif; */
/* font-family: 'Exo', sans-serif;
 font-family: 'Quicksand', sans-serif;
font-family: 'Work Sans', sans-serif; */
/*font-family: 'Alegreya Sans', sans-serif; */
/*font-family: 'Kanit', sans-serif;
font-family: 'Yantramanav', sans-serif;  */
 }


/* static styles */
    h1, h2 {
        /* font-family: 'Mallanna', sans-serif; */
        font-family: 'Amiri', serif;
        color: #ffffff;
        font-weight: normal;
        margin: 0px;}
    h2 {
        margin-left: 20px; }

/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
    h1 {
        font-size: 40px;  }
    h2 {
        font-size: 30px;  }

/* An additional override for devices with high pixel density */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)  {
    h1 {
        font-size: 30px;  }
    h2 {
        font-size: 20px;  } }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    h1 {
        font-size: 40px;  }
    h2 {
        font-size: 30px;  }  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
        font-size: 50px;  }
    h2 {
        font-size: 40px;  }  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    h1 {
        font-size: 50px;  }
    h2 {
        font-size: 40px;  } }


    p {
        font-family: 'Amiri', serif;
        color: #ffffff;
        font-size: 18px;
        line-height: 26px;
        margin: 0px;  }
/* An additional override for devices with high pixel density */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)  {
    p {
        font-family: 'Amiri', serif;
        color: #ffffff;
        font-size: 15px;
        line-height: 21px;
        margin: 0px;  } }

.dropcap {
    float: left;
    color: #ffffff;
    font-size: 60px;
    line-height: 40px;
    padding-top: 10px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: 'Amiri', serif;  }
/* An additional override for devices with high pixel density */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)  {
    .dropcap {
        float: left;
        color: #ffffff;
        font-size: 55px;
        line-height: 32px;
        padding-top: 10px;
        padding-right: 4px;
        padding-left: 3px;
        font-family: 'Amiri', serif;  } }

.quote {
    margin: 0px 30px 0px 30px;  }


/** ✎ div that holds the ajax-loaded contents ******************************************************/

/* static styles */
    #page_contents {
        position: relative;
        background-color: rgba(0, 0, 0, 0.75);
        -webkit-animation-name: none;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-name: none;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;   }

    @-webkit-keyframes fadeout {
        from {opacity: 1;}
        to {opacity: 0; } }
    @keyframes fadeout {
        from {opacity: 1;}
        to {opacity: 0; } }

    @-webkit-keyframes fadein {
        from {opacity: 0;}
        to {opacity: 1; } }
    @keyframes fadein {
        from {opacity: 0;}
        to {opacity: 1; } }


/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
    .contents_home, .contents_nothome  {
        margin: 390px 10px 30px 10px;
        padding: 20px 40px 20px 40px;  }

/* An additional override for devices with high pixel density */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)  {
    .contents_home, .contents_nothome {
        margin: 390px 8px 30px 8px;
        padding: 16px 28px 16px 28px;  } }

/* Small devices (tablets, 580px and up) */
@media (min-width: 580px) {
    .contents_home, .contents_nothome {
        margin: 362px 10px 30px 10px;
        padding: 20px 40px 20px 40px;  } }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .contents_home, .contents_nothome {
        margin: 343px 320px 30px 50px;
        padding: 20px 40px 20px 40px;  }  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .contents_nothome {
        margin: 343px 330px 30px 50px;
        padding: 20px 40px 20px 40px;  }
    .contents_home {
        margin: 343px 55% 30px 10%;
        padding: 20px 40px 20px 40px;  }   }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .contents_nothome {
        margin: 343px 360px 30px 50px;
        padding: 20px 40px 20px 40px;  }
    .contents_home {
        margin: 343px 55% 30px 10%;
        padding: 20px 40px 20px 40px;  }  }

/* Huge devices (large desktops, 1700px and up) */
@media (min-width: 1700px) {
    .contents_nothome {
        margin: 343px 420px 30px 50px;
        padding: 20px 40px 20px 40px;  }
    .contents_home {
        margin: 343px 55% 30px 10%;
        padding: 20px 40px 20px 40px;  }  }


/** ✎ images ******************************************************/

/* introductory image */
.intro_image {
    width: 100%;  }


/*** aboutus formatting ******/

/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
    .table {
        display: block; }
    .row {
        display: block;
        padding-bottom: 30px; }
    .cell {
        display: block;
        vertical-align: top;
        padding: 10px 10px 0px 30px;  }
    .cell h1 {
        margin-top: 4px;
        line-height: 110%;
        margin-bottom: 10px;  }
    .cell img {
        margin-left: 0px;
        width: 300px;
        margin-bottom: -5px;
        margin-top: 10px;  }

/* Large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
    .table {
        display: table; }
    .row {
        display: table-row;
        padding-bottom: 30px; }
    .cell {
        display: table-cell;
        vertical-align: top;
        padding: 10px 10px 50px 10px;  }
    .cell h1 {
        margin-top: 4px;
        line-height: 110%;
        margin-bottom: 0px;   }
    .cell img {
        margin-left: 30px;
        width: 300px;
        margin-bottom: 0px;
        margin-top: 0px;   }  }


/** ❥ *********************************************************************************************/
/** ❥ (4) forms and contact page ******************************************************************/
/** ❥ *********************************************************************************************/

/** ✎ ??? ******************************************************/

/* static styles */
input, textarea {
    font-family: 'Amiri', serif;
    font-size: 18px;
    display: block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2px 10px 2px 10px;
    margin: 10px 0px 10px 0px;
    border: 0px solid #666666;
    box-shadow: inset 0 0 2px 0px #666666;   }
input:focus, textarea:focus {
    outline: none !important;
    border: 0px solid red;
    box-shadow: 0 0 4px 1px #ffffff; }

/* Extra small devices (phones, less than 768px) (no media query since this is the default) */
    input, textarea {
        width: calc(100% -  20px);    }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    input, textarea {
        width: calc(100% - 20px);    }  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    input, textarea {
        width: 510px;    }  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    input, textarea {
        width: 510px;    }  }

/* Extra-large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
    input, textarea {
        width: 510px;    }  }

/** ❥ *********************************************************************************************/
/** ❥ (5) submit button styles ********************************************************************/
/**************************************************************************************************/


.btn-submit, a.btn-submit {
    /* font of words on button */
    font-family: 'Varela Round', sans-serif;
    color: #ffffff;
    text-shadow: 0px -1px 1px #000000;
    font-size: 14px;
    font-weight: normal;
    /* display settings */
    display: inline-block;
    *display: inline;
    cursor: pointer;
    *zoom: 1;
    /* button shape */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* paddings */
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    /* colors of the button */
    background-color: #eeeeee;
    background-image: -moz-linear-gradient(top, #e4e4e4, #636363);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e4e4e4), to(#636363));
    background-image: -webkit-linear-gradient(top, #e4e4e4, #636363);
    background-image: -o-linear-gradient(top, #e4e4e4, #636363);
    background-image: linear-gradient(to bottom, #e4e4e4, #636363);
    background-repeat: repeat-x;
    *background-color: #636363;
    /* border-color: #636363 #636363 #8d8d8d;
    border: 1px solid #cccccc;
    *border: 0;
    border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.50);
    border-bottom-color: #b3b3b3; */
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);*/
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       }

    /* firefox version of the above */
    @-moz-document url-prefix() { .btn-submit, a.btn-submit {
        font-family: 'Varela Round', sans-serif;    }  }

    .btn-submit:hover, .btn-submit:focus, .btn-submit:active, .btn-submit.active, a.btn-submit:hover, a.btn-submit:focus, a.btn-submit:active, a.btn-submit.active {
        color: #ffffff;
        background-color: #636363;
        *background-color: #555555;
        /*text-shadow: 0px 0px 3px #ffffff;*/       }

.btn-submit:active, .btn-submit.active, a.btn-submit:active, a.btn-submit.active {
    background-color: #515151 \9;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);    }

.btn-submit:first-child, a.btn-submit:first-child {
  *margin-left: 0;    }

.btn-submit:hover, .btn-submit:focus, a.btn-submit:hover, a.btn-submit:focus {
    /*color: #333333;*/
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;  }

.btn-submit:focus, a.btn-submit:focus {
  outline: thin dotted #333;
  outline: 5px auto #f0f0f0;
  outline-offset: -2px;    }