/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

*,
:after,
:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    font-size: 14px;
    line-height: 17px;
    color: #2B2D2D;
    word-wrap: break-word
}

img{max-width: 100%;}
video{max-width: 100%;}

.left{float: left;}
.right{float: right;}
.clear{clear: both;}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.no-display{display: none;}
.m-auto{margin:auto;}
.white{color: white;}

/*h's*/
h1{font-size: 360%; font-weight: bold; text-align: center; margin: auto; padding-bottom: 5%; line-height: 1;}
h2{font-size: 300%; font-weight: bold; padding-bottom: 5%;}
h3{font-size: 280%; font-weight: bold; padding-bottom: 20%; color: white;}
/*thing itself*/

/*widths positions */
.w100{width:100%;}
section {margin-top: 3%;}
.big-tangle {width:57%; 
padding:15% 5% 0 5%;
}

.square {width:49%; }
.left-square{padding: 10% 7% 7% 7%}
.right-square{padding: 4% 5% 7% 7%}
.square p {font-size: 220%; line-height: 1.3; width:90%;}
.padding-p{padding-top: 7%;}

.block-is-img{margin-bottom: 24%;}
.ut-img{display:block; margin: -20% 0 4% 0;}
.un-img{width:75%; display: block; margin:0 0 10% 5%}

.pl-5{padding-left:5%; padding-top:3%;}

.logo{width:100px;}
.small-tangle {width:40%; align-self: flex-start;}
.tiny-tangle {width:31%;}
.position-relative {position: relative;}
.flex{display: flex;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.mr{ margin-right: 2%;}
.top-p{font-size: 220%; line-height: 1.3;}
.big-tangle p {font-size: 220%; color:white; line-height: 1.3; width:90%;}
.third p {font-size: 220%; color:white; line-height: 1.3; width:90%;}
 .r3-p {font-size: 220%; line-height: 1.3; width:80%;}
.big-p{font-size: 300% !important;padding:2% 0 6% 0; margin-left:-1%;}
.hero-p{font-size: 230%; line-height: 1.2;}
.wrap{width:100%; max-width: 1280px; min-height: 800px; margin:auto;}
.top-bar{width:100%; height:60px; padding-top:3px;}


.hero-words{width:80%; height:auto; margin: auto; padding-top:5%; }
.hero-words p{width:75%;}
.weare{width:65%; height:auto; padding-top:5%; padding-left: 0%;}

.infograph{
  padding: 5% 10% 5% 8%;
  

}

.flex-grid-thirds, .flex-grid-half {
  display: flex;
  justify-content: space-between;
}
.third {
  width: 32%;
  padding:15% 5% 13% 7%;;
  
}
.third h3{padding-top:4%;}

.half {width:49%; position: relative;}
.abst-div{width:100%; height: 98%; position:absolute; top: 0; left: 0; padding:18% 12% 0 12%;  background-color: rgb(0, 0, 0, 0.3); display: block;}
.abst-corda{width:100%; height: 100%; position:absolute; top: 0; left: 0; padding:14% 12% 0 18%;  background-color: #EFEFEF; display: block;}

.r3{width:25%; margin-bottom: 15%;}
.corda{width:75%; margin-bottom: 21%;-webkit-transform: translate3d(0,0,0)}

.mpty{line-height: 0;}
.graphy{
  background-image: linear-gradient(30deg,#019a83 14%, #276595 60%);
}
.isgreen{
  background-image: linear-gradient(153deg,#019a83 14%, #78b147 35%);
}
.isfair{
  background-image: linear-gradient(153deg,#276595 100%, #78b147 35%);
}
.trust{
  background-image: linear-gradient(153deg,#276595 100%, #78b147 35%);
}
.return{
  background-image: linear-gradient(160deg,#276595 11%, #d8166d 90%);
}
.isfun{
  background-image: linear-gradient(28deg,#fc452d 36%, #d8166d 87%);
}
.blue {
  background-color: #4469F2;
}
.orange {
  background-color: #FC6B08;
}

.yellow {
  background-color: #F9E20D;
}
@media screen and (max-width: 1280px) {



.third {
  width: 32%;
  padding:12% 3% 9% 5%;;
  
}
.abst-div{ padding:15% 12% 0 12%; }
.r3{width:20%; margin-bottom: 10%;}
.corda{width:68%; margin-bottom: 15%;}
.r3-p{width: 90%;}
.abst-corda{ padding:10% 12% 0 22%; }


}
@media screen and (max-width: 992px) {
  h1{font-size: 320%; font-weight: bold; text-align: center; margin: auto; padding-bottom: 5%; line-height: 1;}
  h2{font-size: 280%; font-weight: bold; padding-bottom: 5%;}
  h3{font-size: 240%; font-weight: bold; padding-bottom: 20%; color: white;}
  .top-p{font-size: 180%; line-height: 1.3;}
  .hero-p{font-size: 200%;}
.big-tangle p {font-size: 160%; color:white; line-height: 1.3; width:90%;}



.square p {font-size: 160%; line-height: 1.3; width:90%;}
.third p {font-size: 160%; color:white; line-height: 1.3; width:90%;}
.r3-p {font-size: 160%;  width:100%;}
.big-p{font-size: 200% !important;padding:2% 0 6% 0; margin-left:-1%;}
.logo{width:80px;}

.hero-words{width:90%; height:auto; margin: auto; padding-top:5%; }
.hero-words p{width:85%;}
.weare{width:80%; height:auto; padding-top:5%; padding-left: 11%;}

.third {
  padding:12% 3% 9% 5%;;
  
}

}

@media screen and (max-width: 600px) {
  h1{font-size: 260%; font-weight: bold; text-align: center; margin: auto; padding-bottom: 5%; line-height: 1;}
  h2{font-size: 220%; font-weight: bold; padding-bottom: 5%;}
  h3{font-size: 180%; font-weight: bold; padding-bottom: 20%; color: white;}
  .top-p{font-size: 150%; line-height: 1.3;}
.big-tangle p {font-size: 120%; color:white; line-height: 1.3; width:100%;}
.square p {font-size: 120%; line-height: 1.3; width:100%;}

.third p {font-size: 120%; color:white; line-height: 1.3; width:90%;}
.r3-p {font-size: 120%; }
.big-p{font-size: 160% !important;padding:2% 0 6% 0; margin-left:-1%;}




}

@media screen and (max-width: 420px) {

  h1{font-size: 180%; font-weight: bold; text-align: center; margin: auto; padding-bottom: 5%; line-height: 1;}
  h2{font-size: 160%; font-weight: bold; padding-bottom: 5%;}
  h3{font-size: 140%; font-weight: bold; padding-bottom: 20%; color: white;}
  .top-p, .hero-p{font-size: 120%; line-height: 1.3;}
.big-tangle p {font-size: 90%; color:white; line-height: 1.3; width:100%;}
.square p {font-size: 90%; line-height: 1.3; width:100%;}
.third p {font-size: 90%; color:white; line-height: 1.3; width:90%;}
.r3-p {font-size: 90%; line-height: 1.3; }
.big-p{font-size: 110% !important;padding:2% 0 6% 0; margin-left:-1%;}
.hero-words{width:90%; height:auto; margin: auto; padding-top:5%; }
.logo{width:60px;}
.big-tangle {width:57%; 
  padding:8% 5% 0 5%;
  }
  .third {
    padding:10% 3% 7% 5%;;
    
  }
  .abst-div{ padding:12% 10% 0 10%; }
  .r3 {margin-bottom: 7%;}
  .abst-corda{ padding:8% 12% 0 16%; }
}
@media screen and (max-width: 370px) {
  .abst-div{ padding:8% 8% 0 8%; }
  .r3 {margin-bottom: 4%;}
  .abst-corda{ padding:6% 12% 0 16%; }
}