@charset "utf-8";
html{height:100%;width:100%;box-sizing: border-box;}
*{margin:0;padding:0;box-sizing: inherit;}
*:before, *:after {box-sizing: inherit;}

@font-face {
font-family: "CustomFont";
url("futurastd-bold.otf") format("opentype"),

}

body{font-family:'CustomFont', sans-serif;color:#666666; font-size:14px; line-height:21px; background:#ffffff; height:100%;}

.valign{position:relative;
    float:left;
    height:50%;
    margin-bottom:-335px; /* half the containers height */
    position:relative;
    width:1px;
}
.center{text-align:center;clear:both;width:1014px; height:670px;position:relative;margin:0 auto; border:none;overflow:hidden;box-shadow:0px 0px 20px rgba(0,0,0,0.3)}
#container{position:absolute;border:none;width:1014px;height:670px;overflow:hidden;text-align: left; background-image: url(/SHELL-MAX-EXHIBICION/lib/assets/FondoEstanteria.jpg)}

h1{font-size:28px;margin-bottom:16px;color:#EE3335;}
p{font-size:14px;line-height:21px;}
p:last-child{margin-bottom:0px;}
a{font-size:14px;}
input{font-family:'CustomFont', sans-serif;background:#fff;font-size:14px;padding:6px 10px 6px 10px;border:1px solid #ccc;-webkit-appearance:none;border-radius:0px;}
img{display:block;} /* remove bottom padding */ 

.myButton input{background:#FFD200;color:#EE3335; border:0px;}
.myButton input:hover:enabled{background:#EE3335;color:#FFD200; border:0px;}
.dragItem{box-shadow: 0px 0px 0px rgba(0,0,0,0.0);}
.dropZone{background:transparent;box-shadow: 0px 0px 0px rgba(0,0,0,0.0); border-bottom:0px solid #FFD200;}
.feedbackBox{background:#FFD200;padding:20px;}
.blueBox{background:#6aa0bd;padding:7px;}
.cent{text-align:center;}
.white{color:#fff;}
.border{border:0px solid red;}

/* preloader */
.preloader{
    width:34px;
    height:34px;
    display:inline-block;
    padding:0px;
    
    border-radius:100%;
    border:2px solid;
    border-top-color:rgba(0,0,0, 0.8);
    border-bottom-color:rgba(0,0,0, 0.2);
    border-left-color:rgba(0,0,0, 0.8);
    border-right-color:rgba(0,0,0, 0.2);
    outline: 1px solid transparent;

    -webkit-animation: preloader 1s linear infinite;
    animation: preloader 1s linear infinite;
}



@keyframes preloader{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}


/* Orientacion de dispositivo*/
@media only screen and (orientation:portrait){
  #message{ display:block; 
   width: 100%;
   height:100%;
   background:#ffffff;
  }
  #message img{
  width: 100%; }
  
  #container{ display:none; }
  .center{ display:none;/* height: 100vw; transform: rotate(90deg);*/ }
  
}
@media only screen and (orientation:landscape){
  #message{ display:none; }
  #container{ display:block; }
}