
 .btn-primary.active, .btn-primary:active, .btn-xl.active, .btn-xl:active, .open .dropdown-toggle.btn-primary, .open .dropdown-toggle.btn-xl {
    background-image: none;
}
html {margin:0;padding:0; backgorund-color:#fefcff}
body {
    overflow-x: hidden;
    font-family:Poppins,sans-serif;
   
}

body.index{}



.btn-primary, .btn-xl, h1, h2, h3, h4, h5, h6 {
    font-family:Poppins;
    text-transform: uppercase;
    font-weight: 600;
}
.text-muted {
    color: #777;
}


.introduzionepagina{font-size:15px}
.colonnapagina{font-size:14px}
.colonnapaginaText {font-size:14px;padding:0;}
.colonnapaginaText p {font-size:13px;padding:0;text-line:15px}
.topcontainer {padding-top:10px}

.contenuto {background-size: cover;background-position:center;background-repeat:no-repeat}

.opacizza {padding:30px;border-radius:10px;background-color:rgb(255,255,255,0.8)}

.testofoto{font-size:13px}

.alerts {height:200px;width:400px;margin:0;background:#fff;border:#666 3px solid ;border-radius:5px;position:absolute;top:100px;left:100px;z-index:2000}

.text-primary, a {
    color: #535353;
}

p {
    font-size: 14px;
    line-height: 1.75;
}
p.large {
    font-size: 16px;
}
a, a.active, a:active, a:focus, a:hover {
    outline: 0;
}
a.active, a:active, a:focus, a:hover {
    color: #df404c;
}
.img-centered {
    margin: 0 auto;
}


.bg-light-gray {
    background-color: #fefcff
}

.bg-light-white {
    background-color: #fff
}



.bg-darkest-gray {
    background-color: #222;
}
.btn-primary {
    color: #fff;
    background-color: #535353;
    border-color: #df404c;
}
.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #df404c;
    border-color: #535353;
}
.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    background-color: #535353;
    border-color: #535353;
}
.btn-primary .badge {
    color: #df404c;
    background-color: #fff;
}
.btn-xl {
    color: #fff;
    background-color: #535353;
    border-color: #535353;
    border-radius: 3px;
    font-size: 18px;
    padding: 20px 40px;
}
.btn-xl.active, .btn-xl:active, .btn-xl:focus, .btn-xl:hover, .open .dropdown-toggle.btn-xl {
    color: #fff;
    background-color: #df404c;
    border-color: #535353;
}
.btn-xl.disabled, .btn-xl.disabled.active, .btn-xl.disabled:active, .btn-xl.disabled:focus, .btn-xl.disabled:hover, .btn-xl[disabled], .btn-xl[disabled].active, .btn-xl[disabled]:active, .btn-xl[disabled]:focus, .btn-xl[disabled]:hover, fieldset[disabled] .btn-xl, fieldset[disabled] .btn-xl.active, fieldset[disabled] .btn-xl:active, fieldset[disabled] .btn-xl:focus, fieldset[disabled] .btn-xl:hover {
    background-color: #535353;
    border-color: #535353;
}
.btn-xl .badge {
    color: #df404c;
    background-color: #fff;
}
.navbar-custom {
    background-color: #222;
    border-color: transparent;
}
.navbar-custom .navbar-brand {
    color: #df404c;
    font-family: "Poppins", , cursive;
}
.navbar-custom .navbar-brand.active, .navbar-custom .navbar-brand:active, .navbar-custom .navbar-brand:focus, .navbar-custom .navbar-brand:hover {
    color: #df404c;
}
.navbar-custom .nav li a, .navbar-custom .navbar-toggle {
    font-family:Poppins;
    color: #fff;
    text-transform: uppercase;
}
.navbar-custom .navbar-collapse {
    border-color: rgba(255, 255, 255, .02);
}
.navbar-custom .navbar-toggle {
    background-color: #535353;
    border-color: #535353;
    font-size: 12px;
}
.navbar-custom .navbar-toggle:focus, .navbar-custom .navbar-toggle:hover {
    background-color: #535353;
}
.navbar-custom .nav li a {
    font-weight: 400;
    letter-spacing: 1px;
	font-size: 1.1em;
}
.navbar-custom .nav li a:focus, .navbar-custom .nav li a:hover {
    color: #df404c;
    outline: 0;
}
.navbar-custom .navbar-nav>.active>a {
    border-radius: 0;
    color: #fff;
    background-color: #535353;
}
.navbar-custom .navbar-nav>.active>a:focus, .navbar-custom .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #df404c;
}


img,p img, div img, td img {max-width:100%}
.navbar-toggle{margin-top:20px}
#language {margin:0;padding-left:10px;padding-right:10px;position:absolute;right:15px;top:0px; color: #fff;
    background-color: #535353;
    border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
      line-height:16px
    
    }

#language a {color: #fff;font-size:10px}
@media (min-width:768px) {



    .navbar-custom {
    background-color: transparent;
    padding: 25px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
    border: none;
}
.navbar-custom .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
.navbar-custom .navbar-nav>.active>a {
    border-radius: 3px;
}
.navbar-custom.affix {
    background-color: #222;
    padding: 10px 0;
}
.navbar-custom.affix .navbar-brand {
    font-size: 1.5em;
}
}header {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-align: center;
    color: #fff;
}
header .intro-text {
    //padding-top: 100px;
    //padding-bottom: 50px;
}
header .intro-text .intro-lead-in {
    font-family: "Poppins", , sans-serif;
    font-style: italic;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 25px;
}
header .intro-text .intro-heading {
    font-family:Poppins;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 25px;
}





@media (min-width:768px) {



.media{width:50%;float:left;text-align:left;}



    header .intro-text {
    //padding-top: 300px;
    //padding-bottom: 200px;
    
}
header .intro-text .intro-lead-in {
    font-family: "Poppins", , sans-serif;
    font-style: italic;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
}
header .intro-text .intro-heading {
    font-family:Poppins;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 75px;
    line-height: 75px;
    margin-bottom: 50px;
}
} .portfolio-item .portfolio-caption p, section h3.section-subheading {
    font-family: "Poppins", , sans-serif;
    font-style: italic;
}

section {
    padding: 60px 0;
}
section h2.section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}
section h3.section-subheading {
    font-size: 16px;
    text-transform: none;
    font-weight: 400;
    margin-bottom:30px;
}

 section h3.section-subheading p{ font-size: 16px;}



@media (min-width:768px) {





    section {
    padding: 150px 0;
}
}.service-heading {
    margin: 15px 0;
    text-transform: none;
}
 . {
    margin: 0 0 15px;
    right: 0;
}
 .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}
 .portfolio-item .portfolio-link .portfolio-hover {
    background: rgba(254, 209, 54, .9);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}
 .portfolio-item .portfolio-link .portfolio-hover:hover {
    opacity: 1;
}
 .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    position: absolute;
    width: 100%;
    height: 20px;
    font-size: 20px;
    text-align: center;
    top: 50%;
    margin-top: -12px;
    color: #fff;
}
 .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
    margin-top: -12px;
}
 .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,  .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
    margin: 0;
}
 .portfolio-item .portfolio-caption {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
    padding: 25px;
}
 .portfolio-item .portfolio-caption h4 {
    text-transform: none;
    font-size: 16px;
    margin: 0;
}
 .portfolio-item .portfolio-caption p {
    font-size: 14px;
    margin: 0;
}
footer span.copyright, footer ul.quicklinks {
    font-family:Poppins;
}
 * {
    z-index: 2;
}

@media (max-width:766px) {
    #recnewsletter{padding:3px;position:relative;;display:block;text-align:center;margin:auto}
}

@media (min-width:767px) {
     .portfolio-item {
    margin: 0 0 30px;
    .portfolio-item{height:320px;
    overflow:hidden}
    
}


}.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: "";
    width: 2px;
    background-color: #535353;
    left: 40px;
    margin-left: -1.5px;
    display:none;
}
.timeline>li {
    margin-bottom: 50px;
    position: relative;
    min-height: 50px;
}
.timeline>li:after, .timeline>li:before {
    content: " ";
    display: table;
}
.timeline>li:after {
    clear: both;
}
.timeline>li .timeline-panel {
    width: 100%;
    float: right;
    padding: 0 20px 0 100px;
    position: relative;
    text-align: left;
}
.timeline>li .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline>li .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.timeline>li .timeline-image {
    left: 0;
    margin-left: 0;
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 100;
    background-color: #df404c;
    color: #fff;
    border-radius: 100%;
    border: 7px solid #535353;
    text-align: center;
}
.timeline>li .timeline-image h4 {
    font-size: 10px;
    margin-top: 12px;
    line-height: 14px;
}
.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    text-align: left;
    padding: 0 20px 0 100px;
}
.timeline>li.timeline-inverted>.timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline>li.timeline-inverted>.timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.timeline>li:last-child {
    margin-bottom: 0;
}
.timeline .timeline-heading h4 {
    margin-top: 0;
    color: inherit;
}
.timeline .timeline-heading h4.subheading {
    text-transform: none;
}
.timeline .timeline-body>p, .timeline .timeline-body>ul {
    margin-bottom: 0;
}

@media (min-width:768px) {


#recnewsletter{position:absolute;left:20px;;top:5px}


    .timeline: before {
    left: 50%}
.timeline>li {
    margin-bottom: 100px;
    min-height: 100px;
}
.timeline>li .timeline-panel {
    width: 41%;
    float: left;
    padding: 0 20px 20px 30px;
    text-align: right;
}
.timeline>li .timeline-image {
    width: 100px;
    height: 100px;
    left: 50%;
    margin-left: -50px;
}
.timeline>li .timeline-image h4 {
    font-size: 13px;
    margin-top: 16px;
    line-height: 18px;
}
.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    text-align: left;
    padding: 0 30px 20px 20px;
}
}@media (min-width:992px) {

#recnewsletter{position:absolute;left:20px;;top:5px}
.portfolio-item {min-height:270px;}

    .timeline>li .timeline-panel, .timeline>li.timeline-inverted>.timeline-panel {
    padding: 0 20px 20px;
}
.timeline>li {
    min-height: 150px;
}
.timeline>li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px;
}
.timeline>li .timeline-image h4 {
    font-size: 18px;
    margin-top: 30px;
    line-height: 26px;
}
}@media (min-width:1200px) {

#recnewsletter{position:absolute;left:20px;;top:5px}


    .timeline>li {
    min-height: 170px;
}
.timeline>li .timeline-panel {
    padding: 0 20px 20px 100px;
}
.timeline>li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
}
.timeline>li .timeline-image h4 {
    margin-top: 40px;
}
.timeline>li.timeline-inverted>.timeline-panel {
    padding: 0 100px 20px 20px;
}
}.team-member {
    text-align: center;
    margin-bottom: 50px;
}
.team-member img {
    margin: 0 auto;
    border: 7px solid #fff;
}
.team-member h4 {
    margin-top: 25px;
    margin-bottom: 0;
    text-transform: none;
}
.team-member p {
    margin-top: 0;
}
aside.clients img {
    margin: 50px auto;
}
section.contact {
   
    background-position: center;
    background-repeat: no-repeat;
    color: #fff
  
}
section.contact .section-heading {
    color: #fff;
}
section.contact .section-subheading {
    color: #fff;
}
section.contact .section-subheading p{
    color: #fff;
}

section.contact .form-group {
    margin-bottom: 25px;
}
section.contact .form-group input, section.contact .form-group textarea {
    padding: 20px;
}
section.contact .form-group input.form-control {
    height: auto;
}
section.contact .form-group textarea.form-control {
    height: 236px;
}
section.contact .form-control:focus {
    border-color: #535353;
    box-shadow: none;
}
section.contact ::-webkit-input-placeholder {
    font-family: "Poppins",  sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #c0c0c0;
}
section.contact :-moz-placeholder {
    font-family: "Poppins",  sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #c0c0c0;
}
section.contact ::-moz-placeholder {
    font-family: "Poppins", , sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #c0c0c0;
}
section.contact :-ms-input-placeholder {
    font-family: "Poppins", , sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #c0c0c0;
}
section.contact .text-danger {
    color: #e74c3c;
}


footer {
    padding: 25px 0;
    text-align: center;
}
footer span.copyright {
    line-height: 40px;
    text-transform: uppercase;
    text-transform: none;
}
footer ul.quicklinks {
    margin-bottom: 0;
    line-height: 40px;
    text-transform: uppercase;
    text-transform: none;
}
ul.social-buttons {
    margin-bottom: 0;
}
ul.social-buttons li a {
    display: block;
    background-color: #222;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    outline: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
    background-color: #df404c;
}
.btn.active, .btn:active, .btn:active:focus, .btn:focus {
    outline: 0;
}
.portfolio-modal .modal-dialog {
    margin: 0;
    height: 100%;
    width: auto;
}
.portfolio-modal .modal-content {
    border-radius: 0;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
}
.portfolio-modal .modal-content h2 {
    margin-bottom: 15px;
    font-size: 3em;
}
.portfolio-modal .modal-content p {
    margin-bottom: 30px;
}
.portfolio-modal .modal-content p.item-intro {
    margin: 20px 0 30px;
    font-family:Poppins;
    font-style: italic;
    font-size: 16px;
}
.portfolio-modal .modal-content ul.list-inline {
    margin-bottom: 30px;
    margin-top: 0;
}
.portfolio-modal .modal-content img {
    margin-bottom:5px;
    display:block
}
.portfolio-modal .close-modal {
    position: absolute;
    width: 75px;
    height: 75px;
    background-color: transparent;
    top: 25px;
    right: 25px;
    cursor: pointer;
}
.portfolio-modal .close-modal:hover {
    opacity: .3;
}
.portfolio-modal .close-modal .lr {
    height: 75px;
    width: 1px;
    margin-left: 35px;
    background-color: #222;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
    height: 75px;
    width: 1px;
    background-color: #222;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    z-index: 1052;
}
.portfolio-modal .modal-backdrop {
    opacity: 0;
    display: none;
}
::-moz-selection {
    text-shadow: none;
    background: #df404c;
}
::selection {
    text-shadow: none;
    background: #df404c;
}
img::selection {
    background: 0 0;
}
img::-moz-selection {
    background: 0 0;
}













.text-primary, a{color:#df404c}
 a:hover{color:#1aa2e3}

a {text-decoration:none;}


.portfolio-item h4{font-size:16px}


#logo {text-decoration:none;color:#1aa2e3;font-size:40px}
#logo .bianco{color:#fff}
a#logo:hover{color:#df404c}
a#logo:hover .bianco{color:#df404c}

#logo  img{max-height:70px;margin-bottom:10px;margin-left:10px}
.navbar-custom .navbar-toggle {
    background-color:#df404c;
    border-color:#df404c;
  
}


h3  {color:#df404c}



body {color:#535353}

#navlogin{position:relative}

.btn-xl { background-color:#df404c;
    border-color:#df404c;}
    
    
    .btn-xl:hover { background-color:#1aa2e3;
    border-color:#1aa2e3}
    
    
.timeline>li .timeline-image { background-color:#df404c;}
    
    .btn-primary {background-color:#535353;border-color:#535353}
    
       .btn-primary:hover {background-color:#df404c;border-color:#df404c} 
    
    


 .portfolio-item .portfolio-link .portfolio-hover {    background: rgba(0,0,0,.5);}


.btn-xl.active, .btn-xl:active, .btn-xl:focus, .btn-xl:hover, .open .dropdown-toggle.btn-xl {
    
    background-color:#df404c;
    border-color:#df404c;
}



.navbar-custom .navbar-nav>.active>a{ background-color:#df404c;}

.navbar-custom .navbar-toggle:hover {
    background-color:#1aa2e3;
        border-color:#1aa2e3;
}

.navbar-custom.affix {
    background-color:#fefcff;
}


.navbar-custom {
    background-color:#fefcff;
    
}

.navbar-custom .nav li a  {
   
    color:#535353;

}

#logo {margin.0;paddding:0}





.timeline>li .timeline-image img{
   width:100%
}



.intro-lead-in{text-shadow: 2px 2px #1aa2e3; font-size:30px;}



.intro-heading{text-shadow: 3px 3px #fefcff; font-size:40px;}

.intro-heading .invert{color:#fefcff;text-shadow: 3px 3px #1aa2e3; }


.navbar-custom .navbar-toggle{
    color: #fefcff;

}


.navbar-custom .navbar-nav>.active>a
{
    background-color: #1aa2e3
}




 .btn-primary.active,.btn-primary:active,.btn-xl.active,.btn-xl:active,.open .dropdown-toggle.btn-primary,.open .dropdown-toggle.btn-xl
{
    background-color:#535353;
}

.navbar-custom .nav li a:focus,.navbar-custom .nav li a:hover{
    color: #1aa2e3
    
   } 
    header .intro-text .intro-heading{color: #1aa2e3}
    
    



section.contact{background-color:#1aa2e3}

section.contact .text-danger {color:#535353}
section.contact .text-muted{color:#535353}

#navlogin {background-color:#535353}
#navlogin a  {color:#fff}

.portfolio-item .portfolio-caption{padding:7px}

.portfolio-item .portfolio-caption a{text-decoration:none;color:#000}
.portfolio-item .portfolio-caption a h6{font-weight:normal;font-size:11px;color:#535353;font-family:Poppins;padding-bottom:5px;margin:0;text-decoration:none;}
.portfolio-item .portfolio-caption a:hover *{color:#df404c}

.portfolio-modal .modal-content img.alignleft { float: left; padding: 5px 5px 5px 0; margin:0}
.portfolio-modal .modal-content img.alignright { float: right; padding: 5px 0 5px 5px;; margin:0 }
.boxright{margin-bottom:20px;border-bottom: 1px solid #dadada }
.boxright h4{padding-bottom:10px}
.modal-body h3{padding-bottom:10px;padding-top:5px;color:#df404c}
.distancer{clear:both;display:block;padding:4px}
.boxtitolare{margin-top:10px;margin-bottom:10px; }
.boxdocente {margin-bottom:20px; padding:10px; border-bottom: 1px solid silver;}

#button {
  display: inline-block;
  background-color: #df404c;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button:after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
	
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
	
mark {
  cursor: pointer;
  background-color: #fffea2;
  font-weight: bold;
font-size: 1.2em;
}

.has-error input ,.has-error select, .has-error{border:1px solid #df404c}

.boxoffre{padding:10px;margin:20px;background-color:#ebebeb}


#ricercacorsi{color:#fff;background-color:#535353;padding:20px;text-align:center;}


#myCarousel .carousel-inner{background-color:#535353}

.modal-body h1  {font-size:20px;margin:3px;font-weight:bold}
.modal-body h2  {font-size:18px;margin:3px}
.modal-body h3  {font-size:16px;margin:3px}
.modal-body h4  {font-size:15px;margin:3px}
.modal-body h5  {font-size:14px;margin:3px}







#galleryModal.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  padding:0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  overflow:hidden;
}

/* Modal Content */
#galleryModal .modal-content {
  position: relative;
  text-align:center;
  background-color: #000;
  margin: auto;
  padding: 0;
  width: 95%;
  height:100%;
   overflow:hidden;

}



/* The Close Button */
#galleryModal .close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index:100000000;
  opacity:0.5
}

#galleryModal .close:hover,
#galleryModal .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
#galleryModal .mySlides {
  display: none;
  text-align:center;
   width: 100%;
  height:100%;
   overflow:hidden;

}

#galleryModal .mySlides img{
max-height:100%;margin:auto
}



/* Next & previous buttons */
#galleryModal .prev,
#galleryModal .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
#galleryModal .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


#galleryModal .prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
#galleryModal .prev:hover,
#galleryModal .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  text-decoration:none;
  opacity:0.3
}

/* Number text (1/3 etc) */
#galleryModal .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
#galleryModal .caption {
  text-align: center;
position:absolute;
bottom:0;left:0;width:100%;
  padding:5px;
  color:#f2f2f2;
    background-color: rgba(0, 0, 0, 0.2);
    z-index:1000000
}

img.demo {
  opacity: 0.6;
}

#galleryModal .active,
#galleryModal .demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}








@media screen and (max-width: 700px) {
  .text-right {
    text-align:left
  }
}

