/*
Template Name: Online CV
Description: HTML5 / CSS3 One Page
Version: 1.0
Author: imkktheme
*/

/*------------------------------------------------------------------*/

body {
    font-family : 'Hind', sans-serif;
    font-size   : 17px;
    line-height : 1.8em;
    color       : #3d3d50;
    font-weight : 300;
    background  : #ffffff;
    }
    
.desktop1 {
		display: none;
	}

  
 /* AWARDS CSS */
  
   .award-bg {
   background-color : #f8fafd;
   }
  
  hr.awards
  { 
     margin-top: 0em;
     margin-bottom: 0em;
     border-width: 2px;
    
  } 
  
  
  /* END AWARDS CSS */
  
	
  /* 2532x1170 pixels at 460ppi */
  @media only screen 
      and (device-width: 390px) 
      and (device-height: 844px) 
      and (-webkit-device-pixel-ratio: 3) { 
        
        body {
        font-family : 'Hind', sans-serif;
        font-size   : 19px;
        line-height : 1.8em;
        color       : #3d3d50;
        font-weight : 300;
        background  : #ffffff;
        }
      }
	
/* --------------------------------------
 * Global Typography
 *------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    margin : 0 0 15px;
    color  : #2b2b3d;
    }

h1 {
    font-size   : 32px;
    line-height : 1.8em;
    font-weight : 700;
    }

h2 {
    font-size   : 26px;
    line-height : 1.8em;
    font-weight : 700;
	text-transform:uppercase;
    }
    
    
.www h2 {
    font-size   : 26px;
    line-height : 1.8em;
    font-weight : 700;
	text-transform:lowercase;
    }

h3 {
    font-size   : 22px;
    line-height : 1.8em;
    font-weight : 500;
    }

h4 {
    font-size   : 17px;
    line-height : 1.8em;
    font-weight : 500;
    }

h5 {
    font-size   : 30px;
    line-height : 1.8em;
    font-weight : 700;
    }

h6 {
    font-size   : 15px;
    line-height : 1.5em;
    }

 .img-index-logo {
	width: 100%;
	
	} 

 .larger1 p{
     font-size: 50px;
   }   
     /*-------------------
 * iPhone SE ACTUAL
 *-------------------*/

@media (max-width : 350px) {
   
    
    h1 {
    font-size   : 29px;
    line-height : 1.8em;
    font-weight : 700;
    }
    
    .header .content h1 {
    font-size   : 26px;
    color       : #ffffff;
    line-height : 1;
    margin      : 0;
    }
    
    .header .content p {
    font-size : 18px;
    color     : #ffffff;
    }
    
    
    
    .section-title h2 {
    margin-bottom : 25px;
    color         : #222;
    line-height: 1.2em;
    
    }
  .section-title h2:after {
    width: 80%;
    height: 3px;
    position: absolute;
    text-align: center;
    bottom: -5px;
    left: 0;
    margin: 0px;
    z-index: 1;
    content: '';
	background-color: #36569C;
    }
    
     .img-index-logo {
	width: 100%;
	
	} 
       
    }
    
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

.header .content h1 {
    font-size   : 32px;
    color       : #ffffff;
    line-height : 1;
    margin      : 0;
    }
    
 .img-index2 {
	width: 60%;
	
	}
    
     .img-index-logo {
	width: 100%;
	
	} 

}

/* iPhone 11 pro max  */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 896px)

  and (-webkit-min-device-pixel-ratio: 3) {

   .img-index-logo {
	width: 100%;
	
	} 
	
	
	 .header .content .social-icon li a {
    display       : block;
    font-size     : 20px;
    color         : #ffffff;
    width         : 10px;
    height        : 10px;
    line-height   : 12px;
    text-align    : center;
    border-radius : 100%;
    border        : 2px solid rgba(255, 255, 255, .2);
    }
    
    body {
    font-family : 'Hind', sans-serif;
    font-size   : 20px;
    line-height : 1.8em;
    color       : #3d3d50;
    font-weight : 300;
    background  : #ffffff;
    }
    
    .img-cert {
	width: 100%;
	
	}
	
	.desktop1 {
		display: block;
	}
	
	.footer .copyright-section {
    font-size : 15px;
    color     : #888888;

    }

}

/* --------------------------------------
 * LINK STYLE
 *------------------------------------------*/
a {
    color              : #2a54f5;
    text-decoration    : none;
    -webkit-transition : all 0.3s ease 0s;
    -moz-transition    : all 0.3s ease 0s;
    -o-transition      : all 0.3s ease 0s;
    transition         : all 0.3s ease 0s;
    }

a,
a:active,
a:focus,
a:active {
    text-decoration : none;
    outline         : none
    }

a:hover,
a:focus {
    text-decoration : none;
    color           : #000;
    }

p {
    margin-bottom : 20px;
    }

ul {
    margin     : 0;
    padding    : 0;
    list-style : none;
    }

/*------------------
 * Button Style
 *------------------*/
.btn {
    padding        : 14px 30px 11px;
    margin-bottom  : 0;
    font-size      : 14px;
    font-weight    : 500;
    border-radius  : 0;
    border         : 0;
    text-transform : uppercase;
    }

.btn-lg {
    font-weight : 700;
    font-size   : 24px;
    padding     : 15px 30px;
    }

/*btn-primary*/
.btn-primary {
    background-color : #2a54f5;
    }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
    background : #1e3eb5;
    }

/*btn-default*/
.btn-default {
    color            : #2a54f5;
    background-color : transparent;
    border           : 2px solid #2a54f5;
    }

.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus {
    background   : #2a54f5;
    color        : #ffffff;
    border-color : #2a54f5;
    }

button:focus,
.btn:focus,
.btn:active:focus {
    outline : none;
    }



/*****	#BUTTONS	*****/
button {
	border:none;
	cursor:pointer;
  text-decoration: none;
  transition: all .3s ease 0s;
}
.button {
	background-color:#ffea00;
	color:#4b4e53;
	border:none;
	border-radius:2px;
	transition: all .3s ease 0s;
/****	add in anim	*******/
	outline: none;
	position: relative;	
	
}
.button:hover {
	background-color:#101010;
	color:#fff;
	transition: all .3s ease 0s;
}
.button.medium  {
	padding: 10px 37px 10px 37px;
	display:inline-block;
}
.button.medium-compare  {
	font-size:14px;
	line-height:36px;
	padding:0px 16px 0px 16px;
	display:inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	width:90%;
}
.button.medium-border  {
	font-size:14px;
	line-height:36px;
	height:36px;
	padding:0px 16px 0px 16px;
	display:inline-block;
	border-bottom: 1px solid #FFFFFF !important;
  border-right: 1px solid #FFFFFF !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .1) !important;
}
.button.large {
	font-size:16px;
	line-height:20px;
	padding:20px 40px;
	display:inline-block;
}
.button.large-border {
	font-size:20px;
	line-height:20px;
	padding:15px 39px 15px 39px;
	display:inline-block;
	border-bottom: 1px solid #FFFFFF !important;
  border-right: 1px solid #FFFFFF !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .1) !important;
}
.button.small {
	font-size:11px;
	line-height:16px;
	padding: 10px 15px 10px 15px;
	display:inline-block;
}
.button.small-border {
	font-size:12px;
	line-height:16px;
	padding: 6px 10px;
	display:inline-block;
	border-bottom: 1px solid #FFFFFF !important;
  border-right: 1px solid #FFFFFF !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .1) !important;
}
.button-icon-right {
	margin-left:6px;
}
.button-icon-left {
	margin-right:6px;
}

/*****	#ANIMATION BUTTONS	*****/
.btn-4 {
	overflow: hidden;
	padding-right: 40px !important;
	padding-left: 40px !important;
}
.btn-4 .button-icon-anim  {
	position: absolute;
	font-size: 125%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: left .3s ease;
}

/* Button 4aa */
.btn-4aa .button-icon-anim  {
	left: 130%;
}
.btn-4aa:hover .button-icon-anim  {
	left: 76%;
}

/* Button 4aa-inv */
.btn-4aa-inv .button-icon-anim  {
	left: 76%;
}
.btn-4aa-inv:hover .button-icon-anim  {
	left: 102%;
}

/* Button 4cc */
.btn-4cc .button-icon-anim  {
	left: 70%;
	opacity: 0;
}
.btn-4cc:hover .button-icon-anim  {
	left: 76%;
	opacity: 1;
}

/* Button 4cc-inv */
.btn-4cc-inv .button-icon-anim {
	left: 76%;
	opacity: 1;
}
.btn-4cc-inv:hover .button-icon-anim {
	left: 70%;
	opacity: 0;
}

/* Button 5 */
.btn-5 {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	padding-right: 45px;
	padding-left: 45px;	
}
.btn-5 .button-text-anim {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	transition: all ease .3s;
	backface-visibility: hidden;
}
.btn-5 .button-icon-anim{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 180%;
	transition: all ease .3s;
}

/* Button 5aa */
.btn-5aa:hover .button-text-anim {
	-webkit-transform: translateY(300%);
	-moz-transform: translateY(300%);
	-ms-transform: translateY(300%);
	transform: translateY(300%);
}
.btn-5aa .button-icon-anim {
	top: -100%;
}
.btn-5aa:hover .button-icon-anim {
	top: 50%;
	left: 50%;
}

/* Button 5bb */
.btn-5bb:hover .button-text-anim  {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
}
.btn-5bb .button-icon-anim {
	left: -100%;
	/* top: 0; */
}
.btn-5bb:hover .button-icon-anim  {
	left: 50%;
}

/*****	#THIN BUTTONS	*****/
.button.thin, .button.small.thin, .button.medium.thin, .button.large.thin   {
	position:relative;
	display:inline-block;
	padding: 13px 17px 13px 17px;
	background-color:transparent;
	color:#7a7b80;
	border: 2px solid #c5c2c2;	
	transition: all .3s ease 0s;
}
.button.small.thin {
	padding: 10px 15px 10px 15px !important;
}
.button.medium.thin {
	padding: 8px 35px 8px 35px !important;
}
.button.large.thin {
	padding: 15px 20px 15px 20px !important;
	line-height:22px;
}
.button.thin:hover {
	background-color:#d7d9dc;
	color:#4b4e53;
	border: 2px solid #d7d9dc;
	transition: all .3s ease 0s;
}
.button.thin.hover-dark:hover {
	background-color:#4b4e53 !important;
	border: 2px solid #4b4e53 !important;
	color:#fff !important;
}
.button.thin-bg-dark {
	position:relative;
	display:inline-block;
	padding: 13px 17px 13px 17px !important;
	background-color:transparent !important;
	color:#4b4e53 !important;
	border: 2px solid #727578 !important;	
	transition: all .3s ease 0s;
}
.button.thin-bg-dark:hover {
	background-color:#ffea00 !important;
	color:#4b4e53 !important;
	border: 2px solid #ffea00 !important;
	transition: all .3s ease 0s;
}

/*****  #BUTTONS THIN COLORS  *****/
.button.thin.yellow{
	border-color:#ffea00;
	color:#ffea00;
}
.button.thin.yellow:hover {
	background-color:#ffea00;
	color:#4b4e53;
}
.button.thin.blue {
	border-color:#37a2d6;
	color:#37a2d6;
}
.button.thin.blue:hover {
	background-color:#37a2d6;
	color:#fff;
}
.button.thin.cyan {
	border-color:#4cc1d3;
	color:#4cc1d3;
}
.button.thin.cyan:hover {
	background-color:#4cc1d3;
	color:#fff;
}
.button.thin.teal {
	border-color:#1bbc9b;
	color:#1bbc9b;
}
.button.thin.teal:hover {
	background-color:#1bbc9b;
	color:#fff;
}
.button.thin.gray {
	border-color:#535961;
	color:#535961;
}
.button.thin.gray:hover {
	background-color:#535961;
	color:#fff;
}
.button.thin.white {
	border-color:#fff;
	color:#fff;
}
.button.thin.white:hover {
	background-color:#fff;
	color:#4b4e53;
}
.button.thin.gray-light {
	border-color:#d7d9dc;
	color:#d7d9dc;
}
.button.thin.gray-light:hover {
	background-color:#d7d9dc;
	color:#fff;
}
.button.thin.deeporange {
	border-color:#ff5722;
	color:#ff5722;
}
.button.thin.deeporange:hover {
	background-color:#ff5722;
	color:#fff;
}
.button.thin.green {
	border-color:#259b24;
	color:#259b24;
}
.button.thin.green:hover {
	background-color:#259b24;
	color:#fff;
}
.button.thin.lime {
	border-color:#cddc39;
	color:#cddc39;
}
.button.thin.lime:hover {
	background-color:#cddc39;
	color:#fff;
}

/*****	#HOVER THIN BUTTONS		*****/
.button.hover-thin  {
	border: 2px solid #ffea00;
	transition: all .3s ease 0s;
}
.button.hover-thin:hover  {
	background:none;
	border: 2px solid #dfdfdf;
	color:#4b4e53;
}
.button.medium.hover-thin  {
	padding: 10px 37px;
}
.button.large.hover-thin {
	padding:18px 23px 18px 23px;
}
.button.small.hover-thin {
	padding: 8px 13px 8px 13px;
}

/*****	#HOVER THIN BUTTONS COLORS		*****/
.button.yellow.hover-thin {
	border-color: #ffea00;
}
.button.yellow.hover-thin:hover {
	background:none;
	border: 2px solid #ffea00;
	color:#ffea00;
}
.button.blue.hover-thin {
	border-color: #37a2d6;
}
.button.blue.hover-thin:hover {
	background:none;
	border: 2px solid #37a2d6;
	color:#37a2d6;
}
.button.cyan.hover-thin {
	border-color: #4cc1d3;
}
.button.cyan.hover-thin:hover {
	background:none;
	border: 2px solid #4cc1d3;
	color:#4cc1d3;
}
.button.teal.hover-thin {
	border-color: #1bbc9b;
}
.button.teal.hover-thin:hover {
	background:none;
	border: 2px solid #1bbc9b;
	color:#1bbc9b;
}
.button.gray.hover-thin {
	border-color: #535961;
}
.button.gray.hover-thin:hover {
	background:none;
	border: 2px solid #535961;
	color:#535961;
}
.button.gray-light.hover-thin {
	border-color: #d7d9dc;
}
.button.gray-light.hover-thin:hover {
	background:none;
	border: 2px solid #d7d9dc;
	color:#4b4e53;
}
.button.deeporange.hover-thin {
	border-color: #ff5722;
}
.button.deeporange.hover-thin:hover {
	background:none;
	border: 2px solid #ff5722;
	color:#ff5722;
}
.button.green.hover-thin {
	border-color: #259b24;
}
.button.green.hover-thin:hover {
	background:none;
	border: 2px solid #259b24;
	color:#259b24;
}
.button.lime.hover-thin {
	border-color: #cddc39;
}
.button.lime.hover-thin:hover {
	background:none;
	border: 2px solid #cddc39;
	color:#cddc39;
}
/*****	#THIN-INV BUTTON	*****/
.button.thin-inv, .button.thin-inv-bg-dark {
	display:inline-block;
	background-color:#ffea00 !important;
	color:#fff !important;
	border: 2px solid #ffea00 !important;	

	transition: all .3s ease 0s;
}
.button.thin-inv:hover {
	background-color:transparent !important;
	border: 2px solid #dfdfdf !important;
	color:#4b4e53 !important;
	
	transition: all .3s ease 0s;
}
.button.thin-inv-bg-dark:hover {
	background-color:transparent !important;
	border: 2px solid #dfdfdf !important;
	color:#fff;
	
	transition: all .3s ease 0s;
}
.button.color-black {
	color:#4b4e53 !important;
}
/*****  #BUTTONS COLORS  *****/
.button.yellow {
	background-color:#ffea00;
	color:#4b4e53;
}
.button.yellow:hover {
	background-color:#4b4e53;
	color:#fff;
}
.button.blue {
	background-color:#37a2d6;
	color:#fff;
}
.button.blue:hover {
	background-color:#4b4e53;
}
.button.cyan {
	background-color:#4cc1d3;
	color:#fff;
}
.button.cyan:hover {
	background-color:#4b4e53;
}
.button.teal {
	background-color:#1bbc9b;
	color:#fff;
}
.button.teal:hover {
	background-color:#4b4e53;
}
.button.gray {
	color:#fff;
	background-color:#535961;
}
.button.gray:hover {
	background-color:#101010;
}
.button.gray-light {
	color: #4b4e53;
	background-color: #d7d9dc;
}
.button.gray-light:hover {
	background-color:#4b4e53;
  color:#fff;
	cursor:pointer;
}
.button.deeporange {
	color:#fff;
	background-color:#ff5722;
}
.button.deeporange:hover {
	background-color:#4b4e53;
	cursor:pointer;
}
.button.green {
	color:#fff;
	background-color:#259b24;
}
.button.green:hover {
	background-color:#4b4e53;
	cursor:pointer;
}
.button.lime {
	color:#fff;
	background-color:#cddc39;
}
.button.lime:hover {
	background-color:#4b4e53;
	cursor:pointer;
}
/****************************************/
.demo-buttons a{
	margin-right:6px;
	margin-bottom:10px;
}
.button i {
  margin: 0 5px 0 -1px;
}
.button.medium i, .button.medium-border i {
  margin: 0 6px 0 -4px;
}
.button.large i, .button.large-border i {
  margin: 0 10px 0 -15px;
}
.button.black {
	font-family: 'Open Sans', sans-serif;
	color:#ffffff;
	font-style:normal;
	background-color:#4d4d4d;
}
.button.black:hover {
	background-color:#575757;
}
a {
  color: #4b4e53;
	outline: none !important;
  text-decoration: none;
  transition: all .3s ease 0s;
}
a:hover {
  color: #97999c;
  text-decoration: none;
  transition: all .3s ease 0s;
	cursor:pointer;
}
.a-dark{
	color: #101010;
}
.a-dark:hover{
	color: #97999c;
}
.a-white{
	color: #fff;
}
.a-white:hover{
	color: #a5a5a5;
}
.a-inv{
	color: #7e8082;
}
.a-inv:hover{
	color: #101010;
}
.a-text, .a-text-cont a{
	color: #7e8082;
}
.a-text:hover, .a-text-cont a:hover{
	color: #101010;
}
.a-blue{
	color: #37a2d6;
}
.a-blue:hover{
	color: #4b4e53;
}
a:focus {
	text-decoration:none !important;
}
a:hover, a:focus {
  color: #97999c;
  text-decoration: none;
  transition: all .3s ease 0s;
	cursor:pointer;
}
.button.get-theme {
	font-size:14px;
	padding:10px 17px 10px 40px;
	background-color:#ffea00;
	background: url(../images/icon-get-theme.png) no-repeat scroll 14px center, #ffea00;
	display:inline-block;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
}
.button.get-theme:hover {
	background-color:#5a5a5a;
}
.button-full-center {
	font-style: normal;
    width: 100%;
	text-align: center;
	font-weight: 300;
}
.container-buttons {
	margin:0;
	padding:0;
	list-style: none;
}
.container-buttons li{
	margin-bottom:10px;
}
.black-text {
	color:#4B4E53 !important;
	border-color:#4B4E53 !important;
}



/* --------------------
 * Column Block
 * -------------------*/

.columns-block {
    flex-wrap         : wrap;
    display           : -webkit-box;
    display           : -moz-box;
    display           : -ms-flexbox;
    display           : -webkit-flex;
    display           : flex;
    -webkit-flex-flow : row wrap;
    justify-content   : space-around;
    }

.blocks {
    box-sizing : border-box;
    }

.left-col-block {
    width      : 50%;
    text-align : center;
    overflow   : hidden;
    position   : fixed;
    left       : 0;
    }

.right-col-block {
    width      : 50%;
    position   : absolute;
    right      : 0;
    box-shadow : -10px -10px 30px rgba(0, 0, 0, 0.23);
    }

@media (max-width : 600px) {
    .left-col-block {
        width    : 100%;
        position : relative;
        }

    .right-col-block {
        width      : 100%;
        position   : relative;
        box-shadow : none;
        }
    }

/* --------------------
 * Section Background
 * -------------------*/

.gray-bg {
    background-color : #ececec;
    }

/* --------------------
 *  main Wrapper
 * -------------------*/
#main-wrapper {
    background : #ffffff;
    overflow   : hidden;
    }

/*-------------------
 * Section Wrapper
 *-------------------*/
.section-wrapper {
    padding : 50px;
    }

@media (max-width : 480px) {
    .section-wrapper {
        padding : 30px 20px;
        }
    }

/*---------------------------
* Section Title
*---------------------------*/
.section-title {
    margin-bottom : 15px;
	position      : relative;
    }

.section-title h2 {
    margin-bottom : 25px;
    color         : #222;
    line-height: 1.2em;
    
    }
.section-title h2:after {
    width: 80%;
    height: 3px;
    position: absolute;
    text-align: center;
    bottom: -5px;
    left: 0;
    margin: 0px;
    z-index: 1;
    content: '';
	background-color: #36569C;
    }
    
.section-title h1 {
        margin-bottom : 25px;
        color         : #222;
        line-height: 1.2em;
        margin-top: -8px;
        
        }
    .section-title h1:after {
        width: 100%;
        height: 3px;
        position: absolute;
        text-align: center;
        bottom: -5px;
        left: 0;
        margin: 0px;
        z-index: 1;
        content: '';
      background-color: #36569C;
        }
/*-----------------------------
 * NAVIGATION & HEADER STYLE
 *-------------------------------*/

.header {
    padding        : 0;
    margin         : 0;
    height         : 100vh;
    vertical-align : middle;
    position       : relative;
    }

.header .profile-img {
    position            : absolute;
    top                 : 0;
    left                : 0;
    z-index             : -1;
    width               : 100%;
    height              : 100%;
    background-image    : url(../img/img-profile.jpg);
    background-size     : cover;
    background-position : center top;
    }
    
.img-index {
	width: 65%;
	
	}
	
	.img-index2 {
	width: 90%;
	
	}
	
	.img-cert {
	width: 100%;
	
	}
	
.header .profile-img:before {
    content    : "";
    position   : absolute;
    left       : 0;
    top        : 0;
    right      : 0;
    bottom     : 0;
    background : linear-gradient(
            -20deg,
            /* DINGE */
         /* WHITE */
      /*    rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .5) 10%,
         /* Yellow   */
        /*    rgba(222, 180, 38, 0.5) 0%,
            rgba(222, 180, 38, 0.5) 10%, 
            
         /* BLUE  */
       rgba(39, 111, 202, 1) 0%,
         rgba(39, 111, 202, 1) 5%, 
         
            transparent 45%,
            transparent 100%
    );

    }

.header .content {
    position : absolute;
    bottom   : 0;
    left     : 0;
    right    : 0;
    width    : 100%;
    margin   : 0 auto;
    padding  : 5%;
    }

.header .content h1 {
    font-size   : 36px;
    color       : #ffffff;
    line-height : 1;
    margin      : 0;
    }

.header .content p {
    font-size : 18px;
    color     : #ffffff;
    }

.header .btn {
    margin-top : 40px;
    }

.header .content .social-icon {
    margin  : 0;
    padding : 0;
    display : block;
    }

.header .content .social-icon li {
    display : inline-block;
    margin  : 0 2px;
    }

.header .content .social-icon li a {
    display       : block;
    font-size     : 24px;
    color         : #ffffff;
    width         : 44px;
    height        : 44px;
    line-height   : 43px;
    text-align    : center;
    border-radius : 100%;
    border        : 2px solid rgba(255, 255, 255, .2);
    }

.header .content .social-icon li a:hover {
    border-color : #ffffff;
    }
    
    /*-------------------
 * iPhone SE
 *-------------------*/

@media (max-width : 600px) {
    .header .profile-img {
        z-index : 1;
        }

    .header .content {
        z-index : 2;
        }
        
    
        
   
    
       
    }
    
    

/*-------------------
 * Intro
 *-------------------*/

.intro {
    }

/*-------------------
 * Skills Progressbar
 *-------------------*/

.progress-item {
    position : relative;
    }

.progress-item .progress-title {
    font-size     : 15px;
    font-weight   : 400;
    display       : inline-block;
    margin-bottom : 5px;
    }

.progress-item .progress {
    height        : 4px;
    box-shadow    : none;
    border-radius : 5px;
    }

.progress-item .progress-bar {
    background-color : #000;
    box-shadow       : none;
    text-align       : right;
    }

.progress-item .progress-percent {
    font-size        : 10px;
    background-color : #36569C;
    position         : absolute;
    top              : 5px;
    padding          : 0 8px;
    border-radius    : 3px;
    }

.progress-item .progress-percent::before {
    content      : "";
    position     : absolute;
    left         : 0;
    bottom       : -4px;
    border-top   : 6px solid #36569C;
    border-right : 8px solid transparent;
    }

/*-------------------
 * Navigation
 *-------------------*/

nav.navbar-default{
	background-color:#fff;
	border-color:#fff;
	font-size:14px;
	font-weight: 700;
	margin:22px 0 -12px 60px;
	padding:0px;
	}

.navbar-collapse{
	padding:0px !important;
	}
nav li a{
	color:#fff !important;
	background-color:#36569C !important;
	}

nav li a:hover{
	color:#fff !important;
	background-color:#8285CE !important;
	}

@media (max-width : 767px) {
nav.navbar-default{
		margin:0px;
		}
.navbar-nav{
	margin:0px;
	}
}
/*-------------------
 * Portfolio
 *-------------------*/

.portfolio-item {
    position      : relative;
    display       : block;
    margin-bottom : 30px;
    }

.portfolio-item .portfolio-thumb img {
    height    : auto;
    display   : block;
    max-width : 100%;
    }

.portfolio-item .portfolio-info {
    position   : absolute;
    bottom     : 0;
    padding    : 30px 15px 5px;
    width      : 100%;
    background : -webkit-linear-gradient(
            top,
            transparent 0%,
            rgba(0, 0, 0, 0.5) 100%
    );
    }

.portfolio-item .portfolio-info h3 {
    margin      : 0;
    line-height : 1;
    color       : #ffffff;
    }

.portfolio-item .portfolio-info small {
    color : #ffffff;
    }

.portfolio-item:hover .portfolio-info {
    background : -webkit-linear-gradient(
            top,
            transparent 0%,
            rgba(222, 180, 38, 0.5) 100%
    );
    }

/*-------------------
 * Content Item
 *-------------------*/

.content-item {
    margin-bottom : 40px;
    }

.content-item h3 {
    margin         : 0 0 10px;
    line-height    : 1;
    font-weight    : bold;
    text-transform : uppercase;
    }

.content-item h4 {
    margin      : 0;
    line-height : 1;
    }

.content-item small {
    color : #888888;
    }

/*-------------------
 * Contact
 *-------------------*/

.feedback-form {
    margin-top : 50px;
    }

/*-------------------
 * Form Style
 *-------------------*/
.form-control {
    height        : 50px;
    padding       : 0 20px;
    font-size     : 16px;
    line-height   : 50px;
    color         : #969595;
    border        : 1px solid #cccccc;
    border-radius : 0;
    box-shadow    : none;
    box-sizing    : border-box;
    }

.form-control:focus,
.form-control:active {
    box-shadow : none;
    }

/* --------------------------------------------
 *   Footer
 *---------------------------------------------- */

/* Copyright */

.footer {
    padding : 30px 50px;
    }

.footer .copyright-section {
    font-size : 13px;
    color     : #888888;

    }

.footer .copyright-section .copytext {
    font-weight : 400;
    display     : block;
    }
    
 .footer .copyright-section .copytext {
    font-weight : 400;
    display     : block;
    }
    
    
.copytext a {
    color       : #666;
    text-decoration    : none;
    -webkit-transition : all 0.3s ease 0s;
    -moz-transition    : all 0.3s ease 0s;
    -o-transition      : all 0.3s ease 0s;
    transition         : all 0.3s ease 0s;
    }

.copytext a,
.copytext a:active,
.copytext a:focus,
.copytext a:active {
    text-decoration : none;
    outline         : none
    }

.copytext a:hover,
.copytext a:focus {
    text-decoration : none;
    color           : #3d3d50;
    }   

@media (max-width : 480px) {
    .footer {
        padding : 10px 20px;
        }
    }

/* ====================
 * Preloader
 * ====================*/
#preloader {
    background : #212121;
    bottom     : 0;
    left       : 0;
    position   : fixed;
    right      : 0;
    top        : 0;
    z-index    : 9999;
    }

#status,
.status-mes {
    background-image    : url(../img/preloader.gif);
    background-position : center;
    background-repeat   : no-repeat;
    height              : 200px;
    left                : 50%;
    margin              : -100px 0 0 -100px;
    position            : absolute;
    top                 : 50%;
    width               : 200px;
    }

.status-mes {
    background : none;
    left       : 0;
    margin     : 0;
    text-align : center;
    top        : 65%;
    }
    
    
    
 .border-img img{
	
	padding: 0px;
	border: 1px solid #cccccc;
}

/* ipad portrait
====================================================================== */
@media only screen and (min-width: 709px) and (max-width: 759px) {

	
	
	.break1 {
		display: none;
	}
	
	.desktop1 {
		display: block;
	}
	
	img-index-logo {
		width: 100%;
	}
}



/* ipad portrait and smaller
====================================================================== */
@media only screen and (min-width: 368px) and (max-width: 600px) {

	.break2 {
		display: none;
	}
	
	.desktop1 {
		display: block;
	}
	
	h2 {
    font-size   : 24px;
  
    
    }
	
	 
    
    .img-index {
	width: 100%;
	
	}
	
	.img-index2 {
	width: 100%;
	
	}
	
	 .img-index-logo {
	width: 100%;
	
	} 
	
	.img-cert {
	width: 100%;
	
	}
}

/* ipad portrait and smaller
====================================================================== */
@media only screen and (min-width: 568px) and (max-width: 900px) {

	.break3 {
		display: none;
	}
	
	.desktop1 {
		display: block;
	}
	
	h2 {
    font-size   : 18px;
    
    }
    
    .header .content p {
    font-size : 16px;
    color     : #ffffff;
    }
	
	  .header .content .social-icon li a {
    display       : block;
    font-size     : 20px;
    color         : #ffffff;
    width         : 30px;
    height        : 30px;
    line-height   : 32px;
    text-align    : center;
    border-radius : 100%;
    border        : 2px solid rgba(255, 255, 255, .2);
    }
    
    .img-index {
	width: 100%;
	
	}
	
	.img-index2 {
	width: 100%;
	
	}
	
	.img-cert {
	width: 100%;
	
	}
}



/* Formstack IPADS landscape Higher than 960 (desktop devices)
====================================================================== */
@media only screen and (min-width: 960px) {

	  .fsBody .fsForm input[type=text].fsField {
width: inherit;
}

.fsBody .fsForm input[type=tel].fsField {
width: inherit;
}    

.fsBody .fsForm input[type=email].fsField {
width: inherit;
}

.fsBody .fsForm textarea.fsField {
width: inherit;
}  


	            
  
}

/* Formstack Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	
	.fsBody .fsForm input[type=text].fsField {
width: inherit;
}

.fsBody .fsForm input[type=tel].fsField {
width: inherit;
}

.fsBody .fsForm input[type=email].fsField {
width: inherit;
}

.fsBody .fsForm textarea.fsField {
width: inherit;
}
	
		
	
}


.highlighted {
	text-shadow: 1px 1px 0 #555;

}






.overlay {
  background: rgba(0,0,0,.45);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.overlay2 {
  background: rgba(0,0,0,.37);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.overlay2b {
  background: rgba(0,0,0,.27);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.overlay3 {
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}




   
    