/* root vars */

:root{
	--white: white;
	--black: black;
	--light-blue: lightblue;
	--blue-ish: cornflowerblue;
	--blue: blue;
	--dark-blue: darkblue;
	--dark-grey: dimgrey;
	--light-grey: lightgrey;
	--light-red: lightcoral;
	--red: red;
	--dark-red: darkred;
	--light-green: lightgreen;
	--green: green;
	--dark-green: darkgreen;
	--grey: grey;
	--light-purple: mediumpurple;
	--purple: purple;
	--dark-purple: rebeccapurple;
	--orange: orange;
	--dark-orange: darkorange;
	--red-orange: orangered;
	--gold: rgba(255,196,116,1.00);
	--blue-1: #5EB9E5;
	--blue-2: #199AD9;
	--transparent-blue-1: rgba(94,185,229,.9);
	--transparent-blue-2: rgba(25,154,217,.9);
    --fa-primary-color: rgba(5,125,192,1.00);
    --fa-secondary-color: rgba(137,0,255,1.00);
}

/**{transition: all .25s ease-out}*/
/* navigation */
.navigation ul{list-style: none; display: contents}
.navigation ul li{display: inline-block}
.navigation .card{margin: 0 30px 0 0; overflow: hidden; background: none}
.navigation .card .card-img-top{opacity: .4; transition: all .25s ease-out}
.navigation .card .nav-label{position: absolute; bottom: -21px; left: 0; width: 100%; background-color: rgba(255,196,116,1.00); text-align: center; font-size: 14px; transition: all .25s ease-out; color: rgba(0,64,131,1.00)}
.navigation .card:hover > a .nav-label, .navigation .card.active .nav-label{bottom: 0}
.navigation .card:hover > .card-img-top, .navigation .card.active .card-img-top{opacity: 1}
.navigation .card:hover, .navigation .card.active{box-shadow: inset 0 0 6px 0 rgba(255,255,255,.25), 0 0 8px 0 rgba(0,0,0,.5)}

/* culori text */
.text-white{color: var(white)}
.text-grey{color: var(grey)}
.text-dark-grey{color: var(--dark-grey)}
.text-light-grey{color: var(--light-grey)}
.text-black{color: var(--black)}
.text-light-red{color: var(--light-red)}
.text-red{color: var(--red)}
.text-dark-red{color: var(--dark-red)}
.tetx-light-green{color: var(--light-green)}
.text-green{color: var(--green)}
.text-dark-green{color: var(--dark-green)}
.text-blue{color: var(--blue)}
.text-light-blue{color: var(--light-blue)}
.text-blue{color: var(--blue)}
.text-blue-ish{color: var(--blue-ish)}
.text-dark-blue{color: var(--dark-blue)}
.text-eye-green{color: #dadf21}
.text-light-purple{color: var(--light-purple)}
.text-purple{color: var(--purple)}
.text-dark-purple{color: var(--dark-purple)}
.text-orange{color: var(--orange)}
.text-dark-orange{color: var(--dark-orange)}
.text-red-orange{color: var(--red-orange)}
/* sfarsit culori text */

/* culori fundal */
.bg-light-grey{background-color: var(--light-grey)}
.bg-grey{background-color: var(--grey)}
.bg-dark-grey{background-color: var(--dark-grey)}
.bg-light-red{background-color: var(--light-red)}
.bg-red{background-color: var(--red)}
.bg-dark-red{background-color: var(--dark-red)}
.bg-light-blue{background-color: var(--light-blue)}
.bg-blue{background-color: var(--blue)}
.bg-blue-ish{background-color: var(--blue-ish)}
.bg-dark-blue{background-color: var(--dark-blue)}
.bg-light-green{background-color: var(--light-green)}
.bg-green{background-color: var(--green)}
.bg-dark-green{background-color: var(--dark-green)}
.bg-light-purple{background-color: var(--light-purple)}
.bg-purple{background-color: var(--purple)}
.bg-dark-purple{background-color: var(--dark-purple)}
.bg-orange{background-color: var(--orange)}
.bg-dark-orange{background-color: var(--dark-orange)}
.bg-red-orange{background-color: var(--red-orange)}
.bg-none{background: none}
.bg-gold{background-color: var(--gold)}
.bg-blue-1{background-color: var(--blue-1)}
.bg-blue-2{background-color: var(--blue-2)}
.bg-transparent-blue-1{background-color: var(--transparent-blue-1)}
.bg-transparent-blue-2{background-color: var(--transparent-blue-2)}

/* border radius */

.border-radius-xs{border-radius: 2px}
.border-radius-sm{border-radius: 4px}
.border-radius-md{border-radius: 6px}
.border-radius-lg{border-radius: 8px}
.border-radius-xl{border-radius: 10px}

/* card headers sizes */
.card-header.header-xs{padding: .1rem .4rem}
.card-header.header-sm{padding: .2rem .65rem}
.card-header.header-md{padding: .35rem 1rem}
.card-header.header-lg{padding: .6rem 1.5rem}

/* layers */
.layer-1{z-index: 100}
.layer-2{z-index: 200}
.layer-3{z-index: 300}
.layer-4{z-index: 400}
.layer-5{z-index: 500}
/* layers end */

/* validation messages */
label[id*="error"]{color: red; font-weight: lighter; font-size: 12px; position: absolute; right: 25px; z-index: 50; top: 60%; background-color: white; line-height: 1rem}
input.error{border: 1px solid red}

/* youtube clips*/
.youtube-player {position: relative; padding-bottom: 56.23%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; z-index: 1}
.youtube-player iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent}
.youtube-player img {bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; -webkit-transition: .4s all;        -moz-transition: .4s all; transition: .4s all}
.youtube-player img:hover {-webkit-filter: brightness(75%)}
.youtube-player .play {height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("//i.imgur.com/TxzC70f.png") no-repeat}
/* youtube clips end */

/* radio buttons */
.radio-styled[type="radio"]:checked, .radio-styled[type="radio"]:not(:checked), [type="checkbox"]:checked, [type="checkbox"]:not(:checked){position: absolute; left: -9999px}
.radio-styled[type="radio"]:checked + label, .radio-styled[type="radio"]:not(:checked) + label, [type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label{position: relative; padding-left: 28px;  line-height: 1rem; display: inline-block; color: #666}
.radio-styled[type="radio"]:checked + label:before, .radio-styled[type="radio"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:before{content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #ddd; background: #fff}
.radio-styled[type="radio"]:checked + label:before, .radio-styled[type="radio"]:not(:checked) + label:before{border-radius: 100%} .radio-styled[type="radio"]:checked + label:after, .radio-styled[type="radio"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after, [type="checkbox"]:not(:checked) + label:after{content: ''; width: 12px; height: 12px; background: rgba(27,104,33,1.00); position: absolute; top: 3px; left: 3px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease}
.radio-styled[type="radio"]:checked + label:after, .radio-styled[type="radio"]:not(:checked) + label:after{border-radius: 100%}
.radio-styled[type="radio"]:not(:checked) + label:after, [type="checkbox"]:not(:checked) + label:after {opacity: 0; -webkit-transform: scale(0); transform: scale(0)}
.radio-styled[type="radio"]:checked + label:after, [type="checkbox"]:checked + label:after{opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
/* radio buttons end */

/*.hand{cursor: pointer}
.move{cursor: move}
.grab{cursor: grab}
.help{cursor: help}*/

/* negative margins */
.mt-neg-1, .my-neg-1{margin-top: -.25rem}
.mt-neg-2, .my-neg-2{margin-top: -.5rem}
.mt-neg-3, .my-neg-3{margin-top: -1rem}
.mt-neg-4, .my-neg-4{margin-top: -1.5rem}
.mt-neg-5, .my-neg-5{margin-top: -3rem}
.mb-neg-1, .my-neg-1{margin-bottom: -.25rem}
.mb-neg-2, .my-neg-2{margin-bottom: -.5rem}
.mb-neg-3, .my-neg-3{margin-bottom: -1rem}
.mb-neg-4, .my-neg-4{margin-bottom: -1.5rem}
.mb-neg-5, .my-neg-5{margin-bottom: -3rem}
.ml-neg-1m .mx-neg-1{margin-left: -.25rem}
.ml-neg-2m .mx-neg-2{margin-left: -.5rem}
.ml-neg-3m .mx-neg-3{margin-left: -1rem}
.ml-neg-4m .mx-neg-4{margin-left: -1.5rem}
.ml-neg-5m .mx-neg-5{margin-left: -3rem}
.mr-neg-1m .mx-neg-1{margin-right: -.25rem}
.mr-neg-2m .mx-neg-2{margin-right: -.5rem}
.mr-neg-3m .mx-neg-3{margin-right: -1rem}
.mr-neg-4m .mx-neg-4{margin-right: -1.5rem}
.mr-neg-5m .mx-neg-5{margin-right: -3rem}
/* end negative margins */

.overlay{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: 5000}
.working, .info{position: absolute; top: 50%; left: 50%; min-height: 50px; transform: translate(-50%,-50%); background-color: rgba(255,255,255,1.00); border-radius: 6px; max-height: 98%}
.working{min-width: 150px; max-width: 60%; z-index: 5020}
.info{min-width: 300px; max-width: 95%; z-index: 5010}
.overlay, .working, .info{display: none}
.hidden{display: none}
.icon{filter: drop-shadow(0 0 3px rgba(0,27,82,0.50))}
.d-contents{display: contents}
a, a:hover{color: inherit}
.top-right{position: absolute; top: 50%; right: .5rem; transform: translateY(-50%)}
.p-relative{position: relative}
form div{white-space: nowrap}
.close-btn{position: absolute; top: 0; right: 0; width: 40px; height: auto; line-height: 49px; vertical-align: middle; text-align: center; transition: all .25s}
.close-btn .close-icon{color: var(--dark-grey)}
.close-btn:hover{background-color: var(--light-blue)}
.close-btn:hover > .close-icon{color: red}
.border-light-grey{border-color: rgba(239,239,239,1.00)}
/* slick adjustments */
.slick-slide {margin: 0 15px}
.slick-list {margin: 0 -15px}
.slick-prev::before, .slick-next::before{color: forestgreen}
.slick-prev::before{content: '‹'; font-size: 4rem; line-height: .1rem}
.slick-next::before{content: '›'; font-size: 4rem; line-height: .1rem}
.slick-prev{left: 0; z-index: 10}
.slick-next{right: 0; z-index: 10}
.slick-prev, .slick-next{width: auto; height: auto}
/* end slick */
.vertical-middle{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1}
.left-arrow{left: -30px}
.left-arrow:hover, .right-arrow:hover{text-shadow: 0 0 6px black}
.right-arrow{right: -20px}
.left-arrow, .right-arrow{transition: all .25s ease-out; filter: drop-shadow(0 0 2px white)}
.hand{cursor: pointer}
.hover-white-glow:hover{text-shadow: 0 0 4px white}
.hover-black-glow:hover{text-shadow: 0 0 4px black}
.hover-mix-glow:hover{text-shadow: 0 0 4px black; filter: drop-shadow(0px 0px 4px white)}
.action-button:hover{text-shadow: 1px 1px 2px rgba(0,0,0,.6); transition: all .15s ease-out; filter: brightness(1.2) contrast(1.4)}
.img-shadow{filter: drop-shadow(2px 2px 6px rgba(0,0,0,.25))}

/* marimi text */
.text-xs{font-size: .6rem}
.text-sm{font-size: .8rem}
.text-md{font-size: 1.1rem}
.text-lg{font-size: 1.4rem}
.text-xl{font-size: 1.8rem}
.bold{font-weight: bold}
.text-indent{text-indent: 20px}
.text-reg{font-size: .9rem}
/* sfarsit marimi text */

.text-shadow{text-shadow: 1px 1px 4px rgba(0,0,0,.5)}
.hover-link:hover {color: rgba(77,136,255,1.00) !important}

.modal-open .modal {z-index: 2000000}
.modal-open {overflow: initial}

/* media queries */
@media (max-width:576px){
	.text-xs{font-size: .6rem}
	.text-sm, .text-reg{font-size: .7rem}
	.text-md{font-size: .8rem}
	.text-lg{font-size: 1rem}
	.text-xl{font-size: 1.3rem}
	.bold{font-weight: bold}
	.text-indent{text-indent: 20px}
	/* sfarsit marimi text */
	.navigation .card{margin: 0 5px 0 0; width: 18vw}
	.navigation .card .nav-label{font-size: 11px}
}

@media (min-width:577px) and (max-width: 768px){
	nav ul li a, nav ul li ul li a{font-size: 14px; padding: 10px}
	.navigation .card{margin: 0 5px 0 0; width: 10vw}
	.navigation .card .nav-label{font-size: 12px}
	.text-xs{font-size: .5rem}
	.text-sm, .text-reg{font-size: .7rem}
	.text-md{font-size: .9rem}
	.text-lg{font-size: 1.1rem}
	.text-xl{font-size: 1.4rem}
}

@media (min-width:769px) and (max-width: 992px){
	nav ul li a, nav ul li ul li a{font-size: 14px; padding: 10px}
	.navigation .card{margin: 0 5px 0 0; width: 10vw}
	.navigation .card .nav-label{font-size: 12px}
	.text-xs{font-size: .6rem}
	.text-sm, .text-reg{font-size: .8rem}
	.text-md{font-size: 1rem}
	.text-lg{font-size: 1.2rem}
	.text-xl{font-size: 1.5rem}
}