/*
Theme Name: Host Chipmunk
Author: Host Chipmunk
Author URI: https://hostchipmunk.com
Description: Theme for Kawaii Art Tribe website
Version: 1.0
Text Domain: hostchipmunk
*/


/*** Tags ***/
html { font: 14px/1.8 Poppins, sans-serif; padding: 0; background-color: #fff; color: #666; }
body { margin: 0; }
video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 { margin: 1em 0; }
h1 { font-size: 1.8em; line-height: 1.5; }
h2 { font-size: 1.6em; line-height: 1.5; }
h3 { font-size: 1.4em; line-height: 1.5; }
h4 { font-size: 1.2em; line-height: 1.5; }
h5 { font-size: 1em; line-height: 1.5; }
h6 { font-size: 1em; line-height: 1.5; margin: 1em 0; }

input, textarea, select { font: 14px/1.8 Poppins, sans-serif; padding: .5em; border: 1px solid #ccc; }

blockquote { position: relative; margin-left: 0; padding-left: 2em; }
blockquote:before { content: '"'; font-size: 4em; position: absolute; left: 0em; top: -.3em; }

/*** Colors ***/

/* Text */
.text-white { color: #fff; }

.text-crusta,
.cta .button-1 { color: #f78259; }

.text-sapphire,
a { color: #0e093b; }

.fade { opacity: .5; }

/* Background */
.background-crusta,
.button,
.button-1,
.cta { background-color: #f78259; }

.background-sapphire { background-color: #0e093b; }

/* Background gradient */
.gradient-1, #hero {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e093b+0,140883+100 */
background: #0e093b; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #0e093b 0%, #140883 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #0e093b 0%,#140883 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #0e093b 0%,#140883 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e093b', endColorstr='#140883',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gradient-1a, #site-header.scrolled {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e093b+0,140883+100&0.95+0,0.95+100 */
background: -moz-linear-gradient(45deg,  rgba(14,9,59,0.95) 0%, rgba(20,8,131,0.95) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(14,9,59,0.95) 0%,rgba(20,8,131,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(14,9,59,0.95) 0%,rgba(20,8,131,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f20e093b', endColorstr='#f2140883',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gradient-2, .wordpress-features {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#140883+0,0e093b+100 */
background: #140883; /* Old browsers */
background: -moz-linear-gradient(45deg,  #140883 0%, #0e093b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #140883 0%,#0e093b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #140883 0%,#0e093b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#140883', endColorstr='#0e093b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gradient-3, #site-footer {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e093b+0,0e065b+100 */
background: #0e093b; /* Old browsers */
background: -moz-linear-gradient(top,  #0e093b 0%, #0e065b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0e093b 0%,#0e065b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0e093b 0%,#0e065b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e093b', endColorstr='#0e065b',GradientType=0 ); /* IE6-9 */

}

/*** Image alignment ***/
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/*** Text styles ***/
.text-large { font-size: 1.5em; }
.text-small { font-size: .8em; }
.text-extra-large { font-size: 2em; }


/*** Layout formating ***/
/* Text aligment */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Lists */
.list-1,
.menu,
.sub-menu,
.feature-list,
.faq ul { margin: 0; padding: 0; list-style: none; }

.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 2em; }
.feature-list img { width: 50px; padding: 1em; border-radius: .5em; background: #ecebf5; }
.feature-list h3 { color: #353265; }

/* Generic */
.central-column { max-width: 1200px; margin-left: auto; margin-right: auto; }
.half-width { width: 50%; }



/*** Elements ***/
/* Misc */
.disabled { cursor: not-allowed; opacity: .5; }
.hide { display: none; }
.grecaptcha-badge { visibility: hidden; }
.note { font-size: .9em; opacity: .9; font-style: italic; }

/* Button */
.button,
.button-1 { display: inline-block; line-height: 1; font-weight: normal; padding: 1em 2em; cursor: pointer; border-radius: .3em; text-transform: uppercase; border: none; color: #fff; }
.button:hover,
.button-1:hover { outline: none; }

/* Search form */
.search-form { display: flex; }
.search-form label { margin-right: .3em; }
.search-form input { border: none; padding: .35em 1em 0; font-size: .9em; border-radius: 1em; }
.search-form .search-submit { cursor: pointer; }

/* Video container */
.video-container-1 { text-align: center; margin: 4em 0; background: url(./assets/images/leaf-left.svg) no-repeat left 12em bottom, url(./assets/images/leaf-right.svg) no-repeat right 12em bottom, url(./assets/images/bg-deco-1.svg) no-repeat left bottom, url(./assets/images/bg-deco-2.svg) no-repeat right top; }
.video-container-1 video { margin: 0 auto; }

/* Sub-header */
.sub-header h3 { margin-bottom: 0; }
.sub-header p { margin-top: 0; }

/* Table */
.table-1 { width: 100%; }
.table-1 th, .table-1 td { padding: 1em .5em .1em .5em; border-bottom: 1px solid #ddd; }
.table-1 th { text-align: left; border-bottom-width: 2px; }
.table-1 td { }

/* Grid - 2 */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) ; }

/* CTA */
.cta { color: #fff; }
.cta .central-column { max-width: 800px; margin: 0 auto; }
.cta .grid-2 { display: flex; align-items: center; justify-content: space-between; padding: 2em 0; }
.cta .text { font-size: 1.4em; font-weight: bold; }
.cta .button-1 { background: #fff; }

/* Header */
#site-header { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; padding: 1.5em 0; transition: .5s; }
#site-header a { color: #fff; }
#site-header > .central-column { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#site-header.scrolled { box-shadow: 0 0 3px #000; }

#top-bar { display: flex; justify-content: flex-end; padding: 1em 0; width: 100%; opacity: .8; }
#top-bar li { display: inline-block; margin-left: 2em; }

/* Hero */
#hero { color: #fff; padding: 12em 0 3em; text-align: center }
#hero .grid-2 { align-items: center; grid-gap: 1em; }
#hero .grid-2 .image img { width: 100%; }
#hero .text { font-size: 1.2em; color: rgba(255,255,255,.7); }
#hero .text h1 { color: #fff; }
#hero h1 { margin: 0; }
#hero .tagline { text-transform: uppercase; }
#hero p,
#hero .button { font-size: .8em; }

/* Main nav */
#menu-main-nav { display: flex; align-items: center; }
#menu-main-nav a { padding: .3em .8em .2em; border-radius: 1em; display: inline-block; text-align: center; }

#menu-main-nav > li { margin: 0 1px; }

#menu-main-nav .alt a { display: inline-block; font-weight: bold; padding: .2em .7em; border-radius: .2em; color: #fff; }

#menu-main-nav li { position: relative; }
#menu-main-nav li:hover > .sub-menu { display: block; }

#menu-main-nav .sub-menu { display: none; position: absolute; min-width: 10em; z-index: 1; left: 0; }
#menu-main-nav .sub-menu a { display: block; white-space: nowrap; }

#menu-main-nav .cart { font-size: 1.1em; font-weight: normal; }
#menu-main-nav .cart a { position: relative; }
#menu-main-nav .cart-count { position: absolute; font-size: .6em; top: -.5em; right: -.5em; color: #fff; background: red; border-radius: 2em; padding: 0 .4em; }

#menu-main-nav .my-account,
#menu-main-nav .check-out { display: none; }


#body { padding: 2em 0 0; }

#site-footer { color: #fff; padding: 5em 0; color: rgba(255,255,255,.5); }
#site-footer .heading { color: #fff; }
#site-footer .central-column { display: grid; grid-gap: 2em; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#site-footer .site-logo { margin-bottom: 2em; }

#site-footer a { color: rgba(255,255,255,.5); }
#site-footer a:hover { color: rgba(255,255,255,.9); }

#site-footer ul { margin: 0; padding: 0; list-style: none; }
#site-footer ul li { margin: 1em 0; }

/*** Pages ***/
/* Home */
.home #hero { text-align: left; padding-top: 8em; }

.home-block .heading { font-size: 1.8em; }
.home-block .text { font-size: 1.2em; }

.feature-list.home-block { padding-top: 3em; padding-bottom: 3em; }

.wordpress-features { color: #fff; padding: 5em 0; }
.wordpress-features .grid-2 { align-items: center; grid-gap: 5em; }
.wordpress-features .grid-2 .text > :first-child { margin-top: 0; }
.wordpress-features .grid-2 .image img { width: 100%; }
.wordpress-features p { opacity: .7; }

.for-sme { padding: 5em 0; }
.for-sme .grid-2 { align-items: center; grid-gap: 5em; }

.money-back { padding: 3em 0; }

/* SSD hosting */
.faq { padding: 2em 0; color: rgba(255,255,255,.9); margin-top: 5em; }
.faq h4 { font-size: 1.5em; margin: 1.5em 0 0; }
.faq p { color: rgba(255,255,255,.7); }


/*** margin, padding ***/
.padding-v4x { padding-top: 4em; padding-bottom: 4em; }


/*** min-width ***/


/*** max-width ***/
@media ( max-width: 1400px ) {

}

@media ( max-width: 1300px ) {

}

@media ( max-width: 1250px ) {
	.central-column{ margin-left: 1em; margin-right: 1em; }

	#menu-main-nav a { padding-left: .3em; padding-right: .3em; }
}

@media ( max-width: 1180px ) {

}

@media ( max-width: 1080px ) {
	#site-header .logo { width: 10em; }
	#menu-main-nav a { padding-left: .6em; padding-right: .6em; }
}

@media ( max-width: 980px ) {
	/* Mian Nav */
	#menu-main-nav-toggler { display: inline-block; cursor: pointer; width: 2.7rem; height: 2.7rem; position: relative; text-align: center; margin-right: 0 !important; color: #fff; }
	#menu-main-nav-toggler:before { font: bold 1.5rem/2.7rem "Font Awesome 5 Pro"; content: "\f0c9"; width: 2.7rem; height: 2.7rem; position: absolute; z-index: 2; left: -.5rem; top: 0; }

	#menu-main-nav-container a { display: inline-block; padding: .2em 0; color: #333; }
	#menu-main-nav-container .menu > li { position: static; display: block; float: none; height: auto; padding: 0; }
	#menu-main-nav-container .menu > li:after { content: ''; display: none; }
	
	#menu-main-nav-container .menu > li > a { font-size: 1.1em; }
	#menu-main-nav-container .sub-menu { padding: 0 0 .5em .8em; position: static; background: none; border: none; box-shadow: none; }
	#menu-main-nav-container .menu > li > .sub-menu { display: none; }
	#menu-main-nav-container .sub-menu a:hover { color: #fff; }
	#menu-main-nav-container .menu .sub-menu .sub-menu,
		#menu-main-nav-container .menu li:hover .sub-menu .sub-menu { display: block; }
	#menu-main-nav-container .sub-menu .sub-menu a { text-transform: none; }
	
	#menu-main-nav .sub-menu a { text-transform: none; font-weight: normal; padding: 0; color: #fff; }
	#menu-main-nav .sub-menu a:hover { color: #ffce27; }
	
	#menu-main-nav-container .menu-item-has-children .opener { display: inline-block; font-size: 1.1em; width: 1em; cursor: pointer; color: #fff; margin-left: -1em; }
	#menu-main-nav-container .menu-item-has-children .opener:before { content: '+'; }
	#menu-main-nav-container .menu-item-has-children.open .opener:before  { content: '-'; }
	#menu-main-nav-container .menu-item-has-children.open > .sub-menu { display: block; }
	
	#menu-main-nav-popup-toggler { position: absolute; top: .8em; right: 1em; cursor: pointer; z-index: 1; }
	#menu-main-nav-popup-toggler:before { font-family: "Font Awesome 5 Pro"; font-size: 1.2em; content: "\f00d"; }
	#menu-main-nav-popup-toggler:hover { text-shadow: 0 0 3px #fff; }
	
	#menu-main-nav-popup-container { display: none; position: fixed; top: 0; right: 0; z-index: 10; height: 100%; padding: .5em 1em .5em 1.5em; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; background: rgba(164, 84, 127, .9); color: #fff; width: 22em; flex-wrap: wrap; align-content: flex-start; }
	#menu-main-nav-popup-container a { color: #fff; }

	#menu-main-nav-popup-container .alt a,
	#menu-main-nav-popup-container .alt:hover a { background-color: #F42C51; color: #fff; margin-top: 1em; }

	#menu-main-nav-popup-container .opener { color: #fff; }
	#menu-main-nav-container.main-nav-on #menu-main-nav-popup-container { display: block; }
	
	#menu-main-nav { display: block; }
	#menu-main-nav > .current-menu-item > a,
		#menu-main-nav > li:hover > a { background: transparent; }

	#product-category-nav .menu a { border: none; display: inline-block; padding: 0.2em 0; }

	#main-nav { margin-left: 0; }
	#main-nav .menu { display: block; }

	#main-nav .menu > li > a { padding: 0; display: inline-block; }

	#main-nav .sub-menu { box-shadow: none; }
	#main-nav .sub-menu li { padding: 0; }
	#main-nav .sub-menu a { border: none; padding: 0.2em 0; }

	#menu-main-nav .cart.menu-item a { color: #fff; }
	#menu-main-nav .cart.menu-item.current-menu-item a { color: #ffce27; }
	
	/* Main nav - Icon */
	#menu-main-nav .my-account a:before,
	#menu-main-nav .cart a:before,
	#menu-main-nav .check-out a:before,
	.quick-contact .email:before,
	.quick-contact .phone:before { font-family: 'Font Awesome 5 Pro'; font-weight: normal; display: inline-block; width: 1.5em; text-align: center; margin-right: .2em; }
	
	/* Main nav - Shop link */
	#menu-main-nav .cart { font-size: 1em; }
	#menu-main-nav .cart a { background: none; color: #fff; font-family: 'Fjalla One'; font-weight: bold; }
	#menu-main-nav .cart a:before { content: '\f07a'; }

	#menu-main-nav .cart-count { right: -1.5em; }
	
	#menu-main-nav.menu .my-account a:before { content: '\f007'; }

	#menu-main-nav.menu .check-out a:before { content: '\f53c'; }

	#menu-main-nav .cart a:hover,
	#menu-main-nav .cart a:focus,
	#menu-main-nav .current-menu-ancestor > a { color: #ffce27; }

	/* Main nav - Quick contact */
	#menu-main-nav-container .quick-contact { display: block; }
	#menu-main-nav-container .quick-contact .email:before { content: '\f0e0'; }
	#menu-main-nav-container .quick-contact .phone:before { content: '\f095'; }

	/* Main nav - Search */
	#menu-main-nav-container .search-form { display: block; }

	/* Main nav - Social */
	#menu-main-nav-container .social-nav { display: block; }
	#menu-main-nav-container .social-nav li { display: inline-block; }

	/* Main nav - Border */
	#menu-main-nav.menu .my-account,
	#menu-main-nav-container .quick-contact,
	#menu-main-nav-container .search-form,
	#menu-main-nav-container .social-nav { margin-top: 1em; padding-top: 1em; border-top: 1px dashed rgba(255,255,255,.6); }


	/* Others */
	#top-bar > .central-column { flex-wrap: wrap; justify-content: space-between; }
	#top-bar form,
	#top-bar .email-container { width: 49%; margin-bottom: 1em; }
	#top-bar .email-container { text-align: right; }
}

@media ( max-width: 930px ) {

}

@media ( max-width: 900px ) {

}

@media ( max-width: 850px ) {
}

@media ( max-width: 768px ) {
}

@media ( max-width: 750px ) {

}

@media ( max-width: 700px ) {
}

@media ( max-width: 650px ) {

}

@media ( max-width: 600px ) {
}

@media ( max-width: 550px ) {
}

@media ( max-width: 500px ) {
}

@media ( max-width: 420px ) {

}

@media ( max-width: 400px ) {

}

@media ( max-width: 360px ) {
}

@media ( max-width: 330px ) {
	
	
}