/* 
 Theme Name:     Divi Child Theme
 Author:         Theresa Kibler
 Author URI:     https://websitesbytheresa.com
 Template:       Divi
 Version:        1.0 
*/ 


@import url("../Divi/style.css"); 

@font-face {
	font-family: 'Flanella Regular';
	src:url('fonts/FLANELLA.TTF');
	font-weight: normal;
	font-style: normal;
}


/* OVERRIDING DIVI STYLES*/

#et-top-navigation{font-weight:400 !important}

.nav li ul{width: 290px}
#top-menu li li a, .fullwidth-menu li li a{width: 270px; padding:6px 10px}

ul.sub-menu{margin-top:-50px !important}

#main-header .container{max-width:90% !important; width:90% !important}

body.page, body.archive, body.single, body.blog{background-image:url('https://www.celestialtransformations.com/wp-content/uploads/2021/04/bgStarsBlueFadedAlt.jpg') !important; background-repeat:no-repeat; background-size:100% !important; background-attachment: scroll}
body.page #main-content, body.archive #main-content, body.single #main-content, body.blog #main-content{background-color:rgba(255,255,255,.0) !important; margin-top:15px !important}


/* home pg */
body.page-id-6244{background-image:none !important}
body.page-id-6244 #main-content{background-color:#FFF !important; margin-top:0px !important}

h4.widgettitle{font-size:28px !important; line-height:32px !important; margin-top:25px !important; text-align:center !important}

#main-content .container:before {width: 0 !important}


/* CUSTOM STYLES*/

.white, a.white{color:#FFF !important}
.black, .black h2, .black h3{color:#000 !important}

.teal, a.teal{color:#007979 !important}
a.teal{border:2px solid #007979; padding:10px !important}
.purple{color:#5F1372 !important}


h1{font-size: calc(26px + (36 - 26) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(30px + (40 - 30) * ((100vw - 300px) / (1600 - 300))) !important}
h2{font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(32px + (36 - 32) * ((100vw - 300px) / (1600 - 300))) !important; font-weight:350 !important}
h3{font-size: calc(24px + (28 - 24) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(28px + (32 - 28) * ((100vw - 300px) / (1600 - 300))) !important; font-weight:350 !important}
		
.mediumText{font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300))) !important}
.largeText{font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(24px + (28 - 24) * ((100vw - 300px) / (1600 - 300))) !important}

.headerText{font-family:'Josefin Sans', Helvetica, Arial,Lucida, sans-serif !important; font-size: calc(26px + (34 - 26) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(30px + (38 - 30) * ((100vw - 300px) / (1600 - 300))) !important; font-weight:350 !important}

.pageTitle h1{font-family: 'Flanella Regular' !important; font-size: calc(36px + (60 - 36) * ((100vw - 300px) / (1600 - 300))) !important; line-height: calc(40px + (70 - 40) * ((100vw - 300px) / (1600 - 300))) !important}

.optInRow{width:90% !important; margin:auto !important}
.optInRowFooter{width:80% !important; margin:auto !important}


/*Hides the header container*/
#ds-transparent-optin .et_bloom_header_outer {
    display: none;
}
/*Removes form container background colour*/
#ds-transparent-optin .et_bloom_form_container {
    background: none !important;
}
/*Removes form background colour and sets padding*/
#ds-transparent-optin .et_bloom_form_content.et_bloom_bottom_inline {
    padding: 0;
    background: none !important;
}

#ds-transparent-optin input{margin-top:5px !important; border:2px solid #DEDEDE !important}

#main-footer{padding:0px !important; margin:0px !important}
#footer-widgets{padding-top:20px !important; padding-bottom:0px !important}
.footer-widget{margin-bottom:30px !important}

#footerTK{clear:both; color:#FFF; font-size:11px; margin:5px 0px 5px 0px} 
#footerTK a{color:#FFF}
#footerTK a:hover{text-decoration:underline} 



@media only screen and ( max-width: 1400px ) 
{	
	
	#main-header .container{max-width:99% !important; width:99% !important}

	
}


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

	#logo{max-width:200px !important; height:auto !important}
	
	.nav li a{font-size:20px !important}
	
}