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{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}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}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

body {
font-family: 'Soleil', Helvetica, sans-serif;
font-weight: 400;
font-style: normal;
  position: relative;
  padding: 0px 0px;
  background: #ffffff;
  color: #7A7F92;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-transition: all .32s ease;
  -moz-transition: all .32s ease;
  -o-transition: all .32s ease;
  transition: all .32s ease;
}


.wrap {
	display: table;
	width: 1280px;
	margin: 0 auto;
	padding: 0px;
  padding-bottom: 200px;
}


.graylink a, .graylink a.link, .graylink a.link:visited {
  color:#7A7F92 !important;
  margin-left: 32px;

}

.graylink a.link:hover, .graylink a:hover, .graylink a.visited:hover {
  color:#0060FF !important;
}



a, a:link, a:visited {
	color: #0060FF;
	text-decoration: none;
}

a:hover {
	color:#0060FF;
}


img {
	max-width: 100%;
}


.copyright {
  margin-top: 100px;
  font-size: 12px;
  color: #D5D6DC;
}


.blue {
  color:#0060FF;
}
.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}


.white {
  color: #ffffff;
}



.header-symbol {
  flex-grow: 0;
  width:92px;
  height:78px;
  border:  0px;
  height: 80px;
  background-image: url('img/mindbeat-symbol.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.header-logo {
  flex-grow: 1;
  border: 0px solid;
  margin-left: 20px;
  margin-top: 8px;

}

.header-links {
  flex-grow:1;
  border: 0px;
  margin-top: 8px;
}



.bubbles {
  width: 151px;
  height: 151px;
  border:  0px;
  background-image: url('img/mindbeat-bubbles.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
}









@media screen and (min-width: 320px) {

  .wrap {
  	width: 320px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 100px;

  }

  .header {
  display: flex; /* or inline-flex */
  flex-direction: row;
  margin-bottom: 15px;
  }

  .header {
    margin-left:20px;
    margin-right:20px;
  }

.header-symbol {
display: none;
}

.header-logo {
  margin-left: 0px;
}

  .title {
    font-size: 16px;
    line-height: 21px;
  }

  .boxtext {
    margin: auto; /* Important */
    font-size: 16px;
    line-height: 21px;
  }

  p {
    font-size: 14px;
    line-height: 18px;
  }

  .space16 {
    height: 8px;
  }

  .space40 {
    height: 16px;
  }

  .space48 {
    height: 24px;
  }


  .space72 {
    height: 32px;
  }

  .bluebox {
    display: flex;
    width: 100%;
    height: 180px;
    margin: auto;
    background-color: #0060FF;
  }

  .clients {
    width:100%;
    height:180px;
    border:  0px;
    background-image: url('img/mindbeat-clients1.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: black;
  }


  .bubbles {
    width: 100px;
    height: 100px;

  }



}


@media screen and (min-width: 375px) {

  .wrap {
  	width: 375px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .header-symbol {
  display: flex;

    width:50px;
    height:40px;

  }

  .header-logo {
    margin-left: 10px;
  }


}



@media screen and (min-width: 414px) {

  .wrap {
  	width: 414px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {

  .wrap {
  	width: 768px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .header-symbol {

      width:72px;
      height:61px;
  }



  .header {
    margin-left:40px;
    margin-right:40px;
  }

  .header {
  display: flex; /* or inline-flex */
  flex-direction: row;
  margin-bottom: 15px;
  }



  .title {
    font-size: 36px;
    line-height: 40px;
  }

  .boxtext {
    margin: auto; /* Important */
    font-size: 36px;
    line-height: 40px;
  }

  p {
    font-size: 18px;
    line-height: 24px;
  }

  .space16 {
    height: 8px;
  }

  .space40 {
    height: 24px;
  }

  .space48 {
    height: 32px;
  }


  .space72 {
    height: 64px;
  }

  .bluebox {
    display: flex;
    width: 100%;
    height: 480px;
    margin: auto;
    background-color: #0060FF;
  }

  .clients {
    width:100%;
    height:480px;

  }




}

@media screen and (min-width: 820px) {
  .header {
    margin-left:0px;
    margin-right:0px;
  }
}




@media screen and (min-width: 960px) {

  .wrap {
  	width: 960px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .header {
    margin-left:40px;
    margin-right:40px;
  }



  .header-logo {
    flex-grow: 1;
    border: 0px solid;
    margin-left: 20px;
    margin-top: 8px;

  }


}

@media screen and (min-width: 1000px) {
  .header {
    margin-left:0px;
    margin-right:0px;
  }
}



@media screen and (min-width: 1280px) {

  .wrap {
  	width: 1280px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .header {
    margin-left:40px;
    margin-right:40px;
  }
  .header {
  display: flex; /* or inline-flex */
  flex-direction: row;
  margin-bottom: 35px;
  }

  .header-symbol {

    width:92px;
    height:78px;

  }


  .title {
    font-size: 48px;
    line-height: 60px;
  }

  .boxtext {
    margin: auto; /* Important */
    font-size: 48px;
    line-height: 60px;
  }

  p {
    font-size: 24px;
    line-height: 31px;
  }

  .space16 {
    height: 16px;
  }

  .space40 {
    height: 40px;
  }

  .space48 {
    height: 48px;
  }


  .space72 {
    height: 72px;
  }



  .bluebox {
    display: flex;
    width: 100%;
    height: 680px;
    margin: auto;
    background-color: #0060FF;
  }

  .clients {
    width:100%;
    height:680px;

  }



}

@media screen and (min-width: 1360px) {
  .header {
    margin-left:0px;
    margin-right:0px;
  }
}