@charset "utf-8";

body{
margin:0;
background: #000;
	  font-family: "Poppins", sans-serif;

  font-style: normal;
	
}

/*body:after{

    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
clip-path: polygon(0 0, 0% 500px, calc(100% - 200px) 0);
	background: url("images/hd23banner.jpg");
	z-index: -1;
	opacity:.6;

}
*/

h1,h2,h3{
color: #fff;
	 font-family: "Teko", serif;
  font-weight: 400;
  font-style: normal;
}	
h1{
font-size:64px;
	margin: 0;

}

h1 span{
font-size:78px;	
}

h2{
font-size:60px;

}

 .panel h2{
display: inline-block;
border-top: 8px solid #DED52C;

}



/*
.panelback-4 h2, .panelback-4 h3{
color: #246cb4;	
}
*/

 .panelback-4 h3, .panelback-5 h3{
display: inline-block;
border-top: 6px solid #fff;
padding-top: 8px;


}

header{
/*position: fixed;
	top:0px;
	left:0px;
	right:0px;
	z-index: 10;

	background: #1C2B3D;*/
}



header,footer{

	color: #fff;

}

#bighero {
	background:#000 url("images/IMG_0432.jpg");	
	background-size: cover;
	background-position: center;

}

.titlebox h2{
	font-weight: 600;
	margin:12px 0 ;
	color: #fff;
    background-origin: border-box;
    background-position:   0px 18px;
    background-repeat: no-repeat;
    background-size: 10px 44px;
	padding-left:16px;
}

.titlebox h2.disctitle{
 background-image: linear-gradient(to bottom, #C0219B 100%, #C0219B 100%);
}
.titlebox h2.desititle{
 background-image: linear-gradient(to bottom, #246cb4 100%, #246cb4 100%);
}
.titlebox h2.delititle{
 background-image: linear-gradient(to bottom, #f7941d 100%, #f7941d 100%);
}

.hdbg-1 {
fill: rgb(0,0,0,0)
}

.hdbg-2 {
fill: rgb(255, 255, 255,.6)
}

header a{
	color:#fff;
	padding:0 1em;
	text-decoration: none;
}
.hlwrp{
/*
	position: absolute;
	  top: 50%;

  transform: translateY(-50%);
	right:30px;
*/
}

.hlwrp a{
	display: inline-block;
	border: 1px solid #246cb4;
	   padding: 12px 24px;
	color:#fff;
	text-decoration: none;
		background-color: #000 !important;
		background-image: linear-gradient(to left, #246cb4 100%, #246cb4 100%)!important;
    background-repeat: no-repeat!important;
    background-size: 0% 100% !important;
    background-position: left !important;
 transition: background-size .5s !important;
}

.hlwrp a:hover{
	    background-size: 100% 100% !important;
}


.panel{
position: relative;

}

.panel .sbwrap .container .siteblock{
	display: flex;
 flex-direction: row;
	padding:60px 0px;
}

 .panel .sbwrap .container .siteblock h3{

}

.panel .sbwrap:nth-child(even) .siteblock{
	display: flex;
flex-direction: row-reverse;
}


.panel .sbwrap:nth-child(even){
	background: #1C2B3D
}

.panelback-4{
background:#0079ce;
		color: #fff;
}

.panel.panelback-4 #secondary{
	font-size: 1em;
/*	font-weight: 600;*/
}

/*
.panel.panelback-4{
	background: #fff;
}
*/
.panel.panelback-5{
background:#f79c33;
	color: #000;
}
.panel.panelback-6{
background:#C0219B;
	color: #000;
}

#panelback-bio {

	color:#fff;
	font-size: 1.25em;
/*	font-weight: 500;*/


}

.panel.panelback-blog h3,#panelback-bio h3{
 font-family: "Teko", serif;
  font-weight: 400;
  font-style: normal;
	color:#fff;

}

#panelback-bio .bioline {
line-height: 40px;

}

#panelback-bio .bioline  .byrs{
	color:#fff;
	display: inline-block;
	transform: scale(2);
	transition: all 1s;

}
#panelback-bio.doBio .bioline  .byrs{
	transform: scale(1);
}


#panelback-bio .b3-wrap{
	opacity: 0;
	transition: opacity .5s;
/*		transition-delay: 1s;*/
}

#panelback-bio.doBio .b3-wrap{
	opacity: 1;

}
#panelback-bio .bioline span{
	padding:6px;

}

#panelback-bio .bioline.bio-2 span, #panelback-bio .bioline.bio-3 span,#panelback-bio .bioline.bio-4 span{

	background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: left;
    transition: background-size 1s ;


}
#panelback-bio .bioline.bio-2 span{
	transition-delay: 1s;	
}
#panelback-bio .bioline.bio-3 span{
	transition-delay: 1.5s;	
}
#panelback-bio .bioline.bio-4 span{
	transition-delay: 2s;	
}
#panelback-bio .bioline.bio-2 span{
background-image: linear-gradient(to left, #C0219B 100%, #C0219B 100%);
}
#panelback-bio .bioline.bio-3 span{
background-image: linear-gradient(to left, #1C2B3D 100%, #1C2B3D 100%);
}
#panelback-bio .bioline.bio-4 span{
background-image: linear-gradient(to left, #f79c33 100%, #f79c33 100%);
}

#panelback-bio.doBio .bioline.bio-2 span, #panelback-bio.doBio .bioline.bio-3 span,#panelback-bio.doBio .bioline.bio-4 span{
    background-size: 100% 100% ;	
}
	


         svg .cls-1 {
        fill: rgb(0,0,0,0)
      }



        svg .cls-2 {
        fill: rgb(255, 255, 255,.6)
		
      }







.panel .container .siteblock{
	display: flex;
 flex-direction: row;
	padding:60px 0px;
}

.panel .container:nth-child(even) .siteblock {

flex-direction: row-reverse;
}






.panel .site-img{
	max-width:50%;
}

.panel .siteinfowrap{
position: relative;
		
	}




.panel .site-info {
	position: relative;


}





.panel  .infoinner{
	position: relative;
}




.panel  .infoouterbdr{
		position:absolute;
	top:30px;
bottom: 45px;
width:100%;
	padding: 20px ;
	border: 5px solid transparent;
   


	
}
.showit .infoouterbdr{
	 background-image: linear-gradient(to left, #246cb4 100%, #246cb4 100%), linear-gradient(to bottom, #246cb4 100%, #246cb4 100%), linear-gradient(to right, #246cb4 100%, #246cb4 100%), linear-gradient(to bottom, #246cb4 100%, #246cb4 100%);
    background-origin: border-box;
    background-position: 0  0, 100% 100%,100% 100% , 0 0;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px,5px 5px , 5px 5px;
 animation: infostroketwo .7s linear forwards;	
}


@keyframes infostroketwo {
 0% {
    background-size: 5px 5px, 5px 5px,5px 5px , 5px 5px;
  }

/*
  40% {
    background-size: 60% 10px , 60% 10px,10px 60% , 10px 60%;
  }
*/


  100% {
    background-size: 100% 5px ,100% 5px ,5px 100% , 5px 100%;
  }
}

.panel .sitelink{

    padding: 24px 0 16px 0;
}
	
.panel .sitelink a{
	text-transform: uppercase;
display: inline-block;
color: #fff;
	background-color: #246cb4;
	background-image: linear-gradient(to left, #3397fb 100%, #3397fb 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: left;
 transition: background-size .5s;
	padding: 12px;
	text-decoration: none;
}

.panel .sitelink a:hover{
	    background-size: 100% 100%;
}

/*
.hlwrp a{
	border: 1px solid #246cb4;
	   padding: 12px 24px;
	color:#fff;
	text-decoration: none;
		background-color: #000 !important;
		background-image: linear-gradient(to left, #246cb4 100%, #246cb4 100%)!important;
    background-repeat: no-repeat!important;
    background-size: 0% 100% !important;
    background-position: left !important;
 transition: background-size .5s !important;
}

.hlwrp a:hover{
	    background-size: 100% 100% !important;
}
*/

.panel4inner{
	padding:100px 0;
}
@media only screen and (max-width : 1280px)	
{
	.sbwrap  .siteinfowrap .infoouterbdr{

    top:0px;
	}
}
@media only screen and (max-width : 1140px)	
{
.panel .sbwrap .container .siteblock, .panel .sbwrap:nth-child(even) .siteblock{

	display: block;
	padding: 25px 0 50px 0;
}
	
	.sbwrap  .siteinfowrap .infoouterbdr{

    padding:50px 0 0 0;
	}
	
.showit .infoouterbdr{

    background-image:none;
	}
.panel .site-img {
    max-width:none;
	}
	.panel .siteinfowrap {
    margin: 0px !important;
}	
	.panel .infoouterbdr{

    position: relative;

    width: 100%;
    padding: 10px;
    border: none;
}
	.panel .sitelink {

    position: relative;

}
	
}

@media only screen and (max-width : 768px)	
{
	h2 {
    font-size: 48px;
    font-weight: 900;
	}

	.titlebox h2{
		display: inline-block;
		font-size: 24px;
		font-weight: 400;
	margin:21px 6px;
    background-position:   0px 11px;
    background-size: 10px 10px;
	padding-left:16px;
	}
	.logotop #havalogo{

max-width:400px;

}
}