﻿@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-bold-webfont.eot");
  src: url("../fonts/opensans-bold-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-bold-webfont.woff2") format("woff2"), url("../fonts/opensans-bold-webfont.woff") format("woff"), url("../fonts/opensans-bold-webfont.ttf") format("truetype"), url("../fonts/opensans-bold-webfont.svg") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-bolditalic-webfont.eot");
  src: url("../fonts/opensans-bolditalic-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-bolditalic-webfont.woff2") format("woff2"), url("../fonts/opensans-bolditalic-webfont.woff") format("woff"), url("../fonts/opensans-bolditalic-webfont.ttf") format("truetype"), url("../fonts/opensans-bolditalic-webfont.svg") format("svg");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-extrabold-webfont.eot");
  src: url("../fonts/opensans-extrabold-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-extrabold-webfont.woff2") format("woff2"), url("../fonts/opensans-extrabold-webfont.woff") format("woff"), url("../fonts/opensans-extrabold-webfont.ttf") format("truetype"), url("../fonts/opensans-extrabold-webfont.svg") format("svg");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-extrabolditalic-webfont.eot");
  src: url("../fonts/opensans-extrabolditalic-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-extrabolditalic-webfont.woff2") format("woff2"), url("../fonts/opensans-extrabolditalic-webfont.woff") format("woff"), url("../fonts/opensans-extrabolditalic-webfont.ttf") format("truetype"), url("../fonts/opensans-extrabolditalic-webfont.svg") format("svg");
  font-weight: 800;
  font-style: italic; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-italic-webfont.eot");
  src: url("../fonts/opensans-italic-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-italic-webfont.woff2") format("woff2"), url("../fonts/opensans-italic-webfont.woff") format("woff"), url("../fonts/opensans-italic-webfont.ttf") format("truetype"), url("../fonts/opensans-italic-webfont.svg") format("svg");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-light-webfont.eot");
  src: url("../fonts/opensans-light-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-light-webfont.woff2") format("woff2"), url("../fonts/opensans-light-webfont.woff") format("woff"), url("../fonts/opensans-light-webfont.ttf") format("truetype"), url("../fonts/opensans-light-webfont.svg") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-lightitalic-webfont.eot");
  src: url("../fonts/opensans-lightitalic-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-lightitalic-webfont.woff2") format("woff2"), url("../fonts/opensans-lightitalic-webfont.woff") format("woff"), url("../fonts/opensans-lightitalic-webfont.ttf") format("truetype"), url("../fonts/opensans-lightitalic-webfont.svg") format("svg");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-regular-webfont.eot");
  src: url("../fonts/opensans-regular-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-regular-webfont.woff2") format("woff2"), url("../fonts/opensans-regular-webfont.woff") format("woff"), url("../fonts/opensans-regular-webfont.ttf") format("truetype"), url("../fonts/opensans-regular-webfont.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-semibold-webfont.eot");
  src: url("../fonts/opensans-semibold-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-semibold-webfont.woff2") format("woff2"), url("../fonts/opensans-semibold-webfont.woff") format("woff"), url("../fonts/opensans-semibold-webfont.ttf") format("truetype"), url("../fonts/opensans-semibold-webfont.svg") format("svg");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'open_sans';
  src: url("../fonts/opensans-semibolditalic-webfont.eot");
  src: url("../fonts/opensans-semibolditalic-webfont.eot") format("embedded-opentype"), url("http://www.comying.com/static/css/fonts/opensans-semibolditalic-webfont.woff2") format("woff2"), url("../fonts/opensans-semibolditalic-webfont.woff") format("woff"), url("../fonts/opensans-semibolditalic-webfont.ttf") format("truetype"), url("../fonts/opensans-semibolditalic-webfont.svg") format("svg");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot");
  src: url("../fonts/icomoon.eot") format("embedded-opentype"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-wechat:before {
  content: "\e905"; }

.icon-download:before {
  content: "\e903"; }

.icon-chevron-left:before {
  content: "\e900"; }

.icon-chevron-right:before {
  content: "\e902"; }

.icon-globe:before {
  content: "\e904"; }

.icon-play:before {
  content: "\e052"; }

.icon-favorite:before {
  content: "\e87d"; }

.icon-reply:before {
  content: "\e15e"; }

.icon-facebook:before {
  content: "\ea90"; }

.icon-twitter:before {
  content: "\ea96"; }

.icon-youtube:before {
  content: "\ea9d"; }

.icon-linkedin:before {
  content: "\eaca"; }

.icon-notification:before {
  content: "\ea08"; }

.icon-rss:before {
  content: "\ea9b"; }

.icon-google:before {
  content: "\ea8b"; }

.icon-search:before {
  content: "\f002"; }

.icon-weibo:before {
  content: "\f18a"; }

.icon-slideshare:before {
  content: "\f1e7"; }

.icon-film:before {
  content: "\f008"; }

.icon-image:before {
  content: "\f03e"; }

.icon-photo:before {
  content: "\f03e"; }

.icon-picture-o:before {
  content: "\f03e"; }

.icon-retweet:before {
  content: "\f079"; }

.icon-twitter-square:before {
  content: "\f081"; }

.icon-globe2:before {
  content: "\f0ac"; }

.icon-youtube2:before {
  content: "\f167"; }

.icon-newspaper-o:before {
  content: "\f1ea"; }

.icon-drivers-license-o:before {
  content: "\f2c3"; }

.icon-id-card-o:before {
  content: "\f2c3"; }

*::before, *::after {
    box-sizing: border-box;
}

/* styles to overwrite screen_layout_large.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%; }
  
body {
  font-family: "open_sans", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.428571429 !important;
  color: #53565a !important;
  margin: 0 !important;
  background-color: #fff;
  -ms-overflow-style: scrollbar;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

footer,
header {
  display: block; }
a {
    color: #c01818;
    text-decoration: none;
}
.fluid-wrap {
	max-width: 100%;
	width: 100%;
	clear: both;
}
.fluid-content {
	max-width: 1010px;
	margin: 0 auto;
	padding: 0 30px;
}
#header .logo a {
	display: block;
	padding: 14px 0 8px;
}
#header .logo img {
	width: 140px;
    height: auto;
}
.top-banner {
	background: #000 url('http://www.comying.com/solutions/lp/img/beyond-gdpr-short-banner.jpg') center top no-repeat;
	height: 365px;
	color: #fff;
}
.top-banner h2 {
	font-size: 40px;
	font-weight: 300;
    margin: 0px 0px 25px;
}
.top-banner p {
	font-size: 20px;
}
.small-container {
	width: 450px;
	padding: 50px 0;
}
.small-container h4 {
	font-size: 14px;
}
#main .small-container {
	position: relative;
}
#float-wrap {
	background: #e6e7e8;
	color: #53565a;
	position: fixed;
	width: 490px;
	margin-left: 540px;
	top: 0;
	-webkit-transition: all linear .3s;
            transition: all linear .3s;
}
.form-content {
	padding: 0 40px 40px;
}
.form-content h3 {
	font-size: 23px;
    font-weight: normal;

}
.border-line {
  display: block;
  height: 5px;
  background: #53565a;
  margin: 0 0 15px;
  position: relative;
  max-width: 300px; }
  .border-line:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    background: rgba(0, 0, 0, 0.3); }
  .border-line img {
    position: absolute;
    right: 20px;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: auto;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
.form-content input, 
.form-content select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}	
	
.form-content input[type="text"],
.form-content select {
	border: 0 none;
    height: 44px;
    padding-left: 10px;
    width: 193px;
	margin-right: 12px;
	margin-bottom: 12px;
	float: left;
	font-size: 12px;
}
.form-content .terms {
	overflow: hidden;
	clear: both;
	font-size: 12px;
	padding: 15px 0 30px;
}
.form-content input[type="checkbox"] {
	float: left;
	text-align: left;
}
.form-content .terms span {
	float: right;
	text-align: left;
	width: 95%;
}
.form-content a.cta,
.form-content button.cta {
    background: #0071C5;
    color: #fff;
    display: block;
	font-weight: bold;
	font-size: 16px;
    padding: 15px;
	text-align: center;
	width: 100%;
	border: 0;
 	box-shadow: none;
	cursor:pointer;
}
#footer {
	background: #53565a;
	color: #fff;
	font-size: 12px;
	padding: 30px 0 20px;
}
#footer a {
    color: #fff;
	text-transform: uppercase;
	
}
.circle-icon-hover {
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  height: 100%;
  width: 100%;
  position: relative;
  text-align: center;
  z-index: 1;
  box-shadow: 0 0 0 1px #fff;
  -webkit-transition: color 0.3s ease 0s;
          transition: color 0.3s ease 0s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  outline: none;
  text-decoration: none !important; }
  .circle-icon-hover:before {
    font-size: 16px;
    width: 100%;
    vertical-align: middle;
    display: inline-block; }
  .circle-icon-hover:after {
    border-radius: 50%;
    box-sizing: content-box;
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
    opacity: 0;
    -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
            transform: scale(1.3);
    background: #fff none repeat scroll 0 0;
    left: -2px;
    padding: 2px;
    top: -2px;
    -webkit-transition: -webkit-transform 0.2s ease 0s, opacity 0.3s ease 0s;
            transition: transform 0.2s ease 0s, opacity 0.3s ease 0s;
    z-index: -1; }
  .circle-icon-hover:hover {
    color: #fff;
    text-decoration: none; }
    .circle-icon-hover:hover:before {
      color: #53565a; }
    .circle-icon-hover:hover:after {
      opacity: 1;
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1); }
.footer-menu {
  margin: 0;
  padding: 0 0 23px;
  text-align: center;
  display: inline-block;
  vertical-align: top; }
  .footer-menu:before, .footer-menu:after {
    content: " ";
    display: table; }
  .footer-menu:after {
    clear: both; }
  .footer-menu li {
    list-style: none;
    float: left;
    padding: 0 6px;
    position: relative; }
    @media (min-width: 768px) {
      .footer-menu li {
        padding: 0 10px; } }
    @media (min-width: 1024px) {
      .footer-menu li {
        padding: 0 10px; } }
    .footer-menu li:before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #fff;
      width: 1px; }
    .footer-menu li:first-child {
      padding-left: 0; }
      .footer-menu li:first-child:before {
        display: none; }
.social-networks {
  margin: 0 0 15px;
  padding: 0; }
  .social-networks:before, .social-networks:after {
    content: " ";
    display: table; }
  .social-networks:after {
    clear: both; }
  .social-networks li {
    float: left;
    width: 28px;
    height: 28px;
    list-style: none;
    margin: 0 8px 8px 0; }
    .social-networks li:last-child {
      margin-right: 0; }
    .social-networks li:first-child {
      margin-left: 0; }
  .social-networks a {
    text-decoration: none; }
  @media screen and (max-width: 1023px) {
    .social-networks {
      margin: 0 0 20px; } }
#footer.small-footer .footer-menu-wrap {
    padding: 10px 110px 0px 0px; }
@media (max-width: 1090px) {
	#float-wrap {
		margin-left: 470px; } }
@media (max-width: 1024px) {
	#float-wrap {
		margin-left: 360px; } 
	.small-container {
		width: 350px; }
	.top-banner h2 {
		font-size: 34px; } }
@media (max-width: 900px) {
	#float-wrap {
		position: relative;
		margin: 0 auto 50px; } 
	.small-container {
		width: 90%; } }
@media (max-width: 550px) {
	#float-wrap {
		width: 100%; } 
	.form-content {
		padding: 0 20px 40px; }
	.form-content .terms span {
		width: 90%; }
	.form-content input[type="text"] {
      	width: 98%; }
	.form-content a.cta {
		width: 90%; } }