@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'); #footer{ background-color: rgb(47, 47, 51); display: flex;flex-flow: row wrap; } .fooTp{ width:100%; z-index: 201; } .footp-title{ color:#fff;font-size:1.2rem;font-weight: 600; margin-bottom: 25px; } .footp-inner{ width:90%;margin:0 auto; padding:50px 0px; display: flex;justify-content: space-between;align-items: center; } .foobt{ width:100%; z-index: 200; } .footp-con ul li{ display: flex; font-size:0.9rem;margin-top:10px;color:#fff } .footp-con ul li span{ width:115px; } .footp-con ul li p{ color:#ddd;font-weight: 500; } .footp-follow ul{ display: flex;justify-content: space-between; } .footp-follow ul li:nth-child(1) a { background-color:#be252d; } .footp-follow ul li:nth-child(2) a{ background-color:#dd4937; } .footp-follow ul li:nth-child(3) a{ background-color:#2157c9; } .footp-follow ul li:nth-child(4) a{ background-color:#1cace4; } .footp-follow ul li:nth-child(5) a{ background-color:#c82b34; } .footp-follow ul li a{ width:50px;height: 50px;border-radius: 50%; background: #444;display: flex;align-items: center;justify-content: center; } .footp-follow ul li a:hover{ background:#3c3c3c; transition: .4s ease; } .footp-follow ul li a:hover i { color:#f6f6f6; } .footp-follow ul li a:hover i { font-size:2em; } .footp-follow ul li a i{ color:#fff; font-size:1.8em; } .footp-follow ul li:not(:nth-of-type(1)){ margin-left:5px; } .footp-site-sel{ margin-right: 100px; position: relative; } .footp-site-sel>.site-wrap>li p { padding:15px 35px 15px 25px; background: rgb(0,0,0,0); border:1px solid #999; color:#999;width:100%; cursor: pointer; } .site-wrap li p i{ margin-left:10px; font-size:1rem; align-self: flex-start; } .site-wrap-sub{ position: absolute;bottom:100%;left:0; width:100%;display: none; } .site-wrap-sub.on { display:block; } .site-wrap-sub>li { border-bottom:1px solid #999; } .site-wrap-sub>li>a{ display: block;padding:15px 35px 15px 25px; background: rgb(20, 20, 22); color:#fff; font-weight: 500; } .site-wrap-sub>li:last-child { border-bottom:none; } .site-wrap-sub>li a:hover{ background:#fff; color:#333; transition: .4s ease; } .foobt{ background-color: rgb(20, 20, 22);padding:25px 0px; } .foobt-inner{ width:90%;margin:0 auto; display: flex;justify-content: space-between; } .foobt-copy p{ color:#888; font-weight: 500; } .foobt-nav ul{ display: flex; } .foobt-nav ul li{ margin-right:25px; } .foobt-nav ul li a{ color:#888;font-weight: 500; } @media screen and (max-width:1240px) { .footp-inner{ width:95%;display: flex;flex-flow:row wrap; } .foo-logo{width:100%;margin-bottom: 50px;} .footp-title{ color:#fff;font-size:1.1rem; } .footp-site-sel{ margin-right: 70px; position: relative; } } @media screen and (max-width:900px){ .footp-inner{ width:95%;display: flex;flex-direction: column;align-items: flex-start; flex-flow:row wrap;justify-content: space-between; padding:20px; } .footp-title{ color:#fff;font-size:1.1rem; } .footp-site .fa { display:none; } .foo-logo{width:100%;margin: 50px 0px;} .footp-con{ width:100%; margin-bottom: 50px; } .footp-follow{ margin-bottom: 50px; } .footp-site-sel{ margin-right: 70px; position: relative; } .foobt-inner{ width:90%;margin:0 auto; display: flex;justify-content: space-between;flex-flow:row wrap; } .foobt-copy p{ width:100%; margin-bottom: 20px; } } @media screen and (max-width:600px){ .footp-con ul li{ display: flex;align-content: center;flex-flow: row wrap; } .footp-con ul li span{ width:100%;margin-bottom: 10px;; } .foobt-nav ul{ display: flex;flex-flow: row wrap; } .foobt-nav ul li{ margin-bottom: 10px; } }