/* Feature */
#feature-wrapper.fh2 {background-color:#fff;overflow: hidden;position: relative;}
#feature-wrapper.fh2 svg.shape1 {fill:#34c759 ; position: absolute;bottom: 0px;left: 50%; margin-left: -1000px; width: 800px;
height: 400px; transform: scaleY(-1)}
#feature-wrapper.fh2 svg.shape2 {bottom: 70%;
position: absolute;
left:85%;
width: 200px;}
#feature-wrapper.fh2 svg.shape2 .g1{transform: translate(140px, 165px)} 
#feature-wrapper.fh2 svg.shape2 .semicircle{transform: rotate(235deg); fill: #f6ce51;} 
#feature-wrapper.fh2 .image {background-image: url(/why-claris/images/feature-graphic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; margin-left: -40px; height:500px; width: 100%;}
#feature-wrapper.fh2 .section {padding-top: 45px;}
#feature-wrapper.fh2 .accent-before:before {content: "";
background-size: 40px;
width: 40px;
height: 40px;
margin-bottom: 0px;}
#feature-wrapper.fh2 .d6.image-text .column-content.text-content {padding-bottom: 35px}
@media only screen and (max-width: 1068px) {
 #feature-wrapper.fh2 .image {margin-left: 0px;}
}


@media only screen and (max-width: 735px) {
  /*#feature-wrapper.fh2 .section {padding-top: 45px; padding-bottom: 0px}*/
  #feature-wrapper.fh2 .section-width {width:100%;}
  #feature-wrapper.fh2 .d6.image-text .text-col {width: calc(80% - 32px); margin-left: 32px;}
  #feature-wrapper.fh2 .image {background-size: cover; width: 80%;margin: 0 auto; height: 350px;}
  #feature-wrapper.fh2 .accent-before:before {left:-32px; margin-bottom:-6px; display: block;}
	#feature-wrapper.fh2 svg.shape1 {bottom: -60px; margin-left: -600px; transform: scale(-0.8);}
	#feature-wrapper.fh2 svg.shape2 {left:70%}
	

}
/* Code */
#code.d10.text-image .column-flex:last-child {background-image: url(/why-claris/images/image_code.jpg);background-size: cover;}
#code .row-flex .column-2 {width: 45%}
#code.d10.text-image .column-flex:first-child {flex-grow: 1;}
@media only screen and (max-width: 1068px) {
  #code.d10.text-image .column-flex:first-child {padding: 80px 0px}
  #code.d10.text-image .column-flex:first-child .column-content {max-width: 60%;}
  #code.d10.text-image .column-flex:last-child {min-height: 400px;}
  #code .row-flex .column-2 {width: 100%}
}
@media only screen and (max-width: 735px) { 
	#code.d10.text-image .column-flex:first-child .column-content { max-width: 90%; }
}
@media only screen and (max-width: 440px) {
	#code .xs-display {display: block;}
}
/* Claris core */
#claris-core .section-width {width: 1200px;}
#claris-core .sh2 {margin-bottom:80px;}
#claris-core .d4-text {justify-content: flex-start;}
#claris-core .d4 .column-content {width: 100%;}
#claris-core .centered-icons {padding: 0px 16px;}
#claris-core a.p2 {font-size:21px;}
@media only screen and (max-width: 1200px) {
  #claris-core .section-width {width: 100%;}
}

@media only screen and (max-width: 1068px) {
  #claris-core .section-width {width: 90%;}
	#claris-core .d4-text {margin-bottom: 16px;}
}

@media only screen and (max-width: 735px) and (min-width: 440px) {
	#claris-core .nested .column {width: 80%; margin: 0 auto;}
}



/* Ecosystem */
#ecosystem-figure {width: 543px; height: 500px; margin: 0 auto; background-image: url(/why-claris/images/ecosystem/line.svg); background-repeat: no-repeat; background-size: 543px 344px; background-position: center; position: relative;}
#ecosystem-figure .ecosystem-item {position: absolute;left:50%;top:50%;transform: scale(1.5);}
#ecosystem-figure .text-container {position: absolute; font-size: 18px; font-weight: 500; transform: scale(0.6666); width:200px;}
#ecosystem-figure #powerful-tools {left: 130px; top: calc(50% - 23%);}
#ecosystem-figure #powerful-tools svg {height: 88px; width: 123px;}
#ecosystem-figure #powerful-tools .text-container {left: -90px;top: 10px;}
#ecosystem-figure #community {left: 380px; top: calc(50% - 26%);}
#ecosystem-figure #community svg {height: 68px; width: 122px;}
#ecosystem-figure #community .text-container {top: -10px;left: 40px;}
#ecosystem-figure #professional-partners {left: 470px; top: calc(50% + 10%)}
#ecosystem-figure #professional-partners svg {height: 45px; width: 76px;}
#ecosystem-figure #professional-partners .text-container {top: 48px; left: -25px;}
#ecosystem-figure #marketplace {left: 50%; top: calc(50% + 24%);}
#ecosystem-figure #marketplace svg {height: 72px; width: 63px;}
#ecosystem-figure #marketplace .text-container {left: 50%;margin-left: -100px;text-align: center;bottom: -20px;}
#ecosystem-figure #support {left: -16px; top: calc(50% + 11%);}
#ecosystem-figure #support svg {height: 86px; width: 103px;}
#ecosystem-figure #support .text-container {left: 50%;margin-left: -100px;text-align: center;bottom: -20px;}

@media only screen and (max-width: 735px) {
	#ecosystem .sh2 {margin-bottom: 32px;}
	#ecosystem-figure {width: 100%; height: auto; background-image: none;}
	#ecosystem-figure .ecosystem-row {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;padding: 32px 0px;}
	#ecosystem-figure .ecosystem-item {position: relative; transform: scale(1);width: 100%;float: left;margin: 0;padding: 0;}
	#ecosystem-figure .ecosystem-item-content {width: 100%;height: 100%;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column; text-align: center;}
	#ecosystem-figure .ecosystem-item svg {margin: 0 auto; margin-bottom: 16px;}
	#ecosystem-figure .text-container {position: relative; width: auto; transform: scale(1);margin-bottom: 0px;margin-top: auto;}
	#ecosystem-figure #powerful-tools {left: auto; top: auto;}
	#ecosystem-figure #powerful-tools .text-container {left: auto; top: auto;}
	#ecosystem-figure #community {left: auto; top: auto;}
	#ecosystem-figure #community .text-container {left: auto; top: auto;}
	#ecosystem-figure #professional-partners {left: auto; top: auto;}
	#ecosystem-figure #professional-partners .text-container {left: auto; top: auto;}
	#ecosystem-figure #marketplace {left: auto; top: auto;}
	#ecosystem-figure #marketplace .text-container {left: auto;margin-left: auto;margin-right:auto;bottom: auto;}
	#ecosystem-figure #support {left: auto; top: auto;}
	#ecosystem-figure #support .text-container {left: auto;margin-left: auto;margin-right:auto;bottom: auto;}
	#ecosystem-figure #powerful-tools svg {height: 132px; width: 185px;}
	#ecosystem-figure #community svg {height: 102px; width: 183px;}
	#ecosystem-figure #professional-partners svg {height: 75px; width: 128px;}
	#ecosystem-figure #marketplace svg {height: 108px; width: 95px;}
	#ecosystem-figure #support svg {height: 129px; width: 155px;}
}
@media only screen and (max-width: 480px) {
	#ecosystem .sh2 {margin-bottom: 48px;}
	#ecosystem-figure .ecosystem-row {
	-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
		padding: 0 0;
	}
	#ecosystem-figure .ecosystem-item {margin-bottom: 48px;}
	#ecosystem-figure .ecosystem-item svg {margin-bottom: 24px;}
}
/* Developers */
#developers .d8 .image {background-image:url(/why-claris/images/image_developers.jpg); }
#developers .dark .h3 a {color: #4fe669;}
#developers .dark .h3 a:hover {color: #34c759;}
/* Digital Transformation */
#digital-transformation .section {padding-bottom: 120px;}
#digital-transformation .sh2 p {margin-bottom: 40px;}
#digital-transformation .row-flex {max-width: 90%; margin: 0 auto; margin-bottom: 40px;}

.d9 p:first-child { margin-bottom: 8px; }

@media only screen and (max-width: 735px) {
	#digital-transformation .d4 .icon-set {margin: 0 auto;}
	#digital-transformation .row-flex {margin-bottom: 0px;}
}

@media only screen and (max-width: 735px) and (min-width: 440px) {
	#digital-transformation .row-flex .column {width: 80%; margin: 0 auto;}
}

/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) {
	#feature-wrapper.fh2 .image {background-image: url(/why-claris/images/feature-graphic_2x.jpg); }
	
	/* Code */
	#code.d10.text-image .column-flex:last-child {background-image: url(/why-claris/images/image_code_2x.jpg);}
	
	/* Developers */
	#developers .d8 .image {background-image:url(/why-claris/images/image_developers_2x.jpg); }
}