style.css

/*
Theme Name: LiveFACE_Portfolio
Theme URI: http://wordpress.org/themes/LiveFACE_Portfolio
Author: JIANFENG WU
Author URI: http://isjeff.com/
Description: This is a portfolio theme build for Artist and Designer to display the art work.
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: portfolio, design, designer, art, artist, dark, picture, CV
Text Domain: LiveFACE

Copyrighted by JIANFENG WU
03.02.2017
Created in The UK
Thank you.

*/

@font-face {
    font-family: barlow;
    src: url(./asset/fonts/barlow.ttf);
}

@font-face {
  font-family: barlowbold;
  src: url(./asset/fonts/barlowbold.ttf);
}

@font-face {
    font-family: Lulo;
    src: url(./asset/fonts/lulo.ttf);
}

*{
  margin:0;
  padding:0;
  user-select: none;
  font-family: barlow,'Helvetica Neue', Helvetica,"Microsoft YaHei", Arial, sans-serif;
}

a{
  text-decoration: none;
}
button:focus{
  outline: none;
}

div{

  margin:0;
  border:0;
  padding:0;
}

nav{
  font-size:18px;
  color:#ffffff;
}



.nav_container{
  position:fixed;
  width:100%;
  height:100px;
  top:0px;
  overflow: hidden;
  z-index:998;
  padding-left:40px;
  padding-right:20px;
  opacity: 0.5;
  /*Animation*/
  animation-duration: 0.6s, 0.6s;
  animation-iteration-count: 1,1;
}

.nav_container_mobile{
  display:none;
  position:fixed;
  width:100%;
  height:auto;
  top:0px;
  z-index:998;
  padding-left:20px;
  padding-right:20px;
  /*Animation*/
  animation-duration: 0.6s, 0.6s;
  animation-iteration-count: 1,1;
}

.nav{
  margin-top:28px;
}

.nav_logo{
  float: left;
  display: flex;
  flex-direction: row;
}

.nav_logo a{
  color:#ffffff;
  margin-left: 20px;
  margin-top: 8px;
}

.nav_text{
  float: right;
  margin-right: 70px;
  margin-top: 38px;
  /*timer*/
  transition: all 220ms ease-in-out;
}

.nav_text li{
  float: left;
  padding-right: 40px;
  list-style: none;
  cursor: pointer;
  color:#ffffff !important;
  
}

.nav_text a{
  color:#ffffff !important;
  /*timer*/
  transition: all 220ms ease-in-out;
}



.nav_text a:hover{
  color:#3da865;
  
}

.nav_text_mobile{
  display:none;
  position:fixed;
  background-color:#172337;
  height:100%;
  width:100%;
  top:30px;
  left: 0px;
  margin-top:25px;
  font-size: 26px;
}

.nav_text_mobile li{
  list-style: none;
  padding-left: 20px;
  padding-top: 30px;
}

.nav_text_mobile a{
  color:#ffffff;
}


/*FOOTER*/

footer{
  width:100%;
  height:160px;
  background-color:#192438;
  position: relative;
  margin-left:auto;
  margin-right:auto;

}

.footer_container{
  color:#fafafa;
  text-align: center;
  width:100%;
  padding-top: 30px;
}

.footer_title{
  color:#fafafa;
  font-size:20px;
  opacity: 0.8;
}

.footer_info{
  color:#fafafa;
  font-size:14px;
  opacity: 0.8;
}

.footer_info a{
  color: #fafafa;
}

.footer_container i{
  margin-top:10px;
  font-size:30px;
  padding-left:24px;
  opacity: 0.7;
  cursor: pointer;
  color:#ffffff;
  /*timer*/
  transition: all 220ms ease-in-out;
}

.footer_container i:hover{
  opacity: 1.0;
}


@media screen and (min-width: 2561px){
  footer{
    height:160px;
  }
}



@media screen and (min-width: 1921px){
  footer{
    height:160px;
  }
}

@media screen and (max-width: 600px){

  /*Mobile Nav Flag*/
  #closeNav{
    display:none;
  }

  .nav{
    margin-top:25px;
    font-size: 26px;
  }

  .nav_container{
    display:none;
    padding-left:20px;
    height:50px;
  }

  .nav_container_mobile{
    display:block;
    width:100%;
  }

  .nav_text{
    margin-right: 20px;
  }

  .nav_text li{
    padding-right:16px;
  }

  .nav_container{
    font-size:6px;
  }

  .footer_container{
    margin-top:0px;
  }

  .footer_title{
    display:none;
  }

  .footer_info{
    font-size: 12px;
  }

  footer{

    margin-top: -2px;
    height: 20%;
  }

  .footer_container{
    padding-top: 0px;
  }

}