html * { font-family:Lato,Arial;color:#47474F}
body {background:#017DDD;background-image:url("back.jpg");background-size:cover;background-attachment:fixed;animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards;}
   @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 
a:hover {text-decoration:none}

h1 {font-size:24pt;background:#B83410;color:#FFFFFF;max-width:250px;margin:0 auto;padding:5px;border-radius:10px;border:2px solid #FFFFFF}
h2 {font-size:22pt;margin:5px;padding:5px;border-bottom:2px dashed #E7E7E7;text-transform:uppercase;color:#FFFFFF;margin-bottom:10px}
h3 {font-size:18pt;text-shadow:1px 1px #FFFFFF}
h4 {font-size:16pt}
h5 {font-size:14pt}

header {padding:5px}


.my-container {padding-top:5px }

.myicon {display:inline-block;width:120px;height:120px;padding:15px;margin:10px;background:#225990;color:#FFFFFF;text-align:center;border-radius:50%;font-weight:bold;border:2px solid #FFFFFF;box-shadow:0px 0px 10px rgba(100,100,100,0.55);}
.myicon img {width:50px;height:50px}
.myicon:hover {background:#2890D0;color:#FFFFFF}
.myicon:focus {border:5px solid #F1D60F}

.mybox {display:inline-block;white-space: nowrap;width:165px;padding:10px;margin:10px;background:#FFFFFF;color:#000000;text-align:center;text-transform:uppercase;border:2px solid #FFFFFF;box-shadow:0px 0px 10px rgba(0,0,0,0.6);}
.mybox:focus {border:5px solid #F1D60F}

.mycard {padding:10px;margin:10px;background-color:rgba(255,255,255,.9);border:2px solid #FFFFFF;box-shadow:0px 0px 10px rgba(0,0,0,0.65);}


.modal-dialog {
      max-width: 800px; margin:10px auto
  }