/******************** NOTIFICATIONS SECTION *********************/                                                                   
                                                  
/********* 850px *********/
@media (max-width: 850px) {
/* notif */
#Notif {
	width: 300px; /* changed */
	left: calc(50% - 156px); /* changed */
}

/* information */
#Notif #Information {
	width: 220px; /* changed */
}
}
 






     
/******************** HOME SECTION ********************/   
         
/********* max-height *********/
@media (max-height: 600px) {
#HomeSection {
    height: 600px;
}
}

/********* 1250px *********/
@media (max-width: 1250px) { 
/* home blurb */
#HomeSection #HomeBlurb {      
    right: calc(25% - 200px);  
} 
}

/********* 1200px *********/
@media (max-width: 1200px) { 
#HomeSection {
	margin-top: 80px;  
}

/* image */
#HomeSection #HomeImage {
	background-position-x: 50%;      
} 
}

/********* 900px *********/
@media (max-width: 900px) { 
/* image */
#HomeSection #HomeImage {
	background-position-x: 20%;      
} 

/* overlay */
#HomeSection #HomeImage #HomeOverlay {
	display: block;
}
  
/* home blurb */
#HomeSection #HomeBlurb {    
    width: 330px;
    top: 45%;
    right: calc(50% - 165px);
} 

#HomeSection #HomeBlurb p {
	margin-top: 30px;
} 
}

/********* 850px *********/
@media (max-width: 850px) { 
#HomeSection {
	margin-top: 70px;   
} 
}
  







/******************** REVIEW CAROUSEL SECTION *********************/         
              
/********* 850px *********/
@media (max-width: 850px) { 
/* car el - content */
#ReviewCarouselSection .rc-el .content {
    width: 290px; 
    padding: 40px 0px 40px;
}

/* car el - content - stars */
#ReviewCarouselSection .rc-el .content .stars {
	height: 13px;
}

#ReviewCarouselSection .rc-el .content .stars img {
	height: 13px;
	margin: 0px 3px 0px;
}

/* car el - content - p */
#ReviewCarouselSection .rc-el .content p {
	margin-top: 17.5px;
    font-size: 18px;
}

/* car el - content - h2 */
#ReviewCarouselSection .rc-el .content h2 { 
	margin-top: 17.5px;
    font-size: 8px;
}

#ReviewCarouselSection .rc-el .content h2 span {
	padding: 0px 4px 0px;
}
 
/* controls */
#ReviewCarouselSection .control {
	height: 20px; 
	top: calc(50% - 10px); 
}

#ReviewCarouselSection #RCLeft { 
	left: 5px;
}

#ReviewCarouselSection #RCRight { 
	right: 5px;
}
}


 





/******************** HEADER SECTION ********************/         

/********* 1050px *********/
@media (max-width: 1050px) { 
/* h1 */
.header-section h1 {
	font-size: 35px; 
}

/* p */
.header-section p {
    width: 425px;
    margin-top: 20px;    
	font-size: 15px; 
}  
}
 
/********* 850px *********/
@media (max-width: 850px) { 
/* h1 */
.header-section h1 {
	font-size: 25px;   
}
 
/* p */
.header-section p {  
    width: 325px;
    margin-top: 15px;    
	font-size: 13px;  
} 
}







 
/******************** WELCOME SECTION ********************/       

/********* 1050px *********/
@media (max-width: 1050px) {  
/* p */
#WelcomeSection p.welcomequote {
   font-size: 20px;  
} 
     
#WelcomeSection h3 {
	margin-top: 20px; 
	font-size: 13px;       
}
 
/* divider */
#WelcomeDivider {
    width: 500px; 
} 
}
 
/********* 850px *********/
@media (max-width: 850px) { 
#WelcomeSection {   
	margin: 36px auto 80px;
}
 
/* p */
#WelcomeSection p.welcomequote {
   width: 300px; 
   font-size: 15px;   
} 
    
#WelcomeSection h3 {
	margin-top: 15px;  
	font-size: 11px;         
}
 
/* divider */
#WelcomeDivider {
    width: 350px; 
    margin: 50px auto; 
} 
}
 






     
/******************** PRODUCT SECTION ********************/    
                      
/********* 1200px *********/
@media (max-width: 1200px) {  
#ProductSection {     
	padding: 10px 0px 250px;    
}

/********************/
/* COMMENCE ONE PRODUCT ROWS */
/********************/

/* row */
.oprow {
	height: 500px; 
}

/* cont inner */
.oprow .opcol.opcont .opcontinner {
	top: calc(50% - 80px); 
}

/* a */
.oprow .opcol.opcont .opcontinner a {
	height: 50px; 
	width: 50px; 
    padding-top: 19px; 
	font-size: 6px; 
}

.oprow.one .opcol.opcont .opcontinner a {
	padding-top: 20.5px;
	font-size: 10px;
}

/* h1 */ 
.oprow .opcol.opcont .opcontinner h1 {
	font-size: 35px; 
}

.oprow .opcol.opcont .opcontinner h1 span {
    bottom: 17px; 
}

/* p */
.oprow .opcol.opcont .opcontinner p {
	font-size: 14px; 
}

/* img */  
.oprow.one .opcol.opimg .opinnerimg {
	width: 270px; 
	height: 450px; 
	top: calc(50% - 225px); 
	left: calc(50% - 135px); 
} 

.oprow.two .opcol.opimg .opinnerimg {
	width: 400px; 
	height: 400px;  
	top: calc(50% - 200px); 
	left: calc(50% - 200px); 
}   

/********************/
/* COMMENCE TWO PRODUCT ROWS */  
/********************/
 
/* row */
#ProductSection .row {       
	height: 400px;        
}

#ProductSection .row:not(.one) { 
	margin-top: 100px;    
}
  
/* col */
#ProductSection .col { 
	width: 400px;  
    height: 400px;    
} 
 
#ProductSection .col.one {
    left: calc(25% - 190px);
}

#ProductSection .col.two {    
    right: calc(25% - 190px); 
}

/* img */
#ProductSection .col img { 
	height: 400px;    
	margin-top: 0px;    
	transform: scale(0.85) !important;     
} 

#ProductSection .col.book img {
    transform: scale(0.60) !important; 
} 
  
/* header */  
#ProductSection .productcont {
    width: 350px;  
    padding-top: 25px;   
    bottom: -25px;  
    left: calc(50% - 175px);     
}
 
#ProductSection .row.four .productcont,
#ProductSection .row.five .productcont {
    bottom: -5px !important; 
}
 
#ProductSection .col h1 {
    font-size: 18px;       
}
 
#ProductSection .col h1 span {
    bottom: 8px; 
    font-size: 6px;   
}

#ProductSection .col p {
    font-size: 14px;    
}  
}

/********* 850px *********/
@media (max-width: 850px) {  
#ProductSection {     
	padding: 80px 0px 200px;     
}

/********************/
/* COMMENCE ONE PRODUCT ROWS */
/********************/

/* row */
.oprow {
	display: none;
}

/********************/
/* COMMENCE TWO PRODUCT ROWS */
/********************/
 
/* row */
#ProductSection .row {   
	width: 350px;   
	height: 800px;              
}

#ProductSection .row.mobile {
	display: block;
}

#ProductSection .row.mobile,
#ProductSection .row.three,
#ProductSection .row.five {
    height: 350px;    
}

#ProductSection .row:not(.mobile.one) { 
	margin-top: 100px;           
}
    
/* col */
#ProductSection .col {
	display: block; 
	width: 350px;    
    height: 350px;        
}   

#ProductSection .col.one {
    top: 0px;
    left: 0px;
}

#ProductSection .col.two {  
    bottom: 0px;
    right: 0px;
} 
  
/* img */
#ProductSection .col img { 
	height: 300px;       
	transform: scale(0.95) !important;      
}

#ProductSection .col.thth img {
	height: 280px;
    transform: scale(1) !important;    
}

#ProductSection .col.hue img { 
    margin-top: -10px;  
    transform: scale(0.95) !important;    
}
 
#ProductSection .col.pmu img {
    transform: scale(1.3) !important; 
}

#ProductSection .col.book img {
    transform: scale(0.78) !important;
} 
    
/* header */  
#ProductSection .productcont { 
    bottom: 0px;  
}
  
#ProductSection .row.four .productcont,
#ProductSection .row.five .productcont {
    bottom: 0px !important; 
} 

#ProductSection .col.thth p strong {
	position: relative;
	top: 10px;
	word-spacing: 3px;
	letter-spacing: 1px;
	color: #AB182D; 
}
}
  






        
/******************** MESSAGE MODAL ********************/

/********* max-height *********/
/*
@media (max-height: 450px) {
#MessageModal {
	overflow: scroll;
}

#MessageModal .col {
	height: 450px;
}
}
*/

/********* 850px *********/
@media (max-width: 850px) {
/* close */
#MessageModal #Close {
	width: 40px;
	height: 40px;
	padding-top: 10px;
	top: calc(50% - 20px);
	left: calc(15% - 20px);
	font-size: 14px;
}

/* inner */
#MessageModal #Inner {
   width: 150px;
   left: calc(50% - 75px);
}

/* img */
#MessageModal #Inner #Icon {
	width: 20px;
	margin-bottom: 20px;
}

/* p */
#MessageModal #Inner p {
   font-size: 10px;
}

/* bar */
#MessageModal #Inner #Bar {
	width: 20px;
	height: 10px;
	margin-top: 20px;
}
}








/******************** MODAL SECTION *********************/

/********* max-height *********/
@media (max-height: 500px) and (min-width: 901px) {
/* col */
.modalsection .modalinner {
	height: 500px;
	top: 0px;
}

.modalsection .col {
	top: 50px;
}
}

@media (max-height: 1050px) and (max-width: 900px) {
/* inner */
.modalsection .modalinner {
	height: 1050px !important;
	top: 0px !important;
}

/* col */
.modalsection .col.one {
	top: 550px !important;
}

.modalsection .col.two {
	top: -300px !important;
}
}

/********* 900px *********/
@media (max-width: 900px) {
/* close */
.modalsection .close {
    left: auto;
	right: 20px;
}

/* inner */
.modalsection .modalinner {
	width: 300px;
	height: 850px;
	top: calc(50% - 425px);
}

#Modal7 .modalinner {
    width: 100%;
}

/* col */
.modalsection .col {
	display: block;
	width: 100%;
	height: 400px;
	float: none;
}

.modalsection .col.one {
	top: 450px;
}

.modalsection .col.two {
	top: -400px;
}

/* img */     
.modalsection .col.one img {
	width: 300px !important; 
	height: auto !important; 
}  

/* wowh img */
#Modal5 .col.one img { 
    top: 50px;  
}

/* mist img */
#Modal6 .col.one img { 
	width: auto !important;
	height: 100% !important;
	top: 12px !important;
}

/* pmu img */ 
.modalsection .col.one.pmu img {
    width: auto !important;  
    height: 100% !important;   
	position: absolute;
	left: calc(50% - 205px);
}   

/* scrolldown */
.modalsection .col.two .contentouter .scrolldown {  
    left: -50px;  
}
} 






      

/******************** DAILY ROUTINES *********************/ 

/********* 1250px *********/
@media (max-width: 1250px) {               
/* row */ 
#RoutineSection .row {
    width: 800px; 
    height: 300px;     
}
   
/* general col layout */ 
/* routine */
#RoutineSection .row .routine {
    width: 47% !important;    
} 
  
/* col */   
/* cont inner */
#RoutineSection .row .routine .col.cont .inner {
	top: calc(50% - 50px);  
}  

#RoutineSection .row.one .routine.one .col.cont .inner {
    top: calc(50% - 65px);
}

#RoutineSection .row.two .routine.one .col.cont .inner {
    top: calc(50% - 57px); 
}  
   
/* a */
#RoutineSection .row .routine .col.cont .inner a {
	height: 45px;
	width: 45px;
    margin-top: 30px;  
    padding-top: 18px;
    font-size: 5px;
}  

/* h1 */
#RoutineSection .row .routine .col.cont .inner h1 { 
	font-size: 13px;      
}

/* p */
#RoutineSection .row .routine .col.cont .inner p { 
	font-size: 10px;   
	margin-top: 5px;  
} 
}

/********* 850px *********/
@media (max-width: 850px) {             
#RoutineSection { 
	padding: 120px 0px 140px;
} 
 
/* row */ 
#RoutineSection .row {
    width: 325px; 
    height: 640px;        
}
   
/* general col layout */
#RoutineSection .row .routine {
    display: block !important;
    width: 100% !important; 
    height: calc(50% - 20px) !important;
    float: none !important;  
} 

#RoutineSection .row .routine.two {
    margin-top: 40px;
}
}








/******************** TEASER SECTION *********************/                      

/********* 850px *********/   
@media (max-width: 850px) {     
.teaser { 
 	height: 905px;   
 }
   
 #Curly101Section {
 	height: 400px !important;     
}

/* blog cols */
#BlogSection .col {
   width: 100%; 
}
 
#BlogSection .col.img {
    height: 400px !important;
    bottom: 0px;
}

#BlogSection .col.cont {
    height: 465px !important;
    top: 0px;
}
  
/* content */
.teaser .teasercontent {
    width: 300px;   
}
 
#BlogSection .teasercontent {
    top: calc(50% - 148px);   
    left: calc(50% - 150px); 
} 

#Curly101Section .teasercontent { 
    top: calc(50% - 125px);   
    right: calc(50% - 150px);     
}
 
/* h1 */
.teaser .teasercontent h1 {
    font-size: 23px; 
}
 
.teaser .teasercontent h1 span {
   font-size: 9px;
}
  
/* p */
.teaser .teasercontent p {
    margin-top: 20px; 
    margin-bottom: 70px;  
    font-size: 13px; 
} 

/* a */
.teaser .teasercontent a {  
    padding: 13px 25px;   
    font-size: 9px; 
} 
}





 
 
          
/******************** MF SECTION ********************/

/********* 1050px *********/
@media (max-width: 1050px) {
#MFSection {
	height: 500px;
}
}

/********* 850px *********/
@media (max-width: 850px) {
#MFSection {
	height: 800px;
}

/* col */
#MFSection .col {
	display: block;
	width: 100%;
	height: 50%;
	float: none;
}
}