/*
  [CSS Index]
  
  ---
  
  Template Name: Exinc - Creative Personal Portfolio Template
  Author:  ex-nihilo
  Version: 1.0
*/

 
/* 
  1. TEMPLATE BACKGROUNDS
    1.1. single IMG BACKGROUND
    1.2. about testimonials IMG BACKGROUND
    1.3. facts parallax IMG BACKGROUND
	1.4. slick fullscreen slideshow IMG BACKGROUND, ken burns slideshow IMG BACKGROUND
  2. reset
  3. layout
    3.1. upper page
    3.2. lower page
  4. borders
  5. social icons
  6. line left
  7. line right
  8. line buttons
  9. home credits
  10. clearfix
  11. hero
    11.1 hero overlay
    11.2 hero container
    11.3 hero bg
    11.4 hero fullscreen FIX
    11.5 hero center container
	11.6. hero home page title
  12. main navigation
    12.1. main navigation link underline
  13. section
  14. about
    14.1. about intro years
    14.2. about vertical spacer line
	14.3. about fullwidth IMG
	14.4. about testimonials
    14.5. about skills
    14.6. about skills bar
  15. works
    15.1. works primary nav
    15.2. works secondary nav
    15.3. works col and row
    15.4. works center col and row
    15.5. works box description - left side
    15.6. works box description - right side
    15.7. works photo
    15.8. works lightbox
    15.9. works slideshow
    15.10. works hover effect
  16. services
  17. facts
    17.1. facts counter
    17.2. facts parallax
  18. contact
    18.1. contact modal launcher
	18.2. contact modal center container
    18.3. contact modal inner
    18.4. contact modal form
  19. footer
    19.1. footer logo
    19.2. footer social icons
    19.3. footer newsletter form
  20. preloader
  21. center container
  22. divider
  23. buttons
  24. link underline
  25. button effect
  26. to top arrow
  27. Slick v1.6.0 CUSTOM
    27.1. slick slide
    27.2. slick slide flickering FIX
    27.3. slick fullscreen slideshow
    27.4. slick navigation
  28. videos
    28.1. YouTube video
	  28.1.1. jquery.mb.YTPlayer v3.1.13 CUSTOM
	28.2. Vimeo video
  29. elements home call
    29.1. main navigation logo home call
    29.2. main navigation home call
    29.3. home credits home call
    29.4. social icons home call
  30. ken burns slideshow
  31. news
    31.1. news modal
    31.2. news modal video
  32. vertical spacer
  33. the button
  34. Owl Carousel v2.2.0 CUSTOM
  35. divider
*/


/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. single IMG BACKGROUND */
.bg-img-SINGLE {
background-image: url(../img/background/SINGLE-bg.jpg);
}


/* 1.2. about testimonials IMG BACKGROUND */
.img-fullwidth-about-testimonials_1 {
background-image: url(../img/picture_1.jpeg);
}
.img-fullwidth-about-testimonials_2 {
background-image: url(../img/picture_2.jpg);
}
.img-fullwidth-about-testimonials_3 {
background-image: url(../img/picture_5.jpg);
}

.top-pc,.top-sp{
  width: 100%;
  height: auto;
}

.top-sp{
  display: none;
}

.top-img{
  width: 50%;
  height: auto;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .top-pc{
    display: none;
  }
  .top-sp {
    display: block;
  }
  .top-img{
    width: 75%;
    height: auto;
    margin: 0 auto;
  }
}


/* 1.3. facts parallax IMG BACKGROUND */
.parallax-facts {
background-image: url(../img/background.png);
}


/* 1.4. slick fullscreen slideshow IMG BACKGROUND, ken burns slideshow IMG BACKGROUND */
.bg-img-1,
.kenburns-slide-1 {
background-image: url(../img/background/hero-bg-1.jpg);
}

.bg-img-2,
.kenburns-slide-2 {
background-image: url(../img/background/hero-bg-2.jpg);
}

.bg-img-3,
.kenburns-slide-3 {
background-image: url(../img/background/hero-bg-3.jpg);
}

.bg-img-4,
.kenburns-slide-4 {
background-image: url(../img/background/hero-bg-4.jpg);
}


/* 2. reset */
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;
box-sizing: border-box;
}

html, body {
height: 100%;
/* line-height: 170%; */
}

body {
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

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;
}

*:focus {  
outline: none;
}

/* remove dotted outline from links,
button and input element */
a:focus,
a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0;
}

/* IE10 scrollbar FIX */
html {
-ms-overflow-style: scrollbar;
}


/* 3. layout */
body {
font-family: sans-serif;
font-size: 13px;
font-style: normal;
font-weight: 400;
text-align: center;
color: #444864;
background: #fff;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
}

a {
color: #444864;
text-decoration: none;
outline: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

a:hover,
a:visited,
a:active,
a:focus {
color: #5f5f5f;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

p {
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

p a,
p a:hover {
color: #5f5f5f;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

strong {
font-weight: bold;
}

::-moz-selection {
background: #5f5f5f;
color: #fff;
}

::selection {
background: #5f5f5f;
color: #fff;
}

.nopadding {
padding: 0!important;
margin: 0!important;
}


/* 3.1. upper page */
.upper-page {
position: relative;
width: 100%;
/* height: 100%; */
overflow: hidden;
left: 0;
/* top: 70px; */
margin: 0;
}

@media only screen and (max-width: 768px) {
  .upper-page{
    /* top: -65px; */
    /* top: 50px; */
  }
}


/* 3.2. lower page */
#about,
#about-testimonials,
#about-skills,
#works,
#services,
#facts,
#news,
#contact,
#credits,
#section1,
#section2,
#section3,
#section4,
#section5,
#section6,
#section7,
#section8,
#section9,
#section10,
#section11{
position: relative;
height: auto;
min-height: inherit;
overflow: hidden;
/* margin-left: 40px;
margin-right: 40px; */
background: none;
}

@media only screen and (max-width: 768px) {
  #about,
  #about-testimonials,
  #about-skills,
  #works,
  #services,
  #facts,
  #news,
  #contact,
  #credits,
  #section1,
  #section2,
  #section3,
  #section4,
  #section5,
  #section6,
  #section7,
  #section8,
  #section9,
  #section10,
  #section11{
    margin-left: 0;
    margin-right: 0;
  }
}

#credits {
margin-bottom: 50px;
}

@media only screen and (max-width: 768px) {
  #credits {
    margin-bottom: 0;
  }
}

/* 4. borders */
.border-top,
.border-top.top-position,
.border-top.top-position-primary,
.border-bottom,
.border-bottom.bottom-position,
.border-bottom.bottom-position-primary,
.border-left,
.border-left.left-position,
.border-left.left-position-primary,
.border-right,
.border-right.right-position,
.border-right.right-position-primary {
position: fixed;
background: #fff;
-webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
z-index: 100;
}

.border-top.top-position-primary,
.border-bottom.bottom-position-primary,
.border-left.left-position-primary,
.border-right.right-position-primary {
background: #f5f5f5;
}

.border-top {
width: 100%;
height: 0px;
left: 0;
top: 0;
}

@media only screen and (max-width: 995px) {
  .border-top {
    height: 0px;
  }
}

.border-top.top-position {
-webkit-transform: translateY(-110px);
   -moz-transform: translateY(-110px);
    -ms-transform: translateY(-110px);
     -o-transform: translateY(-110px);
        transform: translateY(-110px);
}

@media only screen and (max-width: 995px) {
  .border-top.top-position {
    -webkit-transform: translateY(-70px);
       -moz-transform: translateY(-70px);
        -ms-transform: translateY(-70px);
         -o-transform: translateY(-70px);
            transform: translateY(-70px);
  }
}

.border-top.top-position-primary {
-webkit-transform: translateY(-40px);
   -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
     -o-transform: translateY(-40px);
        transform: translateY(-40px);
}

@media only screen and (max-width: 995px) {
  .border-top.top-position-primary {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

.border-bottom {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
}

@media only screen and (max-width: 995px) {
  .border-bottom {
    height: 0;
  }
}

.border-bottom.bottom-position {
-webkit-transform: translateY(110px);
   -moz-transform: translateY(110px);
    -ms-transform: translateY(110px);
     -o-transform: translateY(110px);
        transform: translateY(110px);
}

@media only screen and (max-width: 995px) {
  .border-bottom.bottom-position {
    -webkit-transform: translateY(50px);
       -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
         -o-transform: translateY(50px);
            transform: translateY(50px);
  }
}

.border-bottom.bottom-position-primary {
-webkit-transform: translateY(60px);
   -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
     -o-transform: translateY(60px);
        transform: translateY(60px);
}

@media only screen and (max-width: 995px) {
  .border-bottom.bottom-position-primary {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@media only screen and (max-width: 768px) {
  .border-bottom.bottom-position-primary {
    -webkit-transform: translateY(110px);
       -moz-transform: translateY(110px);
        -ms-transform: translateY(110px);
         -o-transform: translateY(110px);
            transform: translateY(110px);
  }
}

.border-left {
width: 40px;
height: 100%;
left: 0;
top: 0;
}

@media only screen and (max-width: 995px) {
  .border-left {
    width: 0;
  }
}

.border-left.left-position {
-webkit-transform: translateX(-110px);
   -moz-transform: translateX(-110px);
    -ms-transform: translateX(-110px);
     -o-transform: translateX(-110px);
        transform: translateX(-110px);
}

@media only screen and (max-width: 995px) {
  .border-left.left-position {
    -webkit-transform: translateX(-50px);
       -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
         -o-transform: translateX(-50px);
            transform: translateX(-50px);
  }
}

.border-left.left-position-primary {
-webkit-transform: translateX(-60px);
   -moz-transform: translateX(-60px);
    -ms-transform: translateX(-60px);
     -o-transform: translateX(-60px);
        transform: translateX(-60px);
}

@media only screen and (max-width: 995px) {
  .border-left.left-position-primary {
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
  }
}

@media only screen and (max-width: 768px) {
  .border-left.left-position-primary {
    -webkit-transform: translateX(-110px);
       -moz-transform: translateX(-110px);
        -ms-transform: translateX(-110px);
         -o-transform: translateX(-110px);
            transform: translateX(-110px);
  }
}

.border-right {
width: 40px;
height: 100%;
right: 0;
top: 0;
}

@media only screen and (max-width: 995px) {
  .border-right {
    width: 0;
  }
}

.border-right.right-position {
-webkit-transform: translateX(110px);
   -moz-transform: translateX(110px);
    -ms-transform: translateX(110px);
     -o-transform: translateX(110px);
        transform: translateX(110px);
}

@media only screen and (max-width: 995px) {
  .border-right.right-position {
    -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
        -ms-transform: translateX(50px);
         -o-transform: translateX(50px);
            transform: translateX(50px);
  }
}

.border-right.right-position-primary {
-webkit-transform: translateX(60px);
   -moz-transform: translateX(60px);
    -ms-transform: translateX(60px);
     -o-transform: translateX(60px);
        transform: translateX(60px);
}

@media only screen and (max-width: 995px) {
  .border-right.right-position-primary {
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
  }
}

@media only screen and (max-width: 768px) {
  .border-right.right-position-primary {
    -webkit-transform: translateX(110px);
       -moz-transform: translateX(110px);
        -ms-transform: translateX(110px);
         -o-transform: translateX(110px);
            transform: translateX(110px);
  }
}

/* 10. clearfix */
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

/* 11. hero */
/* 11.1 hero overlay */
.overlay:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}

.overlay-dark-60:before {
background: rgba(0, 0, 0, .6);
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

.overlay-dark-60-video:before,
.overlay-dark-60-video-mobile:before {
background: rgba(0, 0, 0, .6);
-webkit-pointer-events: auto;
   -moz-pointer-events: auto;
        pointer-events: auto;
}

.overlay-dark-60-video-mobile:before {
display: none;
}

@media only screen and (max-width: 995px) {
  .overlay-dark-60-video-mobile:before {
    display: block;
  }
}

.overlay-dark-40:before {
background: rgba(0, 0, 0, .4);
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

.overlay-dark-40-video:before,
.overlay-dark-40-video-mobile:before {
/* background: rgba(0, 0, 0, .4); */
-webkit-pointer-events: auto;
   -moz-pointer-events: auto;
        pointer-events: auto;
}

.overlay-dark-40-video-mobile:before {
display: none;
}

@media only screen and (max-width: 995px) {
  .overlay-dark-40-video-mobile:before {
    display: block;
  }
}

/* 11.2 hero container */ 
.hero-fullscreen {
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 0;
}

/* 12. main navigation */
#header {
/* position: fixed; */
top: 0;
left: 0;
width: 100%;
height: 70px;
background: none;
z-index: 1001;
background-color: #fff;
transition: 0.5s;
}

#header.hide{
  top: -50px;
  transition: 0.5s;
}

.logo {
-webkit-transition: all .7s;
   -moz-transition: all .7s;
    -ms-transition: all .7s;
     -o-transition: all .7s;
        transition: all .7s;
}

.logo.top-position {
-webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
     -o-transform: translateY(-200px);
        transform: translateY(-200px);
-webkit-transition: all .7s;
   -moz-transition: all .7s;
    -ms-transition: all .7s;
     -o-transition: all .7s;
        transition: all .7s;
}

.logo .logo-dark,
.main-navigation-bg .logo .logo-dark {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
height: auto;
}

.navbar-bg-switch {
position: fixed;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
z-index: 999;
}

.nav li a:focus,
.nav li a:hover {
color: #5f5f5f;
background: none;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
}

@media only screen and (max-width: 768px) {
  .navbar-toggle .icon-bar {
    background: #111;
	margin-top: 10px;
  }
  
  .navbar-toggle {
    margin-top: -45px;
    margin-right: -10px;
    -webkit-transition: all .4s ease-out;
       -moz-transition: all .4s ease-out;
        -ms-transition: all .4s ease-out;
         -o-transition: all .4s ease-out;
            transition: all .4s ease-out;
  }
  
  .navbar-collapse {
    background: rgba(255, 255, 255, 1);
  }
  
  .navbar-collapse.navbar-collapse-position-primary {
    background: #f5f5f5;
  }
}

.navbar-nav li.active {
color: #ccc!important;
text-decoration: none;
}

.navbar-nav > .active > a {
color: #ccc!important;
background: none;
text-decoration: none;
}

/* 13. section */
.sections {
position: relative;
z-index: 5;
width: 100%!important;
}

@media only screen and (max-width: 768px) {
  .sections {
    padding: 0 40px;
  }
  #section8 .sections, #section9 .sections {
    padding: 0;
  }
}

section h2.section-heading {
position: relative;
font-family: sans-serif;
font-size: 45px;
font-weight: 800;
line-height: 1.3;
text-align: center;
letter-spacing: -0.08em;
color: #000;
margin: 0 0 -20px 0;
padding: 0;
z-index: 1;
}

@media only screen and (max-width: 768px) {
  #section10,section#section10 h2.section-heading {
    text-align: left;
  }
}

@media only screen and (max-width: 768px) {
  section h2.section-heading {
    font-size: 24px;
	margin: 0 0 -10px 0;
  }
}

section h2.section-heading.section-heading-light {
color: #fff;
margin-left: 15px;
margin-right: 15px;
}

h2.section-subheading,
h2.section-subheading-light {
font-family: sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
margin-top: -5px;
text-align: center;
letter-spacing: 0.05em;
}

h2.section-subheading {
color: #111;
}

h2.section-subheading-light {
color: #fff;
margin-left: 15px;
margin-right: 15px;
}

h2.section-subheading span,
h2.section-subheading-light span {
position: relative;
display: inline-block;
line-height: 1;
}

/* 14. about */
/* 14.2. about vertical spacer line */
.spacer-line-vertical {
position: relative;
display: inline-block;
}

@media only screen and (max-width: 768px) {
  h2.section-subheading,
  h2.section-subheading-light {
  font-size: 16px;
  }
  .spacer-line-vertical:after {
  height: 100px;
	margin: 92px auto 0 auto;
  }
}


/* 14.3. about fullwidth IMG */
.img-fullwidth.img-fullwidth-bg-light {
background: #fafafa;
text-align: center;
padding: 0 40px;
}

@media only screen and (max-width: 768px) {
  .img-fullwidth.img-fullwidth-bg-light {
    padding: 0 30px;
  }
}

.img-fullwidth-all {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

/* 15.8. works lightbox */
.lightbox {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
	    backface-visibility: hidden;
		         visibility: hidden;
-webkit-transform: scale(1.75);
   -moz-transform: scale(1.75);
    -ms-transform: scale(1.75);
     -o-transform: scale(1.75);
        transform: scale(1.75);
-webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
z-index: 999999;
}

.lightbox.open {
-webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
	    backface-visibility: visible;
		         visibility: visible;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
}

/* 17. facts */
/* 17.1. facts counter */
.facts-counter-wrapper {
padding: 0;
margin-top: 0;
}

@media only screen and (max-width: 768px) {
  .facts-counter-wrapper {
    font-size: 35px;
	margin-top: -10px;
  }
}

.facts-counter-number {
font-family: 'Montserrat', sans-serif;
font-size: 35px;
font-weight: 700;
line-height: 1.3;
text-align: center;
color: #fff;
}

.facts-counter-number.large {
font-size: 50px;
margin-top: -15px;
}

@media only screen and (max-width: 768px) {
  .facts-counter-number.large {
    font-size: 35px;
	margin-top: 0;
  }
}

.facts-counter-description {
color: #fff;
text-align: center;
text-transform: uppercase;
}

.facts-counter-description h5{
  font-size: 20px;
}

@media only screen and (max-width: 768px) {
  .facts-counter-description.facts-counter-description-primary {
    margin-bottom: 55px;
  }
}

.facts-counter-description-img {
display: block;
font-size: 25px;
text-align: center;
color: #fff;
margin: 22px 0 23px 0;
}

@media only screen and (max-width: 768px) {
  .facts-counter-description-img {
    font-size: 20px;
	margin: 20px 0 10px 0;
  }
}

.facts-counter-description-img.large {
font-size: 40px;
margin: 15px 0 23px 0;
}

@media only screen and (max-width: 768px) {
  .facts-counter-description-img.large {
    font-size: 20px;
	margin: 20px 0 10px 0;
  }
}

.facts-counter-title {
font-size: 15px;
letter-spacing: 0.05em;
line-height: 1;
margin-top: 10px;
}

.facts-counter-title.large {
font-size: 12px;
}

@media only screen and (max-width: 768px) {
  .facts-counter-title {
    font-size: 12px;
  }
  .facts-counter-title.large {
    font-size: 10px;
  }
}

/* 17.2. facts parallax */
.parallax-overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #afd0ef57;
z-index: 0;
}

.parallax {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
padding: 147px 0 141px 0;
}

@media only screen and (max-width: 768px) {
  .parallax {
    padding: 97px 0 91px 0;
  }
}

.parallax-facts {
position: relative;
background-repeat: no-repeat;
background-position: center center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
border: none;
z-index: 1;
}

@media only screen and (max-width: 768px) {
  .parallax-facts {
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
}

/* 19. footer */
#footer {
position: relative;
height: 50%;
min-height: inherit;
overflow: hidden;
margin-left: 50px;
margin-right: 50px;
background: none;
}

@media only screen and (max-width: 768px) {
  #footer {
    height: auto;
	margin-left: 0;
    margin-right: 0;
  }
}

/* 19.1. footer logo */
.footer-credits-logo {
margin: 0 auto 60px auto;
}

.footer-credits-logo img {
width: auto;
height: auto;
}

/* 20. preloader */
.preloader-bg {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader {
position: fixed;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader-status {
display: table-cell;
vertical-align: middle;
}

.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

.loader {
position: relative;
width: 45px;
height: 45px;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
   -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
     -o-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(0, 0, 0, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.loader span {
position: absolute;
width: 45px;
height: 45px;
top: -3px;
left: -3px;
border: 3px solid transparent;
border-top: 3px solid rgba(0, 0, 0, .75);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 22. divider */
.dividerOT.out-top,
.dividerOT.out-bottom,
.dividerOT.dividerOT-inner,
.dividerOT.dividerOT-inner-1,
.before-img {
position: relative;
width: 100%;
margin: 0 auto;
background: none;
}

.dividerOT.out-top,
.dividerOT.out-bottom,
.before-img {
height: 70px;
}

.dividerOT.dividerOT-inner,
.dividerOT.dividerOT-inner-1 {
height: 50px;
}

@media only screen and (min-width: 769px) {
  .dividerOT.dividerOT-inner-women{
    height: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .dividerOT.out-top,
  .dividerOT.out-bottom {
    height: 50px;
  }
  .dividerOT.dividerOT-inner {
    height: 30px;
  }
  .before-img,.dividerOT.dividerOT-inner-1{
    height: 0px;
  }
}

.dividerOT.dividerOT-inner {
background: none;
}

/* 26. to top arrow */
.to-top-arrow {
position: fixed;
right: 25px;
bottom: -10px;
width: 50px;
height: 50px;
line-height: 47px;
cursor: pointer;
font-size: 20px;
text-align: center;
color: #fff;
background: #1f232a;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
-webkit-transform: translateY(40px);
   -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
     -o-transform: translateY(40px);
        transform: translateY(40px);
-webkit-transition: all .7s;
   -moz-transition: all .7s;
    -ms-transition: all .7s;
     -o-transition: all .7s;
        transition: all .7s;
z-index: 105;
}

.to-top-arrow {
display: block;
bottom: 50px;
-webkit-transform: translateY(-20px);
   -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
     -o-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media only screen and (max-width: 768px) {
  .to-top-arrow {
    display: none;
  }
}

.to-top-arrow:hover {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* 27. Slick v1.6.0 CUSTOM */
/* 27.1. slick slide */
.slick-slide {
height: 100%;
background: none;
}
		
.slick-slider {
margin-bottom: 0;
margin-top: 0;
cursor: auto;
}

/* 27.2. slick slide flickering FIX */
.slick-track,
.slick-list {
-webkit-perspective: 2000;
        perspective: 2000;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

/* 27.3. slick fullscreen slideshow */
.slick-fullscreen-img-fill {
position: relative;
display: block;
width: 100%;
overflow: hidden;
}

.slick-fullscreen-img-fill img {
position: relative;
display: inline-block;
min-width: 100%;
max-width: none;
min-height: 100%;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill {
height: 100vh;
background: none;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img {
position: relative;
width: auto;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.slick-fullscreen .slick-dots,
.slick-fullscreen-slideshow .slick-dots {
position: absolute;
width: 100%;
height: 5px;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
background: rgba(255, 255, 255, .25);
list-style-type: none;
}

.slick-fullscreen .slick-dots li button,
.slick-fullscreen-slideshow .slick-dots li button {
display: none;
}

.slick-fullscreen .slick-dots li,
.slick-fullscreen-slideshow .slick-dots li {
position: absolute;
float: left;
width: 0;
height: 5px;
left: -5px;
background: #fff;
}

.slick-fullscreen .slick-dots li.slick-active,
.slick-fullscreen-slideshow .slick-dots li.slick-active {
width: 100%;
-webkit-animation: progressDots 4s both;
   -moz-animation: progressDots 4s both;
    -ms-animation: progressDots 4s both;
     -o-animation: progressDots 4s both;
        animation: progressDots 4s both;
}

@-webkit-keyframes progressDots {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes progressDots {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.slick-fullscreen,
.slick-fullscreen-slideshow {
background: none;
}

.slick-fullscreen .slick-slide,
.slick-fullscreen-slideshow .slick-slide {
display: none;
float: left;
height: 100%;
}

.slick-initialized .slick-slide {
display: block;
}


/* 27.4. slick navigation */
.slick-prev:before,
.slick-next:before {
font-size: 15px;
color: #111;
}

/* 29. elements home call */
/* 29.1. main navigation logo home call */
.logo {
margin: 15px 0 15px 28px
}

.logo.logo-home-call {
  margin: 12px 0 0 6px;
  }

@media only screen and (max-width: 768px) {
  .logo, .logo-home-call {
    margin: 15px 0px 15px 8px;
  }

  .logo.logo-home-call {
    margin: 3px 0px 13px 6px;
  }
}

/* 29.3. home credits home call */
.bottom-credits {
left: 40px;
bottom: 16px;
}

@media only screen and (max-width: 995px) {
  .bottom-credits {
    left: 20px;
    bottom: -14px;
  }
}

.bottom-credits.bottom-credits-home-call {
left: 20px;
bottom: -14px;
}

/* 35. divider */
.inner-divider-large,
.inner-divider,
.inner-divider-half {
position: relative;
width: 100%;
margin: 0 auto;
background: none;
z-index: -1;
}

.inner-divider-large {
height: 130px;
}

@media all and (min-width: 1920px) {
  .inner-divider-large {
	height: 150px;
  }
}

@media only screen and (max-width: 995px) {
  .inner-divider-large {
    height: 100px;
  }
}

.inner-divider {
height: 50px;
}

@media all and (min-width: 1920px) {
  .inner-divider {
	height: 75px;
  }
}

.inner-divider-half {
height: 25px;
}

a.btn-cast i.fa,a.btn-cast i.fab {
  font-size: 1.8rem;
  margin-right: 1rem;
}

@media only screen and (min-width: 769px) {
  .btn-txt{
    font-size: 15px;
  }
}

.btn,
a.btn,
button.btn {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 1.2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #1c2042;
}

.btn-flat{
  overflow: hidden;
  /* padding: 1.5rem 6rem; */
  color: #fff;
  border-radius: 0;
  /* background: #AFD0EF; */
  /* box-shadow: 1px 1px 4px 1px #cacaca; */
  z-index: 2;
}

.btn-flat_1{
  margin-top: 20px;
}

.btn-txt{
  margin-top: 15px;
}

#section10 .btn{
  border-radius: 2rem;
  color: #fff;
  background: #1c2042;
}

a.btn-c {
  font-size: 1.2rem;
  position: relative;
  padding: 20px 0;
  color: #fff;
  background: #AFD0EF;
  width: 100%;
  border:none;
  border-radius: 0;
}

a.btn-c:hover{
  color: #fff;
}

a.btn-c span {
  display: inline-block;
  font-size: 1.2rem;
  /* position: absolute; */
  /* top: 12px; */
  /* left: calc(50% - 150px); */
  width: 320px;
  padding: 0.1rem 0;
  color: #739dc3;
  border: 2px solid #7daedc;
  border-radius: 100vh;
  background: #fff;
  -webkit-box-shadow: 1px 3px 5px 1px rgb(0 0 0 / 20%);
  box-shadow: 1px 3px 5px 1px rgb(0 0 0 / 20%);
}

/* a.btn-c span:before,
a.btn-c span:after {
  position: absolute;
  left: calc(50% - 10px);
  content: "";
}

a.btn-c span:before {
  bottom: -10px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #739dc3 transparent transparent transparent;
}

a.btn-c span:after {
  bottom: -7px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
} */

.cast{
  float: right;
}

.cast a{
  font-size: 16px;
  position: relative;
  padding: 0.6rem 1.5rem;
  border-radius: 100vh;
  color: #f5f5f5
}

.cast a:focus, .cast a:hover{
  color: #f5f5f5
}

@media only screen and (max-width: 768px) {
  .cast a{
    padding: 0.5rem 1.0rem;
  }
}

/*メニューをページ下部に固定*/
#sp-fixed-menu{
  position: fixed;
  width: 100%;
  bottom: 0px;
  font-size: 0;
  opacity: 1;
  z-index: 200;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
  display: flex;
  list-style: none;
  padding:0;
  margin:0;
  width:100%;
}

#sp-fixed-menu li{
  justify-content: center;
  align-items: center;
  width: 100%;
  padding:0;
  margin:0;
  font-size: 13px;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
  text-align: center;
  display:block;
  width: 100%;
  padding:20px;
}

.line,.email,.facebook{
  background-color: #fff;
}

.line,.email{
  border-right: 1px solid rgb(177, 177, 177);
}

.line a{
  color: #08B804;
}

.email a{
  color: #000000;
}

.facebook a{
  color: #1B77F2;
}

.fab,.fas{
  font-size: 17px;
}

.logo-prego{
  padding: 0;
}

.logo-prego img{
  width: 120px;
}

.navbar{
  padding: 0 10px;
}

@media only screen and (max-width: 768px) {
  .logo-prego img{
    width: 100px;
  }

  .navbar{
    padding: 0;
  }

  .navbar-header{
    float: left;
    height: 50px;
  }
}

.for-sp{
    display:none;
}

.brush-dec, .brush-dec2 {
	position:absolute;
	left:0;
	z-index:20;
	height:40px;
	width:100%;
	z-index:20;
	background-size: cover;
	background-attachment: scroll;
	background-position: center;
	background-repeat: repeat;
	background-origin: content-box;
}
.brush-dec {
	margin: -36px 0 0 0;
	background:url(../img/brush-dec.png);
}
.brush-dec2 {
	height:30px;
	background:url(../img/brush-dec_2.png);
  margin: -2px 0;
  background-size: cover;
}
.brush-dec2.brush-dec_bottom {
	top:100%;
	margin-top:-2px;
}
.row_kerri{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content: center;
  -ms-justify-content: center;
}
.row_kerri >div{
  text-align: left;
}
.services-boxes {
  /* height: 180px; */
  display: table;
  width: 100%;
}
.services-boxes-shadow {
  box-shadow: 1px 1px 4px 1px #b9b9b98f;
}
@media (min-width: 769px){
  .services-boxes {
    display: block;
  }
}
.text-middle{
  /* display: table-cell; */
  vertical-align: middle;
  /* padding-top: 1rem; */
}
.mb-0{
  font-weight: bold;
}
.p-1 {
  padding: 0.4rem!important;
}
.p-4 {
  padding: 1.5rem!important;
}
.mt-4, .mt-4-card {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px){
  .mt-4-card {
    margin: 0;
  }
}
.col-lg-4,.flex-row{
  width: 100%;
}
@media (min-width: 769px){
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
.section-heading-border {
  height: 2px;
  width: 100px;
  margin: 0 auto;
  background: #444c64;
  margin-top: 30px;
}
.services-title-border {
  height: 2px;
  width: 40px;
  margin: 10px auto;
}
.footer {
  padding: 25px 0 10px 0px;
}
@media only screen and (min-width: 769px) {
  .footer {
    padding: 35px 0 5px;
  }  
}

footer .text-center{
  margin-top: 10px;
}

.explain-txt{
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 3px;
}

@media only screen and (max-width: 768px) {
  .explain-txt{
    font-size: 14px;
  }
}

#section1 .explain-txt{
  width: 560px;
}

@media only screen and (max-width: 768px) {
  #section1 .explain-txt{
    max-width: 420px;
    width: 100%;
  }
}

.explain-title{
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 3px;
}

@media only screen and (max-width: 768px) {
  .explain-title{
    font-size: 16px;
  }
}

.unit{
  font-size: 30px;
  color: #111;
  margin: 15px 0 0 0;
  font-weight: 600;
}

@media only screen and (max-width: 995px) {
  .unit {
    font-size: 25px;
  }
}

.slick, .slick-explain{
	width: 100%;
}

.slick-explain p{
	padding-bottom: 30px;
}

.slick img, .slick-explain img{
	display: block;
  width: 100%;
  /* box-shadow: 5px 5px 7px 1px rgb(49 49 49 / 44%); */
}
.slick img{
  /* border-radius: 9%; */
  width: 40%;
  margin: 0 auto;
}

.slick p{
  text-align: left;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
}

.slick .text{
  color: #fff;
  margin: 30px 0 0 0;
  font-size: 20px;
}

@media only screen and (max-width: 768px) {
  .slick img{
    width: 55%;
  }

  .slick p{
    font-size: 16px;
  }
  
  .slick .text{
    font-size: 15px;
  }
}

.subtitle{
  font-size: 25px;
  margin-top: 20px;
}

@media only screen and (max-width: 768px) {
  .subtitle{
    font-size: 18px;
    margin-top: 15px;
  }
}

@media only screen and (max-width: 991px) {
  .flexbox{
    display: flex;
    flex-direction: column;
  }

  .item1{
    order: 1;
  }

  .item2{
    order: 0;
  }
}

.fullwide_pic{
  width: 100%;
  height: auto;
}

.footer_pic{
  margin-bottom: -7px;
  width: 120px;
  height: auto;
}

.number{
  display: inline-block;
  top: 18px;
  position: relative;
  font-size: 25px;
  left: 30px;
  font-style: italic;
  z-index: 10;
  background: #fff;
  color: #2d2d2d;
  opacity: 1;
  overflow: hidden;
  padding: 0 5px 0 0px;
}

.bg{
  position: relative;
}

.bg img{
  width: 100%;
  background: #aed0ef;

  clip-path: inset(0 100% 0 0);
  transition: 1.0s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}

.bg h5{
  position: absolute;
  top: 50%;
  width: 100%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  color: #131313
}

.bg.is-animated_1 img {
  clip-path: inset(0);
}

@media only screen and (max-width: 991px) {
  .stroke{
    height: unset;
  }
  .bg img{
    height: 55px;
  }
}

.img-flex{
  display: flex;
}

.img-flex .flex_item{
  width: 50%;
  height: auto;
  padding: 0 10px;
}

.img-flex .flex_item img{
  width: 100%;
  height: 100%;
  box-shadow: 5px 5px 7px 1px rgb(49 49 49 / 44%);
}

.prego-safe{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 1rem;
}

@media only screen and (min-width: 769px) {
  .prego-safe{
    padding-bottom: 3rem;
  }
}

#section8 .prego-safe img{
  width: 60px;
}

#section9 .prego-safe img{
  width: 75px;
}

#section8 .prego-safe p{
  width: 330px;
  margin-left: 10px;
}

@media only screen and (max-width: 768px) {
  #section8 .prego-safe p{
    width: 250px;
  }
}

#section8 .prego-safe .flex-cast p{
  width: 100%;
  margin-left: 0;
}

#section8 .prego-safe .flex-cast h5{
  margin-bottom: 15px;
}

#section9 .prego-safe p{
  width: 645px;
  margin-left: 20px;
}

@media only screen and (max-width: 768px) {
  #section9 .prego-safe p{
    width: 70%;
  }
}

.golf_cup{
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  right: -110px;
  top: -10px;
}

.card{
  padding: 15px 15px;
  z-index: 2;
}

.card_img{
  width: 100%;
  /* position: absolute; */
  text-align: center;
}

.card_img img{
  width: 60px;
  position: relative;
  /* top: -7px; */
  /* left: -15px; */
  z-index: 100;
}

#section10{
  background-color: #e4e4e4;
}

.triangle_1{
  position: absolute;
  height: 200px;
  left: 0;
  margin-top: 0px;
  z-index: 1;
}

@media only screen and (max-width: 768px) {
  .triangle_1{
    margin-top: 0;
  }
}

.triangle_2{
  position: absolute;
  height: 200px;
  right: 0;
  margin-top: -125px;
  z-index: 1;
}

.triangle_3{
  position: absolute;
  height: 200px;
  right: 0;
  margin-top: -175px;
  z-index: 1;
}

.flex-cast{
  margin-left: 10px;
  width: 80%;
}

#section8 .flex-row > div{
  /* width: 50%; */
  margin: 0 auto;
}

@media only screen and (max-width: 599px) {
  #section8 .flex-row > div{
    width: auto;
    margin: 0 40px;
  }
}

.table-container {
  padding: 0 40px 70px;
}

@media only screen and (max-width: 768px) {
  .table-container {
    padding: 0 40px 50px;
  }
}

.table-container div{
  font-size: 35px;
}

@media only screen and (max-width: 768px) {
  .table-container div{
    font-size: 20px;
  }
}

.table-container tr{
  text-align: left;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 1px;
  border-bottom: 1px solid #44486457;
}

@media only screen and (max-width: 768px) {
  .table-container tr{
    font-size: 14px;
  }
}

.table-container th{
  width: 30%;
  padding: 15px;
}

.table-container td{
  width: 70%;
  padding: 15px;
}

@media only screen and (max-width: 768px) {
  .table-container th,.table-container td{
    padding: 15px 5px;
  }
}

.for-sp-btn{
  display: none;
}

@media only screen and (max-width: 768px) {
  .for-sp-btn{
    display: block;
  }
}

.footerFixed{
  min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
  position: relative;/* ←相対位置 */
  padding-bottom: 205px; /* ←フッターの高さを指定 */
  box-sizing: border-box;
  /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}

.footer-info{
  position: absolute;/* ←絶対位置 */
  bottom: 0;
  width: 100%;
}

@media only screen and (min-width: 769px) {
  .footer-info{
    padding: 0 0 5px 0;
  }
}

.privacy{
  text-align: left;
}

.privacy h3{
  text-align: center;
  font-size: 35px;
}

@media only screen and (max-width: 768px) {
  .privacy h3{
    font-size: 20px;
  }
}

.privacy h4{
  border-bottom: 1px solid #44496470;
  margin-bottom: 15px;
  font-size: 15px;
}

.over-20{
  color: #444864e8;
  margin-top: 15px;
  font-size: 15px;
}

@media only screen and (max-width: 768px) {
  .over-20{
    font-size: 12px;
  }
}

.top-title{
  margin: 30px 0;
}

@media only screen and (max-width: 768px) {
  .top-title{
    margin: 0;
    top: -30px;
  }
}

.btn-women{
  background-image: radial-gradient(circle at 100% 0%, rgb(255, 130, 205), rgb(255, 199, 153));
  color: #ffffff;
  border: 0;
}

.btn-women:active{
  background-image: radial-gradient(circle at 100% 0%, rgb(255, 130, 205), rgb(255, 199, 153));
}

.btn-men{
  background-image: radial-gradient(circle at 100% 0%, rgb(15, 4, 183), rgb(100, 213, 255));
  color: #ffffff;
  border: 0;
}

.btn-men:active{
  background-image: radial-gradient(circle at 100% 0%, rgb(15, 4, 183), rgb(100, 213, 255));
}

.btn-flex{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.btn-register,.btn-login{
  width: 60%;
  border-radius: 40px;
}

@media only screen and (max-width: 768px) {
  .btn-register,.btn-login{
    width: 80%;
  }
}

.btn-register{
  margin: 0 0 10px;
  background-image: radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 1), rgba(115, 255, 67, 1));
  color: #ffffff;
  border: 0;
}

.btn-register:active{
  background-image: radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 1), rgba(115, 255, 67, 1));
}

.btn-login{
  background: linear-gradient(45deg,rgba(115, 255, 67, 1),rgba(0, 212, 255, 1));
  padding: 1px;
}

.btn-login:active{
  background-image: radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 1), rgba(115, 255, 67, 1));
}

.child-login{
  background-color: #fff;
  border-radius: 40px;
  display: block;
  padding: 0.88rem 1.2rem;
}

.child-login span{
  background: -webkit-linear-gradient(0deg, rgba(115, 255, 67, 1),rgba(0, 212, 255, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.privacy-link{
  display: flex;
  justify-content: center;
}

.privacy-link a{
  color: rgb(134, 31, 31);
  text-decoration: underline;
  display: block;
}

.slick-section{
  background-image: url(../img/slick-bg.png);
  padding: 40px 0 10px 0;
  background-size: cover;
  margin-bottom: -20px;
  background-position: center;
}

.slick-section-men{
  margin-bottom: -30px;
}

.slick-section .section-title{
  color: #fff;
}

.slick-area{
  padding-bottom: 40px;
}

.slick-women{
  margin-bottom: 20px;
}

.slick-men{
  margin-bottom: 30px;
}

.safety_pic{
  width: 50%;
  height: auto;
}

@media only screen and (max-width: 768px) {
  .safety_pic{
    width: 85%;
  }
  .slick-men{
    margin-bottom: 0;
  }
}

.anime,.price{
  padding: 50px 0;
}

.anime_men{
  background: #c9edff;
  padding: 70px 0 50px;
}

.anime_women{
  background: #ffe2fb;
}

.anime .fullwide_pic,.price .fullwide_pic{
  width: 65%;
  height: auto;
  vertical-align: bottom;
}

@media only screen and (max-width: 768px) {
  .anime{
    padding: 25px 0 0 0;
    background: none;
  }

  /* .anime_men{
    padding: 25px 0 0 0;
  } */

  .price{
    padding: 25px 0;
    background: none;
  }

  .anime .fullwide_pic,.price .fullwide_pic{
    width: 100%;
  }
}