#stick{font-size:24px;;position:fixed;width:100%;background:rgba(149,148,146,1.00);color:#f1f1f1;text-align:center;display:flex;position:sticky;position:-webkit-sticky;top:0;padding:8px 0;z-index:901}
#stick .left{width:50%;display:inline-block;padding:0;border-right:2px double #fff}
#stick .right{width:50%;display:inline-block;padding:0}
#stick a{text-decoration:none;color:white}
#stick a:hover{text-decoration:none;color:#00bfff}

.burger-menu{background:rgba(0,193,255,1.00);border-radius:50%;box-shadow:0 8px 10px rgba(0,193,255,0.3);cursor:pointer;border:2px solid transparent;display:block;height:45px;width:45px;text-align:center;position:fixed;right:8%;bottom:4%;z-index:999;transition:.3s ease-in-out;-webkit-animation:email-an linear 1s infinite;animation:email-an linear 1s infinite}
.burger-menu:hover{background:rgba(255,9,22,1.00);border:2px solid rgba(0,193,255,1.00)}
.burger-menu .b-text{height:55px;width:55px;border-radius:50%;position:relative}
.burger-menu .b-text img{padding-top:8px;padding-right:12px}
@keyframes email-an{0%{box-shadow:0 8px 10px rgba(60,33,40,0.3),0 0 0 0 rgba(60,33,40,0.2),0 0 0 0 rgba(60,33,40,0.2)}40%{box-shadow:0 8px 10px rgba(60,33,40,0.3),0 0 0 15px rgba(60,33,40,0.2),0 0 0 0 rgba(60,33,40,0.2)}80%{box-shadow:0 8px 10px rgba(60,33,40,0.3),0 0 0 30px rgba(60,33,40,0),0 0 0 26.7px rgba(60,33,40,0.067)}100%{box-shadow:0 8px 10px rgba(60,33,40,0.3),0 0 0 30px rgba(60,33,40,0),0 0 0 40px rgba(60,33,40,0.0)}}
@keyframes opsimple{0%{opacity:0;transform:rotate(0deg)}40%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(360deg)}}

.modal{display:none;position:fixed;z-index:9999;padding-top:60px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.9)}
.modal-content{margin:auto;padding:10px;width:80%;text-align:center}
.close{color:white;float:right;font-size:80px;font-weight:bold;margin-top:-100px;transition:.5s ease-in-out}
.close:hover,.close:focus{color:red;text-decoration:none;cursor:pointer}
.modal-content a{color:rgba(0,193,255,1.00);text-decoration:none;transition:.5s ease-in-out}
.modal-content p{font-size:32px;line-height:40px}
.moz {-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:2px solid red;margin:14px auto;width:340px;padding:4px}

.round{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:2px solid red;width:calc(98% - 84px);max-width:1400px;margin:40px auto;color:black;padding:40px;text-align:center}
.bg-r{background:red;color:white;padding:8px}

.yellow {background: yellow}
.pd {margin: 18px 0 66px 0}
.pm {margin: 18px 7% 66px 7%}

.again {background:rgba(219,0,38,1.00); color: white; text-align: center; padding: 28px 6px; font-size: 26px}

#layer3 {
background: rgb(207,206,202);
background: -moz-radial-gradient(circle, rgba(207,206,202,1) 0%, rgba(170,166,163,1) 42%, rgba(240,237,232,1) 100%);
background: -webkit-radial-gradient(circle, rgba(207,206,202,1) 0%, rgba(170,166,163,1) 42%, rgba(240,237,232,1) 100%);
background: radial-gradient(circle, rgba(207,206,202,1) 0%, rgba(170,166,163,1) 42%, rgba(240,237,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfceca",endColorstr="#f0ede8",GradientType=1); 
}
#layer3 h2 {font-size: 26px; padding: 44px 0 22px 0}
.container {padding: 25px; width: 100%; max-width: 1000px; margin: 22px auto}
.bubble h3 {position: relative; font-size: 23px; line-height: 1.2; padding: 15px 15px; margin: 0; letter-spacing: 0.02em}
.bubble p {position: relative; font-size: 22px; line-height: 1.2; padding: 15px 15px; margin: 0; letter-spacing: 0.02em}
.bubble {-webkit-mask-image:radial-gradient(#fff 24.5px,#fff0 25px),radial-gradient(#fff 24.5px,#fff0 25px),radial-gradient(#fff 24.5px,#fff0 25px),radial-gradient(#fff 24.5px,#fff0 25px),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),url('data:image/svg+xml;utf8,<svg width="39" height="25" viewBox="0 0 39 25" xmlns="http://www.w3.org/2000/svg"><path d="M38.4998 24.5C27.6998 22.1 22.9998 7.5 21.9998 0.5C11.8331 1.83333 -6.30022 6.3 2.49978 13.5C13.4998 22.5 21.9998 24.5 38.4998 24.5Z" /></svg>');mask-image:radial-gradient(#fff 24.5px,#fff0 25px),radial-gradient(#fff 24.5px,#fff0 25px),radial-gradient(#fff 24.5px,#fff0 25px),radial-gradient(#fff 24.5px,#fff0 25px),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),url('data:image/svg+xml;utf8,<svg width="39" height="25" viewBox="0 0 39 25" xmlns="http://www.w3.org/2000/svg"><path d="M38.4998 24.5C27.6998 22.1 22.9998 7.5 21.9998 0.5C11.8331 1.83333 -6.30022 6.3 2.49978 13.5C13.4998 22.5 21.9998 24.5 38.4998 24.5Z" /></svg>');-webkit-mask-position:0 0,100% 0,0 100%,100% 100%,0 25px,25px 0,100% 100%;mask-position:0 0,100% 0,0 100%,100% 100%,0 25px,25px 0,100% 100%;-webkit-mask-size:50px 50px,50px 50px,50px 50px,50px 50px,100% calc(100% - 50px),calc(100% - 50px) 100%,19.5px 12.5px;mask-size:50px 50px,50px 50px,50px 50px,50px 50px,100% calc(100% - 50px),calc(100% - 50px) 100%,19.5px 12.5px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-bottom:15px;max-width:94%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:0;}
.bubble.right {margin-left: auto; background: #549ef5; color: white}
.bubble.left {background:#e9e9eb;-webkit-mask-image:radial-gradient(#fff,#fff 24.5px,transparent 25px),radial-gradient(#fff,#fff 24.5px,transparent 25px),radial-gradient(#fff,#fff 24.5px,transparent 25px),radial-gradient(#fff,#fff 24.5px,transparent 25px),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),url('data:image/svg+xml;utf8,<svg width="39" height="24" viewBox="0 0 39 24" xmlns="http://www.w3.org/2000/svg"><path d="M0.000217438 24C10.8002 21.6 15.5002 7 16.5002 0C26.6669 1.33333 44.8002 5.8 36.0002 13C25.0002 22 16.5002 24 0.000217438 24Z" /></svg>');mask-image:radial-gradient(#fff,#fff 24.5px,transparent 25px),radial-gradient(#fff,#fff 24.5px,transparent 25px),radial-gradient(#fff,#fff 24.5px,transparent 25px),radial-gradient(#fff,#fff 24.5px,transparent 25px),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),url('data:image/svg+xml;utf8,<svg width="39" height="24" viewBox="0 0 39 24" xmlns="http://www.w3.org/2000/svg"><path d="M0.000217438 24C10.8002 21.6 15.5002 7 16.5002 0C26.6669 1.33333 44.8002 5.8 36.0002 13C25.0002 22 16.5002 24 0.000217438 24Z" /></svg>');-webkit-mask-position:0 0,100% 0,0 100%,100% 100%,0 25px,25px 0,0 100%;mask-position:0 0,100% 0,0 100%,100% 100%,0 25px,25px 0,0 100%}

#layer4 { background: rgb(244,245,249); background: linear-gradient(90deg, rgba(244,245,249,1) 0%, rgba(229,239,248,1) 70%); padding: 44px 0}
#layer4 h2 {font-size: 26px; padding: 44px 0 22px 0}
#layer4 p {font-size: 24px}
.my-block { width: 98%;	max-width: 1200px;  margin-left: auto;  margin-right: auto}
blockquote {margin: 0; padding: 8px 15px 8px 30px; border-left: 8px solid rgba(219,0,38,1.00);  font-weight: 300}

#layer5 {padding: 44px 0}
#layer5 h2 {font-size: 26px; padding: 44px 0 22px 0}
#layer5 p {font-size: 24px}

.photo{text-align:center;width:98%;max-width:1400px;margin:10px auto}
.photo img{border:4px solid red;margin-right:10px;margin-bottom:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}


/*===== Vertical Timeline =====*/
#conference-timeline {position: relative; max-width: 920px; width: 100%; margin: 32px auto}
#conference-timeline .timeline-start, #conference-timeline .timeline-end {display: table; font-size: 18px; font-weight: 900; text-transform: uppercase; background: #00b0bd; padding: 15px 23px; color: #fff; max-width: 5%; width: 100%; text-align: center; margin: 0 auto}
#conference-timeline .conference-center-line {position: absolute; width: 3px; height: 100%; top: 0; left: 50%; margin-left: -2px; background: #00b0bd; z-index: -1}
#conference-timeline .conference-timeline-content {padding-top: 67px; padding-bottom: 67px}
.timeline-article {width: 100%; height: 100%; position: relative; overflow: hidden; margin: 20px 0}
.timeline-article .content-left-container, .timeline-article .content-right-container {max-width: 44%; width: 100%}
.timeline-article .content-left, .timeline-article .content-right {position: relative; width: auto; border: 1px solid #ddd; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); padding: 27px 25px}
.timeline-article p {margin: 0; padding: 0; font-weight: 400; color: #242424; font-size: 24px; line-height: 24px; position: relative}
.timeline-article .content-left-container {float: left}
.timeline-article .content-right-container {float: right}
.timeline-article .content-left:before, .timeline-article .content-right:before {position: absolute; top: 20px; font-size: 23px; font-family: "FontAwesome"; color: #fff}
.timeline-article .content-left:before {content: "\f0da"; right: -8px}
.timeline-article .content-right:before {content: "\f0d9"; left: -8px}
.timeline-article .meta-date {position: absolute; top: 0; left: 50%; width: 62px; height: 62px; margin-left: -31px; color: #fff; border-radius: 100%; background: #00b0bd}
.timeline-article .meta-date .date, .timeline-article .meta-date .month {display: block; text-align: center; font-weight: 900}
.timeline-article .meta-date .date {font-size: 30px; line-height: 40px}
.timeline-article .meta-date .month {font-size: 18px; line-height: 10px}
/*===== // Vertical Timeline =====*/

.prim {text-align: center; background: rgba(149, 148, 146, 0.1); margin: 60px auto; width: 90%; padding: 10px;border-radius: 10px 10px 10px 10px}

#layer6 {background: white; padding: 44px 0  }
#layer6 h2 {font-size: 26px; padding: 44px 0 22px 0}
#layer6 p {font-size: 24px; padding: 0 12px}
#layer6 .why-me {display: flex; justify-content: center;  flex-wrap: wrap;  width: 100%;  margin: 22px auto;  position: relative;  text-align:center}
#layer6 .blocks { min-height: 140px; width: calc(50% - 20px); margin: 10px; background-color: #f5f5f5; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative}
#layer6 .blocks p { margin: 0;  position: absolute; top: 50%; left: 50%;  margin-right: -50%; transform: translate(-50%, -50%) }
#layer6 .else {display: flex; justify-content: center;  flex-wrap: wrap;  width: 100%;  margin: 22px auto;  position: relative}
#layer6 .blockss {height: 240px; width: calc(98% - 20px); margin: 18px; background-color: #f5f5f5; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative; padding: 20px 12px}
#layer6 .blockss p { margin: 0;  position: absolute; top: 50%; left: 50%;  margin-right: -50%; transform: translate(-50%, -50%); padding: 26px }
#layer6 .please {height: 240px; width: calc(98% - 20px); margin: 18px; background-color: #f5f5f5; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative; padding: 20px 12px; border-left: 5px solid yellow}
#layer6 .please2 {height: 520px; width: calc(98% - 20px); margin: 18px; background-color: #f5f5f5; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative; padding: 20px 12px; border-left: 5px solid yellow}
#layer6 .please3 {height: 360px; width: calc(98% - 20px); margin: 18px; background-color: #f5f5f5; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative; padding: 20px 12px; border-left: 5px solid yellow}
#layer6 .please p, #layer6 .please2 p, #layer6 .please3 p { margin: 0;  position: absolute; top: 50%; left: 50%;  margin-right: -50%; transform: translate(-50%, -50%); padding: 26px }
		

#layer7{background:#D5D0CA;background:radial-gradient(circle,rgba(213,208,202,1) 0%,rgba(174,167,157,1) 100%);padding:44px 0}
#layer7 h3{font-size:26px;padding:0 12px;color:rgba(80,114,159,1.00)}
#layer7 p{font-size:24px;padding:0 12px;color:rgba(60,60,60,1.00)}
#layer7 .bubl{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:2px solid rgba(179,176,171,1.00);width:calc(98% - 84px);max-width:1400px;margin:40px auto;color:black;padding:40px;background:#FFFFFF;background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(215,210,206,1) 100%)}
.minds{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;max-width:1400px;margin:0 auto}
.foto{width:20%}
.mind{width:80%}
.wt{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:2px solid white}

#tag-cloud {padding: 44px 0}
#tag-cloud h3 {font-size: 23px; padding: 44px 0 22px 0}	
.tags a {white-space: nowrap; width: auto; border-radius: 13px; background-color: black; padding: 8px 8px; margin: 0 4px; text-decoration: none; color: white; line-height: 60px; font-size: 21px}
.tags a:hover {background-color: red; color: white}

#footer {margin:0; text-align: center; border-top: 2px solid rgba(152,150,151,1.00); padding: 40px 0; background: rgb(215,215,215); background: radial-gradient(circle, rgba(215,215,215,1) 10%, rgba(68,68,68,1) 100%);color:white}
.block { display: inline-flex;  align-items: center;}
.block img + a.block-text {  margin-left: 0;  border: 1px solid rgba(219,0,38,1.00);  width: 200px;  text-decoration: none;  font-size: 24px;  padding: 9px 4px;  background: rgba(155,154,152,1.00);  color: white}
.icons { display: block; margin:0; padding: 0px;  position: relative; top: 42px;  height: auto; max-width: auto;  overflow-y: hidden; overflow-x:auto; word-wrap:normal; white-space:nowrap}
.icons images {display: inline; margin: 0; padding: 0px; vertical-align:middle; width:60px}
.line {width: 98%; max-width: calc(1200px - 16px); border-top: 1px solid white;margin: 48px auto}
.line a{color: white; text-decoration: none}
.line a:hover{color: white; text-decoration: underline}
.line p{padding:12px 0; font-size: 24px}
.line .alignleft {float: left}
.line .alignright {	float: right}


@media only screen and (max-width:980px){
.logo, .location, .tel {font-size: 22px; text-align: center}
.header {font-size: 22px}
.slogan,.banner {width: 50%}
#layer2 h1 {font-size: 30px}
#layer2 h2,#layer4 h2,#layer6 h2,#layer7 h3 {font-size: 24px}
#layer2 p,#layer4 p,.timeline-article p,.line p,.my,#layer6 p,#layer7 p,#layer5 p {font-size: 22px}
.again {font-size: 25px}
.bubble h3 {font-size: 22px}
.bubble p {font-size: 21px}
#tag-cloud h3 {font-size: 21px}	
.tags a {line-height: 56px; font-size: 19px}
}



/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
  #conference-timeline .timeline-start,  #conference-timeline .timeline-end {margin: 0}
  #conference-timeline .conference-center-line {margin-left: 0; left: 50px}
  .timeline-article .meta-date {margin-left: 0; left: 20px}
  .timeline-article .content-left-container,  .timeline-article .content-right-container {max-width: 100%; width: auto; float: none; margin-left: 110px; min-height: 53px}
  .timeline-article .content-left-container {margin-bottom: 20px}
  .timeline-article .content-left, .timeline-article .content-right {padding: 10px 25px; min-height: 65px}
.timeline-article .content-left:before {content: "\f0d9"; right: auto; left: -8px}
.timeline-article .content-right:before {display: none}
}



@media screen and (max-width: 768px) {
.box {width: 50%; margin: 0 0 4px 0}
.box:last-child {margin: 0}
.logo, .location {font-size: 20px;padding: 0}
.tel {font-size: 20px;padding: 18px 0 0 0}
.header {font-size: 20px}
.slogan,.banner, .foto,.mind{width: 100%; margin: 8px 0}
#layer2 h1 {font-size: 28px}
#layer2 h2,#layer4 h2,#layer6 h2,#layer7 h3 {font-size: 22px}
#layer2 p,#layer4 p,.timeline-article p,.line p,.my,#layer6 p,#layer7 p,#layer5 p {font-size: 20px}
.again {font-size: 24px}
.bubble h3 {font-size: 21px}
.bubble p {font-size: 20px}
.line .alignleft,.line .alignright {width: 98%}
#layer6 .blocks {width: calc(96% - 20px)}
#tag-cloud h3 {font-size: 19px}	
.tags a {line-height: 52px; font-size: 17px}
.prim {width:98%}
}



@media screen and (max-width: 480px) {
.logo, .location, .tel, .header {font-size: 18px}
#layer2 h1 {font-size: 26px}
#layer2 h2,#layer4 h2,#layer6 h2,#layer7 h3 {font-size: 20px}
#layer2 p,#layer4 p,.timeline-article p,.line p,.my,#layer6 p,#layer7 p,#layer5 p {font-size: 18px}
.my {font-size: 16px}
.again {font-size: 23px}
.bubble h3 {font-size: 20px}
.bubble p {font-size: 19px}
#tag-cloud h3 {font-size: 17px}	
.tags a {line-height: 48px; font-size: 15px}
.moz {width:94%}
}



/*===== // Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 400px) {
.timeline-article p {margin:0}}



@media screen and (max-width: 360px) {
#stick .left{border-right:none}
.box {width: 100%; margin: 0 0 8px 0}
.box:last-child {margin: 0}
.logo,.menu, .location, .tel {font-size: 16px; padding: 0}
.header {font-size: 16px}
#layer2 h1 {font-size: 24px}
#layer2 h2,#layer4 h2,#layer6 h2,#layer7 h3 {font-size: 18px}
#layer2 p,#layer4 p,.timeline-article p,.line p,.my,#layer6 p,#layer7 p,#layer5 p {font-size: 16px}
.again {font-size: 22px}
.bubble h3 {font-size: 19px}
.bubble p {font-size: 18px}
#tag-cloud h3 {font-size: 15px}	
.tags a {line-height: 44px; font-size: 13px}
}

@media screen and (max-width: 320px) {
.logo,.menu, .location, .tel {font-size: 14px; padding: 0}
.header {font-size: 14px}
#layer2 h1 {font-size: 22px}
#layer2 h2,#layer4 h2,#layer6 h2,#layer7 h3 {font-size: 16px}
#layer2 p,#layer4 p,.timeline-article p,.line p,.my,#layer6 p,#layer7 p,#layer5 p {font-size: 14px}
.again {font-size: 20px}
.bubble h3 {font-size: 18px}
.bubble p {font-size: 16px}
#tag-cloud h3 {font-size: 13px}	
.tags a {line-height: 44px; font-size: 11px}
}