﻿@charset "UTF-8";

/* Mobile first styles 
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
	border-style: solid;
/*	border-radius: 0 0 10px 0;*/
	border-width: 2px;
	border-image-source: linear-gradient(to right, #007da2, #026597);
	border-image-slice: 1;
	text-align: center;
	color: #223647;
	padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 18px;
    padding-right: 20px;
	min-width: 150px;
	text-decoration: none;
	display: inline-block;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-size: 17px;
	letter-spacing: .5px;
}
.button:hover, .button:focus {
	color: #fff;
	text-shadow: 1px 1px rgba(0,0,0,0.1);
	background: -moz-linear-gradient(right, #007da2, #026597);
	background: linear-gradient(to right, #007da2, #026597);
	text-decoration: none;
    padding-right: 20px;
    padding-left: 18px;
}
.button:active {
   opacity: 0.7;
}
.button:after {
	content: "\f105";
	font-family: "Font Awesome 6 Pro" ;
	font-size: 22px;
	position: relative;
	top: 2px;
	left: 5px;
    margin-left: 0;
    margin-right: 5px;
    -moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.button:hover:after {
   margin-left: 3px;
   margin-right: 2px;
}
.button:active:after {
   -moz-transition: all 0.1s ease;
   -webkit-transition: all 0.1s ease;
   -o-transition: all 0.1s ease;
   transition: all 0.1s ease;
   margin-left: 0;
   margin-right: 5px;
}

/* Extra small devices (portrait phones, 576px and higher)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 576px) { 
   .button {
	font-size: 18px;
}
}

/* Small devices (landscape phones, 768px and higher)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*@media (min-width: 768px) { 
   
}*/

/* Medium devices (tablets, 992px and higher)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*@media (min-width: 992px) { 
   
}*/

/* Large devices (desktops, 1200px and higher)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*@media (min-width: 1200px) { 
   
}*/

/* Extra large devices (large desktops)
   No media query since the extra-large breakpoint has no upper bound on its width */
