@charset "utf-8";
/* CSS Document */

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-family:'Mukta', sans-serif; font-size:1.6rem; line-height:1.628571; color:#1d1d1b; background:#d9f1fb; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; font-weight:bold; font-family:'Nerko One', cursive; color:#009fe3;}
h1{font-size:3.6rem; margin-bottom:48px;}
h2{font-size:2.8rem; margin-bottom:32px;}
h3{font-size:1.8rem;}
h1.green,h2.green,h3.green{color:#96c11f;}
h1.red,h2.red,h3.red{color:#e30613;}
h1.orange,h2.orange,h3.orange{color:#f39200;}
h1.blue,h2.blue,h3.blue{color:#009fe3;}
h1.purple,h2.purple,h3.purple{color:#e3009f;}
h1.nomargin, h2.nomargin, h3.nomargin{margin:0px;}
p{margin:0px 0px 32px 0px;}
p.nomargin{margin:0px;}
a, a *{color:#009fe3; text-decoration:none;}
small{font-size:1.2rem;}
.shadow{text-shadow:-1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);}
.center{text-align:center;}
article ol,
article ul{list-style:disc outside; margin:0px 0px 30px 20px;}

/*floats*/
.left{float:left;}
.right{float:right;}

/*youtube*/
.video-container{position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}

/*backgrounds & colors*/
.bg-lightgreen{background:#f2f6f0;}

/*buttons*/
.button{min-width:160px; display:inline-block; padding:12px 24px; text-align:center; font-size:1.6rem; text-decoration:none !important; border-radius:8px;}  
.button.green{background:#537b45; border-color:#537b45; color:#ffffff;}
.button:not(:first-of-type){margin-left:16px;}

/*forms*/
form.form{display:grid; grid-template-columns:200px auto; row-gap:16px;}
form.form .wide{grid-column-end:span 2;}
form.form h2{margin-top:35px; margin-bottom:0px; font-size:2.4rem;}
form.form h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
form.form div{padding:8px 0px;}
form.form div.row{border-bottom:1px dotted #eae9e9;}
form.form div.noborder{border-bottom:none !important;}
form.form div.label{color:#2a2620;}
form.form div.row label.red{color:#e2001a;}
form.form div span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}
form.form div input[type="text"],
form.form div input[type="number"],
form.form div input[type="date"],
form.form div input[type="time"],
form.form div input[type="datetime-local"]{width:100%; height:24px; line-height:24px; padding:16px; border-radius:8px; border:1px solid #eae9e9;}
form.form div input[type="text"].red,
form.form div input[type="number"].red,
form.form div input[type="date"].red,
form.form div input[type="time"].red,
form.form div input[type="datetime-local"].red{border:1px solid #e2001a;}
form.form div input[type="text"]:focus,
form.form div input[type="number"]:focus,
form.form div input[type="date"]:focus,
form.form div input[type="time"]:focus,
form.form div input[type="datetime-local"]:focus{border:1px solid #2a2620;}
form.form div input[type="text"]::placeholder,
form.form div input[type="number"]::placeholder,
form.form div input[type="date"]::placeholder,
form.form div input[type="time"]::placeholder,
form.form div textarea::placeholder{color:#9b9b9b;}
form.form div textarea{width:100%; height:300px; font-family:'Mukta', sans-serif; line-height:24px; padding:16px; border-radius:8px; border:1px solid #eae9e9} 
form.form div textarea:focus{border:1px solid #303030;}
form.form div textarea.red{border:1px solid #e2001a;}
form.form div.submit{display:grid; grid-template-columns:1fr 1fr;}
form.form div.submit .button-left input[type=button],
form.form div.submit .button-left input[type=submit]{border:0px; font-family:'Mukta', sans-serif; color:#ffffff; background-color:#656d62; font-size:1.6rem; padding:8px 24px; border-radius:8px; text-decoration:none; float:left; cursor:pointer;}
form.form div.submit .button-right input[type=button],
form.form div.submit .button-right input[type=submit]{border:0px; font-family:'Mukta', sans-serif; color:#ffffff; background-color:#537b45; font-size:1.6rem; padding:8px 24px; border-radius:8px; text-decoration:none; float:right; cursor:pointer;}
form.form div.submit .button-right input[type=submit].grey{color:#f1f1f1; background-color:#444444;}
form.form div.submit .button-right input[type=submit].cancel{color:#e30613; background-color:#ffffff; text-decoration:underline;}
form.form div.submit .button-right input[type=submit].green{background-color:#96c11f;}
form.form div.submit .button-right input[type=submit].red{background-color:#e30613;}
form.form div.submit .button-right input[type=submit].orange{background-color:#f39200;}
form.form div.submit .button-right input[type=submit].blue{background-color:#009fe3;}
form.form div.submit .button-right input[type=submit].smaller{font-size:1.4rem;}

/*messages*/
.message{display:grid; grid-template-columns:32px auto; grid-gap:12px; padding:12px; border-radius:8px;}
.message i{font-size:3.0rem;}
.message a{text-decoration:underline;}
.message.orange{background:#ffe3b8;}
.message.orange, .message.orange *{color:#563400;}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;}
.container{max-width:1260px; margin:0px auto; padding:0px 24px;}

/*header*/
header{height:72px; background:rgb(0,159,227,0.6); z-index:1000; position:absolute; top:0px; left:0px;}
header .grid{height:72px; display:grid; grid-template-columns:1fr 1fr; grid-gap:0px;}
header .grid a i{line-height:72px; color:#ffffff; font-size:3.0rem;}
header .grid .info{text-align:left;}
header .grid .menu{text-align:right;}

/*nav*/
nav{width:0; height:100%; position:fixed; margin:unset; z-index:900; top:72px; right:0; overflow-x:hidden; transition:0.5s;}
nav.open{width:100%; background:rgba(0,0,0,0.4); transition: 0.7s;}
nav ul{width:60%; height:100vh; display:block; padding:24px; float:right; background:rgba(0,0,0,0.8);}
nav ul li{width:100%; height:48px; display:block; float:left; text-align:right; box-sizing:border-box; text-decoration:none;}
nav ul li a{color:#ffffff; margin:0px; font-size:2.0rem;}
nav ul li a.flag{display:none;}

/*sections*/
section{z-index:800;}

    section.slider{height:440px;}
    section.slider.big{height:560px;}
    
    section.diary{margin-top:-36px; overflow:visible;}
    section.diary .container .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:#ffffff; padding:2px 4px;}
    section.diary .container .grid:first-of-type{padding-top:4px;}
    section.diary .container .grid:last-of-type{padding-bottom:4px;}
    section.diary .container .grid .activity-wrapper{width:100%; position:relative; padding-bottom:100%;}
    section.diary .container .grid .activity-wrapper.logo{margin-top:-120px; background:#ffffff; outline:4px solid #ffffff;}
    section.diary .container .grid .activity-wrapper.green{background:#96c11f;}
    section.diary .container .grid .activity-wrapper.red{background:#e30613;}
    section.diary .container .grid .activity-wrapper.orange{background:#f39200;}
    section.diary .container .grid .activity-wrapper.blue{background:#009fe3;}
    section.diary .container .grid .activity-wrapper.purple{background:#e3009f;}
    section.diary .container .grid .activity-wrapper .activity{position:absolute; top:0; right:0; bottom:0; left:0; padding:16px; overflow:hidden;}
    section.diary .container .grid .activity-wrapper *{color:#ffffff;}
    section.diary .container .grid .activity-wrapper h2{font-size:4.8rem; text-transform:uppercase; margin-bottom:72px; height:100px; line-height:50px;}
    section.diary .container .grid .activity-wrapper i{position:absolute; bottom:-48px; right:8px; font-size:26.0rem; color:rgba(255,255,255, 0.2);}
    section.diary .container .grid .activity-wrapper span.date{display:block; font-size:1.4rem; margin-bottom:16px;}
    section.diary .container .grid .activity-wrapper .activity.month h2{color:#1d1d1b; font-family:'Mukta', sans-serif;}
    section.diary .container .grid .activity-wrapper .activity.month i{color:rgba(0,0,0, 0.2);}
    section.diary .container .grid .activity-wrapper.logo .activity{padding:24px;}
    section.diary .container .grid .activity-wrapper.logo .activity .image{margin-bottom:72px;}
    section.diary .container .grid .activity-wrapper.logo .activity p{color:#1d1d1b; font-weight:bold;}
    
    section.event{margin-top:-36px; overflow:visible;}
    section.event .container .grid{display:grid; grid-template-columns:repeat(12,1fr); background:#ffffff;}
    section.event .container .grid .logo{height:308px; margin-top:-72px; background:#ffffff; grid-column-end:span 4;}
    section.event .container .grid .logo .image{height:246px; padding:24px;}
    section.event .container .grid .logo .back{height:62px; display:block; background:#f3f3f3; line-height:62px; text-align:center; color:#797979; font-weight:bold;}
    section.event .container .grid .detail{height:236px; grid-column-end:span 8; padding:24px; position:relative; overflow:hidden;}
    section.event .container .grid .detail.green{background:#96c11f;}
    section.event .container .grid .detail.red{background:#e30613;}
    section.event .container .grid .detail.orange{background:#f39200;}
    section.event .container .grid .detail.blue{background:#009fe3;}    
    section.event .container .grid .detail.purple{background:#e3009f;}    
    section.event .container .grid .detail h1{color:#ffffff;}
    section.event .container .grid .detail i.bg{position:absolute; bottom:-48px; right:8px; font-size:26.0rem; color:rgba(255,255,255, 0.2);}
    section.event .container .grid .detail .facts{width:100%; position:absolute; bottom:0px; left:0; padding:0px 24px;} 
    section.event .container .grid .detail .facts .row{height:40px;}
    section.event .container .grid .detail .facts .row *{color:#ffffff;}    
    section.event .container .grid .detail .facts .row i{margin-right:8px;}    
    section.event .container .grid .detail .facts .row span{margin-right:12px;}    
    section.event .container .grid .detail p:first-of-type{font-weight:bold;}
    
    section.details{}
    section.details .container{}
    section.details .container .grid{display:grid; grid-template-columns:1fr 1fr; background:#ffffff;}
    section.details .container .grid div.left{border-right:2px solid #d9f1fb; padding:32px;}
    section.details .container .grid div.right{border-left:2px solid #d9f1fb; padding:32px;}
    
    section.cart{}
    section.cart .container{}
    section.cart .container .grid{display:grid; grid-template-columns:1fr; background:#ffffff; padding:24px;}
    section.cart .container .grid article{border-bottom:2px solid #d9f1fb; margin-bottom:24px;}
    section.cart .container .grid .shoppingcart{display:grid; grid-template-columns:1fr; row-gap:24px;}
    section.cart .container .grid .shoppingcart .activity{display:grid; grid-template-columns:64px auto; grid-gap:12px; background:#f3f3f3; padding:12px; border-radius:8px;}
    section.cart .container .grid .shoppingcart .activity i{font-size:4.2rem;}
    section.cart .container .grid .shoppingcart .activity h3{font-size:2.4rem; margin-bottom:16px;}
    section.cart .container .grid .shoppingcart .activity .green{color:#96c11f;}
    section.cart .container .grid .shoppingcart .activity .red{color:#e30613;}
    section.cart .container .grid .shoppingcart .activity .blue{color:#009fe3;}
    section.cart .container .grid .shoppingcart .activity .orange{color:#f39200;}
    section.cart .container .grid .shoppingcart .activity .purple{color:#e3009f;}
    section.cart .container .grid .shoppingcart .activity .info{display:grid; grid-template-columns:136px auto; grid-gap:8px;}
    section.cart .container .grid .shoppingcart .activity .info .dd{color:#888888;}
    section.cart .container .grid .shoppingcart .activity .info .de{font-weight:bold;}
    
    section.content{}
    section.content .container{}
    section.content .container .grid{display:grid; grid-template-columns:1fr; background:#ffffff; padding:24px;}
 
/*footer*/
footer{background:#00202d; margin-top:-72px; z-index:700;}
footer .grid{display:grid; grid-template-columns:1fr 2px 1fr; grid-gap:72px; padding:144px 24px 48px 24px;}
footer .bar{background:rgba(255,255,255,0.2);}
footer div *{color:rgba(255,255,255,0.8);}
footer div h4{font-size:2.4rem; font-family:'Mukta', sans-serif; margin-bottom:16px;}
footer div ol{display:grid; grid-template-columns:1fr 1fr; grid-gap:32px; row-gap:8px;}
footer div ol li a:hover{color:rgba(255,255,255,1.0);}
footer .copyright{height:72px; background:#000000;}
footer .copyright *{font-size:1.2rem; color:rgba(255,255,255,0.6); line-height:72px;}
footer .copyright span{margin-right:32px;}
footer .copyright span a{text-decoration:underline; margin-right:8px;}
footer .copyright span a:hover{color:#ffffff;}
footer .copyright span:last-of-type{float:right; margin-right:0px;}
footer .copyright span:last-of-type a{float:right; margin-right:0px;}
footer .copyright br{display:none;}

/*laptop*/
@media only screen and (max-width:1024px) 
{   
    section.diary .container .grid .activity-wrapper h2{font-size:3.6rem; margin-bottom:36px; height:72px; line-height:36px;}
    footer div h4{font-size:2.0rem;}
}

/*tablet*/
@media only screen and (max-width:768px) 
{
    body{font-size:1.4rem;}
    .container{padding:0px 16px;}

    header{height:60px;}
    header .grid{height:60px;}
    header .grid a i{line-height:60px; font-size:2.4rem;}
    
    nav{top:60px;}
    
    form.form{grid-template-columns:1fr; row-gap:8px;}    
    form.form .wide{grid-column-end:unset;}
    form.form div.label{border-bottom:none !important; padding:0px;}
    
    section.slider{height:340px;}
    section.slider.big{height:460px;}
    
    section.diary .container .grid{grid-template-columns:repeat(2,1fr);}
    section.diary .container .grid .activity-wrapper{padding-bottom:75%;}
    section.diary .container .grid .activity-wrapper i{bottom:-32px; right:8px; font-size:22.0rem;}
    
    section.event .container .grid .logo{height:230px; margin-top:-62px;}
    section.event .container .grid .logo .image{height:158px; padding:24px;}
    section.event .container .grid .detail{height:158px;}
    section.event .container .grid .detail i.bg{bottom:-32px; right:8px; font-size:22.0rem;;}
    section.event .container .grid .detail .facts *{font-size:1.2rem;} 
    section.event .container .grid .detail .facts i{margin-right:4px;}    
    section.event .container .grid .detail .facts span{margin-right:8px;}    

    section.details .container .grid div.left{padding:24px;}
    section.details .container .grid div.right{padding:24px;}    
    
    footer .grid{grid-gap:48px; padding:144px 16px 48px 16px;}

}

/*mobile l*/
@media only screen and (max-width:425px)
{
    body{font-size:1.4rem;}

    header{height:48px;}
    header .grid{height:48px;}
    header .grid a i{line-height:48px; font-size:2.0rem;}
    
    nav{top:48px;}
    nav ul{width:300px;}
    
    section.diary .container .grid{grid-template-columns:1fr;}
    section.diary .container .grid .activity-wrapper{padding-bottom:60%;}
    section.diary .container .grid .activity-wrapper.logo{padding-bottom:100%;}
    section.diary .container .grid .activity-wrapper.logo .activity .image{margin-bottom:32px;}
    section.diary .container .grid .activity-wrapper.logo .activity .image img{width:80%; margin:0px auto;}
    section.diary .container .grid .activity-wrapper h2{font-size:2.8rem; height:64px; line-height:32px; margin-bottom:24px;}
        
    section.event{margin-top:-36px;}
    section.event .container .grid{grid-template-columns:1fr;}
    section.event .container .grid .logo{height:unset; grid-column-end:unset;}
    section.event .container .grid .logo .image{height:unset; padding:24px;}
    section.event .container .grid .logo .image img{width:80%; margin:0px auto;}
    section.event .container .grid .detail{height:unset; padding:16px;}
    section.event .container .grid .detail i.bg{position:absolute; bottom:-48px; right:8px; font-size:26.0rem; color:rgba(255,255,255, 0.2);}
    section.event .container .grid .detail .facts{padding:0px 16px;}
    section.event .container .grid .detail .facts .row{height:32px;}
    section.event .container .grid .detail .facts i{margin-right:unset;}    
    section.event .container .grid .detail .facts span{margin-right:unset;}    
    
    section.details{}
    section.details .container{}
    section.details .container .grid{display:grid; grid-template-columns:1fr;}
    section.details .container .grid div.left{border-right:unset; padding:16px;}
    section.details .container .grid div.right{border-left:unset; padding:16px;}    
    
    footer .grid{display:grid; grid-template-columns:1fr; grid-gap:16px;}
    footer .bar{display:none;}
    footer div h4{font-size:1.8rem; margin-bottom:16px;}
    footer div ol{grid-template-columns:1fr;}
    footer .copyright{height:unset; text-align:center; padding:8px 0px;}
    footer .copyright *{line-height:unset;}
    footer .copyright span{margin-right:unset;}
    footer .copyright span a{margin-right:unset;}
    footer .copyright span:last-of-type{float:unset; margin-right:unset;}
    footer .copyright span:last-of-type a{float:unset; margin-right:unset;}
    footer .copyright br{display:block;}
}

/*mobile m*/
@media only screen and (max-width:375px)
{
    section.slider{height:240px;}
    section.slider.big{height:360px;}
    
    section.diary .container .grid .activity-wrapper{padding-bottom:75%;}
    section.diary .container .grid .activity-wrapper i{font-size:18rem;}

    footer .grid{padding:96px 16px 48px 16px}
}

/*mobile s*/
@media only screen and (max-width:320px)
{
    section.diary .container .grid .activity-wrapper h2{margin-bottom:16px;}

}