@charset "UTF-8";
/* theme colors are being set in the theme-xxx.css files in the theme folder*/
 
* { box-sizing: border-box; }

.w3-roboto {font-family: sans-serif; }

/* Slideshow text  related */
.quot {font-weight:bold;color:#fff;text-shadow:2px 2px 8px #000;;font-style:italic;text-align:left;;direction:ltr}
.w3-quot {font-weight:bold;color:#fff;text-shadow:2px 2px 8px #000;font-family:sans-serif;}
.logotext {font-weight: bold;color:#cddc39 !important;text-align:left;direction:ltr}
.logo {height:65px;width:auto;float:left;padding-right:1em}

/* link related */
* a {text-decoration:none; font-weight: bold; font-style: cursive;}
.w3-bar-menu a {display: block;padding:3px;text-decoration:none; font-weight: bold;text-align:left}
.w3-menu {font-weight:bold;font-style:italic}
.w3-related a {display: block;padding:3px;text-decoration:none; font-size:16px;font-weight: bold}
.w3-related a:hover { color:white!important;}  

/* format the Head tags */
h1,h2,h3,h4,h5 {padding:0em}

h1{font-size:1.8em !important}
h2{font-size:1.6em !important}
h3,h5{font-size:1.1em !important}
h4{font-size:1.4em !important}
h6{font-size:1em !important}

/* format the paragraphs */
p {text-align:justify; padding:4px 16px!important;font-size:16px;}

input,textarea { background:whitesmoke;border:1px solid #ccc;border-radius:6px; padding:3px;}

/* make the max width and center it when needed */
.w3-wrapper {margin:0px auto; max-width:1200px;position: center;padding:15px; z-index: 2 }

/* for the cookie warning screen */
.w3-noscriptmsg {z-index: 2 !important; padding-top:30px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}

/* the slide show items*/
.w3-slideshow {width:100%;padding:0px;margin:0px;}
.w3-side-height {min-height:10vw;}
.w3-tag, .fa ,.w3-tag-mobile {cursor:pointer}
.w3-tag {height:20px;width:20px;padding:0;font-size:10px;margin: 7px;text-align:center;line-height:20px}
.index-pict {width:100%;max-width:300px;float:left;padding:10px}
#w3-slideshow-wrapper {width:100%;position:absolute;top:30%;left:0px}
/* ANIMATIONS */
/* animate the slideshow in desktop view*/
.desk-slideshow-container { padding-top: 20%;
    animation-timing-function:ease-in-out;
    -webkit-animation: mymove 45s ease-in-out infinite ; 
    -moz-animation: mymove 45s ease-in-out infinite ; 
    -ms-animation: mymove 45s ease-in-out infinite ; 
    -o-animation: mymove 45s ease-in-out infinite ; 
    animation: mymove 45s ease-in-out infinite  ;   } /* the 'slideshow on top of the desktop page */
    @-webkit-keyframes mymove {   0%   { background-position: 100% 0% ;background-size:  150% }  25% {background-position: 0% 0%;background-size:  150%}  50% {background-position: 0% 100%;background-size:  100%} 75% {background-position: 100% 100%;background-size:  180%} 100%   { background-position: 100% 0% ;background-size:  150% }  } 
    @-moz-keyframes mymove {   0%   { background-position: 100% 0% ;background-size:  150% }  25% {background-position: 0% 0%;background-size:  150%}  50% {background-position: 0% 100%;background-size:  100%} 75% {background-position: 100% 100%;background-size:  180%} 100%   { background-position: 100% 0% ;background-size:  150% }  } 
    @-ms-keyframes mymove {   0%   { background-position: 100% 0% ;background-size:  150% }  25% {background-position: 0% 0%;background-size:  150%}  50% {background-position: 0% 100%;background-size:  100%} 75% {background-position: 100% 100%;background-size:  180%} 100%   { background-position: 100% 0% ;background-size:  150% }  } 
    @-o-keyframes mymove {   0%   { background-position: 100% 0% ;background-size:  150% }  25% {background-position: 0% 0%;background-size:  150%}  50% {background-position: 0% 100%;background-size:  100%} 75% {background-position: 100% 100%;background-size:  180%} 100%   { background-position: 100% 0% ;background-size:  150% }  } 
    @keyframes mymove { 0%   { background-position: 100% 0% ;background-size:  150% }  25% {background-position: 0% 0%;background-size:  150%}  50% {background-position: 0% 100%;background-size:  100%} 75% {background-position: 100% 100%;background-size:  180%} 100%   { background-position: 100% 0% ;background-size:  150% }  }
    
/* animate the top slideshow in mobile view*/
.mobile-slideshow-container { padding-top: 30%; 
    animation-timing-function:ease-in-out;
    -webkit-animation: myMobileMove 20s ease-in-out infinite ; 
    -moz-animation: myMobileMove 20s ease-in-out infinite ;
    -ms-animation: myMobileMove 20s ease-in-out infinite ;
    -o-animation: myMobileMove 20s ease-in-out infinite ;
    animation: myMobileMove 20s ease-in-out  infinite  ; } /* the 'slideshow on top of the mobile page */
    @-webkit-keyframes myMobileMove {   0%   { background-position: 100% 0% ;background-size:  150% }  50%   { background-position: 00% 100% ;background-size:  100% } 100%   { background-position: 100% 0% ;background-size:  150% } }  
    @-moz-keyframes myMobileMove {   0%   { background-position: 100% 0% ;background-size:  150% }  50%   { background-position: 00% 100% ;background-size:  100% } 100%   { background-position: 100% 0% ;background-size:  150% } }  
    @-ms-keyframes myMobileMove {   0%   { background-position: 100% 0% ;background-size:  150% }  50%   { background-position: 00% 100% ;background-size:  100% } 100%   { background-position: 100% 0% ;background-size:  150% } }  
    @-o-keyframes myMobileMove {   0%   { background-position: 100% 0% ;background-size:  150% }  50%   { background-position: 00% 100% ;background-size:  100% } 100%   { background-position: 100% 0% ;background-size:  150% } } 
    @keyframes myMobileMove {   0%   { background-position: 100% 0% ;background-size:  150% }  50%   { background-position: 00% 100% ;background-size:  100% } 100%   { background-position: 100% 0% ;background-size:  150% } } 
    
/* dont animate index pages changed by php selector and javascript */  
.desk-fixed { padding-top: 20%;  background-position: 0% 30%;}
    
/* dont animate index pages changed by php selector and javascript */  
.mobile-fixed { padding-top: 30%;  background-position: 0% 30%; }
/* General properties for backgrounds */
.w3-picture-props {position: relative; width: 100%; background-size:100%;background-repeat: no-repeat;border-radius:8px 8px 0px 0px ;}

#slidedots  {   min-height:35px;border-radius:0px 0px 8px 8px ;}

/* container for smaller picture shows */ 
.container { padding-top: 40.55%;} /* 40.55 % = 900 x 365 Aspect Ratio of the pictures*/
/* end of ANIMATIONS */
/* the missing css tags from w3, at least I needed those */

.w3-padding-medium {padding:8px 16px !important;}
.w3-related {min-height:200px;}
.w3-bold {font-weight:bold}
.w3-head-text {float:left;font-size:1em;color:#fff;text-shadow:0px 0px 2px #000;font-style:italic;font-weight:900}
.w3-italic {font-style:italic}
.w3-border-green { border:2px dashed #aaa}
.w3-pointer {cursor:pointer}
.w3-margin-top-small {margin-top:8px!important}

/* the pseudo 'paralax' backgrounds */
.w3-bgimg-2 {background-image: url("../images/General/passports1.jpg");  }
.w3-bgimg-3 {background-image: url("../images/General/eu-countries.jpg");}
.w3-bgimg-4 {background-image: url("../images/Schengen/index-alt.jpg");}
.w3-bgimg-5 {background-image: url("../images/General/evisa.jpg");}
.w3-head-props {min-height: 40px; width:100%; }

/* The general prpoerties for pseudo scroll */
.w3-country-props {min-height: 250px; line-height:2; }
.w3-bgimg-props {position:relative; width:100%;  height: 100%; opacity:1;background-attachment: fixed;  background-position: center; background-repeat: no-repeat; background-size: cover;}
.w3-country-text {width:100%;left:65% !important;top:0 !important;transform:translate(-65%, top:0%);-ms-transform:translate(-65%,0%) }
.w3-country-text-single {width:100%;left:65% !important;top:50% !important;transform:translate(-65%, top:50%) ;-ms-transform:translate(-65%,50%) ;line-height: 250px}

/* menu and side bar related items*/
#w3-mobile-bar {width:100%;height:45px;z-index:3;position:fixed;top:0px; left:0px; }
#navMobile { width:100%;overflow:auto;z-index:3;position:fixed; top:45px ;left:0px;padding:5px;}

/* the top menu settings */
.w3-menu-bar { font-size: 16px !important; font-weight:bold !important;}
#w3-menuwrapper{ position: relative; height: auto; }
div#w3-top-menu-div{  margin:0px auto;  width: 100%;  position: center;  min-height: 50px;   display: table;   padding: 0px;   -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; }
div#w3-top-menu-div ul{  list-style: none;  position: relative; margin: 0; padding: 0; width: 100%;  display: table-cell; text-align: center;  vertical-align: middle;  text-transform: uppercase;  -webkit-transition: all .5s;   transition: all .5s;  }
div#w3-top-menu-div ul li{  display: inline; text-align: center; margin:  auto; }
div#w3-top-menu-div ul li a{  text-decoration: none;  text-align: center; display: inline-block; padding: 5px 0px}

/* make all dynamic links invisible at the start */
 .w3-printonly,.mySlides, .myFrame, .MenuFrame, .related_forms, .printer,  #paragraph,  #DeskSideMenu, #first_page {display:none;}

 div#w3-lan-select{  margin:0px auto;  width: 100%;  min-height: 50px;   display: table;   padding: 0px;   -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; }
div#w3-lan-select ul{  list-style: none;  position: relative; margin: 0; padding: 0; width: 100%;  display: table-cell;   vertical-align: middle;  text-transform: uppercase;  -webkit-transition: all .5s;   transition: all .5s;  }
div#w3-lan-select ul li{  display: inline;  margin:  auto; }
div#w3-lan-select ul li a{  text-decoration: none;   display: inline-block; padding: 5px 5px}

/* the progress bar */
#myProgressbar { width:100%;background-color:white;display:none;opacity:0.6;filter: alpha(opacity=60);margin-bottom:5px}
#myProgress {width:1%;height:3px;background-color:green;perspective: 4px;}

/* for the slice slideshow */
.shadow { width: 100%; height: 90px; position: relative; margin-top: -60px; background: transparent url(../images/Layout/shadow.png) no-repeat bottom center; background-size: 100% 100%; z-index: -1; display: none; }
.shadow-big { width: 100%; height: 150px; position: relative; margin-top: -90px; background: transparent url(../images/Layout/shadow.png) no-repeat bottom center; background-size: 100% 100%; z-index: -1; display: none; }

.w3-footer {margin-top:1em;font-size:.8em;}

#googlemap { margin:25px auto; width: 95%; height: 240px;border:1px solid #ccc; background:white;vertical-align:middle;text-align:center}

.w3-topic-header { padding:0px 15px}

 .w3-opacity:hover , .w3-opacity:focus {   opacity: 1; } 
 
 /* animating the back button */ 
.button { margin-top:10px; margin-right:10px;padding:5px 25px; text-align:center; outline:none; border:none; border-radius:8px; font-size:20px; box-shadow: 0 6px 4px#888;}
.button:active { background:#cddc39; box-shadow:0 3px  2px #444; transform: translateY(4px);}

.mainbutton { margin-top:3px; margin-right:4px;text-align:center; font-size:14px; width:40px; border:1px solid #aaa;border-bottom:none;border-radius:4px ;box-shadow:-1px -1px 2px #aaa }

/* tackle all the different media types */
@media (max-width:800px){ .w3-xxlarge{font-size:2em !important} .w3-padding {padding:5px !important} .w3-medium {font-size: 12px !important;} h1 {text-align:center} .w3-wrapper {margin-top:0px} .w3-padding-small{padding:0px 8px!important}

/* the headache case : the size of the top menu on landscape mobiles */
#w3-menuwrapper {display:none!important}, #w3-mobile-bar {display:block !important;}}

/* premium countries */
.premium5 {color:gold;text-shadow:0px 0px 2px black;}

.randcards {width:100%;max-width:300px;}
.randcards:nth-child(1n+0) {transform:rotate( 4deg)}
.randcards:nth-child(2n+0) {transform:rotate(-5deg)} 
.randcards:hover {animation:animatezoom .5s}@keyframes animatezoom{from{transform:scale(1)} to{transform:scale(1.1)}}

/* Style the header: fixed position (always stay at the top) */
.Readingheader {position: fixed; top: 0; z-index: 6;width: 100%;background-color: transparent; direction:ltr; }

/* The progress container */
.Readingprogress-container {width: 100%;height: 5px;background: #ccc;}

/* The progress bar (scroll indicator) */
.ReadingProgressBar {height: 5px; background: #4caf50;width: 0%;}

.w3-head-hide {color:transparent ;font-size:10px}

.w3-fieldset { background-image: url('../images/Layout/writing.png'); background-position:bottom right; background-repeat:no-repeat}
 /* Turn off parallax scrolling for all tablets and phones.  */
 a#none:hover {background:white;color:red !important}
@media (max-width: 600px) { 
    .w3-bgimg-props { background-attachment: scroll;min-height: 100px; opacity: 1;width:100%;line-height:1.5; }
    .w3-country-text-single {width:100%;left:65% !important;top:50% !important;transform:translate(-65%, top:50%) ;-ms-transform:translate(-65%,50%) ;line-height: 140px}
    }

.w3-padding-selector{ padding:2px 0px}    
/* resize for small screens */
@media (min-width:800px){ 
    h1{font-size:2em !important !important} 
    h2{font-size:1.6em !important !important} 
    h3,h5{font-size:1em !important !important} 
    h4{font-size:1.2em !important !important} 
    h6{font-size:1em !important !important} 
    .logo {height:100px;width:auto;float:left;} 
    .w3-head-text {float:left;font-size:1.6em;color:#fff;text-shadow:0px 0px 2px #000;Font-style:italic;font-weight:900}
    }

/* the headache case again part 2 */
@media (max-width:1025px) { 
    .w3-menu-bar { font-size: 12px !important; font-weight:bold !important;}
    }

/* Wide screens background settings*/
@media (min-width:1200px) { 
    .background-image { background-size: cover; display: block; filter: blur(5px); -webkit-filter: blur(5px); height: 100%;width:100%;   left: 0; position: fixed; right: 0; z-index: 1;} 
    }

  /* headache case 3 mobile menu */
@media only screen and (orientation:landscape) { 
    #navMobile { height:90vh; overflow:auto}
    }
@media only screen and (orientation:portrait) { 
    #navMobile { height:100vh;}
    }

    @media print { 
    @page { size:A4 portrait; margin-left: 5mm; margin-right: 5mm; margin-top: 25mm; margin-bottom: 25mm; -webkit-print-color-adjust: exact;}
    *, *:before, *:after { background:transparent; color:#000 !important;  }
    a, a:visited { text-decoration: none; font-weight:normal !important; padding:2px;margin:0}
    html,body { height:100%;font-size:10px !important; }
    h1,h2,h3,h4,h5 {font-family:sans-serif;color:black !important; }
     .w3-footer, #w3-menuwrapper,  button, .noprint, #topcontrol, #w3-mobile-bar, img {display:none !important;}
    .w3-printonly { display:block }
    .w3-col * {width:100%;}
    .w3-cell {padding:1px 10px !important; margin:0px !important;}
    .w3-bold {font-weight:normal!important}
    .w3-col.l10, .w3-half {width:50%;}
    .w3-col.l5, .w3-col.m5 {width:25%; font-weight:normal !important}
    .w3-col.l6,.w3-col.m6 {width:33% !important;}
    .w3-3d-effect-yellow {text-align:left;}
    .myFrame {display:block !important}
    .printer {display:block;padding:10px 25px;}
    .w3-wrapper {box-shadow:none;}
    #first_page {display:block }
    .w3-bgimg-2, .w3-bgimg-3, .w3-bgimg-4, .w3-bgimg-5{display:none;}  
    .w3-border-vert-fade {border-left:0px !important;border-right:0px !important}
    .w3-green {background:transparent;border:0px !important}
   p    { orphans:2;widows: 1;color:#000;margin-bottom: 5px !important}
   ul , ol {margin:0px 15px !important;padding:0px 20px;}
   li  { color:#000;border:0px !important; padding:1px 15px !important}
    .w3-head-hide{ font-size:1.6em !important; font-weight:bold !important;color:#000 !important;}
    h3,h5 { font-size:1.3em !important}
    h1 {font-size:2em !important;}
    p,li,div, td {font-size:1em !important}
    h1 {text-align:right;margin-bottom:1em;}
    }