/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
  font-family:Roboto-Italic;
  src: url('../fonts/roboto/Roboto-Italic.ttf'); 
}

@font-face {
  font-family:Roboto-Light;
  src: url('../fonts/roboto/Roboto-Light.ttf'); 
}

@font-face {
  font-family:Roboto-Regular;
  src: url('../fonts/roboto/Roboto-Regular.ttf'); 
}

@font-face {
  font-family:Roboto-Bold;
  src: url('../fonts/roboto/Roboto-Bold.ttf'); 
}


/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

*{
	margin: 0px; 
	padding: 0px; 
}

html{
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body{	
  font-family:Roboto-Regular;
  background: #FFF;
  line-height:1.5;
}

.clear{
  clear:both;
}

a:hover{
  text-decoration:none;
}


/*---------------------------------------------*/

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

.covers{
  width:100%;
  height:50px;
  background-image:url("../images/covers.png");
}

header{
  padding:50px 0 100px 0;
  background-image:url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.logo-wrapper{
  position:relative;
  width:300px;
  height:100%;
}

.logo-wrapper:before{
  content: '';
  position: absolute;
  width:300px;
  height:50px;
  top: 0; 
  right:0;
  transform: skewX(-35deg);
  transform-origin:right top;
  z-index:0;
  background:rgba(0,0,0,0.7);
}

.logo{
  position:absolute;
  width:180px;
  left:50px;
  top:13px;
}

.wrapper{
  width: 1170px;
  margin: 0 auto;
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  flex-wrap: wrap;
}

.warning{
  font-family:Roboto-bold;
  font-size:5.5em;
  margin:20px 0;
  color:#ffe508;
  text-align:center;
  text-shadow: 1px 2px 3px rgba(25,11,7,0.7);
}

h1{
  font-family:Roboto-bold;
  font-size:2.6em;
  text-align:center;
  color:#FFF;
  line-height:1.3;
  text-shadow: 1px 2px 3px rgba(25,11,7,0.7);
}

.ip-location{  
  font-size:2.0em;
  color:#FFF;
  padding:40px 0;
  text-align:center;
  text-shadow: 1px 2px 3px rgba(25,11,7,0.7);
}

#ip, #location{
  font-family:Roboto-Bold;
  color:#ffe508;
}

#status{
  font-family:Roboto-Bold;
  color:#ffe508;
}

.success-status{
  color:#33d401;
}

.subtitle{
  font-size:1.1em;
  text-align:center;
  color:#FFF;
}

.section{
  padding-top:100px;
  background:#FFF;
}

.section-img{
  width:100%;
}

.section-title{
  font-family:Roboto-Bold;
  font-size:2.6em;
  line-height:1.3;
  color:#383c43;
  margin-top:80px;
}

.section-text{
  font-family:Roboto-Light;
  font-size:1.2em;
  color:#73757a;
  margin-top:15px;
  line-height:1.5;
}

.features{
  padding-top:30px;
  padding-bottom:30px;
}

.features-icon{
  height:100px;
}

.titles{
  font-size:1.3em;
  color:#383c43;
  margin-top:20px;
}

p{
  font-family:Roboto-Light;
  font-size:1.0em;
  color:#73757a;
  margin-top:8px;
}

footer{
  font-size:0.8em;
  text-align:center;
  margin-top:200px;
  margin-bottom:20px;
  color:#727272;
}


/*/////////////////////////////////////////////////////////////////////////////////
[ Buttons ]*/

.main-button{
  display:block;
  width:320px;
  padding:15px;
  margin:60px auto 0;
  font-size:1.4em;
  color:#FFF;
  text-align:center;
  background:#2eb609;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
}

.main-button:hover{
  color:#FFF;
  background:#25a702;
}

.section-button{
  display:block;
  width:320px;
  padding:15px;
  margin:20px auto 0px;
  font-size:1.3em;
  color:#FFF;
  text-align:center;
  background:#2eb609;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
}

.section-button:hover{
  color:#FFF;
  background:#25a702;
}


/*/////////////////////////////////////////////////////////////////////////////////
[ Mobile CSS ]*/


@media (max-width:1200px){

  .wrapper{
    width:100%;
  }

}

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

  header{
    padding:40px 0 80px 0;
  }

  .warning{
    font-size:3.5em;
  }

  h1{
    font-size:1.8em;
  }

  .ip-location{
    font-size:1.5em;
    padding:30px 0;
  }

  .main-button, .section-button{
    width:300px;
    font-size:1.2em;
    padding:13px;
  }

  .section{
    padding-top:80px;   
  }

  .section-title{
    margin-top:0;
    text-align:center;
    font-size:2.2em;
  }

  .section-text{
    font-size:1.1em;
    line-height:1.4;
  }

  .section-img{
    display:block;
    width:500px;
    margin:30px auto 0;
  }  

  footer{
    margin-top:150px;    
  }

}

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

  .section-title{
    font-size:1.8em;
  }

  .section-text{
    font-size:1.0em;
  }

  .section-img{
    width:400px;
  }

  .features-icon{
    display:block;
    margin:auto;
  }

  .titles{
    text-align:center;
  }
  
}

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

  header{
    padding:20px 0 50px 0;
  }

  .logo-wrapper{
    width:220px;
  }

  .logo{
    width:140px;
    left:15px;
    top:16px;
  }

  .warning{
    font-size:2.5em;
  }

  h1{
    font-size:1.3em;
    margin-bottom:15px;
  }  

  .ip-location{
    font-size:1.2em;
    padding:20px 0;
  }

  .subtitle{
    font-size:0.9em;
  }

  .section{
    padding-top:60px;
  }

  .section-title{
    font-size:1.3em;
  }

  .section-text{
    font-size:0.9em;
  }

  .section-img{
    width:90%;
    margin:15px auto 0;
  }

  .features{
    padding-top:15px;
    padding-bottom:15px;
  }

  .features-icon{
    height:80px;
  }

  .titles{
    font-size:1.2em;    
  }

  p{
    font-size:0.9em;
    line-height:1.4;
  }

  .main-button{
    width:100%;
    font-size:1.1em;
    margin:40px auto 0;
  }

  .section-button{
    width:100%;
    font-size:1.1em;
    margin:10px auto 0;
  }

  footer{    
    font-size:0.77em;
  }

}