@import url("fontawesome/css/all.css");
@import url("fonts.css");

/**
  ** Cursor **
**/

/*.cursor{ width: 50px; height: 50px; position: absolute; user-select: none; pointer-events: none; top: 0; left: 0; border-radius: 50%; z-index: 10000; }
.cursor span{ display: block; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #333; }
.cursor span.bullet-1{ top: -3px; animation: cursorCircularOne 1s linear infinite; }
.cursor span.bullet-3{ left: 2px; animation: cursorCircularTwo 1s alternate infinite; }
.cursor span.bullet-3{ right: 2px; animation: cursorCircularThree 2s alternate infinite;  -webkit-animation: cursorCircularThree 2s alternate infinite; }*/

/**
	** No display **
**/

.frontpage div[role=main],
.loginindex div[role=main],
#eleves-mobile,
#formateurs-mobile{ display:none; }
.loginindex section#region-main div[role=main]{ display:block; }

/**
  ** All **
**/

html,
body{ width: 100%; height: 100%; }
body{ font-family: 'LibreBaskerville Regular', 'MuseoSans-500', 'Muli', 'Helvetica', 'Arial', 'sans-serif'; }

/*body.frontpage,
body.loginindex{ cursor: none; }
body.frontpage button,
body.frontpage a,
body.loginindex button,
body.loginindex a,
body.loginindex input{ cursor: none !important; }*/

a{ color: #7eaccf; -webkit-transition: all .35s; transition: all .35s; }
a:hover,
a:focus{ color: #7eaccf; }

hr{ max-width: 100px; margin: 25px auto 0; border-width: 1px; border-color: rgba(34, 34, 34, 0.1); }
hr.light{ border-color: white; }

h1,
h2,
h3,
h4,
h5,
h6{ font-family: 'ArgentCF-Regular', 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 1px; }

p{ font-size: 18px; line-height: 1.5; margin-bottom: 20px; }
section{ padding: 100px 20px; }
section h2{ font-size: 50px; }

.btn-outline{ color: white; border: 1px solid; border-color: white; }
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active{ color: white; border-color: #7eaccf; background-color: #7eaccf; }
.btn{ border-radius: 300px; letter-spacing: 2px; text-transform: uppercase; }
.btn-xl{ font-size: 11px; padding: 15px 45px; }

.eupopup-container{ font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; }
.eupopup-container .eupopup-button,
.eupopup-container .eupopup-button:hover{ color: #FFFFFF; font-weight: normal; }

/** Structure **/
.block-1-2{ width:50%; }

.element-animate,
.intro-animate{ opacity: 0; }
.no-padding{ padding:0 !important; }
.no-margin{ margin:0 !important; }

span.blue{ color:#7eaccf; }

/**
  ** Header **
**/

/** Main Nav **/
.navbar{ padding: 12px !important; }
#mainNav{ /*background-color: #FFFFFF;*/ min-height: 60px; border-color: rgba(34, 34, 34, 0.05); -webkit-transition: all .35s; transition: all .35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 1px; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
#mainNav .navbar-brand{ color: #222222; font-family: 'TuesdayNight Regular', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 1px; font-size: 30px; }
#mainNav .navbar-toggler{ color: #333; border: none; padding: 2px 5px; }
#mainNav .navbar-nav > li > a{ font-size: 11px; font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: 2px; text-transform: uppercase; }
#mainNav .navbar-nav > li > a.active { background-color: transparent; }
#mainNav .navbar-nav > li > a.active:hover { background-color: transparent; text-decoration: underline; }
#mainNav .navbar-nav > li > a,
#mainNav .navbar-nav > li > a:focus { color: #333; }
#mainNav .navbar-nav > li > a:hover,
#mainNav .navbar-nav > li > a:focus:hover { color: #333; }
.navbar>.container{ flex-direction: row-reverse; }
.navbar-expand-lg .navbar-toggler{ display: block; }
.collapse:not(.show){ display: none !important; }
/** Sticky active **/
#mainNav.sticky-active .navbar-nav > li > a.active{ text-decoration: underline; }
#mainNav.sticky-active .navbar-nav > li > a:hover{ text-decoration: underline; }

/**
	** Page Container **
**/

/** Section **/
.section-intro{ margin-bottom:3rem; }
.section-intro p.lead{ color:#222222; margin:0 auto; }
.section-intro h2{ color:#222222; text-align:center; margin:0 auto 0.5rem auto; }

#page{ margin-top:0 !important; }
#page #page-content{ padding-bottom:0 !important; }
#page #page-content #region-main-box{ padding:0; }
#page #page-content #region-main-box section#region-main{ padding:0; border:none; border:0; }

/**
	** Page **
**/

/** Fullscreen **/
section.mastcontainer{ display:flex; align-items: center; height: 100vh; width: 100%; color:#222222; z-index:999; }
section.mastcontainer.fixed{ position: fixed; }
section.mastcontainer .container{ z-index: 1; }
section.mastcontainer .effect{ min-height: 100vh; width: 100%; position: absolute; display: flex; }
section.mastcontainer .effect.fullimage{ background: url('../img/home-eleves-effect.jpg') no-repeat; background-size: auto; animation: homeEffectFullImageAnimation .7s; animation-fill-mode: both; }
section.mastcontainer .effect-overview.overview{ z-index: 99; position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: sepia(0); -webkit-filter: sepia(0); }

section.mastcontainer .logo{ display:block; margin: 20px auto; max-width: 130px; }
section.mastcontainer .header-content{ text-align: center; text-align: center; margin-top: -50px; }
section.mastcontainer .header-content .btn{ background:none; color:#222222; border:1px solid #222222; font-weight:bold; width: auto; margin: 0 auto; }
section.mastcontainer .header-content .title{ position: relative; margin: 0 auto 110px auto; z-index: 999; max-width: 900px; }
section.mastcontainer .header-content h1{ margin-bottom:0; font-family:'ArgentCF-Thin'; font-weight:400; font-size: 49px; text-align: left; }
section.mastcontainer .header-content h2{ margin-bottom: 40px; margin-left: 70px; font-family:'TuesdayNight Regular', 'Helvetica', 'Arial', 'sans-serif'; font-size: 25px; letter-spacing: 5px; margin-top: 10px; text-align: left; }
section.mastcontainer .header-content h3{ margin-bottom: 40px; font-family:'LibreBaskerville Regular'; font-size: 21px; }
section.mastcontainer .header-content h4{ margin-bottom: 20px; font-weight:bold; font-size: 20px; }
section.mastcontainer .device-container{ max-width: 325px; margin-right: auto; margin-left: auto; }
section.mastcontainer .device-container .screen img{ border-radius: 3px; }
section.mastcontainer .header-content .start-actions .letters{ position: absolute; z-index: 150; width: 900px; height: 600px; }
section.mastcontainer .header-content .start-actions .letters > .formateurs{ display: none; }
section.mastcontainer .header-content .start-actions .letters .letter{ font-size: 100px; position: absolute; opacity: 0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; }
section.mastcontainer .header-content .start-actions{ display: flex; width: 100%; flex-direction: column; }
section.mastcontainer .header-content .start-actions hr{ width: 100%; max-width: 80px; margin: 0 auto 20px auto; background-color: #222; position: relative; }
section.mastcontainer .header-content .start-actions p.label{ margin:0 auto; }
section.mastcontainer .header-content .action{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }
section.mastcontainer .header-content .action h2{ font-family:'ArgentCF-Thin'; font-size: 30px; color: #222222; text-transform: uppercase; letter-spacing: .3rem; margin: 0 auto; }
section.mastcontainer .header-content .action .circle-effect{ z-index: 10; display:flex; flex-direction: column; align-items: center; justify-content: center; width: 450px; height: 450px; border-radius: 225px; position: absolute; box-shadow: 0 0 0 40px #FFFFFF; }
section.mastcontainer .header-content .action .circle-effect-do,
section.mastcontainer .header-content .action .circle-effect-detect{ z-index: 199; display:flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 450px; height: 450px; border-radius: 225px; position: absolute; }
section.mastcontainer .header-content .action .circle-effect-do{ z-index: 5; background-size: cover; }
section.mastcontainer .header-content .action .circle-effect-do.eleves{ background: url('../img/home-eleves-effect.png'); background-size: cover; }
section.mastcontainer .header-content .action .circle-effect-do.formateurs{ background: url('../img/home-formateurs-effect.png'); background-size: cover; }
section.mastcontainer .header-content .action .circle-effect.formateurs,
section.mastcontainer .header-content .action .circle-effect-do.formateurs{ visibility: hidden; }
section.mastcontainer .header-content .action .circle-action{ z-index: 499; display: none; opacity: 0; margin-bottom: -80px; }
section.mastcontainer .header-content .action .action-link{ color:#222; text-decoration: inherit; display: block; padding: 30px; margin-top: -30px; }
section.mastcontainer .header-content .action .action-link:hover{ opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; }

/** Home social-list **/
.home-social-list{ position: absolute; left: 48px; bottom: 54px; margin: 0; padding: 0; list-style: none; font-size: 2.4rem; line-height: 1.75; text-align: center; }
.home-social-list::before{ display: block; content: ""; width: 2px; height: 42px; background-color: rgba(255, 255, 255, 0.3); margin-left: auto; margin-right: auto; margin-bottom: 12px; }
.home-social-list li{ padding-left: 0; }
.home-social-list li a,
.home-social-list li a:visited{ color: #FFFFFF; }
.home-social-list li a:hover{ opacity:0.5; -moz-opacity:0.5; }
/** About **/
#about{ display:flex; flex-direction: column; margin-top: -110px; max-width: 900px; align-items:center; position: relative; justify-content: center; text-align: center; }
#about .line-effect-container{ display: flex; align-items: flex-start; justify-content: center; height: 100px; }
#about .line-effect{ width: 10px; height: 0; overflow: hidden; margin-bottom: 20px; background: url("../img/line-effect-v-100.png"); background-size: contain; background-repeat: no-repeat; }
#about.inactive{ display: none; }
#about .about-wrap{ max-width: 850px; margin:0 auto; }
#about h3{ font-family:'ArgentCF-Thin'; font-size: 60px; line-height: 1.667; color: #222222; text-transform: uppercase; letter-spacing: .3rem; position: relative; }
#about .lead{ font-size: 16px; line-height: 30px; color: #2e383f; margin-top: 30px; text-align: justify; }
#about .citation{ flex-direction: column; align-items: flex-end; text-align:end; }
#about .citation-container{ width: 100%; display:flex; flex-direction: column; align-items: center; margin-bottom: 60px; }
#about .citation span.citation-label,
#about .citation span.citation-author{ font-family: 'LibreBaskerville Regular', 'MuseoSans-500', 'Muli', 'Helvetica', 'Arial', 'sans-serif'; font-size: 20px; display:block; }
#about .citation span.citation-author{ font-family: 'ArgentCF-Regular'; font-style: italic; font-weight: 600; margin-right: 40px; }
/** Contact **/
#contact{ position: relative; margin-top: -110px; color:#2e383f; }
#contact.inactive{ display: none; }
.contact-content{ text-align:left; color:#222222; }
.contact-content h5{ color: #222222; margin-bottom: 2rem; }
.contact-content h6{ color: #222222; font-size: 18px; }
/* Contact info */
.contact-info .cinfo{ margin-bottom: 2rem; }

/**
  ** Login **
**/
.loginindex .masthead{ height: 100vh !important; }
.loginindex .masthead h1{ text-align: center; }
.loginindex .card{ border: none; }
.loginindex .card-header{ display:none; }
.loginindex .justify-content-md-center{ max-width:80%; margin: auto; }
.loginindex .card .card-body{ max-width: 580px; margin: 0 auto; }
.loginindex .card .card-body .col-md-5{ width: 100%; flex: inherit; max-width: inherit; margin: 0 auto; }
.loginindex .card .card-body .col-md-5:nth-child(2) .mt-3:not(.forgetpass){ display:none; }
.loginindex .card .card-body .col-md-5:nth-child(2) .forgetpass a{ display:block; color: #222222; font-size: 13px; text-align: center; margin: 30px auto; }
.loginindex .card .card-body input{ border: none; font-family: 'LibreBaskerville Regular', 'MuseoSans-500', 'Muli', 'Helvetica', 'Arial', 'sans-serif'; font-size: 14px; }
.loginindex .card .card-body #loginbtn:hover{ opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; }
.loginindex .card .card-body #loginbtn{ cursor: pointer; }
.loginindex .card .card-body .rememberpass{ text-align: center; }
.loginindex .card .card-body .rememberpass label{ color: #222222; font-size: 13px; }
.loginindex .header-content{ max-width:100% !important; }
.loginindex section.mastcontainer .header-content h2{ margin-bottom:0 !important; }
.loginindex section.mastcontainer .header-content .btn.p-0{ background:none; }
.loginindex .login-section{ color:#495057; }
.loginindex .login-section section{ padding: 0; }
.loginindex .login-section button.btn-primary{ width: auto; margin: 0 auto; background-color: inherit; border:1px solid #ced4da; color:#222; font-size: 14px; border-radius: inherit; }
.loginindex .login-section .my-1.my-sm-5{ display: none; }
.loginindex .login-section div[role="main"] .col-xl-6{ max-width:100% !important; flex:0 0 70%; }
.loginindex .login-section div[role="main"] .col-xl-6 .card,
.loginindex .login-section div[role="main"] .col-xl-6 .card .form-control,
.loginindex .login-section div[role="main"] .col-xl-6 .card .alert{ border-radius:inherit; }
.loginindex .login-section div[role="main"] .col-xl-6 .card .loginerrors{ margin-top:0 !important; }
.loginindex .login-section div[role="main"] .col-xl-6 .card .loginerrors a{ display: none; }
.loginindex .line-effect-container-h{ height: 10px; margin-bottom: 10px; }
.loginindex .line-effect-h{ width: 0; height: 1px; overflow: hidden; margin-bottom: 20px; /*background: url("../img/line-effect-h.png"); background-size: cover; background-repeat: no-repeat; opacity: 0.7;*/ background: #ced4da; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; }

/**
	** Footer **
**/
body.frontpage footer{ display: none; }
footer{ position: fixed; width: 100%; bottom: 0; padding: 25px 0; text-align: center; color: #222222; border-top:1px solid rgba(255, 255, 255, 0.4); }
footer .container{ width: 100%; }
footer .container p{ font-size: 12px; margin: 0; }
footer .container ul{ margin-bottom: 0; }
footer .container ul li a{ font-size: 12px; color: rgba(255, 255, 255, 0.3); }
footer .container ul li a:hover,
footer .container ul li a:focus,
footer .container ul li a:active,
footer .container ul li a.active{ text-decoration: none; }

/**
  ** Animations **
**/
.animated{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite{ -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.fadeInUp{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    -moz-opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    -moz-opacity: 0;
  }
}

@-webkit-keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}

@-moz-keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}

@keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}

@-webkit-keyframes homeEffectFullImageAnimation {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-moz-keyframes homeEffectFullImageAnimation {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes homeEffectFullImageAnimation {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes homeEffectCircleEffectAnimation {
  from {
    background-color: none;
    transform:scale(0.6);
  }
  to {
    background-color: #FFF;
    transform:scale(1);
  }
}

@-moz-keyframes homeEffectCircleEffectAnimation {
  from {
    background-color: none;
    transform:scale(0.6);
  }
  to {
    background-color: #FFF;
    transform:scale(1);
  }
}

@keyframes homeEffectCircleEffectAnimation  {
  from {
    background-color: none;
    transform:scale(0.6);
  }
  to {
    background-color: #FFF;
    transform:scale(1);
  }
}

@-webkit-keyframes cursorCircularOne {
    from { transform: rotate(0deg) translateX(1px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(1px) rotate(-360deg); }
}

@-moz-keyframes cursorCircularOne {
    from { transform: rotate(0deg) translateX(1px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(1px) rotate(-360deg); }
}

@keyframes cursorCircularOne {
    from { transform: rotate(0deg) translateX(1px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(1px) rotate(-360deg); }
}

@-webkit-keyframes cursorCircularTwo {
    from { transform: rotate(0deg) translateX(1px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(1px) rotate(-360deg); }
}

@-moz-keyframes cursorCircularTwo {
    from { transform: rotate(0deg) translateX(1px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(1px) rotate(-360deg); }
}

@keyframes cursorCircularTwo {
    from { transform: rotate(0deg) translateX(1px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(1px) rotate(-360deg); }
}

@-webkit-keyframes cursorCircularThree {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

@-moz-keyframes cursorCircularThree {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

@keyframes cursorCircularThree {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

/**
  ** Responsive **
**/

@media (min-width: 992px){
  #mainNav .navbar-brand:hover,
  #mainNav .navbar-brand:focus{ color: #222222; }
  #mainNav .navbar-nav > li > a,
  #mainNav .navbar-nav > li > a:focus{ color: #222222; }
  #mainNav .navbar-nav > li > a:hover,
  #mainNav .navbar-nav > li > a:focus:hover{ color: #222222; }
  .section-container{ max-width:66%; }
  #mainNav .navbar-toggler i{ font-size: 20px; }
}
@media (min-width: 1199px){
  .contact-content .col-four{ margin-left:40px; }
}

@media only screen and (max-width: 1441px){
  section.mastcontainer .header-content .action .circle-effect,
  section.mastcontainer .header-content .action .circle-effect-do,
  section.mastcontainer .header-content .action .circle-effect-detect{ width: 400px; height: 400px; border-radius: 200px; }
  section.mastcontainer .header-content .start-actions .letters .letter{ font-size: 80px; }
}

@media only screen and (max-width: 1248px){
  section.mastcontainer .header-content .title{ margin: 0 auto 50px auto; }
}

@media only screen and (max-width: 1024px){
  #about{ min-height: 636px; }
  #about .about-wrap{ max-width: 800px; }
}

@media only screen and (max-width: 991px){
  body.frontpage,
  body.loginindex{ cursor: initial; }
  #eleves-mobile,
  #formateurs-mobile{ display: block; }
  #eleves-mobile,
  #formateurs-mobile{ width: 300px; height: 300px; border-radius: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin-bottom: 130px; }
  #eleves-mobile .link,
  #formateurs-mobile .link{ margin-bottom: -110px; }
  #eleves-mobile{ background: url('../img/home-eleves-effect.png'); background-size: cover; }
  #formateurs-mobile{ background: url('../img/home-formateurs-effect.png'); background-size: cover; }
  section{ padding: 0; }
  section.mastcontainer{ position: relative; height: inherit; flex-direction: column; padding-top: 100px; }
  section.mastcontainer .header-content{ margin-top: 0; }
  .cursor,
  section.mastcontainer .header-content .start-actions .letters,
  section.mastcontainer .header-content .action .circle-effect,
  section.mastcontainer .header-content .action .circle-effect-do,
  section.mastcontainer .header-content .action .circle-effect-detect,
  section.mastcontainer .header-content .action .circle-action{ display: none !important; }
  #about,
  #contact{ margin-top: 30px; }
  #about.inactive,
  #contact.inactive{ display: block; }
  #about .line-effect{ height: 85px; }
}

@media only screen and (max-width: 900px){
  #about .about-wrap{ max-width: 720px; }
  .contact-info{ width: 38%; }
}

@media only screen and (max-width: 768px){
  /** Structure **/
  .block-1-2{ width:100%; float:none; }
  section.mastcontainer .header-content h1{ font-size:49px; line-height: 49px; }
  .loginindex section.mastcontainer .header-content h1{ display:none; }
  section.mastcontainer .header-content h2{ font-size:22px; }
  section.mastcontainer .header-content h3{ font-size:18px; }
  section.mastcontainer .home-social-list::before,
  section.mastcontainer .scrolldown{ display:none; }
  .loginindex .login-section div[role="main"] .col-xl-6{ flex:0 0 100%; }
  section h2{ font-size: 54px; }
  .scroll-icon{ font-size:.9em; }
  .home-social-list{ font-size: 1.4rem; bottom: 20; }
  .home-social-list li{ display:inline-flex; }
  .home-social-list li:nth-child(2n){ margin-left:10px; }
  #about h3{ font-size: 1.7rem; }
  #about .lead{ padding:0 30px; }
  #about .about-wrap{ max-width: 600px; }

  .contact-content{ max-width: 600px; text-align: center; }
  .contact-info{ width: 100%; margin-top: 3.6rem; }
}
@media only screen and (max-width: 600px){
  #about{ min-height: auto; }
  #about .about-wrap{ max-width: 500px; }
  .contact-content { max-width: 480px; }
}
@media only screen and (max-width: 500px) {
  #about h3{ font-size: 1.5rem; }
}
@media only screen and (max-width: 400px){
  #about{ padding: 4.2rem 0 9.6rem; }
  #about .about-wrap{ max-width: 380px; }
  .contact-info{ width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0; padding: 0; }
}