/*   
	
	Theme Name: Creatively Ewe New Theme
	Theme URI: https://creativelyewe.com
	Description: Styles for accordion feature on Services page
	Author: Susan  Belanger
	Author URI: https://creativelyewe.com
	Version: 0.0.1  
   */




:root {
  --water: rgb(26, 59, 88);
  --sky: #abd5ab;
  --meadowtint: #abd5ab;
	interpolate-size:allow-keywords;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}


user agent stylesheet
summary {
    display: block;
    unicode-bidi: isolate;
}


div#servicesPage div.nav_columns details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: inside disclosure-closed;
}

.main_container 	{
	width:100%;
	height: auto;
	padding:30px 40px;
}

.nav_rows 	{
	display:none;
}

.nav_columns	{
	display:block;
}

.services_columns {
  float: left;
  width: 48%;
  margin: 1%;
  box-sizing: border-box;
}


section.sidebarFooter .services_columns {
    width: 48%;
    /* margin-right: 4%; */
    float: left;
    padding: 0 3%;
}



section.sidebarFooter .services_columns aside.offering {
    width: 100%;
    float: left;
    margin: 0 0 50px 0;
    box-shadow: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: none;
    border: none;
    padding: 0;
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: auto;
    overflow: clip;
    min-height: 0;
	 display: block;
}


div#servicesPage div.nav_columns summary {
 	position: relative;
  	background: #fff;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
  	text-transform: uppercase;
 	letter-spacing: 0.03em;
    font-weight: 600;
    font-family: McLaren, cursive;
    font-size: 1.3em;
    border-bottom: 6px solid #a3ce95;
    text-align: left;
    padding: 8px 15px 6px 15px;
	z-index: 999;
	cursor: pointer;
 
  
}



div#servicesPage div.nav_columns summary::marker {
   content:' \2795';
  display:block;
	font-size: .9em;
}


div#servicesPage div.nav_columns details[open] summary::marker {
  content: ' \2796';
	font-size: .9em;
}

summary span.title {
	padding-left:10px;
	color: #000000;
}


.details-body {
  	padding: 0.1rem 1rem 1rem 1rem;
  	background-color: var(--meadowtint);
  	z-index: 100;
  	position: relative;
	border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
 
}

#page section.sidebarFooter details .details-body p {
	font-size: 1.2em;
	font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    margin: 15px 10px;
    padding: 0;
    text-align: left;
	color: #000000;
}

#page section.sidebarFooter details .details-body p a {
    color: #dd6e0d;
    text-decoration: none;
}

#page section.sidebarFooter details .details-body p a:hover  {
	background-color:darkgoldenrod; 
	color: #fbf0cd;
  	text-decoration: underline;
}


.details-body .icon, .details-body .icon_wide {	
	width: 239px;
    margin: 10px 15px 0 10px;
    float: right;
    height: 250px;
    
}

.details-body .icon_wide {	

    float: right;
    height: 290px;
    
}

.details-body .icon.design {
	
		background:url(../images/design.png) top right no-repeat;
		background-size:contain;	
}


.details-body .icon.dev {
	
		background:url(../images/dev.png) top right no-repeat;
		background-size:contain;	
}

.details-body .icon.themes {
	
		background:url(../images/themes.png) top right no-repeat;
		background-size:contain;	
}


.details-body .icon.city {
	
		background:url(../images/municipal.png) top right no-repeat;
		background-size:contain;	
}

.details-body .icon_wide.payments {
	
		background:url(../images/pay.png) top right no-repeat;
		background-size:contain;	
}


.details-body .icon.photos {
	
	background:url(../images/photo.png) right top no-repeat;
	background-size:contain;
}


.details-body .icon.seo {
	
	background:url(../images/seo2.png) right top no-repeat;
	background-size:contain;
}

.details-body .icon.domain {
	
	background:url(../images/domain.png) right top no-repeat;
	background-size:contain;
}



.details-body .icon.maintenance {
	
	background:url(../images/maintenance.png) right top no-repeat;
	background-size:contain;
	margin-left: 20px;
    margin-right: 5px;
}




.services_container::after, .details-body::after 	{
	content:'';
	display:block;
	clear:both;
}


::details-content {
	transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
	height: 0;
	overflow: clip;
}

[open]::details-content 	{
	height:auto;
}


/* Media Queries */

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


summary {
	font-size: 2.5vw;
	}
	

	
}



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


.nav_rows 	{
	display:block;
	
}

.nav_columns	{
	display:none;
}
	
section.sidebarFooter .services_columns 	{
	width: 100%;
    margin: 0;
    float: none;
	padding: 0;
	
} 
	
section.sidebarFooter .services_container aside {
    width: 90%;
    float: none;
    margin: 0 auto;
    box-shadow: none;
    margin-bottom: 80px;
    height: auto;
    overflow: clip;
    min-height: 0; 
}
	
	section.sidebarFooter aside.announce:nth-child(2) 	{
		margin-right: auto;
	}
	

    summary {
      
        font-size: 1.5em;
    }


	
}