/* Generell styling 2016-10-15 */

*		{box-sizing:border-box;}
body		{background-color:#f1f1f1; margin:0px;}

a:link		{text-decoration:none; color:#000000;}
a:visited		{text-decoration:none; color:#2198c0;}
a:active		{text-decoration:none; color:#df0023;}
a:hover		{text-decoration:none; color:#df0023;}

table		{max-width:900px; position:relative; margin:auto; spacing:2px;}
td		{padding:7px;}
p		{text-indent:0px; font-family:palatino linotype; font-size:16px; color:#000000;}
ul, ol		{font-family:arial; font-size:12px; color:#000000;}
hr		{border:solid 2px #2198c0;}

.hrub		{font-family:arial; font-size:25px; font-weight:bold;}
.rub		{font-family:palatino linotype; font-size:20px; font-weight:bold; color:#df0023;}
.srub		{font-family:arial;font-size:16px; font-weight:bold;}
.bildtxt		{font-family:arial; font-size:12px; font-weight:bold;}
.special		{background-color:#2198c0;color:#ffffff;font-family:arial;font-size:25px;}

#rcorners1		{border-radius: 15px;padding: 15px;}
#rcorners2		{border-radius: 10px;padding: 10px;}

img, iframe 	{width:100%;height:auto;border:0px;margin-top:5px;}


[class*="col-"] {float: left;}

/* For mobile phones: */
[class*="col-"] {width: 100%;}

@media only screen and (min-width: 700px)
	{/* For desktop: */
.col-1 	{width: 8.33%;}
.col-2 	{width: 16.66%;}
.col-3 	{width: 25%;}
.col-4 	{width: 33.33%;}
.col-5 	{width: 41.66%;}
.col-6 	{width: 50%;}
.col-7 	{width: 58.33%;}
.col-8 	{width: 66.66%;}
.col-9 	{width: 75%;}
.col-10 	{width: 83.33%;}
.col-11 	{width: 91.66%;}
.col-12 	{width: 100%;}
}


/* Slideshow behållare */
.slideshow-container {max-width: 850px; position: relative;}

/* Bildspelstext */
.text		{color: #ffffff; font-family:verdana;font-size: 16px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}

/* Nummertext (1/3 etc) */
.numbertext 	{color: #000000; font-family:verdana;font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}

/* Indikatorkulorna */
.dot 		{height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active 		{background-color: #717171;}

/* Fading animation */
.fade 		{-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}
		@-webkit-keyframes fade {from {opacity: .5} to {opacity: 1}}
		@keyframes fade {from {opacity: .5} to {opacity: 1}}

/* Minskad textstorlek på mindre skärmar */
		@media only screen and (max-width: 300px) {.text {font-size: 11px}}


/*Zooma en bild*/
#myImg 		{border-radius: 5px; cursor: pointer; transition: 0.3s;}

#myImg:hover 	{opacity: 0.7;}

/* The Modal (background) */
.modal 		{display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0;
    		width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */
    		background-color: rgba(0,0,0,0.9); /* Black w/ opacity */}

/* Modal Content (image) */
.modal-content 	{margin: auto; display: block; width: 80%; max-width: 800px; }

/* Caption of Modal Image */
#caption 		{font-family:verdana; margin: auto; display: block; width: 80%; max-width: 800px; text-align: center; color: #ffffff; padding: 10px 0; height: 150px;}

/* Add Animation */
.modal-content, #caption {-webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;}
		@-webkit-keyframes zoom {
    		from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)}}
		@keyframes zoom {
    		from {transform:scale(0)} to {transform:scale(1)}}

/* The Close Button */
.close 		{position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }
.close:hover,
.close:focus 	{color: #bbb; text-decoration: none; cursor: pointer;}

/* 100% Image Width on Smaller Screens */
		@media only screen and (max-width: 700px){.modal-content {width: 100%;}}