body {
max-width: 1050px;
min-width: 700px;
background-color: #c6a0f8; 
background-image: url;
background-repeat: no repeat;
font-family: Georgia, Arial, Verdana,  sans-serif;
font-size: 100%; /*sets the overall base size of your fonts.*/
color: #000000;
margin: auto;
padding: 0px;
text-align: center;
}


.max-width {
width:expression(document.body.clientWidth < 702? "700px" :document.body.clientWidth > 1052? "1050px": "auto" );
}

/*the font size is 100% of the body font setting So while it says 100%, this is actually 100% of whatever we set in the body selector. 
By default, that is 85%. No need to touch this if you dont want to */
table {
font-size:110%; /*leave this font size, change the individual cells below, if the default size isnt to your liking*/
color: inherit;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
text-align: left;
}

table.border{ /*this sets the border around your main content table*/
border: tranparent;
width:100%; /*this sets how wide your content table will be. Change to 100% for full screen width*/
}



/* this is a custom class for using graphics as bullets. Replace the image with your own. 
If you prefer to have stock standard bullets instead, simply delete  The 2 classes below,
and your bullets will show as normal. In that case, of course you need to remove the class name from the lists on
your actual html page
 
ul {
list-style-type: none;
padding-left: 0;
margin-left: 30px;
}
 
li.custom {
background: url(../image-files/bullet.gif) left top no-repeat; 
padding-left: 20px;
margin-bottom: 2px;
}
*/


 
/* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
as well as the a:hover, which is the text for a link, once the pointer passes over it*/


a { font-family:  Georgia, Arial, Verdana, sans-serif; 
font-size: 100%; 
color:  #C91640;
text-decoration: none;
}

a:visited { font-family: Georgia, Arial, Verdana, sans-serif;
 font-size: 100%; 
/*background-color: transparent;*/

 color: #C91640;
 text-decoration: none;
 }

a:hover { font-family: Georgia, Arial, Verdana, sans-serif;
 font-size: 100%; 
/*background-color: transparent;*/

 color: #C91640;
text-decoration: none;
 }


/* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
as well as the a:hover, which is the text for a link, once the pointer passes over it



/* this is for your transparent clickable header gif */
#header-link{
text-align: center;
 font-color: #C91640;
 text-decoration: none;
}

#header-link a{
 font-color: #C91640;
 text-decoration: none;
text-decoration: none;
}

#header-link a:hover{
 font-color: #C91640;
 text-decoration: none;
/*background-color: transparent;*/

}


/*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
to those H tags */
h1 { font-family: Georgia, Arial, Verdana, sans-serif; font-size: 200%;  color: #7602e2; text-align:center; margin-top:0}
h2 { font-family: Georgia, Arial, Verdana, sans-serif; font-size: 150%;  color: #7602e2; text-align:left; margin-top:0}
h3 { font-family: Georgia, Arial, Verdana, sans-serif; font-size: 135%;  color: #7602e2; text-align:left; margin-top:0; margin-bottom: 2px}
h4 { font-family: Georgia, Arial, Verdana, sans-serif; font-size: 125%;  color: #7602e2; text-align:left; margin-top:0; margin-bottom: 2px}
h5 { font-family: Georgia, Arial, Verdana, sans-serif; font-size: 115%;  color: #7602e2; text-align:left; margin-top:0; margin-bottom: 2px}

/* This is for the heading background color....your H1, H2, and H3 tags*/
.hbg{
background-color: transparent; 
color: #7602e2;
width: auto;
}

/* This is for setting special line heights */
p.60% {
    line-height: 60%;
}

p.75% {
    line-height: 75%;
}

p.90% {
    line-height: 90%;
}

p.100% {
    line-height: 100%;
}

p.150% {
    line-height: 150%;
}

p.200% {
    line-height: 200%;
}

/* This is for horizontal alignment of text--left is default */

.right {
    float: right;
    width: 100%;
}


/* Below, is the background colors and styling for your table cells.*/


.header {
background-color: #c6a0f8;
/*background-image: url('https://www.midlifecrisismarriageadvocate.com/image-files/xsbi-1170.png.pagespeed.ic.7cYL6RT_cH.png');*/
background-image: url('https://www.midlifecrisismarriageadvocate.com/image-files/xsbi-1170.png.pagespeed.ic.7cYL6RT_cH.png');
background-position: top left;
background-repeat: no-repeat;
height: 270px;
width: 1170px;
top:0px;
margin: 0;
padding: 0;
}

.header_kick {
background-color: #c6a0f8;
background-image: url('https://www.midlifecrisismarriageadvocate.com/image-files/xsbi-kickstarter-1170.png.pagespeed.ic.qXuUWL33iw.png');
background-position: top left;
background-repeat: no-repeat;
height: 270px;
width: 1170px;
top:0px;
margin: 0;
padding: 0;
}


.header-home {
background-color: #c6a0f8;
background-image: url('https://www.midlifecrisismarriageadvocate.com/image-files/xsbi-1024-thin.png.pagespeed.ic.QjBeKrlG2P.png');
background-position: top left;
background-repeat: no-repeat;
height: 180px;
margin: 0;
padding: 0;
}

.spacer {
background-color: #c6a0f8;
}

.content {
background-color: #c6a0f8;
border-left: 0px solid #cccccc;
border-right: 0px solid  #cccccc;
border-top: none;
border-bottom: 1px solid  #cccccc;
font-size: 100%; 
color: inherit;
padding: 0px 0px 0px 0px;
width: 67%;
}

.middle {
font-size: 100%;
color: inherit;
background-color: #c6a0f8;
padding: 20px 20px 2px 15px;
width: 34%;
}

.right {
font-family: Georgia, Arial, Verdana,  sans-serif;
font-size: 100%;
color: inherit;
background-color: #c6a0f8; 
padding: 0px 0px 0px 0px;
width: 0%;
}



.left {
font-size: 100%;
color: inherit;
background-color: #c6a0f8;
padding: 20px 10px 2px 15px;
}

/*Below are the columns for the homepage*/

.spacer-home {
background-color: #c6a0f8;
}

.content-home {
background-color: #c6a0f8;
border-left: 0px solid #cccccc;
border-right: 0px solid  #cccccc;
border-top: none;
border-bottom: 1px solid  #cccccc;
font-size: 100%; 
color: inherit;
padding: 38px 0px 0px 0px;
width: 67%;
}


.middle-home {
font-size: 100%;
color: inherit;
background-color: #c6a0f8;
padding: 20px 20px 2px 15px;
width: 34%;
}

.right-home {
font-family: Georgia, Arial, Verdana,  sans-serif;
font-size: 100%;
color: inherit;
background-color: #c6a0f8; 
padding: 0px 0px 0px 0px;
width: 0%;
}


.footer {
font-size: 100%;
color: inherit;
background-color: #B7F5D7;
border-top: 1px solid  #cccccc;
padding: 5px; 
}

.bottom-strip {
background-color: #B7F5D7;
font-size: 100%;
color: #000;
text-align: center;
}



/* THIS SECTION IS FOR YOUR LEFT NAVIGATION LINKS*/

.navigator {                        /*the navigator is the area surrounding your link buttons. Basically a box that you can style*/
background-color: tranparent;
border: tranparent;
width: auto;
padding: 2px;
text-align: left;
font-size: 100%;
}



.navlink a {
font-family: Georgia, Arial, san-serif;
margin-top: 0px; /*sets the gap between your nav panel links. */
margin-right: 3px;
margin-bottom: 0px; /* if both top and bottom margins are set to 3px, then you have a total gap of 6 px between each link*/
margin-left: 0px;
}


.navlink a:active { 
    color: #C91640
    background-color: transparent;
}

/* this sets the font weight, which will be inherited by all of the different links states.
Main choices are bold, normal, and light. We don't
have to add this property/value to each individual link state*/

.navlink {
font-weight: normal;
}


/* this part is for the colors of your buttons "at rest".*/

.navlink a {
padding: 3px;
text-decoration: none;
display: block;
color: #C91640 /*#B570FA; this is where you change the link font color*/
background-color: transparent;
border: transparent;
}

/*this part is how the links look, once the pointer passes over them. */

.navlink a:hover {
color: #C91640; 
background-color: transparent;
text-decoration: none;
}


/********************************
THIS NEXT SECTION IS FOR YOUR TOP HORIZONTAL NAVIGATION LINKS */

/*THIS CLASS IS FOR THE TOP DIV, THAT SERVES AS A REFERENCE POINT
TO POSITION THE TOP NAV LINKS. YOU WON'T NEED TO CHANGE ANYTHING HERE,
EXCEPT POSSIBLY THE HEIGHT */


/*tutorial*/

.top-nav{
position:absolute;
top:225px;
width:1170;
padding:0;
margin:0;
/*border-right: 0px solid #A5DCC2;*/
margin-left: 0px;
margin-right: auto;
}
.top-nav ul{
padding:0;
margin:0;
line-height:38px;
}
.top-nav li{
position:relative;
float:left;
list-style:none;
background: #B7F5D7;

}
.top-nav ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
.top-nav ul li a{
text-align:center;
font-family: Georgia, Verdana, Arial, sans-serif;
font-size:110%;
color: #C91640;
width:167.142857px;
height:38px;
display:block;
text-decoration:none;
/*border-left: 1px solid #BEF6DB;
border-right: 1px solid #A5DCC2;*/
}
.top-nav ul li:hover{
background-color: #82BFA2;
font-color: #ffffff;
/*Color of main menu item when hovered over.
text-decoration:none;*/
}
.top-nav ul li:hover ul{
visibility:visible;
z-index:1;
}
.top-nav ul li:hover ul li a{
background: #B7F5D7;
/*Background of dropdown when hovering on main menu item for sub.*/
z-index:1;
/*border-bottom: 1px solid #A5DCC2;*/
text-decoration:none;
}
.top-nav ul li ul li a:hover{
background-color: #82BFA2;
/*I cannot find what this does—as it does not change the background of the dropped down item when I hover over it.*/
text-decoration:none;
}


.top-nav-home{
position:absolute;
top:545px
width:1169px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
/*border-right: 0px solid #A5DCC2;*/
}
.top-nav-home ul{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
line-height:38px;
}
.top-nav-home li{
position:relative;
float:left;
list-style:none;
background: #B7F5D7;

}
.top-nav-home ul ul{
position:absolute;
visibility:hidden;
padding:0px 0px 0px 0px;
margin:0px 10px 0px 10px;
top:30px;
}
.top-nav-home ul li a{
text-align:center;
font-family: Georgia, Verdana, Arial, sans-serif;
font-size:110%;
color: #C91640;
width:167px;
height:38px;
display:block;
text-decoration:none;
/*border-left: 1px solid #BEF6DB;
border-right: 1px solid #A5DCC2;*/
}
.top-nav-home ul li:hover{
background-color: #82BFA2;
font-color: #ffffff;
/*Color of main menu item when hovered over.
text-decoration:none;*/
}
.top-nav-home ul li:hover ul{
visibility:visible;
z-index:1;
}
.top-nav-home ul li:hover ul li a{
background: #B7F5D7;
/*Background of dropdown when hovering on main menu item for sub.*/
z-index:1;
/*border-bottom: 1px solid #A5DCC2;*/
text-decoration:none;
}
.top-nav-home ul li ul li a:hover{
background-color: #82BFA2;
/*I cannot find what this does—as it does not change the background of the dropped down item when I hover over it.*/
text-decoration:none;
}


/*THIS IS THE CSS TO GET YOUR TOP NAVIGATION LINKS DISPLAYING
IN A VERTICAL FORMAT. THE CSS BELOW HAS BEEN COMMENTED OUT, SO
IT IS NOT WORKING. IF YOU WANT TO HAVE VERTICAL LINKS IN THE HEADER AREA,THEN
REMOVE THESE COMMENTS, AND DELETE THE CSS ABOVE. 
IF YOU WANT TO HAVE HORIZONTAL LINKS, THEN YOU CAN DELETE THIS CSS BELOW*/



/*
.top-nav  {
font-family:  Georgia, Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 85%;
position: absolute;
top: 0px;
right: 0px;
}



.top-nav  ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

.top-nav  ul li {
border: 1px solid #000;
background-color: #B7F5D7;
margin: 5px;
}

.top-nav  a {
color: #B570FA;
text-decoration: none;
text-align: right;
padding: 5px 20px;
display: block;
}

.top-nav  a:visited {
color: purple;
text-decoration: none;
}

.top-nav  a:hover {
color: #C91640;
background-color: #82BFA2;
}

*/








/* THIS SECTION IS FOR STYLING ALL THE BOXES. */

		
.center-box {
   width: 60%;
   background-color: #fbfefb;
	 margin:0	;
	 padding: 0;
   text-align: right;
   border: 3px solid #82BFA2;
	}

.byline-box {
   width: 85%;
   display:block;
   background-color: #fbfefb;
	 margin:0	;
	 padding: 0;
   text-align: right;
   border: 3px solid #82BFA2;
	}

.full-top {
   background-color: #eeffee;
   width: 776px;
	 margin: 0px 0px 0px 0px;
   padding: 5px 20px 20px 20px;
   
	}
 
 .full {
   background-color: #eeffee;
   width: 776px;
	 margin: 10px 0px 0px 0px;
   padding: 20px 20px 20px 20px;
   
	}
 
/*This is box for putting two boxes inside it side by side*/
.full-2 {
   background-color: #c6a0f8;
   width: 686px;
	 margin: 10px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   border: 0px solid #82BFA2;
   
	}

         
     
.two-left {
   background-color: #eeffee;
   width: 363px;
	 margin: 10px 0px 0px 0px;
   padding: 20px 20px 20px 20px;
   float:left;
   
	}
 
.two-right {
   background-color: #eeffee;
   width: 363px;
	 margin: 10px 0px 0px 0px;
   padding: 20px 20px 20px 20px;
   float:right;
   
	}


 
.left-empty {
   background-color: transparent;
   width: 363px;
	 margin: 10px 0px 0px 0px;
   padding: 20px 20px 20px 20px;
   float:left;
   
	}

/*This is box for putting three boxes inside it side by side*/
.full-3 {
   background-color: transparent;
	 margin: 10px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   
	}

/* Three div boxes side by side NOT inside a larger div box */ 
  .three-left {
   width:222px;
	 margin: 10px 0px 10px 0px;
   padding: 20px 20px 20px 20px;
   float: left;
   background-color: #eeffee;
   }

  .three-mid {
   width:222px;
	 margin: 10px 0px 10px 10px;
   padding: 20px 20px 20px 20px;
   float: left;
   background-color: #eeffee;
   }

   .three-right {
   width:222px;
	 margin: 10px 0px 0px 10px;
   padding: 20px 20px 20px 20px;
   float: left;
   background-color: #eeffee;
   }
 
/* Three div boxes side by side to go inside a larger div box */ 
   .three-left-a {
   width:212px;
	 margin: 10px 0px 10px 0px;
   padding: 20px 20px 20px 20px;
   float: left;
   background-color: #b7f5d7;
   }

  .three-mid-a {
   width:212px;
	 margin: 10px 0px 10px 10px;
   padding: 20px 20px 20px 20px;
   float: left;
   background-color: #b7f5d7;
   }

   .three-right-a {
   width:212px;
	 margin: 10px 0px 0px 10px;
   padding: 20px 20px 20px 20px;
   float: left;
   background-color: #b7f5d7;
   }
 
  
div.full-feature {
   background-color: #7602e2;
   height: 470px;
   width: 1139px;
	 margin:0px 5px 5px 5px auto;	
	 padding: 5px;
   border: 10px    solid #7602e2;
   display:inline-block;
   
	}

 div.full-thanks {
   background-color: #eeffee;
   width: 1139px;
	 margin:0px 5px 5px 5px auto;	
	 padding: 5px;
   border: 0px    solid;
   /*display:inline-block;*/
   
	}


div.full-side {
   background-color: #eeffee;
   width: 230px;
	 margin: 10px 0px 0px 0px;
   padding: 20px 20px 20px 20px;
   border: 0px solid #82BFA2;
   
	}


div.full-side-home {
   background-color: #eeffee;
   width: 305px;
	 margin: 10px 0px 0px 0px;
   padding: 20px 20px 20px 20px;
   border: 0px solid #82BFA2;
   
	}



div.menubox {
   background-color: #B7F5D7;
	 margin: 4px 0px 1px 0px;
	 padding: 5px;
   border: 3px solid #82BFA2;
   
   /* rounded corners
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
*/
	}
 
 div.menubox-round {
   background-color: #B7F5D7;
	 margin: 4px 0px 1px 0px;
	 padding: 5px;
   border: 3px solid #82BFA2;
   
   /* rounded corners*/
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
	}
		
div.full2 {
   background-color: #fbfefb;
	 margin: 4px 0px 2px 0px;
	 padding: 5px;
   border: 3px solid #82BFA2;
	}


 div.half-left {
  background-color: #eeffee;
	 margin: 12px 12px 12px 12px;
	border: 0px solid #82BFA2;
	padding: 5px;
	width: 50%;
	float: left;
	}
	

div.half-right {
  background-color: #eeffee;
	 margin: 12px 12px 12px 12px;
	border: 0px solid #82BFA2;
	padding: 5px;
	width: 50%;
	float: right;
}

div.text {
   width: 60%;
   background-color: #B7F5D7;
	 margin:5px auto;	
	 padding: 5px;
   border: 3px solid #82BFA2;
   
   /* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
	}
 
 
 div.opt-in {
  height:190px;
  Width: 350px;
   background-color: #ebdefd;
	 margin:5px auto;	
	 padding: 5px;
   border: 8px solid #7602e2;
   display:inline-block;
   
   /* rounded corners
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px; */
	}
 
  div.opt-in-forum {
  height:171px;
   background-color: #B7F5D7;
	 margin:5px auto;	
	 padding: 5px;
   border: 3px solid #82BFA2;
   display:inline-block;
   
   /* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
	}

  div.opt-in-blog {
  height:171px;
   background-color: #B7F5D7;
	 margin: 4px 0px 1px 0px;
	 padding: 5px;
   border: 3px solid #82BFA2;
   
   /* rounded corners*/
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
	}

 div.feature-box {
   width: 99%;
   height:300px;
   background-color: #B570FA;
	 margin:0px auto;	
	 padding: 0px;
   border: 0px solid;
	}
   
/*div.full-feature-2 {
   height: 382px;
   width: 1000px;
   background-image:url("https://www.midlifecrisismarriageadvocate.com/image-files/Feature_Box-image-1.png");
   background-size: cover;
   background-color: #7602e2;
	 margin:0px 5px 5px 5px auto;	
	 padding: 5px;
   border: 0px;
   display:inline-block;
 */  
}
  
div.full-feature-2 {
   height: 382px;
   width: 1000px;
   background-image: url('..image-files/Feature_Box-image-1.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-color: #a7cdad;
   margin:0px 5px 5px 5px auto;   
   padding: 5px;
   display:inline-block;
   }


<div class="full-feature-2"></div>
   
div.full-feature-test {
   height: 382px;
   width: 1000px;
   background-image: url (cake_chocolate.png);
   background-repeat: no-repeat;
   background-size: cover;
	 margin:0px 5px 5px 5px auto;	
	 padding: 5px;
   border: 0px;
   display:inline-block;
   
	}
  div.feature-2-textbgrnd-1 {
   width: 904px;
   height:48px;
   background-color: #7602e2;
	 margin:0px auto;	
	 padding: 0px;
   border: 0px solid;
	}
 
   div.feature-2-textbgrnd-2 {
   width: 278px;
   height:212px;
   background-color: #7602e2;
	 margin:0px auto;	
	 padding: 5px;
   border: 0px solid;
	}
 
 	}

 div.half-feature {
   background-color: #7602e2;
   height: 500px;
   width: 569px;
	 margin:0px 5px 5px 5px auto;	
	 padding: 5px;
   border: 10px    solid #7602e2;
   display:inline-block;
   
   }

	div.full-kickstarter {
  background-color: transparent;
<!--   height: 470px; -->
   width: 100% <!--1159px-->;
	 margin:0px 5px 5px 5px auto;	
	 padding: 5px;
   border: 2px    solid transparent;
   display:inline-block;
   
	}

 div.kick-left {
  background-color: #7602e2;
	 margin: 12px 12px 12px 12px;
	border: 0px solid #7602e2;
	padding: 5px;
	width: 35%;
	float: left;
	}
	

div.kick-right {
  background-color: #eeffee;
	 margin: 12px 12px 12px 12px;
	border: 0px solid #eeffee;
	padding: 5px;
	width: 65%;
	float: right;
}



div.centered-bottom-optin-box {
   height: 216 px;
   width: 720px;
   background-color: #ebdefd;
	 margin:5px auto;	
	 padding: 5px;
   border: 10px solid #7602e2;
   display:inline-block;
	}
 
div.full-home {
   background-color: #ebdefd;
	 margin: 4px 0px 1px 0px;
	 padding: 5px;
   border: 0px solid #7602e2;
	}
 
 
 
 
/*MailPoet/Wysija styles*/

.widget_wysija input[name="wysija[user][email]"] {
   border-radius: 4px;
   background: #FFFCD3;
   padding: 6px 12px;
   color: #999999;
   font-size: 15px;
   font-family: Verdana, Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   display:inline-block;
   text-align:left;
   height: 20px;
   width: 185px;
	 padding: 12px;
	 padding: 12px;
	 padding: 10px;
	 padding: 10px;
  }

.widget_wysija input[name="wysija[user][firstname]"] {
   border-radius: 4px;
   background: #FFFCD3;
   padding: 6px 12px;
   color: #999999;
   font-size: 15px;
   font-family: Verdana, Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   display:inline-block;
   text-align:left;
   height: 20px;
   width: 185px;
	 padding: 12px;
	 padding: 12px;
	 padding: 10px;
	 padding: 10px;
  }

.wysija-submit-field {
   border-radius: 4px;
   background: #c91640;
   padding: 6px 12px;
   color: #ffffff;
   font-size: 15px;
   font-family: Verdana, Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   display:inline-block;
   text-align:center;  
   border: solid #c91640;
   height: 45px;
   width: 200px;
	 padding: 12px;
	 padding: 12px;
	 padding: 10px;
	 padding: 10px;
   }

.widget_wysija .wysija-submit, .widget_wysija .wysija-paragraph { 
   display: inline !important; 
   }

.wysija-submit-field { margin-top:40 !important; }
 
/*Pink*/
div.gradientBoxesWithOuterShadows { 
/*height: 470px;*/
width: 1010px; 
margin:5px auto;
border-top: 1px solid #C91640;
border-bottom: 1px solid #C91640;
padding: 10px;
background-color: #C91640; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
/*-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
*/

/* rounded corners */
/*-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
*/
/* gradients CSS */
/*Gradient to white
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjMxLCAxNTUsIDE3MCkiLz48c3RvcCBvZmZzZXQ9IjAuOTQ1IiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, rgb(231, 155, 170)), color-stop(94.5%, #ffffff));
background-image: -webkit-linear-gradient(top, #C91640 -125%, #ffffff 94.5%);
background-image: -moz-linear-gradient(top, #C91640 -125%, #ffffff 94.5%);
background-image: -ms-linear-gradient(top, #C91640 -125%, #ffffff 94.5%);
background-image: -o-linear-gradient(top, #C91640 -125%, #ffffff 94.5%);
background-image: linear-gradient(to bottom, #C91640 -125%, #ffffff 94.5%);

/* SVG */
/*
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0" stop-color="rgb(231, 155, 170)"/>
		<stop offset="0.945" stop-color="#ffffff"/>
	</linearGradient>
	<rect x="0" y="0" width="100%" height="100%" fill="url(style-v4.css,23g1.pagespeed.ce.r9nlpRkzVk.css)" />
</svg>

/* Canvas */
/*
var g = ctx.createLinearGradient(0, 0, 0, 312);
g.addColorStop(0, rgb(231, 155, 170));
g.addColorStop(0.945, #ffffff);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 621, 312);
*/


/* CSS */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjIxLCAxNTUsIDE2MCkiLz48c3RvcCBvZmZzZXQ9IjAuOTQ1IiBzdG9wLWNvbG9yPSIjZWVmZmVlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, rgb(221, 155, 160)), color-stop(50%, #eeffee));
background-image: -webkit-linear-gradient(top, #C91640 -125%, #eeffee 94.5%);
background-image: -moz-linear-gradient(top, #C91640 -125%, #eeffee 94.5%);
background-image: -ms-linear-gradient(top, #C91640 -125%, #eeffee 94.5%);
background-image: -o-linear-gradient(top, #C91640 -125%, #eeffee 94.5%);
background-image: linear-gradient(to bottom, #C91640 -125%, #eeffee 94.5%);

/* SVG */
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0" stop-color="rgb(221, 155, 160)"/>
		<stop offset="0.945" stop-color="#eeffee"/>
	</linearGradient>
	<rect x="0" y="0" width="100%" height="100%" fill="url(style-v4.css,23g1.pagespeed.ce.r9nlpRkzVk.css)" />
</svg>

/* Canvas */
var g = ctx.createLinearGradient(0, 0, 0, 312);
g.addColorStop(0, rgb(221, 155, 160));
g.addColorStop(0.945, #eeffee);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 621, 312);

}

/*Green*/
div.gradientBoxesWithOuterShadowsgr { 
/*height: 470px;*/
width: 1010px; 
margin:5px auto;
border-top: 1px solid #82BFA2;
border-bottom: 1px solid #82BFA2;
padding: 10px;
background-color: #B7F5D7; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
/*-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
*/

/* rounded corners */
/*-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
*/

/* SVG */
/*
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0" stop-color="rgb(231, 155, 170)"/>
		<stop offset="0.945" stop-color="#ffffff"/>
	</linearGradient>
	<rect x="0" y="0" width="100%" height="100%" fill="url(style-v4.css,23g1.pagespeed.ce.r9nlpRkzVk.css)" />
</svg>

/* Canvas */
/*
var g = ctx.createLinearGradient(0, 0, 0, 312);
g.addColorStop(0, rgb(231, 155, 170));
g.addColorStop(0.945, #ffffff);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 621, 312);
*/


/* CSS */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjIxLCAxNTUsIDE2MCkiLz48c3RvcCBvZmZzZXQ9IjAuOTQ1IiBzdG9wLWNvbG9yPSIjZWVmZmVlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);


background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#B7F5D7), color-stop(10%,#eeffee),color-stop(90%,#eeffee),color-stop(100%,#B7F5D7));
background-image:-webkit-linear-gradient(top, #B7F5D7 0%,#eeffee 10%,#eeffee 90%,#B7F5D7 100%);
background-image:-moz-linear-gradient(top, #B7F5D7 0%,#eeffee 10%,#eeffee 90%,#B7F5D7 100%);
background-image:-ms-linear-gradient(top, #B7F5D7 0%,#eeffee 10%,#eeffee 90%,#B7F5D7 100%);
background-image:-o-linear-gradient(top, #B7F5D7 0%,#eeffee 10%,#eeffee 90%,#B7F5D7 100%);
background-image:linear-gradient(top, #B7F5D7 0%,#eeffee 10%,#eeffee 90%,#B7F5D7 100%);



/* SVG */
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0" stop-color="rgb(221, 155, 160)"/>
		<stop offset="0.945" stop-color="#eeffee"/>
	</linearGradient>
	<rect x="0" y="0" width="100%" height="100%" fill="url(style-v4.css,23g1.pagespeed.ce.r9nlpRkzVk.css)" />
</svg>

/* Canvas */
var g = ctx.createLinearGradient(0, 0, 0, 312);
g.addColorStop(0, rgb(221, 155, 160));
g.addColorStop(0.945, #eeffee);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 621, 312);

}


/*Purple*/
div.gradientBoxesWithOuterShadowspurp { 
/*height: 40px;*/
width: 324px; 
margin:0px auto;
border-top: 1px solid #8a2be2;
border-bottom: 1px solid #8a2be2;
border-right: 1px solid #8a2be2;
border-left: 1px solid #8a2be2;
padding: 0px;
background-color: #8a2be2; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* CSS */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjA1LCAxNjQsIDI0MykiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyMzgsIDIyNSwgMjUxKSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnMSkiIC8+PC9zdmc+);

background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, rgb(205, 164, 243)), color-stop(100%, rgb(238, 225, 251)));
background-image: -webkit-linear-gradient(top, #8a2be2 -200%, #ffffff 150%);
background-image: -moz-linear-gradient(top, #8a2be2 -200%, #ffffff 150%);
background-image: -ms-linear-gradient(top, #8a2be2 -200%, #ffffff 150%);
background-image: -o-linear-gradient(top, #8a2be2 -200%, #ffffff 150%);
background-image: linear-gradient(to bottom, #8a2be2 -200%, #ffffff 150%);



/* SVG */
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0" stop-color="rgb(205, 164, 243)"/>
		<stop offset="1" stop-color="rgb(238, 225, 251)"/>
	</linearGradient>
	<rect x="0" y="0" width="100%" height="100%" fill="url(style-v4.css,23g1.pagespeed.ce.r9nlpRkzVk.css)" />
</svg>

/* Canvas */
var g = ctx.createLinearGradient(0, 0, 0, 312);
g.addColorStop(0, rgb(205, 164, 243));
g.addColorStop(1, rgb(238, 225, 251));
ctx.fillStyle = g;
ctx.fillRect(0, 0, 621, 312);

}


.button {
   position: relative;
   border-top: 1px solid #8a2be2;
   background: #b570fa;
   background: -webkit-gradient(linear, left top, left bottom, from(#8a2be2), to(#b570fa));
   background: -webkit-linear-gradient(top, #8a2be2, #b570fa);
   background: -moz-linear-gradient(top, #8a2be2, #b570fa);
   background: -ms-linear-gradient(top, #8a2be2, #b570fa);
   background: -o-linear-gradient(top, #8a2be2, #b570fa);
   padding: 6px 12px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 15px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   display:inline-block;
   text-align:center;  
   z-index: 2;
   }
 .button:hover {
   border-top-color: #b570fa;
   background: #b570fa;
   color: #c91640;
   text-decoration: none;
   }
.button:active {
   border-top-color: #8a2be2;
   background: #8a2be2;
   }

.button.rel {
  position: relative;
  z-index: 2;
  top: -95px;
  right: 0px;
   }

.button.rel-ad {
  position: relative;
  z-index: 2;
  top: -105px;
  right: -95px;
   }
   
.button.rel-ad-ldrbrd {
  position: relative;
  z-index: 2;
  top: -300px;
  right: -650px;
   }

/*This section is for styling the dialogue fonts. MLCer words, LBS questions, suggested responses... and other font colors for the design*/


span.font-lbsquestion{
color: #009999
}

span.font-lbsquestioni{
font-style: italic;
color:#009999
}


span.font-recommendedwords{
color:#C91640;
}


span.font-recommendedwordsi{
font-style: italic;
color:#C91640;
}



span.font-mlcerwords{
color:#0000ff;
}


span.font-mlcerwordsi{
font-style: italic;
color:#0000ff;
}

span.font-reduced{
font-size: 85%; 
}

span.font-recommendedwordsi{
font-style: italic;
color:#C91640;
}

span.font-lightpurple{
color: #e3d0fc
}

span.font-yellow{
color: #FBFF44
}

span.font-slider{
color: #000000
   font-size:120%;
   line-height:110%;
}

span.font-optin16 {
   font-family: Verdana, Geneva, sans-serif;
   font-size:100%;
   line-height:110%;
}

span.font-optin18 {
   font-family: Verdana, Geneva, sans-serif;
   font-size:110%;
   line-height:120%;
}

span.font-optin26 {
   font-family: Verdana, Geneva, sans-serif;
   color:#7602e2;
   font-size:115%;
   line-height:130%;
}

span.font-optin28 {
   font-family: Verdana, Geneva, sans-serif;
   color:#7602e2;
   font-size:150%;
   line-height:160%;
}

/*This section is for repeat-use image-links such as the previous and next buttons. */

.img-previousarrow {
<a href="">
url('https://www.midlifecrisismarriageadvocate.com/image-files/xpreviousarrow.png.pagespeed.ic.4CwZ6aaoYI.png');
</a>
float: left;
	padding: 2px;
	margin-right: 5px;
   border: "0";
   }

/*
.img-previousarrow {
<a href=""><img src="../image-files/previousarrow.PNG" width="78" height="37" title="" alt=""/></a>
float: left;
	padding: 2px;
	margin-right: 5px;
   border: "0";
   }
*/
.img-nextarrow {
<a href=""><img src="../image-files/nextarrow.PNG" width="78" height="37" title="" alt=""/></a>
	float: right;
	padding: 2px;
	margin-right: 5px;
}


/* the border of the image  can be changed.
Its set to #000066 at the moment. You can also change the solid
to either dashed or dotted if you want to*/

/*** 2 classes to float an image to the right or left ***/
.img-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 0px
}
.img-right {
	float: right;
	padding: 5px;
	margin-left: 5px;
	border: 0px
}

.img-center {
	float: center;
	padding: 5px;
	border: 0px
}



.img-bookright {
	float: right;
	padding: 2px;
	margin-left: 2px;
	border: 0px
}


.img-bookleft {
	float: left;
	padding: 2px;
	margin-left: 2px;
	border: 0px
}

.img-behind {
  position: relative;
  z-index: 0;
  vertical-align: middle
  top: -45px;
  right: 0px;
   }


/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}

/* This is a standard table with borders*/

.gridtabletable {
font-family: Georgia, Arial, Verdana, sans-serif;
color#8A2BE2;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;

}

table.gridtable th {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666666;
}

table.gridtable td {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666666;
vertical-align:top;
text-align:left;

}


/* This is a fixed table with borders*/

table.gridtable-fixed {
font-family: Georgia, Arial, Verdana, sans-serif;
color#8A2BE2;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;

overflow:auto  
}

table.gridtable th {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666666;
overflow:auto 
}

table.gridtable td {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666666;
vertical-align:top;
text-align:left;

}



/* This is a standard table without borders*/

table.gridtable-nb {
font-family: Georgia, Arial, Verdana, sans-serif;
color#8A2BE2;
border-width: 0px;

}

table.gridtable-nb td {
border-width: 0px;
padding: 4px;
vertical-align:top;
text-align:left;
}

table.top{
border-left: 0px solid #cccccc;
border-right: 0px solid  #cccccc;
border-top: 0px solid  #cccccc;
border-bottom: 0px solid  #cccccc;
width: 100%;
  }

.widget_wysija_cont .abs-req {
display: none;
}

/* SLIDER CSS */


.csslider {
/*  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;*/
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.csslider > input {
  display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: -0%;
}
/*This sets the main viewable container for each slide*/
.csslider > ul {
  position: relative;
  width: 650px;
  height:275px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  background-color: transparent;
  border: 0px solid #b7f5d7;
  margin: 0px 30px 0px 30px;
  padding: 0px 0px 0px 0px;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*This border is actually the little arrow on the speaker box that points to the speaker's identity. I took it from the testimonials slider css
  It is not working right now...maybe it needs to go with a different class*/
  border: solid transparent; 
  border-top-color: transparent;
  border-left-color: transparent;
  border-width: 10px; 
  left: 10%; 
}
/*This sets the contents of each individual slide???*/
.csslider > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  background-color: #b7f5d7;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
  

}
.csslider > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider > .navigation {
  position: absolute;
  bottom: -8px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: #b7f5d7;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
  background: #7602e2;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
  opacity: 1;
}
.csslider > .arrows {
  position: absolute;
  left: -21px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #3a3a3a;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}
.csslider > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #7602e2;
  margin: 0 0px;
}
.csslider > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);for -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
/*Quotation css taken from different slider made for testimonials*/
.quotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
}
.leftq{
  top:-10px;
  left:5px;
}
.rightq{
  bottom:35px;
  right:5px;
}
/*#region MODULES */
/*#endregion */