body { height: 100%; margin:0; font-family: 'Monserrat'; font-size:12px; color: #000000; background-color: #999999; } body._login { /*background-image: url(../../media/pics/406-00.jpg);*/ background-color: rgba(0,0,0,0.2); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } * { box-sizing: border-box; } ._demo { border:1px dashed #ffffff;} #boxlight { display:none; position: fixed; top:0; width:100%; height:100%; background: rgba(0,0,0,0.9); z-index:9999; } #errorMsg { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height:80px; padding: 30px 10px 10px 10px; text-align:center; font-family: sans-serif, 'Montserrat'; font-size:16px; color: #333333; font-weight: 300; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; background: url(../../media/skin/ico_close.png) no-repeat 360px 5px rgba(255,255,255, 0.8); border: 1px solid #333333; border-radius: 6px; cursor: pointer; z-index: 9999999999; } #cont_a { position:relative; top:0; width:100%; height: auto; /*max-width:100%; min-width:100%;*/ max-height:100%; min-height:100%; z-index:1; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; background-attachment: fixed; background-position: center center; background-color: rgba(0,0,0,0.2); background-repeat: no-repeat; } #_box { position: absolute; top: 50%; left:0px; transform: translate(0, -50%); padding: 20px 40px 10px 40px; width:300px; height: auto; font-family: sans-serif, 'Montserrat'; font-size:14px; font-weight:300; color:#ffffff; background-color: rgba(0,0,0,0.7); border:1px solid #333333; border-radius: 0px 10px 10px 0px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; z-index:99; } #_box h1 { margin:40px 0px 0px 0px; font-size: 24px; font-weight:300; } #_box h2 { margin: 0px 0px 20px 0px; font-size: 20px; font-weight:300; } #_box p { font-size: 14px; font-weight:300; color: #999999; } #_box span { font-size: 14px; font-weight:300; color: #ffffff; } #_box input{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } #_box label { width: 100%; font-family: sans-serif, 'Montserrat'; font-size:12px; font-weight:300; color:#ffffff; } #_box input[type=email], #_box input[type=password] { margin: 5px 0px 10px 0px; padding: 2px 5px; width: 100%; height:30px; background: rgba(0,0,0,0.3); font-family: sans-serif, 'Montserrat'; font-size:12px; font-weight:300; color:#ffffff; border: 1px solid #666666; border-radius:4px; } #_box input[type=button] { margin: 10px auto; padding:2px 5px; width:100px; height:30px; font-family:'Montserrat'; font-size:16px; font-weight:300; color:#ffffff; text-align: center; background-color:#666666; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px !important; -khtml-border-radius: 4px; cursor:pointer; } #_box input[type=button]:hover { background-color: #333333; border: 1px solid #666666; -webkit-appearance: none; } #_close { position: absolute; top:20px; right: 20px; width:30px; height:30px; cursor: pointer; z-index:9; } #_close img { width:100%; height:auto; } ._toggle, ._toggle2 { position: absolute; top:10px; right: 10px; width:20px; height:auto; cursor: pointer; z-index:9; } #_th { position: absolute; bottom: 20px; right:20px; width:auto; height:30px; } #_th img { margin: 0px 0px 0px 5px; width:60px; height: auto; cursor: pointer; border: 1px solid #333333; } #_th img._on { border: 1px solid #ffffff; } #_menu { position: fixed; top:20px; left:0; right:0; /*top:20px; left: 50%; margin: 0px 0px 0px -25%;*/ margin: 0px auto; padding:0px; width:auto; max-width:680px; height:auto; text-align: center; background: rgba(0,0,0,0.3); border-radius: 6px 6px 6px 6px; z-index:999; } #_menu div { display:inline-table; font-family: sans-serif, 'Montserrat'; font-size:14px; font-weight:300; color:#ffffff; } #_menu div._logo { margin: 0px 10px 0px 0px; padding: 0px 0px 0px 0px; width: 24px; height:auto; vertical-align: middle; } #_menu div._logo img { width:100%; height:auto; margin: -8px 0px 0px 0px; } #_menu div._years { margin: 0px 0px 0px 0px; padding: 0px 0px 10px 0px; width: 100%; height:auto; vertical-align: middle; font-family: sans-serif, 'Montserrat'; font-size:20px; font-weight:100; color:#ffffff; } #_menu select { margin: 10px 20px 5px 15px; padding:2px 5px; width:150px; height:25px; font-family:'Montserrat'; font-size:16px; font-weight:300; color:#000000; text-align:left; background-color:#dfdfdf; border:1px solid #333333; border-radius:4px;} #_menu select option { height:20px; font-family: sans-serif, 'Montserrat'; font-size:12px; font-weight:300; color:#333333; background-color:#fdfdfd; } #_menu input[type=button] { margin: 0px 0px 0px 0px; padding:2px 5px; width:100px; height:25px; font-family:'Montserrat'; font-size:16px; font-weight:300; color:#ffffff; text-align: center; background-color:#666666; border:1px solid #333333; -webkit-appearance: none; border-radius:4px; cursor:pointer; } #_menu input[type=button]:hover { color:#000000; text-align:center; background-color:#999999; border:1px solid #333333; } #_menu input[type=checkbox] { width: 20px; height: 20px; } #cont { position:relative; top:0; width:100%; height:100%; display: flex; justify-content: center; align-items: center; z-index:1; } #cont .columns { position:relative; margin: 100px auto 50px auto; padding: 0px 0px 0px 0px; width: 100%; max-width:1024px; text-align: left; display: inline-grid; grid-template-columns: auto auto auto; grid-gap: 20px; } #cont .columns li { list-style: none; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width:100%; height:auto; font-family: 'Montserrat'; font-weight:300; font-size: 14px; line-height: 1.2em; color:#666666; text-align: left; /* display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; */ /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/ } #cont .columns ._home_pic { margin: 0px auto; width:100%; height: auto; cursor: pointer; z-index:1; } #cont .columns ._home_no_pic { margin: 0px auto; width:100%; height: auto; z-index:1; } #cont .columns ._desc { position:absolute; margin:0px 0px 0px 0px; padding: 5px 10px 5px 10px; width:auto; max-width:260px; height:auto; color:#ffffff; background: rgba(0,0,0,0.35); cursor: pointer; z-index:2; } #cont .columns li:hover > ._desc { background-color: rgba(0,0,0,0.05); } #cont .columns ._paginado { grid-column: 1 / span 3; grid-row: 6; text-align:center; } #cont .columns .dot_active { display: inline-block; margin: 0px 2px 5px 2px; padding:0px; width:25px; height: 25px; font-family:'Montserrat'; font-size: 14px; font-weight:300; color:#ffffff; text-align: center; line-height:25px; background-color: #ffb74d; border: 1px solid #ffb74d; border-radius:4px; cursor: pointer; } #cont .columns .dot_disabled { display: inline-block; margin: 0px 2px 5px 2px; padding:0px; width:25px; height: 25px; font-family:'Montserrat'; font-size: 14px; font-weight:300; color:#ffffff; text-align: center; line-height:25px; background: url(../../media/skin/dots.png) center center #aaaaaa; border: 1px solid #aaaaaa; border-radius:4px; } #cont .columns .dot_l { background: url(../../media/skin/dots_l.png) center center #aaaaaa; } #cont .columns .dot_r { background: url(../../media/skin/dots_r.png) center center #aaaaaa; } #cont .columns .dot { display: inline-block; margin: 0px 2px 5px 2px; padding:0px; width:25px; height: 25px; font-family:'Montserrat'; font-size: 14px; font-weight:300; color:#ffffff; text-align: center; line-height:25px; background-color: #aaaaaa; border: 1px solid #aaaaaa; border-radius:4px; cursor: pointer; } #cont .columns .dot:hover, #cont .columns .dot_disabled:hover { background-color: #666666; border: 1px solid #666666; } #_bottom { position:relative; margin:auto auto 0px auto; padding: 5px 0px 5px 0px; width: 100%; max-width:1024px; height:auto; font-family: sans-serif, 'Montserrat'; font-size:12px; font-weight:300; color:#333333; text-align: center; z-index: 999; } #cont_admin { position:relative; top:0; width:100%; height:100%; text-align: center; z-index:1; } #cont_admin h1 { position:relative; margin: 120px auto 0px auto; width: 100%; max-width:800px; font-family:'Montserrat'; font-size: 24px; font-weight:300; color:#ffffff; text-aling: center; } #cont_admin .columns { position:relative; margin: 20px auto 50px auto; padding: 0px 0px 0px 0px; width: 100%; max-width:800px; text-align: left; } #cont_admin .columns h2 { position:relative; margin: 100px auto 0px auto; width: 100%; max-width:800px; font-family:'Montserrat'; font-size: 20px; font-weight:300; color:#ffffff; text-align: center; } #cont_admin .columns li { list-style: none; display:list; float: left; margin: 10px 0px 10px 0px; padding: 5px; width:100%; height:auto; font-family: 'Montserrat'; font-weight:300; font-size: 24px; line-height: 1.2em; color:#ffffff; text-align: left; background: rgba(0,0,0,0.3); border-radius: 6px 6px 6px 6px; border: 1px solid #333333; } #cont_admin .columns li div { display: inline-table; margin:0px; padding:0px; } #cont_admin .columns li div._id { width: 150px; font-size:14px; text-align: center; } #cont_admin .columns li div._id img{ width:100%; height:auto; vertical-align: middle; border-radius:6px; cursor:pointer; } #cont_admin .columns li div._ye, #cont_admin .columns li div._yen { width: 120px; text-align: center; vertical-align: middle; } #cont_admin .columns li div._yen input[type=text] { margin: 0px 0px 0px 0px; padding:2px 5px; width:100px; height:30px; font-family:'Montserrat'; font-size:20px; font-weight:300; color:#ffffff; text-align: center; background-color:#666666; border:1px solid #ffffff; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;-khtml-border-radius:4px; } #cont_admin .columns li div._ye input[type=text] { margin: 0px 0px 0px 0px; padding:2px 5px; width:100px; height:30px; font-family:'Montserrat'; font-size:20px; font-weight:300; color:#aaaaaa; text-align: center; background-color:#666666; border:1px solid #333333; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;-khtml-border-radius:4px; } #cont_admin .columns li div._te { width: 380px; text-align: left; vertical-align: middle; } #cont_admin .columns li div._bo { width: 100px; vertical-align: middle; text-align: center; } #cont_admin .columns li div._bo input[type=button]._bot { margin: 0px 10px 0px auto; padding:2px 5px 2px 5px; width:80px; height:25px; font-family:'Montserrat'; font-size:16px; font-weight:300; color:#333333; text-align: center; background-color:#666666; border:1px solid #333333; -webkit-appearance: none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;-khtml-border-radius:4px; overflow: hidden; } #cont_admin .columns li div._bo input[type=button]._bot._n { margin: 0px 10px 0px auto; padding:2px 5px 2px 5px; width:80px; height:25px; font-family:'Montserrat'; font-size:16px; font-weight:300; color:#ffffff; text-align: center; background-color:#666666; border:1px solid #ffffff; -webkit-appearance: none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;-khtml-border-radius:4px; cursor:pointer; } #cont_admin .columns li div._bo input[type=button]._bot._n:hover { color:#ffcc00;} #cont_admin .columns li div._bo input[type=button]._on { margin: 0px 10pxt 0px auto; padding:2px 5px 2px 5px; width:80px; height:25px; font-family:'Montserrat'; font-size:16px; font-weight:300; color:#ffcc00; text-align: center; background-color:#666666; border:1px solid #ffcc00; -webkit-appearance: none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;-khtml-border-radius:4px; cursor:pointer; } #cont_admin .columns li div._bo input[type=button]._on:hover { color:#ffffff;} #cont_admin .columns ._home_pic { margin: 0px auto; width:100%; height: auto; cursor: pointer; z-index:1; } #cont .columns ._home_no_pic { margin: 0px auto; width:100%; height: auto; z-index:1; } #cont_admin .columns ._desc { position:absolute; margin:0px 0px 0px 0px; padding: 5px 10px 5px 10px; width:auto; max-width:260px; height:auto; color:#ffffff; background: rgba(0,0,0,0.35); cursor: pointer; z-index:2; } #cont_admin .columns li:hover > ._desc { background-color: rgba(0,0,0,0.05); } .btn_y { color:#ffffff; background-color: rgba(234,229,173,0.5); border:1px solid #eae5ad; } .btn_y:hover { color:#000000; text-align:center; background-color:#fff200; border:1px solid #ffde00; } .btn_r { color:#ffffff; background-color: rgba(234,204,173,0.5); border:1px solid #eaccad; } .btn_r:hover { color:#000000; text-align:center; background-color:#6ff725; border:1px solid #9afb65; } .btn_g { color:#ffffff; background-color: rgba(193,235,196,0.5); border:1px solid #c1ebc4; } .btn_g:hover { color:#000000; text-align:center; background-color:#ff8400; border:1px solid #ff8a00; } ._control { position: absolute; right:0px; float: right; margin: 0px 0px 0px auto; padding: 25px 0px 0px 0px; text-align: right; z-index: 99; } #cont_admin .columns ._paginado { display:inline-block; width: 100%; margin: 0px 0px 0px 0px; padding: 0px; height:auto; text-align:center; border: none; background:none; } #cont_admin .columns .dot_active { display: inline-block; margin: 0px 2px 5px 2px; padding:0px; width:25px; height: 25px; font-family:'Montserrat'; font-size: 14px; font-weight:300; color:#ffffff; text-align: center; line-height:25px; background-color: #ffb74d; border: 1px solid #ffb74d; border-radius:4px; cursor: pointer; } #cont_admin .columns .dot_disabled { display: inline-block; margin: 0px 2px 5px 2px; padding:0px; width:25px; height: 25px; font-family:'Montserrat'; font-size: 14px; font-weight:300; color:#ffffff; text-align: center; line-height:25px; background: url(../../media/skin/dots.png) center center #aaaaaa; border: 1px solid #aaaaaa; border-radius:4px; } #cont_admin .columns .dot_l { background: url(../../media/skin/dots_l.png) center center #aaaaaa; } #cont_admin .columns .dot_r { background: url(../../media/skin/dots_r.png) center center #aaaaaa; } #cont_admin .columns .dot { display: inline-block; margin: 0px 2px 5px 2px; padding:0px; width:25px; height: 25px; font-family:'Montserrat'; font-size: 14px; font-weight:300; color:#ffffff; text-align: center; line-height:25px; background-color: #aaaaaa; border: 1px solid #aaaaaa; border-radius:4px; cursor: pointer; } #cont_admin .columns .dot:hover, #cont_admin .columns .dot_disabled:hover { background-color: #666666; border: 1px solid #666666; } @media only screen and (max-width: 1440px){} @media only screen and (max-width: 1112px){} @media only screen and (max-width: 1080px){} @media only screen and (max-width: 1024px){ #cont { padding: 0px 20px; } } @media only screen and (max-width: 980px){} @media only screen and (max-width: 960px){} @media only screen and (max-width: 940px){} @media only screen and (max-width: 834px){ #cont_admin .columns { position:relative; margin: 20px auto 50px auto; padding: 0px 20px; width: 100%; } #cont_admin .columns li { padding: 0px; width:100%; } #cont_admin .columns li div._te { width: 360px; } } @media only screen and (max-width: 812px){} @media only screen and (max-width: 800px){} @media only screen and (max-width: 768px){ #cont .columns { display: grid; grid-template-columns: auto auto; grid-gap: 20px; } #cont .columns ._desc { width:auto; max-width:320px; } #cont .columns ._paginado { grid-column: 1 / span 2; grid-row: 9; text-align:center; } #cont_admin .columns li div._te { width: 320px; } } @media only screen and (max-width: 750px){ #cont_admin .columns li div._te { width: 300px; } } @media only screen and (max-width: 736px){ #_menu { width:auto; max-width:100%; height:auto; border-radius: 0px; } #cont .columns ._desc { width:auto; max-width:300px; } } @media only screen and (max-width: 667px){ #cont .columns ._desc { width:auto; max-width:280px; } #cont_admin .columns li div._te { width: 220px; } } @media only screen and (max-width: 640px){ #_menu select { width:100px; height:25px; } #cont .columns ._desc { width:auto; max-width:260px; } #cont_admin .columns li div._id { float: right; width: 150px; } #cont_admin .columns li div._ye, #cont_admin .columns li div._yen { width: calc( 100% - 160px); } #cont_admin .columns li div._yen input[type=text] { margin: 5px 0px 0px 0px; padding:2px 5px; width:100px; height:22px; font-family:'Montserrat'; font-size:18px; } #cont_admin .columns li div._ye input[type=text] { margin: 5px 0px 0px 0px; padding:2px 5px; width:100px; height:22px; font-family:'Montserrat'; font-size:18px; } #cont_admin .columns li div._te { width: calc( 100% - 160px); text-align: center; font-size:18px; line-height:1.2 em; } #cont_admin .columns li div._bo { width: calc( 100% - 160px); padding-bottom: 5px; } } @media only screen and (max-width: 600px){ #cont .columns ._desc { width:auto; max-width:240px; } } @media only screen and (max-width: 568px){ #cont .columns ._desc { width:auto; max-width:240px; } } @media only screen and (max-width: 544px){ #_menu { margin:0px; padding:0px; } #_menu div { vertical-align: middle; } #_menu div._logo { margin:0px; padding: 0px; width:6%; } #_menu div._logo img { width:100%; height:auto; margin: 0px 0px 0px 0px; } #_menu div._field { margin: 0px 0px 0px 0px; padding: 0px; width:30%; } #_menu div._button { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 20%; } #_menu select { width: 80%; } #_menu input[type=button] { width: 80%; margin:0px 0px 0px 0px; } #cont .columns ._desc { width:auto; max-width:200px; } } @media only screen and (max-width: 533px){ #cont .columns { display: grid; grid-template-columns: auto; grid-gap: 20px; } #cont .columns ._desc { width:auto; max-width:calc( 100% - 60px); } #cont .columns ._paginado { grid-column: 1 / span 1; grid-row: 16; text-align:center; } } @media only screen and (max-width: 480px){ #_menu div._years { font-size:14px; } #_menu input[type=checkbox] { width: 14px; height: 14px; } } @media only screen and (max-width: 414px){ } @media only screen and (max-width: 384px){ } @media only screen and (max-width: 375px){ #_menu { margin:0px; padding:0px; } #_menu div { vertical-align: middle; } #_menu div._logo { margin:0px; padding: 0px; width:6%; } #_menu div._logo img { width:100%; height:auto; margin: 0px 0px 0px 0px; } #_menu div._field { margin: 0px 0px 0px 0px; padding: 0px; width:30%; } #_menu div._button { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 25%; } #_menu select { width: 80%; } #_menu input[type=button] { width: 80%; margin:0px 0px 0px 0px; } } @media only screen and (max-width: 360px){ } @media only screen and (max-width: 320px){ } @media handheld, only screen and (max-max-height: 414px), only screen and (max-device-height:414px) and (orientation:landscape){ #_box { padding: 10px 40px 10px 30px; width:300px; height: auto; font-family: sans-serif, 'Montserrat'; font-size:12px; font-weight:300; color:#ffffff; background-color: rgba(0,0,0,0.7); border:1px solid #333333; border-radius: 0px 10px 10px 0px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; z-index:99; } #_box h1 { margin:10px 0px 0px 0px; font-size: 18px; font-weight:300; } #_box h2 { margin:0px; font-size: 16px; font-weight:300; } #_box p { font-size: 12px; font-weight:300; color: #999999; } #_box span { font-size: 12px; font-weight:300; color: #ffffff; } } @media handheld, only screen and (max-max-width: 620px), only screen and (max-device-width: 620px){ } @media handheld, only screen and (max-max-width: 480px), only screen and (max-device-width: 480px) and (orientation:portrait){ }