.Cream-suger h1{font-size:50px;font-family: 'OpenSansBold_1'; color:#282828;line-height:1;} 
.Cream-suger ul.font, .Cream-suger ul.color{margin:0; padding:0;}
.Cream-suger ul li{list-style:none;}
.Cream-suger p{margin:0;}
body.Cream-suger{perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll !important; overflow-x: hidden;}
html {
  height: 100%;
  overflow: hidden;
}
		/* main banner start */
.Cream-suger section.main-banner{padding-top:130px;background-color:#abe2f2; position:relative; padding-bottom:70px; }

.Cream-suger section.main-banner .logo{width:100%; }
.Cream-suger section.main-banner .logo img{display:inline-block; max-width:100%;}
.Cream-suger section.main-banner .text-area p{font-size:25px; color:#259ec5;line-height:38px; font-family: 'opensanssemiboldwebfont_0'; margin-top:30px; margin-bottom:0; padding-right:15px;}
.Cream-suger section.main-banner .img-area{position:absolute; top:85px; background-image:url(../portfolio/CreamPlusSugar/images/banne2.png); background-repeat:no-repeat;height:725px;right:0;} 
.Cream-suger section.main-banner .img-area img{float:right;} 
		/* main banner End */

		
		/* assets srtar */
.Cream-suger section.assets{width:100%; padding-top:250px;}	
.Cream-suger section.assets h1{margin:0;}	
.Cream-suger section.assets ul.font{float:right; margin-top:40px;}	
.Cream-suger section.assets ul.font li{display:table; float:left; margin-left:90px;}	
.Cream-suger section.assets ul.font li:lastchild{margin-left:0;}	
.Cream-suger section.assets ul.font li h2{ color:#282828; margin:0; line-height:1 ;}	
.Cream-suger section.assets ul.font li .section-left, .Cream-suger section.assets ul.font li .section-right{display:table-cell; vertical-align:bottom; padding-left:45px;}	
.Cream-suger section.assets ul.font li .section-right p.top{font-size:30px; color:#cfcfcf;  text-align:center;}	
.Cream-suger section.assets ul.font li .section-right p.bottom{font-size:40px; color:#282828;  text-align:center; margin-top:30px;}	
.Cream-suger section.assets ul.font li:nth-child(1) .section-left h2{font-size:120px;}		
.Cream-suger section.assets ul.font li:nth-child(2) .section-left h2{font-size:60px;}		
.Cream-suger section.assets ul.font li:nth-child(2) .section-right p.top{font-size:30px;}		
.Cream-suger section.assets ul.font li:nth-child(2) .section-right p.bottom{font-size:20px; margin-top:50px;}		
.Cream-suger section.assets .color-section{float:left; width:100%;margin-top:175px;}		
.Cream-suger section.assets .color-section h1{float:left; }				
.Cream-suger section.assets .color-section ul.color {float:right;  }		
.Cream-suger section.assets .color-section ul.color li{display:inline-block; box-shadow:3px 3px 20px 0px hsla(0, 0%, 0%, 0.22);}		
.Cream-suger section.assets .color-section ul.color li + li{margin-left:10px; }		
.Cream-suger section.assets .color-section ul.color li .clr{height:182px; width:188px;background-color:transparent; }	
.Cream-suger section.assets .color-section ul.color li:nth-child(1) .clr{background-color:#abe2f2; }		
.Cream-suger section.assets .color-section ul.color li:nth-child(2) .clr{background-color:#d1de35; }		
.Cream-suger section.assets .color-section ul.color li:nth-child(3) .clr{background-color:#22b19d; }		
.Cream-suger section.assets .color-section ul.color li:nth-child(4) .clr{background-color:#ed1d24; }		
.Cream-suger section.assets .color-section ul.color li .color-name{background-color:transparent; color:#282828; font-family:'opensanssemiboldwebfont_0'; padding:12px 0;}	
.Cream-suger section.assets .color-section ul.color li .color-name p{text-align:center; font-size:25px;}	
		/* assets end */
		

		
		/* layout section start */
.Cream-suger section.layout{width:100%; position:relative; z-index:9;}
.Cream-suger section.layout:before{content:""; position:absolute; background-color:#22b19d; top:63.8%; left:0; right:0; bottom:0; z-index:-9;}
.Cream-suger section.layout .main-layout{width:100%; float:left; text-align:center; margin-top:125px;}
.Cream-suger section.layout .menu{width:100%;margin-top:45px; float:left; margin-bottom:-55px;}
.Cream-suger section.layout .menu-img{width:100%; float:left;box-shadow: 3px 3px 20px 0px hsla(0, 0%, 0%, 0.22);}
.Cream-suger section.layout .menu-img img{display:inline-block; max-width:100%;}
		/* layout section end */

		
		
		/* prefft start */
.Cream-suger section.prefft{width:100%;  background-color:#d1de35; position:relative; height:1500px; z-index:-9;}
.Cream-suger section.prefft img{display:inline-block;}	
		
		/* perellex effect */
.Cream-suger .slide {position: relative; padding: 80vh 10%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; }
.Cream-suger section.prefft img {position: absolute; top: 50%; left: 35%;transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(-40deg);  background: rgba(240,230,220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.Cream-suger section.prefft img:nth-child(1){left:54%;}
.Cream-suger section.prefft img:nth-child(2) {transform: translateZ(0.4px) scale(.6) translateX(-108%) translateY(-45%) rotate(-40deg);left:56%; z-index:9;}
.Cream-suger section.prefft img:nth-child(3) {transform: translateZ(.4px) scale(.6) translateX(-134%) translateY(-40%) rotate(-40deg);left:65%;}
		/* perellex effect */
		/* prefft end */

		
		

		/* footer start */
.Cream-suger footer.creamfooter{width:100%;float:left;background-color:#ed1d24; padding-top:80px;}
.Cream-suger .footer{position: static;margin-top: -96px;}
		/* footer end */

	
		
		
		
		
		
		
		
		
@media(max-width:1345px){
.Cream-suger section.main-banner .img-area img{max-width:94%;}
}

@media(max-width:1199px){
.Cream-suger section.main-banner .text-area{width:33%;}
.Cream-suger section.main-banner .img-area img{max-width:70%;}
.Cream-suger section.assets .color-section ul.color{ margin-top:70px; width:100%; text-align:center;}
.Cream-suger section.layout .main-layout{margin-top:25px;}
.Cream-suger section.layout:before{top:62.8%;}
.Cream-suger section.main-banner .img-area{top:20%;}
.Cream-suger section.assets ul.font{ margin-top:70px;width:100%; text-align:center; }
.Cream-suger section.assets ul.font li:nth-child(1) {margin-left:0;}
}

@media(max-width:991px){
.Cream-suger section.main-banner{padding-top:70px; min-height:1100px; padding-bottom:0; }
.Cream-suger section.main-banner .text-area, section.main-banner .img-area{width:100%;}
.Cream-suger section.layout:before{top:64.9%;}
.Cream-suger section.main-banner .img-area img{max-width:100%;}
.Cream-suger section.main-banner .text-area p{ padding-right:0;}
.Cream-suger section.assets .color-section ul.color, section.assets ul.font{ margin-top:50px;}
.Cream-suger section.assets .color-section ul.color li .clr{height:150px; width:150px;}
.Cream-suger section.assets ul.font li + li{margin-top:40px; margin-left:0;}
.Cream-suger section.assets{padding-top:100px;}
.Cream-suger section.main-banner .img-area{height:565px;top:48%; background-size:100%;}
.Cream-suger section.assets .color-section{margin-top:120px;}
.Cream-suger section.layout .main-layout{margin-top:50px;}
.Cream-suger footer.creamfooter{padding-top:70px;}
}

@media(max-width:840px){

}

@media(max-width:767px){
.Cream-suger section.assets .color-section ul.color{text-align:center; width:100%;}
.Cream-suger section.main-banner{min-height:900px;}
.Cream-suger section.assets .color-section ul.color li{min-width:50%; }
.Cream-suger section.assets .color-section ul.color li .clr{width:100%;}
.Cream-suger section.assets .color-section ul.color li + li{margin-left:0; margin-top:50px;}
.Cream-suger section.assets ul.font li:nth-child(1) .section-left h2{font-size:80px;}
.Cream-suger section.assets ul.font li:nth-child(2) .section-left h2{font-size:80px;}
.Cream-suger section.assets ul.font li .section-right p.top{font-size:25px;}
.Cream-suger section.assets ul.font li .section-right p.bottom{font-size:30px; margin-top:15px;}
.Cream-suger section.assets ul.font li:nth-child(2) .section-right p.top{font-size:25px;}
.Cream-suger section.assets ul.font li:nth-child(2) .section-right p.bottom{font-size:30px; margin-top:15px;}
.Cream-suger section.assets ul.font li{float:left; width:100%;}
.Cream-suger section.main-banner .img-area{height:470px; top:50%;}
.Cream-suger section.assets ul.font li .section-left {width:130px;}
.Cream-suger section.assets ul.font li .section-left h2{text-align:left;}
.Cream-suger section.assets ul.font li .section-right p.top, section.assets ul.font li .section-right p.bottom{text-align:left;}
.Cream-suger section.layout .menu-img{display:inline-block; float:none; text-align:center; width:auto;}
.Cream-suger section.layout:before{top:34.4%;}
.Cream-suger section.layout .menu-img {margin-top:50px;}
.Cream-suger .footer{margin-top:-130px;}
.Cream-suger section.prefft{height:950px;}
}
@media(max-width:550px){
.Cream-suger section.main-banner .img-area{top:58%;}
}
@media(max-width:480px){
.Cream-suger h1{font-size:35px;}
.Cream-suger section.main-banner .logo{text-align:center;}
.Cream-suger section.main-banner .text-area p{text-align:center;}
.Cream-suger section.assets h1, section.assets .color-section h1{text-align:center; float:none;}
.Cream-suger section.main-banner{min-height:770px; padding-bottom:0;}
.Cream-suger section.main-banner .img-area{height:300px; top:63%;}
.Cream-suger section.assets ul.font li:nth-child(1) .section-left h2, section.assets ul.font li:nth-child(2) .section-left h2{font-size:60px;}
.Cream-suger section.assets ul.font li .section-right p.top, section.assets ul.font li .section-right p.bottom{font-size:25px;}
.Cream-suger section.assets ul.font li .section-left{width:90px;}
.Cream-suger section.assets ul.font li + li{margin-top:15px;}
.Cream-suger section.assets .color-section ul.color li .color-name p{font-size:20px;}
.Cream-suger section.assets ul.font li .section-right p.bottom{margin-top:10px;}
.Cream-suger section.main-banner .text-area p{font-size:20px;line-height:30px;}
.Cream-suger section.assets .color-section{margin-top:90px;}
.Cream-suger section.assets .color-section ul.color li + li{margin-top:30px;}
.Cream-suger section.layout{padding-bottom:50px;}
.Cream-suger section.assets ul.font li:nth-child(2) .section-right p.bottom{font-size:22px;}
.Cream-suger section.layout:before{top:24.4%;}
.Cream-suger section.layout .menu{margin-bottom:0;}
.Cream-suger section.assets{padding-top:70px;}
.Cream-suger footer.creamfooter{padding-top:30px;}

}



@media(min-width:1920px){
.Cream-suger section.main-banner .img-area{background-position-x:-20%; width:67% !important;}
}

@media(min-width:1500px){
.Cream-suger section.main-banner .img-area{background-position-x:22%; width:69%;}
}

@media(min-width:768px){
.Cream-suger .p-r-20{padding-right:32px; padding-left:32px;}
.Cream-suger .m-r-20{margin-right:32px; margin-left:32px;}
}
/* media quaries end */