@import url('http://fonts.cdnfonts.com/css/sf-ui-display');

:root{ 

    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'SF UI Display', sans-serif;

    /* cores padrões */
    --color-primary: #23A1DB;
    --color-secondary: #0F2030;
    --color-tertiary: #23A1DB;
    --color-text: #0F2030;
    --color-back: #FFF;
    --color-dark: #0F2030;
    --color-light: #EFF3F5;

    /* botões */
    --btn-back: #0F2030;
    --btn-back-hover: #0D1D2B;
    --btn-color: #23A1DB;
    --btn-color-hover: var(--btn-color);

    /* top bar */
    --bar-back: var(--color-secondary);
    --bar-color: rgba(255,255,255,0.6);
    --bar-icon-color: var(--color-primary);
    --bar-icon-redes-color: var(--color-primary);
    --bar-icon-redes-color-hover: var(--color-primary);

    /* top */
    --top-logo-padding: 5px;
    --top-logo-padding-responsive: 5px;
    --top-logo-width-responsive: 160px;
    --top-logo-height-responsive: 60px;
    --top-back: var(--bar-back);    
    --top-nav-back: transparent;
    --top-nav-color: var(--color-primary);    
    --top-nav-hover-back: var(--color-primary);
    --top-nav-hover-color: #FFF;
    --top-drop-back: var(--color-primary);
    --top-drop-color: var(--color-secondary);
    --top-drop-hover-back: rgba(0,0,0,0.05);
    --top-drop-hover-color: var(--color-secondary);

    /* footer */
    --footer-back: var(--color-primary);
    --footer-color: #FFF;
    --footer-copy-back: var(--color-secondary);
    --footer-copy-color: rgba(255,255,255,0.5);
    --footer-icon-color: var(--bar-icon-color);
    --footer-icon-redes-color: var(--bar-icon-redes-color);
    --footer-icon-redes-color-hover: var(--bar-icon-redes-color-hover);

    /* title */
    --title-color: var(--color-secondary);
    --title-line-color: var(--color-primary);
    --title-line-size: 150px;
    --title-post-color: #333;

    --title-internal-color: var(--title-post-color);
    --title-internal-back: var(--color-light);

}

body { font-size: 14px; font-weight: 500; }
header .navbar-nav a { font-weight:600; margin-left:8px; padding:30px 12px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; }

.btn-primary { padding: 15px 50px; font-size: 1.1em; border-radius:30px; font-weight: 700; }
.bg-primary { background: var(--color-primary) !important; }

.bg-dark { color: #FFF; background: var(--color-secondary) url('https://sitescriar.com.br/ivwobkinvr/images/pagina/img_1_foto_1.jpg') top right no-repeat  !important; }
.bg-dark .title { color: #FFF; }
.bg-light { background: var(--color-light) url('https://sitescriar.com.br/ivwobkinvr/images/pagina/img_1_foto_2.jpg') top right no-repeat !important; }
.bg-tertiary { color: #FFF; background: var(--color-tertiary) url('https://sitescriar.com.br/ivwobkinvr/images/pagina/img_1_foto_3.jpg') top right no-repeat !important; }
.bg-tertiary .title { color: #FFF; }
.bg-white { background: #FFF url('https://sitescriar.com.br/ivwobkinvr/images/pagina/img_1_foto_3.jpg') top right no-repeat !important; }

.title { display: inline-flex; line-height: 0.8em; font-weight: 700; text-transform: uppercase; border-left: 7px solid var(--title-line-color); padding: 0 0 0 7px; }
.title-text { font-weight: 300 !important; font-size: 1.4em; }

.box-chamada { font-size: 1.2em; line-height: 1.6em; font-weight:500; }
.box-chamada h2 { font-weight: 700; }
.box-chamada .btn { margin-top: 20px; }

footer .redes { background: var(--btn-back-hover); }
footer .redes a.fab, footer .redes a.far { font-size: 4em; }

.widget-header{background:var(--color-secondary); }

.slider-service img { background: #FFF; margin-top: 5px; padding: 10px; border-radius: 5px; transition:all 0.3s ease 0s; }
.slider-service img:hover {  filter: grayscale(1) contrast(1.2); transform:translateY(-5px); box-shadow: 0px 5px 5px 0 rgba(0,0,0,0.1); }

.slider-blog .bg-white { margin-top: 20px; transition:all 0.3s ease 0s; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.slider-blog .bg-white img { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;  }
.slider-blog .bg-white:hover { transform:translateY(-10px); box-shadow: 0px 5px 5px 0 rgba(0,0,0,0.1); }

.photo { height: 500px; display: flex; width: 100%; padding: 0; box-sizing: border-box;  }
.photo .box { flex: 1; overflow: hidden; transition: .5s; margin: 0; line-height: 0; } 
.photo .box > img { width: 200%; height: 100%; object-fit: cover; transition: .5s; opacity: .8; filter: grayscale(1) contrast(1.2); }
.photo .box:hover { flex: 1 1 50%; }
.photo .box:hover > img { width: 100%; height: 100%; opacity: 1; filter: grayscale(0) contrast(1); }

#service { }
#service .box { text-align: center; border: 1px solid #E0E0E0; transition:all 0.3s ease 0s; position: relative; z-index: 1; height: 100%; }
#service .box a { display: block !important; width: 100%; height: 100%; padding: 50px 10px; }
#service .box:after, #service .box:before { content: ""; position: absolute; top:0; left:0; right: 0; bottom: 0; transition:all 0.5s ease 0s; }
#service .box:after { border-bottom: 1px solid var(--color-primary); border-top: 1px solid var(--color-primary); transform: scaleX(0); transform-origin: 0 100% 0; z-index: -1; }
#service .box:before { border-left: 1px solid var(--color-primary); border-right: 1px solid var(--color-primary); transform: scaleY(0); transform-origin: 100% 0 0; z-index: -1; }
#service .box:hover:after { transform: scaleX(1); }
#service .box:hover:before { transform: scaleY(1); }
#service .box h4 { margin: 40px 0; font-size: 1.4em; }
#service .box p { font-size: 1.4em; padding: 0; margin: 0; }

.gallery-link { padding: 30px; display: grid;  grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; }
.gallery-link a:nth-child(1) { grid-row: 1 / 3; }
.gallery-link a:nth-child(n+6) { display: none; }
.gallery-link a img { height: 100%; border-radius: 10px; transition:all 0.3s ease 0s; }
.gallery-link a:hover img { opacity: .8 }

.btns-galery { margin-bottom: 25px; text-align: left; }
.btns-galery .btn { background: var(--color-primary); font-weight:600; border-radius: 6px; border: 0; padding: 5px 20px; transition:all 0.3s ease 0s; margin-bottom: 5px; }
.btns-galery .btn svg { fill: var(--color-secondary); }
.btns-galery .btn:hover { opacity: 0.8; }

@media (max-width:767.99px){
   .btns-galery { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5px }
   .btns-galery .btn { padding: 5px; }
   
   .gallery-link { padding: 15px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-bottom: 5px; }
   .gallery-link a:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 3;  }
   .gallery-link a:nth-child(n+6) { display: none; }
   
   
}