@charset 'utf-8';

/* General 2018 Style */

/*
Theme Name : Way to Namari :
Theme URI : http ://www.volcansolymar.org
Description : Cool Stuff !
Version : 1.0
Author : THis @ product by <joy<inc.
Author URI : http ://humanearthling.org/arno
Last Date : 14.ß6.2018 18 :54 :27
*/

/*
"theme_color": "#569ab8",
"display": "standalone"
Farbpalette :
http ://jrm.cc/color-palette-generator/?image=images%2Fsonnenaufgang_see.jpg&steps=3
*/


/**
 * The CSS in this file is for styling the demo page,
 * Meny's critical styles (such as transforms) are applied
 * via JavaScript. View :
 *
 * See the documentation here: https://github.com/hakimel/meny#meny
 *
 * @author Hakim El Hattab | http://hakim.se
 */


/*
 * Small Reset for a Better Performance !
 *
 * TOTAL RESET
 * @import url(reset.css);
 */

@import url(reset.css);

* {
        margin: 0;
        padding: 0;
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}

ul, li, ol, dl, dd, dt {
list-style:none;
padding:0;
margin:0;
}

a {

text-decoration:none;
}

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


/* Helper classes */

.cf:before,
.cf:after {
        content: ' ';
        display: table;
}

.cf:after {
        clear: both;
}


/* Main styles */

html {
                overflow: hidden;
                touch-action: none;
                content-zooming: none;
}

html, body { width: 100%; height: 100%; }

body {
                background: transparent;
                font-family: Tahoma;
                font-size: 1.2em;
                text-align: justify;
}



/* ANIMATION AREA */

canvas {
                width: 100%;
                height: 100%;
                position: absolute;
}

/* CONNECTION MENU */

/*
    width:300px; height:120px;
    margin: -60px 0 0 -150px;

    width:480px; height:240px;
    margin: -120px 0 0 -240px;
*/

.moving-zone {
    position: absolute;
    top:50%; left:50%;
    width:48vw; height:24vw;
    margin: -12vw 0 0 -24vw;
    perspective: 800px;
}
.popup {
    position: absolute;
    width:48vw;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 20px 0 20px 0;
    cursor: pointer;
    transform-style: preserve-3d;
    background: -webkit-linear-gradient(top left, white 50%, coral 50%);
    background:    -moz-linear-gradient(top left, white 50%, coral 50%);
    background:     -ms-linear-gradient(top left, white 50%, coral 50%);
    background:      -o-linear-gradient(top left, white 50%, coral 50%);
    background:         linear-gradient(top left, white 50%, coral 50%);
}
.popup:before {
    content: '';
    position: absolute;
    left:5%; top:5%;
    width:90%; height:90%;
    border-radius: inherit;
    background: rgba(0,0,0,.1);
    box-shadow: 0 0 40px 20px rgba(0,0,0,.1);
    transform: translateZ(-100px);
}
.popup-content {
    background: #444;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px 0 10px 0;
}
.popup-text {
    color: white;
    font-family: 'Tahoma', sans-serif;
    font-size: 3.4vw;
    line-height: 4.8vw;
    font-weight: 100;
    text-align: center;
    transform: translateZ(15px);
}
.popup-text b {
    color: coral;
    font-weight: 400;
}

.popup-text a {
    color: #248FF2;
    font-weight: 400;
    text-decoration: none;
}

/* M E N Y - A N I M A T I O N >>> */

.meny {
        display: none;
        padding: 20px;
        overflow: auto;
        background: #333;
        color: #eee;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}
        .meny ul {
                margin-top: 10px;
        }
                .meny ul li {
                        display: inline-block;
                        width: 200px;
                        list-style: none;
                        font-size: 34px;
                        line-height: 84px;
                        color: #248FF2;
    font-weight: 400;
                        padding: 3px 10px;
                }
                        .meny ul li:before {
                                content: '-';
                                margin-right: 5px;
                                color: rgba( 255, 255, 255, 0.2 );
                        }

/**
 * Hint graphic that appears while menu is inactive
 */
.meny-arrow {
        position: absolute;
        z-index: 800;
         border: 10px solid orange;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         -moz-border-radius: 10px;
         border-radius: 24px;
         -moz-box-shadow: 10px 10px 10px #888;
         -webkit-box-shadow: 10px 10px 10px #888;
         box-shadow :
         8px 8px 8px red,
         -8px 8px 8px green,
         8px -8px 8px blue,
         -8px -8px 8px yellow;
        -webkit-transition: opacity 0.4s ease 0.4s;
           -moz-transition: opacity 0.4s ease 0.4s;
            -ms-transition: opacity 0.4s ease 0.4s;
             -o-transition: opacity 0.4s ease 0.4s;
                transition: opacity 0.4s ease 0.4s;
}
        .meny-left .meny-arrow {
                left: 10px;
                top: 50%;
                margin-top: -16px;
                border-right: 16px solid #333;
        }
        .meny-right .meny-arrow {
                right: 14px;
                top: 50%;
                margin-top: -16px;
                border-right: 16px solid #333;
        }
        .meny-top .meny-arrow {
                left: 50%;
                top: 14px;
                margin-left: -16px;
                border-top: 16px solid #333;
        }
        .meny-bottom .meny-arrow {
                left: 50%;
                bottom: 14px;
                margin-left: -16px;
                border-bottom: 16px solid #333;
        }
        .meny-active .meny-arrow {
                opacity: 0;

                -webkit-transition: opacity 0.2s ease;
                   -moz-transition: opacity 0.2s ease;
                    -ms-transition: opacity 0.2s ease;
                     -o-transition: opacity 0.2s ease;
                        transition: opacity 0.2s ease;
        }

/**
 * Main contents area
 */
.contents {
        background: #eee;
        padding: 20px 40px;
        width: 100%;
        height: 100%;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}

/* M E N Y - A N I M A T I O N <<< */

/* M I X E D */


/* INFOLAYER zB Menu Style Panel /// + js = index.js */

.infolayer1, infolayer2, infolayer3, infolayer4, infolayer5, infolayer5 {
display: none;
}

/* INFORMATION ARROW'S */

#citi_arrow {
         position : fixed;
         top : 61px;
         right : 21px;
         width : 141px;
         height : 62px;
         background-image : url('../lib/switsch/change_content_info_arrow.png');
         background-repeat : no-repeat;
         background-position : 0 0;
         z-index: 31;
}


#connect_arrow {
         position : fixed;
         bottom : 51px;
         right : 121px;
         width : 141px;
         height : 62px;
         background-image : url('../lib/switsch/change_idioma_arrow.png');
         background-repeat : no-repeat;
         background-position : 0 0;
         z-index: 101;
}

#idioma_arrow {
         position : fixed;
         bottom : 91px;
         left : 121px;
         width : 141px;
         height : 62px;
         background-image : url('../lib/switsch/change_idioma_arrow.png');
         background-repeat : no-repeat;
         background-position : 0 0;
         z-index: 101;
}

#style_arrow {
         position : fixed;
         top : 69px;
         left : 79px;
         width : 141px;
         height : 62px;
         background-image : url('../lib/switsch/change_content_info_arrow.png');
         background-repeat : no-repeat;
         background-position : 0 0;
         z-index: 101;
}

/* STYLE CHANGES >>> */
/*
lib/switsch/change_style_all.css
lib/switsch/change_style_alt1.css
lib/switsch/change_style_alt2.css
lib/switsch/change_style_alt3.css
 */
/* STYLE CHANGES */

/* TOM OUTER MENU INDEX */

/* lib/outer_menu.css */

/* THE STYLE LAYER */

.style_panel  {
         position : fixed;
         top : 49px;
         left : 23px;
         width : 58px;
         z-index: 108;
}

.style_0_button  {
         width : 38px;
         height : 36px;
         margin-left  : 7px;
         margin-bottom  : 14px;
         background-image :url('../lib/favicons/favicon-32x32.png');
         background-repeat :no-repeat;
         background-position :0 0;
         display : block;
         border : 3.6px solid orange;
         -webkit-box-sizing : border-box;
         -moz-box-sizing : border-box;
         box-sizing : border-box;
         -moz-border-radius : 10px;
         border-radius : 24px;
         -moz-box-shadow : 10px 10px 10px #888;
         -webkit-box-shadow : 10px 10px 10px #888;
         box-shadow :
         8px 8px 8px red,
         -8px 8px 8px green,
         8px -8px 8px blue,
         -8px -8px 8px yellow;
}

.style_a_button, .style_b_button, .style_c_button, .style_d_button {
         width : 33px;
         height : 33px;
         margin-left  : 10px;
         margin-bottom  : 3px;
         display : block;
         -webkit-box-sizing : border-box;
         -moz-box-sizing : border-box;
         box-sizing : border-box;
         -moz-border-radius : 1.2px;
         border-radius : 3px;
         -moz-box-shadow : 1.2px 1.2px 1.2px #888;
         -webkit-box-shadow : 1.2px 1.2px 1.2px #888;
}

.style_a_button {
         background : radial-gradient(#000, #fff, #999);
         border : 3.6px solid #D9EEF5;
         box-shadow  :
         8px 8px 8px #F5E1D5,
         -8px 8px 8px #DAF3D0,
         8px -8px 8px #CABCF0,
         -8px -8px 8px #F0F1C5;
}

.style_b_button {
         background: radial-gradient(#6D7E1B, #1CAE25, #9DA51C);
         border : 3.6px solid #B6C619;
         box-shadow  :
         8px 8px 8px #9A8E1C,
         -8px 8px 8px #02FF0B,
         8px -8px 8px #1C8F6F,
         -8px -8px 8px #6A731A;
}

.style_c_button {
         background : red;
         border : 3.6px solid orange;
         box-shadow  :
         8px 8px 8px red,
         -8px 8px 8px green,
         2px -2px 2px blue,
         -8px -8px 8px yellow;
}

.style_d_button {
         background : radial-gradient(#666, #222, #FF0);
         border : 3.6px solid gray;
         box-shadow  :
         8px 8px 8px #9A8E1C,
         -8px 8px 8px #02FF0B,
         8px -8px 8px #1C8F6F,
         -8px -8px 8px #6A731A;
}

/* THE BORDER STYLE */

.page-border {
    position: fixed;
    z-index: 99;
    pointer-events: none;
}

.page-border .bottom-border, .page-border .left-border, .page-border .right-border, .page-border .top-border {
    position: fixed;
    z-index: 99;
}

.page-border > .top-border, .page-border > .right-border, .page-border > .bottom-border, .page-border > .left-border {
    padding: 1vw;
}

.page-border .bottom-border, .page-border .top-border {
    width: 100%;
    padding: 1vw;
    left: 0;
}

.page-border .left-border, .page-border .right-border {
    height: 100%;
    padding: 1vw;
    top: 0;
}

.page-border .top-border {
    top: 0;
}
.page-border .right-border {
    right: 0;
}
.page-border .bottom-border {
    bottom: 0;
}
.page-border .left-border {
    left: 0;
}

/* STYLE CHANGES <<< */

/* MIXED WITHOUT SENSE >>> */

    .none {
    text-decoration: none;
    color: #4E8CEB;
    }

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

.content {

                background: transparent;
                position:absolute;
}


strong {
    font-size: 1.6em;
    font-weight: bold;
}

    .comment {
    padding: 12px;
border: 10px solid #888;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         -moz-border-radius: 10px;
         border-radius: 10px;
         -moz-box-shadow: 10px 10px 10px #888;
         -webkit-box-shadow: 10px 10px 10px #888;
         box-shadow: 10px 10px 10px #888;
    }
.logo_rain {
     margin-left: 42px;
     font-weight: bold;
     color: #000;
    }
.raincol {
    height: auto;
    width: 100%;
    text-align:center;
    border-radius: 20px 0 20px 0;
    cursor: pointer;
    transform-style: preserve-3d;
    background: -webkit-linear-gradient(top left, white 50%, coral 50%);
    background:    -moz-linear-gradient(top left, white 50%, coral 50%);
    background:     -ms-linear-gradient(top left, white 50%, coral 50%);
    background:      -o-linear-gradient(top left, white 50%, coral 50%);
    background:         linear-gradient(top left, white 50%, coral 50%);
}


.preno1 {
    font-size: 1.6em;
    font-weight: bold;
    font-family: Courier New;
}

/* MIXED WITHOUT SENSE <<< */