﻿
/*----------------------------------------------
>>> General Page Style
-----------------------------------------------*/	



/*----------------------------
 1.0 Big Div (Single Div)
 -----------------------------*/	

.BigDiv{
    display:block;
	width:100%;
	height:auto;
	margin:0 auto;
    padding:30px 0;
    overflow:hidden;
}



#BigDiv-colorbg{
	background:#f2f3f5;
}


#BigDiv-Empty{
	width:100%;
	height:100px;
}

#BigDiv-textalignleft{
  width:70%;
  height:auto;
  
}

#BigDiv-innerphotolink {
   position:relative;
   top:0;
   margin:0 auto;   
   text-align:center;
   width:100%;
   height:auto;
   padding-bottom:5%;
   

}

#BigDiv-innerphotolink img{
   display:inline;
   width:12%;
   height:auto;
   text-align:center;
   margin:0 3%;
}



.BigDiv-innerdiv{
   width:60%;
   height:auto;
   margin:0 auto 10% auto;
   text-align:center;
   padding:5% 0;

}

.BigDiv-innerdiv p{
   padding:0 10%;
}



/*---Image & Text---*/

.BigDiv img{
	max-width:100%;
	height:auto;
	text-align:center;
	padding:0 auto;
}

.BigDiv h1, h2, h3{ 
    text-align:center;
	padding:10px 30px;
}

.BigDiv h2{ 
    text-align:center;
	padding:10px 30px;
}


.BigDiv p{
	text-align:left;
	margin:0 18%;
}

.BigDiv video{
	display:block;
    margin: 0 auto;
}


#BigDiv-textalignleft h3{
    text-align:left;
    padding:0;
    margin:0;



}

#BigDiv-textalignleft p{
    text-align:left;
    padding:0;
    margin:0;

}

/*----------------------------
 1.0 Big Div >>> MOBILE
 -----------------------------*/	

@media screen and (max-width: 768px){

#BigDiv-Empty{
	width:100%;
	height:30px;
}

.BigDiv-innerdiv{
   position:relative;
   bottom:0;
   width:100%;
   height:auto;
   padding-top:10%;
   text-align:center;
   margin:0;

}

#BigDiv-innerphotolink img{
   display:inline;
   width:20%;
   height:auto;
   text-align:center;
   margin:0;
}


/*---Image & Text---*/
.BigDiv p{
	text-align:left;
	margin:0 8%;
}

.BigDiv h1, h2, h3{ 
    text-align:center;
	padding:5px 30px;
}

.BigDiv h2{ 
    text-align:center;
	padding:10px 10px;
}

.BigDiv video{
   width:100%;
   height:auto;
}

}

/*----------------------------
 2.0 BigDiv2 (2 columns Div)
 -----------------------------*/	


.BigDiv2{    
    display:block;
	width:80%;
	height:auto;
	margin:0 auto;
    padding:30px 10%;
    overflow:hidden;
}

#BigDiv2-colorbg{
	background:#eeefef;
}


.BigDiv2 div{
    float:left;
   	display:inline;
	width:50%;
	height:auto;
	margin:30px auto;
	padding:0;
	text-align:center;	

}


#BigDiv2-bottomline{
   border-bottom-style:solid;
   border-color:#eeefef;;
	
}

#BigDiv2-button{
    display:block;
	width:100%;
	height:auto;
	margin:0;
    padding:30px 0;
    overflow:hidden;

  }  
  
#BigDiv2-button div{
  	display:inline;
	height:auto;
	margin:0 auto;
	padding:0;
	text-align:center;	

}

#BigDiv2-button button{
  	position:relative;
  	top:-250px;
  
}
 
#button-left{
   position:relative;
   left:-100px;

}

#button-right{
   position:relative;
   right:-150px;

}

/*--for cleansing page--*/
#BigDiv2-split{    
    display:block;
	width:95%;
	height:auto;
	margin:0 auto;
    padding:0;
    overflow:hidden;
    text-align:center;
    background:#eeefef;
}

#BigDiv2-split img{ 
  width:85%;
}



  
/*---Image---*/

.BigDiv2 div img{
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
}


/*---Text-center Div---*/

.BigDiv2-content{
    width:50%;
	text-align:center;
	margin:0 auto;
	padding-top:100px;
   	
}

.BigDiv2-content h1 {
	text-align:center;
	padding-left:150px;

}

.BigDiv2-content p{
	text-align:center;
	padding-left:150px;

}


/*---Text-left Div---*/

.BigDiv2-content2{
    width:30%;
	text-align:center;
	margin:0 auto;
	padding:100px 0 10% 10%;
	padding-top:120px;
   	
}

.BigDiv2-content2 h1{
	text-align:left;
	padding-right:80px;
	padding-left:80px;

}

.BigDiv2-content2 h2{
	text-align:left;
	padding-right:80px;
	padding-left:80px;

}


.BigDiv2-content2 h3{
	text-align:left;
	padding-right:80px;
	padding-left:80px;

}


.BigDiv2-content2 p{
	text-align:left;
	padding-right:80px;
	padding-left:80px;

}

/*--for aboutus page--*/
#BigDiv-content2-aboutus-textleft p{
	text-align:left;
	padding-right:120px;
	padding-left:10px;

}

#BigDiv-content2-aboutus-textleft h3{
	text-align:left;
	padding-right:120px;
	padding-left:10px;

}



#BigDiv-content2-aboutus-textright p{
	text-align:left;
	padding-right:10px;
	padding-left:120px;

}

#BigDiv-content2-aboutus-textright h3{
	text-align:left;
	padding-right:10px;
	padding-left:120px;

}



/*---Text-right---not done yet*/

.BigDiv2-content3{
    width:50%;
	text-align:center;
	margin:0 auto;
	padding-top:100px;
   	
}


.BigDiv2-content3 h1 {
	text-align:right;
	padding-left:150px;

}

.BigDiv2-content3 p{
	text-align:right;
	padding-left:150px;

}

/*----------------------------
 2.0 BigDiv2 >>> MOBILE
 -----------------------------*/	

@media screen and (max-width: 768px){
   
.BigDiv2{
     width:100%;
     height:auto;
	 padding:30px 0;
	 position:relative;
	 top:-30px;
	 overflow:hidden;
	 margin-bottom:0;

}

.BigDiv2 div{
    float:left;
   	display:block;
	width:100%;
	height:auto;
	margin:0;
	text-align:center;
	padding:10px;
	overflow:hidden;
}


#BigDiv2-button{
     width:100%;
     height:auto;
	 padding:30px 0;
	 position:relative;
	 top:-30px;
	 overflow:hidden;
	 margin-bottom:0;

}

#BigDiv2-button div{
    display:inline;
	width:50%;
	height:auto;
	margin:0;
    padding:0;


  }
  
  
#BigDiv2-button button{
  	position:relative;
  	top:0;
  	left:20px;
  	margin:0 auto;

  
}
  


/*---Image---mobile---*/

.BigDiv2 div img{
	max-width:80%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
}

#BigDiv2-button img{
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	text-align:center;
}



/*---Text-center Div---mobile---*/

.BigDiv2-content{
    width:100%;
	text-align:center;
	margin:0 auto;
	padding-top:100px;
   	
}

.BigDiv2-content h1 {
	text-align:center;
	padding:0 30px;

}

.BigDiv2-content p {
	text-align:center;
	padding:0 30px;

}


/*---Text-left Div---mobile---*/

.BigDiv2-content2{
    width:100%;
	text-align:center;
	margin:0 auto;
	padding-top:100px;
   	
}

.BigDiv2-content2 h1 {
	text-align:center;
	
}

.BigDiv2-content2 h2 {
	text-align:left;	
}

.BigDiv2-content2 h3 {
	text-align:left;
}

.BigDiv2-content2 p {
	text-align:left;	
}




/*--for aboutus page--mobile---*/
#BigDiv-content2-aboutus-textleft p{
	text-align:left;
	padding:0 10%;
}

#BigDiv-content2-aboutus-textleft h3{
	text-align:left;
	padding:0 10%;

}



#BigDiv-content2-aboutus-textright p{
	text-align:left;
	padding:0 10%;

}

#BigDiv-content2-aboutus-textright h3{
	text-align:left;
	padding:0 10%;

}





/*---Text-right Div--mobile---*/

.BigDiv2-content3{
    width:100%;
	text-align:center;
	margin:0 auto;
	padding-top:100px;
   	
}

.BigDiv2-content3 h1 {
	text-align:center;
	padding:0 30px;

}

.BigDiv2-content3 p {
	text-align:center;
	padding:0 30px;

}

/*---column border---mobile---*/

#BigDiv-content2-aboutus-textleft {
  border-right-style:none;
  border-bottom-style:solid;
  border-bottom-color:#fff;
    
}


}


/*----------------------------
 3.0 BigDiv3 (3 columns Div)
 -----------------------------*/	

.BigDiv3{
    display:block;
	width:80%;
	height:auto;
	margin:0 auto;
    padding:10px 10%;
    overflow:hidden;
    
}
#BigDiv3-colorbg{
	background:#eeefef;
}


#BigDiv3-colordiv div{
	background: #f7f6f6;
	height:500px;
}


.BigDiv3 div{
    float:left;
   	display:inline;
	width:30%;
	height:auto;
	margin-left:3%;
	margin-bottom:50px;
	padding:0;
	text-align:center;	

}



/*---Image & Text---*/

.BigDiv3 div img{
	max-width:100%;
	height:auto;
}


.BigDiv3 h3{ 
    text-align:center;
	margin:5px auto;
}

.BigDiv3 div p{
	text-align:center;
	margin:0;
	padding:0 10%;

}

/*---List Items---*/

.BigDiv3 ul li{
	text-align:left;
	margin:0;
	padding:0 6%;

}

/*----------------------------
 2.0 BigDiv3 >>> MOBILE
 -----------------------------*/	

@media screen and (max-width: 768px){
   
.BigDiv3{
   width:100%;
   height:auto;
   padding:0;
   position:relative;
   top:0;
   overflow:hidden;

}

.BigDiv3 div{
    float:left;
   	display:block;
	width:100%;
	height:auto;
	margin:0;
	margin-bottom:50px;
	text-align:center;
	padding:0;
	overflow:hidden;
}

#BigDiv3-colordiv div{
	background:#f7f6f6;
	height:auto;
	padding-bottom:5%;
	width:80%;
	margin-left:10%;
}

/*---Image & Text---*/

.BigDiv3 div img{
	max-width:70%;
	height:auto;
}

.BigDiv3 p{
	text-align:left;
	margin:0 5%;
}
.BigDiv3 h1, h2, h3{ 
    text-align:center;
	margin:5px 5%;
}


/*---List Items---*/

.BigDiv3 ul li{
	text-align:left;
	margin:0;
	padding:0 6%;
	margin-left:20%;

}
}


/*----------------------------
 4.0 BigDiv4 (4 columns Div)
 -----------------------------*/	

.BigDiv4{
    display:block;
	width:80%;
	height:auto;
	margin:0 auto;
    padding:30px 10%;
    overflow:hidden; 
    background:#eeefef;
    
}


.BigDiv4 div{  
    float:left;
   	display:inline;
	width:22%;
	height:auto;
	margin-left:2%;
	margin-bottom:50px;
	text-align:center;	
}

/*---Image & Text---*/

.BigDiv4 div img{
	max-width:100%;
	height:auto;
}


.BigDiv4 h3{ 
    text-align:left;
	margin:5px auto;
}

.BigDiv4 div p{
	text-align:left;
	margin:0;
	padding:0 6%;

}


.BigDiv4 div p.small{
	text-align:center;
	margin:0;

}



/*----------------------------
 4.0 BigDiv4 >>> MOBILE
 -----------------------------*/	


@media screen and (max-width: 470px){

.BigDiv4{
     width:100%;
     height:auto;
	 padding:30px 0;
	 position:relative;
	 top:0;
	 overflow:hidden;
	 margin-bottom:0;
}

.BigDiv4 div{
    float:left;
   	display:inline-block;
	width:45%;
	height:auto;
	margin:0 auto;
	margin-bottom:10px;
	text-align:center;
	padding-bottom:30px;
	overflow:hidden;
}

/*---Image & Text---*/

.BigDiv4 div img{
	max-width:90%;
	height:auto;
}

.BigDiv4 p{
	text-align:left;
	margin:0 5%;
}

.BigDiv4 h3{ 
    text-align:left;
	margin:0 5%;
}


}


/*----------------------------
 5.0 BigDiv5 (5 columns Div)
 -----------------------------*/	

.BigDiv5{
    display:block;
	width:90%;
	height:auto;
	margin:0 auto;
    padding:30px 0;
    overflow:hidden;

}

.BigDiv5 div{  
   
    float:left;
   	display:inline;
	width:18%;
	height:auto;
	margin-left:2%;
	margin-bottom:50px;
	padding:0;
	text-align:center;


}


/*---Image & Text---*/

.BigDiv5 div img{
	width:30%;
}


.BigDiv5 div p{
	text-align:left;
	margin:0;
	padding:0 10%;

}

.BigDiv5 div h3{
	text-align:center;
	margin:0;
	padding:0;

}


.BigDiv5 ul li{
	text-align:left;
	margin:0;
	padding:0 6%;

}

/*----------------------------
 5.0 BigDiv5 >>> MOBILE
 -----------------------------*/	

@media screen and (max-width: 768px){

.BigDiv5{
	padding:0;
	position:relative;
	top:0;
	overflow:hidden;

}

.BigDiv5 div{
    float:left;
   	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	margin-bottom:50px;
	text-align:center;
	padding:0;
	overflow:hidden;
}


/*---Image & Text---*/

.BigDiv5 div img{
	max-width:70%;
	height:auto;
}

.BigDiv5 p{
	text-align:left;
	margin:0 5%;
}
.BigDiv5 h1, h2, h3{ 
    text-align:center;
	margin:5px 5%;
}
}


/*----------------------------
 6.0 Buttons
 -----------------------------*/	


.button {
    border: none;
    color:#f2f3f5;
    padding: 10px 35px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 12px;
    margin: 4px auto;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color:transparent;
    color: #c2b59b;
    font-weight:bold;
    border: 1px solid #c2b59b;
    border-radius:5px;
   
}

.button1:hover {
    background-color: #c2b59b;
    color: #8e7a3f;   
}


}
.button2{
    background-color:#c2b59b;
    color:#f2f3f5;
    font-weight:bold;
    border-radius:3px;

}

.button2:hover {
    background-color:#c2b59b;
    color: #8e7a3f;
      
}

.button3{
    background-color:#c2b59b;
    color:#f2f3f5;
    font-weight:bold;
    border-radius:30px;
    font-size:90%;

	
}

.button3:hover {
    background-color:#c2b59b;
    color: #8e7a3f;
      
}

.button4{
    background-color:#c2b59b;
    color:#f2f3f5;
    font-weight:bold;
    border-radius:3px;


	
}

.button4:hover {
    background-color:#c2b59b;
    color: #8e7a3f;
      
}




/*----------------------------
 7.0 BigPhoto
 -----------------------------*/	

#mobile {
	display:none;
}

.BigPhoto{
   position:relative;
   bottom:0;
   width:100%;
	height:auto;
	margin:0 auto;
    padding:0;
    overflow:hidden;

}

.BigPhoto img{
   display:block;
   max-width:100%;
   height:auto;
   margin:0 auto;
   overflow:hidden;
   
}

#BigPhoto-products img{
   display:block;
   max-width:95%;
   height:auto;
   margin:10px auto;
   overflow:hidden;

}

#BigPhoto-IG {
	margin:0 auto;
	text-align:center; 
	width:70%
}

@media screen and (max-width: 768px){

#desktop{
	display:none!important;
}

#mobile{
	display:block;	
}


.BigPhoto img{
   display:block;
   width:100%;
   height:auto;
   margin:0 auto;
   overflow:hidden;
   
}


#BigPhoto-IG {
	margin:0 auto;
	text-align:center; 
	width:100%
}

   
}


/*----------------------------
 8.0 BigTitle
 -----------------------------*/	


.bigtitle {
    position:absolute;
    top:80px;
    width:100%;
    height:70px;
   	background-color:#313c52;
}

.bigtitle h2{
	text-align:center;
	color:#c2b59b;
	padding:15px 0;
}


@media screen and (max-width: 768px){
.bigtitle {
    position:absolute;
    top:100px;
    width:100%;
    height:70px;
   	background-color:#313c52;
}
}

.bigtitle-division {
    width:100%;
    height:60px;
    padding:0 auto;

}

.bigtitle-division h1{
    text-align:center;

}

@media screen and (max-width: 768px){
.bigtitle-division {
    width:100%;
    height:60px;

}
}













/*-----------------------PAGE: Index-------------------------------*/

.video-overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	
}


.video-overlay img{
	width:100%;
	text-align:center;
	margin:0 auto;
}

.buttonoverlay{
	position:relative;
	top:-80px;
	left:0;
	width:100%;
	height:auto;

}




@media screen and (max-width: 768px){

.video-overlay{
	position:absolute;
	top:60px;
	left:0;
	width:100%;
	height:auto;	
	
}

.video-overlay img{
	width:100%;
	text-align:center;
	margin-top:30px;
	
}

.buttonoverlay button{
    padding: 8px 16px;
    font-size: 12px;
        
}

.buttonoverlay{
	position:relative;
	top:-60px;
	left:0;
	width:100%;
	height:auto;
	
}
}

	

/*-----------------------PAGE: beautyroller-------------------------------*/

.Bigvideo{
	width:80%;
	height:auto;
	padding:30px 0;
	margin:0 auto;
	 
}

.video-container iframe{    
  position: absolute;
  top: 0;
  left:0;
  width:100%;
  height:100%;

}


.video-container{ 
   position: relative;
   padding-bottom: 56.25%;
   padding-top:0; 
   padding-left:0;
   padding-right:0;
   height: 0;
   overflow: hidden;  
}




/*-----------------------PAGE: boiitips-------------------------------*/
#websitenotready div{
	width:100%;
	height:300px;

}



/*-----------------------PAGE: Contact-------------------------------*/

#BigDiv2-contact{
    position:relative;
    top:0;
    width:90%;
    padding:0 5%;
    height:auto;  
    overflow:hidden;


}




#BigDiv2-content2-contact{
   margin:40px 0;
  
 
}


#BigDiv2-content2-contact p{
	text-align:left;
	margin:0;
	padding:0;
	 padding-right:30%;
}

#BigDiv2-content2-contact h3{
	text-align:left;
	margin:0;
	padding:0;
	 padding-right:30px;
}

#BigDiv2-content2-contact h2{
	text-align:left;
	margin:0;
	padding:0;
	 padding-right:30px;
}


.button2{
	margin:0 auto;
}



@media screen and (max-width: 768px){

#BigDiv2-contact{
    width:100%;
    padding:0;
    height:auto;
    position:relative;
    top:0;
    overflow:hidden;

}

.googleMap{
   margin-top:30px;
   width:100%;
   height:300px;
   background:#dcdcdc;
   padding:0;

}

.googleMap iframe{
   width:100%;
   height:300px;
    padding:0;

}


#BigDiv2-content2-contact{
   	width:90%;
	height:auto;
	padding:0 5%;
	overflow:hidden;

}

#BigDiv2-content2-contact p{
	text-align:left;
	margin:0 auto;
	padding:0;
}

#BigDiv2-content2-contact h3{
	text-align:left;
	margin:0 auto;
	padding:0;
}

}




/*-----------------------PAGE: Thank You & order-confirmation-------------------------------*/

#BigDiv-confirmation1{
    width:100%;
    padding:10% 0;
    height:100px;
    position:relative;
    top:0px;
    overflow:hidden;

}


#BigDiv-confirmation1 h1,p{
	text-align:center;
	margin:0 auto;

}



@media screen and (max-width: 768px){

#BigDiv-confirmation1{
    width:100%;
    padding:10% 0;
    height:300px;
    position:relative;
    top:0;
    overflow:hidden;


}

}

