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

@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; 
	box-sizing: border-box;
}

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

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

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

.clear{
  clear:both;
}

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

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

header{
  padding:40px 0 130px 0;
  background:#0a0a29;
}

h1{
  font-family:Roboto-Bold;
  font-size:2.5em;
  padding-top:30px;
  color:#FFF;
  line-height:1.3;
}

h1 span{
  font-size:1.5em;
}

.available-icons{
  display:block;
  width:225px;
  margin-top:20px;
}

h2{
  font-family:Roboto-Bold;
  font-size:2.0em;
  padding-top:160px;
  color:#383c43;
  line-height:1.2;
}

h3{
  font-family:Roboto-Bold;
  font-size:3.2em;
  text-align:center;
  color:#FFF;
  line-height:1.2;
}

a:hover{
  text-decoration: none;
}

.top{
  padding-top:30px;
}

.left{
  padding-left:40px;
}

.margintop{
  margin-top:90px;
}

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

.defencevpn-logo{
  display:block;
  width:220px;
}

.header-devices{
  display:block;
  width:720px;
  position:absolute;
}

.header-moneyback{
  display:block;
  width:auto;
}

.recommended{
  display:block;
  margin-top:112px;
  font-size:0.9em;
  color:#FFF;
}

.recommended img{
  margin:0 5px;
}

.techradar{
  width:115px;
}

.SVG-wrapper .SVG--inline {
  display: inline-block;
  vertical-align: middle;
}

.header-span{
  font-size:0.9em;
  color:#FFF;
}

.section{
  padding:80px 0;
  background:#FFF;
}

.badge-save{
  position:absolute;
  width:80px;
  top:-5px;
  right:-70px;
}

.banner-images{
  display:block;
  width:100%;
}

.grey{
  background:#f8f8f8;
}

.pricing-wrapper{
  position:relative;
  padding:120px 0;
  background:#0a0a29; 
}

.active-box{
  padding:40px 35px;
  margin-top:60px;
  background:#FFF;
  color:#383c43;
  border-radius:5px;
  cursor:pointer;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
  -webkit-transition: -webkit-box-shadow .25s ease-out;
  transition: -webkit-box-shadow .25s ease-out;
  transition: box-shadow .25s ease-out;
  transition: box-shadow .25s ease-out,-webkit-box-shadow .25s ease-out;
}

.deactive-box{
  padding:50px 10px;
  margin-top:207px;
  color:#FFF;
  border-radius:3px;
  background:hsla(0,0%,100%,.4);
}

.price-title{
  font-size:1.3em;
  text-align:center;
}

.price{  
  font-family:Roboto-Bold;
  font-size:4.5em;
  line-height:0.5;
  margin-top:25px;
  text-align:center;
}

.dollar{
  display:inline-block;
  vertical-align: top;
  font-size:0.3em;
  margin-right:3px;
}

.permonth{
  font-size:0.25em;
  text-align:center;
}

.price-badge{
  display:block;
  text-align:center;
  width:75px;
  font-size:0.8em;
  padding: 2px 5px 3px 5px;
  border-radius: 16px;
  margin:20px auto 0;
  background:#e8e8e9;    
}

.deactive-title{
  font-size:1.0em;
  text-align:center;
} 

.deactive-price{
  font-size:3.2em;
  margin-top:25px;
  margin-bottom:20px;
  line-height: 0.5;
  text-align:center;
}

.deactive-dollar{
  display:inline-block;
  vertical-align: top;
  font-size:0.35em;
  margin-right:3px;
}

.deactive-permonth{
  font-size:0.3em;
}

.red{
  color:#f64f64;
  background:#fddce0;
}

.billed{
  font-size:0.8em;
  color:#b9babd;
  text-align:center;
  margin-top:30px;
}

.line-through{
  color:#f64f64;
  text-decoration: line-through;
}

.section-p{
  font-size:1.0em;
  line-height:1.8;
  padding-top:25px;
  color:#383c43;
}

.subtext{
  font-size:1.1em;
  padding-top:40px;
  color: #FFF;
  text-align: center;
}

.moneyback-title{
  font-family:Roboto-Bold;
  font-size:2.0em;
  margin-top:60px;
  color:#383c43;
}

.moneyback-subtitle{
  font-size:1.1em;
  margin-top:18px;
  color:#383c43;
}

.logos-img{
  display:block;
  width:820px;
  margin:40px auto;
}


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

.main-button{
  font-family:Roboto-Bold;
  display:block;
  width:230px;
  padding: 11px 15px;
  margin:40px 0 20px 0;
  font-size:1.2em;
  text-align: center;  
  color:#FFF;
  border-radius: 4px;
  background:#EC0524;
  webkit-transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
  transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
}

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

.buy-button{
  font-family:Roboto-Bold;
  display:block;
  width:115px;
  padding: 8px 18px;
  margin-top:20px;
  font-size:1.1em;
  text-align: center;  
  color:#FFF;
  border-radius: 4px;
  background:#EC0524;
  webkit-transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
  transition: color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
}

.buy-button:hover{
  color:#FFF;
  background:#ff3838;
}

.deal-button{
  display:block;
  width:100%;
  font-size:1.2em;
  color:#FFF;
  text-align:center;
  padding:8px 0;
  border-radius:4px;
  margin-top:30px;
  border:1px solid #EC0524;
  background:#EC0524;
}

.deal-button:hover{
  color:#FFF;
  border:1px solid #ff3838;
  background:#ff3838;
}


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

@media (max-width:1490px){

  .header-devices{
    width:110%;
    top:10%;
  }

}

@media (max-width:1360px){

  .header-devices{
    width:94%;
    top:20%;
  }

}

@media (max-width:1199px){

  .wrapper{
    width:100%;
  }

  h2{
    padding-top:60px;
  }

  .banner-images{
    width:420px;
    margin:auto;
  }

}

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

  .defencevpn-logo{
    width:140px;
  }

  .margintop{
    display:none;
  }

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

  .header-devices{
    display:none;
  }

  h1{
    font-size:2.5em;
    text-align:center;
  }

  .available-icons{
    width:200px;
    margin:20px auto 0;
  }

  .main-button{
    margin:30px auto 12px;
  }

  .header-moneyback{
    text-align:center;
  }

  .recommended{
    text-align:center;
    margin-top:80px;
  }

  .header-iphone{
    display:none;
  }

  .divider{
    display:block;
    margin-bottom:60px;
  }

  .banner-images{
    margin:auto;
  }

  h2{
    font-size:1.6em;
    padding-top:40px;
  }

  h3{
    font-size:2.5em;
  }

  .section-p{
    padding-top:20px;
    line-height:1.6;
  }

  .moneyback-badge{
    display:block;
    width:200px;
    margin:auto;
  }

  .moneyback-title{
    font-size:1.6em;
    margin-top:30px;
  }

  .moneyback-subtitle{
    font-size:1.0em;
  }

  .active-box{
    margin-top:50px;
  }

  .deactive-box{
    margin-top:25px;
  }

  .logos-img{
    width:660px;
    margin:auto;   
  }

  .logos-img img{
    width:100%;
  }

  .buy-button{
    margin:20px auto 0;
  }

}


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

  .section{
    padding:60px 0;
  }

  .left{
    padding-left:15px;
  }

  .top{
    padding-top:0px;
  }

  h1{
    font-size:2.0em;
  }

  h2{
    font-size:1.4em;
    padding-top:25px;
    text-align:center;
  }

  .section-p{
    font-size:0.9em;
    padding-top:12px;
    text-align:center;
  }

  .moneyback-title{
    font-size:1.4em;
    text-align:center;
    margin-top:20px;
  }

  .moneyback-subtitle{
    text-align:center;
    margin-top:8px;
  }

  .active-box{
    margin-top:40px;
  }

  #hide-logos{
    display:none;
  }

}

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

  .active-box{
    padding:40px 20px;
  }

}

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

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

  .recommended{
    margin-top:40px;
    font-size:0.8em;
  }

  .cnet{
    width:32px;
  }

  .techradar{
    width:90px;
  }

  h1{
    font-size:1.6em;
    padding-top:20px;
  }

  .available-icons{
    width:160px;
    margin:15px auto 0;
  }

  h2{
    font-size:1.2em;
    padding-top:15px;
  }

  h3{
    font-size:1.6em;
  }

  .main-button{
    width:205px;
    font-size:1.1em;
    padding:10px 15px;
  }

  .header-span{
    font-size:0.8em;
  }

  .subtext{
    font-size:1.0em;
    padding-top:25px;
  }

  .section{
    padding:50px 0;
  }

  .banner-images{
    width:80%;
  }

  .divider{
    margin-bottom:25px;
  }

  .buy-button{
    width:100%;
  }

  .moneyback-badge{
    width:160px;
  }

  .moneyback-title{
    font-size:1.2em;
    margin-top:15px;
  }

  .moneyback-subtitle{
    font-size:0.9em;
  }

  .active-box{
    margin-top:30px;
    padding:30px 20px;
  }

  .deactive-box{
    margin-top:15px;
    padding:25px 10px;
  }

  .price-title{
    font-size:1.1em;
  }

  .price{
    font-size:4.0em;
  }

  .deactive-price{
    font-size:3.0em;
  }

  .price-badge{
    margin:15px auto 0;
  }

  .deal-button{
    margin-top:20px;
  }

}


