@import url(/css/common.css);

nav ul > li:nth-child(3) a {text-decoration: underline;}
@media only screen and (min-width: 760px) {
	nav ul > li:nth-child(3) a {font-weight: bold;color:#000;text-decoration:none;}
}

.keyvisual{
	background: url(/img/partners/keyvisual-mobile.jpg) center center no-repeat;background-size: cover;
	align-items: flex-start;
	padding-top: 100px
}
.button.yellow.arrow{position: fixed; bottom: 70px; left: 20px;}
@media only screen and (min-width: 760px) {	
	.button.yellow.arrow{position: relative;margin-bottom: 60px;width:240px;bottom:auto;left:auto}
	.keyvisual{text-align:left;background: url(/img/partners/keyvisual.jpg) center center no-repeat;background-size: cover;align-items: center;padding:0;}
	.keyvisual .title {text-align: left}
	.keyvisual .title .sub-title{font-size: 20px;margin-bottom: 10px;}
	.keyvisual-wrap {max-width: 1140px;margin:0 auto;flex: 1;padding:0 20px;}
}


.content section.how-it-works {padding-bottom: 80px; }
.how-it-works .carousel-cell img{margin:10px 0 20px;max-width: 300px}
.how-it-works .carousel-cell .text h2{display: inline-block;}
@media only screen and (max-width: 360px) {
	.how-it-works .carousel-cell img {width:auto;}
}
@media only screen and (min-width: 760px) {
	.icon-safe,
	.icon-smart,
	.icon-specialized {width: 248px; height: 248px; object-fit: contain; }
	.how-it-works .carousel-cell img{max-width: 30%}
	.how-it-works .carousel-cell .text {padding-left: 50px;display: inline-grid;flex-basis: auto}
	.how-it-works .br-tag{display: none}
	.how-it-works .carousel-cell {display: flex;flex-direction: row;justify-content: center;}
}


.content section.together{background-color: #f8f8f9;max-width:100%;}
.together .carousel-cell {width:100%;}
.together .flickity-page-dots .dot.is-selected{background-color:#ffd800;}
.together img{margin-bottom:20px;}
.together .date{margin:-5px auto 20px;color:#999;}
.together p{padding:0 30px;}
.together a{color:#ff7800;margin:0 auto 20px;display: inline-block;}
.together a:hover{text-decoration: underline;}
@media only screen and (min-width: 760px) {	
	.together .carousel-cell {width:50%;}
}
@media only screen and (min-width: 1024px) {
	.together{max-width:1140px;margin:0 auto;}
	.together .carousel{display: flex;flex-direction: row;justify-content: space-between;}
	.together p{padding:0;margin-bottom: 40px;}
	.together .carousel-cell{width:33%;display:inline-block;padding:0 20px;text-align: left}
	.together .carousel-cell img{width:100%;}
}


.content section.video{background-color: #ffd800;max-width:100%;}
.video ul.video-selector {border-bottom:1px solid rgba(0,0,0,0.2);}
.video ul.video-selector li.active {border-color: #000}

@media only screen and (min-width: 760px) {
	.video-wrap{max-width: 1100px;margin:0 auto;}
	.video ul.video-selector {border-bottom:0}
}


.content section.carezone{background-color: #f8f8f9;max-width: 100%}
.carezone h1 {margin-bottom: 10px;}
.carezone img{margin-top: 40px;width:100%;padding:0 20px;max-width: 540px}
.carezone .web{display: none}
@media only screen and (min-width: 760px) {	
	/*.carezone-wrap {max-width: 1140px;margin:0 auto;}*/
	.carezone h1 {margin-bottom: 20px;}
	.carezone img {max-width:1100px;}
	.carezone .map-carezone {max-width: 540px}
	.carezone .bi-carezone {width:100%;}
	.carezone .web{display: inline-block;}
	.carezone .mobile{display: none;}
	.carezone .br-tag{display: none}
}

.services p{padding:0 20px;}
.services p.description{ margin-bottom: 0; }
.services p.description:first-of-type{ padding-top:60px; }
.services .carousel-cell{
	width:80%;
	border: 3px solid #ffd800;
	/*padding: 30px 0px 15px;*/
	margin:0 10px;
}
.services .title-wrap{
	background:#ffd800;
	padding:15px 10px 15px;
	margin-bottom: 30px
}
.services .title-wrap .sub-title{
	font-size:15px;
	letter-spacing:-0.5px;
}
.services .title {
	font-size:20px;
	letter-spacing: -0.5px;
	font-weight: bold
}
.services .content-wrap {
	display: flex;
flex-direction: column;
min-height: 325px;
justify-content: space-evenly;
align-items: center
}
.services .content-wrap h2{font-size: 20px}
.services .content-wrap a{color:#000;}
.services .content-wrap a:hover{text-decoration:none;}
.services .big-button{width:calc(100% - 40px)}
.services .flickity-page-dots{bottom:-40px}

@media only screen and (min-width: 760px) {	
	.services .carousel-cell {width:50%;margin:0 20px;}
	.services .carousel-cell:hover {box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);}
}
@media only screen and (min-width: 1024px) {
	.carousel.services {display: flex;flex-direction: row;justify-content: space-between;}
	.services .carousel-cell {width:33%;margin:0 20px;}
}