/**********************************
GENERAL and for devices up to 480px
***********************************/
*{
	margin: 0;
  	padding: 0;
}

body {	
	font-family: 'Barlow', sans-serif;
	font-size: 100%;
	color: rgba(47, 47, 47, 1.0);
}

body.site {
	border: 0;
    background: rgba(255, 255, 255, 1.0);
  	padding: 0;
}

.body .container {
	background-color: rgba(255, 255, 255, 1.0);
    border-radius: 0px;
    border: 0px solid rgba(0,0,0,0.15);
  	box-shadow: none;
    padding: 3rem 1rem 1rem 1rem;
}

a {
	color: rgba(47, 47, 47, 1.0);
  	text-decoration: none;
  	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
	transition-delay: initial;
}

a:hover {
	text-decoration: underline;
}

.clear {
  	clear:both;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}



/**********************************
FONTS
***********************************/
h1, h2, h3, h4, h5, h6 {
  	text-rendering: optimizelegibility;
  	margin: 0;
  	padding: 0;
}

h1 {
	font-size: 2rem;
  	font-weight: 400;
}

h2 {
    color: #589da5;
    text-transform: uppercase;
    padding: 1.5rem 0;
    font-weight: 700;
    font-size: 2rem;
  	line-height: 2.5rem;
}

h3 {
	font-size: 1.5rem;
  	font-weight: 400;
}

h4 {
	font-size: 1.5rem;
  	font-weight: 400;

}

p, li {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 300;
    padding: 0;
    margin: 0;
}

br {
	line-height: 1rem;
}

ul, ol {
	padding: 0;
	margin: 0;
}



/**********************************
HEAD
***********************************/
#head {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0));
    padding: 10px 0;
    position: absolute;
    z-index: 1000;
    width: 100%;
}

/********** LOGO ***********/

#head-a {
    width: 60%;
    float: left;
    margin: 1.5rem 0 0 1rem;
    text-align: left;
}

#head-a h1 {
    font-family: 'Parisienne', cursive;
    font-size: 3rem;
    line-height: 2.5rem;
    text-shadow: #000 2px 2px 3px;
}

#head-a h1 a{
	color: #fff;
}

#head-a h1 a:hover{
	text-decoration: none;
}

/********** NAVIGATION ***********/
#head-b {
    width: auto;
    float: right;
    margin: 2rem;
}

#off-menu_91 h3.sm-head span {
    font-family: 'Barlow', sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.20);
    line-height: 50px;
}

.off-menu_91 dl a,
.off-menu_91 dl a:link,
.off-menu_91 dl.level1 a,
.off-menu_91 dl.level1 a:link {
font-family: 'Barlow', sans-serif;
font-size: 1.5rem;
color: #589da5;
font-weight: 600;
font-style: normal;
text-decoration: none;
text-align: left;
text-shadow: none;
line-height: normal;
text-transform: uppercase;
}

.off-menu_91 dl dt.opened.parent a,
.off-menu_91 dl.level1 dt.opened.parent a,
.off-menu_91 dl dt.hover a,
.off-menu_91 dl dt:hover a,
.off-menu_91 dl.level1 dt.hover a,
.off-menu_91 dl.level1 dt:hover a{
font-family: 'Barlow', sans-serif;
font-size: 1.5rem;
color: #4c7675;
font-weight: 600;
font-style: normal;
text-decoration: none;
text-align: left;
text-shadow: none;
line-height: normal;
text-transform: uppercase;
}

.off-menu_91 dl dt.active.parent a,
.off-menu_91 dl dt.active a,
.off-menu_91 dl.level1 dt.active.parent a,
.off-menu_91 dl.level1 dt.active a{
font-family: 'Barlow', sans-serif;
font-size: 1.5rem;
color: #589da5;
font-weight: 600;
font-style: normal;
text-decoration: none;
text-align: left;
text-shadow: none;
line-height: normal;
text-transform: uppercase;
}



/**********************************
SLIDER
***********************************/
.tagline h2 {
    text-shadow: #000 4px 3px 8px;
    text-align: center;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 3.5rem;
    font-family: Barlow, sans-serif;
    line-height: 4rem;
    word-break: keep-all;
  	padding: 0;
}



/**********************************
SUB-HEADER
***********************************/
#position-10-container {
    text-align: center;
    background-size: cover;
  	background-position: center;
}

#position-10-container .custom{
    padding: 9rem 0;
}

#position-10-container h2 {
    text-shadow: #000 4px 3px 8px;
    text-align: center;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 3.5rem;
    font-family: Barlow, sans-serif;
    line-height: 4rem;
} 

 

/**********************************
CONTENTS
***********************************/
/************ item ****************/
.item p, .item ul, .blog-items .blog-item p, .blog-items .blog-item ul {
    padding: 0px 0 1rem 0;
    list-style-position: inside;
}

/************ item-page ****************/
.item-page {
    padding: 1rem 0;
}

.item-page p{
	padding: 10px 0; 
}

.item-page ul{
	margin-left: 30px;
}

.item-page h2{
	padding: 30px 0 20px 0;
}

.item-page h3{
	margin-top: 30px;
}

.item-page h1 {
	margin: 0 0 30px 0;
    line-height: 1.25em;
  	color: #589da5;
}

/************ page-header ****************/
.page-header {
	padding-bottom: 5px;
    border-bottom: 0px solid #eee;
}

.page-header h2 {
  	padding: 0;
  	margin: 0;
}

.page-header h1 a:hover{
  	text-decoration: none;
}

/************ items-leading ****************/
.items-leading {
	padding: 30px; 
    background: rgba(255, 255, 255, 1.0);
    clear: both;
}

.items-leading p{
    padding: 0;
}

.items-leading h2{
  	font-size: 1.75rem;
}

.items-leading a{
	color: rgba(52, 75, 160, 1.0); 
}

/************ pull-left ****************/
.pull-left {
    margin: 0px 20px 20px 0;
}

.pull-right.item-image {
    margin: 0 0 30px 0;
}

/************ blog ****************/
.blog {
    padding: 20px;
}

.blog .pull-none img {
	margin: 0 0 30px 0;
}

.blog  h1 {
	margin: 0 0 30px 0;
    line-height: 1.25em;
  	color: #589da5;
  	text-transform: uppercase;
  	font-weight: 700;
}

.blog-featured .pull-none img {
	margin: 0 0 30px 0;
}

.blog-featured  h1 {
	margin: 0 0 30px 0;
    line-height: 1.25em;
  	color: #589da5;
  	text-transform: uppercase;
  	font-weight: 700;
}

/************ span ****************/
.span6 {
	width: 100%;
}

.span12 {
    margin: 0;
}

.row-fluid .span4 {
	margin-bottom: 2rem;
}

/**********************************
RIGHT COLUMN
***********************************/
.well {
}



/**********************************
BREADCRUMB
***********************************/
#position-18-container {
    width: 100%;
    margin: 0 0 2rem 0;
}

.breadcrumb {
    background-color: #c4dde0;
}

.breadcrumb li {
    font-size: 1rem;
    font-weight: 700;
    text-shadow: none;
}



/**********************************
LOGO BOTTOM
**********************************/
#bottom-logo {
    width: 100%;
    position:relative;
    text-align: center;
    padding: 20px 0;
}

#bottom-logo p{
    font-size: 0.75rem;
}



/**********************************
FOOTER
***********************************/
#footer-bar {
  	clear: both;
    background: rgba(0, 0, 0, 1.0);
    color: rgba(255, 255, 255, 1.0);
    font-size: 0.75rem;
}

#footer-container {
    margin: 0 auto;
    position: relative;
    background: transparent;
}

#footer-bar-contents-first, #footer-bar-contents-second, #footer-bar-contents-third{
    text-align: center;
    float: none;
    clear: none;
    padding: 20px;
}

#footer-bar-contents-second p{
    padding: 10px 0 20px 0;
}


#footer-bar-contents-second, #footer-bar-contents-third{
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: none;
}

#footer-bar-contents-second a {
  	color: rgba(255, 255, 255, 1.0);
}

#footer-bar-contents-third a{
  	color: rgba(255, 255, 255, 1.0);
    text-transform: uppercase;
  	padding: 10px;
  	border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

#footer-bar-contents-third a:hover{
  	color: rgba(255, 255, 255, 1.0);
  	background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
   
.footer-navigation a{
    display: block;
    padding: 10px 0 0 0;
}



/**********************************
LOGO BOTTOM
***********************************/
#position-19-container {
	text-align: center;
}

#position-19-container h1 {
	font-family: 'Parisienne', cursive;
  	font-size: 3rem;
    line-height: 2rem;
}

#position-19-container h1 a{
	color: #666;
}

#position-19-container h1 a:hover{
	text-decoration: none;
}



/**********************************
CREDITS
***********************************/
.credits .container {
    text-align: center;
    position: relative;
    width: 100%;
    padding: 1rem 0;
    margin: 3rem 0 0 0;
    border-top: 1px solid #e2e2e2;
    background: #f2f2f2;
}

.credits a{
    color: rgba(52, 75, 160, 1.0);
    text-decoration: none;
}

.credits a:hover{
    text-decoration: underline;
}



/**********************************
BUTTONS
***********************************/
.btnblue {
    background: rgba(91, 109, 177, 1.0);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 20px;
    text-decoration: none;
  	display: block; 
  	width: 60px;
  	text-align: center;
}

.btnblue:hover {
    background: rgba(52, 75, 160, 1.0);
    text-decoration: none;
  	color: #ffffff;
}

.btn {
    display: inline-block;
    padding: 1rem;
    margin: 1rem 0;
    font-size: 1rem;
    line-height: 1rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #589da5;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #fff;
    background-image: none;
    border: 1px solid #589da5;
    border-radius: 0;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: 600;
}

.btn .icon-chevron-right {
  display: none;
}


/**************************************** 1024 ****************************************/
@media (min-width: 950px) {
  
/********** LOGO ***********/
    #head-a {
        width: auto;
        float: left;
        margin: 2rem;
      	text-align: left;
    }
  
    #head-a h1 {
        font-family: 'Parisienne', cursive;
        font-size: 4rem;
        line-height: 3rem;
        text-shadow: #000 2px 2px 3px;
    }

/********** TAGLINE ***********/
    .tagline h2 {
      font-size: 5rem;
      line-height: 4.5rem;
  	} 

/********** SUBPAGES ***********/
#position-10-container h2 {
    font-size: 5rem;
} 

/********** CONTENTS ***********/
  	.row-fluid .span4 {
        margin-top: 2rem;
        width: 30.914893614%;
		margin-bottom: 2rem;
  	}
  
  	.row-fluid [class*="span"] {
        margin-left: 3.127659574%;
    }
  
  	.pull-right.item-image {
    	margin: 0 0 18px 20px;
    	width: 40%;
	}
 
  
  
/**********************************
BREADCRUMB
***********************************/
    #position-18-container {
        width: 70%;
      	margin: 0 auto 2rem auto;
    }
}



#content .com-content-category-blog .items-row::before {
	display: none;
}

.blog-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin-right: -0.5em;
  margin-bottom: 1em;
  margin-left: -0.5em;
}
@media (min-width: 992px) {
  .blog-items.columns-2 > div {
    width: 50%;
  }
  .blog-items.columns-3 > div {
    width: 33.33333%;
  }
  .blog-items.columns-4 > div {
    width: 25%;
  }
}

.blog-item {
  display: flex;
  flex-direction: column;
  padding: 0 0.5em 1em;
  overflow: hidden;
}
.boxed .blog-item {
  background-color: white;
  box-shadow: 0 0 2px rgba(51, 57, 66, 0.1), 0 2px 5px rgba(51, 57, 66, 0.08), 0 5px 15px rgba(51, 57, 66, 0.08), inset 0 3px 0 var(--cassiopeia-color-primary);
}
.boxed .blog-item .item-content {
  padding: 25px;
}
.blog-item .item-image {
  margin-top: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}
.boxed .blog-item .item-image {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .image-right .blog-item .item-image {
    order: 1;
  }
}
.image-bottom .blog-item .item-image {
  margin-top: -15px;
  order: 1;
}
.image-left .blog-item .item-content {
  padding-left: 25px;
}
.image-right .blog-item .item-content {
  padding-right: 25px;
}
.image-left .blog-item, .image-right .blog-item {
  flex-direction: column;
}
@media (min-width: 992px) {
  .image-left .blog-item, .image-right .blog-item {
    flex-direction: row;
  }
  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 0 40%;
  }
  .image-left .blog-item .item-content, .image-right .blog-item .item-content {
    flex: 1 0 60%;
  }
}

.article-info dd {
  padding: 0;
}

@supports (display: grid) {
  .blog-items {
    display: grid;
    margin: 0 0 1em;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-gap: 1em;
  }
  .blog-items .blog-item {
    padding: 0 4%;
  }
  .blog-items[class^=columns-] > div, .blog-items[class*=" columns-"] > div {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
  @media (min-width: 992px) {
    .blog-items.columns-2 {
      grid-template-columns: 1fr 1fr;
    }
    .blog-items.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .blog-items.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}
.blog-items[class^=masonry-], .blog-items[class*=" masonry-"] {
  display: block;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.blog-items[class^=masonry-] .blog-item, .blog-items[class*=" masonry-"] .blog-item {
  display: inline-flex;
  margin-bottom: 1em;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
}
@media (min-width: 992px) {
  .blog-items.masonry-2 {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  .blog-items.masonry-3 {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
  .blog-items.masonry-4 {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
  }
}

/* breadcumb */
.breadcrumb > li > a::after {
	content: "";
	height: 0;
	width: 0;
	border-left: 6px solid #ff8400;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	display: inline-block;
	margin: 10px;
	vertical-align: middle;
}

/* pagination */
ul.pagination  {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-left: 0;
    margin-bottom: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
ul.pagination  > li {
    display: inline;
}
ul.pagination  > li > a, ul.pagination  > li > span {
    float: left;
    padding: 4px 12px;
    line-height: 18px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-left-width: 0;
}
ul.pagination  > li:first-child > a, ul.pagination  > li:first-child > span {
    border-left-width: 1px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
}
ul.pagination > .active > a, ul.pagination > .active > span {
    color: #999;
    cursor: default;
}
ul.pagination > .disabled > span, ul.pagination > .disabled > a, ul.pagination > .disabled > a:hover, ul.pagination > .disabled > a:focus {
    color: #999;
    cursor: default;
}
.com-content-category-blog__counter.counter.float-end {
    margin: 0 0px 20px 20px;
    float: right;
    padding: 5px;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 40%;
}
.icon-angle-right::before{
    content: "\7b";
}
.icon-angle-double-right::before {
    content: "\e000";
}
.icon-angle-left::before {
    content: "\7c";
}
.icon-angle-double-left::before {
    content: "\7d";
}