/*GENERAL*/
        /********************/
        
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            font-family: "Open Sans", sans-serif;
        } 
        
        body{
            position: relative;
        }
       
        
        body::before {
            content: "";
            display: block;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
            background: url('../images/glass-ball-1746506_1920.jpg') no-repeat center center;            
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;            
        }
        
        /*body.back::before{
            filter: brightness(25%);
        }*/
        
        /*.empty{
            height: 310px;
        }*/
        
        .space{
            height: 300px;
        }
        
        section{
            border-top: 10px solid #000;
            
        }
        
        .titles{
            font-family: "Open Sans", sans-serif;
            font-weight: 700;
            color: #104e8b;
        }
        
        div#image3 img, div#image2 img, div#image1 img, div#image4 img {
            display: inherit;
            margin: auto;
            max-width: 400px;
            width: 100%;
        }
        
        .material-icons{
            cursor: pointer;
        }
        
        .brightness{
            filter: brightness(25%);
        }

        .button {
            padding: 10px;
            font-size: 1rem;
            border-radius: 5px;
            border: 2px solid #1468c1;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            background-color: #1468c1;
            transition: .1s;
            margin: 20px auto;
            min-width: 100px;
        }

        .button:hover {            
            border: 2px solid #1468c1;            
            color: #1468c1;            
            background-color: #fff;
            transition: .1s;
        }
        
        
        /*HEADER*/
        /*******************/

        #header {
            height: 100vh;
            width: 100%;
            position: relative;
        }

        #header-info {
            background-color: #104e8b;
            position: absolute;
            left: -450px;            
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;            
            top: 0;
            padding: 20px;
            animation-name: leftIn;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            width: 100vw;
            max-width: 450px;
        }

        .fadein-div {
            animation-name: fadeIn;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-delay: 0.3s;
        }
        
        #h-i-c {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            opacity: 0;
        }
        
        #name{
            text-align: center;
            margin: 20px 0px 10px 0px;
            /*max-width: 320px;*/
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column wrap;
            color: #fff;
            
        }
        
        
        #horusEye{
           
            width: 100px;
            height: auto;
            -webkit-transition: .2s;
            transition: .2s;
            cursor: pointer;
            
        }

        #horusEye:hover{
            transform: scale(1.1);
            -webkit-transition: .2s;
            transition: .2s;
        }
        
        header h1,h2,h3{
            font-weight: 100;
        }   
        
        
        

        
        
        /*SECTION TEST*/
        /****************************/
        
        section#test{
            position: relative;            
            display: flex;
            justify-content: flex-end;
            background-image: url('../images/eye-test-1313976_1280.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            /*background-attachment: fixed;*/
        }        
        
        div#article1{
            background-color: #fafad2;
            max-width: 650px; 
            padding: 20px;
            border-left: 5px solid #000;
            
        }
        
        div#article1 h2{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 2.2em;
        }
        
        div#article1 h3{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 1.7em;
        }
        
        div#article1 p{
            line-height: 1.8em;
            text-indent: 1.8em;
            font-size: 1.2em;
        }
        
        div#article1 ul{
            list-style-position: inside;
            list-style-image: url('../images/horus16.png');
        }
        
        div#article1 li{
            padding-bottom: 15px;
            font-size: 1.2em;
        }
        
        
         /*SECTION REFRACTIVE*/
        /****************************/
        
        section#eyeRefractive{
            display: flex;
            justify-content: flex-start;
            background-image: url('../images/glasses-1934296_1920.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            /*background-attachment: fixed;*/
        }
        
        div#article2{
            background-color: #fafad2;
            max-width: 650px; 
            padding: 20px;
            border-right: 3px solid #000;
        }
        
        div#article2 h2{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 2.2em;
        }
        
        div#article2 h3{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 1.7em;
        }
        
        div#article2 p{
            line-height: 1.8em;
            text-indent: 1.8em;
            font-size: 1.2em;
        }
        
        div#article2 ul{
            list-style-position: inside;
            list-style-image: url('../images/horus16.png');
        }
        
        div#article2 li{
            padding-bottom: 15px;
            font-size: 1.2em;
        }
        
        
         /*SECTION CONDITION*/
        /****************************/
        section#eyeCondition{
            display: flex;
            justify-content: flex-end;            
            background-image: url('../images/eyeball-2473099_1920.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            /*background-attachment: fixed;*/
        }
        
        
        div#article3{
            background-color: #fafad2;
            max-width: 650px; 
            padding: 20px;
            border-left: 4px solid #000;
        }
        
        div#article3 h2{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 2.2em;
        }
        
        div#article3 h3{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 1.7em;
        }
        
        div#article3 p{
            line-height: 1.8em;
            text-indent: 1.8em;
            font-size: 1.2em;
        }
        
        div#article3 ul{
            list-style-position: inside;
            list-style-image: url('../images/horus16.png');
        }
        
        div#article3 li{
            padding-bottom: 15px;
            font-size: 1.2em;
        }
        
        /*SECTION LASER*/
        /****************************/
        section#laser{
            display: flex;
            justify-content: flex-start;
            background-image: url('../images/eye-766166_1280.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            /*background-attachment: fixed;*/
            border-bottom: 10px solid #000;
        }
        
        div#article4{
            background-color: #fafad2;
            max-width: 650px; 
            padding: 20px;
            border-right: 3px solid #000;
            
        }
        
        div#article4 h2{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 2.2em;
        }
        
        div#article4 h3{
            text-align: center;
            padding: 20px 10px 30px 10px;
            font-size: 1.7em;
        }
        
        div#article4 p{
            line-height: 1.8em;
            text-indent: 1.8em;
            font-size: 1.2em;
        }
        
        div#article4 ul{
            list-style-position: inside;
            list-style-image: url('../images/horus16.png');
        }
        
        div#article4 li{
            padding-bottom: 15px;
            font-size: 1.2em;
        }
        
        
        /*SECTION CONTACT*/
        /****************************/
        
        section#contact{
            background-color: #fff;
            padding: 20px 10px 100px 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-flow: column wrap; 
        }
        
        section#contact h2{
            text-align: center;
            /*padding: 20px 10px 30px 10px;*/
            font-size: 2.2em;
        }
        
        section#contact h3{
            text-align: center;
            padding: 20px 10px 10px 10px;
            font-size: 1.7em;
            font-weight: 700;
        }
        
        section#contact h4{
            text-align: center;
            padding: 0px 10px 10px 10px;
            font-size: 1.5em;
        }
        
        #article5 p{
            line-height: 1.5em;            
            font-size: 1.2em;
        }
        
        div#article5{
            text-align: center;
        }
        
        div#form{
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            flex-flow: row wrap;
        }


        
        #sendForm{
            font-size: 1.2em;
            padding-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column wrap;
            width: 100%;
            max-width: 390px;
        }

        .alerta {
            color: #f40404;
            font-weight: bold;
            text-align: center;
        }

        .exito {
            color: #23911f;
            font-weight: bold;
            text-align: center;
        }


        
        .input{
            padding-top: 10px;           
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-flow: row wrap;
            
        }
        
        .lb-input {
            display: inline-block;
            /*background-color: aqua;*/
            width: 90px
        }
        
        .tx-input{
            border: none;
            border-bottom: 1px solid grey;
            height: 30px;
            max-width: 620px;
            width: 300px;
        }
        
        textarea{
            max-width: 620px;
            width: 100%;
            height: 150px;
            resize: none;
            padding: 10px;
        }
        
        #message{
            padding: 30px 0px 10px 0px;
        }

        #answer {
            min-height: 52px;
        }

        .tx-input-hidden {
            position: fixed;
            top: -100px;
            left: -100px;
        }

        .spinner {
            color: #806a95;
            display: inline-block;
            width: 2rem;
            height: 2rem;
            vertical-align: -.125em;
            border: .25em solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            -webkit-animation: .75s linear infinite spinner-border;
            animation: .75s linear infinite spinner-border;
        }
        
        .spinner-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            width: 100%;
        }
        
        @keyframes spinner-border {
            100% {transform: rotate(360deg);}
        }
        
        
        /*input#submit{
            width: 100px;
            border: none;
            margin-top: 30px;
            background-color: #ccc;
            border: 1px solid #aaa;
            cursor: pointer;
            -webkit-transition: .1s;
            transition: .1s;
        }
        
        #submit:hover{
            background-color: rgba(16, 78, 139, .4);
            -webkit-transition: .1s;
            transition: .1s;
        }*/
        
        /*FOOTER*/
        /*******************/
        
        footer{
            background-color: #104e8b;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        nav a span{
            color: #000;
        }
        
        /*INFO DIVS*/
        /******************/

        .create-m-div {
            transform: scale(0);
            animation: createBox .25s forwards;
        }

        .destroy-m-div {
            transform: scale(1);
            animation: destroyBox .25s forwards;
        }
        
        div.infodiv{      
            
            
            padding: 50px 20px;
            
           
            
        }
        
        div.infodiv img#imagenhorus {
            max-width: 300px;
            width: 100%;
            margin: auto;
            display: block;
            margin-bottom: 50px;
        }
        
        div.infodiv h3 {
            font-weight: 700;
            font-size: 1.8em;
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
            color: #198cd0;
        }
        
        div.infodiv h4{
            font-weight: 700;
            font-size: 1.5em;
            text-align: center;
            padding: 20px;
                
        }
        
        div.infodiv p{  
            line-height: 1.8em;
            text-indent: 1.8em;
            font-weight: 300;
            font-size: 1.2em;
                
        }
        
        div.infodiv div.cerrar{
            position: absolute;
            top: 5px;
            right: 15px;
            font-size: .9em;
            font-weight: 700;
            cursor: pointer;
        }
        
        
        img.closeIcon{
            
            width: 35px;
            margin-top: 40px;
            /*position: absolute;
            bottom: 10px;
            right: 15px;*/
            cursor: pointer;
        }

        @keyframes createBox {
            from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
        }

        @keyframes destroyBox {
            from {
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(0);
                opacity: 0;
            }
        }

        .fadeout-div {
            animation: fadeOut;
            animation-duration: .10s;
            animation-fill-mode: forwards;
        }

        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }

        @keyframes fadeOut {
            from {opacity: 1;}
            to {opacity: 0;}
        }
        
        @keyframes leftIn {
            from {left: -450px;}
            to {left: 0px;}
        }
        
        /*body:before, header, section{
            filter: brightness(30%);
        }*/


/*VIDEO*/

        /*iframe{
            width: 550px;
            height: 315px;
        }*/

        #videoInput {
            
            width: 100%;
            display: flex;
        }

        .videoWrapper {
            width: 100%;            
            height: 360px;
        }

        #youtube {
            width: 100%;
            height: 100%;
        }

        

/*@media only screen and (max-width: 610px) {
    .space {
        height: 300px;
    }
}*/

        
        
        
        @media only screen and (min-width: 780px) {
            
          
            
            header{                
                height: 100%;                
                width: 0px;                
            }
            
           
            
            img#horusEye{
                width: 150px;              
            }
            
           
            
            div#image3 img, div#image2 img, div#image1 img, div#image4 img {
                display: none;
            }
            
            div#article1, div#article2, div#article3, div#article4{
                padding: 20px 50px 50px 50px;
            }
            
            
            
        }