@charset "UTF-8";
/* CSS Document */

body {overflow: auto; font-size: 15px;color: #1a1a1a; font-weight: 300;}
a {color: #e4094c;}
p {line-height: 2rem;}

h1, h2, h3, h4, h5, h6 {color: #e4094c; font-weight: 300; margin-top: 0; margin: 0.3rem 0; }

h1 {font-size: 90px;}
h2 {font-size: 60px;}
h3 {font-size: 45px;}
h4 {font-size: 30px;}
h5 {font-size: 24px;}
h6 {font-size: 18px;}

button.action {color: #e4094c;}

.bg-rosso {background:#e4094c; position: relative; z-index:-2;}
.txt-rosso {color: #e4094c;}
.txt-bianco {color:#fff;}
.txt-giallo {color:#ffff00;}
.mw800 {width: 100%; max-width: 800px; padding: 0 15px; margin: 0 auto;}
.mw900 {width: 100%; max-width: 900px; padding: 0 15px; margin: 0 auto;}
.mw1400 {width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}
.mw500-m-left {width: 100%; max-width: 500px; margin: 0; position: relative;}
.fs13 {font-size: 13px;}


#logo-header {position: fixed; top: 0px; left:0px; width: 100%;z-index: 199; background: #fff}
#logo-header img { width: 150px; margin: 30px;}

.separator100 {display: block; clear: both; width: 100%; height: 100px;}
.separator50 {display: block; clear: both; width: 100%; height: 50px;}
.separator30 {display: block; clear: both; width: 100%; height: 30px;}

.bold-barrato {font-weight: bold; text-transform: uppercase; position: relative;}
.bold-barrato:before {content:""; height: 16px; width: 110%; position: absolute; top: 50%; left:-5%; margin-top:-4px; background: #ffff00;z-index: -1}

.txt-bianco .bold-barrato {color: #3a183c}

.citazione { font-size: 40px; font-weight: 300; color: #e4094c; position: relative;}
.citazione::before {content:""; width: 200px; height: 200px; position: absolute; top:-100px; left:-100px; background: url(https://strikelab.it/gestione/img/img-sito/virgoletta-sx.svg); z-index: -2;}




.lk-pulsante {width:120px; position: relative; padding: 14px; text-transform: uppercase; background:#e4094c; color: #fff; text-decoration: none; display: block; font-size: 15px; text-align:center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; 
}
.lk-pulsante:before {content: '['; left:0;}
.lk-pulsante:after {content: ']'; right:0; text-align:right;}
.lk-pulsante:before, .lk-pulsante:after { width: 22px; height: 22px; line-height:22px; font-size:22px; display: block; position: absolute; top:50%; color:#ffff00; margin-top:-10px; opacity:0; font-weight:bold;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.lk-pulsante:hover {color:#ffff00 ; text-decoration: none; }
.lk-pulsante:hover:before {left: 7px; opacity:1; }
.lk-pulsante:hover:after {right: 7px; opacity:1; }
#filtro-portfolio {display: block; padding: 30px; margin-top: 90px;}
#filtro-portfolio button {border: none; background: #fff; font-size: 14px; text-transform: uppercase;}
#filtro-portfolio button.is-checked {color: #e4094c;}


/*menu*/
.label--vert-mirror {color: #fff;  font-weight: 300;}
.label--bottomright {color: #fff; text-transform: uppercase; font-weight: 300;}
.label--bottomright img {-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);}
.sidemenu h3 {font-size: 21px; font-weight: 300; color: #fff;}
.menu__item--5 img {display: block;max-width: 100%; width:100%; padding: 30px; box-sizing: border-box;}
.menu__item--4 p.label {color: #ff0; font-weight: 300;}
.menu__item--4 a { color: #fff; }
.menu__item--4 a:hover, .menu__item--4:hover a { text-decoration:none; color: #1a1a1a; }
.menu__item--4:hover p { color: #1a1a1a; }
.menu__item--4 .menu__item-inner{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;}
.menu__item--4 .menu__item-inner:hover {background: #ffff00;}
a.sidemenu__item:hover {color: #ffff00; text-decoration: none;}
.menu__item--2 a:hover {text-decoration: none;}


.paren-q {position: relative}
.paren-q::before {content:"["; position: absolute; top:0; left:-70px;opacity: 0;}
.paren-q::after {content:"]"; position: absolute; top:0; right:-70px;opacity: 0;}

.paren-q::before, .paren-q::after {-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;}

.mainmenu a.mainmenu__item:hover .paren-q::before { left:-50px;opacity: 1;}
.mainmenu a.mainmenu__item:hover .paren-q::after { right:-50px;opacity: 1;}




/*home*/
.video-bg-home { position: relative; background-color: black; height: 75vh; min-height: 25rem; width: 100%; overflow: hidden;}
.video-bg-home video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:0;-ms-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.video-bg-home  .container-video{position:relative;z-index:2}
.video-bg-home  .overlay{position:absolute;top:0;left:0;height:100%;width:100%;background-color:#FFFF00;opacity:.5;z-index:1}
@media (pointer: coarse) and (hover: none) {
.video-bg-home {background:url(https://strikelab.it/gestione/img/img-sito/bg-video-index.jpg) #000 no-repeat center center scroll}
.video-bg-home  video{display:none}
}




/*portfolio*/

#griglia-portfolio .element-item {width: 33.3333%; padding: 30px;}
#griglia-portfolio .grid-item {width: 33.3333%; padding: 30px;}
#griglia-portfolio img {width: 100%; max-width: 100%; display: block;}
.info-lst-portfolio {border: 1px solid #e4094c; margin-top: 30px; padding: 15px; position: relative;}
.cliente-lst {color: #3a183c; font-size: 15px; font-weight: bold; text-transform: uppercase; margin: 0;}
.categ-lst {color: #e4094c; font-size: 12px; margin:0;}

/* Portfolio meta */
.meta-portfolio{position:relative; margin:/*15px*/ 0 0;padding:15px; border: 1px solid #e4094c; background: #fff; text-align:left}
.meta-cat-portfolio{font-size: 12px;display:block;color:#e4094c; margin: 0;}
.meta-nome-portfolio{font-size:15px; color:#33183e; text-transform: uppercase; margin: 0; font-weight: bold; }

.lk-lst-portfolio {position: absolute; top: 0; right:0; width:120px; padding: 14px; text-transform: uppercase; background:#e4094c; color: #fff; text-decoration: none; height: 100%; display: block; font-size: 15px; text-align:center; line-height: 38px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; 
}
.lk-lst-portfolio:before {content: '['; left:0;}
.lk-lst-portfolio:after {content: ']'; right:0; text-align:right;}

.lk-lst-portfolio:before, .lk-lst-portfolio:after { width: 22px; height: 22px; line-height:22px; font-size:22px; display: block; position: absolute; top:50%; color:#ffff00; margin-top:-10px; opacity:0; font-weight:bold;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }

.lk-lst-portfolio:hover {color:#ffff00 ; text-decoration: none; }
.lk-lst-portfolio:hover:before {left: 7px; opacity:1; }
.lk-lst-portfolio:hover:after {right: 7px; opacity:1; }


/*.lk-lst-portfolio:before {content: ''; width: 46px; height: 7px; background: url(../img/freccia.svg) 0 0; display: block; 
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.lk-lst-portfolio:hover {color:#3a183c ; text-decoration: none; }
.lk-lst-portfolio:hover:before {margin-left: 7px; }*/
#filtro-portfolio {display: block; padding: 30px; margin-top: 90px;}
#filtro-portfolio button {border: none; background: #fff; font-size: 14px; text-transform: uppercase;}
#filtro-portfolio button.is-checked {color: #e4094c;}






/*about*/

.header-about {background: url(https://strikelab.it/gestione/img/img-sito/header-about.jpg) center center no-repeat; height: 70vh; min-height: 500px; position: relative;}
.txt-header {color: #fff;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.header-about h1 {font-size:140px; font-weight: bold; margin:0; color: #fff}
.header-about h2 {font-size:21px; color: #fff;}
.intro-about h1 {font-size: 90px; font-weight: 300; text-transform: uppercase; }

.video-bg { position: relative; background-color: black; height: 75vh; min-height: 25rem; width: 100%; overflow: hidden;}
.video-bg video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:0;-ms-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.video-bg  .container-video{position:relative;z-index:2}
.video-bg  .overlay{position:absolute;top:0;left:0;height:100%;width:100%;background-color:#FFFF00;opacity:.5;z-index:1}
@media (pointer: coarse) and (hover: none) {
.video-bg {background:url(https://strikelab.it/gestione/img/img-sito/bg-video-about.jpg) #000 no-repeat center center scroll}
.video-bg  video{display:none}
}

.hashtag { color: #e4094c}
.etichetta-piccola {text-transform: uppercase; background: #e4094c; color: #ffff00; padding: 0 6px; letter-spacing: 3px; }
.blocco-perche h3 {text-transform: uppercase; font-size:30px; }

.intro-about {position:relative;}
.deco-cerchi-about {position: absolute; max-width:350px; top:-175px; left:-175px; z-index: -2;}



/*servizi*/
.serv-grafica {padding: 90px 0; background:url(https://strikelab.it/gestione/img/img-sito/bg-grafica.png) center center no-repeat;}
.serv-siti {padding: 90px 0; background:url(https://strikelab.it/gestione/img/img-sito/bg-web.png) center center no-repeat;}
.serv-stampa {padding: 90px 0; background:url(https://strikelab.it/gestione/img/img-sito/bg-stampa.png) center center no-repeat;}

.serv-siti img {margin-top:-130px;}
.serv-stampa img {margin-top:-190px;}



/*footer*/

#footer { background: #3a183c; color: #fff; padding-top:15px; padding-bottom: 15px; }
#footer p { line-height: normal; }
#footer a { color: #fff; border-bottom: 1px solid #e4094c; }
#footer a:hover { color: #e4094c; text-decoration: none; }
.logo-footer {width: 100px;}
#footer .box-footer .bordo-footer {border-top: 1px solid #e4094c; border-bottom: 3px solid #e4094c; width: 100%; max-width: 220px;}
#footer .box-footer ul.nav-footer { list-style-type: none; margin: 0; padding:0;}
#footer .box-footer ul.nav-footer li { padding: 12px 0; text-transform: uppercase; }
.footer-pos-bott {position: absolute; bottom:0;}
.social-footer {width: 24px; display: inline-block;}
.portfolio-footer {padding:0; margin:0; list-style-type: none;}
#footer a.social-footer {text-decoration: none; border-bottom: none;}
.footer-bottom {padding-top: 15px; font-size: 12px;}

.box-footer-2 .bordo-footer, .box-footer-3 .bordo-footer, .box-footer-4 .bordo-footer {padding-top: 12px;}

#torna-su {position: absolute; bottom:81px; left:-100px; text-transform: uppercase; font-size: 13px; letter-spacing: 4px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
} 
#torna-su img {width: 46px;}


/*form*/
#form-strike .form-control {
    color: #ffffff;
    background-color: #ee1147;
    border: none;
    border-bottom: 2px solid #fff;
    border-radius: 0;
}

#form-strike .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #fff;}
#form-strike .form-control::-moz-placeholder { /* Firefox 19+ */color: #fff;}
#form-strike .form-control:-ms-input-placeholder { /* IE 10+ */color: #fff;}
#form-strike .form-control:-moz-placeholder { /* Firefox 18- */color: #fff;}

#form-strike .form-group label {text-transform: uppercase; font-size: 10px; letter-spacing: 3px; color: #ffff00;}
#form-strike button[type=submit] {padding: 9px 18px; font-weight: 300; color: #e4094c; background-color: #ffff00; text-transform: uppercase;letter-spacing: 3px; outline: none; border: none; margin-top: 30px;}
#form-strike .checkbox {color: #fff;}
#form-strike .checkbox input[name=privacy] {padding:50px; margin-right: 15px;}

@media screen and (max-width: 768px) {
h1 {font-size: 45px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 21px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
	
.header-about h1 {font-size:60px;}
.header-about h2 {font-size:18px;}
.intro-about h1 {font-size: 45px;}

.footer-pos-bott {position: relative;}
	
}


@media screen and (max-width: 575px) {
.serv-siti img {margin-top:30px;}
.serv-stampa img {margin-top:-120px;}

}