/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

:root {
    --blue1:  #2e4fa9 ;
    --blueD:  #0d47a1;
    --green1: #00ffce ;
    --greyL : #f5f5f5 ;
    --greyD : #565758 ;
    --blue2 : #0d47a1 ;
    --green2: #3bbfad ;

}

#header
{
	z-index: 4 !important ;
}

@font-face {
            font-family: 'Gotham-Book';
            font-style: normal;
            font-weight: normal;
            src: local('Gotham-Book'), url('../webfonts/Gotham-Book.woff') format('woff') ;
     }

@font-face {
            font-family: 'gotham-black-webfont';
            font-style: normal;
            font-weight: normal;
            src: local('gotham-black-webfont'), url('../webfonts/gotham-black-webfont.woff') format('woff') ;
     }

@font-face {
            font-family: 'Gotham-Medium';
            font-style: normal;
            font-weight: normal;
            src: local('Gotham-Medium'), url('../webfonts/Gotham-Medium.woff') format('woff') ;
     }

h1, h2, h3 
{
    font-family: 'Gotham-Medium' !important ;
}

h4, h5,
h6,p,a, label, span, ul, li, .form-control, .lead  
{
   font-family: 'Gotham-Book' !important ;
}


#header.dark #mainMenu nav > ul > li > a {
    color: var(--greyD) ;
    background-color: var(--greyL) ;
    border-radius: 15px ;
    font-size: 11px ;
}

#header.dark #mainMenu nav > ul > li > a:hover {
    color: white;
    background-color: var(--green1) ;
}

.inspiro-slider .slide-captions h1 {
 
    color: #4682b4 !important;
}
.inspiro-slider .slide-captions > p {
    color: #00cccc !important ;
 
}

.blueF 
{
	color: var(--blue1) !important  ;
}

.greenA{
	color: var(--green1) !important ;
}

.blueD {
	color: var(--blueD) ;
}

.bg_blueD
{
   background-color: var(--blueD) !important ;
}

.bg_blue2 {
	background-color: var(--blue2) ; 
}

.bg_greyL {
	background-color: var(--greyL) ;
}

.border_green1 {
	border-radius: 15px;
    line-height: normal;
    border: 2px solid var(--green1);
    padding: 20px;
}

.border_green2 {
	border-radius: 15px;
    line-height: normal;
    border: 2px solid var(--green1);
}
 
.inp_cont
{
	font-size: xx-large ;
	border-radius: 20px ;
	border: 2px solid var(--greyD) ;
}

.row_com {
	padding-top: 7% ; 
}

.special-text {
    line-height: 30px;
    font-size: 28px;
    color: #ddd;
    position: relative;
}
.special-text b {
    color: #fff;
}
.special-text:before {
    content: '';
    background: linear-gradient(90deg , #061e59 52%, transparent 96%);
    position: absolute;
    width: 110%;
    height: 32px;
    left: -30px;
    top: 30px;
    z-index: -1;
}


.marc_1a
{
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat; 
    min-height: 171px; 
}


@media (min-width: 989px) and (max-width: 1024px){
	
 

	#header.dark #mainMenu nav > ul > li 
	{
		padding-right: 10px;
	}
	#header.dark #mainMenu nav > ul > li > a 
	{	
		font-size: 9px;
	}

	.h1_green
	{
		font-size: 38px ;
	}
}


@media (max-width: 576px)
{
	.marc_1a 
	{
		min-height: 98px ;
	}

	.parr_1
  	{
    	 font-size : 8px ;
    }

	.h4_rlogo
	{
		text-align: 	center !important ;
	}
	#c_borde1
	{
		height: 75px !important ;
	}
	.marcoc
	{
		height: 173px; 
	}

	.h3_circle {
		padding-left: 10% !important ;
		line-height: normal !important ;
	}

	#border1, #border2 , .border3
	{
		background-image: none !important;
	}
	#sec_comp2 
	{
		background-image: none !important; 
	} 
	#sec_home3 
	{
		background-image: url('../images/fondo_b2.jpg') !important ;
	}

	#sec_home1
	{
		height: auto !important ;
	}
	p{
		line-height: initial ; 
	}
	h3 {
		line-height: initial ;
	}
	h4 
	{
		font-size: small     ;
		line-height: initial ;
	}

	h1
	{
		font-size: large !important ;
		line-height: normal !important ;
	}

	.h4_mar
	{
		font-size: 10px ;
	}
	.bord_iconc
	{
		min-height: 60px !important;  
	}
	#sec_comp1
	{
		height: 213px !important ; 
		background-size: contain !important ;
		background-position-y: top !important;
	}	
	.row_com
	{
		padding-top: 0 !important ;
	}
	.h1_icon
	{
		text-align: center !important; 
	}

	#sec_prod, #sec_contac, #vip_img
	{
		height: auto !important;
	}

	.h2_vip
	{
		font-size: small     ;
		line-height: initial ;
	}

	.special-text
	{
		font-size: 17px ;
	}

	
}



@media (min-width: 768px) and (max-width: 991px) {
   
   .marc_1a 
   {
        min-height: 98px;
   }

  .parr_1
  {
     font-size : 8px ;
     line-height: 8px;
  }

  .h3_in  
  {
  	 font-size: 15px ;
  }

  .special-text 
  {
  	line-height: 23px;
    font-size: 17px;
  }  

}