/* Global Styles */
@font-face {
	font-family: 'Philosopher-Bold';
	src: url('Philosopher-Bold.eot'); /* IE9 Compat Modes */
	src: url('Philosopher-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('Philosopher-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Philosopher-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: 'Lato';
	src: url('Lato-Regular.eot'); /* IE9 Compat Modes */
	src: url('Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('Lato-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Lato-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: 'Lato-black';
	src: url('Lato-Black.eot'); /* IE9 Compat Modes */
	src: url('Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('Lato-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Lato-Black.svg#svgFontName') format('svg'); /* Legacy iOS */
}
html,
body {
width: 100%;
height:100%;
color:#616161;
font-family: 'Lato';
position:relative;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 0px;
margin-bottom: 0;
padding: 20px 0;
font-family: 'Lato-black';
}
#boxWrapp{
width:100%;
height: 100%;
margin:0 auto;
padding:0;
overflow:hidden;
position:relative;
}
.build{
padding:15px 0;
margin:0;
}
.build ul{
padding:0;
margin:0;
list-style:none;
position:relative;
}

/* =============================== header ===================================== */



.header {
  position: relative;
 
}
.maskHeader{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/*background:url(../img/pattern.png);*/
z-index: 77;
}
.linear{
 transition:all 200ms linear;   
 -webkit-transition:all 200ms linear;   
 -moz-transition:all 200ms linear;   
 -ms-transition:all 200ms linear;   
 -o-transition:all 200ms linear;   
}
/* Intro */



/*=================MODAL====================*/
body.modal-open {
margin-right: 0px !important;
overflow:auto;
}

.modal-dialog {
width: auto;
}
.modal-content {
position: relative;
background-color: transparent;
border: none;
border: none; 
border-radius: 0; 
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-header {
border-bottom: none;
}
.modal-header .close {
margin-top: 0px;
position: absolute;
top: -45px;
right: 20px;
font-size: 100px;
color:#fff;
z-index:99;
opacity:1;
}
.modal{
background: rgba(0,0,0,0.8);

}
/*=================about====================*/
.portfolio{
 position:relative;   
}
.slide-thumb{
 position:absolute;
width:100%;
margin-top:-163px;
bottom:0;
z-index:99;
}
.slide-thumb h3{
display:table;
position:absolute;
margin:0;
padding:4px 20px 4px 12px;
top:-45px;
right:0;
background:#dedede;
line-height:24px;
font-size:12px;
color:#0f0a11;
}
#slider, #carousel{
 margin: 0 0 0;
background: transparent;
border: none;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
zoom: 1;   
overflow:hidden;
}
#carousel{
background:#fff;
padding:10px 0;

}

#slider .flex-direction-nav{
display:none
}
#slider .slides > li {
overflow:hidden;
}
#carousel li { margin-right: 10px; opacity:.7}
#carousel li:hover{
 opacity:1;    
}
#carousel .flex-active-slide{
 opacity:1;   
}
.caption{
 position:absolute;
 top:0;
 right:0;
}
#carousel .flex-direction-nav a:before, #slider .flex-direction-nav a:before  {font-family: "FontAwesome"; content: '\f104'; }
#carousel .flex-direction-nav a.flex-next:before, #slider .flex-direction-nav a.flex-next:before  { content: '\f105'; }
#slider .flex-direction-nav a:before {
font-size: 65px;
color:#fff;
line-height: 36px;
}
#carousel .flex-direction-nav a{
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-o-border-radius:50%;
-ms-border-radius:50%;
background:#000;
}
#carousel .flex-direction-nav a:before {
color:#fff;
line-height: 36px;
padding: 1px 12px 0 12px;
}

/*====================== content =============================*/
.main-content{
 position:absolute;
 top:5%;
 left:0;
 z-index:88;


}
.main-content h1{
background:#000;
display:table;
margin:0;
padding:15px 30px;
font-weight:600;
color:#fff;
font-size: 3.3vw;
font-family: 'Lato';
text-transform:uppercase;
}

.main-content h2{
background:#000;
display:table;
margin:0;
padding:15px 30px;
font-weight:600;
color:#fff;
font-size: 1.9vw;
font-family: 'Lato';
}

.main-content .btn{
 display:block;
 width:40px;
 height:40px;
margin-top:10px;
font-size: 19px;
text-align: center;
padding: 4px 0;
}

.main-content .btn i{
   
 line-height: 25px;   
}
/*=================contact====================*/
.title-page h1{
padding:5px 0;   
font-size:36px;
margin-bottom:5px;
font-weight:700;
color:#fff;
text-align:center;
}

.contact .form-control{
 background:transparent;
 border-color:#fff;
 border-width:4px;
 border-radius:0px;
 border-top:none;
 border-left:none;
 border-right:none;
-webkit-box-shadow: none;
box-shadow: none;
 margin-bottom:15px;
color:#fff;
}

.contact-info p span{
width:24px;
height:24px;
text-align:center;
}
.contact-info .fa{
font-size:18px;
vertical-align:middle;
margin-right:20px;
}

.contact p{
font-size:14px;
margin:0;
padding:0 0 0 0;
}
.contact span{

width:24px;
height:24px;
text-align:center;
font-size:24px;
line-height:24px;
vertical-align:middle;
margin-right:15px;
}
ul.table-contact{
display:table;
width:100%;
padding: 25px 0;
}
ul.table-contact li{
padding-bottom:30px;
}
ul.table-contact li:nth-last-child(1){
padding-bottom:0px;
}
.row-contact{
display:table-row;
padding:0 0 15px 0;
}
.cell-contact{
display:table-cell;
}
.w-cell{
width:48px;
}
.help-block{
  color:#d9534f;
 font-size:12px !important;
font-style:italic;
}
.form-group{
 margin:0;   
}
.contactForm  button.btn-lg{
font-size:14px;
padding: 16px 16px;
}
/*======================= about ==========================*/
.avatar .img-thumbnail{
 border-radius:0px;
}
.avatar{
 margin-bottom:20px;   
}
.about-info{
  color:#fff;   
}
.about-info h2{
 margin:0 0 30px 0;
 padding:0;
 font-size:48px;
 font-weight:700;
 line-height: 36px;
}
.data-info{
 list-style:none;
 display:table;
 width:100%;
 margin:0;
 padding:0;
 color:#fff;
}
.main-data{
 display:table-row;
}
.label-data{
 display:table-cell;
width: 100px;
font-weight:bold;
}
.value-data{
 display:table-cell;

}
.main-skill{
 color:#fff;   
}
.main-skill h3{
margin:0 0 0 0;
padding:0;
}
	/*==================progress========================*/
.progress {
height:9px;
background-color: #dadfe1;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
clear: both;
margin: 6px 0 16px 0;
overflow: inherit;
color:#fff; 
}
.progress-bar{
position:relative;
 transition:all 200ms linear !important;   
 -webkit-transition:all 200ms linear !important;   
 -moz-transition:all 200ms linear !important;   
 -ms-transition:all 200ms linear !important;   
 -o-transition:all 200ms linear !important;   
}
.wrapp-progress{
position:relative;  
padding-top: 24px;
}
.wrapp-progress p{
font-size:14px;
font-family: 'Lato', sans-serif;    
margin:0;
padding:0;
line-height:24px;
position:absolute;
left:0;
top: 0px;
}

.precent-value{
 color:#fff;  
font-size:12px;
line-height:24px;
position:absolute;
right: -25px;
top: -30px;
height: 24px;
width: 50px;
background: #1d1d1d;
border-radius: 3px;
font-family: 'VerelaRound';
}
.progress-bar i{
font-size:24px;
color:#1d1d1d;
position:absolute;
right: -7px;
top: -16px;
}
.progress {
clear: both;
}

/* Footer */

footer {
color: #ffffff;
padding: 0 0;
background:#000;
}
.cp-right, .social{
float:left;
}
.cp-right P{
margin:0;
padding:15px 20px;
 font-size: 12px;
}
.cp-right P a{
 text-decoration:none;
}
.footer-attr{
position:relative;
clear:both;
}

.btn-toggle a{
width:32px;
height:22px;
display:block;
text-align: center;
margin:10px;
display:block;
}
.btn-toggle a span.bar{
display:block;
height:4px;
background:#fff;
margin-top:5px;
}
.btn-toggle a span.bar:nth-child(1){
margin-top:0;
}
.btn-attr{
display:none;
}
.btn-attr a{
width:32px;
height:32px;
color:#000;
font-size:26px;
background:#fff;
display:block;
text-align: center;
line-height: 1px;
border:1px solid #fff;
margin:10px;
}
.btn-attr a:hover{
color:#fff;
background:transparent;
}
/* ========================================== Footer ======================================================= */
ul.list-inline{
margin:0;
}
.list-inline > li {
display: inline-block;
padding:0;
margin:0;
}
.list-inline > li a i{
 vertical-align:middle;
 line-height: 50px;
 
}
.socIcon{
width: 50px;
height: 50px;
margin-right: -3px;
display:block;
color:#fff;
text-align:center;
animation-duration: 750ms;
  -webkit-animation-duration: 750ms;
  -moz-animation-duration: 750ms;
  -ms-animation-duration: 750ms;
  -o-animation-duration: 750ms;
  -webkit-animation-delay: 1000ms;
    -moz-animation-delay: 1000ms;
    -ms-animation-delay: 1000ms;
    -o-animation-delay: 1000ms;
        animation-iteration-count: 1;   
        -webkit-animation-iteration-count: 1;   
        -moz-animation-iteration-count: 1;   
        -ms-animation-iteration-count: 1;   
        -o-animation-iteration-count: 1;  
}
.socIcon:hover{
color:#242424;
background:#fff;
}
.fb{
 background:#0085FF;   
}
.tw{
 background:#3BDBFA;   
}
.dr{
 background:#FC60A4;   
}
.sc{
 background:#EF4D23;   
}
.tb{
 background:#30506D;   
}
.yt{
 background:#CB312E;   
}
.vi{
 background:#1EB8EB;   
}
.btn-toggle{
padding:4px 0;
}
.cp-right P a, .btn-toggle a{
 color:#fff;
}
/* ========================================== Responsive ======================================================= */


@media screen and (min-width:240px) and (max-width: 991px){
.cp-right, .main-about .avatar, .main-about h2{
 text-align:center;       
    }
.about-info:nth-last-of-type p{
margin-top:20px;
}
footer .build{
     padding:0;   
    }
footer{
     position:relative;   
    
    }
    #boxWrapp{
width:100%;
height: auto;
    }
html,
body {
height:auto;
    }
.btn-attr{
display:block;
}
.cp-right, .social{
float:none;
text-align:center;
}
}


@media screen and (min-width:240px) and (max-width: 767px){
.modal-header .close {
top: -27px;

}
.modal-header .close img{
max-width: 50%;
}
}
@media screen and (min-width:240px) and (max-width: 480px){
.main-content .btn {
display: block;
width: 30px;
height: 30px;
margin-top: 5px;
font-size: 12px;
text-align: center;
padding: 2px 0;
}
.btn-clear{
     margin-top:20px;   
    }
.list-inline .fa-2x{
font-size:18px;
}
.socIcon {
width: 37px;
height: 37px;
}
.list-inline > li a i {
line-height: 38px;
}
.btn-toggle {
padding: 0px 0;
}
.btn-toggle .btn {
padding: 3px 12px;
}
  .cp-right p{
  padding:6px 0 0 0;
  }
footer{
     padding:0;   
    }

}