html{
    scroll-behavior:smooth
}
:root{
    --bg-color1:#060606;
    --bg-color2:#fff;
    --bg-color3:#6d6d6d;
    --bg-color4:#0d0d0d;
    --bg-color5:#bdbfbf;
    
    --title-black:'_metropolis_black_';
    --title-extrabold:'_metropolis_extrabold_';
    --title-bold:'_metropolis_extrabold_';
    --font-regular:'_metropolis_regular_';
    --font-italic:'_metropolis_regular_italic_';
    --font-menu:'_metropolis_light_';
}
HTML BODY h1,.title-black{
    font-family:var(--title-black)!important
}
HTML BODY h2,HTML BODY h3,.title-extrabold{
    font-family:var(--title-extrabold)
}
HTML BODY h4,HTML BODY h6,HTML BODY strong,.title-bold{
    font-family:var(--title-bold)
}
HTML BODY,HTML BODY h5,HTML BODY p{
    font-family:var(--font-regular)
}
HTML BODY em{
    font-family:var(--font-italic)
}
.cta-mobile-font{font-size:100%;}
.metalic-font{
    background: -webkit-linear-gradient(var(--bg-color1), var(--bg-color3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.metalic-bg,.grid figcaption a{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aebcbf+0,6e7774+50,0a0809+100 */
background: #aebcbf; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #aebcbf 0%, #6e7774 50%, #0a0809 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #aebcbf 0%,#6e7774 50%,#0a0809 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #aebcbf 0%,#6e7774 50%,#0a0809 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
HTML BODY{
    max-width:2000px;
    margin:0 auto
}
.navbar-nav a{
    font-family:var(--font-menu)
}
.navbar-nav a{
    letter-spacing:0px
}
HTML BODY p{
    font-size: 108%!important;
}
.top-header,.top-header a,.top-header p,.top-header button{
    font-size:90%!important
}
.middle-header,.middle-header a,.middle-header p{
    font-size:100%!important
}
.bottom-header,.bottom-header a,.bottom-header li a,.bottom-header p{
    font-size:100%!important
}
a{
    text-decoration:none!important
}
.btn{
    text-transform:uppercase
}
.badge{
    white-space:pre-line!important
}
.bg-color1,.bg-color1:hover{
    background:var(--bg-color1)!important
}
.t-color1,.t-color1:hover{
    color:var(--bg-color1)!important
}
.bg-color2,.bg-color2-hover:hover,.bg-color2:hover{
    background:var(--bg-color2)!important
}
.t-color2,.t-color2:hover{
    color:var(--bg-color2)!important
}
.bg-color3,.bg-color3:hover{
    background:var(--bg-color3)!important
}
.t-color3,.t-color3:hover{
    color:var(--bg-color3)!important
}
.bg-color3-hover:hover,.bg-color4,.bg-color4:hover{
    background:var(--bg-color4)!important
}
.t-color4,.t-color4:hover{
    color:var(--bg-color4)!important
}
.bg-color5,.bg-color5:hover{
    background:var(--bg-color5)!important
}
.t-color5,.t-color5:hover{
    color:var(--bg-color5)!important
}
.bg-dark-25{
    background:rgba(0,0,0,.25)
}
.bg-dark-50{
    background:rgba(0,0,0,.5)
}
.bg-dark-75{
    background:rgba(0,0,0,.75)
}
.bg-dark-gradient-50{
    background:linear-gradient(80deg,rgba(0,44,83,.87),#002c53,rgba(0,0,0,0),rgba(0,0,0,0))
}
.bg-img-thank-you-page{
    background:url(../images/elements/slider/1.jpg)
}
.bg-img1{
    background:url(../images/elements/bg/bg_1.jpg)
}
.bg-img2{
    background:url(../images/elements/bg/bg_2.jpg)
}
.bg-img3{
    background:url(../images/elements/bg/bg_3.jpg)
}
.bg-img4{
    background:url(../images/elements/bg/bg_4.jpg)
}
.bg-img5{
    background:url(../images/elements/bg/bg_5.jpg)
}
.bg-imgMobile{
    background:url(../images/elements/slider/bg_imgMobile.jpg)
}
.bg-img{
    background-size:cover
}
.bg-img-100{
    background-size:100%
}
.bg-img-contain{
    background-size:contain
}
.bg-repeat-x{
    background-repeat:repeat-x
}
.bg-repeat-y{
    background-repeat:repeat-y
}
.bg-no-repeat{
    background-repeat:no-repeat
}
.bg-img-fixed{
    background-attachment:fixed
}
.bg-img-top-left{
    background-position:top left
}
.bg-img-top-center{
    background-position:top center
}
.bg-img-top-right{
    background-position:top right
}
.bg-img-center-left{
    background-position:center left
}
.bg-img-center-center{
    background-position:center center
}
.bg-img-center-right{
    background-position:center right
}
.bg-img-right-left{
    background-position:right left
}
.bg-img-right-center{
    background-position:right center
}
.bg-img-right-right{
    background-position:right right
}
.bg-img-bottom-left{
    background-position:bottom left
}
.bg-img-bottom-center{
    background-position:bottom center
}
.bg-img-bottom-right{
    background-position:bottom right
}
.bg-height{
    padding:11% 0
}
.svgPosition{
    line-height:0;
    z-index:-2;
    margin-bottom:-2px;
    margin-left:-1px!important
}
.svgPositionInvert{
    transform:rotateY(-540deg);
    line-height:0;
    z-index:-2;
    margin-bottom:-2px;
    margin-left:-1px!important
}
.t-shadow-50{
    text-shadow:0 0 10px rgba(0,0,0,.5)
}
.t-shadow-100{
    text-shadow:0 0 10px #000
}
i{
    position:relative;
    vertical-align:-5px
}
.fa{
    transform:translateY(-5px)
}
.list-style-none li{
    list-style:none
}
.main-navbar .dropdown,.main-navbar .dropdown:hover,.main-navbar .navbar-nav a,.main-navbar .navbar-nav a:hover,a[data-fancybox=gallery]>img:hover{
    transition:all .3s ease
}
.main-navbar .navbar-nav a:hover{
    color:var(--bg-color3)
}
.dropdown-menu a:hover,.main-navbar .navbar-nav .active a{
    border-bottom:2px solid #fff!important;
    color: #fff!important;
}
.navbar-toggler{
    background:var(--bg-color1)!important
}
.main-navbar .dropdown .active,.main-navbar .dropdown:hover{
    background:var(--bg-color3)!important
}
.main-navbar .dropdown-menu{
    padding:0
}
.main-navbar .dropdown-menu a{
    color:var(--bg-color1);
    background:0 0
}
.main-navbar .dropdown-menu a:hover{
    background:var(--bg-color1)!important;
    background:0 0
}
.main-navbar .dropdown-menu{
    background:var(--bg-color3);
    border-radius:0!important;
    transform:translateY(-2px);
    border:none
}
#indicador-carousel .carousel-caption h5{
    font-size:180%
}
#indicador-carousel .carousel-caption p{
    font-size:130%!important
}
#indicador-carousel .carousel-caption a.btn{
    font-size:90%
}
@media(min-width:300px){
    .image-min{
        width:100%!important
    }
    .negative-margin-top2,.services-home{
        margin-top:-6%!important
    }
    #indicador-carousel .carousel-caption h3{
        font-size:150%!important
    }
    #indicador-carousel .carousel-caption p{
        font-size:93%!important
    }
    .bg-dark-gradient-50{
        background:linear-gradient(80deg,rgba(0,44,83,.97),rgba(0,44,83,.82),rgba(0,44,83,.51),rgba(0,0,0,.3))!important
    }
    .efectMissionIcon{
        margin-left:0!important
    }
    .main-logo{
        position:relative;
        bottom:0;
        z-index:2
    }
    .saw-left:after,.saw-right:after{margin-top:20px;}
}
@media(min-width:540px){
    .carousel-caption{
        bottom:19%!important
    }
    .negative-margin-top2{
        margin-top:5%
    }
    .saw-left:after,.saw-right:after{margin-top:20px;}
}
@media(min-width:768px){
    .efectMissionIcon{
        margin-left:-41px!important
    }
    .saw-left:after,.saw-right:after{margin-top:10px;}
}

@media(min-width:960px){
    .image-min{
        width:70%!important
    }
    .carousel-caption{
        bottom:15%!important
    }
    #indicador-carousel .carousel-caption p{
        font-size:130%!important
    }
    .negative-margin-top2{
        margin-top:-2%
    }
    #indicador-carousel .carousel-caption h3{
        font-size:280%!important
    }
    .bg-dark-gradient-50{
        background:linear-gradient(80deg,rgba(0,44,83,.87),#002c53,rgba(0,0,0,0),rgba(0,0,0,0))!important
    }
    .main-logo{
        position:absolute;
        bottom:-73px;
        z-index:2;
        margin-left:-131px
    }
    .saw-left:after,.saw-right:after{margin-top:10px;}
}
@media(min-width:1140px){
    .image-min{
        width:70%!important
    }
    .carousel-caption{
        bottom:24%!important
    }
    .negative-margin-top2{
        margin-top:-2%
    }
    #indicador-carousel .carousel-caption h3{
        font-size:350%!important
    }
    .saw-left:after,.saw-right:after{margin-top:10px;}
}
a.navbar-brand{
    font-size:130%!important
}
.navbar-toggler{
    margin-bottom:10px
}
.go-up{
    background:url(../../src/images/elements/top.png) #000 center center;
    border-radius:50px;
    opacity:.5;
    cursor:pointer;
    width:40px;
    height:40px;
    position:fixed;
    bottom:67px;
    right:25px;
    display:inline-block!important
}
.go-up:hover{
    opacity:1
}
.hide-top,.hide-top-alt{
    opacity:0!important
}
.icon-align{
    min-width:24px;
    text-align:center;
    position:absolute;
    left:20px;
    margin-top:8px
}
.icon-align-ul li{
    list-style:none
}
.icon-align-ul li{
    list-style:none
}
a[data-fancybox=gallery]>img:hover{
    box-shadow:rgba(0,0,0,.5) 0 0 2px 3px
}
.shake-bottom{
    -webkit-animation:shake-bottom .8s cubic-bezier(.455,.030,.515,.955) 3 both;
    animation:shake-bottom .8s cubic-bezier(.455,.030,.515,.955) 3 both
}
@-webkit-keyframes shake-bottom{
    0%,100%{
        -webkit-transform:rotate(0);
        transform:rotate(0);
        -webkit-transform-origin:50% 100%;
        transform-origin:50% 100%
    }
    10%{
        -webkit-transform:rotate(2deg);
        transform:rotate(2deg)
    }
    20%,40%,60%{
        -webkit-transform:rotate(-4deg);
        transform:rotate(-4deg)
    }
    30%,50%,70%{
        -webkit-transform:rotate(4deg);
        transform:rotate(4deg)
    }
    80%{
        -webkit-transform:rotate(-2deg);
        transform:rotate(-2deg)
    }
    90%{
        -webkit-transform:rotate(2deg);
        transform:rotate(2deg)
    }
}
@keyframes shake-bottom{
    0%,100%{
        -webkit-transform:rotate(0);
        transform:rotate(0);
        -webkit-transform-origin:50% 100%;
        transform-origin:50% 100%
    }
    10%{
        -webkit-transform:rotate(2deg);
        transform:rotate(2deg)
    }
    20%,40%,60%{
        -webkit-transform:rotate(-4deg);
        transform:rotate(-4deg)
    }
    30%,50%,70%{
        -webkit-transform:rotate(4deg);
        transform:rotate(4deg)
    }
    80%{
        -webkit-transform:rotate(-2deg);
        transform:rotate(-2deg)
    }
    90%{
        -webkit-transform:rotate(2deg);
        transform:rotate(2deg)
    }
}
.listNumber{
    border:2px solid var(--bg-color1)!important;
    background:var(--bg-color1);
    border-radius:10px;
    padding:6px 6px;
    margin-right:5px;
    transition:all .5s ease-in-out!important
}
.efectListNumber:hover .listNumber{
    transition:all .5s ease-in-out!important;
    background:var(--bg-color3)!important;
    color:#fff!important;
    border:2px solid var(--bg-color3)!important
}
.boxShadow{
    box-shadow:0 0 2px 0 #000
}
.form-control{
    border:0!important;
    border-radius:0!important;
    border-bottom:1px solid #ccc!important;
    transition:all .5s ease-in-out!important
}
.form-control:hover{
    transition:all .5s ease-in-out!important
}
.input-group-text{
    border:none!important;
    border-bottom:1px solid #ccc!important;
    border-radius:0!important
}
.efect-box,.efectIN{
    transition:all .5s ease-in-out!important
}
.efect-box:hover{
    transform:translate(10px,10px);
    box-shadow:-3px -3px 4px 0 #333131!important;
    transition:all .5s ease-in-out
}
.efectUP{
    transition:transform .3s cubic-bezier(.34,2,.6,1),box-shadow .2s ease
}
.efectUP:hover{
    transform:translateY(-10px);
    -webkit-transform:translateY(-10px);
    -ms-transform:translateY(-10px);
    -moz-transform:translateY(-10px)
}
.efectIN:hover{
    transition:all .5s ease-in-out!important;
    transform:scale(.9);
    -webkit-transform:scale(.9);
    -ms-transform:scale(.9);
    -moz-transform:scale(.9)
}
.efectMissionIcon{
    background:var(--bg-color1);
    width:95px;
    padding:10px;
    margin-left:-41px;
    transition:all .5s ease-in-out!important
}
.efectMission:hover .efectMissionIcon{
    background:var(--bg-color2);
    transition:all .5s ease-in-out!important;
    transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg)
}
.bottom-shadow{
    -webkit-box-shadow:0 10px 17px -6px #001135;
    box-shadow:0 10px 17px -6px #001135
}
.position-img{
    margin-left:-143px!important;
    position:absolute;
    bottom:-43px;
    z-index:2
}
.flip-card{
    background-color:transparent;
    width:300px;
    height:300px;
    perspective:1000px;
    display:inline-block;
    vertical-align:middle
}
.flip-card-inner{
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    transition:transform .6s;
    transform-style:preserve-3d;
    box-shadow:0 4px 8px 0 rgba(0,0,0,.2)
}
.flip-card:hover .flip-card-inner{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg)
}
.flip-card-back,.flip-card-front{
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
.flip-card-front h3{
    color:var(--bg-color3)!important
}
.flip-card-front:hover h3{
    color:#fff!important
}
.flip-card-front p{
    display:none
}
.flip-card-back{
    background-color:var(--bg-color4);
    color:#fff;
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg)
}
.flip-card-back p{
    color:#fff;
    display:block
}
.row-eq-height{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex
}
.header-border:nth-child(2){
    border-left:1px solid var(--bg-color2);
    border-right:1px solid var(--bg-color2)
}
/*.titleTop{
    display:block;
    padding:0 0 30px 0;
    border-bottom:1px solid var(--bg-color1);
    margin:-7px 0 -12px
}*/
.services-home{
    position:relative;
    margin-top:-65px
}
.services-home .service{
    box-shadow:0 0 6px 2px #6d6b6b
}
.services-home .service:hover h5{
    color:var(--bg-color1)
}
.hvr-shutter-in-horizontal{
    display:inline-block;
    vertical-align:middle;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) translateZ(0);
    position:relative;
    background:var(--bg-color3);
    -webkit-transition-property:color;
    transition-property:color;
    -webkit-transition-duration:.3s;
    transition-duration:.3s
}
.hvr-shutter-in-horizontal:before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    -webkit-transform:scaleX(1);
    transform:scaleX(1);
    -webkit-transform-origin:50%;
    transform-origin:50%;
    -webkit-transition-property:transform;
    transition-property:transform;
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
    border-radius:5px
}
.hvr-shutter-in-horizontal:active,.hvr-shutter-in-horizontal:focus,.hvr-shutter-in-horizontal:hover{
    color:#fff
}
.hvr-shutter-in-horizontal:active:before,.hvr-shutter-in-horizontal:focus:before,.hvr-shutter-in-horizontal:hover:before{
    -webkit-transform:scaleX(0);
    transform:scaleX(0)
}
.textureRule{
    position:relative;
    top:0;
    right:0;
    width:100%;
    height:35px;
    background-image:url(../images/elements/rule.png);
    background-repeat:repeat-x;
    animation:slide-2 60s linear infinite;
    -webkit-animation:slide-2 60s linear infinite
}
.textureRule1{
    position:relative;
    top:0;
    right:0;
    width:100%;
    height:35px;
    background-image:url(../images/elements/rule1.png);
    background-repeat:repeat-x;
    animation:slide-2 60s linear infinite;
    -webkit-animation:slide-2 60s linear infinite
}
@keyframes slide-2{
    from{
        background-position:0 0
    }
    to{
        background-position:1920px 0
    }
}
@-webkit-keyframes slide-2{
    from{
        background-position:0 0
    }
    to{
        background-position:1920px 0
    }
}
.animationFloat{
    border-radius:5px;
    -webkit-animation:line 3s ease-in-out infinite;
    animation:line 3s ease-in-out infinite
}
@-webkit-keyframes line{
    from{
        transform:translateY(4px)
    }
    50%{
        transform:translateY(-4px)
    }
    to{
        transform:translateY(4px)
    }
}
@keyframes line{
    from{
        transform:translateY(4px)
    }
    50%{
        transform:translateY(-4px)
    }
    to{
        transform:translateY(4px)
    }
}
a.styleBtn{
    position:relative;
    font-weight:700;
    overflow:hidden;
    color:#fff!important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
    text-decoration:none;
    transition:all ease .5s;
    background:var(--bg-color3)
}
a.styleBtn:after,a.styleBtn:before{
    width:40px;
    height:200px;
    content:'';
    display:block;
    background:rgba(255,255,255,.5);
    transform:rotate(45deg);
    top:-60px;
    position:absolute;
    transition:none;
    right:-45%;
    cursor:pointer
}
a.styleBtn:before{
    left:-48%
}
a.styleBtn:hover{
    text-shadow:0 1px 1px rgba(0,0,0,.5);
    background:var(--bg-color4);
    color:#fff!important
}
a.styleBtn:hover:after,a.styleBtn:hover:before{
    transform:rotate(45deg),scaleX(130%);
    background:rgba(255,255,255,.1);
    transition:all ease .5s
}
a.styleBtn:hover:after{
    right:130%
}
a.styleBtn:hover:before{
    left:130%
}
.btn{
    white-space:nowrap
}
.sliderServices{
    display:flex;
    align-items:center;
    justify-content:center
}
.sliderServices__item{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-basis:25%;
    height:100vh;
    font-size:22px;
    line-height:32px;
    text-shadow:0 0 10px #000;
    transition:all .3s
}
.sliderServices__item:hover{
    flex-basis:50%;
    color:red!important
}
.ServicesMobil a h3,.sliderServices__item a h3{
    color:var(--bg-color3)!important;
    transition:all ease .5s
}
.ServicesMobil:hover a h3,.sliderServices__item:hover a h3{
    color:#fff!important;
    transition:all ease .5s
}
.item-1{
    background:url(../images/services/home1.jpg) center center no-repeat;
    background-size:cover
}
.item-2{
    background:url(../images/services/home2.jpg) center center no-repeat;
    background-size:cover
}
.item-3{
    background:url(../images/services/home3.jpg) center center no-repeat;
    background-size:cover
}
.item-4{
    background:url(../images/services/home4.jpg) center center no-repeat;
    background-size:cover
}
.artist{
    color:#fff;
    text-decoration:none
}
@media only screen and (max-width:1200px) and (min-width:992px){
    .sliderServices__item{
        height:70vh
    }
}
@media only screen and (max-width:991px) and (min-width:200px){
    .ServicesMobil{
        padding:12% 0
    }
}
.styleOpacityImage{
    opacity:1;
    display:block;
    width:100%;
    height:auto;
    transition:.5s ease;
    backface-visibility:hidden
}
.textOpacity{
    transition:.5s ease;
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    text-align:center
}
.containerstyleOpacity:hover .styleOpacityImage{
    opacity:.3
}
.containerstyleOpacity:hover .textOpacity{
    opacity:1
}


.saw-left:after {
    left: 10%;
    right: auto;
    content: '';
    position: absolute;
    border-top: 60px solid;
    border-left: transparent 60px solid;
    border-right: transparent 60px solid;
    z-index: 2;
}
.saw-right:after {
    right: 10%;
    left: auto;
    content: '';
    position: absolute;
    border-top: 60px solid;
    border-left: transparent 60px solid;
    border-right: transparent 60px solid;
    z-index: 2;
}
.saw-color1:after{border-top-color:var(--bg-color1)!important;}
.saw-color2:after{border-top-color:var(--bg-color2)!important;}
.saw-color3:after{border-top-color:var(--bg-color3)!important;}
.saw-color4:after{border-top-color:var(--bg-color4)!important;}
.saw-color5:after{border-top-color:var(--bg-color5)!important;}


/* Icon-Grow Effect */
.nav-link {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .nav-link .fa {
    -webkit-transform: translateZ(0) translateY(-5px);
    transform: translateZ(0) translateY(-5px);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .nav-link:hover .fa, .nav-link:focus .fa, .nav-link:active .fa {
    -webkit-transform: scale(1.2) translateZ(0) translateY(-5px);
    transform: scale(1.2) translateZ(0) translateY(-5px);
  }

/* Pop Efect*/
@-webkit-keyframes btn {
    50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  }
  @keyframes btn {
    50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  }
  .btn {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .btn:hover, .btn:focus, .btn:active {
    -webkit-animation-name: btn;
    animation-name: btn;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }


  .grid {
	padding: 20px 20px 10px 20px;
	max-width: 1300px;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.grid li {
	display: inline-block;
	width: 440px;
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}

.grid figure {
	margin: 0;
	position: relative;

}

.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
	box-shadow: 0 10px 10px 5px gray;

}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: var(--bg-color1);
	color: var(--bg-color2);
}

.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
}

.grid figcaption span:before {
	content: 'by ';
}

.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	color: #fff;
} 
@media screen and (max-width: 31.5em) {
	.grid {
		padding: 10px 10px 100px 10px;
	}
	.grid li {
		width: 100%;
		min-width: 300px;
	}
}
/* Caption Style 4 */
.cs-style-4 li {
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
}

.cs-style-4 figure {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.cs-style-4 figure > div {
	overflow: hidden;
}

.cs-style-4 figure img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
	-webkit-transform: translateX(25%);
	-moz-transform: translateX(25%);
	-ms-transform: translateX(25%);
	transform: translateX(25%);
}

.cs-style-4 figcaption {
	height: 100%;
	width: 50%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}

.cs-style-4 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}