@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,700,800,800i');

body{
    background: #ecf0f5;
    }


.topnav {
    margin: 15px auto;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {

    display: inline;
    color: #333;
    text-align: center;
    padding: 14px 10px;
    text-decoration: none;
    font-size: 14px;
}

/* Change the color of links on hover */
.topnav a:hover {
    color: black;
}

footer{
    font-size: 14px;
}

.no-padding{
    padding: 0;
    margin: 0;
}

.clearfix{
    clear: both;
    }

.navbar ul li{
    display:inline-block;
 }

h2{
    font-family: 'EB Garamond', serif;
    }


h3{
    font-size: 35px;
    font-weight: 800;
    font-family: 'EB Garamond', serif;
    }

.red{
    color:#ff0000;
    }

.wrapper {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-bottom: 50px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }

.email{
    margin: 20px auto;
    border: 1px solid #0a5d72;
    height: 50px;
}

.email-pop{
    margin: 20px auto 20px auto;
    border: 1px solid #0a5d72;
    height: 50px;
}

.contact{
    margin: 0px auto;
    border: 1px solid #0a5d72;
    height: 50px;
}

.msg{
    margin: 0px auto;
    border: 1px solid #0a5d72;
    height: 150px;
}



.btn-info {
width: 100%;
  background-color: hsl(0, 69%, 22%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
  background-image: -moz-linear-gradient(top, #b42121, #5e1111);
  background-image: -ms-linear-gradient(top, #b42121, #5e1111);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
  background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
  background-image: -o-linear-gradient(top, #b42121, #5e1111);
  background-image: linear-gradient(#b42121, #5e1111);
  border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;


  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  color: #ffffff;
  font-size: 25px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn-info:hover {
 background-color: hsl(0, 99%, 13%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a70000", endColorstr="#410000");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#a70000), to(#410000));
  background-image: -moz-linear-gradient(top, #a70000, #410000);
  background-image: -ms-linear-gradient(top, #a70000, #410000);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a70000), color-stop(100%, #410000));
  background-image: -webkit-linear-gradient(top, #a70000, #410000);
  background-image: -o-linear-gradient(top, #a70000, #410000);
  background-image: linear-gradient(#a70000, #410000);
  border-color: #410000 #410000 hsl(0, 99%, 8%);
  -webkit-font-smoothing: antialiased;
}

.subline{
    font-size:20px;
}


@media only screen and (max-width: 420px) {
.btn-info{
    font-size: 16px;
    padding: 15px 20px 15px 20px;
  text-decoration: none;
  width: 100%;
    }


    h3{
        font-size: 23px;
        }

.subline{
    font-size:16px;
}

}








.modalDialog {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    	}

.modalDialog:target {
        opacity:1;
        pointer-events: auto;
    	}

    .modalDialog > div {
        position: relative;
        margin: 1% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 6px;
   		background:#fff url(../img/modal_bg.png) 0 0 no-repeat;
	    }




.modalDialog > div .banner{
    	margin:15px auto;
    	width:100%;
    	text-align:center;
		}

    .closex {
        color: #333;
        position: absolute;
        right: 10px;
        text-align: center;
        top: 0px;
        text-decoration: none;
        font-weight: bold;
    	}

    .closex:hover {
    	color:#ff0000;
    	}


@media only screen and (max-width: 1180px) {
.video-image{display: none}
h1.modalheading{
	width:100%!important;
	}

}


h1.modalheading{
	font-size: 20px;
	padding: 30px 0 0 45px;
	font-weight: bold;
	color:#333;
	width:300px;
    text-align: left;
	}



ul.check{
 	font-family:Arial, Helvetica, sans-serif;
    line-height:25px;
    list-style-type:none;
    margin:0 0px 25px 5px;
 	}

ul.check li{
	padding-left:30px;
    background:transparent url(../img/ok.png) no-repeat;
    background-position:0 5px;
    text-align:left;
    margin:0 0 10px 40px;
    }