/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */

body, h1, h2, p, ul, li, img, table, td {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.header, .content, .footer {
    padding: 20px;
}

/* Header */
.topkeywords h1 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px;
}

.contatti {
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

.contatti td {
    padding: 10px;
}

.menu_container {
    background-color: #f4f4f4;
    padding: 10px 0;
}

.menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

.menu ul li {
    margin: 0 10px;
}

.menu ul li a {
    text-decoration: none;
    color: #333;
    padding: 10px 20px;
    display: block;
}

.menu ul li a:hover {
    background-color: #ddd;
}

/* Logo */
.logo {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
}

/* Content */
.bg {
    background-color: #fff;
    padding: 20px;
    margin: 20px 0;
}

.col_1 {
    width: 100%;
}

.boxnewscontainer_title h1 {
    font-size: 2em;
    margin-bottom: 20px;
    text-align: center;
}

.container_top_research p {
    margin-bottom: 20px;
}

.container_top_research img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 10px;
}

th, td {
    text-align: left;
}

.content_bottom {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

/* Footer */
.footer p {
    margin-top: 20px;
}


/* ==========================================================================
   2. RESPONSIVE FIXES
   ========================================================================== */ 

/* Desktop / Tablet Landscape (max-width: 1199px)
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 1199px) {
    
    /* Back to Top Button */
    .top {
        height: 40px;
        width: 40px;
        right: 10px;
        bottom: 50px;
    }

    /* Navbar with Login and Signup */
    .navbar-nav > li > a.btn-login {
        margin-left: 100px;
        margin-right: 10px;
    }

    /* Hero Closeup */
    .closeup-box img {
        width: 100%;
        height: auto;
    }

    /* Content Dashboard */ 
    .content-dashboard .dash-left {
        margin-left: -500px;
    }

    /* Features Device */ 
    .features-device {
        padding-top: 0;
    }

    /* Cta section */
    .cta .outline .lead {
        margin-top: 0;
    }

    /* Testimonial Section */
    .testimonials .big-img-left blockquote p {
        padding-top: 5px;
    }

    /* Video Section */
    .video .popup-text {
        padding-top: 15px;
    }

    /* Pricing Section */
    .pricing-st .h2 {
        padding-top: 0;
    }
}


/* Tablet Portrait (max-width: 991px)
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 991px) {
    
    /* Typography */
    h1, .h1 {
        font-size: 40px;
        line-height: 46px;
    }

    h2, .h2 {
        font-size: 32px;
        line-height: 36px;
    }

    h3, .h3 {
        font-size: 28px;
        line-height: 32px;
    }

    h4, .h4 {
        font-size: 26px;
        line-height: 30px;
    }

    .lead {
        font-size: 20px;
        line-height: 24px;
    }

    /* Cols/Rows Spacing & Alignment */
    .c2 div[class^="col-md"]:nth-child(1),
    .c3 div[class^="col-md"]:nth-child(1),
    .c3 div[class^="col-md"]:nth-child(2),
    .c4 div[class^="col-md"]:nth-child(1),
    .c4 div[class^="col-md"]:nth-child(2),
    .c4 div[class^="col-md"]:nth-child(3) {
        margin-bottom: 30px;
    }

    .c2.text-center div[class^="col-md"],
    .c3.text-center div[class^="col-md"],
    .c4.text-center div[class^="col-md"] {
        padding-left: 110px;
        padding-right: 110px;
    }

    .new-row-md {
        margin-top: 30px;
    }

    .center-md {
        text-align: center;
    }

    /* Form Inline */
    .form-inline {
        padding-left: 30px;
        padding-right: 30px;
    }

    .form-inline .form-group, 
    .form-inline .form-control, 
    .form-inline.double-input .form-group,
    .form-inline.double-input .form-control, 
    .form-inline button, 
    .form-inline.double-input button {
        width: 100%;
        margin-bottom: 2px;
    }

    /* Show Navbar Toggle and Hide Navbar Menu, Bootstrap Fixes */
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 2px solid #E8E8E8;
        box-shadow: none;
        margin-top: 15px;
        padding-left: 0;
        padding-right: 0;
    }

    .bg-color .navbar-collapse {
        border-top-color: #fff;
    }
            
    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse.collapse.in {  
        display: block !important; 
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px 0;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        display: block;
        border-bottom: 1px solid #E8E8E8;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    /* Unificati i selettori duplicati di btn-nav */
    .navbar-nav > li > a.btn-nav {
        border-bottom: none;
        margin: 10px 0 5px 10px;
        padding: 10px 15px; 
        display: inline-block;
        width: auto;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .bg-color .navbar-nav > li > a {
        border-bottom-color: #fff;
    }

    .navbar-nav > li > a:hover, 
    .navbar-nav > li > a:focus, 
    .navbar-nav > .active > a, 
    .navbar-nav > .active > a:focus, 
    .navbar-nav > .active > a:hover {
        background-color: transparent;
    }

    /* Dropdown Menu */
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-nav .open .dropdown-menu.multi-level {
        height: 70px;
        overflow-y: scroll;
    }

    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 20px;
        display: inline-block;
    }

    .navbar-nav .open .dropdown-menu .dropdown-header,
    .navbar-nav .open .dropdown-menu > li > a {
        padding: 5px 15px 5px 25px;
    }

    /* Navbar Transparent */
    .navbar.bg-transparent {
        background-color: #fff;
    }

    .navbar.bg-transparent .logo-white {
        display: none;
    }

    .navbar.bg-transparent .logo-black {
        display: block;
    }

    .navbar.bg-transparent .navbar-nav > li > a {
        color: #404B55;
    }

    .navbar.bg-transparent .navbar-nav > li > a.btn-nav {
        color: #fff;
    }   

    /* Navbar-Only-Logo */
    .nav-onlylogo.navbar-static-top.bg-transparent {
        background-color: transparent;
    }

    .navbar.nav-onlylogo.bg-transparent .logo-white {
        display: none;
    }

    .navbar.nav-onlylogo.bg-transparent .logo-black {
        display: block;
    }

    /* Navbar with Login and Signup */
    .navbar-nav > li > a.btn-login, 
    .navbar-nav > li > a.btn-signup {
        margin: 10px 0 0 10px;
        display: inline-block;
        float: left;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 0;
        padding: 10px 25px;
    }

    /* Navbar 3cols */
    .nav-3cols-logo {
        text-align: left;
    }

    .navbar.bg-transparent .nav-3cols {
        color: #404B55;
    }

    .navbar.bg-transparent .nav-3cols-logo .logo-white, 
    .navbar.bg-transparent .nav-3cols-logo .logo-black {
        float: left;
    }

    /* Hero Section */
    .hero {
        text-align: center;
    }

    .hero, .hero.height-800 {
        height: 600px;
    }

    .closeup-box {
        display: none;
    }

    .dashboard-box img {
        height: 500px;
    }

    .hero-leadbox .form-horizontal {
        margin-top: 50px;
    }

    .popup-box img {
        max-width: 50%;
    }

    .popup-box .popup-button {
        left: 43%;
    } 

    .big-popup i {
        font-size: 120px;
    }

    .watch-video {
        display: block;
        margin-left: 0;
        margin-top: 15px;
    }

    /* Content Block */ 
    .content-block h2,
    .content-block .h2,
    .content-block .lead {
        text-align: center;
    }

    /* Content Dashboard */    
    .content-dashboard img {
        width: 100%;
        height: auto;
    }

    .content-dashboard .dash-left {
        margin-left: 0;
    }
    
    /* Content Split */ 
    .content-split .container {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .content-split .img-block {
        position: static;
        height: 450px;
    }

    .content-split .content-block {
        height: 400px;
        text-align: center;
        padding-left: 80px;
        padding-right: 80px;
    }
    
    /* Content Spotlight */
    .spotlight-block > figure,
    .spotlight-block > figure > .img-wrap,
    .spotlight-block > .spotlight-text {
        height: 450px;
    }

    .spotlight-block > .spotlight-text {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 20px;
    }

    .spotlight-block.img-left > .spotlight-text:after,
    .spotlight-block.img-right > figure:after {
        width: 0;
    }

    .content-spotlight .container-fluid {
        padding: 0;
    }

    /* Content Grid */
    .content-grid > div {
        height: 450px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .content-grid > div:last-child {
        margin-bottom: 0;
        height: 600px;
        padding-right: 15px;
    }

    .content-grid > div:first-child {
        padding-right: 15px;
    }

    .content-grid .lead-block {
        padding: 80px 40px;
    }

    .content-grid .img-block img {
        width: 100%;
        height: auto;
    }

    .content-align-md .y-middle {
        display: block !important;
    }

    /* Features Block */
    .features-block h4 {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .features-list-img {
        padding-left: 200px;
        padding-right: 200px;
    }

    .content-dashboard .features-block img {
        padding-bottom: 20px;
    }

    /* Features Tab */
    .features-tab .tab-title {
        width: 100%;
        border-top: 1px solid #fff;
        padding: 30px 15px;
    }

    .features-tab .tab-content {
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
        opacity: 0;
        margin-top: 0;
        height: 0;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .features-tab .tab-title.current + .tab-content {
        height: auto;
        opacity: 1;
        padding: 20px 15px;
    }

    /* Cta section */
    .cta .outline {
        text-align: center;
        margin-left: 20px;
        margin-right: 20px;
    }

    .cta .outline .lead {
        margin-bottom: 20px;
    }

    .cta .outline.no-border {
        margin-left: 0;
        margin-right: 0;
    }

    /* Testimonial Section */
    .testimonials .carousel-indicators {
        bottom: -50px;
    }

    .testimonials .big-img-left blockquote {
        text-align: center;
    }

    .testimonials .big-img-left blockquote p {
        padding-top: 15px;
    }

    .testimonials-twitter .twitter-row {
        margin-top: 30px;
    }

    /* Video Section */
    .video {
        text-align: center;
    }

    .video h4 {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .video .popup-text {
        padding-top: 0;
    }

    .video .popup-button.sm-popup {
        top: 37%;
        left: 43%;
    }

    /* Social Section */
    .twitter-feed ul > li {
        display: block;
        width: 80%;
        float: none;
        margin: 0 auto 10px;
    }

    /* Portfolio Section */
    .portfolio-grid li {
        width: 50%;
    }

    .screenshots {
        text-align: center;
    }

    .screenshots .carousel {
        margin-top: 50px;
    }

    /* Pricing Section */
    .pricing-3pf .details {
        margin-bottom: 80px;
    }

    .pricing-st .h2 {
        padding-top: 50px;
    }

    .pricing-sc .price {
        margin-bottom: 30px;
    }

    .pricing-2p .info {
        margin-bottom: 30px;
    }

    /* Team Section */
    .team .t2 {
        text-align: center;
    }

    .team .t2 h5 {
        margin-top: 15px;
    }

    /* Miscellaneous Section */
    .funfacts i, .funfacts .counter {
        margin-bottom: 5px;
    }

    .funfacts .counter-left {
        float: none;
        display: block;
        margin-bottom: 10px;
        margin-right: 0;
    }

    .funfacts .counter-left i {
        float: none;
    }

    .funfacts .text.text-left {
        text-align: center;
    }

    .funfacts div[class^="col-md"]:nth-child(3) {
        margin-bottom: 30px;
    }

    .timeline .event:before {
        left: 0;
        top: -20px;
        color: #fff;
        font-weight: 900;
        font-size: 15px;
        content: attr(data-date);
        text-align: right;
    }
    
    /* Subscription Section */
    .subscription .sub-left {
        padding-top: 0;
        padding-bottom: 20px;
    }

    .subscription .form-inline .form-group {
        width: 100%;
    }

    .subscription .features-devices {
        margin-bottom: 50px;
    }
    
    /* Contact Section */
    .contact-left {
        text-align: center;
    }

    .contact-left .contact-info {
        margin-bottom: 40px;
    }
    
    /* Footer Section */
    .footer.f5 .footer-links p, .footer.f5 .footer-links img {
        display: block;
        margin-right: 0;
    }

    .footer.f5 .footer-links img {
        margin: 0 auto;
    }
    
    .footer.f6, .footer.f7 {
        text-align: center;
    }

    .footer.f6 .footer-social, .footer.f6 .footer-links {
        margin-bottom: 25px;
    }

    .footer.f7 .col-md-2 {
        margin-top: 40px;
    }

    .footer.f7 .about .logo {
        border-right: transparent;
    }

    /* Blog Page */
    .pagination {
        margin-bottom: 120px;
    }
}


/* Mobile Standard (max-width: 767px)
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    
    /* Disabilita animazioni WOW su schermi piccoli */
    .wow {
        visibility: visible !important;
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }

    /* Typography */
    h1, .h1 {
        font-size: 36px;
        line-height: 40px;
    }

    h2, .h2 {
        font-size: 30px;
        line-height: 34px;
    }

    h3, .h3 {
        font-size: 26px;
        line-height: 30px;
    }

    h4, .h4 {
        font-size: 24px;
        line-height: 28px;
    }

    h5, .h5 {
        font-size: 18px;
        line-height: 22px;
    }

    p {
        font-size: 16px;
        line-height: 20px;
    }

    .lead {
        font-size: 18px;
        line-height: 22px;
    }

    /* Layout Custom */
    .menu ul {
        flex-direction: column;
        align-items: center;
    }

    .contatti {
        text-align: center;
        margin: 20px 0;
    }

    .contatti td {
        display: block;
        width: 100%;
        text-align: center;
    }

    .table-responsive {
        overflow-x: scroll;
    }

    /* Cols Spacing */
    .c2 div[class^="col-sm"]:nth-child(1),
    .c3 div[class^="col-sm"]:nth-child(1),
    .c3 div[class^="col-sm"]:nth-child(2),
    .c4 div[class^="col-sm"]:nth-child(1),
    .c4 div[class^="col-sm"]:nth-child(2),
    .c4 div[class^="col-sm"]:nth-child(3) {
        margin-bottom: 30px;
    }

    .c2.text-center div[class^="col-"],
    .c3.text-center div[class^="col-"],
    .c4.text-center div[class^="col-"] {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }

    .new-row-sm {
        margin-top: 30px;
    }

    .center-sm {
        text-align: center;
    }

    /* Navbar 3cols */
    .nav-3cols span {
        display: none;
    }
    
    /* Navbar Dropdown */
    .navbar-nav .open .dropdown-menu.multi-level {
        height: auto;
        overflow-y: auto;
    }

    /* Navbar with Top Bar */
    .top-bar .schedule,
    .top-bar .contact-info,
    .top-bar .contact-info .phone {
        display: block;
        float: none;
        text-align: right;
        font-size: 13px;
    }

    .top-bar .schedule i,
    .top-bar .contact-info i {
        font-size: 18px;
    }

    .top-bar .contact-info .phone {
        margin-top: 10px;
    }

    .top-bar .contact-info .email {
        display: none;
    }

    .top-bar .contact-info .phone span {
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
    }
    
    /* Hero-Dashboard */
    .hero .dashboard-box {
        display: none;
    }

    /* Hero Devices */
    .hero.hero-devices .y-middle {
        display: block !important;
    }

    .hero.hero-devices h1, 
    .hero.hero-devices img {
        padding-top: 30px;
    }

    /* Hero Video Popup */
    .popup-box img {
        max-width: 70%;
    }

    .popup-box .popup-button {
        left: 43%;
    } 

    .popup-box .popup-button i {
        font-size: 40px;
        padding: 20px 22px 18px 31px;
    }

    /* Section Header */
    .section-header {
        margin-bottom: 40px;
    }

    /* Content Split */
    .content-split .content-block {
        padding-left: 45px;
        padding-right: 45px;
    }

    .content-align-sm .y-middle {
        display: block !important;
    }
    
    /* Features Block */
    .features-block .fix-box {
        height: 350px;
    }

    .features-list,
    .features-list.features-list-left {
        text-align: center;
    }

    .features-list {
        padding-left: 60px;
        padding-right: 60px;
    }

    .features-list-img {
        padding-left: 100px;
        padding-right: 100px;
    }

    /* Features Panel */
    .features-panels .nav-tabs.nav-justified > li {
        width: 50%;
        display: inline-block;
        float: left;
        margin-bottom: 10px;
    }

    /* Social Section */
    .twitter-feed ul > li {
        width: 100%;
    }

    /* Portfolio Section */
    .screenshots .portfolio-grid li {
        width: 33.33333%;
        margin: 0;
    }

    /* Pricing Section */
    .pricing-sc .info {
        margin-left: 15px;
        margin-right: 15px;
    }

    .pricing-st .info {
        margin: 0 auto 40px;
    }

    .ticket-prices .item-price {
        height: auto;
        padding: 10px;
    }

    .ticket-prices .item-price .amount {
        height: auto;
        width: auto;
        float: none;
        margin: 0;
        line-height: 44px;
        background-color: #fff;
        color: #56B68B;
        text-align: left;
    }

    /* Team Section */
    .team-list {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    /* Blog Section */
    .blog .post-meta {
        margin-top: 15px;
    }
    
    /* Miscellaneous Section */
    .countdown .timer {
        margin-left: 10px;
        margin-right: 10px;
    }

    .countdown .timer > div {
        font-size: 40px;
        line-height: 44px;
        font-weight: 700;
    }
    
    /* Contact Section */
    .mini-info {
        margin-top: 20px;
    }

    /* Footer Section */
    .footer.f1, .footer.f2, .footer.f3, .footer.f4, .footer.f6 {
        text-align: center;
    }
    
    .footer.f1 .footer-social {
        float: none;
        margin-top: 40px;
    }

    .footer.f2 .footer-links {
        text-align: center;
    }

    .footer.f2 .footer-social {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .footer.f3 .footer-links,
    .footer.f3 .footer-social {
        text-align: center;
        margin-top: 20px;
    }
    
    /* Pages Section */
    .page-head, 
    .page-head .text-right {
        text-align: center;
    }

    .page-head.h-img .h2 {
        padding-top: 60px;
    }
}


/* Mobile Small (max-width: 479px)
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 479px) {
    
    .topkeywords h1, 
    .boxnewscontainer_title h1 {
        font-size: 1.5em;
    }

    .menu ul li {
        margin: 5px 0;
    }

    /* Cols Spacing */
    .c2.text-center div[class^="col-"],
    .c3.text-center div[class^="col-"],
    .c4.text-center div[class^="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important; 
    }

    /* Form Inline */
    .form-inline {
        padding-left: 0;
        padding-right: 0;
    }

    /* Hero Section */
    .hero.height-800 {
        height: 700px;
    }
    
    /* Hero Leadbox */
    .hero-leadbox .form-group.w-50 input {
        display: block;
        width: 100%;
    }

    .hero-leadbox .form-group.w-50 input:first-child {
        margin-bottom: 15px;
    }

    /* Hero Video Popup */
    .popup-box .popup-button,
    .video .popup-button.sm-popup {
        left: 38%;
    }

    /* Section Header */
    .section-header span {
        display: inline-block;
    }
    
    /* Content Split - Grid */
    .content-split .content-block {
        padding-left: 15px;
        padding-right: 15px;
    }

    .content-grid .lead-block {
        padding: 40px 15px;
    }

    /* Features List */
    .features-list {
        padding-left: 0;
        padding-right: 0;
    }

    .features-list-img {
        padding-left: 50px;
        padding-right: 50px;
    }

    /* Portfolio Section */
    .portfolio-grid li {
        width: 100%;
    } 
    
    /* Pricing Section */
    .pricing-st .info {
        padding: 45px 30px;
    }

    /* Contact Section */
    .contact .form-group.w-50 input {
        display: block;
        width: 100%;
    }

    .contact .form-group.w-50 input:first-child {
        margin-bottom: 15px;
    }
}