/*
             * Auto Rickshaw by Stephen James Kennedy from the Noun Project
             */

            @import url('https://fonts.googleapis.com/css?family=Comfortaa|Lobster');
            
            /*
             * Normalize
             */

            html {
                font-size: 1vw;
            }
            
            a, a:visited, a:active {
                text-decoration: none;
            }

            body {
                font-size: 1em;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-family: 'Comfortaa', sans-serif;
                padding: 0;
                margin: 0;
                width: 100%;
            }

            #opener {
                height: 90vh;
                background-image: url(/img/fundo.jpg);
                background-size: cover;
                background-attachment: fixed;
                background-position-y: bottom;
            }
            
            /*
             * Galeria Instagram 
             */
            .eapps-instagram-feed-title-container {
                display: none;
            }

            /*
             * Menu navegação
             */

            nav {
                width: 70%;
                position: sticky;
                top: 0;
                z-index: 10;
                background: white;
                padding: 1% 15%;
                display: flex;
            }

            #menu_root {
                display: flex;
                position: relative;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content:space-between;
            }

            #social_media_menu, #lang_menu {
                position: relative;
                width: 25%;
            }

            .social_icon {
                display: inline-block;
                width: 25%;
                margin: 0 5px;
            }

            .social_icon img {
                width: 100%;
            }
            
            #intro {
                flex-basis: 50%;
            }
            
            #intro img {
                background-color: white;
                width: 100%;
            }
            
            #lang_menu{
                
            }

            #main_menu {
                display: flex;
                flex-grow: 1;
            }

            #main_menu a {
                text-align: center;
                width: 33%;
                color: inherit;
            }
            
            #main_menu a:hover {
                background: linear-gradient(to top, #ddd, #fff);
            }
            
            #main_menu b {
                font-size: 1.6em;
            }

            #main_menu a img {
                background: white;
                width: 7.6%;
            }
            
            .tooltip {
                position: absolute;
                width: 100%;
                top: 100%;
                padding: 5px;
                background-color: #3A7070;
                z-index: 100;
                color: white;
                border-radius: 10px;
                border: #DDD 5px solid;
            }

            /*
             * Root=========================
             */

            #root_wrapper {
                width: 80%;
                margin: 0 auto;
            }
            
            #widget_title {
                width: 100%;
                font-size: 2em;
                text-align: center;
            }

            /*
             * Pagina quem somos=========================
             */

            #quem_somos, #roteiro, #tuk, #van, #viagem {
                margin: 5% 0;
                clear: both;
            }

            #quem_somos {
                font-size: 1.2em;
                padding: 1%;
                background: #ddd;
            }
            
            #quem_somos p {
                line-height: 200%;
            }

            /*
             * Pagina do roteiro=========================
             */

            .return {
                width: 100%;
                cursor: pointer;
            }

            #roteiro {
                display: flex;
                justify-content: space-evenly;
            }
            
            #present p {
                width: 100%;
                text-align: center;
                font-size: 2em;
            }
            
            #tuk_click, #van_click {
                transition: all 1s;
                cursor: pointer;
            }

            #tuk_click:hover {
                transform: translate(-10%);
            }

            #van_click:hover {
                transform: translate(10%);
            }

            #tuk, #van, #present {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
            
            .tour_title {
                width: 100%;
                font-size: 2em;
                text-align: center;
            }
            
            /*
             * Tuk tuks==================================
             */

            section {
                background: #ddd;
                position: relative;
                width: 25%;
                padding-top: 4vw;
            }

            section img {
                width: 100%;
                object-fit: cover;
                height: 15vw;
            }
            
            header {
                text-align: center;
                cursor: pointer;
            }

            article {
                background: inherit;
                position: absolute;
                height: 100%;
                top: 0;
                padding-top: 4vw;
                overflow-y: scroll;
                box-sizing: border-box;
            }
            
            li{
                margin-top: 5%;
            }

            .info_click {
                position: absolute;
                top: 0;
                z-index: 1;
                width: 100%;
                height: 4vw;
                cursor: pointer;
                background: inherit;
                background-image: url(/img/top1.svg);
                background-size: cover;
                background-position-x: center;
            }

            .info_hide {
                position: absolute;
                top: 0;
                opacity: 0;
                cursor: pointer;
                height: 4vw;
                width: 100%;
                z-index: 2;
            }
            
            /*
             * Vans========================
             */
            
            .video_container {
                width: 40%;
                height: 50vh;
                margin: 10px;
            }
            
            .screen {
                background: black;
                width: 32%;
                height: 50%;
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 3em;
                color: white;
            }
            
            /*
             * Formulário========================
             */
            
            #viagem {
                
            }
            
            form {
                margin: auto;
            }
            
            form p {
                font-size: 2em;
            }
            
            input, textarea {
                width: 50%;
                display: block;
                font-size: 2em;
                border: #000 2px solid;
                border-radius: 10px;
            }
            
            input[type=submit] {
                width: 25%;
                border: none;
                background: none;
            }

            /*
             * Base da Pagina=========================
             */

            footer {
                background: black;
                color: white;
                display: flex;
                justify-content: space-evenly;
                padding: 3% 0;
            }

            /*
             * Media Queries=========================
             */
             
            @media only screen and (min-width: 640px) {
                nav {
                    height: 20vh;
                }
                
                #opener {
                    height: 75vh;
                }
            }