/*

New Vision Template

https://templatemo.com/tm-542-new-vision



    COLORS
    
    Title: #333 (Dark Gray)
    Text: #B22222(Firebrick)
    Hover: #EEDD82 (SaddleBrown)
    Button: #CD5B45 (Coral3)
	Text #778899 
    
*/

ul, h1, h2, h3, h4, p, figure {
    padding: 0;
    margin: 0;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  background-color: #93b4d4; /*พื้นหลัง*/
  overflow-x: hidden;
}

a { 
    transition: all 0.3s ease; 
    text-decoration: none;
}

a:hover { text-decoration: none; }
button:focus { outline: none; }

h1, h2, h3 {
    color: rgb(15, 12, 10);
    font-weight: 600;
}

p {
    color: #0b1e31 ;
    line-height: 1.5;
}

.tm-color-primary { color: #EEDD82; }

.navbar-toggler {
    padding: 10px 15px;
    border-color: #d4d4d4;
}

.container-fluid {
    max-width: 1650px;
    background-color: #e7f0f8;
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 992px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.tm-site-header { padding-top: 50px; }

@media (max-width: 992px) {
    .tm-site-header {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.tm-site-header-col {
    display: flex;
    justify-content: space-between;
}

.tm-site-icon { padding: 10px; color: #999; }

.tm-site-name {
    display: inline-block;
    text-transform: uppercase;
    font-size: 2rem;
    color: rgb(219, 158, 26)
#0000CD;
}

.tm-main-bg {
    background-image: url(../img/photo.jpg);
    background-repeat: no-repeat;
    background-position: 10% top;
    height: 1000px;
    min-height: 300px;
    margin-left: -40px;
    margin-right: -40px;
}

.tm-about-bg { background-image: url(../img/new-vision-02.jpg);}
.tm-services-bg { background-image: url(../img/SOL01.jpg); }
.tm-contact-bg { background-image: url(../img/new-vision-04.jpg); }

@media (max-width: 992px) {
    .tm-contact-bg { background-position: 80% top; }
}

nav > ul > li { list-style: none; }
    /*บนหัวหน้าHome */
.tm-nav {
    border: 2px  #B22222;
    margin: 0 5px 10px;
}

.tm-nav > ul {
    display: flex;
    flex-direction: row;
    padding-right: 20px;
}

@media (max-width: 929px) {
    .tm-nav > ul {
        flex-direction: column;
        padding-right: 0;
    }
}
       /*หตัวหนังสือ ัวข้างบน*/
.tm-nav-link {
    font-size: 2rem;
    text-decoration: none;
    color: #B22222;
    display: inline-block;
    padding: 25px 30px;
    margin-left: 25px;
    border-bottom: 5px solid transparent;
}

@media (min-width: 1080px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 30px;
        padding-left: 30px;
    }    
}
       /*หัวข้างบน link*/
.nav-item .tm-nav-link:hover,
.nav-item.active .tm-nav-link {
    color: #191970;
    border-bottom: 10px solid #191970;
    border-left: none;
}

@media (max-width: 992px) {
    .navbar-nav .tm-nav-link {
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
        display: block;
        padding: px 20px;
    }
    
    .nav-item .tm-nav-link {
        border-left: 5px solid transparent;
        border-bottom: none;
    }
    
    .nav-item .tm-nav-link:hover, 
    .nav-item.active .tm-nav-link {
        border-left: 5px solid  #191970;
        border-bottom: none;
    }
}

.tm-mobile-menu { display: none; }

.tm-mobile-menu.active.focus, 
.tm-mobile-menu.active:focus,
.tm-mobile-menu.focus, 
.tm-mobile-menu:active.focus, 
.tm-mobile-menu:active:focus, 
.tm-mobile-menu:focus {
  outline: none;
  box-shadow: none;
  background-color: white;
}

.tm-menu-container-outer {
    display: flex;
    justify-content: flex-end;
}

.tm-menu-container {
    display: inline-block;
    margin-right: -20px;
}

@media (max-width: 992px) {
    .tm-menu-container {
        position: absolute;
        right: 30px;
        top: 0;
    }
    
    .tm-mobile-menu {
        display: block;
        padding: 10px 15px;
        border-radius: 3px;
        background-color: transparent;
    }
    
    .tm-nav {
        height: 0;
        transition: all 0.3s ease;
        position: absolute;
        right: 0;
        top: 44px;
        z-index: 1000;
        background-color: white;
        margin: 0;
        min-width: 180px;
    }
    
    .tm-nav.show { height: auto; }
    
    #navbarSupportedContent1 {
        position: absolute;
        top: 50px;
        right: 0px;
        z-index: 1000;
        background-color: white;
    }
}

.tm-section-header {
    display: inline-block;
    background-color: #f51155;
    color: white;
    padding: 20px 70px 30px 30px;
    margin: 0;
}

@media (max-width: 500px) {
    .tm-section-header { padding: 10px; }
}

.tm-section-header-small {
    font-size: 1.8rem;
    padding: 25px 130px 25px 25px;
}

.tm-header-floating {
    position: absolute;
    z-index: 100;
    top: -20px;
}

.tm-welcome-row {
    margin-top: 128px;
    margin-bottom: 10px;
}

.tm-welcome-row-2 { margin-bottom: 40px; }

.tm-article-link:hover .tm-article-title { color:#CD5B45; }
.tm-hover-color { color: #CD5B45; }

.tm-article-title {
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.tm-media {
    display: flex;
    align-items: flex-start;
    margin-bottom: 70px;
}

.tm-media-v-center { align-items: center; }

.tm-media-img {
    margin-right: 20px;
    width: 55%;
    max-width: 300px;
}

.tm-media-body {
    margin-right: 10px;
    width: 45%;
}

@media (max-width: 992px) {
    .tm-media-body { width: auto; }
}

@media (max-width: 480px) {
    .tm-media { flex-direction: column; }
    .tm-media-img { width: auto; }
    
    .tm-media-body {
        max-width: 300px;
        margin-right: 0;
        margin-top: 20px;
    }
}

.tm-dotted-box-container { margin-bottom: 35px; }

.tm-dotted-box {
    display: flex;
    flex-direction: column;
    border: 1.2px dotted #ccc;
    padding: 24px;
    height: 100%;
	
}

.tm-article-icon {
    color: #778899;
    margin-top: auto;
    margin-bottom: auto;
}

.tm-article-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 1.5;
}

.tm-article-title,
.tm-article-text {
    margin-bottom: 50px;
}

.tm-article-link { align-self: flex-end; }

/*.tm-btn {
    background-color:#778899
    color : white;
    padding: 10px 25px;
}*/

.tm-btn:hover,
.tm-btn:focus {
    background-color: #924141;
    text-decoration: none;
    color:white;
}

.tm-btn-rounded { border-radius: 3px; }

.tm-carousel {
    padding-top: 40px;
    padding-bottom: 35px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
    .tm-carousel { max-width: 800px; }
}

@media (max-width: 420px) {
    .tm-carousel { max-width: 240px; }
}

.tm-featured { margin-bottom: 50px; }
.slick-dots li { width: 30px; }
.slick-dots li button { width: 30px; }

.slick-dots li button:before {
    font-family: "Font Awesome 5 Free";
    font-size: 30px;
    font-weight: 900;
    content: "\f068";
    color: #ddd;
    opacity: 1;
    width: 30px;
    transition: all 0.3s ease;
}

.slick-dots li button:hover:before, 
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
    color:#778899;
}

footer {
    color: #B22222;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: right;
}

footer a { color: #B22222; }

footer a:hover {
    color: #EEDD82;
    text-decoration: none;
}

/* Hover Effect */
/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 1200px) {
    .grid figure {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaptioFn::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h4 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h4 span { font-weight: 800; }

.grid figure h4,
.grid figure p {
  margin: 10px 0 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
  background: #4a3753;
  max-width: 240px;
}

figure.effect-honey img {
  opacity: 0.9;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img { opacity: 0.5; }

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #3496d8;
  content: "";
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}

figure.effect-honey h4 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey h4 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h4 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h4,
figure.effect-honey:hover h4 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Our Company */
.tm-about { max-width: 975px; }

.tm-about-icon {
    color: #EEDD82;
    min-width: 235px;
    display: flex;
    justify-content: center;
}

@media (max-width: 600px) {
    .tm-about-icon {
        padding-bottom: 50px;
        margin-left: auto;
        margin-right: auto;
        min-width: 160px;
    }
}

.tm-about-1 {
    padding: 50px;
    max-width: 840px;
}

/*---------------*/
/***** Zoe *****/
/*---------------*/

.grid figure.effect-zoe { background: transparent; }

figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 15px 15px 0;
	height: 5em;
	background: rgba(69, 12, 204, 0.7);
	color: #2b08f3;
	-webkit-transition: -webkit-transform 20s;
	transition: transform 20s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-zoe p.icon-links a {
	color: #3c4a50;
	font-size: 1.4rem;
	padding: 1200px 600px;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
	color: #EEDD82;
}

figure.effect-zoe p.description {
	position: absolute;
	bottom: 8em;
	padding: 2em;
	color: rgb(105, 228, 228);
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 20s;
	transition: opacity 20s;
	-webkit-backfacevisibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
	-webkit-transition: all 20s;
	transition: all 20s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
	display: inline-block;
	padding: 8px 10px;
	font-family: 'feathericons';
	speak-as: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-eye::before { content: '\e000'; }
.icon-paper-clip::before { content: '\e001'; }
.icon-heart::before { content: '\e024'; }
figure.effect-zoe h2 { font-size: 1.4rem; }
figure.effect-zoe:hover p.description { opacity: 1; }

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.tm-services {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .tm-services { max-width: 510px; }
}

.tm-services-img {
    max-width: 500px;
    margin: 0 auto 40px;
}
/* ตัวหนังสือ Service */
.tm-service-description {
    font-size: 2rem;
    color: #2F4F4F;
    text-align: center;
    margin-top: 20px;
}

.tm-solid-border {
    border: 1px solid #CCCDCE;
    padding: 40px;
}

.tm-service-icon {
    text-align: center;
    min-width: 125px;
    margin-right: 15px;
    color: #EEDD82;
}

.tm-approach-row {
    max-width: 1082px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.tm-approach-box {
    margin-left: 12px;
    margin-right: 12px;
}

@media (max-width: 992px) {
    .tm-approach-box {
        margin-left: auto;
        margin-right: auto;
    }
}

.tm-media-2 { margin-bottom: 54px; }

@media (max-width: 992px) {
    .tm-media-2 { margin-bottom: 30px; }
}

@media (max-width: 880px) and (min-width: 768px) {
    .tm-media-2 { flex-direction: column; }
    .tm-service-icon { margin-bottom: 30px; }
}

@media (max-width: 480px) {
    .tm-service-icon {
        margin-right: 0;
        margin-bottom: 30px;
    }
}

.tm-partners {
    max-width: 1020px;
    margin-top: 30px;
}

.tm-partners img {
    margin-left: 10px;
    margin-right: 10px;
}

.tm-partner-text {
    margin-top: 40px;
    max-width: 830px;
}

.form-group { margin-bottom: 35px; }

.tm-btn-primary {
    color: white;
    background-color:#778899;
    font-size: 1.2rem;
    padding: 12px 30px;
}

.tm-btn-primary:hover,
.tm-btn-primary:focus {
    color: white;
    background-color: #a64b4b;
}

.tm-link { color: #B22222; }
.tm-contact-box { padding: 65px; }

.mapouter{
    position:relative;
    text-align:right;
    height:440px;
    padding-left: 60px;
    padding-right: 60px;
    width:100%;
}

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:440px;
    width:100%;
}

.tm-ul-hyphen li {
    list-style-type: none;
    line-height: 1.9;
    color: #B22222;
}

.tm-ul-hyphen li:before {
    content: '-';
    margin-right: 5px;
}

.tm-contact-l,
.tm-contact-r {
    padding-left: 75px;
    padding-right: 75px;
}

@media (max-width: 992px) {
    .mapouter,
    .tm-contact-l,
    .tm-contact-r,
    .tm-contact-box {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 768px) {
    .tm-contact-r { margin-top: 50px; }
    
    .mapouter,
    .tm-contact-l,
    .tm-contact-r,
    .tm-contact-box {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.tm-fe { margin-bottom: 50px; }
.slick-do li { width: 30px; }
.slick-do li button { width: 30px; }

.slick-do li button:before {
    font-family: "Font Awesome 5 Free";
    font-size: 30px;
    font-weight: 900;
    content: "\f068";
    color: #ddd;
    opacity: 1;
    width: 30px;
    transition: all 0.3s ease;
}

.slick-do li button:hover:before, 
.slick-do li button:focus:before,
.slick-do li.slick-active button:before {
    color:#778899;
}
.slidershow {
    width: 1400px;
    height: auto;
 overflow: hidden;  /*รูปแบบการโชว์รูป */ 
}
.middle{
    position:absolute;;
    top: 1500px;
    left: 20%;
transform: translate(0%,-40%);
}
.nevigation{
    position:absolute;;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
 display: flexbox;
}
.bar{
    width: 50px;
    height: 20px;
    border: 4px solid rgb(4, 59, 75);
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bar:hover{
    background: rgb(6, 10, 22);
  
}
input[name="r"]{
    position:absolute;;
    visibility: hidden;
}
.slides{
    width: 500%;
    height: 100%;
    display: flex;
}
.slide{
    width: 20%;
   transition: 0.9s;
}
.slide img{
    width: 100%;
    height: 100%;
}
#r1:checked ~ .s1{
    margin-left: 0;
}
#r2:checked ~ .s2{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}
#r6:checked ~ .s1{
  margin-left: -100%;
}
.slidershow {
    width: 1200px;
    height: auto;
 overflow: hidden;  /*รูปแบบการโชว์รูป */ 
}
.middle-mt{
    position:absolute;;
    top: 2500px;
    left: 20%;
transform: translate(0%,-40%);
}
.nevigation-mt{
    position:absolute;;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
 display: flexbox;
}
.bar-mt{
    width: 50px;
    height: 20px;
    border: 4px solid rgb(4, 59, 75);
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bar:hover{
    background: rgb(6, 10, 22);
  
}
input[name="t"]{
    position:absolute;;
    visibility: hidden;
}
.slides-mt{
    width: 500%;
    height: 100%;
    display: flex;
}
.slide-mt{
    width: 20%;
   transition: 0.9s;
}
.slidem img{
    width: 100%;
    height: 100%;
}

#t1:checked ~ .y1{
    margin-left: -120;
}
#t2:checked ~ .y1{
  margin-left: -140%;
}
#t3:checked ~ .y1{
  margin-left: -160%;
}
#t4:checked ~ .y1{
  margin-left: -180%;
}
#t5:checked ~ .y1{
  margin-left: -200%;
}
#t6:checked ~ .y1{
  margin-left: -220%;
}
#t7:checked ~ .y1{
  margin-left: -240%;
}
#t8:checked ~ .y1{
    margin-left: -260%;
  }
  #t9:checked ~ .y1{
    margin-left: -280%;
  }
  #t10:checked ~ .y1{
    margin-left: -300%;
  }
  #t11:checked ~ .y1{
    margin-left: -340%;
  }
  #t12:checked ~ .y1{
    margin-left: -380%;
  }
  #t13:checked ~ .y1{
    margin-left: -420%;
  }
  #t14:checked ~ .y1{
    margin-left: -460%;
  }
  #t15:checked ~ .y1{
    margin-left: -500%;
  }
  #t16:checked ~ .y1{
    margin-left: -540%;
  }
  #t17:checked ~ .y1{
    margin-left: -580%;
  }
  #t18:checked ~ .y1{
    margin-left: -620%;
  }

 
  .image-gallery {
    display: flex;
  flex-flow: column wrap;
  height: 600px;
  margin: 0 auto;

}
.image-gallery section {
  display: none;
  margin-left: 20px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.image-gallery section img {
  height: auto;
  width: 100%;
  max-width:1200px;
}

.image-gallery input {
display: none;
}

.image-gallery label {
  border: 1px solid #3194ee;
  margin: 0 0 10px;
  padding: 5px;
  text-align: center;
  width: 20%;
}
.image-gallery label:hover {
cursor: pointer;
}

.image-gallery label img {
  height: auto;
  width: 100%;
}
.image-gallery input:checked + label {
border: 1px solid #004481;
padding: 5px;
}

.image-gallery #tab1:checked ~ #content1,
.image-gallery #tab2:checked ~ #content2,
.image-gallery #tab3:checked ~ #content3
 {
display: block;
}

@media only screen and (min-width:240px) and (max-width: 768px){
  
}


.container {
	display: block;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.small {
	width: 180px;
	height: auto;
	position: relative;
	margin: 3px;
	border-radius: 5px;
}

.small:hover {
	-webkit-transform: scale(1.03, 1.03);
	transform: scale(1.03, 1.03);
}

.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}

a div {
	position: relative;
	margin: auto auto;
	text-align: center;
}

.lightbox:target {
	display: -webkit-box;
	display: flex;
}

.container a {
	text-decoration: none;
}

.container p {
	font-size: 20px;
	color: white;
	font-family: 'Poiret One';
}


/*playรูปภาพ*/

.nav-j {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 40px;
  }
  .nav-j h1 {
    font-size: 28px;
    font-family: Georgia;
    color: #4d4d4d;
  }
  
  .property {
    width: 1300px;
    margin: 0 auto;
  }
  
  .property-details {
    font-size: 21px;
    font-family: sans-serif;
  }
  
  .property-options {
    border: 1px solid #e6e6e6;
    padding: 20px;
    margin: 20px 0;
  }
  
  .rest-of-body {
    border: 1px solid #e6e6e6;
    background: #f7f7f7;
    height: 800px;
  }
  
  .slideshow {
    background: #262626;
    border-radius: 4px;
    margin-bottom: 20px;
    position: relative;
  }
  .slideshow-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .slideshow-item img {
    display: block;
    margin: auto;
  }
  
  .arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 50px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2016%22%20width%3D%226%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5%201-4%207%204%207%22%20fill%3D%22none%22%20stroke-width%3D%22.8%22%20opacity%3D%22.3%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22square%22%2F%3E%3Cpath%20d%3D%22m5%201-4%207%204%207%22%20fill%3D%22none%22%20stroke-width%3D%22.5%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center/30px;
  }
  .arrow-next {
    right: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  
  .progress {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #ccc;
    font-family: sans-serif;
  }
  
  [id^="target"]:target ~ .play {
    -webkit-transition: all 750ms ease;
    transition: all 750ms ease;
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.7);
  }
  
  [id^="target"] {
    display: none;
  }
  
  .item-1 {
    z-index: 2;
    opacity: 1;
  }
  
  *:target ~ .item-1 {
    opacity: 0;
  }
  
  #target-1:target ~ .item-1 {
    opacity: 1;
  }
  
  #target-2:target ~ .item-2,
  #target-3:target ~ .item-3,
  #target-4:target ~ .item-4,
  #target-5:target ~ .item-5,
  #target-6:target ~ .item-6,
  #target-7:target ~ .item-7,
  #target-8:target ~ .item-8,
  #target-9:target ~ .item-9,
  #target-10:target ~ .item-10,
  #target-11:target ~ .item-11,
  #target-12:target ~ .item-12,
  #target-13:target ~ .item-13,
  #target-14:target ~ .item-14
  {
    z-index: 3;
    opacity: 1;
  }
  
  .item-1 {
    -webkit-animation: slideshow 16s ease 0s infinite;
            animation: slideshow 16s ease 0s infinite;
  }
  .item-2 {
    -webkit-animation: slideshow 16s ease 4s infinite;
            animation: slideshow 16s ease 4s infinite;
  }
  .item-3 {
    -webkit-animation: slideshow 16s ease 8s infinite;
            animation: slideshow 16s ease 8s infinite;
  }
  .item-4 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-5 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-6 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-7 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-8 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-9 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-10 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-11 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-12 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }
  .item-13 {
    -webkit-animation: slideshow 16s ease 12s infinite;
          animation: slideshow 16s ease 12s infinite;
  }
  .item-14 {
    -webkit-animation: slideshow 16s ease 12s infinite;
            animation: slideshow 16s ease 12s infinite;
  }

  #target-1:target ~ .item-1 {
    opacity: 1 !important;
    -webkit-animation: none;
            animation: none;
  }
  #target-1:target ~ .item-2, #target-1:target ~ .item-3, #target-1:target ~ .item-4 {
    opacity: 0;
    -webkit-animation: none;
            animation: none;
  }
  
  #target-2:target ~ .item-2 {
    opacity: 1 !important;
    -webkit-animation: none;
            animation: none;
  }
  #target-2:target ~ .item-1, #target-2:target ~ .item-3, #target-2:target ~ .item-4 {
    opacity: 0;
    -webkit-animation: none;
            animation: none;
  }
  
  #target-3:target ~ .item-3 {
    opacity: 1 !important;
    -webkit-animation: none;
            animation: none;
  }
  #target-3:target ~ .item-1, #target-3:target ~ .item-2, #target-3:target ~ .item-4 {
    opacity: 0;
    -webkit-animation: none;
            animation: none;
  }
  
  #target-4:target ~ .item-4 {
    opacity: 1 !important;
    -webkit-animation: none;
            animation: none;
  }
  #target-4:target ~ .item-1, #target-4:target ~ .item-2, #target-4:target ~ .item-3 {
    opacity: 0;
    -webkit-animation: none;
            animation: none;
  }
  #target-5:target ~ .item-5 {
    opacity: 1 !important;
    -webkit-animation: none;
            animation: none;
  }
  #target-5:target ~ .item-1, #target-5:target ~ .item-2, #target-5:target ~ .item-3 {
    opacity: 0;
    -webkit-animation: none;
            animation: none;
  }

#target-6:target ~ .item-6 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-6:target ~ .item-1, #target-6:target ~ .item-2, #target-6:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-7:target ~ .item-7 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-7:target ~ .item-1, #target-7:target ~ .item-2, #target-7:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-8:target ~ .item-8 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-8:target ~ .item-1, #target-8:target ~ .item-2, #target-8:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-9:target ~ .item-9 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-9:target ~ .item-1, #target-9:target ~ .item-2, #target-9:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
} 
#target-10:target ~ .item-10 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-10:target ~ .item-1, #target-10:target ~ .item-2, #target-10:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-11:target ~ .item-11 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-11:target ~ .item-1, #target-11:target ~ .item-2, #target-11:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-12:target ~ .item-12 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-12:target ~ .item-1, #target-12:target ~ .item-2, #target-12:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-13:target ~ .item-13 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-13:target ~ .item-1, #target-13:target ~ .item-2, #target-13:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
#target-14:target ~ .item-14 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-14:target ~ .item-1, #target-14:target ~ .item-2, #target-14:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
  @-webkit-keyframes slideshow {
    0%, 30%, 100% {
      opacity: 0;
    }
    5%, 25% {
      opacity: 1;
    }
  }
  
  @keyframes slideshow {
    0%, 30%, 100% {
      opacity: 0;
    }
    5%, 25% {
      opacity: 1;
    }
  }

 

/*weterslider */

  #cc-slider {
    text-align: center;
    margin: 0 auto;
    max-width: 1200px;
    position:relative;
  }
  
  #cc-slider input {
    display: none;
  }
  
  #cc-slider label, a {
    color: #ef023f;
    cursor: pointer;
    text-decoration: none;
  }
  #cc-slider label:hover {
    color: #ff0042 !important;
  }
  
  #slide1:checked ~ #cc-slides .inner { margin-left:0; }
  #slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
  #slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
  #slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
  #slide5:checked ~ #cc-slides .inner { margin-left:-400%; }

  
  #overflow {
    width: 100%;
    overflow: hidden;

  }
  
  #cc-slides article img {
    width: 100%;
 
   
  }
  
  #cc-slides .inner {
    width: 500%;
    line-height: 0;
  }
  
  #cc-slides article {
    width: 20%;
    float: left;
  }
  
  #controls {
    margin: -8% 0 0 84%;
    width: 15%;
    height: 50px;
  }
  
  #controls label { 
    display: none;
    width: 50px;
    height: 50px;
    
  }
  
  #active {
    margin: 23% 0 0;
    text-align: center;
  }
  
  #active label {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #f89e67;
  }
  
  #active label:hover {
    background: #ccc;
    border-color: #777 !important;
  }
  
  #controls label:hover {
    opacity: 0.7;
  }
  
  #slide1:checked ~ #controls label:nth-child(2), 
  #slide2:checked ~ #controls label:nth-child(3), 
  #slide3:checked ~ #controls label:nth-child(4), 
  #slide4:checked ~ #controls label:nth-child(1)
  {
    background: url('../img/next.png') no-repeat;
    float: right;
    margin: 0 10px 0 0;
    display: block;
    background-color:#ef023f;
  }
  
  
  #slide1:checked ~ #controls label:nth-child(4),
  #slide2:checked ~ #controls label:nth-child(1),
  #slide3:checked ~ #controls label:nth-child(2),
  #slide4:checked ~ #controls label:nth-child(3) 
   {
    background: url('../img/prev.png') no-repeat;
    float: left;
    margin: 0 0 0 17px;
    display: block;
    background-color:#ef023f;
  }
  
  
  
  /* cctooltip Box */
  
  .cctooltip {
    
      color: #FFFFFF;
      font-style: italic;
      line-height: 20px;
      margin-top: 250px;
      opacity: 0;
      position: absolute;
      text-align: left;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  
  /* cc-slider Styling */
  
  #cc-slides {
    margin: 0;
    
    
    padding: 1%;
    
    background: #fff;
    
  }
  
  /* Animation */
  
  #cc-slides .inner {
 
    -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
      -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
       -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
          transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
      -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
       -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
          transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  }
  
  #cc-slider {

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  }
  
  #controls label{

    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
  }
  
  #slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
  #slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
  #slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
  #slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip
   {
    opacity: 1;
    -webkit-transition: all 1s ease-out 0.6s;
    -moz-transition: all 1s ease-out 0.6s;
    -o-transition: all 1s ease-out 0.6s;
    transition: all 1s ease-out 0.6s;
  }
  
  .carousel__caption {
    width: 340px;
    max-width: 80%;
    margin: 24px auto 0;
  }
  .carousel__caption p {
    font: 400 9px "Roboto", sans-serif !important;
    color: #c1c1c1 !important;
    text-align: left;
  }
  .carousel__caption a {
    text-decoration: underline;
    color: #fff;
  }
  .carousel {
    position: relative;
    width: 100%;
    height: 504px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transform: translateZ(0px); /* stops flickering */
  }
  .carousel__buffer {
    display: none;
  }
  .carousel__buffer img {
    margin: 55px auto 18px;
    width: 553px;
    height: 347px;
  }
  .carousel__slide {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    background: no-repeat center top;
    background-size: cover;
    overflow: auto;
  }
  .carousel__slide img {
    display: block;
    position: relative;
    margin: 55px auto 50px;
    width: 800px;
    height: 400px;
    -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
  }
  
  .carousel__input:checked + .carousel__slide {
    position: static;
    opacity: 1;
  }
  .carousel__arrow {
    position: absolute;
    display: none;
    cursor: pointer;
    background: #191919;
    top: 210px;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 10;
  }
  .carousel__arrow:before {
    position: absolute;
    content: "";
    padding: 8px; /* Arrow size */
    box-shadow: 1px -1px 0 1px #0072bc inset;
    -webkit-box-shadow: 2px -2px #0072bc inset;
    -moz-box-shadow: 2px -2px #0072bc inset;
    border: solid transparent;
    border-width: 0 0 2rem 2rem;
  }
  .carousel__arrow--prev {
    margin-left: -343px;
  }
  .carousel__arrow--prev:before {
    transform: rotate(45deg);
    margin: -4px 0 0 -24px;
  }
  .carousel__arrow--next {
    margin-left: 303px;
  }
  .carousel__arrow--next:before {
    transform: rotate(225deg);
    margin: -4px 0 0 15px;
  }
  
  #carousel__slide--1:checked ~ .carousel__arrow--1,
  #carousel__slide--2:checked ~ .carousel__arrow--2,
  #carousel__slide--3:checked ~ .carousel__arrow--3,
  #carousel__slide--4:checked ~ .carousel__arrow--4,
  #carousel__slide--5:checked ~ .carousel__arrow--5 {
    display: block;
  }
  
  .carousel__bullets {
    list-style: none;
    margin: 12px auto -6px;
    padding: 0;
    position: absolute;
    top: 408px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
  }
  .carousel__bullets li {
    display: inline-block;
  }
  .carousel__bullets--bullet {
    cursor: pointer;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    border: 1px solid #6e7c7f;
  }
  
  #carousel__slide--1:checked ~ .carousel__arrow--1 ~ .carousel__bullets li:nth-child(1) .carousel__bullets--bullet,
  #carousel__slide--2:checked ~ .carousel__arrow--2 ~ .carousel__bullets li:nth-child(2) .carousel__bullets--bullet,
  #carousel__slide--3:checked ~ .carousel__arrow--3 ~ .carousel__bullets li:nth-child(3) .carousel__bullets--bullet,
  #carousel__slide--4:checked ~ .carousel__arrow--4 ~ .carousel__bullets li:nth-child(4) .carousel__bullets--bullet,
  #carousel__slide--5:checked ~ .carousel__arrow--5 ~ .carousel__bullets li:nth-child(5) .carousel__bullets--bullet {
    background: #0072bc;
    box-shadow: inset 0 0 0 2px #12171b; /* Separates blue dot from border */
  }
  
  @media screen and (max-width: 690px) {
    .carousel__buffer {
      width: 100%;
      position: relative;
      display: inline-block;
      visibility: hidden;
      z-index: -1;
      padding-bottom: 120px;
    }
    .carousel__buffer img {
      width: 100%;
      height: auto;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      margin-top: 0;
    }
    .carousel {
      height: auto;
      overflow: visible;
    }
    .carousel__slide {
      -webkit-transition: opacity 0s;
      -moz-transition: opacity 0s;
      -o-transition: opacity 0s;
      transition: opacity 0s;
      position: absolute;
      top:0;
      height: auto;
      background: transparent none !important;
    }
    .carousel__slide img {
      width: 100%;
      height: auto;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      margin-top: 0;
    }
    .carousel__arrow {
      top: calc(50% - 70px);
    }
    .carousel__arrow--prev {
      margin-left: -48%;
    }
    .carousel__arrow--next {
      margin-left: calc(48% - 40px);
    }
    .carousel__bullets {
      top: auto;
      bottom: 40px;
    }
  }