/* @override http://www.directafin.it/wp-content/themes/directafin/style.css?6b2a9a http://www.directafin.it/wp-content/themes/directafin/style.css?ba709a http://www.directafin.it/wp-content/themes/directafin/style.css?ddfa7d */ /* @override http://www.directafin.it/wp-content/themes/directafin/style.css?7e9578 http://www.directafin.it/wp-content/themes/directafin/style.css?238b4e */ /* @override http://www.directafin.it/wp-content/themes/directafin/style.css?f9ef33 */ /* @override http://www.directafin.it/wp-content/themes/directafin/style.css http://www.directafin.it/wp-content/themes/directafin/style.css?6b301e http://www.directafin.it/wp-content/themes/directafin/style.css?f9ef33 */ /* Theme Name: directafin s.p.a. Theme URI: http://www.secretkey.it Description: Template by Secret Key Version: 1.2 Author: Secretkey Author URI: http://www.secretkey.it Tags: HTML5, CSS3, Bootstrap */ /* @group Bootstrap */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#333;text-decoration:none}a:hover,a:focus{color:#333;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:normal;line-height:1;color:#777}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:1.5em}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:800px){.lead{font-size:21px}}small,.small{font-size:85%}mark,.mark{background-color:#fcf8e3;padding:.2em}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#333}a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#333}a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-left:5px;padding-right:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.42857143}dt{font-weight:bold}dd{margin-left:0}@media (min-width:800px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0;text-align:right}.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content:''}.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25)}kbd kbd{padding:0;font-size:100%;font-weight:bold;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:800px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:800px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important;visibility:hidden !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:799px){.visible-xs{display:block !important}table.visible-xs{display:table}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:799px){.visible-xs-block{display:block !important}}@media (max-width:799px){.visible-xs-inline{display:inline !important}}@media (max-width:799px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:800px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:800px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:800px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:800px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:799px){.hidden-xs{display:none !important}}@media (min-width:800px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}} /* @end */ body * { font-family: Montserrat; } .ui-helper-hidden-accessible { display: none; } /*------------------------------------*\ MAIN CREDITS \*------------------------------------*/ .sk_credits { color: #fff; display: block; font-size: 0.6em; text-align: center; } .sk_credits:hover, .sk_credits:focus { color: #fff; text-decoration: none; } .sk_credits span { background: url('https://www.directafin.it/wp-content/themes/directafin/img/sk_logo.svg') 50% 50% no-repeat; background-size: contain; display: inline-block; height: 24px; width: 18px; } @media screen and (max-width: 980px) { .sk_credits { font-size: 0.8em; } } /* Termini e Condizioni */ .container-fluid.condizioni { padding: 2% 0; } .condizioni .padding_text { padding: 0 !important; } .condizioni .padding_text > p { font-size: 14px; font-weight: 400; } /* global box-sizing */ *, *:after, *:before { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* html element 62.5% font-size for REM use */ html{ font-size:62.5%; overflow-x: hidden; } body{ color:#a5a5a5; overflow-x: hidden; } .col_heading_landing hr{ display:none; } /* clear */ .clear:before, .clear:after { content:' '; display:table; } .clear:after { clear:both; } .clear { *zoom:1; } img{ max-width:100%; vertical-align:bottom; } a{ color:#444; text-decoration:none; } a:hover, a:focus{ text-decoration: none; } a:focus{ outline:0; } a:hover, a:active{ outline:0; } input:focus{ outline:0; } ::selection{ background:#333; color:#FFF; text-shadow:none; } ::-webkit-selection{ background:#333; color:#FFF; text-shadow:none; } ::-moz-selection { background:#333; color:#FFF; text-shadow:none; } .t_center{ text-align: center; } .container-fluid{ padding: 0px; } .row{ margin: 0px; } .col{ padding: 0px; } .bg{ background-size: cover; background-position: center; } .height_100{ height: 100%; } .mobile_hide{ display: block; } .mobile_show{ display: none; } .mobile_hidden{ display: block; } .d_table{ display: table; width: 100%; height: 100%; position: relative; } .d_cell{ display: table-cell; width: 100%; height: 100%; position: relative; vertical-align: middle; } .z10{ z-index: 10; position: relative; } .t_center{ text-align: center; } ul{ padding: 0px; } li{ list-style: none; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } body .no_margin_top { margin: 0; } body .flexslider { background: transparent; border: 0 none; } /*------------------------------------*\ WORDPRESS CORE \*------------------------------------*/ .alignnone { margin:5px 20px 20px 0; } .aligncenter, div.aligncenter { display:block; margin:5px auto 5px auto; } .alignright { float:right; margin:5px 0 20px 20px; } .alignleft { float:left; margin:5px 20px 20px 0; } a img.alignright { float:right; margin:5px 0 20px 20px; } a img.alignnone { margin:5px 20px 20px 0; } a img.alignleft { float:left; margin:5px 20px 20px 0; } a img.aligncenter { display:block; margin-left:auto; margin-right:auto; } .wp-caption { background:#FFF; border:1px solid #F0F0F0; max-width:96%; padding:5px 3px 10px; text-align:center; } .wp-caption.alignnone { margin:5px 20px 20px 0; } .wp-caption.alignleft { margin:5px 20px 20px 0; } .wp-caption.alignright { margin:5px 0 20px 20px; } .wp-caption img { border:0 none; height:auto; margin:0; max-width:98.5%; padding:0; width:auto; } .wp-caption .wp-caption-text, .gallery-caption { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } .sticky { } .bypostauthor { } /* @group Dropdown */ .aida_drop_button{display:block;cursor:pointer;} .aida_drop_list{position:absolute;display:none;margin:0;padding:0;list-style:none;list-style-type:none;} .aida_option{cursor:pointer;list-style:none;list-style-type:none;} .aida_drop{position:relative;} .aida_drop_fake{position:absolute;top:0;right:0;left:0;bottom:0;z-index:400;cursor:pointer;opacity:0;margin:0 !important;padding:0 !important;width:100% !important;height:100% !important;} .aida_drop{margin:0;display:inline-block; width: 100%;} .aida_drop_button { background: #fff none repeat scroll 0 0; border: 2px solid #f7ca0d; color: #000; font-family: Montserrat; font-size: 0.7em; font-weight: 400; line-height: 1.8em; padding: 0 1%; position: relative; width: 86%; z-index: 6; transition: all .6s ease; -webkit-transition: all .6s ease; } .aida_drop_button:hover, .aida_drop_button.clicked { background: #f7ca0d; } ._field1 { position: relative; z-index: 8; } .aida_drop_button:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #000; content: ""; display: block; height: 0; margin-top: -3px; position: absolute; right: 2.5%; top: 50%; width: 0; } .aida_drop_list { background: #f7ca0d; color: #fff; margin-top: -12px; overflow: hidden; padding: 14px 0 0; width: 86%; z-index: 5; } .aida_drop_option { cursor: pointer; float: none !important; font-family: Montserrat; font-size: 0.7em; padding: 0.75% 1.5%; transition: all 0.3s ease 0s; } .aida_drop_option.selected{background:#000;color:#fff;} .aida_drop_option:hover{background:#fff;color:#000;} /* @end */ /* @group Header */ #preload{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 1000000; } #preload .d_table, #preload .d_cell{ background-color: white; } #plogo img{ width: 180px; margin-bottom: 15px; } .spinner { width: 40px; height: 40px; position: relative; margin: 0px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0) } .double-bounce1 span, .double-bounce2 span { content: ""; position: absolute; width: 100%; height: 100%; background-color: #F7CA0D ; left: 0; top: 0; border-radius: 50%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0) } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } header { background: #fff; clear: both; height: 80px; position: fixed; width: 100%; z-index: 20; top: 0; left: 0; } .logo { background: #f7ca0d; padding-bottom: 10.5%; left: 22px; position: absolute; text-align: center; top: 22px; width: 16%; transition: all .6s ease; -webkit-transition: all .6s ease; } .logo_landing { background: #f7ca0d; left: 0; position: absolute; text-align: center; top: 0; width: 244px; transition: all .6s ease; -webkit-transition: all .6s ease; height: 100%; padding: 6px 20px 5px; } .logo_landing a{ display: block; padding: 4px; } .logo_landing img{ height: 60px; } @media screen and (min-width: 1181px) { header.scrolled .logo { padding-bottom: 6.4%; width: 12%; top: 0; } } .logo > a { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .logo > a img { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 86%; } header > nav { height: 70px; line-height: 90px; position: absolute; right: 320px; top: 0; transition: all .6s ease; -webkit-transition: all .6s ease; } @media screen and (min-width: 1181px) { header.scrolled > nav { line-height: 70px; } } .numero_verde { background: #f7ca0d; height: 80px; padding: 6px 0; position: absolute; right: 0; text-align: center; top: 0; width: 280px; } .landing_page .numero_verde{ height: 100%; } /* MENU */ nav.nav > ul { padding: 0; margin: 0; } nav.nav > ul > li.menu-item { display: inline-block; font-size: 15px; text-transform: uppercase; position: relative; } nav.nav > ul > li.menu-item a { border-bottom: 4px solid #fff; padding: 3px 12px; transition: all .6s ease; -webkit-transition: all .6s ease; } nav.nav > ul > li.menu-item a:hover { color: #f7ca0d; } nav.nav > ul > li.menu-item.current-menu-item > a { border-bottom: 4px solid #f7ca0d; color: #f7ca0d; } @media screen and (min-width: 1181px) { nav.nav > ul > li > ul { width: 400px; padding: 0 24%; } nav.nav > ul > li#menu-item-647 > ul { width: 720px; padding: 0 40%; } nav.nav > ul > li > ul { background: #edecec; position: absolute; top: 100%; border-bottom: 4px solid #f7ca0d; max-height: 0; overflow: hidden; opacity: 0; transition: all .6s ease; -webkit-transition: all .6s ease; margin-left: -40%; } nav.nav > ul > li:hover > ul { opacity: 1; max-height: 360px; margin-top: 7px; padding: 20% 24%; } nav.nav > ul > li#menu-item-647:hover > ul { padding: 20% 40%; } nav.nav > ul > li.menu-item-has-children:before { position: absolute; content: ''; bottom: 0; left: 50%; margin-left: -12px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid #edecec; display: block; opacity: 0; transition: all .6s ease; -webkit-transition: all .6s ease; z-index: 2; margin-bottom: -7px; } nav.nav > ul > li.menu-item-has-children:after { position: absolute; content: ''; bottom: 0; left: 0; right: 0; width: 100%; margin-bottom: -15px; height: 15px; z-index: 1; } nav.nav > ul > li.menu-item-has-children:hover:before { opacity: 1; } } nav.nav > ul > li.menu-item > ul > li { line-height: 1em; } nav.nav > ul > li.menu-item > ul > li.menu-item-has-children { line-height: 36px; width: 210px; float: left; } nav.nav > ul > li.menu-item > ul > li.menu-item-has-children > a { border-bottom: 1px solid #f7ca0d; line-height: 36px; text-align: left; padding: 0; text-transform: uppercase; } nav.nav > ul > li.menu-item > ul > li > a { color: #000; display: inline-block; margin: 0; padding: 3.5% 0; text-align: left; vertical-align: top; width: 88%; line-height: 1em; border: 0 none; text-transform: none; } nav.nav > ul > li.menu-item > ul > li > ul > li a { border: 0 none; padding: 0; text-transform: none; width: auto; } nav.nav > ul > li.menu-item > ul > li > ul { margin-right: 0; margin-left: 0; margin-bottom: 0; padding-top: 5px; padding-bottom: 8px; } nav.nav > ul > li.menu-item > ul > li > ul > li > ul { list-style: circle outside; list-style-type: circle; padding-left: 10%; } nav.nav > ul > li > ul > li > ul > li > ul > li { position: relative; } nav.nav > ul > li > ul > li > ul > li > ul > li:before { background: #333 none repeat scroll 0 0; border-radius: 300px; content: ""; display: block; height: 8px; left: -14px; position: absolute; top: 14px; width: 8px; } #menu-item-560 > a { border: 2px solid #f7ca0d; padding: 6px 12px; } .overlay_menu{ background-color: rgba(0,0,0,.96); position: fixed; width: 100%; height: 100%; opacity: 2; z-index: 19; top: -101%; overflow: hidden; } .cta { background: #f7ca0d; bottom: 0; left: 0; position: fixed; right: 0; width: 100%; z-index: 20; display: block; transform: translateY(100%); -webkit-transform: translateY(100%); transition: all .6s ease; -webkit-transition: all .6s ease; } .cta > a { color: #fff; display: block; font-size: 13px; padding: 1% 0; text-align: center; width: 100%; float: left; border: solid 8px #242424; border-left: solid #242424 40px; background-color: #71b62c; border-right: solid #242424 40px; font-weight: bold; } .cta.showup { transform: translateY(0); -webkit-transform: translateY(0); } .cta.getup { transform: translateY(0); -webkit-transform: translateY(0); } @media screen and (min-width: 1000px){ .cta > a { color: #fff; display: block; font-size: 13px; padding: 1% 0; text-align: center; width: 100%; float: left; border: solid 12px #242424; border-left: solid 450px #242424 !important; background-color: #71b62c; border-right: solid 450px #242424 !important; font-weight: bold; } } @media screen and (min-width: 1181px) { nav.nav > ul > li#menu-item-560 > ul { margin-left: -60px; width: 320px; } nav.nav > ul > li#menu-item-560.menu-item-has-children:before { border-bottom: 32px solid #f7ca0d; border-left: 16px solid transparent; border-right: 16px solid transparent; bottom: -5px; } li#menu-item-655 { background: #f7ca0d; color: #fff; height: 128px; left: 5px; position: absolute; top: 5px; width: 50%; } li#menu-item-654 { background: #f7ca0d; color: #fff; height: 128px; right: 5px; position: absolute; top: 5px; width: 50%; } li#menu-item-753 { margin-top: 128px } #menu-item-654 > a, #menu-item-655 > a { bottom: 5px; color: #fff; font-size: 12px; left: 15%; line-height: 16px; position: absolute; text-align: center; text-transform: uppercase; width: 70%; min-height: 40px; } #menu-item-654 > a:before, #menu-item-655 > a:before { content: ""; left: 0; padding-bottom: 54%; position: absolute; top: -160%; width: 100%; } #menu-item-654 > a:before { background: url('https://www.directafin.it/wp-content/themes/directafin/img/tichiamiamo.svg') 50% 50% no-repeat; background-size: contain; } #menu-item-655 > a:before { background: url('https://www.directafin.it/wp-content/themes/directafin/img/preventivonline.svg') 50% 50% no-repeat; background-size: contain; } } /* @end */ /* @group Slider */ .slider_fullheight { padding: 100px 22px 22px; } .page_slider { height: 600px; } a.slider_box { display: block; } .d_cell { background: rgba(0, 0, 0, 0.4); } .slogan_slider { perspective: 800px; -webkit-perspective: 800px; } a.showmore { transition: all .6s ease 1.6s; -webkit-transition: all .6s ease 1.6s; opacity: 0; transform: rotateX(-90deg) translateY(100%) translateX(-50%); -webkit-transform: rotateX(-90deg) translateY(100%) translateX(-50%); } .flex-active-slide a.showmore, .page_slider.anim a.showmore { opacity: 1; transform: rotateX(0) translateY(0) translateX(-50%); -webkit-transform: rotateX(0) translateY(0) translateX(-50%); } .top_slogan { border: 5px solid #fff; display: inline-block; font-family: Montserrat; font-size: 3em; padding: 12px 24px; color: #f7ca0d; text-transform: uppercase; margin-top: 0; opacity: 0; transform-origin: 50% 0; -webkit-transform-origin: 50% 0; position: relative; transform: rotateX(-90deg) translateY(100%); -webkit-transform: rotateX(-90deg) translateY(100%); } #home_slider .top_slogan, .page_slider .top_slogan { transition: all .6s ease .6s; -webkit-transition: all .6s ease .6s; } .flex-active-slide .top_slogan, .page_slider.anim .top_slogan { opacity: 1; transform: rotateX(0) translateY(0); -webkit-transform: rotateX(0) translateY(0); } .bot_slogan { color: #fff; font-family: Montserrat; font-size: 1.4em; font-weight: 400; padding: 16px 0 0; opacity: 0; top: 10%; transform: translateY(100%); -webkit-transform: translateY(100%); } #home_slider .bot_slogan, .page_slider .bot_slogan { transition: all .6s ease 1s; -webkit-transition: all .6s ease 1s; } .flex-active-slide .bot_slogan, .page_slider.anim .bot_slogan { opacity: 1; top: 0; transform: translateY(0); -webkit-transform: translateY(0); } .page_slider .d_cell { /* background: transparent;*/ } .page_slider .top_slogan { margin-top: 0; padding: 0; border: 0 none; } .page_slider .slogan_slider { margin-top: -2.5%; } .page_quote { border: 2px solid #f7ca0d; bottom: 12%; color: #fff; font-size: 0.8em; left: 50%; padding: 1% 1.5%; position: absolute; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: all .6s ease; -webkit-transition: all .6s ease; } .page_quote:hover { background: #f7ca0d; color: #fff; } #testim_slider1{ position: relative; } a.showmore.page_quote2 { margin: 0; opacity: 0; padding: 0; position: absolute; transform: rotateX(0deg) translateY(100%) translateX(-50%); -webkit-transform: rotateX(0deg) translateY(100%) translateX(-50%); width: 22%; transition: all .6s ease 1.5s; -webkit-transition: all .6s ease 1.5s; } .anim a.showmore.page_quote2 { opacity: 1; transform: rotateX(0deg) translateY(0px) translateX(-50%); -webkit-transform: rotateX(0deg) translateY(0px) translateX(-50%); } ol.flex-control-nav { bottom: 0%; z-index: 10; width: auto; left: 0; right: 0; } ol.flex-control-nav li { display: inline-block; margin: 0 0.5%; width: 2.5%; } ol.flex-control-nav li a { background: #eee; height: 0; padding-bottom: 16%; width: 100%; } ol.flex-control-nav li a.flex-active, ol.flex-control-nav li a:hover { background: #aaa; } #home_slider ol.flex-control-nav li a.flex-active, #home_slider ol.flex-control-nav li a:hover { background: #f7ca0d; } @media only screen and (max-width:767px){ ol.flex-control-nav { bottom: 3%; } } /* @end */ /*------------------------------------*\ PAGE BUILDER \*------------------------------------*/ .text_col p{ line-height: 1.8em; } .bread_box{ font-size: 15px; font-weight: 400 !important; padding: 15px 0; } .intro_row { position: relative; } .row.intro_background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100%; padding: 0 22px 22px; } .intro_background .col-md-6 { background-position: 50% 50%; background-size: cover; height: 100%; } .row.intro_squares { padding: 0 2% 3%; } .intro_square { background-color: #f7ca0d; display: block; background-position: 50% 50%; background-repeat: no-repeat; background-size: 90% auto; padding-bottom: 74%; margin: 0 auto; width: 82%; position: relative; background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/is_border.svg'); transition: all .6s ease; -webkit-transition: all .6s ease; } .fascia_form_tan{ padding-bottom: 45px; background-color: #edeeed; } .fascia_form_tan .page_form{ padding-top: 0px; } #mortgage_calculator div.error { margin: 2em 0; color: red; font-weight: bold; } #mortgage_calculator table { width: 100%; margin: .1em 0 2em 0; } #mortgage_calculator th, #mortgage_calculator td { padding: .5em; vertical-align: top; } #mortgage_calculator th { text-align: right; font-weight: normal; width: 25%; } #mortgage_calculator table tr.even { background-color: #eee; } #mortgage_calculator table tr.odd { background-color: #fff; } /* TOTAL BOX */ #mortgage_calculator div.total { float: right; width: 30%; padding: .5em; font-weight: normal; background-color: #ff9; } #mortgage_calculator div.total strong { display: block; font-size: 1.8em; } #mortgage_calculator div.total a:link, #mortgage_calculator div.total a:visited { font-size: .84em; } /* INPUT */ #mortgage_calculator table.input p.info { padding-top: 0; margin-top: .5em; font-size: .84em; line-height: 1.4em; color: #666; } /* INFO */ #mortgage_calculator table.info td { font-weight: bold; } #mortgage_calculator table.info p.info { padding-top: 0; margin-top: 0; color: #333; font-weight: normal; } #mortgage_calculator table.info tr.pmi { background-color: #ffe; } #mortgage_calculator table.info tr.tax { background-color: #ffc; } /* SUM */ #mortgage_calculator table.sum { margin: 0 auto; width: auto; border-collapse: collapse; } #mortgage_calculator table.sum td { font-weight: normal; white-space: nowrap; border: 1px solid #999; border-collapse: collapse; text-align: right; } #mortgage_calculator table.sum tr.total td { font-weight: bold; background-color: #ff9; } /* CALCULATIONS */ #mortgage_calculator div.calculation { padding: .5em; } #mortgage_calculator div.calculation h3 { font-family: Helvetica,arial,sans-serif; font-weight: normal; font-size: 2.2em; padding-bottom: 0; margin-bottom: 0; } #mortgage_calculator div.calculation p { margin-left: 5em; } #mortgage_calculator div.calculation .result { padding: .2em; background-color: #ff9; } /* AMORTIZATION */ #mortgage_calculator table.amortization { border-collapse: collapse; } #mortgage_calculator table.amortization td { text-align: right; background-color: #eee; border: 1px solid #999; border-collapse: collapse; } #mortgage_calculator table.amortization tr.legend td { font-weight: bold; background-color: #888; color: #fff; text-align: right; } #mortgage_calculator table.amortization tr.year_summary td { text-align: left; background-color: #ccc; margin-bottom: 2em; } #mortgage_calculator table.amortization tr.year_summary td p { margin: .2em 0 0 4em; } #mortgage_calculator table.amortization tr.year_summary td .coaching { font-size: .84em; color: #666; } #mortgage_calculator table.amortization tr.total_summary td { font-family: Helvetica,arial,sans-serif; text-align: left; background-color: #ff0; font-size: 1.84em; line-height: 1.2em; } #mortgage_calculator table.amortization tr.total_summary .total_spent_over_term { font-size: 3em; display: block; line-height: 1.2em; text-align: center; } @media screen and (min-width: 1181px) { .intro_square:hover { transform: scale(1.1); -webkit-transform: scale(1.1); } } @media screen and (max-width: 480px) { #mortgage_calculator table.amortization tr.legend td, #mortgage_calculator table.amortization td { font-size: 12px !important; line-height: 20px; } #mortgage_calculator th, #mortgage_calculator td { padding: 5px !important; } } .intro_square.quinto .animblock { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/anim1.png'); width: 60%; top: 32%; } .intro_square.pensionati .animblock { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/anim2.png'); width: 90%; top: 40%; } .intro_square.delega .animblock { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/anim3.png'); width: 85%; top: 36%; } .intro_square.consolidamento .animblock { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/anim4.png'); width: 90%; top: 36%; } .animblock { position: absolute; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-position: -2700% 50%; background-size: 2800% auto; background-repeat: repeat-x; padding-bottom: 60%; } @media screen and (min-width: 1181px) { .intro_square:hover .animblock { animation: animate 2s steps(27); -webkit-animation: animate 2s steps(27); animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } } @keyframes animate { 0% { background-position: -2700% 50%; opacity: 1; } 8% { background-position: -2700% 50%; opacity: 0; } 10% { background-position: -2700% 50%; opacity: 0; } 18% { background-position: 0 50%; opacity: 0; } 20% { background-position: 0 50%; opacity: 1; } 100% { background-position: -2700% 50%; opacity: 1; } } @-webkit-keyframes animate { 0% { background-position: -2700% 50%; opacity: 1; } 10% { background-position: -2700% 50%; opacity: 0; } 15% { background-position: 0 50%; opacity: 0; } 20% { background-position: 0 50%; opacity: 1; } 100% { background-position: -2700% 50%; opacity: 1; } } .intro_square h4 { color: #fff; font-size: 0.8em; left: 50%; line-height: 1.2em; position: absolute; text-align: center; text-transform: uppercase; top: 60%; transform: translate(-50%); -webkit-transform: translate(-50%); width: 80%; } .col-md-6.intro_box { padding: 22px 64px; } .intro_row h3, .tabs_list h3 { color: #f7ca0d; margin: 4% 0 2%; text-transform: uppercase; } .intro_text { color: #6b6b6b; font-size: 0.68em; font-weight: 400; line-height: 2em; width: 94%; } .intro_text > ul { color: #000; font-size: 1.5em; padding: 2% 0 1% 0; } .tabs_list { margin-left: 22px; margin-right: 66.6667%; padding-left: 3%; padding-right: 22px; padding-top: 3%; } .tabs_canvas { position: relative; } .tblock { background-position: 50% 50%; background-size: cover; bottom: 22px; position: absolute; right: 22px; top: 22px; background-color: #ddd; right: -100%; opacity: 0; transition: all .6s ease; -webkit-transition: all .6s ease; width: 66.6667%; } .titem.selected .tblock { right: 22px; opacity: 1; } @media screen and (min-width: 1180px) { .tabs_canvas { perspective: 1000px; -webkit-perspective: 1000px; overflow: hidden; } .tblock { transform: rotateY(-15deg); -webkit-transform: rotateY(-15deg); transform-origin: 0 50%; -webkit-transform-origin: 0 50%; } .titem.selected .tblock { transform: rotateY(0); -webkit-transform: rotateY(0); } } .tlist { border-top: 4px solid #e5e5e5; float: right; margin-top: 12%; width: 94%; padding-bottom: 10%; } h3.th3 { border-bottom: 4px solid #e5e5e5; color: #6b6b6b; font-size: 0.65em; font-weight: 400; margin: 0; padding: 5% 6%; text-transform: none; cursor: pointer; position: relative; transition: all .6s ease; -webkit-transition: all .6s ease; } h3.th3:after { border-bottom: 9px solid transparent; border-left: 16px solid #F7C911; border-top: 9px solid transparent; content: ""; display: block; height: 0; margin-top: -7px; position: absolute; right: 5%; top: 50%; width: 0; transition: all .6s ease; -webkit-transition: all .6s ease; } .titem.selected h3.th3, h3.th3:hover { background: #F7C911; color: #fff; } .titem.selected h3.th3:after, h3.th3:hover:after { background: #F7C911; color: #fff; border-left: 16px solid #fff; } .twrap { background: rgba(255, 255, 255, 0.9); left: 3%; padding: 3%; position: absolute; width: 62%; bottom: 4.5%; } @media screen and (min-width: 1181px) { .twrap { transition: all .6s ease .6s; -webkit-transition: all .6s ease .6s; opacity: 0; bottom: -5.5%; } .titem.selected .twrap { bottom: 4.5%; opacity: 1; } } .twrap h4 { color: #F7C911; font-size: 1.5em; } .ttext { color: #444444; font-size: 0.68em; line-height: 2.2em; } .twrap > a.calculate, a.showmore { display: block; font-size: 1em; margin: 7.5% 0 2.5%; position: relative; text-align: center; perspective: 800px; -webkit-perspective: 800px; } a.showmore { bottom: 10%; left: 50%; position: absolute; width: 50%; } .padding_full_text a.btn_more_link { clear: both; margin: 3% auto 5%; } .twrap > a.calculate .btn_face, a.showmore .btn_face { border: 1px solid #F7C911; color: #F7C911; padding: 2.5% 0; font-size: 1em; transition: all .6s ease; -webkit-transition: all .6s ease; position: absolute; transform-origin: 50% 0; -webkit-transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; text-transform: uppercase; } .twrap > a.calculate .btn_hidden, a.showmore .btn_hidden { border: 1px solid #F7C911; color: #F7C911; padding: 2.5% 0; color: #F7C911; font-size: 1em; position: relative; opacity: 0; z-index: 3; text-transform: uppercase; } .twrap > a.calculate .btn_hover, a.showmore .btn_hover { border: 1px solid #F7C911; padding: 2.5% 0; color: #fff; font-size: 1em; transition: all .6s ease; -webkit-transition: all .6s ease; transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; background: #F7C911; top: -100%; opacity: 0; position: absolute; transform: rotateX(90deg); -webkit-transform: rotateX(90deg); width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 1; text-transform: uppercase; } @media screen and (min-width: 1081px) { .twrap > a.calculate:hover .btn_face, a.showmore:hover .btn_face { top: 100%; transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); opacity: 0; } .twrap > a.calculate:hover .btn_hover, a.showmore:hover .btn_hover { opacity: 1; top: 0; transform: rotateX(0) scale(1); -webkit-transform: rotateX(0) scale(1); } } /* */ .padding_full_text { width: 64%; margin: 0 auto; } .fix_font .padding_text a, .fix_font .text_section a { color: #F7CA0D; text-decoration: underline; font-weight: 900; } .large .padding_full_text { width: 86%; } .padding_text { text-align: left; color: #444444; font-size: .8em; font-weight: 400; line-height: 1.6em; padding-bottom: 2.5%; } .padding_full_text h3 { line-height: 1.5em; margin: 0; padding: 0; } h2.title_section { color: #F7C911; font-size: 1.42em; padding: .5% 0; } .landing_page .col-sm-6 h2{ font-size: 30px !important; } .testo_foto .d_cell { background: #eee; } .testo_foto .text_section { padding: 8%; } .text_section h3 { color: #F7C911; font-size: 1.5em; text-transform: uppercase; } .testo_icona .text_section { padding: 2% 0; } .text_section > p { color: #444444; font-size: 0.7em; line-height: 1.8em; padding: 0; } .testo_foto { position: relative; min-height: 450px; } .testo_foto .text_section{ min-height: 450px; } .testo_foto .bg { display: block; height: 100%; position: absolute; top: 0; right: 0; } .testo_foto .bg.goleft { right: 50%; } .testo_foto .btn_more_link, .padding_full_text .btn_more_link { position: relative; display: inline-block; perspective: 800px; -webkit-perspective: 800px; display: block; font-size: 0.9em; margin: 4% auto 8%; text-align: center; width: 60%; } .testo_foto .btn_more_link .btn_face, .padding_full_text .btn_more_link .btn_face { border: 3px solid #F7C911; color: #F7C911; font-size: 1em; padding: 1.5% 7.5%; transition: all .6s ease; -webkit-transition: all .6s ease; position: absolute; transform-origin: 50% 0; -webkit-transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; } .testo_foto .btn_more_link .btn_hidden, .padding_full_text .btn_more_link .btn_hidden { border: 3px solid #F7C911; color: #F7C911; font-size: 1em; padding: 1.5% 7.5%; position: relative; opacity: 0; z-index: 3; } .testo_foto .btn_more_link .btn_hover, .padding_full_text .btn_more_link .btn_hover { border: 3px solid #F7C911; color: #fff; font-size: 1em; padding: 1.5% 7.5%; transition: all .6s ease; -webkit-transition: all .6s ease; transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; background: #F7C911; top: -100%; opacity: 0; position: absolute; transform: rotateX(90deg); -webkit-transform: rotateX(90deg); width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 1; } @media screen and (min-width: 1081px) { .testo_foto .btn_more_link:hover .btn_face, .padding_full_text .btn_more_link:hover .btn_face { top: 100%; transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); opacity: 0; } .testo_foto .btn_more_link:hover .btn_hover, .padding_full_text .btn_more_link:hover .btn_hover { opacity: 1; top: 0; transform: rotateX(0) scale(1); -webkit-transform: rotateX(0) scale(1); } } .padding_text .col.padding_text { padding: 3% 3% 3% 0.5%; } .pb_block.testo_icona ul { padding: 2% 0 5%; } .pb_block.yellow { background: #F7CA0D; } .col.goright { float: right; } .testo_icona { padding: 2% 0; } .testo_icona .d_cell { background: #fff none repeat scroll 0 0; padding: 0 6% 3%; position: relative; bottom: -1px; } .testo_icona .text_section > p { font-size: 0.65em; } .pb_icon { background-color: #f7ca0d; display: block; margin: 10% 0 10% 21.5%; padding-bottom: 56%; width: 56%; background-position: 50% 50%; background-repeat: no-repeat; background-size: 90% auto; } .pb_icon.chi { background-image: url(https://www.directafin.it/wp-content/themes/directafin/img/chi.svg); } .pb_icon.vantaggi { background-image: url(https://www.directafin.it/wp-content/themes/directafin/img/vantaggi.svg); } .testo_icona .pull-right .d_cell { padding: 0 10.5% 0 0; } @media screen and (min-width: 800px) { .testo_icona h2, .testo_icona .text_section { margin-left: 6%; } .testo_icona .pull-right h2, .testo_icona .pull-right .text_section { margin-left: 0; margin-right: 3%; } } .testo_foto.padme .d_cell { background: #fff none repeat scroll 0 0; padding: 6% 0 6% 9%; } .testo_foto.padme h3 { padding: 2% 0 4%; font-size: 1.4em; } .text_section li, .intro_text li, .padding_full_text ul li { color: #444444; font-size: 0.65em; line-height: 200%; padding-left: 8%; position: relative; margin-bottom: 5px; } .text_section li:before, .intro_text li:before, .padding_full_text ul li:before { height: 80%; left: 2%; position: absolute; top: 0; width: 4%; background: url(https://www.directafin.it/wp-content/themes/directafin/img/spunta.svg) 50% 0% no-repeat; background-size: contain; content: ''; margin-top: 1.2%; } .slider_single_news .bot_slogan{ padding-right: 25px !important; padding-left: 25px !important; } .sidebar_single_news li::before { display: none; } .sidebar_single_news .widget_recent_entries li a { line-height: 1.5em; padding: 0 0 16px 60px; } .sidebar_single_news .widget_recent_entries li span { padding-bottom: 24px; } .testo_foto.padme .bg { background-position: 36% 50%; background-repeat: no-repeat; background-size: 75% auto; height: 80%; margin-top: 7%; } .padding_full_text ul { padding: 0.5% 0 2%; } .padding_full_text ul li { font-size: 1em; line-height: 2em; padding-top: 0.6em; } /*------------------------------------*\ END PAGE BUILDER \*------------------------------------*/ /*------------------------------------*\ CAROUSEL \*------------------------------------*/ .carousel_canvas { padding: 4% 0 8%; position: relative; } .carousel_canvas > h1, .carousel_canvas > h3 { color: #f7c911; text-align: center; text-transform: uppercase; font-size: 1.6em; } .carousel_canvas > .subtit { color: #000; font-size: 0.7em; line-height: 180%; padding: 0 0; } .carousel_wrap { padding-top: 3%; margin: 0 auto; width: 64%; position: relative; } #products_slider ul li { text-align: center; } .product_elem { display: inline-block; width: 100%; vertical-align: top; } .c_img { display: block; padding-bottom: 12%; width: 100%; } .c_txt { font-size: 0.65em; padding: 2% 12%; color: #333; } .carousel_wrap ol.flex-control-nav { bottom: -40%; } .carousel_wrap ol.flex-control-nav li { margin: 0 0.7%; width: 3.5%; } /*------------------------------------*\ END CAROUSEL \*------------------------------------*/ /*------------------------------------*\ TESTIMONIALS \*------------------------------------*/ .testimonials_canvas { display: block; position: relative; width: 100%; color: #fff; background: #F7CA0D url('https://www.directafin.it/wp-content/themes/directafin/img/directa_back.svg') 50% 50% repeat; background-size: 18% auto; } .testimonials_back { background: transparent url('https://www.directafin.it/wp-content/themes/directafin/img/directa_back.svg') 60% 25% repeat; background-size: 18% auto; padding-bottom: 3%; } .testimonials_canvas h3 { padding: 4% 0 2%; text-align: center; margin: 0; } .testimonials_wrap { padding: 0 2% 2%; width: 100%; } .testimonial_block { text-align: center; } .testimonial_image { background-position: 50% 50%; background-size: cover; margin: 0 auto; padding-bottom: 25%; width: 25%; border-radius: 5%; -webkit-border-radius: 5%; } .testimonial_block h4 { font-size: 1em; } .testimonial_block h5 { font-size: 0.64em; } .quote { font-size: 0.75em; font-weight: 400; margin: 8% auto; width: 72%; position: relative; } /*.quote p:before { color: #fff; content: "“"; display: inline-block; font-size: 4.5em; line-height: 0; margin: -14% 1% -20% -4%; padding: 0; position: relative; vertical-align: middle; }*/ /* .quote p:after { color: #fff; content: "”"; display: inline-block; font-size: 4.5em; line-height: 0; margin: 0 -4% -14% 1%; padding: 0; position: relative; vertical-align: middle; }*/ #testimonials a.showmore { width: 300px; bottom: auto; left: auto; margin: 0 50%; opacity: 1; position: relative; transform: translateX(-50%); } #testimonials .btn_face { border-color: #fff; color: #fff; } #testimonials .btn_hover { background: #fff; border-color: #fff; color: #f7c911; } #testimonials a.showmore span { display: block; font-size: 0.5em; margin-top: -1%; text-transform: lowercase; } @media screen and (max-width: 1080px) { #testimonials a.showmore { width: 32%; } } @media screen and (max-width: 799px) { .testimonials_mobiwrap { position: relative; } #testimonials a.showmore span { font-size: 0.9em; } #testimonials a.showmore .btn_face, #testimonials a.showmore .btn_hover, #testimonials a.showmore .btn_hidden { font-size: 18px; } } @media screen and (max-width: 640px) { #testimonials a.showmore { width: 50%; } } @media screen and (max-width: 420px) { #testimonials a.showmore { width: 80%; } } /*------------------------------------*\ END TESTIMONIALS \*------------------------------------*/ /*------------------------------------*\ ORDERED LISTS \*------------------------------------*/ .padding_text ol { counter-reset: olcounter; padding-left: 10%; } .padding_text ol li { padding: 2% 0; position: relative; } .padding_text ol li:before { color: #f7ca0d; content: counter(olcounter, decimal); counter-increment: olcounter; font-size: 4.5em; left: -8%; margin-top: 4.5%; position: absolute; top: 0; } @media screen and (max-width: 640px) { .padding_text ol li:before { font-size: 4em; left: auto; margin-top: 8%; right: 102%; } } /*------------------------------------*\ END ORDERED LISTS \*------------------------------------*/ /*------------------------------------*\ FORM PAGE BUILDER \*------------------------------------*/ #form_preventivo{ position: relative; z-index: 10; } textarea#finfo { height: 80px; min-height: 80px; resize: vertical; } .form_loading { background: rgba(255, 255, 255, 0.9) url('https://www.directafin.it/wp-content/themes/directafin/img/preloader.gif') 50% 50% no-repeat; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 20000000; display: none; } .fascia_introduzione_page{ margin-top: 45px; } .fascia_introduzione_page p{ color: #6b6b6b; } .page_form_container { background: #eee none repeat scroll 0 0; margin-top: 0; } form.page_form { margin: 0 auto; padding: 1.5% 0; width: 64%; } ._form-title { color: #f7c911; font-size: 1.3em; letter-spacing: 1px; text-transform: uppercase; } ._form_element { float: left; width: 50%; position: relative; } label._form-label { color: #000; display: block; font-size: 0.5em; font-weight: 400; padding: 5% 0.25% 1%; text-transform: uppercase; } .page_form input { background: #fff; border: 2px solid #f7c911; color: #000; font-size: 0.7em; font-weight: 400; height: 2em; padding: 0 1%; width: 86%; } ._form_element.textarea { width: 100%; } ._field2 span { color: #000; font-size: 0.5em; line-height: 1em; padding: 1% 3% 0 1%; vertical-align: text-top; } .page_form textarea { background: #fff; border: 2px solid #f7c911; color: #000; font-size: 0.7em; padding: 0.5%; width: 93%; } ._button-wrapper { clear: both; padding: 4% 0 1%; width: 100%; } .page_form button, .page_form input[type="button"], .page_form input[type="submit"] { background: #f7c911; border: 0 none; color: #fff; padding: 0% 5%; text-transform: uppercase; width: auto; font-size: 0.9em; } .textarea label._form-label { padding: 3% 0.125% 1%; } ._form_element.field_full{ width: 100%; } ._form_element.field_full label{ padding-top: 2.5%; } .page_form textarea { height: 150px; } #fprov_append { display: block; position: relative; width: 86%; } .ui-autocomplete { background: #f7ca0d; color: #fff; font-size: 0.7em; padding: 0; position: absolute !important; width: 100% !important; max-height: 320px; overflow-y: auto; z-index: 11; } .ui-autocomplete li { cursor: pointer; padding: .5% 1%; } .ui-autocomplete li:hover { background: #fff; color: #000; } .privacy_box { clear: both; display: block; padding: 3% 0 1%; } a.informativa { background: #666; color: #fff; font-size: 0.7em; padding: 0.5% 1%; } .page_form input[type="checkbox"] { width: auto; margin-right: .5%; } .privacy_check { color: #000; font-size: 0.5em; padding-top: 1%; } .page_form .f_problem input, .f_problem .aida_drop_button { border: 2px solid red; } .preventivo_message { background: red none repeat scroll 0 0; color: #fff; font-size: 0.6em; margin-top: 2%; padding: 1% 1.5% 0.5%; display: none; margin-bottom: 2%; } .clearform { clear: both; width: 100%; } .z10 { z-index: 10; position: relative; } .z9 { z-index: 9; position: relative; } .z8 { z-index: 8; position: relative; } .z7 { z-index: 7; position: relative; } .z6 { z-index: 6; position: relative; } .z5 { z-index: 5; position: relative; } .z4 { z-index: 4; position: relative; } .z3 { z-index: 3; position: relative; } .z2 { z-index: 2; position: relative; } .z1 { z-index: 1; position: relative; } .squaredFour { display: inline-block; margin: 2px 6px 0 0; position: relative; vertical-align: middle; width: 20px; } .squaredFour label { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; background: #fcfff4; background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 4px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); } .squaredFour label:after { content: ''; width: 12px; height: 8px; position: absolute; top: 5px; left: 4px; border: 3px solid #333; border-top: none; border-right: none; background: transparent; opacity: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .squaredFour label:hover:after { opacity: 0.5; } .squaredFour input[type=checkbox] { visibility: hidden; } .squaredFour input[type=checkbox]:checked + label:after { opacity: 1; } .squaredFour ._error-inner { bottom: 108%; position: absolute; width: 1400%; } /*------------------------------------*\ END FORM PAGE BUILDER \*------------------------------------*/ .jobpad { padding-bottom: 16%; width: 100%; } .jf01 { color: #666; font-size: 1em; text-align: center; } .jf02 { color: #f7ca0d; display: block; font-size: 1.6em; text-align: center; width: 100%; } .jf02:hover { color: #f7ca0d; } .jf03 { color: #333; font-size: 0.6em; padding: 1% 6% 0; text-align: center; } /* GENERAL CLASS */ #iubenda-cs-banner{ /* ------ IMPORTANT NOTICE: don't change these values as they may prevent the banner from properly showing. Some of these lines, moreover (like z-index) will overwrite the configuration initialized by the script you paste in your pages. To show the banner at the bottom you can switch to "bottom: 0px !important;". Don't forget to put "slideDown" to "false". */ bottom: 0px !important; left: 0px !important; position: fixed !important; width: 100% !important; z-index: 99999998 !important; background-color: black; /* ----------------- */ } /* CONTENT CLASS */ .iubenda-cs-content{ display:block; margin:0 auto; padding: 20px; width:auto; font-family: Helvetica,Arial,FreeSans,sans-serif; font-size: 14px; background: #000; color: #fff; } .iubenda-banner-content{ } .iubenda-cs-rationale{ max-width: 900px; position:relative; margin: 0 auto; } /* STYLE FOR TEXT INTERNAL BANNER */ .iubenda-banner-content > p { font-family: Helvetica,Arial,FreeSans,sans-serif; line-height: 1.5; } /* CLOSE BUTTON. NOTICE: IMAGE FOR BUTTON NOT IMPLEMENTED YET */ .iubenda-cs-close-btn{ margin:0; color: #fff; text-decoration:none; font-size:14px; position: absolute; top: 0; right: 0; border: none; } /* STYLE FOR TEXT LINK TO PRIVACY POLICY */ .iubenda-cs-cookie-policy-lnk{ text-decoration: underline; color: #fff; font-size: 14px; font-weight: 900; } /* IUBENDA */ div#iubenda-cs-banner { background: transparent !important; } .iubenda-cs-content { background: rgba(0,0,0,.9) !important; width: 60% !important; border-top: 0; } #iubenda-cs-banner .iubenda-banner-content p { color: #fff !important; font-size: 18px !important; } a.iubenda-cs-close-btn { background-color: #F7CA0D !important; width: 20px; height: 20px !important; text-align: center; border-radius: 500px; line-height: 20px; font-weight: bold; color: #000 !important; } a.iubenda-cs-cookie-policy-lnk { color: #F7CA0D !important; font-size: 18px !important; } @media screen and (max-width: 640px) { .iubenda-cs-content { width: 90% !important; border: 0 none; padding: 5% !important; } a.iubenda-cs-cookie-policy-lnk, #iubenda-cs-banner .iubenda-banner-content p { font-size: 16px !important; } } /*------------------------------------*\ CONVENZIONE \*------------------------------------*/ #fascia_convenzioni h2 { color: #f7c911; font-size: 1.3em; padding: 5% 0 0; text-align: center; } #fascia_convenzioni.testo_foto .bg { left: 0; right: auto; } #fascia_convenzioni.testo_foto .col.col-sm-6 { float: right; } #fascia_convenzioni .row { position: relative; } .c_logos { padding: 6% 0 0; position: relative; text-align: center; } .c_logo { background-size: contain !important; display: inline-block; padding-bottom: 18%; width: 26%; } .c_logo.logo_inpdap { background: url('https://www.directafin.it/wp-content/themes/directafin/img/cl_inpdap.svg') 50% 50% no-repeat; } .c_logo.logo_inps { background: url('https://www.directafin.it/wp-content/themes/directafin/img/cl_inps.svg') 50% 50% no-repeat; } .c_logo.logo_noipa { background: url('https://www.directafin.it/wp-content/themes/directafin/img/cl_noipa.svg') 50% 50% no-repeat; } /*------------------------------------*\ END CONVENZIONE \*------------------------------------*/ /*------------------------------------*\ CHI SIAMO \*------------------------------------*/ .chisiamo_row > * { vertical-align: middle; } .chisiamo_row { background: #f7ca0d; color: #fff; margin: 0 0 2.5%; padding: 2.5% 0; text-align: center; } .chisiamo_elem { display: inline-block; text-align: center; width: 24%; padding-bottom: 1%; } .anim .chisiamo_elem { opacity: 0; transform: translateY(50%) rotateX(-90deg); -webkit-transform: translateY(50%) rotateX(-90deg); transition: all .6s ease; -webkit-transition: all .6s ease; } .anim .chisiamo_elem.turnup { opacity: 1; transform: translateY(0) rotateX(0); -webkit-transform: translateY(0) rotateX(0); } .nascita .chisiamo_icon { background: url('https://www.directafin.it/wp-content/themes/directafin/img/chi_01.svg') 50% 50% no-repeat; background-size: contain; } .clienti .chisiamo_icon { background: url('https://www.directafin.it/wp-content/themes/directafin/img/chi_02.svg') 50% 50% no-repeat; background-size: contain; } .impegno .chisiamo_icon { background: url('https://www.directafin.it/wp-content/themes/directafin/img/chi_03.svg') 50% 50% no-repeat; background-size: contain; } .chisiamo_divider { background: #fff none repeat scroll 0 0; border-radius: 2px; display: inline-block; padding-bottom: 6%; width: 4px; opacity: 0; transition: all .1s ease; -webkit-transition: all .1s ease; } .chisiamo_divider.fadeIn { opacity: 1; } .chisiamo_icon { margin: 0 auto; padding-bottom: 40%; width: 60%; } .chisiamo_txt { font-size: 0.6em; line-height: 0.8em; } .chisiamo_pagebuilder { padding: 0 2.5%; width: 100%; } /*------------------------------------*\ END CHI SIAMO \*------------------------------------*/ /*------------------------------------*\ PAGE CATEGORIES \*------------------------------------*/ .children_pages { background: #eee none repeat scroll 0 0; padding: 1% 0; text-align: center; } #children_pages > h3 { color: #F7CA0D ; font-size: 1.3em; text-transform: uppercase; } .child_block { background: #000; padding-bottom: 100%; position: relative; width: 100%; overflow: hidden; } .cp_blocks { padding: 2% 1.5%; } .child_block, .child_block * { transition: all .6s ease; -webkit-transition: all .6s ease; } .child_image { background-position: 50% 50%; background-size: cover; bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 1; opacity: .5; } .child_block h4 { color: #fff; font-size: 1.4em; left: 0; position: absolute; right: 0; text-transform: uppercase; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; z-index: 2; text-shadow: 0 0 10px #000; } .child_text { color: #fff; font-size: 0.8em; left: 0; padding: 5%; position: absolute; right: 0; top: 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 2; opacity: 0; text-shadow: 0 0 10px #000; } a.child_link { background: #fff none repeat scroll 0 0; bottom: -35%; color: #333; left: 50%; letter-spacing: 2px; padding: 1% 0; position: absolute; text-transform: uppercase; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 80%; z-index: 3; opacity: 0; } @media screen and (min-width: 1181px) { .child_block:hover { background: #F7CA0D ; } .child_block:hover h4 { top: 20%; } .child_block:hover a.child_link { bottom: 5%; opacity: 1; } .child_block:hover .child_text { color: #fff; font-size: 0.8em; left: 0; padding: 5%; position: absolute; right: 0; top: 60%; opacity: 1; } } @media screen and (max-width: 1180px) { a.child_link { content: ''; width: 100%; padding: 0; bottom: 0; left: 0; top: 0; height: 100%; right: 0; transform: translateX(0); -webkit-transform: translateX(0); } } @media screen and (max-width: 799px) { .col-sm-3.child_col { float: left; margin-bottom: 4%; width: 50%; } } @media screen and (max-width: 480px) { .col-sm-3.child_col { float: none; width: 100%; } .child_block { padding-bottom: 56%; } .padding_full_text ul li { line-height: 1em; } .padding_full_text ul li::before { display: none; } } /*------------------------------------*\ END PAGE CATEGORIES \*------------------------------------*/ /*------------------------------------*\ BLOG \*------------------------------------*/ .single-post .padding_text img { height: auto; } .padding_top_no_slider{ padding-top: 13%; padding-bottom: 25px; } .blocco_news{ border: 1px solid #d5d5d5; padding: 25px; margin-bottom: 35px; } .img_news{ height: 0; padding-bottom: 72%; } .exc_news h3{ color: black; font-size: 1.2em; margin-bottom: 20px; margin-top: 0; } .info_data{ display: block; text-transform: uppercase; color: #888888; margin-top: 0.5%; font-size: .6em; } .exc_news p{ color: #8c8c8c; font-size: .76em; } .btn_news{ display: inline-block; color: white; background-color: #F7CA0D ; text-transform: uppercase; padding: 15px 75px; font-weight: bold; margin-top: 45px; } h1.post_title{ text-align: center; color: black; font-size: 1.3em; margin-top: 55px; margin-bottom: 45px; } .info_post{ font-size: .5em; } span.date{ float: right; color: white; background-color: #F7CA0D ; padding: 13px; } span.breadcrumb{ float: left; } .single .padding_text p{ padding: .5% 0; font-size: .8em; } .info_post span.breadcrumb { display: block; padding: 2px 0 32px; } .content_tags{ font-size: .6em; padding-bottom: 20px; } .content_tags a{ font-size: .9em; display: inline-block; padding: 5px 10px; border: 1px solid #F7CA0D ; margin-bottom: 5px; } .social_box{ border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; margin-top: 15px; padding-top: 20px; padding-bottom: 20px; margin-bottom: 15px; } .social_box > div{ display: inline-block; margin-right: 5px; margin-left: 5px; } div.fb{ top: -10px; position: relative; } /* Widget sidebar */ .sidebar_single_news > div, .sidebar_news > div, form.search{ margin-bottom: 65px; } .sidebar_single_news h3, .sidebar_news h3{ color: black; font-size: 1.2em; margin-bottom: 20px; margin-top: 0px; } .widget_recent_entries ul{ border-top: 1px solid #d4d5d4; } .widget_recent_entries li{ border-bottom: 1px solid #d4d5d4; padding-left: 16px; color: black; font-size: .8em; } .widget_recent_entries li:after { clear: both; width: 100%; content: ''; display: block; } .widget_recent_entries li a { color: black; display: block; padding: 16px 0 16px 60px; } .widget_recent_entries li span{ color: #F7CA0D ; display: inline-block; font-size: 3em; vertical-align: middle; margin-right: 15px; width: 45px; float: left; } form.search input{ appearance: none; -webkit-appearance: none; border: 1px solid #d4d5d4; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; padding: 10px 10px 10px 64px; background: url(https://www.directafin.it/wp-content/themes/directafin/img/icon_search.svg) left 10px center no-repeat; } body .tagcloud a{ display: inline-block; font-size: .6em !important; padding: 10px 15px; margin-right: 10px; border: 1px solid #d4d5d4; margin-bottom: 16px; } .single_content_col{ padding-right: 35px; padding-left: 25px; } .sidebar_single_news{ margin-top: 45px; } .sidebar_single_news .col{ padding-right: 15px; padding-left: 15px; } .articoli_recenti h3{ color: white; background-color: #F7CA0D ; padding: 15px; margin-bottom: 0; font-size: .9em; text-align: center; } .articoli_recenti li{ border-right: 1px solid #d3d5d3; border-left: 1px solid #d3d5d3; } .cerca_tag form{ margin-bottom: 0px; } .cerca_tag form input{ background: url(https://www.directafin.it/wp-content/themes/directafin/img/icon_search_w.svg) right 30px center no-repeat #F7CA0D ; color: white; padding: 10px 65px 10px 30px; } .cerca_tag h3{ display: none; } .cerca_tag .tagcloud{ border-right: 1px solid #d3d5d3; border-bottom: 1px solid #d3d5d3; border-left: 1px solid #d3d5d3; padding: 15px; } .cerca_tag input::-webkit-input-placeholder{ font-size: .9em; line-height: 1.5em; color: white; } .cerca_tag input:-moz-placeholder{ color: white; } .cerca_tag input::-moz-placeholder{ color: white; } .cerca_tag input:-ms-input-placeholder{ color: white; } @media only screen and (max-width: 1180px){ .padding_top_no_slider{ padding-top: 105px; padding-bottom: 25px; } .row_blog{ margin-top: 15px; } } @media only screen and (max-width: 992px){ .sidebar_single_news, .sidebar_news{ display: none; } .img_news{ padding-bottom: 42%; } .exc_news h3{ margin-top: 20px; } .blocco_news .col-md-9, .blocco_news .col-md-3, .blocco_news .col-md-12{ padding: 0px !important; } .blocco_news .info_data{ margin-top: 7px; font-size: 13px; } } .hatom-extra { display: none; } /*------------------------------------*\ END BLOG \*------------------------------------*/ /*------------------------------------*\ GLOSSARIO \*------------------------------------*/ .alphabet { font-size: 1.4em; text-align: center; text-transform: uppercase; padding: 0 0 1%; } .alphabet a { color: #666; margin: 0 .45%; } .alphabet a[title="0 argomenti"] { color: #ddd; } .terms-list { clear: both; margin: 0 auto; padding: 3.5% 0 5%; width: 64%; } .terms-list article h2 { font-size: 1.4em; } .terms-list article h2 a { color: #f7ca0d; } .terms-list article { padding-bottom: 1.5%; } .terms-list article a.view-article { display: none; } .social_term { border: 0 none; } @media screen and (max-width: 980px) { .terms-list { width: 90%; } .alphabet { padding: 2% 4%; } .alphabet a { margin: .6%; } } /*------------------------------------*\ END GLOSSARIO \*------------------------------------*/ /*------------------------------------*\ NEWSLETTER IN FOOTER \*------------------------------------*/ body .container_newsletter_footer{ margin-top: 0; } .foot_newsletter { padding: 5% 0; text-align: center; background: #eee; } ._form-content > h3 { color: #f7ca0d; margin: 0 0 0.5%; text-transform: uppercase; } .foot_newsletter ._form_element { float: none; width: 100%; } .foot_newsletter ._form-title { font-size: 1.5em; } .foot_newsletter p { color: #666; font-size: 0.7em; } .form_inline { padding: 2% 0; width: 100%; } .form_inline ._form_element { display: inline-block; width: auto; } .form_inline ._button-wrapper { clear: none; display: inline-block; padding: 0; width: auto; } .foot_newsletter input[type="text"] { border: 2px solid #f7c911; font-size: 0.7em; margin: 0 3%; padding: 0 8%; height: 2.6em; display: inline-block; } .foot_newsletter button { background: #f7c911; border: 0 none; color: #fff; margin-left: 8%; padding: 3.2% 9%; position: relative; text-transform: uppercase; top: 1px; vertical-align: middle; } ._error-inner { font-size: 10px; position: absolute; left: 11px; color: red; } .nlb { margin: 2% 0 -1px; } .chk div { font-size: 14px; line-height: 24px; padding: 16px 0; } .form_inline ._form_element.chk_foot { clear: both; display: block; font-size: 13px; line-height: 26px; width: 100%; margin-top: 13px; } .form_inline ._form_element.chk_foot ._error-inner{ top: -20px; } /*------------------------------------*\ END NEWSLETTER IN FOOTER \*------------------------------------*/ /*------------------------------------*\ NEWSLETTER MODAL \*------------------------------------*/ /* Newsletter Modal */ .nl_overlay { background: rgba(0, 0, 0, 0.7) ; bottom: 0; height: 100%; left: 0; overflow-y: auto; position: fixed; right: 0; text-align: center; top: 0; width: 100%; display: none; z-index: 80000; } .nl_modal { background: #fff none repeat scroll 0 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); margin: 10% auto; max-width: 640px; padding: 20px; width: 80%; position: relative; top: 10%; transition: all .6s ease; -webkit-transition: all .6s ease; } .nl_modal ::-webkit-input-placeholder{ /* WebKit browsers */ font-size: .7em; line-height: 2em; } .nl_modal :-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ font-size: .7em; line-height: 2em; } .nl_modalnl_modal ::-moz-placeholder{ /* Mozilla Firefox 19+ */ font-size: .7em; line-height: 2em; } .form_prodotto :-ms-input-placeholder{ /* Internet Explorer 10+ */ font-size: .7em; line-height: 2em; } .nl_modal ._error-inner{ font-size: 15px !important; color: #fd3d3d; } .nl_overlay.show .nl_modal { top: 0; } .nl_form { margin: 4% auto; padding: 0; width: 80%; } #modal_close { color: #666; font-family: lft-etica; font-size: 36px; font-weight: 400; position: absolute; right: 8px; top: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 32px; } .nl_modal ._form_element { width: 100%; } .nl_form p { font-size: 0.8em; } .nl_form input[type="text"] { border: 3px solid #F7C911; margin: 3% 0; text-align: center; padding: 0.5% 1.5%; } .nl_modal button { background: #f7c911 none repeat scroll 0 0; border: 0 none; color: #fff; margin: 6% 0 0; padding: 1% 15%; width: 180px; } @media screen and (max-width: 440px) { .nl_modal .nl_form { margin: 0; width: 100%; } .nl_modal .nl_form ._form-title { font-size: 1em; letter-spacing: 0; } .foot_newsletter input[type="text"] { line-height: 1.4em; } } /*------------------------------------*\ END NEWSLETTER MODAL \*------------------------------------*/ /*------------------------------------*\ FOOTER \*------------------------------------*/ .footer_menus { background: #242424 none repeat scroll 0 0; color: #fff; position: relative; min-height: 380px; height: auto; padding-bottom: 45px; } .footer_partner { background: #eee; bottom: 0; position: absolute; right: -16%; top: 0; width: 20%; perspective: 800px; -webkit-perspective: 800px; } .partner_button:before { background: url('https://www.directafin.it/wp-content/themes/directafin/img/lock.svg') 50% 50% no-repeat; background-size: contain; content: ""; display: block; left: 0; padding-bottom: 60%; position: absolute; top: 12%; width: 100%; } .footer_main { padding-right: 4%; width: 100%; } .foot_col { float: left; width: 19%; padding: 0 3%; border-left: 1px solid #F7C911; margin: 4% 0 2%; height: 100%; position: relative; display: block; } .foot_col ul li.floatme { float: left; } .foot_col ul li.floatme:after { content: " - "; display: block; float: right; font-size: 0.6em; margin: 4px 6px -4px; } .foot_col.fc4 { width: 24%; } .foot_col.fc1 { border: 0 none; } .foot_col.fc5 { padding-bottom: 1%; } .foot_col h3 { font-size: .8em; margin: 0 0 10%; padding: 0; } .foot_col ul li { height: auto; line-height: 1em; } .foot_col ul li a { color: #fff; font-size: 0.6em; margin: 0; padding: 0; } .footer_landing{ padding: 15px; } .footer_landing *{ font-size: 15px !important; } .footer_link_landing{ font-size: 0.6em; text-align: center; padding: 1% 1% 0; } .copyright { font-size: 0.6em; margin: 0; padding: 1% 0; text-align: center; } .partner_mobile { padding-top: 5%; } .partner_button { background: #f7c911; bottom: 0; font-size: 0.6em; left: 0; line-height: 1em; padding: 0 8%; position: absolute; text-align: center; top: 0; width: 20%; word-wrap: break-word; cursor: pointer; } .word1 { display: block; padding-top: 720%; position: relative; } .word2 { padding-top: 100%; } .footer_partner, .footer_main { transition: all .6s ease; -webkit-transition: all .6s ease; } .showPartnerArea .footer_main { transform: translate(-16%, 0px); -webkit-transform: translate(-16%, 0px); } .showPartnerArea .footer_partner { transform: translate(-80%, 0px); -webkit-transform: translate(-80%, 0px); } .partner_form { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; height: 100%; left: 20%; position: absolute; top: 0; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform-origin: 0 50% 0; -webkit-transform-origin: 0 50% 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .6s ease; -webkit-transition: transform .6s ease; width: 80%; } .showPartnerArea .partner_form { transform: rotateY(0); -webkit-transform: rotateY(0); } .partner_form > form { padding: 5% 10%; } .pf_row label { color: #333; font-size: 0.6em; } .pf_row > input { color: #333; font-size: 0.6em; padding: 1.5% 3%; width: 100%; } .pf_submit { padding-top: 10%; } .pf_submit input { background: #f7c911; border: 0 none; color: #fff; display: block; font-size: 0.75em; } .work_with_us { border-top: 2px dashed #aaa; color: #333; font-size: 0.5em; margin-top: 2%; padding: 7% 10% 0; } .work_with_us > a { font-size: 1.2em; font-weight: 800; color: #333; } a.pm_button { border: 2px solid #fff; color: #fff; margin: 0 auto; padding: 0.5% 0; text-align: center; text-transform: uppercase; width: 60%; display: block; } .partner_mobile { display: none; } .follow_icon.fb { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/social_fb.svg'); } .follow_icon.tw { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/social_tw.svg'); } .follow_icon.gp { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/social_gp.svg'); } .follow_icon.li { background-image: url('https://www.directafin.it/wp-content/themes/directafin/img/social_li.svg'); } .follow_icon { background-position: 50% 50%; background-repeat: no-repeat; background-size: 75% auto; border: 1px solid #fff; display: inline-block; margin: 0 1%; padding-bottom: 16%; width: 16%; } .footer_landing{ min-height: 0px; padding-bottom: 15px !important; } .footer_landing .footer_main{ padding: 0px; } .footer_link_landing a{ color: white; } /*------------------------------------*\ END FOOTER \*------------------------------------*/ /* @group Landing */ .bg_white{ background-color: white; } .bg_yellow{ background-color: #F7CA0D ; } .t_right{ text-align: right; } .landing_page .padding_text{ padding-top: 0.6% !important; } .landing_page .chisiamo_row { margin: 0; } .landing_page > #fascia_condizioni{ padding: 10px 0px 0px; } .landing_page #fascia_condizioni .padding_text{ padding: 0px !important; } .fascia_top_landing{ position: relative; padding: 175px 7.5% 70px 7.5%; min-height: 700px !important; } .col_heading_landing{ padding: 15px; } .col_heading_landing h1{ display: inline-block; font-family: Montserrat; font-size: 2em; line-height: 1em; color: #f7ca0d; text-transform: uppercase; margin-top: 0; } .bot_slogan_landing{ color: #fff; font-family: Montserrat; font-size: 1.1em; line-height: 1.3em; width: 90%; } .listed_landing{ padding-left: 30px; margin-top: 28px; } .listed_landing li { color: white; font-size: 0.65em; line-height: 200%; padding-left: 8%; position: relative; margin-bottom: 5px; padding-top: 0px !important; } .listed_landing li:before { height: 80%; left: 2%; position: absolute; top: 0; width: 4%; background: url(https://www.directafin.it/wp-content/themes/directafin/img/spunta_no_border.svg) 50% 0% no-repeat; background-size: contain; content: ''; margin-top: 1.2%; } .listed_landing b{ color: #F7CA0D ; } .box_form{ padding: 25px; } .bg_yellow .title_form{ color: white; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; } .bg_yellow .title_form b{ color: black; } .bg_white .title_form{ color: #000000; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; } .bg_white .title_form b{ color: #F7CA0D ; } #form_landing_1{ margin: 0px; width: 100%; padding-bottom: 0; padding-top: 0; } #form_landing_1 .privacy_check{ font-size: 0.4em; line-height: 1.5em; } #form_landing_1 .privacy_check a{ color: black; } #form_landing_1 ._button-wrapper{ padding-bottom: 0; } #form_landing_1 .squaredFour { margin: 2px 11px 4px 0; position: relative; vertical-align: middle; float: left; width: 20px; } #form_landing_1 .squaredFour label { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; background: transparent; border-radius: 0px; box-shadow: inset 0px 0px 0px white, 0px 0px 0px rgba(0,0,0,0.5); border: 2px solid white; } #form_landing_1 .squaredFour label:after { width: 20px; height: 11px; top: -3px; left: 1px; } #form_landing_1 input, #form_landing_1 textarea, #form_landing_1 .aida_drop_button{ border-radius: 0px; font-size: .6em; width: 97%; padding: 12px; height: 49px; border: 2px solid white; background-color: transparent; margin-bottom: 7%; font-weight: bold; overflow: hidden; line-height: 1.2em; background-color: white; } *#form_landing_1 textarea{ width: 100%; margin-bottom: 0; height: 150px; } #form_landing_1 #invio_preventivo{ width: 100% !important; background-color: white; color: black; height: 44px !important; padding-top: 20px; padding-bottom: 20px; font-weight: 700; margin-bottom: 0px; font-size: 1.1em; transition: all .6s ease; -webkit-transition: all .6s ease; float: none !important; height: 20% !important; } #form_landing_1 #invio_preventivo:hover{ background-color: transparent; } .landing_page #form_landing_1 #invio_preventivo{ background-color: #71b62c !important; color: white !important; border-color: #71b62c; float: none !important; } .landing_page #form_landing_1 #invio_preventivo:hover{ background-color: #549116 !important; border-color: #549116 !important; } #form_landing_1 input::-webkit-input-placeholder, #form_landing_1 textarea::-webkit-input-placeholder{ /* WebKit browsers */ color: black !important; opacity: 1; } #form_landing_1 input:-moz-placeholder, #form_landing_1 textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color: black !important; opacity: 1; } #form_landing_1 input::-moz-placeholder, #form_landing_1 textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ color: black !important; opacity: 1; } #form_landing_1 input:-ms-input-placeholder, #form_landing_1 textarea:-ms-input-placeholder{ /* Internet Explorer 10+ */ color: black !important; opacity: 1; } .add_messaggio{ cursor: pointer; display: inline-block; color: white; text-decoration: underline; font-size: .7em; margin-bottom: 20px; } .box_messaggio{ display: none; } #form_landing_1 textarea:focus{ outline: none; } #form_landing_1 .f_problem input, #form_landing_1 .f_problem .aida_drop_button { border: 2px solid red !important; } .box_shadow{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.35); } #form_landing_1 .aida_drop_list { color: #fff; margin-top: -12px; overflow: hidden; padding: 14px 0 0; width: 96%; z-index: 5; background-color: black; } #form_landing_1 .aida_drop_option.selected{ background: white; color:black; } #form_landing_1 .ui-autocomplete { text-align: left; background: #000000; color: #fff; font-size: 0.7em; padding: 5px; position: absolute !important; width: 112% !important; max-height: 320px; overflow-y: scroll; z-index: 11; left: 2px; padding: 5px; } .col_heading_landing .box_shadow{ display: none; } #form_landing_1 #invio_preventivo{ width: 100% !important; background-color: white; color: black; height: auto; padding-top: 20px; padding-bottom: 20px; font-weight: 700; margin-bottom: 0px; font-size: 1.1em; transition: all .6s ease; -webkit-transition: all .6s ease; } .btn_mobile_preventivo{ display: none; background-color: #F7CA0D ; color: black; height: auto; padding-top: 20px; padding-bottom: 20px; font-weight: 700; margin: 50px; font-size: 1.1em; transition: all .6s ease; -webkit-transition: all .6s ease; text-align: center; text-transform: uppercase; } /* Landing 2 */ .form_landing_2 ._form-content{ position: relative; } .container_form_scroll{ overflow: hidden; width: 100%; } .inner_container_form_scroll{ transition: all .5s ease; -webkit-transition: all .5s ease; position: relative; width: 300%; left: -00%; } .inner_container_form_scroll.step_1{ left: 0%; } .inner_container_form_scroll.step_2{ left: -100%; } .inner_container_form_scroll.step_3{ left: -200%; } .single_form_scroll{ width: 33.3333%; float: left; } .slider_preventivo_box{ padding: 20px 25px 15px 0px; } .ui-slider span {outline:none !important;} .ui-slider span:focus { outline:none !important; } .ui-slider-horizontal { display: block; height: 15px !important; margin: 0; position: relative; border-radius: 25px !important; border: 2px solid #F7CA0D !important; } .ui-slider-range { background: none 0 0 repeat scroll #F7CA0D !important; height: 11px; position: absolute; top: 0px; } body .slider_preventivo_box .ui-slider-handle { height: 24px; width: 24px; margin: 0 -8px; z-index: 10; position: absolute; top: -7px; cursor: pointer; background-color: black !important; border: 0px !important; border-radius: 50%; cursor: pointer !important; } .form_landing_2 .input_slider{ border: 2px solid #F7CA0D ; width: 20%; position: relative; display: inline-block; vertical-align: middle; } .form_landing_2 .input_slider input{ border: 0px !important; margin: 0px !important; width: 100% !important; } .input_slider span{ position: absolute; right: 0; top: 0; bottom: 0; color: black; background-color: #F7CA0D ; height: 100%; font-size: 16px; padding: 14px 15px 9px; } .slider_preventivo_box{ width: 50%; vertical-align: middle; display: inline-block; } .label_slider{ display: inline-block; width: 27%; color: black; font-size: 14px; font-weight: bold; vertical-align: middle; } .height_clear{ height: 15px; } /*.btn_preventivo{ margin-top: 20px; } */ .btn_preventivo div{ border: 2px solid #F7CA0D ; color: black; text-transform: uppercase; padding: 15px 25px; font-weight: bold; font-size: 20px; display: inline-block; cursor: pointer; } .btn_next_preventivo{ float: right; /* background-color: #F7CA0D ; */ /* 23.06.2017 modificato sfondo giallo in verde da FG come sulle landing */ background-color: #71b62c !important; border-color: #71b62c !important; color: white !important; } .btn_next_preventivo:hover{ background-color: #549116 !important; border-color: #549116 !important; } .form_landing_2 #invio_preventivo{ float: right !important; /* border: 2px solid #F7CA0D !important; */ border: 2px solid #71b62c !important; /* color: black; */ color: white !important; text-transform: uppercase; padding: 17px 25px !important; font-weight: bold; font-size: 20px !important; display: inline-block !important; cursor: pointer; background-color: #71b62c !important; /* background-color: #F7CA0D !important; */ width: auto !important; } .form_landing_2 #invio_preventivo:hover{ background-color: #549116 !important; border-color: #549116 !important; } /* fine modifica fg */ .form_landing_2 #invio_preventivo.btn_no_visible, .btn_next_preventivo.btn_no_visible{ display: none !important; } .landing_page .btn_next_preventivo{ background-color: #71b62c !important; border-color: #71b62c !important; color: white !important; } .landing_page .btn_next_preventivo:hover{ background-color: #549116 !important; border-color: #549116 !important; } .landing_page .form_landing_2 #invio_preventivo{ border: 2px solid #71b62c !important; background-color: #F7CA0D !important; } .form_landing_2 #invio_preventivo:hover{ border-color: #549116 !important; } .form_landing_2 ._field3{ width: 33.1%; } .form_landing_2 .privacy_check{ width: 70% !important; } .form_landing_2 .squaredFour label { border: 2px solid #F7CA0D !important; } .form_landing_2 input, .form_landing_2 textarea, .form_landing_2 .aida_drop_button{ border: 2px solid #F7CA0D !important; } .form_landing_2 .aida_drop_list { height: 150px; top: 61px !important; overflow-y: auto !important; left: 2px; background-color: #F7CA0D !important; } #form_landing_1.form_landing_2 .ui-autocomplete { max-height: 100px !important; height: 200px !important; } .bar { overflow: hidden; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border: 2px solid #F7CA0D ; } .bar > span { display: block; height: 15px; width: 33.333%; transition: all 1s ease; -webkit-transition: all 1s ease; position: relative; top: 0; } .bar > span.step_2 { width: 66.666%; } .bar > span.step_3 { width: 100%; } .stripe > span { background-size: 30px 30px; background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(25%,rgba(255,255,255,0.5)), color-stop(25%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.5)), color-stop(75%,rgba(255,255,255,0.5)), color-stop(75%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); } .color4 > span { background-color: #f1c407; } .animate { animation: progress 4s linear infinite; -moz-animation: progress 4s linear infinite; -webkit-animation: progress 4s linear infinite; -ms-animation: progress 4s linear infinite; -o-animation: progress 4s linear infinite; } @-webkit-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @-moz-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @-ms-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @-o-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @media screen and (min-width:799px){ .col_heading_landing{ background-image: none !important; } } .landing_page .col-sm-6 h2{ font-size: 2.3em; } @media screen and (max-width: 1350px){ .label_slider{ width: 20%; } .form_landing_2 .input_slider{ width: 26%; } } @media screen and (max-width: 1250px){ .col_heading_landing h1{ font-size: 40px; } .bot_slogan_landing{ font-size: 18px; line-height: 1; } } @media screen and (max-width: 1100px){ .form_landing_2 #invio_preventivo, .btn_preventivo div{ font-size: 15px ; } .form_landing_2 #invio_preventivo{ padding-top: 16px !important; } } @media screen and (max-width: 799px){ .bot_slogan_landing{ padding-bottom: 20px; } .fascia_top_landing{ background-image: none !important; } #form_landing_1 .ui-autocomplete { font-size: 12px; } .form_landing_2 .aida_drop_list { font-size: 18px; line-height: 19px; padding-top: 0px !important; } .form_landing_2 .privacy_check{ width: 100% !important; } .form_landing_2 .aida_drop_option{ padding-bottom: 4px; padding-top: 4px; } .btn_preventivo{ margin-top: 50px; } .phone_field{ width: 100% !important; } .phone_field input{ width: 98.4% !important; margin-bottom: 4% !important; } .col_heading_landing .box_shadow{ display: block; } .fascia_top_landing{ position: relative; padding: 79px 0 0; min-height: 700px !important; } .box_form{ padding: 15px 15px 50px; } .form_col{ padding: 0px; } #form_landing_1 ._form_element { float: left; width: 50%; } #form_landing_1 .box_messaggio{ width: 100%; } #form_landing_1 ._form-content{ padding: 0; } #form_landing_1 ._form-content ::-webkit-input-placeholder{ /* WebKit browsers */ font-size: 12px; line-height: 14px; } #form_landing_1 ._form-content :-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ font-size: 12px; line-height: 14px; } #form_landing_1 ._form-content ::-moz-placeholder{ /* Mozilla Firefox 19+ */ font-size: 12px; line-height: 14px; } #form_landing_1 ._form-content :-ms-input-placeholder{ /* Internet Explorer 10+ */ font-size: 12px; line-height: 14px; } .listed_landing{ padding-left: 0px; } #form_landing_1 #invio_preventivo{ font-size: 19px !important; } } @media screen and (max-width: 767px){ .logo_landing { width: 164px; padding-top: 8px; } .logo_landing img{ height: 50px; } .fascia_top_landing{ min-height: 0px !important; } .label_slider{ width: 100%; float: none !important; } .slider_preventivo_box{ width: 60%; padding: 5px; } .form_landing_2 .input_slider{ width: 32%; margin-left: 4%; } .input_slider span{ position: absolute; right: 0; color: black; background-color: #F7CA0D ; height: 100%; font-size: 12px; padding: 9px 10px; } .form_landing_2 .input_slider input{ padding: 10px!important; } .btn_preventivo div{ padding: 5px 15px ; font-size: 19px ; } .form_landing_2 #invio_preventivo{ padding: 9px 15px !important; font-size: 16px !important; } } .landing_page .condizioni .padding_full_text, .condizioni .padding_full_text{ padding: 12px !important; } .container-fluid.condizioni { padding: 0px; } .fascia_introduzione_page .padding_full_text, .large .padding_full_text{ padding: 0px 25px; width: 100%; } @media screen and (max-width: 480px) { .fascia_top_landing .col_heading_landing.bg .z2 > br:first-child { display: none; } .condizioni .padding_text > p { font-size: 12px; line-height: 19px; } .landing_page .condizioni .padding_full_text, .condizioni .padding_full_text{ padding: 12px !important; } .btn_mobile_preventivo{ display: none; } .fascia_top_landing{ padding: 64px 0 0; } .mobile_hidden{ display: none; } .landing_page .padding_full_text ul li::before { display: block; } .col_heading_landing h1{ font-size: 28px; margin-top: 0; margin-bottom: 20px; } .listed_landing li { line-height: 20px !important; margin-bottom: 10px !important; } } /* @end */ /*------------------------------------*\ ANIMATE ENTRANCE \*------------------------------------*/ @media screen and (min-width: 1181px) { .perspective { perspective: 4000px; -webkit-perspective: 4000px; transform: rotateY(0); -webkit-transform: rotateY(0); } .pb_block { display: block; width: 100%; clear: both; position: relative; } .pb_block * { } .pb_block.anim { transition: all 1s ease; -webkit-transition: all 1s ease; transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); transform-origin: 50% 0; -webkit-transform-origin: 50% 0; position: relative; opacity: 0; } .pb_block.anim.viewed { opacity: 1; transform: rotateX(0); -webkit-transform: rotateX(0); } } /*------------------------------------*\ END ANIMATE ENTRANCE \*------------------------------------*/ @media screen and (max-width: 1480px) { .numero_verde { width: 190px; } header > nav { right: 210px; } nav.nav > ul > li.menu-item { font-size: 14px; } } @media screen and (max-width: 1280px) { header > nav.nav > ul > li:nth-child(1) { display: none; } } @media screen and (min-width: 1181px) { header .mobilogo, header .mobimenu { display: none; } } @media screen and (max-width: 1180px) { div.fb{ top: -5px; position: relative; } h2 { font-size: 1.5em !important; } .fix_font { font-size: 20px; } .container_newsletter_footer, .footer_menus { font-size: 16px; } .cta { display: block; } .footer_menus { padding-bottom: 48px; } /* TABLET LANDSCAPE */ header > nav, header .logo { display: none; } header > nav { backface-visibility: hidden; transform: translateZ(0); } header .mobilogo, header .mobimenu { display: block; } .mobilogo { height: 80px; padding: 10px; width: 190px; } .slider_fullheight { padding: 80px 0 0; } .row.intro_background { padding: 22px 0 0; } .tlist { width: 100%; border-top: 2px solid #e5e5e5; } .tabs_list { padding-right: 0; } h3.th3 { border-bottom: 2px solid #e5e5e5; } h3.th3:after { border-bottom: 5px solid transparent; border-left: 8px solid #f7c911; border-top: 5px solid transparent; } h3.th3:hover:after { border-left: 8px solid #fff; } .titem.selected h3.th3:after { border-left: 8px solid #fff; } .titem.selected .tblock { right: 0; padding-left: 37px !important; } .mobile_hide { display: none; } .mobile_show { display: block; } header .mobimenu { background: #000; width: 50px; top: 0; right: 0; height: 80px; position: absolute; cursor: pointer; } header .mobimenu .stick { width: 72%; background: #fff; height: 4px; position: absolute; display: block; top: 50%; left: 50%; margin-left: -36%; margin-top: -2px; transition: all .6s ease; -webkit-transition: all .6s ease; } header .mobimenu .stick.s1 { margin-top: -12px; } header .mobimenu .stick.s3 { margin-top: 8px; } header .mobimenu .stick.s1 { margin-top: -12px; } header .mobimenu.mobile_open .stick.s1 { margin-top: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); } header .mobimenu.mobile_open .stick.s2 { margin-top: 0; width: 0; margin-left: 0; opacity: 0; } header .mobimenu.mobile_open .stick.s3 { margin-top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .numero_verde { right: 50px; height: 80px; } .landing_page .numero_verde{ right: 0px; } /* Mobile Menu */ .nav_menu{ position: relative; width: 100%; height: 100%; overflow: auto; padding-top: 80px; padding-bottom: 48px; } header > nav { background: #000; bottom: 0; display: block; height: unset; left: 0; position: fixed; right: 0; top: 80px; line-height: unset; overflow: auto; display: none; } header > nav.nav > ul > li:nth-child(1) { display: block; } header > nav.nav > ul > li:last-child { display: none; } nav.nav > ul > li { text-align: left; width: 100%; height: auto; padding: 2.5% 2%; opacity: 0; } nav.nav > ul > li.menu-item.current-menu-item > a { border: 0 none; } nav.nav > ul > li.menu-item a { border: 0 none; color: #fff; } nav.nav > ul > li.menu-item > ul > li > a { line-height: 1.3em; padding: 3.5% 8%; font-size: .85em; } nav.nav > ul { padding: 6% 0; } nav.nav > ul > li.menu-item { font-size: 18px; } nav.nav > ul > li#menu-item-647 > ul { padding: 0; width: 100%; padding-top: 2%; text-align: left; } nav.nav > ul > li ul { display: none; width: 100%; padding-top: 2%; } nav.nav > ul > li.menu-item > ul > li > a { color: #fff; } nav.nav > ul > li.menu-item > ul > li.menu-item-has-children > a { border: 0 none; padding: 3px 12px; line-height: auto; } nav.nav > ul > li.menu-item > ul > li.menu-item-has-children { float: none; width: 100%; line-height: auto; } nav.nav ul li.menu-item-has-children > a:after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; content: ""; display: inline-block; height: 10px; margin-left: 10px; position: relative; top: -4px; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 10px; transition: all .6s ease; -webkit-transition: all .6s ease; } nav.nav ul li.menu-item-has-children a.open:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); top: 0; } nav.nav > ul > li.menu-item > ul > li > ul > li > ul { padding-left: 0; } /* Form Tablet */ form.page_form, .padding_full_text { width: 90%; } } @media only screen and (max-width:992px){ .testo_foto .bg.goleft { right: auto; } .testo_foto { position: relative; min-height: 10px; } .testo_foto .text_section{ min-height: 10px; } .chisiamo_pagebuilder .text_section { padding-bottom: 25px; padding-top: 25px; } } @media screen and (min-width: 800px) { .jdesk { display: block; } .jmobi { display: none; } } @media screen and (max-width: 799px) { .testo_foto .pull-right { float: none !important; } span.date { background: transparent; clear: both; color: #333; display: block; float: none; padding: 5px 0 16px !important; text-align: center; line-height: 15px!important; } .post span.breadcrumb { padding-bottom: 0; width: 100%; line-height: 15px !important; text-align: center; } .bread_title{ display: none; } /* Modifiche a Diventa Partner */ body.page-id-742 #fascia_1.testo_foto .col-sm-6.bg { display: none; } body.page-id-742 #fascia_1.testo_foto .col-sm-6 .d_cell { background: #fff none repeat scroll 0 0; } .slogan_slider { perspective: 800px; -webkit-perspective: 800px; } .testo_foto .bg { padding-bottom: 86%; } .chisiamo_pagebuilder { padding: 0; } .top_slogan { border: 0 none; font-size: 2em; } .bot_slogan { font-size: 1em; margin-top: 0; padding-top: 0; } .testo_foto .bg { display: block; height: 0; left: auto; padding-bottom: 56%; position: relative; right: auto; top: auto; width: 100%; } /* TABLET PORTRAIT */ #fascia_chisiamo_top{ margin-bottom: 25px; } .fascia_introduzione_page{ margin-top: 0px; margin-bottom: 15px; } .jdesk { display: none; } .jmobi { display: block; } .col.goright { float: none; } .testo_icona .col.pull-right { float: none !important; padding: 0 10%; width: 100%; } .pb_icon { margin: 1% 0 5% 21.5%; } .firstcol { padding-bottom: 0 !important; } .slider_fullheight { max-height: 640px; } .row.intro_background { display: none; } .intro_foreground { font-size: 18px; } .row.intro_squares { padding: 0; margin-right: -10px; margin-left: -9px; } a.intro_square{ } ._form-content { font-size: 15px; padding-right: 20px; padding-left: 20px; } .intro_squares > div { float: left; padding: 4% 0; width: 50%; } .col-md-6.intro_box { padding-bottom: 0; } .tabs_list { font-size: 18px; margin: 0; padding: 0 5%; width: 100%; } .tblock { padding: 0 0 64% !important; position: relative; width: 100%; } .tlist { margin-top: 3%; padding: 0; } .tblock { overflow: hidden; padding: 0 !important; position: relative; width: 100%; right: auto; top: auto; bottom: auto; } .titem.selected .tblock { padding: 0 0 64% !important; } .twrap { width: 94%; } h3.th3 { font-size: 18px; padding: 20px; } .twrap > a.calculate .btn_face, a.showmore .btn_face, .twrap > a.calculate .btn_hidden, a.showmore .btn_hidden{ font-size: 15px !important; margin-bottom: 20px; } .testo_foto .btn_more_link .btn_face, .padding_full_text .btn_more_link .btn_face { font-size: 18px !important; line-height: 30px; height: auto !important; } input{ border-radius: 0px !important; } h3.th3:after { margin-top: -4px; right: 3.5%; transition: all .6s ease; -webkit-transition: all .6s ease; } .titem.selected h3.th3:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); } .carousel_canvas { font-size: 18px; margin-bottom: 20px; } #fascia_convenzioni .col.col-sm-6.bg { display: block; padding-bottom: 48%; position: relative; width: 100%; } #fascia_convenzioni h2 { padding: 3% 0 0; } .testo_foto .btn_more_link, .padding_full_text .btn_more_link { font-size: 1.5em; margin: 5% auto 7%; } .foot_newsletter { font-size: 18px; } #fascia_convenzioni.testo_foto .col.col-sm-6 { float: none; width: 100%; } /* Testimonials */ #testim_slider { background: transparent; border: 0 none; } .testimonials_canvas h3 { font-size: 2.5em; padding: 5% 20px; } .testimonial_slide > h4 { font-size: 2em; margin: 5% 0 0; text-align: center; } .testimonial_slide > h5 { font-size: 1.3em; text-align: center; } .quote { font-size: 1.4em; margin: 2% auto 16%; text-align: center; } .quote p:before, .quote p:after { display: none; } /* Footer Step 1 */ .footer_partner { display: none; } .partner_mobile { display: block; } .footer_main { padding-right: 0; } .foot_col, .foot_col.fc4 { width: 50%; } .foot_col.fc2, .foot_col.fc3, .foot_col.fc4 { border-left: 0 none; } .foot_col.fc5 { text-align: center; width: 100%; border-left: 0 none; } .foot_col h3 { font-size: 1.6em; } .foot_col ul li { line-height: 2em; } .foot_col ul li a { font-size: 1.1em; } .copyright { font-size: 1em; padding: 5%; } /* Pagina Interna Mobile */ .page_slider { max-height: 360px; } body.page-template-template-page-builder { font-size: 16px !important; } ._form_element { float: left; width: 100%; } ._form-content { font-size: 22px; } ._form-content { font-size: 22px; } ._form-content ::-webkit-input-placeholder{ /* WebKit browsers */ font-size: 15px; line-height: 34px; } ._form-content :-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ font-size: 15px; line-height: 34px; } ._form-content ::-moz-placeholder{ /* Mozilla Firefox 19+ */ font-size: 15px; line-height: 34px; } ._form-content :-ms-input-placeholder{ /* Internet Explorer 10+ */ font-size: 15px; line-height: 34px; } ._form_element > input, .aida_drop_button, .aida_drop_list { width: 93%; } .page_slider { font-size: 8px; max-height: 240px; } .page_quote { font-size: 12px; } .testo_foto a.btn_more_link, .padding_full_text a.btn_more_link { font-size: 14px; } .chisiamo_elem { width: 36%; } .chisiamo_divider { display: none; } } @media screen and (max-width: 640px) { .foot_newsletter ._form-title { margin-bottom: 15px; } .padding_text { padding: 3% 0; } .foot_newsletter { padding-top: 35px; padding-bottom: 35px; } .testo_icona .d_cell { padding: 25 !important; } .page_form_container { padding: 45px 15px 75px; } .page_form_container ._form-content { margin: 0; padding: 0; } .page_form_container input, .page_form_container select, .page_form_container textarea, .page_form_container .aida_drop_button{ width: 100%; padding: 5px; box-shadow: none !important; border-radius: 0px; } .page_form_container ._submit{ padding: 10px 15px; } .page_form_container ._button-wrapper{ text-align: center; padding-top: 40px; } .page_quote{ font-size: 14px; width: 70%; } .size-full{ height: auto; } body{ font-size: 18px !important; line-height: 30px !important; } .padding_text, .single .padding_text p { font-size: 15px; line-height: 29px; } .bread_box{ font-size: 12px; } .text_section > p { color: #444444; font-size: 15px; line-height: 29px; } .text_section h3 { font-size: 18px; } h2.title_section { font-size: 20px !important; } .landing_page .col-sm-6 h2{ font-size: 20px !important; } .box_form_landing_2{ padding-bottom: 0px; } .testo_icona .col.pull-right { padding-right: 25px; padding-left: 25px; } .padding_text .col.padding_text { padding: 0; } .padding_full_text { width: 100%; padding-right: 25px; padding-left: 25px; } .fascia_introduzione_page .padding_full_text, .large .padding_full_text{ padding: 0px 25px; width: 100%; } .testo_icona .text_section > p { font-size: 15px; } .text_section li, .intro_text li { font-size: 15px; } div.fb{ top: -2px; position: relative; } .top_slogan { font-size: 28px !important; } .carousel_canvas > h3 { padding-right: 20px; padding-left: 20px; } .bot_slogan { font-size: 18px !important; padding-top: 1%; padding-right: 15px; padding-left: 15px; } .intro_text { font-size: 15px; } .ttext { font-size: 15px; } .carousel_canvas > .subtit { font-size: 15px; } .quote { font-size: 15px; } .text_section li:before, .intro_text li:before { top: 7px; width: 18px; left: 0; } ol.flex-control-nav li { margin: 0 1.5%; width: 7.5%; } .slider_fullheight { max-height: 480px; } #home_slider li:not(:first-child) .slogan_slider { display: block; margin-top: -25%; } #home_slider a.showmore { margin-bottom: 8%; } a.showmore { width: 50%; display: block; } a.showmore.page_quote2 { width: 64%; display: block; } .col-md-6.intro_box { padding: 0 20px; } .intro_squares > div { padding: 2% 0; } .intro_square { padding-bottom: 82%; width: 92%; } .tabs_list { padding-top: 5%; } .tabs_list > h3, .tabs_list .intro_text { text-align: center; } .tblock { height: 0; overflow: hidden; padding: 0; background: #fff !important; transition: all .6s ease; -webkit-transition: all .6s ease; } .titem.selected .tblock { height: auto; padding: 0 !important; } .twrap { background: #fff; left: 0; position: relative; width: 100%; } .twrap h4 { display: none; } .carousel_canvas .subtit { padding: 0 10%; } .carousel_wrap { width: 100%; } .c_img { margin: 0 auto; padding-bottom: 14%; width: 80%; } .c_txt { font-size: 0.7em; padding: 1% 20%; } .carousel_wrap ol.flex-control-nav li { width: 8%; } .flexslider { position: relative; } .carousel_wrap { padding-bottom: 5%; } .testo_foto .btn_more_link, .padding_full_text .btn_more_link { font-size: 2em; } .form_inline ._form_element { display: block; margin-bottom: 2%; } .foot_newsletter input[type="text"] { font-size: 1.1em; padding: 1% 3%; } .foot_newsletter button { font-size: 18px; margin-left: 0; padding: 10px 15px; margin-top: 15px; } .padding_full_text .btn_more_link .btn_hidden, .padding_full_text .btn_more_link .btn_face, .padding_full_text .btn_more_link .btn_hover, .testo_foto .btn_more_link .btn_hidden, .testo_foto .btn_more_link .btn_face, .testo_foto .btn_more_link .btn_hover { font-size: 0.5em; text-transform: uppercase; } .nl_form input[type="text"] { width: 100%; } .nl_form input[type="text"] { width: 100%; } .nl_modal p { font-size: 0.6em; line-height: 1.4em; } .nl_modal .chk div { font-size: 12px; line-height: 18px; padding: 8px 0; } .foot_newsletter ._form_element{ margin-bottom: 25px; } .foot_newsletter ._form_element input{ width: 100%; margin: 0px 0px 0px; } } @media screen and (max-width: 560px) { /* Footer Step 2 */ .footer_main { font-size: 12px; } .foot_col, .foot_col.fc4 { width: 100%; border-left: 0 none; margin: 8% 0 0; padding: 0 8%; } .chisiamo_elem { width: 48%; } .chisiamo_divider { display: none; } } @media screen and (max-width: 480px){ header, header .mobimenu { height: 64px; } h1.post_title { font-size: 1.4em; margin-bottom: 5px; margin-top: 5px; } header > nav { top: 64px; } .slider_fullheight { padding: 64px 0 0; } .mobilogo { height: 64px; padding: 8px 2px; width: 140px; } .testimonials_canvas { font-size: 10px; } .numero_verde { height: 64px !important; padding: 10px 5px; width: 120px; } #fascia_convenzioni h2 { font-size: 3.5em; } .testo_foto .btn_more_link, .padding_full_text .btn_more_link { font-size: 2.3em; } .page_slider { font-size: 6px; } .intro_square h4 { font-size: 12px } .foot_newsletter input[type="text"] { width: 90%; } .testo_foto .btn_more_link, .padding_full_text .btn_more_link { width: 90%; } } /*------------------------------------*\ ANIMATION \*------------------------------------*/ .animated{ -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite{ -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @media screen and (max-width: 767px){ .mobileButton{ width: 100% !important; text-align: center; } .mobileButtonIndietro{ border: none !important; margin-top: 2%; padding-left: 0px !important; font-size: 11px !important; margin-bottom: 15px; } .bar{ bottom: 10px !important; position: relative; } } .mobileButtonIndietro{ border: none !important; margin-top: 2%; padding-left: 0px !important; font-size: 11px !important; } .mobileButton{ width: 100% ; float: none !important; text-align: center; } .invisible1{ visibility: hidden !important; } body > div.contianer-fluid.fascia_top_landing.bg { background-position: 0 64px; } #Preventivo1Minuto > div.z2.animated.slideInLeft > h1 { font-size: 1.5em; } #Preventivo1Minuto > div.z2.animated.slideInLeft > div { font-size: 0.875em; }