/*
 Theme Name: InstaNANO Theme
 Author: InstaNANO
 Version: 1.0
*/

body{background:linear-gradient(90deg,#1fc59f,#9DDA3E);color:#333;font-family:ubuntu;margin:0;box-sizing:border-box}
ul{list-style-type:none;padding:0}
a{text-decoration:none;color:#000}
.margin{height:110px;width:100%;position:relative}
h1{font-size:26px;color:#fff}
h2{font-size:16px;color:#fff;font-weight:400}
h5{font-size:20px;color:#fff;font-weight:400}
input[type="text"],input[type="email"],input[type="password"]{border:none;border-radius:7px;background:#f2f2f2;box-sizing:border-box;box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15);padding:6px 8px;border:none !important}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus{outline:1px solid #1fc59f}
.btnod{white-space:nowrap;overflow:auto;margin:20px 0}
.btnid{margin:5px 0;border-radius:10px;background:#eee;padding:10px;width:fit-content;box-sizing:border-box}
.btn{background:#9DDA3E;padding:15px;color:#fff;box-shadow:-3px -3px 12px -12px #000 inset}
/* Header */
.top-menu{height:30px;position:absolute;background:linear-gradient(to right,rgba(0,0,0,0), rgba(0,0,0,0.2));width:100%;top:0;right:0}
.top-submenu{position:absolute;right:0;top:0;color:#000;font-size:15px}
#main-logo{position:fixed;top:10px;left:20px;height:85px;z-index:10}
#fullrb,#group-instanan{transition:1s}
.headermenu{display:flex;box-shadow:50px 8px 21px -16px black;padding:0 20px 0 80px;font-size:19px;position:absolute;right:0px;top:0;z-index:20}
#menu-header{display:flex;margin:30px 0 0 0;float:right}
.menu-item{position:relative;font-size:19px}
#menu-header > li > a{padding:20px 10px;display:flex;color:#fff;font-weight:bold}
.sub-menu{display:none;position:absolute;right:0;width:max-content;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);font-size:17px;min-width:180px}
.sub-menu > li > a{padding: 10px 20px;background:#fff;display:block;color:#333;font-size:15px;font-weight:bold}
.navbar{padding:14px}
.navbar .icon-bar{width:28px;height:4px;background:#333;margin:6px 0;display:block;transition-duration:0.5s;opacity:1}
.navbar.mactive .icon-bar.top-bar{transform:rotate(45deg) translate(38px, -32px) scale(1.5);background:#C41E3A;height:10px;position:fixed}
.navbar.mactive .icon-bar.middle-bar{opacity:0}
.navbar.mactive .icon-bar.bottom-bar{transform: rotate(-45deg) translate(42px, 28px) scale(1.5);background:#C41E3A;height:10px;position:fixed}
/* Search */
.searchf {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' stroke='black' stroke-width='1' viewBox='-1 -1 24 24' fill='black' %3E%3Cpath d='M13.2 16.355l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15'%3E%3C/path%3E%3C/svg%3E") no-repeat 0px center !important;background-size: 25px auto !important;border: none;width: 0;height: 57px;padding: 0 0 0 25px !important;outline: none;cursor: default;font-size: 18px;transition: width .5s ease, padding .5s ease;color: #fff;margin-top: 30px;box-shadow: none !important;}
.searchf:focus{outline: none !important;width: 120px;padding-left: 30px !important;}
.searchf::placeholder {color: #eee;}
.cart-count>span{position:absolute;top:5px;right:5px;background:darkred;border-radius:50%;font-size:12px;width:21px;height:21px;text-align:center;line-height:22px}

/* Main */
.main{max-width:1250px;margin:0 auto;padding:10px;min-height:calc(100vh - 210px)}
.post-data{flex:0 0 49%;margin-bottom:20px;background:#eee;border-radius:10px;display:flex}
.post-f{flex:0 0 20%}
.attachment-thumbnail{width:100%;height:100%;border-radius:10px 0 0 10px}
.post-main{position:relative;padding:10px}
.post-ttl{font-weight:bold;font-size:17px}
.post-cat{position:absolute;bottom:10px}
.post-cat a{color:#666}
.home-post-ttl{display:block;color:#fff;padding:15px 0;margin:15px 0;font-size:17px}
.cat-ttl-des{color:#fff;padding:10px 0;font-size:17px}

/* Calculator */
.rwp{background:#fff;padding:20px;border-radius:10px;margin-bottom:20px}
.cin{float:right;width:40%;font-Size:18px;}
.cr{text-align:center;color:red;font-size:22px;width:50%}
.calc{background:#fff;padding:20px;border-radius:10px}
.calcd{background:#fff;padding:20px;border-radius:10px}
.refd{background:#fff;border-radius:10px}

.tview{display:grid;grid-template-columns:1fr 1fr;gap:15px 0;align-items:center}
.row-label{}
.row-input{position:relative}
.row-input input{font-size:16px;width:100%;padding:12px 60px 12px 12px;}
.unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#555;font-size:14px;pointer-events:none}
.row-full{grid-column:span 2;font-size:18px;font-weight:600;margin:20px 0}
#r,#r1,#r2,#r3,#r4,#r5,#r6,#r7{font-size:15px;font-weight:bold;border:none}

/* Footer */
.footer{background:#eee;padding:20px;margin-top:-5px}
.colh-1{margin:-50px 0px 0px 20px}
.colh-2{text-align:center;margin-top:-15px;line-height:25px}
.colh-1,.colh-3{flex:0 0 25%}
.colh-2{flex:0 0 50%}

/* Comments */
.cmt-area{background:#fff;border-radius:10px;padding:20px}
.cmt-ttl{font-size:24px}
.avatar{border-radius:50%}
.comment{position:relative;margin:20px;padding:20px;border-radius:10px}
.comment > p{margin-bottom:0}
.cmt-area a{color:#1fc59f}
.depth-1{margin:20px 0;background:#f8f8f8}
.depth-2{margin:20px -20px 0 20px;background:#f0f0f0}
.depth-3{margin:20px -20px 0 20px;background:#e8e8e8}
.comment-author{}
.fn{text-transform:uppercase;font-size:16px;font-style:normal;font-weight:bold;position:absolute;top:23px;left:85px}
.comment-meta{position:absolute;top:45px;left:85px;font-size:14px}
.reply{position:absolute;top:25px;right:25px;font-size:14px}
.comment-meta a{color:#666}
.comment-edit-link{color:blue}
.says,.comment-notes,.comment-form-author > label,.comment-form-comment > label,.comment-form-email > label{display:none}
.comment-respond{border-radius:10px;background:#f8f8f8;padding:20px}
.comment-form-author{float:left;width:50%;padding-right:20px;box-sizing:border-box;margin:0 0 15px 0}
.comment-form-email{float:right;width:50%;box-sizing:border-box;margin:0 0 15px 0}
#comment{resize:none;height:80px}
#comment,#author,#email{font-size:16px;width:100%;box-sizing:border-box;padding:10px}
.comment-pag{margin-bottom:20px;display:flex;justify-content:space-between;font-size:20px;padding:0 20px}
.comment-awaiting-moderation{font-size:12px;position:absolute;bottom:5px;color:darkred}

/* Post Pagination */
.post-pag{margin:20px auto;background:#eee;border-radius:10px;width:fit-content;padding:10px}
.post-pag > span{font-size:24px;padding:15px;}
.post-pag > a{font-size:24px;padding:15px;}
.page-numbers.current{background:#9DDA3E;color:#fff}

/* woocommerce */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{background:#fff}.woocommerce ul.products li.product a img{border-radius:5px}.woocommerce-loop-product__title{color:#444}.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{padding:7.5px;background:#fff;border-radius:10px;box-sizing:border-box}.woocommerce ul.products li.product .price{font-size:1rem}.woocommerce ul.products li.product .button{display:none}.onsale{margin:-22px -8px 0 0 !important}.adverts-flexbox.adverts-categories-top{overflow-x: auto !important;flex-wrap: nowrap !important;}@media only screen and (min-width: 600px) {.products{display:flex;flex-flow:wrap}}
.wcpa_type_checkbox{background:#fff;padding:5px !important;border-radius:5px}

.post-ttl{font-size:16px;font-weight:100}
.prdt-ttl{margin:8% 0 20% 0;display:block}
.prdt{display:flex;flex-wrap:wrap;justify-content:flex-start;}
.prdt-data{flex:0 0 21%;margin:2.5% 1%;background:#fff;padding:1%;border-radius:10px;position:relative}
.prdt-f>a>img{border-radius:5px !important}
.prdt-price-all{position:absolute;bottom:10px}
.prdt-sale{color:#77a464;font-weight:bold;font-size:17px}
.prdt-price{color:#77a464;text-decoration:line-through}
.sales-tag{position:absolute;background:#77a464;padding:16px 8px;border-radius:100%;font-weight:bold;color:#fff;font-size:14px;top:-22px;right:-6px}
.col-0{display:flex;justify-content:space-between;flex-wrap:wrap}
.col-1{flex:0 0 57%}
.col-2{flex:0 0 40%;padding-left:1.5%;border-left:1px solid #e6e6e6;}

/* Login Menu*/
#ajax-login-modal{display:none;position:fixed;top:93px;right:63px;z-index:10010;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.2);padding:20px 18px;width:320px;font-size:14px}
.ajax-spinner{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,0.5);z-index:10020}
.ajax-spinner .spinner{width:40px;height:40px;border:4px solid #ccc;border-top-color:#5561f1;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ajax-form{display:none}
#ajax-login-form{display:block}
.ajax-form .form-input{width:100%;padding:9px;border:1px solid #bbb;border-radius:6px;box-sizing:border-box;margin-bottom:12px;font-size:14px}
.ajax-form .form-input.password{margin-bottom:18px}
.ajax-form .btn{width:100%;padding:9px;border:none;border-radius:5px;color:#fff;font-weight:600;cursor:pointer;font-size:14px}
.ajax-form .btn.login{background:#5561f1}
.ajax-form .btn.register{background:#28a745}
.ajax-form .btn.reset{background:#ffc107;color:#000}
.msg{color:#d32f2f;margin-top:10px}
.links{text-align:center;margin:12px 0}
.links a{color:#5561f1;text-decoration:none}
.links a:hover{text-decoration:underline}
.or-text{text-align:center;margin:12px 0;color:#aaa}
.google-login-btn{display:flex;align-items:center;justify-content:center;padding:7px;margin-top:14px;border:1px solid #ddd;border-radius:5px;background:#fff;font-weight:600;text-decoration:none;color:inherit}
.google-login-btn svg{width:20px;margin-right:8px;vertical-align:middle}

@media only screen and (min-width:600px){
.footer{display:flex}
.posts{display:flex;justify-content:space-between;flex-wrap:wrap}
.menu > li:hover > a{color: #fff;background:rgba(0, 0, 0, 0.1)}
#menu-header > li:hover .sub-menu{display:block}
.sub-menu > li a:hover{color: #fff;background:linear-gradient(90deg,#1fc59f,#9DDA3E)}
#mmenu{display:none;width:100%}
.mmenu-back{display:none}
.main-content{display:flex}
.post-content{padding:0 15px 0 0;width:100%}
.sidebar{padding:0 0 0 15px;width:100%;border-left:1px solid #e6e6e6;flex:0 0 25%;}
#menu-item-8237 > a{color:darkred;font-weight:bold}
#menu-item-7940 > a{padding:11px 10px !important}
}

@media only screen and (max-width:600px){
#ajax-login-modal{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);}
.colh-1,.colh-2{margin:0 0 35px 0}
.headermenu{font-size:18px;padding:0 15px 0 80px}
#main-logo{height:65px;left:10px}
.menu-header-container{position:fixed;left:-250px;width:240px;top:0;bottom:0;background:#fff;padding:0px;overflow-y:scroll;overflow-x:hidden;transition-duration:0.5s}
.sub-menu{display:contents;box-shadow:none}
#menu-header{width:240px;flex-direction:column;margin:0 !important}
#menu-header > li > a{color:#fff;background:linear-gradient(90deg,#1fc59f,#9DDA3E)}
.slidem{left:0px !important;transition-duration:0.5s}
.synthesis{display:grid}
.steps{border-radius:15px 15px 0 0;width:initial}
.imgc{border-radius:0 0 15px 15px;width:initial}
.featured-img{padding-top: 40%;}
.featured-social{top:20vw}
.post-ttl{font-size:15px}
.menu-item-7940,.menu-item-7975{order:-2}
.menu-item-8237{order:-1}
.post-cat,.top-menu{display:none}
.col-0{display:block}
.prdt-data{flex:0 0 44% !important;padding:2%}
.col-2{border-left:none;padding-left:0}
.searchf{margin-top:0}
.mmenu-back{display:block;position:fixed;background:rgba(0,0,0,0.5);top:0;bottom:0;right:0}
}