/* 

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

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

*/


@media (max-width:1920px){
    .container-sae{
        padding-top: 5%;
        padding-left: 10%;
        height: 100%;
        width: 100%;
        display: table;
        position: relative;
    }
}

@media (min-width:1920px) and (max-width: 2048px) {
    .container-sae{
        padding-top: 5%;
        padding-left: 21%;
        height: 100%;
        width: 100%;
        display: table;
        position: relative;
    }
}

@media (min-width: 1px) and (max-width: 991px) {
    .container-sae{
        padding-top: 5%;
        padding-left: 10%;
        height: 100%;
        width: 100%;
        display: table;
        position: relative;
    }
    .inspiro-slider .container-sae .slide-captions h2 {
        font-size: 34px;
        line-height: 40px;
        margin-top: 20px;
        margin-bottom: 20px; 
    }
    
}


.container-sae .slide-captions h1 {
    font-family:  "Century Gothic","CenturyGothic","AppleGothic","sans-serif"; 
    font-size: 64px;
    /* font-weight: 700; */
    /* line-height: 80px; */
    font-stretch: expanded;
    /* margin-bottom: 10px; */
    color: #fff; 
    text-shadow: 2px 2px #333333; 
}

.container-sae .slide-captions h2 {
    font-family:  "Century Gothic","CenturyGothic","AppleGothic","sans-serif"; 
    font-size: 48px;
    /* font-weight: 700;
    line-height: 68px; */
    font-stretch: expanded;
    margin-top:-10px;
    margin-bottom: 30px;
    color: #fff; 
    text-shadow: 2px 2px #333333; 
}

.container-sae .slide-captions > p {
    color: #fff;
    font-family:  "Century Gothic","CenturyGothic","AppleGothic","sans-serif"; 
    font-size: 18px;
    /* font-weight: 300;
    line-height: 30px; */
    font-stretch: expanded;
    /* margin-bottom: 40px;  */
    text-shadow: 2px 2px #333333;
}

.page-title-mini {
    /* text-align: center; */
    padding: 0; 
}

div.transbox2 {
    background-color: #ffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    display: block;
    position:static;
}

div.transbox {
    /* margin: 0px;
    padding: 5px 5px 5px 5px; */
    background-color: #ffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox h1{
    margin:5px;
    font-family:  "Century Gothic","CenturyGothic","AppleGothic","sans-serif"  !important; 
    font-size: 48px;
    /* line-height: 56px;
    font-weight: 400; */
    /* margin-bottom: 5px;  */
    text-shadow: 2px 2px #000;
}
div.transbox p {
    margin: 5px;
    font-family:  "Century Gothic","CenturyGothic","AppleGothic","sans-serif"  !important; 
}

ul { list-style: none; }
ul>li>a {
    color: #f1f1f1;
    text-decoration: none;
    line-height: 1.8;
}
ul>li>a:hover,
a:hover{
    color: #ff6600;
    font-weight: 500;
}

.col-heading {
/* display: block; */
font-family:  "Century Gothic","CenturyGothic","AppleGothic","sans-serif"  !important; 
font-size: 20px;
/* font-size: 1.6rem; */
text-transform: uppercase;
color:#ffff;
font-weight: 500;
margin: 1rem 0;
padding: .4rem 0px;
border-bottom: 1px solid #c7c7c7; 
letter-spacing: 1px;
}

.fa {
color: #f1f1f1;
margin-right: 10px;
font-size:18px;
width:2.25rem;
}
#to-top {
display: none;
position: fixed;
bottom: 40px;
right: 20px;
font-size: 18px;
border: none;
outline: none;
background-color: #304f50;
color: white;
padding: 15px;
border-radius: 14px;
cursor: pointer;
z-index: 99;
}
#to-top:hover {
background-color: #555;
}

#bottom-footer {
background-color:cadetblue;
color:white;
margin-top: 2rem;
padding-top: .3rem;
}
.vertical-links>li {
display: inline-block;
vertical-align: text-bottom;
}
.vertical-links>li>a {
color: white;
font-weight: 400;
margin-left: 1rem;
list-style-type:square;
}