cambios #1 se elimina height en marco foto

web/manuel/css/camera.css

@@ -11,6 +11,7 @@ and open the template in the editor.
 
 /* CSS comes here */
 #video {
+    border:6px solid #f5a800; /*N*/
     width: 100%;
     height: 100%;
 }
@@ -26,8 +27,14 @@ and open the template in the editor.
 }
 
 .camera {
-    width: 100%;
-    display: inline-block;
+    /* width: 100%; */
+    /* display: inline-block; */
+    margin: 0 auto 2em auto;
+    display:flex;
+    justify-content: center;
+    position:relative;
+
+
 }
 
 .output {

web/manuel/css/style.css

@@ -473,13 +473,242 @@ div .txt-center {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+.terminos-condiciones {
+    padding:1em 0;
+    margin: 0 auto 3em auto;
+    text-align: center;
+}
+.terminos-condiciones a {
+    font-size: 0.8em;
+    color:#555555;
+}
+.terminos-condiciones a:hover {
+    font-size: 0.8em;
+    color:#f5a800;
+}
+
+.img-responsive {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+
+/** MENU **/
+
+
+.responsive-bar{
+    display: none;
+    z-index: 9999;
+}
+
+
+
+nav{
+    font-family: 'Cormorant', Georgia,"Times New Roman", serif;
+    text-transform: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100px;
+    width: 100%;
+    padding: 10px 100px;
+    box-sizing: border-box;
+    transition: .5s;
+
+    display: flex;
+    justify-content: center;
+}
+nav.black{
+    
+    background:#ffffff;
+    height: 80px;
+    padding: 10px 50px;
+}
+nav .logo{
+    float: left;
+}
+nav .logo img{
+    height: 60px;
+    /* transition: .5s; */
+}
+nav.black .logo img{
+    height: 60px;
+}
+nav > ul{
+    /* width: 80%; */
+    margin: 0 0 0 6em;
+    padding: 0;
+    float: right;
+}
+nav > ul > li{
+    list-style: none;
+    display: inline-block;
+}
+nav > ul > li > a:hover{
+    /* background: #f00; */
+    color: #f5a801!important;
+}
+nav > ul > li > a{
+    color: rgba(0,0,0,.6);
+    text-decoration: none;
+    /* text-transform: uppercase; for capitalisation of letters */
+    line-height: 80px;
+    padding: 5px 10px;
+    font-size: 19px;
+    transition: .5s;   
+}
+nav.black > ul > li > a{
+    color: rgba(0,0,0,.6);
+    line-height: 60px;
+}
+
+section.sec1{
+    width: 100%;
+    height: 100vh;
+    background: url(https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
+    background-size: cover;
+}
+section.content{
+    margin: 0;
+    padding: 0;
+    font-size: 1.1em;
+}
+section.sec2{
+    width: 100%;
+    height: 100vh;
+    background: url(https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
+    background-size: cover;
+}
+
+
+@media(max-width:768px){
+    .responsive-bar{
+        display: block;
+        width: 100%;
+        height: 60px;
+        background-color: transparent;
+        position: fixed;
+        top: 0;
+        left: 0;
+        padding: 5px 20px;
+        box-sizing: border-box;
+        z-index: 9999;
+
+    }
+    .responsive-bar .logo img{
+        float: left;
+        height: 40px;  
+    }
+    .responsive-bar .menu h4{
+        float: right;
+        color: #7EBEC5;
+        margin: 0;
+        padding: 0;
+        line-height: 50px;
+        cursor: pointer;
+        /* text-transform: uppercase; */
+    }
+    nav{
+        padding: 0;
+    }
+    nav,
+    nav.black{
+    background-color:transparent;
+    height: 60px;
+    padding: 0;
+    width: 100%;
+    }
+    nav .logo{
+        display: none;
+    }
+    nav ul{
+        position: absolute;
+        width: 100%;
+        top: 60px;
+        left: 0;
+        background: #262626;
+        float: none;
+        display: none;
+    }
+    nav ul.active{
+        display: block;
+    }
+    nav ul li{
+        width: 100%;
+    }
+    nav ul li a{
+        display: block;
+        padding: 0;
+        width: 100%;
+        text-align: center;
+        line-height: 30px !important;
+        color: #fff;
+        
+    }
+
+    nav > ul{
+        width: 100%;
+        display: none;
+        margin-left: 0;
+
+    }
+
+    nav > ul > li{
+        display: block;
+        text-align: center;
+    }
+    .active{
+        display: block;
+    }
+}
+
+
+
+
+
+
 /*** MEDIA QUERIES ***/
 
-@media (max-width : 468px){
-    .container-c{margin-top:-10em};
+
+@media (max-width: 1024px) and (orientation: landscape){ /* tablet and smaller */
+  body:after{
+    position: absolute;
+    z-index: 9999;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    content: "";
+    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
+    background-size: 100% auto;
+    opacity: 0.95;
+  }
 }
 
 
+/* 
+@media (max-width:980px){
+    body nav {
+    width: inherit;   
+    }  
+}*/
+
+
+
+
+
+
 @media(max-width:768px){
 
     .contenedor-compara-fotos {
@@ -532,7 +761,7 @@ div .txt-center {
     .marco-foto {
         width: 100%;
         max-width: 320px;
-        height: 360px;
+        height: auto;
         min-height: 240px;
         overflow: hidden;
     }
@@ -575,10 +804,14 @@ div .txt-center {
 
 }
 
-.camera{
-    max-height: 240px;
+@media (max-width : 468px){
+    .container-c{margin-top:-10em};
 }
 
+/* .camera{
+    max-height: 240px;
+} */
+
 .separador-marco-foto{
     margin-left: 0.1em;
     margin-right: 0.1em;