@charset "UTF-8";

/*--- Fluid Layout ---*/
.container-fluid::after{
	content:" ";
	display:table;
	clear:both;
}
.clear{
	clear:both;
}
.fluidLeft{
	float:left;
}
.fluidRight{
	float:right;
}

/*--- Grid System ---*/
.gridContainer{
	display:grid;
	grid-template-columns: auto auto auto auto;
}
.gridItem{
	text-align:center;
	margin: 0px;
	width: 20rem;
	height:40rem;
}
.col1{width:6.80%;}
.col2{width:15.27%;}
.col3{width:23.75%;}
.col4{width:32.22%;}
.col5{width:40.69%;}
.col6{width:49.16%;}
.col7{width:57.63%;}
.col8{width:66.11%;}
.col9{width:74.58%;}
.col10{width:83.05%;}
.col11{width:91.52%;}
.col12{width:100%;}

/*--- Flex Layout ---*/
.flexbox{display:flex;}
.flexwarp{flex-wrap:wrap;}
.flexDirectionC{flex-direction:column;}
.justifyContentBetween{justify-content:space-between;}
.justifyContentCenter{justify-content:center;}
.justifyContentStart{justify-content: flex-start;}
.justifyContentEnd{justify-content: flex-end;}
.alignItemsStart{align-items:flex-start;}
.alignItemsCenter{align-items: center;}

/*--- Position ---*/
.positionR,.dropdown{position:relative;}
.positionA,.dropdown-menu{position: absolute;}
.positionF{position: fixed;}


/*--- Dropdown Menu ---*/
.dropdown-menu{padding: 1rem;}
.dropdwon-menu-bottom{top: 100%;left:0;}
.dropdwon-menu-top{bottom: 100%;left:0;}
.dropdwon-menu-left{top:0;right: 100%;}
.dropdwon-menu-right{top:0;left: 100%;}
.dropdown{line-height: rem;}
.dropdown>img,.dropdown p{display: block;padding: 0.5rem;transition:all 0.5s 0.2s;}
.dropdown:hover>img,.dropdown-menu>li:hover p {color:#003399;font-size: 2rem;}
.dropdown-menu{background-color: ;display:block;visibility:hidden;transition: all 0.5s 0.2s}
.dropdown:hover img+.dropdown-menu,.dropdown-menu>li:hover a+.dropdown-menu
 {display: block;animation: dropdownMenuIn 2s 0.2s forwards;}
 .dropdown-menu>{line-height: rem;}

/*--- Common Style ---*/
[data-ui*=hidden]{display:none;}
.container{width:85%;margin:0 auto;}
.bggray{background-color: #999999;}
.bgDarkgray{background-color:#333;}
.bgDarkgray a{color:white;}
.bgWhite{background-color:white;}
.bgLightblue{background-color:lightblue;}
.bgLightgray{background-color: #a6a6a6;}
.paddingV1{padding:1rem 0;}
.paddingV2{padding:2rem 0;}
.paddingV3{padding:3rem 0;}
.paddingH1{padding:0 1rem;}
.paddingH2{padding:0 2rem;}
.paddingH3{padding:0 3rem;}
.paddingAll1{padding: 1rem 1rem;}
.paddingAll2{padding: 2rem 2rem;}
.paddingBottomV2{padding-bottom: 2rem;}
.marginCenter{margin:0 auto;}
.marginAll1{margin: 1rem 1rem;}
.textwhite{color: white;}
.textNevin{;}
.banner1{background-attachment: fixed;background-size:100% auto;background-repeat:no-repeat;
	background-image:linear-gradient(to bottom, rgb(255, 255, 255,0.7) 0%, 
		rgb(255, 255, 255,0.7) 100%),url(../images/bg-2.jpg);color: #113213;}
.banner2{background-attachment: fixed;background-size: 100% auto;background-repeat: no-repeat;
	background-image: url(../images/bg-3.4.jpg);}
.banner3{background-attachment: fixed;background-size: 100% auto;background-repeat: no-repeat;
	background-image:linear-gradient(to bottom, rgb(255, 255, 255,0.7)0%,rgb(255, 255, 255,0.5)100%),
	url(../images/texture-1.jpg);}
.lineHeight1{line-height: 2rem;}
.lineHeight2{line-height: 3rem;}
.dividingLine>h1{font-size: 1.5rem;position: relative;color:#996600;font-weight: bold;margin-bottom: 1rem;}
.dividingLine>h2{font-size: 1.5rem;font-weight: bold;}
.dividingLine>h1::before{content: " ";width:7rem;height:115%;top:0;left:calc((100% - 7rem) / 2);border-bottom:2px solid #996600;
position: absolute;}
.buttonRadius{border-radius: 1.5rem;}
.productText{font: italic bold 1.5rem/1rem;color: white;}
.showborder{border: 2px solid black;}
.ifYouLikebutton{background-color:#62C757;border: none;color: white;padding: 0.75rem 1rem;
	text-align: center;cursor: pointer;border-radius: 1rem;}
.ifYouLikebutton:hover{background-color: #45ac39;}
.ifYouLikeGrid{display: grid;grid-template-columns:auto auto auto;grid-gap:2rem 0.5rem;}
.ifYouLikeGridItem1{grid-column-start: 1;grid-column-end: 4;}

/*--- adviceBar Style ---*/

#ifYouLike>div>:nth-child(3)>:nth-child(2)>form>input[type*=text]{display:inline-block;width:85%;line-height:2rem;
	outline:none;}


/*--- Animation ---*/
@keyframes dropdownMenuIn{
	from{visibility:hidden;opacity:0;}
	to  {visibility:visible;opacity:1;}
}


/*--- Phone Landscape Style ---*/
@media screen and (min-width: 576px;) {
	body {background-color: brown;}
	
}

/*--- Pad Portrait Style ---*/
@media screen and (min-width: 768px;) {
	body {background-color: pink;}

}

/*--- Pad Landscape Style ---*/
@media screen and (min-width: 992px;) {
	body {background-color: lightblue;}

}

/*--- PC Style ---*/
@media screen and (min-width: 1281px;) {
	body {background-color: yellow;}

}